Merge branch 'dev' into features/adminImplement

src/components/Filter/Filter.jsx

@@ -1,4 +1,5 @@
 import styles from "./Filter.module.css";
+import Button from "../ui/button/button.jsx"
 
 function Filter({isFilterVisible, filters, setFilters}){
     const setAlphabeticalOrder = (order) => {
@@ -18,31 +19,35 @@ function Filter({isFilterVisible, filters, setFilters}){
     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}`}
+                <Button className={`${styles.filterTag} glassCard ${filters.alphabetical !== "asc" ? "" : styles.active}`}
+                        variant={"default"}
                         onClick={() => setAlphabeticalOrder("asc")}>
                     <img src={"sortByAlpha.svg"} alt="Tri alphabétique croissant (A à Z)"/>
-                </button>
+                </Button>
             </abbr>
 
             <abbr title="Tri alphabétique décroissant (Z à A)">
-                <button className={`${styles.filterTag} glassCard ${filters.alphabetical !== "desc" ? "" : styles.active}`}
+                <Button className={`${styles.filterTag} glassCard ${filters.alphabetical !== "desc" ? "" : styles.active}`}
+                        variant={"default"}
                         onClick={() => setAlphabeticalOrder("desc")}>
                     <img src={"sortByAntiAlpha.svg"} alt="Tri alphabétique décroissant (Z à A)"/>
-                </button>
+                </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}`}
+                <Button className={`${styles.filterTag} glassCard ${filters.yearOrder !== "desc" ? "" : styles.active}`}
+                        variant={"default"}
                         onClick={() => setYearOrder("desc")}>
                     <img src={"timerArrowUp.svg"} alt="Tri chronologique décroissant (du plus récent au plus ancien)"/>
-                </button>
+                </Button>
             </abbr>
 
             <abbr title="Tri chronologique croissant (du plus ancien au plus récent)">
-                <button className={`${styles.filterTag} glassCard ${filters.yearOrder !== "asc" ? "" : styles.active}`}
+                <Button className={`${styles.filterTag} glassCard ${filters.yearOrder !== "asc" ? "" : styles.active}`}
+                        variant={"default"}
                         onClick={() => setYearOrder("asc")}>
                     <img src={"timerArrowDown.svg"} alt="Tri chronologique croissant (du plus ancien au plus récent)"/>
-                </button>
+                </Button>
             </abbr>
         </div>
     )

src/components/Header/Header.jsx

@@ -1,26 +1,59 @@
-import styles from "./Header.module.css"
 import { Link, NavLink } from "react-router";
 import {useContext, useEffect, useRef, useState} from "react";
-import getUserNotifications from "../../utils/getUserNotifications.js";
+
 import {AuthContext} from "../../contexts/auth/AuthContext.js";
 
+import styles from "./Header.module.css"
+
+import getUserNotifications from "../../utils/notifications/getUserNotifications.js";
+import deleteNotificationUser from "../../utils/notifications/deleteNotificationUser.js";
+import initEcho from "../../utils/echo/initEcho.js"
+import readNotifications from "../../utils/notifications/readNotifications.js";
+import getUser from "../../utils/getUser.js";
+import { userCreatedListener } from "../../utils/echo/listeners/userCreatedListener";
+import { userNotificationsListener } from "../../utils/echo/listeners/userNotificationsListener.js";
+import NotificationCard from "../NotificationCard/NotificationCard.jsx";
+
 function Header() {
+    const { update, user } = useContext(AuthContext);
     const [notificationMenu, setnotificationMenu] = useState(false);
-    const [unreadNotification, setunreadNotification] = useState(true);
+    const [unreadNotification, setunreadNotification] = useState(false);
     const [mobileMenu, setMobileMenu] = useState(false);
-    const [notifications, setNotifications] = useState([{"content" : "ok"}, {"content" : "pourquoi pas antoine"}]);
+    const [notifications, setNotifications] = useState([]);
     const notificationRef = useRef(null);
 
-    const { user } = useContext(AuthContext);
-
-
     useEffect(() => {
-        async function loadNotifications() {
-            const notifData = await getUserNotifications();
-            setNotifications(notifData || []);
+        let echoInstance = null;
+        let channelsToLeave = [];
+
+        async function initializeHeader() {
+            try {
+                const [userData, notifData] = await Promise.all([
+                    getUser(),
+                    getUserNotifications()
+                ]);
+
+                const data = notifData || [];
+                setNotifications(data);
+                const hasUnread = data.some(n => n.pivot && n.pivot.unread === 1);
+                setunreadNotification(hasUnread);
+
+                const echo = initEcho();
+                echoInstance = echo;
+
+                const activeChannels = [
+                    userCreatedListener(echo, userData, setNotifications, setunreadNotification),
+                    userNotificationsListener(echo, userData, setNotifications, setunreadNotification),
+                ];
+                channelsToLeave = activeChannels.filter(name => name !== null);
+
+            } catch (err) {
+                console.error("Erreur initialisation Header:", err);
+            }
         }
 
-        //loadNotifications();
+        initializeHeader();
+
         const handleClickOutside = (event) => {
             if (
                 notificationRef.current &&
@@ -32,11 +65,48 @@ function Header() {
         };
 
         document.addEventListener("mousedown", handleClickOutside);
+
         return () => {
             document.removeEventListener("mousedown", handleClickOutside);
+            if (echoInstance) {
+                channelsToLeave.forEach(chan => echoInstance.leave(chan));
+            }
         };
     }, []);
 
+
+
+    const toggleNotificationMenu = async () => {
+        try {
+            setnotificationMenu(!notificationMenu);
+            if (unreadNotification) {
+                const result = await readNotifications();
+                if (result) {
+                    setunreadNotification(false);
+                    update();
+                }
+            }
+        } catch (err) {
+            console.error('Erreur suppression notification :', err);
+        }
+    }
+
+
+    async function deleteNotification(notificationId) {
+        try {
+            const result = await deleteNotificationUser(notificationId);
+            if (result) {
+                setNotifications(prev => prev.filter(n => n.id !== notificationId));
+                update();
+            }
+        } catch (err) {
+            console.error('Erreur suppression notification :', err);
+        }
+    }
+
+
+
+
     return (
         <div className={styles.headerContainer}>
             <header className={`${styles.header} glassCard`}>
@@ -66,10 +136,7 @@ function Header() {
                     <div className={styles.headerRightContent}>
                         <button
                             className={`${styles.bellBtn} ${notificationMenu ? styles.activeBellBtn : ""}`}
-                            onClick={() => {
-                                setnotificationMenu(!notificationMenu);
-                                setunreadNotification(false);
-                            }}
+                            onClick={() => {toggleNotificationMenu();}}
                         >
                             <img className={styles.notificationsImg} src="/bell.svg" alt="notifications"/>
                             {unreadNotification && <span className={styles.notificationBadge}></span>}
@@ -119,17 +186,7 @@ function Header() {
                 {notifications.length === 0 ? (
                     <p className={styles.notification}>Vous n'avez aucune notification !</p>
                 ) : (
-                    notifications.map((notification, index) => (
-                        <div className={styles.notification} key={index}>
-                            <p>{notification.content}</p>
-                            <button
-                                className={styles.closeBtn}
-                                onClick={() => setNotifications(prev => prev.filter((_, i) => i !== index))}
-                            >
-                                <img src="/close.svg" alt="supprimer la notification"/>
-                            </button>
-                        </div>
-                    ))
+                    <NotificationCard notifications={notifications} deleteNotification={deleteNotification} />
                 )}
             </div>
         </div>

src/components/Header/Header.module.css

@@ -150,13 +150,16 @@
 
 .notificationDiv {
     position: absolute;
-    width: 250px;
+    width: 300px;
     top: 105%;
     right: 2rem;
     opacity: 0;
     transform: translateY(-10px);
     transition: opacity 0.3s ease, transform 0.3s ease;
     z-index: 0;
+    max-height: 60vh;
+    overflow: scroll;
+    scrollbar-width: none;
 }
 
 .activeNotificationDiv {
@@ -183,16 +186,6 @@
     border-radius: 50%;
 }
 
-.closeBtn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    cursor: pointer;
-    background: none;
-    margin: 0;
-    width: fit-content;
-}
 
 .closeBtn:focus {
     outline: none;

src/components/IncompleteEvent/IncompleteEvent.module.css

@@ -23,7 +23,6 @@
   min-height: 250px;
   max-height: 250px;
   overflow-y: auto;
-  padding: 10px;
   text-align: center;
   box-sizing: border-box;
   opacity: 0;

src/components/NotificationCard/NotificationCard.jsx

@@ -0,0 +1,34 @@
+import formatDate from "../../utils/date/formatDate.js";
+import formatTime from "../../utils/date/formatTime.js";
+
+import styles from "./NotificationCard.module.css"
+
+
+function NotificationCard({notifications, deleteNotification}) {
+    return (
+        notifications.map((notification, index) => (
+            <div className={styles.notificationCard} key={index}>
+                <div className={styles.cardHeader}>
+                    <span className={styles.timeTag}>
+                        Le {formatDate(notification.created_at)} à {formatTime(notification.created_at)}
+                    </span>
+                    <button
+                        className={styles.closeIconButton}
+                        onClick={() => deleteNotification(notification.id)}
+                        title="Supprimer"
+                    >
+                        ✕
+                    </button>
+                </div>
+
+                <div className={styles.cardContent}>
+                    <p className={styles.message}>
+                        {notification.content}
+                    </p>
+                </div>
+            </div>
+        ))
+    );
+}
+
+export default NotificationCard;

src/components/NotificationCard/NotificationCard.module.css

@@ -0,0 +1,44 @@
+.notificationCard {
+    padding: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+    transition: background 0.2s ease;
+}
+
+.cardHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.timeTag {
+    color: #019AFF;
+    letter-spacing: 0.2px;
+}
+
+.message {
+    margin: 0;
+    font-size: 1.1rem;
+    line-height: 1.5;
+    color: #2c3e50;
+    font-weight: 400;
+}
+
+.closeIconButton {
+    background: none;
+    border: none;
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    font-size: 1.1rem;
+    color: #2c3e50;
+}
+
+.closeIconButton:hover {
+    color: #cc0000;
+}

src/components/SearchBar/SearchBar.jsx

@@ -1,8 +1,8 @@
 import styles from "./SearchBar.module.css"
 import {Link} from "react-router";
 import {useEffect, useState} from "react";
-import searchEvents from "../../utils/searchEvents.js";
-import searchUsers from "../../utils/searchUsers.js";
+import searchEvents from "../../utils/events/searchEvents.js";
+import searchUsers from "../../utils/users/searchUsers.js";
 import { useLocation } from "react-router";
 
 

src/components/Task/Task.jsx

@@ -1,5 +1,5 @@
 import React, {useEffect, useState} from "react";
-import getEventById from "../../utils/event/getEventById.js";
+import getEventById from "../../utils/events/getEventById.js";
 import styles from "./Task.module.css";
 import formatDate from "../../utils/date/formatDate.js";
 

src/components/ToolBar/ToolBar.jsx

@@ -3,6 +3,7 @@ import Filter from "../Filter/Filter.jsx";
 import {useEffect, useState} from "react";
 import SearchBar from "../SearchBar/SearchBar.jsx";
 import CreateEventBtn from "../createEventBtn/CreateEventBtn.jsx";
+import Button from "../ui/button/button.jsx";
 
 
 function ToolBar({setFilters, filters, showCreate = true}) {
@@ -40,14 +41,14 @@ function ToolBar({setFilters, filters, showCreate = true}) {
                     <CreateEventBtn />
                 ) : null}
 
-                <button className={`${styles.searchButton} glassCard`} onClick={() => setIsSearchVisible(true)}>
+                <Button className={`${styles.searchButton} glassCard`} variant={"default"} onClick={() => setIsSearchVisible(true)}>
                     <img src="search.svg" alt="Rechercher"/>
-                </button>
+                </Button>
 
                 <div className={`${styles.filterContainer} ${isFilterVisible ? "glassCard" : ""}`}>
-                    <button className={`${isFilterVisible ? "" : styles.mobileFilter} ${styles.sortButton} glassCard`} onClick={toggleFilters}>
+                    <Button className={`${isFilterVisible ? "" : styles.mobileFilter} ${styles.sortButton} glassCard`} variant={"default"} onClick={toggleFilters}>
                         <img src="filter.svg" alt="Filtrer"/>
-                    </button>
+                    </Button>
                     <div className={styles.filterMenu}>
                         <Filter isFilterVisible={isFilterVisible} filters={filters} setFilters={setFilters}/>
                     </div>

src/components/background/background.module.css

@@ -1,4 +1,3 @@
-/* BACKGROUND ////////////////////////////////////////////////////////*/
 .backgroundContainer {
   z-index: 0;
   margin: 0;

src/components/createEventBtn/CreateEventBtn.jsx

@@ -3,7 +3,7 @@ import { useState } from "react";
 import Modal from "../ui/modal/modal.jsx";
 import Button from "../ui/button/button.jsx";
 import TextInput from "../ui/input/input.jsx";
-import createEvent from "../../utils/event/createEvent.js"
+import createEvent from "../../utils/events/createEvent.js"
 
 
 export default function CreateEventBtn() {
@@ -11,10 +11,15 @@ export default function CreateEventBtn() {
     const [isOpen, setIsOpen] = useState(false);
     const [name, setName] = useState("");
     const [description, setDescription] = useState("");
+    const [start, setStart] = useState("");
+    const [end, setEnd] = useState("");
 
     const handleCreateEvent = async () => {
 
-        if(name !== "" || description !== "") await createEvent(name, description);
+        if(name !== "" || description !== "" || start !== "" || end !== "") {
+            await createEvent(name, description, start, end);
+            console.log(start);
+        }
         setIsOpen(false);
     }
 
@@ -26,16 +31,29 @@ export default function CreateEventBtn() {
             <section className={styles.section}>
                 <div className={styles.inputContainer}>
                     <h2>Titre</h2>
-                    <TextInput placeholder={"Nom de l'événement"} value={name} onChange={e => setName(e.target.value)} />
+                    <TextInput className={styles.input} placeholder={"Nom de l'événement"} value={name} onChange={e => setName(e.target.value)} />
                 </div>
 
                 <div className={styles.inputContainer}>
                     <h2>Description</h2>
-                    <TextInput placeholder={"Description de l'événement"} value={description} onChange={e => setDescription(e.target.value)} />
+                    <TextInput className={styles.input} placeholder={"Description de l'événement"} value={description} onChange={e => setDescription(e.target.value)} />
+                </div>
+
+                <div className={styles.inputContainer}>
+                    <h2>Date</h2>
+                    <div className={styles.dateInputContainer}>
+                        <div className={styles.dateInput}>
+                            <p>Début</p>
+                            <TextInput type={"datetime-local"} value={start} onChange={e => setStart(e.target.value)} />
+                        </div>
+                        <div className={styles.dateInput}>
+                            <p>Fin</p>
+                            <TextInput type={"datetime-local"} value={end} onChange={e => setEnd(e.target.value)} />
+                        </div>
+                    </div>
                 </div>
 
                 <Button onClick={handleCreateEvent} className={styles.create}>Créer</Button>
-
             </section>
         </Modal>
     </>

src/components/createEventBtn/createEventBtn.module.css

@@ -26,6 +26,14 @@
     }
 
     margin: 1em;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.input {
+    width: 70%;
 }
 
 .create {
@@ -38,4 +46,14 @@
     gap: 10px;
     margin-top: 15px;
     margin-bottom: 15px;
+}
+
+.dateInputContainer {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+}
+
+.dateInput {
+ margin: 1em;
 }

src/components/homePage/calendar.jsx

@@ -1,30 +1,39 @@
-import {useState} from "react";
+import { useState, useMemo, useEffect } from "react";
 import styles from "./calendar.module.css";
-import formatDateLetter from "../../utils/date/formatDateLetter.js";
+import { formatDateLetterJS } from "../../utils/date/formatDateLetter.js";
+
+function Calendar({ events = [] }) {
 
-function Calendar() {
-    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"],
-        "2025-11-15": ["Sortie cinéma"],
-        "2025-11-17": ["Sortie cinéma"],
-    };
     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 [currentYear] = useState(today.getFullYear());
+    const [selectedDay, setSelectedDay] = useState(null);
+
+    const eventsByDate = useMemo(() => {
+        return events.reduce((acc, ev) => {
+            if (!ev?.start) return acc;
+
+            const dateKey = ev.start.split(" ")[0]; // YYYY-MM-DD
+            if (!acc[dateKey]) acc[dateKey] = [];
+            acc[dateKey].push(ev);
+            return acc;
+        }, {});
+    }, [events]);
+
+    useEffect(() => {
+        const key = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, "0")}-${String(today.getDate()).padStart(2, "0")}`;
+
+        setSelectedDay({
+            date: key,
+            events: eventsByDate[key] || []
+        });
+    }, [eventsByDate]);
 
     const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
     const firstDay = new Date(currentYear, currentMonth, 1).getDay();
@@ -34,87 +43,55 @@ function Calendar() {
     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 selectDay = (year, month, day) => {
+        const key = `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+        setSelectedDay({
+            date: key,
+            events: eventsByDate[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] || []});
+        selectDay(currentYear, currentMonth, day);
     };
 
     return (
-        <div className={styles.glassCard}>
+        <div className={`${styles.glassCard} glassCard`}>
             <div className={styles.calendarContainer}>
+
                 <div className={styles.calendarHeader}>
-                    <button onClick={handlePrevMonth}>◀</button>
+                    <button onClick={() => setCurrentMonth(m => m === 0 ? 11 : m - 1)}>◀</button>
                     <p>{monthNames[currentMonth]} {currentYear}</p>
-                    <button onClick={handleNextMonth}>▶</button>
+                    <button onClick={() => setCurrentMonth(m => m === 11 ? 0 : m + 1)}>▶</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>
+                        <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) => {
+                    {Array.from({ length: Math.ceil(days.length / 7) }).map((_, w) => (
+                        <tr key={w}>
+                            {days.slice(w * 7, w * 7 + 7).map((day, i) => {
+                                if (!day) return <td key={i}></td>;
+
                                 const key = `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
-                                const hasEvent = events[key];
+                                const hasEvent = (eventsByDate[key]?.length ?? 0) > 0;
 
                                 return (
                                     <td
-                                        key={index}
+                                        key={i}
                                         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 || ""}
+                                        {day}
                                     </td>
                                 );
                             })}
@@ -124,13 +101,16 @@ function Calendar() {
                 </table>
 
                 {selectedDay && (
-                    <div className={styles.eventBox}>
-                        <h3>Événements du {formatDateLetter(selectedDay.date)}</h3>
+                    <div className={`${styles.eventBox} glassBorder`}>
+                        <h3>Événements du {formatDateLetterJS(selectedDay.date)}</h3>
 
                         {selectedDay.events.length > 0 ? (
                             <ul>
-                                {selectedDay.events.map((ev, i) => (
-                                    <li key={i}>{ev}</li>
+                                {selectedDay.events.map(ev => (
+                                    <li key={ev.id}>
+                                        <strong>{ev.name}</strong><br />
+                                        {ev.description}
+                                    </li>
                                 ))}
                             </ul>
                         ) : (

src/components/homePage/calendar.module.css

@@ -1,6 +1,5 @@
 .calendarContainer {
     padding: 20px;
-    font-family: Arial, sans-serif;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -107,20 +106,12 @@
 
 .eventBox {
     width: 100%;
-    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;
+    list-style: none;
 }
 
 .eventGroup{
@@ -138,8 +129,8 @@
 
 .glassCard {
     width: 45%;
-    max-height: 475px;
-    margin: 16px 0px 16px 0px;
+    max-height: 100%;
+    margin: 16px 0 16px 0;
     padding: 10px 20px 10px 20px;
     height: fit-content;
     background: rgba(255, 255, 255, 0.65);
@@ -162,9 +153,15 @@
 @media (max-width: 768px) {
     .glassCard {
         width: 100%;
-        margin: 0px;
         margin-top: 16px;
         margin-bottom: 16px;
+        max-height: 450px;
+    }
+
+    .calendarContainer {
+        padding: 20px;
         display: flex;
+        flex-direction: column;
+        align-items: center;
     }
 }

src/components/homePage/eventList.jsx

@@ -1,47 +1,47 @@
-import {useMemo} from "react";
+import { useMemo } from "react";
 import styles from "./eventList.module.css";
-import formatDateLetter from "../../utils/date/formatDateLetter.js";
-function eventList() {
-    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"],
-        "2025-11-15": ["Sortie cinéma"],
-        "2025-11-17": ["Sortie cinéma"],
-    };
+import { formatDateLetter } from "../../utils/date/formatDateLetter.js";
+
+
+function EventList({ events }) {
 
     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));
+        return [...events].sort(
+            (a, b) => new Date(a.start) - new Date(b.start)
+        );
     }, [events]);
 
+
     return (
-        <div className={styles.glassCard}>
-            <div className={styles.eventListContainer}>
+        <div className={`${styles.glassCard} glassCard`}>
                 <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>{formatDateLetter(eventGroup.date)}</strong>
+                            <li key={eventGroup.date} className={`${styles.eventGroup} glassBorder`}>
+                                <div className={styles.eventTitle}>
+                                    <p className={styles.title}>{eventGroup.name}</p>
+                                    <p>{formatDateLetter(eventGroup.start)}</p>
                                 </div>
+                                {/* TODO: Faire une liste déroulante pour ne plus afficher les tache */}
                                 <ul className={styles.eventDetails}>
-                                    {eventGroup.events.map((event, i) => (
-                                        <li key={i}>- {event}</li>
+                                    {eventGroup.tasks.map((task, i) => (
+                                        <li key={i} className={styles.eventTasks}>
+                                            <p>- {task.name} - {task.description}</p>
+                                            <p>{formatDateLetter(task.start)} - {formatDateLetter(task.end)}</p>
+                                        </li>
                                     ))}
                                 </ul>
                             </li>
+
                         ))}
                     </ul>
                 ) : (
                     <p>Aucun événement planifié pour l'instant.</p>
                 )}
-            </div>
         </div>
 
     );
 }
 
-export default eventList;
+export default EventList;

src/components/homePage/eventList.module.css

@@ -1,7 +1,7 @@
 .glassCard {
     width: 45%;
-    max-height: 475px;
-    margin: 16px 0px 16px 0px;
+    max-height: 100%;
+    margin: 16px 0 16px 0;
     padding: 10px 20px 10px 20px;
     height: fit-content;
     background: rgba(255, 255, 255, 0.65);
@@ -35,9 +35,8 @@
 }
 
 .eventDetails {
-    list-style: none;
+    margin-top: 10px;
     padding: 0;
-    margin: 0;
 }
 
 .dateSelected{
@@ -45,20 +44,39 @@
 }
 
 h2{
+    font-size: 30px;
     display: flex;
     justify-content: center;
 }
 
-.eventListContainer{
-    width: 100%;
+.eventGroup{
+    margin: 16px 0 16px 0;
+    padding: 10px 20px 10px 20px;
+}
+
+.eventTitle {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.title {
+    font-weight: bold;
+}
+
+.eventTasks {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
 }
 
 @media (max-width: 768px) {
     .glassCard {
         width: 100%;
-        margin: 0px;
         margin-top: 16px;
         margin-bottom: 16px;
+        max-height: 450px;
         display: flex;
+        flex-direction: column;
     }
 }

src/components/loginform/loginForm.module.css

@@ -5,7 +5,7 @@
 input {
     width: 100%;
     height: 60px;
-    padding: 0px 10px;
+    padding: 0 10px;
     border: none;
     border-radius: 10px;
     font-size: 19px;
@@ -33,9 +33,9 @@ input::placeholder{
 
 .inputContainer {
     padding: 15px;
+    width: 100%;
 }
 
-/* style scoped (module) */
 .loginButton {
     display: inline-block;
     height: 50px;