430 lines
20 KiB
HTML
430 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>KSP — Dashboard Pengawasan Program Nasional</title>
|
|
<meta name="description" content="Dashboard monitoring dan pengawasan program-program strategis pemerintahan: MBG, Koperasi Merah Putih, PSN, Hilirisasi, dan Rumah Rakyat.">
|
|
|
|
<!-- Leaflet -->
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
|
|
<!-- Chart.js -->
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
|
|
|
<!-- Design System -->
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
|
|
<div class="app-layout">
|
|
|
|
<!-- ═══ SIDEBAR ═════════════════════════════════════════════════ -->
|
|
<aside class="sidebar">
|
|
<div class="sidebar-logo">
|
|
<div class="logo-icon">🏛️</div>
|
|
<div class="logo-text">
|
|
<div class="logo-title">KANTOR STAF PRESIDEN</div>
|
|
<div class="logo-sub">Dashboard Pengawasan Nasional</div>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="sidebar-nav">
|
|
<div class="nav-section-label">Navigasi Utama</div>
|
|
|
|
<div class="nav-item active" id="nav-dashboard" onclick="navigateTo('dashboard')">
|
|
<span class="nav-item-icon">📊</span>
|
|
<span class="nav-item-label">Overview Nasional</span>
|
|
</div>
|
|
<div class="nav-item" id="nav-programs" onclick="navigateTo('programs')">
|
|
<span class="nav-item-icon">🗂️</span>
|
|
<span class="nav-item-label">Detail Program</span>
|
|
</div>
|
|
<div class="nav-item" id="nav-issues" onclick="navigateTo('issues')">
|
|
<span class="nav-item-icon">⚠️</span>
|
|
<span class="nav-item-label">Manajemen Issue</span>
|
|
<span class="nav-badge" id="issues-badge">0</span>
|
|
</div>
|
|
<div class="nav-item" id="nav-survey" onclick="navigateTo('survey')">
|
|
<span class="nav-item-icon">📋</span>
|
|
<span class="nav-item-label">Survey Lapangan</span>
|
|
</div>
|
|
<div class="nav-item" id="nav-escalasi" onclick="navigateTo('escalasi')">
|
|
<span class="nav-item-icon">🔺</span>
|
|
<span class="nav-item-label">Eskalasi</span>
|
|
</div>
|
|
<div class="nav-item" id="nav-integration" onclick="navigateTo('integration')">
|
|
<span class="nav-item-icon">🧩</span>
|
|
<span class="nav-item-label">Arsitektur Platform</span>
|
|
</div>
|
|
|
|
<div class="nav-section-label" style="margin-top:8px;">Filter Program</div>
|
|
|
|
<div class="nav-item" id="nav-filter-all" onclick="setNavProgramFilter('all', this)">
|
|
<span class="nav-item-icon">🌐</span>
|
|
<span class="nav-item-label">Semua Program</span>
|
|
</div>
|
|
<div class="nav-item" id="nav-filter-mbg" onclick="setNavProgramFilter('mbg', this)">
|
|
<span class="nav-item-icon">🍱</span>
|
|
<span class="nav-item-label">Makan Bergizi Gratis</span>
|
|
</div>
|
|
<div class="nav-item" id="nav-filter-koperasi" onclick="setNavProgramFilter('koperasi', this)">
|
|
<span class="nav-item-icon">🏪</span>
|
|
<span class="nav-item-label">Koperasi Merah Putih</span>
|
|
</div>
|
|
<div class="nav-item" id="nav-filter-psn" onclick="setNavProgramFilter('psn', this)">
|
|
<span class="nav-item-icon">🏗️</span>
|
|
<span class="nav-item-label">Proyek Strategis (PSN)</span>
|
|
</div>
|
|
<div class="nav-item" id="nav-filter-hilirisasi" onclick="setNavProgramFilter('hilirisasi', this)">
|
|
<span class="nav-item-icon">⚙️</span>
|
|
<span class="nav-item-label">Hilirisasi Industri</span>
|
|
</div>
|
|
<div class="nav-item" id="nav-filter-rumah" onclick="setNavProgramFilter('rumah', this)">
|
|
<span class="nav-item-icon">🏠</span>
|
|
<span class="nav-item-label">Rumah Rakyat</span>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="sidebar-footer">
|
|
<div class="sidebar-user">
|
|
<div class="user-avatar">KSP</div>
|
|
<div class="user-info">
|
|
<div class="user-name">Admin KSP</div>
|
|
<div class="user-role">Div. Pengawasan Nasional</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- ═══ MAIN AREA ════════════════════════════════════════════════ -->
|
|
<div class="main-area">
|
|
|
|
<!-- TOPBAR -->
|
|
<header class="topbar">
|
|
<div class="topbar-left">
|
|
<div>
|
|
<div class="page-title" id="topbar-title">Overview Nasional</div>
|
|
<div class="page-subtitle" id="topbar-sub">Pemantauan real-time seluruh program strategis pemerintah</div>
|
|
</div>
|
|
</div>
|
|
<div class="topbar-right" style="gap:10px;">
|
|
<div class="live-pill">
|
|
<div class="live-dot"></div>
|
|
<span class="live-text">LIVE DATA</span>
|
|
</div>
|
|
<div class="clock-widget" id="clock-widget">
|
|
<div class="clock-time" id="clock-time">00:00:00</div>
|
|
<div class="clock-date" id="clock-date">Senin, 1 Jan 2026</div>
|
|
</div>
|
|
<div class="topbar-actions-area" style="position:relative; display:flex; gap:8px;">
|
|
<button class="notif-btn" id="theme-toggle-btn" onclick="toggleTheme()" style="font-size:14px;" title="Ubah Tema">
|
|
☀️
|
|
</button>
|
|
<button class="notif-btn" id="notif-btn" onclick="toggleNotifDropdown()">
|
|
🔔
|
|
<div class="notif-dot" id="notif-dot"></div>
|
|
</button>
|
|
<!-- Notification Dropdown -->
|
|
<div class="notif-dropdown hidden" id="notif-dropdown">
|
|
<div class="notif-header flex justify-between items-center">
|
|
<span>Notifikasi</span>
|
|
<button class="btn btn-xs btn-secondary" onclick="markAllRead()">Tandai dibaca</button>
|
|
</div>
|
|
<div id="notif-list"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ═══ PAGE VIEWS ═══════════════════════════════════════════ -->
|
|
<main class="page-content">
|
|
|
|
<!-- DASHBOARD PAGE -->
|
|
<div class="page-view active" id="view-dashboard">
|
|
<!-- KPI Strip -->
|
|
<div style="padding:16px 24px 0;" id="kpi-strip"></div>
|
|
<!-- Map + Side Panel -->
|
|
<div class="dash-body">
|
|
<div class="dash-map-col">
|
|
<div class="map-wrapper" style="min-height:0;">
|
|
<div id="leaflet-map"></div>
|
|
<div class="map-controls" id="map-controls">
|
|
<button class="map-btn active" onclick="applyMapFilter('all',this)">Semua</button>
|
|
<button class="map-btn" onclick="applyMapFilter('mbg',this)">🍱 MBG</button>
|
|
<button class="map-btn" onclick="applyMapFilter('koperasi',this)">🏪 Koperasi</button>
|
|
<button class="map-btn" onclick="applyMapFilter('psn',this)">🏗️ PSN</button>
|
|
<button class="map-btn" onclick="applyMapFilter('hilirisasi',this)">⚙️ Hilirisasi</button>
|
|
<button class="map-btn" onclick="applyMapFilter('rumah',this)">🏠 Rumah</button>
|
|
<button class="map-btn" onclick="applyMapFilter('issues',this)">⚠️ Bermasalah</button>
|
|
</div>
|
|
<div class="map-legend">
|
|
<div class="map-legend-title">Legenda</div>
|
|
<div class="legend-row"><div class="legend-dot" style="background:#22c55e"></div>MBG Aktif</div>
|
|
<div class="legend-row"><div class="legend-dot" style="background:#3b82f6"></div>Koperasi</div>
|
|
<div class="legend-row"><div class="legend-dot" style="background:#f59e0b"></div>PSN</div>
|
|
<div class="legend-row"><div class="legend-dot" style="background:#a855f7"></div>Hilirisasi</div>
|
|
<div class="legend-row"><div class="legend-dot" style="background:#f97316"></div>Rumah Rakyat</div>
|
|
<div class="legend-row"><div class="legend-dot" style="background:#ef4444"></div>Ada Masalah</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dash-side-col" id="dash-side-panel"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PROGRAMS PAGE -->
|
|
<div class="page-view" id="view-programs">
|
|
<div class="program-tabs" id="prog-tabs"></div>
|
|
<div id="prog-bodies"></div>
|
|
</div>
|
|
|
|
<!-- ISSUES PAGE -->
|
|
<div class="page-view" id="view-issues">
|
|
<div class="issues-filters">
|
|
<div class="search-bar" style="flex:1;max-width:300px;">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
|
|
<input type="text" id="issues-search" placeholder="Cari issue, daerah, program..." oninput="applyIssueFilters()">
|
|
</div>
|
|
<select class="form-select" style="width:auto;" id="issues-filter-program" onchange="applyIssueFilters()">
|
|
<option value="all">Semua Program</option>
|
|
<option value="mbg">MBG</option>
|
|
<option value="koperasi">Koperasi</option>
|
|
<option value="psn">PSN</option>
|
|
<option value="hilirisasi">Hilirisasi</option>
|
|
<option value="rumah">Rumah Rakyat</option>
|
|
</select>
|
|
<select class="form-select" style="width:auto;" id="issues-filter-severity" onchange="applyIssueFilters()">
|
|
<option value="all">Semua Tingkat</option>
|
|
<option value="critical">Kritis</option>
|
|
<option value="high">Tinggi</option>
|
|
<option value="medium">Sedang</option>
|
|
<option value="low">Rendah</option>
|
|
</select>
|
|
<div class="view-toggle">
|
|
<button class="view-btn active" id="kanban-view-btn" onclick="switchIssueView('kanban')">Kanban</button>
|
|
<button class="view-btn" id="list-view-btn" onclick="switchIssueView('list')">Tabel</button>
|
|
</div>
|
|
<button class="btn btn-primary btn-sm" onclick="openNewIssueModal()">+ Tambah Issue</button>
|
|
</div>
|
|
<div class="issues-body" id="issues-body"></div>
|
|
</div>
|
|
|
|
<!-- SURVEY PAGE -->
|
|
<div class="page-view" id="view-survey">
|
|
<div class="issues-filters" style="gap:12px;">
|
|
<div class="search-bar" style="flex:1;max-width:300px;">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
|
|
<input type="text" id="survey-search" placeholder="Cari survey, officer, daerah..." oninput="renderSurveyPage()">
|
|
</div>
|
|
<select class="form-select" style="width:auto;" id="survey-filter-status" onchange="renderSurveyPage()">
|
|
<option value="all">Semua Status</option>
|
|
<option value="draft">Draft</option>
|
|
<option value="submitted">Diajukan</option>
|
|
<option value="verified">Diverifikasi</option>
|
|
</select>
|
|
<select class="form-select" style="width:auto;" id="survey-filter-program" onchange="renderSurveyPage()">
|
|
<option value="all">Semua Program</option>
|
|
<option value="mbg">MBG</option>
|
|
<option value="koperasi">Koperasi</option>
|
|
<option value="psn">PSN</option>
|
|
<option value="hilirisasi">Hilirisasi</option>
|
|
<option value="rumah">Rumah Rakyat</option>
|
|
</select>
|
|
<button class="btn btn-primary btn-sm" onclick="openNewSurveyModal()">+ Buat Survey</button>
|
|
</div>
|
|
<div id="survey-body" style="flex:1;overflow-y:auto;padding:16px 24px;"></div>
|
|
</div>
|
|
|
|
<!-- ESCALASI PAGE -->
|
|
<div class="page-view" id="view-escalasi">
|
|
<div style="flex:1;overflow-y:auto;" id="escalasi-body"></div>
|
|
</div>
|
|
|
|
<!-- INTEGRATION INFOGRAPHIC PAGE -->
|
|
<div class="page-view" id="view-integration">
|
|
<div style="flex:1;overflow-y:auto;" id="integration-body"></div>
|
|
</div>
|
|
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══ MODALS ══════════════════════════════════════════════════════ -->
|
|
|
|
<!-- Issue Detail Modal -->
|
|
<div class="modal-overlay" id="issue-detail-modal">
|
|
<div class="modal-box wide">
|
|
<div class="modal-header">
|
|
<div>
|
|
<div style="font-size:11px;color:var(--text-3);font-family:monospace;margin-bottom:4px;" id="md-issue-id">ISS-000</div>
|
|
<div class="modal-title" id="md-issue-title">—</div>
|
|
</div>
|
|
<button class="modal-close" onclick="closeModal('issue-detail-modal')">✕</button>
|
|
</div>
|
|
<div class="modal-body" id="md-issue-body"></div>
|
|
<div class="modal-footer" id="md-issue-footer"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- New Issue Modal -->
|
|
<div class="modal-overlay" id="new-issue-modal">
|
|
<div class="modal-box">
|
|
<div class="modal-header">
|
|
<div class="modal-title">Tambah Issue Baru</div>
|
|
<button class="modal-close" onclick="closeModal('new-issue-modal')">✕</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="new-issue-form" onsubmit="submitNewIssue(event)">
|
|
<div class="flex flex-col gap-3">
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label class="form-label">Program</label>
|
|
<select class="form-select" id="ni-program" required>
|
|
<option value="">Pilih Program</option>
|
|
<option value="mbg">Makan Bergizi Gratis</option>
|
|
<option value="koperasi">Koperasi Merah Putih</option>
|
|
<option value="psn">PSN</option>
|
|
<option value="hilirisasi">Hilirisasi Industri</option>
|
|
<option value="rumah">Rumah Rakyat</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Tingkat Keparahan</label>
|
|
<select class="form-select" id="ni-severity" required>
|
|
<option value="critical">🔴 Kritis</option>
|
|
<option value="high">🟠 Tinggi</option>
|
|
<option value="medium" selected>🟡 Sedang</option>
|
|
<option value="low">🟢 Rendah</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label class="form-label">Kota/Kabupaten</label>
|
|
<input type="text" class="form-input" id="ni-daerah" placeholder="Contoh: Bandung" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Provinsi</label>
|
|
<input type="text" class="form-input" id="ni-provinsi" placeholder="Contoh: Jawa Barat" required>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Judul Issue</label>
|
|
<input type="text" class="form-input" id="ni-judul" placeholder="Deskripsi singkat masalah yang ditemukan" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Deskripsi Detail</label>
|
|
<textarea class="form-textarea" id="ni-deskripsi" rows="4" placeholder="Jelaskan temuan secara lengkap..." required></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Penugasan Awal (opsional)</label>
|
|
<input type="text" class="form-input" id="ni-assignee" placeholder="Nama tim atau individu yang bertugas">
|
|
</div>
|
|
<div class="modal-footer" style="padding:0;border:none;">
|
|
<button type="button" class="btn btn-secondary" onclick="closeModal('new-issue-modal')">Batal</button>
|
|
<button type="submit" class="btn btn-primary">Simpan Issue</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Survey Detail Modal -->
|
|
<div class="modal-overlay" id="survey-detail-modal">
|
|
<div class="modal-box wide">
|
|
<div class="modal-header">
|
|
<div class="modal-title" id="sd-title">Detail Survey</div>
|
|
<button class="modal-close" onclick="closeModal('survey-detail-modal')">✕</button>
|
|
</div>
|
|
<div class="modal-body" id="sd-body"></div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-secondary" onclick="closeModal('survey-detail-modal')">Tutup</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- New Survey Modal -->
|
|
<div class="modal-overlay" id="new-survey-modal">
|
|
<div class="modal-box">
|
|
<div class="modal-header">
|
|
<div class="modal-title">Buat Survey Lapangan Baru</div>
|
|
<button class="modal-close" onclick="closeModal('new-survey-modal')">✕</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="new-survey-form" onsubmit="submitNewSurvey(event)">
|
|
<div class="flex flex-col gap-3">
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label class="form-label">Terkait Issue</label>
|
|
<select class="form-select" id="ns-issue" required>
|
|
<option value="">Pilih Issue</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Program</label>
|
|
<select class="form-select" id="ns-program">
|
|
<option value="mbg">MBG</option>
|
|
<option value="koperasi">Koperasi</option>
|
|
<option value="psn">PSN</option>
|
|
<option value="hilirisasi">Hilirisasi</option>
|
|
<option value="rumah">Rumah Rakyat</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label class="form-label">Nama Officer</label>
|
|
<input type="text" class="form-input" id="ns-officer" placeholder="Nama lengkap petugas" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Jabatan</label>
|
|
<input type="text" class="form-input" id="ns-jabatan" placeholder="Jabatan/posisi" required>
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label class="form-label">Tanggal Survey</label>
|
|
<input type="date" class="form-input" id="ns-tanggal" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Daerah</label>
|
|
<input type="text" class="form-input" id="ns-daerah" placeholder="Kota/Kabupaten" required>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Temuan Utama</label>
|
|
<textarea class="form-textarea" id="ns-temuan" rows="3" placeholder="Apa yang ditemukan di lapangan?" required></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Rekomendasi Tindak Lanjut</label>
|
|
<textarea class="form-textarea" id="ns-rekomendasi" rows="3" placeholder="Apa rekomendasi yang diberikan?" required></textarea>
|
|
</div>
|
|
<div class="modal-footer" style="padding:0;border:none;">
|
|
<button type="button" class="btn btn-secondary" onclick="closeModal('new-survey-modal')">Batal</button>
|
|
<button type="submit" class="btn btn-primary">Kirim Survey</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast Container -->
|
|
<div class="toast-container" id="toast-container"></div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="data.js"></script>
|
|
<script src="pages/dashboard.js"></script>
|
|
<script src="pages/programs.js"></script>
|
|
<script src="pages/issues.js"></script>
|
|
<script src="pages/survey.js"></script>
|
|
<script src="pages/escalasi.js"></script>
|
|
<script src="pages/integration.js"></script>
|
|
<script src="app.js"></script>
|
|
|
|
</body>
|
|
</html>
|