From bb3baf813aff0f7428ded727422c2a8b1ba8aed7 Mon Sep 17 00:00:00 2001
From: Manus <dev-agent@manus.ai>
Date: Thu, 8 Jan 2026 10:24:58 -0500
Subject: [PATCH] =?UTF-8?q?Checkpoint:=20Am=C3=A9lioration=20majeure=20de?=
 =?UTF-8?q?=20la=20lisibilit=C3=A9=20de=20la=20colonne=20"Dates=20concern?=
 =?UTF-8?q?=C3=A9es"=20dans=20le=20tableau=20des=20rappels=20automatiques?=
 =?UTF-8?q?=20avec=20un=20syst=C3=A8me=20de=20badges=20color=C3=A9s=20et?=
 =?UTF-8?q?=20iconographiques=20:=20formations=20en=20bleu=20avec=20ic?=
 =?UTF-8?q?=C3=B4ne=20GraduationCap,=20s=C3=A9quences=20en=20vert=20avec?=
 =?UTF-8?q?=20ic=C3=B4ne=20CalendarDays,=20dates=20individuelles=20en=20or?=
 =?UTF-8?q?ange,=20et=20"Toutes=20les=20dates"=20en=20gris=20avec=20ic?=
 =?UTF-8?q?=C3=B4ne=20Calendar.=20Hi=C3=A9rarchie=20visuelle=20claire=20av?=
 =?UTF-8?q?ec=20formations/s=C3=A9quences=20sur=20la=20premi=C3=A8re=20lig?=
 =?UTF-8?q?ne=20et=20dates=20en=20dessous=20l=C3=A9g=C3=A8rement=20indent?=
 =?UTF-8?q?=C3=A9es.=20Chaque=20groupe=20formation/s=C3=A9quence=20est=20v?=
 =?UTF-8?q?isuellement=20s=C3=A9par=C3=A9=20pour=20faciliter=20le=20scan?=
 =?UTF-8?q?=20rapide.=20Les=20badges=20utilisent=20des=20couleurs=20de=20f?=
 =?UTF-8?q?ond=20pastel=20(bg-blue-100,=20bg-green-100,=20bg-orange-50,=20?=
 =?UTF-8?q?bg-gray-50)=20avec=20texte=20contrast=C3=A9=20pour=20une=20exce?=
 =?UTF-8?q?llente=20lisibilit=C3=A9.=20Cette=20refonte=20transforme=20une?=
 =?UTF-8?q?=20colonne=20dense=20et=20difficile=20=C3=A0=20lire=20en=20une?=
 =?UTF-8?q?=20interface=20intuitive=20et=20visuellement=20agr=C3=A9able.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/pages/AdminRappels.tsx | 52 ++++++++++++++++++++++---------
 todo.md                           |  5 +++
 2 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/client/src/pages/AdminRappels.tsx b/client/src/pages/AdminRappels.tsx
index 509e443..8e6cc89 100644
--- a/client/src/pages/AdminRappels.tsx
+++ b/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">
-        {Object.entries(grouped).map(([key, dates]: [string, any]) => (
-          <div key={key}>
-            <div className="font-medium">{key}</div>
-            <div className="text-muted-foreground">
-              {dates.map((d: any, idx: number) => (
-                <span key={d.dateFormationId}>
+      <div className="space-y-2">
+        {Object.values(grouped).map((group: any, groupIdx: number) => (
+          <div key={groupIdx} className="space-y-1">
+            <div className="flex items-start gap-1 flex-wrap">
+              <Badge className="bg-blue-100 text-blue-800 border-blue-300 hover:bg-blue-100">
+                <GraduationCap className="w-3 h-3 mr-1" />
+                {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 && ", "}
-                </span>
+                </Badge>
               ))}
             </div>
           </div>
diff --git a/todo.md b/todo.md
index ef4c810..00b8f10 100644
--- a/todo.md
+++ b/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