add files

2026-06-10 19:39:45 +07:00
parent b2a31a6a16
commit 7bf3c98e59
3541 changed files with 458317 additions and 0 deletions
@@ -0,0 +1,433 @@
+/* assets/css/style.css — WebGIS Pontianak v2.0 */
+
+/* ── RESET & BASE ─────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --bg:       #080c14;
+  --surface:  #0f1522;
+  --card:     #141b2d;
+  --card2:    #1a2235;
+  --border:   rgba(99,179,237,0.12);
+  --accent:   #3b82f6;
+  --accent2:  #06b6d4;
+  --green:    #10b981;
+  --red:      #ef4444;
+  --amber:    #f59e0b;
+  --purple:   #8b5cf6;
+  --pink:     #ec4899;
+  --text:     #e2e8f0;
+  --text2:    #7c93b5;
+  --glow:     rgba(59,130,246,0.2);
+  --radius:   12px;
+  --radius-lg: 18px;
+  --shadow:   0 8px 32px rgba(0,0,0,0.4);
+  --shadow-lg: 0 24px 64px rgba(0,0,0,0.5);
+}
+
+html { scroll-behavior: smooth; }
+
+body {
+  font-family: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* ── SCROLLBAR ────────────────────────────────────────── */
+::-webkit-scrollbar { width: 5px; height: 5px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: rgba(99,179,237,0.2); border-radius: 5px; }
+::-webkit-scrollbar-thumb:hover { background: rgba(99,179,237,0.35); }
+
+/* ── TYPOGRAPHY ───────────────────────────────────────── */
+h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.5px; }
+h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; }
+h3 { font-size: 16px; font-weight: 700; }
+h4 { font-size: 13px; font-weight: 700; }
+p  { font-size: 14px; color: var(--text2); }
+small { font-size: 11px; color: var(--text2); }
+a  { color: var(--accent); text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+/* ── CARDS ────────────────────────────────────────────── */
+.card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 20px;
+  transition: border-color 0.2s, transform 0.2s;
+}
+.card:hover { border-color: rgba(99,179,237,0.25); }
+.card-sm { padding: 14px; border-radius: var(--radius); }
+
+/* ── BUTTONS ──────────────────────────────────────────── */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 9px 18px;
+  border-radius: var(--radius);
+  border: none;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.2s;
+  white-space: nowrap;
+  text-decoration: none;
+}
+.btn-sm  { padding: 6px 12px; font-size: 11px; border-radius: 8px; }
+.btn-lg  { padding: 13px 24px; font-size: 15px; }
+.btn-full { width: 100%; }
+
+.btn-primary {
+  background: linear-gradient(135deg, var(--accent), var(--accent2));
+  color: #fff;
+  box-shadow: 0 4px 16px var(--glow);
+}
+.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px var(--glow); }
+.btn-primary:active { transform: translateY(0); }
+
+.btn-success { background: linear-gradient(135deg, var(--green), #059669); color: #fff; }
+.btn-success:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(16,185,129,0.3); }
+
+.btn-danger { background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.25); color: var(--red); }
+.btn-danger:hover { background: rgba(239,68,68,0.2); }
+
+.btn-ghost { background: rgba(255,255,255,0.04); border: 1px solid var(--border); color: var(--text2); }
+.btn-ghost:hover { background: rgba(255,255,255,0.08); color: var(--text); }
+
+.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
+
+/* ── BADGES ───────────────────────────────────────────── */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 8px;
+  border-radius: 6px;
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.3px;
+  white-space: nowrap;
+}
+.badge-blue   { background: rgba(59,130,246,0.15);  color: #93c5fd; }
+.badge-green  { background: rgba(16,185,129,0.15);  color: #6ee7b7; }
+.badge-amber  { background: rgba(245,158,11,0.15);  color: #fcd34d; }
+.badge-red    { background: rgba(239,68,68,0.15);   color: #fca5a5; }
+.badge-purple { background: rgba(139,92,246,0.15);  color: #c4b5fd; }
+.badge-gray   { background: rgba(255,255,255,0.07); color: var(--text2); }
+
+/* ── FORMS ────────────────────────────────────────────── */
+.form-group { margin-bottom: 16px; }
+.form-group label {
+  display: block;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text2);
+  margin-bottom: 6px;
+  letter-spacing: 0.3px;
+  text-transform: uppercase;
+}
+.form-control {
+  width: 100%;
+  background: rgba(255,255,255,0.04);
+  border: 1px solid var(--border);
+  color: var(--text);
+  padding: 10px 12px;
+  border-radius: var(--radius);
+  font-family: inherit;
+  font-size: 13px;
+  transition: all 0.2s;
+  outline: none;
+}
+.form-control:focus {
+  border-color: var(--accent);
+  background: rgba(59,130,246,0.06);
+  box-shadow: 0 0 0 3px var(--glow);
+}
+.form-control::placeholder { color: rgba(124,147,181,0.4); }
+.form-control option { background: var(--card); color: var(--text); }
+textarea.form-control { resize: vertical; min-height: 80px; }
+
+/* ── TABLES ───────────────────────────────────────────── */
+.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); }
+table.datatable {
+  width: 100%;
+  border-collapse: collapse;
+}
+table.datatable thead tr {
+  background: rgba(255,255,255,0.03);
+  border-bottom: 1px solid var(--border);
+}
+table.datatable th {
+  padding: 10px 14px;
+  text-align: left;
+  font-size: 10px;
+  font-weight: 800;
+  color: var(--text2);
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+table.datatable td {
+  padding: 11px 14px;
+  font-size: 12px;
+  border-bottom: 1px solid rgba(255,255,255,0.04);
+  vertical-align: middle;
+}
+table.datatable tbody tr:hover td { background: rgba(59,130,246,0.03); }
+table.datatable tbody tr:last-child td { border-bottom: none; }
+
+/* ── MODALS ───────────────────────────────────────────── */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.75);
+  z-index: 500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(4px);
+  animation: fadeIn 0.2s;
+}
+@keyframes fadeIn { from { opacity: 0; } }
+.modal-overlay.hidden { display: none; }
+
+.modal {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  width: 90%;
+  max-width: 560px;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: var(--shadow-lg);
+  animation: modalSlide 0.3s cubic-bezier(0.23,1,0.32,1);
+}
+@keyframes modalSlide { from { opacity: 0; transform: scale(0.95); } }
+.modal-lg { max-width: 720px; }
+
+.modal-header {
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: sticky;
+  top: 0;
+  background: var(--card);
+  z-index: 2;
+}
+.modal-title { font-size: 15px; font-weight: 800; }
+.modal-close {
+  background: rgba(255,255,255,0.05);
+  border: none;
+  color: var(--text2);
+  width: 30px;
+  height: 30px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+.modal-close:hover { background: rgba(239,68,68,0.2); color: var(--red); }
+.modal-body { padding: 20px 24px; }
+.modal-footer {
+  padding: 16px 24px;
+  border-top: 1px solid var(--border);
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+}
+
+/* ── ALERTS / TOASTS ──────────────────────────────────── */
+.alert {
+  padding: 12px 16px;
+  border-radius: var(--radius);
+  font-size: 13px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.alert-success { background: rgba(16,185,129,0.1);  border: 1px solid rgba(16,185,129,0.3); color: #6ee7b7; }
+.alert-error   { background: rgba(239,68,68,0.1);   border: 1px solid rgba(239,68,68,0.3);  color: #fca5a5; }
+.alert-info    { background: rgba(59,130,246,0.1);  border: 1px solid rgba(59,130,246,0.3); color: #93c5fd; }
+.alert-warning { background: rgba(245,158,11,0.1);  border: 1px solid rgba(245,158,11,0.3); color: #fcd34d; }
+
+.toast-container {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  pointer-events: none;
+}
+.toast {
+  padding: 12px 18px;
+  border-radius: var(--radius);
+  font-size: 13px;
+  font-weight: 600;
+  max-width: 320px;
+  animation: toastIn 0.3s cubic-bezier(0.23,1,0.32,1);
+  pointer-events: none;
+}
+@keyframes toastIn { from { opacity: 0; transform: translateY(16px); } }
+.toast-success { background: #065f46; border: 1px solid var(--green); color: #6ee7b7; }
+.toast-error   { background: #7f1d1d; border: 1px solid var(--red);   color: #fca5a5; }
+.toast-info    { background: #1e3a5f; border: 1px solid var(--accent); color: #93c5fd; }
+.toast-warning { background: #78350f; border: 1px solid var(--amber);  color: #fcd34d; }
+
+/* ── LEAFLET OVERRIDES ────────────────────────────────── */
+.leaflet-popup-content-wrapper {
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
+  padding: 0;
+}
+.leaflet-popup-content { margin: 0; }
+.leaflet-popup-tip-container { display: none; }
+.popup-wrap { padding: 12px 14px; min-width: 200px; font-family: 'Sora', sans-serif; }
+.popup-nama { font-size: 14px; font-weight: 800; margin-bottom: 8px; color: #1e293b; }
+.popup-row  { font-size: 12px; margin-bottom: 4px; color: #475569; }
+.popup-row strong { color: #1e293b; }
+.popup-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
+.popup-btn {
+  padding: 5px 12px;
+  border-radius: 7px;
+  border: none;
+  font-size: 11px;
+  font-weight: 700;
+  cursor: pointer;
+  font-family: 'Sora', sans-serif;
+  transition: all 0.15s;
+}
+.pb-blue   { background: #3b82f6; color: #fff; }
+.pb-green  { background: #10b981; color: #fff; }
+.pb-amber  { background: #f59e0b; color: #fff; }
+.pb-blue:hover  { background: #2563eb; }
+.pb-green:hover { background: #059669; }
+.pb-amber:hover { background: #d97706; }
+
+/* ── LOADERS ──────────────────────────────────────────── */
+.spinner {
+  display: inline-block;
+  width: 18px; height: 18px;
+  border: 2px solid rgba(255,255,255,0.2);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+  vertical-align: middle;
+}
+.spinner-dark {
+  border-color: rgba(0,0,0,0.1);
+  border-top-color: var(--accent);
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.skeleton {
+  background: linear-gradient(90deg,
+    rgba(255,255,255,0.04) 25%,
+    rgba(255,255,255,0.08) 50%,
+    rgba(255,255,255,0.04) 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+  border-radius: 6px;
+}
+@keyframes shimmer { to { background-position: -200% 0; } }
+
+/* ── UTILS ────────────────────────────────────────────── */
+.text-center { text-align: center; }
+.text-right  { text-align: right; }
+.text-muted  { color: var(--text2); }
+.text-accent { color: var(--accent); }
+.text-green  { color: var(--green); }
+.text-red    { color: var(--red); }
+.text-amber  { color: var(--amber); }
+.font-bold   { font-weight: 700; }
+.font-heavy  { font-weight: 800; }
+
+.d-flex  { display: flex; }
+.d-grid  { display: grid; }
+.align-center { align-items: center; }
+.justify-between { justify-content: space-between; }
+.gap-sm { gap: 8px; }
+.gap-md { gap: 14px; }
+.gap-lg { gap: 20px; }
+
+.mt-sm { margin-top: 8px; }
+.mt-md { margin-top: 16px; }
+.mt-lg { margin-top: 24px; }
+.mb-sm { margin-bottom: 8px; }
+.mb-md { margin-bottom: 16px; }
+.mb-lg { margin-bottom: 24px; }
+
+.p-sm { padding: 8px; }
+.p-md { padding: 16px; }
+.p-lg { padding: 24px; }
+
+.hidden { display: none !important; }
+.invisible { visibility: hidden; }
+
+.w-full { width: 100%; }
+.h-full { height: 100%; }
+
+/* ── EMPTY STATE ──────────────────────────────────────── */
+.empty-state {
+  text-align: center;
+  padding: 40px 20px;
+  color: var(--text2);
+}
+.empty-state .es-icon { font-size: 40px; margin-bottom: 12px; }
+.empty-state h4 { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
+.empty-state p  { font-size: 12px; }
+
+/* ── DIVIDERS ─────────────────────────────────────────── */
+.section-label {
+  font-size: 10px;
+  font-weight: 800;
+  color: var(--text2);
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  padding: 10px 0 6px;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 12px;
+}
+
+hr.divider { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
+
+/* ── GRID HELPERS ─────────────────────────────────────── */
+.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
+.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
+
+@media (max-width: 768px) {
+  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
+  .hide-mobile { display: none !important; }
+}
+@media (max-width: 1024px) {
+  .grid-4 { grid-template-columns: 1fr 1fr; }
+  .grid-3 { grid-template-columns: 1fr 1fr; }
+  .hide-tablet { display: none !important; }
+}
+
+/* ── ANIMATIONS ───────────────────────────────────────── */
+@keyframes fadeIn      { from { opacity: 0; } }
+@keyframes slideUp     { from { opacity: 0; transform: translateY(16px); } }
+@keyframes slideDown   { from { opacity: 0; transform: translateY(-16px); } }
+@keyframes scaleIn     { from { opacity: 0; transform: scale(0.95); } }
+@keyframes pulse       { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
+@keyframes bounce      { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
+
+.animate-fade-in  { animation: fadeIn  0.3s; }
+.animate-slide-up { animation: slideUp 0.3s cubic-bezier(0.23,1,0.32,1); }
+.animate-scale-in { animation: scaleIn 0.3s cubic-bezier(0.23,1,0.32,1); }
+.animate-pulse    { animation: pulse   2s infinite; }
@@ -0,0 +1,344 @@
+// assets/js/app.js — WebGIS Pontianak v2.0 Global Utilities
+
+// ── TOAST SYSTEM ──────────────────────────────────────────
+const Toast = (() => {
+  let container = null;
+
+  function getContainer() {
+    if (!container) {
+      container = document.createElement('div');
+      container.className = 'toast-container';
+      document.body.appendChild(container);
+    }
+    return container;
+  }
+
+  function show(message, type = 'info', duration = 3500) {
+    const t = document.createElement('div');
+    const icons = { success: '✅', error: '❌', info: 'ℹ️', warning: '⚠️' };
+    t.className = `toast toast-${type}`;
+    t.textContent = `${icons[type] || ''} ${message}`;
+    const c = getContainer();
+    c.appendChild(t);
+    setTimeout(() => {
+      t.style.opacity = '0';
+      t.style.transform = 'translateY(12px)';
+      t.style.transition = 'all 0.3s';
+      setTimeout(() => t.remove(), 300);
+    }, duration);
+    return t;
+  }
+
+  return { show, success: m => show(m,'success'), error: m => show(m,'error'), info: m => show(m,'info'), warning: m => show(m,'warning') };
+})();
+
+// ── API HELPER ────────────────────────────────────────────
+const API = {
+  async get(url) {
+    const res = await fetch(url, { headers: { 'Accept': 'application/json' } });
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    return res.json();
+  },
+  async post(url, data, isFormData = false) {
+    const opts = { method: 'POST' };
+    if (isFormData) { opts.body = data; }
+    else { opts.headers = { 'Content-Type': 'application/json' }; opts.body = JSON.stringify(data); }
+    const res = await fetch(url, opts);
+    return res.json();
+  },
+  async put(url, data) {
+    const res = await fetch(url, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) });
+    return res.json();
+  },
+  async delete(url) {
+    const res = await fetch(url, { method: 'DELETE' });
+    return res.json();
+  }
+};
+
+// ── DATE & TIME HELPERS ───────────────────────────────────
+const DateTime = {
+  format(dateStr, options = {}) {
+    if (!dateStr) return '—';
+    const defaults = { day: 'numeric', month: 'short', year: 'numeric' };
+    return new Date(dateStr).toLocaleDateString('id-ID', { ...defaults, ...options });
+  },
+  formatFull(dateStr) {
+    if (!dateStr) return '—';
+    return new Date(dateStr).toLocaleString('id-ID', {
+      day: 'numeric', month: 'short', year: 'numeric',
+      hour: '2-digit', minute: '2-digit'
+    });
+  },
+  ago(dateStr) {
+    if (!dateStr) return '—';
+    const diff = Date.now() - new Date(dateStr).getTime();
+    const m = Math.floor(diff / 60000);
+    if (m < 1)  return 'Baru saja';
+    if (m < 60) return `${m} menit lalu`;
+    const h = Math.floor(m / 60);
+    if (h < 24) return `${h} jam lalu`;
+    const d = Math.floor(h / 24);
+    if (d < 7)  return `${d} hari lalu`;
+    return DateTime.format(dateStr);
+  },
+  age(dob) {
+    if (!dob) return 0;
+    return Math.floor((Date.now() - new Date(dob).getTime()) / (365.25 * 24 * 3600 * 1000));
+  },
+  today() {
+    return new Date().toISOString().split('T')[0];
+  }
+};
+
+// ── NUMBER HELPERS ────────────────────────────────────────
+const Num = {
+  currency(val, prefix = 'Rp') {
+    if (!val && val !== 0) return '—';
+    const n = parseFloat(val);
+    if (n >= 1e9) return `${prefix}${(n/1e9).toFixed(1)}M`;
+    if (n >= 1e6) return `${prefix}${(n/1e6).toFixed(1)}jt`;
+    if (n >= 1e3) return `${prefix}${(n/1e3).toFixed(0)}rb`;
+    return `${prefix}${n.toLocaleString('id-ID')}`;
+  },
+  format(val) {
+    if (!val && val !== 0) return '—';
+    return parseFloat(val).toLocaleString('id-ID');
+  },
+  pct(val, total) {
+    if (!total) return '0%';
+    return `${((val / total) * 100).toFixed(1)}%`;
+  }
+};
+
+// ── BADGE HELPERS ─────────────────────────────────────────
+const Badge = {
+  statusEkonomi(se) {
+    const map = {
+      sangat_miskin: { cls: 'badge-red',    label: 'Sangat Miskin' },
+      miskin:        { cls: 'badge-amber',   label: 'Miskin' },
+      rentan:        { cls: 'badge-purple',  label: 'Rentan' },
+      mampu:         { cls: 'badge-green',   label: 'Mampu' },
+    };
+    const v = map[se] || { cls: 'badge-gray', label: se };
+    return `<span class="badge ${v.cls}">${v.label}</span>`;
+  },
+  statusVerif(s) {
+    const map = {
+      pending:   { cls: 'badge-amber', label: '⏳ Pending' },
+      diproses:  { cls: 'badge-blue',  label: '🔄 Diproses' },
+      disetujui: { cls: 'badge-green', label: '✅ Disetujui' },
+      ditolak:   { cls: 'badge-red',   label: '❌ Ditolak' },
+    };
+    const v = map[s] || { cls: 'badge-gray', label: s };
+    return `<span class="badge ${v.cls}">${v.label}</span>`;
+  },
+  statusBantuan(s) {
+    const map = {
+      disalurkan: { cls: 'badge-green', label: '✅ Disalurkan' },
+      ditunda:    { cls: 'badge-amber', label: '⏳ Ditunda' },
+      dibatalkan: { cls: 'badge-red',   label: '❌ Dibatalkan' },
+    };
+    const v = map[s] || { cls: 'badge-gray', label: s };
+    return `<span class="badge ${v.cls}">${v.label}</span>`;
+  },
+  jenisLaporan(j) {
+    const map = {
+      kelahiran:     '🍼 Kelahiran',
+      kematian:      '⚰️ Kematian',
+      pindah_masuk:  '📦 Pindah Masuk',
+      pindah_keluar: '🚚 Pindah Keluar',
+      pernikahan:    '💒 Pernikahan',
+      perceraian:    '📋 Perceraian',
+      perubahan_data:'📝 Perubahan Data',
+      lainnya:       '📌 Lainnya',
+    };
+    return map[j] || j;
+  },
+  jenisIbadah(j) {
+    const map = { Masjid:'🕌', Gereja:'⛪', Vihara:'🏯', Pura:'🛕', Klenteng:'⛩️' };
+    return `${map[j] || '🏢'} ${j}`;
+  }
+};
+
+// ── MAP ICON FACTORY ──────────────────────────────────────
+const MapIcon = {
+  make(color, emoji, size = 30) {
+    return L.divIcon({
+      className: '',
+      html: `<div style="width:${size}px;height:${size}px;background:${color};border-radius:50%;
+             display:flex;align-items:center;justify-content:center;font-size:${size*0.5}px;
+             box-shadow:0 3px 10px rgba(0,0,0,0.5);border:2px solid rgba(255,255,255,0.25)">${emoji}</div>`,
+      iconSize: [size, size],
+      iconAnchor: [size/2, size/2],
+      popupAnchor: [0, -size/2]
+    });
+  },
+  forIbadah(jenis) {
+    const map = {
+      masjid:   ['#3b82f6','🕌'],
+      gereja:   ['#8b5cf6','⛪'],
+      vihara:   ['#f59e0b','🏯'],
+      pura:     ['#10b981','🛕'],
+      klenteng: ['#06b6d4','⛩️'],
+    };
+    const [color, emoji] = map[(jenis||'').toLowerCase()] || ['#64748b','🏢'];
+    return this.make(color, emoji);
+  },
+  forPenduduk(statusEkonomi) {
+    const map = {
+      sangat_miskin: ['#ef4444','⚠️'],
+      miskin:        ['#f97316','🔸'],
+      rentan:        ['#eab308','🔶'],
+      mampu:         ['#22c55e','🔷'],
+    };
+    const [color, emoji] = map[statusEkonomi] || ['#64748b','📍'];
+    return this.make(color, emoji);
+  }
+};
+
+// ── MODAL MANAGER ─────────────────────────────────────────
+const Modal = {
+  open(id)  { document.getElementById(id)?.classList.remove('hidden'); },
+  close(id) { document.getElementById(id)?.classList.add('hidden'); },
+  toggle(id){ document.getElementById(id)?.classList.toggle('hidden'); },
+};
+
+// ── LOADING BUTTON ────────────────────────────────────────
+function setLoading(btn, loading, label = '') {
+  if (loading) {
+    btn._origLabel = btn.innerHTML;
+    btn.disabled = true;
+    btn.innerHTML = `<div class="spinner"></div> ${label || 'Memproses...'}`;
+  } else {
+    btn.disabled = false;
+    btn.innerHTML = btn._origLabel || label;
+  }
+}
+
+// ── FORM SERIALIZER ───────────────────────────────────────
+function serializeForm(formId) {
+  const form = document.getElementById(formId);
+  if (!form) return {};
+  const data = {};
+  form.querySelectorAll('input, select, textarea').forEach(el => {
+    if (el.name && !el.disabled) {
+      if (el.type === 'checkbox') data[el.name] = el.checked;
+      else if (el.type === 'radio')  { if (el.checked) data[el.name] = el.value; }
+      else data[el.name] = el.value;
+    }
+  });
+  return data;
+}
+
+// ── DEBOUNCE ──────────────────────────────────────────────
+function debounce(fn, delay = 300) {
+  let t;
+  return (...args) => { clearTimeout(t); t = setTimeout(() => fn(...args), delay); };
+}
+
+// ── CSV EXPORT ────────────────────────────────────────────
+function exportToCSV(data, filename = 'export.csv') {
+  if (!data.length) { Toast.warning('Tidak ada data untuk diekspor'); return; }
+  const headers = Object.keys(data[0]);
+  const rows = [headers, ...data.map(r => headers.map(h => `"${String(r[h] ?? '').replace(/"/g, '""')}"` ))];
+  const csv = rows.map(r => r.join(',')).join('\n');
+  const a = document.createElement('a');
+  a.href = 'data:text/csv;charset=utf-8,\uFEFF' + encodeURIComponent(csv);
+  a.download = filename;
+  a.click();
+}
+
+// ── CONFIRM DIALOG ────────────────────────────────────────
+function confirmAction(message, onConfirm) {
+  // Buat modal konfirmasi sederhana
+  const id = 'confirm-' + Date.now();
+  const el = document.createElement('div');
+  el.className = 'modal-overlay animate-fade-in';
+  el.id = id;
+  el.innerHTML = `
+    <div class="modal" style="max-width:380px">
+      <div class="modal-header">
+        <div class="modal-title">⚠️ Konfirmasi</div>
+      </div>
+      <div class="modal-body">
+        <p style="font-size:14px;color:var(--text);line-height:1.6">${message}</p>
+      </div>
+      <div class="modal-footer">
+        <button class="btn btn-ghost" onclick="document.getElementById('${id}').remove()">Batal</button>
+        <button class="btn btn-danger" id="${id}-ok">Ya, Lanjutkan</button>
+      </div>
+    </div>`;
+  document.body.appendChild(el);
+  document.getElementById(`${id}-ok`).onclick = () => { el.remove(); onConfirm(); };
+}
+
+// ── HAVERSINE (client-side) ───────────────────────────────
+function haversine(lat1, lon1, lat2, lon2) {
+  const R = 6371000;
+  const phi1 = lat1 * Math.PI / 180, phi2 = lat2 * Math.PI / 180;
+  const dphi = (lat2 - lat1) * Math.PI / 180;
+  const dl   = (lon2 - lon1) * Math.PI / 180;
+  const a = Math.sin(dphi/2)**2 + Math.cos(phi1)*Math.cos(phi2)*Math.sin(dl/2)**2;
+  return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
+}
+
+// ── GEOLOCATION ───────────────────────────────────────────
+function getCurrentLocation() {
+  return new Promise((resolve, reject) => {
+    if (!navigator.geolocation) { reject(new Error('Geolocation tidak didukung')); return; }
+    navigator.geolocation.getCurrentPosition(
+      pos => resolve({ lat: pos.coords.latitude, lng: pos.coords.longitude }),
+      err => reject(err),
+      { enableHighAccuracy: true, timeout: 8000 }
+    );
+  });
+}
+
+// ── NOTIFIKASI POLLING ────────────────────────────────────
+const NotifPoller = {
+  interval: null,
+  callbacks: [],
+
+  start(intervalMs = 30000) {
+    this.poll();
+    this.interval = setInterval(() => this.poll(), intervalMs);
+  },
+
+  stop() {
+    if (this.interval) clearInterval(this.interval);
+  },
+
+  async poll() {
+    try {
+      const d = await API.get('../api/notifikasi.php?unread=1');
+      this.callbacks.forEach(cb => cb(d));
+    } catch (e) { /* silent */ }
+  },
+
+  onChange(cb) { this.callbacks.push(cb); }
+};
+
+// ── STORAGE HELPER (sessionStorage) ──────────────────────
+const Store = {
+  set(key, val) { try { sessionStorage.setItem(key, JSON.stringify(val)); } catch(e){} },
+  get(key)      { try { return JSON.parse(sessionStorage.getItem(key)); } catch(e){ return null; } },
+  remove(key)   { sessionStorage.removeItem(key); },
+};
+
+// ── INIT ON DOM READY ─────────────────────────────────────
+document.addEventListener('DOMContentLoaded', () => {
+  // Close modals on overlay click
+  document.querySelectorAll('.modal-overlay').forEach(overlay => {
+    overlay.addEventListener('click', e => {
+      if (e.target === overlay) overlay.classList.add('hidden');
+    });
+  });
+
+  // Auto-focus first input in opened modals
+  document.querySelectorAll('.modal-overlay .modal-close').forEach(btn => {
+    btn.addEventListener('click', () => {
+      btn.closest('.modal-overlay')?.classList.add('hidden');
+    });
+  });
+});