feat: add demografi pekerjaan component and update charts

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
2026-02-11 14:35:46 +08:00
parent ca2f97fa47
commit c4fd7bb784
10 changed files with 1020 additions and 21 deletions
--- a/Dashboard-MD/DEMOGRAFI_KEPENDUDUKAN.md
+++ b/Dashboard-MD/DEMOGRAFI_KEPENDUDUKAN.md
@@ -0,0 +1,347 @@
+# Demografi & Kependudukan – Dashboard Design Specification
+
+Dokumen ini menjelaskan spesifikasi desain halaman **Demografi & Kependudukan** berdasarkan screenshot (11 Feb 2026). Dokumen ini berfungsi sebagai **design + data contract** untuk implementasi frontend dan backend.
+
+---
+
+## 1. Tujuan Halaman
+
+Halaman **Demografi & Kependudukan** digunakan untuk:
+
+* Monitoring kondisi penduduk desa secara ringkas
+* Analisis umur, pekerjaan, agama
+* Distribusi penduduk per wilayah (banjar)
+* Dinamika penduduk (lahir, meninggal, migrasi)
+
+Target user:
+
+* Kepala Desa
+* Admin Kependudukan
+* Perencana Desa
+
+---
+
+## 2. Tata Letak Keseluruhan
+
+### 2.1 Struktur Layout
+
+```
+------------------------------------------------------+
+| Topbar / Header                                      |
+-------------+----------------------------------------+
+| Sidebar     | Main Content                           |
+|             | - KPI Kependudukan                     |
+|             | - Grafik Umur & Pekerjaan              |
+|             | - Agama + Data per Banjar              |
+|             | - Statistik Dinamika                   |
+-------------+----------------------------------------+
+```
+
+* Sidebar: fixed di kiri
+* Header: fixed di atas
+* Konten utama: scroll vertikal
+
+---
+
+## 3. Header (Topbar)
+
+### Komponen
+
+* Judul aplikasi: `Desa Darmasaba`
+* User info:
+
+  * Nama: `I. B. Surya Prabhawa M.`
+  * Role: `Kepala Desa`
+* Ikon:
+
+  * Notifikasi (badge)
+  * Toggle tema
+  * Avatar user
+
+### Gaya
+
+* Background: Biru tua / Navy
+* Teks: Putih
+* Tinggi: ±64px
+
+---
+
+## 4. Sidebar Navigation
+
+### Menu
+
+* Beranda
+* Kinerja Divisi
+* Pengaduan & Layanan Publik
+* Jenna Analytic
+* **Demografi & Kependudukan (active)**
+* Keuangan & Anggaran
+* Bumdes & UMKM Desa
+* Sosial
+* Keamanan
+* Bantuan
+* Pengaturan
+
+### Gaya
+
+* Background: Putih
+* Active state: biru muda + indicator kiri
+* Spacing menu: 12–16px
+
+---
+
+## 5. KPI Kependudukan (Row Atas)
+
+### KPI Cards
+
+1. **Total Penduduk**
+
+   * Value: `5.634`
+   * Sub: Aktif terdaftar
+
+2. **Kepala Keluarga**
+
+   * Value: `1.354`
+   * Sub: Total KK
+
+3. **Kelahiran**
+
+   * Value: `23`
+   * Sub: Tahun ini
+
+4. **Kemiskinan**
+
+   * Value: `324`
+   * Delta: `-10% dari tahun lalu`
+
+### Gaya
+
+* Card putih
+* Border radius: 14–16px
+* Icon lingkaran di kanan
+* Shadow lembut
+
+---
+
+## 6. Grafik Pengelompokan Umur
+
+### Deskripsi
+
+* Tipe: Bar Chart
+* X-axis:
+
+  * 17–25 thn
+  * 26–35 thn
+  * 36–45 thn
+  * 46–55 thn
+  * 56–65 thn
+  * 65+ thn
+* Y-axis: jumlah penduduk
+
+### Gaya
+
+* Warna bar: Navy
+* Grid minimal
+* Tooltip saat hover
+
+### Data
+
+```ts
+{
+  ageRange: string;
+  total: number;
+}
+```
+
+---
+
+## 7. Demografi Pekerjaan
+
+### Deskripsi
+
+* Tipe: Bar Chart
+* Kategori:
+
+  * Sipil
+  * Guru
+  * Petani
+  * Pedagang
+  * Wiraswasta
+
+### Gaya
+
+* Warna bar: Navy
+* Tinggi chart medium
+
+### Data
+
+```ts
+{
+  job: string;
+  total: number;
+}
+```
+
+---
+
+## 8. Distribusi Agama
+
+### Deskripsi
+
+* Tipe: Pie / Donut Chart
+* Kategori:
+
+  * Hindu – 4.234
+  * Islam – 856
+  * Kristen – 412
+  * Buddha – 202
+
+### Gaya
+
+* Warna berbeda per agama
+* Legend di sekitar chart
+
+### Data
+
+```ts
+{
+  religion: string;
+  total: number;
+}
+```
+
+---
+
+## 9. Data per Banjar
+
+### Deskripsi
+
+* Tipe: Table
+* Kolom:
+
+  * Banjar
+  * Penduduk
+  * KK
+  * Miskin
+
+### Contoh Data
+
+* Banjar Darmasaba
+* Banjar Manesa
+* Banjar Cabe
+* Banjar Penenjoan
+* Banjar Baler Pasar
+* Banjar Bucu
+
+### Gaya
+
+* Table bersih
+* Header bold
+* Angka miskin berwarna merah
+
+### Data
+
+```ts
+{
+  banjar: string;
+  population: number;
+  kk: number;
+  poor: number;
+}
+```
+
+---
+
+## 10. Statistik Dinamika Penduduk
+
+### KPI Mini Cards
+
+* Kelahiran: `23`
+* Kematian: `12`
+* Pindah Masuk: `45`
+* Pindah Keluar: `32`
+
+### Gaya
+
+* Card kecil
+* Icon panah / lokasi
+* Warna indikator:
+
+  * Hijau (positif)
+  * Merah (negatif)
+
+---
+
+## 11. Warna & Tema
+
+### Palette
+
+* Primary (Navy): `#1E3A5F`
+* Secondary: `#3B82F6`
+* Success: `#22C55E`
+* Warning: `#FACC15`
+* Danger: `#EF4444`
+* Background App: `#F5F8FB`
+
+---
+
+## 12. Tipografi
+
+* Font: Inter / Poppins / system-ui
+* Heading: Semi-bold
+* Body: Regular
+* Angka KPI: Bold, besar
+
+---
+
+## 13. Spasi & Grid
+
+* Padding card: 16–24px
+* Gap antar grid: 20–24px
+* Line-height: 1.5
+
+---
+
+## 14. Responsivitas
+
+### Tablet
+
+* KPI jadi 2 kolom
+* Grafik stack vertikal
+
+### Mobile
+
+* Sidebar jadi drawer
+* Semua konten 1 kolom
+* Table scroll horizontal
+
+---
+
+## 15. Interaksi & Perilaku
+
+* Tooltip pada chart
+* Hover row table
+* Filter data (future)
+* Data async via API
+
+---
+
+## 16. Catatan Implementasi Teknis
+
+* Framework: React + Vite
+* UI Kit: Mantine / Shadcn / MUI
+* Chart: Recharts / Chart.js / ECharts
+* Data: TanStack Query
+
+---
+
+## 17. Pengembangan Lanjutan
+
+* Filter per tahun
+* Drill-down per banjar
+* Export PDF / Excel
+* Heatmap kependudukan
+
+---
+
+> Dokumen ini menjadi referensi utama implementasi halaman **Demografi & Kependudukan**.
--- a/Dashboard-MD/KEUANGAN_ANGGARAN.md
+++ b/Dashboard-MD/KEUANGAN_ANGGARAN.md
@@ -0,0 +1,315 @@
+# Keuangan & Anggaran – Dashboard Design Specification
+
+Dokumen ini menjelaskan spesifikasi desain halaman **Keuangan & Anggaran** berdasarkan screenshot (11 Feb 2026). Dokumen ini berfungsi sebagai **design system + data contract** untuk implementasi frontend dan backend.
+
+---
+
+## 1. Tujuan Halaman
+
+Halaman **Keuangan & Anggaran** bertujuan untuk:
+
+* Menampilkan ringkasan APBDes
+* Memantau realisasi anggaran
+* Membandingkan pemasukan vs pengeluaran
+* Melihat alokasi anggaran per sektor
+* Transparansi laporan keuangan desa
+
+Target pengguna:
+
+* Kepala Desa
+* Bendahara Desa
+* Admin Keuangan
+
+---
+
+## 2. Tata Letak Keseluruhan
+
+### 2.1 Struktur Layout Global
+
+```
+------------------------------------------------------+
+| Topbar / Header                                      |
+-------------+----------------------------------------+
+| Sidebar     | Main Content                           |
+|             | - KPI Keuangan                         |
+|             | - Grafik Pemasukan vs Pengeluaran      |
+|             | - Alokasi Anggaran + Dana Bantuan      |
+|             | - Laporan APBDes                       |
+-------------+----------------------------------------+
+```
+
+* Sidebar: fixed kiri
+* Header: fixed atas
+* Konten utama: scroll vertikal
+
+---
+
+## 3. Header (Topbar)
+
+### Komponen
+
+* Nama aplikasi: `Desa Darmasaba`
+* User info:
+
+  * Nama: `I. B. Surya Prabhawa M.`
+  * Role: `Kepala Desa`
+* Ikon:
+
+  * Notifikasi (badge)
+  * Pengaturan / tema
+  * Avatar user
+
+### Gaya
+
+* Background: Navy / Biru Tua
+* Text: Putih
+* Tinggi: ±64px
+
+---
+
+## 4. Sidebar Navigation
+
+### Menu Aktif
+
+* **Keuangan & Anggaran** (active)
+
+Menu lain mengikuti standar global dashboard.
+
+### Gaya
+
+* Background: Putih
+* Active state: Biru muda + indicator kiri
+* Spacing item: 12–16px
+
+---
+
+## 5. KPI Keuangan (Ringkasan Atas)
+
+### KPI Cards
+
+1. **Total APBDes**
+
+   * Value: `5.2M`
+   * Sub: Tahun 2025
+
+2. **Realisasi**
+
+   * Value: `68%`
+   * Sub: `3.5M dari 5.2M`
+
+3. **Pemasukan**
+
+   * Value: `580jt`
+   * Sub: Bulan ini
+   * Delta: `+8%`
+
+4. **Pengeluaran**
+
+   * Value: `520jt`
+   * Sub: Bulan ini
+
+### Gaya
+
+* Card putih
+* Border radius: 14–16px
+* Icon lingkaran kanan
+* Shadow lembut
+
+---
+
+## 6. Grafik Pemasukan vs Pengeluaran
+
+### Deskripsi
+
+* Tipe: Line Chart (2 series)
+* Judul: `Pemasukan vs Pengeluaran`
+* X-axis: Bulan (Apr – Okt)
+* Y-axis: Nilai (juta rupiah)
+
+### Warna
+
+* Pemasukan: Hijau
+* Pengeluaran: Merah
+
+### Interaksi
+
+* Tooltip hover
+* Legend clickable (show/hide series)
+
+### Data
+
+```ts
+{
+  month: string;
+  income: number; // juta
+  expense: number; // juta
+}
+```
+
+---
+
+## 7. Alokasi Anggaran Per Sektor
+
+### Deskripsi
+
+* Tipe: Horizontal Bar Chart
+* Sektor:
+
+  * Pembangunan
+  * Kesehatan
+  * Pendidikan
+  * Sosial
+  * Kebudayaan
+  * Teknologi
+
+### Gaya
+
+* Bar: Navy
+* Label kiri
+
+### Data
+
+```ts
+{
+  sector: string;
+  amount: number; // juta
+}
+```
+
+---
+
+## 8. Dana Bantuan & Hibah
+
+### Deskripsi
+
+* Tipe: List / Card
+* Item:
+
+  * Dana Desa (DD) – 1.8M – *cair*
+  * Alokasi Dana Desa (ADD) – 950jt – *cair*
+  * Bagi Hasil Pajak – 450jt – *cair*
+  * Hibah Provinsi – 300jt – *proses*
+
+### Gaya
+
+* Status badge:
+
+  * Cair: Hijau
+  * Proses: Kuning
+
+### Data
+
+```ts
+{
+  source: string;
+  amount: number;
+  status: 'cair' | 'proses';
+}
+```
+
+---
+
+## 9. Laporan APBDes
+
+### Struktur
+
+#### Pendapatan
+
+* Dana Desa – Rp 1.8M
+* Alokasi Dana Desa – Rp 480jt
+* Bagi Hasil Pajak & Retribusi – Rp 300jt
+* Pendapatan Asli Desa – Rp 200jt
+* Hibah Bantuan – Rp 300jt
+
+**Total Pendapatan: Rp 3M**
+
+#### Belanja
+
+* Penyelenggaraan Pemerintah – Rp 425jt
+* Pembangunan Desa – Rp 850jt
+* Pembinaan Kemasyarakatan – Rp 320jt
+* Pemberdayaan Masyarakat – Rp 380jt
+* Penanggulangan Bencana – Rp 180jt
+
+**Total Belanja: Rp 2.1M**
+
+### Gaya
+
+* Layout dua kolom
+* Pendapatan: teks hijau
+* Belanja: teks merah
+
+---
+
+## 10. Warna & Tema
+
+### Palette
+
+* Primary (Navy): `#1E3A5F`
+* Success (Hijau): `#22C55E`
+* Danger (Merah): `#EF4444`
+* Secondary: `#3B82F6`
+* Background App: `#F5F8FB`
+
+---
+
+## 11. Tipografi
+
+* Font: Inter / Poppins / system-ui
+* Heading: Semi-bold
+* Body: Regular
+* Nilai angka: Bold
+
+---
+
+## 12. Spasi & Grid
+
+* Padding card: 16–24px
+* Gap antar section: 24–32px
+* Line-height: 1.5
+
+---
+
+## 13. Responsivitas
+
+### Tablet
+
+* KPI jadi 2 kolom
+* Chart full width
+
+### Mobile
+
+* Sidebar jadi drawer
+* KPI 1 kolom
+* Grafik scroll horizontal jika perlu
+
+---
+
+## 14. Interaksi & Perilaku
+
+* Hover card: shadow naik
+* Tooltip chart
+* Badge status dinamis
+* Data async via API
+
+---
+
+## 15. Catatan Implementasi Teknis
+
+* Framework: React + Vite
+* UI Kit: Mantine / Shadcn / MUI
+* Chart: Recharts / Chart.js
+* Data: TanStack Query
+
+---
+
+## 16. Pengembangan Lanjutan
+
+* Filter per tahun / bulan
+* Export laporan (PDF / Excel)
+* Drill-down transaksi
+* Audit log perubahan
+
+---
+
+> Dokumen ini menjadi referensi utama implementasi halaman **Keuangan & Anggaran**.
--- a/bun.lock
+++ b/bun.lock
@@ -8,6 +8,7 @@
        "@better-auth/cli": "^1.4.18",
        "@elysiajs/cors": "^1.4.1",
        "@elysiajs/swagger": "^1.3.1",
+        "@mantine/charts": "^8.3.14",
        "@mantine/core": "^8.3.14",
        "@mantine/dates": "^8.3.13",
        "@mantine/form": "^8.3.14",
@@ -310,6 +311,8 @@

    "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],

+    "@mantine/charts": ["@mantine/charts@8.3.14", "", { "peerDependencies": { "@mantine/core": "8.3.14", "@mantine/hooks": "8.3.14", "react": "^18.x || ^19.x", "react-dom": "^18.x || ^19.x", "recharts": ">=2.13.3" } }, "sha512-NbVYXk00+k04VVvTN5XquvNDrE6YRc3cP+1YQZLCwlMrjUXFaTy5KYoNWEMZ9e6wSNWAj9ZJCPuZ82P9CgOQkw=="],
+
    "@mantine/core": ["@mantine/core@8.3.14", "", { "dependencies": { "@floating-ui/react": "^0.27.16", "clsx": "^2.1.1", "react-number-format": "^5.4.4", "react-remove-scroll": "^2.7.1", "react-textarea-autosize": "8.5.9", "type-fest": "^4.41.0" }, "peerDependencies": { "@mantine/hooks": "8.3.14", "react": "^18.x || ^19.x", "react-dom": "^18.x || ^19.x" } }, "sha512-ZOxggx65Av1Ii1NrckCuqzluRpmmG+8DyEw24wDom3rmwsPg9UV+0le2QTyI5Eo60LzPfUju1KuEPiUzNABIPg=="],

    "@mantine/dates": ["@mantine/dates@8.3.14", "", { "dependencies": { "clsx": "^2.1.1" }, "peerDependencies": { "@mantine/core": "8.3.14", "@mantine/hooks": "8.3.14", "dayjs": ">=1.0.0", "react": "^18.x || ^19.x", "react-dom": "^18.x || ^19.x" } }, "sha512-NdStRo2ZQ55MoMF5B9vjhpBpHRDHF1XA9Dkb1kKSdNuLlaFXKlvoaZxj/3LfNPpn7Nqlns78nWt4X8/cgC2YIg=="],
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
 		"@better-auth/cli": "^1.4.18",
 		"@elysiajs/cors": "^1.4.1",
 		"@elysiajs/swagger": "^1.3.1",
+		"@mantine/charts": "^8.3.14",
 		"@mantine/core": "^8.3.14",
 		"@mantine/dates": "^8.3.13",
 		"@mantine/form": "^8.3.14",
--- a/src/components/demografi-pekerjaan.tsx
+++ b/src/components/demografi-pekerjaan.tsx
@@ -0,0 +1,313 @@
+import React from "react";
+import {
+	Button,
+	Card,
+	Badge,
+	Title,
+	Text,
+	Group,
+	Stack,
+	Grid,
+	Box,
+	Table,
+	Progress,
+} from "@mantine/core";
+import { IconBabyCarriage, IconSkull, IconArrowUp, IconArrowDown } from "@tabler/icons-react";
+import { BarChart, PieChart } from "@mantine/charts";
+
+// Sample Data
+const kpiData = [
+	{
+		id: 1,
+		title: "Total Penduduk",
+		value: "5.634",
+		sub: "Aktif terdaftar",
+		icon: (
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				strokeWidth={1.5}
+				stroke="currentColor"
+				className="h-6 w-6 text-muted-foreground"
+			>
+				<path
+					strokeLinecap="round"
+					strokeLinejoin="round"
+					d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
+				/>
+			</svg>
+		),
+	},
+	{
+		id: 2,
+		title: "Kepala Keluarga",
+		value: "1.354",
+		sub: "Total KK",
+		icon: (
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				strokeWidth={1.5}
+				stroke="currentColor"
+				className="h-6 w-6 text-muted-foreground"
+			>
+				<path
+					strokeLinecap="round"
+					strokeLinejoin="round"
+					d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+				/>
+			</svg>
+		),
+	},
+	{
+		id: 3,
+		title: "Kelahiran",
+		value: "23",
+		sub: "Tahun ini",
+		icon: (
+			<IconBabyCarriage className="h-6 w-6 text-muted-foreground" />
+		),
+	},
+	{
+		id: 4,
+		title: "Kemiskinan",
+		value: "324",
+		delta: "-10% dari tahun lalu",
+		deltaType: "positive",
+		icon: (
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				strokeWidth={1.5}
+				stroke="currentColor"
+				className="h-6 w-6 text-muted-foreground"
+			>
+				<path
+					strokeLinecap="round"
+					strokeLinejoin="round"
+					d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
+				/>
+			</svg>
+		),
+	},
+];
+
+const ageDistributionData = [
+	{ ageRange: "17-25", total: 850 },
+	{ ageRange: "26-35", total: 1200 },
+	{ ageRange: "36-45", total: 1100 },
+	{ ageRange: "46-55", total: 950 },
+	{ ageRange: "56-65", total: 750 },
+	{ ageRange: "65+", total: 484 },
+];
+
+const jobDistributionData = [
+	{ job: "Sipil", total: 1200 },
+	{ job: "Guru", total: 850 },
+	{ job: "Petani", total: 950 },
+	{ job: "Pedagang", total: 750 },
+	{ job: "Wiraswasta", total: 984 },
+];
+
+const religionData = [
+	{ religion: "Hindu", total: 4234, color: "red" },
+	{ religion: "Islam", total: 856, color: "blue" },
+	{ religion: "Kristen", total: 412, color: "green" },
+	{ religion: "Buddha", total: 202, color: "yellow" },
+];
+
+const banjarData = [
+	{ banjar: "Banjar Darmasaba", population: 1200, kk: 300, poor: 45 },
+	{ banjar: "Banjar Manesa", population: 950, kk: 240, poor: 32 },
+	{ banjar: "Banjar Cabe", population: 800, kk: 200, poor: 28 },
+	{ banjar: "Banjar Penenjoan", population: 1100, kk: 280, poor: 38 },
+	{ banjar: "Banjar Baler Pasar", population: 984, kk: 250, poor: 42 },
+	{ banjar: "Banjar Bucu", population: 600, kk: 184, poor: 25 },
+];
+
+const dynamicStats = [
+	{ title: "Kelahiran", value: "23", icon: <IconBabyCarriage size={16} />, color: "green" },
+	{ title: "Kematian", value: "12", icon: <IconSkull size={16} />, color: "red" },
+	{ title: "Pindah Masuk", value: "45", icon: <IconArrowDown size={16} />, color: "blue" },
+	{ title: "Pindah Keluar", value: "32", icon: <IconArrowUp size={16} />, color: "orange" },
+];
+
+const DemografiPekerjaan = () => {
+	return (
+		<Box className="space-y-6">
+			<Stack gap="xl">
+				<Group justify="space-between" align="center">
+					<Title order={1} fw={700}>
+						Demografi & Kependudukan
+					</Title>
+					<Button variant="filled">Export Data</Button>
+				</Group>
+
+				{/* KPI Cards */}
+				<Grid gutter="lg">
+					{kpiData.map((kpi) => (
+						<Grid.Col key={kpi.id} span={{ base: 12, md: 6, lg: 3 }}>
+							<Card shadow="sm" padding="lg" radius="md" withBorder>
+								<Group justify="space-between" align="flex-start" mb="xs">
+									<Text size="sm" fw={500} c="dimmed">
+										{kpi.title}
+									</Text>
+									{React.cloneElement(kpi.icon, {
+										className: "h-6 w-6",
+										color: "var(--mantine-color-dimmed)",
+									})}
+								</Group>
+								<Title order={3} fw={700} mt="xs">
+									{kpi.value}
+								</Title>
+								{kpi.delta && (
+									<Text
+										size="xs"
+										c={
+											kpi.deltaType === "positive"
+												? "green"
+												: kpi.deltaType === "negative"
+													? "red"
+													: "dimmed"
+										}
+										mt={4}
+									>
+										{kpi.delta}
+									</Text>
+								)}
+								{kpi.sub && (
+									<Text size="xs" c="dimmed" mt={2}>
+										{kpi.sub}
+									</Text>
+								)}
+							</Card>
+						</Grid.Col>
+					))}
+				</Grid>
+
+				{/* Charts Section */}
+				<Grid gutter="lg">
+					{/* Grafik Pengelompokan Umur */}
+					<Grid.Col span={{ base: 12, lg: 6 }}>
+						<Card shadow="sm" padding="lg" radius="md" withBorder>
+							<Title order={3} fw={500} mb="md">
+								Grafik Pengelompokan Umur
+							</Title>
+							<BarChart
+								h={300}
+								data={ageDistributionData}
+								dataKey="ageRange"
+								series={[{ name: 'total', color: 'darmasaba-navy' }]}
+								withLegend
+							/>
+						</Card>
+					</Grid.Col>
+
+					{/* Demografi Pekerjaan */}
+					<Grid.Col span={{ base: 12, lg: 6 }}>
+						<Card shadow="sm" padding="lg" radius="md" withBorder>
+							<Title order={3} fw={500} mb="md">
+								Demografi Pekerjaan
+							</Title>
+							<BarChart
+								h={300}
+								data={jobDistributionData}
+								dataKey="job"
+								series={[{ name: 'total', color: 'darmasaba-navy' }]}
+								withLegend
+							/>
+						</Card>
+					</Grid.Col>
+				</Grid>
+
+				{/* Agama & Data per Banjar */}
+				<Grid gutter="lg">
+					{/* Distribusi Agama */}
+					<Grid.Col span={{ base: 12, lg: 6 }}>
+						<Card shadow="sm" padding="lg" radius="md" withBorder>
+							<Title order={3} fw={500} mb="md">
+								Distribusi Agama
+							</Title>
+							<PieChart
+								h={300}
+								data={religionData.map(item => ({
+									name: item.religion,
+									value: item.total,
+									color: item.color
+								}))}
+								withLabels
+								withLabelsLine
+								labelsPosition="outside"
+								labelsType="percent"
+							/>
+						</Card>
+					</Grid.Col>
+
+					{/* Data per Banjar */}
+					<Grid.Col span={{ base: 12, lg: 6 }}>
+						<Card shadow="sm" padding="lg" radius="md" withBorder>
+							<Title order={3} fw={500} mb="md">
+								Data per Banjar
+							</Title>
+							<Table striped highlightOnHover>
+								<Table.Thead>
+									<Table.Tr>
+										<Table.Th>Banjar</Table.Th>
+										<Table.Th>Penduduk</Table.Th>
+										<Table.Th>KK</Table.Th>
+										<Table.Th>Miskin</Table.Th>
+									</Table.Tr>
+								</Table.Thead>
+								<Table.Tbody>
+									{banjarData.map((item, index) => (
+										<Table.Tr key={index}>
+											<Table.Td>{item.banjar}</Table.Td>
+											<Table.Td>{item.population.toLocaleString()}</Table.Td>
+											<Table.Td>{item.kk.toLocaleString()}</Table.Td>
+											<Table.Td>
+												<Text c="red">{item.poor.toLocaleString()}</Text>
+											</Table.Td>
+										</Table.Tr>
+									))}
+								</Table.Tbody>
+							</Table>
+						</Card>
+					</Grid.Col>
+				</Grid>
+
+				{/* Statistik Dinamika Penduduk */}
+				<Card shadow="sm" padding="lg" radius="md" withBorder>
+					<Title order={3} fw={500} mb="md">
+						Statistik Dinamika Penduduk
+					</Title>
+					<Grid gutter="md">
+						{dynamicStats.map((stat, index) => (
+							<Grid.Col key={index} span={{ base: 12, md: 3 }}>
+								<Card shadow="sm" padding="lg" radius="md" withBorder>
+									<Group justify="space-between" align="center">
+										<Box>
+											<Text size="sm" fw={500} c="dimmed">
+												{stat.title}
+											</Text>
+											<Title order={4} fw={700} c={stat.color}>
+												{stat.value}
+											</Title>
+										</Box>
+										<Box c={stat.color}>
+											{stat.icon}
+										</Box>
+									</Group>
+								</Card>
+							</Grid.Col>
+						))}
+					</Grid>
+				</Card>
+			</Stack>
+		</Box>
+	);
+};
+
+export default DemografiPekerjaan;
--- a/src/components/jenna-analytic.tsx
+++ b/src/components/jenna-analytic.tsx
@@ -9,9 +9,9 @@ import {
 	Group,
 	Stack,
 	Grid,
-	Table,
 	Box,
 } from "@mantine/core";
+import { BarChart } from "@mantine/charts";

 // Sample Data
 const kpiData = [
@@ -134,7 +134,7 @@ const busyHours = [

 const JennaAnalytic = () => {
 	return (
-		<Box p="md">
+		<Box className="space-y-6">
 			<Stack gap="xl">
 				<Group justify="space-between" align="center">
 					<Title order={1} fw={700}>
@@ -187,28 +187,19 @@ const JennaAnalytic = () => {

 				{/* Charts and Lists Section */}
 				<Grid gutter="lg">
-					{/* Grafik Interaksi Chatbot (now Table) */}
+					{/* Grafik Interaksi Chatbot (now Bar Chart) */}
 					<Grid.Col span={{ base: 12, lg: 6 }}>
 						<Card shadow="sm" padding="lg" radius="md" withBorder>
 							<Title order={3} fw={500} mb="md">
 								Interaksi Chatbot
 							</Title>
-							<Table striped highlightOnHover>
-								<Table.Thead>
-									<Table.Tr>
-										<Table.Th>Day</Table.Th>
-										<Table.Th>Total Interactions</Table.Th>
-									</Table.Tr>
-								</Table.Thead>
-								<Table.Tbody>
-									{chartData.map((item, index) => (
-										<Table.Tr key={index}>
-											<Table.Td>{item.day}</Table.Td>
-											<Table.Td>{item.total}</Table.Td>
-										</Table.Tr>
-									))}
-								</Table.Tbody>
-							</Table>
+							<BarChart
+								h={300}
+								data={chartData}
+								dataKey="day"
+								series={[{ name: 'total', color: 'blue' }]}
+								withLegend
+							/>
 						</Card>
 					</Grid.Col>

@@ -227,7 +218,6 @@ const JennaAnalytic = () => {
 											justify="space-between"
 											align="center"
 											p="xs"
-											style={{ backgroundColor: 'var(--mantine-color-gray-0)', borderRadius: 'var(--mantine-radius-sm)' }}
 										>
 											<Text size="sm" fw={500}>
 												{item.topic}
--- a/src/components/sidebar.tsx
+++ b/src/components/sidebar.tsx
@@ -24,7 +24,7 @@ export function Sidebar({ className }: SidebarProps) {
 		{ name: "Kinerja Divisi", path: "/dashboard/kinerja-divisi" },
 		{ name: "Pengaduan & Layanan Publik", path: "/dashboard/pengaduan-layanan-publik" },
 		{ name: "Jenna Analytic", path: "/dashboard/jenna-analytic" },
-		{ name: "Demografi & Kependudukan", path: "/dashboard/demografi" },
+		{ name: "Demografi & Kependudukan", path: "/dashboard/demografi-pekerjaan" },
 		{ name: "Keuangan & Anggaran", path: "/dashboard/keuangan" },
 		{ name: "Bumdes & UMKM Desa", path: "/dashboard/bumdes" },
 		{ name: "Sosial", path: "/dashboard/sosial" },
--- a/src/frontend.tsx
+++ b/src/frontend.tsx
@@ -14,6 +14,7 @@ import { Inspector } from "react-dev-inspector";
 import { createRoot } from "react-dom/client";
 import { routeTree } from "./routeTree.gen";
 import "./index.css";
+import '@mantine/charts/styles.css';
 import { IS_DEV, VITE_PUBLIC_URL } from "./utils/env";


--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -23,6 +23,7 @@ import { Route as ProfileEditRouteImport } from './routes/profile/edit'
 import { Route as DashboardPengaduanLayananPublikRouteImport } from './routes/dashboard/pengaduan-layanan-publik'
 import { Route as DashboardKinerjaDivisiRouteImport } from './routes/dashboard/kinerja-divisi'
 import { Route as DashboardJennaAnalyticRouteImport } from './routes/dashboard/jenna-analytic'
+import { Route as DashboardDemografiPekerjaanRouteImport } from './routes/dashboard/demografi-pekerjaan'
 import { Route as AdminUsersRouteImport } from './routes/admin/users'
 import { Route as AdminSettingsRouteImport } from './routes/admin/settings'
 import { Route as AdminApikeyRouteImport } from './routes/admin/apikey'
@@ -98,6 +99,12 @@ const DashboardJennaAnalyticRoute = DashboardJennaAnalyticRouteImport.update({
  path: '/jenna-analytic',
  getParentRoute: () => DashboardRouteRoute,
 } as any)
+const DashboardDemografiPekerjaanRoute =
+  DashboardDemografiPekerjaanRouteImport.update({
+    id: '/demografi-pekerjaan',
+    path: '/demografi-pekerjaan',
+    getParentRoute: () => DashboardRouteRoute,
+  } as any)
 const AdminUsersRoute = AdminUsersRouteImport.update({
  id: '/users',
  path: '/users',
@@ -123,6 +130,7 @@ export interface FileRoutesByFullPath {
  '/admin/apikey': typeof AdminApikeyRoute
  '/admin/settings': typeof AdminSettingsRoute
  '/admin/users': typeof AdminUsersRoute
+  '/dashboard/demografi-pekerjaan': typeof DashboardDemografiPekerjaanRoute
  '/dashboard/jenna-analytic': typeof DashboardJennaAnalyticRoute
  '/dashboard/kinerja-divisi': typeof DashboardKinerjaDivisiRoute
  '/dashboard/pengaduan-layanan-publik': typeof DashboardPengaduanLayananPublikRoute
@@ -140,6 +148,7 @@ export interface FileRoutesByTo {
  '/admin/apikey': typeof AdminApikeyRoute
  '/admin/settings': typeof AdminSettingsRoute
  '/admin/users': typeof AdminUsersRoute
+  '/dashboard/demografi-pekerjaan': typeof DashboardDemografiPekerjaanRoute
  '/dashboard/jenna-analytic': typeof DashboardJennaAnalyticRoute
  '/dashboard/kinerja-divisi': typeof DashboardKinerjaDivisiRoute
  '/dashboard/pengaduan-layanan-publik': typeof DashboardPengaduanLayananPublikRoute
@@ -160,6 +169,7 @@ export interface FileRoutesById {
  '/admin/apikey': typeof AdminApikeyRoute
  '/admin/settings': typeof AdminSettingsRoute
  '/admin/users': typeof AdminUsersRoute
+  '/dashboard/demografi-pekerjaan': typeof DashboardDemografiPekerjaanRoute
  '/dashboard/jenna-analytic': typeof DashboardJennaAnalyticRoute
  '/dashboard/kinerja-divisi': typeof DashboardKinerjaDivisiRoute
  '/dashboard/pengaduan-layanan-publik': typeof DashboardPengaduanLayananPublikRoute
@@ -181,6 +191,7 @@ export interface FileRouteTypes {
    | '/admin/apikey'
    | '/admin/settings'
    | '/admin/users'
+    | '/dashboard/demografi-pekerjaan'
    | '/dashboard/jenna-analytic'
    | '/dashboard/kinerja-divisi'
    | '/dashboard/pengaduan-layanan-publik'
@@ -198,6 +209,7 @@ export interface FileRouteTypes {
    | '/admin/apikey'
    | '/admin/settings'
    | '/admin/users'
+    | '/dashboard/demografi-pekerjaan'
    | '/dashboard/jenna-analytic'
    | '/dashboard/kinerja-divisi'
    | '/dashboard/pengaduan-layanan-publik'
@@ -217,6 +229,7 @@ export interface FileRouteTypes {
    | '/admin/apikey'
    | '/admin/settings'
    | '/admin/users'
+    | '/dashboard/demografi-pekerjaan'
    | '/dashboard/jenna-analytic'
    | '/dashboard/kinerja-divisi'
    | '/dashboard/pengaduan-layanan-publik'
@@ -340,6 +353,13 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof DashboardJennaAnalyticRouteImport
      parentRoute: typeof DashboardRouteRoute
    }
+    '/dashboard/demografi-pekerjaan': {
+      id: '/dashboard/demografi-pekerjaan'
+      path: '/demografi-pekerjaan'
+      fullPath: '/dashboard/demografi-pekerjaan'
+      preLoaderRoute: typeof DashboardDemografiPekerjaanRouteImport
+      parentRoute: typeof DashboardRouteRoute
+    }
    '/admin/users': {
      id: '/admin/users'
      path: '/users'
@@ -383,6 +403,7 @@ const AdminRouteRouteWithChildren = AdminRouteRoute._addFileChildren(
 )

 interface DashboardRouteRouteChildren {
+  DashboardDemografiPekerjaanRoute: typeof DashboardDemografiPekerjaanRoute
  DashboardJennaAnalyticRoute: typeof DashboardJennaAnalyticRoute
  DashboardKinerjaDivisiRoute: typeof DashboardKinerjaDivisiRoute
  DashboardPengaduanLayananPublikRoute: typeof DashboardPengaduanLayananPublikRoute
@@ -390,6 +411,7 @@ interface DashboardRouteRouteChildren {
 }

 const DashboardRouteRouteChildren: DashboardRouteRouteChildren = {
+  DashboardDemografiPekerjaanRoute: DashboardDemografiPekerjaanRoute,
  DashboardJennaAnalyticRoute: DashboardJennaAnalyticRoute,
  DashboardKinerjaDivisiRoute: DashboardKinerjaDivisiRoute,
  DashboardPengaduanLayananPublikRoute: DashboardPengaduanLayananPublikRoute,
--- a/src/routes/dashboard/demografi-pekerjaan.ts
+++ b/src/routes/dashboard/demografi-pekerjaan.ts
@@ -0,0 +1,7 @@
+import { createFileRoute } from '@tanstack/react-router'
+import DemografiPekerjaan from '../../components/demografi-pekerjaan'
+
+export const Route = createFileRoute('/dashboard/demografi-pekerjaan')({
+  component: DemografiPekerjaan,
+})
+