Checkpoint: Séparation de l'affichage des rappels configurés en deux catégories distinctes dans la gestion des séquences : rappels pré-formation (timing = 'pre_formation') affichés en bleu avec label "Pré-formation", et rappels post-formation (timing = 'post_formation') affichés en vert avec label "Post-formation". Chaque catégorie possède son propre label coloré (text-blue-600 pour pré, text-green-600 pour post) et ses badges sont stylisés en conséquence (bg-blue-50/text-blue-700/border-blue-300 pour pré, bg-green-50/text-green-700/border-green-300 pour post). Les rappels sont filtrés dynamiquement par date : rappelsPre = date.rappels?.filter((r: any) => r.timing === 'pre_formation') et rappelsPost = date.rappels?.filter((r: any) => r.timing === 'post_formation'). L'affichage est organisé verticalement avec space-y-1 entre les catégories, chaque catégorie ayant son propre conteneur avec space-y-0.5 pour le label et les badges. Cette séparation visuelle claire permet de distinguer instantanément les rappels envoyés avant la formation (préparation des apprenants) des rappels envoyés après (suivi et feedback). Les badges conservent l'icône Bell et affichent le nom du rappel. Si aucun rappel n'existe dans les deux catégories, le message "Aucun rappel" est affiché en italique gris.

This commit is contained in:
Manus
2026-01-08 11:18:00 -05:00
parent 8965dd0ea6
commit 8c71e715a8
2 changed files with 51 additions and 19 deletions

View File

@@ -725,25 +725,53 @@ export default function AdminSequences() {
</div>
</TableCell>
<TableCell>
<div className="space-y-1">
{sequence.dates.map((date: any) => (
<div key={date.id} className="flex flex-wrap gap-1">
{date.rappels && date.rappels.length > 0 ? (
date.rappels.map((rappel: any) => (
<Badge
key={rappel.id}
variant="outline"
className="bg-purple-50 text-purple-700 border-purple-300 text-xs"
>
<Bell className="w-3 h-3 mr-1" />
{rappel.nom}
</Badge>
))
) : (
<span className="text-xs text-muted-foreground italic">Aucun rappel</span>
)}
</div>
))}
<div className="space-y-2">
{sequence.dates.map((date: any) => {
const rappelsPre = date.rappels?.filter((r: any) => r.timing === 'pre_formation') || [];
const rappelsPost = date.rappels?.filter((r: any) => r.timing === 'post_formation') || [];
return (
<div key={date.id} className="space-y-1">
{rappelsPre.length > 0 && (
<div className="space-y-0.5">
<div className="text-[10px] font-medium text-blue-600">Pré-formation</div>
<div className="flex flex-wrap gap-1">
{rappelsPre.map((rappel: any) => (
<Badge
key={rappel.id}
variant="outline"
className="bg-blue-50 text-blue-700 border-blue-300 text-xs"
>
<Bell className="w-3 h-3 mr-1" />
{rappel.nom}
</Badge>
))}
</div>
</div>
)}
{rappelsPost.length > 0 && (
<div className="space-y-0.5">
<div className="text-[10px] font-medium text-green-600">Post-formation</div>
<div className="flex flex-wrap gap-1">
{rappelsPost.map((rappel: any) => (
<Badge
key={rappel.id}
variant="outline"
className="bg-green-50 text-green-700 border-green-300 text-xs"
>
<Bell className="w-3 h-3 mr-1" />
{rappel.nom}
</Badge>
))}
</div>
</div>
)}
{rappelsPre.length === 0 && rappelsPost.length === 0 && (
<span className="text-xs text-muted-foreground italic">Aucun rappel</span>
)}
</div>
);
})}
</div>
</TableCell>
{!isCompactView && (