Checkpoint: Correction de l'affichage des signatures dans l'émargement :

- Format modifié : "Prénom Nom a validé(e) le date et heure"
- Icône de signature agrandie (h-5 w-5) et plus visible avec hover bleu
- Ajout d'un title "Voir la signature" sur l'icône
- Espacement amélioré (ml-3)
This commit is contained in:
Manus
2026-01-27 07:44:50 -05:00
parent feb708bb3e
commit abca9956ff
2 changed files with 20 additions and 13 deletions

View File

@@ -269,9 +269,8 @@ export default function FormateurEmargement() {
const presenceInfo = getPresenceInfo(inscrit.inscription.id, date.id, "matin"); const presenceInfo = getPresenceInfo(inscrit.inscription.id, date.id, "matin");
if (presenceInfo) { if (presenceInfo) {
return ( return (
<div className="flex items-center gap-2 ml-2 text-xs text-muted-foreground"> <div className="flex items-center gap-2 ml-3 text-xs text-muted-foreground">
<span>{inscrit.apprenant?.prenom} {inscrit.apprenant?.nom}</span> <span>{inscrit.apprenant?.prenom} {inscrit.apprenant?.nom} a validé(e) le {new Date(presenceInfo.heurePresence).toLocaleString("fr-FR", {
<span>• {new Date(presenceInfo.heurePresence).toLocaleString("fr-FR", {
day: "2-digit", day: "2-digit",
month: "2-digit", month: "2-digit",
year: "numeric", year: "numeric",
@@ -282,13 +281,14 @@ export default function FormateurEmargement() {
<Button <Button
size="sm" size="sm"
variant="ghost" variant="ghost"
className="h-5 w-5 p-0" className="h-6 w-6 p-0 hover:bg-blue-100"
onClick={() => { onClick={() => {
setSelectedSignature(presenceInfo.signatureUrl!); setSelectedSignature(presenceInfo.signatureUrl!);
setShowSignatureDialog(true); setShowSignatureDialog(true);
}} }}
title="Voir la signature"
> >
<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"> <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-5 w-5 text-blue-600">
<path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/> <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/>
</svg> </svg>
</Button> </Button>
@@ -329,9 +329,8 @@ export default function FormateurEmargement() {
const presenceInfo = getPresenceInfo(inscrit.inscription.id, date.id, "apres_midi"); const presenceInfo = getPresenceInfo(inscrit.inscription.id, date.id, "apres_midi");
if (presenceInfo) { if (presenceInfo) {
return ( return (
<div className="flex items-center gap-2 ml-2 text-xs text-muted-foreground"> <div className="flex items-center gap-2 ml-3 text-xs text-muted-foreground">
<span>{inscrit.apprenant?.prenom} {inscrit.apprenant?.nom}</span> <span>{inscrit.apprenant?.prenom} {inscrit.apprenant?.nom} a validé(e) le {new Date(presenceInfo.heurePresence).toLocaleString("fr-FR", {
<span>• {new Date(presenceInfo.heurePresence).toLocaleString("fr-FR", {
day: "2-digit", day: "2-digit",
month: "2-digit", month: "2-digit",
year: "numeric", year: "numeric",
@@ -342,13 +341,14 @@ export default function FormateurEmargement() {
<Button <Button
size="sm" size="sm"
variant="ghost" variant="ghost"
className="h-5 w-5 p-0" className="h-6 w-6 p-0 hover:bg-blue-100"
onClick={() => { onClick={() => {
setSelectedSignature(presenceInfo.signatureUrl!); setSelectedSignature(presenceInfo.signatureUrl!);
setShowSignatureDialog(true); setShowSignatureDialog(true);
}} }}
title="Voir la signature"
> >
<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"> <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-5 w-5 text-blue-600">
<path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/> <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/>
</svg> </svg>
</Button> </Button>

13
todo.md
View File

@@ -1314,8 +1314,15 @@
## Affichage des signatures dans l'émargement numérique ## Affichage des signatures dans l'émargement numérique
- [ ] Modifier l'API pour récupérer les présences avec signatures - [x] Modifier l'API pour récupérer les présences avec signatures
- [ ] Afficher nom du signataire, date/heure et icône à côté de chaque puce matin/après-midi - [x] Afficher nom du signataire, date/heure et icône à côté de chaque puce matin/après-midi
- [ ] Ajouter une modale pour visualiser la signature en grand format - [x] Ajouter une modale pour visualiser la signature en grand format
- [ ] Tester l'affichage sur smartphone - [ ] Tester l'affichage sur smartphone
- [x] Déployer sur le VPS
## Correction affichage signature
- [ ] Modifier le format d'affichage : "Prénom Nom a validé(e) le date et heure"
- [ ] Rendre l'icône de signature plus visible (taille, couleur)
- [ ] Tester l'affichage
- [ ] Déployer sur le VPS - [ ] Déployer sur le VPS