Link VolunteerProfilePage to backend server

src/pages/VolunteerProfile/VolunteerProfilePage.jsx

@@ -1,13 +1,61 @@
 import styles from "./VolunteerProfilePage.module.css"
 import { useParams } from "react-router";
-
+import { useEffect, useState } from "react";
+import getUserById from "../../utils/users/getUserById.js";
+import formatDate from "../../utils/date/formatDate.js";
+import Task from "../../components/Task/Task.jsx";
 
 export default function VolunteerProfilePage() {
 
     const params = useParams();
     const id = params.id;
 
-    return <div>
+    const [user, setUser] = useState({});
+
+    useEffect(() => {
+        (async () => {
+            const data = await getUserById(id);
+            setUser(data);
+        }) ()
+    }, []);
+
+
+    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>
+                    </div>
+                    <div className={styles.topDescription}>
+                        <div className={styles.infoBlock}>
+                            <p><strong>Role :</strong> {user.role}</p>
+                            <p><strong>Membre depuis :</strong> {formatDate(user.created_at)}</p>
+                        </div>
+                        <div className={styles.infoBlock}>
+                            <p><strong>Mail :</strong> {user.email} </p>
+                            <p><strong>Téléphone :</strong> {user.phone === null ? "Pas de numéro enregistré" : user.phone}</p>
+                        </div>
+                    </div>
+
+                    <h2>Tâches :</h2>
+                    {user.tasks && 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

@@ -0,0 +1,164 @@
+.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;
+}
+
+/* Desktop (1024px et plus) */
+@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;
+    }
+}