64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Users, Shield, Settings, Bookmark } from "lucide-react";
|
|
|
|
interface StatsCardsProps {
|
|
stats: {
|
|
totalUsers: number;
|
|
totalAdmins: number;
|
|
usersWithKomga: number;
|
|
usersWithPreferences: number;
|
|
};
|
|
}
|
|
|
|
export function StatsCards({ stats }: StatsCardsProps) {
|
|
const cards = [
|
|
{
|
|
title: "Utilisateurs totaux",
|
|
value: stats.totalUsers,
|
|
icon: Users,
|
|
description: "Comptes enregistrés",
|
|
},
|
|
{
|
|
title: "Administrateurs",
|
|
value: stats.totalAdmins,
|
|
icon: Shield,
|
|
description: "Avec privilèges admin",
|
|
},
|
|
{
|
|
title: "Config Komga",
|
|
value: stats.usersWithKomga,
|
|
icon: Bookmark,
|
|
description: "Utilisateurs configurés",
|
|
},
|
|
{
|
|
title: "Préférences",
|
|
value: stats.usersWithPreferences,
|
|
icon: Settings,
|
|
description: "Préférences personnalisées",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
|
{cards.map((card) => {
|
|
const Icon = card.icon;
|
|
return (
|
|
<Card key={card.title}>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">{card.title}</CardTitle>
|
|
<Icon className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{card.value}</div>
|
|
<p className="text-xs text-muted-foreground">{card.description}</p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
|