Abimanyu Ridho
114 lines
3.7 KiB
PHP
114 lines
3.7 KiB
PHP
<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> |