AleksanderWilliam/WebGIS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add fitur Dashboard Analisis Penerima Bantuan

Browse Source
This commit is contained in:
Aleksander William
2026-06-09 17:46:57 +07:00
parent 36a02dad66
commit ec4749b123
7 changed files with 673 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebGISPovertyMap/index.php
+70
View File
@@ -12,6 +12,8 @@ $isAdmin = isset($_SESSION['role']) && $_SESSION['role'] === 'admin';
<title>Sistem WebGIS Terpadu — Kota Pontianak</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css" />
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap"
rel="stylesheet">
@@ -267,6 +269,13 @@ $isAdmin = isset($_SESSION['role']) && $_SESSION['role'] === 'admin';
<label class="sfield-label">Nama Kepala Keluarga <span class="required">*</span></label>
<input type="text" id="sb_nama_penduduk" class="sinput" placeholder="Contoh: Siti Rahayu">
</div>
<div class="sfield">
<label class="sfield-label">Status Bantuan <span class="required">*</span></label>
<select id="sb_status_bantuan" class="sselect">
<option value="Belum Menerima">Belum Menerima Bantuan</option>
<option value="Sudah Menerima">Sudah Menerima Bantuan</option>
</select>
</div>
<button class="btn-save-sidebar btn-red-solid" onclick="savePendudukSidebar()">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
@@ -279,6 +288,65 @@ $isAdmin = isset($_SESSION['role']) && $_SESSION['role'] === 'admin';
</div><!-- end sidebar-body -->
</div><!-- end input-sidebar -->
<!-- ==============================
DASHBOARD STATISTIK (RIGHT SIDEBAR)
============================== -->
<div class="dashboard-sidebar" id="dashboard-sidebar">
<div class="dashboard-header">
<div class="dashboard-title">
<div class="dashboard-title-icon">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M11 3.055A9.003 9.003 0 1020.945 13H11V3.055z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" />
</svg>
</div>
<div>
<div class="dashboard-title-text">Dashboard Analisis</div>
<div class="dashboard-title-sub" id="dashboard-target-name">Rumah Ibadah</div>
</div>
</div>
<button class="dashboard-close" id="dashboard-close-btn" onclick="closeDashboard()" title="Tutup">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="dashboard-body">
<!-- Stats Summary Cards -->
<div class="stats-grid">
<div class="stat-card">
<div class="stat-num" id="stat-total-kk">0</div>
<div class="stat-label">Total KK Miskin</div>
</div>
<div class="stat-card stat-success">
<div class="stat-num" id="stat-sudah-bantuan">0</div>
<div class="stat-label">Sudah Menerima</div>
</div>
<div class="stat-card stat-danger">
<div class="stat-num" id="stat-belum-bantuan">0</div>
<div class="stat-label">Belum Menerima</div>
</div>
</div>
<!-- Chart Section -->
<div class="chart-section">
<div class="chart-title">Distribusi Penerima Bantuan</div>
<div class="chart-container" style="position: relative; height: 180px; width: 100%;">
<canvas id="povertyChart"></canvas>
</div>
</div>
<!-- List of Families inside Radius -->
<div class="families-section">
<div class="families-title">Daftar KK Miskin Terdekat</div>
<div class="families-list" id="dashboard-families-list">
<!-- Dynamic List Items -->
</div>
</div>
</div>
</div>
<!-- Overlay saat mode pilih lokasi aktif -->
<div class="pick-mode-overlay" id="pick-overlay">
<div class="pick-mode-banner">
@@ -294,7 +362,9 @@ $isAdmin = isset($_SESSION['role']) && $_SESSION['role'] === 'admin';
<div id="map" style="padding-top: 56px; height: 100vh; box-sizing: border-box;"></div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet.heat@0.2.0/dist/leaflet-heat.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Variabel global untuk mendeteksi status admin di script.js