264 lines
12 KiB
TypeScript
264 lines
12 KiB
TypeScript
import DashboardLayout from "@/components/DashboardLayout";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { trpc } from "@/lib/trpc";
|
|
import { GraduationCap, Calendar, Users, CheckCircle, PieChart as PieChartIcon, Building2, TrendingUp } from "lucide-react";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from "recharts";
|
|
import { useMemo } from "react";
|
|
|
|
export default function Admin() {
|
|
const { data: formations, isLoading: loadingFormations } = trpc.formations.list.useQuery();
|
|
const { data: sequences, isLoading: loadingSessions } = trpc.sequences.list.useQuery();
|
|
const { data: apprenants, isLoading: loadingApprenants } = trpc.apprenants.list.useQuery();
|
|
|
|
// Statistiques par fonction
|
|
const statsFonction = useMemo(() => {
|
|
if (!apprenants) return [];
|
|
|
|
const directeurs = apprenants.filter(a => a.fonction === "directeur").length;
|
|
const chefsService = apprenants.filter(a => a.fonction === "chef_service").length;
|
|
const autres = apprenants.filter(a => a.fonction === "autre").length;
|
|
|
|
return [
|
|
{ name: "Directeurs", value: directeurs, color: "#93c5fd" },
|
|
{ name: "Chefs de service", value: chefsService, color: "#6ee7b7" },
|
|
{ name: "Autres", value: autres, color: "#fcd34d" },
|
|
].filter(item => item.value > 0);
|
|
}, [apprenants]);
|
|
|
|
// Statistiques par établissement
|
|
const statsEtablissement = useMemo(() => {
|
|
if (!apprenants) return [];
|
|
|
|
const etablissementCounts: Record<string, number> = {};
|
|
apprenants.forEach(a => {
|
|
const code = a.codeEtablissement || "Non renseigné";
|
|
etablissementCounts[code] = (etablissementCounts[code] || 0) + 1;
|
|
});
|
|
|
|
const colors = ["#93c5fd", "#6ee7b7", "#fcd34d", "#fca5a5", "#c4b5fd", "#f9a8d4", "#67e8f9", "#bef264", "#fdba74", "#a5b4fc"];
|
|
|
|
return Object.entries(etablissementCounts)
|
|
.map(([name, value], index) => ({
|
|
name,
|
|
value,
|
|
color: colors[index % colors.length],
|
|
}))
|
|
.sort((a, b) => b.value - a.value)
|
|
.slice(0, 10); // Top 10 établissements
|
|
}, [apprenants]);
|
|
|
|
const stats = [
|
|
{
|
|
title: "Formations actives",
|
|
value: formations?.filter(f => f.actif).length || 0,
|
|
icon: GraduationCap,
|
|
gradient: "from-blue-300 to-blue-400",
|
|
borderColor: "border-l-blue-400",
|
|
bgColor: "bg-blue-50/80",
|
|
iconBg: "bg-gradient-to-br from-blue-300 to-blue-400",
|
|
loading: loadingFormations,
|
|
},
|
|
{
|
|
title: "Séquences ouvertes",
|
|
value: sequences?.filter(s => s.statut === "ouverte").length || 0,
|
|
icon: Calendar,
|
|
gradient: "from-green-300 to-emerald-400",
|
|
borderColor: "border-l-green-400",
|
|
bgColor: "bg-green-50/80",
|
|
iconBg: "bg-gradient-to-br from-green-300 to-emerald-400",
|
|
loading: loadingSessions,
|
|
},
|
|
{
|
|
title: "Apprenants inscrits",
|
|
value: apprenants?.length || 0,
|
|
icon: Users,
|
|
gradient: "from-purple-300 to-purple-400",
|
|
borderColor: "border-l-purple-400",
|
|
bgColor: "bg-purple-50/80",
|
|
iconBg: "bg-gradient-to-br from-purple-300 to-purple-400",
|
|
loading: loadingApprenants,
|
|
},
|
|
{
|
|
title: "Séquences terminées",
|
|
value: sequences?.filter(s => s.statut === "terminee").length || 0,
|
|
icon: CheckCircle,
|
|
gradient: "from-orange-300 to-orange-400",
|
|
borderColor: "border-l-orange-400",
|
|
bgColor: "bg-orange-50/80",
|
|
iconBg: "bg-gradient-to-br from-orange-300 to-orange-400",
|
|
loading: loadingSessions,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<DashboardLayout>
|
|
<div className="space-y-8 animate-in fade-in duration-500">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-4xl font-bold tracking-tight bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
|
|
Tableau de bord
|
|
</h1>
|
|
<p className="text-muted-foreground mt-2 text-lg">
|
|
Gestion des formations Manager Itinova
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
|
<TrendingUp className="w-4 h-4 text-green-500" />
|
|
<span>Données en temps réel</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Cartes de statistiques avec animations */}
|
|
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
|
|
{stats.map((stat, index) => {
|
|
const Icon = stat.icon;
|
|
return (
|
|
<Card
|
|
key={index}
|
|
className={`
|
|
relative overflow-hidden border-l-4 ${stat.borderColor} ${stat.bgColor}
|
|
transition-all duration-300 hover:shadow-xl hover:scale-105 hover:-translate-y-1
|
|
animate-in slide-in-from-bottom-4
|
|
`}
|
|
style={{ animationDelay: `${index * 100}ms` }}
|
|
>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3">
|
|
<CardTitle className="text-sm font-semibold text-gray-700">
|
|
{stat.title}
|
|
</CardTitle>
|
|
<div className={`p-3 rounded-xl ${stat.iconBg} shadow-lg transition-transform duration-300 hover:rotate-12`}>
|
|
<Icon className="w-6 h-6 text-white" />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{stat.loading ? (
|
|
<Skeleton className="h-10 w-20" />
|
|
) : (
|
|
<div className="space-y-1">
|
|
<div className={`text-3xl font-bold bg-gradient-to-r ${stat.gradient} bg-clip-text text-transparent`}>
|
|
{stat.value}
|
|
</div>
|
|
<div className="flex items-center gap-1 text-xs text-green-600 font-medium">
|
|
<TrendingUp className="w-3 h-3" />
|
|
<span>Actif</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
{/* Effet de brillance au survol */}
|
|
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000" />
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Graphiques de répartition avec animations */}
|
|
<div className="grid gap-6 md:grid-cols-2">
|
|
{/* Graphique de répartition par fonction */}
|
|
{statsFonction.length > 0 && (
|
|
<Card className="border-2 border-blue-100 transition-all duration-300 hover:shadow-xl hover:border-blue-300 animate-in slide-in-from-left-4" style={{ animationDelay: "400ms" }}>
|
|
<CardHeader className="bg-gradient-to-r from-blue-50 to-purple-50 border-b-2 border-blue-100">
|
|
<CardTitle className="flex items-center gap-3 text-xl">
|
|
<div className="p-2 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 shadow-md">
|
|
<PieChartIcon className="w-6 h-6 text-white" />
|
|
</div>
|
|
<span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent font-bold">
|
|
Répartition des apprenants par fonction
|
|
</span>
|
|
</CardTitle>
|
|
<CardDescription className="text-base mt-2">
|
|
Distribution des {apprenants?.length || 0} apprenants selon leur fonction
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="pt-6">
|
|
{loadingApprenants ? (
|
|
<div className="h-80 flex items-center justify-center">
|
|
<Skeleton className="h-64 w-64 rounded-full" />
|
|
</div>
|
|
) : (
|
|
<div className="h-80 transition-all duration-500 hover:scale-105">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<PieChart>
|
|
<Pie
|
|
data={statsFonction}
|
|
cx="50%"
|
|
cy="50%"
|
|
labelLine={false}
|
|
label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
|
|
outerRadius={100}
|
|
fill="#8884d8"
|
|
dataKey="value"
|
|
animationBegin={0}
|
|
animationDuration={800}
|
|
>
|
|
{statsFonction.map((entry, index) => (
|
|
<Cell key={`cell-${index}`} fill={entry.color} />
|
|
))}
|
|
</Pie>
|
|
<Tooltip />
|
|
<Legend />
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Graphique de répartition par établissement */}
|
|
{statsEtablissement.length > 0 && (
|
|
<Card className="border-2 border-green-100 transition-all duration-300 hover:shadow-xl hover:border-green-300 animate-in slide-in-from-right-4" style={{ animationDelay: "400ms" }}>
|
|
<CardHeader className="bg-gradient-to-r from-green-50 to-emerald-50 border-b-2 border-green-100">
|
|
<CardTitle className="flex items-center gap-3 text-xl">
|
|
<div className="p-2 rounded-lg bg-gradient-to-br from-green-500 to-emerald-600 shadow-md">
|
|
<Building2 className="w-6 h-6 text-white" />
|
|
</div>
|
|
<span className="bg-gradient-to-r from-green-600 to-emerald-600 bg-clip-text text-transparent font-bold">
|
|
Répartition des apprenants par établissement
|
|
</span>
|
|
</CardTitle>
|
|
<CardDescription className="text-base mt-2">
|
|
Top 10 des établissements avec le plus d'apprenants
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="pt-6">
|
|
{loadingApprenants ? (
|
|
<div className="h-80 flex items-center justify-center">
|
|
<Skeleton className="h-64 w-64 rounded-full" />
|
|
</div>
|
|
) : (
|
|
<div className="h-80 transition-all duration-500 hover:scale-105">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<PieChart>
|
|
<Pie
|
|
data={statsEtablissement}
|
|
cx="50%"
|
|
cy="50%"
|
|
labelLine={false}
|
|
label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
|
|
outerRadius={100}
|
|
fill="#8884d8"
|
|
dataKey="value"
|
|
animationBegin={0}
|
|
animationDuration={800}
|
|
>
|
|
{statsEtablissement.map((entry, index) => (
|
|
<Cell key={`cell-${index}`} fill={entry.color} />
|
|
))}
|
|
</Pie>
|
|
<Tooltip />
|
|
<Legend />
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</DashboardLayout>
|
|
);
|
|
}
|