Résolution du dépassement de largeur du tableau PDF (185mm > 182mm) qui causait un plantage lors de la génération de la feuille de présence pour les groupes avec beaucoup d'apprenants. Largeurs de colonnes optimisées à 180mm total avec marges réduites à 10mm. Déployé sur TEST et PROD.
Modifications principales :
- Ajout des champs typeUtilisateur et formateurId dans la table presences pour distinguer formateurs et apprenants
- Détection automatique du rôle (formateur/apprenant) via l'email lors du scan du QR code
- Interface de signature tactile réutilisée pour les formateurs
- Intégration des signatures tactiles formateur dans la génération PDF de la feuille de présence
- QR code dans l'espace formateur accessible pour l'émargement
- Tests unitaires validés avec succès
Le système permet maintenant aux formateurs d'émarger (matin et après-midi) via le même QR code que les apprenants, avec détection automatique du rôle et intégration des signatures dans le PDF.
🐛 Problème identifié :
- Le code utilisait `dateInfo.ordre` (1, 2, 3...) pour chercher les présences
- Mais les présences sont indexées par `dateFormationId` (ID réel de la date en base)
- Résultat : aucune correspondance trouvée, signatures non affichées
✅ Corrections apportées :
- Ajout du champ `id` dans l'interface `FeuillePresenceInfo` (exportService.ts)
- Modification de la logique de recherche : `dateInfo.ordre` → `dateInfo.id` (ligne 228)
- Ajout de l'ID dans le mapping des dates (routers.ts, ligne 1178)
- Déploiement sur VPS (98.71.216.234)
- Application redémarrée avec PM2
📋 Fonctionnement corrigé :
- Les dates incluent maintenant leur ID réel de la base de données
- La recherche des présences utilise cet ID pour la correspondance
- Les signatures sont chargées et affichées dans les bonnes colonnes du PDF
🔍 Test requis :
- Exporter une feuille de présence pour une séquence avec signatures
- Vérifier que les signatures apparaissent dans le PDF généré
✅ Modifications implémentées :
- Interface ApprenantPresence étendue pour inclure les présences avec signatures
- Fonction generateFeuillePresence modifiée pour charger et afficher les images de signatures
- Hook didDrawCell ajouté pour insérer les images dans les cellules du tableau PDF
- Procédure exportFeuillePresence modifiée pour récupérer toutes les présences avec signatures
- Signatures chargées depuis le système de fichiers local (uploads/signatures/)
- Gestion automatique des cas où la signature n'existe pas (cellule vide)
- Hauteur des cellules augmentée (minCellHeight: 15) pour accommoder les signatures
📋 Fonctionnement :
- Lors de l'export PDF, le système récupère toutes les présences de la séquence
- Pour chaque apprenant, les signatures sont associées à leurs dates respectives
- Les images PNG sont chargées depuis le disque et converties en base64
- Les signatures sont insérées dans les colonnes Matin/Après-midi correspondantes
- Si aucune signature n'existe, la cellule reste vide pour signature manuscrite
🔧 Technique :
- Utilisation de jsPDF avec jspdf-autotable
- Chargement des images avec fs.readFileSync
- Conversion en data URL base64 pour insertion dans le PDF
- Gestion des erreurs avec console.warn si fichier manquant
- Intégration du composant SignaturePad dans EmargementScan.tsx
- Ajout des champs de signature dans la table presences (signatureUrl, signatureS3Key, dateSigned)
- Modification de la procédure presences.valider pour accepter et uploader la signature en S3
- Stockage automatique de l'URL et de la clé S3 dans la base de données
- Correction des types nullables dans exportService.ts (codeEtablissement, fonction)
- Les apprenants doivent maintenant signer avec le doigt sur l'écran avant de valider leur présence
✅ Champ de signature du formateur ajouté en bas de chaque page de feuille de présence
✅ Comprend :
- Label "Signature du formateur :" en gras
- Ligne pour la signature manuscrite (60mm de largeur)
- Champ "Date : _______________" pour dater la validation
Le formateur peut maintenant valider officiellement chaque journée de formation en signant et en datant la feuille de présence.
Fonctionnalités complètes des feuilles de présence :
- Logo Itinova en haut à droite (40x15mm)
- Nom du formateur dans l'en-tête (récupéré automatiquement depuis la base de données)
- Deux colonnes de signature par apprenant et par journée (Matin / Après-midi)
- Une page par date de formation
- Signature du formateur en bas de chaque page avec date
Tests réussis : PDF généré avec succès via script de test direct, signature du formateur visible et bien positionnée en bas de page.
✅ Logo Itinova ajouté en haut à droite de chaque page (40x15mm)
✅ Nom du formateur affiché dans l'en-tête (récupéré automatiquement depuis la base de données)
✅ Deux colonnes de signature par apprenant et par journée (Signature Matin / Signature Après-midi)
✅ Une page générée pour chaque date de formation
✅ Toutes les informations complètes : Formation, Séquence, Lieu, Formateur, Public cible, Date de la journée
✅ Tableau avec 6 colonnes : Nom, Prénom, Code établissement, Fonction, Signature Matin, Signature Après-midi
Corrections techniques :
- Utilisation de path.resolve(process.cwd()) au lieu de __dirname pour éviter l'erreur "ReferenceError: __dirname is not defined"
- Ajout du champ formateur dans l'interface FeuillePresenceInfo
- Récupération automatique du nom du formateur via formateurId dans la procédure exportFeuillePresence
Tests réussis : Génération testée avec la séquence "Groupe A" (formateur George Clooney, 2 dates) - PDF généré avec succès avec toutes les modifications visibles.
