Checkpoint: Modification de l'affichage de la fenêtre des rappels automatiques : regroupement des informations de formation/séquence/dates sur une seule ligne au lieu de plusieurs badges, et resserrement des colonnes du tableau pour une meilleure lisibilité. Format compact : "Formation › Séquence : Date1, Date2". Déployé sur le serveur de production.

client/src/pages/AdminRappels.tsx

@@ -282,6 +282,54 @@ export default function AdminRappels() {
       return acc;
     }, {});
 
+    return (
+      <div className="space-y-1">
+        {Object.values(grouped).map((group: any, groupIdx: number) => (
+          <div key={groupIdx} className="flex items-center gap-1.5 text-sm">
+            <span className="font-medium text-blue-700">{group.formationNom}</span>
+            <span className="text-gray-400">›</span>
+            <span className="font-medium text-green-700">{group.sequenceNom}</span>
+            <span className="text-gray-400">:</span>
+            <span className="text-gray-600">
+              {group.dates.map((d: any, idx: number) => (
+                <span key={idx}>
+                  {idx > 0 && ", "}
+                  Date {d.ordre}
+                </span>
+              ))}
+            </span>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const formatDatesInfoOLD = (rappel: any) => {
+    if (!rappel.datesDetails || rappel.datesDetails.length === 0) {
+      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}`;
+      if (!acc[key]) {
+        acc[key] = {
+          formationNom: date.formationNom,
+          sequenceNom: date.sequenceNom,
+          dates: []
+        };
+      }
+      acc[key].dates.push(date);
+      return acc;
+    }, {});
+
     return (
       <div className="space-y-2">
         {Object.values(grouped).map((group: any, groupIdx: number) => (
@@ -384,14 +432,14 @@ export default function AdminRappels() {
             <Table>
               <TableHeader>
                 <TableRow>
-                  <TableHead>Nom</TableHead>
+                  <TableHead className="w-[180px]">Nom</TableHead>
-                  <TableHead>Template d'email</TableHead>
+                  <TableHead className="w-[120px]">Template</TableHead>
-                  <TableHead>Délai</TableHead>
+                  <TableHead className="w-[70px]">Délai</TableHead>
-                  <TableHead>Heure</TableHead>
+                  <TableHead className="w-[70px]">Heure</TableHead>
                   <TableHead>Dates concernées</TableHead>
-                  <TableHead>Pièce jointe</TableHead>
+                  <TableHead className="w-[100px]">Pièce jointe</TableHead>
-                  <TableHead>Statut</TableHead>
+                  <TableHead className="w-[80px]">Statut</TableHead>
-                  <TableHead className="text-right">Actions</TableHead>
+                  <TableHead className="w-[100px] text-right">Actions</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>

todo.md

@@ -1114,3 +1114,11 @@
 - [x] Vérifier que le déploiement fonctionne correctement (PROBLÈME: modifications non visibles)
 - [x] Identifier la cause du problème (classes Tailwind arbitraires non compilées)
 - [x] Corriger et redéployer (utilisation de la classe .page-title dans index.css)
+
+## Modification affichage rappels automatiques
+
+- [x] Analyser la structure actuelle de la fenêtre des rappels automatiques
+- [x] Regrouper les informations de la même formation/séquence sur une seule ligne
+- [x] Resserrer les colonnes pour une meilleure lisibilité
+- [x] Tester les modifications sur sandbox
+- [x] Déployer sur le serveur de production