resolve conflicts btw ts interface

src/pages/Profile/ProfilePage.module.css

@@ -7,11 +7,25 @@
 }
 
 .profileboard {
+<<<<<<< HEAD
   width: 100%;
   padding: 16px;
   border-radius: 20px;
   box-sizing: border-box;
+=======
+    width: 100%;
+    padding: 16px;
+    border-radius: 20px;
+    box-sizing: border-box;
 }
+
+.settingImage {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+>>>>>>> dev
+}
+
 .contentWrapper {
   display: flex;
   flex-direction: column;
@@ -77,12 +91,42 @@
   margin-bottom: 16px;
 }
 
+<<<<<<< HEAD
 .headerProfile h2 {
   font-size: 1.6rem;
   margin: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+=======
+.description h2 {
+    font-size: 1.6rem;
+    margin-bottom: 10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.description button {
+    width: 44px;
+    height: 44px;
+    min-width: 44px;
+    min-height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+}
+
+.modifyIcon {
+    width: 22px;
+    height: 22px;
+    display: block;
+    margin: 0;
+>>>>>>> dev
 }
 
 /* Conteneur des informations principales */

src/pages/Profile/ProfilePage.tsx

@@ -1,45 +1,91 @@
-import { useContext, useEffect, useState, useRef } from "react";
-import styles from "./ProfilePage.module.css";
-import { AuthContext } from "../../contexts/auth/AuthContext";
-import formatDate from "../../utils/date/formatDate";
 import getXSRFToken from "../../utils/getXSRF.js";
 import fetchWrapper from "../../utils/fetchWrapper";
+import {useContext, useEffect, useState} from "react";
+import styles from "./ProfilePage.module.css";
+import {AuthContext} from "../../contexts/auth/AuthContext";
+import formatDate from "../../utils/date/formatDate";
+import Task from "../../components/Task/Task";
+import SettingsModal from "./components/SettingsModal/SettingsModal";
+import {useParams} from "react-router";
+import {useNavigate} from "react-router";
+import {useRef} from "react";
+import getUserById from "../../utils/users/getUserById.js";
+import ManageMember from "./components/manageMember/ManageMember.jsx";
 
 
 interface TaskType {
   id: number;
-  title?: string;
-  completed?: boolean;
-  [key: string]: unknown;
+  name: string;
+  description: string;
+  location: string;
+  start: string;
+  end: string;
+  max_participants: number;
+  events_id: number;
+  created_at: string;
+  updated_at: string;
+  pivot: {
+    user_id: number;
+    task_id: number;
+  };
 }
 
+
 interface User {
-  name: string;
-  lastname: string;
-  role: string;
-  email: string;
-  phone: string | null;
-  created_at: string;
-  tasks: TaskType[];
-  profile_photo_path?: string | null;
+    id: number;
+    name: string;
+    lastname: string;
+    role: string;
+    email: string;
+    phone: string | null;
+    created_at: string;
+    isAdmin: boolean;
+    tasks: TaskType[];
+    profile_photo_path?: string | null;
 }
 
 interface AuthContextType {
-  user: User | null;
-  update: () => void;
+    user: User | null;
+    update: () => void;
 }
 
 function ProfilePage() {
-  const csrfToken = getXSRFToken();
+  const navigate = useNavigate();
+  const { id } = useParams();
   const { user, update } = useContext(AuthContext) as AuthContextType;
-  /*const [profilePicture, setProfilePicture] = useState<string | null>(
-  user?.profile_photo_path ? `${import.meta.env.VITE_API_URL}/storage/${user.profile_photo_path}`: null);*/
+  const [profileUser, setProfileUser] = useState<User | null>(null);
   const [profilePicture, setProfilePicture] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState<string | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
-  // Fonction pour déclencher l'input file
+  const isOwnProfile = !id || user?.id.toString() === id;
+
+  // Charger le profil de l'utilisateur (soi-même ou un autre)
+  useEffect(() => {
+    (async () => {
+      if (!isOwnProfile && id) {
+        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;
+        }
+        setProfileUser(res.data);
+      } else {
+        update();
+        setProfileUser(user);
+        if (user?.profile_photo_path) {
+          setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${user.profile_photo_path}`);
+        }
+      }
+    })();
+  }, [user, id]);
+
+  // Fonctions pour la photo de profil (uniquement si c'est le profil de l'utilisateur connecté)
   const handleEditPictureClick = () => {
     if (fileInputRef.current) {
       fileInputRef.current.click();
@@ -47,80 +93,56 @@ function ProfilePage() {
   };
 
   const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
-  const file = e.target.files?.[0];
-  if (!file) return;
+    const file = e.target.files?.[0];
+    if (!file) return;
 
-  const formData = new FormData();
-  formData.append("photo", file);
+    const formData = new FormData();
+    formData.append("photo", file);
 
-  try {
-    const response = await fetch(`${import.meta.env.VITE_API_URL}/api/profile-photo`, {
-  method: "POST",
-  headers: {
-    "X-XSRF-TOKEN": decodeURIComponent(await csrfToken),
-  },
-  credentials: "include",
-  body: formData,
-});
-
-    if (response.ok) {
-      const data = await response.json();
-      setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${data?.profile_photo_path}`);
-      setSuccess("Photo de profil mise à jour avec succès !");
-      setError(null);
-      await update();
-    
-   /*if (response.ok) {
-  const data = await response.json();
-  console.log("data:", data);
-  console.log("URL:", `/storage/${data?.profile_photo_path}`);
- 
-  setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${data?.profile_photo_path}`);
-  setSuccess("Photo de profil mise à jour avec succès !");
-  setError(null);
-  update();*/
-} else {
-      const errorData = await response.json();
-      setError(errorData?.message || "Erreur lors de l'upload de la photo.");
-      setSuccess(null);
-    }
-  } catch (err) {
-    setError("Erreur réseau. Vérifiez votre connexion.");
-    setSuccess(null);
-  }
-
-  
-};
-
-  // Fonction pour supprimer la photo de profil
-  const handleDeletePicture = async () => {
     try {
-      const token = localStorage.getItem("token");
-      const response = await fetchWrapper("/api/profile-photo",null,"DELETE");
-      if (response.status >= 200 && response.status < 300) {
-        setProfilePicture(null);
-        setSuccess("Photo de profil supprimée avec succès !");
+      const csrfToken = await getXSRFToken();
+      const response = await fetch(`${import.meta.env.VITE_API_URL}/api/profile-photo`, {
+        method: "POST",
+        headers: { "X-XSRF-TOKEN": decodeURIComponent(csrfToken) },
+        credentials: "include",
+        body: formData,
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${data.profile_photo_path}`);
+        setSuccess("Photo mise à jour !");
         setError(null);
-       await update(); 
+        await update();
       } else {
-        const errorData =response.data;
-        setError(errorData.message || "Erreur lors de la suppression de la photo.");
+        const errorData = await response.json();
+        setError(errorData.message || "Erreur lors de l'upload.");
         setSuccess(null);
       }
     } catch (err) {
-      setError("Erreur réseau. Vérifiez votre connexion.");
+      setError("Erreur réseau.");
       setSuccess(null);
     }
   };
 
-useEffect(() => {
-  console.log("user reçu:", user);
-  if (user?.profile_photo_path) {
-    setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${user.profile_photo_path}`);
-  } else if (user && !user.profile_photo_path && !profilePicture) {
-    setProfilePicture(null);
-  }
-}, [user]);
+  const handleDeletePicture = async () => {
+    try {
+      const response = await fetchWrapper("/api/profile-photo", null, "DELETE");
+      if (response.status >= 200 && response.status < 300) {
+        setProfilePicture(null);
+        setSuccess("Photo supprimée !");
+        setError(null);
+        await update();
+      } else {
+        const errorData = response.data;
+        setError(errorData.message || "Erreur lors de la suppression.");
+        setSuccess(null);
+      }
+    } catch (err) {
+      setError("Erreur réseau.");
+      setSuccess(null);
+    }
+  };
 
   return (
     <div className={styles.container}>
@@ -128,27 +150,25 @@ useEffect(() => {
         <div className={styles.contentWrapper}>
           <div className={styles.profilePictureContainer}>
             <img
-              src={profilePicture || "/react.svg"}
+              src={isOwnProfile ? (profilePicture || "/react.svg") : "/react.svg"}
               alt="Photo de profil"
               className={styles.profilePicture}
             />
           </div>
-          <div className={styles.pictureButtons}>
-            <button
-              onClick={handleEditPictureClick}
-              className={styles.editPictureButton}
-            >
-              Modifier la photo
-            </button>
-            {user?.profile_photo_path && (
-              <button
-                onClick={handleDeletePicture}
-                className={styles.deletePictureButton}
-              >
-                Supprimer
+
+          {isOwnProfile && (
+            <div className={styles.pictureButtons}>
+              <button onClick={handleEditPictureClick} className={styles.editPictureButton}>
+                Modifier la photo
               </button>
-            )}
-          </div>
+              {user?.profile_photo_path && (
+                <button onClick={handleDeletePicture} className={styles.deletePictureButton}>
+                  Supprimer
+                </button>
+              )}
+            </div>
+          )}
+
           <input
             type="file"
             ref={fileInputRef}
@@ -162,44 +182,37 @@ useEffect(() => {
           <div className={styles.description}>
             <div className={styles.headerProfile}>
               <h2>
-                {user?.name} {user?.lastname}
+                {profileUser?.name} {profileUser?.lastname}
               </h2>
+              {user?.isAdmin && profileUser && !isOwnProfile && (
+                <ManageMember userToManage={profileUser} />
+              )}
             </div>
 
             <div className={styles.topDescription}>
               <div className={`${styles.infoBlock} glassBorder`}>
-                <p>
-                  <strong>Role :</strong> {user?.role}
-                </p>
-                <p>
-                  <strong>Membre depuis :</strong>{" "}
-                  {user && formatDate(user.created_at)}
-                </p>
+                <p><strong>Role :</strong> {profileUser?.role}</p>
+                <p><strong>Membre depuis :</strong> {profileUser && formatDate(profileUser.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>
+                <p><strong>Mail :</strong> {profileUser?.email}</p>
+                <p><strong>Téléphone :</strong> {profileUser?.phone ?? "Non renseigné"}</p>
               </div>
 
-              <div className={styles.settingImage}>
-                {/* <SettingsModal /> */}
-              </div>
+              {isOwnProfile && (
+                <div className={styles.settingImage}>
+                  <SettingsModal />
+                </div>
+              )}
             </div>
 
             <h2>Tâches :</h2>
-            {/* {user && user.tasks.length > 0 ? (
-              user.tasks.map((task) => (
-                <Task key={task.id} task={task} />
-              ))
+            {profileUser?.tasks.length ? (
+              profileUser.tasks.map((task) => <Task key={task.id} task={task} />)
             ) : (
-              <p>Aucune tâche pour le moment.</p>
-            )} */}
+              <p>Aucune tâche.</p>
+            )}
           </div>
         </div>
       </div>
@@ -207,5 +220,4 @@ useEffect(() => {
   );
 }
 
-export default ProfilePage;
-
+export default ProfilePage;

src/pages/Profile/components/SettingsModal/SettingsModal.jsx

@@ -1,86 +0,0 @@
-import Modal from "../../../../components/ui/modal/modal.tsx";
-import Button from "../../../../components/ui/button/button.tsx";
-import styles from "./SettingsModal.module.css"
-import { useContext, useState } from "react";
-import ThemeSwitcher from "../../../../components/ui/themeSwitcher/ThemeSwitcher.jsx";
-import { AuthContext } from "../../../../contexts/auth/AuthContext.js";
-import TextInput from "../../../../components/ui/input/input.tsx";
-import updateUser from "../../../../utils/users/updateUser.js";
-import deleteUser from "../../../../utils/users/deleteUser.js";
-
-
-export default function SettingsModal() {
-
-    const { user, logout, update } = useContext(AuthContext);
-
-    const [open, setOpen] = useState(false);
-    const [isDelete, setIsDelete] = useState(false);
-
-    const [name, setName] = useState(user?.name);
-    const [lastname, setLastName] = useState(user?.lastname);
-    const [phone, setPhone] = useState(user?.phone);
-
-    const handleLogout = () => {
-        logout();
-    }
-
-    const handleSubmit = async () => {
-        await updateUser(name, lastname, phone);
-        update();
-    }
-
-    const handleDelete = async () => {
-        await deleteUser();
-        update();
-    }
-
-    return (
-        <>
-            <Button variant={"transparent"} onClick={() => setOpen(!open)}>
-                <img src={"/icons/settings-wheel.svg"} alt={"Modify btn"} className={styles.modifyIcon}/>
-            </Button>
-
-            <Modal title={"Paramètres"} open={open} onClose={() => setOpen(false)}>
-                <div className={styles.content}>
-
-                    <div className={styles.section}>
-                        <h3>Compte</h3>
-                        <Button variant={"danger"} onClick={handleLogout}> Déconnexion </Button>
-                        <Button variant={"danger"} onClick={() => setIsDelete(true)}> Supprimer le compte </Button>
-
-                        <div className={styles.section}>
-                            <h4>Changer de Prénom</h4>
-                            <TextInput value={name} onChange={e => setName(e.target.value)} type={"text"} />
-                        </div>
-
-                        <div className={styles.section}>
-                            <h4>Changer de nom</h4>
-                            <TextInput value={lastname} onChange={e => setLastName(e.target.value)} type={"text"} />
-                        </div>
-
-                        <div className={styles.section}>
-                            <h4>Changer de numéro de téléphone</h4>
-                            <TextInput value={phone} onChange={e => setPhone(e.target.value)} type={"text"} />
-                        </div>
-
-                        <Button className={styles.submitBtn} onClick={handleSubmit}>Confirmer</Button>
-
-                    </div>
-
-                    <div className={styles.section}>
-                        <h3>Apparence</h3>
-                        <ThemeSwitcher />
-                    </div>
-                </div>
-            </Modal>
-
-
-            <Modal title={"Validation"} open={isDelete} onClose={() => setIsDelete(false)}>
-                <div className={styles.section}>
-                    <p className={styles.alignText}> Êtes vous vraiment sûr de vouloir supprimer votre compte ?</p>
-                    <Button variant={"danger"} className={styles.submitBtn} onClick={handleDelete}>Confirmer</Button>
-                </div>
-            </Modal>
-        </>
-    )
-}

src/pages/Profile/components/SettingsModal/SettingsModal.module.css

@@ -1,73 +1,98 @@
 .content {
     width: 100%;
-    padding: 16px;
+    padding: 20px;
     display: flex;
     flex-direction: column;
-    gap: 20px;
+    gap: 28px;
 }
 
 .modifyIcon {
-    height: 28px;
-    width: 28px;
+    height: 26px;
+    width: 26px;
+    transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.modifyIcon:hover {
+    transform: rotate(15deg);
+    opacity: 0.8;
 }
 
 .section {
     display: flex;
     flex-direction: column;
-    gap: 12px;
-    margin-top: 10px;
+    gap: 16px;
+    padding: 18px;
+    border-radius: 12px;
+    background: var(--glass-bg, rgba(255, 255, 255, 0.25));
+    backdrop-filter: blur(6px);
 }
 
 .section h3 {
-    font-size: 1.1rem;
-    margin-bottom: 5px;
+    font-size: 1.15rem;
+    font-weight: 600;
 }
 
 .section h4 {
-    font-size: 0.95rem;
+    font-size: 0.9rem;
     font-weight: 500;
-}
-
-.submitBtn {
-    width: 100%;
-    margin-top: 15px;
+    opacity: 0.85;
 }
 
 .section button {
     width: 100%;
 }
 
-@media (min-width: 600px) {
+.submitBtn {
+    width: 100%;
+    text-align: center;
+    margin-top: 10px;
+}
+
+.alignText {
+    text-align: center;
+    line-height: 1.5;
+}
+
+.section :global(input) {
+    width: 100%;
+    box-sizing: border-box;
+}
+
+@media (min-width: 640px) {
     .content {
-        padding: 24px;
+        padding: 28px;
+        gap: 32px;
     }
 
-    .section h3 {
-        font-size: 1.2rem;
+    .section {
+        padding: 22px;
+        gap: 18px;
     }
 
     .submitBtn {
         width: auto;
         align-self: center;
-        min-width: 200px;
+        min-width: 220px;
     }
 
     .section button {
         width: fit-content;
     }
 }
+
 @media (min-width: 900px) {
     .content {
-        padding: 30px;
-        gap: 30px;
+        padding: 36px;
+        gap: 36px;
     }
 
     .section {
-        gap: 14px;
+        padding: 26px;
+        border-radius: 16px;
     }
 
     .modifyIcon {
         height: 30px;
         width: 30px;
     }
-}
+}

src/pages/Profile/components/SettingsModal/SettingsModal.tsx

@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 /*import Modal from "../../../../components/ui/modal/modal.jsx";
 import Button from "../../../../components/ui/button/button.jsx";
 import styles from "./SettingsModal.module.css"
@@ -51,29 +52,171 @@ export default function SettingsModal() {
                         <div className={styles.section}>
                             <h4>Changer de Prénom</h4>
                             <TextInput value={name} onChange={e => setName(e.target.value)} type={"text"} />
+=======
+import {useContext, useState, ChangeEvent} from "react";
+import Modal from "../../../../components/ui/modal/modal";
+import Button from "../../../../components/ui/button/button";
+import styles from "./SettingsModal.module.css";
+import ThemeSwitcher from "../../../../components/ui/themeSwitcher/ThemeSwitcher.jsx";
+import {AuthContext} from "../../../../contexts/auth/AuthContext";
+import TextInput from "../../../../components/ui/input/input";
+import updateUser from "../../../../utils/users/updateUser.js";
+import deleteUser from "../../../../utils/users/deleteUser.js";
+
+interface TaskType {
+    id: number;
+    title?: string;
+    completed?: boolean;
+
+    [key: string]: unknown;
+}
+
+interface User {
+    id: number;
+    name: string;
+    lastname: string;
+    role: string;
+    email: string;
+    phone: string | null;
+    created_at: string;
+    isAdmin: boolean;
+    tasks: TaskType[];
+}
+
+interface AuthContextType {
+    user: User;
+    update: () => void;
+    logout: () => void;
+}
+
+export default function SettingsModal() {
+    const {user, logout, update} = useContext(AuthContext) as AuthContextType;
+
+    const [open, setOpen] = useState<boolean>(false);
+    const [isDelete, setIsDelete] = useState<boolean>(false);
+
+    const [name, setName] = useState<string>(user?.name ?? "");
+    const [lastname, setLastName] = useState<string>(user?.lastname ?? "");
+    const [phone, setPhone] = useState<string>(user?.phone ?? "");
+
+    const handleLogout = (): void => {
+        logout();
+    };
+
+    const handleSubmit = async (): Promise<void> => {
+        await updateUser(name, lastname, phone || null);
+        update();
+        setOpen(false);
+    };
+
+    const handleDelete = async (): Promise<void> => {
+        await deleteUser();
+        update();
+    };
+
+    const handleNameChange = (e: ChangeEvent<HTMLInputElement>): void => {
+        setName(e.target.value);
+    };
+
+    const handleLastnameChange = (e: ChangeEvent<HTMLInputElement>): void => {
+        setLastName(e.target.value);
+    };
+
+    const handlePhoneChange = (e: ChangeEvent<HTMLInputElement>): void => {
+        setPhone(e.target.value);
+    };
+
+
+    return (
+        <>
+            <Button variant="transparent" onClick={() => setOpen((prev) => !prev)}>
+                <img
+                    src="/icons/settings-wheel.svg"
+                    alt="Modify btn"
+                    className={styles.modifyIcon}
+                />
+            </Button>
+
+            <Modal
+                title="Paramètres"
+                open={open}
+                onClose={() => setOpen(false)}
+            >
+                <div className={styles.content}>
+                    <div className={styles.section}>
+                        <h3>Compte</h3>
+
+                        <Button variant="danger" onClick={handleLogout}>
+                            Déconnexion
+                        </Button>
+
+                        <Button
+                            variant="danger"
+                            onClick={() => setIsDelete(true)}
+                        >
+                            Supprimer le compte
+                        </Button>
+
+                        <div className={styles.section}>
+                            <h4>Changer de Prénom</h4>
+                            <TextInput
+                                value={name}
+                                onChange={handleNameChange}
+                                type="text"
+                            />
+>>>>>>> dev
                         </div>
 
                         <div className={styles.section}>
                             <h4>Changer de nom</h4>
+<<<<<<< HEAD
                             <TextInput value={lastname} onChange={e => setLastName(e.target.value)} type={"text"} />
+=======
+                            <TextInput
+                                value={lastname}
+                                onChange={handleLastnameChange}
+                                type="text"
+                            />
+>>>>>>> dev
                         </div>
 
                         <div className={styles.section}>
                             <h4>Changer de numéro de téléphone</h4>
+<<<<<<< HEAD
                             <TextInput value={phone} onChange={e => setPhone(e.target.value)} type={"text"} />
                         </div>
 
                         <Button className={styles.submitBtn} onClick={handleSubmit}>Confirmer</Button>
 
+=======
+                            <TextInput
+                                value={phone}
+                                onChange={handlePhoneChange}
+                                type="text"
+                            />
+                        </div>
+
+                        <Button
+                            className={styles.submitBtn}
+                            onClick={handleSubmit}
+                        >
+                            Confirmer
+                        </Button>
+>>>>>>> dev
                     </div>
 
                     <div className={styles.section}>
                         <h3>Apparence</h3>
+<<<<<<< HEAD
                         <ThemeSwitcher />
+=======
+                        <ThemeSwitcher/>
+>>>>>>> dev
                     </div>
                 </div>
             </Modal>
 
+<<<<<<< HEAD
 
             <Modal title={"Validation"} open={isDelete} onClose={() => setIsDelete(false)}>
                 <div className={styles.section}>
@@ -185,3 +328,26 @@ export default function SettingsModal() {
     </>
   );
 }
+=======
+            <Modal
+                title="Validation"
+                open={isDelete}
+                onClose={() => setIsDelete(false)}
+            >
+                <div className={styles.section}>
+                    <p className={styles.alignText}>
+                        Êtes vous vraiment sûr de vouloir supprimer votre compte ?
+                    </p>
+                    <Button
+                        variant="danger"
+                        className={styles.submitBtn}
+                        onClick={handleDelete}
+                    >
+                        Confirmer
+                    </Button>
+                </div>
+            </Modal>
+        </>
+    );
+}
+>>>>>>> dev

src/pages/Profile/components/manageMember/ManageMember.jsx

@@ -0,0 +1,37 @@
+import Button from "../../../../components/ui/button/button.tsx";
+import Modal from "../../../../components/ui/modal/modal.tsx";
+import {useContext, useState} from "react";
+import styles from "./manageMember.module.css"
+import DeactivateMemberBtn from "./deactivateMember/deactivateMemberBtn.jsx";
+import ModifyRole from "./modifyrole/ModifyRole.jsx";
+import {AuthContext} from "../../../../contexts/auth/AuthContext.js";
+
+
+export default function ManageMember({ userToManage }) {
+
+    const { user } = useContext(AuthContext);
+    const [open, setOpen] = useState(false);
+
+
+    return <>
+        <Button onClick={() => setOpen(true)} variant={"default"} className={styles.manageBtn}>
+            <img src="/icons/tools.svg" alt="tools icon" className={styles.icon} />
+            <p>Gérer</p>
+        </Button>
+
+        <Modal open={open} onClose={() => setOpen(false)} title={`Gestion de l'utilisateur ${userToManage.name}`}>
+
+            {(user.id != userToManage.id) ? (
+                <div className={styles.manageSection}>
+                    <h3>Désactiver le compte</h3>
+                    <DeactivateMemberBtn name={userToManage.name} id={userToManage.id} className={styles.manageBlockContent} />
+                </div>
+            ) : null}
+
+            <div className={styles.manageSection}>
+                <h3>Modifier le rôle</h3>
+                <ModifyRole user={userToManage} />
+            </div>
+        </Modal>
+    </>
+}

src/pages/Profile/components/manageMember/deactivateMember/deactivateMemberBtn.jsx

@@ -0,0 +1,31 @@
+import Button from "../../../../../components/ui/button/button.tsx";
+import Modal from "../../../../../components/ui/modal/modal.tsx";
+import { useState } from "react";
+import deactivateUser from "../../../../../utils/users/deactivateUser.js"
+import { useNavigate } from "react-router";
+
+export default function DeactivateMemberBtn({ name, id, ...props }) {
+
+    const [open, setOpen] = useState(false);
+    const navigate = useNavigate();
+
+    const deactivateMember = async () => {
+        const result = await deactivateUser(id);
+
+        if (result.status === 200 || result.status === 204) {
+            setOpen(false);
+            navigate("/volunteers");
+        }
+    }
+
+    return <div {...props}>
+        <Button variant={"danger"} onClick={() => setOpen(true)}>Désactiver</Button>
+
+        <Modal open={open} onClose={() => setOpen(false)} title={"Supprimer"}>
+            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 15 }}>
+                <p>Etes-vous sur de vouloir désactiver le compte {name} ?</p>
+                <Button variant={"danger"} onClick={deactivateMember}>Désactiver</Button>
+            </div>
+        </Modal>
+    </div>
+}

src/pages/Profile/components/manageMember/manageMember.module.css

@@ -0,0 +1,47 @@
+.icon {
+    width: 24px;
+}
+
+.manageBtn {
+    display: flex;
+    flex-direction: row;
+}
+
+.manageSection {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin: 1.5em;
+}
+
+.manageBlockContent {
+    margin: 0.5em;
+}
+
+.modifyRole {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+}
+
+.select {
+    width: 70%;
+    padding: 10px 14px;
+
+    font-size: 14px;
+    font-weight: 500;
+    color: #1d1d1f;
+
+    background-color: #ffffff;
+    border: 1px solid #d2d2d7;
+    border-radius: 10px;
+
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+}
+
+.modalContent {
+    text-align: center;
+}

src/pages/Profile/components/manageMember/modifyrole/ModifyRole.jsx

@@ -0,0 +1,60 @@
+import styles from "../manageMember.module.css";
+import Button from "../../../../../components/ui/button/button.tsx";
+import modifyRole from "../../../../../utils/users/modifyRole.js";
+import { useState, useEffect } from "react";
+import getRoles from "../../../../../utils/getRoles.js";
+import Modal from "../../../../../components/ui/modal/modal.tsx";
+
+export default function ModifyRole({ user }) {
+
+    const [roles, setRoles] = useState([]);
+    const [selectedRole, setSelectedRole] = useState(3);
+    const [open, setOpen] = useState(false);
+    const [title, setTitle] = useState("");
+    const [description, setDescription] = useState("");
+
+    useEffect(() => {
+        getRoles().then(data => {
+            if (data) setRoles(data.data);
+            //TODO: Fermer les modal + actualiser les infos lors du changement de role
+        });
+    }, [])
+
+
+    const handleRoleUpdate = async () => {
+        const res = await modifyRole(selectedRole, user.id);
+
+        if (res.status === 200) {
+            setDescription("Rôle modifié avec succès");
+            setTitle("Modification")
+            setOpen(true);
+        } else {
+            setDescription("Erreur lors de la modification du rôle");
+            setTitle("Erreur")
+            setOpen(true);
+        }
+    };
+
+
+    return <div className={`${styles.manageBlockContent} ${styles.modifyRole}`}>
+        <select
+            value={selectedRole}
+            onChange={(e) => setSelectedRole(e.target.value)}
+            className={styles.select}
+        >
+            {roles.map((role, index) => (
+                <option key={index} value={index+1}>
+                    {role}
+                </option>
+            ))}
+        </select>
+
+        <Button onClick={handleRoleUpdate} variant={"default"}>
+            Enregistrer
+        </Button>
+
+        <Modal open={open} onClose={() => setOpen(false)} title={title}>
+            <p className={styles.modalContent}>{description}</p>
+        </Modal>
+    </div>
+}