Merge branch 'dev' into 'features/profile'

# Conflicts:
#   package-lock.json
#   src/index.css
#   src/router.js

public/sortByAlpha.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="m80-280 150-400h86l150 400h-82l-34-96H196l-32 96H80Zm140-164h104l-48-150h-6l-50 150Zm328 164v-76l202-252H556v-72h282v76L638-352h202v72H548ZM360-760l120-120 120 120H360ZM480-80 360-200h240L480-80Z"/></svg>

public/sortByAntiAlpha.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
+  <path d="M 480,-880 360,-760 H 600 Z M 360,-200 480,-80 600,-200 Z" />
+  <path d="M 71.679924,-674.40094 H 398.50264 v 60.67705 l -208.59362,252.3436 h 214.5832 v 75.7812 H 65.690344 v -60.67705 L 274.28397,-598.61973 H 71.679924 Z" />
+  <path d="M 769.04932,-356.43238 H 612.27858 l -24.73957,70.83329 H 486.75782 l 144.01033,-388.80185 h 119.53118 l 144.01033,388.80185 H 793.52847 Z m -131.77076,-72.13537 h 106.51035 l -53.12496,-154.68741 z" />
+</svg>

public/timerArrowDown.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M340-160q-125 0-212.5-87.5T40-460q0-125 87.5-212.5T340-760q52 0 98 16.5t84 45.5l42-42 56 56-42 42q29 38 45.5 84.5T640-460q0 125-87.5 212.5T340-160Zm440 0L640-300l56-56 44 44v-488h80v487l43-43 57 56-140 140ZM240-800v-80h200v80H240Zm100 560q92 0 156-64t64-156q0-92-64-156t-156-64q-92 0-156 64t-64 156q0 92 64 156t156 64Zm-40-180h80v-200h-80v200Zm40-40Z"/></svg>

public/timerArrowUp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M340-160q-125 0-212.5-87.5T40-460q0-125 87.5-212.5T340-760q52 0 98 16.5t84 45.5l42-42 56 56-42 42q29 38 45.5 84.5T640-460q0 125-87.5 212.5T340-160Zm400 0v-488l-44 44-56-56 140-140 140 140-57 56-43-43v487h-80ZM240-800v-80h200v80H240Zm100 560q92 0 156-64t64-156q0-92-64-156t-156-64q-92 0-156 64t-64 156q0 92 64 156t156 64Zm-40-180h80v-200h-80v200Zm40-40Z"/></svg>

src/components/Event/Event.jsx

@@ -0,0 +1,79 @@
+import styles from "./Event.module.css";
+import {useState, useEffect} from "react";
+import {Link} from "react-router";
+import Button from "/src/components/ui/button/button.jsx"
+
+function Event({event}){
+    const [eventMenu, seteventMenu] = useState(false);
+    const [windowSize, setWindowSize] = useState({
+        width: null,
+        height: null,
+    });
+
+    useEffect(() => {
+        function handleResize() {
+            setWindowSize({
+                width: window.innerWidth,
+                height: window.innerHeight,
+            });
+        }
+        window.addEventListener("resize", handleResize);
+        handleResize();
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+
+
+
+
+    return (
+        <div className={`${styles.eventContainer} glassCard`}>
+            <div className={styles.eventContainerTop}>
+                <div className={styles.eventContent}>
+                    <div className={`${styles.eventImageDiv}`}>
+                        {event.image == null ? (
+                            <img src="empty.png" className={styles.eventImage} alt="Pas de photo de l'événement" />
+                        ) : (
+                            <img src={event.image + `.png`} alt="Photo de l'événement" />
+                        )}
+                    </div>
+                    <div className={styles.eventInfos}>
+                        <p className={styles.eventTitle}>{event.name}</p>
+                        <p>{event.description}</p>
+                        <div className={eventMenu ? styles.eventMenuOpen : styles.eventMenuClose}>
+                            <ul>
+                                {event.tasks
+                                    .slice(0,5)
+                                    .map((task, index) => (
+                                        <li key={index}> - {task.name}</li>
+                                    ))}
+                                {event.tasks.length > 5 ? (
+                                    <li>...</li>
+                                ) : null}
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+                {windowSize.width > 768 ? (
+                    <div className={styles.eventButtons}>
+                        <button
+                            className={`${styles.moreButton} ${eventMenu ? styles.moreButtonClicked : ""}`}
+                            onClick={()=>{seteventMenu(!eventMenu)}}>
+                            {">"}
+                        </button>
+                    </div>
+                ) : null}
+            </div>
+            <div className={styles.eventContainerBottom}>
+            {(windowSize.width <= 768 || eventMenu) ? (
+                <Link
+                    to={`/event/` + event.id}
+                    className={styles.moreLink}>
+                    <Button>En savoir plus →</Button>
+                </Link>
+            ) : null}
+            </div>
+        </div>
+    )
+}
+
+export default Event;

src/components/Event/Event.module.css

@@ -0,0 +1,135 @@
+.eventContainer {
+    display: flex;
+    flex-direction: column;
+    margin: 1rem 0;
+    width: 80%;
+}
+
+.eventContainerTop {
+    display: flex;
+}
+
+.eventContainerBottom{
+    display: flex;
+    align-items: center;
+    justify-content: end;
+}
+
+.moreLink {
+    width: fit-content;
+}
+
+.eventImageDiv {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 1rem;
+    width: auto;
+    height: 6rem;
+    flex-shrink: 0;
+}
+
+.eventImage {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    border-radius: 20px;
+}
+
+
+.eventContent {
+    display: flex;
+}
+
+.eventTitle {
+    font-size: 2rem;
+}
+
+
+
+
+
+
+.eventButtons {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-end;
+    width: fit-content;
+    overflow: visible;
+}
+
+.eventButtons a {
+    white-space: nowrap;
+}
+
+
+
+
+.moreButton {
+    background: none;
+    border: none;
+    color: #019AFF;
+    font-size: 1.5rem;
+    transition: all 0.2s ease;
+    cursor: pointer;
+    border-radius: 50%;
+    width: 55px;
+    height: 55px;
+}
+
+.moreButton:hover {
+    font-size: 2rem;
+    background: rgba(191, 191, 191, 0.5);
+}
+
+.moreButton:focus {
+    outline: none;
+}
+.moreButton:focus-visible {
+    outline: 2px solid black;
+}
+
+.moreButtonClicked {
+    rotate: 90deg;
+}
+
+
+.eventMenuOpen {
+    display: flex;
+}
+
+.eventMenuClose {
+    display: none;
+}
+
+
+
+
+
+@media screen and (max-width: 768px) {
+    .eventImage {
+        width: 100%;
+        height: auto;
+        display: block;
+        object-fit: cover;
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+
+    .eventContainer{
+        padding: 0;
+    }
+
+    .eventImageDiv {
+        margin: 0;
+    }
+
+    .eventContent {
+        flex-direction: column;
+    }
+
+    .eventInfos, .eventContainerBottom {
+        padding: 10px;
+    }
+}

src/components/Filter/Filter.jsx

@@ -0,0 +1,61 @@
+import styles from "./Filter.module.css";
+
+function Filter({isFilterVisible, filters, setFilters}){
+    const setAlphabeticalOrder = (order) => {
+        setFilters(prev => ({
+            ...prev,
+            alphabetical : prev.alphabetical === order ? null : order
+        }));
+    };
+
+    const setYearOrder = (order) => {
+        setFilters(prev => ({
+            ...prev,
+            yearOrder: prev.yearOrder === order ? null : order
+        }));
+    };
+
+    return (
+        <div className={`${styles.filterContainer} ${isFilterVisible ? styles.filterOpen : styles.filterClose}`}>
+            <abbr title="Tri alphabétique croissant (A à Z)">
+                <button className={`${styles.filterTag} glassCard ${filters.alphabetical !== "asc" ? "" : styles.active}`}
+                        onClick={() => setAlphabeticalOrder("asc")}>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
+                        <path d="m80-280 150-400h86l150 400h-82l-34-96H196l-32 96H80Zm140-164h104l-48-150h-6l-50 150Zm328 164v-76l202-252H556v-72h282v76L638-352h202v72H548ZM360-760l120-120 120 120H360ZM480-80 360-200h240L480-80Z"/>
+                    </svg>
+                </button>
+            </abbr>
+
+            <abbr title="Tri alphabétique décroissant (Z à A)">
+                <button className={`${styles.filterTag} glassCard ${filters.alphabetical !== "desc" ? "" : styles.active}`}
+                        onClick={() => setAlphabeticalOrder("desc")}>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
+                        <path d="M 480,-880 360,-760 H 600 Z M 360,-200 480,-80 600,-200 Z" />
+                        <path d="M 71.679924,-674.40094 H 398.50264 v 60.67705 l -208.59362,252.3436 h 214.5832 v 75.7812 H 65.690344 v -60.67705 L 274.28397,-598.61973 H 71.679924 Z" />
+                        <path d="M 769.04932,-356.43238 H 612.27858 l -24.73957,70.83329 H 486.75782 l 144.01033,-388.80185 h 119.53118 l 144.01033,388.80185 H 793.52847 Z m -131.77076,-72.13537 h 106.51035 l -53.12496,-154.68741 z" />
+                    </svg>
+                </button>
+            </abbr>
+
+            <abbr title="Tri chronologique croissant (du plus ancien au plus récent)">
+                <button className={`${styles.filterTag} glassCard ${filters.yearOrder !== "asc" ? "" : styles.active}`}
+                        onClick={() => setYearOrder("asc")}>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
+                        <path d="M340-160q-125 0-212.5-87.5T40-460q0-125 87.5-212.5T340-760q52 0 98 16.5t84 45.5l42-42 56 56-42 42q29 38 45.5 84.5T640-460q0 125-87.5 212.5T340-160Zm400 0v-488l-44 44-56-56 140-140 140 140-57 56-43-43v487h-80ZM240-800v-80h200v80H240Zm100 560q92 0 156-64t64-156q0-92-64-156t-156-64q-92 0-156 64t-64 156q0 92 64 156t156 64Zm-40-180h80v-200h-80v200Zm40-40Z"/>
+                    </svg>
+                </button>
+            </abbr>
+
+            <abbr title="Tri chronologique décroissant (du plus récent au plus ancien)">
+                <button className={`${styles.filterTag} glassCard ${filters.yearOrder !== "desc" ? "" : styles.active}`}
+                        onClick={() => setYearOrder("desc")}>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
+                        <path d="M340-160q-125 0-212.5-87.5T40-460q0-125 87.5-212.5T340-760q52 0 98 16.5t84 45.5l42-42 56 56-42 42q29 38 45.5 84.5T640-460q0 125-87.5 212.5T340-160Zm440 0L640-300l56-56 44 44v-488h80v487l43-43 57 56-140 140ZM240-800v-80h200v80H240Zm100 560q92 0 156-64t64-156q0-92-64-156t-156-64q-92 0-156 64t-64 156q0 92 64 156t156 64Zm-40-180h80v-200h-80v200Zm40-40Z"/>
+                    </svg>
+                </button>
+            </abbr>
+        </div>
+    )
+}
+
+export default Filter;

src/components/Filter/Filter.module.css

@@ -0,0 +1,85 @@
+.filterContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    overflow: hidden;
+    max-height: 0;
+    opacity: 0;
+    transition: max-height 0.5s ease, opacity 0.8s ease, transform 0.5s ease;
+}
+
+.filterOpen {
+    max-height: 200px;
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.filterClose{
+    max-height: 200px;
+    opacity: 0;
+}
+
+
+.filterTag {
+    border: none;
+    background: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    width: 45px;
+    height: 45px;
+}
+
+
+.filterTag:focus {
+    outline: none;
+}
+.filterTag:focus-visible {
+    outline: 2px solid black;
+}
+
+.filterTag:hover {
+    cursor: pointer;
+    svg{
+        fill: #019AFF;
+    }
+}
+
+
+.filterTag svg {
+    transform: scale(1);
+    color: black;
+}
+
+
+.active {
+    border: 1px solid #019AFF;
+}
+
+.active svg {
+    fill: #019AFF;
+    transform: scale(1);
+}
+
+@media screen and (max-width: 768px){
+    .filterContainer {
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+
+    .filterOpen{
+        display: flex;
+    }
+    .filterClose{
+        display: none;
+    }
+
+    .filterMenu {
+        width: 100%;
+    }
+
+    abbr {
+        width: fit-content;
+    }
+}

src/components/Header/Header.jsx

@@ -1,20 +1,24 @@
 import styles from "./Header.module.css"
 import { Link, NavLink } from "react-router";
 import { useEffect, useRef, useState } from "react";
+import getUserNotifications from "../../utils/getUserNotifications.js";
 
 function Header() {
     const [notificationMenu, setnotificationMenu] = useState(false);
     const [unreadNotification, setunreadNotification] = useState(true);
     const [mobileMenu, setMobileMenu] = useState(false);
+    const [notifications, setNotifications] = useState([]);
     const notificationRef = useRef(null);
 
-    const [notifications, setNotifications] = useState([
+
-        "Vous avez un nouveau message !",
-        "Jean Paul est en attente de validation !",
-        "Vous avez un nouveau message !"
-    ]);
 
     useEffect(() => {
+        async function loadNotifications() {
+            const notifData = await getUserNotifications();
+            setNotifications(notifData || []);
+        }
+
+        loadNotifications();
         const handleClickOutside = (event) => {
             if (
                 notificationRef.current &&
@@ -37,7 +41,7 @@ function Header() {
                 <nav className={`${mobileMenu ? styles.inactiveHeaderContent : styles.activeHeaderContent}`}>
                     <div className={styles.headerLeftContent}>
                         <NavLink className={styles.logoLink} to="/">
-                            <img src="/src/assets/logo.png" alt="logo" className={styles.logo} />
+                            <img src="logo.png" alt="logo" className={styles.logo} />
                         </NavLink>
                         <div className={styles.navLinks}>
                             <NavLink to="/" className={({ isActive }) => isActive ? styles.activeLink : styles.link}>
@@ -109,7 +113,7 @@ function Header() {
                 ) : (
                     notifications.map((notification, index) => (
                         <div className={styles.notification} key={index}>
-                            <p>{notification}</p>
+                            <p>{notification.content}</p>
                             <button
                                 className={styles.closeBtn}
                                 onClick={() => setNotifications(prev => prev.filter((_, i) => i !== index))}

src/components/Header/Header.module.css

@@ -179,7 +179,7 @@ svg {
     opacity: 0;
     transform: translateY(-10px);
     transition: opacity 0.3s ease, transform 0.3s ease;
-    z-index: 1;
+    z-index: 0;
 }
 
 .activeNotificationDiv {

src/index.css

@@ -10,9 +10,6 @@
   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
- /* color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;*/
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -20,25 +17,17 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-
 @media screen and (max-width: 768px) {
   .content{
     padding: 0.7rem;
     z-index:1;
   }
 }
-
+.content {
-@media screen and (min-width: 1000px) {
+  padding: 1.5rem;
-  .content{
+  z-index: 1;
-    padding: 1.1rem;
-    z-index:1;
-  }
 }
 
-
-
-
-
 a {
   font-weight: 500;
   color: #646cff;
@@ -57,7 +46,7 @@ body {
 
 .glassCard {
   width: 100%;
-  padding: 10px 20px 10px 20px;
+  padding: 10px;
   height: fit-content;
   background: rgba(255, 255, 255, 0.65);
   backdrop-filter: blur(3px);

src/pages/Events/EventsPage.jsx

@@ -0,0 +1,251 @@
+import {useState} from "react";
+import Event from "../../components/Event/Event.jsx";
+import {Link} from "react-router";
+import styles from "./EventsPage.module.css";
+import Filter from "../../components/Filter/Filter.jsx";
+
+
+
+function EventsPage(){
+    const [isFilterVisible, setIsFilterVisible] = useState(false);
+    const toggleFilters = () => {
+        setIsFilterVisible(prev => !prev);
+    };
+
+    const [filters, setFilters] = useState({
+        alphabetical: "asc",
+        yearOrder: "asc",
+    });
+
+    const [events] = useState([
+        {
+            id: 1,
+            name: "Marathon de la Ville",
+            description: "Participez au marathon annuel et soutenez les associations locales.",
+            image: null,
+            tasks: [
+                {
+                    name: "Inscription des participants",
+                    start: "2018-09-24 22:21:20",
+                    end: "2018-09-24 22:21:20",
+                    place: "Centre sportif",
+                    description: "Accueillir et enregistrer tous les coureurs.",
+                    volunteers_count: 5
+                },
+                {
+                    name: "Distribution des dossards",
+                    start: "2018-09-24 22:21:20",
+                    end: "2018-09-24 22:21:20",
+                    place: "Salle principale",
+                    description: "Remettre les dossards et goodies aux participants.",
+                    volunteers_count: 3
+                },
+            ]
+        },
+        {
+            id: 2,
+            name: "Festival de Musique d’Été",
+            description: "Un week-end de concerts en plein air avec des artistes locaux et internationaux.",
+            image: null,
+            tasks: [
+                {
+                    name: "Montage de la scène",
+                    start: "2018-09-24 22:21:20",
+                    end: "2018-09-24 22:21:20",
+                    place: "Parc central",
+                    description: "Installer la scène, les éclairages et le son.",
+                    volunteers_count: 6
+                },
+                {
+                    name: "Accueil du public",
+                    start: "2018-09-24 22:21:20",
+                    end: "2018-09-24 22:21:20",
+                    place: "Entrée principale",
+                    description: "Vérifier les billets et orienter les visiteurs.",
+                    volunteers_count: 4
+                },
+            ]
+        },
+        {
+            id: 3,
+            name: "Conférence Tech Innovante",
+            description: "Journée de conférences et workshops autour des nouvelles technologies.",
+            image: null,
+            tasks: [
+                {
+                    name: "Préparation des salles",
+                    start: "2018-09-24 22:21:20",
+                    end: "2018-09-24 22:21:20",
+                    place: "Campus Tech",
+                    description: "Installer les chaises, projecteurs et matériel pour les conférences.",
+                    volunteers_count: 4
+                },
+                {
+                    name: "Accueil des intervenants",
+                    start: "2018-09-24 22:21:20",
+                    end: "2018-09-24 22:21:20",
+                    place: "Hall principal",
+                    description: "Assister les speakers et orienter vers les salles.",
+                    volunteers_count: 2
+                },
+                {
+                    name: "Gestion du buffet",
+                    start: "2018-09-24 22:21:20",
+                    end: "2018-09-24 22:21:20",
+                    place: "Salle de restauration",
+                    description: "Distribuer boissons et repas aux participants.",
+                    volunteers_count: 3
+                },
+            ]
+        },
+        {
+            id: 4,
+            name: "Atelier de Jardinage Urbain",
+            description: "Apprenez à cultiver vos plantes en ville et participez à la création de jardins partagés.",
+            image: null,
+            tasks: [
+                {
+                    name: "Installation du matériel",
+                    start: "2018-09-24 22:21:20",
+                    end: "2018-09-24 22:21:20",
+                    place: "Jardin partagé",
+                    description: "Préparer outils et terreaux pour les participants.",
+                    volunteers_count: 2
+                },
+                {
+                    name: "Encadrement des participants",
+                    start: "2018-09-24 22:21:20",
+                    end: "2018-09-24 22:21:20",
+                    place: "Jardin partagé",
+                    description: "Aider et conseiller sur la plantation et l’entretien.",
+                    volunteers_count: 3
+                },
+            ]
+        },
+        {
+            id: 5,
+            name: "Collecte de Sang",
+            description: "Aidez à sauver des vies en participant à notre collecte de sang annuelle.",
+            image: null,
+            tasks: [
+                {
+                    name: "Accueil et enregistrement",
+                    start: "2020-09-24 22:21:20",
+                    end: "2020-09-24 22:21:20",
+                    place: "Salle municipale",
+                    description: "Enregistrer les donneurs et expliquer le processus.",
+                    volunteers_count: 4
+                },
+                {
+                    name: "Préparation des salles",
+                    start: "2018-09-24 22:21:20",
+                    end: "2018-09-24 22:21:20",
+                    place: "Salle municipale",
+                    description: "Installer les lits, tables et matériel médical.",
+                    volunteers_count: 3
+                },
+                {
+                    name: "Assistance post-don",
+                    start: "2018-09-24 22:21:20",
+                    end: "2018-09-24 22:21:20",
+                    place: "Salle municipale",
+                    description: "Accompagner les donneurs après le don et proposer des rafraîchissements.",
+                    volunteers_count: 2
+                },
+                {
+                    name: "Accueil et enregistrement",
+                    start: "2020-09-24 22:21:20",
+                    end: "2020-09-24 22:21:20",
+                    place: "Salle municipale",
+                    description: "Enregistrer les donneurs et expliquer le processus.",
+                    volunteers_count: 4
+                },
+                {
+                    name: "Préparation des salles",
+                    start: "2018-09-24 22:21:20",
+                    end: "2018-09-24 22:21:20",
+                    place: "Salle municipale",
+                    description: "Installer les lits, tables et matériel médical.",
+                    volunteers_count: 3
+                },
+                {
+                    name: "Assistance post-don",
+                    start: "2018-09-24 22:21:20",
+                    end: "2018-09-24 22:21:20",
+                    place: "Salle municipale",
+                    description: "Accompagner les donneurs après le don et proposer des rafraîchissements.",
+                    volunteers_count: 2
+                },
+            ]
+        },
+    ]);
+
+    const compareDate = (dateA, dateB) => {
+        const dA = new Date(dateA);
+        const dB = new Date(dateB);
+
+        if (filters.yearOrder === "asc") {
+            return dB - dA;
+        } else {
+            return dA - dB;
+        }
+    };
+
+    const sortedEvents = [...events].sort((a, b) => {
+        const sortedATasks = a.tasks.sort((taskA, taskB) =>
+            compareDate(taskA.start, taskB.start)
+        );
+        const sortedBTasks = b.tasks.sort((taskA, taskB) =>
+            compareDate(taskA.start, taskB.start)
+        );
+
+        const timeComparison = compareDate(
+            sortedATasks[0].start,
+            sortedBTasks[0].start
+        );
+
+        if (timeComparison !== 0) {
+            return timeComparison;
+        }
+
+        if (filters.alphabetical !== null) {
+            return filters.alphabetical === "asc"
+                ? a.name.localeCompare(b.name)
+                : b.name.localeCompare(a.name);
+        }
+
+        return 0;
+    });
+
+
+
+
+    return (
+        <div className={styles.eventsContainer}>
+            <div className={styles.eventsButtons}>
+                <Link
+                    to="/event/create"
+                    className={`${styles.createButton} glassCard`}>
+                    +
+                </Link>
+                <div className={`${styles.filterContainer} ${isFilterVisible ? "glassCard" : ""}`}>
+                    <button className={`${isFilterVisible ? "" : styles.mobileFilter} ${styles.sortButton} glassCard`} onClick={toggleFilters}>
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
+                            <path d="M440-160q-17 0-28.5-11.5T400-200v-240L168-736q-15-20-4.5-42t36.5-22h560q26 0 36.5 22t-4.5 42L560-440v240q0 17-11.5 28.5T520-160h-80Zm40-308 198-252H282l198 252Zm0 0Z"/>
+                        </svg>
+                    </button>
+                    <div className={styles.filterMenu}>
+                        <Filter isFilterVisible={isFilterVisible} filters={filters} setFilters={setFilters}/>
+                    </div>
+                </div>
+            </div>
+            <div className={styles.eventsList}>
+                {sortedEvents.map((event, index) => (
+                    <Event key={index} event={event} />
+                ))}
+            </div>
+        </div>
+    )
+}
+
+export default EventsPage;

src/pages/Events/EventsPage.module.css

@@ -0,0 +1,99 @@
+.eventsContainer {
+    width: 100%;
+}
+
+
+.eventsList{
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+.eventsButtons {
+    overflow: visible;
+    position: fixed;
+    top: 10rem;
+    right: 2rem;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    width: fit-content;
+    height: fit-content;
+    gap: 1rem;
+}
+
+
+.filterContainer{
+    padding: 0;
+    border-radius: 30px;
+    overflow: visible;
+}
+
+.filterMenu{
+    padding: 5px 5px 5px 5px;
+}
+
+
+.createButton, .sortButton {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    border-radius: 50%;
+    width: 55px;
+    height: 55px;
+    transition: all 0.5s ease;
+}
+
+.createButton {
+    font-size: 2rem;
+    color: #019AFF;
+}
+
+.sortButton svg {
+    transform: scale(0.8);
+    fill: #019AFF;
+}
+
+.sortButton:hover {
+    cursor: pointer;
+}
+
+.createButton:hover, .mobileFilter:hover {
+    transform: translateY(-5px);
+}
+
+
+.sortButton:focus {
+    outline: none;
+}
+.sortButton:focus-visible {
+    outline: 2px solid black;
+}
+
+
+@media screen and (max-width: 768px) {
+    .eventsButtons {
+        flex-direction: row;
+        position: relative;
+        top: 0;
+        right: 0;
+        align-items: flex-start;
+        width: 100%;
+        margin-top: 16px;
+    }
+
+    .filterContainer{
+        display: flex;
+        width: fit-content;
+    }
+
+    .filterMenu{
+        width: fit-content;
+    }
+
+    .createButton:hover, .mobileFilter:hover {
+        transform: none !important;
+    }
+}
+

src/router.js

@@ -3,6 +3,8 @@ import Layout from "./layout.jsx";
 import HomePage from "./pages/Home/HomePage";
 import LoginPage from "./pages/Login/LoginPage";
 import ProfilePage from "./pages/Profile/ProfilePage";
+import EventsPage from "./pages/Events/EventsPage.jsx";
+
 
 const router = createBrowserRouter([
     {
@@ -20,6 +22,10 @@ const router = createBrowserRouter([
             {
                 path:"/profile",
                 Component:ProfilePage,
+            },
+            {
+                path: "/events",
+                Component: EventsPage,
             }
         ]
     }

src/stories/Button.stories.jsx

@@ -2,25 +2,38 @@ import { fn } from 'storybook/test';
 
 import Button from '../components/ui/button/button.jsx';
 
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+
 export default {
   title: 'UI/Button',
   component: Button,
   parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: 'centered',
   },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
   argTypes: {
-    backgroundColor: { control: 'color' },
+      children: {
+          control: "text",
+          description: "Texte/Composant à afficher dans le bouton",
+      },
+      variant: {
+          control: { type: 'select' },
+          options: ["primary", "default", "danger", "transparent"],
+          description: "Style du bouton"
+      },
+      onClick: {
+          control: "function",
+          description: "Fonction appelée lors du clique du bouton",
+      }
+  },
+
+  args: {
+      children: "Button",
+      variant: "Primary",
+      onClick: fn()
+
   },
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#story-args
-  args: { onClick: fn() },
 };
 
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Primary = {
     args: {
       children: "Button",
@@ -52,3 +65,11 @@ export const Danger = {
         onClick: fn(),
     },
 };
+
+export const Icon = {
+    args: {
+        children: <img src={"/src/assets/person.svg"} alt="icon" />,
+        variant: 'transparent',
+        onClick: fn(),
+    }
+}

src/utils/getUserNotifications.js

@@ -0,0 +1,21 @@
+export default async function getUserNotifications() {
+    try {
+        const response = await fetch(
+            'http://localhost:8000/api/users/1/notifications',
+            {
+                method: 'GET',
+                credentials: 'include',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Accept': 'application/json'
+                }
+            }
+        );
+        const data = await response.json();
+        return data.data;
+
+    } catch (err) {
+        console.error("Erreur :", err);
+        return null;
+    }
+}

src/utils/login.js

@@ -4,7 +4,7 @@ export default async function login(email, password) {
     const csrfToken = await getXSRFToken();
 
 
-    await fetch('http://localhost:8000/api/login', {
+    await fetch('http://localhost:8000/api/users/login', {
         method: 'POST',
         credentials: 'include',
         headers: {

vite.config.js

@@ -11,28 +11,29 @@ const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(file
 
 // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
 export default defineConfig({
-  plugins: [react()],
+    plugins: [react()],
-  test: {
+    base: '/',
-    projects: [{
+    test: {
-      extends: true,
+        projects: [{
-      plugins: [
+            extends: true,
-      // The plugin will run tests for the stories defined in your Storybook config
+            plugins: [
-      // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+                // The plugin will run tests for the stories defined in your Storybook config
-      storybookTest({
+                // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-        configDir: path.join(dirname, '.storybook')
+                storybookTest({
-      })],
+                    configDir: path.join(dirname, '.storybook')
-      test: {
+                })],
-        name: 'storybook',
+            test: {
-        browser: {
+                name: 'storybook',
-          enabled: true,
+                browser: {
-          headless: true,
+                    enabled: true,
-          provider: playwright({}),
+                    headless: true,
-          instances: [{
+                    provider: playwright({}),
-            browser: 'chromium'
+                    instances: [{
-          }]
+                        browser: 'chromium'
-        },
+                    }]
-        setupFiles: ['.storybook/vitest.setup.js']
+                },
-      }
+                setupFiles: ['.storybook/vitest.setup.js']
-    }]
+            }
-  }
+        }]
+    }
 });