Merge branch 'develop' of github.com:Frappet/hrms-mgt into develop

* 'develop' of github.com:Frappet/hrms-mgt:
  refactor: dialogConfirm  onConfirmUpload
  refactor(leave-history): replace overflow-hidden with overflow-auto for better scrollability
  feat(registry-edit): previewFile excel Position
  feat(leave): UI Show Card leaveWaitingSummary
  refactor(registry-edit): permisson handUploadFile

src/modules/04_registryPerson/utils/excelParser.ts

@@ -0,0 +1,177 @@
+import * as XLSX from "xlsx";
+
+export interface ExcelPreviewData {
+  fileName: string;
+  fileSize: number;
+  sheetNames: string[];
+  headers: string[];
+  rows: Array<Record<string, any>>;
+  totalRows: number;
+  previewRows: number;
+}
+
+export interface ParseOptions {
+  maxPreviewRows?: number;
+  sheetIndex?: number;
+}
+
+const DEFAULT_CONFIG = {
+  MAX_FILE_SIZE: 10 * 1024 * 1024, // 10MB
+  MAX_PREVIEW_ROWS: 0, // 0 = ไม่จำกัด แสดงทั้งหมด
+  ALLOWED_EXTENSIONS: [".xlsx", ".xls"],
+};
+
+function formatFileSize(bytes: number): string {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];
+}
+
+function getFileExtension(fileName: string): string {
+  return fileName.substring(fileName.lastIndexOf(".")).toLowerCase();
+}
+
+function validateFile(file: File): { message: string } | null {
+  const extension = getFileExtension(file.name);
+
+  if (!DEFAULT_CONFIG.ALLOWED_EXTENSIONS.includes(extension)) {
+    return {
+      message: `กรุณาเลือกไฟล์ Excel เท่านั้น (${DEFAULT_CONFIG.ALLOWED_EXTENSIONS.join(", ")})`,
+    };
+  }
+
+  if (file.size > DEFAULT_CONFIG.MAX_FILE_SIZE) {
+    const fileSizeMB = (file.size / (1024 * 1024)).toFixed(2);
+    const maxSizeMB = (DEFAULT_CONFIG.MAX_FILE_SIZE / (1024 * 1024)).toFixed(2);
+    return {
+      message: `ขนาดไฟล์เกิน ${maxSizeMB}MB (ไฟล์ของคุณ: ${fileSizeMB}MB)`,
+    };
+  }
+
+  return null;
+}
+
+export async function parseExcelFile(
+  file: File,
+  options: ParseOptions = {}
+): Promise<ExcelPreviewData> {
+  const maxPreviewRows = options.maxPreviewRows ?? DEFAULT_CONFIG.MAX_PREVIEW_ROWS;
+  const sheetIndex = options.sheetIndex ?? 0;
+
+  // Validate file
+  const validationError = validateFile(file);
+  if (validationError) {
+    throw new Error(validationError.message);
+  }
+
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.onload = (e) => {
+      try {
+        const data = e.target?.result;
+        if (!data) {
+          reject(new Error("ไม่สามารถอ่านไฟล์ได้"));
+          return;
+        }
+
+        const workbook = XLSX.read(data, { type: "binary" });
+
+        if (workbook.SheetNames.length === 0) {
+          reject(new Error("ไฟล์ไม่มีข้อมูล"));
+          return;
+        }
+
+        const sheetName = workbook.SheetNames[sheetIndex];
+        const worksheet = workbook.Sheets[sheetName];
+
+        // ใช้ sheet_to_json กับ raw: true เพื่ออ่าน raw values ก่อน
+        const jsonData = XLSX.utils.sheet_to_json(worksheet, {
+          header: 1,
+          defval: "",
+          raw: true, // อ่าน raw values
+        }) as any[][];
+
+        // หลังจากได้ raw data แล้ว ต้องไปอ่านค่าจาก formula ที่ cells โดยตรง
+        // เพราะบาง formula อาจจะยังไม่ถูกคำนวณ
+        const range = XLSX.utils.decode_range(worksheet["!ref"] || "A1");
+
+        // อ่านค่าจาก cells ที่มี formula (column สุดท้าย)
+        for (let row = range.s.r; row <= range.e.r; row++) {
+          for (let col = range.s.c; col <= range.e.c; col++) {
+            const cellAddress = XLSX.utils.encode_cell({ r: row, c: col });
+            const cell = worksheet[cellAddress];
+
+            // ถ้ามี formula ให้ใช้ผลลัพธ์ที่คำนวณแล้ว
+            if (cell && cell.f && !cell.v) {
+              // ลองใช้ cell.w (formatted value) ถ้ามี
+              if (cell.w) {
+                // แปลง array index ให้ถูกต้อง (row + 1 เพราะมี header row)
+                const arrayRowIndex = row - range.s.r;
+                if (jsonData[arrayRowIndex] && jsonData[arrayRowIndex][col] !== undefined) {
+                  jsonData[arrayRowIndex][col] = cell.w;
+                }
+              }
+            }
+          }
+        }
+
+        if (jsonData.length === 0) {
+          reject(new Error("ไฟล์ไม่มีข้อมูล"));
+          return;
+        }
+
+        // Extract headers from first row (ภาษาไทย)
+        const headers = jsonData[0].map((h: any) => String(h ?? ""));
+
+        // Extract data rows (skip header row)
+        const dataRows = jsonData.slice(1).filter((row) => row.some((cell) => cell !== ""));
+
+        if (dataRows.length === 0) {
+          reject(new Error("ไฟล์ไม่มีข้อมูล"));
+          return;
+        }
+
+        // Convert to array of objects - ใช้ header จาก Excel เป็น field names โดยตรง
+        // ถ้า maxPreviewRows = 0 จะแสดงทั้งหมด มิฉะนั้นจะแสดงตามจำนวนที่กำหนด
+        const rowsToProcess = maxPreviewRows === 0 ? dataRows : dataRows.slice(0, maxPreviewRows);
+        const rows = rowsToProcess.map((row, rowIndex) => {
+          const obj: Record<string, any> = {
+            id: `row_${rowIndex}`,
+          };
+
+          // ใช้ header เป็น field names โดยตรง
+          headers.forEach((header, index) => {
+            const cellValue = row[index] ?? "";
+            // ใช้ค่าจาก Excel โดยตรง ไม่แปลงค่า
+            obj[header] = cellValue;
+          });
+
+          return obj;
+        });
+
+        resolve({
+          fileName: file.name,
+          fileSize: file.size,
+          sheetNames: workbook.SheetNames,
+          headers,
+          rows,
+          totalRows: dataRows.length,
+          previewRows: rows.length,
+        });
+      } catch (error) {
+        reject(new Error("ไม่สามารถอ่านไฟล์ Excel ได้ กรุณาตรวจสอบไฟล์อีกครั้ง"));
+      }
+    };
+
+    reader.onerror = () => {
+      reject(new Error("ไม่สามารถอ่านไฟล์ได้"));
+    };
+
+    reader.readAsBinaryString(file);
+  });
+}
+
+export { formatFileSize };

src/modules/04_registryPerson/views/edit/components/DialogExcelPreview.vue

@@ -0,0 +1,270 @@
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import { useQuasar } from "quasar";
+import moment from "moment";
+
+import {
+  parseExcelFile,
+  formatFileSize,
+} from "@/modules/04_registryPerson/utils/excelParser";
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const { dialogConfirm } = useCounterMixin();
+
+interface Props {
+  modal: boolean;
+  file: File | null;
+}
+
+interface Emits {
+  (e: "update:modal", value: boolean): void;
+  (e: "confirm", file: File): void;
+  (e: "cancel"): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const isLoading = ref(false);
+const isUploading = ref(false);
+const previewData = ref<Record<string, any>[]>([]);
+const excelHeaders = ref<string[]>([]); // Headers จาก Excel
+
+const fileName = computed(() => props.file?.name ?? "");
+const fileSize = computed(() => props.file?.size ?? 0);
+const totalRows = computed(() => previewData.value.length);
+const previewRows = computed(() => previewData.value.length);
+
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 50,
+});
+
+// ฟังก์ชันแปลงวันที่เป็นภาษาไทย (ไม่บวก 543 เพราะ Excel เป็น พ.ศ. อยู่แล้ว)
+function formatDateForDisplay(value: any): string {
+  if (!value) return "-";
+
+  // ถ้าเป็น string format dd/mm/yyyy (จาก Excel ที่เป็น พ.ศ.)
+  if (typeof value === "string") {
+    const parts = value.split("/");
+    if (parts.length === 3) {
+      const day = parts[0];
+      const monthNum = parseInt(parts[1], 10);
+      const year = parts[2];
+
+      // แปลงเลขเดือนเป็นชื่อเดือนภาษาไทย
+      const thaiMonths = [
+        "ม.ค.",
+        "ก.พ.",
+        "มี.ค.",
+        "เม.ย.",
+        "พ.ค.",
+        "มิ.ย.",
+        "ก.ค.",
+        "ส.ค.",
+        "ก.ย.",
+        "ต.ค.",
+        "พ.ย.",
+        "ธ.ค.",
+      ];
+      const thaiMonth = thaiMonths[monthNum - 1] || parts[1];
+
+      return `${day} ${thaiMonth} ${year}`;
+    }
+    return value;
+  }
+
+  // ถ้าเป็น Date object ให้แปลงโดยไม่บวก 543 (เพราะ Excel serial date แปลงเป็น ค.ศ. แล้วแต่เดิมเป็น พ.ศ.)
+  const dateMoment = moment(value);
+  const day = dateMoment.format("DD");
+  const month = dateMoment.format("MMM");
+  const year = +dateMoment.format("YYYY"); // ไม่บวก 543
+  return `${day} ${month} ${year}`;
+}
+
+// Headers ที่เป็นวันที่
+const DATE_HEADERS = ["วันที่คำสั่งมีผล", "วันที่ลงนาม"];
+const SALARY_HEADERS = [
+  "เงินเดือน",
+  "ค่าจ้าง",
+  "เงินค่าตอบแทนรายเดือน",
+  "เงินประจำตำแหน่ง",
+  "เงินค่าตอบแทนพิเศษ",
+];
+
+// สร้าง columns จาก Excel headers
+const tableColumns = computed(() => {
+  if (excelHeaders.value.length === 0) return [];
+  return excelHeaders.value.map((header, index) => {
+    const isDateColumn = DATE_HEADERS.includes(header);
+    const isSalaryColumn = SALARY_HEADERS.includes(header);
+
+    return {
+      name: `col_${index}`,
+      label: header,
+      field: header,
+      align: "left" as const,
+      sortable: false,
+      style: "white-space: nowrap;",
+      headerStyle: "font-size: 13px; font-weight: bold;",
+      format: (val: any) => {
+        // ถ้าค่าว่าง แสดง -
+        if (val == null || val === "") return "-";
+
+        // ถ้าเป็น column วันที่
+        if (isDateColumn) {
+          // ถ้าเป็น string วันที่ format dd/mm/yyyy (จาก Excel)
+          if (
+            typeof val === "string" &&
+            val.match(/^\d{1,2}\/\d{1,2}\/\d{4}$/)
+          ) {
+            return formatDateForDisplay(val);
+          }
+          // ถ้าเป็น number (Excel serial date) ให้แปลงเป็น Date object ก่อน
+          if (typeof val === "number") {
+            return formatDateForDisplay((val - 25569) * 86400 * 1000);
+          }
+        }
+
+        // ถ้าเป็น column เงินให้ format มี comma separator (ตรวจสอบชื่อ label)
+        if (isSalaryColumn) {
+          const numericValue = Number(val);
+          if (typeof numericValue === "number" && !isNaN(numericValue)) {
+            return numericValue.toLocaleString("en-US");
+          }
+        }
+
+        return val;
+      },
+    };
+  });
+});
+
+async function loadPreview() {
+  if (!props.file) return;
+
+  isLoading.value = true;
+  try {
+    const result = await parseExcelFile(props.file, {
+      maxPreviewRows: 0, // 0 = แสดงทั้งหมด
+      sheetIndex: 0, // ใช้ sheet แรกเสมอ
+    });
+    previewData.value = result.rows;
+    excelHeaders.value = result.headers; // เก็บ headers จาก Excel
+  } catch (error) {
+    console.error("Error parsing Excel file:", error);
+    previewData.value = [];
+    excelHeaders.value = [];
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+function onConfirm() {
+  dialogConfirm($q, () => {
+    if (props.file) {
+      isUploading.value = true;
+      emit("confirm", props.file);
+    }
+  });
+}
+
+function onClose() {
+  emit("cancel");
+  emit("update:modal", false);
+}
+
+function onModalUpdate(value: boolean) {
+  emit("update:modal", value);
+}
+
+watch(
+  () => props.modal,
+  (newValue) => {
+    if (newValue && props.file) {
+      isUploading.value = false;
+      loadPreview();
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog :model-value="modal" @update:model-value="onModalUpdate" persistent>
+    <q-card style="min-width: 80vw; max-width: 95vw">
+      <q-card-section class="row items-center q-pb-none">
+        <div class="text-h6">ตัวอย่างข้อมูลไฟล์ Excel</div>
+        <q-space />
+        <q-btn icon="close" flat round dense v-close-popup @click="onClose" />
+      </q-card-section>
+
+      <q-separator />
+
+      <!-- File Info Section -->
+      <q-card-section>
+        <div class="row q-col-gutter-md">
+          <div class="col-12">
+            <div class="text-subtitle2 text-grey-7">ข้อมูลไฟล์</div>
+          </div>
+          <div class="col-md-4 col-sm-6 col-12">
+            <div class="flex items-center">
+              <q-icon
+                name="insert_drive_file"
+                class="q-mr-sm"
+                color="primary"
+              />
+              <span class="text-body2">ชื่อไฟล์: {{ fileName }}</span>
+            </div>
+          </div>
+          <div class="col-md-4 col-sm-6 col-12">
+            <div class="flex items-center">
+              <q-icon name="folder" class="q-mr-sm" color="primary" />
+              <span class="text-body2"
+                >ขนาด: {{ formatFileSize(fileSize) }}</span
+              >
+            </div>
+          </div>
+          <div class="col-md-4 col-sm-12 col-12">
+            <div class="flex items-center">
+              <q-icon name="table_chart" class="q-mr-sm" color="primary" />
+              <span class="text-body2">จำนวนแถว: {{ totalRows }} แถว</span>
+            </div>
+          </div>
+        </div>
+      </q-card-section>
+
+      <q-separator />
+
+      <!-- Preview Table -->
+      <q-card-section style="max-height: 70vh" class="scroll">
+        <div class="text-subtitle2 q-mb-md">
+          รายการตำแหน่ง ({{ previewRows }} รายการ)
+        </div>
+        <d-table
+          :columns="tableColumns"
+          :rows="previewData"
+          :paging="true"
+          :rows-per-page-options="[20, 50, 100, 0]"
+          v-model:pagination="pagination"
+          :loading="isLoading"
+          row-key="id"
+          flat
+          bordered
+          dense
+        />
+      </q-card-section>
+
+      <!-- Actions -->
+      <q-card-actions align="right" class="q-pa-md">
+        <q-btn
+          type="submit"
+          color="public"
+          label="ยืนยันการอัปโหลด"
+          @click="onConfirm"
+          :loading="isUploading"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>

src/modules/04_registryPerson/views/edit/components/Table.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted, computed, reactive } from "vue";
 import { useQuasar } from "quasar";
-import * as XLSX from "xlsx";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -21,6 +20,7 @@ import type {
 
 import DialogForm from "@/modules/04_registryPerson/views/edit/components/DialogForm.vue";
 import DialogSort from "@/modules/04_registryPerson/views/edit/components/DialogSort.vue";
+import DialogExcelPreview from "@/modules/04_registryPerson/views/edit/components/DialogExcelPreview.vue";
 import CurruncyInput from "@/components/CurruncyInput.vue";
 
 const $q = useQuasar();
@@ -53,6 +53,11 @@ const amountRef = ref<any>(null);
 const amountSpecialRef = ref<any>(null);
 const currencyPopupRef = ref<any>(null);
 
+// Excel Preview
+const excelPreviewModal = ref<boolean>(false);
+const selectedExcelFile = ref<File | null>(null);
+const isParsingExcel = ref<boolean>(false);
+
 //Table
 const isLoad = ref<boolean>(true);
 const rowIndex = ref<number>(0);
@@ -851,7 +856,7 @@ async function validateAndSave(
 
 /**
  * ฟังก์ชันอัปโหลดไฟล์ Excel
- * ส่งไฟล์ Excel ไปยัง API โดยตรง
+ * เปิด preview modal ก่อนอัปโหลด
  */
 function handUploadFile() {
   const input = document.createElement("input");
@@ -859,48 +864,73 @@ function handUploadFile() {
   input.accept = ".xlsx,.xls";
 
   input.onchange = async (e: Event) => {
-    try {
-      const file = (e.target as HTMLInputElement).files?.[0];
-      if (!file) return;
+    const file = (e.target as HTMLInputElement).files?.[0];
+    if (!file) return;
 
-      // ตรวจสอบชนิดไฟล์โดยตรวจสอบนามสกุล
-      const validExtensions = [".xlsx", ".xls"];
-      const fileExtension = file.name
-        .substring(file.name.lastIndexOf("."))
-        .toLowerCase();
+    // ตรวจสอบชนิดไฟล์โดยตรวจสอบนามสกุล
+    const validExtensions = [".xlsx", ".xls"];
+    const fileExtension = file.name
+      .substring(file.name.lastIndexOf("."))
+      .toLowerCase();
 
-      if (!validExtensions.includes(fileExtension)) {
-        messageError("กรุณาเลือกไฟล์ Excel เท่านั้น (.xlsx, .xls)");
-        return;
-      }
-
-      showLoader();
-      const type = empType.value === "officer" ? "office" : "employee";
-      const formData = new FormData();
-      formData.append("file", file);
-
-      await http.post(
-        config.API.uploadProfile(type, profileId.value),
-        formData,
-        {
-          headers: {
-            "Content-Type": "multipart/form-data",
+    if (!validExtensions.includes(fileExtension)) {
+      messageError($q, {
+        response: {
+          data: {
+            title: "กรุณาเลือกไฟล์ Excel เท่านั้น (.xlsx, .xls)",
           },
-        }
-      );
-
-      success($q, "อัปโหลดไฟล์สำเร็จ");
-      await fetchData();
-    } catch (error) {
-      messageError($q, error);
-    } finally {
-      hideLoader();
+        },
+      });
+      return;
     }
+
+    // เก็บไฟล์และเปิด preview modal
+    selectedExcelFile.value = file;
+    excelPreviewModal.value = true;
   };
 
   input.click();
 }
 
+/**
+ * ฟังก์ชันยืนยันการอัปโหลดไฟล์
+ * ส่งไฟล์ไปยัง API เมื่อ user ยืนยันจาก preview modal
+ */
+async function onConfirmUpload(file: File) {
+  try {
+    isParsingExcel.value = true;
+    showLoader();
+
+    const type = empType.value === "officer" ? "office" : "employee";
+    const formData = new FormData();
+    formData.append("file", file);
+
+    await http.post(config.API.uploadProfile(type, profileId.value), formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+
+    success($q, "อัปโหลดไฟล์สำเร็จ");
+    await fetchData();
+    excelPreviewModal.value = false;
+  } catch (error) {
+    messageError($q, error);
+  } finally {
+    hideLoader();
+    isParsingExcel.value = false;
+  }
+}
+
+/**
+ * ฟังก์ชันยกเลิกการอัปโหลด
+ * ปิด preview modal และล้างค่า
+ */
+function onCancelUpload() {
+  selectedExcelFile.value = null;
+  excelPreviewModal.value = false;
+}
+
 onMounted(async () => {
   await Promise.all([fetchData(), fetchType()]);
 });
@@ -941,6 +971,11 @@ onMounted(async () => {
         <q-space />
         <div>
           <q-btn
+            v-if="
+              tabs === 'PENDING' &&
+              statusCheckEdit == 'PENDING' &&
+              isConfirmEdit
+            "
             flat
             round
             color="blue"
@@ -1789,6 +1824,13 @@ onMounted(async () => {
     :fetch-data="fetchData"
     :columns="columns"
   />
+
+  <DialogExcelPreview
+    v-model:modal="excelPreviewModal"
+    :file="selectedExcelFile"
+    @confirm="onConfirmUpload"
+    @cancel="onCancelUpload"
+  />
 </template>
 
 <style scoped></style>

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>

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>

src/modules/09_leave/components/07_LeaveHistory/DialogForm.vue

@@ -390,7 +390,7 @@ watch(modal, async (val) => {
             <q-separator vertical />
 
             <!-- input -->
-            <div class="col overflow-hidden q-pa-md">
+            <div class="col overflow-auto q-pa-md">
               <div class="row q-col-gutter-sm">
                 <div class="col-12">
                   <datepicker

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; //*วัน เดือน ปีสิ้นสุดลา