275 lines
19 KiB
PHP
275 lines
19 KiB
PHP
<div class="d-flex justify-content-end mb-4">
|
|
<a href="<?= BASE_URL ?>/trip/create" class="btn btn-primary btn-lg shadow-sm rounded-pill fw-bold">
|
|
<i class="fa-solid fa-plus me-2"></i>สร้างคำขอใหม่
|
|
</a>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- Total Requests Card -->
|
|
<div class="col-xl-3 col-md-6 mb-4">
|
|
<div class="card border-0 border-start border-4 border-primary shadow-sm rounded-4 h-100 py-2">
|
|
<div class="card-body">
|
|
<div class="row no-gutters align-items-center">
|
|
<div class="col mr-2">
|
|
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">คำขอทั้งหมด (ของคุณ)</div>
|
|
<div class="h5 mb-0 font-weight-bold text-gray-800"><?= number_format($stats['total_requests']) ?></div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fa-solid fa-file-lines fa-2x text-black-50 opacity-25"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pending Approval Card -->
|
|
<div class="col-xl-3 col-md-6 mb-4">
|
|
<div class="card border-0 border-start border-4 border-warning shadow-sm rounded-4 h-100 py-2">
|
|
<div class="card-body">
|
|
<div class="row no-gutters align-items-center">
|
|
<div class="col mr-2">
|
|
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1">รอการอนุมัติ</div>
|
|
<div class="h5 mb-0 font-weight-bold text-gray-800"><?= number_format($stats['pending_approval']) ?></div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fa-solid fa-clock fa-2x text-black-50 opacity-25"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Approved Card -->
|
|
<div class="col-xl-3 col-md-6 mb-4">
|
|
<div class="card border-0 border-start border-4 border-success shadow-sm rounded-4 h-100 py-2">
|
|
<div class="card-body">
|
|
<div class="row no-gutters align-items-center">
|
|
<div class="col mr-2">
|
|
<div class="text-xs font-weight-bold text-success text-uppercase mb-1">อนุมัติแล้ว</div>
|
|
<div class="h5 mb-0 font-weight-bold text-gray-800"><?= number_format($stats['approved']) ?></div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fa-solid fa-check-circle fa-2x text-black-50 opacity-25"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rejected Card -->
|
|
<div class="col-xl-3 col-md-6 mb-4">
|
|
<div class="card border-0 border-start border-4 border-danger shadow-sm rounded-4 h-100 py-2">
|
|
<div class="card-body">
|
|
<div class="row no-gutters align-items-center">
|
|
<div class="col mr-2">
|
|
<div class="text-xs font-weight-bold text-danger text-uppercase mb-1">ไม่อนุมัติ/ยกเลิก</div>
|
|
<div class="h5 mb-0 font-weight-bold text-gray-800"><?= number_format($stats['rejected']) ?></div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fa-solid fa-xmark-circle fa-2x text-black-50 opacity-25"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-4">
|
|
<div class="col-lg-8">
|
|
<div class="card shadow-sm mb-4 border-0 rounded-4">
|
|
<div class="card-header py-3 bg-white d-flex flex-row align-items-center justify-content-between">
|
|
<h6 class="m-0 font-weight-bold text-primary">รายการคำขอ (ปี <?= $selectedYear + 543 ?>)</h6>
|
|
<form method="GET" class="d-inline-block">
|
|
<div class="input-group input-group-sm">
|
|
<label class="input-group-text border-0 bg-light">เลือกปี</label>
|
|
<select name="year" class="form-select form-select-sm border-light" onchange="this.form.submit()">
|
|
<?php foreach ($availableYears as $y): ?>
|
|
<option value="<?= $y ?>" <?= $y == $selectedYear ? 'selected' : '' ?>>ปี <?= $y + 543 ?></option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="card-body">
|
|
<?php if (empty($recentRequests)): ?>
|
|
<p class="text-center text-muted my-5">ยังไม่มีรายการคำขอในปีนี้</p>
|
|
<?php else: ?>
|
|
<div class="table-responsive">
|
|
<table class="table table-hover align-middle" id="dashboardTable">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th>วันที่ขอ</th>
|
|
<th>เลขที่หนังสือ</th>
|
|
<th>เรื่อง / สถานที่</th>
|
|
<th>สถานะ</th>
|
|
<th>จัดการ</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php foreach ($recentRequests as $req): ?>
|
|
<tr>
|
|
<td data-order="<?= strtotime($req['created_at']) ?>"><?= date('d/m/Y', strtotime($req['created_at'])) ?></td>
|
|
<td><?= \App\Core\Security::escape($req['doc_number'] ?: '-') ?></td>
|
|
<td>
|
|
<strong><?= \App\Core\Security::escape($req['title']) ?></strong><br>
|
|
<small class="text-muted"><i class="fa-solid fa-location-dot"></i> <?= \App\Core\Security::escape($req['location']) ?></small>
|
|
</td>
|
|
<td>
|
|
<?php if($req['status'] === 'Pending'): ?>
|
|
<span class="badge bg-warning text-dark">รออนุมัติ</span>
|
|
<?php elseif($req['status'] === 'Approved'): ?>
|
|
<span class="badge bg-success">อนุมัติแล้ว</span>
|
|
<?php elseif($req['status'] === 'Rejected'): ?>
|
|
<span class="badge bg-danger">ไม่อนุมัติ</span>
|
|
<?php else: ?>
|
|
<span class="badge bg-secondary"><?= $req['status'] ?></span>
|
|
<?php endif; ?>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group btn-group-sm">
|
|
<?php if ($req['status'] === 'Approved'): ?>
|
|
<a href="<?= BASE_URL ?>/trip/print?id=<?= $req['id'] ?>" target="_blank" class="btn btn-outline-secondary" title="พิมพ์เอกสาร">
|
|
<i class="fa-solid fa-print"></i>
|
|
</a>
|
|
<button type="button" class="btn btn-outline-warning" title="ขอเปลี่ยนแปลงกำหนดการ" data-bs-toggle="modal" data-bs-target="#reviseModal<?= $req['id'] ?>">
|
|
<i class="fa-solid fa-pen"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-outline-danger" title="ขอยกเลิกการเดินทาง" data-bs-toggle="modal" data-bs-target="#cancelModal<?= $req['id'] ?>">
|
|
<i class="fa-solid fa-ban"></i>
|
|
</button>
|
|
<!-- Modal for Revision Request -->
|
|
<div class="modal fade" id="reviseModal<?= $req['id'] ?>" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content text-start">
|
|
<form action="<?= BASE_URL ?>/trip/request-revise" method="POST">
|
|
<input type="hidden" name="csrf_token" value="<?= $csrf_token ?>">
|
|
<input type="hidden" name="id" value="<?= $req['id'] ?>">
|
|
<div class="modal-header bg-warning text-dark">
|
|
<h5 class="modal-title">ขอเปลี่ยนแปลงกำหนดการ</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>คุณกำลังขอเปลี่ยนแปลงกำหนดการสำหรับ: <strong><?= \App\Core\Security::escape($req['title']) ?></strong></p>
|
|
<div class="mb-3">
|
|
<label class="form-label text-danger">ระบุรายละเอียดที่เปลี่ยนแปลง *</label>
|
|
<textarea class="form-control" name="revise_reason" rows="4" required placeholder="เช่น ขอเลื่อนวันเดินทางเป็นวันที่ 10-12 ต.ค. เนื่องจากผู้จัดเลื่อนกำหนดการ..."></textarea>
|
|
</div>
|
|
<div class="alert alert-info small">
|
|
<i class="fa-solid fa-circle-info"></i> คำขอนี้จะถูกส่งกลับไปให้ผู้อนุมัติพิจารณาการเปลี่ยนแปลงอีกครั้ง
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">ปิด</button>
|
|
<button type="submit" class="btn btn-warning"><i class="fa-solid fa-paper-plane me-1"></i> ส่งคำขอเปลี่ยนแปลง</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Modal for Cancellation Request -->
|
|
<div class="modal fade" id="cancelModal<?= $req['id'] ?>" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content text-start">
|
|
<form action="<?= BASE_URL ?>/trip/request-cancel" method="POST">
|
|
<input type="hidden" name="csrf_token" value="<?= $csrf_token ?>">
|
|
<input type="hidden" name="id" value="<?= $req['id'] ?>">
|
|
<div class="modal-header bg-danger text-white">
|
|
<h5 class="modal-title">ขอยกเลิกการเดินทาง</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>คุณกำลังขอยกเลิกรายการ: <strong><?= \App\Core\Security::escape($req['title']) ?></strong></p>
|
|
<div class="mb-3">
|
|
<label class="form-label text-danger">เหตุผลที่ขอยกเลิก *</label>
|
|
<textarea class="form-control" name="cancel_reason" rows="3" required placeholder="เช่น ผู้จัดประกาศยกเลิกงาน หรือ ติดภารกิจด่วน"></textarea>
|
|
</div>
|
|
<div class="alert alert-warning small">
|
|
<i class="fa-solid fa-circle-info"></i> คำขอนี้จะถูกส่งกลับไปให้ผู้อนุมัติพิจารณาการยกเลิกอีกครั้ง
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">ปิด</button>
|
|
<button type="submit" class="btn btn-danger"><i class="fa-solid fa-paper-plane me-1"></i> ส่งคำขอยกเลิก</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php else: ?>
|
|
<button class="btn btn-outline-secondary" title="พิมพ์ได้เมื่ออนุมัติแล้วเท่านั้น" disabled>
|
|
<i class="fa-solid fa-print"></i>
|
|
</button>
|
|
<?php endif; ?>
|
|
<?php if ($req['status'] === 'Pending'): ?>
|
|
<a href="<?= BASE_URL ?>/trip/edit?id=<?= $req['id'] ?>" class="btn btn-outline-primary" title="แก้ไข">
|
|
<i class="fa-solid fa-pen-to-square"></i>
|
|
</a>
|
|
<?php endif; ?>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<?php endforeach; ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4">
|
|
<div class="card shadow-sm mb-4 border-0 rounded-4">
|
|
<div class="card-header py-3 bg-white d-flex flex-row align-items-center justify-content-between">
|
|
<h6 class="m-0 font-weight-bold text-primary">สถิติ (Chart)</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<canvas id="myPieChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<?php
|
|
// Adding extra script for Chart.js and DataTables
|
|
$extraScripts = '
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
// Initialize DataTables
|
|
if ($("#dashboardTable").length > 0) {
|
|
$("#dashboardTable").DataTable({
|
|
"language": {
|
|
"url": "//cdn.datatables.net/plug-ins/1.13.6/i18n/th.json"
|
|
},
|
|
"order": [[0, "desc"]], // เรียงจากวันที่ขอล่าสุด
|
|
"pageLength": 10 // แสดง 10 รายการต่อหน้า
|
|
});
|
|
}
|
|
|
|
var ctx = document.getElementById("myPieChart");
|
|
var myPieChart = new Chart(ctx, {
|
|
type: "doughnut",
|
|
data: {
|
|
labels: ["รออนุมัติ", "อนุมัติ", "ไม่อนุมัติ"],
|
|
datasets: [{
|
|
data: [' . $stats['pending_approval'] . ', ' . $stats['approved'] . ', ' . $stats['rejected'] . '],
|
|
backgroundColor: ["#ffc107", "#198754", "#dc3545"],
|
|
hoverBackgroundColor: ["#e0a800", "#157347", "#c82333"],
|
|
hoverBorderColor: "rgba(234, 236, 244, 1)",
|
|
}],
|
|
},
|
|
options: {
|
|
maintainAspectRatio: false,
|
|
cutout: "70%",
|
|
plugins: {
|
|
legend: {
|
|
position: "bottom"
|
|
}
|
|
}
|
|
},
|
|
});
|
|
});
|
|
</script>
|
|
';
|
|
?>
|