813 lines
38 KiB
HTML
813 lines
38 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="id">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>WebGIS Kemiskinan — Kota Pontianak</title>
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🕌</text></svg>">
|
||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
|
||
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css"/>
|
||
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css"/>
|
||
<link rel="stylesheet" href="assets/css/style.css"/>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- HEADER -->
|
||
<header id="app-header">
|
||
<div class="header-left">
|
||
<button id="btn-toggle-sidebar" class="icon-btn" title="Toggle Sidebar">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
|
||
</button>
|
||
<div class="brand">
|
||
<div class="brand-logo">🕌</div>
|
||
<div>
|
||
<div class="brand-title">WebGIS Kemiskinan Pontianak</div>
|
||
<div class="brand-sub">Sistem Pengentasan Kemiskinan · Berbasis Rumah Ibadah</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="header-right">
|
||
<div class="stat-pills">
|
||
<span class="spill red" id="hp-miskin" title="Klik lihat data miskin" onclick="App.switchPanel('penduduk');setTimeout(()=>document.getElementById('pf-ekonomi').value='miskin'&&Penduduk.applyFilter(),300)">
|
||
<span class="spill-dot"></span><span id="hp-miskin-n">—</span> Miskin
|
||
</span>
|
||
<span class="spill yellow" id="hp-rentan"><span class="spill-dot"></span><span id="hp-rentan-n">—</span> Rentan</span>
|
||
<span class="spill green" id="hp-mampu"><span class="spill-dot"></span><span id="hp-mampu-n">—</span> Mampu</span>
|
||
<span class="spill blue" id="hp-lap" title="Laporan pending" onclick="App.switchPanel('laporan')">
|
||
<span class="spill-dot"></span><span id="hp-lap-n">—</span> Laporan
|
||
</span>
|
||
</div>
|
||
<div id="user-info" class="user-chip hidden" onclick="App.toggleUserMenu()">
|
||
<div class="user-avatar" id="user-avatar-el">👤</div>
|
||
<span class="user-name" id="user-name-el">—</span>
|
||
<span class="role-badge" id="user-role-el">—</span>
|
||
<button class="btn btn-danger btn-sm" style="margin-left:4px" onclick="event.stopPropagation();App.logout()">Keluar</button>
|
||
</div>
|
||
<button id="btn-login" class="btn btn-primary" onclick="App.showModal('modal-login')">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M15 3h6v18h-6M10 17l5-5-5-5M15 12H3"/></svg>
|
||
Masuk
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- LAYOUT -->
|
||
<div id="app-layout">
|
||
<!-- SIDEBAR -->
|
||
<aside id="sidebar">
|
||
<div class="sb-section">
|
||
<div class="sb-label">Menu Utama</div>
|
||
<button class="nav-btn active" data-panel="dashboard" onclick="App.switchPanel('dashboard')"><span class="nav-icon">📊</span>Dashboard</button>
|
||
<button class="nav-btn" data-panel="peta" onclick="App.switchPanel('peta')"><span class="nav-icon">🗺️</span>Peta Sebaran</button>
|
||
</div>
|
||
<div class="sb-section">
|
||
<div class="sb-label">Data</div>
|
||
<button class="nav-btn" data-panel="penduduk" onclick="App.switchPanel('penduduk')"><span class="nav-icon">👥</span>Penduduk</button>
|
||
<button class="nav-btn" data-panel="keluarga" onclick="App.switchPanel('keluarga')"><span class="nav-icon">🏠</span>Keluarga (KK)</button>
|
||
<button class="nav-btn" data-panel="ri" onclick="App.switchPanel('ri')"><span class="nav-icon">🕌</span>Rumah Ibadah</button>
|
||
</div>
|
||
<div class="sb-section">
|
||
<div class="sb-label">Bantuan Sosial</div>
|
||
<button class="nav-btn" data-panel="bantuan" onclick="App.switchPanel('bantuan')"><span class="nav-icon">🎁</span>Manaj. Bantuan</button>
|
||
<button class="nav-btn" data-panel="prioritas" onclick="App.switchPanel('prioritas')"><span class="nav-icon">🔥</span>Prioritas</button>
|
||
<button class="nav-btn" data-panel="laporan" onclick="App.switchPanel('laporan')"><span class="nav-icon">🚨</span>Laporan<span class="nav-badge hidden" id="nb-laporan">0</span></button>
|
||
</div>
|
||
<div class="sb-section">
|
||
<div class="sb-label">Sistem</div>
|
||
<button class="nav-btn" data-panel="chat" onclick="App.switchPanel('chat')"><span class="nav-icon">💬</span>Koordinasi</button>
|
||
<button class="nav-btn" data-panel="log" onclick="App.switchPanel('log')"><span class="nav-icon">📋</span>Log Aktivitas</button>
|
||
</div>
|
||
<div class="nav-divider"></div>
|
||
<button class="nav-btn nav-kirim" id="nav-kirim-laporan" onclick="LaporanPanel.showKirimModal()"><span class="nav-icon">📣</span>Kirim Laporan</button>
|
||
</aside>
|
||
|
||
<!-- MAIN -->
|
||
<main id="main-content">
|
||
|
||
<!-- ═══ DASHBOARD ═══ -->
|
||
<section id="panel-dashboard" class="panel active">
|
||
<div class="page-hdr">
|
||
<h2><span class="ph-icon">📊</span>Dashboard Kemiskinan Pontianak</h2>
|
||
<div class="page-actions">
|
||
<span id="dash-updated" style="font-size:11px;color:var(--muted)">—</span>
|
||
<button class="btn btn-secondary" onclick="Dashboard.load()">
|
||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
|
||
Refresh
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="stats-grid" id="dash-stats">
|
||
<div class="stat-card red" onclick="App.switchPanel('penduduk')">
|
||
<div class="stat-num" id="d-miskin">—</div>
|
||
<div class="stat-label">Penduduk Miskin</div>
|
||
<div class="stat-bg-icon">😔</div>
|
||
</div>
|
||
<div class="stat-card yellow">
|
||
<div class="stat-num" id="d-rentan">—</div>
|
||
<div class="stat-label">Rentan / Hampir Miskin</div>
|
||
<div class="stat-bg-icon">⚠️</div>
|
||
</div>
|
||
<div class="stat-card green">
|
||
<div class="stat-num" id="d-mampu">—</div>
|
||
<div class="stat-label">Penduduk Mampu</div>
|
||
<div class="stat-bg-icon">✅</div>
|
||
</div>
|
||
<div class="stat-card blue" onclick="App.switchPanel('keluarga')">
|
||
<div class="stat-num" id="d-kk">—</div>
|
||
<div class="stat-label">Kartu Keluarga</div>
|
||
<div class="stat-bg-icon">🏠</div>
|
||
</div>
|
||
<div class="stat-card orange" onclick="App.switchPanel('prioritas')">
|
||
<div class="stat-num" id="d-belum">—</div>
|
||
<div class="stat-label">Belum Pernah Dibantu</div>
|
||
<div class="stat-bg-icon">📦</div>
|
||
</div>
|
||
<div class="stat-card purple" onclick="App.switchPanel('laporan')">
|
||
<div class="stat-num" id="d-darurat">—</div>
|
||
<div class="stat-label">Laporan Aktif</div>
|
||
<div class="stat-bg-icon">🚨</div>
|
||
</div>
|
||
</div>
|
||
<div class="dash-grid scrollable">
|
||
<div class="card">
|
||
<div class="card-title">🔥 Prioritas Darurat <span style="font-size:11px;font-weight:400;color:var(--muted);margin-left:auto">klik untuk bantu</span></div>
|
||
<div class="prio-list" id="d-prio-list"><div class="empty-state"><div class="es-icon">⏳</div><p>Memuat data…</p></div></div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-title">🏘️ Sebaran per Kecamatan</div>
|
||
<div class="bar-list" id="d-kec-chart"></div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-title">🕌 Beban per Rumah Ibadah</div>
|
||
<div class="bar-list" id="d-ri-chart"></div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-title">📦 Tren Bantuan 6 Bulan</div>
|
||
<div class="bar-list" id="d-trend-chart"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══ PETA ═══ -->
|
||
<section id="panel-peta" class="panel panel-map">
|
||
<div class="map-toolbar">
|
||
<h2>🗺️ Peta Sebaran</h2>
|
||
<select class="map-filter-sel" id="map-status-filter" onchange="MapApp.applyFilter()">
|
||
<option value="">Semua Status</option>
|
||
<option value="miskin">Hanya Miskin</option>
|
||
<option value="rentan">Hanya Rentan</option>
|
||
<option value="mampu">Hanya Mampu</option>
|
||
</select>
|
||
<div class="layer-toggles">
|
||
<button class="layer-btn active-green" id="lb-penduduk" onclick="MapApp.toggleLayer('penduduk',this)">👥 Penduduk</button>
|
||
<button class="layer-btn active-blue" id="lb-ri" onclick="MapApp.toggleLayer('ri',this)">🕌 Rumah Ibadah</button>
|
||
<button class="layer-btn" id="lb-laporan" onclick="MapApp.toggleLayer('laporan',this)">🚨 Laporan</button>
|
||
<button class="layer-btn active-purple" id="lb-radius" onclick="MapApp.toggleLayer('radius',this)">⭕ Radius</button>
|
||
</div>
|
||
<div class="legend">
|
||
<span class="legend-item"><span class="legend-dot" style="background:var(--red)"></span>Miskin</span>
|
||
<span class="legend-item"><span class="legend-dot" style="background:var(--yellow)"></span>Rentan</span>
|
||
<span class="legend-item"><span class="legend-dot" style="background:var(--green)"></span>Mampu</span>
|
||
<span class="legend-item"><span class="legend-dot" style="background:var(--purple)"></span>Laporan</span>
|
||
</div>
|
||
</div>
|
||
<div id="map"></div>
|
||
</section>
|
||
|
||
<!-- ═══ PENDUDUK ═══ -->
|
||
<section id="panel-penduduk" class="panel">
|
||
<div class="page-hdr">
|
||
<h2><span class="ph-icon">👥</span>Data Penduduk</h2>
|
||
<div class="page-actions">
|
||
<button class="btn btn-primary" id="btn-tambah-penduduk" onclick="Penduduk.showForm()">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||
Tambah Penduduk
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="filter-bar">
|
||
<div class="search-wrap">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
||
<input class="search-input" type="search" id="pf-search" placeholder="Cari nama atau NIK…" oninput="Penduduk.search(this.value)">
|
||
</div>
|
||
<select class="filter-sel" id="pf-ekonomi" onchange="Penduduk.applyFilter()">
|
||
<option value="">Semua Status Ekonomi</option>
|
||
<option value="miskin">🔴 Miskin</option>
|
||
<option value="rentan">🟡 Rentan</option>
|
||
<option value="mampu">🟢 Mampu</option>
|
||
</select>
|
||
<select class="filter-sel" id="pf-kesehatan" onchange="Penduduk.applyFilter()">
|
||
<option value="">Semua Kondisi</option>
|
||
<option value="sehat">Sehat</option>
|
||
<option value="sakit_ringan">Sakit Ringan</option>
|
||
<option value="sakit_berat">Sakit Berat</option>
|
||
<option value="disabilitas">Disabilitas</option>
|
||
</select>
|
||
<span id="pf-count" style="font-size:11px;color:var(--muted);white-space:nowrap"></span>
|
||
</div>
|
||
<div class="table-wrap">
|
||
<table class="data-tbl">
|
||
<thead><tr>
|
||
<th>NIK</th><th>Nama Lengkap</th><th>Umur</th>
|
||
<th>Status KK</th><th>Pekerjaan</th><th>Penghasilan</th>
|
||
<th>Ekonomi</th><th>Kesehatan</th><th>Pendidikan</th><th>Aksi</th>
|
||
</tr></thead>
|
||
<tbody id="tbody-penduduk"><tr><td colspan="10" style="text-align:center;padding:32px;color:var(--muted)">Memuat data…</td></tr></tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══ KELUARGA ═══ -->
|
||
<section id="panel-keluarga" class="panel">
|
||
<div class="page-hdr">
|
||
<h2><span class="ph-icon">🏠</span>Data Keluarga (KK)</h2>
|
||
<div class="page-actions">
|
||
<button class="btn btn-primary" id="btn-tambah-kk" onclick="Keluarga.showForm()">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||
Tambah KK
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="filter-bar">
|
||
<div class="search-wrap">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
||
<input class="search-input" type="search" id="kf-search" placeholder="Cari nama kepala / No. KK…" oninput="Keluarga.search(this.value)">
|
||
</div>
|
||
<select class="filter-sel" id="kf-ekonomi" onchange="Keluarga.applyFilter()">
|
||
<option value="">Semua Status</option>
|
||
<option value="miskin">🔴 Miskin</option>
|
||
<option value="rentan">🟡 Rentan</option>
|
||
<option value="mampu">🟢 Mampu</option>
|
||
</select>
|
||
</div>
|
||
<div class="table-wrap">
|
||
<table class="data-tbl">
|
||
<thead><tr>
|
||
<th>No. KK</th><th>Kepala Keluarga</th><th>Kecamatan</th>
|
||
<th>Anggota</th><th>Total Penghasilan</th><th>Rumah Ibadah</th>
|
||
<th>Status</th><th>Bantuan</th><th>Aksi</th>
|
||
</tr></thead>
|
||
<tbody id="tbody-keluarga"><tr><td colspan="9" style="text-align:center;padding:32px;color:var(--muted)">Memuat data…</td></tr></tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══ BANTUAN ═══ -->
|
||
<section id="panel-bantuan" class="panel">
|
||
<div class="page-hdr">
|
||
<h2><span class="ph-icon">🎁</span>Manajemen Bantuan</h2>
|
||
<div class="page-actions">
|
||
<button class="btn btn-secondary" id="btn-tambah-bantuan" onclick="Bantuan.showFormJenis()">+ Jenis Baru</button>
|
||
<button class="btn btn-primary" id="btn-salur-bantuan" onclick="Bantuan.showFormSalur()">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||
Salurkan Bantuan
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="two-col scrollable">
|
||
<div class="card">
|
||
<div class="card-title">📋 Jenis Bantuan Tersedia</div>
|
||
<div id="bantuan-jenis-list"></div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-title">📜 Riwayat Penyaluran Terbaru</div>
|
||
<div id="bantuan-histori-list"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══ LAPORAN ═══ -->
|
||
<section id="panel-laporan" class="panel">
|
||
<div class="page-hdr">
|
||
<h2><span class="ph-icon">🚨</span>Laporan Masyarakat</h2>
|
||
<div class="page-actions">
|
||
<select class="filter-sel" id="lf-status" onchange="LaporanPanel.load()">
|
||
<option value="">Semua Status</option>
|
||
<option value="pending">Pending</option>
|
||
<option value="diverifikasi">Diverifikasi</option>
|
||
<option value="diproses">Diproses</option>
|
||
<option value="selesai">Selesai</option>
|
||
</select>
|
||
<select class="filter-sel" id="lf-urgensi" onchange="LaporanPanel.load()">
|
||
<option value="">Semua Urgensi</option>
|
||
<option value="darurat">🔴 Darurat</option>
|
||
<option value="tinggi">🟠 Tinggi</option>
|
||
<option value="sedang">🟡 Sedang</option>
|
||
<option value="rendah">🟢 Rendah</option>
|
||
</select>
|
||
<button class="btn btn-primary" onclick="LaporanPanel.showKirimModal()">📣 Kirim Laporan</button>
|
||
</div>
|
||
</div>
|
||
<div class="laporan-grid scrollable" id="laporan-grid"></div>
|
||
</section>
|
||
|
||
<!-- ═══ RUMAH IBADAH ═══ -->
|
||
<section id="panel-ri" class="panel">
|
||
<div class="page-hdr">
|
||
<h2><span class="ph-icon">🕌</span>Rumah Ibadah</h2>
|
||
<div class="page-actions">
|
||
<button class="btn btn-primary" id="btn-tambah-ri" onclick="RI.showForm()">+ Tambah</button>
|
||
</div>
|
||
</div>
|
||
<div class="ri-grid scrollable" id="ri-grid"></div>
|
||
</section>
|
||
|
||
<!-- ═══ PRIORITAS ═══ -->
|
||
<section id="panel-prioritas" class="panel">
|
||
<div class="page-hdr">
|
||
<h2><span class="ph-icon">🔥</span>Daftar Prioritas Bantuan</h2>
|
||
<div class="page-actions">
|
||
<button class="btn btn-secondary" onclick="PrioritasPanel.load()">⟳ Refresh</button>
|
||
<button class="btn btn-success" onclick="PrioritasPanel.exportCSV()">⬇ Export CSV</button>
|
||
</div>
|
||
</div>
|
||
<p style="font-size:12px;color:var(--muted);margin-bottom:14px;flex-shrink:0">
|
||
Urutan: <strong style="color:var(--red)">SANGAT TINGGI</strong> (miskin+sakit) →
|
||
<strong style="color:var(--orange)">TINGGI</strong> (miskin+belum dibantu) →
|
||
<strong style="color:var(--yellow)">SEDANG</strong> → <strong style="color:var(--green)">RENDAH</strong>
|
||
</p>
|
||
<div class="table-wrap">
|
||
<table class="data-tbl">
|
||
<thead><tr><th>NIK</th><th>Nama</th><th>Umur</th><th>Ekonomi</th><th>Kesehatan</th><th>Kecamatan</th><th>Rumah Ibadah</th><th>Dibantu</th><th>Prioritas</th><th>Aksi</th></tr></thead>
|
||
<tbody id="tbody-prioritas"></tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══ CHAT ═══ -->
|
||
<section id="panel-chat" class="panel">
|
||
<div class="page-hdr"><h2><span class="ph-icon">💬</span>Koordinasi Pengurus</h2></div>
|
||
<div class="chat-rooms" id="chat-rooms">
|
||
<button class="room-btn active" data-room="" onclick="Chat.loadRoom('',this)"># Umum</button>
|
||
</div>
|
||
<div class="chat-messages" id="chat-messages"><div class="chat-empty">⏳ Memuat pesan…</div></div>
|
||
<div class="chat-input-row">
|
||
<input class="form-input" type="text" id="chat-input" placeholder="Ketik pesan koordinasi… (Enter untuk kirim)" onkeydown="if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();Chat.send()}">
|
||
<button class="btn btn-primary" onclick="Chat.send()">Kirim ➤</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══ LOG ═══ -->
|
||
<section id="panel-log" class="panel">
|
||
<div class="page-hdr">
|
||
<h2><span class="ph-icon">📋</span>Log Aktivitas Sistem</h2>
|
||
<button class="btn btn-secondary" onclick="LogPanel.load()">⟳ Refresh</button>
|
||
</div>
|
||
<div class="table-wrap">
|
||
<table class="data-tbl">
|
||
<thead><tr><th>Waktu</th><th>User</th><th>Aksi</th><th>Tabel</th><th>ID Record</th><th>IP</th></tr></thead>
|
||
<tbody id="tbody-log"></tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
</div>
|
||
|
||
<!-- ══════════════════════ MODALS ══════════════════════ -->
|
||
|
||
<!-- LOGIN -->
|
||
<div id="modal-login" class="modal-overlay hidden">
|
||
<div class="modal" style="max-width:420px">
|
||
<div class="modal-hdr">
|
||
<h3>🔐 Masuk ke Sistem</h3>
|
||
<button class="btn-close-modal" onclick="App.closeModal('modal-login')">✕</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="info-box" style="margin-bottom:16px">
|
||
<b>Akun Demo:</b><br>
|
||
<span style="font-family:'JetBrains Mono',monospace;font-size:11px">
|
||
admin / admin123 → Administrator<br>
|
||
pengurus_jami / admin123 → Pengurus RI<br>
|
||
pimpinan / admin123 → Pimpinan (read-only)<br>
|
||
warga1 / admin123 → Masyarakat
|
||
</span>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Username</label>
|
||
<input class="form-input" type="text" id="login-user" placeholder="admin" onkeydown="if(event.key==='Enter')document.getElementById('login-pass').focus()">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Password</label>
|
||
<input class="form-input" type="password" id="login-pass" placeholder="••••••••" onkeydown="if(event.key==='Enter')App.doLogin()">
|
||
</div>
|
||
<div id="login-err" class="alert-err hidden"></div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" onclick="App.closeModal('modal-login')">Batal</button>
|
||
<button id="btn-masuk-submit" class="btn btn-primary" onclick="App.doLogin()">Masuk →</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- PENDUDUK FORM -->
|
||
<div id="modal-penduduk" class="modal-overlay hidden">
|
||
<div class="modal modal-lg">
|
||
<div class="modal-hdr">
|
||
<h3 id="mp-title">➕ Tambah Penduduk</h3>
|
||
<button class="btn-close-modal" onclick="App.closeModal('modal-penduduk')">✕</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="form-grid">
|
||
<div class="form-section-title">Identitas</div>
|
||
<div class="form-group">
|
||
<label class="form-label">NIK (16 digit) *</label>
|
||
<input class="form-input" type="text" id="fp-nik" maxlength="16" placeholder="6171…">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Kartu Keluarga *</label>
|
||
<select class="form-select" id="fp-kk"></select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Nama Lengkap *</label>
|
||
<input class="form-input" type="text" id="fp-nama" placeholder="Nama sesuai KTP">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Jenis Kelamin</label>
|
||
<select class="form-select" id="fp-jkel">
|
||
<option value="L">Laki-laki</option>
|
||
<option value="P">Perempuan</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Tanggal Lahir *</label>
|
||
<input class="form-input" type="date" id="fp-tgl" onchange="Penduduk.hitungUmur()">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Umur (otomatis)</label>
|
||
<input class="form-input readonly" type="text" id="fp-umur" readonly placeholder="Isi tanggal lahir dulu">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Tempat Lahir</label>
|
||
<input class="form-input" type="text" id="fp-tempat" placeholder="Kota kelahiran">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Agama</label>
|
||
<select class="form-select" id="fp-agama">
|
||
<option>Islam</option><option>Kristen</option><option>Katolik</option>
|
||
<option>Hindu</option><option>Buddha</option><option>Konghucu</option><option>Lainnya</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-divider"></div>
|
||
<div class="form-section-title">Status & Pekerjaan</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Status dalam KK</label>
|
||
<select class="form-select" id="fp-status-kk">
|
||
<option value="kepala">Kepala Keluarga</option>
|
||
<option value="istri">Istri/Suami</option>
|
||
<option value="anak">Anak</option>
|
||
<option value="menantu">Menantu</option>
|
||
<option value="cucu">Cucu</option>
|
||
<option value="orang_tua">Orang Tua</option>
|
||
<option value="lainnya">Lainnya</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Status Perkawinan</label>
|
||
<select class="form-select" id="fp-kawin">
|
||
<option value="belum_kawin">Belum Kawin</option>
|
||
<option value="kawin">Kawin</option>
|
||
<option value="cerai_hidup">Cerai Hidup</option>
|
||
<option value="cerai_mati">Cerai Mati</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Status Hidup</label>
|
||
<select class="form-select" id="fp-hidup">
|
||
<option value="hidup">Hidup</option>
|
||
<option value="meninggal">Meninggal</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Status Ekonomi</label>
|
||
<select class="form-select" id="fp-ekonomi">
|
||
<option value="miskin">🔴 Miskin</option>
|
||
<option value="rentan">🟡 Rentan</option>
|
||
<option value="mampu">🟢 Mampu</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Pekerjaan</label>
|
||
<input class="form-input" type="text" id="fp-pekerjaan" placeholder="Buruh, Pedagang, dll">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Penghasilan/Bulan (Rp)</label>
|
||
<input class="form-input" type="number" id="fp-penghasilan" min="0" placeholder="0">
|
||
</div>
|
||
<div class="form-divider"></div>
|
||
<div class="form-section-title">Pendidikan & Kesehatan</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Pendidikan Terakhir</label>
|
||
<select class="form-select" id="fp-pendidikan">
|
||
<option value="tidak_sekolah">Tidak Sekolah</option>
|
||
<option value="SD">SD/Sederajat</option>
|
||
<option value="SMP">SMP/Sederajat</option>
|
||
<option value="SMA_SMK">SMA/SMK/Sederajat</option>
|
||
<option value="D1_D3">D1/D2/D3</option>
|
||
<option value="S1">S1/D4</option>
|
||
<option value="S2_S3">S2/S3</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Status Pendidikan</label>
|
||
<select class="form-select" id="fp-stat-pend">
|
||
<option value="sekolah">Masih Sekolah</option>
|
||
<option value="lulus">Lulus</option>
|
||
<option value="tidak_sekolah">Tidak Sekolah</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Kondisi Kesehatan</label>
|
||
<select class="form-select" id="fp-kesehatan">
|
||
<option value="sehat">✅ Sehat</option>
|
||
<option value="sakit_ringan">🟡 Sakit Ringan</option>
|
||
<option value="sakit_berat">🔴 Sakit Berat</option>
|
||
<option value="disabilitas">🟣 Disabilitas</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Keterangan Kesehatan</label>
|
||
<input class="form-input" type="text" id="fp-ket-sehat" placeholder="Jika ada catatan khusus">
|
||
</div>
|
||
<div class="alert-warn hidden" id="fp-warn"></div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" onclick="App.closeModal('modal-penduduk')">Batal</button>
|
||
<button class="btn btn-primary" onclick="Penduduk.save()">💾 Simpan Data</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- KELUARGA FORM -->
|
||
<div id="modal-keluarga" class="modal-overlay hidden">
|
||
<div class="modal">
|
||
<div class="modal-hdr">
|
||
<h3 id="mk-title">🏠 Tambah Kartu Keluarga</h3>
|
||
<button class="btn-close-modal" onclick="App.closeModal('modal-keluarga')">✕</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="form-group">
|
||
<label class="form-label">Nomor KK (16 digit) *</label>
|
||
<input class="form-input" type="text" id="fk-nokk" maxlength="16" placeholder="6171…">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Nama Kepala Keluarga *</label>
|
||
<input class="form-input" type="text" id="fk-kepala">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Rumah Ibadah Terdekat</label>
|
||
<select class="form-select" id="fk-ri"><option value="">— Pilih Rumah Ibadah —</option></select>
|
||
</div>
|
||
<div class="form-grid">
|
||
<div class="form-group">
|
||
<label class="form-label">Alamat</label>
|
||
<input class="form-input" type="text" id="fk-alamat">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Kecamatan</label>
|
||
<input class="form-input" type="text" id="fk-kecamatan">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Kelurahan</label>
|
||
<input class="form-input" type="text" id="fk-kelurahan">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Status Ekonomi KK</label>
|
||
<select class="form-select" id="fk-ekonomi">
|
||
<option value="miskin">🔴 Miskin</option>
|
||
<option value="rentan" selected>🟡 Rentan</option>
|
||
<option value="mampu">🟢 Mampu</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Latitude</label>
|
||
<input class="form-input" type="number" id="fk-lat" step="any" placeholder="-0.028">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Longitude</label>
|
||
<input class="form-input" type="number" id="fk-lng" step="any" placeholder="109.338">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" onclick="App.closeModal('modal-keluarga')">Batal</button>
|
||
<button class="btn btn-primary" onclick="Keluarga.save()">💾 Simpan</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SALUR BANTUAN -->
|
||
<div id="modal-salur" class="modal-overlay hidden">
|
||
<div class="modal">
|
||
<div class="modal-hdr">
|
||
<h3>📦 Salurkan Bantuan</h3>
|
||
<button class="btn-close-modal" onclick="App.closeModal('modal-salur')">✕</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="form-group">
|
||
<label class="form-label">NIK Penerima *</label>
|
||
<input class="form-input" type="text" id="fs-nik" maxlength="16" placeholder="16 digit NIK" oninput="Bantuan.cekPenerima(this.value)">
|
||
<div id="fs-nik-info" class="alert-ok hidden" style="margin-top:6px"></div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Jenis Bantuan *</label>
|
||
<select class="form-select" id="fs-bantuan"></select>
|
||
</div>
|
||
<div class="form-grid">
|
||
<div class="form-group">
|
||
<label class="form-label">Tanggal Penyaluran *</label>
|
||
<input class="form-input" type="date" id="fs-tgl">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Jumlah</label>
|
||
<input class="form-input" type="number" id="fs-jumlah" value="1" min="0.1" step="0.1">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Keterangan</label>
|
||
<input class="form-input" type="text" id="fs-ket" placeholder="Catatan tambahan (opsional)">
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" onclick="App.closeModal('modal-salur')">Batal</button>
|
||
<button class="btn btn-primary" onclick="Bantuan.salurkan()">✅ Catat Penyaluran</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- TAMBAH JENIS BANTUAN -->
|
||
<div id="modal-jenis-bantuan" class="modal-overlay hidden">
|
||
<div class="modal">
|
||
<div class="modal-hdr">
|
||
<h3>🎁 Tambah Jenis Bantuan</h3>
|
||
<button class="btn-close-modal" onclick="App.closeModal('modal-jenis-bantuan')">✕</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="form-group">
|
||
<label class="form-label">Nama Bantuan *</label>
|
||
<input class="form-input" type="text" id="fjb-nama" placeholder="Sembako Ramadan, Beasiswa, dll">
|
||
</div>
|
||
<div class="form-grid">
|
||
<div class="form-group">
|
||
<label class="form-label">Kategori *</label>
|
||
<select class="form-select" id="fjb-kategori">
|
||
<option value="sembako">Sembako</option>
|
||
<option value="pendidikan">Pendidikan</option>
|
||
<option value="kesehatan">Kesehatan</option>
|
||
<option value="ekonomi">Ekonomi</option>
|
||
<option value="lainnya">Lainnya</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Satuan</label>
|
||
<input class="form-input" type="text" id="fjb-satuan" placeholder="paket, kg, Rp, bulan">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Sumber Dana</label>
|
||
<input class="form-input" type="text" id="fjb-sumber" placeholder="Zakat, APBD, CSR, Donasi">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Deskripsi</label>
|
||
<textarea class="form-textarea" id="fjb-deskripsi" rows="3" placeholder="Keterangan singkat tentang bantuan ini"></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" onclick="App.closeModal('modal-jenis-bantuan')">Batal</button>
|
||
<button class="btn btn-primary" onclick="Bantuan.saveJenis()">💾 Simpan</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- LAPORAN KIRIM -->
|
||
<div id="modal-laporan" class="modal-overlay hidden">
|
||
<div class="modal">
|
||
<div class="modal-hdr">
|
||
<h3>📣 Kirim Laporan Kondisi Darurat</h3>
|
||
<button class="btn-close-modal" onclick="App.closeModal('modal-laporan')">✕</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="info-box" style="margin-bottom:14px">Anda bisa melapor secara anonim. Laporan akan segera ditindaklanjuti oleh pengurus rumah ibadah terdekat.</div>
|
||
<div class="form-grid">
|
||
<div class="form-group">
|
||
<label class="form-label">Nama Pelapor (opsional)</label>
|
||
<input class="form-input" type="text" id="fl-nama" placeholder="Biarkan kosong jika anonim">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">No. HP (opsional)</label>
|
||
<input class="form-input" type="text" id="fl-hp" placeholder="Untuk follow-up">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">NIK Warga Terdampak (opsional)</label>
|
||
<input class="form-input" type="text" id="fl-nik" maxlength="16" placeholder="Kosongkan jika tidak tahu">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Tingkat Urgensi *</label>
|
||
<select class="form-select" id="fl-urgensi">
|
||
<option value="rendah">🟢 Rendah — Perlu perhatian</option>
|
||
<option value="sedang" selected>🟡 Sedang — Perlu bantuan segera</option>
|
||
<option value="tinggi">🟠 Tinggi — Kondisi mendesak</option>
|
||
<option value="darurat">🔴 DARURAT — Butuh bantuan segera!</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Alamat / Lokasi</label>
|
||
<input class="form-input" type="text" id="fl-alamat" placeholder="Nama jalan, gang, kelurahan">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Deskripsi Kondisi *</label>
|
||
<textarea class="form-textarea" id="fl-deskripsi" rows="4" placeholder="Jelaskan kondisi warga yang membutuhkan bantuan…"></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" onclick="App.closeModal('modal-laporan')">Batal</button>
|
||
<button class="btn btn-primary" onclick="LaporanPanel.kirim()">📤 Kirim Laporan</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- DETAIL PENDUDUK (SLIDE PANEL) -->
|
||
<div id="detail-panel" class="detail-panel">
|
||
<div class="dp-hdr">
|
||
<span id="dp-title" style="font-weight:800;font-size:14px">Detail Penduduk</span>
|
||
<button class="btn-close-modal" onclick="Penduduk.closeDetail()">✕</button>
|
||
</div>
|
||
<div class="dp-body" id="dp-body"></div>
|
||
</div>
|
||
|
||
<!-- RI FORM -->
|
||
<div id="modal-ri" class="modal-overlay hidden">
|
||
<div class="modal">
|
||
<div class="modal-hdr">
|
||
<h3 id="mri-title">🕌 Tambah Rumah Ibadah</h3>
|
||
<button class="btn-close-modal" onclick="App.closeModal('modal-ri')">✕</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="form-group">
|
||
<label class="form-label">Nama Rumah Ibadah *</label>
|
||
<input class="form-input" type="text" id="fri-nama" placeholder="Masjid Al-Ikhlas, Gereja Santa Maria, dll">
|
||
</div>
|
||
<div class="form-grid">
|
||
<div class="form-group">
|
||
<label class="form-label">Jenis *</label>
|
||
<select class="form-select" id="fri-jenis">
|
||
<option>Masjid</option><option>Gereja</option><option>Vihara</option>
|
||
<option>Pura</option><option>Klenteng</option><option>Lainnya</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Radius Wilayah (meter)</label>
|
||
<input class="form-input" type="number" id="fri-radius" value="300" min="100" max="2000">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Latitude *</label>
|
||
<input class="form-input" type="number" id="fri-lat" step="any" placeholder="-0.028">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Longitude *</label>
|
||
<input class="form-input" type="number" id="fri-lng" step="any" placeholder="109.338">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Kecamatan</label>
|
||
<input class="form-input" type="text" id="fri-kec">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Kontak</label>
|
||
<input class="form-input" type="text" id="fri-kontak" placeholder="No. telepon">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Alamat</label>
|
||
<input class="form-input" type="text" id="fri-alamat">
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" onclick="App.closeModal('modal-ri')">Batal</button>
|
||
<button class="btn btn-primary" onclick="RI.save()">💾 Simpan</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- TOAST CONTAINER -->
|
||
<div id="toast-container"></div>
|
||
|
||
<!-- SCRIPTS -->
|
||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||
<script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
|
||
<script src="assets/js/api.js"></script>
|
||
<script src="assets/js/map.js"></script>
|
||
<script src="assets/js/dashboard.js"></script>
|
||
<script src="assets/js/penduduk.js"></script>
|
||
<script src="assets/js/keluarga.js"></script>
|
||
<script src="assets/js/bantuan.js"></script>
|
||
<script src="assets/js/laporan.js"></script>
|
||
<script src="assets/js/ri.js"></script>
|
||
<script src="assets/js/prioritas.js"></script>
|
||
<script src="assets/js/chat.js"></script>
|
||
<script src="assets/js/log.js"></script>
|
||
<script src="assets/js/app.js"></script>
|
||
</body>
|
||
</html>
|