Rollback to eebcb648
This commit is contained in:
Manus
@@ -1,220 +0,0 @@
|
||||
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 } 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 [emailConfirmed, setEmailConfirmed] = useState(false);
|
||||
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);
|
||||
|
||||
// Valider la présence formateur
|
||||
const { mutate: validerPresence, isPending: validating } = trpc.presences.validerFormateur.useMutation({
|
||||
onSuccess: () => {
|
||||
const now = new Date();
|
||||
setHeureEnregistrement(now);
|
||||
setSuccess(true);
|
||||
toast.success("Présence validée avec succès !");
|
||||
},
|
||||
onError: (error) => {
|
||||
setError(error.message);
|
||||
toast.error("Erreur lors de la validation", {
|
||||
description: error.message,
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleSaveSignature = (dataUrl: string) => {
|
||||
setShowSignaturePad(false);
|
||||
// Valider automatiquement après la signature
|
||||
validerPresence({
|
||||
token: token || "",
|
||||
email,
|
||||
periode: selectedPeriode,
|
||||
signatureDataUrl: dataUrl,
|
||||
});
|
||||
};
|
||||
|
||||
const handleSearchEmail = () => {
|
||||
if (!email || !email.includes("@")) {
|
||||
toast.error("Veuillez saisir un email valide");
|
||||
return;
|
||||
}
|
||||
setEmailConfirmed(true);
|
||||
};
|
||||
|
||||
const handleValider = () => {
|
||||
setShowSignaturePad(true);
|
||||
};
|
||||
|
||||
if (!token) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 p-4">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-red-600">
|
||||
<XCircle className="h-6 w-6" />
|
||||
Lien invalide
|
||||
</CardTitle>
|
||||
<CardDescription>Le lien d'émargement est invalide ou a expiré.</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (showSignaturePad) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 p-4">
|
||||
<Card className="w-full max-w-2xl">
|
||||
<CardHeader>
|
||||
<CardTitle>Signature de présence formateur</CardTitle>
|
||||
<CardDescription>
|
||||
Signez pour valider votre présence en tant que formateur
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<SignaturePadComponent
|
||||
onSave={handleSaveSignature}
|
||||
onCancel={() => setShowSignaturePad(false)}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (success) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-green-50 to-emerald-100 p-4">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-green-600">
|
||||
<CheckCircle2 className="h-6 w-6" />
|
||||
Présence validée
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Votre présence a été enregistrée avec succès
|
||||
{heureEnregistrement && (
|
||||
<span className="block mt-2 text-sm">
|
||||
Heure d'enregistrement : {heureEnregistrement.toLocaleTimeString("fr-FR")}
|
||||
</span>
|
||||
)}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-red-50 to-rose-100 p-4">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-red-600">
|
||||
<XCircle className="h-6 w-6" />
|
||||
Erreur
|
||||
</CardTitle>
|
||||
<CardDescription className="text-red-600">{error}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button onClick={() => window.location.reload()} className="w-full">
|
||||
Réessayer
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 p-4">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader>
|
||||
<CardTitle>Émargement formateur</CardTitle>
|
||||
<CardDescription>Validez votre présence en tant que formateur</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{!emailConfirmed ? (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="votre.email@exemple.com"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
handleSearchEmail();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<Button onClick={handleSearchEmail} className="w-full">
|
||||
Continuer
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="text-2xl">👨🏫</span>
|
||||
<span className="font-semibold text-blue-900">Mode formateur</span>
|
||||
</div>
|
||||
<p className="text-sm text-blue-700">{email}</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="periode">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 ma présence"
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -10,8 +10,8 @@ import {
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { trpc } from "@/lib/trpc";
|
||||
import { CheckCircle2, Loader2, XCircle } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { CheckCircle2, Loader2, XCircle, PenTool } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams } from "wouter";
|
||||
import { toast } from "sonner";
|
||||
import SignaturePadComponent from "@/components/SignaturePad";
|
||||
@@ -19,7 +19,6 @@ 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");
|
||||
@@ -27,7 +26,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 [isFormateur, setIsFormateur] = useState(false);
|
||||
const [signatureDataUrl, setSignatureDataUrl] = useState<string | null>(null);
|
||||
|
||||
// Récupérer l'apprenant par email
|
||||
const { data: apprenant, refetch: refetchApprenant } = trpc.apprenants.getByEmail.useQuery(
|
||||
@@ -38,7 +37,7 @@ export default function EmargementScan() {
|
||||
// Récupérer les inscriptions de l'apprenant avec les dates
|
||||
const { data: inscriptions } = trpc.inscriptions.listByApprenantWithDates.useQuery(
|
||||
{ apprenantId: apprenant?.id || 0 },
|
||||
{ enabled: !!apprenant && !isFormateur }
|
||||
{ enabled: !!apprenant }
|
||||
);
|
||||
|
||||
// Récupérer les dates de formation pour l'inscription sélectionnée
|
||||
@@ -61,130 +60,105 @@ 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 || !email.includes("@")) {
|
||||
toast.error("Veuillez saisir un email valide");
|
||||
if (!email) {
|
||||
toast.error("Veuillez saisir votre email");
|
||||
return;
|
||||
}
|
||||
|
||||
// Essayer de récupérer l'apprenant
|
||||
const result = await refetchApprenant();
|
||||
|
||||
if (result.data) {
|
||||
// C'est un apprenant
|
||||
setIsFormateur(false);
|
||||
setEmailConfirmed(true);
|
||||
} else {
|
||||
// C'est un formateur
|
||||
setIsFormateur(true);
|
||||
setEmailConfirmed(true);
|
||||
// Pour les formateurs, on passe directement à la signature
|
||||
setShowSignaturePad(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleValiderWithSignature = (signatureDataUrl: string) => {
|
||||
if (isFormateur) {
|
||||
// Pour les formateurs : validation directe avec le token
|
||||
validerPresence({
|
||||
token: token || "",
|
||||
email,
|
||||
periode: selectedPeriode,
|
||||
signatureDataUrl,
|
||||
});
|
||||
} else {
|
||||
// Pour les apprenants : validation classique
|
||||
if (!selectedDateId) {
|
||||
toast.error("Veuillez sélectionner une date");
|
||||
return;
|
||||
}
|
||||
|
||||
validerPresence({
|
||||
token: token || "",
|
||||
dateId: selectedDateId,
|
||||
periode: selectedPeriode,
|
||||
email,
|
||||
signatureDataUrl,
|
||||
});
|
||||
}
|
||||
refetchApprenant();
|
||||
};
|
||||
|
||||
const handleValider = () => {
|
||||
if (isFormateur) {
|
||||
// Pour les formateurs, on affiche le pad de signature
|
||||
setShowSignaturePad(true);
|
||||
} else {
|
||||
// Pour les apprenants, vérifier les champs requis
|
||||
if (!selectedDateId) {
|
||||
toast.error("Veuillez sélectionner une date");
|
||||
return;
|
||||
}
|
||||
setShowSignaturePad(true);
|
||||
if (!selectedInscriptionId || !selectedDateId) {
|
||||
toast.error("Veuillez sélectionner une date de formation");
|
||||
return;
|
||||
}
|
||||
|
||||
// Afficher le pad de signature au lieu de valider directement
|
||||
setShowSignaturePad(true);
|
||||
};
|
||||
|
||||
if (!token) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 p-4">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-red-600">
|
||||
<XCircle className="h-6 w-6" />
|
||||
Lien invalide
|
||||
</CardTitle>
|
||||
<CardDescription>Le lien d'émargement est invalide ou a expiré.</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const handleValiderWithSignature = (dataUrl: string) => {
|
||||
if (!selectedInscriptionId || !selectedDateId) {
|
||||
toast.error("Veuillez sélectionner une date de formation");
|
||||
return;
|
||||
}
|
||||
|
||||
if (showSignaturePad) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 p-4">
|
||||
<Card className="w-full max-w-2xl">
|
||||
<CardHeader>
|
||||
<CardTitle>Signature de présence</CardTitle>
|
||||
<CardDescription>
|
||||
{isFormateur
|
||||
? "Signez pour valider votre présence en tant que formateur"
|
||||
: "Signez pour valider votre présence"}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<SignaturePadComponent
|
||||
onSave={handleSaveSignature}
|
||||
onCancel={() => setShowSignaturePad(false)}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
validerPresence({
|
||||
token,
|
||||
inscriptionId: selectedInscriptionId,
|
||||
dateFormationId: selectedDateId,
|
||||
periode: selectedPeriode,
|
||||
modeValidation: "qrcode",
|
||||
signatureDataUrl: dataUrl,
|
||||
});
|
||||
};
|
||||
|
||||
// Déterminer les dates disponibles
|
||||
const datesDisponibles = (selectedInscription?.sequence as any)?.dates || [];
|
||||
|
||||
if (success) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-green-50 to-emerald-100 p-4">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-green-600">
|
||||
<CheckCircle2 className="h-6 w-6" />
|
||||
Présence validée
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-green-50 via-emerald-50 to-green-100 p-4">
|
||||
<Card className="max-w-md w-full shadow-2xl border-2 border-green-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-green-500 to-emerald-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-green-700 animate-in slide-in-from-bottom duration-500 delay-200">
|
||||
Présence validée !
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
<CardDescription className="text-base mt-2 animate-in slide-in-from-bottom duration-500 delay-300">
|
||||
Votre présence a été enregistrée avec succès
|
||||
{heureEnregistrement && (
|
||||
<span className="block mt-2 text-sm">
|
||||
Heure d'enregistrement : {heureEnregistrement.toLocaleTimeString("fr-FR")}
|
||||
</span>
|
||||
)}
|
||||
</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-green-50 border-2 border-green-200 rounded-lg">
|
||||
<p className="text-sm font-medium text-green-800 mb-1">
|
||||
🕒 Heure d'enregistrement
|
||||
</p>
|
||||
<p className="text-2xl font-bold text-green-700">
|
||||
{heureEnregistrement.toLocaleTimeString("fr-FR", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
second: "2-digit",
|
||||
})}
|
||||
</p>
|
||||
<p className="text-xs text-green-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);
|
||||
setHeureEnregistrement(null);
|
||||
setEmail("");
|
||||
setSelectedInscriptionId(null);
|
||||
setSelectedDateId(null);
|
||||
setError(null);
|
||||
}}
|
||||
>
|
||||
Valider une autre présence
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
@@ -192,17 +166,24 @@ export default function EmargementScan() {
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-red-50 to-rose-100 p-4">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-red-600">
|
||||
<XCircle className="h-6 w-6" />
|
||||
Erreur
|
||||
</CardTitle>
|
||||
<CardDescription className="text-red-600">{error}</CardDescription>
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-red-50 to-red-100 p-4">
|
||||
<Card className="max-w-md w-full">
|
||||
<CardHeader className="text-center">
|
||||
<div className="mx-auto mb-4 w-16 h-16 bg-red-500 rounded-full flex items-center justify-center">
|
||||
<XCircle className="h-10 w-10 text-white" />
|
||||
</div>
|
||||
<CardTitle className="text-2xl text-red-700">Erreur</CardTitle>
|
||||
<CardDescription>{error}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button onClick={() => window.location.reload()} className="w-full">
|
||||
<CardContent className="text-center">
|
||||
<Button
|
||||
onClick={() => {
|
||||
setError(null);
|
||||
setEmail("");
|
||||
setSelectedInscriptionId(null);
|
||||
setSelectedDateId(null);
|
||||
}}
|
||||
>
|
||||
Réessayer
|
||||
</Button>
|
||||
</CardContent>
|
||||
@@ -213,20 +194,23 @@ export default function EmargementScan() {
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 p-4">
|
||||
<Card className="w-full max-w-md">
|
||||
<Card className="max-w-md w-full">
|
||||
<CardHeader>
|
||||
<CardTitle>Émargement numérique</CardTitle>
|
||||
<CardDescription>Validez votre présence en renseignant vos informations</CardDescription>
|
||||
<CardTitle className="text-2xl">Émargement numérique</CardTitle>
|
||||
<CardDescription>
|
||||
Validez votre présence en renseignant vos informations
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{!emailConfirmed ? (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<CardContent className="space-y-4">
|
||||
{/* Étape 1: Recherche par email */}
|
||||
{!apprenant && (
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<Label htmlFor="email">Votre email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="votre.email@exemple.com"
|
||||
placeholder="prenom.nom@exemple.fr"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
@@ -240,140 +224,132 @@ export default function EmargementScan() {
|
||||
Continuer
|
||||
</Button>
|
||||
</div>
|
||||
) : isFormateur ? (
|
||||
<div className="space-y-4">
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="text-2xl">👨🏫</span>
|
||||
<span className="font-semibold text-blue-900">Mode formateur</span>
|
||||
</div>
|
||||
<p className="text-sm text-blue-700">{email}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="periode">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 ma présence"
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
{/* Étape 2: Sélection de l'inscription et de la date */}
|
||||
{apprenant && !success && (
|
||||
<div className="space-y-4">
|
||||
<div className="bg-green-50 border border-green-200 rounded-lg p-4">
|
||||
<p className="text-sm font-medium text-green-900">{apprenant?.nom} {apprenant?.prenom}</p>
|
||||
<p className="text-sm text-green-700">{email}</p>
|
||||
<div className="p-3 bg-muted rounded-lg">
|
||||
<p className="text-sm font-medium">
|
||||
{apprenant.prenom} {apprenant.nom}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">{apprenant.email}</p>
|
||||
</div>
|
||||
|
||||
{inscriptions && inscriptions.length > 0 ? (
|
||||
<>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="inscription">Formation</Label>
|
||||
<div>
|
||||
<Label>Sélectionnez votre formation</Label>
|
||||
<Select
|
||||
value={selectedInscriptionId?.toString()}
|
||||
value={selectedInscriptionId?.toString() || ""}
|
||||
onValueChange={(value) => {
|
||||
setSelectedInscriptionId(parseInt(value));
|
||||
setSelectedDateId(null);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Sélectionnez une formation" />
|
||||
<SelectValue placeholder="Choisir une formation..." />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{inscriptions.map((item) => (
|
||||
<SelectItem key={item.inscription.id} value={item.inscription.id.toString()}>
|
||||
{item.sequence.formation.nom} - {item.sequence.nom}
|
||||
{inscriptions.map((inscr) => (
|
||||
<SelectItem key={inscr.inscription.id} value={inscr.inscription.id.toString()}>
|
||||
{inscr.sequence?.nom || "Formation"}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{selectedInscription && (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="date">Date</Label>
|
||||
<Select
|
||||
value={selectedDateId?.toString()}
|
||||
onValueChange={(value) => setSelectedDateId(parseInt(value))}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Sélectionnez une date" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{selectedInscription.dates.map((date) => (
|
||||
<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>
|
||||
)}
|
||||
{selectedInscriptionId && datesDisponibles.length > 0 && (
|
||||
<>
|
||||
<div>
|
||||
<Label>Sélectionnez la date</Label>
|
||||
<Select
|
||||
value={selectedDateId?.toString() || ""}
|
||||
onValueChange={(value) => setSelectedDateId(parseInt(value))}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Choisir une date..." />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{datesDisponibles.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>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="periode">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>
|
||||
<div>
|
||||
<Label>Période de la journée</Label>
|
||||
<Select
|
||||
value={selectedPeriode}
|
||||
onValueChange={(value) => setSelectedPeriode(value as "matin" | "apres_midi")}
|
||||
>
|
||||
<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={!selectedDateId || validating}
|
||||
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-4 w-4 animate-spin" />
|
||||
<Loader2 className="mr-2 h-5 w-5 animate-spin" />
|
||||
Validation en cours...
|
||||
</>
|
||||
) : (
|
||||
"Valider ma présence"
|
||||
<>
|
||||
<PenTool className="mr-2 h-5 w-5" />
|
||||
Signer et valider ma présence
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<div className="text-center py-8 text-gray-500">
|
||||
<p>Aucune inscription trouvée pour cet email.</p>
|
||||
<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>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{showSignaturePad && (
|
||||
<SignaturePadComponent
|
||||
onSave={handleSaveSignature}
|
||||
onCancel={() => setShowSignaturePad(false)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -26,14 +26,13 @@ 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 apprenants
|
||||
// Générer le QR code
|
||||
const { data: qrData, mutate: generateQR, isPending: generatingQR } = trpc.presences.generateQRCode.useMutation({
|
||||
onSuccess: () => {
|
||||
setShowQRDialog(true);
|
||||
@@ -45,18 +44,6 @@ 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 },
|
||||
@@ -134,15 +121,6 @@ export default function FormateurEmargement() {
|
||||
generateQR({ sequenceId: selectedSequenceId });
|
||||
};
|
||||
|
||||
const handleGenerateQRFormateur = () => {
|
||||
if (!selectedSequenceId) {
|
||||
toast.error("Veuillez sélectionner une séquence");
|
||||
return;
|
||||
}
|
||||
// Générer le QR code formateur
|
||||
generateQRFormateur({ sequenceId: selectedSequenceId });
|
||||
};
|
||||
|
||||
const handleValiderPresence = (inscriptionId: number, dateFormationId: number, periode: "matin" | "apres_midi") => {
|
||||
validerPresence({
|
||||
inscriptionId,
|
||||
@@ -231,7 +209,7 @@ export default function FormateurEmargement() {
|
||||
|
||||
{selectedSequenceId && (
|
||||
<div className="space-y-3">
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<div className="flex gap-2">
|
||||
<Button onClick={handleGenerateQR} disabled={generatingQR}>
|
||||
{generatingQR ? (
|
||||
<>
|
||||
@@ -241,20 +219,7 @@ export default function FormateurEmargement() {
|
||||
) : (
|
||||
<>
|
||||
<QrCode className="mr-2 h-4 w-4" />
|
||||
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
|
||||
Afficher le QR code
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
@@ -486,13 +451,13 @@ export default function FormateurEmargement() {
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Dialog QR Code Apprenants */}
|
||||
{/* Dialog QR Code */}
|
||||
<Dialog open={showQRDialog} onOpenChange={setShowQRDialog}>
|
||||
<DialogContent className="max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>QR Code d'émargement apprenants</DialogTitle>
|
||||
<DialogTitle>QR Code d'émargement</DialogTitle>
|
||||
<DialogDescription>
|
||||
Les apprenants doivent scanner ce QR code pour valider leur présence avec signature tactile
|
||||
Les apprenants doivent scanner ce QR code pour valider leur présence
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
{qrData && (
|
||||
@@ -510,38 +475,6 @@ 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 avec votre smartphone pour émarger en tant que formateur avec signature tactile
|
||||
</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"
|
||||
/>
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4 w-full">
|
||||
<p className="text-sm font-semibold text-blue-900 mb-2">👨🏫 Mode formateur
|
||||
</p>
|
||||
<p className="text-xs text-blue-700">
|
||||
Ce QR code vous redirigera vers une page dédiée pour l'émargement formateur.
|
||||
Vous pourrez signer votre présence (matin/après-midi) directement depuis votre smartphone.
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground text-center">
|
||||
Affichez ce QR code en plein écran pour faciliter le scan
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Dialog Signature */}
|
||||
<Dialog open={showSignatureDialog} onOpenChange={setShowSignatureDialog}>
|
||||
<DialogContent className="max-w-2xl">
|
||||
|
||||
Reference in New Issue
Block a user