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/activity-card.tsx

@@ -0,0 +1,95 @@
+import {
+	Box,
+	Card,
+	Group,
+	Progress,
+	Text,
+	useMantineColorScheme,
+} from "@mantine/core";
+
+interface ActivityCardProps {
+	title: string;
+	date: string;
+	progress: number;
+	status: "selesai" | "berjalan" | "tertunda";
+}
+
+export function ActivityCard({
+	title,
+	date,
+	progress,
+	status,
+}: ActivityCardProps) {
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
+
+	const getStatusColor = (s: string) => {
+		switch (s) {
+			case "selesai":
+				return "#22C55E";
+			case "berjalan":
+				return "#3B82F6";
+			case "tertunda":
+				return "#EF4444";
+			default:
+				return "#9CA3AF";
+		}
+	};
+
+	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)",
+			}}
+		>
+			<Box
+				style={{
+					borderLeft: `4px solid #3B82F6`,
+					paddingLeft: 12,
+					marginBottom: 12,
+				}}
+			>
+				<Text size="sm" fw={600} c={dark ? "white" : "#1E3A5F"}>
+					{title}
+				</Text>
+			</Box>
+
+			<Group justify="space-between" mb="xs">
+				<Text size="xs" c="dimmed">
+					{date}
+				</Text>
+				<Box
+					style={{
+						backgroundColor: getStatusColor(status),
+						color: "white",
+						padding: "2px 8px",
+						borderRadius: 4,
+						fontSize: 11,
+						fontWeight: 600,
+					}}
+				>
+					{status.toUpperCase()}
+				</Box>
+			</Group>
+
+			<Progress
+				value={progress}
+				size="sm"
+				radius="xl"
+				color={progress === 100 ? "green" : "yellow"}
+				animated={progress < 100}
+			/>
+
+			<Text size="xs" c="dimmed" mt="xs" ta="right">
+				{progress}%
+			</Text>
+		</Card>
+	);
+}