diff --git a/src/components/Calendar.jsx b/src/components/Calendar.jsx
index d3cb662abf9ef553020978b99b3f3a88dc4cb528..b77029cfa04875c4f9472a0988b68dcb3352062c 100644
--- a/src/components/Calendar.jsx
+++ b/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));
@@ -15,61 +14,61 @@ const Calendar = () => {
end: endOfMonth(currentDate),
});
- const startDay = getDay(startOfMonth(currentDate));
+ const startDay = getDay(startOfMonth(currentDate));
return (
- <div className="space-y-6">
- <div className="bg-violet-100 rounded-2xl p-6">
- <div className="flex items-center justify-between mb-4">
- <h2 className="text-lg font-semibold text-violet-900">
- {format(currentDate, 'MMMM yyyy', { locale: enUS })}
- </h2>
- <div className="flex gap-2">
- <button onClick={prevMonth} className="p-1 hover:bg-violet-200 rounded">
- <ChevronLeft className="w-5 h-5 text-violet-700" />
- </button>
- <button onClick={nextMonth} className="p-1 hover:bg-violet-200 rounded">
- <ChevronRight className="w-5 h-5 text-violet-700" />
- </button>
+ <div className="space-y-6">
+ <div className="bg-violet-100 rounded-2xl p-6">
+ <div className="flex items-center justify-between mb-4">
+ <h2 className="text-lg font-semibold text-violet-900">
+ {format(currentDate, 'MMMM yyyy', { locale: enUS })}
+ </h2>
+ <div className="flex gap-2">
+ <button onClick={prevMonth} className="p-1 hover:bg-violet-200 rounded">
+ <ChevronLeft className="w-5 h-5 text-violet-700" />
+ </button>
+ <button onClick={nextMonth} className="p-1 hover:bg-violet-200 rounded">
+ <ChevronRight className="w-5 h-5 text-violet-700" />
+ </button>
+ </div>
</div>
- </div>
- <div className="grid grid-cols-7 gap-2 text-center mb-2">
- {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => (
- <div key={day} className="text-sm font-medium text-violet-800">
- {day}
- </div>
- ))}
- </div>
+ <div className="grid grid-cols-7 gap-2 text-center mb-2">
+ {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => (
+ <div key={day} className="text-sm font-medium text-violet-800">
+ {day}
+ </div>
+ ))}
+ </div>
+
+ <div className="grid grid-cols-7 gap-2">
+ {[...Array(startDay)].map((_, index) => (
+ <div key={`empty-${index}`} className="p-2"></div>
+ ))}
+
+ {days.map(day => {
+ const isSelected = isSameDay(day, selectedDate);
- <div className="grid grid-cols-7 gap-2">
- {[...Array(startDay)].map((_, index) => (
- <div key={`empty-${index}`} className="p-2"></div>
- ))}
-
- {days.map(day => {
- const isSelected = isSameDay(day, selectedDate);
-
- return (
- <button
- key={day.toString()}
- onClick={() => setSelectedDate(day)}
- className={`
+ return (
+ <button
+ key={day.toString()}
+ onClick={() => setSelectedDate(day)}
+ className={`
p-2 rounded-full text-sm
- ${isSelected
- ? 'bg-violet-500 text-white'
- : 'text-violet-800 hover:bg-violet-100'
- }
+ ${isSelected
+ ? 'bg-violet-500 text-white'
+ : 'text-violet-800 hover:bg-violet-100'
+ }
`}
- >
- {format(day, 'd')}
- </button>
- );
- })}
+ >
+ {format(day, 'd')}
+ </button>
+ );
+ })}
+ </div>
</div>
</div>
- </div>
);
};
-export default Calendar;
\ No newline at end of file
+export default Calendar;
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index c5221de5db78b9e1bdb599b22378fdecfe328d2d..42a952e5afdb2433ee1052a799386d3a1c88c7e9 100644
--- a/src/components/Navbar.jsx
+++ b/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"
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index a879a324a5a76a4e07f76977d6057e20d4129cfd..6fb02c41317b6cd1abcac18df29347ca088bc9dc 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -1,41 +1,78 @@
-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();
- return (
- <div>
- <div className="p-6 bg-gray">
- <TaskStats />
- </div>
- <div className="min-h-screen bg-gray-100 p-8">
- <div className="grid grid-cols-2 gap-6">
+ 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">
+ <TaskStats />
+ </div>
+ <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]">
+ <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>
- </div>
+ <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 />
- </div>
+ <div className="bg-white rounded-lg shadow-md p-6 min-h-[300px]">
+ <Calendar selectedDate={selectedDate} setSelectedDate={setSelectedDate} />
+ </div>
- <div className="bg-white rounded-lg shadow-md p-6 min-h-[300px]">
+ <div className="bg-white rounded-lg shadow-md p-6 min-h-[300px]">
+ </div>
- </div>
+ <div className="bg-white rounded-lg shadow-md p-6 min-h-[300px]">
+ <TasksStatPercent />
+ </div>
+ </div>
+ </div>
- <div className="bg-white rounded-lg shadow-md p-6 min-h-[300px]">
- <TasksStatPercent/>
- </div>
- </div>
- </div>
- </div>
- );
+ <Modal isOpen={isModalOpen} closeModal={closeModal} saveTask={saveTask} />
+ </div>
+ );
};
export default Home;
diff --git a/src/pages/Todolist.jsx b/src/pages/Todolist.jsx
index 343f0201df39cf4879c173d0f4b5d8860a3cdfbb..1a648e75ca731d5f9830e9ac092bada9106b6082 100644
--- a/src/pages/Todolist.jsx
+++ b/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);