resolve conflict

src/pages/Events/EventsPage.jsx

@@ -0,0 +1,40 @@
+import { useEffect, useState } from "react";
+import Event from "../../components/Event/Event.jsx";
+import styles from "./EventsPage.module.css";
+import ToolBar from "../../components/ToolBar/ToolBar.jsx";
+import getAllEvents from "../../utils/event/getAllEvents.js";
+import filter from "../../utils/filter.js";
+
+
+function EventsPage(){
+    const [filters, setFilters] = useState({
+        alphabetical: "asc",
+        yearOrder: "desc",
+    });
+
+
+    const [events, setEvents] = useState([]);
+
+
+
+    useEffect(() => {
+        (async () => {
+            const data = await getAllEvents();
+            setEvents(data.data);
+        }) ()
+    }, []);
+
+
+    return (
+        <div className={styles.eventsContainer}>
+            <ToolBar setFilters={setFilters} filters={filters}/>
+            <div className={styles.eventsList}>
+                {filter(events, filters, "event").map((event, index) => (
+                    <Event key={index} event={event} />
+                ))}
+            </div>
+        </div>
+    )
+}
+
+export default EventsPage;

src/pages/Events/EventsPage.module.css

@@ -0,0 +1,11 @@
+.eventsContainer {
+    width: 100%;
+    position: relative;
+}
+
+
+.eventsList{
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}

src/pages/Home/HomePage.jsx

@@ -1,11 +1,181 @@
+import { useState } from "react";
+import { useMemo } from "react";
+import styles from "./HomePage.module.css";
 
+function HomePage() {
+    const events = {
+        "2025-11-07": ["Réunion de projet", "Anniversaire de Marie"],
+        "2025-11-10": ["Cours de React", "Rendez-vous médecin"],
+        "2025-11-14": ["Sortie cinéma"],
+    };
 
-function HomePage(){
+    const monthNames = [
+        "Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
+        "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
+    ];
+
+    const today = new Date();
+    const [currentMonth, setCurrentMonth] = useState(today.getMonth());
+    const [currentYear, setCurrentYear] = useState(today.getFullYear());
+    const [selectedDay, setSelectedDay] = useState(() => {
+        const year = today.getFullYear();
+        const month = String(today.getMonth() + 1).padStart(2, "0");
+        const day = String(today.getDate()).padStart(2, "0");
+        const key = `${year}-${month}-${day}`;
+        return { date: key, events: events[key] || [] };
+    });
+
+    const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
+    const firstDay = new Date(currentYear, currentMonth, 1).getDay();
+    const startDay = (firstDay + 6) % 7;
+
+    const days = [];
+    for (let i = 0; i < startDay; i++) days.push(null);
+    for (let i = 1; i <= daysInMonth; i++) days.push(i);
+
+    const handlePrevMonth = () => {
+        let newMonth = currentMonth - 1;
+        let newYear = currentYear;
+
+        if (newMonth < 0) {
+            newMonth = 11;
+            newYear--;
+        }
+
+        setCurrentMonth(newMonth);
+        setCurrentYear(newYear);
+
+        const key = `${newYear}-${String(newMonth + 1).padStart(2, "0")}-01`;
+        setSelectedDay({ date: key, events: events[key] || [] });
+    };
+
+    const handleNextMonth = () => {
+        let newMonth = currentMonth + 1;
+        let newYear = currentYear;
+
+        if (newMonth > 11) {
+            newMonth = 0;
+            newYear++;
+        }
+
+        setCurrentMonth(newMonth);
+        setCurrentYear(newYear);
+
+        const key = `${newYear}-${String(newMonth + 1).padStart(2, "0")}-01`;
+        setSelectedDay({ date: key, events: events[key] || [] });
+    };
+
+    const handleDayClick = (day) => {
+        if (!day) return;
+        const key = `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+        setSelectedDay({ date: key, events: events[key] || [] });
+    };
+
+    const sortedEvents = useMemo(() => {
+        return Object.entries(events)
+            .map(([dateKey, eventList]) => ({ date: dateKey, events: eventList }))
+            .sort((a, b) => new Date(a.date) - new Date(b.date));
+    }, [events]);
+
+    const formatDate = (dateString) => {
+        const [year, month, day] = dateString.split('-');
+        return `${day} ${monthNames[parseInt(month) - 1]} ${year}`;
+    };
 
     return (
-        <div>
+        <div className={styles.allContent}>
+            <div className={styles.glassCard}>
+                <div className={styles.calendarContainer}>
+                    <div className={styles.calendarHeader}>
+                        <button onClick={handlePrevMonth}>◀</button>
+                        <p>{monthNames[currentMonth]} {currentYear}</p>
+                        <button onClick={handleNextMonth}>▶</button>
+                    </div>
+
+                    <table className={styles.calendar}>
+                        <thead>
+                        <tr>
+                            <th>Lun</th>
+                            <th>Mar</th>
+                            <th>Mer</th>
+                            <th>Jeu</th>
+                            <th>Ven</th>
+                            <th>Sam</th>
+                            <th>Dim</th>
+                        </tr>
+                        </thead>
+
+                        <tbody>
+                        {Array.from({ length: Math.ceil(days.length / 7) }).map((_, weekIndex) => (
+                            <tr key={weekIndex}>
+                                {days.slice(weekIndex * 7, weekIndex * 7 + 7).map((day, index) => {
+                                    const key = `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+                                    const hasEvent = events[key];
+
+                                    return (
+                                        <td
+                                            key={index}
+                                            className={[
+                                                day === today.getDate() &&
+                                                currentMonth === today.getMonth() &&
+                                                currentYear === today.getFullYear()
+                                                    ? styles.today : "",
+                                                hasEvent ? styles.hasEvent : "",
+                                                selectedDay?.date === key ? styles.selected : ""
+                                            ].join(" ")}
+                                            onClick={() => handleDayClick(day)}
+                                        >
+                                            {day || ""}
+                                        </td>
+                                    );
+                                })}
+                            </tr>
+                        ))}
+                        </tbody>
+                    </table>
+
+                    {selectedDay && (
+                        <div className={styles.eventBox}>
+                            <h3>Événements du {formatDate(selectedDay.date)}</h3>
+
+                            {selectedDay.events.length > 0 ? (
+                                <ul>
+                                    {selectedDay.events.map((ev, i) => (
+                                        <li key={i}>{ev}</li>
+                                    ))}
+                                </ul>
+                            ) : (
+                                <p>Aucun événement ce jour-là.</p>
+                            )}
+                        </div>
+                    )}
+                </div>
+            </div>
+            <div className={styles.glassCard}>
+                <div className={styles.eventListContainer}>
+                    <h2>Liste des Événements à Venir</h2>
+                    {sortedEvents.length > 0 ? (
+                        <ul className={styles.eventList}>
+                            {sortedEvents.map((eventGroup) => (
+                                <li key={eventGroup.date} className={styles.eventGroup}>
+                                    <div className={styles.eventDate}>
+                                        <strong>{formatDate(eventGroup.date)}</strong>
+                                    </div>
+                                    <ul className={styles.eventDetails}>
+                                        {eventGroup.events.map((event, i) => (
+                                            <li key={i}>- {event}</li>
+                                        ))}
+                                    </ul>
+                                </li>
+                            ))}
+                        </ul>
+                    ) : (
+                        <p>Aucun événement planifié pour l'instant.</p>
+                    )}
+                </div>
+            </div>
         </div>
-    )
+    );
 }
 
 export default HomePage;

src/pages/Home/HomePage.module.css

@@ -1,3 +1,173 @@
-.title {
-    color: red;
+.calendarContainer {
+    padding: 20px;
+    font-family: Arial, sans-serif;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.calendarHeader {
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    gap: 10px;
+}
+
+.calendarHeader p {
+    width: auto;
+    text-align: center;
+    font-weight: bold;
+    font-size: 40px;
+}
+
+.calendarHeader button {
+    top: 50%;
+    left: 50%;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: none;
+    background: transparent;
+    box-shadow:
+            inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
+            inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
+            inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
+            inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
+    font-size: 15px;
+    color: #019AFF;
+    cursor: pointer;
+}
+
+.calendar {
+    border-collapse: collapse;
+    width: 80%;
+    max-width: 500px;
+}
+
+.calendar th, .calendar td {
+    border: none;
+    padding: 10px;
+    width: 14.2%;
+    line-height: 130%;
+    text-align: center;
+    cursor: pointer;
+}
+
+.today {
+    color: #007bff;
+}
+
+.hasEvent {
+    position: relative;
+}
+
+.hasEvent::before {
+    content: "";
+    position: absolute;
+    left: 50%;
+    bottom: 10px;
+    width: 20px;
+    height: 2px;
+    background-color: #007bff;
+    transform: translateX(-50%);
+    border-radius: 10px;
+}
+
+.hasEvent.selected::before {
+    width: 25px;
+    height: 2px;
+    bottom: 10px;
+}
+
+.selected {
+    position: relative;
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.selected::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 40px;
+    height: 40px;
+    transform: translate(-50%, -50%);
+    border-radius: 38%;
+    pointer-events: none;
+    background: transparent;
+    box-shadow:
+            inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
+            inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
+            inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
+            inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
+}
+
+.eventBox {
+    border-radius: 20px;
+    padding: 15px;
+    margin-top: 16px;
+    border: none;
+    background: rgb(255, 255, 255, 0.25);
+    box-shadow:
+            inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
+            inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
+            inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
+            inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
+}
+
+.eventBox ul {
+    list-style-type: disc;
+}
+
+.eventGroup{
+    border-radius: 20px;
+    padding: 15px;
+    margin-top: 16px;
+    border: none;
+    background: rgb(255, 255, 255, 0.25);
+    box-shadow:
+            inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
+            inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
+            inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
+            inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
+}
+
+.glassCard {
+    width: 45%;
+    margin: 16px;
+    padding: 10px 20px 10px 20px;
+    height: fit-content;
+    background: rgba(255, 255, 255, 0.65);
+    backdrop-filter: blur(3px);
+    -webkit-backdrop-filter: blur(3px);
+    border-radius: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.5),
+    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
+    inset 0 0 8px 4px rgba(255, 255, 255, 0.4);
+    overflow: hidden;
+}
+.allContent{
+    display: flex;
+    flex-direction: row;
+}
+
+@media (max-width: 768px) {
+    .glassCard {
+        width: 100%;
+        margin: 0px;
+        margin-top: 16px;
+        margin-bottom: 16px;
+        display: flex;
+    }
+
+
+    .allContent{
+        display: flex;
+        flex-direction: column;
+    }
 }

src/pages/Login/LoginPage.jsx

@@ -1,14 +1,29 @@
 import styles from "./LoginPage.module.css";
-import LoginForm from "../../components/form/form.jsx";
+import LoginForm from "../../components/loginform/loginForm.jsx";
+import Background from "../../components/background/background.jsx";
+import { useEffect, useContext } from "react";
+import { AuthContext } from "../../contexts/auth/AuthContext.js";
+import { useNavigate } from "react-router";
 
 function LoginPage() {
-  return (
-      <div className={styles.container}>
-        <LoginForm />
-      </div>
-  );
+
+    const { user, loading } = useContext(AuthContext)
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        if (!loading && user) {
+            navigate("/");
+        }
+    }, [loading, user]);
+
+    return (
+        <Background>
+            <div className={styles.container}>
+                <h1 className={styles.title}>Connexion</h1>
+                <LoginForm />
+            </div>
+        </Background>
+    );
 }
 
 export default LoginPage;
-
-

src/pages/Login/LoginPage.module.css

@@ -1,15 +1,23 @@
 .container {
-    position: relative;
+    position: absolute;
     z-index: 2;
     display: flex;
+    flex-direction: column;
     width: 600px;
-    overflow: hidden;
     max-height: 80%;
     justify-content: center;
     align-items: center;
     padding: 20px;
-    border-radius:12px;
+    border-radius: 12px;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
 }
 
-
-
+.title {
+    font-size: 36px;
+    color: white;
+    text-align: center;
+    margin-bottom: 20px;
+    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
+}

src/pages/Profile/ProfilePage.jsx

@@ -0,0 +1,55 @@
+import React, { useContext } from "react";
+import styles from "./ProfilePage.module.css";
+import { AuthContext } from "../../contexts/auth/AuthContext.js";
+import formatDate from "../../utils/date/formatDate.js";
+import Task from "../../components/Task/Task";
+import SettingsModal from "../../components/SettingsModal/SettingsModal.jsx";
+
+function ProfilePage() {
+
+    const { user } = useContext(AuthContext);
+
+  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}</p>
+              </div>
+                <SettingsModal />
+            </div>
+
+            <h2>Vos Événements :</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>
+  );
+}
+
+export default ProfilePage;

src/pages/Profile/ProfilePage.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;
+}
+}

src/pages/Register/RegisterPage.jsx

@@ -0,0 +1,134 @@
+import styles from "./RegisterPage.module.css";
+import Background from "../../components/background/background.jsx";
+import Input from "../../components/ui/input/input.jsx";
+import Button from "../../components/ui/button/button.jsx";
+import {useContext, useEffect, useState} from "react";
+import register from "../../utils/register.js";
+import { useNavigate } from "react-router";
+import { AuthContext } from "../../contexts/auth/AuthContext.js";
+import Modal from "../../components/ui/modal/modal.jsx";
+
+
+function RegisterPage() {
+
+    const navigate = useNavigate();
+
+    const [email, setEmail] = useState("");
+    const [phone, setPhone] = useState("");
+    const [password, setPassword] = useState("");
+    const [confirmPassword, setConfirmPassword] = useState("");
+    const [name, setName] = useState("");
+    const [lastName, setLastName] = useState("");
+    const [open, setOpen] = useState(false);
+    const [title, setTitle] = useState("");
+    const [message, setMessage] = useState("");
+
+    const { user, loading } = useContext(AuthContext)
+
+    useEffect(() => {
+        if (!loading && user) {
+            navigate("/");
+        }
+    }, [loading, user]);
+
+    const handleModal = (t, m) => {
+        setTitle(t)
+        setMessage(m)
+        setOpen(true);
+    }
+
+    async function handleSubmit(e) {
+        e.preventDefault();
+
+        if(!(password === confirmPassword)) handleModal("Mot de passe invalide", "Les mots de passes ne conrrespondent pas");
+        else if(password.length < 8) handleModal("Mot de passe invalide", "Le mot de passe doit faire plus de 8 charactères");
+        else {
+
+            const res = await register(email, password, name, lastName, phone);
+
+            if (res.status === 422) {
+                if (res.errors.email) handleModal("Adresse Email invalide", "Le formet de votre adresse Email n'est pas valide");
+                if (res.errors.phone) handleModal("Numéro de téléphone invalide", "Le formet de votre numéro de téléphone n'est pas valide");
+            } else navigate("/login");
+
+        }
+    }
+
+    const handlePhone = (e) => {
+        const value = e.target.value;
+        if (value === "" || /^[0-9 +]+$/.test(value)) {
+            setPhone(value);
+        }
+    };
+
+
+    return <Background>
+
+        <div className={styles.container}>
+
+            <h1 className={styles.title}>Créer un compte</h1>
+
+            <div className={`glassCard ${styles.inputContainer}`}>
+
+                <div className={styles.formGroup}>
+                    <Input
+                        value={name}
+                        placeholder="Prénom"
+                        onChange={e => setName(e.target.value)}
+                        style={{ width: '100%' }}
+                    />
+                </div>
+
+                <div className={styles.formGroup}>
+                    <Input
+                        value={lastName}
+                        placeholder="Nom"
+                        onChange={e => setLastName(e.target.value)}
+                        style={{ width: '100%' }}
+                    />
+                </div>
+
+                <div className={styles.formGroup}>
+                    <Input
+                        type="email"
+                        value={email}
+                        placeholder="Adresse mail"
+                        onChange={e => setEmail(e.target.value)}
+                        style={{ width: '100%' }}
+                    />
+                </div>
+
+                <div className={styles.formGroup}>
+                    <Input
+                        value={phone}
+                        placeholder="Numéro de téléphone"
+                        onChange={handlePhone}
+                        style={{ width: '100%' }}
+                    />
+                </div>
+
+                <div className={styles.formGroup}>
+                    <Input password={true} onChange={e => setPassword(e.target.value)} value={password} placeholder={"Mot de passe"}/>
+                </div>
+
+                <div className={styles.formGroup}>
+                    <Input password={true} onChange={e => setConfirmPassword(e.target.value)} value={confirmPassword} placeholder={"Confirmer le mot de passe"} />
+                </div>
+
+                <div className={styles.logButton}>
+                    <Button variant={"transparent"} onClick={() => navigate("/login")}>Vous avez déjà un compte ?</Button>
+                    <Button variant={"default"} onClick={handleSubmit}> Se connecter </Button>
+                </div>
+            </div>
+        </div>
+
+        <Modal open={open} onClose={() => setOpen(false)} title={title}>
+            <p>{message}</p>
+        </Modal>
+
+    </Background>
+}
+
+export default RegisterPage;
+
+

src/pages/Register/RegisterPage.module.css

@@ -0,0 +1,43 @@
+.container {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+    width: 30%;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+    border-radius:12px;
+}
+
+.title {
+    font-size: 36px;
+    color: white;
+    text-align: center;
+    margin-bottom: 20px;
+    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
+}
+
+
+:global(.glassCard) {
+    --glass-bg: #ffffff9f;
+}
+.logButton{
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 12px;
+}
+.formGroup{
+    margin-top:23px;
+}
+
+h1 {
+    overflow: visible;
+    text-align: center;
+}
+
+.inputContainer {
+    padding: 15px;
+}

src/pages/Stat/StatPage.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import styles from "./StatPage.module.css";
-// Importez les composants avec une majuscule
 import ParticipationChart from "../../components/chart/ParticipationChart.jsx";
 import IncompleteEvents from "../../components/IncompleteEvent/IncompleteEvent.jsx";
 import PendingMembers from "../../components/PendingMembers/PendingMembers.jsx";

src/pages/Volunteers/VolunteerCard.jsx

@@ -0,0 +1,74 @@
+import React, {useState} from "react";
+import styles from "./VolunteersPage.module.css";
+import formatDate from "../../utils/date/formatDate.js";
+import { useNavigate } from "react-router";
+import Button from "../../components/ui/button/button.jsx";
+
+export default function VolunteerCard({ user }) {
+
+    const [isExpanded, setIsExpanded] = useState(false);
+
+    const toggleExpand = () => {
+        setIsExpanded(!isExpanded);
+    };
+
+    const navigate = useNavigate();
+
+    return (
+        <div className={`${styles.profileboard} glassCard`}>
+
+            <div className={styles.header}>
+                <h2>{user?.name} {user?.lastname}</h2>
+                 <Button
+                    variant={"transparent"}
+                    onClick={toggleExpand}
+                    className={`${isExpanded ? styles.moreButtonClicked : ""}`}
+                >
+                    {">"}
+                </Button>
+            </div>
+
+            <div className={styles.mainContent}>
+                {!isExpanded ? (
+                    <div className={styles.basicInfo}>
+                        <p><strong>Rôle :</strong> {user?.role}</p>
+                        <p><strong>Membre depuis :</strong> {user?.created_at && formatDate(user.created_at)}</p>
+                    </div>
+                ) : (
+                    <div className={styles.expandedContent}>
+                        <div className={styles.profilePictureContainer}>
+                            <img src={"/react.svg"} alt="profile" className={styles.profilePicture} />
+                        </div>
+
+                        <div className={styles.textInfo}>
+                            <div className={styles.basicInfo}>
+                                <p><strong>Rôle :</strong> {user?.role}</p>
+                                <p><strong>Membre depuis :</strong> {user?.created_at && formatDate(user.created_at)}</p>
+                            </div>
+
+                            <div className={styles.contactInfo}>
+                                <p><strong>Email :</strong> {user?.email}</p>
+                                {user?.phone && <p><strong>Téléphone :</strong> {user.phone}</p>}
+                            </div>
+                        </div>
+                    </div>
+                )}
+            </div>
+
+            {isExpanded && (
+                <div className={styles.bottomBar}>
+                    <Button
+                        onClick={() => navigate(`/profile/${user.id}`)}
+                        variant="primary"
+                    >
+                        Voir plus
+                    </Button>
+                </div>
+            )}
+
+        </div>
+    );
+
+
+
+}

src/pages/Volunteers/VolunteersPage.jsx

@@ -0,0 +1,37 @@
+import { useState, useEffect } from "react";
+import styles from "./VolunteersPage.module.css";
+import VolunteerCard from "./VolunteerCard.jsx";
+import getAllUser from "../../utils/users/getAllUsers.js";
+import ToolBar from "../../components/ToolBar/ToolBar.jsx";
+import filter from "../../utils/filter.js";
+import getUserById from "../../utils/users/getUserById.js";
+
+
+function VolunteerPage() {
+    const [filters, setFilters] = useState({
+        alphabetical: "asc",
+        yearOrder: "desc",
+    });
+    const [users, setUsers] = useState([]);
+
+    useEffect(() => {
+        (async () => {
+            const ids = await getAllUser();
+            const usersData = await Promise.all(ids.map(id => getUserById(id)));
+            setUsers(usersData);
+        })()
+    }, [])
+
+  return (
+    <div className={styles.container}>
+        <ToolBar setFilters={setFilters} filters={filters}/>
+        <div className={styles.usersList}>
+            {filter(users, filters, "user").map((user, index) => (
+                <VolunteerCard key={index} user={user} />
+            ))}
+        </div>
+    </div>
+  );
+}
+
+export default VolunteerPage;

src/pages/Volunteers/VolunteersPage.module.css

@@ -0,0 +1,119 @@
+.container {
+    width: 100%;
+    position: relative;
+}
+
+.profileboard {
+    width: 80%;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    box-sizing: border-box;
+    margin: 1rem 0;
+    padding: 1rem 0.5rem;
+}
+
+.usersList{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.header h2 {
+    margin: 0;
+}
+
+
+.mainContent {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    flex: 1;
+}
+
+.basicInfo {
+    flex: 1;
+}
+
+.expandedContent {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+}
+
+.textInfo {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+
+.contactInfo {
+    margin-top: 10px;
+}
+
+.contactInfo p {
+    margin: 5px 0;
+}
+
+.bottomBar {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.profilePictureContainer {
+    width: 120px;
+    height: 120px;
+    margin-right: 20px;
+}
+
+.profilePicture {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+.expandButton {
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    background: transparent;
+    border: none;
+    font-size: 16px;
+}
+
+.moreButtonClicked {
+    rotate: 90deg;
+}
+
+@media screen and (min-width: 768px) {
+    .profilePictureContainer {
+        width: 150px;
+        height: 150px;
+    }
+}
+
+@media screen and (min-width: 1024px) {
+    .container {
+        padding: 20px;
+    }
+
+    .profileboard {
+        padding: 25px;
+    }
+
+    .profilePictureContainer {
+        width: 200px;
+        height: auto;
+    }
+}