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:
@@ -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" />
|
||||
|
||||
7
todo.md
7
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
|
||||
|
||||
Reference in New Issue
Block a user