238 lines
11 KiB
PHP
238 lines
11 KiB
PHP
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h1 class="h3 mb-0 text-gray-800">รายงานสรุป (Summary Reports)</h1>
|
|
<div class="d-flex gap-2">
|
|
<select class="form-select form-select-sm shadow-sm" id="yearFilter" onchange="window.location.href='<?= BASE_URL ?>/report?year='+this.value">
|
|
<?php
|
|
$currentCE = date('Y');
|
|
for($i = 0; $i <= 3; $i++) {
|
|
$yearCE = $currentCE - $i;
|
|
$yearBE = $yearCE + 543;
|
|
$selected = (isset($filterYear) && $filterYear == $yearCE) ? 'selected' : '';
|
|
echo "<option value='{$yearCE}' {$selected}>ปี พ.ศ. {$yearBE}</option>";
|
|
}
|
|
?>
|
|
</select>
|
|
<a href="<?= BASE_URL ?>/report/export?year=<?= isset($filterYear) ? $filterYear : date('Y') ?>" class="btn btn-sm btn-success shadow-sm">
|
|
<i class="fas fa-download fa-sm text-white-50"></i> Export to CSV
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content Row -->
|
|
<div class="row">
|
|
|
|
<!-- Total Trips -->
|
|
<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($totalTrips) ?> ครั้ง</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fas fa-calendar fa-2x text-gray-300"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Total Budget -->
|
|
<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($totalBudget, 2) ?></div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fas fa-money-bill-wave fa-2x text-gray-300"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pending Requests -->
|
|
<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">รอการอนุมัติ (Pending)</div>
|
|
<div class="h5 mb-0 font-weight-bold text-gray-800"><?= number_format($pendingCount) ?> รายการ</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fas fa-clock fa-2x text-gray-300"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rejected Requests -->
|
|
<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">ไม่อนุมัติ (Rejected)</div>
|
|
<div class="h5 mb-0 font-weight-bold text-gray-800"><?= number_format($rejectedCount) ?> รายการ</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fas fa-times-circle fa-2x text-gray-300"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- Area Chart -->
|
|
<div class="col-xl-8 col-lg-7">
|
|
<div class="card shadow-sm border-0 rounded-4 mb-4">
|
|
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
|
|
<h6 class="m-0 font-weight-bold text-primary">สถิติการใช้งบประมาณรายเดือน</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="chart-area">
|
|
<canvas id="myAreaChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pie Chart -->
|
|
<div class="col-xl-4 col-lg-5">
|
|
<div class="card shadow-sm border-0 rounded-4 mb-4">
|
|
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
|
|
<h6 class="m-0 font-weight-bold text-primary">สัดส่วนสถานะการอนุมัติ</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="chart-pie pt-4 pb-2">
|
|
<canvas id="myPieChart"></canvas>
|
|
</div>
|
|
<div class="mt-4 text-center small">
|
|
<span class="mr-2"><i class="fas fa-circle text-success"></i> อนุมัติแล้ว</span>
|
|
<span class="mr-2"><i class="fas fa-circle text-warning"></i> รอพิจารณา</span>
|
|
<span class="mr-2"><i class="fas fa-circle text-danger"></i> ไม่อนุมัติ</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Trips Table -->
|
|
<div class="card shadow-sm border-0 rounded-4 mb-4 overflow-hidden">
|
|
<div class="card-header py-3">
|
|
<h6 class="m-0 font-weight-bold text-primary">ประวัติรายการเดินทางล่าสุด</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
|
|
<thead>
|
|
<tr>
|
|
<th>เลขที่หนังสือเดินทาง</th>
|
|
<th>ชื่อเรื่อง</th>
|
|
<th>สถานที่</th>
|
|
<th>วันที่เดินทาง</th>
|
|
<th>งบประมาณ</th>
|
|
<th>สถานะ</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php foreach ($recentTrips as $trip): ?>
|
|
<tr>
|
|
<td><?= htmlspecialchars($trip['trip_running_number'] ?? '-') ?></td>
|
|
<td><?= htmlspecialchars($trip['title']) ?></td>
|
|
<td><?= htmlspecialchars($trip['location']) ?></td>
|
|
<td><?= date('d/m/Y', strtotime($trip['start_date'])) ?></td>
|
|
<td><?= number_format($trip['budget'], 2) ?></td>
|
|
<td>
|
|
<?php if ($trip['status'] === 'Approved'): ?>
|
|
<span class="badge bg-success">อนุมัติแล้ว</span>
|
|
<?php elseif ($trip['status'] === 'Rejected'): ?>
|
|
<span class="badge bg-danger">ไม่อนุมัติ</span>
|
|
<?php else: ?>
|
|
<span class="badge bg-warning text-dark">รอพิจารณา</span>
|
|
<?php endif; ?>
|
|
</td>
|
|
</tr>
|
|
<?php endforeach; ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<?php
|
|
$extraScripts = '
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
// Area Chart (Budget per month)
|
|
var ctxArea = document.getElementById("myAreaChart");
|
|
var monthlyData = ' . json_encode($monthlyBudget) . ';
|
|
var myLineChart = new Chart(ctxArea, {
|
|
type: "line",
|
|
data: {
|
|
labels: ["ม.ค.", "ก.พ.", "มี.ค.", "เม.ย.", "พ.ค.", "มิ.ย.", "ก.ค.", "ส.ค.", "ก.ย.", "ต.ค.", "พ.ย.", "ธ.ค."],
|
|
datasets: [{
|
|
label: "งบประมาณ (บาท)",
|
|
lineTension: 0.3,
|
|
backgroundColor: "rgba(78, 115, 223, 0.05)",
|
|
borderColor: "rgba(78, 115, 223, 1)",
|
|
pointRadius: 3,
|
|
pointBackgroundColor: "rgba(78, 115, 223, 1)",
|
|
pointBorderColor: "rgba(78, 115, 223, 1)",
|
|
pointHoverRadius: 3,
|
|
pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
|
|
pointHoverBorderColor: "rgba(78, 115, 223, 1)",
|
|
pointHitRadius: 10,
|
|
pointBorderWidth: 2,
|
|
data: monthlyData,
|
|
}],
|
|
},
|
|
options: {
|
|
maintainAspectRatio: false,
|
|
layout: { padding: { left: 10, right: 25, top: 25, bottom: 0 } },
|
|
scales: { x: { grid: { display: false, drawBorder: false } }, y: { ticks: { maxTicksLimit: 5, padding: 10 }, grid: { color: "rgb(234, 236, 244)", zeroLineColor: "rgb(234, 236, 244)", drawBorder: false, borderDash: [2], zeroLineBorderDash: [2] } } },
|
|
plugins: { legend: { display: false } }
|
|
}
|
|
});
|
|
|
|
// Pie Chart (Status)
|
|
var ctxPie = document.getElementById("myPieChart");
|
|
var myPieChart = new Chart(ctxPie, {
|
|
type: "doughnut",
|
|
data: {
|
|
labels: ["อนุมัติแล้ว", "รอพิจารณา", "ไม่อนุมัติ"],
|
|
datasets: [{
|
|
data: [' . $approvedCount . ', ' . $pendingCount . ', ' . $rejectedCount . '],
|
|
backgroundColor: ["#1cc88a", "#f6c23e", "#e74a3b"],
|
|
hoverBackgroundColor: ["#17a673", "#dda20a", "#e02d1b"],
|
|
hoverBorderColor: "rgba(234, 236, 244, 1)",
|
|
}],
|
|
},
|
|
options: {
|
|
maintainAspectRatio: false,
|
|
plugins: { legend: { display: false } },
|
|
cutout: "80%",
|
|
},
|
|
});
|
|
|
|
// DataTable
|
|
$("#dataTable").DataTable({
|
|
"language": {
|
|
"url": "//cdn.datatables.net/plug-ins/1.13.6/i18n/th.json"
|
|
},
|
|
"order": [[2, "desc"]]
|
|
});
|
|
});
|
|
</script>
|
|
';
|
|
?>
|