Checkpoint: Système d'émargement numérique avec QR code et génération automatique d'attestations :
## Base de données - ✅ Table `presences` créée (inscriptionId, dateFormationId, heurePresence, modeValidation, validateurId) - ✅ Colonne `qrCodeToken` ajoutée à la table `sequences` ## Backend - ✅ Génération de QR code unique par séquence (qrCodeGenerator.ts) - ✅ Procédures tRPC pour l'émargement (presences.generateQRCode, presences.valider, presences.listBySequence) - ✅ Fonctions de base de données (presenceDb.ts) pour gérer les présences - ✅ Génération automatique d'attestation après validation de toutes les présences - ✅ Intégration avec le service d'attestations existant ## Interface formateur (/formateur/emargement) - ✅ Sélection de la séquence - ✅ Génération et affichage du QR code en modal - ✅ Liste des inscrits avec statut de présence par date - ✅ Validation manuelle de présence possible - ✅ Actualisation en temps réel des présences - ✅ Entrée de menu "Émargement" dans DashboardLayout ## Interface publique (/emargement/:token) - ✅ Page de scan QR code accessible sans authentification - ✅ Recherche de l'apprenant par email - ✅ Sélection de la formation et de la date - ✅ Validation automatique de la présence via QR code - ✅ Écrans de confirmation (succès/erreur) - ✅ Gestion des erreurs (QR invalide, déjà émargé, etc.) ## Génération automatique d'attestations - ✅ Vérification automatique après chaque validation de présence - ✅ Génération du PDF d'attestation si toutes les présences sont validées - ✅ Enregistrement en base de données - ✅ Upload automatique sur S3 ## Dépendances installées - qrcode (génération de QR codes) - @types/qrcode (types TypeScript) Le système est entièrement fonctionnel et prêt à être utilisé par les formateurs et apprenants.
This commit is contained in:
Manus
275
client/src/pages/EmargementScan.tsx
Normal file
275
client/src/pages/EmargementScan.tsx
Normal file
@@ -0,0 +1,275 @@
|
||||
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 { useEffect, useState } from "react";
|
||||
import { useParams } from "wouter";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export default function EmargementScan() {
|
||||
const { token } = useParams<{ token: string }>();
|
||||
const [email, setEmail] = useState("");
|
||||
const [selectedInscriptionId, setSelectedInscriptionId] = useState<number | null>(null);
|
||||
const [selectedDateId, setSelectedDateId] = useState<number | null>(null);
|
||||
const [success, setSuccess] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Récupérer l'apprenant par email
|
||||
const { data: apprenant, refetch: refetchApprenant } = trpc.apprenants.getByEmail.useQuery(
|
||||
{ email },
|
||||
{ enabled: false }
|
||||
);
|
||||
|
||||
// Récupérer les inscriptions de l'apprenant avec les dates
|
||||
const { data: inscriptions } = trpc.inscriptions.listByApprenantWithDates.useQuery(
|
||||
{ apprenantId: apprenant?.id || 0 },
|
||||
{ enabled: !!apprenant }
|
||||
);
|
||||
|
||||
// Récupérer les dates de formation pour l'inscription sélectionnée
|
||||
const selectedInscription = inscriptions?.find((i) => i.inscription.id === selectedInscriptionId);
|
||||
|
||||
// Valider la présence
|
||||
const { mutate: validerPresence, isPending: validating } = trpc.presences.valider.useMutation({
|
||||
onSuccess: () => {
|
||||
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 handleSearchEmail = async () => {
|
||||
if (!email) {
|
||||
toast.error("Veuillez saisir votre email");
|
||||
return;
|
||||
}
|
||||
refetchApprenant();
|
||||
};
|
||||
|
||||
const handleValider = () => {
|
||||
if (!selectedInscriptionId || !selectedDateId) {
|
||||
toast.error("Veuillez sélectionner une date de formation");
|
||||
return;
|
||||
}
|
||||
|
||||
validerPresence({
|
||||
token,
|
||||
inscriptionId: selectedInscriptionId,
|
||||
dateFormationId: selectedDateId,
|
||||
modeValidation: "qrcode",
|
||||
});
|
||||
};
|
||||
|
||||
// Déterminer les dates disponibles
|
||||
const datesDisponibles = selectedInscription?.sequence?.dates || [];
|
||||
|
||||
if (success) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-green-50 to-green-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-green-500 rounded-full flex items-center justify-center">
|
||||
<CheckCircle2 className="h-10 w-10 text-white" />
|
||||
</div>
|
||||
<CardTitle className="text-2xl text-green-700">Présence validée !</CardTitle>
|
||||
<CardDescription>
|
||||
Votre présence a été enregistrée avec succès
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="text-center">
|
||||
<p className="text-sm text-muted-foreground mb-4">
|
||||
Merci d'avoir confirmé votre présence. Vous pouvez maintenant fermer cette page.
|
||||
</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setSuccess(false);
|
||||
setEmail("");
|
||||
setSelectedInscriptionId(null);
|
||||
setSelectedDateId(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 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 className="text-center">
|
||||
<Button
|
||||
onClick={() => {
|
||||
setError(null);
|
||||
setEmail("");
|
||||
setSelectedInscriptionId(null);
|
||||
setSelectedDateId(null);
|
||||
}}
|
||||
>
|
||||
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="max-w-md w-full">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl">Émargement numérique</CardTitle>
|
||||
<CardDescription>
|
||||
Validez votre présence en renseignant vos informations
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<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="prenom.nom@exemple.fr"
|
||||
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>
|
||||
)}
|
||||
|
||||
{/* Étape 2: Sélection de l'inscription et de la date */}
|
||||
{apprenant && !success && (
|
||||
<div className="space-y-4">
|
||||
<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>
|
||||
<Label>Sélectionnez votre formation</Label>
|
||||
<Select
|
||||
value={selectedInscriptionId?.toString() || ""}
|
||||
onValueChange={(value) => {
|
||||
setSelectedInscriptionId(parseInt(value));
|
||||
setSelectedDateId(null);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Choisir une formation..." />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{inscriptions.map((inscr) => (
|
||||
<SelectItem key={inscr.inscription.id} value={inscr.inscription.id.toString()}>
|
||||
{inscr.sequence?.nom || "Formation"}
|
||||
</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>
|
||||
)}
|
||||
|
||||
<Button
|
||||
onClick={handleValider}
|
||||
disabled={!selectedInscriptionId || !selectedDateId || validating}
|
||||
className="w-full"
|
||||
>
|
||||
{validating ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Validation en cours...
|
||||
</>
|
||||
) : (
|
||||
"Valider ma présence"
|
||||
)}
|
||||
</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>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user