merge de features/exportauto into dev

src/pages/Home/components/Calendar/calendar.jsx

@@ -5,10 +5,11 @@ import {EventContext} from "../../../../contexts/events/EventContext.js";
 import Button from "../../../../components/ui/button/button.jsx";
 import {AuthContext} from "../../../../contexts/auth/AuthContext.ts";
 
-function Calendar() {
-
+function
+Calendar() {
     const { user } = useContext(AuthContext);
 
+    const calendarUrl = `${import.meta.env.VITE_API_URL}/api/export/ics/${user.id}`;
 
     const monthNames = [
         "Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
@@ -18,7 +19,7 @@ function Calendar() {
     const today = new Date();
 
     const [currentMonth, setCurrentMonth] = useState(today.getMonth());
-    const [currentYear] = useState(today.getFullYear());
+    const [currentYear, setCurrentYear] = useState(today.getFullYear());
     const [selectedDay, setSelectedDay] = useState(null);
 
     const eventsByDate = useMemo(() => {
@@ -67,9 +68,31 @@ function Calendar() {
             <div className={styles.calendarContainer}>
 
                 <div className={styles.calendarHeader}>
-                    <button onClick={() => setCurrentMonth(m => m === 0 ? 11 : m - 1)}>◀</button>
+                    <button
+                        onClick={() => {
+                            if (currentMonth === 0) {
+                                setCurrentMonth(11);
+                                setCurrentYear(y => y - 1);
+                            } else {
+                                setCurrentMonth(m => m - 1);
+                            }
+                        }}
+                    >
+                        ◀
+                    </button>
                     <p>{monthNames[currentMonth]} {currentYear}</p>
-                    <button onClick={() => setCurrentMonth(m => m === 11 ? 0 : m + 1)}>▶</button>
+                    <button
+                        onClick={() => {
+                            if (currentMonth === 11) {
+                                setCurrentMonth(0);
+                                setCurrentYear(y => y + 1);
+                            } else {
+                                setCurrentMonth(m => m + 1);
+                            }
+                        }}
+                    >
+                        ▶
+                    </button>
                 </div>
 
                 <table className={styles.calendar}>
@@ -129,15 +152,18 @@ function Calendar() {
                         )}
                     </div>
                 )}
-                <Button className={styles.exportbtn}
-                        variant={"primary"}
+                <div className={`${styles.exportbox} glassBorder`}>
+                    <p><b>votre lien d'agenda:</b> {calendarUrl}</p>
+                    <Button className={styles.exportbtn}
                         onClick={() => {
-                            window.location.href =
-                                `${import.meta.env.VITE_API_URL}/api/export/ics/${user.id}`;
+                            window.open(
+                                "https://calendar.google.com/calendar/u/0/r/settings/addbyurl"
+                            );
                         }}
-                >
-                    Exporter mon agenda
-                </Button>
+                    >
+                        Exporter
+                    </Button>
+                </div>
             </div>
         </div>
     );

src/pages/Home/components/Calendar/calendar.module.css

@@ -150,10 +150,22 @@
     display: none;
 }
 
-.exportbtn{
+.exportbox{
+    width: 100%;
+    padding: 15px;
     margin-top: 16px;
+    display: flex;
+    align-items: center;
 }
 
+.exportbtn {
+    display: flex;
+    align-items: center;
+    max-height: 30px;
+}
+
+
+
 @media (max-width: 768px) {
     .glassCard {
         width: 100%;

src/pages/Home/components/EventList/eventItem.jsx

@@ -0,0 +1,26 @@
+import styles from "./eventList.module.css";
+import {formatDateLetter} from "../../../../utils/date/formatDateLetter.js";
+import {useState} from "react";
+
+export default function EventItem({eventGroup}) {
+
+    const [isVisible, setIsVisible] = useState(false);
+
+    return <div key={eventGroup.date} className={`${styles.eventGroup} glassBorder`}
+                onClick={() => setIsVisible(!isVisible)}>
+        <div className={styles.eventTitle}>
+            <p className={styles.title}>{eventGroup.name}</p>
+            <p>{formatDateLetter(eventGroup.start)}</p>
+        </div>
+        {isVisible &&
+            <ul className={styles.eventDetails}>
+                {eventGroup.tasks.map((task, i) => (
+                    <li key={i} className={styles.eventTasks}>
+                        <p className={styles.taskName}>{task.name} - {task.description}</p>
+                        <p className={styles.taskDate}>{formatDateLetter(task.start)} - {formatDateLetter(task.end)}</p>
+                    </li>
+                ))}
+            </ul>
+        }
+    </div>
+}

src/pages/Home/components/EventList/eventList.module.css

@@ -68,9 +68,12 @@ h2{
 }
 
 .eventTasks {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
+    list-style: none;
+    margin: 10px;
+}
+
+.taskDate{
+    font-size: 13px;
 }
 
 @media (max-width: 768px) {