user management

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,
+};