Show ManageMember component

src/pages/Profile/ProfilePage.tsx

@@ -7,6 +7,7 @@ import SettingsModal from "./components/SettingsModal/SettingsModal";
 import { useParams } from "react-router";
 import { useNavigate } from "react-router";
 import getUserById from "../../utils/users/getUserById.js";
+import ManageMember from "./components/manageMember/ManageMember.jsx";
 
 
 interface TaskType {
@@ -25,6 +26,7 @@ interface User {
     email: string;
     phone: string | null;
     created_at: string;
+    isAdmin: boolean;
     tasks: TaskType[];
 }
 
@@ -83,6 +85,9 @@ function ProfilePage() {
                             <h2>
                                 {profileUser?.name} {profileUser?.lastname}
                             </h2>
+                            {(user?.isAdmin && profileUser && !isOwnProfile) && (
+                                <ManageMember userToManage={profileUser} />
+                            )}
                         </div>
 
                         <div className={styles.topDescription}>

src/pages/VolunteerProfile/VolunteerProfilePage.jsx

@@ -1,84 +0,0 @@
-import styles from "./VolunteerProfilePage.module.css";
-import { useParams, useNavigate } from "react-router";
-import { useEffect, useState, useContext } from "react";
-import getUserById from "../../utils/users/getUserById.js";
-import formatDate from "../../utils/date/formatDate.js";
-import Task from "../../components/Task/Task.jsx";
-import ManageMember from "./components/manageMember/ManageMember.jsx";
-import { AuthContext } from "../../contexts/auth/AuthContext.js";
-
-export default function VolunteerProfilePage() {
-    const { id } = useParams();
-    const navigate = useNavigate();
-    const { user: currentUser } = useContext(AuthContext);
-
-    const [user, setUser] = useState(null);
-
-    useEffect(() => {
-        (async () => {
-            const res = await getUserById(id);
-
-            if (res.status === 404) {
-                navigate("/404");
-                return;
-            }
-
-            if (res.status !== 200) {
-                console.error("Erreur lors du chargement du profil", res);
-                return;
-            }
-
-            setUser(res.data);
-        })();
-    }, [id, navigate]);
-
-    if (!user) return null;
-
-    return (
-        <div className={styles.container}>
-            <div className={`${styles.profileboard} glassCard`}>
-                <div className={styles.contentWrapper}>
-                    <div className={styles.profilePictureContainer}>
-                        <img
-                            src="/react.svg"
-                            alt="Photo de profil"
-                            className={styles.profilePicture}
-                        />
-                    </div>
-
-                    <div className={styles.description}>
-                        <div className={styles.headerProfile}>
-                            <h2>{user.name} {user.lastname}</h2>
-                            {currentUser?.isAdmin && (
-                                <ManageMember userToManage={user} />
-                            )}
-                        </div>
-
-                        <div className={styles.topDescription}>
-                            <div className={`${styles.infoBlock} glassBorder`}>
-                                <p><strong>Role :</strong> {user.role}</p>
-                                <p><strong>Membre depuis :</strong> {formatDate(user.created_at)}</p>
-                            </div>
-                            <div className={`${styles.infoBlock} glassBorder`}>
-                                <p><strong>Mail :</strong> {user.email}</p>
-                                <p>
-                                    <strong>Téléphone :</strong>{" "}
-                                    {user.phone ?? "Pas de numéro enregistré"}
-                                </p>
-                            </div>
-                        </div>
-
-                        <h2>Tâches :</h2>
-                        {user.tasks?.length > 0 ? (
-                            user.tasks.map((task, index) => (
-                                <Task key={index} task={task} />
-                            ))
-                        ) : (
-                            <p>Aucune tâche pour le moment.</p>
-                        )}
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}

src/pages/VolunteerProfile/VolunteerProfilePage.module.css

@@ -1,163 +0,0 @@
-.container {
-    width: 100%;
-    padding: 10px;
-    box-sizing: border-box;
-}
-
-.profileboard {
-    width: 100%;
-    padding: 15px;
-    border-radius: 20px;
-    box-sizing: border-box;
-}
-
-.contentWrapper {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-}
-
-.profilePictureContainer {
-    width: 120px;
-    height: 120px;
-    margin-bottom: 15px;
-}
-
-.profilePicture {
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    object-fit: cover;
-}
-
-.description {
-    width: 100%;
-    text-align: left;
-    margin-left:4%;
-}
-
-.topDescription {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 10px;
-    margin-bottom: 15px;
-}
-
-.infoBlock {
-    width: 100%;
-    background: rgba(255, 255, 255, 0.1);
-    padding: 10px;
-    border-radius: 5px;
-}
-
-.eventTasks {
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height 0.3s ease-out, opacity 0.2s ease;
-    opacity: 0;
-    padding-left: 20px;
-}
-
-.eventTasks.expanded {
-    max-height: 500px;
-    opacity: 1;
-    margin-top: 10px;
-}
-.description h2{
-    font-size:30px;
-
-}
-.profilePicture{
-    width:90%;
-}
-
-.settingsBtns {
-    display: flex;
-    gap: 5px;
-    justify-content: right;
-}
-
-@media screen and (min-width: 768px) {
-    .contentWrapper {
-        flex-direction: row;
-        justify-content: flex-start;
-        align-items: flex-start;
-    }
-
-    .profilePictureContainer {
-        width: 150px;
-        height: 150px;
-        margin-right: 20px;
-        margin-bottom: 0;
-    }
-
-    .description {
-        width: calc(100% - 170px);
-        margin-left:4%;
-    }
-
-    .topDescription {
-        flex-direction: row;
-        justify-content: space-between;
-    }
-
-    .infoBlock {
-        width: 48%;
-    }
-
-    .event {
-        padding: 15px;
-    }
-    .description h2{
-        font-size:30px;
-    }
-    .profilePicture{
-        width:90%;
-    }
-}
-.description button{
-    width:50px;
-    height:50px;
-
-}
-
-.headerProfile {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 20px;
-}
-
-@media screen and (min-width: 1024px) {
-    .container {
-        max-width: 100%;
-        margin: 0 auto;
-        padding: 20px;
-    }
-
-    .profileboard {
-        padding: 25px;
-    }
-
-    .profilePictureContainer {
-        width: 30%;
-        height:auto;
-    }
-    .profilePicture{
-        width:90%;
-    }
-    .description {
-        width: calc(100% - 200px);
-        margin-left:4%;
-    }
-
-    .event {
-        padding: 18px;
-    }
-    .description h2{
-        font-size:30px;
-    }
-}