fix(header): fix missing Divider, Badge, IconUserShield and navigate

src/components/dashboard-content.tsx

@@ -1,5 +1,7 @@
-import { Grid, Image, Stack, useMantineColorScheme } from "@mantine/core";
+import { Grid, Image, Stack } from "@mantine/core";
 import { CheckCircle, FileText, MessageCircle, Users } from "lucide-react";
+import { useEffect, useState } from "react";
+import { apiClient } from "@/utils/api-client";
 import { ActivityList } from "./dashboard/activity-list";
 import { ChartAPBDes } from "./dashboard/chart-apbdes";
 import { ChartSurat } from "./dashboard/chart-surat";
@@ -32,8 +34,38 @@ const sdgsData = [
 ];
 
 export function DashboardContent() {
-	const { colorScheme } = useMantineColorScheme();
-	const dark = colorScheme === "dark";
+	const [stats, setStats] = useState({
+		complaints: { total: 0, baru: 0, proses: 0, selesai: 0 },
+		residents: { total: 0, heads: 0, poor: 0 },
+		loading: true,
+	});
+
+	useEffect(() => {
+		async function fetchStats() {
+			try {
+				const [complaintRes, residentRes] = await Promise.all([
+					apiClient.GET("/api/complaint/stats"),
+					apiClient.GET("/api/resident/stats"),
+				]);
+
+				setStats({
+					complaints: (complaintRes.data as any)?.data || {
+						total: 0,
+						baru: 0,
+						proses: 0,
+						selesai: 0,
+					},
+					residents: (residentRes.data as any)?.data || { total: 0, heads: 0, poor: 0 },
+					loading: false,
+				});
+			} catch (error) {
+				console.error("Failed to fetch stats", error);
+				setStats((prev) => ({ ...prev, loading: false }));
+			}
+		}
+
+		fetchStats();
+	}, []);
 
 	return (
 		<Stack gap="lg">
@@ -42,36 +74,36 @@ export function DashboardContent() {
 				<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
 					<StatCard
 						title="Surat Minggu Ini"
-						value={99}
-						detail="14 baru, 14 diproses"
-						trend="12% dari minggu lalu ↗ +12%"
-						trendValue={12}
+						value={0}
+						detail="Menunggu integrasi riil"
+						trend="0%"
+						trendValue={0}
 						icon={<FileText style={{ width: "70%", height: "70%" }} />}
 					/>
 				</Grid.Col>
 				<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
 					<StatCard
 						title="Pengaduan Aktif"
-						value={28}
-						detail="14 baru, 14 diproses"
+						value={stats.complaints.baru + stats.complaints.proses}
+						detail={`${stats.complaints.baru} baru, ${stats.complaints.proses} diproses`}
 						icon={<MessageCircle style={{ width: "70%", height: "70%" }} />}
 					/>
 				</Grid.Col>
 				<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
 					<StatCard
 						title="Layanan Selesai"
-						value={156}
-						detail="bulan ini"
-						trend="+8%"
-						trendValue={8}
+						value={stats.complaints.selesai}
+						detail="Total diselesaikan"
+						trend="+0%"
+						trendValue={0}
 						icon={<CheckCircle style={{ width: "70%", height: "70%" }} />}
 					/>
 				</Grid.Col>
 				<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
 					<StatCard
-						title="Kepuasan Warga"
-						value="87.2%"
-						detail="dari 482 responden"
+						title="Total Penduduk"
+						value={stats.residents.total.toLocaleString()}
+						detail={`${stats.residents.heads} Kepala Keluarga`}
 						icon={<Users style={{ width: "70%", height: "70%" }} />}
 					/>
 				</Grid.Col>
@@ -102,8 +134,8 @@ export function DashboardContent() {
 
 			{/* Section 6: SDGs Desa Cards */}
 			<Grid gutter="md">
-				{sdgsData.map((sdg, index) => (
-					<Grid.Col key={index} span={{ base: 9, md: 3 }}>
+				{sdgsData.map((sdg) => (
+					<Grid.Col key={sdg.title} span={{ base: 9, md: 3 }}>
 						<SDGSCard
 							image={<Image src={sdg.image} alt={sdg.title} />}
 							title={sdg.title}