feat: update components with Mantine UI and improve dark mode support

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

src/components/kinerja-divisi.tsx

@@ -1,265 +1,343 @@
-
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button"; // Correct import for Button
 import {
+	Stack,
+	Grid,
+	GridCol,
+	Group,
+	Text,
+	Title,
+	ActionIcon,
+	Progress as MantineProgress,
+	Box,
+	Badge as MantineBadge,
 	Card,
-	CardContent,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import { Progress } from "@/components/ui/progress";
-import {
-	Table,
-	TableBody,
-	TableCell,
-	TableHead,
-	TableHeader,
-	TableRow,
-} from "@/components/ui/table";
+	useMantineColorScheme,
+	ThemeIcon,
+	List,
+	Divider,
+	Skeleton
+} from "@mantine/core";
+import { Button } from "@/components/ui/button";
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from "recharts";
 
 const KinerjaDivisi = () => {
-	// Sample data for division performance
-	const divisions = [
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === 'dark';
+
+	// Data for division progress chart
+	const divisionProgressData = [
+		{ name: "Sekretariat", selesai: 12, berjalan: 5, tertunda: 2 },
+		{ name: "Keuangan", selesai: 8, berjalan: 7, tertunda: 1 },
+		{ name: "Sosial", selesai: 10, berjalan: 3, tertunda: 4 },
+		{ name: "Humas", selesai: 6, berjalan: 9, tertunda: 3 },
+	];
+
+	// Division task summaries
+	const divisionTasks = [
 		{
-			id: 1,
-			name: "Divisi Teknologi",
-			target: 95,
-			achievement: 87,
-			status: "On Track",
-			projects: 12,
-			budget: "Rp 2.5M",
-			lastUpdate: "2 days ago",
+			name: "Sekretariat",
+			tasks: [
+				{ title: "Laporan Bulanan", status: "selesai" },
+				{ title: "Arsip Dokumen", status: "berjalan" },
+				{ title: "Undangan Rapat", status: "tertunda" },
+			]
 		},
 		{
-			id: 2,
-			name: "Divisi Keuangan",
-			target: 90,
-			achievement: 92,
-			status: "Above Target",
-			projects: 8,
-			budget: "Rp 1.8M",
-			lastUpdate: "1 day ago",
+			name: "Keuangan",
+			tasks: [
+				{ title: "Laporan APBDes", status: "selesai" },
+				{ title: "Verifikasi Dana", status: "tertunda" },
+				{ title: "Pengeluaran Harian", status: "berjalan" },
+			]
 		},
 		{
-			id: 3,
-			name: "Divisi SDM",
-			target: 85,
-			achievement: 78,
-			status: "Needs Attention",
-			projects: 6,
-			budget: "Rp 1.2M",
-			lastUpdate: "3 days ago",
+			name: "Sosial",
+			tasks: [
+				{ title: "Program Bantuan", status: "selesai" },
+				{ title: "Kegiatan Posyandu", status: "berjalan" },
+				{ title: "Monitoring Stunting", status: "tertunda" },
+			]
 		},
 		{
-			id: 4,
-			name: "Divisi Operasional",
-			target: 92,
-			achievement: 89,
-			status: "On Track",
-			projects: 15,
-			budget: "Rp 3.2M",
-			lastUpdate: "5 hours ago",
-		},
-		{
-			id: 5,
-			name: "Divisi Pemasaran",
-			target: 88,
-			achievement: 91,
-			status: "Above Target",
-			projects: 10,
-			budget: "Rp 2.1M",
-			lastUpdate: "1 day ago",
+			name: "Humas",
+			tasks: [
+				{ title: "Publikasi Kegiatan", status: "selesai" },
+				{ title: "Koordinasi Media", status: "berjalan" },
+				{ title: "Laporan Kegiatan", status: "tertunda" },
+			]
 		},
 	];
 
+	// Archive items
+	const archiveItems = [
+		{ name: "Surat Keputusan", count: 12 },
+		{ name: "Laporan Keuangan", count: 8 },
+		{ name: "Dokumentasi", count: 24 },
+		{ name: "Notulensi Rapat", count: 15 },
+	];
+
+	// Activity progress
+	const activityProgress = [
+		{ name: "Pembangunan Jalan", progress: 75, date: "15 Feb 2026", status: "berjalan" },
+		{ name: "Posyandu Bulanan", progress: 100, date: "10 Feb 2026", status: "selesai" },
+		{ name: "Vaksinasi Massal", progress: 45, date: "20 Feb 2026", status: "berjalan" },
+		{ name: "Festival Budaya", progress: 20, date: "5 Mar 2026", status: "berjalan" },
+	];
+
+	// Document statistics
+	const documentStats = [
+		{ name: "Gambar", value: 42 },
+		{ name: "Dokumen", value: 87 },
+	];
+
+	// Activity progress statistics
+	const activityProgressStats = [
+		{ name: "Selesai", value: 12 },
+		{ name: "Dikerjakan", value: 8 },
+		{ name: "Segera Dikerjakan", value: 5 },
+		{ name: "Dibatalkan", value: 2 },
+	];
+
+	const COLORS = ['#10B981', '#F59E0B', '#EF4444', '#6B7280'];
+	const STATUS_COLORS: Record<string, string> = {
+		selesai: 'green',
+		berjalan: 'blue',
+		tertunda: 'red',
+		proses: 'yellow'
+	};
+
+	// Discussion data
+	const discussions = [
+		{ title: "Pembahasan APBDes 2026", sender: "Kepala Desa", timestamp: "2 jam yang lalu" },
+		{ title: "Kegiatan Posyandu", sender: "Divisi Sosial", timestamp: "5 jam yang lalu" },
+		{ title: "Festival Budaya", sender: "Divisi Humas", timestamp: "1 hari yang lalu" },
+	];
+
+	// Today's agenda
+	const todayAgenda = [
+		{ time: "09:00", event: "Rapat Evaluasi Bulanan" },
+		{ time: "14:00", event: "Koordinasi Program Bantuan" },
+	];
+
 	return (
-		<div className="space-y-6">
-			<div className="flex justify-between items-center">
-				<h1 className="text-3xl font-bold text-gray-900 dark:text-white">
-					Kinerja Divisi
-				</h1>
-				<div className="flex space-x-4">
-					<Button variant="default">Export Data</Button>
-					<Button variant="outline">Filter</Button>
-				</div>
-			</div>
-
-			<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-				<Card>
-					<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-						<CardTitle className="text-sm font-medium dark:text-gray-100">Total Divisi</CardTitle>
-						<div className="h-6 w-6 text-muted-foreground">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke="currentColor"
-								className="h-6 w-6"
-							>
-								<path
-									strokeLinecap="round"
-									strokeLinejoin="round"
-									strokeWidth={2}
-									d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
-								/>
-							</svg>
-						</div>
-					</CardHeader>
-					<CardContent>
-						<div className="text-2xl font-bold">5</div>
-						<p className="text-xs text-muted-foreground">Jumlah divisi aktif</p>
-					</CardContent>
-				</Card>
-
-				<Card>
-					<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-						<CardTitle className="text-sm font-medium dark:text-gray-100">
-							Rata-rata Pencapaian
-						</CardTitle>
-						<div className="h-6 w-6 text-muted-foreground">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke="currentColor"
-								className="h-6 w-6"
-							>
-								<path
-									strokeLinecap="round"
-									strokeLinejoin="round"
-									strokeWidth={2}
-									d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
-								/>
-							</svg>
-						</div>
-					</CardHeader>
-					<CardContent>
-						<div className="text-2xl font-bold">87.4%</div>
-						<p className="text-xs text-muted-foreground">Target tercapai</p>
-					</CardContent>
-				</Card>
-
-				<Card>
-					<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-						<CardTitle className="text-sm font-medium dark:text-gray-100">
-							Divisi Melebihi Target
-						</CardTitle>
-						<div className="h-6 w-6 text-muted-foreground">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke="currentColor"
-								className="h-6 w-6"
-							>
-								<path
-									strokeLinecap="round"
-									strokeLinejoin="round"
-									strokeWidth={2}
-									d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
-								/>
-							</svg>
-						</div>
-					</CardHeader>
-					<CardContent>
-						<div className="text-2xl font-bold">2</div>
-						<p className="text-xs text-muted-foreground">Dari total 5 divisi</p>
-					</CardContent>
-				</Card>
-			</div>
-
-			<Card>
-				<CardHeader>
-					<CardTitle className="dark:text-gray-100">Detail Kinerja Divisi</CardTitle>
-				</CardHeader>
-				<CardContent>
-					<Table>
-						<TableHeader>
-							<TableRow>
-								<TableHead className="dark:text-white">Nama Divisi</TableHead>
-								<TableHead className="dark:text-white">Target (%)</TableHead>
-								<TableHead className="dark:text-white">Pencapaian (%)</TableHead>
-								<TableHead className="dark:text-white">Status</TableHead>
-								<TableHead className="dark:text-white">Proyek Aktif</TableHead>
-								<TableHead className="dark:text-white">Anggaran</TableHead>
-								<TableHead className="dark:text-white">Terakhir Diperbarui</TableHead>
-							</TableRow>
-						</TableHeader>
-						<TableBody>
-							{divisions.map((division) => (
-								<TableRow key={division.id}>
-									<TableCell className="font-medium dark:text-white">
-										{division.name}
-									</TableCell>
-									<TableCell className="dark:text-white">
-										{division.target}%
-									</TableCell>
-									<TableCell className="dark:text-white">
-										{division.achievement}%
-									</TableCell>
-									<TableCell>
-										<div className="flex items-center">
-											<Progress
-												value={division.achievement}
-												max={100}
-												className="w-24 mr-2"
-											/>
-											<Badge
-												variant={
-													division.status === "Above Target"
-														? "success"
-														: division.status === "On Track"
-															? "secondary"
-															: "destructive"
-												}
-											>
-												{division.status}
-											</Badge>
-										</div>
-									</TableCell>
-									<TableCell className="dark:text-white">
-										{division.projects}
-									</TableCell>
-									<TableCell className="dark:text-white">
-										{division.budget}
-									</TableCell>
-									<TableCell className="dark:text-white">
-										{division.lastUpdate}
-									</TableCell>
-								</TableRow>
-							))}
-						</TableBody>
-					</Table>
-				</CardContent>
+		<Stack gap="lg">
+			{/* Grafik Progres Tugas per Divisi */}
+			<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }} >
+				<Title order={4} mb="md" c={dark ? 'white' : 'darmasaba-navy'}>
+					Grafik Progres Tugas per Divisi
+				</Title>
+				<ResponsiveContainer width="100%" height={300}>
+					<BarChart data={divisionProgressData}>
+						<CartesianGrid strokeDasharray="3 3" vertical={false} stroke={dark ? "#141D34" : "white"} />
+						<XAxis
+							dataKey="name"
+							axisLine={false}
+							tickLine={false}
+							tick={{ fill: dark ? "var(--mantine-color-text)" : "var(--mantine-color-text)" }}
+						/>
+						<YAxis
+							axisLine={false}
+							tickLine={false}
+							tick={{ fill: dark ? "var(--mantine-color-text)" : "var(--mantine-color-text)" }}
+						/>
+						<Tooltip
+							contentStyle={dark
+								? { backgroundColor: 'var(--mantine-color-dark-7)', borderColor: 'var(--mantine-color-dark-6)' }
+								: {}}
+						/>
+						<Bar dataKey="selesai" stackId="a" fill="#10B981" name="Selesai" radius={[4, 4, 0, 0]} />
+						<Bar dataKey="berjalan" stackId="a" fill="#3B82F6" name="Berjalan" radius={[4, 4, 0, 0]} />
+						<Bar dataKey="tertunda" stackId="a" fill="#EF4444" name="Tertunda" radius={[4, 4, 0, 0]} />
+					</BarChart>
+				</ResponsiveContainer>
 			</Card>
 
-			<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-				<Card>
-					<CardHeader>
-						<CardTitle className="dark:text-gray-100">Grafik Pencapaian Divisi</CardTitle>
-					</CardHeader>					<CardContent>
-						<div className="h-80 flex items-center justify-center bg-gray-50 dark:bg-gray-700 rounded-lg">
-							<p className="text-gray-500 dark:text-gray-300">
-								Grafik pencapaian akan ditampilkan di sini
-							</p>
-						</div>
-					</CardContent>
-				</Card>
+			{/* Ringkasan Tugas per Divisi */}
+			<Grid gutter="md">
+				{divisionTasks.map((division, index) => (
+					<GridCol key={index} span={{ base: 12, md: 6, lg: 3 }}>
+						<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }} h="100%">
+							<Title order={4} mb="sm" c={dark ? 'white' : 'darmasaba-navy'}>
+								{division.name}
+							</Title>
+							<Stack gap="sm">
+								{division.tasks.map((task, taskIndex) => (
+									<Box key={taskIndex}>
+										<Group justify="space-between">
+											<Text size="sm" c={dark ? 'white' : 'darmasaba-navy'}>{task.title}</Text>
+											<MantineBadge
+												color={STATUS_COLORS[task.status] || 'gray'}
+												variant="light"
+											>
+												{task.status}
+											</MantineBadge>
+										</Group>
+									</Box>
+								))}
+							</Stack>
+						</Card>
+					</GridCol>
+				))}
+			</Grid>
 
-				<Card>
-					<CardHeader>
-						<CardTitle className="dark:text-gray-100">Distribusi Anggaran Divisi</CardTitle>
-					</CardHeader>					<CardContent>
-						<div className="h-80 flex items-center justify-center bg-gray-50 dark:bg-gray-700 rounded-lg">
-							<p className="text-gray-500 dark:text-gray-300">
-								Diagram distribusi anggaran akan ditampilkan di sini
-							</p>
-						</div>
-					</CardContent>
-				</Card>
-			</div>
-		</div>
+			{/* Arsip Digital Perangkat Desa */}
+			<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
+				<Title order={4} mb="md" c={dark ? 'white' : 'darmasaba-navy'}>
+					Arsip Digital Perangkat Desa
+				</Title>
+				<Grid gutter="md">
+					{archiveItems.map((item, index) => (
+						<GridCol key={index} span={{ base: 12, md: 6, lg: 3 }}>
+							<Card p="md" radius="md" withBorder bg={dark ? "#263852ff" : "#F1F5F9"} style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}>
+								<Group justify="space-between">
+									<Text c={dark ? 'white' : 'darmasaba-navy'} fw={500}>{item.name}</Text>
+									<Text c={dark ? 'white' : 'darmasaba-navy'} fw={700}>{item.count}</Text>
+								</Group>
+							</Card>
+						</GridCol>
+					))}
+				</Grid>
+			</Card>
+
+			{/* Kartu Progres Kegiatan */}
+			<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
+				<Title order={4} mb="md" c={dark ? 'white' : 'darmasaba-navy'}>
+					Progres Kegiatan / Program
+				</Title>
+				<Stack gap="md">
+					{activityProgress.map((activity, index) => (
+						<Card key={index} p="md" radius="md" withBorder bg={dark ? "#263852ff" : "#F1F5F9"} style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}>
+							<Group justify="space-between" mb="sm">
+								<Text c={dark ? 'white' : 'darmasaba-navy'} fw={500}>{activity.name}</Text>
+								<MantineBadge
+									color={STATUS_COLORS[activity.status] || 'gray'}
+									variant="light"
+								>
+									{activity.status}
+								</MantineBadge>
+							</Group>
+							<Group justify="space-between">
+								<MantineProgress
+									value={activity.progress}
+									size="sm"
+									radius="xl"
+									color={activity.progress === 100 ? "green" : "blue"}
+									w="calc(100% - 80px)"
+								/>
+								<Text size="sm" c={dark ? 'white' : 'darmasaba-navy'}>{activity.progress}%</Text>
+							</Group>
+							<Text size="sm" c="dimmed" mt="sm">{activity.date}</Text>
+						</Card>
+					))}
+				</Stack>
+			</Card>
+
+			{/* Statistik Dokumen & Progres Kegiatan */}
+			<Grid gutter="md">
+				<GridCol span={{ base: 12, lg: 6 }}>
+					<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
+						<Title order={4} mb="md" c={dark ? 'white' : 'darmasaba-navy'}>
+							Jumlah Dokumen
+						</Title>
+						<ResponsiveContainer width="100%" height={200}>
+							<BarChart data={documentStats}>
+								<CartesianGrid strokeDasharray="3 3" vertical={false} stroke={dark ? "#141D34" : "white"} />
+								<XAxis
+									dataKey="name"
+									axisLine={false}
+									tickLine={false}
+									tick={{ fill: dark ? "var(--mantine-color-text)" : "var(--mantine-color-text)" }}
+								/>
+								<YAxis
+									axisLine={false}
+									tickLine={false}
+									tick={{ fill: dark ? "var(--mantine-color-text)" : "var(--mantine-color-text)" }}
+								/>
+								<Tooltip
+									contentStyle={dark
+										? { backgroundColor: 'var(--mantine-color-dark-7)', borderColor: 'var(--mantine-color-dark-6)' }
+										: {}}
+								/>
+								<Bar dataKey="value" fill={dark ? "var(--mantine-color-blue-6)" : "var(--mantine-color-blue-filled)"} radius={[4, 4, 0, 0]} />
+							</BarChart>
+						</ResponsiveContainer>
+					</Card>
+				</GridCol>
+
+				<GridCol span={{ base: 12, lg: 6 }}>
+					<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
+						<Title order={4} mb="md" c={dark ? 'white' : 'darmasaba-navy'}>
+							Progres Kegiatan
+						</Title>
+						<ResponsiveContainer width="100%" height={200}>
+							<PieChart>
+								<Pie
+									data={activityProgressStats}
+									cx="50%"
+									cy="50%"
+									labelLine={false}
+									outerRadius={80}
+									fill="#8884d8"
+									dataKey="value"
+									label={({ name, percent }) => `${name}: ${percent ? (percent * 100).toFixed(0) : '0'}%`}
+								>
+									{activityProgressStats.map((entry, index) => (
+										<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+									))}
+								</Pie>
+								<Tooltip
+									contentStyle={dark
+										? { backgroundColor: 'var(--mantine-color-dark-7)', borderColor: 'var(--mantine-color-dark-6)' }
+										: {}}
+								/>
+							</PieChart>
+						</ResponsiveContainer>
+					</Card>
+				</GridCol>
+			</Grid>
+
+			{/* Diskusi Internal */}
+			<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
+				<Title order={4} mb="md" c={dark ? 'white' : 'darmasaba-navy'}>
+					Diskusi Internal
+				</Title>
+				<Stack gap="sm">
+					{discussions.map((discussion, index) => (
+						<Card key={index} p="md" radius="md" withBorder bg={dark ? "#263852ff" : "#F1F5F9"} style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}>
+							<Group justify="space-between">
+								<Text c={dark ? 'white' : 'darmasaba-navy'} fw={500}>{discussion.title}</Text>
+								<Text size="sm" c="dimmed">{discussion.timestamp}</Text>
+							</Group>
+							<Text size="sm" c="dimmed">{discussion.sender}</Text>
+						</Card>
+					))}
+				</Stack>
+			</Card>
+
+			{/* Agenda / Acara Hari Ini */}
+			<Card p="md" radius="md" withBorder bg={dark ? "#141D34" : "white"} style={{ borderColor: dark ? "#141D34" : "white" }}>
+				<Title order={4} mb="md" c={dark ? 'white' : 'darmasaba-navy'}>
+					Agenda / Acara Hari Ini
+				</Title>
+				{todayAgenda.length > 0 ? (
+					<Stack gap="sm">
+						{todayAgenda.map((agenda, index) => (
+							<Group key={index} align="flex-start">
+								<Box w={60}>
+									<Text c="dimmed">{agenda.time}</Text>
+								</Box>
+								<Divider orientation="vertical" mx="sm" />
+								<Text c={dark ? 'white' : 'darmasaba-navy'}>{agenda.event}</Text>
+							</Group>
+						))}
+					</Stack>
+				) : (
+					<Text c="dimmed" ta="center" py="md">
+						Tidak ada acara hari ini
+					</Text>
+				)}
+			</Card>
+		</Stack>
 	);
 };
 
-export default KinerjaDivisi;
+export default KinerjaDivisi;