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

src/components/kinerja-divisi/activity-card.tsx

@@ -1,4 +1,11 @@
-import { Box, Card, Group, Progress, Text, useMantineColorScheme } from "@mantine/core";
+import {
+	Box,
+	Card,
+	Group,
+	Progress,
+	Text,
+	useMantineColorScheme,
+} from "@mantine/core";
 
 interface ActivityCardProps {
 	title: string;

src/components/kinerja-divisi/division-list.tsx

@@ -1,34 +1,48 @@
 import {
-	Box,
 	Card,
 	Group,
+	Loader,
 	Stack,
 	Text,
 	useMantineColorScheme,
 } from "@mantine/core";
 import { ChevronRight } from "lucide-react";
+import { useEffect, useState } from "react";
+import { apiClient } from "@/utils/api-client";
 
 interface DivisionItem {
 	name: string;
 	count: number;
 }
 
-const divisionData: DivisionItem[] = [
-	{ name: "Kesejahteraan", count: 37 },
-	{ name: "Pemerintahan", count: 26 },
-	{ name: "Keuangan", count: 17 },
-	{ name: "Sekretaris Desa", count: 15 },
-	{ name: "Tata Usaha TK", count: 14 },
-	{ name: "Perangkat Kewilayahan", count: 12 },
-	{ name: "Pelayanan", count: 10 },
-	{ name: "Perencanaan", count: 9 },
-	{ name: "Tata Usaha & Umum", count: 7 },
-];
-
 export function DivisionList() {
 	const { colorScheme } = useMantineColorScheme();
 	const dark = colorScheme === "dark";
 
+	const [divisions, setDivisions] = useState<DivisionItem[]>([]);
+	const [loading, setLoading] = useState(true);
+
+	useEffect(() => {
+		async function fetchDivisions() {
+			try {
+				const { data } = await apiClient.GET("/api/division/");
+				if (data?.data) {
+					const mapped = data.data.map((div: { name: string; _count?: { activities: number } }) => ({
+						name: div.name,
+						count: div._count?.activities || 0,
+					}));
+					setDivisions(mapped);
+				}
+			} catch (error) {
+				console.error("Failed to fetch divisions", error);
+			} finally {
+				setLoading(false);
+			}
+		}
+
+		fetchDivisions();
+	}, []);
+
 	return (
 		<Card
 			p="md"
@@ -47,30 +61,40 @@ export function DivisionList() {
 				Divisi Teraktif
 			</Text>
 			<Stack gap="xs">
-				{divisionData.map((division, index) => (
-					<Group
-						key={index}
-						justify="space-between"
-						align="center"
-						style={{
-							padding: "8px 12px",
-							borderRadius: 8,
-							backgroundColor: dark ? "#334155" : "#F1F5F9",
-							transition: "background-color 0.2s",
-							cursor: "pointer",
-						}}
-					>
-						<Text size="sm" c={dark ? "white" : "#1E3A5F"}>
-							{division.name}
-						</Text>
-						<Group gap="xs">
-							<Text size="sm" fw={600} c={dark ? "white" : "#1E3A5F"}>
-								{division.count}
-							</Text>
-							<ChevronRight size={16} color={dark ? "#94A3B8" : "#64748B"} />
-						</Group>
+				{loading ? (
+					<Group justify="center" py="xl">
+						<Loader size="sm" />
 					</Group>
-				))}
+				) : divisions.length > 0 ? (
+					divisions.map((division, index) => (
+						<Group
+							key={index}
+							justify="space-between"
+							align="center"
+							style={{
+								padding: "8px 12px",
+								borderRadius: 8,
+								backgroundColor: dark ? "#334155" : "#F1F5F9",
+								transition: "background-color 0.2s",
+								cursor: "pointer",
+							}}
+						>
+							<Text size="sm" c={dark ? "white" : "#1E3A5F"}>
+								{division.name}
+							</Text>
+							<Group gap="xs">
+								<Text size="sm" fw={600} c={dark ? "white" : "#1E3A5F"}>
+									{division.count}
+								</Text>
+								<ChevronRight size={16} color={dark ? "#94A3B8" : "#64748B"} />
+							</Group>
+						</Group>
+					))
+				) : (
+					<Text size="xs" c="dimmed" ta="center">
+						Tidak ada data divisi
+					</Text>
+				)}
 			</Stack>
 		</Card>
 	);