Refactor modal implementation across admin components: Replace Card components with a reusable Modal component in ChallengeManagement, EventManagement, and UserManagement, enhancing UI consistency and maintainability. Update Modal to use React portals for improved rendering.

2025-12-16 16:50:06 +01:00
parent 16e4b63ffd
commit 79c21955e0
4 changed files with 720 additions and 662 deletions
--- a/components/admin/ChallengeManagement.tsx
+++ b/components/admin/ChallengeManagement.tsx
@@ -9,7 +9,7 @@ import {
  adminCancelChallenge,
  reactivateChallenge,
 } from "@/actions/admin/challenges";
-import { Button, Card, Input, Textarea, Alert } from "@/components/ui";
+import { Button, Card, Input, Textarea, Alert, Modal, CloseButton } from "@/components/ui";
 import { Avatar } from "@/components/ui";

 interface Challenge {
@@ -417,23 +417,29 @@ export default function ChallengeManagement() {

      {/* Modal de validation */}
      {selectedChallenge && (
-        <div
-          className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm"
+        <Modal
+          isOpen={!!selectedChallenge}
+          onClose={() => {
+            setSelectedChallenge(null);
+            setWinnerId("");
+            setAdminComment("");
+          }}
+          size="lg"
+        >
+          <div className="p-6">
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-2xl font-bold text-pixel-gold">
+                Désigner le gagnant
+              </h2>
+              <CloseButton
                onClick={() => {
                  setSelectedChallenge(null);
                  setWinnerId("");
                  setAdminComment("");
                }}
-        >
-          <Card
-            variant="dark"
-            className="max-w-2xl w-full max-h-[90vh] overflow-y-auto"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <div className="p-6">
-              <h2 className="text-2xl font-bold text-pixel-gold mb-4">
-                Désigner le gagnant
-              </h2>
+                size="lg"
+              />
+            </div>

              <div className="mb-6">
                <h3 className="text-lg font-bold text-gray-300 mb-2">
@@ -545,30 +551,36 @@ export default function ChallengeManagement() {
                </Button>
              </div>
          </div>
-          </Card>
-        </div>
+        </Modal>
      )}

      {/* Modal d'édition */}
      {editingChallenge && (
-        <div
-          className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm"
+        <Modal
+          isOpen={!!editingChallenge}
+          onClose={() => {
+            setEditingChallenge(null);
+            setEditTitle("");
+            setEditDescription("");
+            setEditPointsReward(0);
+          }}
+          size="lg"
+        >
+          <div className="p-6">
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-2xl font-bold text-pixel-gold">
+                Modifier le défi
+              </h2>
+              <CloseButton
                onClick={() => {
                  setEditingChallenge(null);
                  setEditTitle("");
                  setEditDescription("");
                  setEditPointsReward(0);
                }}
-        >
-          <Card
-            variant="dark"
-            className="max-w-2xl w-full max-h-[90vh] overflow-y-auto"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <div className="p-6">
-              <h2 className="text-2xl font-bold text-pixel-gold mb-4">
-                Modifier le défi
-              </h2>
+                size="lg"
+              />
+            </div>

              <div className="space-y-4">
                <Input
@@ -632,8 +644,7 @@ export default function ChallengeManagement() {
                </div>
              </div>
          </div>
-          </Card>
-        </div>
+        </Modal>
      )}
    </div>
  );
--- a/components/admin/EventManagement.tsx
+++ b/components/admin/EventManagement.tsx
@@ -3,7 +3,15 @@
 import { useState, useEffect, useTransition } from "react";
 import { calculateEventStatus } from "@/lib/eventStatus";
 import { createEvent, updateEvent, deleteEvent } from "@/actions/admin/events";
-import { Input, Textarea, Button, Card, Badge } from "@/components/ui";
+import {
+  Input,
+  Textarea,
+  Button,
+  Card,
+  Badge,
+  Modal,
+  CloseButton,
+} from "@/components/ui";

 interface Event {
  id: string;
@@ -221,11 +229,20 @@ export default function EventManagement() {
        )}
      </div>

+      {/* Modal de création/édition */}
      {(isCreating || editingEvent) && (
-        <Card variant="default" className="p-3 sm:p-4 mb-4">
-          <h4 className="text-pixel-gold font-bold mb-4 text-base sm:text-lg break-words">
+        <Modal
+          isOpen={isCreating || !!editingEvent}
+          onClose={handleCancel}
+          size="lg"
+        >
+          <div className="p-6">
+            <div className="flex items-center justify-between mb-4">
+              <h4 className="text-pixel-gold font-bold text-base sm:text-lg break-words">
                {isCreating ? "Créer un événement" : "Modifier l'événement"}
              </h4>
+              <CloseButton onClick={handleCancel} size="lg" />
+            </div>
            <div className="space-y-4">
              <Input
                type="date"
@@ -330,7 +347,8 @@ export default function EventManagement() {
                </Button>
              </div>
            </div>
-        </Card>
+          </div>
+        </Modal>
      )}

      {events.length === 0 ? (
--- a/components/admin/UserManagement.tsx
+++ b/components/admin/UserManagement.tsx
@@ -1,7 +1,14 @@
 "use client";

 import { useState, useEffect, useTransition } from "react";
-import { Avatar, Input, Button, Card } from "@/components/ui";
+import {
+  Avatar,
+  Input,
+  Button,
+  Card,
+  Modal,
+  CloseButton,
+} from "@/components/ui";
 import { updateUser, deleteUser } from "@/actions/admin/users";

 interface User {
@@ -159,6 +166,25 @@ export default function UserManagement() {
    return num.toLocaleString("en-US");
  };

+  // Trouver l'utilisateur en cours d'édition pour les previews
+  const currentEditingUserData = editingUser
+    ? users.find((u) => u.id === editingUser.userId)
+    : null;
+  const previewHp =
+    currentEditingUserData && editingUser
+      ? Math.max(
+          0,
+          Math.min(
+            currentEditingUserData.maxHp,
+            currentEditingUserData.hp + editingUser.hpDelta
+          )
+        )
+      : 0;
+  const previewXp =
+    currentEditingUserData && editingUser
+      ? Math.max(0, currentEditingUserData.xp + editingUser.xpDelta)
+      : 0;
+
  if (loading) {
    return <div className="text-center text-gray-400 py-8">Chargement...</div>;
  }
@@ -171,26 +197,14 @@ export default function UserManagement() {
        </div>
      ) : (
        users.map((user) => {
-          const isEditing = editingUser?.userId === user.id;
-          const previewHp = isEditing
-            ? Math.max(0, Math.min(user.maxHp, user.hp + editingUser.hpDelta))
-            : user.hp;
-          const previewXp = isEditing
-            ? Math.max(0, user.xp + editingUser.xpDelta)
-            : user.xp;
-          const displayAvatar = isEditing ? editingUser.avatar : user.avatar;
-          const displayUsername = isEditing
-            ? editingUser.username || user.username
-            : user.username;
-
          return (
            <Card key={user.id} variant="default" className="p-3 sm:p-4">
              <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3 mb-2">
                <div className="flex gap-2 sm:gap-3 items-center flex-1 min-w-0">
                  {/* Avatar */}
                  <Avatar
-                    src={displayAvatar}
-                    username={displayUsername}
+                    src={user.avatar}
+                    username={user.username}
                    size="sm"
                    className="flex-shrink-0"
                    borderClassName="border-2 border-pixel-gold/50"
@@ -198,7 +212,7 @@ export default function UserManagement() {
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-1.5 sm:gap-2 flex-wrap">
                      <h3 className="text-pixel-gold font-bold text-sm sm:text-base break-words">
-                        {displayUsername}
+                        {user.username}
                      </h3>
                      <span className="text-[10px] sm:text-xs text-gray-500 whitespace-nowrap">
                        Niveau {user.level}
@@ -221,7 +235,6 @@ export default function UserManagement() {
                    </p>
                  </div>
                </div>
-                {!isEditing && (
                <div className="flex gap-2 flex-shrink-0 sm:ml-2">
                  <button
                    onClick={() => handleEdit(user)}
@@ -239,10 +252,64 @@ export default function UserManagement() {
                      : "Supprimer"}
                  </button>
                </div>
-                )}
              </div>

-              {isEditing ? (
+              {/* Affichage des stats */}
+              <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 text-[10px] sm:text-xs">
+                <div className="flex-1">
+                  <div className="flex justify-between items-center mb-0.5">
+                    <span className="text-gray-400">HP</span>
+                    <span className="text-gray-400">
+                      {user.hp}/{user.maxHp}
+                    </span>
+                  </div>
+                  <div className="h-1.5 bg-black/60 rounded-full overflow-hidden">
+                    <div
+                      className="h-full bg-gradient-to-r from-red-600 to-green-500"
+                      style={{
+                        width: `${Math.min(
+                          100,
+                          (user.hp / user.maxHp) * 100
+                        )}%`,
+                      }}
+                    />
+                  </div>
+                </div>
+                <div className="flex-1">
+                  <div className="flex justify-between items-center mb-0.5">
+                    <span className="text-gray-400">XP</span>
+                    <span className="text-gray-400">
+                      {formatNumber(user.xp)}/{formatNumber(user.maxXp)}
+                    </span>
+                  </div>
+                  <div className="h-1.5 bg-black/60 rounded-full overflow-hidden">
+                    <div
+                      className="h-full bg-gradient-to-r from-blue-600 to-purple-500"
+                      style={{
+                        width: `${Math.min(
+                          100,
+                          (user.xp / user.maxXp) * 100
+                        )}%`,
+                      }}
+                    />
+                  </div>
+                </div>
+              </div>
+            </Card>
+          );
+        })
+      )}
+
+      {/* Modal d'édition */}
+      {editingUser && currentEditingUserData && (
+        <Modal isOpen={!!editingUser} onClose={handleCancel} size="lg">
+          <div className="p-6">
+            <div className="flex items-center justify-between mb-4">
+              <h4 className="text-pixel-gold font-bold text-base sm:text-lg break-words">
+                Modifier l&apos;utilisateur
+              </h4>
+              <CloseButton onClick={handleCancel} size="lg" />
+            </div>
            <div className="space-y-4">
              {/* Username Section */}
              <Input
@@ -269,15 +336,15 @@ export default function UserManagement() {
                <div className="relative">
                  <Avatar
                    src={editingUser.avatar}
-                        username={editingUser.username || user.username}
+                    username={
+                      editingUser.username || currentEditingUserData.username
+                    }
                    size="lg"
                    borderClassName="border-2 border-pixel-gold/50"
                  />
-                      {uploadingAvatar === user.id && (
+                  {uploadingAvatar === editingUser.userId && (
                    <div className="absolute inset-0 bg-black/60 flex items-center justify-center rounded-full">
-                          <div className="text-pixel-gold text-xs">
-                            Upload...
-                          </div>
+                      <div className="text-pixel-gold text-xs">Upload...</div>
                    </div>
                  )}
                </div>
@@ -330,7 +397,7 @@ export default function UserManagement() {
                      const file = e.target.files?.[0];
                      if (!file) return;

-                          setUploadingAvatar(user.id);
+                      setUploadingAvatar(editingUser.userId);
                      try {
                        const formData = new FormData();
                        formData.append("file", file);
@@ -363,16 +430,16 @@ export default function UserManagement() {
                      }
                    }}
                    className="hidden"
-                        id={`avatar-upload-${user.id}`}
+                    id={`avatar-upload-${editingUser.userId}`}
                  />
-                      <label htmlFor={`avatar-upload-${user.id}`}>
+                  <label htmlFor={`avatar-upload-${editingUser.userId}`}>
                    <Button
                      variant="primary"
                      size="sm"
                      as="span"
                      className="cursor-pointer"
                    >
-                          {uploadingAvatar === user.id
+                      {uploadingAvatar === editingUser.userId
                        ? "Upload en cours..."
                        : "Upload un avatar custom"}
                    </Button>
@@ -387,7 +454,7 @@ export default function UserManagement() {
                    Points de Vie (HP)
                  </label>
                  <span className="text-[10px] sm:text-xs text-gray-400">
-                        {previewHp} / {user.maxHp}
+                    {previewHp} / {currentEditingUserData.maxHp}
                  </span>
                </div>
                <div className="flex gap-1 sm:gap-2 flex-wrap">
@@ -453,7 +520,7 @@ export default function UserManagement() {
                    style={{
                      width: `${Math.min(
                        100,
-                            (previewHp / user.maxHp) * 100
+                        (previewHp / currentEditingUserData.maxHp) * 100
                      )}%`,
                    }}
                  />
@@ -467,7 +534,8 @@ export default function UserManagement() {
                    Expérience (XP)
                  </label>
                  <span className="text-[10px] sm:text-xs text-gray-400">
-                        {formatNumber(previewXp)} / {formatNumber(user.maxXp)}
+                    {formatNumber(previewXp)} /{" "}
+                    {formatNumber(currentEditingUserData.maxXp)}
                  </span>
                </div>
                <div className="flex gap-1 sm:gap-2 flex-wrap">
@@ -533,7 +601,7 @@ export default function UserManagement() {
                    style={{
                      width: `${Math.min(
                        100,
-                            (previewXp / user.maxXp) * 100
+                        (previewXp / currentEditingUserData.maxXp) * 100
                      )}%`,
                    }}
                  />
@@ -695,60 +763,13 @@ export default function UserManagement() {
                >
                  {saving ? "Enregistrement..." : "Enregistrer"}
                </Button>
-                    <Button
-                      onClick={handleCancel}
-                      variant="secondary"
-                      size="md"
-                    >
+                <Button onClick={handleCancel} variant="secondary" size="md">
                  Annuler
                </Button>
              </div>
            </div>
-              ) : (
-                <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 text-[10px] sm:text-xs">
-                  <div className="flex-1">
-                    <div className="flex justify-between items-center mb-0.5">
-                      <span className="text-gray-400">HP</span>
-                      <span className="text-gray-400">
-                        {user.hp}/{user.maxHp}
-                      </span>
          </div>
-                    <div className="h-1.5 bg-black/60 rounded-full overflow-hidden">
-                      <div
-                        className="h-full bg-gradient-to-r from-red-600 to-green-500"
-                        style={{
-                          width: `${Math.min(
-                            100,
-                            (user.hp / user.maxHp) * 100
-                          )}%`,
-                        }}
-                      />
-                    </div>
-                  </div>
-                  <div className="flex-1">
-                    <div className="flex justify-between items-center mb-0.5">
-                      <span className="text-gray-400">XP</span>
-                      <span className="text-gray-400">
-                        {formatNumber(user.xp)}/{formatNumber(user.maxXp)}
-                      </span>
-                    </div>
-                    <div className="h-1.5 bg-black/60 rounded-full overflow-hidden">
-                      <div
-                        className="h-full bg-gradient-to-r from-blue-600 to-purple-500"
-                        style={{
-                          width: `${Math.min(
-                            100,
-                            (user.xp / user.maxXp) * 100
-                          )}%`,
-                        }}
-                      />
-                    </div>
-                  </div>
-                </div>
-              )}
-            </Card>
-          );
-        })
+        </Modal>
      )}
    </div>
  );
--- a/components/ui/Modal.tsx
+++ b/components/ui/Modal.tsx
@@ -1,6 +1,7 @@
 "use client";

 import { ReactNode, useEffect } from "react";
+import { createPortal } from "react-dom";

 interface ModalProps {
  isOpen: boolean;
@@ -37,7 +38,7 @@ export default function Modal({

  if (!isOpen) return null;

-  return (
+  const modalContent = (
    <div
      className="fixed inset-0 z-[200] flex items-center justify-center p-4 backdrop-blur-sm"
      style={{
@@ -59,4 +60,11 @@ export default function Modal({
      </div>
    </div>
  );
+
+  // Utiliser un portal pour rendre le modal directement dans le body
+  if (typeof window !== "undefined") {
+    return createPortal(modalContent, document.body);
+  }
+
+  return null;
 }