117 lines
2.5 KiB
TypeScript
117 lines
2.5 KiB
TypeScript
import {
|
|
Card,
|
|
Group,
|
|
Loader,
|
|
Text,
|
|
useMantineColorScheme,
|
|
} from "@mantine/core";
|
|
import { useEffect, useState } from "react";
|
|
import {
|
|
Bar,
|
|
BarChart,
|
|
CartesianGrid,
|
|
Cell,
|
|
ResponsiveContainer,
|
|
Tooltip,
|
|
XAxis,
|
|
YAxis,
|
|
} from "recharts";
|
|
import { apiClient } from "@/utils/api-client";
|
|
|
|
interface DocumentData {
|
|
name: string;
|
|
jumlah: number;
|
|
color: string;
|
|
}
|
|
|
|
export function DocumentChart() {
|
|
const { colorScheme } = useMantineColorScheme();
|
|
const dark = colorScheme === "dark";
|
|
|
|
const [data, setData] = useState<DocumentData[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
async function fetchDocumentStats() {
|
|
try {
|
|
const res = await apiClient.GET("/api/division/documents/stats");
|
|
if (res.data?.data) {
|
|
setData(res.data.data);
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to fetch document stats", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
fetchDocumentStats();
|
|
}, []);
|
|
|
|
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>
|
|
{loading ? (
|
|
<Group justify="center" py="xl">
|
|
<Loader />
|
|
</Group>
|
|
) : data.length > 0 ? (
|
|
<ResponsiveContainer width="100%" height={200}>
|
|
<BarChart data={data}>
|
|
<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" }}
|
|
allowDecimals={false}
|
|
/>
|
|
<Tooltip
|
|
contentStyle={{
|
|
backgroundColor: dark ? "#1E293B" : "white",
|
|
borderColor: dark ? "#334155" : "#e5e7eb",
|
|
borderRadius: "8px",
|
|
}}
|
|
labelStyle={{ color: dark ? "#E2E8F0" : "#374151" }}
|
|
/>
|
|
<Bar dataKey="jumlah" radius={[4, 4, 0, 0]}>
|
|
{data.map((entry) => (
|
|
<Cell key={`cell-${entry.name}`} fill={entry.color} />
|
|
))}
|
|
</Bar>
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
) : (
|
|
<Group justify="center" py="xl">
|
|
<Text size="sm" c="dimmed">
|
|
Tidak ada dokumen
|
|
</Text>
|
|
</Group>
|
|
)}
|
|
</Card>
|
|
);
|
|
}
|