From ab19f2f3252ceab6f2cca0ce607ab2d24e8e2c09 Mon Sep 17 00:00:00 2001
From: Manus <dev-agent@manus.ai>
Date: Mon, 19 Jan 2026 09:13:38 -0500
Subject: [PATCH] =?UTF-8?q?Checkpoint:=20Am=C3=A9lioration=20compl=C3=A8te?=
 =?UTF-8?q?=20de=20l'affichage=20des=20pi=C3=A8ces=20jointes=20dans=20la?=
 =?UTF-8?q?=20gestion=20des=20rappels.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Modifications apportées :**
1. Badge "Non" en rouge (bg-red-50, text-red-700, border-red-200) pour un meilleur contraste visuel avec le vert
2. Tooltip informatif au survol du badge "Oui" affichant le nom du fichier et sa taille en Ko
3. Badge "Oui" cliquable pour télécharger directement la pièce jointe sans ouvrir la fenêtre de modification
4. Effet hover vert clair (hover:bg-green-100) pour indiquer l'interactivité

**Résultat :**
Interface plus intuitive et fonctionnelle avec code couleur cohérent (vert = présent/actif, rouge = absent/inactif) et actions directes pour améliorer l'expérience utilisateur.
---
 client/src/pages/AdminRappels.tsx | 25 +++++++++++++++++--------
 todo.md                           |  8 ++++++++
 2 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/client/src/pages/AdminRappels.tsx b/client/src/pages/AdminRappels.tsx
index ad2e45c..1a1f036 100644
--- a/client/src/pages/AdminRappels.tsx
+++ b/client/src/pages/AdminRappels.tsx
@@ -442,15 +442,24 @@ export default function AdminRappels() {
                       </TableCell>
                       <TableCell>
                         {rappel.nomFichier && rappel.urlFichier ? (
-                          <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200 flex items-center gap-1.5 w-fit">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-check-circle">
-                              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
-                              <polyline points="22 4 12 14.01 9 11.01"/>
-                            </svg>
-                            Oui
-                          </Badge>
+                          <a 
+                            href={rappel.urlFichier} 
+                            download={rappel.nomFichier}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            title={`${rappel.nomFichier} (${rappel.tailleFichier ? (rappel.tailleFichier / 1024).toFixed(1) + ' Ko' : 'Taille inconnue'})`}
+                            className="inline-block"
+                          >
+                            <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200 flex items-center gap-1.5 w-fit cursor-pointer hover:bg-green-100 transition-colors">
+                              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-check-circle">
+                                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
+                                <polyline points="22 4 12 14.01 9 11.01"/>
+                              </svg>
+                              Oui
+                            </Badge>
+                          </a>
                         ) : (
-                          <Badge variant="outline" className="bg-gray-50 text-gray-500 border-gray-200 flex items-center gap-1.5 w-fit">
+                          <Badge variant="outline" className="bg-red-50 text-red-700 border-red-200 flex items-center gap-1.5 w-fit">
                             <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-x-circle">
                               <circle cx="12" cy="12" r="10"/>
                               <path d="m15 9-6 6"/>
diff --git a/todo.md b/todo.md
index 880fd46..3ff0774 100644
--- a/todo.md
+++ b/todo.md
@@ -922,3 +922,11 @@
 - [x] Ajouter une icône colorée (vert pour OUI, gris pour NON)
 - [x] Tester l'affichage
 - [x] Déployer sur le VPS
+
+## Améliorations supplémentaires affichage pièces jointes
+
+- [x] Changer la couleur du badge "Non" en rouge (au lieu de gris)
+- [x] Ajouter un tooltip au survol du badge "Oui" avec nom et taille du fichier
+- [x] Rendre le badge "Oui" cliquable pour télécharger directement la pièce jointe
+- [x] Tester les fonctionnalités
+- [x] Déployer sur le VPS