mengubah sistem menjadi lebih terfokus ke poverty
This commit is contained in:
Abimanyu Ridho
@@ -0,0 +1,119 @@
|
||||
<div class="dashboard-content">
|
||||
|
||||
<!-- Page Header -->
|
||||
<div class="page-header">
|
||||
<div class="page-title-group">
|
||||
<h1>👥 Daftar Penduduk Miskin</h1>
|
||||
<p>Data lengkap seluruh penduduk miskin yang terdata dalam sistem.</p>
|
||||
</div>
|
||||
<div class="page-actions">
|
||||
<button class="btn btn-ghost" id="btn-export" onclick="exportCSV()">📥 Ekspor CSV</button>
|
||||
<button class="btn btn-primary admin-only" onclick="window.location.href='?page=map'">＋ Tambah Data</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Summary Stats -->
|
||||
<div class="summary-bar" id="summary-bar">
|
||||
<div class="summary-item">
|
||||
<div class="summary-icon purple">👥</div>
|
||||
<div>
|
||||
<div class="summary-val" id="sum-total">—</div>
|
||||
<div class="summary-label">Total KK</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<div class="summary-icon purple">👨👩👧👦</div>
|
||||
<div>
|
||||
<div class="summary-val" id="sum-jiwa">—</div>
|
||||
<div class="summary-label">Total Jiwa</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<div class="summary-icon green">✅</div>
|
||||
<div>
|
||||
<div class="summary-val" id="sum-dalam">—</div>
|
||||
<div class="summary-label">Dalam Radius</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<div class="summary-icon red">❌</div>
|
||||
<div>
|
||||
<div class="summary-val" id="sum-luar">—</div>
|
||||
<div class="summary-label">Luar Radius</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<div class="summary-icon blue">🎁</div>
|
||||
<div>
|
||||
<div class="summary-val" id="sum-bantuan">—</div>
|
||||
<div class="summary-label">Penerima Bantuan</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filter Bar -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-search">
|
||||
<span class="filter-search-icon">⌕</span>
|
||||
<input type="search" id="search-input" placeholder="Cari nama, NIK, atau alamat…" autocomplete="off"
|
||||
oninput="applyFilters()">
|
||||
</div>
|
||||
<select class="filter-select" id="filter-proximity" onchange="applyFilters()">
|
||||
<option value="">Semua Status</option>
|
||||
<option value="dalam_radius">Dalam Radius</option>
|
||||
<option value="luar_radius">Luar Radius</option>
|
||||
</select>
|
||||
<select class="filter-select" id="filter-ri" onchange="applyFilters()">
|
||||
<option value="">Semua Rumah Ibadah</option>
|
||||
</select>
|
||||
<select class="filter-select" id="filter-bantuan" onchange="applyFilters()">
|
||||
<option value="">Semua Bantuan</option>
|
||||
<option value="pernah">Pernah Menerima</option>
|
||||
<option value="belum">Belum Pernah</option>
|
||||
</select>
|
||||
<span class="filter-count" id="filter-count">—</span>
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<div class="table-container">
|
||||
<div class="table-scrollwrap">
|
||||
<table class="pm-table" id="pm-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th onclick="sortBy('nama')">Nama <span class="sort-icon"></span></th>
|
||||
<th onclick="sortBy('nik')">NIK <span class="sort-icon"></span></th>
|
||||
<th onclick="sortBy('jumlah_anggota')">Keluarga <span class="sort-icon"></span></th>
|
||||
<th>Status</th>
|
||||
<th>Rumah Ibadah</th>
|
||||
<th onclick="sortBy('total_bantuan')">Bantuan <span class="sort-icon"></span></th>
|
||||
<th>Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="pm-tbody">
|
||||
<tr>
|
||||
<td colspan="7" class="loading" style="text-align:center;padding:40px"><span class="spinner"></span>
|
||||
Memuat data…</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination" id="pagination" style="display:none">
|
||||
<div class="pagination-info" id="pagination-info"></div>
|
||||
<div class="pagination-btns" id="pagination-btns"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="detail-overlay" id="detail-overlay" onclick="closeDrawer(event)">
|
||||
<div class="detail-drawer" id="detail-drawer">
|
||||
<div class="drawer-head">
|
||||
<h2 id="drawer-title">Detail Penduduk Miskin</h2>
|
||||
<button class="drawer-close" onclick="closeDrawer()">✕</button>
|
||||
</div>
|
||||
<div class="drawer-body" id="drawer-body">
|
||||
<div class="loading-spinner-wrap"><span class="spinner" style="width:20px;height:20px;border-width:3px;"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,114 @@
|
||||
<div class="dashboard-content">
|
||||
|
||||
<!-- Dashboard Header -->
|
||||
<header class="dashboard-header">
|
||||
<div class="dashboard-title">
|
||||
<h1 id="greeting-title">Selamat Datang</h1>
|
||||
<p>Berikut adalah ringkasan data WebGIS Poverty saat ini.</p>
|
||||
</div>
|
||||
<div class="dashboard-date" id="current-date">Rabu, 10 Juni 2026</div>
|
||||
</header>
|
||||
|
||||
<!-- KPI Stat Cards Grid -->
|
||||
<section class="stats-grid">
|
||||
<!-- Stat Card 1 -->
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon purple">👥</div>
|
||||
<div class="stat-details">
|
||||
<div class="stat-label">Penduduk Miskin</div>
|
||||
<div class="stat-val" id="pm-total-kk">0 KK</div>
|
||||
<div class="stat-sub" id="pm-total-jiwa">0 Jiwa terdata</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stat Card 2 -->
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon green">⛪</div>
|
||||
<div class="stat-details">
|
||||
<div class="stat-label">Rumah Ibadah</div>
|
||||
<div class="stat-val" id="ri-total">0</div>
|
||||
<div class="stat-sub">Rumah ibadah terdaftar</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Stat Card 5 -->
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon rose">🎁</div>
|
||||
<div class="stat-details">
|
||||
<div class="stat-label">Bantuan Sosial</div>
|
||||
<div class="stat-val" id="lb-total-count">0 kali</div>
|
||||
<div class="stat-sub" id="lb-total-nilai">Total Rp 0</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Charts Visualization Section Grid -->
|
||||
<section class="charts-grid">
|
||||
<!-- Chart 1: Proximity Analysis -->
|
||||
<div class="chart-card">
|
||||
<h3 class="chart-title">Analisis Kedekatan Warga Miskin (Proximity)</h3>
|
||||
<div class="chart-container">
|
||||
<canvas id="chart-proximity"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chart 2: Aid Distribution Type -->
|
||||
<div class="chart-card">
|
||||
<h3 class="chart-title">Distribusi Tipe Bantuan Sosial</h3>
|
||||
<div class="chart-container">
|
||||
<canvas id="chart-bantuan-tipe"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Data Tables Grid -->
|
||||
<section class="tables-grid">
|
||||
<!-- Table 1: Recent Activity (Log Bantuan Terbaru) -->
|
||||
<div class="table-card">
|
||||
<h3 class="table-title">Aktivitas Penyaluran Bantuan Terbaru</h3>
|
||||
<div class="db-table-wrapper">
|
||||
<table class="db-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Tanggal</th>
|
||||
<th>Penerima</th>
|
||||
<th>Tipe Bantuan</th>
|
||||
<th>Sub Kategori</th>
|
||||
<th>Nilai (Rp)</th>
|
||||
<th>Penyalur</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="table-bantuan-body">
|
||||
<tr>
|
||||
<td colspan="6" class="loading">Memuat data aktivitas...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table 2: Top Active Houses of Worship -->
|
||||
<div class="table-card">
|
||||
<h3 class="table-title">Rumah Ibadah Penyalur Teraktif</h3>
|
||||
<div class="db-table-wrapper">
|
||||
<table class="db-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nama Rumah Ibadah</th>
|
||||
<th>Frekuensi</th>
|
||||
<th>Total Nilai (Rp)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="table-ri-body">
|
||||
<tr>
|
||||
<td colspan="3" class="loading">Memuat data penyalur...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
+110
@@ -0,0 +1,110 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="id">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Masuk - WebGIS Poverty Mapping</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="css/base.css">
|
||||
<link rel="stylesheet" href="css/layout.css">
|
||||
<link rel="stylesheet" href="css/components.css">
|
||||
<style>
|
||||
/* Ensure the login page body is visible immediately */
|
||||
body {
|
||||
display: flex !important;
|
||||
visibility: visible !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="login-body">
|
||||
|
||||
<div class="login-container">
|
||||
<div class="login-header">
|
||||
<span class="login-logo">🗺️</span>
|
||||
<h1>WebGIS Poverty</h1>
|
||||
<p>Sistem Informasi Geografis & Manajemen Kemiskinan</p>
|
||||
</div>
|
||||
|
||||
<div class="login-error" id="login-error-msg"></div>
|
||||
|
||||
<form class="login-form" id="login-form" onsubmit="handleLogin(event)">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="username">Username</label>
|
||||
<input class="form-input" type="text" id="username" autocomplete="username" placeholder="Masukkan username..." required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="password">Password</label>
|
||||
<input class="form-input" type="password" id="password" autocomplete="current-password" placeholder="Masukkan password..." required>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary btn-login" type="submit" id="btn-submit">
|
||||
<span>Masuk</span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Redirect if session is already active
|
||||
(async function() {
|
||||
try {
|
||||
const res = await fetch('api/me.php');
|
||||
const data = await res.json();
|
||||
if (data.status === 'success') {
|
||||
window.location.href = '?page=dashboard';
|
||||
}
|
||||
} catch (e) {}
|
||||
})();
|
||||
|
||||
async function handleLogin(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const errorMsg = document.getElementById('login-error-msg');
|
||||
const btnSubmit = document.getElementById('btn-submit');
|
||||
const usernameInput = document.getElementById('username');
|
||||
const passwordInput = document.getElementById('password');
|
||||
|
||||
errorMsg.style.display = 'none';
|
||||
btnSubmit.disabled = true;
|
||||
btnSubmit.innerHTML = '<span>Memproses...</span>';
|
||||
|
||||
const body = {
|
||||
username: usernameInput.value.trim(),
|
||||
password: passwordInput.value
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch('api/login.php', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(body)
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.status === 'success') {
|
||||
// Success: redirect to default page (map)
|
||||
window.location.href = '?page=dashboard';
|
||||
} else {
|
||||
// Error: show error message
|
||||
errorMsg.textContent = result.message || 'Username atau password salah.';
|
||||
errorMsg.style.display = 'block';
|
||||
btnSubmit.disabled = false;
|
||||
btnSubmit.innerHTML = '<span>Masuk</span>';
|
||||
}
|
||||
} catch (err) {
|
||||
errorMsg.textContent = 'Gagal terhubung ke server. Pastikan Apache & MySQL menyala.';
|
||||
errorMsg.style.display = 'block';
|
||||
btnSubmit.disabled = false;
|
||||
btnSubmit.innerHTML = '<span>Masuk</span>';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,61 @@
|
||||
<div class="dashboard-content">
|
||||
|
||||
<!-- Page Header -->
|
||||
<div class="page-header">
|
||||
<div class="page-title-group">
|
||||
<h1>🏛️ Manajemen Akun Rumah Ibadah</h1>
|
||||
<p>Kelola akun dan pantau statistik penyaluran bantuan masing-masing rumah ibadah.</p>
|
||||
</div>
|
||||
<div class="page-actions">
|
||||
<button class="btn btn-primary" onclick="window.location.href='?page=map#tambah-ri'" id="btn-tambah-ri">
|
||||
＋ Tambah Rumah Ibadah
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filter & Search Bar -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-search">
|
||||
<span class="filter-search-icon">⌕</span>
|
||||
<input type="search" id="search-input" placeholder="Cari nama atau jenis rumah ibadah…" autocomplete="off" oninput="filterCards()">
|
||||
</div>
|
||||
<select class="filter-select" id="filter-jenis" onchange="filterCards()">
|
||||
<option value="">Semua Jenis</option>
|
||||
<option value="Masjid">Masjid</option>
|
||||
<option value="Gereja">Gereja</option>
|
||||
<option value="Pura">Pura</option>
|
||||
<option value="Vihara">Vihara</option>
|
||||
<option value="Klenteng">Klenteng</option>
|
||||
<option value="Lainnya">Lainnya</option>
|
||||
</select>
|
||||
<select class="filter-select" id="filter-akun" onchange="filterCards()">
|
||||
<option value="">Semua Status Akun</option>
|
||||
<option value="active">Akun Aktif</option>
|
||||
<option value="inactive">Belum Ada Akun</option>
|
||||
</select>
|
||||
<span class="filter-count" id="filter-count">—</span>
|
||||
</div>
|
||||
|
||||
<!-- Cards Grid -->
|
||||
<div class="ri-grid" id="ri-grid">
|
||||
<div class="loading-spinner-wrap">
|
||||
<span class="spinner" style="width:20px;height:20px;border-width:3px;"></span>
|
||||
<p style="margin-top:12px">Memuat data rumah ibadah…</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="detail-overlay" id="detail-overlay" onclick="closeDrawer(event)">
|
||||
<div class="detail-drawer" id="detail-drawer">
|
||||
<div class="drawer-head">
|
||||
<h2 id="drawer-title">Detail Rumah Ibadah</h2>
|
||||
<button class="drawer-close" onclick="closeDrawer()">✕</button>
|
||||
</div>
|
||||
<div class="drawer-body" id="drawer-body">
|
||||
<div class="loading-spinner-wrap">
|
||||
<span class="spinner" style="width:20px;height:20px;border-width:3px;"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,35 @@
|
||||
<div id="app">
|
||||
<header id="header">
|
||||
<div class="nav-tabs" role="tablist" aria-label="Pilih layer" style="display:none"></div>
|
||||
|
||||
<div class="header-search" id="header-search">
|
||||
<div class="search-box">
|
||||
<span class="search-icon">⌕</span>
|
||||
<input id="search-input" type="search" autocomplete="off"
|
||||
placeholder="Telusuri Webgis Poverty" aria-label="Cari objek peta" />
|
||||
</div>
|
||||
<div class="search-results" id="search-results" aria-label="Hasil pencarian"></div>
|
||||
</div>
|
||||
|
||||
<div class="header-right">
|
||||
<div class="coord-display" id="coord-display">Lat: - | Lng: -</div>
|
||||
<div class="status-pill"><span id="status-zoom">Zoom: 13</span></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="main">
|
||||
<section id="map-wrap">
|
||||
<div id="instruction-banner"></div>
|
||||
<div id="map"></div>
|
||||
</section>
|
||||
|
||||
<aside id="panel">
|
||||
<div id="panel-head">
|
||||
<h2 id="panel-title">Rumah Ibadah & Kemiskinan</h2>
|
||||
</div>
|
||||
<div id="panel-body">
|
||||
<div class="loading"><span class="spinner"></span>Memuat data...</div>
|
||||
</div>
|
||||
</aside>
|
||||
</main>
|
||||
</div>
|
||||
Reference in New Issue
Block a user