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

src/components/kinerja-divisi.tsx

@@ -1,4 +1,7 @@
-import { Grid, Stack } from "@mantine/core";
+import { Card, Grid, Stack } from "@mantine/core";
+import dayjs from "dayjs";
+import { useEffect, useState } from "react";
+import { apiClient } from "@/utils/api-client";
 import { ActivityCard } from "./kinerja-divisi/activity-card";
 import { ArchiveCard } from "./kinerja-divisi/archive-card";
 import { DiscussionPanel } from "./kinerja-divisi/discussion-panel";
@@ -7,34 +10,6 @@ import { DocumentChart } from "./kinerja-divisi/document-chart";
 import { EventCard } from "./kinerja-divisi/event-card";
 import { ProgressChart } from "./kinerja-divisi/progress-chart";
 
-// Data for program kegiatan (Section 1)
-const programKegiatanData = [
-	{
-		title: "Rakor 2025",
-		date: "3 Juli 2025",
-		progress: 90,
-		status: "Selesai" as const,
-	},
-	{
-		title: "Pemutakhiran Indeks Desa",
-		date: "3 Juli 2025",
-		progress: 85,
-		status: "Selesai" as const,
-	},
-	{
-		title: "Mengurus Akta Cerai Warga",
-		date: "3 Juli 2025",
-		progress: 80,
-		status: "Selesai" as const,
-	},
-	{
-		title: "Pasek 7 Desa Adat",
-		date: "3 Juli 2025",
-		progress: 92,
-		status: "Selesai" as const,
-	},
-];
-
 // Data for arsip digital (Section 5)
 const archiveData = [
 	{ name: "Surat Keputusan" },
@@ -44,20 +19,70 @@ const archiveData = [
 ];
 
 const KinerjaDivisi = () => {
+	const [activities, setActivities] = useState<any[]>([]);
+	const [todayEvents, setTodayEvents] = useState<any[]>([]);
+	const [loading, setLoading] = useState(true);
+
+	useEffect(() => {
+		async function fetchData() {
+			try {
+				const [activityRes, eventRes] = await Promise.all([
+					apiClient.GET("/api/division/activities"),
+					apiClient.GET("/api/event/today"),
+				]);
+
+				if (activityRes.data?.data) {
+					setActivities(activityRes.data.data);
+				}
+				if (eventRes.data?.data) {
+					setTodayEvents(eventRes.data.data);
+				}
+			} catch (error) {
+				console.error("Failed to fetch kinerja divisi data", error);
+			} finally {
+				setLoading(false);
+			}
+		}
+
+		fetchData();
+	}, []);
+
+	// Format events for EventCard
+	const formattedEvents = todayEvents.map((event) => ({
+		time: dayjs(event.startDate).format("HH:mm"),
+		event: event.title,
+	}));
+
 	return (
 		<Stack gap="lg">
 			{/* SECTION 1 — PROGRAM KEGIATAN */}
 			<Grid gutter="md">
-				{programKegiatanData.map((kegiatan, index) => (
-					<Grid.Col key={index} span={{ base: 12, md: 6, lg: 3 }}>
+				{activities.slice(0, 4).map((kegiatan, index) => (
+					<Grid.Col
+						key={kegiatan.id || index}
+						span={{ base: 12, md: 6, lg: 3 }}
+					>
 						<ActivityCard
 							title={kegiatan.title}
-							date={kegiatan.date}
+							date={dayjs(kegiatan.createdAt).format("D MMMM YYYY")}
 							progress={kegiatan.progress}
-							status={kegiatan.status}
+							status={
+								kegiatan.status === "SELESAI"
+									? "Selesai"
+									: kegiatan.status === "BERJALAN"
+										? "Berjalan"
+										: "Tertunda"
+							}
 						/>
 					</Grid.Col>
 				))}
+				{!loading && activities.length === 0 && (
+					<Grid.Col span={12}>
+						<Card p="md" radius="xl" withBorder ta="center" c="dimmed">
+							Tidak ada aktivitas terbaru
+						</Card>
+					</Grid.Col>
+				)}
 			</Grid>
 
 			{/* SECTION 2 — GRID DASHBOARD (3 Columns) */}
@@ -82,7 +107,7 @@ const KinerjaDivisi = () => {
 			<DiscussionPanel />
 
 			{/* SECTION 4 — ACARA HARI INI */}
-			<EventCard />
+			<EventCard agendas={formattedEvents} />
 
 			{/* SECTION 5 — ARSIP DIGITAL PERANGKAT DESA */}
 			<Grid gutter="md">