From 8c71e715a84a4ae191407edfbaed30579a2f9c1a Mon Sep 17 00:00:00 2001
From: Manus <dev-agent@manus.ai>
Date: Thu, 8 Jan 2026 11:18:00 -0500
Subject: [PATCH] =?UTF-8?q?Checkpoint:=20S=C3=A9paration=20de=20l'affichag?=
 =?UTF-8?q?e=20des=20rappels=20configur=C3=A9s=20en=20deux=20cat=C3=A9gori?=
 =?UTF-8?q?es=20distinctes=20dans=20la=20gestion=20des=20s=C3=A9quences=20?=
 =?UTF-8?q?:=20rappels=20pr=C3=A9-formation=20(timing=20=3D=20'pre=5Fforma?=
 =?UTF-8?q?tion')=20affich=C3=A9s=20en=20bleu=20avec=20label=20"Pr=C3=A9-f?=
 =?UTF-8?q?ormation",=20et=20rappels=20post-formation=20(timing=20=3D=20'p?=
 =?UTF-8?q?ost=5Fformation')=20affich=C3=A9s=20en=20vert=20avec=20label=20?=
 =?UTF-8?q?"Post-formation".=20Chaque=20cat=C3=A9gorie=20poss=C3=A8de=20so?=
 =?UTF-8?q?n=20propre=20label=20color=C3=A9=20(text-blue-600=20pour=20pr?=
 =?UTF-8?q?=C3=A9,=20text-green-600=20pour=20post)=20et=20ses=20badges=20s?=
 =?UTF-8?q?ont=20stylis=C3=A9s=20en=20cons=C3=A9quence=20(bg-blue-50/text-?=
 =?UTF-8?q?blue-700/border-blue-300=20pour=20pr=C3=A9,=20bg-green-50/text-?=
 =?UTF-8?q?green-700/border-green-300=20pour=20post).=20Les=20rappels=20so?=
 =?UTF-8?q?nt=20filtr=C3=A9s=20dynamiquement=20par=20date=20:=20rappelsPre?=
 =?UTF-8?q?=20=3D=20date.rappels=3F.filter((r:=20any)=20=3D>=20r.timing=20?=
 =?UTF-8?q?=3D=3D=3D=20'pre=5Fformation')=20et=20rappelsPost=20=3D=20date.?=
 =?UTF-8?q?rappels=3F.filter((r:=20any)=20=3D>=20r.timing=20=3D=3D=3D=20'p?=
 =?UTF-8?q?ost=5Fformation').=20L'affichage=20est=20organis=C3=A9=20vertic?=
 =?UTF-8?q?alement=20avec=20space-y-1=20entre=20les=20cat=C3=A9gories,=20c?=
 =?UTF-8?q?haque=20cat=C3=A9gorie=20ayant=20son=20propre=20conteneur=20ave?=
 =?UTF-8?q?c=20space-y-0.5=20pour=20le=20label=20et=20les=20badges.=20Cett?=
 =?UTF-8?q?e=20s=C3=A9paration=20visuelle=20claire=20permet=20de=20disting?=
 =?UTF-8?q?uer=20instantan=C3=A9ment=20les=20rappels=20envoy=C3=A9s=20avan?=
 =?UTF-8?q?t=20la=20formation=20(pr=C3=A9paration=20des=20apprenants)=20de?=
 =?UTF-8?q?s=20rappels=20envoy=C3=A9s=20apr=C3=A8s=20(suivi=20et=20feedbac?=
 =?UTF-8?q?k).=20Les=20badges=20conservent=20l'ic=C3=B4ne=20Bell=20et=20af?=
 =?UTF-8?q?fichent=20le=20nom=20du=20rappel.=20Si=20aucun=20rappel=20n'exi?=
 =?UTF-8?q?ste=20dans=20les=20deux=20cat=C3=A9gories,=20le=20message=20"Au?=
 =?UTF-8?q?cun=20rappel"=20est=20affich=C3=A9=20en=20italique=20gris.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/pages/AdminSequences.tsx | 66 ++++++++++++++++++++---------
 todo.md                             |  4 ++
 2 files changed, 51 insertions(+), 19 deletions(-)

diff --git a/client/src/pages/AdminSequences.tsx b/client/src/pages/AdminSequences.tsx
index f33f490..6453ded 100644
--- a/client/src/pages/AdminSequences.tsx
+++ b/client/src/pages/AdminSequences.tsx
@@ -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 && (
diff --git a/todo.md b/todo.md
index ca53a09..71afb47 100644
--- a/todo.md
+++ b/todo.md
@@ -595,3 +595,7 @@
 - [x] Ajouter un bouton de basculement entre vue complète et vue réduite
 - [x] Masquer les colonnes Lieu, Public cible, Formateur en vue réduite
 - [x] Simplifier l'affichage des rappels (supprimer "Date 1:", afficher sur une ligne)
+
+## Séparation des rappels pré et post-formation
+- [x] Séparer l'affichage des rappels en deux catégories (pré-formation et post-formation)
+- [x] Ajouter des labels visuels pour distinguer les deux types de rappels