user nouveau onglet
This commit is contained in:
Biqoz
194
app/referents/[referent]/[cours]/page.tsx
Normal file
194
app/referents/[referent]/[cours]/page.tsx
Normal file
@@ -0,0 +1,194 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useMemo } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { ArrowLeft, Mail } from "lucide-react";
|
||||
import { formatDate } from "@/lib/utils";
|
||||
import { LibreChatUser, LibreChatBalance } from "@/lib/types";
|
||||
import { useCollection } from "@/hooks/useCollection";
|
||||
|
||||
// Couleurs prédéfinies pour les référents
|
||||
const REFERENT_COLORS: Record<string, string> = {
|
||||
"Emmanuel WATHELE": "#3B82F6",
|
||||
"IHECS": "#10B981",
|
||||
};
|
||||
|
||||
export default function CoursDetailPage() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const referent = decodeURIComponent(params.referent as string);
|
||||
const cours = decodeURIComponent(params.cours as string);
|
||||
|
||||
const [students, setStudents] = useState<LibreChatUser[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
// Charger tous les balances
|
||||
const { data: balances = [] } = useCollection<LibreChatBalance>("balances", {
|
||||
limit: 1000,
|
||||
});
|
||||
|
||||
// Créer une map des crédits par utilisateur
|
||||
const creditsMap = useMemo(() => {
|
||||
const map = new Map<string, number>();
|
||||
balances.forEach((balance) => {
|
||||
map.set(balance.user, balance.tokenCredits || 0);
|
||||
});
|
||||
return map;
|
||||
}, [balances]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchStudents = async () => {
|
||||
try {
|
||||
const response = await fetch(
|
||||
"/api/collections/users?page=1&limit=1000&filter={}"
|
||||
);
|
||||
const result = await response.json();
|
||||
|
||||
if (result.data) {
|
||||
// Filtrer les étudiants pour ce référent et ce cours
|
||||
const filtered = result.data.filter(
|
||||
(user: any) =>
|
||||
user.referent === referent && user.cours === cours
|
||||
);
|
||||
setStudents(filtered);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Erreur lors du chargement des étudiants:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchStudents();
|
||||
}, [referent, cours]);
|
||||
|
||||
const couleur = REFERENT_COLORS[referent] || "#6B7280";
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => router.push("/referents")}
|
||||
className="mb-4"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Retour aux référents
|
||||
</Button>
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<div className="space-y-4">
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<div key={i} className="h-16 bg-muted animate-pulse rounded" />
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => router.push("/referents")}
|
||||
className="mb-4"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Retour aux référents
|
||||
</Button>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className="w-6 h-6 rounded-full flex-shrink-0"
|
||||
style={{ backgroundColor: couleur }}
|
||||
/>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">{referent}</h1>
|
||||
<p className="text-muted-foreground">{cours}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle>
|
||||
Étudiants ({students.length})
|
||||
</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{students.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-sm text-gray-500">
|
||||
Aucun étudiant dans ce cours
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Nom</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Rôle</TableHead>
|
||||
<TableHead>Crédits</TableHead>
|
||||
<TableHead>Créé le</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{students.map((student) => (
|
||||
<TableRow key={student._id}>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className="w-2 h-2 rounded-full"
|
||||
style={{ backgroundColor: couleur }}
|
||||
/>
|
||||
<span className="font-medium">
|
||||
{student.prenom} {student.nom}
|
||||
</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
<Mail className="h-4 w-4 text-gray-400" />
|
||||
<span className="text-sm">{student.email}</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={student.role === "ADMIN" ? "default" : "secondary"}>
|
||||
{student.role}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="text-sm">
|
||||
{(creditsMap.get(student._id) || 0).toLocaleString()} tokens
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell className="text-sm text-gray-500">
|
||||
{formatDate(student.createdAt)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user