refactor: modularize kinerja-divisi components per PromptDashboard.md

- Create ActivityCard component for program kegiatan cards
- Create DivisionList component for divisi teraktif with arrow icons
- Create DocumentChart component for bar chart (jumlah dokumen)
- Create ProgressChart component for pie chart (progres kegiatan)
- Create DiscussionPanel component for diskusi internal
- Create EventCard component for agenda hari ini
- Create ArchiveCard component for arsip digital perangkat desa
- Refactor main KinerjaDivisi component to use new modular components
- Implement responsive 3-column grid layout
- Add proper dark mode support with specified colors
- Add hover effects and smooth animations

New components structure:
  src/components/kinerja-divisi/
    - activity-card.tsx
    - archive-card.tsx
    - discussion-panel.tsx
    - division-list.tsx
    - document-chart.tsx
    - event-card.tsx
    - progress-chart.tsx
    - index.ts (exports)

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

src/components/kinerja-divisi/document-chart.tsx

@@ -0,0 +1,69 @@
+import { Card, Text, useMantineColorScheme } from "@mantine/core";
+import {
+	Bar,
+	BarChart,
+	CartesianGrid,
+	ResponsiveContainer,
+	Tooltip,
+	XAxis,
+	YAxis,
+} from "recharts";
+
+const documentData = [
+	{ name: "Gambar", value: 300 },
+	{ name: "Dokumen", value: 310 },
+];
+
+export function DocumentChart() {
+	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)",
+			}}
+			h="100%"
+		>
+			<Text size="sm" fw={600} c={dark ? "white" : "#1E3A5F"} mb="md">
+				Jumlah Dokumen
+			</Text>
+			<ResponsiveContainer width="100%" height={200}>
+				<BarChart data={documentData}>
+					<CartesianGrid
+						strokeDasharray="3 3"
+						vertical={false}
+						stroke={dark ? "#334155" : "#e5e7eb"}
+					/>
+					<XAxis
+						dataKey="name"
+						axisLine={false}
+						tickLine={false}
+						tick={{ fill: dark ? "#E2E8F0" : "#374151" }}
+					/>
+					<YAxis
+						axisLine={false}
+						tickLine={false}
+						tick={{ fill: dark ? "#E2E8F0" : "#374151" }}
+					/>
+					<Tooltip
+						contentStyle={{
+							backgroundColor: dark ? "#1E293B" : "white",
+							borderColor: dark ? "#334155" : "#e5e7eb",
+							borderRadius: "8px",
+						}}
+						labelStyle={{ color: dark ? "#E2E8F0" : "#374151" }}
+					/>
+					<Bar dataKey="value" fill="#3B82F6" radius={[4, 4, 0, 0]} />
+				</BarChart>
+			</ResponsiveContainer>
+		</Card>
+	);
+}