feat(dashboard): connect dashboard components to database

src/components/dashboard/activity-list.tsx

@@ -2,28 +2,51 @@ import {
 	Box,
 	Card,
 	Group,
+	Loader,
 	Stack,
 	Text,
 	Title,
 	useMantineColorScheme,
 } from "@mantine/core";
+import dayjs from "dayjs";
 import { Calendar } from "lucide-react";
+import { useEffect, useState } from "react";
+import { apiClient } from "@/utils/api-client";
 
 interface EventData {
 	date: string;
 	title: string;
 }
 
-const events: EventData[] = [
-	{ date: "1 Oktober 2025", title: "Hari Kesaktian Pancasila" },
-	{ date: "15 Oktober 2025", title: "Davest" },
-	{ date: "19 Oktober 2025", title: "Rapat Koordinasi" },
-];
-
 export function ActivityList() {
 	const { colorScheme } = useMantineColorScheme();
 	const dark = colorScheme === "dark";
 
+	const [data, setData] = useState<EventData[]>([]);
+	const [loading, setLoading] = useState(true);
+
+	useEffect(() => {
+		async function fetchEvents() {
+			try {
+				const res = await apiClient.GET("/api/event/");
+				if (res.data?.data) {
+					setData(
+						(res.data.data as any[]).map((e) => ({
+							date: dayjs(e.startDate).format("D MMMM YYYY"),
+							title: e.title,
+						})),
+					);
+				}
+			} catch (error) {
+				console.error("Failed to fetch events", error);
+			} finally {
+				setLoading(false);
+			}
+		}
+
+		fetchEvents();
+	}, []);
+
 	return (
 		<Card
 			p="md"
@@ -48,22 +71,32 @@ export function ActivityList() {
 				</Title>
 			</Group>
 			<Stack gap="md">
-				{events.map((event) => (
-					<Box
-						key={`${event.title}-${event.date}`}
-						style={{
-							borderLeft: "4px solid var(--mantine-color-blue-filled)",
-							paddingLeft: 12,
-						}}
-					>
-						<Text size="sm" c="dimmed">
-							{event.date}
-						</Text>
-						<Text fw={500} c={dark ? "white" : "gray.9"}>
-							{event.title}
-						</Text>
-					</Box>
-				))}
+				{loading ? (
+					<Group justify="center" py="xl">
+						<Loader />
+					</Group>
+				) : data.length > 0 ? (
+					data.map((event) => (
+						<Box
+							key={`${event.title}-${event.date}`}
+							style={{
+								borderLeft: "4px solid var(--mantine-color-blue-filled)",
+								paddingLeft: 12,
+							}}
+						>
+							<Text size="sm" c="dimmed">
+								{event.date}
+							</Text>
+							<Text fw={500} c={dark ? "white" : "gray.9"}>
+								{event.title}
+							</Text>
+						</Box>
+					))
+				) : (
+					<Text size="sm" c="dimmed" ta="center">
+						Tidak ada kegiatan mendatang
+					</Text>
+				)}
 			</Stack>
 		</Card>
 	);