Checkpoint: Amélioration majeure de la lisibilité de la colonne "Dates concernées" dans le tableau des rappels automatiques avec un système de badges colorés et iconographiques : formations en bleu avec icône GraduationCap, séquences en vert avec icône CalendarDays, dates individuelles en orange, et "Toutes les dates" en gris avec icône Calendar. Hiérarchie visuelle claire avec formations/séquences sur la première ligne et dates en dessous légèrement indentées. Chaque groupe formation/séquence est visuellement séparé pour faciliter le scan rapide. Les badges utilisent des couleurs de fond pastel (bg-blue-100, bg-green-100, bg-orange-50, bg-gray-50) avec texte contrasté pour une excellente lisibilité. Cette refonte transforme une colonne dense et difficile à lire en une interface intuitive et visuellement agréable.

client/src/pages/AdminRappels.tsx

@@ -21,8 +21,9 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
 import { trpc } from "@/lib/trpc";
-import { Bell, Download, Edit, Plus, Trash2 } from "lucide-react";
+import { Bell, Download, Edit, Plus, Trash2, GraduationCap, Calendar, CalendarDays } from "lucide-react";
 import { toast } from "sonner";
 import { FileUpload } from "@/components/FileUpload";
 import { DateFormationMultiSelect } from "@/components/DateFormationMultiSelect";
@@ -257,30 +258,53 @@ export default function AdminRappels() {
 
   const formatDatesInfo = (rappel: any) => {
     if (!rappel.datesDetails || rappel.datesDetails.length === 0) {
-      return <span className="text-muted-foreground italic">Toutes les dates</span>;
+      return (
+        <div className="flex items-center gap-2">
+          <Badge variant="outline" className="bg-gray-50 text-gray-600 border-gray-300">
+            <Calendar className="w-3 h-3 mr-1" />
+            Toutes les dates
+          </Badge>
+        </div>
+      );
     }
 
     // Grouper par formation et séquence
     const grouped = rappel.datesDetails.reduce((acc: any, date: any) => {
-      const key = `${date.formationNom} - ${date.sequenceNom}`;
+      const key = `${date.formationNom}|||${date.sequenceNom}`;
       if (!acc[key]) {
-        acc[key] = [];
+        acc[key] = {
+          formationNom: date.formationNom,
+          sequenceNom: date.sequenceNom,
+          dates: []
+        };
       }
-      acc[key].push(date);
+      acc[key].dates.push(date);
       return acc;
     }, {});
 
     return (
-      <div className="text-sm space-y-1">
+      <div className="space-y-2">
-        {Object.entries(grouped).map(([key, dates]: [string, any]) => (
+        {Object.values(grouped).map((group: any, groupIdx: number) => (
-          <div key={key}>
+          <div key={groupIdx} className="space-y-1">
-            <div className="font-medium">{key}</div>
+            <div className="flex items-start gap-1 flex-wrap">
-            <div className="text-muted-foreground">
+              <Badge className="bg-blue-100 text-blue-800 border-blue-300 hover:bg-blue-100">
-              {dates.map((d: any, idx: number) => (
+                <GraduationCap className="w-3 h-3 mr-1" />
-                <span key={d.dateFormationId}>
+                {group.formationNom}
+              </Badge>
+              <Badge className="bg-green-100 text-green-800 border-green-300 hover:bg-green-100">
+                <CalendarDays className="w-3 h-3 mr-1" />
+                {group.sequenceNom}
+              </Badge>
+            </div>
+            <div className="flex items-center gap-1 flex-wrap ml-1">
+              {group.dates.map((d: any, idx: number) => (
+                <Badge 
+                  key={d.dateFormationId}
+                  variant="outline"
+                  className="bg-orange-50 text-orange-700 border-orange-300 text-xs"
+                >
                   Date {d.ordre}
-                  {idx < dates.length - 1 && ", "}
+                </Badge>
-                </span>
               ))}
             </div>
           </div>

todo.md

@@ -580,3 +580,8 @@
 ## Colorisation des icônes du menu latéral
 - [x] Appliquer des couleurs par catégorie aux icônes du menu (Tableau de bord: bleu, Gestion: vert, Configuration: orange, Traçabilité: violet, Analyses: rose)
 - [x] Vérifier l'affichage visuel du menu colorisé
+
+## Amélioration visuelle de la colonne Dates concernées dans les rappels
+- [x] Ajouter des badges colorés pour distinguer formations, séquences et dates
+- [x] Utiliser des icônes pour identifier chaque type d'élément
+- [x] Améliorer la hiérarchie typographique pour faciliter la lecture