Initial commit

2026-06-06 00:22:16 +07:00
commit 35e1a93aeb
20 changed files with 3571 additions and 0 deletions
@@ -0,0 +1,462 @@
+'use strict';
+
+const API_BASE = 'api';
+const CENTER = [-0.0263, 109.3425];
+
+const map = L.map('map', { zoomControl: false }).setView(CENTER, 13);
+L.control.zoom({ position: 'topleft' }).addTo(map);
+
+const baseLayers = {
+  'OSM Standard': L.tileLayer(
+    'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+    { attribution: '© OpenStreetMap', maxZoom: 19 }
+  ),
+  'CartoDB Light': L.tileLayer(
+    'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',
+    { attribution: '© CartoDB', maxZoom: 19 }
+  ),
+  'Satellite (Esri)': L.tileLayer(
+    'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+    { attribution: '© Esri', maxZoom: 19 }
+  )
+};
+baseLayers['OSM Standard'].addTo(map);
+L.control.layers(baseLayers, {}, { position: 'bottomright', collapsed: true }).addTo(map);
+
+const layers = {
+  rumahIbadah: L.layerGroup().addTo(map),
+  ibadahRadius: L.layerGroup().addTo(map),
+  pendudukMiskin: L.layerGroup().addTo(map),
+  spbu24: L.layerGroup().addTo(map),
+  spbuNon24: L.layerGroup().addTo(map),
+  jalanNasional: L.layerGroup().addTo(map),
+  jalanProvinsi: L.layerGroup().addTo(map),
+  jalanKabupaten: L.layerGroup().addTo(map),
+  parsilSHM: L.layerGroup().addTo(map),
+  parsilHGB: L.layerGroup().addTo(map),
+  parsilHGU: L.layerGroup().addTo(map),
+  parsilHP: L.layerGroup().addTo(map)
+};
+
+const layerVisible = {
+  rumahIbadah: true, ibadahRadius: true, pendudukMiskin: true,
+  spbu24: true, spbuNon24: true,
+  jalanNasional: true, jalanProvinsi: true, jalanKabupaten: true,
+  parsilSHM: true, parsilHGB: true, parsilHGU: true, parsilHP: true
+};
+
+const searchEntries = [];
+let searchActiveIndex = -1;
+const searchPointZoom = 15;
+const searchIntentPrefix = {
+  jalan: 'jalan',
+  spbu: 'spbu',
+  rumahibadah: 'ri',
+  pendudukmiskin: 'pm',
+  parsil: 'parsil'
+};
+
+const drawnItems = new L.FeatureGroup().addTo(map);
+const drawControl = new L.Control.Draw({
+  draw: {
+    polyline: { shapeOptions: { color: '#2563eb', weight: 3 } },
+    polygon: { shapeOptions: { color: '#7c3aed', weight: 2, fillOpacity: 0.15 } },
+    rectangle: false, circle: false, circlemarker: false, marker: false
+  },
+  edit: { featureGroup: drawnItems, remove: false }
+});
+
+let pendingGeoJSON = null;
+let pendingLength = null;
+let pendingArea = null;
+let currentTab = 'kemiskinan';
+let geometryEditState = null;
+let _mapClickCb = null;
+
+function toast(msg, type = 'info') {
+  const t = document.createElement('div');
+  t.className = `toast ${type}`;
+  t.textContent = msg;
+  document.getElementById('toast-container').appendChild(t);
+  setTimeout(() => t.remove(), 3000);
+}
+
+function openModal(title, bodyHTML, footerHTML) {
+  document.getElementById('modal-title').textContent = title;
+  document.getElementById('modal-body').innerHTML = bodyHTML;
+  document.getElementById('modal-footer').innerHTML = footerHTML;
+  document.getElementById('modal-overlay').classList.add('open');
+}
+
+function closeModal() {
+  document.getElementById('modal-overlay').classList.remove('open');
+}
+
+document.getElementById('modal-overlay').addEventListener('click', e => {
+  if (e.target.id === 'modal-overlay') closeModal();
+});
+
+async function callAPI(ep, method = 'GET', body = null) {
+  const opts = { method, headers: { 'Content-Type': 'application/json' } };
+  if (body) opts.body = JSON.stringify(body);
+  try {
+    return await (await fetch(`${API_BASE}/${ep}`, opts)).json();
+  } catch (err) {
+    return { status: 'error', message: 'Koneksi gagal' };
+  }
+}
+
+function showInstruction(msg) {
+  const el = document.getElementById('instruction-banner');
+  el.textContent = '🖱 ' + msg;
+  el.classList.add('show');
+}
+
+function hideInstruction() {
+  document.getElementById('instruction-banner').classList.remove('show');
+}
+
+function esc(s) {
+  if (s == null) return '';
+  return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+function normalizeSearchText(text) {
+  return String(text || '')
+    .toLowerCase()
+    .normalize('NFKD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .replace(/[^a-z0-9\s]/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+function getSearchIntent(query) {
+  const q = normalizeSearchText(query);
+  if (!q) return null;
+  const aliases = [
+    { key: 'jalan', terms: ['jalan', 'road', 'street'] },
+    { key: 'spbu', terms: ['spbu', 'pom', 'bensin', 'bbm'] },
+    { key: 'rumahibadah', terms: ['masjid', 'gereja', 'pura', 'vihara', 'klenteng', 'ibadah'] },
+    { key: 'pendudukmiskin', terms: ['miskin', 'penduduk', 'warga', 'keluarga'] },
+    { key: 'parsil', terms: ['parsil', 'tanah', 'sertifikat', 'bidang', 'lahan'] }
+  ];
+  for (const alias of aliases) {
+    if (alias.terms.some(term => q.includes(term))) return alias.key;
+  }
+  return null;
+}
+
+function clearSearchEntries(prefix) {
+  for (let i = searchEntries.length - 1; i >= 0; i--) {
+    if (searchEntries[i].key.startsWith(prefix + ':')) searchEntries.splice(i, 1);
+  }
+}
+
+function registerSearchEntries(prefix, items) {
+  clearSearchEntries(prefix);
+  items.forEach(item => searchEntries.push(item));
+}
+
+function getSearchMatches(query) {
+  const q = normalizeSearchText(query);
+  if (!q) return [];
+  const tokens = q.split(' ');
+  const intent = getSearchIntent(q);
+  const prefix = intent ? searchIntentPrefix[intent] : null;
+  const pool = prefix
+    ? searchEntries.filter(entry => entry.key.startsWith(prefix + ':'))
+    : searchEntries;
+
+  return pool
+    .map(entry => {
+      let score = 0;
+      const entryLabel = normalizeSearchText(entry.label);
+      const entryType = normalizeSearchText(entry.typeLabel);
+      const entryText = entry.searchText;
+      if (entry.searchText === q) score += 120;
+      if (entry.searchText.startsWith(q)) score += 80;
+      if (entryLabel.startsWith(q)) score += 90;
+      if (entryType.startsWith(q)) score += 60;
+      if (entry.searchText.includes(q)) score += 50;
+      const tokenHits = tokens.filter(token => entryText.includes(token) || entryLabel.includes(token)).length;
+      score += tokenHits * 12;
+      if (tokens.every(token => entryText.includes(token) || entryLabel.includes(token))) score += 40;
+      if (tokens[0] && (entryText.split(' ').some(word => word.startsWith(tokens[0])) || entryLabel.split(' ').some(word => word.startsWith(tokens[0])))) score += 15;
+      if (intent) {
+        if (entry.key.startsWith(intent + ':')) score += 120;
+        if (entryType.includes(intent)) score += 110;
+        if (intent === 'jalan' && entryLabel.startsWith('jalan')) score += 40;
+        if (intent === 'rumahibadah' && /(masjid|gereja|pura|vihara|klenteng)/.test(entryText)) score += 35;
+        if (intent === 'spbu' && /(spbu|pom|bensin|bbm)/.test(entryText)) score += 35;
+        if (intent === 'pendudukmiskin' && /(miskin|penduduk|warga)/.test(entryText)) score += 35;
+        if (intent === 'parsil' && /(parsil|tanah|sertifikat|bidang)/.test(entryText)) score += 35;
+      }
+      return { ...entry, score };
+    })
+    .filter(entry => entry.score > 0)
+    .sort((a, b) => b.score - a.score || a.label.localeCompare(b.label))
+    .slice(0, 10);
+}
+
+function renderSearchResults(query) {
+  const panel = document.getElementById('search-results');
+  if (!panel) return;
+  const matches = getSearchMatches(query);
+  if (!matches.length || !normalizeSearchText(query)) {
+    searchActiveIndex = -1;
+    panel.classList.remove('show');
+    panel.innerHTML = '';
+    return;
+  }
+
+  if (searchActiveIndex < 0 || searchActiveIndex >= matches.length) searchActiveIndex = 0;
+
+  panel.innerHTML = `
+      <div class="search-results-head">
+        <div class="search-results-title">Rekomendasi</div>
+      </div>
+      <div class="search-results-list">
+        ${matches.map((item, index) => `
+      <button type="button" class="search-result-item ${index === searchActiveIndex ? 'active' : ''}" data-index="${index}">
+        <div class="search-result-icon">${item.icon}</div>
+        <div class="search-result-info">
+          <div class="search-result-name">${esc(item.label)}</div>
+          <div class="search-result-sub">${esc(item.subtitle)}</div>
+        </div>
+        <div class="search-result-type">${esc(item.typeLabel)}</div>
+      </button>`).join('')}
+      </div>`;
+  panel.classList.add('show');
+}
+
+function closeSearchResults() {
+  const panel = document.getElementById('search-results');
+  if (!panel) return;
+  panel.classList.remove('show');
+}
+
+function selectSearchResult(item) {
+  const input = document.getElementById('search-input');
+  if (input) input.value = item.label;
+  closeSearchResults();
+  item.focus();
+}
+
+function initSearchBar() {
+  const input = document.getElementById('search-input');
+  const panel = document.getElementById('search-results');
+  const wrapper = document.getElementById('header-search');
+  if (!input || !panel || !wrapper) return;
+
+  input.addEventListener('input', () => {
+    searchActiveIndex = 0;
+    renderSearchResults(input.value);
+  });
+  input.addEventListener('focus', () => renderSearchResults(input.value));
+  input.addEventListener('keydown', e => {
+    const matches = getSearchMatches(input.value);
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      const active = matches[searchActiveIndex] || matches[0];
+      if (active) selectSearchResult(active);
+      return;
+    }
+    if (!matches.length) return;
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      searchActiveIndex = Math.min(searchActiveIndex + 1, matches.length - 1);
+      renderSearchResults(input.value);
+      return;
+    }
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      searchActiveIndex = Math.max(searchActiveIndex - 1, 0);
+      renderSearchResults(input.value);
+    }
+  });
+
+  panel.addEventListener('mousedown', e => {
+    const item = e.target.closest('.search-result-item');
+    if (!item) return;
+    e.preventDefault();
+    const matches = getSearchMatches(input.value);
+    const selected = matches[Number(item.dataset.index)];
+    if (selected) selectSearchResult(selected);
+  });
+
+  document.addEventListener('click', e => {
+    if (!wrapper.contains(e.target)) closeSearchResults();
+  });
+}
+
+function onceMapClick(cb) {
+  if (_mapClickCb) map.off('click', _mapClickCb);
+  _mapClickCb = function (e) {
+    _mapClickCb = null;
+    cb(e.latlng.lat, e.latlng.lng);
+  };
+  map.once('click', _mapClickCb);
+}
+
+function cancelMapClick() {
+  if (_mapClickCb) {
+    map.off('click', _mapClickCb);
+    _mapClickCb = null;
+  }
+  hideInstruction();
+  document.querySelectorAll('.btn-add.active').forEach(b => b.classList.remove('active'));
+}
+
+function switchTab(tab) {
+  currentTab = tab;
+  cancelMapClick();
+  document.querySelectorAll('.nav-tab').forEach((el, i) => {
+    el.classList.toggle('active', ['kemiskinan', 'spbu', 'jalan', 'parsil'][i] === tab);
+  });
+  try { map.removeControl(drawControl); } catch (e) { }
+  const titles = { kemiskinan: 'Ibadah & Kemiskinan', spbu: 'SPBU', jalan: 'Data Jalan', parsil: 'Parsil Tanah' };
+  document.getElementById('panel-title').textContent = titles[tab];
+  renderPanel(tab);
+  if (tab === 'jalan' || tab === 'parsil') map.addControl(drawControl);
+}
+
+async function renderPanel(tab) {
+  const pb = document.getElementById('panel-body');
+  pb.innerHTML = '<div class="loading"><span class="spinner"></span>Memuat data…</div>';
+  if (tab === 'kemiskinan') await renderKemiskinanPanel(pb);
+  if (tab === 'spbu') await renderSpbuPanel(pb);
+  if (tab === 'jalan') await renderJalanPanel(pb);
+  if (tab === 'parsil') await renderParsilPanel(pb);
+}
+
+async function preloadFeatureLayers() {
+  const sandbox = document.createElement('div');
+  try {
+    await Promise.all([
+      renderSpbuPanel(sandbox),
+      renderJalanPanel(sandbox),
+      renderParsilPanel(sandbox)
+    ]);
+  } catch (err) {
+    console.warn('Gagal memuat sebagian layer awal:', err);
+  }
+}
+
+function findGeomLayer(type, id) {
+  const keys = type === 'jalan'
+    ? ['jalanNasional', 'jalanProvinsi', 'jalanKabupaten']
+    : ['parsilSHM', 'parsilHGB', 'parsilHGU', 'parsilHP'];
+  for (const key of keys) {
+    let found = null;
+    layers[key].eachLayer(layer => {
+      if (layer._dataId === id) found = layer;
+    });
+    if (found) return found;
+  }
+  return null;
+}
+
+function getGeometryEditHandler() {
+  return drawControl?._toolbars?.edit?._modes?.edit?.handler || null;
+}
+
+function getGeometryGroupKey(type, data) {
+  return type === 'jalan' ? `jalan${data.status_jalan}` : `parsil${data.jenis_hak}`;
+}
+
+function cloneEditableLayer(type, sourceLayer) {
+  if (type === 'jalan') {
+    const coords = sourceLayer.getLatLngs().map(ll => [ll.lat, ll.lng]);
+    return L.polyline(coords, { ...sourceLayer.options });
+  }
+  const ring = sourceLayer.getLatLngs()[0].map(ll => [ll.lat, ll.lng]);
+  return L.polygon(ring, { ...sourceLayer.options });
+}
+
+function buildGeometryLayer(type, data) {
+  if (type === 'jalan') {
+    const cfg = jalanCfg[data.status_jalan] || jalanCfg.Kabupaten;
+    const coords = (data.geojson?.coordinates || []).map(c => [c[1], c[0]]);
+    return L.polyline(coords, { color: cfg.color, weight: cfg.weight, opacity: 0.9 });
+  }
+  const cfg = parsilCfg[data.jenis_hak] || parsilCfg.SHM;
+  const coords = ((data.geojson?.coordinates || [])[0] || []).map(c => [c[1], c[0]]);
+  return L.polygon(coords, { color: cfg.color, fillColor: cfg.color, fillOpacity: 0.18, weight: 2 });
+}
+
+function cancelGeometryEdit() {
+  const handler = getGeometryEditHandler();
+  if (handler) handler.disable();
+  drawnItems.clearLayers();
+  geometryEditState = null;
+  switchTab(currentTab);
+}
+
+function focusGeom(id, type) {
+  const keys = type === 'jalan'
+    ? ['jalanNasional', 'jalanProvinsi', 'jalanKabupaten']
+    : ['parsilSHM', 'parsilHGB', 'parsilHGU', 'parsilHP'];
+  for (const k of keys) {
+    layers[k].eachLayer(l => {
+      if (l._dataId === id) {
+        map.flyToBounds(l.getBounds(), { padding: [50, 50], duration: 1 });
+        l.openPopup();
+      }
+    });
+  }
+}
+
+function focusMarkerById(layerKey, id, zoom = searchPointZoom) {
+  const layer = layers[layerKey];
+  if (!layer) return;
+  let target = null;
+  layer.eachLayer(marker => {
+    if (marker._dataId === id) target = marker;
+  });
+  if (!target) return;
+  map.flyTo(target.getLatLng(), zoom, { duration: 1 });
+  map.once('moveend', () => target.openPopup());
+}
+
+function toggleLayer(key, el) {
+  layerVisible[key] = !layerVisible[key];
+  el.classList.toggle('checked', layerVisible[key]);
+  el.querySelector('.layer-check').textContent = layerVisible[key] ? '✓' : '';
+  layerVisible[key] ? map.addLayer(layers[key]) : map.removeLayer(layers[key]);
+}
+
+function updateStatusCount() {
+  let total = 0;
+  Object.values(layers).forEach(lg => { if (map.hasLayer(lg)) lg.eachLayer(() => total++); });
+  document.getElementById('status-count').textContent = `Total fitur: ${total}`;
+  document.getElementById('status-zoom').textContent = `Zoom: ${map.getZoom()}`;
+}
+
+map.on('mousemove', e => {
+  document.getElementById('coord-display').textContent = `Lat: ${e.latlng.lat.toFixed(6)} | Lng: ${e.latlng.lng.toFixed(6)}`;
+});
+map.on('zoomend', () => {
+  document.getElementById('status-zoom').textContent = `Zoom: ${map.getZoom()}`;
+});
+map.on(L.Draw.Event.CREATED, function (e) {
+  const { layer, layerType: type } = e;
+  if (type === 'polyline') {
+    const lls = layer.getLatLngs();
+    pendingLength = turf.length(turf.lineString(lls.map(c => [c.lng, c.lat])), { units: 'meters' });
+    pendingGeoJSON = { type: 'LineString', coordinates: lls.map(c => [c.lng, c.lat]) };
+    drawnItems.addLayer(layer);
+    openJalanForm();
+  }
+  if (type === 'polygon') {
+    const lls = layer.getLatLngs()[0];
+    const ring = [...lls.map(c => [c.lng, c.lat]), [lls[0].lng, lls[0].lat]];
+    pendingArea = turf.area(turf.polygon([ring]));
+    pendingGeoJSON = { type: 'Polygon', coordinates: [ring] };
+    drawnItems.addLayer(layer);
+    openParsilForm();
+  }
+});
+
+initSearchBar();
+
@@ -0,0 +1,220 @@
+const jalanCfg = {
+  Nasional: { color: '#dc2626', weight: 5 },
+  Provinsi: { color: '#d97706', weight: 3.5 },
+  Kabupaten: { color: '#2563eb', weight: 2.5 }
+};
+
+function renderJalanPanel(pb) {
+  return callAPI('data_jalan.php').then(res => {
+    const data = res.data || [];
+    const cnt = k => data.filter(d => d.status_jalan === k).length;
+
+    pb.innerHTML = `
+      <div class="layer-section">
+        <div class="layer-section-title">Filter Layer</div>
+        ${['Nasional', 'Provinsi', 'Kabupaten'].map(s => `
+          <div class="layer-item ${layerVisible['jalan' + s] ? 'checked' : ''}" onclick="toggleLayer('jalan${s}',this)">
+            <div class="layer-check">${layerVisible['jalan' + s] ? '✓' : ''}</div>
+            <div class="layer-dot" style="background:${jalanCfg[s].color};border-radius:2px;height:4px;width:18px;border-radius:2px"></div>
+            <div class="layer-label">Jalan ${s}</div>
+            <div class="layer-count">${cnt(s)}</div>
+          </div>`).join('')}
+      </div>
+      <div class="layer-section">
+        <div class="layer-section-title">Cara Menambahkan Data Jalan</div>
+        <div style="font-size:11px;color:var(--text2);line-height:1.9;padding:10px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius)">
+          1. Klik ikon <b style="color:var(--accent)">polyline</b> di toolbar kiri peta<br>
+          2. Klik titik-titik rute jalan di peta<br>
+          3. <b>Double-klik</b> untuk selesai menggambar<br>
+          4. Form simpan + panjang otomatis muncul
+        </div>
+      </div>
+      <div class="layer-section">
+        <div class="layer-section-title">Data Jalan (${data.length})</div>
+        <div class="data-list">
+          ${data.length ? data.map(d => `
+            <div class="data-item" onclick="focusGeom(${d.id},'jalan')">
+              <div class="item-icon">🛣</div>
+              <div class="item-info">
+                <div class="item-name">${esc(d.nama_jalan)}</div>
+                <div class="item-sub">${(d.panjang_meter / 1000).toFixed(3)} km</div>
+              </div>
+              <div style="display:flex;align-items:center;gap:5px">
+                <div class="item-badge" style="background:${jalanCfg[d.status_jalan].color}18;color:${jalanCfg[d.status_jalan].color};border:1px solid ${jalanCfg[d.status_jalan].color}44">${d.status_jalan.toUpperCase()}</div>
+                <button class="btn btn-ghost btn-sm" onclick="event.stopPropagation();editJalan(${d.id})">✏</button>
+                <button class="btn btn-danger btn-sm" onclick="event.stopPropagation();deleteJalan(${d.id})">✕</button>
+              </div>
+            </div>`).join('') : '<div class="loading">Belum ada data jalan</div>'}
+        </div>
+      </div>`;
+    loadJalanLayer(data);
+    registerSearchEntries('jalan', data.map(d => ({
+      key: `jalan:${d.id}`,
+      label: d.nama_jalan,
+      subtitle: `Jalan ${d.status_jalan} · ${(d.panjang_meter / 1000).toFixed(3)} km${d.keterangan ? ` · ${d.keterangan}` : ''}`,
+      typeLabel: 'Jalan',
+      icon: '🛣',
+      searchText: normalizeSearchText(`${d.nama_jalan} ${d.status_jalan} jalan`),
+      focus: () => focusGeom(d.id, 'jalan')
+    })));
+    updateStatusCount();
+  });
+}
+
+function loadJalanLayer(data) {
+  ['Nasional', 'Provinsi', 'Kabupaten'].forEach(k => layers['jalan' + k].clearLayers());
+  data.forEach(d => {
+    const cfg = jalanCfg[d.status_jalan], coords = d.geojson.coordinates.map(c => [c[1], c[0]]);
+    const line = L.polyline(coords, { color: cfg.color, weight: cfg.weight, opacity: 0.9 })
+      .bindPopup(`<h4>🛣 ${esc(d.nama_jalan)}</h4>
+        <p><b>Status:</b> Jalan ${d.status_jalan}</p>
+        <p><b>Panjang:</b> ${(d.panjang_meter / 1000).toFixed(3)} km</p>
+        ${d.keterangan ? `<p>${esc(d.keterangan)}</p>` : ''}
+        <div class="popup-actions"><button class="btn btn-ghost btn-sm" onclick="editJalan(${d.id})">✏ Edit</button><button class="btn btn-danger btn-sm" onclick="deleteJalan(${d.id})">✕ Hapus</button></div>`);
+    line._dataId = d.id;
+    line._groupKey = 'jalan' + d.status_jalan;
+    layers['jalan' + d.status_jalan].addLayer(line);
+  });
+}
+
+function openJalanForm() {
+  openModal('Simpan Data Jalan', `
+    <div class="form-calc">📏 Panjang: <b>${pendingLength.toFixed(1)} m</b> = ${(pendingLength / 1000).toFixed(3)} km </div>
+    <div class="form-group"><label class="form-label">Nama Jalan *</label>
+      <input class="form-input" id="jl-nama" placeholder="Jl. Ahmad Yani…"/></div>
+    <div class="form-group"><label class="form-label">Status Jalan *</label>
+      <select class="form-select" id="jl-status">
+        <option value="Nasional">Jalan Nasional</option>
+        <option value="Provinsi">Jalan Provinsi</option>
+        <option value="Kabupaten">Jalan Kabupaten</option>
+      </select></div>
+    <div class="form-group"><label class="form-label">Keterangan</label>
+      <input class="form-input" id="jl-ket" placeholder="Opsional…"/></div>`,
+    `<button class="btn btn-ghost" onclick="closeModal();drawnItems.clearLayers()">Batal</button>
+   <button class="btn btn-primary" onclick="saveJalan()">💾 Simpan</button>`);
+}
+
+async function saveJalan() {
+  const body = {
+    nama_jalan: document.getElementById('jl-nama').value.trim(),
+    status_jalan: document.getElementById('jl-status').value,
+    panjang_meter: pendingLength,
+    keterangan: document.getElementById('jl-ket').value,
+    geojson: pendingGeoJSON
+  };
+  if (!body.nama_jalan) return toast('Nama wajib diisi', 'error');
+  const res = await callAPI('data_jalan.php', 'POST', body);
+  if (res.status === 'success') {
+    toast(res.message, 'success');
+    closeModal();
+    drawnItems.clearLayers();
+    pendingGeoJSON = null;
+    pendingLength = null;
+    switchTab('jalan');
+  } else {
+    toast(res.message, 'error');
+  }
+}
+
+async function editJalan(id) {
+  map.closePopup();
+  const res = await callAPI(`data_jalan.php?id=${id}`);
+  const data = res.data;
+  const sourceLayer = findGeomLayer('jalan', id);
+  if (!data) return toast('Data jalan tidak ditemukan', 'error');
+
+  const groupKey = getGeometryGroupKey('jalan', data);
+  const editLayer = sourceLayer ? cloneEditableLayer('jalan', sourceLayer) : buildGeometryLayer('jalan', data);
+  editLayer._dataId = id;
+  editLayer._groupKey = groupKey;
+
+  if (sourceLayer) layers[groupKey].removeLayer(sourceLayer);
+  drawnItems.clearLayers();
+  drawnItems.addLayer(editLayer);
+
+  geometryEditState = { type: 'jalan', id, groupKey, sourceLayer, editLayer };
+  if (editLayer.editing && editLayer.editing.enable) {
+    editLayer.editing.enable();
+  } else {
+    const handler = getGeometryEditHandler();
+    if (!handler) {
+      drawnItems.clearLayers();
+      if (sourceLayer) layers[groupKey].addLayer(sourceLayer);
+      geometryEditState = null;
+      return toast('Mode edit geometri belum siap', 'error');
+    }
+    handler.enable();
+  }
+  map.fitBounds(editLayer.getBounds(), { padding: [50, 50], duration: 1 });
+  document.getElementById('panel-title').textContent = 'Edit Data Jalan';
+  document.getElementById('panel-body').innerHTML = `
+    <div class="layer-section">
+      <div class="layer-section-title">Edit Jalan</div>
+      <div style="font-size:11px;line-height:1.7;color:var(--text2);padding:10px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px">
+        Geser titik-titik garis di peta lalu simpan perubahan.
+      </div>
+      <div class="form-group">
+        <label class="form-label">Nama Jalan *</label>
+        <input class="form-input" id="jl-edit-nama" value="${esc(data.nama_jalan)}" />
+      </div>
+      <div class="form-row">
+        <div class="form-group">
+          <label class="form-label">Status Jalan *</label>
+          <select class="form-select" id="jl-edit-status">
+            ${['Nasional', 'Provinsi', 'Kabupaten'].map(s => `<option value="${s}"${data.status_jalan === s ? ' selected' : ''}>Jalan ${s}</option>`).join('')}
+          </select>
+        </div>
+        <div class="form-group">
+          <label class="form-label">Panjang Otomatis</label>
+          <input class="form-input" id="jl-edit-panjang" value="${(data.panjang_meter / 1000).toFixed(3)} km" disabled />
+        </div>
+      </div>
+      <div class="form-group">
+        <label class="form-label">Keterangan</label>
+        <input class="form-input" id="jl-edit-ket" value="${esc(data.keterangan || '')}" />
+      </div>
+    </div>`;
+  document.getElementById('panel-body').insertAdjacentHTML('beforeend', `
+    <div style="display:flex;gap:8px">
+      <button class="btn btn-ghost" style="flex:1" onclick="cancelGeometryEdit()">Batal</button>
+      <button class="btn btn-primary" style="flex:1" onclick="saveJalanEdit(${id})">Simpan Perubahan</button>
+    </div>`);
+}
+
+async function saveJalanEdit(id) {
+  const state = geometryEditState;
+  if (!state || state.type !== 'jalan') return;
+  const layer = state.editLayer;
+  const coords = layer.getLatLngs().map(ll => [ll.lng, ll.lat]);
+  const panjang_meter = turf.length(turf.lineString(coords), { units: 'meters' });
+  const body = {
+    nama_jalan: document.getElementById('jl-edit-nama').value.trim(),
+    status_jalan: document.getElementById('jl-edit-status').value,
+    panjang_meter,
+    keterangan: document.getElementById('jl-edit-ket').value,
+    geojson: { type: 'LineString', coordinates: coords }
+  };
+  if (!body.nama_jalan) return toast('Nama wajib diisi', 'error');
+  const res = await callAPI(`data_jalan.php?id=${id}`, 'PUT', body);
+  if (res.status === 'success') {
+    toast(res.message, 'success');
+    if (layer.editing && layer.editing.disable) layer.editing.disable();
+    const handler = getGeometryEditHandler();
+    if (handler) handler.disable();
+    drawnItems.clearLayers();
+    geometryEditState = null;
+    switchTab('jalan');
+  } else {
+    toast(res.message, 'error');
+  }
+}
+
+async function deleteJalan(id) {
+  if (!confirm('Hapus?')) return;
+  const r = await callAPI(`data_jalan.php?id=${id}`, 'DELETE');
+  if (r.status === 'success') {
+    toast('Dihapus', 'success');
+    map.closePopup();
+    switchTab('jalan');
+  }
+}
@@ -0,0 +1,451 @@
+function renderKemiskinanPanel(pb) {
+  return Promise.all([callAPI('rumah_ibadah.php'), callAPI('penduduk_miskin.php')]).then(([riRes, pmRes]) => {
+    const ri = riRes.data || [];
+    const pm = pmRes.data || [];
+
+    pb.innerHTML = `
+      <div class="layer-section">
+        <div class="layer-section-title">Visibilitas Layer</div>
+        ${mkLayerItem('rumahIbadah', '#f59e0b', 'Rumah Ibadah', ri.length)}
+        ${mkLayerItem('ibadahRadius', '#fbbf24', 'Radius Jangkauan', ri.length, true)}
+        ${mkLayerItem('pendudukMiskin', '#16a34a', 'Penduduk Miskin', pm.length)}
+      </div>
+      <div class="layer-section">
+        <div class="layer-section-title">Tambah Data</div>
+        <button class="btn-add" id="btn-add-ri" onclick="startAdd('ri')">＋ Tambah Rumah Ibadah</button>
+        <button class="btn-add" id="btn-add-pm" onclick="startAdd('pm')" style="margin-top:5px">＋ Tambah Penduduk Miskin</button>
+      </div>
+      <div class="layer-section">
+        <div class="layer-section-title">Rumah Ibadah (${ri.length})</div>
+        <div class="data-list">
+          ${ri.length ? ri.map(r => `
+            <div class="data-item" onclick="map.flyTo([${r.latitude},${r.longitude}],17)">
+              <div class="item-icon">⛪</div>
+              <div class="item-info">
+                <div class="item-name">${esc(r.nama)}</div>
+                <div class="item-sub">${r.jenis} · R=${r.radius_meter}m</div>
+              </div>
+              <div style="display:flex;gap:4px">
+                <button class="btn btn-ghost btn-sm" onclick="event.stopPropagation();editRI(${r.id})">✏</button>
+                <button class="btn btn-danger btn-sm" onclick="event.stopPropagation();deleteRI(${r.id})">✕</button>
+              </div>
+            </div>`).join('') : '<div class="loading">Belum ada data</div>'}
+        </div>
+      </div>
+      <div class="layer-section">
+        <div class="layer-section-title">Penduduk Miskin (${pm.length})</div>
+        <div class="data-list">
+          ${pm.length ? pm.map(p => `
+            <div class="data-item" onclick="map.flyTo([${p.latitude},${p.longitude}],17)">
+              <div class="item-icon">${pmEmoji(p)}</div>
+              <div class="item-info">
+                <div class="item-name">${esc(p.nama)}</div>
+                <div class="item-sub">${p.total_bantuan} bantuan · ${p.jumlah_anggota} jiwa</div>
+              </div>
+              <div class="item-badge ${p.status_proximity === 'dalam_radius' ? 'badge-green' : 'badge-red'}">
+                ${p.status_proximity === 'dalam_radius' ? 'DALAM' : 'LUAR'}
+              </div>
+            </div>`).join('') : '<div class="loading">Belum ada data</div>'}
+        </div>
+      </div>`;
+
+    loadRILayer(ri);
+    loadPMLayer(pm);
+    registerSearchEntries('ri', ri.map(r => ({
+      key: `ri:${r.id}`,
+      label: r.nama,
+      subtitle: `Rumah Ibadah · ${r.jenis}${r.alamat ? ` · ${r.alamat}` : ''}`,
+      typeLabel: 'Rumah Ibadah',
+      icon: '⛪',
+      searchText: normalizeSearchText(`${r.nama} ${r.jenis} rumah ibadah`),
+      focus: () => focusMarkerById('rumahIbadah', r.id)
+    })));
+    registerSearchEntries('pm', pm.map(p => ({
+      key: `pm:${p.id}`,
+      label: p.nama,
+      subtitle: `Penduduk Miskin · ${p.jumlah_anggota} jiwa${p.alamat ? ` · ${p.alamat}` : ''}`,
+      typeLabel: 'Penduduk Miskin',
+      icon: '👤',
+      searchText: normalizeSearchText(`${p.nama} ${p.nik || ''} penduduk miskin`),
+      focus: () => focusMarkerById('pendudukMiskin', p.id)
+    })));
+    updateStatusCount();
+  });
+}
+
+function mkLayerItem(key, color, label, count, isRing = false) {
+  const dot = isRing
+    ? `<div class="layer-dot" style="background:transparent;border:2px solid ${color}"></div>`
+    : `<div class="layer-dot" style="background:${color}"></div>`;
+  return `<div class="layer-item ${layerVisible[key] ? 'checked' : ''}" onclick="toggleLayer('${key}',this)">
+    <div class="layer-check">${layerVisible[key] ? '✓' : ''}</div>${dot}
+    <div class="layer-label">${label}</div>
+    <div class="layer-count">${count}</div>
+  </div>`;
+}
+
+function pmEmoji(p) {
+  if (p.bantuan_pemberdayaan > 0 && p.bantuan_konsumtif > 0) return '🔗';
+  if (p.bantuan_pemberdayaan > 0) return '📚';
+  if (p.bantuan_konsumtif > 0) return '🛍';
+  return '👤';
+}
+
+function loadRILayer(data) {
+  layers.rumahIbadah.clearLayers();
+  layers.ibadahRadius.clearLayers();
+
+  data.forEach(r => {
+    const circle = L.circle([r.latitude, r.longitude], {
+      radius: r.radius_meter,
+      color: '#f59e0b', fillColor: '#fef3c7', fillOpacity: 0.18,
+      weight: 1.5, dashArray: '6,4'
+    });
+    layers.ibadahRadius.addLayer(circle);
+
+    const icon = L.divIcon({
+      className: '',
+      html: `<div style="width:32px;height:32px;background:#f59e0b;border:3px solid #fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:0 3px 10px rgba(0,0,0,.2);cursor:grab;">⛪</div>`,
+      iconSize: [32, 32], iconAnchor: [16, 16]
+    });
+
+    const marker = L.marker([r.latitude, r.longitude], { icon, draggable: true }).bindPopup(riPopup(r));
+    marker._dataId = r.id;
+    marker.on('dragend', async function (ev) {
+      const { lat, lng } = ev.target.getLatLng();
+      circle.setLatLng([lat, lng]);
+      const res = await callAPI(`rumah_ibadah.php?id=${r.id}`, 'PUT', {
+        nama: r.nama, jenis: r.jenis, alamat: r.alamat,
+        no_wa: r.no_wa, latitude: lat, longitude: lng,
+        radius_meter: r.radius_meter
+      });
+      if (res.status === 'success') {
+        r.latitude = lat;
+        r.longitude = lng;
+        toast(`📍 ${r.nama} dipindahkan & koordinat diperbarui`, 'success');
+        await recalcAllProximity();
+      } else {
+        toast('Gagal update lokasi: ' + res.message, 'error');
+        marker.setLatLng([r.latitude, r.longitude]);
+      }
+    });
+
+    layers.rumahIbadah.addLayer(marker);
+  });
+}
+
+function riPopup(r) {
+  return `<h4>⛪ ${esc(r.nama)}</h4>
+    <p><b>Jenis:</b> ${r.jenis}</p>
+    <p><b>Radius:</b> ${r.radius_meter} m</p>
+    ${r.alamat ? `<p><b>Alamat:</b> ${esc(r.alamat)}</p>` : ''}
+    ${r.no_wa ? `<p><b>WA:</b> ${r.no_wa}</p>` : ''}
+    <div class="popup-drag-hint">↔ Seret marker untuk pindahkan lokasi — auto-save</div>
+    <div class="popup-actions">
+      <button class="btn btn-ghost btn-sm" onclick="editRI(${r.id})">✏ Edit</button>
+      <button class="btn btn-danger btn-sm" onclick="deleteRI(${r.id})">✕ Hapus</button>
+    </div>`;
+}
+
+function loadPMLayer(data) {
+  layers.pendudukMiskin.clearLayers();
+
+  data.forEach(p => {
+    const inR = p.status_proximity === 'dalam_radius';
+    const color = inR ? '#16a34a' : '#dc2626';
+    const hasBoth = p.bantuan_pemberdayaan > 0 && p.bantuan_konsumtif > 0;
+    const hasPemb = p.bantuan_pemberdayaan > 0;
+    const hasKons = p.bantuan_konsumtif > 0;
+
+    let dot = '';
+    if (hasBoth || hasPemb) dot = `<div style="position:absolute;top:-3px;right:-3px;width:9px;height:9px;background:#2563eb;border:1.5px solid #fff;border-radius:50%"></div>`;
+    if (hasKons && !hasPemb) dot = `<div style="position:absolute;top:-3px;right:-3px;width:9px;height:9px;background:#f59e0b;border:1.5px solid #fff;border-radius:50%"></div>`;
+
+    const icon = L.divIcon({
+      className: '',
+      html: `<div style="position:relative"><div style="width:26px;height:26px;background:${color};border:3px solid #fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;box-shadow:0 3px 10px ${color}66;cursor:grab;">👤</div>${dot}</div>`,
+      iconSize: [26, 26], iconAnchor: [13, 13]
+    });
+
+    const marker = L.marker([p.latitude, p.longitude], { icon, draggable: true }).bindPopup(pmPopup(p));
+    marker._dataId = p.id;
+    marker.on('dragend', async function (ev) {
+      const { lat, lng } = ev.target.getLatLng();
+      const res = await callAPI(`penduduk_miskin.php?id=${p.id}`, 'PUT', {
+        nama: p.nama, no_wa: p.no_wa, nik: p.nik,
+        alamat: p.alamat, jumlah_anggota: p.jumlah_anggota,
+        latitude: lat, longitude: lng
+      });
+      if (res.status === 'success') {
+        const prox = res.data?.proximity;
+        const statusMsg = prox?.status === 'dalam_radius' ? '✅ Dalam radius' : '❌ Luar radius';
+        toast(`📍 ${p.nama} dipindahkan — ${statusMsg}`, 'success');
+        switchTab('kemiskinan');
+      } else {
+        toast('Gagal update: ' + res.message, 'error');
+        marker.setLatLng([p.latitude, p.longitude]);
+      }
+    });
+
+    layers.pendudukMiskin.addLayer(marker);
+  });
+}
+
+function pmPopup(p) {
+  const inR = p.status_proximity === 'dalam_radius';
+  return `<h4>👤 ${esc(p.nama)}</h4>
+    <div class="proximity-info ${inR ? 'dalam' : 'luar'}">
+      ${inR ? `✅ Dalam radius — ${esc(p.nama_rumah_ibadah || '')}` : '❌ Di luar radius rumah ibadah'}
+    </div>
+    ${p.no_wa ? `<p><b>WA:</b> ${p.no_wa}</p>` : ''}
+    ${p.nik ? `<p><b>NIK:</b> ${p.nik}</p>` : ''}
+    ${p.alamat ? `<p><b>Alamat:</b> ${esc(p.alamat)}</p>` : ''}
+    <p><b>Keluarga:</b> ${p.jumlah_anggota} jiwa</p>
+    <p><b>Bantuan:</b> 📚${p.bantuan_pemberdayaan} · 🛍${p.bantuan_konsumtif}</p>
+    <div class="popup-drag-hint">↔ Seret marker untuk pindahkan lokasi — auto-save</div>
+    <div class="popup-actions">
+      <button class="btn btn-primary btn-sm" onclick="openLogBantuan(${p.id},'${esc(p.nama)}')">📋 Log Bantuan</button>
+      <button class="btn btn-ghost btn-sm" onclick="editPM(${p.id})">✏ Edit</button>
+      <button class="btn btn-danger btn-sm" onclick="deletePM(${p.id})">✕</button>
+    </div>`;
+}
+
+function startAdd(type) {
+  cancelMapClick();
+  const btnId = type === 'ri' ? 'btn-add-ri' : 'btn-add-pm';
+  const label = type === 'ri' ? 'lokasi Rumah Ibadah' : 'lokasi Penduduk Miskin';
+  document.getElementById(btnId).classList.add('active');
+  showInstruction(`Klik di peta untuk menentukan ${label}`);
+  onceMapClick((lat, lng) => {
+    document.getElementById(btnId).classList.remove('active');
+    hideInstruction();
+    if (type === 'ri') openRIForm(null, lat, lng);
+    else openPMForm(null, lat, lng);
+  });
+}
+
+function openRIForm(data, lat, lng) {
+  const isEdit = !!data;
+  const fLat = isEdit ? data.latitude : lat;
+  const fLng = isEdit ? data.longitude : lng;
+  openModal(isEdit ? 'Edit Rumah Ibadah' : 'Tambah Rumah Ibadah', `
+    <div class="form-coord">📍 Koordinat: ${fLat.toFixed(7)}, ${fLng.toFixed(7)}</div>
+    <div class="form-group">
+      <label class="form-label">Nama Rumah Ibadah *</label>
+      <input class="form-input" id="ri-nama" value="${esc(isEdit ? data.nama : '')}" placeholder="Masjid Al-Ikhlas…"/>
+    </div>
+    <div class="form-row">
+      <div class="form-group">
+        <label class="form-label">Jenis *</label>
+        <select class="form-select" id="ri-jenis">
+          ${['Masjid', 'Gereja', 'Pura', 'Vihara', 'Klenteng', 'Lainnya'].map(j =>
+            `<option value="${j}"${isEdit && data.jenis === j ? ' selected' : ''}>${j}</option>`
+          ).join('')}
+        </select>
+      </div>
+      <div class="form-group">
+        <label class="form-label">Radius (meter) *</label>
+        <input class="form-input" id="ri-radius" type="number" value="${isEdit ? data.radius_meter : 500}" min="50" max="10000"/>
+      </div>
+    </div>
+    <div class="form-group">
+      <label class="form-label">Alamat</label>
+      <input class="form-input" id="ri-alamat" value="${esc(isEdit ? data.alamat || '' : '')}" placeholder="Jl. …"/>
+    </div>
+    <div class="form-group">
+      <label class="form-label">No. WhatsApp</label>
+      <input class="form-input" id="ri-nowa" value="${esc(isEdit ? data.no_wa || '' : '')}" placeholder="081234…"/>
+    </div>`,
+  `<button class="btn btn-ghost" onclick="closeModal()">Batal</button>
+   <button class="btn btn-primary" onclick="saveRI(${isEdit ? data.id : 'null'},${fLat},${fLng})">💾 Simpan</button>`);
+}
+
+async function saveRI(id, lat, lng) {
+  const body = {
+    nama: document.getElementById('ri-nama').value.trim(),
+    jenis: document.getElementById('ri-jenis').value,
+    alamat: document.getElementById('ri-alamat').value.trim(),
+    no_wa: document.getElementById('ri-nowa').value.trim(),
+    latitude: lat,
+    longitude: lng,
+    radius_meter: parseInt(document.getElementById('ri-radius').value)
+  };
+  if (!body.nama) return toast('Nama wajib diisi', 'error');
+  const res = await callAPI(id ? `rumah_ibadah.php?id=${id}` : 'rumah_ibadah.php', id ? 'PUT' : 'POST', body);
+  if (res.status === 'success') {
+    toast(res.message, 'success');
+    closeModal();
+    await recalcAllProximity();
+    switchTab('kemiskinan');
+  } else {
+    toast(res.message, 'error');
+  }
+}
+
+function openPMForm(data, lat, lng) {
+  const isEdit = !!data;
+  const fLat = isEdit ? data.latitude : lat;
+  const fLng = isEdit ? data.longitude : lng;
+  openModal(isEdit ? 'Edit Penduduk Miskin' : 'Tambah Penduduk Miskin', `
+    <div class="form-coord">📍 Koordinat: ${fLat.toFixed(7)}, ${fLng.toFixed(7)}</div>
+    <div class="form-group">
+      <label class="form-label">Nama Lengkap *</label>
+      <input class="form-input" id="pm-nama" value="${esc(isEdit ? data.nama : '')}" placeholder="Ahmad Subarjo…"/>
+    </div>
+    <div class="form-row">
+      <div class="form-group">
+        <label class="form-label">No. WhatsApp</label>
+        <input class="form-input" id="pm-nowa" value="${esc(isEdit ? data.no_wa || '' : '')}" placeholder="081234…"/>
+      </div>
+      <div class="form-group">
+        <label class="form-label">NIK</label>
+        <input class="form-input" id="pm-nik" value="${esc(isEdit ? data.nik || '' : '')}" placeholder="617101…"/>
+      </div>
+    </div>
+    <div class="form-group">
+      <label class="form-label">Alamat</label>
+      <input class="form-input" id="pm-alamat" value="${esc(isEdit ? data.alamat || '' : '')}" placeholder="Jl. …"/>
+    </div>
+    <div class="form-group">
+      <label class="form-label">Jumlah Anggota Keluarga</label>
+      <input class="form-input" id="pm-jml" type="number" value="${isEdit ? data.jumlah_anggota : 1}" min="1" max="20"/>
+    </div>`,
+  `<button class="btn btn-ghost" onclick="closeModal()">Batal</button>
+   <button class="btn btn-primary" onclick="savePM(${isEdit ? data.id : 'null'},${fLat},${fLng})">💾 Simpan</button>`);
+}
+
+async function savePM(id, lat, lng) {
+  const body = {
+    nama: document.getElementById('pm-nama').value.trim(),
+    no_wa: document.getElementById('pm-nowa').value.trim(),
+    nik: document.getElementById('pm-nik').value.trim(),
+    alamat: document.getElementById('pm-alamat').value.trim(),
+    jumlah_anggota: parseInt(document.getElementById('pm-jml').value) || 1,
+    latitude: lat,
+    longitude: lng
+  };
+  if (!body.nama) return toast('Nama wajib diisi', 'error');
+  const res = await callAPI(id ? `penduduk_miskin.php?id=${id}` : 'penduduk_miskin.php', id ? 'PUT' : 'POST', body);
+  if (res.status === 'success') {
+    toast(res.message, 'success');
+    closeModal();
+    switchTab('kemiskinan');
+  } else {
+    toast(res.message, 'error');
+  }
+}
+
+async function editRI(id) {
+  map.closePopup();
+  const res = await callAPI(`rumah_ibadah.php?id=${id}`);
+  if (res.data) openRIForm(res.data, res.data.latitude, res.data.longitude);
+}
+
+async function deleteRI(id) {
+  if (!confirm('Hapus rumah ibadah ini?')) return;
+  const res = await callAPI(`rumah_ibadah.php?id=${id}`, 'DELETE');
+  if (res.status === 'success') {
+    toast('Dihapus', 'success');
+    map.closePopup();
+    await recalcAllProximity();
+    switchTab('kemiskinan');
+  }
+}
+
+async function editPM(id) {
+  map.closePopup();
+  const res = await callAPI(`penduduk_miskin.php?id=${id}`);
+  if (res.data) openPMForm(res.data, res.data.latitude, res.data.longitude);
+}
+
+async function deletePM(id) {
+  if (!confirm('Hapus data ini?')) return;
+  const res = await callAPI(`penduduk_miskin.php?id=${id}`, 'DELETE');
+  if (res.status === 'success') {
+    toast('Dihapus', 'success');
+    map.closePopup();
+    await recalcAllProximity();
+    switchTab('kemiskinan');
+  }
+}
+
+async function openLogBantuan(pmId, pmNama) {
+  map.closePopup();
+  const [logRes, riRes] = await Promise.all([
+    callAPI(`log_bantuan.php?penduduk_miskin_id=${pmId}`),
+    callAPI('rumah_ibadah.php')
+  ]);
+  const logs = logRes.data || [];
+  const ris = riRes.data || [];
+
+  openModal(`Log Bantuan — ${pmNama}`, `
+    <div style="margin-bottom:16px">
+      <div class="layer-section-title">Riwayat Bantuan</div>
+      ${logs.length ? logs.map(l => `
+        <div class="log-item ${l.tipe_bantuan === 'Pemberdayaan' ? 'pemberdayaan' : 'konsumtif'}">
+          <div class="log-type">${l.tipe_bantuan === 'Pemberdayaan' ? '📚 Pemberdayaan' : '🛍 Konsumtif'}</div>
+          <div class="log-detail">${esc(l.sub_kategori) || ''} ${l.keterangan ? '— ' + esc(l.keterangan) : ''}</div>
+          <div class="log-date">📅 ${l.tanggal_bantuan} · ${esc(l.nama_rumah_ibadah)}</div>
+        </div>`).join('') : '<div class="loading">Belum ada riwayat bantuan</div>'}
+    </div>
+    <div class="layer-section-title">Tambah Bantuan Baru</div>
+    <div class="form-group">
+      <label class="form-label">Dari Rumah Ibadah *</label>
+      <select class="form-select" id="lb-ri">
+        ${ris.map(r => `<option value="${r.id}">${esc(r.nama)} (${r.jenis})</option>`).join('')}
+      </select>
+    </div>
+    <div class="form-row">
+      <div class="form-group">
+        <label class="form-label">Tipe Bantuan *</label>
+        <select class="form-select" id="lb-tipe">
+          <option value="Pemberdayaan">📚 Pemberdayaan (Pelatihan)</option>
+          <option value="Konsumtif">🛍 Konsumtif (Makan/Barang)</option>
+        </select>
+      </div>
+      <div class="form-group">
+        <label class="form-label">Tanggal *</label>
+        <input class="form-input" id="lb-tgl" type="date" value="${new Date().toISOString().slice(0, 10)}"/>
+      </div>
+    </div>
+    <div class="form-group">
+      <label class="form-label">Sub Kategori</label>
+      <input class="form-input" id="lb-sub" placeholder="Pelatihan menjahit / Sembako…"/>
+    </div>
+    <div class="form-row">
+      <div class="form-group">
+        <label class="form-label">Keterangan</label>
+        <input class="form-input" id="lb-ket" placeholder="Opsional"/>
+      </div>
+      <div class="form-group">
+        <label class="form-label">Nilai (Rp)</label>
+        <input class="form-input" id="lb-nilai" type="number" placeholder="0"/>
+      </div>
+    </div>`,
+  `<button class="btn btn-ghost" onclick="closeModal()">Tutup</button>
+   <button class="btn btn-primary" onclick="saveLog(${pmId})">➕ Tambah Log</button>`);
+}
+
+async function saveLog(pmId) {
+  const body = {
+    penduduk_miskin_id: pmId,
+    rumah_ibadah_id: parseInt(document.getElementById('lb-ri').value),
+    tipe_bantuan: document.getElementById('lb-tipe').value,
+    tanggal_bantuan: document.getElementById('lb-tgl').value,
+    sub_kategori: document.getElementById('lb-sub').value,
+    keterangan: document.getElementById('lb-ket').value,
+    nilai_bantuan: document.getElementById('lb-nilai').value || null
+  };
+  const res = await callAPI('log_bantuan.php', 'POST', body);
+  if (res.status === 'success') {
+    toast('Log dicatat!', 'success');
+    closeModal();
+    switchTab('kemiskinan');
+  } else {
+    toast(res.message, 'error');
+  }
+}
+
+async function recalcAllProximity() {
+  await callAPI('penduduk_miskin.php?action=recalc_all', 'POST');
+}
@@ -0,0 +1,237 @@
+const parsilCfg = {
+  SHM: { color: '#16a34a', label: 'Sertifikat Hak Milik' },
+  HGB: { color: '#2563eb', label: 'Hak Guna Bangunan' },
+  HGU: { color: '#d97706', label: 'Hak Guna Usaha' },
+  HP: { color: '#7c3aed', label: 'Hak Pakai' }
+};
+
+function renderParsilPanel(pb) {
+  return callAPI('data_parsil.php').then(res => {
+    const data = res.data || [];
+    const cnt = k => data.filter(d => d.jenis_hak === k).length;
+
+    pb.innerHTML = `
+      <div class="layer-section">
+        <div class="layer-section-title">Filter Layer</div>
+        ${Object.entries(parsilCfg).map(([k, v]) => `
+          <div class="layer-item ${layerVisible['parsil' + k] ? 'checked' : ''}" onclick="toggleLayer('parsil${k}',this)">
+            <div class="layer-check">${layerVisible['parsil' + k] ? '✓' : ''}</div>
+            <div class="layer-dot" style="background:${v.color}"></div>
+            <div class="layer-label">${k} — ${v.label}</div>
+            <div class="layer-count">${cnt(k)}</div>
+          </div>`).join('')}
+      </div>
+      <div class="layer-section">
+        <div class="layer-section-title">Cara Menambahkan Data Parsil</div>
+        <div style="font-size:11px;color:var(--text2);line-height:1.9;padding:10px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius)">
+          1. Klik ikon <b style="color:var(--accent)">polygon</b> di toolbar kiri peta<br>
+          2. Klik titik-titik batas bidang tanah<br>
+          3. Klik titik awal / <b>double-klik</b> untuk menutup<br>
+          4. Form simpan + luas otomatis muncul
+        </div>
+      </div>
+      <div class="layer-section">
+        <div class="layer-section-title">Data Parsil (${data.length})</div>
+        <div class="data-list">
+          ${data.length ? data.map(d => `
+            <div class="data-item" onclick="focusGeom(${d.id},'parsil')">
+              <div class="item-icon">📐</div>
+              <div class="item-info">
+                <div class="item-name">${esc(d.nama_pemilik)}</div>
+                <div class="item-sub">${d.luas_m2.toFixed(1)} m² · ${d.no_sertifikat || '—'}</div>
+              </div>
+              <div style="display:flex;align-items:center;gap:5px">
+                <div class="item-badge" style="background:${parsilCfg[d.jenis_hak].color}18;color:${parsilCfg[d.jenis_hak].color};border:1px solid ${parsilCfg[d.jenis_hak].color}44">${d.jenis_hak}</div>
+                <button class="btn btn-ghost btn-sm" onclick="event.stopPropagation();editParsil(${d.id})">✏</button>
+                <button class="btn btn-danger btn-sm" onclick="event.stopPropagation();deleteParsil(${d.id})">✕</button>
+              </div>
+            </div>`).join('') : '<div class="loading">Belum ada data parsil</div>'}
+        </div>
+      </div>`;
+    loadParsilLayer(data);
+    registerSearchEntries('parsil', data.map(d => ({
+      key: `parsil:${d.id}`,
+      label: d.nama_pemilik,
+      subtitle: `Parsil ${d.jenis_hak} · ${d.luas_m2.toFixed(1)} m²${d.no_sertifikat ? ` · ${d.no_sertifikat}` : ''}`,
+      typeLabel: 'Parsil',
+      icon: '📐',
+      searchText: normalizeSearchText(`${d.nama_pemilik} ${d.jenis_hak} parsil tanah`),
+      focus: () => focusGeom(d.id, 'parsil')
+    })));
+    updateStatusCount();
+  });
+}
+
+function loadParsilLayer(data) {
+  ['SHM', 'HGB', 'HGU', 'HP'].forEach(k => layers['parsil' + k].clearLayers());
+  data.forEach(d => {
+    const cfg = parsilCfg[d.jenis_hak], coords = d.geojson.coordinates[0].map(c => [c[1], c[0]]);
+    const poly = L.polygon(coords, { color: cfg.color, fillColor: cfg.color, fillOpacity: 0.18, weight: 2 })
+      .bindPopup(`<h4>📐 ${esc(d.nama_pemilik)}</h4>
+        <p><b>Jenis Hak:</b> ${d.jenis_hak} — ${cfg.label}</p>
+        <p><b>Luas:</b> ${d.luas_m2.toFixed(2)} m² (${(d.luas_m2 / 10000).toFixed(4)} ha)</p>
+        ${d.no_sertifikat ? `<p><b>No. Sertifikat:</b> ${d.no_sertifikat}</p>` : ''}
+        ${d.keterangan ? `<p>${esc(d.keterangan)}</p>` : ''}
+        <div class="popup-actions"><button class="btn btn-ghost btn-sm" onclick="editParsil(${d.id})">✏ Edit</button><button class="btn btn-danger btn-sm" onclick="deleteParsil(${d.id})">✕ Hapus</button></div>`);
+    poly._dataId = d.id;
+    poly._groupKey = 'parsil' + d.jenis_hak;
+    layers['parsil' + d.jenis_hak].addLayer(poly);
+  });
+}
+
+function openParsilForm() {
+  openModal('Simpan Parsil Tanah', `
+    <div class="form-calc">📐 Luas: <b>${pendingArea.toFixed(2)} m²</b> = ${(pendingArea / 10000).toFixed(4)} ha </div>
+    <div class="form-group"><label class="form-label">Nama Pemilik *</label>
+      <input class="form-input" id="ps-nama" placeholder="Budi Santoso…"/></div>
+    <div class="form-row">
+      <div class="form-group"><label class="form-label">Jenis Hak *</label>
+        <select class="form-select" id="ps-hak">
+          <option value="SHM">SHM — Hak Milik</option>
+          <option value="HGB">HGB — Guna Bangunan</option>
+          <option value="HGU">HGU — Guna Usaha</option>
+          <option value="HP">HP — Hak Pakai</option>
+        </select></div>
+      <div class="form-group"><label class="form-label">No. Sertifikat</label>
+        <input class="form-input" id="ps-sert" placeholder="00001/Kel/…"/></div>
+    </div>
+    <div class="form-group"><label class="form-label">Keterangan</label>
+      <input class="form-input" id="ps-ket" placeholder="Opsional…"/></div>`,
+    `<button class="btn btn-ghost" onclick="closeModal();drawnItems.clearLayers()">Batal</button>
+   <button class="btn btn-primary" onclick="saveParsil()">💾 Simpan</button>`);
+}
+
+async function saveParsil() {
+  const body = {
+    nama_pemilik: document.getElementById('ps-nama').value.trim(),
+    jenis_hak: document.getElementById('ps-hak').value,
+    no_sertifikat: document.getElementById('ps-sert').value,
+    luas_m2: pendingArea,
+    keterangan: document.getElementById('ps-ket').value,
+    geojson: pendingGeoJSON
+  };
+  if (!body.nama_pemilik) return toast('Nama wajib diisi', 'error');
+  const res = await callAPI('data_parsil.php', 'POST', body);
+  if (res.status === 'success') {
+    toast(res.message, 'success');
+    closeModal();
+    drawnItems.clearLayers();
+    pendingGeoJSON = null;
+    pendingArea = null;
+    switchTab('parsil');
+  } else {
+    toast(res.message, 'error');
+  }
+}
+
+async function editParsil(id) {
+  map.closePopup();
+  const res = await callAPI(`data_parsil.php?id=${id}`);
+  const data = res.data;
+  const sourceLayer = findGeomLayer('parsil', id);
+  if (!data) return toast('Data parsil tidak ditemukan', 'error');
+
+  const groupKey = getGeometryGroupKey('parsil', data);
+  const editLayer = sourceLayer ? cloneEditableLayer('parsil', sourceLayer) : buildGeometryLayer('parsil', data);
+  editLayer._dataId = id;
+  editLayer._groupKey = groupKey;
+
+  if (sourceLayer) layers[groupKey].removeLayer(sourceLayer);
+  drawnItems.clearLayers();
+  drawnItems.addLayer(editLayer);
+
+  geometryEditState = { type: 'parsil', id, groupKey, sourceLayer, editLayer };
+  if (editLayer.editing && editLayer.editing.enable) {
+    editLayer.editing.enable();
+  } else {
+    const handler = getGeometryEditHandler();
+    if (!handler) {
+      drawnItems.clearLayers();
+      if (sourceLayer) layers[groupKey].addLayer(sourceLayer);
+      geometryEditState = null;
+      return toast('Mode edit geometri belum siap', 'error');
+    }
+    handler.enable();
+  }
+  map.fitBounds(editLayer.getBounds(), { padding: [50, 50], duration: 1 });
+  document.getElementById('panel-title').textContent = 'Edit Parsil Tanah';
+  document.getElementById('panel-body').innerHTML = `
+    <div class="layer-section">
+      <div class="layer-section-title">Edit Parsil</div>
+      <div style="font-size:11px;line-height:1.7;color:var(--text2);padding:10px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px">
+        Geser titik-titik batas bidang di peta lalu simpan perubahan.
+      </div>
+      <div class="form-group">
+        <label class="form-label">Nama Pemilik *</label>
+        <input class="form-input" id="ps-edit-nama" value="${esc(data.nama_pemilik)}" />
+      </div>
+      <div class="form-row">
+        <div class="form-group">
+          <label class="form-label">Jenis Hak *</label>
+          <select class="form-select" id="ps-edit-hak">
+            ${Object.entries(parsilCfg).map(([k, v]) => `<option value="${k}"${data.jenis_hak === k ? ' selected' : ''}>${k} — ${v.label}</option>`).join('')}
+          </select>
+        </div>
+        <div class="form-group">
+          <label class="form-label">Luas Otomatis</label>
+          <input class="form-input" id="ps-edit-luas" value="${data.luas_m2.toFixed(2)} m²" disabled />
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="form-group">
+          <label class="form-label">No. Sertifikat</label>
+          <input class="form-input" id="ps-edit-sert" value="${esc(data.no_sertifikat || '')}" />
+        </div>
+        <div class="form-group">
+          <label class="form-label">Keterangan</label>
+          <input class="form-input" id="ps-edit-ket" value="${esc(data.keterangan || '')}" />
+        </div>
+      </div>
+    </div>`;
+  document.getElementById('panel-body').insertAdjacentHTML('beforeend', `
+    <div style="display:flex;gap:8px">
+      <button class="btn btn-ghost" style="flex:1" onclick="cancelGeometryEdit()">Batal</button>
+      <button class="btn btn-primary" style="flex:1" onclick="saveParsilEdit(${id})">Simpan Perubahan</button>
+    </div>`);
+}
+
+async function saveParsilEdit(id) {
+  const state = geometryEditState;
+  if (!state || state.type !== 'parsil') return;
+  const layer = state.editLayer;
+  const ringLatLngs = layer.getLatLngs()[0];
+  const ring = ringLatLngs.map(ll => [ll.lng, ll.lat]);
+  ring.push([ringLatLngs[0].lng, ringLatLngs[0].lat]);
+  const luas_m2 = turf.area(turf.polygon([ring]));
+  const body = {
+    nama_pemilik: document.getElementById('ps-edit-nama').value.trim(),
+    jenis_hak: document.getElementById('ps-edit-hak').value,
+    no_sertifikat: document.getElementById('ps-edit-sert').value,
+    luas_m2,
+    keterangan: document.getElementById('ps-edit-ket').value,
+    geojson: { type: 'Polygon', coordinates: [ring] }
+  };
+  if (!body.nama_pemilik) return toast('Nama wajib diisi', 'error');
+  const res = await callAPI(`data_parsil.php?id=${id}`, 'PUT', body);
+  if (res.status === 'success') {
+    toast(res.message, 'success');
+    if (layer.editing && layer.editing.disable) layer.editing.disable();
+    const handler = getGeometryEditHandler();
+    if (handler) handler.disable();
+    drawnItems.clearLayers();
+    geometryEditState = null;
+    switchTab('parsil');
+  } else {
+    toast(res.message, 'error');
+  }
+}
+
+async function deleteParsil(id) {
+  if (!confirm('Hapus?')) return;
+  const r = await callAPI(`data_parsil.php?id=${id}`, 'DELETE');
+  if (r.status === 'success') {
+    toast('Dihapus', 'success');
+    map.closePopup();
+    switchTab('parsil');
+  }
+}
@@ -0,0 +1,158 @@
+function renderSpbuPanel(pb) {
+  return callAPI('spbu.php').then(res => {
+    const data = res.data || [];
+    const d24 = data.filter(s => s.buka_24jam);
+    const dn24 = data.filter(s => !s.buka_24jam);
+
+    pb.innerHTML = `
+      <div class="layer-section">
+        <div class="layer-section-title">Filter Layer</div>
+        ${mkLayerItem('spbu24', '#16a34a', 'SPBU Buka 24 Jam', d24.length)}
+        ${mkLayerItem('spbuNon24', '#94a3b8', 'SPBU Tidak 24 Jam', dn24.length)}
+      </div>
+      <div class="layer-section">
+        <div class="layer-section-title">Tambah Data</div>
+        <button class="btn-add" id="btn-add-spbu" onclick="startAddSPBU()">＋ Tambah SPBU</button>
+      </div>
+      <div class="layer-section">
+        <div class="layer-section-title">Daftar SPBU (${data.length})</div>
+        <div class="data-list">
+          ${data.length ? data.map(s => `
+            <div class="data-item" onclick="map.flyTo([${s.latitude},${s.longitude}],17)">
+              <div class="item-icon">⛽</div>
+              <div class="item-info">
+                <div class="item-name">${esc(s.nama)}</div>
+                <div class="item-sub">${s.no_wa || '—'}</div>
+              </div>
+              <div style="display:flex;align-items:center;gap:5px">
+                <div class="item-badge ${s.buka_24jam ? 'badge-green' : 'badge-amber'}">${s.buka_24jam ? '24 JAM' : 'TERBATAS'}</div>
+                <button class="btn btn-ghost btn-sm" onclick="event.stopPropagation();editSPBU(${s.id})">✏</button>
+                <button class="btn btn-danger btn-sm" onclick="event.stopPropagation();deleteSPBU(${s.id})">✕</button>
+              </div>
+            </div>`).join('') : '<div class="loading">Belum ada data</div>'}
+        </div>
+      </div>`;
+
+    loadSPBULayer(data);
+    registerSearchEntries('spbu', data.map(s => ({
+      key: `spbu:${s.id}`,
+      label: s.nama,
+      subtitle: `SPBU · ${s.buka_24jam ? '24 Jam' : 'Tidak 24 Jam'}${s.alamat ? ` · ${s.alamat}` : ''}`,
+      typeLabel: 'SPBU',
+      icon: '⛽',
+      searchText: normalizeSearchText(`${s.nama} ${s.no_wa || ''} spbu`),
+      focus: () => focusMarkerById(s.buka_24jam ? 'spbu24' : 'spbuNon24', s.id)
+    })));
+    updateStatusCount();
+  });
+}
+
+function loadSPBULayer(data) {
+  layers.spbu24.clearLayers();
+  layers.spbuNon24.clearLayers();
+  data.forEach(s => {
+    const is24 = s.buka_24jam;
+    const color = is24 ? '#16a34a' : '#64748b';
+    const icon = L.divIcon({
+      className: '',
+      html: `<div style="width:30px;height:30px;background:${color};border:3px solid #fff;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:0 3px 10px rgba(0,0,0,.2);cursor:grab;">⛽</div>`,
+      iconSize: [30, 30], iconAnchor: [15, 15]
+    });
+    const marker = L.marker([s.latitude, s.longitude], { icon, draggable: true }).bindPopup(`<h4>⛽ ${esc(s.nama)}</h4>
+      <p><b>Status:</b> ${is24 ? '<span style="color:#16a34a;font-weight:600">✅ Buka 24 Jam</span>' : '⏰ Tidak 24 Jam'}</p>
+      ${s.no_wa ? `<p><b>WA:</b> ${s.no_wa}</p>` : ''}
+      ${s.alamat ? `<p><b>Alamat:</b> ${esc(s.alamat)}</p>` : ''}
+      <div class="popup-drag-hint">↔ Seret marker untuk pindahkan lokasi — auto-save</div>
+      <div class="popup-actions">
+        <button class="btn btn-ghost btn-sm" onclick="editSPBU(${s.id})">✏ Edit</button>
+        <button class="btn btn-danger btn-sm" onclick="deleteSPBU(${s.id})">✕ Hapus</button>
+      </div>`);
+    marker._dataId = s.id;
+
+    marker.on('dragend', async function (ev) {
+      const { lat, lng } = ev.target.getLatLng();
+      const res = await callAPI(`spbu.php?id=${s.id}`, 'PUT', {
+        nama: s.nama, no_wa: s.no_wa, alamat: s.alamat,
+        buka_24jam: s.buka_24jam, latitude: lat, longitude: lng
+      });
+      if (res.status === 'success') {
+        s.latitude = lat;
+        s.longitude = lng;
+        toast(`📍 ${s.nama} dipindahkan`, 'success');
+      } else {
+        toast('Gagal update: ' + res.message, 'error');
+        marker.setLatLng([s.latitude, s.longitude]);
+      }
+    });
+
+    is24 ? layers.spbu24.addLayer(marker) : layers.spbuNon24.addLayer(marker);
+  });
+}
+
+function startAddSPBU() {
+  cancelMapClick();
+  document.getElementById('btn-add-spbu').classList.add('active');
+  showInstruction('Klik di peta untuk menentukan lokasi SPBU');
+  onceMapClick((lat, lng) => {
+    document.getElementById('btn-add-spbu').classList.remove('active');
+    hideInstruction();
+    openSPBUForm(null, lat, lng);
+  });
+}
+
+function openSPBUForm(data, lat, lng) {
+  const isEdit = !!data;
+  const fLat = isEdit ? data.latitude : lat;
+  const fLng = isEdit ? data.longitude : lng;
+  openModal(isEdit ? 'Edit SPBU' : 'Tambah SPBU', `
+    <div class="form-coord">📍 Koordinat: ${fLat.toFixed(7)}, ${fLng.toFixed(7)}</div>
+    <div class="form-group"><label class="form-label">Nama SPBU *</label>
+      <input class="form-input" id="spbu-nama" value="${esc(isEdit ? data.nama : '')}" placeholder="SPBU 64.751.01"/></div>
+    <div class="form-group"><label class="form-label">No. WhatsApp</label>
+      <input class="form-input" id="spbu-nowa" value="${esc(isEdit ? data.no_wa || '' : '')}" placeholder="081234…"/></div>
+    <div class="form-group"><label class="form-label">Alamat</label>
+      <input class="form-input" id="spbu-alamat" value="${esc(isEdit ? data.alamat || '' : '')}" placeholder="Jl. …"/></div>
+    <div class="form-group"><label class="form-label">Status Operasional</label>
+      <select class="form-select" id="spbu-24">
+        <option value="1"${isEdit && data.buka_24jam ? ' selected' : ''}>✅ Buka 24 Jam</option>
+        <option value="0"${isEdit && !data.buka_24jam ? ' selected' : ''}>⏰ Tidak 24 Jam</option>
+      </select></div>`,
+    `<button class="btn btn-ghost" onclick="closeModal()">Batal</button>
+   <button class="btn btn-primary" onclick="saveSPBU(${isEdit ? data.id : 'null'},${fLat},${fLng})">💾 Simpan</button>`);
+}
+
+async function saveSPBU(id, lat, lng) {
+  const body = {
+    nama: document.getElementById('spbu-nama').value.trim(),
+    no_wa: document.getElementById('spbu-nowa').value.trim(),
+    alamat: document.getElementById('spbu-alamat').value.trim(),
+    buka_24jam: document.getElementById('spbu-24').value === '1',
+    latitude: lat,
+    longitude: lng
+  };
+  if (!body.nama) return toast('Nama wajib diisi', 'error');
+  const res = await callAPI(id ? `spbu.php?id=${id}` : 'spbu.php', id ? 'PUT' : 'POST', body);
+  if (res.status === 'success') {
+    toast(res.message, 'success');
+    closeModal();
+    switchTab('spbu');
+  } else {
+    toast(res.message, 'error');
+  }
+}
+
+async function editSPBU(id) {
+  map.closePopup();
+  const r = await callAPI(`spbu.php?id=${id}`);
+  if (r.data) openSPBUForm(r.data, r.data.latitude, r.data.longitude);
+}
+
+async function deleteSPBU(id) {
+  if (!confirm('Hapus SPBU?')) return;
+  const r = await callAPI(`spbu.php?id=${id}`, 'DELETE');
+  if (r.status === 'success') {
+    toast('Dihapus', 'success');
+    map.closePopup();
+    switchTab('spbu');
+  }
+}