Checkpoint: Amélioration complète de l'affichage des pièces jointes dans la gestion des rappels.

**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.
This commit is contained in:
Manus
2026-01-19 09:13:38 -05:00
parent 91785b4b4d
commit ab19f2f325
2 changed files with 25 additions and 8 deletions

View File

@@ -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"/>