From c4fd7bb784c6e3bc2f9eda99d2c87c010539c379 Mon Sep 17 00:00:00 2001 From: nico Date: Wed, 11 Feb 2026 14:35:46 +0800 Subject: [PATCH] feat: add demografi pekerjaan component and update charts Co-authored-by: Qwen-Coder --- Dashboard-MD/DEMOGRAFI_KEPENDUDUKAN.md | 347 ++++++++++++++++++++ Dashboard-MD/KEUANGAN_ANGGARAN.md | 315 ++++++++++++++++++ bun.lock | 3 + package.json | 1 + src/components/demografi-pekerjaan.tsx | 313 ++++++++++++++++++ src/components/jenna-analytic.tsx | 30 +- src/components/sidebar.tsx | 2 +- src/frontend.tsx | 1 + src/routeTree.gen.ts | 22 ++ src/routes/dashboard/demografi-pekerjaan.ts | 7 + 10 files changed, 1020 insertions(+), 21 deletions(-) create mode 100644 Dashboard-MD/DEMOGRAFI_KEPENDUDUKAN.md create mode 100644 Dashboard-MD/KEUANGAN_ANGGARAN.md create mode 100644 src/components/demografi-pekerjaan.tsx create mode 100644 src/routes/dashboard/demografi-pekerjaan.ts 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 */} <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 - - - - 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, +}) +