Synchronisation des tâches existantes et du module de statistique de stat global

src/components/dashboard/TaskStats.jsx

-import React from "react";
+import React, { useContext } from "react";
 import TaskCard from "@components/dashboard/TaskCard";
+import { TasksContext } from "@services/Context";
+
+const TaskStats = () => {
+  const { tasks } = useContext(TasksContext);
+
+  const completed = tasks.filter(task => task.isCompleted).length;
+  const incompleted = tasks.filter(task => !task.isCompleted).length;
+  const total = tasks.length;
 
-const TaskStats = ({ completed, incompleted, canceled, total }) => {
   return (
     <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
       <TaskCard title="Completed Tasks" count={completed} />
       <TaskCard title="Incompleted Tasks" count={incompleted} />
-      <TaskCard title="Overdue Tasks" count={canceled} />
       <TaskCard title="Total Tasks" count={total} />
     </div>
   );

src/pages/Home.jsx

@@ -8,7 +8,7 @@ const Home = () => {
   return (
       <div>
           <div className="p-6 bg-gray">
-              <TaskStats completed={100} incompleted={18} canceled={4} total={118} />
+              <TaskStats />
           </div>
           <div className="min-h-screen bg-gray-100 p-8">
               <div className="grid grid-cols-2 gap-6">