Checkpoint: Correction du bug d'émargement formateur bloqué sur la saisie d'email

- Ajout de la détection automatique formateur/apprenant dans EmargementScan.tsx
- Nouvelle procédure tRPC getSequenceByToken pour récupérer les infos de séquence
- Interface adaptée selon le type d'utilisateur (apprenant ou formateur)
- Déploiement réussi sur le VPS de production

Le système détecte maintenant automatiquement si l'email correspond à un apprenant ou un formateur, et affiche l'interface appropriée pour chaque cas.

client/src/pages/EmargementScan.tsx

@@ -10,8 +10,8 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { trpc } from "@/lib/trpc";
-import { CheckCircle2, Loader2, XCircle, PenTool } from "lucide-react";
-import { useEffect, useState } from "react";
+import { CheckCircle2, Loader2, XCircle } from "lucide-react";
+import { useState } from "react";
 import { useParams } from "wouter";
 import { toast } from "sonner";
 import SignaturePadComponent from "@/components/SignaturePad";
@@ -19,6 +19,7 @@ import SignaturePadComponent from "@/components/SignaturePad";
 export default function EmargementScan() {
   const { token } = useParams<{ token: string }>();
   const [email, setEmail] = useState("");
+  const [emailConfirmed, setEmailConfirmed] = useState(false);
   const [selectedInscriptionId, setSelectedInscriptionId] = useState<number | null>(null);
   const [selectedDateId, setSelectedDateId] = useState<number | null>(null);
   const [selectedPeriode, setSelectedPeriode] = useState<"matin" | "apres_midi">("matin");
@@ -26,7 +27,7 @@ export default function EmargementScan() {
   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);
+  const [isFormateur, setIsFormateur] = useState(false);
 
   // Récupérer l'apprenant par email
   const { data: apprenant, refetch: refetchApprenant } = trpc.apprenants.getByEmail.useQuery(
@@ -40,6 +41,12 @@ export default function EmargementScan() {
     { enabled: !!apprenant }
   );
 
+  // Récupérer les séquences pour le token (pour les formateurs)
+  const { data: sequenceData } = trpc.presences.getSequenceByToken.useQuery(
+    { token: token || "" },
+    { enabled: emailConfirmed && isFormateur && !!token }
+  );
+
   // Récupérer les dates de formation pour l'inscription sélectionnée
   const selectedInscription = inscriptions?.find((i) => i.inscription.id === selectedInscriptionId);
 
@@ -60,49 +67,89 @@ export default function EmargementScan() {
   });
 
   const handleSaveSignature = (dataUrl: string) => {
-    setSignatureDataUrl(dataUrl);
     setShowSignaturePad(false);
     // Valider automatiquement après la signature
     handleValiderWithSignature(dataUrl);
   };
 
   const handleSearchEmail = async () => {
-    if (!email) {
-      toast.error("Veuillez saisir votre email");
+    if (!email || !email.includes("@")) {
+      toast.error("Veuillez saisir un email valide");
       return;
     }
-    refetchApprenant();
+    
+    // Essayer de récupérer l'apprenant
+    const result = await refetchApprenant();
+    
+    if (result.data) {
+      // C'est un apprenant
+      setIsFormateur(false);
+      setEmailConfirmed(true);
+    } else {
+      // Peut-être un formateur, on continue quand même
+      setIsFormateur(true);
+      setEmailConfirmed(true);
+    }
   };
 
   const handleValider = () => {
-    if (!selectedInscriptionId || !selectedDateId) {
-      toast.error("Veuillez sélectionner une date de formation");
-      return;
+    if (isFormateur) {
+      // Pour un formateur, on a juste besoin de la date et de la période
+      if (!selectedDateId) {
+        toast.error("Veuillez sélectionner une date de formation");
+        return;
+      }
+    } else {
+      // Pour un apprenant, on a besoin de l'inscription et de la date
+      if (!selectedInscriptionId || !selectedDateId) {
+        toast.error("Veuillez sélectionner une date de formation");
+        return;
+      }
     }
 
-    // Afficher le pad de signature au lieu de valider directement
+    // Afficher le pad de signature
     setShowSignaturePad(true);
   };
 
   const handleValiderWithSignature = (dataUrl: string) => {
-    if (!selectedInscriptionId || !selectedDateId) {
-      toast.error("Veuillez sélectionner une date de formation");
-      return;
-    }
+    if (isFormateur) {
+      // Pour un formateur
+      if (!selectedDateId) {
+        toast.error("Veuillez sélectionner une date de formation");
+        return;
+      }
 
-    validerPresence({
-      token,
-      email,
-      inscriptionId: selectedInscriptionId,
-      dateFormationId: selectedDateId,
-      periode: selectedPeriode,
-      modeValidation: "qrcode",
-      signatureDataUrl: dataUrl,
-    });
+      validerPresence({
+        token,
+        email,
+        dateFormationId: selectedDateId,
+        periode: selectedPeriode,
+        modeValidation: "qrcode",
+        signatureDataUrl: dataUrl,
+      });
+    } else {
+      // Pour un apprenant
+      if (!selectedInscriptionId || !selectedDateId) {
+        toast.error("Veuillez sélectionner une date de formation");
+        return;
+      }
+
+      validerPresence({
+        token,
+        email,
+        inscriptionId: selectedInscriptionId,
+        dateFormationId: selectedDateId,
+        periode: selectedPeriode,
+        modeValidation: "qrcode",
+        signatureDataUrl: dataUrl,
+      });
+    }
   };
 
   // Déterminer les dates disponibles
-  const datesDisponibles = (selectedInscription?.sequence as any)?.dates || [];
+  const datesDisponibles = isFormateur 
+    ? (sequenceData?.dates || [])
+    : ((selectedInscription?.sequence as any)?.dates || []);
 
   if (success) {
     return (
@@ -152,9 +199,11 @@ export default function EmargementScan() {
                 setSuccess(false);
                 setHeureEnregistrement(null);
                 setEmail("");
+                setEmailConfirmed(false);
                 setSelectedInscriptionId(null);
                 setSelectedDateId(null);
                 setError(null);
+                setIsFormateur(false);
               }}
             >
               Valider une autre présence
@@ -181,8 +230,10 @@ export default function EmargementScan() {
               onClick={() => {
                 setError(null);
                 setEmail("");
+                setEmailConfirmed(false);
                 setSelectedInscriptionId(null);
                 setSelectedDateId(null);
+                setIsFormateur(false);
               }}
             >
               Réessayer
@@ -203,8 +254,8 @@ export default function EmargementScan() {
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
-          {/* Étape 1: Recherche par email */}
-          {!apprenant && (
+          {/* Étape 1: Saisie de l'email */}
+          {!emailConfirmed && (
             <div className="space-y-3">
               <div>
                 <Label htmlFor="email">Votre email</Label>
@@ -227,8 +278,8 @@ export default function EmargementScan() {
             </div>
           )}
 
-          {/* Étape 2: Sélection de l'inscription et de la date */}
-          {apprenant && !success && (
+          {/* Étape 2: Sélection pour apprenant */}
+          {emailConfirmed && !isFormateur && apprenant && !success && (
             <div className="space-y-4">
               <div className="p-3 bg-muted rounded-lg">
                 <p className="text-sm font-medium">
@@ -288,56 +339,121 @@ export default function EmargementScan() {
                       </div>
 
                       <div>
-                        <Label>Période de la journée</Label>
+                        <Label>Période</Label>
                         <Select
                           value={selectedPeriode}
-                          onValueChange={(value) => setSelectedPeriode(value as "matin" | "apres_midi")}
+                          onValueChange={(value: "matin" | "apres_midi") => setSelectedPeriode(value)}
                         >
                           <SelectTrigger>
                             <SelectValue />
                           </SelectTrigger>
                           <SelectContent>
-                            <SelectItem value="matin">🌅 Matin</SelectItem>
-                            <SelectItem value="apres_midi">🌆 Après-midi</SelectItem>
+                            <SelectItem value="matin">Matin</SelectItem>
+                            <SelectItem value="apres_midi">Après-midi</SelectItem>
                           </SelectContent>
                         </Select>
                       </div>
+
+                      <Button onClick={handleValider} className="w-full" disabled={validating}>
+                        {validating ? (
+                          <>
+                            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                            Validation en cours...
+                          </>
+                        ) : (
+                          "Signer et valider"
+                        )}
+                      </Button>
                     </>
                   )}
+                </>
+              ) : (
+                <p className="text-center text-muted-foreground py-4">
+                  Aucune inscription trouvée pour cet email
+                </p>
+              )}
+            </div>
+          )}
 
-                  <Button
-                    onClick={handleValider}
-                    disabled={!selectedInscriptionId || !selectedDateId || validating}
-                    className="w-full h-14 text-lg bg-gradient-to-r from-blue-600 to-indigo-700 hover:from-blue-700 hover:to-indigo-800"
-                  >
-                    {validating ? (
-                      <>
-                        <Loader2 className="mr-2 h-5 w-5 animate-spin" />
-                        Validation en cours...
-                      </>
-                    ) : (
-                      <>
-                        <PenTool className="mr-2 h-5 w-5" />
-                        Signer et valider ma présence
-                      </>
-                    )}
-                  </Button>
+          {/* Étape 2: Sélection pour formateur */}
+          {emailConfirmed && isFormateur && !success && (
+            <div className="space-y-4">
+              <div className="p-3 bg-blue-50 border border-blue-200 rounded-lg">
+                <p className="text-sm font-medium text-blue-900">
+                  👨‍🏫 Mode formateur
+                </p>
+                <p className="text-xs text-blue-700">{email}</p>
+              </div>
+
+              {sequenceData && sequenceData.dates && sequenceData.dates.length > 0 ? (
+                <>
+                  <div>
+                    <Label>Formation</Label>
+                    <div className="p-3 bg-muted rounded-lg">
+                      <p className="text-sm font-medium">{sequenceData.nom}</p>
+                      <p className="text-xs text-muted-foreground">{sequenceData.lieu}</p>
+                    </div>
+                  </div>
+
+                  <div>
+                    <Label>Sélectionnez la date</Label>
+                    <Select
+                      value={selectedDateId?.toString() || ""}
+                      onValueChange={(value) => setSelectedDateId(parseInt(value))}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Choisir une date..." />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {sequenceData.dates.map((date: any) => (
+                          <SelectItem key={date.id} value={date.id.toString()}>
+                            {new Date(date.dateDebut).toLocaleDateString("fr-FR", {
+                              weekday: "long",
+                              year: "numeric",
+                              month: "long",
+                              day: "numeric",
+                            })}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  {selectedDateId && (
+                    <>
+                      <div>
+                        <Label>Période</Label>
+                        <Select
+                          value={selectedPeriode}
+                          onValueChange={(value: "matin" | "apres_midi") => setSelectedPeriode(value)}
+                        >
+                          <SelectTrigger>
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="matin">Matin</SelectItem>
+                            <SelectItem value="apres_midi">Après-midi</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+
+                      <Button onClick={handleValider} className="w-full" disabled={validating}>
+                        {validating ? (
+                          <>
+                            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                            Validation en cours...
+                          </>
+                        ) : (
+                          "Signer et valider"
+                        )}
+                      </Button>
+                    </>
+                  )}
                 </>
               ) : (
                 <div className="text-center py-4">
-                  <p className="text-sm text-muted-foreground">
-                    Aucune inscription trouvée pour cet email
-                  </p>
-                  <Button
-                    variant="outline"
-                    onClick={() => {
-                      setEmail("");
-                      setSelectedInscriptionId(null);
-                    }}
-                    className="mt-4"
-                  >
-                    Essayer un autre email
-                  </Button>
+                  <Loader2 className="h-6 w-6 animate-spin mx-auto mb-2" />
+                  <p className="text-sm text-muted-foreground">Chargement des informations...</p>
                 </div>
               )}
             </div>
@@ -345,11 +461,24 @@ export default function EmargementScan() {
         </CardContent>
       </Card>
 
+      {/* Dialog de signature */}
       {showSignaturePad && (
-        <SignaturePadComponent
-          onSave={handleSaveSignature}
-          onCancel={() => setShowSignaturePad(false)}
-        />
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
+          <Card className="max-w-2xl w-full">
+            <CardHeader>
+              <CardTitle>Signature</CardTitle>
+              <CardDescription>
+                Signez dans le cadre ci-dessous pour valider votre présence
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <SignaturePadComponent
+                onSave={handleSaveSignature}
+                onCancel={() => setShowSignaturePad(false)}
+              />
+            </CardContent>
+          </Card>
+        </div>
       )}
     </div>
   );