Checkpoint: Modification du format d'affichage des signatures formateurs
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
@@ -527,11 +527,11 @@ export default function FormateurEmargement() {
|
|||||||
return Object.values(signaturesByDate).map((dateGroup: any) => (
|
return Object.values(signaturesByDate).map((dateGroup: any) => (
|
||||||
<div
|
<div
|
||||||
key={dateGroup.dateDebut}
|
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 */}
|
{/* En-tête de la date */}
|
||||||
<div>
|
<div>
|
||||||
<p className="font-medium text-blue-900">
|
<p className="text-xs text-muted-foreground">
|
||||||
{new Date(dateGroup.dateDebut).toLocaleDateString("fr-FR", {
|
{new Date(dateGroup.dateDebut).toLocaleDateString("fr-FR", {
|
||||||
weekday: "long",
|
weekday: "long",
|
||||||
year: "numeric",
|
year: "numeric",
|
||||||
@@ -541,66 +541,82 @@ export default function FormateurEmargement() {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Signature Matin */}
|
{/* Matin */}
|
||||||
<div className="space-y-2">
|
<div className="flex items-center justify-between pl-4">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center gap-2 flex-1">
|
||||||
<p className="text-sm font-medium text-muted-foreground">🌅 Matin</p>
|
{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 && (
|
{dateGroup.matin && (
|
||||||
<Badge variant="outline" className="bg-blue-100 text-blue-700 border-blue-300 text-xs">
|
<div className="flex items-center gap-2 ml-2 text-xs text-muted-foreground">
|
||||||
{new Date(dateGroup.matin.heurePresence).toLocaleTimeString("fr-FR", {
|
<span>• Formateur</span>
|
||||||
|
<span>• {new Date(dateGroup.matin.heurePresence).toLocaleString("fr-FR", {
|
||||||
|
day: "2-digit",
|
||||||
|
month: "2-digit",
|
||||||
|
year: "numeric",
|
||||||
hour: "2-digit",
|
hour: "2-digit",
|
||||||
minute: "2-digit",
|
minute: "2-digit"
|
||||||
})}
|
})}</span>
|
||||||
</Badge>
|
{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>
|
</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 */}
|
{/* Après-midi */}
|
||||||
<div className="space-y-2">
|
<div className="flex items-center justify-between pl-4">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center gap-2 flex-1">
|
||||||
<p className="text-sm font-medium text-muted-foreground">🌆 Après-midi</p>
|
{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 && (
|
{dateGroup.apres_midi && (
|
||||||
<Badge variant="outline" className="bg-blue-100 text-blue-700 border-blue-300 text-xs">
|
<div className="flex items-center gap-2 ml-2 text-xs text-muted-foreground">
|
||||||
{new Date(dateGroup.apres_midi.heurePresence).toLocaleTimeString("fr-FR", {
|
<span>• Formateur</span>
|
||||||
|
<span>• {new Date(dateGroup.apres_midi.heurePresence).toLocaleString("fr-FR", {
|
||||||
|
day: "2-digit",
|
||||||
|
month: "2-digit",
|
||||||
|
year: "numeric",
|
||||||
hour: "2-digit",
|
hour: "2-digit",
|
||||||
minute: "2-digit",
|
minute: "2-digit"
|
||||||
})}
|
})}</span>
|
||||||
</Badge>
|
{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>
|
</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>
|
</div>
|
||||||
));
|
));
|
||||||
|
|||||||
7
todo.md
7
todo.md
@@ -1541,3 +1541,10 @@
|
|||||||
- [x] Modifier l'affichage pour regrouper les signatures par date (au lieu d'une signature par ligne)
|
- [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] Afficher une zone par date avec les signatures matin et après-midi à l'intérieur
|
||||||
- [x] Ergonomie identique à celle des apprenants
|
- [x] Ergonomie identique à celle des apprenants
|
||||||
|
|
||||||
|
## Modifier le format d'affichage des signatures formateurs
|
||||||
|
|
||||||
|
- [x] Analyser le format d'affichage des apprenants (zone par date avec lignes matin/après-midi)
|
||||||
|
- [x] Reproduire exactement le même format pour les formateurs
|
||||||
|
- [x] Afficher le nom du formateur, la date/heure de signature et une case verte par ligne
|
||||||
|
- [x] Supprimer l'affichage actuel avec les grandes images de signature
|
||||||
|
|||||||
Reference in New Issue
Block a user