diff --git a/Dashboard-MD/DEMOGRAFI_KEPENDUDUKAN.md b/Dashboard-MD/DEMOGRAFI_KEPENDUDUKAN.md
new file mode 100644
index 0000000..a886a1a
--- /dev/null
+++ 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**.
diff --git a/Dashboard-MD/KEUANGAN_ANGGARAN.md b/Dashboard-MD/KEUANGAN_ANGGARAN.md
new file mode 100644
index 0000000..432c9d1
--- /dev/null
+++ 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**.
diff --git a/bun.lock b/bun.lock
index fd5b486..55f1aa6 100644
--- 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=="],
diff --git a/package.json b/package.json
index e900a2c..83d2f24 100644
--- 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",
diff --git a/src/components/demografi-pekerjaan.tsx b/src/components/demografi-pekerjaan.tsx
new file mode 100644
index 0000000..a297d38
--- /dev/null
+++ 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: (
+
+ ),
+ },
+ {
+ id: 2,
+ title: "Kepala Keluarga",
+ value: "1.354",
+ sub: "Total KK",
+ icon: (
+
+ ),
+ },
+ {
+ id: 3,
+ title: "Kelahiran",
+ value: "23",
+ sub: "Tahun ini",
+ icon: (
+
+ ),
+ },
+ {
+ id: 4,
+ title: "Kemiskinan",
+ value: "324",
+ delta: "-10% dari tahun lalu",
+ deltaType: "positive",
+ icon: (
+
+ ),
+ },
+];
+
+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: , color: "green" },
+ { title: "Kematian", value: "12", icon: , color: "red" },
+ { title: "Pindah Masuk", value: "45", icon: , color: "blue" },
+ { title: "Pindah Keluar", value: "32", icon: , color: "orange" },
+];
+
+const DemografiPekerjaan = () => {
+ return (
+
+
+
+
+ Demografi & Kependudukan
+
+
+
+
+ {/* KPI Cards */}
+
+ {kpiData.map((kpi) => (
+
+
+
+
+ {kpi.title}
+
+ {React.cloneElement(kpi.icon, {
+ className: "h-6 w-6",
+ color: "var(--mantine-color-dimmed)",
+ })}
+
+
+ {kpi.value}
+
+ {kpi.delta && (
+
+ {kpi.delta}
+
+ )}
+ {kpi.sub && (
+
+ {kpi.sub}
+
+ )}
+
+
+ ))}
+
+
+ {/* Charts Section */}
+
+ {/* Grafik Pengelompokan Umur */}
+
+
+
+ Grafik Pengelompokan Umur
+
+
+
+
+
+ {/* Demografi Pekerjaan */}
+
+
+
+ Demografi Pekerjaan
+
+
+
+
+
+
+ {/* Agama & Data per Banjar */}
+
+ {/* Distribusi Agama */}
+
+
+
+ Distribusi Agama
+
+ ({
+ name: item.religion,
+ value: item.total,
+ color: item.color
+ }))}
+ withLabels
+ withLabelsLine
+ labelsPosition="outside"
+ labelsType="percent"
+ />
+
+
+
+ {/* Data per Banjar */}
+
+
+
+ Data per Banjar
+
+
+
+
+ Banjar
+ Penduduk
+ KK
+ Miskin
+
+
+
+ {banjarData.map((item, index) => (
+
+ {item.banjar}
+ {item.population.toLocaleString()}
+ {item.kk.toLocaleString()}
+
+ {item.poor.toLocaleString()}
+
+
+ ))}
+
+
+
+
+
+
+ {/* Statistik Dinamika Penduduk */}
+
+
+ Statistik Dinamika Penduduk
+
+
+ {dynamicStats.map((stat, index) => (
+
+
+
+
+
+ {stat.title}
+
+
+ {stat.value}
+
+
+
+ {stat.icon}
+
+
+
+
+ ))}
+
+
+
+
+ );
+};
+
+export default DemografiPekerjaan;
\ No newline at end of file
diff --git a/src/components/jenna-analytic.tsx b/src/components/jenna-analytic.tsx
index f8925ab..2738b15 100644
--- 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 (
-
+
@@ -187,28 +187,19 @@ const JennaAnalytic = () => {
{/* Charts and Lists Section */}
- {/* Grafik Interaksi Chatbot (now Table) */}
+ {/* Grafik Interaksi Chatbot (now Bar Chart) */}
Interaksi Chatbot
-
-
-
- Day
- Total Interactions
-
-
-
- {chartData.map((item, index) => (
-
- {item.day}
- {item.total}
-
- ))}
-
-
+
@@ -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)' }}
>
{item.topic}
diff --git a/src/components/sidebar.tsx b/src/components/sidebar.tsx
index 6539654..cc09583 100644
--- 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" },
diff --git a/src/frontend.tsx b/src/frontend.tsx
index 0b2234f..568e20f 100644
--- 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";
diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
index a295175..5067203 100644
--- 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,
diff --git a/src/routes/dashboard/demografi-pekerjaan.ts b/src/routes/dashboard/demografi-pekerjaan.ts
new file mode 100644
index 0000000..de98b36
--- /dev/null
+++ 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,
+})
+