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/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>
+}