Your Name
1556 lines
79 KiB
HTML
1556 lines
79 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Map Point Manager</title>
|
||
|
||
<!-- Leaflet CSS -->
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" />
|
||
|
||
<!-- Custom CSS -->
|
||
<link rel="stylesheet" href="css/style.css">
|
||
|
||
<!-- Chart.js for trend visualization -->
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
|
||
|
||
<!-- jsPDF for live report preview and download -->
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.8.4/jspdf.plugin.autotable.min.js"></script>
|
||
</head>
|
||
<body>
|
||
<!-- Login Form (initially visible) -->
|
||
<div id="login-overlay" class="login-overlay active">
|
||
<div class="login-modal">
|
||
<div class="login-header">
|
||
<h2>🗺️ WebGIS System</h2>
|
||
<p>Sistem Informasi Geografis untuk Pengentasan Kemiskinan</p>
|
||
</div>
|
||
<form id="login-form" onsubmit="handleLogin(event)">
|
||
<div class="form-group">
|
||
<label for="login-email">Email</label>
|
||
<input type="email" id="login-email" name="email" required placeholder="admin@system.local">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="login-password">Password</label>
|
||
<input type="password" id="login-password" name="password" required placeholder="admin123">
|
||
</div>
|
||
<div id="login-error" class="login-error"></div>
|
||
<button type="submit" class="btn-primary btn-lg" id="login-btn">
|
||
Login
|
||
</button>
|
||
<p class="login-hint">Demo: admin@system.local / admin123</p>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- User Info Bar -->
|
||
<div id="user-info-bar" class="user-info-bar" style="display: none;">
|
||
<div class="user-info-left">
|
||
<span id="current-user-display"></span>
|
||
<span id="current-role-display" class="role-badge"></span>
|
||
</div>
|
||
<div class="user-info-center">
|
||
<h1 class="app-title">🗺️ Simpankemis</h1>
|
||
</div>
|
||
<div class="user-info-right">
|
||
<button onclick="handleLogout()" class="btn-logout">Logout</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="app-container">
|
||
<!-- Sidebar -->
|
||
<aside class="sidebar">
|
||
<div class="sidebar-header">
|
||
</div>
|
||
|
||
<div class="sidebar-tabs">
|
||
<button class="tab-button tab-active" onclick="switchTab('beranda', this)">
|
||
<span class="tab-icon">🏠</span>
|
||
<span class="tab-label">Beranda</span>
|
||
</button>
|
||
<button class="tab-button" onclick="switchTab('peta', this)">
|
||
<span class="tab-icon">🗺️</span>
|
||
<span class="tab-label">Peta</span>
|
||
</button>
|
||
<button class="tab-button" onclick="switchTab('managemen', this)">
|
||
<span class="tab-icon">🛠️</span>
|
||
<span class="tab-label">Managemen</span>
|
||
</button>
|
||
<button class="tab-button" onclick="switchTab('laporan', this)">
|
||
<span class="tab-icon">📊</span>
|
||
<span class="tab-label">Laporan</span>
|
||
</button>
|
||
<button class="tab-button admin-only" id="users-tab-btn" onclick="switchTab('users', this)" style="display: none;">
|
||
<span class="tab-icon">👥</span>
|
||
<span class="tab-label">Users</span>
|
||
</button>
|
||
<button class="tab-button admin-only" id="konfigurasi-tab-btn" onclick="switchTab('konfigurasi', this)" style="display: none;">
|
||
<span class="tab-icon">⚙️</span>
|
||
<span class="tab-label">Konfigurasi</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Beranda Tab (Home/Dashboard) -->
|
||
<div class="sidebar-content tab-content tab-active" id="beranda-tab">
|
||
<div class="dashboard-container" style="display: flex; flex-direction: column; gap: 20px;">
|
||
<!-- KPI Cards Grid -->
|
||
<div class="kpi-cards-grid">
|
||
<div class="kpi-card">
|
||
<div class="kpi-icon">👥</div>
|
||
<div class="kpi-content">
|
||
<div class="kpi-label">TOTAL PENDUDUK MISKIN</div>
|
||
<div class="kpi-value" id="beranda-total-poor">0</div>
|
||
<div class="kpi-subtitle">Jiwa</div>
|
||
<div class="kpi-trend positive">↑ Turun 1.2% dari lalu</div>
|
||
</div>
|
||
</div>
|
||
<div class="kpi-card">
|
||
<div class="kpi-icon">📈</div>
|
||
<div class="kpi-content">
|
||
<div class="kpi-label">PERSENTASE KEMISKINAN</div>
|
||
<div class="kpi-value" id="beranda-percentage">0</div>
|
||
<div class="kpi-subtitle">%</div>
|
||
<div class="kpi-trend negative">↓ -0.18 poin (Maret 2023)</div>
|
||
</div>
|
||
</div>
|
||
<div class="kpi-card">
|
||
<div class="kpi-icon">🎯</div>
|
||
<div class="kpi-content">
|
||
<div class="kpi-label">TARGET NASIONAL 2024</div>
|
||
<div class="kpi-value" id="beranda-target">7.50</div>
|
||
<div class="kpi-subtitle">%</div>
|
||
<div class="kpi-trend">Pencapaian: 82% dari target</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Trend Charts (Two separate visualizations) -->
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
|
||
<!-- Chart 1: Total Population vs Total Poor People -->
|
||
<div class="trend-section" style="background: rgba(255,255,255,0.1); padding: 15px; border-radius: 8px;">
|
||
<h3 style="color: white;">Total Penduduk Miskin vs Total Populasi Indonesia</h3>
|
||
<p style="color: rgba(255,255,255,0.8); font-size: 12px; margin-bottom: 10px;">Ringkasan data saat ini</p>
|
||
<canvas id="populationChart" style="max-height: 400px; display: none;"></canvas>
|
||
<div id="populationChartPlaceholder" style="height: 350px; background: rgba(0,0,0,0.3); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7);">
|
||
Grafik sedang dimuat...
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Chart 2: Poverty Percentage vs National Target -->
|
||
<div class="trend-section" style="background: rgba(255,255,255,0.1); padding: 15px; border-radius: 8px;">
|
||
<h3 style="color: white;">Persentase Kemiskinan vs Target Nasional</h3>
|
||
<p style="color: rgba(255,255,255,0.8); font-size: 12px; margin-bottom: 10px;">Ringkasan data saat ini</p>
|
||
<canvas id="percentageChart" style="max-height: 400px; display: none;"></canvas>
|
||
<div id="percentageChartPlaceholder" style="height: 350px; background: rgba(0,0,0,0.3); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7);">
|
||
Grafik sedang dimuat...
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Region Data Section -->
|
||
<div class="region-data-section" style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
|
||
<div class="region-list" style="background: rgba(255,255,255,0.08); padding: 15px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2);">
|
||
<h3 style="color: white; margin-bottom: 10px;">5 Provinsi Teratas dengan Titik Kebutuhan Terbanyak</h3>
|
||
<div id="beranda-region-list" style="display: flex; flex-direction: column; gap: 8px; font-size: 12px;"></div>
|
||
<a href="#" class="view-all-link" style="display: block; margin-top: 10px; color: #667eea; text-decoration: none; font-size: 12px;">LIHAT SEMUA PROVINSI →</a>
|
||
</div>
|
||
<div class="map-preview" style="background: rgba(0,0,0,0.4); padding: 15px; border-radius: 8px; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 2px dashed rgba(255,255,255,0.3);">
|
||
<h3 style="color: white; margin-bottom: 10px;">🗺️ Peta Interaktif Kemiskinan</h3>
|
||
<p style="color: rgba(255,255,255,0.7); font-size: 12px; margin-bottom: 10px;">Visualisasi spasial data terpadu...</p>
|
||
<button onclick="switchTab('peta')" class="btn-peta" style="background: #667eea; color: white; padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600;">BUKA PETA</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Laporan Tab (Report & Download) -->
|
||
<div class="sidebar-content tab-content" id="laporan-tab">
|
||
<div class="report-shell">
|
||
<div class="report-header">
|
||
<div>
|
||
<h2>📊 Laporan Sistem Informasi Geografis</h2>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="report-preview-card">
|
||
<div class="report-preview-toolbar">
|
||
<div class="report-preview-badge">Live PDF Preview</div>
|
||
<div class="report-preview-meta" id="report-preview-meta">Memuat data...</div>
|
||
</div>
|
||
<iframe id="report-preview-frame" title="PDF Preview"></iframe>
|
||
</div>
|
||
|
||
<div class="report-footer-note">
|
||
Download tersedia di kanan bawah panel preview.
|
||
<button class="report-download-fab" onclick="downloadCombinedPDF()" title="Download PDF">
|
||
📥
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Peta Tab (Map) -->
|
||
<div class="sidebar-content tab-content" id="peta-tab">
|
||
<!-- Collapsible household panel -->
|
||
<div class="household-panel-wrapper" id="household-panel-wrapper">
|
||
<div class="household-panel-header">
|
||
<span>🏠 Data & Kontrol</span>
|
||
<button class="close-panel-btn" onclick="toggleHouseholdPanel()">✕</button>
|
||
</div>
|
||
|
||
<div class="stats-grid">
|
||
<div class="stats-card">
|
||
<div class="stat-number" id="marker-count">0</div>
|
||
<div class="stat-label">Households</div>
|
||
</div>
|
||
|
||
<div class="stats-card stats-card-compact">
|
||
<div class="stat-number" id="masjid-count">0</div>
|
||
<div class="stat-label">Masjids</div>
|
||
</div>
|
||
|
||
<div class="stats-card stats-card-compact">
|
||
<div class="stat-number" id="need-point-count">0</div>
|
||
<div class="stat-label">Needs</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="household-panel">
|
||
<div class="legend-title">📊 Status Keluarga</div>
|
||
|
||
<div class="stats-grid household-stats-grid">
|
||
<div class="stats-card stats-card-compact">
|
||
<div class="stat-number" id="household-total-count">0</div>
|
||
<div class="stat-label">Total</div>
|
||
</div>
|
||
|
||
<div class="stats-card stats-card-compact">
|
||
<div class="stat-number" id="household-assisted-count">0</div>
|
||
<div class="stat-label">Assisted</div>
|
||
</div>
|
||
|
||
<div class="stats-card stats-card-compact">
|
||
<div class="stat-number" id="household-verified-count">0</div>
|
||
<div class="stat-label">Verified</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="household-actions">
|
||
<button id="add-household-btn" class="btn-primary btn-household btn-compact">
|
||
<span class="btn-icon">🏠</span>
|
||
<span class="btn-text">Household</span>
|
||
</button>
|
||
|
||
<button id="add-assistance-btn" class="btn-primary btn-assistance btn-compact">
|
||
<span class="btn-icon">🎁</span>
|
||
<span class="btn-text">Bantuan</span>
|
||
</button>
|
||
|
||
<button id="add-verification-btn" class="btn-primary btn-verification btn-compact">
|
||
<span class="btn-icon">✅</span>
|
||
<span class="btn-text">Verifikasi</span>
|
||
</button>
|
||
|
||
<button id="compute-household-scores-btn" class="btn-primary btn-score btn-compact">
|
||
<span class="btn-icon">📊</span>
|
||
<span class="btn-text">Hitung Skor</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Map tool buttons: points, masjid, need-point, lines, polygons -->
|
||
<div class="map-tools" style="padding: 8px 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px;">
|
||
<button id="add-point-btn" class="btn-secondary btn-compact">📍 Titik</button>
|
||
<button id="add-masjid-btn" class="btn-secondary btn-compact">🕌 Masjid</button>
|
||
<button id="add-need-point-btn" class="btn-secondary btn-compact">⚕️ Kebutuhan</button>
|
||
<button id="add-line-btn" class="btn-secondary btn-compact">🛣️ Jalan</button>
|
||
<button id="add-polygon-btn" class="btn-secondary btn-compact">📐 Parcel</button>
|
||
</div>
|
||
|
||
<!-- Map mode shortcut removed from sidebar; shortcuts available on the map UI -->
|
||
|
||
<div class="form-group">
|
||
<label for="household-filter-status">Filter Status</label>
|
||
<select id="household-filter-status">
|
||
<option value="">Semua</option>
|
||
<option value="unverified">Belum Verifikasi</option>
|
||
<option value="field_verified">Field Verified</option>
|
||
<option value="admin_approved">Admin Approved</option>
|
||
<option value="needs_review">Perlu Review</option>
|
||
<option value="rejected">Ditolak</option>
|
||
</select>
|
||
</div>
|
||
|
||
<button type="button" class="btn-secondary btn-compact" onclick="refreshHouseholdPanel()">
|
||
🔄 Refresh
|
||
</button>
|
||
|
||
<div class="household-list" id="households-list" style="max-height: 120px; overflow-y: auto;"></div>
|
||
|
||
<div class="household-priority-box">
|
||
<div class="legend-title">🎯 Prioritas</div>
|
||
<div class="household-priority-summary" style="font-size: 11px;">
|
||
<span>A: <strong id="priority-assisted-count">0</strong></span>
|
||
<span>VH: <strong id="priority-very-high-count">0</strong></span>
|
||
<span>H: <strong id="priority-high-count">0</strong></span>
|
||
<span>M: <strong id="priority-medium-count">0</strong></span>
|
||
<span>L: <strong id="priority-low-count">0</strong></span>
|
||
</div>
|
||
<div class="household-priority-list" id="household-priority-list" style="max-height: 80px; overflow-y: auto;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Map Container - displayed when peta tab is active -->
|
||
<div id="peta-map-container" style="display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1;"></div>
|
||
|
||
<!-- Map shortcut buttons (top-right corner of the map) -->
|
||
<div id="map-shortcuts" aria-hidden="false">
|
||
<button id="shortcut-point" class="map-shortcut-btn" title="Add Point">📍</button>
|
||
<button id="shortcut-masjid" class="map-shortcut-btn" title="Add Masjid">🕌</button>
|
||
<button id="shortcut-need" class="map-shortcut-btn" title="Add Need">⚕️</button>
|
||
<button id="shortcut-line" class="map-shortcut-btn" title="Draw Line">🛣️</button>
|
||
<button id="shortcut-polygon" class="map-shortcut-btn" title="Draw Polygon">📐</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Dashboard Tab (Hidden - for reference) -->
|
||
<div class="sidebar-content tab-content" id="dashboard-tab" style="display: none;">
|
||
<div class="dashboard-container">
|
||
<div class="dashboard-section">
|
||
<h3 class="dashboard-title">📊 Summary Statistik Kemiskinan</h3>
|
||
<div class="dashboard-stats-grid">
|
||
<div class="dashboard-stat-card">
|
||
<div class="stat-label">Total Keluarga</div>
|
||
<div class="stat-value" id="dash-total-households">0</div>
|
||
</div>
|
||
<div class="dashboard-stat-card">
|
||
<div class="stat-label">Rata-rata Score Kemiskinan</div>
|
||
<div class="stat-value" id="dash-avg-score">0</div>
|
||
</div>
|
||
<div class="dashboard-stat-card">
|
||
<div class="stat-label">Sudah Assist</div>
|
||
<div class="stat-value" id="dash-assisted">0</div>
|
||
</div>
|
||
<div class="dashboard-stat-card">
|
||
<div class="stat-label">% Terassistansi</div>
|
||
<div class="stat-value" id="dash-assisted-pct">0%</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dashboard-section">
|
||
<h3 class="dashboard-title">🎯 Status Verifikasi</h3>
|
||
<div class="dashboard-status-list" id="dash-status-list"></div>
|
||
</div>
|
||
|
||
<div class="dashboard-section">
|
||
<h3 class="dashboard-title">🔺 Prioritas Intervensi</h3>
|
||
<div class="dashboard-priority-list" id="dash-priority-list"></div>
|
||
</div>
|
||
|
||
<div class="dashboard-section">
|
||
<h3 class="dashboard-title">🗺️ Statistik per Area</h3>
|
||
<div class="dashboard-area-list" id="dash-area-list"></div>
|
||
</div>
|
||
|
||
<button type="button" class="btn-secondary" onclick="refreshDashboard()" style="width: 100%;">
|
||
🔄 Refresh Dashboard
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Managemen Tab (new) -->
|
||
<div class="sidebar-content tab-content" id="managemen-tab" style="display: none;">
|
||
<div class="management-panel" style="padding: 12px;">
|
||
<h3>🔧 Managemen Point Berkebutuhan</h3>
|
||
<p style="font-size:12px; color: rgba(255,255,255,0.8);">Daftar point berkebutuhan (preview). Tampilkan 10 item per halaman.</p>
|
||
|
||
<div class="management-needpoints-section" style="margin-top:12px;">
|
||
<div class="household-list-viewport" id="management-needpoint-list" style="min-height:200px;">
|
||
<!-- need point items injected here -->
|
||
</div>
|
||
<div class="management-needpoint-nav" style="margin-top:10px; display:flex; align-items:center; justify-content:space-between; gap:10px;">
|
||
<button class="carousel-arrow left" id="needpoint-prev">◀ Previous</button>
|
||
<div id="management-needpoint-pager" style="font-size:12px; color: rgba(255,255,255,0.82);"></div>
|
||
<button class="carousel-arrow right" id="needpoint-next">Next ▶</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="management-score-preview" style="margin-top:14px;">
|
||
<div class="management-score-preview-header">
|
||
<h4>Preview Skor Prioritas Household</h4>
|
||
<button class="btn-primary" id="manage-compute-score-btn">Hitung Skor</button>
|
||
</div>
|
||
<div class="management-score-grid">
|
||
<div class="score-chip assisted">
|
||
<div class="score-chip-label">Assisted</div>
|
||
<div class="score-chip-value" id="mgmt-assisted-count">0</div>
|
||
</div>
|
||
<div class="score-chip very-high">
|
||
<div class="score-chip-label">Very High</div>
|
||
<div class="score-chip-value" id="mgmt-priority-very-high-count">0</div>
|
||
</div>
|
||
<div class="score-chip high">
|
||
<div class="score-chip-label">High</div>
|
||
<div class="score-chip-value" id="mgmt-priority-high-count">0</div>
|
||
</div>
|
||
<div class="score-chip medium">
|
||
<div class="score-chip-label">Medium</div>
|
||
<div class="score-chip-value" id="mgmt-priority-medium-count">0</div>
|
||
</div>
|
||
<div class="score-chip low">
|
||
<div class="score-chip-label">Low</div>
|
||
<div class="score-chip-value" id="mgmt-priority-low-count">0</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Old Navigation Tabs (Hidden) -->
|
||
<div class="sidebar-content tab-content" id="roads-tab" style="display: none;">
|
||
<div class="stats-card">
|
||
<div class="stat-number" id="line-count">0</div>
|
||
<div class="stat-label">Roads</div>
|
||
</div>
|
||
|
||
<!-- Search & Filter Panel for Roads -->
|
||
<details class="filter-group" open>
|
||
<summary class="filter-title">🔍 Search & Filter</summary>
|
||
<div class="filter-content">
|
||
<div class="form-group">
|
||
<label for="roads-search">Search by Name</label>
|
||
<input type="text" id="roads-search" placeholder="Search roads...">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="roads-date-from">Created From</label>
|
||
<input type="date" id="roads-date-from">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="roads-date-to">Created To</label>
|
||
<input type="date" id="roads-date-to">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="roads-condition">Condition Status</label>
|
||
<select id="roads-condition">
|
||
<option value="">All Conditions</option>
|
||
<option value="normal">Normal</option>
|
||
<option value="minor_damage">Minor Damage</option>
|
||
<option value="major_damage">Major Damage</option>
|
||
</select>
|
||
</div>
|
||
<div class="filter-actions">
|
||
<button class="btn-small btn-primary" onclick="applyRoadsFilter()">Apply</button>
|
||
<button class="btn-small btn-secondary" onclick="clearRoadsFilter()">Clear</button>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
|
||
<button id="draw-line-btn" class="btn-primary btn-lg" onclick="enableLineDrawMode()">
|
||
<span class="btn-icon">🛣️</span>
|
||
Draw Road
|
||
</button>
|
||
|
||
<div class="color-legend">
|
||
<div class="legend-title">Road Types</div>
|
||
<div class="legend-item">
|
||
<div class="legend-color" style="background-color: #4CAF50;"></div>
|
||
<span>National (Nasional)</span>
|
||
</div>
|
||
<div class="legend-item">
|
||
<div class="legend-color" style="background-color: #2196F3;"></div>
|
||
<span>Provincial (Provinsi)</span>
|
||
</div>
|
||
<div class="legend-item">
|
||
<div class="legend-color" style="background-color: #FF9800;"></div>
|
||
<span>District (Kabupaten)</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="instructions-box">
|
||
<h3>How to Draw Roads</h3>
|
||
<div class="instructions-list">
|
||
<div class="instruction-item">
|
||
<span class="instruction-num">1</span>
|
||
<span>Click "Draw Road" button</span>
|
||
</div>
|
||
<div class="instruction-item">
|
||
<span class="instruction-num">2</span>
|
||
<span>Click map points to draw the road</span>
|
||
</div>
|
||
<div class="instruction-item">
|
||
<span class="instruction-num">3</span>
|
||
<span>Double-click to finish or click Finish button</span>
|
||
</div>
|
||
<div class="instruction-item">
|
||
<span class="instruction-num">4</span>
|
||
<span>Select road type and save</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-box">
|
||
<h3>💡 Length Auto-Calculated</h3>
|
||
<p>Road length is automatically calculated based on the points you draw. No manual input needed!</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Parcels Tab (Hidden) -->
|
||
<div class="sidebar-content tab-content" id="parcels-tab" style="display: none;">
|
||
<div class="stats-card">
|
||
<div class="stat-number" id="polygon-count">0</div>
|
||
<div class="stat-label">Parcels</div>
|
||
</div>
|
||
|
||
<!-- Search & Filter Panel for Parcels -->
|
||
<details class="filter-group" open>
|
||
<summary class="filter-title">🔍 Search & Filter</summary>
|
||
<div class="filter-content">
|
||
<div class="form-group">
|
||
<label for="parcels-search">Search by Name</label>
|
||
<input type="text" id="parcels-search" placeholder="Search parcels...">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="parcels-date-from">Created From</label>
|
||
<input type="date" id="parcels-date-from">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="parcels-date-to">Created To</label>
|
||
<input type="date" id="parcels-date-to">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="parcels-certificate">Certificate Type</label>
|
||
<select id="parcels-certificate">
|
||
<option value="">All Types</option>
|
||
<option value="SHM">SHM (Hak Milik)</option>
|
||
<option value="HGB">HGB (Hak Guna Bangunan)</option>
|
||
<option value="HGU">HGU (Hak Guna Usaha)</option>
|
||
<option value="HP">HP (Hak Pakai)</option>
|
||
</select>
|
||
</div>
|
||
<div class="filter-actions">
|
||
<button class="btn-small btn-primary" onclick="applyParcelsFilter()">Apply</button>
|
||
<button class="btn-small btn-secondary" onclick="clearParcelsFilter()">Clear</button>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
|
||
<button id="draw-polygon-btn" class="btn-primary btn-lg" onclick="enablePolygonDrawMode()">
|
||
<span class="btn-icon">🏞️</span>
|
||
Draw Parcel
|
||
</button>
|
||
|
||
<div class="color-legend">
|
||
<div class="legend-title">Certificate Types</div>
|
||
<div class="legend-item">
|
||
<div class="legend-color" style="background-color: #4CAF50;"></div>
|
||
<span>SHM (Hak Milik)</span>
|
||
</div>
|
||
<div class="legend-item">
|
||
<div class="legend-color" style="background-color: #2196F3;"></div>
|
||
<span>HGB (Hak Guna Bangunan)</span>
|
||
</div>
|
||
<div class="legend-item">
|
||
<div class="legend-color" style="background-color: #FF9800;"></div>
|
||
<span>HGU (Hak Guna Usaha)</span>
|
||
</div>
|
||
<div class="legend-item">
|
||
<div class="legend-color" style="background-color: #9C27B0;"></div>
|
||
<span>HP (Hak Pakai)</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="instructions-box">
|
||
<h3>How to Draw Parcels</h3>
|
||
<div class="instructions-list">
|
||
<div class="instruction-item">
|
||
<span class="instruction-num">1</span>
|
||
<span>Click "Draw Parcel" button</span>
|
||
</div>
|
||
<div class="instruction-item">
|
||
<span class="instruction-num">2</span>
|
||
<span>Click map points to draw parcel boundary</span>
|
||
</div>
|
||
<div class="instruction-item">
|
||
<span class="instruction-num">3</span>
|
||
<span>Right-click to finish or click Finish button</span>
|
||
</div>
|
||
<div class="instruction-item">
|
||
<span class="instruction-num">4</span>
|
||
<span>Select certificate type and save</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-box">
|
||
<h3>💡 Area Auto-Calculated</h3>
|
||
<p>Parcel area is automatically calculated based on the boundary you draw. No manual input needed!</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Pontianak Choropleth Map Tab -->
|
||
<div class="sidebar-content tab-content" id="pontianak-tab">
|
||
<div class="stats-card">
|
||
<div class="stat-label">Pontianak Choropleth Map</div>
|
||
</div>
|
||
|
||
<!-- Layer Selector -->
|
||
<div class="layer-selector">
|
||
<div class="layer-title">📊 Data Layers</div>
|
||
<div class="layer-options">
|
||
<!-- Data Visualization Layers -->
|
||
<div class="layer-group-title">Data Visualization</div>
|
||
|
||
<label class="layer-option">
|
||
<input type="checkbox" value="population" onchange="toggleChoroplethLayer('population')">
|
||
Population Density
|
||
</label>
|
||
|
||
<label class="layer-option">
|
||
<input type="checkbox" value="road_density" onchange="toggleChoroplethLayer('road_density')">
|
||
Road Network Density
|
||
</label>
|
||
|
||
<label class="layer-option">
|
||
<input type="checkbox" value="damaged_roads_density" onchange="toggleChoroplethLayer('damaged_roads_density')">
|
||
Damaged Roads Density
|
||
</label>
|
||
|
||
<!-- Reference Layers -->
|
||
<div class="layer-group-title">Reference Layers</div>
|
||
|
||
<label class="layer-option">
|
||
<input type="checkbox" value="city_boundary" onchange="toggleChoroplethLayer('city_boundary')">
|
||
🏙️ City Boundary
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Legend -->
|
||
<div class="choropleth-legend" id="choropleth-legend">
|
||
<!-- Dynamically populated -->
|
||
</div>
|
||
|
||
<!-- Export Button -->
|
||
<button class="btn-primary btn-lg" onclick="exportChoroplethGeoJSON()">
|
||
<span class="btn-icon">📥</span>
|
||
Export GeoJSON
|
||
</button>
|
||
|
||
<div class="info-box">
|
||
<h3>💡 About This Map</h3>
|
||
<p>Interactive choropleth visualization of Pontianak administrative areas with multiple data layers including population density, road network intensity, and damaged roads distribution.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- User Management Tab (Admin Only) -->
|
||
<div class="sidebar-content tab-content" id="users-tab">
|
||
<div class="admin-panel users-panel-shell">
|
||
<div class="users-hero">
|
||
<div class="users-hero-copy">
|
||
<div class="users-kicker">Admin Center</div>
|
||
<h3 class="dashboard-title">👥 Manajemen Pengguna</h3>
|
||
<p class="users-hero-text">Kelola akun petugas, pimpinan, dan admin dengan tampilan yang lebih rapi dan cepat dibaca.</p>
|
||
</div>
|
||
<div class="users-hero-badges">
|
||
<div class="users-mini-stat">
|
||
<span class="users-mini-stat-label">Aktif</span>
|
||
<strong id="users-active-count">0</strong>
|
||
</div>
|
||
<div class="users-mini-stat">
|
||
<span class="users-mini-stat-label">Nonaktif</span>
|
||
<strong id="users-inactive-count">0</strong>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="users-section-card">
|
||
<div class="users-section-header">
|
||
<h4>Tambah Pengguna</h4>
|
||
<span class="users-section-note">Akun baru akan langsung muncul di daftar bawah.</span>
|
||
</div>
|
||
|
||
<div class="users-form-grid">
|
||
<div class="form-group">
|
||
<label for="new-user-username">Username</label>
|
||
<input type="text" id="new-user-username" placeholder="Masukkan username">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="new-user-email">Email</label>
|
||
<input type="email" id="new-user-email" placeholder="user@example.com">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="new-user-password">Password Awal</label>
|
||
<input type="password" id="new-user-password" placeholder="Minimal 6 karakter">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="new-user-role">Peran</label>
|
||
<select id="new-user-role">
|
||
<option value="Petugas">Petugas Data</option>
|
||
<option value="Pimpinan">Pimpinan</option>
|
||
<option value="Admin">Admin</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<button type="button" class="btn-primary users-create-btn" onclick="createNewUser()">
|
||
➕ Buat Pengguna Baru
|
||
</button>
|
||
|
||
<div id="user-creation-result" class="users-result" style="display: none;"></div>
|
||
</div>
|
||
|
||
<div class="users-section-card users-list-card">
|
||
<div class="users-section-header">
|
||
<h4>Daftar Pengguna</h4>
|
||
<button type="button" class="btn-secondary users-refresh-btn" onclick="loadUsersList()">
|
||
🔄 Refresh Daftar
|
||
</button>
|
||
</div>
|
||
<div class="users-list" id="users-list"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Configuration Tab (Admin Only) -->
|
||
<div class="sidebar-content tab-content" id="konfigurasi-tab">
|
||
<div class="admin-panel">
|
||
<h3 class="dashboard-title">⚙️ Konfigurasi</h3>
|
||
|
||
<div class="form-group">
|
||
<label for="target-nasional-input">Target Nasional (%)</label>
|
||
<input type="number" id="target-nasional-input" min="0" max="100" step="0.01" placeholder="Masukkan target nasional">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="population-reference-input">Total Populasi Indonesia</label>
|
||
<input type="number" id="population-reference-input" min="1" step="1" placeholder="288315899">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>Referensi Populasi Indonesia</label>
|
||
<input type="text" value="288.315.899 jiwa" readonly>
|
||
</div>
|
||
|
||
<button type="button" class="btn-primary" id="save-configuration-btn" style="width: 100%;">
|
||
💾 Simpan Konfigurasi
|
||
</button>
|
||
|
||
<div id="configuration-result" style="display: none; margin-top: 10px; padding: 10px; border-radius: 4px;"></div>
|
||
|
||
<hr style="border:0; border-top:1px solid rgba(0,0,0,0.06); margin:12px 0;">
|
||
|
||
<div class="form-group">
|
||
<label for="rendering-mode-select">Rendering Mode</label>
|
||
<select id="rendering-mode-select">
|
||
<option value="auto">Auto (recommended)</option>
|
||
<option value="high">High (show more markers)</option>
|
||
<option value="medium">Medium</option>
|
||
<option value="low">Low (canvas-only)</option>
|
||
</select>
|
||
<p id="rendering-mode-hint" style="font-size:12px; color: rgba(0,0,0,0.6); margin-top:6px;">Mode akan mempengaruhi bagaimana titik berkebutuhan dirender pada peta.</p>
|
||
</div>
|
||
|
||
<div class="form-group" style="display:flex; gap:8px;">
|
||
<button class="btn-secondary" id="refresh-needpoints-btn">Refresh Need Points</button>
|
||
<button class="btn-secondary" id="export-needpoints-btn" onclick="downloadGeojson()">Export GeoJSON</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- Main Content -->
|
||
<main class="main-content">
|
||
<div id="map"></div>
|
||
</main>
|
||
</div>
|
||
|
||
<!-- Add Point Modal -->
|
||
<div id="point-modal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2 id="modal-title">Add New Point</h2>
|
||
<span class="close">×</span>
|
||
</div>
|
||
|
||
<form id="point-form">
|
||
<div class="form-group">
|
||
<label for="point-name">Point/Building Name *</label>
|
||
<input type="text" id="point-name" name="name" required
|
||
placeholder="e.g., Coffee Shop, Hospital, Restaurant" autofocus>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="point-nomor-spbu">Nomor SPBU</label>
|
||
<input type="text" id="point-nomor-spbu" name="nomor_spbu"
|
||
placeholder="e.g., 34.56.100 or Station ID" >
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="point-latitude">Latitude *</label>
|
||
<input type="number" id="point-latitude" name="latitude" required
|
||
step="any" placeholder="e.g., 37.7749" readonly-display>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="point-longitude">Longitude *</label>
|
||
<input type="number" id="point-longitude" name="longitude" required
|
||
step="any" placeholder="e.g., -122.4194" readonly-display>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group checkbox-group">
|
||
<label class="checkbox-label" for="point-24hours">
|
||
<input type="checkbox" id="point-24hours" name="open_24_hours">
|
||
<span>Open 24 Hours</span>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="form-info" id="form-info"></div>
|
||
|
||
<div class="form-actions">
|
||
<button type="button" class="btn-secondary" onclick="closePointModal()">Cancel</button>
|
||
<button type="submit" class="btn-primary">Save Point</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Edit Point Modal -->
|
||
<div id="edit-modal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2 id="edit-modal-title">Edit Point</h2>
|
||
<span class="close" onclick="closeEditModal()">×</span>
|
||
</div>
|
||
|
||
<form id="edit-form">
|
||
<div class="form-group">
|
||
<label for="edit-name">Point/Building Name *</label>
|
||
<input type="text" id="edit-name" name="name" required
|
||
placeholder="e.g., Coffee Shop, Hospital, Restaurant">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="edit-nomor-spbu">Nomor SPBU</label>
|
||
<input type="text" id="edit-nomor-spbu" name="nomor_spbu"
|
||
placeholder="e.g., 34.56.100 or Station ID" >
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="edit-latitude">Latitude *</label>
|
||
<input type="number" id="edit-latitude" name="latitude" required
|
||
step="any" placeholder="e.g., 37.7749">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-longitude">Longitude *</label>
|
||
<input type="number" id="edit-longitude" name="longitude" required
|
||
step="any" placeholder="e.g., -122.4194">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group checkbox-group">
|
||
<label class="checkbox-label" for="edit-24hours">
|
||
<input type="checkbox" id="edit-24hours" name="open_24_hours">
|
||
<span>Open 24 Hours</span>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="button" class="btn-secondary" onclick="closeEditModal()">Cancel</button>
|
||
<button type="submit" class="btn-primary">Save Changes</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Create Masjid Modal -->
|
||
<div id="masjid-modal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>Create Masjid</h2>
|
||
<span class="close" onclick="closeMasjidModal()">×</span>
|
||
</div>
|
||
|
||
<form id="masjid-form">
|
||
<div class="form-group">
|
||
<label for="masjid-name">Masjid Name *</label>
|
||
<input type="text" id="masjid-name" required placeholder="e.g., Masjid Al-Ikhlas">
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="masjid-latitude">Latitude *</label>
|
||
<input type="number" id="masjid-latitude" required step="any" placeholder="e.g., -0.0263">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="masjid-longitude">Longitude *</label>
|
||
<input type="number" id="masjid-longitude" required step="any" placeholder="e.g., 109.3425">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="masjid-radius">Radius (meters)</label>
|
||
<input type="number" id="masjid-radius" step="1" min="50" max="5000" placeholder="Default 500 if empty">
|
||
<small>Jika kosong, radius otomatis 500m.</small>
|
||
</div>
|
||
|
||
<div class="form-info" id="masjid-form-info"></div>
|
||
|
||
<div class="form-actions">
|
||
<button type="button" class="btn-secondary" onclick="closeMasjidModal()">Cancel</button>
|
||
<button type="submit" class="btn-primary">Save Masjid</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Edit Masjid Modal -->
|
||
<div id="edit-masjid-modal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>Edit Masjid</h2>
|
||
<span class="close" onclick="closeEditMasjidModal()">×</span>
|
||
</div>
|
||
|
||
<form id="edit-masjid-form">
|
||
<div class="form-group">
|
||
<label for="edit-masjid-name">Masjid Name *</label>
|
||
<input type="text" id="edit-masjid-name" required placeholder="e.g., Masjid Al-Ikhlas">
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="edit-masjid-latitude">Latitude *</label>
|
||
<input type="number" id="edit-masjid-latitude" required step="any">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-masjid-longitude">Longitude *</label>
|
||
<input type="number" id="edit-masjid-longitude" required step="any">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="edit-masjid-radius">Radius (meters)</label>
|
||
<input type="number" id="edit-masjid-radius" step="1" min="50" max="5000" placeholder="Default 500 if empty">
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="button" class="btn-secondary" onclick="closeEditMasjidModal()">Cancel</button>
|
||
<button type="submit" class="btn-primary">Save Changes</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Create Point Berkebutuhan Modal -->
|
||
<div id="need-point-modal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>Create Point Berkebutuhan</h2>
|
||
<span class="close" onclick="closeNeedPointModal()">×</span>
|
||
</div>
|
||
|
||
<form id="need-point-form">
|
||
<div class="form-group">
|
||
<label for="need-point-name">Point Name *</label>
|
||
<input type="text" id="need-point-name" required placeholder="e.g., Titik Kursi Roda RT 05">
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="need-point-latitude">Latitude *</label>
|
||
<input type="number" id="need-point-latitude" required step="any" placeholder="e.g., -0.0263">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="need-point-longitude">Longitude *</label>
|
||
<input type="number" id="need-point-longitude" required step="any" placeholder="e.g., 109.3425">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-info" id="need-point-form-info"></div>
|
||
|
||
<div class="form-group">
|
||
<label for="need-point-household">Nama Rumah / Keluarga</label>
|
||
<input type="text" id="need-point-household" placeholder="Opsional - nama rumah/keluarga">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="need-point-head">Kepala Rumah</label>
|
||
<input type="text" id="need-point-head" placeholder="Opsional - nama kepala keluarga">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="need-point-economic">Keadaan Ekonomi</label>
|
||
<select id="need-point-economic">
|
||
<option value="sangat_miskin">Sangat Miskin</option>
|
||
<option value="miskin">Miskin</option>
|
||
<option value="rentan">Rentan</option>
|
||
<option value="cukup">Cukup</option>
|
||
<option value="baik">Baik</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="button" class="btn-secondary" onclick="closeNeedPointModal()">Cancel</button>
|
||
<button type="submit" class="btn-primary">Save Point Berkebutuhan</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Edit Point Berkebutuhan Modal -->
|
||
<div id="edit-need-point-modal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>Edit Point Berkebutuhan</h2>
|
||
<span class="close" onclick="closeEditNeedPointModal()">×</span>
|
||
</div>
|
||
|
||
<form id="edit-need-point-form">
|
||
<div class="form-group">
|
||
<label for="edit-need-point-name">Point Name *</label>
|
||
<input type="text" id="edit-need-point-name" required placeholder="e.g., Titik Kursi Roda RT 05">
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="edit-need-point-latitude">Latitude *</label>
|
||
<input type="number" id="edit-need-point-latitude" required step="any">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-need-point-longitude">Longitude *</label>
|
||
<input type="number" id="edit-need-point-longitude" required step="any">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="edit-need-point-masjid">Masjid Parent (Auto)</label>
|
||
<input type="text" id="edit-need-point-masjid" readonly>
|
||
<small>Parent akan ditentukan otomatis ke masjid terdekat yang mencakup titik.</small>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="edit-need-point-household">Nama Rumah / Keluarga</label>
|
||
<input type="text" id="edit-need-point-household" placeholder="Nama rumah/keluarga">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="edit-need-point-head">Kepala Rumah</label>
|
||
<input type="text" id="edit-need-point-head" placeholder="Nama kepala keluarga">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="edit-need-point-economic">Keadaan Ekonomi</label>
|
||
<select id="edit-need-point-economic">
|
||
<option value="sangat_miskin">Sangat Miskin</option>
|
||
<option value="miskin">Miskin</option>
|
||
<option value="rentan">Rentan</option>
|
||
<option value="cukup">Cukup</option>
|
||
<option value="baik">Baik</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="button" class="btn-secondary" onclick="closeEditNeedPointModal()">Cancel</button>
|
||
<button type="submit" class="btn-primary">Save Changes</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Create Household Modal -->
|
||
<div id="household-modal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>Tambah Household</h2>
|
||
<span class="close" onclick="closeHouseholdModal()">×</span>
|
||
</div>
|
||
|
||
<form id="household-form">
|
||
<div class="form-group">
|
||
<label for="household-code">Kode Household (Opsional)</label>
|
||
<input type="text" id="household-code" placeholder="Kosongkan untuk auto-generate">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="household-head-name">Nama Kepala Keluarga *</label>
|
||
<input type="text" id="household-head-name" required placeholder="e.g., Budi Santoso">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="household-nik">NIK (Opsional, akan di-hash)</label>
|
||
<input type="text" id="household-nik" placeholder="16 digit NIK">
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="household-latitude">Latitude *</label>
|
||
<input type="number" id="household-latitude" required step="any" placeholder="e.g., -0.0263">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="household-longitude">Longitude *</label>
|
||
<input type="number" id="household-longitude" required step="any" placeholder="e.g., 109.3425">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="household-monthly-income">Pendapatan Bulanan (Rp)</label>
|
||
<input type="number" id="household-monthly-income" min="0" step="1000" placeholder="e.g., 850000">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="household-dependents-count">Jumlah Tanggungan</label>
|
||
<input type="number" id="household-dependents-count" min="0" max="50" step="1" placeholder="e.g., 3">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="household-housing-score">Skor Kondisi Hunian (1-5)</label>
|
||
<select id="household-housing-score">
|
||
<option value="1">1 - Sangat Buruk</option>
|
||
<option value="2">2 - Buruk</option>
|
||
<option value="3" selected>3 - Sedang</option>
|
||
<option value="4">4 - Baik</option>
|
||
<option value="5">5 - Sangat Baik</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="household-employment-status">Status Pekerjaan</label>
|
||
<select id="household-employment-status">
|
||
<option value="unknown" selected>Unknown</option>
|
||
<option value="formal">Formal</option>
|
||
<option value="informal">Informal</option>
|
||
<option value="unemployed">Unemployed</option>
|
||
<option value="daily_worker">Daily Worker</option>
|
||
<option value="micro_business">Micro Business</option>
|
||
<option value="retired">Retired</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="household-verification-status">Verification Status</label>
|
||
<select id="household-verification-status">
|
||
<option value="unverified" selected>Unverified</option>
|
||
<option value="field_verified">Field Verified</option>
|
||
<option value="admin_approved">Admin Approved</option>
|
||
<option value="needs_review">Needs Review</option>
|
||
<option value="rejected">Rejected</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="household-vulnerability-notes">Catatan Kerentanan</label>
|
||
<textarea id="household-vulnerability-notes" rows="3" placeholder="Catatan kondisi khusus household"></textarea>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="button" class="btn-secondary" onclick="closeHouseholdModal()">Cancel</button>
|
||
<button type="submit" class="btn-primary">Simpan Household</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Create Assistance Distribution Modal -->
|
||
<div id="assistance-modal" class="modal">
|
||
<div class="modal-content modal-content-bantuan modal-content-wide">
|
||
<div class="modal-header bantuan-modal-header">
|
||
<div class="modal-header-copy">
|
||
<div class="modal-kicker">Distribusi bantuan</div>
|
||
<h2>Catat Bantuan</h2>
|
||
<p class="modal-subtitle">Isi data bantuan yang disalurkan ke household terverifikasi.</p>
|
||
</div>
|
||
<span class="close" onclick="closeAssistanceModal()">×</span>
|
||
</div>
|
||
|
||
<div class="bantuan-modal-hero">
|
||
<div class="bantuan-hero-card">
|
||
<span class="bantuan-hero-label">Household</span>
|
||
<strong id="assistance-selected-household-label">Pilih household</strong>
|
||
<small id="assistance-selected-household-meta">Data akan terisi otomatis jika tersedia.</small>
|
||
</div>
|
||
<div class="bantuan-hero-card bantuan-hero-accent">
|
||
<span class="bantuan-hero-label">Status</span>
|
||
<strong>Bantuan Terencana</strong>
|
||
<small>Gunakan data yang jelas agar distribusi mudah dilacak.</small>
|
||
</div>
|
||
</div>
|
||
|
||
<form id="assistance-form" class="bantuan-form">
|
||
<div class="form-group form-group-span-2">
|
||
<label for="assistance-household-id">Household *</label>
|
||
<select id="assistance-household-id" required>
|
||
<option value="">Pilih household...</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="assistance-type">Jenis Bantuan *</label>
|
||
<select id="assistance-type" required>
|
||
<option value="pangan">Pangan</option>
|
||
<option value="tunai">Tunai</option>
|
||
<option value="kesehatan">Kesehatan</option>
|
||
<option value="pendidikan">Pendidikan</option>
|
||
<option value="usaha_mikro">Usaha Mikro</option>
|
||
<option value="lainnya">Lainnya</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="assistance-value">Nilai Bantuan (Rp)</label>
|
||
<input type="number" id="assistance-value" min="0" step="1000" placeholder="e.g., 250000">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="assistance-frequency">Frekuensi</label>
|
||
<select id="assistance-frequency">
|
||
<option value="sekali">Sekali</option>
|
||
<option value="mingguan">Mingguan</option>
|
||
<option value="bulanan">Bulanan</option>
|
||
<option value="triwulanan">Triwulanan</option>
|
||
<option value="tahunan">Tahunan</option>
|
||
<option value="insidental">Insidental</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="assistance-date">Tanggal Distribusi *</label>
|
||
<input type="date" id="assistance-date" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="assistance-delivery-status">Status Distribusi</label>
|
||
<select id="assistance-delivery-status">
|
||
<option value="pending">Pending</option>
|
||
<option value="delivered">Delivered</option>
|
||
<option value="failed">Failed</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="assistance-delivered-by">Disalurkan Oleh</label>
|
||
<input type="text" id="assistance-delivered-by" placeholder="Nama petugas/lembaga">
|
||
</div>
|
||
|
||
<div class="form-group form-group-span-2">
|
||
<label for="assistance-notes">Catatan</label>
|
||
<textarea id="assistance-notes" rows="3" placeholder="Catatan distribusi"></textarea>
|
||
</div>
|
||
|
||
<div class="form-actions form-actions-bantuan form-group-span-2">
|
||
<button type="button" class="btn-secondary" onclick="closeAssistanceModal()">Cancel</button>
|
||
<button type="submit" class="btn-primary">Simpan Bantuan</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bantuan Manage Modal (specific to a need point) -->
|
||
<div id="bantuan-manage-modal" class="modal">
|
||
<div class="modal-content modal-content-bantuan modal-content-manage">
|
||
<div class="modal-header bantuan-modal-header">
|
||
<div class="modal-header-copy">
|
||
<div class="modal-kicker">Kelola bantuan</div>
|
||
<h2>Rencana Distribusi</h2>
|
||
<p class="modal-subtitle">Ikuti alur singkat untuk memastikan bantuan tercatat rapi.</p>
|
||
</div>
|
||
<span class="close" onclick="closeBantuanManageModal()">×</span>
|
||
</div>
|
||
|
||
<div class="bantuan-point-banner">
|
||
<span class="bantuan-point-label">Point</span>
|
||
<span class="bantuan-point-title">-</span>
|
||
</div>
|
||
|
||
<div class="bantuan-instructions">
|
||
<!-- instructions injected by JS -->
|
||
</div>
|
||
|
||
<div class="bantuan-callout">
|
||
Pastikan household ini sudah diverifikasi sebelum bantuan dicatat.
|
||
</div>
|
||
|
||
<div class="modal-actions-split">
|
||
<button class="btn-secondary" onclick="closeBantuanManageModal()">Tutup</button>
|
||
<button class="btn-primary bantuan-open-assistance">Catat Bantuan »</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Create Verification Log Modal -->
|
||
<div id="verification-modal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>Catat Verifikasi</h2>
|
||
<span class="close" onclick="closeVerificationModal()">×</span>
|
||
</div>
|
||
|
||
<form id="verification-form">
|
||
<div class="form-group">
|
||
<label for="verification-household-id">Household *</label>
|
||
<select id="verification-household-id" required>
|
||
<option value="">Pilih household...</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="verification-status">Status Verifikasi *</label>
|
||
<select id="verification-status" required>
|
||
<option value="field_verified">Field Verified</option>
|
||
<option value="admin_approved">Admin Approved</option>
|
||
<option value="needs_review">Needs Review</option>
|
||
<option value="rejected">Rejected</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="verification-verifier-role">Peran Verifikator</label>
|
||
<input type="text" id="verification-verifier-role" placeholder="e.g., field_operator">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="verification-verifier-name">Nama Verifikator *</label>
|
||
<input type="text" id="verification-verifier-name" required placeholder="Nama petugas verifikasi">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="verification-evidence-count">Jumlah Foto Bukti</label>
|
||
<input type="number" id="verification-evidence-count" min="0" max="100" step="1" value="0">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="verification-confidence-score">Skor Kepercayaan Data (0-1)</label>
|
||
<input type="number" id="verification-confidence-score" min="0" max="1" step="0.01" placeholder="e.g., 0.85">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="verification-field-note">Catatan Lapangan</label>
|
||
<textarea id="verification-field-note" rows="3" placeholder="Catatan hasil verifikasi lapangan"></textarea>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="button" class="btn-secondary" onclick="closeVerificationModal()">Cancel</button>
|
||
<button type="submit" class="btn-primary">Simpan Verifikasi</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Line/Road Modal -->
|
||
<div id="line-modal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>Create Road</h2>
|
||
<span class="close" onclick="closeLineModal()">×</span>
|
||
</div>
|
||
|
||
<form id="line-form" onsubmit="event.preventDefault(); submitLineForm();">
|
||
<div class="form-group">
|
||
<label for="line-name">Road Name *</label>
|
||
<input type="text" id="line-name" required placeholder="e.g., Jalan Sudirman" autofocus>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="line-road-type">Road Type *</label>
|
||
<select id="line-road-type" required>
|
||
<option value="">Select Type...</option>
|
||
<option value="Nasional">National Road (Jalan Nasional)</option>
|
||
<option value="Provinsi">Provincial Road (Jalan Provinsi)</option>
|
||
<option value="Kabupaten">District Road (Jalan Kabupaten)</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="line-length">Length (km) - Auto-calculated</label>
|
||
<input type="number" id="line-length" readonly placeholder="Auto-filled" step="0.01">
|
||
<small>Calculated from drawn points</small>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="line-points">Number of Points</label>
|
||
<input type="number" id="line-points" readonly placeholder="Auto-filled">
|
||
</div>
|
||
|
||
<input type="hidden" id="line-coordinates">
|
||
<input type="hidden" id="line-length-meters">
|
||
|
||
<div class="form-actions">
|
||
<button type="button" class="btn-secondary" onclick="closeLineModal()">Cancel</button>
|
||
<button type="submit" class="btn-primary">Save Road</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Edit Line Modal -->
|
||
<div id="edit-line-modal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>Edit Road</h2>
|
||
<span class="close" onclick="closeEditLineModal()">×</span>
|
||
</div>
|
||
|
||
<form id="edit-line-form" onsubmit="event.preventDefault(); saveLineEdit();">
|
||
<input type="hidden" id="current-editing-line-id">
|
||
|
||
<div class="form-group">
|
||
<label for="edit-line-name">Road Name *</label>
|
||
<input type="text" id="edit-line-name" required placeholder="e.g., Jalan Sudirman">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="edit-line-road-type">Road Type *</label>
|
||
<select id="edit-line-road-type" required>
|
||
<option value="Nasional">National Road (Jalan Nasional)</option>
|
||
<option value="Provinsi">Provincial Road (Jalan Provinsi)</option>
|
||
<option value="Kabupaten">District Road (Jalan Kabupaten)</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="edit-line-length">Length (km)</label>
|
||
<input type="number" id="edit-line-length" readonly placeholder="Auto-calculated" step="0.01">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="edit-line-points">Number of Points</label>
|
||
<input type="number" id="edit-line-points" readonly placeholder="Info">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="edit-line-condition">Condition Status *</label>
|
||
<select id="edit-line-condition" required>
|
||
<option value="normal">Normal</option>
|
||
<option value="minor_damage">Minor Damage</option>
|
||
<option value="major_damage">Major Damage</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="button" class="btn-secondary" onclick="closeEditLineModal()">Cancel</button>
|
||
<button type="submit" class="btn-primary">Save Changes</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Polygon/Parcel Modal -->
|
||
<div id="polygon-modal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>Create Land Parcel</h2>
|
||
<span class="close" onclick="closePolygonModal()">×</span>
|
||
</div>
|
||
|
||
<form id="polygon-form" onsubmit="event.preventDefault(); submitPolygonForm();">
|
||
<div class="form-group">
|
||
<label for="polygon-name">Parcel Name *</label>
|
||
<input type="text" id="polygon-name" required placeholder="e.g., Kavling A-01" autofocus>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="polygon-cert-type">Certificate Type *</label>
|
||
<select id="polygon-cert-type" required>
|
||
<option value="">Select Type...</option>
|
||
<option value="SHM">SHM - Hak Milik (Ownership)</option>
|
||
<option value="HGB">HGB - Hak Guna Bangunan (Building Rights)</option>
|
||
<option value="HGU">HGU - Hak Guna Usaha (Use Rights)</option>
|
||
<option value="HP">HP - Hak Pakai (Usage Rights)</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="polygon-area">Area (hectares) - Auto-calculated</label>
|
||
<input type="number" id="polygon-area" readonly placeholder="Auto-filled" step="0.01">
|
||
<small>Calculated from drawn boundary</small>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="polygon-points">Number of Points</label>
|
||
<input type="number" id="polygon-points" readonly placeholder="Auto-filled">
|
||
</div>
|
||
|
||
<input type="hidden" id="polygon-coordinates">
|
||
<input type="hidden" id="polygon-area-sqm">
|
||
|
||
<div class="form-actions">
|
||
<button type="button" class="btn-secondary" onclick="closePolygonModal()">Cancel</button>
|
||
<button type="submit" class="btn-primary">Save Parcel</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Edit Polygon Modal -->
|
||
<div id="edit-polygon-modal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>Edit Land Parcel</h2>
|
||
<span class="close" onclick="closeEditPolygonModal()">×</span>
|
||
</div>
|
||
|
||
<form id="edit-polygon-form" onsubmit="event.preventDefault(); savePolygonEdit();">
|
||
<input type="hidden" id="current-editing-polygon-id">
|
||
|
||
<div class="form-group">
|
||
<label for="edit-polygon-name">Parcel Name *</label>
|
||
<input type="text" id="edit-polygon-name" required placeholder="e.g., Kavling A-01">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="edit-polygon-cert-type">Certificate Type *</label>
|
||
<select id="edit-polygon-cert-type" required>
|
||
<option value="SHM">SHM - Hak Milik (Ownership)</option>
|
||
<option value="HGB">HGB - Hak Guna Bangunan (Building Rights)</option>
|
||
<option value="HGU">HGU - Hak Guna Usaha (Use Rights)</option>
|
||
<option value="HP">HP - Hak Pakai (Usage Rights)</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="edit-polygon-area">Area (hectares)</label>
|
||
<input type="number" id="edit-polygon-area" readonly placeholder="Auto-calculated" step="0.01">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="edit-polygon-points">Number of Points</label>
|
||
<input type="number" id="edit-polygon-points" readonly placeholder="Info">
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="button" class="btn-secondary" onclick="closeEditPolygonModal()">Cancel</button>
|
||
<button type="submit" class="btn-primary">Save Changes</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Drawing Toolbar -->
|
||
<div id="drawing-toolbar" class="drawing-toolbar hidden">
|
||
<div class="drawing-instruction">
|
||
<span id="drawing-instructions">Click map points to draw...</span>
|
||
</div>
|
||
<div class="drawing-progress">
|
||
<span>Points: <span id="point-count">0</span></span>
|
||
</div>
|
||
<div class="drawing-actions">
|
||
<button class="btn-secondary btn-small" id="btn-finish-draw" onclick="completeDrawing()">Finish</button>
|
||
<button class="btn-secondary btn-small" id="btn-cancel-draw" onclick="cancelDrawing()">Cancel</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Leaflet JS -->
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
|
||
|
||
<!-- Custom JS -->
|
||
<script src="js/app.js"></script>
|
||
</body>
|
||
</html>
|