CRUD area & gate, statistik pengunjung per pintu, laporan okupansi area

This commit is contained in:
2026-10-21 07:50:46 +07:00
parent 411d365366
commit 42a4d4ccf5
13 changed files with 1826 additions and 79 deletions
+9 -13
View File
@@ -15,8 +15,8 @@
<div class="col-md-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Statistik Transaksi</h4>
<small class="text-muted d-block mb-3">Periode berdasarkan tanggal masuk. Pecah per hari / minggu / bulan.</small>
<h4 class="card-title">Statistik Transaksi Keluar</h4>
<small class="text-muted d-block mb-3">Hanya transaksi yang sudah keluar. Periode berdasarkan waktu keluar, dipecah per hari / minggu / bulan.</small>
<form id="filter-statistik" action="javascript:void(0)">
<div class="row align-items-end g-2">
<div class="col-md-2">
@@ -60,9 +60,8 @@
</form>
<hr class="my-3">
<div class="row g-2 mb-3" id="ringkasan">
<div class="col-md-2"><div class="border rounded p-2 h-100 stat-card"><small class="text-muted">Transaksi</small><div class="fw-bold" id="sum-trx">-</div></div></div>
<div class="col-md-2"><div class="border rounded p-2 h-100 stat-card"><small class="text-muted">Keluar</small><div class="fw-bold" id="sum-keluar">-</div></div></div>
<div class="col-md-2"><div class="border rounded p-2 h-100 stat-card"><small class="text-muted">Pendapatan</small><div class="fw-bold text-success" id="sum-pendapatan">-</div></div></div>
<div class="col-md-3"><div class="border rounded p-2 h-100 stat-card"><small class="text-muted">Transaksi Keluar</small><div class="fw-bold" id="sum-trx">-</div></div></div>
<div class="col-md-3"><div class="border rounded p-2 h-100 stat-card"><small class="text-muted">Pendapatan</small><div class="fw-bold text-success" id="sum-pendapatan">-</div></div></div>
<div class="col-md-3"><div class="border rounded p-2 h-100 stat-card"><small class="text-muted">Tunai</small><div class="fw-bold" id="sum-tunai">-</div></div></div>
<div class="col-md-3"><div class="border rounded p-2 h-100 stat-card"><small class="text-muted">Cashless</small><div class="fw-bold text-info" id="sum-cashless">-</div></div></div>
</div>
@@ -72,15 +71,14 @@
<thead>
<tr>
<th>Periode</th>
<th class="text-end">Transaksi</th>
<th class="text-end">Keluar</th>
<th class="text-end">Transaksi Keluar</th>
<th class="text-end">Pendapatan</th>
<th class="text-end">Tunai</th>
<th class="text-end">Cashless</th>
</tr>
</thead>
<tbody id="body-statistik">
<tr><td colspan="6" class="text-center text-muted">Pilih filter lalu klik Proses.</td></tr>
<tr><td colspan="5" class="text-center text-muted">Pilih filter lalu klik Proses.</td></tr>
</tbody>
</table>
</div>
@@ -145,7 +143,7 @@ function drawChart(rows, grup) {
$('#filter-statistik').on('submit', function () {
const btn = $('#btn-proses'); const btnHtml = btn.html();
btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Memproses...');
$('#body-statistik').html('<tr><td colspan="6" class="text-center text-muted py-4"><span class="spinner-border spinner-border-sm me-2"></span>Memuat statistik...</td></tr>');
$('#body-statistik').html('<tr><td colspan="5" class="text-center text-muted py-4"><span class="spinner-border spinner-border-sm me-2"></span>Memuat statistik...</td></tr>');
const grup = $('#grup').val();
$.ajax({
url: dataUrl,
@@ -160,12 +158,11 @@ function drawChart(rows, grup) {
success: function (r) {
const s = r.ringkasan || {};
$('#sum-trx').text(fmtN(s.transaksi) + ' trx');
$('#sum-keluar').text(fmtN(s.keluar) + ' trx');
$('#sum-pendapatan').text(fmtRp(s.pendapatan));
$('#sum-tunai').text(fmtRp(s.tunai));
$('#sum-cashless').text(fmtRp(s.cashless));
if (!r.data.length) {
$('#body-statistik').html('<tr><td colspan="6" class="text-center">Data tidak ditemukan.</td></tr>');
$('#body-statistik').html('<tr><td colspan="5" class="text-center">Data tidak ditemukan.</td></tr>');
if (chart) chart.destroy();
return;
}
@@ -173,7 +170,6 @@ function drawChart(rows, grup) {
r.data.forEach(function (row) {
html += '<tr><td>' + labelPeriode(row.periode, grup) + '</td>'
+ '<td class="text-end">' + fmtN(row.transaksi) + '</td>'
+ '<td class="text-end">' + fmtN(row.keluar) + '</td>'
+ '<td class="text-end">' + fmtRp(row.pendapatan) + '</td>'
+ '<td class="text-end">' + fmtRp(row.tunai) + '</td>'
+ '<td class="text-end">' + fmtRp(row.cashless) + '</td></tr>';
@@ -185,7 +181,7 @@ function drawChart(rows, grup) {
let msg = 'Gagal memuat statistik.';
if (xhr.responseJSON?.message) msg = xhr.responseJSON.message;
else if (xhr.status === 422 && xhr.responseJSON?.errors) msg = Object.values(xhr.responseJSON.errors).flat().join(' ');
$('#body-statistik').html('<tr><td colspan="6" class="text-center text-danger">' + msg + '</td></tr>');
$('#body-statistik').html('<tr><td colspan="5" class="text-center text-danger">' + msg + '</td></tr>');
Swal.fire({icon: 'error', title: 'Gagal memuat', text: msg});
},
complete: function () {