Checkpoint: Implémentation des trois améliorations demandées : ajout de filtres par fonction sur les pages apprenants et inscrits, création d'un graphique circulaire de répartition par fonction sur le tableau de bord avec recharts, et personnalisation des templates d'emails (confirmation, teaser, rappel J-7) incluant la fonction de l'apprenant dans la salutation.

This commit is contained in:
Manus Sandbox
2025-11-12 09:35:58 -05:00
parent 9d591b64ba
commit ca9b1c3d37
8 changed files with 156 additions and 23 deletions

View File

@@ -16,6 +16,7 @@ export default function AdminApprenants() {
const [open, setOpen] = useState(false);
const [editingId, setEditingId] = useState<number | null>(null);
const [searchTerm, setSearchTerm] = useState("");
const [filterFonction, setFilterFonction] = useState<string>("all");
const [formData, setFormData] = useState({
nom: "",
prenom: "",
@@ -104,9 +105,11 @@ export default function AdminApprenants() {
apprenant.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
apprenant.codeEtablissement.toLowerCase().includes(searchTerm.toLowerCase());
return matchesSearch;
const matchesFonction = filterFonction === "all" || apprenant.fonction === filterFonction;
return matchesSearch && matchesFonction;
});
}, [apprenants, searchTerm]);
}, [apprenants, searchTerm, filterFonction]);
return (
<DashboardLayout>
@@ -218,17 +221,34 @@ export default function AdminApprenants() {
</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-2">
<Label htmlFor="search">Rechercher un apprenant</Label>
<div className="relative">
<Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
id="search"
placeholder="Nom, prénom, email ou code établissement..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="pl-8"
/>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="search">Rechercher un apprenant</Label>
<div className="relative">
<Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
id="search"
placeholder="Nom, prénom, email ou code établissement..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="pl-8"
/>
</div>
</div>
<div className="space-y-2">
<Label htmlFor="filterFonction">Filtrer par fonction</Label>
<Select value={filterFonction} onValueChange={setFilterFonction}>
<SelectTrigger id="filterFonction">
<SelectValue placeholder="Toutes les fonctions" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">Toutes les fonctions</SelectItem>
<SelectItem value="directeur">Directeur</SelectItem>
<SelectItem value="chef_service">Chef de service</SelectItem>
<SelectItem value="autre">Autre</SelectItem>
</SelectContent>
</Select>
</div>
</div>