From 04d8faf919fdf4ea3ec831dd099f4026bca2d599 Mon Sep 17 00:00:00 2001
From: Manus <dev-agent@manus.ai>
Date: Mon, 9 Feb 2026 11:10:56 -0500
Subject: [PATCH] =?UTF-8?q?Checkpoint:=20Am=C3=A9lioration=20de=20l'ergono?=
 =?UTF-8?q?mie=20de=20l'encart=20des=20signatures=20formateurs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Modifications apportées :
- Regroupement des signatures formateurs par date (au lieu d'une signature par ligne)
- Affichage d'une zone par date avec les signatures matin et après-midi à l'intérieur
- Ergonomie identique à celle des apprenants pour une meilleure cohérence visuelle
- Affichage de "Aucune signature" pour les périodes sans signature
- Heure de signature affichée dans un badge pour chaque période
- Design distinct avec bordure bleue pour différencier des signatures apprenants
- Déployé sur recette (108.143.67.56) et production (98.71.216.234)
---
 client/src/pages/FormateurEmargement.tsx | 124 ++++++++++++++++-------
 todo.md                                  |   6 ++
 2 files changed, 96 insertions(+), 34 deletions(-)

diff --git a/client/src/pages/FormateurEmargement.tsx b/client/src/pages/FormateurEmargement.tsx
index 0ec223b..e19447d 100644
--- a/client/src/pages/FormateurEmargement.tsx
+++ b/client/src/pages/FormateurEmargement.tsx
@@ -504,51 +504,107 @@ export default function FormateurEmargement() {
           </CardHeader>
           <CardContent>
             <div className="space-y-4">
-              {signaturesFormateurs.map((signature: any) => (
-                <div
-                  key={signature.presenceId}
-                  className="border border-blue-200 rounded-lg p-4 bg-white space-y-3"
-                >
-                  <div className="flex items-center justify-between">
+              {(() => {
+                // Regrouper les signatures par date
+                const signaturesByDate = signaturesFormateurs.reduce((acc: any, signature: any) => {
+                  const dateKey = signature.dateFormationId;
+                  if (!acc[dateKey]) {
+                    acc[dateKey] = {
+                      dateDebut: signature.dateDebut,
+                      dateFin: signature.dateFin,
+                      matin: null,
+                      apres_midi: null,
+                    };
+                  }
+                  if (signature.periode === "matin") {
+                    acc[dateKey].matin = signature;
+                  } else {
+                    acc[dateKey].apres_midi = signature;
+                  }
+                  return acc;
+                }, {});
+
+                return Object.values(signaturesByDate).map((dateGroup: any) => (
+                  <div
+                    key={dateGroup.dateDebut}
+                    className="border border-blue-200 rounded-lg p-4 bg-white space-y-3"
+                  >
+                    {/* En-tête de la date */}
                     <div>
                       <p className="font-medium text-blue-900">
-                        {new Date(signature.dateDebut).toLocaleDateString("fr-FR", {
+                        {new Date(dateGroup.dateDebut).toLocaleDateString("fr-FR", {
                           weekday: "long",
                           year: "numeric",
                           month: "long",
                           day: "numeric",
                         })}
                       </p>
-                      <p className="text-sm text-muted-foreground">
-                        {signature.periode === "matin" ? "🌅 Matin" : "🌆 Après-midi"}
-                      </p>
                     </div>
-                    <Badge variant="outline" className="bg-blue-100 text-blue-700 border-blue-300">
-                      {new Date(signature.heurePresence).toLocaleTimeString("fr-FR", {
-                        hour: "2-digit",
-                        minute: "2-digit",
-                      })}
-                    </Badge>
-                  </div>
-                  {signature.signatureUrl && (
-                    <div className="flex flex-col gap-2">
-                      <p className="text-xs text-muted-foreground">Signature tactile :</p>
-                      <div className="border-2 border-blue-200 rounded-lg p-2 bg-white cursor-pointer hover:border-blue-400 transition-colors"
-                        onClick={() => {
-                          setSelectedSignature(signature.signatureUrl!);
-                          setShowSignatureDialog(true);
-                        }}
-                      >
-                        <img
-                          src={signature.signatureUrl}
-                          alt="Signature formateur"
-                          className="w-full h-24 object-contain"
-                        />
+
+                    {/* Signature Matin */}
+                    <div className="space-y-2">
+                      <div className="flex items-center justify-between">
+                        <p className="text-sm font-medium text-muted-foreground">🌅 Matin</p>
+                        {dateGroup.matin && (
+                          <Badge variant="outline" className="bg-blue-100 text-blue-700 border-blue-300 text-xs">
+                            {new Date(dateGroup.matin.heurePresence).toLocaleTimeString("fr-FR", {
+                              hour: "2-digit",
+                              minute: "2-digit",
+                            })}
+                          </Badge>
+                        )}
                       </div>
+                      {dateGroup.matin?.signatureUrl ? (
+                        <div className="border-2 border-blue-200 rounded-lg p-2 bg-white cursor-pointer hover:border-blue-400 transition-colors"
+                          onClick={() => {
+                            setSelectedSignature(dateGroup.matin.signatureUrl!);
+                            setShowSignatureDialog(true);
+                          }}
+                        >
+                          <img
+                            src={dateGroup.matin.signatureUrl}
+                            alt="Signature formateur matin"
+                            className="w-full h-20 object-contain"
+                          />
+                        </div>
+                      ) : (
+                        <p className="text-xs text-muted-foreground italic">Aucune signature</p>
+                      )}
                     </div>
-                  )}
-                </div>
-              ))}
+
+                    {/* Signature Après-midi */}
+                    <div className="space-y-2">
+                      <div className="flex items-center justify-between">
+                        <p className="text-sm font-medium text-muted-foreground">🌆 Après-midi</p>
+                        {dateGroup.apres_midi && (
+                          <Badge variant="outline" className="bg-blue-100 text-blue-700 border-blue-300 text-xs">
+                            {new Date(dateGroup.apres_midi.heurePresence).toLocaleTimeString("fr-FR", {
+                              hour: "2-digit",
+                              minute: "2-digit",
+                            })}
+                          </Badge>
+                        )}
+                      </div>
+                      {dateGroup.apres_midi?.signatureUrl ? (
+                        <div className="border-2 border-blue-200 rounded-lg p-2 bg-white cursor-pointer hover:border-blue-400 transition-colors"
+                          onClick={() => {
+                            setSelectedSignature(dateGroup.apres_midi.signatureUrl!);
+                            setShowSignatureDialog(true);
+                          }}
+                        >
+                          <img
+                            src={dateGroup.apres_midi.signatureUrl}
+                            alt="Signature formateur après-midi"
+                            className="w-full h-20 object-contain"
+                          />
+                        </div>
+                      ) : (
+                        <p className="text-xs text-muted-foreground italic">Aucune signature</p>
+                      )}
+                    </div>
+                  </div>
+                ));
+              })()}
             </div>
           </CardContent>
         </Card>
diff --git a/todo.md b/todo.md
index a6072a2..cdee0ae 100644
--- a/todo.md
+++ b/todo.md
@@ -1535,3 +1535,9 @@
 - [x] Ajouter un encart dédié sur la page d'émargement numérique pour afficher les signatures formateurs
 - [x] Afficher les signatures formateurs avec date/heure et période (matin/après-midi)
 - [x] Déployer sur recette et production
+
+## Amélioration ergonomie signatures formateurs
+
+- [x] Modifier l'affichage pour regrouper les signatures par date (au lieu d'une signature par ligne)
+- [x] Afficher une zone par date avec les signatures matin et après-midi à l'intérieur
+- [x] Ergonomie identique à celle des apprenants