Checkpoint: Implémentation complète de la fonctionnalité QR code formateur :

- Procédure generateQRCodeFormateur dans routers.ts
- Fonction validerPresenceFormateur dans presenceDb.ts
- Bouton "QR Code Formateur" dans FormateurEmargement.tsx
- Page EmargementFormateurScan.tsx pour le scan du QR code
- Route /emargement-formateur/{token}
- Gestion automatique de la date du jour
- Stockage de la signature sur S3
- Champ qrCodeFormateurToken dans le schéma sequences

Prêt pour déploiement et tests sur le VPS.

client/src/App.tsx

@@ -40,6 +40,7 @@ import Login from "./pages/Login";
 import FormateurDashboard from "./pages/FormateurDashboard";
 import FormateurEmargement from "./pages/FormateurEmargement";
 import EmargementScan from "./pages/EmargementScan";
+import EmargementFormateurScan from "./pages/EmargementFormateurScan";
 import SignerAttestation from "./pages/SignerAttestation";
 import ForgotPassword from "./pages/ForgotPassword";
 import ResetPassword from "./pages/ResetPassword";
@@ -85,6 +86,7 @@ function Router() {
       <Route path={"/formateur"} component={FormateurDashboard} />
       <Route path={"/formateur/emargement"} component={FormateurEmargement} />
       <Route path={"/emargement/:token"} component={EmargementScan} />
+      <Route path={"/emargement-formateur/:token"} component={EmargementFormateurScan} />
       <Route path={"/signer-attestation/:id"} component={SignerAttestation} />
       <Route path={"/404"} component={NotFound} />
       {/* Final fallback route */}

client/src/pages/EmargementFormateurScan.tsx

@@ -0,0 +1,258 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { trpc } from "@/lib/trpc";
+import { CheckCircle2, Loader2, XCircle, PenTool } from "lucide-react";
+import { useState } from "react";
+import { useParams } from "wouter";
+import { toast } from "sonner";
+import SignaturePadComponent from "@/components/SignaturePad";
+
+export default function EmargementFormateurScan() {
+  const { token } = useParams<{ token: string }>();
+  const [email, setEmail] = useState("");
+  const [selectedPeriode, setSelectedPeriode] = useState<"matin" | "apres_midi">("matin");
+  const [success, setSuccess] = useState(false);
+  const [heureEnregistrement, setHeureEnregistrement] = useState<Date | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [showSignaturePad, setShowSignaturePad] = useState(false);
+  const [signatureDataUrl, setSignatureDataUrl] = useState<string | null>(null);
+
+  // Valider la présence formateur
+  const { mutate: validerPresence, isPending: validating } = trpc.presences.valider.useMutation({
+    onSuccess: () => {
+      const now = new Date();
+      setHeureEnregistrement(now);
+      setSuccess(true);
+      toast.success("Présence formateur validée avec succès !");
+    },
+    onError: (error) => {
+      setError(error.message);
+      toast.error("Erreur lors de la validation", {
+        description: error.message,
+      });
+    },
+  });
+
+  const handleSaveSignature = (dataUrl: string) => {
+    setSignatureDataUrl(dataUrl);
+    setShowSignaturePad(false);
+    // Valider automatiquement après la signature
+    handleValiderWithSignature(dataUrl);
+  };
+
+  const handleValider = () => {
+    if (!email) {
+      toast.error("Veuillez saisir votre email");
+      return;
+    }
+
+    // Afficher le pad de signature
+    setShowSignaturePad(true);
+  };
+
+  const handleValiderWithSignature = (dataUrl: string) => {
+    if (!email) {
+      toast.error("Veuillez saisir votre email");
+      return;
+    }
+
+    validerPresence({
+      token: token || "",
+      email,
+      periode: selectedPeriode,
+      modeValidation: "qrcode",
+      signatureDataUrl: dataUrl,
+      typeUtilisateur: "formateur",
+    });
+  };
+
+  if (success) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-indigo-50 to-blue-100 p-4">
+        <Card className="max-w-md w-full shadow-2xl border-2 border-blue-200 animate-in fade-in zoom-in duration-500">
+          <CardHeader className="text-center">
+            <div className="mx-auto mb-4 w-20 h-20 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full flex items-center justify-center shadow-lg animate-in zoom-in duration-700 delay-150">
+              <CheckCircle2 className="h-12 w-12 text-white animate-in zoom-in duration-500 delay-300" />
+            </div>
+            <CardTitle className="text-3xl font-bold text-blue-700 animate-in slide-in-from-bottom duration-500 delay-200">
+              Présence formateur validée !
+            </CardTitle>
+            <CardDescription className="text-base mt-2 animate-in slide-in-from-bottom duration-500 delay-300">
+              Votre présence en tant que formateur a été enregistrée avec succès
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="text-center space-y-4 animate-in slide-in-from-bottom duration-500 delay-400">
+            {heureEnregistrement && (
+              <div className="p-4 bg-blue-50 border-2 border-blue-200 rounded-lg">
+                <p className="text-sm font-medium text-blue-800 mb-1">
+                  🕒 Heure d'enregistrement
+                </p>
+                <p className="text-2xl font-bold text-blue-700">
+                  {heureEnregistrement.toLocaleTimeString("fr-FR", {
+                    hour: "2-digit",
+                    minute: "2-digit",
+                    second: "2-digit",
+                  })}
+                </p>
+                <p className="text-xs text-blue-600 mt-1">
+                  {heureEnregistrement.toLocaleDateString("fr-FR", {
+                    weekday: "long",
+                    year: "numeric",
+                    month: "long",
+                    day: "numeric",
+                  })}
+                </p>
+              </div>
+            )}
+            <p className="text-sm text-muted-foreground">
+              Merci d'avoir confirmé votre présence. Vous pouvez maintenant fermer cette page.
+            </p>
+            <Button
+              variant="outline"
+              className="w-full"
+              onClick={() => {
+                setSuccess(false);
+                setEmail("");
+                setSignatureDataUrl(null);
+                setError(null);
+              }}
+            >
+              Valider une autre présence
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-red-50 via-rose-50 to-red-100 p-4">
+        <Card className="max-w-md w-full shadow-2xl border-2 border-red-200">
+          <CardHeader className="text-center">
+            <div className="mx-auto mb-4 w-20 h-20 bg-gradient-to-br from-red-500 to-rose-600 rounded-full flex items-center justify-center shadow-lg">
+              <XCircle className="h-12 w-12 text-white" />
+            </div>
+            <CardTitle className="text-3xl font-bold text-red-700">
+              Erreur
+            </CardTitle>
+            <CardDescription className="text-base mt-2">
+              {error}
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="text-center">
+            <Button
+              variant="outline"
+              className="w-full"
+              onClick={() => {
+                setError(null);
+                setEmail("");
+                setSignatureDataUrl(null);
+              }}
+            >
+              Réessayer
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  if (showSignaturePad) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-purple-50 via-violet-50 to-purple-100 p-4">
+        <Card className="max-w-2xl w-full shadow-2xl">
+          <CardHeader className="text-center">
+            <div className="mx-auto mb-4 w-16 h-16 bg-gradient-to-br from-purple-500 to-violet-600 rounded-full flex items-center justify-center shadow-lg">
+              <PenTool className="h-8 w-8 text-white" />
+            </div>
+            <CardTitle className="text-2xl font-bold text-purple-700">
+              Signature formateur
+            </CardTitle>
+            <CardDescription className="text-base mt-2">
+              Signez avec votre doigt ou votre souris pour valider votre présence
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <SignaturePadComponent
+              onSave={handleSaveSignature}
+              onCancel={() => setShowSignaturePad(false)}
+            />
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 via-gray-50 to-slate-100 p-4">
+      <Card className="max-w-md w-full shadow-2xl">
+        <CardHeader className="text-center">
+          <CardTitle className="text-2xl font-bold">
+            Émargement Formateur
+          </CardTitle>
+          <CardDescription className="text-base mt-2">
+            Validez votre présence en tant que formateur
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="space-y-2">
+            <Label htmlFor="email">Email du formateur</Label>
+            <Input
+              id="email"
+              type="email"
+              placeholder="formateur@exemple.com"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              disabled={validating}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="periode">Période</Label>
+            <Select
+              value={selectedPeriode}
+              onValueChange={(value: "matin" | "apres_midi") => setSelectedPeriode(value)}
+              disabled={validating}
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="matin">Matin</SelectItem>
+                <SelectItem value="apres_midi">Après-midi</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <Button
+            className="w-full"
+            onClick={handleValider}
+            disabled={validating || !email}
+          >
+            {validating ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Validation en cours...
+              </>
+            ) : (
+              <>
+                <PenTool className="mr-2 h-4 w-4" />
+                Signer et valider
+              </>
+            )}
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

client/src/pages/FormateurEmargement.tsx

@@ -26,13 +26,14 @@ export default function FormateurEmargement() {
   const { user } = useAuth();
   const [selectedSequenceId, setSelectedSequenceId] = useState<number | null>(null);
   const [showQRDialog, setShowQRDialog] = useState(false);
+  const [showQRFormateurDialog, setShowQRFormateurDialog] = useState(false);
   const [lastRefreshTime, setLastRefreshTime] = useState<Date>(new Date());
   const [secondsSinceRefresh, setSecondsSinceRefresh] = useState(0);
 
   // Récupérer toutes les séquences (filtrées côté serveur pour les formateurs)
   const { data: sequences, isLoading: loadingSequences } = trpc.sequences.list.useQuery();
 
-  // Générer le QR code
+  // Générer le QR code apprenants
   const { data: qrData, mutate: generateQR, isPending: generatingQR } = trpc.presences.generateQRCode.useMutation({
     onSuccess: () => {
       setShowQRDialog(true);
@@ -44,6 +45,18 @@ export default function FormateurEmargement() {
     },
   });
 
+  // Générer le QR code formateur
+  const { data: qrFormateurData, mutate: generateQRFormateur, isPending: generatingQRFormateur } = trpc.presences.generateQRCodeFormateur.useMutation({
+    onSuccess: () => {
+      setShowQRFormateurDialog(true);
+    },
+    onError: (error) => {
+      toast.error("Erreur lors de la génération du QR code formateur", {
+        description: error.message,
+      });
+    },
+  });
+
   // Récupérer les inscrits avec les dates de formation
   const { data: inscrits, isLoading: loadingInscrits, refetch: refetchInscrits } = trpc.inscriptions.listWithDates.useQuery(
     { sequenceId: selectedSequenceId || 0 },
@@ -121,6 +134,14 @@ export default function FormateurEmargement() {
     generateQR({ sequenceId: selectedSequenceId });
   };
 
+  const handleGenerateQRFormateur = () => {
+    if (!selectedSequenceId) {
+      toast.error("Veuillez sélectionner une séquence");
+      return;
+    }
+    generateQRFormateur({ sequenceId: selectedSequenceId });
+  };
+
   const handleValiderPresence = (inscriptionId: number, dateFormationId: number, periode: "matin" | "apres_midi") => {
     validerPresence({
       inscriptionId,
@@ -209,7 +230,7 @@ export default function FormateurEmargement() {
 
           {selectedSequenceId && (
             <div className="space-y-3">
-              <div className="flex gap-2">
+              <div className="flex gap-2 flex-wrap">
                 <Button onClick={handleGenerateQR} disabled={generatingQR}>
                   {generatingQR ? (
                     <>
@@ -219,7 +240,20 @@ export default function FormateurEmargement() {
                   ) : (
                     <>
                       <QrCode className="mr-2 h-4 w-4" />
-                      Afficher le QR code
+                      QR Code Apprenants
+                    </>
+                  )}
+                </Button>
+                <Button onClick={handleGenerateQRFormateur} disabled={generatingQRFormateur} variant="secondary">
+                  {generatingQRFormateur ? (
+                    <>
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      Génération...
+                    </>
+                  ) : (
+                    <>
+                      <QrCode className="mr-2 h-4 w-4" />
+                      QR Code Formateur
                     </>
                   )}
                 </Button>
@@ -451,11 +485,11 @@ export default function FormateurEmargement() {
         </Card>
       )}
 
-      {/* Dialog QR Code */}
+      {/* Dialog QR Code Apprenants */}
       <Dialog open={showQRDialog} onOpenChange={setShowQRDialog}>
         <DialogContent className="max-w-md">
           <DialogHeader>
-            <DialogTitle>QR Code d'émargement</DialogTitle>
+            <DialogTitle>QR Code d'émargement apprenants</DialogTitle>
             <DialogDescription>
               Les apprenants doivent scanner ce QR code pour valider leur présence
             </DialogDescription>
@@ -475,6 +509,30 @@ export default function FormateurEmargement() {
         </DialogContent>
       </Dialog>
 
+      {/* Dialog QR Code Formateur */}
+      <Dialog open={showQRFormateurDialog} onOpenChange={setShowQRFormateurDialog}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>QR Code d'émargement formateur</DialogTitle>
+            <DialogDescription>
+              Scannez ce QR code pour valider votre présence en tant que formateur
+            </DialogDescription>
+          </DialogHeader>
+          {qrFormateurData && (
+            <div className="flex flex-col items-center gap-4 py-4">
+              <img
+                src={qrFormateurData.qrCodeDataURL}
+                alt="QR Code Formateur"
+                className="w-full max-w-[300px] border rounded-lg"
+              />
+              <p className="text-sm text-muted-foreground text-center">
+                Mode formateur : redirige vers la page d'émargement dédiée
+              </p>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+
       {/* Dialog Signature */}
       <Dialog open={showSignatureDialog} onOpenChange={setShowSignatureDialog}>
         <DialogContent className="max-w-2xl">