CRUD area & gate, statistik pengunjung per pintu, laporan okupansi area
This commit is contained in:
@@ -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 () {
|
||||
|
||||
Reference in New Issue
Block a user