Checkpoint: Application complète de gestion des formations Manager Itinova avec toutes les fonctionnalités : gestion des formations/sessions/apprenants, système d'inscription avec validations, génération d'invitations Outlook, emails automatiques, exports PDF/Excel, et documentation complète.

2025-11-12 08:38:33 -05:00
parent 641200f3a4
commit 0fc35596d9
25 changed files with 4391 additions and 52 deletions
--- a/client/src/pages/Admin.tsx
+++ b/client/src/pages/Admin.tsx
@@ -0,0 +1,92 @@
+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 } from "lucide-react";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function Admin() {
+  const { data: formations, isLoading: loadingFormations } = trpc.formations.list.useQuery();
+  const { data: sessions, isLoading: loadingSessions } = trpc.sessions.list.useQuery();
+  const { data: apprenants, isLoading: loadingApprenants } = trpc.apprenants.list.useQuery();
+
+  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: "Sessions ouvertes",
+      value: sessions?.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: "Sessions terminées",
+      value: sessions?.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>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Bienvenue dans l'espace d'administration</CardTitle>
+            <CardDescription>
+              Gérez vos formations, sessions 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 sessions 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>
+  );
+}