Files
UAS_SIG/dashboard.php
2026-06-02 03:12:01 +00:00

541 lines
22 KiB
PHP
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<?php
require_once __DIR__ . '/config/auth.php';
require_login();
$user = current_user();
$role = current_role();
$roleLabel = [
'admin' => 'Administrator Sistem',
'dinas' => 'Dinas Sosial',
'rumah_ibadah' => 'Pengurus Rumah Ibadah',
'relawan' => 'Relawan Lapangan',
'masyarakat' => 'Masyarakat'
][$role] ?? 'Pengguna';
$canManageRI = in_array($role, ['admin','dinas','rumah_ibadah'], true);
$canCreateRI = in_array($role, ['admin','dinas'], true);
$canVerify = in_array($role, ['admin','dinas','relawan'], true);
$canAnalyze = in_array($role, ['admin','dinas'], true);
$canRecordBantuan = in_array($role, ['admin','dinas','rumah_ibadah','relawan'], true);
$canExport = in_array($role, ['admin','dinas'], true);
$canManageUsers = $role === 'admin';
$canReportMusibah = true;
$canManageMusibah = in_array($role, ['admin','dinas','relawan','rumah_ibadah'], true);
$canManagePemberdayaan = in_array($role, ['admin','dinas','relawan','rumah_ibadah'], true);
$tabLabels = [
'dashboard' => 'Ringkasan',
'peta' => $role === 'masyarakat' ? 'Usulan Saya' : 'Peta Data',
'input' => $role === 'masyarakat' ? 'Ajukan Bantuan' : 'Input Keluarga',
'rumah_ibadah' => $role === 'rumah_ibadah' ? 'Layanan Saya' : 'Rumah Ibadah',
'validasi' => 'Verifikasi',
'bantuan' => 'Penyaluran',
'laporan' => 'Laporan',
'akun' => 'Akun Masuk',
'musibah' => 'Musibah',
'pemberdayaan' => 'Pemberdayaan'
];
$roleDescription = [
'admin' => 'Mengelola akun, data utama, verifikasi, dan laporan sistem.',
'dinas' => 'Memantau cakupan bantuan dan menentukan prioritas wilayah.',
'rumah_ibadah' => 'Mengatur radius layanan, kuota, dan pencatatan bantuan.',
'relawan' => 'Membantu input data, survei, dan verifikasi lapangan.',
'masyarakat' => 'Mengajukan data keluarga yang membutuhkan bantuan.'
][$role] ?? 'Mengakses fitur sesuai hak pengguna.';
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebGIS SIPANTAS</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/responsive-fix.css">
</head>
<body>
<div id="map"></div>
<aside class="app-shell">
<header class="brand-panel">
<div class="brand-logo">S</div>
<div>
<h1>SIPANTAS</h1>
<p>WebGIS Sosial</p>
</div>
<button class="panel-toggle" id="btnPanelCollapse" type="button" aria-label="Sembunyikan panel"></button>
<button class="help-button" id="btnOpenGuide" type="button">Panduan</button>
<a class="logout" href="logout.php">Keluar</a>
</header>
<section class="user-box">
<div class="user-main">
<b><?= htmlspecialchars($user['nama']) ?></b>
<span><?= htmlspecialchars($user['email']) ?></span>
</div>
<span class="role-chip"><?= htmlspecialchars($roleLabel) ?></span>
<p><?= htmlspecialchars($roleDescription) ?></p>
</section>
<section class="quick-guide-card" id="quickGuideCard">
<div>
<small>Mulai dari sini</small>
<b id="quickGuideTitle">Panduan singkat</b>
<span id="quickGuideText">Ikuti langkah sesuai peran akun kamu.</span>
</div>
<button type="button" id="btnGuidePrimary">Mulai</button>
</section>
<nav class="tabs" aria-label="Navigasi fitur">
<button class="tab active" data-tab="dashboard"><?= htmlspecialchars($tabLabels['dashboard']) ?></button>
<button class="tab" data-tab="peta"><?= htmlspecialchars($tabLabels['peta']) ?></button>
<button class="tab" data-tab="input"><?= htmlspecialchars($tabLabels['input']) ?></button>
<?php if ($canReportMusibah): ?>
<button class="tab" data-tab="musibah"><?= htmlspecialchars($tabLabels['musibah']) ?></button>
<?php endif; ?>
<?php if ($canManagePemberdayaan): ?>
<button class="tab" data-tab="pemberdayaan"><?= htmlspecialchars($tabLabels['pemberdayaan']) ?></button>
<?php endif; ?>
<?php if ($canManageRI): ?>
<button class="tab" data-tab="rumah-ibadah"><?= htmlspecialchars($tabLabels['rumah_ibadah']) ?></button>
<?php endif; ?>
<?php if ($canVerify): ?>
<button class="tab" data-tab="validasi"><?= htmlspecialchars($tabLabels['validasi']) ?></button>
<?php endif; ?>
<?php if ($canRecordBantuan): ?>
<button class="tab" data-tab="bantuan"><?= htmlspecialchars($tabLabels['bantuan']) ?></button>
<?php endif; ?>
<?php if ($canExport): ?>
<button class="tab" data-tab="laporan"><?= htmlspecialchars($tabLabels['laporan']) ?></button>
<?php endif; ?>
<?php if ($canManageUsers): ?>
<button class="tab" data-tab="akun"><?= htmlspecialchars($tabLabels['akun']) ?></button>
<?php endif; ?>
</nav>
<main class="panel-body">
<section id="tab-dashboard" class="tab-panel active">
<div class="hero-card dashboard-hero">
<small>Ringkasan</small>
<h2 id="dashboardTitle">Cakupan Bantuan Sosial</h2>
<p id="dashboardSubtitle">Pantau kondisi terbaru, lalu lanjutkan tindakan utama dari panel ini.</p>
<div class="hero-actions">
<button class="btn hero-btn" type="button" id="btnGoInput">Tambah Usulan</button>
<button class="btn hero-btn ghost" type="button" id="btnGoMap">Lihat Peta</button>
<button class="btn hero-btn danger" type="button" id="btnGoMusibah">Laporkan Musibah</button>
</div>
</div>
<div class="guide-stepper" id="roleSteps"></div>
<div class="stats stats-wide">
<div class="stat-card"><span id="totalRumahIbadah">0</span><small>Rumah Ibadah Aktif</small></div>
<div class="stat-card"><span id="totalKeluarga">0</span><small>Keluarga Terdata</small></div>
<div class="stat-card green-card"><span id="totalDitanggung">0</span><small>Ditanggung</small></div>
<div class="stat-card red-card"><span id="totalBlankSpot">0</span><small>Blank Spot</small></div>
<div class="stat-card yellow-card"><span id="totalMenunggu">0</span><small>Menunggu Verifikasi</small></div>
<div class="stat-card danger-card"><span id="totalMusibahAktif">0</span><small>Musibah Aktif</small></div>
<div class="stat-card"><span id="totalProduktif">0</span><small>Calon Pemberdayaan</small></div>
<div class="stat-card"><span id="cakupanBantuan">0%</span><small>Cakupan Bantuan</small></div>
</div>
<div class="progress-wrap">
<div class="progress-label"><span>Cakupan keluarga valid</span><b id="cakupanLabel">0%</b></div>
<div class="progress"><div id="cakupanBar" class="progress-bar"></div></div>
</div>
<div class="section-title">Tindakan Berikutnya</div>
<?php if ($canAnalyze): ?>
<button class="btn btn-primary" id="btnAnalisis">Jalankan Analisis Tanggungan</button>
<?php else: ?>
<div class="info-box">Data tersedia sesuai akses akun kamu.</div>
<?php endif; ?>
<button class="btn btn-secondary" id="btnLocate">Gunakan Lokasi Saya</button>
</section>
<section id="tab-peta" class="tab-panel">
<div class="tab-intro">
<b>Peta Data</b>
<span>Gunakan filter untuk menemukan keluarga, melihat tanggungan, dan membuka rute bantuan.</span>
</div>
<div class="section-title">Filter Peta</div>
<label>Status Bantuan</label>
<select id="filterStatus">
<option value="semua">Semua Status</option>
<option>Ditanggung</option>
<option>Blank Spot</option>
<option>Menunggu Verifikasi</option>
<option>Tidak Valid</option>
<option>Bantuan Pemerintah</option>
<option>Butuh Bantuan Lanjutan</option>
</select>
<label>Pencarian Nama / Alamat</label>
<input id="searchText" placeholder="Cari keluarga, alamat, atau rumah ibadah">
<div class="quick-actions">
<button class="btn btn-secondary" id="btnRefresh">Muat Ulang Data</button>
<button class="btn btn-secondary" id="btnFitMap">Tampilkan Semua Titik</button>
</div>
<div class="section-title">Daftar Keluarga</div>
<div id="listKeluarga" class="list-box"></div>
</section>
<section id="tab-input" class="tab-panel">
<div class="tab-intro">
<b>Ajukan / Input Keluarga</b>
<span>Langkahnya sederhana: klik lokasi rumah di peta, lengkapi data, lalu simpan.</span>
</div>
<div class="mini-step-list">
<span><b>1</b> Klik titik rumah di peta</span>
<span><b>2</b> Isi data keluarga</span>
<span><b>3</b> Simpan usulan</span>
</div>
<label>Nama Kepala Keluarga</label>
<input id="kelNama" placeholder="Contoh: Keluarga Bapak Ahmad">
<label>Alamat</label>
<textarea id="kelAlamat" placeholder="Klik peta agar alamat terisi otomatis, atau isi manual"></textarea>
<div class="two-col">
<div>
<label>No. KK</label>
<input id="kelNoKK" placeholder="Nomor KK">
</div>
<div>
<label>NIK Kepala Keluarga</label>
<input id="kelNik" placeholder="NIK">
</div>
</div>
<label>Tingkat Kerentanan</label>
<select id="kelKerentanan">
<option>Miskin Ekstrem</option>
<option>Sangat Miskin</option>
<option>Miskin</option>
<option>Rentan Miskin</option>
</select>
<label>Kebutuhan Prioritas</label>
<select id="kelKebutuhan">
<option>Sembako</option>
<option>Biaya Pendidikan</option>
<option>Kesehatan</option>
<option>Tempat Tinggal</option>
<option>Modal Usaha</option>
<option>Lainnya</option>
</select>
<div class="section-title">Anggota Keluarga</div>
<div class="info-box small-note">Isi data anggota sesuai KK. Centang kemampuan bekerja agar sistem bisa merekomendasikan program pemberdayaan.</div>
<div id="anggotaContainer" class="anggota-container"></div>
<button class="btn btn-secondary" type="button" id="btnTambahAnggota">Tambah Anggota</button>
<?php if ($canVerify): ?>
<label>Status Verifikasi Awal</label>
<select id="kelStatusVerifikasi">
<option>Menunggu Verifikasi</option>
<option>Valid</option>
<option>Tidak Valid</option>
<option>Perlu Survei Ulang</option>
</select>
<?php else: ?>
<input type="hidden" id="kelStatusVerifikasi" value="Menunggu Verifikasi">
<?php endif; ?>
<label>Catatan Kondisi</label>
<textarea id="kelCatatan" placeholder="Contoh: membutuhkan bantuan sembako bulanan"></textarea>
<div class="two-col">
<div>
<label>Latitude</label>
<input id="lat" readonly>
</div>
<div>
<label>Longitude</label>
<input id="lng" readonly>
</div>
</div>
<button class="btn btn-primary" id="btnSimpanKeluarga">Simpan Usulan Keluarga</button>
<button class="btn btn-secondary" id="btnBersihkanKeluarga">Bersihkan Form</button>
</section>
<?php if ($canReportMusibah): ?>
<section id="tab-musibah" class="tab-panel">
<div class="tab-intro">
<b>Laporan Musibah</b>
<span>Gunakan menu ini untuk kondisi mendadak seperti sakit, kebakaran, banjir, kehilangan pekerjaan, atau kebutuhan darurat lain.</span>
</div>
<div class="mini-step-list">
<span><b>1</b> Pilih keluarga terdata atau klik lokasi kejadian</span>
<span><b>2</b> Isi jenis musibah dan kebutuhan mendesak</span>
<span><b>3</b> Kirim agar bisa ditindaklanjuti</span>
</div>
<label>Keluarga Terkait (opsional)</label>
<select id="musibahKeluarga"></select>
<div class="two-col">
<div>
<label>Jenis Musibah</label>
<select id="musibahJenis">
<option>Kebakaran</option>
<option>Banjir</option>
<option>Sakit Mendesak</option>
<option>Kehilangan Pekerjaan</option>
<option>Kematian Tulang Punggung Keluarga</option>
<option>Rumah Rusak</option>
<option>Lainnya</option>
</select>
</div>
<div>
<label>Tingkat Urgensi</label>
<select id="musibahUrgensi">
<option>Sedang</option>
<option>Tinggi</option>
<option>Darurat</option>
<option>Rendah</option>
</select>
</div>
</div>
<label>Tanggal Kejadian</label>
<input id="musibahTanggal" type="date">
<label>Alamat / Lokasi Kejadian</label>
<textarea id="musibahAlamat" placeholder="Pilih keluarga, klik peta, atau isi manual"></textarea>
<label>Kronologi Singkat</label>
<textarea id="musibahDeskripsi" placeholder="Jelaskan apa yang terjadi secara singkat"></textarea>
<label>Kebutuhan Mendesak</label>
<textarea id="musibahKebutuhan" placeholder="Contoh: obat, biaya transportasi, makanan, tempat tinggal sementara"></textarea>
<div class="two-col">
<div><label>Latitude</label><input id="musibahLat" readonly></div>
<div><label>Longitude</label><input id="musibahLng" readonly></div>
</div>
<button class="btn btn-primary" id="btnSimpanMusibah">Kirim Laporan Musibah</button>
<div class="section-title">Daftar Laporan Musibah</div>
<div id="listMusibah" class="list-box"></div>
</section>
<?php endif; ?>
<?php if ($canManagePemberdayaan): ?>
<section id="tab-pemberdayaan" class="tab-panel">
<div class="tab-intro">
<b>Pemberdayaan Keluarga</b>
<span>Temukan anggota keluarga yang masih mampu bekerja, lalu arahkan ke pelatihan, modal usaha, atau program kerja.</span>
</div>
<div class="info-box">Daftar ini diambil dari anggota keluarga dengan status mampu bekerja. Tujuannya agar bantuan tidak hanya konsumtif, tetapi juga membantu keluarga mandiri.</div>
<div class="section-title">Calon Penerima Program</div>
<div id="listPemberdayaan" class="list-box"></div>
</section>
<?php endif; ?>
<?php if ($canManageRI): ?>
<section id="tab-rumah-ibadah" class="tab-panel">
<div class="tab-intro">
<b><?= $canCreateRI ? 'Manajemen Rumah Ibadah' : 'Layanan Rumah Ibadah Saya' ?></b>
<span><?= $canCreateRI ? 'Tambah lokasi rumah ibadah dan atur kapasitas layanan.' : 'Atur radius, kuota, dan dana sosial agar cakupan bantuan lebih sesuai.' ?></span>
</div>
<div class="mini-step-list">
<span><b>1</b> Pastikan data lokasi benar</span>
<span><b>2</b> Atur radius dan kuota</span>
<span><b>3</b> Simpan perubahan</span>
</div>
<div class="section-title"><?= $canCreateRI ? 'Data Rumah Ibadah' : 'Profil Layanan' ?></div>
<input type="hidden" id="riId">
<label>Nama Rumah Ibadah</label>
<input id="riNama" placeholder="Contoh: Masjid Al-Ikhlas" <?= $canCreateRI ? '' : 'readonly' ?>>
<label>Alamat</label>
<textarea id="riAlamat" placeholder="Klik peta atau isi manual" <?= $canCreateRI ? '' : 'readonly' ?>></textarea>
<label>Kategori</label>
<select id="riKategori" <?= $canCreateRI ? '' : 'disabled' ?>>
<option>Masjid</option>
<option>Gereja</option>
<option>Vihara</option>
<option>Klenteng</option>
<option>Pura</option>
<option>Lainnya</option>
</select>
<div class="two-col">
<div>
<label>Pengurus</label>
<input id="riPengurus" placeholder="Nama penanggung jawab">
</div>
<div>
<label>Kontak</label>
<input id="riKontak" placeholder="Nomor HP/WA">
</div>
</div>
<div class="two-col">
<div>
<label>Dana Sosial per Bulan</label>
<input id="riDana" type="number" placeholder="Contoh: 5000000">
</div>
<div>
<label>Kuota KK</label>
<input id="riKuota" type="number" placeholder="Contoh: 25">
</div>
</div>
<label>Radius Tanggungan: <span id="riRadiusLabel">500</span> meter</label>
<input id="riRadius" type="range" min="100" max="5000" step="100" value="500">
<?php if ($canCreateRI): ?>
<div class="two-col">
<div>
<label>Latitude</label>
<input id="riLat" readonly>
</div>
<div>
<label>Longitude</label>
<input id="riLng" readonly>
</div>
</div>
<?php else: ?>
<input type="hidden" id="riLat">
<input type="hidden" id="riLng">
<?php endif; ?>
<button class="btn btn-primary" id="btnSimpanRI"><?= $canCreateRI ? 'Simpan / Perbarui Rumah Ibadah' : 'Perbarui Radius, Kuota, dan Dana Sosial' ?></button>
<?php if ($canCreateRI): ?>
<button class="btn btn-secondary" id="btnRIBaru">Tambah Rumah Ibadah Baru</button>
<?php endif; ?>
<div class="section-title">Daftar Rumah Ibadah</div>
<div id="listRumahIbadah" class="list-box"></div>
</section>
<?php endif; ?>
<?php if ($canVerify): ?>
<section id="tab-validasi" class="tab-panel">
<div class="tab-intro">
<b>Verifikasi Lapangan</b>
<span>Periksa usulan yang masuk. Tandai valid bila data sudah layak digunakan untuk analisis.</span>
</div>
<div class="section-title">Antrian Validasi</div>
<div id="listValidasi" class="list-box"></div>
</section>
<?php endif; ?>
<?php if ($canRecordBantuan): ?>
<section id="tab-bantuan" class="tab-panel">
<div class="tab-intro">
<b>Penyaluran Bantuan</b>
<span>Lihat keluarga yang sudah masuk tanggungan dan catat riwayat bantuan yang diberikan.</span>
</div>
<div class="section-title">Daftar Tanggungan</div>
<div id="listBantuan" class="list-box"></div>
</section>
<?php endif; ?>
<?php if ($canExport): ?>
<section id="tab-laporan" class="tab-panel">
<div class="tab-intro">
<b>Laporan</b>
<span>Unduh data prioritas atau cetak ringkasan untuk kebutuhan koordinasi.</span>
</div>
<div class="section-title">Dokumen Laporan</div>
<div class="report-grid">
<a class="report-card" href="export_blankspot.php" target="_blank">
<b>Export Blank Spot</b>
<span>Unduh daftar prioritas.</span>
</a>
<button class="report-card" id="btnPrintSummary" type="button">
<b>Cetak Ringkasan Dashboard</b>
<span>Cetak statistik utama.</span>
</button>
</div>
</section>
<?php endif; ?>
<?php if ($canManageUsers): ?>
<section id="tab-akun" class="tab-panel">
<div class="tab-intro">
<b>Verifikasi Akun</b>
<span>Setujui akun resmi agar akses rumah ibadah dan relawan tetap terkendali.</span>
</div>
<div class="info-box">Akun masyarakat aktif otomatis. Akun rumah ibadah dan relawan perlu disetujui lebih dulu.</div>
<div id="listAkun" class="list-box"></div>
</section>
<?php endif; ?>
</main>
</aside>
<button id="btnPanelOpen" class="panel-open" type="button" aria-label="Tampilkan panel">☰ Panel</button>
<div class="map-toolbar">
<button id="btnLayerRadius" class="tool-btn active">Radius</button>
<button id="btnLayerRI" class="tool-btn active">Rumah Ibadah</button>
<button id="btnLayerKK" class="tool-btn active">Keluarga</button>
</div>
<div class="legend">
<b>Legenda</b><br>
<span class="dot blue"></span> Rumah Ibadah<br>
<span class="dot green"></span> Ditanggung<br>
<span class="dot red"></span> Blank Spot<br>
<span class="dot yellow"></span> Menunggu Verifikasi<br>
<span class="dot gray"></span> Tidak Valid
</div>
<div class="map-helper" id="mapHelper">
<b>Panduan peta</b>
<span id="mapHelperText">Geser atau zoom peta untuk melihat sebaran data.</span>
</div>
<div class="guide-modal" id="guideModal" aria-hidden="true">
<div class="guide-backdrop" id="guideBackdrop"></div>
<section class="guide-dialog" role="dialog" aria-modal="true" aria-labelledby="guideTitle">
<button class="guide-close" id="btnCloseGuide" type="button" aria-label="Tutup panduan">×</button>
<small>Panduan penggunaan</small>
<h2 id="guideTitle">Mulai menggunakan SIPANTAS</h2>
<p id="guideDescription">Ikuti langkah sesuai peran akun kamu.</p>
<div class="guide-list" id="guideList"></div>
<div class="guide-dialog-actions">
<button class="btn btn-primary" id="btnGuideAction" type="button">Mulai Sekarang</button>
<button class="btn btn-secondary" id="btnGuideLater" type="button">Nanti Saja</button>
</div>
</section>
</div>
<div id="toast" class="toast"></div>
<script>
window.SIPANTAS_USER = <?= json_encode($user, JSON_UNESCAPED_UNICODE) ?>;
window.SIPANTAS_ROLE = <?= json_encode($role) ?>;
window.SIPANTAS_CAPS = <?= json_encode([
'canManageRI' => $canManageRI,
'canCreateRI' => $canCreateRI,
'canVerify' => $canVerify,
'canAnalyze' => $canAnalyze,
'canRecordBantuan' => $canRecordBantuan,
'canExport' => $canExport,
'canManageUsers' => $canManageUsers,
'canReportMusibah' => $canReportMusibah,
'canManageMusibah' => $canManageMusibah,
'canManagePemberdayaan' => $canManagePemberdayaan,
]) ?>;
</script>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script>
<script src="assets/js/app.js"></script>
</body>
</html>