From 1bb33b9d61e057d171d15b0dfc86aab9d8ef694d Mon Sep 17 00:00:00 2001
From: tistopandita <tisto272@gmail.com>
Date: Wed, 10 Jun 2026 23:55:59 +0700
Subject: [PATCH] update_ui_poverty_map

---
 frontend/poverty-map.html | 1389 ++++++++++++++++++++++++++-----------
 1 file changed, 999 insertions(+), 390 deletions(-)
diff --git a/frontend/poverty-map.html b/frontend/poverty-map.html
index 8930917..72eb36f 100644
--- a/frontend/poverty-map.html
+++ b/frontend/poverty-map.html
@@ -3,27 +3,28 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Poverty Mapping Pontianak</title>
+    <title>WebGIS Poverty Mapping – Pontianak</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="" />
     <style>
       :root {
-        --green: #1b4332;
-        --green-2: #2d6a4f;
+        --bg-dark: #0f172a;
+        --bg-panel: #111827;
+        --border: rgba(148, 163, 184, 0.22);
+        --text: #f8fafc;
+        --muted: #94a3b8;
+        --accent: #7c3aed;
+        --accent-l: #a78bfa;
+        --shadow: 0 18px 45px rgba(15, 23, 42, 0.28);
+        --sangat: #dc2626;
+        --miskin: #f97316;
+        --rentan: #eab308;
+        --sudah: #16a34a;
+        --belum: #dc2626;
+        --outside: #2563eb;
         --gold: #f4a261;
-        --gold-soft: rgba(244, 162, 97, 0.2);
-        --blue: #2563eb;
-        --red: #dc2626;
-        --dark-red: #7f1d1d;
-        --orange: #ea580c;
-        --yellow: #eab308;
-        --text: #0f172a;
-        --muted: #64748b;
-        --panel: rgba(255, 255, 255, 0.9);
-        --border: rgba(15, 23, 42, 0.12);
-        --shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
       }
 
       * {
@@ -32,201 +33,440 @@
 
       body {
         margin: 0;
-        height: 100vh;
         overflow: hidden;
-        font-family: "Inter", system-ui, sans-serif;
         color: var(--text);
         background: #eef2f7;
+        font-family: "Inter", system-ui, sans-serif;
       }
 
       button,
-      input {
+      input,
+      select {
         font: inherit;
       }
 
-      #map {
-        width: 100vw;
+      .app {
+        display: grid;
+        grid-template-columns: 370px minmax(0, 1fr);
         height: 100vh;
       }
 
-      .topbar {
-        position: fixed;
+      .sidebar {
+        position: relative;
         z-index: 900;
-        top: 14px;
-        left: 14px;
-        right: 14px;
-        display: grid;
-        grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
-        gap: 14px;
-        align-items: stretch;
-        pointer-events: none;
-      }
-
-      .brand,
-      .radius-panel,
-      .stats-panel,
-      .family-panel {
-        border: 1px solid var(--border);
-        border-radius: 20px;
-        background: var(--panel);
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        padding: 20px;
+        background:
+          radial-gradient(circle at top left, rgba(124, 58, 237, 0.22), transparent 38%),
+          linear-gradient(180deg, var(--bg-dark), var(--bg-panel));
         box-shadow: var(--shadow);
-        backdrop-filter: blur(18px);
-        pointer-events: auto;
+        overflow-y: auto;
       }
 
       .brand {
         display: flex;
-        align-items: center;
-        gap: 14px;
-        min-height: 74px;
-        padding: 14px 18px;
-        color: #fff;
-        background: linear-gradient(135deg, rgba(27, 67, 50, 0.96), rgba(45, 106, 79, 0.92));
-      }
-
-      .brand-icon {
-        display: grid;
-        width: 46px;
-        height: 46px;
-        flex: 0 0 auto;
-        place-items: center;
-        border-radius: 16px;
-        background: rgba(244, 162, 97, 0.22);
-        font-size: 1.45rem;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: 12px;
       }
 
       .brand h1 {
         margin: 0;
-        font-size: 1.1rem;
+        font-size: 1.3rem;
+        line-height: 1.15;
         letter-spacing: -0.03em;
       }
 
       .brand p {
-        margin: 4px 0 0;
-        color: rgba(255, 255, 255, 0.78);
-        font-size: 0.86rem;
+        margin: 6px 0 0;
+        color: var(--muted);
+        font-size: 0.85rem;
+        line-height: 1.4;
       }
 
-      .radius-panel {
-        padding: 14px 16px;
+      .brand-links {
+        display: flex;
+        flex-shrink: 0;
+        gap: 6px;
+      }
+
+      .icon-btn {
+        display: inline-grid;
+        width: 40px;
+        height: 40px;
+        place-items: center;
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        color: var(--text);
+        background: rgba(255, 255, 255, 0.08);
+        cursor: pointer;
+        text-decoration: none;
+        transition: 0.2s;
+      }
+
+      .icon-btn:hover {
+        border-color: rgba(167, 139, 250, 0.75);
+        background: rgba(124, 58, 237, 0.3);
+      }
+
+      .summary {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 8px;
+      }
+
+      .s-card {
+        padding: 10px 12px;
+        border: 1px solid var(--border);
+        border-radius: 14px;
+        background: rgba(15, 23, 42, 0.62);
+      }
+
+      .s-card span {
+        display: block;
+        color: var(--muted);
+        font-size: 0.68rem;
+        letter-spacing: 0.07em;
+        text-transform: uppercase;
+      }
+
+      .s-card strong {
+        display: block;
+        margin-top: 3px;
+        font-size: 1.5rem;
+        line-height: 1;
+      }
+
+      .s-card.sangat strong {
+        color: var(--sangat);
+      }
+
+      .s-card.miskin strong {
+        color: var(--miskin);
+      }
+
+      .s-card.rentan strong {
+        color: var(--rentan);
+      }
+
+      .panel {
+        padding: 14px;
+        border: 1px solid var(--border);
+        border-radius: 18px;
+        background: rgba(17, 24, 39, 0.76);
+        backdrop-filter: blur(14px);
+      }
+
+      .panel h2 {
+        margin: 0 0 10px;
+        color: #ddd6fe;
+        font-size: 0.82rem;
+        letter-spacing: 0.09em;
+        text-transform: uppercase;
+      }
+
+      .field {
+        display: grid;
+        gap: 6px;
+        margin-bottom: 10px;
+      }
+
+      .field:last-child {
+        margin-bottom: 0;
+      }
+
+      label {
+        color: var(--muted);
+        font-size: 0.8rem;
+        font-weight: 600;
+      }
+
+      input[type="text"],
+      select {
+        width: 100%;
+        min-height: 40px;
+        border: 1px solid var(--border);
+        border-radius: 11px;
+        padding: 8px 10px;
+        color: var(--text);
+        background: rgba(15, 23, 42, 0.88);
+        outline: none;
+      }
+
+      input[type="text"]:focus,
+      select:focus {
+        border-color: var(--accent-l);
+        box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.18);
+      }
+
+      .ibadah-list,
+      .family-list {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        max-height: 220px;
+        overflow-y: auto;
+      }
+
+      .ibadah-item,
+      .family-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 9px 11px;
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        background: rgba(15, 23, 42, 0.5);
+        cursor: pointer;
+        transition: 0.15s;
+      }
+
+      .family-item {
+        align-items: flex-start;
+        cursor: default;
+      }
+
+      .ibadah-item:hover {
+        border-color: rgba(167, 139, 250, 0.5);
+        background: rgba(124, 58, 237, 0.18);
+      }
+
+      .ibadah-item.active {
+        border-color: var(--accent-l);
+        background: rgba(124, 58, 237, 0.28);
+      }
+
+      .ibadah-icon {
+        flex-shrink: 0;
+        font-size: 1.3rem;
+      }
+
+      .ibadah-info,
+      .family-info {
+        min-width: 0;
+        flex: 1;
+      }
+
+      .ibadah-info strong,
+      .family-info strong {
+        display: block;
+        overflow: hidden;
+        font-size: 0.86rem;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .ibadah-info small,
+      .family-info small {
+        color: var(--muted);
+        font-size: 0.74rem;
       }
 
       .radius-row {
         display: flex;
         align-items: center;
-        justify-content: space-between;
-        gap: 12px;
-        margin-bottom: 10px;
-      }
-
-      .radius-row strong {
-        color: var(--green);
-      }
-
-      input[type="range"] {
-        width: 100%;
-        accent-color: var(--gold);
-      }
-
-      .stats-panel {
-        position: fixed;
-        z-index: 850;
-        top: 112px;
-        left: 14px;
-        width: 340px;
-        padding: 16px;
-      }
-
-      .stats-panel h2,
-      .family-panel h2 {
-        margin: 0 0 12px;
-        color: var(--green);
-        font-size: 0.92rem;
-        text-transform: uppercase;
-        letter-spacing: 0.08em;
-      }
-
-      .stats-grid {
-        display: grid;
-        grid-template-columns: repeat(2, minmax(0, 1fr));
         gap: 10px;
       }
 
-      .stat-card {
-        padding: 12px;
-        border: 1px solid var(--border);
-        border-radius: 15px;
-        background: #fff;
+      .radius-row input[type="range"] {
+        flex: 1;
+        accent-color: var(--accent-l);
       }
 
-      .stat-card span {
-        display: block;
-        color: var(--muted);
-        font-size: 0.74rem;
+      .radius-val {
+        min-width: 62px;
+        color: var(--accent-l);
+        font-size: 0.88rem;
         font-weight: 700;
-        text-transform: uppercase;
+        text-align: right;
+        white-space: nowrap;
       }
 
-      .stat-card strong {
-        display: block;
-        margin-top: 5px;
-        color: var(--text);
-        font-size: 1.35rem;
-      }
-
-      .family-panel {
-        position: fixed;
-        z-index: 920;
-        top: 112px;
-        right: 14px;
-        width: min(410px, calc(100vw - 28px));
-        max-height: calc(100vh - 132px);
-        padding: 16px;
-        overflow: auto;
-        transform: translateX(calc(100% + 24px));
-        transition: transform 0.25s ease;
-      }
-
-      .family-panel.open {
-        transform: translateX(0);
-      }
-
-      .panel-header {
-        display: flex;
-        align-items: start;
-        justify-content: space-between;
-        gap: 12px;
-      }
-
-      .close-btn {
-        width: 34px;
-        height: 34px;
+      .primary-btn {
+        width: 100%;
+        min-height: 38px;
+        margin-top: 10px;
         border: 0;
         border-radius: 11px;
         color: #fff;
-        background: var(--green);
+        background: var(--accent);
         cursor: pointer;
-        font-weight: 900;
+        font-weight: 700;
       }
 
-      .family-list {
+      .primary-btn:hover {
+        background: #6d28d9;
+      }
+
+      .hint {
+        margin: 8px 0 0;
+        color: var(--muted);
+        font-size: 0.75rem;
+        line-height: 1.4;
+      }
+
+      .legend-grid {
         display: grid;
-        gap: 10px;
+        grid-template-columns: 1fr 1fr;
+        gap: 6px;
       }
 
-      .family-item {
-        padding: 12px;
-        border: 1px solid var(--border);
-        border-radius: 16px;
-        background: #fff;
+      .legend-item {
+        display: flex;
+        align-items: center;
+        gap: 7px;
+        font-size: 0.8rem;
       }
 
-      .family-item strong {
+      .leg-dot {
+        width: 12px;
+        height: 12px;
+        flex-shrink: 0;
+        border-radius: 50%;
+      }
+
+      .leg-rect {
+        width: 18px;
+        height: 10px;
+        flex-shrink: 0;
+        border-radius: 3px;
+        opacity: 0.75;
+      }
+
+      .mini-stats {
+        position: fixed;
+        z-index: 850;
+        top: 18px;
+        right: 18px;
+        width: min(360px, calc(100vw - 36px));
+        padding: 14px;
+        border: 1px solid rgba(124, 58, 237, 0.3);
+        border-radius: 18px;
+        color: var(--text);
+        background: rgba(17, 24, 39, 0.9);
+        box-shadow: var(--shadow);
+        backdrop-filter: blur(16px);
+      }
+
+      .mini-stats h2 {
+        margin: 0 0 10px;
+        color: #ddd6fe;
+        font-size: 0.78rem;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+
+      .mini-grid {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 8px;
+      }
+
+      .mini-card {
+        padding: 9px 10px;
+        border: 1px solid rgba(148, 163, 184, 0.18);
+        border-radius: 12px;
+        background: rgba(15, 23, 42, 0.64);
+      }
+
+      .mini-card span {
         display: block;
-        margin-bottom: 5px;
+        color: var(--muted);
+        font-size: 0.68rem;
+        text-transform: uppercase;
       }
 
-      .family-item small {
+      .mini-card strong {
+        display: block;
+        margin-top: 3px;
+        font-size: 1.1rem;
+      }
+
+      .kk-panel,
+      .list-panel {
+        position: fixed;
+        z-index: 1100;
+        right: 24px;
+        width: min(380px, calc(100vw - 48px));
+        border: 1px solid rgba(124, 58, 237, 0.3);
+        border-radius: 20px;
+        color: var(--text);
+        background: rgba(17, 24, 39, 0.96);
+        box-shadow: var(--shadow);
+        backdrop-filter: blur(16px);
+      }
+
+      .kk-panel {
+        display: none;
+        bottom: 24px;
+        padding: 18px;
+      }
+
+      .kk-panel.show {
+        display: block;
+      }
+
+      .list-panel {
+        top: 112px;
+        display: none;
+        max-height: calc(100vh - 136px);
+        padding: 16px;
+        overflow: auto;
+      }
+
+      .list-panel.show {
+        display: block;
+      }
+
+      .panel-header,
+      .kk-panel-header {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: 12px;
+        margin-bottom: 12px;
+      }
+
+      .panel-header h3,
+      .kk-panel-header h3 {
+        margin: 0;
+        font-size: 0.95rem;
+      }
+
+      .panel-header p {
+        margin: 4px 0 0;
+        color: var(--muted);
+        font-size: 0.78rem;
+      }
+
+      .close-kk,
+      .close-list {
+        width: 28px;
+        height: 28px;
+        border: 0;
+        border-radius: 8px;
+        color: var(--text);
+        background: rgba(255, 255, 255, 0.1);
+        cursor: pointer;
+      }
+
+      .kk-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 10px;
+        padding: 6px 0;
+        border-bottom: 1px solid rgba(148, 163, 184, 0.12);
+        font-size: 0.83rem;
+      }
+
+      .kk-row:last-child {
+        border-bottom: 0;
+      }
+
+      .kk-row span {
         color: var(--muted);
       }
 
@@ -234,24 +474,33 @@
         display: inline-flex;
         align-items: center;
         border-radius: 999px;
-        padding: 4px 8px;
+        padding: 3px 9px;
         color: #fff;
-        font-size: 0.72rem;
+        font-size: 0.7rem;
         font-weight: 800;
+        letter-spacing: 0.04em;
         text-transform: uppercase;
       }
 
-      .badge.sangat_miskin {
-        background: var(--dark-red);
+      .badge.sangat {
+        background: var(--sangat);
       }
 
       .badge.miskin {
-        background: var(--orange);
+        background: var(--miskin);
       }
 
-      .badge.rentan_miskin {
-        color: #422006;
-        background: var(--yellow);
+      .badge.rentan {
+        color: #0f172a;
+        background: var(--rentan);
+      }
+
+      .badge.sudah {
+        background: var(--sudah);
+      }
+
+      .badge.belum {
+        background: var(--belum);
       }
 
       .popup-btn {
@@ -259,49 +508,93 @@
         min-height: 36px;
         margin-top: 10px;
         border: 0;
-        border-radius: 11px;
+        border-radius: 10px;
         color: #fff;
-        background: var(--green);
+        background: var(--accent);
         cursor: pointer;
         font-weight: 800;
       }
 
+      .toast {
+        position: fixed;
+        z-index: 1300;
+        top: 16px;
+        left: 50%;
+        padding: 11px 18px;
+        border-radius: 999px;
+        color: #0f172a;
+        background: rgba(255, 255, 255, 0.93);
+        box-shadow: var(--shadow);
+        font-weight: 800;
+        opacity: 0;
+        pointer-events: none;
+        transform: translate(-50%, -16px);
+        transition: 0.25s ease;
+      }
+
+      .toast.show {
+        opacity: 1;
+        transform: translate(-50%, 0);
+      }
+
+      .loading {
+        position: absolute;
+        inset: 0;
+        z-index: 800;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: rgba(15, 23, 42, 0.5);
+        backdrop-filter: blur(4px);
+      }
+
+      .loading-box {
+        padding: 18px 28px;
+        border-radius: 14px;
+        background: var(--bg-panel);
+        font-size: 0.9rem;
+        font-weight: 600;
+      }
+
       .worship-marker {
         display: grid;
-        width: 42px;
-        height: 42px;
+        width: 38px;
+        height: 38px;
         place-items: center;
         border: 3px solid #fff;
-        border-radius: 50% 50% 50% 12px;
+        border-radius: 50% 50% 50% 10px;
         background: var(--gold);
-        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.24);
+        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.3);
         transform: rotate(-45deg);
       }
 
       .worship-marker span {
+        font-size: 20px;
         transform: rotate(45deg);
-        font-size: 21px;
       }
 
-      .family-marker {
-        display: grid;
-        width: 28px;
-        height: 28px;
-        place-items: center;
-        border: 3px solid #fff;
+      .family-dot {
+        width: 20px;
+        height: 20px;
         border-radius: 50%;
-        color: #fff;
-        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.2);
-        transition: background-color 0.2s ease, transform 0.2s ease;
+        border: 3px solid rgba(255, 255, 255, 0.72);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
+        transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
       }
 
-      .family-marker.inside {
-        background: var(--red);
-        transform: scale(1.08);
+      .family-dot.inside {
+        background: var(--belum);
+        border-color: #fff;
+        transform: scale(1.12);
       }
 
-      .family-marker.outside {
-        background: var(--blue);
+      .family-dot.outside {
+        background: var(--outside);
+      }
+
+      .family-dot.sudah {
+        outline: 3px solid var(--sudah);
+        outline-offset: 1px;
       }
 
       .leaflet-popup-content-wrapper {
@@ -310,127 +603,202 @@
 
       .leaflet-popup-content h3 {
         margin: 0 0 5px;
-        color: var(--green);
+        color: #4c1d95;
       }
 
       .leaflet-popup-content p {
         margin: 0 0 7px;
       }
 
-      .muted {
-        color: var(--muted);
+      #map {
+        position: relative;
+        width: 100%;
+        height: 100vh;
       }
 
-      @media (max-width: 760px) {
-        .topbar {
-          grid-template-columns: 1fr;
+      @media (max-width: 860px) {
+        .app {
+          display: block;
         }
 
-        .brand {
-          min-height: unset;
+        .sidebar {
+          position: fixed;
+          inset: 0 auto 0 0;
+          width: min(88vw, 360px);
+          transform: translateX(-101%);
+          transition: transform 0.24s;
         }
 
-        .stats-panel {
-          top: 190px;
-          width: calc(100vw - 28px);
+        .sidebar.is-open {
+          transform: translateX(0);
         }
 
-        .family-panel {
-          top: auto;
-          right: 10px;
-          bottom: 10px;
-          left: 10px;
+        .mobile-toggle {
+          position: fixed;
+          z-index: 1200;
+          top: 14px;
+          left: 14px;
+          display: inline-grid !important;
+        }
+
+        .mini-stats {
+          top: 66px;
+          right: 12px;
+          left: 12px;
           width: auto;
-          max-height: 55vh;
+        }
+
+        .kk-panel,
+        .list-panel {
+          right: 12px;
+          left: 12px;
+          width: auto;
+        }
+
+        .list-panel {
+          top: auto;
+          bottom: 12px;
+          max-height: 50vh;
+        }
+
+        #map {
+          height: 100vh;
         }
       }
     </style>
   </head>
   <body>
-    <div id="map"></div>
+    <button class="icon-btn mobile-toggle" id="mobileToggle" style="display: none" aria-label="Menu">☰</button>
+    <div class="toast" id="toast"></div>
 
-    <header class="topbar">
-      <section class="brand">
-        <div class="brand-icon">🤝</div>
-        <div>
-          <h1>Poverty Mapping Pontianak</h1>
-          <p>Pemetaan keluarga miskin di sekitar tempat ibadah untuk dukungan komunitas.</p>
+    <main class="app">
+      <aside class="sidebar" id="sidebar">
+        <div class="brand">
+          <div>
+            <h1>Poverty Mapping</h1>
+            <p>Pemetaan keluarga berdasarkan tingkat kemiskinan per zona tempat ibadah.</p>
+          </div>
+          <div class="brand-links">
+            <a class="icon-btn" href="/" title="Peta SPBU">⛽</a>
+            <a class="icon-btn" href="/admin-poverty.html" title="Kelola Data">✏️</a>
+          </div>
+        </div>
+
+        <section class="summary">
+          <div class="s-card sangat"><span>Sangat Miskin</span><strong id="cntSangat">—</strong></div>
+          <div class="s-card miskin"><span>Miskin</span><strong id="cntMiskin">—</strong></div>
+          <div class="s-card rentan"><span>Rentan Miskin</span><strong id="cntRentan">—</strong></div>
+        </section>
+
+        <section class="panel">
+          <h2>Filter</h2>
+          <div class="field">
+            <label for="filterKategori">Kategori Kemiskinan</label>
+            <select id="filterKategori">
+              <option value="all">Semua Kategori</option>
+              <option value="Sangat Miskin">Sangat Miskin</option>
+              <option value="Miskin">Miskin</option>
+              <option value="Rentan Miskin">Rentan Miskin</option>
+            </select>
+          </div>
+          <div class="field">
+            <label for="filterBantuan">Status Bantuan</label>
+            <select id="filterBantuan">
+              <option value="all">Semua Status</option>
+              <option value="Belum Menerima">Belum Menerima</option>
+              <option value="Sudah Menerima">Sudah Menerima</option>
+            </select>
+          </div>
+          <div class="field">
+            <label for="filterRumah">Kondisi Rumah</label>
+            <select id="filterRumah">
+              <option value="all">Semua Kondisi</option>
+              <option value="Tidak Permanen">Tidak Permanen</option>
+              <option value="Semi Permanen">Semi Permanen</option>
+              <option value="Permanen">Permanen</option>
+            </select>
+          </div>
+        </section>
+
+        <section class="panel">
+          <h2>Tempat Ibadah <span id="ibadahCount" style="font-weight: 400; color: var(--muted)"></span></h2>
+          <div class="ibadah-list" id="ibadahList">
+            <div style="color: var(--muted); font-size: 0.82rem; padding: 8px 0">Memuat...</div>
+          </div>
+        </section>
+
+        <section class="panel" id="radiusPanel" style="display: none">
+          <h2>Radius Zona: <span id="radiusLabel" style="color: var(--accent-l)">500 m</span></h2>
+          <div class="radius-row">
+            <input type="range" id="radiusSlider" min="100" max="2000" step="50" value="500" />
+            <span class="radius-val" id="radiusVal">500 m</span>
+          </div>
+          <p class="hint">Geser untuk mengatur radius zona. Radius tersimpan di browser untuk prototype.</p>
+          <button class="primary-btn" id="saveRadiusBtn" type="button">Simpan Radius</button>
+          <button class="primary-btn" id="openFamilyListBtn" type="button">Lihat Daftar Keluarga</button>
+        </section>
+
+        <section class="panel">
+          <h2>Legenda</h2>
+          <div class="legend-grid">
+            <div class="legend-item"><div class="leg-dot" style="background: var(--sangat)"></div> Sangat Miskin</div>
+            <div class="legend-item"><div class="leg-dot" style="background: var(--miskin)"></div> Miskin</div>
+            <div class="legend-item"><div class="leg-dot" style="background: var(--rentan)"></div> Rentan Miskin</div>
+            <div class="legend-item"><div class="leg-dot" style="background: var(--belum); border: 2px solid #fff"></div> Dalam Radius</div>
+            <div class="legend-item"><div class="leg-dot" style="background: var(--outside); border: 2px solid #fff"></div> Luar Radius</div>
+            <div class="legend-item"><div class="leg-dot" style="background: var(--sudah); border: 2px solid #fff"></div> Sudah Bantuan</div>
+            <div class="legend-item"><div class="leg-rect" style="background: var(--accent)"></div> Zona Ibadah</div>
+          </div>
+        </section>
+      </aside>
+
+      <section id="map">
+        <div class="loading" id="loadingOverlay">
+          <div class="loading-box">⏳ Memuat data peta kemiskinan...</div>
         </div>
       </section>
+    </main>
 
-      <section class="radius-panel">
-        <div class="radius-row">
-          <span>Radius analisis</span>
-          <strong id="radiusLabel">500 meter</strong>
-        </div>
-        <input id="radiusSlider" type="range" min="100" max="2000" step="50" value="500" />
-      </section>
-    </header>
-
-    <section class="stats-panel">
+    <section class="mini-stats">
       <h2>Dashboard Ringkas</h2>
-      <div class="stats-grid">
-        <div class="stat-card">
-          <span>Terdampak</span>
-          <strong id="totalAffected">0</strong>
-        </div>
-        <div class="stat-card">
-          <span>Cakupan</span>
-          <strong id="coveragePercent">0%</strong>
-        </div>
-        <div class="stat-card">
-          <span>Sangat Miskin</span>
-          <strong id="veryPoorCount">0</strong>
-        </div>
-        <div class="stat-card">
-          <span>Miskin</span>
-          <strong id="poorCount">0</strong>
-        </div>
-        <div class="stat-card">
-          <span>Rentan Miskin</span>
-          <strong id="vulnerableCount">0</strong>
-        </div>
-        <div class="stat-card">
-          <span>Tempat Dipilih</span>
-          <strong id="selectedName">-</strong>
-        </div>
+      <div class="mini-grid">
+        <div class="mini-card"><span>Terdampak</span><strong id="totalAffected">0</strong></div>
+        <div class="mini-card"><span>Cakupan</span><strong id="coveragePercent">0%</strong></div>
+        <div class="mini-card"><span>Sangat Miskin</span><strong id="veryPoorCount">0</strong></div>
+        <div class="mini-card"><span>Miskin</span><strong id="poorCount">0</strong></div>
+        <div class="mini-card"><span>Rentan</span><strong id="vulnerableCount">0</strong></div>
+        <div class="mini-card"><span>Dipilih</span><strong id="selectedName">Semua</strong></div>
       </div>
     </section>
 
-    <aside class="family-panel" id="familyPanel">
+    <aside class="list-panel" id="familyListPanel">
       <div class="panel-header">
         <div>
-          <h2>Daftar Keluarga</h2>
-          <p class="muted" id="familyPanelSubtitle">Pilih tempat ibadah untuk melihat daftar.</p>
+          <h3>Daftar Keluarga Dalam Radius</h3>
+          <p id="familyPanelSubtitle">Pilih tempat ibadah untuk melihat daftar.</p>
         </div>
-        <button class="close-btn" id="closePanel" type="button">×</button>
+        <button class="close-list" id="closeFamilyList" type="button">×</button>
       </div>
       <div class="family-list" id="familyList"></div>
     </aside>
 
+    <div class="kk-panel" id="kkPanel">
+      <div class="kk-panel-header">
+        <h3 id="kkNama">—</h3>
+        <button class="close-kk" id="closeKk" type="button">×</button>
+      </div>
+      <div id="kkRows"></div>
+    </div>
+
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
     <script>
       const API_BASE = "/api/poverty";
-      const fallbackTempatIbadah = [
-        { id: 1, nama: "Masjid Jami Sultan Syarif Abdurrahman", jenis: "masjid", alamat: "Jl. Tanjungpura", kelurahan: "Dalam Bugis", lat: -0.0226, lng: 109.3316 },
-        { id: 2, nama: "Gereja Bethel Indonesia", jenis: "gereja", alamat: "Jl. Gajahmada", kelurahan: "Sungai Bangkong", lat: -0.0334, lng: 109.3253 },
-        { id: 3, nama: "Vihara Bodhisattva", jenis: "vihara", alamat: "Jl. Diponegoro", kelurahan: "Mariana", lat: -0.0289, lng: 109.3401 }
-      ];
-      const fallbackKeluarga = [
-        { id: 1, nama_kk: "Ahmad Fauzi", jumlah_anggota: 5, kategori: "sangat_miskin", kelurahan: "Dalam Bugis", keterangan: "Prioritas bantuan pangan.", lat: -0.0231, lng: 109.3321 },
-        { id: 2, nama_kk: "Siti Rahmah", jumlah_anggota: 3, kategori: "miskin", kelurahan: "Dalam Bugis", keterangan: "Membutuhkan dukungan pendidikan.", lat: -0.0219, lng: 109.3308 },
-        { id: 3, nama_kk: "Budi Santoso", jumlah_anggota: 6, kategori: "rentan_miskin", kelurahan: "Sungai Bangkong", keterangan: "Pendapatan tidak tetap.", lat: -0.0341, lng: 109.3261 },
-        { id: 4, nama_kk: "Maria Goretti", jumlah_anggota: 4, kategori: "miskin", kelurahan: "Mariana", keterangan: "Butuh verifikasi lanjutan.", lat: -0.0295, lng: 109.3412 },
-        { id: 5, nama_kk: "Lim Ah Kow", jumlah_anggota: 2, kategori: "sangat_miskin", kelurahan: "Mariana", keterangan: "Lansia tinggal sendiri.", lat: -0.0501, lng: 109.36 }
-      ];
-
-      const kategoriLabel = {
-        sangat_miskin: "Sangat Miskin",
-        miskin: "Miskin",
-        rentan_miskin: "Rentan Miskin"
+      const KAT_COLOR = {
+        "Sangat Miskin": "#dc2626",
+        "Miskin": "#f97316",
+        "Rentan Miskin": "#eab308"
       };
-
-      const worshipIcon = {
+      const IBADAH_ICON = {
         masjid: "🕌",
         gereja: "⛪",
         pura: "🛕",
@@ -438,36 +806,76 @@
         kelenteng: "🏮",
         lainnya: "⭐"
       };
+      const kategoriLabel = {
+        sangat_miskin: "Sangat Miskin",
+        miskin: "Miskin",
+        rentan_miskin: "Rentan Miskin"
+      };
+
+      const fallbackTempatIbadah = [
+        { id: 1, nama: "Masjid Jami Sultan Syarif Abdurrahman", jenis: "masjid", alamat: "Jl. Tanjungpura", kelurahan: "Dalam Bugis", lat: -0.0226, lng: 109.3316 },
+        { id: 2, nama: "Gereja Bethel Indonesia", jenis: "gereja", alamat: "Jl. Gajahmada", kelurahan: "Sungai Bangkong", lat: -0.0334, lng: 109.3253 },
+        { id: 3, nama: "Vihara Bodhisattva", jenis: "vihara", alamat: "Jl. Diponegoro", kelurahan: "Mariana", lat: -0.0289, lng: 109.3401 }
+      ];
+      const fallbackKeluarga = [
+        { id: 1, nama_kk: "Ahmad Fauzi", jumlah_anggota: 5, kategori: "sangat_miskin", alamat: "Dalam Bugis", kelurahan: "Dalam Bugis", keterangan: "Prioritas bantuan pangan.", lat: -0.0231, lng: 109.3321 },
+        { id: 2, nama_kk: "Siti Rahmah", jumlah_anggota: 3, kategori: "miskin", alamat: "Dalam Bugis", kelurahan: "Dalam Bugis", keterangan: "Membutuhkan dukungan pendidikan.", lat: -0.0219, lng: 109.3308 },
+        { id: 3, nama_kk: "Budi Santoso", jumlah_anggota: 6, kategori: "rentan_miskin", alamat: "Sungai Bangkong", kelurahan: "Sungai Bangkong", keterangan: "Pendapatan tidak tetap.", lat: -0.0341, lng: 109.3261 },
+        { id: 4, nama_kk: "Maria Goretti", jumlah_anggota: 4, kategori: "miskin", alamat: "Mariana", kelurahan: "Mariana", keterangan: "Butuh verifikasi lanjutan.", lat: -0.0295, lng: 109.3412 },
+        { id: 5, nama_kk: "Lim Ah Kow", jumlah_anggota: 2, kategori: "sangat_miskin", alamat: "Mariana", kelurahan: "Mariana", keterangan: "Lansia tinggal sendiri.", lat: -0.0501, lng: 109.36 }
+      ];
 
       const map = L.map("map").setView([-0.0263, 109.3425], 13);
       L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
         maxZoom: 19,
-        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        attribution: "© OpenStreetMap contributors"
       }).addTo(map);
 
-      const worshipLayer = L.layerGroup().addTo(map);
-      const familyLayer = L.layerGroup().addTo(map);
+      const ibadahLayer = L.layerGroup().addTo(map);
+      const kkLayer = L.layerGroup().addTo(map);
+
+      let allIbadah = [];
+      let allKeluarga = [];
+      let activeIbadah = null;
       let radiusCircle = null;
-      let selectedIbadah = null;
-      let currentRadius = 500;
-      let tempatIbadah = [];
-      let keluarga = [];
-      const familyMarkers = new Map();
-      const worshipMarkers = new Map();
+      let toastTimer;
+      const ibadahMarkers = new Map();
+      const kkMarkers = new Map();
 
       const elements = {
+        sidebar: document.getElementById("sidebar"),
+        mobileToggle: document.getElementById("mobileToggle"),
+        toast: document.getElementById("toast"),
+        loadingOverlay: document.getElementById("loadingOverlay"),
+        loadingBox: document.querySelector(".loading-box"),
+        filterKategori: document.getElementById("filterKategori"),
+        filterBantuan: document.getElementById("filterBantuan"),
+        filterRumah: document.getElementById("filterRumah"),
+        ibadahList: document.getElementById("ibadahList"),
+        ibadahCount: document.getElementById("ibadahCount"),
+        radiusPanel: document.getElementById("radiusPanel"),
         radiusSlider: document.getElementById("radiusSlider"),
+        radiusVal: document.getElementById("radiusVal"),
         radiusLabel: document.getElementById("radiusLabel"),
+        saveRadiusBtn: document.getElementById("saveRadiusBtn"),
+        openFamilyListBtn: document.getElementById("openFamilyListBtn"),
+        cntSangat: document.getElementById("cntSangat"),
+        cntMiskin: document.getElementById("cntMiskin"),
+        cntRentan: document.getElementById("cntRentan"),
         totalAffected: document.getElementById("totalAffected"),
         coveragePercent: document.getElementById("coveragePercent"),
         veryPoorCount: document.getElementById("veryPoorCount"),
         poorCount: document.getElementById("poorCount"),
         vulnerableCount: document.getElementById("vulnerableCount"),
         selectedName: document.getElementById("selectedName"),
-        familyPanel: document.getElementById("familyPanel"),
+        familyListPanel: document.getElementById("familyListPanel"),
         familyPanelSubtitle: document.getElementById("familyPanelSubtitle"),
         familyList: document.getElementById("familyList"),
-        closePanel: document.getElementById("closePanel")
+        closeFamilyList: document.getElementById("closeFamilyList"),
+        kkPanel: document.getElementById("kkPanel"),
+        kkNama: document.getElementById("kkNama"),
+        kkRows: document.getElementById("kkRows"),
+        closeKk: document.getElementById("closeKk")
       };
 
       function geoJsonToRows(payload) {
@@ -494,24 +902,51 @@
         }
       }
 
-      function makeWorshipIcon(jenis) {
-        return L.divIcon({
-          className: "",
-          html: `<div class="worship-marker"><span>${worshipIcon[jenis] || worshipIcon.lainnya}</span></div>`,
-          iconSize: [42, 42],
-          iconAnchor: [21, 40],
-          popupAnchor: [0, -36]
-        });
+      function storedRadius(id) {
+        return Number(localStorage.getItem(`poverty-radius-${id}`)) || 500;
       }
 
-      function makeFamilyIcon(isInside) {
-        return L.divIcon({
-          className: "",
-          html: `<div class="family-marker ${isInside ? "inside" : "outside"}">👥</div>`,
-          iconSize: [28, 28],
-          iconAnchor: [14, 14],
-          popupAnchor: [0, -12]
-        });
+      function normalizeIbadah(item) {
+        return {
+          ...item,
+          id: Number(item.id),
+          jenis: String(item.jenis || "lainnya").toLowerCase(),
+          lat: Number(item.lat),
+          lng: Number(item.lng),
+          radius: Number(item.radius) || storedRadius(item.id)
+        };
+      }
+
+      function normalizeKeluarga(item, index) {
+        const kategori = item.kategori || item.kategori_kemiskinan || "miskin";
+        const kategoriKemiskinan = kategoriLabel[kategori] || kategori;
+        const bantuan = item.status_bantuan || (index % 3 === 0 ? "Sudah Menerima" : "Belum Menerima");
+        const kondisi = item.kondisi_rumah || ["Tidak Permanen", "Semi Permanen", "Permanen"][index % 3];
+        return {
+          ...item,
+          id: Number(item.id),
+          lat: Number(item.lat),
+          lng: Number(item.lng),
+          kategori,
+          kategori_kemiskinan: kategoriKemiskinan,
+          status_bantuan: bantuan,
+          kondisi_rumah: kondisi,
+          penghasilan: Number(item.penghasilan) || (kategori === "sangat_miskin" ? 600000 : kategori === "miskin" ? 1000000 : 1500000)
+        };
+      }
+
+      function ibadahIcon(jenis) {
+        return IBADAH_ICON[jenis] || IBADAH_ICON.lainnya;
+      }
+
+      function slugKat(label) {
+        if (label === "Sangat Miskin") return "sangat";
+        if (label === "Miskin") return "miskin";
+        return "rentan";
+      }
+
+      function formatRupiah(value) {
+        return `Rp ${Number(value || 0).toLocaleString("id-ID")}`;
       }
 
       function formatMeters(value) {
@@ -519,165 +954,339 @@
         return `${Math.round(value).toLocaleString("id-ID")} m`;
       }
 
+      function showToast(message) {
+        elements.toast.textContent = message;
+        elements.toast.classList.add("show");
+        clearTimeout(toastTimer);
+        toastTimer = setTimeout(() => elements.toast.classList.remove("show"), 4000);
+      }
+
       function distanceBetween(a, b) {
         return L.latLng(a.lat, a.lng).distanceTo(L.latLng(b.lat, b.lng));
       }
 
       function nearestWorshipDistance(family) {
-        if (!tempatIbadah.length) return null;
-        return Math.min(...tempatIbadah.map((ibadah) => distanceBetween(family, ibadah)));
+        if (!allIbadah.length) return null;
+        return Math.min(...allIbadah.map((ibadah) => distanceBetween(family, ibadah)));
+      }
+
+      function getFiltered(keluarga) {
+        const kat = elements.filterKategori.value;
+        const bantuan = elements.filterBantuan.value;
+        const rumah = elements.filterRumah.value;
+        return keluarga.filter((item) =>
+          (kat === "all" || item.kategori_kemiskinan === kat) &&
+          (bantuan === "all" || item.status_bantuan === bantuan) &&
+          (rumah === "all" || item.kondisi_rumah === rumah)
+        );
       }
 
       function familiesInRadius() {
-        if (!selectedIbadah) return [];
-        return keluarga
-          .map((item) => ({ ...item, distance: distanceBetween(item, selectedIbadah) }))
-          .filter((item) => item.distance <= currentRadius)
+        if (!activeIbadah) return [];
+        return getFiltered(allKeluarga)
+          .map((item) => ({ ...item, distance: distanceBetween(item, activeIbadah) }))
+          .filter((item) => item.distance <= activeIbadah.radius)
           .sort((a, b) => a.distance - b.distance);
       }
 
+      function updateSummary(keluarga) {
+        elements.cntSangat.textContent = keluarga.filter((item) => item.kategori_kemiskinan === "Sangat Miskin").length;
+        elements.cntMiskin.textContent = keluarga.filter((item) => item.kategori_kemiskinan === "Miskin").length;
+        elements.cntRentan.textContent = keluarga.filter((item) => item.kategori_kemiskinan === "Rentan Miskin").length;
+      }
+
+      function updateMiniStats(rows) {
+        const counts = rows.reduce((acc, item) => {
+          acc[item.kategori_kemiskinan] = (acc[item.kategori_kemiskinan] || 0) + 1;
+          return acc;
+        }, {});
+        const denominator = getFiltered(allKeluarga).length || allKeluarga.length;
+        elements.totalAffected.textContent = rows.length;
+        elements.coveragePercent.textContent = denominator ? `${Math.round((rows.length / denominator) * 100)}%` : "0%";
+        elements.veryPoorCount.textContent = counts["Sangat Miskin"] || 0;
+        elements.poorCount.textContent = counts.Miskin || 0;
+        elements.vulnerableCount.textContent = counts["Rentan Miskin"] || 0;
+        elements.selectedName.textContent = activeIbadah ? activeIbadah.nama.split(" ").slice(0, 2).join(" ") : "Semua";
+      }
+
+      function makeWorshipIcon(jenis) {
+        return L.divIcon({
+          className: "",
+          html: `<div class="worship-marker"><span>${ibadahIcon(jenis)}</span></div>`,
+          iconSize: [38, 38],
+          iconAnchor: [19, 36],
+          popupAnchor: [0, -34]
+        });
+      }
+
+      function makeFamilyIcon(item, isInside) {
+        const color = isInside ? "#dc2626" : "#2563eb";
+        const bantuanClass = item.status_bantuan === "Sudah Menerima" ? "sudah" : "";
+        return L.divIcon({
+          className: "",
+          html: `<div class="family-dot ${isInside ? "inside" : "outside"} ${bantuanClass}" style="background:${color}"></div>`,
+          iconSize: [24, 24],
+          iconAnchor: [12, 12],
+          popupAnchor: [0, -10]
+        });
+      }
+
+      function badgeHtml(label) {
+        return `<span class="badge ${slugKat(label)}">${label}</span>`;
+      }
+
       function familyPopup(item) {
         const nearest = nearestWorshipDistance(item);
         return `
           <h3>${item.nama_kk}</h3>
           <p><strong>Anggota:</strong> ${item.jumlah_anggota} orang</p>
-          <p><strong>Kategori:</strong> <span class="badge ${item.kategori}">${kategoriLabel[item.kategori]}</span></p>
+          <p><strong>Kategori:</strong> ${badgeHtml(item.kategori_kemiskinan)}</p>
+          <p><strong>Status Bantuan:</strong> ${item.status_bantuan}</p>
+          <p><strong>Kondisi Rumah:</strong> ${item.kondisi_rumah}</p>
           <p><strong>Catatan:</strong> ${item.keterangan || "-"}</p>
           <p><strong>Jarak tempat ibadah terdekat:</strong> ${formatMeters(nearest)}</p>
         `;
       }
 
       function worshipPopup(item) {
-        const count = selectedIbadah?.id === item.id ? familiesInRadius().length : keluarga.filter((family) => distanceBetween(family, item) <= currentRadius).length;
+        const count = allKeluarga.filter((family) => distanceBetween(family, item) <= item.radius).length;
         return `
           <h3>${item.nama}</h3>
           <p><strong>Jenis:</strong> ${item.jenis}</p>
           <p><strong>Alamat:</strong> ${item.alamat || "-"}</p>
+          <p><strong>Radius:</strong> ${item.radius} m</p>
           <p><strong>Keluarga dalam radius:</strong> ${count}</p>
+          <button class="popup-btn" onclick="window.selectIbadahFromPopup(${item.id})">Pilih Zona</button>
           <button class="popup-btn" onclick="window.openFamilyPanel()">Lihat Daftar Keluarga</button>
         `;
       }
 
-      function selectIbadah(item) {
-        selectedIbadah = item;
-        updateCoverage();
-        elements.familyPanel.classList.remove("open");
-      }
-
-      function renderMarkers() {
-        worshipLayer.clearLayers();
-        familyLayer.clearLayers();
-        worshipMarkers.clear();
-        familyMarkers.clear();
-
-        tempatIbadah.forEach((item) => {
-          const marker = L.marker([item.lat, item.lng], { icon: makeWorshipIcon(item.jenis), title: item.nama })
+      function renderIbadahMarkers() {
+        ibadahLayer.clearLayers();
+        ibadahMarkers.clear();
+        allIbadah.forEach((item) => {
+          const marker = L.marker([item.lat, item.lng], {
+            icon: makeWorshipIcon(item.jenis),
+            title: item.nama
+          })
             .bindPopup(() => worshipPopup(item))
             .on("click", () => selectIbadah(item));
-          marker.addTo(worshipLayer);
-          worshipMarkers.set(item.id, marker);
+          marker.addTo(ibadahLayer);
+          ibadahMarkers.set(item.id, marker);
+        });
+      }
+
+      function renderIbadahList() {
+        elements.ibadahCount.textContent = `(${allIbadah.length})`;
+        if (!allIbadah.length) {
+          elements.ibadahList.innerHTML = `<div style="color:var(--muted);font-size:.82rem;padding:8px 0">Belum ada tempat ibadah.</div>`;
+          return;
+        }
+
+        elements.ibadahList.innerHTML = [
+          `<div class="ibadah-item ${!activeIbadah ? "active" : ""}" data-id="all">
+            <span class="ibadah-icon">🗺️</span>
+            <div class="ibadah-info"><strong>Semua Tempat Ibadah</strong><small>${allKeluarga.length} keluarga total</small></div>
+          </div>`
+        ].concat(allIbadah.map((item) => {
+          const count = allKeluarga.filter((family) => distanceBetween(family, item) <= item.radius).length;
+          return `<div class="ibadah-item ${activeIbadah?.id === item.id ? "active" : ""}" data-id="${item.id}">
+            <span class="ibadah-icon">${ibadahIcon(item.jenis)}</span>
+            <div class="ibadah-info">
+              <strong>${item.nama}</strong>
+              <small>${item.jenis} · ${count} keluarga · r=${item.radius}m</small>
+            </div>
+          </div>`;
+        })).join("");
+
+        elements.ibadahList.querySelectorAll(".ibadah-item").forEach((item) => {
+          item.addEventListener("click", () => {
+            const id = item.dataset.id;
+            if (id === "all") {
+              selectAllIbadah();
+            } else {
+              const ibadah = allIbadah.find((row) => row.id === Number(id));
+              if (ibadah) selectIbadah(ibadah);
+            }
+          });
+        });
+      }
+
+      function renderKkMarkers() {
+        kkLayer.clearLayers();
+        kkMarkers.clear();
+        const filtered = getFiltered(allKeluarga);
+        const insideIds = new Set(familiesInRadius().map((item) => item.id));
+
+        filtered.forEach((item) => {
+          const marker = L.marker([item.lat, item.lng], {
+            icon: makeFamilyIcon(item, activeIbadah ? insideIds.has(item.id) : false),
+            title: item.nama_kk
+          })
+            .bindPopup(() => familyPopup(item))
+            .on("click", () => showKkPanel(item));
+          marker.addTo(kkLayer);
+          kkMarkers.set(item.id, marker);
         });
 
-        keluarga.forEach((item) => {
-          const marker = L.marker([item.lat, item.lng], { icon: makeFamilyIcon(false), title: item.nama_kk })
-            .bindPopup(() => familyPopup(item));
-          marker.addTo(familyLayer);
-          familyMarkers.set(item.id, marker);
-        });
+        updateSummary(filtered);
+      }
+
+      function clearRadiusCircle() {
+        if (radiusCircle) {
+          map.removeLayer(radiusCircle);
+          radiusCircle = null;
+        }
+      }
+
+      function drawRadiusCircle() {
+        clearRadiusCircle();
+        if (!activeIbadah) return;
+        radiusCircle = L.circle([activeIbadah.lat, activeIbadah.lng], {
+          radius: activeIbadah.radius,
+          color: "#7c3aed",
+          weight: 2,
+          opacity: 0.7,
+          fillColor: "#7c3aed",
+          fillOpacity: 0.08,
+          dashArray: "6,6"
+        }).addTo(map);
+      }
+
+      function selectIbadah(item) {
+        activeIbadah = item;
+        elements.radiusPanel.style.display = "";
+        elements.radiusSlider.value = item.radius;
+        elements.radiusVal.textContent = `${item.radius} m`;
+        elements.radiusLabel.textContent = `${item.radius} m`;
+        drawRadiusCircle();
+        map.setView([item.lat, item.lng], 15);
+        renderIbadahList();
+        updateCoverage();
+      }
+
+      function selectAllIbadah() {
+        activeIbadah = null;
+        clearRadiusCircle();
+        elements.radiusPanel.style.display = "none";
+        elements.familyListPanel.classList.remove("show");
+        map.setView([-0.0263, 109.3425], 13);
+        renderIbadahList();
+        updateCoverage();
+      }
+
+      function updateCoverage() {
+        const rows = familiesInRadius();
+        if (activeIbadah) {
+          drawRadiusCircle();
+        }
+        renderKkMarkers();
+        updateMiniStats(activeIbadah ? rows : getFiltered(allKeluarga));
+        renderFamilyPanel();
+
+        if (activeIbadah) {
+          const marker = ibadahMarkers.get(activeIbadah.id);
+          if (marker?.isPopupOpen()) marker.setPopupContent(worshipPopup(activeIbadah));
+        }
       }
 
       function renderFamilyPanel() {
         const rows = familiesInRadius();
-        elements.familyPanelSubtitle.textContent = selectedIbadah
-          ? `${selectedIbadah.nama} • radius ${currentRadius} meter`
+        elements.familyPanelSubtitle.textContent = activeIbadah
+          ? `${activeIbadah.nama} • radius ${activeIbadah.radius} meter`
           : "Pilih tempat ibadah untuk melihat daftar.";
         elements.familyList.innerHTML = rows.length
           ? rows.map((item) => `
               <article class="family-item">
-                <strong>${item.nama_kk}</strong>
-                <span class="badge ${item.kategori}">${kategoriLabel[item.kategori]}</span>
-                <p><small>Jarak ${formatMeters(item.distance)} • ${item.jumlah_anggota} anggota • ${item.kelurahan || "-"}</small></p>
+                <div class="ibadah-icon">👥</div>
+                <div class="family-info">
+                  <strong>${item.nama_kk}</strong>
+                  <small>${formatMeters(item.distance)} • ${item.jumlah_anggota} anggota • ${item.kelurahan || "-"}</small><br>
+                  <span class="badge ${slugKat(item.kategori_kemiskinan)}">${item.kategori_kemiskinan}</span>
+                </div>
               </article>
             `).join("")
-          : `<p class="muted">Tidak ada keluarga dalam radius saat ini.</p>`;
+          : `<p style="color:var(--muted);font-size:.82rem">Tidak ada keluarga dalam radius dan filter saat ini.</p>`;
       }
 
-      function updateStats(rows) {
-        const total = rows.length;
-        const counts = rows.reduce((acc, item) => {
-          acc[item.kategori] = (acc[item.kategori] || 0) + 1;
-          return acc;
-        }, {});
-        elements.totalAffected.textContent = total;
-        elements.coveragePercent.textContent = keluarga.length ? `${Math.round((total / keluarga.length) * 100)}%` : "0%";
-        elements.veryPoorCount.textContent = counts.sangat_miskin || 0;
-        elements.poorCount.textContent = counts.miskin || 0;
-        elements.vulnerableCount.textContent = counts.rentan_miskin || 0;
-        elements.selectedName.textContent = selectedIbadah ? selectedIbadah.nama.split(" ").slice(0, 2).join(" ") : "-";
-      }
-
-      function updateCoverage() {
-        elements.radiusLabel.textContent = `${currentRadius} meter`;
-
-        if (radiusCircle) {
-          radiusCircle.remove();
-          radiusCircle = null;
-        }
-
-        const rows = familiesInRadius();
-        const insideIds = new Set(rows.map((item) => item.id));
-
-        if (selectedIbadah) {
-          radiusCircle = L.circle([selectedIbadah.lat, selectedIbadah.lng], {
-            radius: currentRadius,
-            color: "#f4a261",
-            weight: 2,
-            fillColor: "#f4a261",
-            fillOpacity: 0.18
-          }).addTo(map);
-        }
-
-        keluarga.forEach((item) => {
-          const marker = familyMarkers.get(item.id);
-          if (!marker) return;
-          marker.setIcon(makeFamilyIcon(insideIds.has(item.id)));
-          if (marker.isPopupOpen()) marker.setPopupContent(familyPopup(item));
-        });
-
-        if (selectedIbadah) {
-          const marker = worshipMarkers.get(selectedIbadah.id);
-          if (marker?.isPopupOpen()) marker.setPopupContent(worshipPopup(selectedIbadah));
-        }
-
-        updateStats(rows);
-        renderFamilyPanel();
+      function showKkPanel(item) {
+        elements.kkNama.textContent = item.nama_kk;
+        elements.kkPanel.classList.add("show");
+        elements.kkRows.innerHTML = `
+          <div class="kk-row"><span>Alamat</span><strong style="text-align:right;max-width:200px">${item.alamat || "-"}</strong></div>
+          <div class="kk-row"><span>Jumlah Anggota</span><strong>${item.jumlah_anggota} orang</strong></div>
+          <div class="kk-row"><span>Penghasilan/bln</span><strong>${formatRupiah(item.penghasilan)}</strong></div>
+          <div class="kk-row"><span>Kondisi Rumah</span><strong>${item.kondisi_rumah}</strong></div>
+          <div class="kk-row"><span>Kategori</span><span class="badge ${slugKat(item.kategori_kemiskinan)}">${item.kategori_kemiskinan}</span></div>
+          <div class="kk-row"><span>Status Bantuan</span><span class="badge ${item.status_bantuan === "Sudah Menerima" ? "sudah" : "belum"}">${item.status_bantuan}</span></div>
+          <div class="kk-row"><span>Jarak Terdekat</span><strong>${formatMeters(nearestWorshipDistance(item))}</strong></div>
+          ${item.keterangan ? `<div class="kk-row"><span>Keterangan</span><strong style="text-align:right;max-width:200px">${item.keterangan}</strong></div>` : ""}
+        `;
       }
 
       window.openFamilyPanel = function () {
+        if (!activeIbadah && allIbadah.length) {
+          selectIbadah(allIbadah[0]);
+        }
         renderFamilyPanel();
-        elements.familyPanel.classList.add("open");
+        elements.familyListPanel.classList.add("show");
+      };
+
+      window.selectIbadahFromPopup = function (id) {
+        const ibadah = allIbadah.find((item) => item.id === Number(id));
+        if (ibadah) selectIbadah(ibadah);
       };
 
       elements.radiusSlider.addEventListener("input", (event) => {
-        currentRadius = Number(event.target.value);
+        if (!activeIbadah) return;
+        activeIbadah.radius = Number(event.target.value);
+        elements.radiusVal.textContent = `${activeIbadah.radius} m`;
+        elements.radiusLabel.textContent = `${activeIbadah.radius} m`;
         updateCoverage();
       });
 
-      elements.closePanel.addEventListener("click", () => {
-        elements.familyPanel.classList.remove("open");
+      elements.saveRadiusBtn.addEventListener("click", () => {
+        if (!activeIbadah) return;
+        localStorage.setItem(`poverty-radius-${activeIbadah.id}`, String(activeIbadah.radius));
+        showToast(`Radius ${activeIbadah.nama} disimpan: ${activeIbadah.radius} m`);
+        renderIbadahList();
       });
 
-      async function init() {
-        [tempatIbadah, keluarga] = await Promise.all([
-          fetchRows(`${API_BASE}/tempat-ibadah`, fallbackTempatIbadah),
-          fetchRows(`${API_BASE}/keluarga`, fallbackKeluarga)
-        ]);
-        renderMarkers();
-        selectedIbadah = tempatIbadah[0] || null;
-        updateCoverage();
+      elements.openFamilyListBtn.addEventListener("click", () => window.openFamilyPanel());
+      elements.closeFamilyList.addEventListener("click", () => elements.familyListPanel.classList.remove("show"));
+      elements.closeKk.addEventListener("click", () => elements.kkPanel.classList.remove("show"));
+      elements.mobileToggle.addEventListener("click", () => elements.sidebar.classList.toggle("is-open"));
+
+      ["filterKategori", "filterBantuan", "filterRumah"].forEach((id) => {
+        document.getElementById(id).addEventListener("change", () => {
+          updateCoverage();
+          renderIbadahList();
+        });
+      });
+
+      window.addEventListener("resize", () => setTimeout(() => map.invalidateSize(), 100));
+
+      async function loadAll() {
+        try {
+          const [ibadahRows, keluargaRows] = await Promise.all([
+            fetchRows(`${API_BASE}/tempat-ibadah`, fallbackTempatIbadah),
+            fetchRows(`${API_BASE}/keluarga`, fallbackKeluarga)
+          ]);
+
+          allIbadah = ibadahRows.map(normalizeIbadah);
+          allKeluarga = keluargaRows.map(normalizeKeluarga);
+
+          elements.loadingOverlay.style.display = "none";
+          renderIbadahMarkers();
+          renderIbadahList();
+          updateCoverage();
+          showToast(`Data dimuat: ${allIbadah.length} tempat ibadah, ${allKeluarga.length} keluarga`);
+        } catch (error) {
+          elements.loadingBox.textContent = `❌ Gagal memuat: ${error.message}`;
+        }
       }
 
-      init();
+      loadAll();
     </script>
   </body>
 </html>
