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

Checkpoint: Amélioration de l'ergonomie de l'encart des signatures formateurs

Browse Source 
Modifications apportées :
- Regroupement des signatures formateurs par date (au lieu d'une signature par ligne)
- Affichage d'une zone par date avec les signatures matin et après-midi à l'intérieur
- Ergonomie identique à celle des apprenants pour une meilleure cohérence visuelle
- Affichage de "Aucune signature" pour les périodes sans signature
- Heure de signature affichée dans un badge pour chaque période
- Design distinct avec bordure bleue pour différencier des signatures 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:10:56 -05:00
parent 37924ad4fd
commit 04d8faf919
2 changed files with 96 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -504,51 +504,107 @@ export default function FormateurEmargement() {
</CardHeader>
<CardContent>
<div className="space-y-4">
{signaturesFormateurs.map((signature: any) => (
<div
key={signature.presenceId}
className="border border-blue-200 rounded-lg p-4 bg-white space-y-3"
>
<div className="flex items-center justify-between">
{(() => {
// Regrouper les signatures par date
const signaturesByDate = signaturesFormateurs.reduce((acc: any, signature: any) => {
const dateKey = signature.dateFormationId;
if (!acc[dateKey]) {
acc[dateKey] = {
dateDebut: signature.dateDebut,
dateFin: signature.dateFin,
matin: null,
apres_midi: null,
};
}
if (signature.periode === "matin") {
acc[dateKey].matin = signature;
} else {
acc[dateKey].apres_midi = signature;
}
return acc;
}, {});
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"
>
{/* En-tête de la date */}
<div>
<p className="font-medium text-blue-900">
{new Date(signature.dateDebut).toLocaleDateString("fr-FR", {
{new Date(dateGroup.dateDebut).toLocaleDateString("fr-FR", {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric",
})}
</p>
<p className="text-sm text-muted-foreground">
{signature.periode === "matin" ? "🌅 Matin" : "🌆 Après-midi"}
</p>
</div>
<Badge variant="outline" className="bg-blue-100 text-blue-700 border-blue-300">
{new Date(signature.heurePresence).toLocaleTimeString("fr-FR", {
hour: "2-digit",
minute: "2-digit",
})}
</Badge>
</div>
{signature.signatureUrl && (
<div className="flex flex-col gap-2">
<p className="text-xs text-muted-foreground">Signature tactile :</p>
<div className="border-2 border-blue-200 rounded-lg p-2 bg-white cursor-pointer hover:border-blue-400 transition-colors"
onClick={() => {
setSelectedSignature(signature.signatureUrl!);
setShowSignatureDialog(true);
}}
>
<img
src={signature.signatureUrl}
alt="Signature formateur"
className="w-full h-24 object-contain"
/>
{/* 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>
{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", {
hour: "2-digit",
minute: "2-digit",
})}
</Badge>
)}
</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>
)}
</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>
{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", {
hour: "2-digit",
minute: "2-digit",
})}
</Badge>
)}
</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>
));
})()}
</div>
</CardContent>
</Card>

6
todo.md
View File

@@ -1535,3 +1535,9 @@
- [x] Ajouter un encart dédié sur la page d'émargement numérique pour afficher les signatures formateurs
- [x] Afficher les signatures formateurs avec date/heure et période (matin/après-midi)
- [x] Déployer sur recette et production
## Amélioration ergonomie signatures formateurs
- [x] Modifier l'affichage pour regrouper les signatures par date (au lieu d'une signature par ligne)
- [x] Afficher une zone par date avec les signatures matin et après-midi à l'intérieur
- [x] Ergonomie identique à celle des apprenants