From 433a0ce9b86c0c4d091ed2e6e00c8628613923ea Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 24 Apr 2026 09:52:14 +0700
Subject: [PATCH] feat(leave): UI Show Card leaveWaitingSummary

---
 .../components/05_Leave/DetailLeavePage.vue   | 28 ++++++++++++++-----
 .../components/05_Leave/DetailLeaveReject.vue | 28 ++++++++++++++-----
 .../09_leave/interface/request/leave.ts       |  1 +
 3 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/src/modules/09_leave/components/05_Leave/DetailLeavePage.vue b/src/modules/09_leave/components/05_Leave/DetailLeavePage.vue
index 1ba2c0a2b..4f4b2ee46 100644
--- a/src/modules/09_leave/components/05_Leave/DetailLeavePage.vue
+++ b/src/modules/09_leave/components/05_Leave/DetailLeavePage.vue
@@ -82,6 +82,7 @@ const formData = reactive<FormData>({
   status: "", //สถานะการของลา
   leaveLimit: 0, //โควต้าลา(แต่ละประเภท)หน่วยเป็นวัน
   leaveSummary: 0, //ลาป่วยไปแล้ว(แต่ละประเภท)หน่วยเป็นวัน
+  leaveWaitingSummary: 0, //ลาอยู่ระหว่างการพิจารณา(แต่ละประเภท)หน่วยเป็นวัน
   leaveRemain: 0, //คงเหลือโควต้า(แต่ละประเภท)หน่วยเป็นวัน
   leaveWrote: "", //เขียนที่
   leaveAddress: "", //สถานที่ติดต่อขณะลา
@@ -391,6 +392,9 @@ async function fetchDetailLeave(paramsId: string) {
       formData.leaveRange = data.leaveRange;
       formData.commanderPosition = data.commanderPosition;
       formData.leaveRangeEnd = data.leaveRangeEnd;
+      formData.leaveWaitingSummary = data.leaveWaitingSummary
+        ? data.leaveWaitingSummary
+        : "0";
       keycloakUserId.value = data.keycloakUserId;
       rows.value = {
         commanders: data.commanders,
@@ -773,40 +777,50 @@ onMounted(async () => {
                   </div>
                 </div>
                 <div class="col-xs-12 col-sm-7 row">
-                  <div class="row col-12 q-gutter-md">
+                  <div class="row col-12 q-col-gutter-md">
                     <div
                       v-if="formData.leaveTypeName == 'ลาพักผ่อน'"
-                      class="col-3"
+                      class="col-md-3 col-xs-6"
                     >
                       <q-card bordered class="items-center row col-12 q-pa-md">
                         <div class="text-h6 text-weight-bold text-blue-10">
                           {{ formData.leaveLimit }}
                         </div>
                         <div class="col-12 text-subtitle2 text-weight-regular">
-                          <span class="gt-xs">ได้รับ</span>
+                          <span>ได้รับ</span>
                         </div>
                       </q-card>
                     </div>
-                    <div class="col-3">
+                    <div class="col-md-3 col-xs-6">
                       <q-card bordered class="items-center row col-12 q-pa-md">
                         <div class="text-h6 text-weight-bold text-light-blue-6">
                           {{ formData.leaveSummary }}
                         </div>
                         <div class="col-12 text-subtitle2 text-weight-regular">
-                          <span class="gt-xs">ใช้ไป</span>
+                          <span>ใช้ไป</span>
                         </div>
                       </q-card>
                     </div>
                     <div
                       v-if="formData.leaveTypeName == 'ลาพักผ่อน'"
-                      class="col-3"
+                      class="col-md-3 col-xs-6"
                     >
                       <q-card bordered class="items-center row col-12 q-pa-md">
                         <div class="text-h6 text-weight-bold text-indigo-7">
                           {{ formData.leaveRemain }}
                         </div>
                         <div class="col-12 text-subtitle2 text-weight-regular">
-                          <span class="gt-xs">คงเหลือ</span>
+                          <span>คงเหลือ</span>
+                        </div>
+                      </q-card>
+                    </div>
+                    <div class="col-md-3 col-xs-6">
+                      <q-card bordered class="items-center row col-12 q-pa-md">
+                        <div class="text-h6 text-weight-bold text-light-blue-6">
+                          {{ formData.leaveWaitingSummary }}
+                        </div>
+                        <div class="col-12 text-subtitle2 text-weight-regular">
+                          <span>อยู่ระหว่างการพิจารณา</span>
                         </div>
                       </q-card>
                     </div>
diff --git a/src/modules/09_leave/components/05_Leave/DetailLeaveReject.vue b/src/modules/09_leave/components/05_Leave/DetailLeaveReject.vue
index 6b0e4e44b..6653eed35 100644
--- a/src/modules/09_leave/components/05_Leave/DetailLeaveReject.vue
+++ b/src/modules/09_leave/components/05_Leave/DetailLeaveReject.vue
@@ -151,6 +151,7 @@ const formData = reactive<FormData>({
   leaveSubTypeName: "",
   commanderPosition: "",
   leaveRangeEnd: "",
+  leaveWaitingSummary: 0, //ลาอยู่ระหว่างการพิจารณา(แต่ละประเภท)หน่วยเป็นวัน
 });
 
 const isLoadData = ref<boolean>(false);
@@ -217,6 +218,9 @@ async function fetchDetailLeave(paramsId: string) {
       formData.leaveLimit = data.leaveLimit;
       formData.leaveSummary = data.leaveSummary;
       formData.leaveRemain = data.leaveRemain;
+      formData.leaveWaitingSummary = data.leaveWaitingSummary
+        ? data.leaveWaitingSummary
+        : 0;
       formData.leaveWrote = data.leaveWrote;
       formData.leaveAddress = data.leaveAddress;
       formData.leaveNumber = data.leaveNumber;
@@ -626,40 +630,50 @@ onMounted(async () => {
                   </div>
                 </div>
                 <div class="col-xs-12 col-sm-7 row">
-                  <div class="row col-12 q-gutter-md">
+                  <div class="row col-12 q-col-gutter-md">
                     <div
                       v-if="formData.leaveTypeName == 'ลาพักผ่อน'"
-                      class="col-3"
+                      class="col-md-3 col-xs-6"
                     >
                       <q-card bordered class="items-center row col-12 q-pa-md">
                         <div class="text-h6 text-weight-bold text-blue-10">
                           {{ formData.leaveLimit }}
                         </div>
                         <div class="col-12 text-subtitle2 text-weight-regular">
-                          <span class="gt-xs">ได้รับ</span>
+                          <span>ได้รับ</span>
                         </div>
                       </q-card>
                     </div>
-                    <div class="col-3">
+                    <div class="col-md-3 col-xs-6">
                       <q-card bordered class="items-center row col-12 q-pa-md">
                         <div class="text-h6 text-weight-bold text-light-blue-6">
                           {{ formData.leaveSummary }}
                         </div>
                         <div class="col-12 text-subtitle2 text-weight-regular">
-                          <span class="gt-xs">ใช้ไป</span>
+                          <span>ใช้ไป</span>
                         </div>
                       </q-card>
                     </div>
                     <div
                       v-if="formData.leaveTypeName == 'ลาพักผ่อน'"
-                      class="col-3"
+                      class="col-md-3 col-xs-6"
                     >
                       <q-card bordered class="items-center row col-12 q-pa-md">
                         <div class="text-h6 text-weight-bold text-indigo-7">
                           {{ formData.leaveRemain }}
                         </div>
                         <div class="col-12 text-subtitle2 text-weight-regular">
-                          <span class="gt-xs">คงเหลือ</span>
+                          <span>คงเหลือ</span>
+                        </div>
+                      </q-card>
+                    </div>
+                    <div class="col-md-3 col-xs-6">
+                      <q-card bordered class="items-center row col-12 q-pa-md">
+                        <div class="text-h6 text-weight-bold text-light-blue-6">
+                          {{ formData.leaveWaitingSummary }}
+                        </div>
+                        <div class="col-12 text-subtitle2 text-weight-regular">
+                          <span>อยู่ระหว่างการพิจารณา</span>
                         </div>
                       </q-card>
                     </div>
diff --git a/src/modules/09_leave/interface/request/leave.ts b/src/modules/09_leave/interface/request/leave.ts
index 95b81143e..27426c709 100644
--- a/src/modules/09_leave/interface/request/leave.ts
+++ b/src/modules/09_leave/interface/request/leave.ts
@@ -41,6 +41,7 @@ interface FormData {
   status: string; //สถานะการของลา
   leaveLimit: number; //โควต้าลา(แต่ละประเภท)หน่วยเป็นวัน
   leaveSummary: number; //ลาป่วยไปแล้ว(แต่ละประเภท)หน่วยเป็นวัน
+  leaveWaitingSummary: number; //ลาอยู่ระหว่างการพิจารณา(แต่ละประเภท)หน่วยเป็นวัน
   leaveRemain: number; //คงเหลือโควต้า(แต่ละประเภท)หน่วยเป็นวัน
   // leaveStartDate: Date | null; //*วัน เดือน ปีเริ่มต้นลา
   // leaveEndDate: Date | null; //*วัน เดือน ปีสิ้นสุดลา