feat: menambah fungsionalitas status koneksi pada header

WebGISPovertyMap/index.php

@@ -137,7 +137,7 @@ $isAdmin = isset($_SESSION['role']) && $_SESSION['role'] === 'admin';
 
             <div style="width: 1px; height: 20px; background: rgba(255,255,255,0.1); margin: 0 4px;"></div>
 
-            <div class="tool-btn" title="Status Koneksi">
+            <div class="tool-btn" id="connection-status" title="Status Koneksi">
                 <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                     <path stroke-linecap="round" stroke-linejoin="round"
                         d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0" />

WebGISPovertyMap/script.js

@@ -914,4 +914,30 @@ function showDashboard(ibadahName, totalKK, sudahBantuan, belumBantuan, families
 
 function closeDashboard() {
     document.getElementById('dashboard-sidebar').classList.remove('open');
-}
+}
+
+// ==========================================
+// 16. SISTEM MONITORING KONEKSI DINAMIS
+// ==========================================
+function updateConnectionStatus() {
+    var statusEl = document.getElementById('connection-status');
+    if (!statusEl) return;
+
+    if (navigator.onLine) {
+        statusEl.classList.remove('offline');
+        statusEl.classList.add('online');
+        statusEl.setAttribute('title', 'Koneksi Stabil');
+    } else {
+        statusEl.classList.remove('online');
+        statusEl.classList.add('offline');
+        statusEl.setAttribute('title', 'Koneksi Terputus - Peta mungkin tidak dimuat sempurna');
+    }
+}
+
+// Event listeners untuk mendeteksi perubahan status koneksi
+window.addEventListener('online', updateConnectionStatus);
+window.addEventListener('offline', updateConnectionStatus);
+
+// Jalankan saat pertama kali dimuat
+document.addEventListener('DOMContentLoaded', updateConnectionStatus);
+updateConnectionStatus();

WebGISPovertyMap/style.css

@@ -505,6 +505,21 @@ body {
     border: 1px solid #0f172a;
 }
 
+#connection-status.online {
+    color: #10b981;
+    border-color: rgba(16, 185, 129, 0.25);
+}
+#connection-status.online .status-dot {
+    background: #10b981;
+}
+#connection-status.offline {
+    color: #ef4444;
+    border-color: rgba(239, 68, 68, 0.25);
+}
+#connection-status.offline .status-dot {
+    background: #ef4444;
+}
+
 /* ============================
            POPUP STYLES (MODERN CARD)
         ============================ */