Rollback to 641200f3
This commit is contained in:
Manus Sandbox
@@ -1,154 +0,0 @@
|
||||
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 } 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: "#3b82f6" },
|
||||
{ name: "Chefs de service", value: chefsService, color: "#10b981" },
|
||||
{ name: "Autres", value: autres, color: "#f59e0b" },
|
||||
].filter(item => item.value > 0);
|
||||
}, [apprenants]);
|
||||
|
||||
const stats = [
|
||||
{
|
||||
title: "Formations actives",
|
||||
value: formations?.filter(f => f.actif).length || 0,
|
||||
icon: <GraduationCap className="w-8 h-8 text-blue-500" />,
|
||||
loading: loadingFormations,
|
||||
},
|
||||
{
|
||||
title: "Séquences ouvertes",
|
||||
value: sequences?.filter(s => s.statut === "ouverte").length || 0,
|
||||
icon: <Calendar className="w-8 h-8 text-green-500" />,
|
||||
loading: loadingSessions,
|
||||
},
|
||||
{
|
||||
title: "Apprenants inscrits",
|
||||
value: apprenants?.length || 0,
|
||||
icon: <Users className="w-8 h-8 text-purple-500" />,
|
||||
loading: loadingApprenants,
|
||||
},
|
||||
{
|
||||
title: "Séquences terminées",
|
||||
value: sequences?.filter(s => s.statut === "terminee").length || 0,
|
||||
icon: <CheckCircle className="w-8 h-8 text-orange-500" />,
|
||||
loading: loadingSessions,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<DashboardLayout>
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">Tableau de bord</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Gestion des formations Manager Itinova
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
{stats.map((stat, index) => (
|
||||
<Card key={index}>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">
|
||||
{stat.title}
|
||||
</CardTitle>
|
||||
{stat.icon}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{stat.loading ? (
|
||||
<Skeleton className="h-8 w-16" />
|
||||
) : (
|
||||
<div className="text-2xl font-bold">{stat.value}</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Graphique de répartition par fonction */}
|
||||
{statsFonction.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<PieChartIcon className="w-5 h-5" />
|
||||
Répartition des apprenants par fonction
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Distribution des {apprenants?.length || 0} apprenants selon leur fonction
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{loadingApprenants ? (
|
||||
<div className="h-80 flex items-center justify-center">
|
||||
<Skeleton className="h-64 w-64 rounded-full" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-80">
|
||||
<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"
|
||||
>
|
||||
{statsFonction.map((entry, index) => (
|
||||
<Cell key={`cell-${index}`} fill={entry.color} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Bienvenue dans l'espace d'administration</CardTitle>
|
||||
<CardDescription>
|
||||
Gérez vos formations, sequences et apprenants depuis le menu de navigation.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<h3 className="font-semibold">Fonctionnalités principales :</h3>
|
||||
<ul className="list-disc list-inside space-y-1 text-sm text-muted-foreground">
|
||||
<li>Créer et gérer les formations avec liens d'inscription uniques</li>
|
||||
<li>Organiser les sequences avec limitation à 12 participants</li>
|
||||
<li>Gérer les inscriptions avec blocage automatique à J-15</li>
|
||||
<li>Exporter les listes d'inscrits en PDF ou Excel</li>
|
||||
<li>Générer des invitations Outlook et envoyer des emails automatiques</li>
|
||||
</ul>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user