02d70f27ea
Standardize import declarations, resolve misplaced imports, and enhance consistency across components. Update indentation, split multiline JSX props, and enforce consistent function formatting for better maintainability.
86 lines
2.4 KiB
TypeScript
86 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { AlertCircle, FileText, 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",
|
|
},
|
|
];
|
|
|
|
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>
|
|
);
|
|
}
|