diff --git a/assets/js/app.js b/assets/js/app.js
new file mode 100644
index 0000000..3ea1645
--- /dev/null
+++ b/assets/js/app.js
@@ -0,0 +1,1357 @@
+let map;
+let rumahIbadah = [];
+let keluarga = [];
+let users = [];
+let musibah = [];
+let pemberdayaan = [];
+let rumahIbadahLayer;
+let keluargaLayer;
+let radiusLayer;
+let routingControl = null;
+let selectedMarker = null;
+
+const user = window.SIPANTAS_USER || {};
+const role = window.SIPANTAS_ROLE || 'guest';
+const caps = window.SIPANTAS_CAPS || {};
+const linkedRumahIbadahId = Number(user.rumah_ibadah_id || 0);
+
+const guideConfig = {
+  admin: {
+    title: 'Kelola sistem dari data sampai laporan',
+    text: 'Mulai dari validasi data, jalankan analisis, lalu pantau blank spot.',
+    actionTab: 'validasi',
+    actionLabel: 'Buka Verifikasi',
+    helper: 'Admin dapat mengelola data, verifikasi akun, menjalankan analisis, dan membuat laporan.',
+    steps: [
+      ['Verifikasi akun dan usulan', 'Buka menu Akun atau Verifikasi untuk memastikan data yang masuk layak dipakai.'],
+      ['Atur rumah ibadah', 'Pastikan radius, kuota, dan dana sosial setiap rumah ibadah sudah benar.'],
+      ['Jalankan analisis', 'Gunakan tombol analisis agar status Ditanggung dan Blank Spot diperbarui.'],
+      ['Pantau laporan', 'Export blank spot untuk prioritas bantuan pemerintah.']
+    ]
+  },
+  dinas: {
+    title: 'Pantau cakupan dan prioritas bantuan',
+    text: 'Fokus pada keluarga valid, blank spot, dan laporan prioritas.',
+    actionTab: 'peta',
+    actionLabel: 'Lihat Peta Data',
+    helper: 'Dinas dapat melihat cakupan bantuan, menjalankan analisis, dan mengunduh data blank spot.',
+    steps: [
+      ['Cek data valid', 'Buka Verifikasi untuk melihat usulan yang masih perlu dicek.'],
+      ['Jalankan analisis', 'Sistem mencocokkan keluarga dengan rumah ibadah berdasarkan radius dan kuota.'],
+      ['Lihat blank spot', 'Gunakan filter status Blank Spot pada peta.'],
+      ['Export laporan', 'Unduh data prioritas untuk koordinasi tindak lanjut.']
+    ]
+  },
+  rumah_ibadah: {
+    title: 'Atur layanan rumah ibadah kamu',
+    text: 'Perbarui radius, kuota, dan catat bantuan untuk keluarga tanggungan.',
+    actionTab: 'rumah-ibadah',
+    actionLabel: 'Atur Layanan',
+    helper: 'Pengurus rumah ibadah bisa mengatur radius layanan, kuota, dana sosial, dan mencatat penyaluran bantuan.',
+    steps: [
+      ['Buka Layanan Saya', 'Cek profil rumah ibadah yang terhubung dengan akunmu.'],
+      ['Atur radius dan kuota', 'Sesuaikan jangkauan bantuan dengan kemampuan layanan.'],
+      ['Cek tanggungan', 'Lihat keluarga yang masuk dalam radius setelah analisis dijalankan.'],
+      ['Catat bantuan', 'Simpan riwayat bantuan agar tidak terjadi tumpang tindih.']
+    ]
+  },
+  relawan: {
+    title: 'Bantu validasi data lapangan',
+    text: 'Input usulan, cek lokasi, lalu tandai status verifikasinya.',
+    actionTab: 'validasi',
+    actionLabel: 'Buka Validasi',
+    helper: 'Relawan membantu memasukkan usulan dan memvalidasi kondisi keluarga di lapangan.',
+    steps: [
+      ['Input usulan', 'Buka menu Input Keluarga dan klik lokasi rumah pada peta.'],
+      ['Lengkapi data', 'Isi identitas, tingkat kerentanan, dan kebutuhan utama.'],
+      ['Verifikasi', 'Tandai data valid atau tidak valid setelah survei.'],
+      ['Catat bantuan', 'Catat bantuan bila ikut mendistribusikan.']
+    ]
+  },
+  masyarakat: {
+    title: 'Ajukan keluarga yang membutuhkan bantuan',
+    text: 'Pilih lokasi, isi data keluarga, lalu kirim usulan untuk diverifikasi.',
+    actionTab: 'input',
+    actionLabel: 'Ajukan Bantuan',
+    helper: 'Masyarakat dapat mengajukan data keluarga yang membutuhkan bantuan dan melihat status usulannya.',
+    steps: [
+      ['Klik Ajukan Bantuan', 'Buka menu Ajukan Bantuan dari panel sebelah kiri.'],
+      ['Pilih lokasi rumah', 'Klik titik rumah pada peta sampai koordinat terisi.'],
+      ['Isi data keluarga', 'Lengkapi data KK, anggota keluarga, kerentanan, dan kebutuhan.'],
+      ['Kirim usulan', 'Data akan masuk sebagai Menunggu Verifikasi.']
+    ]
+  }
+};
+
+const statusColors = {
+  'Ditanggung': '#16a34a',
+  'Blank Spot': '#dc2626',
+  'Menunggu Verifikasi': '#f59e0b',
+  'Tidak Valid': '#6b7280',
+  'Bantuan Pemerintah': '#7c3aed',
+  'Butuh Bantuan Lanjutan': '#fb7185'
+};
+
+function initMap() {
+  map = L.map('map', { zoomControl: false }).setView([-0.0263, 109.3425], 13);
+  L.control.zoom({ position: 'bottomright' }).addTo(map);
+
+  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    maxZoom: 19,
+    attribution: '© OpenStreetMap contributors'
+  }).addTo(map);
+
+  radiusLayer = L.layerGroup().addTo(map);
+  rumahIbadahLayer = L.layerGroup().addTo(map);
+  keluargaLayer = L.layerGroup().addTo(map);
+
+  map.on('click', handleMapClick);
+}
+
+async function handleMapClick(e) {
+  const lat = e.latlng.lat.toFixed(7);
+  const lng = e.latlng.lng.toFixed(7);
+  const activeTab = document.querySelector('.tab.active')?.dataset.tab || 'dashboard';
+
+  if (activeTab !== 'input' && activeTab !== 'musibah' && !(activeTab === 'rumah-ibadah' && caps.canCreateRI)) {
+    toast('Untuk mengisi titik lokasi, buka menu Input Keluarga, Musibah, atau Rumah Ibadah terlebih dahulu.');
+    setHelpContext(activeTab);
+    return;
+  }
+
+  if (selectedMarker) map.removeLayer(selectedMarker);
+  selectedMarker = L.marker([lat, lng]).addTo(map).bindPopup('Titik lokasi dipilih').openPopup();
+
+  if (activeTab === 'rumah-ibadah' && caps.canCreateRI) {
+    setValue('riLat', lat);
+    setValue('riLng', lng);
+    await fillAddress(lat, lng, 'riAlamat');
+    toast('Titik rumah ibadah dipilih. Lanjut lengkapi data layanan.');
+  } else if (activeTab === 'musibah') {
+    setValue('musibahLat', lat);
+    setValue('musibahLng', lng);
+    await fillAddress(lat, lng, 'musibahAlamat');
+    toast('Lokasi kejadian dipilih. Lanjut lengkapi laporan musibah.');
+  } else {
+    setValue('lat', lat);
+    setValue('lng', lng);
+    await fillAddress(lat, lng, 'kelAlamat');
+    toast('Titik rumah keluarga dipilih. Lanjut lengkapi form.');
+  }
+}
+
+async function fillAddress(lat, lng, targetId) {
+  try {
+    const url = `https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}`;
+    const res = await fetch(url);
+    const data = await res.json();
+    setValue(targetId, data.display_name || '');
+  } catch (error) {
+    toast('Alamat otomatis gagal dimuat. Isi alamat secara manual.');
+  }
+}
+
+function initUI() {
+  document.querySelectorAll('.tab').forEach(btn => {
+    btn.addEventListener('click', () => setActiveTab(btn.dataset.tab));
+  });
+
+  onClick('btnSimpanKeluarga', simpanKeluarga);
+  onClick('btnBersihkanKeluarga', bersihkanFormKeluarga);
+  onClick('btnAnalisis', jalankanAnalisis);
+  onClick('btnRefresh', loadAllData);
+  onClick('btnLocate', locateMe);
+  onClick('btnFitMap', fitAllMarkers);
+  onClick('btnSimpanRI', simpanRumahIbadah);
+  onClick('btnRIBaru', resetFormRumahIbadah);
+  onClick('btnPrintSummary', () => window.print());
+  onClick('btnTambahAnggota', () => addAnggotaForm());
+  onClick('btnSimpanMusibah', simpanMusibah);
+  onInput('musibahKeluarga', isiLokasiMusibahDariKeluarga);
+  onClick('btnGoMusibah', () => setActiveTab('musibah'));
+  initAnggotaDefault();
+  const tanggalMusibah = document.getElementById('musibahTanggal');
+  if (tanggalMusibah && !tanggalMusibah.value) tanggalMusibah.value = new Date().toISOString().slice(0, 10);
+
+  onInput('filterStatus', renderAll);
+  onInput('searchText', renderAll);
+
+  const riRadius = document.getElementById('riRadius');
+  if (riRadius) {
+    riRadius.addEventListener('input', () => setText('riRadiusLabel', riRadius.value));
+  }
+
+  setupLayerButton('btnLayerRadius', radiusLayer);
+  setupLayerButton('btnLayerRI', rumahIbadahLayer);
+  setupLayerButton('btnLayerKK', keluargaLayer);
+  setupPanelToggle();
+  initGuides();
+  onClick('btnGoInput', () => { setActiveTab('input'); toast('Klik titik rumah pada peta, lalu lengkapi form.'); });
+  onClick('btnGoMap', () => setActiveTab('peta'));
+}
+
+function setupLayerButton(buttonId, layer) {
+  const button = document.getElementById(buttonId);
+  if (!button) return;
+
+  button.addEventListener('click', () => {
+    if (map.hasLayer(layer)) {
+      map.removeLayer(layer);
+      button.classList.remove('active');
+    } else {
+      layer.addTo(map);
+      button.classList.add('active');
+    }
+  });
+}
+
+function setupPanelToggle() {
+  const body = document.body;
+  const collapse = document.getElementById('btnPanelCollapse');
+  const open = document.getElementById('btnPanelOpen');
+
+  const setCollapsed = (value) => {
+    body.classList.toggle('panel-collapsed', value);
+    setTimeout(() => map && map.invalidateSize(), 260);
+  };
+
+  if (collapse) collapse.addEventListener('click', () => setCollapsed(true));
+  if (open) open.addEventListener('click', () => setCollapsed(false));
+}
+
+function setActiveTab(tabName) {
+  document.querySelectorAll('.tab').forEach(b => b.classList.toggle('active', b.dataset.tab === tabName));
+  document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
+  const panel = document.getElementById(`tab-${tabName}`);
+  if (panel) panel.classList.add('active');
+  setHelpContext(tabName);
+}
+
+function getGuide() {
+  return guideConfig[role] || guideConfig.masyarakat;
+}
+
+function initGuides() {
+  const guide = getGuide();
+  setText('quickGuideTitle', guide.title);
+  setText('quickGuideText', guide.text);
+  setText('dashboardSubtitle', guide.helper);
+
+  const primary = document.getElementById('btnGuidePrimary');
+  if (primary) {
+    primary.textContent = guide.actionLabel;
+    primary.addEventListener('click', () => setActiveTab(guide.actionTab));
+  }
+
+  const roleSteps = document.getElementById('roleSteps');
+  if (roleSteps) {
+    roleSteps.innerHTML = guide.steps.map((step, index) => `
+      <div class="guide-step">
+        <i>${index + 1}</i>
+        <b>${escapeHtml(step[0])}</b>
+        <span>${escapeHtml(step[1])}</span>
+      </div>
+    `).join('');
+  }
+
+  const openGuide = () => showGuideModal(false);
+  onClick('btnOpenGuide', openGuide);
+  onClick('btnCloseGuide', closeGuideModal);
+  onClick('guideBackdrop', closeGuideModal);
+  onClick('btnGuideLater', closeGuideModal);
+  onClick('btnGuideAction', () => {
+    closeGuideModal();
+    setActiveTab(guide.actionTab);
+  });
+
+  const firstKey = `sipantas-guide-seen-${role}`;
+  if (!localStorage.getItem(firstKey)) {
+    setTimeout(() => showGuideModal(true), 600);
+    localStorage.setItem(firstKey, '1');
+  }
+
+  setHelpContext('dashboard');
+}
+
+function showGuideModal(isFirstTime = false) {
+  const guide = getGuide();
+  setText('guideTitle', guide.title);
+  setText('guideDescription', isFirstTime ? 'Sebelum mulai, lihat alur singkat agar tidak bingung memakai fitur utama.' : guide.text);
+  setText('btnGuideAction', guide.actionLabel);
+
+  const list = document.getElementById('guideList');
+  if (list) {
+    list.innerHTML = guide.steps.map((step, index) => `
+      <div class="guide-modal-step">
+        <i>${index + 1}</i>
+        <div><b>${escapeHtml(step[0])}</b><span>${escapeHtml(step[1])}</span></div>
+      </div>
+    `).join('');
+  }
+
+  const modal = document.getElementById('guideModal');
+  if (modal) {
+    modal.classList.add('show');
+    modal.setAttribute('aria-hidden', 'false');
+  }
+}
+
+function closeGuideModal() {
+  const modal = document.getElementById('guideModal');
+  if (modal) {
+    modal.classList.remove('show');
+    modal.setAttribute('aria-hidden', 'true');
+  }
+}
+
+function setHelpContext(tabName) {
+  const helper = document.getElementById('mapHelperText');
+  if (!helper) return;
+  const labels = {
+    dashboard: 'Ringkasan ada di panel. Peta tetap bisa digeser dan diperbesar.',
+    peta: 'Klik marker untuk melihat detail. Gunakan filter pada panel untuk mempersempit data.',
+    input: 'Klik titik rumah keluarga di peta. Koordinat dan alamat akan masuk ke form.',
+    'rumah-ibadah': caps.canCreateRI ? 'Klik lokasi rumah ibadah pada peta, lalu isi radius, kuota, dan dana sosial.' : 'Pilih rumah ibadah dari daftar untuk mengatur radius dan kuota layanan.',
+    validasi: 'Pilih data pada daftar validasi, fokuskan lokasi, lalu ubah status verifikasi.',
+    bantuan: 'Gunakan tombol Rute untuk melihat jalur dan Catat Bantuan untuk menyimpan riwayat.',
+    musibah: 'Pilih keluarga terkait atau klik lokasi kejadian pada peta, lalu kirim laporan musibah.',
+    pemberdayaan: 'Daftar ini berisi anggota keluarga yang masih mampu bekerja dan bisa diarahkan ke program produktif.',
+    laporan: 'Gunakan panel laporan untuk mengunduh atau mencetak ringkasan.',
+    akun: 'Setujui akun resmi yang sudah sesuai, atau tolak jika datanya tidak valid.'
+  };
+  helper.textContent = labels[tabName] || 'Geser atau zoom peta untuk melihat sebaran data.';
+}
+
+async function loadAllData() {
+  try {
+    const requests = [
+      fetch('api/rumah_ibadah.php'),
+      fetch('api/keluarga.php'),
+      fetch('api/musibah.php')
+    ];
+    if (caps.canManagePemberdayaan) requests.push(fetch('api/pemberdayaan.php'));
+    const responses = await Promise.all(requests);
+    const [riJson, kelJson, musibahJson, pemberdayaanJson] = await Promise.all(responses.map(r => r.json()));
+
+    if (!riJson.success) throw new Error(riJson.message || 'Gagal memuat rumah ibadah');
+    if (!kelJson.success) throw new Error(kelJson.message || 'Gagal memuat keluarga');
+    if (!musibahJson.success) throw new Error(musibahJson.message || 'Gagal memuat laporan musibah');
+
+    rumahIbadah = riJson.data || [];
+    keluarga = kelJson.data || [];
+    musibah = musibahJson.data || [];
+    pemberdayaan = pemberdayaanJson && pemberdayaanJson.success ? (pemberdayaanJson.data || []) : [];
+
+    if (role === 'rumah_ibadah' && linkedRumahIbadahId) {
+      const own = rumahIbadah.find(ri => Number(ri.id) === linkedRumahIbadahId);
+      if (own && !getValue('riId')) fillRumahIbadahForm(own.id);
+    }
+
+    if (caps.canManageUsers) {
+      await loadUsers();
+    }
+
+    renderAll();
+  } catch (error) {
+    toast(error.message || 'Gagal memuat data.');
+  }
+}
+
+async function loadUsers() {
+  if (!caps.canManageUsers) return;
+  try {
+    const res = await fetch('api/users.php');
+    const json = await res.json();
+    if (!json.success) throw new Error(json.message || 'Gagal memuat akun');
+    users = json.data || [];
+  } catch (error) {
+    toast(error.message || 'Gagal memuat daftar akun.');
+  }
+}
+
+function renderAll() {
+  renderRumahIbadah();
+  renderKeluarga();
+  updateDashboard();
+  renderListKeluarga();
+  renderListRumahIbadah();
+  renderListValidasi();
+  renderListBantuan();
+  renderListMusibah();
+  renderListPemberdayaan();
+  populateMusibahKeluarga();
+  renderListAkun();
+}
+
+function renderRumahIbadah() {
+  rumahIbadahLayer.clearLayers();
+  radiusLayer.clearLayers();
+
+  rumahIbadah.forEach(ri => {
+    const lat = Number(ri.lat);
+    const lng = Number(ri.lng);
+    const radius = Number(ri.radius || 500);
+    const jumlahTanggungan = Number(ri.jumlah_tanggungan || 0);
+    const sisaKuota = Math.max(0, Number(ri.kuota || 0) - jumlahTanggungan);
+
+    L.circle([lat, lng], {
+      radius,
+      color: '#2563eb',
+      fillColor: '#60a5fa',
+      fillOpacity: 0.12,
+      weight: 1.4
+    }).addTo(radiusLayer);
+
+    const marker = L.circleMarker([lat, lng], {
+      radius: 10,
+      color: '#1d4ed8',
+      fillColor: '#2563eb',
+      fillOpacity: 0.92,
+      weight: 2
+    }).addTo(rumahIbadahLayer);
+
+    const editBtn = canEditRumahIbadah(ri)
+      ? `<button class="popup-btn" onclick="fillRumahIbadahForm(${ri.id}); setActiveTab('rumah-ibadah')">Atur Radius</button>`
+      : '';
+    const deleteBtn = caps.canCreateRI
+      ? `<button class="popup-btn danger" onclick="hapusRumahIbadah(${ri.id})">Hapus</button>`
+      : '';
+    const tanggunganBtn = `<button class="popup-btn secondary" onclick="filterTanggunganRI(${ri.id})">Lihat Tanggungan</button>`;
+
+    marker.bindPopup(`
+      <div class="popup-title">${escapeHtml(ri.nama)}</div>
+      <b>Kategori:</b> ${escapeHtml(ri.kategori)}<br>
+      <b>Pengurus:</b> ${escapeHtml(ri.pengurus || '-')}<br>
+      <b>Kontak:</b> ${escapeHtml(ri.kontak || '-')}<br>
+      <b>Dana Sosial:</b> ${rupiah(ri.dana_sosial)}<br>
+      <b>Kuota:</b> ${ri.kuota} KK • <b>Sisa:</b> ${sisaKuota}<br>
+      <b>Radius:</b> ${ri.radius} meter<br>
+      <b>Tanggungan aktif:</b> ${jumlahTanggungan} KK<br>
+      <small>${escapeHtml(ri.alamat || '')}</small><br>
+      ${editBtn}${tanggunganBtn}${deleteBtn}
+    `);
+  });
+}
+
+function renderKeluarga() {
+  keluargaLayer.clearLayers();
+  getFilteredKeluarga().forEach(kel => {
+    const color = statusColors[kel.status_bantuan] || '#6b7280';
+    const lat = Number(kel.lat);
+    const lng = Number(kel.lng);
+
+    const marker = L.circleMarker([lat, lng], {
+      radius: 8,
+      color,
+      fillColor: color,
+      fillOpacity: 0.92,
+      weight: 2
+    }).addTo(keluargaLayer);
+
+    const routeBtn = kel.rumah_ibadah_id && kel.ri_lat && kel.ri_lng
+      ? `<button class="popup-btn secondary" onclick="buatRute(${kel.id})">Rute Distribusi</button>`
+      : '';
+    const verifyBtns = caps.canVerify
+      ? `<button class="popup-btn green" onclick="verifikasiKeluarga(${kel.id}, 'Valid')">Valid</button>
+         <button class="popup-btn danger" onclick="verifikasiKeluarga(${kel.id}, 'Tidak Valid')">Tidak Valid</button>`
+      : '';
+    const bantuanBtn = canRecordBantuanFor(kel)
+      ? `<button class="popup-btn" onclick="catatBantuan(${kel.id})">Catat Bantuan</button>`
+      : '';
+    const musibahBtn = caps.canReportMusibah
+      ? `<button class="popup-btn danger" onclick="buatLaporanMusibahUntuk(${kel.id})">Laporkan Musibah</button>`
+      : '';
+    const deleteBtn = caps.canCreateRI
+      ? `<button class="popup-btn danger" onclick="hapusKeluarga(${kel.id})">Hapus</button>`
+      : '';
+
+    marker.bindPopup(`
+      <div class="popup-title">${escapeHtml(kel.nama_kk)}</div>
+      <b>Status Verifikasi:</b> ${escapeHtml(kel.status_verifikasi)}<br>
+      <b>Status Bantuan:</b> ${escapeHtml(kel.status_bantuan)}<br>
+      <b>Penanggung:</b> ${escapeHtml(kel.nama_rumah_ibadah || '-')}<br>
+      <b>Kerentanan:</b> ${escapeHtml(kel.kerentanan)}<br>
+      <b>Kebutuhan:</b> ${escapeHtml(kel.kebutuhan)}<br>
+      <b>Anggota KK:</b> ${Number(kel.jumlah_anggota || 0)} orang • <b>Mampu bekerja:</b> ${Number(kel.jumlah_mampu_bekerja || 0)}<br>
+      <small>${escapeHtml(kel.alamat || '')}</small><br>
+      ${routeBtn}${bantuanBtn}${musibahBtn}${verifyBtns}${deleteBtn}
+    `);
+  });
+}
+
+function canEditRumahIbadah(ri) {
+  if (caps.canCreateRI) return true;
+  return role === 'rumah_ibadah' && linkedRumahIbadahId && Number(ri.id) === linkedRumahIbadahId;
+}
+
+function canRecordBantuanFor(kel) {
+  if (!caps.canRecordBantuan || kel.status_bantuan !== 'Ditanggung') return false;
+  if (role === 'rumah_ibadah') return linkedRumahIbadahId && Number(kel.rumah_ibadah_id) === linkedRumahIbadahId;
+  return true;
+}
+
+function getFilteredKeluarga() {
+  const status = getValue('filterStatus') || 'semua';
+  const keyword = (getValue('searchText') || '').toLowerCase();
+
+  return keluarga.filter(k => {
+    const matchStatus = status === 'semua' || k.status_bantuan === status;
+    const text = `${k.nama_kk} ${k.alamat} ${k.kerentanan} ${k.kebutuhan} ${k.nama_rumah_ibadah || ''}`.toLowerCase();
+    const matchKeyword = !keyword || text.includes(keyword);
+    return matchStatus && matchKeyword;
+  });
+}
+
+function updateDashboard() {
+  const visible = keluarga;
+  const total = visible.length;
+  const totalDitanggung = visible.filter(k => k.status_bantuan === 'Ditanggung').length;
+  const totalBlank = visible.filter(k => k.status_bantuan === 'Blank Spot').length;
+  const totalMenunggu = visible.filter(k => k.status_bantuan === 'Menunggu Verifikasi').length;
+  const totalValid = visible.filter(k => k.status_verifikasi === 'Valid').length;
+  const totalMusibahAktif = musibah.filter(m => !['Selesai','Ditolak'].includes(m.status)).length;
+  const totalProduktif = keluarga.reduce((sum, k) => sum + Number(k.jumlah_mampu_bekerja || 0), 0);
+  const cakupan = totalValid > 0 ? Math.round((totalDitanggung / totalValid) * 100) : 0;
+
+  setText('totalRumahIbadah', rumahIbadah.length);
+  setText('totalKeluarga', total);
+  setText('totalDitanggung', totalDitanggung);
+  setText('totalBlankSpot', totalBlank);
+  setText('totalMenunggu', totalMenunggu);
+  setText('totalMusibahAktif', totalMusibahAktif);
+  setText('totalProduktif', totalProduktif);
+  setText('cakupanBantuan', `${cakupan}%`);
+  setText('cakupanLabel', `${cakupan}%`);
+  const bar = document.getElementById('cakupanBar');
+  if (bar) bar.style.width = `${Math.min(100, Math.max(0, cakupan))}%`;
+
+  if (role === 'rumah_ibadah') {
+    const own = rumahIbadah.find(ri => Number(ri.id) === linkedRumahIbadahId);
+    if (own) setText('dashboardTitle', `Cakupan ${own.nama}`);
+  }
+  if (role === 'masyarakat') {
+    setText('dashboardTitle', 'Status Usulan Saya');
+  }
+  if (role === 'relawan') {
+    setText('dashboardTitle', 'Antrian Survei Lapangan');
+  }
+}
+
+function renderListKeluarga() {
+  const box = document.getElementById('listKeluarga');
+  if (!box) return;
+  const rows = getFilteredKeluarga();
+
+  if (!rows.length) {
+    box.innerHTML = emptyState('Belum ada data sesuai filter', 'Coba ubah filter status atau kata kunci pencarian.');
+    return;
+  }
+
+  box.innerHTML = rows.map(k => keluargaCard(k, true)).join('');
+}
+
+function renderListRumahIbadah() {
+  const box = document.getElementById('listRumahIbadah');
+  if (!box) return;
+
+  const rows = role === 'rumah_ibadah' && linkedRumahIbadahId
+    ? rumahIbadah.filter(ri => Number(ri.id) === linkedRumahIbadahId)
+    : rumahIbadah;
+
+  if (!rows.length) {
+    box.innerHTML = emptyState('Rumah ibadah belum tersedia', 'Tambahkan data rumah ibadah agar radius layanan dapat dianalisis.');
+    return;
+  }
+
+  box.innerHTML = rows.map(ri => {
+    const jumlah = Number(ri.jumlah_tanggungan || 0);
+    const sisa = Math.max(0, Number(ri.kuota || 0) - jumlah);
+    const actions = canEditRumahIbadah(ri)
+      ? `<button class="mini-btn" onclick="fillRumahIbadahForm(${ri.id}); setActiveTab('rumah-ibadah')">Edit Radius/Kuota</button>`
+      : '';
+    const deleteAction = caps.canCreateRI ? `<button class="mini-btn red" onclick="hapusRumahIbadah(${ri.id})">Hapus</button>` : '';
+    return `
+      <div class="list-item" onclick="focusPoint(${ri.lat}, ${ri.lng})">
+        <div class="list-title-row"><b>${escapeHtml(ri.nama)}</b><span class="badge badge-blue">${escapeHtml(ri.kategori)}</span></div>
+        <span>${escapeHtml(ri.alamat || '-')}</span>
+        <span>Radius ${ri.radius} m • Kuota ${ri.kuota} KK • Sisa ${sisa} KK • Dana ${rupiah(ri.dana_sosial)}</span>
+        <div class="item-actions">${actions}<button class="mini-btn purple" onclick="event.stopPropagation(); filterTanggunganRI(${ri.id})">Lihat Tanggungan</button>${deleteAction}</div>
+      </div>
+    `;
+  }).join('');
+}
+
+function renderListValidasi() {
+  const box = document.getElementById('listValidasi');
+  if (!box) return;
+
+  const rows = keluarga.filter(k => k.status_verifikasi === 'Menunggu Verifikasi' || k.status_verifikasi === 'Perlu Survei Ulang');
+  if (!rows.length) {
+    box.innerHTML = emptyState('Tidak ada antrian verifikasi', 'Usulan baru atau data yang perlu survei ulang akan muncul di sini.');
+    return;
+  }
+
+  box.innerHTML = rows.map(k => keluargaCard(k, false, 'validasi')).join('');
+}
+
+function renderListBantuan() {
+  const box = document.getElementById('listBantuan');
+  if (!box) return;
+
+  let rows = keluarga.filter(k => k.status_bantuan === 'Ditanggung');
+  if (role === 'rumah_ibadah' && linkedRumahIbadahId) {
+    rows = rows.filter(k => Number(k.rumah_ibadah_id) === linkedRumahIbadahId);
+  }
+
+  if (!rows.length) {
+    box.innerHTML = emptyState('Belum ada tanggungan', 'Jalankan analisis setelah data rumah ibadah dan keluarga valid tersedia.');
+    return;
+  }
+
+  box.innerHTML = rows.map(k => keluargaCard(k, false, 'bantuan')).join('');
+}
+
+function renderListMusibah() {
+  const box = document.getElementById('listMusibah');
+  if (!box) return;
+  if (!musibah.length) {
+    box.innerHTML = emptyState('Belum ada laporan musibah', 'Laporan kondisi mendadak akan muncul di sini.');
+    return;
+  }
+  box.innerHTML = musibah.map(m => {
+    const statusClass = m.status === 'Selesai' ? 'badge-green' : (m.tingkat_urgensi === 'Darurat' || m.tingkat_urgensi === 'Tinggi' ? 'badge-red' : 'badge-yellow');
+    const actions = caps.canManageMusibah
+      ? `<button class="mini-btn green" onclick="event.stopPropagation(); updateMusibah(${m.id}, 'Diproses')">Proses</button>
+         <button class="mini-btn" onclick="event.stopPropagation(); updateMusibah(${m.id}, 'Ditindaklanjuti')">Tindak Lanjut</button>
+         <button class="mini-btn purple" onclick="event.stopPropagation(); updateMusibah(${m.id}, 'Selesai')">Selesai</button>` : '';
+    return `
+      <div class="list-item" onclick="focusPoint(${m.lat}, ${m.lng}, 17)">
+        <div class="list-title-row"><b>${escapeHtml(m.jenis_musibah)}</b><span class="badge ${statusClass}">${escapeHtml(m.tingkat_urgensi)} • ${escapeHtml(m.status)}</span></div>
+        <span>${escapeHtml(m.nama_kk || 'Lokasi umum')} • ${escapeHtml(m.tanggal_kejadian || '-')}</span>
+        <span>${escapeHtml(m.alamat || '-')}</span>
+        <span>${escapeHtml(m.deskripsi || '')}</span>
+        <span>Kebutuhan: ${escapeHtml(m.kebutuhan_mendesak || '-')}</span>
+        ${m.tindak_lanjut ? `<span>Tindak lanjut: ${escapeHtml(m.tindak_lanjut)}</span>` : ''}
+        <div class="item-actions"><button class="mini-btn purple" onclick="event.stopPropagation(); focusPoint(${m.lat}, ${m.lng}, 17)">Lihat Lokasi</button>${actions}</div>
+      </div>
+    `;
+  }).join('');
+}
+
+function renderListPemberdayaan() {
+  const box = document.getElementById('listPemberdayaan');
+  if (!box) return;
+  if (!pemberdayaan.length) {
+    box.innerHTML = emptyState('Belum ada calon pemberdayaan', 'Isi anggota keluarga yang mampu bekerja pada form keluarga.');
+    return;
+  }
+  box.innerHTML = pemberdayaan.map(a => {
+    const badge = a.status_program ? 'badge-purple' : 'badge-yellow';
+    const status = a.status_program || a.status_pemberdayaan || 'Belum Dinilai';
+    return `
+      <div class="list-item" onclick="focusKeluarga(${a.keluarga_id})">
+        <div class="list-title-row"><b>${escapeHtml(a.nama)}</b><span class="badge ${badge}">${escapeHtml(status)}</span></div>
+        <span>${escapeHtml(a.hubungan)} dari ${escapeHtml(a.nama_kk)} • ${escapeHtml(a.kerentanan)}</span>
+        <span>Pekerjaan: ${escapeHtml(a.pekerjaan || '-')} • Penghasilan: ${rupiah(a.penghasilan)}</span>
+        <span>Keahlian/minat: ${escapeHtml(a.keahlian || '-')}</span>
+        <span>Program: ${escapeHtml(a.nama_program || 'Belum ada program')}</span>
+        <div class="item-actions"><button class="mini-btn" onclick="event.stopPropagation(); tambahProgramPemberdayaan(${a.id})">Tambah Program</button></div>
+      </div>
+    `;
+  }).join('');
+}
+
+
+function renderListAkun() {
+  const box = document.getElementById('listAkun');
+  if (!box) return;
+  if (!users.length) {
+    box.innerHTML = emptyState('Belum ada akun terdaftar', 'Pengajuan akun resmi akan tampil di sini untuk diverifikasi.');
+    return;
+  }
+
+  const pending = users.filter(u => u.status_akun === 'Menunggu Verifikasi');
+  const active = users.filter(u => u.status_akun !== 'Menunggu Verifikasi');
+  const rows = [...pending, ...active];
+
+  box.innerHTML = rows.map(u => {
+    const statusClass = u.status_akun === 'Aktif' ? 'badge-green' : (u.status_akun === 'Ditolak' ? 'badge-red' : 'badge-yellow');
+    const roleLabel = getRoleLabel(u.role);
+    const detailInstansi = u.role === 'rumah_ibadah'
+      ? `<span>Rumah ibadah: ${escapeHtml(u.nama_instansi || '-')} • ${escapeHtml(u.kategori_instansi || '-')}</span>`
+      : '';
+    const detailKontak = u.kontak ? `<span>Kontak: ${escapeHtml(u.kontak)}</span>` : '';
+    const detailAlamat = u.alamat ? `<span>${escapeHtml(u.alamat)}</span>` : '';
+    const detailCatatan = u.catatan_pengajuan ? `<span>Catatan: ${escapeHtml(u.catatan_pengajuan)}</span>` : '';
+    const detailKoordinat = u.role === 'rumah_ibadah' && u.lat && u.lng ? `<span>Koordinat: ${escapeHtml(u.lat)}, ${escapeHtml(u.lng)}</span>` : '';
+    const approveReject = u.status_akun === 'Menunggu Verifikasi'
+      ? `<button class="mini-btn green" onclick="event.stopPropagation(); approveUser(${u.id})">Setujui</button>
+         <button class="mini-btn red" onclick="event.stopPropagation(); rejectUser(${u.id})">Tolak</button>`
+      : '';
+    const deleteBtn = Number(u.id) !== Number(user.id)
+      ? `<button class="mini-btn red" onclick="event.stopPropagation(); deleteUser(${u.id})">Hapus</button>`
+      : '';
+
+    return `
+      <div class="list-item">
+        <div class="list-title-row">
+          <b>${escapeHtml(u.nama)}</b>
+          <span class="badge ${statusClass}">${escapeHtml(u.status_akun || 'Aktif')}</span>
+        </div>
+        <span>${escapeHtml(u.email)} • ${roleLabel}</span>
+        ${detailInstansi}${detailKontak}${detailAlamat}${detailKoordinat}${detailCatatan}
+        <div class="item-actions">${approveReject}${deleteBtn}</div>
+      </div>
+    `;
+  }).join('');
+}
+
+function emptyState(title, description) {
+  return `
+    <div class="empty-state">
+      <div class="empty-icon">⌕</div>
+      <b>${escapeHtml(title)}</b>
+      <span>${escapeHtml(description)}</span>
+    </div>
+  `;
+}
+
+function getRoleLabel(value) {
+  const labels = {
+    admin: 'Administrator',
+    dinas: 'Dinas Sosial',
+    rumah_ibadah: 'Pengurus Rumah Ibadah',
+    relawan: 'Relawan Lapangan',
+    masyarakat: 'Masyarakat'
+  };
+  return labels[value] || value;
+}
+
+async function approveUser(id) {
+  if (!caps.canManageUsers) return toast('Akses ditolak.');
+  if (!confirm('Setujui akun ini?')) return;
+  try {
+    const result = await apiPut('api/users.php', { id, action: 'approve' });
+    toast(result.message || 'Akun disetujui.');
+    await loadAllData();
+  } catch (error) {
+    toast(error.message || 'Gagal menyetujui akun.');
+  }
+}
+
+async function rejectUser(id) {
+  if (!caps.canManageUsers) return toast('Akses ditolak.');
+  if (!confirm('Tolak pengajuan akun ini?')) return;
+  try {
+    const result = await apiPut('api/users.php', { id, action: 'reject' });
+    toast(result.message || 'Akun ditolak.');
+    await loadAllData();
+  } catch (error) {
+    toast(error.message || 'Gagal menolak akun.');
+  }
+}
+
+async function deleteUser(id) {
+  if (!caps.canManageUsers) return toast('Akses ditolak.');
+  if (!confirm('Hapus akun ini?')) return;
+  try {
+    const res = await fetch(`api/users.php?id=${id}`, { method: 'DELETE' });
+    const json = await res.json();
+    if (!json.success) throw new Error(json.message || 'Gagal menghapus akun.');
+    toast(json.message || 'Akun dihapus.');
+    await loadAllData();
+  } catch (error) {
+    toast(error.message || 'Gagal menghapus akun.');
+  }
+}
+
+function keluargaCard(k, allowFocus = true, mode = 'data') {
+  const badgeClass = getBadgeClass(k.status_bantuan);
+  const onclick = allowFocus ? `onclick="focusKeluarga(${k.id})"` : '';
+  const route = k.rumah_ibadah_id && k.ri_lat && k.ri_lng
+    ? `<button class="mini-btn purple" onclick="event.stopPropagation(); buatRute(${k.id})">Lihat Rute</button>` : '';
+  const verify = caps.canVerify && mode !== 'bantuan'
+    ? `<button class="mini-btn green" onclick="event.stopPropagation(); verifikasiKeluarga(${k.id}, 'Valid')">Valid</button>
+       <button class="mini-btn red" onclick="event.stopPropagation(); verifikasiKeluarga(${k.id}, 'Tidak Valid')">Tidak Valid</button>` : '';
+  const bantuan = canRecordBantuanFor(k)
+    ? `<button class="mini-btn" onclick="event.stopPropagation(); catatBantuan(${k.id})">Catat Bantuan</button>` : '';
+  const del = caps.canCreateRI
+    ? `<button class="mini-btn red" onclick="event.stopPropagation(); hapusKeluarga(${k.id})">Hapus</button>` : '';
+  const musibahBtn = caps.canReportMusibah
+    ? `<button class="mini-btn red" onclick="event.stopPropagation(); buatLaporanMusibahUntuk(${k.id})">Laporkan Musibah</button>` : '';
+  const anggotaRingkas = Number(k.jumlah_anggota || 0) > 0
+    ? `<span>Anggota KK: ${Number(k.jumlah_anggota || 0)} orang • Mampu bekerja: ${Number(k.jumlah_mampu_bekerja || 0)}</span>` : '';
+  const anggotaDetail = Array.isArray(k.anggota) && k.anggota.length
+    ? `<details class="member-details"><summary>Lihat biodata anggota</summary>${k.anggota.map(a => `<div class="member-row-mini"><b>${escapeHtml(a.nama)}</b><span>${escapeHtml(a.hubungan)} • ${escapeHtml(a.jenis_kelamin)} • ${escapeHtml(a.pekerjaan || '-')} • Mampu bekerja: ${escapeHtml(a.mampu_bekerja || 'Tidak')}</span></div>`).join('')}</details>` : '';
+
+  return `
+    <div class="list-item" ${onclick}>
+      <div class="list-title-row">
+        <b>${escapeHtml(k.nama_kk)}</b>
+        <span class="badge ${badgeClass}">${escapeHtml(k.status_bantuan)}</span>
+      </div>
+      <span>${escapeHtml(k.alamat || '-')}</span>
+      <span>${escapeHtml(k.kerentanan)} • ${escapeHtml(k.kebutuhan)} • Verifikasi: ${escapeHtml(k.status_verifikasi)}</span>
+      <span>Penanggung: ${escapeHtml(k.nama_rumah_ibadah || '-')}</span>
+      ${anggotaRingkas}${anggotaDetail}
+      <div class="item-actions">${route}${bantuan}${musibahBtn}${verify}${del}</div>
+    </div>
+  `;
+}
+
+function getBadgeClass(status) {
+  if (status === 'Ditanggung') return 'badge-green';
+  if (status === 'Blank Spot') return 'badge-red';
+  if (status === 'Menunggu Verifikasi') return 'badge-yellow';
+  if (status === 'Bantuan Pemerintah') return 'badge-purple';
+  return 'badge-gray';
+}
+
+async function simpanKeluarga() {
+  const lat = getValue('lat');
+  const lng = getValue('lng');
+  if (!lat || !lng) {
+    toast('Klik titik rumah keluarga pada peta terlebih dahulu.');
+    return;
+  }
+
+  const payload = {
+    nama_kk: getValue('kelNama'),
+    alamat: getValue('kelAlamat'),
+    no_kk: getValue('kelNoKK'),
+    nik: getValue('kelNik'),
+    kerentanan: getValue('kelKerentanan'),
+    kebutuhan: getValue('kelKebutuhan'),
+    status_verifikasi: getValue('kelStatusVerifikasi') || 'Menunggu Verifikasi',
+    catatan: getValue('kelCatatan'),
+    lat,
+    lng,
+    anggota: collectAnggotaForm()
+  };
+
+  if (!payload.nama_kk || !payload.alamat) {
+    toast('Nama kepala keluarga dan alamat wajib diisi.');
+    return;
+  }
+  if (!payload.anggota.length) {
+    toast('Minimal isi satu anggota keluarga sesuai KK.');
+    return;
+  }
+
+  try {
+    await apiPost('api/keluarga.php', payload);
+    toast(role === 'masyarakat' ? 'Usulan berhasil dikirim dan menunggu verifikasi.' : 'Data keluarga berhasil disimpan.');
+    bersihkanFormKeluarga();
+    await loadAllData();
+  } catch (error) {
+    toast(error.message || 'Gagal menyimpan data keluarga.');
+  }
+}
+
+async function simpanRumahIbadah() {
+  if (!caps.canManageRI) {
+    toast('Kamu tidak punya akses manajemen rumah ibadah.');
+    return;
+  }
+
+  const id = Number(getValue('riId') || 0);
+  if (!id && !caps.canCreateRI) {
+    toast('Pengurus hanya dapat memperbarui rumah ibadah yang sudah terhubung dengan akunnya.');
+    return;
+  }
+
+  const payload = {
+    id,
+    nama: getValue('riNama'),
+    alamat: getValue('riAlamat'),
+    kategori: getValue('riKategori'),
+    pengurus: getValue('riPengurus'),
+    kontak: getValue('riKontak'),
+    dana_sosial: Number(getValue('riDana') || 0),
+    kuota: Number(getValue('riKuota') || 0),
+    radius: Number(getValue('riRadius') || 500),
+    lat: getValue('riLat'),
+    lng: getValue('riLng'),
+    status: 'Aktif'
+  };
+
+  if (!payload.nama || !payload.alamat || !payload.lat || !payload.lng) {
+    toast('Lengkapi nama, alamat, dan titik koordinat rumah ibadah.');
+    return;
+  }
+
+  try {
+    if (id > 0) {
+      await apiPut('api/rumah_ibadah.php', payload);
+      toast(caps.canAnalyze ? 'Data rumah ibadah berhasil diperbarui. Jalankan analisis ulang agar radius baru diterapkan.' : 'Perubahan layanan tersimpan. Status tanggungan akan mengikuti analisis terbaru dari pengelola.');
+    } else {
+      await apiPost('api/rumah_ibadah.php', payload);
+      toast('Rumah ibadah baru berhasil disimpan.');
+      resetFormRumahIbadah();
+    }
+    await loadAllData();
+  } catch (error) {
+    toast(error.message || 'Gagal menyimpan rumah ibadah.');
+  }
+}
+
+function fillRumahIbadahForm(id) {
+  const ri = rumahIbadah.find(r => Number(r.id) === Number(id));
+  if (!ri) return;
+  if (!canEditRumahIbadah(ri)) {
+    toast('Kamu tidak berwenang mengubah rumah ibadah ini.');
+    return;
+  }
+  setValue('riId', ri.id);
+  setValue('riNama', ri.nama || '');
+  setValue('riAlamat', ri.alamat || '');
+  setValue('riKategori', ri.kategori || 'Masjid');
+  setValue('riPengurus', ri.pengurus || '');
+  setValue('riKontak', ri.kontak || '');
+  setValue('riDana', Number(ri.dana_sosial || 0));
+  setValue('riKuota', Number(ri.kuota || 0));
+  setValue('riRadius', Number(ri.radius || 500));
+  setText('riRadiusLabel', Number(ri.radius || 500));
+  setValue('riLat', ri.lat);
+  setValue('riLng', ri.lng);
+  focusPoint(ri.lat, ri.lng, 16);
+}
+
+function resetFormRumahIbadah() {
+  if (!caps.canCreateRI) {
+    toast('Pengurus tidak dapat membuat rumah ibadah baru.');
+    return;
+  }
+  ['riId','riNama','riAlamat','riPengurus','riKontak','riDana','riKuota','riLat','riLng'].forEach(id => setValue(id, ''));
+  setValue('riKategori', 'Masjid');
+  setValue('riRadius', 500);
+  setText('riRadiusLabel', 500);
+  if (selectedMarker) {
+    map.removeLayer(selectedMarker);
+    selectedMarker = null;
+  }
+  const box = document.getElementById('anggotaContainer');
+  if (box) {
+    box.innerHTML = '';
+    addAnggotaForm({ hubungan: 'Kepala Keluarga' });
+  }
+}
+
+async function jalankanAnalisis() {
+  if (!caps.canAnalyze) {
+    toast('Analisis hanya dapat dijalankan oleh Admin atau Dinas Sosial.');
+    return;
+  }
+  try {
+    const result = await apiPost('api/analisis.php', {});
+    toast(result.message || 'Analisis selesai.');
+    await loadAllData();
+  } catch (error) {
+    toast(error.message || 'Analisis gagal.');
+  }
+}
+
+async function verifikasiKeluarga(id, status) {
+  if (!caps.canVerify) return toast('Kamu tidak punya akses validasi.');
+  if (!confirm(`Ubah status verifikasi menjadi ${status}?`)) return;
+  const catatan = prompt('Catatan verifikasi, boleh dikosongkan:', '') || '';
+
+  try {
+    const result = await apiPut('api/keluarga.php', { id, status_verifikasi: status, catatan });
+    toast(result.message || 'Status diperbarui.');
+    await loadAllData();
+  } catch (error) {
+    toast(error.message || 'Gagal memperbarui status.');
+  }
+}
+
+async function catatBantuan(id) {
+  const kel = keluarga.find(k => Number(k.id) === Number(id));
+  if (!kel || !canRecordBantuanFor(kel)) {
+    toast('Kamu tidak berwenang mencatat bantuan untuk data ini.');
+    return;
+  }
+
+  const tanggal = prompt('Tanggal bantuan (YYYY-MM-DD):', new Date().toISOString().slice(0, 10));
+  if (!tanggal) return;
+  const jenis = prompt('Jenis bantuan:', kel.kebutuhan || 'Sembako');
+  if (!jenis) return;
+  const nilai = prompt('Estimasi nilai bantuan (angka):', '0') || '0';
+  const catatan = prompt('Catatan bantuan:', '') || '';
+
+  try {
+    await apiPost('api/bantuan.php', {
+      keluarga_id: id,
+      tanggal_bantuan: tanggal,
+      jenis_bantuan: jenis,
+      nilai_bantuan: Number(nilai),
+      catatan
+    });
+    toast('Riwayat bantuan berhasil dicatat.');
+  } catch (error) {
+    toast(error.message || 'Gagal mencatat bantuan.');
+  }
+}
+
+function buatRute(id) {
+  const kel = keluarga.find(k => Number(k.id) === Number(id));
+  if (!kel || !kel.ri_lat || !kel.ri_lng) {
+    toast('Data rumah ibadah penanggung belum tersedia.');
+    return;
+  }
+
+  if (routingControl) map.removeControl(routingControl);
+  routingControl = L.Routing.control({
+    waypoints: [
+      L.latLng(Number(kel.ri_lat), Number(kel.ri_lng)),
+      L.latLng(Number(kel.lat), Number(kel.lng))
+    ],
+    routeWhileDragging: false,
+    addWaypoints: false,
+    show: false,
+    lineOptions: { styles: [{ color: '#7c3aed', weight: 5, opacity: 0.85 }] }
+  }).addTo(map);
+  map.setView([Number(kel.lat), Number(kel.lng)], 15);
+  toast('Rute distribusi bantuan ditampilkan.');
+}
+
+async function hapusKeluarga(id) {
+  if (!caps.canCreateRI) return toast('Hanya Admin/Dinas yang bisa menghapus data keluarga.');
+  if (!confirm('Hapus data keluarga ini?')) return;
+  try {
+    const res = await fetch(`api/keluarga.php?id=${id}`, { method: 'DELETE' });
+    const json = await res.json();
+    if (!json.success) throw new Error(json.message);
+    toast('Data keluarga dihapus.');
+    await loadAllData();
+  } catch (error) {
+    toast(error.message || 'Gagal menghapus data.');
+  }
+}
+
+async function hapusRumahIbadah(id) {
+  if (!caps.canCreateRI) return toast('Hanya Admin/Dinas yang bisa menghapus rumah ibadah.');
+  if (!confirm('Hapus data rumah ibadah ini? Data keluarga yang ditanggung akan dilepas.')) return;
+  try {
+    const res = await fetch(`api/rumah_ibadah.php?id=${id}`, { method: 'DELETE' });
+    const json = await res.json();
+    if (!json.success) throw new Error(json.message);
+    toast('Data rumah ibadah dihapus.');
+    await loadAllData();
+  } catch (error) {
+    toast(error.message || 'Gagal menghapus data.');
+  }
+}
+
+function focusKeluarga(id) {
+  const kel = keluarga.find(k => Number(k.id) === Number(id));
+  if (!kel) return;
+  focusPoint(kel.lat, kel.lng, 17);
+}
+
+function focusPoint(lat, lng, zoom = 16) {
+  map.setView([Number(lat), Number(lng)], zoom);
+}
+
+function fitAllMarkers() {
+  const points = [];
+  rumahIbadah.forEach(ri => points.push([Number(ri.lat), Number(ri.lng)]));
+  keluarga.forEach(k => points.push([Number(k.lat), Number(k.lng)]));
+  if (!points.length) return toast('Belum ada titik pada peta.');
+  map.fitBounds(points, { padding: [40, 40] });
+}
+
+function filterTanggunganRI(id) {
+  setValue('filterStatus', 'semua');
+  setValue('searchText', '');
+  setActiveTab('peta');
+  const rows = keluarga.filter(k => Number(k.rumah_ibadah_id) === Number(id));
+  const box = document.getElementById('listKeluarga');
+  if (box) {
+    box.innerHTML = rows.length ? rows.map(k => keluargaCard(k, true)).join('') : '<div class="info-box">Belum ada keluarga yang ditanggung rumah ibadah ini.</div>';
+  }
+  const ri = rumahIbadah.find(r => Number(r.id) === Number(id));
+  if (ri) focusPoint(ri.lat, ri.lng, 15);
+}
+
+function locateMe() {
+  if (!navigator.geolocation) return toast('Browser tidak mendukung geolocation.');
+  navigator.geolocation.getCurrentPosition(
+    pos => {
+      const lat = pos.coords.latitude;
+      const lng = pos.coords.longitude;
+      map.setView([lat, lng], 17);
+      const activeTab = document.querySelector('.tab.active')?.dataset.tab || 'input';
+      if (activeTab === 'rumah-ibadah' && caps.canCreateRI) {
+        setValue('riLat', lat.toFixed(7));
+        setValue('riLng', lng.toFixed(7));
+      } else if (activeTab === 'musibah') {
+        setValue('musibahLat', lat.toFixed(7));
+        setValue('musibahLng', lng.toFixed(7));
+        fillAddress(lat.toFixed(7), lng.toFixed(7), 'musibahAlamat');
+      } else {
+        setValue('lat', lat.toFixed(7));
+        setValue('lng', lng.toFixed(7));
+      }
+      if (selectedMarker) map.removeLayer(selectedMarker);
+      selectedMarker = L.marker([lat, lng]).addTo(map).bindPopup('Lokasi kamu').openPopup();
+      toast('Lokasi berhasil diambil.');
+    },
+    () => toast('Gagal mengambil lokasi. Izinkan akses lokasi di browser.')
+  );
+}
+
+function bersihkanFormKeluarga() {
+  ['kelNama','kelAlamat','kelNoKK','kelNik','kelCatatan','lat','lng'].forEach(id => setValue(id, ''));
+  setValue('kelKerentanan', 'Miskin Ekstrem');
+  setValue('kelKebutuhan', 'Sembako');
+  setValue('kelStatusVerifikasi', 'Menunggu Verifikasi');
+  if (selectedMarker) {
+    map.removeLayer(selectedMarker);
+    selectedMarker = null;
+  }
+}
+
+
+function initAnggotaDefault() {
+  const box = document.getElementById('anggotaContainer');
+  if (box && !box.children.length) addAnggotaForm({ hubungan: 'Kepala Keluarga' });
+}
+
+function addAnggotaForm(defaults = {}) {
+  const box = document.getElementById('anggotaContainer');
+  if (!box) return;
+  const index = box.children.length + 1;
+  const div = document.createElement('div');
+  div.className = 'anggota-card';
+  div.innerHTML = `
+    <div class="list-title-row anggota-title"><b>Anggota ${index}</b><button type="button" class="mini-btn red btn-remove-anggota">Hapus</button></div>
+    <label>Nama Lengkap</label>
+    <input data-field="nama" placeholder="Nama sesuai KK" value="${escapeHtml(defaults.nama || '')}">
+    <div class="two-col">
+      <div><label>NIK</label><input data-field="nik" placeholder="NIK" value="${escapeHtml(defaults.nik || '')}"></div>
+      <div><label>Hubungan</label><select data-field="hubungan">
+        ${['Kepala Keluarga','Istri','Suami','Anak','Orang Tua','Mertua','Famili Lain','Lainnya'].map(v => `<option ${v === (defaults.hubungan || 'Lainnya') ? 'selected' : ''}>${v}</option>`).join('')}
+      </select></div>
+    </div>
+    <div class="two-col">
+      <div><label>Jenis Kelamin</label><select data-field="jenis_kelamin"><option>Laki-laki</option><option>Perempuan</option></select></div>
+      <div><label>Tanggal Lahir</label><input type="date" data-field="tanggal_lahir" value="${escapeHtml(defaults.tanggal_lahir || '')}"></div>
+    </div>
+    <div class="two-col">
+      <div><label>Tempat Lahir</label><input data-field="tempat_lahir" placeholder="Kota lahir"></div>
+      <div><label>Agama</label><input data-field="agama" placeholder="Agama"></div>
+    </div>
+    <div class="two-col">
+      <div><label>Pendidikan</label><input data-field="pendidikan" placeholder="SD/SMP/SMA/dll"></div>
+      <div><label>Status Perkawinan</label><input data-field="status_perkawinan" placeholder="Belum kawin/kawin/dll"></div>
+    </div>
+    <div class="two-col">
+      <div><label>Pekerjaan</label><input data-field="pekerjaan" placeholder="Pekerjaan saat ini"></div>
+      <div><label>Penghasilan / Bulan</label><input type="number" data-field="penghasilan" placeholder="0"></div>
+    </div>
+    <label>Masih mampu bekerja?</label>
+    <select data-field="mampu_bekerja"><option>Tidak</option><option>Ya</option></select>
+    <label>Keahlian / Minat Pemberdayaan</label>
+    <textarea data-field="keahlian" placeholder="Contoh: memasak, menjahit, bangunan, servis motor"></textarea>
+    <label>Catatan Anggota</label>
+    <textarea data-field="catatan" placeholder="Catatan tambahan bila ada"></textarea>
+  `;
+  div.querySelector('.btn-remove-anggota').addEventListener('click', () => {
+    if (box.children.length <= 1) return toast('Minimal harus ada satu anggota keluarga.');
+    div.remove();
+  });
+  box.appendChild(div);
+}
+
+function collectAnggotaForm() {
+  return Array.from(document.querySelectorAll('#anggotaContainer .anggota-card')).map(card => {
+    const data = {};
+    card.querySelectorAll('[data-field]').forEach(el => data[el.dataset.field] = String(el.value || '').trim());
+    return data;
+  }).filter(a => a.nama);
+}
+
+function populateMusibahKeluarga() {
+  const select = document.getElementById('musibahKeluarga');
+  if (!select) return;
+  const current = select.value;
+  select.innerHTML = '<option value="">Tidak terkait keluarga terdata</option>' + keluarga.map(k => `<option value="${k.id}">${escapeHtml(k.nama_kk)} — ${escapeHtml(k.alamat || '-')}</option>`).join('');
+  if (current) select.value = current;
+}
+
+function isiLokasiMusibahDariKeluarga() {
+  const id = Number(getValue('musibahKeluarga') || 0);
+  if (!id) return;
+  const kel = keluarga.find(k => Number(k.id) === id);
+  if (!kel) return;
+  setValue('musibahAlamat', kel.alamat || '');
+  setValue('musibahLat', kel.lat || '');
+  setValue('musibahLng', kel.lng || '');
+  focusPoint(kel.lat, kel.lng, 17);
+}
+
+function buatLaporanMusibahUntuk(id) {
+  setActiveTab('musibah');
+  setValue('musibahKeluarga', id);
+  isiLokasiMusibahDariKeluarga();
+  toast('Lengkapi jenis musibah dan kebutuhan mendesak, lalu kirim laporan.');
+}
+
+async function simpanMusibah() {
+  const keluargaId = Number(getValue('musibahKeluarga') || 0);
+  const payload = {
+    keluarga_id: keluargaId || null,
+    jenis_musibah: getValue('musibahJenis'),
+    tingkat_urgensi: getValue('musibahUrgensi'),
+    tanggal_kejadian: getValue('musibahTanggal') || new Date().toISOString().slice(0, 10),
+    alamat: getValue('musibahAlamat'),
+    lat: getValue('musibahLat'),
+    lng: getValue('musibahLng'),
+    deskripsi: getValue('musibahDeskripsi'),
+    kebutuhan_mendesak: getValue('musibahKebutuhan')
+  };
+  if (!payload.deskripsi) return toast('Kronologi singkat wajib diisi.');
+  if (!payload.alamat || !payload.lat || !payload.lng) return toast('Pilih keluarga terkait atau klik lokasi kejadian pada peta.');
+  try {
+    await apiPost('api/musibah.php', payload);
+    toast('Laporan musibah berhasil dikirim.');
+    ['musibahDeskripsi','musibahKebutuhan','musibahAlamat','musibahLat','musibahLng'].forEach(id => setValue(id, ''));
+    setValue('musibahKeluarga', '');
+    await loadAllData();
+  } catch (error) {
+    toast(error.message || 'Gagal mengirim laporan musibah.');
+  }
+}
+
+async function updateMusibah(id, status) {
+  const tindak_lanjut = prompt('Catatan tindak lanjut:', '') || '';
+  try {
+    await apiPut('api/musibah.php', { id, status, tindak_lanjut });
+    toast('Status musibah diperbarui.');
+    await loadAllData();
+  } catch (error) {
+    toast(error.message || 'Gagal memperbarui laporan musibah.');
+  }
+}
+
+async function tambahProgramPemberdayaan(anggotaId) {
+  const anggota = pemberdayaan.find(a => Number(a.id) === Number(anggotaId));
+  if (!anggota) return;
+  const nama_program = prompt('Nama program pemberdayaan:', anggota.keahlian ? `Program ${anggota.keahlian}` : 'Pelatihan kerja dasar');
+  if (!nama_program) return;
+  const jenis_program = prompt('Jenis program (Pelatihan Kerja/Modal Usaha/Pendampingan UMKM/Penempatan Kerja/Bantuan Alat Kerja/Lainnya):', 'Pelatihan Kerja') || 'Pelatihan Kerja';
+  const penyelenggara = prompt('Penyelenggara:', role === 'rumah_ibadah' ? 'Rumah Ibadah' : 'Dinas Sosial') || '';
+  const catatan = prompt('Catatan:', `Keahlian/minat: ${anggota.keahlian || '-'}`) || '';
+  try {
+    await apiPost('api/pemberdayaan.php', {
+      anggota_id: anggotaId,
+      jenis_program,
+      nama_program,
+      penyelenggara,
+      tanggal_mulai: new Date().toISOString().slice(0, 10),
+      status: 'Direkomendasikan',
+      catatan
+    });
+    toast('Program pemberdayaan berhasil dicatat.');
+    await loadAllData();
+  } catch (error) {
+    toast(error.message || 'Gagal mencatat program pemberdayaan.');
+  }
+}
+
+async function apiPost(url, payload) {
+  const res = await fetch(url, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload)
+  });
+  const json = await res.json();
+  if (!json.success) throw new Error(json.message || 'Request gagal.');
+  return json;
+}
+
+async function apiPut(url, payload) {
+  const res = await fetch(url, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload)
+  });
+  const json = await res.json();
+  if (!json.success) throw new Error(json.message || 'Request gagal.');
+  return json;
+}
+
+function onClick(id, handler) {
+  const el = document.getElementById(id);
+  if (el) el.addEventListener('click', handler);
+}
+
+function onInput(id, handler) {
+  const el = document.getElementById(id);
+  if (el) {
+    el.addEventListener('input', handler);
+    el.addEventListener('change', handler);
+  }
+}
+
+function getValue(id) {
+  const el = document.getElementById(id);
+  return el ? String(el.value ?? '').trim() : '';
+}
+
+function setValue(id, value) {
+  const el = document.getElementById(id);
+  if (el) el.value = value;
+}
+
+function setText(id, value) {
+  const el = document.getElementById(id);
+  if (el) el.textContent = value;
+}
+
+function rupiah(value) {
+  const number = Number(value || 0);
+  return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(number);
+}
+
+function escapeHtml(str) {
+  return String(str ?? '')
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#039;');
+}
+
+function toast(message) {
+  const el = document.getElementById('toast');
+  if (!el) return alert(message);
+  el.textContent = message;
+  el.classList.add('show');
+  setTimeout(() => el.classList.remove('show'), 3200);
+}
+
+window.addEventListener('DOMContentLoaded', async () => {
+  initMap();
+  initUI();
+  await loadAllData();
+});
+
+// Global untuk popup Leaflet.
+window.setActiveTab = setActiveTab;
+window.fillRumahIbadahForm = fillRumahIbadahForm;
+window.buatRute = buatRute;
+window.verifikasiKeluarga = verifikasiKeluarga;
+window.catatBantuan = catatBantuan;
+window.hapusKeluarga = hapusKeluarga;
+window.hapusRumahIbadah = hapusRumahIbadah;
+window.focusKeluarga = focusKeluarga;
+window.focusPoint = focusPoint;
+window.filterTanggunganRI = filterTanggunganRI;
+window.approveUser = approveUser;
+window.rejectUser = rejectUser;
+window.deleteUser = deleteUser;
+window.buatLaporanMusibahUntuk = buatLaporanMusibahUntuk;
+window.updateMusibah = updateMusibah;
+window.tambahProgramPemberdayaan = tambahProgramPemberdayaan;