4a66676fcb
- Introduced a new "Signalements" card with navigation to `/admin/reports`. - Added `Flag` icon for the reports section.
93 lines
2.5 KiB
TypeScript
93 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { AlertCircle, FileText, Flag, LayoutGrid, Users } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { useEffect, useState } from "react";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { type AdminStats, adminService } from "@/services/admin.service";
|
|
|
|
export default function AdminDashboardPage() {
|
|
const [stats, setStats] = useState<AdminStats | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
adminService
|
|
.getStats()
|
|
.then(setStats)
|
|
.catch((err) => {
|
|
console.error(err);
|
|
setError("Impossible de charger les statistiques.");
|
|
})
|
|
.finally(() => setLoading(false));
|
|
}, []);
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="flex h-[50vh] flex-col items-center justify-center gap-4 text-center">
|
|
<AlertCircle className="h-12 w-12 text-destructive" />
|
|
<p className="text-xl font-semibold">{error}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const statCards = [
|
|
{
|
|
title: "Utilisateurs",
|
|
value: stats?.users,
|
|
icon: Users,
|
|
href: "/admin/users",
|
|
color: "text-blue-500",
|
|
},
|
|
{
|
|
title: "Contenus",
|
|
value: stats?.contents,
|
|
icon: FileText,
|
|
href: "/admin/contents",
|
|
color: "text-green-500",
|
|
},
|
|
{
|
|
title: "Catégories",
|
|
value: stats?.categories,
|
|
icon: LayoutGrid,
|
|
href: "/admin/categories",
|
|
color: "text-purple-500",
|
|
},
|
|
{
|
|
title: "Signalements",
|
|
value: "Voir",
|
|
icon: Flag,
|
|
href: "/admin/reports",
|
|
color: "text-red-500",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="flex-1 space-y-8 p-4 pt-6 md:p-8">
|
|
<div className="flex items-center justify-between space-y-2">
|
|
<h2 className="text-3xl font-bold tracking-tight">Dashboard Admin</h2>
|
|
</div>
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
{statCards.map((card) => (
|
|
<Link key={card.title} href={card.href}>
|
|
<Card className="hover:bg-accent transition-colors cursor-pointer">
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">{card.title}</CardTitle>
|
|
<card.icon className={`h-4 w-4 ${card.color}`} />
|
|
</CardHeader>
|
|
<CardContent>
|
|
{loading ? (
|
|
<Skeleton className="h-8 w-20" />
|
|
) : (
|
|
<div className="text-2xl font-bold">{card.value}</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|