Billy Marcello
373 lines
14 KiB
TypeScript
373 lines
14 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import { PieChart, Pie, Cell, ResponsiveContainer } from "recharts";
|
|
import { Search, ChevronDown, Users, UserCheck, UserX, Clock } from "lucide-react";
|
|
import NavbarAdmin from "../Layout/NavbarAdmin";
|
|
import SidebarAdmin from "../Layout/SidebarAdmin";
|
|
|
|
type ChartDataItem = {
|
|
name: string;
|
|
value: number;
|
|
};
|
|
|
|
type StatCard = {
|
|
title: string;
|
|
value: number;
|
|
subtitle: string;
|
|
icon: React.ReactNode;
|
|
iconColor: string;
|
|
};
|
|
|
|
type DashboardApiResponse = {
|
|
totalPendaftar: number;
|
|
totalDiterima: number;
|
|
totalDitolak: number;
|
|
totalDiproses: number;
|
|
universitas: ChartDataItem[];
|
|
negara: ChartDataItem[];
|
|
};
|
|
|
|
const UNIVERSITAS_COLORS = ["#001a66", "#334d99", "#6699cc", "#99b3ff"];
|
|
const PENERIMAAN_COLORS = ["#0088ff", "#00cc00", "#ff3333"];
|
|
const NEGARA_COLORS = ["#cc3333", "#dd6666", "#ee9999", "#f0b3b3", "#f5cccc"];
|
|
|
|
const Dashboard: React.FC = () => {
|
|
const [loading, setLoading] = useState(true);
|
|
const [errorMessage, setErrorMessage] = useState("");
|
|
const [statCards, setStatCards] = useState<StatCard[]>([]);
|
|
const [universitasData, setUniversitasData] = useState<ChartDataItem[]>([]);
|
|
const [penerimaanData, setPenerimaanData] = useState<ChartDataItem[]>([]);
|
|
const [negaraData, setNegaraData] = useState<ChartDataItem[]>([]);
|
|
|
|
useEffect(() => {
|
|
const fetchDashboardData = async () => {
|
|
try {
|
|
const response = await fetch(
|
|
`${import.meta.env.VITE_API_BASE_URL}/lowongan-magang-api/get`
|
|
);
|
|
const result = await response.json();
|
|
|
|
if (!response.ok) {
|
|
console.error("Gagal mengambil data dashboard:", result.message);
|
|
setErrorMessage(result.message || "Gagal mengambil data dashboard.");
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
const data: DashboardApiResponse = result.data;
|
|
|
|
const statCardsFromApi: StatCard[] = [
|
|
{
|
|
title: "Total Pendaftar",
|
|
value: data.totalPendaftar,
|
|
subtitle: "+200 dari batch sebelumnya", // sesuaikan bila BE sudah support
|
|
icon: <Users size={24} />,
|
|
iconColor: "#0088ff",
|
|
},
|
|
{
|
|
title: "Total Diterima",
|
|
value: data.totalDiterima,
|
|
subtitle: `${(
|
|
(data.totalDiterima / (data.totalPendaftar || 1)) *
|
|
100
|
|
).toFixed(1)}% acceptance rate`,
|
|
icon: <UserCheck size={24} />,
|
|
iconColor: "#00cc00",
|
|
},
|
|
{
|
|
title: "Total Ditolak",
|
|
value: data.totalDitolak,
|
|
subtitle: `${(
|
|
(data.totalDitolak / (data.totalPendaftar || 1)) *
|
|
100
|
|
).toFixed(1)}% rejection rate`,
|
|
icon: <UserX size={24} />,
|
|
iconColor: "#ff3333",
|
|
},
|
|
{
|
|
title: "Sedang Diproses",
|
|
value: data.totalDiproses,
|
|
subtitle: `${(
|
|
(data.totalDiproses / (data.totalPendaftar || 1)) *
|
|
100
|
|
).toFixed(1)}% pending review`,
|
|
icon: <Clock size={24} />,
|
|
iconColor: "#ffaa00",
|
|
},
|
|
];
|
|
|
|
const penerimaanFromApi: ChartDataItem[] = [
|
|
{ name: "Total Pendaftar", value: data.totalPendaftar },
|
|
{ name: "Total Diterima", value: data.totalDiterima },
|
|
{ name: "Total Ditolak", value: data.totalDitolak },
|
|
];
|
|
|
|
setStatCards(statCardsFromApi);
|
|
setUniversitasData(data.universitas || []);
|
|
setPenerimaanData(penerimaanFromApi);
|
|
setNegaraData(data.negara || []);
|
|
setLoading(false);
|
|
} catch (error) {
|
|
console.error("Terjadi kesalahan saat mengambil data dashboard:", error);
|
|
setErrorMessage("Terjadi kesalahan saat mengambil data dashboard.");
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchDashboardData();
|
|
}, []);
|
|
|
|
return (
|
|
<div className="min-h-screen w-full overflow-hidden">
|
|
<NavbarAdmin />
|
|
|
|
<div className="flex flex-row">
|
|
<SidebarAdmin />
|
|
|
|
<div className="w-full flex-col flex-wrap bg-white p-10">
|
|
{/* Header Section */}
|
|
<div className="mb-[50px] flex flex-row items-center justify-between">
|
|
<h2 className="text-[24px] font-semibold">Dashboard</h2>
|
|
|
|
<div className="flex items-center gap-4">
|
|
{/* Batch Filter */}
|
|
<button className="flex items-center gap-2 rounded-xl border border-gray-300 bg-white px-[20px] py-[10px] text-gray-700 hover:bg-gray-50">
|
|
Batch 3 - 2025
|
|
<ChevronDown size={18} />
|
|
</button>
|
|
|
|
{/* Search Box */}
|
|
<div className="flex items-center gap-2 rounded-xl border border-gray-300 bg-white px-[20px] py-[10px]">
|
|
<Search size={18} className="text-gray-400" />
|
|
<input
|
|
type="text"
|
|
placeholder="Nama, Jurusan,"
|
|
className="w-52 text-sm text-gray-700 placeholder-gray-400 outline-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Loading / Error State */}
|
|
{loading && (
|
|
<p className="text-center text-gray-600">Memuat data dashboard...</p>
|
|
)}
|
|
|
|
{!loading && errorMessage && (
|
|
<p className="text-center text-red-500">{errorMessage}</p>
|
|
)}
|
|
|
|
{!loading && !errorMessage && (
|
|
<>
|
|
{/* Stat Cards */}
|
|
<div className="mb-8 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
|
|
{statCards.map((card, index) => (
|
|
<div
|
|
key={index}
|
|
className="rounded-lg border border-gray-300 bg-white p-6"
|
|
>
|
|
<div className="mb-4 flex items-center gap-3">
|
|
<div
|
|
className="rounded-lg bg-gray-100 p-2"
|
|
style={{ color: card.iconColor }}
|
|
>
|
|
{card.icon}
|
|
</div>
|
|
<h3 className="text-sm font-medium text-blue-600">
|
|
{card.title}
|
|
</h3>
|
|
</div>
|
|
<div className="mb-2">
|
|
<p className="text-2xl font-bold text-gray-900">
|
|
{card.value}
|
|
</p>
|
|
</div>
|
|
<p className="text-xs" style={{ color: card.iconColor }}>
|
|
{card.subtitle}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Charts Section */}
|
|
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
|
{/* Universitas Chart */}
|
|
<div className="rounded-lg border border-gray-300 bg-white p-6">
|
|
<h2 className="mb-6 text-lg font-bold text-gray-900">
|
|
Universitas
|
|
</h2>
|
|
|
|
<div className="mb-6 flex justify-center">
|
|
<ResponsiveContainer width="100%" height={250}>
|
|
<PieChart>
|
|
<Pie
|
|
data={universitasData}
|
|
cx="50%"
|
|
cy="50%"
|
|
innerRadius={0}
|
|
outerRadius={100}
|
|
paddingAngle={2}
|
|
dataKey="value"
|
|
>
|
|
{universitasData.map((_, index) => (
|
|
<Cell
|
|
key={`universitas-cell-${index}`}
|
|
fill={
|
|
UNIVERSITAS_COLORS[
|
|
index % UNIVERSITAS_COLORS.length
|
|
]
|
|
}
|
|
/>
|
|
))}
|
|
</Pie>
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
|
|
{/* Legend */}
|
|
<div className="space-y-3 text-sm">
|
|
{universitasData.map((item, index) => (
|
|
<div
|
|
key={`universitas-legend-${index}`}
|
|
className="flex items-center justify-between"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<div
|
|
className="h-3 w-3 rounded"
|
|
style={{
|
|
backgroundColor:
|
|
UNIVERSITAS_COLORS[
|
|
index % UNIVERSITAS_COLORS.length
|
|
],
|
|
}}
|
|
/>
|
|
<span className="text-gray-700">{item.name}</span>
|
|
</div>
|
|
<span className="text-sm font-semibold text-gray-900">
|
|
{item.value}%
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Column - Penerimaan & Negara */}
|
|
<div className="space-y-6">
|
|
{/* Penerimaan Chart */}
|
|
<div className="rounded-lg border border-gray-300 bg-white p-6">
|
|
<h2 className="mb-6 text-lg font-bold text-gray-900">
|
|
Penerimaan
|
|
</h2>
|
|
|
|
<div className="mb-6 flex justify-center">
|
|
<ResponsiveContainer width="100%" height={180}>
|
|
<PieChart>
|
|
<Pie
|
|
data={penerimaanData}
|
|
cx="50%"
|
|
cy="50%"
|
|
innerRadius={0}
|
|
outerRadius={70}
|
|
paddingAngle={2}
|
|
dataKey="value"
|
|
>
|
|
{penerimaanData.map((_, index) => (
|
|
<Cell
|
|
key={`penerimaan-cell-${index}`}
|
|
fill={
|
|
PENERIMAAN_COLORS[
|
|
index % PENERIMAAN_COLORS.length
|
|
]
|
|
}
|
|
/>
|
|
))}
|
|
</Pie>
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
|
|
{/* Legend */}
|
|
<div className="space-y-2 text-sm">
|
|
{penerimaanData.map((item, index) => (
|
|
<div
|
|
key={`penerimaan-legend-${index}`}
|
|
className="flex items-center gap-2"
|
|
>
|
|
<div
|
|
className="h-3 w-3 rounded"
|
|
style={{
|
|
backgroundColor:
|
|
PENERIMAAN_COLORS[
|
|
index % PENERIMAAN_COLORS.length
|
|
],
|
|
}}
|
|
/>
|
|
<span className="text-gray-700">{item.name}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Negara Chart */}
|
|
<div className="rounded-lg border border-gray-300 bg-white p-6">
|
|
<h2 className="mb-6 text-lg font-bold text-gray-900">
|
|
Negara
|
|
</h2>
|
|
|
|
<div className="mb-6 flex justify-center">
|
|
<ResponsiveContainer width="100%" height={180}>
|
|
<PieChart>
|
|
<Pie
|
|
data={negaraData}
|
|
cx="50%"
|
|
cy="50%"
|
|
innerRadius={0}
|
|
outerRadius={70}
|
|
paddingAngle={2}
|
|
dataKey="value"
|
|
>
|
|
{negaraData.map((_, index) => (
|
|
<Cell
|
|
key={`negara-cell-${index}`}
|
|
fill={
|
|
NEGARA_COLORS[
|
|
index % NEGARA_COLORS.length
|
|
]
|
|
}
|
|
/>
|
|
))}
|
|
</Pie>
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
|
|
{/* Legend */}
|
|
<div className="space-y-2 text-sm">
|
|
{negaraData.map((item, index) => (
|
|
<div
|
|
key={`negara-legend-${index}`}
|
|
className="flex items-center gap-2"
|
|
>
|
|
<div
|
|
className="h-3 w-3 rounded"
|
|
style={{
|
|
backgroundColor:
|
|
NEGARA_COLORS[index % NEGARA_COLORS.length],
|
|
}}
|
|
/>
|
|
<span className="text-gray-700">{item.name}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Dashboard;
|