1099 lines
51 KiB
PHP
1099 lines
51 KiB
PHP
<?php
|
||
// ============================================================
|
||
// index.php – Halaman Utama WebGIS
|
||
// ============================================================
|
||
session_start();
|
||
|
||
$modul = $_GET['modul'] ?? null;
|
||
|
||
if (!$modul) {
|
||
?>
|
||
<!DOCTYPE html>
|
||
<html lang="id">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Pilih Project Kelas - WebGIS Publik</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
|
||
<style>
|
||
body { font-family: 'Plus Jakarta Sans', sans-serif; }
|
||
.bg-map {
|
||
background-image: url('assets/img/map-bg.png');
|
||
background-size: cover;
|
||
background-position: center;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-white min-h-screen flex items-center justify-center bg-map relative">
|
||
<div class="absolute inset-0 bg-white/90 backdrop-blur-md"></div>
|
||
|
||
<div class="relative z-10 max-w-5xl w-full px-6 py-12">
|
||
<div class="text-center mb-12">
|
||
<h1 class="text-4xl md:text-5xl font-extrabold text-rose-700 mb-4 tracking-tight drop-shadow-sm">
|
||
Pusat Informasi Geospasial
|
||
</h1>
|
||
<p class="text-slate-600 text-lg max-w-2xl mx-auto font-medium">
|
||
Akses publik untuk mengeksplorasi, menambahkan, dan mengedit data pada 3 modul utama WebGIS.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
<!-- SPBU -->
|
||
<a href="?modul=spbu" class="group relative bg-white border-2 border-rose-100 p-8 rounded-3xl transition-all duration-300 hover:-translate-y-2 hover:shadow-[0_20px_40px_-15px_rgba(225,29,72,0.3)] hover:border-rose-400">
|
||
<div class="w-16 h-16 bg-rose-50 text-rose-600 rounded-2xl flex items-center justify-center text-3xl mb-6 group-hover:bg-rose-600 group-hover:text-white transition-colors duration-300 shadow-sm border border-rose-100">⛽</div>
|
||
<h2 class="text-2xl font-bold mb-3 text-slate-800 group-hover:text-rose-700 transition-colors">Peta Lokasi SPBU</h2>
|
||
<p class="text-slate-500 text-sm leading-relaxed font-medium">
|
||
Manajemen dan pemetaan titik lokasi SPBU di seluruh wilayah, beserta informasi layanan 24 jam.
|
||
</p>
|
||
</a>
|
||
|
||
<!-- Tematik -->
|
||
<a href="?modul=tematik" class="group relative bg-white border-2 border-rose-100 p-8 rounded-3xl transition-all duration-300 hover:-translate-y-2 hover:shadow-[0_20px_40px_-15px_rgba(225,29,72,0.3)] hover:border-rose-400">
|
||
<div class="w-16 h-16 bg-rose-50 text-rose-600 rounded-2xl flex items-center justify-center text-3xl mb-6 group-hover:bg-rose-600 group-hover:text-white transition-colors duration-300 shadow-sm border border-rose-100">🗺️</div>
|
||
<h2 class="text-2xl font-bold mb-3 text-slate-800 group-hover:text-rose-700 transition-colors">Peta Tematik</h2>
|
||
<p class="text-slate-500 text-sm leading-relaxed font-medium">
|
||
Visualisasi batas wilayah kecamatan, jaringan sungai besar, dan hierarki jaringan jalan.
|
||
</p>
|
||
</a>
|
||
|
||
<!-- Digitasi -->
|
||
<a href="?modul=digitasi" class="group relative bg-white border-2 border-rose-100 p-8 rounded-3xl transition-all duration-300 hover:-translate-y-2 hover:shadow-[0_20px_40px_-15px_rgba(225,29,72,0.3)] hover:border-rose-400">
|
||
<div class="w-16 h-16 bg-rose-50 text-rose-600 rounded-2xl flex items-center justify-center text-3xl mb-6 group-hover:bg-rose-600 group-hover:text-white transition-colors duration-300 shadow-sm border border-rose-100">📐</div>
|
||
<h2 class="text-2xl font-bold mb-3 text-slate-800 group-hover:text-rose-700 transition-colors">Digitasi Lahan</h2>
|
||
<p class="text-slate-500 text-sm leading-relaxed font-medium">
|
||
Fitur penggambaran poligon parsil tanah dan garis jalan secara interaktif layaknya petugas.
|
||
</p>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="mt-16 text-center text-slate-400 text-sm font-semibold tracking-wide">
|
||
© 2026 WebGIS PENGENTASAN KEMISKINAN
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|
||
<?php
|
||
exit;
|
||
}
|
||
|
||
// Lanjut jika modul sudah dipilih (spbu/tematik/digitasi)
|
||
|
||
|
||
// Aplikasi Publik (Tidak butuh login)
|
||
$currentUser = 'Pengunjung Publik';
|
||
$currentRole = 'petugas'; // Berikan role petugas agar pengunjung dapat mengedit data
|
||
|
||
|
||
include 'koneksi.php';
|
||
|
||
// Eksekusi ALTER TABLE secara diam-diam jika kolom belum ada
|
||
try {
|
||
$pdo->exec("ALTER TABLE penduduk_miskin ADD COLUMN status_bantuan ENUM('Belum Disalurkan', 'Proses', 'Sudah Disalurkan') DEFAULT 'Belum Disalurkan'");
|
||
} catch(PDOException $e) {
|
||
// Abaikan error jika kolom sudah ada
|
||
}
|
||
|
||
// Ambil semua data
|
||
$stmt = $pdo->query("SELECT * FROM points ORDER BY id DESC");
|
||
$points = $stmt->fetchAll();
|
||
|
||
$stmt = $pdo->query("SELECT * FROM jalan ORDER BY id DESC");
|
||
$jalan = $stmt->fetchAll();
|
||
|
||
$stmt = $pdo->query("SELECT * FROM polygon ORDER BY id DESC");
|
||
$polygons = $stmt->fetchAll();
|
||
|
||
$stmt = $pdo->query("SELECT * FROM fasilitas_publik ORDER BY id DESC");
|
||
$fasilitasPublik = $stmt->fetchAll();
|
||
|
||
$stmt = $pdo->query("SELECT pm.*, fp.nama AS fp_nama FROM penduduk_miskin pm LEFT JOIN fasilitas_publik fp ON pm.fasilitas_publik_id = fp.id ORDER BY pm.id DESC");
|
||
$pendudukMiskin = $stmt->fetchAll();
|
||
|
||
// Statistik dashboard
|
||
$totalFP = count($fasilitasPublik);
|
||
$totalPM = count($pendudukMiskin);
|
||
$ditangani = count(array_filter($pendudukMiskin, fn($p) => $p['status_jangkauan'] === 'Dalam Jangkauan'));
|
||
$belumDitangani = $totalPM - $ditangani;
|
||
$persen = $totalPM > 0 ? round(($ditangani / $totalPM) * 100, 1) : 0;
|
||
|
||
$totalSPBU = count($points);
|
||
$spbu24 = count(array_filter($points, fn($p) => $p['buka_24_jam'] === 'Ya'));
|
||
$spbuTidak = $totalSPBU - $spbu24;
|
||
?>
|
||
<!DOCTYPE html>
|
||
<html lang="id">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>WebGIS – Sistem Analisis Geospasial Pengentasan Kemiskinan</title>
|
||
|
||
<!-- Leaflet CSS -->
|
||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="">
|
||
<!-- Google Fonts -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||
<!-- Chart.js -->
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
|
||
<!-- SweetAlert2 -->
|
||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||
<!-- Lottie Web -->
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"></script>
|
||
<!-- Custom CSS -->
|
||
<link rel="stylesheet" href="assets/css/style.css?v=36">
|
||
<style>
|
||
/* Sticky Header Sidebar */
|
||
.sidebar-top-sticky {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(12px);
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
border-bottom: 1px solid transparent;
|
||
flex-shrink: 0;
|
||
z-index: 10;
|
||
}
|
||
|
||
/* Saat di-scroll */
|
||
.sidebar-top-sticky.scrolled {
|
||
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
|
||
border-bottom: 1px solid var(--sidebar-border);
|
||
}
|
||
|
||
/* Animasi logo sub */
|
||
.logo-sub {
|
||
transition: all 0.3s ease;
|
||
max-height: 20px;
|
||
opacity: 1;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.sidebar-top-sticky.scrolled .btn-back-dashboard {
|
||
padding: 8px 16px !important;
|
||
font-size: 0.75rem !important;
|
||
}
|
||
|
||
.sidebar-top-sticky.scrolled .sidebar-header {
|
||
padding: 10px 16px !important;
|
||
}
|
||
|
||
.sidebar-top-sticky.scrolled .logo-sub {
|
||
max-height: 0;
|
||
opacity: 0;
|
||
margin-top: 0;
|
||
}
|
||
|
||
.sidebar-top-sticky.scrolled .logo-icon svg {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
|
||
.sidebar-scrollable {
|
||
flex: 1;
|
||
min-height: 0;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* Custom Scrollbar Merah Putih untuk sidebar-scrollable */
|
||
.sidebar-scrollable::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
.sidebar-scrollable::-webkit-scrollbar-track {
|
||
background: rgba(0,0,0,0.02);
|
||
}
|
||
.sidebar-scrollable::-webkit-scrollbar-thumb {
|
||
background: rgba(225, 29, 72, 0.2); /* Merah transparan */
|
||
border-radius: 6px;
|
||
}
|
||
.sidebar-scrollable::-webkit-scrollbar-thumb:hover {
|
||
background: rgba(225, 29, 72, 0.5); /* Merah saat dihover */
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ============================================================
|
||
SPLASH SCREEN PRELOADER
|
||
============================================================ -->
|
||
<div id="splashScreen" style="position:fixed; inset:0; z-index:9999; background:rgba(15, 23, 42, 0.85); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); display:flex; flex-direction:column; align-items:center; justify-content:center; transition:opacity 0.5s ease, visibility 0.5s ease;">
|
||
<!-- Lottie Container -->
|
||
<div id="lottieContainer" style="width:250px; height:250px; margin-bottom:20px;"></div>
|
||
<!-- Pulse Text -->
|
||
<div style="color:white; font-family:'Plus Jakarta Sans', sans-serif; font-weight:600; font-size:16px; letter-spacing:0.5px; animation:pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;">
|
||
Menyiapkan Engine Geospasial...
|
||
</div>
|
||
<style>
|
||
@keyframes pulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: .5; }
|
||
}
|
||
.splash-hidden {
|
||
opacity: 0 !important;
|
||
visibility: hidden !important;
|
||
}
|
||
</style>
|
||
</div>
|
||
|
||
<!-- ============================================================
|
||
SIDEBAR
|
||
============================================================ -->
|
||
<aside class="sidebar" id="sidebar">
|
||
<div class="sidebar-top-sticky" id="sidebarSticky">
|
||
<a href="index.php" class="btn-back-dashboard" style="display:flex;align-items:center;gap:8px;padding:12px 16px;color:#e11d48;background:rgba(225,29,72,0.03);text-decoration:none;border-bottom:1px solid rgba(225,29,72,0.1);font-size:0.85rem;font-weight:700;transition:all 0.3s;" title="Kembali ke Menu Utama">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
|
||
Kembali ke Menu Utama
|
||
</a>
|
||
|
||
<!-- Header Sidebar -->
|
||
<div class="sidebar-header">
|
||
<div class="sidebar-logo">
|
||
<div class="logo-icon">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none">
|
||
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z" fill="currentColor" opacity=".9"/>
|
||
<circle cx="12" cy="9" r="2.5" fill="white"/>
|
||
</svg>
|
||
</div>
|
||
<?php
|
||
$modulNames = [
|
||
'utuh' => 'Semua Modul',
|
||
'spbu' => 'Modul SPBU',
|
||
'bantuan' => 'Modul Bantuan',
|
||
'tematik' => 'Peta Tematik',
|
||
'digitasi' => 'Modul Digitasi'
|
||
];
|
||
$modulTitle = $modulNames[$modul] ?? 'Analisis Spasial';
|
||
?>
|
||
<div class="logo-text">
|
||
<span class="logo-title">WebGIS</span>
|
||
<span class="logo-sub" style="color: var(--accent); font-weight: 700;"><?= $modulTitle ?></span>
|
||
</div>
|
||
</div>
|
||
<button class="sidebar-toggle" id="sidebarToggle" title="Sembunyikan Sidebar">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||
<path d="M15 18l-6-6 6-6"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Scrollable Area -->
|
||
<div class="sidebar-scrollable" id="sidebarScrollable">
|
||
<!-- User Info -->
|
||
<div class="sidebar-user">
|
||
<div class="user-info">
|
||
<div class="user-avatar"><?= strtoupper(substr($currentUser, 0, 1)) ?></div>
|
||
<div class="user-detail">
|
||
<span class="user-name"><?= htmlspecialchars($currentUser) ?></span>
|
||
<span class="user-role"><?= ucfirst($currentRole) ?></span>
|
||
</div>
|
||
</div>
|
||
<?php if (isset($_SESSION['user_id'])): ?>
|
||
<a href="logout.php" class="btn-logout" title="Logout">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
|
||
<polyline points="16 17 21 12 16 7"/>
|
||
<line x1="21" y1="12" x2="9" y2="12"/>
|
||
</svg>
|
||
</a>
|
||
<?php endif; ?>
|
||
</div>
|
||
|
||
|
||
<!-- Dashboard Statistik -->
|
||
<?php if (in_array($modul, ['spbu', 'bantuan', 'utuh'])): ?>
|
||
<div class="sidebar-section">
|
||
<div class="section-label">Dashboard Statistik</div>
|
||
|
||
<?php if ($modul === 'spbu' || $modul === 'utuh'): ?>
|
||
<div class="stats-grid mb-4">
|
||
<div class="stat-card stat-blue">
|
||
<div class="stat-icon">⛽</div>
|
||
<div class="stat-body">
|
||
<div class="stat-value" id="statTotalSPBU"><?= $totalSPBU ?></div>
|
||
<div class="stat-label">Total SPBU</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card stat-green">
|
||
<div class="stat-icon">✅</div>
|
||
<div class="stat-body">
|
||
<div class="stat-value" id="statSPBU24"><?= $spbu24 ?></div>
|
||
<div class="stat-label">Buka 24 Jam</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card stat-red">
|
||
<div class="stat-icon">⚠️</div>
|
||
<div class="stat-body">
|
||
<div class="stat-value" id="statSPBUTidak"><?= $spbuTidak ?></div>
|
||
<div class="stat-label">Tidak 24 Jam</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<?php if ($modul === 'bantuan' || $modul === 'utuh'): ?>
|
||
<div class="stats-grid">
|
||
<div class="stat-card stat-blue">
|
||
<div class="stat-icon">🏢</div>
|
||
<div class="stat-body">
|
||
<div class="stat-value" id="statTotalRI"><?= $totalFP ?></div>
|
||
<div class="stat-label">Fasilitas Publik</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card stat-amber">
|
||
<div class="stat-icon">👥</div>
|
||
<div class="stat-body">
|
||
<div class="stat-value" id="statTotalPM"><?= $totalPM ?></div>
|
||
<div class="stat-label">Penduduk Miskin</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card stat-green">
|
||
<div class="stat-icon">✅</div>
|
||
<div class="stat-body">
|
||
<div class="stat-value" id="statDitangani"><?= $ditangani ?></div>
|
||
<div class="stat-label">Ditangani</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card stat-red">
|
||
<div class="stat-icon">⚠️</div>
|
||
<div class="stat-body">
|
||
<div class="stat-value" id="statBelum"><?= $belumDitangani ?></div>
|
||
<div class="stat-label">Belum Ditangani</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Progress cakupan -->
|
||
<div class="coverage-bar-wrap">
|
||
<div class="coverage-bar-header">
|
||
<span>Cakupan Bantuan</span>
|
||
<strong id="statPersen"><?= $persen ?>%</strong>
|
||
</div>
|
||
<div class="coverage-bar-track">
|
||
<div class="coverage-bar-fill" id="statProgressBar" style="width: <?= $persen ?>%"></div>
|
||
</div>
|
||
</div>
|
||
<?php endif; ?>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<!-- Tools -->
|
||
<?php if (in_array($modul, ['spbu', 'bantuan', 'digitasi', 'utuh'])): ?>
|
||
<div class="sidebar-section<?= $currentRole === 'guest' ? ' hidden' : '' ?>" id="sectionTools">
|
||
<div class="section-label">Alat Peta</div>
|
||
<div class="tool-grid">
|
||
<?php if ($modul === 'spbu' || $modul === 'utuh'): ?>
|
||
<?php if ($currentRole === 'admin' || $currentRole === 'petugas'): ?>
|
||
<button class="tool-btn active" id="btnToolPoint" data-mode="point" title="Tambah SPBU/Titik">
|
||
<span class="tool-icon">📍</span>
|
||
<span><?= $modul === 'spbu' ? 'Tambah SPBU' : 'Titik' ?></span>
|
||
</button>
|
||
<?php endif; ?>
|
||
<?php endif; ?>
|
||
|
||
<?php if ($modul === 'digitasi' || $modul === 'utuh'): ?>
|
||
<?php if ($currentRole === 'admin'): ?>
|
||
<button class="tool-btn" id="btnToolJalan" data-mode="jalan" title="Gambar Jalan">
|
||
<span class="tool-icon">🛣️</span>
|
||
<span>Jalan</span>
|
||
</button>
|
||
<button class="tool-btn" id="btnToolPolygon" data-mode="polygon" title="Gambar Polygon">
|
||
<span class="tool-icon">⬜</span>
|
||
<span>Polygon</span>
|
||
</button>
|
||
<button class="tool-btn" id="btnToolFasilitasPublik" data-mode="fasilitas_publik" title="Fasilitas Publik">
|
||
<span class="tool-icon">🏢</span>
|
||
<span>Fasilitas</span>
|
||
</button>
|
||
<?php endif; ?>
|
||
<?php endif; ?>
|
||
|
||
<?php if ($modul === 'bantuan' || $modul === 'utuh'): ?>
|
||
<?php if ($currentRole === 'admin' || $currentRole === 'petugas'): ?>
|
||
<button class="tool-btn<?= ($modul === 'bantuan' || $currentRole === 'petugas') ? ' active' : '' ?>" id="btnToolPenduduk" data-mode="penduduk_miskin" title="Penduduk Miskin">
|
||
<span class="tool-icon">👥</span>
|
||
<span>Miskin</span>
|
||
</button>
|
||
<?php endif; ?>
|
||
<?php endif; ?>
|
||
|
||
<button class="tool-btn" id="btnToolLokasi" data-mode="lokasi" title="Lokasi Saya">
|
||
<span class="tool-icon">📡</span>
|
||
<span>Lokasi</span>
|
||
</button>
|
||
</div>
|
||
<div class="help-text" id="helpText">
|
||
Pilih alat lalu klik pada peta untuk menambahkan data.
|
||
</div>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<!-- Kontrol Layer -->
|
||
<div class="sidebar-section">
|
||
<div class="section-label">Kontrol Layer</div>
|
||
<div class="layer-list" id="layerList">
|
||
<?php if (in_array($modul, ['bantuan', 'utuh'])): ?>
|
||
<label class="layer-item">
|
||
<input type="checkbox" id="layerFasilitasPublik" checked>
|
||
<span class="layer-icon" style="font-size:14px; margin-right:6px;">🏢</span>
|
||
<span>Fasilitas Publik</span>
|
||
</label>
|
||
<label class="layer-item">
|
||
<input type="checkbox" id="layerPendudukDalam" checked>
|
||
<span class="layer-icon" style="font-size:14px; margin-right:6px;">✅</span>
|
||
<span>Penduduk Ditangani</span>
|
||
</label>
|
||
<label class="layer-item">
|
||
<input type="checkbox" id="layerPendudukLuar" checked>
|
||
<span class="layer-icon" style="font-size:14px; margin-right:6px;">❌</span>
|
||
<span>Penduduk Luar Jangkauan</span>
|
||
</label>
|
||
<?php endif; ?>
|
||
|
||
<?php if (in_array($modul, ['spbu', 'utuh'])): ?>
|
||
<label class="layer-item">
|
||
<input type="checkbox" id="layerSpbu24" checked>
|
||
<span class="layer-icon" style="font-size:14px; margin-right:6px;">⛽</span>
|
||
<span>SPBU Buka 24 Jam</span>
|
||
</label>
|
||
<label class="layer-item">
|
||
<input type="checkbox" id="layerSpbuTidak" checked>
|
||
<span class="layer-icon" style="font-size:14px; margin-right:6px;">🚧</span>
|
||
<span>SPBU Tidak 24 Jam</span>
|
||
</label>
|
||
<?php endif; ?>
|
||
|
||
<?php if (in_array($modul, ['tematik', 'utuh'])): ?>
|
||
<label class="layer-item">
|
||
<input type="checkbox" id="layerKecamatan" <?= $modul === 'tematik' ? 'checked' : '' ?>>
|
||
<span class="layer-icon" style="font-size:14px; margin-right:6px;">🗺️</span>
|
||
<span>Batas Kecamatan</span>
|
||
</label>
|
||
<label class="layer-item">
|
||
<input type="checkbox" id="layerSungai" <?= $modul === 'tematik' ? 'checked' : '' ?>>
|
||
<span class="layer-icon" style="font-size:14px; margin-right:6px;">🌊</span>
|
||
<span>Sungai Besar</span>
|
||
</label>
|
||
<label class="layer-item"><input type="checkbox" id="layerGeoJalan" <?= $modul === 'tematik' ? 'checked' : '' ?>>
|
||
<span class="layer-icon" style="font-size:14px; margin-right:6px;">🛣️</span>
|
||
<span>Jaringan Jalan</span>
|
||
</label>
|
||
<?php endif; ?>
|
||
|
||
<?php if (in_array($modul, ['digitasi', 'utuh'])): ?>
|
||
<label class="layer-item">
|
||
<input type="checkbox" id="layerJalan">
|
||
<span class="layer-icon" style="font-size:14px; margin-right:6px;">🛣️</span>
|
||
<span>Jalan (Data)</span>
|
||
</label>
|
||
<label class="layer-item">
|
||
<input type="checkbox" id="layerPolygon">
|
||
<span class="layer-icon" style="font-size:14px; margin-right:6px;">⬜</span>
|
||
<span>Polygon (Data)</span>
|
||
</label>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Legenda -->
|
||
<?php if ($modul !== 'digitasi'): ?>
|
||
<div class="sidebar-section">
|
||
<div class="section-label">Legenda</div>
|
||
<div class="legend-list">
|
||
<?php if (in_array($modul, ['bantuan', 'utuh'])): ?>
|
||
<div class="legend-item">
|
||
<span class="legend-marker-wrapper"><span class="legend-pin fp"></span></span>
|
||
<span>Fasilitas Publik + Radius</span>
|
||
</div>
|
||
<div class="legend-item">
|
||
<span class="legend-marker-wrapper"><span class="legend-pin pm-dalam"></span></span>
|
||
<span>Penduduk Ditangani (Dalam Jangkauan)</span>
|
||
</div>
|
||
<div class="legend-item">
|
||
<span class="legend-marker-wrapper"><span class="legend-pin pm-luar"></span></span>
|
||
<span>Penduduk Luar Jangkauan</span>
|
||
</div>
|
||
<div class="legend-item" style="flex-direction:column; align-items:flex-start; margin-top:10px; background: rgba(0,0,0,0.02); padding: 8px; border-radius: 8px;">
|
||
<span style="font-size:10px; font-weight:700; color:#64748b; margin-bottom:6px; letter-spacing:0.5px;">STATUS BANTUAN (BADGE)</span>
|
||
<div style="display:flex; gap:6px; flex-wrap:wrap;">
|
||
<span style="font-size:9.5px; padding:3px 8px; border-radius:6px; font-weight:700; background:#f1f5f9; color:#475569; border: 1px solid rgba(0,0,0,0.05);">Belum Disalurkan</span>
|
||
<span style="font-size:9.5px; padding:3px 8px; border-radius:6px; font-weight:700; background:#fef3c7; color:#d97706; border: 1px solid rgba(217,119,6,0.1);">Proses</span>
|
||
<span style="font-size:9.5px; padding:3px 8px; border-radius:6px; font-weight:700; background:#dcfce7; color:#166534; border: 1px solid rgba(22,101,52,0.1);">Sudah Disalurkan</span>
|
||
</div>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<?php if (in_array($modul, ['spbu', 'utuh'])): ?>
|
||
<div class="legend-item">
|
||
<span class="legend-marker-wrapper"><span class="legend-pin" style="background:#2e7d32"></span></span>
|
||
<span>SPBU Buka 24 Jam</span>
|
||
</div>
|
||
<div class="legend-item">
|
||
<span class="legend-marker-wrapper"><span class="legend-pin" style="background:#e53935"></span></span>
|
||
<span>SPBU Tidak 24 Jam</span>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<?php if (in_array($modul, ['tematik', 'utuh'])): ?>
|
||
<div class="legend-item">
|
||
<span class="legend-line" style="background:#d32f2f"></span>
|
||
<span>Jalan Nasional</span>
|
||
</div>
|
||
<div class="legend-item">
|
||
<span class="legend-line" style="background:#f57c00"></span>
|
||
<span>Jalan Provinsi</span>
|
||
</div>
|
||
<div class="legend-item">
|
||
<span class="legend-line" style="background:#388e3c"></span>
|
||
<span>Jalan Kabupaten</span>
|
||
</div>
|
||
<?php endif; ?> <!-- Endif for in_array tematik, utuh -->
|
||
</div>
|
||
</div>
|
||
<?php endif; ?> <!-- Endif for modul !== digitasi -->
|
||
</div> <!-- End sidebar-scrollable -->
|
||
|
||
<!-- Sidebar Footer (Sticky Bottom) -->
|
||
<div class="sidebar-footer">
|
||
<button class="btn-statistik" id="btnLihatStatistik">
|
||
<span class="btn-statistik-icon">📊</span>
|
||
<span class="btn-statistik-text">
|
||
<strong>Lihat Statistik Modul</strong>
|
||
<small>Grafik interaktif & ringkasan data</small>
|
||
</span>
|
||
<span class="btn-statistik-arrow">›</span>
|
||
</button>
|
||
<p class="sidebar-footer-copy">© 2026 WebGIS Sistem Pengentasan Kemiskinan.<br>Semua Hak Cipta Dilindungi.</p>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- Sidebar collapsed toggle -->
|
||
<button class="sidebar-open-btn hidden" id="sidebarOpenBtn" title="Buka Sidebar">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||
<path d="M9 18l6-6-6-6"/>
|
||
</svg>
|
||
</button>
|
||
|
||
<!-- ============================================================
|
||
RIGHT SIDEBAR (PANEL KANAN)
|
||
============================================================ -->
|
||
<aside id="rightSidebar">
|
||
<!-- Header -->
|
||
<div class="right-sidebar-header">
|
||
<div class="right-sidebar-title">
|
||
<div class="right-sidebar-title-icon">🗂️</div>
|
||
<span>Data <?= $modulTitle ?></span>
|
||
</div>
|
||
<button class="right-sidebar-close" id="rightSidebarClose" title="Tutup Panel">
|
||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M18 6L6 18M6 6l12 12"/></svg>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Search Bar -->
|
||
<div class="right-search-wrap">
|
||
<div class="right-search-inner">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
||
<input type="text" id="rightSearchInput" placeholder="Cari nama, NIK, atau lokasi..." autocomplete="off">
|
||
</div>
|
||
</div>
|
||
|
||
<?php if ($modul === 'bantuan'): ?>
|
||
<div style="padding: 10px 16px 0;">
|
||
<button id="btnManajemenData" class="btn-manajemen" onclick="openManajemenModal()">
|
||
<span style="font-size:18px">🗃️</span> Buka Manajemen Data
|
||
</button>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<?php if ($modul === 'utuh'): ?>
|
||
<!-- Tabs untuk Modul Utuh -->
|
||
<div class="right-tabs" id="rightTabs">
|
||
<button class="right-tab-btn active" data-tab="spbu">⛽ SPBU</button>
|
||
<button class="right-tab-btn" data-tab="bantuan">👥 Bantuan</button>
|
||
<button class="right-tab-btn" data-tab="jalan">🛣️ Jalan</button>
|
||
<button class="right-tab-btn" data-tab="polygon">⬜ Parsil</button>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<!-- Meta info -->
|
||
<div class="right-sidebar-meta">
|
||
<span class="right-sidebar-meta-label">Daftar Data</span>
|
||
<span class="right-count-badge" id="rightCardCount">— entri</span>
|
||
</div>
|
||
|
||
<!-- Card List -->
|
||
<div class="right-card-list" id="rightCardList">
|
||
<!-- Skeleton loading awal -->
|
||
<?php if ($modul !== 'tematik'): ?>
|
||
<?php for ($i = 0; $i < 4; $i++): ?>
|
||
<div class="skeleton-card">
|
||
<div class="skeleton-icon"></div>
|
||
<div class="skeleton-lines">
|
||
<div class="skeleton-line w-80"></div>
|
||
<div class="skeleton-line w-50"></div>
|
||
</div>
|
||
</div>
|
||
<?php endfor; ?>
|
||
<?php endif; ?>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- Toggle Button untuk Right Sidebar -->
|
||
<button id="rightSidebarToggleBtn" title="Panel Data">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||
<path d="M15 18l-6-6 6-6"/>
|
||
</svg>
|
||
<span class="rs-toggle-label">Data</span>
|
||
</button>
|
||
|
||
<!-- ============================================================
|
||
MAP
|
||
============================================================ -->
|
||
<div id="mapContainer">
|
||
<div id="map"></div>
|
||
|
||
<!-- Notifikasi toast -->
|
||
<div class="toast-container" id="toastContainer"></div>
|
||
|
||
<!-- Loading overlay -->
|
||
<div class="map-loading" id="mapLoading">
|
||
<div class="loading-spinner"></div>
|
||
<span>Memuat peta...</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================================
|
||
MODALS
|
||
============================================================ -->
|
||
|
||
<!-- BACKDROP -->
|
||
<div class="modal-backdrop hidden" id="modalBackdrop"></div>
|
||
|
||
<!-- MODAL: Tambah/Edit Titik (Point) -->
|
||
<div class="modal hidden" id="pointModal">
|
||
<div class="modal-header">
|
||
<div class="modal-title-wrap">
|
||
<div class="modal-icon" style="background:#e3f2fd;color:#1565c0">📍</div>
|
||
<div>
|
||
<h3 class="modal-title" id="pointModalTitle">Tambah Titik</h3>
|
||
<p class="modal-subtitle">Klik peta untuk menentukan lokasi</p>
|
||
</div>
|
||
</div>
|
||
<button class="modal-close" id="closePointModal">✕</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<input type="hidden" id="point_id">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">Nama <span style="color:#e63946">*</span></label>
|
||
<input type="text" class="form-input" id="point_nama" placeholder="Nama titik..." autocomplete="off">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">No. WhatsApp <span style="color:#e63946">*</span></label>
|
||
<input type="text" class="form-input" id="point_no_wa" placeholder="08xx..." autocomplete="off">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Buka 24 Jam</label>
|
||
<div class="radio-tabs">
|
||
<label class="radio-tab">
|
||
<input type="radio" name="point_buka_24_jam" value="Ya">
|
||
<span>✓ Ya</span>
|
||
</label>
|
||
<label class="radio-tab">
|
||
<input type="radio" name="point_buka_24_jam" value="Tidak" checked>
|
||
<span>✗ Tidak</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">Latitude</label>
|
||
<input type="text" class="form-input mono" id="point_latitude" readonly placeholder="Klik peta">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Longitude</label>
|
||
<input type="text" class="form-input mono" id="point_longitude" readonly placeholder="Klik peta">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-ghost" id="cancelPointModal">Batal</button>
|
||
<button class="btn btn-primary" id="btnSavePoint">
|
||
<span>Simpan Titik</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MODAL: Jalan -->
|
||
<div class="modal hidden" id="jalanModal">
|
||
<div class="modal-header">
|
||
<div class="modal-title-wrap">
|
||
<div class="modal-icon" style="background:#fce4ec;color:#c62828">🛣️</div>
|
||
<div>
|
||
<h3 class="modal-title">Data Jalan</h3>
|
||
<p class="modal-subtitle">Klik beberapa titik, double-klik selesai</p>
|
||
</div>
|
||
</div>
|
||
<button class="modal-close" id="closeJalanModal">✕</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="form-group">
|
||
<label class="form-label">Nama Jalan <span class="req">*</span></label>
|
||
<input type="text" class="form-input" id="nama_jalan" placeholder="Nama jalan...">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Status Jalan <span class="req">*</span></label>
|
||
<select class="form-input" id="status_jalan">
|
||
<option value="">– Pilih Status –</option>
|
||
<option value="Jalan Nasional">Jalan Nasional</option>
|
||
<option value="Jalan Provinsi">Jalan Provinsi</option>
|
||
<option value="Jalan Kabupaten">Jalan Kabupaten</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">Panjang (meter)</label>
|
||
<input type="text" class="form-input mono" id="panjang_meter" readonly>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Jumlah Titik</label>
|
||
<input type="text" class="form-input mono" id="jumlah_titik_jalan" readonly value="0">
|
||
</div>
|
||
</div>
|
||
<div class="form-group hidden">
|
||
<textarea class="form-input mono" id="koordinat_jalan" rows="4" readonly></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-ghost" id="cancelJalanModal">Batal</button>
|
||
<button class="btn btn-primary" id="btnSaveJalan">Simpan Jalan</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MODAL: Polygon -->
|
||
<div class="modal hidden" id="polygonModal">
|
||
<div class="modal-header">
|
||
<div class="modal-title-wrap">
|
||
<div class="modal-icon" style="background:#f3e5f5;color:#6a1b9a">⬜</div>
|
||
<div>
|
||
<h3 class="modal-title">Data Parsil Tanah</h3>
|
||
<p class="modal-subtitle">Min. 3 titik untuk polygon</p>
|
||
</div>
|
||
</div>
|
||
<button class="modal-close" id="closePolygonModal">✕</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="form-group">
|
||
<label class="form-label">Nama Parsil <span class="req">*</span></label>
|
||
<input type="text" class="form-input" id="nama_parsil" placeholder="Nama parsil tanah...">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Status Kepemilikan <span class="req">*</span></label>
|
||
<select class="form-input" id="status_kepemilikan">
|
||
<option value="">– Pilih Status –</option>
|
||
<option value="SHM">SHM – Sertifikat Hak Milik</option>
|
||
<option value="HGB">HGB – Hak Guna Bangunan</option>
|
||
<option value="HGU">HGU – Hak Guna Usaha</option>
|
||
<option value="HP">HP – Hak Pakai</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">Luas (m²)</label>
|
||
<input type="text" class="form-input mono" id="luas_tanah" readonly>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Jumlah Titik</label>
|
||
<input type="text" class="form-input mono" id="jumlah_titik_polygon" readonly value="0">
|
||
</div>
|
||
</div>
|
||
<div class="form-group hidden">
|
||
<textarea class="form-input mono" id="koordinat_polygon" rows="4" readonly></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-ghost" id="cancelPolygonModal">Batal</button>
|
||
<button class="btn btn-primary" id="btnSavePolygon">Simpan Polygon</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MODAL: Fasilitas Publik -->
|
||
<div class="modal hidden" id="fasilitasPublikModal">
|
||
<div class="modal-header">
|
||
<div class="modal-title-wrap">
|
||
<div class="modal-icon" style="background:#e8f5e9;color:#2e7d32">🏢</div>
|
||
<div>
|
||
<h3 class="modal-title" id="fpModalTitle">Tambah Fasilitas Publik</h3>
|
||
<p class="modal-subtitle">Klik peta untuk menentukan lokasi</p>
|
||
</div>
|
||
</div>
|
||
<button class="modal-close" id="closefasilitasPublikModal">✕</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<input type="hidden" id="fp_id">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">Nama Fasilitas <span style="color:#e63946">*</span></label>
|
||
<input type="text" class="form-input" id="fp_nama" placeholder="Cth: SDN 01 Pagi" autocomplete="off">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Jenis</label>
|
||
<select class="form-input" id="fp_jenis">
|
||
<option value="">– Pilih Jenis –</option>
|
||
<option value="Kantor Desa / Pemerintahan">Kantor Desa / Pemerintahan</option>
|
||
<option value="Fasilitas Kesehatan (Puskesmas)">Fasilitas Kesehatan (Puskesmas)</option>
|
||
<option value="Rumah Ibadah (Masjid/Gereja/dll)">Rumah Ibadah (Masjid/Gereja/dll)</option>
|
||
<option value="Posko / e-Warong">Posko / e-Warong</option>
|
||
<option value="Sekolah">Sekolah</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Alamat <small>(otomatis dari koordinat)</small></label>
|
||
<div class="geocode-wrap">
|
||
<textarea class="form-input" id="fp_alamat" rows="2" placeholder="Klik peta untuk mendapatkan alamat otomatis..."></textarea>
|
||
<span class="geocode-status" id="geocodeStatus"></span>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">
|
||
Radius Pelayanan: <strong id="fp_radius_text">300</strong> meter
|
||
</label>
|
||
<div class="range-wrap">
|
||
<span class="range-min">100m</span>
|
||
<input type="range" class="range-input" id="fp_radius" min="100" max="3000" step="50" value="300">
|
||
<span class="range-max">3000m</span>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Kontak</label>
|
||
<input type="text" class="form-input" id="fp_kontak" placeholder="No. HP / WA...">
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">Latitude</label>
|
||
<input type="text" class="form-input mono" id="fp_latitude" readonly placeholder="Klik peta">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Longitude</label>
|
||
<input type="text" class="form-input mono" id="fp_longitude" readonly placeholder="Klik peta">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-ghost" id="cancelfasilitasPublikModal">Batal</button>
|
||
<button class="btn btn-primary" id="btnSaveFasilitasPublik">Simpan</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MODAL: Penduduk Miskin -->
|
||
<div class="modal hidden" id="pendudukModal">
|
||
<div class="modal-header">
|
||
<div class="modal-title-wrap">
|
||
<div class="modal-icon" style="background:#fff8e1;color:#e65100">👥</div>
|
||
<div>
|
||
<h3 class="modal-title" id="pmModalTitle">Tambah Penduduk Miskin</h3>
|
||
<p class="modal-subtitle">Klik peta untuk menentukan lokasi</p>
|
||
</div>
|
||
</div>
|
||
<button class="modal-close" id="closePendudukModal">✕</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<input type="hidden" id="pm_id">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">Nama Lengkap <span style="color:#e63946">*</span></label>
|
||
<input type="text" class="form-input" id="pm_nama" placeholder="Sesuai KTP" autocomplete="off">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">NIK <span style="color:#e63946">*</span></label>
|
||
<input type="text" class="form-input" id="pm_nik" placeholder="16 digit angka" autocomplete="off">
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group" style="flex:2">
|
||
<label class="form-label">Keterangan</label>
|
||
<textarea class="form-input" id="pm_keterangan" rows="2" placeholder="Kondisi ekonomi, pekerjaan, dll..."></textarea>
|
||
</div>
|
||
<div class="form-group" style="flex:1">
|
||
<label class="form-label">Status Penyaluran</label>
|
||
<select class="form-input" id="pm_status_bantuan">
|
||
<option value="Belum Disalurkan">Belum Disalurkan</option>
|
||
<option value="Proses">Proses</option>
|
||
<option value="Sudah Disalurkan">Sudah Disalurkan</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">Foto Rumah</label>
|
||
<input type="file" class="form-input" id="pm_foto_rumah" accept="image/png, image/jpeg" style="padding:10px;">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Foto KK</label>
|
||
<input type="file" class="form-input" id="pm_foto_kk" accept="image/png, image/jpeg" style="padding:10px;">
|
||
</div>
|
||
</div>
|
||
<!-- Status Jangkauan (auto) -->
|
||
<div class="status-jangkauan-card" id="statusJangkauanCard">
|
||
<div class="sj-label">Status Jangkauan</div>
|
||
<div class="sj-value" id="pm_status">—</div>
|
||
<div class="sj-ditangani" id="pm_ditangani"></div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">Latitude</label>
|
||
<input type="text" class="form-input mono" id="pm_latitude" readonly placeholder="Klik peta">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Longitude</label>
|
||
<input type="text" class="form-input mono" id="pm_longitude" readonly placeholder="Klik peta">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-ghost" id="cancelPendudukModal">Batal</button>
|
||
<button class="btn btn-primary" id="btnSavePenduduk">Simpan</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MODAL: Konfirmasi Hapus -->
|
||
<div class="modal modal-sm hidden" id="deleteModal">
|
||
<div class="modal-header">
|
||
<div class="modal-title-wrap">
|
||
<div class="modal-icon" style="background:#ffebee;color:#c62828">🗑️</div>
|
||
<div>
|
||
<h3 class="modal-title">Konfirmasi Hapus</h3>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p id="deleteMessage">Apakah Anda yakin ingin menghapus data ini?</p>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-ghost" id="cancelDelete">Batal</button>
|
||
<button class="btn btn-danger" id="confirmDelete">Hapus</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================================
|
||
CHART MODAL
|
||
============================================================ -->
|
||
<div id="chartModal" class="hidden">
|
||
<div class="chart-modal-box">
|
||
<div class="chart-modal-header">
|
||
<div class="chart-modal-icon" id="chartModalIcon">📊</div>
|
||
<div class="chart-modal-meta">
|
||
<div class="chart-modal-title" id="chartModalTitle">Statistik Modul</div>
|
||
<div class="chart-modal-subtitle" id="chartModalSubtitle">Visualisasi data interaktif</div>
|
||
</div>
|
||
<button class="chart-modal-close" id="chartModalClose">✕</button>
|
||
</div>
|
||
<div class="chart-modal-body" id="chartModalBody">
|
||
<!-- Konten dinamis diisi oleh JS -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MODAL: Manajemen Data Penduduk -->
|
||
<div class="modal hidden" id="manajemenModal" style="max-width: 900px; width: 95%;">
|
||
<div class="modal-header" style="justify-content: space-between;">
|
||
<div class="modal-title-wrap">
|
||
<div class="modal-icon" style="background:#fce4ec;color:#e91e63">🗃️</div>
|
||
<div>
|
||
<h3 class="modal-title">Manajemen Data Penduduk</h3>
|
||
<p class="modal-subtitle">Pusat kontrol penyaluran bantuan sosial</p>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex; gap: 10px;">
|
||
<button class="btn btn-primary" onclick="window.print()" style="padding: 6px 12px; font-size: 0.85rem;">
|
||
📥 Cetak Data
|
||
</button>
|
||
<button class="modal-close" id="closeManajemenModal" style="position:static; margin-left:10px;">✕</button>
|
||
</div>
|
||
</div>
|
||
<div class="modal-body" style="background: #f8fafc; padding: 0;">
|
||
<div class="manajemen-filter" style="padding: 16px; border-bottom: 1px solid #e2e8f0; display:flex; gap:10px; flex-wrap:wrap; background:white;">
|
||
<button class="btn btn-ghost mj-tab active" data-filter="Semua">Semua</button>
|
||
<button class="btn btn-ghost mj-tab" data-filter="Belum Disalurkan">Belum Disalurkan</button>
|
||
<button class="btn btn-ghost mj-tab" data-filter="Proses">Proses</button>
|
||
<button class="btn btn-ghost mj-tab" data-filter="Sudah Disalurkan">Sudah Disalurkan</button>
|
||
</div>
|
||
<div class="table-responsive" style="max-height: 60vh; overflow-y: auto; padding: 16px;">
|
||
<table class="mj-table" style="width: 100%; border-collapse: collapse; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
|
||
<thead style="background: #f1f5f9; text-align: left;">
|
||
<tr>
|
||
<th style="padding: 12px 16px; font-weight: 600; font-size: 0.8rem; color:#475569; text-transform:uppercase;">No</th>
|
||
<th style="padding: 12px 16px; font-weight: 600; font-size: 0.8rem; color:#475569; text-transform:uppercase;">Identitas</th>
|
||
<th style="padding: 12px 16px; font-weight: 600; font-size: 0.8rem; color:#475569; text-transform:uppercase;">Jarak (Status)</th>
|
||
<th style="padding: 12px 16px; font-weight: 600; font-size: 0.8rem; color:#475569; text-transform:uppercase;">Foto Rumah</th>
|
||
<th style="padding: 12px 16px; font-weight: 600; font-size: 0.8rem; color:#475569; text-transform:uppercase;">Status Bantuan</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="manajemenTableBody">
|
||
<!-- Data akan di-render via JS -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MODAL: Alert / Peringatan -->
|
||
<div class="modal modal-sm hidden" id="alertModal" style="z-index: 9999;">
|
||
<div class="modal-header">
|
||
<div class="modal-title-wrap">
|
||
<div class="modal-icon" style="background:#fff3e0;color:#e65100">⚠️</div>
|
||
<div>
|
||
<h3 class="modal-title" id="alertTitle">Perhatian</h3>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p id="alertMessage" style="font-size: 13px; color: #334155; line-height: 1.5;"></p>
|
||
</div>
|
||
<div class="modal-footer" style="justify-content: center;">
|
||
<button class="btn btn-primary" id="btnAlertOk" style="width: 100%;">Mengerti</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================================
|
||
DATA PHP → JS
|
||
============================================================ -->
|
||
<script>
|
||
const USER_ROLE = '<?= $currentRole ?>';
|
||
const APP_DATA = {
|
||
modul: '<?= htmlspecialchars($modul) ?>',
|
||
points: <?= json_encode($points, JSON_UNESCAPED_UNICODE) ?>,
|
||
jalan: <?= json_encode($jalan, JSON_UNESCAPED_UNICODE) ?>,
|
||
polygons: <?= json_encode($polygons, JSON_UNESCAPED_UNICODE) ?>,
|
||
fasilitasPublik: <?= json_encode($fasilitasPublik, JSON_UNESCAPED_UNICODE) ?>,
|
||
pendudukMiskin:<?= json_encode($pendudukMiskin, JSON_UNESCAPED_UNICODE) ?>,
|
||
};
|
||
</script>
|
||
|
||
<!-- Leaflet JS -->
|
||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
|
||
<!-- App JS -->
|
||
<script src="assets/js/app.js?v=36"></script>
|
||
<script>
|
||
// Fitur scroll dinamis untuk mengecilkan header sidebar tanpa blink
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const scrollable = document.getElementById('sidebarScrollable');
|
||
const stickyHeader = document.getElementById('sidebarSticky');
|
||
|
||
if (scrollable && stickyHeader) {
|
||
scrollable.addEventListener('scroll', function() {
|
||
if (scrollable.scrollTop > 10) {
|
||
stickyHeader.classList.add('scrolled');
|
||
} else {
|
||
stickyHeader.classList.remove('scrolled');
|
||
}
|
||
});
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|