import { Bar, BarChart, CartesianGrid, Cell, Pie, PieChart, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "recharts"; import { useMantineColorScheme } from "@mantine/core"; const KinerjaDivisi = () => { const { colorScheme } = useMantineColorScheme(); const dark = colorScheme === "dark"; // Top row - 4 activity cards const activities = [ { title: "Rakor 2025", progress: 100, date: "15 Jan 2025", }, { title: "Pemutakhiran Indeks Desa", progress: 100, date: "20 Feb 2025", }, { title: "Mengurus akta cerai warga", progress: 100, date: "5 Mar 2025", }, { title: "Pasek 7 desa adat", progress: 100, date: "10 Mar 2025", }, ]; // Document statistics const documentStats = [ { name: "Gambar", value: 300, color: "#FAC858" }, { name: "Dokumen", value: 310, color: "#92CC76" }, ]; // Activity progress statistics const activityProgressStats = [ { name: "Selesai", value: 83.33, fill: "#92CC76" }, { name: "Dikerjakan", value: 16.67, fill: "#FAC858" }, { name: "Segera Dikerjakan", value: 0, fill: "#5470C6" }, { name: "Dibatalkan", value: 0, fill: "#EE6767" }, ]; // Discussion data const discussions = [ { title: "Pembahasan APBDes 2026", sender: "Kepala Desa", date: "10 Mar 2025", }, { title: "Kegiatan Posyandu", sender: "Divisi Sosial", date: "9 Mar 2025", }, { title: "Festival Budaya", sender: "Divisi Humas", date: "8 Mar 2025", }, ]; return (
{/* Top Row - 4 Activity Cards */}
{activities.map((activity, index) => (
{/* Dark blue title bar */}

{activity.title}

{/* Orange progress bar */}
{/* Date and badge */}
{activity.date} Selesai
))}
{/* Second Row - Charts */}
{/* Left Card - Jumlah Dokumen (Bar Chart) */}

Jumlah Dokumen

{documentStats.map((entry, index) => ( ))}
{/* Right Card - Progres Kegiatan (Pie Chart) */}

Progres Kegiatan

item.value > 0)} cx="50%" cy="50%" outerRadius={80} dataKey="value" label={({ name, percent }) => `${name}: ${percent ? (percent * 100).toFixed(0) : 0}%` } > {activityProgressStats .filter(item => item.value > 0) .map((entry, index) => ( ))} {/* Legend */}
Segera Dikerjakan
Dikerjakan
Selesai
Dibatalkan
{/* Bottom Row */}
{/* Left Card - Diskusi */}

Diskusi

{discussions.map((discussion, index) => (

{discussion.title}

{discussion.sender} • {discussion.date}

))}
{/* Right Card - Acara Hari Ini */}

Acara Hari Ini

Tidak ada acara hari ini

); }; export default KinerjaDivisi;