Checkpoint: Refonte de l'affichage des rappels dans le tableau de gestion des séquences : remplacement de la colonne unique "Rappels configurés" par deux colonnes distinctes "Rappels pré-formation" et "Rappels post-formation". Chaque colonne affiche les rappels correspondants avec leurs badges colorés (bleu pour pré-formation, vert pour post-formation) et l'icône Bell. Les rappels sont organisés par date de formation (une ligne par date). Affichage d'un tiret "-" quand aucun rappel n'est configuré pour une catégorie. Cette séparation en deux colonnes améliore considérablement la lisibilité et permet de visualiser instantanément la configuration des rappels avant et après chaque formation. Les deux colonnes restent visibles dans les vues complète et réduite car ce sont des informations essentielles pour la gestion des communications automatiques.

This commit is contained in:
Manus
2026-01-08 11:40:10 -05:00
parent 8c71e715a8
commit 70c45ab064
2 changed files with 51 additions and 38 deletions

View File

@@ -696,7 +696,8 @@ export default function AdminSequences() {
<TableHead>Formation</TableHead>
<TableHead>Nom</TableHead>
<TableHead>Dates</TableHead>
<TableHead>Rappels configurés</TableHead>
<TableHead>Rappels pré-formation</TableHead>
<TableHead>Rappels post-formation</TableHead>
{!isCompactView && (
<>
<TableHead>Lieu</TableHead>
@@ -725,49 +726,55 @@ export default function AdminSequences() {
</div>
</TableCell>
<TableCell>
<div className="space-y-2">
<div className="space-y-1.5">
{sequence.dates.map((date: any) => {
const rappelsPre = date.rappels?.filter((r: any) => r.timing === 'pre_formation') || [];
return (
<div key={date.id}>
{rappelsPre.length > 0 ? (
<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>
) : (
<span className="text-xs text-muted-foreground italic">-</span>
)}
</div>
);
})}
</div>
</TableCell>
<TableCell>
<div className="space-y-1.5">
{sequence.dates.map((date: any) => {
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 key={date.id}>
{rappelsPost.length > 0 ? (
<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>
)}
{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>
) : (
<span className="text-xs text-muted-foreground italic">-</span>
)}
</div>
);