diff --git a/WebGISPovertyMapping/assets/css/style.css b/WebGISPovertyMapping/assets/css/style.css
index ab20b5b..09e8138 100644
--- a/WebGISPovertyMapping/assets/css/style.css
+++ b/WebGISPovertyMapping/assets/css/style.css
@@ -24,6 +24,12 @@ html, body {
box-shadow: 2px 0 12px rgba(0,0,0,0.10);
z-index: 1000;
overflow-y: auto;
+ scrollbar-width: none; /* Firefox */
+ -ms-overflow-style: none; /* IE/Edge */
+}
+
+#sidebar::-webkit-scrollbar {
+ display: none; /* Chrome/Safari */
}
/* Header sidebar */
@@ -250,26 +256,22 @@ html, body {
.btn-login:hover { background: #253d6e; }
-.btn-logout {
+.btn-logout-header {
+ color: white;
+ opacity: 0.7;
+ text-decoration: none;
+ font-size: 16px;
+ padding: 4px 6px;
+ border-radius: 6px;
+ transition: opacity 0.2s, background 0.2s;
display: flex;
align-items: center;
- justify-content: center;
- gap: 8px;
- padding: 11px;
- background: #fdecea;
- color: #c0392b;
- border-radius: 10px;
- text-decoration: none;
- font-size: 14px;
- font-weight: 600;
- border: none;
- cursor: pointer;
- transition: background 0.2s;
- width: 100%;
- margin-top: auto;
}
-.btn-logout:hover { background: #f5b7b1; }
+.btn-logout-header:hover {
+ opacity: 1;
+ background: rgba(255,255,255,0.15);
+}
/* ===== MAP CONTAINER ===== */
#map-container {
@@ -376,4 +378,98 @@ html, body {
background: linear-gradient(to right, #3498db, #f1c40f, #e67e22, #e74c3c);
display: inline-block;
flex-shrink: 0;
+}
+
+/* ===== SIDEBAR STATS ===== */
+.sidebar-stats {
+ background: #f8fafc;
+ border-bottom: 1px solid #e8edf2;
+ padding: 14px 16px;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.stat-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 8px;
+}
+
+.stat-label {
+ font-size: 12px;
+ color: #666;
+ display: flex;
+ align-items: center;
+ gap: 6px;
+}
+
+.stat-label i {
+ color: #1B2A4A;
+ font-size: 12px;
+ width: 14px;
+ text-align: center;
+}
+
+.stat-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ display: inline-block;
+ flex-shrink: 0;
+}
+
+.stat-value {
+ font-size: 15px;
+ font-weight: 700;
+ color: #1B2A4A;
+ min-width: 28px;
+ text-align: right;
+}
+
+.stat-value.green { color: #27ae60; }
+.stat-value.red { color: #e74c3c; }
+
+.stat-divider {
+ height: 1px;
+ background: #e8edf2;
+ margin: 2px 0;
+}
+
+/* Progress bar */
+.stat-progress-wrap {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-top: 2px;
+}
+
+.stat-progress-bar {
+ flex: 1;
+ height: 6px;
+ background: #e8edf2;
+ border-radius: 20px;
+ overflow: hidden;
+}
+
+.stat-progress-fill {
+ height: 100%;
+ border-radius: 20px;
+ background: #27ae60;
+ transition: width 0.5s ease, background 0.5s ease;
+}
+
+.stat-persen {
+ font-size: 12px;
+ font-weight: 700;
+ color: #1B2A4A;
+ min-width: 36px;
+ text-align: right;
+}
+
+.stat-persen-label {
+ font-size: 11px;
+ color: #aab4c0;
+ white-space: nowrap;
}
\ No newline at end of file
diff --git a/WebGISPovertyMapping/assets/js/script.js b/WebGISPovertyMapping/assets/js/script.js
index 0f571d5..ffa13ba 100644
--- a/WebGISPovertyMapping/assets/js/script.js
+++ b/WebGISPovertyMapping/assets/js/script.js
@@ -161,6 +161,7 @@ function perbaruiWarnaPrasejahtera() {
p.marker.addTo(layerTidakTercakup);
}
}
+ updateRingkasan();
}
// --- MANAJEMEN MODE UI ---
@@ -928,4 +929,26 @@ function buatHeatmap() {
1.0: '#e74c3c' // merah = kepadatan sangat tinggi
}
}).addTo(map);
+}
+
+function updateRingkasan() {
+ let totalPrasejahtera = Object.keys(dataPrasejahtera).length;
+ let totalIbadah = Object.keys(dataIbadah).length;
+ let totalTercakup = layerTercakup.getLayers().length;
+ let totalTidak = layerTidakTercakup.getLayers().length;
+ let persen = totalPrasejahtera > 0
+ ? Math.round((totalTercakup / totalPrasejahtera) * 100) : 0;
+
+ document.getElementById('stat-total').textContent = totalPrasejahtera;
+ document.getElementById('stat-tercakup').textContent = totalTercakup;
+ document.getElementById('stat-tidak').textContent = totalTidak;
+ document.getElementById('stat-persen').textContent = persen + '%';
+ document.getElementById('stat-ibadah').textContent = totalIbadah;
+
+ // Update progress bar
+ document.getElementById('stat-progress').style.width = persen + '%';
+
+ // Warna progress bar berdasarkan persentase
+ let warna = persen >= 70 ? '#27ae60' : persen >= 40 ? '#f39c12' : '#e74c3c';
+ document.getElementById('stat-progress').style.background = warna;
}
\ No newline at end of file
diff --git a/WebGISPovertyMapping/index.php b/WebGISPovertyMapping/index.php
index 60927d0..63819fd 100644
--- a/WebGISPovertyMapping/index.php
+++ b/WebGISPovertyMapping/index.php
@@ -20,7 +20,12 @@ $role = $isLoggedIn ? $_SESSION['role'] : 'viewer';
@@ -33,6 +38,44 @@ $role = $isLoggedIn ? $_SESSION['role'] : 'viewer';
+
+
+
+
@@ -87,11 +130,6 @@ $role = $isLoggedIn ? $_SESSION['role'] : 'viewer';
-
-
- Logout
-
-