From 67048eb22ef141b801fad2d9b392f967487f8c77 Mon Sep 17 00:00:00 2001
From: wartana <wartana.wyn@gmail.com>
Date: Sun, 18 Jan 2026 22:07:22 +0800
Subject: [PATCH] add: grafik

---
 home/admin.php | 141 ++++++++++++++++++++++++++-----------------------
 home/kaur.php  | 141 ++++++++++++++++++++++++++-----------------------
 2 files changed, 148 insertions(+), 134 deletions(-)

diff --git a/home/admin.php b/home/admin.php
index c60de25..3391afc 100644
--- a/home/admin.php
+++ b/home/admin.php
@@ -215,74 +215,81 @@
 
 </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="row mt-4">
+    <!-- Left Col: Chart -->
+    <div class="col-lg-6">
+        <div class="card card-info h-100">
+            <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>
+    </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>
+    <!-- Right Col: Demographics -->
+    <div class="col-lg-6">
+        <div class="row">
+            <!-- Balita -->
+            <div class="col-lg-4 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">Info <i class="fas fa-arrow-circle-right"></i></a>
+                </div>
+            </div>
+            <!-- Anak -->
+            <div class="col-lg-4 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">Info <i class="fas fa-arrow-circle-right"></i></a>
+                </div>
+            </div>
+            <!-- Remaja -->
+            <div class="col-lg-4 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">Info <i class="fas fa-arrow-circle-right"></i></a>
+                </div>
+            </div>
+            <!-- Dewasa -->
+            <div class="col-lg-6 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">Info <i class="fas fa-arrow-circle-right"></i></a>
+                </div>
+            </div>
+            <!-- Lansia -->
+            <div class="col-lg-6 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">Info <i class="fas fa-arrow-circle-right"></i></a>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 
 <script>
diff --git a/home/kaur.php b/home/kaur.php
index c60de25..3391afc 100644
--- a/home/kaur.php
+++ b/home/kaur.php
@@ -215,74 +215,81 @@
 
 </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="row mt-4">
+    <!-- Left Col: Chart -->
+    <div class="col-lg-6">
+        <div class="card card-info h-100">
+            <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>
+    </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>
+    <!-- Right Col: Demographics -->
+    <div class="col-lg-6">
+        <div class="row">
+            <!-- Balita -->
+            <div class="col-lg-4 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">Info <i class="fas fa-arrow-circle-right"></i></a>
+                </div>
+            </div>
+            <!-- Anak -->
+            <div class="col-lg-4 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">Info <i class="fas fa-arrow-circle-right"></i></a>
+                </div>
+            </div>
+            <!-- Remaja -->
+            <div class="col-lg-4 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">Info <i class="fas fa-arrow-circle-right"></i></a>
+                </div>
+            </div>
+            <!-- Dewasa -->
+            <div class="col-lg-6 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">Info <i class="fas fa-arrow-circle-right"></i></a>
+                </div>
+            </div>
+            <!-- Lansia -->
+            <div class="col-lg-6 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">Info <i class="fas fa-arrow-circle-right"></i></a>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 
 <script>