From 023a047ee0cd596a615d19a1a56142288aa3a87c Mon Sep 17 00:00:00 2001
From: Manus <dev-agent@manus.ai>
Date: Tue, 10 Feb 2026 05:09:37 -0500
Subject: [PATCH] =?UTF-8?q?Checkpoint:=20Affichage=20des=20images=20de=20s?=
 =?UTF-8?q?ignature=20(matin=20et=20apr=C3=A8s-midi)=20directement=20dans?=
 =?UTF-8?q?=20la=20page=20d'=C3=A9margement=20pour=20les=20apprenants=20et?=
 =?UTF-8?q?=20formateurs.=20Les=20images=20s'affichent=20en=20miniature=20?=
 =?UTF-8?q?(h-8=20w-16)=20=C3=A0=20c=C3=B4t=C3=A9=20des=20informations=20d?=
 =?UTF-8?q?e=20pr=C3=A9sence=20et=20sont=20cliquables=20pour=20agrandissem?=
 =?UTF-8?q?ent.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/pages/FormateurEmargement.tsx | 56 +++++++++---------------
 todo.md                                  |  9 ++++
 2 files changed, 29 insertions(+), 36 deletions(-)

diff --git a/client/src/pages/FormateurEmargement.tsx b/client/src/pages/FormateurEmargement.tsx
index 44effca..118614e 100644
--- a/client/src/pages/FormateurEmargement.tsx
+++ b/client/src/pages/FormateurEmargement.tsx
@@ -381,19 +381,15 @@ export default function FormateurEmargement() {
                                           minute: "2-digit"
                                         })}</span>
                                         {presenceInfo.signatureUrl && (
-                                          <Button
-                                            size="sm"
-                                            variant="ghost"
-                                            className="h-5 w-5 p-0"
+                                          <img
+                                            src={presenceInfo.signatureUrl}
+                                            alt="Signature"
+                                            className="h-8 w-16 object-contain border border-gray-300 rounded cursor-pointer hover:border-blue-500 transition-colors"
                                             onClick={() => {
                                               setSelectedSignature(presenceInfo.signatureUrl!);
                                               setShowSignatureDialog(true);
                                             }}
-                                          >
-                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4 text-blue-600">
-                                              <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/>
-                                            </svg>
-                                          </Button>
+                                          />
                                         )}
                                       </div>
                                     );
@@ -441,19 +437,15 @@ export default function FormateurEmargement() {
                                           minute: "2-digit"
                                         })}</span>
                                         {presenceInfo.signatureUrl && (
-                                          <Button
-                                            size="sm"
-                                            variant="ghost"
-                                            className="h-5 w-5 p-0"
+                                          <img
+                                            src={presenceInfo.signatureUrl}
+                                            alt="Signature"
+                                            className="h-8 w-16 object-contain border border-gray-300 rounded cursor-pointer hover:border-blue-500 transition-colors"
                                             onClick={() => {
                                               setSelectedSignature(presenceInfo.signatureUrl!);
                                               setShowSignatureDialog(true);
                                             }}
-                                          >
-                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4 text-blue-600">
-                                              <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/>
-                                            </svg>
-                                          </Button>
+                                          />
                                         )}
                                       </div>
                                     );
@@ -561,19 +553,15 @@ export default function FormateurEmargement() {
                               minute: "2-digit"
                             })}</span>
                             {dateGroup.matin.signatureUrl && (
-                              <Button
-                                size="sm"
-                                variant="ghost"
-                                className="h-5 w-5 p-0"
+                              <img
+                                src={dateGroup.matin.signatureUrl}
+                                alt="Signature formateur"
+                                className="h-8 w-16 object-contain border border-gray-300 rounded cursor-pointer hover:border-blue-500 transition-colors"
                                 onClick={() => {
                                   setSelectedSignature(dateGroup.matin.signatureUrl!);
                                   setShowSignatureDialog(true);
                                 }}
-                              >
-                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4 text-blue-600">
-                                  <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/>
-                                </svg>
-                              </Button>
+                              />
                             )}
                           </div>
                         )}
@@ -600,19 +588,15 @@ export default function FormateurEmargement() {
                               minute: "2-digit"
                             })}</span>
                             {dateGroup.apres_midi.signatureUrl && (
-                              <Button
-                                size="sm"
-                                variant="ghost"
-                                className="h-5 w-5 p-0"
+                              <img
+                                src={dateGroup.apres_midi.signatureUrl}
+                                alt="Signature formateur"
+                                className="h-8 w-16 object-contain border border-gray-300 rounded cursor-pointer hover:border-blue-500 transition-colors"
                                 onClick={() => {
                                   setSelectedSignature(dateGroup.apres_midi.signatureUrl!);
                                   setShowSignatureDialog(true);
                                 }}
-                              >
-                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4 text-blue-600">
-                                  <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/>
-                                </svg>
-                              </Button>
+                              />
                             )}
                           </div>
                         )}
diff --git a/todo.md b/todo.md
index f035c42..a0be5d4 100644
--- a/todo.md
+++ b/todo.md
@@ -1557,3 +1557,12 @@
 - [x] Ajouter une section "Signature Formateur" dans le PDF avec les signatures matin et après-midi
 - [x] Tester la génération PDF avec les signatures formateurs
 - [x] Déployer sur recette et production
+
+
+## Afficher les images de signature directement dans la page d'émargement
+
+- [x] Analyser le code actuel de la page FormateurEmargement.tsx pour identifier où ajouter les images
+- [x] Modifier l'affichage des lignes de présence apprenants pour inclure les images de signature matin et après-midi
+- [x] Modifier l'affichage des lignes de présence formateurs pour inclure les images de signature matin et après-midi
+- [x] Ajuster le layout pour que les images s'affichent correctement à côté des informations existantes
+- [x] Déployer sur le serveur de test (recette) uniquement