From 6aa2709986967dd70d6f0e1ab788e6b5931c4cb4 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 29 Jun 2026 16:39:36 +0700
Subject: [PATCH] feat(leave): add pending jobs tab to work-list page

---
 src/api/09_leave/api.leave.ts                 |   1 +
 .../components/02_WorkList/Tab4_Pending.vue   | 264 ++++++++++++++++++
 .../09_leave/interface/response/work.ts       |  21 ++
 src/modules/09_leave/views/02_WorkingMain.vue |   9 +
 4 files changed, 295 insertions(+)
 create mode 100644 src/modules/09_leave/components/02_WorkList/Tab4_Pending.vue

diff --git a/src/api/09_leave/api.leave.ts b/src/api/09_leave/api.leave.ts
index 3ea0ab8c3..ffd727de9 100644
--- a/src/api/09_leave/api.leave.ts
+++ b/src/api/09_leave/api.leave.ts
@@ -64,4 +64,5 @@ export default {
     `${leave}/report/download/time-records/${type}`,
 
   leaveTask: `${leave}/admin/leave-task/process`,
+  leavePendingJobs: `${leave}/pending-jobs/`,
 };
diff --git a/src/modules/09_leave/components/02_WorkList/Tab4_Pending.vue b/src/modules/09_leave/components/02_WorkList/Tab4_Pending.vue
new file mode 100644
index 000000000..e1fb8aee0
--- /dev/null
+++ b/src/modules/09_leave/components/02_WorkList/Tab4_Pending.vue
@@ -0,0 +1,264 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { QTableProps } from "quasar";
+import type { DataOption } from "@/interface/main";
+import type { DataPendingJobs } from "@/modules/09_leave/interface/response/work";
+
+const $q = useQuasar();
+const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
+  useCounterMixin();
+
+/** ข้อมูลตาราง*/
+const keyword = ref<string>("");
+const timeOutMinutes = ref<string>("30");
+const rowsMain = ref<DataPendingJobs[]>([]);
+const rows = ref<DataPendingJobs[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "checkType",
+    align: "left",
+    label: "ลงเวลาเข้า/ลงเวลาออก",
+    sortable: true,
+    field: "checkType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return val ? convertcheckType(val) : "-";
+    },
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return val ? convertStatus(val) : "-";
+    },
+  },
+  {
+    name: "createdDate",
+    align: "left",
+    label: "ลงเวลาเมื่อ",
+    sortable: true,
+    field: "createdDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return val ? date2Thai(val, false, true) : "-";
+    },
+  },
+  {
+    name: "processingDate",
+    align: "left",
+    label: "เริ่มประมวลผล",
+    sortable: true,
+    field: "processingDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return val ? date2Thai(val, false, true) : "-";
+    },
+  },
+  {
+    name: "completedDate",
+    align: "left",
+    label: "ประมวลผลเสร็จ",
+    sortable: true,
+    field: "completedDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return val ? date2Thai(val, false, true) : "-";
+    },
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "createdFullName",
+  "checkType",
+  "status",
+  "createdDate",
+  "processingDate",
+  "completedDate",
+]);
+const timeOutMinutesOption = ref<DataOption[]>([
+  { id: "30", label: "30 นาที" },
+  { id: "60", label: "1 ชั่วโมง" },
+  { id: "1440", label: "1 วัน" },
+  { id: "10080", label: "7 วัน" },
+]);
+
+/** ฟังก์ชันดึงข้อมูลจาก API */
+async function fetchData() {
+  try {
+    showLoader();
+    const res = await http.get(
+      `${config.API.leavePendingJobs}${Number(timeOutMinutes.value)}`
+    );
+
+    rowsMain.value = res.data.result;
+    serchDataTable();
+  } catch (error) {
+    messageError($q, error);
+  } finally {
+    hideLoader();
+  }
+}
+
+/** ฟังก์ชันค้นหาข้อมูลในตาราง */
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    keyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
+/**
+ * ฟังก์ชันแปลงสถานะเป็นข้อความ
+ * @param val
+ */
+function convertStatus(val: string) {
+  switch (val) {
+    case "PENDING":
+      return "รอดำเนินการ";
+    case "COMPLETED":
+      return "ดำเนินการเสร็จสิ้น";
+    default:
+      break;
+  }
+}
+
+function convertcheckType(val: string) {
+  switch (val) {
+    case "CHECK_OUT":
+      return "ลงเวลาออก";
+    case "CHECK_IN":
+      return "ลงเวลาเข้า";
+    default:
+      break;
+  }
+}
+
+onMounted(() => {
+  fetchData();
+});
+</script>
+
+<template>
+  <div class="row items-center q-gutter-x-sm q-pb-sm">
+    <q-select
+      for="selectStatus"
+      emit-value
+      map-options
+      outlined
+      dense
+      option-value="id"
+      option-label="label"
+      label="ประเภทตำแหน่ง"
+      use-input
+      v-model="timeOutMinutes"
+      hide-selected
+      fill-input
+      :options="timeOutMinutesOption"
+      @update:model-value="fetchData"
+    >
+      <template v-slot:no-option>
+        <q-item>
+          <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+        </q-item>
+      </template>
+    </q-select>
+    <q-space />
+
+    <q-input
+      dense
+      outlined
+      v-model="keyword"
+      label="ค้นหา"
+      @keydown.enter.prevent="serchDataTable"
+    >
+      <template v-slot:append>
+        <q-icon name="search" />
+      </template>
+    </q-input>
+    <q-select
+      v-model="visibleColumns"
+      multiple
+      outlined
+      dense
+      options-dense
+      :display-value="$q.lang.table.columns"
+      emit-value
+      map-options
+      :options="columns"
+      option-value="name"
+      style="min-width: 140px"
+    />
+  </div>
+  <d-table
+    :columns="columns"
+    :rows="rows"
+    row-key="id"
+    flat
+    bordered
+    :paging="true"
+    dense
+    class="custom-header-table"
+    :visible-columns="visibleColumns"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th
+          v-for="col in props.cols"
+          :key="col.name"
+          :props="props"
+          style="color: #000000; font-weight: 500"
+        >
+          <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 ? col.value : "-" }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </d-table>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/09_leave/interface/response/work.ts b/src/modules/09_leave/interface/response/work.ts
index af055b794..d35a1a8d4 100644
--- a/src/modules/09_leave/interface/response/work.ts
+++ b/src/modules/09_leave/interface/response/work.ts
@@ -98,6 +98,26 @@ interface DataProcess {
   errorMessage: string | null;
 }
 
+interface DataPendingJobs {
+  taskId: string;
+  keycloakUserId: string;
+  createdDate: string | Date;
+  processingDate: string | Date;
+  completedDate: string | Date;
+  status: string;
+  checkType: string;
+  checkInId: string;
+  errorMessage: string;
+  additionalData: string;
+  id: string;
+  createdAt: string | Date;
+  createdUserId: string;
+  lastUpdatedAt: string;
+  lastUpdateUserId: string;
+  createdFullName: string;
+  lastUpdateFullName: string;
+}
+
 export type {
   TableRows,
   DataResLog,
@@ -105,4 +125,5 @@ export type {
   TableRowsTime,
   FormDetail,
   DataProcess,
+  DataPendingJobs,
 };
diff --git a/src/modules/09_leave/views/02_WorkingMain.vue b/src/modules/09_leave/views/02_WorkingMain.vue
index fed615baf..87b81c060 100644
--- a/src/modules/09_leave/views/02_WorkingMain.vue
+++ b/src/modules/09_leave/views/02_WorkingMain.vue
@@ -9,6 +9,7 @@ import { useRoute } from "vue-router";
 import Tab1 from "@/modules/09_leave/components/02_WorkList/Tab1.vue";
 import Tab2 from "@/modules/09_leave/components/02_WorkList/Tab2.vue";
 import Tab3 from "@/modules/09_leave/components/02_WorkList/Tab3_Processed_Late.vue";
+import Tab4_Pending from "@/modules/09_leave/components/02_WorkList/Tab4_Pending.vue";
 
 const stores = useWorklistDataStore();
 const route = useRoute();
@@ -21,6 +22,10 @@ const isPermissionTab3 = computed(() => {
       checkPermission(route)?.attrIsUpdate)
   );
 });
+
+const isPermissionTab4 = computed(() => {
+  return checkPermission(route)?.attrOwnership === "OWNER";
+});
 </script>
 
 <template>
@@ -46,6 +51,7 @@ const isPermissionTab3 = computed(() => {
         name="3"
         label="ประมวลผลการขาดราชการ/มาสาย"
       />
+      <q-tab v-if="isPermissionTab4" name="4" label="รอประมวลผล/มาสาย" />
       <!-- เพิ่มแท็บใหม่ -->
     </q-tabs>
 
@@ -62,6 +68,9 @@ const isPermissionTab3 = computed(() => {
         <q-tab-panel name="3">
           <Tab3 />
         </q-tab-panel>
+        <q-tab-panel name="4">
+          <Tab4_Pending />
+        </q-tab-panel>
       </q-tab-panels>
     </div>
   </q-card>