commit c0aa8e09d59281d37a8c61f0d75dacb189a1e418
Author: Arif1031 <d1041231031@student.untan.ac.id>
Date:   Wed Jun 10 19:53:39 2026 +0700

    Initial WebGIS portal project

diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..f48e70a
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,9 @@
+.git
+.env
+**/.git
+**/.env
+Leaflet2/uploads
+*.log
+node_modules
+vendor
+tmp
diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..ba98860
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,16 @@
+APP_PORT=8080
+DB_PORT=3307
+
+DB_HOST=db
+DB_DATABASE=webgis_miskin
+DB_USERNAME=webgis_user
+DB_PASSWORD=webgis_password
+DB_CHARSET=utf8mb4
+
+SPBU_DB_HOST=db
+SPBU_DB_DATABASE=webgis_spbu
+SPBU_DB_USERNAME=webgis_user
+SPBU_DB_PASSWORD=webgis_password
+
+DB_SETUP_USERNAME=root
+MYSQL_ROOT_PASSWORD=root_password
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..8d85c3e
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,10 @@
+.env
+**/.env
+*.log
+node_modules/
+vendor/
+Leaflet2/uploads/
+tmp/
+.DS_Store
+Thumbs.db
+
diff --git a/DOCKER_STEPS.md b/DOCKER_STEPS.md
new file mode 100644
index 0000000..c55bdd1
--- /dev/null
+++ b/DOCKER_STEPS.md
@@ -0,0 +1,112 @@
+# Langkah Belajar Docker
+
+File Docker sudah disiapkan, tetapi belum dijalankan.
+
+## File yang Dibuat
+
+```text
+Dockerfile
+docker-compose.yml
+.env.example
+.dockerignore
+docker/mysql-init/99-grants.sql
+```
+
+## Fungsi Setiap File
+
+`Dockerfile`
+
+Membuat image aplikasi PHP Apache. File ini memasang extension PHP yang dibutuhkan project, seperti `pdo_mysql`, `mysqli`, dan `curl`.
+
+`docker-compose.yml`
+
+Mengatur dua service:
+
+```text
+app = Apache + PHP + semua file project
+db  = MySQL 8.0
+```
+
+`.env.example`
+
+Template konfigurasi port, username, password, dan nama database. File ini boleh masuk Git karena tidak berisi password production.
+
+`.dockerignore`
+
+Mengatur file/folder yang tidak perlu ikut masuk image Docker, seperti `.git`, `.env`, upload, log, `vendor`, dan `node_modules`.
+
+`docker/mysql-init/99-grants.sql`
+
+Memberi akses user `webgis_user` ke dua database:
+
+```text
+webgis_spbu
+webgis_miskin
+```
+
+## Urutan Menjalankan Nanti
+
+Jangan jalankan dulu kalau masih belajar struktur. Saat sudah siap, urutannya:
+
+1. Salin file environment:
+
+```bash
+copy .env.example .env
+```
+
+2. Buka `.env`, lalu pelajari nilai berikut:
+
+```text
+APP_PORT=8080
+DB_PORT=3307
+DB_USERNAME=webgis_user
+DB_PASSWORD=webgis_password
+MYSQL_ROOT_PASSWORD=root_password
+```
+
+3. Build dan jalankan container:
+
+```bash
+docker compose up -d --build
+```
+
+4. Buka aplikasi:
+
+```text
+http://localhost:8080
+```
+
+5. Cek container:
+
+```bash
+docker compose ps
+```
+
+6. Lihat log jika ada error:
+
+```bash
+docker compose logs -f
+```
+
+7. Matikan container:
+
+```bash
+docker compose down
+```
+
+8. Reset database Docker dari awal:
+
+```bash
+docker compose down -v
+docker compose up -d --build
+```
+
+## Catatan Penting
+
+Kalau kamu mengubah `DB_USERNAME` di `.env`, sesuaikan juga isi:
+
+```text
+docker/mysql-init/99-grants.sql
+```
+
+Untuk production, ganti semua password default di `.env`.
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..fb96bcc
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,16 @@
+FROM php:8.2-apache
+
+RUN apt-get update \
+    && apt-get install -y --no-install-recommends libcurl4-openssl-dev \
+    && docker-php-ext-install pdo_mysql mysqli curl \
+    && a2enmod rewrite \
+    && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /var/www/html
+
+COPY . /var/www/html/
+
+RUN mkdir -p /var/www/html/Leaflet2/uploads/bukti \
+    && chown -R www-data:www-data /var/www/html/Leaflet2/uploads
+
+EXPOSE 80
diff --git a/Leaflet/api/create_point.php b/Leaflet/api/create_point.php
new file mode 100644
index 0000000..07b0a9e
--- /dev/null
+++ b/Leaflet/api/create_point.php
@@ -0,0 +1,72 @@
+<?php
+declare(strict_types=1);
+
+header('Content-Type: application/json');
+
+require_once __DIR__ . '/db.php';
+
+$input = json_decode(file_get_contents('php://input'), true);
+
+if (!is_array($input)) {
+    http_response_code(400);
+    echo json_encode([
+        'success' => false,
+        'message' => 'Format request tidak valid.',
+    ]);
+    exit;
+}
+
+$nama = trim((string) ($input['nama'] ?? ''));
+$no = trim((string) ($input['no'] ?? ''));
+$status24jam = trim((string) ($input['status_24jam'] ?? ''));
+$latitude = (float) ($input['latitude'] ?? 0);
+$longitude = (float) ($input['longitude'] ?? 0);
+
+if ($nama === '' || $no === '' || $status24jam === '') {
+    http_response_code(422);
+    echo json_encode([
+        'success' => false,
+        'message' => 'Nama, no, dan status wajib diisi.',
+    ]);
+    exit;
+}
+
+if (!in_array($status24jam, ['24jam', 'tidak'], true)) {
+    http_response_code(422);
+    echo json_encode([
+        'success' => false,
+        'message' => 'Status harus 24jam atau tidak.',
+    ]);
+    exit;
+}
+
+$stmt = $connection->prepare('INSERT INTO spbu_points (nama, no, status_24jam, latitude, longitude) VALUES (?, ?, ?, ?, ?)');
+
+if (!$stmt) {
+    http_response_code(500);
+    echo json_encode([
+        'success' => false,
+        'message' => 'Gagal menyiapkan query: ' . $connection->error,
+    ]);
+    exit;
+}
+
+$stmt->bind_param('sssdd', $nama, $no, $status24jam, $latitude, $longitude);
+
+if (!$stmt->execute()) {
+    http_response_code(500);
+    echo json_encode([
+        'success' => false,
+        'message' => 'Gagal menyimpan data: ' . $stmt->error,
+    ]);
+    $stmt->close();
+    exit;
+}
+
+$stmt->close();
+
+echo json_encode([
+    'success' => true,
+    'message' => 'Data berhasil disimpan.',
+    'id' => $connection->insert_id,
+]);
\ No newline at end of file
diff --git a/Leaflet/api/db.php b/Leaflet/api/db.php
new file mode 100644
index 0000000..f0944ed
--- /dev/null
+++ b/Leaflet/api/db.php
@@ -0,0 +1,34 @@
+<?php
+declare(strict_types=1);
+
+mysqli_report(MYSQLI_REPORT_OFF);
+
+$host = getenv('SPBU_DB_HOST') ?: getenv('DB_HOST') ?: '127.0.0.1';
+$username = getenv('SPBU_DB_USERNAME') ?: getenv('DB_USERNAME') ?: 'root';
+$password = getenv('SPBU_DB_PASSWORD') ?: getenv('DB_PASSWORD') ?: '';
+$database = getenv('SPBU_DB_DATABASE') ?: 'webgis_spbu';
+
+try {
+    $connection = new mysqli($host, $username, $password, $database);
+} catch (Throwable $exception) {
+    http_response_code(500);
+    header('Content-Type: application/json');
+    echo json_encode([
+        'success' => false,
+        'message' => 'Koneksi database gagal. Pastikan MySQL XAMPP sedang berjalan.',
+        'detail' => $exception->getMessage(),
+    ]);
+    exit;
+}
+
+if (!$connection || $connection->connect_errno) {
+    http_response_code(500);
+    header('Content-Type: application/json');
+    echo json_encode([
+        'success' => false,
+        'message' => 'Koneksi database gagal. Pastikan MySQL XAMPP sedang berjalan.',
+    ]);
+    exit;
+}
+
+$connection->set_charset('utf8mb4');
diff --git a/Leaflet/api/db_pdo.php b/Leaflet/api/db_pdo.php
new file mode 100644
index 0000000..2f60a35
--- /dev/null
+++ b/Leaflet/api/db_pdo.php
@@ -0,0 +1,42 @@
+<?php
+declare(strict_types=1);
+
+$host = getenv('SPBU_DB_HOST') ?: getenv('DB_HOST') ?: '127.0.0.1';
+$database = getenv('SPBU_DB_DATABASE') ?: 'webgis_spbu';
+$username = getenv('SPBU_DB_USERNAME') ?: getenv('DB_USERNAME') ?: 'root';
+$password = getenv('SPBU_DB_PASSWORD') ?: getenv('DB_PASSWORD') ?: '';
+$charset = getenv('DB_CHARSET') ?: 'utf8mb4';
+
+set_exception_handler(static function (Throwable $exception): void {
+    if (!headers_sent()) {
+        http_response_code(500);
+        header('Content-Type: application/json');
+    }
+
+    echo json_encode([
+        'success' => false,
+        'message' => 'Terjadi kesalahan server.',
+        'detail' => $exception->getMessage(),
+    ]);
+    exit;
+});
+
+$dsn = "mysql:host={$host};dbname={$database};charset={$charset}";
+
+$options = [
+    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
+    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
+    PDO::ATTR_EMULATE_PREPARES => false,
+];
+
+try {
+    $pdo = new PDO($dsn, $username, $password, $options);
+} catch (PDOException $exception) {
+    http_response_code(500);
+    header('Content-Type: application/json');
+    echo json_encode([
+        'success' => false,
+        'message' => 'Koneksi database gagal: ' . $exception->getMessage(),
+    ]);
+    exit;
+}
diff --git a/Leaflet/api/delete_point.php b/Leaflet/api/delete_point.php
new file mode 100644
index 0000000..ce88a7e
--- /dev/null
+++ b/Leaflet/api/delete_point.php
@@ -0,0 +1,68 @@
+<?php
+declare(strict_types=1);
+
+header('Content-Type: application/json');
+
+require_once __DIR__ . '/db.php';
+
+$input = json_decode(file_get_contents('php://input'), true);
+
+if (!is_array($input)) {
+    http_response_code(400);
+    echo json_encode([
+        'success' => false,
+        'message' => 'Format request tidak valid.',
+    ]);
+    exit;
+}
+
+$id = (int) ($input['id'] ?? 0);
+
+if ($id <= 0) {
+    http_response_code(422);
+    echo json_encode([
+        'success' => false,
+        'message' => 'ID titik tidak valid.',
+    ]);
+    exit;
+}
+
+$stmt = $connection->prepare('DELETE FROM spbu_points WHERE id = ?');
+
+if (!$stmt) {
+    http_response_code(500);
+    echo json_encode([
+        'success' => false,
+        'message' => 'Gagal menyiapkan query: ' . $connection->error,
+    ]);
+    exit;
+}
+
+$stmt->bind_param('i', $id);
+
+if (!$stmt->execute()) {
+    http_response_code(500);
+    echo json_encode([
+        'success' => false,
+        'message' => 'Gagal menghapus data: ' . $stmt->error,
+    ]);
+    $stmt->close();
+    exit;
+}
+
+if ($stmt->affected_rows < 1) {
+    http_response_code(404);
+    echo json_encode([
+        'success' => false,
+        'message' => 'Data dengan ID tersebut tidak ditemukan.',
+    ]);
+    $stmt->close();
+    exit;
+}
+
+$stmt->close();
+
+echo json_encode([
+    'success' => true,
+    'message' => 'Data berhasil dihapus.',
+]);
diff --git a/Leaflet/api/parcel_create.php b/Leaflet/api/parcel_create.php
new file mode 100644
index 0000000..963858e
--- /dev/null
+++ b/Leaflet/api/parcel_create.php
@@ -0,0 +1,43 @@
+<?php
+declare(strict_types=1);
+
+require_once __DIR__ . '/db_pdo.php';
+require_once __DIR__ . '/spatial_helpers.php';
+
+$input = get_json_input();
+
+$namaPemilik = trim((string) ($input['nama_pemilik'] ?? ''));
+$statusKepemilikan = trim((string) ($input['status_kepemilikan'] ?? ''));
+$luasM2 = (float) ($input['luas_m2'] ?? 0);
+$wkt = sanitize_wkt((string) ($input['wkt'] ?? ''), 'POLYGON');
+
+$allowedStatus = ['SHM', 'HGB', 'HGU', 'HP'];
+
+if ($namaPemilik === '' || !in_array($statusKepemilikan, $allowedStatus, true)) {
+    json_response(422, [
+        'success' => false,
+        'message' => 'Nama pemilik wajib diisi dan status harus SHM/HGB/HGU/HP.',
+    ]);
+}
+
+if ($luasM2 <= 0) {
+    json_response(422, [
+        'success' => false,
+        'message' => 'Luas tanah harus lebih dari 0 m2.',
+    ]);
+}
+
+$sql = 'INSERT INTO parsil_tanah (nama_pemilik, status_kepemilikan, luas_m2, geom) VALUES (:nama_pemilik, :status_kepemilikan, :luas_m2, ST_GeomFromText(:wkt))';
+$stmt = $pdo->prepare($sql);
+$stmt->execute([
+    ':nama_pemilik' => $namaPemilik,
+    ':status_kepemilikan' => $statusKepemilikan,
+    ':luas_m2' => $luasM2,
+    ':wkt' => $wkt,
+]);
+
+json_response(201, [
+    'success' => true,
+    'message' => 'Data parsil tanah berhasil disimpan.',
+    'id' => (int) $pdo->lastInsertId(),
+]);
diff --git a/Leaflet/api/parcel_delete.php b/Leaflet/api/parcel_delete.php
new file mode 100644
index 0000000..fdaa368
--- /dev/null
+++ b/Leaflet/api/parcel_delete.php
@@ -0,0 +1,30 @@
+<?php
+declare(strict_types=1);
+
+require_once __DIR__ . '/db_pdo.php';
+require_once __DIR__ . '/spatial_helpers.php';
+
+$input = get_json_input();
+$id = (int) ($input['id'] ?? 0);
+
+if ($id <= 0) {
+    json_response(422, [
+        'success' => false,
+        'message' => 'ID parsil tidak valid.',
+    ]);
+}
+
+$stmt = $pdo->prepare('DELETE FROM parsil_tanah WHERE id = :id');
+$stmt->execute([':id' => $id]);
+
+if ($stmt->rowCount() < 1) {
+    json_response(404, [
+        'success' => false,
+        'message' => 'Data parsil tidak ditemukan.',
+    ]);
+}
+
+json_response(200, [
+    'success' => true,
+    'message' => 'Data parsil tanah berhasil dihapus.',
+]);
diff --git a/Leaflet/api/parcel_read.php b/Leaflet/api/parcel_read.php
new file mode 100644
index 0000000..a82c121
--- /dev/null
+++ b/Leaflet/api/parcel_read.php
@@ -0,0 +1,22 @@
+<?php
+declare(strict_types=1);
+
+require_once __DIR__ . '/db_pdo.php';
+require_once __DIR__ . '/spatial_helpers.php';
+
+$sql = 'SELECT id, nama_pemilik, status_kepemilikan, luas_m2, ST_AsGeoJSON(geom) AS geometry_geojson, created_at, updated_at FROM parsil_tanah ORDER BY id DESC';
+$stmt = $pdo->query($sql);
+$rows = $stmt->fetchAll();
+
+$data = [];
+foreach ($rows as $row) {
+    $row['id'] = (int) $row['id'];
+    $row['luas_m2'] = (float) $row['luas_m2'];
+    $row['geometry_geojson'] = json_decode((string) $row['geometry_geojson'], true);
+    $data[] = $row;
+}
+
+json_response(200, [
+    'success' => true,
+    'data' => $data,
+]);
diff --git a/Leaflet/api/parcel_update.php b/Leaflet/api/parcel_update.php
new file mode 100644
index 0000000..850d6fd
--- /dev/null
+++ b/Leaflet/api/parcel_update.php
@@ -0,0 +1,62 @@
+<?php
+declare(strict_types=1);
+
+require_once __DIR__ . '/db_pdo.php';
+require_once __DIR__ . '/spatial_helpers.php';
+
+$input = get_json_input();
+
+$id = (int) ($input['id'] ?? 0);
+$namaPemilik = trim((string) ($input['nama_pemilik'] ?? ''));
+$statusKepemilikan = trim((string) ($input['status_kepemilikan'] ?? ''));
+$luasM2 = (float) ($input['luas_m2'] ?? 0);
+$wkt = sanitize_wkt((string) ($input['wkt'] ?? ''), 'POLYGON');
+
+$allowedStatus = ['SHM', 'HGB', 'HGU', 'HP'];
+
+if ($id <= 0) {
+    json_response(422, [
+        'success' => false,
+        'message' => 'ID parsil tidak valid.',
+    ]);
+}
+
+if ($namaPemilik === '' || !in_array($statusKepemilikan, $allowedStatus, true)) {
+    json_response(422, [
+        'success' => false,
+        'message' => 'Nama pemilik wajib diisi dan status harus SHM/HGB/HGU/HP.',
+    ]);
+}
+
+if ($luasM2 <= 0) {
+    json_response(422, [
+        'success' => false,
+        'message' => 'Luas tanah harus lebih dari 0 m2.',
+    ]);
+}
+
+$sql = 'UPDATE parsil_tanah SET nama_pemilik = :nama_pemilik, status_kepemilikan = :status_kepemilikan, luas_m2 = :luas_m2, geom = ST_GeomFromText(:wkt), updated_at = CURRENT_TIMESTAMP WHERE id = :id';
+$stmt = $pdo->prepare($sql);
+$stmt->execute([
+    ':id' => $id,
+    ':nama_pemilik' => $namaPemilik,
+    ':status_kepemilikan' => $statusKepemilikan,
+    ':luas_m2' => $luasM2,
+    ':wkt' => $wkt,
+]);
+
+if ($stmt->rowCount() < 1) {
+    $checkStmt = $pdo->prepare('SELECT id FROM parsil_tanah WHERE id = :id LIMIT 1');
+    $checkStmt->execute([':id' => $id]);
+    if (!$checkStmt->fetch()) {
+        json_response(404, [
+            'success' => false,
+            'message' => 'Data parsil tidak ditemukan.',
+        ]);
+    }
+}
+
+json_response(200, [
+    'success' => true,
+    'message' => 'Data parsil tanah berhasil diperbarui.',
+]);
diff --git a/Leaflet/api/read_points.php b/Leaflet/api/read_points.php
new file mode 100644
index 0000000..951abd5
--- /dev/null
+++ b/Leaflet/api/read_points.php
@@ -0,0 +1,28 @@
+<?php
+declare(strict_types=1);
+
+header('Content-Type: application/json');
+
+require_once __DIR__ . '/db.php';
+
+$sql = 'SELECT id, nama, no, status_24jam, latitude, longitude, created_at FROM spbu_points ORDER BY id DESC';
+$result = $connection->query($sql);
+
+if (!$result) {
+    http_response_code(500);
+    echo json_encode([
+        'success' => false,
+        'message' => 'Gagal mengambil data: ' . $connection->error,
+    ]);
+    exit;
+}
+
+$points = [];
+while ($row = $result->fetch_assoc()) {
+    $points[] = $row;
+}
+
+echo json_encode([
+    'success' => true,
+    'data' => $points,
+]);
\ No newline at end of file
diff --git a/Leaflet/api/road_create.php b/Leaflet/api/road_create.php
new file mode 100644
index 0000000..cabc134
--- /dev/null
+++ b/Leaflet/api/road_create.php
@@ -0,0 +1,43 @@
+<?php
+declare(strict_types=1);
+
+require_once __DIR__ . '/db_pdo.php';
+require_once __DIR__ . '/spatial_helpers.php';
+
+$input = get_json_input();
+
+$namaJalan = trim((string) ($input['nama_jalan'] ?? ''));
+$status = trim((string) ($input['status'] ?? ''));
+$panjangMeter = (float) ($input['panjang_meter'] ?? 0);
+$wkt = sanitize_wkt((string) ($input['wkt'] ?? ''), 'LINESTRING');
+
+$allowedStatus = ['nasional', 'provinsi', 'kabupaten'];
+
+if ($namaJalan === '' || !in_array($status, $allowedStatus, true)) {
+    json_response(422, [
+        'success' => false,
+        'message' => 'Nama jalan wajib diisi dan status harus nasional/provinsi/kabupaten.',
+    ]);
+}
+
+if ($panjangMeter <= 0) {
+    json_response(422, [
+        'success' => false,
+        'message' => 'Panjang jalan harus lebih dari 0 meter.',
+    ]);
+}
+
+$sql = 'INSERT INTO jalan (nama_jalan, status, panjang_meter, geom) VALUES (:nama_jalan, :status, :panjang_meter, ST_GeomFromText(:wkt))';
+$stmt = $pdo->prepare($sql);
+$stmt->execute([
+    ':nama_jalan' => $namaJalan,
+    ':status' => $status,
+    ':panjang_meter' => $panjangMeter,
+    ':wkt' => $wkt,
+]);
+
+json_response(201, [
+    'success' => true,
+    'message' => 'Data jalan berhasil disimpan.',
+    'id' => (int) $pdo->lastInsertId(),
+]);
diff --git a/Leaflet/api/road_delete.php b/Leaflet/api/road_delete.php
new file mode 100644
index 0000000..3c4d567
--- /dev/null
+++ b/Leaflet/api/road_delete.php
@@ -0,0 +1,30 @@
+<?php
+declare(strict_types=1);
+
+require_once __DIR__ . '/db_pdo.php';
+require_once __DIR__ . '/spatial_helpers.php';
+
+$input = get_json_input();
+$id = (int) ($input['id'] ?? 0);
+
+if ($id <= 0) {
+    json_response(422, [
+        'success' => false,
+        'message' => 'ID jalan tidak valid.',
+    ]);
+}
+
+$stmt = $pdo->prepare('DELETE FROM jalan WHERE id = :id');
+$stmt->execute([':id' => $id]);
+
+if ($stmt->rowCount() < 1) {
+    json_response(404, [
+        'success' => false,
+        'message' => 'Data jalan tidak ditemukan.',
+    ]);
+}
+
+json_response(200, [
+    'success' => true,
+    'message' => 'Data jalan berhasil dihapus.',
+]);
diff --git a/Leaflet/api/road_read.php b/Leaflet/api/road_read.php
new file mode 100644
index 0000000..8140a0e
--- /dev/null
+++ b/Leaflet/api/road_read.php
@@ -0,0 +1,22 @@
+<?php
+declare(strict_types=1);
+
+require_once __DIR__ . '/db_pdo.php';
+require_once __DIR__ . '/spatial_helpers.php';
+
+$sql = 'SELECT id, nama_jalan, status, panjang_meter, ST_AsGeoJSON(geom) AS geometry_geojson, created_at, updated_at FROM jalan ORDER BY id DESC';
+$stmt = $pdo->query($sql);
+$rows = $stmt->fetchAll();
+
+$data = [];
+foreach ($rows as $row) {
+    $row['id'] = (int) $row['id'];
+    $row['panjang_meter'] = (float) $row['panjang_meter'];
+    $row['geometry_geojson'] = json_decode((string) $row['geometry_geojson'], true);
+    $data[] = $row;
+}
+
+json_response(200, [
+    'success' => true,
+    'data' => $data,
+]);
diff --git a/Leaflet/api/road_update.php b/Leaflet/api/road_update.php
new file mode 100644
index 0000000..8d255d8
--- /dev/null
+++ b/Leaflet/api/road_update.php
@@ -0,0 +1,62 @@
+<?php
+declare(strict_types=1);
+
+require_once __DIR__ . '/db_pdo.php';
+require_once __DIR__ . '/spatial_helpers.php';
+
+$input = get_json_input();
+
+$id = (int) ($input['id'] ?? 0);
+$namaJalan = trim((string) ($input['nama_jalan'] ?? ''));
+$status = trim((string) ($input['status'] ?? ''));
+$panjangMeter = (float) ($input['panjang_meter'] ?? 0);
+$wkt = sanitize_wkt((string) ($input['wkt'] ?? ''), 'LINESTRING');
+
+$allowedStatus = ['nasional', 'provinsi', 'kabupaten'];
+
+if ($id <= 0) {
+    json_response(422, [
+        'success' => false,
+        'message' => 'ID jalan tidak valid.',
+    ]);
+}
+
+if ($namaJalan === '' || !in_array($status, $allowedStatus, true)) {
+    json_response(422, [
+        'success' => false,
+        'message' => 'Nama jalan wajib diisi dan status harus nasional/provinsi/kabupaten.',
+    ]);
+}
+
+if ($panjangMeter <= 0) {
+    json_response(422, [
+        'success' => false,
+        'message' => 'Panjang jalan harus lebih dari 0 meter.',
+    ]);
+}
+
+$sql = 'UPDATE jalan SET nama_jalan = :nama_jalan, status = :status, panjang_meter = :panjang_meter, geom = ST_GeomFromText(:wkt), updated_at = CURRENT_TIMESTAMP WHERE id = :id';
+$stmt = $pdo->prepare($sql);
+$stmt->execute([
+    ':id' => $id,
+    ':nama_jalan' => $namaJalan,
+    ':status' => $status,
+    ':panjang_meter' => $panjangMeter,
+    ':wkt' => $wkt,
+]);
+
+if ($stmt->rowCount() < 1) {
+    $checkStmt = $pdo->prepare('SELECT id FROM jalan WHERE id = :id LIMIT 1');
+    $checkStmt->execute([':id' => $id]);
+    if (!$checkStmt->fetch()) {
+        json_response(404, [
+            'success' => false,
+            'message' => 'Data jalan tidak ditemukan.',
+        ]);
+    }
+}
+
+json_response(200, [
+    'success' => true,
+    'message' => 'Data jalan berhasil diperbarui.',
+]);
diff --git a/Leaflet/api/spatial_helpers.php b/Leaflet/api/spatial_helpers.php
new file mode 100644
index 0000000..625e2b2
--- /dev/null
+++ b/Leaflet/api/spatial_helpers.php
@@ -0,0 +1,47 @@
+<?php
+declare(strict_types=1);
+
+function json_response(int $statusCode, array $payload): void
+{
+    http_response_code($statusCode);
+    header('Content-Type: application/json');
+    echo json_encode($payload);
+    exit;
+}
+
+function get_json_input(): array
+{
+    $input = json_decode(file_get_contents('php://input'), true);
+
+    if (!is_array($input)) {
+        json_response(400, [
+            'success' => false,
+            'message' => 'Format request tidak valid.',
+        ]);
+    }
+
+    return $input;
+}
+
+function sanitize_wkt(string $wkt, string $expectedType): string
+{
+    $trimmed = trim($wkt);
+
+    if ($trimmed === '') {
+        json_response(422, [
+            'success' => false,
+            'message' => 'Geometri WKT wajib diisi.',
+        ]);
+    }
+
+    $normalized = strtoupper($trimmed);
+
+    if (strpos($normalized, $expectedType . '(') !== 0 && strpos($normalized, $expectedType . ' (') !== 0) {
+        json_response(422, [
+            'success' => false,
+            'message' => 'Tipe geometri tidak sesuai. Diharapkan ' . $expectedType . '.',
+        ]);
+    }
+
+    return $trimmed;
+}
diff --git a/Leaflet/api/update_point_position.php b/Leaflet/api/update_point_position.php
new file mode 100644
index 0000000..345c80d
--- /dev/null
+++ b/Leaflet/api/update_point_position.php
@@ -0,0 +1,110 @@
+<?php
+declare(strict_types=1);
+
+header('Content-Type: application/json');
+
+require_once __DIR__ . '/db.php';
+
+$input = json_decode(file_get_contents('php://input'), true);
+
+if (!is_array($input)) {
+    http_response_code(400);
+    echo json_encode([
+        'success' => false,
+        'message' => 'Format request tidak valid.',
+    ]);
+    exit;
+}
+
+$id = (int) ($input['id'] ?? 0);
+$latitude = (float) ($input['latitude'] ?? 0);
+$longitude = (float) ($input['longitude'] ?? 0);
+
+if ($id <= 0) {
+    http_response_code(422);
+    echo json_encode([
+        'success' => false,
+        'message' => 'ID titik tidak valid.',
+    ]);
+    exit;
+}
+
+if (!is_finite($latitude) || !is_finite($longitude)) {
+    http_response_code(422);
+    echo json_encode([
+        'success' => false,
+        'message' => 'Koordinat latitude atau longitude tidak valid.',
+    ]);
+    exit;
+}
+
+$stmt = $connection->prepare('UPDATE spbu_points SET latitude = ?, longitude = ? WHERE id = ?');
+
+if (!$stmt) {
+    http_response_code(500);
+    echo json_encode([
+        'success' => false,
+        'message' => 'Gagal menyiapkan query update: ' . $connection->error,
+    ]);
+    exit;
+}
+
+$stmt->bind_param('ddi', $latitude, $longitude, $id);
+
+if (!$stmt->execute()) {
+    http_response_code(500);
+    echo json_encode([
+        'success' => false,
+        'message' => 'Gagal memperbarui posisi: ' . $stmt->error,
+    ]);
+    $stmt->close();
+    exit;
+}
+
+if ($stmt->affected_rows < 1) {
+    $stmt->close();
+
+    $checkStmt = $connection->prepare('SELECT id FROM spbu_points WHERE id = ? LIMIT 1');
+
+    if (!$checkStmt) {
+        http_response_code(500);
+        echo json_encode([
+            'success' => false,
+            'message' => 'Gagal memverifikasi data titik: ' . $connection->error,
+        ]);
+        exit;
+    }
+
+    $checkStmt->bind_param('i', $id);
+
+    if (!$checkStmt->execute()) {
+        http_response_code(500);
+        echo json_encode([
+            'success' => false,
+            'message' => 'Gagal memverifikasi data titik: ' . $checkStmt->error,
+        ]);
+        $checkStmt->close();
+        exit;
+    }
+
+    $checkResult = $checkStmt->get_result();
+
+    if ($checkResult->num_rows < 1) {
+        http_response_code(404);
+        echo json_encode([
+            'success' => false,
+            'message' => 'Data dengan ID tersebut tidak ditemukan.',
+        ]);
+        $checkStmt->close();
+        exit;
+    }
+
+    $checkStmt->close();
+}
+
+$stmt->close();
+
+echo json_encode([
+    'success' => true,
+    'message' => 'Posisi titik berhasil diperbarui.',
+]);
diff --git a/Leaflet/assets/data/Kecamatan.json b/Leaflet/assets/data/Kecamatan.json
new file mode 100644
index 0000000..2db574b
--- /dev/null
+++ b/Leaflet/assets/data/Kecamatan.json
@@ -0,0 +1,8 @@
+{"type":"GeometryCollection", "geometries": [
+{"type":"Polygon","coordinates":[[[4310.818337477802,-4093.4866795764437],[4290.571308430663,-4104.560830481749],[4266.322901199688,-4117.793821113622],[4241.674317813886,-4131.346710850012],[4220.956813665456,-4143.524182349628],[4206.79139168511,-4152.640289373927],[4191.605445305264,-4162.776168791344],[4163.754759647476,-4180.768524865247],[4149.649678162328,-4188.984523071116],[4130.742748220655,-4200.319205766012],[4121.799611803173,-4205.2966347300735],[4109.975304380438,-4212.31329882999],[4092.929021045449,-4222.628518781099],[4076.7823820557096,-4234.264262541685],[4055.7145406839845,-4247.21838468215],[4038.607562967489,-4259.393853119322],[4022.4014681940316,-4269.529356532932],[4012.61710367669,-4277.506912303897],[3998.150974515942,-4288.42317061268],[3982.7846038286516,-4299.639140800788],[3964.7765662266756,-4314.334644093763],[3956.973595661664,-4319.3124932962],[3951.812734367966,-4319.610634810017],[3941.428857623192,-4326.02774244548],[3927.8620410396834,-4339.164655499981],[3921.8591332889046,-4344.68324679823],[3907.812689228973,-4356.619808327554],[3892.024864015664,-4371.6161736259355],[3887.8227710837964,-4375.635210230346],[3888.7821145082416,-4377.79587836353],[3886.4402921785077,-4381.815600621078],[3883.559497178183,-4382.834687361059],[3881.6996689317457,-4381.633827126268],[3879.4780188854784,-4385.233532515436],[3871.674119372503,-4392.731748340815],[3857.927984371985,-4403.948315709774],[3825.872241995414,-4434.000878092304],[3791.2340451915807,-4469.693309946799],[3760.498760268907,-4499.026254171722],[3760.257354048488,-4502.746706906131],[3751.1927403968,-4511.68466775634],[3748.9129837532237,-4510.123600322178],[3735.7664936874353,-4522.540563451932],[3737.2058405913995,-4524.881434715469],[3714.214402217185,-4546.836158454738],[3711.214186938916,-4546.234965272399],[3712.053004196234,-4549.775789940546],[3706.830630162556,-4554.154502917955],[3704.0711354526284,-4551.6931276040295],[3685.7614617231884,-4570.709148805481],[3676.4559947953967,-4581.867344163032],[3651.064163021423,-4603.941200648516],[3631.0147448559874,-4621.576379662917],[3608.5043273810006,-4640.950904992426],[3592.4770201957726,-4654.446963591454],[3557.3006248441816,-4685.038454409436],[3526.6265651304566,-4711.070940650522],[3489.4696384215495,-4742.321797601969],[3464.1378596108407,-4764.275658746677],[3456.0940357719082,-4771.473742455406],[3438.866200119868,-4785.929498363781],[3405.7308535637567,-4814.481444397629],[3382.2598983021744,-4834.935772966308],[3353.80671451136,-4859.468859338218],[3324.09321470157,-4884.361533609792],[3298.5814097039693,-4906.315328402121],[3270.068327774148,-4930.54834900976],[3256.3810956112284,-4944.765374952762],[3237.531343319337,-4963.781197093929],[3227.5658688438125,-4974.699114238409],[3211.117085014732,-4992.035576675951],[3197.189795819053,-5006.312522877008],[3169.516194679076,-5032.286106278214],[3145.0238745425886,-5056.040538946832],[3126.714952818642,-5073.016263357583],[3106.725123144686,-5091.7916303442535],[3092.9785900236166,-5104.0883548373295],[3079.2312164257746,-5118.665411036178],[3047.895910564752,-5147.81810789618],[3036.1299972717534,-5159.215431339671],[3009.1154083807487,-5188.12968576477],[2979.039356883877,-5219.80321372066],[2963.0113861652208,-5235.099534193218],[2938.6393046652374,-5258.253923805578],[2915.64819805813,-5279.3085166086075],[2881.791640862677,-5310.860633684977],[2860.659588379116,-5335.216392241742],[2857.7179220535327,-5338.575797300027],[2853.5759263222863,-5342.354821106126],[2848.892834609869,-5348.894047392056],[2821.9996344800456,-5374.087804847126],[2786.6418858721445,-5408.279753059793],[2754.2256045291433,-5439.652374775707],[2727.272196610109,-5465.386188675553],[2711.784547750227,-5480.022612187226],[2692.81515400231,-5498.01824169795],[2669.5234950399317,-5520.452924681464],[2655.776055088674,-5535.21000706819],[2649.4126083714655,-5542.048657700872],[2632.723988686368,-5558.844953105645],[2629.9620831352368,-5562.924529266771],[2624.01975917691,-5566.88291572647],[2619.277543446573,-5571.021770729181],[2606.6116540412186,-5581.998701301535],[2598.8067813454836,-5592.137301208442],[2584.819195888005,-5607.194338770396],[2558.647250634036,-5629.267907724359],[2542.499837520969,-5643.003957003888],[2531.5148339473526,-5652.241253729614],[2523.7703459833574,-5661.359727359506],[2513.5046066822833,-5672.877621206815],[2502.2178121573816,-5686.855496945016],[2493.3331804570043,-5695.913541607238],[2490.6912702464033,-5700.053170734324],[2471.601925394876,-5717.868729821552],[2456.774682204181,-5731.665274421128],[2422.4353346838907,-5770.598288238072],[2406.5270717747044,-5786.734775154247],[2384.8569092146645,-5805.7495577583795],[2342.896165563754,-5845.459876091201],[2327.0478892648825,-5861.656393854477],[2310.7778930275235,-5882.353411476389],[2292.828603439848,-5900.469434448456],[2257.5304654407955,-5935.741561903049],[2229.4964580425294,-5962.675152263982],[2204.3434668213595,-5987.989568594108],[2224.6787511149887,-6008.820095538258],[2257.371432165557,-6041.596915847807],[2287.0645172374207,-6072.092298560074],[2318.7373374245362,-6104.088629387112],[2348.6707670619944,-6133.743978363668],[2383.6425191040908,-6169.942136709153],[2404.3979861496773,-6190.442770468433],[2422.7239733192837,-6208.572163655151],[2441.4993181870377,-6228.622002058604],[2470.7427137913473,-6258.097070491425],[2492.907799849985,-6280.188455340753],[2515.432728162734,-6302.850055823641],[2537.297306100809,-6326.201513395919],[2557.8727911951137,-6346.582063343186],[2570.0499405844894,-6359.128377645986],[2586.3366041481786,-6374.616634745661],[2610.690825516329,-6399.91929390326],[2627.577100837603,-6416.697959858197],[2650.941509941971,-6441.100123134653],[2663.419056863291,-6452.686408360966],[2673.6162941953226,-6464.211844380185],[2697.7311552403844,-6487.684148828896],[2713.837339199905,-6504.402518521968],[2733.6633123604406,-6523.1625563109665],[2753.5801501514215,-6539.612291203635],[2778.505825748871,-6561.194619274776],[2792.2434011576406,-6573.201430079083],[2817.5290517187095,-6594.99392140803],[2835.975797293271,-6611.113066405887],[2857.5723929072556,-6628.883612638505],[2873.379561699694,-6642.8114658382965],[2883.7576988729415,-6651.966623411758],[2905.773813703796,-6671.207538333036],[2931.9291374227614,-6694.230529318092],[2951.455763648177,-6711.100181548998],[2974.522108651261,-6730.13145297994],[2986.549833399942,-6741.057476302563],[3010.8455611086392,-6762.24951539683],[3031.5720743861166,-6779.899723463679],[3094.4512626424257,-6834.080784651105],[3211.331333149865,-6934.338455157726],[3258.763627778564,-6865.445904280041],[3291.160709565709,-6818.3259826791],[3319.3046387083305,-6778.080494613167],[3336.9420176675485,-6751.458118168726],[3372.591553670267,-6698.963612631789],[3401.861982768285,-6655.093011890075],[3430.8819607847836,-6612.347482660599],[3447.2683284703526,-6587.974972772217],[3461.9034738998744,-6566.227199678956],[3490.924050941714,-6521.856434037349],[3509.0612261703936,-6495.984351022569],[3541.5844320353935,-6445.864039044163],[3567.868172287097,-6405.39616640991],[3631.366143201303,-6327.448217633462],[3679.5942412449513,-6270.257663838373],[3726.421029719495,-6216.067030418352],[3786.4560053131136,-6144.878789663679],[3888.317336857668,-6018.697955949392],[3989.1734358218964,-5906.318761303418],[4086.8283319722104,-5795.938678012471],[4185.6834764299565,-5685.359007980767],[4239.715072427556,-5620.969544746454],[4296.346751781966,-5557.381156338311],[4400.8046278351685,-5441.602794110773],[4429.139967119496,-5411.174139248401],[4450.513307860994,-5383.417974512755],[4483.257295894233,-5331.26244756981],[4514.801050363021,-5279.266501548444],[4526.730039191083,-5259.588032466487],[4540.818811439531,-5241.350569124489],[4553.788334947836,-5220.632332112954],[4587.646676313219,-5184.239510886591],[4632.471301173879,-5135.1288792723735],[4654.7227940861485,-5112.733818732677],[4675.374349125719,-5089.538051996964],[4684.018909045961,-5080.579933410926],[4681.220860919391,-5074.177970140141],[4671.223062876379,-5064.252840622491],[4675.465596611291,-5059.053647090697],[4704.518108314922,-5036.581081596643],[4711.321663280833,-5029.622575703694],[4722.207256858615,-5018.7450035181355],[4754.943223499693,-4988.352642338467],[4801.686800624244,-4942.843242241207],[4808.41052089553,-4935.404637024554],[4778.739709495363,-4898.74836549466],[4753.54568662736,-4872.575270114562],[4741.309862948896,-4856.408407036777],[4718.115659203875,-4831.516235139099],[4695.082009564969,-4805.183912723421],[4658.37321146141,-4760.2838472371295],[4643.738660590578,-4739.715459311095],[4634.620489236346,-4731.150852048448],[4605.591039036517,-4691.054315971507],[4583.922777569416,-4650.640446456974],[4564.813826892496,-4613.107939634336],[4535.788033502031,-4563.089960342339],[4516.036483027943,-4532.3582068976875],[4515.39992876703,-4522.756574313811],[4491.570143945195,-4485.622385750728],[4476.2952345503145,-4465.773866650808],[4449.113188722462,-4406.31519225548],[4422.568522887945,-4354.217824555337],[4401.063823548611,-4304.202617362102],[4379.638103683741,-4256.9878470185695],[4362.129562724789,-4218.975860170887],[4338.54913178907,-4156.55808220706],[4323.441618274635,-4116.706712377989],[4312.488546482753,-4093.579308567752],[4310.888343197672,-4093.498707121149],[4310.818337477802,-4093.4866795764437]]]},
+{"type":"Polygon","coordinates":[[[4684.018909045961,-5080.579933410926],[4673.717741732602,-5093.245314612702],[4604.480321781681,-5167.430600426189],[4566.279579585011,-5208.622520127445],[4553.312238367216,-5223.41989586592],[4528.015112866124,-5259.895884204761],[4517.927836761839,-5275.6544612636135],[4497.271976123389,-5310.531927269785],[4474.6153526665585,-5346.6888422367065],[4448.51654778581,-5387.40515252954],[4403.45059042942,-5440.036207782274],[4369.2716421918885,-5477.949132184169],[4317.723120117473,-5534.978438849381],[4274.575225452543,-5581.827125243224],[4236.7975277516525,-5626.721973787002],[4188.676399419841,-5681.7923410851945],[4157.472079691361,-5718.706133450043],[4098.036708149855,-5783.400953789194],[4038.8456409284263,-5852.1218422372895],[4001.624569462001,-5894.594309418208],[3929.0327183069894,-5973.330726560402],[3884.8196592686872,-6023.030707815567],[3817.623869460891,-6106.269564517407],[3764.687491873279,-6172.947520947046],[3710.3363211693068,-6236.05667999865],[3666.6312104625395,-6286.927980534041],[3634.292382465588,-6325.241641409306],[3594.7388702119933,-6372.410611827245],[3558.112558904977,-6420.416438108223],[3520.083758306311,-6478.997933639706],[3482.912784152926,-6535.696496817593],[3445.3026057260868,-6590.89871999591],[3398.373957671167,-6661.923721025332],[3357.5456091521482,-6722.717526430625],[3309.8326028812444,-6793.430238876561],[3273.5676898747333,-6846.704631184659],[3231.459420547355,-6906.777859993941],[3211.5258174569462,-6935.814741778069],[3210.084841207223,-6937.8945135605245],[3208.798894238076,-6939.956006480759],[3276.5856081769743,-7002.790136092344],[3350.770857128431,-7072.127570591743],[3430.354901098035,-7146.867781314568],[3509.9390925201587,-7221.2079338445565],[3539.4329889710352,-7249.422911123969],[3626.8158453570504,-7330.466913720928],[3686.403356920491,-7387.897234943608],[3725.095863973722,-7423.516680212557],[3779.6848967529077,-7474.844270822476],[3846.3714875227015,-7537.577980391372],[3934.7536046826863,-7621.022700783893],[4095.1215723004716,-7771.303680975594],[4187.103328494966,-7857.150077602077],[4200.320562838431,-7869.876801467068],[4232.920895809599,-7827.582657403762],[4262.939725421078,-7788.348007459137],[4293.979123665864,-7747.9735676638575],[4309.22861762371,-7728.236313704721],[4331.202694446925,-7698.720114091768],[4366.3248316999525,-7652.526331581879],[4380.67439378149,-7632.24866729407],[4389.26198985739,-7615.0293248810485],[4396.228244357364,-7600.809821743411],[4405.055300287408,-7585.150794759034],[4427.0920842119085,-7548.313552311181],[4439.941605007916,-7527.55526524485],[4450.149923362391,-7509.016327971389],[4466.481365986256,-7484.418765073762],[4474.7070517928805,-7472.24002320082],[4476.629189020838,-7467.199997723781],[4481.371979814256,-7461.50091576366],[4488.6974683290755,-7449.501868311456],[4509.832506716833,-7417.044931322231],[4532.469267344073,-7380.507953697885],[4546.0988573831855,-7359.869971620608],[4557.866916103201,-7342.651801452528],[4580.142695407849,-7308.63505774427],[4601.397707017924,-7276.298182449249],[4624.454108510836,-7240.901525502979],[4645.528983345022,-7208.864627499945],[4668.225067049119,-7174.187942596231],[4696.324833807186,-7131.652104780062],[4721.481961058686,-7095.116056103707],[4744.177536052273,-7061.819571969525],[4774.197184023127,-7020.364599047371],[4801.995779127261,-6980.889095827681],[4832.675899120717,-6938.414217805554],[4858.974032700964,-6899.598257660751],[4886.656348257791,-6849.981234983332],[4918.481256726751,-6794.964952812061],[4946.943265523878,-6746.488383519573],[4976.184879088803,-6699.392302527086],[5002.544658116327,-6656.135718545036],[5029.324830015044,-6611.97915845036],[5049.85964840505,-6579.882052657749],[5055.685361048963,-6566.68227767761],[5070.154630938632,-6547.2447798323665],[5087.987397681805,-6519.647333423738],[5121.010246834747,-6470.6923752504135],[5152.832788698113,-6422.097027096658],[5180.272171904333,-6380.3410594632915],[5200.568481507798,-6344.103262889799],[5224.167903230846,-6300.725644029937],[5243.804271636473,-6264.0675430565425],[5268.305947607121,-6214.929417967474],[5292.5083761719,-6163.630868041122],[5340.612349179981,-6063.313989306193],[5399.4939331137575,-5933.035053220442],[5422.615504157351,-5883.636381595525],[5461.233653321804,-5849.645664214105],[5506.555210196937,-5809.056456451424],[5532.667117230216,-5787.062877018007],[5522.074016715254,-5764.155637921684],[5501.279948330222,-5739.844435118137],[5489.383672780299,-5725.037895234023],[5467.887253911962,-5706.827321851359],[5463.689038968878,-5700.324827948836],[5462.294549056707,-5684.822056842046],[5459.2981675324845,-5673.819350611359],[5431.507799215207,-5636.703705182979],[5413.913422260026,-5614.49398751487],[5385.925015448767,-5571.977482738818],[5376.630408366211,-5553.671392095566],[5357.639255991962,-5522.159805330078],[5353.541682268522,-5513.957100966562],[5329.850915140531,-5479.543359731586],[5296.0652033632505,-5427.423320240059],[5283.9701520586095,-5409.216211980846],[5261.47421437563,-5389.305022641918],[5252.8754330221855,-5382.600877669774],[5211.786447420105,-5336.479020090588],[5204.469216219877,-5326.074808669511],[5170.41749480876,-5290.157030199067],[5108.630105534656,-5231.525723407343],[5103.632142833085,-5224.022789115987],[5060.040213106055,-5184.9010283596435],[5040.544896194537,-5164.4908721688225],[5005.650214122259,-5136.273904286576],[4999.252563824237,-5127.370250233356],[4992.852922922495,-5123.867381800729],[4962.058321259567,-5097.052128981761],[4952.561583887,-5084.4467938795315],[4935.064972836728,-5068.338000535377],[4918.268168722163,-5053.029581621151],[4887.57527730547,-5021.613696432378],[4882.97604573032,-5017.711433340142],[4845.485519547539,-4977.191717549146],[4821.492091498454,-4949.878898672871],[4808.494955516915,-4936.972229718639],[4751.165717870375,-4993.659356235917],[4699.740545670909,-5041.647391946768],[4673.228580442665,-5063.640823928123],[4676.339731903194,-5069.332319379818],[4684.018909045961,-5080.579933410926]]]},
+{"type":"Polygon","coordinates":[[[4310.818337477802,-4093.4866795764437],[4305.683430393867,-4082.160638170739],[4298.786960695434,-4069.8563051512747],[4284.544564069307,-4043.597233177954],[4270.90054060478,-4021.989058890834],[4248.556744368048,-3996.3270883051373],[4228.462335467484,-3973.2163181254045],[4206.866878920642,-3952.3553223420895],[4182.572080157755,-3928.642916623829],[4156.024686978984,-3911.080576223946],[4147.024096438225,-3909.1269748552695],[4117.025924861082,-3892.3134717959374],[4114.176947885135,-3888.411853806474],[4104.877364295069,-3883.6077272152233],[4093.3202650748135,-3898.305608173744],[4083.8710467244673,-3892.4512735290245],[4079.968433433678,-3898.0006433157696],[4070.5174456572568,-3896.947007000813],[4088.829286932043,-3872.05013034443],[4092.7291907911713,-3873.8518298766126],[4095.1306458470935,-3870.8522781316988],[4090.631373524957,-3867.1000737262375],[4100.837778689805,-3853.7518915224177],[4098.288347708411,-3851.20058052846],[4094.6883216113783,-3849.8490570544936],[4083.2808018577925,-3865.7471678891916],[4084.780135373381,-3868.14806999983],[4076.3746003228007,-3879.8466756860544],[4072.02407804993,-3879.5450284994695],[4061.3674968288105,-3893.193088464083],[4041.7207757318392,-3876.533422549556],[4002.127566364332,-3842.463871014772],[4007.5320014246972,-3832.564421311615],[3994.7840171016287,-3822.0581936803273],[3991.332796348812,-3824.0072056025324],[3972.584547351842,-3811.848526139494],[3977.3879551134887,-3804.4992262463575],[3983.9872564819234,-3809.002313889728],[3986.6882575328054,-3807.3530691403216],[3965.841417147196,-3790.542939045852],[3964.0402152666356,-3793.0926464996883],[3974.238436841173,-3801.947694073258],[3970.7864419650577,-3805.9970115154556],[3923.994065116305,-3766.824063868383],[3897.148397715733,-3744.4609145486393],[3901.05073453387,-3739.6616538764774],[3860.1071628777136,-3706.0416701601553],[3817.213528702705,-3671.8208803242055],[3755.573193779157,-3621.2407999852308],[3751.0711567317194,-3624.9896867203533],[3758.269605384179,-3632.0433665299297],[3753.316784038965,-3637.742371077719],[3746.1168424343923,-3634.739280484373],[3739.514997518825,-3637.1371966907614],[3729.167141181766,-3627.2319410626706],[3715.516869436571,-3622.576232752956],[3710.1179085339827,-3617.6235219976516],[3712.6701595360646,-3612.5237200283173],[3713.2720162517217,-3607.7232428766465],[3710.421878090827,-3606.9720831661225],[3689.862805966288,-3623.4669083267845],[3671.700544159481,-3649.5640148593443],[3656.093629846291,-3662.1600973457466],[3635.085874617216,-3674.904211052022],[3601.9259646776773,-3688.6939986619172],[3548.3636397818627,-3700.9760479885454],[3489.1010938574036,-3711.6057560714194],[3462.0953410307993,-3716.54652321077],[3420.6873273296223,-3721.9320475440163],[3356.6237513080123,-3733.4601171394384],[3291.05940411365,-3746.4878520177463],[3253.1018370428646,-3752.024669947733],[3187.687788143521,-3764.3023510070307],[3085.9656933958177,-3784.0677419312556],[3049.5081233766978,-3790.2052000983504],[2991.1449895596306,-3802.78552364565],[2882.371537373023,-3823.448446664577],[2814.405292765674,-3840.6759078705018],[2778.2469922680175,-3848.9137821445356],[2750.9400346111215,-3857.004896973781],[2715.531013809814,-3867.4933750631317],[2689.2743747955246,-3875.1348114859184],[2666.618978358223,-3880.827291279975],[2629.4114651075215,-3886.514407505283],[2606.6040562445705,-3897.6076176264564],[2556.9404187270557,-3914.991846585864],[2523.930862378824,-3927.881558552993],[2487.620936516265,-3940.4700103951973],[2411.8479170824867,-3972.9968222125],[2364.734097606706,-3991.8822094069174],[2296.013762680843,-4019.910965382457],[2222.642198301648,-4049.438225455896],[2130.9638244492817,-4090.21037630891],[2121.0601723626314,-4096.207599782848],[2107.1057098811434,-4102.803417596538],[2106.8051132906985,-4104.3035252356085],[2095.701397209923,-4110.0002627079475],[2059.839656802971,-4127.6896224089005],[2051.7370960073604,-4131.437182075466],[2031.4801134271838,-4142.381310380827],[2019.774817103811,-4152.128415891304],[1997.5669425865053,-4164.722065417638],[1986.913015502505,-4171.169077888131],[1955.4016867781174,-4189.460128422131],[1918.0374610677245,-4213.299829914076],[1898.979104822327,-4228.4450116135085],[1891.4759124897246,-4234.143076155455],[1877.3692164049426,-4246.739711586038],[1841.6552307453821,-4270.580021317738],[1826.3504059752158,-4277.625406948839],[1803.842708990327,-4289.618858596348],[1757.1730937645189,-4324.406724892795],[1742.4655915600597,-4338.953422843623],[1722.6565732560703,-4355.598546298557],[1673.4366976309975,-4390.085428943747],[1653.3279121544037,-4405.980332696101],[1635.3200404373347,-4420.225770520957],[1615.6605463041633,-4438.221145676874],[1583.397117864486,-4461.912705358849],[1537.7754989113018,-4502.551809807768],[1524.7182367575879,-4517.099115997301],[1500.7075015240407,-4536.743127662871],[1469.19191512221,-4566.585858553686],[1444.4290801725292,-4591.630379368281],[1437.9750452975277,-4600.029223781659],[1429.7195320697792,-4611.727884762406],[1416.66464758059,-4619.824252571352],[1391.452244812186,-4643.518411096966],[1291.9515583715402,-4741.746044773436],[1220.6660335251363,-4809.979709256873],[1246.1596245068067,-4837.443102902136],[1276.7519115659234,-4870.459184004483],[1329.0891793444462,-4925.686512590079],[1388.3241885963653,-4989.767672269734],[1430.6135883907846,-5035.239877638993],[1481.4509697089088,-5089.566522342067],[1539.6365450293233,-5151.697011263823],[1582.3762314698834,-5196.569295225825],[1653.0083651050227,-5272.95644676064],[1666.9550863527984,-5287.3636841416355],[1711.4938181875332,-5335.5371117395625],[1758.432346243353,-5385.211642277976],[1803.721076602349,-5433.685389993932],[1852.90899199259,-5485.911120938308],[1864.9055954278447,-5499.867574022383],[1893.5489258595044,-5529.282412548869],[1957.8828523669508,-5598.316172394783],[1965.5304817764263,-5607.770367253335],[1975.275596684165,-5624.876449198504],[2022.3521476499445,-5707.105770582942],[2023.7006852198392,-5711.606922918001],[2031.7888141448784,-5747.01505900728],[2055.0040987547836,-5850.388665579927],[2098.9432409488654,-5897.211675594352],[2120.6889957911335,-5917.322617558657],[2174.729238758475,-5965.149496222351],[2201.073967135715,-5989.862803118189],[2204.3434668213595,-5987.989568594108],[2239.806325327314,-5952.769977517314],[2294.584419189312,-5898.697308688626],[2330.278159036243,-5858.355143880029],[2396.1395571978646,-5795.849442888782],[2426.3678451501182,-5766.13971533679],[2465.3212342197075,-5723.712826043313],[2531.5148339473526,-5652.241253729614],[2568.931098839763,-5620.594451079136],[2592.6417346092057,-5598.773710370261],[2614.023816992587,-5575.574928323429],[2716.625655992975,-5475.447578807738],[2939.721224319015,-5257.226059641524],[3106.725123144686,-5091.7916303442535],[3266.8833240079693,-4933.856635202032],[3468.129358365608,-4760.81641452797],[3652.4189263533626,-4602.763465554788],[3817.631377747486,-4442.49255816629],[3941.428857623192,-4326.02774244548],[3950.686257662601,-4318.650079819073],[3958.774293085444,-4318.163751267809],[3999.090212413983,-4287.714414082335],[4170.714765251294,-4176.272158038587],[4310.818337477802,-4093.4866795764437]]]},
+{"type":"Polygon","coordinates":[[[3671.700544159481,-3649.5640148593443],[3683.6139560000447,-3632.445795704718],[3694.4136543846107,-3619.8157003077],[3708.4723685176577,-3604.8710588183776],[3706.5723317012307,-3604.22026385707],[3704.1974930398865,-3602.8441883184514],[3697.948196513258,-3598.4662478806995],[3693.4485555605206,-3595.714188959948],[3691.2000252907746,-3590.837650300459],[3691.3271170206135,-3585.2118780240517],[3689.204019644996,-3579.210221771456],[3683.456639011187,-3569.8317382220757],[3678.3328287070035,-3564.5790851946495],[3671.208865667373,-3558.9506403485734],[3665.5845218325267,-3554.94798486196],[3659.584063629154,-3553.820609410208],[3655.834024924581,-3552.4440270051264],[3628.33753491455,-3532.0559254096624],[3613.9656504617597,-3517.923571368621],[3606.216366100998,-3512.919987058218],[3573.0930440017255,-3495.280212003191],[3566.4675870268547,-3493.902569785365],[3554.5945917672943,-3483.7717192627547],[3546.596469082404,-3475.517569966351],[3537.4719846784137,-3470.513478788436],[3527.7204279587895,-3470.884939201722],[3524.5957105775014,-3468.883496262017],[3509.46855618924,-3468.7529025448166],[3481.719725868141,-3454.61561807651],[3461.8463500639773,-3442.356509355028],[3446.0991734113195,-3428.4736848197517],[3446.4757485680166,-3424.3482229279502],[3456.8576952746953,-3409.5999015558123],[3458.6097469459346,-3404.7248374169403],[3455.6106006951013,-3401.223222327888],[3437.1145445571165,-3383.2137839315774],[3416.117802155204,-3366.07855125953],[3407.61859299356,-3360.574617733105],[3400.2422896450444,-3361.1969900141858],[3390.6102677370363,-3376.445660602345],[3387.359702752321,-3376.694498925521],[3378.861922033422,-3367.3150016432155],[3378.4902773063513,-3358.0635176670294],[3381.2436725101434,-3349.9383493308997],[3381.495275559544,-3345.6878231752653],[3379.121727103775,-3340.811238437006],[3369.124004629499,-3330.6810790948857],[3358.375804411742,-3321.550788765911],[3343.7526394609304,-3310.7938335808562],[3331.37911067158,-3301.9129806001074],[3325.752785448829,-3303.286107097492],[3312.6206690521794,-3317.408323809286],[3304.619320853002,-3317.9054475104053],[3299.7450861319376,-3313.9030684964073],[3282.2480235106486,-3299.0194533726008],[3272.3736143070855,-3293.5150129797134],[3262.2503667802957,-3284.760007601876],[3209.5074837076536,-3244.609724757266],[3184.7636516424245,-3218.0967457971956],[3174.51483298518,-3210.841912568706],[3145.01943436687,-3186.702528142116],[3133.0207758184697,-3178.3218861400314],[3115.2744140862196,-3161.4378878871626],[3111.899844647909,-3158.9362800475637],[3094.283247213636,-3129.175454748882],[3061.790683731553,-3096.158673248192],[3038.796875871689,-3070.271430319361],[3004.9282368510903,-3039.629487479973],[2994.304363636533,-3032.3745160151757],[2946.555618726765,-3010.1036768747254],[2920.6820151126303,-2996.0921017730216],[2900.308843038598,-2983.082699622929],[2884.1865657502494,-2969.3247550364085],[2866.689503128495,-2954.4411399126016],[2850.191802653979,-2941.683202575535],[2796.696644764568,-2907.408497985712],[2779.4468077095516,-2900.151084346141],[2707.5695529635705,-2877.8713520021656],[2645.4442235677852,-2854.2200137601935],[2572.6930395690724,-2828.68948603742],[2535.5648962811974,-2822.549909544355],[2474.185022044374,-2811.525684528403],[2364.676694383408,-2790.857318889097],[2332.1746847536415,-2783.4692654546066],[2242.0391993679223,-2776.310006077595],[2202.533590928826,-2775.9203906292028],[2193.406618271314,-2777.667281479388],[2157.64952793697,-2782.7798485641865],[2022.6227912696195,-2801.982884087678],[1972.3614256946312,-2812.9659607626413],[1929.4762713101518,-2823.5767015277015],[1892.5936025962292,-2829.814017574402],[1864.2148661156243,-2828.7409031154757],[1831.4646632653603,-2816.3520300956916],[1808.837846178183,-2812.3431078964527],[1783.834623750212,-2811.208728471766],[1740.453589791694,-2810.4426300252835],[1730.7027242536133,-2808.9388176531606],[1720.2015652866394,-2807.9348015507776],[1698.0762954626407,-2799.9254817246206],[1671.2014404721267,-2788.9139744489967],[1612.326768218627,-2764.7637615126705],[1575.198624931625,-2758.6241850196047],[1558.4472478617681,-2755.7425921943986],[1539.9489799428557,-2743.7340267105565],[1521.450435551349,-2732.4755703412975],[1497.5742199461092,-2726.340878197779],[1471.3234421512752,-2718.080001402107],[1461.6992997137131,-2711.950562238289],[1451.2008593937207,-2703.5704731803853],[1431.7045195344253,-2685.935720711214],[1407.7043916335679,-2676.8005460337413],[1389.3289301189361,-2670.7928995411366],[1322.3222698716563,-2662.391982880557],[1311.5695539340668,-2665.5134747487446],[1294.4421546531958,-2665.257125585122],[1272.6905570220842,-2660.998489566089],[1272.312415188091,-2669.3745697710638],[1269.5548268149723,-2688.876393004708],[1268.79937256439,-2703.378226070906],[1267.1709106360504,-2712.1289000444276],[1263.0329153191997,-2745.757271393131],[1257.7688347567746,-2781.8855917467886],[1255.7587750863458,-2808.3887098512773],[1252.3731006646412,-2836.0164847601295],[1248.7374820296536,-2863.3941311402646],[1250.345945771638,-2908.9013497522274],[1250.21567460589,-2923.1533768410927],[1250.958964062651,-2941.6563447945173],[1254.9531410555646,-2959.0353471240674],[1267.184694672149,-3013.922846358463],[1267.429846693849,-3027.1748661978763],[1268.2994445422373,-3042.17737103043],[1274.6704415835557,-3055.556666915653],[1273.9145726227725,-3071.1836636537246],[1272.4142622372601,-3071.433147079671],[1271.3965607402497,-3119.064707194064],[1270.8943222960224,-3124.9403776063905],[1269.2596858126053,-3150.4434884614257],[1268.5052452949749,-3162.1949214425676],[1263.7402237421193,-3201.0738261963584],[1262.362673681666,-3207.4492467996547],[1260.1099502430297,-3213.949363037681],[1257.48115851506,-3223.199741123404],[1246.5946694256854,-3250.0746421915137],[1239.8379736313364,-3265.5744089625455],[1234.5814960649877,-3281.0747286788087],[1228.1987028582662,-3299.700088328496],[1218.4386215667473,-3323.199913092005],[1210.1801869455085,-3342.8247270459133],[1201.5449006944546,-3367.325112004107],[1197.287739196152,-3385.0761276932253],[1197.1612464894424,-3389.0766635554],[1198.5341425937659,-3395.328079706558],[1205.774276694894,-3424.9600622812736],[1210.7715482149506,-3434.338269358039],[1210.769612906617,-3439.589033156973],[1213.2634334343602,-3457.3425370985833],[1212.5104674369213,-3465.093388138779],[1207.9999979746935,-3491.7206028529467],[1198.1090925730823,-3530.972672934488],[1191.8474930137163,-3559.974588073648],[1183.5786906689173,-3607.7284938055363],[1184.0756300560024,-3616.2299147469585],[1184.0720359119878,-3625.9813332302438],[1185.19706134632,-3626.356802496459],[1185.0702000094752,-3631.357483844395],[1186.3199210785097,-3632.608126489028],[1198.1813044881856,-3674.243559804192],[1199.2987730047898,-3695.1220115216875],[1173.9160263802041,-3706.1142578717427],[1153.7852876800462,-3713.732948516582],[1129.0279084566282,-3723.9753161459003],[1123.9014255834045,-3725.9737178868318],[1113.022908119805,-3731.2204728328356],[1092.8917086332513,-3740.089345334615],[1064.7577785835892,-3753.2058871072813],[1035.3734362842515,-3766.9470590217734],[1015.4907525691087,-3779.9416238081503],[1004.4863875029259,-3787.438660018086],[998.1089855126629,-3791.436891941796],[988.1047659319302,-3798.934296781886],[975.9742234617297,-3809.1813183669037],[964.2195188870246,-3817.303169031642],[953.5887799371849,-3828.6759072337672],[937.455489822547,-3844.797309025571],[923.8234389188292,-3858.5442868639457],[902.6859193904093,-3884.1652276170835],[897.1827231255011,-3890.6641458060576],[885.1747566657141,-3907.537177311831],[857.6576233665692,-3943.157222901147],[823.8855258517433,-3989.776564893271],[815.2551239498134,-4001.0250221695906],[793.7413057381928,-4030.0213156988957],[758.469036073715,-4076.515086559674],[748.7119038229866,-4092.0137474402427],[740.3317226087383,-4102.762224130694],[734.3287300730299,-4108.510848891057],[699.556901780772,-4154.0046585811515],[699.9311269202444,-4156.25512416016],[715.9188937960134,-4195.766768918125],[724.1621224243136,-4217.3979562400555],[757.2605619881651,-4302.547551562441],[766.0038633584918,-4324.178923199448],[799.3525236087153,-4408.828537937015],[810.5936543605931,-4437.336831361524],[839.8195713665627,-4514.233797987943],[851.4351115730242,-4544.492484248053],[863.4256141792284,-4575.001345115649],[866.2994657709496,-4579.253023240516],[872.1718645908404,-4588.631552869717],[893.4141276459268,-4618.018659895416],[913.9065580589813,-4646.655381333916],[963.887889985228,-4717.059051381217],[1036.8602650442917,-4820.851055497933],[1077.8446650835685,-4879.374680232922],[1093.4770991157857,-4865.378403282628],[1111.111667269608,-4846.382136165937],[1120.1176766740973,-4833.633598897808],[1125.8698494994605,-4830.0101911364945],[1142.5033966712363,-4813.388900916361],[1152.8746531034703,-4827.644798621849],[1164.7450679519388,-4844.776667543738],[1170.6173285341938,-4854.53025172918],[1183.498947773187,-4841.658124716786],[1201.63243670034,-4825.787496557519],[1220.6660335251363,-4809.979709256873],[1250.0378446585091,-4781.865357704019],[1315.8835518089181,-4718.120247116758],[1368.5002585733891,-4666.176740170284],[1415.3677171835734,-4621.043084220031],[1429.7195320697792,-4611.727884762406],[1439.9701642029395,-4597.432910994821],[1474.7275975070952,-4561.344011627498],[1500.7075015240407,-4536.743127662871],[1528.435918773117,-4512.957186552284],[1553.8517303618137,-4488.23132614053],[1589.2163093290292,-4457.639578523443],[1619.5966808833182,-4434.618193437785],[1639.013864284294,-4417.303707394826],[1663.7666808283539,-4397.729052500681],[1694.2515733752807,-4375.501073173813],[1725.6434096021985,-4353.088767220258],[1745.025267823512,-4336.42173276224],[1766.8185712512059,-4317.216916716006],[1792.1022216427955,-4298.370302166912],[1803.842708990327,-4289.618858596348],[1817.7834624866955,-4282.190388545116],[1836.87679580212,-4272.779714381268],[1851.8979625982174,-4263.742646676735],[1873.8390137091337,-4249.096242904141],[1895.5128734759346,-4231.077332504313],[1925.2935233238386,-4208.670204788197],[1956.7009467717144,-4188.705960598115],[1991.8657772519218,-4168.172012439279],[2019.774817103811,-4152.128415891304],[2028.867455862346,-4144.556893829956],[2061.2828085489455,-4126.97776542507],[2103.220474313537,-4106.14261649437],[2107.1057098811434,-4102.803417596538],[2145.7869429755665,-4083.6180863368636],[2206.0513240513683,-4056.8166899648845],[2242.621713774686,-4041.397776073606],[2258.722908618307,-4034.918097308331],[2288.235737993906,-4023.0411120513704],[2321.791224103974,-4009.3971898509253],[2364.734097606706,-3991.8822094069174],[2417.7494613573945,-3970.4634875041756],[2482.444732914504,-3942.6919807182594],[2544.7248240704066,-3919.7618439464263],[2577.1970695405325,-3904.947849217793],[2625.959231002227,-3888.193526714318],[2645.315603045281,-3881.5695485712185],[2662.1189319131663,-3879.1753923934557],[2676.822563501075,-3875.130222040495],[2696.027458014345,-3869.4364704724067],[2732.0367872846837,-3858.348126269272],[2758.7437129456084,-3850.1067684392283],[2766.094948147045,-3849.6594124027433],[2786.949806238088,-3844.7163781879426],[2814.556641657953,-3837.075439416915],[2836.6113425637013,-3833.032978495589],[2870.5198686644435,-3823.2940565745403],[2892.574569571065,-3819.251595653215],[2921.831313273724,-3812.5113960592316],[2959.4891131714685,-3806.2243584256157],[2990.6960852765187,-3799.6348994831405],[3033.455511861859,-3790.949392697905],[3114.472549162805,-3776.7271785727794],[3162.783557317016,-3765.943412167009],[3209.7433737620886,-3757.859540920298],[3216.344942205964,-3756.2117338284943],[3226.5469791034993,-3754.715275627953],[3232.6985926674097,-3752.7672590061156],[3252.352557347389,-3749.774066132417],[3305.6023264842806,-3743.598151362842],[3331.1188802440593,-3736.601175349441],[3349.956621562742,-3734.7848858958114],[3380.4794882120914,-3727.3180142323977],[3397.1524076051137,-3726.167093561261],[3417.987321581488,-3720.880899482602],[3483.550784063438,-3710.253513768652],[3550.7651501309592,-3697.8264744209255],[3603.4275652687065,-3684.9440060363313],[3617.2311765094637,-3680.598460270819],[3631.3454390909174,-3676.459698131537],[3637.1879495608446,-3670.1042868455816],[3655.7953003312577,-3657.5093102496435],[3671.700544159481,-3649.5640148593443]]]},
+{"type":"Polygon","coordinates":[[[5830.0944625836855,-5980.026803589564],[5878.118034242216,-5935.037950991371],[5929.338385152805,-5900.051732864135],[5926.539599766373,-5895.650060563823],[6005.972900490364,-5836.670746156024],[6048.990878804412,-5804.881970815746],[6068.398567139375,-5791.687201833104],[6204.055231708655,-5691.522610439431],[6269.0827511405805,-5642.539442611869],[6292.492717116518,-5624.745478917022],[6305.094697685447,-5624.350065463085],[6327.704768451309,-5605.955719572237],[6418.144019351603,-5535.178743368144],[6391.355307903403,-5493.962870079451],[6301.393674983032,-5354.3093835959135],[6283.001835775911,-5324.89832352851],[6223.227418351773,-5231.86274929888],[6198.837139191368,-5195.848517246206],[6167.845973553747,-5159.631823138621],[6051.4812370772415,-5017.9683138485325],[6030.287368539226,-4992.9568617525765],[6008.094460407505,-4964.944604571285],[5892.725298401667,-4835.683267930169],[5883.327690865583,-4825.478318855313],[5756.157254488993,-4695.012457796722],[5716.96607548694,-4655.592275367645],[5687.573078297282,-4624.9769857868905],[5784.618081593682,-4541.20055123112],[5812.430604581925,-4518.207452983204],[5895.474308342207,-4432.425566634799],[5937.696446377435,-4389.034808758299],[5955.705553005508,-4371.438883557561],[5959.907196209941,-4368.640024444918],[6156.756544760428,-4312.504394576541],[6273.385968063289,-4278.742459444109],[6296.6188337384665,-4198.739372827993],[6310.639154590986,-4149.137317571727],[6328.664259767771,-4088.1350783019716],[6291.260809214989,-4082.7205059125554],[6266.658557341609,-4079.1109138636953],[6221.853366661846,-4075.493875484666],[6180.4494816188235,-4069.6777703807466],[6126.045032333466,-4060.256349336709],[5979.840203265019,-4015.5959669574577],[5911.24135559448,-3985.3662852685334],[5834.245340776979,-3944.131906746088],[5812.8452501559805,-3935.9228250798515],[5755.849196005554,-3902.6969830434346],[5742.850180009787,-3894.8910560654285],[5679.4492135485925,-3872.464426039306],[5656.448890149448,-3864.2547545648213],[5642.047974775865,-3861.0489807374215],[5584.445050539653,-3846.2255944562985],[5528.439999848197,-3837.8037290897755],[5488.236363114382,-3831.7880372440495],[5448.031620488822,-3828.7727818556073],[5394.824986554042,-3825.7527342751573],[5368.421219463606,-3825.542973342138],[5328.014825768536,-3826.9282843635438],[5271.606620390085,-3826.9074936228335],[5252.0049484914925,-3823.69980291863],[5226.202374583343,-3820.489826706419],[5188.197878300358,-3817.675411401259],[5161.994140307215,-3817.4657241942705],[5148.391793075163,-3818.460856309931],[5109.980824433849,-3833.048824999285],[5105.779844764591,-3834.0474222383973],[5072.765680539422,-3859.4389527738667],[5062.1633274067135,-3861.635365362694],[5020.35702493618,-3862.2200439130647],[5004.754091828654,-3864.0145551561855],[4984.146966171305,-3875.20859081217],[4967.743105688802,-3879.203127219632],[4951.941175648884,-3878.19715737743],[4932.340462188731,-3872.3890884108782],[4893.930968068016,-3882.9764751592866],[4850.123047558474,-3887.1609401974592],[4801.5141338147805,-3892.143752198659],[4769.305320525105,-3903.333511744852],[4740.497001886804,-3914.52452463357],[4720.692867932346,-3917.91772040663],[4668.681763839035,-3927.499948299177],[4617.870981781394,-3936.682560354025],[4580.461854323337,-3946.670228440711],[4546.853500889731,-3956.059210030108],[4516.248754130065,-3956.8480463362002],[4468.040709566791,-3959.630685722048],[4438.634736595704,-3964.2205172283284],[4399.027648303338,-3967.8064432223227],[4389.826088659291,-3968.4031391157287],[4380.425163451844,-3967.199499409574],[4375.023788022198,-3968.7977415833275],[4357.8177468230715,-3978.3927978052493],[4377.407327652618,-4014.405260432131],[4380.604622986488,-4023.007691224492],[4391.798142559943,-4045.0150205616183],[4403.591896876838,-4066.6225128829537],[4413.38403315426,-4091.829791692091],[4430.774399806076,-4124.841006876399],[4449.966207948426,-4154.65242004181],[4456.161875409802,-4168.856771442166],[4459.75325712972,-4193.6617065504615],[4464.748233927065,-4209.265819274279],[4479.140523355454,-4235.874997461771],[4492.934863546485,-4256.683110654596],[4501.128905102465,-4276.088955839961],[4512.920668817387,-4303.097233782937],[4533.308596609917,-4343.9106896447565],[4550.29846271142,-4378.121931959707],[4572.883835257351,-4426.737333593864],[4601.074003727175,-4464.553228314653],[4613.670528569812,-4478.959968044942],[4642.8555342504405,-4531.178326386227],[4664.246409117593,-4564.3910451880965],[4670.442961292225,-4576.195047424097],[4680.240995651664,-4585.399998465253],[4707.831298008678,-4622.615584716074],[4722.023558340239,-4649.224689177536],[4734.416072879947,-4674.432926425075],[4746.212702512043,-4688.239283960413],[4778.202612840541,-4728.256899543205],[4818.3898823954805,-4778.67905094161],[4825.189102272125,-4783.482255957473],[4846.581672838423,-4812.09430552652],[4861.376158515399,-4832.902787350549],[4875.3735505718505,-4845.509781289524],[4884.170849638904,-4856.314596477114],[4922.560437731707,-4899.735065944062],[4935.957521317876,-4912.94192599577],[4990.144247258577,-4970.370256615615],[5006.540440233861,-4987.178746304848],[5059.72864266223,-5040.206068158661],[5083.524880064069,-5059.817693071376],[5119.323084471223,-5078.833654254069],[5151.316165018157,-5110.250018662044],[5160.514554443333,-5118.254573943455],[5190.506827937992,-5151.070404770768],[5203.902437003533,-5168.277846764469],[5218.0998581572785,-5180.884914429474],[5227.897081530828,-5192.290185539096],[5238.495674635982,-5200.295256902724],[5244.493893411593,-5207.498516178821],[5257.091524144256,-5218.904819452875],[5261.890010693343,-5224.907461790084],[5265.489576003136,-5227.509167120989],[5274.691725454992,-5225.312238449945],[5286.888929363835,-5237.718539757698],[5309.283930923004,-5260.13005594749],[5338.274510684714,-5297.146129183585],[5350.869266102585,-5316.353567244687],[5363.865480508743,-5331.760599911748],[5369.06365662266,-5338.763535186779],[5374.063646788767,-5340.765669309074],[5384.061341615772,-5350.970839562023],[5410.05133747033,-5388.385865101539],[5445.835386478691,-5445.807412926543],[5460.428958346456,-5469.016170188899],[5476.420964469056,-5497.026141864285],[5494.215370521037,-5519.235933258424],[5512.610158768075,-5540.645829441835],[5522.605862992234,-5556.251785316425],[5536.400645540358,-5575.859723927597],[5542.7975217150815,-5586.86368349976],[5565.7845007026335,-5631.278621548091],[5584.574702403392,-5665.2904983003755],[5589.5712274464895,-5676.693999985257],[5596.768367463199,-5687.298196267658],[5621.358601993095,-5723.512531143304],[5637.152348443575,-5746.721730761845],[5644.948174956196,-5761.126701067391],[5675.7388691398955,-5798.543496032698],[5700.332642520632,-5825.156434246717],[5720.5261443942145,-5850.767605003344],[5734.919908343232,-5873.376201248842],[5742.916869843582,-5884.780808824187],[5756.111638825911,-5904.188497160323],[5763.708099775104,-5916.793131866309],[5774.706013814051,-5926.798641652469],[5804.299629908783,-5955.813772182667],[5820.09558814019,-5973.022098889791],[5827.093952401279,-5980.225726796043],[5830.0944625836855,-5980.026803589564]]]},
+{"type":"Polygon","coordinates":[[[5624.760660422966,-2253.1140141677524],[5601.136763469316,-2229.954926838069],[5612.778453421779,-2209.317385563658],[5609.96328112483,-2185.0920871128856],[5616.207460277714,-2172.286228166724],[5620.017467899248,-2159.1628685873147],[5629.740924844518,-2104.228644135341],[5624.58153952565,-2085.1786060360555],[5637.7776596695185,-2063.9126780864444],[5640.9526660190895,-2052.8001558627857],[5651.006852793507,-2025.5480180249815],[5659.495445326902,-2016.852166831477],[5661.854791156948,-1997.7667124613945],[5647.897992409766,-1978.848966292444],[5652.383831818588,-1965.302813072889],[5653.851129314862,-1945.4452536529716],[5649.882371378131,-1933.2082500114702],[5648.2287222370505,-1916.0102989479801],[5640.291206363589,-1903.7732953087016],[5638.769849152304,-1898.6359586455237],[5641.415687778965,-1888.0526041454268],[5658.349054977298,-1867.9442305945777],[5669.990744928829,-1837.2525025436298],[5671.710540034808,-1791.7440781952137],[5659.01051463373,-1761.1846420746006],[5678.060552734882,-1730.2283301629832],[5684.5296281715855,-1652.0614377187212],[5555.544995202683,-1607.4790568870903],[4662.265778090805,-1314.7170130278573],[4232.581585385837,-1200.6813682905922],[3971.4373130993918,-1132.4187317646356],[3578.520971527323,-1016.8055966508146],[3156.3774189073592,-870.1820395137329],[2845.2267966056243,-764.3484945127657],[2556.402911223471,-666.5209664302947],[1862.559563822113,-1052.721500134896],[1425.2403889084235,-2288.740302500032],[1593.2657151762396,-2286.401883200255],[1727.6790754338726,-2303.2538712488076],[1950.8602344691753,-2442.556401074973],[2013.2551573617384,-2480.9849902367605],[2066.0681472690776,-2466.602358919403],[2222.0890735741705,-2471.460563553812],[2351.691118951887,-2517.1149721578577],[2459.7041772445664,-2524.3558317112766],[2606.106012644246,-2577.217480796081],[2769.3129463316873,-2622.8842753729787],[2903.7094970569015,-2685.3428975582274],[3004.51089130342,-2721.3852929551103],[3053.063789102249,-2732.7048339350476],[3093.0544025255367,-2773.9755804155147],[3111.7965322611853,-2802.7366749369685],[3185.54159503337,-2845.2700445445753],[3223.0355310449377,-2876.538414594026],[3284.281539973803,-2911.5660851807206],[3326.7762034116313,-2942.836298384491],[3344.2681512897834,-2971.59693211792],[3383.01180837024,-3004.1159448147655],[3410.5038287434727,-3036.630810419392],[3455.5025421977043,-3057.900490342021],[3486.7437257738784,-3094.167283882167],[3527.9937368081883,-3110.43485401435],[3575.4882060987875,-3144.207274082293],[3605.482433333993,-3171.7223338365957],[3626.723544418812,-3204.234895503322],[3649.2208276037127,-3220.4955538218055],[3669.2122176196426,-3251.75747284558],[3685.4788661757484,-3213.0078255249537],[3705.5154133867472,-3121.7519225792666],[3708.0236104913056,-3100.499752588232],[3701.7441323697567,-3178.0087237735524],[3682.9628356816247,-3255.5130870808507],[3727.9509510183707,-3305.5369497090123],[3760.44277724158,-3340.554022180033],[3776.681778536178,-3376.81528626833],[3826.6747683892027,-3415.589355336473],[3870.4274470759556,-3425.606937761184],[3932.903823990375,-3514.3928889799636],[3967.899700228125,-3539.4094281698444],[3991.640253451653,-3574.4232751269165],[4014.131546393968,-3606.9362975838885],[4055.375567190349,-3639.4562318545613],[4079.1221106536686,-3658.2177146731447],[4101.61017808225,-3699.4820101257146],[4179.097492245957,-3764.5200355171837],[4275.337534260005,-3829.5649727245745],[4354.091618636623,-3849.5969120578256],[4441.6025054631755,-3854.6298946236857],[4494.111065023579,-3852.14888399308],[4620.391873829998,-3818.440513416086],[4656.651755554602,-3805.9520576906407],[4719.16315233428,-3799.7241877927836],[4746.66623160895,-3802.23468883473],[4795.427010325715,-3792.2512046993816],[4801.683449061587,-3777.2513263559413],[4824.190869573504,-3766.00798382382],[5062.99034942966,-3726.090174854391],[5074.23968220409,-3732.3452312279096],[5090.493889492936,-3727.3504940414095],[5104.248654644936,-3719.854471564564],[5176.7615062771365,-3713.630287966459],[5208.017895849422,-3708.641080231808],[5314.762835945003,-3698.968176474713],[5484.786646896973,-3701.5312073136647],[5619.7979932539165,-3724.0842458067564],[5744.802355305292,-3761.6357802814373],[5902.299465152435,-3831.7040235128416],[5964.795655938797,-3866.73215488756],[5994.801863653585,-3861.742486364885],[5992.338362954557,-3761.7270162436052],[6019.367880138569,-3692.3102034780877],[6047.37637729384,-3680.318779294541],[6051.40128882695,-3614.3106517765445],[6091.426277012564,-3562.317831739939],[6077.429401036352,-3548.3106341206667],[6043.426666312851,-3542.297227782755],[6029.434213900007,-3516.288284338855],[6081.452100787312,-3488.3033795138726],[6103.467097630724,-3456.3068338436506],[6093.474489901215,-3432.2996558924215],[6041.455128491856,-3464.285142656725],[6035.46383996401,-3438.2791482544035],[6075.482192808762,-3404.2889469558504],[6071.494144291617,-3370.2825259308374],[6035.485957773402,-3378.2704191290422],[6013.487917916849,-3364.260272468191],[6035.507338322699,-3320.2619809711196],[6051.51187787205,-3314.2670061430736],[6037.559237515554,-3180.242350268635],[6001.59454935696,-3070.213076183556],[5967.605085318908,-3028.1944323695398],[5949.624584387988,-2968.179067900627],[5935.630657455884,-2946.1707063982694],[5945.642433954403,-2918.170319107222],[5927.647187819704,-2898.1607740559575],[5953.660554824397,-2872.166575817728],[5915.666085282341,-2842.14820330755],[5889.662302660756,-2842.1386189246414],[5809.6772051956505,-2770.098653558869],[5747.724954142235,-2616.0533937294695],[5687.806170773692,-2371.9957774702007],[5673.973258849233,-2358.4183914429377],[5670.087318039499,-2324.728866385736],[5663.919072072953,-2289.0974194676373],[5657.360834251158,-2258.9268597813343],[5647.844586973079,-2251.9635740115855],[5635.842103888281,-2253.9594414188787],[5624.760660422966,-2253.1140141677524]]]}
+]}
\ No newline at end of file
diff --git a/Leaflet/assets/js/kecamatan-layer.js b/Leaflet/assets/js/kecamatan-layer.js
new file mode 100644
index 0000000..914effd
--- /dev/null
+++ b/Leaflet/assets/js/kecamatan-layer.js
@@ -0,0 +1,155 @@
+(function () {
+	'use strict';
+
+	const DEFAULT_SOURCE = 'assets/data/Kecamatan.json';
+	const DEFAULT_ANCHOR = {
+		lat: -0.06054796552220232,
+		lng: 109.34490231930592
+	};
+	const DEFAULT_GEO_BOUNDS = {
+		south: -0.0981948,
+		west: 109.2741676,
+		north: 0.0381168,
+		east: 109.3853475
+	};
+	const DEFAULT_CALIBRATION = {
+		scaleX: 1,
+		scaleY: 1,
+		offsetLat: 0,
+		offsetLng: 0
+	};
+
+	function walkCoordinates(coordinates, callback) {
+		if (!Array.isArray(coordinates)) {
+			return;
+		}
+
+		if (coordinates.length >= 2 && typeof coordinates[0] === 'number' && typeof coordinates[1] === 'number') {
+			callback(coordinates[0], coordinates[1]);
+			return;
+		}
+
+		coordinates.forEach((child) => walkCoordinates(child, callback));
+	}
+
+	function getCoordinateBounds(data) {
+		const bounds = {
+			minX: Infinity,
+			minY: Infinity,
+			maxX: -Infinity,
+			maxY: -Infinity
+		};
+
+		function addGeometry(geometry) {
+			if (!geometry) {
+				return;
+			}
+
+			if (geometry.type === 'GeometryCollection') {
+				(geometry.geometries || []).forEach(addGeometry);
+				return;
+			}
+
+			walkCoordinates(geometry.coordinates, (x, y) => {
+				bounds.minX = Math.min(bounds.minX, x);
+				bounds.minY = Math.min(bounds.minY, y);
+				bounds.maxX = Math.max(bounds.maxX, x);
+				bounds.maxY = Math.max(bounds.maxY, y);
+			});
+		}
+
+		if (data.type === 'FeatureCollection') {
+			(data.features || []).forEach((feature) => addGeometry(feature.geometry));
+		} else if (data.type === 'Feature') {
+			addGeometry(data.geometry);
+		} else {
+			addGeometry(data);
+		}
+
+		if (!Number.isFinite(bounds.minX) || !Number.isFinite(bounds.minY)) {
+			return null;
+		}
+
+		return bounds;
+	}
+
+	function createBoundingBoxTransform(sourceBounds, targetBounds, calibration) {
+		const sourceWidth = sourceBounds.maxX - sourceBounds.minX;
+		const sourceHeight = sourceBounds.maxY - sourceBounds.minY;
+		const targetCenterLng = (targetBounds.west + targetBounds.east) / 2 + calibration.offsetLng;
+		const targetCenterLat = (targetBounds.south + targetBounds.north) / 2 + calibration.offsetLat;
+		const targetWidth = (targetBounds.east - targetBounds.west) * calibration.scaleX;
+		const targetHeight = (targetBounds.north - targetBounds.south) * calibration.scaleY;
+
+		return function coordsToLatLng(coordinates) {
+			const xRatio = ((coordinates[0] - sourceBounds.minX) / sourceWidth) - 0.5;
+			const yRatio = ((coordinates[1] - sourceBounds.minY) / sourceHeight) - 0.5;
+			const lng = targetCenterLng + (xRatio * targetWidth);
+			const lat = targetCenterLat + (yRatio * targetHeight);
+			return L.latLng(lat, lng);
+		};
+	}
+
+	window.addKecamatanLayer = async function addKecamatanLayer(map, options) {
+		const settings = Object.assign({
+			source: DEFAULT_SOURCE,
+			anchor: DEFAULT_ANCHOR,
+			targetBounds: DEFAULT_GEO_BOUNDS,
+			calibration: DEFAULT_CALIBRATION,
+			fitBounds: false
+		}, options || {});
+
+		if (!map || typeof L === 'undefined') {
+			return null;
+		}
+
+		if (!map.getPane('kecamatanPane')) {
+			map.createPane('kecamatanPane');
+			map.getPane('kecamatanPane').style.zIndex = 350;
+		}
+
+		const response = await fetch(settings.source, {
+			headers: { 'Accept': 'application/json' }
+		});
+
+		if (!response.ok) {
+			throw new Error('Gagal memuat data batas kecamatan.');
+		}
+
+		const data = await response.json();
+		const coordinateBounds = getCoordinateBounds(data);
+
+		if (!coordinateBounds) {
+			throw new Error('Data batas kecamatan tidak memiliki koordinat valid.');
+		}
+
+		const layer = L.geoJSON(data, {
+			coordsToLatLng: createBoundingBoxTransform(coordinateBounds, settings.targetBounds, settings.calibration),
+			pane: 'kecamatanPane',
+			style: {
+				color: '#0f766e',
+				weight: 2,
+				opacity: 0.9,
+				fillColor: '#14b8a6',
+				fillOpacity: 0.08,
+				dashArray: '6 4'
+			},
+			onEachFeature: function (feature, featureLayer) {
+				const name = feature && feature.properties && (
+					feature.properties.nama ||
+					feature.properties.NAMA ||
+					feature.properties.KECAMATAN ||
+					feature.properties.kecamatan
+				);
+
+				featureLayer.bindPopup(name ? `Kecamatan: ${name}` : 'Batas Kecamatan');
+			}
+		}).addTo(map);
+
+		if (settings.fitBounds && layer.getBounds().isValid()) {
+			map.fitBounds(layer.getBounds().pad(0.12), { maxZoom: 15 });
+		}
+
+		return layer;
+	};
+}());
diff --git a/Leaflet/assets/js/map.js b/Leaflet/assets/js/map.js
new file mode 100644
index 0000000..d9be657
--- /dev/null
+++ b/Leaflet/assets/js/map.js
@@ -0,0 +1,1241 @@
+function escapeHtml(value) {
+	return String(value)
+		.replace(/&/g, '&amp;')
+		.replace(/</g, '&lt;')
+		.replace(/>/g, '&gt;')
+		.replace(/"/g, '&quot;')
+		.replace(/'/g, '&#039;');
+}
+
+function setStatus(statusLabel, text, type) {
+	statusLabel.textContent = text;
+	statusLabel.classList.remove('error', 'success');
+	if (type) {
+		statusLabel.classList.add(type);
+	}
+}
+
+function buildPointForm(lat, lng) {
+	return `
+		<div class="form-popup">
+			<h3>Tambah Data SPBU</h3>
+			<div class="field">
+				<label>Nama SPBU</label>
+				<input type="text" data-field="nama" placeholder="Contoh: SPBU Pertamina 34.XXX" required>
+			</div>
+			<div class="field">
+				<label>No</label>
+				<input type="text" data-field="no" placeholder="Contoh: 001" required>
+			</div>
+			<div class="field">
+				<label>Status 24 Jam</label>
+				<select data-field="status_24jam">
+					<option value="24jam">24 Jam</option>
+					<option value="tidak">Tidak</option>
+				</select>
+			</div>
+			<div class="field">
+				<label>Latitude</label>
+				<input type="text" data-field="latitude" value="${lat.toFixed(6)}" readonly>
+			</div>
+			<div class="field">
+				<label>Longitude</label>
+				<input type="text" data-field="longitude" value="${lng.toFixed(6)}" readonly>
+			</div>
+			<div class="actions">
+				<button class="btn-save" type="button" data-action="save">Save</button>
+				<button class="btn-cancel" type="button" data-action="cancel">Cancel</button>
+			</div>
+			<div class="status" data-role="status">Klik Save untuk menyimpan data ke database.</div>
+		</div>
+	`;
+}
+
+function roadColorByStatus(status) {
+	if (status === 'nasional') {
+		return '#dc2626';
+	}
+	if (status === 'provinsi') {
+		return '#2563eb';
+	}
+	return '#16a34a';
+}
+
+function parcelColorByStatus(status) {
+	if (status === 'SHM') {
+		return '#ea580c';
+	}
+	if (status === 'HGB') {
+		return '#0ea5e9';
+	}
+	if (status === 'HGU') {
+		return '#22c55e';
+	}
+	return '#a855f7';
+}
+
+function calculatePolylineLengthMeters(latlngs) {
+	let total = 0;
+	for (let index = 1; index < latlngs.length; index += 1) {
+		total += latlngs[index - 1].distanceTo(latlngs[index]);
+	}
+	return total;
+}
+
+function calculatePolygonAreaMeters(latlngs) {
+	if (window.L && L.GeometryUtil && typeof L.GeometryUtil.geodesicArea === 'function') {
+		return L.GeometryUtil.geodesicArea(latlngs);
+	}
+
+	const earthRadius = 6378137;
+	const toRad = (degree) => degree * Math.PI / 180;
+
+	let area = 0;
+	for (let index = 0; index < latlngs.length; index += 1) {
+		const pointA = latlngs[index];
+		const pointB = latlngs[(index + 1) % latlngs.length];
+		area += toRad(pointB.lng - pointA.lng) * (2 + Math.sin(toRad(pointA.lat)) + Math.sin(toRad(pointB.lat)));
+	}
+
+	return Math.abs(area * earthRadius * earthRadius / 2);
+}
+
+function polylineToWkt(latlngs) {
+	const coordinates = latlngs.map((point) => `${point.lng} ${point.lat}`).join(', ');
+	return `LINESTRING(${coordinates})`;
+}
+
+function polygonToWkt(latlngs) {
+	const ring = latlngs.map((point) => `${point.lng} ${point.lat}`);
+	if (ring[0] !== ring[ring.length - 1]) {
+		ring.push(ring[0]);
+	}
+	return `POLYGON((${ring.join(', ')}))`;
+}
+
+async function parseJsonResponse(response) {
+	const rawText = await response.text();
+
+	try {
+		return JSON.parse(rawText);
+	} catch (error) {
+		const preview = String(rawText || '').slice(0, 180).trim();
+		if (preview) {
+			throw new Error(`Respons server bukan JSON yang valid: ${preview}`);
+		}
+		throw new Error('Respons server bukan JSON yang valid.');
+	}
+}
+
+async function initializeMap() {
+	if (typeof L === 'undefined') {
+		alert('Leaflet gagal dimuat. Periksa koneksi internet.');
+		return;
+	}
+
+	const mapContainer = document.getElementById('map');
+	if (!mapContainer) {
+		return;
+	}
+
+	const map = L.map('map', {
+		zoomControl: true
+	}).setView([-0.06054796552220232, 109.34490231930592], 13);
+
+	L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+		maxZoom: 19,
+		attribution: '&copy; OpenStreetMap contributors'
+	}).addTo(map);
+
+	if (typeof window.addKecamatanLayer === 'function') {
+		window.addKecamatanLayer(map, { fitBounds: true }).catch((error) => {
+			console.warn('Data kecamatan belum termuat:', error);
+		});
+	}
+
+	const markersLayer = L.featureGroup().addTo(map);
+	const spatialLayer = L.featureGroup().addTo(map);
+
+	let activePopupMarker = null;
+	let isDrawing = false;
+	let activeRefineState = null;
+
+	const blueIcon = L.icon({
+		iconUrl: 'assets/vendor/leaflet/images/marker-icon.png',
+		iconRetinaUrl: 'assets/vendor/leaflet/images/marker-icon-2x.png',
+		shadowUrl: 'assets/vendor/leaflet/images/marker-shadow.png',
+		iconSize: [25, 41],
+		iconAnchor: [12, 41],
+		popupAnchor: [1, -34],
+		shadowSize: [41, 41]
+	});
+
+	const yellowIcon = L.icon({
+		iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-yellow.png',
+		iconRetinaUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-yellow.png',
+		shadowUrl: 'assets/vendor/leaflet/images/marker-shadow.png',
+		iconSize: [25, 41],
+		iconAnchor: [12, 41],
+		popupAnchor: [1, -34],
+		shadowSize: [41, 41]
+	});
+
+	const modalBackdrop = document.getElementById('modal-backdrop');
+	const modalTitle = document.getElementById('modal-title');
+	const featureForm = document.getElementById('feature-form');
+	const roadFields = document.getElementById('road-fields');
+	const parcelFields = document.getElementById('parcel-fields');
+	const formStatus = document.getElementById('form-status');
+	const cancelButton = document.getElementById('btn-cancel');
+
+	let pendingLayer = null;
+	let pendingType = null;
+	let pendingMode = 'create';
+
+	function setSectionEnabled(sectionElement, enabled) {
+		if (!sectionElement) {
+			return;
+		}
+
+		const fields = sectionElement.querySelectorAll('input, select, textarea, button');
+		fields.forEach((field) => {
+			field.disabled = !enabled;
+		});
+	}
+
+	function getPointIcon(status24Jam) {
+		const normalizedStatus = String(status24Jam || '').toLowerCase();
+		if (normalizedStatus === '24jam') {
+			return blueIcon;
+		}
+		return yellowIcon;
+	}
+
+	function fitAllData() {
+		const combined = L.featureGroup();
+		markersLayer.eachLayer((layer) => combined.addLayer(layer));
+		spatialLayer.eachLayer((layer) => combined.addLayer(layer));
+
+		if (combined.getLayers().length < 1) {
+			return;
+		}
+
+		const bounds = combined.getBounds();
+		if (!bounds.isValid()) {
+			return;
+		}
+
+		map.fitBounds(bounds.pad(0.2), { maxZoom: 16 });
+	}
+
+	function cloneLatLngs(latlngs) {
+		return JSON.parse(JSON.stringify(latlngs));
+	}
+
+	function setRefineButtonsState(refineButton, saveRefineButton, cancelRefineButton, isActive) {
+		if (refineButton) {
+			refineButton.disabled = isActive;
+		}
+		if (saveRefineButton) {
+			saveRefineButton.disabled = !isActive;
+		}
+		if (cancelRefineButton) {
+			cancelRefineButton.disabled = !isActive;
+		}
+	}
+
+	async function persistSpatialGeometry(layer) {
+		if (!layer || !layer.featureType || !layer.featureProps) {
+			return;
+		}
+
+		if (layer.featureType === 'road') {
+			const lengthMeters = calculatePolylineLengthMeters(layer.getLatLngs());
+			const payload = {
+				id: layer.featureId,
+				nama_jalan: layer.featureProps.nama_jalan,
+				status: layer.featureProps.status,
+				panjang_meter: Number(lengthMeters.toFixed(2)),
+				wkt: polylineToWkt(layer.getLatLngs())
+			};
+
+			const response = await fetch('api/road_update.php', {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+					'Accept': 'application/json'
+				},
+				body: JSON.stringify(payload)
+			});
+
+			const result = await parseJsonResponse(response);
+			if (!response.ok || !result.success) {
+				throw new Error(result.message || 'Gagal update geometri jalan.');
+			}
+
+			layer.featureProps.panjang_meter = payload.panjang_meter;
+			attachRoadPopup(layer);
+			return;
+		}
+
+		if (layer.featureType === 'parcel') {
+			const areaM2 = calculatePolygonAreaMeters(layer.getLatLngs()[0]);
+			const payload = {
+				id: layer.featureId,
+				nama_pemilik: layer.featureProps.nama_pemilik,
+				status_kepemilikan: layer.featureProps.status_kepemilikan,
+				luas_m2: Number(areaM2.toFixed(2)),
+				wkt: polygonToWkt(layer.getLatLngs()[0])
+			};
+
+			const response = await fetch('api/parcel_update.php', {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+					'Accept': 'application/json'
+				},
+				body: JSON.stringify(payload)
+			});
+
+			const result = await parseJsonResponse(response);
+			if (!response.ok || !result.success) {
+				throw new Error(result.message || 'Gagal update geometri parsil.');
+			}
+
+			layer.featureProps.luas_m2 = payload.luas_m2;
+			attachParcelPopup(layer);
+		}
+	}
+
+	function closeModal(removePendingLayer) {
+		if (!modalBackdrop || !featureForm || !formStatus) {
+			return;
+		}
+
+		modalBackdrop.classList.remove('open');
+		modalBackdrop.setAttribute('aria-hidden', 'true');
+		setStatus(formStatus, '', '');
+
+		if (removePendingLayer && pendingMode === 'create' && pendingLayer) {
+			spatialLayer.removeLayer(pendingLayer);
+		}
+
+		pendingLayer = null;
+		pendingType = null;
+		pendingMode = 'create';
+		featureForm.reset();
+		setSectionEnabled(roadFields, false);
+		setSectionEnabled(parcelFields, false);
+	}
+
+	function openRoadModal(layer, mode, initialData) {
+		if (!modalBackdrop || !modalTitle || !roadFields || !parcelFields) {
+			return;
+		}
+
+		pendingLayer = layer;
+		pendingType = 'road';
+		pendingMode = mode;
+
+		modalTitle.textContent = mode === 'create' ? 'Tambah Data Jalan' : 'Update Data Jalan';
+		roadFields.hidden = false;
+		parcelFields.hidden = true;
+		setSectionEnabled(roadFields, true);
+		setSectionEnabled(parcelFields, false);
+
+		const latlngs = layer.getLatLngs();
+		const lengthMeters = calculatePolylineLengthMeters(latlngs);
+
+		document.getElementById('nama_jalan').value = initialData && initialData.nama_jalan ? initialData.nama_jalan : '';
+		document.getElementById('status_jalan').value = initialData && initialData.status ? initialData.status : 'nasional';
+		document.getElementById('panjang_meter').value = lengthMeters.toFixed(2);
+
+		modalBackdrop.classList.add('open');
+		modalBackdrop.setAttribute('aria-hidden', 'false');
+	}
+
+	function openParcelModal(layer, mode, initialData) {
+		if (!modalBackdrop || !modalTitle || !roadFields || !parcelFields) {
+			return;
+		}
+
+		pendingLayer = layer;
+		pendingType = 'parcel';
+		pendingMode = mode;
+
+		modalTitle.textContent = mode === 'create' ? 'Tambah Data Parsil Tanah' : 'Update Data Parsil Tanah';
+		roadFields.hidden = true;
+		parcelFields.hidden = false;
+		setSectionEnabled(roadFields, false);
+		setSectionEnabled(parcelFields, true);
+
+		const latlngs = layer.getLatLngs()[0];
+		const areaM2 = calculatePolygonAreaMeters(latlngs);
+
+		document.getElementById('nama_pemilik').value = initialData && initialData.nama_pemilik ? initialData.nama_pemilik : '';
+		document.getElementById('status_kepemilikan').value = initialData && initialData.status_kepemilikan ? initialData.status_kepemilikan : 'SHM';
+		document.getElementById('luas_m2').value = areaM2.toFixed(2);
+
+		modalBackdrop.classList.add('open');
+		modalBackdrop.setAttribute('aria-hidden', 'false');
+	}
+
+	function renderPoint(point) {
+		const pointId = Number(point.id);
+		const latitude = Number(point.latitude);
+		const longitude = Number(point.longitude);
+
+		if (!Number.isFinite(pointId) || !Number.isFinite(latitude) || !Number.isFinite(longitude)) {
+			return;
+		}
+
+		const marker = L.marker([latitude, longitude], {
+			icon: getPointIcon(point.status_24jam),
+			draggable: true
+		});
+
+		marker.addTo(markersLayer);
+		marker.bindPopup(`
+			<div class="point-popup">
+				<b>${escapeHtml(point.nama || '')}</b><br>
+				No: ${escapeHtml(point.no || '')}<br>
+				Status: ${escapeHtml(point.status_24jam || '')}<br>
+				Lat: ${latitude.toFixed(6)}<br>
+				Lng: ${longitude.toFixed(6)}
+				<div class="meta">Geser marker untuk memperbarui posisi titik.</div>
+				<div class="meta">ID: ${pointId}</div>
+				<button class="btn-delete" type="button" data-action="delete" data-point-id="${pointId}">Hapus Titik</button>
+				<div class="status" data-role="delete-status"></div>
+			</div>
+		`);
+
+		let previousLatLng = null;
+
+		marker.on('dragstart', () => {
+			previousLatLng = marker.getLatLng();
+		});
+
+		marker.on('dragend', async () => {
+			const latestLatLng = marker.getLatLng();
+			try {
+				await updatePointPosition(pointId, latestLatLng.lat, latestLatLng.lng);
+				await loadPoints();
+			} catch (error) {
+				if (previousLatLng) {
+					marker.setLatLng(previousLatLng);
+				}
+				alert(error.message || 'Gagal memperbarui posisi titik.');
+			}
+		});
+
+		marker.on('popupopen', (popupEvent) => {
+			const popupElement = popupEvent.popup.getElement();
+			if (!popupElement) {
+				return;
+			}
+
+			const deleteButton = popupElement.querySelector('[data-action="delete"]');
+			const deleteStatus = popupElement.querySelector('[data-role="delete-status"]');
+
+			if (!deleteButton || !deleteStatus) {
+				return;
+			}
+
+			deleteButton.addEventListener('click', async () => {
+				const requestedId = Number(deleteButton.getAttribute('data-point-id'));
+				if (!Number.isFinite(requestedId) || requestedId <= 0) {
+					setStatus(deleteStatus, 'ID titik tidak valid.', 'error');
+					return;
+				}
+
+				const isConfirmed = window.confirm('Hapus titik ini dari peta dan database?');
+				if (!isConfirmed) {
+					return;
+				}
+
+				deleteButton.disabled = true;
+				setStatus(deleteStatus, 'Menghapus data...', '');
+
+				try {
+					await deletePoint(requestedId);
+					setStatus(deleteStatus, 'Data berhasil dihapus.', 'success');
+					map.closePopup();
+					await loadPoints();
+				} catch (error) {
+					setStatus(deleteStatus, error.message || 'Gagal menghapus data.', 'error');
+					deleteButton.disabled = false;
+				}
+			});
+		});
+	}
+
+	function attachRoadPopup(layer) {
+		const props = layer.featureProps;
+		layer.setStyle({ color: roadColorByStatus(props.status), weight: 5 });
+
+		layer.bindPopup(`
+			<b>Jalan:</b> ${escapeHtml(props.nama_jalan)}<br>
+			<b>Status:</b> ${escapeHtml(props.status)}<br>
+			<b>Panjang:</b> ${Number(props.panjang_meter).toFixed(2)} m
+			<div class="popup-actions">
+				<button type="button" class="btn-popup-edit" data-action="edit">Edit</button>
+				<button type="button" class="btn-popup-refine" data-action="refine">Rapikan</button>
+			</div>
+			<div class="popup-actions">
+				<button type="button" class="btn-popup-save" data-action="save-refine" disabled>Simpan Rapikan</button>
+				<button type="button" class="btn-popup-cancel" data-action="cancel-refine" disabled>Batal Rapikan</button>
+				<button type="button" class="btn-popup-delete" data-action="delete">Hapus</button>
+			</div>
+			<div class="status" data-role="popup-status"></div>
+		`);
+
+		layer.off('popupopen');
+		layer.on('popupopen', (event) => {
+			const popupElement = event.popup.getElement();
+			if (!popupElement) {
+				return;
+			}
+
+			const editButton = popupElement.querySelector('[data-action="edit"]');
+			const refineButton = popupElement.querySelector('[data-action="refine"]');
+			const saveRefineButton = popupElement.querySelector('[data-action="save-refine"]');
+			const cancelRefineButton = popupElement.querySelector('[data-action="cancel-refine"]');
+			const deleteButton = popupElement.querySelector('[data-action="delete"]');
+			const popupStatus = popupElement.querySelector('[data-role="popup-status"]');
+
+			if (!editButton || !refineButton || !saveRefineButton || !cancelRefineButton || !deleteButton || !popupStatus) {
+				return;
+			}
+
+			const canRefine = !!(layer.editing && typeof layer.editing.enable === 'function');
+			refineButton.disabled = !canRefine;
+			setRefineButtonsState(refineButton, saveRefineButton, cancelRefineButton, activeRefineState && activeRefineState.layer === layer);
+
+			refineButton.addEventListener('click', () => {
+				if (!canRefine) {
+					setStatus(popupStatus, 'Mode rapikan tidak didukung pada layer ini.', 'error');
+					return;
+				}
+
+				if (activeRefineState && activeRefineState.layer && activeRefineState.layer !== layer && activeRefineState.layer.editing) {
+					activeRefineState.layer.editing.disable();
+				}
+
+				activeRefineState = {
+					layer: layer,
+					snapshot: cloneLatLngs(layer.getLatLngs())
+				};
+
+				layer.editing.enable();
+				setRefineButtonsState(refineButton, saveRefineButton, cancelRefineButton, true);
+				setStatus(popupStatus, 'Mode rapikan aktif. Geser titik vertex lalu klik Simpan Rapikan.', '');
+			});
+
+			saveRefineButton.addEventListener('click', async () => {
+				if (!activeRefineState || activeRefineState.layer !== layer) {
+					return;
+				}
+
+				saveRefineButton.disabled = true;
+				setStatus(popupStatus, 'Menyimpan geometri...', '');
+
+				try {
+					await persistSpatialGeometry(layer);
+					if (layer.editing) {
+						layer.editing.disable();
+					}
+					activeRefineState = null;
+					setRefineButtonsState(refineButton, saveRefineButton, cancelRefineButton, false);
+					setStatus(popupStatus, 'Geometri jalan berhasil dirapikan.', 'success');
+				} catch (error) {
+					setStatus(popupStatus, error.message || 'Gagal menyimpan geometri.', 'error');
+					saveRefineButton.disabled = false;
+				}
+			});
+
+			cancelRefineButton.addEventListener('click', () => {
+				if (!activeRefineState || activeRefineState.layer !== layer) {
+					return;
+				}
+
+				layer.setLatLngs(activeRefineState.snapshot);
+				if (typeof layer.redraw === 'function') {
+					layer.redraw();
+				}
+
+				if (layer.editing) {
+					layer.editing.disable();
+				}
+
+				activeRefineState = null;
+				setRefineButtonsState(refineButton, saveRefineButton, cancelRefineButton, false);
+				setStatus(popupStatus, 'Perubahan geometri dibatalkan.', '');
+			});
+
+			editButton.addEventListener('click', () => {
+				map.closePopup();
+				openRoadModal(layer, 'update', layer.featureProps);
+			});
+
+			deleteButton.addEventListener('click', async () => {
+				if (!window.confirm('Hapus data jalan ini?')) {
+					return;
+				}
+
+				setStatus(popupStatus, 'Menghapus data...', '');
+				deleteButton.disabled = true;
+
+				try {
+					const response = await fetch('api/road_delete.php', {
+						method: 'POST',
+						headers: {
+							'Content-Type': 'application/json',
+							'Accept': 'application/json'
+						},
+						body: JSON.stringify({ id: layer.featureId })
+					});
+
+					const result = await parseJsonResponse(response);
+					if (!response.ok || !result.success) {
+						throw new Error(result.message || 'Gagal menghapus data jalan.');
+					}
+
+					spatialLayer.removeLayer(layer);
+					map.closePopup();
+				} catch (error) {
+					setStatus(popupStatus, error.message || 'Gagal menghapus data.', 'error');
+					deleteButton.disabled = false;
+				}
+			});
+		});
+	}
+
+	function attachParcelPopup(layer) {
+		const props = layer.featureProps;
+		const color = parcelColorByStatus(props.status_kepemilikan);
+
+		layer.setStyle({
+			color: color,
+			fillColor: color,
+			fillOpacity: 0.35,
+			weight: 3
+		});
+
+		layer.bindPopup(`
+			<b>Pemilik:</b> ${escapeHtml(props.nama_pemilik)}<br>
+			<b>Status:</b> ${escapeHtml(props.status_kepemilikan)}<br>
+			<b>Luas:</b> ${Number(props.luas_m2).toFixed(2)} m2
+			<div class="popup-actions">
+				<button type="button" class="btn-popup-edit" data-action="edit">Edit</button>
+				<button type="button" class="btn-popup-refine" data-action="refine">Rapikan</button>
+			</div>
+			<div class="popup-actions">
+				<button type="button" class="btn-popup-save" data-action="save-refine" disabled>Simpan Rapikan</button>
+				<button type="button" class="btn-popup-cancel" data-action="cancel-refine" disabled>Batal Rapikan</button>
+				<button type="button" class="btn-popup-delete" data-action="delete">Hapus</button>
+			</div>
+			<div class="status" data-role="popup-status"></div>
+		`);
+
+		layer.off('popupopen');
+		layer.on('popupopen', (event) => {
+			const popupElement = event.popup.getElement();
+			if (!popupElement) {
+				return;
+			}
+
+			const editButton = popupElement.querySelector('[data-action="edit"]');
+			const refineButton = popupElement.querySelector('[data-action="refine"]');
+			const saveRefineButton = popupElement.querySelector('[data-action="save-refine"]');
+			const cancelRefineButton = popupElement.querySelector('[data-action="cancel-refine"]');
+			const deleteButton = popupElement.querySelector('[data-action="delete"]');
+			const popupStatus = popupElement.querySelector('[data-role="popup-status"]');
+
+			if (!editButton || !refineButton || !saveRefineButton || !cancelRefineButton || !deleteButton || !popupStatus) {
+				return;
+			}
+
+			const canRefine = !!(layer.editing && typeof layer.editing.enable === 'function');
+			refineButton.disabled = !canRefine;
+			setRefineButtonsState(refineButton, saveRefineButton, cancelRefineButton, activeRefineState && activeRefineState.layer === layer);
+
+			refineButton.addEventListener('click', () => {
+				if (!canRefine) {
+					setStatus(popupStatus, 'Mode rapikan tidak didukung pada layer ini.', 'error');
+					return;
+				}
+
+				if (activeRefineState && activeRefineState.layer && activeRefineState.layer !== layer && activeRefineState.layer.editing) {
+					activeRefineState.layer.editing.disable();
+				}
+
+				activeRefineState = {
+					layer: layer,
+					snapshot: cloneLatLngs(layer.getLatLngs())
+				};
+
+				layer.editing.enable();
+				setRefineButtonsState(refineButton, saveRefineButton, cancelRefineButton, true);
+				setStatus(popupStatus, 'Mode rapikan aktif. Geser titik vertex lalu klik Simpan Rapikan.', '');
+			});
+
+			saveRefineButton.addEventListener('click', async () => {
+				if (!activeRefineState || activeRefineState.layer !== layer) {
+					return;
+				}
+
+				saveRefineButton.disabled = true;
+				setStatus(popupStatus, 'Menyimpan geometri...', '');
+
+				try {
+					await persistSpatialGeometry(layer);
+					if (layer.editing) {
+						layer.editing.disable();
+					}
+					activeRefineState = null;
+					setRefineButtonsState(refineButton, saveRefineButton, cancelRefineButton, false);
+					setStatus(popupStatus, 'Geometri parsil berhasil dirapikan.', 'success');
+				} catch (error) {
+					setStatus(popupStatus, error.message || 'Gagal menyimpan geometri.', 'error');
+					saveRefineButton.disabled = false;
+				}
+			});
+
+			cancelRefineButton.addEventListener('click', () => {
+				if (!activeRefineState || activeRefineState.layer !== layer) {
+					return;
+				}
+
+				layer.setLatLngs(activeRefineState.snapshot);
+				if (typeof layer.redraw === 'function') {
+					layer.redraw();
+				}
+
+				if (layer.editing) {
+					layer.editing.disable();
+				}
+
+				activeRefineState = null;
+				setRefineButtonsState(refineButton, saveRefineButton, cancelRefineButton, false);
+				setStatus(popupStatus, 'Perubahan geometri dibatalkan.', '');
+			});
+
+			editButton.addEventListener('click', () => {
+				map.closePopup();
+				openParcelModal(layer, 'update', layer.featureProps);
+			});
+
+			deleteButton.addEventListener('click', async () => {
+				if (!window.confirm('Hapus data parsil ini?')) {
+					return;
+				}
+
+				setStatus(popupStatus, 'Menghapus data...', '');
+				deleteButton.disabled = true;
+
+				try {
+					const response = await fetch('api/parcel_delete.php', {
+						method: 'POST',
+						headers: {
+							'Content-Type': 'application/json',
+							'Accept': 'application/json'
+						},
+						body: JSON.stringify({ id: layer.featureId })
+					});
+
+					const result = await parseJsonResponse(response);
+					if (!response.ok || !result.success) {
+						throw new Error(result.message || 'Gagal menghapus data parsil.');
+					}
+
+					spatialLayer.removeLayer(layer);
+					map.closePopup();
+				} catch (error) {
+					setStatus(popupStatus, error.message || 'Gagal menghapus data.', 'error');
+					deleteButton.disabled = false;
+				}
+			});
+		});
+	}
+
+	async function loadPoints() {
+		const response = await fetch('api/read_points.php', {
+			headers: { 'Accept': 'application/json' }
+		});
+
+		const result = await parseJsonResponse(response);
+		if (!response.ok || !result.success) {
+			throw new Error(result && result.message ? result.message : 'Gagal memuat data titik.');
+		}
+
+		markersLayer.clearLayers();
+		(result.data || []).forEach(renderPoint);
+	}
+
+	async function loadRoads() {
+		const response = await fetch('api/road_read.php', {
+			headers: { 'Accept': 'application/json' }
+		});
+
+		const result = await parseJsonResponse(response);
+		if (!response.ok || !result.success) {
+			throw new Error(result && result.message ? result.message : 'Gagal memuat data jalan.');
+		}
+
+		(result.data || []).forEach((item) => {
+			if (!item.geometry_geojson) {
+				return;
+			}
+
+			const parsed = L.geoJSON(item.geometry_geojson);
+			const layer = parsed.getLayers()[0];
+			if (!layer) {
+				return;
+			}
+
+			layer.featureType = 'road';
+			layer.featureId = item.id;
+			layer.featureProps = {
+				nama_jalan: item.nama_jalan,
+				status: item.status,
+				panjang_meter: item.panjang_meter
+			};
+
+			attachRoadPopup(layer);
+			spatialLayer.addLayer(layer);
+		});
+	}
+
+	async function loadParcels() {
+		const response = await fetch('api/parcel_read.php', {
+			headers: { 'Accept': 'application/json' }
+		});
+
+		const result = await parseJsonResponse(response);
+		if (!response.ok || !result.success) {
+			throw new Error(result && result.message ? result.message : 'Gagal memuat data parsil.');
+		}
+
+		(result.data || []).forEach((item) => {
+			if (!item.geometry_geojson) {
+				return;
+			}
+
+			const parsed = L.geoJSON(item.geometry_geojson);
+			const layer = parsed.getLayers()[0];
+			if (!layer) {
+				return;
+			}
+
+			layer.featureType = 'parcel';
+			layer.featureId = item.id;
+			layer.featureProps = {
+				nama_pemilik: item.nama_pemilik,
+				status_kepemilikan: item.status_kepemilikan,
+				luas_m2: item.luas_m2
+			};
+
+			attachParcelPopup(layer);
+			spatialLayer.addLayer(layer);
+		});
+	}
+
+	async function savePoint(payload) {
+		const response = await fetch('api/create_point.php', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+				'Accept': 'application/json'
+			},
+			body: JSON.stringify(payload)
+		});
+
+		const result = await parseJsonResponse(response);
+		if (!response.ok || !result.success) {
+			throw new Error(result && result.message ? result.message : 'Gagal menyimpan data titik.');
+		}
+		return result;
+	}
+
+	async function deletePoint(id) {
+		const response = await fetch('api/delete_point.php', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+				'Accept': 'application/json'
+			},
+			body: JSON.stringify({ id: id })
+		});
+
+		const result = await parseJsonResponse(response);
+		if (!response.ok || !result.success) {
+			throw new Error(result && result.message ? result.message : 'Gagal menghapus data titik.');
+		}
+		return result;
+	}
+
+	async function updatePointPosition(id, latitude, longitude) {
+		const response = await fetch('api/update_point_position.php', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+				'Accept': 'application/json'
+			},
+			body: JSON.stringify({
+				id: id,
+				latitude: latitude,
+				longitude: longitude
+			})
+		});
+
+		const result = await parseJsonResponse(response);
+		if (!response.ok || !result.success) {
+			throw new Error(result && result.message ? result.message : 'Gagal memperbarui posisi titik.');
+		}
+		return result;
+	}
+
+	if (L.Control && L.Control.Draw) {
+		const drawControl = new L.Control.Draw({
+			position: 'topleft',
+			draw: {
+				polyline: {
+					shapeOptions: { color: '#dc2626', weight: 5 }
+				},
+				polygon: {
+					allowIntersection: false,
+					showArea: true,
+					shapeOptions: { color: '#ea580c', fillOpacity: 0.35, weight: 3 }
+				},
+				rectangle: false,
+				circle: false,
+				marker: false,
+				circlemarker: false
+			},
+			edit: {
+				featureGroup: spatialLayer,
+				remove: true
+			}
+		});
+
+		map.addControl(drawControl);
+
+		map.on(L.Draw.Event.DRAWSTART, () => {
+			isDrawing = true;
+		});
+
+		map.on(L.Draw.Event.DRAWSTOP, () => {
+			isDrawing = false;
+		});
+
+		map.on(L.Draw.Event.CREATED, (event) => {
+			const layer = event.layer;
+			spatialLayer.addLayer(layer);
+
+			if (event.layerType === 'polyline') {
+				openRoadModal(layer, 'create', null);
+				return;
+			}
+
+			if (event.layerType === 'polygon') {
+				openParcelModal(layer, 'create', null);
+				return;
+			}
+
+			spatialLayer.removeLayer(layer);
+		});
+
+		map.on(L.Draw.Event.EDITED, async (event) => {
+			const layers = event.layers.getLayers();
+
+			for (const layer of layers) {
+				try {
+					await persistSpatialGeometry(layer);
+				} catch (error) {
+					alert(error.message || 'Gagal menyimpan update geometri.');
+				}
+			}
+		});
+
+		map.on(L.Draw.Event.DELETED, async (event) => {
+			const layers = event.layers.getLayers();
+
+			for (const layer of layers) {
+				if (!layer.featureType || !layer.featureId) {
+					continue;
+				}
+
+				try {
+					const endpoint = layer.featureType === 'road' ? 'api/road_delete.php' : 'api/parcel_delete.php';
+					const response = await fetch(endpoint, {
+						method: 'POST',
+						headers: {
+							'Content-Type': 'application/json',
+							'Accept': 'application/json'
+						},
+						body: JSON.stringify({ id: layer.featureId })
+					});
+
+					const result = await parseJsonResponse(response);
+					if (!response.ok || !result.success) {
+						throw new Error(result.message || 'Gagal menghapus data spasial.');
+					}
+				} catch (error) {
+					alert(error.message || 'Gagal sinkron delete ke database.');
+				}
+			}
+		});
+	}
+
+	if (featureForm) {
+		setSectionEnabled(roadFields, false);
+		setSectionEnabled(parcelFields, false);
+
+		featureForm.addEventListener('submit', async (event) => {
+			event.preventDefault();
+			if (!pendingLayer || !pendingType || !formStatus) {
+				return;
+			}
+
+			setStatus(formStatus, 'Menyimpan data...', '');
+
+			try {
+				if (pendingType === 'road') {
+					const namaJalan = document.getElementById('nama_jalan').value.trim();
+					const statusJalan = document.getElementById('status_jalan').value;
+					const panjangMeter = Number(document.getElementById('panjang_meter').value);
+					const wkt = polylineToWkt(pendingLayer.getLatLngs());
+
+					const endpoint = pendingMode === 'create' ? 'api/road_create.php' : 'api/road_update.php';
+					const payload = {
+						nama_jalan: namaJalan,
+						status: statusJalan,
+						panjang_meter: panjangMeter,
+						wkt: wkt
+					};
+
+					if (pendingMode === 'update') {
+						payload.id = pendingLayer.featureId;
+					}
+
+					const response = await fetch(endpoint, {
+						method: 'POST',
+						headers: {
+							'Content-Type': 'application/json',
+							'Accept': 'application/json'
+						},
+						body: JSON.stringify(payload)
+					});
+
+					const result = await parseJsonResponse(response);
+					if (!response.ok || !result.success) {
+						throw new Error(result.message || 'Gagal menyimpan data jalan.');
+					}
+
+					pendingLayer.featureType = 'road';
+					pendingLayer.featureId = pendingMode === 'create' ? result.id : pendingLayer.featureId;
+					pendingLayer.featureProps = {
+						nama_jalan: namaJalan,
+						status: statusJalan,
+						panjang_meter: panjangMeter
+					};
+
+					attachRoadPopup(pendingLayer);
+				}
+
+				if (pendingType === 'parcel') {
+					const namaPemilik = document.getElementById('nama_pemilik').value.trim();
+					const statusKepemilikan = document.getElementById('status_kepemilikan').value;
+					const luasM2 = Number(document.getElementById('luas_m2').value);
+					const wkt = polygonToWkt(pendingLayer.getLatLngs()[0]);
+
+					const endpoint = pendingMode === 'create' ? 'api/parcel_create.php' : 'api/parcel_update.php';
+					const payload = {
+						nama_pemilik: namaPemilik,
+						status_kepemilikan: statusKepemilikan,
+						luas_m2: luasM2,
+						wkt: wkt
+					};
+
+					if (pendingMode === 'update') {
+						payload.id = pendingLayer.featureId;
+					}
+
+					const response = await fetch(endpoint, {
+						method: 'POST',
+						headers: {
+							'Content-Type': 'application/json',
+							'Accept': 'application/json'
+						},
+						body: JSON.stringify(payload)
+					});
+
+					const result = await parseJsonResponse(response);
+					if (!response.ok || !result.success) {
+						throw new Error(result.message || 'Gagal menyimpan data parsil.');
+					}
+
+					pendingLayer.featureType = 'parcel';
+					pendingLayer.featureId = pendingMode === 'create' ? result.id : pendingLayer.featureId;
+					pendingLayer.featureProps = {
+						nama_pemilik: namaPemilik,
+						status_kepemilikan: statusKepemilikan,
+						luas_m2: luasM2
+					};
+
+					attachParcelPopup(pendingLayer);
+				}
+
+				setStatus(formStatus, 'Data berhasil disimpan.', 'success');
+				setTimeout(() => closeModal(false), 300);
+			} catch (error) {
+				setStatus(formStatus, error.message || 'Gagal menyimpan data.', 'error');
+			}
+		});
+	}
+
+	if (cancelButton) {
+		cancelButton.addEventListener('click', () => {
+			closeModal(true);
+		});
+	}
+
+	if (modalBackdrop) {
+		modalBackdrop.addEventListener('click', (event) => {
+			if (event.target === modalBackdrop) {
+				closeModal(true);
+			}
+		});
+	}
+
+	map.on('click', (event) => {
+		if (activeRefineState && activeRefineState.layer && activeRefineState.layer.editing && activeRefineState.layer.editing.enabled()) {
+			return;
+		}
+
+		if (isDrawing || (modalBackdrop && modalBackdrop.classList.contains('open'))) {
+			return;
+		}
+
+		if (event.originalEvent && event.originalEvent.target && event.originalEvent.target.closest('.leaflet-interactive')) {
+			return;
+		}
+
+		if (activePopupMarker) {
+			map.removeLayer(activePopupMarker);
+		}
+
+		const lat = event.latlng.lat;
+		const lng = event.latlng.lng;
+		activePopupMarker = L.marker([lat, lng]).addTo(map);
+		activePopupMarker.bindPopup(buildPointForm(lat, lng));
+
+		activePopupMarker.once('popupopen', (popupEvent) => {
+			const popupElement = popupEvent.popup.getElement();
+			if (!popupElement) {
+				return;
+			}
+
+			const saveButton = popupElement.querySelector('[data-action="save"]');
+			const cancelPopupButton = popupElement.querySelector('[data-action="cancel"]');
+			const statusLabel = popupElement.querySelector('[data-role="status"]');
+			const namaInput = popupElement.querySelector('[data-field="nama"]');
+			const noInput = popupElement.querySelector('[data-field="no"]');
+			const statusInput = popupElement.querySelector('[data-field="status_24jam"]');
+			const latitudeInput = popupElement.querySelector('[data-field="latitude"]');
+			const longitudeInput = popupElement.querySelector('[data-field="longitude"]');
+
+			if (!saveButton || !cancelPopupButton || !statusLabel || !namaInput || !noInput || !statusInput || !latitudeInput || !longitudeInput) {
+				return;
+			}
+
+			cancelPopupButton.addEventListener('click', () => {
+				map.closePopup();
+				if (activePopupMarker) {
+					map.removeLayer(activePopupMarker);
+					activePopupMarker = null;
+				}
+			});
+
+			saveButton.addEventListener('click', async () => {
+				const nama = namaInput.value.trim();
+				const no = noInput.value.trim();
+				const status24jam = statusInput.value;
+				const latitude = latitudeInput.value;
+				const longitude = longitudeInput.value;
+
+				if (!nama || !no) {
+					setStatus(statusLabel, 'Nama dan No wajib diisi.', 'error');
+					return;
+				}
+
+				saveButton.disabled = true;
+				setStatus(statusLabel, 'Menyimpan data...', '');
+
+				try {
+					await savePoint({
+						nama: nama,
+						no: no,
+						status_24jam: status24jam,
+						latitude: latitude,
+						longitude: longitude
+					});
+
+					setStatus(statusLabel, 'Data berhasil disimpan.', 'success');
+
+					if (activePopupMarker) {
+						map.removeLayer(activePopupMarker);
+						activePopupMarker = null;
+					}
+
+					await loadPoints();
+					map.closePopup();
+				} catch (error) {
+					setStatus(statusLabel, error.message || 'Terjadi kesalahan saat menyimpan data.', 'error');
+					saveButton.disabled = false;
+				}
+			});
+		});
+
+		activePopupMarker.openPopup();
+	});
+
+	spatialLayer.clearLayers();
+
+	try {
+		await loadPoints();
+	} catch (error) {
+		console.error(error);
+		alert(error.message || 'Gagal memuat data titik.');
+	}
+
+	try {
+		await loadRoads();
+	} catch (error) {
+		console.warn('Data jalan belum termuat:', error);
+	}
+
+	try {
+		await loadParcels();
+	} catch (error) {
+		console.warn('Data parsil belum termuat:', error);
+	}
+
+	fitAllData();
+
+	const syncMapSize = () => {
+		map.invalidateSize();
+	};
+
+	window.addEventListener('resize', syncMapSize);
+	window.addEventListener('load', () => {
+		setTimeout(syncMapSize, 0);
+	});
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+	initializeMap().catch((error) => {
+		console.error(error);
+		alert('Terjadi kesalahan saat inisialisasi peta.');
+	});
+});
diff --git a/Leaflet/assets/js/spatial.js b/Leaflet/assets/js/spatial.js
new file mode 100644
index 0000000..b0619c5
--- /dev/null
+++ b/Leaflet/assets/js/spatial.js
@@ -0,0 +1,622 @@
+function setStatus(element, message, type) {
+    element.textContent = message;
+    element.classList.remove('error', 'success');
+    if (type) {
+        element.classList.add(type);
+    }
+}
+
+function roadColorByStatus(status) {
+    if (status === 'nasional') {
+        return '#dc2626';
+    }
+    if (status === 'provinsi') {
+        return '#2563eb';
+    }
+    return '#16a34a';
+}
+
+function parcelColorByStatus(status) {
+    if (status === 'SHM') {
+        return '#ea580c';
+    }
+    if (status === 'HGB') {
+        return '#0ea5e9';
+    }
+    if (status === 'HGU') {
+        return '#22c55e';
+    }
+    return '#a855f7';
+}
+
+function calculatePolylineLengthMeters(latlngs) {
+    let total = 0;
+    for (let index = 1; index < latlngs.length; index += 1) {
+        total += latlngs[index - 1].distanceTo(latlngs[index]);
+    }
+    return total;
+}
+
+function calculatePolygonAreaMeters(latlngs) {
+    if (window.L && L.GeometryUtil && typeof L.GeometryUtil.geodesicArea === 'function') {
+        return L.GeometryUtil.geodesicArea(latlngs);
+    }
+
+    const earthRadius = 6378137;
+    const toRad = (degree) => degree * Math.PI / 180;
+
+    let area = 0;
+    for (let i = 0; i < latlngs.length; i += 1) {
+        const p1 = latlngs[i];
+        const p2 = latlngs[(i + 1) % latlngs.length];
+        area += toRad(p2.lng - p1.lng) * (2 + Math.sin(toRad(p1.lat)) + Math.sin(toRad(p2.lat)));
+    }
+
+    return Math.abs(area * earthRadius * earthRadius / 2);
+}
+
+function polylineToWkt(latlngs) {
+    const coordinates = latlngs.map((point) => `${point.lng} ${point.lat}`).join(', ');
+    return `LINESTRING(${coordinates})`;
+}
+
+function polygonToWkt(latlngs) {
+    const ring = latlngs.map((point) => `${point.lng} ${point.lat}`);
+    if (ring[0] !== ring[ring.length - 1]) {
+        ring.push(ring[0]);
+    }
+    return `POLYGON((${ring.join(', ')}))`;
+}
+
+async function parseJsonResponse(response) {
+    const text = await response.text();
+    try {
+        return JSON.parse(text);
+    } catch (error) {
+        throw new Error('Response server bukan JSON valid.');
+    }
+}
+
+document.addEventListener('DOMContentLoaded', async () => {
+    const map = L.map('map').setView([-0.0605, 109.3449], 13);
+
+    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        maxZoom: 19,
+        attribution: '&copy; OpenStreetMap contributors'
+    }).addTo(map);
+
+    if (typeof window.addKecamatanLayer === 'function') {
+        window.addKecamatanLayer(map, { fitBounds: true }).catch((error) => {
+            console.warn('Data kecamatan belum termuat:', error);
+        });
+    }
+
+    const editableLayer = new L.FeatureGroup();
+    map.addLayer(editableLayer);
+
+    const modalBackdrop = document.getElementById('modal-backdrop');
+    const modalTitle = document.getElementById('modal-title');
+    const featureForm = document.getElementById('feature-form');
+    const roadFields = document.getElementById('road-fields');
+    const parcelFields = document.getElementById('parcel-fields');
+    const formStatus = document.getElementById('form-status');
+    const cancelButton = document.getElementById('btn-cancel');
+
+    let pendingLayer = null;
+    let pendingType = null;
+    let pendingMode = 'create';
+
+    function closeModal(shouldRemovePendingLayer) {
+        modalBackdrop.classList.remove('open');
+        modalBackdrop.setAttribute('aria-hidden', 'true');
+        setStatus(formStatus, '', '');
+
+        if (shouldRemovePendingLayer && pendingMode === 'create' && pendingLayer) {
+            editableLayer.removeLayer(pendingLayer);
+        }
+
+        pendingLayer = null;
+        pendingType = null;
+        pendingMode = 'create';
+        featureForm.reset();
+    }
+
+    function openRoadModal(layer, mode, initialData) {
+        pendingLayer = layer;
+        pendingType = 'road';
+        pendingMode = mode;
+
+        modalTitle.textContent = mode === 'create' ? 'Tambah Data Jalan' : 'Update Data Jalan';
+        roadFields.hidden = false;
+        parcelFields.hidden = true;
+
+        const latlngs = layer.getLatLngs();
+        const lengthMeters = calculatePolylineLengthMeters(latlngs);
+
+        document.getElementById('nama_jalan').value = initialData && initialData.nama_jalan ? initialData.nama_jalan : '';
+        document.getElementById('status_jalan').value = initialData && initialData.status ? initialData.status : 'nasional';
+        document.getElementById('panjang_meter').value = lengthMeters.toFixed(2);
+
+        modalBackdrop.classList.add('open');
+        modalBackdrop.setAttribute('aria-hidden', 'false');
+    }
+
+    function openParcelModal(layer, mode, initialData) {
+        pendingLayer = layer;
+        pendingType = 'parcel';
+        pendingMode = mode;
+
+        modalTitle.textContent = mode === 'create' ? 'Tambah Data Parsil Tanah' : 'Update Data Parsil Tanah';
+        roadFields.hidden = true;
+        parcelFields.hidden = false;
+
+        const latlngs = layer.getLatLngs()[0];
+        const areaM2 = calculatePolygonAreaMeters(latlngs);
+
+        document.getElementById('nama_pemilik').value = initialData && initialData.nama_pemilik ? initialData.nama_pemilik : '';
+        document.getElementById('status_kepemilikan').value = initialData && initialData.status_kepemilikan ? initialData.status_kepemilikan : 'SHM';
+        document.getElementById('luas_m2').value = areaM2.toFixed(2);
+
+        modalBackdrop.classList.add('open');
+        modalBackdrop.setAttribute('aria-hidden', 'false');
+    }
+
+    function attachRoadPopup(layer) {
+        const props = layer.featureProps;
+        layer.setStyle({
+            color: roadColorByStatus(props.status),
+            weight: 5
+        });
+
+        layer.bindPopup(`
+            <b>Jalan:</b> ${props.nama_jalan}<br>
+            <b>Status:</b> ${props.status}<br>
+            <b>Panjang:</b> ${Number(props.panjang_meter).toFixed(2)} m
+            <div class="popup-actions">
+                <button type="button" data-action="edit">Edit</button>
+                <button type="button" class="btn-danger" data-action="delete">Hapus</button>
+            </div>
+            <div class="status" data-role="popup-status"></div>
+        `);
+
+        layer.on('popupopen', (event) => {
+            const popupElement = event.popup.getElement();
+            const editButton = popupElement.querySelector('[data-action="edit"]');
+            const deleteButton = popupElement.querySelector('[data-action="delete"]');
+            const popupStatus = popupElement.querySelector('[data-role="popup-status"]');
+
+            editButton.addEventListener('click', () => {
+                map.closePopup();
+                openRoadModal(layer, 'update', layer.featureProps);
+            });
+
+            deleteButton.addEventListener('click', async () => {
+                if (!window.confirm('Hapus data jalan ini?')) {
+                    return;
+                }
+
+                setStatus(popupStatus, 'Menghapus data...', '');
+                deleteButton.disabled = true;
+
+                try {
+                    const response = await fetch('api/road_delete.php', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'Accept': 'application/json'
+                        },
+                        body: JSON.stringify({ id: layer.featureId })
+                    });
+
+                    const result = await parseJsonResponse(response);
+                    if (!response.ok || !result.success) {
+                        throw new Error(result.message || 'Gagal menghapus data jalan.');
+                    }
+
+                    editableLayer.removeLayer(layer);
+                    map.closePopup();
+                } catch (error) {
+                    setStatus(popupStatus, error.message || 'Gagal menghapus data.', 'error');
+                    deleteButton.disabled = false;
+                }
+            });
+        });
+    }
+
+    function attachParcelPopup(layer) {
+        const props = layer.featureProps;
+        layer.setStyle({
+            color: parcelColorByStatus(props.status_kepemilikan),
+            fillColor: parcelColorByStatus(props.status_kepemilikan),
+            fillOpacity: 0.35,
+            weight: 3
+        });
+
+        layer.bindPopup(`
+            <b>Pemilik:</b> ${props.nama_pemilik}<br>
+            <b>Status:</b> ${props.status_kepemilikan}<br>
+            <b>Luas:</b> ${Number(props.luas_m2).toFixed(2)} m²
+            <div class="popup-actions">
+                <button type="button" data-action="edit">Edit</button>
+                <button type="button" class="btn-danger" data-action="delete">Hapus</button>
+            </div>
+            <div class="status" data-role="popup-status"></div>
+        `);
+
+        layer.on('popupopen', (event) => {
+            const popupElement = event.popup.getElement();
+            const editButton = popupElement.querySelector('[data-action="edit"]');
+            const deleteButton = popupElement.querySelector('[data-action="delete"]');
+            const popupStatus = popupElement.querySelector('[data-role="popup-status"]');
+
+            editButton.addEventListener('click', () => {
+                map.closePopup();
+                openParcelModal(layer, 'update', layer.featureProps);
+            });
+
+            deleteButton.addEventListener('click', async () => {
+                if (!window.confirm('Hapus data parsil ini?')) {
+                    return;
+                }
+
+                setStatus(popupStatus, 'Menghapus data...', '');
+                deleteButton.disabled = true;
+
+                try {
+                    const response = await fetch('api/parcel_delete.php', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'Accept': 'application/json'
+                        },
+                        body: JSON.stringify({ id: layer.featureId })
+                    });
+
+                    const result = await parseJsonResponse(response);
+                    if (!response.ok || !result.success) {
+                        throw new Error(result.message || 'Gagal menghapus data parsil.');
+                    }
+
+                    editableLayer.removeLayer(layer);
+                    map.closePopup();
+                } catch (error) {
+                    setStatus(popupStatus, error.message || 'Gagal menghapus data.', 'error');
+                    deleteButton.disabled = false;
+                }
+            });
+        });
+    }
+
+    async function loadRoads() {
+        const response = await fetch('api/road_read.php', {
+            headers: {
+                'Accept': 'application/json'
+            }
+        });
+
+        const result = await parseJsonResponse(response);
+        if (!response.ok || !result.success) {
+            throw new Error(result.message || 'Gagal memuat data jalan.');
+        }
+
+        result.data.forEach((item) => {
+            if (!item.geometry_geojson) {
+                return;
+            }
+
+            const layer = L.geoJSON(item.geometry_geojson).getLayers()[0];
+            if (!layer) {
+                return;
+            }
+
+            layer.featureType = 'road';
+            layer.featureId = item.id;
+            layer.featureProps = {
+                nama_jalan: item.nama_jalan,
+                status: item.status,
+                panjang_meter: item.panjang_meter
+            };
+
+            attachRoadPopup(layer);
+            editableLayer.addLayer(layer);
+        });
+    }
+
+    async function loadParcels() {
+        const response = await fetch('api/parcel_read.php', {
+            headers: {
+                'Accept': 'application/json'
+            }
+        });
+
+        const result = await parseJsonResponse(response);
+        if (!response.ok || !result.success) {
+            throw new Error(result.message || 'Gagal memuat data parsil.');
+        }
+
+        result.data.forEach((item) => {
+            if (!item.geometry_geojson) {
+                return;
+            }
+
+            const layer = L.geoJSON(item.geometry_geojson).getLayers()[0];
+            if (!layer) {
+                return;
+            }
+
+            layer.featureType = 'parcel';
+            layer.featureId = item.id;
+            layer.featureProps = {
+                nama_pemilik: item.nama_pemilik,
+                status_kepemilikan: item.status_kepemilikan,
+                luas_m2: item.luas_m2
+            };
+
+            attachParcelPopup(layer);
+            editableLayer.addLayer(layer);
+        });
+    }
+
+    const drawControl = new L.Control.Draw({
+        position: 'topleft',
+        draw: {
+            polyline: {
+                shapeOptions: {
+                    color: '#dc2626',
+                    weight: 5
+                }
+            },
+            polygon: {
+                allowIntersection: false,
+                showArea: true,
+                shapeOptions: {
+                    color: '#ea580c',
+                    fillOpacity: 0.35,
+                    weight: 3
+                }
+            },
+            rectangle: false,
+            circle: false,
+            marker: false,
+            circlemarker: false
+        },
+        edit: {
+            featureGroup: editableLayer,
+            remove: true
+        }
+    });
+
+    map.addControl(drawControl);
+
+    map.on(L.Draw.Event.CREATED, (event) => {
+        const layer = event.layer;
+        const geometryType = event.layerType;
+
+        editableLayer.addLayer(layer);
+
+        if (geometryType === 'polyline') {
+            openRoadModal(layer, 'create', null);
+            return;
+        }
+
+        if (geometryType === 'polygon') {
+            openParcelModal(layer, 'create', null);
+            return;
+        }
+
+        editableLayer.removeLayer(layer);
+    });
+
+    map.on(L.Draw.Event.EDITED, async (event) => {
+        const layers = event.layers.getLayers();
+
+        for (const layer of layers) {
+            try {
+                if (layer.featureType === 'road') {
+                    const lengthMeters = calculatePolylineLengthMeters(layer.getLatLngs());
+                    const payload = {
+                        id: layer.featureId,
+                        nama_jalan: layer.featureProps.nama_jalan,
+                        status: layer.featureProps.status,
+                        panjang_meter: Number(lengthMeters.toFixed(2)),
+                        wkt: polylineToWkt(layer.getLatLngs())
+                    };
+
+                    const response = await fetch('api/road_update.php', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'Accept': 'application/json'
+                        },
+                        body: JSON.stringify(payload)
+                    });
+
+                    const result = await parseJsonResponse(response);
+                    if (!response.ok || !result.success) {
+                        throw new Error(result.message || 'Gagal update geometri jalan.');
+                    }
+
+                    layer.featureProps.panjang_meter = payload.panjang_meter;
+                    attachRoadPopup(layer);
+                }
+
+                if (layer.featureType === 'parcel') {
+                    const areaM2 = calculatePolygonAreaMeters(layer.getLatLngs()[0]);
+                    const payload = {
+                        id: layer.featureId,
+                        nama_pemilik: layer.featureProps.nama_pemilik,
+                        status_kepemilikan: layer.featureProps.status_kepemilikan,
+                        luas_m2: Number(areaM2.toFixed(2)),
+                        wkt: polygonToWkt(layer.getLatLngs()[0])
+                    };
+
+                    const response = await fetch('api/parcel_update.php', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'Accept': 'application/json'
+                        },
+                        body: JSON.stringify(payload)
+                    });
+
+                    const result = await parseJsonResponse(response);
+                    if (!response.ok || !result.success) {
+                        throw new Error(result.message || 'Gagal update geometri parsil.');
+                    }
+
+                    layer.featureProps.luas_m2 = payload.luas_m2;
+                    attachParcelPopup(layer);
+                }
+            } catch (error) {
+                window.alert(error.message || 'Gagal menyimpan update geometri.');
+            }
+        }
+    });
+
+    map.on(L.Draw.Event.DELETED, async (event) => {
+        const layers = event.layers.getLayers();
+
+        for (const layer of layers) {
+            if (!layer.featureType || !layer.featureId) {
+                continue;
+            }
+
+            try {
+                const endpoint = layer.featureType === 'road' ? 'api/road_delete.php' : 'api/parcel_delete.php';
+                const response = await fetch(endpoint, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Accept': 'application/json'
+                    },
+                    body: JSON.stringify({ id: layer.featureId })
+                });
+
+                const result = await parseJsonResponse(response);
+                if (!response.ok || !result.success) {
+                    throw new Error(result.message || 'Gagal menghapus data.');
+                }
+            } catch (error) {
+                window.alert(error.message || 'Gagal sinkron delete ke database.');
+            }
+        }
+    });
+
+    featureForm.addEventListener('submit', async (event) => {
+        event.preventDefault();
+        if (!pendingLayer || !pendingType) {
+            return;
+        }
+
+        setStatus(formStatus, 'Menyimpan data...', '');
+
+        try {
+            if (pendingType === 'road') {
+                const namaJalan = document.getElementById('nama_jalan').value.trim();
+                const statusJalan = document.getElementById('status_jalan').value;
+                const panjangMeter = Number(document.getElementById('panjang_meter').value);
+                const wkt = polylineToWkt(pendingLayer.getLatLngs());
+
+                const endpoint = pendingMode === 'create' ? 'api/road_create.php' : 'api/road_update.php';
+                const payload = {
+                    nama_jalan: namaJalan,
+                    status: statusJalan,
+                    panjang_meter: panjangMeter,
+                    wkt: wkt
+                };
+
+                if (pendingMode === 'update') {
+                    payload.id = pendingLayer.featureId;
+                }
+
+                const response = await fetch(endpoint, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Accept': 'application/json'
+                    },
+                    body: JSON.stringify(payload)
+                });
+
+                const result = await parseJsonResponse(response);
+                if (!response.ok || !result.success) {
+                    throw new Error(result.message || 'Gagal menyimpan data jalan.');
+                }
+
+                pendingLayer.featureType = 'road';
+                pendingLayer.featureId = pendingMode === 'create' ? result.id : pendingLayer.featureId;
+                pendingLayer.featureProps = {
+                    nama_jalan: namaJalan,
+                    status: statusJalan,
+                    panjang_meter: panjangMeter
+                };
+                attachRoadPopup(pendingLayer);
+            }
+
+            if (pendingType === 'parcel') {
+                const namaPemilik = document.getElementById('nama_pemilik').value.trim();
+                const statusKepemilikan = document.getElementById('status_kepemilikan').value;
+                const luasM2 = Number(document.getElementById('luas_m2').value);
+                const wkt = polygonToWkt(pendingLayer.getLatLngs()[0]);
+
+                const endpoint = pendingMode === 'create' ? 'api/parcel_create.php' : 'api/parcel_update.php';
+                const payload = {
+                    nama_pemilik: namaPemilik,
+                    status_kepemilikan: statusKepemilikan,
+                    luas_m2: luasM2,
+                    wkt: wkt
+                };
+
+                if (pendingMode === 'update') {
+                    payload.id = pendingLayer.featureId;
+                }
+
+                const response = await fetch(endpoint, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Accept': 'application/json'
+                    },
+                    body: JSON.stringify(payload)
+                });
+
+                const result = await parseJsonResponse(response);
+                if (!response.ok || !result.success) {
+                    throw new Error(result.message || 'Gagal menyimpan data parsil.');
+                }
+
+                pendingLayer.featureType = 'parcel';
+                pendingLayer.featureId = pendingMode === 'create' ? result.id : pendingLayer.featureId;
+                pendingLayer.featureProps = {
+                    nama_pemilik: namaPemilik,
+                    status_kepemilikan: statusKepemilikan,
+                    luas_m2: luasM2
+                };
+                attachParcelPopup(pendingLayer);
+            }
+
+            setStatus(formStatus, 'Data berhasil disimpan.', 'success');
+            setTimeout(() => closeModal(false), 350);
+        } catch (error) {
+            setStatus(formStatus, error.message || 'Gagal menyimpan data.', 'error');
+        }
+    });
+
+    cancelButton.addEventListener('click', () => closeModal(true));
+    modalBackdrop.addEventListener('click', (event) => {
+        if (event.target === modalBackdrop) {
+            closeModal(true);
+        }
+    });
+
+    try {
+        await loadRoads();
+        await loadParcels();
+
+        if (editableLayer.getLayers().length > 0) {
+            map.fitBounds(editableLayer.getBounds().pad(0.2));
+        }
+    } catch (error) {
+        window.alert(error.message || 'Gagal memuat data spasial.');
+    }
+});
diff --git a/Leaflet/leaf.html b/Leaflet/leaf.html
new file mode 100644
index 0000000..f16fc9d
--- /dev/null
+++ b/Leaflet/leaf.html
@@ -0,0 +1,372 @@
+
+<!DOCTYPE html>
+<html lang="id">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>WebGIS SPBU</title>
+	<link rel="stylesheet" href="assets/vendor/leaflet/leaflet.css">
+	<link rel="stylesheet" href="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css">
+	<style>
+		:root {
+			--bg-top: #f0f9ff;
+			--bg-bottom: #e2e8f0;
+			--panel: rgba(255, 255, 255, 0.92);
+			--line: #cbd5e1;
+			--text: #0f172a;
+			--muted: #334155;
+			--accent: #16a34a;
+			--accent-dark: #166534;
+		}
+
+		* {
+			box-sizing: border-box;
+		}
+
+		html,
+		body {
+			height: 100%;
+			margin: 0;
+			font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+			background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
+			color: var(--text);
+			overflow: hidden;
+		}
+
+		.app {
+			height: 100dvh;
+			min-height: 100vh;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.header {
+			padding: 14px 18px;
+			border-bottom: 1px solid var(--line);
+			background: var(--panel);
+			backdrop-filter: blur(4px);
+			z-index: 500;
+		}
+
+		.header h1 {
+			margin: 0 0 6px;
+			font-size: 20px;
+			line-height: 1.2;
+		}
+
+		.header p {
+			margin: 0;
+			color: var(--muted);
+			font-size: 14px;
+		}
+
+		.legend {
+			display: flex;
+			gap: 10px;
+			flex-wrap: wrap;
+			margin-top: 8px;
+			font-size: 12px;
+			color: #223055;
+		}
+
+		.legend span {
+			display: inline-flex;
+			align-items: center;
+			gap: 6px;
+			background: #ffffff;
+			border: 1px solid var(--line);
+			border-radius: 999px;
+			padding: 5px 10px;
+		}
+
+		.dot {
+			width: 10px;
+			height: 10px;
+			border-radius: 50%;
+			display: inline-block;
+		}
+
+		.map-wrap {
+			flex: 1;
+			min-height: 0;
+			position: relative;
+		}
+
+		#map {
+			height: 100%;
+			width: 100%;
+			background: #dbeafe;
+		}
+
+		.leaflet-popup-content-wrapper,
+		.leaflet-popup-tip {
+			background: #ffffff;
+			color: var(--text);
+		}
+
+		.leaflet-popup-content {
+			margin: 12px 14px;
+		}
+
+		.form-popup {
+			min-width: 260px;
+		}
+
+		.form-popup h3 {
+			margin: 0 0 12px;
+			font-size: 16px;
+		}
+
+		.field {
+			margin-bottom: 10px;
+		}
+
+		.field label {
+			display: block;
+			font-size: 12px;
+			margin-bottom: 5px;
+			color: var(--muted);
+		}
+
+		.field input,
+		.field select {
+			width: 100%;
+			padding: 9px 10px;
+			border: 1px solid var(--line);
+			border-radius: 8px;
+			background: #ffffff;
+			color: var(--text);
+		}
+
+		.field input:focus,
+		.field select:focus {
+			outline: 2px solid rgba(22, 163, 74, 0.25);
+			border-color: var(--accent);
+		}
+
+		.actions {
+			display: flex;
+			gap: 8px;
+			margin-top: 12px;
+		}
+
+		.actions button {
+			flex: 1;
+			padding: 10px 12px;
+			border: 0;
+			border-radius: 8px;
+			cursor: pointer;
+			font-weight: 700;
+		}
+
+		.btn-save {
+			background: var(--accent);
+			color: #f0fdf4;
+		}
+
+		.btn-save:hover {
+			background: var(--accent-dark);
+		}
+
+		.btn-cancel {
+			background: #e2e8f0;
+			color: #1e293b;
+		}
+
+		.btn-delete {
+			background: #dc2626;
+			color: #ffffff;
+			margin-top: 8px;
+			width: 100%;
+		}
+
+		.btn-delete:hover {
+			background: #b91c1c;
+		}
+
+		.point-popup .meta {
+			font-size: 12px;
+			color: #475569;
+			margin-top: 8px;
+		}
+
+		.status {
+			font-size: 12px;
+			margin-top: 10px;
+			color: #475569;
+		}
+
+		.status.error {
+			color: #b91c1c;
+		}
+
+		.status.success {
+			color: #166534;
+		}
+
+		/* Perkecil vertex saat menggambar line/polygon */
+		.leaflet-div-icon.leaflet-editing-icon {
+			width: 8px !important;
+			height: 8px !important;
+			margin-left: -4px !important;
+			margin-top: -4px !important;
+			border-radius: 50%;
+		}
+
+		.modal-backdrop {
+			position: fixed;
+			inset: 0;
+			background: rgba(11, 19, 43, 0.38);
+			display: none;
+			align-items: center;
+			justify-content: center;
+			padding: 16px;
+			z-index: 2000;
+		}
+
+		.modal-backdrop.open {
+			display: flex;
+		}
+
+		.modal {
+			width: min(460px, 100%);
+			background: #ffffff;
+			border-radius: 14px;
+			border: 1px solid var(--line);
+			box-shadow: 0 20px 55px rgba(17, 24, 39, 0.28);
+			padding: 16px;
+		}
+
+		.modal h3 {
+			margin: 0 0 12px;
+		}
+
+		.field input[readonly] {
+			background: #eef2ff;
+		}
+
+		.popup-actions {
+			display: flex;
+			gap: 8px;
+			margin-top: 8px;
+		}
+
+		.popup-actions button {
+			flex: 1;
+			font-size: 12px;
+			padding: 8px;
+			border: 0;
+			border-radius: 8px;
+			cursor: pointer;
+		}
+
+		.btn-popup-edit {
+			background: #16a34a;
+			color: #ffffff;
+		}
+
+		.btn-popup-refine {
+			background: #f59e0b;
+			color: #111827;
+		}
+
+		.btn-popup-save {
+			background: #0f766e;
+			color: #ffffff;
+		}
+
+		.btn-popup-cancel {
+			background: #64748b;
+			color: #ffffff;
+		}
+
+		.btn-popup-delete {
+			background: #dc2626;
+			color: #ffffff;
+		}
+
+		@media (max-width: 640px) {
+			.header h1 {
+				font-size: 18px;
+			}
+
+			.header p {
+				font-size: 13px;
+			}
+		}
+	</style>
+</head>
+<body>
+	<div class="app">
+		<header class="header">
+			<h1>WebGIS SPBU</h1>
+			<p>Klik peta untuk titik SPBU. Gunakan toolbar kiri peta untuk menggambar jalan dan parsil.</p>
+			<div class="legend">
+				<span><i class="dot" style="background:#dc2626"></i>Jalan Nasional</span>
+				<span><i class="dot" style="background:#2563eb"></i>Jalan Provinsi</span>
+				<span><i class="dot" style="background:#16a34a"></i>Jalan Kabupaten</span>
+			</div>
+		</header>
+		<div class="map-wrap">
+			<div id="map"></div>
+		</div>
+	</div>
+
+	<div id="modal-backdrop" class="modal-backdrop" aria-hidden="true">
+		<div class="modal">
+			<h3 id="modal-title">Form Data</h3>
+			<form id="feature-form">
+				<div id="road-fields" hidden>
+					<div class="field">
+						<label for="nama_jalan">Nama Jalan</label>
+						<input id="nama_jalan" name="nama_jalan" type="text" required>
+					</div>
+					<div class="field">
+						<label for="status_jalan">Status Jalan</label>
+						<select id="status_jalan" name="status_jalan" required>
+							<option value="nasional">Jalan Nasional</option>
+							<option value="provinsi">Jalan Provinsi</option>
+							<option value="kabupaten">Jalan Kabupaten</option>
+						</select>
+					</div>
+					<div class="field">
+						<label for="panjang_meter">Panjang Jalan (meter)</label>
+						<input id="panjang_meter" name="panjang_meter" type="text" readonly>
+					</div>
+				</div>
+
+				<div id="parcel-fields" hidden>
+					<div class="field">
+						<label for="nama_pemilik">Nama Pemilik</label>
+						<input id="nama_pemilik" name="nama_pemilik" type="text" required>
+					</div>
+					<div class="field">
+						<label for="status_kepemilikan">Status Kepemilikan</label>
+						<select id="status_kepemilikan" name="status_kepemilikan" required>
+							<option value="SHM">Sertifikat Hak Milik (SHM)</option>
+							<option value="HGB">Sertifikat Hak Guna Bangunan (HGB)</option>
+							<option value="HGU">Sertifikat Hak Guna Usaha (HGU)</option>
+							<option value="HP">Sertifikat Hak Pakai (HP)</option>
+						</select>
+					</div>
+					<div class="field">
+						<label for="luas_m2">Luas Tanah (meter persegi)</label>
+						<input id="luas_m2" name="luas_m2" type="text" readonly>
+					</div>
+				</div>
+
+				<div class="actions">
+					<button type="submit" class="btn-save">Simpan</button>
+					<button type="button" id="btn-cancel" class="btn-cancel">Batal</button>
+				</div>
+				<div id="form-status" class="status"></div>
+			</form>
+		</div>
+	</div>
+
+	<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+	<script src="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.js"></script>
+	<script src="assets/js/kecamatan-layer.js"></script>
+	<script src="assets/js/map.js"></script>
+</body>
+</html>
diff --git a/Leaflet/spatial.html b/Leaflet/spatial.html
new file mode 100644
index 0000000..803ab91
--- /dev/null
+++ b/Leaflet/spatial.html
@@ -0,0 +1,296 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>WebGIS Spasial Jalan dan Parsil</title>
+
+    <link rel="stylesheet" href="assets/vendor/leaflet/leaflet.css">
+    <link rel="stylesheet" href="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css">
+
+    <style>
+        :root {
+            --ink: #0b132b;
+            --sky: #f5f7ff;
+            --line: #d3d9eb;
+            --panel: #ffffff;
+            --accent: #0f766e;
+            --accent-dark: #115e59;
+            --danger: #b91c1c;
+            --muted: #3f4d73;
+        }
+
+        * {
+            box-sizing: border-box;
+        }
+
+        html,
+        body {
+            margin: 0;
+            height: 100%;
+            font-family: "Trebuchet MS", "Segoe UI", sans-serif;
+            color: var(--ink);
+            background: radial-gradient(circle at top left, #e0f2fe 0%, #f8fafc 45%, #f1f5f9 100%);
+        }
+
+        .app {
+            height: 100dvh;
+            display: grid;
+            grid-template-rows: auto 1fr;
+        }
+
+        .header {
+            display: flex;
+            gap: 16px;
+            justify-content: space-between;
+            align-items: center;
+            padding: 12px 18px;
+            border-bottom: 1px solid var(--line);
+            background: rgba(255, 255, 255, 0.94);
+            backdrop-filter: blur(6px);
+        }
+
+        .header h1 {
+            margin: 0;
+            font-size: 20px;
+        }
+
+        .header p {
+            margin: 4px 0 0;
+            color: var(--muted);
+            font-size: 13px;
+        }
+
+        .legend {
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+            font-size: 12px;
+            color: #223055;
+        }
+
+        .legend span {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            background: var(--panel);
+            border: 1px solid var(--line);
+            border-radius: 999px;
+            padding: 6px 10px;
+        }
+
+        .dot {
+            width: 10px;
+            height: 10px;
+            border-radius: 999px;
+            display: inline-block;
+        }
+
+        .map-wrap {
+            position: relative;
+            min-height: 0;
+        }
+
+        #map {
+            width: 100%;
+            height: 100%;
+        }
+
+        .modal-backdrop {
+            position: fixed;
+            inset: 0;
+            background: rgba(11, 19, 43, 0.38);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            padding: 16px;
+            z-index: 2000;
+        }
+
+        .modal-backdrop.open {
+            display: flex;
+        }
+
+        .modal {
+            width: min(460px, 100%);
+            background: var(--panel);
+            border-radius: 14px;
+            border: 1px solid var(--line);
+            box-shadow: 0 20px 55px rgba(17, 24, 39, 0.28);
+            padding: 16px;
+        }
+
+        .modal h3 {
+            margin: 0 0 12px;
+        }
+
+        .field {
+            margin-bottom: 10px;
+        }
+
+        .field label {
+            display: block;
+            font-size: 12px;
+            margin-bottom: 4px;
+            color: var(--muted);
+        }
+
+        .field input,
+        .field select {
+            width: 100%;
+            padding: 9px 10px;
+            border-radius: 8px;
+            border: 1px solid var(--line);
+            font-size: 14px;
+            color: var(--ink);
+        }
+
+        .field input[readonly] {
+            background: #eef2ff;
+        }
+
+        .actions {
+            display: flex;
+            gap: 10px;
+            margin-top: 12px;
+        }
+
+        button {
+            border: 0;
+            border-radius: 8px;
+            padding: 10px 12px;
+            cursor: pointer;
+            font-weight: 700;
+        }
+
+        .btn-primary {
+            flex: 1;
+            background: var(--accent);
+            color: #f0fdfa;
+        }
+
+        .btn-primary:hover {
+            background: var(--accent-dark);
+        }
+
+        .btn-secondary {
+            background: #e2e8f0;
+            color: #1e293b;
+        }
+
+        .btn-danger {
+            background: var(--danger);
+            color: #fff;
+        }
+
+        .status {
+            font-size: 12px;
+            margin-top: 8px;
+            color: #334155;
+            min-height: 16px;
+        }
+
+        .status.error {
+            color: #b91c1c;
+        }
+
+        .status.success {
+            color: #166534;
+        }
+
+        .popup-actions {
+            display: flex;
+            gap: 8px;
+            margin-top: 8px;
+        }
+
+        .popup-actions button {
+            flex: 1;
+            font-size: 12px;
+            padding: 8px;
+        }
+
+        @media (max-width: 700px) {
+            .header {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="app">
+        <header class="header">
+            <div>
+                <h1>WebGIS Manajemen Jalan & Parsil</h1>
+                <p>Gunakan toolbar kiri peta untuk gambar polyline/polygon, edit, atau hapus geometri.</p>
+            </div>
+            <div class="legend">
+                <span><i class="dot" style="background:#dc2626"></i>Jalan Nasional</span>
+                <span><i class="dot" style="background:#2563eb"></i>Jalan Provinsi</span>
+                <span><i class="dot" style="background:#16a34a"></i>Jalan Kabupaten</span>
+            </div>
+        </header>
+        <div class="map-wrap">
+            <div id="map"></div>
+        </div>
+    </div>
+
+    <div id="modal-backdrop" class="modal-backdrop" aria-hidden="true">
+        <div class="modal">
+            <h3 id="modal-title">Form Data</h3>
+            <form id="feature-form">
+                <div id="road-fields" hidden>
+                    <div class="field">
+                        <label for="nama_jalan">Nama Jalan</label>
+                        <input id="nama_jalan" name="nama_jalan" type="text" required>
+                    </div>
+                    <div class="field">
+                        <label for="status_jalan">Status Jalan</label>
+                        <select id="status_jalan" name="status_jalan" required>
+                            <option value="nasional">Jalan Nasional</option>
+                            <option value="provinsi">Jalan Provinsi</option>
+                            <option value="kabupaten">Jalan Kabupaten</option>
+                        </select>
+                    </div>
+                    <div class="field">
+                        <label for="panjang_meter">Panjang Jalan (meter)</label>
+                        <input id="panjang_meter" name="panjang_meter" type="text" readonly>
+                    </div>
+                </div>
+
+                <div id="parcel-fields" hidden>
+                    <div class="field">
+                        <label for="nama_pemilik">Nama Pemilik</label>
+                        <input id="nama_pemilik" name="nama_pemilik" type="text" required>
+                    </div>
+                    <div class="field">
+                        <label for="status_kepemilikan">Status Kepemilikan</label>
+                        <select id="status_kepemilikan" name="status_kepemilikan" required>
+                            <option value="SHM">Sertifikat Hak Milik (SHM)</option>
+                            <option value="HGB">Sertifikat Hak Guna Bangunan (HGB)</option>
+                            <option value="HGU">Sertifikat Hak Guna Usaha (HGU)</option>
+                            <option value="HP">Sertifikat Hak Pakai (HP)</option>
+                        </select>
+                    </div>
+                    <div class="field">
+                        <label for="luas_m2">Luas Tanah (meter persegi)</label>
+                        <input id="luas_m2" name="luas_m2" type="text" readonly>
+                    </div>
+                </div>
+
+                <div class="actions">
+                    <button type="submit" class="btn-primary">Simpan</button>
+                    <button type="button" id="btn-cancel" class="btn-secondary">Batal</button>
+                </div>
+                <div id="form-status" class="status"></div>
+            </form>
+        </div>
+    </div>
+
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+    <script src="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.js"></script>
+    <script src="assets/js/kecamatan-layer.js"></script>
+    <script src="assets/js/spatial.js"></script>
+</body>
+</html>
diff --git a/Leaflet/sql/schema.sql b/Leaflet/sql/schema.sql
new file mode 100644
index 0000000..3bc9fb5
--- /dev/null
+++ b/Leaflet/sql/schema.sql
@@ -0,0 +1,12 @@
+CREATE DATABASE IF NOT EXISTS webgis_spbu;
+USE webgis_spbu;
+
+CREATE TABLE IF NOT EXISTS spbu_points (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    nama VARCHAR(150) NOT NULL,
+    no VARCHAR(50) NOT NULL,
+    status_24jam ENUM('24jam', 'tidak') NOT NULL,
+    latitude DECIMAL(10, 7) NOT NULL,
+    longitude DECIMAL(10, 7) NOT NULL,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
\ No newline at end of file
diff --git a/Leaflet/sql/spatial_schema.sql b/Leaflet/sql/spatial_schema.sql
new file mode 100644
index 0000000..81db891
--- /dev/null
+++ b/Leaflet/sql/spatial_schema.sql
@@ -0,0 +1,24 @@
+CREATE DATABASE IF NOT EXISTS webgis_spbu;
+USE webgis_spbu;
+
+CREATE TABLE IF NOT EXISTS jalan (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    nama_jalan VARCHAR(150) NOT NULL,
+    status ENUM('nasional', 'provinsi', 'kabupaten') NOT NULL,
+    panjang_meter DOUBLE NOT NULL,
+    geom LINESTRING NOT NULL,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+    SPATIAL INDEX idx_jalan_geom (geom)
+) ENGINE=InnoDB;
+
+CREATE TABLE IF NOT EXISTS parsil_tanah (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    nama_pemilik VARCHAR(150) NOT NULL,
+    status_kepemilikan ENUM('SHM', 'HGB', 'HGU', 'HP') NOT NULL,
+    luas_m2 DOUBLE NOT NULL,
+    geom POLYGON NOT NULL,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+    SPATIAL INDEX idx_parsil_geom (geom)
+) ENGINE=InnoDB;
diff --git a/Leaflet2/api/auth.php b/Leaflet2/api/auth.php
new file mode 100644
index 0000000..d90687d
--- /dev/null
+++ b/Leaflet2/api/auth.php
@@ -0,0 +1,65 @@
+<?php
+declare(strict_types=1);
+
+function start_admin_session(): void
+{
+    if (session_status() === PHP_SESSION_NONE) {
+        session_start();
+    }
+}
+
+function is_admin_logged_in(): bool
+{
+    start_admin_session();
+    return !empty($_SESSION['admin_id']);
+}
+
+function require_admin_login(bool $jsonResponse = false): void
+{
+    if (is_admin_logged_in()) {
+        return;
+    }
+
+    if ($jsonResponse) {
+        http_response_code(401);
+        header('Content-Type: application/json');
+        echo json_encode([
+            'success' => false,
+            'message' => 'Sesi login tidak valid. Silakan login ulang.',
+        ]);
+    } else {
+        header('Location: login.php');
+    }
+
+    exit;
+}
+
+function current_admin_name(): string
+{
+    start_admin_session();
+    return (string)($_SESSION['admin_name'] ?? $_SESSION['admin_username'] ?? 'Admin');
+}
+
+function ensure_admin_table(PDO $pdo): void
+{
+    $pdo->exec("
+        CREATE TABLE IF NOT EXISTS admins (
+            id INT AUTO_INCREMENT PRIMARY KEY,
+            username VARCHAR(50) NOT NULL UNIQUE,
+            password_hash VARCHAR(255) NOT NULL,
+            nama VARCHAR(100) NOT NULL DEFAULT 'Administrator',
+            is_active TINYINT(1) NOT NULL DEFAULT 1,
+            created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+        ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
+    ");
+
+    $count = (int)$pdo->query("SELECT COUNT(*) FROM admins")->fetchColumn();
+    if ($count === 0) {
+        $stmt = $pdo->prepare("INSERT INTO admins (username, password_hash, nama) VALUES (?, ?, ?)");
+        $stmt->execute([
+            'admin',
+            password_hash('admin123', PASSWORD_DEFAULT),
+            'Administrator',
+        ]);
+    }
+}
diff --git a/Leaflet2/api/bantuan_create.php b/Leaflet2/api/bantuan_create.php
new file mode 100644
index 0000000..414b52b
--- /dev/null
+++ b/Leaflet2/api/bantuan_create.php
@@ -0,0 +1,49 @@
+<?php
+require_once 'db_pdo.php';
+require_once 'auth.php';
+require_once 'penduduk_feature_helper.php';
+require_admin_login(true);
+header('Content-Type: application/json');
+
+$input = $_POST ?: (json_decode(file_get_contents('php://input'), true) ?: []);
+
+if (empty($input['penduduk_id']) || empty($input['jenis_bantuan']) || empty($input['tanggal_bantuan'])) {
+    echo json_encode(['success' => false, 'message' => 'Penduduk, jenis bantuan, dan tanggal wajib diisi.']);
+    exit;
+}
+
+try {
+    ensurePendudukFeatureSchema($pdo);
+    $buktiFile = saveUploadedEvidence('bukti_file');
+
+    $stmt = $pdo->prepare("
+        INSERT INTO riwayat_bantuan (penduduk_id, jenis_bantuan, tanggal_bantuan, nilai_bantuan, pemberi_bantuan, catatan, bukti_file)
+        VALUES (?, ?, ?, ?, ?, ?, ?)
+    ");
+    $stmt->execute([
+        $input['penduduk_id'],
+        $input['jenis_bantuan'],
+        normalizeDateOrNull($input['tanggal_bantuan']) ?? date('Y-m-d'),
+        $input['nilai_bantuan'] ?? null,
+        $input['pemberi_bantuan'] ?? 'Admin',
+        $input['catatan'] ?? null,
+        $buktiFile,
+    ]);
+
+    $update = $pdo->prepare("
+        UPDATE penduduk_miskin
+        SET status_bantuan = 'Sudah dibantu', jenis_bantuan = ?, tanggal_bantuan = ?
+        WHERE id = ?
+    ");
+    $update->execute([
+        $input['jenis_bantuan'],
+        normalizeDateOrNull($input['tanggal_bantuan']) ?? date('Y-m-d'),
+        $input['penduduk_id'],
+    ]);
+
+    updatePendudukPriority($pdo, (int)$input['penduduk_id']);
+
+    echo json_encode(['success' => true, 'id' => $pdo->lastInsertId()]);
+} catch (Throwable $e) {
+    echo json_encode(['success' => false, 'message' => $e->getMessage()]);
+}
diff --git a/Leaflet2/api/dashboard_stats.php b/Leaflet2/api/dashboard_stats.php
new file mode 100644
index 0000000..7cf553d
--- /dev/null
+++ b/Leaflet2/api/dashboard_stats.php
@@ -0,0 +1,59 @@
+<?php
+require_once 'db_pdo.php';
+require_once 'auth.php';
+require_once 'penduduk_feature_helper.php';
+require_admin_login(true);
+header('Content-Type: application/json');
+
+try {
+    ensurePendudukFeatureSchema($pdo);
+    refreshAllPriorityScores($pdo);
+
+    $stats = [];
+    
+    $ri = $pdo->query("SELECT COUNT(*) as total FROM rumah_ibadah")->fetch();
+    $stats['total_rumah_ibadah'] = $ri['total'];
+
+    $pm = $pdo->query("SELECT COUNT(*) as total FROM penduduk_miskin")->fetch();
+    $stats['total_penduduk'] = $pm['total'];
+
+    $pm_sudah = $pdo->query("SELECT COUNT(*) as total FROM penduduk_miskin WHERE status_bantuan = 'Sudah dibantu'")->fetch();
+    $stats['sudah_dibantu'] = $pm_sudah['total'];
+
+    $pm_belum = $pdo->query("SELECT COUNT(*) as total FROM penduduk_miskin WHERE status_bantuan = 'Belum dibantu'")->fetch();
+    $stats['belum_dibantu'] = $pm_belum['total'];
+    
+    $pm_tunggu = $pdo->query("SELECT COUNT(*) as total FROM penduduk_miskin WHERE status_bantuan = 'Menunggu verifikasi'")->fetch();
+    $stats['menunggu_verifikasi'] = $pm_tunggu['total'];
+
+    $blank = $pdo->query("SELECT COUNT(*) as total FROM penduduk_miskin WHERE is_blank_spot = 1")->fetch();
+    $stats['luar_radius'] = $blank['total'];
+
+    $prioritas = $pdo->query("SELECT COUNT(*) as total FROM penduduk_miskin WHERE skor_prioritas >= 70")->fetch();
+    $stats['prioritas_tinggi'] = $prioritas['total'];
+
+    $survei = $pdo->query("SELECT COUNT(*) as total FROM penduduk_miskin WHERE tindak_lanjut IN ('Sudah disurvei', 'Sudah diverifikasi')")->fetch();
+    $stats['sudah_survei'] = $survei['total'];
+
+    $stats['top_prioritas'] = $pdo->query("
+        SELECT id, kk_nama, kategori_kebutuhan, tindak_lanjut, skor_prioritas
+        FROM penduduk_miskin
+        ORDER BY skor_prioritas DESC, id DESC
+        LIMIT 5
+    ")->fetchAll();
+
+    $stats['kebutuhan_terbanyak'] = $pdo->query("
+        SELECT COALESCE(NULLIF(kategori_kebutuhan, ''), 'Belum diisi') AS kategori, COUNT(*) AS total
+        FROM penduduk_miskin
+        GROUP BY COALESCE(NULLIF(kategori_kebutuhan, ''), 'Belum diisi')
+        ORDER BY total DESC
+        LIMIT 5
+    ")->fetchAll();
+
+    echo json_encode([
+        'success' => true,
+        'data' => $stats
+    ]);
+} catch (Exception $e) {
+    echo json_encode(['success' => false, 'message' => $e->getMessage()]);
+}
diff --git a/Leaflet2/api/db_pdo.php b/Leaflet2/api/db_pdo.php
new file mode 100644
index 0000000..8999560
--- /dev/null
+++ b/Leaflet2/api/db_pdo.php
@@ -0,0 +1,42 @@
+<?php
+declare(strict_types=1);
+
+$host = getenv('DB_HOST') ?: '127.0.0.1';
+$database = getenv('DB_DATABASE') ?: 'webgis_miskin';
+$username = getenv('DB_USERNAME') ?: 'root';
+$password = getenv('DB_PASSWORD') ?: '';
+$charset = getenv('DB_CHARSET') ?: 'utf8mb4';
+
+set_exception_handler(static function (Throwable $exception): void {
+    if (!headers_sent()) {
+        http_response_code(500);
+        header('Content-Type: application/json');
+    }
+
+    echo json_encode([
+        'success' => false,
+        'message' => 'Terjadi kesalahan server.',
+        'detail' => $exception->getMessage(),
+    ]);
+    exit;
+});
+
+$dsn = "mysql:host={$host};dbname={$database};charset={$charset}";
+
+$options = [
+    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
+    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
+    PDO::ATTR_EMULATE_PREPARES => false,
+];
+
+try {
+    $pdo = new PDO($dsn, $username, $password, $options);
+} catch (PDOException $exception) {
+    http_response_code(500);
+    header('Content-Type: application/json');
+    echo json_encode([
+        'success' => false,
+        'message' => 'Koneksi database gagal: ' . $exception->getMessage(),
+    ]);
+    exit;
+}
diff --git a/Leaflet2/api/haversine_helper.php b/Leaflet2/api/haversine_helper.php
new file mode 100644
index 0000000..a820d25
--- /dev/null
+++ b/Leaflet2/api/haversine_helper.php
@@ -0,0 +1,145 @@
+<?php
+/**
+ * Menghitung jarak antara dua koordinat menggunakan formula Haversine.
+ * @param float $lat1 Latitude titik pertama
+ * @param float $lon1 Longitude titik pertama
+ * @param float $lat2 Latitude titik kedua
+ * @param float $lon2 Longitude titik kedua
+ * @return float Jarak dalam satuan meter
+ */
+function calculateHaversineDistance($lat1, $lon1, $lat2, $lon2) {
+    $earthRadius = 6371000; // Radius bumi dalam meter
+
+    $latFrom = deg2rad($lat1);
+    $lonFrom = deg2rad($lon1);
+    $latTo = deg2rad($lat2);
+    $lonTo = deg2rad($lon2);
+
+    $latDelta = $latTo - $latFrom;
+    $lonDelta = $lonTo - $lonFrom;
+
+    $angle = 2 * asin(sqrt(pow(sin($latDelta / 2), 2) +
+        cos($latFrom) * cos($latTo) * pow(sin($lonDelta / 2), 2)));
+        
+    return $angle * $earthRadius;
+}
+
+function calculateOsrmRouteDistance($lat1, $lon1, $lat2, $lon2): ?float
+{
+    $coordinates = sprintf(
+        '%.8F,%.8F;%.8F,%.8F',
+        $lon1,
+        $lat1,
+        $lon2,
+        $lat2
+    );
+    $url = 'https://router.project-osrm.org/route/v1/driving/' . $coordinates . '?overview=false&alternatives=false&steps=false';
+
+    $ch = curl_init($url);
+    if ($ch === false) {
+        return null;
+    }
+
+    curl_setopt_array($ch, [
+        CURLOPT_RETURNTRANSFER => true,
+        CURLOPT_CONNECTTIMEOUT => 4,
+        CURLOPT_TIMEOUT => 8,
+        CURLOPT_USERAGENT => 'WebGIS-Peduli/1.0',
+    ]);
+
+    $response = curl_exec($ch);
+    $httpCode = (int)curl_getinfo($ch, CURLINFO_RESPONSE_CODE);
+    curl_close($ch);
+
+    if ($response === false || $httpCode !== 200) {
+        return null;
+    }
+
+    $json = json_decode($response, true);
+    if (!is_array($json) || ($json['code'] ?? '') !== 'Ok') {
+        return null;
+    }
+
+    $distance = $json['routes'][0]['distance'] ?? null;
+
+    return is_numeric($distance) ? (float)$distance : null;
+}
+
+function calculateRoadDistance($lat1, $lon1, $lat2, $lon2): ?float
+{
+    return calculateOsrmRouteDistance((float)$lat1, (float)$lon1, (float)$lat2, (float)$lon2);
+}
+
+function ensurePendudukDistanceColumns(PDO $pdo): void
+{
+    $stmt = $pdo->query("SHOW COLUMNS FROM penduduk_miskin LIKE 'jarak_rute_m'");
+    if ($stmt->fetch() === false) {
+        $pdo->exec("ALTER TABLE penduduk_miskin ADD COLUMN jarak_rute_m DECIMAL(10, 2) NULL AFTER jarak_m");
+    }
+}
+
+function calculatePendudukCoverage(PDO $pdo, float $lat, float $lng): array
+{
+    $stmtRi = $pdo->query("SELECT id, lat, lng, radius FROM rumah_ibadah");
+    $rumahIbadah = $stmtRi->fetchAll(PDO::FETCH_ASSOC);
+
+    $nearest = null;
+    $nearestCovered = null;
+
+    foreach ($rumahIbadah as $ri) {
+        $distance = calculateHaversineDistance($lat, $lng, (float)$ri['lat'], (float)$ri['lng']);
+        $result = [
+            'ibadah_id' => (int)$ri['id'],
+            'ri_lat' => (float)$ri['lat'],
+            'ri_lng' => (float)$ri['lng'],
+            'jarak_m' => round($distance, 2),
+            'distance' => $distance,
+        ];
+
+        if ($nearest === null || $distance < $nearest['distance']) {
+            $nearest = $result;
+        }
+
+        if ($distance <= (float)$ri['radius'] && ($nearestCovered === null || $distance < $nearestCovered['distance'])) {
+            $nearestCovered = $result;
+        }
+    }
+
+    $selected = $nearestCovered ?? $nearest;
+    $routeDistance = null;
+
+    if ($selected !== null) {
+        $routeDistance = calculateRoadDistance($lat, $lng, $selected['ri_lat'], $selected['ri_lng']);
+    }
+
+    return [
+        'ibadah_id' => $selected['ibadah_id'] ?? null,
+        'jarak_m' => $selected['jarak_m'] ?? null,
+        'jarak_rute_m' => $routeDistance !== null ? round($routeDistance, 2) : null,
+        'is_blank_spot' => $nearestCovered === null ? 1 : 0,
+    ];
+}
+
+function recalculateAllPendudukCoverage(PDO $pdo): void
+{
+    ensurePendudukDistanceColumns($pdo);
+
+    $stmt = $pdo->query("SELECT id, lat, lng FROM penduduk_miskin");
+    $penduduk = $stmt->fetchAll(PDO::FETCH_ASSOC);
+    $update = $pdo->prepare("
+        UPDATE penduduk_miskin
+        SET ibadah_id = ?, jarak_m = ?, jarak_rute_m = ?, is_blank_spot = ?
+        WHERE id = ?
+    ");
+
+    foreach ($penduduk as $row) {
+        $coverage = calculatePendudukCoverage($pdo, (float)$row['lat'], (float)$row['lng']);
+        $update->execute([
+            $coverage['ibadah_id'],
+            $coverage['jarak_m'],
+            $coverage['jarak_rute_m'],
+            $coverage['is_blank_spot'],
+            $row['id'],
+        ]);
+    }
+}
diff --git a/Leaflet2/api/penduduk_create.php b/Leaflet2/api/penduduk_create.php
new file mode 100644
index 0000000..8cdba4f
--- /dev/null
+++ b/Leaflet2/api/penduduk_create.php
@@ -0,0 +1,95 @@
+<?php
+require_once 'db_pdo.php';
+require_once 'haversine_helper.php';
+require_once 'penduduk_feature_helper.php';
+require_once 'auth.php';
+require_admin_login(true);
+header('Content-Type: application/json');
+
+$input = readPendudukInput();
+
+if (!$input) {
+    echo json_encode(['success' => false, 'message' => 'Input tidak valid']);
+    exit;
+}
+
+try {
+    ensurePendudukDistanceColumns($pdo);
+    ensurePendudukFeatureSchema($pdo);
+
+    $input_lat = floatval($input['lat']);
+    $input_lng = floatval($input['lng']);
+    $coverage = calculatePendudukCoverage($pdo, $input_lat, $input_lng);
+    $buktiFile = saveUploadedEvidence('bukti_file');
+
+    $stmt = $pdo->prepare("
+        INSERT INTO penduduk_miskin 
+        (kk_nama, kk_nik, alamat, lat, lng, ibadah_id, jarak_m, jarak_rute_m, is_blank_spot, status_bantuan, kategori_kebutuhan, deskripsi_kebutuhan, tindak_lanjut, kondisi_rumah, penghasilan, catatan_survei, bukti_file, jenis_bantuan, tanggal_bantuan) 
+        VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+    ");
+    $stmt->execute([
+        $input['kk_nama'],
+        $input['kk_nik'] ?? null,
+        $input['alamat'],
+        $input['lat'],
+        $input['lng'],
+        $coverage['ibadah_id'],
+        $coverage['jarak_m'],
+        $coverage['jarak_rute_m'],
+        $coverage['is_blank_spot'],
+        $input['status_bantuan'] ?? 'Belum dibantu',
+        $input['kategori_kebutuhan'] ?? null,
+        $input['deskripsi_kebutuhan'] ?? null,
+        $input['tindak_lanjut'] ?? 'Belum disurvei',
+        $input['kondisi_rumah'] ?? null,
+        normalizeNonNegativeIntOrNull($input['penghasilan'] ?? '', 'Penghasilan'),
+        $input['catatan_survei'] ?? null,
+        $buktiFile,
+        $input['jenis_bantuan'] ?? null,
+        normalizeDateOrNull($input['tanggal_bantuan'] ?? null)
+    ]);
+    
+    $penduduk_id = $pdo->lastInsertId();
+
+    // 4. Insert anggota keluarga if exist
+    if (!empty($input['anggota']) && is_array($input['anggota'])) {
+        $stmtAnggota = $pdo->prepare("INSERT INTO anggota_keluarga (penduduk_id, nama, hubungan, umur, pekerjaan) VALUES (?, ?, ?, ?, ?)");
+        foreach ($input['anggota'] as $anggota) {
+            $stmtAnggota->execute([
+                $penduduk_id,
+                $anggota['nama'],
+                $anggota['hubungan'],
+                $anggota['umur'] ?? null,
+                $anggota['pekerjaan'] ?? null
+            ]);
+        }
+    }
+
+    if (($input['status_bantuan'] ?? '') === 'Sudah dibantu' && !empty($input['jenis_bantuan'])) {
+        $stmtRiwayat = $pdo->prepare("
+            INSERT INTO riwayat_bantuan (penduduk_id, jenis_bantuan, tanggal_bantuan, pemberi_bantuan, catatan, bukti_file)
+            VALUES (?, ?, ?, ?, ?, ?)
+        ");
+        $stmtRiwayat->execute([
+            $penduduk_id,
+            $input['jenis_bantuan'],
+            normalizeDateOrNull($input['tanggal_bantuan'] ?? null) ?? date('Y-m-d'),
+            'Admin',
+            'Dicatat dari form penduduk.',
+            $buktiFile,
+        ]);
+    }
+
+    updatePendudukPriority($pdo, (int)$penduduk_id);
+
+    echo json_encode([
+        'success' => true, 
+        'id' => $penduduk_id, 
+        'ibadah_id' => $coverage['ibadah_id'],
+        'jarak_m' => $coverage['jarak_m'],
+        'jarak_rute_m' => $coverage['jarak_rute_m'],
+        'is_blank_spot' => $coverage['is_blank_spot']
+    ]);
+} catch (Exception $e) {
+    echo json_encode(['success' => false, 'message' => $e->getMessage()]);
+}
diff --git a/Leaflet2/api/penduduk_delete.php b/Leaflet2/api/penduduk_delete.php
new file mode 100644
index 0000000..84b38ce
--- /dev/null
+++ b/Leaflet2/api/penduduk_delete.php
@@ -0,0 +1,22 @@
+<?php
+require_once 'db_pdo.php';
+require_once 'auth.php';
+require_admin_login(true);
+header('Content-Type: application/json');
+
+$input = json_decode(file_get_contents('php://input'), true);
+
+if (!$input || empty($input['id'])) {
+    echo json_encode(['success' => false, 'message' => 'Input tidak valid']);
+    exit;
+}
+
+try {
+    $stmt = $pdo->prepare("DELETE FROM penduduk_miskin WHERE id=?");
+    $stmt->execute([$input['id']]);
+    // Note: anggota_keluarga will be deleted automatically due to ON DELETE CASCADE
+
+    echo json_encode(['success' => true]);
+} catch (Exception $e) {
+    echo json_encode(['success' => false, 'message' => $e->getMessage()]);
+}
diff --git a/Leaflet2/api/penduduk_feature_helper.php b/Leaflet2/api/penduduk_feature_helper.php
new file mode 100644
index 0000000..1615f19
--- /dev/null
+++ b/Leaflet2/api/penduduk_feature_helper.php
@@ -0,0 +1,179 @@
+<?php
+declare(strict_types=1);
+
+function ensurePendudukFeatureSchema(PDO $pdo): void
+{
+    $columns = [
+        'kategori_kebutuhan' => "ALTER TABLE penduduk_miskin ADD COLUMN kategori_kebutuhan VARCHAR(100) NULL AFTER status_bantuan",
+        'deskripsi_kebutuhan' => "ALTER TABLE penduduk_miskin ADD COLUMN deskripsi_kebutuhan TEXT NULL AFTER kategori_kebutuhan",
+        'tindak_lanjut' => "ALTER TABLE penduduk_miskin ADD COLUMN tindak_lanjut VARCHAR(60) NOT NULL DEFAULT 'Belum disurvei' AFTER deskripsi_kebutuhan",
+        'kondisi_rumah' => "ALTER TABLE penduduk_miskin ADD COLUMN kondisi_rumah VARCHAR(80) NULL AFTER tindak_lanjut",
+        'penghasilan' => "ALTER TABLE penduduk_miskin ADD COLUMN penghasilan INT NULL AFTER kondisi_rumah",
+        'catatan_survei' => "ALTER TABLE penduduk_miskin ADD COLUMN catatan_survei TEXT NULL AFTER penghasilan",
+        'bukti_file' => "ALTER TABLE penduduk_miskin ADD COLUMN bukti_file VARCHAR(255) NULL AFTER catatan_survei",
+        'skor_prioritas' => "ALTER TABLE penduduk_miskin ADD COLUMN skor_prioritas INT NOT NULL DEFAULT 0 AFTER bukti_file",
+    ];
+
+    foreach ($columns as $column => $sql) {
+        $stmt = $pdo->query("SHOW COLUMNS FROM penduduk_miskin LIKE " . $pdo->quote($column));
+        if ($stmt->fetch() === false) {
+            $pdo->exec($sql);
+        }
+    }
+
+    $pdo->exec("
+        CREATE TABLE IF NOT EXISTS riwayat_bantuan (
+            id INT AUTO_INCREMENT PRIMARY KEY,
+            penduduk_id INT NOT NULL,
+            jenis_bantuan VARCHAR(120) NOT NULL,
+            tanggal_bantuan DATE NOT NULL,
+            nilai_bantuan VARCHAR(80) NULL,
+            pemberi_bantuan VARCHAR(120) NULL,
+            catatan TEXT NULL,
+            bukti_file VARCHAR(255) NULL,
+            created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+            FOREIGN KEY (penduduk_id) REFERENCES penduduk_miskin(id) ON DELETE CASCADE
+        ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
+    ");
+}
+
+function normalizeDateOrNull(?string $value): ?string
+{
+    $value = trim((string)$value);
+    return $value === '' || $value === '0000-00-00' ? null : $value;
+}
+
+function normalizeNonNegativeIntOrNull(mixed $value, string $label): ?int
+{
+    $value = trim((string)$value);
+    if ($value === '') {
+        return null;
+    }
+
+    if (!is_numeric($value) || (float)$value < 0) {
+        throw new InvalidArgumentException($label . ' tidak boleh bernilai negatif.');
+    }
+
+    return (int)$value;
+}
+
+function calculatePriorityScore(array $penduduk, array $anggota = []): int
+{
+    $score = 0;
+    $anggotaCount = count($anggota);
+    $penghasilan = isset($penduduk['penghasilan']) ? (int)$penduduk['penghasilan'] : 0;
+
+    if (($penduduk['status_bantuan'] ?? '') === 'Belum dibantu') $score += 30;
+    if (($penduduk['status_bantuan'] ?? '') === 'Menunggu verifikasi') $score += 15;
+    if ((int)($penduduk['is_blank_spot'] ?? 0) === 1) $score += 15;
+
+    $score += min(20, $anggotaCount * 4);
+
+    foreach ($anggota as $a) {
+        $umur = isset($a['umur']) ? (int)$a['umur'] : null;
+        if ($umur !== null && ($umur < 6 || $umur >= 60)) {
+            $score += 5;
+        }
+    }
+
+    if ($penghasilan > 0 && $penghasilan <= 1000000) $score += 15;
+    elseif ($penghasilan > 1000000 && $penghasilan <= 2000000) $score += 8;
+
+    $kondisi = strtolower((string)($penduduk['kondisi_rumah'] ?? ''));
+    if (str_contains($kondisi, 'tidak layak')) $score += 15;
+    elseif (str_contains($kondisi, 'rentan')) $score += 8;
+
+    $kebutuhan = strtolower((string)($penduduk['kategori_kebutuhan'] ?? ''));
+    if (in_array($kebutuhan, ['kesehatan', 'rumah tidak layak', 'bantuan darurat'], true)) $score += 10;
+
+    return min(100, max(0, $score));
+}
+
+function getPriorityLabel(int $score): string
+{
+    if ($score >= 70) return 'Prioritas Tinggi';
+    if ($score >= 40) return 'Prioritas Sedang';
+    return 'Prioritas Rendah';
+}
+
+function saveUploadedEvidence(string $fieldName): ?string
+{
+    if (empty($_FILES[$fieldName]) || !is_array($_FILES[$fieldName])) {
+        return null;
+    }
+
+    $file = $_FILES[$fieldName];
+    if (($file['error'] ?? UPLOAD_ERR_NO_FILE) === UPLOAD_ERR_NO_FILE) {
+        return null;
+    }
+
+    if (($file['error'] ?? UPLOAD_ERR_OK) !== UPLOAD_ERR_OK) {
+        throw new RuntimeException('Upload bukti gagal.');
+    }
+
+    if (($file['size'] ?? 0) > 3 * 1024 * 1024) {
+        throw new RuntimeException('Ukuran bukti maksimal 3 MB.');
+    }
+
+    $allowed = [
+        'image/jpeg' => 'jpg',
+        'image/png' => 'png',
+        'image/webp' => 'webp',
+        'application/pdf' => 'pdf',
+    ];
+    $mime = mime_content_type($file['tmp_name']);
+
+    if (!isset($allowed[$mime])) {
+        throw new RuntimeException('Format bukti harus JPG, PNG, WEBP, atau PDF.');
+    }
+
+    $dir = __DIR__ . '/../uploads/bukti';
+    if (!is_dir($dir) && !mkdir($dir, 0775, true) && !is_dir($dir)) {
+        throw new RuntimeException('Folder upload tidak bisa dibuat.');
+    }
+
+    $filename = date('YmdHis') . '-' . bin2hex(random_bytes(6)) . '.' . $allowed[$mime];
+    $target = $dir . '/' . $filename;
+
+    if (!move_uploaded_file($file['tmp_name'], $target)) {
+        throw new RuntimeException('Bukti tidak bisa disimpan.');
+    }
+
+    return 'uploads/bukti/' . $filename;
+}
+
+function readPendudukInput(): array
+{
+    if (str_starts_with((string)($_SERVER['CONTENT_TYPE'] ?? ''), 'multipart/form-data')) {
+        $input = $_POST;
+        $input['anggota'] = json_decode((string)($_POST['anggota'] ?? '[]'), true) ?: [];
+        return $input;
+    }
+
+    return json_decode(file_get_contents('php://input'), true) ?: [];
+}
+
+function updatePendudukPriority(PDO $pdo, int $pendudukId): void
+{
+    $stmt = $pdo->prepare("SELECT * FROM penduduk_miskin WHERE id = ?");
+    $stmt->execute([$pendudukId]);
+    $penduduk = $stmt->fetch(PDO::FETCH_ASSOC);
+    if (!$penduduk) return;
+
+    $stmtAnggota = $pdo->prepare("SELECT * FROM anggota_keluarga WHERE penduduk_id = ?");
+    $stmtAnggota->execute([$pendudukId]);
+    $anggota = $stmtAnggota->fetchAll(PDO::FETCH_ASSOC);
+    $score = calculatePriorityScore($penduduk, $anggota);
+
+    $update = $pdo->prepare("UPDATE penduduk_miskin SET skor_prioritas = ? WHERE id = ?");
+    $update->execute([$score, $pendudukId]);
+}
+
+function refreshAllPriorityScores(PDO $pdo): void
+{
+    ensurePendudukFeatureSchema($pdo);
+    $ids = $pdo->query("SELECT id FROM penduduk_miskin")->fetchAll(PDO::FETCH_COLUMN);
+    foreach ($ids as $id) {
+        updatePendudukPriority($pdo, (int)$id);
+    }
+}
diff --git a/Leaflet2/api/penduduk_read.php b/Leaflet2/api/penduduk_read.php
new file mode 100644
index 0000000..9a6f745
--- /dev/null
+++ b/Leaflet2/api/penduduk_read.php
@@ -0,0 +1,50 @@
+<?php
+require_once 'db_pdo.php';
+require_once 'auth.php';
+require_once 'penduduk_feature_helper.php';
+require_admin_login(true);
+header('Content-Type: application/json');
+
+try {
+    ensurePendudukFeatureSchema($pdo);
+    refreshAllPriorityScores($pdo);
+
+    // Join with rumah_ibadah to get name
+    $stmt = $pdo->query("
+        SELECT p.*, r.nama as rumah_ibadah_nama 
+        FROM penduduk_miskin p
+        LEFT JOIN rumah_ibadah r ON p.ibadah_id = r.id
+        ORDER BY p.skor_prioritas DESC, p.id DESC
+    ");
+    $data = $stmt->fetchAll();
+
+    // Get all anggota
+    $stmtAnggota = $pdo->query("SELECT * FROM anggota_keluarga");
+    $anggota = $stmtAnggota->fetchAll();
+    
+    // Map anggota to penduduk
+    $anggotaByPenduduk = [];
+    foreach ($anggota as $a) {
+        $anggotaByPenduduk[$a['penduduk_id']][] = $a;
+    }
+
+    $stmtRiwayat = $pdo->query("SELECT * FROM riwayat_bantuan ORDER BY tanggal_bantuan DESC, id DESC");
+    $riwayat = $stmtRiwayat->fetchAll();
+    $riwayatByPenduduk = [];
+    foreach ($riwayat as $r) {
+        $riwayatByPenduduk[$r['penduduk_id']][] = $r;
+    }
+
+    foreach ($data as &$d) {
+        $d['anggota'] = $anggotaByPenduduk[$d['id']] ?? [];
+        $d['riwayat_bantuan'] = $riwayatByPenduduk[$d['id']] ?? [];
+        $d['label_prioritas'] = getPriorityLabel((int)($d['skor_prioritas'] ?? 0));
+    }
+
+    echo json_encode([
+        'success' => true,
+        'data' => $data
+    ]);
+} catch (Exception $e) {
+    echo json_encode(['success' => false, 'message' => $e->getMessage()]);
+}
diff --git a/Leaflet2/api/penduduk_update.php b/Leaflet2/api/penduduk_update.php
new file mode 100644
index 0000000..dfccc19
--- /dev/null
+++ b/Leaflet2/api/penduduk_update.php
@@ -0,0 +1,84 @@
+<?php
+require_once 'db_pdo.php';
+require_once 'haversine_helper.php';
+require_once 'penduduk_feature_helper.php';
+require_once 'auth.php';
+require_admin_login(true);
+header('Content-Type: application/json');
+
+$input = readPendudukInput();
+
+if (!$input || empty($input['id'])) {
+    echo json_encode(['success' => false, 'message' => 'Input tidak valid']);
+    exit;
+}
+
+try {
+    ensurePendudukDistanceColumns($pdo);
+    ensurePendudukFeatureSchema($pdo);
+
+    $input_lat = floatval($input['lat']);
+    $input_lng = floatval($input['lng']);
+    $coverage = calculatePendudukCoverage($pdo, $input_lat, $input_lng);
+    $buktiFile = saveUploadedEvidence('bukti_file');
+
+    if ($buktiFile === null && !empty($input['existing_bukti_file'])) {
+        $buktiFile = $input['existing_bukti_file'];
+    }
+
+    $stmt = $pdo->prepare("
+        UPDATE penduduk_miskin 
+        SET kk_nama=?, kk_nik=?, alamat=?, lat=?, lng=?, status_bantuan=?, kategori_kebutuhan=?, deskripsi_kebutuhan=?, tindak_lanjut=?, kondisi_rumah=?, penghasilan=?, catatan_survei=?, bukti_file=?, jenis_bantuan=?, tanggal_bantuan=?, ibadah_id=?, jarak_m=?, jarak_rute_m=?, is_blank_spot=?
+        WHERE id=?
+    ");
+    $stmt->execute([
+        $input['kk_nama'],
+        $input['kk_nik'] ?? null,
+        $input['alamat'],
+        $input['lat'],
+        $input['lng'],
+        $input['status_bantuan'] ?? 'Belum dibantu',
+        $input['kategori_kebutuhan'] ?? null,
+        $input['deskripsi_kebutuhan'] ?? null,
+        $input['tindak_lanjut'] ?? 'Belum disurvei',
+        $input['kondisi_rumah'] ?? null,
+        normalizeNonNegativeIntOrNull($input['penghasilan'] ?? '', 'Penghasilan'),
+        $input['catatan_survei'] ?? null,
+        $buktiFile,
+        $input['jenis_bantuan'] ?? null,
+        normalizeDateOrNull($input['tanggal_bantuan'] ?? null),
+        $coverage['ibadah_id'],
+        $coverage['jarak_m'],
+        $coverage['jarak_rute_m'],
+        $coverage['is_blank_spot'],
+        $input['id']
+    ]);
+
+    // 4. Delete old anggota and insert new ones
+    $pdo->prepare("DELETE FROM anggota_keluarga WHERE penduduk_id=?")->execute([$input['id']]);
+    
+    if (!empty($input['anggota']) && is_array($input['anggota'])) {
+        $stmtAnggota = $pdo->prepare("INSERT INTO anggota_keluarga (penduduk_id, nama, hubungan, umur, pekerjaan) VALUES (?, ?, ?, ?, ?)");
+        foreach ($input['anggota'] as $anggota) {
+            $stmtAnggota->execute([
+                $input['id'],
+                $anggota['nama'],
+                $anggota['hubungan'],
+                $anggota['umur'] ?? null,
+                $anggota['pekerjaan'] ?? null
+            ]);
+        }
+    }
+
+    updatePendudukPriority($pdo, (int)$input['id']);
+
+    echo json_encode([
+        'success' => true,
+        'ibadah_id' => $coverage['ibadah_id'],
+        'jarak_m' => $coverage['jarak_m'],
+        'jarak_rute_m' => $coverage['jarak_rute_m'],
+        'is_blank_spot' => $coverage['is_blank_spot']
+    ]);
+} catch (Exception $e) {
+    echo json_encode(['success' => false, 'message' => $e->getMessage()]);
+}
diff --git a/Leaflet2/api/rumah_ibadah_create.php b/Leaflet2/api/rumah_ibadah_create.php
new file mode 100644
index 0000000..cdc6777
--- /dev/null
+++ b/Leaflet2/api/rumah_ibadah_create.php
@@ -0,0 +1,38 @@
+<?php
+require_once 'db_pdo.php';
+require_once 'auth.php';
+require_once 'haversine_helper.php';
+require_once 'penduduk_feature_helper.php';
+require_once 'rumah_ibadah_helper.php';
+require_admin_login(true);
+header('Content-Type: application/json');
+
+$input = json_decode(file_get_contents('php://input'), true);
+
+if (!$input) {
+    echo json_encode(['success' => false, 'message' => 'Input tidak valid']);
+    exit;
+}
+
+try {
+    assertRumahIbadahNotDuplicate($pdo, $input);
+
+    $stmt = $pdo->prepare("INSERT INTO rumah_ibadah (nama, jenis, kontak, alamat, lat, lng, radius) VALUES (?, ?, ?, ?, ?, ?, ?)");
+    $stmt->execute([
+        $input['nama'],
+        $input['jenis'],
+        $input['kontak'],
+        $input['alamat'],
+        $input['lat'],
+        $input['lng'],
+        $input['radius'] ?? 500
+    ]);
+
+    $id = $pdo->lastInsertId();
+    recalculateAllPendudukCoverage($pdo);
+    refreshAllPriorityScores($pdo);
+
+    echo json_encode(['success' => true, 'id' => $id]);
+} catch (Exception $e) {
+    echo json_encode(['success' => false, 'message' => $e->getMessage()]);
+}
diff --git a/Leaflet2/api/rumah_ibadah_delete.php b/Leaflet2/api/rumah_ibadah_delete.php
new file mode 100644
index 0000000..61bf2c4
--- /dev/null
+++ b/Leaflet2/api/rumah_ibadah_delete.php
@@ -0,0 +1,26 @@
+<?php
+require_once 'db_pdo.php';
+require_once 'auth.php';
+require_once 'haversine_helper.php';
+require_once 'penduduk_feature_helper.php';
+require_admin_login(true);
+header('Content-Type: application/json');
+
+$input = json_decode(file_get_contents('php://input'), true);
+
+if (!$input || empty($input['id'])) {
+    echo json_encode(['success' => false, 'message' => 'Input tidak valid']);
+    exit;
+}
+
+try {
+    $stmt = $pdo->prepare("DELETE FROM rumah_ibadah WHERE id=?");
+    $stmt->execute([$input['id']]);
+
+    recalculateAllPendudukCoverage($pdo);
+    refreshAllPriorityScores($pdo);
+
+    echo json_encode(['success' => true]);
+} catch (Exception $e) {
+    echo json_encode(['success' => false, 'message' => $e->getMessage()]);
+}
diff --git a/Leaflet2/api/rumah_ibadah_helper.php b/Leaflet2/api/rumah_ibadah_helper.php
new file mode 100644
index 0000000..2aaf499
--- /dev/null
+++ b/Leaflet2/api/rumah_ibadah_helper.php
@@ -0,0 +1,41 @@
+<?php
+declare(strict_types=1);
+
+function assertRumahIbadahNotDuplicate(PDO $pdo, array $input, ?int $ignoreId = null): void
+{
+    $nama = trim((string)($input['nama'] ?? ''));
+    $jenis = trim((string)($input['jenis'] ?? ''));
+    $lat = round((float)($input['lat'] ?? 0), 6);
+    $lng = round((float)($input['lng'] ?? 0), 6);
+    $allowedJenis = ['Masjid', 'Gereja', 'Pura', 'Vihara', 'Klenteng', 'Lainnya'];
+
+    if ($nama === '' || $jenis === '' || !isset($input['lat'], $input['lng'])) {
+        throw new InvalidArgumentException('Nama, jenis, dan lokasi rumah ibadah wajib diisi.');
+    }
+
+    if (!in_array($jenis, $allowedJenis, true)) {
+        throw new InvalidArgumentException('Jenis rumah ibadah tidak valid.');
+    }
+
+    $sql = "
+        SELECT id
+        FROM rumah_ibadah
+        WHERE LOWER(TRIM(nama)) = LOWER(TRIM(?))
+          AND jenis = ?
+          AND ROUND(lat, 6) = ?
+          AND ROUND(lng, 6) = ?
+    ";
+    $params = [$nama, $jenis, $lat, $lng];
+
+    if ($ignoreId !== null) {
+        $sql .= " AND id <> ?";
+        $params[] = $ignoreId;
+    }
+
+    $stmt = $pdo->prepare($sql);
+    $stmt->execute($params);
+
+    if ($stmt->fetch()) {
+        throw new InvalidArgumentException('Rumah ibadah dengan nama, jenis, dan lokasi yang sama sudah ada.');
+    }
+}
diff --git a/Leaflet2/api/rumah_ibadah_read.php b/Leaflet2/api/rumah_ibadah_read.php
new file mode 100644
index 0000000..ec34fe2
--- /dev/null
+++ b/Leaflet2/api/rumah_ibadah_read.php
@@ -0,0 +1,17 @@
+<?php
+require_once 'db_pdo.php';
+require_once 'auth.php';
+require_admin_login(true);
+header('Content-Type: application/json');
+
+try {
+    $stmt = $pdo->query("SELECT * FROM rumah_ibadah ORDER BY nama ASC");
+    $data = $stmt->fetchAll();
+
+    echo json_encode([
+        'success' => true,
+        'data' => $data
+    ]);
+} catch (Exception $e) {
+    echo json_encode(['success' => false, 'message' => $e->getMessage()]);
+}
diff --git a/Leaflet2/api/rumah_ibadah_update.php b/Leaflet2/api/rumah_ibadah_update.php
new file mode 100644
index 0000000..cbc99f7
--- /dev/null
+++ b/Leaflet2/api/rumah_ibadah_update.php
@@ -0,0 +1,38 @@
+<?php
+require_once 'db_pdo.php';
+require_once 'auth.php';
+require_once 'haversine_helper.php';
+require_once 'penduduk_feature_helper.php';
+require_once 'rumah_ibadah_helper.php';
+require_admin_login(true);
+header('Content-Type: application/json');
+
+$input = json_decode(file_get_contents('php://input'), true);
+
+if (!$input || empty($input['id'])) {
+    echo json_encode(['success' => false, 'message' => 'Input tidak valid']);
+    exit;
+}
+
+try {
+    assertRumahIbadahNotDuplicate($pdo, $input, (int)$input['id']);
+
+    $stmt = $pdo->prepare("UPDATE rumah_ibadah SET nama=?, jenis=?, kontak=?, alamat=?, lat=?, lng=?, radius=? WHERE id=?");
+    $stmt->execute([
+        $input['nama'],
+        $input['jenis'],
+        $input['kontak'],
+        $input['alamat'],
+        $input['lat'],
+        $input['lng'],
+        $input['radius'],
+        $input['id']
+    ]);
+
+    recalculateAllPendudukCoverage($pdo);
+    refreshAllPriorityScores($pdo);
+
+    echo json_encode(['success' => true]);
+} catch (Exception $e) {
+    echo json_encode(['success' => false, 'message' => $e->getMessage()]);
+}
diff --git a/Leaflet2/api/setup_db.php b/Leaflet2/api/setup_db.php
new file mode 100644
index 0000000..5250267
--- /dev/null
+++ b/Leaflet2/api/setup_db.php
@@ -0,0 +1,46 @@
+<?php
+declare(strict_types=1);
+
+require_once __DIR__ . '/auth.php';
+require_admin_login(true);
+
+header('Content-Type: application/json');
+
+$host = getenv('DB_HOST') ?: '127.0.0.1';
+$username = getenv('DB_SETUP_USERNAME') ?: getenv('DB_USERNAME') ?: 'root';
+$password = getenv('DB_SETUP_PASSWORD') ?: getenv('DB_PASSWORD') ?: '';
+$charset = getenv('DB_CHARSET') ?: 'utf8mb4';
+$schemaPath = __DIR__ . '/../sql/miskin_schema.sql';
+
+$sql = file_get_contents($schemaPath);
+
+if ($sql === false) {
+    echo json_encode([
+        'success' => false,
+        'message' => 'File skema database tidak ditemukan.',
+    ]);
+    exit;
+}
+
+try {
+    $dsn = "mysql:host={$host};charset={$charset}";
+    $pdo = new PDO($dsn, $username, $password, [
+        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
+        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
+        PDO::ATTR_EMULATE_PREPARES => false,
+    ]);
+
+    $pdo->exec($sql);
+
+    echo json_encode([
+        'success' => true,
+        'message' => 'Database webgis_miskin berhasil di-reset.',
+    ]);
+} catch (PDOException $exception) {
+    http_response_code(500);
+    echo json_encode([
+        'success' => false,
+        'message' => 'Gagal reset database.',
+        'error' => $exception->getMessage(),
+    ]);
+}
diff --git a/Leaflet2/assets/css/guide.css b/Leaflet2/assets/css/guide.css
new file mode 100644
index 0000000..cbf2905
--- /dev/null
+++ b/Leaflet2/assets/css/guide.css
@@ -0,0 +1,213 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    color: #172033;
+    background: #eef2f7;
+    font-family: Arial, Helvetica, sans-serif;
+    line-height: 1.5;
+}
+
+.guide-page {
+    width: min(1040px, calc(100% - 32px));
+    margin: 28px auto;
+    background: #ffffff;
+    border-radius: 14px;
+    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.13);
+    padding: 32px;
+}
+
+.guide-hero {
+    display: flex;
+    justify-content: space-between;
+    gap: 24px;
+    border-bottom: 2px solid #1f2937;
+    padding-bottom: 22px;
+    margin-bottom: 24px;
+}
+
+.eyebrow {
+    margin: 0 0 8px;
+    color: #4f46e5;
+    font-size: 0.78rem;
+    font-weight: 800;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+}
+
+h1,
+h2 {
+    margin: 0;
+}
+
+h1 {
+    font-size: 2.2rem;
+}
+
+h2 {
+    margin-bottom: 14px;
+    font-size: 1.25rem;
+}
+
+section {
+    margin-top: 26px;
+}
+
+.lead {
+    max-width: 720px;
+    color: #475467;
+    font-size: 1rem;
+}
+
+.print-btn {
+    align-self: flex-start;
+    border: 0;
+    border-radius: 10px;
+    background: #4f46e5;
+    color: white;
+    cursor: pointer;
+    font-weight: 800;
+    padding: 11px 15px;
+    white-space: nowrap;
+}
+
+.access-panel {
+    border: 1px solid #d8dee9;
+    border-radius: 12px;
+    background: #f8fafc;
+    padding: 20px;
+}
+
+.info-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 12px;
+}
+
+.info-grid div,
+.legend-grid div {
+    border: 1px solid #d8dee9;
+    border-radius: 10px;
+    background: #ffffff;
+    padding: 14px;
+}
+
+.info-grid span {
+    display: block;
+    color: #667085;
+    font-size: 0.82rem;
+    margin-bottom: 6px;
+}
+
+.info-grid strong {
+    overflow-wrap: anywhere;
+}
+
+.note {
+    color: #667085;
+    font-size: 0.9rem;
+    margin: 12px 0 0;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+th,
+td {
+    border: 1px solid #d8dee9;
+    padding: 10px;
+    text-align: left;
+    vertical-align: top;
+}
+
+th {
+    background: #f1f5f9;
+}
+
+code {
+    background: #eef2ff;
+    border-radius: 6px;
+    color: #3730a3;
+    font-weight: 700;
+    padding: 2px 6px;
+}
+
+.steps ol {
+    padding-left: 22px;
+}
+
+.steps li,
+ul li {
+    margin-bottom: 8px;
+}
+
+.legend-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 12px;
+}
+
+.legend-grid strong {
+    display: block;
+    margin-bottom: 4px;
+}
+
+.legend-grid p {
+    color: #667085;
+    margin: 0;
+}
+
+.dot {
+    display: inline-block;
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    margin-right: 8px;
+}
+
+.dot.worship {
+    background: #4f46e5;
+}
+
+.dot.reached {
+    background: #10b981;
+}
+
+.dot.outside {
+    background: #ef4444;
+}
+
+@media (max-width: 800px) {
+    .guide-hero,
+    .info-grid,
+    .legend-grid {
+        grid-template-columns: 1fr;
+        flex-direction: column;
+    }
+
+    .guide-page {
+        padding: 22px;
+    }
+}
+
+@media print {
+    body {
+        background: white;
+    }
+
+    .guide-page {
+        width: 100%;
+        margin: 0;
+        padding: 0;
+        box-shadow: none;
+        border-radius: 0;
+    }
+
+    .print-btn {
+        display: none;
+    }
+}
diff --git a/Leaflet2/assets/css/login.css b/Leaflet2/assets/css/login.css
new file mode 100644
index 0000000..aab9d93
--- /dev/null
+++ b/Leaflet2/assets/css/login.css
@@ -0,0 +1,179 @@
+:root {
+    --primary: #4f46e5;
+    --primary-hover: #4338ca;
+    --dark: #1e293b;
+    --gray: #64748b;
+    --gray-light: #e2e8f0;
+    --light: #f8fafc;
+    --white: #ffffff;
+    --danger: #ef4444;
+    --shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.12);
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+
+body {
+    min-height: 100vh;
+    color: var(--dark);
+    background:
+        radial-gradient(circle at top left, rgba(79, 70, 229, 0.16), transparent 34%),
+        linear-gradient(135deg, #f8fafc 0%, #eef2ff 52%, #f8fafc 100%);
+}
+
+.login-page {
+    min-height: 100vh;
+    display: grid;
+    place-items: center;
+    padding: 24px;
+}
+
+.login-panel {
+    width: min(100%, 430px);
+    background: rgba(255, 255, 255, 0.92);
+    border: 1px solid rgba(226, 232, 240, 0.9);
+    border-radius: 18px;
+    box-shadow: var(--shadow-lg);
+    padding: 34px;
+}
+
+.brand-mark {
+    width: 56px;
+    height: 56px;
+    border-radius: 16px;
+    display: grid;
+    place-items: center;
+    color: var(--white);
+    background: var(--primary);
+    font-size: 1.45rem;
+    margin-bottom: 22px;
+}
+
+.eyebrow {
+    color: var(--primary);
+    font-size: 0.78rem;
+    font-weight: 800;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    margin-bottom: 8px;
+}
+
+h1 {
+    font-size: 1.8rem;
+    line-height: 1.2;
+    margin-bottom: 10px;
+}
+
+.subtitle {
+    color: var(--gray);
+    line-height: 1.6;
+    margin-bottom: 24px;
+}
+
+.alert-error {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    color: #991b1b;
+    background-color: #fee2e2;
+    border: 1px solid #fecaca;
+    border-radius: 12px;
+    padding: 12px 14px;
+    margin-bottom: 18px;
+    font-size: 0.9rem;
+}
+
+.login-form {
+    display: grid;
+    gap: 16px;
+}
+
+.input-group {
+    display: grid;
+    gap: 8px;
+}
+
+.input-group span {
+    color: var(--dark);
+    font-size: 0.9rem;
+    font-weight: 700;
+}
+
+.input-shell {
+    height: 48px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    border: 1px solid var(--gray-light);
+    border-radius: 12px;
+    background: var(--light);
+    padding: 0 14px;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+}
+
+.input-shell:focus-within {
+    background: var(--white);
+    border-color: rgba(79, 70, 229, 0.45);
+    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
+}
+
+.input-shell i {
+    color: var(--primary);
+}
+
+.input-shell input {
+    width: 100%;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    color: var(--dark);
+    font-size: 0.96rem;
+}
+
+.btn-login {
+    height: 48px;
+    border: 0;
+    border-radius: 12px;
+    background: var(--primary);
+    color: var(--white);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    cursor: pointer;
+    font-size: 0.98rem;
+    font-weight: 800;
+    margin-top: 4px;
+    transition: background-color 0.2s ease, transform 0.2s ease;
+}
+
+.btn-login:hover {
+    background: var(--primary-hover);
+    transform: translateY(-1px);
+}
+
+.login-hint {
+    color: var(--gray);
+    font-size: 0.86rem;
+    margin-top: 18px;
+    text-align: center;
+}
+
+@media (max-width: 520px) {
+    .login-page {
+        padding: 16px;
+    }
+
+    .login-panel {
+        padding: 26px;
+        border-radius: 16px;
+    }
+
+    h1 {
+        font-size: 1.5rem;
+    }
+}
diff --git a/Leaflet2/assets/css/report.css b/Leaflet2/assets/css/report.css
new file mode 100644
index 0000000..3fc2997
--- /dev/null
+++ b/Leaflet2/assets/css/report.css
@@ -0,0 +1,135 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    color: #172033;
+    background: #eef2f7;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 12px;
+}
+
+.report-page {
+    width: min(1180px, calc(100% - 32px));
+    margin: 24px auto;
+    background: #fff;
+    padding: 28px;
+    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
+}
+
+.report-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 24px;
+    border-bottom: 2px solid #1f2937;
+    padding-bottom: 18px;
+    margin-bottom: 18px;
+}
+
+.eyebrow {
+    margin: 0 0 6px;
+    color: #4f46e5;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+}
+
+h1 {
+    margin: 0 0 8px;
+    font-size: 26px;
+}
+
+.print-btn {
+    border: 0;
+    border-radius: 8px;
+    background: #4f46e5;
+    color: white;
+    cursor: pointer;
+    font-weight: 700;
+    padding: 10px 14px;
+}
+
+.summary-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 10px;
+    margin-bottom: 14px;
+}
+
+.summary-grid div {
+    border: 1px solid #d8dee9;
+    border-left: 4px solid #4f46e5;
+    padding: 12px;
+}
+
+.summary-grid span {
+    display: block;
+    color: #667085;
+    margin-bottom: 6px;
+}
+
+.summary-grid strong {
+    font-size: 22px;
+}
+
+.report-note {
+    background: #f8fafc;
+    border: 1px solid #d8dee9;
+    padding: 10px 12px;
+    margin-bottom: 16px;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+th,
+td {
+    border: 1px solid #d8dee9;
+    padding: 8px;
+    vertical-align: top;
+}
+
+th {
+    background: #f1f5f9;
+    text-align: left;
+}
+
+small {
+    color: #667085;
+}
+
+.empty {
+    text-align: center;
+    color: #667085;
+    padding: 24px;
+}
+
+@media print {
+    body {
+        background: white;
+    }
+
+    .report-page {
+        width: 100%;
+        margin: 0;
+        padding: 0;
+        box-shadow: none;
+    }
+
+    .print-btn {
+        display: none;
+    }
+
+    table {
+        page-break-inside: auto;
+    }
+
+    tr {
+        page-break-inside: avoid;
+        page-break-after: auto;
+    }
+}
diff --git a/Leaflet2/assets/css/style.css b/Leaflet2/assets/css/style.css
new file mode 100644
index 0000000..7baf41d
--- /dev/null
+++ b/Leaflet2/assets/css/style.css
@@ -0,0 +1,1217 @@
+/* Variables & Theming */
+:root {
+    --primary: #4f46e5;
+    --primary-hover: #4338ca;
+    --secondary: #10b981;
+    --danger: #ef4444;
+    --warning: #f59e0b;
+    --dark: #1e293b;
+    --light: #f8fafc;
+    --gray: #64748b;
+    --gray-light: #e2e8f0;
+    --white: #ffffff;
+    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --radius: 12px;
+    --transition: all 0.3s ease;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+}
+
+body {
+    background-color: var(--light);
+    color: var(--dark);
+    overflow: hidden; /* Prevent body scroll for dashboard */
+}
+
+/* Dashboard Layout */
+.dashboard-container {
+    display: flex;
+    height: 100vh;
+    width: 100vw;
+}
+
+/* Sidebar */
+.sidebar {
+    width: 280px;
+    background-color: var(--white);
+    border-right: 1px solid var(--gray-light);
+    display: flex;
+    flex-direction: column;
+    transition: var(--transition);
+    z-index: 1000;
+}
+
+.sidebar.collapsed {
+    transform: translateX(-100%);
+    position: absolute;
+    height: 100%;
+}
+
+.sidebar-header {
+    padding: 24px;
+    border-bottom: 1px solid var(--gray-light);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.sidebar-header h2 {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--primary);
+    margin: 0;
+}
+
+.sidebar-menu {
+    padding: 20px 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    flex: 1;
+    overflow-y: auto;
+}
+
+.menu-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+    border-radius: 8px;
+    color: var(--gray);
+    text-decoration: none;
+    font-weight: 500;
+    transition: var(--transition);
+    cursor: pointer;
+}
+
+a.menu-item {
+    color: var(--gray);
+}
+
+.menu-item:hover {
+    background-color: var(--light);
+    color: var(--primary);
+}
+
+.menu-item.active {
+    background-color: var(--primary);
+    color: var(--white);
+}
+
+/* Main Content */
+.main-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    width: 100%;
+    min-width: 0;
+    overflow: hidden;
+}
+
+/* Topbar */
+.topbar {
+    height: 70px;
+    background-color: var(--white);
+    border-bottom: 1px solid var(--gray-light);
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 0 24px;
+    z-index: 900;
+    min-width: 0;
+    overflow: hidden;
+}
+
+.btn-icon {
+    background: none;
+    border: none;
+    font-size: 1.25rem;
+    color: var(--gray);
+    cursor: pointer;
+    padding: 8px;
+    border-radius: 50%;
+    transition: var(--transition);
+}
+
+.btn-icon:hover {
+    background-color: var(--light);
+    color: var(--primary);
+}
+
+.search-bar {
+    display: none;
+    align-items: center;
+    flex: 0 1 320px;
+    background-color: #f8fafc;
+    border: 1px solid var(--gray-light);
+    border-radius: 999px;
+    height: 42px;
+    padding: 0 12px 0 16px;
+    width: min(30vw, 320px);
+    min-width: 190px;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
+    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+}
+
+.main-content.map-mode .search-bar {
+    display: flex;
+}
+
+.search-bar:focus-within {
+    background-color: var(--white);
+    border-color: rgba(79, 70, 229, 0.38);
+    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.08);
+}
+
+.search-bar input {
+    border: none;
+    background: none;
+    outline: none;
+    padding: 0;
+    width: 100%;
+    font-size: 0.9rem;
+    color: var(--dark);
+    min-width: 0;
+}
+
+.search-bar input::placeholder {
+    color: #94a3b8;
+}
+
+.search-bar button {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background: var(--white);
+    border: none;
+    color: var(--primary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: var(--transition);
+}
+
+.search-bar button:hover {
+    background-color: #eef2ff;
+}
+
+.search-bar.hidden,
+.map-header-controls.hidden {
+    display: none;
+}
+
+.map-header-controls {
+    display: none;
+    align-items: center;
+    flex: 1 1 auto;
+    gap: 10px;
+    min-width: 0;
+    max-width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding: 6px 1px;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(79, 70, 229, 0.28) transparent;
+}
+
+.map-header-controls::-webkit-scrollbar {
+    height: 4px;
+}
+
+.map-header-controls::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.map-header-controls::-webkit-scrollbar-thumb {
+    background-color: rgba(79, 70, 229, 0.28);
+    border-radius: 999px;
+}
+
+.main-content.map-mode .map-header-controls {
+    display: flex;
+}
+
+.header-filter {
+    display: flex;
+    align-items: center;
+    flex: 0 0 auto;
+    gap: 7px;
+    min-height: 42px;
+    background-color: #f8fafc;
+    border: 1px solid var(--gray-light);
+    border-radius: 999px;
+    padding: 4px 8px 4px 12px;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+}
+
+.header-filter:focus-within {
+    background-color: var(--white);
+    border-color: rgba(79, 70, 229, 0.38);
+    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.08);
+}
+
+.header-filter i {
+    color: var(--primary);
+    font-size: 0.82rem;
+}
+
+.header-filter label {
+    color: var(--gray);
+    font-size: 0.74rem;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+    white-space: nowrap;
+}
+
+.header-filter select {
+    min-width: 142px;
+    border: none;
+    border-left: 1px solid var(--gray-light);
+    border-radius: 0;
+    background-color: transparent;
+    color: var(--dark);
+    font-size: 0.88rem;
+    font-weight: 600;
+    outline: none;
+    padding: 6px 4px 6px 10px;
+    cursor: pointer;
+}
+
+.user-profile {
+    display: flex;
+    align-items: center;
+    flex: 0 0 auto;
+    gap: 12px;
+    font-weight: 500;
+    margin-left: auto;
+    min-width: 0;
+}
+
+.main-content.map-mode .user-profile {
+    display: none;
+}
+
+.avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: var(--primary);
+    color: var(--white);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.logout-link {
+    width: 38px;
+    height: 38px;
+    border-radius: 50%;
+    color: var(--gray);
+    background-color: var(--light);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    transition: var(--transition);
+}
+
+.logout-link:hover {
+    color: var(--danger);
+    background-color: #fee2e2;
+}
+
+@media (max-width: 1280px) {
+    .main-content.map-mode .search-bar {
+        flex-basis: 260px;
+        width: 260px;
+        min-width: 170px;
+    }
+
+    .main-content.map-mode .header-filter {
+        gap: 6px;
+        padding: 4px 7px 4px 10px;
+    }
+
+    .main-content.map-mode .header-filter label {
+        display: none;
+    }
+
+    .main-content.map-mode .header-filter select {
+        min-width: 132px;
+        border-left: none;
+        padding-left: 4px;
+    }
+
+}
+
+@media (max-width: 1040px) {
+    .main-content.map-mode .search-bar {
+        flex-basis: 220px;
+        width: 220px;
+    }
+
+    .main-content.map-mode .topbar {
+        gap: 10px;
+        padding: 0 16px;
+    }
+}
+
+/* Views */
+.view-panel {
+    display: none;
+    flex: 1;
+    min-height: 0;
+    position: relative;
+}
+
+.view-panel.active {
+    display: flex;
+}
+
+.dashboard-view {
+    flex-direction: column;
+    gap: 24px;
+    overflow-y: auto;
+    padding: 28px;
+    background:
+        linear-gradient(180deg, rgba(79, 70, 229, 0.06), rgba(248, 250, 252, 0) 260px),
+        var(--light);
+}
+
+.dashboard-page-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 24px;
+}
+
+.dashboard-page-header h1 {
+    font-size: 2rem;
+    line-height: 1.2;
+    margin-bottom: 8px;
+}
+
+.dashboard-page-header p {
+    color: var(--gray);
+    max-width: 720px;
+}
+
+.dashboard-header-actions {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex: 0 0 auto;
+}
+
+.eyebrow {
+    color: var(--primary) !important;
+    font-size: 0.8rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    margin-bottom: 8px;
+    text-transform: uppercase;
+}
+
+/* Dashboard Stats */
+.stats-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
+    gap: 16px;
+}
+
+.stat-card {
+    background-color: var(--white);
+    border-radius: var(--radius);
+    padding: 16px;
+    box-shadow: var(--shadow);
+    border-left: 4px solid var(--primary);
+}
+
+.stat-card.success { border-left-color: var(--secondary); }
+.stat-card.danger { border-left-color: var(--danger); }
+.stat-card.warning { border-left-color: var(--warning); }
+
+.stat-card h3 {
+    font-size: 0.85rem;
+    color: var(--gray);
+    margin-bottom: 8px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.stat-card .value {
+    font-size: 1.8rem;
+    font-weight: 700;
+    color: var(--dark);
+}
+
+.dashboard-grid {
+    display: grid;
+    grid-template-columns: minmax(280px, 1.15fr) repeat(2, minmax(240px, 1fr));
+    gap: 18px;
+}
+
+.dashboard-card {
+    background-color: var(--white);
+    border: 1px solid var(--gray-light);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+    padding: 20px;
+}
+
+.card-title {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 16px;
+    margin-bottom: 18px;
+}
+
+.card-title h2 {
+    font-size: 1.1rem;
+}
+
+.card-title span {
+    color: var(--gray);
+    font-size: 0.85rem;
+    text-align: right;
+}
+
+.status-list {
+    display: grid;
+    gap: 14px;
+}
+
+.status-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    border: 1px solid var(--gray-light);
+    border-radius: 8px;
+    padding: 14px;
+}
+
+.status-item strong {
+    display: block;
+    font-size: 1.35rem;
+    line-height: 1;
+}
+
+.status-item p {
+    color: var(--gray);
+    font-size: 0.9rem;
+    margin-top: 4px;
+}
+
+.status-dot {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    flex: 0 0 auto;
+}
+
+.status-dot.success { background-color: var(--secondary); }
+.status-dot.warning { background-color: var(--warning); }
+.status-dot.danger { background-color: var(--danger); }
+
+.quick-actions {
+    display: grid;
+    gap: 12px;
+}
+
+.quick-action {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-height: 56px;
+    border: 1px solid var(--gray-light);
+    border-radius: 8px;
+    background-color: var(--light);
+    color: var(--dark);
+    cursor: pointer;
+    font-weight: 600;
+    padding: 12px 14px;
+    transition: var(--transition);
+    text-decoration: none;
+}
+
+.quick-action i {
+    color: var(--primary);
+    font-size: 1.2rem;
+}
+
+.quick-action:hover {
+    border-color: var(--primary);
+    background-color: #eef2ff;
+}
+
+.legend-list {
+    display: grid;
+    gap: 14px;
+    color: var(--dark);
+    font-size: 0.95rem;
+}
+
+.legend-list div {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.legend-marker {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    display: inline-block;
+    flex: 0 0 auto;
+}
+
+.legend-marker.ri {
+    background-color: var(--primary);
+    box-shadow: 0 0 0 5px rgba(79, 70, 229, 0.12);
+}
+
+.legend-marker.reached { background-color: var(--secondary); }
+.legend-marker.blank { background-color: var(--danger); }
+
+.priority-list,
+.need-list {
+    display: grid;
+    gap: 10px;
+}
+
+.priority-item,
+.need-item {
+    border: 1px solid var(--gray-light);
+    border-radius: 8px;
+    padding: 12px;
+    background: var(--light);
+}
+
+.priority-item {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 10px;
+    align-items: center;
+}
+
+.priority-score {
+    width: 42px;
+    height: 42px;
+    border-radius: 50%;
+    display: grid;
+    place-items: center;
+    background: var(--primary);
+    color: white;
+    font-weight: 800;
+}
+
+.priority-item strong,
+.need-item strong {
+    display: block;
+    margin-bottom: 4px;
+}
+
+.priority-item p,
+.need-item p {
+    color: var(--gray);
+    font-size: 0.85rem;
+}
+
+.map-view {
+    height: calc(100vh - 70px);
+    min-height: 0;
+}
+
+/* Map Container */
+.map-fullscreen {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+}
+
+/* Floating Action Button */
+.fab-location {
+    position: absolute;
+    bottom: 30px;
+    right: 30px;
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    background-color: var(--white);
+    color: var(--primary);
+    border: none;
+    box-shadow: var(--shadow-lg);
+    font-size: 1.5rem;
+    cursor: pointer;
+    z-index: 500;
+    transition: var(--transition);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.fab-location:hover {
+    background-color: var(--light);
+    transform: translateY(-2px);
+}
+
+.fab-container {
+    position: absolute;
+    bottom: 30px;
+    right: 100px;
+    z-index: 500;
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: center;
+    gap: 12px;
+}
+
+.fab-main {
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    background-color: var(--primary);
+    color: var(--white);
+    border: none;
+    box-shadow: var(--shadow-lg);
+    font-size: 1.5rem;
+    cursor: pointer;
+    transition: var(--transition);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.fab-main:hover {
+    background-color: var(--primary-hover);
+    transform: scale(1.05);
+}
+
+.fab-menu {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(20px);
+    transition: var(--transition);
+}
+
+.fab-container:hover .fab-menu {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+}
+
+.fab-item {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background-color: var(--white);
+    color: var(--primary);
+    border: none;
+    box-shadow: var(--shadow);
+    font-size: 1.2rem;
+    cursor: pointer;
+    transition: var(--transition);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.fab-item:hover {
+    background-color: var(--light);
+    transform: scale(1.1);
+}
+
+/* Leaflet Overrides */
+.ri-div-icon {
+    background: transparent;
+    border: none;
+}
+
+.ri-marker {
+    width: 36px;
+    height: 36px;
+    border: 3px solid var(--white);
+    border-radius: 50%;
+    background-color: var(--primary);
+    color: var(--white);
+    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.22);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1rem;
+    position: relative;
+}
+
+.ri-marker::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    bottom: -7px;
+    width: 12px;
+    height: 12px;
+    background-color: inherit;
+    border-right: 3px solid var(--white);
+    border-bottom: 3px solid var(--white);
+    transform: translateX(-50%) rotate(45deg);
+    box-shadow: 4px 4px 8px rgba(15, 23, 42, 0.12);
+}
+
+.ri-marker i {
+    position: relative;
+    z-index: 1;
+}
+
+.ri-marker.ri-mosque {
+    background-color: #2563eb;
+}
+
+.ri-marker.ri-church {
+    background-color: #7c3aed;
+}
+
+.ri-marker.ri-temple {
+    background-color: #d97706;
+}
+
+.ri-marker.ri-vihara {
+    background-color: #0891b2;
+}
+
+.ri-marker.ri-klenteng {
+    background-color: #dc2626;
+}
+
+.ri-marker.ri-other {
+    background-color: #475569;
+}
+
+.leaflet-popup-content-wrapper {
+    border-radius: 12px;
+    box-shadow: var(--shadow-lg);
+    padding: 0;
+    overflow: hidden;
+}
+
+.leaflet-popup-content {
+    margin: 0;
+    width: 280px !important;
+}
+
+.popup-header {
+    background-color: var(--primary);
+    color: var(--white);
+    padding: 16px;
+}
+
+.popup-header.success { background-color: var(--secondary); }
+.popup-header.danger { background-color: var(--danger); }
+.popup-header.warning { background-color: var(--warning); }
+
+.popup-header h3 {
+    margin: 0 0 4px 0;
+    font-size: 1.1rem;
+}
+
+.popup-header p {
+    margin: 0;
+    font-size: 0.85rem;
+    opacity: 0.9;
+}
+
+.popup-body {
+    padding: 16px;
+}
+
+.popup-row {
+    display: flex;
+    margin-bottom: 8px;
+    font-size: 0.9rem;
+}
+
+.popup-row .label {
+    width: 100px;
+    color: var(--gray);
+    font-weight: 500;
+}
+
+.popup-row .value {
+    flex: 1;
+    font-weight: 600;
+}
+
+.popup-actions {
+    display: flex;
+    gap: 8px;
+    margin-top: 16px;
+    padding-top: 16px;
+    border-top: 1px solid var(--gray-light);
+}
+
+.popup-actions button {
+    flex: 1;
+    padding: 8px;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-weight: 500;
+    font-size: 0.85rem;
+}
+
+.btn-edit { background-color: var(--warning); color: var(--dark); }
+.btn-delete { background-color: var(--danger); color: var(--white); }
+
+/* Modal */
+.modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+    z-index: 2000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    pointer-events: none;
+    transition: var(--transition);
+}
+
+.modal-backdrop.show {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.modal-content {
+    background-color: var(--white);
+    border-radius: var(--radius);
+    width: 100%;
+    max-width: 600px;
+    max-height: 90vh;
+    display: flex;
+    flex-direction: column;
+    box-shadow: var(--shadow-lg);
+    transform: translateY(20px);
+    transition: var(--transition);
+}
+
+.modal-content-sm {
+    max-width: 520px;
+}
+
+.modal-backdrop.show .modal-content {
+    transform: translateY(0);
+}
+
+.modal-header {
+    padding: 20px 24px;
+    border-bottom: 1px solid var(--gray-light);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.modal-header h2 {
+    margin: 0;
+    font-size: 1.25rem;
+}
+
+.modal-kicker {
+    margin: 0 0 4px;
+    color: var(--primary);
+    font-size: 0.72rem;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+}
+
+.btn-close {
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    color: var(--gray);
+    cursor: pointer;
+}
+
+.modal-body {
+    padding: 24px;
+    overflow-y: auto;
+    flex: 1;
+}
+
+.form-group {
+    margin-bottom: 16px;
+}
+
+.form-grid {
+    display: grid;
+    gap: 12px;
+}
+
+.form-grid.two-cols {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 6px;
+    font-weight: 500;
+    font-size: 0.9rem;
+    color: var(--dark);
+}
+
+.form-control {
+    width: 100%;
+    padding: 10px 12px;
+    border: 1px solid var(--gray-light);
+    border-radius: 8px;
+    font-size: 0.95rem;
+    transition: var(--transition);
+}
+
+.form-control:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+}
+
+.form-hint {
+    margin-top: 6px;
+    color: var(--gray);
+    font-size: 0.8rem;
+}
+
+.form-alert {
+    border: 1px solid #fecaca;
+    border-radius: 8px;
+    background-color: #fef2f2;
+    color: #991b1b;
+    font-size: 0.88rem;
+    font-weight: 600;
+    padding: 10px 12px;
+}
+
+.form-alert.success {
+    border-color: #bbf7d0;
+    background-color: #f0fdf4;
+    color: #166534;
+}
+
+.modal-footer {
+    padding: 16px 24px;
+    border-top: 1px solid var(--gray-light);
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+}
+
+.btn {
+    padding: 10px 20px;
+    border-radius: 8px;
+    border: none;
+    font-weight: 600;
+    cursor: pointer;
+    transition: var(--transition);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 7px;
+    text-decoration: none;
+}
+
+.btn-secondary {
+    background-color: var(--gray-light);
+    color: var(--dark);
+}
+
+.btn-secondary:hover {
+    background-color: #cbd5e1;
+}
+
+.btn-primary {
+    background-color: var(--primary);
+    color: var(--white);
+}
+
+.btn-primary:hover {
+    background-color: var(--primary-hover);
+}
+
+/* Dynamic Forms */
+.dynamic-list {
+    border: 1px solid var(--gray-light);
+    border-radius: 8px;
+    padding: 16px;
+    margin-bottom: 16px;
+}
+
+.dynamic-item {
+    border-bottom: 1px dashed var(--gray-light);
+    padding-bottom: 12px;
+    margin-bottom: 12px;
+    position: relative;
+}
+
+.dynamic-item:last-child {
+    border-bottom: none;
+    margin-bottom: 0;
+    padding-bottom: 0;
+}
+
+.btn-remove {
+    position: absolute;
+    top: 0;
+    right: 0;
+    background: var(--danger);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 4px 8px;
+    font-size: 0.8rem;
+    cursor: pointer;
+}
+
+.badge {
+    display: inline-block;
+    padding: 4px 8px;
+    border-radius: 999px;
+    font-size: 0.75rem;
+    font-weight: 600;
+}
+
+.badge-success { background-color: #dcfce7; color: #166534; }
+.badge-danger { background-color: #fee2e2; color: #991b1b; }
+.badge-warning { background-color: #fef3c7; color: #92400e; }
+
+/* Responsive */
+@media (max-width: 768px) {
+    .sidebar {
+        position: absolute;
+        height: 100%;
+        transform: translateX(-100%);
+    }
+    
+    .sidebar.open {
+        transform: translateX(0);
+    }
+
+    .topbar {
+        padding: 0 16px;
+        gap: 10px;
+    }
+
+    .main-content.map-mode .topbar {
+        height: auto;
+        min-height: 70px;
+        flex-wrap: wrap;
+        align-content: center;
+        padding: 10px 16px;
+    }
+
+    .main-content.map-mode #toggle-sidebar {
+        order: 1;
+        flex: 0 0 auto;
+    }
+
+    .search-bar {
+        flex: 1 0 150px;
+        width: auto;
+        min-width: 0;
+        padding: 0 10px 0 12px;
+    }
+
+    .main-content.map-mode .search-bar {
+        order: 2;
+        flex: 1 1 140px;
+        width: auto;
+        min-width: 0;
+    }
+
+    .map-header-controls {
+        flex: 1 1 100%;
+        gap: 8px;
+        overflow-x: auto;
+    }
+
+    .main-content.map-mode .map-header-controls {
+        order: 4;
+        flex: 0 0 100%;
+        width: 100%;
+        padding: 2px 1px 0;
+    }
+
+    .header-filter {
+        flex: 0 0 auto;
+        min-height: 38px;
+        padding: 4px 8px;
+    }
+
+    .header-filter label {
+        display: none;
+    }
+
+    .header-filter select {
+        min-width: 128px;
+        border-left: none;
+        padding: 6px 2px;
+    }
+
+    .form-grid.two-cols {
+        grid-template-columns: 1fr;
+        gap: 0;
+    }
+
+    .dashboard-view {
+        padding: 20px 16px;
+    }
+
+    .dashboard-page-header {
+        flex-direction: column;
+        gap: 16px;
+    }
+
+    .dashboard-header-actions {
+        width: 100%;
+        flex-wrap: wrap;
+    }
+
+    .dashboard-header-actions .btn {
+        flex: 1 1 150px;
+    }
+
+    .dashboard-page-header h1 {
+        font-size: 1.55rem;
+    }
+    
+    .stats-container {
+        grid-template-columns: 1fr;
+    }
+
+    .dashboard-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .fab-location {
+        right: 20px;
+        bottom: 24px;
+    }
+
+    .fab-container {
+        right: 88px;
+        bottom: 24px;
+    }
+}
diff --git a/Leaflet2/assets/js/app.js b/Leaflet2/assets/js/app.js
new file mode 100644
index 0000000..d1ae11c
--- /dev/null
+++ b/Leaflet2/assets/js/app.js
@@ -0,0 +1,793 @@
+// Globals
+let map;
+let layerRI, layerPM, layerRadius;
+let riData = [];
+let pmData = [];
+let pickingMode = null; // 'ri' or 'pm'
+let tempMarker = null;
+let currentView = 'dashboard';
+let searchTerm = '';
+
+const rumahIbadahIconConfig = {
+    Masjid: { icon: 'fa-mosque', className: 'mosque' },
+    Gereja: { icon: 'fa-church', className: 'church' },
+    Pura: { icon: 'fa-gopuram', className: 'temple' },
+    Vihara: { icon: 'fa-vihara', className: 'vihara' },
+    Klenteng: { icon: 'fa-torii-gate', className: 'klenteng' },
+    Lainnya: { icon: 'fa-place-of-worship', className: 'other' }
+};
+
+function getRumahIbadahIcon(jenis) {
+    const config = rumahIbadahIconConfig[jenis] || rumahIbadahIconConfig.Lainnya;
+
+    return L.divIcon({
+        className: 'ri-div-icon',
+        html: `<div class="ri-marker ri-${config.className}" title="${jenis || 'Rumah Ibadah'}"><i class="fas ${config.icon}"></i></div>`,
+        iconSize: [36, 46],
+        iconAnchor: [18, 43],
+        popupAnchor: [0, -43]
+    });
+}
+
+// PM Icons are now circleMarkers generated inline in renderPM
+
+document.addEventListener('DOMContentLoaded', async () => {
+    await initMap();
+    initUI();
+    loadData();
+});
+
+async function initMap() {
+    map = L.map('map', {
+        zoomControl: false,
+        preferCanvas: true
+    }).setView([-0.060547, 109.344902], 13);
+    window.map = map;
+    
+    L.control.zoom({ position: 'bottomright' }).addTo(map);
+
+    const tileOptions = {
+        keepBuffer: 6,
+        updateWhenIdle: false,
+        updateWhenZooming: false,
+        updateInterval: 100
+    };
+
+    const osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        ...tileOptions,
+        attribution: '&copy; OpenStreetMap contributors'
+    });
+    
+    const satelit = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
+        ...tileOptions,
+        attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
+    });
+    
+    const darkMap = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
+        ...tileOptions,
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
+        subdomains: 'abcd',
+        maxZoom: 20
+    });
+
+    osm.addTo(map);
+
+    const baseMaps = {
+        "OSM Standard": osm,
+        "Citra Satelit": satelit,
+        "Dark Mode": darkMap
+    };
+
+    layerRadius = L.featureGroup().addTo(map);
+    layerRI = L.featureGroup().addTo(map);
+    layerPM = L.featureGroup().addTo(map);
+
+    const overlays = {
+        "Radius Layanan": layerRadius,
+        "Rumah Ibadah": layerRI,
+        "Penduduk Miskin": layerPM
+    };
+
+    L.control.layers(baseMaps, overlays, { position: 'topright' }).addTo(map);
+
+    // Map Click for Picking Location
+    map.on('click', async (e) => {
+        if (!pickingMode) return;
+        
+        const lat = e.latlng.lat;
+        const lng = e.latlng.lng;
+        
+        if (tempMarker) map.removeLayer(tempMarker);
+        tempMarker = L.marker([lat, lng]).addTo(map);
+
+        if (pickingMode === 'ri') {
+            document.getElementById('ri-lat').value = lat.toFixed(6);
+            document.getElementById('ri-lng').value = lng.toFixed(6);
+            document.getElementById('ri-alamat').value = 'Mencari alamat...';
+            document.getElementById('ri-alamat').value = await reverseGeocode(lat, lng);
+            document.getElementById('modal-ri').classList.add('show');
+        } else if (pickingMode === 'pm') {
+            document.getElementById('pm-lat').value = lat.toFixed(6);
+            document.getElementById('pm-lng').value = lng.toFixed(6);
+            document.getElementById('pm-alamat').value = 'Mencari alamat...';
+            document.getElementById('pm-alamat').value = await reverseGeocode(lat, lng);
+            document.getElementById('modal-pm').classList.add('show');
+        }
+        
+        pickingMode = null;
+        if(tempMarker) map.removeLayer(tempMarker);
+    });
+}
+
+function initUI() {
+    // Sidebar Toggle
+    document.getElementById('toggle-sidebar').addEventListener('click', () => {
+        const sidebar = document.getElementById('sidebar');
+        if (window.innerWidth <= 768) {
+            sidebar.classList.toggle('open');
+        } else {
+            sidebar.classList.toggle('collapsed');
+        }
+    });
+
+    document.querySelectorAll('.menu-item[data-view]').forEach(item => {
+        item.addEventListener('click', () => switchView(item.dataset.view));
+    });
+
+    // Menus
+    const openAddRI = () => {
+        switchView('map');
+        document.getElementById('form-ri').reset();
+        document.getElementById('ri-id').value = '';
+        document.getElementById('modal-ri-title').innerText = 'Tambah Rumah Ibadah';
+        document.getElementById('modal-ri').classList.add('show');
+    };
+    document.getElementById('menu-add-ri').addEventListener('click', openAddRI);
+    document.getElementById('fab-add-ri')?.addEventListener('click', openAddRI);
+
+    const openAddPM = () => {
+        switchView('map');
+        document.getElementById('form-pm').reset();
+        document.getElementById('pm-id').value = '';
+        document.getElementById('anggota-container').innerHTML = '';
+        document.getElementById('bantuan-fields').style.display = 'none';
+        document.getElementById('modal-pm-title').innerText = 'Tambah Penduduk Miskin';
+        document.getElementById('modal-pm').classList.add('show');
+    };
+    document.getElementById('menu-add-pm').addEventListener('click', openAddPM);
+    document.getElementById('fab-add-pm')?.addEventListener('click', openAddPM);
+    document.getElementById('dashboard-add-ri')?.addEventListener('click', openAddRI);
+    document.getElementById('dashboard-add-pm')?.addEventListener('click', openAddPM);
+    document.getElementById('dashboard-open-map')?.addEventListener('click', () => switchView('map'));
+
+    // Filters
+    document.getElementById('filter-status').addEventListener('change', renderMapLayers);
+    document.getElementById('filter-jenis').addEventListener('change', renderMapLayers);
+    document.getElementById('filter-kebutuhan').addEventListener('change', renderPM);
+
+    // Search
+    document.getElementById('search-input').addEventListener('input', () => {
+        searchTerm = getSearchTerm();
+        renderMapLayers();
+    });
+    document.getElementById('search-input').addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            applyMapSearch(true);
+        }
+    });
+    document.getElementById('search-button').addEventListener('click', () => applyMapSearch(true));
+
+    // Location
+    document.getElementById('btn-my-location').addEventListener('click', () => {
+        if (navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition(
+                (position) => {
+                    const lat = position.coords.latitude;
+                    const lng = position.coords.longitude;
+                    map.flyTo([lat, lng], 16);
+                    L.marker([lat, lng]).addTo(map).bindPopup('Lokasi Anda').openPopup();
+                },
+                (err) => alert('Gagal mendapatkan lokasi: ' + err.message)
+            );
+        } else {
+            alert('Geolocation tidak didukung browser ini.');
+        }
+    });
+
+    switchView(currentView);
+}
+
+function switchView(view) {
+    currentView = view;
+    const mainContent = document.querySelector('.main-content');
+
+    document.querySelectorAll('.view-panel').forEach(panel => {
+        panel.classList.toggle('active', panel.id === `${view}-view`);
+    });
+
+    document.querySelectorAll('.menu-item[data-view]').forEach(item => {
+        item.classList.toggle('active', item.dataset.view === view);
+    });
+
+    mainContent?.classList.toggle('map-mode', view === 'map');
+    mainContent?.classList.toggle('dashboard-mode', view !== 'map');
+    document.querySelector('.search-bar')?.classList.toggle('hidden', view !== 'map');
+    document.querySelector('.map-header-controls')?.classList.toggle('hidden', view !== 'map');
+
+    if (window.innerWidth <= 768) {
+        document.getElementById('sidebar').classList.remove('open');
+    }
+
+    if (view === 'map' && map) {
+        refreshMapSize();
+    }
+}
+
+function refreshMapSize() {
+    [0, 100, 300].forEach(delay => {
+        setTimeout(() => map.invalidateSize({ pan: false }), delay);
+    });
+}
+
+function getSearchTerm() {
+    return document.getElementById('search-input').value.trim().toLowerCase();
+}
+
+function textIncludes(value, term) {
+    return String(value || '').toLowerCase().includes(term);
+}
+
+function matchesRI(ri) {
+    if (!searchTerm) return true;
+
+    return [
+        ri.nama,
+        ri.jenis,
+        ri.kontak,
+        ri.alamat
+    ].some(value => textIncludes(value, searchTerm));
+}
+
+function matchesPM(pm) {
+    if (!searchTerm) return true;
+
+    const anggotaMatch = Array.isArray(pm.anggota) && pm.anggota.some(anggota => [
+        anggota.nama,
+        anggota.hubungan,
+        anggota.pekerjaan
+    ].some(value => textIncludes(value, searchTerm)));
+
+    return anggotaMatch || [
+        pm.kk_nama,
+        pm.kk_nik,
+        pm.alamat,
+        pm.status_bantuan,
+        pm.jenis_bantuan,
+        pm.kategori_kebutuhan,
+        pm.deskripsi_kebutuhan,
+        pm.tindak_lanjut,
+        pm.kondisi_rumah,
+        pm.rumah_ibadah_nama
+    ].some(value => textIncludes(value, searchTerm));
+}
+
+function getFilteredRI() {
+    const filterJenis = document.getElementById('filter-jenis').value;
+
+    return riData.filter(ri => {
+        if (filterJenis !== 'all' && ri.jenis !== filterJenis) return false;
+        return matchesRI(ri);
+    });
+}
+
+function getFilteredPM() {
+    const filterStatus = document.getElementById('filter-status').value;
+    const filterKebutuhan = document.getElementById('filter-kebutuhan').value;
+
+    return pmData.filter(pm => {
+        if (filterStatus !== 'all' && pm.status_bantuan !== filterStatus) return false;
+        if (filterKebutuhan !== 'all' && pm.kategori_kebutuhan !== filterKebutuhan) return false;
+        return matchesPM(pm);
+    });
+}
+
+function renderMapLayers() {
+    renderRI();
+    renderPM();
+}
+
+function applyMapSearch(focusResult = false) {
+    searchTerm = getSearchTerm();
+    renderMapLayers();
+
+    if (focusResult) {
+        switchView('map');
+        focusSearchResults();
+    }
+}
+
+function focusSearchResults() {
+    const results = [
+        ...getFilteredRI().map(item => [parseFloat(item.lat), parseFloat(item.lng)]),
+        ...getFilteredPM().map(item => [parseFloat(item.lat), parseFloat(item.lng)])
+    ].filter(([lat, lng]) => Number.isFinite(lat) && Number.isFinite(lng));
+
+    if (!searchTerm || results.length === 0) {
+        alert(searchTerm ? 'Data tidak ditemukan di peta.' : 'Masukkan kata kunci pencarian.');
+        return;
+    }
+
+    if (results.length === 1) {
+        map.flyTo(results[0], 16);
+        return;
+    }
+
+    map.fitBounds(L.latLngBounds(results), { padding: [40, 40], maxZoom: 16 });
+}
+
+function pickLocation(mode) {
+    switchView('map');
+    pickingMode = mode;
+    closeModal('modal-' + mode);
+}
+
+function closeModal(id) {
+    document.getElementById(id).classList.remove('show');
+}
+
+async function reverseGeocode(lat, lng) {
+    try {
+        const res = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}`);
+        const data = await res.json();
+        return data.display_name || 'Alamat tidak ditemukan';
+    } catch (e) {
+        return 'Gagal memuat alamat';
+    }
+}
+
+function toggleBantuanFields() {
+    const status = document.getElementById('pm-status').value;
+    document.getElementById('bantuan-fields').style.display = status === 'Sudah dibantu' ? 'block' : 'none';
+}
+
+function addAnggotaField(data = null) {
+    const container = document.getElementById('anggota-container');
+    const id = Date.now() + Math.floor(Math.random() * 100);
+    const html = `
+        <div class="dynamic-item" id="anggota-${id}">
+            <button type="button" class="btn-remove" onclick="document.getElementById('anggota-${id}').remove()">X</button>
+            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
+                <div class="form-group">
+                    <label>Nama</label>
+                    <input type="text" class="form-control a-nama" value="${data ? data.nama : ''}" required>
+                </div>
+                <div class="form-group">
+                    <label>Hubungan</label>
+                    <input type="text" class="form-control a-hubungan" value="${data ? data.hubungan : ''}" placeholder="Anak/Istri/dll" required>
+                </div>
+                <div class="form-group">
+                    <label>Umur</label>
+                    <input type="number" class="form-control a-umur" value="${data ? data.umur : ''}">
+                </div>
+                <div class="form-group">
+                    <label>Pekerjaan</label>
+                    <input type="text" class="form-control a-pekerjaan" value="${data && data.pekerjaan ? data.pekerjaan : ''}">
+                </div>
+            </div>
+        </div>
+    `;
+    container.insertAdjacentHTML('beforeend', html);
+}
+
+// Data Fetching and Rendering
+async function loadData() {
+    await loadStats();
+    await fetchRI();
+    await fetchPM();
+}
+
+async function loadStats() {
+    try {
+        const res = await fetch('api/dashboard_stats.php');
+        const json = await res.json();
+        if(json.success) {
+            document.getElementById('stat-ri').innerText = json.data.total_rumah_ibadah;
+            document.getElementById('stat-pm').innerText = json.data.total_penduduk;
+            document.getElementById('stat-sudah').innerText = json.data.sudah_dibantu;
+            document.getElementById('stat-belum').innerText = json.data.belum_dibantu;
+            document.getElementById('stat-menunggu').innerText = json.data.menunggu_verifikasi || 0;
+            document.getElementById('stat-prioritas').innerText = json.data.prioritas_tinggi || 0;
+            document.getElementById('stat-luar-radius').innerText = json.data.luar_radius || 0;
+            document.getElementById('summary-sudah').innerText = json.data.sudah_dibantu;
+            document.getElementById('summary-belum').innerText = json.data.belum_dibantu;
+            document.getElementById('summary-menunggu').innerText = json.data.menunggu_verifikasi || 0;
+            renderDashboardLists(json.data);
+        }
+    } catch(e) { console.error(e); }
+}
+
+function renderDashboardLists(stats) {
+    const priorityList = document.getElementById('priority-list');
+    const needList = document.getElementById('need-list');
+
+    if (priorityList) {
+        const items = stats.top_prioritas || [];
+        priorityList.innerHTML = items.length ? items.map(item => `
+            <div class="priority-item">
+                <div class="priority-score">${item.skor_prioritas || 0}</div>
+                <div>
+                    <strong>${item.kk_nama}</strong>
+                    <p>${item.kategori_kebutuhan || 'Kebutuhan belum diisi'} - ${item.tindak_lanjut || 'Belum disurvei'}</p>
+                </div>
+            </div>
+        `).join('') : '<div class="need-item"><p>Belum ada data prioritas.</p></div>';
+    }
+
+    if (needList) {
+        const items = stats.kebutuhan_terbanyak || [];
+        needList.innerHTML = items.length ? items.map(item => `
+            <div class="need-item">
+                <strong>${item.kategori}</strong>
+                <p>${item.total} keluarga membutuhkan kategori ini</p>
+            </div>
+        `).join('') : '<div class="need-item"><p>Belum ada data kebutuhan.</p></div>';
+    }
+}
+
+async function fetchRI() {
+    try {
+        const res = await fetch('api/rumah_ibadah_read.php');
+        const json = await res.json();
+        if(json.success) {
+            riData = json.data;
+            renderRI();
+        }
+    } catch(e) { console.error(e); }
+}
+
+async function fetchPM() {
+    try {
+        const res = await fetch('api/penduduk_read.php');
+        const json = await res.json();
+        if(json.success) {
+            pmData = json.data;
+            renderPM();
+        }
+    } catch(e) { console.error(e); }
+}
+
+function renderRI() {
+    layerRI.clearLayers();
+    layerRadius.clearLayers();
+
+    getFilteredRI().forEach(ri => {
+        const lat = parseFloat(ri.lat);
+        const lng = parseFloat(ri.lng);
+        const rad = parseInt(ri.radius) || 500;
+
+        // Circle
+        L.circle([lat, lng], {
+            color: '#4f46e5',
+            fillColor: '#4f46e5',
+            fillOpacity: 0.1,
+            radius: rad,
+            interactive: false
+        }).addTo(layerRadius);
+
+        // Marker
+        const marker = L.marker([lat, lng], { icon: getRumahIbadahIcon(ri.jenis) }).addTo(layerRI);
+        marker.feature = ri;
+        
+        let popup = `
+            <div class="popup-header">
+                <h3>${ri.nama}</h3>
+                <p>${ri.jenis}</p>
+            </div>
+            <div class="popup-body">
+                <div class="popup-row"><div class="label">Kontak</div><div class="value">${ri.kontak || '-'}</div></div>
+                <div class="popup-row"><div class="label">Radius</div><div class="value">${rad} m</div></div>
+                <div class="popup-row" style="flex-direction: column;"><div class="label" style="width:100%">Alamat</div><div class="value" style="font-size:0.8rem; font-weight:400">${ri.alamat}</div></div>
+                <div class="popup-actions">
+                    <button class="btn-edit" onclick='editRI(${JSON.stringify(ri)})'>Edit</button>
+                    <button class="btn-delete" onclick='deleteRI(${ri.id})'>Hapus</button>
+                </div>
+            </div>
+        `;
+        marker.bindPopup(popup);
+    });
+
+    layerRadius.eachLayer(circle => circle.bringToBack());
+}
+
+function renderPM() {
+    layerPM.clearLayers();
+
+    getFilteredPM().forEach(pm => {
+        const lat = parseFloat(pm.lat);
+        const lng = parseFloat(pm.lng);
+        const anggotaCount = pm.anggota ? pm.anggota.length : 0;
+        
+        let badgeClass = 'badge-danger';
+        if(pm.status_bantuan === 'Sudah dibantu') badgeClass = 'badge-success';
+        else if(pm.status_bantuan === 'Menunggu verifikasi') badgeClass = 'badge-warning';
+
+        const isBlankSpot = pm.is_blank_spot == 1;
+        const pmColor = isBlankSpot ? '#ef4444' : '#10b981'; // Merah (Blank Spot), Hijau (Terjangkau)
+        const riwayatHtml = Array.isArray(pm.riwayat_bantuan) && pm.riwayat_bantuan.length
+            ? pm.riwayat_bantuan.slice(0, 3).map(r => `${r.tanggal_bantuan}: ${r.jenis_bantuan}`).join('<br>')
+            : '-';
+        const buktiHtml = pm.bukti_file
+            ? `<a href="${pm.bukti_file}" target="_blank">Lihat bukti</a>`
+            : '-';
+
+        const marker = L.circleMarker([lat, lng], {
+            radius: 7,
+            fillColor: pmColor,
+            color: '#ffffff',
+            weight: 1.5,
+            opacity: 1,
+            fillOpacity: 0.9
+        }).addTo(layerPM);
+        marker.feature = pm;
+
+        let popup = `
+            <div class="popup-header ${pm.status_bantuan === 'Sudah dibantu' ? 'success' : pm.status_bantuan === 'Menunggu verifikasi' ? 'warning' : 'danger'}">
+                <h3>Keluarga ${pm.kk_nama}</h3>
+                <span class="badge ${badgeClass}">${pm.status_bantuan}</span>
+            </div>
+            <div class="popup-body">
+                <div class="popup-row"><div class="label">Jumlah Anggota</div><div class="value">${anggotaCount} orang</div></div>
+                <div class="popup-row"><div class="label">Rumah Ibadah Terdekat</div><div class="value">${pm.rumah_ibadah_nama || '-'}</div></div>
+                <div class="popup-row"><div class="label">Prioritas</div><div class="value">${pm.skor_prioritas || 0} (${pm.label_prioritas || '-'})</div></div>
+                <div class="popup-row"><div class="label">Kebutuhan</div><div class="value">${pm.kategori_kebutuhan || '-'}</div></div>
+                <div class="popup-row"><div class="label">Tindak Lanjut</div><div class="value">${pm.tindak_lanjut || 'Belum disurvei'}</div></div>
+                <div class="popup-row"><div class="label">Jarak Lurus</div><div class="value">${pm.jarak_m ? pm.jarak_m + ' meter' : '-'} ${isBlankSpot ? '<i style="color:red">(Di luar radius)</i>' : '<i style="color:green">(Terjangkau)</i>'}</div></div>
+                <div class="popup-row"><div class="label">Jarak Rute</div><div class="value">${pm.jarak_rute_m ? pm.jarak_rute_m + ' meter' : '-'}</div></div>
+                ${pm.status_bantuan === 'Sudah dibantu' ? `<div class="popup-row"><div class="label">Bantuan</div><div class="value">${pm.jenis_bantuan} (${pm.tanggal_bantuan})</div></div>` : ''}
+                <div class="popup-row"><div class="label">Riwayat</div><div class="value">${riwayatHtml}</div></div>
+                <div class="popup-row"><div class="label">Bukti</div><div class="value">${buktiHtml}</div></div>
+                <div class="popup-row" style="flex-direction: column;"><div class="label" style="width:100%">Alamat</div><div class="value" style="font-size:0.8rem; font-weight:400">${pm.alamat}</div></div>
+                <div class="popup-actions">
+                    <button class="btn-edit" onclick='editPM(${JSON.stringify(pm).replace(/'/g, "\\'")})'>Edit</button>
+                    <button class="btn-edit" onclick='openBantuanModal(${pm.id})'>Bantuan</button>
+                    <button class="btn-delete" onclick='deletePM(${pm.id})'>Hapus</button>
+                </div>
+            </div>
+        `;
+        marker.bindPopup(popup);
+    });
+
+    layerPM.bringToFront();
+}
+
+// CRUD Operations
+async function saveRI() {
+    const id = document.getElementById('ri-id').value;
+    const data = {
+        nama: document.getElementById('ri-nama').value,
+        jenis: document.getElementById('ri-jenis').value,
+        kontak: document.getElementById('ri-kontak').value,
+        lat: document.getElementById('ri-lat').value,
+        lng: document.getElementById('ri-lng').value,
+        alamat: document.getElementById('ri-alamat').value,
+        radius: document.getElementById('ri-radius').value
+    };
+
+    if(!data.nama || !data.lat) { alert("Isi form dengan lengkap"); return; }
+
+    const url = id ? 'api/rumah_ibadah_update.php' : 'api/rumah_ibadah_create.php';
+    if(id) data.id = id;
+
+    try {
+        const res = await fetch(url, {
+            method: 'POST',
+            body: JSON.stringify(data)
+        });
+        const json = await res.json();
+        if(json.success) {
+            closeModal('modal-ri');
+            await fetchRI();
+            await fetchPM();
+            await loadStats();
+        } else {
+            alert(json.message);
+        }
+    } catch(e) { alert('Error saving data'); }
+}
+
+async function savePM() {
+    const id = document.getElementById('pm-id').value;
+    const data = new FormData();
+    const anggota = [];
+
+    data.append('kk_nama', document.getElementById('pm-nama').value);
+    data.append('kk_nik', document.getElementById('pm-nik').value);
+    data.append('lat', document.getElementById('pm-lat').value);
+    data.append('lng', document.getElementById('pm-lng').value);
+    data.append('alamat', document.getElementById('pm-alamat').value);
+    data.append('kategori_kebutuhan', document.getElementById('pm-kategori-kebutuhan').value);
+    data.append('deskripsi_kebutuhan', document.getElementById('pm-deskripsi-kebutuhan').value);
+    data.append('kondisi_rumah', document.getElementById('pm-kondisi-rumah').value);
+    data.append('penghasilan', document.getElementById('pm-penghasilan').value);
+    data.append('status_bantuan', document.getElementById('pm-status').value);
+    data.append('jenis_bantuan', document.getElementById('pm-jenis-bantuan').value);
+    data.append('tanggal_bantuan', document.getElementById('pm-tanggal-bantuan').value);
+    data.append('tindak_lanjut', document.getElementById('pm-tindak-lanjut').value);
+    data.append('catatan_survei', document.getElementById('pm-catatan-survei').value);
+    data.append('existing_bukti_file', document.getElementById('pm-existing-bukti-file').value);
+
+    const buktiFile = document.getElementById('pm-bukti-file').files[0];
+    if (buktiFile) data.append('bukti_file', buktiFile);
+
+    if(!data.get('kk_nama') || !data.get('lat')) { alert("Isi form dengan lengkap"); return; }
+    if (data.get('penghasilan') !== '' && Number(data.get('penghasilan')) < 0) {
+        alert('Penghasilan tidak boleh bernilai negatif.');
+        document.getElementById('pm-penghasilan').focus();
+        return;
+    }
+
+    const items = document.querySelectorAll('.dynamic-item');
+    items.forEach(el => {
+        anggota.push({
+            nama: el.querySelector('.a-nama').value,
+            hubungan: el.querySelector('.a-hubungan').value,
+            umur: el.querySelector('.a-umur').value,
+            pekerjaan: el.querySelector('.a-pekerjaan').value
+        });
+    });
+    data.append('anggota', JSON.stringify(anggota));
+
+    const url = id ? 'api/penduduk_update.php' : 'api/penduduk_create.php';
+    if(id) data.append('id', id);
+
+    try {
+        const res = await fetch(url, {
+            method: 'POST',
+            body: data
+        });
+        const json = await res.json();
+        if(json.success) {
+            closeModal('modal-pm');
+            await fetchPM();
+            await loadStats();
+            if(json.ibadah_id) {
+                const ri = riData.find(r => r.id == json.ibadah_id);
+                if(ri) alert(`Warga otomatis dimasukkan ke binaan: ${ri.nama}`);
+            }
+        } else {
+            alert(json.message);
+        }
+    } catch(e) { alert('Error saving data'); }
+}
+
+function editRI(data) {
+    document.getElementById('ri-id').value = data.id;
+    document.getElementById('ri-nama').value = data.nama;
+    document.getElementById('ri-jenis').value = data.jenis;
+    document.getElementById('ri-kontak').value = data.kontak;
+    document.getElementById('ri-lat').value = data.lat;
+    document.getElementById('ri-lng').value = data.lng;
+    document.getElementById('ri-alamat').value = data.alamat;
+    document.getElementById('ri-radius').value = data.radius;
+    document.getElementById('modal-ri-title').innerText = 'Edit Rumah Ibadah';
+    document.getElementById('modal-ri').classList.add('show');
+}
+
+function editPM(data) {
+    document.getElementById('pm-id').value = data.id;
+    document.getElementById('pm-nama').value = data.kk_nama;
+    document.getElementById('pm-nik').value = data.kk_nik;
+    document.getElementById('pm-lat').value = data.lat;
+    document.getElementById('pm-lng').value = data.lng;
+    document.getElementById('pm-alamat').value = data.alamat;
+    document.getElementById('pm-kategori-kebutuhan').value = data.kategori_kebutuhan || '';
+    document.getElementById('pm-deskripsi-kebutuhan').value = data.deskripsi_kebutuhan || '';
+    document.getElementById('pm-kondisi-rumah').value = data.kondisi_rumah || '';
+    document.getElementById('pm-penghasilan').value = data.penghasilan || '';
+    document.getElementById('pm-status').value = data.status_bantuan;
+    document.getElementById('pm-jenis-bantuan').value = data.jenis_bantuan;
+    document.getElementById('pm-tanggal-bantuan').value = data.tanggal_bantuan;
+    document.getElementById('pm-tindak-lanjut').value = data.tindak_lanjut || 'Belum disurvei';
+    document.getElementById('pm-catatan-survei').value = data.catatan_survei || '';
+    document.getElementById('pm-existing-bukti-file').value = data.bukti_file || '';
+    document.getElementById('pm-bukti-file').value = '';
+    
+    toggleBantuanFields();
+
+    document.getElementById('anggota-container').innerHTML = '';
+    if(data.anggota && data.anggota.length > 0) {
+        data.anggota.forEach(a => addAnggotaField(a));
+    }
+
+    document.getElementById('modal-pm-title').innerText = 'Edit Penduduk Miskin';
+    document.getElementById('modal-pm').classList.add('show');
+}
+
+function setBantuanAlert(message = '', type = 'error') {
+    const alertBox = document.getElementById('bantuan-alert');
+    if (!alertBox) return;
+
+    alertBox.textContent = message;
+    alertBox.hidden = !message;
+    alertBox.classList.toggle('success', type === 'success');
+}
+
+function openBantuanModal(id) {
+    const penerima = pmData.find(pm => String(pm.id) === String(id));
+    const form = document.getElementById('form-bantuan');
+
+    form.reset();
+    setBantuanAlert();
+    document.getElementById('bantuan-penduduk-id').value = id;
+    document.getElementById('bantuan-penerima').value = penerima ? `Keluarga ${penerima.kk_nama}` : `ID ${id}`;
+    document.getElementById('bantuan-jenis').value = penerima?.kategori_kebutuhan || '';
+    document.getElementById('bantuan-tanggal').value = new Date().toISOString().slice(0, 10);
+    document.getElementById('bantuan-pemberi').value = 'Admin';
+    document.getElementById('bantuan-bukti-file').value = '';
+    document.getElementById('btn-save-bantuan').disabled = false;
+    document.getElementById('modal-bantuan').classList.add('show');
+}
+
+async function saveBantuan() {
+    const id = document.getElementById('bantuan-penduduk-id').value;
+    const jenis = document.getElementById('bantuan-jenis').value.trim();
+    const tanggal = document.getElementById('bantuan-tanggal').value;
+    const nilai = document.getElementById('bantuan-nilai').value;
+    const pemberi = document.getElementById('bantuan-pemberi').value.trim() || 'Admin';
+    const catatan = document.getElementById('bantuan-catatan').value.trim();
+    const buktiFile = document.getElementById('bantuan-bukti-file').files[0];
+    const saveButton = document.getElementById('btn-save-bantuan');
+
+    if (!id || !jenis || !tanggal) {
+        setBantuanAlert('Keluarga penerima, jenis bantuan, dan tanggal wajib diisi.');
+        return;
+    }
+
+    const formData = new FormData();
+    formData.append('penduduk_id', id);
+    formData.append('jenis_bantuan', jenis);
+    formData.append('tanggal_bantuan', tanggal);
+    formData.append('nilai_bantuan', nilai || '');
+    formData.append('pemberi_bantuan', pemberi);
+    formData.append('catatan', catatan || '');
+    if (buktiFile) formData.append('bukti_file', buktiFile);
+
+    try {
+        saveButton.disabled = true;
+        saveButton.innerText = 'Menyimpan...';
+        const res = await fetch('api/bantuan_create.php', { method: 'POST', body: formData });
+        const json = await res.json();
+        if (json.success) {
+            closeModal('modal-bantuan');
+            await fetchPM();
+            await loadStats();
+            renderMapLayers();
+        } else {
+            setBantuanAlert(json.message || 'Gagal menambah bantuan.');
+        }
+    } catch(e) {
+        setBantuanAlert('Terjadi kesalahan saat menyimpan bantuan.');
+    } finally {
+        saveButton.disabled = false;
+        saveButton.innerText = 'Simpan Bantuan';
+    }
+}
+
+async function deleteRI(id) {
+    if(!confirm('Hapus rumah ibadah ini?')) return;
+    try {
+        const res = await fetch('api/rumah_ibadah_delete.php', { method:'POST', body:JSON.stringify({id}) });
+        const json = await res.json();
+        if(json.success) { fetchRI(); fetchPM(); loadStats(); }
+    } catch(e) { alert('Error'); }
+}
+
+async function deletePM(id) {
+    if(!confirm('Hapus penduduk miskin ini?')) return;
+    try {
+        const res = await fetch('api/penduduk_delete.php', { method:'POST', body:JSON.stringify({id}) });
+        const json = await res.json();
+        if(json.success) { fetchPM(); loadStats(); }
+    } catch(e) { alert('Error'); }
+}
diff --git a/Leaflet2/index.html b/Leaflet2/index.html
new file mode 100644
index 0000000..49812e3
--- /dev/null
+++ b/Leaflet2/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="refresh" content="0;url=index.php">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WebGIS Peduli</title>
+</head>
+<body>
+    <script>window.location.replace('index.php');</script>
+    <p>Mengalihkan ke halaman sistem...</p>
+</body>
+</html>
diff --git a/Leaflet2/index.php b/Leaflet2/index.php
new file mode 100644
index 0000000..e49a6c1
--- /dev/null
+++ b/Leaflet2/index.php
@@ -0,0 +1,498 @@
+<?php
+declare(strict_types=1);
+
+require_once __DIR__ . '/api/auth.php';
+require_admin_login();
+?>
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WebGIS Sebaran Penduduk Miskin</title>
+    <!-- Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- Leaflet CSS -->
+    <link rel="stylesheet" href="assets/vendor/leaflet/leaflet.css" />
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="assets/css/style.css?v=<?= filemtime(__DIR__ . '/assets/css/style.css') ?>">
+</head>
+<body>
+    <div class="dashboard-container">
+        <!-- Sidebar -->
+        <aside class="sidebar" id="sidebar">
+            <div class="sidebar-header">
+                <i class="fas fa-map-marked-alt fa-2x" style="color: var(--primary);"></i>
+                <h2>WebGIS Peduli</h2>
+            </div>
+            <div class="sidebar-menu">
+                <div class="menu-item active" id="menu-dashboard" data-view="dashboard">
+                    <i class="fas fa-home"></i> Dashboard
+                </div>
+                <div class="menu-item" id="menu-map" data-view="map">
+                    <i class="fas fa-map"></i> Peta
+                </div>
+                <div class="menu-item" id="menu-add-ri">
+                    <i class="fas fa-plus-circle"></i> Tambah Rumah Ibadah
+                </div>
+                <div class="menu-item" id="menu-add-pm">
+                    <i class="fas fa-user-plus"></i> Tambah Penduduk
+                </div>
+                <a class="menu-item" href="laporan.php">
+                    <i class="fas fa-file-lines"></i> Laporan
+                </a>
+            </div>
+        </aside>
+
+        <!-- Main Content -->
+        <main class="main-content dashboard-mode">
+            <!-- Topbar -->
+            <header class="topbar">
+                <button id="toggle-sidebar" class="btn-icon"><i class="fas fa-bars"></i></button>
+                <div class="search-bar hidden">
+                    <input type="text" id="search-input" placeholder="Cari nama warga / rumah ibadah...">
+                    <button id="search-button" type="button"><i class="fas fa-search"></i></button>
+                </div>
+                <div class="map-header-controls hidden">
+                    <div class="header-filter">
+                        <i class="fas fa-circle-check"></i>
+                        <label>Status</label>
+                        <select id="filter-status">
+                            <option value="all">Semua Status</option>
+                            <option value="Sudah dibantu">Sudah Dibantu</option>
+                            <option value="Belum dibantu">Belum Dibantu</option>
+                            <option value="Menunggu verifikasi">Menunggu Verifikasi</option>
+                        </select>
+                    </div>
+                    <div class="header-filter">
+                        <i class="fas fa-place-of-worship"></i>
+                        <label>Jenis</label>
+                        <select id="filter-jenis">
+                            <option value="all">Semua Jenis</option>
+                            <option value="Masjid">Masjid</option>
+                            <option value="Gereja">Gereja</option>
+                            <option value="Pura">Pura</option>
+                            <option value="Vihara">Vihara</option>
+                            <option value="Klenteng">Klenteng</option>
+                        </select>
+                    </div>
+                    <div class="header-filter">
+                        <i class="fas fa-hand-holding-heart"></i>
+                        <label>Kebutuhan</label>
+                        <select id="filter-kebutuhan">
+                            <option value="all">Semua Kebutuhan</option>
+                            <option value="Sembako">Sembako</option>
+                            <option value="Pendidikan">Pendidikan</option>
+                            <option value="Kesehatan">Kesehatan</option>
+                            <option value="Modal Usaha">Modal Usaha</option>
+                            <option value="Rumah Tidak Layak">Rumah Tidak Layak</option>
+                            <option value="Bantuan Darurat">Bantuan Darurat</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="user-profile">
+                    <span><?= htmlspecialchars(current_admin_name(), ENT_QUOTES, 'UTF-8') ?></span>
+                    <div class="avatar"><i class="fas fa-user-shield"></i></div>
+                    <a class="logout-link" href="logout.php" title="Logout"><i class="fas fa-right-from-bracket"></i></a>
+                </div>
+            </header>
+
+            <!-- Dashboard -->
+            <section id="dashboard-view" class="view-panel dashboard-view active">
+                <div class="dashboard-page-header">
+                    <div>
+                        <p class="eyebrow">Ringkasan Data</p>
+                        <h1>Dashboard WebGIS Peduli</h1>
+                        <p>Pantau sebaran warga, status bantuan, dan cakupan layanan rumah ibadah dari satu halaman.</p>
+                    </div>
+                    <div class="dashboard-header-actions">
+                        <button class="btn btn-primary" id="dashboard-open-map"><i class="fas fa-map-location-dot"></i> Buka Peta</button>
+                    </div>
+                </div>
+
+                <div class="stats-container" id="stats-container">
+                    <div class="stat-card">
+                        <h3>Rumah Ibadah</h3>
+                        <div class="value" id="stat-ri">0</div>
+                    </div>
+                    <div class="stat-card">
+                        <h3>Total Warga</h3>
+                        <div class="value" id="stat-pm">0</div>
+                    </div>
+                    <div class="stat-card success">
+                        <h3>Sudah Dibantu</h3>
+                        <div class="value" id="stat-sudah">0</div>
+                    </div>
+                    <div class="stat-card warning">
+                        <h3>Menunggu</h3>
+                        <div class="value" id="stat-menunggu">0</div>
+                    </div>
+                    <div class="stat-card danger">
+                        <h3>Belum Dibantu</h3>
+                        <div class="value" id="stat-belum">0</div>
+                    </div>
+                    <div class="stat-card warning">
+                        <h3>Prioritas Tinggi</h3>
+                        <div class="value" id="stat-prioritas">0</div>
+                    </div>
+                    <div class="stat-card danger">
+                        <h3>Luar Radius</h3>
+                        <div class="value" id="stat-luar-radius">0</div>
+                    </div>
+                </div>
+
+                <div class="dashboard-grid">
+                    <div class="dashboard-card status-card">
+                        <div class="card-title">
+                            <h2>Status Bantuan</h2>
+                            <span>Data keluarga miskin</span>
+                        </div>
+                        <div class="status-list">
+                            <div class="status-item">
+                                <span class="status-dot success"></span>
+                                <div>
+                                    <strong id="summary-sudah">0</strong>
+                                    <p>Sudah menerima bantuan</p>
+                                </div>
+                            </div>
+                            <div class="status-item">
+                                <span class="status-dot warning"></span>
+                                <div>
+                                    <strong id="summary-menunggu">0</strong>
+                                    <p>Menunggu verifikasi</p>
+                                </div>
+                            </div>
+                            <div class="status-item">
+                                <span class="status-dot danger"></span>
+                                <div>
+                                    <strong id="summary-belum">0</strong>
+                                    <p>Belum menerima bantuan</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="dashboard-card">
+                        <div class="card-title">
+                            <h2>Aksi Cepat</h2>
+                            <span>Input dan pemetaan data</span>
+                        </div>
+                        <div class="quick-actions">
+                            <button class="quick-action" id="dashboard-add-ri">
+                                <i class="fas fa-place-of-worship"></i>
+                                <span>Tambah Rumah Ibadah</span>
+                            </button>
+                            <button class="quick-action" id="dashboard-add-pm">
+                                <i class="fas fa-user-plus"></i>
+                                <span>Tambah Penduduk</span>
+                            </button>
+                            <a class="quick-action" href="laporan.php?prioritas=tinggi">
+                                <i class="fas fa-file-export"></i>
+                                <span>Cetak Laporan Prioritas</span>
+                            </a>
+                        </div>
+                    </div>
+
+                    <div class="dashboard-card map-summary-card">
+                        <div class="card-title">
+                            <h2>Legenda Peta</h2>
+                            <span>Indikator cakupan layanan</span>
+                        </div>
+                        <div class="legend-list">
+                            <div><span class="legend-marker ri"></span> Rumah ibadah dan radius layanan</div>
+                            <div><span class="legend-marker reached"></span> Warga dalam radius layanan</div>
+                            <div><span class="legend-marker blank"></span> Warga di luar radius layanan</div>
+                        </div>
+                    </div>
+
+                    <div class="dashboard-card">
+                        <div class="card-title">
+                            <h2>Prioritas Bantuan</h2>
+                            <span>Urutan paling mendesak</span>
+                        </div>
+                        <div class="priority-list" id="priority-list"></div>
+                    </div>
+
+                    <div class="dashboard-card">
+                        <div class="card-title">
+                            <h2>Kebutuhan Terbanyak</h2>
+                            <span>Basis penyaluran bantuan</span>
+                        </div>
+                        <div class="need-list" id="need-list"></div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Peta -->
+            <section id="map-view" class="view-panel map-view">
+                <div id="map" class="map-fullscreen"></div>
+
+                <button id="btn-my-location" class="fab-location" title="Lokasi Saya"><i class="fas fa-crosshairs"></i></button>
+                <div class="fab-container">
+                    <button class="fab-main" title="Tambah Data"><i class="fas fa-plus"></i></button>
+                    <div class="fab-menu">
+                        <button class="fab-item" id="fab-add-ri" title="Tambah Rumah Ibadah"><i class="fas fa-place-of-worship"></i></button>
+                        <button class="fab-item" id="fab-add-pm" title="Tambah Penduduk Miskin"><i class="fas fa-user-plus"></i></button>
+                    </div>
+                </div>
+            </section>
+        </main>
+    </div>
+
+    <!-- Modal Rumah Ibadah -->
+    <div class="modal-backdrop" id="modal-ri">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2 id="modal-ri-title">Tambah Rumah Ibadah</h2>
+                <button class="btn-close" onclick="closeModal('modal-ri')"><i class="fas fa-times"></i></button>
+            </div>
+            <div class="modal-body">
+                <form id="form-ri">
+                    <input type="hidden" id="ri-id">
+                    <div class="form-group">
+                        <label>Nama Rumah Ibadah</label>
+                        <input type="text" id="ri-nama" class="form-control" required>
+                    </div>
+                    <div class="form-group">
+                        <label>Jenis</label>
+                        <select id="ri-jenis" class="form-control" required>
+                            <option value="Masjid">Masjid</option>
+                            <option value="Gereja">Gereja</option>
+                            <option value="Pura">Pura</option>
+                            <option value="Vihara">Vihara</option>
+                            <option value="Klenteng">Klenteng</option>
+                            <option value="Lainnya">Lainnya</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label>Kontak</label>
+                        <input type="text" id="ri-kontak" class="form-control">
+                    </div>
+                    <div class="form-group" style="display: flex; gap: 10px;">
+                        <div style="flex: 1;">
+                            <label>Latitude</label>
+                            <input type="number" step="any" id="ri-lat" class="form-control" required readonly>
+                        </div>
+                        <div style="flex: 1;">
+                            <label>Longitude</label>
+                            <input type="number" step="any" id="ri-lng" class="form-control" required readonly>
+                        </div>
+                        <div style="display: flex; align-items: flex-end;">
+                            <button type="button" class="btn btn-secondary" onclick="pickLocation('ri')"><i class="fas fa-map-marker-alt"></i></button>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label>Alamat (Otomatis)</label>
+                        <textarea id="ri-alamat" class="form-control" rows="2" readonly></textarea>
+                    </div>
+                    <div class="form-group">
+                        <label>Radius Pelayanan (meter)</label>
+                        <input type="number" id="ri-radius" class="form-control" value="500" required>
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-secondary" onclick="closeModal('modal-ri')">Batal</button>
+                <button class="btn btn-primary" onclick="saveRI()">Simpan</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Modal Penduduk Miskin -->
+    <div class="modal-backdrop" id="modal-pm">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2 id="modal-pm-title">Tambah Penduduk Miskin</h2>
+                <button class="btn-close" onclick="closeModal('modal-pm')"><i class="fas fa-times"></i></button>
+            </div>
+            <div class="modal-body">
+                <form id="form-pm">
+                    <input type="hidden" id="pm-id">
+                    
+                    <h3 style="margin-bottom: 12px; border-bottom: 1px solid #eee; padding-bottom: 8px;">Data Kepala Keluarga</h3>
+                    <div class="form-group">
+                        <label>Nama Kepala Keluarga</label>
+                        <input type="text" id="pm-nama" class="form-control" required>
+                    </div>
+                    <div class="form-group">
+                        <label>NIK</label>
+                        <input type="text" id="pm-nik" class="form-control">
+                    </div>
+                    <div class="form-group" style="display: flex; gap: 10px;">
+                        <div style="flex: 1;">
+                            <label>Latitude</label>
+                            <input type="number" step="any" id="pm-lat" class="form-control" required readonly>
+                        </div>
+                        <div style="flex: 1;">
+                            <label>Longitude</label>
+                            <input type="number" step="any" id="pm-lng" class="form-control" required readonly>
+                        </div>
+                        <div style="display: flex; align-items: flex-end;">
+                            <button type="button" class="btn btn-secondary" onclick="pickLocation('pm')"><i class="fas fa-map-marker-alt"></i></button>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label>Alamat</label>
+                        <textarea id="pm-alamat" class="form-control" rows="2" readonly></textarea>
+                    </div>
+
+                    <h3 style="margin: 20px 0 12px; border-bottom: 1px solid #eee; padding-bottom: 8px;">Kebutuhan & Kondisi</h3>
+                    <div class="form-group">
+                        <label>Kategori Kebutuhan</label>
+                        <select id="pm-kategori-kebutuhan" class="form-control">
+                            <option value="">Pilih Kebutuhan</option>
+                            <option value="Sembako">Sembako</option>
+                            <option value="Pendidikan">Pendidikan</option>
+                            <option value="Kesehatan">Kesehatan</option>
+                            <option value="Modal Usaha">Modal Usaha</option>
+                            <option value="Rumah Tidak Layak">Rumah Tidak Layak</option>
+                            <option value="Bantuan Darurat">Bantuan Darurat</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label>Deskripsi Kebutuhan</label>
+                        <textarea id="pm-deskripsi-kebutuhan" class="form-control" rows="2" placeholder="Contoh: butuh sembako bulanan, biaya obat, seragam sekolah"></textarea>
+                    </div>
+                    <div class="form-group" style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
+                        <div>
+                            <label>Kondisi Rumah</label>
+                            <select id="pm-kondisi-rumah" class="form-control">
+                                <option value="">Pilih Kondisi</option>
+                                <option value="Layak">Layak</option>
+                                <option value="Rentan">Rentan</option>
+                                <option value="Tidak Layak">Tidak Layak</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label>Penghasilan / Bulan</label>
+                            <input type="number" id="pm-penghasilan" class="form-control" min="0" inputmode="numeric" placeholder="0">
+                        </div>
+                    </div>
+
+                    <h3 style="margin: 20px 0 12px; border-bottom: 1px solid #eee; padding-bottom: 8px;">Status Bantuan</h3>
+                    <div class="form-group">
+                        <label>Status</label>
+                        <select id="pm-status" class="form-control" onchange="toggleBantuanFields()" required>
+                            <option value="Belum dibantu">Belum Dibantu</option>
+                            <option value="Menunggu verifikasi">Menunggu Verifikasi</option>
+                            <option value="Sudah dibantu">Sudah Dibantu</option>
+                        </select>
+                    </div>
+                    <div id="bantuan-fields" style="display: none;">
+                        <div class="form-group">
+                            <label>Jenis Bantuan</label>
+                            <input type="text" id="pm-jenis-bantuan" class="form-control">
+                        </div>
+                        <div class="form-group">
+                            <label>Tanggal Bantuan</label>
+                            <input type="date" id="pm-tanggal-bantuan" class="form-control">
+                        </div>
+                    </div>
+
+                    <h3 style="margin: 20px 0 12px; border-bottom: 1px solid #eee; padding-bottom: 8px;">Survey Lapangan</h3>
+                    <div class="form-group">
+                        <label>Status Tindak Lanjut</label>
+                        <select id="pm-tindak-lanjut" class="form-control">
+                            <option value="Belum disurvei">Belum Disurvei</option>
+                            <option value="Perlu survei">Perlu Survei</option>
+                            <option value="Sudah disurvei">Sudah Disurvei</option>
+                            <option value="Sudah diverifikasi">Sudah Diverifikasi</option>
+                            <option value="Sedang diproses">Sedang Diproses</option>
+                            <option value="Sudah dibantu">Sudah Dibantu</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label>Catatan Survey</label>
+                        <textarea id="pm-catatan-survei" class="form-control" rows="2"></textarea>
+                    </div>
+                    <div class="form-group">
+                        <label>Bukti / Foto / Dokumen</label>
+                        <input type="file" id="pm-bukti-file" class="form-control" accept="image/*,.pdf">
+                        <input type="hidden" id="pm-existing-bukti-file">
+                    </div>
+
+                    <h3 style="margin: 20px 0 12px; border-bottom: 1px solid #eee; padding-bottom: 8px; display: flex; justify-content: space-between;">
+                        Anggota Keluarga
+                        <button type="button" class="btn btn-secondary" style="padding: 4px 8px; font-size: 0.8rem;" onclick="addAnggotaField()"><i class="fas fa-plus"></i> Tambah</button>
+                    </h3>
+                    <div id="anggota-container" class="dynamic-list">
+                        <!-- Dynamic fields here -->
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-secondary" onclick="closeModal('modal-pm')">Batal</button>
+                <button class="btn btn-primary" onclick="savePM()">Simpan</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Modal Riwayat Bantuan -->
+    <div class="modal-backdrop" id="modal-bantuan">
+        <div class="modal-content modal-content-sm">
+            <div class="modal-header">
+                <div>
+                    <p class="modal-kicker">Penyaluran Bantuan</p>
+                    <h2 id="modal-bantuan-title">Tambah Riwayat Bantuan</h2>
+                </div>
+                <button class="btn-close" onclick="closeModal('modal-bantuan')"><i class="fas fa-times"></i></button>
+            </div>
+            <div class="modal-body">
+                <form id="form-bantuan">
+                    <input type="hidden" id="bantuan-penduduk-id">
+                    <div class="form-group">
+                        <label>Keluarga Penerima</label>
+                        <input type="text" id="bantuan-penerima" class="form-control" readonly>
+                    </div>
+                    <div class="form-group">
+                        <label>Jenis Bantuan</label>
+                        <input type="text" id="bantuan-jenis" class="form-control" list="bantuan-jenis-list" placeholder="Contoh: Sembako bulanan" required>
+                        <datalist id="bantuan-jenis-list">
+                            <option value="Sembako">
+                            <option value="Pendidikan">
+                            <option value="Kesehatan">
+                            <option value="Modal Usaha">
+                            <option value="Renovasi Rumah">
+                            <option value="Bantuan Darurat">
+                        </datalist>
+                    </div>
+                    <div class="form-grid two-cols">
+                        <div class="form-group">
+                            <label>Tanggal Bantuan</label>
+                            <input type="date" id="bantuan-tanggal" class="form-control" required>
+                        </div>
+                        <div class="form-group">
+                            <label>Nilai Bantuan</label>
+                            <input type="number" id="bantuan-nilai" class="form-control" min="0" placeholder="Opsional">
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label>Pemberi Bantuan</label>
+                        <input type="text" id="bantuan-pemberi" class="form-control" value="Admin">
+                    </div>
+                    <div class="form-group">
+                        <label>Catatan</label>
+                        <textarea id="bantuan-catatan" class="form-control" rows="3" placeholder="Contoh: bantuan diserahkan langsung ke rumah penerima"></textarea>
+                    </div>
+                    <div class="form-group">
+                        <label>Bukti Bantuan</label>
+                        <input type="file" id="bantuan-bukti-file" class="form-control" accept="image/*,.pdf">
+                        <p class="form-hint">Opsional, bisa berupa foto penyerahan atau dokumen PDF.</p>
+                    </div>
+                    <div class="form-alert" id="bantuan-alert" hidden></div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-secondary" onclick="closeModal('modal-bantuan')">Batal</button>
+                <button class="btn btn-primary" id="btn-save-bantuan" onclick="saveBantuan()">Simpan Bantuan</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Scripts -->
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+    <script src="assets/js/app.js?v=<?= filemtime(__DIR__ . '/assets/js/app.js') ?>"></script>
+</body>
+</html>
diff --git a/Leaflet2/laporan.php b/Leaflet2/laporan.php
new file mode 100644
index 0000000..1f43007
--- /dev/null
+++ b/Leaflet2/laporan.php
@@ -0,0 +1,132 @@
+<?php
+declare(strict_types=1);
+
+require_once __DIR__ . '/api/db_pdo.php';
+require_once __DIR__ . '/api/auth.php';
+require_once __DIR__ . '/api/penduduk_feature_helper.php';
+require_admin_login();
+
+ensurePendudukFeatureSchema($pdo);
+refreshAllPriorityScores($pdo);
+
+$status = trim((string)($_GET['status'] ?? ''));
+$priority = trim((string)($_GET['prioritas'] ?? ''));
+$where = [];
+$params = [];
+
+if ($status !== '') {
+    $where[] = 'p.status_bantuan = ?';
+    $params[] = $status;
+}
+
+if ($priority === 'tinggi') {
+    $where[] = 'p.skor_prioritas >= 70';
+} elseif ($priority === 'sedang') {
+    $where[] = 'p.skor_prioritas BETWEEN 40 AND 69';
+} elseif ($priority === 'rendah') {
+    $where[] = 'p.skor_prioritas < 40';
+}
+
+$sql = "
+    SELECT p.*, r.nama AS rumah_ibadah_nama
+    FROM penduduk_miskin p
+    LEFT JOIN rumah_ibadah r ON p.ibadah_id = r.id
+";
+
+if ($where) {
+    $sql .= ' WHERE ' . implode(' AND ', $where);
+}
+
+$sql .= ' ORDER BY p.skor_prioritas DESC, p.id DESC';
+$stmt = $pdo->prepare($sql);
+$stmt->execute($params);
+$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
+
+$summary = [
+    'total' => count($rows),
+    'tinggi' => count(array_filter($rows, fn($r) => (int)$r['skor_prioritas'] >= 70)),
+    'belum' => count(array_filter($rows, fn($r) => $r['status_bantuan'] === 'Belum dibantu')),
+    'luar' => count(array_filter($rows, fn($r) => (int)$r['is_blank_spot'] === 1)),
+];
+
+function e(?string $value): string
+{
+    return htmlspecialchars((string)$value, ENT_QUOTES, 'UTF-8');
+}
+?>
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Laporan Prioritas Bantuan</title>
+    <link rel="stylesheet" href="assets/css/report.css?v=<?= filemtime(__DIR__ . '/assets/css/report.css') ?>">
+</head>
+<body>
+    <main class="report-page">
+        <header class="report-header">
+            <div>
+                <p class="eyebrow">WebGIS Peduli</p>
+                <h1>Laporan Prioritas Bantuan</h1>
+                <p>Dicetak pada <?= date('d/m/Y H:i') ?> oleh <?= e(current_admin_name()) ?></p>
+            </div>
+            <button onclick="window.print()" class="print-btn">Cetak / Simpan PDF</button>
+        </header>
+
+        <section class="summary-grid">
+            <div><span>Total Data</span><strong><?= $summary['total'] ?></strong></div>
+            <div><span>Prioritas Tinggi</span><strong><?= $summary['tinggi'] ?></strong></div>
+            <div><span>Belum Dibantu</span><strong><?= $summary['belum'] ?></strong></div>
+            <div><span>Luar Radius</span><strong><?= $summary['luar'] ?></strong></div>
+        </section>
+
+        <section class="report-note">
+            <strong>Keterangan:</strong> Skor prioritas dihitung dari status bantuan, jumlah tanggungan, lansia/balita,
+            penghasilan, kondisi rumah, kebutuhan mendesak, dan posisi terhadap radius layanan.
+        </section>
+
+        <table>
+            <thead>
+                <tr>
+                    <th>No</th>
+                    <th>Kepala Keluarga</th>
+                    <th>Prioritas</th>
+                    <th>Kebutuhan</th>
+                    <th>Status</th>
+                    <th>Tindak Lanjut</th>
+                    <th>Rumah Ibadah</th>
+                    <th>Jarak</th>
+                    <th>Catatan</th>
+                </tr>
+            </thead>
+            <tbody>
+                <?php foreach ($rows as $i => $row): ?>
+                    <tr>
+                        <td><?= $i + 1 ?></td>
+                        <td>
+                            <strong><?= e($row['kk_nama']) ?></strong><br>
+                            <small><?= e($row['alamat']) ?></small>
+                        </td>
+                        <td>
+                            <strong><?= (int)$row['skor_prioritas'] ?></strong><br>
+                            <small><?= e(getPriorityLabel((int)$row['skor_prioritas'])) ?></small>
+                        </td>
+                        <td><?= e($row['kategori_kebutuhan'] ?: 'Belum diisi') ?></td>
+                        <td><?= e($row['status_bantuan']) ?></td>
+                        <td><?= e($row['tindak_lanjut'] ?: 'Belum disurvei') ?></td>
+                        <td><?= e($row['rumah_ibadah_nama'] ?: '-') ?></td>
+                        <td>
+                            Lurus: <?= e((string)$row['jarak_m']) ?> m<br>
+                            <small>Rute: <?= e((string)($row['jarak_rute_m'] ?? '-')) ?> m</small>
+                        </td>
+                        <td><?= e($row['catatan_survei'] ?: $row['deskripsi_kebutuhan'] ?: '-') ?></td>
+                    </tr>
+                <?php endforeach; ?>
+                <?php if (!$rows): ?>
+                    <tr><td colspan="9" class="empty">Tidak ada data sesuai filter.</td></tr>
+                <?php endif; ?>
+            </tbody>
+        </table>
+    </main>
+</body>
+</html>
diff --git a/Leaflet2/login.php b/Leaflet2/login.php
new file mode 100644
index 0000000..883dfe6
--- /dev/null
+++ b/Leaflet2/login.php
@@ -0,0 +1,106 @@
+<?php
+declare(strict_types=1);
+
+require_once __DIR__ . '/api/db_pdo.php';
+require_once __DIR__ . '/api/auth.php';
+
+start_admin_session();
+ensure_admin_table($pdo);
+
+if (is_admin_logged_in()) {
+    header('Location: index.php');
+    exit;
+}
+
+if (empty($_SESSION['csrf_token'])) {
+    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
+}
+
+$error = '';
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $token = (string)($_POST['csrf_token'] ?? '');
+    $username = trim((string)($_POST['username'] ?? ''));
+    $password = (string)($_POST['password'] ?? '');
+
+    if (!hash_equals((string)$_SESSION['csrf_token'], $token)) {
+        $error = 'Sesi form tidak valid. Muat ulang halaman lalu coba lagi.';
+    } elseif ($username === '' || $password === '') {
+        $error = 'Username dan password wajib diisi.';
+    } else {
+        $stmt = $pdo->prepare("SELECT * FROM admins WHERE username = ? AND is_active = 1 LIMIT 1");
+        $stmt->execute([$username]);
+        $admin = $stmt->fetch();
+
+        if ($admin && password_verify($password, $admin['password_hash'])) {
+            session_regenerate_id(true);
+            $_SESSION['admin_id'] = (int)$admin['id'];
+            $_SESSION['admin_username'] = $admin['username'];
+            $_SESSION['admin_name'] = $admin['nama'];
+            unset($_SESSION['csrf_token']);
+
+            header('Location: index.php');
+            exit;
+        }
+
+        $error = 'Username atau password salah.';
+    }
+}
+?>
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login Admin - WebGIS Peduli</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="assets/css/login.css">
+</head>
+<body>
+    <main class="login-page">
+        <section class="login-panel">
+            <div class="brand-mark">
+                <i class="fas fa-map-location-dot"></i>
+            </div>
+            <p class="eyebrow">Admin Area</p>
+            <h1>Masuk ke WebGIS Peduli</h1>
+            <p class="subtitle">Gunakan akun admin untuk mengelola data peta, warga, dan rumah ibadah.</p>
+
+            <?php if ($error !== ''): ?>
+                <div class="alert-error">
+                    <i class="fas fa-circle-exclamation"></i>
+                    <span><?= htmlspecialchars($error, ENT_QUOTES, 'UTF-8') ?></span>
+                </div>
+            <?php endif; ?>
+
+            <form method="POST" class="login-form" autocomplete="off">
+                <input type="hidden" name="csrf_token" value="<?= htmlspecialchars((string)$_SESSION['csrf_token'], ENT_QUOTES, 'UTF-8') ?>">
+
+                <label class="input-group">
+                    <span>Username</span>
+                    <div class="input-shell">
+                        <i class="fas fa-user"></i>
+                        <input type="text" name="username" placeholder="admin" required autofocus>
+                    </div>
+                </label>
+
+                <label class="input-group">
+                    <span>Password</span>
+                    <div class="input-shell">
+                        <i class="fas fa-lock"></i>
+                        <input type="password" name="password" placeholder="Masukkan password" required>
+                    </div>
+                </label>
+
+                <button type="submit" class="btn-login">
+                    <span>Masuk</span>
+                    <i class="fas fa-arrow-right"></i>
+                </button>
+            </form>
+
+            <p class="login-hint">Akun awal: <strong>admin</strong> / <strong>admin123</strong></p>
+        </section>
+    </main>
+</body>
+</html>
diff --git a/Leaflet2/logout.php b/Leaflet2/logout.php
new file mode 100644
index 0000000..a94503f
--- /dev/null
+++ b/Leaflet2/logout.php
@@ -0,0 +1,24 @@
+<?php
+declare(strict_types=1);
+
+require_once __DIR__ . '/api/auth.php';
+
+start_admin_session();
+$_SESSION = [];
+
+if (ini_get('session.use_cookies')) {
+    $params = session_get_cookie_params();
+    setcookie(
+        session_name(),
+        '',
+        time() - 42000,
+        $params['path'],
+        $params['domain'],
+        (bool)$params['secure'],
+        (bool)$params['httponly']
+    );
+}
+
+session_destroy();
+header('Location: login.php');
+exit;
diff --git a/Leaflet2/panduan.php b/Leaflet2/panduan.php
new file mode 100644
index 0000000..4d103c7
--- /dev/null
+++ b/Leaflet2/panduan.php
@@ -0,0 +1,111 @@
+<?php
+declare(strict_types=1);
+
+require_once __DIR__ . '/api/auth.php';
+require_admin_login();
+
+function e(string $value): string
+{
+    return htmlspecialchars($value, ENT_QUOTES, 'UTF-8');
+}
+
+$baseUrl = 'http://localhost/Leaflet2/';
+$projectUrl = '[ISI URL PROJECT KELAS DI SINI]';
+$giteaUrl = '[https://git.ifuntanhub.dev/Arif1031/WebGIS-PovertyMap.git]';
+?>
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Panduan Penggunaan WebGIS Poverty Map</title>
+    <link rel="stylesheet" href="assets/css/guide.css?v=<?= filemtime(__DIR__ . '/assets/css/guide.css') ?>">
+</head>
+<body>
+    <main class="guide-page">
+        <header class="guide-hero">
+            <div>
+                <p class="eyebrow">Panduan Penggunaan</p>
+                <h1>WebGIS Poverty Map</h1>
+                <p class="lead">Panduan singkat untuk mengakses, mengelola data peta, mencatat bantuan, dan mencetak laporan prioritas masyarakat miskin/kurang mampu.</p>
+            </div>
+            <button class="print-btn" onclick="window.print()">Cetak / Simpan PDF</button>
+        </header>
+
+        <section class="access-panel">
+            <h2>Informasi Akses Project</h2>
+            <div class="info-grid">
+                <div>
+                    <span>URL Aplikasi Lokal</span>
+                    <strong><?= e($baseUrl) ?></strong>
+                </div>
+                <div>
+                    <span>URL Project Kelas</span>
+                    <strong><?= e($projectUrl) ?></strong>
+                </div>
+                <div>
+                    <span>Link Repo Gitea</span>
+                    <strong><?= e($giteaUrl) ?></strong>
+                </div>
+            </div>
+        </section>
+
+        <section>
+            <h2>Akun dan Role</h2>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Role</th>
+                        <th>Username</th>
+                        <th>Password</th>
+                        <th>Hak Akses</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>Admin</td>
+                        <td><code>admin</code></td>
+                        <td><code>admin123</code></td>
+                        <td>Mengelola dashboard, peta, rumah ibadah, penduduk miskin, bantuan, bukti, dan laporan.</td>
+                    </tr>
+                </tbody>
+            </table>
+            <p class="note">Versi sistem saat ini hanya memiliki satu role aktif, yaitu Admin. Jika role baru ditambahkan, akun dapat ditulis pada tabel ini.</p>
+        </section>
+
+        <section class="steps">
+            <h2>Alur Penggunaan Utama</h2>
+            <ol>
+                <li>Buka URL aplikasi, lalu login menggunakan akun admin.</li>
+                <li>Periksa ringkasan data pada Dashboard untuk melihat jumlah rumah ibadah, warga, status bantuan, prioritas, dan warga luar radius.</li>
+                <li>Buka menu Peta untuk melihat marker rumah ibadah, radius layanan, dan marker warga.</li>
+                <li>Gunakan pencarian dan filter untuk menemukan warga, rumah ibadah, status bantuan, jenis rumah ibadah, atau kategori kebutuhan.</li>
+                <li>Tambah atau edit rumah ibadah melalui menu atau tombol tambah, lalu pilih titik koordinat di peta.</li>
+                <li>Tambah atau edit penduduk miskin, lengkapi kebutuhan, kondisi rumah, penghasilan, status survei, anggota keluarga, dan bukti jika ada.</li>
+                <li>Gunakan tombol Bantuan pada popup warga untuk mencatat riwayat bantuan tanpa popup browser.</li>
+                <li>Buka Laporan untuk mencetak atau menyimpan daftar prioritas bantuan sebagai PDF.</li>
+            </ol>
+        </section>
+
+        <section>
+            <h2>Keterangan Warna Peta</h2>
+            <div class="legend-grid">
+                <div><span class="dot worship"></span><strong>Rumah Ibadah</strong><p>Pusat layanan atau rujukan bantuan sosial.</p></div>
+                <div><span class="dot reached"></span><strong>Warga Dalam Radius</strong><p>Warga berada dalam radius layanan rumah ibadah.</p></div>
+                <div><span class="dot outside"></span><strong>Warga Luar Radius</strong><p>Warga berada di luar semua radius layanan.</p></div>
+            </div>
+        </section>
+
+        <section>
+            <h2>Catatan Pengisian Data</h2>
+            <ul>
+                <li>Radius default rumah ibadah adalah 500 meter dan dapat diubah oleh admin.</li>
+                <li>Status dalam/luar radius dihitung menggunakan jarak lurus pada peta.</li>
+                <li>Jarak rute jalan ditampilkan sebagai informasi tambahan jika layanan OSRM berhasil diakses.</li>
+                <li>Penghasilan tidak boleh bernilai negatif.</li>
+                <li>Bukti bantuan atau survei dapat berupa JPG, PNG, WEBP, atau PDF dengan ukuran maksimal 3 MB.</li>
+            </ul>
+        </section>
+    </main>
+</body>
+</html>
diff --git a/Leaflet2/sql/miskin_schema.sql b/Leaflet2/sql/miskin_schema.sql
new file mode 100644
index 0000000..0c85f89
--- /dev/null
+++ b/Leaflet2/sql/miskin_schema.sql
@@ -0,0 +1,76 @@
+DROP DATABASE IF EXISTS webgis_miskin;
+CREATE DATABASE webgis_miskin CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
+USE webgis_miskin;
+
+CREATE TABLE admins (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    username VARCHAR(50) NOT NULL UNIQUE,
+    password_hash VARCHAR(255) NOT NULL,
+    nama VARCHAR(100) NOT NULL DEFAULT 'Administrator',
+    is_active TINYINT(1) NOT NULL DEFAULT 1,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+) ENGINE=InnoDB;
+
+INSERT INTO admins (username, password_hash, nama) VALUES
+('admin', '$2y$10$7O061pVz/aZ5YNK/fQyYIePIPnzDb.uZn38pC/Te3s7gRyko20dIK', 'Administrator');
+
+CREATE TABLE rumah_ibadah (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    nama VARCHAR(150) NOT NULL,
+    jenis ENUM('Masjid', 'Gereja', 'Pura', 'Vihara', 'Klenteng', 'Lainnya') NOT NULL,
+    kontak VARCHAR(50),
+    alamat TEXT,
+    lat DECIMAL(10, 8) NOT NULL,
+    lng DECIMAL(11, 8) NOT NULL,
+    radius INT NOT NULL DEFAULT 500,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+) ENGINE=InnoDB;
+
+CREATE TABLE penduduk_miskin (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    kk_nama VARCHAR(150) NOT NULL,
+    kk_nik VARCHAR(20),
+    alamat TEXT,
+    lat DECIMAL(10, 8) NOT NULL,
+    lng DECIMAL(11, 8) NOT NULL,
+    ibadah_id INT NULL,
+    jarak_m DECIMAL(10, 2) NULL,
+    jarak_rute_m DECIMAL(10, 2) NULL,
+    is_blank_spot TINYINT(1) NOT NULL DEFAULT 1,
+    status_bantuan ENUM('Sudah dibantu', 'Belum dibantu', 'Menunggu verifikasi') NOT NULL DEFAULT 'Belum dibantu',
+    kategori_kebutuhan VARCHAR(100),
+    deskripsi_kebutuhan TEXT,
+    tindak_lanjut VARCHAR(60) NOT NULL DEFAULT 'Belum disurvei',
+    kondisi_rumah VARCHAR(80),
+    penghasilan INT,
+    catatan_survei TEXT,
+    bukti_file VARCHAR(255),
+    skor_prioritas INT NOT NULL DEFAULT 0,
+    jenis_bantuan VARCHAR(100),
+    tanggal_bantuan DATE,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    FOREIGN KEY (ibadah_id) REFERENCES rumah_ibadah(id) ON DELETE SET NULL
+) ENGINE=InnoDB;
+
+CREATE TABLE anggota_keluarga (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    penduduk_id INT NOT NULL,
+    nama VARCHAR(150) NOT NULL,
+    hubungan VARCHAR(50) NOT NULL,
+    umur INT,
+    pekerjaan VARCHAR(100),
+    FOREIGN KEY (penduduk_id) REFERENCES penduduk_miskin(id) ON DELETE CASCADE
+) ENGINE=InnoDB;
+
+CREATE TABLE riwayat_bantuan (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    penduduk_id INT NOT NULL,
+    jenis_bantuan VARCHAR(120) NOT NULL,
+    tanggal_bantuan DATE NOT NULL,
+    nilai_bantuan VARCHAR(80),
+    pemberi_bantuan VARCHAR(120),
+    catatan TEXT,
+    bukti_file VARCHAR(255),
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    FOREIGN KEY (penduduk_id) REFERENCES penduduk_miskin(id) ON DELETE CASCADE
+) ENGINE=InnoDB;
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..e00b2c1
--- /dev/null
+++ b/README.md
@@ -0,0 +1,116 @@
+# WebGIS Portal
+
+Folder ini adalah versi gabungan dari landing page dan dua project WebGIS.
+
+## Struktur Folder
+
+```text
+Landingpage/
+|-- index.html              # Landing page utama
+|-- style.css               # Style landing page
+|-- assets/                 # Asset landing page
+|-- Leaflet/                # Project 1: WebGIS SPBU, jalan, dan parsil
+|   |-- leaf.html
+|   |-- spatial.html
+|   |-- api/
+|   |-- assets/
+|   `-- sql/
+|-- Leaflet2/               # Project 2: WebGIS Peduli
+|   |-- index.php
+|   |-- login.php
+|   |-- laporan.php
+|   |-- panduan.php
+|   |-- api/
+|   |-- assets/
+|   `-- sql/
+|-- Dockerfile              # Persiapan Docker, belum perlu dijalankan
+|-- docker-compose.yml      # Persiapan service app + database
+|-- .env.example            # Contoh konfigurasi environment
+|-- .dockerignore
+|-- .gitignore
+`-- DOCKER_STEPS.md         # Panduan belajar menjalankan Docker
+```
+
+## Menjalankan di XAMPP
+
+Pastikan folder ini berada di:
+
+```text
+C:\xampp\htdocs\Landingpage
+```
+
+Buka landing page:
+
+```text
+http://localhost/Landingpage/
+```
+
+Shortcut project:
+
+```text
+http://localhost/Landingpage/Leaflet/leaf.html
+http://localhost/Landingpage/Leaflet/spatial.html
+http://localhost/Landingpage/Leaflet2/login.php
+```
+
+## Database Lokal
+
+Import SQL berikut melalui phpMyAdmin atau MySQL:
+
+```text
+Leaflet/sql/schema.sql
+Leaflet/sql/spatial_schema.sql
+Leaflet2/sql/miskin_schema.sql
+```
+
+Database yang digunakan:
+
+```text
+webgis_spbu
+webgis_miskin
+```
+
+## Titik Edit Tampilan
+
+Landing page:
+
+```text
+index.html
+style.css
+assets/
+```
+
+Project 1:
+
+```text
+Leaflet/leaf.html
+Leaflet/spatial.html
+```
+
+Project 2:
+
+```text
+Leaflet2/assets/css/style.css
+Leaflet2/assets/css/login.css
+Leaflet2/assets/css/guide.css
+Leaflet2/assets/css/report.css
+```
+
+## Akun Default Project 2
+
+```text
+Username: admin
+Password: admin123
+```
+
+## Docker
+
+File Docker sudah disiapkan untuk dipelajari, tetapi belum dijalankan. Baca:
+
+```text
+DOCKER_STEPS.md
+```
+
+## Catatan Git
+
+File yang tidak perlu masuk Git sudah dicatat di `.gitignore`, terutama `.env`, upload, log, `vendor`, dan `node_modules`.
diff --git a/assets/webgis-hero.png b/assets/webgis-hero.png
new file mode 100644
index 0000000..f5df4ec
Binary files /dev/null and b/assets/webgis-hero.png differ
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..0da0953
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,48 @@
+services:
+  app:
+    build: .
+    container_name: webgis-portal-app
+    restart: unless-stopped
+    ports:
+      - "${APP_PORT:-8080}:80"
+    environment:
+      DB_HOST: ${DB_HOST:-db}
+      DB_DATABASE: ${DB_DATABASE:-webgis_miskin}
+      DB_USERNAME: ${DB_USERNAME:-webgis_user}
+      DB_PASSWORD: ${DB_PASSWORD:-webgis_password}
+      DB_CHARSET: ${DB_CHARSET:-utf8mb4}
+      DB_SETUP_USERNAME: ${DB_SETUP_USERNAME:-root}
+      DB_SETUP_PASSWORD: ${MYSQL_ROOT_PASSWORD:-root_password}
+      SPBU_DB_HOST: ${SPBU_DB_HOST:-db}
+      SPBU_DB_DATABASE: ${SPBU_DB_DATABASE:-webgis_spbu}
+      SPBU_DB_USERNAME: ${SPBU_DB_USERNAME:-webgis_user}
+      SPBU_DB_PASSWORD: ${SPBU_DB_PASSWORD:-webgis_password}
+    depends_on:
+      db:
+        condition: service_healthy
+
+  db:
+    image: mysql:8.0
+    container_name: webgis-portal-db
+    restart: unless-stopped
+    environment:
+      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD:-root_password}
+      MYSQL_DATABASE: ${DB_DATABASE:-webgis_miskin}
+      MYSQL_USER: ${DB_USERNAME:-webgis_user}
+      MYSQL_PASSWORD: ${DB_PASSWORD:-webgis_password}
+    ports:
+      - "${DB_PORT:-3307}:3306"
+    volumes:
+      - db_data:/var/lib/mysql
+      - ./Leaflet/sql/schema.sql:/docker-entrypoint-initdb.d/01-spbu-schema.sql:ro
+      - ./Leaflet/sql/spatial_schema.sql:/docker-entrypoint-initdb.d/02-spbu-spatial.sql:ro
+      - ./Leaflet2/sql/miskin_schema.sql:/docker-entrypoint-initdb.d/03-miskin-schema.sql:ro
+      - ./docker/mysql-init/99-grants.sql:/docker-entrypoint-initdb.d/99-grants.sql:ro
+    healthcheck:
+      test: ["CMD-SHELL", "mysqladmin ping -h localhost -uroot -p$${MYSQL_ROOT_PASSWORD}"]
+      interval: 10s
+      timeout: 5s
+      retries: 10
+
+volumes:
+  db_data:
diff --git a/docker/mysql-init/99-grants.sql b/docker/mysql-init/99-grants.sql
new file mode 100644
index 0000000..7b49712
--- /dev/null
+++ b/docker/mysql-init/99-grants.sql
@@ -0,0 +1,3 @@
+GRANT ALL PRIVILEGES ON webgis_spbu.* TO 'webgis_user'@'%';
+GRANT ALL PRIVILEGES ON webgis_miskin.* TO 'webgis_user'@'%';
+FLUSH PRIVILEGES;
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..6ed7450
--- /dev/null
+++ b/index.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Portal WebGIS | Leaflet & WebGIS Peduli</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css?v=8">
+</head>
+<body>
+    <header class="site-header">
+        <a class="brand" href="#home" aria-label="Portal WebGIS">
+            <span class="brand-mark" aria-hidden="true">WG</span>
+            <span class="brand-text">
+                <strong>WebGIS Portal</strong>
+                <small>Leaflet Project Hub</small>
+            </span>
+        </a>
+
+        <nav class="nav-links" aria-label="Navigasi utama">
+            <a href="#projects">Project</a>
+        </nav>
+    </header>
+
+    <main id="home">
+        <section class="hero-section">
+            <div class="hero-bg" aria-hidden="true"></div>
+            <div class="hero-overlay" aria-hidden="true"></div>
+
+            <div class="hero-content">
+                <p class="eyebrow">Portal terpadu WebGIS</p>
+                <h1>Semua project peta Leaflet dalam satu pintu masuk.</h1>
+                <p class="hero-lead">
+                    Akses cepat ke WebGIS SPBU, manajemen jalan dan parsil, serta dashboard WebGIS Peduli untuk data rumah ibadah, warga kurang mampu, radius layanan, bantuan, dan laporan.
+                </p>
+            </div>
+        </section>
+
+        <section class="projects-section" id="projects">
+            <div class="section-heading">
+                <p class="eyebrow">Project aktif</p>
+                <h2>Pilih aplikasi yang ingin digunakan</h2>
+                <p>Setiap kartu langsung mengarah ke halaman utama project yang berada di folder XAMPP.</p>
+            </div>
+
+            <div class="project-grid">
+                <article class="project-card project-one">
+                    <div class="project-visual" aria-hidden="true">
+                        <div class="mini-map">
+                            <span class="route route-a"></span>
+                            <span class="route route-b"></span>
+                            <span class="route route-c"></span>
+                            <span class="pin pin-red"></span>
+                            <span class="pin pin-blue"></span>
+                            <span class="parcel parcel-one"></span>
+                            <span class="parcel parcel-two"></span>
+                        </div>
+                    </div>
+                    <div class="project-content">
+                        <span class="project-kicker">Project 1</span>
+                        <h3>WebGIS SPBU, Jalan, dan Parsil</h3>
+                        <p>Menampilkan titik SPBU dan menyediakan pengelolaan geometri jalan serta bidang parsil melalui peta Leaflet interaktif.</p>
+                        <div class="tag-list" aria-label="Fitur Project 1">
+                            <span>SPBU</span>
+                            <span>Jalan</span>
+                            <span>Parsil</span>
+                        </div>
+                        <div class="project-links">
+                            <a class="btn btn-primary" href="Leaflet/leaf.html">WebGIS SPBU</a>
+                        </div>
+                    </div>
+                </article>
+
+                <article class="project-card project-two">
+                    <div class="project-visual" aria-hidden="true">
+                        <div class="dashboard-mock">
+                            <span class="dash-line wide"></span>
+                            <span class="dash-line"></span>
+                            <span class="dash-card green"></span>
+                            <span class="dash-card amber"></span>
+                            <span class="dash-card red"></span>
+                            <span class="radius-ring"></span>
+                            <span class="help-pin"></span>
+                        </div>
+                    </div>
+                    <div class="project-content">
+                        <span class="project-kicker">Project 2</span>
+                        <h3>WebGIS Peduli</h3>
+                        <p>Dashboard untuk memetakan rumah ibadah, warga miskin/kurang mampu, radius layanan, prioritas bantuan, riwayat, dan laporan.</p>
+                        <div class="tag-list" aria-label="Fitur Project 2">
+                            <span>Dashboard</span>
+                            <span>Bantuan</span>
+                            <span>Laporan</span>
+                        </div>
+                        <div class="project-links">
+                            <a class="btn btn-primary" href="Leaflet2/login.php">Masuk Admin</a>
+                        </div>
+                    </div>
+                </article>
+            </div>
+        </section>
+
+    </main>
+
+    <script>
+        const header = document.querySelector(".site-header");
+
+        function updateHeaderState() {
+            header.classList.toggle("is-scrolled", window.scrollY > 80);
+        }
+
+        updateHeaderState();
+        requestAnimationFrame(updateHeaderState);
+        window.addEventListener("load", updateHeaderState);
+        window.addEventListener("scroll", updateHeaderState, { passive: true });
+        window.addEventListener("hashchange", () => {
+            requestAnimationFrame(updateHeaderState);
+            setTimeout(updateHeaderState, 120);
+        });
+    </script>
+</body>
+</html>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..60399bd
--- /dev/null
+++ b/style.css
@@ -0,0 +1,621 @@
+:root {
+    --bg: #f5f7fb;
+    --surface: #ffffff;
+    --ink: #162033;
+    --muted: #647186;
+    --line: #dce4ef;
+    --teal: #0f766e;
+    --teal-dark: #115e59;
+    --blue: #2563eb;
+    --coral: #e85d4f;
+    --amber: #d99a28;
+    --green: #16a34a;
+    --shadow: 0 24px 70px rgba(22, 32, 51, 0.14);
+}
+
+* {
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    margin: 0;
+    min-height: 100vh;
+    color: var(--ink);
+    background: var(--bg);
+    font-family: "Inter", Arial, sans-serif;
+    overflow-x: hidden;
+}
+
+a {
+    color: inherit;
+    text-decoration: none;
+}
+
+h1,
+h2,
+h3,
+p {
+    margin-top: 0;
+}
+
+.site-header {
+    position: fixed;
+    top: 0;
+    left: 50%;
+    z-index: 30;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 24px;
+    width: min(1180px, calc(100% - 36px));
+    padding: 18px 0;
+    transform: translateX(-50%);
+    transition: top 0.2s ease, padding 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.brand {
+    display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
+    color: #ffffff;
+    transition: color 0.2s ease;
+}
+
+.brand-mark {
+    display: grid;
+    width: 44px;
+    height: 44px;
+    place-items: center;
+    flex: 0 0 auto;
+    border: 1px solid rgba(255, 255, 255, 0.34);
+    border-radius: 8px;
+    background: rgba(255, 255, 255, 0.16);
+    font-size: 0.86rem;
+    font-weight: 900;
+    backdrop-filter: blur(16px);
+    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
+}
+
+.brand strong,
+.brand small {
+    display: block;
+}
+
+.brand strong {
+    font-size: 0.98rem;
+    line-height: 1.1;
+}
+
+.brand small {
+    margin-top: 3px;
+    color: rgba(255, 255, 255, 0.78);
+    font-size: 0.76rem;
+    transition: color 0.2s ease;
+}
+
+.nav-links {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px;
+    border: 1px solid rgba(255, 255, 255, 0.28);
+    border-radius: 8px;
+    background: rgba(255, 255, 255, 0.14);
+    backdrop-filter: blur(16px);
+    transition: background 0.2s ease, border-color 0.2s ease;
+}
+
+.nav-links a {
+    min-width: 0;
+    padding: 9px 16px;
+    border-radius: 6px;
+    color: rgba(255, 255, 255, 0.86);
+    font-size: 0.9rem;
+    font-weight: 800;
+    transition: color 0.2s ease, background 0.2s ease;
+}
+
+.nav-links a:hover {
+    color: #ffffff;
+    background: rgba(255, 255, 255, 0.14);
+}
+
+.site-header.is-scrolled {
+    top: 14px;
+    padding: 10px 12px;
+    border: 1px solid rgba(220, 228, 239, 0.94);
+    border-radius: 8px;
+    background: rgba(255, 255, 255, 0.94);
+    box-shadow: 0 16px 42px rgba(22, 32, 51, 0.12);
+    backdrop-filter: blur(18px);
+}
+
+.site-header.is-scrolled .brand {
+    color: var(--ink);
+}
+
+.site-header.is-scrolled .brand-mark {
+    color: #ffffff;
+    border-color: transparent;
+    background: linear-gradient(145deg, var(--teal), var(--blue));
+}
+
+.site-header.is-scrolled .brand small {
+    color: var(--muted);
+}
+
+.site-header.is-scrolled .nav-links {
+    border-color: var(--line);
+    background: #f3f6fa;
+}
+
+.site-header.is-scrolled .nav-links a {
+    color: #526175;
+}
+
+.site-header.is-scrolled .nav-links a:hover {
+    color: var(--ink);
+    background: #e7edf5;
+}
+
+main {
+    overflow: hidden;
+}
+
+.hero-section {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-height: 88vh;
+    padding: 112px max(18px, calc((100vw - 1180px) / 2)) 92px;
+    color: #ffffff;
+}
+
+.hero-bg,
+.hero-overlay {
+    position: absolute;
+    inset: 0;
+}
+
+.hero-bg {
+    background-image: url("assets/webgis-hero.png");
+    background-position: center;
+    background-size: cover;
+}
+
+.hero-overlay {
+    background:
+        linear-gradient(90deg, rgba(8, 16, 32, 0.88) 0%, rgba(8, 16, 32, 0.68) 44%, rgba(8, 16, 32, 0.2) 100%),
+        linear-gradient(180deg, rgba(8, 16, 32, 0.24), rgba(8, 16, 32, 0.54));
+}
+
+.hero-content {
+    position: relative;
+    z-index: 2;
+    width: min(760px, 100%);
+}
+
+.eyebrow {
+    margin: 0 0 14px;
+    color: #35d0ba;
+    font-size: 0.76rem;
+    font-weight: 900;
+    letter-spacing: 0;
+    text-transform: uppercase;
+}
+
+h1 {
+    max-width: 820px;
+    margin-bottom: 22px;
+    font-size: clamp(2.75rem, 6vw, 5.7rem);
+    line-height: 0.98;
+    letter-spacing: 0;
+}
+
+.hero-lead {
+    max-width: 680px;
+    margin-bottom: 30px;
+    color: rgba(255, 255, 255, 0.82);
+    font-size: 1.08rem;
+    line-height: 1.75;
+}
+
+.project-links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+}
+
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    min-height: 46px;
+    padding: 12px 18px;
+    border: 1px solid transparent;
+    border-radius: 8px;
+    font-size: 0.93rem;
+    font-weight: 900;
+    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
+}
+
+.btn:hover {
+    transform: translateY(-2px);
+}
+
+.btn-primary {
+    color: #ffffff;
+    background: var(--teal);
+    box-shadow: 0 16px 34px rgba(15, 118, 110, 0.28);
+}
+
+.btn-primary:hover {
+    background: var(--teal-dark);
+}
+
+.btn-secondary {
+    color: #ffffff;
+    border-color: rgba(255, 255, 255, 0.34);
+    background: rgba(255, 255, 255, 0.14);
+    backdrop-filter: blur(12px);
+}
+
+.btn-secondary:hover {
+    background: rgba(255, 255, 255, 0.22);
+}
+
+.btn-ghost {
+    color: var(--teal-dark);
+    border-color: rgba(15, 118, 110, 0.22);
+    background: rgba(15, 118, 110, 0.08);
+}
+
+.btn-ghost:hover {
+    box-shadow: 0 12px 24px rgba(22, 32, 51, 0.09);
+}
+
+.projects-section {
+    width: min(1120px, calc(100% - 36px));
+    margin: 0 auto;
+    padding: 132px 0 70px;
+    scroll-margin-top: 0;
+}
+
+.section-heading {
+    max-width: 620px;
+    margin-bottom: 24px;
+}
+
+.section-heading .eyebrow {
+    margin-bottom: 10px;
+    color: var(--teal);
+}
+
+.section-heading h2 {
+    margin-bottom: 12px;
+    font-size: clamp(1.8rem, 3vw, 2.7rem);
+    line-height: 1.08;
+    letter-spacing: 0;
+}
+
+.section-heading p,
+.project-card p {
+    color: var(--muted);
+    line-height: 1.58;
+}
+
+.project-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 20px;
+}
+
+.project-card {
+    overflow: hidden;
+    border: 1px solid rgba(220, 228, 239, 0.94);
+    border-radius: 8px;
+    background: var(--surface);
+    box-shadow: var(--shadow);
+}
+
+.project-visual {
+    height: 180px;
+    padding: 16px;
+    border-bottom: 1px solid var(--line);
+    background:
+        linear-gradient(135deg, rgba(15, 118, 110, 0.12), rgba(37, 99, 235, 0.06)),
+        #edf4f7;
+}
+
+.project-two .project-visual {
+    background:
+        linear-gradient(135deg, rgba(232, 93, 79, 0.13), rgba(217, 154, 40, 0.11)),
+        #f8f3ec;
+}
+
+.mini-map,
+.dashboard-mock {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    border: 1px solid rgba(255, 255, 255, 0.72);
+    border-radius: 8px;
+    background:
+        linear-gradient(90deg, rgba(255, 255, 255, 0.42) 1px, transparent 1px),
+        linear-gradient(rgba(255, 255, 255, 0.42) 1px, transparent 1px),
+        linear-gradient(135deg, #cfe9e5, #dfeaff 58%, #f4f7fb);
+    background-size: 36px 36px, 36px 36px, auto;
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
+}
+
+.route {
+    position: absolute;
+    height: 8px;
+    border-radius: 999px;
+    background: rgba(37, 99, 235, 0.76);
+    transform-origin: left center;
+}
+
+.route-a {
+    top: 56px;
+    left: 22px;
+    width: 72%;
+    transform: rotate(9deg);
+}
+
+.route-b {
+    top: 145px;
+    left: 18px;
+    width: 86%;
+    background: rgba(15, 118, 110, 0.78);
+    transform: rotate(-11deg);
+}
+
+.route-c {
+    right: 34px;
+    bottom: 46px;
+    width: 50%;
+    background: rgba(232, 93, 79, 0.74);
+    transform: rotate(19deg);
+}
+
+.pin,
+.help-pin {
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    border: 4px solid #ffffff;
+    border-radius: 50% 50% 50% 0;
+    box-shadow: 0 10px 22px rgba(22, 32, 51, 0.22);
+    transform: rotate(-45deg);
+}
+
+.pin::after,
+.help-pin::after {
+    content: "";
+    position: absolute;
+    inset: 5px;
+    border-radius: 50%;
+    background: #ffffff;
+}
+
+.pin-red {
+    top: 70px;
+    left: 34%;
+    background: var(--coral);
+}
+
+.pin-blue {
+    right: 20%;
+    bottom: 70px;
+    background: var(--blue);
+}
+
+.parcel {
+    position: absolute;
+    border: 2px solid rgba(217, 154, 40, 0.88);
+    background: rgba(217, 154, 40, 0.18);
+    transform: rotate(-8deg);
+}
+
+.parcel-one {
+    right: 36px;
+    top: 34px;
+    width: 96px;
+    height: 64px;
+}
+
+.parcel-two {
+    left: 44px;
+    bottom: 32px;
+    width: 130px;
+    height: 74px;
+}
+
+.dashboard-mock {
+    background: linear-gradient(135deg, #ffffff, #f3f6fa);
+}
+
+.dash-line {
+    position: absolute;
+    left: 24px;
+    top: 28px;
+    width: 160px;
+    height: 12px;
+    border-radius: 999px;
+    background: #d8e1ec;
+}
+
+.dash-line.wide {
+    top: 54px;
+    width: 245px;
+}
+
+.dash-card {
+    position: absolute;
+    top: 94px;
+    width: 28%;
+    height: 64px;
+    border-radius: 8px;
+}
+
+.dash-card.green {
+    left: 24px;
+    background: rgba(22, 163, 74, 0.2);
+    border: 1px solid rgba(22, 163, 74, 0.32);
+}
+
+.dash-card.amber {
+    left: 36%;
+    background: rgba(217, 154, 40, 0.22);
+    border: 1px solid rgba(217, 154, 40, 0.34);
+}
+
+.dash-card.red {
+    right: 24px;
+    background: rgba(232, 93, 79, 0.2);
+    border: 1px solid rgba(232, 93, 79, 0.3);
+}
+
+.radius-ring {
+    position: absolute;
+    right: 72px;
+    bottom: 28px;
+    width: 124px;
+    height: 124px;
+    border: 3px solid rgba(37, 99, 235, 0.55);
+    border-radius: 50%;
+    background: rgba(37, 99, 235, 0.08);
+}
+
+.help-pin {
+    right: 124px;
+    bottom: 78px;
+    background: var(--teal);
+}
+
+.project-content {
+    padding: 20px;
+}
+
+.project-kicker {
+    display: inline-flex;
+    margin-bottom: 12px;
+    color: var(--teal);
+    font-size: 0.78rem;
+    font-weight: 900;
+    text-transform: uppercase;
+}
+
+.project-two .project-kicker {
+    color: var(--coral);
+}
+
+.project-card h3 {
+    margin-bottom: 8px;
+    font-size: 1.06rem;
+    letter-spacing: 0;
+}
+
+.tag-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin: 16px 0 20px;
+}
+
+.tag-list span {
+    display: inline-flex;
+    padding: 7px 10px;
+    border-radius: 999px;
+    color: var(--muted);
+    background: #eef3f8;
+    font-size: 0.78rem;
+    font-weight: 800;
+}
+
+@media (max-width: 980px) {
+    .hero-section {
+        min-height: 84vh;
+    }
+
+    .project-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 720px) {
+    .site-header {
+        position: absolute;
+        left: 14px;
+        right: 14px;
+        align-items: center;
+        flex-direction: row;
+        width: auto;
+        transform: none;
+    }
+
+    .nav-links a {
+        padding-right: 12px;
+        padding-left: 12px;
+    }
+
+    .hero-section {
+        display: block;
+        align-items: flex-start;
+        min-height: 92vh;
+        padding-top: 178px;
+        padding-bottom: 52px;
+    }
+
+    .hero-overlay {
+        background:
+            linear-gradient(180deg, rgba(8, 16, 32, 0.9) 0%, rgba(8, 16, 32, 0.74) 58%, rgba(8, 16, 32, 0.5) 100%);
+    }
+
+    h1 {
+        font-size: 2.45rem;
+        line-height: 1.04;
+    }
+
+    .hero-lead {
+        font-size: 1rem;
+    }
+
+    .project-links .btn {
+        width: 100%;
+    }
+
+    .projects-section {
+        width: min(100% - 28px, 1180px);
+        padding: 126px 0 58px;
+    }
+
+    .project-visual {
+        height: 220px;
+    }
+
+}
+
+@media (max-width: 460px) {
+    .brand-text small {
+        display: none;
+    }
+
+    .hero-section {
+        min-height: 94vh;
+        padding-top: 168px;
+    }
+
+    .project-visual {
+        height: 190px;
+        padding: 14px;
+    }
+}