Checkpoint: Améliorations de la gestion des attestations de formation :
- Ajout du paramètre d'envoi automatique des attestations dans la page Paramètres - Ajout de la prévisualisation du modèle d'attestation avec génération PDF - Création de la page Historique des attestations dans la section Traçabilité - Création de la table historiqueAttestations pour tracer les envois - Ajout des procédures tRPC pour l'historique et la prévisualisation
This commit is contained in:
Manus
166
client/src/pages/HistoriqueAttestations.tsx
Normal file
166
client/src/pages/HistoriqueAttestations.tsx
Normal file
@@ -0,0 +1,166 @@
|
||||
import { useState } from "react";
|
||||
import { trpc } from "@/lib/trpc";
|
||||
import DashboardLayout from "@/components/DashboardLayout";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Loader2, FileText, CheckCircle2, XCircle, ExternalLink } from "lucide-react";
|
||||
import { format } from "date-fns";
|
||||
import { fr } from "date-fns/locale";
|
||||
|
||||
export default function HistoriqueAttestations() {
|
||||
const { data: historique, isLoading } = trpc.attestations.historique.useQuery();
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<DashboardLayout>
|
||||
<div className="flex items-center justify-center min-h-[400px]">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<DashboardLayout>
|
||||
<div className="container max-w-7xl py-8">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<FileText className="h-8 w-8 text-primary" />
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">Historique des attestations</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Suivi de tous les envois d'attestations de formation
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Envois d'attestations</CardTitle>
|
||||
<CardDescription>
|
||||
Liste complète des attestations envoyées avec leur statut
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!historique || historique.length === 0 ? (
|
||||
<div className="text-center py-12 text-muted-foreground">
|
||||
<FileText className="h-12 w-12 mx-auto mb-4 opacity-50" />
|
||||
<p>Aucun envoi d'attestation enregistré</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Date d'envoi</TableHead>
|
||||
<TableHead>Formation</TableHead>
|
||||
<TableHead>Séquence</TableHead>
|
||||
<TableHead>Apprenant</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Statut</TableHead>
|
||||
<TableHead>Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{historique.map((item) => (
|
||||
<TableRow key={item.id}>
|
||||
<TableCell className="whitespace-nowrap">
|
||||
{format(new Date(item.dateEnvoi), "dd/MM/yyyy HH:mm", { locale: fr })}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{item.formation.nom}
|
||||
</TableCell>
|
||||
<TableCell>{item.sequence.nom}</TableCell>
|
||||
<TableCell>
|
||||
{item.apprenant.prenom} {item.apprenant.nom}
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground">
|
||||
{item.apprenant.email}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{item.statut === "envoye" ? (
|
||||
<Badge variant="default" className="gap-1">
|
||||
<CheckCircle2 className="h-3 w-3" />
|
||||
Envoyé
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="destructive" className="gap-1">
|
||||
<XCircle className="h-3 w-3" />
|
||||
Erreur
|
||||
</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{item.urlAttestation && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
asChild
|
||||
>
|
||||
<a
|
||||
href={item.urlAttestation}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="gap-1"
|
||||
>
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
Voir PDF
|
||||
</a>
|
||||
</Button>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Statistiques */}
|
||||
{historique && historique.length > 0 && (
|
||||
<div className="grid gap-4 md:grid-cols-3 mt-6">
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||
Total envoyé
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{historique.length}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||
Envois réussis
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-green-600">
|
||||
{historique.filter((h) => h.statut === "envoye").length}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||
Erreurs
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-red-600">
|
||||
{historique.filter((h) => h.statut === "erreur").length}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user