wartana/sidak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Modern Theme and Dashboard Enhancements

Browse Source 
- Implemented Modern Theme (Inter font, Rounded UI, Indigo/White palette)
- Updated Login Page with gradient background and modern card
- Added Age Demographics to Dashboard (Stats count)
- Integrated Chart.js for Population Donut Chart
- Made Dashboard Info Boxes clickable with Age Category filtering
- Updated Resident Data table to support age filtering
This commit is contained in:
wartana
2026-01-18 22:02:48 +08:00
parent 7c71bdc1f9
commit 80951b57a0
6 changed files with 386 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
home/kaur.php
View File

@@ -40,6 +40,24 @@
$pindah=$data['pindah'];
}
// Demografi Umur
$balita = 0; $anak = 0; $remaja = 0; $dewasa = 0; $lansia = 0;
$sql_balita = $koneksi->query("SELECT COUNT(id_pend) as c FROM tb_pdd WHERE TIMESTAMPDIFF(YEAR, tgl_lh, CURDATE()) BETWEEN 0 AND 5 AND status='Ada'");
if($d = $sql_balita->fetch_assoc()) $balita = $d['c'];
$sql_anak = $koneksi->query("SELECT COUNT(id_pend) as c FROM tb_pdd WHERE TIMESTAMPDIFF(YEAR, tgl_lh, CURDATE()) BETWEEN 6 AND 12 AND status='Ada'");
if($d = $sql_anak->fetch_assoc()) $anak = $d['c'];
$sql_remaja = $koneksi->query("SELECT COUNT(id_pend) as c FROM tb_pdd WHERE TIMESTAMPDIFF(YEAR, tgl_lh, CURDATE()) BETWEEN 13 AND 17 AND status='Ada'");
if($d = $sql_remaja->fetch_assoc()) $remaja = $d['c'];
$sql_dewasa = $koneksi->query("SELECT COUNT(id_pend) as c FROM tb_pdd WHERE TIMESTAMPDIFF(YEAR, tgl_lh, CURDATE()) BETWEEN 18 AND 59 AND status='Ada'");
if($d = $sql_dewasa->fetch_assoc()) $dewasa = $d['c'];
$sql_lansia = $koneksi->query("SELECT COUNT(id_pend) as c FROM tb_pdd WHERE TIMESTAMPDIFF(YEAR, tgl_lh, CURDATE()) >= 60 AND status='Ada'");
if($d = $sql_lansia->fetch_assoc()) $lansia = $d['c'];
?>
<div class="row">
@@ -195,4 +213,111 @@
</div>
</div>
</div>
</div>
<h4 class="mt-4 mb-2">Demografi Umur</h4>
<div class="row">
<!-- Balita -->
<div class="col-lg-2 col-6">
<div class="small-box bg-info">
<div class="inner">
<h3><?php echo $balita; ?></h3>
<p>Balita (0-5)</p>
</div>
<div class="icon"><i class="fas fa-baby"></i></div>
<a href="index.php?page=data-pend&kategori=Balita" class="small-box-footer">Selengkapnya <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- Anak -->
<div class="col-lg-2 col-6">
<div class="small-box bg-success">
<div class="inner">
<h3><?php echo $anak; ?></h3>
<p>Anak (6-12)</p>
</div>
<div class="icon"><i class="fas fa-child"></i></div>
<a href="index.php?page=data-pend&kategori=Anak" class="small-box-footer">Selengkapnya <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- Remaja -->
<div class="col-lg-2 col-6">
<div class="small-box bg-purple">
<div class="inner">
<h3><?php echo $remaja; ?></h3>
<p>Remaja (13-17)</p>
</div>
<div class="icon"><i class="fas fa-user-graduate"></i></div>
<a href="index.php?page=data-pend&kategori=Remaja" class="small-box-footer">Selengkapnya <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- Dewasa -->
<div class="col-lg-3 col-6">
<div class="small-box bg-primary">
<div class="inner">
<h3><?php echo $dewasa; ?></h3>
<p>Dewasa (18-59)</p>
</div>
<div class="icon"><i class="fas fa-user-tie"></i></div>
<a href="index.php?page=data-pend&kategori=Dewasa" class="small-box-footer">Selengkapnya <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- Lansia -->
<div class="col-lg-3 col-6">
<div class="small-box bg-secondary">
<div class="inner">
<h3><?php echo $lansia; ?></h3>
<p>Lansia (>60)</p>
</div>
<div class="icon"><i class="fas fa-blind"></i></div>
<a href="index.php?page=data-pend&kategori=Lansia" class="small-box-footer">Selengkapnya <i class="fas fa-arrow-circle-right"></i></a>
</div>
</div>
</div>
<div class="card card-info mt-4">
<div class="card-header">
<h3 class="card-title">
<i class="fas fa-chart-pie"></i> Statistik Penduduk
</h3>
</div>
<div class="card-body">
<canvas id="donutChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
// Data from PHP
var donutChartCanvas = $('#donutChart').get(0).getContext('2d')
var donutData = {
labels: [
'Balita',
'Anak-anak',
'Remaja',
'Dewasa',
'Lansia'
],
datasets: [
{
data: [
<?php echo $balita; ?>,
<?php echo $anak; ?>,
<?php echo $remaja; ?>,
<?php echo $dewasa; ?>,
<?php echo $lansia; ?>
],
backgroundColor : ['#17a2b8', '#28a745', '#6f42c1', '#007bff', '#6c757d'],
}
]
}
var donutOptions = {
maintainAspectRatio : false,
responsive : true,
}
new Chart(donutChartCanvas, {
type: 'doughnut',
data: donutData,
options: donutOptions
})
});
</script>