cclwnrty/D1041231092-webgis-povertymap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
cw
2026-06-11 12:30:23 +07:00
commit 2676f3a61c
70 changed files with 9867 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/views/admin/aktivitas.php
+41
View File
@@ -0,0 +1,41 @@
<div style="margin-bottom:20px">
<h2 style="font-size:1.2rem;font-weight:700">📋 Log Aktivitas Sistem</h2>
<p class="text-muted text-sm">200 aktivitas terbaru tercatat dalam sistem</p>
</div>
<div class="filters-bar">
<input type="text" id="search-akt" class="form-control" placeholder="🔍 Cari user, modul, aksi..." style="max-width:300px">
</div>
<div class="card">
<div class="card-body no-pad">
<div class="table-wrap">
<table id="table-akt">
<thead>
<tr><th>Waktu</th><th>User</th><th>Role</th><th>Aksi</th><th>Modul</th><th>Deskripsi</th><th>IP</th></tr>
</thead>
<tbody>
<?php foreach($data as $a): ?>
<tr>
<td class="text-xs" style="font-family:monospace;white-space:nowrap"><?= $a['created_at'] ?></td>
<td class="text-sm font-bold"><?= e($a['nama_user']??'System') ?></td>
<td>
<?php $rc=['superadmin'=>'badge-purple','verifikator'=>'badge-blue','rumah_ibadah'=>'badge-green','dinsos'=>'badge-teal','walikota'=>'badge-orange']; ?>
<span class="badge <?= $rc[$a['role']??'']??'badge-gray' ?>"><?= e($a['role']??'—') ?></span>
</td>
<td class="text-sm font-bold"><?= e($a['aksi']) ?></td>
<td><span class="badge badge-gray"><?= e($a['modul']??'—') ?></span></td>
<td class="text-sm text-muted"><?= e($a['deskripsi']??'') ?></td>
<td class="text-xs" style="font-family:monospace"><?= e($a['ip_address']??'') ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
<?php if(empty($data)): ?>
<div class="empty-state"><div class="empty-state-icon">📋</div><h3>Belum ada aktivitas</h3></div>
<?php endif; ?>
</div>
</div>
<script>document.addEventListener('DOMContentLoaded',()=>App.initTableSearch('search-akt','table-akt'));</script>
app/views/admin/blind_spot.php
+56
View File
@@ -0,0 +1,56 @@
<?php
// blind_spot.php — Admin view
?>
<div style="margin-bottom:20px">
<h2 style="font-size:1.2rem;font-weight:700">⚠️ Monitoring Blind Spot</h2>
<p class="text-muted text-sm"><?= count($data) ?> warga tidak terjangkau radius rumah ibadah manapun</p>
</div>
<?php if(empty($data)): ?>
<div class="card"><div class="card-body" style="text-align:center;padding:48px">
<div style="font-size:3rem">🎉</div>
<h3 style="margin:12px 0 6px;font-size:1.1rem">Tidak Ada Blind Spot!</h3>
<p style="color:var(--clr-text-muted)">Seluruh warga miskin sudah berada dalam radius pelayanan rumah ibadah.</p>
</div></div>
<?php else: ?>
<div class="card" style="margin-bottom:16px">
<div class="card-body no-pad"><div id="bs-map" style="height:320px"></div></div>
</div>
<div class="card">
<div class="card-header"><span class="card-icon">⚠️</span><h3>Daftar Warga Blind Spot</h3></div>
<div class="card-body no-pad">
<div class="table-wrap">
<table>
<thead><tr><th>#</th><th>Nama</th><th>Kecamatan</th><th>Kelurahan</th><th>Status Kemiskinan</th><th>Prioritas</th></tr></thead>
<tbody>
<?php foreach($data as $i=>$w): ?>
<tr>
<td class="text-xs text-muted"><?= $i+1 ?></td>
<td style="font-weight:600"><?= e($w['nama']) ?></td>
<td class="text-sm"><?= e($w['kecamatan']) ?></td>
<td class="text-sm"><?= e($w['kelurahan']) ?></td>
<td><?php $sc=['Miskin Ekstrem'=>'badge-red','Miskin'=>'badge-orange','Rentan Miskin'=>'badge-yellow']; ?>
<span class="badge <?= $sc[$w['status_kemiskinan']]??'badge-gray' ?>"><?= e($w['status_kemiskinan']) ?></span></td>
<td><?php $pc=['Tinggi'=>'badge-red','Sedang'=>'badge-yellow','Rendah'=>'badge-green']; ?>
<span class="badge <?= $pc[$w['level_prioritas']]??'badge-gray' ?>"><?= e($w['level_prioritas']) ?></span></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
<?php endif; ?>
<script>
document.addEventListener('DOMContentLoaded', async () => {
const map = GISMap.init('bs-map', <?= MAP_DEFAULT_LAT ?>, <?= MAP_DEFAULT_LNG ?>, 12);
const ri = await App.fetchJSON('<?= APP_URL ?>/api/rumah-ibadah');
if(ri) GISMap.addRILayer(ri);
const bs = <?= json_encode(array_map(fn($w)=>['lat'=>(float)$w['lat'],'lng'=>(float)$w['lng'],'nama'=>$w['nama'],'status_kemiskinan'=>$w['status_kemiskinan']], array_filter($data,fn($w)=>$w['lat']&&$w['lng']))) ?>;
bs.forEach(w => L.circleMarker([w.lat,w.lng],{radius:10,fillColor:'#7c3aed',color:'#fff',weight:2,fillOpacity:0.9}).bindPopup(`<strong>⚠ ${w.nama}</strong><br>${w.status_kemiskinan}`).addTo(map));
GISMap.autoFitBounds();
});
</script>
app/views/admin/dashboard.php
+189
View File
@@ -0,0 +1,189 @@
<?php
// Ekstrak data chart di luar heredoc agar tidak ada konversi array-dalam-string
$chartKec = [];
$chartKecData = [];
foreach ($perKecamatan ?? [] as $row) {
$chartKec[] = (string)($row['nama'] ?? '');
$chartKecData[] = (int)($row['total'] ?? 0);
}
$chartBulan = [];
$chartBantuanData = [];
foreach ($trenBantuan ?? [] as $row) {
$chartBulan[] = (string)($row['bulan'] ?? '');
$chartBantuanData[] = (int)($row['jumlah'] ?? 0);
}
$jsonKec = json_encode($chartKec);
$jsonKecData = json_encode($chartKecData);
$jsonBulan = json_encode($chartBulan);
$jsonBantuanData = json_encode($chartBantuanData);
$mapLat = MAP_DEFAULT_LAT;
$mapLng = MAP_DEFAULT_LNG;
$appUrl = APP_URL;
$extraJs = <<<JS
<script>
document.addEventListener('DOMContentLoaded', async () => {
// Init peta
const map = GISMap.init('admin-map', {$mapLat}, {$mapLng}, 13);
// Load data peta
const data = await App.fetchJSON('{$appUrl}/admin/api/peta');
if (data) {
const wargaLayer = GISMap.addWargaLayer(data.warga || []);
const riLayer = GISMap.addRILayer(data.rumah_ibadah || []);
const lapLayer = GISMap.addLaporanLayer(data.laporan || []);
const overlays = {
'👥 Warga Miskin': wargaLayer,
'⛪ Rumah Ibadah': riLayer,
'📋 Laporan Masuk': lapLayer
};
L.control.layers(GISMap.layers, overlays, {position:'topright', collapsed:true}).addTo(map);
GISMap.autoFitBounds();
const heat = await App.fetchJSON('{$appUrl}/dinsos/api/heatmap');
if (heat) GISMap.addHeatmap(heat);
} else {
GISMap.autoFitBounds(true);
}
// Charts — data sudah diekstrak bersih di PHP
const kec = {$jsonKec};
const kecData = {$jsonKecData};
Charts.bar('chart-kecamatan', kec, [{ label: 'Warga Miskin', data: kecData }]);
const bulan = {$jsonBulan};
const bantuanData = {$jsonBantuanData};
Charts.line('chart-bantuan', bulan, [{ label: 'Bantuan Disalurkan', data: bantuanData }]);
});
</script>
JS; ?>
<!-- Stats Grid -->
<div class="stats-grid">
<div class="stat-card">
<div class="stat-card-icon blue">👥</div>
<div class="stat-card-body">
<div class="stat-card-value"><?= number_format((int)($stats['total_warga'] ?? 0)) ?></div>
<div class="stat-card-label">Total Warga Miskin</div>
<div class="stat-card-sub"><?= number_format((int)($stats['warga_ekstrem'] ?? 0)) ?> miskin ekstrem</div>
</div>
</div>
<div class="stat-card">
<div class="stat-card-icon green">⛪</div>
<div class="stat-card-body">
<div class="stat-card-value"><?= number_format((int)($stats['total_ri'] ?? 0)) ?></div>
<div class="stat-card-label">Rumah Ibadah Aktif</div>
</div>
</div>
<div class="stat-card">
<div class="stat-card-icon orange">📋</div>
<div class="stat-card-body">
<div class="stat-card-value"><?= number_format((int)($stats['total_laporan'] ?? 0)) ?></div>
<div class="stat-card-label">Total Laporan</div>
<div class="stat-card-sub"><?= (int)($stats['laporan_pending'] ?? 0) ?> menunggu</div>
</div>
</div>
<div class="stat-card">
<div class="stat-card-icon teal">📦</div>
<div class="stat-card-body">
<div class="stat-card-value"><?= number_format((int)($stats['total_bantuan'] ?? 0)) ?></div>
<div class="stat-card-label">Total Bantuan</div>
</div>
</div>
<div class="stat-card">
<div class="stat-card-icon purple">⚠️</div>
<div class="stat-card-body">
<div class="stat-card-value"><?= number_format((int)($stats['blind_spot'] ?? 0)) ?></div>
<div class="stat-card-label">Blind Spot</div>
<div class="stat-card-sub">Belum terjangkau rumah ibadah</div>
</div>
</div>
<div class="stat-card">
<div class="stat-card-icon gray">👤</div>
<div class="stat-card-body">
<div class="stat-card-value"><?= number_format((int)($stats['total_user'] ?? 0)) ?></div>
<div class="stat-card-label">Pengguna Sistem</div>
</div>
</div>
</div>
<!-- Dashboard Grid: Map + Sidebar -->
<div class="dashboard-grid" style="grid-template-columns:1fr 360px;gap:20px;margin-bottom:24px">
<!-- PETA UTAMA -->
<div class="card">
<div class="card-header">
<span class="card-icon">🗺</span>
<h3>Peta Persebaran Kemiskinan Kota Pontianak</h3>
<div class="card-actions">
<button class="btn btn-ghost btn-sm" onclick="toggleHeatmap()">🌡 Heatmap</button>
</div>
</div>
<div class="card-body no-pad" style="position:relative">
<div id="admin-map" style="height:480px"></div>
<div class="map-legend">
<h4>Legenda</h4>
<div class="map-legend-item"><div class="map-legend-dot legend-dot-ekstrem"></div> Miskin Ekstrem</div>
<div class="map-legend-item"><div class="map-legend-dot legend-dot-miskin"></div> Miskin</div>
<div class="map-legend-item"><div class="map-legend-dot legend-dot-rentan"></div> Rentan Miskin</div>
<div class="map-legend-item"><div class="map-legend-dot legend-dot-ri"></div> Rumah Ibadah</div>
<div class="map-legend-item"><div class="map-legend-dot legend-dot-blind"></div> Blind Spot</div>
<div class="map-legend-item"><div class="map-legend-dot legend-dot-laporan"></div> Laporan Masuk</div>
</div>
</div>
</div>
<!-- SIDEBAR: Aktivitas & Tabel Kec -->
<div style="display:flex;flex-direction:column;gap:16px">
<!-- Per Kecamatan -->
<div class="card">
<div class="card-header"><span class="card-icon">🗾</span><h3>Sebaran per Kecamatan</h3></div>
<div class="card-body no-pad">
<div class="table-wrap">
<table>
<thead><tr><th>Kecamatan</th><th>Total</th><th>Ekstrem</th><th>Blind Spot</th></tr></thead>
<tbody>
<?php foreach ($perKecamatan ?? [] as $k): ?>
<tr>
<td style="font-weight:500;font-size:0.82rem"><?= e($k['nama']) ?></td>
<td><strong><?= number_format((int)($k['total'] ?? 0)) ?></strong></td>
<td><span class="badge badge-red"><?= number_format((int)($k['ekstrem'] ?? 0)) ?></span></td>
<td><span class="badge badge-purple"><?= number_format((int)($k['blind_spot'] ?? 0)) ?></span></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
<!-- Aktivitas Terbaru -->
<div class="card" style="flex:1">
<div class="card-header"><span class="card-icon">📋</span><h3>Aktivitas Terbaru</h3></div>
<div class="card-body no-pad" style="max-height:240px;overflow-y:auto">
<?php foreach ($aktivitas ?? [] as $a): ?>
<div style="padding:10px 16px;border-bottom:1px solid #f1f5f9">
<div style="font-size:0.8rem;font-weight:600"><?= e($a['aksi']) ?></div>
<div style="font-size:0.72rem;color:var(--clr-text-muted)"><?= e($a['nama_user'] ?? '-') ?> · <?= e($a['modul'] ?? '') ?></div>
<div style="font-size:0.7rem;color:var(--clr-text-muted)"><?= formatTanggal($a['created_at'], true) ?></div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
<!-- Charts Row -->
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">
<div class="card">
<div class="card-header"><span class="card-icon">📊</span><h3>Warga Miskin per Kecamatan</h3></div>
<div class="card-body"><div class="chart-wrap"><canvas id="chart-kecamatan"></canvas></div></div>
</div>
<div class="card">
<div class="card-header"><span class="card-icon">📈</span><h3>Tren Bantuan 6 Bulan Terakhir</h3></div>
<div class="card-body"><div class="chart-wrap"><canvas id="chart-bantuan"></canvas></div></div>
</div>
</div>
app/views/admin/kategori_bantuan.php
+89
View File
@@ -0,0 +1,89 @@
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px">
<div><h2 style="font-size:1.2rem;font-weight:700">📦 Manajemen Kategori Bantuan</h2></div>
<button class="btn btn-primary" onclick="App.showModal('modal-tambah')">➕ Tambah Kategori</button>
</div>
<div class="card">
<div class="card-body no-pad">
<div class="table-wrap">
<table>
<thead><tr><th>#</th><th>Nama</th><th>Deskripsi</th><th>Satuan</th><th>Status</th><th>Aksi</th></tr></thead>
<tbody>
<?php foreach($data as $i=>$k): ?>
<tr>
<td class="text-xs text-muted"><?= $i+1 ?></td>
<td style="font-weight:600"><?= e($k['nama']) ?></td>
<td class="text-sm text-muted"><?= e($k['deskripsi']??'') ?></td>
<td><span class="badge badge-blue"><?= e($k['satuan']??'—') ?></span></td>
<td><?= $k['is_active'] ? '<span class="badge badge-green">Aktif</span>' : '<span class="badge badge-gray">Nonaktif</span>' ?></td>
<td>
<button class="btn btn-ghost btn-sm" onclick='openEdit(<?= json_encode($k) ?>)'>✏️ Edit</button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
<!-- Modal Tambah -->
<div class="modal-overlay" id="modal-tambah">
<div class="modal">
<div class="modal-header"><h3>➕ Tambah Kategori Bantuan</h3><button class="modal-close" onclick="App.hideModal('modal-tambah')">✕</button></div>
<form method="POST" action="<?= APP_URL ?>/admin/kategori-bantuan/store">
<?= csrfField() ?>
<div class="modal-body">
<div class="form-group"><label class="form-label">Nama Kategori <span class="required">*</span></label>
<input type="text" name="nama" class="form-control" required></div>
<div class="form-group"><label class="form-label">Deskripsi</label>
<textarea name="deskripsi" class="form-control" rows="2"></textarea></div>
<div class="form-group"><label class="form-label">Satuan</label>
<input type="text" name="satuan" class="form-control" placeholder="paket / kg / rupiah"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-ghost" onclick="App.hideModal('modal-tambah')">Batal</button>
<button type="submit" class="btn btn-primary">Simpan</button>
</div>
</form>
</div>
</div>
<!-- Modal Edit -->
<div class="modal-overlay" id="modal-edit">
<div class="modal">
<div class="modal-header"><h3>✏️ Edit Kategori</h3><button class="modal-close" onclick="App.hideModal('modal-edit')">✕</button></div>
<form method="POST" id="edit-form">
<?= csrfField() ?>
<div class="modal-body">
<div class="form-group"><label class="form-label">Nama <span class="required">*</span></label>
<input type="text" name="nama" id="edit-nama" class="form-control" required></div>
<div class="form-group"><label class="form-label">Deskripsi</label>
<textarea name="deskripsi" id="edit-deskripsi" class="form-control" rows="2"></textarea></div>
<div class="form-row cols-2">
<div class="form-group"><label class="form-label">Satuan</label>
<input type="text" name="satuan" id="edit-satuan" class="form-control"></div>
<div class="form-group"><label class="form-label">Status</label>
<select name="is_active" id="edit-is_active" class="form-control">
<option value="1">Aktif</option><option value="0">Nonaktif</option>
</select></div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-ghost" onclick="App.hideModal('modal-edit')">Batal</button>
<button type="submit" class="btn btn-primary">Simpan</button>
</div>
</form>
</div>
</div>
<script>
function openEdit(k) {
document.getElementById('edit-nama').value = k.nama;
document.getElementById('edit-deskripsi').value = k.deskripsi||'';
document.getElementById('edit-satuan').value = k.satuan||'';
document.getElementById('edit-is_active').value = k.is_active;
document.getElementById('edit-form').action = '<?= APP_URL ?>/admin/kategori-bantuan/' + k.id + '/update';
App.showModal('modal-edit');
}
</script>
app/views/admin/monitoring.php
+75
View File
@@ -0,0 +1,75 @@
<?php
// monitoring.php — Admin monitoring kemiskinan view
?>
<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 Data Kemiskinan</h2>
<p class="text-muted text-sm"><?= count($warga) ?> warga aktif terdata dalam sistem</p></div>
</div>
<!-- Peta -->
<div class="card" style="margin-bottom:20px">
<div class="card-header"><span class="card-icon">🗺</span><h3>Peta Persebaran Seluruh Warga Miskin</h3></div>
<div class="card-body no-pad" style="position:relative">
<div id="mon-map" style="height:360px"></div>
<div class="map-legend">
<h4>Legenda</h4>
<div class="map-legend-item"><div class="map-legend-dot legend-dot-ekstrem"></div> Miskin Ekstrem</div>
<div class="map-legend-item"><div class="map-legend-dot legend-dot-miskin"></div> Miskin</div>
<div class="map-legend-item"><div class="map-legend-dot legend-dot-rentan"></div> Rentan Miskin</div>
<div class="map-legend-item"><div class="map-legend-dot legend-dot-blind"></div> Blind Spot</div>
</div>
</div>
</div>
<!-- Search + Table -->
<div class="filters-bar"><input type="text" id="search-mon" class="form-control" placeholder="🔍 Cari nama, NIK..." style="max-width:300px"></div>
<div class="card">
<div class="card-body no-pad">
<div class="table-wrap">
<table id="table-mon">
<thead><tr><th>#</th><th>Nama</th><th>Wilayah</th><th>Status Kemiskinan</th><th>Prioritas</th><th>Penghasilan</th><th>Tgn</th><th>Rumah Ibadah</th><th>Ket</th></tr></thead>
<tbody>
<?php foreach($warga as $i=>$w): ?>
<tr>
<td class="text-xs text-muted"><?= $i+1 ?></td>
<td>
<div style="font-weight:600;font-size:0.875rem"><?= e($w['nama']) ?></div>
<div class="text-xs text-muted"><?= $w['nik'] ? 'NIK: '.e($w['nik']) : '' ?></div>
</td>
<td class="text-sm"><?= e($w['kecamatan']) ?> › <?= e($w['kelurahan']) ?></td>
<td><?php $sc=['Miskin Ekstrem'=>'badge-red','Miskin'=>'badge-orange','Rentan Miskin'=>'badge-yellow']; ?>
<span class="badge <?= $sc[$w['status_kemiskinan']]??'badge-gray' ?>"><?= e($w['status_kemiskinan']) ?></span></td>
<td><?php $pc=['Tinggi'=>'badge-red','Sedang'=>'badge-yellow','Rendah'=>'badge-green']; ?>
<span class="badge <?= $pc[$w['level_prioritas']]??'badge-gray' ?>"><?= e($w['level_prioritas']) ?></span>
<div class="text-xs text-muted"><?= $w['skor_prioritas'] ?>/100</div></td>
<td class="text-sm"><?= formatRupiah($w['penghasilan_bulanan']??0) ?></td>
<td class="text-sm text-center"><?= $w['jumlah_tanggungan'] ?></td>
<td class="text-sm"><?= e($w['rumah_ibadah_nama']??'—') ?></td>
<td>
<?php if($w['is_blind_spot']): ?><span class="badge badge-purple" title="Blind Spot">⚠</span><?php endif; ?>
<?php if($w['is_lansia']): ?><span class="badge badge-orange" title="Lansia">👴</span><?php endif; ?>
<?php if($w['is_disabilitas']): ?><span class="badge badge-blue" title="Disabilitas">♿</span><?php endif; ?>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', async () => {
App.initTableSearch('search-mon','table-mon');
const map = GISMap.init('mon-map', <?= MAP_DEFAULT_LAT ?>, <?= MAP_DEFAULT_LNG ?>, 12);
const data = await App.fetchJSON('<?= APP_URL ?>/admin/api/peta');
if(data) {
GISMap.addRILayer(data.rumah_ibadah||[]);
GISMap.addWargaLayer(data.warga||[]);
GISMap.autoFitBounds();
} else {
GISMap.autoFitBounds(true);
}
});
</script>
app/views/admin/rumah_ibadah.php
+309
View File
@@ -0,0 +1,309 @@
<?php $extraJs = <<<JS
<script>
let riMap = null;
let riMarker = null;
function openTambahModal() {
App.showModal('modal-tambah');
setTimeout(() => {
if (!riMap) {
riMap = L.map('ri-map-tambah').setView([-0.0263, 109.3425], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{maxZoom:19}).addTo(riMap);
riMap.on('click', e => placeRIMarker(e.latlng.lat, e.latlng.lng, 'tambah'));
}
riMap.invalidateSize();
}, 300);
}
function placeRIMarker(lat, lng, mode) {
const m = mode === 'tambah' ? riMap : editMap;
const prefix = mode === 'tambah' ? '' : 'edit-';
if (riMarker) m.removeLayer(riMarker);
riMarker = L.marker([lat, lng], { draggable: true }).addTo(m);
document.getElementById(prefix + 'lat').value = lat.toFixed(7);
document.getElementById(prefix + 'lng').value = lng.toFixed(7);
riMarker.on('dragend', e => {
const pos = e.target.getLatLng();
document.getElementById(prefix + 'lat').value = pos.lat.toFixed(7);
document.getElementById(prefix + 'lng').value = pos.lng.toFixed(7);
});
}
function openEditModal(ri) {
document.getElementById('edit-nama').value = ri.nama;
document.getElementById('edit-alamat').value = ri.alamat || '';
document.getElementById('edit-id_jenis').value = ri.id_jenis;
document.getElementById('edit-id_kelurahan').value = ri.id_kelurahan;
document.getElementById('edit-radius_meter').value = ri.radius_meter;
document.getElementById('edit-nama_ketua').value = ri.nama_ketua || '';
document.getElementById('edit-no_hp_pengurus').value = ri.no_hp_pengurus || '';
document.getElementById('edit-lat').value = ri.lat;
document.getElementById('edit-lng').value = ri.lng;
document.getElementById('edit-is_active').value = ri.is_active;
document.getElementById('edit-form').action = '<?= APP_URL ?>/admin/rumah-ibadah/' + ri.id + '/update';
App.showModal('modal-edit');
}
</script>
JS; ?>
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px">
<div>
<h2 style="font-size:1.2rem;font-weight:700">Manajemen Rumah Ibadah</h2>
<p class="text-muted text-sm">Total <?= count($data) ?> rumah ibadah terdaftar</p>
</div>
<button class="btn btn-primary" onclick="openTambahModal()">➕ Tambah Rumah Ibadah</button>
</div>
<!-- PETA RUMAH IBADAH -->
<div class="card" style="margin-bottom:20px">
<div class="card-header"><span class="card-icon">🗺</span><h3>Peta Rumah Ibadah</h3></div>
<div class="card-body no-pad">
<div id="ri-overview-map" style="height:320px"></div>
</div>
</div>
<!-- SEARCH -->
<div class="filters-bar">
<input type="text" id="search-ri" class="form-control" placeholder="🔍 Cari nama, kelurahan..." style="max-width:300px">
</div>
<!-- TABLE -->
<div class="card">
<div class="card-body no-pad">
<div class="table-wrap">
<table id="table-ri">
<thead>
<tr><th>#</th><th>Nama</th><th>Jenis</th><th>Wilayah</th><th>Ketua</th><th>Radius</th><th>Warga Binaan</th><th>Status</th><th>Aksi</th></tr>
</thead>
<tbody>
<?php foreach ($data as $i => $r): ?>
<tr>
<td class="text-muted text-xs"><?= $i+1 ?></td>
<td>
<div style="font-weight:600;font-size:0.875rem"><?= e($r['nama']) ?></div>
<div class="text-muted text-xs"><?= e($r['alamat'] ?? '') ?></div>
</td>
<td><span class="badge badge-green"><?= e($r['jenis']) ?></span></td>
<td class="text-sm"><?= e($r['kecamatan']) ?> › <?= e($r['kelurahan']) ?></td>
<td class="text-sm"><?= e($r['nama_ketua'] ?? '—') ?></td>
<td class="text-sm"><?= number_format($r['radius_meter']) ?>m</td>
<td><strong><?= number_format($r['jml_warga']) ?></strong> warga</td>
<td><?= $r['is_active'] ? '<span class="badge badge-green">Aktif</span>' : '<span class="badge badge-gray">Nonaktif</span>' ?></td>
<td>
<div style="display:flex;gap:6px">
<button class="btn btn-ghost btn-sm" onclick='openEditModal(<?= json_encode($r) ?>)'>✏️</button>
<form method="POST" action="<?= APP_URL ?>/admin/rumah-ibadah/<?= $r['id'] ?>/delete"
onsubmit="return confirm('Nonaktifkan <?= addslashes($r['nama']) ?>?')">
<?= csrfField() ?>
<button type="submit" class="btn btn-ghost btn-sm" style="color:var(--clr-danger)">🗑</button>
</form>
</div>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
<!-- MODAL TAMBAH -->
<div class="modal-overlay" id="modal-tambah">
<div class="modal" style="max-width:680px">
<div class="modal-header">
<h3>➕ Tambah Rumah Ibadah</h3>
<button class="modal-close" onclick="App.hideModal('modal-tambah')">✕</button>
</div>
<form method="POST" action="<?= APP_URL ?>/admin/rumah-ibadah/store" enctype="multipart/form-data">
<?= csrfField() ?>
<div class="modal-body">
<div class="form-group">
<label class="form-label">Nama Rumah Ibadah <span class="required">*</span></label>
<input type="text" name="nama" class="form-control" required>
</div>
<div class="form-row cols-2">
<div class="form-group">
<label class="form-label">Jenis <span class="required">*</span></label>
<select name="id_jenis" class="form-control" required>
<?php foreach ($jenis as $j): ?>
<option value="<?= $j['id'] ?>"><?= e($j['nama']) ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<label class="form-label">Kelurahan <span class="required">*</span></label>
<select name="id_kelurahan" class="form-control" required>
<?php foreach ($kelurahan as $k): ?>
<option value="<?= $k['id'] ?>"><?= e($k['nama']) ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="form-group">
<label class="form-label">Alamat</label>
<input type="text" name="alamat" class="form-control">
</div>
<div class="form-row cols-2">
<div class="form-group">
<label class="form-label">Nama Ketua/Pengurus</label>
<input type="text" name="nama_ketua" class="form-control">
</div>
<div class="form-group">
<label class="form-label">No HP Pengurus</label>
<input type="text" name="no_hp_pengurus" class="form-control">
</div>
</div>
<div class="form-row cols-2">
<div class="form-group">
<label class="form-label">Akun Pengurus</label>
<select name="id_user" class="form-control">
<option value="">— Belum Ada —</option>
<?php foreach ($pengurusAvail as $p): ?>
<option value="<?= $p['id'] ?>"><?= e($p['nama']) ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<label class="form-label">Radius Pelayanan (meter) <span class="required">*</span></label>
<input type="number" name="radius_meter" class="form-control" value="500" min="100" max="5000" required>
</div>
</div>
<div class="form-group">
<label class="form-label">📍 Pilih Lokasi pada Peta <span class="required">*</span></label>
<div id="ri-map-tambah" style="height:220px;border-radius:8px;border:1px solid var(--clr-border)"></div>
<div class="form-row cols-2" style="margin-top:8px">
<input type="number" name="lat" id="lat" class="form-control" placeholder="Latitude" step="0.0000001" required>
<input type="number" name="lng" id="lng" class="form-control" placeholder="Longitude" step="0.0000001" required>
</div>
<div class="form-hint">Klik pada peta untuk menandai lokasi</div>
</div>
<div class="form-group">
<label class="form-label">Foto</label>
<input type="file" name="foto" class="form-control" accept="image/*">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-ghost" onclick="App.hideModal('modal-tambah')">Batal</button>
<button type="submit" class="btn btn-primary">Simpan</button>
</div>
</form>
</div>
</div>
<!-- MODAL EDIT -->
<div class="modal-overlay" id="modal-edit">
<div class="modal" style="max-width:560px">
<div class="modal-header">
<h3>✏️ Edit Rumah Ibadah</h3>
<button class="modal-close" onclick="App.hideModal('modal-edit')">✕</button>
</div>
<form method="POST" id="edit-form" enctype="multipart/form-data">
<?= csrfField() ?>
<div class="modal-body">
<div class="form-group">
<label class="form-label">Nama <span class="required">*</span></label>
<input type="text" name="nama" id="edit-nama" class="form-control" required>
</div>
<div class="form-row cols-2">
<div class="form-group">
<label class="form-label">Jenis</label>
<select name="id_jenis" id="edit-id_jenis" class="form-control">
<?php foreach ($jenis as $j): ?>
<option value="<?= $j['id'] ?>"><?= e($j['nama']) ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<label class="form-label">Kelurahan</label>
<select name="id_kelurahan" id="edit-id_kelurahan" class="form-control">
<?php foreach ($kelurahan as $k): ?>
<option value="<?= $k['id'] ?>"><?= e($k['nama']) ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="form-group">
<label class="form-label">Alamat</label>
<input type="text" name="alamat" id="edit-alamat" class="form-control">
</div>
<div class="form-row cols-2">
<div class="form-group">
<label class="form-label">Nama Ketua</label>
<input type="text" name="nama_ketua" id="edit-nama_ketua" class="form-control">
</div>
<div class="form-group">
<label class="form-label">No HP</label>
<input type="text" name="no_hp_pengurus" id="edit-no_hp_pengurus" class="form-control">
</div>
</div>
<div class="form-row cols-3">
<div class="form-group">
<label class="form-label">Radius (m)</label>
<input type="number" name="radius_meter" id="edit-radius_meter" class="form-control">
</div>
<div class="form-group">
<label class="form-label">Status</label>
<select name="is_active" id="edit-is_active" class="form-control">
<option value="1">Aktif</option><option value="0">Nonaktif</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Foto Baru</label>
<input type="file" name="foto" class="form-control" accept="image/*">
</div>
</div>
<div class="form-row cols-2">
<div class="form-group">
<label class="form-label">Latitude</label>
<input type="number" name="lat" id="edit-lat" class="form-control" step="0.0000001">
</div>
<div class="form-group">
<label class="form-label">Longitude</label>
<input type="number" name="lng" id="edit-lng" class="form-control" step="0.0000001">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-ghost" onclick="App.hideModal('modal-edit')">Batal</button>
<button type="submit" class="btn btn-primary">Simpan Perubahan</button>
</div>
</form>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', async () => {
App.initTableSearch('search-ri', 'table-ri');
// Overview map
const ovMap = L.map('ri-overview-map').setView([-0.0263, 109.3425], 12);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{maxZoom:19}).addTo(ovMap);
const riData = <?= json_encode(array_map(fn($r) => [
'id'=>$r['id'],'nama'=>$r['nama'],'lat'=>(float)$r['lat'],'lng'=>(float)$r['lng'],
'radius_meter'=>$r['radius_meter'],'jenis'=>$r['jenis'],'kelurahan'=>$r['kelurahan'],
'jml_warga'=>$r['jml_warga'],'is_active'=>$r['is_active']
], $data)) ?>;
const riBounds = [];
riData.forEach(ri => {
if (!ri.lat || !ri.lng) return;
const lat = parseFloat(ri.lat), lng = parseFloat(ri.lng);
if (isNaN(lat)||isNaN(lng)) return;
const icon = L.divIcon({
className:'',
html:`<div style="background:${ri.is_active?'#16a34a':'#6b7280'};color:#fff;padding:4px 8px;border-radius:4px;font-size:11px;font-weight:700;white-space:nowrap;box-shadow:0 2px 4px rgba(0,0,0,0.2)">${ri.nama}</div>`,
iconAnchor:[0,0]
});
L.marker([lat,lng],{icon}).bindPopup(`<strong>${ri.nama}</strong><br>${ri.jenis}<br>${ri.kelurahan}<br>Radius: ${ri.radius_meter}m<br>Warga: ${ri.jml_warga}`).addTo(ovMap);
L.circle([lat,lng],{radius:ri.radius_meter,fillColor:'#16a34a',fillOpacity:0.08,color:'#16a34a',weight:1.5,dashArray:'4,4'}).addTo(ovMap);
riBounds.push([lat,lng]);
});
// Auto-zoom ke seluruh rumah ibadah Kota Pontianak
if (riBounds.length > 0) {
const b = L.latLngBounds(riBounds);
if (b.isValid()) ovMap.flyToBounds(b, {duration:0.6, padding:[30,30], maxZoom:14});
}
});
</script>
app/views/admin/users.php
+221
View File
@@ -0,0 +1,221 @@
<!-- HEADER ROW -->
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px">
<div>
<h2 style="font-size:1.2rem;font-weight:700">Manajemen User</h2>
<p class="text-muted text-sm">Kelola seluruh pengguna sistem SINERGI</p>
</div>
<button class="btn btn-primary" onclick="App.showModal('modal-tambah')">➕ Tambah User</button>
</div>
<!-- SEARCH -->
<div class="filters-bar">
<input type="text" id="search-user" class="form-control" placeholder="🔍 Cari nama, username, email..." style="max-width:300px">
</div>
<!-- TABLE -->
<div class="card">
<div class="card-body no-pad">
<div class="table-wrap">
<table id="table-users">
<thead>
<tr>
<th>#</th><th>Nama</th><th>Username</th><th>Role</th>
<th>Wilayah</th><th>No HP</th><th>Status</th><th>Login Terakhir</th><th>Aksi</th>
</tr>
</thead>
<tbody>
<?php foreach ($users as $i => $u): ?>
<tr>
<td class="text-muted text-sm"><?= $i+1 ?></td>
<td>
<div style="display:flex;align-items:center;gap:10px">
<div style="width:32px;height:32px;border-radius:50%;background:var(--clr-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.85rem;flex-shrink:0">
<?= strtoupper(substr($u['nama'],0,1)) ?>
</div>
<div>
<div style="font-weight:600;font-size:0.875rem"><?= e($u['nama']) ?></div>
<div class="text-muted text-xs"><?= e($u['email']) ?></div>
</div>
</div>
</td>
<td><code style="font-size:0.78rem;background:#f1f5f9;padding:2px 6px;border-radius:4px"><?= e($u['username']) ?></code></td>
<td>
<?php $roleColors = ['superadmin'=>'purple','verifikator'=>'blue','rumah_ibadah'=>'green','dinsos'=>'teal','walikota'=>'orange']; ?>
<span class="badge badge-<?= $roleColors[$u['role_slug']] ?? 'gray' ?>"><?= e($u['role_nama']) ?></span>
</td>
<td class="text-sm"><?= e($u['kelurahan_nama'] ?? '—') ?></td>
<td class="text-sm"><?= e($u['no_hp'] ?? '—') ?></td>
<td><?= $u['is_active'] ? '<span class="badge badge-green">Aktif</span>' : '<span class="badge badge-gray">Nonaktif</span>' ?></td>
<td class="text-xs text-muted"><?= $u['last_login'] ? formatTanggal($u['last_login'],true) : '—' ?></td>
<td>
<div style="display:flex;gap:6px">
<?php if ($u['id'] != Auth::id()): ?>
<button class="btn btn-ghost btn-sm" onclick='openEditModal(<?= json_encode($u) ?>)'>✏️</button>
<form method="POST" action="<?= APP_URL ?>/admin/users/<?= $u['id'] ?>/delete" style="display:inline"
onsubmit="return confirm('Nonaktifkan user <?= addslashes($u['nama']) ?>?')">
<?= csrfField() ?>
<button type="submit" class="btn btn-ghost btn-sm" style="color:var(--clr-danger)">🗑</button>
</form>
<?php else: ?>
<span class="text-xs text-muted">Akun Anda</span>
<?php endif; ?>
</div>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
<!-- MODAL TAMBAH -->
<div class="modal-overlay" id="modal-tambah">
<div class="modal">
<div class="modal-header">
<h3>➕ Tambah User Baru</h3>
<button class="modal-close" onclick="App.hideModal('modal-tambah')">✕</button>
</div>
<form method="POST" action="<?= APP_URL ?>/admin/users/store">
<?= csrfField() ?>
<div class="modal-body">
<div class="form-row cols-2">
<div class="form-group">
<label class="form-label">Nama Lengkap <span class="required">*</span></label>
<input type="text" name="nama" class="form-control" required>
</div>
<div class="form-group">
<label class="form-label">Username <span class="required">*</span></label>
<input type="text" name="username" class="form-control" required>
</div>
</div>
<div class="form-group">
<label class="form-label">Email <span class="required">*</span></label>
<input type="email" name="email" class="form-control" required>
</div>
<div class="form-row cols-2">
<div class="form-group">
<label class="form-label">Password <span class="required">*</span></label>
<input type="password" name="password" class="form-control" required minlength="6">
</div>
<div class="form-group">
<label class="form-label">No HP</label>
<input type="text" name="no_hp" class="form-control">
</div>
</div>
<div class="form-row cols-2">
<div class="form-group">
<label class="form-label">Role <span class="required">*</span></label>
<select name="id_role" class="form-control" required>
<?php foreach ($roles as $r): ?>
<option value="<?= $r['id'] ?>"><?= e($r['nama']) ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<label class="form-label">Kelurahan Tugas</label>
<select name="id_kelurahan" class="form-control">
<option value="">— Semua Wilayah —</option>
<?php foreach ($kelurahan as $k): ?>
<option value="<?= $k['id'] ?>"><?= e($k['nama']) ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-ghost" onclick="App.hideModal('modal-tambah')">Batal</button>
<button type="submit" class="btn btn-primary">Simpan User</button>
</div>
</form>
</div>
</div>
<!-- MODAL EDIT -->
<div class="modal-overlay" id="modal-edit">
<div class="modal">
<div class="modal-header">
<h3>✏️ Edit User</h3>
<button class="modal-close" onclick="App.hideModal('modal-edit')">✕</button>
</div>
<form method="POST" id="edit-form">
<?= csrfField() ?>
<input type="hidden" name="id" id="edit-id">
<div class="modal-body">
<div class="form-row cols-2">
<div class="form-group">
<label class="form-label">Nama Lengkap <span class="required">*</span></label>
<input type="text" name="nama" id="edit-nama" class="form-control" required>
</div>
<div class="form-group">
<label class="form-label">Username <span class="required">*</span></label>
<input type="text" name="username" id="edit-username" class="form-control" required>
</div>
</div>
<div class="form-group">
<label class="form-label">Email <span class="required">*</span></label>
<input type="email" name="email" id="edit-email" class="form-control" required>
</div>
<div class="form-row cols-2">
<div class="form-group">
<label class="form-label">Password Baru <span class="text-muted">(kosongkan jika tidak diubah)</span></label>
<input type="password" name="password" class="form-control" minlength="6">
</div>
<div class="form-group">
<label class="form-label">No HP</label>
<input type="text" name="no_hp" id="edit-no_hp" class="form-control">
</div>
</div>
<div class="form-row cols-2">
<div class="form-group">
<label class="form-label">Role</label>
<select name="id_role" id="edit-id_role" class="form-control">
<?php foreach ($roles as $r): ?>
<option value="<?= $r['id'] ?>"><?= e($r['nama']) ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<label class="form-label">Status</label>
<select name="is_active" id="edit-is_active" class="form-control">
<option value="1">Aktif</option>
<option value="0">Nonaktif</option>
</select>
</div>
</div>
<div class="form-group">
<label class="form-label">Kelurahan Tugas</label>
<select name="id_kelurahan" id="edit-id_kelurahan" class="form-control">
<option value="">— Semua Wilayah —</option>
<?php foreach ($kelurahan as $k): ?>
<option value="<?= $k['id'] ?>"><?= e($k['nama']) ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-ghost" onclick="App.hideModal('modal-edit')">Batal</button>
<button type="submit" class="btn btn-primary">Simpan Perubahan</button>
</div>
</form>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
App.initTableSearch('search-user', 'table-users');
});
function openEditModal(u) {
document.getElementById('edit-id').value = u.id;
document.getElementById('edit-nama').value = u.nama;
document.getElementById('edit-username').value = u.username;
document.getElementById('edit-email').value = u.email;
document.getElementById('edit-no_hp').value = u.no_hp || '';
document.getElementById('edit-id_role').value = u.id_role;
document.getElementById('edit-id_kelurahan').value = u.id_kelurahan || '';
document.getElementById('edit-is_active').value = u.is_active;
document.getElementById('edit-form').action = '<?= APP_URL ?>/admin/users/' + u.id + '/update';
App.showModal('modal-edit');
}
</script>
app/views/admin/wilayah.php
+119
View File
@@ -0,0 +1,119 @@
<!-- ADMIN WILAYAH VIEW -->
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px">
<div>
<h2 style="font-size:1.2rem;font-weight:700">🗾 Manajemen Wilayah</h2>
<p class="text-muted text-sm">Data kecamatan dan kelurahan Kota Pontianak</p>
</div>
<div style="display:flex;gap:10px">
<button class="btn btn-ghost" onclick="App.showModal('modal-kecamatan')">➕ Kecamatan</button>
<button class="btn btn-primary" onclick="App.showModal('modal-kelurahan')">➕ Kelurahan</button>
</div>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">
<!-- Kecamatan -->
<div class="card">
<div class="card-header"><span class="card-icon">🏙</span><h3>Kecamatan (<?= count($kecamatan) ?>)</h3></div>
<div class="card-body no-pad">
<div class="table-wrap">
<table>
<thead><tr><th>#</th><th>Nama</th><th>Kode</th><th>Jumlah Kelurahan</th></tr></thead>
<tbody>
<?php foreach($kecamatan as $i=>$k): ?>
<tr>
<td class="text-xs text-muted"><?= $i+1 ?></td>
<td style="font-weight:600"><?= e($k['nama']) ?></td>
<td class="text-xs" style="font-family:monospace"><?= e($k['kode']??'') ?></td>
<td class="text-sm text-center"><?= number_format($k['jml_kel']) ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
<!-- Kelurahan -->
<div class="card">
<div class="card-header"><span class="card-icon">🏘</span><h3>Kelurahan (<?= count($kelurahan) ?>)</h3></div>
<div class="card-body no-pad" style="max-height:400px;overflow-y:auto">
<div class="table-wrap">
<table>
<thead><tr><th>#</th><th>Nama</th><th>Kecamatan</th></tr></thead>
<tbody>
<?php foreach($kelurahan as $i=>$k): ?>
<tr>
<td class="text-xs text-muted"><?= $i+1 ?></td>
<td style="font-weight:500;font-size:0.875rem"><?= e($k['nama']) ?></td>
<td class="text-sm text-muted"><?= e($k['kecamatan']) ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Modal Kecamatan -->
<div class="modal-overlay" id="modal-kecamatan">
<div class="modal">
<div class="modal-header"><h3>➕ Tambah Kecamatan</h3><button class="modal-close" onclick="App.hideModal('modal-kecamatan')">✕</button></div>
<form method="POST" action="<?= APP_URL ?>/admin/kecamatan/store">
<?= csrfField() ?>
<div class="modal-body">
<div class="form-row cols-2">
<div class="form-group"><label class="form-label">Nama Kecamatan <span class="required">*</span></label>
<input type="text" name="nama" class="form-control" required></div>
<div class="form-group"><label class="form-label">Kode Wilayah</label>
<input type="text" name="kode" class="form-control"></div>
</div>
<div class="form-row cols-2">
<div class="form-group"><label class="form-label">Latitude</label>
<input type="number" name="lat" class="form-control" step="0.0000001"></div>
<div class="form-group"><label class="form-label">Longitude</label>
<input type="number" name="lng" class="form-control" step="0.0000001"></div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-ghost" onclick="App.hideModal('modal-kecamatan')">Batal</button>
<button type="submit" class="btn btn-primary">Simpan</button>
</div>
</form>
</div>
</div>
<!-- Modal Kelurahan -->
<div class="modal-overlay" id="modal-kelurahan">
<div class="modal">
<div class="modal-header"><h3>➕ Tambah Kelurahan</h3><button class="modal-close" onclick="App.hideModal('modal-kelurahan')">✕</button></div>
<form method="POST" action="<?= APP_URL ?>/admin/kelurahan/store">
<?= csrfField() ?>
<div class="modal-body">
<div class="form-group"><label class="form-label">Kecamatan <span class="required">*</span></label>
<select name="id_kecamatan" class="form-control" required>
<option value="">— Pilih Kecamatan —</option>
<?php foreach($kecamatan as $k): ?>
<option value="<?= $k['id'] ?>"><?= e($k['nama']) ?></option>
<?php endforeach; ?>
</select></div>
<div class="form-row cols-2">
<div class="form-group"><label class="form-label">Nama Kelurahan <span class="required">*</span></label>
<input type="text" name="nama" class="form-control" required></div>
<div class="form-group"><label class="form-label">Kode Wilayah</label>
<input type="text" name="kode" class="form-control"></div>
</div>
<div class="form-row cols-2">
<div class="form-group"><label class="form-label">Latitude</label>
<input type="number" name="lat" class="form-control" step="0.0000001"></div>
<div class="form-group"><label class="form-label">Longitude</label>
<input type="number" name="lng" class="form-control" step="0.0000001"></div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-ghost" onclick="App.hideModal('modal-kelurahan')">Batal</button>
<button type="submit" class="btn btn-primary">Simpan</button>
</div>
</form>
</div>
</div>
app/views/auth/login.php
+96
View File
@@ -0,0 +1,96 @@
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="app-url" content="<?= APP_URL ?>">
<title>Login — SINERGI</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="<?= asset('css/app.css') ?>">
</head>
<body>
<?php if (session_status()===PHP_SESSION_NONE){session_start();} ?>
<div class="login-page">
<!-- LEFT PANEL -->
<div class="login-left">
<div class="login-logo">SINER<span>GI</span></div>
<div class="login-tagline">
Sistem Informasi Geografis Penanganan Kemiskinan<br>
Berbasis Kolaborasi Rumah Ibadah, Masyarakat,<br>
dan Pemerintah Kota Pontianak
</div>
<div style="margin-top:48px;display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:380px;width:100%">
<?php $items = [
['🗺','Peta GIS Real-time'],['⛪','Kolaborasi Rumah Ibadah'],
['📊','Dashboard Monitoring'],['⚡','Deteksi Blind Spot'],
]; foreach ($items as [$icon,$label]): ?>
<div style="background:rgba(255,255,255,0.08);border-radius:10px;padding:14px;display:flex;gap:10px;align-items:center;">
<span style="font-size:1.4rem"><?= $icon ?></span>
<span style="font-size:0.8rem;color:rgba(255,255,255,0.8);font-weight:500"><?= $label ?></span>
</div>
<?php endforeach; ?>
</div>
<div style="margin-top:48px;text-align:center">
<a href="<?= APP_URL ?>/" style="color:rgba(255,255,255,0.5);font-size:0.82rem">← Kembali ke Halaman Publik</a>
</div>
</div>
<!-- RIGHT PANEL (Form) -->
<div class="login-right">
<div style="margin-bottom:32px;">
<div style="font-size:2rem;font-weight:900;color:var(--clr-primary);">SINER<span style="color:var(--clr-accent)">GI</span></div>
</div>
<div class="login-form-title">Selamat Datang</div>
<div class="login-form-sub">Masuk ke sistem untuk melanjutkan</div>
<?= flashMessage() ?>
<form method="POST" action="<?= APP_URL ?>/login">
<?= csrfField() ?>
<div class="form-group">
<label class="form-label" for="username">Username / Email <span class="required">*</span></label>
<input type="text" id="username" name="username" class="form-control"
placeholder="Masukkan username atau email" required autofocus
value="<?= e($_POST['username'] ?? '') ?>">
</div>
<div class="form-group">
<label class="form-label" for="password">Password <span class="required">*</span></label>
<div style="position:relative">
<input type="password" id="password" name="password" class="form-control"
placeholder="Masukkan password" required style="padding-right:44px">
<button type="button" onclick="togglePwd()" style="position:absolute;right:12px;top:50%;transform:translateY(-50%);border:none;background:none;cursor:pointer;color:var(--clr-text-muted);font-size:1rem;" id="pwd-toggle">👁</button>
</div>
</div>
<button type="submit" class="btn btn-primary w-full" style="margin-top:8px;padding:12px;font-size:1rem;justify-content:center;">
Masuk ke Sistem
</button>
</form>
<div style="margin-top:20px;text-align:center">
<a href="<?= APP_URL ?>/" style="font-size:0.82rem;color:var(--clr-text-muted)">← Kembali ke Beranda</a>
</div>
</div>
</div>
<script>
function togglePwd() {
const i = document.getElementById('password');
const b = document.getElementById('pwd-toggle');
i.type = i.type === 'password' ? 'text' : 'password';
b.textContent = i.type === 'password' ? '👁' : '🙈';
}
function fillLogin(u, p) {
document.getElementById('username').value = u;
document.getElementById('password').value = p;
}
</script>
<script src="<?= asset('js/app.js') ?>"></script>
</body>
</html>
app/views/dinsos/bantuan.php
+89
View File
@@ -0,0 +1,89 @@
<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>
app/views/dinsos/blind_spot.php
+377
View File
@@ -0,0 +1,377 @@
<?php
$formatJarak = function ($meter): string {
if ($meter === null || $meter === '') return '-';
$meter = (float)$meter;
if ($meter >= 1000) {
return number_format($meter / 1000, 1, ',', '.') . ' km';
}
return number_format($meter, 0, ',', '.') . ' m';
};
$jsonFlags = JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES;
$totalBlind = count($data);
$sudahDitugaskan = (int)($ringkasanPenugasan['sudah'] ?? 0);
$belumDitugaskan = (int)($ringkasanPenugasan['belum'] ?? 0);
$totalRumahIbadah = (int)($ringkasanPenugasan['total_ri'] ?? 0);
?>
<div style="display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px">
<div>
<h2 style="font-size:1.2rem;font-weight:700">Monitoring Blind Spot</h2>
<p class="text-muted text-sm">Atur penugasan rumah ibadah untuk warga yang berada di luar radius pelayanan.</p>
</div>
<?php if (!empty($perKec)): ?>
<div style="display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end">
<?php foreach ($perKec as $k): ?>
<div style="text-align:center;padding:8px 14px;background:#f3e8ff;border-radius:8px;border:1px solid #d8b4fe;min-width:110px">
<div style="font-size:1.05rem;font-weight:800;color:#7c3aed"><?= number_format((int)$k['jumlah']) ?></div>
<div style="font-size:0.7rem;color:#6d28d9"><?= e($k['nama']) ?></div>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
<div class="stats-grid" style="grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-bottom:20px">
<div class="stat-card">
<div class="stat-card-icon purple">BS</div>
<div class="stat-card-body">
<div class="stat-card-value"><?= number_format($totalBlind) ?></div>
<div class="stat-card-label">Total blind spot</div>
</div>
</div>
<div class="stat-card">
<div class="stat-card-icon red">!</div>
<div class="stat-card-body">
<div class="stat-card-value"><?= number_format($belumDitugaskan) ?></div>
<div class="stat-card-label">Belum ditugaskan</div>
</div>
</div>
<div class="stat-card">
<div class="stat-card-icon green">OK</div>
<div class="stat-card-body">
<div class="stat-card-value"><?= number_format($sudahDitugaskan) ?></div>
<div class="stat-card-label">Sudah ditugaskan</div>
</div>
</div>
<div class="stat-card">
<div class="stat-card-icon blue">RI</div>
<div class="stat-card-body">
<div class="stat-card-value"><?= number_format($totalRumahIbadah) ?></div>
<div class="stat-card-label">Rumah ibadah aktif</div>
</div>
</div>
</div>
<div class="card" style="margin-bottom:20px">
<div class="card-header">
<span class="card-icon">MAP</span>
<h3>Peta Blind Spot dan Rumah Ibadah</h3>
</div>
<div class="card-body no-pad">
<div id="blind-map" style="height:360px"></div>
</div>
</div>
<div class="card">
<div class="card-header">
<span class="card-icon">BS</span>
<h3>Daftar Warga Blind Spot (<?= number_format($totalBlind) ?>)</h3>
<div class="card-actions">
<input type="text" id="search-blind" class="form-control" placeholder="Cari warga atau rumah ibadah..." style="width:260px">
</div>
</div>
<div class="card-body no-pad">
<div class="table-wrap">
<table id="table-blind">
<thead>
<tr>
<th>#</th>
<th>Warga</th>
<th>Lokasi</th>
<th>Prioritas</th>
<th>Rekomendasi Terdekat</th>
<th>Penugasan</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<?php foreach ($data as $i => $w): ?>
<?php
$rowRekomendasi = $rekomendasi[(int)$w['id']] ?? [];
$top = $rowRekomendasi[0] ?? null;
$currentRiId = (int)($w['id_rumah_ibadah'] ?? 0);
$isTopAssigned = $top && $currentRiId === (int)$top['id'];
$modalPayload = [
'id' => (int)$w['id'],
'nama' => $w['nama'],
'alamat' => $w['alamat'] ?? '',
'lokasi' => trim(($w['kecamatan'] ?? '') . ' / ' . ($w['kelurahan'] ?? ''), ' /'),
'current_ri_id' => $currentRiId
];
?>
<tr id="warga-row-<?= (int)$w['id'] ?>">
<td class="text-xs text-muted"><?= $i + 1 ?></td>
<td>
<div style="font-weight:700"><?= e($w['nama']) ?></div>
<div class="text-xs text-muted" style="max-width:220px"><?= e($w['alamat'] ?? '') ?></div>
<div class="text-xs text-muted" style="font-family:var(--font-mono);margin-top:3px">
<?= e((string)$w['lat']) ?>, <?= e((string)$w['lng']) ?>
</div>
</td>
<td class="text-sm">
<div><?= e($w['kecamatan'] ?? '') ?></div>
<div class="text-xs text-muted"><?= e($w['kelurahan'] ?? '') ?></div>
</td>
<td>
<?php $sc = ['Miskin Ekstrem' => 'badge-red', 'Miskin' => 'badge-orange', 'Rentan Miskin' => 'badge-yellow']; ?>
<?php $pc = ['Tinggi' => 'badge-red', 'Sedang' => 'badge-yellow', 'Rendah' => 'badge-green']; ?>
<div style="display:flex;flex-direction:column;gap:5px;align-items:flex-start">
<span class="badge <?= $sc[$w['status_kemiskinan']] ?? 'badge-gray' ?>"><?= e($w['status_kemiskinan']) ?></span>
<span class="badge <?= $pc[$w['level_prioritas']] ?? 'badge-gray' ?>">Prioritas <?= e($w['level_prioritas']) ?></span>
<span class="text-xs text-muted">Skor <?= number_format((int)$w['skor_prioritas']) ?></span>
</div>
</td>
<td>
<?php if ($top): ?>
<div style="min-width:260px">
<div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap">
<strong><?= e($top['nama']) ?></strong>
<span class="badge badge-blue"><?= e($formatJarak($top['jarak_meter'])) ?></span>
</div>
<div class="text-xs text-muted" style="margin-top:3px">
<?= e($top['jenis']) ?> &middot; <?= e($top['kelurahan']) ?>, <?= e($top['kecamatan']) ?>
</div>
<div class="text-xs text-muted" style="margin-top:3px">
Radius <?= e($formatJarak($top['radius_meter'])) ?> &middot; <?= number_format((int)$top['jml_warga']) ?> warga binaan
</div>
<?php if (count($rowRekomendasi) > 1): ?>
<div class="text-xs text-muted" style="margin-top:6px">
Alternatif:
<?php foreach (array_slice($rowRekomendasi, 1) as $alt): ?>
<span><?= e($alt['nama']) ?> (<?= e($formatJarak($alt['jarak_meter'])) ?>)</span>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
<?php else: ?>
<span class="text-sm text-muted">Koordinat warga atau rumah ibadah belum lengkap.</span>
<?php endif; ?>
</td>
<td>
<?php if (!empty($w['assigned_rumah_ibadah'])): ?>
<div style="min-width:210px">
<span class="badge badge-green">Sudah ditugaskan</span>
<div style="font-weight:700;margin-top:6px"><?= e($w['assigned_rumah_ibadah']) ?></div>
<div class="text-xs text-muted"><?= e($w['assigned_jenis'] ?? 'Rumah Ibadah') ?></div>
</div>
<?php else: ?>
<div style="min-width:180px">
<span class="badge badge-red">Belum ditugaskan</span>
<div class="text-xs text-muted" style="margin-top:6px">Gunakan rekomendasi atau pilih manual.</div>
</div>
<?php endif; ?>
</td>
<td>
<div style="display:flex;flex-direction:column;gap:8px;min-width:175px">
<?php if ($top && !$isTopAssigned): ?>
<form method="POST" action="<?= APP_URL ?>/dinsos/blind-spot/<?= (int)$w['id'] ?>/assign" onsubmit="return confirm('Gunakan rekomendasi rumah ibadah terdekat untuk warga ini?')">
<?= csrfField() ?>
<input type="hidden" name="id_rumah_ibadah" value="<?= (int)$top['id'] ?>">
<button type="submit" class="btn btn-success btn-sm" style="width:100%;justify-content:center">Gunakan rekomendasi</button>
</form>
<?php elseif ($top): ?>
<span class="badge badge-green" style="justify-content:center;padding:6px 10px">Rekomendasi aktif</span>
<?php endif; ?>
<button
type="button"
class="btn btn-primary btn-sm"
style="width:100%;justify-content:center"
onclick='openAssignModal(<?= json_encode($modalPayload, $jsonFlags) ?>)'
<?= empty($rumahIbadah) ? 'disabled' : '' ?>>
Pilih manual
</button>
</div>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
<?php if (empty($data)): ?>
<div class="empty-state">
<div class="empty-state-icon">OK</div>
<h3>Tidak Ada Blind Spot</h3>
<p>Semua warga sudah berada dalam radius pelayanan rumah ibadah.</p>
</div>
<?php endif; ?>
</div>
</div>
<div class="modal-overlay" id="modal-assign">
<div class="modal" style="max-width:620px">
<div class="modal-header">
<h3>Atur Penugasan Blind Spot</h3>
<button class="modal-close" onclick="App.hideModal('modal-assign')">&times;</button>
</div>
<form method="POST" id="assign-form">
<?= csrfField() ?>
<div class="modal-body">
<div class="form-group">
<label class="form-label">Warga</label>
<div style="padding:12px 14px;border:1px solid var(--clr-border);border-radius:var(--radius-sm);background:#f8fafc">
<div id="assign-warga-name" style="font-weight:700"></div>
<div id="assign-warga-location" class="text-xs text-muted" style="margin-top:3px"></div>
<div id="assign-warga-address" class="text-xs text-muted" style="margin-top:3px"></div>
</div>
</div>
<div class="form-group">
<label class="form-label">Rekomendasi terdekat</label>
<div id="assign-recommendations" style="display:flex;flex-direction:column;gap:8px"></div>
<div class="form-hint">Klik salah satu rekomendasi untuk mengisi pilihan manual di bawah.</div>
</div>
<div class="form-group">
<label class="form-label">Pilih rumah ibadah <span class="required">*</span></label>
<select name="id_rumah_ibadah" id="assign-ri" class="form-control" required>
<option value="">-- Pilih rumah ibadah --</option>
<?php foreach ($rumahIbadah as $ri): ?>
<option value="<?= (int)$ri['id'] ?>">
<?= e($ri['nama']) ?> - <?= e($ri['jenis']) ?>, <?= e($ri['kelurahan']) ?> (<?= number_format((int)$ri['jml_warga']) ?> warga)
</option>
<?php endforeach; ?>
</select>
<div class="form-hint">Pilihan manual akan mengganti penugasan sebelumnya jika warga sudah pernah ditugaskan.</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-ghost" onclick="App.hideModal('modal-assign')">Batal</button>
<button type="submit" class="btn btn-primary">Simpan Penugasan</button>
</div>
</form>
</div>
</div>
<script>
const recommendationsByWarga = <?= json_encode($rekomendasi, $jsonFlags) ?>;
const blindSpotAppUrl = <?= json_encode(APP_URL, $jsonFlags) ?>;
function escapeHtml(value) {
return String(value ?? '').replace(/[&<>"']/g, ch => ({
'&': '&amp;',
'<': '&lt;',
'>': '&gt;',
'"': '&quot;',
"'": '&#039;'
}[ch]));
}
function formatJarakClient(meter) {
const value = Number(meter || 0);
if (!value) return '-';
if (value >= 1000) return (value / 1000).toLocaleString('id-ID', { maximumFractionDigits: 1 }) + ' km';
return value.toLocaleString('id-ID') + ' m';
}
function openAssignModal(warga) {
const form = document.getElementById('assign-form');
const select = document.getElementById('assign-ri');
const list = document.getElementById('assign-recommendations');
form.action = `${blindSpotAppUrl}/dinsos/blind-spot/${warga.id}/assign`;
document.getElementById('assign-warga-name').textContent = warga.nama || '-';
document.getElementById('assign-warga-location').textContent = warga.lokasi || '-';
document.getElementById('assign-warga-address').textContent = warga.alamat || '-';
const rekomendasi = recommendationsByWarga[warga.id] || [];
select.value = warga.current_ri_id ? String(warga.current_ri_id) : '';
if (!select.value && rekomendasi[0]) {
select.value = String(rekomendasi[0].id);
}
list.innerHTML = '';
if (!rekomendasi.length) {
const empty = document.createElement('div');
empty.className = 'text-sm text-muted';
empty.textContent = 'Belum ada rekomendasi karena koordinat belum lengkap.';
list.appendChild(empty);
} else {
rekomendasi.forEach((ri, index) => {
const item = document.createElement('button');
item.type = 'button';
item.className = 'btn btn-ghost btn-sm';
item.style.justifyContent = 'space-between';
item.style.width = '100%';
item.innerHTML = `<span>${index + 1}. ${escapeHtml(ri.nama)}</span><span>${formatJarakClient(ri.jarak_meter)}</span>`;
item.addEventListener('click', () => {
select.value = String(ri.id);
});
list.appendChild(item);
});
}
App.showModal('modal-assign');
}
document.addEventListener('DOMContentLoaded', async () => {
App.initTableSearch('search-blind', 'table-blind');
const map = GISMap.init('blind-map', <?= MAP_DEFAULT_LAT ?>, <?= MAP_DEFAULT_LNG ?>, 12);
const riData = await App.fetchJSON('<?= APP_URL ?>/api/rumah-ibadah');
if (riData) GISMap.addRILayer(riData);
const blindData = <?= json_encode(array_map(function ($w) use ($rekomendasi) {
$top = $rekomendasi[(int)$w['id']][0] ?? null;
return [
'id' => (int)$w['id'],
'lat' => (float)$w['lat'],
'lng' => (float)$w['lng'],
'nama' => $w['nama'],
'status_kemiskinan' => $w['status_kemiskinan'],
'level_prioritas' => $w['level_prioritas'],
'assigned' => $w['assigned_rumah_ibadah'] ?? '',
'rekomendasi' => $top ? [
'nama' => $top['nama'],
'lat' => (float)$top['lat'],
'lng' => (float)$top['lng'],
'jarak_meter' => (int)$top['jarak_meter']
] : null
];
}, array_filter($data, fn($w) => !empty($w['lat']) && !empty($w['lng']))), $jsonFlags) ?>;
blindData.forEach(w => {
const marker = L.circleMarker([w.lat, w.lng], {
radius: 10,
fillColor: '#7c3aed',
color: '#fff',
weight: 2,
fillOpacity: 0.9
});
const popup = `
<div style="min-width:210px;font-family:Inter,system-ui,sans-serif">
<strong>Blind Spot</strong><br>
${escapeHtml(w.nama)}<br>
<span style="font-size:11px;color:#6b7280">${escapeHtml(w.status_kemiskinan)} - Prioritas ${escapeHtml(w.level_prioritas)}</span>
${w.assigned ? `<br><span style="font-size:11px;color:#15803d;font-weight:700">Ditugaskan: ${escapeHtml(w.assigned)}</span>` : '<br><span style="font-size:11px;color:#dc2626;font-weight:700">Belum ditugaskan</span>'}
${w.rekomendasi ? `<br><span style="font-size:11px;color:#0284c7">Rekomendasi: ${escapeHtml(w.rekomendasi.nama)} (${formatJarakClient(w.rekomendasi.jarak_meter)})</span>` : ''}
</div>`;
marker.bindPopup(popup).addTo(map);
GISMap._allMarkerBounds.push([w.lat, w.lng]);
if (w.rekomendasi && w.rekomendasi.lat && w.rekomendasi.lng) {
L.polyline([[w.lat, w.lng], [w.rekomendasi.lat, w.rekomendasi.lng]], {
color: '#0284c7',
weight: 2,
opacity: 0.5,
dashArray: '5,7'
}).addTo(map);
}
});
GISMap.autoFitBounds();
});
</script>
app/views/dinsos/dashboard.php
+182
View File
@@ -0,0 +1,182 @@
<?php
// Ekstrak semua data sebelum heredoc agar tidak terjadi Array to string conversion
$mapLat = MAP_DEFAULT_LAT;
$mapLng = MAP_DEFAULT_LNG;
$appUrl = APP_URL;
$jsonKec = json_encode(array_column($perKecamatan ?? [], 'nama'));
$jsonTotals = json_encode(array_column($perKecamatan ?? [], 'total'));
$jsonEkstrems = json_encode(array_column($perKecamatan ?? [], 'ekstrem'));
$jsonBulan = json_encode(array_column($trenBantuan ?? [], 'bulan'));
$jsonJmlBantuan = json_encode(array_column($trenBantuan ?? [], 'jumlah'));
$jsonWargaTerbantu = json_encode(array_column($trenBantuan ?? [], 'warga_terbantu'));
$extraJs = <<<JS
<script>
document.addEventListener('DOMContentLoaded', async () => {
// Peta dengan heatmap
const map = GISMap.init('dinsos-map', {$mapLat}, {$mapLng}, 12);
// Load semua data
const [heatData, petaData] = await Promise.all([
App.fetchJSON('{$appUrl}/dinsos/api/heatmap'),
App.fetchJSON('{$appUrl}/admin/api/peta')
]);
if(petaData) {
const riLayer = GISMap.addRILayer(petaData.rumah_ibadah||[]);
const wLayer = GISMap.addWargaLayer(petaData.warga||[]);
L.control.layers(GISMap.layers, {
'⛪ Rumah Ibadah': riLayer,
'👥 Warga Miskin': wLayer
}, {position:'topright', collapsed:true}).addTo(map);
}
if(heatData) GISMap.addHeatmap(heatData);
// Auto zoom ke seluruh Kota Pontianak
GISMap.autoFitBounds();
// Chart per kecamatan
const kec = {$jsonKec};
const totals = {$jsonTotals};
const ekstrems = {$jsonEkstrems};
Charts.bar('chart-kecamatan', kec, [
{label:'Total Warga', data:totals},
{label:'Miskin Ekstrem', data:ekstrems}
]);
// Chart tren bantuan
const bulan = {$jsonBulan};
const jmlBantuan = {$jsonJmlBantuan};
const wargaTerbantu = {$jsonWargaTerbantu};
Charts.line('chart-tren', bulan, [
{label:'Bantuan Disalurkan', data:jmlBantuan},
{label:'Warga Terbantu', data:wargaTerbantu}
]);
});
</script>
JS; ?>
<!-- Stats -->
<div class="stats-grid">
<div class="stat-card">
<div class="stat-card-icon blue">👥</div>
<div class="stat-card-body">
<div class="stat-card-value"><?= number_format($stats['total_warga']??0) ?></div>
<div class="stat-card-label">Total Warga Miskin</div>
</div>
</div>
<div class="stat-card">
<div class="stat-card-icon red">💀</div>
<div class="stat-card-body">
<div class="stat-card-value"><?= number_format($stats['ekstrem']??0) ?></div>
<div class="stat-card-label">Miskin Ekstrem</div>
</div>
</div>
<div class="stat-card">
<div class="stat-card-icon orange">⚠</div>
<div class="stat-card-body">
<div class="stat-card-value"><?= number_format($stats['miskin']??0) ?></div>
<div class="stat-card-label">Miskin</div>
</div>
</div>
<div class="stat-card">
<div class="stat-card-icon yellow">📊</div>
<div class="stat-card-body">
<div class="stat-card-value"><?= number_format($stats['rentan']??0) ?></div>
<div class="stat-card-label">Rentan Miskin</div>
</div>
</div>
<div class="stat-card">
<div class="stat-card-icon purple">⚠️</div>
<div class="stat-card-body">
<div class="stat-card-value"><?= number_format($stats['blind_spot']??0) ?></div>
<div class="stat-card-label">Blind Spot</div>
<div class="stat-card-sub"><a href="<?= APP_URL ?>/dinsos/blind-spot" style="color:var(--clr-primary-l)">Detail →</a></div>
</div>
</div>
<div class="stat-card">
<div class="stat-card-icon green">📦</div>
<div class="stat-card-body">
<div class="stat-card-value"><?= number_format($stats['total_bantuan']??0) ?></div>
<div class="stat-card-label">Total Bantuan</div>
<div class="stat-card-sub"><?= number_format($stats['bantuan_bulan_ini']??0) ?> bulan ini</div>
</div>
</div>
</div>
<!-- Grid: Peta Besar + Info -->
<div class="dashboard-grid" style="margin-bottom:20px">
<div class="card">
<div class="card-header">
<span class="card-icon">🌡</span><h3>Heatmap Kemiskinan Kota Pontianak</h3>
<div class="card-actions">
<a href="<?= APP_URL ?>/dinsos/kemiskinan" class="btn btn-ghost btn-sm">Detail Peta</a>
<a href="<?= APP_URL ?>/dinsos/blind-spot" class="btn btn-danger btn-sm">⚠ Blind Spot</a>
</div>
</div>
<div class="card-body no-pad" style="position:relative">
<div id="dinsos-map" style="height:460px"></div>
<div class="map-legend">
<h4>Intensitas Kemiskinan</h4>
<div style="height:12px;border-radius:6px;background:linear-gradient(to right,#fef9c3,#fb923c,#ef4444,#7f1d1d);margin-bottom:6px"></div>
<div style="display:flex;justify-content:space-between;font-size:0.65rem;color:var(--clr-text-muted)">
<span>Rendah</span><span>Tinggi</span>
</div>
</div>
</div>
</div>
<!-- Sidebar: Per kec + Top RI -->
<div style="display:flex;flex-direction:column;gap:16px">
<!-- Peringkat Kecamatan -->
<div class="card">
<div class="card-header"><span class="card-icon">🗾</span><h3>Kemiskinan per Kecamatan</h3></div>
<div class="card-body no-pad">
<?php foreach($perKecamatan as $i=>$k): ?>
<div style="padding:10px 16px;border-bottom:1px solid #f1f5f9">
<div style="display:flex;justify-content:space-between;margin-bottom:4px">
<span style="font-weight:600;font-size:0.82rem"><?= $i+1 ?>. <?= e($k['nama']) ?></span>
<span style="font-weight:700;color:var(--clr-primary)"><?= number_format($k['total']) ?></span>
</div>
<div style="height:5px;background:#f1f5f9;border-radius:3px;overflow:hidden">
<?php $maxTotal = max(array_column($perKecamatan,'total')?:[1]); ?>
<div style="height:100%;background:var(--clr-danger);width:<?= $maxTotal>0?round($k['total']/$maxTotal*100):0 ?>%;border-radius:3px"></div>
</div>
<div style="font-size:0.7rem;color:var(--clr-text-muted);margin-top:2px">
Ekstrem: <?= $k['ekstrem'] ?> · Blind: <?= $k['blind_spot']??0 ?>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<!-- Top Rumah Ibadah Aktif -->
<div class="card">
<div class="card-header"><span class="card-icon">🏆</span><h3>Rumah Ibadah Paling Aktif</h3></div>
<div class="card-body no-pad">
<?php foreach($topRi as $i=>$r): ?>
<div style="padding:10px 16px;border-bottom:1px solid #f1f5f9;display:flex;gap:12px;align-items:center">
<div style="width:28px;height:28px;border-radius:50%;background:var(--clr-accent);color:var(--clr-primary-d);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:0.85rem;flex-shrink:0"><?= $i+1 ?></div>
<div style="flex:1;min-width:0">
<div style="font-weight:600;font-size:0.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis"><?= e($r['nama']) ?></div>
<div style="font-size:0.72rem;color:var(--clr-text-muted)"><?= number_format($r['jml_bantuan']) ?> bantuan · <?= number_format($r['jml_warga']) ?> warga</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
<!-- Charts Row -->
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">
<div class="card">
<div class="card-header"><span class="card-icon">📊</span><h3>Perbandingan per Kecamatan</h3></div>
<div class="card-body"><div class="chart-wrap"><canvas id="chart-kecamatan"></canvas></div></div>
</div>
<div class="card">
<div class="card-header"><span class="card-icon">📈</span><h3>Tren Bantuan 6 Bulan</h3></div>
<div class="card-body"><div class="chart-wrap"><canvas id="chart-tren"></canvas></div></div>
</div>
</div>
app/views/dinsos/kemiskinan.php
+137
View File
@@ -0,0 +1,137 @@
<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 Kemiskinan</h2>
<p class="text-muted text-sm"><?= count($data) ?> warga terfilter · Klik marker pada peta untuk detail</p>
</div>
</div>
<!-- Filter Bar -->
<form method="GET" action="<?= APP_URL ?>/dinsos/kemiskinan">
<div class="filters-bar" style="margin-bottom:16px">
<select name="kecamatan" class="form-control" onchange="this.form.submit()">
<option value="">— Semua Kecamatan —</option>
<?php foreach($kecamatan as $k): ?>
<option value="<?= $k['id'] ?>" <?= $filter_kec==$k['id']?'selected':'' ?>><?= e($k['nama']) ?></option>
<?php endforeach; ?>
</select>
<?php if(!empty($kelurahan)): ?>
<select name="kelurahan" class="form-control" onchange="this.form.submit()">
<option value="">— Semua Kelurahan —</option>
<?php foreach($kelurahan as $k): ?>
<option value="<?= $k['id'] ?>" <?= $filter_kel==$k['id']?'selected':'' ?>><?= e($k['nama']) ?></option>
<?php endforeach; ?>
</select>
<?php endif; ?>
<select name="status" class="form-control" onchange="this.form.submit()">
<option value="">— Semua Status —</option>
<?php foreach(['Miskin Ekstrem','Miskin','Rentan Miskin'] as $s): ?>
<option value="<?= $s ?>" <?= $filter_status===$s?'selected':'' ?>><?= $s ?></option>
<?php endforeach; ?>
</select>
<select name="prioritas" class="form-control" onchange="this.form.submit()">
<option value="">— Semua Prioritas —</option>
<?php foreach(['Tinggi','Sedang','Rendah'] as $p): ?>
<option value="<?= $p ?>" <?= $filter_prioritas===$p?'selected':'' ?>><?= $p ?></option>
<?php endforeach; ?>
</select>
<?php if($filter_kec||$filter_kel||$filter_status||$filter_prioritas): ?>
<a href="<?= APP_URL ?>/dinsos/kemiskinan" class="btn btn-ghost btn-sm">✕ Reset</a>
<?php endif; ?>
</div>
</form>
<!-- Grid: Peta + Daftar -->
<div style="display:grid;grid-template-columns:1fr 360px;gap:16px">
<!-- PETA -->
<div class="card">
<div class="card-body no-pad" style="position:relative">
<div id="kemiskinan-map" style="height:600px"></div>
<div class="map-legend">
<h4>Legenda</h4>
<div class="map-legend-item"><div class="map-legend-dot legend-dot-ekstrem"></div> Miskin Ekstrem</div>
<div class="map-legend-item"><div class="map-legend-dot legend-dot-miskin"></div> Miskin</div>
<div class="map-legend-item"><div class="map-legend-dot legend-dot-rentan"></div> Rentan Miskin</div>
<div class="map-legend-item"><div class="map-legend-dot legend-dot-ri"></div> Rumah Ibadah</div>
<div class="map-legend-item"><div class="map-legend-dot legend-dot-blind"></div> Blind Spot</div>
</div>
</div>
</div>
<!-- DAFTAR WARGA -->
<div class="card">
<div class="card-header">
<span class="card-icon">👥</span>
<h3>Daftar Warga (<?= count($data) ?>)</h3>
</div>
<div style="overflow-y:auto;max-height:560px">
<?php foreach($data as $w): ?>
<div class="sidebar-panel-item" id="warga-item-<?= $w['id'] ?>"
onclick="highlightWarga(<?= $w['id'] ?>,<?= (float)$w['lat'] ?>,<?= (float)$w['lng'] ?>)">
<div style="display:flex;justify-content:space-between;align-items:center">
<h4><?= e($w['nama']) ?></h4>
<div style="display:flex;gap:4px;align-items:center">
<?php if($w['is_blind_spot']): ?><span class="badge badge-purple" style="font-size:0.62rem">Blind</span><?php endif; ?>
<?php $pc=['Tinggi'=>'badge-red','Sedang'=>'badge-yellow','Rendah'=>'badge-green']; ?>
<span class="badge <?= $pc[$w['level_prioritas']]??'badge-gray' ?>" style="font-size:0.62rem"><?= $w['level_prioritas'] ?></span>
</div>
</div>
<p><?= e($w['kecamatan']) ?> › <?= e($w['kelurahan']) ?></p>
<div style="font-size:0.72rem;color:var(--clr-text-muted);margin-top:2px">
<?= e($w['status_kemiskinan']) ?> · <?= formatRupiah($w['penghasilan_bulanan']??0) ?>/bln
</div>
</div>
<?php endforeach; ?>
<?php if(empty($data)): ?>
<div class="empty-state"><div class="empty-state-icon">👥</div><h3>Tidak ada data</h3></div>
<?php endif; ?>
</div>
</div>
</div>
<script>
let wargaMarkers = {};
function highlightWarga(id, lat, lng) {
document.querySelectorAll('.sidebar-panel-item').forEach(el => el.classList.remove('active'));
document.getElementById('warga-item-'+id)?.classList.add('active');
if (wargaMarkers[id]) {
wargaMarkers[id].openPopup();
GISMap.map.setView([lat,lng],16);
}
}
document.addEventListener('DOMContentLoaded', async () => {
const map = GISMap.init('kemiskinan-map', <?= MAP_DEFAULT_LAT ?>, <?= MAP_DEFAULT_LNG ?>, 12);
const riData = await App.fetchJSON('<?= APP_URL ?>/api/rumah-ibadah');
if(riData) GISMap.addRILayer(riData);
// Zoom ke Pontianak terlebih dahulu
GISMap.autoFitBounds();
const wData = <?= json_encode(array_map(fn($w) => [
'id'=>$w['id'],'nama'=>$w['nama'],'lat'=>(float)$w['lat'],'lng'=>(float)$w['lng'],
'status_kemiskinan'=>$w['status_kemiskinan'],'level_prioritas'=>$w['level_prioritas'],
'is_blind_spot'=>$w['is_blind_spot'],'kelurahan'=>$w['kelurahan']??'',
'kecamatan'=>$w['kecamatan']??'','penghasilan_bulanan'=>$w['penghasilan_bulanan']??0
], array_filter($data, fn($w)=>$w['lat']&&$w['lng']))) ?>;
const colors = {'Miskin Ekstrem':'#dc2626','Miskin':'#ea580c','Rentan Miskin':'#ca8a04'};
wData.forEach(w => {
const color = w.is_blind_spot ? '#7c3aed' : (colors[w.status_kemiskinan]||'#6b7280');
const m = L.circleMarker([w.lat,w.lng],{radius:9,fillColor:color,color:'#fff',weight:2,fillOpacity:0.9})
.bindPopup(`<div style="min-width:180px"><strong>${w.nama}</strong><br>
<span style="font-size:12px;color:#6b7280">${w.kecamatan} › ${w.kelurahan}</span><br>
<span style="color:${color};font-weight:700;font-size:11px">${w.status_kemiskinan}</span>
${w.is_blind_spot?'<br><span style="color:#7c3aed;font-weight:700;font-size:11px">⚠ Blind Spot</span>':''}
</div>`)
.addTo(map);
wargaMarkers[w.id] = m;
m.on('click', () => {
document.querySelectorAll('.sidebar-panel-item').forEach(el=>el.classList.remove('active'));
document.getElementById('warga-item-'+w.id)?.classList.add('active');
document.getElementById('warga-item-'+w.id)?.scrollIntoView({behavior:'smooth',block:'nearest'});
});
});
});
</script>
app/views/dinsos/kinerja.php
+123
View File
@@ -0,0 +1,123 @@
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px">
<div>
<h2 style="font-size:1.2rem;font-weight:700">🏆 Kinerja Rumah Ibadah</h2>
<p class="text-muted text-sm">Monitoring efektivitas penyaluran bantuan oleh seluruh rumah ibadah</p>
</div>
</div>
<!-- Summary Cards -->
<div class="stats-grid" style="grid-template-columns:repeat(4,1fr);margin-bottom:20px">
<?php
$totalBantuan = array_sum(array_column($data,'jml_bantuan'));
$totalWarga = array_sum(array_column($data,'jml_warga'));
$aktif = count(array_filter($data, fn($d)=>$d['jml_bantuan']>0));
?>
<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 Rumah Ibadah</div></div>
</div>
<div class="stat-card"><div class="stat-card-icon blue">✅</div>
<div class="stat-card-body"><div class="stat-card-value"><?= $aktif ?></div><div class="stat-card-label">Aktif Menyalurkan</div></div>
</div>
<div class="stat-card"><div class="stat-card-icon teal">📦</div>
<div class="stat-card-body"><div class="stat-card-value"><?= number_format($totalBantuan) ?></div><div class="stat-card-label">Total Bantuan</div></div>
</div>
<div class="stat-card"><div class="stat-card-icon orange">👥</div>
<div class="stat-card-body"><div class="stat-card-value"><?= number_format($totalWarga) ?></div><div class="stat-card-label">Total Warga Binaan</div></div>
</div>
</div>
<!-- Charts + Table -->
<div style="display:grid;grid-template-columns:1fr 300px;gap:20px;margin-bottom:20px">
<!-- Bar chart -->
<div class="card">
<div class="card-header"><span class="card-icon">📊</span><h3>Ranking Bantuan per Rumah Ibadah (Top 10)</h3></div>
<div class="card-body"><div class="chart-wrap" style="height:300px"><canvas id="chart-kinerja"></canvas></div></div>
</div>
<!-- Donut: aktif vs tidak -->
<div class="card">
<div class="card-header"><span class="card-icon">🥧</span><h3>Status Partisipasi</h3></div>
<div class="card-body"><div class="chart-wrap" style="height:200px"><canvas id="chart-partisipasi"></canvas></div>
<div style="text-align:center;margin-top:12px">
<div style="font-size:0.8rem;color:var(--clr-text-muted)">
<span style="color:#16a34a;font-weight:700"><?= $aktif ?></span> aktif &nbsp;|&nbsp;
<span style="color:#dc2626;font-weight:700"><?= count($data)-$aktif ?></span> belum aktif
</div>
</div>
</div>
</div>
</div>
<!-- Tabel lengkap -->
<div class="card">
<div class="card-header"><span class="card-icon">📋</span><h3>Detail Kinerja Semua Rumah Ibadah</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-kinerja" class="form-control" placeholder="🔍 Cari nama rumah ibadah..." style="max-width:280px">
</div>
<div class="table-wrap">
<table id="table-kinerja">
<thead>
<tr><th>#</th><th>Nama</th><th>Jenis</th><th>Wilayah</th><th>Warga Binaan</th><th>Bantuan Disalurkan</th><th>Miskin Ekstrem</th><th>Bantuan Terakhir</th><th>Status</th></tr>
</thead>
<tbody>
<?php foreach($data as $i=>$r): ?>
<tr>
<td class="text-xs text-muted"><?= $i+1 ?></td>
<td>
<div style="font-weight:600;font-size:0.875rem"><?= e($r['nama']) ?></div>
<div class="text-xs text-muted">Radius: <?= number_format($r['radius_meter']) ?>m</div>
</td>
<td><span class="badge badge-green"><?= e($r['jenis']) ?></span></td>
<td class="text-sm"><?= e($r['kecamatan']) ?> › <?= e($r['kelurahan']) ?></td>
<td class="text-sm text-center"><strong><?= number_format($r['jml_warga']) ?></strong></td>
<td>
<div style="display:flex;align-items:center;gap:8px">
<strong style="color:var(--clr-success)"><?= number_format($r['jml_bantuan']) ?></strong>
<div class="priority-bar" style="width:60px">
<?php $mx=max(array_column($data,'jml_bantuan')?:[1]); ?>
<div class="priority-bar-fill low" style="width:<?= $mx>0?round($r['jml_bantuan']/$mx*100):0 ?>%"></div>
</div>
</div>
</td>
<td class="text-sm text-center">
<?php if($r['jml_ekstrem']>0): ?>
<span class="badge badge-red"><?= number_format($r['jml_ekstrem']) ?></span>
<?php else: ?><span class="text-muted">—</span><?php endif; ?>
</td>
<td class="text-xs text-muted"><?= $r['bantuan_terakhir'] ? formatTanggal($r['bantuan_terakhir']) : '—' ?></td>
<td>
<?php if($r['jml_bantuan']>0): ?>
<span class="badge badge-green">✅ Aktif</span>
<?php elseif($r['jml_warga']>0): ?>
<span class="badge badge-yellow">⏳ Ada Binaan</span>
<?php else: ?>
<span class="badge badge-gray">—</span>
<?php endif; ?>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
App.initTableSearch('search-kinerja','table-kinerja');
const top10 = <?= json_encode(array_slice($data,0,10)) ?>;
Charts.bar('chart-kinerja',
top10.map(r=>r.nama.length>20?r.nama.slice(0,20)+'...':r.nama),
[{label:'Bantuan Disalurkan', data:top10.map(r=>r.jml_bantuan)},
{label:'Warga Binaan', data:top10.map(r=>r.jml_warga)}]
);
Charts.donut('chart-partisipasi',
['Aktif Menyalurkan','Belum Aktif'],
[<?= $aktif ?>, <?= count($data)-$aktif ?>],
['#16a34a','#dc2626']
);
});
</script>
app/views/dinsos/laporan.php
+85
View File
@@ -0,0 +1,85 @@
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px">
<div>
<h2 style="font-size:1.2rem;font-weight:700">📄 Laporan Tahunan</h2>
<p class="text-muted text-sm">Rekap penyaluran bantuan tahun <?= $tahun ?></p>
</div>
<form method="GET" style="display:flex;gap:8px;align-items:center">
<label class="text-sm">Tahun:</label>
<select name="tahun" class="form-control" onchange="this.form.submit()">
<?php for($y=date('Y');$y>=2020;$y--): ?>
<option value="<?= $y ?>" <?= $tahun==$y?'selected':'' ?>><?= $y ?></option>
<?php endfor; ?>
</select>
<button type="button" class="btn btn-ghost btn-sm" onclick="window.print()">🖨 Cetak</button>
</form>
</div>
<!-- Ringkasan -->
<div class="stats-grid" style="grid-template-columns:repeat(3,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"><?= number_format($ringkasan['total_bantuan']??0) ?></div><div class="stat-card-label">Total Penyaluran Bantuan</div></div>
</div>
<div class="stat-card"><div class="stat-card-icon blue">👥</div>
<div class="stat-card-body"><div class="stat-card-value"><?= number_format($ringkasan['total_warga_terbantu']??0) ?></div><div class="stat-card-label">Warga Mendapat Bantuan</div></div>
</div>
<div class="stat-card"><div class="stat-card-icon orange">⛪</div>
<div class="stat-card-body"><div class="stat-card-value"><?= number_format($ringkasan['total_ri_aktif']??0) ?></div><div class="stat-card-label">Rumah Ibadah Aktif</div></div>
</div>
</div>
<!-- Chart bulanan -->
<div class="card" style="margin-bottom:20px">
<div class="card-header"><span class="card-icon">📊</span><h3>Grafik Penyaluran Bantuan Bulan per Bulan Tahun <?= $tahun ?></h3></div>
<div class="card-body"><div class="chart-wrap" style="height:280px"><canvas id="chart-bulanan"></canvas></div></div>
</div>
<!-- Tabel per bulan -->
<div class="card">
<div class="card-header"><span class="card-icon">📋</span><h3>Rekap per Bulan</h3></div>
<div class="card-body no-pad">
<div class="table-wrap">
<table>
<thead><tr><th>Bulan</th><th>Bantuan Disalurkan</th><th>Warga Terbantu</th><th>Rata-rata/Warga</th></tr></thead>
<tbody>
<?php
$namaBulan=['','Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];
$totalBulanan=0; $totalWarga=0;
foreach($perBulan as $b):
$totalBulanan+=$b['bantuan'];
$totalWarga+=$b['warga_terbantu'];
$avg=$b['warga_terbantu']>0?round($b['bantuan']/$b['warga_terbantu'],1):0;
?>
<tr>
<td style="font-weight:600"><?= $namaBulan[(int)$b['bulan']] ?></td>
<td><strong><?= number_format($b['bantuan']) ?></strong></td>
<td><?= number_format($b['warga_terbantu']) ?> warga</td>
<td class="text-sm text-muted"><?= $avg ?> kali/warga</td>
</tr>
<?php endforeach; ?>
<!-- Total -->
<tr style="background:#f0f9ff;font-weight:700">
<td>TOTAL</td>
<td><?= number_format($totalBulanan) ?></td>
<td><?= number_format($totalWarga) ?> (unik)</td>
<td>—</td>
</tr>
</tbody>
</table>
</div>
<?php if(empty($perBulan)): ?>
<div class="empty-state"><div class="empty-state-icon">📭</div><h3>Tidak ada data</h3><p>Belum ada penyaluran pada tahun <?= $tahun ?></p></div>
<?php endif; ?>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const bulanData = <?= json_encode($perBulan) ?>;
const namaBulan = ['','Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];
Charts.bar('chart-bulanan',
bulanData.map(b=>namaBulan[parseInt(b.bulan)]),
[{label:'Bantuan Disalurkan', data:bulanData.map(b=>b.bantuan)},
{label:'Warga Terbantu', data:bulanData.map(b=>b.warga_terbantu)}]
);
});
</script>
app/views/layouts/admin.php
+104
View File
@@ -0,0 +1,104 @@
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="app-url" content="<?= APP_URL ?>">
<meta name="csrf-token" content="<?= $_SESSION['csrf_token'] ?? '' ?>">
<title><?= e($title ?? 'SINERGI') ?> — SINERGI</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<link rel="stylesheet" href="<?= asset('css/app.css') ?>">
<?php if (isset($extraCss)) echo $extraCss; ?>
</head>
<body>
<div class="app-shell">
<!-- SIDEBAR -->
<aside class="sidebar" id="sidebar">
<div class="sidebar-brand">
<div class="sidebar-brand-icon">🗺</div>
<div class="sidebar-brand-text">
<h1>SINERGI</h1>
<p>GIS Kemiskinan Pontianak</p>
</div>
</div>
<div class="sidebar-section">
<div class="sidebar-section-title">Menu Utama</div>
<ul class="sidebar-nav">
<li><a href="<?= APP_URL ?>/admin/dashboard">
<span class="nav-icon">📊</span> Dashboard
</a></li>
</ul>
</div>
<div class="sidebar-section">
<div class="sidebar-section-title">Data Master</div>
<ul class="sidebar-nav">
<li><a href="<?= APP_URL ?>/admin/users">
<span class="nav-icon">👤</span> Manajemen User
</a></li>
<li><a href="<?= APP_URL ?>/admin/rumah-ibadah">
<span class="nav-icon">⛪</span> Rumah Ibadah
</a></li>
<li><a href="<?= APP_URL ?>/admin/wilayah">
<span class="nav-icon">🗾</span> Wilayah
</a></li>
<li><a href="<?= APP_URL ?>/admin/kategori-bantuan">
<span class="nav-icon">📦</span> Kategori Bantuan
</a></li>
</ul>
</div>
<div class="sidebar-section">
<div class="sidebar-section-title">Monitoring</div>
<ul class="sidebar-nav">
<li><a href="<?= APP_URL ?>/admin/monitoring">
<span class="nav-icon">👥</span> Data Kemiskinan
</a></li>
<li><a href="<?= APP_URL ?>/admin/blind-spot">
<span class="nav-icon">⚠️</span> Blind Spot
</a></li>
<li><a href="<?= APP_URL ?>/admin/aktivitas">
<span class="nav-icon">📋</span> Log Aktivitas
</a></li>
</ul>
</div>
<div class="sidebar-footer">
<div class="sidebar-user">
<div class="sidebar-user-avatar"><?= strtoupper(substr($user['nama'] ?? 'A', 0, 1)) ?></div>
<div class="sidebar-user-info">
<div class="sidebar-user-name"><?= e($user['nama'] ?? '') ?></div>
<div class="sidebar-user-role">Super Admin</div>
</div>
<a href="<?= APP_URL ?>/logout" class="sidebar-logout" title="Logout">⏻</a>
</div>
</div>
</aside>
<!-- TOPBAR -->
<header class="topbar">
<div class="topbar-title"><?= e($title ?? '') ?></div>
<div class="topbar-actions">
<span class="topbar-time" id="live-clock"></span>
<a href="<?= APP_URL ?>" target="_blank" class="btn btn-ghost btn-sm">🌐 Publik</a>
</div>
</header>
<!-- MAIN CONTENT -->
<main class="main-content">
<?= flashMessage() ?>
<?= $content ?>
</main>
</div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.heat@0.2.0/dist/leaflet-heat.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script src="<?= asset('js/app.js') ?>"></script>
<?php if (isset($extraJs)) echo $extraJs; ?>
</body>
</html>
app/views/layouts/dinsos.php
+67
View File
@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="app-url" content="<?= APP_URL ?>">
<meta name="csrf-token" content="<?= $_SESSION['csrf_token'] ?? '' ?>">
<title><?= e($title ?? 'SINERGI') ?> — Dinas Sosial</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<link rel="stylesheet" href="<?= asset('css/app.css') ?>">
<?php if (isset($extraCss)) echo $extraCss; ?>
</head>
<body>
<div class="app-shell">
<aside class="sidebar">
<div class="sidebar-brand">
<div class="sidebar-brand-icon" style="background:#0284c7">📈</div>
<div class="sidebar-brand-text">
<h1>SINERGI</h1>
<p>Dinas Sosial</p>
</div>
</div>
<div class="sidebar-section">
<div class="sidebar-section-title">Monitoring</div>
<ul class="sidebar-nav">
<li><a href="<?= APP_URL ?>/dinsos/dashboard"><span class="nav-icon">📊</span> Dashboard</a></li>
<li><a href="<?= APP_URL ?>/dinsos/kemiskinan"><span class="nav-icon">🗺</span> Peta Kemiskinan</a></li>
<li><a href="<?= APP_URL ?>/dinsos/bantuan"><span class="nav-icon">📦</span> Monitoring Bantuan</a></li>
<li><a href="<?= APP_URL ?>/dinsos/blind-spot"><span class="nav-icon">⚠️</span> Blind Spot</a></li>
<li><a href="<?= APP_URL ?>/dinsos/kinerja"><span class="nav-icon">🏆</span> Kinerja Rumah Ibadah</a></li>
<li><a href="<?= APP_URL ?>/dinsos/laporan"><span class="nav-icon">📄</span> Laporan Tahunan</a></li>
</ul>
</div>
<div class="sidebar-footer">
<div class="sidebar-user">
<div class="sidebar-user-avatar" style="background:#0284c7"><?= strtoupper(substr($user['nama'] ?? 'D', 0, 1)) ?></div>
<div class="sidebar-user-info">
<div class="sidebar-user-name"><?= e($user['nama'] ?? '') ?></div>
<div class="sidebar-user-role">Dinas Sosial</div>
</div>
<a href="<?= APP_URL ?>/logout" class="sidebar-logout" title="Logout">⏻</a>
</div>
</div>
</aside>
<header class="topbar">
<div class="topbar-title"><?= e($title ?? '') ?></div>
<div class="topbar-actions">
<span class="topbar-time" id="live-clock"></span>
</div>
</header>
<main class="main-content">
<?= flashMessage() ?>
<?= $content ?>
</main>
</div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.heat@0.2.0/dist/leaflet-heat.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script src="<?= asset('js/app.js') ?>"></script>
<?php if (isset($extraJs)) echo $extraJs; ?>
</body>
</html>
app/views/layouts/public.php
+63
View File
@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="app-url" content="<?= APP_URL ?>">
<meta name="csrf-token" content="<?= $_SESSION['csrf_token'] ?? '' ?>">
<title><?= e($title ?? 'SINERGI') ?></title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<link rel="stylesheet" href="<?= asset('css/app.css') ?>">
<style>
body { background: #f8fafc; }
.public-hero {
background: linear-gradient(135deg, var(--clr-primary-d) 0%, var(--clr-primary) 100%);
color: #fff; padding: 80px 32px; text-align: center;
}
.public-hero h1 { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 900; }
.public-hero p { font-size: 1rem; color: rgba(255,255,255,0.75); max-width: 600px; margin: 12px auto 0; }
.public-container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
</style>
<?php if (isset($extraCss)) echo $extraCss; ?>
</head>
<body>
<nav class="public-nav">
<a href="<?= APP_URL ?>/" class="public-nav-brand">
<span style="background:var(--clr-accent);width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:16px;">🗺</span>
<span>SINER<span>GI</span></span>
</a>
<div class="public-nav-links">
<a href="<?= APP_URL ?>/">Beranda</a>
<a href="<?= APP_URL ?>/tentang">Tentang</a>
<a href="<?= APP_URL ?>/kontak">Kontak</a>
<a href="<?= APP_URL ?>/lapor" style="background:rgba(255,255,255,0.1);padding:7px 14px;border-radius:6px;">📝 Lapor</a>
<a href="<?= APP_URL ?>/cek-laporan">🔍 Cek Status</a>
<a href="<?= APP_URL ?>/login" class="btn-login" style="background:var(--clr-accent);color:var(--clr-primary-d);padding:7px 18px;border-radius:6px;font-weight:700;">Login</a>
</div>
</nav>
<?php
// Expose kode_laporan dari flash ke GLOBALS sebelum flashMessage() mengonsumsinya
// flashMessage() memanggil getFlash() yang menghapus session — jadi kita ambil dulu
if (isset($_SESSION['flash']['kode_laporan'])) {
$GLOBALS['_flash_kode_laporan'] = $_SESSION['flash']['kode_laporan'];
}
?>
<?= flashMessage() ?>
<?= $content ?>
<footer class="public-footer">
<div style="margin-bottom:8px;">
<strong style="color:rgba(255,255,255,0.8);">SINERGI</strong> — Sistem Informasi Geografis Penanganan Kemiskinan<br>
Berbasis Kolaborasi Rumah Ibadah, Masyarakat, dan Pemerintah Kota Pontianak
</div>
<div>© <?= date('Y') ?> Pemerintah Kota Pontianak — Dinas Sosial</div>
</footer>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="<?= asset('js/app.js') ?>"></script>
<?php if (isset($extraJs)) echo $extraJs; ?>
</body>
</html>
app/views/layouts/rumah_ibadah.php
+75
View File
@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="app-url" content="<?= APP_URL ?>">
<meta name="csrf-token" content="<?= $_SESSION['csrf_token'] ?? '' ?>">
<title><?= e($title ?? 'SINERGI') ?> — SINERGI Rumah Ibadah</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<link rel="stylesheet" href="<?= asset('css/app.css') ?>">
<?php if (isset($extraCss)) echo $extraCss; ?>
</head>
<body>
<div class="app-shell">
<aside class="sidebar">
<div class="sidebar-brand">
<div class="sidebar-brand-icon">⛪</div>
<div class="sidebar-brand-text">
<h1>SINERGI</h1>
<p>Pengurus Rumah Ibadah</p>
</div>
</div>
<?php if (!empty($ri)): ?>
<div style="padding:14px 16px;background:rgba(255,255,255,0.06);margin:12px;border-radius:8px;">
<div style="font-size:0.7rem;color:rgba(255,255,255,0.45);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:4px;">Rumah Ibadah</div>
<div style="font-size:0.88rem;color:#fff;font-weight:600;"><?= e($ri['nama']) ?></div>
<div style="font-size:0.75rem;color:rgba(255,255,255,0.5);"><?= e($ri['jenis'] ?? '') ?> • <?= e($ri['kelurahan'] ?? '') ?></div>
<div style="font-size:0.72rem;color:#16a34a;margin-top:3px;">Radius: <?= number_format($ri['radius_meter'] ?? 500) ?>m</div>
</div>
<?php endif; ?>
<div class="sidebar-section">
<div class="sidebar-section-title">Menu</div>
<ul class="sidebar-nav">
<li><a href="<?= APP_URL ?>/rumah-ibadah/dashboard"><span class="nav-icon">📊</span> Dashboard</a></li>
<li><a href="<?= APP_URL ?>/rumah-ibadah/warga"><span class="nav-icon">👥</span> Warga Binaan</a></li>
<li><a href="<?= APP_URL ?>/rumah-ibadah/prioritas"><span class="nav-icon">🔥</span> Prioritas Bantuan</a></li>
<li><a href="<?= APP_URL ?>/rumah-ibadah/bantuan"><span class="nav-icon">📦</span> Histori Bantuan</a></li>
<li><a href="<?= APP_URL ?>/rumah-ibadah/bantuan/tambah"><span class="nav-icon">➕</span> Catat Bantuan</a></li>
</ul>
</div>
<div class="sidebar-footer">
<div class="sidebar-user">
<div class="sidebar-user-avatar"><?= strtoupper(substr($user['nama'] ?? 'R', 0, 1)) ?></div>
<div class="sidebar-user-info">
<div class="sidebar-user-name"><?= e($user['nama'] ?? '') ?></div>
<div class="sidebar-user-role">Pengurus</div>
</div>
<a href="<?= APP_URL ?>/logout" class="sidebar-logout" title="Logout">⏻</a>
</div>
</div>
</aside>
<header class="topbar">
<div class="topbar-title"><?= e($title ?? '') ?></div>
<div class="topbar-actions">
<span class="topbar-time" id="live-clock"></span>
</div>
</header>
<main class="main-content">
<?= flashMessage() ?>
<?= $content ?>
</main>
</div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.heat@0.2.0/dist/leaflet-heat.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script src="<?= asset('js/app.js') ?>"></script>
<?php if (isset($extraJs)) echo $extraJs; ?>
</body>
</html>
app/views/layouts/verifikator.php
+71
View File
@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="app-url" content="<?= APP_URL ?>">
<meta name="csrf-token" content="<?= $_SESSION['csrf_token'] ?? '' ?>">
<title><?= e($title ?? 'SINERGI') ?> — SINERGI Verifikator</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<link rel="stylesheet" href="<?= asset('css/app.css') ?>">
<?php if (isset($extraCss)) echo $extraCss; ?>
</head>
<body>
<div class="app-shell">
<aside class="sidebar" id="sidebar">
<div class="sidebar-brand">
<div class="sidebar-brand-icon">✅</div>
<div class="sidebar-brand-text">
<h1>SINERGI</h1>
<p>Verifikator Kelurahan</p>
</div>
</div>
<?php $u = Auth::user(); ?>
<div style="padding:14px 16px;background:rgba(255,255,255,0.05);margin:12px;border-radius:8px;">
<div style="font-size:0.7rem;color:rgba(255,255,255,0.45);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:4px;">Wilayah Tugas</div>
<div style="font-size:0.88rem;color:#fff;font-weight:600;"><?= e($u['kelurahan_nama'] ?? '-') ?></div>
<div style="font-size:0.75rem;color:rgba(255,255,255,0.5);"><?= e($u['kecamatan_nama'] ?? '') ?></div>
</div>
<div class="sidebar-section">
<div class="sidebar-section-title">Menu</div>
<ul class="sidebar-nav">
<li><a href="<?= APP_URL ?>/verifikator/dashboard"><span class="nav-icon">📊</span> Dashboard</a></li>
<li><a href="<?= APP_URL ?>/verifikator/laporan"><span class="nav-icon">📋</span> Daftar Laporan</a></li>
<li><a href="<?= APP_URL ?>/verifikator/warga"><span class="nav-icon">👥</span> Data Warga</a></li>
<li><a href="<?= APP_URL ?>/verifikator/warga/tambah"><span class="nav-icon">➕</span> Tambah Warga</a></li>
</ul>
</div>
<div class="sidebar-footer">
<div class="sidebar-user">
<div class="sidebar-user-avatar"><?= strtoupper(substr($user['nama'] ?? 'V', 0, 1)) ?></div>
<div class="sidebar-user-info">
<div class="sidebar-user-name"><?= e($user['nama'] ?? '') ?></div>
<div class="sidebar-user-role">Verifikator</div>
</div>
<a href="<?= APP_URL ?>/logout" class="sidebar-logout" title="Logout">⏻</a>
</div>
</div>
</aside>
<header class="topbar">
<div class="topbar-title"><?= e($title ?? '') ?></div>
<div class="topbar-actions">
<span class="topbar-time" id="live-clock"></span>
</div>
</header>
<main class="main-content">
<?= flashMessage() ?>
<?= $content ?>
</main>
</div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script src="<?= asset('js/app.js') ?>"></script>
<?php if (isset($extraJs)) echo $extraJs; ?>
</body>
</html>
app/views/layouts/walikota.php
+76
View File
@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="app-url" content="<?= APP_URL ?>">
<title><?= e($title ?? 'SINERGI') ?> — Dashboard Eksekutif</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<link rel="stylesheet" href="<?= asset('css/app.css') ?>">
<style>
:root { --clr-sidebar-bg: #1a0533; }
.sidebar-brand-icon { background: #7c3aed !important; }
</style>
<?php if (isset($extraCss)) echo $extraCss; ?>
</head>
<body>
<div class="app-shell">
<aside class="sidebar">
<div class="sidebar-brand">
<div class="sidebar-brand-icon">🏛</div>
<div class="sidebar-brand-text">
<h1>SINERGI</h1>
<p>Dashboard Eksekutif</p>
</div>
</div>
<div style="padding:14px 16px;background:rgba(255,255,255,0.06);margin:12px;border-radius:8px;text-align:center;">
<div style="font-size:1.8rem;margin-bottom:4px;">🏛</div>
<div style="font-size:0.88rem;color:#fff;font-weight:700;">Wali Kota Pontianak</div>
<div style="font-size:0.75rem;color:rgba(255,255,255,0.5);">Dashboard Hanya Baca</div>
</div>
<div class="sidebar-section">
<div class="sidebar-section-title">Menu</div>
<ul class="sidebar-nav">
<li><a href="<?= APP_URL ?>/walikota/dashboard" class="active"><span class="nav-icon">📊</span> Dashboard Eksekutif</a></li>
</ul>
</div>
<div style="padding:16px;margin:0 12px;background:rgba(124,58,237,0.12);border-radius:8px;border:1px solid rgba(124,58,237,0.2);">
<div style="font-size:0.72rem;color:rgba(255,255,255,0.5);margin-bottom:4px;">ℹ️ Mode Akses</div>
<div style="font-size:0.78rem;color:rgba(255,255,255,0.7);">Hanya dapat melihat data. Tidak dapat mengubah data apapun.</div>
</div>
<div class="sidebar-footer">
<div class="sidebar-user">
<div class="sidebar-user-avatar" style="background:#7c3aed"><?= strtoupper(substr($user['nama'] ?? 'W', 0, 1)) ?></div>
<div class="sidebar-user-info">
<div class="sidebar-user-name"><?= e($user['nama'] ?? '') ?></div>
<div class="sidebar-user-role">Wali Kota</div>
</div>
<a href="<?= APP_URL ?>/logout" class="sidebar-logout" title="Logout">⏻</a>
</div>
</div>
</aside>
<header class="topbar">
<div class="topbar-title"><?= e($title ?? '') ?></div>
<div class="topbar-actions">
<span style="font-size:0.78rem;color:#7c3aed;font-weight:600;background:#f3e8ff;padding:4px 10px;border-radius:20px;">🏛 Wali Kota — Read Only</span>
<span class="topbar-time" id="live-clock"></span>
</div>
</header>
<main class="main-content">
<?= $content ?>
</main>
</div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.heat@0.2.0/dist/leaflet-heat.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script src="<?= asset('js/app.js') ?>"></script>
<?php if (isset($extraJs)) echo $extraJs; ?>
</body>
</html>
app/views/public/403.php
+20
View File
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8"><title>403 Akses Ditolak — SINERGI</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="<?= APP_URL ?>/public/css/app.css">
</head>
<body style="background:var(--clr-bg);display:flex;align-items:center;justify-content:center;min-height:100vh">
<div style="text-align:center;padding:40px">
<div style="font-size:5rem">🚫</div>
<h1 style="font-size:4rem;font-weight:900;color:var(--clr-danger);margin:8px 0">403</h1>
<h2 style="font-size:1.3rem;font-weight:700;margin-bottom:8px">Akses Ditolak</h2>
<p style="color:var(--clr-text-muted);margin-bottom:24px">Anda tidak memiliki izin untuk mengakses halaman ini.</p>
<div style="display:flex;gap:12px;justify-content:center">
<a href="<?= APP_URL ?>/login" class="btn btn-primary">Login dengan Akun Lain</a>
<a href="<?= APP_URL ?>/" class="btn btn-ghost">Ke Beranda</a>
</div>
</div>
</body>
</html>
app/views/public/404.php
+17
View File
@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8"><title>404 — SINERGI</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="<?= APP_URL ?>/public/css/app.css">
</head>
<body style="background:var(--clr-bg);display:flex;align-items:center;justify-content:center;min-height:100vh">
<div style="text-align:center;padding:40px">
<div style="font-size:5rem">🗺</div>
<h1 style="font-size:4rem;font-weight:900;color:var(--clr-primary);margin:8px 0">404</h1>
<h2 style="font-size:1.3rem;font-weight:700;margin-bottom:8px">Halaman Tidak Ditemukan</h2>
<p style="color:var(--clr-text-muted);margin-bottom:24px">Halaman yang Anda cari tidak ada atau sudah dipindahkan.</p>
<a href="<?= APP_URL ?>/" class="btn btn-primary">← Kembali ke Beranda</a>
</div>
</body>
</html>
app/views/public/beranda.php
+91
View File
@@ -0,0 +1,91 @@
<!-- HERO -->
<div class="public-hero">
<div style="font-size:3.5rem;margin-bottom:12px">🗺</div>
<h1>SINERGI</h1>
<p>Sistem Informasi Geografis Penanganan Kemiskinan Berbasis Kolaborasi Rumah Ibadah, Masyarakat, dan Pemerintah Kota Pontianak</p>
<div style="margin-top:28px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap">
<a href="<?= APP_URL ?>/lapor" style="background:var(--clr-accent);color:var(--clr-primary-d);padding:12px 28px;border-radius:8px;font-weight:700;font-size:1rem;text-decoration:none">📝 Lapor Warga Membutuhkan</a>
<a href="<?= APP_URL ?>/cek-laporan" style="background:rgba(255,255,255,0.12);color:#fff;padding:12px 28px;border-radius:8px;font-weight:600;font-size:1rem;text-decoration:none;border:1px solid rgba(255,255,255,0.2)">🔍 Cek Status Laporan</a>
</div>
</div>
<!-- STATS -->
<div class="public-container" style="margin-top:-40px">
<div style="display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:40px">
<?php $sItems = [
['👥', number_format($stats['total_warga']??0), 'Warga Terdata'],
['⛪', number_format($stats['total_ri']??0), 'Rumah Ibadah'],
['📋', number_format($stats['total_laporan']??0), 'Total Laporan'],
['📦', number_format($stats['total_bantuan']??0), 'Bantuan Disalurkan'],
]; foreach($sItems as [$icon,$val,$label]): ?>
<div style="background:#fff;border-radius:12px;padding:20px;text-align:center;box-shadow:0 4px 16px rgba(0,0,0,0.08);border:1px solid var(--clr-border)">
<div style="font-size:2rem"><?= $icon ?></div>
<div style="font-size:1.6rem;font-weight:800;color:var(--clr-primary);margin-top:4px"><?= $val ?></div>
<div style="font-size:0.78rem;color:var(--clr-text-muted)"><?= $label ?></div>
</div>
<?php endforeach; ?>
<div style="background:var(--clr-primary);border-radius:12px;padding:20px;text-align:center;box-shadow:0 4px 16px rgba(0,0,0,0.15)">
<div style="font-size:2rem">🏛</div>
<div style="font-size:0.9rem;font-weight:700;color:#fff;margin-top:8px">Kota Pontianak</div>
<div style="font-size:0.72rem;color:rgba(255,255,255,0.6)">6 Kecamatan</div>
</div>
</div>
</div>
<!-- PETA PUBLIK -->
<div class="public-container" style="margin-bottom:48px">
<h2 style="font-size:1.4rem;font-weight:800;color:var(--clr-text);margin-bottom:8px">Peta Persebaran Kemiskinan</h2>
<p style="color:var(--clr-text-muted);margin-bottom:16px;font-size:0.9rem">Data real-time persebaran warga miskin dan rumah ibadah di Kota Pontianak</p>
<div style="border-radius:16px;overflow:hidden;border:1px solid var(--clr-border);box-shadow:0 8px 32px rgba(0,0,0,0.1);position:relative">
<div id="public-map" style="height:460px"></div>
<div class="map-legend">
<h4>Keterangan</h4>
<div class="map-legend-item"><div class="map-legend-dot legend-dot-ekstrem"></div> Miskin Ekstrem</div>
<div class="map-legend-item"><div class="map-legend-dot legend-dot-miskin"></div> Miskin</div>
<div class="map-legend-item"><div class="map-legend-dot legend-dot-rentan"></div> Rentan Miskin</div>
<div class="map-legend-item"><div class="map-legend-dot legend-dot-ri"></div> Rumah Ibadah</div>
</div>
</div>
</div>
<!-- CARA MELAPOR -->
<div style="background:#f8fafc;padding:60px 0">
<div class="public-container">
<h2 style="text-align:center;font-size:1.4rem;font-weight:800;margin-bottom:8px">Cara Melapor</h2>
<p style="text-align:center;color:var(--clr-text-muted);margin-bottom:36px">Mudah dan cepat, tanpa perlu daftar atau login</p>
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:24px">
<?php $steps = [
['1','📝','Isi Formulir','Isi nama warga, alamat, dan kondisi yang dialami'],
['2','📷','Upload Foto','Unggah foto kondisi tempat tinggal (opsional)'],
['3','📍','Tandai Lokasi','Pilih lokasi tepat pada peta interaktif'],
['4','✅','Kirim Laporan','Simpan kode laporan untuk memantau status'],
]; foreach($steps as [$num,$icon,$title,$desc]): ?>
<div style="text-align:center;padding:24px 16px">
<div style="width:52px;height:52px;border-radius:50%;background:var(--clr-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin:0 auto 12px">
<?= $icon ?>
</div>
<div style="font-size:0.72rem;font-weight:700;color:var(--clr-accent);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:4px">Langkah <?= $num ?></div>
<div style="font-weight:700;margin-bottom:6px"><?= $title ?></div>
<div style="font-size:0.82rem;color:var(--clr-text-muted)"><?= $desc ?></div>
</div>
<?php endforeach; ?>
</div>
<div style="text-align:center;margin-top:28px">
<a href="<?= APP_URL ?>/lapor" style="background:var(--clr-primary);color:#fff;padding:13px 32px;border-radius:8px;font-weight:700;font-size:1rem;text-decoration:none;display:inline-block">📝 Mulai Melapor Sekarang</a>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', async () => {
const map = GISMap.init('public-map', <?= MAP_DEFAULT_LAT ?>, <?= MAP_DEFAULT_LNG ?>, 12);
const [wArgaData, riData] = await Promise.all([
App.fetchJSON('<?= APP_URL ?>/api/warga-peta'),
App.fetchJSON('<?= APP_URL ?>/api/rumah-ibadah')
]);
if(wArgaData) GISMap.addWargaLayer(wArgaData);
if(riData) GISMap.addRILayer(riData);
// Auto zoom ke seluruh Kota Pontianak setelah marker dimuat
GISMap.autoFitBounds();
});
</script>
app/views/public/cek_laporan.php
+102
View File
@@ -0,0 +1,102 @@
<!-- CEK STATUS LAPORAN -->
<div style="background:linear-gradient(135deg,var(--clr-primary-d),var(--clr-primary));color:#fff;padding:40px 32px;text-align:center">
<h1 style="font-size:1.8rem;font-weight:800">🔍 Cek Status Laporan</h1>
<p style="color:rgba(255,255,255,0.75)">Masukkan kode laporan yang Anda terima saat mengirim laporan</p>
</div>
<div class="public-container" style="padding-top:36px;padding-bottom:60px;max-width:600px">
<?= flashMessage() ?>
<div class="card" style="margin-bottom:24px">
<div class="card-body">
<form method="POST" action="<?= APP_URL ?>/cek-laporan">
<?= csrfField() ?>
<div style="display:flex;gap:12px">
<input type="text" name="kode_laporan" class="form-control"
placeholder="Contoh: LPR-20240501-0001" required
value="<?= e($kode ?? '') ?>" style="font-family:monospace;font-weight:600;letter-spacing:0.05em">
<button type="submit" class="btn btn-primary" style="white-space:nowrap">🔍 Cek</button>
</div>
</form>
</div>
</div>
<?php if (isset($laporan) && !$laporan && isset($kode) && $kode): ?>
<div class="card">
<div class="card-body" style="text-align:center;padding:40px">
<div style="font-size:3rem">❓</div>
<h3 style="margin:12px 0 6px">Laporan Tidak Ditemukan</h3>
<p style="color:var(--clr-text-muted)">Kode laporan <strong><?= e($kode) ?></strong> tidak ditemukan. Pastikan kode sudah benar.</p>
</div>
</div>
<?php elseif (isset($laporan) && $laporan): ?>
<div class="card">
<div class="card-header"><span class="card-icon">📋</span><h3>Hasil Pencarian</h3></div>
<div class="card-body">
<!-- Status Bar -->
<?php
$steps = ['menunggu'=>1,'diproses'=>2,'terverifikasi'=>3,'ditolak'=>-1];
$cur = $steps[$laporan['status']] ?? 1;
$colors = ['menunggu'=>'#d97706','diproses'=>'#0284c7','terverifikasi'=>'#16a34a','ditolak'=>'#dc2626'];
$icons = ['menunggu'=>'⏳','diproses'=>'🔄','terverifikasi'=>'✅','ditolak'=>'❌'];
?>
<div style="text-align:center;margin-bottom:24px">
<div style="font-size:2.5rem;margin-bottom:8px"><?= $icons[$laporan['status']] ?? '❓' ?></div>
<div style="font-size:1.1rem;font-weight:800;color:<?= $colors[$laporan['status']] ?? '#6b7280' ?>">
<?= ucfirst($laporan['status']) ?>
</div>
<div style="font-size:0.82rem;color:var(--clr-text-muted);margin-top:4px">
Kode: <strong style="font-family:monospace"><?= e($laporan['kode_laporan']) ?></strong>
</div>
</div>
<?php if ($laporan['status'] !== 'ditolak'): ?>
<!-- Progress Steps -->
<div style="display:flex;align-items:center;gap:0;margin-bottom:24px">
<?php $stepLabels = ['Laporan Dikirim','Sedang Diproses','Terverifikasi']; ?>
<?php foreach ($stepLabels as $i => $sl): ?>
<div style="flex:1;text-align:center">
<div style="width:32px;height:32px;border-radius:50%;margin:0 auto 4px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.85rem;
background:<?= $i+1<=$cur?'var(--clr-success)':'#e2e8f0' ?>;
color:<?= $i+1<=$cur?'#fff':'#94a3b8' ?>">
<?= $i+1<=$cur?'✓':($i+1) ?>
</div>
<div style="font-size:0.72rem;color:<?= $i+1<=$cur?'var(--clr-success)':'#94a3b8' ?>;font-weight:<?= $i+1<=$cur?'600':'400' ?>">
<?= $sl ?>
</div>
</div>
<?php if ($i < 2): ?>
<div style="flex:1;height:2px;background:<?= $i+1<$cur?'var(--clr-success)':'#e2e8f0' ?>;margin-bottom:20px"></div>
<?php endif; ?>
<?php endforeach; ?>
</div>
<?php endif; ?>
<!-- Detail -->
<div style="display:grid;gap:10px">
<?php $rows = [
['Nama Warga', $laporan['nama_warga']],
['Wilayah', ($laporan['kelurahan']??'').", ".($laporan['kecamatan']??'')],
['Tanggal Laporan', formatTanggal($laporan['created_at'],true)],
['Tanggal Verifikasi', $laporan['tanggal_verifikasi'] ? formatTanggal($laporan['tanggal_verifikasi'],true) : '—'],
]; foreach($rows as [$l,$v]): ?>
<div style="display:flex;gap:12px;padding:8px 0;border-bottom:1px solid #f1f5f9">
<div style="font-size:0.8rem;color:var(--clr-text-muted);min-width:130px"><?= $l ?></div>
<div style="font-size:0.875rem;font-weight:500"><?= e($v) ?></div>
</div>
<?php endforeach; ?>
<?php if ($laporan['catatan_verifikator']): ?>
<div style="margin-top:8px;padding:12px;background:#f8fafc;border-radius:8px;border-left:3px solid var(--clr-primary)">
<div style="font-size:0.75rem;color:var(--clr-text-muted);margin-bottom:4px">Catatan Petugas:</div>
<div style="font-size:0.875rem"><?= nl2br(e($laporan['catatan_verifikator'])) ?></div>
</div>
<?php endif; ?>
</div>
</div>
</div>
<?php endif; ?>
<div style="margin-top:20px;text-align:center">
<a href="<?= APP_URL ?>/lapor" style="color:var(--clr-text-muted);font-size:0.85rem">Buat laporan baru →</a>
</div>
</div>
app/views/public/kontak.php
+21
View File
@@ -0,0 +1,21 @@
<div class="public-hero" style="padding:50px 32px">
<h1 style="font-size:1.8rem;font-weight:800">📞 Kontak</h1>
<p style="color:rgba(255,255,255,0.75)">Hubungi kami untuk informasi lebih lanjut tentang SINERGI</p>
</div>
<div class="public-container" style="padding:48px 24px">
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:800px;margin:0 auto">
<div class="card"><div class="card-body">
<div style="font-size:2rem;margin-bottom:10px">🏛</div>
<h3 style="font-weight:700;margin-bottom:8px">Dinas Sosial Kota Pontianak</h3>
<p style="font-size:0.85rem;color:var(--clr-text-muted)">📍 Jl. Gusti Sulung Lelanang No. 1B Pontianak Selatan, Darat Sekip, Kec. Pontianak Kota, Kota Pontianak, Kalimantan Barat 78116</p>
<p style="font-size:0.85rem;color:var(--clr-text-muted)">📞 (0561) 8108 969</p>
<p style="font-size:0.85rem;color:var(--clr-primary-l)">✉ dinsos@pontianak.go.id</p>
</div></div>
<div class="card"><div class="card-body">
<div style="font-size:2rem;margin-bottom:10px">🌐</div>
<h3 style="font-weight:700;margin-bottom:8px">Pemerintah Kota Pontianak</h3>
<p style="font-size:0.85rem;color:var(--clr-text-muted)">📞 (0561) 8181771</p>
<p style="font-size:0.85rem;color:var(--clr-primary-l)">🌐 www.pontianak.go.id</p>
</div></div>
</div>
</div>
app/views/public/lapor.php
+175
View File
@@ -0,0 +1,175 @@
<?php
$_mapLat = MAP_DEFAULT_LAT;
$_mapLng = MAP_DEFAULT_LNG;
$_appUrl = APP_URL;
$extraJs = <<<JS
<script>
document.addEventListener('DOMContentLoaded', () => {
LocationPicker.init('lapor-map','lat','lng', {$_mapLat}, {$_mapLng});
// Load kecamatan → kelurahan
document.getElementById('kecamatan').addEventListener('change', async function() {
const id = this.value;
const sel = document.getElementById('id_kelurahan');
sel.innerHTML = '<option value="">— Memuat... —</option>';
if (!id) { sel.innerHTML = '<option value="">— Pilih Kelurahan —</option>'; return; }
const data = await App.fetchJSON('{$_appUrl}/api/kelurahan/' + id);
sel.innerHTML = '<option value="">— Pilih Kelurahan —</option>';
if (data) data.forEach(k => {
sel.innerHTML += '<option value="' + k.id + '">' + k.nama + '</option>';
});
});
});
</script>
JS;
?>
<!-- Hero kecil -->
<div style="background:linear-gradient(135deg,var(--clr-primary-d),var(--clr-primary));color:#fff;padding:40px 32px;text-align:center">
<h1 style="font-size:1.8rem;font-weight:800">📝 Lapor Cepat</h1>
<p style="color:rgba(255,255,255,0.75);margin-top:6px">Laporkan warga yang membutuhkan bantuan — gratis, mudah, tanpa login</p>
</div>
<div class="public-container" style="padding-top:36px;padding-bottom:60px">
<?= flashMessage() ?>
<?php
// Kode laporan dari flash — ditampilkan sebagai card permanen (tidak auto-dismiss)
$kodeLaporan = $GLOBALS['_flash_kode_laporan'] ?? null;
?>
<?php if ($kodeLaporan): ?>
<div style="background:#f0fdf4;border:2px solid #22c55e;border-radius:12px;padding:28px;margin-bottom:28px;text-align:center">
<div style="font-size:1rem;color:#15803d;font-weight:600;margin-bottom:10px">✅ Laporan Berhasil Dikirim!</div>
<div style="font-size:0.85rem;color:#166534;margin-bottom:14px">Simpan kode berikut untuk memantau status laporan Anda</div>
<div style="display:inline-block;background:#fff;border:2px dashed #22c55e;border-radius:10px;padding:14px 36px;margin-bottom:16px">
<div style="font-size:0.75rem;color:#6b7280;margin-bottom:4px;letter-spacing:1px;text-transform:uppercase">Kode Laporan</div>
<div style="font-size:2rem;font-weight:900;letter-spacing:6px;color:#15803d;font-family:monospace"><?= e($kodeLaporan) ?></div>
</div>
<br>
<button type="button"
onclick="navigator.clipboard.writeText('<?= e($kodeLaporan) ?>').then(()=>{this.textContent='✅ Tersalin!';this.style.background='#15803d';setTimeout(()=>{this.textContent='📋 Salin Kode';this.style.background='';},2000);})"
class="btn btn-primary btn-sm" style="margin-right:8px">📋 Salin Kode</button>
<a href="<?= APP_URL ?>/cek-laporan?kode=<?= urlencode($kodeLaporan) ?>" class="btn btn-secondary btn-sm">🔍 Cek Status</a>
</div>
<?php endif; ?>
<div style="display:grid;grid-template-columns:1fr 380px;gap:28px">
<!-- FORM -->
<div>
<form method="POST" action="<?= APP_URL ?>/lapor" enctype="multipart/form-data">
<?= csrfField() ?>
<div class="card" style="margin-bottom:20px">
<div class="card-header"><span class="card-icon">👤</span><h3>Data Pelapor</h3></div>
<div class="card-body">
<div class="form-row cols-2">
<div class="form-group">
<label class="form-label">Nama Pelapor <span class="required">*</span></label>
<input type="text" name="nama_pelapor" class="form-control" required placeholder="Nama lengkap Anda">
</div>
<div class="form-group">
<label class="form-label">No. HP (WhatsApp)</label>
<input type="text" name="no_hp_pelapor" class="form-control" placeholder="08xxxxxxxxxx">
</div>
</div>
</div>
</div>
<div class="card" style="margin-bottom:20px">
<div class="card-header"><span class="card-icon">🏠</span><h3>Data Warga yang Dilaporkan</h3></div>
<div class="card-body">
<div class="form-group">
<label class="form-label">Nama Warga <span class="required">*</span></label>
<input type="text" name="nama_warga" class="form-control" required placeholder="Nama lengkap warga yang membutuhkan bantuan">
</div>
<div class="form-row cols-2">
<div class="form-group">
<label class="form-label">Kecamatan <span class="required">*</span></label>
<select id="kecamatan" class="form-control" required>
<option value="">— Pilih Kecamatan —</option>
<?php foreach($kecamatan as $k): ?>
<option value="<?= $k['id'] ?>"><?= e($k['nama']) ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<label class="form-label">Kelurahan <span class="required">*</span></label>
<select name="id_kelurahan" id="id_kelurahan" class="form-control" required>
<option value="">— Pilih Kelurahan —</option>
</select>
</div>
</div>
<div class="form-group">
<label class="form-label">Alamat Lengkap <span class="required">*</span></label>
<textarea name="alamat_warga" class="form-control" rows="2" required placeholder="Nama jalan, nomor rumah, RT/RW"></textarea>
</div>
<div class="form-group">
<label class="form-label">Deskripsi Kondisi <span class="required">*</span></label>
<textarea name="deskripsi" class="form-control" rows="3" required placeholder="Ceritakan kondisi warga, mengapa membutuhkan bantuan, kondisi rumah, dll."></textarea>
</div>
<div class="form-group">
<label class="form-label">Foto Kondisi (Opsional)</label>
<input type="file" name="foto" class="form-control" accept="image/*">
<div class="form-hint">Foto rumah atau kondisi warga membantu proses verifikasi</div>
</div>
</div>
</div>
<div class="card" style="margin-bottom:20px">
<div class="card-header"><span class="card-icon">📍</span><h3>Lokasi Rumah Warga</h3></div>
<div class="card-body">
<div id="lapor-map" style="height:300px;border-radius:8px;border:1px solid var(--clr-border);margin-bottom:12px"></div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
<div class="form-group">
<label class="form-label">Latitude <span class="required">*</span></label>
<input type="number" name="lat" id="lat" class="form-control" step="0.0000001" required placeholder="-0.0263">
</div>
<div class="form-group">
<label class="form-label">Longitude <span class="required">*</span></label>
<input type="number" name="lng" id="lng" class="form-control" step="0.0000001" required placeholder="109.3425">
</div>
</div>
<div class="form-hint">📌 Klik pada peta atau drag marker untuk menentukan lokasi rumah warga secara tepat</div>
</div>
</div>
<button type="submit" class="btn btn-primary w-full" style="padding:13px;font-size:1rem;justify-content:center">
📤 Kirim Laporan
</button>
<div style="margin-top:10px;text-align:center;font-size:0.8rem;color:var(--clr-text-muted)">
Laporan akan diverifikasi oleh petugas. Simpan kode laporan untuk memantau status.
</div>
</form>
</div>
<!-- SIDEBAR INFO -->
<div>
<div class="card" style="position:sticky;top:80px">
<div class="card-header"><span class="card-icon">ℹ️</span><h3>Informasi Penting</h3></div>
<div class="card-body" style="display:flex;flex-direction:column;gap:16px">
<div style="padding:14px;background:#f0fdf4;border-radius:8px;border:1px solid #bbf7d0">
<div style="font-weight:700;color:var(--clr-success);margin-bottom:6px">✅ Apa yang terjadi setelah laporan?</div>
<ol style="margin:0;padding-left:18px;font-size:0.82rem;color:#166534;line-height:2">
<li>Laporan diterima dan diberi kode unik</li>
<li>Verifikator kelurahan melakukan survei</li>
<li>Data masuk sistem pemetaan GIS</li>
<li>Rumah ibadah terdekat mendapat notifikasi</li>
<li>Bantuan disalurkan sesuai prioritas</li>
</ol>
</div>
<div style="padding:14px;background:#eff6ff;border-radius:8px;border:1px solid #bfdbfe">
<div style="font-weight:700;color:var(--clr-info);margin-bottom:6px">📱 Cek Status Laporan</div>
<div style="font-size:0.82rem;color:#1e40af">Simpan kode laporan yang diberikan setelah mengirim untuk memantau status verifikasi.</div>
<a href="<?= APP_URL ?>/cek-laporan" class="btn btn-primary btn-sm" style="margin-top:10px">🔍 Cek Status</a>
</div>
<div style="padding:14px;background:#fef9c3;border-radius:8px;border:1px solid #fde047">
<div style="font-weight:700;color:#a16207;margin-bottom:6px">⚠️ Peringatan</div>
<div style="font-size:0.82rem;color:#854d0e">Laporan yang tidak akurat atau laporan palsu akan ditolak. Isi data dengan benar dan jujur.</div>
</div>
</div>
</div>
</div>
</div>
</div>
app/views/public/tentang.php
+40
View File
@@ -0,0 +1,40 @@
<!-- TENTANG SISTEM -->
<div style="background:linear-gradient(135deg,var(--clr-primary-d),var(--clr-primary));color:#fff;padding:60px 32px;text-align:center">
<h1 style="font-size:2rem;font-weight:900">Tentang SINERGI</h1>
<p style="color:rgba(255,255,255,0.75);max-width:600px;margin:12px auto 0">Sistem Informasi Geografis Penanganan Kemiskinan Berbasis Kolaborasi</p>
</div>
<div class="public-container" style="padding:48px 24px">
<div style="max-width:800px;margin:0 auto">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:40px">
<div class="card"><div class="card-body">
<div style="font-size:2rem;margin-bottom:12px">🎯</div>
<h3 style="font-weight:700;margin-bottom:8px">Tujuan Sistem</h3>
<p style="color:var(--clr-text-muted);font-size:0.875rem;line-height:1.7">SINERGI dirancang untuk memetakan, memverifikasi, dan menangani kemiskinan di Kota Pontianak melalui kolaborasi antara rumah ibadah, masyarakat, dan pemerintah.</p>
</div></div>
<div class="card"><div class="card-body">
<div style="font-size:2rem;margin-bottom:12px">⛪</div>
<h3 style="font-weight:700;margin-bottom:8px">Kolaborasi Rumah Ibadah</h3>
<p style="color:var(--clr-text-muted);font-size:0.875rem;line-height:1.7">Setiap warga miskin yang terverifikasi akan ditugaskan ke rumah ibadah terdekat menggunakan Haversine Formula untuk memastikan penyaluran bantuan tepat sasaran.</p>
</div></div>
</div>
<div class="card"><div class="card-body">
<h3 style="font-weight:700;margin-bottom:16px">Fitur Unggulan Sistem</h3>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px">
<?php $fitur = [
['🗺','Peta GIS Real-time','Visualisasi persebaran kemiskinan secara real-time menggunakan Leaflet.js'],
['🔥','Heatmap Kemiskinan','Identifikasi daerah dengan konsentrasi kemiskinan tertinggi'],
['⚡','Blind Spot Detection','Deteksi otomatis warga yang tidak terjangkau radius rumah ibadah'],
['📊','Skor Prioritas','Algoritma penilaian prioritas bantuan berdasarkan 7 indikator'],
['📱','Lapor Tanpa Login','Masyarakat dapat melaporkan warga tanpa perlu mendaftar'],
['🏛','Dashboard Eksekutif','Monitoring real-time untuk Wali Kota dan Dinas Sosial'],
]; foreach($fitur as [$icon,$title,$desc]): ?>
<div style="padding:16px;background:#f8fafc;border-radius:8px;border:1px solid var(--clr-border)">
<div style="font-size:1.5rem;margin-bottom:8px"><?= $icon ?></div>
<div style="font-weight:700;font-size:0.875rem;margin-bottom:4px"><?= $title ?></div>
<div style="font-size:0.78rem;color:var(--clr-text-muted);line-height:1.5"><?= $desc ?></div>
</div>
<?php endforeach; ?>
</div>
</div></div>
</div>
</div>
app/views/rumah_ibadah/bantuan.php
+46
View File
@@ -0,0 +1,46 @@
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px">
<div>
<h2 style="font-size:1.2rem;font-weight:700">📦 Histori Bantuan</h2>
<p class="text-muted text-sm"><?= e($ri['nama']) ?> · <?= count($data) ?> catatan penyaluran</p>
</div>
<a href="<?= APP_URL ?>/rumah-ibadah/bantuan/tambah" class="btn btn-success">➕ Catat Bantuan Baru</a>
</div>
<div class="filters-bar">
<input type="text" id="search-b" class="form-control" placeholder="🔍 Cari nama warga, kategori..." style="max-width:280px">
</div>
<div class="card">
<div class="card-body no-pad">
<div class="table-wrap">
<table id="tbl-b">
<thead>
<tr><th>Kode</th><th>Warga</th><th>Kategori</th><th>Jumlah</th><th>Tanggal</th><th>Status</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"><?= 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"><?= formatTanggal($b['tanggal_penyaluran']) ?></td>
<td><span class="badge badge-green">✅ <?= ucfirst($b['status']) ?></span></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
<?php if(empty($data)): ?>
<div class="empty-state">
<div class="empty-state-icon">📭</div>
<h3>Belum ada penyaluran</h3>
<p>Mulai catat penyaluran bantuan pertama Anda</p>
<a href="<?= APP_URL ?>/rumah-ibadah/bantuan/tambah" class="btn btn-success" style="margin-top:12px">➕ Catat Bantuan</a>
</div>
<?php endif; ?>
</div>
</div>
<script>document.addEventListener('DOMContentLoaded',()=>App.initTableSearch('search-b','tbl-b'));</script>
app/views/rumah_ibadah/dashboard.php
+175
View File
@@ -0,0 +1,175 @@
<?php ob_start(); ?>
<script>
document.addEventListener('DOMContentLoaded', async () => {
const ri = <?= json_encode(['lat'=>(float)$ri['lat'],'lng'=>(float)$ri['lng'],'nama'=>$ri['nama'],'radius_meter'=>(int)$ri['radius_meter']]) ?>;
// Fokus ke lokasi rumah ibadah
const map = GISMap.init('ri-dashboard-map', ri.lat, ri.lng, 15);
// Marker rumah ibadah
L.circle([ri.lat, ri.lng], {
radius: ri.radius_meter, fillColor:'#16a34a', fillOpacity:0.08,
color:'#16a34a', weight:2, dashArray:'6,4'
}).addTo(map).bindPopup('<strong>Radius Pelayanan: '+ri.radius_meter+'m</strong>');
GISMap.createRIMarker(ri).bindPopup('<strong>'+ri.nama+'</strong>').addTo(map).openPopup();
// Warga binaan
const wargaData = await App.fetchJSON('<?= APP_URL ?>/rumah-ibadah/api/peta');
if (wargaData?.warga && wargaData.warga.length > 0) {
GISMap.addWargaLayer(wargaData.warga, w => {
window.location.href = '<?= APP_URL ?>/rumah-ibadah/warga/' + w.id;
});
// Zoom ke area RI + warga binaan (sudah fokus ke RI dari init)
// Tambahkan koordinat RI ke bounds agar tetap kelihatan
GISMap._allMarkerBounds.push([ri.lat, ri.lng]);
GISMap.autoFitBounds();
}
// Jika tidak ada warga, tetap fokus ke lokasi RI (sudah di-setView dari init)
// Chart prioritas
const pData = <?= json_encode([
($stats['prioritas_tinggi']??0),
($stats['prioritas_sedang']??0),
(($stats['total_warga']??0)-($stats['prioritas_tinggi']??0)-($stats['prioritas_sedang']??0))
]) ?>;
Charts.donut('chart-prioritas',
['Prioritas Tinggi','Prioritas Sedang','Prioritas Rendah'],
pData, ['#dc2626','#d97706','#16a34a']
);
});
</script>
<?php $extraJs = ob_get_clean(); ?>
<!-- Header RI Info -->
<div style="background:var(--clr-primary);color:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:20px;display:flex;align-items:center;gap:20px">
<div style="font-size:3rem">⛪</div>
<div>
<div style="font-size:1.2rem;font-weight:800"><?= e($ri['nama']) ?></div>
<div style="font-size:0.85rem;color:rgba(255,255,255,0.7)"><?= e($ri['jenis']??'') ?> · <?= e($ri['kelurahan']??'') ?>, <?= e($ri['kecamatan']??'') ?></div>
<div style="font-size:0.8rem;color:rgba(255,255,255,0.6);margin-top:4px">📍 <?= e($ri['alamat']??'') ?> &nbsp;|&nbsp; Radius: <?= number_format($ri['radius_meter']??500) ?>m</div>
</div>
</div>
<!-- Stats -->
<div class="stats-grid">
<div class="stat-card">
<div class="stat-card-icon blue">👥</div>
<div class="stat-card-body">
<div class="stat-card-value"><?= number_format($stats['total_warga']??0) ?></div>
<div class="stat-card-label">Total Warga Binaan</div>
</div>
</div>
<div class="stat-card">
<div class="stat-card-icon red">🔥</div>
<div class="stat-card-body">
<div class="stat-card-value"><?= number_format($stats['prioritas_tinggi']??0) ?></div>
<div class="stat-card-label">Prioritas Tinggi</div>
<div class="stat-card-sub"><a href="<?= APP_URL ?>/rumah-ibadah/prioritas" style="color:var(--clr-primary-l)">Lihat →</a></div>
</div>
</div>
<div class="stat-card">
<div class="stat-card-icon orange">⚠</div>
<div class="stat-card-body">
<div class="stat-card-value"><?= number_format($stats['ekstrem']??0) ?></div>
<div class="stat-card-label">Miskin Ekstrem</div>
</div>
</div>
<div class="stat-card">
<div class="stat-card-icon green">📦</div>
<div class="stat-card-body">
<div class="stat-card-value"><?= number_format($stats['total_bantuan']??0) ?></div>
<div class="stat-card-label">Total Bantuan Disalurkan</div>
<div class="stat-card-sub"><?= number_format($stats['bantuan_bulan_ini']??0) ?> bulan ini</div>
</div>
</div>
</div>
<!-- Dashboard Grid: Peta + Sidebar -->
<div class="dashboard-grid" style="margin-bottom:20px">
<!-- PETA: fokus ke rumah ibadah + radius + warga -->
<div class="card">
<div class="card-header">
<span class="card-icon">🗺</span>
<h3>Peta Wilayah Pelayanan & Warga Binaan</h3>
<div class="card-actions">
<a href="<?= APP_URL ?>/rumah-ibadah/bantuan/tambah" class="btn btn-accent btn-sm">➕ Catat Bantuan</a>
</div>
</div>
<div class="card-body no-pad" style="position:relative">
<div id="ri-dashboard-map" style="height:460px"></div>
<div class="map-legend">
<h4>Legenda</h4>
<div class="map-legend-item"><div class="map-legend-dot legend-dot-ri"></div> Rumah Ibadah Anda</div>
<div class="map-legend-item"><div class="map-legend-dot legend-dot-ekstrem"></div> Miskin Ekstrem</div>
<div class="map-legend-item"><div class="map-legend-dot legend-dot-miskin"></div> Miskin</div>
<div class="map-legend-item"><div class="map-legend-dot legend-dot-rentan"></div> Rentan Miskin</div>
</div>
</div>
</div>
<!-- SIDEBAR -->
<div style="display:flex;flex-direction:column;gap:16px">
<!-- Chart Prioritas -->
<div class="card">
<div class="card-header"><span class="card-icon">📊</span><h3>Distribusi Prioritas</h3></div>
<div class="card-body"><div class="chart-wrap" style="height:180px"><canvas id="chart-prioritas"></canvas></div></div>
</div>
<!-- Warga Prioritas Tinggi -->
<div class="card" style="flex:1">
<div class="card-header">
<span class="card-icon">🔥</span><h3>Warga Prioritas Tinggi</h3>
<div class="card-actions"><a href="<?= APP_URL ?>/rumah-ibadah/prioritas" class="btn btn-ghost btn-sm">Semua</a></div>
</div>
<div class="card-body no-pad" style="max-height:280px;overflow-y:auto">
<?php
$topWarga = array_filter($wargaList, fn($w) => $w['level_prioritas']==='Tinggi');
foreach(array_slice($topWarga,0,8) as $w):
?>
<a href="<?= APP_URL ?>/rumah-ibadah/warga/<?= $w['id'] ?>" style="display:block;text-decoration:none;color:inherit">
<div class="sidebar-panel-item">
<div style="display:flex;justify-content:space-between;align-items:center">
<h4 style="font-size:0.82rem"><?= e($w['nama']) ?></h4>
<span style="font-size:0.78rem;font-weight:700;color:var(--clr-danger)"><?= $w['skor_prioritas'] ?>/100</span>
</div>
<p><?= e($w['status_kemiskinan']) ?> · Tgn: <?= $w['jumlah_tanggungan'] ?></p>
</div>
</a>
<?php endforeach; ?>
<?php if(empty($topWarga)): ?>
<div class="empty-state" style="padding:20px"><p>Tidak ada warga prioritas tinggi</p></div>
<?php endif; ?>
</div>
</div>
</div>
</div>
<!-- Bantuan Terakhir -->
<div class="card">
<div class="card-header">
<span class="card-icon">📦</span><h3>Bantuan Terakhir Disalurkan</h3>
<div class="card-actions"><a href="<?= APP_URL ?>/rumah-ibadah/bantuan" class="btn btn-ghost btn-sm">Histori Lengkap</a></div>
</div>
<div class="card-body no-pad">
<div class="table-wrap">
<table>
<thead><tr><th>Kode</th><th>Warga</th><th>Kategori</th><th>Jumlah</th><th>Tanggal</th></tr></thead>
<tbody>
<?php foreach($bantuanTerakhir 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 text-muted"><?= formatTanggal($b['tanggal_penyaluran']) ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
<?php if(empty($bantuanTerakhir)): ?>
<div class="empty-state" style="padding:24px"><div class="empty-state-icon">📭</div><p>Belum ada bantuan disalurkan</p></div>
<?php endif; ?>
</div>
</div>
app/views/rumah_ibadah/detail_warga.php
+127
View File
@@ -0,0 +1,127 @@
<?php ob_start(); ?>
<script>
document.addEventListener('DOMContentLoaded', () => {
const lat = <?= (float)$warga['lat'] ?>;
const lng = <?= (float)$warga['lng'] ?>;
if(lat && lng) {
const map = L.map('ri-warga-map').setView([lat,lng],16);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{maxZoom:19}).addTo(map);
const color = '<?= warnaMiskin($warga['status_kemiskinan']) ?>';
L.circleMarker([lat,lng],{radius:12,fillColor:color,color:'#fff',weight:3,fillOpacity:0.9})
.bindPopup('<strong><?= addslashes($warga['nama']) ?></strong>').addTo(map).openPopup();
// Rumah ibadah marker
const ri = <?= json_encode(['lat'=>(float)$ri['lat'],'lng'=>(float)$ri['lng'],'nama'=>$ri['nama'],'radius_meter'=>(int)$ri['radius_meter']]) ?>;
GISMap.map = map;
GISMap.createRIMarker(ri).bindPopup(ri.nama).addTo(map);
L.circle([ri.lat,ri.lng],{radius:ri.radius_meter,fillColor:'#16a34a',fillOpacity:0.06,color:'#16a34a',weight:1.5,dashArray:'5,4'}).addTo(map);
}
});
</script>
<?php $extraJs = ob_get_clean(); ?>
<div style="display:flex;align-items:center;gap:12px;margin-bottom:20px">
<a href="<?= APP_URL ?>/rumah-ibadah/warga" class="btn btn-ghost btn-sm">← Kembali</a>
<h2 style="font-size:1.1rem;font-weight:700"><?= e($warga['nama']) ?></h2>
<?php $sc=['Miskin Ekstrem'=>'badge-red','Miskin'=>'badge-orange','Rentan Miskin'=>'badge-yellow']; ?>
<span class="badge <?= $sc[$warga['status_kemiskinan']]??'badge-gray' ?>"><?= e($warga['status_kemiskinan']) ?></span>
<div style="margin-left:auto">
<a href="<?= APP_URL ?>/rumah-ibadah/bantuan/tambah" class="btn btn-success btn-sm">📦 Catat Bantuan</a>
</div>
</div>
<div style="display:grid;grid-template-columns:1fr 320px;gap:20px">
<div style="display:flex;flex-direction:column;gap:16px">
<!-- Skor -->
<div class="card" style="border-left:4px solid <?= ['Tinggi'=>'#dc2626','Sedang'=>'#d97706','Rendah'=>'#16a34a'][$warga['level_prioritas']]??'#6b7280' ?>">
<div class="card-body">
<div style="display:flex;align-items:center;gap:20px">
<div style="text-align:center;min-width:80px">
<div style="font-size:2.5rem;font-weight:900;color:<?= ['Tinggi'=>'#dc2626','Sedang'=>'#d97706','Rendah'=>'#16a34a'][$warga['level_prioritas']]??'#6b7280' ?>"><?= $warga['skor_prioritas'] ?></div>
<div class="text-xs text-muted">Skor Prioritas</div>
</div>
<div style="flex:1">
<div class="priority-bar" style="height:10px;margin-bottom:8px">
<div class="priority-bar-fill <?= strtolower($warga['level_prioritas'])==='tinggi'?'high':(strtolower($warga['level_prioritas'])==='sedang'?'medium':'low') ?>"
style="width:<?= min(100,$warga['skor_prioritas']) ?>%"></div>
</div>
<div style="font-weight:700">Prioritas <?= e($warga['level_prioritas']) ?></div>
<div class="text-sm text-muted"><?= e($warga['status_kemiskinan']) ?></div>
</div>
</div>
</div>
</div>
<!-- Data Pribadi -->
<div class="card">
<div class="card-header"><span class="card-icon">👤</span><h3>Data Pribadi</h3></div>
<div class="card-body">
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:14px">
<?php $items = [
['Nama Lengkap',$warga['nama']],
['NIK',$warga['nik']??'—'],
['Kelurahan',$warga['kelurahan']??'—'],
['Kecamatan',$warga['kecamatan']??'—'],
['Pendidikan',$warga['pendidikan_terakhir']??'—'],
['Pekerjaan',$warga['pekerjaan']??'—'],
['Penghasilan',formatRupiah($warga['penghasilan_bulanan']??0).'/bln'],
['Tanggungan',($warga['jumlah_tanggungan']??0).' orang'],
['Kondisi Rumah',$warga['kondisi_rumah']??'—'],
['Riwayat Penyakit',$warga['riwayat_penyakit']??'—'],
]; foreach($items as [$l,$v]): ?>
<div>
<div class="text-xs text-muted"><?= $l ?></div>
<div style="font-weight:500;font-size:0.875rem;margin-top:2px"><?= e($v) ?></div>
</div>
<?php endforeach; ?>
</div>
<div style="display:flex;gap:8px;margin-top:12px;flex-wrap:wrap">
<?php if($warga['is_lansia']): ?><span class="badge badge-orange">👴 Lansia</span><?php endif; ?>
<?php if($warga['is_disabilitas']): ?><span class="badge badge-blue">♿ Disabilitas</span><?php endif; ?>
</div>
</div>
</div>
<!-- Histori Bantuan -->
<div class="card">
<div class="card-header"><span class="card-icon">📦</span><h3>Histori Bantuan Diterima (<?= count($bantuan) ?>)</h3></div>
<div class="card-body no-pad">
<?php if($bantuan): ?>
<div class="table-wrap">
<table>
<thead><tr><th>Tanggal</th><th>Kategori</th><th>Jumlah</th></tr></thead>
<tbody>
<?php foreach($bantuan as $b): ?>
<tr>
<td class="text-sm"><?= formatTanggal($b['tanggal_penyaluran']) ?></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>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
<?php else: ?>
<div class="empty-state" style="padding:20px"><p>Belum menerima bantuan</p></div>
<?php endif; ?>
</div>
</div>
</div>
<!-- KANAN: Peta -->
<div>
<div class="card">
<div class="card-header"><span class="card-icon">📍</span><h3>Lokasi Warga</h3></div>
<div class="card-body no-pad">
<div id="ri-warga-map" style="height:300px"></div>
</div>
<div class="card-body">
<div class="text-xs text-muted">Koordinat</div>
<div style="font-family:monospace;font-size:0.78rem"><?= $warga['lat'] ?>, <?= $warga['lng'] ?></div>
<?php if($warga['alamat']): ?>
<div class="text-xs text-muted" style="margin-top:8px">Alamat</div>
<div style="font-size:0.8rem"><?= e($warga['alamat']) ?></div>
<?php endif; ?>
</div>
</div>
</div>
</div>
app/views/rumah_ibadah/form_bantuan.php
+133
View File
@@ -0,0 +1,133 @@
<div style="display:flex;align-items:center;gap:12px;margin-bottom:20px">
<a href="<?= APP_URL ?>/rumah-ibadah/bantuan" class="btn btn-ghost btn-sm">← Kembali</a>
<h2 style="font-size:1.1rem;font-weight:700">Catat Penyaluran Bantuan</h2>
</div>
<div style="display:grid;grid-template-columns:1fr 340px;gap:20px">
<div>
<div class="card">
<div class="card-header"><span class="card-icon">📦</span><h3>Form Penyaluran Bantuan</h3></div>
<div class="card-body">
<form method="POST" action="<?= APP_URL ?>/rumah-ibadah/bantuan/store" enctype="multipart/form-data">
<?= csrfField() ?>
<div class="form-group">
<label class="form-label">Warga Penerima <span class="required">*</span></label>
<select name="id_warga" id="sel-warga" class="form-control" required onchange="showWargaInfo(this)">
<option value="">— Pilih Warga —</option>
<?php foreach($wargaList as $w): ?>
<option value="<?= $w['id'] ?>"
data-status="<?= e($w['status_kemiskinan']) ?>"
data-level="<?= e($w['level_prioritas']) ?>">
<?= e($w['nama']) ?> [<?= e($w['level_prioritas']) ?>]
</option>
<?php endforeach; ?>
</select>
</div>
<!-- Info warga terpilih -->
<div id="warga-info" style="display:none;margin-bottom:16px;padding:12px;background:#eff6ff;border-radius:8px;border:1px solid #bfdbfe">
<div style="font-size:0.8rem;font-weight:600;color:var(--clr-primary)">ℹ️ Info Warga Terpilih</div>
<div style="font-size:0.82rem;margin-top:4px">
Status: <span id="info-status" style="font-weight:700"></span> ·
Prioritas: <span id="info-level" style="font-weight:700"></span>
</div>
</div>
<div class="form-row cols-2">
<div class="form-group">
<label class="form-label">Kategori Bantuan <span class="required">*</span></label>
<select name="id_kategori_bantuan" class="form-control" required onchange="setSatuan(this)">
<option value="">— Pilih Kategori —</option>
<?php foreach($kategori as $k): ?>
<option value="<?= $k['id'] ?>" data-satuan="<?= e($k['satuan']??'paket') ?>"><?= e($k['nama']) ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<label class="form-label">Tanggal Penyaluran <span class="required">*</span></label>
<input type="date" name="tanggal_penyaluran" class="form-control" value="<?= date('Y-m-d') ?>" required>
</div>
</div>
<div class="form-row cols-2">
<div class="form-group">
<label class="form-label">Jumlah <span class="required">*</span></label>
<input type="number" name="jumlah" id="inp-jumlah" class="form-control" value="1" min="0.01" step="0.01" required>
</div>
<div class="form-group">
<label class="form-label">Satuan</label>
<input type="text" name="satuan" id="inp-satuan" class="form-control" value="paket" placeholder="paket/kg/rupiah">
</div>
</div>
<div class="form-group">
<label class="form-label">Deskripsi Bantuan</label>
<textarea name="deskripsi" class="form-control" rows="3" placeholder="Contoh: Sembako bulanan terdiri dari beras 5kg, minyak, gula..."></textarea>
</div>
<div class="form-group">
<label class="form-label">Foto Bukti Penyaluran</label>
<input type="file" name="foto_bukti" class="form-control" accept="image/*">
<div class="form-hint">Upload foto saat penyerahan bantuan sebagai bukti dokumentasi</div>
</div>
<div style="display:flex;justify-content:flex-end;gap:12px;margin-top:8px">
<a href="<?= APP_URL ?>/rumah-ibadah/bantuan" class="btn btn-ghost">Batal</a>
<button type="submit" class="btn btn-success" style="padding:10px 24px">✅ Simpan Penyaluran</button>
</div>
</form>
</div>
</div>
</div>
<!-- SIDEBAR: Daftar warga prioritas -->
<div>
<div class="card" style="position:sticky;top:80px">
<div class="card-header"><span class="card-icon">🔥</span><h3>Warga Prioritas Tinggi</h3></div>
<div class="card-body no-pad" style="max-height:500px;overflow-y:auto">
<?php
$topWarga = array_filter($wargaList, fn($w) => $w['level_prioritas']==='Tinggi');
foreach($topWarga as $w):
?>
<div class="sidebar-panel-item" onclick="document.getElementById('sel-warga').value='<?= $w['id'] ?>';showWargaInfo(document.getElementById('sel-warga'))" style="cursor:pointer">
<div style="display:flex;justify-content:space-between;align-items:center">
<h4><?= e($w['nama']) ?></h4>
<span style="font-weight:700;font-size:0.78rem;color:var(--clr-danger)"><?= isset($w['skor_prioritas']) ? $w['skor_prioritas'] . '/100' : 'N/A' ?></span>
</div>
<p><?= e($w['status_kemiskinan']) ?></p>
</div>
<?php endforeach; ?>
<?php if(empty($topWarga)): ?>
<div class="empty-state" style="padding:20px"><p>Tidak ada prioritas tinggi</p></div>
<?php endif; ?>
</div>
</div>
</div>
</div>
<script>
function showWargaInfo(sel) {
const opt = sel.options[sel.selectedIndex];
const info = document.getElementById('warga-info');
if(sel.value) {
info.style.display='block';
document.getElementById('info-status').textContent = opt.dataset.status||'—';
document.getElementById('info-level').textContent = opt.dataset.level||'—';
} else {
info.style.display='none';
}
}
function setSatuan(sel) {
const opt = sel.options[sel.selectedIndex];
const satuan = opt.dataset.satuan||'paket';
document.getElementById('inp-satuan').value = satuan;
if(satuan==='rupiah'){
document.getElementById('inp-jumlah').step='1000';
document.getElementById('inp-jumlah').placeholder='mis: 300000';
} else {
document.getElementById('inp-jumlah').step='0.01';
document.getElementById('inp-jumlah').placeholder='';
}
}
</script>
app/views/rumah_ibadah/prioritas.php
+45
View File
@@ -0,0 +1,45 @@
<div style="margin-bottom:20px">
<h2 style="font-size:1.2rem;font-weight:700">🔥 Daftar Prioritas Bantuan</h2>
<p class="text-muted text-sm"><?= e($ri['nama']) ?> · Diurutkan berdasarkan skor prioritas tertinggi</p>
</div>
<div class="card">
<div class="card-body no-pad">
<div class="table-wrap">
<table>
<thead><tr><th>Rank</th><th>Nama</th><th>Skor</th><th>Status</th><th>Penghasilan</th><th>Tanggungan</th><th>Bantuan Terakhir</th><th>Total</th><th>Aksi</th></tr></thead>
<tbody>
<?php foreach($data as $i=>$w): ?>
<tr>
<td>
<div style="width:28px;height:28px;border-radius:50%;background:<?= $i<3?['#dc2626','#d97706','#0284c7'][$i]:'#e2e8f0' ?>;color:<?= $i<3?'#fff':'var(--clr-text)' ?>;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:0.8rem"><?= $i+1 ?></div>
</td>
<td>
<div style="font-weight:600"><?= e($w['nama']) ?></div>
<?php if($w['is_lansia']): ?><span class="badge badge-orange" style="font-size:0.62rem">Lansia</span><?php endif; ?>
<?php if($w['is_disabilitas']): ?><span class="badge badge-blue" style="font-size:0.62rem">Disabilitas</span><?php endif; ?>
</td>
<td>
<div style="font-size:1.2rem;font-weight:800;color:<?= ['Tinggi'=>'#dc2626','Sedang'=>'#d97706','Rendah'=>'#16a34a'][$w['level_prioritas']]??'#6b7280' ?>"><?= $w['skor_prioritas'] ?></div>
<?php $pc=['Tinggi'=>'badge-red','Sedang'=>'badge-yellow','Rendah'=>'badge-green']; ?>
<span class="badge <?= $pc[$w['level_prioritas']]??'badge-gray' ?>" style="font-size:0.62rem"><?= $w['level_prioritas'] ?></span>
</td>
<td><?php $sc=['Miskin Ekstrem'=>'badge-red','Miskin'=>'badge-orange','Rentan Miskin'=>'badge-yellow']; ?>
<span class="badge <?= $sc[$w['status_kemiskinan']]??'badge-gray' ?>"><?= e($w['status_kemiskinan']) ?></span></td>
<td class="text-sm"><?= formatRupiah($w['penghasilan_bulanan']??0) ?>/bln</td>
<td class="text-sm text-center"><?= $w['jumlah_tanggungan'] ?> orang</td>
<td class="text-xs text-muted"><?= $w['bantuan_terakhir'] ? formatTanggal($w['bantuan_terakhir']) : '<span style="color:#dc2626;font-weight:600">Belum pernah</span>' ?></td>
<td class="text-sm text-center"><?= number_format($w['jml_bantuan']) ?>×</td>
<td>
<a href="<?= APP_URL ?>/rumah-ibadah/warga/<?= $w['id'] ?>" class="btn btn-ghost btn-sm">Detail</a>
<a href="<?= APP_URL ?>/rumah-ibadah/bantuan/tambah" class="btn btn-success btn-sm">📦 Bantu</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
<?php if(empty($data)): ?>
<div class="empty-state"><div class="empty-state-icon">👥</div><h3>Tidak ada warga binaan</h3></div>
<?php endif; ?>
</div>
</div>
app/views/rumah_ibadah/warga.php
+62
View File
@@ -0,0 +1,62 @@
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px">
<div>
<h2 style="font-size:1.2rem;font-weight:700">👥 Daftar Warga Binaan</h2>
<p class="text-muted text-sm"><?= e($ri['nama']) ?> &middot; <?= count($data) ?> warga</p>
</div>
</div>
<div class="tabs">
<?php foreach(['semua'=>'Semua','Tinggi'=>'🔥 Prioritas Tinggi','Sedang'=>'⚡ Sedang','Rendah'=>'✅ Rendah'] as $l=>$label): ?>
<a href="?level=<?= $l ?>" class="tab-btn <?= $level===$l?'active':'' ?>"><?= $label ?></a>
<?php endforeach; ?>
</div>
<div class="filters-bar">
<input type="text" id="search-w" class="form-control" placeholder="🔍 Cari nama warga..." style="max-width:280px">
</div>
<div class="card">
<div class="card-body no-pad">
<div class="table-wrap">
<table id="tbl-w">
<thead>
<tr><th>#</th><th>Nama</th><th>Status Kemiskinan</th><th>Prioritas</th><th>Penghasilan</th><th>Tanggungan</th><th>Aksi</th></tr>
</thead>
<tbody>
<?php foreach($data as $i=>$w): ?>
<tr>
<td class="text-xs text-muted"><?= $i+1 ?></td>
<td>
<div style="font-weight:600"><?= e($w['nama']) ?></div>
<div class="text-xs text-muted"><?= e($w['kelurahan']??'') ?></div>
</td>
<td>
<?php $sc=['Miskin Ekstrem'=>'badge-red','Miskin'=>'badge-orange','Rentan Miskin'=>'badge-yellow']; ?>
<span class="badge <?= $sc[$w['status_kemiskinan']]??'badge-gray' ?>"><?= e($w['status_kemiskinan']) ?></span>
</td>
<td>
<?php $pc=['Tinggi'=>'badge-red','Sedang'=>'badge-yellow','Rendah'=>'badge-green']; ?>
<span class="badge <?= $pc[$w['level_prioritas']]??'badge-gray' ?>"><?= e($w['level_prioritas']) ?></span>
<div class="text-xs text-muted"><?= $w['skor_prioritas'] ?>/100</div>
</td>
<td class="text-sm"><?= formatRupiah($w['penghasilan_bulanan']??0) ?></td>
<td class="text-sm text-center"><?= $w['jumlah_tanggungan'] ?> orang</td>
<td>
<a href="<?= APP_URL ?>/rumah-ibadah/warga/<?= $w['id'] ?>" class="btn btn-ghost btn-sm">Detail</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
<?php if(empty($data)): ?>
<div class="empty-state">
<div class="empty-state-icon">👥</div>
<h3>Tidak ada warga binaan</h3>
<p>Warga binaan akan otomatis ditugaskan berdasarkan radius pelayanan</p>
</div>
<?php endif; ?>
</div>
</div>
<script>document.addEventListener('DOMContentLoaded',()=>App.initTableSearch('search-w','tbl-w'));</script>
app/views/verifikator/dashboard.php
+141
View File
@@ -0,0 +1,141 @@
<?php ob_start(); ?>
<script>
document.addEventListener('DOMContentLoaded', async () => {
const map = GISMap.init('verif-map', <?= MAP_DEFAULT_LAT ?>, <?= MAP_DEFAULT_LNG ?>, 14);
const laporan = <?= json_encode(array_map(fn($l) => [
'lat' => (float)$l['lat'], 'lng' => (float)$l['lng'],
'nama_warga' => $l['nama_warga'], 'kode_laporan' => $l['kode_laporan'],
'status' => $l['status']
], array_filter($laporanTerbaru, fn($l) => $l['lat'] && $l['lng']))) ?>;
laporan.forEach(l => {
const color = l.status === 'terverifikasi' ? '#16a34a' : l.status === 'ditolak' ? '#dc2626' : '#0284c7';
L.circleMarker([l.lat, l.lng], {radius:9,fillColor:color,color:'#fff',weight:2,fillOpacity:0.9})
.bindPopup(`<strong>${l.nama_warga}</strong><br><code>${l.kode_laporan}</code>`)
.addTo(map);
GISMap._allMarkerBounds.push([l.lat, l.lng]);
});
GISMap.autoFitBounds(laporan.length === 0);
const statsData = await App.fetchJSON('<?= APP_URL ?>/verifikator/api/stats');
if (statsData?.data) {
const d = statsData.data;
Charts.donut('chart-status',
['Menunggu', 'Diproses', 'Terverifikasi', 'Ditolak'],
[d.menunggu, d.diproses, d.terverifikasi, d.ditolak],
['#d97706','#0284c7','#16a34a','#dc2626']
);
}
});
</script>
<?php $extraJs = ob_get_clean(); ?>
<!-- Stats -->
<div class="stats-grid">
<div class="stat-card">
<div class="stat-card-icon orange">📋</div>
<div class="stat-card-body">
<div class="stat-card-value"><?= number_format($stats['laporan_menunggu'] ?? 0) ?></div>
<div class="stat-card-label">Laporan Menunggu</div>
<div class="stat-card-sub"><a href="<?= APP_URL ?>/verifikator/laporan?status=menunggu" style="color:var(--clr-primary-l)">Lihat semua →</a></div>
</div>
</div>
<div class="stat-card">
<div class="stat-card-icon blue">🔄</div>
<div class="stat-card-body">
<div class="stat-card-value"><?= number_format($stats['laporan_diproses'] ?? 0) ?></div>
<div class="stat-card-label">Sedang Diproses</div>
</div>
</div>
<div class="stat-card">
<div class="stat-card-icon green">✅</div>
<div class="stat-card-body">
<div class="stat-card-value"><?= number_format($stats['total_warga'] ?? 0) ?></div>
<div class="stat-card-label">Warga Terverifikasi</div>
</div>
</div>
<div class="stat-card">
<div class="stat-card-icon red">🔥</div>
<div class="stat-card-body">
<div class="stat-card-value"><?= number_format($stats['prioritas_tinggi'] ?? 0) ?></div>
<div class="stat-card-label">Prioritas Tinggi</div>
</div>
</div>
<div class="stat-card">
<div class="stat-card-icon purple">⚠️</div>
<div class="stat-card-body">
<div class="stat-card-value"><?= number_format($stats['blind_spot'] ?? 0) ?></div>
<div class="stat-card-label">Blind Spot</div>
</div>
</div>
</div>
<!-- Grid: Peta + Chart -->
<div class="dashboard-grid" style="margin-bottom:20px">
<!-- PETA -->
<div class="card">
<div class="card-header"><span class="card-icon">🗺</span><h3>Peta Laporan Kelurahan Saya</h3></div>
<div class="card-body no-pad">
<div id="verif-map" style="height:380px"></div>
</div>
</div>
<!-- SIDEBAR: Donut + Laporan List -->
<div style="display:flex;flex-direction:column;gap:16px">
<div class="card">
<div class="card-header"><span class="card-icon">📊</span><h3>Status Laporan</h3></div>
<div class="card-body"><div class="chart-wrap" style="height:180px"><canvas id="chart-status"></canvas></div></div>
</div>
<div class="card" style="flex:1">
<div class="card-header">
<span class="card-icon">📋</span><h3>Laporan Terbaru</h3>
<div class="card-actions"><a href="<?= APP_URL ?>/verifikator/laporan" class="btn btn-ghost btn-sm">Semua</a></div>
</div>
<div class="card-body no-pad" style="max-height:300px;overflow-y:auto">
<?php foreach ($laporanTerbaru as $l): ?>
<a href="<?= APP_URL ?>/verifikator/laporan/<?= $l['id'] ?>" style="display:block;text-decoration:none;color:inherit">
<div class="sidebar-panel-item">
<div style="display:flex;justify-content:space-between;align-items:center">
<h4><?= e($l['nama_warga']) ?></h4>
<?php
$badge = match($l['status']) {
'menunggu' => 'badge-yellow', 'diproses' => 'badge-blue',
'terverifikasi' => 'badge-green', 'ditolak' => 'badge-red', default => 'badge-gray'
};
$label = match($l['status']) {
'menunggu'=>'Menunggu','diproses'=>'Diproses',
'terverifikasi'=>'Terverifikasi','ditolak'=>'Ditolak', default=>$l['status']
};
?>
<span class="badge <?= $badge ?>"><?= $label ?></span>
</div>
<p><?= e($l['kode_laporan']) ?> · <?= formatTanggal($l['created_at']) ?></p>
</div>
</a>
<?php endforeach; ?>
<?php if (empty($laporanTerbaru)): ?>
<div class="empty-state" style="padding:24px">
<div class="empty-state-icon">📭</div>
<p>Belum ada laporan masuk</p>
</div>
<?php endif; ?>
</div>
</div>
</div>
</div>
<!-- Quick Actions -->
<div class="card">
<div class="card-header"><span class="card-icon">⚡</span><h3>Aksi Cepat</h3></div>
<div class="card-body">
<div style="display:flex;gap:12px;flex-wrap:wrap">
<a href="<?= APP_URL ?>/verifikator/laporan?status=menunggu" class="btn btn-accent">
📋 Verifikasi Laporan (<?= $stats['laporan_menunggu'] ?? 0 ?>)
</a>
<a href="<?= APP_URL ?>/verifikator/warga/tambah" class="btn btn-primary">➕ Tambah Data Warga</a>
<a href="<?= APP_URL ?>/verifikator/warga?level=Tinggi" class="btn btn-danger">🔥 Warga Prioritas Tinggi</a>
</div>
</div>
</div>
app/views/verifikator/detail_laporan.php
+179
View File
@@ -0,0 +1,179 @@
<?php ob_start(); ?>
<script>
document.addEventListener('DOMContentLoaded', () => {
const lat = <?= (float)$laporan['lat'] ?>;
const lng = <?= (float)$laporan['lng'] ?>;
if (lat && lng) {
const map = L.map('laporan-map').setView([lat, lng], 16);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{maxZoom:19}).addTo(map);
L.marker([lat, lng]).bindPopup('<strong><?= addslashes($laporan['nama_warga']) ?></strong>').addTo(map).openPopup();
}
});
</script>
<?php $extraJs = ob_get_clean(); ?>
<div style="display:flex;align-items:center;gap:12px;margin-bottom:20px">
<a href="<?= APP_URL ?>/verifikator/laporan" class="btn btn-ghost btn-sm">← Kembali</a>
<h2 style="font-size:1.1rem;font-weight:700">Detail Laporan: <?= e($laporan['kode_laporan']) ?></h2>
<?php $badge = ['menunggu'=>'badge-yellow','diproses'=>'badge-blue','terverifikasi'=>'badge-green','ditolak'=>'badge-red']; ?>
<span class="badge <?= $badge[$laporan['status']] ?? 'badge-gray' ?>" style="font-size:0.8rem"><?= ucfirst($laporan['status']) ?></span>
</div>
<div style="display:grid;grid-template-columns:1fr 380px;gap:20px">
<!-- KIRI: Info Detail -->
<div style="display:flex;flex-direction:column;gap:16px">
<!-- Info Warga Dilaporkan -->
<div class="card">
<div class="card-header"><span class="card-icon">👤</span><h3>Data Warga Dilaporkan</h3></div>
<div class="card-body">
<div class="form-row cols-2">
<div>
<div class="text-xs text-muted" style="margin-bottom:2px">Nama Warga</div>
<div style="font-weight:700;font-size:1.05rem"><?= e($laporan['nama_warga']) ?></div>
</div>
<div>
<div class="text-xs text-muted" style="margin-bottom:2px">Wilayah</div>
<div style="font-weight:500"><?= e($laporan['kelurahan'] ?? '') ?>, <?= e($laporan['kecamatan'] ?? '') ?></div>
</div>
</div>
<hr class="divider">
<div class="form-group">
<div class="text-xs text-muted">Alamat Lengkap</div>
<div style="font-weight:500"><?= e($laporan['alamat_warga']) ?></div>
</div>
<div class="form-row cols-2">
<div>
<div class="text-xs text-muted">Koordinat</div>
<div class="text-sm" style="font-family:monospace"><?= $laporan['lat'] ?>, <?= $laporan['lng'] ?></div>
</div>
<div>
<div class="text-xs text-muted">Tanggal Laporan</div>
<div class="text-sm"><?= formatTanggal($laporan['created_at'], true) ?></div>
</div>
</div>
<?php if ($laporan['deskripsi']): ?>
<hr class="divider">
<div class="form-group">
<div class="text-xs text-muted">Deskripsi Kondisi</div>
<div style="font-size:0.875rem;line-height:1.6;background:#f8fafc;padding:12px;border-radius:6px;margin-top:4px"><?= nl2br(e($laporan['deskripsi'])) ?></div>
</div>
<?php endif; ?>
</div>
</div>
<!-- Info Pelapor -->
<div class="card">
<div class="card-header"><span class="card-icon">📝</span><h3>Data Pelapor</h3></div>
<div class="card-body">
<div class="form-row cols-2">
<div>
<div class="text-xs text-muted">Nama Pelapor</div>
<div style="font-weight:600"><?= e($laporan['nama_pelapor']) ?></div>
</div>
<div>
<div class="text-xs text-muted">No HP</div>
<div><?= e($laporan['no_hp_pelapor'] ?? '—') ?></div>
</div>
</div>
</div>
</div>
<!-- Foto -->
<?php if ($laporan['foto']): ?>
<div class="card">
<div class="card-header"><span class="card-icon">📷</span><h3>Foto Bukti</h3></div>
<div class="card-body">
<img src="<?= uploadUrl($laporan['foto']) ?>" style="max-width:100%;border-radius:8px;border:1px solid var(--clr-border)">
</div>
</div>
<?php endif; ?>
<!-- Catatan Verifikator -->
<?php if ($laporan['catatan_verifikator']): ?>
<div class="card">
<div class="card-header"><span class="card-icon">💬</span><h3>Catatan Verifikator</h3></div>
<div class="card-body">
<div style="background:#f8fafc;padding:12px;border-radius:6px;font-size:0.875rem"><?= nl2br(e($laporan['catatan_verifikator'])) ?></div>
<?php if ($laporan['tanggal_verifikasi']): ?>
<div class="text-xs text-muted" style="margin-top:8px">Diverifikasi: <?= formatTanggal($laporan['tanggal_verifikasi'], true) ?></div>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
</div>
<!-- KANAN: Peta + Aksi -->
<div style="display:flex;flex-direction:column;gap:16px">
<!-- PETA LOKASI -->
<div class="card">
<div class="card-header"><span class="card-icon">📍</span><h3>Lokasi Warga</h3></div>
<div class="card-body no-pad">
<div id="laporan-map" style="height:240px"></div>
</div>
</div>
<!-- PANEL AKSI VERIFIKASI -->
<?php if (in_array($laporan['status'], ['menunggu','diproses'])): ?>
<div class="card" style="border:2px solid var(--clr-primary-l)">
<div class="card-header" style="background:var(--clr-primary);color:#fff">
<span class="card-icon">⚡</span>
<h3 style="color:#fff">Tindakan Verifikasi</h3>
</div>
<div class="card-body">
<!-- Tandai Diproses -->
<?php if ($laporan['status'] === 'menunggu'): ?>
<form method="POST" action="<?= APP_URL ?>/verifikator/laporan/<?= $laporan['id'] ?>/proses" style="margin-bottom:12px">
<?= csrfField() ?>
<input type="hidden" name="aksi" value="proses">
<div class="form-group">
<label class="form-label">Catatan (opsional)</label>
<textarea name="catatan" class="form-control" rows="2" placeholder="Catatan survei awal..."></textarea>
</div>
<button type="submit" class="btn btn-primary w-full">🔄 Tandai Sedang Diproses</button>
</form>
<hr class="divider">
<?php endif; ?>
<!-- VERIFIKASI - Buat data warga -->
<form method="POST" action="<?= APP_URL ?>/verifikator/laporan/<?= $laporan['id'] ?>/proses" style="margin-bottom:12px">
<?= csrfField() ?>
<input type="hidden" name="aksi" value="verifikasi">
<div class="form-group">
<label class="form-label">Catatan Verifikasi</label>
<textarea name="catatan" class="form-control" rows="2" placeholder="Hasil survei lapangan..."></textarea>
</div>
<button type="submit" class="btn btn-success w-full">✅ Verifikasi & Buat Data Warga</button>
<div class="form-hint" style="margin-top:4px">Akan otomatis membuat data warga miskin dan menetapkan rumah ibadah penanggung jawab</div>
</form>
<!-- TOLAK -->
<form method="POST" action="<?= APP_URL ?>/verifikator/laporan/<?= $laporan['id'] ?>/proses">
<?= csrfField() ?>
<input type="hidden" name="aksi" value="tolak">
<div class="form-group">
<label class="form-label">Alasan Penolakan <span class="required">*</span></label>
<textarea name="catatan" class="form-control" rows="2" placeholder="Jelaskan alasan penolakan..." required></textarea>
</div>
<button type="submit" class="btn btn-danger w-full" onclick="return confirm('Tolak laporan ini?')">❌ Tolak Laporan</button>
</form>
</div>
</div>
<?php else: ?>
<div class="card">
<div class="card-body" style="text-align:center;padding:28px">
<?php if ($laporan['status'] === 'terverifikasi'): ?>
<div style="font-size:2.5rem">✅</div>
<div style="font-weight:700;color:var(--clr-success);margin-top:8px">Laporan Terverifikasi</div>
<div class="text-sm text-muted" style="margin-top:4px">Data warga telah ditambahkan ke sistem</div>
<a href="<?= APP_URL ?>/verifikator/warga" class="btn btn-success" style="margin-top:12px">Lihat Data Warga</a>
<?php else: ?>
<div style="font-size:2.5rem">❌</div>
<div style="font-weight:700;color:var(--clr-danger);margin-top:8px">Laporan Ditolak</div>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
</div>
</div>
app/views/verifikator/detail_warga.php
+277
View File
@@ -0,0 +1,277 @@
<?php $umur = $warga['tanggal_lahir'] ? hitungUmur($warga['tanggal_lahir']) : 0; ?>
<?php ob_start(); ?>
<script>
document.addEventListener('DOMContentLoaded', () => {
const lat = <?= (float)$warga['lat'] ?>;
const lng = <?= (float)$warga['lng'] ?>;
if (lat && lng) {
const map = L.map('warga-detail-map').setView([lat,lng],16);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{maxZoom:19}).addTo(map);
const color = '<?= warnaMiskin($warga['status_kemiskinan']) ?>';
L.circleMarker([lat,lng],{radius:12,fillColor:color,color:'#fff',weight:3,fillOpacity:0.9})
.bindPopup('<strong><?= addslashes($warga['nama']) ?></strong>').addTo(map).openPopup();
<?php if($warga['ri_lat'] && $warga['ri_lng']): ?>
GISMap.map = map;
GISMap.createRIMarker({lat:<?= (float)$warga['ri_lat'] ?>,lng:<?= (float)$warga['ri_lng'] ?>})
.bindPopup('<?= addslashes($warga['rumah_ibadah_nama']??'Rumah Ibadah') ?>').addTo(map);
<?php endif; ?>
}
});
</script>
<?php $extraJs = ob_get_clean(); ?>
<div style="display:flex;align-items:center;gap:12px;margin-bottom:20px">
<a href="<?= APP_URL ?>/verifikator/warga" class="btn btn-ghost btn-sm">← Kembali</a>
<h2 style="font-size:1.1rem;font-weight:700"><?= e($warga['nama']) ?></h2>
<?php $sc=['Miskin Ekstrem'=>'badge-red','Miskin'=>'badge-orange','Rentan Miskin'=>'badge-yellow']; ?>
<span class="badge <?= $sc[$warga['status_kemiskinan']]??'badge-gray' ?>"><?= e($warga['status_kemiskinan']) ?></span>
<?php if($warga['is_blind_spot']): ?><span class="badge badge-purple">⚠ Blind Spot</span><?php endif; ?>
<div style="margin-left:auto;display:flex;gap:8px">
<button class="btn btn-primary btn-sm" onclick="App.showModal('modal-edit')">✏️ Edit Data</button>
</div>
</div>
<div style="display:grid;grid-template-columns:1fr 340px;gap:20px">
<!-- KIRI -->
<div style="display:flex;flex-direction:column;gap:16px">
<!-- Skor Prioritas Card -->
<div class="card" style="border-left:4px solid <?= ['Tinggi'=>'#dc2626','Sedang'=>'#d97706','Rendah'=>'#16a34a'][$warga['level_prioritas']]??'#6b7280' ?>">
<div class="card-body">
<div style="display:flex;align-items:center;gap:20px">
<div style="text-align:center;min-width:90px">
<div style="font-size:2.5rem;font-weight:900;color:<?= ['Tinggi'=>'#dc2626','Sedang'=>'#d97706','Rendah'=>'#16a34a'][$warga['level_prioritas']]??'#6b7280' ?>"><?= $warga['skor_prioritas'] ?></div>
<div class="text-xs text-muted">Skor / 100</div>
</div>
<div style="flex:1">
<div class="priority-bar" style="height:10px;margin-bottom:8px">
<div class="priority-bar-fill <?= strtolower($warga['level_prioritas'])==='tinggi'?'high':(strtolower($warga['level_prioritas'])==='sedang'?'medium':'low') ?>"
style="width:<?= min(100,$warga['skor_prioritas']) ?>%"></div>
</div>
<div style="font-size:1rem;font-weight:700">Prioritas <?= e($warga['level_prioritas']) ?></div>
<div class="text-sm text-muted">Diperbarui otomatis berdasarkan data sosial ekonomi</div>
</div>
</div>
</div>
</div>
<!-- Data Pribadi -->
<div class="card">
<div class="card-header"><span class="card-icon">👤</span><h3>Data Pribadi</h3></div>
<div class="card-body">
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px">
<?php $items = [
['NIK', $warga['nik']??'—'],
['Tempat Lahir', $warga['tempat_lahir']??'—'],
['Tanggal Lahir', $warga['tanggal_lahir'] ? formatTanggal($warga['tanggal_lahir'])." ($umur thn)" : '—'],
['Jenis Kelamin', $warga['jenis_kelamin']==='L'?'Laki-laki':'Perempuan'],
['Agama', $warga['agama']??'—'],
['No HP', $warga['no_hp']??'—'],
]; foreach($items as [$l,$v]): ?>
<div>
<div class="text-xs text-muted"><?= $l ?></div>
<div style="font-weight:500;font-size:0.875rem;margin-top:2px"><?= e($v) ?></div>
</div>
<?php endforeach; ?>
</div>
<hr class="divider">
<div>
<div class="text-xs text-muted">Alamat</div>
<div style="font-weight:500;margin-top:2px"><?= e($warga['alamat']) ?></div>
<div class="text-xs text-muted" style="margin-top:2px"><?= e($warga['kelurahan']) ?>, <?= e($warga['kecamatan']) ?></div>
</div>
<?php if($warga['foto']): ?>
<hr class="divider">
<img src="<?= uploadUrl($warga['foto']) ?>" style="width:100px;height:100px;object-fit:cover;border-radius:8px;border:1px solid var(--clr-border)">
<?php endif; ?>
</div>
</div>
<!-- Sosial Ekonomi -->
<div class="card">
<div class="card-header"><span class="card-icon">💼</span><h3>Data Sosial Ekonomi</h3></div>
<div class="card-body">
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px">
<?php $items2 = [
['Pendidikan', $warga['pendidikan_terakhir']??'—'],
['Pekerjaan', $warga['pekerjaan']??'—'],
['Penghasilan', formatRupiah($warga['penghasilan_bulanan']??0).'/bln'],
['Tanggungan', ($warga['jumlah_tanggungan']??0).' orang'],
['Kondisi Rumah', $warga['kondisi_rumah']??'—'],
['Riwayat Penyakit', $warga['riwayat_penyakit']??'—'],
]; foreach($items2 as [$l,$v]): ?>
<div>
<div class="text-xs text-muted"><?= $l ?></div>
<div style="font-weight:500;font-size:0.875rem;margin-top:2px"><?= e($v) ?></div>
</div>
<?php endforeach; ?>
</div>
<hr class="divider">
<div style="display:flex;gap:12px;flex-wrap:wrap">
<?php if($warga['is_lansia']): ?>
<span class="badge badge-orange" style="font-size:0.8rem;padding:4px 10px">👴 Lansia</span>
<?php endif; ?>
<?php if($warga['is_disabilitas']): ?>
<span class="badge badge-blue" style="font-size:0.8rem;padding:4px 10px">♿ Disabilitas: <?= e($warga['disabilitas_jenis']??'') ?></span>
<?php endif; ?>
<?php if($warga['is_blind_spot']): ?>
<span class="badge badge-purple" style="font-size:0.8rem;padding:4px 10px">⚠ Blind Spot</span>
<?php endif; ?>
</div>
</div>
</div>
<!-- Histori Bantuan -->
<div class="card">
<div class="card-header"><span class="card-icon">📦</span><h3>Histori Bantuan (<?= count($bantuan) ?>)</h3></div>
<div class="card-body no-pad">
<?php if($bantuan): ?>
<div class="table-wrap">
<table>
<thead><tr><th>Tanggal</th><th>Kategori</th><th>Jumlah</th><th>Rumah Ibadah</th></tr></thead>
<tbody>
<?php foreach($bantuan as $b): ?>
<tr>
<td class="text-sm"><?= formatTanggal($b['tanggal_penyaluran']) ?></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>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
<?php else: ?>
<div class="empty-state" style="padding:24px"><div class="empty-state-icon">📭</div><p>Belum ada bantuan</p></div>
<?php endif; ?>
</div>
</div>
</div>
<!-- KANAN: Peta + RI Info -->
<div style="display:flex;flex-direction:column;gap:16px">
<div class="card">
<div class="card-header"><span class="card-icon">📍</span><h3>Lokasi</h3></div>
<div class="card-body no-pad">
<div id="warga-detail-map" style="height:260px"></div>
</div>
<div class="card-body">
<div class="text-xs text-muted">Koordinat</div>
<div style="font-family:monospace;font-size:0.8rem"><?= $warga['lat'] ?>, <?= $warga['lng'] ?></div>
</div>
</div>
<?php if($warga['rumah_ibadah_nama']): ?>
<div class="card" style="border:1px solid #bbf7d0">
<div class="card-header" style="background:#f0fdf4">
<span class="card-icon">⛪</span><h3>Rumah Ibadah Penanggung Jawab</h3>
</div>
<div class="card-body">
<div style="font-weight:700;font-size:1rem;color:var(--clr-success)"><?= e($warga['rumah_ibadah_nama']) ?></div>
<div class="text-sm text-muted" style="margin-top:4px">Ditetapkan otomatis berdasarkan Haversine Formula</div>
</div>
</div>
<?php endif; ?>
<div class="card">
<div class="card-header"><span class="card-icon">ℹ️</span><h3>Info Verifikasi</h3></div>
<div class="card-body">
<div class="text-xs text-muted">Tanggal Verifikasi</div>
<div class="text-sm"><?= $warga['tanggal_verifikasi'] ? formatTanggal($warga['tanggal_verifikasi']) : '—' ?></div>
</div>
</div>
</div>
</div>
<!-- MODAL EDIT (sederhana) -->
<div class="modal-overlay" id="modal-edit">
<div class="modal" style="max-width:680px">
<div class="modal-header">
<h3>✏️ Edit Data Warga</h3>
<button class="modal-close" onclick="App.hideModal('modal-edit')">✕</button>
</div>
<form method="POST" action="<?= APP_URL ?>/verifikator/warga/<?= $warga['id'] ?>/update" enctype="multipart/form-data">
<?= csrfField() ?>
<div class="modal-body">
<div class="form-row cols-2">
<div class="form-group"><label class="form-label">Nama <span class="required">*</span></label>
<input type="text" name="nama" class="form-control" value="<?= e($warga['nama']) ?>" required></div>
<div class="form-group"><label class="form-label">NIK</label>
<input type="text" name="nik" class="form-control" value="<?= e($warga['nik']??'') ?>" maxlength="16"></div>
</div>
<div class="form-row cols-2">
<div class="form-group"><label class="form-label">Tempat Lahir</label>
<input type="text" name="tempat_lahir" class="form-control" value="<?= e($warga['tempat_lahir']??'') ?>"></div>
<div class="form-group"><label class="form-label">Tgl Lahir</label>
<input type="date" name="tanggal_lahir" class="form-control" value="<?= $warga['tanggal_lahir']??'' ?>"></div>
</div>
<div class="form-row cols-3">
<div class="form-group"><label class="form-label">JK</label>
<select name="jenis_kelamin" class="form-control">
<option value="L" <?= $warga['jenis_kelamin']==='L'?'selected':'' ?>>Laki-laki</option>
<option value="P" <?= $warga['jenis_kelamin']==='P'?'selected':'' ?>>Perempuan</option>
</select></div>
<div class="form-group"><label class="form-label">Agama</label>
<select name="agama" class="form-control">
<?php foreach(['Islam','Kristen','Katolik','Hindu','Buddha','Konghucu','Lainnya'] as $ag): ?>
<option value="<?= $ag ?>" <?= ($warga['agama']??'')===$ag?'selected':'' ?>><?= $ag ?></option>
<?php endforeach; ?>
</select></div>
<div class="form-group"><label class="form-label">No HP</label>
<input type="text" name="no_hp" class="form-control" value="<?= e($warga['no_hp']??'') ?>"></div>
</div>
<div class="form-group"><label class="form-label">Alamat</label>
<input type="text" name="alamat" class="form-control" value="<?= e($warga['alamat']) ?>"></div>
<div class="form-row cols-2">
<div class="form-group"><label class="form-label">Penghasilan/Bln</label>
<input type="number" name="penghasilan_bulanan" class="form-control" value="<?= $warga['penghasilan_bulanan']??0 ?>"></div>
<div class="form-group"><label class="form-label">Tanggungan</label>
<input type="number" name="jumlah_tanggungan" class="form-control" value="<?= $warga['jumlah_tanggungan']??0 ?>"></div>
</div>
<div class="form-row cols-2">
<div class="form-group"><label class="form-label">Pendidikan</label>
<select name="pendidikan_terakhir" class="form-control">
<?php foreach(['Tidak Sekolah','SD','SMP','SMA','D3','S1','S2','S3'] as $p): ?>
<option value="<?= $p ?>" <?= $warga['pendidikan_terakhir']===$p?'selected':'' ?>><?= $p ?></option>
<?php endforeach; ?>
</select></div>
<div class="form-group"><label class="form-label">Pekerjaan</label>
<input type="text" name="pekerjaan" class="form-control" value="<?= e($warga['pekerjaan']??'') ?>" placeholder="Buruh, Petani, dll"></div>
</div>
<div class="form-row cols-2">
<div class="form-group"><label class="form-label">Kondisi Rumah</label>
<select name="kondisi_rumah" class="form-control">
<?php foreach(['Sangat Tidak Layak','Tidak Layak','Cukup Layak','Layak'] as $k): ?>
<option value="<?= $k ?>" <?= $warga['kondisi_rumah']===$k?'selected':'' ?>><?= $k ?></option>
<?php endforeach; ?>
</select></div>
</div>
<div class="form-group"><label class="form-label">Riwayat Penyakit</label>
<input type="text" name="riwayat_penyakit" class="form-control" value="<?= e($warga['riwayat_penyakit']??'') ?>"></div>
<div style="display:flex;gap:20px">
<label style="display:flex;align-items:center;gap:6px;cursor:pointer">
<input type="checkbox" name="is_lansia" value="1" <?= $warga['is_lansia']?'checked':'' ?>> Lansia</label>
<label style="display:flex;align-items:center;gap:6px;cursor:pointer">
<input type="checkbox" name="is_disabilitas" id="edit-is-dis" value="1" <?= $warga['is_disabilitas']?'checked':'' ?>
onchange="document.getElementById('edit-jenis-dis').style.display=this.checked?'block':'none'"> Disabilitas</label>
</div>
<div id="edit-jenis-dis" style="margin-top:10px;<?= $warga['is_disabilitas']?'':'display:none' ?>">
<div class="form-group"><label class="form-label">Jenis Disabilitas</label>
<input type="text" name="disabilitas_jenis" class="form-control" value="<?= e($warga['disabilitas_jenis']??'') ?>" placeholder="Tuna netra, tuna daksa, dll"></div>
</div>
<div class="form-row cols-2" style="margin-top:12px">
<div class="form-group"><label class="form-label">Latitude</label>
<input type="number" name="lat" class="form-control" value="<?= $warga['lat'] ?>" step="0.0000001"></div>
<div class="form-group"><label class="form-label">Longitude</label>
<input type="number" name="lng" class="form-control" value="<?= $warga['lng'] ?>" step="0.0000001"></div>
</div>
<div class="form-group"><label class="form-label">Foto Baru</label>
<input type="file" name="foto" class="form-control" accept="image/*"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-ghost" onclick="App.hideModal('modal-edit')">Batal</button>
<button type="submit" class="btn btn-primary">Simpan Perubahan</button>
</div>
</form>
</div>
</div>
app/views/verifikator/form_warga.php
+208
View File
@@ -0,0 +1,208 @@
<?php
$_mapLat = MAP_DEFAULT_LAT;
$_mapLng = MAP_DEFAULT_LNG;
$extraJs = <<<JS
<script>
document.addEventListener('DOMContentLoaded', () => {
LocationPicker.init('picker-map','lat','lng', {$_mapLat}, {$_mapLng});
// Auto-detect lansia
document.getElementById('tanggal_lahir').addEventListener('change', function() {
const d = new Date(this.value);
const age = Math.floor((Date.now() - d.getTime()) / (365.25*24*60*60*1000));
document.getElementById('is_lansia').checked = age >= 60;
});
// Auto hitung skor
const calcBtn = document.getElementById('calc-skor');
if (calcBtn) {
calcBtn.addEventListener('click', function() {
const p = parseInt(document.getElementById('penghasilan').value) || 0;
const t = parseInt(document.getElementById('tanggungan').value) || 0;
const kapita = t > 0 ? p/t : p;
const st = kapita <= 350000 ? 'Miskin Ekstrem' : kapita <= 550000 ? 'Miskin' : 'Rentan Miskin';
document.getElementById('status_kem_preview').textContent = st;
});
}
});
</script>
JS; ?>
<div style="display:flex;align-items:center;gap:12px;margin-bottom:20px">
<a href="<?= APP_URL ?>/verifikator/warga" class="btn btn-ghost btn-sm">← Kembali</a>
<h2 style="font-size:1.1rem;font-weight:700">Input Data Warga Baru</h2>
</div>
<form method="POST" action="<?= APP_URL ?>/verifikator/warga/store" enctype="multipart/form-data">
<?= csrfField() ?>
<div style="display:grid;grid-template-columns:1fr 360px;gap:20px">
<!-- KIRI: Form Data -->
<div style="display:flex;flex-direction:column;gap:16px">
<!-- Data Pribadi -->
<div class="card">
<div class="card-header"><span class="card-icon">👤</span><h3>Data Pribadi</h3></div>
<div class="card-body">
<div class="form-row cols-2">
<div class="form-group">
<label class="form-label">Nama Lengkap <span class="required">*</span></label>
<input type="text" name="nama" class="form-control" required>
</div>
<div class="form-group">
<label class="form-label">NIK (KTP)</label>
<input type="text" name="nik" class="form-control" maxlength="16" placeholder="16 digit NIK">
</div>
</div>
<div class="form-row cols-2">
<div class="form-group">
<label class="form-label">Tempat Lahir</label>
<input type="text" name="tempat_lahir" class="form-control">
</div>
<div class="form-group">
<label class="form-label">Tanggal Lahir</label>
<input type="date" name="tanggal_lahir" id="tanggal_lahir" class="form-control">
</div>
</div>
<div class="form-row cols-3">
<div class="form-group">
<label class="form-label">Jenis Kelamin</label>
<select name="jenis_kelamin" class="form-control">
<option value="L">Laki-laki</option>
<option value="P">Perempuan</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Agama</label>
<select name="agama" class="form-control">
<?php foreach (['Islam','Kristen','Katolik','Hindu','Buddha','Konghucu','Lainnya'] as $ag): ?>
<option value="<?= $ag ?>"><?= $ag ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<label class="form-label">No HP</label>
<input type="text" name="no_hp" class="form-control">
</div>
</div>
<div class="form-group">
<label class="form-label">Alamat Lengkap <span class="required">*</span></label>
<textarea name="alamat" class="form-control" rows="2" required></textarea>
</div>
<div class="form-group">
<label class="form-label">Foto</label>
<input type="file" name="foto" class="form-control" accept="image/*">
</div>
</div>
</div>
<!-- Sosial Ekonomi -->
<div class="card">
<div class="card-header"><span class="card-icon">💼</span><h3>Data Sosial Ekonomi</h3></div>
<div class="card-body">
<div class="form-row cols-2">
<div class="form-group">
<label class="form-label">Pendidikan Terakhir</label>
<select name="pendidikan_terakhir" class="form-control">
<?php foreach (['Tidak Sekolah','SD','SMP','SMA','D3','S1','S2','S3'] as $p): ?>
<option value="<?= $p ?>"><?= $p ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<label class="form-label">Pekerjaan</label>
<input type="text" name="pekerjaan" class="form-control" placeholder="Buruh, Petani, dll">
</div>
</div>
<div class="form-row cols-2">
<div class="form-group">
<label class="form-label">Penghasilan/Bulan (Rp) <span class="required">*</span></label>
<input type="number" name="penghasilan_bulanan" id="penghasilan" class="form-control" value="0" min="0" required>
</div>
<div class="form-group">
<label class="form-label">Jumlah Tanggungan <span class="required">*</span></label>
<input type="number" name="jumlah_tanggungan" id="tanggungan" class="form-control" value="0" min="0" max="20" required>
</div>
</div>
<div style="display:flex;gap:12px;align-items:center;margin-bottom:12px">
<button type="button" id="calc-skor" class="btn btn-ghost btn-sm">⚡ Hitung Otomatis</button>
<span class="text-sm">Status Kemiskinan: <strong id="status_kem_preview" style="color:var(--clr-danger)">—</strong></span>
</div>
<div class="form-row cols-2">
<div class="form-group">
<label class="form-label">Kondisi Rumah <span class="required">*</span></label>
<select name="kondisi_rumah" class="form-control" required>
<?php foreach (['Sangat Tidak Layak','Tidak Layak','Cukup Layak','Layak'] as $k): ?>
<option value="<?= $k ?>"><?= $k ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<label class="form-label">Riwayat Penyakit</label>
<input type="text" name="riwayat_penyakit" class="form-control" placeholder="Diabetes, Hipertensi, dll">
</div>
</div>
<!-- Kondisi Khusus -->
<div style="display:flex;gap:24px;flex-wrap:wrap">
<label style="display:flex;align-items:center;gap:8px;cursor:pointer">
<input type="checkbox" name="is_lansia" id="is_lansia" value="1"> Lansia (≥60 tahun)
</label>
<label style="display:flex;align-items:center;gap:8px;cursor:pointer">
<input type="checkbox" name="is_disabilitas" id="is_disabilitas" value="1"
onchange="document.getElementById('jenis-dis').style.display=this.checked?'block':'none'">
Penyandang Disabilitas
</label>
</div>
<div id="jenis-dis" style="display:none;margin-top:10px">
<div class="form-group">
<label class="form-label">Jenis Disabilitas</label>
<input type="text" name="disabilitas_jenis" class="form-control" placeholder="Tuna netra, tuna daksa, dll">
</div>
</div>
</div>
</div>
</div>
<!-- KANAN: Peta Lokasi -->
<div style="display:flex;flex-direction:column;gap:16px">
<div class="card" style="position:sticky;top:80px">
<div class="card-header"><span class="card-icon">📍</span><h3>Lokasi Rumah</h3></div>
<div class="card-body">
<div id="picker-map" style="height:340px;border-radius:8px;border:1px solid var(--clr-border);margin-bottom:12px"></div>
<div class="form-row cols-2">
<div class="form-group">
<label class="form-label">Latitude <span class="required">*</span></label>
<input type="number" name="lat" id="lat" class="form-control" step="0.0000001" required placeholder="-0.0263">
</div>
<div class="form-group">
<label class="form-label">Longitude <span class="required">*</span></label>
<input type="number" name="lng" id="lng" class="form-control" step="0.0000001" required placeholder="109.3425">
</div>
</div>
<div class="form-hint">Klik peta atau drag marker untuk menentukan lokasi rumah</div>
<!-- Wilayah -->
<div class="form-group" style="margin-top:12px">
<label class="form-label">Kelurahan</label>
<input type="text" class="form-control" value="<?= e($kelurahan['nama'] ?? '') ?> — <?= e($kelurahan['kecamatan'] ?? '') ?>" readonly style="background:#f8fafc">
</div>
<div style="margin-top:16px;padding:12px;background:#f0fdf4;border-radius:8px;border:1px solid #bbf7d0">
<div style="font-size:0.78rem;color:var(--clr-success);font-weight:600;margin-bottom:4px">ℹ️ Assignment Otomatis</div>
<div style="font-size:0.75rem;color:#166534">Setelah disimpan, sistem akan otomatis:<br>
✓ Menghitung rumah ibadah terdekat (Haversine)<br>
✓ Mendeteksi blind spot<br>
✓ Menghitung skor prioritas bantuan
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ACTION BUTTONS -->
<div style="display:flex;justify-content:flex-end;gap:12px;margin-top:20px">
<a href="<?= APP_URL ?>/verifikator/warga" class="btn btn-ghost">Batal</a>
<button type="submit" class="btn btn-primary" style="padding:11px 28px">💾 Simpan Data Warga</button>
</div>
</form>
app/views/verifikator/laporan.php
+64
View File
@@ -0,0 +1,64 @@
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px">
<div>
<h2 style="font-size:1.2rem;font-weight:700">Daftar Laporan Masyarakat</h2>
<p class="text-muted text-sm">Kelurahan: <strong><?= e(Auth::user()['kelurahan_nama'] ?? '-') ?></strong></p>
</div>
<a href="<?= APP_URL ?>/verifikator/warga/tambah" class="btn btn-primary">➕ Input Manual Warga</a>
</div>
<!-- Filter Status -->
<div class="tabs">
<?php $statuses = ['semua'=>'Semua','menunggu'=>'⏳ Menunggu','diproses'=>'🔄 Diproses','terverifikasi'=>'✅ Terverifikasi','ditolak'=>'❌ Ditolak']; ?>
<?php foreach ($statuses as $s => $l): ?>
<a href="?status=<?= $s ?>" class="tab-btn <?= ($status === $s) ? 'active' : '' ?>"><?= $l ?></a>
<?php endforeach; ?>
</div>
<!-- SEARCH -->
<div class="filters-bar">
<input type="text" id="search-lap" class="form-control" placeholder="🔍 Cari nama warga, kode laporan..." style="max-width:320px">
</div>
<!-- TABLE -->
<div class="card">
<div class="card-body no-pad">
<div class="table-wrap">
<table id="table-laporan">
<thead>
<tr><th>Kode</th><th>Nama Warga</th><th>Pelapor</th><th>Alamat</th><th>Status</th><th>Tanggal</th><th>Aksi</th></tr>
</thead>
<tbody>
<?php foreach ($data as $l): ?>
<tr>
<td><code style="font-size:0.78rem;background:#f1f5f9;padding:2px 6px;border-radius:4px"><?= e($l['kode_laporan']) ?></code></td>
<td>
<div style="font-weight:600"><?= e($l['nama_warga']) ?></div>
<div class="text-xs text-muted"><?= e($l['alamat_warga']) ?></div>
</td>
<td class="text-sm">
<?= e($l['nama_pelapor']) ?>
<?php if ($l['no_hp_pelapor']): ?>
<div class="text-xs text-muted"><?= e($l['no_hp_pelapor']) ?></div>
<?php endif; ?>
</td>
<td class="text-sm"><?= e($l['kelurahan'] ?? '') ?></td>
<td>
<?php $badgeMap = ['menunggu'=>'badge-yellow','diproses'=>'badge-blue','terverifikasi'=>'badge-green','ditolak'=>'badge-red']; ?>
<span class="badge <?= $badgeMap[$l['status']] ?? 'badge-gray' ?>"><?= ucfirst($l['status']) ?></span>
</td>
<td class="text-xs text-muted"><?= formatTanggal($l['created_at']) ?></td>
<td>
<a href="<?= APP_URL ?>/verifikator/laporan/<?= $l['id'] ?>" class="btn btn-primary btn-sm">Detail</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
<?php if (empty($data)): ?>
<div class="empty-state"><div class="empty-state-icon">📭</div><h3>Tidak ada laporan</h3><p>Belum ada laporan dengan status ini</p></div>
<?php endif; ?>
</div>
</div>
<script>document.addEventListener('DOMContentLoaded', () => App.initTableSearch('search-lap', 'table-laporan'));</script>
app/views/verifikator/warga.php
+111
View File
@@ -0,0 +1,111 @@
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px">
<div>
<h2 style="font-size:1.2rem;font-weight:700">Data Warga Miskin</h2>
<p class="text-muted text-sm">Kelurahan: <strong><?= e(Auth::user()['kelurahan_nama'] ?? '-') ?></strong> · <?= count($data) ?> warga terdata</p>
</div>
<a href="<?= APP_URL ?>/verifikator/warga/tambah" class="btn btn-primary">➕ Tambah Warga</a>
</div>
<!-- Filter -->
<div class="tabs">
<?php $levels = ['semua'=>'Semua','Tinggi'=>'🔥 Prioritas Tinggi','Sedang'=>'⚡ Sedang','Rendah'=>'✅ Rendah']; ?>
<?php foreach ($levels as $l => $label): ?>
<a href="?level=<?= $l ?>" class="tab-btn <?= $level===$l?'active':'' ?>"><?= $label ?></a>
<?php endforeach; ?>
</div>
<div class="filters-bar">
<input type="text" id="search-warga" class="form-control" placeholder="🔍 Cari nama, NIK..." style="max-width:300px">
</div>
<!-- PETA -->
<div class="card" style="margin-bottom:20px">
<div class="card-header"><span class="card-icon">🗺</span><h3>Peta Warga Kelurahan</h3></div>
<div class="card-body no-pad">
<div id="warga-map" style="height:280px"></div>
</div>
</div>
<!-- TABLE -->
<div class="card">
<div class="card-body no-pad">
<div class="table-wrap">
<table id="table-warga">
<thead>
<tr>
<th>#</th><th>Nama / NIK</th><th>Status Kemiskinan</th><th>Prioritas</th>
<th>Penghasilan</th><th>Tanggungan</th><th>Rumah Ibadah</th><th>Ket.</th><th>Aksi</th>
</tr>
</thead>
<tbody>
<?php foreach ($data as $i => $w): ?>
<tr>
<td class="text-xs text-muted"><?= $i+1 ?></td>
<td>
<div style="font-weight:600"><?= e($w['nama']) ?></div>
<div class="text-xs text-muted"><?= $w['nik'] ? 'NIK: '.e($w['nik']) : '<em>NIK belum diisi</em>' ?></div>
</td>
<td>
<?php $sc = ['Miskin Ekstrem'=>'badge-red','Miskin'=>'badge-orange','Rentan Miskin'=>'badge-yellow']; ?>
<span class="badge <?= $sc[$w['status_kemiskinan']] ?? 'badge-gray' ?>"><?= e($w['status_kemiskinan']) ?></span>
</td>
<td>
<?php $pc = ['Tinggi'=>'badge-red','Sedang'=>'badge-yellow','Rendah'=>'badge-green']; ?>
<span class="badge <?= $pc[$w['level_prioritas']] ?? 'badge-gray' ?>"><?= e($w['level_prioritas']) ?></span>
<div style="margin-top:4px">
<div class="priority-bar" style="width:80px">
<div class="priority-bar-fill <?= strtolower($w['level_prioritas'])==='tinggi'?'high':(strtolower($w['level_prioritas'])==='sedang'?'medium':'low') ?>"
style="width:<?= min(100,$w['skor_prioritas']) ?>%"></div>
</div>
</div>
<div class="text-xs text-muted"><?= $w['skor_prioritas'] ?>/100</div>
</td>
<td class="text-sm"><?= formatRupiah($w['penghasilan_bulanan'] ?? 0) ?></td>
<td class="text-sm text-center"><?= $w['jumlah_tanggungan'] ?> orang</td>
<td class="text-sm"><?= e($w['rumah_ibadah'] ?? '—') ?></td>
<td>
<?php if ($w['is_blind_spot']): ?>
<span class="badge badge-purple" title="Tidak dalam radius rumah ibadah">⚠ Blind</span>
<?php endif; ?>
<?php if ($w['is_lansia']): ?>
<span class="badge badge-orange" title="Lansia">👴</span>
<?php endif; ?>
<?php if ($w['is_disabilitas']): ?>
<span class="badge badge-blue" title="Disabilitas">♿</span>
<?php endif; ?>
</td>
<td>
<a href="<?= APP_URL ?>/verifikator/warga/<?= $w['id'] ?>" class="btn btn-ghost btn-sm">Detail</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
<?php if (empty($data)): ?>
<div class="empty-state"><div class="empty-state-icon">👥</div><h3>Belum ada data warga</h3></div>
<?php endif; ?>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
App.initTableSearch('search-warga','table-warga');
const map = GISMap.init('warga-map', <?= MAP_DEFAULT_LAT ?>, <?= MAP_DEFAULT_LNG ?>, 14);
const warga = <?= json_encode(array_map(fn($w) => [
'id'=>$w['id'],'nama'=>$w['nama'],'lat'=>(float)$w['lat'],'lng'=>(float)$w['lng'],
'status_kemiskinan'=>$w['status_kemiskinan'],'level_prioritas'=>$w['level_prioritas'],
'is_blind_spot'=>$w['is_blind_spot'],'kelurahan'=>$w['kelurahan']??''
], array_filter($data, fn($w) => $w['lat'] && $w['lng']))) ?>;
if (warga.length) {
GISMap.addWargaLayer(warga, w => {
window.location.href = '<?= APP_URL ?>/verifikator/warga/' + w.id;
});
GISMap.autoFitBounds();
} else {
GISMap.autoFitBounds(true);
}
});
</script>
app/views/walikota/dashboard.php
+205
View File
@@ -0,0 +1,205 @@
<?php ob_start(); ?>
<script>
document.addEventListener('DOMContentLoaded', async () => {
// Peta eksekutif dengan heatmap
const map = GISMap.init('wk-map', <?= MAP_DEFAULT_LAT ?>, <?= MAP_DEFAULT_LNG ?>, 12);
const [heatData, petaData] = await Promise.all([
App.fetchJSON('<?= APP_URL ?>/dinsos/api/heatmap'),
App.fetchJSON('<?= APP_URL ?>/walikota/api/peta')
]);
if(petaData) {
GISMap.addRILayer(petaData.rumah_ibadah||[]);
}
if(heatData) GISMap.addHeatmap(heatData);
// Auto zoom ke seluruh Kota Pontianak
GISMap.autoFitBounds();
// Chart per kecamatan (horizontal bar)
const kec = <?= json_encode(array_column($perKecamatan,'nama')) ?>;
const totals = <?= json_encode(array_column($perKecamatan,'total')) ?>;
const ekstrems = <?= json_encode(array_column($perKecamatan,'ekstrem')) ?>;
new Chart(document.getElementById('chart-kec'), {
type: 'bar',
data: {
labels: kec,
datasets: [
{label:'Total', data:totals, backgroundColor:'#1a3a5ccc', borderRadius:4},
{label:'Ekstrem', data:ekstrems, backgroundColor:'#dc2626cc', borderRadius:4}
]
},
options:{responsive:true,maintainAspectRatio:false,
indexAxis:'y',
scales:{x:{beginAtZero:true,grid:{color:'#f1f5f9'}},y:{grid:{display:false}}}}
});
// Chart tren bulanan
const bulan = <?= json_encode(array_column($trenBulanan,'bulan')) ?>;
const bantuanData = <?= json_encode(array_column($trenBulanan,'jumlah')) ?>;
Charts.line('chart-tren-wk', bulan, [{label:'Bantuan Tersalurkan', data:bantuanData}]);
// Donut komposisi kemiskinan
Charts.donut('chart-komposisi',
['Miskin Ekstrem','Miskin','Rentan Miskin'],
[<?= ($stats['ekstrem']??0).','.(($stats['miskin']??0)).','.(($stats['rentan']??0)) ?>],
['#dc2626','#ea580c','#ca8a04']
);
});
</script>
<?php $extraJs = ob_get_clean(); ?>
<!-- Executive Header Banner -->
<div style="background:linear-gradient(135deg,#1a0533 0%,#2d1b69 50%,#4c1d95 100%);color:#fff;border-radius:var(--radius-lg);padding:28px 32px;margin-bottom:24px;display:flex;align-items:center;gap:24px">
<div style="font-size:4rem">🏛</div>
<div>
<div style="font-size:0.75rem;text-transform:uppercase;letter-spacing:0.12em;color:rgba(255,255,255,0.55);margin-bottom:6px">Dashboard Eksekutif</div>
<div style="font-size:1.5rem;font-weight:900;letter-spacing:-0.01em">Penanganan Kemiskinan Kota Pontianak</div>
<div style="font-size:0.85rem;color:rgba(255,255,255,0.65);margin-top:6px">Data real-time sistem SINERGI · <?= date('d F Y') ?></div>
</div>
<div style="margin-left:auto;text-align:right">
<div style="font-size:0.72rem;color:rgba(255,255,255,0.45);text-transform:uppercase;letter-spacing:0.08em">Status Sistem</div>
<div style="font-size:1rem;font-weight:700;color:#4ade80;margin-top:4px">● Aktif & Online</div>
</div>
</div>
<!-- KPI Cards Row 1 -->
<div class="stats-grid" style="grid-template-columns:repeat(5,1fr)">
<div class="stat-card" style="border-top:3px solid #dc2626">
<div class="stat-card-icon red">👥</div>
<div class="stat-card-body">
<div class="stat-card-value"><?= number_format($stats['total_warga']??0) ?></div>
<div class="stat-card-label">Total Warga Miskin</div>
</div>
</div>
<div class="stat-card" style="border-top:3px solid #dc2626">
<div class="stat-card-icon red">💀</div>
<div class="stat-card-body">
<div class="stat-card-value"><?= number_format($stats['ekstrem']??0) ?></div>
<div class="stat-card-label">Miskin Ekstrem</div>
<div class="stat-card-sub"><?= $stats['total_warga']>0?round($stats['ekstrem']/$stats['total_warga']*100,1):0 ?>% dari total</div>
</div>
</div>
<div class="stat-card" style="border-top:3px solid #7c3aed">
<div class="stat-card-icon purple">⚠️</div>
<div class="stat-card-body">
<div class="stat-card-value"><?= number_format($stats['blind_spot']??0) ?></div>
<div class="stat-card-label">Warga Blind Spot</div>
<div class="stat-card-sub">Belum terjangkau</div>
</div>
</div>
<div class="stat-card" style="border-top:3px solid #16a34a">
<div class="stat-card-icon green">⛪</div>
<div class="stat-card-body">
<div class="stat-card-value"><?= number_format($stats['total_ri']??0) ?></div>
<div class="stat-card-label">Rumah Ibadah Aktif</div>
</div>
</div>
<div class="stat-card" style="border-top:3px solid #0284c7">
<div class="stat-card-icon teal">📦</div>
<div class="stat-card-body">
<div class="stat-card-value"><?= number_format($stats['bantuan_tahun_ini']??0) ?></div>
<div class="stat-card-label">Bantuan Tahun Ini</div>
<div class="stat-card-sub">Total: <?= number_format($stats['total_bantuan']??0) ?></div>
</div>
</div>
</div>
<!-- Grid: Peta Besar + Sidebar Charts -->
<div style="display:grid;grid-template-columns:1fr 380px;gap:20px;margin-bottom:20px">
<!-- PETA UTAMA HEATMAP -->
<div class="card">
<div class="card-header" style="background:linear-gradient(to right,#1a0533,#2d1b69);color:#fff;border-radius:0">
<span class="card-icon">🌡</span>
<h3 style="color:#fff">Heatmap Kemiskinan Kota Pontianak</h3>
</div>
<div class="card-body no-pad" style="position:relative">
<div id="wk-map" style="height:440px"></div>
<div class="map-legend">
<h4>Intensitas</h4>
<div style="height:10px;border-radius:5px;background:linear-gradient(to right,#fef9c3,#fb923c,#ef4444,#7f1d1d);margin:4px 0 6px"></div>
<div style="display:flex;justify-content:space-between;font-size:0.6rem;color:var(--clr-text-muted)"><span>Rendah</span><span>Tinggi</span></div>
<div class="map-legend-item" style="margin-top:8px"><div class="map-legend-dot legend-dot-ri"></div> Rumah Ibadah</div>
</div>
</div>
</div>
<!-- SIDEBAR CHARTS -->
<div style="display:flex;flex-direction:column;gap:16px">
<!-- Komposisi -->
<div class="card">
<div class="card-header"><span class="card-icon">🥧</span><h3>Komposisi Kemiskinan</h3></div>
<div class="card-body"><div class="chart-wrap" style="height:160px"><canvas id="chart-komposisi"></canvas></div></div>
</div>
<!-- Peringkat Kecamatan -->
<div class="card" style="flex:1">
<div class="card-header"><span class="card-icon">🏆</span><h3>Ranking Kecamatan</h3></div>
<div class="card-body no-pad">
<?php foreach($perKecamatan as $i=>$k): ?>
<div style="padding:10px 16px;border-bottom:1px solid #f1f5f9">
<div style="display:flex;align-items:center;gap:10px">
<div style="width:22px;height:22px;border-radius:50%;background:<?= $i===0?'#dc2626':($i===1?'#d97706':($i===2?'#65a30d':'#94a3b8')) ?>;color:#fff;display:flex;align-items:center;justify-content:center;font-size:0.72rem;font-weight:800;flex-shrink:0"><?= $i+1 ?></div>
<div style="flex:1;min-width:0">
<div style="font-size:0.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis"><?= e($k['nama']) ?></div>
<div style="height:4px;background:#f1f5f9;border-radius:2px;margin-top:3px;overflow:hidden">
<?php $mx=max(array_column($perKecamatan,'total')?:[1]); ?>
<div style="height:100%;background:<?= $i===0?'#dc2626':($i===1?'#d97706':'#1a3a5c') ?>;width:<?= $mx>0?round($k['total']/$mx*100):0 ?>%;border-radius:2px"></div>
</div>
</div>
<strong style="font-size:0.9rem;color:var(--clr-text)"><?= number_format($k['total']) ?></strong>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
<!-- Bottom Charts Row -->
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px">
<div class="card">
<div class="card-header"><span class="card-icon">📊</span><h3>Perbandingan Kemiskinan per Kecamatan</h3></div>
<div class="card-body"><div class="chart-wrap" style="height:260px"><canvas id="chart-kec"></canvas></div></div>
</div>
<div class="card">
<div class="card-header"><span class="card-icon">📈</span><h3>Tren Bantuan Tersalurkan (12 Bulan)</h3></div>
<div class="card-body"><div class="chart-wrap" style="height:260px"><canvas id="chart-tren-wk"></canvas></div></div>
</div>
</div>
<!-- Rumah Ibadah Paling Aktif -->
<div class="card">
<div class="card-header"><span class="card-icon">🏆</span><h3>5 Rumah Ibadah Paling Aktif</h3></div>
<div class="card-body no-pad">
<div class="table-wrap">
<table>
<thead><tr><th>Peringkat</th><th>Nama</th><th>Jenis</th><th>Kecamatan</th><th>Warga Binaan</th><th>Bantuan Disalurkan</th></tr></thead>
<tbody>
<?php foreach($topRi as $i=>$r): ?>
<tr>
<td>
<div style="width:28px;height:28px;border-radius:50%;background:<?= $i===0?'#f59e0b':($i===1?'#94a3b8':($i===2?'#c2410c':'#e2e8f0')) ?>;color:<?= $i<3?'#fff':'var(--clr-text)' ?>;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:0.85rem"><?= $i+1 ?></div>
</td>
<td style="font-weight:600"><?= e($r['nama']) ?></td>
<td><span class="badge badge-green"><?= e($r['jenis']) ?></span></td>
<td class="text-sm"><?= e($r['kecamatan']) ?></td>
<td class="text-sm"><strong><?= number_format($r['jml_warga']) ?></strong> warga</td>
<td>
<div style="display:flex;align-items:center;gap:8px">
<strong style="color:var(--clr-success)"><?= number_format($r['jml_bantuan']) ?></strong>
<div style="flex:1;max-width:80px">
<div class="priority-bar">
<?php $mx2=max(array_column($topRi,'jml_bantuan')?:[1]); ?>
<div class="priority-bar-fill low" style="width:<?= $mx2>0?round($r['jml_bantuan']/$mx2*100):0 ?>%"></div>
</div>
</div>
</div>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>