Checkpoint: Implémentation des trois améliorations demandées : ajout de filtres par fonction sur les pages apprenants et inscrits, création d'un graphique circulaire de répartition par fonction sur le tableau de bord avec recharts, et personnalisation des templates d'emails (confirmation, teaser, rappel J-7) incluant la fonction de l'apprenant dans la salutation.

2025-11-12 09:35:58 -05:00
parent 9d591b64ba
commit ca9b1c3d37
8 changed files with 156 additions and 23 deletions
--- a/client/src/pages/Admin.tsx
+++ b/client/src/pages/Admin.tsx
@@ -1,14 +1,31 @@
 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 { 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: sessions, isLoading: loadingSessions } = trpc.sessions.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",
@@ -66,6 +83,51 @@ export default function Admin() {
          ))}
        </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>
--- a/client/src/pages/AdminApprenants.tsx
+++ b/client/src/pages/AdminApprenants.tsx
@@ -16,6 +16,7 @@ export default function AdminApprenants() {
  const [open, setOpen] = useState(false);
  const [editingId, setEditingId] = useState<number | null>(null);
  const [searchTerm, setSearchTerm] = useState("");
+  const [filterFonction, setFilterFonction] = useState<string>("all");
  const [formData, setFormData] = useState({
    nom: "",
    prenom: "",
@@ -104,9 +105,11 @@ export default function AdminApprenants() {
        apprenant.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
        apprenant.codeEtablissement.toLowerCase().includes(searchTerm.toLowerCase());

-      return matchesSearch;
+      const matchesFonction = filterFonction === "all" || apprenant.fonction === filterFonction;
+
+      return matchesSearch && matchesFonction;
    });
-  }, [apprenants, searchTerm]);
+  }, [apprenants, searchTerm, filterFonction]);

  return (
    <DashboardLayout>
@@ -218,17 +221,34 @@ export default function AdminApprenants() {
            </CardTitle>
          </CardHeader>
          <CardContent>
-            <div className="space-y-2">
-              <Label htmlFor="search">Rechercher un apprenant</Label>
-              <div className="relative">
-                <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
-                <Input
-                  id="search"
-                  placeholder="Nom, prénom, email ou code établissement..."
-                  value={searchTerm}
-                  onChange={(e) => setSearchTerm(e.target.value)}
-                  className="pl-8"
-                />
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="search">Rechercher un apprenant</Label>
+                <div className="relative">
+                  <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    id="search"
+                    placeholder="Nom, prénom, email ou code établissement..."
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                    className="pl-8"
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="filterFonction">Filtrer par fonction</Label>
+                <Select value={filterFonction} onValueChange={setFilterFonction}>
+                  <SelectTrigger id="filterFonction">
+                    <SelectValue placeholder="Toutes les fonctions" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">Toutes les fonctions</SelectItem>
+                    <SelectItem value="directeur">Directeur</SelectItem>
+                    <SelectItem value="chef_service">Chef de service</SelectItem>
+                    <SelectItem value="autre">Autre</SelectItem>
+                  </SelectContent>
+                </Select>
              </div>
            </div>

--- a/client/src/pages/AdminSessionInscrits.tsx
+++ b/client/src/pages/AdminSessionInscrits.tsx
@@ -21,6 +21,7 @@ export default function AdminSessionInscrits() {
  const [searchTerm, setSearchTerm] = useState("");
  const [filterStatut, setFilterStatut] = useState<string>("all");
  const [filterEtablissement, setFilterEtablissement] = useState<string>("all");
+  const [filterFonction, setFilterFonction] = useState<string>("all");
  const [sortBy, setSortBy] = useState<"date" | "nom">("date");

  const utils = trpc.useUtils();
@@ -151,7 +152,11 @@ export default function AdminSessionInscrits() {
      const matchesEtablissement = filterEtablissement === "all" || 
        inscription.apprenant?.codeEtablissement === filterEtablissement;

-      return matchesSearch && matchesStatut && matchesEtablissement;
+      // Filtre par fonction
+      const matchesFonction = filterFonction === "all" || 
+        inscription.apprenant?.fonction === filterFonction;
+
+      return matchesSearch && matchesStatut && matchesEtablissement && matchesFonction;
    });

    // Tri
@@ -165,7 +170,7 @@ export default function AdminSessionInscrits() {
    });

    return filtered;
-  }, [inscriptions, searchTerm, filterStatut, filterEtablissement, sortBy]);
+  }, [inscriptions, searchTerm, filterStatut, filterEtablissement, filterFonction, sortBy]);

  const getStatutBadge = (statut: string) => {
    const styles = {
@@ -213,7 +218,7 @@ export default function AdminSessionInscrits() {
            </CardTitle>
          </CardHeader>
          <CardContent>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
              {/* Recherche */}
              <div className="space-y-2">
                <Label htmlFor="search">Rechercher</Label>
@@ -261,6 +266,22 @@ export default function AdminSessionInscrits() {
                </Select>
              </div>

+              {/* Filtre par fonction */}
+              <div className="space-y-2">
+                <Label htmlFor="filterFonction">Fonction</Label>
+                <Select value={filterFonction} onValueChange={setFilterFonction}>
+                  <SelectTrigger id="filterFonction">
+                    <SelectValue placeholder="Toutes les fonctions" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">Toutes les fonctions</SelectItem>
+                    <SelectItem value="directeur">Directeur</SelectItem>
+                    <SelectItem value="chef_service">Chef de service</SelectItem>
+                    <SelectItem value="autre">Autre</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
              {/* Tri */}
              <div className="space-y-2">
                <Label htmlFor="sortBy">Trier par</Label>