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/chart-surat.tsx

@@ -0,0 +1,110 @@
+import {
+	ActionIcon,
+	Box,
+	Card,
+	Group,
+	Text,
+	Title,
+	useMantineColorScheme,
+} from "@mantine/core";
+import {
+	Bar,
+	BarChart,
+	CartesianGrid,
+	ResponsiveContainer,
+	Tooltip,
+	XAxis,
+	YAxis,
+} from "recharts";
+
+const chartData = [
+	{ month: "Jan", value: 150 },
+	{ month: "Feb", value: 165 },
+	{ month: "Mar", value: 195 },
+	{ month: "Apr", value: 160 },
+	{ month: "Mei", value: 205 },
+	{ month: "Jun", value: 185 },
+];
+
+export function ChartSurat() {
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
+
+	return (
+		<Card
+			p="md"
+			radius="xl"
+			withBorder
+			bg={dark ? "#1E293B" : "white"}
+			style={{
+				borderColor: dark ? "#334155" : "white",
+				boxShadow: dark
+					? "0 1px 3px 0 rgb(0 0 0 / 0.1)"
+					: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+			}}
+		>
+			<Group justify="space-between" mb="md">
+				<Box>
+					<Title order={4} c={dark ? "white" : "gray.9"} mb={5}>
+						Statistik Pengajuan Surat
+					</Title>
+					<Text size="sm" c="dimmed">
+						Trend pengajuan surat 6 bulan terakhir
+					</Text>
+				</Box>
+				<ActionIcon variant="subtle" size="lg" radius="md">
+					<svg
+						width="20"
+						height="20"
+						viewBox="0 0 20 20"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M8 5L13 10L8 15"
+							stroke="currentColor"
+							strokeWidth="2"
+							strokeLinecap="round"
+							strokeLinejoin="round"
+						/>
+					</svg>
+				</ActionIcon>
+			</Group>
+			<ResponsiveContainer width="100%" height={300}>
+				<BarChart data={chartData}>
+					<CartesianGrid
+						strokeDasharray="3 3"
+						vertical={false}
+						stroke={dark ? "#334155" : "#e5e7eb"}
+					/>
+					<XAxis
+						dataKey="month"
+						axisLine={false}
+						tickLine={false}
+						tick={{ fill: dark ? "#E2E8F0" : "#374151" }}
+					/>
+					<YAxis
+						axisLine={false}
+						tickLine={false}
+						ticks={[0, 55, 110, 165, 220]}
+						tick={{ fill: dark ? "#E2E8F0" : "#374151" }}
+					/>
+					<Tooltip
+						contentStyle={{
+							backgroundColor: dark ? "#1E293B" : "white",
+							borderColor: dark ? "#334155" : "#e5e7eb",
+							borderRadius: "8px",
+							boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)",
+						}}
+						labelStyle={{ color: dark ? "#E2E8F0" : "#374151" }}
+					/>
+					<Bar
+						dataKey="value"
+						fill="var(--mantine-color-blue-filled)"
+						radius={[4, 4, 0, 0]}
+					/>
+				</BarChart>
+			</ResponsiveContainer>
+		</Card>
+	);
+}