Checkpoint: Modification de l'affichage de la gestion des attestations pour regrouper les apprenants par séquence:

- Ajout d'en-têtes visuels pour chaque séquence avec nom et compteur d'apprenants
- Badge affichant le nombre d'attestations envoyées par séquence
- Amélioration de l'organisation et de la lisibilité pour les formateurs
- Suppression de la colonne "Séquence" devenue redondante
This commit is contained in:
Manus
2026-01-25 08:50:50 -05:00
parent 964b83d4d1
commit 63e8ea17d1
2 changed files with 60 additions and 24 deletions

View File

@@ -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>
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>
{/* 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/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" />

View File

@@ -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