commit 48f20aabedafc1afe60d612beb4b9b7a4a250094
Author: Syariffullah <dinnereatc@gmail.com>
Date:   Thu Jun 11 13:11:51 2026 +0700

    initialize

diff --git a/db_connect.php b/db_connect.php
new file mode 100644
index 0000000..a3922ed
--- /dev/null
+++ b/db_connect.php
@@ -0,0 +1,17 @@
+<?php
+$host = "localhost";
+$user = "root";
+$pass = "";
+$db   = "webgis";
+
+// Coba koneksi ke server dan pilih database
+$conn = new mysqli($host, $user, $pass, $db);
+
+if ($conn->connect_error) {
+    die("Koneksi gagal: " . $conn->connect_error);
+}
+// Set charset
+$conn->set_charset("utf8mb4");
+
+// Jika di-include oleh file API, biarkan $conn tersedia
+?>
diff --git a/draw_control.js b/draw_control.js
new file mode 100644
index 0000000..1304ae5
--- /dev/null
+++ b/draw_control.js
@@ -0,0 +1,141 @@
+// --- Setup Leaflet Draw ---
+
+// Layer terpisah untuk hasil gambar sementara sebelum disimpan
+const drawnItems = new L.FeatureGroup();
+map.addLayer(drawnItems);
+
+const drawControl = new L.Control.Draw({
+    draw: {
+        polygon: {
+            allowIntersection: false,
+            showArea: true
+        },
+        polyline: {
+            metric: true
+        },
+        circle: false,
+        circlemarker: false,
+        marker: false, // Marker default dimatikan, kita pakai klik peta untuk SPBU
+        rectangle: false
+    },
+    edit: {
+        featureGroup: drawnItems, // Kita tidak mengedit di drawnItems, karena data aslinya di jalanLayer/parsilLayer
+        edit: false,
+        remove: false
+    }
+});
+// Hapus map.addControl(drawControl); agar tidak tampil UI bawaan LeafletJS
+
+
+// Flag untuk menghindari munculnya form SPBU saat sedang menggambar
+map.on(L.Draw.Event.DRAWSTART, function (e) {
+    isDrawingMode = true;
+});
+
+map.on(L.Draw.Event.DRAWSTOP, function (e) {
+    setTimeout(() => { 
+        isDrawingMode = false; 
+        window.currentDrawMode = null;
+        window.activeDrawHandler = null;
+        window.deactivateAddMode(); 
+    }, 200);
+});
+
+window.activateDraw = function(type) {
+    const isAdmin = !!(window.currentUser && window.currentUser.role === 'admin');
+    if (!isAdmin) return;
+
+    console.log("-> activateDraw dipanggil untuk tipe:", type);
+
+    // Toggle: jika mode yang sama ditekan lagi, batalkan
+    if (window.currentDrawMode === type) {
+        console.log("Mode", type, "sudah aktif, membatalkan...");
+        window.deactivateAddMode();
+        return;
+    }
+    
+    window.deactivateAddMode();
+    window.currentDrawMode = type;
+    console.log("Mengaktifkan mode menggambar:", type);
+    
+    if (type === 'polyline') {
+        const handler = new L.Draw.Polyline(map, drawControl.options.draw.polyline);
+        handler.enable();
+        window.activeDrawHandler = handler;
+        if (window.cursorTooltip) window.cursorTooltip.textContent = 'Klik untuk menggambar Jalan';
+    } else if (type === 'polygon') {
+        const handler = new L.Draw.Polygon(map, drawControl.options.draw.polygon);
+        handler.enable();
+        window.activeDrawHandler = handler;
+        if (window.cursorTooltip) window.cursorTooltip.textContent = 'Klik untuk menggambar Parsil';
+    }
+};
+
+map.on(L.Draw.Event.CREATED, function (e) {
+    const type = e.layerType;
+    const layer = e.layer;
+
+    // Convert layer to GeoJSON geometry
+    const geoJson = layer.toGeoJSON().geometry;
+    const geoJsonStr = JSON.stringify(geoJson);
+
+    if (type === 'polyline') {
+        let length = 0;
+        const latlngs = layer.getLatLngs();
+        for (let i = 0; i < latlngs.length - 1; i++) {
+            length += latlngs[i].distanceTo(latlngs[i + 1]);
+        }
+        
+        // Gunakan Modal alih-alih prompt
+        const bodyHTML = `
+            <div class="form-group">
+                <label>Nama Jalan</label>
+                <input type="text" id="modalJalanNama" placeholder="Nama Jalan">
+            </div>
+            <div class="form-group">
+                <label>Status</label>
+                <select id="modalJalanStatus">
+                    <option value="Nasional">Nasional</option>
+                    <option value="Provinsi">Provinsi</option>
+                    <option value="Kabupaten" selected>Kabupaten</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label>Panjang: ${length.toFixed(2)} m</label>
+            </div>
+        `;
+        openModal("Tambah Jalan Baru", bodyHTML, function() {
+            window.saveNewJalan(geoJsonStr, length, 'modalJalanNama', 'modalJalanStatus');
+        });
+        
+    } 
+    else if (type === 'polygon') {
+        const latlngs = layer.getLatLngs()[0];
+        let area = 0;
+        if (L.GeometryUtil && L.GeometryUtil.geodesicArea) {
+            area = L.GeometryUtil.geodesicArea(latlngs);
+        }
+
+        const bodyHTML = `
+            <div class="form-group">
+                <label>Nama Pemilik/Area</label>
+                <input type="text" id="modalParsilNama" placeholder="Contoh: Budi atau Sawah A">
+            </div>
+            <div class="form-group">
+                <label>Status Tanah</label>
+                <select id="modalParsilStatus">
+                    <option value="SHM" selected>SHM</option>
+                    <option value="HGB">HGB</option>
+                    <option value="HGU">HGU</option>
+                    <option value="HP">HP</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label>Luas: ${area.toFixed(2)} mยฒ</label>
+            </div>
+        `;
+        openModal("Tambah Parsil Tanah", bodyHTML, function() {
+            window.saveNewParsil(geoJsonStr, area, 'modalParsilNama', 'modalParsilStatus');
+        });
+    }
+});
diff --git a/geojson.js b/geojson.js
new file mode 100644
index 0000000..7c4fab9
--- /dev/null
+++ b/geojson.js
@@ -0,0 +1,181 @@
+// --- Fitur Import GeoJSON ---
+
+const fileGeoJson = document.getElementById('fileGeoJson');
+let geoJsonLayers = {};
+let geoJsonCounter = 0;
+
+window.toggleGeoJsonMenu = function() {
+    const list = document.getElementById('geoJsonFileList');
+    const icon = document.getElementById('geoJsonToggleIcon');
+    if (list.style.display === 'none') {
+        list.style.display = 'block';
+        icon.className = 'fas fa-minus';
+    } else {
+        list.style.display = 'none';
+        icon.className = 'fas fa-plus';
+    }
+};
+
+// Cek apakah fitur GeoJSON ini terlihat seperti data penduduk miskin
+function isMiskinFeature(feature) {
+    if (!feature || !feature.geometry || feature.geometry.type !== 'Point') return false;
+    const props = feature.properties || {};
+    const keys = Object.keys(props).map(k => k.toLowerCase());
+    // Dianggap data miskin jika punya properti nama (dan bukan ibadah atau spbu)
+    const hasNama = keys.some(k => ['nama', 'name', 'penduduk'].includes(k));
+    const isIbadah = keys.some(k => ['jenis', 'radius', 'alamat'].includes(k));
+    const isSpbu = keys.some(k => ['alamat_spbu', 'is_24_jam'].includes(k));
+    return hasNama && !isIbadah && !isSpbu;
+}
+
+fileGeoJson.addEventListener('change', function(e) {
+    const file = e.target.files[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = function(event) {
+        try {
+            const geoJsonData = JSON.parse(event.target.result);
+            const fileName = file.name;
+
+            // Pisahkan fitur menjadi dua kelompok: miskin dan non-miskin
+            const features = geoJsonData.type === 'FeatureCollection'
+                ? geoJsonData.features
+                : [geoJsonData];
+
+            const miskinFeatures = features.filter(f => isMiskinFeature(f));
+            const otherFeatures = features.filter(f => !isMiskinFeature(f));
+
+            // ---- Proses fitur miskin: Simpan ke DB, lalu tampilkan seperti penduduk miskin ----
+            if (miskinFeatures.length > 0) {
+                const bulkData = miskinFeatures.map(f => {
+                    const props = f.properties || {};
+                    const coords = f.geometry.coordinates;
+                    return {
+                        nama:              props.nama || props.name || props.penduduk || 'Data Impor',
+                        kategori_bantuan:  props.kategori_bantuan || props.kategori || props.bantuan || 'Makan',
+                        jumlah_jiwa:       parseInt(props.jumlah_jiwa || props.jumlah || props.jiwa || 1, 10) || 1,
+                        lat:               parseFloat(coords[1]),
+                        lng:               parseFloat(coords[0])
+                    };
+                });
+
+                fetch('api/penduduk_miskin/bulk_create.php', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(bulkData)
+                })
+                .then(res => res.json())
+                .then(data => {
+                    if (data.status === 'success') {
+                        // Reload layer penduduk miskin agar marker tampil dengan edit/hapus/log bantuan
+                        if (typeof loadPendudukMiskin === 'function') {
+                            loadPendudukMiskin();
+                        }
+                        if (typeof window.refreshActivePanel === 'function') {
+                            window.refreshActivePanel();
+                        }
+                        showToast(data.message || 'Data berhasil diimpor ke layer Penduduk Miskin.', 'success');
+                    } else {
+                        showToast(data.message || 'Gagal menyimpan data miskin.', 'error');
+                    }
+                })
+                .catch(err => {
+                    console.error(err);
+                    showToast('Gagal terhubung ke server saat menyimpan data miskin.', 'error');
+                });
+            }
+
+            // ---- Proses fitur non-miskin: Render sebagai layer GeoJSON biasa ----
+            if (otherFeatures.length > 0) {
+                const layerId = 'gj_' + (++geoJsonCounter);
+                const individualLayer = L.featureGroup();
+
+                const otherGeoJson = {
+                    type: 'FeatureCollection',
+                    features: otherFeatures
+                };
+
+                L.geoJSON(otherGeoJson, {
+                    pointToLayer: function(feature, latlng) {
+                        const props = feature.properties || {};
+                        let emoji = props.emoji;
+
+                        if (!emoji) {
+                            const text = JSON.stringify(props).toLowerCase();
+                            if (text.includes('spbu'))      emoji = 'โ›ฝ';
+                            else if (text.includes('masjid'))    emoji = '๐Ÿ•Œ';
+                            else if (text.includes('gereja'))    emoji = 'โ›ช';
+                            else if (text.includes('vihara'))    emoji = '๐Ÿชท';
+                            else if (text.includes('pura'))      emoji = '๐Ÿ›•';
+                            else if (text.includes('kelenteng')) emoji = '๐Ÿฎ';
+                            else emoji = '๐Ÿ“';
+                        }
+
+                        let cls = 'miskin-out';
+                        if (emoji === 'โ›ฝ') cls = 'spbu-24';
+                        else if (['๐Ÿ•Œ','โ›ช','๐Ÿ›•','๐Ÿชท','๐Ÿฎ'].includes(emoji)) cls = 'ibadah';
+
+                        const icon = L.divIcon({
+                            className: '',
+                            html: `<div class="emoji-marker"><div class="bubble ${cls}"><span>${emoji}</span></div></div>`,
+                            iconSize: [38, 38],
+                            iconAnchor: [19, 38],
+                            popupAnchor: [0, -40]
+                        });
+
+                        return L.marker(latlng, { icon: icon });
+                    },
+                    onEachFeature: function(feature, layer) {
+                        if (feature.properties) {
+                            let popupContent = '<h4>Informasi Feature</h4><ul style="list-style:none; padding:0; font-size:12px; margin: 0;">';
+                            for (let key in feature.properties) {
+                                popupContent += `<li><strong>${key}:</strong> ${feature.properties[key]}</li>`;
+                            }
+                            popupContent += '</ul>';
+                            layer.bindPopup(popupContent);
+                        }
+                    },
+                    style: function(feature) {
+                        return {
+                            color: (feature.properties && feature.properties.color) || '#3388ff',
+                            weight: 2,
+                            fillOpacity: 0.4
+                        };
+                    }
+                }).addTo(individualLayer);
+
+                individualLayer.addTo(map);
+                geoJsonLayers[layerId] = individualLayer;
+
+                // Tambahkan checkbox ke UI
+                const container = document.getElementById('geoJsonLayersContainer');
+                const label = document.createElement('label');
+                label.className = 'layer-option';
+                label.innerHTML = `<input type="checkbox" id="chk_${layerId}" checked> ${fileName}`;
+
+                label.querySelector('input').addEventListener('change', function(e) {
+                    if (e.target.checked) {
+                        map.addLayer(geoJsonLayers[layerId]);
+                    } else {
+                        map.removeLayer(geoJsonLayers[layerId]);
+                    }
+                });
+
+                container.appendChild(label);
+
+                if (miskinFeatures.length === 0) {
+                    showToast('File GeoJSON berhasil dimuat!', 'success');
+                }
+            }
+
+            // Reset input file agar bisa import file yang sama
+            fileGeoJson.value = '';
+
+        } catch (error) {
+            showToast('Gagal memproses file GeoJSON. Pastikan format valid.', 'error');
+            console.error(error);
+        }
+    };
+    reader.readAsText(file);
+});
diff --git a/geolocation.js b/geolocation.js
new file mode 100644
index 0000000..aa6179b
--- /dev/null
+++ b/geolocation.js
@@ -0,0 +1,30 @@
+// --- Fitur Geolocation ---
+
+// Tambahkan tombol di dalam wadah zoom control
+const geoBtn = document.createElement('button');
+geoBtn.className = 'custom-layer-btn';
+geoBtn.style.position = 'relative';
+geoBtn.style.top = '0';
+geoBtn.style.left = '0';
+geoBtn.style.right = 'auto';
+geoBtn.innerHTML = '<i class="fas fa-crosshairs fa-lg"></i>';
+geoBtn.title = 'Lokasi Saya';
+document.querySelector('.custom-zoom-control').appendChild(geoBtn);
+
+let userMarker = null;
+
+geoBtn.addEventListener('click', function() {
+    map.locate({setView: true, maxZoom: 16});
+});
+
+map.on('locationfound', function(e) {
+    if (userMarker) {
+        map.removeLayer(userMarker);
+    }
+    userMarker = L.marker(e.latlng).addTo(map)
+        .bindPopup("Anda berada di sini!").openPopup();
+});
+
+map.on('locationerror', function(e) {
+    alert("Gagal mendapatkan lokasi Anda.");
+});
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..6a28344
--- /dev/null
+++ b/index.html
@@ -0,0 +1,1098 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>WebGIS โ€” Sistem Informasi Geografis | Portofolio Tugas</title>
+  <meta name="description" content="Portofolio proyek WebGIS mata kuliah Sistem Informasi Geografis. Kumpulan aplikasi pemetaan interaktif berbasis web menggunakan Leaflet.js, PHP, dan MySQL." />
+  <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=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
+  <style>
+    /* ===== CSS RESET & BASE ===== */
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    :root {
+      --clr-bg:        #f0f4f8;
+      --clr-surface:   #e8eef5;
+      --clr-card:      #ffffff;
+      --clr-border:    rgba(99, 102, 241, 0.15);
+      --clr-primary:   #4f46e5;
+      --clr-secondary: #7c3aed;
+      --clr-accent:    #059669;
+      --clr-warn:      #ea580c;
+      --clr-text:      #1e293b;
+      --clr-muted:     #64748b;
+      --clr-white:     #ffffff;
+      --grad-primary:  linear-gradient(135deg, #4f46e5, #7c3aed);
+      --grad-card:     linear-gradient(145deg, #ffffff, #f8fafc);
+      --shadow-glow:   0 0 40px rgba(79, 70, 229, 0.10);
+      --shadow-card:   0 4px 24px rgba(15, 23, 42, 0.08);
+      --radius:        16px;
+      --radius-sm:     10px;
+      --transition:    all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    html { scroll-behavior: smooth; }
+
+    body {
+      font-family: 'Inter', sans-serif;
+      background-color: var(--clr-bg);
+      color: var(--clr-text);
+      line-height: 1.6;
+      overflow-x: hidden;
+    }
+
+    /* ===== SCROLLBAR ===== */
+    ::-webkit-scrollbar { width: 6px; }
+    ::-webkit-scrollbar-track { background: var(--clr-bg); }
+    ::-webkit-scrollbar-thumb { background: var(--clr-primary); border-radius: 3px; }
+
+    /* ===== CANVAS BG ===== */
+    #bg-canvas {
+      position: fixed;
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+      z-index: 0;
+      pointer-events: none;
+      opacity: 0.5;
+    }
+
+    /* ===== LAYOUT ===== */
+    .wrapper {
+      position: relative;
+      z-index: 1;
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 0 24px;
+    }
+
+    /* ===== NAVBAR ===== */
+    .navbar {
+      position: fixed;
+      top: 0; left: 0; right: 0;
+      z-index: 100;
+      padding: 16px 0;
+      background: rgba(240, 244, 248, 0.75);
+      backdrop-filter: blur(20px);
+      -webkit-backdrop-filter: blur(20px);
+      border-bottom: 1px solid rgba(99, 102, 241, 0.12);
+      transition: var(--transition);
+    }
+
+    .navbar.scrolled {
+      padding: 12px 0;
+      background: rgba(240, 244, 248, 0.97);
+      box-shadow: 0 2px 20px rgba(15, 23, 42, 0.08);
+    }
+
+    .nav-inner {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 0 24px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .nav-logo {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      text-decoration: none;
+    }
+
+    .nav-logo-icon {
+      width: 38px;
+      height: 38px;
+      border-radius: 10px;
+      background: var(--grad-primary);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 18px;
+      color: #fff;
+      box-shadow: 0 0 16px rgba(56, 189, 248, 0.4);
+      flex-shrink: 0;
+    }
+
+    .nav-logo-text {
+      font-family: 'Space Grotesk', sans-serif;
+      font-weight: 700;
+      font-size: 1.1rem;
+      color: var(--clr-text);
+      line-height: 1.2;
+    }
+
+    .nav-logo-text span {
+      display: block;
+      font-size: 0.7rem;
+      font-weight: 400;
+      color: var(--clr-primary);
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+
+    .nav-badge {
+      font-size: 0.75rem;
+      padding: 5px 14px;
+      border-radius: 50px;
+      background: rgba(79, 70, 229, 0.08);
+      border: 1px solid rgba(79, 70, 229, 0.25);
+      color: var(--clr-primary);
+      font-weight: 500;
+      letter-spacing: 0.02em;
+    }
+
+    /* ===== HERO ===== */
+    .hero {
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      padding: 120px 24px 80px;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .hero::before {
+      content: '';
+      position: absolute;
+      top: 50%; left: 50%;
+      transform: translate(-50%, -50%);
+      width: 900px;
+      height: 900px;
+      background: radial-gradient(circle, rgba(79,70,229,0.07) 0%, rgba(124,58,237,0.04) 40%, transparent 70%);
+      pointer-events: none;
+    }
+
+    .hero-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 0.8rem;
+      padding: 7px 18px;
+      border-radius: 50px;
+      background: rgba(79, 70, 229, 0.08);
+      border: 1px solid rgba(79, 70, 229, 0.22);
+      color: var(--clr-primary);
+      font-weight: 500;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      margin-bottom: 28px;
+      animation: fadeSlideDown 0.8s ease both;
+    }
+
+    .hero-badge i { font-size: 0.75rem; animation: pulse 2s infinite; }
+
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.4; }
+    }
+
+    .hero-title {
+      font-family: 'Space Grotesk', sans-serif;
+      font-size: clamp(2.4rem, 6vw, 4.2rem);
+      font-weight: 800;
+      line-height: 1.1;
+      letter-spacing: -0.03em;
+      color: var(--clr-text);
+      margin-bottom: 20px;
+      animation: fadeSlideDown 0.8s 0.1s ease both;
+    }
+
+    .hero-title .gradient-text {
+      background: var(--grad-primary);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+
+    .hero-sub {
+      font-size: 1.1rem;
+      color: var(--clr-muted);
+      max-width: 560px;
+      margin: 0 auto 40px;
+      line-height: 1.7;
+      animation: fadeSlideDown 0.8s 0.2s ease both;
+    }
+
+    .hero-stats {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 40px;
+      margin-bottom: 56px;
+      animation: fadeSlideDown 0.8s 0.3s ease both;
+    }
+
+    .hero-stat {
+      text-align: center;
+    }
+
+    .hero-stat-num {
+      font-family: 'Space Grotesk', sans-serif;
+      font-size: 2rem;
+      font-weight: 700;
+      background: var(--grad-primary);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      line-height: 1;
+      margin-bottom: 4px;
+    }
+
+    .hero-stat-label {
+      font-size: 0.78rem;
+      color: var(--clr-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+    }
+
+    .hero-divider {
+      width: 1px;
+      height: 40px;
+      background: var(--clr-border);
+    }
+
+    .hero-cta {
+      display: inline-flex;
+      align-items: center;
+      gap: 10px;
+      padding: 14px 32px;
+      border-radius: 50px;
+      background: var(--grad-primary);
+      color: #fff;
+      font-weight: 600;
+      font-size: 0.95rem;
+      text-decoration: none;
+      box-shadow: 0 8px 24px rgba(79, 70, 229, 0.35);
+      transition: var(--transition);
+      animation: fadeSlideDown 0.8s 0.4s ease both;
+    }
+
+    .hero-cta:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 12px 36px rgba(79, 70, 229, 0.5);
+    }
+
+    /* ===== SCROLL INDICATOR ===== */
+    .scroll-indicator {
+      position: absolute;
+      bottom: 32px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+      color: var(--clr-muted);
+      font-size: 0.75rem;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      animation: fadeSlideDown 0.8s 0.8s ease both;
+    }
+
+    .scroll-indicator .mouse {
+      width: 22px;
+      height: 34px;
+      border: 2px solid rgba(79,70,229,0.3);
+      border-radius: 11px;
+      display: flex;
+      justify-content: center;
+      padding-top: 6px;
+    }
+
+    .scroll-indicator .wheel {
+      width: 3px;
+      height: 6px;
+      background: var(--clr-primary);
+      border-radius: 2px;
+      animation: scrollDown 1.6s infinite;
+    }
+
+    @keyframes scrollDown {
+      0% { opacity: 1; transform: translateY(0); }
+      100% { opacity: 0; transform: translateY(10px); }
+    }
+
+    /* ===== SECTION ===== */
+    .section {
+      padding: 100px 0;
+    }
+
+    .section-label {
+      font-size: 0.78rem;
+      font-weight: 600;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--clr-primary);
+      margin-bottom: 12px;
+    }
+
+    .section-title {
+      font-family: 'Space Grotesk', sans-serif;
+      font-size: clamp(1.8rem, 4vw, 2.6rem);
+      font-weight: 700;
+      color: var(--clr-text);
+      line-height: 1.2;
+      letter-spacing: -0.02em;
+      margin-bottom: 16px;
+    }
+
+    .section-desc {
+      font-size: 1rem;
+      color: var(--clr-muted);
+      max-width: 520px;
+      line-height: 1.7;
+    }
+
+    .section-header {
+      display: flex;
+      align-items: flex-end;
+      justify-content: space-between;
+      margin-bottom: 56px;
+      gap: 24px;
+      flex-wrap: wrap;
+    }
+
+    /* ===== PROJECT CARDS ===== */
+    .projects-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+      gap: 28px;
+    }
+
+    .project-card {
+      position: relative;
+      background: var(--grad-card);
+      border: 1px solid var(--clr-border);
+      border-radius: var(--radius);
+      overflow: hidden;
+      text-decoration: none;
+      color: var(--clr-text);
+      transition: var(--transition);
+      display: flex;
+      flex-direction: column;
+      box-shadow: var(--shadow-card);
+      animation: fadeSlideUp 0.6s ease both;
+    }
+
+    .project-card:hover {
+      transform: translateY(-6px);
+      border-color: rgba(79, 70, 229, 0.35);
+      box-shadow: 0 16px 48px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(79,70,229,0.1);
+    }
+
+    .project-card:hover .card-arrow {
+      transform: translate(4px, -4px);
+      opacity: 1;
+    }
+
+    .project-card:hover .card-icon {
+      transform: scale(1.08);
+    }
+
+    .card-header {
+      padding: 28px 28px 20px;
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 16px;
+    }
+
+    .card-icon {
+      width: 56px;
+      height: 56px;
+      border-radius: 14px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1.4rem;
+      transition: var(--transition);
+      flex-shrink: 0;
+    }
+
+    .card-num {
+      font-family: 'Space Grotesk', sans-serif;
+      font-size: 0.75rem;
+      font-weight: 600;
+      color: var(--clr-muted);
+      letter-spacing: 0.08em;
+      background: rgba(15,23,42,0.04);
+      border: 1px solid rgba(15,23,42,0.1);
+      border-radius: 50px;
+      padding: 4px 12px;
+    }
+
+    .card-arrow {
+      position: absolute;
+      top: 24px;
+      right: 24px;
+      color: var(--clr-primary);
+      font-size: 1rem;
+      opacity: 0.5;
+      transition: var(--transition);
+    }
+
+    .card-body {
+      padding: 0 28px 28px;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .card-title {
+      font-family: 'Space Grotesk', sans-serif;
+      font-size: 1.25rem;
+      font-weight: 700;
+      color: var(--clr-text);
+      margin-bottom: 10px;
+      letter-spacing: -0.01em;
+      line-height: 1.3;
+    }
+
+    .card-desc {
+      font-size: 0.88rem;
+      color: var(--clr-muted);
+      line-height: 1.65;
+      margin-bottom: 20px;
+      flex: 1;
+    }
+
+    .card-tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-bottom: 24px;
+    }
+
+    .tag {
+      font-size: 0.72rem;
+      font-weight: 500;
+      padding: 4px 12px;
+      border-radius: 50px;
+      letter-spacing: 0.02em;
+    }
+
+    .tag-blue   { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
+    .tag-purple { background: #f5f3ff; color: #6d28d9; border: 1px solid #ddd6fe; }
+    .tag-green  { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
+    .tag-orange { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }
+    .tag-pink   { background: #fdf2f8; color: #9d174d; border: 1px solid #fbcfe8; }
+
+    .card-footer {
+      border-top: 1px solid var(--clr-border);
+      padding: 18px 28px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .card-link-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 0.85rem;
+      font-weight: 600;
+      color: var(--clr-primary);
+      transition: var(--transition);
+    }
+
+    .project-card:hover .card-link-btn {
+      gap: 12px;
+    }
+
+    .card-status {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 0.75rem;
+    }
+
+    .status-dot {
+      width: 7px;
+      height: 7px;
+      border-radius: 50%;
+      animation: statusPulse 2s infinite;
+    }
+
+    .status-dot.active   { background: var(--clr-accent); box-shadow: 0 0 8px var(--clr-accent); }
+    .status-dot.pending  { background: var(--clr-warn); box-shadow: 0 0 8px var(--clr-warn); }
+    .status-dot.inactive { background: var(--clr-muted); }
+
+    @keyframes statusPulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.4; }
+    }
+
+    /* ===== CARD ACCENT LINES ===== */
+    .card-glow-line {
+      position: absolute;
+      top: 0; left: 0; right: 0;
+      height: 2px;
+      border-radius: var(--radius) var(--radius) 0 0;
+    }
+
+    /* ===== COMING SOON CARD ===== */
+    .card-overlay {
+      position: absolute;
+      inset: 0;
+      background: rgba(240,244,248,0.75);
+      backdrop-filter: blur(3px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: var(--radius);
+    }
+
+    .coming-soon-badge {
+      font-size: 0.8rem;
+      font-weight: 600;
+      padding: 8px 20px;
+      border-radius: 50px;
+      background: #fff7ed;
+      border: 1px solid #fed7aa;
+      color: var(--clr-warn);
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      box-shadow: 0 2px 8px rgba(234,88,12,0.15);
+    }
+
+    /* ===== TECH STACK SECTION ===== */
+    .tech-strip {
+      padding: 60px 0;
+      border-top: 1px solid var(--clr-border);
+      border-bottom: 1px solid var(--clr-border);
+    }
+
+    .tech-strip-label {
+      text-align: center;
+      font-size: 0.75rem;
+      font-weight: 500;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      color: var(--clr-muted);
+      margin-bottom: 32px;
+    }
+
+    .tech-items {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 40px;
+      flex-wrap: wrap;
+    }
+
+    .tech-item {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      color: var(--clr-muted);
+      font-size: 0.9rem;
+      font-weight: 500;
+      transition: var(--transition);
+    }
+
+    .tech-item:hover { color: var(--clr-text); }
+
+    .tech-item i {
+      font-size: 1.4rem;
+      transition: var(--transition);
+    }
+
+    /* ===== FOOTER ===== */
+    .footer {
+      padding: 60px 0 40px;
+      border-top: 1px solid var(--clr-border);
+    }
+
+    .footer-inner {
+      text-align: center;
+    }
+
+    .footer-logo {
+      font-family: 'Space Grotesk', sans-serif;
+      font-size: 1.4rem;
+      font-weight: 700;
+      color: var(--clr-text);
+      margin-bottom: 12px;
+    }
+
+    .footer-logo span {
+      background: var(--grad-primary);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+
+    .footer-course {
+      font-size: 0.85rem;
+      color: var(--clr-muted);
+      margin-bottom: 32px;
+    }
+
+    .footer-divider {
+      width: 60px;
+      height: 1px;
+      background: var(--clr-border);
+      margin: 32px auto;
+    }
+
+    .footer-copy {
+      font-size: 0.8rem;
+      color: var(--clr-muted);
+    }
+
+    .footer-copy a {
+      color: var(--clr-primary);
+      text-decoration: none;
+    }
+
+    /* ===== ANIMATIONS ===== */
+    @keyframes fadeSlideDown {
+      from { opacity: 0; transform: translateY(-20px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+
+    @keyframes fadeSlideUp {
+      from { opacity: 0; transform: translateY(30px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+
+    .reveal {
+      opacity: 0;
+      transform: translateY(30px);
+      transition: opacity 0.7s ease, transform 0.7s ease;
+    }
+
+    .reveal.visible {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    /* ===== RESPONSIVE ===== */
+    @media (max-width: 640px) {
+      .hero-stats  { gap: 24px; }
+      .projects-grid { grid-template-columns: 1fr; }
+      .section-header { flex-direction: column; align-items: flex-start; }
+    }
+  </style>
+</head>
+<body>
+
+  <!-- ===== CANVAS BACKGROUND ===== -->
+  <canvas id="bg-canvas"></canvas>
+
+  <!-- ===== NAVBAR ===== -->
+  <nav class="navbar" id="navbar">
+    <div class="nav-inner">
+      <a href="#" class="nav-logo" id="logo-link">
+        <div class="nav-logo-icon"><i class="fa-solid fa-map-location-dot"></i></div>
+        <div class="nav-logo-text">
+          WebGIS
+          <span>Sistem Informasi Geografis</span>
+        </div>
+      </a>
+      <div class="nav-badge"><i class="fa-solid fa-graduation-cap"></i> &nbsp;Portofolio Tugas</div>
+    </div>
+  </nav>
+
+  <!-- ===== HERO ===== -->
+  <section class="hero" id="home">
+    <div class="wrapper">
+      <div class="hero-badge" id="hero-badge">
+        <i class="fa-solid fa-circle"></i>
+        Sistem Informasi Geografis
+      </div>
+
+      <h1 class="hero-title" id="hero-title">
+        Portofolio Proyek<br />
+        <span class="gradient-text">WebGIS Interaktif</span>
+      </h1>
+
+      <p class="hero-sub" id="hero-sub">
+        Kumpulan tugas pemetaan berbasis web menggunakan teknologi geospasial modern โ€” 
+        dari peta jalan, persil, hingga visualisasi data sosial.
+      </p>
+
+      <div class="hero-stats" id="hero-stats">
+        <div class="hero-stat">
+          <div class="hero-stat-num" id="stat-projects">4</div>
+          <div class="hero-stat-label">Proyek</div>
+        </div>
+        <div class="hero-divider"></div>
+        <div class="hero-stat">
+          <div class="hero-stat-num">GIS</div>
+          <div class="hero-stat-label">Mata Kuliah</div>
+        </div>
+        <div class="hero-divider"></div>
+        <div class="hero-stat">
+          <div class="hero-stat-num">Web</div>
+          <div class="hero-stat-label">Platform</div>
+        </div>
+      </div>
+
+      <a href="#projects" class="hero-cta" id="hero-cta">
+        <i class="fa-solid fa-layer-group"></i>
+        Lihat Semua Proyek
+      </a>
+
+      <div class="scroll-indicator">
+        <div class="mouse"><div class="wheel"></div></div>
+        <span>Scroll</span>
+      </div>
+    </div>
+  </section>
+
+  <!-- ===== TECH STRIP ===== -->
+  <div class="tech-strip">
+    <div class="wrapper">
+      <p class="tech-strip-label">Teknologi yang Digunakan</p>
+      <div class="tech-items">
+        <div class="tech-item">
+          <i class="fa-solid fa-map" style="color:#4f46e5"></i>
+          Leaflet.js
+        </div>
+        <div class="tech-item">
+          <i class="fa-brands fa-php" style="color:#7c3aed"></i>
+          PHP
+        </div>
+        <div class="tech-item">
+          <i class="fa-solid fa-database" style="color:#059669"></i>
+          MySQL
+        </div>
+        <div class="tech-item">
+          <i class="fa-brands fa-html5" style="color:#ea580c"></i>
+          HTML / CSS / JS
+        </div>
+        <div class="tech-item">
+          <i class="fa-solid fa-globe" style="color:#db2777"></i>
+          GeoJSON
+        </div>
+        <div class="tech-item">
+          <i class="fa-solid fa-server" style="color:#b45309"></i>
+          XAMPP
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- ===== PROJECTS ===== -->
+  <section class="section" id="projects">
+    <div class="wrapper">
+      <div class="section-header reveal">
+        <div>
+          <p class="section-label"><i class="fa-solid fa-folder-open"></i> &nbsp;Daftar Proyek</p>
+          <h2 class="section-title">Semua Tugas WebGIS</h2>
+          <p class="section-desc">Klik pada kartu proyek untuk membuka aplikasi pemetaan interaktif.</p>
+        </div>
+      </div>
+
+      <div class="projects-grid">
+
+        <!-- ===== PROJECT 1: POVERTY ===== -->
+        <a href="/webgis/poverty/index.php" class="project-card" id="card-poverty" style="animation-delay: 0.05s;">
+          <div class="card-glow-line" style="background: linear-gradient(90deg, #38bdf8, #818cf8);"></div>
+          <div class="card-arrow"><i class="fa-solid fa-arrow-up-right"></i></div>
+          <div class="card-header">
+            <div class="card-icon" style="background: rgba(56,189,248,0.12); border: 1px solid rgba(56,189,248,0.2);">
+              ๐Ÿ 
+            </div>
+            <span class="card-num">01</span>
+          </div>
+          <div class="card-body">
+            <h3 class="card-title">Pemetaan Kemiskinan<br/>Kota Pontianak</h3>
+            <p class="card-desc">
+              Aplikasi WebGIS untuk memetakan sebaran penduduk miskin, rumah ibadah, dan log bantuan sosial di Kota Pontianak. Dilengkapi manajemen data spasial berbasis peran.
+            </p>
+            <div class="card-tags">
+              <span class="tag tag-blue">Leaflet.js</span>
+              <span class="tag tag-purple">PHP</span>
+              <span class="tag tag-green">MySQL Spatial</span>
+              <span class="tag tag-orange">GeoJSON</span>
+              <span class="tag tag-pink">Role-based</span>
+            </div>
+          </div>
+          <div class="card-footer">
+            <span class="card-link-btn">
+              Buka Proyek <i class="fa-solid fa-arrow-right"></i>
+            </span>
+            <div class="card-status">
+              <div class="status-dot active"></div>
+              <span style="color: var(--clr-muted); font-size: 0.75rem;">Aktif</span>
+            </div>
+          </div>
+        </a>
+
+        <!-- ===== PROJECT 2: JALAN ===== -->
+        <a href="/webgis/jalan/" class="project-card" id="card-jalan" style="animation-delay: 0.1s; cursor: default;" onclick="return false;">
+          <div class="card-glow-line" style="background: linear-gradient(90deg, #818cf8, #f472b6);"></div>
+          <div class="card-header">
+            <div class="card-icon" style="background: rgba(129,140,248,0.12); border: 1px solid rgba(129,140,248,0.2);">
+              ๐Ÿ›ฃ๏ธ
+            </div>
+            <span class="card-num">02</span>
+          </div>
+          <div class="card-body">
+            <h3 class="card-title">Pemetaan Jaringan<br/>Jalan</h3>
+            <p class="card-desc">
+              Visualisasi dan analisis jaringan jalan menggunakan data spasial. Mencakup klasifikasi jalan, kondisi, dan data atribut terkait infrastruktur jalan.
+            </p>
+            <div class="card-tags">
+              <span class="tag tag-purple">WebGIS</span>
+              <span class="tag tag-blue">Shapefile</span>
+              <span class="tag tag-green">Road Network</span>
+            </div>
+          </div>
+          <div class="card-footer">
+            <span class="card-link-btn" style="color: var(--clr-muted);">
+              Segera Hadir <i class="fa-solid fa-clock"></i>
+            </span>
+            <div class="card-status">
+              <div class="status-dot pending"></div>
+              <span style="color: var(--clr-muted); font-size: 0.75rem;">Segera</span>
+            </div>
+          </div>
+          <div class="card-overlay">
+            <div class="coming-soon-badge">๐Ÿšง &nbsp;Coming Soon</div>
+          </div>
+        </a>
+
+        <!-- ===== PROJECT 3: PARSIL ===== -->
+        <a href="/webgis/parsil/" class="project-card" id="card-parsil" style="animation-delay: 0.15s; cursor: default;" onclick="return false;">
+          <div class="card-glow-line" style="background: linear-gradient(90deg, #34d399, #38bdf8);"></div>
+          <div class="card-header">
+            <div class="card-icon" style="background: rgba(52,211,153,0.12); border: 1px solid rgba(52,211,153,0.2);">
+              ๐Ÿ—บ๏ธ
+            </div>
+            <span class="card-num">03</span>
+          </div>
+          <div class="card-body">
+            <h3 class="card-title">Pemetaan Bidang<br/>Tanah (Parsil)</h3>
+            <p class="card-desc">
+              Sistem informasi geografis untuk pemetaan bidang tanah, kepemilikan lahan, dan informasi pertanahan berbasis web yang terintegrasi dengan data spasial.
+            </p>
+            <div class="card-tags">
+              <span class="tag tag-green">Land Parcel</span>
+              <span class="tag tag-blue">Polygon</span>
+              <span class="tag tag-orange">Cadastral</span>
+            </div>
+          </div>
+          <div class="card-footer">
+            <span class="card-link-btn" style="color: var(--clr-muted);">
+              Segera Hadir <i class="fa-solid fa-clock"></i>
+            </span>
+            <div class="card-status">
+              <div class="status-dot pending"></div>
+              <span style="color: var(--clr-muted); font-size: 0.75rem;">Segera</span>
+            </div>
+          </div>
+          <div class="card-overlay">
+            <div class="coming-soon-badge">๐Ÿšง &nbsp;Coming Soon</div>
+          </div>
+        </a>
+
+        <!-- ===== PROJECT 4: SPBU ===== -->
+        <a href="/webgis/spbu/" class="project-card" id="card-spbu" style="animation-delay: 0.2s; cursor: default;" onclick="return false;">
+          <div class="card-glow-line" style="background: linear-gradient(90deg, #fb923c, #facc15);"></div>
+          <div class="card-header">
+            <div class="card-icon" style="background: rgba(251,146,60,0.12); border: 1px solid rgba(251,146,60,0.2);">
+              โ›ฝ
+            </div>
+            <span class="card-num">04</span>
+          </div>
+          <div class="card-body">
+            <h3 class="card-title">Pemetaan Lokasi<br/>SPBU</h3>
+            <p class="card-desc">
+              Peta interaktif untuk menampilkan sebaran Stasiun Pengisian Bahan Bakar Umum (SPBU) beserta informasi detail, analisis jangkauan, dan fasilitas yang tersedia.
+            </p>
+            <div class="card-tags">
+              <span class="tag tag-orange">POI Mapping</span>
+              <span class="tag tag-blue">Leaflet.js</span>
+              <span class="tag tag-pink">Radius Analysis</span>
+            </div>
+          </div>
+          <div class="card-footer">
+            <span class="card-link-btn" style="color: var(--clr-muted);">
+              Segera Hadir <i class="fa-solid fa-clock"></i>
+            </span>
+            <div class="card-status">
+              <div class="status-dot pending"></div>
+              <span style="color: var(--clr-muted); font-size: 0.75rem;">Segera</span>
+            </div>
+          </div>
+          <div class="card-overlay">
+            <div class="coming-soon-badge">๐Ÿšง &nbsp;Coming Soon</div>
+          </div>
+        </a>
+
+      </div>
+    </div>
+  </section>
+
+  <!-- ===== FOOTER ===== -->
+  <footer class="footer">
+    <div class="wrapper">
+      <div class="footer-inner">
+        <div class="footer-logo">Web<span>GIS</span></div>
+        <div class="footer-course">
+          Mata Kuliah Sistem Informasi Geografis &nbsp;ยท&nbsp; Portofolio Tugas Mahasiswa
+        </div>
+        <div style="display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;">
+          <span style="font-size:0.8rem; color: var(--clr-muted);">
+            <i class="fa-solid fa-map-location-dot" style="color: var(--clr-primary);"></i>
+            &nbsp;Leaflet.js
+          </span>
+          <span style="color: var(--clr-border);">|</span>
+          <span style="font-size:0.8rem; color: var(--clr-muted);">
+            <i class="fa-solid fa-database" style="color: var(--clr-accent);"></i>
+            &nbsp;MySQL Spatial
+          </span>
+          <span style="color: var(--clr-border);">|</span>
+          <span style="font-size:0.8rem; color: var(--clr-muted);">
+            <i class="fa-brands fa-php" style="color: var(--clr-secondary);"></i>
+            &nbsp;PHP / XAMPP
+          </span>
+        </div>
+        <div class="footer-divider"></div>
+        <p class="footer-copy">
+          &copy; 2025 WebGIS Portfolio &nbsp;ยท&nbsp; Sistem Informasi Geografis
+        </p>
+      </div>
+    </div>
+  </footer>
+
+  <!-- ===== SCRIPTS ===== -->
+  <script>
+    /* ----- CANVAS PARTICLE / GRID BG ----- */
+    (function () {
+      const canvas = document.getElementById('bg-canvas');
+      const ctx = canvas.getContext('2d');
+      let w, h, animId;
+      const DOTS = [];
+      const LINES = [];
+      const COUNT = 60;
+
+      function resize() {
+        w = canvas.width  = window.innerWidth;
+        h = canvas.height = window.innerHeight;
+      }
+      resize();
+      window.addEventListener('resize', resize);
+
+      // Grid lines
+      function drawGrid() {
+        ctx.strokeStyle = 'rgba(79,70,229,0.06)';
+        ctx.lineWidth = 1;
+        const step = 60;
+        for (let x = 0; x < w; x += step) {
+          ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, h); ctx.stroke();
+        }
+        for (let y = 0; y < h; y += step) {
+          ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(w, y); ctx.stroke();
+        }
+      }
+
+      // Particles
+      for (let i = 0; i < COUNT; i++) {
+        DOTS.push({
+          x: Math.random() * window.innerWidth,
+          y: Math.random() * window.innerHeight,
+          vx: (Math.random() - 0.5) * 0.3,
+          vy: (Math.random() - 0.5) * 0.3,
+          r: Math.random() * 2 + 0.5,
+          a: Math.random()
+        });
+      }
+
+      function draw() {
+        ctx.clearRect(0, 0, w, h);
+        drawGrid();
+
+        // Move and draw dots
+        DOTS.forEach(d => {
+          d.x += d.vx; d.y += d.vy;
+          if (d.x < 0) d.x = w;
+          if (d.x > w) d.x = 0;
+          if (d.y < 0) d.y = h;
+          if (d.y > h) d.y = 0;
+
+          ctx.beginPath();
+          ctx.arc(d.x, d.y, d.r, 0, Math.PI * 2);
+          ctx.fillStyle = `rgba(79,70,229,${d.a * 0.4})`;
+          ctx.fill();
+        });
+
+        // Connect nearby dots
+        for (let i = 0; i < DOTS.length; i++) {
+          for (let j = i + 1; j < DOTS.length; j++) {
+            const dx = DOTS[i].x - DOTS[j].x;
+            const dy = DOTS[i].y - DOTS[j].y;
+            const dist = Math.sqrt(dx * dx + dy * dy);
+            if (dist < 120) {
+              ctx.beginPath();
+              ctx.moveTo(DOTS[i].x, DOTS[i].y);
+              ctx.lineTo(DOTS[j].x, DOTS[j].y);
+              ctx.strokeStyle = `rgba(79,70,229,${0.12 * (1 - dist / 120)})`;
+              ctx.lineWidth = 0.8;
+              ctx.stroke();
+            }
+          }
+        }
+
+        animId = requestAnimationFrame(draw);
+      }
+      draw();
+    })();
+
+    /* ----- NAVBAR SCROLL ----- */
+    const navbar = document.getElementById('navbar');
+    window.addEventListener('scroll', () => {
+      navbar.classList.toggle('scrolled', window.scrollY > 40);
+    });
+
+    /* ----- SCROLL REVEAL ----- */
+    const revealEls = document.querySelectorAll('.reveal');
+    const revealObs = new IntersectionObserver((entries) => {
+      entries.forEach(e => {
+        if (e.isIntersecting) {
+          e.target.classList.add('visible');
+          revealObs.unobserve(e.target);
+        }
+      });
+    }, { threshold: 0.15 });
+    revealEls.forEach(el => revealObs.observe(el));
+
+    /* ----- CARD REVEAL ----- */
+    const cardEls = document.querySelectorAll('.project-card');
+    const cardObs = new IntersectionObserver((entries) => {
+      entries.forEach(e => {
+        if (e.isIntersecting) {
+          e.target.style.opacity = '1';
+          e.target.style.transform = 'translateY(0)';
+          cardObs.unobserve(e.target);
+        }
+      });
+    }, { threshold: 0.1 });
+    cardEls.forEach(card => {
+      card.style.opacity = '0';
+      card.style.transform = 'translateY(30px)';
+      card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
+      cardObs.observe(card);
+    });
+
+    /* ----- SMOOTH HERO CTA ----- */
+    document.getElementById('hero-cta').addEventListener('click', (e) => {
+      e.preventDefault();
+      document.getElementById('projects').scrollIntoView({ behavior: 'smooth' });
+    });
+  </script>
+</body>
+</html>
diff --git a/jalan.js b/jalan.js
new file mode 100644
index 0000000..d19623b
--- /dev/null
+++ b/jalan.js
@@ -0,0 +1,172 @@
+// --- Fitur Jalan ---
+
+const jalanColors = {
+    'Nasional': '#ff0000',  // Merah
+    'Provinsi': '#0000ff',  // Biru
+    'Kabupaten': '#00ff00'  // Hijau
+};
+
+function loadJalan() {
+    jalanLayer.clearLayers();
+    fetch('api/jalan/read.php')
+        .then(res => res.json())
+        .then(data => {
+            if (data.status === 'success' && data.data) {
+                data.data.forEach(item => {
+                    addJalanToMap(item);
+                });
+            }
+            if (window.refreshActivePanel) window.refreshActivePanel();
+        });
+}
+
+function addJalanToMap(item) {
+    // geom adalah GeoJSON {type: "LineString", coordinates: [[lng, lat], ...]}
+    const latlngs = item.geom.coordinates.map(coord => [coord[1], coord[0]]);
+    
+    const polyline = L.polyline(latlngs, {
+        color: jalanColors[item.status] || '#3388ff',
+        weight: 5
+    });
+
+    polyline.jalanData = item;
+
+    // Tampilkan label nama jalan sejajar dengan garis (diagonal)
+    polyline.setText(item.nama, {
+        center: true,
+        offset: 0,
+        attributes: {
+            fill: '#000000',
+            'font-weight': 'bold',
+            'font-size': '14px',
+            'dy': '7'
+        }
+    });
+
+    // Hitung popupContent sekali saat jalan dibuat
+    const d = item;
+    const isAdmin = !!(window.currentUser && window.currentUser.role === 'admin');
+    let actionButtons = '';
+    if (isAdmin) {
+        actionButtons = `
+            <div style="display:flex; gap:5px;">
+                <button style="padding:4px 8px; background:#007bff; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="openEditJalanModal(${d.id})">Edit</button>
+                <button style="padding:4px 8px; background:#dc3545; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="deleteJalan(${d.id})">Hapus</button>
+            </div>
+        `;
+    }
+    
+    const popupContent = `
+        <div style="font-family: Arial, sans-serif; min-width: 150px;">
+            <h4 style="margin:0 0 5px 0;">Jalan ${d.nama}</h4>
+            <p style="margin: 0 0 5px 0;"><b>Status:</b> ${d.status}</p>
+            <p style="margin: 0 0 10px 0;"><b>Panjang:</b> ${d.panjang.toFixed(2)} m</p>
+            ${actionButtons}
+        </div>
+    `;
+    
+    polyline.bindPopup(popupContent);
+
+    jalanLayer.addLayer(polyline);
+}
+
+window.openEditJalanModal = function(id) {
+    let d = null;
+    jalanLayer.eachLayer(function(layer) {
+        if (layer.jalanData && layer.jalanData.id == id) d = layer.jalanData;
+    });
+    if (!d) return;
+
+    const bodyHTML = `
+        <div class="form-group">
+            <label>Nama Jalan</label>
+            <input type="text" id="editJalanNama" value="${d.nama}">
+        </div>
+        <div class="form-group">
+            <label>Status</label>
+            <select id="editJalanStatus">
+                <option value="Nasional" ${d.status === 'Nasional' ? 'selected' : ''}>Nasional</option>
+                <option value="Provinsi" ${d.status === 'Provinsi' ? 'selected' : ''}>Provinsi</option>
+                <option value="Kabupaten" ${d.status === 'Kabupaten' ? 'selected' : ''}>Kabupaten</option>
+            </select>
+        </div>
+        <div class="form-group">
+            <label>Panjang: ${d.panjang.toFixed(2)} m</label>
+        </div>
+    `;
+    map.closePopup();
+    openModal("Edit Jalan", bodyHTML, function() {
+        window.saveEditJalan(d.id, 'editJalanNama', 'editJalanStatus');
+    });
+};
+
+window.saveEditJalan = function(id, namaId, statusId) {
+    const nama = document.getElementById(namaId).value;
+    const status = document.getElementById(statusId).value;
+
+    fetch('api/jalan/update.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id, nama, status })
+    })
+    .then(res => res.json())
+    .then(data => {
+        if(data.status === 'success') {
+            map.closePopup();
+            closeModal();
+            loadJalan();
+        } else {
+            alert(data.message);
+        }
+    });
+};
+
+window.deleteJalan = function(id) {
+    openConfirmModal("Yakin hapus jalan ini?", function() {
+        fetch('api/jalan/delete.php', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ id })
+        })
+        .then(res => res.json())
+        .then(data => {
+            if(data.status === 'success') {
+                map.closePopup();
+                loadJalan();
+            } else {
+                alert(data.message);
+            }
+        });
+    });
+};
+
+window.saveNewJalan = function(geoJsonStr, panjang, namaId, statusId) {
+    const nama = document.getElementById(namaId).value;
+    if (!nama) {
+        alert("Nama jalan harus diisi!");
+        return false;
+    }
+    
+    const status = document.getElementById(statusId).value;
+
+    const geom = JSON.parse(geoJsonStr);
+
+    fetch('api/jalan/create.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ nama, status, panjang, geom })
+    })
+    .then(res => res.json())
+    .then(data => {
+        if(data.status === 'success') {
+            closeModal();
+            loadJalan();
+        } else {
+            alert(data.message);
+        }
+    });
+    return true;
+};
+
+// Initial Load
+loadJalan();
diff --git a/jalan/assets/css/style.css b/jalan/assets/css/style.css
new file mode 100644
index 0000000..b8fd8fb
--- /dev/null
+++ b/jalan/assets/css/style.css
@@ -0,0 +1,1041 @@
+/* Reset & Base */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body, html {
+    height: 100%;
+    font-family: 'Google Sans Flex', 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    overflow: hidden;
+}
+
+/* Map Container */
+#map {
+    width: 100vw;
+    height: 100vh;
+    z-index: 1;
+}
+
+/* Custom UI Container over Map */
+.ui-container {
+    position: absolute;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1000;
+    width: 100%;
+    max-width: 400px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 0 15px;
+}
+
+/* Search Bar */
+.search-bar {
+    display: flex;
+    align-items: center;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    overflow: hidden;
+    height: 48px;
+    transition: box-shadow 0.3s;
+}
+
+.search-bar:focus-within {
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
+}
+
+.search-icon {
+    padding: 0 15px;
+    color: #666;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.search-input {
+    flex: 1;
+    border: none;
+    outline: none;
+    font-size: 16px;
+    padding: 10px 0;
+    color: #333;
+}
+
+.search-clear {
+    padding: 0 15px;
+    color: #999;
+    cursor: pointer;
+    background: none;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    visibility: hidden;
+}
+
+.search-clear:hover {
+    color: #333;
+}
+
+/* Custom Layer Control Button */
+.custom-layer-btn {
+    background-color: white;
+    border-radius: 8px;
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    cursor: pointer;
+    border: none;
+    color: #333;
+}
+
+.custom-layer-btn:hover {
+    background-color: #f8f9fa;
+}
+
+#layerBtn {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    z-index: 1000;
+    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+body.right-panel-open #layerBtn {
+    right: 340px;
+}
+
+.custom-layer-panel {
+    position: absolute;
+    top: 80px;
+    right: 20px;
+    z-index: 1000;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    padding: 15px;
+    width: 250px;
+    display: none;
+    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+body.right-panel-open .custom-layer-panel {
+    right: 340px;
+}
+
+
+.custom-layer-panel h3 {
+    margin-bottom: 10px;
+    font-size: 16px;
+    border-bottom: 1px solid #eee;
+    padding-bottom: 5px;
+}
+
+.layer-section-title {
+    font-size: 11px;
+    font-weight: 700;
+    color: #6366f1;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 8px;
+    margin-top: 12px;
+    padding-bottom: 2px;
+    border-bottom: 1px dashed #e2e8f0;
+}
+
+.layer-option {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 8px;
+    font-size: 14px;
+}
+
+/* ===== Sidebar Toggle Button ===== */
+.sidebar-toggle-btn {
+    position: absolute;
+    left: 20px;
+    top: 190px;
+    z-index: 1001;
+    border-radius: 8px;
+    width: 48px;
+    height: 48px;
+    background: white;
+    border: none;
+    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #6366f1;
+    font-size: 13px;
+    transition: all 0.2s;
+}
+
+.sidebar-toggle-btn:hover {
+    background: #6366f1;
+    color: white;
+    box-shadow: 0 4px 14px rgba(99,102,241,0.4);
+}
+
+.sidebar-toggle-btn.open {
+    background: #6366f1;
+    color: white;
+}
+
+/* ===== Left Sidebar ===== */
+.left-sidebar {
+    position: absolute;
+    left: 20px;
+    top: 250px; /* di bawah toggle button */
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.sidebar-section-label {
+    font-size: 9px;
+    font-weight: 700;
+    color: #94a3b8;
+    text-transform: uppercase;
+    text-align: center;
+    letter-spacing: 0.8px;
+    margin-top: 6px;
+    margin-bottom: 2px;
+    pointer-events: none;
+    user-select: none;
+}
+
+.sidebar-divider {
+    height: 1px;
+    background: #e2e8f0;
+    margin: 4px 6px;
+}
+
+.sidebar-btn {
+    width: 60px;
+    height: 60px;
+    background: white;
+    border: none;
+    border-radius: 12px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 2px;
+    transition: all 0.2s ease;
+    padding: 6px 4px;
+}
+
+.sidebar-btn:hover {
+    transform: translateX(3px);
+    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
+    background: #f8f9fa;
+}
+
+.sidebar-btn.active {
+    background: linear-gradient(135deg, #6366f1, #4f46e5);
+    color: white;
+    box-shadow: 0 6px 18px rgba(99,102,241,0.4);
+    transform: translateX(4px);
+}
+
+.sidebar-emoji {
+    font-size: 22px;
+    line-height: 1;
+}
+
+.sidebar-label {
+    font-size: 9px;
+    font-weight: 600;
+    letter-spacing: 0.3px;
+    color: #555;
+    text-transform: uppercase;
+}
+
+.sidebar-btn.active .sidebar-label {
+    color: rgba(255,255,255,0.85);
+}
+
+/* ===== Right Panel ===== */
+.right-panel {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 320px;
+    background: #f8f9fb;
+    z-index: 999;
+    box-shadow: -4px 0 20px rgba(0,0,0,0.12);
+    display: flex;
+    flex-direction: column;
+    transform: translateX(100%);
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    /* shift layer control when panel open */
+}
+
+.right-panel.open {
+    transform: translateX(0);
+}
+
+.right-panel-header {
+    padding: 16px 16px 12px;
+    background: white;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-shrink: 0;
+    padding-top: 26px;
+}
+
+.right-panel-header h3 {
+    font-size: 15px;
+    font-weight: 700;
+    color: #1e1e2e;
+}
+
+.right-panel-close {
+    width: 30px;
+    height: 30px;
+    border: none;
+    background: #f3f4f6;
+    border-radius: 8px;
+    cursor: pointer;
+    color: #555;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 13px;
+    transition: background 0.2s;
+}
+
+.right-panel-close:hover {
+    background: #e5e7eb;
+    color: #333;
+}
+
+.right-panel-actions {
+    padding: 12px 14px;
+    background: white;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    gap: 8px;
+    flex-shrink: 0;
+}
+
+.right-panel-actions button {
+    flex: 1;
+    padding: 9px 10px;
+    border: none;
+    border-radius: 8px;
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    transition: all 0.2s;
+}
+
+.btn-panel-add {
+    background: linear-gradient(135deg, #6366f1, #4f46e5);
+    color: white;
+    box-shadow: 0 3px 10px rgba(99,102,241,0.3);
+}
+
+.btn-panel-add:hover {
+    box-shadow: 0 5px 14px rgba(99,102,241,0.45);
+    transform: translateY(-1px);
+}
+
+.btn-panel-import {
+    background: #f0fdf4;
+    color: #16a34a;
+    border: 1px solid #bbf7d0 !important;
+}
+
+.btn-panel-import:hover {
+    background: #dcfce7;
+}
+
+.right-panel-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+/* Panel Section Heading */
+.panel-section-title {
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: #9ca3af;
+    padding: 4px 2px 6px;
+    border-bottom: 1px solid #e5e7eb;
+    margin-top: 4px;
+}
+
+/* Panel Empty State */
+.panel-empty {
+    text-align: center;
+    color: #aaa;
+    font-size: 13px;
+    padding: 40px 10px;
+}
+
+/* ===== Data Card ===== */
+.data-card {
+    background: white;
+    border-radius: 12px;
+    padding: 12px 12px 10px;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
+    transition: box-shadow 0.2s;
+    cursor: pointer;
+}
+
+.data-card:hover {
+    box-shadow: 0 3px 12px rgba(0,0,0,0.12);
+}
+
+.data-card-main {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.data-card-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    flex-shrink: 0;
+}
+
+.card-icon-spbu     { background: #f0fdf4; }
+.card-icon-jalan    { background: #eff6ff; }
+.card-icon-parsil   { background: #fefce8; }
+.card-icon-ibadah   { background: #fff7ed; }
+.card-icon-miskin-out { background: #f0fdf4; }
+.card-icon-miskin-in  { background: #fef2f2; }
+
+.data-card-info {
+    flex: 1;
+    min-width: 0;
+}
+
+.data-card-name {
+    font-size: 13px;
+    font-weight: 600;
+    color: #1e1e2e;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.data-card-sub {
+    font-size: 11px;
+    color: #6b7280;
+    margin-top: 2px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.data-card-badge {
+    font-size: 10px;
+    font-weight: 600;
+    padding: 2px 7px;
+    border-radius: 99px;
+    margin-top: 4px;
+    display: inline-block;
+}
+
+.badge-green  { background: #dcfce7; color: #16a34a; }
+.badge-red    { background: #fee2e2; color: #dc2626; }
+.badge-blue   { background: #dbeafe; color: #2563eb; }
+.badge-orange { background: #ffedd5; color: #ea580c; }
+.badge-yellow { background: #fef9c3; color: #ca8a04; }
+
+.data-card-actions {
+    display: flex;
+    gap: 6px;
+    flex-shrink: 0;
+    align-items: center;
+}
+
+.btn-card-action {
+    width: 30px;
+    height: 30px;
+    border: none;
+    border-radius: 7px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    transition: all 0.15s;
+}
+
+.btn-card-edit {
+    background: #eff6ff;
+    color: #3b82f6;
+}
+
+.btn-card-edit:hover {
+    background: #3b82f6;
+    color: white;
+}
+
+.btn-card-delete {
+    background: #fef2f2;
+    color: #ef4444;
+}
+
+.btn-card-delete:hover {
+    background: #ef4444;
+    color: white;
+}
+
+/* Expandable card (miskin) */
+.data-card-expand {
+    overflow: hidden;
+    max-height: 0;
+    transition: max-height 0.3s ease, padding 0.2s;
+    border-top: 0px solid #f3f4f6;
+}
+
+.data-card.expanded .data-card-expand {
+    max-height: 400px;
+    border-top: 1px solid #f3f4f6;
+    margin-top: 10px;
+    padding-top: 10px;
+}
+
+.expand-row {
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    color: #6b7280;
+    padding: 3px 0;
+}
+
+.expand-row span:first-child {
+    font-weight: 500;
+    color: #374151;
+}
+
+.btn-log-bantuan {
+    margin-top: 10px;
+    width: 100%;
+    padding: 8px;
+    background: linear-gradient(135deg, #6366f1, #4f46e5);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    transition: all 0.2s;
+}
+
+.btn-log-bantuan:hover {
+    box-shadow: 0 4px 12px rgba(99,102,241,0.4);
+}
+
+/* Log Bantuan Item */
+.log-item {
+    background: #f8f9fb;
+    border-radius: 8px;
+    padding: 10px 12px;
+    display: flex;
+    gap: 10px;
+    align-items: flex-start;
+}
+
+.log-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #6366f1;
+    flex-shrink: 0;
+    margin-top: 5px;
+}
+
+.log-info {
+    flex: 1;
+}
+
+.log-type {
+    font-size: 12px;
+    font-weight: 600;
+    color: #1e1e2e;
+}
+
+.log-meta {
+    font-size: 11px;
+    color: #9ca3af;
+    margin-top: 2px;
+}
+
+.log-keterangan {
+    font-size: 11px;
+    color: #6b7280;
+    margin-top: 3px;
+    font-style: italic;
+}
+
+/* Popup Form */
+.popup-form {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 200px;
+}
+
+.popup-form label {
+    font-size: 12px;
+    font-weight: bold;
+    color: #555;
+}
+
+.popup-form input[type="text"],
+.popup-form input[type="number"] {
+    width: 100%;
+    padding: 6px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+.popup-form .radio-group {
+    display: flex;
+    gap: 10px;
+}
+
+.popup-form button {
+    padding: 8px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-weight: bold;
+}
+
+.popup-form button.btn-danger {
+    background-color: #dc3545;
+}
+
+.popup-form button:hover {
+    opacity: 0.9;
+}
+
+/* Unified Modal */
+.unified-modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.5);
+    z-index: 2000;
+    align-items: center;
+    justify-content: center;
+}
+
+.unified-modal.show {
+    display: flex;
+}
+
+.modal-content {
+    background-color: white;
+    border-radius: 12px;
+    width: 400px;
+    max-width: 90%;
+    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
+    display: flex;
+    flex-direction: column;
+}
+
+.modal-header {
+    padding: 15px;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.modal-header h3 {
+    font-size: 16px;
+    margin: 0;
+}
+
+.modal-close {
+    font-size: 20px;
+    font-weight: bold;
+    cursor: pointer;
+    color: #888;
+}
+
+.modal-close:hover {
+    color: #333;
+}
+
+.modal-body {
+    padding: 15px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.modal-body label {
+    font-size: 13px;
+    font-weight: 600;
+    color: #444;
+}
+
+.modal-body input[type="text"],
+.modal-body input[type="number"],
+.modal-body input[type="date"],
+.modal-body select,
+.modal-body textarea {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+    font-size: 14px;
+    font-family: inherit;
+}
+
+.modal-footer {
+    padding: 15px;
+    border-top: 1px solid #eee;
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+}
+
+.btn-save {
+    background: linear-gradient(135deg, #6366f1, #4f46e5);
+    color: white;
+    border: none;
+    padding: 8px 18px;
+    border-radius: 7px;
+    cursor: pointer;
+    font-weight: 600;
+    font-size: 13px;
+}
+
+.btn-cancel {
+    background-color: #f8f9fa;
+    border: 1px solid #ddd;
+    padding: 8px 18px;
+    border-radius: 7px;
+    cursor: pointer;
+    font-size: 13px;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+/* Custom Cursor Tooltip */
+.custom-cursor-tooltip {
+    position: absolute;
+    display: none;
+    background-color: rgba(0, 0, 0, 0.75);
+    color: white;
+    padding: 6px 12px;
+    border-radius: 4px;
+    font-size: 13px;
+    font-weight: 500;
+    pointer-events: none;
+    z-index: 9999;
+    white-space: nowrap;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
+}
+
+/* Sembunyikan default tooltip Leaflet Draw */
+.leaflet-draw-tooltip {
+    display: none !important;
+}
+
+/* Sub-layer collapsible */
+.layer-group-item {
+    margin-bottom: 6px;
+}
+
+.layer-group-item > .layer-group-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.layer-toggle-icon {
+    cursor: pointer;
+    padding: 2px 6px;
+    color: #666;
+    font-size: 11px;
+    border-radius: 4px;
+    transition: background 0.2s;
+    flex-shrink: 0;
+}
+
+.layer-toggle-icon:hover {
+    background: #f0f0f0;
+    color: #333;
+}
+
+.layer-toggle-icon i {
+    transition: transform 0.2s;
+}
+
+.layer-toggle-icon.collapsed i {
+    transform: rotate(-90deg);
+}
+
+.sub-layer-list {
+    padding-left: 18px;
+    margin-top: 4px;
+    border-left: 2px solid #eee;
+    overflow: hidden;
+    transition: max-height 0.2s ease;
+}
+
+.sub-option {
+    font-size: 12px !important;
+    color: #555;
+    margin-bottom: 3px !important;
+}
+
+/* ===== Emoji Marker (Pin Bubble) ===== */
+.emoji-marker {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    pointer-events: auto; /* changed from none to allow click/drag */
+}
+
+.emoji-marker .bubble {
+    width: 38px;
+    height: 38px;
+    border-radius: 50% 50% 50% 0;
+    transform: rotate(-45deg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
+    border: 2px solid rgba(255,255,255,0.8);
+    animation: markerPop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
+}
+
+.emoji-marker .bubble span {
+    transform: rotate(45deg);
+    font-size: 18px;
+    line-height: 1;
+}
+
+@keyframes markerPop {
+    0%   { transform: rotate(-45deg) scale(0); }
+    100% { transform: rotate(-45deg) scale(1); }
+}
+
+/* Warna bubble per tipe */
+.emoji-marker .bubble.spbu-24     { background: linear-gradient(135deg, #22c55e, #16a34a); }
+.emoji-marker .bubble.spbu-not24  { background: linear-gradient(135deg, #ef4444, #dc2626); }
+.emoji-marker .bubble.ibadah      { background: linear-gradient(135deg, #f97316, #ea580c); }
+.emoji-marker .bubble.miskin-in   { background: linear-gradient(135deg, #ef4444, #dc2626); }
+.emoji-marker .bubble.miskin-out  { background: linear-gradient(135deg, #22c55e, #16a34a); }
+
+/* ===== Toast Notification ===== */
+#toastContainer {
+    position: fixed;
+    bottom: 28px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    pointer-events: none;
+}
+
+.toast {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 20px;
+    border-radius: 12px;
+    font-size: 13px;
+    font-weight: 500;
+    color: white;
+    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
+    backdrop-filter: blur(6px);
+    pointer-events: auto;
+    animation: toastSlideIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
+    max-width: 340px;
+    text-align: center;
+}
+
+.toast.hiding {
+    animation: toastSlideOut 0.3s ease forwards;
+}
+
+.toast-success { background: linear-gradient(135deg, #22c55e, #16a34a); }
+.toast-error   { background: linear-gradient(135deg, #ef4444, #dc2626); }
+.toast-info    { background: linear-gradient(135deg, #6366f1, #4f46e5); }
+.toast-warning { background: linear-gradient(135deg, #f59e0b, #d97706); }
+
+.toast-icon { font-size: 16px; flex-shrink: 0; }
+
+@keyframes toastSlideIn {
+    0%   { opacity: 0; transform: translateY(20px) scale(0.9); }
+    100% { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+@keyframes toastSlideOut {
+    0%   { opacity: 1; transform: translateY(0) scale(1); }
+    100% { opacity: 0; transform: translateY(10px) scale(0.95); }
+}
+
+/* Auth Widget Styling */
+.auth-widget {
+    position: absolute;
+    top: 20px;
+    right: 80px;
+    z-index: 1000;
+    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+body.right-panel-open .auth-widget {
+    right: 400px;
+}
+
+.btn-login {
+    background: linear-gradient(135deg, #6366f1, #4f46e5);
+    color: white;
+    border: none;
+    border-radius: 24px;
+    height: 48px;
+    padding: 0 24px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    transition: all 0.2s ease;
+}
+
+.btn-login:hover {
+    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.45);
+    transform: translateY(-1px);
+}
+
+.user-profile-pill {
+    background-color: white;
+    border-radius: 24px;
+    height: 48px;
+    padding: 0 8px 0 16px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    border: 1px solid rgba(226, 232, 240, 0.8);
+    backdrop-filter: blur(10px);
+    background: rgba(255, 255, 255, 0.9);
+}
+
+.user-profile-info {
+    display: flex;
+    flex-direction: column;
+}
+
+.user-profile-name {
+    font-size: 12px;
+    font-weight: 700;
+    color: #1e1e2e;
+}
+
+.user-profile-role {
+    font-size: 9px;
+    font-weight: 600;
+    color: #6366f1;
+    text-transform: uppercase;
+}
+
+.btn-profile-logout {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    border: none;
+    background: #f1f5f9;
+    color: #64748b;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+}
+
+.btn-profile-logout:hover {
+    background: #fee2e2;
+    color: #ef4444;
+}
+
+/* User management table styling */
+#userManagementModal table th {
+    padding: 10px 12px;
+    font-weight: 600;
+    background-color: #f1f5f9;
+    border-bottom: 1px solid #cbd5e1;
+}
+
+#userManagementModal table td {
+    padding: 10px 12px;
+    border-bottom: 1px solid #e2e8f0;
+}
+
+
+
+/* =============================================================
+   JALAN — Specific Styles
+   ============================================================= */
+
+.card-icon-jalan { background: #eff6ff; }
+
+.legend-jalan-nasional  { display:inline-block; width:28px; height:4px; background:#ff0000; border-radius:2px; }
+.legend-jalan-provinsi  { display:inline-block; width:28px; height:4px; background:#0000ff; border-radius:2px; }
+.legend-jalan-kabupaten { display:inline-block; width:28px; height:4px; background:#00bb00; border-radius:2px; }
+
+.badge-nasional  { background:#fee2e2; color:#dc2626; }
+.badge-provinsi  { background:#dbeafe; color:#2563eb; }
+.badge-kabupaten { background:#dcfce7; color:#16a34a; }
diff --git a/jalan/assets/js/features/draw_control.js b/jalan/assets/js/features/draw_control.js
new file mode 100644
index 0000000..a1e7026
--- /dev/null
+++ b/jalan/assets/js/features/draw_control.js
@@ -0,0 +1,142 @@
+// --- Setup Leaflet Draw ---
+
+// Layer terpisah untuk hasil gambar sementara sebelum disimpan
+const drawnItems = new L.FeatureGroup();
+map.addLayer(drawnItems);
+
+const drawControl = new L.Control.Draw({
+    draw: {
+        polygon: {
+            allowIntersection: false,
+            showArea: true
+        },
+        polyline: {
+            metric: true
+        },
+        circle: false,
+        circlemarker: false,
+        marker: false, // Marker default dimatikan, kita pakai klik peta untuk SPBU
+        rectangle: false
+    },
+    edit: {
+        featureGroup: drawnItems, // Kita tidak mengedit di drawnItems, karena data aslinya di jalanLayer/parsilLayer
+        edit: false,
+        remove: false
+    }
+});
+// Hapus map.addControl(drawControl); agar tidak tampil UI bawaan LeafletJS
+
+
+// Flag untuk menghindari munculnya form SPBU saat sedang menggambar
+map.on(L.Draw.Event.DRAWSTART, function (e) {
+    isDrawingMode = true;
+});
+
+map.on(L.Draw.Event.DRAWSTOP, function (e) {
+    setTimeout(() => { 
+        isDrawingMode = false; 
+        window.currentDrawMode = null;
+        window.activeDrawHandler = null;
+        window.deactivateAddMode(); 
+    }, 200);
+});
+
+window.activateDraw = function(type) {
+    const isAdmin = !!(window.currentUser && window.currentUser.role === 'admin');
+    if (!isAdmin) return;
+
+    console.log("-> activateDraw dipanggil untuk tipe:", type);
+
+    // Toggle: jika mode yang sama ditekan lagi, batalkan
+    if (window.currentDrawMode === type) {
+        console.log("Mode", type, "sudah aktif, membatalkan...");
+        window.deactivateAddMode();
+        return;
+    }
+    
+    window.deactivateAddMode();
+    window.currentDrawMode = type;
+    console.log("Mengaktifkan mode menggambar:", type);
+    
+    if (type === 'polyline') {
+        const handler = new L.Draw.Polyline(map, drawControl.options.draw.polyline);
+        handler.enable();
+        window.activeDrawHandler = handler;
+        if (window.cursorTooltip) window.cursorTooltip.textContent = 'Klik untuk menggambar Jalan';
+    } else if (type === 'polygon') {
+        const handler = new L.Draw.Polygon(map, drawControl.options.draw.polygon);
+        handler.enable();
+        window.activeDrawHandler = handler;
+        if (window.cursorTooltip) window.cursorTooltip.textContent = 'Klik untuk menggambar Parsil';
+    }
+};
+
+map.on(L.Draw.Event.CREATED, function (e) {
+    const type = e.layerType;
+    const layer = e.layer;
+
+    // Convert layer to GeoJSON geometry
+    const geoJson = layer.toGeoJSON().geometry;
+    const geoJsonStr = JSON.stringify(geoJson);
+
+    if (type === 'polyline') {
+        let length = 0;
+        const latlngs = layer.getLatLngs();
+        for (let i = 0; i < latlngs.length - 1; i++) {
+            length += latlngs[i].distanceTo(latlngs[i + 1]);
+        }
+        
+        // Gunakan Modal alih-alih prompt
+        const bodyHTML = `
+            <div class="form-group">
+                <label>Nama Jalan</label>
+                <input type="text" id="modalJalanNama" placeholder="Nama Jalan">
+            </div>
+            <div class="form-group">
+                <label>Status</label>
+                <select id="modalJalanStatus">
+                    <option value="Nasional">Nasional</option>
+                    <option value="Provinsi">Provinsi</option>
+                    <option value="Kabupaten" selected>Kabupaten</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label>Panjang: ${length.toFixed(2)} m</label>
+            </div>
+        `;
+        openModal("Tambah Jalan Baru", bodyHTML, function() {
+            window.saveNewJalan(geoJsonStr, length, 'modalJalanNama', 'modalJalanStatus');
+        });
+        
+    } 
+    else if (type === 'polygon') {
+        const latlngs = layer.getLatLngs()[0];
+        let area = 0;
+        if (L.GeometryUtil && L.GeometryUtil.geodesicArea) {
+            area = L.GeometryUtil.geodesicArea(latlngs);
+        }
+
+        const bodyHTML = `
+            <div class="form-group">
+                <label>Nama Pemilik/Area</label>
+                <input type="text" id="modalParsilNama" placeholder="Contoh: Budi atau Sawah A">
+            </div>
+            <div class="form-group">
+                <label>Status Tanah</label>
+                <select id="modalParsilStatus">
+                    <option value="SHM" selected>SHM</option>
+                    <option value="HGB">HGB</option>
+                    <option value="HGU">HGU</option>
+                    <option value="HP">HP</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label>Luas: ${area.toFixed(2)} mยฒ</label>
+            </div>
+        `;
+        openModal("Tambah Parsil Tanah", bodyHTML, function() {
+            window.saveNewParsil(geoJsonStr, area, 'modalParsilNama', 'modalParsilStatus');
+        });
+    }
+});
+
diff --git a/jalan/assets/js/features/geojson.js b/jalan/assets/js/features/geojson.js
new file mode 100644
index 0000000..62fc314
--- /dev/null
+++ b/jalan/assets/js/features/geojson.js
@@ -0,0 +1,182 @@
+// --- Fitur Import GeoJSON ---
+
+const fileGeoJson = document.getElementById('fileGeoJson');
+let geoJsonLayers = {};
+let geoJsonCounter = 0;
+
+window.toggleGeoJsonMenu = function() {
+    const list = document.getElementById('geoJsonFileList');
+    const icon = document.getElementById('geoJsonToggleIcon');
+    if (list.style.display === 'none') {
+        list.style.display = 'block';
+        icon.className = 'fas fa-minus';
+    } else {
+        list.style.display = 'none';
+        icon.className = 'fas fa-plus';
+    }
+};
+
+// Cek apakah fitur GeoJSON ini terlihat seperti data penduduk miskin
+function isMiskinFeature(feature) {
+    if (!feature || !feature.geometry || feature.geometry.type !== 'Point') return false;
+    const props = feature.properties || {};
+    const keys = Object.keys(props).map(k => k.toLowerCase());
+    // Dianggap data miskin jika punya properti nama (dan bukan ibadah atau spbu)
+    const hasNama = keys.some(k => ['nama', 'name', 'penduduk'].includes(k));
+    const isIbadah = keys.some(k => ['jenis', 'radius', 'alamat'].includes(k));
+    const isSpbu = keys.some(k => ['alamat_spbu', 'is_24_jam'].includes(k));
+    return hasNama && !isIbadah && !isSpbu;
+}
+
+fileGeoJson.addEventListener('change', function(e) {
+    const file = e.target.files[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = function(event) {
+        try {
+            const geoJsonData = JSON.parse(event.target.result);
+            const fileName = file.name;
+
+            // Pisahkan fitur menjadi dua kelompok: miskin dan non-miskin
+            const features = geoJsonData.type === 'FeatureCollection'
+                ? geoJsonData.features
+                : [geoJsonData];
+
+            const miskinFeatures = features.filter(f => isMiskinFeature(f));
+            const otherFeatures = features.filter(f => !isMiskinFeature(f));
+
+            // ---- Proses fitur miskin: Simpan ke DB, lalu tampilkan seperti penduduk miskin ----
+            if (miskinFeatures.length > 0) {
+                const bulkData = miskinFeatures.map(f => {
+                    const props = f.properties || {};
+                    const coords = f.geometry.coordinates;
+                    return {
+                        nama:              props.nama || props.name || props.penduduk || 'Data Impor',
+                        kategori_bantuan:  props.kategori_bantuan || props.kategori || props.bantuan || 'Makan',
+                        jumlah_jiwa:       parseInt(props.jumlah_jiwa || props.jumlah || props.jiwa || 1, 10) || 1,
+                        lat:               parseFloat(coords[1]),
+                        lng:               parseFloat(coords[0])
+                    };
+                });
+
+                fetch('../poverty/api/penduduk_miskin/bulk_create.php', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(bulkData)
+                })
+                .then(res => res.json())
+                .then(data => {
+                    if (data.status === 'success') {
+                        // Reload layer penduduk miskin agar marker tampil dengan edit/hapus/log bantuan
+                        if (typeof loadPendudukMiskin === 'function') {
+                            loadPendudukMiskin();
+                        }
+                        if (typeof window.refreshActivePanel === 'function') {
+                            window.refreshActivePanel();
+                        }
+                        showToast(data.message || 'Data berhasil diimpor ke layer Penduduk Miskin.', 'success');
+                    } else {
+                        showToast(data.message || 'Gagal menyimpan data miskin.', 'error');
+                    }
+                })
+                .catch(err => {
+                    console.error(err);
+                    showToast('Gagal terhubung ke server saat menyimpan data miskin.', 'error');
+                });
+            }
+
+            // ---- Proses fitur non-miskin: Render sebagai layer GeoJSON biasa ----
+            if (otherFeatures.length > 0) {
+                const layerId = 'gj_' + (++geoJsonCounter);
+                const individualLayer = L.featureGroup();
+
+                const otherGeoJson = {
+                    type: 'FeatureCollection',
+                    features: otherFeatures
+                };
+
+                L.geoJSON(otherGeoJson, {
+                    pointToLayer: function(feature, latlng) {
+                        const props = feature.properties || {};
+                        let emoji = props.emoji;
+
+                        if (!emoji) {
+                            const text = JSON.stringify(props).toLowerCase();
+                            if (text.includes('spbu'))      emoji = 'โ›ฝ';
+                            else if (text.includes('masjid'))    emoji = '๐Ÿ•Œ';
+                            else if (text.includes('gereja'))    emoji = 'โ›ช';
+                            else if (text.includes('vihara'))    emoji = '๐Ÿชท';
+                            else if (text.includes('pura'))      emoji = '๐Ÿ›•';
+                            else if (text.includes('kelenteng')) emoji = '๐Ÿฎ';
+                            else emoji = '๐Ÿ“';
+                        }
+
+                        let cls = 'miskin-out';
+                        if (emoji === 'โ›ฝ') cls = 'spbu-24';
+                        else if (['๐Ÿ•Œ','โ›ช','๐Ÿ›•','๐Ÿชท','๐Ÿฎ'].includes(emoji)) cls = 'ibadah';
+
+                        const icon = L.divIcon({
+                            className: '',
+                            html: `<div class="emoji-marker"><div class="bubble ${cls}"><span>${emoji}</span></div></div>`,
+                            iconSize: [38, 38],
+                            iconAnchor: [19, 38],
+                            popupAnchor: [0, -40]
+                        });
+
+                        return L.marker(latlng, { icon: icon });
+                    },
+                    onEachFeature: function(feature, layer) {
+                        if (feature.properties) {
+                            let popupContent = '<h4>Informasi Feature</h4><ul style="list-style:none; padding:0; font-size:12px; margin: 0;">';
+                            for (let key in feature.properties) {
+                                popupContent += `<li><strong>${key}:</strong> ${feature.properties[key]}</li>`;
+                            }
+                            popupContent += '</ul>';
+                            layer.bindPopup(popupContent);
+                        }
+                    },
+                    style: function(feature) {
+                        return {
+                            color: (feature.properties && feature.properties.color) || '#3388ff',
+                            weight: 2,
+                            fillOpacity: 0.4
+                        };
+                    }
+                }).addTo(individualLayer);
+
+                individualLayer.addTo(map);
+                geoJsonLayers[layerId] = individualLayer;
+
+                // Tambahkan checkbox ke UI
+                const container = document.getElementById('geoJsonLayersContainer');
+                const label = document.createElement('label');
+                label.className = 'layer-option';
+                label.innerHTML = `<input type="checkbox" id="chk_${layerId}" checked> ${fileName}`;
+
+                label.querySelector('input').addEventListener('change', function(e) {
+                    if (e.target.checked) {
+                        map.addLayer(geoJsonLayers[layerId]);
+                    } else {
+                        map.removeLayer(geoJsonLayers[layerId]);
+                    }
+                });
+
+                container.appendChild(label);
+
+                if (miskinFeatures.length === 0) {
+                    showToast('File GeoJSON berhasil dimuat!', 'success');
+                }
+            }
+
+            // Reset input file agar bisa import file yang sama
+            fileGeoJson.value = '';
+
+        } catch (error) {
+            showToast('Gagal memproses file GeoJSON. Pastikan format valid.', 'error');
+            console.error(error);
+        }
+    };
+    reader.readAsText(file);
+});
+
diff --git a/jalan/assets/js/features/geolocation.js b/jalan/assets/js/features/geolocation.js
new file mode 100644
index 0000000..4d95a20
--- /dev/null
+++ b/jalan/assets/js/features/geolocation.js
@@ -0,0 +1,31 @@
+// --- Fitur Geolocation ---
+
+// Tambahkan tombol di dalam wadah zoom control
+const geoBtn = document.createElement('button');
+geoBtn.className = 'custom-layer-btn';
+geoBtn.style.position = 'relative';
+geoBtn.style.top = '0';
+geoBtn.style.left = '0';
+geoBtn.style.right = 'auto';
+geoBtn.innerHTML = '<i class="fas fa-crosshairs fa-lg"></i>';
+geoBtn.title = 'Lokasi Saya';
+document.querySelector('.custom-zoom-control').appendChild(geoBtn);
+
+let userMarker = null;
+
+geoBtn.addEventListener('click', function() {
+    map.locate({setView: true, maxZoom: 16});
+});
+
+map.on('locationfound', function(e) {
+    if (userMarker) {
+        map.removeLayer(userMarker);
+    }
+    userMarker = L.marker(e.latlng).addTo(map)
+        .bindPopup("Anda berada di sini!").openPopup();
+});
+
+map.on('locationerror', function(e) {
+    alert("Gagal mendapatkan lokasi Anda.");
+});
+
diff --git a/jalan/assets/js/features/jalan.js b/jalan/assets/js/features/jalan.js
new file mode 100644
index 0000000..24a93ac
--- /dev/null
+++ b/jalan/assets/js/features/jalan.js
@@ -0,0 +1,173 @@
+// --- Fitur Jalan ---
+
+const jalanColors = {
+    'Nasional': '#ff0000',  // Merah
+    'Provinsi': '#0000ff',  // Biru
+    'Kabupaten': '#00ff00'  // Hijau
+};
+
+function loadJalan() {
+    jalanLayer.clearLayers();
+    fetch('../jalan/read.php')
+        .then(res => res.json())
+        .then(data => {
+            if (data.status === 'success' && data.data) {
+                data.data.forEach(item => {
+                    addJalanToMap(item);
+                });
+            }
+            if (window.refreshActivePanel) window.refreshActivePanel();
+        });
+}
+
+function addJalanToMap(item) {
+    // geom adalah GeoJSON {type: "LineString", coordinates: [[lng, lat], ...]}
+    const latlngs = item.geom.coordinates.map(coord => [coord[1], coord[0]]);
+    
+    const polyline = L.polyline(latlngs, {
+        color: jalanColors[item.status] || '#3388ff',
+        weight: 5
+    });
+
+    polyline.jalanData = item;
+
+    // Tampilkan label nama jalan sejajar dengan garis (diagonal)
+    polyline.setText(item.nama, {
+        center: true,
+        offset: 0,
+        attributes: {
+            fill: '#000000',
+            'font-weight': 'bold',
+            'font-size': '14px',
+            'dy': '7'
+        }
+    });
+
+    // Hitung popupContent sekali saat jalan dibuat
+    const d = item;
+    const isAdmin = !!(window.currentUser && window.currentUser.role === 'admin');
+    let actionButtons = '';
+    if (isAdmin) {
+        actionButtons = `
+            <div style="display:flex; gap:5px;">
+                <button style="padding:4px 8px; background:#007bff; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="openEditJalanModal(${d.id})">Edit</button>
+                <button style="padding:4px 8px; background:#dc3545; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="deleteJalan(${d.id})">Hapus</button>
+            </div>
+        `;
+    }
+    
+    const popupContent = `
+        <div style="font-family: Arial, sans-serif; min-width: 150px;">
+            <h4 style="margin:0 0 5px 0;">Jalan ${d.nama}</h4>
+            <p style="margin: 0 0 5px 0;"><b>Status:</b> ${d.status}</p>
+            <p style="margin: 0 0 10px 0;"><b>Panjang:</b> ${d.panjang.toFixed(2)} m</p>
+            ${actionButtons}
+        </div>
+    `;
+    
+    polyline.bindPopup(popupContent);
+
+    jalanLayer.addLayer(polyline);
+}
+
+window.openEditJalanModal = function(id) {
+    let d = null;
+    jalanLayer.eachLayer(function(layer) {
+        if (layer.jalanData && layer.jalanData.id == id) d = layer.jalanData;
+    });
+    if (!d) return;
+
+    const bodyHTML = `
+        <div class="form-group">
+            <label>Nama Jalan</label>
+            <input type="text" id="editJalanNama" value="${d.nama}">
+        </div>
+        <div class="form-group">
+            <label>Status</label>
+            <select id="editJalanStatus">
+                <option value="Nasional" ${d.status === 'Nasional' ? 'selected' : ''}>Nasional</option>
+                <option value="Provinsi" ${d.status === 'Provinsi' ? 'selected' : ''}>Provinsi</option>
+                <option value="Kabupaten" ${d.status === 'Kabupaten' ? 'selected' : ''}>Kabupaten</option>
+            </select>
+        </div>
+        <div class="form-group">
+            <label>Panjang: ${d.panjang.toFixed(2)} m</label>
+        </div>
+    `;
+    map.closePopup();
+    openModal("Edit Jalan", bodyHTML, function() {
+        window.saveEditJalan(d.id, 'editJalanNama', 'editJalanStatus');
+    });
+};
+
+window.saveEditJalan = function(id, namaId, statusId) {
+    const nama = document.getElementById(namaId).value;
+    const status = document.getElementById(statusId).value;
+
+    fetch('../jalan/update.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id, nama, status })
+    })
+    .then(res => res.json())
+    .then(data => {
+        if(data.status === 'success') {
+            map.closePopup();
+            closeModal();
+            loadJalan();
+        } else {
+            alert(data.message);
+        }
+    });
+};
+
+window.deleteJalan = function(id) {
+    openConfirmModal("Yakin hapus jalan ini?", function() {
+        fetch('../jalan/delete.php', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ id })
+        })
+        .then(res => res.json())
+        .then(data => {
+            if(data.status === 'success') {
+                map.closePopup();
+                loadJalan();
+            } else {
+                alert(data.message);
+            }
+        });
+    });
+};
+
+window.saveNewJalan = function(geoJsonStr, panjang, namaId, statusId) {
+    const nama = document.getElementById(namaId).value;
+    if (!nama) {
+        alert("Nama jalan harus diisi!");
+        return false;
+    }
+    
+    const status = document.getElementById(statusId).value;
+
+    const geom = JSON.parse(geoJsonStr);
+
+    fetch('../jalan/create.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ nama, status, panjang, geom })
+    })
+    .then(res => res.json())
+    .then(data => {
+        if(data.status === 'success') {
+            closeModal();
+            loadJalan();
+        } else {
+            alert(data.message);
+        }
+    });
+    return true;
+};
+
+// Initial Load
+loadJalan();
+
diff --git a/jalan/assets/js/features/parsil.js b/jalan/assets/js/features/parsil.js
new file mode 100644
index 0000000..d8509da
--- /dev/null
+++ b/jalan/assets/js/features/parsil.js
@@ -0,0 +1,159 @@
+// --- Fitur Parsil ---
+
+const parsilColors = {
+    'SHM': '#28a745', // Hijau
+    'HGB': '#17a2b8', // Biru Muda
+    'HGU': '#ffc107', // Kuning
+    'HP':  '#fd7e14'  // Oranye
+};
+
+function loadParsil() {
+    parsilLayer.clearLayers();
+    fetch('../parsil/read.php')
+        .then(res => res.json())
+        .then(data => {
+            if (data.status === 'success' && data.data) {
+                data.data.forEach(item => {
+                    addParsilToMap(item);
+                });
+            }
+            if (window.refreshActivePanel) window.refreshActivePanel();
+        });
+}
+
+function addParsilToMap(item) {
+    // geom adalah GeoJSON Polygon
+    // coordinates pada Polygon formatnya: [[[lng, lat], [lng, lat], ...]]
+    // Leaflet Polygon butuh array of [lat, lng]
+    const latlngs = item.geom.coordinates[0].map(coord => [coord[1], coord[0]]);
+    
+    const polygon = L.polygon(latlngs, {
+        color: parsilColors[item.status] || '#3388ff',
+        fillColor: parsilColors[item.status] || '#3388ff',
+        fillOpacity: 0.5,
+        weight: 2
+    });
+
+    polygon.parsilData = item;
+
+    const d = item;
+    const isAdmin = !!(window.currentUser && window.currentUser.role === 'admin');
+    let actionButtons = '';
+    if (isAdmin) {
+        actionButtons = `
+            <div style="display:flex; gap:5px;">
+                <button style="padding:4px 8px; background:#007bff; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="openEditParsilModal(${d.id})">Edit</button>
+                <button style="padding:4px 8px; background:#dc3545; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="deleteParsil(${d.id})">Hapus</button>
+            </div>
+        `;
+    }
+    const popupContent = `
+        <div style="font-family: Arial, sans-serif; min-width: 150px;">
+            <h4 style="margin:0 0 5px 0;">Parsil ${d.nama || ''}</h4>
+            <p style="margin: 0 0 5px 0;"><b>Status:</b> ${d.status}</p>
+            <p style="margin: 0 0 10px 0;"><b>Luas:</b> ${d.luas.toFixed(2)} mยฒ</p>
+            ${actionButtons}
+        </div>
+    `;
+    polygon.bindPopup(popupContent);
+
+    parsilLayer.addLayer(polygon);
+}
+
+window.openEditParsilModal = function(id) {
+    let d = null;
+    parsilLayer.eachLayer(function(layer) {
+        if (layer.parsilData && layer.parsilData.id == id) d = layer.parsilData;
+    });
+    if (!d) return;
+
+    const bodyHTML = `
+        <div class="form-group">
+            <label>Nama Pemilik/Area</label>
+            <input type="text" id="editParsilNama" value="${d.nama || ''}">
+        </div>
+        <div class="form-group">
+            <label>Status</label>
+            <select id="editParsilStatus">
+                <option value="SHM" ${d.status === 'SHM' ? 'selected' : ''}>SHM</option>
+                <option value="HGB" ${d.status === 'HGB' ? 'selected' : ''}>HGB</option>
+                <option value="HGU" ${d.status === 'HGU' ? 'selected' : ''}>HGU</option>
+                <option value="HP" ${d.status === 'HP' ? 'selected' : ''}>HP</option>
+            </select>
+        </div>
+        <div class="form-group">
+            <label>Luas: ${d.luas.toFixed(2)} mยฒ</label>
+        </div>
+    `;
+    map.closePopup();
+    openModal("Edit Parsil Tanah", bodyHTML, function() {
+        window.saveEditParsil(d.id, 'editParsilNama', 'editParsilStatus');
+    });
+};
+
+window.saveEditParsil = function(id, namaId, statusId) {
+    const nama = document.getElementById(namaId).value;
+    const status = document.getElementById(statusId).value;
+
+    fetch('../parsil/update.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id, nama, status })
+    })
+    .then(res => res.json())
+    .then(data => {
+        if(data.status === 'success') {
+            map.closePopup();
+            closeModal();
+            loadParsil();
+        } else {
+            alert(data.message);
+        }
+    });
+};
+
+window.deleteParsil = function(id) {
+    openConfirmModal("Yakin hapus parsil ini?", function() {
+        fetch('../parsil/delete.php', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ id })
+        })
+        .then(res => res.json())
+        .then(data => {
+            if(data.status === 'success') {
+                map.closePopup();
+                loadParsil();
+            } else {
+                alert(data.message);
+            }
+        });
+    });
+};
+
+window.saveNewParsil = function(geoJsonStr, luas, namaId, statusId) {
+    const nama = document.getElementById(namaId).value;
+    const status = document.getElementById(statusId).value;
+
+    const geom = JSON.parse(geoJsonStr);
+
+    fetch('../parsil/create.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ nama, status, luas, geom })
+    })
+    .then(res => res.json())
+    .then(data => {
+        if(data.status === 'success') {
+            closeModal();
+            loadParsil();
+        } else {
+            alert(data.message);
+        }
+    });
+    return true;
+};
+
+// Initial Load
+loadParsil();
+
diff --git a/jalan/assets/js/features/spbu.js b/jalan/assets/js/features/spbu.js
new file mode 100644
index 0000000..07d168f
--- /dev/null
+++ b/jalan/assets/js/features/spbu.js
@@ -0,0 +1,214 @@
+// --- Fitur SPBU ---
+
+// Emoji Bubble Icon builder
+function makeSpbuIcon(is24) {
+    const cls = is24 ? 'spbu-24' : 'spbu-not24';
+    return L.divIcon({
+        className: '',
+        html: `<div class="emoji-marker"><div class="bubble ${cls}"><span>โ›ฝ</span></div></div>`,
+        iconSize: [38, 38],
+        iconAnchor: [19, 38],
+        popupAnchor: [0, -40]
+    });
+}
+
+const spbuGreenIcon = makeSpbuIcon(true);
+const spbuRedIcon   = makeSpbuIcon(false);
+
+let isDrawingMode = false; // Akan diset true saat draw mode aktif (jalan/parsil)
+
+
+// Fetch SPBU
+function loadSpbu() {
+    spbuLayer.clearLayers();
+    fetch('../spbu/read.php')
+        .then(res => res.json())
+        .then(data => {
+            if (data.status === 'success' && data.data) {
+                data.data.forEach(item => {
+                    addSpbuMarker(item);
+                });
+            }
+            if (window.refreshActivePanel) window.refreshActivePanel();
+        });
+}
+
+function addSpbuMarker(item) {
+    const isAdmin = !!(window.currentUser && window.currentUser.role === 'admin');
+    const icon = makeSpbuIcon(item.is_24_jam);
+    const marker = L.marker([item.lat, item.lng], {
+        icon: icon,
+        draggable: isAdmin
+    });
+
+    marker.spbuData = item; // Simpan data di objek marker
+
+    // Hitung popupContent sekali saat marker dibuat
+    const d = item;
+    let actionButtons = '';
+    if (isAdmin) {
+        actionButtons = `
+            <div style="display:flex; gap:5px;">
+                <button style="padding:4px 8px; background:#007bff; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="openEditSpbuModal(${d.id})">Edit</button>
+                <button style="padding:4px 8px; background:#dc3545; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="deleteSpbu(${d.id})">Hapus</button>
+            </div>
+        `;
+    }
+    const popupContent = `
+        <div style="font-family: Arial, sans-serif; min-width: 150px;">
+            <h4 style="margin:0 0 5px 0;">SPBU ${d.nama}</h4>
+            <p style="margin: 0 0 5px 0;"><b>No. WA:</b> ${d.no_wa}</p>
+            <p style="margin: 0 0 10px 0;"><b>Buka 24 Jam:</b> ${d.is_24_jam ? 'Ya' : 'Tidak'}</p>
+            ${actionButtons}
+        </div>
+    `;
+    marker.bindPopup(popupContent);
+
+    // Event drag untuk update koordinat
+    marker.on('dragend', function(e) {
+        const newPos = marker.getLatLng();
+        updateSpbu(item.id, item.nama, item.no_wa, item.is_24_jam, newPos.lat, newPos.lng);
+    });
+
+    spbuLayer.addLayer(marker);
+}
+
+// Map Click -> Form Add
+map.on('click', function(e) {
+    if (isDrawingMode) return; // Jangan muncul form jika sedang gambar garis/polygon
+    
+    // Hanya proses jika mode tambah SPBU aktif
+    if (window.currentAddMode === 'spbu') {
+        const bodyHTML = `
+            <div class="form-group">
+                <label>Lat: ${e.latlng.lat.toFixed(6)}, Lng: ${e.latlng.lng.toFixed(6)}</label>
+            </div>
+            <div class="form-group">
+                <label>Nama SPBU</label>
+                <input type="text" id="modalSpbuNama" placeholder="Nama SPBU">
+            </div>
+            <div class="form-group">
+                <label>No. WA</label>
+                <input type="text" id="modalSpbuWa" placeholder="No. WA">
+            </div>
+            <div class="form-group">
+                <label>Buka 24 Jam?</label>
+                <div class="radio-group" style="margin-top:5px;">
+                    <label><input type="radio" name="modalSpbu24" value="1"> Ya</label>
+                    <label><input type="radio" name="modalSpbu24" value="0" checked> Tidak</label>
+                </div>
+            </div>
+        `;
+
+        openModal("Tambah SPBU Baru", bodyHTML, function() {
+            window.saveNewSpbu(e.latlng.lat, e.latlng.lng, 'modalSpbuNama', 'modalSpbuWa', 'modalSpbu24');
+        });
+
+        // Nonaktifkan mode tambah setelah modal muncul
+        window.deactivateAddMode();
+    }
+});
+
+window.saveNewSpbu = function(lat, lng, namaId, waId, radioName) {
+    const nama = document.getElementById(namaId).value;
+    if (!nama) {
+        alert("Nama SPBU harus diisi!");
+        return;
+    }
+    const no_wa = document.getElementById(waId).value;
+    const is_24_jam = document.querySelector(`input[name="${radioName}"]:checked`).value;
+
+    fetch('../spbu/create.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ nama, no_wa, is_24_jam, lat, lng })
+    })
+    .then(res => res.json())
+    .then(data => {
+        if(data.status === 'success') {
+            closeModal();
+            loadSpbu();
+        } else {
+            alert(data.message);
+        }
+    });
+};
+
+window.openEditSpbuModal = function(id) {
+    let d = null;
+    spbuLayer.eachLayer(function(layer) {
+        if (layer.spbuData && layer.spbuData.id == id) d = layer.spbuData;
+    });
+    if (!d) return;
+
+    const bodyHTML = `
+        <div class="form-group">
+            <label>Nama SPBU</label>
+            <input type="text" id="editSpbuNama" value="${d.nama}">
+        </div>
+        <div class="form-group">
+            <label>No. WA</label>
+            <input type="text" id="editSpbuWa" value="${d.no_wa}">
+        </div>
+        <div class="form-group">
+            <label>Buka 24 Jam?</label>
+            <div class="radio-group" style="margin-top:5px;">
+                <label><input type="radio" name="editSpbu24" value="1" ${d.is_24_jam ? 'checked' : ''}> Ya</label>
+                <label><input type="radio" name="editSpbu24" value="0" ${!d.is_24_jam ? 'checked' : ''}> Tidak</label>
+            </div>
+        </div>
+    `;
+    map.closePopup();
+    openModal("Edit SPBU", bodyHTML, function() {
+        window.saveEditSpbu(d.id, d.lat, d.lng, 'editSpbuNama', 'editSpbuWa', 'editSpbu24');
+    });
+};
+
+window.saveEditSpbu = function(id, lat, lng, namaId, waId, radioName) {
+    const nama = document.getElementById(namaId).value;
+    const no_wa = document.getElementById(waId).value;
+    const is_24_jam = document.querySelector(`input[name="${radioName}"]:checked`).value;
+
+    updateSpbu(id, nama, no_wa, is_24_jam, lat, lng);
+};
+
+function updateSpbu(id, nama, no_wa, is_24_jam, lat, lng) {
+    fetch('../spbu/update.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id, nama, no_wa, is_24_jam, lat, lng })
+    })
+    .then(res => res.json())
+    .then(data => {
+        if(data.status === 'success') {
+            map.closePopup();
+            closeModal();
+            loadSpbu();
+        } else {
+            alert(data.message);
+        }
+    });
+}
+
+window.deleteSpbu = function(id) {
+    openConfirmModal("Yakin hapus SPBU ini?", function() {
+        fetch('../spbu/delete.php', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ id })
+        })
+        .then(res => res.json())
+        .then(data => {
+            if(data.status === 'success') {
+                map.closePopup();
+                loadSpbu();
+            } else {
+                alert(data.message);
+            }
+        });
+    });
+};
+
+// Initial Load
+loadSpbu();
+
diff --git a/jalan/create.php b/jalan/create.php
new file mode 100644
index 0000000..7d65e09
--- /dev/null
+++ b/jalan/create.php
@@ -0,0 +1,25 @@
+<?php
+header("Content-Type: application/json; charset=UTF-8");
+require_once '../auth_helper.php';
+requireAdmin();
+include_once '../db_connect.php';
+
+$data = json_decode(file_get_contents("php://input"));
+
+if(!empty($data->geom)) {
+    $nama = $conn->real_escape_string($data->nama ?? 'Jalan Baru');
+    $status = $conn->real_escape_string($data->status ?? 'Kabupaten');
+    $panjang = (float)($data->panjang ?? 0);
+    $geom = $conn->real_escape_string(json_encode($data->geom)); // GeoJSON string
+
+    $query = "INSERT INTO jalan (nama, status, panjang, geom) VALUES ('$nama', '$status', $panjang, ST_GeomFromGeoJSON('$geom'))";
+
+    if($conn->query($query)) {
+        echo json_encode(["status" => "success", "id" => $conn->insert_id, "message" => "Jalan berhasil ditambahkan."]);
+    } else {
+        echo json_encode(["status" => "error", "message" => "Gagal menambahkan jalan: " . $conn->error]);
+    }
+} else {
+    echo json_encode(["status" => "error", "message" => "Data geometri tidak lengkap."]);
+}
+?>
diff --git a/jalan/db_connect.php b/jalan/db_connect.php
new file mode 100644
index 0000000..a3922ed
--- /dev/null
+++ b/jalan/db_connect.php
@@ -0,0 +1,17 @@
+<?php
+$host = "localhost";
+$user = "root";
+$pass = "";
+$db   = "webgis";
+
+// Coba koneksi ke server dan pilih database
+$conn = new mysqli($host, $user, $pass, $db);
+
+if ($conn->connect_error) {
+    die("Koneksi gagal: " . $conn->connect_error);
+}
+// Set charset
+$conn->set_charset("utf8mb4");
+
+// Jika di-include oleh file API, biarkan $conn tersedia
+?>
diff --git a/jalan/delete.php b/jalan/delete.php
new file mode 100644
index 0000000..41960a4
--- /dev/null
+++ b/jalan/delete.php
@@ -0,0 +1,22 @@
+<?php
+header("Content-Type: application/json; charset=UTF-8");
+require_once '../auth_helper.php';
+requireAdmin();
+include_once '../db_connect.php';
+
+$data = json_decode(file_get_contents("php://input"));
+
+if(!empty($data->id)) {
+    $id = (int)$data->id;
+
+    $query = "DELETE FROM jalan WHERE id=$id";
+
+    if($conn->query($query)) {
+        echo json_encode(["status" => "success", "message" => "Jalan berhasil dihapus."]);
+    } else {
+        echo json_encode(["status" => "error", "message" => "Gagal hapus jalan: " . $conn->error]);
+    }
+} else {
+    echo json_encode(["status" => "error", "message" => "ID tidak diberikan."]);
+}
+?>
diff --git a/jalan/index.php b/jalan/index.php
new file mode 100644
index 0000000..37a4a3e
--- /dev/null
+++ b/jalan/index.php
@@ -0,0 +1,428 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WebGIS Pemetaan Kemiskinan</title>
+    
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400;500;600;700&display=swap" rel="stylesheet">
+    
+    <!-- FontAwesome (Icons) -->
+    <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="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+    
+    <!-- Leaflet Draw CSS -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
+
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="assets/css/style.css">
+</head>
+<body>
+
+    <!-- UI Container over map -->
+    <div class="ui-container">
+        <!-- Search Bar -->
+        <div class="search-bar">
+            <div class="search-icon">
+                <i class="fas fa-search"></i>
+            </div>
+            <input type="text" class="search-input" id="searchInput" placeholder="Cari SPBU, jalan, parsil, rumah ibadah...">
+            <button class="search-clear" id="searchClear">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+        <!-- Search Results -->
+        <div id="searchResults" style="display: none; background: white; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); max-height: 200px; overflow-y: auto;">
+        </div>
+    </div>
+
+    <!-- Custom Zoom Control -->
+    <div class="custom-zoom-control" style="position: absolute; top: 20px; left: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 5px;">
+        <button class="custom-layer-btn" id="zoomInBtn" style="position: relative; top: 0; left: 0; right: auto;" title="Zoom In"><i class="fas fa-plus"></i></button>
+        <button class="custom-layer-btn" id="zoomOutBtn" style="position: relative; top: 0; left: 0; right: auto;" title="Zoom Out"><i class="fas fa-minus"></i></button>
+    </div>
+
+    <!-- Sidebar Toggle Button -->
+    <button class="sidebar-toggle-btn" id="sidebarToggleBtn" title="Menu">
+        <i class="fas fa-chevron-right" id="sidebarToggleIcon"></i>
+    </button>
+
+    <!-- Left Sidebar Menu -->
+    <nav class="left-sidebar" id="leftSidebar" style="display:none;">
+        <div class="sidebar-section-label">Umum</div>
+        <button class="sidebar-btn" id="menuSpbu"   data-panel="spbu"   title="SPBU">
+            <span class="sidebar-emoji">โ›ฝ</span>
+            <span class="sidebar-label">SPBU</span>
+        </button>
+        <button class="sidebar-btn" id="menuJalan"  data-panel="jalan"  title="Jalan">
+            <span class="sidebar-emoji">๐Ÿ›ฃ๏ธ</span>
+            <span class="sidebar-label">Jalan</span>
+        </button>
+        <button class="sidebar-btn" id="menuParsil" data-panel="parsil" title="Parsil Tanah">
+            <span class="sidebar-emoji">๐Ÿ—บ๏ธ</span>
+            <span class="sidebar-label">Parsil</span>
+        </button>
+        
+        <div class="sidebar-divider"></div>
+        
+        <div class="sidebar-section-label">Poverty</div>
+        <button class="sidebar-btn" id="menuIbadah" data-panel="ibadah" title="Rumah Ibadah">
+            <span class="sidebar-emoji">๐Ÿ•Œ</span>
+            <span class="sidebar-label">Ibadah</span>
+        </button>
+        <button class="sidebar-btn" id="menuMiskin" data-panel="miskin" title="Penduduk Miskin">
+            <span class="sidebar-emoji">๐Ÿ </span>
+            <span class="sidebar-label">Miskin</span>
+        </button>
+        
+        <div class="sidebar-divider" id="sidebarAdminDivider" style="display:none;"></div>
+        <button class="sidebar-btn" id="menuUsers" style="display:none;" title="Manajemen Pengguna">
+            <span class="sidebar-emoji">๐Ÿ‘ฅ</span>
+            <span class="sidebar-label">User</span>
+        </button>
+    </nav>
+
+
+
+    <!-- Custom Layer Control Button -->
+    <button class="custom-layer-btn" id="layerBtn" title="Atur Layer">
+        <i class="fas fa-layer-group fa-lg"></i>
+    </button>
+
+    <div>
+        <!-- Custom Layer Control Panel -->
+        <div class="custom-layer-panel" id="layerPanel">
+            <h3>Daftar Layer</h3>
+    
+            <div class="layer-section-title">Infrastruktur & Lahan</div>
+    
+            <!-- SPBU -->
+            <div class="layer-group-item">
+                <div class="layer-group-header">
+                    <label class="layer-option" style="margin:0; flex:1;">
+                        <input type="checkbox" id="layerSpbu" checked> SPBU
+                    </label>
+                    <span class="layer-toggle-icon collapsed" onclick="toggleSubLayer('subSpbu', this)"><i class="fas fa-chevron-down"></i></span>
+                </div>
+                <div id="subSpbu" class="sub-layer-list" style="display:none;">
+                    <label class="layer-option sub-option">
+                        <input type="checkbox" class="sub-spbu" value="1" checked onchange="applySubFilter('spbu')"> 24 Jam
+                    </label>
+                    <label class="layer-option sub-option">
+                        <input type="checkbox" class="sub-spbu" value="0" checked onchange="applySubFilter('spbu')"> Tidak 24 Jam
+                    </label>
+                </div>
+            </div>
+    
+            <!-- Jalan -->
+            <div class="layer-group-item">
+                <div class="layer-group-header">
+                    <label class="layer-option" style="margin:0; flex:1;">
+                        <input type="checkbox" id="layerJalan" checked> Jalan
+                    </label>
+                    <span class="layer-toggle-icon collapsed" onclick="toggleSubLayer('subJalan', this)"><i class="fas fa-chevron-down"></i></span>
+                </div>
+                <div id="subJalan" class="sub-layer-list" style="display:none;">
+                    <label class="layer-option sub-option">
+                        <input type="checkbox" class="sub-jalan" value="Nasional" checked onchange="applySubFilter('jalan')"> Nasional
+                    </label>
+                    <label class="layer-option sub-option">
+                        <input type="checkbox" class="sub-jalan" value="Provinsi" checked onchange="applySubFilter('jalan')"> Provinsi
+                    </label>
+                    <label class="layer-option sub-option">
+                        <input type="checkbox" class="sub-jalan" value="Kabupaten" checked onchange="applySubFilter('jalan')"> Kabupaten
+                    </label>
+                </div>
+            </div>
+    
+            <!-- Parsil -->
+            <div class="layer-group-item">
+                <div class="layer-group-header">
+                    <label class="layer-option" style="margin:0; flex:1;">
+                        <input type="checkbox" id="layerParsil" checked> Parsil Tanah
+                    </label>
+                    <span class="layer-toggle-icon collapsed" onclick="toggleSubLayer('subParsil', this)"><i class="fas fa-chevron-down"></i></span>
+                </div>
+                <div id="subParsil" class="sub-layer-list" style="display:none;">
+                    <label class="layer-option sub-option">
+                        <input type="checkbox" class="sub-parsil" value="SHM" checked onchange="applySubFilter('parsil')"> SHM
+                    </label>
+                    <label class="layer-option sub-option">
+                        <input type="checkbox" class="sub-parsil" value="HGB" checked onchange="applySubFilter('parsil')"> HGB
+                    </label>
+                    <label class="layer-option sub-option">
+                        <input type="checkbox" class="sub-parsil" value="HGU" checked onchange="applySubFilter('parsil')"> HGU
+                    </label>
+                    <label class="layer-option sub-option">
+                        <input type="checkbox" class="sub-parsil" value="HP"  checked onchange="applySubFilter('parsil')"> HP
+                    </label>
+                </div>
+            </div>
+    
+            <div class="layer-section-title">Pemetaan Kemiskinan</div>
+    
+            <!-- Rumah Ibadah -->
+            <label class="layer-option">
+                <input type="checkbox" id="layerRumahIbadah" checked> Rumah Ibadah
+            </label>
+    
+            <!-- Penduduk Miskin -->
+            <div class="layer-group-item">
+                <div class="layer-group-header">
+                    <label class="layer-option" style="margin:0; flex:1;">
+                        <input type="checkbox" id="layerMiskin" checked> Penduduk Miskin
+                    </label>
+                    <span class="layer-toggle-icon collapsed" onclick="toggleSubLayer('subMiskin', this)"><i class="fas fa-chevron-down"></i></span>
+                </div>
+                <div id="subMiskin" class="sub-layer-list" style="display:none;">
+                    <label class="layer-option sub-option">
+                        <input type="checkbox" class="sub-miskin" value="Makan" checked onchange="applySubFilter('miskin')"> Bantuan Makan
+                    </label>
+                    <label class="layer-option sub-option">
+                        <input type="checkbox" class="sub-miskin" value="Pemberdayaan" checked onchange="applySubFilter('miskin')"> Pemberdayaan
+                    </label>
+                </div>
+            </div>
+    
+            <!-- GeoJSON Eksternal -->
+            <div class="layer-group" style="margin-top: 10px; border-top: 1px solid #eee; padding-top: 10px;">
+                <div class="layer-group-header" onclick="window.toggleGeoJsonMenu()" style="cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-size:14px; margin-bottom:8px; font-weight: 500;">
+                    <span><i class="fas fa-folder"></i> GeoJSON Eksternal</span>
+                    <i id="geoJsonToggleIcon" class="fas fa-plus"></i>
+                </div>
+                <div id="geoJsonFileList" style="display:none; padding-left:15px; margin-bottom:10px;">
+                    <div id="geoJsonLayersContainer"></div>
+                    <div style="margin-top: 10px; padding-top: 10px; border-top: 1px dashed #ddd;">
+                        <label style="font-size: 12px; display:block; margin-bottom: 5px;">Import GeoJSON Baru:</label>
+                        <input type="file" id="fileGeoJson" accept=".geojson,.json" style="font-size: 12px; max-width: 100%;">
+                    </div>
+                </div>
+            </div>
+        </div><!-- /custom-layer-panel -->
+
+        <!-- Right Data Panel -->
+        <div class="right-panel" id="rightPanel">
+            <div class="right-panel-header">
+                <h3 id="rightPanelTitle">Data</h3>
+                <button class="right-panel-close" id="rightPanelClose"><i class="fas fa-times"></i></button>
+            </div>
+            <div class="right-panel-actions" id="rightPanelActions"></div>
+            <div class="right-panel-body" id="rightPanelBody">
+                <div class="panel-empty">Pilih menu di kiri untuk menampilkan data</div>
+            </div>
+        </div><!-- /right-panel -->
+    </div>
+
+
+
+    <!-- Map Container -->
+    <div id="map"></div>
+
+    <!-- Unified Modal -->
+    <div id="unifiedModal" class="unified-modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3 id="modalTitle">Judul Form</h3>
+                <span class="modal-close" onclick="closeModal()">&times;</span>
+            </div>
+            <div class="modal-body" id="modalBody">
+                <!-- Konten dinamis -->
+            </div>
+            <div class="modal-footer" id="modalFooter">
+                <button id="modalSaveBtn" class="btn-save">Simpan</button>
+                <button class="btn-cancel" onclick="closeModal()">Batal</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Confirm Modal -->
+    <div id="confirmModal" class="unified-modal">
+        <div class="modal-content" style="width: 300px;">
+            <div class="modal-header">
+                <h3>Konfirmasi</h3>
+            </div>
+            <div class="modal-body">
+                <p id="confirmMessage"></p>
+            </div>
+            <div class="modal-footer" style="display: flex; gap: 10px; justify-content: flex-end;">
+                <button id="confirmYesBtn" class="btn-save" style="background-color: #dc3545;">Ya, Hapus</button>
+                <button class="btn-cancel" onclick="closeConfirmModal()">Batal</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Log Bantuan Modal -->
+    <div id="logBantuanModal" class="unified-modal">
+        <div class="modal-content" style="width:500px; max-height:85vh; overflow:hidden; display:flex; flex-direction:column;">
+            <div class="modal-header">
+                <h3 id="logBantuanTitle">Log Bantuan</h3>
+                <span class="modal-close" onclick="closeLogBantuanModal()">&times;</span>
+            </div>
+            <div class="modal-body" style="flex:1; overflow-y:auto; gap:0; padding:0;">
+                <!-- Riwayat -->
+                <div style="padding:15px; border-bottom:1px solid #eee;">
+                    <h4 style="font-size:13px; font-weight:600; color:#555; margin-bottom:10px;">Riwayat Bantuan</h4>
+                    <div id="logBantuanList" style="max-height:220px; overflow-y:auto; display:flex; flex-direction:column; gap:8px;">
+                        <div class="panel-empty" style="padding:20px;">Belum ada riwayat</div>
+                    </div>
+                </div>
+                <!-- Form Tambah -->
+                <div style="padding:15px;">
+                    <h4 style="font-size:13px; font-weight:600; color:#555; margin-bottom:10px;">Tambah Log Bantuan</h4>
+                    <div class="form-group">
+                        <label>Rumah Ibadah</label>
+                        <select id="logIbadahId"></select>
+                    </div>
+                    <div class="form-group">
+                        <label>Tipe Bantuan</label>
+                        <select id="logTipeBantuan">
+                            <option value="Sembako">Sembako</option>
+                            <option value="Uang Tunai">Uang Tunai</option>
+                            <option value="Pakaian">Pakaian</option>
+                            <option value="Pendidikan">Pendidikan</option>
+                            <option value="Kesehatan">Kesehatan</option>
+                            <option value="Lainnya">Lainnya</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label>Tanggal</label>
+                        <input type="date" id="logTanggal">
+                    </div>
+                    <div class="form-group">
+                        <label>Keterangan (opsional)</label>
+                        <textarea id="logKeterangan" rows="2" placeholder="Catatan tambahan..."></textarea>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button class="btn-save" id="logSaveBtn">Simpan Log</button>
+                <button class="btn-cancel" onclick="closeLogBantuanModal()">Tutup</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Floating Profile / Auth Control -->
+    <div id="authWidget" class="auth-widget">
+        <button class="btn-login" id="authLoginBtn"><i class="fas fa-sign-in-alt"></i> Login</button>
+    </div>
+
+    <!-- Login Modal -->
+    <div id="loginModal" class="unified-modal">
+        <div class="modal-content" style="width: 360px;">
+            <div class="modal-header">
+                <h3>Login Ke Sistem</h3>
+                <span class="modal-close" id="closeLoginModal">&times;</span>
+            </div>
+            <div class="modal-body">
+                <div class="form-group">
+                    <label for="loginUsername">Username</label>
+                    <input type="text" id="loginUsername" placeholder="Masukkan username">
+                </div>
+                <div class="form-group">
+                    <label for="loginPassword">Password</label>
+                    <input type="password" id="loginPassword" placeholder="Masukkan password">
+                </div>
+                <div id="loginErrorMsg" style="display:none; color:#ef4444; font-size:12px; font-weight:500;"></div>
+            </div>
+            <div class="modal-footer">
+                <button id="loginSubmitBtn" class="btn-save" style="width: 100%;">Masuk</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- User Management Modal -->
+    <div id="userManagementModal" class="unified-modal">
+        <div class="modal-content" style="width: 700px; max-width: 95%;">
+            <div class="modal-header">
+                <h3>Manajemen Pengguna (Admin)</h3>
+                <span class="modal-close" id="closeUserManagementModal">&times;</span>
+            </div>
+            <div class="modal-body" style="gap: 15px;">
+                <!-- Form Tambah/Edit User -->
+                <div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 10px;">
+                    <h4 id="userFormTitle" style="font-size: 13px; font-weight:700; color:#334155; margin-bottom: 2px;">Tambah User Baru</h4>
+                    <input type="hidden" id="manageUserId" value="">
+                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
+                        <div class="form-group">
+                            <label>Username</label>
+                            <input type="text" id="manageUsername" placeholder="Username">
+                        </div>
+                        <div class="form-group">
+                            <label>Password (Kosongkan jika tidak diubah)</label>
+                            <input type="password" id="managePassword" placeholder="Password">
+                        </div>
+                    </div>
+                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
+                        <div class="form-group">
+                            <label>Role</label>
+                            <select id="manageRole">
+                                <option value="pengelola" selected>Pengelola Rumah Ibadah</option>
+                                <option value="admin">Admin</option>
+                            </select>
+                        </div>
+                        <div class="form-group" id="manageIbadahGroup">
+                            <label>Rumah Ibadah yang Dikelola</label>
+                            <select id="manageIbadahId">
+                                <!-- Dikonstruksi dinamis dari data rumah ibadah -->
+                            </select>
+                        </div>
+                    </div>
+                    <div style="display: flex; gap: 8px; justify-content: flex-end; margin-top: 5px;">
+                        <button id="btnCancelUserEdit" class="btn-cancel" style="padding: 6px 12px; display:none;">Batal</button>
+                        <button id="btnSaveUser" class="btn-save" style="padding: 6px 16px;">Simpan User</button>
+                    </div>
+                </div>
+                
+                <!-- Tabel Daftar User -->
+                <div style="max-height: 200px; overflow-y: auto; border: 1px solid #cbd5e1; border-radius: 8px;">
+                    <table style="width: 100%; border-collapse: collapse; font-size: 13px; text-align: left;">
+                        <thead>
+                           <tr style="background: #f1f5f9; border-bottom: 1px solid #cbd5e1; color:#475569; position: sticky; top: 0; z-index: 10;">
+                               <th style="padding: 10px 12px;">Username</th>
+                               <th style="padding: 10px 12px;">Role</th>
+                               <th style="padding: 10px 12px;">Rumah Ibadah</th>
+                               <th style="padding: 10px 12px; text-align: center;">Aksi</th>
+                           </tr>
+                        </thead>
+                        <tbody id="userTableBody">
+                            <!-- Diisi dinamis -->
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Toast Notification Container -->
+    <div id="toastContainer"></div>
+
+    <!-- Leaflet JS -->
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+    
+    <!-- Leaflet Draw JS -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
+
+    <!-- Leaflet TextPath JS (untuk teks diagonal) -->
+    <script src="https://cdn.jsdelivr.net/npm/leaflet-textpath@1.2.3/leaflet.textpath.min.js"></script>
+
+    <!-- Main Map Initialization -->
+    <script src="assets/js/map.js?v=<?= time() ?>"></script>
+    <!-- Fitur & Komponen -->
+    <script src="assets/js/features/spbu.js?v=<?= time() ?>"></script>
+    <script src="assets/js/features/jalan.js?v=<?= time() ?>"></script>
+    <script src="assets/js/features/parsil.js?v=<?= time() ?>"></script>
+    <script src="assets/js/features/draw_control.js?v=<?= time() ?>"></script>
+    <script src="assets/js/features/geolocation.js?v=<?= time() ?>"></script>
+    <script src="assets/js/features/kemiskinan.js?v=<?= time() ?>"></script>
+    <script src="assets/js/features/geojson.js?v=<?= time() ?>"></script>
+    <script src="assets/js/panel.js?v=<?= time() ?>"></script>
+    
+    <!-- Core Auth Feature -->
+    <script src="assets/js/features/auth.js?v=<?= time() ?>"></script>
+    
+</body>
+</html>
diff --git a/jalan/read.php b/jalan/read.php
new file mode 100644
index 0000000..ade48aa
--- /dev/null
+++ b/jalan/read.php
@@ -0,0 +1,25 @@
+<?php
+header("Content-Type: application/json; charset=UTF-8");
+include_once '../db_connect.php';
+
+$query = "SELECT id, nama, status, panjang, ST_AsGeoJSON(geom) as geom FROM jalan";
+$result = $conn->query($query);
+
+$jalan_arr = array();
+
+if($result->num_rows > 0) {
+    while($row = $result->fetch_assoc()) {
+        $jalan_item = array(
+            "id" => $row['id'],
+            "nama" => $row['nama'],
+            "status" => $row['status'],
+            "panjang" => (float)$row['panjang'],
+            "geom" => json_decode($row['geom'])
+        );
+        array_push($jalan_arr, $jalan_item);
+    }
+    echo json_encode(["status" => "success", "data" => $jalan_arr]);
+} else {
+    echo json_encode(["status" => "success", "data" => []]);
+}
+?>
diff --git a/jalan/update.php b/jalan/update.php
new file mode 100644
index 0000000..3e65d91
--- /dev/null
+++ b/jalan/update.php
@@ -0,0 +1,31 @@
+<?php
+header("Content-Type: application/json; charset=UTF-8");
+require_once '../auth_helper.php';
+requireAdmin();
+include_once '../db_connect.php';
+
+$data = json_decode(file_get_contents("php://input"));
+
+if(!empty($data->id)) {
+    $id = (int)$data->id;
+    $nama = $conn->real_escape_string($data->nama ?? '');
+    $status = $conn->real_escape_string($data->status ?? 'Kabupaten');
+    
+    // Jika ada update geometri
+    if(!empty($data->geom)) {
+        $panjang = (float)($data->panjang ?? 0);
+        $geom = $conn->real_escape_string(json_encode($data->geom));
+        $query = "UPDATE jalan SET nama='$nama', status='$status', panjang=$panjang, geom=ST_GeomFromGeoJSON('$geom') WHERE id=$id";
+    } else {
+        $query = "UPDATE jalan SET nama='$nama', status='$status' WHERE id=$id";
+    }
+
+    if($conn->query($query)) {
+        echo json_encode(["status" => "success", "message" => "Jalan berhasil diupdate."]);
+    } else {
+        echo json_encode(["status" => "error", "message" => "Gagal update jalan: " . $conn->error]);
+    }
+} else {
+    echo json_encode(["status" => "error", "message" => "ID tidak diberikan."]);
+}
+?>
diff --git a/parsil.js b/parsil.js
new file mode 100644
index 0000000..0bea38a
--- /dev/null
+++ b/parsil.js
@@ -0,0 +1,158 @@
+// --- Fitur Parsil ---
+
+const parsilColors = {
+    'SHM': '#28a745', // Hijau
+    'HGB': '#17a2b8', // Biru Muda
+    'HGU': '#ffc107', // Kuning
+    'HP':  '#fd7e14'  // Oranye
+};
+
+function loadParsil() {
+    parsilLayer.clearLayers();
+    fetch('api/parsil/read.php')
+        .then(res => res.json())
+        .then(data => {
+            if (data.status === 'success' && data.data) {
+                data.data.forEach(item => {
+                    addParsilToMap(item);
+                });
+            }
+            if (window.refreshActivePanel) window.refreshActivePanel();
+        });
+}
+
+function addParsilToMap(item) {
+    // geom adalah GeoJSON Polygon
+    // coordinates pada Polygon formatnya: [[[lng, lat], [lng, lat], ...]]
+    // Leaflet Polygon butuh array of [lat, lng]
+    const latlngs = item.geom.coordinates[0].map(coord => [coord[1], coord[0]]);
+    
+    const polygon = L.polygon(latlngs, {
+        color: parsilColors[item.status] || '#3388ff',
+        fillColor: parsilColors[item.status] || '#3388ff',
+        fillOpacity: 0.5,
+        weight: 2
+    });
+
+    polygon.parsilData = item;
+
+    const d = item;
+    const isAdmin = !!(window.currentUser && window.currentUser.role === 'admin');
+    let actionButtons = '';
+    if (isAdmin) {
+        actionButtons = `
+            <div style="display:flex; gap:5px;">
+                <button style="padding:4px 8px; background:#007bff; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="openEditParsilModal(${d.id})">Edit</button>
+                <button style="padding:4px 8px; background:#dc3545; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="deleteParsil(${d.id})">Hapus</button>
+            </div>
+        `;
+    }
+    const popupContent = `
+        <div style="font-family: Arial, sans-serif; min-width: 150px;">
+            <h4 style="margin:0 0 5px 0;">Parsil ${d.nama || ''}</h4>
+            <p style="margin: 0 0 5px 0;"><b>Status:</b> ${d.status}</p>
+            <p style="margin: 0 0 10px 0;"><b>Luas:</b> ${d.luas.toFixed(2)} mยฒ</p>
+            ${actionButtons}
+        </div>
+    `;
+    polygon.bindPopup(popupContent);
+
+    parsilLayer.addLayer(polygon);
+}
+
+window.openEditParsilModal = function(id) {
+    let d = null;
+    parsilLayer.eachLayer(function(layer) {
+        if (layer.parsilData && layer.parsilData.id == id) d = layer.parsilData;
+    });
+    if (!d) return;
+
+    const bodyHTML = `
+        <div class="form-group">
+            <label>Nama Pemilik/Area</label>
+            <input type="text" id="editParsilNama" value="${d.nama || ''}">
+        </div>
+        <div class="form-group">
+            <label>Status</label>
+            <select id="editParsilStatus">
+                <option value="SHM" ${d.status === 'SHM' ? 'selected' : ''}>SHM</option>
+                <option value="HGB" ${d.status === 'HGB' ? 'selected' : ''}>HGB</option>
+                <option value="HGU" ${d.status === 'HGU' ? 'selected' : ''}>HGU</option>
+                <option value="HP" ${d.status === 'HP' ? 'selected' : ''}>HP</option>
+            </select>
+        </div>
+        <div class="form-group">
+            <label>Luas: ${d.luas.toFixed(2)} mยฒ</label>
+        </div>
+    `;
+    map.closePopup();
+    openModal("Edit Parsil Tanah", bodyHTML, function() {
+        window.saveEditParsil(d.id, 'editParsilNama', 'editParsilStatus');
+    });
+};
+
+window.saveEditParsil = function(id, namaId, statusId) {
+    const nama = document.getElementById(namaId).value;
+    const status = document.getElementById(statusId).value;
+
+    fetch('api/parsil/update.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id, nama, status })
+    })
+    .then(res => res.json())
+    .then(data => {
+        if(data.status === 'success') {
+            map.closePopup();
+            closeModal();
+            loadParsil();
+        } else {
+            alert(data.message);
+        }
+    });
+};
+
+window.deleteParsil = function(id) {
+    openConfirmModal("Yakin hapus parsil ini?", function() {
+        fetch('api/parsil/delete.php', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ id })
+        })
+        .then(res => res.json())
+        .then(data => {
+            if(data.status === 'success') {
+                map.closePopup();
+                loadParsil();
+            } else {
+                alert(data.message);
+            }
+        });
+    });
+};
+
+window.saveNewParsil = function(geoJsonStr, luas, namaId, statusId) {
+    const nama = document.getElementById(namaId).value;
+    const status = document.getElementById(statusId).value;
+
+    const geom = JSON.parse(geoJsonStr);
+
+    fetch('api/parsil/create.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ nama, status, luas, geom })
+    })
+    .then(res => res.json())
+    .then(data => {
+        if(data.status === 'success') {
+            closeModal();
+            loadParsil();
+        } else {
+            alert(data.message);
+        }
+    });
+    return true;
+};
+
+// Initial Load
+loadParsil();
diff --git a/parsil/assets/css/style.css b/parsil/assets/css/style.css
new file mode 100644
index 0000000..19f11d9
--- /dev/null
+++ b/parsil/assets/css/style.css
@@ -0,0 +1,1043 @@
+/* Reset & Base */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body, html {
+    height: 100%;
+    font-family: 'Google Sans Flex', 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    overflow: hidden;
+}
+
+/* Map Container */
+#map {
+    width: 100vw;
+    height: 100vh;
+    z-index: 1;
+}
+
+/* Custom UI Container over Map */
+.ui-container {
+    position: absolute;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1000;
+    width: 100%;
+    max-width: 400px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 0 15px;
+}
+
+/* Search Bar */
+.search-bar {
+    display: flex;
+    align-items: center;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    overflow: hidden;
+    height: 48px;
+    transition: box-shadow 0.3s;
+}
+
+.search-bar:focus-within {
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
+}
+
+.search-icon {
+    padding: 0 15px;
+    color: #666;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.search-input {
+    flex: 1;
+    border: none;
+    outline: none;
+    font-size: 16px;
+    padding: 10px 0;
+    color: #333;
+}
+
+.search-clear {
+    padding: 0 15px;
+    color: #999;
+    cursor: pointer;
+    background: none;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    visibility: hidden;
+}
+
+.search-clear:hover {
+    color: #333;
+}
+
+/* Custom Layer Control Button */
+.custom-layer-btn {
+    background-color: white;
+    border-radius: 8px;
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    cursor: pointer;
+    border: none;
+    color: #333;
+}
+
+.custom-layer-btn:hover {
+    background-color: #f8f9fa;
+}
+
+#layerBtn {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    z-index: 1000;
+    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+body.right-panel-open #layerBtn {
+    right: 340px;
+}
+
+.custom-layer-panel {
+    position: absolute;
+    top: 80px;
+    right: 20px;
+    z-index: 1000;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    padding: 15px;
+    width: 250px;
+    display: none;
+    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+body.right-panel-open .custom-layer-panel {
+    right: 340px;
+}
+
+
+.custom-layer-panel h3 {
+    margin-bottom: 10px;
+    font-size: 16px;
+    border-bottom: 1px solid #eee;
+    padding-bottom: 5px;
+}
+
+.layer-section-title {
+    font-size: 11px;
+    font-weight: 700;
+    color: #6366f1;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 8px;
+    margin-top: 12px;
+    padding-bottom: 2px;
+    border-bottom: 1px dashed #e2e8f0;
+}
+
+.layer-option {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 8px;
+    font-size: 14px;
+}
+
+/* ===== Sidebar Toggle Button ===== */
+.sidebar-toggle-btn {
+    position: absolute;
+    left: 20px;
+    top: 190px;
+    z-index: 1001;
+    border-radius: 8px;
+    width: 48px;
+    height: 48px;
+    background: white;
+    border: none;
+    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #6366f1;
+    font-size: 13px;
+    transition: all 0.2s;
+}
+
+.sidebar-toggle-btn:hover {
+    background: #6366f1;
+    color: white;
+    box-shadow: 0 4px 14px rgba(99,102,241,0.4);
+}
+
+.sidebar-toggle-btn.open {
+    background: #6366f1;
+    color: white;
+}
+
+/* ===== Left Sidebar ===== */
+.left-sidebar {
+    position: absolute;
+    left: 20px;
+    top: 250px; /* di bawah toggle button */
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.sidebar-section-label {
+    font-size: 9px;
+    font-weight: 700;
+    color: #94a3b8;
+    text-transform: uppercase;
+    text-align: center;
+    letter-spacing: 0.8px;
+    margin-top: 6px;
+    margin-bottom: 2px;
+    pointer-events: none;
+    user-select: none;
+}
+
+.sidebar-divider {
+    height: 1px;
+    background: #e2e8f0;
+    margin: 4px 6px;
+}
+
+.sidebar-btn {
+    width: 60px;
+    height: 60px;
+    background: white;
+    border: none;
+    border-radius: 12px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 2px;
+    transition: all 0.2s ease;
+    padding: 6px 4px;
+}
+
+.sidebar-btn:hover {
+    transform: translateX(3px);
+    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
+    background: #f8f9fa;
+}
+
+.sidebar-btn.active {
+    background: linear-gradient(135deg, #6366f1, #4f46e5);
+    color: white;
+    box-shadow: 0 6px 18px rgba(99,102,241,0.4);
+    transform: translateX(4px);
+}
+
+.sidebar-emoji {
+    font-size: 22px;
+    line-height: 1;
+}
+
+.sidebar-label {
+    font-size: 9px;
+    font-weight: 600;
+    letter-spacing: 0.3px;
+    color: #555;
+    text-transform: uppercase;
+}
+
+.sidebar-btn.active .sidebar-label {
+    color: rgba(255,255,255,0.85);
+}
+
+/* ===== Right Panel ===== */
+.right-panel {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 320px;
+    background: #f8f9fb;
+    z-index: 999;
+    box-shadow: -4px 0 20px rgba(0,0,0,0.12);
+    display: flex;
+    flex-direction: column;
+    transform: translateX(100%);
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    /* shift layer control when panel open */
+}
+
+.right-panel.open {
+    transform: translateX(0);
+}
+
+.right-panel-header {
+    padding: 16px 16px 12px;
+    background: white;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-shrink: 0;
+    padding-top: 26px;
+}
+
+.right-panel-header h3 {
+    font-size: 15px;
+    font-weight: 700;
+    color: #1e1e2e;
+}
+
+.right-panel-close {
+    width: 30px;
+    height: 30px;
+    border: none;
+    background: #f3f4f6;
+    border-radius: 8px;
+    cursor: pointer;
+    color: #555;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 13px;
+    transition: background 0.2s;
+}
+
+.right-panel-close:hover {
+    background: #e5e7eb;
+    color: #333;
+}
+
+.right-panel-actions {
+    padding: 12px 14px;
+    background: white;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    gap: 8px;
+    flex-shrink: 0;
+}
+
+.right-panel-actions button {
+    flex: 1;
+    padding: 9px 10px;
+    border: none;
+    border-radius: 8px;
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    transition: all 0.2s;
+}
+
+.btn-panel-add {
+    background: linear-gradient(135deg, #6366f1, #4f46e5);
+    color: white;
+    box-shadow: 0 3px 10px rgba(99,102,241,0.3);
+}
+
+.btn-panel-add:hover {
+    box-shadow: 0 5px 14px rgba(99,102,241,0.45);
+    transform: translateY(-1px);
+}
+
+.btn-panel-import {
+    background: #f0fdf4;
+    color: #16a34a;
+    border: 1px solid #bbf7d0 !important;
+}
+
+.btn-panel-import:hover {
+    background: #dcfce7;
+}
+
+.right-panel-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+/* Panel Section Heading */
+.panel-section-title {
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: #9ca3af;
+    padding: 4px 2px 6px;
+    border-bottom: 1px solid #e5e7eb;
+    margin-top: 4px;
+}
+
+/* Panel Empty State */
+.panel-empty {
+    text-align: center;
+    color: #aaa;
+    font-size: 13px;
+    padding: 40px 10px;
+}
+
+/* ===== Data Card ===== */
+.data-card {
+    background: white;
+    border-radius: 12px;
+    padding: 12px 12px 10px;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
+    transition: box-shadow 0.2s;
+    cursor: pointer;
+}
+
+.data-card:hover {
+    box-shadow: 0 3px 12px rgba(0,0,0,0.12);
+}
+
+.data-card-main {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.data-card-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    flex-shrink: 0;
+}
+
+.card-icon-spbu     { background: #f0fdf4; }
+.card-icon-jalan    { background: #eff6ff; }
+.card-icon-parsil   { background: #fefce8; }
+.card-icon-ibadah   { background: #fff7ed; }
+.card-icon-miskin-out { background: #f0fdf4; }
+.card-icon-miskin-in  { background: #fef2f2; }
+
+.data-card-info {
+    flex: 1;
+    min-width: 0;
+}
+
+.data-card-name {
+    font-size: 13px;
+    font-weight: 600;
+    color: #1e1e2e;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.data-card-sub {
+    font-size: 11px;
+    color: #6b7280;
+    margin-top: 2px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.data-card-badge {
+    font-size: 10px;
+    font-weight: 600;
+    padding: 2px 7px;
+    border-radius: 99px;
+    margin-top: 4px;
+    display: inline-block;
+}
+
+.badge-green  { background: #dcfce7; color: #16a34a; }
+.badge-red    { background: #fee2e2; color: #dc2626; }
+.badge-blue   { background: #dbeafe; color: #2563eb; }
+.badge-orange { background: #ffedd5; color: #ea580c; }
+.badge-yellow { background: #fef9c3; color: #ca8a04; }
+
+.data-card-actions {
+    display: flex;
+    gap: 6px;
+    flex-shrink: 0;
+    align-items: center;
+}
+
+.btn-card-action {
+    width: 30px;
+    height: 30px;
+    border: none;
+    border-radius: 7px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    transition: all 0.15s;
+}
+
+.btn-card-edit {
+    background: #eff6ff;
+    color: #3b82f6;
+}
+
+.btn-card-edit:hover {
+    background: #3b82f6;
+    color: white;
+}
+
+.btn-card-delete {
+    background: #fef2f2;
+    color: #ef4444;
+}
+
+.btn-card-delete:hover {
+    background: #ef4444;
+    color: white;
+}
+
+/* Expandable card (miskin) */
+.data-card-expand {
+    overflow: hidden;
+    max-height: 0;
+    transition: max-height 0.3s ease, padding 0.2s;
+    border-top: 0px solid #f3f4f6;
+}
+
+.data-card.expanded .data-card-expand {
+    max-height: 400px;
+    border-top: 1px solid #f3f4f6;
+    margin-top: 10px;
+    padding-top: 10px;
+}
+
+.expand-row {
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    color: #6b7280;
+    padding: 3px 0;
+}
+
+.expand-row span:first-child {
+    font-weight: 500;
+    color: #374151;
+}
+
+.btn-log-bantuan {
+    margin-top: 10px;
+    width: 100%;
+    padding: 8px;
+    background: linear-gradient(135deg, #6366f1, #4f46e5);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    transition: all 0.2s;
+}
+
+.btn-log-bantuan:hover {
+    box-shadow: 0 4px 12px rgba(99,102,241,0.4);
+}
+
+/* Log Bantuan Item */
+.log-item {
+    background: #f8f9fb;
+    border-radius: 8px;
+    padding: 10px 12px;
+    display: flex;
+    gap: 10px;
+    align-items: flex-start;
+}
+
+.log-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #6366f1;
+    flex-shrink: 0;
+    margin-top: 5px;
+}
+
+.log-info {
+    flex: 1;
+}
+
+.log-type {
+    font-size: 12px;
+    font-weight: 600;
+    color: #1e1e2e;
+}
+
+.log-meta {
+    font-size: 11px;
+    color: #9ca3af;
+    margin-top: 2px;
+}
+
+.log-keterangan {
+    font-size: 11px;
+    color: #6b7280;
+    margin-top: 3px;
+    font-style: italic;
+}
+
+/* Popup Form */
+.popup-form {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 200px;
+}
+
+.popup-form label {
+    font-size: 12px;
+    font-weight: bold;
+    color: #555;
+}
+
+.popup-form input[type="text"],
+.popup-form input[type="number"] {
+    width: 100%;
+    padding: 6px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+.popup-form .radio-group {
+    display: flex;
+    gap: 10px;
+}
+
+.popup-form button {
+    padding: 8px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-weight: bold;
+}
+
+.popup-form button.btn-danger {
+    background-color: #dc3545;
+}
+
+.popup-form button:hover {
+    opacity: 0.9;
+}
+
+/* Unified Modal */
+.unified-modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.5);
+    z-index: 2000;
+    align-items: center;
+    justify-content: center;
+}
+
+.unified-modal.show {
+    display: flex;
+}
+
+.modal-content {
+    background-color: white;
+    border-radius: 12px;
+    width: 400px;
+    max-width: 90%;
+    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
+    display: flex;
+    flex-direction: column;
+}
+
+.modal-header {
+    padding: 15px;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.modal-header h3 {
+    font-size: 16px;
+    margin: 0;
+}
+
+.modal-close {
+    font-size: 20px;
+    font-weight: bold;
+    cursor: pointer;
+    color: #888;
+}
+
+.modal-close:hover {
+    color: #333;
+}
+
+.modal-body {
+    padding: 15px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.modal-body label {
+    font-size: 13px;
+    font-weight: 600;
+    color: #444;
+}
+
+.modal-body input[type="text"],
+.modal-body input[type="number"],
+.modal-body input[type="date"],
+.modal-body select,
+.modal-body textarea {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+    font-size: 14px;
+    font-family: inherit;
+}
+
+.modal-footer {
+    padding: 15px;
+    border-top: 1px solid #eee;
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+}
+
+.btn-save {
+    background: linear-gradient(135deg, #6366f1, #4f46e5);
+    color: white;
+    border: none;
+    padding: 8px 18px;
+    border-radius: 7px;
+    cursor: pointer;
+    font-weight: 600;
+    font-size: 13px;
+}
+
+.btn-cancel {
+    background-color: #f8f9fa;
+    border: 1px solid #ddd;
+    padding: 8px 18px;
+    border-radius: 7px;
+    cursor: pointer;
+    font-size: 13px;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+/* Custom Cursor Tooltip */
+.custom-cursor-tooltip {
+    position: absolute;
+    display: none;
+    background-color: rgba(0, 0, 0, 0.75);
+    color: white;
+    padding: 6px 12px;
+    border-radius: 4px;
+    font-size: 13px;
+    font-weight: 500;
+    pointer-events: none;
+    z-index: 9999;
+    white-space: nowrap;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
+}
+
+/* Sembunyikan default tooltip Leaflet Draw */
+.leaflet-draw-tooltip {
+    display: none !important;
+}
+
+/* Sub-layer collapsible */
+.layer-group-item {
+    margin-bottom: 6px;
+}
+
+.layer-group-item > .layer-group-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.layer-toggle-icon {
+    cursor: pointer;
+    padding: 2px 6px;
+    color: #666;
+    font-size: 11px;
+    border-radius: 4px;
+    transition: background 0.2s;
+    flex-shrink: 0;
+}
+
+.layer-toggle-icon:hover {
+    background: #f0f0f0;
+    color: #333;
+}
+
+.layer-toggle-icon i {
+    transition: transform 0.2s;
+}
+
+.layer-toggle-icon.collapsed i {
+    transform: rotate(-90deg);
+}
+
+.sub-layer-list {
+    padding-left: 18px;
+    margin-top: 4px;
+    border-left: 2px solid #eee;
+    overflow: hidden;
+    transition: max-height 0.2s ease;
+}
+
+.sub-option {
+    font-size: 12px !important;
+    color: #555;
+    margin-bottom: 3px !important;
+}
+
+/* ===== Emoji Marker (Pin Bubble) ===== */
+.emoji-marker {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    pointer-events: auto; /* changed from none to allow click/drag */
+}
+
+.emoji-marker .bubble {
+    width: 38px;
+    height: 38px;
+    border-radius: 50% 50% 50% 0;
+    transform: rotate(-45deg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
+    border: 2px solid rgba(255,255,255,0.8);
+    animation: markerPop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
+}
+
+.emoji-marker .bubble span {
+    transform: rotate(45deg);
+    font-size: 18px;
+    line-height: 1;
+}
+
+@keyframes markerPop {
+    0%   { transform: rotate(-45deg) scale(0); }
+    100% { transform: rotate(-45deg) scale(1); }
+}
+
+/* Warna bubble per tipe */
+.emoji-marker .bubble.spbu-24     { background: linear-gradient(135deg, #22c55e, #16a34a); }
+.emoji-marker .bubble.spbu-not24  { background: linear-gradient(135deg, #ef4444, #dc2626); }
+.emoji-marker .bubble.ibadah      { background: linear-gradient(135deg, #f97316, #ea580c); }
+.emoji-marker .bubble.miskin-in   { background: linear-gradient(135deg, #ef4444, #dc2626); }
+.emoji-marker .bubble.miskin-out  { background: linear-gradient(135deg, #22c55e, #16a34a); }
+
+/* ===== Toast Notification ===== */
+#toastContainer {
+    position: fixed;
+    bottom: 28px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    pointer-events: none;
+}
+
+.toast {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 20px;
+    border-radius: 12px;
+    font-size: 13px;
+    font-weight: 500;
+    color: white;
+    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
+    backdrop-filter: blur(6px);
+    pointer-events: auto;
+    animation: toastSlideIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
+    max-width: 340px;
+    text-align: center;
+}
+
+.toast.hiding {
+    animation: toastSlideOut 0.3s ease forwards;
+}
+
+.toast-success { background: linear-gradient(135deg, #22c55e, #16a34a); }
+.toast-error   { background: linear-gradient(135deg, #ef4444, #dc2626); }
+.toast-info    { background: linear-gradient(135deg, #6366f1, #4f46e5); }
+.toast-warning { background: linear-gradient(135deg, #f59e0b, #d97706); }
+
+.toast-icon { font-size: 16px; flex-shrink: 0; }
+
+@keyframes toastSlideIn {
+    0%   { opacity: 0; transform: translateY(20px) scale(0.9); }
+    100% { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+@keyframes toastSlideOut {
+    0%   { opacity: 1; transform: translateY(0) scale(1); }
+    100% { opacity: 0; transform: translateY(10px) scale(0.95); }
+}
+
+/* Auth Widget Styling */
+.auth-widget {
+    position: absolute;
+    top: 20px;
+    right: 80px;
+    z-index: 1000;
+    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+body.right-panel-open .auth-widget {
+    right: 400px;
+}
+
+.btn-login {
+    background: linear-gradient(135deg, #6366f1, #4f46e5);
+    color: white;
+    border: none;
+    border-radius: 24px;
+    height: 48px;
+    padding: 0 24px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    transition: all 0.2s ease;
+}
+
+.btn-login:hover {
+    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.45);
+    transform: translateY(-1px);
+}
+
+.user-profile-pill {
+    background-color: white;
+    border-radius: 24px;
+    height: 48px;
+    padding: 0 8px 0 16px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    border: 1px solid rgba(226, 232, 240, 0.8);
+    backdrop-filter: blur(10px);
+    background: rgba(255, 255, 255, 0.9);
+}
+
+.user-profile-info {
+    display: flex;
+    flex-direction: column;
+}
+
+.user-profile-name {
+    font-size: 12px;
+    font-weight: 700;
+    color: #1e1e2e;
+}
+
+.user-profile-role {
+    font-size: 9px;
+    font-weight: 600;
+    color: #6366f1;
+    text-transform: uppercase;
+}
+
+.btn-profile-logout {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    border: none;
+    background: #f1f5f9;
+    color: #64748b;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+}
+
+.btn-profile-logout:hover {
+    background: #fee2e2;
+    color: #ef4444;
+}
+
+/* User management table styling */
+#userManagementModal table th {
+    padding: 10px 12px;
+    font-weight: 600;
+    background-color: #f1f5f9;
+    border-bottom: 1px solid #cbd5e1;
+}
+
+#userManagementModal table td {
+    padding: 10px 12px;
+    border-bottom: 1px solid #e2e8f0;
+}
+
+
+
+/* =============================================================
+   PARSIL — Specific Styles
+   ============================================================= */
+
+.card-icon-parsil { background: #fefce8; }
+
+.legend-parsil-shm { display:inline-block; width:14px; height:14px; border-radius:3px; background:#28a745; opacity:0.8; }
+.legend-parsil-hgb { display:inline-block; width:14px; height:14px; border-radius:3px; background:#17a2b8; opacity:0.8; }
+.legend-parsil-hgu { display:inline-block; width:14px; height:14px; border-radius:3px; background:#ffc107; opacity:0.8; }
+.legend-parsil-hp  { display:inline-block; width:14px; height:14px; border-radius:3px; background:#fd7e14; opacity:0.8; }
+
+.badge-shm { background:#dcfce7; color:#16a34a; }
+.badge-hgb { background:#cffafe; color:#0e7490; }
+.badge-hgu { background:#fef9c3; color:#a16207; }
+.badge-hp  { background:#ffedd5; color:#c2410c; }
diff --git a/parsil/assets/js/features/auth.js b/parsil/assets/js/features/auth.js
new file mode 100644
index 0000000..f2dcb32
--- /dev/null
+++ b/parsil/assets/js/features/auth.js
@@ -0,0 +1,157 @@
+// --- Fitur Autentikasi dan Manajemen User (RBAC) ---
+
+(function() {
+    window.currentUser = null;
+
+    // Elements
+    const authWidget = document.getElementById('authWidget');
+    const loginModal = document.getElementById('loginModal');
+    const loginUsernameInput = document.getElementById('loginUsername');
+    const loginPasswordInput = document.getElementById('loginPassword');
+    const loginSubmitBtn = document.getElementById('loginSubmitBtn');
+    const loginErrorMsg = document.getElementById('loginErrorMsg');
+    const closeLoginModal = document.getElementById('closeLoginModal');
+
+    // Startup Session Check
+    function checkSession() {
+        fetch('../poverty/api/check_session.php')
+            .then(res => res.json())
+            .then(data => {
+                if (data.status === 'success' && data.isLoggedIn) {
+                    window.currentUser = data.data;
+                } else {
+                    window.currentUser = null;
+                }
+                updateAuthUI();
+                refreshAllLayers();
+            })
+            .catch(err => {
+                console.error("Session check failed:", err);
+                window.currentUser = null;
+                updateAuthUI();
+            });
+    }
+
+    // Update UI based on logged-in state
+    function updateAuthUI() {
+        if (!authWidget) return;
+
+        if (window.currentUser) {
+            // Logged In state
+            const roleLabel = window.currentUser.role === 'admin' ? 'Admin' : 'Pengelola';
+            
+            authWidget.innerHTML = `
+                <div class="user-profile-pill">
+                    <div class="user-profile-info">
+                        <div class="user-profile-name">๐Ÿ‘ค ${escHtml(window.currentUser.username)}</div>
+                        <div class="user-profile-role">${roleLabel}</div>
+                    </div>
+                    <button class="btn-profile-logout" id="authLogoutBtn" title="Logout">
+                        <i class="fas fa-sign-out-alt"></i>
+                    </button>
+                </div>
+            `;
+
+            document.getElementById('authLogoutBtn').addEventListener('click', logout);
+        } else {
+            // Logged Out state
+            authWidget.innerHTML = `
+                <button class="btn-login" id="authLoginBtn"><i class="fas fa-sign-in-alt"></i> Login</button>
+            `;
+            document.getElementById('authLoginBtn').addEventListener('click', showLoginModal);
+        }
+    }
+
+    function refreshAllLayers() {
+        if (typeof loadSpbu === 'function') loadSpbu();
+        if (typeof loadJalan === 'function') loadJalan();
+        if (typeof loadParsil === 'function') loadParsil();
+        if (window.refreshActivePanel) window.refreshActivePanel();
+    }
+
+    // Login Modals logic
+    function showLoginModal() {
+        loginUsernameInput.value = '';
+        loginPasswordInput.value = '';
+        loginErrorMsg.style.display = 'none';
+        loginModal.classList.add('show');
+    }
+
+    function hideLoginModal() {
+        loginModal.classList.remove('show');
+    }
+
+    if (closeLoginModal) {
+        closeLoginModal.addEventListener('click', hideLoginModal);
+    }
+
+    if (loginSubmitBtn) {
+        loginSubmitBtn.addEventListener('click', function() {
+            const username = loginUsernameInput.value.trim();
+            const password = loginPasswordInput.value;
+
+            if (!username || !password) {
+                loginErrorMsg.textContent = 'Username dan password wajib diisi';
+                loginErrorMsg.style.display = 'block';
+                return;
+            }
+
+            fetch('../poverty/api/login.php', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ username, password })
+            })
+            .then(res => res.json())
+            .then(data => {
+                if (data.status === 'success') {
+                    window.currentUser = data.data;
+                    hideLoginModal();
+                    updateAuthUI();
+                    refreshAllLayers();
+                    showToast('Login berhasil', 'success');
+                } else {
+                    loginErrorMsg.textContent = data.message || 'Login gagal';
+                    loginErrorMsg.style.display = 'block';
+                }
+            })
+            .catch(err => {
+                console.error(err);
+                loginErrorMsg.textContent = 'Koneksi ke server terputus';
+                loginErrorMsg.style.display = 'block';
+            });
+        });
+    }
+
+    function logout() {
+        fetch('../poverty/api/logout.php')
+            .then(res => res.json())
+            .then(data => {
+                window.currentUser = null;
+                updateAuthUI();
+                refreshAllLayers();
+                showToast('Logout berhasil', 'success');
+            })
+            .catch(err => {
+                console.error(err);
+                showToast('Gagal logout', 'error');
+            });
+    }
+
+    // Helper functions
+    function escHtml(str) {
+        if (!str) return '';
+        return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+    }
+
+    // Toast Notification helper
+    function showToast(message, type = 'success') {
+        if (typeof window.showToast === 'function') {
+            window.showToast(message, type);
+            return;
+        }
+        alert(message);
+    }
+
+    // Run session check on initialization
+    checkSession();
+})();
diff --git a/parsil/assets/js/features/draw_control.js b/parsil/assets/js/features/draw_control.js
new file mode 100644
index 0000000..a1e7026
--- /dev/null
+++ b/parsil/assets/js/features/draw_control.js
@@ -0,0 +1,142 @@
+// --- Setup Leaflet Draw ---
+
+// Layer terpisah untuk hasil gambar sementara sebelum disimpan
+const drawnItems = new L.FeatureGroup();
+map.addLayer(drawnItems);
+
+const drawControl = new L.Control.Draw({
+    draw: {
+        polygon: {
+            allowIntersection: false,
+            showArea: true
+        },
+        polyline: {
+            metric: true
+        },
+        circle: false,
+        circlemarker: false,
+        marker: false, // Marker default dimatikan, kita pakai klik peta untuk SPBU
+        rectangle: false
+    },
+    edit: {
+        featureGroup: drawnItems, // Kita tidak mengedit di drawnItems, karena data aslinya di jalanLayer/parsilLayer
+        edit: false,
+        remove: false
+    }
+});
+// Hapus map.addControl(drawControl); agar tidak tampil UI bawaan LeafletJS
+
+
+// Flag untuk menghindari munculnya form SPBU saat sedang menggambar
+map.on(L.Draw.Event.DRAWSTART, function (e) {
+    isDrawingMode = true;
+});
+
+map.on(L.Draw.Event.DRAWSTOP, function (e) {
+    setTimeout(() => { 
+        isDrawingMode = false; 
+        window.currentDrawMode = null;
+        window.activeDrawHandler = null;
+        window.deactivateAddMode(); 
+    }, 200);
+});
+
+window.activateDraw = function(type) {
+    const isAdmin = !!(window.currentUser && window.currentUser.role === 'admin');
+    if (!isAdmin) return;
+
+    console.log("-> activateDraw dipanggil untuk tipe:", type);
+
+    // Toggle: jika mode yang sama ditekan lagi, batalkan
+    if (window.currentDrawMode === type) {
+        console.log("Mode", type, "sudah aktif, membatalkan...");
+        window.deactivateAddMode();
+        return;
+    }
+    
+    window.deactivateAddMode();
+    window.currentDrawMode = type;
+    console.log("Mengaktifkan mode menggambar:", type);
+    
+    if (type === 'polyline') {
+        const handler = new L.Draw.Polyline(map, drawControl.options.draw.polyline);
+        handler.enable();
+        window.activeDrawHandler = handler;
+        if (window.cursorTooltip) window.cursorTooltip.textContent = 'Klik untuk menggambar Jalan';
+    } else if (type === 'polygon') {
+        const handler = new L.Draw.Polygon(map, drawControl.options.draw.polygon);
+        handler.enable();
+        window.activeDrawHandler = handler;
+        if (window.cursorTooltip) window.cursorTooltip.textContent = 'Klik untuk menggambar Parsil';
+    }
+};
+
+map.on(L.Draw.Event.CREATED, function (e) {
+    const type = e.layerType;
+    const layer = e.layer;
+
+    // Convert layer to GeoJSON geometry
+    const geoJson = layer.toGeoJSON().geometry;
+    const geoJsonStr = JSON.stringify(geoJson);
+
+    if (type === 'polyline') {
+        let length = 0;
+        const latlngs = layer.getLatLngs();
+        for (let i = 0; i < latlngs.length - 1; i++) {
+            length += latlngs[i].distanceTo(latlngs[i + 1]);
+        }
+        
+        // Gunakan Modal alih-alih prompt
+        const bodyHTML = `
+            <div class="form-group">
+                <label>Nama Jalan</label>
+                <input type="text" id="modalJalanNama" placeholder="Nama Jalan">
+            </div>
+            <div class="form-group">
+                <label>Status</label>
+                <select id="modalJalanStatus">
+                    <option value="Nasional">Nasional</option>
+                    <option value="Provinsi">Provinsi</option>
+                    <option value="Kabupaten" selected>Kabupaten</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label>Panjang: ${length.toFixed(2)} m</label>
+            </div>
+        `;
+        openModal("Tambah Jalan Baru", bodyHTML, function() {
+            window.saveNewJalan(geoJsonStr, length, 'modalJalanNama', 'modalJalanStatus');
+        });
+        
+    } 
+    else if (type === 'polygon') {
+        const latlngs = layer.getLatLngs()[0];
+        let area = 0;
+        if (L.GeometryUtil && L.GeometryUtil.geodesicArea) {
+            area = L.GeometryUtil.geodesicArea(latlngs);
+        }
+
+        const bodyHTML = `
+            <div class="form-group">
+                <label>Nama Pemilik/Area</label>
+                <input type="text" id="modalParsilNama" placeholder="Contoh: Budi atau Sawah A">
+            </div>
+            <div class="form-group">
+                <label>Status Tanah</label>
+                <select id="modalParsilStatus">
+                    <option value="SHM" selected>SHM</option>
+                    <option value="HGB">HGB</option>
+                    <option value="HGU">HGU</option>
+                    <option value="HP">HP</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label>Luas: ${area.toFixed(2)} mยฒ</label>
+            </div>
+        `;
+        openModal("Tambah Parsil Tanah", bodyHTML, function() {
+            window.saveNewParsil(geoJsonStr, area, 'modalParsilNama', 'modalParsilStatus');
+        });
+    }
+});
+
diff --git a/parsil/assets/js/features/geojson.js b/parsil/assets/js/features/geojson.js
new file mode 100644
index 0000000..62fc314
--- /dev/null
+++ b/parsil/assets/js/features/geojson.js
@@ -0,0 +1,182 @@
+// --- Fitur Import GeoJSON ---
+
+const fileGeoJson = document.getElementById('fileGeoJson');
+let geoJsonLayers = {};
+let geoJsonCounter = 0;
+
+window.toggleGeoJsonMenu = function() {
+    const list = document.getElementById('geoJsonFileList');
+    const icon = document.getElementById('geoJsonToggleIcon');
+    if (list.style.display === 'none') {
+        list.style.display = 'block';
+        icon.className = 'fas fa-minus';
+    } else {
+        list.style.display = 'none';
+        icon.className = 'fas fa-plus';
+    }
+};
+
+// Cek apakah fitur GeoJSON ini terlihat seperti data penduduk miskin
+function isMiskinFeature(feature) {
+    if (!feature || !feature.geometry || feature.geometry.type !== 'Point') return false;
+    const props = feature.properties || {};
+    const keys = Object.keys(props).map(k => k.toLowerCase());
+    // Dianggap data miskin jika punya properti nama (dan bukan ibadah atau spbu)
+    const hasNama = keys.some(k => ['nama', 'name', 'penduduk'].includes(k));
+    const isIbadah = keys.some(k => ['jenis', 'radius', 'alamat'].includes(k));
+    const isSpbu = keys.some(k => ['alamat_spbu', 'is_24_jam'].includes(k));
+    return hasNama && !isIbadah && !isSpbu;
+}
+
+fileGeoJson.addEventListener('change', function(e) {
+    const file = e.target.files[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = function(event) {
+        try {
+            const geoJsonData = JSON.parse(event.target.result);
+            const fileName = file.name;
+
+            // Pisahkan fitur menjadi dua kelompok: miskin dan non-miskin
+            const features = geoJsonData.type === 'FeatureCollection'
+                ? geoJsonData.features
+                : [geoJsonData];
+
+            const miskinFeatures = features.filter(f => isMiskinFeature(f));
+            const otherFeatures = features.filter(f => !isMiskinFeature(f));
+
+            // ---- Proses fitur miskin: Simpan ke DB, lalu tampilkan seperti penduduk miskin ----
+            if (miskinFeatures.length > 0) {
+                const bulkData = miskinFeatures.map(f => {
+                    const props = f.properties || {};
+                    const coords = f.geometry.coordinates;
+                    return {
+                        nama:              props.nama || props.name || props.penduduk || 'Data Impor',
+                        kategori_bantuan:  props.kategori_bantuan || props.kategori || props.bantuan || 'Makan',
+                        jumlah_jiwa:       parseInt(props.jumlah_jiwa || props.jumlah || props.jiwa || 1, 10) || 1,
+                        lat:               parseFloat(coords[1]),
+                        lng:               parseFloat(coords[0])
+                    };
+                });
+
+                fetch('../poverty/api/penduduk_miskin/bulk_create.php', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(bulkData)
+                })
+                .then(res => res.json())
+                .then(data => {
+                    if (data.status === 'success') {
+                        // Reload layer penduduk miskin agar marker tampil dengan edit/hapus/log bantuan
+                        if (typeof loadPendudukMiskin === 'function') {
+                            loadPendudukMiskin();
+                        }
+                        if (typeof window.refreshActivePanel === 'function') {
+                            window.refreshActivePanel();
+                        }
+                        showToast(data.message || 'Data berhasil diimpor ke layer Penduduk Miskin.', 'success');
+                    } else {
+                        showToast(data.message || 'Gagal menyimpan data miskin.', 'error');
+                    }
+                })
+                .catch(err => {
+                    console.error(err);
+                    showToast('Gagal terhubung ke server saat menyimpan data miskin.', 'error');
+                });
+            }
+
+            // ---- Proses fitur non-miskin: Render sebagai layer GeoJSON biasa ----
+            if (otherFeatures.length > 0) {
+                const layerId = 'gj_' + (++geoJsonCounter);
+                const individualLayer = L.featureGroup();
+
+                const otherGeoJson = {
+                    type: 'FeatureCollection',
+                    features: otherFeatures
+                };
+
+                L.geoJSON(otherGeoJson, {
+                    pointToLayer: function(feature, latlng) {
+                        const props = feature.properties || {};
+                        let emoji = props.emoji;
+
+                        if (!emoji) {
+                            const text = JSON.stringify(props).toLowerCase();
+                            if (text.includes('spbu'))      emoji = 'โ›ฝ';
+                            else if (text.includes('masjid'))    emoji = '๐Ÿ•Œ';
+                            else if (text.includes('gereja'))    emoji = 'โ›ช';
+                            else if (text.includes('vihara'))    emoji = '๐Ÿชท';
+                            else if (text.includes('pura'))      emoji = '๐Ÿ›•';
+                            else if (text.includes('kelenteng')) emoji = '๐Ÿฎ';
+                            else emoji = '๐Ÿ“';
+                        }
+
+                        let cls = 'miskin-out';
+                        if (emoji === 'โ›ฝ') cls = 'spbu-24';
+                        else if (['๐Ÿ•Œ','โ›ช','๐Ÿ›•','๐Ÿชท','๐Ÿฎ'].includes(emoji)) cls = 'ibadah';
+
+                        const icon = L.divIcon({
+                            className: '',
+                            html: `<div class="emoji-marker"><div class="bubble ${cls}"><span>${emoji}</span></div></div>`,
+                            iconSize: [38, 38],
+                            iconAnchor: [19, 38],
+                            popupAnchor: [0, -40]
+                        });
+
+                        return L.marker(latlng, { icon: icon });
+                    },
+                    onEachFeature: function(feature, layer) {
+                        if (feature.properties) {
+                            let popupContent = '<h4>Informasi Feature</h4><ul style="list-style:none; padding:0; font-size:12px; margin: 0;">';
+                            for (let key in feature.properties) {
+                                popupContent += `<li><strong>${key}:</strong> ${feature.properties[key]}</li>`;
+                            }
+                            popupContent += '</ul>';
+                            layer.bindPopup(popupContent);
+                        }
+                    },
+                    style: function(feature) {
+                        return {
+                            color: (feature.properties && feature.properties.color) || '#3388ff',
+                            weight: 2,
+                            fillOpacity: 0.4
+                        };
+                    }
+                }).addTo(individualLayer);
+
+                individualLayer.addTo(map);
+                geoJsonLayers[layerId] = individualLayer;
+
+                // Tambahkan checkbox ke UI
+                const container = document.getElementById('geoJsonLayersContainer');
+                const label = document.createElement('label');
+                label.className = 'layer-option';
+                label.innerHTML = `<input type="checkbox" id="chk_${layerId}" checked> ${fileName}`;
+
+                label.querySelector('input').addEventListener('change', function(e) {
+                    if (e.target.checked) {
+                        map.addLayer(geoJsonLayers[layerId]);
+                    } else {
+                        map.removeLayer(geoJsonLayers[layerId]);
+                    }
+                });
+
+                container.appendChild(label);
+
+                if (miskinFeatures.length === 0) {
+                    showToast('File GeoJSON berhasil dimuat!', 'success');
+                }
+            }
+
+            // Reset input file agar bisa import file yang sama
+            fileGeoJson.value = '';
+
+        } catch (error) {
+            showToast('Gagal memproses file GeoJSON. Pastikan format valid.', 'error');
+            console.error(error);
+        }
+    };
+    reader.readAsText(file);
+});
+
diff --git a/parsil/assets/js/features/geolocation.js b/parsil/assets/js/features/geolocation.js
new file mode 100644
index 0000000..4d95a20
--- /dev/null
+++ b/parsil/assets/js/features/geolocation.js
@@ -0,0 +1,31 @@
+// --- Fitur Geolocation ---
+
+// Tambahkan tombol di dalam wadah zoom control
+const geoBtn = document.createElement('button');
+geoBtn.className = 'custom-layer-btn';
+geoBtn.style.position = 'relative';
+geoBtn.style.top = '0';
+geoBtn.style.left = '0';
+geoBtn.style.right = 'auto';
+geoBtn.innerHTML = '<i class="fas fa-crosshairs fa-lg"></i>';
+geoBtn.title = 'Lokasi Saya';
+document.querySelector('.custom-zoom-control').appendChild(geoBtn);
+
+let userMarker = null;
+
+geoBtn.addEventListener('click', function() {
+    map.locate({setView: true, maxZoom: 16});
+});
+
+map.on('locationfound', function(e) {
+    if (userMarker) {
+        map.removeLayer(userMarker);
+    }
+    userMarker = L.marker(e.latlng).addTo(map)
+        .bindPopup("Anda berada di sini!").openPopup();
+});
+
+map.on('locationerror', function(e) {
+    alert("Gagal mendapatkan lokasi Anda.");
+});
+
diff --git a/parsil/assets/js/features/jalan.js b/parsil/assets/js/features/jalan.js
new file mode 100644
index 0000000..24a93ac
--- /dev/null
+++ b/parsil/assets/js/features/jalan.js
@@ -0,0 +1,173 @@
+// --- Fitur Jalan ---
+
+const jalanColors = {
+    'Nasional': '#ff0000',  // Merah
+    'Provinsi': '#0000ff',  // Biru
+    'Kabupaten': '#00ff00'  // Hijau
+};
+
+function loadJalan() {
+    jalanLayer.clearLayers();
+    fetch('../jalan/read.php')
+        .then(res => res.json())
+        .then(data => {
+            if (data.status === 'success' && data.data) {
+                data.data.forEach(item => {
+                    addJalanToMap(item);
+                });
+            }
+            if (window.refreshActivePanel) window.refreshActivePanel();
+        });
+}
+
+function addJalanToMap(item) {
+    // geom adalah GeoJSON {type: "LineString", coordinates: [[lng, lat], ...]}
+    const latlngs = item.geom.coordinates.map(coord => [coord[1], coord[0]]);
+    
+    const polyline = L.polyline(latlngs, {
+        color: jalanColors[item.status] || '#3388ff',
+        weight: 5
+    });
+
+    polyline.jalanData = item;
+
+    // Tampilkan label nama jalan sejajar dengan garis (diagonal)
+    polyline.setText(item.nama, {
+        center: true,
+        offset: 0,
+        attributes: {
+            fill: '#000000',
+            'font-weight': 'bold',
+            'font-size': '14px',
+            'dy': '7'
+        }
+    });
+
+    // Hitung popupContent sekali saat jalan dibuat
+    const d = item;
+    const isAdmin = !!(window.currentUser && window.currentUser.role === 'admin');
+    let actionButtons = '';
+    if (isAdmin) {
+        actionButtons = `
+            <div style="display:flex; gap:5px;">
+                <button style="padding:4px 8px; background:#007bff; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="openEditJalanModal(${d.id})">Edit</button>
+                <button style="padding:4px 8px; background:#dc3545; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="deleteJalan(${d.id})">Hapus</button>
+            </div>
+        `;
+    }
+    
+    const popupContent = `
+        <div style="font-family: Arial, sans-serif; min-width: 150px;">
+            <h4 style="margin:0 0 5px 0;">Jalan ${d.nama}</h4>
+            <p style="margin: 0 0 5px 0;"><b>Status:</b> ${d.status}</p>
+            <p style="margin: 0 0 10px 0;"><b>Panjang:</b> ${d.panjang.toFixed(2)} m</p>
+            ${actionButtons}
+        </div>
+    `;
+    
+    polyline.bindPopup(popupContent);
+
+    jalanLayer.addLayer(polyline);
+}
+
+window.openEditJalanModal = function(id) {
+    let d = null;
+    jalanLayer.eachLayer(function(layer) {
+        if (layer.jalanData && layer.jalanData.id == id) d = layer.jalanData;
+    });
+    if (!d) return;
+
+    const bodyHTML = `
+        <div class="form-group">
+            <label>Nama Jalan</label>
+            <input type="text" id="editJalanNama" value="${d.nama}">
+        </div>
+        <div class="form-group">
+            <label>Status</label>
+            <select id="editJalanStatus">
+                <option value="Nasional" ${d.status === 'Nasional' ? 'selected' : ''}>Nasional</option>
+                <option value="Provinsi" ${d.status === 'Provinsi' ? 'selected' : ''}>Provinsi</option>
+                <option value="Kabupaten" ${d.status === 'Kabupaten' ? 'selected' : ''}>Kabupaten</option>
+            </select>
+        </div>
+        <div class="form-group">
+            <label>Panjang: ${d.panjang.toFixed(2)} m</label>
+        </div>
+    `;
+    map.closePopup();
+    openModal("Edit Jalan", bodyHTML, function() {
+        window.saveEditJalan(d.id, 'editJalanNama', 'editJalanStatus');
+    });
+};
+
+window.saveEditJalan = function(id, namaId, statusId) {
+    const nama = document.getElementById(namaId).value;
+    const status = document.getElementById(statusId).value;
+
+    fetch('../jalan/update.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id, nama, status })
+    })
+    .then(res => res.json())
+    .then(data => {
+        if(data.status === 'success') {
+            map.closePopup();
+            closeModal();
+            loadJalan();
+        } else {
+            alert(data.message);
+        }
+    });
+};
+
+window.deleteJalan = function(id) {
+    openConfirmModal("Yakin hapus jalan ini?", function() {
+        fetch('../jalan/delete.php', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ id })
+        })
+        .then(res => res.json())
+        .then(data => {
+            if(data.status === 'success') {
+                map.closePopup();
+                loadJalan();
+            } else {
+                alert(data.message);
+            }
+        });
+    });
+};
+
+window.saveNewJalan = function(geoJsonStr, panjang, namaId, statusId) {
+    const nama = document.getElementById(namaId).value;
+    if (!nama) {
+        alert("Nama jalan harus diisi!");
+        return false;
+    }
+    
+    const status = document.getElementById(statusId).value;
+
+    const geom = JSON.parse(geoJsonStr);
+
+    fetch('../jalan/create.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ nama, status, panjang, geom })
+    })
+    .then(res => res.json())
+    .then(data => {
+        if(data.status === 'success') {
+            closeModal();
+            loadJalan();
+        } else {
+            alert(data.message);
+        }
+    });
+    return true;
+};
+
+// Initial Load
+loadJalan();
+
diff --git a/parsil/assets/js/features/parsil.js b/parsil/assets/js/features/parsil.js
new file mode 100644
index 0000000..d8509da
--- /dev/null
+++ b/parsil/assets/js/features/parsil.js
@@ -0,0 +1,159 @@
+// --- Fitur Parsil ---
+
+const parsilColors = {
+    'SHM': '#28a745', // Hijau
+    'HGB': '#17a2b8', // Biru Muda
+    'HGU': '#ffc107', // Kuning
+    'HP':  '#fd7e14'  // Oranye
+};
+
+function loadParsil() {
+    parsilLayer.clearLayers();
+    fetch('../parsil/read.php')
+        .then(res => res.json())
+        .then(data => {
+            if (data.status === 'success' && data.data) {
+                data.data.forEach(item => {
+                    addParsilToMap(item);
+                });
+            }
+            if (window.refreshActivePanel) window.refreshActivePanel();
+        });
+}
+
+function addParsilToMap(item) {
+    // geom adalah GeoJSON Polygon
+    // coordinates pada Polygon formatnya: [[[lng, lat], [lng, lat], ...]]
+    // Leaflet Polygon butuh array of [lat, lng]
+    const latlngs = item.geom.coordinates[0].map(coord => [coord[1], coord[0]]);
+    
+    const polygon = L.polygon(latlngs, {
+        color: parsilColors[item.status] || '#3388ff',
+        fillColor: parsilColors[item.status] || '#3388ff',
+        fillOpacity: 0.5,
+        weight: 2
+    });
+
+    polygon.parsilData = item;
+
+    const d = item;
+    const isAdmin = !!(window.currentUser && window.currentUser.role === 'admin');
+    let actionButtons = '';
+    if (isAdmin) {
+        actionButtons = `
+            <div style="display:flex; gap:5px;">
+                <button style="padding:4px 8px; background:#007bff; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="openEditParsilModal(${d.id})">Edit</button>
+                <button style="padding:4px 8px; background:#dc3545; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="deleteParsil(${d.id})">Hapus</button>
+            </div>
+        `;
+    }
+    const popupContent = `
+        <div style="font-family: Arial, sans-serif; min-width: 150px;">
+            <h4 style="margin:0 0 5px 0;">Parsil ${d.nama || ''}</h4>
+            <p style="margin: 0 0 5px 0;"><b>Status:</b> ${d.status}</p>
+            <p style="margin: 0 0 10px 0;"><b>Luas:</b> ${d.luas.toFixed(2)} mยฒ</p>
+            ${actionButtons}
+        </div>
+    `;
+    polygon.bindPopup(popupContent);
+
+    parsilLayer.addLayer(polygon);
+}
+
+window.openEditParsilModal = function(id) {
+    let d = null;
+    parsilLayer.eachLayer(function(layer) {
+        if (layer.parsilData && layer.parsilData.id == id) d = layer.parsilData;
+    });
+    if (!d) return;
+
+    const bodyHTML = `
+        <div class="form-group">
+            <label>Nama Pemilik/Area</label>
+            <input type="text" id="editParsilNama" value="${d.nama || ''}">
+        </div>
+        <div class="form-group">
+            <label>Status</label>
+            <select id="editParsilStatus">
+                <option value="SHM" ${d.status === 'SHM' ? 'selected' : ''}>SHM</option>
+                <option value="HGB" ${d.status === 'HGB' ? 'selected' : ''}>HGB</option>
+                <option value="HGU" ${d.status === 'HGU' ? 'selected' : ''}>HGU</option>
+                <option value="HP" ${d.status === 'HP' ? 'selected' : ''}>HP</option>
+            </select>
+        </div>
+        <div class="form-group">
+            <label>Luas: ${d.luas.toFixed(2)} mยฒ</label>
+        </div>
+    `;
+    map.closePopup();
+    openModal("Edit Parsil Tanah", bodyHTML, function() {
+        window.saveEditParsil(d.id, 'editParsilNama', 'editParsilStatus');
+    });
+};
+
+window.saveEditParsil = function(id, namaId, statusId) {
+    const nama = document.getElementById(namaId).value;
+    const status = document.getElementById(statusId).value;
+
+    fetch('../parsil/update.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id, nama, status })
+    })
+    .then(res => res.json())
+    .then(data => {
+        if(data.status === 'success') {
+            map.closePopup();
+            closeModal();
+            loadParsil();
+        } else {
+            alert(data.message);
+        }
+    });
+};
+
+window.deleteParsil = function(id) {
+    openConfirmModal("Yakin hapus parsil ini?", function() {
+        fetch('../parsil/delete.php', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ id })
+        })
+        .then(res => res.json())
+        .then(data => {
+            if(data.status === 'success') {
+                map.closePopup();
+                loadParsil();
+            } else {
+                alert(data.message);
+            }
+        });
+    });
+};
+
+window.saveNewParsil = function(geoJsonStr, luas, namaId, statusId) {
+    const nama = document.getElementById(namaId).value;
+    const status = document.getElementById(statusId).value;
+
+    const geom = JSON.parse(geoJsonStr);
+
+    fetch('../parsil/create.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ nama, status, luas, geom })
+    })
+    .then(res => res.json())
+    .then(data => {
+        if(data.status === 'success') {
+            closeModal();
+            loadParsil();
+        } else {
+            alert(data.message);
+        }
+    });
+    return true;
+};
+
+// Initial Load
+loadParsil();
+
diff --git a/parsil/assets/js/features/spbu.js b/parsil/assets/js/features/spbu.js
new file mode 100644
index 0000000..07d168f
--- /dev/null
+++ b/parsil/assets/js/features/spbu.js
@@ -0,0 +1,214 @@
+// --- Fitur SPBU ---
+
+// Emoji Bubble Icon builder
+function makeSpbuIcon(is24) {
+    const cls = is24 ? 'spbu-24' : 'spbu-not24';
+    return L.divIcon({
+        className: '',
+        html: `<div class="emoji-marker"><div class="bubble ${cls}"><span>โ›ฝ</span></div></div>`,
+        iconSize: [38, 38],
+        iconAnchor: [19, 38],
+        popupAnchor: [0, -40]
+    });
+}
+
+const spbuGreenIcon = makeSpbuIcon(true);
+const spbuRedIcon   = makeSpbuIcon(false);
+
+let isDrawingMode = false; // Akan diset true saat draw mode aktif (jalan/parsil)
+
+
+// Fetch SPBU
+function loadSpbu() {
+    spbuLayer.clearLayers();
+    fetch('../spbu/read.php')
+        .then(res => res.json())
+        .then(data => {
+            if (data.status === 'success' && data.data) {
+                data.data.forEach(item => {
+                    addSpbuMarker(item);
+                });
+            }
+            if (window.refreshActivePanel) window.refreshActivePanel();
+        });
+}
+
+function addSpbuMarker(item) {
+    const isAdmin = !!(window.currentUser && window.currentUser.role === 'admin');
+    const icon = makeSpbuIcon(item.is_24_jam);
+    const marker = L.marker([item.lat, item.lng], {
+        icon: icon,
+        draggable: isAdmin
+    });
+
+    marker.spbuData = item; // Simpan data di objek marker
+
+    // Hitung popupContent sekali saat marker dibuat
+    const d = item;
+    let actionButtons = '';
+    if (isAdmin) {
+        actionButtons = `
+            <div style="display:flex; gap:5px;">
+                <button style="padding:4px 8px; background:#007bff; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="openEditSpbuModal(${d.id})">Edit</button>
+                <button style="padding:4px 8px; background:#dc3545; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="deleteSpbu(${d.id})">Hapus</button>
+            </div>
+        `;
+    }
+    const popupContent = `
+        <div style="font-family: Arial, sans-serif; min-width: 150px;">
+            <h4 style="margin:0 0 5px 0;">SPBU ${d.nama}</h4>
+            <p style="margin: 0 0 5px 0;"><b>No. WA:</b> ${d.no_wa}</p>
+            <p style="margin: 0 0 10px 0;"><b>Buka 24 Jam:</b> ${d.is_24_jam ? 'Ya' : 'Tidak'}</p>
+            ${actionButtons}
+        </div>
+    `;
+    marker.bindPopup(popupContent);
+
+    // Event drag untuk update koordinat
+    marker.on('dragend', function(e) {
+        const newPos = marker.getLatLng();
+        updateSpbu(item.id, item.nama, item.no_wa, item.is_24_jam, newPos.lat, newPos.lng);
+    });
+
+    spbuLayer.addLayer(marker);
+}
+
+// Map Click -> Form Add
+map.on('click', function(e) {
+    if (isDrawingMode) return; // Jangan muncul form jika sedang gambar garis/polygon
+    
+    // Hanya proses jika mode tambah SPBU aktif
+    if (window.currentAddMode === 'spbu') {
+        const bodyHTML = `
+            <div class="form-group">
+                <label>Lat: ${e.latlng.lat.toFixed(6)}, Lng: ${e.latlng.lng.toFixed(6)}</label>
+            </div>
+            <div class="form-group">
+                <label>Nama SPBU</label>
+                <input type="text" id="modalSpbuNama" placeholder="Nama SPBU">
+            </div>
+            <div class="form-group">
+                <label>No. WA</label>
+                <input type="text" id="modalSpbuWa" placeholder="No. WA">
+            </div>
+            <div class="form-group">
+                <label>Buka 24 Jam?</label>
+                <div class="radio-group" style="margin-top:5px;">
+                    <label><input type="radio" name="modalSpbu24" value="1"> Ya</label>
+                    <label><input type="radio" name="modalSpbu24" value="0" checked> Tidak</label>
+                </div>
+            </div>
+        `;
+
+        openModal("Tambah SPBU Baru", bodyHTML, function() {
+            window.saveNewSpbu(e.latlng.lat, e.latlng.lng, 'modalSpbuNama', 'modalSpbuWa', 'modalSpbu24');
+        });
+
+        // Nonaktifkan mode tambah setelah modal muncul
+        window.deactivateAddMode();
+    }
+});
+
+window.saveNewSpbu = function(lat, lng, namaId, waId, radioName) {
+    const nama = document.getElementById(namaId).value;
+    if (!nama) {
+        alert("Nama SPBU harus diisi!");
+        return;
+    }
+    const no_wa = document.getElementById(waId).value;
+    const is_24_jam = document.querySelector(`input[name="${radioName}"]:checked`).value;
+
+    fetch('../spbu/create.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ nama, no_wa, is_24_jam, lat, lng })
+    })
+    .then(res => res.json())
+    .then(data => {
+        if(data.status === 'success') {
+            closeModal();
+            loadSpbu();
+        } else {
+            alert(data.message);
+        }
+    });
+};
+
+window.openEditSpbuModal = function(id) {
+    let d = null;
+    spbuLayer.eachLayer(function(layer) {
+        if (layer.spbuData && layer.spbuData.id == id) d = layer.spbuData;
+    });
+    if (!d) return;
+
+    const bodyHTML = `
+        <div class="form-group">
+            <label>Nama SPBU</label>
+            <input type="text" id="editSpbuNama" value="${d.nama}">
+        </div>
+        <div class="form-group">
+            <label>No. WA</label>
+            <input type="text" id="editSpbuWa" value="${d.no_wa}">
+        </div>
+        <div class="form-group">
+            <label>Buka 24 Jam?</label>
+            <div class="radio-group" style="margin-top:5px;">
+                <label><input type="radio" name="editSpbu24" value="1" ${d.is_24_jam ? 'checked' : ''}> Ya</label>
+                <label><input type="radio" name="editSpbu24" value="0" ${!d.is_24_jam ? 'checked' : ''}> Tidak</label>
+            </div>
+        </div>
+    `;
+    map.closePopup();
+    openModal("Edit SPBU", bodyHTML, function() {
+        window.saveEditSpbu(d.id, d.lat, d.lng, 'editSpbuNama', 'editSpbuWa', 'editSpbu24');
+    });
+};
+
+window.saveEditSpbu = function(id, lat, lng, namaId, waId, radioName) {
+    const nama = document.getElementById(namaId).value;
+    const no_wa = document.getElementById(waId).value;
+    const is_24_jam = document.querySelector(`input[name="${radioName}"]:checked`).value;
+
+    updateSpbu(id, nama, no_wa, is_24_jam, lat, lng);
+};
+
+function updateSpbu(id, nama, no_wa, is_24_jam, lat, lng) {
+    fetch('../spbu/update.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id, nama, no_wa, is_24_jam, lat, lng })
+    })
+    .then(res => res.json())
+    .then(data => {
+        if(data.status === 'success') {
+            map.closePopup();
+            closeModal();
+            loadSpbu();
+        } else {
+            alert(data.message);
+        }
+    });
+}
+
+window.deleteSpbu = function(id) {
+    openConfirmModal("Yakin hapus SPBU ini?", function() {
+        fetch('../spbu/delete.php', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ id })
+        })
+        .then(res => res.json())
+        .then(data => {
+            if(data.status === 'success') {
+                map.closePopup();
+                loadSpbu();
+            } else {
+                alert(data.message);
+            }
+        });
+    });
+};
+
+// Initial Load
+loadSpbu();
+
diff --git a/parsil/assets/js/map.js b/parsil/assets/js/map.js
new file mode 100644
index 0000000..db153cc
--- /dev/null
+++ b/parsil/assets/js/map.js
@@ -0,0 +1,259 @@
+// Inisialisasi Peta
+const map = L.map('map', { zoomControl: false }).setView([-0.0263, 109.3425], 13);
+
+// ===== Toast Notification =====
+window.showToast = function(message, type = 'success', duration = 3500) {
+    const icons = { success: 'โœ…', error: 'โŒ', info: 'โ„น๏ธ', warning: 'โš ๏ธ' };
+    const container = document.getElementById('toastContainer');
+    if (!container) return;
+
+    const toast = document.createElement('div');
+    toast.className = `toast toast-${type}`;
+    toast.innerHTML = `<span class="toast-icon">${icons[type] || 'โ„น๏ธ'}</span><span>${message}</span>`;
+    container.appendChild(toast);
+
+    setTimeout(() => {
+        toast.classList.add('hiding');
+        toast.addEventListener('animationend', () => toast.remove());
+    }, duration);
+};
+
+// Custom Zoom Control Logic
+document.getElementById('zoomInBtn').addEventListener('click', function() { map.zoomIn(); });
+document.getElementById('zoomOutBtn').addEventListener('click', function() { map.zoomOut(); });
+
+// Base Map dari OpenStreetMap
+L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+}).addTo(map);
+
+// Inisialisasi FeatureGroups untuk masing-masing layer
+const spbuLayer = L.featureGroup().addTo(map);
+const jalanLayer = L.featureGroup().addTo(map);
+const parsilLayer = L.featureGroup().addTo(map);
+const rumahIbadahLayer = L.featureGroup().addTo(map);
+const pendudukMiskinLayer = L.featureGroup().addTo(map);
+const geoJsonLayer = L.featureGroup().addTo(map);
+
+const searchInput = document.getElementById('searchInput');
+const searchClear = document.getElementById('searchClear');
+
+if (searchInput) {
+    searchInput.addEventListener('focus', function() {
+        if (typeof window.deactivateAddMode === 'function') window.deactivateAddMode();
+    });
+
+    searchInput.addEventListener('input', function() {
+        const val = this.value.toLowerCase();
+        if (val.length > 0) {
+            searchClear.style.visibility = 'visible';
+            window.showSearchResults(val);
+        } else {
+            searchClear.style.visibility = 'hidden';
+            document.getElementById('searchResults').style.display = 'none';
+        }
+    });
+}
+
+if (searchClear) {
+    searchClear.addEventListener('click', function() {
+        searchInput.value = '';
+        searchClear.style.visibility = 'hidden';
+        document.getElementById('searchResults').style.display = 'none';
+        searchInput.focus();
+    });
+}
+
+window.showSearchResults = function(query) {
+    const resultsContainer = document.getElementById('searchResults');
+    if (!resultsContainer) return;
+    resultsContainer.innerHTML = '';
+    let results = [];
+    
+    if (typeof spbuLayer !== 'undefined') {
+        spbuLayer.eachLayer(layer => {
+            if (layer.spbuData && layer.spbuData.nama && layer.spbuData.nama.toLowerCase().includes(query)) {
+                results.push({ type: 'SPBU', nama: layer.spbuData.nama, layer: layer });
+            }
+        });
+    }
+
+    if (typeof jalanLayer !== 'undefined') {
+        jalanLayer.eachLayer(layer => {
+            if (layer.jalanData && layer.jalanData.nama && layer.jalanData.nama.toLowerCase().includes(query)) {
+                results.push({ type: 'Jalan', nama: layer.jalanData.nama, layer: layer });
+            }
+        });
+    }
+
+    if (typeof parsilLayer !== 'undefined') {
+        parsilLayer.eachLayer(layer => {
+            if (layer.parsilData && layer.parsilData.nama && layer.parsilData.nama.toLowerCase().includes(query)) {
+                results.push({ type: 'Parsil', nama: layer.parsilData.nama, layer: layer });
+            }
+        });
+    }
+    
+    if (results.length === 0) {
+        resultsContainer.innerHTML = '<div style="padding: 10px 15px; color: #666; font-size: 14px;">Tidak ada hasil</div>';
+    } else {
+        results.forEach(res => {
+            const item = document.createElement('div');
+            item.style.padding = '10px 15px';
+            item.style.cursor = 'pointer';
+            item.style.borderBottom = '1px solid #eee';
+            item.style.fontSize = '14px';
+            item.innerHTML = `<strong>${res.type}:</strong> ${res.nama}`;
+            item.addEventListener('mouseenter', () => item.style.backgroundColor = '#f8f9fa');
+            item.addEventListener('mouseleave', () => item.style.backgroundColor = 'white');
+            item.addEventListener('click', () => {
+                if (res.layer instanceof L.Marker) {
+                    map.setView(res.layer.getLatLng(), 17);
+                } else if (res.layer.getBounds) {
+                    map.fitBounds(res.layer.getBounds());
+                }
+                res.layer.openPopup();
+                resultsContainer.style.display = 'none';
+            });
+            resultsContainer.appendChild(item);
+        });
+    }
+    resultsContainer.style.display = 'block';
+};
+
+// UI Logic: Custom Layer Control Toggle
+const layerBtn   = document.getElementById('layerBtn');
+const layerPanel = document.getElementById('layerPanel');
+
+if (layerBtn && layerPanel) {
+    layerBtn.addEventListener('click', function() {
+        if (typeof window.deactivateAddMode === 'function') window.deactivateAddMode();
+        layerPanel.style.display = layerPanel.style.display === 'block' ? 'none' : 'block';
+    });
+}
+
+// Sembunyikan layer panel saat klik di peta
+map.on('click', function() {
+    if (layerPanel) layerPanel.style.display = 'none';
+});
+
+// Logic untuk Toggle Layer Visibility
+const setupLayerToggle = (id, layer) => {
+    const el = document.getElementById(id);
+    if (el) {
+        el.addEventListener('change', function(e) {
+            e.target.checked ? map.addLayer(layer) : map.removeLayer(layer);
+        });
+    }
+};
+
+setupLayerToggle('layerSpbu', spbuLayer);
+setupLayerToggle('layerJalan', jalanLayer);
+setupLayerToggle('layerParsil', parsilLayer);
+setupLayerToggle('layerRumahIbadah', rumahIbadahLayer);
+setupLayerToggle('layerMiskin', pendudukMiskinLayer);
+
+// --- Sub-layer Toggle (expand/collapse) ---
+window.toggleSubLayer = function(subId, iconEl) {
+    const sub = document.getElementById(subId);
+    if (!sub) return;
+    const isHidden = sub.style.display === 'none';
+    sub.style.display = isHidden ? '' : 'none';
+    iconEl.classList.toggle('collapsed', !isHidden);
+};
+
+// --- Sub-layer Filter ---
+window.applySubFilter = function(type) {
+    if (type === 'spbu') {
+        const checked = [...document.querySelectorAll('.sub-spbu:checked')].map(el => el.value === '1');
+        spbuLayer.eachLayer(layer => {
+            if (layer.spbuData === undefined) return;
+            if (checked.includes(layer.spbuData.is_24_jam)) {
+                layer.getElement && layer.getElement() && (layer.getElement().style.display = '');
+            } else {
+                layer.getElement && layer.getElement() && (layer.getElement().style.display = 'none');
+            }
+        });
+    } else if (type === 'jalan') {
+        const checked = [...document.querySelectorAll('.sub-jalan:checked')].map(el => el.value);
+        jalanLayer.eachLayer(layer => {
+            if (!layer.jalanData) return;
+            if (checked.includes(layer.jalanData.status)) {
+                layer.getElement && layer.getElement() && (layer.getElement().style.display = '');
+            } else {
+                layer.getElement && layer.getElement() && (layer.getElement().style.display = 'none');
+            }
+        });
+    } else if (type === 'parsil') {
+        const checked = [...document.querySelectorAll('.sub-parsil:checked')].map(el => el.value);
+        parsilLayer.eachLayer(layer => {
+            if (!layer.parsilData) return;
+            if (checked.includes(layer.parsilData.status)) {
+                layer.getElement && layer.getElement() && (layer.getElement().style.display = '');
+            } else {
+                layer.getElement && layer.getElement() && (layer.getElement().style.display = 'none');
+            }
+        });
+    }
+};
+
+// --- Modal Logic ---
+const unifiedModal = document.getElementById('unifiedModal');
+const modalTitle = document.getElementById('modalTitle');
+const modalBody = document.getElementById('modalBody');
+
+window.openModal = function(title, bodyHTML, saveCallback) {
+    if (!unifiedModal) return;
+    modalTitle.textContent = title;
+    modalBody.innerHTML = bodyHTML;
+    unifiedModal.classList.add('show');
+    
+    const currentSaveBtn = document.getElementById('modalSaveBtn');
+    if (currentSaveBtn) {
+        const newSaveBtn = currentSaveBtn.cloneNode(true);
+        currentSaveBtn.parentNode.replaceChild(newSaveBtn, currentSaveBtn);
+        newSaveBtn.addEventListener('click', saveCallback);
+    }
+};
+
+window.closeModal = function() {
+    if (unifiedModal) unifiedModal.classList.remove('show');
+};
+
+const confirmModal = document.getElementById('confirmModal');
+const confirmMessage = document.getElementById('confirmMessage');
+
+window.openConfirmModal = function(msg, confirmCallback) {
+    if (!confirmModal) return;
+    confirmMessage.textContent = msg;
+    confirmModal.classList.add('show');
+    
+    const currentYesBtn = document.getElementById('confirmYesBtn');
+    if (currentYesBtn) {
+        const newYesBtn = currentYesBtn.cloneNode(true);
+        currentYesBtn.parentNode.replaceChild(newYesBtn, currentYesBtn);
+        newYesBtn.addEventListener('click', function() {
+            confirmModal.classList.remove('show');
+            confirmCallback();
+        });
+    }
+};
+
+window.closeConfirmModal = function() {
+    if (confirmModal) confirmModal.classList.remove('show');
+};
+
+window.currentAddMode = null; // 'spbu', 'jalan', 'parsil'
+window.activateAddMode = function(mode) {
+    if (window.currentAddMode === mode) {
+        window.deactivateAddMode();
+        return;
+    }
+    window.currentAddMode = mode;
+    document.getElementById('map').style.cursor = 'crosshair';
+};
+
+window.deactivateAddMode = function() {
+    window.currentAddMode = null;
+    document.getElementById('map').style.cursor = '';
+};
diff --git a/parsil/assets/js/panel.js b/parsil/assets/js/panel.js
new file mode 100644
index 0000000..1aa68d6
--- /dev/null
+++ b/parsil/assets/js/panel.js
@@ -0,0 +1,270 @@
+// ===== Panel Management =====
+// Mengelola Left Sidebar Toggle + Right Panel + Layer Control
+
+(function () {
+    // ---- State ----
+    let activePanel = null;
+
+    // ---- Elements ----
+    const sidebarToggleBtn  = document.getElementById('sidebarToggleBtn');
+    const sidebarToggleIcon = document.getElementById('sidebarToggleIcon');
+    const leftSidebar       = document.getElementById('leftSidebar');
+    const rightPanel        = document.getElementById('rightPanel');
+    const rightPanelTitle   = document.getElementById('rightPanelTitle');
+    const rightPanelActions = document.getElementById('rightPanelActions');
+    const rightPanelBody    = document.getElementById('rightPanelBody');
+    const rightPanelClose   = document.getElementById('rightPanelClose');
+
+    // ---- Sidebar Toggle ----
+    if (sidebarToggleBtn) {
+        sidebarToggleBtn.addEventListener('click', function () {
+            const isOpen = leftSidebar.style.display !== 'none';
+            if (isOpen) {
+                leftSidebar.style.display = 'none';
+                sidebarToggleBtn.classList.remove('open');
+                sidebarToggleIcon.className = 'fas fa-chevron-right';
+            } else {
+                leftSidebar.style.display = 'flex';
+                sidebarToggleBtn.classList.add('open');
+                sidebarToggleIcon.className = 'fas fa-chevron-left';
+            }
+        });
+    }
+
+    // ---- Sidebar Buttons ----
+    document.querySelectorAll('.sidebar-btn').forEach(btn => {
+        btn.addEventListener('click', function () {
+            const panel = this.dataset.panel;
+            if (activePanel === panel) {
+                closePanel();
+            } else {
+                openPanel(panel);
+            }
+        });
+    });
+
+    if (rightPanelClose) {
+        rightPanelClose.addEventListener('click', closePanel);
+    }
+
+    // ---- Open / Close Panel ----
+    function openPanel(panel) {
+        if (typeof window.deactivateAddMode === 'function') window.deactivateAddMode();
+        activePanel = panel;
+        rightPanel.classList.add('open');
+        document.body.classList.add('right-panel-open');
+        document.querySelectorAll('.sidebar-btn').forEach(b => b.classList.remove('active'));
+        const activeBtn = document.querySelector(`.sidebar-btn[data-panel="${panel}"]`);
+        if (activeBtn) activeBtn.classList.add('active');
+        renderPanel(panel);
+    }
+
+    function closePanel() {
+        if (typeof window.deactivateAddMode === 'function') window.deactivateAddMode();
+        activePanel = null;
+        rightPanel.classList.remove('open');
+        document.body.classList.remove('right-panel-open');
+        document.querySelectorAll('.sidebar-btn').forEach(b => b.classList.remove('active'));
+    }
+
+    window.refreshActivePanel = function () {
+        if (activePanel && activePanel !== 'layer') renderPanel(activePanel);
+    };
+
+    // ---- Render Panel by Type ----
+    function renderPanel(type) {
+        rightPanelBody.innerHTML = '<div class="panel-empty">Memuat data...</div>';
+        rightPanelActions.innerHTML = '';
+
+        switch (type) {
+            case 'spbu': renderSpbuPanel(); break;
+            case 'jalan': renderJalanPanel(); break;
+            case 'parsil': renderParsilPanel(); break;
+        }
+    }
+
+    // ==========================
+    // ===== SPBU Panel =======
+    // ==========================
+    function renderSpbuPanel() {
+        rightPanelTitle.textContent = 'โ›ฝ Daftar SPBU';
+        const isAdmin = !!(window.currentUser && window.currentUser.role === 'admin');
+        if (isAdmin) {
+            rightPanelActions.innerHTML = `
+                <button class="btn-panel-add" id="btnPanelAddSpbu">
+                    <i class="fas fa-plus"></i> Tambah SPBU
+                </button>`;
+            document.getElementById('btnPanelAddSpbu').addEventListener('click', () => {
+                window.activateAddMode('spbu');
+            });
+        }
+
+        const items = [];
+        spbuLayer.eachLayer(l => {
+            if (l.spbuData) items.push(l.spbuData);
+        });
+
+        if (!items.length) {
+            rightPanelBody.innerHTML = '<div class="panel-empty">Belum ada data SPBU</div>';
+            return;
+        }
+
+        rightPanelBody.innerHTML = '';
+        items.forEach(d => {
+            const card  = document.createElement('div');
+            card.className = 'data-card';
+            let actionButtons = '';
+            if (isAdmin) {
+                actionButtons = `
+                    <div class="data-card-actions">
+                        <button class="btn-card-action btn-card-edit"   title="Edit"><i class="fas fa-pen"></i></button>
+                        <button class="btn-card-action btn-card-delete" title="Hapus"><i class="fas fa-trash"></i></button>
+                    </div>
+                `;
+            }
+            card.innerHTML = `
+                <div class="data-card-main">
+                    <div class="data-card-icon" style="background:#fef3c7; color:#d97706; padding:8px; border-radius:8px; font-size:18px;">โ›ฝ</div>
+                    <div class="data-card-info">
+                        <div class="data-card-name">${escHtml(d.nama)}</div>
+                        <div class="data-card-sub">๐Ÿ“ž ${escHtml(d.no_wa || '-')} โ€ข ๐Ÿ• ${d.is_24_jam ? '24 Jam' : 'Tidak 24 Jam'}</div>
+                    </div>
+                    ${actionButtons}
+                </div>`;
+            if (isAdmin) {
+                card.querySelector('.btn-card-edit').addEventListener('click',   (e) => { e.stopPropagation(); window.openEditSpbuModal(d.id); });
+                card.querySelector('.btn-card-delete').addEventListener('click', (e) => { e.stopPropagation(); window.deleteSpbu(d.id); });
+            }
+            card.addEventListener('click', () => {
+                spbuLayer.eachLayer(l => {
+                    if (l.spbuData && l.spbuData.id == d.id) {
+                        map.setView(l.getLatLng(), 17); l.openPopup();
+                    }
+                });
+            });
+            rightPanelBody.appendChild(card);
+        });
+    }
+
+    // ==========================
+    // ===== Jalan Panel =======
+    // ==========================
+    function renderJalanPanel() {
+        rightPanelTitle.textContent = '๐Ÿ›ฃ๏ธ Daftar Jalan';
+        const isAdmin = !!(window.currentUser && window.currentUser.role === 'admin');
+        
+        rightPanelActions.innerHTML = '';
+
+        const items = [];
+        jalanLayer.eachLayer(l => {
+            if (l.jalanData) items.push(l.jalanData);
+        });
+
+        if (!items.length) {
+            rightPanelBody.innerHTML = '<div class="panel-empty">Belum ada data Jalan</div>';
+            return;
+        }
+
+        rightPanelBody.innerHTML = '';
+        items.forEach(d => {
+            const card  = document.createElement('div');
+            card.className = 'data-card';
+            let actionButtons = '';
+            if (isAdmin) {
+                actionButtons = `
+                    <div class="data-card-actions">
+                        <button class="btn-card-action btn-card-edit"   title="Edit"><i class="fas fa-pen"></i></button>
+                        <button class="btn-card-action btn-card-delete" title="Hapus"><i class="fas fa-trash"></i></button>
+                    </div>
+                `;
+            }
+            card.innerHTML = `
+                <div class="data-card-main">
+                    <div class="data-card-icon" style="background:#e0e7ff; color:#4f46e5; padding:8px; border-radius:8px; font-size:18px;">๐Ÿ›ฃ๏ธ</div>
+                    <div class="data-card-info">
+                        <div class="data-card-name">${escHtml(d.nama)}</div>
+                        <div class="data-card-sub">๐Ÿ“ ${d.panjang.toFixed(2)} m โ€ข ๐Ÿท๏ธ ${escHtml(d.status)}</div>
+                    </div>
+                    ${actionButtons}
+                </div>`;
+            if (isAdmin) {
+                card.querySelector('.btn-card-edit').addEventListener('click',   (e) => { e.stopPropagation(); window.openEditJalanModal(d.id); });
+                card.querySelector('.btn-card-delete').addEventListener('click', (e) => { e.stopPropagation(); window.deleteJalan(d.id); });
+            }
+            card.addEventListener('click', () => {
+                jalanLayer.eachLayer(l => {
+                    if (l.jalanData && l.jalanData.id == d.id) {
+                        map.fitBounds(l.getBounds()); l.openPopup();
+                    }
+                });
+            });
+            rightPanelBody.appendChild(card);
+        });
+    }
+
+    // ==========================
+    // ===== Parsil Panel =======
+    // ==========================
+    function renderParsilPanel() {
+        rightPanelTitle.textContent = '๐Ÿ—บ๏ธ Daftar Parsil Tanah';
+        const isAdmin = !!(window.currentUser && window.currentUser.role === 'admin');
+        
+        rightPanelActions.innerHTML = '';
+
+        const items = [];
+        parsilLayer.eachLayer(l => {
+            if (l.parsilData) items.push(l.parsilData);
+        });
+
+        if (!items.length) {
+            rightPanelBody.innerHTML = '<div class="panel-empty">Belum ada data Parsil</div>';
+            return;
+        }
+
+        rightPanelBody.innerHTML = '';
+        items.forEach(d => {
+            const card  = document.createElement('div');
+            card.className = 'data-card';
+            let actionButtons = '';
+            if (isAdmin) {
+                actionButtons = `
+                    <div class="data-card-actions">
+                        <button class="btn-card-action btn-card-edit"   title="Edit"><i class="fas fa-pen"></i></button>
+                        <button class="btn-card-action btn-card-delete" title="Hapus"><i class="fas fa-trash"></i></button>
+                    </div>
+                `;
+            }
+            card.innerHTML = `
+                <div class="data-card-main">
+                    <div class="data-card-icon" style="background:#d1fae5; color:#059669; padding:8px; border-radius:8px; font-size:18px;">๐Ÿ—บ๏ธ</div>
+                    <div class="data-card-info">
+                        <div class="data-card-name">${escHtml(d.nama || 'Tanpa Nama')}</div>
+                        <div class="data-card-sub">๐Ÿ“ ${d.luas.toFixed(2)} mยฒ โ€ข ๐Ÿท๏ธ ${escHtml(d.status)}</div>
+                    </div>
+                    ${actionButtons}
+                </div>`;
+            if (isAdmin) {
+                card.querySelector('.btn-card-edit').addEventListener('click',   (e) => { e.stopPropagation(); window.openEditParsilModal(d.id); });
+                card.querySelector('.btn-card-delete').addEventListener('click', (e) => { e.stopPropagation(); window.deleteParsil(d.id); });
+            }
+            card.addEventListener('click', () => {
+                parsilLayer.eachLayer(l => {
+                    if (l.parsilData && l.parsilData.id == d.id) {
+                        map.fitBounds(l.getBounds()); l.openPopup();
+                    }
+                });
+            });
+            rightPanelBody.appendChild(card);
+        });
+    }
+
+    // ---- Utility ----
+    function escHtml(str) {
+        if (!str) return '';
+        return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+    }
+
+    // ---- Expose ----
+    window.openRightPanel = openPanel;
+
+})();
diff --git a/parsil/create.php b/parsil/create.php
new file mode 100644
index 0000000..2ebb088
--- /dev/null
+++ b/parsil/create.php
@@ -0,0 +1,25 @@
+<?php
+header("Content-Type: application/json; charset=UTF-8");
+require_once '../auth_helper.php';
+requireAdmin();
+include_once '../db_connect.php';
+
+$data = json_decode(file_get_contents("php://input"));
+
+if(!empty($data->geom)) {
+    $nama = $conn->real_escape_string($data->nama ?? '');
+    $status = $conn->real_escape_string($data->status ?? 'SHM');
+    $luas = (float)($data->luas ?? 0);
+    $geom = $conn->real_escape_string(json_encode($data->geom)); // GeoJSON string
+
+    $query = "INSERT INTO parsil (nama, status, luas, geom) VALUES ('$nama', '$status', $luas, ST_GeomFromGeoJSON('$geom'))";
+
+    if($conn->query($query)) {
+        echo json_encode(["status" => "success", "id" => $conn->insert_id, "message" => "Parsil berhasil ditambahkan."]);
+    } else {
+        echo json_encode(["status" => "error", "message" => "Gagal menambahkan parsil: " . $conn->error]);
+    }
+} else {
+    echo json_encode(["status" => "error", "message" => "Data geometri tidak lengkap."]);
+}
+?>
diff --git a/parsil/delete.php b/parsil/delete.php
new file mode 100644
index 0000000..aca7cf9
--- /dev/null
+++ b/parsil/delete.php
@@ -0,0 +1,22 @@
+<?php
+header("Content-Type: application/json; charset=UTF-8");
+require_once '../auth_helper.php';
+requireAdmin();
+include_once '../db_connect.php';
+
+$data = json_decode(file_get_contents("php://input"));
+
+if(!empty($data->id)) {
+    $id = (int)$data->id;
+
+    $query = "DELETE FROM parsil WHERE id=$id";
+
+    if($conn->query($query)) {
+        echo json_encode(["status" => "success", "message" => "Parsil berhasil dihapus."]);
+    } else {
+        echo json_encode(["status" => "error", "message" => "Gagal hapus parsil: " . $conn->error]);
+    }
+} else {
+    echo json_encode(["status" => "error", "message" => "ID tidak diberikan."]);
+}
+?>
diff --git a/parsil/index.php b/parsil/index.php
new file mode 100644
index 0000000..2c74118
--- /dev/null
+++ b/parsil/index.php
@@ -0,0 +1,388 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WebGIS Pemetaan Jaringan Jalan</title>
+    
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400;500;600;700&display=swap" rel="stylesheet">
+    
+    <!-- FontAwesome (Icons) -->
+    <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="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+    
+    <!-- Leaflet Draw CSS -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
+
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="assets/css/style.css">
+</head>
+<body>
+
+    <!-- UI Container over map -->
+    <div class="ui-container">
+        <!-- Search Bar -->
+        <div class="search-bar">
+            <div class="search-icon">
+                <i class="fas fa-search"></i>
+            </div>
+            <input type="text" class="search-input" id="searchInput" placeholder="Cari SPBU, jalan, parsil, rumah ibadah...">
+            <button class="search-clear" id="searchClear">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+        <!-- Search Results -->
+        <div id="searchResults" style="display: none; background: white; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); max-height: 200px; overflow-y: auto;">
+        </div>
+    </div>
+
+    <!-- Custom Zoom Control -->
+    <div class="custom-zoom-control" style="position: absolute; top: 20px; left: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 5px;">
+        <button class="custom-layer-btn" id="zoomInBtn" style="position: relative; top: 0; left: 0; right: auto;" title="Zoom In"><i class="fas fa-plus"></i></button>
+        <button class="custom-layer-btn" id="zoomOutBtn" style="position: relative; top: 0; left: 0; right: auto;" title="Zoom Out"><i class="fas fa-minus"></i></button>
+    </div>
+
+    <!-- Sidebar Toggle Button -->
+    <button class="sidebar-toggle-btn" id="sidebarToggleBtn" title="Menu">
+        <i class="fas fa-chevron-right" id="sidebarToggleIcon"></i>
+    </button>
+
+    <!-- Left Sidebar Menu -->
+    <nav class="left-sidebar" id="leftSidebar" style="display:none;">
+        <div class="sidebar-section-label">Umum</div>
+        <button class="sidebar-btn" id="menuSpbu"   data-panel="spbu"   title="SPBU">
+            <span class="sidebar-emoji">โ›ฝ</span>
+            <span class="sidebar-label">SPBU</span>
+        </button>
+        <button class="sidebar-btn" id="menuJalan"  data-panel="jalan"  title="Jalan">
+            <span class="sidebar-emoji">๐Ÿ›ฃ๏ธ</span>
+            <span class="sidebar-label">Jalan</span>
+        </button>
+        <button class="sidebar-btn" id="menuParsil" data-panel="parsil" title="Parsil Tanah">
+            <span class="sidebar-emoji">๐Ÿ—บ๏ธ</span>
+            <span class="sidebar-label">Parsil</span>
+        </button>
+        
+    </nav>
+
+
+
+    <!-- Custom Layer Control Button -->
+    <button class="custom-layer-btn" id="layerBtn" title="Atur Layer">
+        <i class="fas fa-layer-group fa-lg"></i>
+    </button>
+
+    <div>
+        <!-- Custom Layer Control Panel -->
+        <div class="custom-layer-panel" id="layerPanel">
+            <h3>Daftar Layer</h3>
+    
+            <div class="layer-section-title">Infrastruktur & Lahan</div>
+    
+            <!-- SPBU -->
+            <div class="layer-group-item">
+                <div class="layer-group-header">
+                    <label class="layer-option" style="margin:0; flex:1;">
+                        <input type="checkbox" id="layerSpbu" checked> SPBU
+                    </label>
+                    <span class="layer-toggle-icon collapsed" onclick="toggleSubLayer('subSpbu', this)"><i class="fas fa-chevron-down"></i></span>
+                </div>
+                <div id="subSpbu" class="sub-layer-list" style="display:none;">
+                    <label class="layer-option sub-option">
+                        <input type="checkbox" class="sub-spbu" value="1" checked onchange="applySubFilter('spbu')"> 24 Jam
+                    </label>
+                    <label class="layer-option sub-option">
+                        <input type="checkbox" class="sub-spbu" value="0" checked onchange="applySubFilter('spbu')"> Tidak 24 Jam
+                    </label>
+                </div>
+            </div>
+    
+            <!-- Jalan -->
+            <div class="layer-group-item">
+                <div class="layer-group-header">
+                    <label class="layer-option" style="margin:0; flex:1;">
+                        <input type="checkbox" id="layerJalan" checked> Jalan
+                    </label>
+                    <span class="layer-toggle-icon collapsed" onclick="toggleSubLayer('subJalan', this)"><i class="fas fa-chevron-down"></i></span>
+                </div>
+                <div id="subJalan" class="sub-layer-list" style="display:none;">
+                    <label class="layer-option sub-option">
+                        <input type="checkbox" class="sub-jalan" value="Nasional" checked onchange="applySubFilter('jalan')"> Nasional
+                    </label>
+                    <label class="layer-option sub-option">
+                        <input type="checkbox" class="sub-jalan" value="Provinsi" checked onchange="applySubFilter('jalan')"> Provinsi
+                    </label>
+                    <label class="layer-option sub-option">
+                        <input type="checkbox" class="sub-jalan" value="Kabupaten" checked onchange="applySubFilter('jalan')"> Kabupaten
+                    </label>
+                </div>
+            </div>
+    
+            <!-- Parsil -->
+            <div class="layer-group-item">
+                <div class="layer-group-header">
+                    <label class="layer-option" style="margin:0; flex:1;">
+                        <input type="checkbox" id="layerParsil" checked> Parsil Tanah
+                    </label>
+                    <span class="layer-toggle-icon collapsed" onclick="toggleSubLayer('subParsil', this)"><i class="fas fa-chevron-down"></i></span>
+                </div>
+                <div id="subParsil" class="sub-layer-list" style="display:none;">
+                    <label class="layer-option sub-option">
+                        <input type="checkbox" class="sub-parsil" value="SHM" checked onchange="applySubFilter('parsil')"> SHM
+                    </label>
+                    <label class="layer-option sub-option">
+                        <input type="checkbox" class="sub-parsil" value="HGB" checked onchange="applySubFilter('parsil')"> HGB
+                    </label>
+                    <label class="layer-option sub-option">
+                        <input type="checkbox" class="sub-parsil" value="HGU" checked onchange="applySubFilter('parsil')"> HGU
+                    </label>
+                    <label class="layer-option sub-option">
+                        <input type="checkbox" class="sub-parsil" value="HP"  checked onchange="applySubFilter('parsil')"> HP
+                    </label>
+                </div>
+            </div>
+    
+
+    
+            <!-- GeoJSON Eksternal -->
+            <div class="layer-group" style="margin-top: 10px; border-top: 1px solid #eee; padding-top: 10px;">
+                <div class="layer-group-header" onclick="window.toggleGeoJsonMenu()" style="cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-size:14px; margin-bottom:8px; font-weight: 500;">
+                    <span><i class="fas fa-folder"></i> GeoJSON Eksternal</span>
+                    <i id="geoJsonToggleIcon" class="fas fa-plus"></i>
+                </div>
+                <div id="geoJsonFileList" style="display:none; padding-left:15px; margin-bottom:10px;">
+                    <div id="geoJsonLayersContainer"></div>
+                    <div style="margin-top: 10px; padding-top: 10px; border-top: 1px dashed #ddd;">
+                        <label style="font-size: 12px; display:block; margin-bottom: 5px;">Import GeoJSON Baru:</label>
+                        <input type="file" id="fileGeoJson" accept=".geojson,.json" style="font-size: 12px; max-width: 100%;">
+                    </div>
+                </div>
+            </div>
+        </div><!-- /custom-layer-panel -->
+
+        <!-- Right Data Panel -->
+        <div class="right-panel" id="rightPanel">
+            <div class="right-panel-header">
+                <h3 id="rightPanelTitle">Data</h3>
+                <button class="right-panel-close" id="rightPanelClose"><i class="fas fa-times"></i></button>
+            </div>
+            <div class="right-panel-actions" id="rightPanelActions"></div>
+            <div class="right-panel-body" id="rightPanelBody">
+                <div class="panel-empty">Pilih menu di kiri untuk menampilkan data</div>
+            </div>
+        </div><!-- /right-panel -->
+    </div>
+
+
+
+    <!-- Map Container -->
+    <div id="map"></div>
+
+    <!-- Unified Modal -->
+    <div id="unifiedModal" class="unified-modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3 id="modalTitle">Judul Form</h3>
+                <span class="modal-close" onclick="closeModal()">&times;</span>
+            </div>
+            <div class="modal-body" id="modalBody">
+                <!-- Konten dinamis -->
+            </div>
+            <div class="modal-footer" id="modalFooter">
+                <button id="modalSaveBtn" class="btn-save">Simpan</button>
+                <button class="btn-cancel" onclick="closeModal()">Batal</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Confirm Modal -->
+    <div id="confirmModal" class="unified-modal">
+        <div class="modal-content" style="width: 300px;">
+            <div class="modal-header">
+                <h3>Konfirmasi</h3>
+            </div>
+            <div class="modal-body">
+                <p id="confirmMessage"></p>
+            </div>
+            <div class="modal-footer" style="display: flex; gap: 10px; justify-content: flex-end;">
+                <button id="confirmYesBtn" class="btn-save" style="background-color: #dc3545;">Ya, Hapus</button>
+                <button class="btn-cancel" onclick="closeConfirmModal()">Batal</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Log Bantuan Modal -->
+    <div id="logBantuanModal" class="unified-modal">
+        <div class="modal-content" style="width:500px; max-height:85vh; overflow:hidden; display:flex; flex-direction:column;">
+            <div class="modal-header">
+                <h3 id="logBantuanTitle">Log Bantuan</h3>
+                <span class="modal-close" onclick="closeLogBantuanModal()">&times;</span>
+            </div>
+            <div class="modal-body" style="flex:1; overflow-y:auto; gap:0; padding:0;">
+                <!-- Riwayat -->
+                <div style="padding:15px; border-bottom:1px solid #eee;">
+                    <h4 style="font-size:13px; font-weight:600; color:#555; margin-bottom:10px;">Riwayat Bantuan</h4>
+                    <div id="logBantuanList" style="max-height:220px; overflow-y:auto; display:flex; flex-direction:column; gap:8px;">
+                        <div class="panel-empty" style="padding:20px;">Belum ada riwayat</div>
+                    </div>
+                </div>
+                <!-- Form Tambah -->
+                <div style="padding:15px;">
+                    <h4 style="font-size:13px; font-weight:600; color:#555; margin-bottom:10px;">Tambah Log Bantuan</h4>
+                    <div class="form-group">
+                        <label>Rumah Ibadah</label>
+                        <select id="logIbadahId"></select>
+                    </div>
+                    <div class="form-group">
+                        <label>Tipe Bantuan</label>
+                        <select id="logTipeBantuan">
+                            <option value="Sembako">Sembako</option>
+                            <option value="Uang Tunai">Uang Tunai</option>
+                            <option value="Pakaian">Pakaian</option>
+                            <option value="Pendidikan">Pendidikan</option>
+                            <option value="Kesehatan">Kesehatan</option>
+                            <option value="Lainnya">Lainnya</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label>Tanggal</label>
+                        <input type="date" id="logTanggal">
+                    </div>
+                    <div class="form-group">
+                        <label>Keterangan (opsional)</label>
+                        <textarea id="logKeterangan" rows="2" placeholder="Catatan tambahan..."></textarea>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button class="btn-save" id="logSaveBtn">Simpan Log</button>
+                <button class="btn-cancel" onclick="closeLogBantuanModal()">Tutup</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Floating Profile / Auth Control -->
+    <div id="authWidget" class="auth-widget">
+        <button class="btn-login" id="authLoginBtn"><i class="fas fa-sign-in-alt"></i> Login</button>
+    </div>
+
+    <!-- Login Modal -->
+    <div id="loginModal" class="unified-modal">
+        <div class="modal-content" style="width: 360px;">
+            <div class="modal-header">
+                <h3>Login Ke Sistem</h3>
+                <span class="modal-close" id="closeLoginModal">&times;</span>
+            </div>
+            <div class="modal-body">
+                <div class="form-group">
+                    <label for="loginUsername">Username</label>
+                    <input type="text" id="loginUsername" placeholder="Masukkan username">
+                </div>
+                <div class="form-group">
+                    <label for="loginPassword">Password</label>
+                    <input type="password" id="loginPassword" placeholder="Masukkan password">
+                </div>
+                <div id="loginErrorMsg" style="display:none; color:#ef4444; font-size:12px; font-weight:500;"></div>
+            </div>
+            <div class="modal-footer">
+                <button id="loginSubmitBtn" class="btn-save" style="width: 100%;">Masuk</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- User Management Modal -->
+    <div id="userManagementModal" class="unified-modal">
+        <div class="modal-content" style="width: 700px; max-width: 95%;">
+            <div class="modal-header">
+                <h3>Manajemen Pengguna (Admin)</h3>
+                <span class="modal-close" id="closeUserManagementModal">&times;</span>
+            </div>
+            <div class="modal-body" style="gap: 15px;">
+                <!-- Form Tambah/Edit User -->
+                <div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 10px;">
+                    <h4 id="userFormTitle" style="font-size: 13px; font-weight:700; color:#334155; margin-bottom: 2px;">Tambah User Baru</h4>
+                    <input type="hidden" id="manageUserId" value="">
+                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
+                        <div class="form-group">
+                            <label>Username</label>
+                            <input type="text" id="manageUsername" placeholder="Username">
+                        </div>
+                        <div class="form-group">
+                            <label>Password (Kosongkan jika tidak diubah)</label>
+                            <input type="password" id="managePassword" placeholder="Password">
+                        </div>
+                    </div>
+                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
+                        <div class="form-group">
+                            <label>Role</label>
+                            <select id="manageRole">
+                                <option value="pengelola" selected>Pengelola Rumah Ibadah</option>
+                                <option value="admin">Admin</option>
+                            </select>
+                        </div>
+                        <div class="form-group" id="manageIbadahGroup">
+                            <label>Rumah Ibadah yang Dikelola</label>
+                            <select id="manageIbadahId">
+                                <!-- Dikonstruksi dinamis dari data rumah ibadah -->
+                            </select>
+                        </div>
+                    </div>
+                    <div style="display: flex; gap: 8px; justify-content: flex-end; margin-top: 5px;">
+                        <button id="btnCancelUserEdit" class="btn-cancel" style="padding: 6px 12px; display:none;">Batal</button>
+                        <button id="btnSaveUser" class="btn-save" style="padding: 6px 16px;">Simpan User</button>
+                    </div>
+                </div>
+                
+                <!-- Tabel Daftar User -->
+                <div style="max-height: 200px; overflow-y: auto; border: 1px solid #cbd5e1; border-radius: 8px;">
+                    <table style="width: 100%; border-collapse: collapse; font-size: 13px; text-align: left;">
+                        <thead>
+                           <tr style="background: #f1f5f9; border-bottom: 1px solid #cbd5e1; color:#475569; position: sticky; top: 0; z-index: 10;">
+                               <th style="padding: 10px 12px;">Username</th>
+                               <th style="padding: 10px 12px;">Role</th>
+                               <th style="padding: 10px 12px;">Rumah Ibadah</th>
+                               <th style="padding: 10px 12px; text-align: center;">Aksi</th>
+                           </tr>
+                        </thead>
+                        <tbody id="userTableBody">
+                            <!-- Diisi dinamis -->
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Toast Notification Container -->
+    <div id="toastContainer"></div>
+
+    <!-- Leaflet JS -->
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+    
+    <!-- Leaflet Draw JS -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
+
+    <!-- Leaflet TextPath JS (untuk teks diagonal) -->
+    <script src="https://cdn.jsdelivr.net/npm/leaflet-textpath@1.2.3/leaflet.textpath.min.js"></script>
+
+    <!-- Main Map Initialization -->
+    <script src="assets/js/map.js?v=<?= time() ?>"></script>
+    <!-- Fitur & Komponen -->
+    <script src="assets/js/features/spbu.js?v=<?= time() ?>"></script>
+    <script src="assets/js/features/jalan.js?v=<?= time() ?>"></script>
+    <script src="assets/js/features/parsil.js?v=<?= time() ?>"></script>
+    <script src="assets/js/features/draw_control.js?v=<?= time() ?>"></script>
+    <script src="assets/js/features/geolocation.js?v=<?= time() ?>"></script>
+
+    <script src="assets/js/features/geojson.js?v=<?= time() ?>"></script>
+    <script src="assets/js/panel.js?v=<?= time() ?>"></script>
+    
+    <!-- Core Auth Feature -->
+    <script src="assets/js/features/auth.js?v=<?= time() ?>"></script>
+    
+</body>
+</html>
diff --git a/parsil/read.php b/parsil/read.php
new file mode 100644
index 0000000..f24bacf
--- /dev/null
+++ b/parsil/read.php
@@ -0,0 +1,25 @@
+<?php
+header("Content-Type: application/json; charset=UTF-8");
+include_once '../db_connect.php';
+
+$query = "SELECT id, nama, status, luas, ST_AsGeoJSON(geom) as geom FROM parsil";
+$result = $conn->query($query);
+
+$parsil_arr = array();
+
+if($result->num_rows > 0) {
+    while($row = $result->fetch_assoc()) {
+        $parsil_item = array(
+            "id" => $row['id'],
+            "nama" => $row['nama'],
+            "status" => $row['status'],
+            "luas" => (float)$row['luas'],
+            "geom" => json_decode($row['geom'])
+        );
+        array_push($parsil_arr, $parsil_item);
+    }
+    echo json_encode(["status" => "success", "data" => $parsil_arr]);
+} else {
+    echo json_encode(["status" => "success", "data" => []]);
+}
+?>
diff --git a/parsil/update.php b/parsil/update.php
new file mode 100644
index 0000000..9e27353
--- /dev/null
+++ b/parsil/update.php
@@ -0,0 +1,31 @@
+<?php
+header("Content-Type: application/json; charset=UTF-8");
+require_once '../auth_helper.php';
+requireAdmin();
+include_once '../db_connect.php';
+
+$data = json_decode(file_get_contents("php://input"));
+
+if(!empty($data->id)) {
+    $id = (int)$data->id;
+    $nama = $conn->real_escape_string($data->nama ?? '');
+    $status = $conn->real_escape_string($data->status ?? 'SHM');
+    
+    // Jika ada update geometri
+    if(!empty($data->geom)) {
+        $luas = (float)($data->luas ?? 0);
+        $geom = $conn->real_escape_string(json_encode($data->geom));
+        $query = "UPDATE parsil SET nama='$nama', status='$status', luas=$luas, geom=ST_GeomFromGeoJSON('$geom') WHERE id=$id";
+    } else {
+        $query = "UPDATE parsil SET nama='$nama', status='$status' WHERE id=$id";
+    }
+
+    if($conn->query($query)) {
+        echo json_encode(["status" => "success", "message" => "Parsil berhasil diupdate."]);
+    } else {
+        echo json_encode(["status" => "error", "message" => "Gagal update parsil: " . $conn->error]);
+    }
+} else {
+    echo json_encode(["status" => "error", "message" => "ID tidak diberikan."]);
+}
+?>
diff --git a/spbu.js b/spbu.js
new file mode 100644
index 0000000..a072270
--- /dev/null
+++ b/spbu.js
@@ -0,0 +1,213 @@
+// --- Fitur SPBU ---
+
+// Emoji Bubble Icon builder
+function makeSpbuIcon(is24) {
+    const cls = is24 ? 'spbu-24' : 'spbu-not24';
+    return L.divIcon({
+        className: '',
+        html: `<div class="emoji-marker"><div class="bubble ${cls}"><span>โ›ฝ</span></div></div>`,
+        iconSize: [38, 38],
+        iconAnchor: [19, 38],
+        popupAnchor: [0, -40]
+    });
+}
+
+const spbuGreenIcon = makeSpbuIcon(true);
+const spbuRedIcon   = makeSpbuIcon(false);
+
+let isDrawingMode = false; // Akan diset true saat draw mode aktif (jalan/parsil)
+
+
+// Fetch SPBU
+function loadSpbu() {
+    spbuLayer.clearLayers();
+    fetch('api/spbu/read.php')
+        .then(res => res.json())
+        .then(data => {
+            if (data.status === 'success' && data.data) {
+                data.data.forEach(item => {
+                    addSpbuMarker(item);
+                });
+            }
+            if (window.refreshActivePanel) window.refreshActivePanel();
+        });
+}
+
+function addSpbuMarker(item) {
+    const isAdmin = !!(window.currentUser && window.currentUser.role === 'admin');
+    const icon = makeSpbuIcon(item.is_24_jam);
+    const marker = L.marker([item.lat, item.lng], {
+        icon: icon,
+        draggable: isAdmin
+    });
+
+    marker.spbuData = item; // Simpan data di objek marker
+
+    // Hitung popupContent sekali saat marker dibuat
+    const d = item;
+    let actionButtons = '';
+    if (isAdmin) {
+        actionButtons = `
+            <div style="display:flex; gap:5px;">
+                <button style="padding:4px 8px; background:#007bff; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="openEditSpbuModal(${d.id})">Edit</button>
+                <button style="padding:4px 8px; background:#dc3545; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="deleteSpbu(${d.id})">Hapus</button>
+            </div>
+        `;
+    }
+    const popupContent = `
+        <div style="font-family: Arial, sans-serif; min-width: 150px;">
+            <h4 style="margin:0 0 5px 0;">SPBU ${d.nama}</h4>
+            <p style="margin: 0 0 5px 0;"><b>No. WA:</b> ${d.no_wa}</p>
+            <p style="margin: 0 0 10px 0;"><b>Buka 24 Jam:</b> ${d.is_24_jam ? 'Ya' : 'Tidak'}</p>
+            ${actionButtons}
+        </div>
+    `;
+    marker.bindPopup(popupContent);
+
+    // Event drag untuk update koordinat
+    marker.on('dragend', function(e) {
+        const newPos = marker.getLatLng();
+        updateSpbu(item.id, item.nama, item.no_wa, item.is_24_jam, newPos.lat, newPos.lng);
+    });
+
+    spbuLayer.addLayer(marker);
+}
+
+// Map Click -> Form Add
+map.on('click', function(e) {
+    if (isDrawingMode) return; // Jangan muncul form jika sedang gambar garis/polygon
+    
+    // Hanya proses jika mode tambah SPBU aktif
+    if (window.currentAddMode === 'spbu') {
+        const bodyHTML = `
+            <div class="form-group">
+                <label>Lat: ${e.latlng.lat.toFixed(6)}, Lng: ${e.latlng.lng.toFixed(6)}</label>
+            </div>
+            <div class="form-group">
+                <label>Nama SPBU</label>
+                <input type="text" id="modalSpbuNama" placeholder="Nama SPBU">
+            </div>
+            <div class="form-group">
+                <label>No. WA</label>
+                <input type="text" id="modalSpbuWa" placeholder="No. WA">
+            </div>
+            <div class="form-group">
+                <label>Buka 24 Jam?</label>
+                <div class="radio-group" style="margin-top:5px;">
+                    <label><input type="radio" name="modalSpbu24" value="1"> Ya</label>
+                    <label><input type="radio" name="modalSpbu24" value="0" checked> Tidak</label>
+                </div>
+            </div>
+        `;
+
+        openModal("Tambah SPBU Baru", bodyHTML, function() {
+            window.saveNewSpbu(e.latlng.lat, e.latlng.lng, 'modalSpbuNama', 'modalSpbuWa', 'modalSpbu24');
+        });
+
+        // Nonaktifkan mode tambah setelah modal muncul
+        window.deactivateAddMode();
+    }
+});
+
+window.saveNewSpbu = function(lat, lng, namaId, waId, radioName) {
+    const nama = document.getElementById(namaId).value;
+    if (!nama) {
+        alert("Nama SPBU harus diisi!");
+        return;
+    }
+    const no_wa = document.getElementById(waId).value;
+    const is_24_jam = document.querySelector(`input[name="${radioName}"]:checked`).value;
+
+    fetch('api/spbu/create.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ nama, no_wa, is_24_jam, lat, lng })
+    })
+    .then(res => res.json())
+    .then(data => {
+        if(data.status === 'success') {
+            closeModal();
+            loadSpbu();
+        } else {
+            alert(data.message);
+        }
+    });
+};
+
+window.openEditSpbuModal = function(id) {
+    let d = null;
+    spbuLayer.eachLayer(function(layer) {
+        if (layer.spbuData && layer.spbuData.id == id) d = layer.spbuData;
+    });
+    if (!d) return;
+
+    const bodyHTML = `
+        <div class="form-group">
+            <label>Nama SPBU</label>
+            <input type="text" id="editSpbuNama" value="${d.nama}">
+        </div>
+        <div class="form-group">
+            <label>No. WA</label>
+            <input type="text" id="editSpbuWa" value="${d.no_wa}">
+        </div>
+        <div class="form-group">
+            <label>Buka 24 Jam?</label>
+            <div class="radio-group" style="margin-top:5px;">
+                <label><input type="radio" name="editSpbu24" value="1" ${d.is_24_jam ? 'checked' : ''}> Ya</label>
+                <label><input type="radio" name="editSpbu24" value="0" ${!d.is_24_jam ? 'checked' : ''}> Tidak</label>
+            </div>
+        </div>
+    `;
+    map.closePopup();
+    openModal("Edit SPBU", bodyHTML, function() {
+        window.saveEditSpbu(d.id, d.lat, d.lng, 'editSpbuNama', 'editSpbuWa', 'editSpbu24');
+    });
+};
+
+window.saveEditSpbu = function(id, lat, lng, namaId, waId, radioName) {
+    const nama = document.getElementById(namaId).value;
+    const no_wa = document.getElementById(waId).value;
+    const is_24_jam = document.querySelector(`input[name="${radioName}"]:checked`).value;
+
+    updateSpbu(id, nama, no_wa, is_24_jam, lat, lng);
+};
+
+function updateSpbu(id, nama, no_wa, is_24_jam, lat, lng) {
+    fetch('api/spbu/update.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id, nama, no_wa, is_24_jam, lat, lng })
+    })
+    .then(res => res.json())
+    .then(data => {
+        if(data.status === 'success') {
+            map.closePopup();
+            closeModal();
+            loadSpbu();
+        } else {
+            alert(data.message);
+        }
+    });
+}
+
+window.deleteSpbu = function(id) {
+    openConfirmModal("Yakin hapus SPBU ini?", function() {
+        fetch('api/spbu/delete.php', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ id })
+        })
+        .then(res => res.json())
+        .then(data => {
+            if(data.status === 'success') {
+                map.closePopup();
+                loadSpbu();
+            } else {
+                alert(data.message);
+            }
+        });
+    });
+};
+
+// Initial Load
+loadSpbu();
diff --git a/spbu/assets/css/style.css b/spbu/assets/css/style.css
new file mode 100644
index 0000000..ed4eefc
--- /dev/null
+++ b/spbu/assets/css/style.css
@@ -0,0 +1,1042 @@
+/* Reset & Base */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body, html {
+    height: 100%;
+    font-family: 'Google Sans Flex', 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    overflow: hidden;
+}
+
+/* Map Container */
+#map {
+    width: 100vw;
+    height: 100vh;
+    z-index: 1;
+}
+
+/* Custom UI Container over Map */
+.ui-container {
+    position: absolute;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1000;
+    width: 100%;
+    max-width: 400px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 0 15px;
+}
+
+/* Search Bar */
+.search-bar {
+    display: flex;
+    align-items: center;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    overflow: hidden;
+    height: 48px;
+    transition: box-shadow 0.3s;
+}
+
+.search-bar:focus-within {
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
+}
+
+.search-icon {
+    padding: 0 15px;
+    color: #666;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.search-input {
+    flex: 1;
+    border: none;
+    outline: none;
+    font-size: 16px;
+    padding: 10px 0;
+    color: #333;
+}
+
+.search-clear {
+    padding: 0 15px;
+    color: #999;
+    cursor: pointer;
+    background: none;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    visibility: hidden;
+}
+
+.search-clear:hover {
+    color: #333;
+}
+
+/* Custom Layer Control Button */
+.custom-layer-btn {
+    background-color: white;
+    border-radius: 8px;
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    cursor: pointer;
+    border: none;
+    color: #333;
+}
+
+.custom-layer-btn:hover {
+    background-color: #f8f9fa;
+}
+
+#layerBtn {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    z-index: 1000;
+    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+body.right-panel-open #layerBtn {
+    right: 340px;
+}
+
+.custom-layer-panel {
+    position: absolute;
+    top: 80px;
+    right: 20px;
+    z-index: 1000;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    padding: 15px;
+    width: 250px;
+    display: none;
+    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+body.right-panel-open .custom-layer-panel {
+    right: 340px;
+}
+
+
+.custom-layer-panel h3 {
+    margin-bottom: 10px;
+    font-size: 16px;
+    border-bottom: 1px solid #eee;
+    padding-bottom: 5px;
+}
+
+.layer-section-title {
+    font-size: 11px;
+    font-weight: 700;
+    color: #6366f1;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 8px;
+    margin-top: 12px;
+    padding-bottom: 2px;
+    border-bottom: 1px dashed #e2e8f0;
+}
+
+.layer-option {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 8px;
+    font-size: 14px;
+}
+
+/* ===== Sidebar Toggle Button ===== */
+.sidebar-toggle-btn {
+    position: absolute;
+    left: 20px;
+    top: 190px;
+    z-index: 1001;
+    border-radius: 8px;
+    width: 48px;
+    height: 48px;
+    background: white;
+    border: none;
+    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #6366f1;
+    font-size: 13px;
+    transition: all 0.2s;
+}
+
+.sidebar-toggle-btn:hover {
+    background: #6366f1;
+    color: white;
+    box-shadow: 0 4px 14px rgba(99,102,241,0.4);
+}
+
+.sidebar-toggle-btn.open {
+    background: #6366f1;
+    color: white;
+}
+
+/* ===== Left Sidebar ===== */
+.left-sidebar {
+    position: absolute;
+    left: 20px;
+    top: 250px; /* di bawah toggle button */
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.sidebar-section-label {
+    font-size: 9px;
+    font-weight: 700;
+    color: #94a3b8;
+    text-transform: uppercase;
+    text-align: center;
+    letter-spacing: 0.8px;
+    margin-top: 6px;
+    margin-bottom: 2px;
+    pointer-events: none;
+    user-select: none;
+}
+
+.sidebar-divider {
+    height: 1px;
+    background: #e2e8f0;
+    margin: 4px 6px;
+}
+
+.sidebar-btn {
+    width: 60px;
+    height: 60px;
+    background: white;
+    border: none;
+    border-radius: 12px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 2px;
+    transition: all 0.2s ease;
+    padding: 6px 4px;
+}
+
+.sidebar-btn:hover {
+    transform: translateX(3px);
+    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
+    background: #f8f9fa;
+}
+
+.sidebar-btn.active {
+    background: linear-gradient(135deg, #6366f1, #4f46e5);
+    color: white;
+    box-shadow: 0 6px 18px rgba(99,102,241,0.4);
+    transform: translateX(4px);
+}
+
+.sidebar-emoji {
+    font-size: 22px;
+    line-height: 1;
+}
+
+.sidebar-label {
+    font-size: 9px;
+    font-weight: 600;
+    letter-spacing: 0.3px;
+    color: #555;
+    text-transform: uppercase;
+}
+
+.sidebar-btn.active .sidebar-label {
+    color: rgba(255,255,255,0.85);
+}
+
+/* ===== Right Panel ===== */
+.right-panel {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 320px;
+    background: #f8f9fb;
+    z-index: 999;
+    box-shadow: -4px 0 20px rgba(0,0,0,0.12);
+    display: flex;
+    flex-direction: column;
+    transform: translateX(100%);
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    /* shift layer control when panel open */
+}
+
+.right-panel.open {
+    transform: translateX(0);
+}
+
+.right-panel-header {
+    padding: 16px 16px 12px;
+    background: white;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-shrink: 0;
+    padding-top: 26px;
+}
+
+.right-panel-header h3 {
+    font-size: 15px;
+    font-weight: 700;
+    color: #1e1e2e;
+}
+
+.right-panel-close {
+    width: 30px;
+    height: 30px;
+    border: none;
+    background: #f3f4f6;
+    border-radius: 8px;
+    cursor: pointer;
+    color: #555;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 13px;
+    transition: background 0.2s;
+}
+
+.right-panel-close:hover {
+    background: #e5e7eb;
+    color: #333;
+}
+
+.right-panel-actions {
+    padding: 12px 14px;
+    background: white;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    gap: 8px;
+    flex-shrink: 0;
+}
+
+.right-panel-actions button {
+    flex: 1;
+    padding: 9px 10px;
+    border: none;
+    border-radius: 8px;
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    transition: all 0.2s;
+}
+
+.btn-panel-add {
+    background: linear-gradient(135deg, #6366f1, #4f46e5);
+    color: white;
+    box-shadow: 0 3px 10px rgba(99,102,241,0.3);
+}
+
+.btn-panel-add:hover {
+    box-shadow: 0 5px 14px rgba(99,102,241,0.45);
+    transform: translateY(-1px);
+}
+
+.btn-panel-import {
+    background: #f0fdf4;
+    color: #16a34a;
+    border: 1px solid #bbf7d0 !important;
+}
+
+.btn-panel-import:hover {
+    background: #dcfce7;
+}
+
+.right-panel-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+/* Panel Section Heading */
+.panel-section-title {
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: #9ca3af;
+    padding: 4px 2px 6px;
+    border-bottom: 1px solid #e5e7eb;
+    margin-top: 4px;
+}
+
+/* Panel Empty State */
+.panel-empty {
+    text-align: center;
+    color: #aaa;
+    font-size: 13px;
+    padding: 40px 10px;
+}
+
+/* ===== Data Card ===== */
+.data-card {
+    background: white;
+    border-radius: 12px;
+    padding: 12px 12px 10px;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
+    transition: box-shadow 0.2s;
+    cursor: pointer;
+}
+
+.data-card:hover {
+    box-shadow: 0 3px 12px rgba(0,0,0,0.12);
+}
+
+.data-card-main {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.data-card-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    flex-shrink: 0;
+}
+
+.card-icon-spbu     { background: #f0fdf4; }
+.card-icon-jalan    { background: #eff6ff; }
+.card-icon-parsil   { background: #fefce8; }
+.card-icon-ibadah   { background: #fff7ed; }
+.card-icon-miskin-out { background: #f0fdf4; }
+.card-icon-miskin-in  { background: #fef2f2; }
+
+.data-card-info {
+    flex: 1;
+    min-width: 0;
+}
+
+.data-card-name {
+    font-size: 13px;
+    font-weight: 600;
+    color: #1e1e2e;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.data-card-sub {
+    font-size: 11px;
+    color: #6b7280;
+    margin-top: 2px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.data-card-badge {
+    font-size: 10px;
+    font-weight: 600;
+    padding: 2px 7px;
+    border-radius: 99px;
+    margin-top: 4px;
+    display: inline-block;
+}
+
+.badge-green  { background: #dcfce7; color: #16a34a; }
+.badge-red    { background: #fee2e2; color: #dc2626; }
+.badge-blue   { background: #dbeafe; color: #2563eb; }
+.badge-orange { background: #ffedd5; color: #ea580c; }
+.badge-yellow { background: #fef9c3; color: #ca8a04; }
+
+.data-card-actions {
+    display: flex;
+    gap: 6px;
+    flex-shrink: 0;
+    align-items: center;
+}
+
+.btn-card-action {
+    width: 30px;
+    height: 30px;
+    border: none;
+    border-radius: 7px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    transition: all 0.15s;
+}
+
+.btn-card-edit {
+    background: #eff6ff;
+    color: #3b82f6;
+}
+
+.btn-card-edit:hover {
+    background: #3b82f6;
+    color: white;
+}
+
+.btn-card-delete {
+    background: #fef2f2;
+    color: #ef4444;
+}
+
+.btn-card-delete:hover {
+    background: #ef4444;
+    color: white;
+}
+
+/* Expandable card (miskin) */
+.data-card-expand {
+    overflow: hidden;
+    max-height: 0;
+    transition: max-height 0.3s ease, padding 0.2s;
+    border-top: 0px solid #f3f4f6;
+}
+
+.data-card.expanded .data-card-expand {
+    max-height: 400px;
+    border-top: 1px solid #f3f4f6;
+    margin-top: 10px;
+    padding-top: 10px;
+}
+
+.expand-row {
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    color: #6b7280;
+    padding: 3px 0;
+}
+
+.expand-row span:first-child {
+    font-weight: 500;
+    color: #374151;
+}
+
+.btn-log-bantuan {
+    margin-top: 10px;
+    width: 100%;
+    padding: 8px;
+    background: linear-gradient(135deg, #6366f1, #4f46e5);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    transition: all 0.2s;
+}
+
+.btn-log-bantuan:hover {
+    box-shadow: 0 4px 12px rgba(99,102,241,0.4);
+}
+
+/* Log Bantuan Item */
+.log-item {
+    background: #f8f9fb;
+    border-radius: 8px;
+    padding: 10px 12px;
+    display: flex;
+    gap: 10px;
+    align-items: flex-start;
+}
+
+.log-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #6366f1;
+    flex-shrink: 0;
+    margin-top: 5px;
+}
+
+.log-info {
+    flex: 1;
+}
+
+.log-type {
+    font-size: 12px;
+    font-weight: 600;
+    color: #1e1e2e;
+}
+
+.log-meta {
+    font-size: 11px;
+    color: #9ca3af;
+    margin-top: 2px;
+}
+
+.log-keterangan {
+    font-size: 11px;
+    color: #6b7280;
+    margin-top: 3px;
+    font-style: italic;
+}
+
+/* Popup Form */
+.popup-form {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 200px;
+}
+
+.popup-form label {
+    font-size: 12px;
+    font-weight: bold;
+    color: #555;
+}
+
+.popup-form input[type="text"],
+.popup-form input[type="number"] {
+    width: 100%;
+    padding: 6px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+.popup-form .radio-group {
+    display: flex;
+    gap: 10px;
+}
+
+.popup-form button {
+    padding: 8px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-weight: bold;
+}
+
+.popup-form button.btn-danger {
+    background-color: #dc3545;
+}
+
+.popup-form button:hover {
+    opacity: 0.9;
+}
+
+/* Unified Modal */
+.unified-modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.5);
+    z-index: 2000;
+    align-items: center;
+    justify-content: center;
+}
+
+.unified-modal.show {
+    display: flex;
+}
+
+.modal-content {
+    background-color: white;
+    border-radius: 12px;
+    width: 400px;
+    max-width: 90%;
+    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
+    display: flex;
+    flex-direction: column;
+}
+
+.modal-header {
+    padding: 15px;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.modal-header h3 {
+    font-size: 16px;
+    margin: 0;
+}
+
+.modal-close {
+    font-size: 20px;
+    font-weight: bold;
+    cursor: pointer;
+    color: #888;
+}
+
+.modal-close:hover {
+    color: #333;
+}
+
+.modal-body {
+    padding: 15px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.modal-body label {
+    font-size: 13px;
+    font-weight: 600;
+    color: #444;
+}
+
+.modal-body input[type="text"],
+.modal-body input[type="number"],
+.modal-body input[type="date"],
+.modal-body select,
+.modal-body textarea {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+    font-size: 14px;
+    font-family: inherit;
+}
+
+.modal-footer {
+    padding: 15px;
+    border-top: 1px solid #eee;
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+}
+
+.btn-save {
+    background: linear-gradient(135deg, #6366f1, #4f46e5);
+    color: white;
+    border: none;
+    padding: 8px 18px;
+    border-radius: 7px;
+    cursor: pointer;
+    font-weight: 600;
+    font-size: 13px;
+}
+
+.btn-cancel {
+    background-color: #f8f9fa;
+    border: 1px solid #ddd;
+    padding: 8px 18px;
+    border-radius: 7px;
+    cursor: pointer;
+    font-size: 13px;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+/* Custom Cursor Tooltip */
+.custom-cursor-tooltip {
+    position: absolute;
+    display: none;
+    background-color: rgba(0, 0, 0, 0.75);
+    color: white;
+    padding: 6px 12px;
+    border-radius: 4px;
+    font-size: 13px;
+    font-weight: 500;
+    pointer-events: none;
+    z-index: 9999;
+    white-space: nowrap;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
+}
+
+/* Sembunyikan default tooltip Leaflet Draw */
+.leaflet-draw-tooltip {
+    display: none !important;
+}
+
+/* Sub-layer collapsible */
+.layer-group-item {
+    margin-bottom: 6px;
+}
+
+.layer-group-item > .layer-group-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.layer-toggle-icon {
+    cursor: pointer;
+    padding: 2px 6px;
+    color: #666;
+    font-size: 11px;
+    border-radius: 4px;
+    transition: background 0.2s;
+    flex-shrink: 0;
+}
+
+.layer-toggle-icon:hover {
+    background: #f0f0f0;
+    color: #333;
+}
+
+.layer-toggle-icon i {
+    transition: transform 0.2s;
+}
+
+.layer-toggle-icon.collapsed i {
+    transform: rotate(-90deg);
+}
+
+.sub-layer-list {
+    padding-left: 18px;
+    margin-top: 4px;
+    border-left: 2px solid #eee;
+    overflow: hidden;
+    transition: max-height 0.2s ease;
+}
+
+.sub-option {
+    font-size: 12px !important;
+    color: #555;
+    margin-bottom: 3px !important;
+}
+
+/* ===== Emoji Marker (Pin Bubble) ===== */
+.emoji-marker {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    pointer-events: auto; /* changed from none to allow click/drag */
+}
+
+.emoji-marker .bubble {
+    width: 38px;
+    height: 38px;
+    border-radius: 50% 50% 50% 0;
+    transform: rotate(-45deg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
+    border: 2px solid rgba(255,255,255,0.8);
+    animation: markerPop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
+}
+
+.emoji-marker .bubble span {
+    transform: rotate(45deg);
+    font-size: 18px;
+    line-height: 1;
+}
+
+@keyframes markerPop {
+    0%   { transform: rotate(-45deg) scale(0); }
+    100% { transform: rotate(-45deg) scale(1); }
+}
+
+/* Warna bubble per tipe */
+.emoji-marker .bubble.spbu-24     { background: linear-gradient(135deg, #22c55e, #16a34a); }
+.emoji-marker .bubble.spbu-not24  { background: linear-gradient(135deg, #ef4444, #dc2626); }
+.emoji-marker .bubble.ibadah      { background: linear-gradient(135deg, #f97316, #ea580c); }
+.emoji-marker .bubble.miskin-in   { background: linear-gradient(135deg, #ef4444, #dc2626); }
+.emoji-marker .bubble.miskin-out  { background: linear-gradient(135deg, #22c55e, #16a34a); }
+
+/* ===== Toast Notification ===== */
+#toastContainer {
+    position: fixed;
+    bottom: 28px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    pointer-events: none;
+}
+
+.toast {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 20px;
+    border-radius: 12px;
+    font-size: 13px;
+    font-weight: 500;
+    color: white;
+    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
+    backdrop-filter: blur(6px);
+    pointer-events: auto;
+    animation: toastSlideIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
+    max-width: 340px;
+    text-align: center;
+}
+
+.toast.hiding {
+    animation: toastSlideOut 0.3s ease forwards;
+}
+
+.toast-success { background: linear-gradient(135deg, #22c55e, #16a34a); }
+.toast-error   { background: linear-gradient(135deg, #ef4444, #dc2626); }
+.toast-info    { background: linear-gradient(135deg, #6366f1, #4f46e5); }
+.toast-warning { background: linear-gradient(135deg, #f59e0b, #d97706); }
+
+.toast-icon { font-size: 16px; flex-shrink: 0; }
+
+@keyframes toastSlideIn {
+    0%   { opacity: 0; transform: translateY(20px) scale(0.9); }
+    100% { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+@keyframes toastSlideOut {
+    0%   { opacity: 1; transform: translateY(0) scale(1); }
+    100% { opacity: 0; transform: translateY(10px) scale(0.95); }
+}
+
+/* Auth Widget Styling */
+.auth-widget {
+    position: absolute;
+    top: 20px;
+    right: 80px;
+    z-index: 1000;
+    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+body.right-panel-open .auth-widget {
+    right: 400px;
+}
+
+.btn-login {
+    background: linear-gradient(135deg, #6366f1, #4f46e5);
+    color: white;
+    border: none;
+    border-radius: 24px;
+    height: 48px;
+    padding: 0 24px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    transition: all 0.2s ease;
+}
+
+.btn-login:hover {
+    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.45);
+    transform: translateY(-1px);
+}
+
+.user-profile-pill {
+    background-color: white;
+    border-radius: 24px;
+    height: 48px;
+    padding: 0 8px 0 16px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    border: 1px solid rgba(226, 232, 240, 0.8);
+    backdrop-filter: blur(10px);
+    background: rgba(255, 255, 255, 0.9);
+}
+
+.user-profile-info {
+    display: flex;
+    flex-direction: column;
+}
+
+.user-profile-name {
+    font-size: 12px;
+    font-weight: 700;
+    color: #1e1e2e;
+}
+
+.user-profile-role {
+    font-size: 9px;
+    font-weight: 600;
+    color: #6366f1;
+    text-transform: uppercase;
+}
+
+.btn-profile-logout {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    border: none;
+    background: #f1f5f9;
+    color: #64748b;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+}
+
+.btn-profile-logout:hover {
+    background: #fee2e2;
+    color: #ef4444;
+}
+
+/* User management table styling */
+#userManagementModal table th {
+    padding: 10px 12px;
+    font-weight: 600;
+    background-color: #f1f5f9;
+    border-bottom: 1px solid #cbd5e1;
+}
+
+#userManagementModal table td {
+    padding: 10px 12px;
+    border-bottom: 1px solid #e2e8f0;
+}
+
+
+
+/* =============================================================
+   SPBU — Specific Styles
+   ============================================================= */
+
+.card-icon-spbu { background: #f0fdf4; }
+
+.emoji-marker .bubble.spbu-24    { background: linear-gradient(135deg, #22c55e, #16a34a); }
+.emoji-marker .bubble.spbu-not24 { background: linear-gradient(135deg, #ef4444, #dc2626); }
+
+.legend-spbu-24    { display:inline-block; width:12px; height:12px; border-radius:50%; background:linear-gradient(135deg,#22c55e,#16a34a); }
+.legend-spbu-not24 { display:inline-block; width:12px; height:12px; border-radius:50%; background:linear-gradient(135deg,#ef4444,#dc2626); }
+
+.badge-spbu-24    { background:#dcfce7; color:#16a34a; }
+.badge-spbu-not24 { background:#fee2e2; color:#dc2626; }
diff --git a/spbu/assets/js/features/auth.js b/spbu/assets/js/features/auth.js
new file mode 100644
index 0000000..f2dcb32
--- /dev/null
+++ b/spbu/assets/js/features/auth.js
@@ -0,0 +1,157 @@
+// --- Fitur Autentikasi dan Manajemen User (RBAC) ---
+
+(function() {
+    window.currentUser = null;
+
+    // Elements
+    const authWidget = document.getElementById('authWidget');
+    const loginModal = document.getElementById('loginModal');
+    const loginUsernameInput = document.getElementById('loginUsername');
+    const loginPasswordInput = document.getElementById('loginPassword');
+    const loginSubmitBtn = document.getElementById('loginSubmitBtn');
+    const loginErrorMsg = document.getElementById('loginErrorMsg');
+    const closeLoginModal = document.getElementById('closeLoginModal');
+
+    // Startup Session Check
+    function checkSession() {
+        fetch('../poverty/api/check_session.php')
+            .then(res => res.json())
+            .then(data => {
+                if (data.status === 'success' && data.isLoggedIn) {
+                    window.currentUser = data.data;
+                } else {
+                    window.currentUser = null;
+                }
+                updateAuthUI();
+                refreshAllLayers();
+            })
+            .catch(err => {
+                console.error("Session check failed:", err);
+                window.currentUser = null;
+                updateAuthUI();
+            });
+    }
+
+    // Update UI based on logged-in state
+    function updateAuthUI() {
+        if (!authWidget) return;
+
+        if (window.currentUser) {
+            // Logged In state
+            const roleLabel = window.currentUser.role === 'admin' ? 'Admin' : 'Pengelola';
+            
+            authWidget.innerHTML = `
+                <div class="user-profile-pill">
+                    <div class="user-profile-info">
+                        <div class="user-profile-name">๐Ÿ‘ค ${escHtml(window.currentUser.username)}</div>
+                        <div class="user-profile-role">${roleLabel}</div>
+                    </div>
+                    <button class="btn-profile-logout" id="authLogoutBtn" title="Logout">
+                        <i class="fas fa-sign-out-alt"></i>
+                    </button>
+                </div>
+            `;
+
+            document.getElementById('authLogoutBtn').addEventListener('click', logout);
+        } else {
+            // Logged Out state
+            authWidget.innerHTML = `
+                <button class="btn-login" id="authLoginBtn"><i class="fas fa-sign-in-alt"></i> Login</button>
+            `;
+            document.getElementById('authLoginBtn').addEventListener('click', showLoginModal);
+        }
+    }
+
+    function refreshAllLayers() {
+        if (typeof loadSpbu === 'function') loadSpbu();
+        if (typeof loadJalan === 'function') loadJalan();
+        if (typeof loadParsil === 'function') loadParsil();
+        if (window.refreshActivePanel) window.refreshActivePanel();
+    }
+
+    // Login Modals logic
+    function showLoginModal() {
+        loginUsernameInput.value = '';
+        loginPasswordInput.value = '';
+        loginErrorMsg.style.display = 'none';
+        loginModal.classList.add('show');
+    }
+
+    function hideLoginModal() {
+        loginModal.classList.remove('show');
+    }
+
+    if (closeLoginModal) {
+        closeLoginModal.addEventListener('click', hideLoginModal);
+    }
+
+    if (loginSubmitBtn) {
+        loginSubmitBtn.addEventListener('click', function() {
+            const username = loginUsernameInput.value.trim();
+            const password = loginPasswordInput.value;
+
+            if (!username || !password) {
+                loginErrorMsg.textContent = 'Username dan password wajib diisi';
+                loginErrorMsg.style.display = 'block';
+                return;
+            }
+
+            fetch('../poverty/api/login.php', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ username, password })
+            })
+            .then(res => res.json())
+            .then(data => {
+                if (data.status === 'success') {
+                    window.currentUser = data.data;
+                    hideLoginModal();
+                    updateAuthUI();
+                    refreshAllLayers();
+                    showToast('Login berhasil', 'success');
+                } else {
+                    loginErrorMsg.textContent = data.message || 'Login gagal';
+                    loginErrorMsg.style.display = 'block';
+                }
+            })
+            .catch(err => {
+                console.error(err);
+                loginErrorMsg.textContent = 'Koneksi ke server terputus';
+                loginErrorMsg.style.display = 'block';
+            });
+        });
+    }
+
+    function logout() {
+        fetch('../poverty/api/logout.php')
+            .then(res => res.json())
+            .then(data => {
+                window.currentUser = null;
+                updateAuthUI();
+                refreshAllLayers();
+                showToast('Logout berhasil', 'success');
+            })
+            .catch(err => {
+                console.error(err);
+                showToast('Gagal logout', 'error');
+            });
+    }
+
+    // Helper functions
+    function escHtml(str) {
+        if (!str) return '';
+        return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+    }
+
+    // Toast Notification helper
+    function showToast(message, type = 'success') {
+        if (typeof window.showToast === 'function') {
+            window.showToast(message, type);
+            return;
+        }
+        alert(message);
+    }
+
+    // Run session check on initialization
+    checkSession();
+})();
diff --git a/spbu/assets/js/features/draw_control.js b/spbu/assets/js/features/draw_control.js
new file mode 100644
index 0000000..a1e7026
--- /dev/null
+++ b/spbu/assets/js/features/draw_control.js
@@ -0,0 +1,142 @@
+// --- Setup Leaflet Draw ---
+
+// Layer terpisah untuk hasil gambar sementara sebelum disimpan
+const drawnItems = new L.FeatureGroup();
+map.addLayer(drawnItems);
+
+const drawControl = new L.Control.Draw({
+    draw: {
+        polygon: {
+            allowIntersection: false,
+            showArea: true
+        },
+        polyline: {
+            metric: true
+        },
+        circle: false,
+        circlemarker: false,
+        marker: false, // Marker default dimatikan, kita pakai klik peta untuk SPBU
+        rectangle: false
+    },
+    edit: {
+        featureGroup: drawnItems, // Kita tidak mengedit di drawnItems, karena data aslinya di jalanLayer/parsilLayer
+        edit: false,
+        remove: false
+    }
+});
+// Hapus map.addControl(drawControl); agar tidak tampil UI bawaan LeafletJS
+
+
+// Flag untuk menghindari munculnya form SPBU saat sedang menggambar
+map.on(L.Draw.Event.DRAWSTART, function (e) {
+    isDrawingMode = true;
+});
+
+map.on(L.Draw.Event.DRAWSTOP, function (e) {
+    setTimeout(() => { 
+        isDrawingMode = false; 
+        window.currentDrawMode = null;
+        window.activeDrawHandler = null;
+        window.deactivateAddMode(); 
+    }, 200);
+});
+
+window.activateDraw = function(type) {
+    const isAdmin = !!(window.currentUser && window.currentUser.role === 'admin');
+    if (!isAdmin) return;
+
+    console.log("-> activateDraw dipanggil untuk tipe:", type);
+
+    // Toggle: jika mode yang sama ditekan lagi, batalkan
+    if (window.currentDrawMode === type) {
+        console.log("Mode", type, "sudah aktif, membatalkan...");
+        window.deactivateAddMode();
+        return;
+    }
+    
+    window.deactivateAddMode();
+    window.currentDrawMode = type;
+    console.log("Mengaktifkan mode menggambar:", type);
+    
+    if (type === 'polyline') {
+        const handler = new L.Draw.Polyline(map, drawControl.options.draw.polyline);
+        handler.enable();
+        window.activeDrawHandler = handler;
+        if (window.cursorTooltip) window.cursorTooltip.textContent = 'Klik untuk menggambar Jalan';
+    } else if (type === 'polygon') {
+        const handler = new L.Draw.Polygon(map, drawControl.options.draw.polygon);
+        handler.enable();
+        window.activeDrawHandler = handler;
+        if (window.cursorTooltip) window.cursorTooltip.textContent = 'Klik untuk menggambar Parsil';
+    }
+};
+
+map.on(L.Draw.Event.CREATED, function (e) {
+    const type = e.layerType;
+    const layer = e.layer;
+
+    // Convert layer to GeoJSON geometry
+    const geoJson = layer.toGeoJSON().geometry;
+    const geoJsonStr = JSON.stringify(geoJson);
+
+    if (type === 'polyline') {
+        let length = 0;
+        const latlngs = layer.getLatLngs();
+        for (let i = 0; i < latlngs.length - 1; i++) {
+            length += latlngs[i].distanceTo(latlngs[i + 1]);
+        }
+        
+        // Gunakan Modal alih-alih prompt
+        const bodyHTML = `
+            <div class="form-group">
+                <label>Nama Jalan</label>
+                <input type="text" id="modalJalanNama" placeholder="Nama Jalan">
+            </div>
+            <div class="form-group">
+                <label>Status</label>
+                <select id="modalJalanStatus">
+                    <option value="Nasional">Nasional</option>
+                    <option value="Provinsi">Provinsi</option>
+                    <option value="Kabupaten" selected>Kabupaten</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label>Panjang: ${length.toFixed(2)} m</label>
+            </div>
+        `;
+        openModal("Tambah Jalan Baru", bodyHTML, function() {
+            window.saveNewJalan(geoJsonStr, length, 'modalJalanNama', 'modalJalanStatus');
+        });
+        
+    } 
+    else if (type === 'polygon') {
+        const latlngs = layer.getLatLngs()[0];
+        let area = 0;
+        if (L.GeometryUtil && L.GeometryUtil.geodesicArea) {
+            area = L.GeometryUtil.geodesicArea(latlngs);
+        }
+
+        const bodyHTML = `
+            <div class="form-group">
+                <label>Nama Pemilik/Area</label>
+                <input type="text" id="modalParsilNama" placeholder="Contoh: Budi atau Sawah A">
+            </div>
+            <div class="form-group">
+                <label>Status Tanah</label>
+                <select id="modalParsilStatus">
+                    <option value="SHM" selected>SHM</option>
+                    <option value="HGB">HGB</option>
+                    <option value="HGU">HGU</option>
+                    <option value="HP">HP</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label>Luas: ${area.toFixed(2)} mยฒ</label>
+            </div>
+        `;
+        openModal("Tambah Parsil Tanah", bodyHTML, function() {
+            window.saveNewParsil(geoJsonStr, area, 'modalParsilNama', 'modalParsilStatus');
+        });
+    }
+});
+
diff --git a/spbu/assets/js/features/geojson.js b/spbu/assets/js/features/geojson.js
new file mode 100644
index 0000000..62fc314
--- /dev/null
+++ b/spbu/assets/js/features/geojson.js
@@ -0,0 +1,182 @@
+// --- Fitur Import GeoJSON ---
+
+const fileGeoJson = document.getElementById('fileGeoJson');
+let geoJsonLayers = {};
+let geoJsonCounter = 0;
+
+window.toggleGeoJsonMenu = function() {
+    const list = document.getElementById('geoJsonFileList');
+    const icon = document.getElementById('geoJsonToggleIcon');
+    if (list.style.display === 'none') {
+        list.style.display = 'block';
+        icon.className = 'fas fa-minus';
+    } else {
+        list.style.display = 'none';
+        icon.className = 'fas fa-plus';
+    }
+};
+
+// Cek apakah fitur GeoJSON ini terlihat seperti data penduduk miskin
+function isMiskinFeature(feature) {
+    if (!feature || !feature.geometry || feature.geometry.type !== 'Point') return false;
+    const props = feature.properties || {};
+    const keys = Object.keys(props).map(k => k.toLowerCase());
+    // Dianggap data miskin jika punya properti nama (dan bukan ibadah atau spbu)
+    const hasNama = keys.some(k => ['nama', 'name', 'penduduk'].includes(k));
+    const isIbadah = keys.some(k => ['jenis', 'radius', 'alamat'].includes(k));
+    const isSpbu = keys.some(k => ['alamat_spbu', 'is_24_jam'].includes(k));
+    return hasNama && !isIbadah && !isSpbu;
+}
+
+fileGeoJson.addEventListener('change', function(e) {
+    const file = e.target.files[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = function(event) {
+        try {
+            const geoJsonData = JSON.parse(event.target.result);
+            const fileName = file.name;
+
+            // Pisahkan fitur menjadi dua kelompok: miskin dan non-miskin
+            const features = geoJsonData.type === 'FeatureCollection'
+                ? geoJsonData.features
+                : [geoJsonData];
+
+            const miskinFeatures = features.filter(f => isMiskinFeature(f));
+            const otherFeatures = features.filter(f => !isMiskinFeature(f));
+
+            // ---- Proses fitur miskin: Simpan ke DB, lalu tampilkan seperti penduduk miskin ----
+            if (miskinFeatures.length > 0) {
+                const bulkData = miskinFeatures.map(f => {
+                    const props = f.properties || {};
+                    const coords = f.geometry.coordinates;
+                    return {
+                        nama:              props.nama || props.name || props.penduduk || 'Data Impor',
+                        kategori_bantuan:  props.kategori_bantuan || props.kategori || props.bantuan || 'Makan',
+                        jumlah_jiwa:       parseInt(props.jumlah_jiwa || props.jumlah || props.jiwa || 1, 10) || 1,
+                        lat:               parseFloat(coords[1]),
+                        lng:               parseFloat(coords[0])
+                    };
+                });
+
+                fetch('../poverty/api/penduduk_miskin/bulk_create.php', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(bulkData)
+                })
+                .then(res => res.json())
+                .then(data => {
+                    if (data.status === 'success') {
+                        // Reload layer penduduk miskin agar marker tampil dengan edit/hapus/log bantuan
+                        if (typeof loadPendudukMiskin === 'function') {
+                            loadPendudukMiskin();
+                        }
+                        if (typeof window.refreshActivePanel === 'function') {
+                            window.refreshActivePanel();
+                        }
+                        showToast(data.message || 'Data berhasil diimpor ke layer Penduduk Miskin.', 'success');
+                    } else {
+                        showToast(data.message || 'Gagal menyimpan data miskin.', 'error');
+                    }
+                })
+                .catch(err => {
+                    console.error(err);
+                    showToast('Gagal terhubung ke server saat menyimpan data miskin.', 'error');
+                });
+            }
+
+            // ---- Proses fitur non-miskin: Render sebagai layer GeoJSON biasa ----
+            if (otherFeatures.length > 0) {
+                const layerId = 'gj_' + (++geoJsonCounter);
+                const individualLayer = L.featureGroup();
+
+                const otherGeoJson = {
+                    type: 'FeatureCollection',
+                    features: otherFeatures
+                };
+
+                L.geoJSON(otherGeoJson, {
+                    pointToLayer: function(feature, latlng) {
+                        const props = feature.properties || {};
+                        let emoji = props.emoji;
+
+                        if (!emoji) {
+                            const text = JSON.stringify(props).toLowerCase();
+                            if (text.includes('spbu'))      emoji = 'โ›ฝ';
+                            else if (text.includes('masjid'))    emoji = '๐Ÿ•Œ';
+                            else if (text.includes('gereja'))    emoji = 'โ›ช';
+                            else if (text.includes('vihara'))    emoji = '๐Ÿชท';
+                            else if (text.includes('pura'))      emoji = '๐Ÿ›•';
+                            else if (text.includes('kelenteng')) emoji = '๐Ÿฎ';
+                            else emoji = '๐Ÿ“';
+                        }
+
+                        let cls = 'miskin-out';
+                        if (emoji === 'โ›ฝ') cls = 'spbu-24';
+                        else if (['๐Ÿ•Œ','โ›ช','๐Ÿ›•','๐Ÿชท','๐Ÿฎ'].includes(emoji)) cls = 'ibadah';
+
+                        const icon = L.divIcon({
+                            className: '',
+                            html: `<div class="emoji-marker"><div class="bubble ${cls}"><span>${emoji}</span></div></div>`,
+                            iconSize: [38, 38],
+                            iconAnchor: [19, 38],
+                            popupAnchor: [0, -40]
+                        });
+
+                        return L.marker(latlng, { icon: icon });
+                    },
+                    onEachFeature: function(feature, layer) {
+                        if (feature.properties) {
+                            let popupContent = '<h4>Informasi Feature</h4><ul style="list-style:none; padding:0; font-size:12px; margin: 0;">';
+                            for (let key in feature.properties) {
+                                popupContent += `<li><strong>${key}:</strong> ${feature.properties[key]}</li>`;
+                            }
+                            popupContent += '</ul>';
+                            layer.bindPopup(popupContent);
+                        }
+                    },
+                    style: function(feature) {
+                        return {
+                            color: (feature.properties && feature.properties.color) || '#3388ff',
+                            weight: 2,
+                            fillOpacity: 0.4
+                        };
+                    }
+                }).addTo(individualLayer);
+
+                individualLayer.addTo(map);
+                geoJsonLayers[layerId] = individualLayer;
+
+                // Tambahkan checkbox ke UI
+                const container = document.getElementById('geoJsonLayersContainer');
+                const label = document.createElement('label');
+                label.className = 'layer-option';
+                label.innerHTML = `<input type="checkbox" id="chk_${layerId}" checked> ${fileName}`;
+
+                label.querySelector('input').addEventListener('change', function(e) {
+                    if (e.target.checked) {
+                        map.addLayer(geoJsonLayers[layerId]);
+                    } else {
+                        map.removeLayer(geoJsonLayers[layerId]);
+                    }
+                });
+
+                container.appendChild(label);
+
+                if (miskinFeatures.length === 0) {
+                    showToast('File GeoJSON berhasil dimuat!', 'success');
+                }
+            }
+
+            // Reset input file agar bisa import file yang sama
+            fileGeoJson.value = '';
+
+        } catch (error) {
+            showToast('Gagal memproses file GeoJSON. Pastikan format valid.', 'error');
+            console.error(error);
+        }
+    };
+    reader.readAsText(file);
+});
+
diff --git a/spbu/assets/js/features/geolocation.js b/spbu/assets/js/features/geolocation.js
new file mode 100644
index 0000000..4d95a20
--- /dev/null
+++ b/spbu/assets/js/features/geolocation.js
@@ -0,0 +1,31 @@
+// --- Fitur Geolocation ---
+
+// Tambahkan tombol di dalam wadah zoom control
+const geoBtn = document.createElement('button');
+geoBtn.className = 'custom-layer-btn';
+geoBtn.style.position = 'relative';
+geoBtn.style.top = '0';
+geoBtn.style.left = '0';
+geoBtn.style.right = 'auto';
+geoBtn.innerHTML = '<i class="fas fa-crosshairs fa-lg"></i>';
+geoBtn.title = 'Lokasi Saya';
+document.querySelector('.custom-zoom-control').appendChild(geoBtn);
+
+let userMarker = null;
+
+geoBtn.addEventListener('click', function() {
+    map.locate({setView: true, maxZoom: 16});
+});
+
+map.on('locationfound', function(e) {
+    if (userMarker) {
+        map.removeLayer(userMarker);
+    }
+    userMarker = L.marker(e.latlng).addTo(map)
+        .bindPopup("Anda berada di sini!").openPopup();
+});
+
+map.on('locationerror', function(e) {
+    alert("Gagal mendapatkan lokasi Anda.");
+});
+
diff --git a/spbu/assets/js/features/jalan.js b/spbu/assets/js/features/jalan.js
new file mode 100644
index 0000000..24a93ac
--- /dev/null
+++ b/spbu/assets/js/features/jalan.js
@@ -0,0 +1,173 @@
+// --- Fitur Jalan ---
+
+const jalanColors = {
+    'Nasional': '#ff0000',  // Merah
+    'Provinsi': '#0000ff',  // Biru
+    'Kabupaten': '#00ff00'  // Hijau
+};
+
+function loadJalan() {
+    jalanLayer.clearLayers();
+    fetch('../jalan/read.php')
+        .then(res => res.json())
+        .then(data => {
+            if (data.status === 'success' && data.data) {
+                data.data.forEach(item => {
+                    addJalanToMap(item);
+                });
+            }
+            if (window.refreshActivePanel) window.refreshActivePanel();
+        });
+}
+
+function addJalanToMap(item) {
+    // geom adalah GeoJSON {type: "LineString", coordinates: [[lng, lat], ...]}
+    const latlngs = item.geom.coordinates.map(coord => [coord[1], coord[0]]);
+    
+    const polyline = L.polyline(latlngs, {
+        color: jalanColors[item.status] || '#3388ff',
+        weight: 5
+    });
+
+    polyline.jalanData = item;
+
+    // Tampilkan label nama jalan sejajar dengan garis (diagonal)
+    polyline.setText(item.nama, {
+        center: true,
+        offset: 0,
+        attributes: {
+            fill: '#000000',
+            'font-weight': 'bold',
+            'font-size': '14px',
+            'dy': '7'
+        }
+    });
+
+    // Hitung popupContent sekali saat jalan dibuat
+    const d = item;
+    const isAdmin = !!(window.currentUser && window.currentUser.role === 'admin');
+    let actionButtons = '';
+    if (isAdmin) {
+        actionButtons = `
+            <div style="display:flex; gap:5px;">
+                <button style="padding:4px 8px; background:#007bff; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="openEditJalanModal(${d.id})">Edit</button>
+                <button style="padding:4px 8px; background:#dc3545; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="deleteJalan(${d.id})">Hapus</button>
+            </div>
+        `;
+    }
+    
+    const popupContent = `
+        <div style="font-family: Arial, sans-serif; min-width: 150px;">
+            <h4 style="margin:0 0 5px 0;">Jalan ${d.nama}</h4>
+            <p style="margin: 0 0 5px 0;"><b>Status:</b> ${d.status}</p>
+            <p style="margin: 0 0 10px 0;"><b>Panjang:</b> ${d.panjang.toFixed(2)} m</p>
+            ${actionButtons}
+        </div>
+    `;
+    
+    polyline.bindPopup(popupContent);
+
+    jalanLayer.addLayer(polyline);
+}
+
+window.openEditJalanModal = function(id) {
+    let d = null;
+    jalanLayer.eachLayer(function(layer) {
+        if (layer.jalanData && layer.jalanData.id == id) d = layer.jalanData;
+    });
+    if (!d) return;
+
+    const bodyHTML = `
+        <div class="form-group">
+            <label>Nama Jalan</label>
+            <input type="text" id="editJalanNama" value="${d.nama}">
+        </div>
+        <div class="form-group">
+            <label>Status</label>
+            <select id="editJalanStatus">
+                <option value="Nasional" ${d.status === 'Nasional' ? 'selected' : ''}>Nasional</option>
+                <option value="Provinsi" ${d.status === 'Provinsi' ? 'selected' : ''}>Provinsi</option>
+                <option value="Kabupaten" ${d.status === 'Kabupaten' ? 'selected' : ''}>Kabupaten</option>
+            </select>
+        </div>
+        <div class="form-group">
+            <label>Panjang: ${d.panjang.toFixed(2)} m</label>
+        </div>
+    `;
+    map.closePopup();
+    openModal("Edit Jalan", bodyHTML, function() {
+        window.saveEditJalan(d.id, 'editJalanNama', 'editJalanStatus');
+    });
+};
+
+window.saveEditJalan = function(id, namaId, statusId) {
+    const nama = document.getElementById(namaId).value;
+    const status = document.getElementById(statusId).value;
+
+    fetch('../jalan/update.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id, nama, status })
+    })
+    .then(res => res.json())
+    .then(data => {
+        if(data.status === 'success') {
+            map.closePopup();
+            closeModal();
+            loadJalan();
+        } else {
+            alert(data.message);
+        }
+    });
+};
+
+window.deleteJalan = function(id) {
+    openConfirmModal("Yakin hapus jalan ini?", function() {
+        fetch('../jalan/delete.php', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ id })
+        })
+        .then(res => res.json())
+        .then(data => {
+            if(data.status === 'success') {
+                map.closePopup();
+                loadJalan();
+            } else {
+                alert(data.message);
+            }
+        });
+    });
+};
+
+window.saveNewJalan = function(geoJsonStr, panjang, namaId, statusId) {
+    const nama = document.getElementById(namaId).value;
+    if (!nama) {
+        alert("Nama jalan harus diisi!");
+        return false;
+    }
+    
+    const status = document.getElementById(statusId).value;
+
+    const geom = JSON.parse(geoJsonStr);
+
+    fetch('../jalan/create.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ nama, status, panjang, geom })
+    })
+    .then(res => res.json())
+    .then(data => {
+        if(data.status === 'success') {
+            closeModal();
+            loadJalan();
+        } else {
+            alert(data.message);
+        }
+    });
+    return true;
+};
+
+// Initial Load
+loadJalan();
+
diff --git a/spbu/assets/js/features/parsil.js b/spbu/assets/js/features/parsil.js
new file mode 100644
index 0000000..d8509da
--- /dev/null
+++ b/spbu/assets/js/features/parsil.js
@@ -0,0 +1,159 @@
+// --- Fitur Parsil ---
+
+const parsilColors = {
+    'SHM': '#28a745', // Hijau
+    'HGB': '#17a2b8', // Biru Muda
+    'HGU': '#ffc107', // Kuning
+    'HP':  '#fd7e14'  // Oranye
+};
+
+function loadParsil() {
+    parsilLayer.clearLayers();
+    fetch('../parsil/read.php')
+        .then(res => res.json())
+        .then(data => {
+            if (data.status === 'success' && data.data) {
+                data.data.forEach(item => {
+                    addParsilToMap(item);
+                });
+            }
+            if (window.refreshActivePanel) window.refreshActivePanel();
+        });
+}
+
+function addParsilToMap(item) {
+    // geom adalah GeoJSON Polygon
+    // coordinates pada Polygon formatnya: [[[lng, lat], [lng, lat], ...]]
+    // Leaflet Polygon butuh array of [lat, lng]
+    const latlngs = item.geom.coordinates[0].map(coord => [coord[1], coord[0]]);
+    
+    const polygon = L.polygon(latlngs, {
+        color: parsilColors[item.status] || '#3388ff',
+        fillColor: parsilColors[item.status] || '#3388ff',
+        fillOpacity: 0.5,
+        weight: 2
+    });
+
+    polygon.parsilData = item;
+
+    const d = item;
+    const isAdmin = !!(window.currentUser && window.currentUser.role === 'admin');
+    let actionButtons = '';
+    if (isAdmin) {
+        actionButtons = `
+            <div style="display:flex; gap:5px;">
+                <button style="padding:4px 8px; background:#007bff; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="openEditParsilModal(${d.id})">Edit</button>
+                <button style="padding:4px 8px; background:#dc3545; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="deleteParsil(${d.id})">Hapus</button>
+            </div>
+        `;
+    }
+    const popupContent = `
+        <div style="font-family: Arial, sans-serif; min-width: 150px;">
+            <h4 style="margin:0 0 5px 0;">Parsil ${d.nama || ''}</h4>
+            <p style="margin: 0 0 5px 0;"><b>Status:</b> ${d.status}</p>
+            <p style="margin: 0 0 10px 0;"><b>Luas:</b> ${d.luas.toFixed(2)} mยฒ</p>
+            ${actionButtons}
+        </div>
+    `;
+    polygon.bindPopup(popupContent);
+
+    parsilLayer.addLayer(polygon);
+}
+
+window.openEditParsilModal = function(id) {
+    let d = null;
+    parsilLayer.eachLayer(function(layer) {
+        if (layer.parsilData && layer.parsilData.id == id) d = layer.parsilData;
+    });
+    if (!d) return;
+
+    const bodyHTML = `
+        <div class="form-group">
+            <label>Nama Pemilik/Area</label>
+            <input type="text" id="editParsilNama" value="${d.nama || ''}">
+        </div>
+        <div class="form-group">
+            <label>Status</label>
+            <select id="editParsilStatus">
+                <option value="SHM" ${d.status === 'SHM' ? 'selected' : ''}>SHM</option>
+                <option value="HGB" ${d.status === 'HGB' ? 'selected' : ''}>HGB</option>
+                <option value="HGU" ${d.status === 'HGU' ? 'selected' : ''}>HGU</option>
+                <option value="HP" ${d.status === 'HP' ? 'selected' : ''}>HP</option>
+            </select>
+        </div>
+        <div class="form-group">
+            <label>Luas: ${d.luas.toFixed(2)} mยฒ</label>
+        </div>
+    `;
+    map.closePopup();
+    openModal("Edit Parsil Tanah", bodyHTML, function() {
+        window.saveEditParsil(d.id, 'editParsilNama', 'editParsilStatus');
+    });
+};
+
+window.saveEditParsil = function(id, namaId, statusId) {
+    const nama = document.getElementById(namaId).value;
+    const status = document.getElementById(statusId).value;
+
+    fetch('../parsil/update.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id, nama, status })
+    })
+    .then(res => res.json())
+    .then(data => {
+        if(data.status === 'success') {
+            map.closePopup();
+            closeModal();
+            loadParsil();
+        } else {
+            alert(data.message);
+        }
+    });
+};
+
+window.deleteParsil = function(id) {
+    openConfirmModal("Yakin hapus parsil ini?", function() {
+        fetch('../parsil/delete.php', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ id })
+        })
+        .then(res => res.json())
+        .then(data => {
+            if(data.status === 'success') {
+                map.closePopup();
+                loadParsil();
+            } else {
+                alert(data.message);
+            }
+        });
+    });
+};
+
+window.saveNewParsil = function(geoJsonStr, luas, namaId, statusId) {
+    const nama = document.getElementById(namaId).value;
+    const status = document.getElementById(statusId).value;
+
+    const geom = JSON.parse(geoJsonStr);
+
+    fetch('../parsil/create.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ nama, status, luas, geom })
+    })
+    .then(res => res.json())
+    .then(data => {
+        if(data.status === 'success') {
+            closeModal();
+            loadParsil();
+        } else {
+            alert(data.message);
+        }
+    });
+    return true;
+};
+
+// Initial Load
+loadParsil();
+
diff --git a/spbu/assets/js/features/spbu.js b/spbu/assets/js/features/spbu.js
new file mode 100644
index 0000000..07d168f
--- /dev/null
+++ b/spbu/assets/js/features/spbu.js
@@ -0,0 +1,214 @@
+// --- Fitur SPBU ---
+
+// Emoji Bubble Icon builder
+function makeSpbuIcon(is24) {
+    const cls = is24 ? 'spbu-24' : 'spbu-not24';
+    return L.divIcon({
+        className: '',
+        html: `<div class="emoji-marker"><div class="bubble ${cls}"><span>โ›ฝ</span></div></div>`,
+        iconSize: [38, 38],
+        iconAnchor: [19, 38],
+        popupAnchor: [0, -40]
+    });
+}
+
+const spbuGreenIcon = makeSpbuIcon(true);
+const spbuRedIcon   = makeSpbuIcon(false);
+
+let isDrawingMode = false; // Akan diset true saat draw mode aktif (jalan/parsil)
+
+
+// Fetch SPBU
+function loadSpbu() {
+    spbuLayer.clearLayers();
+    fetch('../spbu/read.php')
+        .then(res => res.json())
+        .then(data => {
+            if (data.status === 'success' && data.data) {
+                data.data.forEach(item => {
+                    addSpbuMarker(item);
+                });
+            }
+            if (window.refreshActivePanel) window.refreshActivePanel();
+        });
+}
+
+function addSpbuMarker(item) {
+    const isAdmin = !!(window.currentUser && window.currentUser.role === 'admin');
+    const icon = makeSpbuIcon(item.is_24_jam);
+    const marker = L.marker([item.lat, item.lng], {
+        icon: icon,
+        draggable: isAdmin
+    });
+
+    marker.spbuData = item; // Simpan data di objek marker
+
+    // Hitung popupContent sekali saat marker dibuat
+    const d = item;
+    let actionButtons = '';
+    if (isAdmin) {
+        actionButtons = `
+            <div style="display:flex; gap:5px;">
+                <button style="padding:4px 8px; background:#007bff; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="openEditSpbuModal(${d.id})">Edit</button>
+                <button style="padding:4px 8px; background:#dc3545; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="deleteSpbu(${d.id})">Hapus</button>
+            </div>
+        `;
+    }
+    const popupContent = `
+        <div style="font-family: Arial, sans-serif; min-width: 150px;">
+            <h4 style="margin:0 0 5px 0;">SPBU ${d.nama}</h4>
+            <p style="margin: 0 0 5px 0;"><b>No. WA:</b> ${d.no_wa}</p>
+            <p style="margin: 0 0 10px 0;"><b>Buka 24 Jam:</b> ${d.is_24_jam ? 'Ya' : 'Tidak'}</p>
+            ${actionButtons}
+        </div>
+    `;
+    marker.bindPopup(popupContent);
+
+    // Event drag untuk update koordinat
+    marker.on('dragend', function(e) {
+        const newPos = marker.getLatLng();
+        updateSpbu(item.id, item.nama, item.no_wa, item.is_24_jam, newPos.lat, newPos.lng);
+    });
+
+    spbuLayer.addLayer(marker);
+}
+
+// Map Click -> Form Add
+map.on('click', function(e) {
+    if (isDrawingMode) return; // Jangan muncul form jika sedang gambar garis/polygon
+    
+    // Hanya proses jika mode tambah SPBU aktif
+    if (window.currentAddMode === 'spbu') {
+        const bodyHTML = `
+            <div class="form-group">
+                <label>Lat: ${e.latlng.lat.toFixed(6)}, Lng: ${e.latlng.lng.toFixed(6)}</label>
+            </div>
+            <div class="form-group">
+                <label>Nama SPBU</label>
+                <input type="text" id="modalSpbuNama" placeholder="Nama SPBU">
+            </div>
+            <div class="form-group">
+                <label>No. WA</label>
+                <input type="text" id="modalSpbuWa" placeholder="No. WA">
+            </div>
+            <div class="form-group">
+                <label>Buka 24 Jam?</label>
+                <div class="radio-group" style="margin-top:5px;">
+                    <label><input type="radio" name="modalSpbu24" value="1"> Ya</label>
+                    <label><input type="radio" name="modalSpbu24" value="0" checked> Tidak</label>
+                </div>
+            </div>
+        `;
+
+        openModal("Tambah SPBU Baru", bodyHTML, function() {
+            window.saveNewSpbu(e.latlng.lat, e.latlng.lng, 'modalSpbuNama', 'modalSpbuWa', 'modalSpbu24');
+        });
+
+        // Nonaktifkan mode tambah setelah modal muncul
+        window.deactivateAddMode();
+    }
+});
+
+window.saveNewSpbu = function(lat, lng, namaId, waId, radioName) {
+    const nama = document.getElementById(namaId).value;
+    if (!nama) {
+        alert("Nama SPBU harus diisi!");
+        return;
+    }
+    const no_wa = document.getElementById(waId).value;
+    const is_24_jam = document.querySelector(`input[name="${radioName}"]:checked`).value;
+
+    fetch('../spbu/create.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ nama, no_wa, is_24_jam, lat, lng })
+    })
+    .then(res => res.json())
+    .then(data => {
+        if(data.status === 'success') {
+            closeModal();
+            loadSpbu();
+        } else {
+            alert(data.message);
+        }
+    });
+};
+
+window.openEditSpbuModal = function(id) {
+    let d = null;
+    spbuLayer.eachLayer(function(layer) {
+        if (layer.spbuData && layer.spbuData.id == id) d = layer.spbuData;
+    });
+    if (!d) return;
+
+    const bodyHTML = `
+        <div class="form-group">
+            <label>Nama SPBU</label>
+            <input type="text" id="editSpbuNama" value="${d.nama}">
+        </div>
+        <div class="form-group">
+            <label>No. WA</label>
+            <input type="text" id="editSpbuWa" value="${d.no_wa}">
+        </div>
+        <div class="form-group">
+            <label>Buka 24 Jam?</label>
+            <div class="radio-group" style="margin-top:5px;">
+                <label><input type="radio" name="editSpbu24" value="1" ${d.is_24_jam ? 'checked' : ''}> Ya</label>
+                <label><input type="radio" name="editSpbu24" value="0" ${!d.is_24_jam ? 'checked' : ''}> Tidak</label>
+            </div>
+        </div>
+    `;
+    map.closePopup();
+    openModal("Edit SPBU", bodyHTML, function() {
+        window.saveEditSpbu(d.id, d.lat, d.lng, 'editSpbuNama', 'editSpbuWa', 'editSpbu24');
+    });
+};
+
+window.saveEditSpbu = function(id, lat, lng, namaId, waId, radioName) {
+    const nama = document.getElementById(namaId).value;
+    const no_wa = document.getElementById(waId).value;
+    const is_24_jam = document.querySelector(`input[name="${radioName}"]:checked`).value;
+
+    updateSpbu(id, nama, no_wa, is_24_jam, lat, lng);
+};
+
+function updateSpbu(id, nama, no_wa, is_24_jam, lat, lng) {
+    fetch('../spbu/update.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id, nama, no_wa, is_24_jam, lat, lng })
+    })
+    .then(res => res.json())
+    .then(data => {
+        if(data.status === 'success') {
+            map.closePopup();
+            closeModal();
+            loadSpbu();
+        } else {
+            alert(data.message);
+        }
+    });
+}
+
+window.deleteSpbu = function(id) {
+    openConfirmModal("Yakin hapus SPBU ini?", function() {
+        fetch('../spbu/delete.php', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ id })
+        })
+        .then(res => res.json())
+        .then(data => {
+            if(data.status === 'success') {
+                map.closePopup();
+                loadSpbu();
+            } else {
+                alert(data.message);
+            }
+        });
+    });
+};
+
+// Initial Load
+loadSpbu();
+
diff --git a/spbu/assets/js/map.js b/spbu/assets/js/map.js
new file mode 100644
index 0000000..db153cc
--- /dev/null
+++ b/spbu/assets/js/map.js
@@ -0,0 +1,259 @@
+// Inisialisasi Peta
+const map = L.map('map', { zoomControl: false }).setView([-0.0263, 109.3425], 13);
+
+// ===== Toast Notification =====
+window.showToast = function(message, type = 'success', duration = 3500) {
+    const icons = { success: 'โœ…', error: 'โŒ', info: 'โ„น๏ธ', warning: 'โš ๏ธ' };
+    const container = document.getElementById('toastContainer');
+    if (!container) return;
+
+    const toast = document.createElement('div');
+    toast.className = `toast toast-${type}`;
+    toast.innerHTML = `<span class="toast-icon">${icons[type] || 'โ„น๏ธ'}</span><span>${message}</span>`;
+    container.appendChild(toast);
+
+    setTimeout(() => {
+        toast.classList.add('hiding');
+        toast.addEventListener('animationend', () => toast.remove());
+    }, duration);
+};
+
+// Custom Zoom Control Logic
+document.getElementById('zoomInBtn').addEventListener('click', function() { map.zoomIn(); });
+document.getElementById('zoomOutBtn').addEventListener('click', function() { map.zoomOut(); });
+
+// Base Map dari OpenStreetMap
+L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+}).addTo(map);
+
+// Inisialisasi FeatureGroups untuk masing-masing layer
+const spbuLayer = L.featureGroup().addTo(map);
+const jalanLayer = L.featureGroup().addTo(map);
+const parsilLayer = L.featureGroup().addTo(map);
+const rumahIbadahLayer = L.featureGroup().addTo(map);
+const pendudukMiskinLayer = L.featureGroup().addTo(map);
+const geoJsonLayer = L.featureGroup().addTo(map);
+
+const searchInput = document.getElementById('searchInput');
+const searchClear = document.getElementById('searchClear');
+
+if (searchInput) {
+    searchInput.addEventListener('focus', function() {
+        if (typeof window.deactivateAddMode === 'function') window.deactivateAddMode();
+    });
+
+    searchInput.addEventListener('input', function() {
+        const val = this.value.toLowerCase();
+        if (val.length > 0) {
+            searchClear.style.visibility = 'visible';
+            window.showSearchResults(val);
+        } else {
+            searchClear.style.visibility = 'hidden';
+            document.getElementById('searchResults').style.display = 'none';
+        }
+    });
+}
+
+if (searchClear) {
+    searchClear.addEventListener('click', function() {
+        searchInput.value = '';
+        searchClear.style.visibility = 'hidden';
+        document.getElementById('searchResults').style.display = 'none';
+        searchInput.focus();
+    });
+}
+
+window.showSearchResults = function(query) {
+    const resultsContainer = document.getElementById('searchResults');
+    if (!resultsContainer) return;
+    resultsContainer.innerHTML = '';
+    let results = [];
+    
+    if (typeof spbuLayer !== 'undefined') {
+        spbuLayer.eachLayer(layer => {
+            if (layer.spbuData && layer.spbuData.nama && layer.spbuData.nama.toLowerCase().includes(query)) {
+                results.push({ type: 'SPBU', nama: layer.spbuData.nama, layer: layer });
+            }
+        });
+    }
+
+    if (typeof jalanLayer !== 'undefined') {
+        jalanLayer.eachLayer(layer => {
+            if (layer.jalanData && layer.jalanData.nama && layer.jalanData.nama.toLowerCase().includes(query)) {
+                results.push({ type: 'Jalan', nama: layer.jalanData.nama, layer: layer });
+            }
+        });
+    }
+
+    if (typeof parsilLayer !== 'undefined') {
+        parsilLayer.eachLayer(layer => {
+            if (layer.parsilData && layer.parsilData.nama && layer.parsilData.nama.toLowerCase().includes(query)) {
+                results.push({ type: 'Parsil', nama: layer.parsilData.nama, layer: layer });
+            }
+        });
+    }
+    
+    if (results.length === 0) {
+        resultsContainer.innerHTML = '<div style="padding: 10px 15px; color: #666; font-size: 14px;">Tidak ada hasil</div>';
+    } else {
+        results.forEach(res => {
+            const item = document.createElement('div');
+            item.style.padding = '10px 15px';
+            item.style.cursor = 'pointer';
+            item.style.borderBottom = '1px solid #eee';
+            item.style.fontSize = '14px';
+            item.innerHTML = `<strong>${res.type}:</strong> ${res.nama}`;
+            item.addEventListener('mouseenter', () => item.style.backgroundColor = '#f8f9fa');
+            item.addEventListener('mouseleave', () => item.style.backgroundColor = 'white');
+            item.addEventListener('click', () => {
+                if (res.layer instanceof L.Marker) {
+                    map.setView(res.layer.getLatLng(), 17);
+                } else if (res.layer.getBounds) {
+                    map.fitBounds(res.layer.getBounds());
+                }
+                res.layer.openPopup();
+                resultsContainer.style.display = 'none';
+            });
+            resultsContainer.appendChild(item);
+        });
+    }
+    resultsContainer.style.display = 'block';
+};
+
+// UI Logic: Custom Layer Control Toggle
+const layerBtn   = document.getElementById('layerBtn');
+const layerPanel = document.getElementById('layerPanel');
+
+if (layerBtn && layerPanel) {
+    layerBtn.addEventListener('click', function() {
+        if (typeof window.deactivateAddMode === 'function') window.deactivateAddMode();
+        layerPanel.style.display = layerPanel.style.display === 'block' ? 'none' : 'block';
+    });
+}
+
+// Sembunyikan layer panel saat klik di peta
+map.on('click', function() {
+    if (layerPanel) layerPanel.style.display = 'none';
+});
+
+// Logic untuk Toggle Layer Visibility
+const setupLayerToggle = (id, layer) => {
+    const el = document.getElementById(id);
+    if (el) {
+        el.addEventListener('change', function(e) {
+            e.target.checked ? map.addLayer(layer) : map.removeLayer(layer);
+        });
+    }
+};
+
+setupLayerToggle('layerSpbu', spbuLayer);
+setupLayerToggle('layerJalan', jalanLayer);
+setupLayerToggle('layerParsil', parsilLayer);
+setupLayerToggle('layerRumahIbadah', rumahIbadahLayer);
+setupLayerToggle('layerMiskin', pendudukMiskinLayer);
+
+// --- Sub-layer Toggle (expand/collapse) ---
+window.toggleSubLayer = function(subId, iconEl) {
+    const sub = document.getElementById(subId);
+    if (!sub) return;
+    const isHidden = sub.style.display === 'none';
+    sub.style.display = isHidden ? '' : 'none';
+    iconEl.classList.toggle('collapsed', !isHidden);
+};
+
+// --- Sub-layer Filter ---
+window.applySubFilter = function(type) {
+    if (type === 'spbu') {
+        const checked = [...document.querySelectorAll('.sub-spbu:checked')].map(el => el.value === '1');
+        spbuLayer.eachLayer(layer => {
+            if (layer.spbuData === undefined) return;
+            if (checked.includes(layer.spbuData.is_24_jam)) {
+                layer.getElement && layer.getElement() && (layer.getElement().style.display = '');
+            } else {
+                layer.getElement && layer.getElement() && (layer.getElement().style.display = 'none');
+            }
+        });
+    } else if (type === 'jalan') {
+        const checked = [...document.querySelectorAll('.sub-jalan:checked')].map(el => el.value);
+        jalanLayer.eachLayer(layer => {
+            if (!layer.jalanData) return;
+            if (checked.includes(layer.jalanData.status)) {
+                layer.getElement && layer.getElement() && (layer.getElement().style.display = '');
+            } else {
+                layer.getElement && layer.getElement() && (layer.getElement().style.display = 'none');
+            }
+        });
+    } else if (type === 'parsil') {
+        const checked = [...document.querySelectorAll('.sub-parsil:checked')].map(el => el.value);
+        parsilLayer.eachLayer(layer => {
+            if (!layer.parsilData) return;
+            if (checked.includes(layer.parsilData.status)) {
+                layer.getElement && layer.getElement() && (layer.getElement().style.display = '');
+            } else {
+                layer.getElement && layer.getElement() && (layer.getElement().style.display = 'none');
+            }
+        });
+    }
+};
+
+// --- Modal Logic ---
+const unifiedModal = document.getElementById('unifiedModal');
+const modalTitle = document.getElementById('modalTitle');
+const modalBody = document.getElementById('modalBody');
+
+window.openModal = function(title, bodyHTML, saveCallback) {
+    if (!unifiedModal) return;
+    modalTitle.textContent = title;
+    modalBody.innerHTML = bodyHTML;
+    unifiedModal.classList.add('show');
+    
+    const currentSaveBtn = document.getElementById('modalSaveBtn');
+    if (currentSaveBtn) {
+        const newSaveBtn = currentSaveBtn.cloneNode(true);
+        currentSaveBtn.parentNode.replaceChild(newSaveBtn, currentSaveBtn);
+        newSaveBtn.addEventListener('click', saveCallback);
+    }
+};
+
+window.closeModal = function() {
+    if (unifiedModal) unifiedModal.classList.remove('show');
+};
+
+const confirmModal = document.getElementById('confirmModal');
+const confirmMessage = document.getElementById('confirmMessage');
+
+window.openConfirmModal = function(msg, confirmCallback) {
+    if (!confirmModal) return;
+    confirmMessage.textContent = msg;
+    confirmModal.classList.add('show');
+    
+    const currentYesBtn = document.getElementById('confirmYesBtn');
+    if (currentYesBtn) {
+        const newYesBtn = currentYesBtn.cloneNode(true);
+        currentYesBtn.parentNode.replaceChild(newYesBtn, currentYesBtn);
+        newYesBtn.addEventListener('click', function() {
+            confirmModal.classList.remove('show');
+            confirmCallback();
+        });
+    }
+};
+
+window.closeConfirmModal = function() {
+    if (confirmModal) confirmModal.classList.remove('show');
+};
+
+window.currentAddMode = null; // 'spbu', 'jalan', 'parsil'
+window.activateAddMode = function(mode) {
+    if (window.currentAddMode === mode) {
+        window.deactivateAddMode();
+        return;
+    }
+    window.currentAddMode = mode;
+    document.getElementById('map').style.cursor = 'crosshair';
+};
+
+window.deactivateAddMode = function() {
+    window.currentAddMode = null;
+    document.getElementById('map').style.cursor = '';
+};
diff --git a/spbu/assets/js/panel.js b/spbu/assets/js/panel.js
new file mode 100644
index 0000000..1aa68d6
--- /dev/null
+++ b/spbu/assets/js/panel.js
@@ -0,0 +1,270 @@
+// ===== Panel Management =====
+// Mengelola Left Sidebar Toggle + Right Panel + Layer Control
+
+(function () {
+    // ---- State ----
+    let activePanel = null;
+
+    // ---- Elements ----
+    const sidebarToggleBtn  = document.getElementById('sidebarToggleBtn');
+    const sidebarToggleIcon = document.getElementById('sidebarToggleIcon');
+    const leftSidebar       = document.getElementById('leftSidebar');
+    const rightPanel        = document.getElementById('rightPanel');
+    const rightPanelTitle   = document.getElementById('rightPanelTitle');
+    const rightPanelActions = document.getElementById('rightPanelActions');
+    const rightPanelBody    = document.getElementById('rightPanelBody');
+    const rightPanelClose   = document.getElementById('rightPanelClose');
+
+    // ---- Sidebar Toggle ----
+    if (sidebarToggleBtn) {
+        sidebarToggleBtn.addEventListener('click', function () {
+            const isOpen = leftSidebar.style.display !== 'none';
+            if (isOpen) {
+                leftSidebar.style.display = 'none';
+                sidebarToggleBtn.classList.remove('open');
+                sidebarToggleIcon.className = 'fas fa-chevron-right';
+            } else {
+                leftSidebar.style.display = 'flex';
+                sidebarToggleBtn.classList.add('open');
+                sidebarToggleIcon.className = 'fas fa-chevron-left';
+            }
+        });
+    }
+
+    // ---- Sidebar Buttons ----
+    document.querySelectorAll('.sidebar-btn').forEach(btn => {
+        btn.addEventListener('click', function () {
+            const panel = this.dataset.panel;
+            if (activePanel === panel) {
+                closePanel();
+            } else {
+                openPanel(panel);
+            }
+        });
+    });
+
+    if (rightPanelClose) {
+        rightPanelClose.addEventListener('click', closePanel);
+    }
+
+    // ---- Open / Close Panel ----
+    function openPanel(panel) {
+        if (typeof window.deactivateAddMode === 'function') window.deactivateAddMode();
+        activePanel = panel;
+        rightPanel.classList.add('open');
+        document.body.classList.add('right-panel-open');
+        document.querySelectorAll('.sidebar-btn').forEach(b => b.classList.remove('active'));
+        const activeBtn = document.querySelector(`.sidebar-btn[data-panel="${panel}"]`);
+        if (activeBtn) activeBtn.classList.add('active');
+        renderPanel(panel);
+    }
+
+    function closePanel() {
+        if (typeof window.deactivateAddMode === 'function') window.deactivateAddMode();
+        activePanel = null;
+        rightPanel.classList.remove('open');
+        document.body.classList.remove('right-panel-open');
+        document.querySelectorAll('.sidebar-btn').forEach(b => b.classList.remove('active'));
+    }
+
+    window.refreshActivePanel = function () {
+        if (activePanel && activePanel !== 'layer') renderPanel(activePanel);
+    };
+
+    // ---- Render Panel by Type ----
+    function renderPanel(type) {
+        rightPanelBody.innerHTML = '<div class="panel-empty">Memuat data...</div>';
+        rightPanelActions.innerHTML = '';
+
+        switch (type) {
+            case 'spbu': renderSpbuPanel(); break;
+            case 'jalan': renderJalanPanel(); break;
+            case 'parsil': renderParsilPanel(); break;
+        }
+    }
+
+    // ==========================
+    // ===== SPBU Panel =======
+    // ==========================
+    function renderSpbuPanel() {
+        rightPanelTitle.textContent = 'โ›ฝ Daftar SPBU';
+        const isAdmin = !!(window.currentUser && window.currentUser.role === 'admin');
+        if (isAdmin) {
+            rightPanelActions.innerHTML = `
+                <button class="btn-panel-add" id="btnPanelAddSpbu">
+                    <i class="fas fa-plus"></i> Tambah SPBU
+                </button>`;
+            document.getElementById('btnPanelAddSpbu').addEventListener('click', () => {
+                window.activateAddMode('spbu');
+            });
+        }
+
+        const items = [];
+        spbuLayer.eachLayer(l => {
+            if (l.spbuData) items.push(l.spbuData);
+        });
+
+        if (!items.length) {
+            rightPanelBody.innerHTML = '<div class="panel-empty">Belum ada data SPBU</div>';
+            return;
+        }
+
+        rightPanelBody.innerHTML = '';
+        items.forEach(d => {
+            const card  = document.createElement('div');
+            card.className = 'data-card';
+            let actionButtons = '';
+            if (isAdmin) {
+                actionButtons = `
+                    <div class="data-card-actions">
+                        <button class="btn-card-action btn-card-edit"   title="Edit"><i class="fas fa-pen"></i></button>
+                        <button class="btn-card-action btn-card-delete" title="Hapus"><i class="fas fa-trash"></i></button>
+                    </div>
+                `;
+            }
+            card.innerHTML = `
+                <div class="data-card-main">
+                    <div class="data-card-icon" style="background:#fef3c7; color:#d97706; padding:8px; border-radius:8px; font-size:18px;">โ›ฝ</div>
+                    <div class="data-card-info">
+                        <div class="data-card-name">${escHtml(d.nama)}</div>
+                        <div class="data-card-sub">๐Ÿ“ž ${escHtml(d.no_wa || '-')} โ€ข ๐Ÿ• ${d.is_24_jam ? '24 Jam' : 'Tidak 24 Jam'}</div>
+                    </div>
+                    ${actionButtons}
+                </div>`;
+            if (isAdmin) {
+                card.querySelector('.btn-card-edit').addEventListener('click',   (e) => { e.stopPropagation(); window.openEditSpbuModal(d.id); });
+                card.querySelector('.btn-card-delete').addEventListener('click', (e) => { e.stopPropagation(); window.deleteSpbu(d.id); });
+            }
+            card.addEventListener('click', () => {
+                spbuLayer.eachLayer(l => {
+                    if (l.spbuData && l.spbuData.id == d.id) {
+                        map.setView(l.getLatLng(), 17); l.openPopup();
+                    }
+                });
+            });
+            rightPanelBody.appendChild(card);
+        });
+    }
+
+    // ==========================
+    // ===== Jalan Panel =======
+    // ==========================
+    function renderJalanPanel() {
+        rightPanelTitle.textContent = '๐Ÿ›ฃ๏ธ Daftar Jalan';
+        const isAdmin = !!(window.currentUser && window.currentUser.role === 'admin');
+        
+        rightPanelActions.innerHTML = '';
+
+        const items = [];
+        jalanLayer.eachLayer(l => {
+            if (l.jalanData) items.push(l.jalanData);
+        });
+
+        if (!items.length) {
+            rightPanelBody.innerHTML = '<div class="panel-empty">Belum ada data Jalan</div>';
+            return;
+        }
+
+        rightPanelBody.innerHTML = '';
+        items.forEach(d => {
+            const card  = document.createElement('div');
+            card.className = 'data-card';
+            let actionButtons = '';
+            if (isAdmin) {
+                actionButtons = `
+                    <div class="data-card-actions">
+                        <button class="btn-card-action btn-card-edit"   title="Edit"><i class="fas fa-pen"></i></button>
+                        <button class="btn-card-action btn-card-delete" title="Hapus"><i class="fas fa-trash"></i></button>
+                    </div>
+                `;
+            }
+            card.innerHTML = `
+                <div class="data-card-main">
+                    <div class="data-card-icon" style="background:#e0e7ff; color:#4f46e5; padding:8px; border-radius:8px; font-size:18px;">๐Ÿ›ฃ๏ธ</div>
+                    <div class="data-card-info">
+                        <div class="data-card-name">${escHtml(d.nama)}</div>
+                        <div class="data-card-sub">๐Ÿ“ ${d.panjang.toFixed(2)} m โ€ข ๐Ÿท๏ธ ${escHtml(d.status)}</div>
+                    </div>
+                    ${actionButtons}
+                </div>`;
+            if (isAdmin) {
+                card.querySelector('.btn-card-edit').addEventListener('click',   (e) => { e.stopPropagation(); window.openEditJalanModal(d.id); });
+                card.querySelector('.btn-card-delete').addEventListener('click', (e) => { e.stopPropagation(); window.deleteJalan(d.id); });
+            }
+            card.addEventListener('click', () => {
+                jalanLayer.eachLayer(l => {
+                    if (l.jalanData && l.jalanData.id == d.id) {
+                        map.fitBounds(l.getBounds()); l.openPopup();
+                    }
+                });
+            });
+            rightPanelBody.appendChild(card);
+        });
+    }
+
+    // ==========================
+    // ===== Parsil Panel =======
+    // ==========================
+    function renderParsilPanel() {
+        rightPanelTitle.textContent = '๐Ÿ—บ๏ธ Daftar Parsil Tanah';
+        const isAdmin = !!(window.currentUser && window.currentUser.role === 'admin');
+        
+        rightPanelActions.innerHTML = '';
+
+        const items = [];
+        parsilLayer.eachLayer(l => {
+            if (l.parsilData) items.push(l.parsilData);
+        });
+
+        if (!items.length) {
+            rightPanelBody.innerHTML = '<div class="panel-empty">Belum ada data Parsil</div>';
+            return;
+        }
+
+        rightPanelBody.innerHTML = '';
+        items.forEach(d => {
+            const card  = document.createElement('div');
+            card.className = 'data-card';
+            let actionButtons = '';
+            if (isAdmin) {
+                actionButtons = `
+                    <div class="data-card-actions">
+                        <button class="btn-card-action btn-card-edit"   title="Edit"><i class="fas fa-pen"></i></button>
+                        <button class="btn-card-action btn-card-delete" title="Hapus"><i class="fas fa-trash"></i></button>
+                    </div>
+                `;
+            }
+            card.innerHTML = `
+                <div class="data-card-main">
+                    <div class="data-card-icon" style="background:#d1fae5; color:#059669; padding:8px; border-radius:8px; font-size:18px;">๐Ÿ—บ๏ธ</div>
+                    <div class="data-card-info">
+                        <div class="data-card-name">${escHtml(d.nama || 'Tanpa Nama')}</div>
+                        <div class="data-card-sub">๐Ÿ“ ${d.luas.toFixed(2)} mยฒ โ€ข ๐Ÿท๏ธ ${escHtml(d.status)}</div>
+                    </div>
+                    ${actionButtons}
+                </div>`;
+            if (isAdmin) {
+                card.querySelector('.btn-card-edit').addEventListener('click',   (e) => { e.stopPropagation(); window.openEditParsilModal(d.id); });
+                card.querySelector('.btn-card-delete').addEventListener('click', (e) => { e.stopPropagation(); window.deleteParsil(d.id); });
+            }
+            card.addEventListener('click', () => {
+                parsilLayer.eachLayer(l => {
+                    if (l.parsilData && l.parsilData.id == d.id) {
+                        map.fitBounds(l.getBounds()); l.openPopup();
+                    }
+                });
+            });
+            rightPanelBody.appendChild(card);
+        });
+    }
+
+    // ---- Utility ----
+    function escHtml(str) {
+        if (!str) return '';
+        return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+    }
+
+    // ---- Expose ----
+    window.openRightPanel = openPanel;
+
+})();
diff --git a/spbu/create.php b/spbu/create.php
new file mode 100644
index 0000000..225f9fb
--- /dev/null
+++ b/spbu/create.php
@@ -0,0 +1,26 @@
+<?php
+header("Content-Type: application/json; charset=UTF-8");
+require_once '../auth_helper.php';
+requireAdmin();
+include_once '../db_connect.php';
+
+$data = json_decode(file_get_contents("php://input"));
+
+if(!empty($data->lat) && !empty($data->lng)) {
+    $nama = $conn->real_escape_string($data->nama ?? '');
+    $no_wa = $conn->real_escape_string($data->no_wa ?? '');
+    $is_24_jam = isset($data->is_24_jam) ? (int)$data->is_24_jam : 0;
+    $lat = (float)$data->lat;
+    $lng = (float)$data->lng;
+
+    $query = "INSERT INTO spbu (nama, no_wa, is_24_jam, lat, lng) VALUES ('$nama', '$no_wa', $is_24_jam, $lat, $lng)";
+
+    if($conn->query($query)) {
+        echo json_encode(["status" => "success", "id" => $conn->insert_id, "message" => "SPBU berhasil ditambahkan."]);
+    } else {
+        echo json_encode(["status" => "error", "message" => "Gagal menambahkan SPBU: " . $conn->error]);
+    }
+} else {
+    echo json_encode(["status" => "error", "message" => "Data tidak lengkap."]);
+}
+?>
diff --git a/spbu/delete.php b/spbu/delete.php
new file mode 100644
index 0000000..e0afdcf
--- /dev/null
+++ b/spbu/delete.php
@@ -0,0 +1,22 @@
+<?php
+header("Content-Type: application/json; charset=UTF-8");
+require_once '../auth_helper.php';
+requireAdmin();
+include_once '../db_connect.php';
+
+$data = json_decode(file_get_contents("php://input"));
+
+if(!empty($data->id)) {
+    $id = (int)$data->id;
+
+    $query = "DELETE FROM spbu WHERE id=$id";
+
+    if($conn->query($query)) {
+        echo json_encode(["status" => "success", "message" => "SPBU berhasil dihapus."]);
+    } else {
+        echo json_encode(["status" => "error", "message" => "Gagal hapus SPBU: " . $conn->error]);
+    }
+} else {
+    echo json_encode(["status" => "error", "message" => "ID tidak diberikan."]);
+}
+?>
diff --git a/spbu/index.php b/spbu/index.php
new file mode 100644
index 0000000..2c74118
--- /dev/null
+++ b/spbu/index.php
@@ -0,0 +1,388 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WebGIS Pemetaan Jaringan Jalan</title>
+    
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400;500;600;700&display=swap" rel="stylesheet">
+    
+    <!-- FontAwesome (Icons) -->
+    <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="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+    
+    <!-- Leaflet Draw CSS -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
+
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="assets/css/style.css">
+</head>
+<body>
+
+    <!-- UI Container over map -->
+    <div class="ui-container">
+        <!-- Search Bar -->
+        <div class="search-bar">
+            <div class="search-icon">
+                <i class="fas fa-search"></i>
+            </div>
+            <input type="text" class="search-input" id="searchInput" placeholder="Cari SPBU, jalan, parsil, rumah ibadah...">
+            <button class="search-clear" id="searchClear">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+        <!-- Search Results -->
+        <div id="searchResults" style="display: none; background: white; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); max-height: 200px; overflow-y: auto;">
+        </div>
+    </div>
+
+    <!-- Custom Zoom Control -->
+    <div class="custom-zoom-control" style="position: absolute; top: 20px; left: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 5px;">
+        <button class="custom-layer-btn" id="zoomInBtn" style="position: relative; top: 0; left: 0; right: auto;" title="Zoom In"><i class="fas fa-plus"></i></button>
+        <button class="custom-layer-btn" id="zoomOutBtn" style="position: relative; top: 0; left: 0; right: auto;" title="Zoom Out"><i class="fas fa-minus"></i></button>
+    </div>
+
+    <!-- Sidebar Toggle Button -->
+    <button class="sidebar-toggle-btn" id="sidebarToggleBtn" title="Menu">
+        <i class="fas fa-chevron-right" id="sidebarToggleIcon"></i>
+    </button>
+
+    <!-- Left Sidebar Menu -->
+    <nav class="left-sidebar" id="leftSidebar" style="display:none;">
+        <div class="sidebar-section-label">Umum</div>
+        <button class="sidebar-btn" id="menuSpbu"   data-panel="spbu"   title="SPBU">
+            <span class="sidebar-emoji">โ›ฝ</span>
+            <span class="sidebar-label">SPBU</span>
+        </button>
+        <button class="sidebar-btn" id="menuJalan"  data-panel="jalan"  title="Jalan">
+            <span class="sidebar-emoji">๐Ÿ›ฃ๏ธ</span>
+            <span class="sidebar-label">Jalan</span>
+        </button>
+        <button class="sidebar-btn" id="menuParsil" data-panel="parsil" title="Parsil Tanah">
+            <span class="sidebar-emoji">๐Ÿ—บ๏ธ</span>
+            <span class="sidebar-label">Parsil</span>
+        </button>
+        
+    </nav>
+
+
+
+    <!-- Custom Layer Control Button -->
+    <button class="custom-layer-btn" id="layerBtn" title="Atur Layer">
+        <i class="fas fa-layer-group fa-lg"></i>
+    </button>
+
+    <div>
+        <!-- Custom Layer Control Panel -->
+        <div class="custom-layer-panel" id="layerPanel">
+            <h3>Daftar Layer</h3>
+    
+            <div class="layer-section-title">Infrastruktur & Lahan</div>
+    
+            <!-- SPBU -->
+            <div class="layer-group-item">
+                <div class="layer-group-header">
+                    <label class="layer-option" style="margin:0; flex:1;">
+                        <input type="checkbox" id="layerSpbu" checked> SPBU
+                    </label>
+                    <span class="layer-toggle-icon collapsed" onclick="toggleSubLayer('subSpbu', this)"><i class="fas fa-chevron-down"></i></span>
+                </div>
+                <div id="subSpbu" class="sub-layer-list" style="display:none;">
+                    <label class="layer-option sub-option">
+                        <input type="checkbox" class="sub-spbu" value="1" checked onchange="applySubFilter('spbu')"> 24 Jam
+                    </label>
+                    <label class="layer-option sub-option">
+                        <input type="checkbox" class="sub-spbu" value="0" checked onchange="applySubFilter('spbu')"> Tidak 24 Jam
+                    </label>
+                </div>
+            </div>
+    
+            <!-- Jalan -->
+            <div class="layer-group-item">
+                <div class="layer-group-header">
+                    <label class="layer-option" style="margin:0; flex:1;">
+                        <input type="checkbox" id="layerJalan" checked> Jalan
+                    </label>
+                    <span class="layer-toggle-icon collapsed" onclick="toggleSubLayer('subJalan', this)"><i class="fas fa-chevron-down"></i></span>
+                </div>
+                <div id="subJalan" class="sub-layer-list" style="display:none;">
+                    <label class="layer-option sub-option">
+                        <input type="checkbox" class="sub-jalan" value="Nasional" checked onchange="applySubFilter('jalan')"> Nasional
+                    </label>
+                    <label class="layer-option sub-option">
+                        <input type="checkbox" class="sub-jalan" value="Provinsi" checked onchange="applySubFilter('jalan')"> Provinsi
+                    </label>
+                    <label class="layer-option sub-option">
+                        <input type="checkbox" class="sub-jalan" value="Kabupaten" checked onchange="applySubFilter('jalan')"> Kabupaten
+                    </label>
+                </div>
+            </div>
+    
+            <!-- Parsil -->
+            <div class="layer-group-item">
+                <div class="layer-group-header">
+                    <label class="layer-option" style="margin:0; flex:1;">
+                        <input type="checkbox" id="layerParsil" checked> Parsil Tanah
+                    </label>
+                    <span class="layer-toggle-icon collapsed" onclick="toggleSubLayer('subParsil', this)"><i class="fas fa-chevron-down"></i></span>
+                </div>
+                <div id="subParsil" class="sub-layer-list" style="display:none;">
+                    <label class="layer-option sub-option">
+                        <input type="checkbox" class="sub-parsil" value="SHM" checked onchange="applySubFilter('parsil')"> SHM
+                    </label>
+                    <label class="layer-option sub-option">
+                        <input type="checkbox" class="sub-parsil" value="HGB" checked onchange="applySubFilter('parsil')"> HGB
+                    </label>
+                    <label class="layer-option sub-option">
+                        <input type="checkbox" class="sub-parsil" value="HGU" checked onchange="applySubFilter('parsil')"> HGU
+                    </label>
+                    <label class="layer-option sub-option">
+                        <input type="checkbox" class="sub-parsil" value="HP"  checked onchange="applySubFilter('parsil')"> HP
+                    </label>
+                </div>
+            </div>
+    
+
+    
+            <!-- GeoJSON Eksternal -->
+            <div class="layer-group" style="margin-top: 10px; border-top: 1px solid #eee; padding-top: 10px;">
+                <div class="layer-group-header" onclick="window.toggleGeoJsonMenu()" style="cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-size:14px; margin-bottom:8px; font-weight: 500;">
+                    <span><i class="fas fa-folder"></i> GeoJSON Eksternal</span>
+                    <i id="geoJsonToggleIcon" class="fas fa-plus"></i>
+                </div>
+                <div id="geoJsonFileList" style="display:none; padding-left:15px; margin-bottom:10px;">
+                    <div id="geoJsonLayersContainer"></div>
+                    <div style="margin-top: 10px; padding-top: 10px; border-top: 1px dashed #ddd;">
+                        <label style="font-size: 12px; display:block; margin-bottom: 5px;">Import GeoJSON Baru:</label>
+                        <input type="file" id="fileGeoJson" accept=".geojson,.json" style="font-size: 12px; max-width: 100%;">
+                    </div>
+                </div>
+            </div>
+        </div><!-- /custom-layer-panel -->
+
+        <!-- Right Data Panel -->
+        <div class="right-panel" id="rightPanel">
+            <div class="right-panel-header">
+                <h3 id="rightPanelTitle">Data</h3>
+                <button class="right-panel-close" id="rightPanelClose"><i class="fas fa-times"></i></button>
+            </div>
+            <div class="right-panel-actions" id="rightPanelActions"></div>
+            <div class="right-panel-body" id="rightPanelBody">
+                <div class="panel-empty">Pilih menu di kiri untuk menampilkan data</div>
+            </div>
+        </div><!-- /right-panel -->
+    </div>
+
+
+
+    <!-- Map Container -->
+    <div id="map"></div>
+
+    <!-- Unified Modal -->
+    <div id="unifiedModal" class="unified-modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3 id="modalTitle">Judul Form</h3>
+                <span class="modal-close" onclick="closeModal()">&times;</span>
+            </div>
+            <div class="modal-body" id="modalBody">
+                <!-- Konten dinamis -->
+            </div>
+            <div class="modal-footer" id="modalFooter">
+                <button id="modalSaveBtn" class="btn-save">Simpan</button>
+                <button class="btn-cancel" onclick="closeModal()">Batal</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Confirm Modal -->
+    <div id="confirmModal" class="unified-modal">
+        <div class="modal-content" style="width: 300px;">
+            <div class="modal-header">
+                <h3>Konfirmasi</h3>
+            </div>
+            <div class="modal-body">
+                <p id="confirmMessage"></p>
+            </div>
+            <div class="modal-footer" style="display: flex; gap: 10px; justify-content: flex-end;">
+                <button id="confirmYesBtn" class="btn-save" style="background-color: #dc3545;">Ya, Hapus</button>
+                <button class="btn-cancel" onclick="closeConfirmModal()">Batal</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Log Bantuan Modal -->
+    <div id="logBantuanModal" class="unified-modal">
+        <div class="modal-content" style="width:500px; max-height:85vh; overflow:hidden; display:flex; flex-direction:column;">
+            <div class="modal-header">
+                <h3 id="logBantuanTitle">Log Bantuan</h3>
+                <span class="modal-close" onclick="closeLogBantuanModal()">&times;</span>
+            </div>
+            <div class="modal-body" style="flex:1; overflow-y:auto; gap:0; padding:0;">
+                <!-- Riwayat -->
+                <div style="padding:15px; border-bottom:1px solid #eee;">
+                    <h4 style="font-size:13px; font-weight:600; color:#555; margin-bottom:10px;">Riwayat Bantuan</h4>
+                    <div id="logBantuanList" style="max-height:220px; overflow-y:auto; display:flex; flex-direction:column; gap:8px;">
+                        <div class="panel-empty" style="padding:20px;">Belum ada riwayat</div>
+                    </div>
+                </div>
+                <!-- Form Tambah -->
+                <div style="padding:15px;">
+                    <h4 style="font-size:13px; font-weight:600; color:#555; margin-bottom:10px;">Tambah Log Bantuan</h4>
+                    <div class="form-group">
+                        <label>Rumah Ibadah</label>
+                        <select id="logIbadahId"></select>
+                    </div>
+                    <div class="form-group">
+                        <label>Tipe Bantuan</label>
+                        <select id="logTipeBantuan">
+                            <option value="Sembako">Sembako</option>
+                            <option value="Uang Tunai">Uang Tunai</option>
+                            <option value="Pakaian">Pakaian</option>
+                            <option value="Pendidikan">Pendidikan</option>
+                            <option value="Kesehatan">Kesehatan</option>
+                            <option value="Lainnya">Lainnya</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label>Tanggal</label>
+                        <input type="date" id="logTanggal">
+                    </div>
+                    <div class="form-group">
+                        <label>Keterangan (opsional)</label>
+                        <textarea id="logKeterangan" rows="2" placeholder="Catatan tambahan..."></textarea>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button class="btn-save" id="logSaveBtn">Simpan Log</button>
+                <button class="btn-cancel" onclick="closeLogBantuanModal()">Tutup</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Floating Profile / Auth Control -->
+    <div id="authWidget" class="auth-widget">
+        <button class="btn-login" id="authLoginBtn"><i class="fas fa-sign-in-alt"></i> Login</button>
+    </div>
+
+    <!-- Login Modal -->
+    <div id="loginModal" class="unified-modal">
+        <div class="modal-content" style="width: 360px;">
+            <div class="modal-header">
+                <h3>Login Ke Sistem</h3>
+                <span class="modal-close" id="closeLoginModal">&times;</span>
+            </div>
+            <div class="modal-body">
+                <div class="form-group">
+                    <label for="loginUsername">Username</label>
+                    <input type="text" id="loginUsername" placeholder="Masukkan username">
+                </div>
+                <div class="form-group">
+                    <label for="loginPassword">Password</label>
+                    <input type="password" id="loginPassword" placeholder="Masukkan password">
+                </div>
+                <div id="loginErrorMsg" style="display:none; color:#ef4444; font-size:12px; font-weight:500;"></div>
+            </div>
+            <div class="modal-footer">
+                <button id="loginSubmitBtn" class="btn-save" style="width: 100%;">Masuk</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- User Management Modal -->
+    <div id="userManagementModal" class="unified-modal">
+        <div class="modal-content" style="width: 700px; max-width: 95%;">
+            <div class="modal-header">
+                <h3>Manajemen Pengguna (Admin)</h3>
+                <span class="modal-close" id="closeUserManagementModal">&times;</span>
+            </div>
+            <div class="modal-body" style="gap: 15px;">
+                <!-- Form Tambah/Edit User -->
+                <div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 10px;">
+                    <h4 id="userFormTitle" style="font-size: 13px; font-weight:700; color:#334155; margin-bottom: 2px;">Tambah User Baru</h4>
+                    <input type="hidden" id="manageUserId" value="">
+                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
+                        <div class="form-group">
+                            <label>Username</label>
+                            <input type="text" id="manageUsername" placeholder="Username">
+                        </div>
+                        <div class="form-group">
+                            <label>Password (Kosongkan jika tidak diubah)</label>
+                            <input type="password" id="managePassword" placeholder="Password">
+                        </div>
+                    </div>
+                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
+                        <div class="form-group">
+                            <label>Role</label>
+                            <select id="manageRole">
+                                <option value="pengelola" selected>Pengelola Rumah Ibadah</option>
+                                <option value="admin">Admin</option>
+                            </select>
+                        </div>
+                        <div class="form-group" id="manageIbadahGroup">
+                            <label>Rumah Ibadah yang Dikelola</label>
+                            <select id="manageIbadahId">
+                                <!-- Dikonstruksi dinamis dari data rumah ibadah -->
+                            </select>
+                        </div>
+                    </div>
+                    <div style="display: flex; gap: 8px; justify-content: flex-end; margin-top: 5px;">
+                        <button id="btnCancelUserEdit" class="btn-cancel" style="padding: 6px 12px; display:none;">Batal</button>
+                        <button id="btnSaveUser" class="btn-save" style="padding: 6px 16px;">Simpan User</button>
+                    </div>
+                </div>
+                
+                <!-- Tabel Daftar User -->
+                <div style="max-height: 200px; overflow-y: auto; border: 1px solid #cbd5e1; border-radius: 8px;">
+                    <table style="width: 100%; border-collapse: collapse; font-size: 13px; text-align: left;">
+                        <thead>
+                           <tr style="background: #f1f5f9; border-bottom: 1px solid #cbd5e1; color:#475569; position: sticky; top: 0; z-index: 10;">
+                               <th style="padding: 10px 12px;">Username</th>
+                               <th style="padding: 10px 12px;">Role</th>
+                               <th style="padding: 10px 12px;">Rumah Ibadah</th>
+                               <th style="padding: 10px 12px; text-align: center;">Aksi</th>
+                           </tr>
+                        </thead>
+                        <tbody id="userTableBody">
+                            <!-- Diisi dinamis -->
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Toast Notification Container -->
+    <div id="toastContainer"></div>
+
+    <!-- Leaflet JS -->
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+    
+    <!-- Leaflet Draw JS -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
+
+    <!-- Leaflet TextPath JS (untuk teks diagonal) -->
+    <script src="https://cdn.jsdelivr.net/npm/leaflet-textpath@1.2.3/leaflet.textpath.min.js"></script>
+
+    <!-- Main Map Initialization -->
+    <script src="assets/js/map.js?v=<?= time() ?>"></script>
+    <!-- Fitur & Komponen -->
+    <script src="assets/js/features/spbu.js?v=<?= time() ?>"></script>
+    <script src="assets/js/features/jalan.js?v=<?= time() ?>"></script>
+    <script src="assets/js/features/parsil.js?v=<?= time() ?>"></script>
+    <script src="assets/js/features/draw_control.js?v=<?= time() ?>"></script>
+    <script src="assets/js/features/geolocation.js?v=<?= time() ?>"></script>
+
+    <script src="assets/js/features/geojson.js?v=<?= time() ?>"></script>
+    <script src="assets/js/panel.js?v=<?= time() ?>"></script>
+    
+    <!-- Core Auth Feature -->
+    <script src="assets/js/features/auth.js?v=<?= time() ?>"></script>
+    
+</body>
+</html>
diff --git a/spbu/read.php b/spbu/read.php
new file mode 100644
index 0000000..942d823
--- /dev/null
+++ b/spbu/read.php
@@ -0,0 +1,26 @@
+<?php
+header("Content-Type: application/json; charset=UTF-8");
+include_once '../db_connect.php';
+
+$query = "SELECT * FROM spbu";
+$result = $conn->query($query);
+
+$spbu_arr = array();
+
+if($result->num_rows > 0) {
+    while($row = $result->fetch_assoc()) {
+        $spbu_item = array(
+            "id" => $row['id'],
+            "nama" => $row['nama'],
+            "no_wa" => $row['no_wa'],
+            "is_24_jam" => (bool)$row['is_24_jam'],
+            "lat" => (float)$row['lat'],
+            "lng" => (float)$row['lng']
+        );
+        array_push($spbu_arr, $spbu_item);
+    }
+    echo json_encode(["status" => "success", "data" => $spbu_arr]);
+} else {
+    echo json_encode(["status" => "success", "data" => []]);
+}
+?>
diff --git a/spbu/update.php b/spbu/update.php
new file mode 100644
index 0000000..83e5fb9
--- /dev/null
+++ b/spbu/update.php
@@ -0,0 +1,27 @@
+<?php
+header("Content-Type: application/json; charset=UTF-8");
+require_once '../auth_helper.php';
+requireAdmin();
+include_once '../db_connect.php';
+
+$data = json_decode(file_get_contents("php://input"));
+
+if(!empty($data->id) && !empty($data->lat) && !empty($data->lng)) {
+    $id = (int)$data->id;
+    $nama = $conn->real_escape_string($data->nama ?? '');
+    $no_wa = $conn->real_escape_string($data->no_wa ?? '');
+    $is_24_jam = isset($data->is_24_jam) ? (int)$data->is_24_jam : 0;
+    $lat = (float)$data->lat;
+    $lng = (float)$data->lng;
+
+    $query = "UPDATE spbu SET nama='$nama', no_wa='$no_wa', is_24_jam=$is_24_jam, lat=$lat, lng=$lng WHERE id=$id";
+
+    if($conn->query($query)) {
+        echo json_encode(["status" => "success", "message" => "SPBU berhasil diupdate."]);
+    } else {
+        echo json_encode(["status" => "error", "message" => "Gagal update SPBU: " . $conn->error]);
+    }
+} else {
+    echo json_encode(["status" => "error", "message" => "Data tidak lengkap."]);
+}
+?>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..4411222
--- /dev/null
+++ b/style.css
@@ -0,0 +1,1026 @@
+/* Reset & Base */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body, html {
+    height: 100%;
+    font-family: 'Google Sans Flex', 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    overflow: hidden;
+}
+
+/* Map Container */
+#map {
+    width: 100vw;
+    height: 100vh;
+    z-index: 1;
+}
+
+/* Custom UI Container over Map */
+.ui-container {
+    position: absolute;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1000;
+    width: 100%;
+    max-width: 400px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 0 15px;
+}
+
+/* Search Bar */
+.search-bar {
+    display: flex;
+    align-items: center;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    overflow: hidden;
+    height: 48px;
+    transition: box-shadow 0.3s;
+}
+
+.search-bar:focus-within {
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
+}
+
+.search-icon {
+    padding: 0 15px;
+    color: #666;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.search-input {
+    flex: 1;
+    border: none;
+    outline: none;
+    font-size: 16px;
+    padding: 10px 0;
+    color: #333;
+}
+
+.search-clear {
+    padding: 0 15px;
+    color: #999;
+    cursor: pointer;
+    background: none;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    visibility: hidden;
+}
+
+.search-clear:hover {
+    color: #333;
+}
+
+/* Custom Layer Control Button */
+.custom-layer-btn {
+    background-color: white;
+    border-radius: 8px;
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    cursor: pointer;
+    border: none;
+    color: #333;
+}
+
+.custom-layer-btn:hover {
+    background-color: #f8f9fa;
+}
+
+#layerBtn {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    z-index: 1000;
+    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+body.right-panel-open #layerBtn {
+    right: 340px;
+}
+
+.custom-layer-panel {
+    position: absolute;
+    top: 80px;
+    right: 20px;
+    z-index: 1000;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    padding: 15px;
+    width: 250px;
+    display: none;
+    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+body.right-panel-open .custom-layer-panel {
+    right: 340px;
+}
+
+
+.custom-layer-panel h3 {
+    margin-bottom: 10px;
+    font-size: 16px;
+    border-bottom: 1px solid #eee;
+    padding-bottom: 5px;
+}
+
+.layer-section-title {
+    font-size: 11px;
+    font-weight: 700;
+    color: #6366f1;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 8px;
+    margin-top: 12px;
+    padding-bottom: 2px;
+    border-bottom: 1px dashed #e2e8f0;
+}
+
+.layer-option {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 8px;
+    font-size: 14px;
+}
+
+/* ===== Sidebar Toggle Button ===== */
+.sidebar-toggle-btn {
+    position: absolute;
+    left: 20px;
+    top: 190px;
+    z-index: 1001;
+    border-radius: 8px;
+    width: 48px;
+    height: 48px;
+    background: white;
+    border: none;
+    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #6366f1;
+    font-size: 13px;
+    transition: all 0.2s;
+}
+
+.sidebar-toggle-btn:hover {
+    background: #6366f1;
+    color: white;
+    box-shadow: 0 4px 14px rgba(99,102,241,0.4);
+}
+
+.sidebar-toggle-btn.open {
+    background: #6366f1;
+    color: white;
+}
+
+/* ===== Left Sidebar ===== */
+.left-sidebar {
+    position: absolute;
+    left: 20px;
+    top: 250px; /* di bawah toggle button */
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.sidebar-section-label {
+    font-size: 9px;
+    font-weight: 700;
+    color: #94a3b8;
+    text-transform: uppercase;
+    text-align: center;
+    letter-spacing: 0.8px;
+    margin-top: 6px;
+    margin-bottom: 2px;
+    pointer-events: none;
+    user-select: none;
+}
+
+.sidebar-divider {
+    height: 1px;
+    background: #e2e8f0;
+    margin: 4px 6px;
+}
+
+.sidebar-btn {
+    width: 60px;
+    height: 60px;
+    background: white;
+    border: none;
+    border-radius: 12px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 2px;
+    transition: all 0.2s ease;
+    padding: 6px 4px;
+}
+
+.sidebar-btn:hover {
+    transform: translateX(3px);
+    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
+    background: #f8f9fa;
+}
+
+.sidebar-btn.active {
+    background: linear-gradient(135deg, #6366f1, #4f46e5);
+    color: white;
+    box-shadow: 0 6px 18px rgba(99,102,241,0.4);
+    transform: translateX(4px);
+}
+
+.sidebar-emoji {
+    font-size: 22px;
+    line-height: 1;
+}
+
+.sidebar-label {
+    font-size: 9px;
+    font-weight: 600;
+    letter-spacing: 0.3px;
+    color: #555;
+    text-transform: uppercase;
+}
+
+.sidebar-btn.active .sidebar-label {
+    color: rgba(255,255,255,0.85);
+}
+
+/* ===== Right Panel ===== */
+.right-panel {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 320px;
+    background: #f8f9fb;
+    z-index: 999;
+    box-shadow: -4px 0 20px rgba(0,0,0,0.12);
+    display: flex;
+    flex-direction: column;
+    transform: translateX(100%);
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    /* shift layer control when panel open */
+}
+
+.right-panel.open {
+    transform: translateX(0);
+}
+
+.right-panel-header {
+    padding: 16px 16px 12px;
+    background: white;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-shrink: 0;
+    padding-top: 26px;
+}
+
+.right-panel-header h3 {
+    font-size: 15px;
+    font-weight: 700;
+    color: #1e1e2e;
+}
+
+.right-panel-close {
+    width: 30px;
+    height: 30px;
+    border: none;
+    background: #f3f4f6;
+    border-radius: 8px;
+    cursor: pointer;
+    color: #555;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 13px;
+    transition: background 0.2s;
+}
+
+.right-panel-close:hover {
+    background: #e5e7eb;
+    color: #333;
+}
+
+.right-panel-actions {
+    padding: 12px 14px;
+    background: white;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    gap: 8px;
+    flex-shrink: 0;
+}
+
+.right-panel-actions button {
+    flex: 1;
+    padding: 9px 10px;
+    border: none;
+    border-radius: 8px;
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    transition: all 0.2s;
+}
+
+.btn-panel-add {
+    background: linear-gradient(135deg, #6366f1, #4f46e5);
+    color: white;
+    box-shadow: 0 3px 10px rgba(99,102,241,0.3);
+}
+
+.btn-panel-add:hover {
+    box-shadow: 0 5px 14px rgba(99,102,241,0.45);
+    transform: translateY(-1px);
+}
+
+.btn-panel-import {
+    background: #f0fdf4;
+    color: #16a34a;
+    border: 1px solid #bbf7d0 !important;
+}
+
+.btn-panel-import:hover {
+    background: #dcfce7;
+}
+
+.right-panel-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+/* Panel Section Heading */
+.panel-section-title {
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: #9ca3af;
+    padding: 4px 2px 6px;
+    border-bottom: 1px solid #e5e7eb;
+    margin-top: 4px;
+}
+
+/* Panel Empty State */
+.panel-empty {
+    text-align: center;
+    color: #aaa;
+    font-size: 13px;
+    padding: 40px 10px;
+}
+
+/* ===== Data Card ===== */
+.data-card {
+    background: white;
+    border-radius: 12px;
+    padding: 12px 12px 10px;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
+    transition: box-shadow 0.2s;
+    cursor: pointer;
+}
+
+.data-card:hover {
+    box-shadow: 0 3px 12px rgba(0,0,0,0.12);
+}
+
+.data-card-main {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.data-card-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    flex-shrink: 0;
+}
+
+.card-icon-spbu     { background: #f0fdf4; }
+.card-icon-jalan    { background: #eff6ff; }
+.card-icon-parsil   { background: #fefce8; }
+.card-icon-ibadah   { background: #fff7ed; }
+.card-icon-miskin-out { background: #f0fdf4; }
+.card-icon-miskin-in  { background: #fef2f2; }
+
+.data-card-info {
+    flex: 1;
+    min-width: 0;
+}
+
+.data-card-name {
+    font-size: 13px;
+    font-weight: 600;
+    color: #1e1e2e;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.data-card-sub {
+    font-size: 11px;
+    color: #6b7280;
+    margin-top: 2px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.data-card-badge {
+    font-size: 10px;
+    font-weight: 600;
+    padding: 2px 7px;
+    border-radius: 99px;
+    margin-top: 4px;
+    display: inline-block;
+}
+
+.badge-green  { background: #dcfce7; color: #16a34a; }
+.badge-red    { background: #fee2e2; color: #dc2626; }
+.badge-blue   { background: #dbeafe; color: #2563eb; }
+.badge-orange { background: #ffedd5; color: #ea580c; }
+.badge-yellow { background: #fef9c3; color: #ca8a04; }
+
+.data-card-actions {
+    display: flex;
+    gap: 6px;
+    flex-shrink: 0;
+    align-items: center;
+}
+
+.btn-card-action {
+    width: 30px;
+    height: 30px;
+    border: none;
+    border-radius: 7px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    transition: all 0.15s;
+}
+
+.btn-card-edit {
+    background: #eff6ff;
+    color: #3b82f6;
+}
+
+.btn-card-edit:hover {
+    background: #3b82f6;
+    color: white;
+}
+
+.btn-card-delete {
+    background: #fef2f2;
+    color: #ef4444;
+}
+
+.btn-card-delete:hover {
+    background: #ef4444;
+    color: white;
+}
+
+/* Expandable card (miskin) */
+.data-card-expand {
+    overflow: hidden;
+    max-height: 0;
+    transition: max-height 0.3s ease, padding 0.2s;
+    border-top: 0px solid #f3f4f6;
+}
+
+.data-card.expanded .data-card-expand {
+    max-height: 400px;
+    border-top: 1px solid #f3f4f6;
+    margin-top: 10px;
+    padding-top: 10px;
+}
+
+.expand-row {
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    color: #6b7280;
+    padding: 3px 0;
+}
+
+.expand-row span:first-child {
+    font-weight: 500;
+    color: #374151;
+}
+
+.btn-log-bantuan {
+    margin-top: 10px;
+    width: 100%;
+    padding: 8px;
+    background: linear-gradient(135deg, #6366f1, #4f46e5);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    transition: all 0.2s;
+}
+
+.btn-log-bantuan:hover {
+    box-shadow: 0 4px 12px rgba(99,102,241,0.4);
+}
+
+/* Log Bantuan Item */
+.log-item {
+    background: #f8f9fb;
+    border-radius: 8px;
+    padding: 10px 12px;
+    display: flex;
+    gap: 10px;
+    align-items: flex-start;
+}
+
+.log-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #6366f1;
+    flex-shrink: 0;
+    margin-top: 5px;
+}
+
+.log-info {
+    flex: 1;
+}
+
+.log-type {
+    font-size: 12px;
+    font-weight: 600;
+    color: #1e1e2e;
+}
+
+.log-meta {
+    font-size: 11px;
+    color: #9ca3af;
+    margin-top: 2px;
+}
+
+.log-keterangan {
+    font-size: 11px;
+    color: #6b7280;
+    margin-top: 3px;
+    font-style: italic;
+}
+
+/* Popup Form */
+.popup-form {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 200px;
+}
+
+.popup-form label {
+    font-size: 12px;
+    font-weight: bold;
+    color: #555;
+}
+
+.popup-form input[type="text"],
+.popup-form input[type="number"] {
+    width: 100%;
+    padding: 6px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+.popup-form .radio-group {
+    display: flex;
+    gap: 10px;
+}
+
+.popup-form button {
+    padding: 8px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-weight: bold;
+}
+
+.popup-form button.btn-danger {
+    background-color: #dc3545;
+}
+
+.popup-form button:hover {
+    opacity: 0.9;
+}
+
+/* Unified Modal */
+.unified-modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.5);
+    z-index: 2000;
+    align-items: center;
+    justify-content: center;
+}
+
+.unified-modal.show {
+    display: flex;
+}
+
+.modal-content {
+    background-color: white;
+    border-radius: 12px;
+    width: 400px;
+    max-width: 90%;
+    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
+    display: flex;
+    flex-direction: column;
+}
+
+.modal-header {
+    padding: 15px;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.modal-header h3 {
+    font-size: 16px;
+    margin: 0;
+}
+
+.modal-close {
+    font-size: 20px;
+    font-weight: bold;
+    cursor: pointer;
+    color: #888;
+}
+
+.modal-close:hover {
+    color: #333;
+}
+
+.modal-body {
+    padding: 15px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.modal-body label {
+    font-size: 13px;
+    font-weight: 600;
+    color: #444;
+}
+
+.modal-body input[type="text"],
+.modal-body input[type="number"],
+.modal-body input[type="date"],
+.modal-body select,
+.modal-body textarea {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+    font-size: 14px;
+    font-family: inherit;
+}
+
+.modal-footer {
+    padding: 15px;
+    border-top: 1px solid #eee;
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+}
+
+.btn-save {
+    background: linear-gradient(135deg, #6366f1, #4f46e5);
+    color: white;
+    border: none;
+    padding: 8px 18px;
+    border-radius: 7px;
+    cursor: pointer;
+    font-weight: 600;
+    font-size: 13px;
+}
+
+.btn-cancel {
+    background-color: #f8f9fa;
+    border: 1px solid #ddd;
+    padding: 8px 18px;
+    border-radius: 7px;
+    cursor: pointer;
+    font-size: 13px;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+/* Custom Cursor Tooltip */
+.custom-cursor-tooltip {
+    position: absolute;
+    display: none;
+    background-color: rgba(0, 0, 0, 0.75);
+    color: white;
+    padding: 6px 12px;
+    border-radius: 4px;
+    font-size: 13px;
+    font-weight: 500;
+    pointer-events: none;
+    z-index: 9999;
+    white-space: nowrap;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
+}
+
+/* Sembunyikan default tooltip Leaflet Draw */
+.leaflet-draw-tooltip {
+    display: none !important;
+}
+
+/* Sub-layer collapsible */
+.layer-group-item {
+    margin-bottom: 6px;
+}
+
+.layer-group-item > .layer-group-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.layer-toggle-icon {
+    cursor: pointer;
+    padding: 2px 6px;
+    color: #666;
+    font-size: 11px;
+    border-radius: 4px;
+    transition: background 0.2s;
+    flex-shrink: 0;
+}
+
+.layer-toggle-icon:hover {
+    background: #f0f0f0;
+    color: #333;
+}
+
+.layer-toggle-icon i {
+    transition: transform 0.2s;
+}
+
+.layer-toggle-icon.collapsed i {
+    transform: rotate(-90deg);
+}
+
+.sub-layer-list {
+    padding-left: 18px;
+    margin-top: 4px;
+    border-left: 2px solid #eee;
+    overflow: hidden;
+    transition: max-height 0.2s ease;
+}
+
+.sub-option {
+    font-size: 12px !important;
+    color: #555;
+    margin-bottom: 3px !important;
+}
+
+/* ===== Emoji Marker (Pin Bubble) ===== */
+.emoji-marker {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    pointer-events: auto; /* changed from none to allow click/drag */
+}
+
+.emoji-marker .bubble {
+    width: 38px;
+    height: 38px;
+    border-radius: 50% 50% 50% 0;
+    transform: rotate(-45deg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
+    border: 2px solid rgba(255,255,255,0.8);
+    animation: markerPop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
+}
+
+.emoji-marker .bubble span {
+    transform: rotate(45deg);
+    font-size: 18px;
+    line-height: 1;
+}
+
+@keyframes markerPop {
+    0%   { transform: rotate(-45deg) scale(0); }
+    100% { transform: rotate(-45deg) scale(1); }
+}
+
+/* Warna bubble per tipe */
+.emoji-marker .bubble.spbu-24     { background: linear-gradient(135deg, #22c55e, #16a34a); }
+.emoji-marker .bubble.spbu-not24  { background: linear-gradient(135deg, #ef4444, #dc2626); }
+.emoji-marker .bubble.ibadah      { background: linear-gradient(135deg, #f97316, #ea580c); }
+.emoji-marker .bubble.miskin-in   { background: linear-gradient(135deg, #ef4444, #dc2626); }
+.emoji-marker .bubble.miskin-out  { background: linear-gradient(135deg, #22c55e, #16a34a); }
+
+/* ===== Toast Notification ===== */
+#toastContainer {
+    position: fixed;
+    bottom: 28px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    pointer-events: none;
+}
+
+.toast {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 20px;
+    border-radius: 12px;
+    font-size: 13px;
+    font-weight: 500;
+    color: white;
+    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
+    backdrop-filter: blur(6px);
+    pointer-events: auto;
+    animation: toastSlideIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
+    max-width: 340px;
+    text-align: center;
+}
+
+.toast.hiding {
+    animation: toastSlideOut 0.3s ease forwards;
+}
+
+.toast-success { background: linear-gradient(135deg, #22c55e, #16a34a); }
+.toast-error   { background: linear-gradient(135deg, #ef4444, #dc2626); }
+.toast-info    { background: linear-gradient(135deg, #6366f1, #4f46e5); }
+.toast-warning { background: linear-gradient(135deg, #f59e0b, #d97706); }
+
+.toast-icon { font-size: 16px; flex-shrink: 0; }
+
+@keyframes toastSlideIn {
+    0%   { opacity: 0; transform: translateY(20px) scale(0.9); }
+    100% { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+@keyframes toastSlideOut {
+    0%   { opacity: 1; transform: translateY(0) scale(1); }
+    100% { opacity: 0; transform: translateY(10px) scale(0.95); }
+}
+
+/* Auth Widget Styling */
+.auth-widget {
+    position: absolute;
+    top: 20px;
+    right: 80px;
+    z-index: 1000;
+    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+body.right-panel-open .auth-widget {
+    right: 400px;
+}
+
+.btn-login {
+    background: linear-gradient(135deg, #6366f1, #4f46e5);
+    color: white;
+    border: none;
+    border-radius: 24px;
+    height: 48px;
+    padding: 0 24px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    transition: all 0.2s ease;
+}
+
+.btn-login:hover {
+    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.45);
+    transform: translateY(-1px);
+}
+
+.user-profile-pill {
+    background-color: white;
+    border-radius: 24px;
+    height: 48px;
+    padding: 0 8px 0 16px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    border: 1px solid rgba(226, 232, 240, 0.8);
+    backdrop-filter: blur(10px);
+    background: rgba(255, 255, 255, 0.9);
+}
+
+.user-profile-info {
+    display: flex;
+    flex-direction: column;
+}
+
+.user-profile-name {
+    font-size: 12px;
+    font-weight: 700;
+    color: #1e1e2e;
+}
+
+.user-profile-role {
+    font-size: 9px;
+    font-weight: 600;
+    color: #6366f1;
+    text-transform: uppercase;
+}
+
+.btn-profile-logout {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    border: none;
+    background: #f1f5f9;
+    color: #64748b;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+}
+
+.btn-profile-logout:hover {
+    background: #fee2e2;
+    color: #ef4444;
+}
+
+/* User management table styling */
+#userManagementModal table th {
+    padding: 10px 12px;
+    font-weight: 600;
+    background-color: #f1f5f9;
+    border-bottom: 1px solid #cbd5e1;
+}
+
+#userManagementModal table td {
+    padding: 10px 12px;
+    border-bottom: 1px solid #e2e8f0;
+}
+