499 lines
26 KiB
PHP
499 lines
26 KiB
PHP
<?php
|
|
declare(strict_types=1);
|
|
|
|
require_once __DIR__ . '/api/auth.php';
|
|
require_admin_login();
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>WebGIS Sebaran Penduduk Miskin</title>
|
|
<!-- Fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<!-- Leaflet CSS -->
|
|
<link rel="stylesheet" href="assets/vendor/leaflet/leaflet.css" />
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="assets/css/style.css?v=<?= filemtime(__DIR__ . '/assets/css/style.css') ?>">
|
|
</head>
|
|
<body>
|
|
<div class="dashboard-container">
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar" id="sidebar">
|
|
<div class="sidebar-header">
|
|
<i class="fas fa-map-marked-alt fa-2x" style="color: var(--primary);"></i>
|
|
<h2>WebGIS Peduli</h2>
|
|
</div>
|
|
<div class="sidebar-menu">
|
|
<div class="menu-item active" id="menu-dashboard" data-view="dashboard">
|
|
<i class="fas fa-home"></i> Dashboard
|
|
</div>
|
|
<div class="menu-item" id="menu-map" data-view="map">
|
|
<i class="fas fa-map"></i> Peta
|
|
</div>
|
|
<div class="menu-item" id="menu-add-ri">
|
|
<i class="fas fa-plus-circle"></i> Tambah Rumah Ibadah
|
|
</div>
|
|
<div class="menu-item" id="menu-add-pm">
|
|
<i class="fas fa-user-plus"></i> Tambah Penduduk
|
|
</div>
|
|
<a class="menu-item" href="laporan.php">
|
|
<i class="fas fa-file-lines"></i> Laporan
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content dashboard-mode">
|
|
<!-- Topbar -->
|
|
<header class="topbar">
|
|
<button id="toggle-sidebar" class="btn-icon"><i class="fas fa-bars"></i></button>
|
|
<div class="search-bar hidden">
|
|
<input type="text" id="search-input" placeholder="Cari nama warga / rumah ibadah...">
|
|
<button id="search-button" type="button"><i class="fas fa-search"></i></button>
|
|
</div>
|
|
<div class="map-header-controls hidden">
|
|
<div class="header-filter">
|
|
<i class="fas fa-circle-check"></i>
|
|
<label>Status</label>
|
|
<select id="filter-status">
|
|
<option value="all">Semua Status</option>
|
|
<option value="Sudah dibantu">Sudah Dibantu</option>
|
|
<option value="Belum dibantu">Belum Dibantu</option>
|
|
<option value="Menunggu verifikasi">Menunggu Verifikasi</option>
|
|
</select>
|
|
</div>
|
|
<div class="header-filter">
|
|
<i class="fas fa-place-of-worship"></i>
|
|
<label>Jenis</label>
|
|
<select id="filter-jenis">
|
|
<option value="all">Semua Jenis</option>
|
|
<option value="Masjid">Masjid</option>
|
|
<option value="Gereja">Gereja</option>
|
|
<option value="Pura">Pura</option>
|
|
<option value="Vihara">Vihara</option>
|
|
<option value="Klenteng">Klenteng</option>
|
|
</select>
|
|
</div>
|
|
<div class="header-filter">
|
|
<i class="fas fa-hand-holding-heart"></i>
|
|
<label>Kebutuhan</label>
|
|
<select id="filter-kebutuhan">
|
|
<option value="all">Semua Kebutuhan</option>
|
|
<option value="Sembako">Sembako</option>
|
|
<option value="Pendidikan">Pendidikan</option>
|
|
<option value="Kesehatan">Kesehatan</option>
|
|
<option value="Modal Usaha">Modal Usaha</option>
|
|
<option value="Rumah Tidak Layak">Rumah Tidak Layak</option>
|
|
<option value="Bantuan Darurat">Bantuan Darurat</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="user-profile">
|
|
<span><?= htmlspecialchars(current_admin_name(), ENT_QUOTES, 'UTF-8') ?></span>
|
|
<div class="avatar"><i class="fas fa-user-shield"></i></div>
|
|
<a class="logout-link" href="logout.php" title="Logout"><i class="fas fa-right-from-bracket"></i></a>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Dashboard -->
|
|
<section id="dashboard-view" class="view-panel dashboard-view active">
|
|
<div class="dashboard-page-header">
|
|
<div>
|
|
<p class="eyebrow">Ringkasan Data</p>
|
|
<h1>Dashboard WebGIS Peduli</h1>
|
|
<p>Pantau sebaran warga, status bantuan, dan cakupan layanan rumah ibadah dari satu halaman.</p>
|
|
</div>
|
|
<div class="dashboard-header-actions">
|
|
<button class="btn btn-primary" id="dashboard-open-map"><i class="fas fa-map-location-dot"></i> Buka Peta</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stats-container" id="stats-container">
|
|
<div class="stat-card">
|
|
<h3>Rumah Ibadah</h3>
|
|
<div class="value" id="stat-ri">0</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h3>Total Warga</h3>
|
|
<div class="value" id="stat-pm">0</div>
|
|
</div>
|
|
<div class="stat-card success">
|
|
<h3>Sudah Dibantu</h3>
|
|
<div class="value" id="stat-sudah">0</div>
|
|
</div>
|
|
<div class="stat-card warning">
|
|
<h3>Menunggu</h3>
|
|
<div class="value" id="stat-menunggu">0</div>
|
|
</div>
|
|
<div class="stat-card danger">
|
|
<h3>Belum Dibantu</h3>
|
|
<div class="value" id="stat-belum">0</div>
|
|
</div>
|
|
<div class="stat-card warning">
|
|
<h3>Prioritas Tinggi</h3>
|
|
<div class="value" id="stat-prioritas">0</div>
|
|
</div>
|
|
<div class="stat-card danger">
|
|
<h3>Luar Radius</h3>
|
|
<div class="value" id="stat-luar-radius">0</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dashboard-grid">
|
|
<div class="dashboard-card status-card">
|
|
<div class="card-title">
|
|
<h2>Status Bantuan</h2>
|
|
<span>Data keluarga miskin</span>
|
|
</div>
|
|
<div class="status-list">
|
|
<div class="status-item">
|
|
<span class="status-dot success"></span>
|
|
<div>
|
|
<strong id="summary-sudah">0</strong>
|
|
<p>Sudah menerima bantuan</p>
|
|
</div>
|
|
</div>
|
|
<div class="status-item">
|
|
<span class="status-dot warning"></span>
|
|
<div>
|
|
<strong id="summary-menunggu">0</strong>
|
|
<p>Menunggu verifikasi</p>
|
|
</div>
|
|
</div>
|
|
<div class="status-item">
|
|
<span class="status-dot danger"></span>
|
|
<div>
|
|
<strong id="summary-belum">0</strong>
|
|
<p>Belum menerima bantuan</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dashboard-card">
|
|
<div class="card-title">
|
|
<h2>Aksi Cepat</h2>
|
|
<span>Input dan pemetaan data</span>
|
|
</div>
|
|
<div class="quick-actions">
|
|
<button class="quick-action" id="dashboard-add-ri">
|
|
<i class="fas fa-place-of-worship"></i>
|
|
<span>Tambah Rumah Ibadah</span>
|
|
</button>
|
|
<button class="quick-action" id="dashboard-add-pm">
|
|
<i class="fas fa-user-plus"></i>
|
|
<span>Tambah Penduduk</span>
|
|
</button>
|
|
<a class="quick-action" href="laporan.php?prioritas=tinggi">
|
|
<i class="fas fa-file-export"></i>
|
|
<span>Cetak Laporan Prioritas</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dashboard-card map-summary-card">
|
|
<div class="card-title">
|
|
<h2>Legenda Peta</h2>
|
|
<span>Indikator cakupan layanan</span>
|
|
</div>
|
|
<div class="legend-list">
|
|
<div><span class="legend-marker ri"></span> Rumah ibadah dan radius layanan</div>
|
|
<div><span class="legend-marker reached"></span> Warga dalam radius layanan</div>
|
|
<div><span class="legend-marker blank"></span> Warga di luar radius layanan</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dashboard-card">
|
|
<div class="card-title">
|
|
<h2>Prioritas Bantuan</h2>
|
|
<span>Urutan paling mendesak</span>
|
|
</div>
|
|
<div class="priority-list" id="priority-list"></div>
|
|
</div>
|
|
|
|
<div class="dashboard-card">
|
|
<div class="card-title">
|
|
<h2>Kebutuhan Terbanyak</h2>
|
|
<span>Basis penyaluran bantuan</span>
|
|
</div>
|
|
<div class="need-list" id="need-list"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Peta -->
|
|
<section id="map-view" class="view-panel map-view">
|
|
<div id="map" class="map-fullscreen"></div>
|
|
|
|
<button id="btn-my-location" class="fab-location" title="Lokasi Saya"><i class="fas fa-crosshairs"></i></button>
|
|
<div class="fab-container">
|
|
<button class="fab-main" title="Tambah Data"><i class="fas fa-plus"></i></button>
|
|
<div class="fab-menu">
|
|
<button class="fab-item" id="fab-add-ri" title="Tambah Rumah Ibadah"><i class="fas fa-place-of-worship"></i></button>
|
|
<button class="fab-item" id="fab-add-pm" title="Tambah Penduduk Miskin"><i class="fas fa-user-plus"></i></button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Modal Rumah Ibadah -->
|
|
<div class="modal-backdrop" id="modal-ri">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 id="modal-ri-title">Tambah Rumah Ibadah</h2>
|
|
<button class="btn-close" onclick="closeModal('modal-ri')"><i class="fas fa-times"></i></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="form-ri">
|
|
<input type="hidden" id="ri-id">
|
|
<div class="form-group">
|
|
<label>Nama Rumah Ibadah</label>
|
|
<input type="text" id="ri-nama" class="form-control" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Jenis</label>
|
|
<select id="ri-jenis" class="form-control" required>
|
|
<option value="Masjid">Masjid</option>
|
|
<option value="Gereja">Gereja</option>
|
|
<option value="Pura">Pura</option>
|
|
<option value="Vihara">Vihara</option>
|
|
<option value="Klenteng">Klenteng</option>
|
|
<option value="Lainnya">Lainnya</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Kontak</label>
|
|
<input type="text" id="ri-kontak" class="form-control">
|
|
</div>
|
|
<div class="form-group" style="display: flex; gap: 10px;">
|
|
<div style="flex: 1;">
|
|
<label>Latitude</label>
|
|
<input type="number" step="any" id="ri-lat" class="form-control" required readonly>
|
|
</div>
|
|
<div style="flex: 1;">
|
|
<label>Longitude</label>
|
|
<input type="number" step="any" id="ri-lng" class="form-control" required readonly>
|
|
</div>
|
|
<div style="display: flex; align-items: flex-end;">
|
|
<button type="button" class="btn btn-secondary" onclick="pickLocation('ri')"><i class="fas fa-map-marker-alt"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Alamat (Otomatis)</label>
|
|
<textarea id="ri-alamat" class="form-control" rows="2" readonly></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Radius Pelayanan (meter)</label>
|
|
<input type="number" id="ri-radius" class="form-control" value="500" required>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-secondary" onclick="closeModal('modal-ri')">Batal</button>
|
|
<button class="btn btn-primary" onclick="saveRI()">Simpan</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Penduduk Miskin -->
|
|
<div class="modal-backdrop" id="modal-pm">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 id="modal-pm-title">Tambah Penduduk Miskin</h2>
|
|
<button class="btn-close" onclick="closeModal('modal-pm')"><i class="fas fa-times"></i></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="form-pm">
|
|
<input type="hidden" id="pm-id">
|
|
|
|
<h3 style="margin-bottom: 12px; border-bottom: 1px solid #eee; padding-bottom: 8px;">Data Kepala Keluarga</h3>
|
|
<div class="form-group">
|
|
<label>Nama Kepala Keluarga</label>
|
|
<input type="text" id="pm-nama" class="form-control" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>NIK</label>
|
|
<input type="text" id="pm-nik" class="form-control">
|
|
</div>
|
|
<div class="form-group" style="display: flex; gap: 10px;">
|
|
<div style="flex: 1;">
|
|
<label>Latitude</label>
|
|
<input type="number" step="any" id="pm-lat" class="form-control" required readonly>
|
|
</div>
|
|
<div style="flex: 1;">
|
|
<label>Longitude</label>
|
|
<input type="number" step="any" id="pm-lng" class="form-control" required readonly>
|
|
</div>
|
|
<div style="display: flex; align-items: flex-end;">
|
|
<button type="button" class="btn btn-secondary" onclick="pickLocation('pm')"><i class="fas fa-map-marker-alt"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Alamat</label>
|
|
<textarea id="pm-alamat" class="form-control" rows="2" readonly></textarea>
|
|
</div>
|
|
|
|
<h3 style="margin: 20px 0 12px; border-bottom: 1px solid #eee; padding-bottom: 8px;">Kebutuhan & Kondisi</h3>
|
|
<div class="form-group">
|
|
<label>Kategori Kebutuhan</label>
|
|
<select id="pm-kategori-kebutuhan" class="form-control">
|
|
<option value="">Pilih Kebutuhan</option>
|
|
<option value="Sembako">Sembako</option>
|
|
<option value="Pendidikan">Pendidikan</option>
|
|
<option value="Kesehatan">Kesehatan</option>
|
|
<option value="Modal Usaha">Modal Usaha</option>
|
|
<option value="Rumah Tidak Layak">Rumah Tidak Layak</option>
|
|
<option value="Bantuan Darurat">Bantuan Darurat</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Deskripsi Kebutuhan</label>
|
|
<textarea id="pm-deskripsi-kebutuhan" class="form-control" rows="2" placeholder="Contoh: butuh sembako bulanan, biaya obat, seragam sekolah"></textarea>
|
|
</div>
|
|
<div class="form-group" style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
|
|
<div>
|
|
<label>Kondisi Rumah</label>
|
|
<select id="pm-kondisi-rumah" class="form-control">
|
|
<option value="">Pilih Kondisi</option>
|
|
<option value="Layak">Layak</option>
|
|
<option value="Rentan">Rentan</option>
|
|
<option value="Tidak Layak">Tidak Layak</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label>Penghasilan / Bulan</label>
|
|
<input type="number" id="pm-penghasilan" class="form-control" min="0" inputmode="numeric" placeholder="0">
|
|
</div>
|
|
</div>
|
|
|
|
<h3 style="margin: 20px 0 12px; border-bottom: 1px solid #eee; padding-bottom: 8px;">Status Bantuan</h3>
|
|
<div class="form-group">
|
|
<label>Status</label>
|
|
<select id="pm-status" class="form-control" onchange="toggleBantuanFields()" required>
|
|
<option value="Belum dibantu">Belum Dibantu</option>
|
|
<option value="Menunggu verifikasi">Menunggu Verifikasi</option>
|
|
<option value="Sudah dibantu">Sudah Dibantu</option>
|
|
</select>
|
|
</div>
|
|
<div id="bantuan-fields" style="display: none;">
|
|
<div class="form-group">
|
|
<label>Jenis Bantuan</label>
|
|
<input type="text" id="pm-jenis-bantuan" class="form-control">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Tanggal Bantuan</label>
|
|
<input type="date" id="pm-tanggal-bantuan" class="form-control">
|
|
</div>
|
|
</div>
|
|
|
|
<h3 style="margin: 20px 0 12px; border-bottom: 1px solid #eee; padding-bottom: 8px;">Survey Lapangan</h3>
|
|
<div class="form-group">
|
|
<label>Status Tindak Lanjut</label>
|
|
<select id="pm-tindak-lanjut" class="form-control">
|
|
<option value="Belum disurvei">Belum Disurvei</option>
|
|
<option value="Perlu survei">Perlu Survei</option>
|
|
<option value="Sudah disurvei">Sudah Disurvei</option>
|
|
<option value="Sudah diverifikasi">Sudah Diverifikasi</option>
|
|
<option value="Sedang diproses">Sedang Diproses</option>
|
|
<option value="Sudah dibantu">Sudah Dibantu</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Catatan Survey</label>
|
|
<textarea id="pm-catatan-survei" class="form-control" rows="2"></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Bukti / Foto / Dokumen</label>
|
|
<input type="file" id="pm-bukti-file" class="form-control" accept="image/*,.pdf">
|
|
<input type="hidden" id="pm-existing-bukti-file">
|
|
</div>
|
|
|
|
<h3 style="margin: 20px 0 12px; border-bottom: 1px solid #eee; padding-bottom: 8px; display: flex; justify-content: space-between;">
|
|
Anggota Keluarga
|
|
<button type="button" class="btn btn-secondary" style="padding: 4px 8px; font-size: 0.8rem;" onclick="addAnggotaField()"><i class="fas fa-plus"></i> Tambah</button>
|
|
</h3>
|
|
<div id="anggota-container" class="dynamic-list">
|
|
<!-- Dynamic fields here -->
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-secondary" onclick="closeModal('modal-pm')">Batal</button>
|
|
<button class="btn btn-primary" onclick="savePM()">Simpan</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Riwayat Bantuan -->
|
|
<div class="modal-backdrop" id="modal-bantuan">
|
|
<div class="modal-content modal-content-sm">
|
|
<div class="modal-header">
|
|
<div>
|
|
<p class="modal-kicker">Penyaluran Bantuan</p>
|
|
<h2 id="modal-bantuan-title">Tambah Riwayat Bantuan</h2>
|
|
</div>
|
|
<button class="btn-close" onclick="closeModal('modal-bantuan')"><i class="fas fa-times"></i></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="form-bantuan">
|
|
<input type="hidden" id="bantuan-penduduk-id">
|
|
<div class="form-group">
|
|
<label>Keluarga Penerima</label>
|
|
<input type="text" id="bantuan-penerima" class="form-control" readonly>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Jenis Bantuan</label>
|
|
<input type="text" id="bantuan-jenis" class="form-control" list="bantuan-jenis-list" placeholder="Contoh: Sembako bulanan" required>
|
|
<datalist id="bantuan-jenis-list">
|
|
<option value="Sembako">
|
|
<option value="Pendidikan">
|
|
<option value="Kesehatan">
|
|
<option value="Modal Usaha">
|
|
<option value="Renovasi Rumah">
|
|
<option value="Bantuan Darurat">
|
|
</datalist>
|
|
</div>
|
|
<div class="form-grid two-cols">
|
|
<div class="form-group">
|
|
<label>Tanggal Bantuan</label>
|
|
<input type="date" id="bantuan-tanggal" class="form-control" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Nilai Bantuan</label>
|
|
<input type="number" id="bantuan-nilai" class="form-control" min="0" placeholder="Opsional">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Pemberi Bantuan</label>
|
|
<input type="text" id="bantuan-pemberi" class="form-control" value="Admin">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Catatan</label>
|
|
<textarea id="bantuan-catatan" class="form-control" rows="3" placeholder="Contoh: bantuan diserahkan langsung ke rumah penerima"></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Bukti Bantuan</label>
|
|
<input type="file" id="bantuan-bukti-file" class="form-control" accept="image/*,.pdf">
|
|
<p class="form-hint">Opsional, bisa berupa foto penyerahan atau dokumen PDF.</p>
|
|
</div>
|
|
<div class="form-alert" id="bantuan-alert" hidden></div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-secondary" onclick="closeModal('modal-bantuan')">Batal</button>
|
|
<button class="btn btn-primary" id="btn-save-bantuan" onclick="saveBantuan()">Simpan Bantuan</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="assets/vendor/leaflet/leaflet.js"></script>
|
|
<script src="assets/js/app.js?v=<?= filemtime(__DIR__ . '/assets/js/app.js') ?>"></script>
|
|
</body>
|
|
</html>
|