manus-admin/formation-manager-itinova
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Checkpoint: Modification du format d'affichage des signatures formateurs

Browse Source 
Modifications apportées :
- Format d'affichage identique à celui des apprenants
- Une zone par date avec deux lignes (matin et après-midi)
- Case verte (CheckCircle2) pour indiquer qu'une signature est présente
- Affichage du nom "Formateur", de la date/heure de signature
- Icône de signature cliquable pour voir la signature tactile en grand
- Suppression de l'affichage avec les grandes images de signature
- Ergonomie cohérente avec la section apprenants
- Déployé sur recette (108.143.67.56) et production (98.71.216.234)
This commit is contained in:
Manus
2026-02-09 11:43:12 -05:00
parent 04d8faf919
commit 5d8054b4b8
2 changed files with 75 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
client/src/pages/FormateurEmargement.tsx
View File

@@ -527,11 +527,11 @@ export default function FormateurEmargement() {
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"
className="border border-blue-200 rounded-lg p-4 bg-white space-y-2"
>
{/* En-tête de la date */}
<div>
<p className="font-medium text-blue-900">
<p className="text-xs text-muted-foreground">
{new Date(dateGroup.dateDebut).toLocaleDateString("fr-FR", {
weekday: "long",
year: "numeric",
@@ -541,66 +541,82 @@ export default function FormateurEmargement() {
</p>
</div>
{/* 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>
{/* Matin */}
<div className="flex items-center justify-between pl-4">
<div className="flex items-center gap-2 flex-1">
{dateGroup.matin ? (
<CheckCircle2 className="h-4 w-4 text-green-600" />
) : (
<Circle className="h-4 w-4 text-muted-foreground" />
)}
<span className="text-xs">🌅 Matin</span>
{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", {
<div className="flex items-center gap-2 ml-2 text-xs text-muted-foreground">
<span>• Formateur</span>
<span>• {new Date(dateGroup.matin.heurePresence).toLocaleString("fr-FR", {
day: "2-digit",
month: "2-digit",
year: "numeric",
hour: "2-digit",
minute: "2-digit",
})}
</Badge>
minute: "2-digit"
})}</span>
{dateGroup.matin.signatureUrl && (
<Button
size="sm"
variant="ghost"
className="h-5 w-5 p-0"
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>
)}
</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>
{/* 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>
{/* Après-midi */}
<div className="flex items-center justify-between pl-4">
<div className="flex items-center gap-2 flex-1">
{dateGroup.apres_midi ? (
<CheckCircle2 className="h-4 w-4 text-green-600" />
) : (
<Circle className="h-4 w-4 text-muted-foreground" />
)}
<span className="text-xs">🌆 Après-midi</span>
{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", {
<div className="flex items-center gap-2 ml-2 text-xs text-muted-foreground">
<span>• Formateur</span>
<span>• {new Date(dateGroup.apres_midi.heurePresence).toLocaleString("fr-FR", {
day: "2-digit",
month: "2-digit",
year: "numeric",
hour: "2-digit",
minute: "2-digit",
})}
</Badge>
minute: "2-digit"
})}</span>
{dateGroup.apres_midi.signatureUrl && (
<Button
size="sm"
variant="ghost"
className="h-5 w-5 p-0"
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>
)}
</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>
));