Checkpoint: Affichage des informations de signature dans la fenêtre d'émargement numérique :
- Ajout des champs signatureUrl, signatureS3Key et dateSigned dans getPresencesByInscription - Affichage du nom du signataire, date/heure de validation à côté de chaque puce matin/après-midi - Icône cliquable pour visualiser la signature en grand format - Modale Dialog pour afficher la signature manuscrite - Fonction getPresenceInfo pour récupérer les détails de présence - Interface moderne avec icône de stylo SVG pour les signatures
This commit is contained in:
Manus
@@ -93,6 +93,17 @@ export default function FormateurEmargement() {
|
||||
);
|
||||
};
|
||||
|
||||
// Récupérer les informations de présence pour une date et une période
|
||||
const getPresenceInfo = (inscriptionId: number, dateFormationId: number, periode: "matin" | "apres_midi") => {
|
||||
return presences?.find(
|
||||
(p) => p.inscriptionId === inscriptionId && p.dateFormationId === dateFormationId && p.periode === periode
|
||||
);
|
||||
};
|
||||
|
||||
// État pour la modale de signature
|
||||
const [selectedSignature, setSelectedSignature] = useState<string | null>(null);
|
||||
const [showSignatureDialog, setShowSignatureDialog] = useState(false);
|
||||
|
||||
if (loadingSequences) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[400px]">
|
||||
@@ -247,13 +258,46 @@ export default function FormateurEmargement() {
|
||||
|
||||
{/* Matin */}
|
||||
<div className="flex items-center justify-between pl-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-2 flex-1">
|
||||
{presentMatin ? (
|
||||
<CheckCircle2 className="h-4 w-4 text-green-600" />
|
||||
) : (
|
||||
<Circle className="h-4 w-4 text-muted-foreground" />
|
||||
)}
|
||||
<span className="text-xs">🌅 Matin</span>
|
||||
{(() => {
|
||||
const presenceInfo = getPresenceInfo(inscrit.inscription.id, date.id, "matin");
|
||||
if (presenceInfo) {
|
||||
return (
|
||||
<div className="flex items-center gap-2 ml-2 text-xs text-muted-foreground">
|
||||
<span>• {inscrit.apprenant?.prenom} {inscrit.apprenant?.nom}</span>
|
||||
<span>• {new Date(presenceInfo.heurePresence).toLocaleString("fr-FR", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit"
|
||||
})}</span>
|
||||
{presenceInfo.signatureUrl && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="h-5 w-5 p-0"
|
||||
onClick={() => {
|
||||
setSelectedSignature(presenceInfo.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>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
})()}
|
||||
</div>
|
||||
{!presentMatin && (
|
||||
<Button
|
||||
@@ -274,13 +318,46 @@ export default function FormateurEmargement() {
|
||||
|
||||
{/* Après-midi */}
|
||||
<div className="flex items-center justify-between pl-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-2 flex-1">
|
||||
{presentApresMidi ? (
|
||||
<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>
|
||||
{(() => {
|
||||
const presenceInfo = getPresenceInfo(inscrit.inscription.id, date.id, "apres_midi");
|
||||
if (presenceInfo) {
|
||||
return (
|
||||
<div className="flex items-center gap-2 ml-2 text-xs text-muted-foreground">
|
||||
<span>• {inscrit.apprenant?.prenom} {inscrit.apprenant?.nom}</span>
|
||||
<span>• {new Date(presenceInfo.heurePresence).toLocaleString("fr-FR", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit"
|
||||
})}</span>
|
||||
{presenceInfo.signatureUrl && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="h-5 w-5 p-0"
|
||||
onClick={() => {
|
||||
setSelectedSignature(presenceInfo.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>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
})()}
|
||||
</div>
|
||||
{!presentApresMidi && (
|
||||
<Button
|
||||
@@ -337,6 +414,29 @@ export default function FormateurEmargement() {
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Dialog Signature */}
|
||||
<Dialog open={showSignatureDialog} onOpenChange={setShowSignatureDialog}>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Signature de l'apprenant</DialogTitle>
|
||||
<DialogDescription>
|
||||
Signature manuscrite capturée lors de la validation de présence
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
{selectedSignature && (
|
||||
<div className="flex flex-col items-center gap-4 py-4">
|
||||
<div className="w-full border-2 border-gray-300 rounded-lg p-4 bg-white">
|
||||
<img
|
||||
src={selectedSignature}
|
||||
alt="Signature"
|
||||
className="w-full h-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user