From 63e8ea17d1b339974ba4cdb11bd65d051ee8b1ec Mon Sep 17 00:00:00 2001
From: Manus <dev-agent@manus.ai>
Date: Sun, 25 Jan 2026 08:50:50 -0500
Subject: [PATCH] =?UTF-8?q?Checkpoint:=20Modification=20de=20l'affichage?=
 =?UTF-8?q?=20de=20la=20gestion=20des=20attestations=20pour=20regrouper=20?=
 =?UTF-8?q?les=20apprenants=20par=20s=C3=A9quence:=20-=20Ajout=20d'en-t?=
 =?UTF-8?q?=C3=AAtes=20visuels=20pour=20chaque=20s=C3=A9quence=20avec=20no?=
 =?UTF-8?q?m=20et=20compteur=20d'apprenants=20-=20Badge=20affichant=20le?=
 =?UTF-8?q?=20nombre=20d'attestations=20envoy=C3=A9es=20par=20s=C3=A9quenc?=
 =?UTF-8?q?e=20-=20Am=C3=A9lioration=20de=20l'organisation=20et=20de=20la?=
 =?UTF-8?q?=20lisibilit=C3=A9=20pour=20les=20formateurs=20-=20Suppression?=
 =?UTF-8?q?=20de=20la=20colonne=20"S=C3=A9quence"=20devenue=20redondante?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/pages/AdminGestionAttestations.tsx | 77 +++++++++++++------
 todo.md                                       |  7 ++
 2 files changed, 60 insertions(+), 24 deletions(-)

diff --git a/client/src/pages/AdminGestionAttestations.tsx b/client/src/pages/AdminGestionAttestations.tsx
index d929f9f..1e06024 100644
--- a/client/src/pages/AdminGestionAttestations.tsx
+++ b/client/src/pages/AdminGestionAttestations.tsx
@@ -455,31 +455,56 @@ export default function AdminGestionAttestations() {
               {loadingApprenants ? (
                 <p className="text-center text-muted-foreground py-8">Chargement...</p>
               ) : apprenants && apprenants.length > 0 ? (
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead>Nom</TableHead>
-                      <TableHead>Prénom</TableHead>
-                      <TableHead>Email</TableHead>
-                      <TableHead>Séquence</TableHead>
-                      <TableHead>Statut attestation</TableHead>
-                      <TableHead>Actions</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {apprenants.map((item, index) => {
-                      const hasAttestation = !!item.attestation;
-                      const hasDocument = hasAttestation && (item.attestation.urlPdf || item.attestation.documentUrl);
-                      const isSent = hasAttestation && item.attestation.emailEnvoye;
-                      const documentUrl = item.attestation?.documentUrl || item.attestation?.urlPdf;
+                <div className="space-y-6">
+                  {/* Regrouper les apprenants par séquence */}
+                  {Object.entries(
+                    apprenants.reduce((acc: Record<string, typeof apprenants>, item) => {
+                      const sequenceKey = `${item.sequence.id}-${item.sequence.nom}`;
+                      if (!acc[sequenceKey]) acc[sequenceKey] = [];
+                      acc[sequenceKey].push(item);
+                      return acc;
+                    }, {})
+                  ).map(([sequenceKey, sequenceApprenants]) => {
+                    const sequenceName = sequenceKey.split('-').slice(1).join('-');
+                    return (
+                      <div key={sequenceKey} className="border rounded-lg overflow-hidden">
+                        {/* En-tête de séquence */}
+                        <div className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b px-4 py-3">
+                          <div className="flex items-center justify-between">
+                            <div>
+                              <h3 className="font-semibold text-lg text-blue-900">{sequenceName}</h3>
+                              <p className="text-sm text-blue-700">{sequenceApprenants.length} apprenant(s)</p>
+                            </div>
+                            <Badge variant="outline" className="bg-white">
+                              {sequenceApprenants.filter(a => a.attestation?.emailEnvoye).length} / {sequenceApprenants.length} envoyé(es)
+                            </Badge>
+                          </div>
+                        </div>
+                        
+                        {/* Tableau des apprenants de cette séquence */}
+                        <Table>
+                          <TableHeader>
+                            <TableRow>
+                              <TableHead>Nom</TableHead>
+                              <TableHead>Prénom</TableHead>
+                              <TableHead>Email</TableHead>
+                              <TableHead>Statut attestation</TableHead>
+                              <TableHead>Actions</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {sequenceApprenants.map((item, index) => {
+                              const hasAttestation = !!item.attestation;
+                              const hasDocument = hasAttestation && (item.attestation.urlPdf || item.attestation.documentUrl);
+                              const isSent = hasAttestation && item.attestation.emailEnvoye;
+                              const documentUrl = item.attestation?.documentUrl || item.attestation?.urlPdf;
 
-                      return (
-                        <TableRow key={item.inscription.id} className={index % 2 === 1 ? "bg-blue-50/70" : ""}>
-                          <TableCell>{item.apprenant.nom}</TableCell>
-                          <TableCell>{item.apprenant.prenom}</TableCell>
-                          <TableCell>{item.apprenant.email}</TableCell>
-                          <TableCell>{item.sequence.nom}</TableCell>
-                          <TableCell>
+                              return (
+                                <TableRow key={item.inscription.id} className={index % 2 === 1 ? "bg-blue-50/30" : ""}>
+                                  <TableCell>{item.apprenant.nom}</TableCell>
+                                  <TableCell>{item.apprenant.prenom}</TableCell>
+                                  <TableCell>{item.apprenant.email}</TableCell>
+                                  <TableCell>
                             {!hasDocument && (
                               <Badge variant="outline" className="bg-gray-50">
                                 Aucune attestation
@@ -547,6 +572,10 @@ export default function AdminGestionAttestations() {
                     })}
                   </TableBody>
                 </Table>
+              </div>
+            );
+          })}
+        </div>
               ) : (
                 <div className="text-center py-8">
                   <FileText className="h-12 w-12 text-gray-400 mx-auto mb-3" />
diff --git a/todo.md b/todo.md
index 9c8570d..a38bcc8 100644
--- a/todo.md
+++ b/todo.md
@@ -1265,4 +1265,11 @@
 - [x] Identifier le fichier de gestion des attestations
 - [x] Analyser les procédures backend concernées
 - [x] Corriger les restrictions d'accès pour les formateurs (getApprenantsWithStatus)
+- [x] Déployer sur le VPS
+
+## Regrouper les apprenants par séquence dans la gestion des attestations
+
+- [x] Analyser l'affichage actuel (regroupement par formation)
+- [x] Vérifier le backend (données de séquence déjà présentes)
+- [x] Adapter l'interface pour afficher les apprenants regroupés par séquence
 - [ ] Déployer sur le VPS