diff --git a/src/components/keuangan-anggaran.tsx b/src/components/keuangan-anggaran.tsx
new file mode 100644
index 0000000..6b161ba
--- /dev/null
+++ b/src/components/keuangan-anggaran.tsx
@@ -0,0 +1,321 @@
+import React from "react";
+import {
+ Button,
+ Card,
+ Badge,
+ Title,
+ Text,
+ Group,
+ Stack,
+ Grid,
+ Box,
+ Progress,
+} from "@mantine/core";
+import { IconTrendingUp, IconTrendingDown, IconCurrency } from "@tabler/icons-react";
+import { BarChart } from "@mantine/charts";
+
+// Sample Data
+const kpiData = [
+ {
+ id: 1,
+ title: "Total APBDes",
+ value: "Rp 5.2M",
+ sub: "Tahun 2025",
+ icon: (
+
+ ),
+ },
+ {
+ id: 2,
+ title: "Realisasi",
+ value: "68%",
+ sub: "Rp 3.5M dari 5.2M",
+ icon: (
+
+ ),
+ },
+ {
+ id: 3,
+ title: "Pemasukan",
+ value: "Rp 580jt",
+ sub: "Bulan ini",
+ delta: "+8%",
+ deltaType: "positive",
+ icon: (
+
+ ),
+ },
+ {
+ id: 4,
+ title: "Pengeluaran",
+ value: "Rp 520jt",
+ sub: "Bulan ini",
+ icon: (
+
+ ),
+ },
+];
+
+const incomeExpenseData = [
+ { month: "Apr", income: 450, expense: 380 },
+ { month: "Mei", income: 520, expense: 420 },
+ { month: "Jun", income: 480, expense: 500 },
+ { month: "Jul", income: 580, expense: 450 },
+ { month: "Agu", income: 550, expense: 520 },
+ { month: "Sep", income: 600, expense: 480 },
+ { month: "Okt", income: 580, expense: 520 },
+];
+
+const allocationData = [
+ { sector: "Pembangunan", amount: 1200 },
+ { sector: "Kesehatan", amount: 800 },
+ { sector: "Pendidikan", amount: 650 },
+ { sector: "Sosial", amount: 550 },
+ { sector: "Kebudayaan", amount: 400 },
+ { sector: "Teknologi", amount: 300 },
+];
+
+const assistanceFundData = [
+ { source: "Dana Desa (DD)", amount: 1800, status: "cair" },
+ { source: "Alokasi Dana Desa (ADD)", amount: 950, status: "cair" },
+ { source: "Bagi Hasil Pajak", amount: 450, status: "cair" },
+ { source: "Hibah Provinsi", amount: 300, status: "proses" },
+];
+
+const apbdReport = {
+ income: [
+ { category: "Dana Desa", amount: 1800 },
+ { category: "Alokasi Dana Desa", amount: 480 },
+ { category: "Bagi Hasil Pajak & Retribusi", amount: 300 },
+ { category: "Pendapatan Asli Desa", amount: 200 },
+ { category: "Hibah Bantuan", amount: 300 },
+ ],
+ expenses: [
+ { category: "Penyelenggaraan Pemerintah", amount: 425 },
+ { category: "Pembangunan Desa", amount: 850 },
+ { category: "Pembinaan Kemasyarakatan", amount: 320 },
+ { category: "Pemberdayaan Masyarakat", amount: 380 },
+ { category: "Penanggulangan Bencana", amount: 180 },
+ ],
+ totalIncome: 3080,
+ totalExpenses: 2155,
+};
+
+const KeuanganAnggaran = () => {
+ return (
+
+
+
+
+ Keuangan & Anggaran
+
+
+
+
+ {/* 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 Pemasukan vs Pengeluaran */}
+
+
+
+ Pemasukan vs Pengeluaran
+
+
+
+
+
+ {/* Alokasi Anggaran Per Sektor */}
+
+
+
+ Alokasi Anggaran Per Sektor
+
+
+
+
+
+
+
+ {/* Dana Bantuan & Hibah */}
+
+
+
+ Dana Bantuan & Hibah
+
+
+ {assistanceFundData.map((fund, index) => (
+
+
+
+ {fund.source}
+
+
+ Rp {fund.amount.toLocaleString()}jt
+
+
+
+ {fund.status}
+
+
+ ))}
+
+
+
+
+ {/* Laporan APBDes */}
+
+
+
+ Laporan APBDes
+
+
+
+ Pendapatan
+
+ {apbdReport.income.map((item, index) => (
+
+ {item.category}
+
+ Rp {item.amount.toLocaleString()}jt
+
+
+ ))}
+
+ Total Pendapatan:
+
+ Rp {apbdReport.totalIncome.toLocaleString()}jt
+
+
+
+
+
+
+ Belanja
+
+ {apbdReport.expenses.map((item, index) => (
+
+ {item.category}
+
+ Rp {item.amount.toLocaleString()}jt
+
+
+ ))}
+
+ Total Belanja:
+
+ Rp {apbdReport.totalExpenses.toLocaleString()}jt
+
+
+
+
+
+
+
+ Saldo:
+ apbdReport.totalExpenses ? "green" : "red"}>
+ Rp {(apbdReport.totalIncome - apbdReport.totalExpenses).toLocaleString()}jt
+
+
+
+
+
+
+
+
+ );
+};
+
+export default KeuanganAnggaran;
\ No newline at end of file
diff --git a/src/components/sidebar.tsx b/src/components/sidebar.tsx
index cc09583..b64d87d 100644
--- a/src/components/sidebar.tsx
+++ b/src/components/sidebar.tsx
@@ -25,7 +25,7 @@ export function Sidebar({ className }: SidebarProps) {
{ name: "Pengaduan & Layanan Publik", path: "/dashboard/pengaduan-layanan-publik" },
{ name: "Jenna Analytic", path: "/dashboard/jenna-analytic" },
{ name: "Demografi & Kependudukan", path: "/dashboard/demografi-pekerjaan" },
- { name: "Keuangan & Anggaran", path: "/dashboard/keuangan" },
+ { name: "Keuangan & Anggaran", path: "/dashboard/keuangan-anggaran" },
{ name: "Bumdes & UMKM Desa", path: "/dashboard/bumdes" },
{ name: "Sosial", path: "/dashboard/sosial" },
{ name: "Keamanan", path: "/dashboard/keamanan" },
diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
index 5067203..b02061b 100644
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -22,6 +22,7 @@ import { Route as UsersIdRouteImport } from './routes/users/$id'
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 DashboardKeuanganAnggaranRouteImport } from './routes/dashboard/keuangan-anggaran'
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'
@@ -94,6 +95,12 @@ const DashboardKinerjaDivisiRoute = DashboardKinerjaDivisiRouteImport.update({
path: '/kinerja-divisi',
getParentRoute: () => DashboardRouteRoute,
} as any)
+const DashboardKeuanganAnggaranRoute =
+ DashboardKeuanganAnggaranRouteImport.update({
+ id: '/keuangan-anggaran',
+ path: '/keuangan-anggaran',
+ getParentRoute: () => DashboardRouteRoute,
+ } as any)
const DashboardJennaAnalyticRoute = DashboardJennaAnalyticRouteImport.update({
id: '/jenna-analytic',
path: '/jenna-analytic',
@@ -132,6 +139,7 @@ export interface FileRoutesByFullPath {
'/admin/users': typeof AdminUsersRoute
'/dashboard/demografi-pekerjaan': typeof DashboardDemografiPekerjaanRoute
'/dashboard/jenna-analytic': typeof DashboardJennaAnalyticRoute
+ '/dashboard/keuangan-anggaran': typeof DashboardKeuanganAnggaranRoute
'/dashboard/kinerja-divisi': typeof DashboardKinerjaDivisiRoute
'/dashboard/pengaduan-layanan-publik': typeof DashboardPengaduanLayananPublikRoute
'/profile/edit': typeof ProfileEditRoute
@@ -150,6 +158,7 @@ export interface FileRoutesByTo {
'/admin/users': typeof AdminUsersRoute
'/dashboard/demografi-pekerjaan': typeof DashboardDemografiPekerjaanRoute
'/dashboard/jenna-analytic': typeof DashboardJennaAnalyticRoute
+ '/dashboard/keuangan-anggaran': typeof DashboardKeuanganAnggaranRoute
'/dashboard/kinerja-divisi': typeof DashboardKinerjaDivisiRoute
'/dashboard/pengaduan-layanan-publik': typeof DashboardPengaduanLayananPublikRoute
'/profile/edit': typeof ProfileEditRoute
@@ -171,6 +180,7 @@ export interface FileRoutesById {
'/admin/users': typeof AdminUsersRoute
'/dashboard/demografi-pekerjaan': typeof DashboardDemografiPekerjaanRoute
'/dashboard/jenna-analytic': typeof DashboardJennaAnalyticRoute
+ '/dashboard/keuangan-anggaran': typeof DashboardKeuanganAnggaranRoute
'/dashboard/kinerja-divisi': typeof DashboardKinerjaDivisiRoute
'/dashboard/pengaduan-layanan-publik': typeof DashboardPengaduanLayananPublikRoute
'/profile/edit': typeof ProfileEditRoute
@@ -193,6 +203,7 @@ export interface FileRouteTypes {
| '/admin/users'
| '/dashboard/demografi-pekerjaan'
| '/dashboard/jenna-analytic'
+ | '/dashboard/keuangan-anggaran'
| '/dashboard/kinerja-divisi'
| '/dashboard/pengaduan-layanan-publik'
| '/profile/edit'
@@ -211,6 +222,7 @@ export interface FileRouteTypes {
| '/admin/users'
| '/dashboard/demografi-pekerjaan'
| '/dashboard/jenna-analytic'
+ | '/dashboard/keuangan-anggaran'
| '/dashboard/kinerja-divisi'
| '/dashboard/pengaduan-layanan-publik'
| '/profile/edit'
@@ -231,6 +243,7 @@ export interface FileRouteTypes {
| '/admin/users'
| '/dashboard/demografi-pekerjaan'
| '/dashboard/jenna-analytic'
+ | '/dashboard/keuangan-anggaran'
| '/dashboard/kinerja-divisi'
| '/dashboard/pengaduan-layanan-publik'
| '/profile/edit'
@@ -346,6 +359,13 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof DashboardKinerjaDivisiRouteImport
parentRoute: typeof DashboardRouteRoute
}
+ '/dashboard/keuangan-anggaran': {
+ id: '/dashboard/keuangan-anggaran'
+ path: '/keuangan-anggaran'
+ fullPath: '/dashboard/keuangan-anggaran'
+ preLoaderRoute: typeof DashboardKeuanganAnggaranRouteImport
+ parentRoute: typeof DashboardRouteRoute
+ }
'/dashboard/jenna-analytic': {
id: '/dashboard/jenna-analytic'
path: '/jenna-analytic'
@@ -405,6 +425,7 @@ const AdminRouteRouteWithChildren = AdminRouteRoute._addFileChildren(
interface DashboardRouteRouteChildren {
DashboardDemografiPekerjaanRoute: typeof DashboardDemografiPekerjaanRoute
DashboardJennaAnalyticRoute: typeof DashboardJennaAnalyticRoute
+ DashboardKeuanganAnggaranRoute: typeof DashboardKeuanganAnggaranRoute
DashboardKinerjaDivisiRoute: typeof DashboardKinerjaDivisiRoute
DashboardPengaduanLayananPublikRoute: typeof DashboardPengaduanLayananPublikRoute
DashboardIndexRoute: typeof DashboardIndexRoute
@@ -413,6 +434,7 @@ interface DashboardRouteRouteChildren {
const DashboardRouteRouteChildren: DashboardRouteRouteChildren = {
DashboardDemografiPekerjaanRoute: DashboardDemografiPekerjaanRoute,
DashboardJennaAnalyticRoute: DashboardJennaAnalyticRoute,
+ DashboardKeuanganAnggaranRoute: DashboardKeuanganAnggaranRoute,
DashboardKinerjaDivisiRoute: DashboardKinerjaDivisiRoute,
DashboardPengaduanLayananPublikRoute: DashboardPengaduanLayananPublikRoute,
DashboardIndexRoute: DashboardIndexRoute,
diff --git a/src/routes/dashboard/keuangan-anggaran.ts b/src/routes/dashboard/keuangan-anggaran.ts
new file mode 100644
index 0000000..e5e8e8c
--- /dev/null
+++ b/src/routes/dashboard/keuangan-anggaran.ts
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import KeuanganAnggaran from '@/components/keuangan-anggaran'
+
+export const Route = createFileRoute('/dashboard/keuangan-anggaran')({
+ component: KeuanganAnggaran,
+})