From f5043b13d7945a528776e4ebc302f11cf5d54706 Mon Sep 17 00:00:00 2001
From: raditarahman5-cloud <raditarahman5@gmail.com>
Date: Sat, 13 Jun 2026 01:07:22 +0700
Subject: [PATCH] fix: hapus gembok login agar bisa simpan data langsung

---
 Draft_Dokumen_Tugas.md |   2 +-
 api/api.php            |   2 +-
 infra/script.js        | 130 +++++++++++++++++++--------------------
 sosial/script.js       | 136 ++++++++++++++++++++---------------------
 warga/script.js        | 130 +++++++++++++++++++--------------------
 5 files changed, 200 insertions(+), 200 deletions(-)

diff --git a/Draft_Dokumen_Tugas.md b/Draft_Dokumen_Tugas.md
index ab7c326..6d4e898 100644
--- a/Draft_Dokumen_Tugas.md
+++ b/Draft_Dokumen_Tugas.md
@@ -47,7 +47,7 @@ Berdasarkan screenshot form pengumpulan tugas yang Anda berikan, berikut adalah
 
 **4. Kebutuhan Non-Fungsional (Non-Functional Requirements)**
    - **Ketersediaan (Availability):** Aplikasi dapat diakses 24/7 melalui browser web.
-   - **Keamanan (Security):** Akses modul Infrastruktur dan Sosial membutuhkan otentikasi login yang valid.
+   - **Keamanan (Security):** Sistem dirancang terbuka (tanpa otentikasi login yang ketat) untuk memudahkan masyarakat dan petugas lapangan dalam menginput data secara langsung.
    - **Performa:** Peta dan marker harus dapat dimuat dalam waktu kurang dari 5 detik pada koneksi internet standar.
 
 ---
diff --git a/api/api.php b/api/api.php
index f1b76e7..bf0728b 100644
--- a/api/api.php
+++ b/api/api.php
@@ -28,7 +28,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
     $allowed_sosial_actions = ['simpan_warga', 'simpan_masjid', 'simpan_pelaporan'];
     $allowed_sosial_tables = ['warga', 'rumah_ibadah', 'pelaporan'];
 
-    $is_authorized = false;
+    $is_authorized = true; // Bypassed for demo/user request
     
     if (in_array($role, ['admin', 'admin_infra', 'admin_sosial'])) {
         $is_authorized = true;
diff --git a/infra/script.js b/infra/script.js
index 701a59c..e053348 100644
--- a/infra/script.js
+++ b/infra/script.js
@@ -36,9 +36,9 @@ var currentRadius = 500;
 var cachedData = null;
 
 var drawControl = new L.Control.Draw({
-    draw: { 
-        marker:false, circle:false, circlemarker:false, 
-        polyline: { shapeOptions: { color: 'blue', weight: 4 } }, 
+    draw: {
+        marker: false, circle: false, circlemarker: false,
+        polyline: { shapeOptions: { color: 'blue', weight: 4 } },
         polygon: { shapeOptions: { color: 'red' } },
         rectangle: false
     },
@@ -47,7 +47,7 @@ var drawControl = new L.Control.Draw({
 map.addControl(drawControl);
 
 // Locate Control
-var locateBtn = L.control({position: 'topleft'});
+var locateBtn = L.control({ position: 'topleft' });
 locateBtn.onAdd = function (map) {
     var div = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
     div.style.backgroundColor = 'white';
@@ -59,13 +59,13 @@ locateBtn.onAdd = function (map) {
     div.style.justifyContent = 'center';
     div.innerHTML = '<i class="fas fa-crosshairs" style="font-size:1.2rem; color:#2563eb;"></i>';
     div.title = "Lokasi Anda Saat Ini";
-    div.onclick = function(){ map.locate({setView: true, maxZoom: 16}); }
+    div.onclick = function () { map.locate({ setView: true, maxZoom: 16 }); }
     return div;
 };
 locateBtn.addTo(map);
 
-map.on('locationfound', function(e) {
-    L.circleMarker(e.latlng, {radius: 8, fillColor: '#3b82f6', color: '#fff', weight: 3, fillOpacity: 1}).addTo(map).bindPopup("Lokasi Anda").openPopup();
+map.on('locationfound', function (e) {
+    L.circleMarker(e.latlng, { radius: 8, fillColor: '#3b82f6', color: '#fff', weight: 3, fillOpacity: 1 }).addTo(map).bindPopup("Lokasi Anda").openPopup();
 });
 
 // Event Draw
@@ -80,21 +80,21 @@ map.on(L.Draw.Event.CREATED, function (e) {
     if (type === 'polyline') {
         document.getElementById('jenis').value = 'jalan';
         toggleForm();
-        
+
         var coords = layer.getLatLngs();
         document.getElementById('jalan_coords').value = JSON.stringify(coords);
-        
+
         // Calculate Length automatically
         var length = 0;
         for (var i = 0; i < coords.length - 1; i++) {
             length += coords[i].distanceTo(coords[i + 1]);
         }
         document.getElementById('panjang_jalan').value = length.toFixed(2);
-        
+
     } else if (type === 'polygon') {
         document.getElementById('jenis').value = 'parsil';
         toggleForm();
-        
+
         var coords = layer.getLatLngs()[0];
         document.getElementById('parsil_coords').value = JSON.stringify(coords);
     }
@@ -103,15 +103,15 @@ map.on(L.Draw.Event.CREATED, function (e) {
 map.on(L.Draw.Event.EDITED, function (e) {
     var layers = e.layers;
     layers.eachLayer(function (layer) {
-        if(layer.db_id && layer.db_tipe) {
+        if (layer.db_id && layer.db_tipe) {
             var coords = (layer.db_tipe === 'parsil') ? layer.getLatLngs()[0] : layer.getLatLngs();
             var fd = new FormData();
             fd.append('action', 'update_koordinat');
             fd.append('id', layer.db_id);
             fd.append('tipe', layer.db_tipe);
             fd.append('koordinat', JSON.stringify(coords));
-            
-            if(layer.db_tipe === 'jalan') {
+
+            if (layer.db_tipe === 'jalan') {
                 var length = 0;
                 for (var i = 0; i < coords.length - 1; i++) {
                     length += coords[i].distanceTo(coords[i + 1]);
@@ -121,13 +121,13 @@ map.on(L.Draw.Event.EDITED, function (e) {
             fetch('../api/api.php', { method: 'POST', body: fd });
         }
     });
-    Swal.fire({icon: 'success', title: 'Tersimpan', text: 'Perubahan bentuk berhasil disimpan!', timer: 1500, showConfirmButton: false});
+    Swal.fire({ icon: 'success', title: 'Tersimpan', text: 'Perubahan bentuk berhasil disimpan!', timer: 1500, showConfirmButton: false });
 });
 
 map.on(L.Draw.Event.DELETED, function (e) {
     var layers = e.layers;
     layers.eachLayer(function (layer) {
-        if(layer.db_id && layer.db_tipe) {
+        if (layer.db_id && layer.db_tipe) {
             var fd = new FormData();
             fd.append('action', 'hapus_data');
             fd.append('id', layer.db_id);
@@ -135,20 +135,20 @@ map.on(L.Draw.Event.DELETED, function (e) {
             fetch('../api/api.php', { method: 'POST', body: fd });
         }
     });
-    Swal.fire({icon: 'success', title: 'Terhapus', text: 'Data berhasil dihapus dari peta!', timer: 1500, showConfirmButton: false});
+    Swal.fire({ icon: 'success', title: 'Terhapus', text: 'Data berhasil dihapus dari peta!', timer: 1500, showConfirmButton: false });
 });
 
 function toggleSidebar() { document.getElementById('sidebar').classList.toggle('active'); }
 
 function toggleRightPanel() {
     var panel = document.getElementById('panelInput');
-    if(panel) panel.classList.toggle('collapsed');
+    if (panel) panel.classList.toggle('collapsed');
 }
 
 function filterData() {
     var input = document.getElementById('searchInput').value.toLowerCase();
     var cards = document.getElementsByClassName('item-data');
-    if(input.length > 0) document.getElementById('sidebar').classList.add('active');
+    if (input.length > 0) document.getElementById('sidebar').classList.add('active');
     for (var i = 0; i < cards.length; i++) {
         cards[i].style.display = cards[i].getAttribute('data-nama').includes(input) ? "" : "none";
     }
@@ -157,7 +157,7 @@ function filterData() {
 function changeRadius(v) {
     currentRadius = parseInt(v);
     document.getElementById('radiusVal').innerText = v;
-    if(cachedData) renderMap(cachedData);
+    if (cachedData) renderMap(cachedData);
 }
 
 var prevReportCount = -1;
@@ -166,7 +166,7 @@ function loadData(isPolling = false) {
         .then(r => r.json())
         .then(data => {
             cachedData = data;
-            
+
             // Logika Notifikasi Bubble
             if (prevReportCount !== -1 && data.pelaporan.length > prevReportCount) {
                 var newCount = data.pelaporan.length - prevReportCount;
@@ -181,10 +181,10 @@ function loadData(isPolling = false) {
                 });
             }
             prevReportCount = data.pelaporan.length;
-            
+
             var badge = document.getElementById('notifBadge');
-            if(badge) {
-                if(data.pelaporan.length > 0) {
+            if (badge) {
+                if (data.pelaporan.length > 0) {
                     badge.style.display = 'block';
                     badge.innerText = data.pelaporan.length;
                 } else {
@@ -208,7 +208,7 @@ function loadData(isPolling = false) {
 // Auto-poll every 10 seconds
 setInterval(() => {
     // Only poll if not currently editing (edit_id is 0)
-    if(document.getElementById('edit_id') && document.getElementById('edit_id').value === "0") {
+    if (document.getElementById('edit_id') && document.getElementById('edit_id').value === "0") {
         loadData(true);
     }
 }, 10000);
@@ -238,12 +238,12 @@ function renderSidebar(data) {
     if (!window.dashboardType || window.dashboardType === 'sosial' || window.dashboardType === 'admin') {
         // Pelaporan
         html += `<div class="section-title" style="color:#ef4444">🚨 Laporan Darurat</div>`;
-        if(data.pelaporan.length === 0) html += `<small style="color:#666">Belum ada laporan</small>`;
+        if (data.pelaporan.length === 0) html += `<small style="color:#666">Belum ada laporan</small>`;
         data.pelaporan.forEach(p => {
             html += `<div class="card item-data" data-nama="${p.nama_pelapor.toLowerCase()} ${p.isi_laporan.toLowerCase()}">
                 <div style="display:flex; justify-content:space-between">
                     <span onclick="fokus(${p.latitude}, ${p.longitude})" style="cursor:pointer">
-                        <b>${p.nama_pelapor}</b><small><i class="far fa-clock"></i> ${p.waktu}</small><br><span>${p.isi_laporan.substring(0,40)}...</span>
+                        <b>${p.nama_pelapor}</b><small><i class="far fa-clock"></i> ${p.waktu}</small><br><span>${p.isi_laporan.substring(0, 40)}...</span>
                     </span>
                     <div>
                         <button class="btn-save" style="padding:4px 8px; font-size:0.75rem; width:auto; margin-bottom:5px;" onclick="editData('pelaporan', ${p.id})">Edit</button><br>
@@ -313,9 +313,9 @@ function renderSidebar(data) {
         html += `<div class="section-title">🛣️ Manajemen Jalan</div>`;
         data.jalan.forEach(j => {
             var color = '#ef4444'; // default red
-            if(j.status_jalan === 'Nasional') color = '#ef4444'; 
-            else if(j.status_jalan === 'Provinsi') color = '#eab308'; 
-            else if(j.status_jalan === 'Kabupaten') color = '#22c55e';
+            if (j.status_jalan === 'Nasional') color = '#ef4444';
+            else if (j.status_jalan === 'Provinsi') color = '#eab308';
+            else if (j.status_jalan === 'Kabupaten') color = '#22c55e';
             html += `<div class="card item-data" data-nama="${j.nama_jalan.toLowerCase()}">
                 <div style="display:flex; justify-content:space-between">
                     <span>
@@ -373,10 +373,10 @@ function renderMap(data) {
                     <button class="btn-del" style="padding:4px 8px; font-size:0.75rem; width:auto;" onclick="hapusData(${m.id}, 'masjid')">Hapus</button>
                 </div>`;
             var faClass = 'fa-mosque';
-            if(m.jenis === 'Gereja') faClass = 'fa-church';
-            else if(m.jenis === 'Vihara') faClass = 'fa-vihara';
-            else if(m.jenis === 'Pura') faClass = 'fa-torii-gate';
-            
+            if (m.jenis === 'Gereja') faClass = 'fa-church';
+            else if (m.jenis === 'Vihara') faClass = 'fa-vihara';
+            else if (m.jenis === 'Pura') faClass = 'fa-torii-gate';
+
             // Buat custom marker bentuk map pin dengan icon sesuai jenis
             var masjidIcon = L.divIcon({
                 html: `
@@ -408,7 +408,7 @@ function renderMap(data) {
             });
 
             L.marker([m.latitude, m.longitude], { icon: masjidIcon, draggable: true }).addTo(layerMasjid).bindPopup(popup)
-             .on('dragend', function(e){ updateMarkerCoord(m.id, 'masjid', e.target.getLatLng()); });
+                .on('dragend', function (e) { updateMarkerCoord(m.id, 'masjid', e.target.getLatLng()); });
             L.circle([m.latitude, m.longitude], {
                 radius: currentRadius, color: '#2563eb', fillOpacity: 0.1, weight: 1
             }).addTo(layerMasjidRadius);
@@ -454,7 +454,7 @@ function renderMap(data) {
             L.marker([p.latitude, p.longitude], {
                 icon: pelaporanIcon, draggable: true
             }).addTo(layerPelaporan).bindPopup(popup)
-             .on('dragend', function(e){ updateMarkerCoord(p.id, 'pelaporan', e.target.getLatLng()); });
+                .on('dragend', function (e) { updateMarkerCoord(p.id, 'pelaporan', e.target.getLatLng()); });
         });
     }
 
@@ -464,7 +464,7 @@ function renderMap(data) {
             var is24 = s.kategori === '24jam';
             var iconUrl = is24 ? 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png' : 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png';
             var targetLayer = is24 ? layerSpbu24 : layerSpbuNon24;
-            
+
             var popup = `<b>⛽ ${s.nama}</b><br>Kategori: ${s.kategori === '24jam' ? 'Buka 24 Jam' : 'Tidak 24 Jam'}<br>
                 <div style="margin-top:10px; text-align:center;">
                     <button class="btn-save" style="padding:4px 8px; font-size:0.75rem; width:auto; margin-right:5px;" onclick="editData('spbu', ${s.id})">Edit</button>
@@ -473,7 +473,7 @@ function renderMap(data) {
             L.marker([s.latitude, s.longitude], {
                 icon: L.icon({ iconUrl: iconUrl, iconSize: [25, 41], iconAnchor: [12, 41] }), draggable: true
             }).addTo(targetLayer).bindPopup(popup)
-             .on('dragend', function(e){ updateMarkerCoord(s.id, 'spbu', e.target.getLatLng()); });
+                .on('dragend', function (e) { updateMarkerCoord(s.id, 'spbu', e.target.getLatLng()); });
         });
     }
 
@@ -482,7 +482,7 @@ function renderMap(data) {
         data.warga.forEach(w => {
             var pos = L.latLng(w.latitude, w.longitude);
             var isCovered = lokMasjid.some(m => pos.distanceTo(m) <= currentRadius);
-            
+
             // Buat elemen point berbentuk map pin (teardrop) dengan ikon rumah di dalamnya
             var color = isCovered ? '#16a34a' : '#ef4444'; // Hijau aman, merah di luar
             var houseIcon = L.divIcon({
@@ -521,7 +521,7 @@ function renderMap(data) {
                 iconAnchor: [15, 36], // Titik jangkar di ujung bawah pin
                 popupAnchor: [0, -36]
             });
-            
+
             var isPenerima = (w.histori_bantuan && w.histori_bantuan.trim().length > 0) ? 'Ya' : 'Belum';
             var txtPendidikan = w.pendidikan ? w.pendidikan : 'Tidak diketahui';
             var txtPenyakit = (w.riwayat_penyakit && w.riwayat_penyakit.trim().length > 0) ? w.riwayat_penyakit : 'Tidak ada';
@@ -546,8 +546,8 @@ function renderMap(data) {
                     </div>
                 </div>`;
             L.marker(pos, { icon: houseIcon, draggable: true })
-             .addTo(layerWarga).bindPopup(popup)
-             .on('dragend', function(e){ updateMarkerCoord(w.id, 'warga', e.target.getLatLng()); });
+                .addTo(layerWarga).bindPopup(popup)
+                .on('dragend', function (e) { updateMarkerCoord(w.id, 'warga', e.target.getLatLng()); });
         });
     }
 
@@ -556,16 +556,16 @@ function renderMap(data) {
         data.jalan.forEach(j => {
             var coords = JSON.parse(j.koordinat);
             var color = '#ef4444'; // default red
-            if(j.status_jalan === 'Nasional') color = '#ef4444'; // Merah
-            else if(j.status_jalan === 'Provinsi') color = '#eab308'; // Kuning
-            else if(j.status_jalan === 'Kabupaten') color = '#22c55e'; // Hijau
+            if (j.status_jalan === 'Nasional') color = '#ef4444'; // Merah
+            else if (j.status_jalan === 'Provinsi') color = '#eab308'; // Kuning
+            else if (j.status_jalan === 'Kabupaten') color = '#22c55e'; // Hijau
 
             var popup = `<b>🛣️ ${j.nama_jalan}</b><br>Status: ${j.status_jalan}<br>Panjang: ${j.panjang_m} meter<br>
                 <div style="margin-top:10px; text-align:center;">
                     <button class="btn-save" style="padding:4px 8px; font-size:0.75rem; width:auto; margin-right:5px;" onclick="editData('jalan', ${j.id})">Edit</button>
                     <button class="btn-del" style="padding:4px 8px; font-size:0.75rem; width:auto;" onclick="hapusData(${j.id}, 'jalan')">Hapus</button>
                 </div>`;
-            var polyline = L.polyline(coords, {color: color, weight: 6}).addTo(layerLines).bindPopup(popup);
+            var polyline = L.polyline(coords, { color: color, weight: 6 }).addTo(layerLines).bindPopup(popup);
             polyline.db_id = j.id;
             polyline.db_tipe = 'jalan';
             drawnItems.addLayer(polyline);
@@ -579,7 +579,7 @@ function renderMap(data) {
                     <button class="btn-save" style="padding:4px 8px; font-size:0.75rem; width:auto; margin-right:5px;" onclick="editData('parsil', ${p.id})">Edit</button>
                     <button class="btn-del" style="padding:4px 8px; font-size:0.75rem; width:auto;" onclick="hapusData(${p.id}, 'parsil')">Hapus</button>
                 </div>`;
-            var polygon = L.polygon(coords, {color: '#2563eb', fillOpacity: 0.4}).addTo(layerPolygons).bindPopup(popup);
+            var polygon = L.polygon(coords, { color: '#2563eb', fillOpacity: 0.4 }).addTo(layerPolygons).bindPopup(popup);
             polygon.db_id = p.id;
             polygon.db_tipe = 'parsil';
             drawnItems.addLayer(polygon);
@@ -622,12 +622,12 @@ function simpanData() {
         fd.append('status_hak', document.getElementById('status_hak').value);
         fd.append('koordinat', document.getElementById('parsil_coords').value);
     } else {
-        if(j !== 'geometri' && (!lat || !lng) && document.getElementById('edit_id').value === "0") { 
-            Swal.fire({icon: 'warning', title: 'Oops...', text: 'Silakan klik titik koordinat di peta terlebih dahulu!'}); 
-            return; 
+        if (j !== 'geometri' && (!lat || !lng) && document.getElementById('edit_id').value === "0") {
+            Swal.fire({ icon: 'warning', title: 'Oops...', text: 'Silakan klik titik koordinat di peta terlebih dahulu!' });
+            return;
         }
         fd.append('lat', lat); fd.append('lng', lng);
-        
+
         if (j === 'pelaporan') {
             fd.append('nama', document.getElementById('nama_pelapor').value);
             fd.append('laporan', document.getElementById('isi_laporan').value);
@@ -651,15 +651,15 @@ function simpanData() {
         }
     }
 
-    Swal.fire({ title: 'Menyimpan...', allowOutsideClick: false, didOpen: () => { Swal.showLoading() }});
+    Swal.fire({ title: 'Menyimpan...', allowOutsideClick: false, didOpen: () => { Swal.showLoading() } });
     fetch('../api/api.php', { method: 'POST', body: fd })
         .then(res => res.json())
         .then((res) => {
             if (res.status === 'error') {
                 Swal.fire('Gagal!', res.message, 'error');
             } else {
-                Swal.fire({icon: 'success', title: 'Berhasil', text: 'Data berhasil disimpan!', timer: 1500, showConfirmButton: false})
-                .then(() => location.reload());
+                Swal.fire({ icon: 'success', title: 'Berhasil', text: 'Data berhasil disimpan!', timer: 1500, showConfirmButton: false })
+                    .then(() => location.reload());
             }
         });
 }
@@ -670,7 +670,7 @@ function hapusData(id, tipe) {
         showCancelButton: true, confirmButtonColor: '#ef4444', cancelButtonColor: '#94a3b8', confirmButtonText: 'Ya, Hapus!'
     }).then((result) => {
         if (result.isConfirmed) {
-            Swal.fire({ title: 'Menghapus...', allowOutsideClick: false, didOpen: () => { Swal.showLoading() }});
+            Swal.fire({ title: 'Menghapus...', allowOutsideClick: false, didOpen: () => { Swal.showLoading() } });
             var fd = new FormData();
             fd.append('action', 'hapus_data');
             fd.append('id', id);
@@ -700,16 +700,16 @@ function batalEdit() {
 
 function editData(tipe, id) {
     var item = cachedData[tipe].find(x => x.id == id);
-    if(!item) return;
+    if (!item) return;
 
     document.getElementById('edit_id').value = id;
     document.getElementById('jenis').value = tipe;
     toggleForm();
-    
-    var panel = document.getElementById('panelInput');
-    if(panel) panel.classList.remove('collapsed');
 
-    if(tipe == 'warga') {
+    var panel = document.getElementById('panelInput');
+    if (panel) panel.classList.remove('collapsed');
+
+    if (tipe == 'warga') {
         document.getElementById('nama_kk').value = item.nama;
         document.getElementById('jumlah_kk').value = item.jumlah_kk;
         document.getElementById('tanggal_lahir').value = item.tanggal_lahir || '';
@@ -739,7 +739,7 @@ function editData(tipe, id) {
         document.getElementById('parsil_coords').value = item.koordinat;
     }
 
-    if(item.latitude && item.longitude) {
+    if (item.latitude && item.longitude) {
         document.getElementById('lat').value = item.latitude;
         document.getElementById('lng').value = item.longitude;
         fokus(item.latitude, item.longitude);
@@ -762,10 +762,10 @@ function updateMarkerCoord(id, tipe, latlng) {
     fetch('../api/api.php', { method: 'POST', body: fd })
         .then(() => {
             Swal.fire({
-                icon: 'success', 
-                title: 'Tersimpan', 
-                text: 'Posisi titik berhasil digeser!', 
-                timer: 1500, 
+                icon: 'success',
+                title: 'Tersimpan',
+                text: 'Posisi titik berhasil digeser!',
+                timer: 1500,
                 showConfirmButton: false,
                 toast: true,
                 position: 'top-end'
diff --git a/sosial/script.js b/sosial/script.js
index 803089c..228d09d 100644
--- a/sosial/script.js
+++ b/sosial/script.js
@@ -36,9 +36,9 @@ var currentRadius = 500;
 var cachedData = null;
 
 var drawControl = new L.Control.Draw({
-    draw: { 
-        marker:false, circle:false, circlemarker:false, 
-        polyline: { shapeOptions: { color: 'blue', weight: 4 } }, 
+    draw: {
+        marker: false, circle: false, circlemarker: false,
+        polyline: { shapeOptions: { color: 'blue', weight: 4 } },
         polygon: { shapeOptions: { color: 'red' } },
         rectangle: false
     },
@@ -47,7 +47,7 @@ var drawControl = new L.Control.Draw({
 map.addControl(drawControl);
 
 // Locate Control
-var locateBtn = L.control({position: 'topleft'});
+var locateBtn = L.control({ position: 'topleft' });
 locateBtn.onAdd = function (map) {
     var div = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
     div.style.backgroundColor = 'white';
@@ -59,13 +59,13 @@ locateBtn.onAdd = function (map) {
     div.style.justifyContent = 'center';
     div.innerHTML = '<i class="fas fa-crosshairs" style="font-size:1.2rem; color:#2563eb;"></i>';
     div.title = "Lokasi Anda Saat Ini";
-    div.onclick = function(){ map.locate({setView: true, maxZoom: 16}); }
+    div.onclick = function () { map.locate({ setView: true, maxZoom: 16 }); }
     return div;
 };
 locateBtn.addTo(map);
 
-map.on('locationfound', function(e) {
-    L.circleMarker(e.latlng, {radius: 8, fillColor: '#3b82f6', color: '#fff', weight: 3, fillOpacity: 1}).addTo(map).bindPopup("Lokasi Anda").openPopup();
+map.on('locationfound', function (e) {
+    L.circleMarker(e.latlng, { radius: 8, fillColor: '#3b82f6', color: '#fff', weight: 3, fillOpacity: 1 }).addTo(map).bindPopup("Lokasi Anda").openPopup();
 });
 
 // Event Draw
@@ -80,21 +80,21 @@ map.on(L.Draw.Event.CREATED, function (e) {
     if (type === 'polyline') {
         document.getElementById('jenis').value = 'jalan';
         toggleForm();
-        
+
         var coords = layer.getLatLngs();
         document.getElementById('jalan_coords').value = JSON.stringify(coords);
-        
+
         // Calculate Length automatically
         var length = 0;
         for (var i = 0; i < coords.length - 1; i++) {
             length += coords[i].distanceTo(coords[i + 1]);
         }
         document.getElementById('panjang_jalan').value = length.toFixed(2);
-        
+
     } else if (type === 'polygon') {
         document.getElementById('jenis').value = 'parsil';
         toggleForm();
-        
+
         var coords = layer.getLatLngs()[0];
         document.getElementById('parsil_coords').value = JSON.stringify(coords);
     }
@@ -103,15 +103,15 @@ map.on(L.Draw.Event.CREATED, function (e) {
 map.on(L.Draw.Event.EDITED, function (e) {
     var layers = e.layers;
     layers.eachLayer(function (layer) {
-        if(layer.db_id && layer.db_tipe) {
+        if (layer.db_id && layer.db_tipe) {
             var coords = (layer.db_tipe === 'parsil') ? layer.getLatLngs()[0] : layer.getLatLngs();
             var fd = new FormData();
             fd.append('action', 'update_koordinat');
             fd.append('id', layer.db_id);
             fd.append('tipe', layer.db_tipe);
             fd.append('koordinat', JSON.stringify(coords));
-            
-            if(layer.db_tipe === 'jalan') {
+
+            if (layer.db_tipe === 'jalan') {
                 var length = 0;
                 for (var i = 0; i < coords.length - 1; i++) {
                     length += coords[i].distanceTo(coords[i + 1]);
@@ -121,13 +121,13 @@ map.on(L.Draw.Event.EDITED, function (e) {
             fetch('../api/api.php', { method: 'POST', body: fd });
         }
     });
-    Swal.fire({icon: 'success', title: 'Tersimpan', text: 'Perubahan bentuk berhasil disimpan!', timer: 1500, showConfirmButton: false});
+    Swal.fire({ icon: 'success', title: 'Tersimpan', text: 'Perubahan bentuk berhasil disimpan!', timer: 1500, showConfirmButton: false });
 });
 
 map.on(L.Draw.Event.DELETED, function (e) {
     var layers = e.layers;
     layers.eachLayer(function (layer) {
-        if(layer.db_id && layer.db_tipe) {
+        if (layer.db_id && layer.db_tipe) {
             var fd = new FormData();
             fd.append('action', 'hapus_data');
             fd.append('id', layer.db_id);
@@ -135,20 +135,20 @@ map.on(L.Draw.Event.DELETED, function (e) {
             fetch('../api/api.php', { method: 'POST', body: fd });
         }
     });
-    Swal.fire({icon: 'success', title: 'Terhapus', text: 'Data berhasil dihapus dari peta!', timer: 1500, showConfirmButton: false});
+    Swal.fire({ icon: 'success', title: 'Terhapus', text: 'Data berhasil dihapus dari peta!', timer: 1500, showConfirmButton: false });
 });
 
 function toggleSidebar() { document.getElementById('sidebar').classList.toggle('active'); }
 
 function toggleRightPanel() {
     var panel = document.getElementById('panelInput');
-    if(panel) panel.classList.toggle('collapsed');
+    if (panel) panel.classList.toggle('collapsed');
 }
 
 function filterData() {
     var input = document.getElementById('searchInput').value.toLowerCase();
     var cards = document.getElementsByClassName('item-data');
-    if(input.length > 0) document.getElementById('sidebar').classList.add('active');
+    if (input.length > 0) document.getElementById('sidebar').classList.add('active');
     for (var i = 0; i < cards.length; i++) {
         cards[i].style.display = cards[i].getAttribute('data-nama').includes(input) ? "" : "none";
     }
@@ -157,7 +157,7 @@ function filterData() {
 function changeRadius(v) {
     currentRadius = parseInt(v);
     document.getElementById('radiusVal').innerText = v;
-    if(cachedData) {
+    if (cachedData) {
         renderMap(cachedData);
         renderSidebar(cachedData);
     }
@@ -169,7 +169,7 @@ function loadData(isPolling = false) {
         .then(r => r.json())
         .then(data => {
             cachedData = data;
-            
+
             // Logika Notifikasi Bubble
             if (prevReportCount !== -1 && data.pelaporan.length > prevReportCount) {
                 var newCount = data.pelaporan.length - prevReportCount;
@@ -184,10 +184,10 @@ function loadData(isPolling = false) {
                 });
             }
             prevReportCount = data.pelaporan.length;
-            
+
             var badge = document.getElementById('notifBadge');
-            if(badge) {
-                if(data.pelaporan.length > 0) {
+            if (badge) {
+                if (data.pelaporan.length > 0) {
                     badge.style.display = 'block';
                     badge.innerText = data.pelaporan.length;
                 } else {
@@ -211,7 +211,7 @@ function loadData(isPolling = false) {
 // Auto-poll every 10 seconds
 setInterval(() => {
     // Only poll if not currently editing (edit_id is 0)
-    if(document.getElementById('edit_id') && document.getElementById('edit_id').value === "0") {
+    if (document.getElementById('edit_id') && document.getElementById('edit_id').value === "0") {
         loadData(true);
     }
 }, 10000);
@@ -241,12 +241,12 @@ function renderSidebar(data) {
     if (!window.dashboardType || window.dashboardType === 'sosial' || window.dashboardType === 'admin') {
         // Pelaporan
         html += `<div class="section-title" style="color:#ef4444">🚨 Laporan Darurat</div>`;
-        if(data.pelaporan.length === 0) html += `<small style="color:#666">Belum ada laporan</small>`;
+        if (data.pelaporan.length === 0) html += `<small style="color:#666">Belum ada laporan</small>`;
         data.pelaporan.forEach(p => {
             html += `<div class="card item-data" data-nama="${p.nama_pelapor.toLowerCase()} ${p.isi_laporan.toLowerCase()}">
                 <div style="display:flex; justify-content:space-between">
                     <span onclick="fokus(${p.latitude}, ${p.longitude})" style="cursor:pointer">
-                        <b>${p.nama_pelapor}</b><small><i class="far fa-clock"></i> ${p.waktu}</small><br><span>${p.isi_laporan.substring(0,40)}...</span>
+                        <b>${p.nama_pelapor}</b><small><i class="far fa-clock"></i> ${p.waktu}</small><br><span>${p.isi_laporan.substring(0, 40)}...</span>
                     </span>
                     <div>
                         <button class="btn-save" style="padding:4px 8px; font-size:0.75rem; width:auto; margin-bottom:5px;" onclick="editData('pelaporan', ${p.id})">Edit</button><br>
@@ -262,8 +262,8 @@ function renderSidebar(data) {
             var pos = L.latLng(w.latitude, w.longitude);
             var nearbyFacilities = data.masjid.map(m => {
                 return { nama: m.nama, distance: pos.distanceTo(L.latLng(m.latitude, m.longitude)) };
-            }).filter(f => f.distance <= currentRadius).sort((a,b) => a.distance - b.distance);
-            
+            }).filter(f => f.distance <= currentRadius).sort((a, b) => a.distance - b.distance);
+
             var facilityInfo = nearbyFacilities.length > 0 ? `<br><small style="color:#16a34a"><i class="fas fa-check-circle"></i> Jangkauan: ${nearbyFacilities[0].nama} (${Math.round(nearbyFacilities[0].distance)}m)</small>` : `<br><small style="color:#ef4444"><i class="fas fa-exclamation-triangle"></i> Jauh dari fasilitas / bantuan</small>`;
 
             html += `<div class="card item-data" data-nama="${w.nama.toLowerCase()}">
@@ -324,9 +324,9 @@ function renderSidebar(data) {
         html += `<div class="section-title">🛣️ Manajemen Jalan</div>`;
         data.jalan.forEach(j => {
             var color = '#ef4444'; // default red
-            if(j.status_jalan === 'Nasional') color = '#ef4444'; 
-            else if(j.status_jalan === 'Provinsi') color = '#eab308'; 
-            else if(j.status_jalan === 'Kabupaten') color = '#22c55e';
+            if (j.status_jalan === 'Nasional') color = '#ef4444';
+            else if (j.status_jalan === 'Provinsi') color = '#eab308';
+            else if (j.status_jalan === 'Kabupaten') color = '#22c55e';
             html += `<div class="card item-data" data-nama="${j.nama_jalan.toLowerCase()}">
                 <div style="display:flex; justify-content:space-between">
                     <span>
@@ -384,10 +384,10 @@ function renderMap(data) {
                     <button class="btn-del" style="padding:4px 8px; font-size:0.75rem; width:auto;" onclick="hapusData(${m.id}, 'masjid')">Hapus</button>
                 </div>`;
             var faClass = 'fa-mosque';
-            if(m.jenis === 'Gereja') faClass = 'fa-church';
-            else if(m.jenis === 'Vihara') faClass = 'fa-vihara';
-            else if(m.jenis === 'Pura') faClass = 'fa-torii-gate';
-            
+            if (m.jenis === 'Gereja') faClass = 'fa-church';
+            else if (m.jenis === 'Vihara') faClass = 'fa-vihara';
+            else if (m.jenis === 'Pura') faClass = 'fa-torii-gate';
+
             // Buat custom marker bentuk map pin dengan icon sesuai jenis
             var masjidIcon = L.divIcon({
                 html: `
@@ -419,7 +419,7 @@ function renderMap(data) {
             });
 
             L.marker([m.latitude, m.longitude], { icon: masjidIcon, draggable: true }).addTo(layerMasjid).bindPopup(popup)
-             .on('dragend', function(e){ updateMarkerCoord(m.id, 'masjid', e.target.getLatLng()); });
+                .on('dragend', function (e) { updateMarkerCoord(m.id, 'masjid', e.target.getLatLng()); });
             L.circle([m.latitude, m.longitude], {
                 radius: currentRadius, color: '#2563eb', fillOpacity: 0.1, weight: 1
             }).addTo(layerMasjidRadius);
@@ -465,7 +465,7 @@ function renderMap(data) {
             L.marker([p.latitude, p.longitude], {
                 icon: pelaporanIcon, draggable: true
             }).addTo(layerPelaporan).bindPopup(popup)
-             .on('dragend', function(e){ updateMarkerCoord(p.id, 'pelaporan', e.target.getLatLng()); });
+                .on('dragend', function (e) { updateMarkerCoord(p.id, 'pelaporan', e.target.getLatLng()); });
         });
     }
 
@@ -475,7 +475,7 @@ function renderMap(data) {
             var is24 = s.kategori === '24jam';
             var iconUrl = is24 ? 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png' : 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png';
             var targetLayer = is24 ? layerSpbu24 : layerSpbuNon24;
-            
+
             var popup = `<b>⛽ ${s.nama}</b><br>Kategori: ${s.kategori === '24jam' ? 'Buka 24 Jam' : 'Tidak 24 Jam'}<br>
                 <div style="margin-top:10px; text-align:center;">
                     <button class="btn-save" style="padding:4px 8px; font-size:0.75rem; width:auto; margin-right:5px;" onclick="editData('spbu', ${s.id})">Edit</button>
@@ -484,7 +484,7 @@ function renderMap(data) {
             L.marker([s.latitude, s.longitude], {
                 icon: L.icon({ iconUrl: iconUrl, iconSize: [25, 41], iconAnchor: [12, 41] }), draggable: true
             }).addTo(targetLayer).bindPopup(popup)
-             .on('dragend', function(e){ updateMarkerCoord(s.id, 'spbu', e.target.getLatLng()); });
+                .on('dragend', function (e) { updateMarkerCoord(s.id, 'spbu', e.target.getLatLng()); });
         });
     }
 
@@ -494,11 +494,11 @@ function renderMap(data) {
             var pos = L.latLng(w.latitude, w.longitude);
             var nearbyFacilities = data.masjid.map(m => {
                 return { nama: m.nama, distance: pos.distanceTo(L.latLng(m.latitude, m.longitude)) };
-            }).filter(f => f.distance <= currentRadius).sort((a,b) => a.distance - b.distance);
+            }).filter(f => f.distance <= currentRadius).sort((a, b) => a.distance - b.distance);
             var isCovered = nearbyFacilities.length > 0;
             var nearestName = isCovered ? nearbyFacilities[0].nama : '-';
             var nearestDist = isCovered ? Math.round(nearbyFacilities[0].distance) + 'm' : '-';
-            
+
             // Buat elemen point berbentuk map pin (teardrop) dengan ikon rumah di dalamnya
             var color = isCovered ? '#16a34a' : '#ef4444'; // Hijau aman, merah di luar
             var houseIcon = L.divIcon({
@@ -537,7 +537,7 @@ function renderMap(data) {
                 iconAnchor: [15, 36], // Titik jangkar di ujung bawah pin
                 popupAnchor: [0, -36]
             });
-            
+
             var isPenerima = (w.status_bantuan === 'Sudah') ? 'Ya' : 'Belum';
             var txtPendidikan = w.pendidikan ? w.pendidikan : 'Tidak diketahui';
             var txtPenyakit = (w.riwayat_penyakit && w.riwayat_penyakit.trim().length > 0) ? w.riwayat_penyakit : 'Tidak ada';
@@ -563,8 +563,8 @@ function renderMap(data) {
                     </div>
                 </div>`;
             L.marker(pos, { icon: houseIcon, draggable: true })
-             .addTo(layerWarga).bindPopup(popup)
-             .on('dragend', function(e){ updateMarkerCoord(w.id, 'warga', e.target.getLatLng()); });
+                .addTo(layerWarga).bindPopup(popup)
+                .on('dragend', function (e) { updateMarkerCoord(w.id, 'warga', e.target.getLatLng()); });
         });
     }
 
@@ -573,16 +573,16 @@ function renderMap(data) {
         data.jalan.forEach(j => {
             var coords = JSON.parse(j.koordinat);
             var color = '#ef4444'; // default red
-            if(j.status_jalan === 'Nasional') color = '#ef4444'; // Merah
-            else if(j.status_jalan === 'Provinsi') color = '#eab308'; // Kuning
-            else if(j.status_jalan === 'Kabupaten') color = '#22c55e'; // Hijau
+            if (j.status_jalan === 'Nasional') color = '#ef4444'; // Merah
+            else if (j.status_jalan === 'Provinsi') color = '#eab308'; // Kuning
+            else if (j.status_jalan === 'Kabupaten') color = '#22c55e'; // Hijau
 
             var popup = `<b>🛣️ ${j.nama_jalan}</b><br>Status: ${j.status_jalan}<br>Panjang: ${j.panjang_m} meter<br>
                 <div style="margin-top:10px; text-align:center;">
                     <button class="btn-save" style="padding:4px 8px; font-size:0.75rem; width:auto; margin-right:5px;" onclick="editData('jalan', ${j.id})">Edit</button>
                     <button class="btn-del" style="padding:4px 8px; font-size:0.75rem; width:auto;" onclick="hapusData(${j.id}, 'jalan')">Hapus</button>
                 </div>`;
-            var polyline = L.polyline(coords, {color: color, weight: 6}).addTo(layerLines).bindPopup(popup);
+            var polyline = L.polyline(coords, { color: color, weight: 6 }).addTo(layerLines).bindPopup(popup);
             polyline.db_id = j.id;
             polyline.db_tipe = 'jalan';
             drawnItems.addLayer(polyline);
@@ -596,7 +596,7 @@ function renderMap(data) {
                     <button class="btn-save" style="padding:4px 8px; font-size:0.75rem; width:auto; margin-right:5px;" onclick="editData('parsil', ${p.id})">Edit</button>
                     <button class="btn-del" style="padding:4px 8px; font-size:0.75rem; width:auto;" onclick="hapusData(${p.id}, 'parsil')">Hapus</button>
                 </div>`;
-            var polygon = L.polygon(coords, {color: '#2563eb', fillOpacity: 0.4}).addTo(layerPolygons).bindPopup(popup);
+            var polygon = L.polygon(coords, { color: '#2563eb', fillOpacity: 0.4 }).addTo(layerPolygons).bindPopup(popup);
             polygon.db_id = p.id;
             polygon.db_tipe = 'parsil';
             drawnItems.addLayer(polygon);
@@ -639,12 +639,12 @@ function simpanData() {
         fd.append('status_hak', document.getElementById('status_hak').value);
         fd.append('koordinat', document.getElementById('parsil_coords').value);
     } else {
-        if(j !== 'geometri' && (!lat || !lng) && document.getElementById('edit_id').value === "0") { 
-            Swal.fire({icon: 'warning', title: 'Oops...', text: 'Silakan klik titik koordinat di peta terlebih dahulu!'}); 
-            return; 
+        if (j !== 'geometri' && (!lat || !lng) && document.getElementById('edit_id').value === "0") {
+            Swal.fire({ icon: 'warning', title: 'Oops...', text: 'Silakan klik titik koordinat di peta terlebih dahulu!' });
+            return;
         }
         fd.append('lat', lat); fd.append('lng', lng);
-        
+
         if (j === 'pelaporan') {
             fd.append('nama', document.getElementById('nama_pelapor').value);
             fd.append('laporan', document.getElementById('isi_laporan').value);
@@ -669,15 +669,15 @@ function simpanData() {
         }
     }
 
-    Swal.fire({ title: 'Menyimpan...', allowOutsideClick: false, didOpen: () => { Swal.showLoading() }});
+    Swal.fire({ title: 'Menyimpan...', allowOutsideClick: false, didOpen: () => { Swal.showLoading() } });
     fetch('../api/api.php', { method: 'POST', body: fd })
         .then(res => res.json())
         .then((res) => {
             if (res.status === 'error') {
                 Swal.fire('Gagal!', res.message, 'error');
             } else {
-                Swal.fire({icon: 'success', title: 'Berhasil', text: 'Data berhasil disimpan!', timer: 1500, showConfirmButton: false})
-                .then(() => location.reload());
+                Swal.fire({ icon: 'success', title: 'Berhasil', text: 'Data berhasil disimpan!', timer: 1500, showConfirmButton: false })
+                    .then(() => location.reload());
             }
         });
 }
@@ -688,7 +688,7 @@ function hapusData(id, tipe) {
         showCancelButton: true, confirmButtonColor: '#ef4444', cancelButtonColor: '#94a3b8', confirmButtonText: 'Ya, Hapus!'
     }).then((result) => {
         if (result.isConfirmed) {
-            Swal.fire({ title: 'Menghapus...', allowOutsideClick: false, didOpen: () => { Swal.showLoading() }});
+            Swal.fire({ title: 'Menghapus...', allowOutsideClick: false, didOpen: () => { Swal.showLoading() } });
             var fd = new FormData();
             fd.append('action', 'hapus_data');
             fd.append('id', id);
@@ -718,16 +718,16 @@ function batalEdit() {
 
 function editData(tipe, id) {
     var item = cachedData[tipe].find(x => x.id == id);
-    if(!item) return;
+    if (!item) return;
 
     document.getElementById('edit_id').value = id;
     document.getElementById('jenis').value = tipe;
     toggleForm();
-    
-    var panel = document.getElementById('panelInput');
-    if(panel) panel.classList.remove('collapsed');
 
-    if(tipe == 'warga') {
+    var panel = document.getElementById('panelInput');
+    if (panel) panel.classList.remove('collapsed');
+
+    if (tipe == 'warga') {
         document.getElementById('nama_kk').value = item.nama;
         document.getElementById('jumlah_kk').value = item.jumlah_kk;
         document.getElementById('tanggal_lahir').value = item.tanggal_lahir || '';
@@ -758,7 +758,7 @@ function editData(tipe, id) {
         document.getElementById('parsil_coords').value = item.koordinat;
     }
 
-    if(item.latitude && item.longitude) {
+    if (item.latitude && item.longitude) {
         document.getElementById('lat').value = item.latitude;
         document.getElementById('lng').value = item.longitude;
         fokus(item.latitude, item.longitude);
@@ -781,10 +781,10 @@ function updateMarkerCoord(id, tipe, latlng) {
     fetch('../api/api.php', { method: 'POST', body: fd })
         .then(() => {
             Swal.fire({
-                icon: 'success', 
-                title: 'Tersimpan', 
-                text: 'Posisi titik berhasil digeser!', 
-                timer: 1500, 
+                icon: 'success',
+                title: 'Tersimpan',
+                text: 'Posisi titik berhasil digeser!',
+                timer: 1500,
                 showConfirmButton: false,
                 toast: true,
                 position: 'top-end'
diff --git a/warga/script.js b/warga/script.js
index ff9b945..caebb0b 100644
--- a/warga/script.js
+++ b/warga/script.js
@@ -36,9 +36,9 @@ var currentRadius = 500;
 var cachedData = null;
 
 var drawControl = new L.Control.Draw({
-    draw: { 
-        marker:false, circle:false, circlemarker:false, 
-        polyline: { shapeOptions: { color: 'blue', weight: 4 } }, 
+    draw: {
+        marker: false, circle: false, circlemarker: false,
+        polyline: { shapeOptions: { color: 'blue', weight: 4 } },
         polygon: { shapeOptions: { color: 'red' } },
         rectangle: false
     },
@@ -47,7 +47,7 @@ var drawControl = new L.Control.Draw({
 map.addControl(drawControl);
 
 // Locate Control
-var locateBtn = L.control({position: 'topleft'});
+var locateBtn = L.control({ position: 'topleft' });
 locateBtn.onAdd = function (map) {
     var div = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
     div.style.backgroundColor = 'white';
@@ -59,13 +59,13 @@ locateBtn.onAdd = function (map) {
     div.style.justifyContent = 'center';
     div.innerHTML = '<i class="fas fa-crosshairs" style="font-size:1.2rem; color:#2563eb;"></i>';
     div.title = "Lokasi Anda Saat Ini";
-    div.onclick = function(){ map.locate({setView: true, maxZoom: 16}); }
+    div.onclick = function () { map.locate({ setView: true, maxZoom: 16 }); }
     return div;
 };
 locateBtn.addTo(map);
 
-map.on('locationfound', function(e) {
-    L.circleMarker(e.latlng, {radius: 8, fillColor: '#3b82f6', color: '#fff', weight: 3, fillOpacity: 1}).addTo(map).bindPopup("Lokasi Anda").openPopup();
+map.on('locationfound', function (e) {
+    L.circleMarker(e.latlng, { radius: 8, fillColor: '#3b82f6', color: '#fff', weight: 3, fillOpacity: 1 }).addTo(map).bindPopup("Lokasi Anda").openPopup();
 });
 
 // Event Draw
@@ -80,21 +80,21 @@ map.on(L.Draw.Event.CREATED, function (e) {
     if (type === 'polyline') {
         document.getElementById('jenis').value = 'jalan';
         toggleForm();
-        
+
         var coords = layer.getLatLngs();
         document.getElementById('jalan_coords').value = JSON.stringify(coords);
-        
+
         // Calculate Length automatically
         var length = 0;
         for (var i = 0; i < coords.length - 1; i++) {
             length += coords[i].distanceTo(coords[i + 1]);
         }
         document.getElementById('panjang_jalan').value = length.toFixed(2);
-        
+
     } else if (type === 'polygon') {
         document.getElementById('jenis').value = 'parsil';
         toggleForm();
-        
+
         var coords = layer.getLatLngs()[0];
         document.getElementById('parsil_coords').value = JSON.stringify(coords);
     }
@@ -103,15 +103,15 @@ map.on(L.Draw.Event.CREATED, function (e) {
 map.on(L.Draw.Event.EDITED, function (e) {
     var layers = e.layers;
     layers.eachLayer(function (layer) {
-        if(layer.db_id && layer.db_tipe) {
+        if (layer.db_id && layer.db_tipe) {
             var coords = (layer.db_tipe === 'parsil') ? layer.getLatLngs()[0] : layer.getLatLngs();
             var fd = new FormData();
             fd.append('action', 'update_koordinat');
             fd.append('id', layer.db_id);
             fd.append('tipe', layer.db_tipe);
             fd.append('koordinat', JSON.stringify(coords));
-            
-            if(layer.db_tipe === 'jalan') {
+
+            if (layer.db_tipe === 'jalan') {
                 var length = 0;
                 for (var i = 0; i < coords.length - 1; i++) {
                     length += coords[i].distanceTo(coords[i + 1]);
@@ -121,13 +121,13 @@ map.on(L.Draw.Event.EDITED, function (e) {
             fetch('../api/api.php', { method: 'POST', body: fd });
         }
     });
-    Swal.fire({icon: 'success', title: 'Tersimpan', text: 'Perubahan bentuk berhasil disimpan!', timer: 1500, showConfirmButton: false});
+    Swal.fire({ icon: 'success', title: 'Tersimpan', text: 'Perubahan bentuk berhasil disimpan!', timer: 1500, showConfirmButton: false });
 });
 
 map.on(L.Draw.Event.DELETED, function (e) {
     var layers = e.layers;
     layers.eachLayer(function (layer) {
-        if(layer.db_id && layer.db_tipe) {
+        if (layer.db_id && layer.db_tipe) {
             var fd = new FormData();
             fd.append('action', 'hapus_data');
             fd.append('id', layer.db_id);
@@ -135,20 +135,20 @@ map.on(L.Draw.Event.DELETED, function (e) {
             fetch('../api/api.php', { method: 'POST', body: fd });
         }
     });
-    Swal.fire({icon: 'success', title: 'Terhapus', text: 'Data berhasil dihapus dari peta!', timer: 1500, showConfirmButton: false});
+    Swal.fire({ icon: 'success', title: 'Terhapus', text: 'Data berhasil dihapus dari peta!', timer: 1500, showConfirmButton: false });
 });
 
 function toggleSidebar() { document.getElementById('sidebar').classList.toggle('active'); }
 
 function toggleRightPanel() {
     var panel = document.getElementById('panelInput');
-    if(panel) panel.classList.toggle('collapsed');
+    if (panel) panel.classList.toggle('collapsed');
 }
 
 function filterData() {
     var input = document.getElementById('searchInput').value.toLowerCase();
     var cards = document.getElementsByClassName('item-data');
-    if(input.length > 0) document.getElementById('sidebar').classList.add('active');
+    if (input.length > 0) document.getElementById('sidebar').classList.add('active');
     for (var i = 0; i < cards.length; i++) {
         cards[i].style.display = cards[i].getAttribute('data-nama').includes(input) ? "" : "none";
     }
@@ -157,7 +157,7 @@ function filterData() {
 function changeRadius(v) {
     currentRadius = parseInt(v);
     document.getElementById('radiusVal').innerText = v;
-    if(cachedData) renderMap(cachedData);
+    if (cachedData) renderMap(cachedData);
 }
 
 var prevReportCount = -1;
@@ -166,7 +166,7 @@ function loadData(isPolling = false) {
         .then(r => r.json())
         .then(data => {
             cachedData = data;
-            
+
             // Logika Notifikasi Bubble
             if (prevReportCount !== -1 && data.pelaporan.length > prevReportCount) {
                 var newCount = data.pelaporan.length - prevReportCount;
@@ -181,10 +181,10 @@ function loadData(isPolling = false) {
                 });
             }
             prevReportCount = data.pelaporan.length;
-            
+
             var badge = document.getElementById('notifBadge');
-            if(badge) {
-                if(data.pelaporan.length > 0) {
+            if (badge) {
+                if (data.pelaporan.length > 0) {
                     badge.style.display = 'block';
                     badge.innerText = data.pelaporan.length;
                 } else {
@@ -208,7 +208,7 @@ function loadData(isPolling = false) {
 // Auto-poll every 10 seconds
 setInterval(() => {
     // Only poll if not currently editing (edit_id is 0)
-    if(document.getElementById('edit_id') && document.getElementById('edit_id').value === "0") {
+    if (document.getElementById('edit_id') && document.getElementById('edit_id').value === "0") {
         loadData(true);
     }
 }, 10000);
@@ -238,12 +238,12 @@ function renderSidebar(data) {
     if (!window.dashboardType || window.dashboardType === 'sosial' || window.dashboardType === 'admin') {
         // Pelaporan
         html += `<div class="section-title" style="color:#ef4444">🚨 Laporan Darurat</div>`;
-        if(data.pelaporan.length === 0) html += `<small style="color:#666">Belum ada laporan</small>`;
+        if (data.pelaporan.length === 0) html += `<small style="color:#666">Belum ada laporan</small>`;
         data.pelaporan.forEach(p => {
             html += `<div class="card item-data" data-nama="${p.nama_pelapor.toLowerCase()} ${p.isi_laporan.toLowerCase()}">
                 <div style="display:flex; justify-content:space-between">
                     <span onclick="fokus(${p.latitude}, ${p.longitude})" style="cursor:pointer">
-                        <b>${p.nama_pelapor}</b><small><i class="far fa-clock"></i> ${p.waktu}</small><br><span>${p.isi_laporan.substring(0,40)}...</span>
+                        <b>${p.nama_pelapor}</b><small><i class="far fa-clock"></i> ${p.waktu}</small><br><span>${p.isi_laporan.substring(0, 40)}...</span>
                     </span>
                     <div>
                         <button class="btn-save" style="padding:4px 8px; font-size:0.75rem; width:auto; margin-bottom:5px;" onclick="editData('pelaporan', ${p.id})">Edit</button><br>
@@ -313,9 +313,9 @@ function renderSidebar(data) {
         html += `<div class="section-title">🛣️ Manajemen Jalan</div>`;
         data.jalan.forEach(j => {
             var color = '#ef4444'; // default red
-            if(j.status_jalan === 'Nasional') color = '#ef4444'; 
-            else if(j.status_jalan === 'Provinsi') color = '#eab308'; 
-            else if(j.status_jalan === 'Kabupaten') color = '#22c55e';
+            if (j.status_jalan === 'Nasional') color = '#ef4444';
+            else if (j.status_jalan === 'Provinsi') color = '#eab308';
+            else if (j.status_jalan === 'Kabupaten') color = '#22c55e';
             html += `<div class="card item-data" data-nama="${j.nama_jalan.toLowerCase()}">
                 <div style="display:flex; justify-content:space-between">
                     <span>
@@ -373,10 +373,10 @@ function renderMap(data) {
                     <button class="btn-del" style="padding:4px 8px; font-size:0.75rem; width:auto;" onclick="hapusData(${m.id}, 'masjid')">Hapus</button>
                 </div>`;
             var faClass = 'fa-mosque';
-            if(m.jenis === 'Gereja') faClass = 'fa-church';
-            else if(m.jenis === 'Vihara') faClass = 'fa-vihara';
-            else if(m.jenis === 'Pura') faClass = 'fa-torii-gate';
-            
+            if (m.jenis === 'Gereja') faClass = 'fa-church';
+            else if (m.jenis === 'Vihara') faClass = 'fa-vihara';
+            else if (m.jenis === 'Pura') faClass = 'fa-torii-gate';
+
             // Buat custom marker bentuk map pin dengan icon sesuai jenis
             var masjidIcon = L.divIcon({
                 html: `
@@ -408,7 +408,7 @@ function renderMap(data) {
             });
 
             L.marker([m.latitude, m.longitude], { icon: masjidIcon, draggable: true }).addTo(layerMasjid).bindPopup(popup)
-             .on('dragend', function(e){ updateMarkerCoord(m.id, 'masjid', e.target.getLatLng()); });
+                .on('dragend', function (e) { updateMarkerCoord(m.id, 'masjid', e.target.getLatLng()); });
             L.circle([m.latitude, m.longitude], {
                 radius: currentRadius, color: '#2563eb', fillOpacity: 0.1, weight: 1
             }).addTo(layerMasjidRadius);
@@ -454,7 +454,7 @@ function renderMap(data) {
             L.marker([p.latitude, p.longitude], {
                 icon: pelaporanIcon, draggable: true
             }).addTo(layerPelaporan).bindPopup(popup)
-             .on('dragend', function(e){ updateMarkerCoord(p.id, 'pelaporan', e.target.getLatLng()); });
+                .on('dragend', function (e) { updateMarkerCoord(p.id, 'pelaporan', e.target.getLatLng()); });
         });
     }
 
@@ -464,7 +464,7 @@ function renderMap(data) {
             var is24 = s.kategori === '24jam';
             var iconUrl = is24 ? 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png' : 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png';
             var targetLayer = is24 ? layerSpbu24 : layerSpbuNon24;
-            
+
             var popup = `<b>⛽ ${s.nama}</b><br>Kategori: ${s.kategori === '24jam' ? 'Buka 24 Jam' : 'Tidak 24 Jam'}<br>
                 <div style="margin-top:10px; text-align:center;">
                     <button class="btn-save" style="padding:4px 8px; font-size:0.75rem; width:auto; margin-right:5px;" onclick="editData('spbu', ${s.id})">Edit</button>
@@ -473,7 +473,7 @@ function renderMap(data) {
             L.marker([s.latitude, s.longitude], {
                 icon: L.icon({ iconUrl: iconUrl, iconSize: [25, 41], iconAnchor: [12, 41] }), draggable: true
             }).addTo(targetLayer).bindPopup(popup)
-             .on('dragend', function(e){ updateMarkerCoord(s.id, 'spbu', e.target.getLatLng()); });
+                .on('dragend', function (e) { updateMarkerCoord(s.id, 'spbu', e.target.getLatLng()); });
         });
     }
 
@@ -482,7 +482,7 @@ function renderMap(data) {
         data.warga.forEach(w => {
             var pos = L.latLng(w.latitude, w.longitude);
             var isCovered = lokMasjid.some(m => pos.distanceTo(m) <= currentRadius);
-            
+
             // Buat elemen point berbentuk map pin (teardrop) dengan ikon rumah di dalamnya
             var color = isCovered ? '#16a34a' : '#ef4444'; // Hijau aman, merah di luar
             var houseIcon = L.divIcon({
@@ -521,7 +521,7 @@ function renderMap(data) {
                 iconAnchor: [15, 36], // Titik jangkar di ujung bawah pin
                 popupAnchor: [0, -36]
             });
-            
+
             var isPenerima = (w.status_bantuan === 'Sudah') ? 'Ya' : 'Belum';
             var txtPendidikan = w.pendidikan ? w.pendidikan : 'Tidak diketahui';
             var txtPenyakit = (w.riwayat_penyakit && w.riwayat_penyakit.trim().length > 0) ? w.riwayat_penyakit : 'Tidak ada';
@@ -546,8 +546,8 @@ function renderMap(data) {
                     </div>
                 </div>`;
             L.marker(pos, { icon: houseIcon, draggable: true })
-             .addTo(layerWarga).bindPopup(popup)
-             .on('dragend', function(e){ updateMarkerCoord(w.id, 'warga', e.target.getLatLng()); });
+                .addTo(layerWarga).bindPopup(popup)
+                .on('dragend', function (e) { updateMarkerCoord(w.id, 'warga', e.target.getLatLng()); });
         });
     }
 
@@ -556,16 +556,16 @@ function renderMap(data) {
         data.jalan.forEach(j => {
             var coords = JSON.parse(j.koordinat);
             var color = '#ef4444'; // default red
-            if(j.status_jalan === 'Nasional') color = '#ef4444'; // Merah
-            else if(j.status_jalan === 'Provinsi') color = '#eab308'; // Kuning
-            else if(j.status_jalan === 'Kabupaten') color = '#22c55e'; // Hijau
+            if (j.status_jalan === 'Nasional') color = '#ef4444'; // Merah
+            else if (j.status_jalan === 'Provinsi') color = '#eab308'; // Kuning
+            else if (j.status_jalan === 'Kabupaten') color = '#22c55e'; // Hijau
 
             var popup = `<b>🛣️ ${j.nama_jalan}</b><br>Status: ${j.status_jalan}<br>Panjang: ${j.panjang_m} meter<br>
                 <div style="margin-top:10px; text-align:center;">
                     <button class="btn-save" style="padding:4px 8px; font-size:0.75rem; width:auto; margin-right:5px;" onclick="editData('jalan', ${j.id})">Edit</button>
                     <button class="btn-del" style="padding:4px 8px; font-size:0.75rem; width:auto;" onclick="hapusData(${j.id}, 'jalan')">Hapus</button>
                 </div>`;
-            var polyline = L.polyline(coords, {color: color, weight: 6}).addTo(layerLines).bindPopup(popup);
+            var polyline = L.polyline(coords, { color: color, weight: 6 }).addTo(layerLines).bindPopup(popup);
             polyline.db_id = j.id;
             polyline.db_tipe = 'jalan';
             drawnItems.addLayer(polyline);
@@ -579,7 +579,7 @@ function renderMap(data) {
                     <button class="btn-save" style="padding:4px 8px; font-size:0.75rem; width:auto; margin-right:5px;" onclick="editData('parsil', ${p.id})">Edit</button>
                     <button class="btn-del" style="padding:4px 8px; font-size:0.75rem; width:auto;" onclick="hapusData(${p.id}, 'parsil')">Hapus</button>
                 </div>`;
-            var polygon = L.polygon(coords, {color: '#2563eb', fillOpacity: 0.4}).addTo(layerPolygons).bindPopup(popup);
+            var polygon = L.polygon(coords, { color: '#2563eb', fillOpacity: 0.4 }).addTo(layerPolygons).bindPopup(popup);
             polygon.db_id = p.id;
             polygon.db_tipe = 'parsil';
             drawnItems.addLayer(polygon);
@@ -622,12 +622,12 @@ function simpanData() {
         fd.append('status_hak', document.getElementById('status_hak').value);
         fd.append('koordinat', document.getElementById('parsil_coords').value);
     } else {
-        if(j !== 'geometri' && (!lat || !lng) && document.getElementById('edit_id').value === "0") { 
-            Swal.fire({icon: 'warning', title: 'Oops...', text: 'Silakan klik titik koordinat di peta terlebih dahulu!'}); 
-            return; 
+        if (j !== 'geometri' && (!lat || !lng) && document.getElementById('edit_id').value === "0") {
+            Swal.fire({ icon: 'warning', title: 'Oops...', text: 'Silakan klik titik koordinat di peta terlebih dahulu!' });
+            return;
         }
         fd.append('lat', lat); fd.append('lng', lng);
-        
+
         if (j === 'pelaporan') {
             fd.append('nama', document.getElementById('nama_pelapor').value);
             fd.append('laporan', document.getElementById('isi_laporan').value);
@@ -651,15 +651,15 @@ function simpanData() {
         }
     }
 
-    Swal.fire({ title: 'Menyimpan...', allowOutsideClick: false, didOpen: () => { Swal.showLoading() }});
+    Swal.fire({ title: 'Menyimpan...', allowOutsideClick: false, didOpen: () => { Swal.showLoading() } });
     fetch('../api/api.php', { method: 'POST', body: fd })
         .then(res => res.json())
         .then((res) => {
             if (res.status === 'error') {
                 Swal.fire('Gagal!', res.message, 'error');
             } else {
-                Swal.fire({icon: 'success', title: 'Berhasil', text: 'Data berhasil disimpan!', timer: 1500, showConfirmButton: false})
-                .then(() => location.reload());
+                Swal.fire({ icon: 'success', title: 'Berhasil', text: 'Data berhasil disimpan!', timer: 1500, showConfirmButton: false })
+                    .then(() => location.reload());
             }
         });
 }
@@ -670,7 +670,7 @@ function hapusData(id, tipe) {
         showCancelButton: true, confirmButtonColor: '#ef4444', cancelButtonColor: '#94a3b8', confirmButtonText: 'Ya, Hapus!'
     }).then((result) => {
         if (result.isConfirmed) {
-            Swal.fire({ title: 'Menghapus...', allowOutsideClick: false, didOpen: () => { Swal.showLoading() }});
+            Swal.fire({ title: 'Menghapus...', allowOutsideClick: false, didOpen: () => { Swal.showLoading() } });
             var fd = new FormData();
             fd.append('action', 'hapus_data');
             fd.append('id', id);
@@ -700,16 +700,16 @@ function batalEdit() {
 
 function editData(tipe, id) {
     var item = cachedData[tipe].find(x => x.id == id);
-    if(!item) return;
+    if (!item) return;
 
     document.getElementById('edit_id').value = id;
     document.getElementById('jenis').value = tipe;
     toggleForm();
-    
-    var panel = document.getElementById('panelInput');
-    if(panel) panel.classList.remove('collapsed');
 
-    if(tipe == 'warga') {
+    var panel = document.getElementById('panelInput');
+    if (panel) panel.classList.remove('collapsed');
+
+    if (tipe == 'warga') {
         document.getElementById('nama_kk').value = item.nama;
         document.getElementById('jumlah_kk').value = item.jumlah_kk;
         document.getElementById('tanggal_lahir').value = item.tanggal_lahir || '';
@@ -739,7 +739,7 @@ function editData(tipe, id) {
         document.getElementById('parsil_coords').value = item.koordinat;
     }
 
-    if(item.latitude && item.longitude) {
+    if (item.latitude && item.longitude) {
         document.getElementById('lat').value = item.latitude;
         document.getElementById('lng').value = item.longitude;
         fokus(item.latitude, item.longitude);
@@ -762,10 +762,10 @@ function updateMarkerCoord(id, tipe, latlng) {
     fetch('../api/api.php', { method: 'POST', body: fd })
         .then(() => {
             Swal.fire({
-                icon: 'success', 
-                title: 'Tersimpan', 
-                text: 'Posisi titik berhasil digeser!', 
-                timer: 1500, 
+                icon: 'success',
+                title: 'Tersimpan',
+                text: 'Posisi titik berhasil digeser!',
+                timer: 1500,
                 showConfirmButton: false,
                 toast: true,
                 position: 'top-end'