cw
90 lines
4.4 KiB
PHP
90 lines
4.4 KiB
PHP
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px">
|
|
<div>
|
|
<h2 style="font-size:1.2rem;font-weight:700">📦 Monitoring Bantuan</h2>
|
|
<p class="text-muted text-sm"><?= count($data) ?> penyaluran pada bulan <?= e($bulan) ?></p>
|
|
</div>
|
|
<form method="GET" style="display:flex;gap:8px;align-items:center">
|
|
<label class="text-sm">Bulan:</label>
|
|
<input type="month" name="bulan" class="form-control" value="<?= e($bulan) ?>" onchange="this.form.submit()">
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Stats Bulan Ini -->
|
|
<div class="stats-grid" style="grid-template-columns:repeat(4,1fr);margin-bottom:20px">
|
|
<div class="stat-card"><div class="stat-card-icon green">📦</div>
|
|
<div class="stat-card-body"><div class="stat-card-value"><?= count($data) ?></div><div class="stat-card-label">Total Penyaluran</div></div>
|
|
</div>
|
|
<div class="stat-card"><div class="stat-card-icon blue">👥</div>
|
|
<div class="stat-card-body"><div class="stat-card-value"><?= count(array_unique(array_column($data,'id_warga'))) ?></div><div class="stat-card-label">Warga Terbantu</div></div>
|
|
</div>
|
|
<div class="stat-card"><div class="stat-card-icon orange">⛪</div>
|
|
<div class="stat-card-body"><div class="stat-card-value"><?= count(array_unique(array_column($data,'id_rumah_ibadah'))) ?></div><div class="stat-card-label">Rumah Ibadah Aktif</div></div>
|
|
</div>
|
|
<div class="stat-card"><div class="stat-card-icon purple">📊</div>
|
|
<div class="stat-card-body"><div class="stat-card-value"><?= count($perKategori) ?></div><div class="stat-card-label">Jenis Bantuan</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chart + Tabel -->
|
|
<div style="display:grid;grid-template-columns:1fr 280px;gap:20px;margin-bottom:20px">
|
|
<div class="card">
|
|
<div class="card-header"><span class="card-icon">📋</span><h3>Daftar Penyaluran Bantuan</h3></div>
|
|
<div class="card-body no-pad">
|
|
<div class="filters-bar" style="margin:0;border:none;border-bottom:1px solid var(--clr-border);border-radius:0">
|
|
<input type="text" id="search-bantuan" class="form-control" placeholder="🔍 Cari nama warga..." style="max-width:280px">
|
|
</div>
|
|
<div class="table-wrap">
|
|
<table id="table-bantuan">
|
|
<thead>
|
|
<tr><th>Kode</th><th>Warga</th><th>Kategori</th><th>Jumlah</th><th>Rumah Ibadah</th><th>Wilayah</th><th>Tanggal</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php foreach($data as $b): ?>
|
|
<tr>
|
|
<td><code style="font-size:0.72rem;background:#f1f5f9;padding:1px 5px;border-radius:3px"><?= e($b['kode_bantuan']) ?></code></td>
|
|
<td style="font-weight:600;font-size:0.875rem"><?= e($b['warga']) ?></td>
|
|
<td><span class="badge badge-green"><?= e($b['kategori']) ?></span></td>
|
|
<td class="text-sm">
|
|
<?= $b['jumlah'] ? ($b['satuan']==='rupiah' ? formatRupiah($b['jumlah']) : number_format($b['jumlah']).' '.$b['satuan']) : '—' ?>
|
|
</td>
|
|
<td class="text-sm"><?= e($b['rumah_ibadah']) ?></td>
|
|
<td class="text-xs text-muted"><?= e($b['kecamatan']) ?></td>
|
|
<td class="text-xs text-muted"><?= formatTanggal($b['tanggal_penyaluran']) ?></td>
|
|
</tr>
|
|
<?php endforeach; ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<?php if(empty($data)): ?>
|
|
<div class="empty-state"><div class="empty-state-icon">📭</div><h3>Tidak ada penyaluran</h3><p>Belum ada bantuan yang disalurkan pada periode ini</p></div>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Donut per Kategori -->
|
|
<div class="card">
|
|
<div class="card-header"><span class="card-icon">🥧</span><h3>Per Kategori</h3></div>
|
|
<div class="card-body">
|
|
<div class="chart-wrap" style="height:200px"><canvas id="chart-kategori"></canvas></div>
|
|
<div style="margin-top:12px">
|
|
<?php foreach($perKategori as $k): ?>
|
|
<div style="display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid #f1f5f9;font-size:0.8rem">
|
|
<span><?= e($k['nama']) ?></span>
|
|
<strong><?= number_format($k['jumlah']) ?></strong>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
App.initTableSearch('search-bantuan','table-bantuan');
|
|
Charts.donut('chart-kategori',
|
|
<?= json_encode(array_column($perKategori,'nama')) ?>,
|
|
<?= json_encode(array_column($perKategori,'jumlah')) ?>
|
|
);
|
|
});
|
|
</script>
|