From 32215357481dc52ad6a153bdce6ad9f3ed3480ff Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 21 May 2024 18:08:38 +0700
Subject: [PATCH] =?UTF-8?q?responsive=20=E0=B8=A3=E0=B8=B0=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A5=E0=B8=B2,?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B0=E0=B8=9A=E0=B8=9A=E0=B8=A5=E0=B8=B2=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TableD.vue                     |  24 +-
 src/modules/03_retire/views/addRetire.vue     |   6 +-
 src/modules/03_retire/views/main.vue          |  72 +-
 .../05_leave/components/DialogDetail.vue      | 960 +++++++++---------
 src/modules/05_leave/components/ListView.vue  | 555 ++++++----
 src/modules/05_leave/components/Table.vue     |   7 +-
 .../components/formDetail/01_SickForm.vue     | 188 ++--
 .../formDetail/04_HelpWifeBirthForm.vue       | 168 ++-
 .../components/formDetail/05_VacationForm.vue | 194 ++--
 .../formDetail/06_OrdinationForm.vue          | 202 ++--
 .../components/formDetail/07_HajjForm.vue     | 156 +--
 .../components/formDetail/08_MilitaryForm.vue | 178 ++--
 .../components/formDetail/09_StudyForm.vue    | 224 ++--
 .../components/formDetail/10_TrainForm.vue    | 212 ++--
 .../formDetail/11_WorkInternationalForm.vue   | 168 ++-
 .../formDetail/12_FollowSpouseForm.vue        | 234 ++---
 .../formDetail/13_RehabilitationForm.vue      | 156 ++-
 .../components/formDetail/formCancel.vue      | 134 ++-
 .../components/formDetail/formMain.vue        |  70 +-
 src/modules/05_leave/views/Main.vue           |  87 +-
 src/views/MainLayout.vue                      |  55 +-
 21 files changed, 2119 insertions(+), 1931 deletions(-)

diff --git a/src/components/TableD.vue b/src/components/TableD.vue
index 1c1fbdc..86a2ffd 100644
--- a/src/components/TableD.vue
+++ b/src/components/TableD.vue
@@ -10,6 +10,7 @@
     dense
     :pagination-label="paginationLabel"
     v-model:pagination="pagination"
+    :grid="!$q.screen.gt.xs"
   >
     <template v-slot:pagination="scope">
       ทั้งหมด {{ attrs.rows.length }} รายการ
@@ -28,6 +29,28 @@
     <template v-for="(_, slot) in slots" v-slot:[slot]="scope">
       <slot :name="slot" v-bind="scope || {}" />
     </template>
+    <!-- <template #item="props">
+      <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+        <q-card bordered flat>
+          <q-list>
+            <q-item
+              v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
+              :key="col.name"
+            >
+              <q-item-section>
+                <q-item-label caption>{{ col.label }}</q-item-label>
+
+                <q-item-label v-if="col.name === 'no'">
+                  {{ props.rowIndex + 1 }}
+                </q-item-label>
+
+                <q-item-label v-else>{{ col.value }}</q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+      </div>
+    </template> -->
   </q-table>
 </template>
 <script setup lang="ts">
@@ -42,7 +65,6 @@ const props = defineProps({
   },
 });
 
-
 const pagination = ref({
   sortBy: "desc",
   descending: false,
diff --git a/src/modules/03_retire/views/addRetire.vue b/src/modules/03_retire/views/addRetire.vue
index 27a91dc..8876715 100644
--- a/src/modules/03_retire/views/addRetire.vue
+++ b/src/modules/03_retire/views/addRetire.vue
@@ -186,7 +186,7 @@ function downloadFile(data: string) {
             <div class="col-xs-12 col-sm-12">
               <div class="col-12 row q-pa-sm q-col-gutter-sm">
                 <q-input
-                  class="col-8"
+                  class="col-md-8 col-xs-12"
                   dense
                   outlined
                   v-model="tranferOrg"
@@ -196,7 +196,7 @@ function downloadFile(data: string) {
                   :rules="[(val:string) => !!val || `${'กรุณากรอกสถานที่ยื่นขอลาออกจากราชการ'}`]"
                 />
                 <datepicker
-                  class="col-2"
+                  class="col-md-2 col-xs-12"
                   menu-class-name="modalfix"
                   v-model="dateCommand"
                   :locale="'th'"
@@ -240,7 +240,7 @@ function downloadFile(data: string) {
                   </template>
                 </datepicker>
                 <datepicker
-                  class="col-2"
+                  class="col-md-2 col-xs-12"
                   menu-class-name="modalfix"
                   v-model="dateLeave"
                   :locale="'th'"
diff --git a/src/modules/03_retire/views/main.vue b/src/modules/03_retire/views/main.vue
index e02b01b..d0cbd59 100644
--- a/src/modules/03_retire/views/main.vue
+++ b/src/modules/03_retire/views/main.vue
@@ -209,13 +209,11 @@ const clickBack = () => {
             </div>
           </div>
           <div>
-            <q-table
+            <d-table
               flat
               bordered
               dense
               row-key="id"
-              class="custom-table2"
-              style="max-height: 80vh"
               :rows="rows"
               :columns="columns"
               :visible-columns="visibleColumns"
@@ -264,49 +262,37 @@ const clickBack = () => {
                   </q-td>
                 </q-tr>
               </template>
-            </q-table>
+              <template #item="props">
+                <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+                  <q-card
+                    bordered
+                    flat
+                    @click="router.push(`/retire/` + props.row.id)"
+                  >
+                    <q-list>
+                      <q-item
+                        v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
+                        :key="col.name"
+                      >
+                        <q-item-section>
+                          <q-item-label caption>{{ col.label }}</q-item-label>
+
+                          <q-item-label v-if="col.name === 'no'">
+                            {{ props.rowIndex + 1 }}
+                          </q-item-label>
+
+                          <q-item-label v-else>{{ col.value }}</q-item-label>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-card>
+                </div>
+              </template>
+            </d-table>
           </div>
         </q-card>
       </div>
     </div>
   </div>
 </template>
-<style scoped lang="scss">
-.custom-table2 {
-  max-height: 64vh;
-
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-  }
-
-  .q-table td:nth-of-type(2) {
-    z-index: 3 !important;
-  }
-
-  .q-table th:nth-of-type(2),
-  .q-table td:nth-of-type(2) {
-    position: sticky;
-    left: 0;
-    z-index: 1;
-  }
-  .q-table thead tr:last-child th {
-    top: 48px;
-  }
-
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>
+<style scoped lang="scss"></style>
diff --git a/src/modules/05_leave/components/DialogDetail.vue b/src/modules/05_leave/components/DialogDetail.vue
index 7af57cd..24f4e2a 100644
--- a/src/modules/05_leave/components/DialogDetail.vue
+++ b/src/modules/05_leave/components/DialogDetail.vue
@@ -6,10 +6,10 @@ import config from "@/app.config";
 
 /** import type*/
 import type {
-	FremDetail,
-	FormDelete,
-	FormDeleteRef,
-	FromCancelDetail,
+  FremDetail,
+  FormDelete,
+  FormDeleteRef,
+  FromCancelDetail,
 } from "@/modules/05_leave/interface/response/leave";
 
 /** import componest*/
@@ -38,42 +38,42 @@ const titleMainCancle = ref<string>("รายละเอียดการย
 const titleName = ref<string>("");
 const mixin = useCounterMixin();
 const {
-	showLoader,
-	hideLoader,
-	messageError,
-	date2Thai,
-	success,
-	dialogConfirm,
-	calculateDurationYmd,
+  showLoader,
+  hideLoader,
+  messageError,
+  date2Thai,
+  success,
+  dialogConfirm,
+  calculateDurationYmd,
 } = mixin;
 const $q = useQuasar();
 
 /**Prop */
 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,
-	},
+  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,
+  },
 });
 
 /**checkForm Form การลา*/
@@ -81,89 +81,89 @@ const checkForm = ref<string>("");
 
 /** Form รายละเอียดข้อมูล*/
 const formData = reactive<FremDetail>({
-	id: "", //Id การยื่นขอลา
-	leaveTypeName: "", // Name ประเภทการลา
-	leaveTypeId: "", //Id ประเภทการลา
-	fullname: "", //คำนำหน้า ชื่อ นามสกุล คนขอลา
-	dateSendLeave: new Date(), // วันที่ยืนใบลา
-	status: "", //สถานะการของลา
-	leaveDateStart: new Date(), //วันเริ่มการลา
-	leaveDateEnd: new Date(), //วันสิ้นสุดการลา
-	leaveCount: "", //จำนวนวันลา
-	leaveWrote: "", //เขียนที่
-	leaveAddress: "", //สถานที่ติดต่อขณะลา
-	leaveNumber: "", //หมายเลขที่ติดต่อขณะลา
-	leaveDetail: "", //รายละเอียดการลา
-	leaveDocument: "", //อัปโหลดเอกสารประกอบรายละเอียด
-	leaveDraftDocument: "", //อัปโหลดแบบฟอร์มการลา
-	leaveLastStart: new Date(), //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
-	leaveLastEnd: new Date(), //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
-	leaveTotal: "", //จำนวนวันที่ลา(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: "", //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท)
-	ordainDayLocationName: "", //สถานที่บวช ชื่อวัด(ลาอุปสมบท)
-	ordainDayLocationAddress: "", //สถานที่บวช ที่อยู่(ลาอุปสมบท)
-	ordainDayLocationNumber: "", //สถานที่บวช หมายเลขโทรศัพท์(ลาอุปสมบท)
-	ordainDayOrdination: new Date(), //สถานที่บวช วันอุปสมบท(ลาอุปสมบท)
-	ordainDayBuddhistLentName: "", //สถานที่จำพรรษา ชื่อวัด(ลาอุปสมบท)
-	ordainDayBuddhistLentAddress: "", //สถานที่จำพรรษา ที่อยู่(ลาอุปสมบท)
-	hajjDayStatus: "", //เคย/ไม่เคยไปประกอบพิธีฮัจญ์ (ให้เลือก) (ลาประกอบพิธีฮัจญ์)
-	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: "", //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
-	approveStep: "",
-	dear: "",
-	leaveRange: "",
+  id: "", //Id การยื่นขอลา
+  leaveTypeName: "", // Name ประเภทการลา
+  leaveTypeId: "", //Id ประเภทการลา
+  fullname: "", //คำนำหน้า ชื่อ นามสกุล คนขอลา
+  dateSendLeave: new Date(), // วันที่ยืนใบลา
+  status: "", //สถานะการของลา
+  leaveDateStart: new Date(), //วันเริ่มการลา
+  leaveDateEnd: new Date(), //วันสิ้นสุดการลา
+  leaveCount: "", //จำนวนวันลา
+  leaveWrote: "", //เขียนที่
+  leaveAddress: "", //สถานที่ติดต่อขณะลา
+  leaveNumber: "", //หมายเลขที่ติดต่อขณะลา
+  leaveDetail: "", //รายละเอียดการลา
+  leaveDocument: "", //อัปโหลดเอกสารประกอบรายละเอียด
+  leaveDraftDocument: "", //อัปโหลดแบบฟอร์มการลา
+  leaveLastStart: new Date(), //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
+  leaveLastEnd: new Date(), //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
+  leaveTotal: "", //จำนวนวันที่ลา(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: "", //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท)
+  ordainDayLocationName: "", //สถานที่บวช ชื่อวัด(ลาอุปสมบท)
+  ordainDayLocationAddress: "", //สถานที่บวช ที่อยู่(ลาอุปสมบท)
+  ordainDayLocationNumber: "", //สถานที่บวช หมายเลขโทรศัพท์(ลาอุปสมบท)
+  ordainDayOrdination: new Date(), //สถานที่บวช วันอุปสมบท(ลาอุปสมบท)
+  ordainDayBuddhistLentName: "", //สถานที่จำพรรษา ชื่อวัด(ลาอุปสมบท)
+  ordainDayBuddhistLentAddress: "", //สถานที่จำพรรษา ที่อยู่(ลาอุปสมบท)
+  hajjDayStatus: "", //เคย/ไม่เคยไปประกอบพิธีฮัจญ์ (ให้เลือก) (ลาประกอบพิธีฮัจญ์)
+  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: "", //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
+  approveStep: "",
+  dear: "",
+  leaveRange: "",
 });
 
 /** Form รายละเอียดข้อมูล*/
 const formDataCancle = reactive<FromCancelDetail>({
-	id: "",
-	leaveTypeName: "",
-	fullname: "",
-	status: "",
-	leaveDocDelete: "",
-	leaveResonDelete: "",
-	leaveWrote: "",
-	leaveAddress: "",
-	leaveNumber: "",
-	leaveDetail: "",
-	leaveTotal: 0,
-	leaveStartDate: new Date(),
-	leaveEndDate: new Date(),
+  id: "",
+  leaveTypeName: "",
+  fullname: "",
+  status: "",
+  leaveDocDelete: "",
+  leaveResonDelete: "",
+  leaveWrote: "",
+  leaveAddress: "",
+  leaveNumber: "",
+  leaveDetail: "",
+  leaveTotal: 0,
+  leaveStartDate: new Date(),
+  leaveEndDate: new Date(),
 });
 
 /** form ขอยกเลิก*/
 const formDelete = reactive<FormDelete>({
-	writeAt: "",
-	reason: "",
-	doc: null,
+  writeAt: "",
+  reason: "",
+  doc: null,
 });
 
 /**Validate ข้อมูล */
@@ -171,9 +171,9 @@ 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,
+  writeAt: writeAtRef,
+  reason: reasonRef,
+  doc: docRef,
 };
 
 /**
@@ -181,107 +181,107 @@ const formDeleteRef: FormDeleteRef = {
  * @param id การลา
  */
 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.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 = calculateDurationYmd(
-				data.leaveStartDate,
-				data.leaveEndDate
-			);
-			formData.leaveWrote = data.leaveWrote ?? "-";
-			formData.leaveAddress = data.leaveAddress ?? "-";
-			formData.leaveNumber = data.leaveNumber ?? "-";
-			formData.leaveDetail = data.leaveDetail ?? "-";
-			formData.leaveDocument = data.leaveDocument;
-			formData.leaveDocument = data.leaveDocument;
-			formData.leaveRange = data.leaveRange;
-			formData.leaveLastStart =
-				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);
-			formData.leavegovernmentDate =
-				data.leaveGovernmentDate && date2Thai(data.leaveGovernmentDate);
-			formData.leaveSalary = data.leaveSalary
-				? data.leaveSalary.toLocaleString("th-TH")
-				: "-";
-			formData.leaveSalaryText = data.leaveSalaryText ?? "-";
-			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.approveStep = data.approveStep ?? "-";
-			formData.dear = data.dear ?? "-";
-			checkLeaveType(
-				formData.leaveTypeId,
-				formData.leaveTypeName,
-				formData.ordainDayLocationName,
-				formData.studyDayTrainingSubject
-			);
-		})
-		.catch((err) => {
-			props.onClickClose?.();
-			messageError($q, err);
-		})
-		.finally(() => {
-			hideLoader();
-		});
+  showLoader();
+  await http
+    .get(config.API.leaveUserId(id), {})
+    .then((res) => {
+      const data = res.data.result;
+      titleName.value = data.fullName ?? "-";
+      formData.id = data.id ?? "-";
+      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 = calculateDurationYmd(
+        data.leaveStartDate,
+        data.leaveEndDate
+      );
+      formData.leaveWrote = data.leaveWrote ?? "-";
+      formData.leaveAddress = data.leaveAddress ?? "-";
+      formData.leaveNumber = data.leaveNumber ?? "-";
+      formData.leaveDetail = data.leaveDetail ?? "-";
+      formData.leaveDocument = data.leaveDocument;
+      formData.leaveDocument = data.leaveDocument;
+      formData.leaveRange = data.leaveRange;
+      formData.leaveLastStart =
+        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);
+      formData.leavegovernmentDate =
+        data.leaveGovernmentDate && date2Thai(data.leaveGovernmentDate);
+      formData.leaveSalary = data.leaveSalary
+        ? data.leaveSalary.toLocaleString("th-TH")
+        : "-";
+      formData.leaveSalaryText = data.leaveSalaryText ?? "-";
+      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.approveStep = data.approveStep ?? "-";
+      formData.dear = data.dear ?? "-";
+      checkLeaveType(
+        formData.leaveTypeId,
+        formData.leaveTypeName,
+        formData.ordainDayLocationName,
+        formData.studyDayTrainingSubject
+      );
+    })
+    .catch((err) => {
+      props.onClickClose?.();
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 /**
@@ -290,44 +290,44 @@ async function fetchDataDetail(id: string) {
  * @param leaveTypeName  ประเภทการลา
  */
 function checkLeaveType(
-	leaveTypeId: string,
-	leaveTypeName: string,
-	ordainDayLocationName: string,
-	studyDayTrainingSubject: string
+  leaveTypeId: string,
+  leaveTypeName: string,
+  ordainDayLocationName: string,
+  studyDayTrainingSubject: string
 ) {
-	console.log(leaveTypeName);
-	console.log(leaveTypeId);
-	console.log(ordainDayLocationName);
+  console.log(leaveTypeName);
+  console.log(leaveTypeId);
+  console.log(ordainDayLocationName);
 
-	if (props.leaveType) {
-		const filtertype = props.leaveType.find((e: any) => e.id === leaveTypeId);
-		const type = filtertype.code;
-		console.log(type);
+  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") {
-			checkForm.value = "FormChildbirth";
-		} else if (type === "LV-005") {
-			checkForm.value = "FormHoliday";
-		} else if (type === "LV-006" && ordainDayLocationName === "") {
-			checkForm.value = "FormHajj";
-		} else if (type === "LV-006") {
-			checkForm.value = "FormUpasom";
-		} else if (type === "LV-007") {
-			checkForm.value = "FormCheckSelect";
-		} else if (type === "LV-008" && studyDayTrainingSubject === "") {
-			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";
-		}
-	}
+    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" && ordainDayLocationName === "") {
+      checkForm.value = "FormHajj";
+    } else if (type === "LV-006") {
+      checkForm.value = "FormUpasom";
+    } else if (type === "LV-007") {
+      checkForm.value = "FormCheckSelect";
+    } else if (type === "LV-008" && studyDayTrainingSubject === "") {
+      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";
+    }
+  }
 }
 
 /**
@@ -335,261 +335,273 @@ function checkLeaveType(
  * @param id ยกเลิกการลา
  */
 async function fetchDataCancelDetail(id: string) {
-	showLoader();
-	await http
-		.get(config.API.leaveCancelById(id))
-		.then((res) => {
-			const data = res.data.result;
-			formDataCancle.leaveTypeName = data.leaveTypeName ?? "-";
-			formDataCancle.leaveWrote = data.leaveWrote ?? "-";
-			formDataCancle.fullname = data.fullName ?? "-";
-			formDataCancle.status = convertStatud(data.status) ?? "-";
-			formDataCancle.leaveStartDate =
-				data.leaveStartDate && date2Thai(data.leaveStartDate);
-			formDataCancle.leaveEndDate =
-				data.leaveEndDate && date2Thai(data.leaveEndDate);
-			formDataCancle.leaveTotal = data.leaveTotal ?? "-";
-			formDataCancle.leaveAddress = data.leaveAddress ?? "-";
-			formDataCancle.leaveNumber = data.leaveNumber ?? "-";
-			formDataCancle.leaveResonDelete = data.leaveReasonDelete ?? "-";
-			formDataCancle.leaveDetail = data.leaveDetail ?? "-";
-			formDataCancle.leaveDocDelete = data.leaveDocDelete ?? null;
+  showLoader();
+  await http
+    .get(config.API.leaveCancelById(id))
+    .then((res) => {
+      const data = res.data.result;
+      formDataCancle.leaveTypeName = data.leaveTypeName ?? "-";
+      formDataCancle.leaveWrote = data.leaveWrote ?? "-";
+      formDataCancle.fullname = data.fullName ?? "-";
+      formDataCancle.status = convertStatud(data.status) ?? "-";
+      formDataCancle.leaveStartDate =
+        data.leaveStartDate && date2Thai(data.leaveStartDate);
+      formDataCancle.leaveEndDate =
+        data.leaveEndDate && date2Thai(data.leaveEndDate);
+      formDataCancle.leaveTotal = data.leaveTotal ?? "-";
+      formDataCancle.leaveAddress = data.leaveAddress ?? "-";
+      formDataCancle.leaveNumber = data.leaveNumber ?? "-";
+      formDataCancle.leaveResonDelete = data.leaveReasonDelete ?? "-";
+      formDataCancle.leaveDetail = data.leaveDetail ?? "-";
+      formDataCancle.leaveDocDelete = data.leaveDocDelete ?? null;
 
-			console.log(res);
-		})
-		.catch((err) => {
-			messageError($q, err);
-		})
-		.finally(() => {
-			hideLoader();
-		});
+      console.log(res);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 /** function ยินยันการบันทึกข้อมูล*/
 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);
-	}
+  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);
+  }
 }
 
 /** function บันทึกข้อมูล*/
 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, "บันทึกข้อมูลสำเร็จ");
-			props.onClickClose?.();
-		})
-		.catch((err) => {
-			messageError($q, err);
-		})
-		.finally(() => {
-			props.fetchDataTable?.();
-			hideLoader();
-		});
+  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, "บันทึกข้อมูลสำเร็จ");
+      props.onClickClose?.();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      props.fetchDataTable?.();
+      hideLoader();
+    });
 }
 
 /**** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาแล้วเปิด modal */
 watch(
-	() => props.modal,
-	() => {
-		if (props.modal === true) {
-			formDelete.writeAt = "";
-			formDelete.reason = "";
-			formDelete.doc = null;
+  () => 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);
-		}
-	}
+      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%" v-if="props.leaveStatus != 'DELETE'">
-			<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" />
+  <q-dialog v-model="props.modal" persistent>
+    <q-card q-card style="min-width: 70%" v-if="props.leaveStatus != 'DELETE'">
+      <q-card-section class="row items-center q-pa-sm">
+		<q-toolbar style="padding: 0px;">
+			<q-toolbar-title class="text-bold" style="font-size: 15px;"> {{ titleMain }}{{ titleName }} </q-toolbar-title>
+  
+			<q-btn
+			  icon="close"
+			  unelevated
+			  round
+			  dense
+			  @click="props.onClickClose"
+			  style="color: #ff8080; background-color: #ffdede"
+			/>
+		  </q-toolbar>
+		
+        <!-- <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-pa-sm row q-gutter-y-md">
+        <div
+          flat
+          :class="
+            props.leaveStatus === 'CANCEL' ? 'col-xs-12 col-sm-6' : 'col-12'
+          "
+        >
+          <!-- ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว -->
+          <FormLeave v-if="checkForm === 'FormLeave'" :data="formData" />
 
-					<!-- ลาไปช่วยเหลือภริยาที่คลอดบุตร -->
-					<FormChildbirth
-						v-else-if="checkForm === 'FormChildbirth'"
-						:data="formData"
-					/>
+          <!-- ลาไปช่วยเหลือภริยาที่คลอดบุตร -->
+          <FormChildbirth
+            v-else-if="checkForm === 'FormChildbirth'"
+            :data="formData"
+          />
 
-					<!-- ลาพักผ่อน -->
-					<FormHoliday
-						v-else-if="checkForm === 'FormHoliday'"
-						:data="formData"
-					/>
+          <!-- ลาพักผ่อน -->
+          <FormHoliday
+            v-else-if="checkForm === 'FormHoliday'"
+            :data="formData"
+          />
 
-					<!-- ลาอุปสมบท -->
-					<FormUpasom v-else-if="checkForm === 'FormUpasom'" :data="formData" />
+          <!-- ลาอุปสมบท -->
+          <FormUpasom v-else-if="checkForm === 'FormUpasom'" :data="formData" />
 
-					<!-- ลาประกอบพิธีฮัจญ์ -->
-					<FormHajj v-else-if="checkForm === 'FormHajj'" :data="formData" />
+          <!-- ลาประกอบพิธีฮัจญ์ -->
+          <FormHajj v-else-if="checkForm === 'FormHajj'" :data="formData" />
 
-					<!-- ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล -->
-					<FormCheckSelect
-						v-else-if="checkForm === 'FormCheckSelect'"
-						:data="formData"
-					/>
+          <!-- ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล -->
+          <FormCheckSelect
+            v-else-if="checkForm === 'FormCheckSelect'"
+            :data="formData"
+          />
 
-					<!-- ลาไปศึกษา -->
-					<FormStudy v-else-if="checkForm === 'FormStudy'" :data="formData" />
+          <!-- ลาไปศึกษา -->
+          <FormStudy v-else-if="checkForm === 'FormStudy'" :data="formData" />
 
-					<!-- ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน -->
-					<FormLeaveToTraining
-						v-else-if="checkForm === 'FormLeaveToTraining'"
-						:data="formData"
-					/>
+          <!-- ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน -->
+          <FormLeaveToTraining
+            v-else-if="checkForm === 'FormLeaveToTraining'"
+            :data="formData"
+          />
 
-					<!-- ลาไปปฏิบัติงานในองค์การระหว่างประเทศ -->
-					<FormLeaveToWorkInternational
-						v-else-if="checkForm === 'FormLeaveToWorkInternational'"
-						:data="formData"
-					/>
+          <!-- ลาไปปฏิบัติงานในองค์การระหว่างประเทศ -->
+          <FormLeaveToWorkInternational
+            v-else-if="checkForm === 'FormLeaveToWorkInternational'"
+            :data="formData"
+          />
 
-					<!-- ลาติดตามคู่สมรส -->
-					<FormSpouse v-else-if="checkForm === 'FormSpouse'" :data="formData" />
+          <!-- ลาติดตามคู่สมรส -->
+          <FormSpouse v-else-if="checkForm === 'FormSpouse'" :data="formData" />
 
-					<!-- ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ -->
-					<FormVocationalRehabilitation
-						v-else-if="checkForm === 'FormVocationalRehabilitation'"
-						:data="formData"
-					/>
-				</div>
+          <!-- ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ -->
+          <FormVocationalRehabilitation
+            v-else-if="checkForm === 'FormVocationalRehabilitation'"
+            :data="formData"
+          />
+        </div>
 
-				<div
-					flat
-					class="col-xs-6 col-sm-6"
-					v-if="props.leaveStatus === 'CANCEL'"
-				>
-					<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
-						outlined
-						dense
-					/>
-					<q-file
-						ref="docRef"
-						outlined
-						v-model="formDelete.doc"
-						label="เลือกไฟล์เอกสารหลักฐาน"
-						:rules="[(val) => !!val || 'กรูณา เลือกไฟล์เอกสารหลักฐาน']"
-						lazy-rules
-						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="props.leaveStatus === 'CANCEL'"
-			>
-				<q-space />
-				<q-btn
-					label="ยืนยัน"
-					unelevated
-					color="secondary"
-					dense
-					class="q-px-md"
-					@click="onClickSave"
-				/>
-			</q-card-section>
-		</q-card>
+        <div
+          flat
+          class="col-xs-12 col-sm-6 q-pa-sm"
+          v-if="props.leaveStatus === 'CANCEL'"
+        >
+          <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
+            outlined
+            dense
+          />
+          <q-file
+            ref="docRef"
+            outlined
+            v-model="formDelete.doc"
+            label="เลือกไฟล์เอกสารหลักฐาน"
+            :rules="[(val) => !!val || 'กรูณา เลือกไฟล์เอกสารหลักฐาน']"
+            lazy-rules
+            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="props.leaveStatus === 'CANCEL'"
+      >
+        <q-space />
+        <q-btn
+          label="ยืนยัน"
+          unelevated
+          color="secondary"
+          dense
+          class="q-px-md"
+          @click="onClickSave"
+        />
+      </q-card-section>
+    </q-card>
 
-		<q-card q-card style="min-width: 70%" v-if="props.leaveStatus === 'DELETE'">
-			<q-card-section class="row items-center q-pa-sm">
-				<div class="text-bold q-pl-sm">
-					{{ titleMainCancle }}{{ 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="col-12">
-					<div class="col-12 q-col-gutter-sm row items-center"></div>
-					<!-- FormCancel -->
-					<FormCancel :data="formDataCancle" />
-				</div>
-			</q-card-section>
-			<q-separator />
-		</q-card>
-	</q-dialog>
+    <q-card q-card style="min-width: 70%" v-if="props.leaveStatus === 'DELETE'">
+      <q-card-section class="row items-center q-pa-sm">
+        <div class="text-bold q-pl-sm">
+          {{ titleMainCancle }}{{ 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="col-12">
+          <div class="col-12 q-col-gutter-sm row items-center"></div>
+          <!-- FormCancel -->
+          <FormCancel :data="formDataCancle" />
+        </div>
+      </q-card-section>
+      <q-separator />
+    </q-card>
+  </q-dialog>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/05_leave/components/ListView.vue b/src/modules/05_leave/components/ListView.vue
index 65a2628..08aba27 100644
--- a/src/modules/05_leave/components/ListView.vue
+++ b/src/modules/05_leave/components/ListView.vue
@@ -19,13 +19,13 @@ import { useLeaveStore } from "@/modules/05_leave/store";
 /**ตัวแปรที่ใช้ */
 const mixin = useCounterMixin();
 const {
-	showLoader,
-	hideLoader,
-	messageError,
-	date2Thai,
-	monthYear2Thai,
-	dialogRemove,
-	success,
+  showLoader,
+  hideLoader,
+  messageError,
+  date2Thai,
+  monthYear2Thai,
+  dialogRemove,
+  success,
 } = mixin;
 const LeaveData = useLeaveStore();
 const router = useRouter();
@@ -49,41 +49,41 @@ const pageSize = ref<number>(10);
 
 /** function เรียกข้อมูลการลา*/
 async function fetchDataTable() {
-	showLoader();
-	const body = {
-		year: year.value, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
-		type: type.value, //*Id ประเภทการลา
-		status: status.value, //*สถานะการของลา
-		page: page.value.toString(), //*หน้า
-		pageSize: pageSize.value.toString(), //*จำนวนแถวต่อหน้า
-		keyword: filter.value, //keyword ค้นหา
-	};
-	await http
-		.post(config.API.leaveTableList(), body)
-		.then((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);
-		})
-		.finally(() => {
-			hideLoader();
-		});
+  showLoader();
+  const body = {
+    year: year.value, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
+    type: type.value, //*Id ประเภทการลา
+    status: status.value, //*สถานะการของลา
+    page: page.value.toString(), //*หน้า
+    pageSize: pageSize.value.toString(), //*จำนวนแถวต่อหน้า
+    keyword: filter.value, //keyword ค้นหา
+  };
+  await http
+    .post(config.API.leaveTableList(), body)
+    .then((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);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 /** function เรียกประเภทการลา */
 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);
-		});
+  await http
+    .get(config.API.leaveType())
+    .then(async (res) => {
+      leaveType.value = res.data.result;
+      LeaveData.fetchLeaveType(res.data.result);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
 }
 
 /**
@@ -92,9 +92,9 @@ async function fectOptionType() {
  * @param status การลา
  */
 const onClickView = async (id: string, status: string) => {
-	modal.value = true;
-	leaveId.value = id;
-	leaveStatus.value = status;
+  modal.value = true;
+  leaveId.value = id;
+  leaveStatus.value = status;
 };
 
 /**
@@ -102,12 +102,12 @@ const onClickView = async (id: string, status: string) => {
  * @param id
  */
 const onClickEdit = async (id: string) => {
-	router.push(`/leave/edit/${id}`);
+  router.push(`/leave/edit/${id}`);
 };
 
 //เเจ้งเตือนลบข้อมูล
 const clickDelete = (id: string) => {
-	dialogRemove($q, () => onClickDelete(id));
+  dialogRemove($q, () => onClickDelete(id));
 };
 
 /**
@@ -115,20 +115,20 @@ const clickDelete = (id: string) => {
  * @param id
  */
 const onClickDelete = async (id: string) => {
-	await http
-		.delete(config.API.leaveUserId(id))
-		.then(async (res) => {
-			success($q, "ลบข้อมูลสำเร็จ");
-			fetchDataTable();
-		})
-		.catch((err) => {
-			messageError($q, err);
-		});
+  await http
+    .delete(config.API.leaveUserId(id))
+    .then(async (res) => {
+      success($q, "ลบข้อมูลสำเร็จ");
+      fetchDataTable();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
 };
 
 /** function closePopup*/
 async function onClickClose() {
-	modal.value = false;
+  modal.value = false;
 }
 
 /**
@@ -139,13 +139,13 @@ async function onClickClose() {
  * @param k คำค้นหา
  */
 async function updateFilterTable(y: number, t: string, s: string, k: string) {
-	if (t && s) {
-		year.value = await y;
-		type.value = await t;
-		status.value = await s;
-		filter.value = await k;
-		await fetchDataTable();
-	}
+  if (t && s) {
+    year.value = await y;
+    type.value = await t;
+    status.value = await s;
+    filter.value = await k;
+    await fetchDataTable();
+  }
 }
 
 /**
@@ -154,174 +154,295 @@ async function updateFilterTable(y: number, t: string, s: string, k: string) {
  * @param ps แถวต่อหน้า
  */
 async function updatePagination(p: number, ps: number) {
-	(page.value = await p), (pageSize.value = await ps);
-	await fetchDataTable();
+  (page.value = await p), (pageSize.value = await ps);
+  await fetchDataTable();
 }
 
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(async () => {
-	await fetchDataTable();
-	await fectOptionType();
+  await fetchDataTable();
+  await fectOptionType();
 });
 </script>
 <template>
-	<Table
-		:rows="LeaveData.rows"
-		:columns="LeaveData.columns"
-		:visible-columns="LeaveData.visibleColumns"
-		v-model:inputfilter="filter"
-		v-model:inputvisible="LeaveData.visibleColumns"
-		: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="onClickView(props.row.id, props.row.status)"
-				>
-					{{ (page - 1) * pageSize + props.rowIndex + 1 }}
-				</q-td>
-				<q-td
-					key="leaveTypeName"
-					:props="props"
-					@click="onClickView(props.row.id, props.row.status)"
-				>
-					{{ props.row.leaveTypeName }}
-				</q-td>
-				<q-td
-					key="dateLeave"
-					:props="props"
-					@click="onClickView(props.row.id, props.row.status)"
-				>
-					{{ props.row.dateLeave }}
-				</q-td>
-				<q-td
-					key="dateSendLeave"
-					:props="props"
-					@click="onClickView(props.row.id, props.row.status)"
-				>
-					{{ props.row.dateSendLeave }}
-				</q-td>
+  <Table
+    :rows="LeaveData.rows"
+    :columns="LeaveData.columns"
+    :visible-columns="LeaveData.visibleColumns"
+    v-model:inputfilter="filter"
+    v-model:inputvisible="LeaveData.visibleColumns"
+    :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="onClickView(props.row.id, props.row.status)"
+        >
+          {{ (page - 1) * pageSize + props.rowIndex + 1 }}
+        </q-td>
+        <q-td
+          key="leaveTypeName"
+          :props="props"
+          @click="onClickView(props.row.id, props.row.status)"
+        >
+          {{ props.row.leaveTypeName }}
+        </q-td>
+        <q-td
+          key="dateLeave"
+          :props="props"
+          @click="onClickView(props.row.id, props.row.status)"
+        >
+          {{ props.row.dateLeave }}
+        </q-td>
+        <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="onClickView(props.row.id, props.row.status)">
-							<q-icon
-								v-if="props.row.status == 'DRAFT'"
-								size="10px"
-								color="light-grey"
-								name="mdi-circle"
-								class="q-mr-sm"
-							/>
-							<q-icon
-								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 == 'REJECT'"
-								size="10px"
-								color="red-6"
-								name="mdi-circle"
-								class="q-mr-sm"
-							/>
-							<q-icon
-								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 == 'NEW'"
-								size="10px"
-								color="orange"
-								name="mdi-circle"
-								class="q-mr-sm"
-							/>
-							<q-icon
-								v-if="props.row.status == 'DELETE'"
-								size="10px"
-								color="grey-10"
-								name="mdi-circle"
-								class="q-mr-sm"
-							/>
+        <q-td key="status" :props="props">
+          <div class="col-12 row items-center">
+            <div @click="onClickView(props.row.id, props.row.status)">
+              <q-icon
+                v-if="props.row.status == 'DRAFT'"
+                size="10px"
+                color="light-grey"
+                name="mdi-circle"
+                class="q-mr-sm"
+              />
+              <q-icon
+                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 == 'REJECT'"
+                size="10px"
+                color="red-6"
+                name="mdi-circle"
+                class="q-mr-sm"
+              />
+              <q-icon
+                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 == 'NEW'"
+                size="10px"
+                color="orange"
+                name="mdi-circle"
+                class="q-mr-sm"
+              />
+              <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 />
+              <span class="q-pr-md">{{ props.row.statusConvert }}</span>
+            </div>
+            <q-space />
 
-						<q-btn
-							v-if="
-								props.row.status != 'DELETE' &&
-								props.row.status != 'REJECT' &&
-								props.row.status != 'CANCEL'
-							"
-							flat
-							icon="mdi-dots-vertical"
-							color="grey-8"
-							for="#cancel"
-							dense
-							round
-							unelevated
-						>
-							<q-menu>
-								<q-list>
-									<q-item
-										clickable
-										v-close-popup
-										@click="onClickView(props.row.id, 'CANCEL')"
-									>
-										<q-item-section>
-											<q-item-label>ขอยกเลิก</q-item-label>
-										</q-item-section>
-									</q-item>
-									<q-item
-										v-if="props.row.status == 'DRAFT'"
-										clickable
-										v-close-popup
-										@click="onClickEdit(props.row.id)"
-									>
-										<q-item-section>
-											<q-item-label>แก้ไข</q-item-label>
-										</q-item-section>
-									</q-item>
-									<q-item
-										v-if="props.row.status == 'DRAFT'"
-										clickable
-										v-close-popup
-										@click="clickDelete(props.row.id)"
-									>
-										<q-item-section>
-											<q-item-label>ลบรายการการลา</q-item-label>
-										</q-item-section>
-									</q-item>
-								</q-list>
-							</q-menu>
-						</q-btn>
-					</div>
-				</q-td>
-			</q-tr>
-		</template>
-	</Table>
+            <q-btn
+              v-if="
+                props.row.status != 'DELETE' &&
+                props.row.status != 'REJECT' &&
+                props.row.status != 'CANCEL'
+              "
+              flat
+              icon="mdi-dots-vertical"
+              color="grey-8"
+              for="#cancel"
+              dense
+              round
+              unelevated
+            >
+              <q-menu>
+                <q-list>
+                  <q-item
+                    clickable
+                    v-close-popup
+                    @click="onClickView(props.row.id, 'CANCEL')"
+                  >
+                    <q-item-section>
+                      <q-item-label>ขอยกเลิก</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                  <q-item
+                    v-if="props.row.status == 'DRAFT'"
+                    clickable
+                    v-close-popup
+                    @click="onClickEdit(props.row.id)"
+                  >
+                    <q-item-section>
+                      <q-item-label>แก้ไข</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                  <q-item
+                    v-if="props.row.status == 'DRAFT'"
+                    clickable
+                    v-close-popup
+                    @click="clickDelete(props.row.id)"
+                  >
+                    <q-item-section>
+                      <q-item-label>ลบรายการการลา</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
 
-	<DialogDetail
-		:modal="modal"
-		:leaveId="leaveId"
-		:leaveStatus="leaveStatus"
-		:onClickClose="onClickClose"
-		:leaveType="leaveType"
-		:fetchDataTable="fetchDataTable"
-	/>
+    <template #item="props">
+      <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+        <q-card bordered flat>
+          <div class="row justify-end">
+            <q-btn
+              v-if="
+                props.row.status != 'DELETE' &&
+                props.row.status != 'REJECT' &&
+                props.row.status != 'CANCEL'
+              "
+              flat
+              icon="mdi-dots-vertical"
+              color="grey-8"
+              for="#cancel"
+              dense
+              round
+              unelevated
+              @click.pervent
+            >
+              <q-menu>
+                <q-list>
+                  <q-item
+                    clickable
+                    v-close-popup
+                    @click="onClickView(props.row.id, 'CANCEL')"
+                  >
+                    <q-item-section>
+                      <q-item-label>ขอยกเลิก</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                  <q-item
+                    v-if="props.row.status == 'DRAFT'"
+                    clickable
+                    v-close-popup
+                    @click="onClickEdit(props.row.id)"
+                  >
+                    <q-item-section>
+                      <q-item-label>แก้ไข</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                  <q-item
+                    v-if="props.row.status == 'DRAFT'"
+                    clickable
+                    v-close-popup
+                    @click="clickDelete(props.row.id)"
+                  >
+                    <q-item-section>
+                      <q-item-label>ลบรายการการลา</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </div>
+
+          <q-separator />
+          <q-list @click.prevent="onClickView(props.row.id, props.row.status)">
+            <q-item
+              v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
+              :key="col.name"
+            >
+              <q-item-section>
+                <q-item-label caption>{{ col.label }}</q-item-label>
+
+                <q-item-label v-if="col.name === 'no'">
+                  {{ (page - 1) * pageSize + props.rowIndex + 1 }}
+                </q-item-label>
+                <q-item-label v-if="col.name === 'status'">
+                  <q-icon
+                    v-if="props.row.status == 'DRAFT'"
+                    size="10px"
+                    color="light-grey"
+                    name="mdi-circle"
+                    class="q-mr-sm"
+                  />
+                  <q-icon
+                    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 == 'REJECT'"
+                    size="10px"
+                    color="red-6"
+                    name="mdi-circle"
+                    class="q-mr-sm"
+                  />
+                  <q-icon
+                    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 == 'NEW'"
+                    size="10px"
+                    color="orange"
+                    name="mdi-circle"
+                    class="q-mr-sm"
+                  />
+                  <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>
+                </q-item-label>
+                <q-item-label v-else>{{ col.value }}</q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+      </div>
+    </template>
+  </Table>
+
+  <DialogDetail
+    :modal="modal"
+    :leaveId="leaveId"
+    :leaveStatus="leaveStatus"
+    :onClickClose="onClickClose"
+    :leaveType="leaveType"
+    :fetchDataTable="fetchDataTable"
+  />
 </template>
diff --git a/src/modules/05_leave/components/Table.vue b/src/modules/05_leave/components/Table.vue
index 238497f..0639bbb 100644
--- a/src/modules/05_leave/components/Table.vue
+++ b/src/modules/05_leave/components/Table.vue
@@ -100,7 +100,7 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
           v-if="leaveStore.tabValue === 'list'"
           menu-class-name="modalfix"
           v-model="year"
-          class="col-2"
+          class="col-xs-12 col-sm-auto"
           :locale="'th'"
           autoApply
           year-picker
@@ -217,6 +217,7 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :pagination="pagination"
       @update:pagination="updatePageSize"
+      :grid="$q.screen.gt.xs ? false : true"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -239,6 +240,10 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
       <template #body="props">
         <slot v-bind="props" name="columns"></slot>
       </template>
+
+      <template v-slot:item="props">
+        <slot v-bind="props" name="item"></slot>
+      </template>
     </q-table>
   </div>
 </template>
diff --git a/src/modules/05_leave/components/formDetail/01_SickForm.vue b/src/modules/05_leave/components/formDetail/01_SickForm.vue
index 5d25c4d..d88d761 100644
--- a/src/modules/05_leave/components/formDetail/01_SickForm.vue
+++ b/src/modules/05_leave/components/formDetail/01_SickForm.vue
@@ -3,104 +3,104 @@
  * รับ prop จาก component
  */
 const props = defineProps({
-	data: {
-		type: Object,
-		required: true,
-	},
+  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.leaveRange == "ALL"
-							? props.data.leaveTotal + " วัน"
-							: props.data.leaveRange == "MORNING"
-							? "ลาครึ่งวันเช้า (0.5)"
-							: "ลาครึ่งวันบ่าย (0.5)"
-					}}
-				</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 ? props.data.leaveDetail : "-" }}
-				</div>
-			</div>
-			<div class="row">
-				<div class="col text-grey-8">เอกสารแนบ</div>
-				<div class="col">
-					<div
-						v-if="
-							props.data.leaveDocument && props.data.leaveDocument.length > 0
-						"
-					>
-						<div
-							v-for="(document, index) in props.data.leaveDocument"
-							:key="index"
-							:style="{ marginBottom: '10px' }"
-						>
-							<div>
-								<q-btn
-									:href="document"
-									target="_blank"
-									outline
-									color="blue"
-									:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
-									size="12px"
-								>
-									<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
-								</q-btn>
-							</div>
-						</div>
-					</div>
-					<div v-else>-</div>
-				</div>
-			</div>
-		</div>
-	</q-card-section>
+  
+    <div class="q-gutter-md q-pa-sm">
+      <div class="row">
+        <div class="col-xs-12 col-md-6 text-grey-8">วันที่ยื่นใบลา</div>
+        <div class="col-xs-12 col-md-6">{{ props.data.dateSendLeave }}</div>
+      </div>
+      <div class="row">
+        <div class="col-xs-12 col-md-6 text-grey-8">เรื่อง</div>
+        <div class="col-xs-12 col-md-6">{{ props.data.leaveTypeName }}</div>
+      </div>
+      <div class="row">
+        <div class="col-xs-12 col-md-6 text-grey-8">เขียนที่</div>
+        <div class="col-xs-12 col-md-6">{{ props.data.leaveWrote }}</div>
+      </div>
+      <div class="row">
+        <div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
+        <div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
+      </div>
+      <div class="row">
+        <div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
+        <div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
+      </div>
+      <div class="row">
+        <div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
+        <div class="col-xs-12 col-md-6">
+          {{
+            props.data.leaveRange == "ALL"
+              ? props.data.leaveTotal + " วัน"
+              : props.data.leaveRange == "MORNING"
+              ? "ลาครึ่งวันเช้า (0.5)"
+              : "ลาครึ่งวันบ่าย (0.5)"
+          }}
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-xs-12 col-md-6 text-grey-8"></div>
+        <div class="col-xs-12 col-md-6">{{ props.data.leaveTypeDay }}</div>
+      </div>
+      <div class="row">
+        <div class="col-xs-12 col-md-6 text-grey-8">
+          ลาครั้งสุดท้ายในประเภทนั้น ๆ เมื่อวันที่
+        </div>
+        <div class="col-xs-12 col-md-6">{{ props.data.leaveLastStart }}</div>
+      </div>
+      <div class="row">
+        <div class="col-xs-12 col-md-6 text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
+        <div class="col-xs-12 col-md-6">{{ props.data.leaveNumber }}</div>
+      </div>
+      <div class="row">
+        <div class="col-xs-12 col-md-6 text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
+        <div class="col-xs-12 col-md-6">{{ props.data.leaveAddress }}</div>
+      </div>
+      <div class="row">
+        <div class="col-xs-12 col-md-6 text-grey-8">รายละเอียด</div>
+        <div class="col-xs-12 col-md-6">
+          {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-xs-12 col-md-6 text-grey-8">เอกสารแนบ</div>
+        <div class="col-xs-12 col-md-6">
+          <div
+            v-if="
+              props.data.leaveDocument && props.data.leaveDocument.length > 0
+            "
+          >
+            <div
+              v-for="(document, index) in props.data.leaveDocument"
+              :key="index"
+              :style="{ marginBottom: '10px' }"
+            >
+              <div>
+                <q-btn
+                  :href="document"
+                  target="_blank"
+                  outline
+                  color="blue"
+                  :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
+                  size="12px"
+                >
+                  <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
+                </q-btn>
+              </div>
+            </div>
+          </div>
+          <div v-else>-</div>
+        </div>
+      </div>
+    </div>
+ 
 </template>
 
 <style scoped></style>
diff --git a/src/modules/05_leave/components/formDetail/04_HelpWifeBirthForm.vue b/src/modules/05_leave/components/formDetail/04_HelpWifeBirthForm.vue
index d232a8a..e7771b7 100644
--- a/src/modules/05_leave/components/formDetail/04_HelpWifeBirthForm.vue
+++ b/src/modules/05_leave/components/formDetail/04_HelpWifeBirthForm.vue
@@ -3,95 +3,91 @@
  * รับ prop จาก component
  */
 const props = defineProps({
-	data: {
-		type: Object,
-		required: true,
-	},
+  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.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
-				</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 ? props.data.leaveDetail : "-" }}
-				</div>
-			</div>
-			<div class="row">
-				<div class="col text-grey-8">เอกสารแนบ</div>
-				<div class="col">
-					<div
-						v-if="
-							props.data.leaveDocument && props.data.leaveDocument.length > 0
-						"
-					>
-						<div
-							v-for="(document, index) in props.data.leaveDocument"
-							:key="index"
-							:style="{ marginBottom: '11px' }"
-						>
-							<div>
-								<q-btn
-									:href="document"
-									target="_blank"
-									outline
-									color="blue"
-									:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
-									size="12px"
-								>
-									<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
-								</q-btn>
-							</div>
-						</div>
-					</div>
-					<div v-else>-</div>
-				</div>
-			</div>
-		</div>
-	</q-card-section>
+  <div class="q-pa-sm q-gutter-md">
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">วันที่ยื่นใบลา</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.dateSendLeave }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เรื่อง</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveTypeName }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เขียนที่</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveWrote }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ชื่อภรรยา</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.wifeDayName }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">วันที่คลอด</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.wifeDayDateBorn }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveNumber }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveAddress }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">รายละเอียด</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เอกสารแนบ</div>
+      <div class="col-xs-12 col-md-6">
+        <div
+          v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0"
+        >
+          <div
+            v-for="(document, index) in props.data.leaveDocument"
+            :key="index"
+            :style="{ marginBottom: '11px' }"
+          >
+            <div>
+              <q-btn
+                :href="document"
+                target="_blank"
+                outline
+                color="blue"
+                :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
+                size="12px"
+              >
+                <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
+              </q-btn>
+            </div>
+          </div>
+        </div>
+        <div v-else>-</div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/05_leave/components/formDetail/05_VacationForm.vue b/src/modules/05_leave/components/formDetail/05_VacationForm.vue
index f77ea2e..ce76b84 100644
--- a/src/modules/05_leave/components/formDetail/05_VacationForm.vue
+++ b/src/modules/05_leave/components/formDetail/05_VacationForm.vue
@@ -3,106 +3,108 @@
  * รับ prop จาก component
  */
 const props = defineProps({
-	data: {
-		type: Object,
-		required: true,
-	},
+  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.leaveRange == "ALL"
-							? props.data.leaveTotal + " วัน"
-							: props.data.leaveRange == "MORNING"
-							? "ลาครึ่งวันเช้า (0.5)"
-							: "ลาครึ่งวันบ่าย (0.5)"
-					}}
-				</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 ? props.data.leaveDetail : "-" }}
-				</div>
-			</div>
-			<div class="row">
-				<div class="col text-grey-8">เอกสารแนบ</div>
-				<div class="col">
-					<div
-						v-if="
-							props.data.leaveDocument && props.data.leaveDocument.length > 0
-						"
-					>
-						<div
-							v-for="(document, index) in props.data.leaveDocument"
-							:key="index"
-							:style="{ marginBottom: '10px' }"
-						>
-							<div>
-								<q-btn
-									:href="document"
-									target="_blank"
-									outline
-									color="blue"
-									:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
-									size="12px"
-								>
-									<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
-								</q-btn>
-							</div>
-						</div>
-					</div>
-					<div v-else>-</div>
-				</div>
-			</div>
-		</div>
-	</q-card-section>
+  <div class="q-pa-sm q-gutter-md">
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">วันที่ยื่นใบลา</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.dateSendLeave }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เรื่อง</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveTypeName }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เขียนที่</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveWrote }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">
+        จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา
+      </div>
+      <div class="col-xs-12 col-md-6">{{ props.data.restDayOldTotal }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">
+        จำนวนวันลาพักผ่อนประจำปีปัจจุบัน
+      </div>
+      <div class="col-xs-12 col-md-6">{{ props.data.restDayCurrentTotal }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
+      <div class="col-xs-12 col-md-6">
+        {{
+          props.data.leaveRange == "ALL"
+            ? props.data.leaveTotal + " วัน"
+            : props.data.leaveRange == "MORNING"
+            ? "ลาครึ่งวันเช้า (0.5)"
+            : "ลาครึ่งวันบ่าย (0.5)"
+        }}
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8"></div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveTypeDay }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveNumber }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">
+        ที่อยู่ที่ติดต่อได้ระหว่างลา
+      </div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveAddress }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">รายละเอียด</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เอกสารแนบ</div>
+      <div class="col-xs-12 col-md-6">
+        <div
+          v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0"
+        >
+          <div
+            v-for="(document, index) in props.data.leaveDocument"
+            :key="index"
+            :style="{ marginBottom: '10px' }"
+          >
+            <div>
+              <q-btn
+                :href="document"
+                target="_blank"
+                outline
+                color="blue"
+                :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
+                size="12px"
+              >
+                <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
+              </q-btn>
+            </div>
+          </div>
+        </div>
+        <div v-else>-</div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/05_leave/components/formDetail/06_OrdinationForm.vue b/src/modules/05_leave/components/formDetail/06_OrdinationForm.vue
index 559a43d..2581ea3 100644
--- a/src/modules/05_leave/components/formDetail/06_OrdinationForm.vue
+++ b/src/modules/05_leave/components/formDetail/06_OrdinationForm.vue
@@ -3,113 +3,109 @@
  * รับ prop จาก component
  */
 const props = defineProps({
-	data: {
-		type: Object,
-		required: true,
-	},
+  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 ? 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 ? props.data.leaveDetail : "-" }}
-				</div>
-			</div>
-			<div class="row">
-				<div class="col text-grey-8">เอกสารแนบ</div>
-				<div class="col">
-					<div
-						v-if="
-							props.data.leaveDocument && props.data.leaveDocument.length > 0
-						"
-					>
-						<div
-							v-for="(document, index) in props.data.leaveDocument"
-							:key="index"
-							:style="{ marginBottom: '10px' }"
-						>
-							<div>
-								<q-btn
-									:href="document"
-									target="_blank"
-									outline
-									color="blue"
-									:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
-									size="12px"
-								>
-									<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
-								</q-btn>
-							</div>
-						</div>
-					</div>
-					<div v-else>-</div>
-				</div>
-			</div>
-		</div>
-	</q-card-section>
+  <div class="q-pa-md q-gutter-md">
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">วันที่ยื่นใบลา</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.dateSendLeave }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เรื่อง</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveTypeName }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เขียนที่</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveWrote }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveLastStart }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveLastEnd }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">วันเดือนปีเกิด</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leavebirthDate }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">วันที่เข้ารับราชการ</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leavegovernmentDate }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เคย/ไม่เคยบวช</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.ordainDayStatus ? "เคย" : "ไม่เคย" }}
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">สถานที่บวช</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.ordainDayLocationName }}
+        {{ props.data.ordainDayLocationAddress }}
+        {{ props.data.ordainDayLocationNumber }}
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">วันอุปสมบท</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.ordainDayOrdination }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">สถานที่จำพรรษา</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.ordainDayBuddhistLentName }}
+        {{ props.data.ordainDayBuddhistLentAddress }}
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">รายละเอียด</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เอกสารแนบ</div>
+      <div class="col-xs-12 col-md-6">
+        <div
+          v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0"
+        >
+          <div
+            v-for="(document, index) in props.data.leaveDocument"
+            :key="index"
+            :style="{ marginBottom: '10px' }"
+          >
+            <div>
+              <q-btn
+                :href="document"
+                target="_blank"
+                outline
+                color="blue"
+                :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
+                size="12px"
+              >
+                <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
+              </q-btn>
+            </div>
+          </div>
+        </div>
+        <div v-else>-</div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/05_leave/components/formDetail/07_HajjForm.vue b/src/modules/05_leave/components/formDetail/07_HajjForm.vue
index 76e010d..32f6c31 100644
--- a/src/modules/05_leave/components/formDetail/07_HajjForm.vue
+++ b/src/modules/05_leave/components/formDetail/07_HajjForm.vue
@@ -3,88 +3,88 @@
  * รับ prop จาก component
  */
 const props = defineProps({
-	data: {
-		type: Object,
-		required: true,
-	},
+  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.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
-				</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 ? props.data.leaveDetail : "-" }}
-				</div>
-			</div>
-			<div class="row">
-				<div class="col text-grey-8">เอกสารแนบ</div>
-				<div class="col">
-					<div
-						v-if="
-							props.data.leaveDocument && props.data.leaveDocument.length > 0
-						"
-					>
-						<div
-							v-for="(document, index) in props.data.leaveDocument"
-							:key="index"
-							:style="{ marginBottom: '10px' }"
-						>
-							<div>
-								<q-btn
-									:href="document"
-									target="_blank"
-									outline
-									color="blue"
-									:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
-									size="12px"
-								>
-									<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
-								</q-btn>
-							</div>
-						</div>
-					</div>
-					<div v-else>-</div>
-				</div>
-			</div>
-		</div>
-	</q-card-section>
+  <div class="q-pa-sm q-gutter-md">
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">วันที่ยื่นใบลา</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.dateSendLeave }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เรื่อง</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveTypeName }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เขียนที่</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveWrote }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">วันที่เข้ารับราชการ</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leavegovernmentDate }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">
+        เคย/ไม่เคยไปประกอบพิธีฮัจญ์
+      </div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.hajjDayStatus ? "เคย" : "ไม่เคย" }}
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">รายละเอียด</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เอกสารแนบ</div>
+      <div class="col-xs-12 col-md-6">
+        <div
+          v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0"
+        >
+          <div
+            v-for="(document, index) in props.data.leaveDocument"
+            :key="index"
+            :style="{ marginBottom: '10px' }"
+          >
+            <div>
+              <q-btn
+                :href="document"
+                target="_blank"
+                outline
+                color="blue"
+                :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
+                size="12px"
+              >
+                <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
+              </q-btn>
+            </div>
+          </div>
+        </div>
+        <div v-else>-</div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/05_leave/components/formDetail/08_MilitaryForm.vue b/src/modules/05_leave/components/formDetail/08_MilitaryForm.vue
index 646d18b..1e77d64 100644
--- a/src/modules/05_leave/components/formDetail/08_MilitaryForm.vue
+++ b/src/modules/05_leave/components/formDetail/08_MilitaryForm.vue
@@ -3,101 +3,99 @@
  * รับ prop จาก component
  */
 const props = defineProps({
-	data: {
-		type: Object,
-		required: true,
-	},
+  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.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
-				</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 ? props.data.leaveDetail : "-" }}
-				</div>
-			</div>
-			<div class="row">
-				<div class="col text-grey-8">เอกสารแนบ</div>
-				<div class="col">
-					<div
-						v-if="
-							props.data.leaveDocument && props.data.leaveDocument.length > 0
-						"
-					>
-						<div
-							v-for="(document, index) in props.data.leaveDocument"
-							:key="index"
-							:style="{ marginBottom: '10px' }"
-						>
-							<div>
-								<q-btn
-									:href="document"
-									target="_blank"
-									outline
-									color="blue"
-									:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
-									size="12px"
-								>
-									<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
-								</q-btn>
-							</div>
-						</div>
-					</div>
-					<div v-else>-</div>
-				</div>
-			</div>
-		</div>
-	</q-card-section>
+  <div class="q-pa-sm q-gutter-md">
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">วันที่ยื่นใบลา</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.dateSendLeave }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เรื่อง</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveTypeName }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เขียนที่</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveWrote }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ได้รับหมายเรียกของ</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.absentDaySummon }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ที่</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.absentDayLocation }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ลงวันที่</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.absentDayRegistorDate }}
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ให้เข้ารับการ</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.absentDayGetIn }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ณ ที่</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.absentDayAt }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">รายละเอียด</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เอกสารแนบ</div>
+      <div class="col-xs-12 col-md-6">
+        <div
+          v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0"
+        >
+          <div
+            v-for="(document, index) in props.data.leaveDocument"
+            :key="index"
+            :style="{ marginBottom: '10px' }"
+          >
+            <div>
+              <q-btn
+                :href="document"
+                target="_blank"
+                outline
+                color="blue"
+                :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
+                size="12px"
+              >
+                <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
+              </q-btn>
+            </div>
+          </div>
+        </div>
+        <div v-else>-</div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/05_leave/components/formDetail/09_StudyForm.vue b/src/modules/05_leave/components/formDetail/09_StudyForm.vue
index 4608b90..b5fc281 100644
--- a/src/modules/05_leave/components/formDetail/09_StudyForm.vue
+++ b/src/modules/05_leave/components/formDetail/09_StudyForm.vue
@@ -3,122 +3,122 @@
  * รับ prop จาก component
  */
 const props = defineProps({
-	data: {
-		type: Object,
-		required: true,
-	},
+  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 ? 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 ? props.data.leaveDetail : "-" }}
-				</div>
-			</div>
-			<div class="row">
-				<div class="col text-grey-8">เอกสารแนบ</div>
-				<div class="col">
-					<div
-						v-if="
-							props.data.leaveDocument && props.data.leaveDocument.length > 0
-						"
-					>
-						<div
-							v-for="(document, index) in props.data.leaveDocument"
-							:key="index"
-							:style="{ marginBottom: '10px' }"
-						>
-							<div>
-								<q-btn
-									:href="document"
-									target="_blank"
-									outline
-									color="blue"
-									:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
-									size="12px"
-								>
-									<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
-								</q-btn>
-							</div>
-						</div>
-					</div>
-					<div v-else>-</div>
-				</div>
-			</div>
-		</div>
-	</q-card-section>
+  <div class="q-pa-sm q-gutter-md">
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">วันที่ยื่นใบลา</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.dateSendLeave }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เรื่อง</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveTypeName }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เขียนที่</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveWrote }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.leaveCount ? props.data.leaveCount : "-" }}
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">วันเดือนปีเกิด</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leavebirthDate }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">วันที่เข้ารับราชการ</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leavegovernmentDate }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เงินเดือนปัจจุบัน</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ศึกษาวิชา</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.studyDaySubject }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ขั้นปริญญา</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.studyDayDegreeLevel }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ชื่อสถานศึกษา</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.studyDayUniversityName }}
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ประเทศ</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.studyDayCountry }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ด้วยทุน</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.studyDayScholarship }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveNumber }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">
+        ที่อยู่ที่ติดต่อได้ระหว่างลา
+      </div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveAddress }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">รายละเอียด</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เอกสารแนบ</div>
+      <div class="col-xs-12 col-md-6">
+        <div
+          v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0"
+        >
+          <div
+            v-for="(document, index) in props.data.leaveDocument"
+            :key="index"
+            :style="{ marginBottom: '10px' }"
+          >
+            <div>
+              <q-btn
+                :href="document"
+                target="_blank"
+                outline
+                color="blue"
+                :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
+                size="12px"
+              >
+                <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
+              </q-btn>
+            </div>
+          </div>
+        </div>
+        <div v-else>-</div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/05_leave/components/formDetail/10_TrainForm.vue b/src/modules/05_leave/components/formDetail/10_TrainForm.vue
index a3064d5..d9ecc6c 100644
--- a/src/modules/05_leave/components/formDetail/10_TrainForm.vue
+++ b/src/modules/05_leave/components/formDetail/10_TrainForm.vue
@@ -3,117 +3,113 @@
  * รับ prop จาก component
  */
 const props = defineProps({
-	data: {
-		type: Object,
-		required: true,
-	},
+  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 ? 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="q-pa-sm q-gutter-md">
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">วันที่ยื่นใบลา</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.dateSendLeave }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เรื่อง</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveTypeName }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เขียนที่</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveWrote }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.leaveCount ? props.data.leaveCount : "-" }}
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">วันเดือนปีเกิด</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leavebirthDate }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">วันที่เข้ารับราชการ</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leavegovernmentDate }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เงินเดือนปัจจุบัน</div>
+      <div class="col-xs-12 col-md-6">
+        {{ 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-xs-12 col-md-6 text-grey-8">ด้าน/หลักสูตร</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.studyDayTrainingSubject }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ณ สถานที่</div>
+      <div class="col-xs-12 col-md-6">{{ 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 ? props.data.leaveDetail : "-" }}
-				</div>
-			</div>
-			<div class="row">
-				<div class="col text-grey-8">เอกสารแนบ</div>
-				<div class="col">
-					<div
-						v-if="
-							props.data.leaveDocument && props.data.leaveDocument.length > 0
-						"
-					>
-						<div
-							v-for="(document, index) in props.data.leaveDocument"
-							:key="index"
-							:style="{ marginBottom: '10px' }"
-						>
-							<div>
-								<q-btn
-									:href="document"
-									target="_blank"
-									outline
-									color="blue"
-									:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
-									size="12px"
-								>
-									<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
-								</q-btn>
-							</div>
-						</div>
-					</div>
-					<div v-else>-</div>
-				</div>
-			</div>
-		</div>
-	</q-card-section>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ประเทศ</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.studyDayCountry }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ด้วยทุน</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.studyDayScholarship }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveNumber }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveAddress }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">รายละเอียด</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เอกสารแนบ</div>
+      <div class="col-xs-12 col-md-6">
+        <div
+          v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0"
+        >
+          <div
+            v-for="(document, index) in props.data.leaveDocument"
+            :key="index"
+            :style="{ marginBottom: '10px' }"
+          >
+            <div>
+              <q-btn
+                :href="document"
+                target="_blank"
+                outline
+                color="blue"
+                :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
+                size="12px"
+              >
+                <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
+              </q-btn>
+            </div>
+          </div>
+        </div>
+        <div v-else>-</div>
+      </div>
+    </div>
+  </div>
 </template>
diff --git a/src/modules/05_leave/components/formDetail/11_WorkInternationalForm.vue b/src/modules/05_leave/components/formDetail/11_WorkInternationalForm.vue
index f26dc2e..6aa6e8e 100644
--- a/src/modules/05_leave/components/formDetail/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/components/formDetail/11_WorkInternationalForm.vue
@@ -3,93 +3,89 @@
  * รับ prop จาก component
  */
 const props = defineProps({
-	data: {
-		type: Object,
-		required: true,
-	},
+  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 ? props.data.leaveCount : "-" }}
-				</div>
-			</div>
-			<div class="row">
-				<div class="col text-grey-8">รายละเอียด</div>
-				<div class="col">
-					{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
-				</div>
-			</div>
-			<div class="row">
-				<div class="col text-grey-8">เอกสารประกอบ</div>
-				<div class="col" v-if="props.data.leaveDocument">
-					<q-btn
-						:href="props.data.leaveDocument"
-						target="_blank"
-						outline
-						color="blue"
-						label="ดาวน์โหลด"
-						size="12px"
-					>
-						<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
-					>
-				</div>
-				<div class="col" v-else>-</div>
-			</div>
-			<div class="row">
-				<div class="col text-grey-8">เอกสารแนบ</div>
-				<div class="col">
-					<div
-						v-if="
-							props.data.leaveDocument && props.data.leaveDocument.length > 0
-						"
-					>
-						<div
-							v-for="(document, index) in props.data.leaveDocument"
-							:key="index"
-							:style="{ marginBottom: '10px' }"
-						>
-							<div>
-								<q-btn
-									:href="document"
-									target="_blank"
-									outline
-									color="blue"
-									:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
-									size="12px"
-								>
-									<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
-								</q-btn>
-							</div>
-						</div>
-					</div>
-					<div v-else>-</div>
-				</div>
-			</div>
-		</div>
-	</q-card-section>
+  <div class="q-pa-sm q-gutter-md">
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">วันที่ยื่นใบลา</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.dateSendLeave }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เรื่อง</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveTypeName }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เขียนที่</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveWrote }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.leaveCount ? props.data.leaveCount : "-" }}
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">รายละเอียด</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เอกสารประกอบ</div>
+      <div class="col-xs-12 col-md-6" v-if="props.data.leaveDocument">
+        <q-btn
+          :href="props.data.leaveDocument"
+          target="_blank"
+          outline
+          color="blue"
+          label="ดาวน์โหลด"
+          size="12px"
+        >
+          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+        >
+      </div>
+      <div class="col-xs-12 col-md-6" v-else>-</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เอกสารแนบ</div>
+      <div class="col-xs-12 col-md-6">
+        <div
+          v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0"
+        >
+          <div
+            v-for="(document, index) in props.data.leaveDocument"
+            :key="index"
+            :style="{ marginBottom: '10px' }"
+          >
+            <div>
+              <q-btn
+                :href="document"
+                target="_blank"
+                outline
+                color="blue"
+                :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
+                size="12px"
+              >
+                <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
+              </q-btn>
+            </div>
+          </div>
+        </div>
+        <div v-else>-</div>
+      </div>
+    </div>
+  </div>
 </template>
diff --git a/src/modules/05_leave/components/formDetail/12_FollowSpouseForm.vue b/src/modules/05_leave/components/formDetail/12_FollowSpouseForm.vue
index 8f5868d..2087a4d 100644
--- a/src/modules/05_leave/components/formDetail/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/components/formDetail/12_FollowSpouseForm.vue
@@ -3,124 +3,124 @@
  * รับ prop จาก component
  */
 const props = defineProps({
-	data: {
-		type: Object,
-		required: true,
-	},
+  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 ? 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 ? props.data.leaveDetail : "-" }}
-				</div>
-			</div>
-			<div class="row">
-				<div class="col text-grey-8">เอกสารแนบ</div>
-				<div class="col">
-					<div
-						v-if="
-							props.data.leaveDocument && props.data.leaveDocument.length > 0
-						"
-					>
-						<div
-							v-for="(document, index) in props.data.leaveDocument"
-							:key="index"
-							:style="{ marginBottom: '10px' }"
-						>
-							<div>
-								<q-btn
-									:href="document"
-									target="_blank"
-									outline
-									color="blue"
-									:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
-									size="12px"
-								>
-									<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
-								</q-btn>
-							</div>
-						</div>
-					</div>
-					<div v-else>-</div>
-				</div>
-			</div>
-		</div>
-	</q-card-section>
+  <div class="q-pa-sm q-gutter-md">
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">วันที่ยื่นใบลา</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.dateSendLeave }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เรื่อง</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveTypeName }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เขียนที่</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveWrote }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.leaveCount ? props.data.leaveCount : "-" }}
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">วันเดือนปีเกิด</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leavebirthDate }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">วันที่เข้ารับราชการ</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leavegovernmentDate }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เงินเดือนปัจจุบัน</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ชื่อคู่สมรส</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.coupleDayName }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ตำแหน่งคู่สมรส</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.coupleDayPosition }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ไปปฏิบัติราชการ ณ ประเทศ</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.coupleDayLevelCountry }}
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">
+        ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย
+      </div>
+    </div>
+    <div class="row q-mt-xs">
+      <div class="col-xs-12 col-md-6 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-xs-12 col-md-6">
+        <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-xs-12 col-md-6 text-grey-8">รายละเอียด</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เอกสารแนบ</div>
+      <div class="col-xs-12 col-md-6">
+        <div
+          v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0"
+        >
+          <div
+            v-for="(document, index) in props.data.leaveDocument"
+            :key="index"
+            :style="{ marginBottom: '10px' }"
+          >
+            <div>
+              <q-btn
+                :href="document"
+                target="_blank"
+                outline
+                color="blue"
+                :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
+                size="12px"
+              >
+                <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
+              </q-btn>
+            </div>
+          </div>
+        </div>
+        <div v-else>-</div>
+      </div>
+    </div>
+  </div>
 </template>
diff --git a/src/modules/05_leave/components/formDetail/13_RehabilitationForm.vue b/src/modules/05_leave/components/formDetail/13_RehabilitationForm.vue
index daaf94f..0c94915 100644
--- a/src/modules/05_leave/components/formDetail/13_RehabilitationForm.vue
+++ b/src/modules/05_leave/components/formDetail/13_RehabilitationForm.vue
@@ -3,87 +3,83 @@
  * รับ prop จาก component
  */
 const props = defineProps({
-	data: {
-		type: Object,
-		required: true,
-	},
+  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 ? props.data.leaveDetail : "-" }}
-				</div>
-			</div>
-			<div class="row">
-				<div class="col text-grey-8">เอกสารประกอบ</div>
-				<div class="col" v-if="props.data.leaveDocument">
-					<q-btn
-						:href="props.data.leaveDocument"
-						target="_blank"
-						outline
-						color="blue"
-						label="ดาวน์โหลด"
-						size="12px"
-					>
-						<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
-					>
-				</div>
-				<div class="col" v-else>-</div>
-			</div>
-			<div class="row">
-				<div class="col text-grey-8">เอกสารแนบ</div>
-				<div class="col">
-					<div
-						v-if="
-							props.data.leaveDocument && props.data.leaveDocument.length > 0
-						"
-					>
-						<div
-							v-for="(document, index) in props.data.leaveDocument"
-							:key="index"
-							:style="{ marginBottom: '10px' }"
-						>
-							<div>
-								<q-btn
-									:href="document"
-									target="_blank"
-									outline
-									color="blue"
-									:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
-									size="12px"
-								>
-									<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
-								</q-btn>
-							</div>
-						</div>
-					</div>
-					<div v-else>-</div>
-				</div>
-			</div>
-		</div>
-	</q-card-section>
+  <div class="q-pa-sm q-gutter-md">
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">วันที่ยื่นใบลา</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.dateSendLeave }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เรื่อง</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveTypeName }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เขียนที่</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveWrote }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">รายละเอียด</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เอกสารประกอบ</div>
+      <div class="col-xs-12 col-md-6" v-if="props.data.leaveDocument">
+        <q-btn
+          :href="props.data.leaveDocument"
+          target="_blank"
+          outline
+          color="blue"
+          label="ดาวน์โหลด"
+          size="12px"
+        >
+          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+        >
+      </div>
+      <div class="col-xs-12 col-md-6" v-else>-</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เอกสารแนบ</div>
+      <div class="col-xs-12 col-md-6">
+        <div
+          v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0"
+        >
+          <div
+            v-for="(document, index) in props.data.leaveDocument"
+            :key="index"
+            :style="{ marginBottom: '10px' }"
+          >
+            <div>
+              <q-btn
+                :href="document"
+                target="_blank"
+                outline
+                color="blue"
+                :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
+                size="12px"
+              >
+                <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
+              </q-btn>
+            </div>
+          </div>
+        </div>
+        <div v-else>-</div>
+      </div>
+    </div>
+  </div>
 </template>
diff --git a/src/modules/05_leave/components/formDetail/formCancel.vue b/src/modules/05_leave/components/formDetail/formCancel.vue
index 28b7933..e1e7fcf 100644
--- a/src/modules/05_leave/components/formDetail/formCancel.vue
+++ b/src/modules/05_leave/components/formDetail/formCancel.vue
@@ -3,77 +3,75 @@
  * รับ prop จาก component
  */
 const props = defineProps({
-	data: {
-		type: Object,
-		required: true,
-	},
+  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.leaveWrote }}</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.fullname }}</div>
-			</div>
-			<div class="row">
-				<div class="col text-grey-8">สถานะการของลา</div>
-				<div class="col">{{ props.data.status }}</div>
-			</div>
-			<div class="row">
-				<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
-				<div class="col">{{ props.data.leaveStartDate }}</div>
-			</div>
-			<div class="row">
-				<div class="col text-grey-8">ลาถึงวันที่</div>
-				<div class="col">{{ props.data.leaveEndDate }}</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.leaveAddress }}</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.leaveResonDelete }}</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" v-if="props.data.leaveDocDelete">
-					<q-btn
-						:href="props.data.leaveDocDelete"
-						target="_blank"
-						outline
-						color="blue"
-						label="ดาวน์โหลด"
-						size="12px"
-					>
-						<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
-					>
-				</div>
-				<div class="col" v-else>-</div>
-			</div>
-		</div>
-	</q-card-section>
+  <div class="q-pa-sm q-gutter-md">
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เขียนที่</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveWrote }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ประเภทการลา</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveTypeName }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ชื่อ-นามสกุล</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.fullname }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">สถานะการของลา</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.status }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveStartDate }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveEndDate }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveTotal }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">สถานที่ติดต่อขณะลา</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveAddress }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveNumber }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เหตุผลการยกเลิกการลา</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveResonDelete }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">รายละเอียดการลา</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveDetail }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">เอกสารการยกเลิกการลา</div>
+      <div class="col-xs-12 col-md-6" v-if="props.data.leaveDocDelete">
+        <q-btn
+          :href="props.data.leaveDocDelete"
+          target="_blank"
+          outline
+          color="blue"
+          label="ดาวน์โหลด"
+          size="12px"
+        >
+          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+        >
+      </div>
+      <div class="col-xs-12 col-md-6" v-else>-</div>
+    </div>
+  </div>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/05_leave/components/formDetail/formMain.vue b/src/modules/05_leave/components/formDetail/formMain.vue
index 38cd3f5..558c623 100644
--- a/src/modules/05_leave/components/formDetail/formMain.vue
+++ b/src/modules/05_leave/components/formDetail/formMain.vue
@@ -3,45 +3,43 @@
  * รับ prop จาก component
  */
 const props = defineProps({
-	data: {
-		type: Object,
-		required: true,
-	},
+  data: {
+    type: Object,
+    required: true,
+  },
 });
 </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>
+  <div class="q-pa-sm q-gutter-md">
+    <div class="row">
+      <div class="col-xs-12 col-md-6-4 text-grey-8">วันที่ยืนใบลา</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.dateSendLeave }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6-4 text-grey-8">เรื่อง</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveTypeName }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6-4 text-grey-8">เรียน</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.notification }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6-4 text-grey-8">ชื่อผู้ยื่นขอ</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.fullname }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6-4 text-grey-8">ตำแหน่งผู้ยืนขอ</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.positionName }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6-4 text-grey-8">ระดับผู้ยืนขอ</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.positionLevelName }}</div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6-4 text-grey-8">สังกัดผู้ยืนขอ</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.organizationName }}</div>
+    </div>
+  </div>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/05_leave/views/Main.vue b/src/modules/05_leave/views/Main.vue
index 2a1e2d0..46fd6e3 100644
--- a/src/modules/05_leave/views/Main.vue
+++ b/src/modules/05_leave/views/Main.vue
@@ -18,7 +18,7 @@ const leaveStore = useLeaveStore();
 const { showLoader, hideLoader, messageError } = mixin;
 
 const router = useRouter();
-const route = useRoute()
+const route = useRoute();
 const $q = useQuasar();
 
 const filterLeaveType = ref(["ลาป่วย", "ลากิจส่วนตัว", "ลาพักผ่อน"]);
@@ -422,37 +422,60 @@ onMounted(async () => {
       </q-card-section>
       <q-separator />
       <q-card-section class="q-p-md row">
-        <q-table
-          flat
-          bordered
-          dense
-          :rows="row"
-          :columns="columns"
-          row-key="leaveTypeName"
-          class="custom-table2 col-12"
-          hide-bottom
-          v-model:pagination="pagination"
-        >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                <div v-if="col.name == 'no'">
-                  {{ props.rowIndex + 1 }}
-                </div>
-                <div v-else>
-                  {{ col.value }}
-                </div>
-              </q-td>
-            </q-tr></template
-          ></q-table
-        >
+        <div class="col-12">
+          <d-table
+            flat
+            bordered
+            dense
+            :rows="row"
+            :columns="columns"
+            row-key="leaveTypeName"
+            hide-bottom
+            v-model:pagination="pagination"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                  <div v-if="col.name == 'no'">
+                    {{ props.rowIndex + 1 }}
+                  </div>
+                  <div v-else>
+                    {{ col.value }}
+                  </div>
+                </q-td>
+              </q-tr></template
+            >
+            <!-- <template #item="props">
+            <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+              <q-card bordered flat>
+                <q-list>
+                  <q-item
+                    v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
+                    :key="col.name"
+                  >
+                    <q-item-section>
+                      <q-item-label caption>{{ col.label }}</q-item-label>
+
+                      <q-item-label v-if="col.name === 'no'">
+                        {{ props.rowIndex + 1 }}
+                      </q-item-label>
+
+                      <q-item-label v-else>{{ col.value }}</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-card>
+            </div>
+          </template> -->
+          </d-table>
+        </div>
       </q-card-section>
     </q-card>
   </q-dialog>
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 1356817..75db048 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -378,12 +378,55 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
           </q-list>
         </q-btn-dropdown>
         <div v-else class="q-ml-sm" style="width: 30px">
-          <q-img
-            src="@/assets/avatar_user.jpg"
-            class="border-100"
-            spinner-color="white"
-            style="height: 30px; max-width: 30px"
-          />
+          <q-btn round>
+            <q-avatar>
+              <q-img
+                src="@/assets/avatar_user.jpg"
+                class="border-100"
+                spinner-color="white"
+                style="height: 30px; max-width: 30px"
+              />
+            </q-avatar>
+            <q-menu>
+              <q-list dense style="min-width: 200px">
+                <q-item clickable v-close-popup>
+                  <q-item-section>
+                    <div class="row items-center">
+                      <q-list>
+                        <q-item clickable v-close-popup>
+                          <q-item-section avatar style="min-width: 30px">
+                            <q-icon
+                              color="orange-9"
+                              size="18px"
+                              name="mdi-lock-outline"
+                            />
+                          </q-item-section>
+                          <q-item-section
+                            ><q-item-label
+                              >เปลี่ยนรหัสผ่าน</q-item-label
+                            ></q-item-section
+                          >
+                        </q-item>
+
+                        <q-item clickable v-close-popup @click="doLogout">
+                          <q-item-section avatar style="min-width: 30px">
+                            <q-icon
+                              color="primary"
+                              size="18px"
+                              name="mdi-logout-variant"
+                            />
+                          </q-item-section>
+                          <q-item-section>
+                            <q-item-label>ออกจากระบบ</q-item-label>
+                          </q-item-section>
+                        </q-item>
+                      </q-list>
+                    </div>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
         </div>
       </q-toolbar>
     </q-header>