refactor: modularize dashboard components per PromptDashboard.md

- Create reusable StatCard component for header metrics
- Create ChartSurat component for bar chart (surat statistics)
- Create DivisionProgress component for divisi teraktif
- Create ChartAPBDes component for APBDes horizontal bar chart
- Create ActivityList component for calendar events
- Create SatisfactionChart component for donut chart
- Create SDGSCard component for SDGs metrics
- Refactor DashboardContent to use new modular components
- Add proper dark mode support with specified colors
- Implement responsive grid layout (12/6/1 columns)
- Add custom SDGs icons (Energy, Peace, Health, Poverty, Ocean)

New components structure:
  src/components/dashboard/
    - stat-card.tsx
    - chart-surat.tsx
    - chart-apbdes.tsx
    - division-progress.tsx
    - activity-list.tsx
    - satisfaction-chart.tsx
    - sdgs-card.tsx
    - index.ts (exports)

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

src/components/dashboard/sdgs-card.tsx

@@ -0,0 +1,53 @@
+import { Box, Card, Group, Text, useMantineColorScheme } from "@mantine/core";
+import type { ReactNode } from "react";
+
+interface SDGSCardProps {
+	title: string;
+	score: number;
+	icon: ReactNode;
+	color: string;
+	bgColor: string;
+}
+
+export function SDGSCard({
+	title,
+	score,
+	icon,
+	color,
+	bgColor,
+}: SDGSCardProps) {
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
+
+	return (
+		<Card
+			p="md"
+			radius="xl"
+			withBorder
+			bg={bgColor}
+			style={{
+				borderColor: dark ? "#334155" : bgColor,
+				boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+			}}
+		>
+			<Group justify="space-between" align="flex-start" w="100%">
+				<Box style={{ flex: 1 }}>
+					<Text size="sm" c={dark ? "white" : "gray.8"} fw={500} mb="xs">
+						{title}
+					</Text>
+					<Text size="xl" fw={700} c={color}>
+						{score.toFixed(2)}
+					</Text>
+				</Box>
+				<Box
+					style={{
+						color,
+						opacity: 0.8,
+					}}
+				>
+					{icon}
+				</Box>
+			</Group>
+		</Card>
+	);
+}