dena27
1226 lines
58 KiB
HTML
1226 lines
58 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 Bansos — Pemetaan Rumah Ibadah & Rumah Warga</title>
|
||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link rel="stylesheet" href="assets/css/style.css?v=2">
|
||
<link rel="stylesheet" href="assets/css/fitur_baru.css?v=2">
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div id="app">
|
||
|
||
<!-- ══════════════ SIDEBAR ══════════════ -->
|
||
<aside id="sidebar">
|
||
|
||
<div class="sidebar-header">
|
||
<div class="logo">
|
||
<div class="logo-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"
|
||
stroke-linejoin="round">
|
||
<path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z" />
|
||
<circle cx="12" cy="10" r="3" />
|
||
</svg>
|
||
</div>
|
||
<div class="logo-text">WebGIS Bansos</div>
|
||
</div>
|
||
<div class="logo-sub">Pemetaan Bantuan Sosial Berbasis Rumah Ibadah</div>
|
||
</div>
|
||
|
||
<!-- User Status & Profile Panel -->
|
||
<div class="user-profile-panel" id="user-profile-panel">
|
||
<div class="user-avatar-wrap">
|
||
<div class="user-avatar avatar-guest" id="user-avatar">G</div>
|
||
</div>
|
||
<div class="user-info">
|
||
<div class="user-name" id="user-display-name">Guest Mode</div>
|
||
<div class="user-role-badge badge-guest" id="user-display-role">Pengunjung</div>
|
||
</div>
|
||
<button class="btn-auth-action" id="btn-auth-toggle">Login</button>
|
||
</div>
|
||
|
||
<!-- Tabs -->
|
||
<div class="sidebar-tabs">
|
||
<button class="tab-btn" data-tab="overview" style="display:none">
|
||
<svg viewBox="0 0 24 24">
|
||
<rect x="3" y="3" width="7" height="7" />
|
||
<rect x="14" y="3" width="7" height="7" />
|
||
<rect x="14" y="14" width="7" height="7" />
|
||
<rect x="3" y="14" width="7" height="7" />
|
||
</svg>
|
||
Overview
|
||
</button>
|
||
<button class="tab-btn active" data-tab="ibadah" id="tab-btn-ibadah">
|
||
<svg viewBox="0 0 24 24">
|
||
<path d="M3 22V11l9-9 9 9v11" />
|
||
<path d="M9 22V12h6v10" />
|
||
</svg>
|
||
Ibadah
|
||
</button>
|
||
<button class="tab-btn" data-tab="warga" id="tab-btn-warga" style="display:none">
|
||
<svg viewBox="0 0 24 24">
|
||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
||
<polyline points="9 22 9 12 15 12 15 22" />
|
||
</svg>
|
||
Warga
|
||
</button>
|
||
<button class="tab-btn" data-tab="kebutuhan" id="tab-btn-kebutuhan">
|
||
<svg viewBox="0 0 24 24">
|
||
<path
|
||
d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
|
||
</svg>
|
||
Bantuan
|
||
</button>
|
||
<button class="tab-btn" data-tab="laporan" id="tab-btn-laporan" style="display:none">
|
||
<svg viewBox="0 0 24 24">
|
||
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
|
||
<line x1="12" y1="9" x2="12" y2="13" />
|
||
<line x1="12" y1="17" x2="12.01" y2="17" />
|
||
</svg>
|
||
Laporan
|
||
</button>
|
||
</div>
|
||
|
||
<div class="sidebar-content">
|
||
|
||
<!-- ─── TAB: OVERVIEW ─── -->
|
||
<div class="tab-panel" id="tab-overview">
|
||
|
||
<!-- Stats utama -->
|
||
<div class="stats-grid">
|
||
<div class="stat-card">
|
||
<div class="stat-number" id="stat-ibadah">–</div>
|
||
<div class="stat-label">Rumah Ibadah</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-number" id="stat-warga">–</div>
|
||
<div class="stat-label">Rumah Warga</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-number" id="stat-jiwa">–</div>
|
||
<div class="stat-label">Total Jiwa</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-number" id="stat-bansos">–</div>
|
||
<div class="stat-label">Terima Bansos</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Stats rekomendasi -->
|
||
<div class="section-title">
|
||
<svg viewBox="0 0 24 24">
|
||
<polyline points="20 12 20 22 4 22 4 12" />
|
||
<rect x="2" y="7" width="20" height="5" />
|
||
<path d="M12 22V7" />
|
||
<path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z" />
|
||
<path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z" />
|
||
</svg>
|
||
Rekomendasi Bantuan
|
||
</div>
|
||
<div class="stats-grid">
|
||
<div class="stat-card stat-card--rutin">
|
||
<div class="stat-number" id="stat-rutin">–</div>
|
||
<div class="stat-label">Butuh Rutin</div>
|
||
</div>
|
||
<div class="stat-card stat-card--pelatihan">
|
||
<div class="stat-number" id="stat-pelatihan">–</div>
|
||
<div class="stat-label">Butuh Pelatihan</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Stat penghasilan & anggota -->
|
||
<div class="section-title">
|
||
<svg viewBox="0 0 24 24">
|
||
<line x1="12" y1="1" x2="12" y2="23" />
|
||
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
|
||
</svg>
|
||
Ekonomi & Kependudukan
|
||
</div>
|
||
<div class="ekon-grid">
|
||
<div class="ekon-card">
|
||
<div class="ekon-label">Rata-rata Penghasilan</div>
|
||
<div class="ekon-value" id="stat-avg-penghasilan">–</div>
|
||
</div>
|
||
<div class="ekon-card">
|
||
<div class="ekon-label">Anggota Terdaftar</div>
|
||
<div class="ekon-value" id="stat-anggota-db">–</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Radius Control -->
|
||
<div class="section-title">
|
||
<svg viewBox="0 0 24 24">
|
||
<circle cx="12" cy="12" r="10" />
|
||
<circle cx="12" cy="12" r="6" />
|
||
<circle cx="12" cy="12" r="2" />
|
||
</svg>
|
||
Kontrol Radius
|
||
</div>
|
||
<div class="radius-control">
|
||
<div class="radius-label">
|
||
<span>Radius dari Rumah Ibadah</span>
|
||
<span class="radius-value" id="radius-display">500 m</span>
|
||
</div>
|
||
<input type="range" class="radius-slider" id="radius-slider" min="50" max="5000" value="500">
|
||
<div style="display:flex;gap:8px;align-items:center;margin-bottom:8px">
|
||
<input type="number" id="radius-input" value="500" min="50" max="5000" class="form-control"
|
||
style="width:76px;padding:6px 8px;font-size:12px;text-align:center">
|
||
<span style="font-size:11px;color:var(--text-muted)">meter</span>
|
||
</div>
|
||
<div class="radius-presets">
|
||
<button class="preset-btn" data-r="200">200m</button>
|
||
<button class="preset-btn" data-r="300">300m</button>
|
||
<button class="preset-btn active" data-r="500">500m</button>
|
||
<button class="preset-btn" data-r="1000">1km</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Legend -->
|
||
<div class="section-title" id="section-legenda">
|
||
<svg viewBox="0 0 24 24">
|
||
<line x1="8" y1="6" x2="21" y2="6" />
|
||
<line x1="8" y1="12" x2="21" y2="12" />
|
||
<line x1="8" y1="18" x2="21" y2="18" />
|
||
<line x1="3" y1="6" x2="3.01" y2="6" />
|
||
<line x1="3" y1="12" x2="3.01" y2="12" />
|
||
<line x1="3" y1="18" x2="3.01" y2="18" />
|
||
</svg>
|
||
Legenda
|
||
</div>
|
||
|
||
<div style="margin-bottom:10px">
|
||
<div class="legend-group-label">Rumah Ibadah</div>
|
||
<div class="legend-item">
|
||
<div class="legend-icon">
|
||
<svg viewBox="0 0 24 24" stroke-width="1.8">
|
||
<path d="M4 22V11c0-3.31 3.58-6 8-6s8 2.69 8 6v11" />
|
||
<path d="M2 22h20" />
|
||
<path d="M12 5V3" />
|
||
<path d="M8 22v-4a4 4 0 0 1 8 0v4" />
|
||
</svg>
|
||
</div>
|
||
<span>Masjid</span>
|
||
</div>
|
||
<div class="legend-item">
|
||
<div class="legend-icon">
|
||
<svg viewBox="0 0 24 24" stroke-width="1.8">
|
||
<path d="M18 22V11l-6-6-6 6v11" />
|
||
<path d="M2 22h20" />
|
||
<line x1="12" y1="5" x2="12" y2="2" />
|
||
<line x1="10" y1="3.5" x2="14" y2="3.5" />
|
||
</svg>
|
||
</div>
|
||
<span>Gereja</span>
|
||
</div>
|
||
<div class="legend-item">
|
||
<div class="legend-icon">
|
||
<svg viewBox="0 0 24 24" stroke-width="1.8">
|
||
<path d="M3 22h18" />
|
||
<path d="M6 18V9l6-6 6 6v9" />
|
||
<path d="M4 14h16" />
|
||
<path d="M4 18h16" />
|
||
</svg>
|
||
</div>
|
||
<span>Klenteng</span>
|
||
</div>
|
||
<div class="legend-item">
|
||
<div class="legend-icon">
|
||
<svg viewBox="0 0 24 24" stroke-width="1.8">
|
||
<polygon
|
||
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
|
||
</svg>
|
||
</div>
|
||
<span>Pura</span>
|
||
</div>
|
||
<div class="legend-item">
|
||
<div class="legend-icon">
|
||
<svg viewBox="0 0 24 24" stroke-width="1.8">
|
||
<circle cx="12" cy="12" r="10" />
|
||
<circle cx="12" cy="12" r="3" />
|
||
<line x1="12" y1="2" x2="12" y2="9" />
|
||
<line x1="12" y1="15" x2="12" y2="22" />
|
||
<line x1="2" y1="12" x2="9" y2="12" />
|
||
<line x1="15" y1="12" x2="22" y2="12" />
|
||
<line x1="4.93" y1="4.93" x2="9.17" y2="9.17" />
|
||
<line x1="14.83" y1="14.83" x2="19.07" y2="19.07" />
|
||
<line x1="19.07" y1="4.93" x2="14.83" y2="9.17" />
|
||
<line x1="9.17" y1="14.83" x2="4.93" y2="19.07" />
|
||
</svg>
|
||
</div>
|
||
<span>Vihara</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin-bottom:10px">
|
||
<div class="legend-group-label">Kategori Penerima Bantuan</div>
|
||
<div class="legend-item">
|
||
<div class="legend-dot" style="background:#f87171"></div>
|
||
<span>Sangat Miskin</span>
|
||
</div>
|
||
<div class="legend-item">
|
||
<div class="legend-dot" style="background:#6366f1"></div>
|
||
<span>Miskin</span>
|
||
</div>
|
||
<div class="legend-item">
|
||
<div class="legend-dot" style="background:#fbbf24"></div>
|
||
<span>Rentan Miskin</span>
|
||
</div>
|
||
<div class="legend-item" style="align-items:flex-start;">
|
||
<div style="display:flex; gap:4px; margin-top:2px;">
|
||
<svg viewBox="0 0 24 24" width="16" height="16" fill="#ef4444" stroke="#ffffff" stroke-width="1.5">
|
||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
|
||
<circle cx="12" cy="10" r="3.5" fill="#ffffff" stroke="none"></circle>
|
||
</svg>
|
||
<svg viewBox="0 0 24 24" width="16" height="16" fill="#10b981" stroke="#ffffff" stroke-width="1.5">
|
||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
|
||
<circle cx="12" cy="10" r="3.5" fill="#ffffff" stroke="none"></circle>
|
||
</svg>
|
||
</div>
|
||
<span style="flex:1; line-height:1.3;">Dalam Radius<br><small style="color:var(--text-muted);">(Merah:
|
||
Belum, Hijau: Sudah Terima Bantuan)</small></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- How to -->
|
||
<div class="section-title">
|
||
<svg viewBox="0 0 24 24">
|
||
<circle cx="12" cy="12" r="10" />
|
||
<line x1="12" y1="8" x2="12" y2="12" />
|
||
<line x1="12" y1="16" x2="12.01" y2="16" />
|
||
</svg>
|
||
Cara Penggunaan
|
||
</div>
|
||
<div class="howto-box">
|
||
1. Klik marker <b>Rumah Ibadah</b> untuk memunculkan radius prioritas<br>
|
||
2. Rumah warga dalam radius akan berubah menjadi ikon <b>Pin Lokasi</b><br>
|
||
3. Pin <b style="color:var(--danger)">Merah</b> = Belum Terima Bantuan<br>
|
||
4. Pin <b style="color:#10b981">Hijau</b> = Sudah Terima Bantuan<br>
|
||
5. Atur rentang jarak radius (50m – 5km) menggunakan kontrol di atas peta<br>
|
||
6. Klik titik lokasi mana pun untuk melihat detail profil, mengajukan laporan, atau update data
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ─── TAB: IBADAH ─── -->
|
||
<div class="tab-panel active" id="tab-ibadah">
|
||
<button class="btn btn-success btn-block" id="btn-add-ibadah" style="margin-bottom:10px; display:none">
|
||
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" fill="none" stroke-width="2">
|
||
<line x1="12" y1="5" x2="12" y2="19" />
|
||
<line x1="5" y1="12" x2="19" y2="12" />
|
||
</svg>
|
||
Tambah Rumah Ibadah
|
||
</button>
|
||
<div class="search-box">
|
||
<span class="search-icon">
|
||
<svg viewBox="0 0 24 24">
|
||
<circle cx="11" cy="11" r="8" />
|
||
<line x1="21" y1="21" x2="16.65" y2="16.65" />
|
||
</svg>
|
||
</span>
|
||
<!-- Dummy hidden inputs to absorb browser autofill -->
|
||
<input type="text" name="fake_ibadah" style="display:none" aria-hidden="true">
|
||
<input type="password" name="fake_pass_ibadah" style="display:none" aria-hidden="true">
|
||
<input type="text" id="search-ibadah" placeholder="Cari nama atau jenis..." autocomplete="new-password"
|
||
readonly onfocus="this.removeAttribute('readonly')" name="search_ibadah_x">
|
||
</div>
|
||
<div style="margin-bottom:6px">
|
||
<select id="filter-ibadah-jenis" class="form-control" style="font-size:11px;padding:6px 8px">
|
||
<option value="">Semua Jenis</option>
|
||
<option value="masjid">Masjid</option>
|
||
<option value="gereja">Gereja</option>
|
||
<option value="klenteng">Klenteng</option>
|
||
<option value="pura">Pura</option>
|
||
<option value="vihara">Vihara</option>
|
||
<option value="lainnya">Lainnya</option>
|
||
</select>
|
||
</div>
|
||
<button id="filter-ibadah-reset" class="btn btn-ghost btn-sm btn-block" style="margin-bottom:8px">Reset
|
||
Filter</button>
|
||
<div class="data-list" id="ibadah-list">
|
||
<div class="loading">
|
||
<div class="spinner"></div> Memuat data...
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ─── TAB: WARGA ─── -->
|
||
<div class="tab-panel" id="tab-warga">
|
||
<button class="btn btn-primary btn-block" id="btn-add-warga" style="margin-bottom:10px; display:none">
|
||
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" fill="none" stroke-width="2">
|
||
<line x1="12" y1="5" x2="12" y2="19" />
|
||
<line x1="5" y1="12" x2="19" y2="12" />
|
||
</svg>
|
||
Tambah Rumah Warga
|
||
</button>
|
||
<div class="search-box">
|
||
<span class="search-icon">
|
||
<svg viewBox="0 0 24 24">
|
||
<circle cx="11" cy="11" r="8" />
|
||
<line x1="21" y1="21" x2="16.65" y2="16.65" />
|
||
</svg>
|
||
</span>
|
||
<!-- Dummy hidden inputs to absorb browser autofill -->
|
||
<input type="text" name="fake_warga" style="display:none" aria-hidden="true">
|
||
<input type="password" name="fake_pass_warga" style="display:none" aria-hidden="true">
|
||
<input type="text" id="search-warga" placeholder="Cari nama, NIK, atau No. KK..."
|
||
autocomplete="new-password" readonly onfocus="this.removeAttribute('readonly')" name="search_warga_x">
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;gap:4px;margin-bottom:6px">
|
||
<select id="filter-warga-kategori" class="form-control" style="font-size:11px;padding:6px 8px">
|
||
<option value="">Semua Kategori</option>
|
||
<option value="sangat_miskin">Sangat Kurang Mampu</option>
|
||
<option value="miskin">Kurang Mampu</option>
|
||
<option value="rentan_miskin">Rentan Kurang Mampu</option>
|
||
</select>
|
||
<select id="filter-warga-status" class="form-control" style="font-size:11px;padding:6px 8px">
|
||
<option value="">Semua Status Bansos</option>
|
||
<option value="belum_terima">Belum Terima</option>
|
||
<option value="sedang_proses">Sedang Proses</option>
|
||
<option value="sudah_terima">Sudah Terima</option>
|
||
</select>
|
||
<select id="filter-warga-rekomendasi" class="form-control" style="font-size:11px;padding:6px 8px">
|
||
<option value="">Semua Rekomendasi</option>
|
||
<option value="bantuan_rutin">Bantuan Rutin</option>
|
||
<option value="bantuan_pelatihan">Bantuan Pelatihan</option>
|
||
<option value="keduanya">Rutin + Pelatihan</option>
|
||
<option value="tidak_ada">Tidak Ada</option>
|
||
</select>
|
||
</div>
|
||
<button id="filter-warga-reset" class="btn btn-ghost btn-sm btn-block" style="margin-bottom:8px">Reset
|
||
Filter</button>
|
||
<div class="data-list" id="warga-list">
|
||
<div class="loading">
|
||
<div class="spinner"></div> Memuat data...
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ─── TAB: KEBUTUHAN ─── -->
|
||
<div class="tab-panel" id="tab-kebutuhan">
|
||
<div id="kebutuhan-panel-content">
|
||
<!-- Dynamically populated by JS based on user role -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ─── TAB: LAPORAN ─── -->
|
||
<div class="tab-panel" id="tab-laporan">
|
||
<div id="laporan-panel-content">
|
||
<!-- Dynamically populated by JS based on user role -->
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- ══════════════ MAP ══════════════ -->
|
||
<div id="map-container">
|
||
|
||
<button id="mobile-menu-btn" class="mobile-menu-btn" title="Toggle Menu">
|
||
<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2">
|
||
<line x1="3" y1="12" x2="21" y2="12" />
|
||
<line x1="3" y1="6" x2="21" y2="6" />
|
||
<line x1="3" y1="18" x2="21" y2="18" />
|
||
</svg>
|
||
</button>
|
||
|
||
<div id="mode-indicator"></div>
|
||
<div id="map"></div>
|
||
|
||
<!-- Info Panel -->
|
||
<div id="info-panel">
|
||
<div class="info-header">
|
||
<div class="info-title" id="info-panel-title">Detail</div>
|
||
<button class="info-close" id="info-close">
|
||
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" fill="none" stroke-width="2">
|
||
<line x1="18" y1="6" x2="6" y2="18" />
|
||
<line x1="6" y1="6" x2="18" y2="18" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="info-body" id="info-panel-body"></div>
|
||
</div>
|
||
|
||
<!-- Radius info bar -->
|
||
<div id="radius-info">
|
||
<span class="ri-label">Radius:</span>
|
||
<span class="ri-val">500 m</span>
|
||
<span class="ri-label">·</span>
|
||
<span class="ri-label">Terdampak:</span>
|
||
<span class="ri-count">0 rumah</span>
|
||
<span class="ri-close" id="radius-info-close">
|
||
<svg viewBox="0 0 24 24">
|
||
<line x1="18" y1="6" x2="6" y2="18" />
|
||
<line x1="6" y1="6" x2="18" y2="18" />
|
||
</svg>
|
||
</span>
|
||
</div>
|
||
|
||
<!-- Toolbar pojok kanan bawah -->
|
||
<div id="map-toolbar">
|
||
<button class="tool-btn" id="tool-fit" title="Fit semua data ke peta">
|
||
<svg viewBox="0 0 24 24">
|
||
<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />
|
||
</svg>
|
||
</button>
|
||
<button class="tool-btn" id="tool-clear-radius" title="Hapus radius">
|
||
<svg viewBox="0 0 24 24">
|
||
<circle cx="12" cy="12" r="10" />
|
||
<line x1="4.93" y1="4.93" x2="19.07" y2="19.07" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Toast -->
|
||
<div id="toast-container"></div>
|
||
|
||
<!-- ══════════════ MODAL: RUMAH IBADAH ══════════════ -->
|
||
<div class="modal-overlay" id="modal-ibadah">
|
||
<div class="modal">
|
||
<div class="modal-header">
|
||
<div class="modal-title" id="modal-ibadah-title">Tambah Rumah Ibadah</div>
|
||
<button class="modal-close" data-modal-close="modal-ibadah">
|
||
<svg viewBox="0 0 24 24" width="13" height="13" stroke="currentColor" fill="none" stroke-width="2.5">
|
||
<line x1="18" y1="6" x2="6" y2="18" />
|
||
<line x1="6" y1="6" x2="18" y2="18" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<input type="hidden" id="ibadah-id">
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">Nama Rumah Ibadah <span>*</span></label>
|
||
<input type="text" id="ibadah-nama" class="form-control" placeholder="Contoh: Masjid Nur Al-Iman">
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">Jenis</label>
|
||
<select id="ibadah-jenis" class="form-control">
|
||
<option value="masjid">Masjid</option>
|
||
<option value="gereja">Gereja</option>
|
||
<option value="klenteng">Klenteng</option>
|
||
<option value="pura">Pura</option>
|
||
<option value="vihara">Vihara</option>
|
||
<option value="lainnya">Lainnya</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Kontak</label>
|
||
<input type="text" id="ibadah-kontak" class="form-control" placeholder="No. telp / WA">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">Penanggung Jawab</label>
|
||
<input type="text" id="ibadah-pj" class="form-control" placeholder="Nama pengurus / imam / pendeta">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">Alamat</label>
|
||
<input type="text" id="ibadah-alamat" class="form-control" placeholder="Jalan, Nomor">
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">Kelurahan</label>
|
||
<input type="text" id="ibadah-kelurahan" class="form-control">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Kecamatan</label>
|
||
<input type="text" id="ibadah-kecamatan" class="form-control">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">Kota</label>
|
||
<input type="text" id="ibadah-kota" class="form-control" placeholder="Contoh: Pontianak">
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">Kapasitas KK</label>
|
||
<input type="number" id="ibadah-kapasitas" class="form-control" value="20" min="1">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">Radius Primer (meter)</label>
|
||
<input type="number" id="ibadah-radius" class="form-control" value="500" min="50">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">Anggaran Bulanan</label>
|
||
<input type="number" id="ibadah-anggaran" class="form-control" value="0" min="0">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">Keterangan</label>
|
||
<textarea id="ibadah-ket" class="form-control" rows="2"></textarea>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">Koordinat <span>*</span></label>
|
||
<div class="coord-display" id="ibadah-coord-display">Belum dipilih — klik di peta</div>
|
||
<div class="form-hint">Klik di peta untuk menentukan lokasi secara otomatis</div>
|
||
<div id="ibadah-addr-hint" style="font-size:10px;color:var(--text-muted);margin-top:4px;line-height:1.4">
|
||
</div>
|
||
<input type="hidden" id="ibadah-lat">
|
||
<input type="hidden" id="ibadah-lng">
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-ghost" data-modal-close="modal-ibadah">Batal</button>
|
||
<button class="btn btn-success" id="btn-save-ibadah">Simpan</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══════════════ MODAL: RUMAH WARGA ══════════════ -->
|
||
<div class="modal-overlay" id="modal-warga">
|
||
<div class="modal" style="width:540px">
|
||
<div class="modal-header">
|
||
<div class="modal-title" id="modal-warga-title">Tambah Rumah Warga</div>
|
||
<button class="modal-close" data-modal-close="modal-warga">
|
||
<svg viewBox="0 0 24 24" width="13" height="13" stroke="currentColor" fill="none" stroke-width="2.5">
|
||
<line x1="18" y1="6" x2="6" y2="18" />
|
||
<line x1="6" y1="6" x2="18" y2="18" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Modal sub-tabs -->
|
||
<div class="modal-tabs">
|
||
<button class="modal-tab-btn active" data-mtab="data-pokok">Data Pokok</button>
|
||
<button class="modal-tab-btn" data-mtab="rumah">Kondisi Rumah</button>
|
||
<button class="modal-tab-btn" data-mtab="anggota">Anggota Keluarga</button>
|
||
</div>
|
||
|
||
<div class="modal-body">
|
||
<input type="hidden" id="warga-id">
|
||
|
||
<!-- ── Tab: Data Pokok ── -->
|
||
<div class="modal-tab-panel active" id="mtab-data-pokok">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">No. KK <span>*</span></label>
|
||
<input type="text" id="warga-nokk" class="form-control" placeholder="16 digit" maxlength="16">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">NIK Kepala Keluarga</label>
|
||
<input type="text" id="warga-nik" class="form-control" placeholder="16 digit" maxlength="16">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">Nama Kepala Keluarga <span>*</span></label>
|
||
<input type="text" id="warga-nama" class="form-control" placeholder="Nama lengkap sesuai KTP">
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">Jml Tanggungan</label>
|
||
<input type="number" id="warga-tanggungan" class="form-control" value="1" min="1" max="20"
|
||
oninput="App.previewRek()">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Penghasilan/Bulan</label>
|
||
<input type="number" id="warga-penghasilan" class="form-control" value="0" min="0" placeholder="Rp"
|
||
oninput="App.previewRek()">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">Pekerjaan</label>
|
||
<input type="text" id="warga-pekerjaan" class="form-control" placeholder="Buruh, Petani, dll">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Status Pekerjaan</label>
|
||
<select id="warga-stspekerjaan" class="form-control" oninput="App.previewRek()">
|
||
<option value="tidak_bekerja">Tidak Bekerja</option>
|
||
<option value="tidak_tetap">Tidak Tetap</option>
|
||
<option value="tetap">Tetap</option>
|
||
<option value="pensiun">Pensiun</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">Kategori Kesejahteraan</label>
|
||
<select id="warga-kategori" class="form-control" onchange="App.previewRek()">
|
||
<option value="sistem">-- Ikuti Rekomendasi Sistem (Prediksi) --</option>
|
||
<option value="sangat_miskin">Sangat Kurang Mampu</option>
|
||
<option value="miskin" selected>Kurang Mampu</option>
|
||
<option value="rentan_miskin">Rentan Kurang Mampu</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Status Bantuan</label>
|
||
<select id="warga-stsbantuan" class="form-control">
|
||
<option value="belum_terima">Belum Terima</option>
|
||
<option value="sedang_proses">Sedang Proses</option>
|
||
<option value="sudah_terima">Sudah Terima</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">Jenis / Rekomendasi Bantuan</label>
|
||
<select id="warga-rekomendasi" class="form-control">
|
||
<option value="sistem">-- Ikuti Rekomendasi Sistem (Prediksi) --</option>
|
||
<option value="bantuan_rutin">Bantuan Rutin</option>
|
||
<option value="bantuan_pelatihan">Bantuan Pelatihan</option>
|
||
<option value="keduanya">Rutin + Pelatihan</option>
|
||
<option value="tidak_ada">Tidak Ada</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">Alamat</label>
|
||
<input type="text" id="warga-alamat" class="form-control" placeholder="Jalan, Gang, Nomor">
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">Kelurahan</label>
|
||
<input type="text" id="warga-kelurahan" class="form-control">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Kecamatan</label>
|
||
<input type="text" id="warga-kecamatan" class="form-control">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">Kota</label>
|
||
<input type="text" id="warga-kota" class="form-control">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">Koordinat <span>*</span></label>
|
||
<div class="coord-display" id="warga-coord-display">Belum dipilih — klik di peta</div>
|
||
<div class="form-hint">Klik di peta untuk menentukan lokasi secara otomatis</div>
|
||
<div id="warga-addr-hint" style="font-size:10px;color:var(--text-muted);margin-top:4px;line-height:1.4">
|
||
</div>
|
||
<input type="hidden" id="warga-lat">
|
||
<input type="hidden" id="warga-lng">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">Penanggung Bantuan <span>*</span></label>
|
||
<select id="warga-dikelola-oleh" class="form-control">
|
||
<option value="">-- Dipilih Otomatis (Rumah Ibadah Terdekat) --</option>
|
||
</select>
|
||
<div class="form-hint">Otomatis dipilih dari Rumah Ibadah terdekat, atau pilih manual.</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">Keterangan</label>
|
||
<textarea id="warga-ket" class="form-control" rows="2"
|
||
placeholder="Kondisi, catatan khusus, dll"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ── Tab: Kondisi Rumah ── -->
|
||
<div class="modal-tab-panel" id="mtab-rumah">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">Luas Rumah (m²)</label>
|
||
<input type="number" id="warga-luas" class="form-control" placeholder="misal: 36">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Status Hunian</label>
|
||
<select id="warga-tempat" class="form-control" onchange="App.previewRek()">
|
||
<option value="milik_sendiri">Milik Sendiri</option>
|
||
<option value="sewa">Sewa</option>
|
||
<option value="numpang">Numpang</option>
|
||
<option value="dinas">Dinas</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">Jenis Lantai</label>
|
||
<select id="warga-lantai" class="form-control">
|
||
<option value="tanah">Tanah</option>
|
||
<option value="semen" selected>Semen</option>
|
||
<option value="keramik">Keramik</option>
|
||
<option value="kayu">Kayu</option>
|
||
<option value="lainnya">Lainnya</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Jenis Dinding</label>
|
||
<select id="warga-dinding" class="form-control">
|
||
<option value="tembok" selected>Tembok</option>
|
||
<option value="kayu">Kayu</option>
|
||
<option value="bambu">Bambu</option>
|
||
<option value="lainnya">Lainnya</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">Sumber Air</label>
|
||
<select id="warga-air" class="form-control" onchange="App.previewRek()">
|
||
<option value="pdam">PDAM</option>
|
||
<option value="sumur" selected>Sumur</option>
|
||
<option value="sungai">Sungai</option>
|
||
<option value="hujan">Air Hujan</option>
|
||
<option value="lainnya">Lainnya</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="kondisi-rumah-preview">
|
||
<div class="kpr-title">Indikator Kondisi Fisik Rumah</div>
|
||
<div class="kpr-grid">
|
||
<div class="kpr-item">
|
||
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" fill="none" stroke-width="1.8">
|
||
<rect x="3" y="3" width="18" height="18" rx="2" />
|
||
</svg>
|
||
<span id="kpr-lantai-label">Semen</span>
|
||
</div>
|
||
<div class="kpr-item">
|
||
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" fill="none" stroke-width="1.8">
|
||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
||
</svg>
|
||
<span id="kpr-dinding-label">Tembok</span>
|
||
</div>
|
||
<div class="kpr-item">
|
||
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" fill="none" stroke-width="1.8">
|
||
<path d="M12 2a10 10 0 0 1 10 10" />
|
||
<path d="M12 6a6 6 0 0 1 6 6" />
|
||
<path d="M12 10a2 2 0 0 1 2 2" />
|
||
</svg>
|
||
<span id="kpr-air-label">Sumur</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ── Tab: Anggota Keluarga ── -->
|
||
<div class="modal-tab-panel" id="mtab-anggota">
|
||
<!-- Preview rekomendasi -->
|
||
<div class="rek-preview" id="rek-preview-box">
|
||
<div style="font-size:11px;color:var(--text-muted);text-align:center;padding:10px">Tambah anggota untuk
|
||
melihat prediksi rekomendasi</div>
|
||
</div>
|
||
|
||
<div id="anggota-form-container" style="display:flex;flex-direction:column;gap:10px;margin-top:10px"></div>
|
||
|
||
<button class="btn btn-ghost btn-sm btn-block" id="btn-add-anggota-row"
|
||
style="margin-top:10px;border-style:dashed">
|
||
<svg viewBox="0 0 24 24" width="13" height="13" stroke="currentColor" fill="none" stroke-width="2">
|
||
<line x1="12" y1="5" x2="12" y2="19" />
|
||
<line x1="5" y1="12" x2="19" y2="12" />
|
||
</svg>
|
||
Tambah Anggota
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-footer" style="display: flex; gap: 8px; justify-content: flex-end; width: 100%;">
|
||
<button class="btn btn-ghost" data-modal-close="modal-warga" style="margin-right: auto;">Batal</button>
|
||
<button class="btn btn-success" id="btn-verify-warga-direct" style="display: none;"
|
||
onclick="App.verifyWargaNoChanges()">Verifikasi (Tanpa Perubahan)</button>
|
||
<button class="btn btn-primary" id="btn-save-warga">Simpan</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══════════════ MODAL: LOGIN ══════════════ -->
|
||
<div class="modal-overlay" id="modal-login">
|
||
<div class="modal login-premium-modal" style="width:360px">
|
||
<div class="login-premium-header">
|
||
<div class="login-premium-logo-wrap">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
|
||
<path d="M7 11V7a5 5 0 0 1 10 0v4" />
|
||
</svg>
|
||
</div>
|
||
<div class="modal-title" id="modal-login-title">GIS Bansos Portal</div>
|
||
<div class="login-sub-title" id="modal-login-subtitle">Akses dashboard pemetaan bantuan sosial</div>
|
||
<button class="modal-close" data-modal-close="modal-login">
|
||
<svg viewBox="0 0 24 24" width="13" height="13" stroke="currentColor" fill="none" stroke-width="2.5">
|
||
<line x1="18" y1="6" x2="6" y2="18" />
|
||
<line x1="6" y1="6" x2="18" y2="18" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="login-premium-body">
|
||
|
||
<!-- ── FORM LOGIN ── -->
|
||
<div id="login-form-container">
|
||
<div class="login-premium-input-group">
|
||
<label>Username</label>
|
||
<div class="login-premium-input-wrapper">
|
||
<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.2"
|
||
stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
|
||
<circle cx="12" cy="7" r="4" />
|
||
</svg>
|
||
<input type="text" id="login-username" class="form-control" placeholder="Masukkan username">
|
||
</div>
|
||
</div>
|
||
<div class="login-premium-input-group">
|
||
<label>Password</label>
|
||
<div class="login-premium-input-wrapper">
|
||
<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.2"
|
||
stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
|
||
<path d="M7 11V7a5 5 0 0 1 10 0v4" />
|
||
</svg>
|
||
<input type="password" id="login-password" class="form-control" placeholder="Masukkan password">
|
||
</div>
|
||
</div>
|
||
<div id="login-error-msg"
|
||
style="display:none; color:var(--danger); font-size:11px; margin-top:8px; font-weight:600; text-align:center">
|
||
</div>
|
||
|
||
<!-- <div class="login-hint-premium">
|
||
<div style="font-weight:700; color:var(--text-primary); margin-bottom:8px; font-size:10.5px; text-transform:uppercase; letter-spacing:0.3px">Akun Dummy (Password: <span style="color:#6366f1">password123</span>)</div>
|
||
<div style="display:grid; grid-template-columns: 1fr 1fr; gap:8px 6px; font-size:9.5px; text-align:left;">
|
||
<div style="display:flex; align-items:center; gap:5px;"><span class="fb-badge" style="background:rgba(239, 68, 68, 0.12); color:#ef4444; font-size:8px; padding:2px 5px; border-radius:4px; font-weight:700">ADMIN</span> <b style="color:var(--text-secondary)">admin</b></div>
|
||
<div style="display:flex; align-items:center; gap:5px;"><span class="fb-badge" style="background:rgba(245, 158, 11, 0.12); color:#f59e0b; font-size:8px; padding:2px 5px; border-radius:4px; font-weight:700">PETUGAS</span> <b style="color:var(--text-secondary)">petugas</b></div>
|
||
<div style="display:flex; align-items:center; gap:5px;"><span class="fb-badge" style="background:rgba(99, 102, 241, 0.12); color:#6366f1; font-size:8px; padding:2px 5px; border-radius:4px; font-weight:700">KOORD</span> <b style="color:var(--text-secondary)">koordinator</b></div>
|
||
<div style="display:flex; align-items:center; gap:5px;"><span class="fb-badge" style="background:rgba(16, 185, 129, 0.12); color:#10b981; font-size:8px; padding:2px 5px; border-radius:4px; font-weight:700">KONTRIBUTOR</span> <b style="color:var(--text-secondary)">kontributor</b></div>
|
||
</div>
|
||
</div> -->
|
||
|
||
<!-- Toggle ke Register -->
|
||
<div style="text-align:center; margin-top:12px; font-size:11px; color:var(--text-muted)">
|
||
Belum punya akun?
|
||
<a href="#" id="link-show-register"
|
||
style="color:#6366f1; font-weight:700; text-decoration:none; margin-left:3px">Daftar disini</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ── FORM REGISTRASI ── -->
|
||
<div id="register-form-container" style="display:none">
|
||
<div class="login-premium-input-group">
|
||
<label>Username <span style="color:var(--danger)">*</span></label>
|
||
<div class="login-premium-input-wrapper">
|
||
<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.2"
|
||
stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
|
||
<circle cx="12" cy="7" r="4" />
|
||
</svg>
|
||
<input type="text" id="register-username" class="form-control" placeholder="Buat username unik">
|
||
</div>
|
||
</div>
|
||
<div class="login-premium-input-group">
|
||
<label>Email <span style="color:var(--danger)">*</span></label>
|
||
<div class="login-premium-input-wrapper">
|
||
<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.2"
|
||
stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
|
||
<polyline points="22,6 12,13 2,6" />
|
||
</svg>
|
||
<input type="email" id="register-email" class="form-control" placeholder="email@contoh.com">
|
||
</div>
|
||
</div>
|
||
<div class="login-premium-input-group">
|
||
<label>Nomor Telepon / WA <span style="color:var(--danger)">*</span></label>
|
||
<div class="login-premium-input-wrapper">
|
||
<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.2"
|
||
stroke-linecap="round" stroke-linejoin="round">
|
||
<path
|
||
d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
|
||
</svg>
|
||
<input type="text" id="register-phone" class="form-control" placeholder="Contoh: 08123456789">
|
||
</div>
|
||
</div>
|
||
<div class="login-premium-input-group">
|
||
<label>Daftar Sebagai <span style="color:var(--danger)">*</span></label>
|
||
<div class="login-premium-input-wrapper">
|
||
<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.2"
|
||
stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
|
||
<circle cx="9" cy="7" r="4" />
|
||
<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
|
||
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
|
||
</svg>
|
||
<select id="register-role" class="form-control" style="padding-left:38px">
|
||
<option value="kontributor">Kontributor (Masyarakat Umum)</option>
|
||
<option value="koordinator">Koordinator Rumah Ibadah</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div id="register-rumah-ibadah-group" style="display:none">
|
||
<div class="login-premium-input-group">
|
||
<label>Rumah Ibadah yang Dikelola <span style="color:var(--danger)">*</span></label>
|
||
<div class="login-premium-input-wrapper">
|
||
<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.2"
|
||
stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
||
<polyline points="9 22 9 12 15 12 15 22" />
|
||
</svg>
|
||
<select id="register-rumah-ibadah" class="form-control" style="padding-left:38px">
|
||
<option value="">-- Pilih Rumah Ibadah --</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="login-premium-input-group">
|
||
<label>Password <span style="color:var(--danger)">*</span></label>
|
||
<div class="login-premium-input-wrapper">
|
||
<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.2"
|
||
stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
|
||
<path d="M7 11V7a5 5 0 0 1 10 0v4" />
|
||
</svg>
|
||
<input type="password" id="register-password" class="form-control" placeholder="Min. 6 karakter">
|
||
</div>
|
||
</div>
|
||
<div id="register-error-msg"
|
||
style="display:none; color:var(--danger); font-size:11px; margin-top:8px; font-weight:600; text-align:center">
|
||
</div>
|
||
|
||
<!-- Toggle balik ke Login -->
|
||
<div style="text-align:center; margin-top:12px; font-size:11px; color:var(--text-muted)">
|
||
Sudah punya akun?
|
||
<a href="#" id="link-show-login"
|
||
style="color:#6366f1; font-weight:700; text-decoration:none; margin-left:3px">Masuk disini</a>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="login-premium-footer">
|
||
<button class="btn btn-ghost" data-modal-close="modal-login">Batal</button>
|
||
<button class="btn btn-primary" id="btn-login-submit">Masuk</button>
|
||
<button class="btn btn-primary" id="btn-register-submit" style="display:none">Daftar</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══════════════ MODAL: KONFIRMASI LOGOUT ══════════════ -->
|
||
<div class="modal-overlay" id="modal-logout-confirm">
|
||
<div class="modal" style="width:340px;text-align:center;">
|
||
<div class="modal-body" style="padding:28px 24px 20px;">
|
||
<div
|
||
style="width:52px;height:52px;border-radius:50%;background:rgba(239,68,68,0.1);display:flex;align-items:center;justify-content:center;margin:0 auto 14px auto;">
|
||
<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#ef4444" stroke-width="2"
|
||
stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
|
||
<polyline points="16 17 21 12 16 7" />
|
||
<line x1="21" y1="12" x2="9" y2="12" />
|
||
</svg>
|
||
</div>
|
||
<div style="font-size:15px;font-weight:800;color:var(--text-primary);margin-bottom:6px;">Konfirmasi Logout</div>
|
||
<div style="font-size:12px;color:var(--text-muted);line-height:1.5;">Apakah Anda yakin ingin keluar? Anda perlu
|
||
login kembali untuk mengakses fitur eksklusif.</div>
|
||
</div>
|
||
<div class="modal-footer" style="justify-content:center;gap:10px;padding:0 24px 24px;">
|
||
<button class="btn btn-ghost" data-modal-close="modal-logout-confirm" style="flex:1;">Batal</button>
|
||
<button class="btn btn-danger" id="btn-confirm-logout" style="flex:1;">Ya, Logout</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="modal-overlay" id="modal-kebutuhan-form">
|
||
<div class="modal" style="width:400px">
|
||
<div class="modal-header">
|
||
<div class="modal-title" id="modal-kebutuhan-title">Tambah Kebutuhan Bantuan</div>
|
||
<button class="modal-close" data-modal-close="modal-kebutuhan-form">
|
||
<svg viewBox="0 0 24 24" width="13" height="13" stroke="currentColor" fill="none" stroke-width="2.5">
|
||
<line x1="18" y1="6" x2="6" y2="18" />
|
||
<line x1="6" y1="6" x2="18" y2="18" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<input type="hidden" id="kebutuhan-id">
|
||
|
||
<div class="form-group" id="kebutuhan-ibadah-select-container">
|
||
<label class="form-label">Rumah Ibadah <span>*</span></label>
|
||
<select id="kebutuhan-ibadah-id" class="form-control">
|
||
<!-- Populated by JS -->
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">Kategori Kebutuhan <span>*</span></label>
|
||
<select id="kebutuhan-kategori" class="form-control">
|
||
<option value="barang">Barang (makanan, pakaian, perlengkapan)</option>
|
||
<option value="uang">Uang Tunai</option>
|
||
<option value="jasa">Jasa / Tenaga</option>
|
||
</select>
|
||
<div class="form-hint" style="font-size:11px;color:var(--text-muted);margin-top:6px">Pilih tipe utama yang
|
||
sesuai; rincian spesifikasi diisi pada kolom "Spesifikasi Detail Bantuan".</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">Spesifikasi Detail Bantuan <span>*</span></label>
|
||
<input type="text" id="kebutuhan-jenis-bantuan" class="form-control"
|
||
placeholder="Contoh: Beras Ramos (kg), Uang Saku Anak Sekolah (Rp)">
|
||
</div>
|
||
|
||
<div class="form-group" id="kebutuhan-jumlah-group">
|
||
<label class="form-label" id="kebutuhan-jumlah-label">Jumlah Dibutuhkan <span>*</span></label>
|
||
<input type="number" id="kebutuhan-jumlah-dibutuhkan" class="form-control" min="1"
|
||
placeholder="Jumlah unit/dana yang dibutuhkan">
|
||
<div class="form-hint" id="kebutuhan-jumlah-hint"
|
||
style="font-size:11px;color:var(--text-muted);margin-top:6px">Untuk barang: jumlah unit. Untuk uang:
|
||
masukkan jumlah nominal (tanpa pemisah).</div>
|
||
</div>
|
||
<div class="form-group" style="margin-top:8px;">
|
||
<label class="form-label">Satuan</label>
|
||
<select id="kebutuhan-satuan" class="form-control">
|
||
<option value="unit">Unit</option>
|
||
<option value="orang">Orang</option>
|
||
<option value="jam">Jam</option>
|
||
<option value="shift">Shift</option>
|
||
<option value="nominal">Nominal (Rp)</option>
|
||
</select>
|
||
<div class="form-hint" style="font-size:11px;color:var(--text-muted);margin-top:6px">Pilih satuan untuk
|
||
mengartikan kolom "Jumlah Dibutuhkan".</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-ghost" data-modal-close="modal-kebutuhan-form">Batal</button>
|
||
<button class="btn btn-primary" id="btn-kebutuhan-save">Simpan</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══════════════ MODAL: KONTRIBUSI (DONASI) ══════════════ -->
|
||
<div class="modal-overlay" id="modal-kontribusi-form">
|
||
<div class="modal" style="width:400px">
|
||
<div class="modal-header">
|
||
<div class="modal-title">Beri Kontribusi / Donasi</div>
|
||
<button class="modal-close" data-modal-close="modal-kontribusi-form">
|
||
<svg viewBox="0 0 24 24" width="13" height="13" stroke="currentColor" fill="none" stroke-width="2.5">
|
||
<line x1="18" y1="6" x2="6" y2="18" />
|
||
<line x1="6" y1="6" x2="18" y2="18" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<input type="hidden" id="kontribusi-kebutuhan-id">
|
||
|
||
<div style="background:var(--bg-tertiary); padding:10px; border-radius:8px; margin-bottom:12px; font-size:11px">
|
||
<div style="font-weight:700; color:var(--text-primary)" id="kontribusi-target-ibadah">Masjid Al-Jihad</div>
|
||
<div style="color:var(--text-muted); margin-top:2px" id="kontribusi-target-detail">Kebutuhan: Beras (Sisa: 50
|
||
kg)</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">Nama Kontributor / Relawan <span>*</span></label>
|
||
<input type="text" id="kontribusi-nama" class="form-control" placeholder="Nama lengkap Anda">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">No. Kontak / WA <span>*</span></label>
|
||
<input type="text" id="kontribusi-kontak" class="form-control" placeholder="Contoh: 08123456789">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">Tipe Kontribusi</label>
|
||
<select id="kontribusi-tipe" class="form-control">
|
||
<option value="uang">Uang Tunai / Transfer</option>
|
||
<option value="barang">Barang / Logistik</option>
|
||
<option value="tenaga">Tenaga / Relawan</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">Jumlah Kontribusi <span>*</span></label>
|
||
<input type="number" id="kontribusi-jumlah" class="form-control" min="1"
|
||
placeholder="Masukkan jumlah unit/dana yang didonasikan">
|
||
<div class="form-hint" id="kontribusi-max-hint" style="color:var(--success); font-weight:600"></div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">Catatan Tambahan</label>
|
||
<textarea id="kontribusi-catatan" class="form-control" rows="2"
|
||
placeholder="Catatan logistik / konfirmasi transfer"></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-ghost" data-modal-close="modal-kontribusi-form">Batal</button>
|
||
<button class="btn btn-primary" id="btn-kontribusi-save">Kirim Donasi</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||
<script src="assets/js/app.js?v=13"></script>
|
||
<script src="assets/js/fitur_baru.js?v=13"></script>
|
||
|
||
<!-- ══════════════ MODAL: FORM LAPORAN WARGA ══════════════ -->
|
||
<div class="modal-overlay" id="modal-laporan-form">
|
||
<div class="modal" style="width:480px">
|
||
<div class="modal-header">
|
||
<div class="modal-title">⚠️ Laporkan Ketidaksesuaian Data</div>
|
||
<button class="modal-close" data-modal-close="modal-laporan-form">
|
||
<svg viewBox="0 0 24 24" width="13" height="13" stroke="currentColor" fill="none" stroke-width="2.5">
|
||
<line x1="18" y1="6" x2="6" y2="18" />
|
||
<line x1="6" y1="6" x2="18" y2="18" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<input type="hidden" id="laporan-warga-id">
|
||
|
||
<div
|
||
style="background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.25); border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; font-size: 11px; color: #92400e; line-height: 1.6;">
|
||
<strong>📋 Pelaporan akan ditinjau oleh Admin.</strong> Jika valid, petugas lapangan akan dikirim untuk
|
||
verifikasi langsung ke lapangan. Pastikan informasi yang Anda berikan akurat dan dapat dipertanggungjawabkan.
|
||
</div>
|
||
|
||
<div style="font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 10px;"
|
||
id="laporan-warga-nama-display"></div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">Jenis Ketidaksesuaian <span>*</span></label>
|
||
<select id="laporan-jenis" class="form-control">
|
||
<option value="warga_mampu">Warga Sebenarnya Mampu / Tidak Layak Bantuan</option>
|
||
<option value="data_tidak_sesuai">Data Tidak Sesuai Kondisi Nyata</option>
|
||
<option value="warga_pindah">Warga Telah Pindah / Tidak Lagi Tinggal di Sini</option>
|
||
<option value="warga_meninggal">Warga Telah Meninggal Dunia</option>
|
||
<option value="data_ganda">Data Terdaftar Ganda / Duplikat</option>
|
||
<option value="lainnya">Lainnya</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group" style="display:none;">
|
||
<input type="hidden" id="laporan-prioritas" value="sedang">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">Deskripsi / Penjelasan Detail <span>*</span></label>
|
||
<textarea id="laporan-deskripsi" class="form-control" rows="4"
|
||
placeholder="Jelaskan kondisi sebenarnya yang Anda ketahui. Semakin detail semakin baik untuk ditindaklanjuti..."></textarea>
|
||
<div class="form-hint">Min. 20 karakter. Sertakan fakta yang dapat diverifikasi.</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-ghost" data-modal-close="modal-laporan-form">Batal</button>
|
||
<button class="btn btn-danger" id="btn-laporan-submit" onclick="FiturBaru.Laporan.submitLaporan()">
|
||
<svg viewBox="0 0 24 24" width="13" height="13" stroke="currentColor" fill="none" stroke-width="2">
|
||
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
|
||
<line x1="12" y1="9" x2="12" y2="13" />
|
||
<line x1="12" y1="17" x2="12.01" y2="17" />
|
||
</svg>
|
||
Kirim Laporan
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
|
||
</html> |