user management

app/api/add-credits/route.ts

@@ -4,9 +4,11 @@ import { getDatabase } from "@/lib/db/mongodb";
 export async function POST() {
   try {
     const db = await getDatabase();
-    const CREDITS_TO_ADD = 5000000; // 5 millions de tokens
+    const CREDITS_TO_ADD = 3000000; // 3 millions de tokens
 
-    console.log(`🚀 DÉBUT: Ajout de ${CREDITS_TO_ADD.toLocaleString()} crédits à tous les utilisateurs`);
+    console.log(
+      `🚀 DÉBUT: Ajout de ${CREDITS_TO_ADD.toLocaleString()} crédits à tous les utilisateurs`
+    );
 
     // Récupérer tous les utilisateurs existants
     const users = await db.collection("users").find({}).toArray();
@@ -15,14 +17,14 @@ export async function POST() {
     if (users.length === 0) {
       return NextResponse.json({
         success: false,
-        message: "Aucun utilisateur trouvé"
+        message: "Aucun utilisateur trouvé",
       });
     }
 
     // Récupérer toutes les balances existantes
     const existingBalances = await db.collection("balances").find({}).toArray();
     const existingBalanceUserIds = new Set(
-      existingBalances.map(balance => balance.user.toString())
+      existingBalances.map((balance) => balance.user.toString())
     );
 
     console.log(`💰 Balances existantes: ${existingBalances.length}`);
@@ -34,21 +36,23 @@ export async function POST() {
     // Pour chaque utilisateur
     for (const user of users) {
       const userId = user._id;
-      
+
       if (existingBalanceUserIds.has(userId.toString())) {
         // Utilisateur a déjà une balance - ajouter les crédits
         const updateResult = await db.collection("balances").updateOne(
           { user: userId },
-          { 
+          {
             $inc: { tokenCredits: CREDITS_TO_ADD },
-            $set: { lastRefill: new Date() }
+            $set: { lastRefill: new Date() },
           }
         );
-        
+
         if (updateResult.modifiedCount > 0) {
           updatedCount++;
           totalCreditsAdded += CREDITS_TO_ADD;
-          console.log(`✅ Crédits ajoutés pour l'utilisateur: ${user.email || user.name}`);
+          console.log(
+            `✅ Crédits ajoutés pour l'utilisateur: ${user.email || user.name}`
+          );
         }
       } else {
         // Utilisateur n'a pas de balance - créer une nouvelle balance
@@ -60,20 +64,24 @@ export async function POST() {
           refillAmount: 0,
           refillIntervalUnit: "month",
           refillIntervalValue: 1,
-          __v: 0
+          __v: 0,
         };
 
         await db.collection("balances").insertOne(newBalance);
         createdCount++;
         totalCreditsAdded += CREDITS_TO_ADD;
-        console.log(`🆕 Nouvelle balance créée pour: ${user.email || user.name}`);
+        console.log(
+          `🆕 Nouvelle balance créée pour: ${user.email || user.name}`
+        );
       }
     }
 
     console.log(`✅ TERMINÉ:`);
     console.log(`- Balances mises à jour: ${updatedCount}`);
     console.log(`- Nouvelles balances créées: ${createdCount}`);
-    console.log(`- Total crédits ajoutés: ${totalCreditsAdded.toLocaleString()}`);
+    console.log(
+      `- Total crédits ajoutés: ${totalCreditsAdded.toLocaleString()}`
+    );
 
     return NextResponse.json({
       success: true,
@@ -82,17 +90,21 @@ export async function POST() {
         updatedBalances: updatedCount,
         createdBalances: createdCount,
         creditsPerUser: CREDITS_TO_ADD,
-        totalCreditsAdded
+        totalCreditsAdded,
       },
-      message: `${CREDITS_TO_ADD.toLocaleString()} crédits ajoutés à ${users.length} utilisateurs (${updatedCount} mis à jour, ${createdCount} créés)`
+      message: `${CREDITS_TO_ADD.toLocaleString()} crédits ajoutés à ${
+        users.length
+      } utilisateurs (${updatedCount} mis à jour, ${createdCount} créés)`,
     });
-
   } catch (error) {
     console.error("Erreur lors de l'ajout des crédits:", error);
-    return NextResponse.json({ 
+    return NextResponse.json(
-      success: false,
+      {
-      error: "Erreur serveur lors de l'ajout des crédits" 
+        success: false,
-    }, { status: 500 });
+        error: "Erreur serveur lors de l'ajout des crédits",
+      },
+      { status: 500 }
+    );
   }
 }
 
@@ -104,8 +116,12 @@ export async function GET() {
     const users = await db.collection("users").find({}).toArray();
     const balances = await db.collection("balances").find({}).toArray();
 
-    const totalCredits = balances.reduce((sum, balance) => sum + (balance.tokenCredits || 0), 0);
+    const totalCredits = balances.reduce(
-    const averageCredits = balances.length > 0 ? totalCredits / balances.length : 0;
+      (sum, balance) => sum + (balance.tokenCredits || 0),
+      0
+    );
+    const averageCredits =
+      balances.length > 0 ? totalCredits / balances.length : 0;
 
     return NextResponse.json({
       statistics: {
@@ -113,12 +129,11 @@ export async function GET() {
         totalBalances: balances.length,
         totalCredits,
         averageCredits: Math.round(averageCredits),
-        usersWithoutBalance: users.length - balances.length
+        usersWithoutBalance: users.length - balances.length,
-      }
+      },
     });
-
   } catch (error) {
     console.error("Erreur lors de la récupération des statistiques:", error);
     return NextResponse.json({ error: "Erreur serveur" }, { status: 500 });
   }
-}
+}

app/api/create-user/route.ts

@@ -0,0 +1,126 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getDatabase } from "@/lib/db/mongodb";
+import bcrypt from "bcryptjs";
+import { ObjectId } from "mongodb";
+
+export async function POST(request: NextRequest) {
+  try {
+    const { name, email, password, role = "USER" } = await request.json();
+
+    // Validation des données
+    if (!name || !email || !password) {
+      return NextResponse.json(
+        { error: "Nom, email et mot de passe sont requis" },
+        { status: 400 }
+      );
+    }
+
+    // Validation de l'email
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(email)) {
+      return NextResponse.json(
+        { error: "Format d'email invalide" },
+        { status: 400 }
+      );
+    }
+
+    // Validation du mot de passe (minimum 8 caractères)
+    if (password.length < 8) {
+      return NextResponse.json(
+        { error: "Le mot de passe doit contenir au moins 8 caractères" },
+        { status: 400 }
+      );
+    }
+
+    // Validation du rôle
+    if (!["USER", "ADMIN"].includes(role)) {
+      return NextResponse.json(
+        { error: "Rôle invalide. Doit être USER ou ADMIN" },
+        { status: 400 }
+      );
+    }
+
+    const db = await getDatabase();
+
+    // Vérifier si l'utilisateur existe déjà
+    const existingUser = await db.collection("users").findOne({ email });
+    if (existingUser) {
+      return NextResponse.json(
+        { error: "Un utilisateur avec cet email existe déjà" },
+        { status: 409 }
+      );
+    }
+
+    // Hasher le mot de passe
+    const saltRounds = 12;
+    const hashedPassword = await bcrypt.hash(password, saltRounds);
+
+    // Créer le nouvel utilisateur
+    const newUser = {
+      name,
+      username: email.split("@")[0], // Utiliser la partie avant @ comme username
+      email,
+      emailVerified: false,
+      password: hashedPassword,
+      avatar: null,
+      provider: "local",
+      role,
+      plugins: [],
+      twoFactorEnabled: false,
+      termsAccepted: true,
+      personalization: {
+        memories: false,
+        _id: new ObjectId(),
+      },
+      backupCodes: [],
+      refreshToken: [],
+      createdAt: new Date(),
+      updatedAt: new Date(),
+      __v: 0,
+    };
+
+    // Insérer l'utilisateur dans la base de données
+    const result = await db.collection("users").insertOne(newUser);
+
+    if (!result.insertedId) {
+      return NextResponse.json(
+        { error: "Erreur lors de la création de l'utilisateur" },
+        { status: 500 }
+      );
+    }
+
+    // Créer une balance initiale pour l'utilisateur
+    const initialBalance = {
+      user: result.insertedId,
+      tokenCredits: 3000000, // 3 millions de tokens par défaut
+      autoRefillEnabled: false,
+      lastRefill: new Date(),
+      refillAmount: 0,
+      refillIntervalUnit: "month",
+      refillIntervalValue: 1,
+      __v: 0,
+    };
+
+    await db.collection("balances").insertOne(initialBalance);
+
+    console.log(`✅ Nouvel utilisateur créé: ${email} (${role})`);
+
+    return NextResponse.json({
+      success: true,
+      message: `Utilisateur ${name} créé avec succès`,
+      user: {
+        id: result.insertedId,
+        name,
+        email,
+        role,
+        createdAt: newUser.createdAt,
+      },
+    });
+  } catch (error) {
+    console.error("Erreur lors de la création de l'utilisateur:", error);
+    return NextResponse.json(
+      { error: "Erreur serveur lors de la création de l'utilisateur" },
+      { status: 500 }
+    );
+  }
+}

app/api/delete-user/route.ts

@@ -0,0 +1,160 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getDatabase } from "@/lib/db/mongodb";
+import { ObjectId } from "mongodb";
+
+interface QueryFilter {
+  _id?: ObjectId;
+  email?: string;
+}
+
+export async function DELETE(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const userId = searchParams.get("id");
+    const email = searchParams.get("email");
+
+    if (!userId && !email) {
+      return NextResponse.json(
+        { error: "ID utilisateur ou email requis" },
+        { status: 400 }
+      );
+    }
+
+    const db = await getDatabase();
+    const usersCollection = db.collection("users");
+    const balancesCollection = db.collection("balances");
+
+    // Construire la requête de recherche
+    const query: QueryFilter = {};
+    if (userId) {
+      // Vérifier si l'ID est un ObjectId valide
+      if (!ObjectId.isValid(userId)) {
+        return NextResponse.json(
+          { error: "ID utilisateur invalide" },
+          { status: 400 }
+        );
+      }
+      query._id = new ObjectId(userId);
+    } else if (email) {
+      query.email = email.toLowerCase();
+    }
+
+    // Vérifier si l'utilisateur existe
+    const existingUser = await usersCollection.findOne(query);
+    if (!existingUser) {
+      return NextResponse.json(
+        { error: "Utilisateur non trouvé" },
+        { status: 404 }
+      );
+    }
+
+    // Supprimer l'utilisateur
+    const deleteUserResult = await usersCollection.deleteOne(query);
+    
+    // Supprimer le solde associé
+    const deleteBalanceResult = await balancesCollection.deleteOne({
+      user: existingUser._id
+    });
+
+    if (deleteUserResult.deletedCount === 0) {
+      return NextResponse.json(
+        { error: "Erreur lors de la suppression de l'utilisateur" },
+        { status: 500 }
+      );
+    }
+
+    return NextResponse.json({
+      success: true,
+      message: "Utilisateur supprimé avec succès",
+      deletedUser: {
+        id: existingUser._id.toString(),
+        name: existingUser.name,
+        email: existingUser.email,
+        role: existingUser.role
+      },
+      balanceDeleted: deleteBalanceResult.deletedCount > 0
+    });
+
+  } catch (error) {
+    console.error("Erreur lors de la suppression de l'utilisateur:", error);
+    return NextResponse.json(
+      { error: "Erreur interne du serveur" },
+      { status: 500 }
+    );
+  }
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const { userId, email } = await request.json();
+
+    if (!userId && !email) {
+      return NextResponse.json(
+        { error: "ID utilisateur ou email requis" },
+        { status: 400 }
+      );
+    }
+
+    const db = await getDatabase();
+    const usersCollection = db.collection("users");
+    const balancesCollection = db.collection("balances");
+
+    // Construire la requête de recherche
+    const query: QueryFilter = {};
+    if (userId) {
+      // Vérifier si l'ID est un ObjectId valide
+      if (!ObjectId.isValid(userId)) {
+        return NextResponse.json(
+          { error: "ID utilisateur invalide" },
+          { status: 400 }
+        );
+      }
+      query._id = new ObjectId(userId);
+    } else if (email) {
+      query.email = email.toLowerCase();
+    }
+
+    // Vérifier si l'utilisateur existe
+    const existingUser = await usersCollection.findOne(query);
+    if (!existingUser) {
+      return NextResponse.json(
+        { error: "Utilisateur non trouvé" },
+        { status: 404 }
+      );
+    }
+
+    // Supprimer l'utilisateur
+    const deleteUserResult = await usersCollection.deleteOne(query);
+    
+    // Supprimer le solde associé
+    const deleteBalanceResult = await balancesCollection.deleteOne({
+      user: existingUser._id
+    });
+
+    if (deleteUserResult.deletedCount === 0) {
+      return NextResponse.json(
+        { error: "Erreur lors de la suppression de l'utilisateur" },
+        { status: 500 }
+      );
+    }
+
+    return NextResponse.json({
+      success: true,
+      message: "Utilisateur supprimé avec succès",
+      deletedUser: {
+        id: existingUser._id.toString(),
+        name: existingUser.name,
+        email: existingUser.email,
+        role: existingUser.role
+      },
+      balanceDeleted: deleteBalanceResult.deletedCount > 0
+    });
+
+  } catch (error) {
+    console.error("Erreur lors de la suppression de l'utilisateur:", error);
+    return NextResponse.json(
+      { error: "Erreur interne du serveur" },
+      { status: 500 }
+    );
+  }
+}

app/globals.css

@@ -51,51 +51,53 @@
   --card-foreground: oklch(0.145 0 0);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
+  --primary: oklch(0.145 0 0);
   --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
+  --secondary: oklch(0.969 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
+  --secondary-foreground: oklch(0.145 0 0);
-  --muted: oklch(0.97 0 0);
+  --muted: oklch(0.969 0 0);
   --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
+  --accent: oklch(0.969 0 0);
-  --accent-foreground: oklch(0.205 0 0);
+  --accent-foreground: oklch(0.145 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
+  --destructive: oklch(0.627 0.265 303.9);
-  --border: oklch(0.922 0 0);
+  --destructive-foreground: oklch(0.985 0 0);
-  --input: oklch(0.922 0 0);
+  --border: oklch(0.898 0 0);
-  --ring: oklch(0.708 0 0);
+  --input: oklch(0.898 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
+  --ring: oklch(0.145 0 0);
-  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-5: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
-  --sidebar: oklch(0.985 0 0);
+  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar: oklch(0.205 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
   --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.708 0 0);
+  --sidebar-ring: oklch(0.556 0 0);
 }
 
 .dark {
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
+  --card: oklch(0.145 0 0);
   --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
+  --popover: oklch(0.145 0 0);
   --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
+  --primary: oklch(0.985 0 0);
-  --primary-foreground: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.145 0 0);
-  --secondary: oklch(0.269 0 0);
+  --secondary: oklch(0.205 0 0);
   --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
+  --muted: oklch(0.205 0 0);
-  --muted-foreground: oklch(0.708 0 0);
+  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.269 0 0);
+  --accent: oklch(0.205 0 0);
   --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
+  --destructive: oklch(0.627 0.265 303.9);
-  --border: oklch(1 0 0 / 10%);
+  --destructive-foreground: oklch(0.985 0 0);
-  --input: oklch(1 0 0 / 15%);
+  --border: oklch(0.205 0 0);
+  --input: oklch(0.205 0 0);
   --ring: oklch(0.556 0 0);
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
@@ -120,3 +122,31 @@
     @apply bg-background text-foreground;
   }
 }
+
+@layer utilities {
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+
+  .animate-accordion-down {
+    animation: accordion-down 0.2s ease-out;
+  }
+
+  .animate-accordion-up {
+    animation: accordion-up 0.2s ease-out;
+  }
+}

app/settings/page.tsx

@@ -3,6 +3,7 @@ import { Badge } from "@/components/ui/badge";
 import { Database, Server, Settings } from "lucide-react";
 
 import AddCredits from "@/components/dashboard/add-credits";
+import UserManagement from "@/components/dashboard/user-management";
 
 export default function SettingsPage() {
   return (
@@ -48,13 +49,13 @@ export default function SettingsPage() {
                 <span className="text-sm text-muted-foreground">
                   Version Next.js
                 </span>
-                <Badge variant="secondary">14.x</Badge>
+                <Badge variant="outline">15.0.3</Badge>
               </div>
               <div className="flex justify-between">
                 <span className="text-sm text-muted-foreground">
                   Version Node.js
                 </span>
-                <Badge variant="secondary">18.x</Badge>
+                <Badge variant="outline">{process.version}</Badge>
               </div>
               <div className="flex justify-between">
                 <span className="text-sm text-muted-foreground">
@@ -67,16 +68,21 @@ export default function SettingsPage() {
         </Card>
       </div>
 
+      {/* Gestion des utilisateurs */}
+      <UserManagement />
+
       {/* Gestion des crédits */}
-      <div>
+      <Card>
-        <h2 className="text-2xl font-bold tracking-tight mb-4 flex items-center gap-2">
+        <CardHeader>
-          <Settings className="h-6 w-6" />
+          <CardTitle className="flex items-center gap-2">
-          Gestion des Crédits
+            <Settings className="h-6 w-6" />
-        </h2>
+            Gestion des Crédits
-        <div className="space-y-6">
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
           <AddCredits />
-        </div>
+        </CardContent>
-      </div>
+      </Card>
     </div>
   );
 }

components/dashboard/add-credits.tsx

@@ -2,7 +2,13 @@
 
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Plus, DollarSign, Users, TrendingUp } from "lucide-react";
 
@@ -33,7 +39,7 @@ export default function AddCredits() {
     try {
       const response = await fetch("/api/add-credits");
       const data = await response.json();
-      
+
       if (data.statistics) {
         setStats(data.statistics);
       }
@@ -45,18 +51,22 @@ export default function AddCredits() {
   };
 
   const addCreditsToAllUsers = async () => {
-    if (!confirm("Êtes-vous sûr de vouloir ajouter 5 millions de crédits à TOUS les utilisateurs ? Cette action est irréversible.")) {
+    if (
+      !confirm(
+        "Êtes-vous sûr de vouloir ajouter 5 millions de crédits à TOUS les utilisateurs ? Cette action est irréversible."
+      )
+    ) {
       return;
     }
 
     setLoading(true);
     try {
       const response = await fetch("/api/add-credits", {
-        method: "POST"
+        method: "POST",
       });
-      
+
       const data = await response.json();
-      
+
       if (data.success) {
         setResult(data.statistics);
         // Rafraîchir les stats
@@ -86,7 +96,7 @@ export default function AddCredits() {
       <CardContent className="space-y-4">
         {/* Bouton d'analyse */}
         <div className="flex gap-2">
-          <Button 
+          <Button
             onClick={analyzeCurrentCredits}
             disabled={analyzing}
             variant="outline"
@@ -103,9 +113,11 @@ export default function AddCredits() {
                 <Users className="h-4 w-4 text-blue-600" />
                 <span className="text-sm font-medium">Utilisateurs</span>
               </div>
-              <p className="text-2xl font-bold text-blue-600">{stats.totalUsers}</p>
+              <p className="text-2xl font-bold text-blue-600">
+                {stats.totalUsers}
+              </p>
             </div>
-            
+
             <div className="bg-green-50 p-3 rounded-lg">
               <div className="flex items-center gap-2">
                 <DollarSign className="h-4 w-4 text-green-600" />
@@ -115,7 +127,7 @@ export default function AddCredits() {
                 {stats.totalCredits.toLocaleString()}
               </p>
             </div>
-            
+
             <div className="bg-purple-50 p-3 rounded-lg">
               <div className="flex items-center gap-2">
                 <TrendingUp className="h-4 w-4 text-purple-600" />
@@ -125,13 +137,15 @@ export default function AddCredits() {
                 {stats.averageCredits.toLocaleString()}
               </p>
             </div>
-            
+
             <div className="bg-orange-50 p-3 rounded-lg">
               <div className="flex items-center gap-2">
                 <Users className="h-4 w-4 text-orange-600" />
                 <span className="text-sm font-medium">Sans Balance</span>
               </div>
-              <p className="text-2xl font-bold text-orange-600">{stats.usersWithoutBalance}</p>
+              <p className="text-2xl font-bold text-orange-600">
+                {stats.usersWithoutBalance}
+              </p>
             </div>
           </div>
         )}
@@ -140,20 +154,26 @@ export default function AddCredits() {
         {stats && (
           <div className="border-t pt-4">
             <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-4">
-              <h4 className="font-semibold text-yellow-800 mb-2">⚠️ Action Importante</h4>
+              <h4 className="font-semibold text-yellow-800 mb-2">
+                ⚠️ Action Importante
+              </h4>
               <p className="text-yellow-700 text-sm">
-                Cette action va ajouter <strong>5,000,000 crédits</strong> à chacun des {stats.totalUsers} utilisateurs.
+                Cette action va ajouter <strong>5,000,000 crédits</strong> à
+                chacun des {stats.totalUsers} utilisateurs.
                 <br />
-                Total de crédits qui seront ajoutés: <strong>{(stats.totalUsers * 5000000).toLocaleString()}</strong>
+                Total de crédits qui seront ajoutés:{" "}
+                <strong>{(stats.totalUsers * 3000000).toLocaleString()}</strong>
               </p>
             </div>
-            
+
-            <Button 
+            <Button
               onClick={addCreditsToAllUsers}
               disabled={loading}
               className="w-full bg-green-600 hover:bg-green-700"
             >
-              {loading ? "Ajout en cours..." : `Ajouter 5M crédits à ${stats.totalUsers} utilisateurs`}
+              {loading
+                ? "Ajout en cours..."
+                : `Ajouter 5M crédits à ${stats.totalUsers} utilisateurs`}
             </Button>
           </div>
         )}
@@ -161,23 +181,33 @@ export default function AddCredits() {
         {/* Résultats */}
         {result && (
           <div className="border-t pt-4">
-            <h4 className="font-semibold text-green-600 mb-3">✅ Crédits ajoutés avec succès !</h4>
+            <h4 className="font-semibold text-green-600 mb-3">
+              ✅ Crédits ajoutés avec succès !
+            </h4>
             <div className="grid grid-cols-2 gap-4 text-sm">
               <div>
                 <span className="text-gray-600">Balances mises à jour:</span>
-                <Badge variant="secondary" className="ml-2">{result.updatedBalances}</Badge>
+                <Badge variant="secondary" className="ml-2">
+                  {result.updatedBalances}
+                </Badge>
               </div>
               <div>
                 <span className="text-gray-600">Nouvelles balances:</span>
-                <Badge variant="secondary" className="ml-2">{result.createdBalances}</Badge>
+                <Badge variant="secondary" className="ml-2">
+                  {result.createdBalances}
+                </Badge>
               </div>
               <div>
                 <span className="text-gray-600">Crédits par utilisateur:</span>
-                <Badge variant="secondary" className="ml-2">{result.creditsPerUser.toLocaleString()}</Badge>
+                <Badge variant="secondary" className="ml-2">
+                  {result.creditsPerUser.toLocaleString()}
+                </Badge>
               </div>
               <div>
                 <span className="text-gray-600">Total ajouté:</span>
-                <Badge variant="secondary" className="ml-2">{result.totalCreditsAdded.toLocaleString()}</Badge>
+                <Badge variant="secondary" className="ml-2">
+                  {result.totalCreditsAdded.toLocaleString()}
+                </Badge>
               </div>
             </div>
           </div>
@@ -185,4 +215,4 @@ export default function AddCredits() {
       </CardContent>
     </Card>
   );
-}
+}

components/dashboard/create-user.tsx

@@ -0,0 +1,274 @@
+"use client";
+
+import { useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { UserPlus, Loader2, CheckCircle, AlertCircle } from "lucide-react";
+
+interface CreateUserResult {
+  success: boolean;
+  message: string;
+  user?: {
+    id: string;
+    name: string;
+    email: string;
+    role: string;
+    createdAt: string;
+  };
+  error?: string;
+}
+
+export default function CreateUser() {
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    password: "",
+    confirmPassword: "",
+    role: "USER",
+  });
+  const [isLoading, setIsLoading] = useState(false);
+  const [result, setResult] = useState<CreateUserResult | null>(null);
+
+  const handleInputChange = (field: string, value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+    // Réinitialiser le résultat quand l'utilisateur modifie le formulaire
+    if (result) {
+      setResult(null);
+    }
+  };
+
+  const validateForm = () => {
+    if (!formData.name.trim()) {
+      return "Le nom est requis";
+    }
+    if (!formData.email.trim()) {
+      return "L&apos;email est requis";
+    }
+    if (!formData.password) {
+      return "Le mot de passe est requis";
+    }
+    if (formData.password.length < 8) {
+      return "Le mot de passe doit contenir au moins 8 caractères";
+    }
+    if (formData.password !== formData.confirmPassword) {
+      return "Les mots de passe ne correspondent pas";
+    }
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(formData.email)) {
+      return "Format d&apos;email invalide";
+    }
+    return null;
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const validationError = validateForm();
+    if (validationError) {
+      setResult({
+        success: false,
+        message: validationError,
+      });
+      return;
+    }
+
+    setIsLoading(true);
+    setResult(null);
+
+    try {
+      const response = await fetch("/api/create-user", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          name: formData.name.trim(),
+          email: formData.email.trim().toLowerCase(),
+          password: formData.password,
+          role: formData.role,
+        }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        setResult({
+          success: true,
+          message: data.message,
+          user: data.user,
+        });
+        // Réinitialiser le formulaire en cas de succès
+        setFormData({
+          name: "",
+          email: "",
+          password: "",
+          confirmPassword: "",
+          role: "USER",
+        });
+      } else {
+        setResult({
+          success: false,
+          message: data.error || "Erreur lors de la création de l&apos;utilisateur",
+        });
+      }
+    } catch (error) {
+      console.error("Erreur lors de la création de l&apos;utilisateur:", error);
+      setResult({
+        success: false,
+        message: "Erreur de connexion au serveur",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <UserPlus className="h-5 w-5" />
+          Créer un nouvel utilisateur
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="name">Nom complet *</Label>
+              <Input
+                id="name"
+                type="text"
+                placeholder="Ex: Jean Dupont"
+                value={formData.name}
+                onChange={(e) => handleInputChange("name", e.target.value)}
+                disabled={isLoading}
+                required
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="email">Adresse email *</Label>
+              <Input
+                id="email"
+                type="email"
+                placeholder="Ex: jean.dupont@example.com"
+                value={formData.email}
+                onChange={(e) => handleInputChange("email", e.target.value)}
+                disabled={isLoading}
+                required
+              />
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="password">Mot de passe *</Label>
+              <Input
+                id="password"
+                type="password"
+                placeholder="Minimum 8 caractères"
+                value={formData.password}
+                onChange={(e) => handleInputChange("password", e.target.value)}
+                disabled={isLoading}
+                required
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="confirmPassword">Confirmer le mot de passe *</Label>
+              <Input
+                id="confirmPassword"
+                type="password"
+                placeholder="Répéter le mot de passe"
+                value={formData.confirmPassword}
+                onChange={(e) =>
+                  handleInputChange("confirmPassword", e.target.value)
+                }
+                disabled={isLoading}
+                required
+              />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="role">Rôle</Label>
+            <Select
+              value={formData.role}
+              onValueChange={(value: string) => handleInputChange("role", value)}
+              disabled={isLoading}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Sélectionner un rôle" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="USER">Utilisateur</SelectItem>
+                <SelectItem value="ADMIN">Administrateur</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          {result && (
+            <Alert variant={result.success ? "default" : "destructive"}>
+              {result.success ? (
+                <CheckCircle className="h-4 w-4" />
+              ) : (
+                <AlertCircle className="h-4 w-4" />
+              )}
+              <AlertDescription>
+                {result.message}
+                {result.success && result.user && (
+                  <div className="mt-2 text-sm">
+                    <strong>Détails:</strong>
+                    <br />
+                    • ID: {result.user.id}
+                    <br />
+                    • Email: {result.user.email}
+                    <br />
+                    • Rôle: {result.user.role}
+                    <br />• Crédits initiaux: 5,000,000 tokens
+                  </div>
+                )}
+              </AlertDescription>
+            </Alert>
+          )}
+
+          <div className="flex justify-end">
+            <Button type="submit" disabled={isLoading}>
+              {isLoading ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Création en cours...
+                </>
+              ) : (
+                <>
+                  <UserPlus className="mr-2 h-4 w-4" />
+                  Créer l&apos;utilisateur
+                </>
+              )}
+            </Button>
+          </div>
+        </form>
+
+        <div className="mt-6 p-4 bg-muted rounded-lg">
+          <h4 className="font-medium mb-2">Informations importantes :</h4>
+          <ul className="text-sm text-muted-foreground space-y-1">
+            <li>• L&apos;utilisateur recevra automatiquement 5,000,000 tokens</li>
+            <li>• Le mot de passe sera hashé de manière sécurisée</li>
+            <li>• L&apos;email doit être unique dans le système</li>
+            <li>• L&apos;utilisateur pourra se connecter immédiatement</li>
+          </ul>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

components/dashboard/dashboard-users-list.tsx

@@ -175,7 +175,7 @@ export function DashboardUsersList() {
       const credits = latestBalance ? latestBalance.tokenCredits || 0 : 0;
 
       // Calculer les tokens consommés depuis les crédits
-      const INITIAL_CREDITS = 5000000;
+      const INITIAL_CREDITS = 3000000;
       const creditsUsed = INITIAL_CREDITS - credits;
       const tokensFromCredits = creditsUsed > 0 ? creditsUsed : 0;
 

components/dashboard/delete-user.tsx

@@ -0,0 +1,321 @@
+"use client";
+
+import { useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { UserMinus, Loader2, CheckCircle, AlertCircle, Trash2 } from "lucide-react";
+
+interface DeleteUserResult {
+  success: boolean;
+  message: string;
+  deletedUser?: {
+    id: string;
+    name: string;
+    email: string;
+    role: string;
+  };
+  balanceDeleted?: boolean;
+  error?: string;
+}
+
+interface FoundUser {
+  _id: string;
+  name: string;
+  email: string;
+  role: string;
+  createdAt: string;
+}
+
+export default function DeleteUser() {
+  const [searchData, setSearchData] = useState({
+    email: "",
+    userId: "",
+  });
+  const [isLoading, setIsLoading] = useState(false);
+  const [result, setResult] = useState<DeleteUserResult | null>(null);
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [foundUser, setFoundUser] = useState<FoundUser | null>(null);
+
+  const handleInputChange = (field: string, value: string) => {
+    setSearchData((prev) => ({ ...prev, [field]: value }));
+    // Réinitialiser les résultats quand l'utilisateur modifie le formulaire
+    if (result) {
+      setResult(null);
+    }
+    if (confirmDelete) {
+      setConfirmDelete(false);
+    }
+    if (foundUser) {
+      setFoundUser(null);
+    }
+  };
+
+  const validateForm = () => {
+    if (!searchData.email.trim() && !searchData.userId.trim()) {
+      return "Email ou ID utilisateur requis";
+    }
+    if (searchData.email && searchData.userId) {
+      return "Veuillez utiliser soit l'email soit l'ID, pas les deux";
+    }
+    if (searchData.email) {
+      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      if (!emailRegex.test(searchData.email)) {
+        return "Format d&apos;email invalide";
+      }
+    }
+    return null;
+  };
+
+  const handleSearch = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const validationError = validateForm();
+    if (validationError) {
+      setResult({
+        success: false,
+        message: validationError,
+      });
+      return;
+    }
+
+    setIsLoading(true);
+    setResult(null);
+    setFoundUser(null);
+
+    try {
+      // D'abord, chercher l'utilisateur pour confirmation
+      const searchParams = new URLSearchParams();
+      if (searchData.email) {
+        searchParams.append("email", searchData.email.trim().toLowerCase());
+      }
+      if (searchData.userId) {
+        searchParams.append("id", searchData.userId.trim());
+      }
+
+      const response = await fetch(`/api/collections/users?${searchParams.toString()}`);
+      const data = await response.json();
+
+      if (response.ok && data.data && data.data.length > 0) {
+        setFoundUser(data.data[0]);
+        setResult({
+          success: true,
+          message: "Utilisateur trouvé. Confirmez la suppression ci-dessous.",
+        });
+      } else {
+        setResult({
+          success: false,
+          message: "Utilisateur non trouvé",
+        });
+      }
+    } catch (error) {
+      console.error("Erreur lors de la recherche:", error);
+      setResult({
+        success: false,
+        message: "Erreur de connexion au serveur",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!foundUser) return;
+
+    setIsLoading(true);
+    setResult(null);
+
+    try {
+      const response = await fetch("/api/delete-user", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          userId: foundUser._id,
+        }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        setResult({
+          success: true,
+          message: data.message,
+          deletedUser: data.deletedUser,
+          balanceDeleted: data.balanceDeleted,
+        });
+        // Réinitialiser le formulaire
+        setSearchData({
+          email: "",
+          userId: "",
+        });
+        setFoundUser(null);
+        setConfirmDelete(false);
+      } else {
+        setResult({
+          success: false,
+          message: data.error || "Erreur lors de la suppression de l&apos;utilisateur",
+        });
+      }
+    } catch (error) {
+      console.error("Erreur lors de la suppression:", error);
+      setResult({
+        success: false,
+        message: "Erreur de connexion au serveur",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2 text-red-600">
+          <UserMinus className="h-5 w-5" />
+          Supprimer un utilisateur
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSearch} className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="email">Adresse email</Label>
+              <Input
+                id="email"
+                type="email"
+                placeholder="Ex: jean.dupont@example.com"
+                value={searchData.email}
+                onChange={(e) => handleInputChange("email", e.target.value)}
+                disabled={isLoading || !!searchData.userId}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="userId">ID Utilisateur</Label>
+              <Input
+                id="userId"
+                type="text"
+                placeholder="Ex: 507f1f77bcf86cd799439011"
+                value={searchData.userId}
+                onChange={(e) => handleInputChange("userId", e.target.value)}
+                disabled={isLoading || !!searchData.email}
+              />
+            </div>
+          </div>
+
+          {!foundUser && (
+            <div className="flex justify-end">
+              <Button type="submit" disabled={isLoading} variant="outline">
+                {isLoading ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Recherche...
+                  </>
+                ) : (
+                  <>
+                    Rechercher l&apos;utilisateur
+                  </>
+                )}
+              </Button>
+            </div>
+          )}
+        </form>
+
+        {foundUser && (
+          <div className="mt-6 p-4 border rounded-lg bg-yellow-50 border-yellow-200">
+            <h4 className="font-medium mb-2 text-yellow-800">Utilisateur trouvé :</h4>
+            <div className="text-sm space-y-1 text-yellow-700">
+              <p><strong>ID:</strong> {foundUser._id}</p>
+              <p><strong>Nom:</strong> {foundUser.name}</p>
+              <p><strong>Email:</strong> {foundUser.email}</p>
+              <p><strong>Rôle:</strong> {foundUser.role}</p>
+              <p><strong>Créé le:</strong> {new Date(foundUser.createdAt).toLocaleDateString()}</p>
+            </div>
+            
+            <div className="mt-4 flex gap-2">
+              {!confirmDelete ? (
+                <Button
+                  onClick={() => setConfirmDelete(true)}
+                  variant="destructive"
+                  size="sm"
+                >
+                  <Trash2 className="mr-2 h-4 w-4" />
+                  Supprimer cet utilisateur
+                </Button>
+              ) : (
+                <div className="flex gap-2">
+                  <Button
+                    onClick={handleDelete}
+                    disabled={isLoading}
+                    variant="destructive"
+                    size="sm"
+                  >
+                    {isLoading ? (
+                      <>
+                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                        Suppression...
+                      </>
+                    ) : (
+                      <>
+                        <Trash2 className="mr-2 h-4 w-4" />
+                        Confirmer la suppression
+                      </>
+                    )}
+                  </Button>
+                  <Button
+                    onClick={() => setConfirmDelete(false)}
+                    variant="outline"
+                    size="sm"
+                    disabled={isLoading}
+                  >
+                    Annuler
+                  </Button>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+
+        {result && (
+          <Alert variant={result.success ? "default" : "destructive"} className="mt-4">
+            {result.success ? (
+              <CheckCircle className="h-4 w-4" />
+            ) : (
+              <AlertCircle className="h-4 w-4" />
+            )}
+            <AlertDescription>
+              {result.message}
+              {result.success && result.deletedUser && (
+                <div className="mt-2 text-sm">
+                  <strong>Utilisateur supprimé:</strong>
+                  <br />
+                  • Nom: {result.deletedUser.name}
+                  <br />
+                  • Email: {result.deletedUser.email}
+                  <br />
+                  • Rôle: {result.deletedUser.role}
+                  <br />
+                  • Solde supprimé: {result.balanceDeleted ? "Oui" : "Non"}
+                </div>
+              )}
+            </AlertDescription>
+          </Alert>
+        )}
+
+        <div className="mt-6 p-4 bg-red-50 rounded-lg border border-red-200">
+          <h4 className="font-medium mb-2 text-red-800">⚠️ Attention :</h4>
+          <ul className="text-sm text-red-700 space-y-1">
+            <li>• Cette action est irréversible</li>
+            <li>• L&apos;utilisateur et son solde seront définitivement supprimés</li>
+            <li>• Toutes les données associées seront perdues</li>
+            <li>• Utilisez cette fonction avec précaution</li>
+          </ul>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

components/dashboard/user-management.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { UserPlus, UserMinus, Users } from "lucide-react";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import CreateUser from "./create-user";
+import DeleteUser from "./delete-user";
+
+export default function UserManagement() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Users className="h-6 w-6" />
+          Gestion des Utilisateurs
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Accordion type="single" collapsible className="w-full">
+          <AccordionItem value="create-user">
+            <AccordionTrigger className="text-left">
+              <div className="flex items-center gap-2">
+                <UserPlus className="h-5 w-5 text-green-600" />
+                <span>Créer un nouvel utilisateur</span>
+              </div>
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="pt-4">
+                <CreateUser />
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem value="delete-user">
+            <AccordionTrigger className="text-left">
+              <div className="flex items-center gap-2">
+                <UserMinus className="h-5 w-5 text-red-600" />
+                <span>Supprimer un utilisateur</span>
+              </div>
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="pt-4">
+                <DeleteUser />
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </CardContent>
+    </Card>
+  );
+}

components/ui/accordion.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

components/ui/label.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

components/ui/select.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};

package-lock.json

@@ -8,16 +8,21 @@
       "name": "admin-dashboard",
       "version": "0.1.0",
       "dependencies": {
+        "@radix-ui/react-accordion": "^1.2.12",
         "@radix-ui/react-dialog": "^1.1.15",
+        "@radix-ui/react-label": "^2.1.7",
         "@radix-ui/react-navigation-menu": "^1.2.14",
         "@radix-ui/react-progress": "^1.1.7",
+        "@radix-ui/react-select": "^2.2.6",
         "@radix-ui/react-separator": "^1.1.7",
         "@radix-ui/react-slot": "^1.2.3",
         "@radix-ui/react-tabs": "^1.1.13",
         "@radix-ui/react-tooltip": "^1.2.8",
         "@supabase/ssr": "^0.7.0",
         "@supabase/supabase-js": "^2.58.0",
+        "@types/bcryptjs": "^2.4.6",
         "@types/mongodb": "^4.0.6",
+        "bcryptjs": "^3.0.2",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "lucide-react": "^0.544.0",
@@ -1026,12 +1031,49 @@
         "node": ">=12.4.0"
       }
     },
+    "node_modules/@radix-ui/number": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
+      "integrity": "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==",
+      "license": "MIT"
+    },
     "node_modules/@radix-ui/primitive": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
       "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
       "license": "MIT"
     },
+    "node_modules/@radix-ui/react-accordion": {
+      "version": "1.2.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.12.tgz",
+      "integrity": "sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collapsible": "1.1.12",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-arrow": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
@@ -1055,6 +1097,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.12.tgz",
+      "integrity": "sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
@@ -1247,6 +1319,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.7.tgz",
+      "integrity": "sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-navigation-menu": {
       "version": "1.2.14",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.14.tgz",
@@ -1441,6 +1536,49 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-select": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.6.tgz",
+      "integrity": "sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-separator": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz",
@@ -2168,6 +2306,12 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/bcryptjs": {
+      "version": "2.4.6",
+      "resolved": "https://registry.npmjs.org/@types/bcryptjs/-/bcryptjs-2.4.6.tgz",
+      "integrity": "sha512-9xlo6R2qDs5uixm0bcIqCeMCE6HiQsIyel9KQySStiyqNl2tnj2mP3DX1Nf56MD6KMenNNlBBsy3LJ7gUEQPXQ==",
+      "license": "MIT"
+    },
     "node_modules/@types/d3-array": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
@@ -3192,6 +3336,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/bcryptjs": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-3.0.2.tgz",
+      "integrity": "sha512-k38b3XOZKv60C4E2hVsXTolJWfkGRMbILBIe2IBITXciy5bOsTKot5kDrf3ZfufQtQOUN5mXceUEpU1rTl9Uog==",
+      "license": "BSD-3-Clause",
+      "bin": {
+        "bcrypt": "bin/bcrypt"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",

package.json

@@ -9,16 +9,21 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-navigation-menu": "^1.2.14",
     "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@supabase/ssr": "^0.7.0",
     "@supabase/supabase-js": "^2.58.0",
+    "@types/bcryptjs": "^2.4.6",
     "@types/mongodb": "^4.0.6",
+    "bcryptjs": "^3.0.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.544.0",