Add user deletion functionality: Implement DELETE API endpoint for user management, allowing admins to remove users while preventing self-deletion. Enhance UserManagement component with delete confirmation and error handling for improved user experience.

app/api/admin/users/[id]/route.ts

@@ -149,3 +149,51 @@ export async function PUT(
   }
 }
 
+export async function DELETE(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    const session = await auth();
+
+    if (!session?.user || session.user.role !== Role.ADMIN) {
+      return NextResponse.json({ error: "Accès refusé" }, { status: 403 });
+    }
+
+    const { id } = await params;
+
+    // Vérifier que l'utilisateur existe
+    const user = await prisma.user.findUnique({
+      where: { id },
+    });
+
+    if (!user) {
+      return NextResponse.json(
+        { error: "Utilisateur non trouvé" },
+        { status: 404 }
+      );
+    }
+
+    // Empêcher la suppression de soi-même
+    if (user.id === session.user.id) {
+      return NextResponse.json(
+        { error: "Vous ne pouvez pas supprimer votre propre compte" },
+        { status: 400 }
+      );
+    }
+
+    // Supprimer l'utilisateur (les relations seront supprimées en cascade)
+    await prisma.user.delete({
+      where: { id },
+    });
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error("Error deleting user:", error);
+    return NextResponse.json(
+      { error: "Erreur lors de la suppression de l'utilisateur" },
+      { status: 500 }
+    );
+  }
+}
+

app/api/events/[id]/register/route.ts

@@ -1,6 +1,7 @@
 import { NextResponse } from "next/server";
 import { auth } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
+import { calculateEventStatus } from "@/lib/eventStatus";
 
 export async function POST(
   request: Request,
@@ -30,7 +31,8 @@ export async function POST(
       );
     }
 
-    if (event.status !== "UPCOMING") {
+    const eventStatus = calculateEventStatus(event.date);
+    if (eventStatus !== "UPCOMING") {
       return NextResponse.json(
         { error: "Vous ne pouvez vous inscrire qu'aux événements à venir" },
         { status: 400 }

components/UserManagement.tsx

@@ -31,6 +31,7 @@ export default function UserManagement() {
   const [loading, setLoading] = useState(true);
   const [editingUser, setEditingUser] = useState<EditingUser | null>(null);
   const [saving, setSaving] = useState(false);
+  const [deletingUserId, setDeletingUserId] = useState<string | null>(null);
 
   useEffect(() => {
     fetchUsers();
@@ -117,14 +118,41 @@ export default function UserManagement() {
     setEditingUser(null);
   };
 
+  const handleDelete = async (userId: string) => {
+    if (
+      !confirm(
+        "Êtes-vous sûr de vouloir supprimer cet utilisateur ? Cette action est irréversible."
+      )
+    ) {
+      return;
+    }
+
+    setDeletingUserId(userId);
+    try {
+      const response = await fetch(`/api/admin/users/${userId}`, {
+        method: "DELETE",
+      });
+
+      if (response.ok) {
+        await fetchUsers();
+      } else {
+        const error = await response.json();
+        alert(error.error || "Erreur lors de la suppression");
+      }
+    } catch (error) {
+      console.error("Error deleting user:", error);
+      alert("Erreur lors de la suppression");
+    } finally {
+      setDeletingUserId(null);
+    }
+  };
+
   const formatNumber = (num: number) => {
     return num.toLocaleString("en-US");
   };
 
   if (loading) {
-    return (
+    return <div className="text-center text-gray-400 py-8">Chargement...</div>;
-      <div className="text-center text-gray-400 py-8">Chargement...</div>
-    );
   }
 
   return (
@@ -159,11 +187,17 @@ export default function UserManagement() {
                         className="w-full h-full object-cover"
                         onError={(e) => {
                           e.currentTarget.style.display = "none";
-                          e.currentTarget.nextElementSibling?.classList.remove("hidden");
+                          e.currentTarget.nextElementSibling?.classList.remove(
+                            "hidden"
+                          );
                         }}
                       />
                     ) : null}
-                    <div className={`w-full h-full flex items-center justify-center text-pixel-gold text-sm font-bold ${user.avatar ? "hidden" : ""}`}>
+                    <div
+                      className={`w-full h-full flex items-center justify-center text-pixel-gold text-sm font-bold ${
+                        user.avatar ? "hidden" : ""
+                      }`}
+                    >
                       {user.username.charAt(0).toUpperCase()}
                     </div>
                   </div>
@@ -172,22 +206,45 @@ export default function UserManagement() {
                       <h3 className="text-pixel-gold font-bold text-base">
                         {user.username}
                       </h3>
-                      <span className="text-xs text-gray-500">Niveau {user.level}</span>
+                      <span className="text-xs text-gray-500">
-                      <span className="text-xs text-gray-500">Score: {formatNumber(user.score)}</span>
+                        Niveau {user.level}
-                      <span className={`text-xs ${user.role === "ADMIN" ? "text-pixel-gold" : "text-gray-500"}`}>
+                      </span>
+                      <span className="text-xs text-gray-500">
+                        Score: {formatNumber(user.score)}
+                      </span>
+                      <span
+                        className={`text-xs ${
+                          user.role === "ADMIN"
+                            ? "text-pixel-gold"
+                            : "text-gray-500"
+                        }`}
+                      >
                         {user.role}
                       </span>
                     </div>
-                    <p className="text-gray-400 text-xs truncate">{user.email}</p>
+                    <p className="text-gray-400 text-xs truncate">
+                      {user.email}
+                    </p>
                   </div>
                 </div>
                 {!isEditing && (
+                  <div className="flex gap-2 flex-shrink-0 ml-2">
                     <button
                       onClick={() => handleEdit(user)}
-                    className="px-3 py-1.5 border border-pixel-gold/50 bg-black/60 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 transition flex-shrink-0 ml-2"
+                      className="px-3 py-1.5 border border-pixel-gold/50 bg-black/60 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 transition"
                     >
                       Modifier
                     </button>
+                    <button
+                      onClick={() => handleDelete(user.id)}
+                      disabled={deletingUserId === user.id}
+                      className="px-3 py-1.5 border border-red-500/50 bg-red-900/20 text-red-400 uppercase text-xs tracking-widest rounded hover:bg-red-900/30 transition disabled:opacity-50"
+                    >
+                      {deletingUserId === user.id
+                        ? "Suppression..."
+                        : "Supprimer"}
+                    </button>
+                  </div>
                 )}
               </div>
 
@@ -264,7 +321,10 @@ export default function UserManagement() {
                       <div
                         className="h-full bg-gradient-to-r from-red-600 to-green-500 transition-all duration-300"
                         style={{
-                          width: `${Math.min(100, (previewHp / user.maxHp) * 100)}%`,
+                          width: `${Math.min(
+                            100,
+                            (previewHp / user.maxHp) * 100
+                          )}%`,
                         }}
                       />
                     </div>
@@ -341,7 +401,10 @@ export default function UserManagement() {
                       <div
                         className="h-full bg-gradient-to-r from-blue-600 to-purple-500 transition-all duration-300"
                         style={{
-                          width: `${Math.min(100, (previewXp / user.maxXp) * 100)}%`,
+                          width: `${Math.min(
+                            100,
+                            (previewXp / user.maxXp) * 100
+                          )}%`,
                         }}
                       />
                     </div>
@@ -522,7 +585,10 @@ export default function UserManagement() {
                       <div
                         className="h-full bg-gradient-to-r from-red-600 to-green-500"
                         style={{
-                          width: `${Math.min(100, (user.hp / user.maxHp) * 100)}%`,
+                          width: `${Math.min(
+                            100,
+                            (user.hp / user.maxHp) * 100
+                          )}%`,
                         }}
                       />
                     </div>
@@ -538,7 +604,10 @@ export default function UserManagement() {
                       <div
                         className="h-full bg-gradient-to-r from-blue-600 to-purple-500"
                         style={{
-                          width: `${Math.min(100, (user.xp / user.maxXp) * 100)}%`,
+                          width: `${Math.min(
+                            100,
+                            (user.xp / user.maxXp) * 100
+                          )}%`,
                         }}
                       />
                     </div>
@@ -552,4 +621,3 @@ export default function UserManagement() {
     </div>
   );
 }
-