feat: add admin role management with user authentication checks and update sidebar for admin access

src/components/admin/StatsCards.tsx

@@ -0,0 +1,63 @@
+"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>
+  );
+}
+