diff --git a/create_tables.php b/create_tables.php
index 18cffcb..de69f10 100644
--- a/create_tables.php
+++ b/create_tables.php
@@ -67,6 +67,27 @@ $statements = [
     created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
     INDEX idx_aduan_coords (latitude, longitude),
     INDEX idx_aduan_status (status_tindak_lanjut)
+)",
+    "CREATE TABLE IF NOT EXISTS locations (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    nama VARCHAR(255) NOT NULL,
+    nomor VARCHAR(100) NOT NULL,
+    buka_24jam VARCHAR(10) NOT NULL DEFAULT 'tidak',
+    latitude DECIMAL(10, 8) NOT NULL,
+    longitude DECIMAL(11, 8) NOT NULL,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    INDEX idx_locations_coords (latitude, longitude)
+)",
+    "CREATE TABLE IF NOT EXISTS spatial_features (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    nama_objek VARCHAR(255) NOT NULL,
+    kategori VARCHAR(100) NOT NULL,
+    status_objek VARCHAR(100) NOT NULL,
+    type VARCHAR(50) NOT NULL,
+    geometry_data LONGTEXT NOT NULL,
+    nilai_ukur DECIMAL(15, 2) NOT NULL DEFAULT 0.00,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    INDEX idx_features_kategori (kategori)
 )"
 ];
 
@@ -85,7 +106,11 @@ $alterStatements = [
 ];
 
 foreach ($alterStatements as $alterSql) {
-    $conn->query($alterSql);
+    try {
+        @$conn->query($alterSql);
+    } catch (Exception $e) {
+        // Abaikan jika kolom sudah ada
+    }
 }
 
 echo json_encode(['status' => 'success', 'message' => 'Tabel berhasil dibuat atau sudah ada']);
diff --git a/fitur_bantuan/api/delete_penduduk_miskin.php b/fitur_bantuan/api/delete_penduduk_miskin.php
new file mode 100644
index 0000000..ead1310
--- /dev/null
+++ b/fitur_bantuan/api/delete_penduduk_miskin.php
@@ -0,0 +1,26 @@
+<?php
+header('Content-Type: application/json');
+include __DIR__ . '/../../db_config.php';
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $id = (int)($_POST['id'] ?? 0);
+
+    if ($id <= 0) {
+        echo json_encode(['status' => 'error', 'message' => 'ID tidak valid']);
+        $conn->close();
+        exit;
+    }
+
+    $stmt = $conn->prepare("DELETE FROM penduduk_miskin WHERE id = ?");
+    $stmt->bind_param("i", $id);
+
+    if ($stmt->execute()) {
+        echo json_encode(['status' => 'success', 'message' => 'Data penduduk miskin dihapus']);
+    } else {
+        echo json_encode(['status' => 'error', 'message' => $stmt->error]);
+    }
+
+    $stmt->close();
+}
+$conn->close();
+?>
diff --git a/fitur_bantuan/api/delete_rumah_ibadah.php b/fitur_bantuan/api/delete_rumah_ibadah.php
new file mode 100644
index 0000000..468db6b
--- /dev/null
+++ b/fitur_bantuan/api/delete_rumah_ibadah.php
@@ -0,0 +1,26 @@
+<?php
+header('Content-Type: application/json');
+include __DIR__ . '/../../db_config.php';
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $id = (int)($_POST['id'] ?? 0);
+
+    if ($id <= 0) {
+        echo json_encode(['status' => 'error', 'message' => 'ID tidak valid']);
+        $conn->close();
+        exit;
+    }
+
+    $stmt = $conn->prepare("DELETE FROM rumah_ibadah WHERE id = ?");
+    $stmt->bind_param("i", $id);
+
+    if ($stmt->execute()) {
+        echo json_encode(['status' => 'success', 'message' => 'Rumah ibadah berhasil dihapus']);
+    } else {
+        echo json_encode(['status' => 'error', 'message' => $stmt->error]);
+    }
+
+    $stmt->close();
+}
+$conn->close();
+?>
diff --git a/fitur_bantuan/api/delete_verifikasi_lapangan.php b/fitur_bantuan/api/delete_verifikasi_lapangan.php
new file mode 100644
index 0000000..2a7230e
--- /dev/null
+++ b/fitur_bantuan/api/delete_verifikasi_lapangan.php
@@ -0,0 +1,38 @@
+<?php
+header('Content-Type: application/json');
+include __DIR__ . '/../../db_config.php';
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $id = (int)($_POST['id'] ?? 0);
+    if ($id <= 0) {
+        http_response_code(400);
+        echo json_encode(['status' => 'error', 'message' => 'ID verifikasi tidak valid']);
+        $conn->close();
+        exit;
+    }
+
+    $stmt = $conn->prepare('DELETE FROM verifikasi_lapangan WHERE id = ?');
+    if (!$stmt) {
+        http_response_code(500);
+        echo json_encode(['status' => 'error', 'message' => $conn->error]);
+        $conn->close();
+        exit;
+    }
+
+    $stmt->bind_param('i', $id);
+    if ($stmt->execute()) {
+        echo json_encode(['status' => 'success', 'message' => 'Verifikasi lapangan berhasil dihapus']);
+    } else {
+        http_response_code(500);
+        echo json_encode(['status' => 'error', 'message' => $stmt->error]);
+    }
+
+    $stmt->close();
+    $conn->close();
+    exit;
+}
+
+http_response_code(405);
+echo json_encode(['status' => 'error', 'message' => 'Method tidak diizinkan']);
+$conn->close();
+?>
diff --git a/fitur_bantuan/api/get_penduduk_miskin.php b/fitur_bantuan/api/get_penduduk_miskin.php
new file mode 100644
index 0000000..aff4290
--- /dev/null
+++ b/fitur_bantuan/api/get_penduduk_miskin.php
@@ -0,0 +1,34 @@
+<?php
+header('Content-Type: application/json');
+include __DIR__ . '/../../db_config.php';
+
+$sql = "SELECT id, nama_ketua_kk, jumlah_anggota, latitude, longitude, rumah_ibadah_id, rumah_ibadah_nama, jarak_ke_rumah_ibadah_m, bantuan_status, bantuan_catatan, bantuan_updated_at, created_at 
+        FROM penduduk_miskin 
+        ORDER BY created_at DESC";
+
+$result = $conn->query($sql);
+$data = [];
+
+if (!$result) {
+    http_response_code(500);
+    echo json_encode(['status' => 'error', 'message' => 'Query gagal: ' . $conn->error]);
+    $conn->close();
+    exit;
+}
+
+if ($result->num_rows > 0) {
+    while ($row = $result->fetch_assoc()) {
+        $row['latitude'] = (float)$row['latitude'];
+        $row['longitude'] = (float)$row['longitude'];
+        $row['jumlah_anggota'] = (int)$row['jumlah_anggota'];
+        $row['rumah_ibadah_id'] = $row['rumah_ibadah_id'] !== null ? (int)$row['rumah_ibadah_id'] : null;
+        $row['jarak_ke_rumah_ibadah_m'] = $row['jarak_ke_rumah_ibadah_m'] !== null ? (float)$row['jarak_ke_rumah_ibadah_m'] : null;
+        $row['bantuan_status'] = $row['bantuan_status'] ?: 'belum';
+        $row['bantuan_catatan'] = $row['bantuan_catatan'] ?? '';
+        $data[] = $row;
+    }
+}
+
+echo json_encode($data);
+$conn->close();
+?>
diff --git a/fitur_bantuan/api/get_rumah_ibadah.php b/fitur_bantuan/api/get_rumah_ibadah.php
new file mode 100644
index 0000000..9bcdeb1
--- /dev/null
+++ b/fitur_bantuan/api/get_rumah_ibadah.php
@@ -0,0 +1,30 @@
+<?php
+header('Content-Type: application/json');
+include __DIR__ . '/../../db_config.php';
+
+$sql = "SELECT id, nama, alamat, pic, latitude, longitude, radius_m, created_at 
+        FROM rumah_ibadah 
+        ORDER BY created_at DESC";
+
+$result = $conn->query($sql);
+$data = [];
+
+if (!$result) {
+    http_response_code(500);
+    echo json_encode(['status' => 'error', 'message' => 'Query gagal: ' . $conn->error]);
+    $conn->close();
+    exit;
+}
+
+if ($result->num_rows > 0) {
+    while ($row = $result->fetch_assoc()) {
+        $row['latitude'] = (float)$row['latitude'];
+        $row['longitude'] = (float)$row['longitude'];
+        $row['radius_m'] = (int)$row['radius_m'];
+        $data[] = $row;
+    }
+}
+
+echo json_encode($data);
+$conn->close();
+?>
diff --git a/fitur_bantuan/api/get_verifikasi_lapangan.php b/fitur_bantuan/api/get_verifikasi_lapangan.php
new file mode 100644
index 0000000..dc983a7
--- /dev/null
+++ b/fitur_bantuan/api/get_verifikasi_lapangan.php
@@ -0,0 +1,24 @@
+<?php
+header('Content-Type: application/json');
+include __DIR__ . '/../../db_config.php';
+
+$sql = 'SELECT id, jenis_target, target_nama, petugas_nama, status_verifikasi, hasil_temuan, tindak_lanjut, foto, latitude, longitude, created_at FROM verifikasi_lapangan ORDER BY created_at DESC';
+$result = $conn->query($sql);
+
+if (!$result) {
+    http_response_code(500);
+    echo json_encode(['status' => 'error', 'message' => 'Query gagal: ' . $conn->error]);
+    $conn->close();
+    exit;
+}
+
+$data = [];
+while ($row = $result->fetch_assoc()) {
+    $row['latitude'] = (float)$row['latitude'];
+    $row['longitude'] = (float)$row['longitude'];
+    $data[] = $row;
+}
+
+echo json_encode($data);
+$conn->close();
+?>
diff --git a/fitur_bantuan/api/save_penduduk_miskin.php b/fitur_bantuan/api/save_penduduk_miskin.php
new file mode 100644
index 0000000..f195285
--- /dev/null
+++ b/fitur_bantuan/api/save_penduduk_miskin.php
@@ -0,0 +1,77 @@
+<?php
+header('Content-Type: application/json');
+include __DIR__ . '/../../db_config.php';
+
+function distanceMeters($lat1, $lng1, $lat2, $lng2) {
+    $earthRadius = 6371000;
+    $toRadians = function ($value) {
+        return $value * M_PI / 180;
+    };
+
+    $deltaLat = $toRadians($lat2 - $lat1);
+    $deltaLng = $toRadians($lng2 - $lng1);
+    $a = sin($deltaLat / 2) * sin($deltaLat / 2) + cos($toRadians($lat1)) * cos($toRadians($lat2)) * sin($deltaLng / 2) * sin($deltaLng / 2);
+
+    return 2 * $earthRadius * atan2(sqrt($a), sqrt(1 - $a));
+}
+
+function findNearestRumahIbadah($conn, $lat, $lng) {
+    $result = $conn->query("SELECT id, nama, latitude, longitude FROM rumah_ibadah ORDER BY created_at DESC");
+    if (!$result || $result->num_rows === 0) {
+        return null;
+    }
+
+    $nearest = null;
+    while ($row = $result->fetch_assoc()) {
+        $distance = distanceMeters($lat, $lng, (float)$row['latitude'], (float)$row['longitude']);
+        if ($nearest === null || $distance < $nearest['distance']) {
+            $nearest = [
+                'id' => (int)$row['id'],
+                'nama' => $row['nama'],
+                'distance' => $distance
+            ];
+        }
+    }
+
+    return $nearest;
+}
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $namaKetuaKk = trim($_POST['nama_ketua_kk'] ?? '');
+    $jumlahAnggota = (int)($_POST['jumlah_anggota'] ?? 0);
+    $lat = $_POST['latitude'] ?? null;
+    $lng = $_POST['longitude'] ?? null;
+
+    if ($namaKetuaKk === '' || $jumlahAnggota <= 0 || $lat === null || $lng === null) {
+        echo json_encode(['status' => 'error', 'message' => 'Data penduduk miskin tidak lengkap']);
+        $conn->close();
+        exit;
+    }
+
+    $lat = (float)$lat;
+    $lng = (float)$lng;
+    $nearest = findNearestRumahIbadah($conn, $lat, $lng);
+
+    if (!$nearest) {
+        echo json_encode(['status' => 'error', 'message' => 'Tambahkan rumah ibadah terlebih dahulu']);
+        $conn->close();
+        exit;
+    }
+
+    $jarak = $nearest['distance'];
+    $rumahIbadahId = $nearest['id'];
+    $rumahIbadahNama = $nearest['nama'];
+
+    $stmt = $conn->prepare("INSERT INTO penduduk_miskin (nama_ketua_kk, jumlah_anggota, latitude, longitude, rumah_ibadah_id, rumah_ibadah_nama, jarak_ke_rumah_ibadah_m) VALUES (?, ?, ?, ?, ?, ?, ?)");
+    $stmt->bind_param("siddisd", $namaKetuaKk, $jumlahAnggota, $lat, $lng, $rumahIbadahId, $rumahIbadahNama, $jarak);
+
+    if ($stmt->execute()) {
+        echo json_encode(['status' => 'success', 'message' => 'Penduduk miskin berhasil disimpan']);
+    } else {
+        echo json_encode(['status' => 'error', 'message' => $stmt->error]);
+    }
+
+    $stmt->close();
+}
+$conn->close();
+?>
diff --git a/fitur_bantuan/api/save_rumah_ibadah.php b/fitur_bantuan/api/save_rumah_ibadah.php
new file mode 100644
index 0000000..e47b3c2
--- /dev/null
+++ b/fitur_bantuan/api/save_rumah_ibadah.php
@@ -0,0 +1,35 @@
+<?php
+header('Content-Type: application/json');
+include __DIR__ . '/../../db_config.php';
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $nama = trim($_POST['nama'] ?? '');
+    $alamat = trim($_POST['alamat'] ?? '');
+    $pic = trim($_POST['pic'] ?? '');
+    $lat = $_POST['latitude'] ?? null;
+    $lng = $_POST['longitude'] ?? null;
+    $radius = $_POST['radius_m'] ?? 1000;
+
+    if ($nama === '' || $alamat === '' || $pic === '' || $lat === null || $lng === null) {
+        echo json_encode(['status' => 'error', 'message' => 'Data rumah ibadah tidak lengkap']);
+        $conn->close();
+        exit;
+    }
+
+    $lat = (float)$lat;
+    $lng = (float)$lng;
+    $radius = max(50, (int)$radius);
+
+    $stmt = $conn->prepare("INSERT INTO rumah_ibadah (nama, alamat, pic, latitude, longitude, radius_m) VALUES (?, ?, ?, ?, ?, ?)");
+    $stmt->bind_param("sssddi", $nama, $alamat, $pic, $lat, $lng, $radius);
+
+    if ($stmt->execute()) {
+        echo json_encode(['status' => 'success', 'message' => 'Rumah ibadah berhasil disimpan']);
+    } else {
+        echo json_encode(['status' => 'error', 'message' => $stmt->error]);
+    }
+
+    $stmt->close();
+}
+$conn->close();
+?>
diff --git a/fitur_bantuan/api/save_verifikasi_lapangan.php b/fitur_bantuan/api/save_verifikasi_lapangan.php
new file mode 100644
index 0000000..8a6ed64
--- /dev/null
+++ b/fitur_bantuan/api/save_verifikasi_lapangan.php
@@ -0,0 +1,76 @@
+<?php
+header('Content-Type: application/json');
+include __DIR__ . '/../../db_config.php';
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $jenisTarget = trim($_POST['jenis_target'] ?? 'penduduk_miskin');
+    $targetNama = trim($_POST['target_nama'] ?? '');
+    $petugasNama = trim($_POST['petugas_nama'] ?? '');
+    $statusVerifikasi = trim($_POST['status_verifikasi'] ?? 'menunggu');
+    $hasilTemuan = trim($_POST['hasil_temuan'] ?? '');
+    $tindakLanjut = trim($_POST['tindak_lanjut'] ?? '');
+    $latitude = $_POST['latitude'] ?? '';
+    $longitude = $_POST['longitude'] ?? '';
+
+    if ($petugasNama === '' || empty($latitude) || empty($longitude)) {
+        http_response_code(400);
+        echo json_encode(['status' => 'error', 'message' => 'Nama petugas dan koordinat wajib diisi']);
+        $conn->close();
+        exit;
+    }
+
+    $foto = null;
+    if (isset($_FILES['foto']) && $_FILES['foto']['error'] === UPLOAD_ERR_OK) {
+        $allowed = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
+        $filename = $_FILES['foto']['name'];
+        $ext = strtolower(pathinfo($filename, PATHINFO_EXTENSION));
+
+        if (!in_array($ext, $allowed, true)) {
+            http_response_code(400);
+            echo json_encode(['status' => 'error', 'message' => 'Format foto hanya JPG, PNG, GIF, WEBP']);
+            $conn->close();
+            exit;
+        }
+
+        // Folder is in root
+        if (!is_dir(__DIR__ . '/../../uploads')) {
+            mkdir(__DIR__ . '/../../uploads', 0755, true);
+        }
+
+        $foto = 'uploads/' . time() . '_' . basename($filename);
+        if (!move_uploaded_file($_FILES['foto']['tmp_name'], __DIR__ . '/../../' . $foto)) {
+            http_response_code(500);
+            echo json_encode(['status' => 'error', 'message' => 'Gagal upload foto']);
+            $conn->close();
+            exit;
+        }
+    }
+
+    $stmt = $conn->prepare('INSERT INTO verifikasi_lapangan (jenis_target, target_nama, petugas_nama, status_verifikasi, hasil_temuan, tindak_lanjut, foto, latitude, longitude) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)');
+    if (!$stmt) {
+        http_response_code(500);
+        echo json_encode(['status' => 'error', 'message' => $conn->error]);
+        $conn->close();
+        exit;
+    }
+
+    $latitude = (float)$latitude;
+    $longitude = (float)$longitude;
+    $stmt->bind_param('sssssssdd', $jenisTarget, $targetNama, $petugasNama, $statusVerifikasi, $hasilTemuan, $tindakLanjut, $foto, $latitude, $longitude);
+
+    if ($stmt->execute()) {
+        echo json_encode(['status' => 'success', 'message' => 'Verifikasi lapangan berhasil disimpan', 'id' => $stmt->insert_id]);
+    } else {
+        http_response_code(500);
+        echo json_encode(['status' => 'error', 'message' => $stmt->error]);
+    }
+
+    $stmt->close();
+    $conn->close();
+    exit;
+}
+
+http_response_code(405);
+echo json_encode(['status' => 'error', 'message' => 'Method tidak diizinkan']);
+$conn->close();
+?>
diff --git a/fitur_bantuan/api/update_bantuan_penduduk.php b/fitur_bantuan/api/update_bantuan_penduduk.php
new file mode 100644
index 0000000..7ccb17f
--- /dev/null
+++ b/fitur_bantuan/api/update_bantuan_penduduk.php
@@ -0,0 +1,48 @@
+<?php
+header('Content-Type: application/json');
+include __DIR__ . '/../../db_config.php';
+
+if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
+    http_response_code(405);
+    echo json_encode(['status' => 'error', 'message' => 'Metode tidak diizinkan']);
+    $conn->close();
+    exit;
+}
+
+$id = (int)($_POST['id'] ?? 0);
+$status = strtolower(trim($_POST['bantuan_status'] ?? 'belum'));
+$catatan = trim($_POST['bantuan_catatan'] ?? '');
+
+if ($id <= 0) {
+    echo json_encode(['status' => 'error', 'message' => 'ID tidak valid']);
+    $conn->close();
+    exit;
+}
+
+if (!in_array($status, ['belum', 'proses', 'sudah'], true)) {
+    $status = 'belum';
+}
+
+$stmt = $conn->prepare("UPDATE penduduk_miskin SET bantuan_status = ?, bantuan_catatan = ?, bantuan_updated_at = CURRENT_TIMESTAMP WHERE id = ?");
+$stmt->bind_param("ssi", $status, $catatan, $id);
+
+if ($stmt->execute()) {
+    $updatedAtResult = $conn->query("SELECT bantuan_updated_at FROM penduduk_miskin WHERE id = " . (int)$id . " LIMIT 1");
+    $updatedAt = null;
+    if ($updatedAtResult && $updatedAtResult->num_rows > 0) {
+        $row = $updatedAtResult->fetch_assoc();
+        $updatedAt = $row['bantuan_updated_at'] ?? null;
+    }
+
+    echo json_encode([
+        'status' => 'success',
+        'message' => 'Status bantuan berhasil diperbarui',
+        'bantuan_updated_at' => $updatedAt
+    ]);
+} else {
+    echo json_encode(['status' => 'error', 'message' => $stmt->error]);
+}
+
+$stmt->close();
+$conn->close();
+?>
diff --git a/fitur_bantuan/api/update_penduduk_miskin.php b/fitur_bantuan/api/update_penduduk_miskin.php
new file mode 100644
index 0000000..170f67d
--- /dev/null
+++ b/fitur_bantuan/api/update_penduduk_miskin.php
@@ -0,0 +1,79 @@
+<?php
+header('Content-Type: application/json');
+include __DIR__ . '/../../db_config.php';
+
+function distanceMeters($lat1, $lng1, $lat2, $lng2) {
+    $earthRadius = 6371000;
+    $toRadians = function ($value) {
+        return $value * M_PI / 180;
+    };
+
+    $deltaLat = $toRadians($lat2 - $lat1);
+    $deltaLng = $toRadians($lng2 - $lng1);
+    $a = sin($deltaLat / 2) * sin($deltaLat / 2) + cos($toRadians($lat1)) * cos($toRadians($lat2)) * sin($deltaLng / 2) * sin($deltaLng / 2);
+
+    return 2 * $earthRadius * atan2(sqrt($a), sqrt(1 - $a));
+}
+
+function findNearestRumahIbadah($conn, $lat, $lng) {
+    $result = $conn->query("SELECT id, nama, latitude, longitude FROM rumah_ibadah ORDER BY created_at DESC");
+    if (!$result || $result->num_rows === 0) {
+        return null;
+    }
+
+    $nearest = null;
+    while ($row = $result->fetch_assoc()) {
+        $distance = distanceMeters($lat, $lng, (float)$row['latitude'], (float)$row['longitude']);
+        if ($nearest === null || $distance < $nearest['distance']) {
+            $nearest = [
+                'id' => (int)$row['id'],
+                'nama' => $row['nama'],
+                'distance' => $distance
+            ];
+        }
+    }
+
+    return $nearest;
+}
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $id = (int)($_POST['id'] ?? 0);
+    $namaKetuaKk = trim($_POST['nama_ketua_kk'] ?? '');
+    $jumlahAnggota = (int)($_POST['jumlah_anggota'] ?? 0);
+    $lat = $_POST['latitude'] ?? null;
+    $lng = $_POST['longitude'] ?? null;
+
+    if ($id <= 0 || $namaKetuaKk === '' || $jumlahAnggota <= 0 || $lat === null || $lng === null) {
+        echo json_encode(['status' => 'error', 'message' => 'Data penduduk miskin tidak lengkap']);
+        $conn->close();
+        exit;
+    }
+
+    $lat = (float)$lat;
+    $lng = (float)$lng;
+    $nearest = findNearestRumahIbadah($conn, $lat, $lng);
+
+    if (!$nearest) {
+        echo json_encode(['status' => 'error', 'message' => 'Tambahkan rumah ibadah terlebih dahulu']);
+        $conn->close();
+        exit;
+    }
+
+    $jarak = $nearest['distance'];
+    $rumahIbadahId = $nearest['id'];
+    $rumahIbadahNama = $nearest['nama'];
+
+    $stmt = $conn->prepare("UPDATE penduduk_miskin SET nama_ketua_kk = ?, jumlah_anggota = ?, latitude = ?, longitude = ?, rumah_ibadah_id = ?, rumah_ibadah_nama = ?, jarak_ke_rumah_ibadah_m = ? WHERE id = ?");
+    $stmt->bind_param("siddisdi", $namaKetuaKk, $jumlahAnggota, $lat, $lng, $rumahIbadahId, $rumahIbadahNama, $jarak, $id);
+
+    if ($stmt->execute()) {
+        echo json_encode(['status' => 'success', 'message' => 'Data penduduk miskin berhasil diperbarui']);
+    } else {
+        echo json_encode(['status' => 'error', 'message' => $stmt->error]);
+    }
+
+    $stmt->close();
+}
+
+$conn->close();
+?>
diff --git a/fitur_bantuan/api/update_rumah_ibadah.php b/fitur_bantuan/api/update_rumah_ibadah.php
new file mode 100644
index 0000000..db600ce
--- /dev/null
+++ b/fitur_bantuan/api/update_rumah_ibadah.php
@@ -0,0 +1,36 @@
+<?php
+header('Content-Type: application/json');
+include __DIR__ . '/../../db_config.php';
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $id = (int)($_POST['id'] ?? 0);
+    $nama = trim($_POST['nama'] ?? '');
+    $alamat = trim($_POST['alamat'] ?? '');
+    $pic = trim($_POST['pic'] ?? '');
+    $lat = $_POST['latitude'] ?? null;
+    $lng = $_POST['longitude'] ?? null;
+    $radius = $_POST['radius_m'] ?? 1000;
+
+    if ($id <= 0 || $nama === '' || $alamat === '' || $pic === '' || $lat === null || $lng === null) {
+        echo json_encode(['status' => 'error', 'message' => 'Data rumah ibadah tidak lengkap']);
+        $conn->close();
+        exit;
+    }
+
+    $lat = (float)$lat;
+    $lng = (float)$lng;
+    $radius = max(50, (int)$radius);
+
+    $stmt = $conn->prepare("UPDATE rumah_ibadah SET nama = ?, alamat = ?, pic = ?, latitude = ?, longitude = ?, radius_m = ? WHERE id = ?");
+    $stmt->bind_param("sssddii", $nama, $alamat, $pic, $lat, $lng, $radius, $id);
+
+    if ($stmt->execute()) {
+        echo json_encode(['status' => 'success', 'message' => 'Rumah ibadah berhasil diperbarui']);
+    } else {
+        echo json_encode(['status' => 'error', 'message' => $stmt->error]);
+    }
+
+    $stmt->close();
+}
+$conn->close();
+?>
diff --git a/fitur_bantuan/api/update_verifikasi_lapangan.php b/fitur_bantuan/api/update_verifikasi_lapangan.php
new file mode 100644
index 0000000..119ccce
--- /dev/null
+++ b/fitur_bantuan/api/update_verifikasi_lapangan.php
@@ -0,0 +1,84 @@
+<?php
+header('Content-Type: application/json');
+include __DIR__ . '/../../db_config.php';
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $id = (int)($_POST['id'] ?? 0);
+    $jenisTarget = trim($_POST['jenis_target'] ?? 'penduduk_miskin');
+    $targetNama = trim($_POST['target_nama'] ?? '');
+    $petugasNama = trim($_POST['petugas_nama'] ?? '');
+    $statusVerifikasi = trim($_POST['status_verifikasi'] ?? 'menunggu');
+    $hasilTemuan = trim($_POST['hasil_temuan'] ?? '');
+    $tindakLanjut = trim($_POST['tindak_lanjut'] ?? '');
+    $latitude = $_POST['latitude'] ?? '';
+    $longitude = $_POST['longitude'] ?? '';
+
+    if ($id <= 0 || $petugasNama === '' || empty($latitude) || empty($longitude)) {
+        http_response_code(400);
+        echo json_encode(['status' => 'error', 'message' => 'Data verifikasi tidak lengkap']);
+        $conn->close();
+        exit;
+    }
+
+    $fotoSql = '';
+    $foto = null;
+    if (isset($_FILES['foto']) && $_FILES['foto']['error'] === UPLOAD_ERR_OK) {
+        $allowed = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
+        $filename = $_FILES['foto']['name'];
+        $ext = strtolower(pathinfo($filename, PATHINFO_EXTENSION));
+
+        if (!in_array($ext, $allowed, true)) {
+            http_response_code(400);
+            echo json_encode(['status' => 'error', 'message' => 'Format foto hanya JPG, PNG, GIF, WEBP']);
+            $conn->close();
+            exit;
+        }
+
+        if (!is_dir(__DIR__ . '/../../uploads')) {
+            mkdir(__DIR__ . '/../../uploads', 0755, true);
+        }
+
+        $foto = 'uploads/' . time() . '_' . basename($filename);
+        if (!move_uploaded_file($_FILES['foto']['tmp_name'], __DIR__ . '/../../' . $foto)) {
+            http_response_code(500);
+            echo json_encode(['status' => 'error', 'message' => 'Gagal upload foto']);
+            $conn->close();
+            exit;
+        }
+
+        $fotoSql = ', foto = ?';
+    }
+
+    $sql = 'UPDATE verifikasi_lapangan SET jenis_target = ?, target_nama = ?, petugas_nama = ?, status_verifikasi = ?, hasil_temuan = ?, tindak_lanjut = ?, latitude = ?, longitude = ?' . $fotoSql . ' WHERE id = ?';
+    $stmt = $conn->prepare($sql);
+    if (!$stmt) {
+        http_response_code(500);
+        echo json_encode(['status' => 'error', 'message' => $conn->error]);
+        $conn->close();
+        exit;
+    }
+
+    $latitude = (float)$latitude;
+    $longitude = (float)$longitude;
+    if ($foto !== null) {
+        $stmt->bind_param('sssssssddi', $jenisTarget, $targetNama, $petugasNama, $statusVerifikasi, $hasilTemuan, $tindakLanjut, $foto, $latitude, $longitude, $id);
+    } else {
+        $stmt->bind_param('ssssssddi', $jenisTarget, $targetNama, $petugasNama, $statusVerifikasi, $hasilTemuan, $tindakLanjut, $latitude, $longitude, $id);
+    }
+
+    if ($stmt->execute()) {
+        echo json_encode(['status' => 'success', 'message' => 'Verifikasi lapangan berhasil diperbarui']);
+    } else {
+        http_response_code(500);
+        echo json_encode(['status' => 'error', 'message' => $stmt->error]);
+    }
+
+    $stmt->close();
+    $conn->close();
+    exit;
+}
+
+http_response_code(405);
+echo json_encode(['status' => 'error', 'message' => 'Method tidak diizinkan']);
+$conn->close();
+?>
diff --git a/fitur_bantuan/index.html b/fitur_bantuan/index.html
new file mode 100644
index 0000000..9587fcf
--- /dev/null
+++ b/fitur_bantuan/index.html
@@ -0,0 +1,1275 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sistem GIS — Manajemen Bantuan</title>
+    
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+    <!-- Leaflet CSS & Draw CSS -->
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+    <link rel="stylesheet" href="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css" />
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: {
+                        sans: ['Outfit', 'sans-serif'],
+                    }
+                }
+            }
+        }
+    </script>
+    
+    <style>
+        html, body { height: 100%; font-family: 'Outfit', sans-serif; overflow: hidden; }
+        #map {
+            height: 100vh;
+            width: 100%;
+            z-index: 1;
+        }
+        .custom-popup .leaflet-popup-content-wrapper {
+            border-radius: 16px;
+            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+            border: 1px solid rgba(226, 232, 240, 0.8);
+            padding: 4px;
+        }
+        .custom-popup .leaflet-popup-content {
+            margin: 12px;
+            font-family: 'Outfit', sans-serif;
+        }
+    </style>
+</head>
+<body class="bg-slate-50 text-slate-800 font-sans">
+
+    <!-- App Shell -->
+    <div class="relative w-full h-screen flex overflow-hidden">
+        
+        <!-- Sidebar -->
+        <div class="w-[400px] h-full bg-white border-r border-slate-200/80 flex flex-col z-10 shadow-lg relative shrink-0">
+            <!-- Header -->
+            <div class="p-6 border-b border-slate-100 flex flex-col gap-1.5">
+                <div class="flex items-center gap-2">
+                    <a href="../index.html" class="flex items-center justify-center w-8 h-8 rounded-lg bg-slate-100 text-slate-600 hover:bg-slate-200 transition">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+                    </a>
+                    <div class="flex items-center gap-1.5 text-xs font-semibold text-indigo-600 bg-indigo-50 px-2.5 py-1 rounded-full uppercase tracking-wider">
+                        <span>Informatika UNTAN</span>
+                    </div>
+                </div>
+                <h1 class="text-xl font-bold text-slate-800 mt-2 font-black">Manajemen Bantuan</h1>
+                <p class="text-xs text-slate-500">Penyaluran bantuan penduduk miskin berbasis wilayah tempat ibadah.</p>
+            </div>
+
+            <!-- Tabs -->
+            <div class="border-b border-slate-100 flex overflow-x-auto text-xs font-bold scrollbar-none">
+                <button onclick="switchTab('ibadah')" id="tabIbadah" class="flex-1 py-3 text-center border-b-2 border-indigo-600 text-indigo-600 transition min-w-[90px]">
+                    Rumah Ibadah
+                </button>
+                <button onclick="switchTab('miskin')" id="tabMiskin" class="flex-1 py-3 text-center border-b-2 border-transparent text-slate-500 hover:text-slate-700 transition min-w-[90px]">
+                    Penduduk Miskin
+                </button>
+                <button onclick="switchTab('bantuan')" id="tabBantuan" class="flex-1 py-3 text-center border-b-2 border-transparent text-slate-500 hover:text-slate-700 transition min-w-[90px]">
+                    Status Bantuan
+                </button>
+                <button onclick="switchTab('verif')" id="tabVerif" class="flex-1 py-3 text-center border-b-2 border-transparent text-slate-500 hover:text-slate-700 transition min-w-[90px]">
+                    Verifikasi
+                </button>
+            </div>
+
+            <!-- List & Search -->
+            <div class="flex-1 flex flex-col min-h-0">
+                <div class="p-4 border-b border-slate-100 flex gap-2">
+                    <div class="relative flex-1">
+                        <input id="searchQuery" type="text" placeholder="Cari..." class="w-full bg-slate-50 border border-slate-200 rounded-xl pl-10 pr-4 py-2 text-xs outline-none focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-100 transition shadow-sm">
+                        <svg class="absolute left-3.5 top-2.5 text-slate-400" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+                    </div>
+                </div>
+
+                <!-- Tab 1: Rumah Ibadah -->
+                <div id="listIbadah" class="flex-1 overflow-y-auto p-4 space-y-3">
+                    <div class="text-center py-8 text-slate-400 text-sm">Memuat data...</div>
+                </div>
+
+                <!-- Tab 2: Penduduk Miskin -->
+                <div id="listMiskin" class="flex-1 overflow-y-auto p-4 space-y-3 hidden">
+                    <div class="text-center py-8 text-slate-400 text-sm">Memuat data...</div>
+                </div>
+
+                <!-- Tab 3: Status Bantuan -->
+                <div id="listBantuan" class="flex-1 overflow-y-auto p-4 space-y-3 hidden flex flex-col min-h-0">
+                    <div class="space-y-2.5">
+                        <div>
+                            <label class="block text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-1">Pilih Rumah Ibadah Wilayah</label>
+                            <select id="bantuanIbadahFilter" onchange="filterBantuanByIbadah()" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 py-2 text-xs outline-none focus:border-indigo-500 focus:bg-white transition">
+                                <option value="">Pilih rumah ibadah...</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label class="block text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-1">Status Bantuan</label>
+                            <select id="bantuanStatusFilter" onchange="filterBantuanByIbadah()" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 py-2 text-xs outline-none focus:border-indigo-500 focus:bg-white transition">
+                                <option value="all">Semua Status</option>
+                                <option value="belum">Belum Dibantu</option>
+                                <option value="proses">Dalam Proses</option>
+                                <option value="sudah">Sudah Dibantu</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div id="bantuanItems" class="flex-1 overflow-y-auto space-y-3 pt-3">
+                        <div class="text-center py-8 text-slate-400 text-xs">Pilih rumah ibadah untuk memfilter penerima bantuan.</div>
+                    </div>
+                </div>
+
+                <!-- Tab 4: Verifikasi Lapangan -->
+                <div id="listVerif" class="flex-1 overflow-y-auto p-4 space-y-3 hidden">
+                    <div class="text-center py-8 text-slate-400 text-sm">Memuat data...</div>
+                </div>
+            </div>
+
+            <!-- Floating buttons for adding items -->
+            <div class="p-4 bg-slate-50 border-t border-slate-100 flex gap-2">
+                <button onclick="activateAddMode('ibadah')" id="addIbadahBtn" class="flex-1 flex items-center justify-center gap-1.5 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-xs font-bold transition shadow-sm">
+                    <span>+ Rumah Ibadah</span>
+                </button>
+                <button onclick="activateAddMode('miskin')" id="addMiskinBtn" class="flex-1 flex items-center justify-center gap-1.5 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-xs font-bold transition shadow-sm">
+                    <span>+ Keluarga Miskin</span>
+                </button>
+                <button onclick="activateAddMode('verif')" id="addVerifBtn" class="flex-1 flex items-center justify-center gap-1.5 py-2 bg-slate-700 hover:bg-slate-800 text-white rounded-lg text-xs font-bold transition shadow-sm">
+                    <span>+ Verifikasi</span>
+                </button>
+            </div>
+        </div>
+
+        <!-- Map Container -->
+        <div class="flex-1 h-full relative">
+            <div id="map"></div>
+            
+            <!-- Toast notification -->
+            <div id="toast" class="absolute top-4 right-4 z-[2000] hidden items-center gap-3 px-4 py-3 bg-slate-900/90 text-white rounded-xl shadow-xl backdrop-blur-md transition transform scale-95 opacity-0">
+                <span id="toastMessage" class="text-sm font-medium">Notifikasi</span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Modal Input Rumah Ibadah -->
+    <div id="ibadahModal" class="fixed inset-0 z-[10000] hidden items-center justify-center bg-slate-900/40 backdrop-blur-sm px-4">
+        <div class="w-full max-w-md bg-white rounded-2xl shadow-2xl border border-slate-100 overflow-hidden transform scale-95 opacity-0 transition-all duration-300">
+            <div class="p-5 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
+                <h3 class="font-bold text-slate-800" id="ibadahModalTitle">Tambah Rumah Ibadah</h3>
+                <button onclick="closeIbadahModal()" class="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-slate-200 transition text-slate-500">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+                </button>
+            </div>
+            <div class="p-5 space-y-4">
+                <input type="hidden" id="editIbadahId">
+                <div>
+                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5">Nama Rumah Ibadah</label>
+                    <input id="ibadahName" type="text" placeholder="Contoh: Masjid Al-Mukhlisin / Gereja Katedral" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-2 text-sm outline-none focus:border-indigo-500 focus:bg-white transition">
+                </div>
+                
+                <div>
+                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5">Alamat Lengkap</label>
+                    <div class="flex gap-2">
+                        <input id="ibadahAddress" type="text" placeholder="Mencari alamat..." class="flex-1 bg-slate-50 border border-slate-200 rounded-xl px-4 py-2 text-sm outline-none focus:border-indigo-500 focus:bg-white transition">
+                        <button onclick="reverseGeocodeIbadah()" class="bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs px-3 rounded-xl transition font-semibold">Cari</button>
+                    </div>
+                </div>
+
+                <div class="grid grid-cols-2 gap-4">
+                    <div>
+                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5">Nama Pengurus (PIC)</label>
+                        <input id="ibadahPic" type="text" placeholder="Nama Koordinator" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-2 text-sm outline-none focus:border-indigo-500 focus:bg-white transition">
+                    </div>
+                    <div>
+                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5">Radius Pelayanan (meter)</label>
+                        <input id="ibadahRadius" type="number" value="1000" min="100" max="5000" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-2 text-sm outline-none focus:border-indigo-500 focus:bg-white transition">
+                    </div>
+                </div>
+                
+                <div class="text-[10px] text-slate-400 bg-slate-50 p-2.5 rounded-lg font-mono">
+                    📍 Koordinat: <span id="ibadahCoords" class="font-bold text-slate-600">0, 0</span>
+                </div>
+            </div>
+            <div class="p-5 border-t border-slate-100 bg-slate-50/50 flex gap-2">
+                <button onclick="saveIbadah()" class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold text-sm py-2.5 px-4 rounded-xl shadow-lg transition">Simpan</button>
+                <button onclick="closeIbadahModal()" class="bg-slate-200 hover:bg-slate-300 text-slate-700 font-semibold text-sm py-2.5 px-4 rounded-xl transition">Batal</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Modal Input Penduduk Miskin -->
+    <div id="miskinModal" class="fixed inset-0 z-[10000] hidden items-center justify-center bg-slate-900/40 backdrop-blur-sm px-4">
+        <div class="w-full max-w-md bg-white rounded-2xl shadow-2xl border border-slate-100 overflow-hidden transform scale-95 opacity-0 transition-all duration-300">
+            <div class="p-5 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
+                <h3 class="font-bold text-slate-800" id="miskinModalTitle">Tambah Penduduk Miskin</h3>
+                <button onclick="closeMiskinModal()" class="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-slate-200 transition text-slate-500">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+                </button>
+            </div>
+            <div class="p-5 space-y-4">
+                <input type="hidden" id="editMiskinId">
+                <div>
+                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5">Nama Ketua KK</label>
+                    <input id="miskinName" type="text" placeholder="Masukkan nama kepala keluarga" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-2.5 text-sm outline-none focus:border-indigo-500 focus:bg-white transition shadow-sm">
+                </div>
+                
+                <div>
+                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5">Jumlah Anggota Keluarga (Jiwa)</label>
+                    <input id="miskinCount" type="number" min="1" max="20" value="4" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-2.5 text-sm outline-none focus:border-indigo-500 focus:bg-white transition shadow-sm">
+                </div>
+
+                <div class="text-[10px] text-slate-400 bg-slate-50 p-2.5 rounded-lg space-y-1">
+                    <div>📍 Koordinat: <span id="miskinCoords" class="font-mono font-bold text-slate-600">0, 0</span></div>
+                    <div class="text-indigo-600 font-medium">Sistem akan mencocokkan secara otomatis rumah ibadah terdekat beserta jaraknya.</div>
+                </div>
+            </div>
+            <div class="p-5 border-t border-slate-100 bg-slate-50/50 flex gap-2">
+                <button onclick="saveMiskin()" class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold text-sm py-2.5 px-4 rounded-xl shadow-lg transition">Simpan</button>
+                <button onclick="closeMiskinModal()" class="bg-slate-200 hover:bg-slate-300 text-slate-700 font-semibold text-sm py-2.5 px-4 rounded-xl transition">Batal</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Modal Update Bantuan Status -->
+    <div id="bantuanModal" class="fixed inset-0 z-[10000] hidden items-center justify-center bg-slate-900/40 backdrop-blur-sm px-4">
+        <div class="w-full max-w-md bg-white rounded-2xl shadow-2xl border border-slate-100 overflow-hidden transform scale-95 opacity-0 transition-all duration-300">
+            <div class="p-5 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
+                <h3 class="font-bold text-slate-800">Perbarui Status Bantuan</h3>
+                <button onclick="closeBantuanModal()" class="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-slate-200 transition text-slate-500">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+                </button>
+            </div>
+            <div class="p-5 space-y-4">
+                <input type="hidden" id="bantuanPendudukId">
+                <div>
+                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5 font-bold">Keluarga Ketua KK</label>
+                    <input id="bantuanKKName" type="text" readonly class="w-full bg-slate-100 border border-slate-200 rounded-xl px-4 py-2 text-sm text-slate-500 outline-none">
+                </div>
+
+                <div>
+                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5">Status Bantuan</label>
+                    <select id="bantuanStatus" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 py-2 text-sm outline-none focus:border-indigo-500 focus:bg-white transition shadow-sm">
+                        <option value="belum">Belum Dibantu</option>
+                        <option value="proses">Dalam Proses</option>
+                        <option value="sudah">Sudah Dibantu</option>
+                    </select>
+                </div>
+                
+                <div>
+                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5">Catatan Penyaluran</label>
+                    <textarea id="bantuanCatatan" placeholder="Masukkan catatan, tanggal penyaluran, nama bansos, dsb..." rows="3" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-2 text-sm outline-none focus:border-indigo-500 focus:bg-white transition shadow-sm"></textarea>
+                </div>
+            </div>
+            <div class="p-5 border-t border-slate-100 bg-slate-50/50 flex gap-2">
+                <button onclick="updateBantuanStatus()" class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold text-sm py-2.5 px-4 rounded-xl shadow-lg transition">Simpan Perubahan</button>
+                <button onclick="closeBantuanModal()" class="bg-slate-200 hover:bg-slate-300 text-slate-700 font-semibold text-sm py-2.5 px-4 rounded-xl transition">Batal</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Modal Input Verifikasi Lapangan -->
+    <div id="verifModal" class="fixed inset-0 z-[10000] hidden items-center justify-center bg-slate-900/40 backdrop-blur-sm px-4">
+        <div class="w-full max-w-md bg-white rounded-2xl shadow-2xl border border-slate-100 overflow-hidden transform scale-95 opacity-0 transition-all duration-300">
+            <div class="p-5 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
+                <h3 class="font-bold text-slate-800" id="verifModalTitle">Lapor Verifikasi Lapangan</h3>
+                <button onclick="closeVerifModal()" class="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-slate-200 transition text-slate-500">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+                </button>
+            </div>
+            <div class="p-5 space-y-4">
+                <input type="hidden" id="editVerifId">
+                <div class="grid grid-cols-2 gap-4">
+                    <div>
+                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5">Jenis Target</label>
+                        <select id="verifTargetType" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 py-2 text-sm outline-none focus:border-indigo-500 focus:bg-white transition">
+                            <option value="penduduk_miskin">Keluarga Miskin</option>
+                            <option value="rumah_ibadah">Rumah Ibadah</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5">Nama Target</label>
+                        <input id="verifTargetName" type="text" placeholder="Nama target" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-2 text-sm outline-none focus:border-indigo-500 focus:bg-white transition">
+                    </div>
+                </div>
+
+                <div class="grid grid-cols-2 gap-4">
+                    <div>
+                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5">Nama Petugas</label>
+                        <input id="verifOfficerName" type="text" placeholder="Petugas Lapangan" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-2 text-sm outline-none focus:border-indigo-500 focus:bg-white transition">
+                    </div>
+                    <div>
+                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5">Status Verifikasi</label>
+                        <select id="verifStatus" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 py-2 text-sm outline-none focus:border-indigo-500 focus:bg-white transition">
+                            <option value="menunggu">Menunggu</option>
+                            <option value="terverifikasi">Terverifikasi</option>
+                            <option value="ditolak">Ditolak</option>
+                        </select>
+                    </div>
+                </div>
+
+                <div>
+                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5">Hasil Temuan</label>
+                    <textarea id="verifFindings" placeholder="Tulis kondisi aktual temuan lapangan..." rows="2" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-2 text-sm outline-none focus:border-indigo-500 focus:bg-white transition"></textarea>
+                </div>
+
+                <div>
+                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5">Tindak Lanjut</label>
+                    <textarea id="verifFollowUp" placeholder="Rencana tindak lanjut..." rows="2" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-2 text-sm outline-none focus:border-indigo-500 focus:bg-white transition"></textarea>
+                </div>
+
+                <div>
+                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5">Foto Temuan (Opsional)</label>
+                    <input id="verifPhoto" type="file" accept="image/*" class="w-full border border-slate-200 rounded-xl p-1.5 text-xs bg-slate-50">
+                </div>
+
+                <div class="text-[10px] text-slate-400 bg-slate-50 p-2 rounded-lg font-mono">
+                    📍 Koordinat: <span id="verifCoords">0, 0</span>
+                </div>
+            </div>
+            <div class="p-5 border-t border-slate-100 bg-slate-50/50 flex gap-2">
+                <button onclick="saveVerif()" class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold text-sm py-2.5 px-4 rounded-xl shadow-lg transition">Simpan</button>
+                <button onclick="closeVerifModal()" class="bg-slate-200 hover:bg-slate-300 text-slate-700 font-semibold text-sm py-2.5 px-4 rounded-xl transition">Batal</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Leaflet & Draw JS -->
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+    <script src="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.js"></script>
+
+    <script>
+        // Init Map
+        const map = L.map('map', { zoomControl: false }).setView([-0.0263, 109.3425], 13);
+        L.control.zoom({ position: 'topright' }).addTo(map);
+
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; OpenStreetMap contributors'
+        }).addTo(map);
+
+        // Feature Groups for markers
+        const ibadahGroup = L.featureGroup().addTo(map);
+        const miskinGroup = L.featureGroup().addTo(map);
+        const verifGroup = L.featureGroup().addTo(map);
+        const bufferGroup = L.featureGroup().addTo(map);
+
+        // Leaflet Draw Control (Restricted to Markers)
+        const drawControl = new L.Control.Draw({
+            draw: {
+                marker: true,
+                polygon: false,
+                polyline: false,
+                circle: false,
+                circlemarker: false,
+                rectangle: false
+            },
+            edit: false
+        });
+        map.addControl(drawControl);
+
+        let activeTab = 'ibadah';
+        let addModeType = null; // 'ibadah', 'miskin', 'verif'
+        let pendingLatLng = null;
+
+        let ibadahRecords = [];
+        let miskinRecords = [];
+        let verifRecords = [];
+        
+        let mapIbadahLayers = {};
+        let mapMiskinLayers = {};
+        let mapVerifLayers = {};
+
+        // Load all data
+        async function loadAllData() {
+            try {
+                // Ibadah
+                const resIbadah = await fetch('api/get_rumah_ibadah.php');
+                ibadahRecords = await resIbadah.json();
+                renderIbadahList(ibadahRecords);
+                displayIbadahOnMap(ibadahRecords);
+                populateIbadahDropdown();
+
+                // Miskin
+                const resMiskin = await fetch('api/get_penduduk_miskin.php');
+                miskinRecords = await resMiskin.json();
+                renderMiskinList(miskinRecords);
+                displayMiskinOnMap(miskinRecords);
+
+                // Verif
+                const resVerif = await fetch('api/get_verifikasi_lapangan.php');
+                verifRecords = await resVerif.json();
+                renderVerifList(verifRecords);
+                displayVerifOnMap(verifRecords);
+            } catch (err) {
+                console.error(err);
+                showToast('Gagal memuat data spasial.', 'error');
+            }
+        }
+
+        // Dropdown for Bantuan Filter
+        function populateIbadahDropdown() {
+            const dropdown = document.getElementById('bantuanIbadahFilter');
+            dropdown.innerHTML = '<option value="">Pilih rumah ibadah...</option>' + 
+                ibadahRecords.map(rec => `<option value="${rec.id}">${rec.nama}</option>`).join('');
+        }
+
+        // Custom DivIcon Worship Places
+        function createWorshipIcon() {
+            return L.divIcon({
+                html: `
+                    <div class="relative w-8 h-8 flex items-center justify-center rounded-xl bg-white shadow-lg border-2 border-indigo-600 transition transform hover:scale-110">
+                        <svg class="text-indigo-600 w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                            <path d="M12 3 4 8v13h16V8z"/>
+                            <path d="M9 21v-7h6v7"/>
+                        </svg>
+                    </div>`,
+                className: 'spbu-marker-icon',
+                iconSize: [32, 32],
+                iconAnchor: [16, 16]
+            });
+        }
+
+        // Custom DivIcon Poor Residents
+        function createMiskinIcon(status) {
+            const color = status === 'sudah' ? '#10b981' : (status === 'proses' ? '#f59e0b' : '#ef4444');
+            return L.divIcon({
+                html: `
+                    <div class="relative w-6 h-6 flex items-center justify-center rounded-full bg-white shadow-lg border border-slate-200 transition transform hover:scale-110">
+                        <div class="w-3.5 h-3.5 rounded-full flex items-center justify-center" style="background-color: ${color}">
+                            <svg class="text-white w-2 h-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+                                <circle cx="12" cy="7" r="4"/><path d="M4 21v-2a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v2"/>
+                            </svg>
+                        </div>
+                    </div>`,
+                className: 'spbu-marker-icon',
+                iconSize: [24, 24],
+                iconAnchor: [12, 12]
+            });
+        }
+
+        // Custom DivIcon Field Verifications
+        function createVerifIcon(status) {
+            const color = status === 'terverifikasi' ? '#10b981' : (status === 'ditolak' ? '#dc2626' : '#64748b');
+            return L.divIcon({
+                html: `
+                    <div class="relative w-6 h-6 flex items-center justify-center rounded-full bg-white shadow-lg border border-slate-200 transition transform hover:scale-110">
+                        <div class="w-3.5 h-3.5 rounded-full flex items-center justify-center" style="background-color: ${color}">
+                            <svg class="text-white w-2 h-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+                                <polyline points="20 6 9 17 4 12"/>
+                            </svg>
+                        </div>
+                    </div>`,
+                className: 'spbu-marker-icon',
+                iconSize: [24, 24],
+                iconAnchor: [12, 12]
+            });
+        }
+
+        // Display Rumah Ibadah on Map
+        function displayIbadahOnMap(items) {
+            ibadahGroup.clearLayers();
+            mapIbadahLayers = {};
+
+            items.forEach(item => {
+                const lat = parseFloat(item.latitude);
+                const lng = parseFloat(item.longitude);
+                if (isNaN(lat) || isNaN(lng)) return;
+
+                const marker = L.marker([lat, lng], { icon: createWorshipIcon() }).addTo(ibadahGroup);
+                
+                marker.on('click', (e) => {
+                    L.DomEvent.stopPropagation(e);
+                    
+                    // Show radius buffer circle
+                    bufferGroup.clearLayers();
+                    L.circle([lat, lng], {
+                        radius: parseFloat(item.radius_m) || 0,
+                        color: '#6366f1',
+                        fillColor: '#818cf8',
+                        fillOpacity: 0.1,
+                        weight: 1.5
+                    }).addTo(bufferGroup);
+
+                    // Zoom and center
+                    map.setView([lat, lng], 15);
+
+                    // Info popup
+                    const popupContent = `
+                        <div class="custom-popup">
+                            <h4 class="font-bold text-slate-800 text-sm">${escapeHtml(item.nama)}</h4>
+                            <p class="text-xs text-slate-500 mt-1">${escapeHtml(item.alamat)}</p>
+                            <div class="text-[10px] text-slate-400 mt-2 space-y-0.5">
+                                <div>PIC: <strong>${escapeHtml(item.pic)}</strong></div>
+                                <div>Radius Pelayanan: <strong>${item.radius_m} meter</strong></div>
+                            </div>
+                            <div class="mt-3 pt-2 border-t border-slate-100 flex gap-2 justify-between">
+                                <button onclick="findNearbyPoor(${item.id}, ${item.radius_m}, ${lat}, ${lng})" class="bg-indigo-50 hover:bg-indigo-100 text-indigo-700 text-xs font-bold px-3 py-1.5 rounded-lg transition">Cari Miskin</button>
+                                <button onclick="openEditIbadah(${item.id})" class="text-xs text-slate-600 font-semibold hover:underline">Edit</button>
+                                <button onclick="deleteIbadahDirect(${item.id})" class="text-xs text-red-600 font-semibold hover:underline">Hapus</button>
+                            </div>
+                        </div>`;
+                    
+                    marker.bindPopup(popupContent).openPopup();
+                });
+
+                mapIbadahLayers[item.id] = marker;
+            });
+        }
+
+        // Display Miskin on Map
+        function displayMiskinOnMap(items) {
+            miskinGroup.clearLayers();
+            mapMiskinLayers = {};
+
+            items.forEach(item => {
+                const lat = parseFloat(item.latitude);
+                const lng = parseFloat(item.longitude);
+                if (isNaN(lat) || isNaN(lng)) return;
+
+                const marker = L.marker([lat, lng], {
+                    icon: createMiskinIcon(item.bantuan_status)
+                }).addTo(miskinGroup);
+
+                marker.on('click', (e) => {
+                    L.DomEvent.stopPropagation(e);
+                    
+                    const popupContent = `
+                        <div class="custom-popup">
+                            <h4 class="font-bold text-slate-800 text-sm">KK: ${escapeHtml(item.nama_ketua_kk)}</h4>
+                            <div class="text-[10px] text-slate-500 mt-1.5 space-y-1">
+                                <div>Jumlah Anggota: <strong>${item.jumlah_anggota} jiwa</strong></div>
+                                <div class="text-indigo-700 font-semibold">Tempat Ibadah Terdekat: ${escapeHtml(item.rumah_ibadah_nama)}</div>
+                                <div>Jarak: <strong>${Math.round(item.jarak_ke_rumah_ibadah_m)} meter</strong></div>
+                            </div>
+                            <div class="mt-3 pt-2 border-t border-slate-100 flex justify-between items-center">
+                                <button onclick="openBantuanStatusModal(${item.id}, '${escapeHtml(item.nama_ketua_kk)}', '${item.bantuan_status}', '${escapeHtml(item.bantuan_catatan)}')" class="bg-indigo-600 hover:bg-indigo-700 text-white text-[10px] font-bold px-2.5 py-1.5 rounded-lg transition shadow-md">Bantuan Status</button>
+                                <button onclick="openEditMiskin(${item.id})" class="text-xs text-slate-600 font-semibold hover:underline">Edit</button>
+                                <button onclick="deleteMiskinDirect(${item.id})" class="text-xs text-red-600 font-semibold hover:underline">Hapus</button>
+                            </div>
+                        </div>`;
+
+                    marker.bindPopup(popupContent).openPopup();
+                });
+
+                mapMiskinLayers[item.id] = marker;
+            });
+        }
+
+        // Display Verif on Map
+        function displayVerifOnMap(items) {
+            verifGroup.clearLayers();
+            mapVerifLayers = {};
+
+            items.forEach(item => {
+                const lat = parseFloat(item.latitude);
+                const lng = parseFloat(item.longitude);
+                if (isNaN(lat) || isNaN(lng)) return;
+
+                const marker = L.marker([lat, lng], {
+                    icon: createVerifIcon(item.status_verifikasi)
+                }).addTo(verifGroup);
+
+                marker.on('click', (e) => {
+                    L.DomEvent.stopPropagation(e);
+
+                    const photoTag = item.foto ? `<img src="../../${item.foto}" alt="Foto Temuan" class="w-full max-h-36 rounded-lg object-cover mt-2.5 shadow-sm">` : '';
+                    
+                    const popupContent = `
+                        <div class="custom-popup">
+                            <h4 class="font-bold text-slate-800 text-sm">Petugas: ${escapeHtml(item.petugas_nama)}</h4>
+                            <div class="text-[10px] text-slate-500 mt-1 space-y-0.5">
+                                <div>Target: <strong>${escapeHtml(item.target_nama)} (${item.jenis_target.replace('_', ' ')})</strong></div>
+                                <div>Status: <span class="uppercase font-extrabold text-[9px] px-1.5 py-0.5 rounded ${item.status_verifikasi === 'terverifikasi' ? 'bg-emerald-100 text-emerald-700' : (item.status_verifikasi === 'ditolak' ? 'bg-rose-100 text-rose-700' : 'bg-slate-100 text-slate-700')}">${item.status_verifikasi}</span></div>
+                            </div>
+                            <p class="text-xs text-slate-700 mt-2"><strong>Temuan:</strong> ${escapeHtml(item.hasil_temuan || '-')}</p>
+                            <p class="text-xs text-indigo-700"><strong>Tindak Lanjut:</strong> ${escapeHtml(item.tindak_lanjut || '-')}</p>
+                            ${photoTag}
+                            <div class="mt-3 pt-2 border-t border-slate-100 flex justify-end gap-2">
+                                <button onclick="openEditVerif(${item.id})" class="text-xs text-slate-600 font-semibold hover:underline">Edit</button>
+                                <button onclick="deleteVerifDirect(${item.id})" class="text-xs text-red-600 font-semibold hover:underline">Hapus</button>
+                            </div>
+                        </div>`;
+
+                    marker.bindPopup(popupContent).openPopup();
+                });
+
+                mapVerifLayers[item.id] = marker;
+            });
+        }
+
+        // Render Lists in Sidebar
+        function renderIbadahList(items) {
+            const list = document.getElementById('listIbadah');
+            if (items.length === 0) {
+                list.innerHTML = `<div class="text-center py-8 text-slate-400 text-sm">Belum ada rumah ibadah.</div>`;
+                return;
+            }
+            list.innerHTML = items.map(item => `
+                <div onclick="focusIbadah(${item.id})" class="p-3.5 bg-white border border-slate-200 rounded-2xl hover:border-indigo-500 cursor-pointer transition flex flex-col gap-1.5">
+                    <span class="font-bold text-slate-800 text-sm">${escapeHtml(item.nama)}</span>
+                    <span class="text-xs text-slate-500 line-clamp-1">${escapeHtml(item.alamat)}</span>
+                    <div class="flex items-center justify-between text-[10px] text-slate-400 border-t border-slate-50 pt-2">
+                        <span>PIC: ${escapeHtml(item.pic)}</span>
+                        <span>Radius: <strong>${item.radius_m}m</strong></span>
+                    </div>
+                </div>`).join('');
+        }
+
+        function renderMiskinList(items) {
+            const list = document.getElementById('listMiskin');
+            if (items.length === 0) {
+                list.innerHTML = `<div class="text-center py-8 text-slate-400 text-sm">Belum ada data keluarga miskin.</div>`;
+                return;
+            }
+            list.innerHTML = items.map(item => {
+                const color = item.bantuan_status === 'sudah' ? 'bg-emerald-100 text-emerald-700' : (item.bantuan_status === 'proses' ? 'bg-amber-100 text-amber-700' : 'bg-rose-100 text-rose-700');
+                return `
+                    <div onclick="focusMiskin(${item.id})" class="p-3.5 bg-white border border-slate-200 rounded-2xl hover:border-emerald-500 cursor-pointer transition flex flex-col gap-1.5">
+                        <div class="flex justify-between items-start gap-3">
+                            <span class="font-bold text-slate-800 text-sm">${escapeHtml(item.nama_ketua_kk)}</span>
+                            <span class="text-[9px] font-extrabold uppercase tracking-wider px-2 py-0.5 rounded-full ${color}">
+                                ${item.bantuan_status}
+                            </span>
+                        </div>
+                        <div class="text-[10px] text-slate-400">
+                            <div>Anggota: <strong>${item.jumlah_anggota} jiwa</strong></div>
+                            <div class="text-slate-500 font-medium mt-1">Terdekat: ${escapeHtml(item.rumah_ibadah_nama)} (${Math.round(item.jarak_ke_rumah_ibadah_m)}m)</div>
+                        </div>
+                    </div>`;
+            }).join('');
+        }
+
+        function renderVerifList(items) {
+            const list = document.getElementById('listVerif');
+            if (items.length === 0) {
+                list.innerHTML = `<div class="text-center py-8 text-slate-400 text-sm">Belum ada verifikasi lapangan.</div>`;
+                return;
+            }
+            list.innerHTML = items.map(item => {
+                const statusColor = item.status_verifikasi === 'terverifikasi' ? 'bg-emerald-100 text-emerald-700' : (item.status_verifikasi === 'ditolak' ? 'bg-rose-100 text-rose-700' : 'bg-slate-100 text-slate-700');
+                return `
+                    <div onclick="focusVerif(${item.id})" class="p-3.5 bg-white border border-slate-200 rounded-2xl hover:border-slate-500 cursor-pointer transition flex flex-col gap-1.5">
+                        <div class="flex justify-between items-start gap-3">
+                            <span class="font-bold text-slate-800 text-sm">Petugas: ${escapeHtml(item.petugas_nama)}</span>
+                            <span class="text-[9px] font-extrabold uppercase tracking-wider px-2 py-0.5 rounded-full ${statusColor}">
+                                ${item.status_verifikasi}
+                            </span>
+                        </div>
+                        <div class="text-[10px] text-slate-500">
+                            Target: <strong>${escapeHtml(item.target_nama)}</strong> (${item.jenis_target.replace('_', ' ')})
+                        </div>
+                    </div>`;
+            }).join('');
+        }
+
+        // Focus Handlers
+        function focusIbadah(id) {
+            const marker = mapIbadahLayers[id];
+            if (marker) {
+                map.setView(marker.getLatLng(), 15);
+                marker.fire('click');
+            }
+        }
+
+        function focusMiskin(id) {
+            const marker = mapMiskinLayers[id];
+            if (marker) {
+                map.setView(marker.getLatLng(), 16);
+                marker.openPopup();
+            }
+        }
+
+        function focusVerif(id) {
+            const marker = mapVerifLayers[id];
+            if (marker) {
+                map.setView(marker.getLatLng(), 16);
+                marker.openPopup();
+            }
+        }
+
+        // Find Nearby Poor Families (Radius analysis)
+        window.findNearbyPoor = function(ibadahId, radius, lat, lng) {
+            bufferGroup.clearLayers();
+            L.circle([lat, lng], {
+                radius: radius,
+                color: '#10b981',
+                fillColor: '#a7f3d0',
+                fillOpacity: 0.15,
+                weight: 1.5
+            }).addTo(bufferGroup);
+
+            // Filter poor residents inside radius
+            const inside = miskinRecords.filter(rec => rec.rumah_ibadah_id === ibadahId && rec.jarak_ke_rumah_ibadah_m <= radius);
+            
+            if (inside.length === 0) {
+                showToast('Tidak ada keluarga miskin dalam radius pelayanan rumah ibadah ini.', 'info');
+                return;
+            }
+
+            // Create a bounds group to fit all residents + houses of worship
+            const boundsGroup = L.featureGroup();
+            boundsGroup.addLayer(mapIbadahLayers[ibadahId]);
+            inside.forEach(rec => boundsGroup.addLayer(mapMiskinLayers[rec.id]));
+
+            map.fitBounds(boundsGroup.getBounds(), { padding: [50, 50] });
+            showToast(`Ditemukan ${inside.length} keluarga miskin dalam radius pelayanan.`, 'success');
+        };
+
+        // Filter Bantuan List
+        window.filterBantuanByIbadah = function() {
+            const ibadahIdStr = document.getElementById('bantuanIbadahFilter').value;
+            const statusFilter = document.getElementById('bantuanStatusFilter').value;
+            const container = document.getElementById('bantuanItems');
+
+            if (!ibadahIdStr) {
+                container.innerHTML = `<div class="text-center py-8 text-slate-400 text-xs">Pilih rumah ibadah untuk memfilter penerima bantuan.</div>`;
+                return;
+            }
+
+            const ibadahId = parseInt(ibadahIdStr);
+            let filtered = miskinRecords.filter(rec => rec.rumah_ibadah_id === ibadahId);
+
+            if (statusFilter !== 'all') {
+                filtered = filtered.filter(rec => rec.bantuan_status === statusFilter);
+            }
+
+            if (filtered.length === 0) {
+                container.innerHTML = `<div class="text-center py-8 text-slate-400 text-xs">Tidak ada penerima bantuan di wilayah rumah ibadah ini dengan filter terpilih.</div>`;
+                return;
+            }
+
+            container.innerHTML = filtered.map(rec => {
+                const color = rec.bantuan_status === 'sudah' ? 'bg-emerald-100 text-emerald-700' : (rec.bantuan_status === 'proses' ? 'bg-amber-100 text-amber-700' : 'bg-rose-100 text-rose-700');
+                return `
+                    <div class="p-4 bg-white border border-slate-200 rounded-2xl flex flex-col gap-2 shadow-sm">
+                        <div class="flex justify-between items-start gap-3">
+                            <span class="font-bold text-slate-800 text-sm">${escapeHtml(rec.nama_ketua_kk)}</span>
+                            <span class="text-[9px] font-extrabold uppercase tracking-wider px-2 py-0.5 rounded-full ${color}">
+                                ${rec.bantuan_status}
+                            </span>
+                        </div>
+                        <div class="text-[10px] text-slate-500">
+                            <div>Jumlah Anggota: <strong>${rec.jumlah_anggota} jiwa</strong></div>
+                            <div>Catatan: <span class="italic text-slate-400">${escapeHtml(rec.bantuan_catatan || 'Belum ada catatan')}</span></div>
+                        </div>
+                        <div class="mt-2.5 pt-2 border-t border-slate-50 flex justify-between gap-2">
+                            <button onclick="focusMiskin(${rec.id})" class="text-xs text-indigo-600 font-bold hover:underline">Fokus Peta</button>
+                            <button onclick="openBantuanStatusModal(${rec.id}, '${escapeHtml(rec.nama_ketua_kk)}', '${rec.bantuan_status}', '${escapeHtml(rec.bantuan_catatan)}')" class="bg-indigo-50 hover:bg-indigo-100 text-indigo-700 text-xs px-2.5 py-1 rounded-lg transition font-bold">Update Status</button>
+                        </div>
+                    </div>`;
+            }).join('');
+        };
+
+        // Draw Marker Event
+        map.on(L.Draw.Event.CREATED, function (e) {
+            const layer = e.layer;
+            pendingLatLng = layer.getLatLng();
+
+            if (addModeType === 'ibadah') {
+                document.getElementById('editIbadahId').value = '';
+                document.getElementById('ibadahName').value = '';
+                document.getElementById('ibadahAddress').value = '';
+                document.getElementById('ibadahPic').value = '';
+                document.getElementById('ibadahRadius').value = '1000';
+                document.getElementById('ibadahCoords').textContent = `${pendingLatLng.lat.toFixed(6)}, ${pendingLatLng.lng.toFixed(6)}`;
+                
+                openIbadahModal();
+                reverseGeocodeIbadah(); // auto geocode
+            } else if (addModeType === 'miskin') {
+                document.getElementById('editMiskinId').value = '';
+                document.getElementById('miskinName').value = '';
+                document.getElementById('miskinCount').value = '4';
+                document.getElementById('miskinCoords').textContent = `${pendingLatLng.lat.toFixed(6)}, ${pendingLatLng.lng.toFixed(6)}`;
+
+                openMiskinModal();
+            } else if (addModeType === 'verif') {
+                document.getElementById('editVerifId').value = '';
+                document.getElementById('verifTargetName').value = '';
+                document.getElementById('verifOfficerName').value = '';
+                document.getElementById('verifFindings').value = '';
+                document.getElementById('verifFollowUp').value = '';
+                document.getElementById('verifPhoto').value = '';
+                document.getElementById('verifCoords').textContent = `${pendingLatLng.lat.toFixed(6)}, ${pendingLatLng.lng.toFixed(6)}`;
+
+                openVerifModal();
+            }
+        });
+
+        // Add Mode triggers
+        function activateAddMode(type) {
+            addModeType = type;
+            showToast(`Klik lokasi pada peta untuk meletakkan titik ${type.replace('_', ' ')}.`, 'info');
+            
+            // Trigger marker drawing tool programmatically
+            new L.Draw.Marker(map, drawControl.options.draw.marker).enable();
+        }
+
+        // Reverse Geocoding via Nominatim
+        async function reverseGeocodeIbadah() {
+            if (!pendingLatLng) return;
+            const input = document.getElementById('ibadahAddress');
+            input.value = 'Mencari alamat...';
+
+            try {
+                const url = `https://nominatim.openstreetmap.org/reverse?format=json&lat=${pendingLatLng.lat}&lon=${pendingLatLng.lng}&zoom=18&addressdetails=1`;
+                const response = await fetch(url, { headers: { 'Accept-Language': 'id' } });
+                const data = await response.json();
+                if (data && data.display_name) {
+                    input.value = data.display_name;
+                } else {
+                    input.value = '';
+                }
+            } catch (err) {
+                console.error(err);
+                input.value = '';
+            }
+        }
+
+        // Save Worship Place
+        async function saveIbadah() {
+            const id = document.getElementById('editIbadahId').value;
+            const name = document.getElementById('ibadahName').value.trim();
+            const address = document.getElementById('ibadahAddress').value.trim();
+            const pic = document.getElementById('ibadahPic').value.trim();
+            const radius = document.getElementById('ibadahRadius').value;
+
+            if (!name || !address || !pic) {
+                showToast('Lengkapi semua data input rumah ibadah.', 'error');
+                return;
+            }
+
+            const formData = new FormData();
+            formData.append('nama', name);
+            formData.append('alamat', address);
+            formData.append('pic', pic);
+            formData.append('latitude', pendingLatLng.lat);
+            formData.append('longitude', pendingLatLng.lng);
+            formData.append('radius_m', radius);
+
+            let endpoint = 'api/save_rumah_ibadah.php';
+            if (id) {
+                endpoint = 'api/update_rumah_ibadah.php';
+                formData.append('id', id);
+            }
+
+            try {
+                const res = await fetch(endpoint, { method: 'POST', body: formData });
+                const data = await res.json();
+                if (data.status === 'success') {
+                    showToast('Data rumah ibadah disimpan!', 'success');
+                    closeIbadahModal();
+                    loadAllData();
+                } else {
+                    throw new Error(data.message);
+                }
+            } catch (err) {
+                showToast(err.message || 'Gagal menyimpan.', 'error');
+            }
+        }
+
+        // Save Poor Family
+        async function saveMiskin() {
+            const id = document.getElementById('editMiskinId').value;
+            const name = document.getElementById('miskinName').value.trim();
+            const count = document.getElementById('miskinCount').value;
+
+            if (!name || count <= 0) {
+                showToast('Lengkapi data ketua KK dan jumlah anggota.', 'error');
+                return;
+            }
+
+            const formData = new FormData();
+            formData.append('nama_ketua_kk', name);
+            formData.append('jumlah_anggota', count);
+            formData.append('latitude', pendingLatLng.lat);
+            formData.append('longitude', pendingLatLng.lng);
+
+            let endpoint = 'api/save_penduduk_miskin.php';
+            if (id) {
+                endpoint = 'api/update_penduduk_miskin.php';
+                formData.append('id', id);
+            }
+
+            try {
+                const res = await fetch(endpoint, { method: 'POST', body: formData });
+                const data = await res.json();
+                if (data.status === 'success') {
+                    showToast('Data keluarga miskin disimpan!', 'success');
+                    closeMiskinModal();
+                    loadAllData();
+                } else {
+                    throw new Error(data.message);
+                }
+            } catch (err) {
+                showToast(err.message || 'Gagal menyimpan.', 'error');
+            }
+        }
+
+        // Save Verification report
+        async function saveVerif() {
+            const id = document.getElementById('editVerifId').value;
+            const targetType = document.getElementById('verifTargetType').value;
+            const targetName = document.getElementById('verifTargetName').value.trim();
+            const officerName = document.getElementById('verifOfficerName').value.trim();
+            const status = document.getElementById('verifStatus').value;
+            const findings = document.getElementById('verifFindings').value.trim();
+            const followUp = document.getElementById('verifFollowUp').value.trim();
+            const fileImg = document.getElementById('verifPhoto').files[0];
+
+            if (!officerName || !targetName) {
+                showToast('Nama petugas dan target wajib diisi.', 'error');
+                return;
+            }
+
+            const formData = new FormData();
+            formData.append('jenis_target', targetType);
+            formData.append('target_nama', targetName);
+            formData.append('petugas_nama', officerName);
+            formData.append('status_verifikasi', status);
+            formData.append('hasil_temuan', findings);
+            formData.append('tindak_lanjut', followUp);
+            formData.append('latitude', pendingLatLng.lat);
+            formData.append('longitude', pendingLatLng.lng);
+            if (fileImg) {
+                formData.append('foto', fileImg);
+            }
+
+            let endpoint = 'api/save_verifikasi_lapangan.php';
+            if (id) {
+                endpoint = 'api/update_verifikasi_lapangan.php';
+                formData.append('id', id);
+            }
+
+            try {
+                const res = await fetch(endpoint, { method: 'POST', body: formData });
+                const data = await res.json();
+                if (data.status === 'success') {
+                    showToast('Laporan verifikasi lapangan disimpan!', 'success');
+                    closeVerifModal();
+                    loadAllData();
+                } else {
+                    throw new Error(data.message);
+                }
+            } catch (err) {
+                showToast(err.message || 'Gagal menyimpan.', 'error');
+            }
+        }
+
+        // Edit Worship Place Mode Trigger
+        window.openEditIbadah = function(id) {
+            const rec = ibadahRecords.find(r => r.id === id);
+            if (!rec) return;
+
+            pendingLatLng = L.latLng(rec.latitude, rec.longitude);
+
+            document.getElementById('editIbadahId').value = rec.id;
+            document.getElementById('ibadahName').value = rec.nama;
+            document.getElementById('ibadahAddress').value = rec.alamat;
+            document.getElementById('ibadahPic').value = rec.pic;
+            document.getElementById('ibadahRadius').value = rec.radius_m;
+            document.getElementById('ibadahCoords').textContent = `${rec.latitude.toFixed(6)}, ${rec.longitude.toFixed(6)}`;
+
+            document.getElementById('ibadahModalTitle').textContent = 'Edit Rumah Ibadah';
+            openIbadahModal();
+        };
+
+        // Edit Poor Resident Mode Trigger
+        window.openEditMiskin = function(id) {
+            const rec = miskinRecords.find(r => r.id === id);
+            if (!rec) return;
+
+            pendingLatLng = L.latLng(rec.latitude, rec.longitude);
+
+            document.getElementById('editMiskinId').value = rec.id;
+            document.getElementById('miskinName').value = rec.nama_ketua_kk;
+            document.getElementById('miskinCount').value = rec.jumlah_anggota;
+            document.getElementById('miskinCoords').textContent = `${rec.latitude.toFixed(6)}, ${rec.longitude.toFixed(6)}`;
+
+            document.getElementById('miskinModalTitle').textContent = 'Edit Penduduk Miskin';
+            openMiskinModal();
+        };
+
+        // Edit Verif trigger
+        window.openEditVerif = function(id) {
+            const rec = verifRecords.find(r => r.id === id);
+            if (!rec) return;
+
+            pendingLatLng = L.latLng(rec.latitude, rec.longitude);
+
+            document.getElementById('editVerifId').value = rec.id;
+            document.getElementById('verifTargetType').value = rec.jenis_target;
+            document.getElementById('verifTargetName').value = rec.target_nama;
+            document.getElementById('verifOfficerName').value = rec.petugas_nama;
+            document.getElementById('verifStatus').value = rec.status_verifikasi;
+            document.getElementById('verifFindings').value = rec.hasil_temuan;
+            document.getElementById('verifFollowUp').value = rec.tindak_lanjut;
+            document.getElementById('verifCoords').textContent = `${rec.latitude.toFixed(6)}, ${rec.longitude.toFixed(6)}`;
+
+            document.getElementById('verifModalTitle').textContent = 'Edit Verifikasi Lapangan';
+            openVerifModal();
+        };
+
+        // Open status modal
+        window.openBantuanStatusModal = function(id, name, status, catatan) {
+            document.getElementById('bantuanPendudukId').value = id;
+            document.getElementById('bantuanKKName').value = name;
+            document.getElementById('bantuanStatus').value = status;
+            document.getElementById('bantuanCatatan').value = catatan;
+
+            const modal = document.getElementById('bantuanModal');
+            modal.classList.remove('hidden');
+            modal.classList.add('flex');
+            setTimeout(() => {
+                modal.children[0].classList.remove('scale-95', 'opacity-0');
+                modal.children[0].classList.add('scale-100', 'opacity-100');
+            }, 10);
+        };
+
+        // Update bantuan status in DB
+        async function updateBantuanStatus() {
+            const id = document.getElementById('bantuanPendudukId').value;
+            const status = document.getElementById('bantuanStatus').value;
+            const catatan = document.getElementById('bantuanCatatan').value.trim();
+
+            const formData = new FormData();
+            formData.append('id', id);
+            formData.append('bantuan_status', status);
+            formData.append('bantuan_catatan', catatan);
+
+            try {
+                const res = await fetch('api/update_bantuan_penduduk.php', { method: 'POST', body: formData });
+                const data = await res.json();
+                if (data.status === 'success') {
+                    showToast('Status bantuan berhasil diperbarui.', 'success');
+                    closeBantuanModal();
+                    loadAllData();
+                    setTimeout(filterBantuanByIbadah, 300);
+                } else {
+                    throw new Error(data.message);
+                }
+            } catch (err) {
+                showToast(err.message || 'Gagal memperbarui status.', 'error');
+            }
+        }
+
+        // Delete Worship Place
+        window.deleteIbadahDirect = async function(id) {
+            if (!confirm('Apakah Anda ingin menghapus rumah ibadah ini?')) return;
+            const formData = new FormData();
+            formData.append('id', id);
+            try {
+                const res = await fetch('api/delete_rumah_ibadah.php', { method: 'POST', body: formData });
+                const data = await res.json();
+                if (data.status === 'success') {
+                    showToast('Rumah ibadah berhasil dihapus.', 'success');
+                    map.closePopup();
+                    loadAllData();
+                } else {
+                    throw new Error(data.message);
+                }
+            } catch (err) {
+                showToast(err.message || 'Gagal menghapus.', 'error');
+            }
+        };
+
+        // Delete Poor family
+        window.deleteMiskinDirect = async function(id) {
+            if (!confirm('Apakah Anda yakin ingin menghapus data keluarga miskin ini?')) return;
+            const formData = new FormData();
+            formData.append('id', id);
+            try {
+                const res = await fetch('api/delete_penduduk_miskin.php', { method: 'POST', body: formData });
+                const data = await res.json();
+                if (data.status === 'success') {
+                    showToast('Data keluarga miskin berhasil dihapus.', 'success');
+                    map.closePopup();
+                    loadAllData();
+                } else {
+                    throw new Error(data.message);
+                }
+            } catch (err) {
+                showToast(err.message || 'Gagal menghapus.', 'error');
+            }
+        };
+
+        // Delete Verif
+        window.deleteVerifDirect = async function(id) {
+            if (!confirm('Hapus laporan verifikasi ini?')) return;
+            const formData = new FormData();
+            formData.append('id', id);
+            try {
+                const res = await fetch('api/delete_verifikasi_lapangan.php', { method: 'POST', body: formData });
+                const data = await res.json();
+                if (data.status === 'success') {
+                    showToast('Verifikasi berhasil dihapus.', 'success');
+                    map.closePopup();
+                    loadAllData();
+                } else {
+                    throw new Error(data.message);
+                }
+            } catch (err) {
+                showToast(err.message || 'Gagal menghapus.', 'error');
+            }
+        };
+
+        // Tabs management
+        function switchTab(tab) {
+            activeTab = tab;
+            const tabs = ['ibadah', 'miskin', 'bantuan', 'verif'];
+            tabs.forEach(t => {
+                const button = document.getElementById('tab' + capitalizeFirst(t));
+                const list = document.getElementById('list' + capitalizeFirst(t));
+                if (t === tab) {
+                    button.className = "flex-1 py-3 text-center border-b-2 border-indigo-600 text-indigo-600 transition min-w-[90px]";
+                    list.classList.remove('hidden');
+                } else {
+                    button.className = "flex-1 py-3 text-center border-b-2 border-transparent text-slate-500 hover:text-slate-700 transition min-w-[90px]";
+                    list.classList.add('hidden');
+                }
+            });
+        }
+
+        // Search Filter
+        document.getElementById('searchQuery').addEventListener('input', function (e) {
+            const query = e.target.value.toLowerCase();
+            if (activeTab === 'ibadah') {
+                const filtered = ibadahRecords.filter(rec => rec.nama.toLowerCase().includes(query) || rec.alamat.toLowerCase().includes(query));
+                renderIbadahList(filtered);
+            } else if (activeTab === 'miskin') {
+                const filtered = miskinRecords.filter(rec => rec.nama_ketua_kk.toLowerCase().includes(query) || rec.rumah_ibadah_nama.toLowerCase().includes(query));
+                renderMiskinList(filtered);
+            } else if (activeTab === 'verif') {
+                const filtered = verifRecords.filter(rec => rec.petugas_nama.toLowerCase().includes(query) || rec.target_nama.toLowerCase().includes(query));
+                renderVerifList(filtered);
+            }
+        });
+
+        // Modals management helpers
+        function openIbadahModal() {
+            const modal = document.getElementById('ibadahModal');
+            modal.classList.remove('hidden');
+            modal.classList.add('flex');
+            setTimeout(() => {
+                modal.children[0].classList.remove('scale-95', 'opacity-0');
+                modal.children[0].classList.add('scale-100', 'opacity-100');
+            }, 10);
+        }
+
+        function closeIbadahModal() {
+            const modal = document.getElementById('ibadahModal');
+            modal.children[0].classList.remove('scale-100', 'opacity-100');
+            modal.children[0].classList.add('scale-95', 'opacity-0');
+            setTimeout(() => {
+                modal.classList.add('hidden');
+                modal.classList.remove('flex');
+            }, 150);
+        }
+
+        function openMiskinModal() {
+            const modal = document.getElementById('miskinModal');
+            modal.classList.remove('hidden');
+            modal.classList.add('flex');
+            setTimeout(() => {
+                modal.children[0].classList.remove('scale-95', 'opacity-0');
+                modal.children[0].classList.add('scale-100', 'opacity-100');
+            }, 10);
+        }
+
+        function closeMiskinModal() {
+            const modal = document.getElementById('miskinModal');
+            modal.children[0].classList.remove('scale-100', 'opacity-100');
+            modal.children[0].classList.add('scale-95', 'opacity-0');
+            setTimeout(() => {
+                modal.classList.add('hidden');
+                modal.classList.remove('flex');
+            }, 150);
+        }
+
+        function openBantuanModal() {
+            const modal = document.getElementById('bantuanModal');
+            modal.classList.remove('hidden');
+            modal.classList.add('flex');
+            setTimeout(() => {
+                modal.children[0].classList.remove('scale-95', 'opacity-0');
+                modal.children[0].classList.add('scale-100', 'opacity-100');
+            }, 10);
+        }
+
+        function closeBantuanModal() {
+            const modal = document.getElementById('bantuanModal');
+            modal.children[0].classList.remove('scale-100', 'opacity-100');
+            modal.children[0].classList.add('scale-95', 'opacity-0');
+            setTimeout(() => {
+                modal.classList.add('hidden');
+                modal.classList.remove('flex');
+            }, 150);
+        }
+
+        function openVerifModal() {
+            const modal = document.getElementById('verifModal');
+            modal.classList.remove('hidden');
+            modal.classList.add('flex');
+            setTimeout(() => {
+                modal.children[0].classList.remove('scale-95', 'opacity-0');
+                modal.children[0].classList.add('scale-100', 'opacity-100');
+            }, 10);
+        }
+
+        function closeVerifModal() {
+            const modal = document.getElementById('verifModal');
+            modal.children[0].classList.remove('scale-100', 'opacity-100');
+            modal.children[0].classList.add('scale-95', 'opacity-0');
+            setTimeout(() => {
+                modal.classList.add('hidden');
+                modal.classList.remove('flex');
+            }, 150);
+        }
+
+        // Toast Helper
+        function showToast(message, type = 'info') {
+            const toast = document.getElementById('toast');
+            const msg = document.getElementById('toastMessage');
+            msg.textContent = message;
+
+            toast.classList.remove('hidden', 'bg-red-500', 'bg-emerald-500', 'bg-indigo-500');
+            toast.classList.add('flex');
+
+            if (type === 'error') {
+                toast.classList.add('bg-red-500');
+            } else if (type === 'success') {
+                toast.classList.add('bg-emerald-500');
+            } else {
+                toast.classList.add('bg-indigo-500');
+            }
+
+            setTimeout(() => {
+                toast.classList.remove('scale-95', 'opacity-0');
+                toast.classList.add('scale-100', 'opacity-100');
+            }, 10);
+
+            setTimeout(() => {
+                toast.classList.remove('scale-100', 'opacity-100');
+                toast.classList.add('scale-95', 'opacity-0');
+                setTimeout(() => {
+                    toast.classList.add('hidden');
+                }, 150);
+            }, 3000);
+        }
+
+        // General helpers
+        function escapeHtml(str) {
+            return String(str || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+        }
+
+        function capitalizeFirst(string) {
+            return string.charAt(0).toUpperCase() + string.slice(1);
+        }
+
+        // Startup load
+        loadAllData();
+    </script>
+</body>
+</html>
diff --git a/fitur_jalan/api/delete_feature.php b/fitur_jalan/api/delete_feature.php
new file mode 100644
index 0000000..9d1dd69
--- /dev/null
+++ b/fitur_jalan/api/delete_feature.php
@@ -0,0 +1,39 @@
+<?php
+header('Content-Type: application/json');
+ini_set('display_errors', '0');
+include __DIR__ . '/../../db_config.php';
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $id = (int)($_POST['id'] ?? 0);
+    if ($id <= 0) {
+        http_response_code(400);
+        echo json_encode(['status' => 'error', 'message' => 'ID jalan tidak valid']);
+        $conn->close();
+        exit;
+    }
+
+    $stmt = $conn->prepare("DELETE FROM spatial_features WHERE id = ?");
+    if (!$stmt) {
+        http_response_code(500);
+        echo json_encode(['status' => 'error', 'message' => $conn->error]);
+        $conn->close();
+        exit;
+    }
+
+    $stmt->bind_param("i", $id);
+
+    if ($stmt->execute()) {
+        echo json_encode(['status' => 'success', 'message' => 'Data jalan berhasil dihapus']);
+    } else {
+        http_response_code(500);
+        echo json_encode(['status' => 'error', 'message' => $stmt->error]);
+    }
+    $stmt->close();
+    $conn->close();
+    exit;
+}
+
+http_response_code(405);
+echo json_encode(['status' => 'error', 'message' => 'Method tidak diizinkan']);
+$conn->close();
+?>
diff --git a/fitur_jalan/api/delete_jalan_rusak.php b/fitur_jalan/api/delete_jalan_rusak.php
new file mode 100644
index 0000000..1f37e9e
--- /dev/null
+++ b/fitur_jalan/api/delete_jalan_rusak.php
@@ -0,0 +1,52 @@
+<?php
+header('Content-Type: application/json');
+include __DIR__ . '/../../db_config.php';
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $id = (int)($_POST['id'] ?? 0);
+    if ($id <= 0) {
+        http_response_code(400);
+        echo json_encode(['status' => 'error', 'message' => 'ID laporan tidak valid']);
+        $conn->close();
+        exit;
+    }
+
+    // Optional: Get file path and delete physical image file
+    $stmtSelect = $conn->prepare('SELECT gambar FROM jalan_rusak WHERE id = ?');
+    if ($stmtSelect) {
+        $stmtSelect->bind_param('i', $id);
+        $stmtSelect->execute();
+        $stmtSelect->bind_result($gambar);
+        if ($stmtSelect->fetch()) {
+            if ($gambar && file_exists(__DIR__ . '/../../' . $gambar)) {
+                @unlink(__DIR__ . '/../../' . $gambar);
+            }
+        }
+        $stmtSelect->close();
+    }
+
+    $stmt = $conn->prepare('DELETE FROM jalan_rusak WHERE id = ?');
+    if (!$stmt) {
+        http_response_code(500);
+        echo json_encode(['status' => 'error', 'message' => $conn->error]);
+        $conn->close();
+        exit;
+    }
+
+    $stmt->bind_param('i', $id);
+    if ($stmt->execute()) {
+        echo json_encode(['status' => 'success', 'message' => 'Laporan jalan rusak berhasil dihapus']);
+    } else {
+        http_response_code(500);
+        echo json_encode(['status' => 'error', 'message' => $stmt->error]);
+    }
+
+    $stmt->close();
+    $conn->close();
+    exit;
+}
+
+http_response_code(405);
+echo json_encode(['status' => 'error', 'message' => 'Method tidak diizinkan']);
+$conn->close();
+?>
diff --git a/fitur_jalan/api/get_features.php b/fitur_jalan/api/get_features.php
new file mode 100644
index 0000000..6703d66
--- /dev/null
+++ b/fitur_jalan/api/get_features.php
@@ -0,0 +1,30 @@
+<?php
+header('Content-Type: application/json');
+include __DIR__ . '/../../db_config.php';
+
+$sql = "SELECT id, nama_objek, kategori, status_objek, type, geometry_data, nilai_ukur, created_at 
+        FROM spatial_features 
+        WHERE kategori IN ('Jalan', 'Jalan Raya')
+        ORDER BY created_at DESC";
+
+$result = $conn->query($sql);
+$features = [];
+
+if (!$result) {
+    http_response_code(500);
+    echo json_encode(['status' => 'error', 'message' => 'Query gagal: ' . $conn->error]);
+    $conn->close();
+    exit;
+}
+
+if ($result && $result->num_rows > 0) {
+    while($row = $result->fetch_assoc()) {
+        $row['geometry_data'] = json_decode($row['geometry_data']);
+        $row['nilai_ukur'] = (float)$row['nilai_ukur'];
+        $features[] = $row;
+    }
+}
+
+echo json_encode($features);
+$conn->close();
+?>
diff --git a/fitur_jalan/api/get_jalan_rusak.php b/fitur_jalan/api/get_jalan_rusak.php
new file mode 100644
index 0000000..cf9aaf4
--- /dev/null
+++ b/fitur_jalan/api/get_jalan_rusak.php
@@ -0,0 +1,29 @@
+<?php
+header('Content-Type: application/json');
+include __DIR__ . '/../../db_config.php';
+
+$sql = "SELECT id, latitude, longitude, jenis_kerusakan, deskripsi, severity, gambar, created_at 
+        FROM jalan_rusak 
+        ORDER BY created_at DESC";
+
+$result = $conn->query($sql);
+$data = [];
+
+if (!$result) {
+    http_response_code(500);
+    echo json_encode(['status' => 'error', 'message' => 'Query gagal: ' . $conn->error]);
+    $conn->close();
+    exit;
+}
+
+if ($result && $result->num_rows > 0) {
+    while ($row = $result->fetch_assoc()) {
+        $row['latitude'] = (float)$row['latitude'];
+        $row['longitude'] = (float)$row['longitude'];
+        $data[] = $row;
+    }
+}
+
+echo json_encode($data);
+$conn->close();
+?>
diff --git a/fitur_jalan/api/save_feature.php b/fitur_jalan/api/save_feature.php
new file mode 100644
index 0000000..5a921f3
--- /dev/null
+++ b/fitur_jalan/api/save_feature.php
@@ -0,0 +1,45 @@
+<?php
+header('Content-Type: application/json');
+ini_set('display_errors', '0');
+include __DIR__ . '/../../db_config.php';
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $nama = trim($_POST['nama'] ?? '');
+    $kategori = 'Jalan';
+    $status = trim($_POST['status'] ?? 'Jalan Kabupaten');
+    $type = trim($_POST['type'] ?? 'polyline');
+    $geometry = $_POST['geometry'] ?? '';
+    $nilai = (float)($_POST['nilai'] ?? 0);
+
+    if ($nama === '' || $geometry === '') {
+        http_response_code(400);
+        echo json_encode(['status' => 'error', 'message' => 'Data jalan tidak lengkap']);
+        $conn->close();
+        exit;
+    }
+
+    $stmt = $conn->prepare("INSERT INTO spatial_features (nama_objek, kategori, status_objek, type, geometry_data, nilai_ukur) VALUES (?, ?, ?, ?, ?, ?)");
+    if (!$stmt) {
+        http_response_code(500);
+        echo json_encode(['status' => 'error', 'message' => $conn->error]);
+        $conn->close();
+        exit;
+    }
+
+    $stmt->bind_param("sssssd", $nama, $kategori, $status, $type, $geometry, $nilai);
+
+    if ($stmt->execute()) {
+        echo json_encode(['status' => 'success', 'message' => 'Data jalan berhasil disimpan']);
+    } else {
+        http_response_code(500);
+        echo json_encode(['status' => 'error', 'message' => $stmt->error]);
+    }
+    $stmt->close();
+    $conn->close();
+    exit;
+}
+
+http_response_code(405);
+echo json_encode(['status' => 'error', 'message' => 'Method tidak diizinkan']);
+$conn->close();
+?>
diff --git a/fitur_jalan/api/save_jalan_rusak.php b/fitur_jalan/api/save_jalan_rusak.php
new file mode 100644
index 0000000..15725a2
--- /dev/null
+++ b/fitur_jalan/api/save_jalan_rusak.php
@@ -0,0 +1,72 @@
+<?php
+header('Content-Type: application/json');
+include __DIR__ . '/../../db_config.php';
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $latitude = $_POST['latitude'] ?? '';
+    $longitude = $_POST['longitude'] ?? '';
+    $jenis_kerusakan = $_POST['jenis_kerusakan'] ?? '';
+    $deskripsi = $_POST['deskripsi'] ?? '';
+    $severity = $_POST['severity'] ?? 'sedang';
+    
+    if (empty($latitude) || empty($longitude) || empty($jenis_kerusakan)) {
+        http_response_code(400);
+        echo json_encode(['status' => 'error', 'message' => 'Latitude, longitude, dan jenis kerusakan wajib diisi']);
+        exit;
+    }
+
+    $gambar = null;
+    
+    // Handle file upload
+    if (isset($_FILES['gambar']) && $_FILES['gambar']['error'] === UPLOAD_ERR_OK) {
+        $allowed = ['jpg', 'jpeg', 'png', 'gif'];
+        $filename = $_FILES['gambar']['name'];
+        $ext = strtolower(pathinfo($filename, PATHINFO_EXTENSION));
+        
+        if (!in_array($ext, $allowed)) {
+            http_response_code(400);
+            echo json_encode(['status' => 'error', 'message' => 'Format gambar hanya JPG, PNG, GIF']);
+            exit;
+        }
+
+        // Buat folder uploads di root jika belum ada
+        if (!is_dir(__DIR__ . '/../../uploads')) {
+            mkdir(__DIR__ . '/../../uploads', 0755, true);
+        }
+
+        // Generate nama file unik
+        $gambar = 'uploads/' . time() . '_' . basename($filename);
+        
+        if (!move_uploaded_file($_FILES['gambar']['tmp_name'], __DIR__ . '/../../' . $gambar)) {
+            http_response_code(500);
+            echo json_encode(['status' => 'error', 'message' => 'Gagal upload gambar']);
+            exit;
+        }
+    }
+
+    $stmt = $conn->prepare("INSERT INTO jalan_rusak (latitude, longitude, jenis_kerusakan, deskripsi, severity, gambar) VALUES (?, ?, ?, ?, ?, ?)");
+    
+    if (!$stmt) {
+        http_response_code(500);
+        echo json_encode(['status' => 'error', 'message' => $conn->error]);
+        exit;
+    }
+
+    $stmt->bind_param("ddssss", $latitude, $longitude, $jenis_kerusakan, $deskripsi, $severity, $gambar);
+
+    if ($stmt->execute()) {
+        echo json_encode(['status' => 'success', 'message' => 'Laporan jalan rusak berhasil disimpan', 'id' => $stmt->insert_id]);
+    } else {
+        http_response_code(500);
+        echo json_encode(['status' => 'error', 'message' => $stmt->error]);
+    }
+
+    $stmt->close();
+    $conn->close();
+    exit;
+}
+
+http_response_code(405);
+echo json_encode(['status' => 'error', 'message' => 'Method tidak diizinkan']);
+$conn->close();
+?>
diff --git a/fitur_jalan/api/update_feature.php b/fitur_jalan/api/update_feature.php
new file mode 100644
index 0000000..c0e7083
--- /dev/null
+++ b/fitur_jalan/api/update_feature.php
@@ -0,0 +1,66 @@
+<?php
+header('Content-Type: application/json');
+ini_set('display_errors', '0');
+include __DIR__ . '/../../db_config.php';
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $id = (int)($_POST['id'] ?? 0);
+    if ($id <= 0) {
+        http_response_code(400);
+        echo json_encode(['status' => 'error', 'message' => 'ID jalan tidak valid']);
+        $conn->close();
+        exit;
+    }
+
+    $isGeometryUpdate = isset($_POST['geometry']);
+
+    if ($isGeometryUpdate) {
+        $geometry = $_POST['geometry'] ?? '';
+        $nilai = (float)($_POST['nilai'] ?? 0);
+
+        if ($geometry === '') {
+            http_response_code(400);
+            echo json_encode(['status' => 'error', 'message' => 'Data geometri kosong']);
+            $conn->close();
+            exit;
+        }
+
+        $stmt = $conn->prepare("UPDATE spatial_features SET geometry_data = ?, nilai_ukur = ? WHERE id = ?");
+        $stmt->bind_param("sdi", $geometry, $nilai, $id);
+    } else {
+        $nama = trim($_POST['nama'] ?? '');
+        $status = trim($_POST['status'] ?? '');
+
+        if ($nama === '' || $status === '') {
+            http_response_code(400);
+            echo json_encode(['status' => 'error', 'message' => 'Nama atau status tidak boleh kosong']);
+            $conn->close();
+            exit;
+        }
+
+        $stmt = $conn->prepare("UPDATE spatial_features SET nama_objek = ?, status_objek = ? WHERE id = ?");
+        $stmt->bind_param("ssi", $nama, $status, $id);
+    }
+
+    if (!$stmt) {
+        http_response_code(500);
+        echo json_encode(['status' => 'error', 'message' => $conn->error]);
+        $conn->close();
+        exit;
+    }
+
+    if ($stmt->execute()) {
+        echo json_encode(['status' => 'success', 'message' => 'Data jalan berhasil diperbarui']);
+    } else {
+        http_response_code(500);
+        echo json_encode(['status' => 'error', 'message' => $stmt->error]);
+    }
+    $stmt->close();
+    $conn->close();
+    exit;
+}
+
+http_response_code(405);
+echo json_encode(['status' => 'error', 'message' => 'Method tidak diizinkan']);
+$conn->close();
+?>
diff --git a/fitur_jalan/index.html b/fitur_jalan/index.html
new file mode 100644
index 0000000..8115fd1
--- /dev/null
+++ b/fitur_jalan/index.html
@@ -0,0 +1,951 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sistem GIS — Infrastruktur Jalan</title>
+    
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+    <!-- Leaflet CSS & Draw CSS -->
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+    <link rel="stylesheet" href="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css" />
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: {
+                        sans: ['Outfit', 'sans-serif'],
+                    }
+                }
+            }
+        }
+    </script>
+    
+    <style>
+        html, body { height: 100%; font-family: 'Outfit', sans-serif; overflow: hidden; }
+        #map {
+            height: 100vh;
+            width: 100%;
+            z-index: 1;
+        }
+        .custom-popup .leaflet-popup-content-wrapper {
+            border-radius: 16px;
+            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+            border: 1px solid rgba(226, 232, 240, 0.8);
+            padding: 4px;
+        }
+        .custom-popup .leaflet-popup-content {
+            margin: 12px;
+            font-family: 'Outfit', sans-serif;
+        }
+    </style>
+</head>
+<body class="bg-slate-50 text-slate-800">
+
+    <!-- App Shell -->
+    <div class="relative w-full h-screen flex overflow-hidden">
+        
+        <!-- Sidebar -->
+        <div class="w-[380px] h-full bg-white border-r border-slate-200/80 flex flex-col z-10 shadow-lg relative">
+            <!-- Header -->
+            <div class="p-6 border-b border-slate-100 flex flex-col gap-1.5">
+                <div class="flex items-center gap-2">
+                    <a href="../index.html" class="flex items-center justify-center w-8 h-8 rounded-lg bg-slate-100 text-slate-600 hover:bg-slate-200 transition">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+                    </a>
+                    <div class="flex items-center gap-1.5 text-xs font-semibold text-rose-600 bg-rose-50 px-2.5 py-1 rounded-full uppercase tracking-wider">
+                        <span>Informatika UNTAN</span>
+                    </div>
+                </div>
+                <h1 class="text-xl font-bold text-slate-800 mt-2 font-black">Infrastruktur Jalan</h1>
+                <p class="text-xs text-slate-500">Pemetaan jaringan jalan beserta pelaporan titik kerusakan jalan.</p>
+            </div>
+
+            <!-- Tabs -->
+            <div class="border-b border-slate-100 flex">
+                <button onclick="switchTab('jalan')" id="tabJalan" class="flex-1 py-3 text-center text-sm font-bold border-b-2 border-indigo-600 text-indigo-600 transition">
+                    Jaringan Jalan
+                </button>
+                <button onclick="switchTab('rusak')" id="tabRusak" class="flex-1 py-3 text-center text-sm font-bold border-b-2 border-transparent text-slate-500 hover:text-slate-700 transition">
+                    Laporan Kerusakan
+                </button>
+            </div>
+
+            <!-- Layer toggles inside sidebar -->
+            <div class="px-6 py-4 bg-slate-50 border-b border-slate-100 space-y-2">
+                <div class="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-2">Visibilitas Layer</div>
+                <label class="flex items-center gap-2.5 text-xs text-slate-700 cursor-pointer">
+                    <input type="checkbox" id="toggleDrawnRoads" checked class="h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
+                    <span>Jalan Digambar (Polyline)</span>
+                </label>
+                <label class="flex items-center gap-2.5 text-xs text-slate-700 cursor-pointer">
+                    <input type="checkbox" id="toggleDamagedRoads" checked class="h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
+                    <span>Laporan Jalan Rusak (Poin)</span>
+                </label>
+                <label class="flex items-center gap-2.5 text-xs text-slate-700 cursor-pointer">
+                    <input type="checkbox" id="toggleExternalRoads" class="h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
+                    <span>Jaringan Jalan Eksternal (GeoJSON)</span>
+                </label>
+            </div>
+
+            <!-- List & Search -->
+            <div class="flex-1 flex flex-col min-h-0">
+                <div class="p-4 border-b border-slate-100">
+                    <div class="relative">
+                        <input id="searchQuery" type="text" placeholder="Cari..." class="w-full bg-slate-50 border border-slate-200 rounded-xl pl-10 pr-4 py-2.5 text-sm outline-none focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-100 transition shadow-sm">
+                        <svg class="absolute left-3.5 top-3.5 text-slate-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+                    </div>
+                </div>
+
+                <!-- Tab 1: Jalan Digambar -->
+                <div id="listJalan" class="flex-1 overflow-y-auto p-4 space-y-3">
+                    <!-- Loading Placeholder -->
+                    <div class="text-center py-8 text-slate-400 text-sm">Memuat data jalan...</div>
+                </div>
+
+                <!-- Tab 2: Jalan Rusak -->
+                <div id="listRusak" class="flex-1 overflow-y-auto p-4 space-y-3 hidden">
+                    <!-- Loading Placeholder -->
+                    <div class="text-center py-8 text-slate-400 text-sm">Memuat laporan kerusakan...</div>
+                </div>
+            </div>
+
+            <!-- Tips Panel -->
+            <div class="p-4 bg-rose-50/50 border-t border-rose-100/50 text-xs text-rose-800 flex gap-2.5">
+                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="shrink-0 mt-0.5"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
+                <div id="tipsText">
+                    Gunakan tool <b>Draw Polyline</b> di sisi kanan peta untuk menambahkan ruas jalan baru dan menghitung panjangnya.
+                </div>
+            </div>
+        </div>
+
+        <!-- Map Container -->
+        <div class="flex-1 h-full relative">
+            <div id="map"></div>
+            
+            <!-- Toast notification -->
+            <div id="toast" class="absolute top-4 right-4 z-[2000] hidden items-center gap-3 px-4 py-3 bg-slate-900/90 text-white rounded-xl shadow-xl backdrop-blur-md transition transform scale-95 opacity-0">
+                <span id="toastMessage" class="text-sm font-medium">Notifikasi</span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Modal Input Jalan Polyline Baru -->
+    <div id="newJalanModal" class="fixed inset-0 z-[10000] hidden items-center justify-center bg-slate-900/40 backdrop-blur-sm px-4">
+        <div class="w-full max-w-md bg-white rounded-2xl shadow-2xl border border-slate-100 overflow-hidden transform scale-95 opacity-0 transition-all duration-300">
+            <div class="p-5 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
+                <h3 class="font-bold text-slate-800">Simpan Ruas Jalan Baru</h3>
+                <button onclick="closeNewJalanModal()" class="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-slate-200 transition text-slate-500">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+                </button>
+            </div>
+            <div class="p-5 space-y-4">
+                <div>
+                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5">Nama Jalan</label>
+                    <input id="newJalanName" type="text" placeholder="Contoh: Jl. Ahmad Yani" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-2.5 text-sm outline-none focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-100 transition shadow-sm">
+                </div>
+                
+                <div class="grid grid-cols-2 gap-4">
+                    <div>
+                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5">Kategori Status</label>
+                        <select id="newJalanStatus" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 py-2.5 text-sm outline-none focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-100 transition shadow-sm">
+                            <option value="Jalan Nasional">Jalan Nasional</option>
+                            <option value="Jalan Provinsi">Jalan Provinsi</option>
+                            <option value="Jalan Kabupaten">Jalan Kabupaten</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5">Panjang Ruas</label>
+                        <input id="newJalanLength" type="text" readonly class="w-full bg-slate-100 border border-slate-200 rounded-xl px-4 py-2.5 text-sm text-slate-500 outline-none">
+                    </div>
+                </div>
+            </div>
+            <div class="p-5 border-t border-slate-100 bg-slate-50/50 flex gap-3">
+                <button onclick="saveNewJalan()" class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold text-sm py-2.5 px-4 rounded-xl shadow-lg transition">Simpan Jalan</button>
+                <button onclick="closeNewJalanModal()" class="flex-1 bg-slate-200 hover:bg-slate-300 text-slate-700 font-semibold text-sm py-2.5 px-4 rounded-xl transition">Batal</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Modal Input Laporan Jalan Rusak -->
+    <div id="newDamageModal" class="fixed inset-0 z-[10000] hidden items-center justify-center bg-slate-900/40 backdrop-blur-sm px-4">
+        <div class="w-full max-w-md bg-white rounded-2xl shadow-2xl border border-slate-100 overflow-hidden transform scale-95 opacity-0 transition-all duration-300">
+            <div class="p-5 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
+                <h3 class="font-bold text-slate-800">Lapor Jalan Rusak</h3>
+                <button onclick="closeNewDamageModal()" class="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-slate-200 transition text-slate-500">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+                </button>
+            </div>
+            <div class="p-5 space-y-4">
+                <div class="grid grid-cols-2 gap-4">
+                    <div>
+                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5">Jenis Kerusakan</label>
+                        <select id="damageType" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 py-2.5 text-sm outline-none focus:border-red-500 focus:bg-white focus:ring-2 focus:ring-red-100 transition shadow-sm">
+                            <option value="lubang">Lubang</option>
+                            <option value="retak">Retak</option>
+                            <option value="ambles">Ambles</option>
+                            <option value="bergelombang">Bergelombang</option>
+                            <option value="lainnya">Lainnya</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5">Tingkat Keparahan</label>
+                        <select id="damageSeverity" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 py-2.5 text-sm outline-none focus:border-red-500 focus:bg-white focus:ring-2 focus:ring-red-100 transition shadow-sm">
+                            <option value="ringan">Ringan</option>
+                            <option value="sedang" selected>Sedang</option>
+                            <option value="berat">Berat</option>
+                        </select>
+                    </div>
+                </div>
+
+                <div>
+                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5">Deskripsi Kondisi</label>
+                    <textarea id="damageDesc" placeholder="Jelaskan kondisi detail kerusakan..." rows="3" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-2.5 text-sm outline-none focus:border-red-500 focus:bg-white focus:ring-2 focus:ring-red-100 transition shadow-sm"></textarea>
+                </div>
+
+                <div>
+                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5">Foto Kerusakan (Opsional)</label>
+                    <input id="damageImage" type="file" accept="image/*" class="w-full border border-slate-200 rounded-xl p-2 text-sm bg-slate-50">
+                </div>
+
+                <div class="text-[10px] text-slate-400 bg-slate-50 p-2 rounded-lg">
+                    📍 Koordinat: <span id="damageCoords" class="font-mono">0, 0</span>
+                </div>
+            </div>
+            <div class="p-5 border-t border-slate-100 bg-slate-50/50 flex gap-3">
+                <button onclick="saveNewDamage()" class="flex-1 bg-red-600 hover:bg-red-700 text-white font-semibold text-sm py-2.5 px-4 rounded-xl shadow-lg transition">Kirim Laporan</button>
+                <button onclick="closeNewDamageModal()" class="flex-1 bg-slate-200 hover:bg-slate-300 text-slate-700 font-semibold text-sm py-2.5 px-4 rounded-xl transition">Batal</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Modal Edit Jalan (Polyline) -->
+    <div id="editJalanModal" class="fixed inset-0 z-[10000] hidden items-center justify-center bg-slate-900/40 backdrop-blur-sm px-4">
+        <div class="w-full max-w-md bg-white rounded-2xl shadow-2xl border border-slate-100 overflow-hidden transform scale-95 opacity-0 transition-all duration-300">
+            <div class="p-5 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
+                <h3 class="font-bold text-slate-800">Edit Atribut Jalan</h3>
+                <button onclick="closeEditJalanModal()" class="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-slate-200 transition text-slate-500">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+                </button>
+            </div>
+            <div class="p-5 space-y-4">
+                <input type="hidden" id="editJalanId">
+                <div>
+                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5">Nama Jalan</label>
+                    <input id="editJalanName" type="text" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-2.5 text-sm outline-none focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-100 transition shadow-sm">
+                </div>
+                
+                <div class="grid grid-cols-2 gap-4">
+                    <div>
+                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5">Kategori Status</label>
+                        <select id="editJalanStatus" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 py-2.5 text-sm outline-none focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-100 transition shadow-sm">
+                            <option value="Jalan Nasional">Jalan Nasional</option>
+                            <option value="Jalan Provinsi">Jalan Provinsi</option>
+                            <option value="Jalan Kabupaten">Jalan Kabupaten</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5">Panjang Ruas</label>
+                        <input id="editJalanLength" type="text" readonly class="w-full bg-slate-100 border border-slate-200 rounded-xl px-4 py-2.5 text-sm text-slate-500 outline-none">
+                    </div>
+                </div>
+            </div>
+            <div class="p-5 border-t border-slate-100 bg-slate-50/50 flex gap-2">
+                <button onclick="updateJalanAttr()" class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold text-sm py-2.5 px-4 rounded-xl shadow-lg transition">Simpan</button>
+                <button onclick="deleteJalanDirect()" class="bg-red-50 hover:bg-red-100 text-red-600 font-semibold text-sm py-2.5 px-4 rounded-xl transition">Hapus</button>
+                <button onclick="closeEditJalanModal()" class="bg-slate-200 hover:bg-slate-300 text-slate-700 font-semibold text-sm py-2.5 px-4 rounded-xl transition">Batal</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Leaflet & Turf JS Libraries -->
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+    <script src="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.js"></script>
+    <script src="https://unpkg.com/@turf/turf@6.5.0/turf.min.js"></script>
+
+    <script>
+        // Init Map Pontianak
+        const map = L.map('map', { zoomControl: false }).setView([-0.0263, 109.3425], 13);
+        L.control.zoom({ position: 'topright' }).addTo(map);
+
+        // Tile Layer
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; OpenStreetMap contributors'
+        }).addTo(map);
+
+        // Layers Group
+        const drawnRoadsGroup = L.featureGroup().addTo(map);
+        const damagedRoadsGroup = L.featureGroup().addTo(map);
+        const externalRoadsGroup = L.featureGroup(); // toggled manually
+
+        // Draw control
+        const drawControl = new L.Control.Draw({
+            draw: {
+                polyline: {
+                    shapeOptions: {
+                        color: '#6366f1',
+                        weight: 4
+                    }
+                },
+                marker: {
+                    icon: L.icon({
+                        iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
+                        shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
+                        iconSize: [25, 41],
+                        iconAnchor: [12, 41]
+                    })
+                },
+                polygon: false,
+                circle: false,
+                circlemarker: false,
+                rectangle: false
+            },
+            edit: {
+                featureGroup: drawnRoadsGroup,
+                remove: true
+            }
+        });
+        map.addControl(drawControl);
+
+        let activeTab = 'jalan';
+        let roadRecords = [];
+        let damageRecords = [];
+        let pendingLayer = null;
+        let pendingDistance = 0;
+        let mapRoadLayers = {};
+        let mapDamageLayers = {};
+        let pendingDamageLatLng = null;
+
+        // Styles color based on category
+        const ROAD_COLORS = {
+            'Jalan Nasional': '#16a34a', // green-600
+            'Jalan Provinsi': '#f59e0b', // amber-500
+            'Jalan Kabupaten': '#dc2626' // red-600
+        };
+
+        const DAMAGE_SEVERITY_COLORS = {
+            'ringan': '#eab308', // yellow
+            'sedang': '#f97316', // orange
+            'berat': '#ef4444'   // red
+        };
+
+        // Load data
+        async function loadJalanData() {
+            try {
+                // Fetch drawn roads
+                const resJalan = await fetch('api/get_features.php');
+                roadRecords = await resJalan.json();
+                renderRoadList(roadRecords);
+                displayRoadsOnMap(roadRecords);
+
+                // Fetch damaged roads
+                const resDamage = await fetch('api/get_jalan_rusak.php');
+                damageRecords = await resDamage.json();
+                renderDamageList(damageRecords);
+                displayDamageOnMap(damageRecords);
+            } catch (err) {
+                console.error(err);
+                showToast('Gagal memuat data jalan.', 'error');
+            }
+        }
+
+        // Helper to parse geometry coordinates from GeoJSON or raw format
+        function parseGeometryToCoords(geom, type) {
+            if (!geom) return null;
+            if (typeof geom === 'object' && geom.type && geom.coordinates) {
+                if (geom.type === 'Polygon' || geom.type === 'MultiPolygon') {
+                    const rings = geom.coordinates;
+                    return rings.map(ring => ring.map(coord => [coord[1], coord[0]]));
+                } else if (geom.type === 'LineString' || geom.type === 'MultiLineString') {
+                    const coords = geom.coordinates;
+                    if (geom.type === 'LineString') {
+                        return coords.map(coord => [coord[1], coord[0]]);
+                    } else {
+                        return coords.map(line => line.map(coord => [coord[1], coord[0]]));
+                    }
+                }
+            }
+            return geom;
+        }
+
+        // Display drawn roads on Map
+        function displayRoadsOnMap(items) {
+            drawnRoadsGroup.clearLayers();
+            mapRoadLayers = {};
+
+            items.forEach(item => {
+                if (!item.geometry_data) return;
+
+                const coords = parseGeometryToCoords(item.geometry_data, 'polyline');
+                if (!coords) return;
+
+                const color = ROAD_COLORS[item.status_objek] || '#4f46e5';
+                const layer = L.polyline(coords, {
+                    color: color,
+                    weight: 4,
+                    opacity: 0.85
+                }).addTo(drawnRoadsGroup);
+
+                layer.on('click', (e) => {
+                    L.DomEvent.stopPropagation(e);
+                    openEditJalanModal(item);
+                });
+
+                layer.bindTooltip(`<b>${item.nama_objek}</b><br>${item.status_objek}<br>Panjang: ${Math.round(item.nilai_ukur).toLocaleString('id-ID')} m`, {
+                    sticky: true,
+                    className: 'text-xs rounded-lg'
+                });
+
+                mapRoadLayers[item.id] = layer;
+            });
+        }
+
+        // Display damaged roads on Map
+        function displayDamageOnMap(items) {
+            damagedRoadsGroup.clearLayers();
+            mapDamageLayers = {};
+
+            items.forEach(item => {
+                const color = DAMAGE_SEVERITY_COLORS[item.severity] || '#ef4444';
+                
+                // Create custom divicon for severity
+                const iconHtml = `
+                    <div class="relative w-6 h-6 flex items-center justify-center rounded-full bg-white shadow-lg border border-slate-200 transition transform hover:scale-110">
+                        <div class="w-3.5 h-3.5 rounded-full flex items-center justify-center" style="background-color: ${color}">
+                            <div class="w-1.5 h-1.5 bg-white rounded-full"></div>
+                        </div>
+                    </div>`;
+
+                const icon = L.divIcon({
+                    html: iconHtml,
+                    className: 'spbu-marker-icon',
+                    iconSize: [24, 24],
+                    iconAnchor: [12, 12]
+                });
+
+                const marker = L.marker([item.latitude, item.longitude], { icon: icon }).addTo(damagedRoadsGroup);
+                
+                // Popup Content
+                const imgPath = item.gambar ? `../../${item.gambar}` : null;
+                const imgTag = imgPath ? `<img src="${imgPath}" alt="Foto Kerusakan" class="w-full max-h-36 rounded-lg object-cover mt-2.5">` : '';
+                
+                const popupContent = `
+                    <div class="custom-popup">
+                        <h4 class="font-bold text-slate-800 text-sm">Kerusakan: <span class="capitalize">${item.jenis_kerusakan}</span></h4>
+                        <div class="mt-1 flex items-center gap-1.5">
+                            <span class="text-[9px] font-extrabold uppercase tracking-wider px-2 py-0.5 rounded-full" style="background-color: ${color}20; color: ${color}">
+                                Keparahan: ${item.severity}
+                            </span>
+                        </div>
+                        <p class="text-xs text-slate-600 mt-2">${escapeHtml(item.deskripsi || 'Tidak ada deskripsi')}</p>
+                        ${imgTag}
+                        <div class="mt-3 pt-2.5 border-t border-slate-100 flex justify-end">
+                            <button onclick="deleteDamageDirect(${item.id})" class="text-xs text-red-600 font-bold hover:underline">Hapus Laporan</button>
+                        </div>
+                    </div>`;
+
+                marker.bindPopup(popupContent, { className: 'custom-popup-wrapper' });
+                mapDamageLayers[item.id] = marker;
+            });
+        }
+
+        // Render Road list
+        function renderRoadList(items) {
+            const list = document.getElementById('listJalan');
+            if (items.length === 0) {
+                list.innerHTML = `<div class="text-center py-8 text-slate-400 text-sm">Belum ada jaringan jalan yang digambar.</div>`;
+                return;
+            }
+
+            list.innerHTML = items.map(item => {
+                const color = ROAD_COLORS[item.status_objek] || '#4f46e5';
+                return `
+                    <div onclick="focusRoad(${item.id})" class="p-4 bg-white border border-slate-200 rounded-2xl hover:border-indigo-500 cursor-pointer transition flex flex-col gap-1.5">
+                        <div class="flex items-start justify-between gap-3">
+                            <span class="font-bold text-slate-800 text-sm leading-tight">${escapeHtml(item.nama_objek)}</span>
+                            <span class="text-[9px] font-extrabold uppercase tracking-wider text-white px-2 py-0.5 rounded-full" style="background-color: ${color}">
+                                ${item.status_objek.replace('Jalan ', '')}
+                            </span>
+                        </div>
+                        <div class="flex items-center justify-between text-xs text-slate-500">
+                            <span>Panjang: <strong>${Math.round(item.nilai_ukur)} m</strong></span>
+                        </div>
+                    </div>`;
+            }).join('');
+        }
+
+        // Render damage list
+        function renderDamageList(items) {
+            const list = document.getElementById('listRusak');
+            if (items.length === 0) {
+                list.innerHTML = `<div class="text-center py-8 text-slate-400 text-sm">Belum ada laporan jalan rusak.</div>`;
+                return;
+            }
+
+            list.innerHTML = items.map(item => {
+                const color = DAMAGE_SEVERITY_COLORS[item.severity] || '#ef4444';
+                return `
+                    <div onclick="focusDamage(${item.id})" class="p-4 bg-white border border-slate-200 rounded-2xl hover:border-red-500 cursor-pointer transition flex flex-col gap-1.5">
+                        <div class="flex items-start justify-between gap-3">
+                            <span class="font-bold text-slate-800 text-sm leading-tight capitalize">${item.jenis_kerusakan}</span>
+                            <span class="text-[9px] font-extrabold uppercase tracking-wider px-2 py-0.5 rounded-full" style="background-color: ${color}20; color: ${color}">
+                                ${item.severity}
+                            </span>
+                        </div>
+                        <p class="text-xs text-slate-500 line-clamp-1">${escapeHtml(item.deskripsi || 'Tidak ada deskripsi')}</p>
+                    </div>`;
+            }).join('');
+        }
+
+        // Focus & Zoom to road polyline
+        function focusRoad(id) {
+            const layer = mapRoadLayers[id];
+            if (layer) {
+                map.fitBounds(layer.getBounds(), { padding: [40, 40], maxZoom: 17 });
+            }
+        }
+
+        // Focus & Zoom to damage marker
+        function focusDamage(id) {
+            const marker = mapDamageLayers[id];
+            if (marker) {
+                map.setView(marker.getLatLng(), 17);
+                marker.openPopup();
+            }
+        }
+
+        // Leaflet Draw event handler
+        map.on(L.Draw.Event.CREATED, function (e) {
+            const layer = e.layer;
+            pendingLayer = layer;
+
+            if (layer instanceof L.Polyline && !(layer instanceof L.Polygon)) {
+                // It is a polyline (road)
+                const geo = layer.toGeoJSON();
+                pendingDistance = turf.length(geo, { units: 'meters' });
+
+                document.getElementById('newJalanName').value = '';
+                document.getElementById('newJalanStatus').value = 'Jalan Kabupaten';
+                document.getElementById('newJalanLength').value = `${Math.round(pendingDistance)} m`;
+                
+                openNewJalanModal();
+            } else if (layer instanceof L.Marker) {
+                // It is a marker (road damage report)
+                pendingDamageLatLng = layer.getLatLng();
+                document.getElementById('damageDesc').value = '';
+                document.getElementById('damageImage').value = '';
+                document.getElementById('damageCoords').textContent = `${pendingDamageLatLng.lat.toFixed(6)}, ${pendingDamageLatLng.lng.toFixed(6)}`;
+
+                openNewDamageModal();
+            }
+        });
+
+        // Edit polyline geometry
+        map.on(L.Draw.Event.EDITED, function (e) {
+            const layers = e.layers;
+            layers.eachLayer(async function (layer) {
+                let dbId = null;
+                for (let id in mapRoadLayers) {
+                    if (mapRoadLayers[id] === layer) {
+                        dbId = id;
+                        break;
+                    }
+                }
+
+                if (dbId) {
+                    const geo = layer.toGeoJSON();
+                    const distance = turf.length(geo, { units: 'meters' });
+                    const geomString = JSON.stringify(geo.geometry);
+
+                    const formData = new FormData();
+                    formData.append('id', dbId);
+                    formData.append('geometry', geomString);
+                    formData.append('nilai', distance);
+
+                    try {
+                        const res = await fetch('api/update_feature.php', { method: 'POST', body: formData });
+                        const data = await res.json();
+                        if (data.status === 'success') {
+                            showToast('Geometri jalan berhasil diperbarui.', 'success');
+                            loadJalanData();
+                        } else {
+                            throw new Error(data.message);
+                        }
+                    } catch (err) {
+                        console.error(err);
+                        showToast('Gagal memperbarui geometri jalan.', 'error');
+                        loadJalanData();
+                    }
+                }
+            });
+        });
+
+        // Delete geometry via draw tools
+        map.on(L.Draw.Event.DELETED, function (e) {
+            const layers = e.layers;
+            layers.eachLayer(async function (layer) {
+                let dbId = null;
+                for (let id in mapRoadLayers) {
+                    if (mapRoadLayers[id] === layer) {
+                        dbId = id;
+                        break;
+                    }
+                }
+                if (dbId) {
+                    const formData = new FormData();
+                    formData.append('id', dbId);
+                    try {
+                        await fetch('api/delete_feature.php', { method: 'POST', body: formData });
+                    } catch (err) {
+                        console.error(err);
+                    }
+                }
+            });
+            setTimeout(loadJalanData, 500);
+        });
+
+        // Save new road
+        async function saveNewJalan() {
+            const name = document.getElementById('newJalanName').value.trim();
+            const status = document.getElementById('newJalanStatus').value;
+
+            if (!name) {
+                showToast('Nama jalan wajib diisi.', 'error');
+                return;
+            }
+
+            const geo = pendingLayer.toGeoJSON();
+            const geomString = JSON.stringify(geo.geometry);
+
+            const formData = new FormData();
+            formData.append('nama', name);
+            formData.append('status', status);
+            formData.append('type', 'polyline');
+            formData.append('geometry', geomString);
+            formData.append('nilai', pendingDistance);
+
+            try {
+                const res = await fetch('api/save_feature.php', { method: 'POST', body: formData });
+                const data = await res.json();
+                if (data.status === 'success') {
+                    showToast('Jalan berhasil disimpan.', 'success');
+                    closeNewJalanModal();
+                    loadJalanData();
+                } else {
+                    throw new Error(data.message);
+                }
+            } catch (err) {
+                showToast(err.message || 'Gagal menyimpan jalan.', 'error');
+            }
+        }
+
+        // Save road damage report
+        async function saveNewDamage() {
+            const type = document.getElementById('damageType').value;
+            const severity = document.getElementById('damageSeverity').value;
+            const desc = document.getElementById('damageDesc').value.trim();
+            const imgFile = document.getElementById('damageImage').files[0];
+
+            const formData = new FormData();
+            formData.append('latitude', pendingDamageLatLng.lat);
+            formData.append('longitude', pendingDamageLatLng.lng);
+            formData.append('jenis_kerusakan', type);
+            formData.append('deskripsi', desc);
+            formData.append('severity', severity);
+            if (imgFile) {
+                formData.append('gambar', imgFile);
+            }
+
+            try {
+                const res = await fetch('api/save_jalan_rusak.php', { method: 'POST', body: formData });
+                const data = await res.json();
+                if (data.status === 'success') {
+                    showToast('Laporan jalan rusak berhasil dikirim.', 'success');
+                    closeNewDamageModal();
+                    loadJalanData();
+                } else {
+                    throw new Error(data.message);
+                }
+            } catch (err) {
+                showToast(err.message || 'Gagal mengirim laporan.', 'error');
+            }
+        }
+
+        // Open Edit road attributes modal
+        function openEditJalanModal(record) {
+            document.getElementById('editJalanId').value = record.id;
+            document.getElementById('editJalanName').value = record.nama_objek;
+            document.getElementById('editJalanStatus').value = record.status_objek;
+            document.getElementById('editJalanLength').value = `${Math.round(record.nilai_ukur)} m`;
+
+            const modal = document.getElementById('editJalanModal');
+            modal.classList.remove('hidden');
+            modal.classList.add('flex');
+            setTimeout(() => {
+                modal.children[0].classList.remove('scale-95', 'opacity-0');
+                modal.children[0].classList.add('scale-100', 'opacity-100');
+            }, 10);
+        }
+
+        // Update road attributes
+        async function updateJalanAttr() {
+            const id = document.getElementById('editJalanId').value;
+            const name = document.getElementById('editJalanName').value.trim();
+            const status = document.getElementById('editJalanStatus').value;
+
+            if (!name) {
+                showToast('Nama jalan tidak boleh kosong.', 'error');
+                return;
+            }
+
+            const formData = new FormData();
+            formData.append('id', id);
+            formData.append('nama', name);
+            formData.append('status', status);
+
+            try {
+                const res = await fetch('api/update_feature.php', { method: 'POST', body: formData });
+                const data = await res.json();
+                if (data.status === 'success') {
+                    showToast('Atribut jalan berhasil disimpan.', 'success');
+                    closeEditJalanModal();
+                    loadJalanData();
+                } else {
+                    throw new Error(data.message);
+                }
+            } catch (err) {
+                showToast(err.message || 'Gagal memperbarui jalan.', 'error');
+            }
+        }
+
+        // Delete road direct from edit modal
+        async function deleteJalanDirect() {
+            const id = document.getElementById('editJalanId').value;
+            if (!confirm('Hapus ruas jalan ini?')) return;
+
+            const formData = new FormData();
+            formData.append('id', id);
+
+            try {
+                const res = await fetch('api/delete_feature.php', { method: 'POST', body: formData });
+                const data = await res.json();
+                if (data.status === 'success') {
+                    showToast('Jalan berhasil dihapus.', 'success');
+                    closeEditJalanModal();
+                    loadJalanData();
+                } else {
+                    throw new Error(data.message);
+                }
+            } catch (err) {
+                showToast(err.message || 'Gagal menghapus jalan.', 'error');
+            }
+        }
+
+        // Delete road damage report
+        window.deleteDamageDirect = async function(id) {
+            if (!confirm('Apakah Anda ingin menghapus laporan kerusakan ini?')) return;
+
+            const formData = new FormData();
+            formData.append('id', id);
+
+            try {
+                const res = await fetch('api/delete_jalan_rusak.php', { method: 'POST', body: formData });
+                const data = await res.json();
+                if (data.status === 'success') {
+                    showToast('Laporan kerusakan dihapus.', 'success');
+                    map.closePopup();
+                    loadJalanData();
+                } else {
+                    throw new Error(data.message);
+                }
+            } catch (err) {
+                showToast(err.message || 'Gagal menghapus laporan.', 'error');
+            }
+        }
+
+        // Toggle visibility of layers based on checkbox inputs
+        document.getElementById('toggleDrawnRoads').addEventListener('change', function(e) {
+            if (e.target.checked) {
+                map.addLayer(drawnRoadsGroup);
+            } else {
+                map.removeLayer(drawnRoadsGroup);
+            }
+        });
+
+        document.getElementById('toggleDamagedRoads').addEventListener('change', function(e) {
+            if (e.target.checked) {
+                map.addLayer(damagedRoadsGroup);
+            } else {
+                map.removeLayer(damagedRoadsGroup);
+            }
+        });
+
+        // Load external roads network from geojson file
+        let externalRoadsLoaded = false;
+        document.getElementById('toggleExternalRoads').addEventListener('change', async function(e) {
+            if (e.target.checked) {
+                if (!externalRoadsLoaded) {
+                    try {
+                        const res = await fetch('../../data/Export_Output_2.json');
+                        const data = await res.json();
+                        L.geoJSON(data, {
+                            style: {
+                                color: '#a855f7',
+                                weight: 2.5,
+                                opacity: 0.6
+                            }
+                        }).addTo(externalRoadsGroup);
+                        externalRoadsLoaded = true;
+                    } catch (err) {
+                        console.error('Gagal memuat jalan eksternal:', err);
+                        showToast('File data jalan eksternal tidak ditemukan.', 'error');
+                        e.target.checked = false;
+                        return;
+                    }
+                }
+                map.addLayer(externalRoadsGroup);
+            } else {
+                map.removeLayer(externalRoadsGroup);
+            }
+        });
+
+        // Sidebar search filter
+        document.getElementById('searchQuery').addEventListener('input', function(e) {
+            const query = e.target.value.toLowerCase();
+            if (activeTab === 'jalan') {
+                const filtered = roadRecords.filter(rec => rec.nama_objek.toLowerCase().includes(query) || rec.status_objek.toLowerCase().includes(query));
+                renderRoadList(filtered);
+            } else {
+                const filtered = damageRecords.filter(rec => rec.jenis_kerusakan.toLowerCase().includes(query) || rec.deskripsi.toLowerCase().includes(query));
+                renderDamageList(filtered);
+            }
+        });
+
+        // Tabs management
+        function switchTab(tab) {
+            activeTab = tab;
+            const tabJalan = document.getElementById('tabJalan');
+            const tabRusak = document.getElementById('tabRusak');
+            const listJalan = document.getElementById('listJalan');
+            const listRusak = document.getElementById('listRusak');
+            const tipsText = document.getElementById('tipsText');
+
+            if (tab === 'jalan') {
+                tabJalan.className = "flex-1 py-3 text-center text-sm font-bold border-b-2 border-indigo-600 text-indigo-600 transition";
+                tabRusak.className = "flex-1 py-3 text-center text-sm font-bold border-b-2 border-transparent text-slate-500 hover:text-slate-700 transition";
+                listJalan.classList.remove('hidden');
+                listRusak.classList.add('hidden');
+                tipsText.innerHTML = "Gunakan tool <b>Draw Polyline</b> di sisi kanan peta untuk menambahkan ruas jalan baru dan menghitung panjangnya.";
+            } else {
+                tabRusak.className = "flex-1 py-3 text-center text-sm font-bold border-b-2 border-indigo-600 text-indigo-600 transition";
+                tabJalan.className = "flex-1 py-3 text-center text-sm font-bold border-b-2 border-transparent text-slate-500 hover:text-slate-700 transition";
+                listJalan.classList.add('hidden');
+                listRusak.classList.remove('hidden');
+                tipsText.innerHTML = "Gunakan tool <b>Draw Marker</b> di sisi kanan peta, lalu letakkan di titik jalan rusak untuk mengisi detail laporan.";
+            }
+        }
+
+        // Modals management helpers
+        function openNewJalanModal() {
+            const modal = document.getElementById('newJalanModal');
+            modal.classList.remove('hidden');
+            modal.classList.add('flex');
+            setTimeout(() => {
+                modal.children[0].classList.remove('scale-95', 'opacity-0');
+                modal.children[0].classList.add('scale-100', 'opacity-100');
+            }, 10);
+        }
+
+        function closeNewJalanModal() {
+            const modal = document.getElementById('newJalanModal');
+            modal.children[0].classList.remove('scale-100', 'opacity-100');
+            modal.children[0].classList.add('scale-95', 'opacity-0');
+            setTimeout(() => {
+                modal.classList.add('hidden');
+                modal.classList.remove('flex');
+                if (pendingLayer) {
+                    map.removeLayer(pendingLayer);
+                    pendingLayer = null;
+                }
+            }, 150);
+        }
+
+        function openNewDamageModal() {
+            const modal = document.getElementById('newDamageModal');
+            modal.classList.remove('hidden');
+            modal.classList.add('flex');
+            setTimeout(() => {
+                modal.children[0].classList.remove('scale-95', 'opacity-0');
+                modal.children[0].classList.add('scale-100', 'opacity-100');
+            }, 10);
+        }
+
+        function closeNewDamageModal() {
+            const modal = document.getElementById('newDamageModal');
+            modal.children[0].classList.remove('scale-100', 'opacity-100');
+            modal.children[0].classList.add('scale-95', 'opacity-0');
+            setTimeout(() => {
+                modal.classList.add('hidden');
+                modal.classList.remove('flex');
+                if (pendingLayer) {
+                    map.removeLayer(pendingLayer);
+                    pendingLayer = null;
+                }
+            }, 150);
+        }
+
+        function closeEditJalanModal() {
+            const modal = document.getElementById('editJalanModal');
+            modal.children[0].classList.remove('scale-100', 'opacity-100');
+            modal.children[0].classList.add('scale-95', 'opacity-0');
+            setTimeout(() => {
+                modal.classList.add('hidden');
+                modal.classList.remove('flex');
+            }, 150);
+        }
+
+        // Toast Helper
+        function showToast(message, type = 'info') {
+            const toast = document.getElementById('toast');
+            const msg = document.getElementById('toastMessage');
+            msg.textContent = message;
+
+            toast.classList.remove('hidden', 'bg-red-500', 'bg-emerald-500', 'bg-indigo-500');
+            toast.classList.add('flex');
+
+            if (type === 'error') {
+                toast.classList.add('bg-red-500');
+            } else if (type === 'success') {
+                toast.classList.add('bg-emerald-500');
+            } else {
+                toast.classList.add('bg-indigo-500');
+            }
+
+            setTimeout(() => {
+                toast.classList.remove('scale-95', 'opacity-0');
+                toast.classList.add('scale-100', 'opacity-100');
+            }, 10);
+
+            setTimeout(() => {
+                toast.classList.remove('scale-100', 'opacity-100');
+                toast.classList.add('scale-95', 'opacity-0');
+                setTimeout(() => {
+                    toast.classList.add('hidden');
+                }, 150);
+            }, 3000);
+        }
+
+        // General helpers
+        function escapeHtml(str) {
+            return String(str || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+        }
+
+        // Startup load
+        loadJalanData();
+    </script>
+</body>
+</html>
diff --git a/fitur_parsil_tanah/api/delete_feature.php b/fitur_parsil_tanah/api/delete_feature.php
new file mode 100644
index 0000000..9864228
--- /dev/null
+++ b/fitur_parsil_tanah/api/delete_feature.php
@@ -0,0 +1,39 @@
+<?php
+header('Content-Type: application/json');
+ini_set('display_errors', '0');
+include __DIR__ . '/../../db_config.php';
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $id = (int)($_POST['id'] ?? 0);
+    if ($id <= 0) {
+        http_response_code(400);
+        echo json_encode(['status' => 'error', 'message' => 'ID parsel tidak valid']);
+        $conn->close();
+        exit;
+    }
+
+    $stmt = $conn->prepare("DELETE FROM spatial_features WHERE id = ?");
+    if (!$stmt) {
+        http_response_code(500);
+        echo json_encode(['status' => 'error', 'message' => $conn->error]);
+        $conn->close();
+        exit;
+    }
+
+    $stmt->bind_param("i", $id);
+
+    if ($stmt->execute()) {
+        echo json_encode(['status' => 'success', 'message' => 'Parsil tanah berhasil dihapus']);
+    } else {
+        http_response_code(500);
+        echo json_encode(['status' => 'error', 'message' => $stmt->error]);
+    }
+    $stmt->close();
+    $conn->close();
+    exit;
+}
+
+http_response_code(405);
+echo json_encode(['status' => 'error', 'message' => 'Method tidak diizinkan']);
+$conn->close();
+?>
diff --git a/fitur_parsil_tanah/api/get_features.php b/fitur_parsil_tanah/api/get_features.php
new file mode 100644
index 0000000..8abe16a
--- /dev/null
+++ b/fitur_parsil_tanah/api/get_features.php
@@ -0,0 +1,30 @@
+<?php
+header('Content-Type: application/json');
+include __DIR__ . '/../../db_config.php';
+
+$sql = "SELECT id, nama_objek, kategori, status_objek, type, geometry_data, nilai_ukur, created_at 
+        FROM spatial_features 
+        WHERE kategori IN ('Tanah', 'Parsil Tanah')
+        ORDER BY created_at DESC";
+
+$result = $conn->query($sql);
+$features = [];
+
+if (!$result) {
+    http_response_code(500);
+    echo json_encode(['status' => 'error', 'message' => 'Query gagal: ' . $conn->error]);
+    $conn->close();
+    exit;
+}
+
+if ($result && $result->num_rows > 0) {
+    while($row = $result->fetch_assoc()) {
+        $row['geometry_data'] = json_decode($row['geometry_data']);
+        $row['nilai_ukur'] = (float)$row['nilai_ukur'];
+        $features[] = $row;
+    }
+}
+
+echo json_encode($features);
+$conn->close();
+?>
diff --git a/fitur_parsil_tanah/api/save_feature.php b/fitur_parsil_tanah/api/save_feature.php
new file mode 100644
index 0000000..d5bc6be
--- /dev/null
+++ b/fitur_parsil_tanah/api/save_feature.php
@@ -0,0 +1,45 @@
+<?php
+header('Content-Type: application/json');
+ini_set('display_errors', '0');
+include __DIR__ . '/../../db_config.php';
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $nama = trim($_POST['nama'] ?? '');
+    $kategori = 'Tanah'; // Force category to Tanah for Parsil feature
+    $status = trim($_POST['status'] ?? 'SHM');
+    $type = trim($_POST['type'] ?? 'polygon');
+    $geometry = $_POST['geometry'] ?? '';
+    $nilai = (float)($_POST['nilai'] ?? 0);
+
+    if ($nama === '' || $geometry === '') {
+        http_response_code(400);
+        echo json_encode(['status' => 'error', 'message' => 'Data parsel tidak lengkap']);
+        $conn->close();
+        exit;
+    }
+
+    $stmt = $conn->prepare("INSERT INTO spatial_features (nama_objek, kategori, status_objek, type, geometry_data, nilai_ukur) VALUES (?, ?, ?, ?, ?, ?)");
+    if (!$stmt) {
+        http_response_code(500);
+        echo json_encode(['status' => 'error', 'message' => $conn->error]);
+        $conn->close();
+        exit;
+    }
+
+    $stmt->bind_param("sssssd", $nama, $kategori, $status, $type, $geometry, $nilai);
+
+    if ($stmt->execute()) {
+        echo json_encode(['status' => 'success', 'message' => 'Parsil tanah berhasil disimpan']);
+    } else {
+        http_response_code(500);
+        echo json_encode(['status' => 'error', 'message' => $stmt->error]);
+    }
+    $stmt->close();
+    $conn->close();
+    exit;
+}
+
+http_response_code(405);
+echo json_encode(['status' => 'error', 'message' => 'Method tidak diizinkan']);
+$conn->close();
+?>
diff --git a/fitur_parsil_tanah/api/update_feature.php b/fitur_parsil_tanah/api/update_feature.php
new file mode 100644
index 0000000..103cf80
--- /dev/null
+++ b/fitur_parsil_tanah/api/update_feature.php
@@ -0,0 +1,67 @@
+<?php
+header('Content-Type: application/json');
+ini_set('display_errors', '0');
+include __DIR__ . '/../../db_config.php';
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $id = (int)($_POST['id'] ?? 0);
+    if ($id <= 0) {
+        http_response_code(400);
+        echo json_encode(['status' => 'error', 'message' => 'ID parsel tidak valid']);
+        $conn->close();
+        exit;
+    }
+
+    // Check if it is a geometry update or attribute update
+    $isGeometryUpdate = isset($_POST['geometry']);
+
+    if ($isGeometryUpdate) {
+        $geometry = $_POST['geometry'] ?? '';
+        $nilai = (float)($_POST['nilai'] ?? 0);
+
+        if ($geometry === '') {
+            http_response_code(400);
+            echo json_encode(['status' => 'error', 'message' => 'Data geometri kosong']);
+            $conn->close();
+            exit;
+        }
+
+        $stmt = $conn->prepare("UPDATE spatial_features SET geometry_data = ?, nilai_ukur = ? WHERE id = ?");
+        $stmt->bind_param("sdi", $geometry, $nilai, $id);
+    } else {
+        $nama = trim($_POST['nama'] ?? '');
+        $status = trim($_POST['status'] ?? '');
+
+        if ($nama === '' || $status === '') {
+            http_response_code(400);
+            echo json_encode(['status' => 'error', 'message' => 'Nama atau status tidak boleh kosong']);
+            $conn->close();
+            exit;
+        }
+
+        $stmt = $conn->prepare("UPDATE spatial_features SET nama_objek = ?, status_objek = ? WHERE id = ?");
+        $stmt->bind_param("ssi", $nama, $status, $id);
+    }
+
+    if (!$stmt) {
+        http_response_code(500);
+        echo json_encode(['status' => 'error', 'message' => $conn->error]);
+        $conn->close();
+        exit;
+    }
+
+    if ($stmt->execute()) {
+        echo json_encode(['status' => 'success', 'message' => 'Parsil tanah berhasil diperbarui']);
+    } else {
+        http_response_code(500);
+        echo json_encode(['status' => 'error', 'message' => $stmt->error]);
+    }
+    $stmt->close();
+    $conn->close();
+    exit;
+}
+
+http_response_code(405);
+echo json_encode(['status' => 'error', 'message' => 'Method tidak diizinkan']);
+$conn->close();
+?>
diff --git a/fitur_parsil_tanah/index.html b/fitur_parsil_tanah/index.html
new file mode 100644
index 0000000..30d6779
--- /dev/null
+++ b/fitur_parsil_tanah/index.html
@@ -0,0 +1,651 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sistem GIS — Parsil Tanah</title>
+    
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+    <!-- Leaflet CSS & Draw CSS -->
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+    <link rel="stylesheet" href="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css" />
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: {
+                        sans: ['Outfit', 'sans-serif'],
+                    }
+                }
+            }
+        }
+    </script>
+    
+    <style>
+        html, body { height: 100%; font-family: 'Outfit', sans-serif; overflow: hidden; }
+        #map {
+            height: 100vh;
+            width: 100%;
+            z-index: 1;
+        }
+        .custom-popup .leaflet-popup-content-wrapper {
+            border-radius: 16px;
+            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+            border: 1px solid rgba(226, 232, 240, 0.8);
+            padding: 4px;
+        }
+        .custom-popup .leaflet-popup-content {
+            margin: 12px;
+            font-family: 'Outfit', sans-serif;
+        }
+        .glass-panel {
+            background: rgba(255, 255, 255, 0.85);
+            backdrop-filter: blur(16px);
+            border: 1px solid rgba(255, 255, 255, 0.5);
+        }
+    </style>
+</head>
+<body class="bg-slate-50 text-slate-800">
+
+    <!-- App Shell -->
+    <div class="relative w-full h-screen flex overflow-hidden">
+        
+        <!-- Sidebar -->
+        <div class="w-[380px] h-full bg-white border-r border-slate-200/80 flex flex-col z-10 shadow-lg relative">
+            <!-- Header -->
+            <div class="p-6 border-b border-slate-100 flex flex-col gap-1.5">
+                <div class="flex items-center gap-2">
+                    <a href="../index.html" class="flex items-center justify-center w-8 h-8 rounded-lg bg-slate-100 text-slate-600 hover:bg-slate-200 transition">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+                    </a>
+                    <div class="flex items-center gap-1.5 text-xs font-semibold text-indigo-600 bg-indigo-50 px-2.5 py-1 rounded-full uppercase tracking-wider">
+                        <span>Informatika UNTAN</span>
+                    </div>
+                </div>
+                <h1 class="text-xl font-bold text-slate-800 mt-2">Parsil Tanah</h1>
+                <p class="text-xs text-slate-500">Kelola dan ukur luas parsel tanah (polygon) secara realtime.</p>
+            </div>
+
+            <!-- Stats -->
+            <div class="px-6 py-4 bg-slate-50 border-b border-slate-100 flex items-center justify-between">
+                <span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Total Parsil</span>
+                <span id="parselCount" class="text-base font-black text-indigo-600">0</span>
+            </div>
+
+            <!-- List & Search -->
+            <div class="flex-1 flex flex-col min-h-0">
+                <div class="p-4 border-b border-slate-100">
+                    <div class="relative">
+                        <input id="searchQuery" type="text" placeholder="Cari nama parsil atau status..." class="w-full bg-slate-50 border border-slate-200 rounded-xl pl-10 pr-4 py-2.5 text-sm outline-none focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-100 transition shadow-sm">
+                        <svg class="absolute left-3.5 top-3.5 text-slate-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+                    </div>
+                </div>
+
+                <div id="parselList" class="flex-1 overflow-y-auto p-4 space-y-3">
+                    <!-- Loading Placeholder -->
+                    <div class="text-center py-8 text-slate-400 text-sm">
+                        <svg class="animate-spin h-6 w-6 mx-auto mb-2 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                        </svg>
+                        Memuat data parsel...
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Instructions Panel -->
+            <div class="p-4 bg-indigo-50/50 border-t border-indigo-100/50 text-xs text-indigo-800 flex gap-2.5">
+                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="shrink-0 mt-0.5"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
+                <div>
+                    <span class="font-bold">Tips:</span> Gunakan tombol gambar di peta (sisi kanan) untuk menggambar batas parsel tanah baru, lalu isi nama pemilik & status sertifikat.
+                </div>
+            </div>
+        </div>
+
+        <!-- Map Container -->
+        <div class="flex-1 h-full relative">
+            <div id="map"></div>
+            
+            <!-- Toast notification -->
+            <div id="toast" class="absolute top-4 right-4 z-[2000] hidden items-center gap-3 px-4 py-3 bg-slate-900/90 text-white rounded-xl shadow-xl backdrop-blur-md transition transform scale-95 opacity-0">
+                <span id="toastMessage" class="text-sm font-medium">Notifikasi</span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Modal Input Parsil Baru -->
+    <div id="newParselModal" class="fixed inset-0 z-[10000] hidden items-center justify-center bg-slate-900/40 backdrop-blur-sm px-4">
+        <div class="w-full max-w-md bg-white rounded-2xl shadow-2xl border border-slate-100 overflow-hidden transform scale-95 opacity-0 transition-all duration-300">
+            <div class="p-5 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
+                <h3 class="font-bold text-slate-800">Simpan Parsil Tanah</h3>
+                <button onclick="closeNewParselModal()" class="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-slate-200 transition text-slate-500">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+                </button>
+            </div>
+            <div class="p-5 space-y-4">
+                <div>
+                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5">Nama Pemilik / Objek</label>
+                    <input id="newParselName" type="text" placeholder="Contoh: Tanah Kavling Pak Budi" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-2.5 text-sm outline-none focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-100 transition shadow-sm">
+                </div>
+                
+                <div class="grid grid-cols-2 gap-4">
+                    <div>
+                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5">Status Sertifikat</label>
+                        <select id="newParselStatus" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 py-2.5 text-sm outline-none focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-100 transition shadow-sm">
+                            <option value="SHM">SHM (Hak Milik)</option>
+                            <option value="HGB">HGB (Guna Bangunan)</option>
+                            <option value="HGU">HGU (Guna Usaha)</option>
+                            <option value="HP">HP (Hak Pakai)</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5">Luas Tanah</label>
+                        <input id="newParselArea" type="text" readonly class="w-full bg-slate-100 border border-slate-200 rounded-xl px-4 py-2.5 text-sm text-slate-500 outline-none">
+                    </div>
+                </div>
+            </div>
+            <div class="p-5 border-t border-slate-100 bg-slate-50/50 flex gap-3">
+                <button onclick="saveNewParsel()" class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold text-sm py-2.5 px-4 rounded-xl shadow-lg shadow-indigo-600/10 hover:shadow-indigo-600/20 transition">Simpan Parsil</button>
+                <button onclick="closeNewParselModal()" class="flex-1 bg-slate-200 hover:bg-slate-300 text-slate-700 font-semibold text-sm py-2.5 px-4 rounded-xl transition">Batal</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Modal Edit Parsil -->
+    <div id="editParselModal" class="fixed inset-0 z-[10000] hidden items-center justify-center bg-slate-900/40 backdrop-blur-sm px-4">
+        <div class="w-full max-w-md bg-white rounded-2xl shadow-2xl border border-slate-100 overflow-hidden transform scale-95 opacity-0 transition-all duration-300">
+            <div class="p-5 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
+                <h3 class="font-bold text-slate-800">Edit Atribut Parsil</h3>
+                <button onclick="closeEditParselModal()" class="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-slate-200 transition text-slate-500">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+                </button>
+            </div>
+            <div class="p-5 space-y-4">
+                <input type="hidden" id="editParselId">
+                <div>
+                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5">Nama Pemilik / Objek</label>
+                    <input id="editParselName" type="text" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-2.5 text-sm outline-none focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-100 transition shadow-sm">
+                </div>
+                
+                <div class="grid grid-cols-2 gap-4">
+                    <div>
+                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5">Status Sertifikat</label>
+                        <select id="editParselStatus" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 py-2.5 text-sm outline-none focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-100 transition shadow-sm">
+                            <option value="SHM">SHM (Hak Milik)</option>
+                            <option value="HGB">HGB (Guna Bangunan)</option>
+                            <option value="HGU">HGU (Guna Usaha)</option>
+                            <option value="HP">HP (Hak Pakai)</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5">Luas Tanah</label>
+                        <input id="editParselArea" type="text" readonly class="w-full bg-slate-100 border border-slate-200 rounded-xl px-4 py-2.5 text-sm text-slate-500 outline-none">
+                    </div>
+                </div>
+            </div>
+            <div class="p-5 border-t border-slate-100 bg-slate-50/50 flex gap-2">
+                <button onclick="updateParsilAttr()" class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold text-sm py-2.5 px-4 rounded-xl shadow-lg transition">Simpan</button>
+                <button onclick="deleteParsilDirect()" class="bg-red-50 hover:bg-red-100 text-red-600 font-semibold text-sm py-2.5 px-4 rounded-xl transition">Hapus</button>
+                <button onclick="closeEditParselModal()" class="bg-slate-200 hover:bg-slate-300 text-slate-700 font-semibold text-sm py-2.5 px-4 rounded-xl transition">Batal</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Leaflet & Turf JS Libraries -->
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+    <script src="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.js"></script>
+    <script src="https://unpkg.com/@turf/turf@6.5.0/turf.min.js"></script>
+
+    <script>
+        // Init Map Pontianak
+        const map = L.map('map', { zoomControl: false }).setView([-0.0263, 109.3425], 13);
+        
+        // Custom Zoom Control at Top-Right
+        L.control.zoom({ position: 'topright' }).addTo(map);
+
+        // Tile Layer
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; OpenStreetMap contributors'
+        }).addTo(map);
+
+        // Draw Layer & Control
+        const drawnItems = new L.FeatureGroup().addTo(map);
+        const drawControl = new L.Control.Draw({
+            draw: {
+                polygon: {
+                    allowIntersection: false,
+                    showArea: true,
+                    shapeOptions: {
+                        color: '#6366f1',
+                        fillColor: '#818cf8',
+                        fillOpacity: 0.35,
+                        weight: 3
+                    }
+                },
+                polyline: false,
+                circle: false,
+                marker: false,
+                circlemarker: false,
+                rectangle: false
+            },
+            edit: {
+                featureGroup: drawnItems,
+                remove: true
+            }
+        });
+        map.addControl(drawControl);
+
+        let records = [];
+        let pendingLayer = null;
+        let pendingArea = 0;
+
+        // Colors based on Status Sertifikat
+        const STATUS_COLORS = {
+            'SHM': '#10b981', // green
+            'HGB': '#3b82f6', // blue
+            'HGU': '#8b5cf6', // purple
+            'HP': '#64748b'   // slate
+        };
+
+        // Load data from DB
+        async function loadParsil() {
+            try {
+                const response = await fetch('api/get_features.php');
+                if (!response.ok) throw new Error('HTTP Error');
+                records = await response.json();
+                renderParsilList(records);
+                displayParsilOnMap(records);
+            } catch (err) {
+                console.error(err);
+                showToast('Gagal memuat data parsel.', 'error');
+            }
+        }
+
+        // Render List in Sidebar
+        function renderParsilList(items) {
+            const list = document.getElementById('parselList');
+            document.getElementById('parselCount').textContent = items.length;
+
+            if (items.length === 0) {
+                list.innerHTML = `
+                    <div class="text-center py-12 text-slate-400 text-sm border-2 border-dashed border-slate-200 rounded-2xl">
+                        <svg class="h-8 w-8 mx-auto mb-2 text-slate-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/></svg>
+                        Belum ada data parsel tanah.
+                    </div>`;
+                return;
+            }
+
+            list.innerHTML = items.map(item => {
+                const color = STATUS_COLORS[item.status_objek] || '#4f46e5';
+                return `
+                    <div onclick="focusParsil(${item.id})" class="p-4 bg-white border border-slate-200 rounded-2xl hover:border-indigo-500 hover:shadow-md cursor-pointer transition flex flex-col gap-2.5">
+                        <div class="flex items-start justify-between gap-3">
+                            <span class="font-bold text-slate-800 text-sm leading-tight line-clamp-1">${escapeHtml(item.nama_objek)}</span>
+                            <span class="text-[9px] font-extrabold uppercase tracking-wider text-white px-2 py-0.5 rounded-full" style="background-color: ${color}">
+                                ${item.status_objek}
+                            </span>
+                        </div>
+                        <div class="flex items-center justify-between text-xs text-slate-500">
+                            <span class="flex items-center gap-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M21 12H3"/><path d="M12 3v18"/></svg>
+                                Luas: <strong>${Math.round(item.nilai_ukur).toLocaleString('id-ID')} m²</strong>
+                            </span>
+                            <span class="text-[10px] text-slate-400">${formatDate(item.created_at)}</span>
+                        </div>
+                    </div>
+                `;
+            }).join('');
+        }
+
+        // Helper to parse geometry coordinates from GeoJSON or raw format
+        function parseGeometryToCoords(geom, type) {
+            if (!geom) return null;
+            if (typeof geom === 'object' && geom.type && geom.coordinates) {
+                if (geom.type === 'Polygon' || geom.type === 'MultiPolygon') {
+                    const rings = geom.coordinates;
+                    return rings.map(ring => ring.map(coord => [coord[1], coord[0]]));
+                } else if (geom.type === 'LineString' || geom.type === 'MultiLineString') {
+                    const coords = geom.coordinates;
+                    if (geom.type === 'LineString') {
+                        return coords.map(coord => [coord[1], coord[0]]);
+                    } else {
+                        return coords.map(line => line.map(coord => [coord[1], coord[0]]));
+                    }
+                }
+            }
+            return geom;
+        }
+
+        // Display Markers/Polygons on Map
+        let mapLayers = {};
+        function displayParsilOnMap(items) {
+            drawnItems.clearLayers();
+            mapLayers = {};
+
+            items.forEach(item => {
+                if (!item.geometry_data) return;
+
+                const coords = parseGeometryToCoords(item.geometry_data, 'polygon');
+                if (!coords) return;
+
+                const color = STATUS_COLORS[item.status_objek] || '#4f46e5';
+                const layer = L.polygon(coords, {
+                    color: color,
+                    fillColor: color,
+                    fillOpacity: 0.2,
+                    weight: 2.5
+                }).addTo(drawnItems);
+
+                layer.on('click', (e) => {
+                    L.DomEvent.stopPropagation(e);
+                    openEditModal(item);
+                });
+
+                // bind simple tooltip
+                layer.bindTooltip(`<b>${item.nama_objek}</b><br>Luas: ${Math.round(item.nilai_ukur).toLocaleString('id-ID')} m²`, {
+                    sticky: true,
+                    className: 'text-xs rounded-lg border-slate-100 font-sans'
+                });
+
+                mapLayers[item.id] = layer;
+            });
+        }
+
+        // Focus & Zoom to parcel
+        function focusParsil(id) {
+            const layer = mapLayers[id];
+            if (layer) {
+                map.fitBounds(layer.getBounds(), { padding: [40, 40], maxZoom: 18 });
+            }
+        }
+
+        // Leaflet Draw Event Handler
+        map.on(L.Draw.Event.CREATED, function (e) {
+            const layer = e.layer;
+            pendingLayer = layer;
+
+            const geo = layer.toGeoJSON();
+            pendingArea = turf.area(geo); // calculate area using turf in m2
+
+            // open form modal
+            document.getElementById('newParselName').value = '';
+            document.getElementById('newParselStatus').value = 'SHM';
+            document.getElementById('newParselArea').value = `${Math.round(pendingArea).toLocaleString('id-ID')} m²`;
+            
+            openNewParselModal();
+        });
+
+        // Edit polygon geometry directly inside map edit event
+        map.on(L.Draw.Event.EDITED, function (e) {
+            const layers = e.layers;
+            layers.eachLayer(async function (layer) {
+                // Find DB ID for this layer
+                let dbId = null;
+                for (let id in mapLayers) {
+                    if (mapLayers[id] === layer) {
+                        dbId = id;
+                        break;
+                    }
+                }
+
+                if (dbId) {
+                    const geo = layer.toGeoJSON();
+                    const area = turf.area(geo);
+                    const geomString = JSON.stringify(geo.geometry);
+
+                    const formData = new FormData();
+                    formData.append('id', dbId);
+                    formData.append('geometry', geomString);
+                    formData.append('nilai', area);
+
+                    try {
+                        const res = await fetch('api/update_feature.php', { method: 'POST', body: formData });
+                        const data = await res.json();
+                        if (data.status === 'success') {
+                            showToast('Geometri parsel berhasil diperbarui.', 'success');
+                            loadParsil();
+                        } else {
+                            throw new Error(data.message);
+                        }
+                    } catch (err) {
+                        console.error(err);
+                        showToast('Gagal menyimpan perubahan geometri.', 'error');
+                        loadParsil();
+                    }
+                }
+            });
+        });
+
+        // Delete geometry via Leaflet Draw Delete tool
+        map.on(L.Draw.Event.DELETED, function (e) {
+            const layers = e.layers;
+            layers.eachLayer(async function (layer) {
+                let dbId = null;
+                for (let id in mapLayers) {
+                    if (mapLayers[id] === layer) {
+                        dbId = id;
+                        break;
+                    }
+                }
+                if (dbId) {
+                    const formData = new FormData();
+                    formData.append('id', dbId);
+                    try {
+                        const res = await fetch('api/delete_feature.php', { method: 'POST', body: formData });
+                        const data = await res.json();
+                        if (data.status === 'success') {
+                            showToast('Parsil berhasil dihapus.', 'success');
+                        }
+                    } catch (err) {
+                        console.error(err);
+                    }
+                }
+            });
+            setTimeout(loadParsil, 500);
+        });
+
+        // Save new parsel to DB
+        async function saveNewParsel() {
+            const name = document.getElementById('newParselName').value.trim();
+            const status = document.getElementById('newParselStatus').value;
+
+            if (!name) {
+                showToast('Masukkan nama pemilik atau objek parsel.', 'error');
+                return;
+            }
+
+            const geo = pendingLayer.toGeoJSON();
+            const geomString = JSON.stringify(geo.geometry);
+
+            const formData = new FormData();
+            formData.append('nama', name);
+            formData.append('status', status);
+            formData.append('type', 'polygon');
+            formData.append('geometry', geomString);
+            formData.append('nilai', pendingArea);
+
+            try {
+                const res = await fetch('api/save_feature.php', { method: 'POST', body: formData });
+                const data = await res.json();
+                if (data.status === 'success') {
+                    showToast('Parsil berhasil disimpan!', 'success');
+                    closeNewParselModal();
+                    loadParsil();
+                } else {
+                    throw new Error(data.message);
+                }
+            } catch (err) {
+                showToast(err.message || 'Gagal menyimpan parsel.', 'error');
+            }
+        }
+
+        // Open edit attribute modal
+        function openEditModal(record) {
+            document.getElementById('editParselId').value = record.id;
+            document.getElementById('editParselName').value = record.nama_objek;
+            document.getElementById('editParselStatus').value = record.status_objek;
+            document.getElementById('editParselArea').value = `${Math.round(record.nilai_ukur).toLocaleString('id-ID')} m²`;
+
+            openEditParselModal();
+        }
+
+        // Save edited attributes
+        async function updateParsilAttr() {
+            const id = document.getElementById('editParselId').value;
+            const name = document.getElementById('editParselName').value.trim();
+            const status = document.getElementById('editParselStatus').value;
+
+            if (!name) {
+                showToast('Nama tidak boleh kosong.', 'error');
+                return;
+            }
+
+            const formData = new FormData();
+            formData.append('id', id);
+            formData.append('nama', name);
+            formData.append('status', status);
+
+            try {
+                const res = await fetch('api/update_feature.php', { method: 'POST', body: formData });
+                const data = await res.json();
+                if (data.status === 'success') {
+                    showToast('Atribut parsel berhasil disimpan.', 'success');
+                    closeEditParselModal();
+                    loadParsil();
+                } else {
+                    throw new Error(data.message);
+                }
+            } catch (err) {
+                showToast(err.message || 'Gagal memperbarui atribut.', 'error');
+            }
+        }
+
+        // Delete parsel direct from modal
+        async function deleteParsilDirect() {
+            const id = document.getElementById('editParselId').value;
+            if (!confirm('Hapus parsel tanah ini?')) return;
+
+            const formData = new FormData();
+            formData.append('id', id);
+
+            try {
+                const res = await fetch('api/delete_feature.php', { method: 'POST', body: formData });
+                const data = await res.json();
+                if (data.status === 'success') {
+                    showToast('Parsil berhasil dihapus.', 'success');
+                    closeEditParselModal();
+                    loadParsil();
+                } else {
+                    throw new Error(data.message);
+                }
+            } catch (err) {
+                showToast(err.message || 'Gagal menghapus parsel.', 'error');
+            }
+        }
+
+        // Search Filter
+        document.getElementById('searchQuery').addEventListener('input', function (e) {
+            const query = e.target.value.toLowerCase();
+            const filtered = records.filter(rec => 
+                rec.nama_objek.toLowerCase().includes(query) || 
+                rec.status_objek.toLowerCase().includes(query)
+            );
+            renderParsilList(filtered);
+        });
+
+        // Modals management helpers
+        function openNewParselModal() {
+            const modal = document.getElementById('newParselModal');
+            modal.classList.remove('hidden');
+            modal.classList.add('flex');
+            setTimeout(() => {
+                modal.children[0].classList.remove('scale-95', 'opacity-0');
+                modal.children[0].classList.add('scale-100', 'opacity-100');
+            }, 10);
+        }
+
+        function closeNewParselModal() {
+            const modal = document.getElementById('newParselModal');
+            modal.children[0].classList.remove('scale-100', 'opacity-100');
+            modal.children[0].classList.add('scale-95', 'opacity-0');
+            setTimeout(() => {
+                modal.classList.add('hidden');
+                modal.classList.remove('flex');
+                if (pendingLayer) {
+                    map.removeLayer(pendingLayer);
+                    pendingLayer = null;
+                }
+            }, 150);
+        }
+
+        function openEditParselModal() {
+            const modal = document.getElementById('editParselModal');
+            modal.classList.remove('hidden');
+            modal.classList.add('flex');
+            setTimeout(() => {
+                modal.children[0].classList.remove('scale-95', 'opacity-0');
+                modal.children[0].classList.add('scale-100', 'opacity-100');
+            }, 10);
+        }
+
+        function closeEditParselModal() {
+            const modal = document.getElementById('editParselModal');
+            modal.children[0].classList.remove('scale-100', 'opacity-100');
+            modal.children[0].classList.add('scale-95', 'opacity-0');
+            setTimeout(() => {
+                modal.classList.add('hidden');
+                modal.classList.remove('flex');
+            }, 150);
+        }
+
+        // Toast Helper
+        function showToast(message, type = 'info') {
+            const toast = document.getElementById('toast');
+            const msg = document.getElementById('toastMessage');
+            msg.textContent = message;
+
+            toast.classList.remove('hidden', 'bg-red-500', 'bg-emerald-500', 'bg-indigo-500');
+            toast.classList.add('flex');
+
+            if (type === 'error') {
+                toast.classList.add('bg-red-500');
+            } else if (type === 'success') {
+                toast.classList.add('bg-emerald-500');
+            } else {
+                toast.classList.add('bg-indigo-500');
+            }
+
+            setTimeout(() => {
+                toast.classList.remove('scale-95', 'opacity-0');
+                toast.classList.add('scale-100', 'opacity-100');
+            }, 10);
+
+            setTimeout(() => {
+                toast.classList.remove('scale-100', 'opacity-100');
+                toast.classList.add('scale-95', 'opacity-0');
+                setTimeout(() => {
+                    toast.classList.add('hidden');
+                }, 150);
+            }, 3000);
+        }
+
+        // General helpers
+        function escapeHtml(str) {
+            return String(str || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+        }
+
+        function formatDate(dateString) {
+            if (!dateString) return '';
+            const d = new Date(dateString.replace(' ', 'T'));
+            return d.toLocaleDateString('id-ID', { day: 'numeric', month: 'short' });
+        }
+
+        // Startup load
+        loadParsil();
+    </script>
+</body>
+</html>
diff --git a/fitur_spbu/api/delete_location.php b/fitur_spbu/api/delete_location.php
new file mode 100644
index 0000000..985cd1a
--- /dev/null
+++ b/fitur_spbu/api/delete_location.php
@@ -0,0 +1,33 @@
+<?php
+header('Content-Type: application/json');
+include __DIR__ . '/../../db_config.php';
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $id = (int)($_POST['id'] ?? 0);
+    if ($id <= 0) {
+        http_response_code(400);
+        echo json_encode(['status' => 'error', 'message' => 'ID tidak valid']);
+        exit;
+    }
+
+    $stmt = $conn->prepare("DELETE FROM locations WHERE id = ?");
+    if (!$stmt) {
+        http_response_code(500);
+        echo json_encode(['status' => 'error', 'message' => $conn->error]);
+        $conn->close();
+        exit;
+    }
+    
+    $stmt->bind_param("i", $id);
+
+    if ($stmt->execute()) {
+        echo json_encode(['status' => 'success', 'message' => 'SPBU berhasil dihapus']);
+    } else {
+        http_response_code(500);
+        echo json_encode(['status' => 'error', 'message' => $stmt->error]);
+    }
+
+    $stmt->close();
+}
+$conn->close();
+?>
diff --git a/fitur_spbu/api/get_location.php b/fitur_spbu/api/get_location.php
new file mode 100644
index 0000000..0e6cb99
--- /dev/null
+++ b/fitur_spbu/api/get_location.php
@@ -0,0 +1,25 @@
+<?php
+header('Content-Type: application/json');
+include __DIR__ . '/../../db_config.php';
+
+$sql = "SELECT * FROM locations ORDER BY created_at DESC";
+$result = $conn->query($sql);
+
+$locations = [];
+
+if (!$result) {
+    http_response_code(500);
+    echo json_encode(['status' => 'error', 'message' => 'Query gagal: ' . $conn->error]);
+    $conn->close();
+    exit;
+}
+
+if ($result->num_rows > 0) {
+    while($row = $result->fetch_assoc()) {
+        $locations[] = $row;
+    }
+}
+
+echo json_encode($locations);
+$conn->close();
+?>
diff --git a/fitur_spbu/api/save_location.php b/fitur_spbu/api/save_location.php
new file mode 100644
index 0000000..bf03477
--- /dev/null
+++ b/fitur_spbu/api/save_location.php
@@ -0,0 +1,39 @@
+<?php
+header('Content-Type: application/json');
+include __DIR__ . '/../../db_config.php';
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $nama = $_POST['nama'] ?? '';
+    $nomor = $_POST['nomor'] ?? '';
+    $status = $_POST['status'] ?? 'tidak';
+    $lat = $_POST['lat'] ?? '';
+    $lng = $_POST['lng'] ?? '';
+
+    // Validasi sederhana
+    if(empty($nama) || empty($nomor) || empty($lat) || empty($lng)) {
+        http_response_code(400);
+        echo json_encode(['status' => 'error', 'message' => 'Data tidak lengkap']);
+        exit;
+    }
+
+    $stmt = $conn->prepare("INSERT INTO locations (nama, nomor, buka_24jam, latitude, longitude) VALUES (?, ?, ?, ?, ?)");
+    if (!$stmt) {
+        http_response_code(500);
+        echo json_encode(['status' => 'error', 'message' => $conn->error]);
+        $conn->close();
+        exit;
+    }
+    
+    $stmt->bind_param("sssdd", $nama, $nomor, $status, $lat, $lng);
+
+    if ($stmt->execute()) {
+        echo json_encode(['status' => 'success', 'message' => 'Data SPBU berhasil disimpan']);
+    } else {
+        http_response_code(500);
+        echo json_encode(['status' => 'error', 'message' => $stmt->error]);
+    }
+
+    $stmt->close();
+}
+$conn->close();
+?>
diff --git a/fitur_spbu/api/update_coords.php b/fitur_spbu/api/update_coords.php
new file mode 100644
index 0000000..b42af04
--- /dev/null
+++ b/fitur_spbu/api/update_coords.php
@@ -0,0 +1,36 @@
+<?php
+header('Content-Type: application/json');
+include __DIR__ . '/../../db_config.php';
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $id = (int)($_POST['id'] ?? 0);
+    $lat = $_POST['lat'] ?? '';
+    $lng = $_POST['lng'] ?? '';
+
+    if ($id <= 0 || empty($lat) || empty($lng)) {
+        http_response_code(400);
+        echo json_encode(['status' => 'error', 'message' => 'Data tidak lengkap']);
+        exit;
+    }
+
+    $stmt = $conn->prepare("UPDATE locations SET latitude = ?, longitude = ? WHERE id = ?");
+    if (!$stmt) {
+        http_response_code(500);
+        echo json_encode(['status' => 'error', 'message' => $conn->error]);
+        $conn->close();
+        exit;
+    }
+    
+    $stmt->bind_param("ddi", $lat, $lng, $id);
+
+    if ($stmt->execute()) {
+        echo json_encode(['status' => 'success', 'message' => 'Koordinat SPBU berhasil diperbarui']);
+    } else {
+        http_response_code(500);
+        echo json_encode(['status' => 'error', 'message' => $stmt->error]);
+    }
+
+    $stmt->close();
+}
+$conn->close();
+?>
diff --git a/fitur_spbu/api/update_details.php b/fitur_spbu/api/update_details.php
new file mode 100644
index 0000000..6b6ee78
--- /dev/null
+++ b/fitur_spbu/api/update_details.php
@@ -0,0 +1,37 @@
+<?php
+header('Content-Type: application/json');
+include __DIR__ . '/../../db_config.php';
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $id = (int)($_POST['id'] ?? 0);
+    $nama = $_POST['nama'] ?? '';
+    $nomor = $_POST['nomor'] ?? '';
+    $status = $_POST['status'] ?? 'tidak';
+
+    if ($id <= 0 || empty($nama) || empty($nomor)) {
+        http_response_code(400);
+        echo json_encode(['status' => 'error', 'message' => 'Data tidak lengkap']);
+        exit;
+    }
+
+    $stmt = $conn->prepare("UPDATE locations SET nama = ?, nomor = ?, buka_24jam = ? WHERE id = ?");
+    if (!$stmt) {
+        http_response_code(500);
+        echo json_encode(['status' => 'error', 'message' => $conn->error]);
+        $conn->close();
+        exit;
+    }
+    
+    $stmt->bind_param("sssi", $nama, $nomor, $status, $id);
+
+    if ($stmt->execute()) {
+        echo json_encode(['status' => 'success', 'message' => 'Detail SPBU berhasil diperbarui']);
+    } else {
+        http_response_code(500);
+        echo json_encode(['status' => 'error', 'message' => $stmt->error]);
+    }
+
+    $stmt->close();
+}
+$conn->close();
+?>
diff --git a/fitur_spbu/index.html b/fitur_spbu/index.html
new file mode 100644
index 0000000..e4c4c31
--- /dev/null
+++ b/fitur_spbu/index.html
@@ -0,0 +1,600 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sistem GIS — Lokasi SPBU</title>
+    
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+    <!-- Leaflet CSS -->
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: {
+                        sans: ['Outfit', 'sans-serif'],
+                    }
+                }
+            }
+        }
+    </script>
+    
+    <style>
+        html, body { height: 100%; font-family: 'Outfit', sans-serif; overflow: hidden; }
+        #map {
+            height: 100vh;
+            width: 100%;
+            z-index: 1;
+        }
+        .custom-popup .leaflet-popup-content-wrapper {
+            border-radius: 16px;
+            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+            border: 1px solid rgba(226, 232, 240, 0.8);
+            padding: 4px;
+        }
+        .custom-popup .leaflet-popup-content {
+            margin: 12px;
+            font-family: 'Outfit', sans-serif;
+        }
+        .spbu-marker-icon {
+            background: transparent;
+            border: none;
+        }
+    </style>
+</head>
+<body class="bg-slate-50 text-slate-800">
+
+    <!-- App Shell -->
+    <div class="relative w-full h-screen flex overflow-hidden">
+        
+        <!-- Sidebar -->
+        <div class="w-[380px] h-full bg-white border-r border-slate-200/80 flex flex-col z-10 shadow-lg relative">
+            <!-- Header -->
+            <div class="p-6 border-b border-slate-100 flex flex-col gap-1.5">
+                <div class="flex items-center gap-2">
+                    <a href="../index.html" class="flex items-center justify-center w-8 h-8 rounded-lg bg-slate-100 text-slate-600 hover:bg-slate-200 transition">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+                    </a>
+                    <div class="flex items-center gap-1.5 text-xs font-semibold text-emerald-600 bg-emerald-50 px-2.5 py-1 rounded-full uppercase tracking-wider">
+                        <span>Informatika UNTAN</span>
+                    </div>
+                </div>
+                <h1 class="text-xl font-bold text-slate-800 mt-2 font-black">Lokasi SPBU</h1>
+                <p class="text-xs text-slate-500">Pemetaan Stasiun Pengisian Bahan Bakar Umum (SPBU) beserta jam operasional.</p>
+            </div>
+
+            <!-- Stats -->
+            <div class="px-6 py-4 bg-slate-50 border-b border-slate-100 grid grid-cols-2 gap-4">
+                <div class="flex flex-col">
+                    <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Total SPBU</span>
+                    <span id="spbuCount" class="text-lg font-black text-indigo-600">0</span>
+                </div>
+                <div class="flex flex-col">
+                    <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Buka 24 Jam</span>
+                    <span id="spbu24Count" class="text-lg font-black text-emerald-600">0</span>
+                </div>
+            </div>
+
+            <!-- List & Search -->
+            <div class="flex-1 flex flex-col min-h-0">
+                <div class="p-4 border-b border-slate-100">
+                    <div class="relative">
+                        <input id="searchQuery" type="text" placeholder="Cari SPBU berdasarkan nama/nomor..." class="w-full bg-slate-50 border border-slate-200 rounded-xl pl-10 pr-4 py-2.5 text-sm outline-none focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-100 transition shadow-sm">
+                        <svg class="absolute left-3.5 top-3.5 text-slate-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+                    </div>
+                </div>
+
+                <div id="spbuList" class="flex-1 overflow-y-auto p-4 space-y-3">
+                    <!-- Loading Placeholder -->
+                    <div class="text-center py-8 text-slate-400 text-sm">
+                        <svg class="animate-spin h-6 w-6 mx-auto mb-2 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                        </svg>
+                        Memuat data SPBU...
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Instructions Panel -->
+            <div class="p-4 bg-emerald-50/50 border-t border-emerald-100/50 text-xs text-emerald-800 flex gap-2.5">
+                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="shrink-0 mt-0.5"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
+                <div>
+                    <span class="font-bold">Cara Menambah SPBU:</span> Klik tombol <span class="bg-indigo-600 text-white px-1.5 py-0.5 rounded font-semibold text-[10px]">Tambah Titik</span> di atas peta, lalu klik lokasi SPBU pada peta.
+                </div>
+            </div>
+        </div>
+
+        <!-- Map Container -->
+        <div class="flex-1 h-full relative">
+            <div id="map"></div>
+
+            <!-- Custom floating action toolbar -->
+            <div class="absolute top-4 left-4 z-[2000] flex gap-2.5">
+                <button id="addPointBtn" onclick="toggleAddMode()" class="flex items-center gap-2 px-4 py-2.5 bg-white border border-slate-200/80 rounded-xl shadow-lg hover:border-indigo-500 hover:shadow-indigo-500/10 font-semibold text-sm transition">
+                    <svg id="addIcon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-indigo-600"><path d="M12 5v14"/><path d="M5 12h14"/></svg>
+                    <span id="addText" class="text-slate-700">Tambah Titik SPBU</span>
+                </button>
+            </div>
+            
+            <!-- Toast notification -->
+            <div id="toast" class="absolute top-4 right-4 z-[2000] hidden items-center gap-3 px-4 py-3 bg-slate-900/90 text-white rounded-xl shadow-xl backdrop-blur-md transition transform scale-95 opacity-0">
+                <span id="toastMessage" class="text-sm font-medium">Notifikasi</span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Modal Input SPBU Baru -->
+    <div id="newSpbuModal" class="fixed inset-0 z-[10000] hidden items-center justify-center bg-slate-900/40 backdrop-blur-sm px-4">
+        <div class="w-full max-w-md bg-white rounded-2xl shadow-2xl border border-slate-100 overflow-hidden transform scale-95 opacity-0 transition-all duration-300">
+            <div class="p-5 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
+                <h3 class="font-bold text-slate-800">Tambah SPBU Baru</h3>
+                <button onclick="closeNewSpbuModal()" class="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-slate-200 transition text-slate-500">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+                </button>
+            </div>
+            <div class="p-5 space-y-4">
+                <div>
+                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5">Nama SPBU</label>
+                    <input id="newSpbuName" type="text" placeholder="Contoh: SPBU Pertamina 61.781.01" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-2.5 text-sm outline-none focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-100 transition shadow-sm">
+                </div>
+                
+                <div class="grid grid-cols-2 gap-4">
+                    <div>
+                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5">Nomor SPBU / Kode</label>
+                        <input id="newSpbuNumber" type="text" placeholder="Contoh: 61.781.01" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-2.5 text-sm outline-none focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-100 transition shadow-sm">
+                    </div>
+                    <div>
+                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5">Buka 24 Jam?</label>
+                        <select id="newSpbuStatus" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 py-2.5 text-sm outline-none focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-100 transition shadow-sm">
+                            <option value="ya">Ya (24 Jam)</option>
+                            <option value="tidak">Tidak</option>
+                        </select>
+                    </div>
+                </div>
+                
+                <div class="text-[10px] text-slate-400 bg-slate-50 border border-slate-100 p-2.5 rounded-lg">
+                    📍 Koordinat terpilih: <span id="newSpbuCoords" class="font-mono font-semibold">0, 0</span>
+                </div>
+            </div>
+            <div class="p-5 border-t border-slate-100 bg-slate-50/50 flex gap-3">
+                <button onclick="saveNewSpbu()" class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold text-sm py-2.5 px-4 rounded-xl shadow-lg transition">Simpan</button>
+                <button onclick="closeNewSpbuModal()" class="flex-1 bg-slate-200 hover:bg-slate-300 text-slate-700 font-semibold text-sm py-2.5 px-4 rounded-xl transition">Batal</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Modal Edit SPBU -->
+    <div id="editSpbuModal" class="fixed inset-0 z-[10000] hidden items-center justify-center bg-slate-900/40 backdrop-blur-sm px-4">
+        <div class="w-full max-w-md bg-white rounded-2xl shadow-2xl border border-slate-100 overflow-hidden transform scale-95 opacity-0 transition-all duration-300">
+            <div class="p-5 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
+                <h3 class="font-bold text-slate-800">Edit Data SPBU</h3>
+                <button onclick="closeEditSpbuModal()" class="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-slate-200 transition text-slate-500">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+                </button>
+            </div>
+            <div class="p-5 space-y-4">
+                <input type="hidden" id="editSpbuId">
+                <div>
+                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5">Nama SPBU</label>
+                    <input id="editSpbuName" type="text" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-2.5 text-sm outline-none focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-100 transition shadow-sm">
+                </div>
+                
+                <div class="grid grid-cols-2 gap-4">
+                    <div>
+                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5">Nomor SPBU</label>
+                        <input id="editSpbuNumber" type="text" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-2.5 text-sm outline-none focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-100 transition shadow-sm">
+                    </div>
+                    <div>
+                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5">Buka 24 Jam?</label>
+                        <select id="editSpbuStatus" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 py-2.5 text-sm outline-none focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-100 transition shadow-sm">
+                            <option value="ya">Ya (24 Jam)</option>
+                            <option value="tidak">Tidak</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+            <div class="p-5 border-t border-slate-100 bg-slate-50/50 flex gap-2">
+                <button onclick="updateSpbuDetails()" class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold text-sm py-2.5 px-4 rounded-xl shadow-lg transition">Simpan Detail</button>
+                <button onclick="deleteSpbuDirect()" class="bg-red-50 hover:bg-red-100 text-red-600 font-semibold text-sm py-2.5 px-4 rounded-xl transition">Hapus</button>
+                <button onclick="closeEditSpbuModal()" class="bg-slate-200 hover:bg-slate-300 text-slate-700 font-semibold text-sm py-2.5 px-4 rounded-xl transition">Batal</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Leaflet JS -->
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+
+    <script>
+        // Initialize Map
+        const map = L.map('map', { zoomControl: false }).setView([-0.0263, 109.3425], 13);
+        L.control.zoom({ position: 'topright' }).addTo(map);
+
+        // Tile layer
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; OpenStreetMap contributors'
+        }).addTo(map);
+
+        let records = [];
+        let markersGroup = L.featureGroup().addTo(map);
+        let mapLayers = {};
+        let isAddMode = false;
+        let activePoint = null;
+
+        // Custom DivIcon for SPBU based on status
+        function createSpbuIcon(isOpen24) {
+            const color = isOpen24 ? '#10b981' : '#ef4444'; // Green if 24 Hours, Red if not
+            const iconHtml = `
+                <div class="relative w-7 h-7 flex items-center justify-center rounded-full bg-white shadow-lg border border-slate-200 transition transform hover:scale-110">
+                    <div class="w-4.5 h-4.5 rounded-full flex items-center justify-center" style="background-color: ${color}">
+                        <svg class="text-white w-2.5 h-2.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M4 10h12"/>
+                            <path d="M12 4v12"/>
+                        </svg>
+                    </div>
+                </div>`;
+            return L.divIcon({
+                html: iconHtml,
+                className: 'spbu-marker-icon',
+                iconSize: [28, 28],
+                iconAnchor: [14, 14]
+            });
+        }
+
+        // Load SPBU data
+        async function loadSPBU() {
+            try {
+                const response = await fetch('api/get_location.php');
+                if (!response.ok) throw new Error('Query error');
+                records = await response.json();
+                renderSpbuList(records);
+                displaySpbuOnMap(records);
+            } catch (err) {
+                console.error(err);
+                showToast('Gagal memuat lokasi SPBU.', 'error');
+            }
+        }
+
+        // Render Sidebar List
+        function renderSpbuList(items) {
+            const list = document.getElementById('spbuList');
+            document.getElementById('spbuCount').textContent = items.length;
+            document.getElementById('spbu24Count').textContent = items.filter(i => (i.buka_24jam || '').toLowerCase() === 'ya').length;
+
+            if (items.length === 0) {
+                list.innerHTML = `
+                    <div class="text-center py-12 text-slate-400 text-sm border-2 border-dashed border-slate-200 rounded-2xl">
+                        <svg class="h-8 w-8 mx-auto mb-2 text-slate-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+                        Belum ada data lokasi SPBU.
+                    </div>`;
+                return;
+            }
+
+            list.innerHTML = items.map(item => {
+                const isOpen24 = (item.buka_24jam || '').toLowerCase() === 'ya';
+                return `
+                    <div onclick="focusSpbu(${item.id})" class="p-4 bg-white border border-slate-200 rounded-2xl hover:border-indigo-500 hover:shadow-md cursor-pointer transition flex flex-col gap-2.5">
+                        <div class="flex items-start justify-between gap-3">
+                            <span class="font-bold text-slate-800 text-sm leading-tight line-clamp-1">${escapeHtml(item.nama)}</span>
+                            <span class="text-[9px] font-extrabold uppercase tracking-wider px-2 py-0.5 rounded-full ${isOpen24 ? 'bg-emerald-100 text-emerald-700' : 'bg-rose-100 text-rose-700'}">
+                                ${isOpen24 ? '24 Jam' : 'Reguler'}
+                            </span>
+                        </div>
+                        <div class="flex items-center justify-between text-xs text-slate-500 border-t border-slate-50 pt-2">
+                            <span>No. SPBU: <strong>${escapeHtml(item.nomor)}</strong></span>
+                            <span class="font-mono text-[10px] text-slate-400">${Number(item.latitude || 0).toFixed(4)}, ${Number(item.longitude || 0).toFixed(4)}</span>
+                        </div>
+                    </div>
+                `;
+            }).join('');
+        }
+
+        // Display markers on Leaflet
+        function displaySpbuOnMap(items) {
+            markersGroup.clearLayers();
+            mapLayers = {};
+
+            items.forEach(item => {
+                const lat = parseFloat(item.latitude);
+                const lng = parseFloat(item.longitude);
+                if (isNaN(lat) || isNaN(lng)) return;
+
+                const isOpen24 = (item.buka_24jam || '').toLowerCase() === 'ya';
+                const marker = L.marker([lat, lng], {
+                    icon: createSpbuIcon(isOpen24),
+                    draggable: true
+                }).addTo(markersGroup);
+
+                // Open detail on click
+                marker.on('click', (e) => {
+                    L.DomEvent.stopPropagation(e);
+                    openEditModal(item);
+                });
+
+                // Update coords on dragend
+                marker.on('dragend', async (e) => {
+                    const newLatLng = marker.getLatLng();
+                    const formData = new FormData();
+                    formData.append('id', item.id);
+                    formData.append('lat', newLatLng.lat);
+                    formData.append('lng', newLatLng.lng);
+
+                    try {
+                        const res = await fetch('api/update_coords.php', { method: 'POST', body: formData });
+                        const data = await res.json();
+                        if (data.status === 'success') {
+                            showToast('Koordinat SPBU berhasil dipindahkan.', 'success');
+                            loadSPBU();
+                        } else {
+                            throw new Error(data.message);
+                        }
+                    } catch (err) {
+                        showToast(err.message || 'Gagal mengubah koordinat SPBU.', 'error');
+                        loadSPBU();
+                    }
+                });
+
+                mapLayers[item.id] = marker;
+            });
+        }
+
+        // Focus and Zoom to SPBU marker
+        function focusSpbu(id) {
+            const marker = mapLayers[id];
+            if (marker) {
+                map.setView(marker.getLatLng(), 16);
+                marker.bounce();
+            }
+        }
+
+        // Add Mode Toggle
+        function toggleAddMode() {
+            isAddMode = !isAddMode;
+            const btn = document.getElementById('addPointBtn');
+            const addIcon = document.getElementById('addIcon');
+            const addText = document.getElementById('addText');
+
+            if (isAddMode) {
+                btn.classList.add('bg-indigo-600', 'border-indigo-600', 'text-white');
+                addIcon.classList.remove('text-indigo-600');
+                addIcon.classList.add('text-white');
+                addIcon.innerHTML = `<path d="M18 6 6 18"/><path d="m6 6 12 12"/>`;
+                addText.textContent = 'Batal Tambah';
+                addText.classList.remove('text-slate-700');
+                addText.classList.add('text-white');
+                map.getContainer().style.cursor = 'crosshair';
+                showToast('Klik lokasi pada peta untuk meletakkan titik SPBU.', 'info');
+            } else {
+                btn.classList.remove('bg-indigo-600', 'border-indigo-600', 'text-white');
+                addIcon.classList.remove('text-white');
+                addIcon.classList.add('text-indigo-600');
+                addIcon.innerHTML = `<path d="M12 5v14"/><path d="M5 12h14"/>`;
+                addText.textContent = 'Tambah Titik SPBU';
+                addText.classList.remove('text-white');
+                addText.classList.add('text-slate-700');
+                map.getContainer().style.cursor = '';
+            }
+        }
+
+        // Map Click Handler for Adding Point
+        map.on('click', function (e) {
+            if (!isAddMode) return;
+
+            activePoint = e.latlng;
+            document.getElementById('newSpbuName').value = '';
+            document.getElementById('newSpbuNumber').value = '';
+            document.getElementById('newSpbuStatus').value = 'ya';
+            document.getElementById('newSpbuCoords').textContent = `${activePoint.lat.toFixed(6)}, ${activePoint.lng.toFixed(6)}`;
+
+            openNewSpbuModal();
+        });
+
+        // Save new SPBU
+        async function saveNewSpbu() {
+            const name = document.getElementById('newSpbuName').value.trim();
+            const number = document.getElementById('newSpbuNumber').value.trim();
+            const status = document.getElementById('newSpbuStatus').value;
+
+            if (!name || !number) {
+                showToast('Harap isi nama dan nomor SPBU.', 'error');
+                return;
+            }
+
+            const formData = new FormData();
+            formData.append('nama', name);
+            formData.append('nomor', number);
+            formData.append('status', status);
+            formData.append('lat', activePoint.lat);
+            formData.append('lng', activePoint.lng);
+
+            try {
+                const res = await fetch('api/save_location.php', { method: 'POST', body: formData });
+                const data = await res.json();
+                if (data.status === 'success') {
+                    showToast('SPBU berhasil ditambahkan!', 'success');
+                    closeNewSpbuModal();
+                    toggleAddMode(); // disable add mode
+                    loadSPBU();
+                } else {
+                    throw new Error(data.message);
+                }
+            } catch (err) {
+                showToast(err.message || 'Gagal menyimpan lokasi SPBU.', 'error');
+            }
+        }
+
+        // Open edit modal
+        function openEditModal(record) {
+            document.getElementById('editSpbuId').value = record.id;
+            document.getElementById('editSpbuName').value = record.nama;
+            document.getElementById('editSpbuNumber').value = record.nomor;
+            document.getElementById('editSpbuStatus').value = (record.buka_24jam || '').toLowerCase();
+
+            openEditSpbuModal();
+        }
+
+        // Update details
+        async function updateSpbuDetails() {
+            const id = document.getElementById('editSpbuId').value;
+            const name = document.getElementById('editSpbuName').value.trim();
+            const number = document.getElementById('editSpbuNumber').value.trim();
+            const status = document.getElementById('editSpbuStatus').value;
+
+            if (!name || !number) {
+                showToast('Nama dan Nomor SPBU tidak boleh kosong.', 'error');
+                return;
+            }
+
+            const formData = new FormData();
+            formData.append('id', id);
+            formData.append('nama', name);
+            formData.append('nomor', number);
+            formData.append('status', status);
+
+            try {
+                const res = await fetch('api/update_details.php', { method: 'POST', body: formData });
+                const data = await res.json();
+                if (data.status === 'success') {
+                    showToast('Data SPBU berhasil disimpan.', 'success');
+                    closeEditSpbuModal();
+                    loadSPBU();
+                } else {
+                    throw new Error(data.message);
+                }
+            } catch (err) {
+                showToast(err.message || 'Gagal memperbarui SPBU.', 'error');
+            }
+        }
+
+        // Delete SPBU
+        async function deleteSpbuDirect() {
+            const id = document.getElementById('editSpbuId').value;
+            if (!confirm('Apakah Anda yakin ingin menghapus SPBU ini?')) return;
+
+            const formData = new FormData();
+            formData.append('id', id);
+
+            try {
+                const res = await fetch('api/delete_location.php', { method: 'POST', body: formData });
+                const data = await res.json();
+                if (data.status === 'success') {
+                    showToast('SPBU berhasil dihapus.', 'success');
+                    closeEditSpbuModal();
+                    loadSPBU();
+                } else {
+                    throw new Error(data.message);
+                }
+            } catch (err) {
+                showToast(err.message || 'Gagal menghapus SPBU.', 'error');
+            }
+        }
+
+        // Search Filter
+        document.getElementById('searchQuery').addEventListener('input', function (e) {
+            const query = e.target.value.toLowerCase();
+            const filtered = records.filter(rec => 
+                rec.nama.toLowerCase().includes(query) || 
+                rec.nomor.toLowerCase().includes(query)
+            );
+            renderSpbuList(filtered);
+        });
+
+        // Modals management
+        function openNewSpbuModal() {
+            const modal = document.getElementById('newSpbuModal');
+            modal.classList.remove('hidden');
+            modal.classList.add('flex');
+            setTimeout(() => {
+                modal.children[0].classList.remove('scale-95', 'opacity-0');
+                modal.children[0].classList.add('scale-100', 'opacity-100');
+            }, 10);
+        }
+
+        function closeNewSpbuModal() {
+            const modal = document.getElementById('newSpbuModal');
+            modal.children[0].classList.remove('scale-100', 'opacity-100');
+            modal.children[0].classList.add('scale-95', 'opacity-0');
+            setTimeout(() => {
+                modal.classList.add('hidden');
+                modal.classList.remove('flex');
+            }, 150);
+        }
+
+        function openEditSpbuModal() {
+            const modal = document.getElementById('editSpbuModal');
+            modal.classList.remove('hidden');
+            modal.classList.add('flex');
+            setTimeout(() => {
+                modal.children[0].classList.remove('scale-95', 'opacity-0');
+                modal.children[0].classList.add('scale-100', 'opacity-100');
+            }, 10);
+        }
+
+        function closeEditSpbuModal() {
+            const modal = document.getElementById('editSpbuModal');
+            modal.children[0].classList.remove('scale-100', 'opacity-100');
+            modal.children[0].classList.add('scale-95', 'opacity-0');
+            setTimeout(() => {
+                modal.classList.add('hidden');
+                modal.classList.remove('flex');
+            }, 150);
+        }
+
+        // Toast Helper
+        function showToast(message, type = 'info') {
+            const toast = document.getElementById('toast');
+            const msg = document.getElementById('toastMessage');
+            msg.textContent = message;
+
+            toast.classList.remove('hidden', 'bg-red-500', 'bg-emerald-500', 'bg-indigo-500');
+            toast.classList.add('flex');
+
+            if (type === 'error') {
+                toast.classList.add('bg-red-500');
+            } else if (type === 'success') {
+                toast.classList.add('bg-emerald-500');
+            } else {
+                toast.classList.add('bg-indigo-500');
+            }
+
+            setTimeout(() => {
+                toast.classList.remove('scale-95', 'opacity-0');
+                toast.classList.add('scale-100', 'opacity-100');
+            }, 10);
+
+            setTimeout(() => {
+                toast.classList.remove('scale-100', 'opacity-100');
+                toast.classList.add('scale-95', 'opacity-0');
+                setTimeout(() => {
+                    toast.classList.add('hidden');
+                }, 150);
+            }, 3000);
+        }
+
+        // Helper escape HTML
+        function escapeHtml(str) {
+            return String(str || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+        }
+
+        // Simple bounce animation for markers
+        L.Marker.prototype.bounce = function() {
+            const marker = this;
+            const element = marker._icon;
+            if (!element) return;
+            element.style.transition = 'transform 0.15s ease-out';
+            element.style.transform = 'translate3d(0px, -14px, 0px) scale(1.15)';
+            setTimeout(() => {
+                element.style.transform = 'translate3d(0px, 0px, 0px) scale(1)';
+            }, 150);
+        };
+
+        // Startup Load
+        loadSPBU();
+    </script>
+</body>
+</html>
diff --git a/index.html b/index.html
index 28136aa..afa23cb 100644
--- a/index.html
+++ b/index.html
@@ -3,4789 +3,244 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Sistem GIS</title>
+    <title>GIS Portal Program Studi Informatika Untan</title>
     
-    <!-- Leaflet CSS -->
-    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
-    <link rel="stylesheet" href="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css" />
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
     <!-- Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
+
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: {
+                        sans: ['Outfit', 'sans-serif'],
+                    }
+                }
+            }
+        }
+    </script>
     
     <style>
-        html, body { height: 100%; }
-        body { overflow: hidden; }
-        .app-shell {
-            position: relative;
-            width: 100%;
-            height: 100vh;
-            padding: calc(.5rem + env(safe-area-inset-top)) .5rem .5rem .5rem;
-            box-sizing: border-box;
+        body {
+            font-family: 'Outfit', sans-serif;
+            background: radial-gradient(circle at 10% 20%, rgb(240, 243, 248) 0%, rgb(220, 227, 240) 100.2%);
+            min-height: 100vh;
         }
-        #map {
-            height: calc(100vh - 1rem);
-            width: 100%;
-            border-radius: .75rem;
-            z-index: 1;
+        .glass-card {
+            background: rgba(255, 255, 255, 0.7);
+            backdrop-filter: blur(14px);
+            border: 1px solid rgba(255, 255, 255, 0.45);
         }
-        .custom-msg { display: none; position: fixed; top: 20px; right: 20px; z-index: 9999; min-width: 250px; }
-        .leaflet-popup-content-wrapper { border-radius: 12px; padding: 0; overflow: hidden; }
-        .leaflet-popup-content { margin: 0; width: 280px !important; }
-        .leaflet-draw-toolbar a { background-color: white; }
-        .leaflet-control-layers {
-            max-height: calc(100vh - 8rem);
-            overflow-y: auto;
-            width: 190px;
-            font-size: 12px;
+        .glowing-shadow:hover {
+            box-shadow: 0 20px 40px -15px rgba(99, 102, 241, 0.25);
         }
-        .leaflet-control-layers-toggle {
-            width: 30px !important;
-            height: 30px !important;
-            background-size: 18px 18px !important;
-        }
-        .leaflet-control-layers-overlays label,
-        .leaflet-control-layers-list label {
-            margin-bottom: 0.15rem;
-            line-height: 1.2;
-        }
-        .leaflet-control-layers input {
-            margin-top: 0.15rem;
-        }
-        .leaflet-draw-toolbar a {
-            width: 32px !important;
-            height: 32px !important;
-            line-height: 32px !important;
-            background-size: 18px 18px !important;
-            background-repeat: no-repeat !important;
-            background-position: center center !important;
-        }
-        .leaflet-draw-toolbar .leaflet-draw-draw-marker {
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5 7 13 7 13s7-8 7-13c0-3.87-3.13-7-7-7Z'/%3E%3C/svg>") !important;
-        }
-        .leaflet-draw-toolbar .leaflet-draw-draw-polyline {
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 18l6-6 4 4 6-8'/%3E%3C/svg>") !important;
-        }
-        .leaflet-draw-toolbar .leaflet-draw-draw-polygon {
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l8 5v10l-8 5-8-5V7z'/%3E%3C/svg>") !important;
-        }
-        .leaflet-draw-toolbar .leaflet-draw-draw-rectangle {
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='5' width='14' height='14' rx='1'/%3E%3C/svg>") !important;
-        }
-        .leaflet-draw-toolbar .leaflet-draw-draw-circle {
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3C/svg>") !important;
-        }
-        .leaflet-draw-toolbar .leaflet-draw-edit-edit {
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg>") !important;
-        }
-        .leaflet-draw-toolbar .leaflet-draw-edit-remove {
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M6 6l1 14h10l1-14'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg>") !important;
-        }
-        .leaflet-draw-toolbar .leaflet-draw-draw-polygon,
-        .leaflet-draw-toolbar .leaflet-draw-draw-polyline,
-        .leaflet-draw-toolbar .leaflet-draw-edit-edit,
-        .leaflet-draw-toolbar .leaflet-draw-edit-remove {
-            margin-bottom: 0;
-        }
-        .leaflet-draw-section {
-            margin-bottom: 2px;
-        }
-        .leaflet-top.leaflet-left .leaflet-control-layers,
-        .leaflet-top.leaflet-left .leaflet-bar,
-        .leaflet-top.leaflet-left .leaflet-draw {
-            margin-top: 0.35rem;
-        }
-
-        /* CSS Tambahan agar ikon SVG tidak terpotong atau memiliki background */
-        .custom-marker { background: transparent !important; border: none !important; }
-        .feature-card { box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08); }
-        .icon-btn { width: 2.45rem; height: 2.45rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.8rem; border: 1px solid rgba(203,213,225,.9); background: rgba(255,255,255,.92); backdrop-filter: blur(14px); transition: .18s ease; }
-        .icon-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12); }
-        .icon-btn.active { background: #4f46e5; color: white; border-color: #4f46e5; }
-        .registry-card { box-shadow: 0 18px 45px rgba(15, 23, 42, 0.14); }
-        .registry-list { max-height: min(56vh, 520px); overflow-y: auto; }
-        .registry-item { transition: .18s ease; }
-        .registry-item:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1); }
-        .registry-chip { display: inline-flex; align-items: center; gap: .35rem; border-radius: 9999px; padding: .25rem .6rem; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
-        #registryDrawer { transition: transform .24s ease, opacity .24s ease; }
-        #registryDrawer.hidden-drawer { transform: translateX(18px); opacity: 0; pointer-events: none; }
-        #bantuanDrawer { transition: transform .24s ease, opacity .24s ease; }
-        #bantuanDrawer.hidden-drawer { transform: translateX(18px); opacity: 0; pointer-events: none; }
-        #layerDrawer { transition: transform .24s ease, opacity .24s ease; }
-        #layerDrawer.hidden-drawer { transform: translateX(-18px); opacity: 0; pointer-events: none; }
     </style>
 </head>
-<body class="bg-slate-50 text-slate-800 font-sans">
+<body class="flex flex-col text-slate-800">
 
-    <div class="app-shell">
-        <div id="map"></div>
-
-        <div id="mainPanel" class="hidden absolute left-6 top-[calc(1rem+env(safe-area-inset-top))] z-[2000] w-[260px] max-w-[calc(100vw-3rem)] rounded-2xl border border-slate-200 bg-white/90 p-2.5 shadow-2xl backdrop-blur-md md:w-[290px]">
+    <!-- Top Decorative Gradient Header -->
+    <div class="w-full bg-gradient-to-r from-indigo-600 via-purple-600 to-indigo-700 text-white shadow-lg relative overflow-hidden">
+        <div class="absolute inset-0 bg-[radial-gradient(circle_at_30%_-20%,rgba(255,255,255,0.15),transparent)] pointer-events-none"></div>
+        <div class="max-w-6xl mx-auto px-6 py-12 flex flex-col md:flex-row md:items-center md:justify-between gap-6 relative z-10">
             <div>
-                <h1 class="text-base font-black tracking-tight text-indigo-700">GIS</h1>
-                <p id="modeHint" class="hidden"></p>
-            </div>
-            <div id="mainPanelBody">
-            <div id="connectionStatus" class="mt-1 text-[9px] font-bold uppercase tracking-wide text-amber-500">Mengecek koneksi...</div>
-            <div class="mt-2 flex items-center justify-between rounded-xl bg-slate-50 px-2.5 py-1.5 text-xs text-slate-600">
-                <span>SPBU</span>
-                <span id="totalCount" class="text-sm font-black text-indigo-600">0</span>
-            </div>
-            <div class="mt-2 flex flex-wrap items-center gap-1.5">
-                <button class="icon-btn" id="toggleEditModeBtn" title="Aktifkan mode edit">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>
-                </button>
-                <div id="editModeButtons" class="hidden flex flex-wrap gap-1.5">
-                    <button class="icon-btn" id="modeViewBtn" title="Lihat data">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8S1 12 1 12z"/><circle cx="12" cy="12" r="3"/></svg>
-                    </button>
-                    <button class="icon-btn" id="modePointBtn" title="Tambah point SPBU">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2C8.13 2 5 5.13 5 9c0 5 7 13 7 13s7-8 7-13c0-3.87-3.13-7-7-7z"/><circle cx="12" cy="9" r="2.5"/></svg>
-                    </button>
-                    <button class="icon-btn" id="modePolylineBtn" title="Tambah polyline jalan">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 18l6-6 4 4 6-8"/></svg>
-                    </button>
-                    <button class="icon-btn" id="modePolygonBtn" title="Tambah polygon parsil">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2l8 5v10l-8 5-8-5V7z"/></svg>
-                    </button>
-                    <button class="icon-btn" id="modeRumahIbadahBtn" title="Input rumah ibadah">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3 4 8v13h16V8z"/><path d="M9 21v-7h6v7"/><path d="M12 7v6"/><path d="M9 10h6"/></svg>
-                    </button>
-                    <button class="icon-btn" id="modePendudukMiskinBtn" title="Input penduduk miskin">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4z"/><path d="M4 21a8 8 0 0 1 16 0"/><path d="M18 8h4"/><path d="M20 6v4"/></svg>
-                    </button>
-                    <button class="icon-btn" id="modeRoadDamageBtn" title="Lapor jalan rusak">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 12h12M12 6v12M2 12h20M12 2v20"/><circle cx="12" cy="12" r="10"/></svg>
-                    </button>
-                    <button class="icon-btn" id="modeVerifikasiBtn" title="Verifikasi lapangan">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6 9 17l-5-5"/><path d="M4 4h16v16H4z"/></svg>
-                    </button>
-                    <button class="icon-btn" id="modeAduanWargaBtn" title="Aduan warga">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 8h10"/><path d="M7 12h6"/><path d="M20 16.5A2.5 2.5 0 0 1 17.5 19H8l-4 3V6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5z"/></svg>
-                    </button>
-                    <button class="icon-btn" id="modeChoroplethBtn" title="Lihat peta choropleth kecamatan">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2z"/><path d="M9 4v14"/><path d="M15 6v14"/></svg>
-                    </button>
-                </div>
-            </div>
-            <div id="spatialControls" class="mt-3 hidden rounded-2xl border border-slate-200 bg-white p-3 shadow-sm">
-                <div id="statusControlWrap">
-                    <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Status</label>
-                    <select id="drawStatus" class="w-full rounded-lg border border-slate-300 bg-white p-2 text-sm outline-none focus:ring-2 focus:ring-indigo-500"></select>
-                </div>
-                <div id="measureControlWrap" class="mt-2">
-                    <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Panjang / Luas</label>
-                    <input id="modeMeasure" type="text" readonly class="w-full rounded-lg border border-slate-200 bg-slate-50 p-2 text-sm text-slate-600">
-                </div>
-                <div class="mt-3 flex gap-2">
-                    <button id="runActionBtn" class="flex-1 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-bold text-white transition hover:bg-indigo-700">Mulai</button>
-                    <button id="clearDraftBtn" class="rounded-lg bg-slate-100 px-4 py-2 text-sm font-bold text-slate-700 transition hover:bg-slate-200">Bersih</button>
-                </div>
-            </div>
-
-            <div id="inputRegistryPanel" class="mt-3 hidden rounded-2xl border border-slate-200 bg-white/95 p-3 shadow-sm registry-card">
-                <div class="flex items-start justify-between gap-3">
-                    <div>
-                        <h2 class="text-sm font-black tracking-tight text-slate-800">Registry Input</h2>
-                        <p class="mt-1 text-[11px] text-slate-500">Daftar input yang bisa difilter.</p>
-                    </div>
-                    <button id="closeInputRegistryBtn" class="icon-btn h-9 w-9 text-slate-600" title="Tutup registry">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
-                    </button>
-                </div>
-
-                <div class="mt-3 flex items-center justify-between rounded-xl bg-slate-50 px-3 py-2">
-                    <span class="text-[11px] font-bold uppercase tracking-widest text-slate-500">Tercatat</span>
-                    <span id="inputRegistryCount" class="text-sm font-black text-indigo-600">0</span>
-                </div>
-
-                <div class="mt-3 grid gap-2">
-                    <div class="sm:col-span-2">
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Cari Nama / Atribut</label>
-                        <input id="inputSearchQuery" type="text" placeholder="Cari nama, kategori, nomor..." class="w-full rounded-lg border border-slate-300 bg-white p-2 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
-                    </div>
-                    <div class="sm:col-span-1">
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Jenis</label>
-                        <select id="inputTypeFilter" class="w-full rounded-lg border border-slate-300 bg-white p-2 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
-                            <option value="all">Semua</option>
-                            <option value="point">Poin</option>
-                            <option value="polyline">Polyline</option>
-                            <option value="polygon">Polygon</option>
-                            <option value="rumahIbadah">Rumah Ibadah</option>
-                            <option value="pendudukMiskin">Penduduk Miskin</option>
-                            <option value="roadDamage">Jalan Rusak</option>
-                        </select>
-                    </div>
-                    <div class="grid grid-cols-2 gap-2">
-                        <div>
-                            <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Dari</label>
-                            <input id="inputDateFrom" type="date" class="w-full rounded-lg border border-slate-300 bg-white p-2 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
-                        </div>
-                        <div>
-                            <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Sampai</label>
-                            <input id="inputDateTo" type="date" class="w-full rounded-lg border border-slate-300 bg-white p-2 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
-                        </div>
-                    </div>
-                </div>
-
-                <div class="mt-3 flex gap-2">
-                    <button id="applyInputFilterBtn" class="flex-1 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-bold text-white transition hover:bg-indigo-700">Terapkan</button>
-                    <button id="clearInputFilterBtn" class="rounded-lg bg-slate-100 px-4 py-2 text-sm font-bold text-slate-700 transition hover:bg-slate-200">Reset</button>
-                </div>
-
-                <div id="inputRegistryList" class="registry-list mt-3 space-y-2 pr-1">
-                    <div class="rounded-xl border border-dashed border-slate-200 bg-slate-50 px-3 py-4 text-sm text-slate-500">
-                        Memuat data input...
-                    </div>
-                </div>
-            </div>
+                <span class="text-xs font-extrabold uppercase tracking-widest bg-white/20 px-3.5 py-1.5 rounded-full backdrop-blur-md">
+                    Portal GIS Informatika Untan
+                </span>
+                <h1 class="text-3xl md:text-4xl font-extrabold tracking-tight mt-3">Sistem Informasi Geografis Terpadu</h1>
+                <p class="text-sm text-indigo-100/90 mt-2 max-w-2xl font-light">
+                    Akses visualisasi data spasial kota Pontianak, mulai dari sertifikasi parsel tanah, sebaran SPBU, jaringan jalan dan kondisi infrastruktur, hingga pengelolaan bantuan penduduk.
+                </p>
             </div>
             
-        </div>
-
-        <div id="minimalToolbar" class="hidden absolute left-6 top-[calc(1rem+env(safe-area-inset-top))] z-[2100] flex items-center gap-2 rounded-2xl border border-slate-200 bg-white/90 p-2 shadow-xl backdrop-blur-md">
-            <button class="icon-btn" id="miniModePointBtn" title="Tambah point SPBU">
-                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2C8.13 2 5 5.13 5 9c0 5 7 13 7 13s7-8 7-13c0-3.87-3.13-7-7-7z"/><circle cx="12" cy="9" r="2.5"/></svg>
-            </button>
-            <button class="icon-btn" id="miniModePolylineBtn" title="Tambah polyline jalan">
-                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 18l6-6 4 4 6-8"/></svg>
-            </button>
-            <button class="icon-btn" id="miniModePolygonBtn" title="Tambah polygon parsil">
-                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2l8 5v10l-8 5-8-5V7z"/></svg>
-            </button>
-            <button class="icon-btn" id="miniModeRumahIbadahBtn" title="Input rumah ibadah">
-                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3 4 8v13h16V8z"/><path d="M9 21v-7h6v7"/><path d="M12 7v6"/><path d="M9 10h6"/></svg>
-            </button>
-            <button class="icon-btn" id="miniModePendudukMiskinBtn" title="Input penduduk miskin">
-                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4z"/><path d="M4 21a8 8 0 0 1 16 0"/><path d="M18 8h4"/><path d="M20 6v4"/></svg>
-            </button>
-            <button class="icon-btn" id="miniModeVerifikasiBtn" title="Verifikasi lapangan">
-                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6 9 17l-5-5"/><path d="M4 4h16v16H4z"/></svg>
-            </button>
-            <button class="icon-btn" id="miniModeAduanWargaBtn" title="Aduan warga">
-                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 8h10"/><path d="M7 12h6"/><path d="M20 16.5A2.5 2.5 0 0 1 17.5 19H8l-4 3V6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5z"/></svg>
-            </button>
-            <button class="icon-btn" id="toggleRegistryDrawerBtn" title="Buka registry & filter">
-                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="6" x2="20" y2="6"/><line x1="7" y1="12" x2="17" y2="12"/><line x1="10" y1="18" x2="14" y2="18"/></svg>
-            </button>
-            <button class="icon-btn" id="toggleBantuanDrawerBtn" title="Manajemen bantuan penduduk miskin">
-                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 21c4.97 0 9-2.24 9-5V8l-9-5-9 5v8c0 2.76 4.03 5 9 5Z"/><path d="M12 12v9"/><path d="M7 10.5 12 13l5-2.5"/></svg>
-            </button>
-        </div>
-
-        <div id="registryDrawer" class="hidden-drawer fixed right-4 top-[calc(1rem+env(safe-area-inset-top))] z-[2100] h-[calc(100vh-2rem-env(safe-area-inset-top))] w-[460px] max-w-[calc(100vw-1rem)] rounded-l-2xl border border-slate-200 bg-white/95 p-3 shadow-2xl backdrop-blur-md overflow-y-auto">
-            <div class="flex items-start justify-between gap-3">
-                <div>
-                    <h2 class="text-sm font-black tracking-tight text-slate-800">Registry</h2>
-                    <p class="mt-1 text-[11px] text-slate-500">Filter dan pencarian data input.</p>
-                </div>
-                <button id="registryDrawerCloseBtn" class="icon-btn h-9 w-9 text-slate-600" title="Tutup registry">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
-                </button>
-            </div>
-
-            <div class="mt-3 flex items-center justify-between rounded-xl bg-slate-50 px-3 py-2">
-                <span class="text-[11px] font-bold uppercase tracking-widest text-slate-500">Tercatat</span>
-                <span id="registryCount" class="text-sm font-black text-indigo-600">0</span>
-            </div>
-
-            <div class="mt-3 grid gap-2">
-                <div>
-                    <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Cari Nama / Atribut</label>
-                    <input id="registrySearchQuery" type="text" placeholder="Cari nama, kategori, nomor..." class="w-full rounded-lg border border-slate-300 bg-white p-2 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
+            <div class="shrink-0 flex items-center bg-white/10 px-5 py-4 rounded-2xl border border-white/10 backdrop-blur-md gap-3.5">
+                <div class="w-10 h-10 rounded-xl bg-white/20 flex items-center justify-center">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 2v20"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
                 </div>
                 <div>
-                    <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Jenis</label>
-                    <select id="registryTypeFilter" class="w-full rounded-lg border border-slate-300 bg-white p-2 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
-                        <option value="all">Semua</option>
-                        <option value="point">Poin</option>
-                        <option value="polyline">Polyline</option>
-                        <option value="polygon">Polygon</option>
-                        <option value="rumahIbadah">Rumah Ibadah</option>
-                        <option value="pendudukMiskin">Penduduk Miskin</option>
-                        <option value="roadDamage">Jalan Rusak</option>
-                    </select>
-                </div>
-                <div class="grid grid-cols-2 gap-2">
-                    <div>
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Dari</label>
-                        <input id="registryDateFrom" type="date" class="w-full rounded-lg border border-slate-300 bg-white p-2 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
-                    </div>
-                    <div>
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Sampai</label>
-                        <input id="registryDateTo" type="date" class="w-full rounded-lg border border-slate-300 bg-white p-2 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
-                    </div>
-                </div>
-            </div>
-
-            <div class="mt-3 flex gap-2">
-                <button id="registryApplyFilterBtn" class="flex-1 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-bold text-white transition hover:bg-indigo-700">Terapkan</button>
-                <button id="registryResetFilterBtn" class="rounded-lg bg-slate-100 px-4 py-2 text-sm font-bold text-slate-700 transition hover:bg-slate-200">Reset</button>
-            </div>
-
-            <div id="registryList" class="registry-list mt-3 space-y-2 pr-1">
-                <div class="rounded-xl border border-dashed border-slate-200 bg-slate-50 px-3 py-4 text-sm text-slate-500">
-                    Memuat data input...
+                    <div class="text-[10px] uppercase font-bold tracking-wider text-indigo-200">Database</div>
+                    <div class="text-base font-extrabold leading-none mt-0.5">Koneksi Aktif</div>
                 </div>
             </div>
         </div>
-
-        <div id="bantuanDrawer" class="hidden-drawer fixed right-4 top-[calc(1rem+env(safe-area-inset-top))] z-[2101] h-[calc(100vh-2rem-env(safe-area-inset-top))] w-[460px] max-w-[calc(100vw-1rem)] rounded-l-2xl border border-slate-200 bg-white/95 p-3 shadow-2xl backdrop-blur-md overflow-y-auto">
-            <div class="flex items-start justify-between gap-3">
-                <div>
-                    <h2 class="text-sm font-black tracking-tight text-slate-800">Manajemen Bantuan</h2>
-                    <p class="mt-1 text-[11px] text-slate-500">Kelola bantuan untuk penduduk miskin per wilayah rumah ibadah.</p>
-                </div>
-                <button id="bantuanDrawerCloseBtn" class="icon-btn h-9 w-9 text-slate-600" title="Tutup manajemen bantuan">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
-                </button>
-            </div>
-
-            <div class="mt-3 grid gap-2 sm:grid-cols-2">
-                <div class="sm:col-span-2">
-                    <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Rumah Ibadah Wilayah</label>
-                    <select id="bantuanRumahFilter" class="w-full rounded-lg border border-slate-300 bg-white p-2 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
-                        <option value="">Pilih rumah ibadah...</option>
-                    </select>
-                </div>
-                <div>
-                    <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Status Bantuan</label>
-                    <select id="bantuanStatusFilter" class="w-full rounded-lg border border-slate-300 bg-white p-2 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
-                        <option value="all">Semua</option>
-                        <option value="belum">Belum Dibantu</option>
-                        <option value="proses">Sedang Diproses</option>
-                        <option value="sudah">Sudah Dibantu</option>
-                    </select>
-                </div>
-                <div>
-                    <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Cari Ketua KK</label>
-                    <input id="bantuanSearchQuery" type="text" placeholder="Nama ketua KK..." class="w-full rounded-lg border border-slate-300 bg-white p-2 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
-                </div>
-            </div>
-
-            <div class="mt-3 flex items-center justify-between rounded-xl bg-slate-50 px-3 py-2">
-                <span class="text-[11px] font-bold uppercase tracking-widest text-slate-500">Prioritas</span>
-                <span id="bantuanCount" class="text-sm font-black text-indigo-600">0</span>
-            </div>
-
-            <div id="bantuanList" class="registry-list mt-3 space-y-2 pr-1">
-                <div class="rounded-xl border border-dashed border-slate-200 bg-slate-50 px-3 py-4 text-sm text-slate-500">
-                    Pilih rumah ibadah untuk melihat daftar penerima bantuan.
-                </div>
-            </div>
-        </div>
-
-        <div id="layerDrawer" class="hidden-drawer absolute left-6 top-[calc(1rem+env(safe-area-inset-top)+4.4rem)] z-[2099] w-[220px] max-w-[calc(100vw-3rem)] rounded-2xl border border-slate-200 bg-white/95 p-3 shadow-2xl backdrop-blur-md">
-            <div class="flex items-start justify-between gap-3">
-                <div>
-                    <h2 class="text-sm font-black tracking-tight text-slate-800">Layer</h2>
-                    <p class="mt-1 text-[11px] text-slate-500">Dropdown semua layer.</p>
-                </div>
-                <button id="layerDrawerCloseBtn" class="icon-btn h-9 w-9 text-slate-600" title="Tutup layer">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
-                </button>
-            </div>
-
-            <div class="mt-3 space-y-2 text-sm text-slate-700">
-                <label class="flex items-center gap-2 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2">
-                    <input id="layerToggle-spbuBuka24JamLayer" type="checkbox" class="h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
-                    <span>SPBU Buka 24 Jam</span>
-                </label>
-                <label class="flex items-center gap-2 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2">
-                    <input id="layerToggle-spbuTidak24JamLayer" type="checkbox" class="h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
-                    <span>SPBU Tidak Buka 24 Jam</span>
-                </label>
-                <label class="flex items-center gap-2 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2">
-                    <input id="layerToggle-jalanLayerGroup" type="checkbox" class="h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
-                    <span>Jalan</span>
-                </label>
-                <label class="flex items-center gap-2 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2">
-                    <input id="layerToggle-polygonLayerGroup" type="checkbox" class="h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
-                    <span>Polygon</span>
-                </label>
-                <label class="flex items-center gap-2 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2">
-                    <input id="layerToggle-roadDamageLayer" type="checkbox" class="h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
-                    <span>Jalan Rusak</span>
-                </label>
-                <label class="flex items-center gap-2 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2">
-                    <input id="layerToggle-rumahIbadahLayer" type="checkbox" class="h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
-                    <span>Rumah Ibadah</span>
-                </label>
-                <label class="flex items-center gap-2 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2">
-                    <input id="layerToggle-pendudukMiskinLayer" type="checkbox" class="h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
-                    <span>Penduduk Miskin</span>
-                </label>
-                <label class="flex items-center gap-2 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2">
-                    <input id="layerToggle-verifikasiLapanganLayer" type="checkbox" class="h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
-                    <span>Verifikasi Lapangan</span>
-                </label>
-                <label class="flex items-center gap-2 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2">
-                    <input id="layerToggle-aduanWargaLayer" type="checkbox" class="h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
-                    <span>Aduan Warga</span>
-                </label>
-                <label class="flex items-center gap-2 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2">
-                    <input id="layerToggle-roadNetworkLayer" type="checkbox" class="h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
-                    <span>Jalan Eksternal</span>
-                </label>
-            </div>
-        </div>
-
-        <div id="choroplethPanel" class="absolute right-6 bottom-6 z-[2000] hidden w-[320px] max-w-[calc(100vw-3rem)] rounded-2xl border border-slate-200 bg-white/95 p-3 shadow-2xl backdrop-blur-md">
-            <div class="flex items-start justify-between gap-3">
-                <div>
-                    <h3 class="text-sm font-black tracking-tight text-slate-800">Choropleth Kecamatan Pontianak</h3>
-                    <p class="mt-1 text-[11px] text-slate-500">Klik kecamatan untuk melihat jumlah penduduk.</p>
-                </div>
-                <span class="rounded-full bg-indigo-100 px-2 py-1 text-[10px] font-bold uppercase tracking-wider text-indigo-700">Interaktif</span>
-            </div>
-
-            <div class="mt-3 rounded-xl border border-slate-200 bg-slate-50 p-3">
-                <div id="choroplethName" class="text-xs font-bold uppercase tracking-wider text-slate-500">Belum dipilih</div>
-                <div id="choroplethPopulation" class="mt-1 text-xl font-black text-slate-800">-</div>
-                <div id="choroplethDensity" class="mt-1 text-xs text-slate-500">Klik salah satu kecamatan di peta.</div>
-            </div>
-
-            <div class="mt-3 grid grid-cols-2 gap-2 text-[11px] text-slate-600">
-                <div class="rounded-lg bg-[#fee2e2] px-2 py-1">&lt; 80.000 jiwa</div>
-                <div class="rounded-lg bg-[#fecaca] px-2 py-1">80.000 - 100.000</div>
-                <div class="rounded-lg bg-[#fca5a5] px-2 py-1">100.000 - 120.000</div>
-                <div class="rounded-lg bg-[#f87171] px-2 py-1">&gt; 120.000 jiwa</div>
-            </div>
-        </div>
-
-        <!-- Notifikasi -->
-        <div id="statusMsg" class="custom-msg p-4 rounded-lg shadow-xl font-medium transition-all transform"></div>
-
-        <!-- Modal Edit Fitur -->
-        <div id="featureModal" class="fixed inset-0 z-[10000] hidden items-center justify-center bg-slate-900/50 px-4">
-            <div class="w-full max-w-lg rounded-2xl bg-white p-5 shadow-2xl">
-                <div class="flex items-start justify-between gap-4 border-b pb-3">
-                    <div>
-                        <h3 class="text-lg font-bold text-slate-800">Edit Fitur Spasial</h3>
-                        <p class="text-sm text-slate-500">Ubah atribut atau simpan geometri yang sudah diedit di peta.</p>
-                    </div>
-                    <button id="closeFeatureModalBtn" class="rounded-lg bg-slate-100 px-3 py-2 text-sm font-bold text-slate-700 hover:bg-slate-200">Tutup</button>
-                </div>
-                <div class="mt-4 grid gap-3 sm:grid-cols-2">
-                    <input id="editFeatureId" type="hidden">
-                    <div>
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Nama Objek</label>
-                        <input id="editFeatureName" type="text" class="w-full rounded-lg border border-slate-300 p-2 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
-                    </div>
-                    <div>
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Kategori</label>
-                        <input id="editFeatureKategori" type="text" readonly class="w-full rounded-lg border border-slate-200 bg-slate-50 p-2 text-sm text-slate-600">
-                    </div>
-                    <div>
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Tipe</label>
-                        <input id="editFeatureType" type="text" readonly class="w-full rounded-lg border border-slate-200 bg-slate-50 p-2 text-sm text-slate-600">
-                    </div>
-                    <div>
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Status</label>
-                        <select id="editFeatureStatus" class="w-full rounded-lg border border-slate-300 bg-white p-2 text-sm outline-none focus:ring-2 focus:ring-indigo-500"></select>
-                    </div>
-                    <div class="sm:col-span-2">
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Panjang / Luas</label>
-                        <input id="editFeatureMeasure" type="text" readonly class="w-full rounded-lg border border-slate-200 bg-slate-50 p-2 text-sm text-slate-600">
-                    </div>
-                </div>
-                <div class="mt-5 flex flex-wrap gap-2 border-t pt-4">
-                    <button id="saveFeatureAttrBtn" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-bold text-white hover:bg-indigo-700">Simpan Atribut</button>
-                    <button id="toggleFeatureGeometryBtn" class="rounded-lg bg-emerald-600 px-4 py-2 text-sm font-bold text-white hover:bg-emerald-700">Edit Geometri</button>
-                    <button id="saveFeatureGeometryBtn" class="rounded-lg bg-amber-500 px-4 py-2 text-sm font-bold text-white hover:bg-amber-600">Simpan Geometri</button>
-                    <button id="deleteFeatureBtn" class="rounded-lg bg-red-600 px-4 py-2 text-sm font-bold text-white hover:bg-red-700">Hapus</button>
-                </div>
-            </div>
-        </div>
-
-        <!-- Modal Fitur Baru -->
-        <div id="newFeatureModal" class="fixed inset-0 z-[10001] hidden items-center justify-center bg-slate-900/50 px-4">
-            <div class="w-full max-w-lg rounded-2xl bg-white p-5 shadow-2xl">
-                <div class="flex items-start justify-between gap-4 border-b pb-3">
-                    <div>
-                        <h3 class="text-lg font-bold text-slate-800">Input Fitur Baru</h3>
-                        <p class="text-sm text-slate-500">Isi nama setelah garis atau polygon selesai digambar.</p>
-                    </div>
-                    <button id="closeNewFeatureModalBtn" class="rounded-lg bg-slate-100 px-3 py-2 text-sm font-bold text-slate-700 hover:bg-slate-200">Tutup</button>
-                </div>
-                <div class="mt-4 grid gap-3 sm:grid-cols-2">
-                    <div class="sm:col-span-2">
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Nama Objek</label>
-                        <input id="newFeatureName" type="text" placeholder="Tambahkan nama atribut" class="w-full rounded-lg border border-slate-300 p-2 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
-                    </div>
-                    <div>
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Kategori</label>
-                        <input id="newFeatureKategori" type="text" readonly class="w-full rounded-lg border border-slate-200 bg-slate-50 p-2 text-sm text-slate-600">
-                    </div>
-                    <div>
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Tipe</label>
-                        <input id="newFeatureTypeLabel" type="text" readonly class="w-full rounded-lg border border-slate-200 bg-slate-50 p-2 text-sm text-slate-600">
-                    </div>
-                    <div>
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Status</label>
-                        <select id="newFeatureStatus" class="w-full rounded-lg border border-slate-300 bg-white p-2 text-sm outline-none focus:ring-2 focus:ring-indigo-500"></select>
-                    </div>
-                    <div>
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Panjang / Luas</label>
-                        <input id="newFeatureMeasure" type="text" readonly class="w-full rounded-lg border border-slate-200 bg-slate-50 p-2 text-sm text-slate-600">
-                    </div>
-                </div>
-                <div class="mt-5 flex flex-wrap gap-2 border-t pt-4">
-                    <button id="saveNewFeatureBtn" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-bold text-white hover:bg-indigo-700">Simpan</button>
-                    <button id="cancelNewFeatureBtn" class="rounded-lg bg-slate-100 px-4 py-2 text-sm font-bold text-slate-700 hover:bg-slate-200">Batal</button>
-                </div>
-            </div>
-        </div>
-
-        <!-- Modal Lapor Jalan Rusak -->
-        <div id="roadDamageModal" class="fixed inset-0 z-[10002] hidden items-center justify-center bg-slate-900/50 px-4">
-            <div class="w-full max-w-lg rounded-2xl bg-white p-5 shadow-2xl">
-                <div class="flex items-start justify-between gap-4 border-b pb-3">
-                    <div>
-                        <h3 class="text-lg font-bold text-slate-800">Lapor Jalan Rusak</h3>
-                        <p class="text-sm text-slate-500">Dokumentasikan kondisi jalan dengan foto untuk membantu perbaikan.</p>
-                    </div>
-                    <button id="closeRoadDamageModalBtn" class="rounded-lg bg-slate-100 px-3 py-2 text-sm font-bold text-slate-700 hover:bg-slate-200">Tutup</button>
-                </div>
-                <div class="mt-4 grid gap-3">
-                    <div>
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Jenis Kerusakan</label>
-                        <select id="roadDamageType" class="w-full rounded-lg border border-slate-300 bg-white p-2 text-sm outline-none focus:ring-2 focus:ring-red-500">
-                            <option value="">Pilih jenis kerusakan</option>
-                            <option value="lubang">Lubang</option>
-                            <option value="retak">Retak</option>
-                            <option value="ambles">Ambles</option>
-                            <option value="bergelombang">Bergelombang</option>
-                            <option value="lainnya">Lainnya</option>
-                        </select>
-                    </div>
-                    <div>
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Tingkat Kerusakan</label>
-                        <select id="roadDamageSeverity" class="w-full rounded-lg border border-slate-300 bg-white p-2 text-sm outline-none focus:ring-2 focus:ring-red-500">
-                            <option value="ringan">Ringan</option>
-                            <option value="sedang" selected>Sedang</option>
-                            <option value="berat">Berat</option>
-                        </select>
-                    </div>
-                    <div>
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Deskripsi</label>
-                        <textarea id="roadDamageDesc" placeholder="Jelaskan kondisi jalan, lokasi spesifik, dll..." class="w-full rounded-lg border border-slate-300 p-2 text-sm outline-none focus:ring-2 focus:ring-red-500" rows="3"></textarea>
-                    </div>
-                    <div>
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Foto Kondisi (Opsional)</label>
-                        <input id="roadDamageImage" type="file" accept="image/*" class="w-full rounded-lg border border-slate-300 p-2 text-sm">
-                        <div id="imagePreview" class="mt-2 hidden">
-                            <img id="previewImg" src="" alt="Preview" class="max-h-40 rounded-lg">
-                        </div>
-                    </div>
-                    <div class="text-[10px] text-slate-500 bg-slate-50 p-2 rounded">
-                        📍 Koordinat: <span id="roadDamageCoords">-</span>
-                    </div>
-                </div>
-                <div class="mt-5 flex flex-wrap gap-2 border-t pt-4">
-                    <button id="saveRoadDamageBtn" class="rounded-lg bg-red-600 px-4 py-2 text-sm font-bold text-white hover:bg-red-700">Simpan Laporan</button>
-                    <button id="cancelRoadDamageBtn" class="rounded-lg bg-slate-100 px-4 py-2 text-sm font-bold text-slate-700 hover:bg-slate-200">Batal</button>
-                </div>
-            </div>
-        </div>
-
-        <div id="rumahIbadahModal" class="fixed inset-0 z-[10003] hidden items-center justify-center bg-slate-900/50 px-4">
-            <div class="w-full max-w-xl rounded-2xl bg-white p-5 shadow-2xl">
-                <div class="flex items-start justify-between gap-4 border-b pb-3">
-                    <div>
-                        <h3 class="text-lg font-bold text-slate-800">Input Rumah Ibadah</h3>
-                        <p class="text-sm text-slate-500">Alamat diambil otomatis dari reverse geocode koordinat peta.</p>
-                    </div>
-                    <button id="closeRumahIbadahModalBtn" class="rounded-lg bg-slate-100 px-3 py-2 text-sm font-bold text-slate-700 hover:bg-slate-200">Tutup</button>
-                </div>
-                <div class="mt-4 grid gap-3 sm:grid-cols-2">
-                    <input id="rumahIbadahId" type="hidden">
-                    <div class="sm:col-span-2">
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Nama Rumah Ibadah</label>
-                        <input id="rumahIbadahNama" type="text" placeholder="Masukkan nama rumah ibadah" class="w-full rounded-lg border border-slate-300 p-2 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
-                    </div>
-                    <div class="sm:col-span-2">
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Alamat Otomatis</label>
-                        <textarea id="rumahIbadahAlamat" rows="3" readonly class="w-full rounded-lg border border-slate-200 bg-slate-50 p-2 text-sm text-slate-600"></textarea>
-                    </div>
-                    <div>
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">PIC</label>
-                        <input id="rumahIbadahPic" type="text" placeholder="Nama PIC" class="w-full rounded-lg border border-slate-300 p-2 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
-                    </div>
-                    <div>
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Radius Pencarian</label>
-                        <input id="rumahIbadahRadius" type="range" min="50" max="5000" step="50" value="1000" class="w-full">
-                        <div class="mt-1 text-xs text-slate-600">Radius: <span id="rumahIbadahRadiusValue">1000</span> meter</div>
-                    </div>
-                    <div class="sm:col-span-2 text-[10px] text-slate-500 bg-slate-50 p-2 rounded">
-                        📍 Koordinat: <span id="rumahIbadahCoords">-</span>
-                    </div>
-                </div>
-                <div class="mt-5 flex flex-wrap gap-2 border-t pt-4">
-                    <button id="saveRumahIbadahBtn" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-bold text-white hover:bg-indigo-700">Simpan</button>
-                    <button id="cancelRumahIbadahBtn" class="rounded-lg bg-slate-100 px-4 py-2 text-sm font-bold text-slate-700 hover:bg-slate-200">Batal</button>
-                </div>
-            </div>
-        </div>
-
-        <div id="pendudukMiskinModal" class="fixed inset-0 z-[10004] hidden items-center justify-center bg-slate-900/50 px-4">
-            <div class="w-full max-w-xl rounded-2xl bg-white p-5 shadow-2xl">
-                <div class="flex items-start justify-between gap-4 border-b pb-3">
-                    <div>
-                        <h3 class="text-lg font-bold text-slate-800">Input Penduduk Miskin</h3>
-                        <p class="text-sm text-slate-500">Data akan ditautkan otomatis ke rumah ibadah terdekat.</p>
-                    </div>
-                    <button id="closePendudukMiskinModalBtn" class="rounded-lg bg-slate-100 px-3 py-2 text-sm font-bold text-slate-700 hover:bg-slate-200">Tutup</button>
-                </div>
-                <div class="mt-4 grid gap-3 sm:grid-cols-2">
-                    <input id="pendudukMiskinId" type="hidden">
-                    <div class="sm:col-span-2">
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Nama Ketua KK</label>
-                        <input id="pendudukMiskinNama" type="text" placeholder="Masukkan nama ketua KK" class="w-full rounded-lg border border-slate-300 p-2 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
-                    </div>
-                    <div>
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Jumlah Anggota Keluarga</label>
-                        <input id="pendudukMiskinAnggota" type="number" min="1" step="1" value="1" class="w-full rounded-lg border border-slate-300 p-2 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
-                    </div>
-                    <div>
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Rumah Ibadah Terdekat</label>
-                        <input id="pendudukMiskinRumahIbadah" type="text" readonly class="w-full rounded-lg border border-slate-200 bg-slate-50 p-2 text-sm text-slate-600">
-                    </div>
-                    <div class="sm:col-span-2">
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Jarak ke Rumah Ibadah</label>
-                        <input id="pendudukMiskinJarak" type="text" readonly class="w-full rounded-lg border border-slate-200 bg-slate-50 p-2 text-sm text-slate-600">
-                    </div>
-                    <div class="sm:col-span-2 text-[10px] text-slate-500 bg-slate-50 p-2 rounded">
-                        📍 Koordinat: <span id="pendudukMiskinCoords">-</span>
-                    </div>
-                </div>
-                <div class="mt-5 flex flex-wrap gap-2 border-t pt-4">
-                    <button id="savePendudukMiskinBtn" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-bold text-white hover:bg-indigo-700">Simpan</button>
-                    <button id="cancelPendudukMiskinBtn" class="rounded-lg bg-slate-100 px-4 py-2 text-sm font-bold text-slate-700 hover:bg-slate-200">Batal</button>
-                </div>
-            </div>
-        </div>
-
-        <div id="verifikasiLapanganModal" class="fixed inset-0 z-[10005] hidden items-center justify-center bg-slate-900/50 px-4">
-            <div class="w-full max-w-xl rounded-2xl bg-white p-5 shadow-2xl">
-                <div class="flex items-start justify-between gap-4 border-b pb-3">
-                    <div>
-                        <h3 class="text-lg font-bold text-slate-800">Verifikasi Lapangan</h3>
-                        <p class="text-sm text-slate-500">Catat hasil cek lapangan untuk data kemiskinan atau infrastruktur.</p>
-                    </div>
-                    <button id="closeVerifikasiLapanganModalBtn" class="rounded-lg bg-slate-100 px-3 py-2 text-sm font-bold text-slate-700 hover:bg-slate-200">Tutup</button>
-                </div>
-                <div class="mt-4 grid gap-3 sm:grid-cols-2">
-                    <input id="verifikasiLapanganId" type="hidden">
-                    <div>
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Target Data</label>
-                        <select id="verifikasiJenisTarget" class="w-full rounded-lg border border-slate-300 bg-white p-2 text-sm outline-none focus:ring-2 focus:ring-emerald-500">
-                            <option value="penduduk_miskin">Penduduk Miskin</option>
-                            <option value="jalan_rusak">Jalan Rusak</option>
-                            <option value="rumah_ibadah">Rumah Ibadah</option>
-                            <option value="lainnya">Lainnya</option>
-                        </select>
-                    </div>
-                    <div>
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Nama Target</label>
-                        <input id="verifikasiTargetNama" type="text" placeholder="Contoh: KK A / Jalan RW 03" class="w-full rounded-lg border border-slate-300 p-2 text-sm outline-none focus:ring-2 focus:ring-emerald-500">
-                    </div>
-                    <div>
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Nama Petugas</label>
-                        <input id="verifikasiPetugasNama" type="text" placeholder="Nama surveyor" class="w-full rounded-lg border border-slate-300 p-2 text-sm outline-none focus:ring-2 focus:ring-emerald-500">
-                    </div>
-                    <div>
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Status</label>
-                        <select id="verifikasiStatus" class="w-full rounded-lg border border-slate-300 bg-white p-2 text-sm outline-none focus:ring-2 focus:ring-emerald-500">
-                            <option value="menunggu">Menunggu</option>
-                            <option value="valid">Valid</option>
-                            <option value="perlu_tindak_lanjut">Perlu Tindak Lanjut</option>
-                        </select>
-                    </div>
-                    <div class="sm:col-span-2">
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Hasil Temuan</label>
-                        <textarea id="verifikasiHasilTemuan" rows="3" placeholder="Ringkasan hasil cek lapangan" class="w-full rounded-lg border border-slate-300 p-2 text-sm outline-none focus:ring-2 focus:ring-emerald-500"></textarea>
-                    </div>
-                    <div class="sm:col-span-2">
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Tindak Lanjut</label>
-                        <textarea id="verifikasiTindakLanjut" rows="2" placeholder="Catatan tindak lanjut" class="w-full rounded-lg border border-slate-300 p-2 text-sm outline-none focus:ring-2 focus:ring-emerald-500"></textarea>
-                    </div>
-                    <div class="sm:col-span-2">
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Foto (Opsional)</label>
-                        <input id="verifikasiFoto" type="file" accept="image/*" class="w-full rounded-lg border border-slate-300 p-2 text-sm">
-                    </div>
-                    <div class="sm:col-span-2 text-[10px] text-slate-500 bg-slate-50 p-2 rounded">
-                        📍 Koordinat: <span id="verifikasiCoords">-</span>
-                    </div>
-                </div>
-                <div class="mt-5 flex flex-wrap gap-2 border-t pt-4">
-                    <button id="saveVerifikasiLapanganBtn" class="rounded-lg bg-emerald-600 px-4 py-2 text-sm font-bold text-white hover:bg-emerald-700">Simpan Verifikasi</button>
-                    <button id="cancelVerifikasiLapanganBtn" class="rounded-lg bg-slate-100 px-4 py-2 text-sm font-bold text-slate-700 hover:bg-slate-200">Batal</button>
-                </div>
-            </div>
-        </div>
-
-        <div id="aduanWargaModal" class="fixed inset-0 z-[10006] hidden items-center justify-center bg-slate-900/50 px-4">
-            <div class="w-full max-w-xl rounded-2xl bg-white p-5 shadow-2xl">
-                <div class="flex items-start justify-between gap-4 border-b pb-3">
-                    <div>
-                        <h3 class="text-lg font-bold text-slate-800">Aduan Warga</h3>
-                        <p class="text-sm text-slate-500">Terima aduan berbasis lokasi untuk memprioritaskan respon lapangan.</p>
-                    </div>
-                    <button id="closeAduanWargaModalBtn" class="rounded-lg bg-slate-100 px-3 py-2 text-sm font-bold text-slate-700 hover:bg-slate-200">Tutup</button>
-                </div>
-                <div class="mt-4 grid gap-3 sm:grid-cols-2">
-                    <input id="aduanWargaId" type="hidden">
-                    <div>
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Kategori</label>
-                        <select id="aduanKategori" class="w-full rounded-lg border border-slate-300 bg-white p-2 text-sm outline-none focus:ring-2 focus:ring-rose-500">
-                            <option value="">Pilih kategori</option>
-                            <option value="jalan rusak">Jalan Rusak</option>
-                            <option value="banjir">Banjir</option>
-                            <option value="rumah tidak layak">Rumah Tidak Layak</option>
-                            <option value="air bersih">Air Bersih</option>
-                            <option value="sanitasi">Sanitasi</option>
-                            <option value="akses bantuan">Akses Bantuan</option>
-                            <option value="lainnya">Lainnya</option>
-                        </select>
-                    </div>
-                    <div>
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Nama Pelapor</label>
-                        <input id="aduanPelaporNama" type="text" placeholder="Nama warga" class="w-full rounded-lg border border-slate-300 p-2 text-sm outline-none focus:ring-2 focus:ring-rose-500">
-                    </div>
-                    <div>
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Kontak</label>
-                        <input id="aduanKontakPelapor" type="text" placeholder="Nomor HP / WA" class="w-full rounded-lg border border-slate-300 p-2 text-sm outline-none focus:ring-2 focus:ring-rose-500">
-                    </div>
-                    <div>
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Status</label>
-                        <select id="aduanStatus" class="w-full rounded-lg border border-slate-300 bg-white p-2 text-sm outline-none focus:ring-2 focus:ring-rose-500">
-                            <option value="baru">Baru</option>
-                            <option value="diproses">Diproses</option>
-                            <option value="selesai">Selesai</option>
-                        </select>
-                    </div>
-                    <div class="sm:col-span-2">
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Deskripsi Aduan</label>
-                        <textarea id="aduanDeskripsi" rows="3" placeholder="Jelaskan kondisi yang diadukan" class="w-full rounded-lg border border-slate-300 p-2 text-sm outline-none focus:ring-2 focus:ring-rose-500"></textarea>
-                    </div>
-                    <div class="sm:col-span-2">
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Tindak Lanjut</label>
-                        <textarea id="aduanTindakLanjut" rows="2" placeholder="Catatan respon / tindak lanjut" class="w-full rounded-lg border border-slate-300 p-2 text-sm outline-none focus:ring-2 focus:ring-rose-500"></textarea>
-                    </div>
-                    <div class="sm:col-span-2">
-                        <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-slate-400">Foto (Opsional)</label>
-                        <input id="aduanFoto" type="file" accept="image/*" class="w-full rounded-lg border border-slate-300 p-2 text-sm">
-                    </div>
-                    <div class="sm:col-span-2 text-[10px] text-slate-500 bg-slate-50 p-2 rounded">
-                        📍 Koordinat: <span id="aduanCoords">-</span>
-                    </div>
-                </div>
-                <div class="mt-5 flex flex-wrap gap-2 border-t pt-4">
-                    <button id="saveAduanWargaBtn" class="rounded-lg bg-rose-600 px-4 py-2 text-sm font-bold text-white hover:bg-rose-700">Simpan Aduan</button>
-                    <button id="cancelAduanWargaBtn" class="rounded-lg bg-slate-100 px-4 py-2 text-sm font-bold text-slate-700 hover:bg-slate-200">Batal</button>
-                </div>
-            </div>
-        </div>
-
-        <select id="featureType" class="hidden">
-            <option value="polyline">polyline</option>
-            <option value="polygon">polygon</option>
-        </select>
-        <select id="featureStatus" class="hidden"></select>
     </div>
 
-    <!-- Leaflet JS -->
-    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
-    <script src="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/proj4@2.12.1/dist/proj4.js"></script>
-    
-    <script>
-        // Inisialisasi Peta (Default Pontianak)
-        const map = L.map('map').setView([-0.0263, 109.3425], 13);
-        const REFRESH_INTERVAL_MS = 5000;
-        let autoRefreshTimer = null;
-        let isSyncing = false;
-        let suppressAutoReload = false;
-        let isFeatureDrawing = false;
-        let isFeatureSaving = false;
-        let latestSnapshotHash = '';
-        let featureLayer = L.featureGroup();
-        let drawControl = null;
-        let activeDrawHandler = null;
-        let currentDrawMode = 'polyline';
-        let appMode = 'view';
-        let isEditModeEnabled = true;
-        let pendingShape = null;
-        let pendingNewFeatureLayer = null;
-        let featureLayerMap = {};
-        let locationLayerMap = {};
-        let locationRecords = [];
-        let featureRecords = [];
-        let editingFeatureId = null;
-        let choroplethLayer = null;
-        let spbuBuka24JamLayer = L.layerGroup().addTo(map);
-        let spbuTidak24JamLayer = L.layerGroup().addTo(map);
-        let spbuLayerControl = null;
-        let spatialLayerControl = null;
-        let utilityControl = null;
-        let rumahIbadahLayer = L.featureGroup().addTo(map);
-        let pendudukMiskinLayer = L.featureGroup().addTo(map);
-        let verifikasiLapanganLayer = L.featureGroup().addTo(map);
-        let aduanWargaLayer = L.featureGroup().addTo(map);
-        let rumahIbadahLayerMap = {};
-        let pendudukMiskinLayerMap = {};
-        let verifikasiLapanganLayerMap = {};
-        let aduanWargaLayerMap = {};
-        let rumahIbadahRecords = [];
-        let pendudukMiskinRecords = [];
-        let verifikasiLapanganRecords = [];
-        let aduanWargaRecords = [];
-        let pendingRumahIbadahCoords = null;
-        let pendingPendudukMiskinCoords = null;
-        let pendingVerifikasiCoords = null;
-        let pendingAduanCoords = null;
-        let editingRumahIbadahId = null;
-        let selectedRumahIbadahId = null;
-        let selectedBantuanRumahIbadahId = null;
-        let jalanLayerGroup = L.featureGroup().addTo(map);
-        let polygonLayerGroup = L.featureGroup().addTo(map);
-        let roadDamageLayer = L.featureGroup().addTo(map);
-        let roadNetworkLayer = L.featureGroup().addTo(map);
-        let roadDamageRecords = [];
-        let pendingRoadDamageCoords = null;
-        let isMainPanelCollapsed = false;
-        let hiddenLayersDuringChoropleth = [];
-        let layerDrawerControls = [];
-
-        const ROAD_NETWORK_GEOJSON_PATH = 'data/Export_Output_2.json';
-        let roadNetworkLoaded = false;
-
-        const FEATURE_STATUS_OPTIONS = {
-            polyline: [
-                { value: 'Jalan Nasional', label: 'Jalan Nasional', color: '#16a34a' },
-                { value: 'Jalan Provinsi', label: 'Jalan Provinsi', color: '#f59e0b' },
-                { value: 'Jalan Kabupaten', label: 'Jalan Kabupaten', color: '#dc2626' }
-            ],
-            polygon: [
-                { value: 'SHM', label: 'SHM', color: '#10b981' },
-                { value: 'HGB', label: 'HGB', color: '#3b82f6' },
-                { value: 'HGU', label: 'HGU', color: '#8b5cf6' },
-                { value: 'HP', label: 'HP', color: '#64748b' }
-            ]
-        };
-
-        const CHOROPLETH_GEOJSON_PATH = 'data/pontianak-kecamatan.geojson';
-        let choroplethGeoJsonData = null;
-        const DISTRICT_POPULATION_MAP = {
-            'pontianak barat': 148800,
-            'pontianak kota': 98500,
-            'pontianak selatan': 133600,
-            'pontianak tenggara': 52900,
-            'pontianak timur': 121500,
-            'pontianak utara': 129200
-        };
-
-        function normalizeDistrictName(name) {
-            return String(name || '')
-                .toLowerCase()
-                .replace(/\s+/g, ' ')
-                .trim();
-        }
-
-        function enrichFeaturePopulation(feature) {
-            const properties = feature.properties || {};
-            const districtName = properties.name || properties.NAME || properties.Ket || '';
-            const districtKey = normalizeDistrictName(districtName);
-            const mappedPopulation = DISTRICT_POPULATION_MAP[districtKey];
-
-            if (mappedPopulation == null) {
-                return feature;
-            }
-
-            return {
-                ...feature,
-                properties: {
-                    ...properties,
-                    population: Number(mappedPopulation)
-                }
-            };
-        }
-
-        function getPopulationFill(population) {
-            if (population > 120000) return '#ef4444';
-            if (population > 100000) return '#f87171';
-            if (population > 80000) return '#fca5a5';
-            return '#fecaca';
-        }
-
-        function getChoroplethValue(properties) {
-            if (properties.population != null) {
-                return { key: 'population', label: 'Populasi', value: Number(properties.population || 0), unit: 'jiwa' };
-            }
-
-            if (properties.density != null) {
-                return { key: 'density', label: 'Kepadatan', value: Number(properties.density || 0), unit: 'jiwa/km²' };
-            }
-
-            return { key: 'none', label: 'Nilai', value: 0, unit: '' };
-        }
-
-        function resetChoroplethPanel() {
-            document.getElementById('choroplethName').innerText = 'Belum dipilih';
-            document.getElementById('choroplethPopulation').innerText = '-';
-            document.getElementById('choroplethDensity').innerText = 'Klik salah satu kecamatan di peta.';
-        }
-
-        function updateChoroplethPanel(properties) {
-            const mainValue = getChoroplethValue(properties);
-            const population = Number(properties.population || 0);
-            const area = Number(properties.area_km2 || 0);
-            const density = area > 0 ? population / area : 0;
-
-            document.getElementById('choroplethName').innerText = properties.name || properties.NAME || 'Tanpa nama';
-            document.getElementById('choroplethPopulation').innerText = `${mainValue.value.toLocaleString('id-ID')} ${mainValue.unit}`;
-
-            if (area > 0 && population > 0) {
-                document.getElementById('choroplethDensity').innerText = `Kepadatan: ${density.toLocaleString('id-ID', { maximumFractionDigits: 0 })} jiwa/km²`;
-            } else {
-                document.getElementById('choroplethDensity').innerText = `${mainValue.label} ditampilkan dari properti GeoJSON.`;
-            }
-        }
-
-        function clearChoroplethLayer() {
-            if (choroplethLayer) {
-                map.removeLayer(choroplethLayer);
-                choroplethLayer = null;
-            }
-        }
-
-        function getRingArea(ring) {
-            if (!Array.isArray(ring) || ring.length < 3) {
-                return 0;
-            }
-
-            let area = 0;
-            for (let index = 0; index < ring.length; index += 1) {
-                const [x1, y1] = ring[index];
-                const [x2, y2] = ring[(index + 1) % ring.length];
-                area += (x1 * y2) - (x2 * y1);
-            }
-
-            return Math.abs(area) / 2;
-        }
-
-        function getPolygonPartArea(part) {
-            const outerRing = Array.isArray(part) ? part[0] : null;
-            return getRingArea(outerRing);
-        }
-
-        function sanitizeChoroplethFeature(feature) {
-            const geometry = feature.geometry || {};
-
-            if (geometry.type === 'Polygon' && Array.isArray(geometry.coordinates)) {
-                const outerRing = geometry.coordinates[0];
-                if (!Array.isArray(outerRing)) {
-                    return feature;
-                }
-
-                return {
-                    ...feature,
-                    geometry: {
-                        ...geometry,
-                        coordinates: [outerRing]
-                    }
-                };
-            }
-
-            if (geometry.type !== 'MultiPolygon' || !Array.isArray(geometry.coordinates)) {
-                return feature;
-            }
-
-            const normalizedParts = geometry.coordinates
-                .map(part => (Array.isArray(part) && Array.isArray(part[0]) ? [part[0]] : part));
-
-            const partsWithArea = normalizedParts
-                .map(part => ({ part, area: getPolygonPartArea(part) }))
-                .filter(entry => entry.area > 0)
-                .sort((left, right) => right.area - left.area);
-
-            if (partsWithArea.length <= 1) {
-                return feature;
-            }
-
-            const largestArea = partsWithArea[0].area;
-            const filteredParts = partsWithArea
-                .filter(entry => entry.area >= largestArea * 0.1)
-                .map(entry => entry.part);
-
-            return {
-                ...feature,
-                geometry: {
-                    ...geometry,
-                    coordinates: filteredParts.length > 0 ? filteredParts : [partsWithArea[0].part]
-                }
-            };
-        }
-
-        function sanitizeChoroplethGeoJson(data) {
-            return {
-                ...data,
-                features: data.features
-                    .map(sanitizeChoroplethFeature)
-                    .map(enrichFeaturePopulation)
-            };
-        }
-
-        async function loadChoroplethGeoJson() {
-            if (choroplethGeoJsonData) {
-                return choroplethGeoJsonData;
-            }
-
-            const response = await fetch(CHOROPLETH_GEOJSON_PATH, { cache: 'no-store' });
-            if (!response.ok) {
-                throw new Error(`Gagal memuat ${CHOROPLETH_GEOJSON_PATH} (HTTP ${response.status})`);
-            }
-
-            const data = await response.json();
-            if (!data || data.type !== 'FeatureCollection' || !Array.isArray(data.features)) {
-                throw new Error('Format GeoJSON tidak valid, harus FeatureCollection.');
-            }
-
-            choroplethGeoJsonData = sanitizeChoroplethGeoJson(data);
-            return choroplethGeoJsonData;
-        }
-
-        async function buildChoroplethLayer() {
-            clearChoroplethLayer();
-
-            const geoJsonData = await loadChoroplethGeoJson();
-
-            choroplethLayer = L.geoJSON(geoJsonData, {
-                style: feature => ({
-                    color: 'transparent',
-                    weight: 0,
-                    fillColor: getPopulationFill(Number(getChoroplethValue(feature.properties || {}).value || 0)),
-                    fillOpacity: 0.72
-                }),
-                onEachFeature: (feature, layer) => {
-                    const props = feature.properties || {};
-                    const districtName = props.name || props.NAME || 'Tanpa nama';
-
-                    // Diagnostic: Disabled tooltip
-                    // layer.bindTooltip(districtName, { sticky: true });
-                    layer.on('mouseover', () => {
-                        layer.setStyle({ weight: 0, fillOpacity: 0.86, color: 'transparent' });
-                    });
-                    layer.on('mouseout', () => {
-                        choroplethLayer.resetStyle(layer);
-                    });
-                    layer.on('click', () => {
-                        const mainValue = getChoroplethValue(props);
-
-                        updateChoroplethPanel(props);
-                        // Diagnostic: Disabled popup to check if black rectangle comes from popup element
-                        // layer.bindPopup(`<div class="p-1"><strong>${districtName}</strong><br>${mainValue.label}: ${mainValue.value.toLocaleString('id-ID')} ${mainValue.unit}</div>`).openPopup();
-                    });
-                }
-            }).addTo(map);
-
-            map.fitBounds(choroplethLayer.getBounds(), { padding: [20, 20] });
-            resetChoroplethPanel();
-        }
-
-        async function toggleChoroplethMode(enabled) {
-            const panel = document.getElementById('choroplethPanel');
-
-            panel.classList.toggle('hidden', !enabled);
-            if (enabled) {
-                setSpatialOverlayVisibility(false);
-                try {
-                    await buildChoroplethLayer();
-                } catch (error) {
-                    showMessage(error.message || 'Gagal memuat peta choropleth', 'bg-red-600 text-white');
-                    panel.classList.add('hidden');
-                    setSpatialOverlayVisibility(true);
-                }
-                return;
-            }
-
-            clearChoroplethLayer();
-            setSpatialOverlayVisibility(true);
-        }
-
-        function getFeatureStatusColor(type, status) {
-            const options = FEATURE_STATUS_OPTIONS[type] || [];
-            const found = options.find(item => item.value === status);
-            return found ? found.color : '#0f172a';
-        }
-
-        function formatMeters(value) {
-            return `${value.toFixed(2)} m`;
-        }
-
-        function formatSquareMeters(value) {
-            return `${value.toFixed(2)} m²`;
-        }
-
-        function parseDateOnly(value) {
-            if (!value) return null;
-            const normalized = String(value).replace(' ', 'T');
-            const date = new Date(normalized);
-            if (Number.isNaN(date.getTime())) return null;
-            return date;
-        }
-
-        function formatInputDate(value) {
-            const date = parseDateOnly(value);
-            if (!date) return 'Tanggal tidak tersedia';
-
-            return new Intl.DateTimeFormat('id-ID', {
-                dateStyle: 'medium',
-                timeStyle: 'short'
-            }).format(date);
-        }
-
-        function getRecordDateKey(record) {
-            const date = parseDateOnly(record && record.created_at);
-            if (!date) return null;
-
-            const year = date.getFullYear();
-            const month = String(date.getMonth() + 1).padStart(2, '0');
-            const day = String(date.getDate()).padStart(2, '0');
-            return `${year}-${month}-${day}`;
-        }
-
-        function getRegistryUi() {
-            const drawerPanel = document.getElementById('registryDrawer');
-            const drawerSearch = document.getElementById('registrySearchQuery');
-
-            if (drawerPanel && drawerSearch) {
-                return {
-                    panel: drawerPanel,
-                    count: document.getElementById('registryCount'),
-                    list: document.getElementById('registryList'),
-                    search: drawerSearch,
-                    type: document.getElementById('registryTypeFilter'),
-                    from: document.getElementById('registryDateFrom'),
-                    to: document.getElementById('registryDateTo')
-                };
-            }
-
-            return {
-                panel: document.getElementById('inputRegistryPanel'),
-                count: document.getElementById('inputRegistryCount'),
-                list: document.getElementById('inputRegistryList'),
-                search: document.getElementById('inputSearchQuery'),
-                type: document.getElementById('inputTypeFilter'),
-                from: document.getElementById('inputDateFrom'),
-                to: document.getElementById('inputDateTo')
-            };
-        }
-
-        function enforceRegistryDateRange(showFeedback = false) {
-            const ui = getRegistryUi();
-            const fromEl = ui.from;
-            const toEl = ui.to;
-            if (!fromEl || !toEl) return;
-            const from = fromEl.value;
-            const to = toEl.value;
-
-            // Batasi tanggal akhir agar tidak boleh sebelum tanggal awal.
-            toEl.min = from || '';
-
-            if (from && to && to < from) {
-                toEl.value = from;
-                if (showFeedback) {
-                    showMessage('Tanggal akhir disesuaikan ke tanggal awal', 'bg-slate-700 text-white');
-                }
-            }
-        }
-
-        function getRegistryFilters() {
-            const ui = getRegistryUi();
-            return {
-                search: String(ui.search && ui.search.value ? ui.search.value : '').toLowerCase().trim(),
-                type: ui.type && ui.type.value ? ui.type.value : 'all',
-                from: ui.from && ui.from.value ? ui.from.value : '',
-                to: ui.to && ui.to.value ? ui.to.value : ''
-            };
-        }
-
-        function recordMatchesFilters(record, filters) {
-            // Filter berdasarkan pencarian
-            if (filters.search) {
-                const searchQuery = filters.search;
-                const matchesSearch = 
-                    (record.title || '').toLowerCase().includes(searchQuery) ||
-                    (record.subtitle || '').toLowerCase().includes(searchQuery) ||
-                    (record.status || '').toLowerCase().includes(searchQuery) ||
-                    String(record.id).includes(searchQuery);
-                
-                if (!matchesSearch) {
-                    return false;
-                }
-            }
-
-            if (filters.type !== 'all' && record.type !== filters.type) {
-                return false;
-            }
-
-            const dateKey = getRecordDateKey(record);
-            if (!filters.from && !filters.to) {
-                return true;
-            }
-
-            if (!dateKey) {
-                return false;
-            }
-
-            if (filters.from && dateKey < filters.from) {
-                return false;
-            }
-
-            if (filters.to && dateKey > filters.to) {
-                return false;
-            }
-
-            return true;
-        }
-
-        function buildRegistryRecords() {
-            const pointRecords = locationRecords.map(loc => ({
-                id: Number(loc.id),
-                type: 'point',
-                title: loc.nama || 'Tanpa nama',
-                subtitle: loc.nomor || '-',
-                status: loc.buka_24jam || '-',
-                created_at: loc.created_at || null
-            }));
-
-            const spatialRecords = featureRecords.map(feature => ({
-                id: Number(feature.id),
-                type: feature.type,
-                title: feature.nama_objek || 'Tanpa nama',
-                subtitle: feature.kategori || '-',
-                status: feature.status_objek || '-',
-                created_at: feature.created_at || null
-            }));
-
-            const roadDamageRegistryRecords = roadDamageRecords.map(record => ({
-                id: Number(record.id),
-                type: 'roadDamage',
-                title: `Jalan Rusak - ${record.jenis_kerusakan || 'Tanpa jenis'}`,
-                subtitle: record.deskripsi || '-',
-                status: record.severity || '-',
-                created_at: record.created_at || null,
-                latitude: Number(record.latitude),
-                longitude: Number(record.longitude)
-            }));
-
-            const rumahIbadahRegistryRecords = rumahIbadahRecords.map(record => ({
-                id: Number(record.id),
-                type: 'rumahIbadah',
-                title: record.nama || 'Tanpa nama',
-                subtitle: record.pic || '-',
-                status: `${Number(record.radius_m || 0).toLocaleString('id-ID')} m`,
-                created_at: record.created_at || null,
-                latitude: Number(record.latitude),
-                longitude: Number(record.longitude)
-            }));
-
-            const pendudukMiskinRegistryRecords = pendudukMiskinRecords.map(record => ({
-                id: Number(record.id),
-                type: 'pendudukMiskin',
-                title: record.nama_ketua_kk || 'Tanpa nama',
-                subtitle: `${Number(record.jumlah_anggota || 0)} anggota`,
-                status: record.rumah_ibadah_nama || '-',
-                created_at: record.created_at || null,
-                latitude: Number(record.latitude),
-                longitude: Number(record.longitude)
-            }));
-
-            const verifikasiRegistryRecords = verifikasiLapanganRecords.map(record => ({
-                id: Number(record.id),
-                type: 'verifikasiLapangan',
-                title: record.target_nama || 'Verifikasi lapangan',
-                subtitle: record.petugas_nama || '-',
-                status: record.status_verifikasi || 'menunggu',
-                created_at: record.created_at || null,
-                latitude: Number(record.latitude),
-                longitude: Number(record.longitude)
-            }));
-
-            const aduanRegistryRecords = aduanWargaRecords.map(record => ({
-                id: Number(record.id),
-                type: 'aduanWarga',
-                title: record.kategori || 'Aduan warga',
-                subtitle: record.pelapor_nama || '-',
-                status: record.status_tindak_lanjut || 'baru',
-                created_at: record.created_at || null,
-                latitude: Number(record.latitude),
-                longitude: Number(record.longitude)
-            }));
-
-            return [...pointRecords, ...spatialRecords, ...roadDamageRegistryRecords, ...rumahIbadahRegistryRecords, ...pendudukMiskinRegistryRecords, ...verifikasiRegistryRecords, ...aduanRegistryRecords].sort((left, right) => {
-                const leftDate = parseDateOnly(left.created_at);
-                const rightDate = parseDateOnly(right.created_at);
-
-                if (!leftDate && !rightDate) return right.id - left.id;
-                if (!leftDate) return 1;
-                if (!rightDate) return -1;
-                return rightDate - leftDate;
-            });
-        }
-
-        function getRegistryTypeLabel(type) {
-            if (type === 'point') return 'Poin';
-            if (type === 'polyline') return 'Polyline';
-            if (type === 'polygon') return 'Polygon';
-            if (type === 'roadDamage') return 'Jalan Rusak';
-            if (type === 'rumahIbadah') return 'Rumah Ibadah';
-            if (type === 'pendudukMiskin') return 'Penduduk Miskin';
-            if (type === 'verifikasiLapangan') return 'Verifikasi Lapangan';
-            if (type === 'aduanWarga') return 'Aduan Warga';
-            return 'Data';
-        }
-
-        function getRegistryTypeStyle(type) {
-            if (type === 'point') return 'bg-emerald-100 text-emerald-700';
-            if (type === 'polyline') return 'bg-indigo-100 text-indigo-700';
-            if (type === 'polygon') return 'bg-amber-100 text-amber-700';
-            if (type === 'roadDamage') return 'bg-red-100 text-red-700';
-            if (type === 'rumahIbadah') return 'bg-teal-100 text-teal-700';
-            if (type === 'pendudukMiskin') return 'bg-rose-100 text-rose-700';
-            if (type === 'verifikasiLapangan') return 'bg-emerald-100 text-emerald-700';
-            if (type === 'aduanWarga') return 'bg-fuchsia-100 text-fuchsia-700';
-            return 'bg-slate-100 text-slate-700';
-        }
-
-        function focusRegistryItem(type, id) {
-            if (type === 'point') {
-                const marker = locationLayerMap[id];
-                if (!marker) return;
-                map.setView(marker.getLatLng(), Math.max(map.getZoom(), 16));
-                marker.openPopup();
-                return;
-            }
-
-            if (type === 'rumahIbadah') {
-                const item = rumahIbadahLayerMap[id];
-                if (!item) return;
-                map.setView(item.marker.getLatLng(), Math.max(map.getZoom(), 16));
-                item.marker.openPopup();
-                return;
-            }
-
-            if (type === 'pendudukMiskin') {
-                const marker = pendudukMiskinLayerMap[id];
-                if (!marker) return;
-                map.setView(marker.getLatLng(), Math.max(map.getZoom(), 16));
-                marker.openPopup();
-                return;
-            }
-
-            if (type === 'roadDamage') {
-                let selectedMarker = null;
-                roadDamageLayer.eachLayer(layer => {
-                    if (layer && layer.roadDamageId === id) {
-                        selectedMarker = layer;
-                    }
-                });
-
-                if (selectedMarker) {
-                    map.setView(selectedMarker.getLatLng(), Math.max(map.getZoom(), 16));
-                    selectedMarker.openPopup();
-                    return;
-                }
-
-                const record = roadDamageRecords.find(item => Number(item.id) === Number(id));
-                if (record && Number.isFinite(Number(record.latitude)) && Number.isFinite(Number(record.longitude))) {
-                    map.setView([Number(record.latitude), Number(record.longitude)], Math.max(map.getZoom(), 16));
-                }
-                return;
-            }
-
-            if (type === 'verifikasiLapangan') {
-                const marker = verifikasiLapanganLayerMap[id];
-                if (!marker) return;
-                map.setView(marker.getLatLng(), Math.max(map.getZoom(), 16));
-                marker.openPopup();
-                return;
-            }
-
-            if (type === 'aduanWarga') {
-                const marker = aduanWargaLayerMap[id];
-                if (!marker) return;
-                map.setView(marker.getLatLng(), Math.max(map.getZoom(), 16));
-                marker.openPopup();
-                return;
-            }
-
-            const layer = featureLayerMap[id];
-            if (!layer) return;
-            if (layer.getBounds) {
-                map.fitBounds(layer.getBounds(), { padding: [40, 40] });
-            }
-            layer.openPopup();
-        }
-
-        function renderInputRegistry() {
-            const ui = getRegistryUi();
-            const listEl = ui.list;
-            const countEl = ui.count;
-            if (!listEl || !countEl) return;
-            const filters = getRegistryFilters();
-            const records = buildRegistryRecords().filter(record => recordMatchesFilters(record, filters));
-
-            countEl.innerText = records.length;
-
-            if (!records.length) {
-                listEl.innerHTML = `
-                    <div class="rounded-xl border border-dashed border-slate-200 bg-slate-50 px-3 py-4 text-sm text-slate-500">
-                        Tidak ada input yang sesuai dengan filter.
-                    </div>
-                `;
-                return;
-            }
-
-            listEl.innerHTML = records.map(record => {
-                const typeLabel = getRegistryTypeLabel(record.type);
-                const typeClass = getRegistryTypeStyle(record.type);
-                const dateLabel = formatInputDate(record.created_at);
-                const measure = record.type === 'point'
-                    ? `Telp: ${record.subtitle}`
-                    : record.type === 'roadDamage'
-                        ? `Deskripsi: ${record.subtitle}`
-                        : record.type === 'rumahIbadah'
-                            ? `PIC: ${record.subtitle}`
-                            : record.type === 'pendudukMiskin'
-                                ? `Anggota: ${record.subtitle}`
-                                : record.type === 'verifikasiLapangan'
-                                    ? `Petugas: ${record.subtitle}`
-                                    : record.type === 'aduanWarga'
-                                        ? `Pelapor: ${record.subtitle}`
-                                        : `Kategori: ${record.subtitle}`;
-                const statusLabel = record.type === 'point'
-                    ? `24 Jam: ${record.status}`
-                    : record.type === 'roadDamage'
-                        ? `Tingkat: ${record.status}`
-                        : record.type === 'rumahIbadah'
-                            ? `Radius: ${record.status}`
-                            : record.type === 'pendudukMiskin'
-                                ? `Rumah Ibadah: ${record.status}`
-                                : record.type === 'verifikasiLapangan'
-                                    ? `Status Verifikasi: ${record.status}`
-                                    : record.type === 'aduanWarga'
-                                        ? `Status Tindak Lanjut: ${record.status}`
-                                        : `Status: ${record.status}`;
-
-                return `
-                    <button type="button" onclick="focusRegistryItem('${record.type}', ${record.id})" class="registry-item w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-left shadow-sm">
-                        <div class="flex items-start justify-between gap-3">
-                            <div class="min-w-0">
-                                <div class="flex flex-wrap items-center gap-2">
-                                    <span class="registry-chip ${typeClass}">${typeLabel}</span>
-                                    <span class="text-[10px] font-bold uppercase tracking-widest text-slate-400">ID ${record.id}</span>
-                                </div>
-                                <h3 class="mt-1 truncate text-sm font-semibold text-slate-800">${record.title}</h3>
-                                <p class="mt-1 text-[11px] text-slate-500">${measure}</p>
-                                <p class="mt-0.5 text-[11px] text-slate-500">${statusLabel}</p>
-                            </div>
-                            <div class="shrink-0 text-right text-[10px] font-bold uppercase tracking-widest text-slate-400">
-                                <div>Tanggal</div>
-                                <div class="mt-1 max-w-[110px] normal-case tracking-normal text-slate-600">${dateLabel}</div>
-                            </div>
-                        </div>
-                    </button>
-                `;
-            }).join('');
-        }
-
-        function toggleInputRegistry(forceState = null) {
-            const ui = getRegistryUi();
-            const panel = ui.panel;
-            if (!panel) return;
-
-            const useDrawer = panel.id === 'registryDrawer';
-            const isHidden = useDrawer ? panel.classList.contains('hidden-drawer') : panel.classList.contains('hidden');
-            const shouldOpen = forceState === null ? isHidden : !!forceState;
-
-            if (useDrawer) {
-                panel.classList.toggle('hidden-drawer', !shouldOpen);
-                const triggerBtn = document.getElementById('toggleRegistryDrawerBtn');
-                if (triggerBtn) {
-                    triggerBtn.classList.toggle('active', shouldOpen);
-                }
-                const leafletTriggerBtn = document.getElementById('leafletRegistryBtn');
-                if (leafletTriggerBtn) {
-                    leafletTriggerBtn.classList.toggle('active', shouldOpen);
-                }
-            } else {
-                panel.classList.toggle('hidden', !shouldOpen);
-            }
-
-            if (shouldOpen) {
-                toggleBantuanDrawer(false);
-                toggleLayerDrawer(false);
-                renderInputRegistry();
-            }
-        }
-
-        function getLayerDrawerUi() {
-            return {
-                panel: document.getElementById('layerDrawer'),
-                closeBtn: document.getElementById('layerDrawerCloseBtn'),
-                toggles: {
-                    spbuBuka24JamLayer: document.getElementById('layerToggle-spbuBuka24JamLayer'),
-                    spbuTidak24JamLayer: document.getElementById('layerToggle-spbuTidak24JamLayer'),
-                    jalanLayerGroup: document.getElementById('layerToggle-jalanLayerGroup'),
-                    polygonLayerGroup: document.getElementById('layerToggle-polygonLayerGroup'),
-                    roadDamageLayer: document.getElementById('layerToggle-roadDamageLayer'),
-                    rumahIbadahLayer: document.getElementById('layerToggle-rumahIbadahLayer'),
-                    pendudukMiskinLayer: document.getElementById('layerToggle-pendudukMiskinLayer'),
-                    verifikasiLapanganLayer: document.getElementById('layerToggle-verifikasiLapanganLayer'),
-                    aduanWargaLayer: document.getElementById('layerToggle-aduanWargaLayer'),
-                    roadNetworkLayer: document.getElementById('layerToggle-roadNetworkLayer')
-                }
-            };
-        }
-
-        function getLayerEntries() {
-            return [
-                { key: 'spbuBuka24JamLayer', layer: spbuBuka24JamLayer, label: 'SPBU Buka 24 Jam' },
-                { key: 'spbuTidak24JamLayer', layer: spbuTidak24JamLayer, label: 'SPBU Tidak Buka 24 Jam' },
-                { key: 'jalanLayerGroup', layer: jalanLayerGroup, label: 'Jalan' },
-                { key: 'polygonLayerGroup', layer: polygonLayerGroup, label: 'Polygon' },
-                { key: 'roadDamageLayer', layer: roadDamageLayer, label: 'Jalan Rusak' },
-                { key: 'rumahIbadahLayer', layer: rumahIbadahLayer, label: 'Rumah Ibadah' },
-                { key: 'pendudukMiskinLayer', layer: pendudukMiskinLayer, label: 'Penduduk Miskin' },
-                { key: 'verifikasiLapanganLayer', layer: verifikasiLapanganLayer, label: 'Verifikasi Lapangan' },
-                { key: 'aduanWargaLayer', layer: aduanWargaLayer, label: 'Aduan Warga' },
-                { key: 'roadNetworkLayer', layer: roadNetworkLayer, label: 'Jalan Eksternal' }
-            ];
-        }
-
-        function setLayerVisible(layer, visible) {
-            if (!layer) return;
-            if (visible) {
-                if (!map.hasLayer(layer)) {
-                    map.addLayer(layer);
-                }
-                return;
-            }
-
-            if (map.hasLayer(layer)) {
-                map.removeLayer(layer);
-            }
-        }
-
-        function syncLayerDrawerState() {
-            const ui = getLayerDrawerUi();
-            const entries = getLayerEntries();
-
-            entries.forEach(entry => {
-                const toggle = ui.toggles[entry.key];
-                if (toggle) {
-                    toggle.checked = map.hasLayer(entry.layer);
-                }
-            });
-        }
-
-        function renderLayerDrawer() {
-            syncLayerDrawerState();
-        }
-
-        function toggleLayerDrawer(forceState = null) {
-            const ui = getLayerDrawerUi();
-            const panel = ui.panel;
-            if (!panel) return;
-
-            const isHidden = panel.classList.contains('hidden-drawer');
-            const shouldOpen = forceState === null ? isHidden : !!forceState;
-
-            panel.classList.toggle('hidden-drawer', !shouldOpen);
-
-            const triggerBtn = document.getElementById('toggleLayerDrawerBtn');
-            if (triggerBtn) {
-                triggerBtn.classList.toggle('active', shouldOpen);
-            }
-
-            if (shouldOpen) {
-                toggleInputRegistry(false);
-                toggleBantuanDrawer(false);
-                renderLayerDrawer();
-            }
-        }
-
-        function bindLayerDrawerEvents() {
-            const ui = getLayerDrawerUi();
-            const entries = getLayerEntries();
-
-            entries.forEach(entry => {
-                const toggle = ui.toggles[entry.key];
-                if (!toggle || layerDrawerControls.includes(entry.key)) return;
-
-                toggle.addEventListener('change', () => setLayerVisible(entry.layer, toggle.checked));
-                layerDrawerControls.push(entry.key);
-            });
-
-            if (ui.closeBtn && !ui.closeBtn.dataset.bound) {
-                ui.closeBtn.addEventListener('click', () => toggleLayerDrawer(false));
-                ui.closeBtn.dataset.bound = '1';
-            }
-        }
-
-        function normalizeAidStatus(status) {
-            const value = String(status || '').toLowerCase().trim();
-            if (value === 'proses' || value === 'sudah') return value;
-            return 'belum';
-        }
-
-        function getAidStatusBadge(status) {
-            const normalized = normalizeAidStatus(status);
-            if (normalized === 'sudah') {
-                return { label: 'Sudah Dibantu', className: 'bg-emerald-100 text-emerald-700' };
-            }
-            if (normalized === 'proses') {
-                return { label: 'Sedang Diproses', className: 'bg-amber-100 text-amber-700' };
-            }
-            return { label: 'Belum Dibantu', className: 'bg-rose-100 text-rose-700' };
-        }
-
-        function getBantuanUi() {
-            return {
-                panel: document.getElementById('bantuanDrawer'),
-                count: document.getElementById('bantuanCount'),
-                list: document.getElementById('bantuanList'),
-                rumahFilter: document.getElementById('bantuanRumahFilter'),
-                statusFilter: document.getElementById('bantuanStatusFilter'),
-                search: document.getElementById('bantuanSearchQuery')
-            };
-        }
-
-        function getBantuanFilters() {
-            const ui = getBantuanUi();
-            return {
-                rumahId: ui.rumahFilter && ui.rumahFilter.value ? Number(ui.rumahFilter.value) : 0,
-                status: ui.statusFilter && ui.statusFilter.value ? ui.statusFilter.value : 'all',
-                search: String(ui.search && ui.search.value ? ui.search.value : '').toLowerCase().trim()
-            };
-        }
-
-        function openBantuanForRumah(rumahIbadahId) {
-            selectedBantuanRumahIbadahId = Number(rumahIbadahId) || null;
-            toggleBantuanDrawer(true);
-        }
-
-        function toggleBantuanDrawer(forceState = null) {
-            const ui = getBantuanUi();
-            const panel = ui.panel;
-            if (!panel) return;
-
-            const isHidden = panel.classList.contains('hidden-drawer');
-            const shouldOpen = forceState === null ? isHidden : !!forceState;
-
-            panel.classList.toggle('hidden-drawer', !shouldOpen);
-
-            const triggerBtn = document.getElementById('toggleBantuanDrawerBtn');
-            if (triggerBtn) {
-                triggerBtn.classList.toggle('active', shouldOpen);
-            }
-
-            const leafletTriggerBtn = document.getElementById('leafletBantuanBtn');
-            if (leafletTriggerBtn) {
-                leafletTriggerBtn.classList.toggle('active', shouldOpen);
-            }
-
-            if (shouldOpen) {
-                toggleInputRegistry(false);
-                toggleLayerDrawer(false);
-                renderBantuanDrawer();
-            }
-        }
-
-        function renderBantuanDrawer() {
-            const ui = getBantuanUi();
-            if (!ui.panel || !ui.list || !ui.count || !ui.rumahFilter || !ui.statusFilter || !ui.search) return;
-
-            const existingSummary = ui.panel.querySelector('[data-bantuan-summary="1"]');
-            if (existingSummary) {
-                existingSummary.remove();
-            }
-
-            const previousValue = ui.rumahFilter.value;
-            const options = ['<option value="">Pilih rumah ibadah...</option>'].concat(
-                rumahIbadahRecords.map(record => `<option value="${Number(record.id)}">${record.nama} (radius ${Number(record.radius_m || 0).toLocaleString('id-ID')} m)</option>`)
-            );
-            ui.rumahFilter.innerHTML = options.join('');
-
-            const defaultValue = selectedBantuanRumahIbadahId != null ? String(selectedBantuanRumahIbadahId) : previousValue;
-            if (defaultValue && rumahIbadahRecords.some(item => String(Number(item.id)) === String(defaultValue))) {
-                ui.rumahFilter.value = String(defaultValue);
-            }
-
-            const filters = getBantuanFilters();
-            selectedBantuanRumahIbadahId = filters.rumahId || null;
-
-            if (!filters.rumahId) {
-                ui.count.innerText = '0';
-                ui.list.innerHTML = `
-                    <div class="rounded-xl border border-dashed border-slate-200 bg-slate-50 px-3 py-4 text-sm text-slate-500">
-                        Pilih rumah ibadah untuk menampilkan daftar penerima bantuan pada wilayahnya.
-                    </div>
-                `;
-                return;
-            }
-
-            const rumahRecord = rumahIbadahRecords.find(item => Number(item.id) === Number(filters.rumahId));
-            if (!rumahRecord) {
-                ui.count.innerText = '0';
-                ui.list.innerHTML = `
-                    <div class="rounded-xl border border-dashed border-slate-200 bg-slate-50 px-3 py-4 text-sm text-slate-500">
-                        Data rumah ibadah tidak ditemukan.
-                    </div>
-                `;
-                return;
-            }
-
-            const residents = getPoorResidentsInRumahRadius(rumahRecord).filter(item => {
-                const status = normalizeAidStatus(item.bantuan_status);
-                if (filters.status !== 'all' && status !== filters.status) return false;
-                if (filters.search && !(item.nama_ketua_kk || '').toLowerCase().includes(filters.search)) return false;
-                return true;
-            });
-
-            const statusCounts = residents.reduce((accumulator, item) => {
-                const status = normalizeAidStatus(item.bantuan_status);
-                accumulator[status] = (accumulator[status] || 0) + 1;
-                return accumulator;
-            }, { belum: 0, proses: 0, sudah: 0 });
-
-            ui.count.innerText = String(residents.length);
-
-            const summaryWrapper = document.createElement('div');
-            summaryWrapper.setAttribute('data-bantuan-summary', '1');
-            summaryWrapper.className = 'mt-3 grid grid-cols-3 gap-2 text-[11px] text-slate-600';
-            summaryWrapper.innerHTML = `
-                <div class="rounded-lg bg-rose-50 px-2 py-2 text-center">
-                    <div class="font-black text-rose-700">${statusCounts.belum || 0}</div>
-                    <div>Belum</div>
-                </div>
-                <div class="rounded-lg bg-amber-50 px-2 py-2 text-center">
-                    <div class="font-black text-amber-700">${statusCounts.proses || 0}</div>
-                    <div>Diproses</div>
-                </div>
-                <div class="rounded-lg bg-emerald-50 px-2 py-2 text-center">
-                    <div class="font-black text-emerald-700">${statusCounts.sudah || 0}</div>
-                    <div>Sudah</div>
-                </div>
-            `;
-
-            ui.list.parentNode.insertBefore(summaryWrapper, ui.list);
-
-            if (!residents.length) {
-                ui.list.innerHTML = `
-                    <div class="rounded-xl border border-dashed border-slate-200 bg-slate-50 px-3 py-4 text-sm text-slate-500">
-                        Tidak ada data penduduk miskin yang sesuai filter untuk wilayah ${rumahRecord.nama}.
-                    </div>
-                `;
-                return;
-            }
-
-            ui.list.innerHTML = residents.map(item => {
-                const badge = getAidStatusBadge(item.bantuan_status);
-                const jarak = formatDistanceMeters(Number(item._distanceToRumah));
-                const created = formatInputDate(item.created_at);
-                const updated = item.bantuan_updated_at ? formatInputDate(item.bantuan_updated_at) : '-';
-                const noteValue = String(item.bantuan_catatan || '').replace(/"/g, '&quot;');
-
-                return `
-                    <div class="rounded-xl border border-slate-200 bg-white p-3 shadow-sm">
-                        <div class="flex items-start justify-between gap-2">
-                            <div>
-                                <h3 class="text-sm font-bold text-slate-800">${item.nama_ketua_kk}</h3>
-                                <p class="mt-0.5 text-[11px] text-slate-500">${item.jumlah_anggota} anggota • ${jarak} dari ${rumahRecord.nama}</p>
-                            </div>
-                            <span class="registry-chip ${badge.className}">${badge.label}</span>
-                        </div>
-
-                        <div class="mt-2 grid grid-cols-2 gap-x-2 gap-y-1 text-[11px] text-slate-600">
-                            <div>ID: ${item.id}</div>
-                            <div>Koordinat: ${Number(item.latitude).toFixed(5)}, ${Number(item.longitude).toFixed(5)}</div>
-                            <div>Dibuat: ${created}</div>
-                            <div>Update Bantuan: ${updated}</div>
-                        </div>
-
-                        <div class="mt-3 grid gap-2">
-                            <label class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Status Bantuan</label>
-                            <select id="aidStatus-${item.id}" class="w-full rounded-lg border border-slate-300 bg-white p-2 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
-                                <option value="belum" ${normalizeAidStatus(item.bantuan_status) === 'belum' ? 'selected' : ''}>Belum Dibantu</option>
-                                <option value="proses" ${normalizeAidStatus(item.bantuan_status) === 'proses' ? 'selected' : ''}>Sedang Diproses</option>
-                                <option value="sudah" ${normalizeAidStatus(item.bantuan_status) === 'sudah' ? 'selected' : ''}>Sudah Dibantu</option>
-                            </select>
-                            <label class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Catatan Bantuan</label>
-                            <textarea id="aidNote-${item.id}" rows="2" placeholder="Contoh: paket sembako tahap 1" class="w-full rounded-lg border border-slate-300 bg-white p-2 text-sm outline-none focus:ring-2 focus:ring-indigo-500">${noteValue}</textarea>
-                        </div>
-
-                        <div class="mt-3 grid grid-cols-2 gap-2 border-t pt-3">
-                            <button onclick="saveAidStatus(${item.id})" class="rounded-lg bg-indigo-600 px-3 py-2 text-xs font-bold text-white hover:bg-indigo-700">Simpan Bantuan</button>
-                            <button onclick="focusRegistryItem('pendudukMiskin', ${item.id})" class="rounded-lg bg-slate-100 px-3 py-2 text-xs font-bold text-slate-700 hover:bg-slate-200">Lihat di Peta</button>
-                        </div>
-                    </div>
-                `;
-            }).join('');
-        }
-
-        function saveAidStatus(id) {
-            const statusEl = document.getElementById(`aidStatus-${id}`);
-            const noteEl = document.getElementById(`aidNote-${id}`);
-            if (!statusEl || !noteEl) {
-                showMessage('Komponen update bantuan tidak ditemukan', 'bg-red-600 text-white');
-                return;
-            }
-
-            const formData = new FormData();
-            formData.append('id', String(id));
-            formData.append('bantuan_status', normalizeAidStatus(statusEl.value));
-            formData.append('bantuan_catatan', String(noteEl.value || '').trim());
-
-            fetch('update_bantuan_penduduk.php', { method: 'POST', body: formData })
-                .then(res => parseJsonResponse(res, 'update_bantuan_penduduk.php'))
-                .then(data => {
-                    if (data.status !== 'success') {
-                        throw new Error(data.message || 'Gagal memperbarui bantuan');
-                    }
-
-                    const record = pendudukMiskinRecords.find(item => Number(item.id) === Number(id));
-                    if (record) {
-                        record.bantuan_status = normalizeAidStatus(statusEl.value);
-                        record.bantuan_catatan = String(noteEl.value || '').trim();
-                        record.bantuan_updated_at = data.bantuan_updated_at || new Date().toISOString();
-                    }
-
-                    refreshRumahIbadahPopups();
-                    renderBantuanDrawer();
-                    loadPendudukMiskin(true);
-                    showMessage('✅ Status bantuan berhasil diperbarui', 'bg-green-600 text-white');
-                })
-                .catch(err => showMessage(err.message || 'Gagal memperbarui bantuan', 'bg-red-600 text-white'));
-        }
-
-        function getFeatureOptions(type) {
-            return FEATURE_STATUS_OPTIONS[type] || [];
-        }
-
-        function setSpatialType(type) {
-            document.getElementById('featureType').value = type;
-            const statusSelect = document.getElementById('featureStatus');
-            const drawStatus = document.getElementById('drawStatus');
-
-            drawStatus.innerHTML = '';
-            getFeatureOptions(type).forEach(option => {
-                const el = document.createElement('option');
-                el.value = option.value;
-                el.textContent = option.label;
-                drawStatus.appendChild(el);
-            });
-
-            if (!drawStatus.value) drawStatus.selectedIndex = 0;
-
-            statusSelect.innerHTML = '';
-            Array.from(drawStatus.options).forEach(option => {
-                statusSelect.appendChild(option.cloneNode(true));
-            });
-
-            statusSelect.value = drawStatus.value;
-            currentDrawMode = type;
-            updateDrawControl(type);
-            updateFeatureMeasurePreview();
-        }
-
-        function setDataMode(mode) {
-            appMode = mode;
-            const statusWrap = document.getElementById('statusControlWrap');
-            const measureWrap = document.getElementById('measureControlWrap');
-            const runActionBtn = document.getElementById('runActionBtn');
-            const clearDraftBtn = document.getElementById('clearDraftBtn');
-            const spatialControls = document.getElementById('spatialControls');
-            const modeButtons = {
-                view: document.getElementById('modeViewBtn'),
-                point: document.getElementById('modePointBtn'),
-                polyline: document.getElementById('modePolylineBtn'),
-                polygon: document.getElementById('modePolygonBtn'),
-                rumahIbadah: document.getElementById('modeRumahIbadahBtn'),
-                pendudukMiskin: document.getElementById('modePendudukMiskinBtn'),
-                choropleth: document.getElementById('modeChoroplethBtn'),
-                roadDamage: document.getElementById('leafletRoadDamageBtn') || document.getElementById('modeRoadDamageBtn'),
-                verifikasiLapangan: document.getElementById('leafletVerifikasiBtn') || document.getElementById('modeVerifikasiBtn'),
-                aduanWarga: document.getElementById('leafletAduanWargaBtn') || document.getElementById('modeAduanWargaBtn'),
-                miniPoint: document.getElementById('miniModePointBtn'),
-                miniPolyline: document.getElementById('miniModePolylineBtn'),
-                miniPolygon: document.getElementById('miniModePolygonBtn'),
-                miniRumahIbadah: document.getElementById('miniModeRumahIbadahBtn'),
-                miniPendudukMiskin: document.getElementById('miniModePendudukMiskinBtn'),
-                miniVerifikasiLapangan: document.getElementById('miniModeVerifikasiBtn'),
-                miniAduanWarga: document.getElementById('miniModeAduanWargaBtn')
-            };
-
-            Object.values(modeButtons).forEach(button => {
-                if (button) button.classList.remove('active');
-            });
-            if (mode === 'point') {
-                if (modeButtons.point) modeButtons.point.classList.add('active');
-                if (modeButtons.miniPoint) modeButtons.miniPoint.classList.add('active');
-            }
-            if (mode === 'polyline') {
-                if (modeButtons.polyline) modeButtons.polyline.classList.add('active');
-                if (modeButtons.miniPolyline) modeButtons.miniPolyline.classList.add('active');
-            }
-            if (mode === 'polygon') {
-                if (modeButtons.polygon) modeButtons.polygon.classList.add('active');
-                if (modeButtons.miniPolygon) modeButtons.miniPolygon.classList.add('active');
-            }
-            if (mode === 'rumahIbadah') {
-                if (modeButtons.rumahIbadah) modeButtons.rumahIbadah.classList.add('active');
-                if (modeButtons.miniRumahIbadah) modeButtons.miniRumahIbadah.classList.add('active');
-            }
-            if (mode === 'pendudukMiskin') {
-                if (modeButtons.pendudukMiskin) modeButtons.pendudukMiskin.classList.add('active');
-                if (modeButtons.miniPendudukMiskin) modeButtons.miniPendudukMiskin.classList.add('active');
-            }
-            if (mode === 'verifikasiLapangan') {
-                if (modeButtons.verifikasiLapangan) modeButtons.verifikasiLapangan.classList.add('active');
-                if (modeButtons.miniVerifikasiLapangan) modeButtons.miniVerifikasiLapangan.classList.add('active');
-            }
-            if (mode === 'aduanWarga') {
-                if (modeButtons.aduanWarga) modeButtons.aduanWarga.classList.add('active');
-                if (modeButtons.miniAduanWarga) modeButtons.miniAduanWarga.classList.add('active');
-            }
-            if (modeButtons[mode]) {
-                modeButtons[mode].classList.add('active');
-            }
-
-            toggleChoroplethMode(mode === 'choropleth');
-
-            if (mode === 'view') {
-                spatialControls.classList.add('hidden');
-                runActionBtn.innerText = 'Mode Lihat';
-                runActionBtn.disabled = true;
-                clearDraftBtn.disabled = true;
-                updateDrawControl(null);
-                document.getElementById('modeMeasure').value = '';
-                return;
-            }
-
-            if (mode === 'choropleth') {
-                spatialControls.classList.add('hidden');
-                runActionBtn.innerText = 'Choropleth Aktif';
-                runActionBtn.disabled = true;
-                clearDraftBtn.disabled = true;
-                updateDrawControl(null);
-                document.getElementById('modeMeasure').value = '';
-                return;
-            }
-
-            if (mode === 'roadDamage' || mode === 'verifikasiLapangan' || mode === 'aduanWarga') {
-                spatialControls.classList.add('hidden');
-                runActionBtn.innerText = 'Klik Peta';
-                runActionBtn.disabled = true;
-                clearDraftBtn.disabled = true;
-                updateDrawControl(null);
-                document.getElementById('modeMeasure').value = '';
-                if (mode === 'roadDamage') loadRoadDamage(true);
-                if (mode === 'verifikasiLapangan') loadVerifikasiLapangan(true);
-                if (mode === 'aduanWarga') loadAduanWarga(true);
-                return;
-            }
-
-            if (mode === 'rumahIbadah' || mode === 'pendudukMiskin') {
-                spatialControls.classList.add('hidden');
-                runActionBtn.innerText = 'Klik Peta';
-                runActionBtn.disabled = true;
-                clearDraftBtn.disabled = true;
-                updateDrawControl(null);
-                document.getElementById('modeMeasure').value = '';
-                return;
-            }
-
-            runActionBtn.disabled = false;
-            clearDraftBtn.disabled = false;
-
-            if (mode === 'point') {
-                spatialControls.classList.add('hidden');
-                runActionBtn.innerText = 'Klik Peta';
-                clearDraftBtn.disabled = true;
-                updateDrawControl(null);
-                document.getElementById('modeMeasure').value = '';
-                return;
-            }
-
-            spatialControls.classList.remove('hidden');
-            runActionBtn.innerText = mode === 'polyline' ? 'Gambar Jalan' : 'Gambar Polygon';
-            setSpatialType(mode);
-        }
-
-        function setEditModeEnabled(enabled) {
-            isEditModeEnabled = !!enabled;
-            const toggleBtn = document.getElementById('toggleEditModeBtn');
-            const editButtonsWrap = document.getElementById('editModeButtons');
-
-            if (!toggleBtn || !editButtonsWrap) return;
-
-            editButtonsWrap.classList.toggle('hidden', !isEditModeEnabled);
-            toggleBtn.classList.toggle('active', isEditModeEnabled);
-            toggleBtn.title = isEditModeEnabled ? 'Nonaktifkan mode edit' : 'Aktifkan mode edit';
-
-            if (!isEditModeEnabled) {
-                setDataMode('view');
-                return;
-            }
-        }
-
-        function openRoadDamageModal(lat, lng) {
-            pendingRoadDamageCoords = { lat, lng };
-            document.getElementById('roadDamageCoords').innerText = `${lat.toFixed(5)}, ${lng.toFixed(5)}`;
-            document.getElementById('roadDamageType').value = '';
-            document.getElementById('roadDamageSeverity').value = 'sedang';
-            document.getElementById('roadDamageDesc').value = '';
-            document.getElementById('roadDamageImage').value = '';
-            document.getElementById('imagePreview').classList.add('hidden');
-            const modal = document.getElementById('roadDamageModal');
-            modal.classList.remove('hidden');
-            modal.classList.add('flex');
-            suppressAutoReload = true;
-        }
-
-        function closeRoadDamageModal() {
-            const modal = document.getElementById('roadDamageModal');
-            modal.classList.add('hidden');
-            modal.classList.remove('flex');
-            pendingRoadDamageCoords = null;
-            suppressAutoReload = !!document.querySelector('[id^="edit-mode-"]:not(.hidden)') || !!editingFeatureId;
-        }
-
-        function saveRoadDamage() {
-            if (!pendingRoadDamageCoords) {
-                showMessage('Koordinat tidak ditemukan', 'bg-red-600 text-white');
-                return;
-            }
-
-            const jenis = document.getElementById('roadDamageType').value;
-            if (!jenis) {
-                showMessage('Pilih jenis kerusakan terlebih dahulu', 'bg-red-600 text-white');
-                return;
-            }
-
-            const severity = document.getElementById('roadDamageSeverity').value;
-            const deskripsi = document.getElementById('roadDamageDesc').value;
-            const fileInput = document.getElementById('roadDamageImage');
-
-            const formData = new FormData();
-            formData.append('latitude', pendingRoadDamageCoords.lat);
-            formData.append('longitude', pendingRoadDamageCoords.lng);
-            formData.append('jenis_kerusakan', jenis);
-            formData.append('severity', severity);
-            formData.append('deskripsi', deskripsi);
-
-            if (fileInput.files && fileInput.files[0]) {
-                formData.append('gambar', fileInput.files[0]);
-            }
-
-            fetch('fitur_jalan_parsel/save_jalan_rusak.php', { method: 'POST', body: formData })
-                .then(res => parseJsonResponse(res, 'fitur_jalan_parsel/save_jalan_rusak.php'))
-                .then(data => {
-                    if (data.status === 'success') {
-                        showMessage('✅ Laporan jalan rusak berhasil disimpan', 'bg-green-600 text-white');
-                        closeRoadDamageModal();
-                        loadRoadDamage(true);
-                    } else {
-                        throw new Error(data.message || 'Gagal menyimpan laporan');
-                    }
-                })
-                .catch(err => showMessage(err.message || 'Gagal menyimpan laporan', 'bg-red-600 text-white'));
-        }
-
-        function createRoadDamageIcon(severity) {
-            const colorMap = {
-                'ringan': '#fbbf24',
-                'sedang': '#f97316',
-                'berat': '#dc2626'
-            };
-            const color = colorMap[severity] || '#f97316';
-
-            return L.divIcon({
-                className: "custom-marker",
-                html: `<svg width="32" height="40" viewBox="0 0 32 40" fill="${color}" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M16 0C8.27 0 2 6.27 2 14c0 8 14 26 14 26s14-18 14-26c0-7.73-6.27-14-14-14z"/>
-                        <circle cx="16" cy="14" r="5" fill="white"/>
-                        <text x="16" y="16" text-anchor="middle" dy=".3em" font-size="10" font-weight="bold" fill="${color}">!</text>
-                       </svg>`,
-                iconSize: [32, 40],
-                iconAnchor: [16, 40],
-                popupAnchor: [0, -40]
-            });
-        }
-
-        function getRoadDamagePopup(record) {
-            const imageHtml = record.gambar ? `<img src="${record.gambar}" alt="Foto jalan rusak" class="mt-2 w-full rounded-lg max-h-48 object-cover">` : '';
+    <!-- Main Section -->
+    <main class="max-w-6xl w-full mx-auto px-6 py-12 flex-1 flex flex-col gap-10">
+        
+        <!-- Section Title -->
+        <div>
+            <h2 class="text-lg font-bold text-slate-500 uppercase tracking-widest text-center">Pilih Modul GIS</h2>
+            <div class="h-1 w-12 bg-indigo-600 mx-auto mt-2 rounded-full"></div>
+        </div>
+
+        <!-- Dashboard Grid -->
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
             
-            return `
-                <div class="w-full p-3">
-                    <h4 class="font-bold text-slate-800">Laporan Jalan Rusak</h4>
-                    <p class="mt-1 text-sm text-slate-600"><strong>Jenis:</strong> ${record.jenis_kerusakan}</p>
-                    <p class="text-sm text-slate-600"><strong>Tingkat:</strong> 
-                        <span class="px-2 py-1 rounded text-xs font-bold ${
-                            record.severity === 'ringan' ? 'bg-yellow-100 text-yellow-700' :
-                            record.severity === 'sedang' ? 'bg-orange-100 text-orange-700' :
-                            'bg-red-100 text-red-700'
-                        }">${record.severity}</span>
+            <!-- Module 1: Parsil Tanah -->
+            <div class="glass-card rounded-3xl p-7 flex flex-col justify-between shadow-md transition-all duration-300 transform hover:-translate-y-1.5 glowing-shadow">
+                <div>
+                    <div class="w-14 h-14 rounded-2xl bg-indigo-50 border border-indigo-100 text-indigo-600 flex items-center justify-center shadow-inner">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+                    </div>
+                    <h3 class="text-xl font-bold mt-5 text-slate-800">Parsil Tanah (Land Parcel)</h3>
+                    <p class="text-sm text-slate-500 mt-2 leading-relaxed">
+                        Aplikasi pengukuran dan manajemen batas kepemilikan tanah. Mendukung visualisasi poligon, kalkulasi otomatis luas bidang, pencarian kepemilikan, dan pemetaan status sertifikat tanah (SHM, HGB, HGU, HP).
                     </p>
-                    ${record.deskripsi ? `<p class="mt-1 text-sm text-slate-600"><strong>Deskripsi:</strong> ${record.deskripsi}</p>` : ''}
-                    <p class="mt-1 text-xs text-slate-500">📍 ${record.latitude.toFixed(5)}, ${record.longitude.toFixed(5)}</p>
-                    ${imageHtml}
-                    <div class="mt-3 flex gap-2 border-t pt-2">
-                        <button onclick="deleteRoadDamage(${record.id})" class="flex-1 rounded bg-red-50 px-2 py-1 text-xs font-bold text-red-700 hover:bg-red-100">Hapus</button>
-                    </div>
                 </div>
-            `;
-        }
+                
+                <div class="mt-8 border-t border-slate-100/50 pt-5 flex items-center justify-between">
+                    <div class="flex items-center gap-1.5 bg-indigo-50 text-indigo-700 px-3 py-1 rounded-xl text-xs font-semibold">
+                        <span>Tercatat:</span>
+                        <strong id="statParsel">...</strong>
+                    </div>
+                    <a href="fitur_parsil_tanah/index.html" class="flex items-center gap-1 px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl text-xs font-bold shadow-md shadow-indigo-600/10 hover:shadow-indigo-600/25 transition">
+                        <span>Buka Peta</span>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+                    </a>
+                </div>
+            </div>
 
-        function loadRoadDamage(force = false) {
-            if (!force && (document.hidden || suppressAutoReload)) return;
+            <!-- Module 2: SPBU -->
+            <div class="glass-card rounded-3xl p-7 flex flex-col justify-between shadow-md transition-all duration-300 transform hover:-translate-y-1.5 glowing-shadow">
+                <div>
+                    <div class="w-14 h-14 rounded-2xl bg-emerald-50 border border-emerald-100 text-emerald-600 flex items-center justify-center shadow-inner">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2C8.13 2 5 5.13 5 9c0 5 7 13 7 13s7-8 7-13c0-3.87-3.13-7-7-7z"/><circle cx="12" cy="9" r="2.5"/></svg>
+                    </div>
+                    <h3 class="text-xl font-bold mt-5 text-slate-800">Lokasi SPBU</h3>
+                    <p class="text-sm text-slate-500 mt-2 leading-relaxed">
+                        Modul pemetaan stasiun bahan bakar umum di Pontianak. Menampilkan titik koordinat persis SPBU, kode nomor stasiun, status operasional (buka 24 jam atau jam operasional normal), dan fitur edit lokasi seret marker (drag-and-drop).
+                    </p>
+                </div>
+                
+                <div class="mt-8 border-t border-slate-100/50 pt-5 flex items-center justify-between">
+                    <div class="flex items-center gap-1.5 bg-emerald-50 text-emerald-700 px-3 py-1 rounded-xl text-xs font-semibold">
+                        <span>Tercatat:</span>
+                        <strong id="statSpbu">...</strong>
+                    </div>
+                    <a href="fitur_spbu/index.html" class="flex items-center gap-1 px-5 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl text-xs font-bold shadow-md shadow-emerald-600/10 hover:shadow-emerald-600/25 transition">
+                        <span>Buka Peta</span>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+                    </a>
+                </div>
+            </div>
 
-            fetch('fitur_jalan_parsel/get_jalan_rusak.php')
-                .then(res => {
-                    if (!res.ok) throw new Error('HTTP Error: ' + res.status);
-                    return res.text();
-                })
-                .then(text => {
-                    const data = JSON.parse(text);
-                    if (!Array.isArray(data)) {
-                        throw new Error('Format data tidak valid');
-                    }
+            <!-- Module 3: Jalan & Jalan Rusak -->
+            <div class="glass-card rounded-3xl p-7 flex flex-col justify-between shadow-md transition-all duration-300 transform hover:-translate-y-1.5 glowing-shadow">
+                <div>
+                    <div class="w-14 h-14 rounded-2xl bg-rose-50 border border-rose-100 text-rose-600 flex items-center justify-center shadow-inner">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 18l6-6 4 4 6-8"/></svg>
+                    </div>
+                    <h3 class="text-xl font-bold mt-5 text-slate-800">Infrastruktur Jalan</h3>
+                    <p class="text-sm text-slate-500 mt-2 leading-relaxed">
+                        Pemetaan jaringan jalan kota beserta portal aduan kerusakan jalan oleh masyarakat. Mendukung penggambaran ruas jalan, kalkulasi panjang (meter/km), tingkat keparahan (ringan, sedang, berat), deskripsi, dan upload foto kondisi jalan secara dinamis.
+                    </p>
+                </div>
+                
+                <div class="mt-8 border-t border-slate-100/50 pt-5 flex items-center justify-between">
+                    <div class="flex items-center gap-2">
+                        <div class="flex items-center gap-1.5 bg-rose-50 text-rose-700 px-3 py-1 rounded-xl text-xs font-semibold">
+                            <span>Jalan:</span>
+                            <strong id="statJalan">...</strong>
+                        </div>
+                        <div class="flex items-center gap-1.5 bg-red-50 text-red-700 px-3 py-1 rounded-xl text-xs font-semibold">
+                            <span>Rusak:</span>
+                            <strong id="statJalanRusak">...</strong>
+                        </div>
+                    </div>
+                    <a href="fitur_jalan/index.html" class="flex items-center gap-1 px-5 py-2.5 bg-rose-600 hover:bg-rose-700 text-white rounded-xl text-xs font-bold shadow-md shadow-rose-600/10 hover:shadow-rose-600/25 transition">
+                        <span>Buka Peta</span>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+                    </a>
+                </div>
+            </div>
 
-                    roadDamageRecords = data;
-                    roadDamageLayer.clearLayers();
+            <!-- Module 4: Bantuan & Verifikasi -->
+            <div class="glass-card rounded-3xl p-7 flex flex-col justify-between shadow-md transition-all duration-300 transform hover:-translate-y-1.5 glowing-shadow">
+                <div>
+                    <div class="w-14 h-14 rounded-2xl bg-indigo-50 border border-indigo-100 text-indigo-700 flex items-center justify-center shadow-inner">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 21c4.97 0 9-2.24 9-5V8l-9-5-9 5v8c0 2.76 4.03 5 9 5Z"/></svg>
+                    </div>
+                    <h3 class="text-xl font-bold mt-5 text-slate-800">Manajemen Bantuan Sosial</h3>
+                    <p class="text-sm text-slate-500 mt-2 leading-relaxed">
+                        Sistem manajemen bantuan kesejahteraan warga. Menghitung sebaran tempat ibadah sebagai sentra bantuan, mencocokkan secara spasial keluarga miskin terdekat dalam radius pelayanan, melacak status bantuan, dan mendokumentasikan verifikasi petugas lapangan.
+                    </p>
+                </div>
+                
+                <div class="mt-8 border-t border-slate-100/50 pt-5 flex items-center justify-between">
+                    <div class="flex items-center gap-2">
+                        <div class="flex items-center gap-1.5 bg-indigo-50 text-indigo-700 px-3 py-1 rounded-xl text-xs font-semibold">
+                            <span>Ibadah:</span>
+                            <strong id="statIbadah">...</strong>
+                        </div>
+                        <div class="flex items-center gap-1.5 bg-emerald-50 text-emerald-700 px-3 py-1 rounded-xl text-xs font-semibold">
+                            <span>Warga:</span>
+                            <strong id="statMiskin">...</strong>
+                        </div>
+                    </div>
+                    <a href="fitur_bantuan/index.html" class="flex items-center gap-1 px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl text-xs font-bold shadow-md shadow-indigo-600/10 hover:shadow-indigo-600/25 transition">
+                        <span>Buka Peta</span>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+                    </a>
+                </div>
+            </div>
 
-                    data.forEach(record => {
-                        const marker = L.marker([record.latitude, record.longitude], {
-                            icon: createRoadDamageIcon(record.severity)
-                        }).addTo(roadDamageLayer);
+        </div>
+    </main>
 
-                        marker.roadDamageId = Number(record.id);
-
-                        marker.bindPopup(getRoadDamagePopup(record));
-                    });
-
-                    renderInputRegistry();
-                })
-                .catch(err => {
-                    console.error('Gagal memuat data jalan rusak:', err);
-                });
-        }
-
-        function getRoadNetworkColor(status) {
-            const key = String(status || '').toLowerCase().trim();
-            if (key.includes('nasional')) return '#0f766e';
-            if (key.includes('propinsi') || key.includes('provinsi')) return '#1d4ed8';
-            if (key.includes('kota')) return '#dc2626';
-            if (key.includes('kabupaten')) return '#b45309';
-            return '#475569';
-        }
-
-        function sanitizeRoadCoordinates(coords) {
-            if (!Array.isArray(coords)) {
-                return [];
-            }
-
-            const result = [];
-            for (const coord of coords) {
-                const x = Number(coord && coord[0]);
-                const y = Number(coord && coord[1]);
-
-                if (!Number.isFinite(x) || !Number.isFinite(y)) {
-                    continue;
-                }
-
-                // Data jalan berada pada UTM 49S (easting normal sekitar 100k-900k).
-                if (x < 100000 || x > 900000 || Math.abs(y) > 11000000) {
-                    continue;
-                }
-
-                result.push([x, y]);
-            }
-
-            return result;
-        }
-
-        function sanitizeRoadFeature(feature) {
-            if (!feature || !feature.geometry) {
-                return null;
-            }
-
-            const geometry = feature.geometry;
-            const type = geometry.type;
-
-            if (type === 'LineString') {
-                const cleaned = sanitizeRoadCoordinates(geometry.coordinates);
-                if (cleaned.length < 2) {
-                    return null;
-                }
-
-                return {
-                    ...feature,
-                    geometry: {
-                        ...geometry,
-                        coordinates: cleaned
-                    }
-                };
-            }
-
-            if (type === 'MultiLineString') {
-                const cleanedLines = (Array.isArray(geometry.coordinates) ? geometry.coordinates : [])
-                    .map(line => sanitizeRoadCoordinates(line))
-                    .filter(line => line.length >= 2);
-
-                if (!cleanedLines.length) {
-                    return null;
-                }
-
-                return {
-                    ...feature,
-                    geometry: {
-                        ...geometry,
-                        coordinates: cleanedLines
-                    }
-                };
-            }
-
-            return null;
-        }
-
-        function sanitizeRoadGeoJson(data) {
-            return {
-                ...data,
-                features: (Array.isArray(data.features) ? data.features : [])
-                    .map(sanitizeRoadFeature)
-                    .filter(Boolean)
-            };
-        }
-
-        function convertExportRoadCoord(coords) {
-            const x = Number(coords && coords[0]);
-            const y = Number(coords && coords[1]);
-
-            if (!Number.isFinite(x) || !Number.isFinite(y)) {
-                return L.latLng(0, 0);
-            }
-
-            // If coordinates are already lon/lat, use them directly.
-            if (Math.abs(x) <= 180 && Math.abs(y) <= 90) {
-                return L.latLng(y, x);
-            }
-
-            if (typeof proj4 !== 'function') {
-                return L.latLng(0, 0);
-            }
-
-            // Export data uses UTM 49S with false northing removed (small +/- values).
-            const adjustedNorthing = Math.abs(y) < 1000000 ? y + 10000000 : y;
-            const projected = proj4('EPSG:32749', 'EPSG:4326', [x, adjustedNorthing]);
-            return L.latLng(projected[1], projected[0]);
-        }
-
-        async function loadExternalRoadNetwork(force = false) {
-            if (roadNetworkLoaded && !force) {
-                return;
-            }
-
-            if (typeof proj4 === 'function' && !proj4.defs('EPSG:32749')) {
-                proj4.defs('EPSG:32749', '+proj=utm +zone=49 +south +datum=WGS84 +units=m +no_defs +type=crs');
-            }
-
-            if (force) {
-                roadNetworkLayer.clearLayers();
-                roadNetworkLoaded = false;
-            }
+    <!-- Footer -->
+    <footer class="w-full bg-slate-900 text-slate-400 py-8 text-center text-xs mt-12 border-t border-slate-800">
+        <p>&copy; 2026 Program Studi Informatika Untan. Hak Cipta Dilindungi.</p>
+        <p class="mt-1 text-slate-600">Dikembangkan menggunakan Leaflet, Turf.js, Tailwind CSS, dan PHP-MySQL.</p>
+    </footer>
 
+    <!-- Stats Fetcher -->
+    <script>
+        async function fetchStats() {
             try {
-                const response = await fetch(ROAD_NETWORK_GEOJSON_PATH, { cache: 'no-store' });
-                if (!response.ok) {
-                    throw new Error(`Gagal memuat ${ROAD_NETWORK_GEOJSON_PATH} (HTTP ${response.status})`);
-                }
-
-                const data = await response.json();
-                if (!data || data.type !== 'FeatureCollection' || !Array.isArray(data.features)) {
-                    throw new Error('Format data jalan tidak valid.');
-                }
-
-                const sanitizedRoadData = sanitizeRoadGeoJson(data);
-
-                const roadGeoJsonLayer = L.geoJSON(sanitizedRoadData, {
-                    coordsToLatLng: convertExportRoadCoord,
-                    filter: feature => {
-                        const type = feature && feature.geometry && feature.geometry.type;
-                        return type === 'LineString' || type === 'MultiLineString';
-                    },
-                    style: feature => {
-                        const props = feature.properties || {};
-                        return {
-                            color: getRoadNetworkColor(props.status_jal),
-                            weight: 2.8,
-                            opacity: 0.92
-                        };
-                    },
-                    onEachFeature: (feature, layer) => {
-                        const props = feature.properties || {};
-                        const namaJalan = String(props.nama_jalan || '').trim() || 'Tanpa nama';
-                        const status = String(props.status_jal || '').trim() || '-';
-                        const fungsi = String(props.Fungsi_Jal || '').trim() || '-';
-                        const panjang = Number(props.Plan_Len);
-                        const panjangText = Number.isFinite(panjang) ? `${panjang.toFixed(1)} m` : '-';
-
-                        layer.bindPopup(`
-                            <div class="p-2">
-                                <strong>${namaJalan}</strong><br>
-                                Status: ${status}<br>
-                                Fungsi: ${fungsi}<br>
-                                Panjang: ${panjangText}
-                            </div>
-                        `);
-                    }
-                });
-
-                roadNetworkLayer.addLayer(roadGeoJsonLayer);
-                roadNetworkLoaded = true;
-            } catch (error) {
-                console.error('Gagal memuat layer jalan eksternal:', error);
-                showMessage(error.message || 'Gagal memuat data jalan eksternal', 'bg-red-600 text-white');
-            }
-        }
-
-        function deleteRoadDamage(id) {
-            if (!confirm('Hapus laporan jalan rusak ini?')) return;
-
-            const formData = new FormData();
-            formData.append('id', id);
-
-            fetch('fitur_jalan_parsel/delete_jalan_rusak.php', { method: 'POST', body: formData })
-                .then(res => parseJsonResponse(res, 'fitur_jalan_parsel/delete_jalan_rusak.php'))
-                .then(data => {
-                    if (data.status === 'success') {
-                        showMessage('🗑️ Laporan berhasil dihapus', 'bg-orange-600 text-white');
-                        loadRoadDamage(true);
-                    } else {
-                        throw new Error(data.message || 'Gagal menghapus laporan');
-                    }
-                })
-                .catch(err => showMessage(err.message || 'Gagal menghapus laporan', 'bg-red-600 text-white'));
-        }
-
-        function updateFeatureMeasurePreview() {
-            const type = document.getElementById('featureType').value;
-            const layer = pendingShape;
-            const measureField = document.getElementById('modeMeasure');
-
-            if (!layer) {
-                measureField.value = type === 'polyline' ? 'Panjang otomatis setelah gambar' : 'Luas otomatis setelah gambar';
-                return;
-            }
-
-            if (type === 'polyline') {
-                measureField.value = formatMeters(calculatePolylineLength(layer));
-            } else {
-                measureField.value = formatSquareMeters(calculatePolygonArea(layer));
-            }
-        }
-
-        function updateDrawControl(type) {
-            if (drawControl) {
-                map.removeControl(drawControl);
-                drawControl = null;
-            }
-            drawControl = new L.Control.Draw({
-                position: 'topleft',
-                edit: {
-                    featureGroup: featureLayer,
-                    edit: true,
-                    remove: true
-                },
-                draw: {
-                    polygon: {
-                        allowIntersection: false,
-                        showArea: true,
-                        shapeOptions: {
-                            color: '#3b82f6',
-                            weight: 3
-                        }
-                    },
-                    polyline: {
-                        shapeOptions: {
-                            color: '#16a34a',
-                            weight: 5
-                        }
-                    },
-                    rectangle: true,
-                    circle: true,
-                    circlemarker: false,
-                    marker: true
-                }
-            });
-
-            map.addControl(drawControl);
-        }
-
-        function openNewLocationPopup(lat, lng) {
-            const content = `
-                <div class="p-4 w-full">
-                    <h3 class="font-bold text-indigo-700 border-b pb-2 mb-3 uppercase text-[10px] tracking-widest">Input SPBU Baru</h3>
-                    <div class="space-y-3">
-                        <input type="text" id="new_nama" placeholder="Nama SPBU" class="w-full border rounded p-2 text-sm outline-none focus:ring-2 focus:ring-indigo-500 shadow-sm">
-                        <input type="text" id="new_nomor" placeholder="Nomor SPBU" class="w-full border rounded p-2 text-sm outline-none focus:ring-2 focus:ring-indigo-500 shadow-sm">
-                        <select id="new_status" class="w-full border rounded p-2 text-sm outline-none focus:ring-2 focus:ring-indigo-500 shadow-sm">
-                            <option value="Ya">Buka 24 Jam</option>
-                            <option value="Tidak">Tidak</option>
-                        </select>
-                        <div class="text-[10px] text-slate-400 bg-slate-50 p-2 rounded border border-dashed text-center">
-                            Lat: ${lat.toFixed(6)}, Lng: ${lng.toFixed(6)}
-                        </div>
-                        <button onclick="saveNew(${lat}, ${lng})" class="w-full bg-indigo-600 text-white py-2 rounded font-bold text-sm shadow-lg hover:bg-indigo-700 transition">Simpan</button>
-                    </div>
-                </div>
-            `;
-            L.popup().setLatLng([lat, lng]).setContent(content).openOn(map);
-        }
-
-        async function reverseGeocodeLocation(lat, lng) {
-            const url = new URL('https://nominatim.openstreetmap.org/reverse');
-            url.searchParams.set('format', 'jsonv2');
-            url.searchParams.set('lat', String(lat));
-            url.searchParams.set('lon', String(lng));
-            url.searchParams.set('accept-language', 'id');
-
-            const response = await fetch(url.toString(), {
-                headers: {
-                    'Accept': 'application/json'
-                }
-            });
-
-            if (!response.ok) {
-                throw new Error(`Reverse geocode gagal (HTTP ${response.status})`);
-            }
-
-            const data = await response.json();
-            return data.display_name || 'Alamat tidak ditemukan';
-        }
-
-        function distanceMeters(lat1, lng1, lat2, lng2) {
-            const earthRadius = 6371000;
-            const toRadians = value => (value * Math.PI) / 180;
-            const deltaLat = toRadians(lat2 - lat1);
-            const deltaLng = toRadians(lng2 - lng1);
-            const a = Math.sin(deltaLat / 2) ** 2 + Math.cos(toRadians(lat1)) * Math.cos(toRadians(lat2)) * Math.sin(deltaLng / 2) ** 2;
-            return 2 * earthRadius * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
-        }
-
-        function formatDistanceMeters(value) {
-            if (!Number.isFinite(value)) return '-';
-            if (value >= 1000) {
-                return `${(value / 1000).toFixed(2)} km`;
-            }
-            return `${Math.round(value)} m`;
-        }
-
-        function findNearestRumahIbadah(lat, lng) {
-            if (!Array.isArray(rumahIbadahRecords) || !rumahIbadahRecords.length) {
-                return null;
-            }
-
-            return rumahIbadahRecords.reduce((nearest, record) => {
-                const distance = distanceMeters(lat, lng, Number(record.latitude), Number(record.longitude));
-                if (!nearest || distance < nearest.distance) {
-                    return { record, distance };
-                }
-                return nearest;
-            }, null);
-        }
-
-        function syncRumahIbadahRadius(value) {
-            const slider = document.getElementById('rumahIbadahRadius');
-            const field = document.getElementById('rumahIbadahRadiusValue');
-            const numericValue = Math.max(50, Number(value) || 1000);
-
-            if (slider) slider.value = numericValue;
-            if (field) field.innerText = String(numericValue);
-        }
-
-        function openRumahIbadahModal(lat, lng, record = null) {
-            pendingRumahIbadahCoords = { lat, lng };
-            editingRumahIbadahId = record ? Number(record.id) : null;
-
-            document.getElementById('rumahIbadahId').value = record ? String(record.id) : '';
-            document.getElementById('rumahIbadahNama').value = record ? record.nama || '' : '';
-            document.getElementById('rumahIbadahPic').value = record ? record.pic || '' : '';
-            document.getElementById('rumahIbadahAlamat').value = record ? record.alamat || '' : 'Mencari alamat...';
-            syncRumahIbadahRadius(record ? record.radius_m : 1000);
-            document.getElementById('rumahIbadahCoords').innerText = `${lat.toFixed(5)}, ${lng.toFixed(5)}`;
-
-            const modal = document.getElementById('rumahIbadahModal');
-            modal.classList.remove('hidden');
-            modal.classList.add('flex');
-            suppressAutoReload = true;
-
-            if (!record) {
-                reverseGeocodeLocation(lat, lng)
-                    .then(address => {
-                        if (pendingRumahIbadahCoords && pendingRumahIbadahCoords.lat === lat && pendingRumahIbadahCoords.lng === lng) {
-                            document.getElementById('rumahIbadahAlamat').value = address;
-                        }
-                    })
-                    .catch(() => {
-                        if (pendingRumahIbadahCoords && pendingRumahIbadahCoords.lat === lat && pendingRumahIbadahCoords.lng === lng) {
-                            document.getElementById('rumahIbadahAlamat').value = 'Alamat tidak ditemukan';
-                        }
-                    });
-            }
-        }
-
-        function closeRumahIbadahModal() {
-            const modal = document.getElementById('rumahIbadahModal');
-            modal.classList.add('hidden');
-            modal.classList.remove('flex');
-            pendingRumahIbadahCoords = null;
-            editingRumahIbadahId = null;
-            suppressAutoReload = !!document.querySelector('[id^="edit-mode-"]:not(.hidden)') || !!editingFeatureId;
-        }
-
-        function openPendudukMiskinModal(lat, lng, record = null) {
-            pendingPendudukMiskinCoords = { lat, lng };
-            document.getElementById('pendudukMiskinId').value = record ? String(record.id) : '';
-            document.getElementById('pendudukMiskinNama').value = record ? (record.nama_ketua_kk || '') : '';
-            document.getElementById('pendudukMiskinAnggota').value = record ? String(Number(record.jumlah_anggota) || 1) : '1';
-            document.getElementById('pendudukMiskinCoords').innerText = `${lat.toFixed(5)}, ${lng.toFixed(5)}`;
-            const nearest = findNearestRumahIbadah(lat, lng);
-
-            if (nearest) {
-                document.getElementById('pendudukMiskinRumahIbadah').value = nearest.record.nama;
-                document.getElementById('pendudukMiskinJarak').value = `${formatDistanceMeters(nearest.distance)} dari rumah ibadah terdekat`;
-            } else {
-                document.getElementById('pendudukMiskinRumahIbadah').value = 'Belum ada data rumah ibadah';
-                document.getElementById('pendudukMiskinJarak').value = '-';
-            }
-
-            const modal = document.getElementById('pendudukMiskinModal');
-            modal.classList.remove('hidden');
-            modal.classList.add('flex');
-            suppressAutoReload = true;
-        }
-
-        function closePendudukMiskinModal() {
-            const modal = document.getElementById('pendudukMiskinModal');
-            modal.classList.add('hidden');
-            modal.classList.remove('flex');
-            pendingPendudukMiskinCoords = null;
-            suppressAutoReload = !!document.querySelector('[id^="edit-mode-"]:not(.hidden)') || !!editingFeatureId;
-        }
-
-        function buildRumahIbadahPopup(record) {
-            const residentsInArea = getPoorResidentsInRumahRadius(record);
-
-            return `
-                <div class="w-full p-4">
-                    <h3 class="text-lg font-bold text-slate-800">${record.nama}</h3>
-                    <p class="mt-1 text-sm text-slate-600">PIC: ${record.pic}</p>
-                    <p class="mt-1 text-sm text-slate-600">Radius: ${Number(record.radius_m).toLocaleString('id-ID')} m</p>
-                    <p class="mt-1 text-sm text-slate-600">Alamat: ${record.alamat}</p>
-                    <p class="mt-1 text-sm text-slate-600">Penduduk miskin dalam wilayah: <span class="font-semibold">${residentsInArea.length}</span></p>
-                    <div class="mt-4 grid grid-cols-2 gap-2 border-t pt-3">
-                        <button onclick="openRumahIbadahEditor(${record.id})" class="rounded-lg bg-indigo-50 px-3 py-2 text-xs font-bold text-indigo-700 hover:bg-indigo-100">Edit</button>
-                        <button onclick="showNearbyPoorLocations(${record.id})" class="rounded-lg bg-emerald-50 px-3 py-2 text-xs font-bold text-emerald-700 hover:bg-emerald-100">Cari Miskin</button>
-                        <button onclick="openBantuanForRumah(${record.id})" class="rounded-lg bg-violet-50 px-3 py-2 text-xs font-bold text-violet-700 hover:bg-violet-100">Kelola Bantuan</button>
-                        <button onclick="deleteRumahIbadah(${record.id})" class="rounded-lg bg-red-50 px-3 py-2 text-xs font-bold text-red-700 hover:bg-red-100">Hapus</button>
-                    </div>
-                </div>
-            `;
-        }
-
-        function buildPendudukMiskinPopup(record) {
-            const nearestName = record.rumah_ibadah_nama || '-';
-            const radiusInfo = record.jarak_ke_rumah_ibadah_m != null ? formatDistanceMeters(Number(record.jarak_ke_rumah_ibadah_m)) : '-';
-            const aidStatus = getAidStatusBadge(record.bantuan_status);
-            const aidNote = record.bantuan_catatan ? record.bantuan_catatan : '-';
-
-            return `
-                <div class="w-full p-4">
-                    <h3 class="text-lg font-bold text-slate-800">${record.nama_ketua_kk}</h3>
-                    <p class="mt-1 text-sm text-slate-600">Anggota keluarga: ${record.jumlah_anggota}</p>
-                    <p class="mt-1 text-sm text-slate-600">Rumah ibadah terdekat: ${nearestName}</p>
-                    <p class="mt-1 text-sm text-slate-600">Jarak: ${radiusInfo}</p>
-                    <p class="mt-1 text-sm text-slate-600">Status bantuan: <span class="font-semibold">${aidStatus.label}</span></p>
-                    <p class="mt-1 text-xs text-slate-500">Catatan: ${aidNote}</p>
-                    <div class="mt-4 grid grid-cols-3 gap-2 border-t pt-3">
-                        <button onclick="openPendudukMiskinEditor(${record.id})" class="rounded-lg bg-indigo-50 px-3 py-2 text-xs font-bold text-indigo-700 hover:bg-indigo-100">Edit</button>
-                        <button onclick="deletePendudukMiskin(${record.id})" class="rounded-lg bg-red-50 px-3 py-2 text-xs font-bold text-red-700 hover:bg-red-100">Hapus</button>
-                        <button onclick="focusRegistryItem('rumahIbadah', ${record.rumah_ibadah_id || 0})" class="rounded-lg bg-emerald-50 px-3 py-2 text-xs font-bold text-emerald-700 hover:bg-emerald-100">Lihat Rumah Ibadah</button>
-                    </div>
-                    <div class="mt-2 grid grid-cols-2 gap-2">
-                        <button onclick="openVerifikasiFromPenduduk(${record.id})" class="rounded-lg bg-emerald-50 px-3 py-2 text-xs font-bold text-emerald-700 hover:bg-emerald-100">Verifikasi</button>
-                        <button onclick="setDataMode('aduanWarga'); openAduanWargaModal(${Number(record.latitude)}, ${Number(record.longitude)})" class="rounded-lg bg-fuchsia-50 px-3 py-2 text-xs font-bold text-fuchsia-700 hover:bg-fuchsia-100">Buat Aduan</button>
-                    </div>
-                </div>
-            `;
-        }
-
-        function getPoorResidentsInRumahRadius(rumahRecord) {
-            if (!rumahRecord) return [];
-
-            const radius = Number(rumahRecord.radius_m || 0);
-            const rumahLat = Number(rumahRecord.latitude);
-            const rumahLng = Number(rumahRecord.longitude);
-
-            if (!Number.isFinite(radius) || !Number.isFinite(rumahLat) || !Number.isFinite(rumahLng)) {
-                return [];
-            }
-
-            return pendudukMiskinRecords
-                .map(item => {
-                    const distance = distanceMeters(rumahLat, rumahLng, Number(item.latitude), Number(item.longitude));
-                    return { ...item, _distanceToRumah: distance };
-                })
-                .filter(item => {
-                    if (!Number.isFinite(item._distanceToRumah) || item._distanceToRumah > radius) {
-                        return false;
-                    }
-
-                    if (item.rumah_ibadah_id != null) {
-                        return Number(item.rumah_ibadah_id) === Number(rumahRecord.id);
-                    }
-
-                    const nearest = findNearestRumahIbadah(Number(item.latitude), Number(item.longitude));
-                    return nearest && Number(nearest.record.id) === Number(rumahRecord.id);
-                })
-                .sort((a, b) => a._distanceToRumah - b._distanceToRumah);
-        }
-
-        function openRumahIbadahEditor(id) {
-            const record = rumahIbadahRecords.find(item => Number(item.id) === Number(id));
-            if (!record) {
-                showMessage('Rumah ibadah tidak ditemukan', 'bg-red-600 text-white');
-                return;
-            }
-
-            openRumahIbadahModal(Number(record.latitude), Number(record.longitude), record);
-        }
-
-        function openPendudukMiskinEditor(id) {
-            const record = pendudukMiskinRecords.find(item => Number(item.id) === Number(id));
-            if (!record) {
-                showMessage('Data penduduk miskin tidak ditemukan', 'bg-red-600 text-white');
-                return;
-            }
-
-            openPendudukMiskinModal(Number(record.latitude), Number(record.longitude), record);
-        }
-
-        function showNearbyPoorLocations(rumahIbadahId) {
-            const record = rumahIbadahRecords.find(item => Number(item.id) === Number(rumahIbadahId));
-            if (!record) {
-                showMessage('Rumah ibadah tidak ditemukan', 'bg-red-600 text-white');
-                return;
-            }
-
-            selectedRumahIbadahId = Number(rumahIbadahId);
-            const withinRadius = getPoorResidentsInRumahRadius(record);
-
-            if (!withinRadius.length) {
-                showMessage('Belum ada penduduk miskin di dalam radius ini', 'bg-amber-600 text-white');
-                return;
-            }
-
-            const bounds = L.latLngBounds(withinRadius.map(item => [Number(item.latitude), Number(item.longitude)]));
-            map.fitBounds(bounds.pad(0.2));
-
-            withinRadius.forEach(item => {
-                const layer = pendudukMiskinLayerMap[item.id];
-                if (layer) {
-                    layer.openPopup();
-                }
-            });
-
-            showMessage(`Menampilkan ${withinRadius.length} lokasi miskin terdekat`, 'bg-emerald-600 text-white');
-        }
-
-        function getAidStatusColor(status) {
-            const normalized = normalizeAidStatus(status);
-            if (normalized === 'sudah') return '#10b981';
-            if (normalized === 'proses') return '#f59e0b';
-            return '#dc2626';
-        }
-
-        function createPendudukMiskinIcon(status) {
-            const color = getAidStatusColor(status);
-            return L.divIcon({
-                className: 'custom-marker',
-                html: `<svg width="32" height="40" viewBox="0 0 24 24" fill="${color}" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="8" r="4"/><path d="M4 22a8 8 0 0 1 16 0"/></svg>`,
-                iconSize: [32, 40],
-                iconAnchor: [16, 40],
-                popupAnchor: [0, -40]
-            });
-        }
-
-        function getVerifikasiStatusBadge(status) {
-            const value = String(status || 'menunggu').toLowerCase().trim();
-            if (value === 'valid') return { label: 'Valid', className: 'bg-emerald-100 text-emerald-700' };
-            if (value === 'perlu_tindak_lanjut') return { label: 'Perlu Tindak Lanjut', className: 'bg-amber-100 text-amber-700' };
-            return { label: 'Menunggu', className: 'bg-slate-100 text-slate-700' };
-        }
-
-        function getVerifikasiIcon(status) {
-            const value = String(status || 'menunggu').toLowerCase().trim();
-            const color = value === 'valid' ? '#10b981' : value === 'perlu_tindak_lanjut' ? '#f59e0b' : '#64748b';
-            return L.divIcon({
-                className: 'custom-marker',
-                html: `<svg width="32" height="40" viewBox="0 0 24 24" fill="${color}" xmlns="http://www.w3.org/2000/svg"><path d="M12 0 3 4v6c0 6.2 4.2 11.4 9 14 4.8-2.6 9-7.8 9-14V4z"/><path d="M9.5 11.5 11 13l3.5-4" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
-                iconSize: [32, 40],
-                iconAnchor: [16, 40],
-                popupAnchor: [0, -40]
-            });
-        }
-
-        function getAduanStatusBadge(status) {
-            const value = String(status || 'baru').toLowerCase().trim();
-            if (value === 'selesai') return { label: 'Selesai', className: 'bg-emerald-100 text-emerald-700' };
-            if (value === 'diproses') return { label: 'Diproses', className: 'bg-amber-100 text-amber-700' };
-            return { label: 'Baru', className: 'bg-rose-100 text-rose-700' };
-        }
-
-        function getAduanIcon(status) {
-            const value = String(status || 'baru').toLowerCase().trim();
-            const color = value === 'selesai' ? '#10b981' : value === 'diproses' ? '#f59e0b' : '#e11d48';
-            return L.divIcon({
-                className: 'custom-marker',
-                html: `<svg width="32" height="40" viewBox="0 0 24 24" fill="${color}" xmlns="http://www.w3.org/2000/svg"><path d="M12 2c-5 0-9 3.6-9 8 0 3.1 2.1 5.8 5.2 7l-.7 4 4.5-2.4c.3 0 .6.1 1 .1 5 0 9-3.6 9-8s-4-8.7-9-8.7z"/><circle cx="9" cy="10" r="1" fill="white"/><circle cx="12" cy="10" r="1" fill="white"/><circle cx="15" cy="10" r="1" fill="white"/></svg>`,
-                iconSize: [32, 40],
-                iconAnchor: [16, 40],
-                popupAnchor: [0, -40]
-            });
-        }
-
-        function buildVerifikasiLapanganPopup(record) {
-            const badge = getVerifikasiStatusBadge(record.status_verifikasi);
-            const fotoHtml = record.foto ? `<img src="${record.foto}" alt="Foto verifikasi" class="mt-2 w-full rounded-lg max-h-48 object-cover">` : '';
-
-            return `
-                <div class="w-full p-4">
-                    <h3 class="text-lg font-bold text-slate-800">Verifikasi Lapangan</h3>
-                    <p class="mt-1 text-sm text-slate-600">Target: ${record.target_nama || '-'} (${record.jenis_target || '-'})</p>
-                    <p class="mt-1 text-sm text-slate-600">Petugas: ${record.petugas_nama || '-'}</p>
-                    <div class="mt-2">
-                        <span class="registry-chip ${badge.className}">${badge.label}</span>
-                    </div>
-                    ${record.hasil_temuan ? `<p class="mt-2 text-sm text-slate-600"><strong>Temuan:</strong> ${record.hasil_temuan}</p>` : ''}
-                    ${record.tindak_lanjut ? `<p class="mt-1 text-sm text-slate-600"><strong>Tindak lanjut:</strong> ${record.tindak_lanjut}</p>` : ''}
-                    <p class="mt-1 text-xs text-slate-500">📍 ${Number(record.latitude).toFixed(5)}, ${Number(record.longitude).toFixed(5)}</p>
-                    ${fotoHtml}
-                    <div class="mt-3 grid grid-cols-2 gap-2 border-t pt-3">
-                        <button onclick="openVerifikasiLapanganEditor(${record.id})" class="rounded-lg bg-indigo-50 px-3 py-2 text-xs font-bold text-indigo-700 hover:bg-indigo-100">Edit</button>
-                        <button onclick="deleteVerifikasiLapangan(${record.id})" class="rounded-lg bg-red-50 px-3 py-2 text-xs font-bold text-red-700 hover:bg-red-100">Hapus</button>
-                    </div>
-                </div>
-            `;
-        }
-
-        function openVerifikasiLapanganModal(lat, lng, record = null) {
-            pendingVerifikasiCoords = { lat, lng };
-            document.getElementById('verifikasiLapanganId').value = record ? String(record.id) : '';
-            document.getElementById('verifikasiJenisTarget').value = record ? (record.jenis_target || 'penduduk_miskin') : 'penduduk_miskin';
-            document.getElementById('verifikasiTargetNama').value = record ? (record.target_nama || '') : '';
-            document.getElementById('verifikasiPetugasNama').value = record ? (record.petugas_nama || '') : '';
-            document.getElementById('verifikasiStatus').value = record ? (record.status_verifikasi || 'menunggu') : 'menunggu';
-            document.getElementById('verifikasiHasilTemuan').value = record ? (record.hasil_temuan || '') : '';
-            document.getElementById('verifikasiTindakLanjut').value = record ? (record.tindak_lanjut || '') : '';
-            document.getElementById('verifikasiCoords').innerText = `${lat.toFixed(5)}, ${lng.toFixed(5)}`;
-            document.getElementById('verifikasiFoto').value = '';
-
-            const modal = document.getElementById('verifikasiLapanganModal');
-            modal.classList.remove('hidden');
-            modal.classList.add('flex');
-            suppressAutoReload = true;
-        }
-
-        function closeVerifikasiLapanganModal() {
-            const modal = document.getElementById('verifikasiLapanganModal');
-            modal.classList.add('hidden');
-            modal.classList.remove('flex');
-            pendingVerifikasiCoords = null;
-            suppressAutoReload = !!document.querySelector('[id^="edit-mode-"]:not(.hidden)') || !!editingFeatureId;
-        }
-
-        function saveVerifikasiLapangan() {
-            if (!pendingVerifikasiCoords) {
-                showMessage('Koordinat verifikasi tidak ditemukan', 'bg-red-600 text-white');
-                return;
-            }
-
-            const id = document.getElementById('verifikasiLapanganId').value;
-            const formData = new FormData();
-            formData.append('jenis_target', document.getElementById('verifikasiJenisTarget').value);
-            formData.append('target_nama', document.getElementById('verifikasiTargetNama').value.trim());
-            formData.append('petugas_nama', document.getElementById('verifikasiPetugasNama').value.trim());
-            formData.append('status_verifikasi', document.getElementById('verifikasiStatus').value);
-            formData.append('hasil_temuan', document.getElementById('verifikasiHasilTemuan').value.trim());
-            formData.append('tindak_lanjut', document.getElementById('verifikasiTindakLanjut').value.trim());
-            formData.append('latitude', pendingVerifikasiCoords.lat);
-            formData.append('longitude', pendingVerifikasiCoords.lng);
-
-            const fileInput = document.getElementById('verifikasiFoto');
-            if (fileInput.files && fileInput.files[0]) {
-                formData.append('foto', fileInput.files[0]);
-            }
-
-            const endpoint = id ? 'update_verifikasi_lapangan.php' : 'save_verifikasi_lapangan.php';
-            if (id) {
-                formData.append('id', id);
-            }
-
-            fetch(endpoint, { method: 'POST', body: formData })
-                .then(res => parseJsonResponse(res, endpoint))
-                .then(data => {
-                    if (data.status === 'success') {
-                        showMessage('✅ Verifikasi lapangan berhasil disimpan', 'bg-green-600 text-white');
-                        closeVerifikasiLapanganModal();
-                        loadVerifikasiLapangan(true);
-                    } else {
-                        throw new Error(data.message || 'Gagal menyimpan verifikasi');
-                    }
-                })
-                .catch(err => showMessage(err.message || 'Gagal menyimpan verifikasi', 'bg-red-600 text-white'));
-        }
-
-        function deleteVerifikasiLapangan(id) {
-            if (!confirm('Hapus verifikasi lapangan ini?')) return;
-
-            const formData = new FormData();
-            formData.append('id', id);
-
-            fetch('delete_verifikasi_lapangan.php', { method: 'POST', body: formData })
-                .then(res => parseJsonResponse(res, 'delete_verifikasi_lapangan.php'))
-                .then(data => {
-                    if (data.status === 'success') {
-                        showMessage('🗑️ Verifikasi lapangan berhasil dihapus', 'bg-orange-600 text-white');
-                        loadVerifikasiLapangan(true);
-                    } else {
-                        throw new Error(data.message || 'Gagal menghapus verifikasi');
-                    }
-                })
-                .catch(err => showMessage(err.message || 'Gagal menghapus verifikasi', 'bg-red-600 text-white'));
-        }
-
-        function openVerifikasiLapanganEditor(id) {
-            const record = verifikasiLapanganRecords.find(item => Number(item.id) === Number(id));
-            if (!record) {
-                showMessage('Data verifikasi tidak ditemukan', 'bg-red-600 text-white');
-                return;
-            }
-
-            openVerifikasiLapanganModal(Number(record.latitude), Number(record.longitude), record);
-        }
-
-        function openVerifikasiFromPenduduk(id) {
-            const record = pendudukMiskinRecords.find(item => Number(item.id) === Number(id));
-            if (!record) {
-                showMessage('Data penduduk miskin tidak ditemukan', 'bg-red-600 text-white');
-                return;
-            }
-
-            openVerifikasiLapanganModal(Number(record.latitude), Number(record.longitude), {
-                jenis_target: 'penduduk_miskin',
-                target_nama: record.nama_ketua_kk || '',
-                petugas_nama: '',
-                status_verifikasi: 'menunggu',
-                hasil_temuan: '',
-                tindak_lanjut: ''
-            });
-        }
-
-        function buildAduanWargaPopup(record) {
-            const badge = getAduanStatusBadge(record.status_tindak_lanjut);
-            const fotoHtml = record.foto ? `<img src="${record.foto}" alt="Foto aduan" class="mt-2 w-full rounded-lg max-h-48 object-cover">` : '';
-
-            return `
-                <div class="w-full p-4">
-                    <h3 class="text-lg font-bold text-slate-800">Aduan Warga</h3>
-                    <p class="mt-1 text-sm text-slate-600">Kategori: ${record.kategori || '-'}</p>
-                    <p class="mt-1 text-sm text-slate-600">Pelapor: ${record.pelapor_nama || '-'}</p>
-                    <p class="mt-1 text-sm text-slate-600">Kontak: ${record.kontak_pelapor || '-'}</p>
-                    <div class="mt-2">
-                        <span class="registry-chip ${badge.className}">${badge.label}</span>
-                    </div>
-                    <p class="mt-2 text-sm text-slate-600"><strong>Deskripsi:</strong> ${record.deskripsi || '-'}</p>
-                    ${record.tindak_lanjut ? `<p class="mt-1 text-sm text-slate-600"><strong>Tindak lanjut:</strong> ${record.tindak_lanjut}</p>` : ''}
-                    <p class="mt-1 text-xs text-slate-500">📍 ${Number(record.latitude).toFixed(5)}, ${Number(record.longitude).toFixed(5)}</p>
-                    ${fotoHtml}
-                    <div class="mt-3 grid grid-cols-2 gap-2 border-t pt-3">
-                        <button onclick="openAduanWargaEditor(${record.id})" class="rounded-lg bg-indigo-50 px-3 py-2 text-xs font-bold text-indigo-700 hover:bg-indigo-100">Edit</button>
-                        <button onclick="deleteAduanWarga(${record.id})" class="rounded-lg bg-red-50 px-3 py-2 text-xs font-bold text-red-700 hover:bg-red-100">Hapus</button>
-                    </div>
-                </div>
-            `;
-        }
-
-        function openAduanWargaModal(lat, lng, record = null) {
-            pendingAduanCoords = { lat, lng };
-            document.getElementById('aduanWargaId').value = record ? String(record.id) : '';
-            document.getElementById('aduanKategori').value = record ? (record.kategori || '') : '';
-            document.getElementById('aduanPelaporNama').value = record ? (record.pelapor_nama || '') : '';
-            document.getElementById('aduanKontakPelapor').value = record ? (record.kontak_pelapor || '') : '';
-            document.getElementById('aduanStatus').value = record ? (record.status_tindak_lanjut || 'baru') : 'baru';
-            document.getElementById('aduanDeskripsi').value = record ? (record.deskripsi || '') : '';
-            document.getElementById('aduanTindakLanjut').value = record ? (record.tindak_lanjut || '') : '';
-            document.getElementById('aduanCoords').innerText = `${lat.toFixed(5)}, ${lng.toFixed(5)}`;
-            document.getElementById('aduanFoto').value = '';
-
-            const modal = document.getElementById('aduanWargaModal');
-            modal.classList.remove('hidden');
-            modal.classList.add('flex');
-            suppressAutoReload = true;
-        }
-
-        function closeAduanWargaModal() {
-            const modal = document.getElementById('aduanWargaModal');
-            modal.classList.add('hidden');
-            modal.classList.remove('flex');
-            pendingAduanCoords = null;
-            suppressAutoReload = !!document.querySelector('[id^="edit-mode-"]:not(.hidden)') || !!editingFeatureId;
-        }
-
-        function saveAduanWarga() {
-            if (!pendingAduanCoords) {
-                showMessage('Koordinat aduan tidak ditemukan', 'bg-red-600 text-white');
-                return;
-            }
-
-            const id = document.getElementById('aduanWargaId').value;
-            const kategori = document.getElementById('aduanKategori').value.trim();
-            const pelaporNama = document.getElementById('aduanPelaporNama').value.trim();
-            const deskripsi = document.getElementById('aduanDeskripsi').value.trim();
-
-            if (!kategori || !pelaporNama || !deskripsi) {
-                showMessage('Kategori, nama pelapor, dan deskripsi wajib diisi', 'bg-red-600 text-white');
-                return;
-            }
-
-            const formData = new FormData();
-            formData.append('kategori', kategori);
-            formData.append('pelapor_nama', pelaporNama);
-            formData.append('kontak_pelapor', document.getElementById('aduanKontakPelapor').value.trim());
-            formData.append('deskripsi', deskripsi);
-            formData.append('status_tindak_lanjut', document.getElementById('aduanStatus').value);
-            formData.append('tindak_lanjut', document.getElementById('aduanTindakLanjut').value.trim());
-            formData.append('latitude', pendingAduanCoords.lat);
-            formData.append('longitude', pendingAduanCoords.lng);
-
-            const fileInput = document.getElementById('aduanFoto');
-            if (fileInput.files && fileInput.files[0]) {
-                formData.append('foto', fileInput.files[0]);
-            }
-
-            const endpoint = id ? 'update_aduan_warga.php' : 'save_aduan_warga.php';
-            if (id) {
-                formData.append('id', id);
-            }
-
-            fetch(endpoint, { method: 'POST', body: formData })
-                .then(res => parseJsonResponse(res, endpoint))
-                .then(data => {
-                    if (data.status === 'success') {
-                        showMessage('✅ Aduan warga berhasil disimpan', 'bg-green-600 text-white');
-                        closeAduanWargaModal();
-                        loadAduanWarga(true);
-                    } else {
-                        throw new Error(data.message || 'Gagal menyimpan aduan');
-                    }
-                })
-                .catch(err => showMessage(err.message || 'Gagal menyimpan aduan', 'bg-red-600 text-white'));
-        }
-
-        function deleteAduanWarga(id) {
-            if (!confirm('Hapus aduan warga ini?')) return;
-
-            const formData = new FormData();
-            formData.append('id', id);
-
-            fetch('delete_aduan_warga.php', { method: 'POST', body: formData })
-                .then(res => parseJsonResponse(res, 'delete_aduan_warga.php'))
-                .then(data => {
-                    if (data.status === 'success') {
-                        showMessage('🗑️ Aduan warga berhasil dihapus', 'bg-orange-600 text-white');
-                        loadAduanWarga(true);
-                    } else {
-                        throw new Error(data.message || 'Gagal menghapus aduan');
-                    }
-                })
-                .catch(err => showMessage(err.message || 'Gagal menghapus aduan', 'bg-red-600 text-white'));
-        }
-
-        function openAduanWargaEditor(id) {
-            const record = aduanWargaRecords.find(item => Number(item.id) === Number(id));
-            if (!record) {
-                showMessage('Data aduan tidak ditemukan', 'bg-red-600 text-white');
-                return;
-            }
-
-            openAduanWargaModal(Number(record.latitude), Number(record.longitude), record);
-        }
-
-        function saveRumahIbadah() {
-            if (!pendingRumahIbadahCoords) {
-                showMessage('Koordinat rumah ibadah tidak ditemukan', 'bg-red-600 text-white');
-                return;
-            }
-
-            const id = document.getElementById('rumahIbadahId').value;
-            const nama = document.getElementById('rumahIbadahNama').value.trim();
-            const alamat = document.getElementById('rumahIbadahAlamat').value.trim();
-            const pic = document.getElementById('rumahIbadahPic').value.trim();
-            const radius = Number(document.getElementById('rumahIbadahRadius').value || 1000);
-
-            if (!nama || !alamat || !pic) {
-                showMessage('Nama, alamat, dan PIC wajib diisi', 'bg-red-600 text-white');
-                return;
-            }
-
-            if (alamat.toLowerCase().includes('mencari alamat')) {
-                showMessage('Alamat masih diproses, tunggu reverse geocode selesai', 'bg-amber-600 text-white');
-                return;
-            }
-
-            const formData = new FormData();
-            formData.append('nama', nama);
-            formData.append('alamat', alamat);
-            formData.append('pic', pic);
-            formData.append('latitude', pendingRumahIbadahCoords.lat);
-            formData.append('longitude', pendingRumahIbadahCoords.lng);
-            formData.append('radius_m', radius);
-
-            const endpoint = id ? 'rancangan_sistem/update_rumah_ibadah.php' : 'rancangan_sistem/save_rumah_ibadah.php';
-            if (id) {
-                formData.append('id', id);
-            }
-
-            fetch(endpoint, { method: 'POST', body: formData })
-                .then(res => parseJsonResponse(res, endpoint))
-                .then(data => {
-                    if (data.status === 'success') {
-                        showMessage('✅ Rumah ibadah berhasil disimpan', 'bg-green-600 text-white');
-                        closeRumahIbadahModal();
-                        loadRumahIbadah(true);
-                    } else {
-                        throw new Error(data.message || 'Gagal menyimpan rumah ibadah');
-                    }
-                })
-                .catch(err => showMessage(err.message || 'Gagal menyimpan rumah ibadah', 'bg-red-600 text-white'));
-        }
-
-        function deleteRumahIbadah(id) {
-            if (!confirm('Hapus rumah ibadah ini?')) return;
-
-            const formData = new FormData();
-            formData.append('id', id);
-
-            fetch('rancangan_sistem/delete_rumah_ibadah.php', { method: 'POST', body: formData })
-                .then(res => parseJsonResponse(res, 'rancangan_sistem/delete_rumah_ibadah.php'))
-                .then(data => {
-                    if (data.status === 'success') {
-                        showMessage('🗑️ Rumah ibadah berhasil dihapus', 'bg-orange-600 text-white');
-                        loadRumahIbadah(true);
-                        loadPendudukMiskin(true);
-                    } else {
-                        throw new Error(data.message || 'Gagal menghapus rumah ibadah');
-                    }
-                })
-                .catch(err => showMessage(err.message || 'Gagal menghapus rumah ibadah', 'bg-red-600 text-white'));
-        }
-
-        function savePendudukMiskin() {
-            if (!pendingPendudukMiskinCoords) {
-                showMessage('Koordinat penduduk miskin tidak ditemukan', 'bg-red-600 text-white');
-                return;
-            }
-
-            const id = document.getElementById('pendudukMiskinId').value;
-            const namaKetuaKk = document.getElementById('pendudukMiskinNama').value.trim();
-            const jumlahAnggota = Number(document.getElementById('pendudukMiskinAnggota').value || 0);
-            const nearest = findNearestRumahIbadah(pendingPendudukMiskinCoords.lat, pendingPendudukMiskinCoords.lng);
-
-            if (!namaKetuaKk || jumlahAnggota <= 0) {
-                showMessage('Nama ketua KK dan jumlah anggota wajib diisi', 'bg-red-600 text-white');
-                return;
-            }
-
-            if (!nearest) {
-                showMessage('Tambahkan rumah ibadah terlebih dahulu', 'bg-red-600 text-white');
-                return;
-            }
-
-            const formData = new FormData();
-            formData.append('nama_ketua_kk', namaKetuaKk);
-            formData.append('jumlah_anggota', jumlahAnggota);
-            formData.append('latitude', pendingPendudukMiskinCoords.lat);
-            formData.append('longitude', pendingPendudukMiskinCoords.lng);
-            formData.append('rumah_ibadah_id', nearest.record.id);
-            formData.append('rumah_ibadah_nama', nearest.record.nama);
-            formData.append('jarak_ke_rumah_ibadah_m', nearest.distance.toFixed(2));
-
-            const endpoint = id ? 'rancangan_sistem/update_penduduk_miskin.php' : 'rancangan_sistem/save_penduduk_miskin.php';
-            if (id) {
-                formData.append('id', id);
-            }
-
-            fetch(endpoint, { method: 'POST', body: formData })
-                .then(res => parseJsonResponse(res, endpoint))
-                .then(data => {
-                    if (data.status === 'success') {
-                        showMessage('✅ Penduduk miskin berhasil disimpan', 'bg-green-600 text-white');
-                        closePendudukMiskinModal();
-                        loadPendudukMiskin(true);
-                        loadRumahIbadah(true);
-                    } else {
-                        throw new Error(data.message || 'Gagal menyimpan penduduk miskin');
-                    }
-                })
-                .catch(err => showMessage(err.message || 'Gagal menyimpan penduduk miskin', 'bg-red-600 text-white'));
-        }
-
-        function deletePendudukMiskin(id) {
-            if (!confirm('Hapus data penduduk miskin ini?')) return;
-
-            const formData = new FormData();
-            formData.append('id', id);
-
-            fetch('rancangan_sistem/delete_penduduk_miskin.php', { method: 'POST', body: formData })
-                .then(res => parseJsonResponse(res, 'rancangan_sistem/delete_penduduk_miskin.php'))
-                .then(data => {
-                    if (data.status === 'success') {
-                        showMessage('🗑️ Data penduduk miskin berhasil dihapus', 'bg-orange-600 text-white');
-                        loadPendudukMiskin(true);
-                        loadRumahIbadah(true);
-                    } else {
-                        throw new Error(data.message || 'Gagal menghapus data');
-                    }
-                })
-                .catch(err => showMessage(err.message || 'Gagal menghapus data', 'bg-red-600 text-white'));
-        }
-
-        function createRumahIbadahIcon() {
-            return L.divIcon({
-                className: 'custom-marker',
-                html: `<svg width="32" height="40" viewBox="0 0 24 24" fill="#0f766e" xmlns="http://www.w3.org/2000/svg"><path d="M12 2 4 7v15h16V7z"/><path d="M9 22v-8h6v8" fill="#fff" opacity="0.85"/></svg>`,
-                iconSize: [32, 40],
-                iconAnchor: [16, 40],
-                popupAnchor: [0, -40]
-            });
-        }
-
-        function clearRumahIbadahLayers() {
-            rumahIbadahLayer.clearLayers();
-            rumahIbadahLayerMap = {};
-        }
-
-        function clearPendudukMiskinLayers() {
-            pendudukMiskinLayer.clearLayers();
-            pendudukMiskinLayerMap = {};
-        }
-
-        function refreshRumahIbadahPopups() {
-            Object.values(rumahIbadahLayerMap).forEach(entry => {
-                if (!entry || !entry.record) return;
-                const popupContent = buildRumahIbadahPopup(entry.record);
-                if (entry.marker) entry.marker.bindPopup(popupContent);
-                if (entry.circle) entry.circle.bindPopup(popupContent);
-            });
-        }
-
-        function loadRumahIbadah(force = false) {
-            if (!force && (document.hidden || suppressAutoReload)) return;
-
-            fetch('rancangan_sistem/get_rumah_ibadah.php')
-                .then(res => {
-                    if (!res.ok) throw new Error('HTTP Error: ' + res.status);
-                    return res.text();
-                })
-                .then(text => {
-                    const data = JSON.parse(text);
-                    if (!Array.isArray(data)) {
-                        throw new Error('Format data rumah ibadah tidak valid');
-                    }
-
-                    rumahIbadahRecords = data;
-                    clearRumahIbadahLayers();
-
-                    data.forEach(record => {
-                        const marker = L.marker([Number(record.latitude), Number(record.longitude)], {
-                            icon: createRumahIbadahIcon()
-                        }).addTo(rumahIbadahLayer);
-                        const circle = L.circle([Number(record.latitude), Number(record.longitude)], {
-                            radius: Number(record.radius_m || 1000),
-                            color: '#0f766e',
-                            weight: 2,
-                            fillColor: '#14b8a6',
-                            fillOpacity: 0.12
-                        }).addTo(rumahIbadahLayer);
-
-                        marker.bindPopup(buildRumahIbadahPopup(record));
-                        circle.bindPopup(buildRumahIbadahPopup(record));
-
-                        rumahIbadahLayerMap[record.id] = { marker, circle, record };
-                    });
-
-                    renderInputRegistry();
-                    const bantuanPanel = document.getElementById('bantuanDrawer');
-                    if (bantuanPanel && !bantuanPanel.classList.contains('hidden-drawer')) {
-                        renderBantuanDrawer();
-                    }
-                })
-                .catch(err => console.error('Gagal memuat rumah ibadah:', err));
-        }
-
-        function loadPendudukMiskin(force = false) {
-            if (!force && (document.hidden || suppressAutoReload)) return;
-
-            fetch('rancangan_sistem/get_penduduk_miskin.php')
-                .then(res => {
-                    if (!res.ok) throw new Error('HTTP Error: ' + res.status);
-                    return res.text();
-                })
-                .then(text => {
-                    const data = JSON.parse(text);
-                    if (!Array.isArray(data)) {
-                        throw new Error('Format data penduduk miskin tidak valid');
-                    }
-
-                    pendudukMiskinRecords = data;
-                    clearPendudukMiskinLayers();
-
-                    data.forEach(record => {
-                        const marker = L.marker([Number(record.latitude), Number(record.longitude)], {
-                            icon: createPendudukMiskinIcon(record.bantuan_status)
-                        }).addTo(pendudukMiskinLayer);
-
-                        marker.bindPopup(buildPendudukMiskinPopup(record));
-                        pendudukMiskinLayerMap[record.id] = marker;
-                    });
-
-                    refreshRumahIbadahPopups();
-                    const bantuanPanel = document.getElementById('bantuanDrawer');
-                    if (bantuanPanel && !bantuanPanel.classList.contains('hidden-drawer')) {
-                        renderBantuanDrawer();
-                    }
-
-                    renderInputRegistry();
-                })
-                .catch(err => console.error('Gagal memuat penduduk miskin:', err));
-        }
-
-        function getVerifikasiLayerPopup(record) {
-            return buildVerifikasiLapanganPopup(record);
-        }
-
-        function getAduanLayerPopup(record) {
-            return buildAduanWargaPopup(record);
-        }
-
-        function clearVerifikasiLapanganLayers() {
-            verifikasiLapanganLayer.clearLayers();
-            verifikasiLapanganLayerMap = {};
-        }
-
-        function clearAduanWargaLayers() {
-            aduanWargaLayer.clearLayers();
-            aduanWargaLayerMap = {};
-        }
-
-        function loadVerifikasiLapangan(force = false) {
-            if (!force && (document.hidden || suppressAutoReload)) return;
-
-            fetch('get_verifikasi_lapangan.php')
-                .then(res => {
-                    if (!res.ok) throw new Error('HTTP Error: ' + res.status);
-                    return res.text();
-                })
-                .then(text => {
-                    const data = JSON.parse(text);
-                    if (!Array.isArray(data)) {
-                        throw new Error('Format data verifikasi tidak valid');
-                    }
-
-                    verifikasiLapanganRecords = data;
-                    clearVerifikasiLapanganLayers();
-
-                    data.forEach(record => {
-                        const marker = L.marker([Number(record.latitude), Number(record.longitude)], {
-                            icon: getVerifikasiIcon(record.status_verifikasi)
-                        }).addTo(verifikasiLapanganLayer);
-
-                        marker.bindPopup(getVerifikasiLayerPopup(record));
-                        verifikasiLapanganLayerMap[record.id] = marker;
-                    });
-
-                    renderInputRegistry();
-                })
-                .catch(err => console.error('Gagal memuat verifikasi lapangan:', err));
-        }
-
-        function loadAduanWarga(force = false) {
-            if (!force && (document.hidden || suppressAutoReload)) return;
-
-            fetch('get_aduan_warga.php')
-                .then(res => {
-                    if (!res.ok) throw new Error('HTTP Error: ' + res.status);
-                    return res.text();
-                })
-                .then(text => {
-                    const data = JSON.parse(text);
-                    if (!Array.isArray(data)) {
-                        throw new Error('Format data aduan tidak valid');
-                    }
-
-                    aduanWargaRecords = data;
-                    clearAduanWargaLayers();
-
-                    data.forEach(record => {
-                        const marker = L.marker([Number(record.latitude), Number(record.longitude)], {
-                            icon: getAduanIcon(record.status_tindak_lanjut)
-                        }).addTo(aduanWargaLayer);
-
-                        marker.bindPopup(getAduanLayerPopup(record));
-                        aduanWargaLayerMap[record.id] = marker;
-                    });
-
-                    renderInputRegistry();
-                })
-                .catch(err => console.error('Gagal memuat aduan warga:', err));
-        }
-
-        function convertCircleToPolygon(circleLayer, vertices = 48) {
-            const center = circleLayer.getLatLng();
-            const radius = Number(circleLayer.getRadius() || 0);
-            const points = [];
-            const latFactor = 111320;
-            const lngFactor = latFactor * Math.cos((center.lat * Math.PI) / 180);
-
-            for (let index = 0; index < vertices; index += 1) {
-                const angle = (index / vertices) * Math.PI * 2;
-                const dx = radius * Math.cos(angle);
-                const dy = radius * Math.sin(angle);
-                const lat = center.lat + (dy / latFactor);
-                const lng = center.lng + (dx / (lngFactor || 1));
-                points.push([lat, lng]);
-            }
-
-            return L.polygon(points);
-        }
-
-        function calculatePolylineLength(layer) {
-            const latlngs = layer.getLatLngs();
-            const points = Array.isArray(latlngs[0]) ? latlngs.flat() : latlngs;
-
-            let total = 0;
-            for (let i = 1; i < points.length; i += 1) {
-                total += map.distance(points[i - 1], points[i]);
-            }
-            return total;
-        }
-
-        function calculatePolygonArea(layer) {
-            const latlngs = layer.getLatLngs();
-            const rings = Array.isArray(latlngs[0]) ? latlngs[0] : latlngs;
-            if (L.GeometryUtil && typeof L.GeometryUtil.geodesicArea === 'function') {
-                return L.GeometryUtil.geodesicArea(rings);
-            }
-
-            return 0;
-        }
-
-        function geometryToCoordinates(layer) {
-            const latlngs = layer.getLatLngs();
-            const type = document.getElementById('featureType').value;
-
-            if (type === 'polyline') {
-                return latlngs.map(point => [point.lat, point.lng]);
-            }
-
-            const ring = Array.isArray(latlngs[0]) ? latlngs[0] : latlngs;
-            return [ring.map(point => [point.lat, point.lng])];
-        }
-
-        function getFeaturePopup(feature) {
-            const color = getFeatureStatusColor(feature.type, feature.status_objek);
-            const measureText = feature.type === 'polyline'
-                ? formatMeters(Number(feature.nilai_ukur))
-                : formatSquareMeters(Number(feature.nilai_ukur));
-
-            return `
-                <div class="w-full p-4">
-                    <h3 class="text-lg font-bold text-slate-800">${feature.nama_objek}</h3>
-                    <p class="mt-1 text-sm text-slate-600">Kategori: ${feature.kategori}</p>
-                    <p class="mt-1 text-sm text-slate-600">Status: <span class="font-semibold" style="color: ${color}">${feature.status_objek}</span></p>
-                    <p class="mt-1 text-sm text-slate-600">${feature.type === 'polyline' ? 'Panjang' : 'Luas'}: <span class="font-semibold">${measureText}</span></p>
-                    <div class="mt-4 grid grid-cols-2 gap-2 border-t pt-3">
-                        <button onclick="openFeatureEditor(${feature.id})" class="rounded-lg bg-indigo-50 px-3 py-2 text-xs font-bold text-indigo-700 hover:bg-indigo-100">Edit Atribut</button>
-                        <button onclick="toggleFeatureGeometryEditing(${feature.id})" class="rounded-lg bg-emerald-50 px-3 py-2 text-xs font-bold text-emerald-700 hover:bg-emerald-100">Edit Geometri</button>
-                        <button onclick="saveFeatureGeometry(${feature.id})" class="rounded-lg bg-amber-50 px-3 py-2 text-xs font-bold text-amber-700 hover:bg-amber-100">Simpan Geometri</button>
-                        <button onclick="deleteFeature(${feature.id})" class="rounded-lg bg-red-50 px-3 py-2 text-xs font-bold text-red-700 hover:bg-red-100">Hapus</button>
-                    </div>
-                </div>
-            `;
-        }
-
-        function buildFeatureStatusOptions(type) {
-            return getFeatureOptions(type).map(option => `<option value="${option.value}">${option.label}</option>`).join('');
-        }
-
-        function geometryToLayer(type, geometry) {
-            if (type === 'polyline') {
-                return L.polyline(geometry);
-            }
-
-            return L.polygon(geometry);
-        }
-
-        function getFeatureGeometry(layer) {
-            const type = layer instanceof L.Polygon ? 'polygon' : 'polyline';
-            const latlngs = layer.getLatLngs();
-
-            if (type === 'polyline') {
-                return latlngs.map(point => [point.lat, point.lng]);
-            }
-
-            const ring = Array.isArray(latlngs[0]) ? latlngs[0] : latlngs;
-            return [ring.map(point => [point.lat, point.lng])];
-        }
-
-        function updateFeatureLayerStyle(layer, type, status) {
-            const color = getFeatureStatusColor(type, status);
-            layer.setStyle(type === 'polyline'
-                ? { color, weight: 5 }
-                : { color, fillColor: color, fillOpacity: 0.25, weight: 3 }
-            );
-        }
-
-        function getFeatureLayerById(id) {
-            return featureLayerMap[id] || null;
-        }
-
-        function addSpatialFeatureLayer(layer, type) {
-            featureLayer.addLayer(layer);
-
-            if (type === 'polyline') {
-                jalanLayerGroup.addLayer(layer);
-                return;
-            }
-
-            if (type === 'polygon') {
-                polygonLayerGroup.addLayer(layer);
-            }
-        }
-
-        function removeSpatialFeatureLayer(layer, type) {
-            featureLayer.removeLayer(layer);
-
-            if (type === 'polyline') {
-                jalanLayerGroup.removeLayer(layer);
-                return;
-            }
-
-            if (type === 'polygon') {
-                polygonLayerGroup.removeLayer(layer);
-            }
-        }
-
-        function setSpatialOverlayVisibility(visible) {
-            const overlayLayers = [jalanLayerGroup, polygonLayerGroup, roadDamageLayer, roadNetworkLayer, rumahIbadahLayer, pendudukMiskinLayer];
-
-            if (visible) {
-                hiddenLayersDuringChoropleth.forEach(layer => {
-                    if (!map.hasLayer(layer)) {
-                        map.addLayer(layer);
-                    }
-                });
-                hiddenLayersDuringChoropleth = [];
-                return;
-            }
-
-            hiddenLayersDuringChoropleth = overlayLayers.filter(layer => map.hasLayer(layer));
-            hiddenLayersDuringChoropleth.forEach(layer => map.removeLayer(layer));
-        }
-
-        function clearFeatureInput() {
-            document.getElementById('modeMeasure').value = '';
-            document.getElementById('newFeatureName').value = '';
-            document.getElementById('newFeatureMeasure').value = '';
-            document.getElementById('newFeatureKategori').value = '';
-            document.getElementById('newFeatureTypeLabel').value = '';
-            document.getElementById('newFeatureStatus').innerHTML = '';
-            pendingShape = null;
-            pendingNewFeatureLayer = null;
-            if (appMode === 'polyline' || appMode === 'polygon') {
-                setSpatialType(appMode);
-            }
-        }
-
-        function openNewFeatureModal(layer) {
-            const type = document.getElementById('featureType').value;
-            const status = document.getElementById('featureStatus').value;
-            const modal = document.getElementById('newFeatureModal');
-
-            pendingNewFeatureLayer = layer;
-            document.getElementById('newFeatureKategori').value = type === 'polyline' ? 'Jalan' : 'Tanah';
-            document.getElementById('newFeatureTypeLabel').value = type === 'polyline' ? 'Jalan (Polyline)' : 'Parsil Tanah (Polygon)';
-            document.getElementById('newFeatureStatus').innerHTML = buildFeatureStatusOptions(type);
-            document.getElementById('newFeatureStatus').value = status;
-            document.getElementById('newFeatureMeasure').value = type === 'polyline'
-                ? formatMeters(calculatePolylineLength(layer))
-                : formatSquareMeters(calculatePolygonArea(layer));
-            document.getElementById('newFeatureName').value = '';
-            modal.classList.remove('hidden');
-            modal.classList.add('flex');
-            suppressAutoReload = true;
-        }
-
-        function closeNewFeatureModal(removeLayer = true) {
-            const modal = document.getElementById('newFeatureModal');
-
-            if (removeLayer && pendingNewFeatureLayer) {
-                const pendingType = pendingNewFeatureLayer.featureType || document.getElementById('featureType').value;
-                removeSpatialFeatureLayer(pendingNewFeatureLayer, pendingType);
-            }
-
-            modal.classList.add('hidden');
-            modal.classList.remove('flex');
-            clearFeatureInput();
-        }
-
-        function loadFeatures(force = false) {
-            if (!force && (document.hidden || suppressAutoReload || isFeatureDrawing || isFeatureSaving)) return;
-
-            fetch('layer_groups_choropleth/get_features.php')
-                .then(res => {
-                    if (!res.ok) throw new Error('HTTP Error: ' + res.status);
-                    return res.text();
-                })
-                .then(text => {
-                    const data = JSON.parse(text);
-                    if (!Array.isArray(data)) {
-                        if (data && data.status === 'error') {
-                            throw new Error(data.message || 'Terjadi error pada server');
-                        }
-                        throw new Error('Format data fitur tidak valid');
-                    }
-
-                    featureRecords = data;
-                    featureLayer.clearLayers();
-                    jalanLayerGroup.clearLayers();
-                    polygonLayerGroup.clearLayers();
-                    featureLayerMap = {};
-
-                    data.forEach(feature => {
-                        const color = getFeatureStatusColor(feature.type, feature.status_objek);
-                        const geometry = feature.geometry_data;
-
-                        if (feature.type === 'polyline') {
-                            const layer = L.polyline(geometry, { color, weight: 5 });
-                            layer.featureData = feature;
-                            layer.featureType = 'polyline';
-                            featureLayerMap[feature.id] = layer;
-                            addSpatialFeatureLayer(layer, 'polyline');
-                            layer.bindPopup(getFeaturePopup(feature));
-                        } else if (feature.type === 'polygon') {
-                            const layer = L.polygon(geometry, { color, fillColor: color, fillOpacity: 0.25, weight: 3 });
-                            layer.featureData = feature;
-                            layer.featureType = 'polygon';
-                            featureLayerMap[feature.id] = layer;
-                            addSpatialFeatureLayer(layer, 'polygon');
-                            layer.bindPopup(getFeaturePopup(feature));
-                        }
-                    });
-                    renderInputRegistry();
-                })
-                .catch(err => {
-                    console.error('Gagal memuat fitur spasial:', err);
-                    if (force) {
-                        showMessage('Gagal memuat data jalan/parsil', 'bg-red-600 text-white');
-                    }
-                });
-        }
-
-        function saveFeature(layer) {
-            const type = document.getElementById('featureType').value;
-            const nama = document.getElementById('newFeatureName').value.trim();
-            const status = document.getElementById('featureStatus').value;
-            const kategori = type === 'polyline' ? 'Jalan' : 'Tanah';
-            const nilai = type === 'polyline' ? calculatePolylineLength(layer) : calculatePolygonArea(layer);
-            const geometry = geometryToCoordinates(layer);
-
-            if (!nama) {
-                showMessage('Nama objek wajib diisi', 'bg-red-600 text-white');
-                return;
-            }
-
-            const formData = new FormData();
-            formData.append('nama', nama);
-            formData.append('kategori', kategori);
-            formData.append('status', status);
-            formData.append('type', type);
-            formData.append('geometry', JSON.stringify(geometry));
-            formData.append('nilai', nilai);
-
-            isFeatureSaving = true;
-            fetch('layer_groups_choropleth/save_feature.php', { method: 'POST', body: formData })
-                .then(res => parseJsonResponse(res, 'layer_groups_choropleth/save_feature.php'))
-                .then(data => {
-                    if (data.status === 'success') {
-                        showMessage('✅ Fitur berhasil disimpan', 'bg-green-600 text-white');
-                        loadFeatures(true);
-                        clearFeatureInput();
-                        closeNewFeatureModal(false);
-                    } else {
-                        removeSpatialFeatureLayer(layer, type);
-                        throw new Error(data.message || 'Gagal menyimpan fitur');
-                    }
-                })
-                .catch(err => {
-                    removeSpatialFeatureLayer(layer, type);
-                    showMessage(err.message || 'Gagal menyimpan fitur', 'bg-red-600 text-white');
-                })
-                .finally(() => {
-                    isFeatureSaving = false;
-                });
-        }
-
-        function saveNewFeatureFromModal() {
-            const layer = pendingNewFeatureLayer;
-
-            if (!layer) {
-                showMessage('Tidak ada fitur baru untuk disimpan', 'bg-red-600 text-white');
-                return;
-            }
-
-            if (!document.getElementById('newFeatureName').value.trim()) {
-                showMessage('Nama objek wajib diisi', 'bg-red-600 text-white');
-                return;
-            }
-
-            document.getElementById('featureStatus').value = document.getElementById('newFeatureStatus').value;
-            saveFeature(layer);
-        }
-
-        function resetSpatialDraft(type) {
-            const measureField = document.getElementById('modeMeasure');
-            measureField.value = '';
-
-            if (pendingNewFeatureLayer && document.getElementById('featureType').value === type) {
-                closeNewFeatureModal(true);
-                return;
-            }
-
-            pendingShape = null;
-            pendingNewFeatureLayer = null;
-            updateFeatureMeasurePreview();
-            showMessage(`Draft ${type === 'polyline' ? 'jalan' : 'polygon'} dibersihkan`, 'bg-slate-700 text-white');
-        }
-
-        function openFeatureEditor(id) {
-            const layer = getFeatureLayerById(id);
-            if (!layer || !layer.featureData) {
-                showMessage('Fitur tidak ditemukan', 'bg-red-600 text-white');
-                return;
-            }
-
-            if (editingFeatureId && featureLayerMap[editingFeatureId] && featureLayerMap[editingFeatureId].editing) {
-                featureLayerMap[editingFeatureId].editing.disable();
-                editingFeatureId = null;
-            }
-
-            const feature = layer.featureData;
-            const modal = document.getElementById('featureModal');
-            document.getElementById('editFeatureId').value = feature.id;
-            document.getElementById('editFeatureName').value = feature.nama_objek;
-            document.getElementById('editFeatureKategori').value = feature.kategori;
-            document.getElementById('editFeatureType').value = feature.type;
-            document.getElementById('editFeatureStatus').innerHTML = buildFeatureStatusOptions(feature.type);
-            document.getElementById('editFeatureStatus').value = feature.status_objek;
-            document.getElementById('editFeatureMeasure').value = feature.type === 'polyline'
-                ? formatMeters(Number(feature.nilai_ukur))
-                : formatSquareMeters(Number(feature.nilai_ukur));
-            modal.classList.remove('hidden');
-            modal.classList.add('flex');
-            suppressAutoReload = true;
-        }
-
-        function closeFeatureEditor() {
-            if (editingFeatureId && featureLayerMap[editingFeatureId] && featureLayerMap[editingFeatureId].editing) {
-                featureLayerMap[editingFeatureId].editing.disable();
-                editingFeatureId = null;
-            }
-
-            const modal = document.getElementById('featureModal');
-            modal.classList.add('hidden');
-            modal.classList.remove('flex');
-            suppressAutoReload = !!document.querySelector('[id^="edit-mode-"]:not(.hidden)') || !!editingFeatureId;
-        }
-
-        function collectFeatureFormData(id, layer) {
-            const feature = layer.featureData;
-            const type = feature.type;
-            const nama = document.getElementById('editFeatureName').value.trim();
-            const kategori = document.getElementById('editFeatureKategori').value.trim();
-            const status = document.getElementById('editFeatureStatus').value;
-            const geometry = JSON.stringify(getFeatureGeometry(layer));
-            const nilai = type === 'polyline' ? calculatePolylineLength(layer) : calculatePolygonArea(layer);
-
-            return { id, nama, kategori, status, type, geometry, nilai };
-        }
-
-        function saveFeatureAttributes() {
-            const id = Number(document.getElementById('editFeatureId').value);
-            const layer = getFeatureLayerById(id);
-
-            if (!layer) {
-                showMessage('Fitur tidak ditemukan', 'bg-red-600 text-white');
-                return;
-            }
-
-            const payload = collectFeatureFormData(id, layer);
-            if (!payload.nama) {
-                showMessage('Nama objek wajib diisi', 'bg-red-600 text-white');
-                return;
-            }
-
-            const formData = new FormData();
-            Object.entries(payload).forEach(([key, value]) => formData.append(key, value));
-
-            fetch('layer_groups_choropleth/update_feature.php', { method: 'POST', body: formData })
-                .then(res => parseJsonResponse(res, 'layer_groups_choropleth/update_feature.php'))
-                .then(data => {
-                    if (data.status === 'success') {
-                        layer.featureData.nama_objek = payload.nama;
-                        layer.featureData.kategori = payload.kategori;
-                        layer.featureData.status_objek = payload.status;
-                        layer.featureData.nilai_ukur = payload.nilai;
-                        updateFeatureLayerStyle(layer, payload.type, payload.status);
-                        layer.bindPopup(getFeaturePopup(layer.featureData));
-                        document.getElementById('editFeatureMeasure').value = payload.type === 'polyline'
-                            ? formatMeters(payload.nilai)
-                            : formatSquareMeters(payload.nilai);
-                        showMessage('✅ Atribut fitur diperbarui', 'bg-green-600 text-white');
-                        loadFeatures(true);
-                    } else {
-                        throw new Error(data.message || 'Gagal menyimpan perubahan');
-                    }
-                })
-                .catch(err => showMessage(err.message || 'Gagal menyimpan perubahan', 'bg-red-600 text-white'));
-        }
-
-        function toggleFeatureGeometryEditing(id) {
-            const layer = getFeatureLayerById(id);
-            if (!layer) {
-                showMessage('Fitur tidak ditemukan', 'bg-red-600 text-white');
-                return;
-            }
-
-            if (!layer.editing || typeof layer.editing.enable !== 'function') {
-                showMessage('Edit geometri tidak didukung untuk layer ini', 'bg-red-600 text-white');
-                return;
-            }
-
-            if (editingFeatureId === id) {
-                layer.editing.disable();
-                editingFeatureId = null;
-                suppressAutoReload = !!document.querySelector('[id^="edit-mode-"]:not(.hidden)');
-                showMessage('Mode edit geometri dimatikan', 'bg-slate-700 text-white');
-                return;
-            }
-
-            if (editingFeatureId && featureLayerMap[editingFeatureId] && featureLayerMap[editingFeatureId].editing) {
-                featureLayerMap[editingFeatureId].editing.disable();
-            }
-
-            layer.editing.enable();
-            editingFeatureId = id;
-            suppressAutoReload = true;
-            showMessage('Geser titik vertex lalu klik Simpan Geometri', 'bg-emerald-600 text-white');
-        }
-
-        function saveFeatureGeometry(id) {
-            const layer = getFeatureLayerById(id);
-            if (!layer || !layer.featureData) {
-                showMessage('Fitur tidak ditemukan', 'bg-red-600 text-white');
-                return;
-            }
-
-            if (layer.editing && typeof layer.editing.disable === 'function') {
-                layer.editing.disable();
-            }
-            editingFeatureId = null;
-
-            const payload = collectFeatureFormData(id, layer);
-            const formData = new FormData();
-            Object.entries(payload).forEach(([key, value]) => formData.append(key, value));
-
-            fetch('layer_groups_choropleth/update_feature.php', { method: 'POST', body: formData })
-                .then(res => parseJsonResponse(res, 'layer_groups_choropleth/update_feature.php'))
-                .then(data => {
-                    if (data.status === 'success') {
-                        layer.featureData.geometry_data = JSON.parse(payload.geometry);
-                        layer.featureData.nilai_ukur = payload.nilai;
-                        updateFeatureLayerStyle(layer, payload.type, payload.status);
-                        layer.setLatLngs(layer.featureData.geometry_data);
-                        layer.bindPopup(getFeaturePopup(layer.featureData));
-                        suppressAutoReload = !!document.querySelector('[id^="edit-mode-"]:not(.hidden)');
-                        document.getElementById('editFeatureMeasure').value = payload.type === 'polyline'
-                            ? formatMeters(payload.nilai)
-                            : formatSquareMeters(payload.nilai);
-                        showMessage('✅ Geometri fitur diperbarui', 'bg-green-600 text-white');
-                        loadFeatures(true);
-                    } else {
-                        throw new Error(data.message || 'Gagal menyimpan geometri');
-                    }
-                })
-                .catch(err => showMessage(err.message || 'Gagal menyimpan geometri', 'bg-red-600 text-white'));
-        }
-
-        function deleteFeature(id) {
-            if (!confirm('Hapus fitur ini dari database?')) return;
-
-            const layer = getFeatureLayerById(id);
-            const formData = new FormData();
-            formData.append('id', id);
-
-            fetch('layer_groups_choropleth/delete_feature.php', { method: 'POST', body: formData })
-                .then(res => parseJsonResponse(res, 'layer_groups_choropleth/delete_feature.php'))
-                .then(data => {
-                    if (data.status === 'success') {
-                        if (layer) removeSpatialFeatureLayer(layer, layer.featureType || 'polyline');
-                        delete featureLayerMap[id];
-                        featureRecords = featureRecords.filter(feature => Number(feature.id) !== Number(id));
-                        renderInputRegistry();
-                        if (editingFeatureId === id) editingFeatureId = null;
-                        closeFeatureEditor();
-                        showMessage('🗑️ Fitur berhasil dihapus', 'bg-orange-600 text-white');
-                    } else {
-                        throw new Error(data.message || 'Gagal menghapus fitur');
-                    }
-                })
-                .catch(err => showMessage(err.message || 'Gagal menghapus fitur', 'bg-red-600 text-white'));
-        }
-
-        function startDraw() {
-            const type = document.getElementById('featureType').value;
-            const status = document.getElementById('featureStatus').value;
-
-            if (appMode !== 'polyline' && appMode !== 'polygon') {
-                showMessage('Pilih mode Polyline atau Polygon dulu', 'bg-slate-700 text-white');
-                return;
-            }
-
-            if (!status) {
-                showMessage('Pilih status terlebih dahulu', 'bg-red-600 text-white');
-                return;
-            }
-
-            const shapeOptions = type === 'polyline'
-                ? {
-                    color: getFeatureStatusColor('polyline', status),
-                    weight: 5
-                }
-                : {
-                    color: getFeatureStatusColor('polygon', status),
-                    fillColor: getFeatureStatusColor('polygon', status),
-                    fillOpacity: 0.25,
-                    weight: 3
-                };
-
-            const toolbar = document.querySelector(type === 'polyline' ? '.leaflet-draw-draw-polyline' : '.leaflet-draw-draw-polygon');
-            if (toolbar) {
-                isFeatureDrawing = true;
-                suppressAutoReload = true;
-                map.closePopup();
-                toolbar.click();
-                return;
-            }
-
-            // Fallback: aktifkan handler draw langsung jika tombol toolbar tidak ditemukan.
-            if (activeDrawHandler && typeof activeDrawHandler.disable === 'function') {
-                activeDrawHandler.disable();
-            }
-
-            activeDrawHandler = type === 'polyline'
-                ? new L.Draw.Polyline(map, { shapeOptions })
-                : new L.Draw.Polygon(map, { allowIntersection: false, showArea: true, shapeOptions });
-
-            isFeatureDrawing = true;
-            suppressAutoReload = true;
-            map.closePopup();
-            activeDrawHandler.enable();
-
-            showMessage('Mode gambar aktif, klik pada peta untuk mulai menggambar', 'bg-indigo-600 text-white');
-        }
-
-        map.on(L.Draw.Event.DRAWSTOP, function() {
-            if (activeDrawHandler && typeof activeDrawHandler.disable === 'function') {
-                activeDrawHandler.disable();
-                activeDrawHandler = null;
-            }
-            isFeatureDrawing = false;
-            suppressAutoReload = !!document.querySelector('[id^="edit-mode-"]:not(.hidden)');
-        });
-
-        map.on(L.Draw.Event.CREATED, function(event) {
-            let { layerType, layer } = event;
-            if (layerType === 'marker') {
-                const latlng = layer.getLatLng();
-                openNewLocationPopup(latlng.lat, latlng.lng);
-                return;
-            }
-
-            if (layerType === 'circlemarker') {
-                showMessage('Circle marker dinonaktifkan', 'bg-amber-600 text-white');
-                return;
-            }
-
-            if (layerType === 'circle') {
-                layer = convertCircleToPolygon(layer);
-                layerType = 'polygon';
-            }
-
-            const activeType = (layerType === 'polyline') ? 'polyline' : 'polygon';
-            document.getElementById('featureType').value = activeType;
-
-            const statusSelect = document.getElementById('featureStatus');
-            statusSelect.innerHTML = buildFeatureStatusOptions(activeType);
-            if (!statusSelect.value && statusSelect.options.length > 0) {
-                statusSelect.selectedIndex = 0;
-            }
-
-            const color = getFeatureStatusColor(activeType, document.getElementById('featureStatus').value);
-            if (activeType === 'polyline') {
-                layer.setStyle({ color, weight: 5 });
-            } else {
-                layer.setStyle({ color, fillColor: color, fillOpacity: 0.25, weight: 3 });
-            }
-
-            pendingShape = layer;
-            addSpatialFeatureLayer(layer, activeType);
-            updateFeatureMeasurePreview();
-            isFeatureDrawing = false;
-            suppressAutoReload = !!document.querySelector('[id^="edit-mode-"]:not(.hidden)');
-            openNewFeatureModal(layer);
-        });
-
-        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-            attribution: '&copy; OpenStreetMap contributors'
-        }).addTo(map);
-
-        // Fungsi membuat ikon SVG berwarna
-        function createColoredIcon(color) {
-            return L.divIcon({
-                className: "custom-marker",
-                html: `<svg width="30" height="42" viewBox="0 0 24 24" fill="${color}" stroke="white" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M12 0C7.58 0 4 3.58 4 8c0 5.25 7 13 8 13s8-7.75 8-13c0-4.42-3.58-8-8-8zm0 11c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"/>
-                       </svg>`,
-                iconSize: [30, 42],
-                iconAnchor: [15, 42],
-                popupAnchor: [0, -40]
-            });
-        }
-
-        function setConnectionStatus(message, colorClass) {
-            const statusEl = document.getElementById('connectionStatus');
-            statusEl.innerText = message;
-            statusEl.className = `mt-1 text-[9px] font-bold uppercase tracking-wide ${colorClass}`;
-        }
-
-        function toggleMainPanel(forceState = null) {
-            const panelBody = document.getElementById('mainPanelBody');
-            const toggleIcon = document.getElementById('toggleMainPanelIcon');
-            const nextState = typeof forceState === 'boolean' ? forceState : !isMainPanelCollapsed;
-
-            isMainPanelCollapsed = nextState;
-            panelBody.classList.toggle('hidden', isMainPanelCollapsed);
-
-            if (isMainPanelCollapsed) {
-                toggleIcon.innerHTML = '<path d="m9 18 6-6-6-6"/>';
-            } else {
-                toggleIcon.innerHTML = '<path d="m15 18-6-6 6-6"/>';
-            }
-        }
-
-        function isSpbuBuka24Jam(status) {
-            return String(status || '').trim().toLowerCase() === 'ya';
-        }
-
-        function ensureSpbuLayerControl() {
-            if (spbuLayerControl) return;
-
-            spbuLayerControl = L.control.layers(null, {
-                'SPBU Buka 24 Jam': spbuBuka24JamLayer,
-                'SPBU Tidak Buka 24 Jam': spbuTidak24JamLayer
-            }, {
-                collapsed: true,
-                position: 'topleft'
-            }).addTo(map);
-        }
-
-        function ensureSpatialLayerControl() {
-            if (spatialLayerControl) return;
-
-            spatialLayerControl = L.control.layers(null, {
-                'Jalan': jalanLayerGroup,
-                'Polygon': polygonLayerGroup,
-                'Jalan Rusak': roadDamageLayer,
-                'Rumah Ibadah': rumahIbadahLayer,
-                'Penduduk Miskin': pendudukMiskinLayer,
-                'Verifikasi Lapangan': verifikasiLapanganLayer,
-                'Aduan Warga': aduanWargaLayer
-            }, {
-                collapsed: true,
-                position: 'topleft'
-            }).addTo(map);
-        }
-
-        function ensureLeafletUtilityControl() {
-            if (utilityControl) return;
-
-            utilityControl = L.control({ position: 'topleft' });
-            utilityControl.onAdd = function() {
-                const container = L.DomUtil.create('div', 'leaflet-bar');
-
-                function setUtilityModeActive(activeMode) {
-                    rumahIbadahBtn.classList.toggle('active', activeMode === 'rumahIbadah');
-                    pendudukMiskinBtn.classList.toggle('active', activeMode === 'pendudukMiskin');
-                    choroplethBtn.classList.toggle('active', activeMode === 'choropleth');
-                    roadDamageBtn.classList.toggle('active', activeMode === 'roadDamage');
-                    verifikasiBtn.classList.toggle('active', activeMode === 'verifikasiLapangan');
-                    aduanWargaBtn.classList.toggle('active', activeMode === 'aduanWarga');
-                }
-
-                const registryBtn = L.DomUtil.create('a', '', container);
-                registryBtn.href = '#';
-                registryBtn.id = 'leafletRegistryBtn';
-                registryBtn.title = 'Buka Registry';
-                registryBtn.innerHTML = 'Rg';
-
-                const layerBtn = L.DomUtil.create('a', '', container);
-                layerBtn.href = '#';
-                layerBtn.id = 'leafletLayerBtn';
-                layerBtn.title = 'Layer';
-                layerBtn.innerHTML = 'Ly';
-
-                const bantuanBtn = L.DomUtil.create('a', '', container);
-                bantuanBtn.href = '#';
-                bantuanBtn.id = 'leafletBantuanBtn';
-                bantuanBtn.title = 'Manajemen Bantuan';
-                bantuanBtn.innerHTML = 'Bn';
-
-                const rumahIbadahBtn = L.DomUtil.create('a', '', container);
-                rumahIbadahBtn.href = '#';
-                rumahIbadahBtn.id = 'leafletRumahIbadahBtn';
-                rumahIbadahBtn.title = 'Input Rumah Ibadah';
-                rumahIbadahBtn.innerHTML = 'Ri';
-
-                const pendudukMiskinBtn = L.DomUtil.create('a', '', container);
-                pendudukMiskinBtn.href = '#';
-                pendudukMiskinBtn.id = 'leafletPendudukMiskinBtn';
-                pendudukMiskinBtn.title = 'Input Penduduk Miskin';
-                pendudukMiskinBtn.innerHTML = 'Pm';
-
-                const choroplethBtn = L.DomUtil.create('a', '', container);
-                choroplethBtn.href = '#';
-                choroplethBtn.id = 'leafletChoroplethBtn';
-                choroplethBtn.title = 'Tampilkan Choropleth Kecamatan';
-                choroplethBtn.innerHTML = 'Ch';
-
-                const roadDamageBtn = L.DomUtil.create('a', '', container);
-                roadDamageBtn.href = '#';
-                roadDamageBtn.id = 'leafletRoadDamageBtn';
-                roadDamageBtn.title = 'Lapor Jalan Rusak';
-                roadDamageBtn.innerHTML = 'Jr';
-
-                const verifikasiBtn = L.DomUtil.create('a', '', container);
-                verifikasiBtn.href = '#';
-                verifikasiBtn.id = 'leafletVerifikasiBtn';
-                verifikasiBtn.title = 'Verifikasi Lapangan';
-                verifikasiBtn.innerHTML = 'Vf';
-
-                const aduanWargaBtn = L.DomUtil.create('a', '', container);
-                aduanWargaBtn.href = '#';
-                aduanWargaBtn.id = 'leafletAduanWargaBtn';
-                aduanWargaBtn.title = 'Aduan Warga';
-                aduanWargaBtn.innerHTML = 'Ad';
-
-                L.DomEvent.disableClickPropagation(container);
-
-                L.DomEvent.on(registryBtn, 'click', function(event) {
-                    L.DomEvent.stop(event);
-                    toggleInputRegistry();
-                });
-
-                L.DomEvent.on(layerBtn, 'click', function(event) {
-                    L.DomEvent.stop(event);
-                    toggleLayerDrawer();
-                });
-
-                L.DomEvent.on(bantuanBtn, 'click', function(event) {
-                    L.DomEvent.stop(event);
-                    toggleBantuanDrawer();
-                });
-
-                L.DomEvent.on(rumahIbadahBtn, 'click', function(event) {
-                    L.DomEvent.stop(event);
-                    setDataMode('rumahIbadah');
-                    toggleInputRegistry(false);
-                    setUtilityModeActive('rumahIbadah');
-                    showMessage('Mode rumah ibadah aktif. Klik peta untuk menambah lokasi.', 'bg-indigo-600 text-white');
-                });
-
-                L.DomEvent.on(pendudukMiskinBtn, 'click', function(event) {
-                    L.DomEvent.stop(event);
-                    setDataMode('pendudukMiskin');
-                    toggleInputRegistry(false);
-                    setUtilityModeActive('pendudukMiskin');
-                    showMessage('Mode penduduk miskin aktif. Klik peta untuk menambah lokasi.', 'bg-rose-600 text-white');
-                });
-
-                L.DomEvent.on(choroplethBtn, 'click', function(event) {
-                    L.DomEvent.stop(event);
-                    setDataMode('choropleth');
-                    toggleInputRegistry(false);
-                    setUtilityModeActive('choropleth');
-                    showMessage('Mode choropleth aktif. Klik kecamatan untuk melihat populasi.', 'bg-slate-700 text-white');
-                });
-
-                L.DomEvent.on(roadDamageBtn, 'click', function(event) {
-                    L.DomEvent.stop(event);
-                    setDataMode('roadDamage');
-                    toggleInputRegistry(false);
-                    setUtilityModeActive('roadDamage');
-                    showMessage('Mode laporan jalan rusak aktif. Klik peta untuk menandai lokasi.', 'bg-red-600 text-white');
-                });
-
-                L.DomEvent.on(verifikasiBtn, 'click', function(event) {
-                    L.DomEvent.stop(event);
-                    setDataMode('verifikasiLapangan');
-                    toggleInputRegistry(false);
-                    setUtilityModeActive('verifikasiLapangan');
-                    showMessage('Mode verifikasi lapangan aktif. Klik peta untuk mencatat hasil cek.', 'bg-emerald-600 text-white');
-                });
-
-                L.DomEvent.on(aduanWargaBtn, 'click', function(event) {
-                    L.DomEvent.stop(event);
-                    setDataMode('aduanWarga');
-                    toggleInputRegistry(false);
-                    setUtilityModeActive('aduanWarga');
-                    showMessage('Mode aduan warga aktif. Klik peta untuk mencatat laporan.', 'bg-fuchsia-600 text-white');
-                });
-
-                return container;
-            };
-
-            utilityControl.addTo(map);
-        }
-
-        function clearAllMarkers() {
-            spbuBuka24JamLayer.clearLayers();
-            spbuTidak24JamLayer.clearLayers();
-            locationLayerMap = {};
-        }
-
-        function createSnapshotHash(locations) {
-            const normalized = locations
-                .map(loc => ({
-                    id: Number(loc.id),
-                    nama: loc.nama,
-                    nomor: loc.nomor,
-                    buka_24jam: loc.buka_24jam,
-                    latitude: Number(loc.latitude),
-                    longitude: Number(loc.longitude)
-                }))
-                .sort((a, b) => a.id - b.id);
-
-            return JSON.stringify(normalized);
-        }
-
-        // Memuat semua data dari database
-        function loadMarkers(options = {}) {
-            const { silent = false, force = false } = options;
-
-            if (isSyncing) return;
-            if (!force && (document.hidden || suppressAutoReload)) return;
-            isSyncing = true;
-
-            if (!silent) {
-                setConnectionStatus("🔄 Memuat data...", "text-blue-500");
-            }
-
-            fetch('get_location.php')
-                .then(res => {
-                    if (!res.ok) throw new Error('HTTP Error: ' + res.status);
-                    return res.text(); // Ambil teks dulu untuk debug jika ada error PHP
-                })
-                .then(text => {
-                    try {
-                        const data = JSON.parse(text);
-                        if (!Array.isArray(data)) {
-                            if (data && data.status === 'error') {
-                                throw new Error(data.message || 'Terjadi error pada server');
-                            }
-                            throw new Error('Format data bukan array');
-                        }
-
-                        locationRecords = data;
-                        const currentHash = createSnapshotHash(data);
-                        if (!force && currentHash === latestSnapshotHash) {
-                            if (!silent) {
-                                setConnectionStatus("✅ Terhubung ke database", "text-green-600");
-                            }
-                            return;
-                        }
-
-                        latestSnapshotHash = currentHash;
-                        clearAllMarkers();
-                        document.getElementById('totalCount').innerText = data.length;
-                        
-                        data.forEach(loc => {
-                            // Konversi lat/lng ke float (MySQL Decimal sering dikirim sebagai string)
-                            const lat = parseFloat(loc.latitude);
-                            const lng = parseFloat(loc.longitude);
-                            
-                            if (isNaN(lat) || isNaN(lng)) return;
-
-                            const isOpen24 = isSpbuBuka24Jam(loc.buka_24jam);
-                            const color = isOpen24 ? '#16a34a' : '#dc2626';
-                            const targetLayer = isOpen24 ? spbuBuka24JamLayer : spbuTidak24JamLayer;
-                            
-                            const marker = L.marker([lat, lng], {
-                                icon: createColoredIcon(color),
-                                draggable: true
-                            }).addTo(targetLayer);
-                            locationLayerMap[loc.id] = marker;
-                            marker.locationData = loc;
-
-                            // Event Drag & Drop untuk Update Lokasi
-                            marker.on('dragend', function(event) {
-                                const newPos = event.target.getLatLng();
-                                updateMarkerLocation(loc.id, newPos.lat, newPos.lng);
-                            });
-
-                            marker.bindPopup(getPopupContent(loc));
-                        });
-
-                        renderInputRegistry();
-
-                        setConnectionStatus("✅ Terhubung ke database", "text-green-600");
-                    } catch (e) {
-                        console.error("JSON Parse Error:", e, "Raw text:", text);
-                        throw new Error('Gagal membaca data dari server (JSON Error)');
-                    }
-                })
-                .catch(err => {
-                    console.error("Fetch Error:", err);
-                    setConnectionStatus(`❌ ${err.message || 'Gagal terhubung ke database'}`, "text-red-600");
-                    
-                    // Jika di Canvas Preview, berikan info spesifik
-                    if (window.location.hostname === "") {
-                        console.warn("Info: Jalankan proyek ini di Laragon (http://localhost/...) agar PHP dapat berjalan.");
-                    }
-                })
-                .finally(() => {
-                    isSyncing = false;
-                });
-        }
-
-        // HTML untuk isi Popup (View & Edit Mode)
-        function getPopupContent(loc) {
-            const statusClass = isSpbuBuka24Jam(loc.buka_24jam) ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700';
-            
-            return `
-                <div class="w-full">
-                    <!-- Mode Tampilan -->
-                    <div id="view-mode-${loc.id}" class="p-4">
-                        <h3 class="font-bold text-lg text-slate-800 leading-tight">${loc.nama}</h3>
-                        <p class="text-sm text-slate-600 mt-1 italic">Telp: ${loc.nomor}</p>
-                        <div class="mt-2">
-                            <span class="inline-block px-2 py-1 rounded text-[10px] font-bold uppercase tracking-wide ${statusClass}">
-                                24 Jam: ${loc.buka_24jam}
-                            </span>
-                        </div>
-                        <div class="mt-4 flex gap-2 border-t pt-3">
-                            <button onclick="toggleEdit(${loc.id})" class="flex-1 bg-indigo-50 text-indigo-600 py-2 rounded text-xs font-bold hover:bg-indigo-100 transition">Edit</button>
-                            <button onclick="deleteData(${loc.id})" class="flex-1 bg-red-50 text-red-600 py-2 rounded text-xs font-bold hover:bg-red-100 transition">Hapus</button>
-                        </div>
-                    </div>
-
-                    <!-- Mode Edit -->
-                    <div id="edit-mode-${loc.id}" class="hidden p-4 bg-slate-50">
-                        <h4 class="font-bold text-[10px] text-slate-400 mb-3 uppercase tracking-widest border-b pb-1">Update Informasi</h4>
-                        <div class="space-y-3">
-                            <input type="text" id="edit_nama_${loc.id}" value="${loc.nama}" class="w-full border p-2 text-sm rounded outline-none focus:ring-2 focus:ring-indigo-500 shadow-sm">
-                            <input type="text" id="edit_nomor_${loc.id}" value="${loc.nomor}" class="w-full border p-2 text-sm rounded outline-none focus:ring-2 focus:ring-indigo-500 shadow-sm">
-                            <select id="edit_status_${loc.id}" class="w-full border p-2 text-sm rounded outline-none focus:ring-2 focus:ring-indigo-500 shadow-sm">
-                                <option value="Ya" ${loc.buka_24jam === 'Ya' ? 'selected' : ''}>Buka 24 Jam</option>
-                                <option value="Tidak" ${loc.buka_24jam === 'Tidak' ? 'selected' : ''}>Tidak</option>
-                            </select>
-                            <div class="flex gap-2 pt-1">
-                                <button onclick="saveEdit(${loc.id})" class="flex-1 bg-green-600 text-white py-2 rounded text-xs font-bold shadow-md hover:bg-green-700 transition">Simpan</button>
-                                <button onclick="toggleEdit(${loc.id})" class="flex-1 bg-slate-300 text-slate-700 py-2 rounded text-xs font-bold hover:bg-slate-400 transition">Batal</button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            `;
-        }
-
-        // Fungsi Update Koordinat (Drag)
-        function updateMarkerLocation(id, lat, lng) {
-            const formData = new FormData();
-            formData.append('id', id);
-            formData.append('lat', lat);
-            formData.append('lng', lng);
-
-            fetch('update_coords.php', { method: 'POST', body: formData })
-                .then(res => parseJsonResponse(res, 'update_coords.php'))
-                .then(data => {
-                    if(data.status === 'success') showMessage("📍 Lokasi diperbarui!", "bg-green-600 text-white");
-                })
-                .catch(err => showMessage("Gagal simpan lokasi", "bg-red-600 text-white"));
-        }
-
-        // Fungsi Hapus Data
-        function deleteData(id) {
-            if(!confirm("Hapus data ini dari database?")) return;
-            const formData = new FormData();
-            formData.append('id', id);
-
-            fetch('delete_location.php', { method: 'POST', body: formData })
-                .then(res => parseJsonResponse(res, 'delete_location.php'))
-                .then(data => {
-                    if(data.status === 'success') {
-                        showMessage("🗑️ Data berhasil dihapus", "bg-orange-600 text-white");
-                        loadMarkers({ force: true });
-                    }
-                })
-                .catch(err => showMessage("Gagal hapus data", "bg-red-600 text-white"));
-        }
-
-        function toggleEdit(id) {
-            document.getElementById(`view-mode-${id}`).classList.toggle('hidden');
-            document.getElementById(`edit-mode-${id}`).classList.toggle('hidden');
-
-            // Tahan auto refresh saat ada popup edit terbuka agar input tidak tertimpa.
-            suppressAutoReload = !!document.querySelector('[id^="edit-mode-"]:not(.hidden)');
-        }
-
-        // Fungsi Update Atribut
-        function saveEdit(id) {
-            const nama = document.getElementById(`edit_nama_${id}`).value;
-            const nomor = document.getElementById(`edit_nomor_${id}`).value;
-            const status = document.getElementById(`edit_status_${id}`).value;
-
-            if(!nama || !nomor) return alert("Field tidak boleh kosong!");
-
-            const formData = new FormData();
-            formData.append('id', id);
-            formData.append('nama', nama);
-            formData.append('nomor', nomor);
-            formData.append('status', status);
-
-            fetch('update_details.php', { method: 'POST', body: formData })
-                .then(res => parseJsonResponse(res, 'update_details.php'))
-                .then(data => {
-                    if(data.status === 'success') {
-                        suppressAutoReload = false;
-                        showMessage("✅ Data berhasil diperbarui", "bg-indigo-600 text-white");
-                        loadMarkers({ force: true });
-                    }
-                })
-                .catch(err => showMessage("Gagal update data", "bg-red-600 text-white"));
-        }
-
-        // Klik Peta untuk Input Baru
-        map.on('click', function(e) {
-            if (isFeatureDrawing) return;
-
-            if (appMode === 'roadDamage') {
-                openRoadDamageModal(e.latlng.lat, e.latlng.lng);
-                return;
-            }
-
-            if (appMode === 'verifikasiLapangan') {
-                openVerifikasiLapanganModal(e.latlng.lat, e.latlng.lng);
-                return;
-            }
-
-            if (appMode === 'aduanWarga') {
-                openAduanWargaModal(e.latlng.lat, e.latlng.lng);
-                return;
-            }
-
-            if (appMode === 'rumahIbadah') {
-                openRumahIbadahModal(e.latlng.lat, e.latlng.lng);
-                return;
-            }
-
-            if (appMode === 'pendudukMiskin') {
-                openPendudukMiskinModal(e.latlng.lat, e.latlng.lng);
-                return;
-            }
-
-            if (appMode !== 'point') return;
-
-            openNewLocationPopup(e.latlng.lat, e.latlng.lng);
-        });
-
-        function saveNew(lat, lng) {
-            const nama = document.getElementById('new_nama').value;
-            const nomor = document.getElementById('new_nomor').value;
-            const status = document.getElementById('new_status').value;
-
-            if(!nama || !nomor) return alert("Mohon lengkapi semua field.");
-
-            const formData = new FormData();
-            formData.append('nama', nama);
-            formData.append('nomor', nomor);
-            formData.append('status', status);
-            formData.append('lat', lat);
-            formData.append('lng', lng);
-
-            fetch('save_location.php', { method: 'POST', body: formData })
-                .then(res => parseJsonResponse(res, 'save_location.php'))
-                .then(data => {
-                    if(data.status === 'success') {
-                        showMessage("✨ Berhasil disimpan ke database!", "bg-green-600 text-white");
-                        map.closePopup();
-                        loadMarkers({ force: true });
-                    }
-                })
-                .catch(err => showMessage("Gagal menyimpan ke server", "bg-red-600 text-white"));
-        }
-
-        function startAutoRefresh() {
-            if (autoRefreshTimer) clearInterval(autoRefreshTimer);
-            autoRefreshTimer = setInterval(() => {
-                loadMarkers({ silent: true });
-                loadFeatures();
-                loadRumahIbadah();
-                loadPendudukMiskin();
-                loadVerifikasiLapangan();
-                loadAduanWarga();
-            }, REFRESH_INTERVAL_MS);
-        }
-
-        document.addEventListener('visibilitychange', () => {
-            if (!document.hidden) {
-                loadMarkers({ silent: true, force: true });
-                loadFeatures(true);
-                loadRumahIbadah(true);
-                loadPendudukMiskin(true);
-                loadVerifikasiLapangan(true);
-                loadAduanWarga(true);
-            }
-        });
-
-        // Fungsi Notifikasi Toast
-        function showMessage(text, classes) {
-            const el = document.getElementById('statusMsg');
-            el.innerText = text;
-            el.className = `custom-msg p-4 rounded-lg shadow-2xl font-medium ${classes}`;
-            el.style.display = 'block';
-            setTimeout(() => { el.style.display = 'none'; }, 3000);
-        }
-
-        async function parseJsonResponse(res, endpointName) {
-            const text = await res.text();
-
-            if (!text || !text.trim()) {
-                throw new Error(`Respons kosong dari ${endpointName}`);
-            }
-
-            let data;
-            try {
-                data = JSON.parse(text);
-            } catch (error) {
-                throw new Error(`Respons ${endpointName} bukan JSON valid: ${text.slice(0, 160)}`);
-            }
-
-            if (!res.ok) {
-                throw new Error(data.message || `HTTP ${res.status} dari ${endpointName}`);
-            }
-
-            return data;
-        }
-
-        window.onload = function () {
-            ensureLeafletUtilityControl();
-            bindLayerDrawerEvents();
-            updateDrawControl();
-            setDataMode('view');
-            enforceRegistryDateRange(false);
-            loadMarkers({ force: true });
-            loadFeatures(true);
-            loadRumahIbadah(true);
-            loadPendudukMiskin(true);
-            loadRoadDamage(true);
-            loadVerifikasiLapangan(true);
-            loadAduanWarga(true);
-            loadExternalRoadNetwork(true);
-            startAutoRefresh();
-        };
-
-        const toggleEditModeBtn = document.getElementById('toggleEditModeBtn');
-        if (toggleEditModeBtn) {
-            toggleEditModeBtn.addEventListener('click', () => {
-                setEditModeEnabled(!isEditModeEnabled);
-            });
-        }
-        document.getElementById('modeViewBtn').addEventListener('click', () => setDataMode('view'));
-        document.getElementById('modePointBtn').addEventListener('click', () => setDataMode('point'));
-        document.getElementById('modePolylineBtn').addEventListener('click', () => setDataMode('polyline'));
-        document.getElementById('modePolygonBtn').addEventListener('click', () => setDataMode('polygon'));
-        document.getElementById('modeRumahIbadahBtn').addEventListener('click', () => setDataMode('rumahIbadah'));
-        document.getElementById('modePendudukMiskinBtn').addEventListener('click', () => setDataMode('pendudukMiskin'));
-        document.getElementById('modeChoroplethBtn').addEventListener('click', () => setDataMode('choropleth'));
-        document.getElementById('modeRoadDamageBtn').addEventListener('click', () => setDataMode('roadDamage'));
-        const modeVerifikasiBtn = document.getElementById('modeVerifikasiBtn');
-        if (modeVerifikasiBtn) {
-            modeVerifikasiBtn.addEventListener('click', () => setDataMode('verifikasiLapangan'));
-        }
-        const modeAduanWargaBtn = document.getElementById('modeAduanWargaBtn');
-        if (modeAduanWargaBtn) {
-            modeAduanWargaBtn.addEventListener('click', () => setDataMode('aduanWarga'));
-        }
-        const miniModePointBtn = document.getElementById('miniModePointBtn');
-        if (miniModePointBtn) {
-            miniModePointBtn.addEventListener('click', () => {
-                setDataMode('point');
-                showMessage('Klik peta untuk menambah point SPBU', 'bg-indigo-600 text-white');
-            });
-        }
-        const miniModePolylineBtn = document.getElementById('miniModePolylineBtn');
-        if (miniModePolylineBtn) {
-            miniModePolylineBtn.addEventListener('click', () => {
-                setDataMode('polyline');
-                startDraw();
-            });
-        }
-        const miniModePolygonBtn = document.getElementById('miniModePolygonBtn');
-        if (miniModePolygonBtn) {
-            miniModePolygonBtn.addEventListener('click', () => {
-                setDataMode('polygon');
-                startDraw();
-            });
-        }
-        const miniModeRumahIbadahBtn = document.getElementById('miniModeRumahIbadahBtn');
-        if (miniModeRumahIbadahBtn) {
-            miniModeRumahIbadahBtn.addEventListener('click', () => {
-                setDataMode('rumahIbadah');
-                showMessage('Klik peta untuk menambah rumah ibadah', 'bg-indigo-600 text-white');
-            });
-        }
-        const miniModePendudukMiskinBtn = document.getElementById('miniModePendudukMiskinBtn');
-        if (miniModePendudukMiskinBtn) {
-            miniModePendudukMiskinBtn.addEventListener('click', () => {
-                setDataMode('pendudukMiskin');
-                showMessage('Klik peta untuk menambah penduduk miskin', 'bg-indigo-600 text-white');
-            });
-        }
-        const miniModeVerifikasiBtn = document.getElementById('miniModeVerifikasiBtn');
-        if (miniModeVerifikasiBtn) {
-            miniModeVerifikasiBtn.addEventListener('click', () => {
-                setDataMode('verifikasiLapangan');
-                showMessage('Klik peta untuk verifikasi lapangan', 'bg-emerald-600 text-white');
-            });
-        }
-        const miniModeAduanWargaBtn = document.getElementById('miniModeAduanWargaBtn');
-        if (miniModeAduanWargaBtn) {
-            miniModeAduanWargaBtn.addEventListener('click', () => {
-                setDataMode('aduanWarga');
-                showMessage('Klik peta untuk membuat aduan warga', 'bg-fuchsia-600 text-white');
-            });
-        }
-        const toggleRegistryDrawerBtn = document.getElementById('toggleRegistryDrawerBtn');
-        if (toggleRegistryDrawerBtn) {
-            toggleRegistryDrawerBtn.addEventListener('click', () => toggleInputRegistry());
-        }
-        const toggleBantuanDrawerBtn = document.getElementById('toggleBantuanDrawerBtn');
-        if (toggleBantuanDrawerBtn) {
-            toggleBantuanDrawerBtn.addEventListener('click', () => toggleBantuanDrawer());
-        }
-        const registryDrawerCloseBtn = document.getElementById('registryDrawerCloseBtn');
-        if (registryDrawerCloseBtn) {
-            registryDrawerCloseBtn.addEventListener('click', () => toggleInputRegistry(false));
-        }
-        const bantuanDrawerCloseBtn = document.getElementById('bantuanDrawerCloseBtn');
-        if (bantuanDrawerCloseBtn) {
-            bantuanDrawerCloseBtn.addEventListener('click', () => toggleBantuanDrawer(false));
-        }
-        const bantuanRumahFilter = document.getElementById('bantuanRumahFilter');
-        if (bantuanRumahFilter) {
-            bantuanRumahFilter.addEventListener('change', renderBantuanDrawer);
-        }
-        const bantuanStatusFilter = document.getElementById('bantuanStatusFilter');
-        if (bantuanStatusFilter) {
-            bantuanStatusFilter.addEventListener('change', renderBantuanDrawer);
-        }
-        const bantuanSearchQuery = document.getElementById('bantuanSearchQuery');
-        if (bantuanSearchQuery) {
-            bantuanSearchQuery.addEventListener('input', renderBantuanDrawer);
-        }
-        const toggleMainPanelBtn = document.getElementById('toggleMainPanelBtn');
-        if (toggleMainPanelBtn) {
-            toggleMainPanelBtn.addEventListener('click', () => toggleMainPanel());
-        }
-        document.getElementById('drawStatus').addEventListener('change', () => {
-            const type = document.getElementById('featureType').value;
-            document.getElementById('featureStatus').value = document.getElementById('drawStatus').value;
-            if (type === 'polyline' || type === 'polygon') {
-                updateDrawControl(type);
-            }
-        });
-        document.getElementById('runActionBtn').addEventListener('click', () => {
-            if (appMode === 'polyline' || appMode === 'polygon') {
-                startDraw();
-                return;
-            }
-
-            if (appMode === 'point') {
-                showMessage('Klik peta untuk menambah point SPBU', 'bg-indigo-600 text-white');
-            }
-        });
-        document.getElementById('clearDraftBtn').addEventListener('click', () => {
-            if (appMode === 'polyline' || appMode === 'polygon') {
-                resetSpatialDraft(appMode);
-            }
-        });
-        document.getElementById('closeFeatureModalBtn').addEventListener('click', closeFeatureEditor);
-        document.getElementById('saveFeatureAttrBtn').addEventListener('click', saveFeatureAttributes);
-        document.getElementById('toggleFeatureGeometryBtn').addEventListener('click', () => {
-            const id = Number(document.getElementById('editFeatureId').value);
-            toggleFeatureGeometryEditing(id);
-        });
-        document.getElementById('saveFeatureGeometryBtn').addEventListener('click', () => {
-            const id = Number(document.getElementById('editFeatureId').value);
-            saveFeatureGeometry(id);
-        });
-        document.getElementById('deleteFeatureBtn').addEventListener('click', () => {
-            const id = Number(document.getElementById('editFeatureId').value);
-            deleteFeature(id);
-        });
-        const registryUi = getRegistryUi();
-        if (registryUi.type) {
-            registryUi.type.addEventListener('change', renderInputRegistry);
-        }
-        if (registryUi.from) {
-            registryUi.from.addEventListener('change', () => {
-                enforceRegistryDateRange(true);
-                renderInputRegistry();
-            });
-        }
-        if (registryUi.to) {
-            registryUi.to.addEventListener('change', () => {
-                enforceRegistryDateRange(true);
-                renderInputRegistry();
-            });
-        }
-        const registryApplyFilterBtn = document.getElementById('registryApplyFilterBtn');
-        if (registryApplyFilterBtn) {
-            registryApplyFilterBtn.addEventListener('click', () => {
-                enforceRegistryDateRange(true);
-                renderInputRegistry();
-            });
-        }
-        const registryResetFilterBtn = document.getElementById('registryResetFilterBtn');
-        if (registryResetFilterBtn) {
-            registryResetFilterBtn.addEventListener('click', () => {
-                const ui = getRegistryUi();
-                if (ui.search) ui.search.value = '';
-                if (ui.type) ui.type.value = 'all';
-                if (ui.from) ui.from.value = '';
-                if (ui.to) ui.to.value = '';
-                enforceRegistryDateRange(false);
-                renderInputRegistry();
-            });
-        }
-        if (registryUi.search) {
-            registryUi.search.addEventListener('input', () => {
-                renderInputRegistry();
-            });
-            registryUi.search.addEventListener('keydown', (event) => {
-                if (event.key === 'Enter') {
-                    event.preventDefault();
-                    renderInputRegistry();
-                }
-            });
-        }
-        document.getElementById('featureModal').addEventListener('click', (event) => {
-            if (event.target.id === 'featureModal') closeFeatureEditor();
-        });
-        document.getElementById('closeNewFeatureModalBtn').addEventListener('click', () => closeNewFeatureModal(true));
-        document.getElementById('cancelNewFeatureBtn').addEventListener('click', () => closeNewFeatureModal(true));
-        document.getElementById('saveNewFeatureBtn').addEventListener('click', saveNewFeatureFromModal);
-        document.getElementById('newFeatureModal').addEventListener('click', (event) => {
-            if (event.target.id === 'newFeatureModal') closeNewFeatureModal(true);
-        });
-
-        document.getElementById('saveRumahIbadahBtn').addEventListener('click', saveRumahIbadah);
-        document.getElementById('cancelRumahIbadahBtn').addEventListener('click', closeRumahIbadahModal);
-        document.getElementById('closeRumahIbadahModalBtn').addEventListener('click', closeRumahIbadahModal);
-        document.getElementById('rumahIbadahRadius').addEventListener('input', (event) => syncRumahIbadahRadius(event.target.value));
-        document.getElementById('rumahIbadahModal').addEventListener('click', (event) => {
-            if (event.target.id === 'rumahIbadahModal') closeRumahIbadahModal();
-        });
-
-        document.getElementById('savePendudukMiskinBtn').addEventListener('click', savePendudukMiskin);
-        document.getElementById('cancelPendudukMiskinBtn').addEventListener('click', closePendudukMiskinModal);
-        document.getElementById('closePendudukMiskinModalBtn').addEventListener('click', closePendudukMiskinModal);
-        document.getElementById('pendudukMiskinModal').addEventListener('click', (event) => {
-            if (event.target.id === 'pendudukMiskinModal') closePendudukMiskinModal();
-        });
-
-        document.getElementById('saveVerifikasiLapanganBtn').addEventListener('click', saveVerifikasiLapangan);
-        document.getElementById('cancelVerifikasiLapanganBtn').addEventListener('click', closeVerifikasiLapanganModal);
-        document.getElementById('closeVerifikasiLapanganModalBtn').addEventListener('click', closeVerifikasiLapanganModal);
-        document.getElementById('verifikasiLapanganModal').addEventListener('click', (event) => {
-            if (event.target.id === 'verifikasiLapanganModal') closeVerifikasiLapanganModal();
-        });
-
-        document.getElementById('saveAduanWargaBtn').addEventListener('click', saveAduanWarga);
-        document.getElementById('cancelAduanWargaBtn').addEventListener('click', closeAduanWargaModal);
-        document.getElementById('closeAduanWargaModalBtn').addEventListener('click', closeAduanWargaModal);
-        document.getElementById('aduanWargaModal').addEventListener('click', (event) => {
-            if (event.target.id === 'aduanWargaModal') closeAduanWargaModal();
-        });
-
-        // Road Damage Modal Event Listeners
-        document.getElementById('saveRoadDamageBtn').addEventListener('click', saveRoadDamage);
-        document.getElementById('cancelRoadDamageBtn').addEventListener('click', closeRoadDamageModal);
-        document.getElementById('closeRoadDamageModalBtn').addEventListener('click', closeRoadDamageModal);
-        document.getElementById('roadDamageImage').addEventListener('change', (event) => {
-            const file = event.target.files[0];
-            const preview = document.getElementById('imagePreview');
-            const previewImg = document.getElementById('previewImg');
-            
-            if (file) {
-                const reader = new FileReader();
-                reader.onload = (e) => {
-                    previewImg.src = e.target.result;
-                    preview.classList.remove('hidden');
-                };
-                reader.readAsDataURL(file);
-            } else {
-                preview.classList.add('hidden');
-            }
-        });
-        document.getElementById('roadDamageModal').addEventListener('click', (event) => {
-            if (event.target.id === 'roadDamageModal') closeRoadDamageModal();
-        });
+                // 1. Parsil
+                const resParsel = await fetch('fitur_parsil_tanah/api/get_features.php');
+                const parsel = await resParsel.json();
+                document.getElementById('statParsel').textContent = `${parsel.length} bidang`;
+
+                // 2. SPBU
+                const resSpbu = await fetch('fitur_spbu/api/get_location.php');
+                const spbu = await resSpbu.json();
+                document.getElementById('statSpbu').textContent = `${spbu.length} lokasi`;
+
+                // 3. Jalan & Jalan Rusak
+                const resJalan = await fetch('fitur_jalan/api/get_features.php');
+                const jalan = await resJalan.json();
+                document.getElementById('statJalan').textContent = `${jalan.length} ruas`;
+
+                const resJalanRusak = await fetch('fitur_jalan/api/get_jalan_rusak.php');
+                const jalanRusak = await resJalanRusak.json();
+                document.getElementById('statJalanRusak').textContent = `${jalanRusak.length} titik`;
+
+                // 4. Ibadah & Warga Miskin
+                const resIbadah = await fetch('fitur_bantuan/api/get_rumah_ibadah.php');
+                const ibadah = await resIbadah.json();
+                document.getElementById('statIbadah').textContent = `${ibadah.length} titik`;
+
+                const resMiskin = await fetch('fitur_bantuan/api/get_penduduk_miskin.php');
+                const miskin = await resMiskin.json();
+                document.getElementById('statMiskin').textContent = `${miskin.length} KK`;
+
+            } catch (err) {
+                console.error("Gagal memuat stats:", err);
+                // Set fallback to 0
+                document.getElementById('statParsel').textContent = '0 bidang';
+                document.getElementById('statSpbu').textContent = '0 lokasi';
+                document.getElementById('statJalan').textContent = '0 ruas';
+                document.getElementById('statJalanRusak').textContent = '0 titik';
+                document.getElementById('statIbadah').textContent = '0 titik';
+                document.getElementById('statMiskin').textContent = '0 KK';
+            }
+        }
+
+        // Run fetch on load
+        fetchStats();
     </script>
 </body>
 </html>
\ No newline at end of file