Upload files to "/"

This commit is contained in:
2026-06-02 03:12:01 +00:00
commit 123425bf39
5 changed files with 810 additions and 0 deletions
+540
View File
@@ -0,0 +1,540 @@
<?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>