commit d29bfc195a4f6291120644d75e6dff6d6b538bc3
Author: YaraAqmal <d1041231046@student.untan.ac.id>
Date:   Sun Jun 7 13:43:16 2026 +0700

    Initial commit - Fresh Clean Code

diff --git a/LinkWebsite_Pengentasan_Kemiskinan.txt b/LinkWebsite_Pengentasan_Kemiskinan.txt
new file mode 100644
index 0000000..877c625
--- /dev/null
+++ b/LinkWebsite_Pengentasan_Kemiskinan.txt
@@ -0,0 +1 @@
+https://sigwebsite.free.je/Pengentasan_Kemiskinan/
\ No newline at end of file
diff --git a/api_masjid.php b/api_masjid.php
new file mode 100644
index 0000000..d021e0b
--- /dev/null
+++ b/api_masjid.php
@@ -0,0 +1,316 @@
+<?php
+// api_masjid.php - Integrasi Hak Akses & Session Ruleplay
+require_once 'config.php';
+
+// Proteksi global: Semua request ke API ini wajib dalam keadaan login
+checkLogin();
+
+$method = $_SERVER['REQUEST_METHOD'];
+$type = isset($_GET['type']) ? $_GET['type'] : '';
+$action = isset($_GET['action']) ? $_GET['action'] : '';
+
+// Mengambil data identitas dari session user yang sedang login
+$userRole = $_SESSION['role'];
+$userMasjidId = $_SESSION['masjid_id'];
+$userDhuafaId = $_SESSION['dhuafa_id'];
+$userId = $_SESSION['user_id'];
+
+// ============================================================================
+// 1. MODUL MASJID
+// ============================================================================
+if ($type === 'masjid') {
+    
+    // ACTION: AMBIL DATA MASJID
+    if ($method === 'GET' && $action === 'getAll') {
+        // Aturan: Semua role bisa melihat data masjid untuk kebutuhan visualisasi Peta (Map)
+        $search = isset($_GET['search']) ? $conn->real_escape_string($_GET['search']) : '';
+        $query = "SELECT * FROM masjid";
+        if (!empty($search)) {
+            $query .= " WHERE nama LIKE '%$search%' OR alamat LIKE '%$search%'";
+        }
+        $query .= " ORDER BY created_at DESC";
+        
+        $result = $conn->query($query);
+        $data = [];
+        while ($row = $result->fetch_assoc()) {
+            $data[] = $row;
+        }
+        sendResponse(true, 'Data Masjid berhasil diambil', $data);
+    }
+    
+    // ACTION: TAMBAH MASJID (HANYA ADMIN)
+    elseif ($method === 'POST' && $action === 'create') {
+        if ($userRole !== 'admin') {
+            sendResponse(false, 'Akses ditolak! Hanya Admin yang dapat menambah marker masjid baru.');
+        }
+        
+        $input = json_decode(file_get_contents('php://input'), true);
+        $stmt = $conn->prepare("INSERT INTO masjid (nama, alamat, latitude, longitude, radius, nama_pimpinan, no_hp) VALUES (?, ?, ?, ?, ?, ?, ?)");
+        $stmt->bind_param("ssddiss", $input['nama'], $input['alamat'], $input['latitude'], $input['longitude'], $input['radius'], $input['nama_pimpinan'], $input['no_hp']);
+        
+        if ($stmt->execute()) {
+            sendResponse(true, 'Masjid berhasil ditambahkan', ['id' => $conn->insert_id]);
+        } else {
+            sendResponse(false, 'Gagal menambahkan masjid: ' . $stmt->error);
+        }
+        $stmt->close();
+    }
+    
+    // ACTION: UPDATE MASJID (ADMIN FULL, PENGURUS HANYA RADIUS)
+    elseif (($method === 'PUT' || $method === 'POST') && $action === 'update') {
+        $id = intval($_GET['id']);
+        $input = json_decode(file_get_contents('php://input'), true);
+        
+        if ($userRole === 'admin') {
+            // Admin bebas mengubah data apapun
+            $stmt = $conn->prepare("UPDATE masjid SET nama=?, alamat=?, latitude=?, longitude=?, radius=?, nama_pimpinan=?, no_hp=? WHERE id=?");
+            $stmt->bind_param("ssddissi", $input['nama'], $input['alamat'], $input['latitude'], $input['longitude'], $input['radius'], $input['nama_pimpinan'], $input['no_hp'], $id);
+        } 
+        elseif ($userRole === 'pengurus_masjid') {
+            // Pengurus masjid hanya diizinkan mengubah radius masjid miliknya sendiri saja
+            if ($id !== intval($userMasjidId)) {
+                sendResponse(false, 'Akses ditolak! Anda tidak diizinkan mengubah data masjid lain.');
+            }
+            $stmt = $conn->prepare("UPDATE masjid SET radius=? WHERE id=?");
+            $stmt->bind_param("ii", $input['radius'], $id);
+        } 
+        else {
+            sendResponse(false, 'Akses ditolak! Anda tidak memiliki otoritas mengubah data masjid.');
+        }
+        
+        if ($stmt->execute()) {
+            // Otomatis hitung ulang jangkauan dhuafa setelah radius masjid berubah
+            autoReassignSystem($conn);
+            sendResponse(true, 'Data masjid berhasil diperbarui');
+        } else {
+            sendResponse(false, 'Gagal memperbarui data: ' . $stmt->error);
+        }
+        $stmt->close();
+    }
+    
+    // ACTION: HAPUS MASJID (HANYA ADMIN)
+    elseif ($method === 'DELETE' && $action === 'delete') {
+        if ($userRole !== 'admin') {
+            sendResponse(false, 'Akses ditolak! Hanya Admin yang dapat menghapus data masjid.');
+        }
+        
+        $id = intval($_GET['id']);
+        $stmt = $conn->prepare("DELETE FROM masjid WHERE id=?");
+        $stmt->bind_param("i", $id);
+        
+        if ($stmt->execute()) {
+            // Putuskan hubungan pengampu di tabel dhuafa jika masjid dihapus
+            $conn->query("UPDATE orang_berkebutuhan SET status='merah', masjid_pengampu_id=NULL, jarak_ke_masjid=NULL WHERE masjid_pengampu_id=$id");
+            sendResponse(true, 'Masjid berhasil dihapus');
+        } else {
+            sendResponse(false, 'Gagal menghapus masjid: ' . $stmt->error);
+        }
+        $stmt->close();
+    }
+}
+
+// ============================================================================
+// 2. MODUL ORANG BERKEBUTUHAN (DHUAFA)
+// ============================================================================
+elseif ($type === 'orang') {
+    
+    // ACTION: AMBIL DATA DHUAFA (SESUAI HAK AKSES)
+    // ACTION: AMBIL DATA DHUAFA / ORANG BERKEBUTUHAN
+    if ($method === 'GET' && $action === 'getAll') {
+        $search = isset($_GET['search']) ? $conn->real_escape_string($_GET['search']) : '';
+        
+        // JIKA yang login adalah role dhuafa, paksa query hanya mengambil data dirinya sendiri
+        if ($userRole === 'dhuafa') {
+            if (empty($userDhuafaId)) {
+                sendResponse(false, 'Akun user Anda belum ditautkan ke data dhuafa di database.');
+            }
+            $query = "SELECT o.*, m.nama AS nama_masjid 
+                      FROM orang_berkebutuhan o 
+                      LEFT JOIN masjid m ON o.masjid_pengampu_id = m.id 
+                      WHERE o.id = $userDhuafaId";
+        } else {
+            // Jika admin atau pengurus masjid, panggil semua/sesuai search
+            $query = "SELECT o.*, m.nama AS nama_masjid 
+                      FROM orang_berkebutuhan o 
+                      LEFT JOIN masjid m ON o.masjid_pengampu_id = m.id";
+            if (!empty($search)) {
+                $query .= " WHERE o.nama LIKE '%$search%' OR o.no_kk LIKE '%$search%'";
+            }
+            $query .= " ORDER BY o.created_at DESC";
+        }
+        
+        $result = $conn->query($query);
+        $data = [];
+        while ($row = $result->fetch_assoc()) {
+            $data[] = $row;
+        }
+        sendResponse(true, 'Data berhasil dimuat.', $data);
+    }
+    
+    // ACTION: TAMBAH DATA DHUAFA (ADMIN ATAU MANDIRI MAKSIMAL 1 MARKER)
+    elseif ($method === 'POST' && $action === 'create') {
+        $input = json_decode(file_get_contents('php://input'), true);
+        
+        $targetUserId = null;
+        if ($userRole === 'dhuafa') {
+            // Cek apakah akun dhuafa ini sudah pernah membuat marker sebelumnya
+            $check = $conn->query("SELECT id FROM orang_berkebutuhan WHERE user_id = $userId");
+            if ($check->num_rows >= 1) {
+                sendResponse(false, 'Akses ditolak! Batas maksimal pembuatan marker adalah 1 lokasi.');
+            }
+            $targetUserId = $userId;
+        } elseif ($userRole !== 'admin') {
+            sendResponse(false, 'Akses ditolak! Anda tidak memiliki otoritas menambah data warga.');
+        }
+
+        $stmt = $conn->prepare("INSERT INTO orang_berkebutuhan (nama, no_kk, alamat, latitude, longitude, tgl_lahir, no_hp, user_id) VALUES (?, ?, ?, ?, ?, ?, ?, ?)");
+        $stmt->bind_param("ssissssi", $input['nama'], $input['no_kk'], $input['alamat'], $input['latitude'], $input['longitude'], $input['tgl_lahir'], $input['no_hp'], $targetUserId);
+        
+        if ($stmt->execute()) {
+            $newDhuafaId = $conn->insert_id;
+            // Jika dia dhuafa, langsung tautkan dhuafa_id ke tabel users agar sinkron
+            if ($userRole === 'dhuafa') {
+                $conn->query("UPDATE users SET dhuafa_id = $newDhuafaId WHERE id = $userId");
+                $_SESSION['dhuafa_id'] = $newDhuafaId;
+            }
+            autoReassignSystem($conn);
+            sendResponse(true, 'Data dhuafa berhasil ditambahkan', ['id' => $newDhuafaId]);
+        } else {
+            sendResponse(false, 'Gagal menambahkan: ' . $stmt->error);
+        }
+        $stmt->close();
+    }
+    
+    // ACTION: UPDATE DATA DHUAFA (ADMIN ATAU MILIK DIRINYA SENDIRI)
+    elseif (($method === 'PUT' || $method === 'POST') && $action === 'update') {
+        $id = intval($_GET['id']);
+        $input = json_decode(file_get_contents('php://input'), true);
+        
+        if ($userRole === 'dhuafa') {
+            // Dhuafa hanya bisa mengedit data miliknya sendiri
+            if ($id !== intval($userDhuafaId)) {
+                sendResponse(false, 'Akses ditolak! Anda tidak berhak mengubah data milik orang lain.');
+            }
+        } elseif ($userRole !== 'admin') {
+            sendResponse(false, 'Akses ditolak! Hak akses Anda tidak mengizinkan pengubahan data dhuafa.');
+        }
+        
+        $stmt = $conn->prepare("UPDATE orang_berkebutuhan SET nama=?, no_kk=?, alamat=?, latitude=?, longitude=?, tgl_lahir=?, no_hp=? WHERE id=?");
+        $stmt->bind_param("ssissssi", $input['nama'], $input['no_kk'], $input['alamat'], $input['latitude'], $input['longitude'], $input['tgl_lahir'], $input['no_hp'], $id);
+        
+        if ($stmt->execute()) {
+            autoReassignSystem($conn);
+            sendResponse(true, 'Data dhuafa berhasil diupdate');
+        } else {
+            sendResponse(false, 'Gagal mengupdate: ' . $stmt->error);
+        }
+        $stmt->close();
+    }
+    
+    // ACTION: HAPUS DATA DHUAFA (ADMIN ATAU MILIK DIRINYA SENDIRI)
+    elseif ($method === 'DELETE' && $action === 'delete') {
+        $id = intval($_GET['id']);
+        
+        if ($userRole === 'dhuafa') {
+            if ($id !== intval($userDhuafaId)) {
+                sendResponse(false, 'Akses ditolak!');
+            }
+        } elseif ($userRole !== 'admin') {
+            sendResponse(false, 'Akses ditolak! Anda tidak memiliki otoritas menghapus data ini.');
+        }
+        
+        $stmt = $conn->prepare("DELETE FROM orang_berkebutuhan WHERE id=?");
+        $stmt->bind_param("i", $id);
+        
+        if ($stmt->execute()) {
+            if ($userRole === 'dhuafa') {
+                $conn->query("UPDATE users SET dhuafa_id = NULL WHERE id = $userId");
+                $_SESSION['dhuafa_id'] = null;
+            }
+            sendResponse(true, 'Data berhasil dihapus');
+        } else {
+            sendResponse(false, 'Gagal menghapus: ' . $stmt->error);
+        }
+        $stmt->close();
+    }
+}
+
+// ============================================================================
+// 3. ADMIN SUMMARY (FITUR RINGKASAN DIAGRAM & KPI UNTUK ADMIN)
+// ============================================================================
+elseif ($type === 'summary' && $userRole === 'admin') {
+    if ($method === 'GET') {
+        // Ambil hitungan KPI
+        $totMasjid = $conn->query("SELECT COUNT(*) as total FROM masjid")->fetch_assoc()['total'];
+        $totDhuafa = $conn->query("SELECT COUNT(*) as total FROM orang_berkebutuhan")->fetch_assoc()['total'];
+        $totTerampu = $conn->query("SELECT COUNT(*) as total FROM orang_berkebutuhan WHERE status='hijau'")->fetch_assoc()['total'];
+        $totBelum = $conn->query("SELECT COUNT(*) as total FROM orang_berkebutuhan WHERE status='merah'")->fetch_assoc()['total'];
+        
+        sendResponse(true, 'Data ringkasan admin berhasil dimuat', [
+            'total_masjid' => intval($totMasjid),
+            'total_dhuafa' => intval($totDhuafa),
+            'terampu' => intval($totTerampu),
+            'belum_terampu' => intval($totBelum)
+        ]);
+    }
+}
+
+// ============================================================================
+// SISTEM FILTER RADIUS JANGKAUAN OTOMATIS (FUNGSI INTERNAL)
+// ============================================================================
+function autoReassignSystem($conn) {
+    // 1. Ambil data masjid
+    $resMasjid = $conn->query("SELECT id, latitude, longitude, radius FROM masjid");
+    $masjidList = [];
+    while($m = $resMasjid->fetch_assoc()) { $masjidList[] = $m; }
+
+    // 2. Ambil data dhuafa
+    $resOrang = $conn->query("SELECT id, latitude, longitude FROM orang_berkebutuhan");
+    $wargaList = [];
+    while($o = $resOrang->fetch_assoc()) { $wargaList[] = $o; }
+
+    // 3. Reset hitungan jumlah diampu di semua masjid
+    $conn->query("UPDATE masjid SET jumlah_diampu = 0");
+
+    // 4. Hitung ulang jarak geospatial secara otomatis
+    foreach($wargaList as $w) {
+        $latWarga = floatval($w['latitude']);
+        $lngWarga = floatval($w['longitude']);
+        $minJarak = 99999999;
+        $assignedMasjidId = null;
+
+        foreach($masjidList as $m) {
+            $jarak = hitungJarakInPHP($latWarga, $lngWarga, floatval($m['latitude']), floatval($m['longitude']));
+            if($jarak <= floatval($m['radius'])) {
+                if($jarak < $minJarak) {
+                    $minJarak = $jarak;
+                    $assignedMasjidId = $m['id'];
+                }
+            }
+        }
+
+        if($assignedMasjidId) {
+            // PERBAIKAN: Tipe data bind_param disesuaikan (i = integer, d = double/float)
+            $up = $conn->prepare("UPDATE orang_berkebutuhan SET status='hijau', masjid_pengampu_id=?, jarak_ke_masjid=? WHERE id=?");
+            $up->bind_param("idi", $assignedMasjidId, $minJarak, $w['id']);
+            $up->execute();
+            $up->close();
+            
+            // Tambahkan hitungan ke masjid pengampu
+            $conn->query("UPDATE masjid SET jumlah_diampu = jumlah_diampu + 1 WHERE id = $assignedMasjidId");
+        } else {
+            // Jika di luar radius semua masjid, set status menjadi merah
+            $conn->query("UPDATE orang_berkebutuhan SET status='merah', masjid_pengampu_id=NULL, jarak_ke_masjid=NULL WHERE id=" . $w['id']);
+        }
+    }
+}
+
+function hitungJarakInPHP($lat1, $lng1, $lat2, $lng2) {
+    $R = 6371000;
+    $dLat = deg2rad($lat2 - $lat1);
+    $dLon = deg2rad($lng2 - $lng1);
+    $a = sin($dLat/2) * sin($dLat/2) + cos(deg2rad($lat1)) * cos(deg2rad($lat2)) * sin($dLon/2) * sin($dLon/2);
+    $c = 2 * atan2(sqrt($a), sqrt(1-$a));
+    return $R * $c;
+}
+?>
\ No newline at end of file
diff --git a/auth.php b/auth.php
new file mode 100644
index 0000000..aac8693
--- /dev/null
+++ b/auth.php
@@ -0,0 +1,73 @@
+<?php
+// auth.php
+require_once 'config.php';
+
+$method = $_SERVER['REQUEST_METHOD'];
+$action = isset($_GET['action']) ? $_GET['action'] : '';
+
+if ($method === 'POST' && $action === 'login') {
+    // Membaca input JSON dari frontend
+    $input = json_decode(file_get_contents('php://input'), true);
+    $username = trim($input['username'] ?? '');
+    $password = trim($input['password'] ?? '');
+
+    if (empty($username) || empty($password)) {
+        sendResponse(false, 'Username dan password wajib diisi.');
+    }
+
+    // Mencari user di database
+    $stmt = $conn->prepare("SELECT id, username, password, role, masjid_id, dhuafa_id FROM users WHERE username = ?");
+    $stmt->bind_param("s", $username);
+    $stmt->execute();
+    $result = $stmt->get_result();
+    
+    if ($result->num_rows === 1) {
+        $user = $result->fetch_assoc();
+        
+        // Memverifikasi kecocokan password yang di-hash
+        if (password_verify($password, $user['password'])) {
+            // Menyimpan data user ke dalam session server
+            $_SESSION['user_id']   = $user['id'];
+            $_SESSION['username']  = $user['username'];
+            $_SESSION['role']      = $user['role'];
+            $_SESSION['masjid_id'] = $user['masjid_id'];
+            $_SESSION['dhuafa_id'] = $user['dhuafa_id'];
+
+            // Kirim data user yang berhasil login tanpa password-nya
+            unset($user['password']);
+            sendResponse(true, 'Login berhasil.', $user);
+        } else {
+            sendResponse(false, 'Password salah.');
+        }
+    } else {
+        sendResponse(false, 'Username tidak ditemukan.');
+    }
+    $stmt->close();
+} 
+
+elseif ($method === 'GET' && $action === 'check') {
+    // Aksi untuk memeriksa apakah session user masih aktif saat halaman di-refresh
+    if (isset($_SESSION['user_id'])) {
+        sendResponse(true, 'Sesi aktif.', [
+            'id' => $_SESSION['user_id'],
+            'username' => $_SESSION['username'],
+            'role' => $_SESSION['role'],
+            'masjid_id' => $_SESSION['masjid_id'],
+            'dhuafa_id' => $_SESSION['dhuafa_id']
+        ]);
+    } else {
+        sendResponse(false, 'Belum login.');
+    }
+} 
+
+elseif ($method === 'POST' && $action === 'logout') {
+    // Menghapus seluruh session aktif
+    session_unset();
+    session_destroy();
+    sendResponse(true, 'Logout berhasil.');
+} 
+
+else {
+    sendResponse(false, 'Aksi autentikasi tidak valid.');
+}
+?>
\ No newline at end of file
diff --git a/config.php b/config.php
new file mode 100644
index 0000000..5c011f5
--- /dev/null
+++ b/config.php
@@ -0,0 +1,55 @@
+<?php
+// config.php
+if (session_status() === PHP_SESSION_NONE) {
+    session_start();
+}
+
+// Mengizinkan semua origin lokal saat masa development agar cookie session tidak diblokir
+header('Content-Type: application/json');
+header('Access-Control-Allow-Origin: ' . ($_SERVER['HTTP_ORIGIN'] ?? '*')); 
+header('Access-Control-Allow-Credentials: true');
+header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
+header('Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With');
+
+if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
+    http_response_code(200);
+    exit();
+}
+
+$host = 'localhost';
+$username = 'root';
+$password = '';
+$database = 'gis_management';
+$port = 3307; // Sesuai port database XAMPP Anda
+
+$conn = new mysqli($host, $username, $password, $database, $port);
+
+if ($conn->connect_error) {
+    die(json_encode([
+        'success' => false,
+        'message' => 'Koneksi database gagal: ' . $conn->connect_error
+    ]));
+}
+
+$conn->set_charset("utf8");
+
+// Fungsi standar untuk mengirim respon JSON
+function sendResponse($success, $message, $data = null) {
+    $response = [
+        'success' => $success,
+        'message' => $message
+    ];
+    if ($data !== null) {
+        $response['data'] = $data;
+    }
+    echo json_encode($response);
+    exit;
+}
+
+// Fungsi bantu untuk mengecek apakah user sudah login
+function checkLogin() {
+    if (!isset($_SESSION['user_id'])) {
+        sendResponse(false, 'Status tidak terautentikasi. Silakan login terlebih dahulu.');
+    }
+}
+?>
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..038800a
--- /dev/null
+++ b/index.html
@@ -0,0 +1,1252 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sistem Manajemen GIS - Modern Dashboard</title>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+
+    <style>
+        body { height: 100vh; margin: 0; display: flex; flex-direction: column; font-family: 'Segoe UI', system-ui, sans-serif; background-color: #f4f6f9; }
+        .navbar { background: linear-gradient(135deg, #1a365d 0%, #2a4365 100%); z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.15); }
+        #mainContainer { flex: 1; display: flex; overflow: hidden; position: relative; }
+        #sidebar { width: 420px; background: white; box-shadow: 3px 0 15px rgba(0,0,0,0.05); display: flex; flex-direction: column; z-index: 999; transition: all 0.3s ease; overflow-y: auto; }
+        #map { flex: 1; height: 100%; z-index: 1; }
+        .nav-tabs .nav-link { border: none; color: #718096; padding: 12px 20px; font-weight: 500; border-bottom: 3px solid transparent; }
+        .nav-tabs .nav-link.active { color: #2b6cb0; border-bottom-color: #2b6cb0; background: transparent; }
+        .card-stats { border-radius: 12px; border: none; box-shadow: 0 4px 6px rgba(0,0,0,0.02); transition: transform 0.2s; }
+        .card-stats:hover { transform: translateY(-3px); }
+        .table-responsive { max-height: 280px; overflow-y: auto; }
+        .table th { font-weight: 600; color: #4a5568; background-color: #f7fafc; border-top: none; }
+        .btn-xs { padding: 2px 6px; font-size: 0.75rem; border-radius: 4px; }
+        #loginScreen { position: fixed; top:0; left:0; width:100vw; height:100vh; background: rgba(26, 54, 93, 0.4); backdrop-filter: blur(8px); z-index: 9999; display: flex; align-items: center; justify-content: center; }
+        .login-box { background: white; padding: 40px; border-radius: 16px; width: 100%; max-width: 400px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); border: 1px solid rgba(0,0,0,0.05); }
+        .selected-masjid-marker {
+            background-color: #e53e3e; color: white; border-radius: 50%; width: 34px; height: 34px;
+            display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 0 rgba(229, 62, 62, 0.7);
+            animation: pulse-red-marker 1.2s infinite cubic-bezier(0.66, 0, 0, 1); border: 2px solid white;
+        }
+        @keyframes pulse-red-marker {
+            to { box-shadow: 0 0 0 14px rgba(229, 62, 62, 0); }
+        }
+        .small-text-muted { font-size: 0.75rem; color: #a0aec0; }
+        ::-webkit-scrollbar { width: 6px; height: 6px; }
+        ::-webkit-scrollbar-track { background: #f1f1f1; }
+        ::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 4px; }
+        ::-webkit-scrollbar-thumb:hover { background: #a0aec0; }
+        .mode-tambah-aktif {
+            cursor: crosshair !important;
+        }
+    </style>
+</head>
+<body>
+
+    <div id="loginScreen" style="display: none;">
+        <div class="login-box">
+            <div class="text-center mb-4">
+                <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
+                    <i class="fas fa-map-marked-alt fa-2x"></i>
+                </div>
+                <h4 class="fw-bold text-dark">Sistem Pemetaan GIS</h4>
+                <p class="text-muted small">Silakan masuk dengan akun anda</p>
+            </div>
+            <form id="loginForm">
+                <div class="mb-3">
+                    <label class="form-label small fw-semibold text-secondary">Username</label>
+                    <div class="input-group">
+                        <span class="input-group-text bg-light border-end-0"><i class="fas fa-user text-muted"></i></span>
+                        <input type="text" id="loginUsername" class="form-control bg-light border-start-0" placeholder="Masukkan username" required>
+                    </div>
+                </div>
+                <div class="mb-4">
+                    <label class="form-label small fw-semibold text-secondary">Password</label>
+                    <div class="input-group">
+                        <span class="input-group-text bg-light border-end-0"><i class="fas fa-lock text-muted"></i></span>
+                        <input type="password" id="loginPassword" class="form-control bg-light border-start-0" placeholder="••••••••" required>
+                    </div>
+                </div>
+                <button type="submit" class="btn btn-primary w-100 py-2 fw-semibold">Masuk Aplikasi <i class="fas fa-sign-in-alt ms-1"></i></button>
+            </form>
+        </div>
+    </div>
+
+    <nav class="navbar navbar-expand-lg navbar-dark px-3 py-2">
+        <div class="container-fluid">
+            <a class="navbar-brand fw-bold d-flex align-items-center" href="#">
+                <i class="fas fa-globe-asia text-info me-2 fa-lg"></i>
+                <div>
+                    <span class="d-block lh-1 text-white">GIS-PEMBERDAYAAN</span>
+                    <span class="small-text-muted" style="font-size: 10px; letter-spacing: 1px;">KOTA PONTIANAK</span>
+                </div>
+            </a>
+            <div class="d-flex align-items-center gap-3">
+                <span id="userBadge" class="badge bg-light text-primary py-2 px-3 fw-semibold shadow-sm" style="font-size:12px;">Role: -</span>
+                <button class="btn btn-outline-light btn-sm fw-semibold px-3" onclick="handleLogout()"><i class="fas fa-power-off me-1"></i> Keluar</button>
+            </div>
+        </div>
+    </nav>
+
+    <div id="mainContainer">
+        
+        <div id="sidebar" class="p-3">
+            
+            <div id="navTabsContainer" class="mb-3">
+                <ul class="nav nav-tabs nav-fill border-bottom w-100">
+                    <li class="nav-item">
+                        <button class="nav-link tab-btn active w-100" id="btnTabOrang" onclick="switchTab('tabOrang')"><i class="fas fa-user-friends me-1"></i> Warga</button>
+                    </li>
+                    <li class="nav-item">
+                        <button class="nav-link tab-btn w-100" id="btnTabMasjid" onclick="switchTab('tabMasjid')"><i class="fas fa-mosque me-1"></i> Masjid</button>
+                    </li>
+                    <li class="nav-item">
+                        <button class="nav-link tab-btn w-100 d-none" id="btnTabAkun" onclick="switchTab('tabAkun')"><i class="fas fa-user-cog me-1"></i> Akun</button>
+                    </li>
+                </ul>
+            </div>
+
+            <div id="dynamicWorkspace">
+                
+                <div id="tabOrang" class="dynamic-section">
+                    <div class="mb-3 d-flex gap-2">
+                        <input type="text" id="searchOrang" class="form-control" placeholder="Cari warga...">
+                        <button type="button" class="btn btn-success text-nowrap" onclick="aktifkanModeTambah('orang')">
+                            <i class="fas fa-user-plus me-1"></i> Tambah Warga
+                        </button>
+                    </div>
+                    <div class="table-responsive border rounded bg-white mb-3 shadow-sm">
+                        <table class="table table-hover table-sm align-middle mb-0" style="font-size: 12px;">
+                            <thead>
+                                <tr>
+                                    <th>Nama Warga</th>
+                                    <th>No KK</th>
+                                    <th>Status</th>
+                                    <th class="text-end">Aksi</th>
+                                </tr>
+                            </thead>
+                            <tbody id="tableOrangBody"></tbody>
+                        </table>
+                    </div>
+
+                    <div class="card p-3 border shadow-sm" style="background:#f8fafc; border-radius:12px;">
+                        <h6 class="fw-bold text-dark mb-2 small"><i class="fas fa-edit me-1 text-primary"></i> Form Kelola Warga Berkebutuhan</h6>
+                        <form id="orangForm">
+                            <input type="hidden" id="orangId">
+                            <div class="mb-2">
+                                <label class="form-label mb-0 small text-muted">Nama Lengkap</label>
+                                <input type="text" id="orangNama" class="form-control form-control-sm" required>
+                            </div>
+                            <div class="mb-2">
+                                <label class="form-label mb-0 small text-muted">Nomor KK</label>
+                                <input type="text" id="orangKk" class="form-control form-control-sm" required>
+                            </div>
+                            <div class="mb-2">
+                                <label class="form-label mb-0 small text-muted">Alamat Rumah</label>
+                                <textarea id="orangAlamat" class="form-control form-control-sm" rows="2" required placeholder="Klik peta/geser marker untuk memicu otomatis alamat..."></textarea>
+                            </div>
+                            <div class="row g-2 mb-2">
+                                <div class="col-6">
+                                    <label class="form-label mb-0 small text-muted">Tanggal Lahir</label>
+                                    <input type="date" id="orangTglLahir" class="form-control form-control-sm" required>
+                                </div>
+                                <div class="col-6">
+                                    <label class="form-label mb-0 small text-muted">No HP / WhatsApp</label>
+                                    <input type="text" id="orangHp" class="form-control form-control-sm" required>
+                                </div>
+                            </div>
+                            <div class="row g-2 mb-3">
+                                <div class="col-6">
+                                    <label class="form-label mb-0 small text-muted">Latitude</label>
+                                    <input type="text" id="orangLat" class="form-control form-control-sm" readonly required placeholder="Klik Peta">
+                                </div>
+                                <div class="col-6">
+                                    <label class="form-label mb-0 small text-muted">Longitude</label>
+                                    <input type="text" id="orangLng" class="form-control form-control-sm" readonly required placeholder="Klik Peta">
+                                </div>
+                            </div>
+                            <div class="d-flex gap-2">
+                                <button type="submit" class="btn btn-primary btn-sm w-100 fw-semibold">Simpan Data</button>
+                                <button type="button" class="btn btn-dark btn-sm fw-semibold" onclick="batalAksiModeForm('orang')"><i class="fas fa-times me-1"></i> Batal</button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+
+                <div id="tabMasjid" class="dynamic-section d-none">
+                    <div class="mb-3 d-flex gap-2">
+                        <input type="text" id="searchMasjid" class="form-control" placeholder="Cari masjid...">
+                        <button type="button" class="btn btn-primary text-nowrap" onclick="aktifkanModeTambah('masjid')">
+                            <i class="fas fa-plus-circle me-1"></i> Tambah Masjid
+                        </button>
+                    </div>
+                    <div class="table-responsive border rounded bg-white mb-3 shadow-sm">
+                        <table class="table table-hover table-sm align-middle mb-0" style="font-size: 12px;">
+                            <thead>
+                                <tr>
+                                    <th>Nama Masjid</th>
+                                    <th>Radius</th>
+                                    <th class="text-center">Diampu</th>
+                                    <th class="text-end">Aksi</th>
+                                </tr>
+                            </thead>
+                            <tbody id="tableMasjidBody"></tbody>
+                        </table>
+                    </div>
+
+                    <div class="card p-3 border shadow-sm" style="background:#f8fafc; border-radius:12px;">
+                        <h6 class="fw-bold text-dark mb-2 small"><i class="fas fa-edit me-1 text-primary"></i> Form Kelola Titik Masjid</h6>
+                        <form id="masjidForm">
+                            <input type="hidden" id="masjidId">
+                            <div class="mb-2">
+                                <label class="form-label mb-0 small text-muted">Nama Masjid</label>
+                                <input type="text" id="masjidNama" class="form-control form-control-sm" required>
+                            </div>
+                            <div class="mb-2">
+                                <label class="form-label mb-0 small text-muted">Alamat Lengkap</label>
+                                <textarea id="masjidAlamat" class="form-control form-control-sm" rows="2" required placeholder="Klik peta/geser marker untuk memicu otomatis alamat..."></textarea>
+                            </div>
+                            <div class="row g-2 mb-2">
+                                <div class="col-6">
+                                    <label class="form-label mb-0 small text-muted">Nama Pimpinan</label>
+                                    <input type="text" id="masjidPimpinan" class="form-control form-control-sm" required>
+                                </div>
+                                <div class="col-6">
+                                    <label class="form-label mb-0 small text-muted">No Kontak HP</label>
+                                    <input type="text" id="masjidHp" class="form-control form-control-sm" required>
+                                </div>
+                            </div>
+                            <div class="mb-2">
+                                <label class="form-label mb-0 small text-muted d-flex justify-content-between">
+                                    <span>Rasio Jangkauan Bantuan</span>
+                                    <span id="radiusValAdmin" class="fw-bold text-primary">500m</span>
+                                </label>
+                                <input type="range" class="form-range" id="masjidRadius" min="100" max="2000" step="50" value="500">
+                            </div>
+                            <div class="row g-2 mb-3">
+                                <div class="col-6">
+                                    <label class="form-label mb-0 small text-muted">Latitude</label>
+                                    <input type="text" id="masjidLat" class="form-control form-control-sm" readonly required placeholder="Klik Peta">
+                                </div>
+                                <div class="col-6">
+                                    <label class="form-label mb-0 small text-muted">Longitude</label>
+                                    <input type="text" id="masjidLng" class="form-control form-control-sm" readonly required placeholder="Klik Peta">
+                                </div>
+                            </div>
+                            <div class="d-flex gap-2">
+                                <button type="submit" class="btn btn-primary btn-sm w-100 fw-semibold">Simpan Data</button>
+                                <button type="button" class="btn btn-dark btn-sm fw-semibold" onclick="batalAksiModeForm('masjid')"><i class="fas fa-times me-1"></i> Batal</button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+
+                <div id="tabAkun" class="dynamic-section d-none">
+                    <div class="card p-3 border shadow-sm bg-white" style="border-radius:12px;">
+                        <h6 class="fw-bold text-dark mb-3 small"><i class="fas fa-user-plus me-1 text-primary"></i> Buat Akses Akun Baru</h6>
+                        <form id="registerAccountForm">
+                            <div class="mb-2">
+                                <label class="form-label mb-0 small text-muted">Pilih Hak Akses (Role)</label>
+                                <select id="regRole" class="form-select form-select-sm" onchange="handleRoleSelectionChange()" required>
+                                    <option value="pengurus_masjid">Pengurus Masjid (Mitra Pengampu)</option>
+                                    <option value="dhuafa">Warga Dhuafa (Akses Mandiri)</option>
+                                </select>
+                            </div>
+                            <div class="mb-2" id="regMasjidSelectWrapper">
+                                <label class="form-label mb-0 small text-muted">Tautkan ke Masjid Terdaftar</label>
+                                <select id="regMasjidId" class="form-select form-select-sm"></select>
+                            </div>
+                            <div class="mb-2 d-none" id="regDhuafaSelectWrapper">
+                                <label class="form-label mb-0 small text-muted">Tautkan ke Nama Warga Dhuafa</label>
+                                <select id="regDhuafaId" class="form-select form-select-sm"></select>
+                            </div>
+                            <div class="mb-2">
+                                <label class="form-label mb-0 small text-muted">Username Baru</label>
+                                <input type="text" id="regUsername" class="form-control form-control-sm" required placeholder="Contoh: pengurus_raya">
+                            </div>
+                            <div class="mb-3">
+                                <label class="form-label mb-0 small text-muted">Password Akses</label>
+                                <input type="password" id="regPassword" class="form-control form-control-sm" required placeholder="••••••••">
+                            </div>
+                            <button type="submit" class="btn btn-success btn-sm w-100 fw-semibold">Daftarkan Akun <i class="fas fa-check-circle ms-1"></i></button>
+                        </form>
+                    </div>
+                </div>
+
+                <div class="mt-3">
+                    <div class="row g-2 mb-2">
+                        <div class="col-6">
+                            <div class="card card-stats bg-primary text-white p-2 text-center">
+                                <span class="small-text-muted text-white-50" style="font-size:10px;">TOTAL MASJID</span>
+                                <h4 class="fw-bold my-0" id="statMasjid">0</h4>
+                            </div>
+                        </div>
+                        <div class="col-6">
+                            <div class="card card-stats bg-dark text-white p-2 text-center">
+                                <span class="small-text-muted text-white-50" style="font-size:10px;">TOTAL DHUAFA</span>
+                                <h4 class="fw-bold my-0" id="statDhuafa">0</h4>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card border p-2 bg-white shadow-sm" style="border-radius:10px;">
+                        <span class="fw-bold text-center d-block text-secondary mb-1" style="font-size:10px; letter-spacing:0.5px;">PERSENTASE CAKUPAN BANTUAN</span>
+                        <div style="width: 130px; margin: 0 auto;">
+                            <canvas id="adminChart" width="130" height="130"></canvas>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+
+            <div id="pengurusWorkspace" class="d-none">
+                <div class="card bg-gradient border-0 text-white p-3 mb-3 shadow-sm" style="background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%); border-radius:14px;">
+                    <span class="text-white-50 small d-block">Warga Tercover Radius Anda</span>
+                    <h3 class="fw-bold my-0" id="totalWargaPengurus">0 Orang</h3>
+                    <div class="mt-2 text-white-50" style="font-size:11px;"><i class="fas fa-info-circle me-1"></i>Menampilkan warga dhuafa dalam jangkauan radar masjid pengampu anda.</div>
+                </div>
+
+                <div class="mb-2">
+                    <input type="text" id="searchOrangPengurus" class="form-control form-control-sm" placeholder="Cari warga diampu...">
+                </div>
+
+                <div class="table-responsive border rounded bg-white mb-3 shadow-sm" style="max-height: 250px;">
+                    <table class="table table-hover table-sm align-middle mb-0" style="font-size:12px;">
+                        <tbody id="tablePengurusOrangBody"></tbody>
+                    </table>
+                </div>
+
+                <div class="card p-3 border shadow-sm bg-light" style="border-radius:12px;">
+                    <h6 class="fw-bold text-dark mb-2 small"><i class="fas fa-radar me-1 text-primary"></i> Atur Jangkauan Radar Masjid</h6>
+                    <form id="pengurusRadiusForm">
+                        <div class="mb-3">
+                            <label class="form-label mb-0 small text-muted d-flex justify-content-between">
+                                <span>Radius Efektif (Meter)</span>
+                                <span id="radiusValPengurus" class="fw-bold text-primary">500m</span>
+                            </label>
+                            <input type="range" class="form-range" id="sliderRadiusPengurus" min="100" max="2000" step="50" value="500">
+                        </div>
+                        <div class="d-flex gap-2">
+                            <button type="submit" class="btn btn-primary btn-sm w-100 fw-semibold">Perbarui Radius</button>
+                            <button type="button" class="btn btn-outline-secondary btn-sm" onclick="resetPengurusRadius()"><i class="fas fa-undo"></i></button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+
+            <div id="dhuafaWorkspace" class="d-none">
+                <div class="card border shadow-sm p-3 bg-white mb-3" style="border-radius:14px;">
+                    <div class="d-flex justify-content-between align-items-center mb-2">
+                        <span class="fw-bold text-dark small"><i class="fas fa-circle-info text-primary me-1"></i> Status Kelayakan Bantuan</span>
+                        <span id="dhuafaStatusBadge" class="badge">Memuat...</span>
+                    </div>
+                    <div class="p-2 border rounded bg-light" style="font-size:11px;">
+                        <div class="row mb-1">
+                            <div class="col-5 text-muted">Masjid Pengampu:</div>
+                            <div class="col-7 fw-bold text-dark text-end" id="dhuafaInfoMasjid">-</div>
+                        </div>
+                        <div class="row">
+                            <div class="col-5 text-muted">Jarak ke Masjid:</div>
+                            <div class="col-7 fw-bold text-primary text-end" id="dhuafaInfoJarak">-</div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="card p-3 border shadow-sm bg-white" style="border-radius:12px;">
+                    <h6 class="fw-bold text-dark mb-2 small"><i class="fas fa-user-edit text-success me-1"></i> Profil & Titik Rumah Saya</h6>
+                    <form id="dhuafaSelfForm">
+                        <input type="hidden" id="dhuafaSelfId">
+                        <div class="mb-2">
+                            <label class="form-label mb-0 small text-muted">Nama Lengkap Anda</label>
+                            <input type="text" id="dhuafaSelfNama" class="form-control form-control-sm" required>
+                        </div>
+                        <div class="mb-2">
+                            <label class="form-label mb-0 small text-muted">Nomor Kartu Keluarga (KK)</label>
+                            <input type="text" id="dhuafaSelfKk" class="form-control form-control-sm" required>
+                        </div>
+                        <div class="mb-2">
+                            <label class="form-label mb-0 small text-muted">Nomor Handphone / WA</label>
+                            <input type="text" id="dhuafaSelfHp" class="form-control form-control-sm" required>
+                        </div>
+                        <div class="mb-2">
+                            <label class="form-label mb-0 small text-muted">Alamat Rumah Lengkap</label>
+                            <textarea id="dhuafaSelfAlamat" class="form-control form-control-sm" rows="2" required></textarea>
+                        </div>
+                        <div class="mb-2">
+                            <label class="form-label mb-0 small text-muted">Tanggal Lahir</label>
+                            <input type="date" id="dhuafaSelfTglLahir" class="form-control form-control-sm" required>
+                        </div>
+                        <div class="row g-2 mb-3">
+                            <div class="col-6">
+                                <label class="form-label mb-0 small text-muted">Latitude Rumah</label>
+                                <input type="text" id="dhuafaSelfLat" class="form-control form-control-sm" readonly required>
+                            </div>
+                            <div class="col-6">
+                                <label class="form-label mb-0 small text-muted">Longitude Rumah</label>
+                                <input type="text" id="dhuafaSelfLng" class="form-control form-control-sm" readonly required>
+                            </div>
+                        </div>
+                        <div class="alert alert-warning py-1 px-2 mb-3 shadow-none" style="font-size:10px; line-height:1.3; border-radius:6px;">
+                            <i class="fas fa-location-crosshairs text-danger me-1"></i> Titik kordinat posisi rumah anda saat ini bersifat permanen demi akurasi verifikasi data radar jangkauan masjid pengampu.
+                        </div>
+                        <button type="submit" class="btn btn-success btn-sm w-100 fw-semibold">Simpan Pembaruan Profil <i class="fas fa-save ms-1"></i></button>
+                    </form>
+                </div>
+            </div>
+
+        </div>
+
+        <div id="map"></div>
+
+    </div>
+
+    <script>
+        const AUTH_API = 'auth.php';
+        const APP_API  = 'api_masjid.php';
+        const REG_API  = 'register.php';
+
+        map = L.map('map').setView([-0.0263, 109.3425], 13);
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; OpenStreetMap contributors'
+        }).addTo(map);
+
+        const layerGroupMasjid = L.layerGroup().addTo(map);
+        const layerGroupOrang  = L.layerGroup().addTo(map);
+
+        let currentUser = null;
+        let formActionTarget = 'orang';
+        let activeFormMarker = null;
+        let activeFormCircle = null;
+        let chartInstance = null;
+        let defaultRadiusBackup = 500;
+        let markerElementsMapping = {}; 
+        let masjidSelesaiLoad = [];
+
+        let isModeTambahAktif = false; 
+
+        function formatTanggalIndo(dateString) {
+            if (!dateString) return '-';
+            const parts = dateString.split('-');
+            if (parts.length !== 3) return dateString;
+            return `${parts[2]}-${parts[1]}-${parts[0]}`;
+        }
+
+        function switchTab(tabId) {
+            document.querySelectorAll('.dynamic-section').forEach(el => el.classList.add('d-none'));
+            document.querySelectorAll('.tab-btn').forEach(el => el.classList.remove('active'));
+            
+            document.getElementById(tabId).classList.remove('d-none');
+            document.getElementById('btn' + tabId.charAt(0).toUpperCase() + tabId.slice(1)).classList.add('active');
+
+            if(tabId === 'tabMasjid') formActionTarget = 'masjid';
+            if(tabId === 'tabOrang') formActionTarget = 'orang';
+
+            setTimeout(() => { map.invalidateSize(); }, 50);
+        }
+
+        document.addEventListener("DOMContentLoaded", () => {
+            fetch(`${AUTH_API}?action=check`)
+                .then(res => res.json())
+                .then(res => {
+                    if (res.success) { applySessionMode(res.data); } 
+                    else { document.getElementById('loginScreen').style.display = 'flex'; }
+                });
+        });
+
+        document.getElementById('loginForm').addEventListener('submit', (e) => {
+            e.preventDefault();
+            fetch(`${AUTH_API}?action=login`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    username: document.getElementById('loginUsername').value,
+                    password: document.getElementById('loginPassword').value
+                })
+            }).then(res => res.json()).then(res => {
+                if (res.success) { applySessionMode(res.data); } 
+                else { alert(res.message); }
+            });
+        });
+
+        function handleLogout() {
+            if (!confirm('Apakah anda yakin ingin keluar?')) return;
+            fetch(`${AUTH_API}?action=logout`, { method: 'POST' }).then(() => location.reload());
+        }
+
+        function applySessionMode(userData) {
+            currentUser = userData;
+            document.getElementById('loginScreen').style.display = 'none';
+            document.getElementById('userBadge').innerText = `Role: ${userData.role.toUpperCase()} (${userData.username})`;
+
+            if (currentUser.role === 'pengurus_masjid') {
+                document.getElementById('navTabsContainer').classList.add('d-none');
+                document.getElementById('dynamicWorkspace').classList.add('d-none');
+                document.getElementById('pengurusWorkspace').classList.remove('d-none');
+                document.getElementById('dhuafaWorkspace').classList.add('d-none');
+                initPengurusLivePreview();
+            } 
+            else if (currentUser.role === 'dhuafa') {
+                document.getElementById('navTabsContainer').classList.add('d-none');
+                document.getElementById('dynamicWorkspace').classList.add('d-none');
+                document.getElementById('pengurusWorkspace').classList.add('d-none');
+                document.getElementById('dhuafaWorkspace').classList.remove('d-none');
+                formActionTarget = 'dhuafaSelf';
+            }
+            else {
+                document.getElementById('navTabsContainer').classList.remove('d-none');
+                document.getElementById('dynamicWorkspace').classList.remove('d-none');
+                document.getElementById('pengurusWorkspace').classList.add('d-none');
+                document.getElementById('dhuafaWorkspace').classList.add('d-none');
+                
+                if (currentUser.role === 'admin') {
+                    document.getElementById('btnTabAkun').classList.remove('d-none');
+                    loadAdminChart();
+                    loadDropdownMasjidOptions();
+                    loadDropdownDhuafaOptions(); 
+                } else {
+                    document.getElementById('btnTabAkun').classList.add('d-none');
+                    switchTab('tabOrang');
+                }
+                initAdminLivePreview();
+            }
+
+            loadMasjid().then(() => {
+                loadOrang();
+            });
+
+            setTimeout(() => { map.invalidateSize(); }, 100);
+        }
+
+        function initPengurusLivePreview() {
+            const slider = document.getElementById('sliderRadiusPengurus');
+            const indicator = document.getElementById('radiusValPengurus');
+            
+            slider.addEventListener('input', function() {
+                const nilaiRadius = parseInt(this.value);
+                indicator.innerText = nilaiRadius + 'm';
+                
+                layerGroupMasjid.eachLayer(layer => {
+                    if (layer instanceof L.Circle && layer.options.masjidId === parseInt(currentUser.masjid_id)) {
+                        layer.setRadius(nilaiRadius);
+                    }
+                });
+            });
+        }
+
+        function initAdminLivePreview() {
+            const slider = document.getElementById('masjidRadius');
+            if(slider) {
+                slider.addEventListener('input', function() {
+                    document.getElementById('radiusValAdmin').innerText = this.value + 'm';
+                    if(activeFormCircle) activeFormCircle.setRadius(this.value);
+                });
+            }
+        }
+
+       function aktifkanModeTambah(tipe) {
+    isModeTambahAktif = true;
+    tipeModeTambah = tipe;
+    
+    // Mengubah cursor map menjadi tanda + (cell/crosshair)
+    const mapContainer = document.getElementById('map');
+    if (mapContainer) {
+        mapContainer.classList.add('mode-tambah-aktif');
+    }
+
+    // Menampilkan tombol Batal/Nonaktif di masing-masing form
+    if (tipe === 'masjid') {
+        const btnBatalMasjid = document.getElementById('btnBatalMasjid');
+        if (btnBatalMasjid) btnBatalMasjid.classList.remove('d-none');
+        alert("Mode tambah masjid aktif. Klik pada peta untuk menentukan lokasi masjid.");
+    } else if (tipe === 'orang') {
+        const btnBatalOrang = document.getElementById('btnBatalOrang');
+        if (btnBatalOrang) btnBatalOrang.classList.remove('d-none');
+        alert("Mode tambah warga aktif. Klik pada peta untuk menentukan lokasi warga.");
+    }
+}
+
+function batalkanModeTambah() {
+    isModeTambahAktif = false;
+    tipeModeTambah = null;
+    
+    // Mengembalikan cursor map ke normal
+    const mapContainer = document.getElementById('map');
+    if (mapContainer) {
+        mapContainer.classList.remove('mode-tambah-aktif');
+    }
+
+    // Menyembunyikan kembali semua tombol Batal
+    const btnBatalMasjid = document.getElementById('btnBatalMasjid');
+    if (btnBatalMasjid) btnBatalMasjid.classList.add('d-none');
+    
+    const btnBatalOrang = document.getElementById('btnBatalOrang');
+    if (btnBatalOrang) btnBatalOrang.classList.add('d-none');
+
+    // Reset Form & Marker Sementara
+    resetMasjidForm();
+    resetOrangForm();
+}
+
+        // FITUR OTOMATIS: REVERSE GEOCODING (CONVERT LAT LNG TO ALAMAT NYATA IRL)
+        function fetchAddressFromNominatim(type, lat, lng) {
+            const textarea = document.getElementById(`${type}Alamat`);
+            if (!textarea) return;
+
+            textarea.placeholder = "Sedang melacak alamat IRL otomatis...";
+            
+            fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${lat}&lon=${lng}`)
+                .then(res => res.json())
+                .then(data => {
+                    if (data && data.display_name) {
+                        textarea.value = data.display_name;
+                    } else {
+                        textarea.placeholder = "Klik peta/geser marker untuk memicu otomatis alamat...";
+                    }
+                })
+                .catch(err => {
+                    console.error("Gagal melacak alamat via Nominatim:", err);
+                    textarea.placeholder = "Klik peta/geser marker untuk memicu otomatis alamat...";
+                });
+        }
+
+        let currentlySelectedMarkerIds = []; 
+
+        function resetAllSelectedPulses() {
+            currentlySelectedMarkerIds.forEach(key => {
+                if (markerElementsMapping[key]) {
+                    const oldMarker = markerElementsMapping[key].marker;
+                    const oldColor = markerElementsMapping[key].originalColor;
+                    
+                    if (markerElementsMapping[key].isMasjid) {
+                        oldMarker.setIcon(L.divIcon({
+                            html: `<div style="background-color: #1a365d; color: white; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.3);"><i class="fas fa-mosque small"></i></div>`,
+                            className: '', iconSize: [30, 30], iconAnchor: [15, 15]
+                        }));
+                    } else {
+                        oldMarker.setIcon(L.divIcon({
+                            html: `<div style="background-color: ${oldColor}; color: white; border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 2px solid white; box-shadow: 0 2px 5px rgba(0,0,0,0.2);"><i class="fas fa-user small"></i></div>`,
+                            className: '', iconSize: [26, 26], iconAnchor: [13, 13]
+                        }));
+                    }
+                }
+            });
+            currentlySelectedMarkerIds = [];
+        }
+
+        function smoothFocusLocation(lat, lng, targetId, isMasjid = true, triggerIdMasjidPengampu = null) {
+            resetAllSelectedPulses();
+
+            const uniqueKey = (isMasjid ? 'masjid_' : 'orang_') + targetId;
+            if (markerElementsMapping[uniqueKey]) {
+                currentlySelectedMarkerIds.push(uniqueKey);
+                const currentMarker = markerElementsMapping[uniqueKey].marker;
+                
+                currentMarker.setIcon(L.divIcon({
+                    html: `<div class="selected-masjid-marker"><i class="fas ${isMasjid ? 'fa-mosque' : 'fa-user'}"></i></div>`,
+                    className: '', iconSize: [32, 32], iconAnchor: [16, 16]
+                }));
+                currentMarker.openPopup();
+            }
+
+            if (triggerIdMasjidPengampu) {
+                const masjidKey = 'masjid_' + triggerIdMasjidPengampu;
+                if (markerElementsMapping[masjidKey]) {
+                    currentlySelectedMarkerIds.push(masjidKey);
+                    const masjidMarker = markerElementsMapping[masjidKey].marker;
+                    masjidMarker.setIcon(L.divIcon({
+                        html: `<div class="selected-masjid-marker"><i class="fas fa-mosque"></i></div>`,
+                        className: '', iconSize: [32, 32], iconAnchor: [16, 16]
+                    }));
+                }
+            }
+
+            map.flyTo([lat, lng], 15, { animate: true, duration: 1.2 });
+        }
+
+        map.on('click', (e) => {
+            if (currentUser && currentUser.role === 'dhuafa') return; 
+            
+            if (isModeTambahAktif) {
+                setFormCoordinates(formActionTarget, e.latlng.lat, e.latlng.lng);
+            } else {
+                resetAllSelectedPulses();
+            }
+        });
+
+        if(document.getElementById('pengurusRadiusForm')) {
+            document.getElementById('pengurusRadiusForm').addEventListener('submit', (e) => {
+                e.preventDefault();
+                const masjidId = currentUser.masjid_id;
+                const radiusBaru = parseInt(document.getElementById('sliderRadiusPengurus').value);
+
+                fetch(`${APP_API}?type=masjid&action=update&id=${masjidId}`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ radius: radiusBaru })
+                })
+                .then(res => res.json())
+                .then(res => {
+                    alert(res.message);
+                    if(res.success) {
+                        defaultRadiusBackup = radiusBaru;
+                        loadMasjid().then(() => loadOrang());
+                    }
+                })
+                .catch(err => {
+                    alert("Gagal memperbarui data jangkauan radius.");
+                    console.error(err);
+                });
+            });
+        }
+
+        function resetPengurusRadius() {
+            document.getElementById('sliderRadiusPengurus').value = defaultRadiusBackup;
+            document.getElementById('radiusValPengurus').innerText = defaultRadiusBackup + 'm';
+            layerGroupMasjid.eachLayer(layer => {
+                if (layer instanceof L.Circle && layer.options.masjidId === parseInt(currentUser.masjid_id)) {
+                    layer.setRadius(defaultRadiusBackup);
+                }
+            });
+        }
+
+        function loadMasjid() {
+            let searchVal = document.getElementById('searchMasjid') ? document.getElementById('searchMasjid').value : '';
+            return fetch(`${APP_API}?type=masjid&action=getAll&search=${encodeURIComponent(searchVal)}`)
+                .then(res => res.json())
+                .then(res => {
+                    layerGroupMasjid.clearLayers();
+                    const tbody = document.getElementById('tableMasjidBody');
+                    if(tbody) tbody.innerHTML = '';
+                    if(res.data) {
+                        masjidSelesaiLoad = res.data;
+                        
+                        res.data.forEach(item => {
+                            const mInstance = L.marker([item.latitude, item.longitude], {
+                                icon: L.divIcon({
+                                    html: `<div style="background-color: #1a365d; color: white; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.3);"><i class="fas fa-mosque small"></i></div>`,
+                                    className: '', iconSize: [30, 30], iconAnchor: [15, 15]
+                                })
+                            }).addTo(layerGroupMasjid).bindPopup(`
+    <div style="min-width:220px;">
+        <b>${escapeHtml(item.nama)}</b><br>
+        <small><b>Pimpinan:</b> ${escapeHtml(item.nama_pimpinan)}</small><br>
+        <small><b>HP:</b> ${escapeHtml(item.no_hp)}</small><br>
+        <small><b>Radius:</b> ${item.radius} m</small>
+        <hr style="margin:6px 0;">
+        <small><i class="fas fa-location-dot text-danger"></i> ${escapeHtml(item.alamat)}</small>
+    </div>
+`);
+
+                            markerElementsMapping['masjid_' + item.id] = {
+                                marker: mInstance, isMasjid: true, originalColor: '#1a365d'
+                            };
+
+                            const radiusAman = parseInt(item.radius) < 100 ? 500 : parseInt(item.radius);
+
+                            L.circle([item.latitude, item.longitude], { 
+                                radius: radiusAman, color: '#2b6cb0', weight: 1.5, fillOpacity: 0.04, masjidId: parseInt(item.id) 
+                            }).addTo(layerGroupMasjid);
+
+                            if (currentUser && currentUser.role === 'pengurus_masjid' && parseInt(item.id) === parseInt(currentUser.masjid_id)) {
+                                document.getElementById('sliderRadiusPengurus').value = radiusAman;
+                                document.getElementById('radiusValPengurus').innerText = radiusAman + 'm';
+                                defaultRadiusBackup = radiusAman;
+                                setTimeout(() => { smoothFocusLocation(item.latitude, item.longitude, item.id, true); }, 400);
+                            }
+
+                            if(tbody) {
+                                const tr = document.createElement('tr');
+                                tr.innerHTML = `
+                                    <td style="cursor:pointer;" onclick='editMasjid(${JSON.stringify(item).replace(/"/g, "&quot;")})'>
+    <b>${escapeHtml(item.nama)}</b>
+</td>
+                                    <td>${radiusAman}m</td>
+                                    <td class="text-center"><span class="badge bg-secondary">${item.jumlah_diampu}</span></td>
+                                    <td class="text-end"><button class="btn btn-warning btn-xs py-0 px-1" onclick="editMasjid(${JSON.stringify(item).replace(/"/g, '&quot;')})"><i class="fas fa-edit"></i></button> <button class="btn btn-danger btn-xs py-0 px-1" onclick="deleteMasjid(${item.id})"><i class="fas fa-trash"></i></button></td>
+                                `;
+                                tbody.appendChild(tr);
+                            }
+                        });
+                    }
+                });
+        }
+
+        function loadOrang() {
+            const queryAdmin = document.getElementById('searchOrang') ? encodeURIComponent(document.getElementById('searchOrang').value) : '';
+            const queryPengurus = document.getElementById('searchOrangPengurus') ? encodeURIComponent(document.getElementById('searchOrangPengurus').value) : '';
+            const activeSearch = (currentUser && currentUser.role === 'pengurus_masjid') ? queryPengurus : queryAdmin;
+
+            fetch(`${APP_API}?type=orang&action=getAll&search=${activeSearch}`)
+                .then(res => res.json())
+                .then(res => {
+                    layerGroupOrang.clearLayers();
+                    const tbodyAdmin = document.getElementById('tableOrangBody');
+                    const tbodyPengurus = document.getElementById('tablePengurusOrangBody');
+                    
+                    if(tbodyAdmin) tbodyAdmin.innerHTML = '';
+                    if(tbodyPengurus) tbodyPengurus.innerHTML = '';
+
+                    let counterWargaPengurus = 0;
+
+                    if(res.data) {
+                        res.data.forEach(item => {
+                            const color = item.status === 'hijau' ? '#38a169' : '#e53e3e';
+                            const oInstance = L.marker([item.latitude, item.longitude], {
+                                icon: L.divIcon({
+                                    html: `<div style="background-color: ${color}; color: white; border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 2px solid white; box-shadow: 0 2px 5px rgba(0,0,0,0.2);"><i class="fas fa-user small"></i></div>`,
+                                    className: '', iconSize: [26, 26], iconAnchor: [13, 13]
+                                })
+                            }).addTo(layerGroupOrang).bindPopup(`
+    <div style="min-width:220px;">
+        <b>${escapeHtml(item.nama)}</b><br>
+        <small><b>No KK:</b> ${escapeHtml(item.no_kk)}</small><br>
+        <small><b>HP:</b> ${escapeHtml(item.no_hp)}</small><br>
+        <small><b>Pengampu:</b> ${escapeHtml(item.nama_masjid || 'Belum Tercover')}</small><br>
+        <hr style="margin:6px 0;">
+        <small><i class="fas fa-location-dot text-danger"></i> ${escapeHtml(item.alamat)}</small>
+    </div>
+`);
+
+                            markerElementsMapping['orang_' + item.id] = {
+                                marker: oInstance, isMasjid: false, originalColor: color
+                            };
+
+                            if (currentUser && currentUser.role === 'dhuafa' && parseInt(item.id) === parseInt(currentUser.dhuafa_id)) {
+                                document.getElementById('dhuafaSelfId').value = item.id;
+                                document.getElementById('dhuafaSelfNama').value = item.nama;
+                                document.getElementById('dhuafaSelfKk').value = item.no_kk;
+                                document.getElementById('dhuafaSelfHp').value = item.no_hp;
+                                document.getElementById('dhuafaSelfAlamat').value = item.alamat;
+                                document.getElementById('dhuafaSelfTglLahir').value = item.tgl_lahir;
+                                document.getElementById('dhuafaSelfLat').value = item.latitude;
+                                document.getElementById('dhuafaSelfLng').value = item.longitude;
+
+                                const badge = document.getElementById('dhuafaStatusBadge');
+                                if (item.status === 'hijau') {
+                                    badge.className = "badge bg-success";
+                                    badge.innerText = "Telah Diampu";
+                                    document.getElementById('dhuafaInfoMasjid').innerText = item.nama_masjid;
+                                    document.getElementById('dhuafaInfoJarak').innerText = parseFloat(item.jarak_ke_masjid).toFixed(0) + ' meter';
+                                } else {
+                                    badge.className = "badge bg-danger";
+                                    badge.innerText = "Belum Diampu";
+                                    document.getElementById('dhuafaInfoMasjid').innerText = "Di luar jangkauan radar";
+                                    document.getElementById('dhuafaInfoJarak').innerText = "-";
+                                }
+
+                                if(!activeFormMarker) {
+                                    setFormCoordinates('dhuafaSelf', item.latitude, item.longitude);
+                                }
+
+                                setTimeout(() => {
+                                    smoothFocusLocation(item.latitude, item.longitude, item.id, false, item.masjid_pengampu_id);
+                                }, 500);
+                            }
+
+                            if(tbodyAdmin) {
+                                const trAdmin = document.createElement('tr');
+                                trAdmin.innerHTML = `
+                                    <td style="cursor:pointer;" onclick='editOrang(${JSON.stringify(item).replace(/"/g, "&quot;")})'>
+    <b>${escapeHtml(item.nama)}</b>
+</td>
+                                    <td class="text-muted small">${escapeHtml(item.no_kk)}</td>
+                                    <td><span class="badge ${item.status==='hijau'?'bg-success':'bg-danger'}">${item.status==='hijau'?'Telah Diampu':'Belum Diampu'}</span></td>
+                                    <td class="text-end"><button class="btn btn-warning btn-xs py-0 px-1" onclick="editOrang(${JSON.stringify(item).replace(/"/g, '&quot;')})"><i class="fas fa-edit"></i></button> <button class="btn btn-danger btn-xs py-0 px-1" onclick="deleteOrang(${item.id})"><i class="fas fa-trash"></i></button></td>
+                                `;
+                                tbodyAdmin.appendChild(trAdmin);
+                            }
+
+                            if (currentUser && currentUser.role === 'pengurus_masjid' && parseInt(item.masjid_pengampu_id) === parseInt(currentUser.masjid_id)) {
+                                counterWargaPengurus++;
+                                const jarakFormatted = item.jarak_ke_masjid ? parseFloat(item.jarak_ke_masjid).toFixed(0) + 'm' : '-';
+                                
+                                if(tbodyPengurus) {
+                                    const trPengurus = document.createElement('tr');
+                                    trPengurus.innerHTML = `
+                                        <td style="cursor:pointer;" onclick="smoothFocusLocation(${item.latitude}, ${item.longitude}, ${item.id}, false)">
+                                            <span class="text-primary fw-bold d-block mb-0">${escapeHtml(item.nama)}</span>
+                                            <small class="text-muted d-block text-truncate" style="max-width: 140px;">KK: ${escapeHtml(item.no_kk)}</small>
+                                        </td>
+                                        <td>
+                                            <div class="mb-0 text-dark fw-semibold small"><i class="fa-brands fa-whatsapp text-success me-1"></i>${escapeHtml(item.no_hp)}</div>
+                                            <div class="text-muted lh-sm" style="font-size:11px; max-width: 190px;">${escapeHtml(item.alamat)} <br><span class="text-secondary">Lahir: ${escapeHtml(formatTanggalIndo(item.tgl_lahir))}</span></div>
+                                        </td>
+                                        <td class="text-end text-nowrap">
+                                            <span class="badge bg-light text-dark border">${jarakFormatted}</span>
+                                        </td>
+                                    `;
+                                    tbodyPengurus.appendChild(trPengurus);
+                                }
+                            }
+                        });
+                    }
+                    if(document.getElementById('totalWargaPengurus')) {
+                        document.getElementById('totalWargaPengurus').innerText = counterWargaPengurus + ' Orang';
+                    }
+                });
+        }
+
+        function setFormCoordinates(type, lat, lng) {
+            if (activeFormMarker) map.removeLayer(activeFormMarker);
+            if (activeFormCircle) map.removeLayer(activeFormCircle);
+
+            const latInput = document.getElementById(`${type}Lat`);
+            const lngInput = document.getElementById(`${type}Lng`);
+            if(latInput && lngInput) {
+                latInput.value = lat;
+                lngInput.value = lng;
+            }
+
+            if(currentUser && currentUser.role === 'dhuafa') {
+                map.panTo([lat, lng]);
+                return;
+            }
+
+            activeFormMarker = L.marker([lat, lng], { draggable: true }).addTo(map);
+            
+            // Pemicu Pengisian Alamat Nyata Otomatis Saat Pertama Kali Ditandai di Peta
+            fetchAddressFromNominatim(type, lat, lng);
+
+            activeFormMarker.on('dragend', function (event) {
+                const pos = event.target.getLatLng();
+                if(latInput && lngInput) {
+                    latInput.value = pos.lat;
+                    lngInput.value = pos.lng;
+                }
+                
+                // Pemicu Pengisian Alamat Nyata Otomatis Saat Penanda Digeser (Drag)
+                fetchAddressFromNominatim(type, pos.lat, pos.lng);
+
+                if(type === 'masjid') renderCircleRadiusForm(pos.lat, pos.lng);
+            });
+
+            if (type === 'masjid') { renderCircleRadiusForm(lat, lng); }
+        }
+
+        function renderCircleRadiusForm(lat, lng) {
+            if (activeFormCircle) map.removeLayer(activeFormCircle);
+            const sliderAdmin = document.getElementById('masjidRadius');
+            let radVal = sliderAdmin ? parseInt(sliderAdmin.value) : 500;
+            if (radVal < 100) radVal = 100; 
+
+            activeFormCircle = L.circle([lat, lng], { radius: radVal, color: '#1a365d', fillOpacity: 0.15 }).addTo(map);
+        }
+
+        function handleRoleSelectionChange() {
+            const role = document.getElementById('regRole').value;
+            const masjidWrapper = document.getElementById('regMasjidSelectWrapper');
+            const dhuafaWrapper = document.getElementById('regDhuafaSelectWrapper');
+
+            if (role === 'pengurus_masjid') {
+                masjidWrapper.classList.remove('d-none');
+                dhuafaWrapper.classList.add('d-none');
+                document.getElementById('regDhuafaId').value = ""; 
+            } else if (role === 'dhuafa') {
+                masjidWrapper.classList.add('d-none');
+                dhuafaWrapper.classList.remove('d-none');
+                document.getElementById('regMasjidId').value = ""; 
+            }
+        }
+
+        function loadDropdownMasjidOptions() {
+            fetch(`${APP_API}?type=masjid&action=getAll`).then(res => res.json()).then(res => {
+                const select = document.getElementById('regMasjidId');
+                if(!select) return;
+                select.innerHTML = '<option value="">-- Pilih Masjid Pengampu --</option>';
+                if(res.data) res.data.forEach(m => select.innerHTML += `<option value="${m.id}">${escapeHtml(m.nama)}</option>`);
+            });
+        }
+
+        function loadDropdownDhuafaOptions() {
+            fetch(`${APP_API}?type=orang&action=getAll`).then(res => res.json()).then(res => {
+                const select = document.getElementById('regDhuafaId');
+                if(!select) return;
+                select.innerHTML = '<option value="">-- Pilih Nama Warga Dhuafa --</option>';
+                if(res.data) res.data.forEach(o => select.innerHTML += `<option value="${o.id}">${escapeHtml(o.nama)} (KK: ${escapeHtml(o.no_kk)})</option>`);
+            });
+        }
+
+        if(document.getElementById('registerAccountForm')) {
+            document.getElementById('registerAccountForm').addEventListener('submit', (e) => {
+                e.preventDefault();
+                fetch(REG_API, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        role: document.getElementById('regRole').value,
+                        masjid_id: document.getElementById('regMasjidId').value,
+                        dhuafa_id: document.getElementById('regDhuafaId').value, 
+                        username: document.getElementById('regUsername').value,
+                        password: document.getElementById('regPassword').value
+                    })
+                }).then(res => res.json()).then(res => {
+                    alert(res.message); 
+                    if(res.success) { 
+                        document.getElementById('registerAccountForm').reset(); 
+                        handleRoleSelectionChange(); 
+                        loadDropdownDhuafaOptions(); 
+                    }
+                });
+            });
+        }
+
+        if(document.getElementById('dhuafaSelfForm')) {
+            document.getElementById('dhuafaSelfForm').addEventListener('submit', (e) => {
+                e.preventDefault();
+                const id = document.getElementById('dhuafaSelfId').value;
+                const payload = {
+                    nama: document.getElementById('dhuafaSelfNama').value, 
+                    no_kk: document.getElementById('dhuafaSelfKk').value,
+                    alamat: document.getElementById('dhuafaSelfAlamat').value, 
+                    tgl_lahir: document.getElementById('dhuafaSelfTglLahir').value,
+                    no_hp: document.getElementById('dhuafaSelfHp').value,
+                    latitude: parseFloat(document.getElementById('dhuafaSelfLat').value), 
+                    longitude: parseFloat(document.getElementById('dhuafaSelfLng').value)
+                };
+                
+                const url = id ? `${APP_API}?type=orang&action=update&id=${id}` : `${APP_API}?type=orang&action=create`;
+                
+                fetch(url, { 
+                    method: 'POST', 
+                    headers: { 'Content-Type': 'application/json' }, 
+                    body: JSON.stringify(payload) 
+                })
+                .then(res => res.json())
+                .then(res => {
+                    alert(res.message); 
+                    if(res.success) { 
+                        loadMasjid().then(() => loadOrang()); 
+                    }
+                });
+            });
+        }
+
+        if(document.getElementById('masjidForm')) {
+            document.getElementById('masjidForm').addEventListener('submit', (e) => {
+                e.preventDefault();
+                const id = document.getElementById('masjidId').value;
+                const payload = {
+                    nama: document.getElementById('masjidNama').value, alamat: document.getElementById('masjidAlamat').value,
+                    nama_pimpinan: document.getElementById('masjidPimpinan').value, no_hp: document.getElementById('masjidHp').value,
+                    radius: parseInt(document.getElementById('masjidRadius').value),
+                    latitude: parseFloat(document.getElementById('masjidLat').value), longitude: parseFloat(document.getElementById('masjidLng').value)
+                };
+                const url = id ? `${APP_API}?type=masjid&action=update&id=${id}` : `${APP_API}?type=masjid&action=create`;
+                fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) })
+                .then(res => res.json()).then(res => {
+                    alert(res.message); if(res.success) { resetMasjidForm(); loadMasjid().then(() => loadOrang()); loadAdminChart(); loadDropdownMasjidOptions(); isModeTambahAktif = false; }
+                });
+            });
+        }
+
+        if(document.getElementById('orangForm')) {
+            document.getElementById('orangForm').addEventListener('submit', (e) => {
+                e.preventDefault();
+                const id = document.getElementById('orangId').value;
+                const payload = {
+                    nama: document.getElementById('orangNama').value, no_kk: document.getElementById('orangKk').value,
+                    alamat: document.getElementById('orangAlamat').value, tgl_lahir: document.getElementById('orangTglLahir').value,
+                    no_hp: document.getElementById('orangHp').value,
+                    latitude: parseFloat(document.getElementById('orangLat').value), longitude: parseFloat(document.getElementById('orangLng').value)
+                };
+                const url = id ? `${APP_API}?type=orang&action=update&id=${id}` : `${APP_API}?type=orang&action=create`;
+                fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) })
+                .then(res => res.json()).then(res => {
+                    alert(res.message); if(res.success) { resetOrangForm(); loadMasjid().then(() => loadOrang()); loadAdminChart(); loadDropdownDhuafaOptions(); isModeTambahAktif = false; }
+                });
+            });
+        }
+
+        function editMasjid(item) {
+            batalkanModeTambah();
+             
+            switchTab('tabMasjid');
+            document.getElementById('masjidId').value = item.id;
+            document.getElementById('masjidNama').value = item.nama;
+            document.getElementById('masjidAlamat').value = item.alamat;
+            document.getElementById('masjidPimpinan').value = item.nama_pimpinan;
+            document.getElementById('masjidHp').value = item.no_hp;
+            
+            const radiusEditAman = parseInt(item.radius) < 100 ? 500 : parseInt(item.radius);
+            document.getElementById('masjidRadius').value = radiusEditAman;
+            document.getElementById('radiusValAdmin').innerText = radiusEditAman + 'm';
+            
+            setFormCoordinates('masjid', item.latitude, item.longitude);
+            smoothFocusLocation(item.latitude, item.longitude, item.id, true);
+        }
+
+        function editOrang(item) {
+            batalkanModeTambah();
+            switchTab('tabOrang');
+            document.getElementById('orangId').value = item.id;
+            document.getElementById('orangNama').value = item.nama;
+            document.getElementById('orangKk').value = item.no_kk;
+            document.getElementById('orangAlamat').value = item.alamat;
+            document.getElementById('orangTglLahir').value = item.tgl_lahir;
+            document.getElementById('orangHp').value = item.no_hp;
+            setFormCoordinates('orang', item.latitude, item.longitude);
+            smoothFocusLocation(item.latitude, item.longitude, item.id, false, item.masjid_pengampu_id);
+        }
+
+        function deleteMasjid(id) {
+            if(!confirm('Hapus masjid ini?')) return;
+            fetch(`${APP_API}?type=masjid&action=delete&id=${id}`, { method: 'POST' }).then(() => { loadMasjid().then(() => loadOrang()); loadAdminChart(); loadDropdownMasjidOptions(); });
+        }
+
+        function deleteOrang(id) {
+            if(!confirm('Hapus data warga dhuafa ini?')) return;
+            fetch(`${APP_API}?type=orang&action=delete&id=${id}`, { method: 'POST' }).then(() => { loadMasjid().then(() => loadOrang()); loadAdminChart(); loadDropdownDhuafaOptions(); });
+        }
+
+        function loadAdminChart() {
+            const chartCanvas = document.getElementById('adminChart');
+            if(!chartCanvas) return;
+            fetch(`${APP_API}?type=summary`).then(res => res.json()).then(res => {
+                if(res.data) {
+                    document.getElementById('statMasjid').innerText = res.data.total_masjid;
+                    document.getElementById('statDhuafa').innerText = res.data.total_dhuafa;
+                    const ctx = chartCanvas.getContext('2d');
+                    if (chartInstance) chartInstance.destroy();
+                    chartInstance = new Chart(ctx, {
+                        type: 'doughnut',
+                        data: {
+                            labels: ['Telah Diampu', 'Belum Diampu'],
+                            datasets: [{ data: [res.data.terampu, res.data.belum_terampu], backgroundColor: ['#38a169', '#e53e3e'], borderWidth: 1 }]
+                        },
+                        options: { responsive: true, plugins: { legend: { position: 'bottom', labels: { boxWidth: 12, font: { size: 11 } } } } }
+                    });
+                }
+            });
+        }
+
+function resetMasjidForm() {
+            document.getElementById('masjidForm').reset(); 
+            document.getElementById('masjidId').value = ''; 
+            document.getElementById('radiusValAdmin').innerText = "500m";
+            document.getElementById('map').classList.remove('mode-tambah-aktif');
+            isModeTambahAktif = false;
+            if(activeFormMarker) map.removeLayer(activeFormMarker); 
+            if(activeFormCircle) map.removeLayer(activeFormCircle);
+        }
+
+        function resetOrangForm() {
+            document.getElementById('orangForm').reset(); 
+            document.getElementById('orangId').value = '';
+            document.getElementById('map').classList.remove('mode-tambah-aktif');
+            isModeTambahAktif = false;
+            if(activeFormMarker) map.removeLayer(activeFormMarker);
+        }
+
+        // ============================================================
+        // 📍 KODE BARU LANGKAH 2 (Fungsi Mode Tambah & Batal Tambah)
+        // ============================================================
+        function aktifkanModeTambah(type) {
+            isModeTambahAktif = true;
+            formActionTarget = type;
+            document.getElementById('map').classList.add('mode-tambah-aktif');
+            
+            if (type === 'masjid') {
+                resetMasjidForm();
+                alert("Mode Tambah AKTIF: Silakan KLIK pada peta untuk menentukan titik koordinat MASJID baru.");
+            } else {
+                resetOrangForm();
+                alert("Mode Tambah AKTIF: Silakan KLIK pada peta untuk menentukan titik koordinat DHUAFA baru.");
+            }
+        }
+
+        function batalkanModeTambah() {
+            isModeTambahAktif = false;
+            formActionTarget = null;
+            document.getElementById('map').classList.remove('mode-tambah-aktif');
+            if (activeFormMarker) map.removeLayer(activeFormMarker);
+            if (activeFormCircle) map.removeLayer(activeFormCircle);
+            resetMasjidForm();
+            resetOrangForm();
+        }
+
+        // ============================================================
+        // 📍 KODE BARU LANGKAH 3 (Event Listener Submit / Tombol Simpan)
+        // ============================================================
+        document.getElementById('masjidForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+            const id = document.getElementById('masjidId').value;
+            const lat = document.getElementById('masjidLat').value; // Sesuai id input masjidLat Anda
+            const lng = document.getElementById('masjidLng').value; // Sesuai id input masjidLng Anda
+
+            if (!lat || !lng) {
+                alert("Silakan tentukan lokasi koordinat masjid di peta terlebih dahulu!");
+                return;
+            }
+
+            const payload = {
+                nama: document.getElementById('masjidNama').value,
+                alamat: document.getElementById('masjidAlamat').value,
+                nama_pimpinan: document.getElementById('masjidPimpinan').value,
+                no_hp: document.getElementById('masjidHp').value,
+                radius: parseInt(document.getElementById('masjidRadius').value),
+                latitude: parseFloat(lat),
+                longitude: parseFloat(lng)
+            };
+
+            const action = id ? 'update' : 'create';
+            const url = id ? `${APP_API}?type=masjid&action=${action}&id=${id}` : `${APP_API}?type=masjid&action=${action}`;
+
+            fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) })
+            .then(res => res.json())
+            .then(res => {
+                alert(res.message);
+                if (res.success) {
+                    batalkanModeTambah();
+                    loadMasjid().then(() => loadOrang());
+                }
+            }).catch(err => alert("Gagal menyimpan data masjid."));
+        });
+
+        document.getElementById('orangForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+            const id = document.getElementById('orangId').value;
+            const lat = document.getElementById('orangLat').value; // Sesuai id input orangLat Anda
+            const lng = document.getElementById('orangLng').value; // Sesuai id input orangLng Anda
+
+            if (!lat || !lng) {
+                alert("Silakan tentukan lokasi koordinat warga di peta terlebih dahulu!");
+                return;
+            }
+
+            const payload = {
+                nama: document.getElementById('orangNama').value,
+                no_kk: document.getElementById('orangKk').value,
+                no_hp: document.getElementById('orangHp').value,
+                alamat: document.getElementById('orangAlamat').value,
+                tgl_lahir: document.getElementById('orangTglLahir').value,
+                latitude: parseFloat(lat),
+                longitude: parseFloat(lng)
+            };
+
+            const action = id ? 'update' : 'create';
+            const url = id ? `${APP_API}?type=orang&action=${action}&id=${id}` : `${APP_API}?type=orang&action=${action}`;
+
+            fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) })
+            .then(res => res.json())
+            .then(res => {
+                alert(res.message);
+                if (res.success) {
+                    batalkanModeTambah();
+                    loadMasjid().then(() => loadOrang());
+                }
+            }).catch(err => alert("Gagal menyimpan data warga."));
+        });
+
+        function escapeHtml(text) {
+            if (!text) return '';
+            return text.toString().replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\"/g, "&quot;").replace(/'/g, "&#039;");
+        }
+
+        if(document.getElementById('searchMasjid')) document.getElementById('searchMasjid').addEventListener('input', () => loadMasjid());
+        if(document.getElementById('searchOrang')) document.getElementById('searchOrang').addEventListener('input', () => loadOrang());
+        if(document.getElementById('searchOrangPengurus')) document.getElementById('searchOrangPengurus').addEventListener('input', () => loadOrang());
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/register.php b/register.php
new file mode 100644
index 0000000..fd88016
--- /dev/null
+++ b/register.php
@@ -0,0 +1,54 @@
+<?php
+// register.php
+require_once 'config.php';
+
+// Membaca input JSON dari client/frontend
+$input = json_decode(file_get_contents('php://input'), true);
+
+$username  = trim($input['username'] ?? '');
+$password  = trim($input['password'] ?? '');
+$role      = trim($input['role'] ?? ''); // 'pengurus_masjid' atau 'dhuafa'
+$masjid_id = !empty($input['masjid_id']) ? intval($input['masjid_id']) : null;
+$dhuafa_id = !empty($input['dhuafa_id']) ? intval($input['dhuafa_id']) : null; // Tambahan Fitur
+
+if (empty($username) || empty($password) || empty($role)) {
+    sendResponse(false, 'Username, password, dan role wajib diisi.');
+}
+
+if (!in_array($role, ['pengurus_masjid', 'dhuafa'])) {
+    sendResponse(false, 'Role tidak valid. Hanya bisa mendaftarkan pengurus_masjid atau dhuafa.');
+}
+
+// Proteksi Khusus Pengurus Masjid
+if ($role === 'pengurus_masjid' && empty($masjid_id)) {
+    sendResponse(false, 'Pendaftaran pengurus masjid wajib menyertakan ID Masjid yang diampu.');
+}
+
+// Proteksi Khusus Kaum Dhuafa
+if ($role === 'dhuafa' && empty($dhuafa_id)) {
+    sendResponse(false, 'Pendaftaran akun dhuafa wajib ditautkan ke data warga dhuafa yang valid.');
+}
+
+// Cek apakah username sudah terpakai
+$check = $conn->prepare("SELECT id FROM users WHERE username = ?");
+$check->bind_param("s", $username);
+$check->execute();
+if ($check->get_result()->num_rows > 0) {
+    sendResponse(false, 'Username sudah terdaftar, gunakan nama lain.');
+}
+$check->close();
+
+// Enkripsi password dengan standar PHP Bcrypt
+$password_hash = password_hash($password, PASSWORD_DEFAULT);
+
+// Daftarkan user ke database dengan menyertakan nilai masjid_id atau dhuafa_id yang sesuai
+$stmt = $conn->prepare("INSERT INTO users (username, password, role, masjid_id, dhuafa_id) VALUES (?, ?, ?, ?, ?)");
+$stmt->bind_param("sssii", $username, $password_hash, $role, $masjid_id, $dhuafa_id);
+
+if ($stmt->execute()) {
+    sendResponse(true, 'Registrasi akun baru berhasil disimpan.');
+} else {
+    sendResponse(false, 'Gagal mendaftarkan akun baru: ' . $conn->error);
+}
+$stmt->close();
+?>
\ No newline at end of file
diff --git a/reset_password.php b/reset_password.php
new file mode 100644
index 0000000..9f71089
--- /dev/null
+++ b/reset_password.php
@@ -0,0 +1,21 @@
+<?php
+// reset_password.php
+require_once 'config.php';
+
+$username = 'admin';
+$password_baru = 'yaraaqmal';
+
+// Mengubah teks polos menjadi hash Bcrypt yang sah di mata PHP
+$password_hash = password_hash($password_baru, PASSWORD_DEFAULT);
+
+$stmt = $conn->prepare("UPDATE users SET password = ? WHERE username = ?");
+$stmt->bind_param("ss", $password_hash, $username);
+
+if ($stmt->execute()) {
+    echo "<h3>✅ Password admin berhasil di-hash & diperbarui menjadi: <b>$password_baru</b></h3>";
+    echo "<p>Silakan hapus file <b>reset_password.php</b> ini demi keamanan, lalu coba login kembali di halaman utama.</p>";
+} else {
+    echo "❌ Gagal mereset password: " . $conn->error;
+}
+$stmt->close();
+?>
\ No newline at end of file