add a tasks list to home page + sync with calendar.

src/components/Calendar.jsx

@@ -3,9 +3,8 @@ import { format, addMonths, subMonths, startOfMonth, endOfMonth, eachDayOfInterv
 import { enUS } from 'date-fns/locale';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 
-const Calendar = () => {
+const Calendar = ({ selectedDate, setSelectedDate }) => {
   const [currentDate, setCurrentDate] = useState(new Date());
-  const [selectedDate, setSelectedDate] = useState(new Date());
 
   const nextMonth = () => setCurrentDate(addMonths(currentDate, 1));
   const prevMonth = () => setCurrentDate(subMonths(currentDate, 1));

src/components/Navbar.jsx

@@ -7,24 +7,24 @@ const Navbar = () => {
     const navigate = useNavigate();
 
     useEffect(() => {
-        // Écouter les changements sur `localStorage`
+
         const handleStorageChange = () => {
             setIsAuthenticated(!!localStorage.getItem("user"));
         };
 
-        // Ajouter un écouteur d'événement sur `storage`
+
         window.addEventListener("storage", handleStorageChange);
 
         return () => {
-            // Nettoyer l'écouteur quand le composant est démonté
+
             window.removeEventListener("storage", handleStorageChange);
         };
     }, []);
 
     const handleLogout = () => {
-        localStorage.removeItem("user"); // Supprimer l'utilisateur
+        localStorage.removeItem("user");
         setIsAuthenticated(false);
-        navigate("/signin"); // Rediriger vers la page de connexion
+        navigate("/signin");
     };
 
     return (
@@ -53,7 +53,7 @@ const Navbar = () => {
                         </Link>
                         <div className="flex items-center gap-2">
                             {isAuthenticated ? (
-                                // Bouton Logout si l'utilisateur est connecté
+
                                 <button
                                     onClick={handleLogout}
                                     className="bg-red-500 text-white hover:bg-red-600 px-4 py-2 rounded-md text-sm font-medium"
@@ -61,7 +61,7 @@ const Navbar = () => {
                                     Logout
                                 </button>
                             ) : (
-                                // Boutons Login & Signup si l'utilisateur N'EST PAS connecté
+
                                 <>
                                     <Link
                                         to="/signin"

src/pages/Home.jsx

-import React from "react";
+import React, { useState } from "react";
 import TaskStats from "@components/dashboard/TaskStats";
 import TasksStatPercent from "@components/dashboard/TasksStatPercent.jsx";
-import { useNavigate } from "react-router-dom";
+import { useTasks } from "@context/TasksContext";
 import Calendar from "@components/Calendar";
+import TaskList from "@components/todolist/TaskList";
+import AddTaskButton from "@components/todolist/AddTaskButton";
+import Modal from "@components/todolist/Modal";
+
 const Home = () => {
-    const navigate = useNavigate();
+    const { tasks, setTasks } = useTasks();
+    const [selectedDate, setSelectedDate] = useState(new Date());
+    const [isModalOpen, setIsModalOpen] = useState(false);
+
+    const openModal = () => setIsModalOpen(true);
+    const closeModal = () => setIsModalOpen(false);
+
+    // Fonction pour ajouter une nouvelle tâche
+    const saveTask = (task) => {
+        const newTask = {
+            ...task,
+            dueDate: task.dueDate || selectedDate.toISOString().split("T")[0], // Ajouter une dueDate par défaut
+        };
+        setTasks([...tasks, newTask]);
+    };
+
+    // Filtrer les tâches en fonction de leur dueDate
+    const filteredTasks = tasks.filter(task => {
+        if (!task.dueDate) return false; // Vérifie si une tâche a bien une date
+        const taskDate = new Date(task.dueDate); // Convertir en objet Date
+        return taskDate.toDateString() === selectedDate.toDateString(); // Comparer avec la date sélectionnée
+    });
+
     return (
         <div>
             <div className="p-6 bg-gray">
@@ -13,27 +39,38 @@ const Home = () => {
             <div className="min-h-screen bg-gray-100 p-8">
                 <div className="grid grid-cols-2 gap-6">
 
+
                     <div className="bg-white rounded-lg shadow-md p-6 min-h-[300px]">
+                        <h3 className="text-lg font-semibold mb-4">
+                            Tasks for {selectedDate.toDateString()}
+                        </h3>
+
+                        <AddTaskButton onClick={openModal} />
 
+                        {filteredTasks.length > 0 ? (
+                            <TaskList tasks={filteredTasks} />
+                            ) : (
+                            <p className="text-gray-500 mt-4">No tasks for this day</p>
+                            )}
                     </div>
 
 
                     <div className="bg-white rounded-lg shadow-md p-6 min-h-[300px]">
-                    <Calendar />
+                        <Calendar selectedDate={selectedDate} setSelectedDate={setSelectedDate} />
                     </div>
 
-
                     <div className="bg-white rounded-lg shadow-md p-6 min-h-[300px]">
-
                     </div>
 
 
                     <div className="bg-white rounded-lg shadow-md p-6 min-h-[300px]">
                         <TasksStatPercent />
                     </div>
-
                 </div>
             </div>
+
+
+            <Modal isOpen={isModalOpen} closeModal={closeModal} saveTask={saveTask} />
         </div>
     );
 };

src/pages/Todolist.jsx

@@ -7,8 +7,13 @@ import { useTasks } from "@context/TasksContext";
 export default function Todolist() {
     const { tasks, setTasks } = useTasks()
     const saveTask = (task) => {
-        setTasks([...tasks, task])
-    }
+        const newTask = {
+            ...task,
+            dueDate: task.dueDate || new Date().toISOString().split("T")[0],
+        };
+        setTasks([...tasks, newTask]);
+    };
+
 
     const [isModalOpen, setIsModalOpen] = useState(false);
     const openModal = () => setIsModalOpen(true);