From 3b3db6f702336afe308eb6e36e18aad53585b9b4 Mon Sep 17 00:00:00 2001
From: YouSry3 <myosre122@gmail.com>
Date: Fri, 22 Aug 2025 13:14:14 +0300
Subject: [PATCH 1/3] version '1' from visulization about Dashboard

---
 src/Pages/Dashboard.tsx | 59 ++++++++++++++++++++++++++---------------
 1 file changed, 38 insertions(+), 21 deletions(-)

diff --git a/src/Pages/Dashboard.tsx b/src/Pages/Dashboard.tsx
index c0c82bf..e97849f 100644
--- a/src/Pages/Dashboard.tsx
+++ b/src/Pages/Dashboard.tsx
@@ -2,48 +2,65 @@
 import { PieChart, Pie, Cell, Tooltip, Legend, ResponsiveContainer } from "recharts";
 import { useAuth } from "../Auth/AuthContext";
 import useTodos from "../Hooks/useTodos";
+import { Statuses } from "../Data";
+// ...existing code...
+const Dashboard = () => {
+  // Get todos from your custom hook
+  const { user } = useAuth();
+  const { todos } = useTodos(user?.jwt);
 
-const data = [
-  { name: "Completed Tasks", value: 65 },
-  { name: "In Progress", value: 20 },
-  { name: "Pending", value: 15 },
-];
-// 
+  // Count completed and pending todos
+  const completedCount = todos?.data.filter(todo=> todo.todo_status === Statuses[2].name).length || 0;
+  const pendingCount = todos?.data.filter(todo=> todo.todo_status === Statuses[0].name).length || 0;
 
-const COLORS = ["#4CAF50", "#FFC107", "#F44336"];
-const {user} = useAuth();
+  // Prepare data for PieChart
+  const data = [
+    { name: "Completed", value: completedCount },
+    { name: "Pending", value: pendingCount },
+  ];
 
-const {todos} = useTodos(user?.jwt);
+  const COLORS = ["#00C49F", "#FF8042"];
 
-const Dashboard = () => {
   return (
-    <div className="flex flex-col items-center mt-10">
-      <h1 className="text-3xl font-bold mb-8">📊 Dashboard Overview</h1>
-
-      <div className="w-full max-w-xl bg-white shadow-lg rounded-2xl p-6">
-        <h2 className="text-xl font-semibold mb-4 text-center">Project Status</h2>
-        <ResponsiveContainer width="100%" height={300}>
+    <>
+      <h2 style={{ textAlign: "center", marginBottom: "2rem" }}>Todo Status Overview</h2>
+      <div style={{ width: "100%", height: 300 }}>
+        <ResponsiveContainer>
           <PieChart>
             <Pie
               data={data}
               cx="50%"
               cy="50%"
-              innerRadius={60}
+              labelLine={false}
+              label={({ name, percent = 0, x, y }) => (
+                <text
+                  x={x}
+                  y={y}
+                  fill="#333"
+                  textAnchor="middle"
+                  dominantBaseline="central"
+                  fontSize={16}
+                  fontWeight="bold"
+                >
+                  {`${name}: ${(percent * 100).toFixed(0)}%`}
+                </text>
+              )}
               outerRadius={100}
-              paddingAngle={5}
+              fill="#8884d8"
               dataKey="value"
             >
-              {data.map((entry, index) => (
+              {data.map((_, index) => (
                 <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
               ))}
             </Pie>
             <Tooltip />
-            <Legend verticalAlign="bottom" height={36} />
+            <Legend />
           </PieChart>
         </ResponsiveContainer>
       </div>
-    </div>
+    </>
   );
 };
 
 export default Dashboard;
+// ...existing code...

From 8f090d9949c35d1341f313e5ff4c87377f5cd06c Mon Sep 17 00:00:00 2001
From: YouSry3 <myosre122@gmail.com>
Date: Fri, 22 Aug 2025 13:20:22 +0300
Subject: [PATCH 2/3] Fixed this Error

---
 src/Pages/Dashboard.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Pages/Dashboard.tsx b/src/Pages/Dashboard.tsx
index e97849f..f58d4e0 100644
--- a/src/Pages/Dashboard.tsx
+++ b/src/Pages/Dashboard.tsx
@@ -11,6 +11,7 @@ const Dashboard = () => {
 
   // Count completed and pending todos
   const completedCount = todos?.data.filter(todo=> todo.todo_status === Statuses[2].name).length || 0;
+  // Count pending todos
   const pendingCount = todos?.data.filter(todo=> todo.todo_status === Statuses[0].name).length || 0;
 
   // Prepare data for PieChart

From 4d3b2a7d65afeaec8bae2a0a179140a1bf0ab95e Mon Sep 17 00:00:00 2001
From: YouSry3 <myosre122@gmail.com>
Date: Sat, 23 Aug 2025 11:18:13 +0300
Subject: [PATCH 3/3] v0.1 from Dashborad of project 'mangment tsaks'

---
 src/Pages/Dashboard.tsx | 95 ++++++++++++++++++++++++++++++-----------
 src/Pages/TodoLists.tsx |  2 +-
 2 files changed, 70 insertions(+), 27 deletions(-)

diff --git a/src/Pages/Dashboard.tsx b/src/Pages/Dashboard.tsx
index f58d4e0..7ee0092 100644
--- a/src/Pages/Dashboard.tsx
+++ b/src/Pages/Dashboard.tsx
@@ -1,30 +1,49 @@
 // Pages/Dashboard.tsx
-import { PieChart, Pie, Cell, Tooltip, Legend, ResponsiveContainer } from "recharts";
+import {
+  PieChart,
+  Pie,
+  Cell,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from "recharts";
 import { useAuth } from "../Auth/AuthContext";
 import useTodos from "../Hooks/useTodos";
 import { Statuses } from "../Data";
-// ...existing code...
+
 const Dashboard = () => {
-  // Get todos from your custom hook
   const { user } = useAuth();
   const { todos } = useTodos(user?.jwt);
 
-  // Count completed and pending todos
-  const completedCount = todos?.data.filter(todo=> todo.todo_status === Statuses[2].name).length || 0;
-  // Count pending todos
-  const pendingCount = todos?.data.filter(todo=> todo.todo_status === Statuses[0].name).length || 0;
+  // Counts
+  const completedCount =
+    todos?.data.filter((todo) => todo.todo_status === Statuses[2].name).length ||
+    0;
+  const pendingCount =
+    todos?.data.filter((todo) => todo.todo_status === Statuses[0].name).length ||
+    0;
+  const inProgressCount =
+    todos?.data.filter((todo) => todo.todo_status === Statuses[1].name).length ||
+    0;
+
+  const totalCount = completedCount + pendingCount + inProgressCount;
 
-  // Prepare data for PieChart
+  // Pie chart data
   const data = [
     { name: "Completed", value: completedCount },
     { name: "Pending", value: pendingCount },
+    { name: "In Progress", value: inProgressCount },
   ];
 
-  const COLORS = ["#00C49F", "#FF8042"];
+  const COLORS = ["#00C49F", "#FF8042", "#0088FE"];
 
   return (
     <>
-      <h2 style={{ textAlign: "center", marginBottom: "2rem" }}>Todo Status Overview</h2>
+      <h2 className="text-center text-2xl font-bold mb-8">
+        Todo Status Overview
+      </h2>
+
+      {/* Chart */}
       <div style={{ width: "100%", height: 300 }}>
         <ResponsiveContainer>
           <PieChart>
@@ -33,25 +52,17 @@ const Dashboard = () => {
               cx="50%"
               cy="50%"
               labelLine={false}
-              label={({ name, percent = 0, x, y }) => (
-                <text
-                  x={x}
-                  y={y}
-                  fill="#333"
-                  textAnchor="middle"
-                  dominantBaseline="central"
-                  fontSize={16}
-                  fontWeight="bold"
-                >
-                  {`${name}: ${(percent * 100).toFixed(0)}%`}
-                </text>
-              )}
+              label={({ name, percent = 0 }) =>
+                `${name}: ${(percent * 100).toFixed(0)}%`
+              }
               outerRadius={100}
-              fill="#8884d8"
               dataKey="value"
             >
               {data.map((_, index) => (
-                <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                <Cell
+                  key={`cell-${index}`}
+                  fill={COLORS[index % COLORS.length]}
+                />
               ))}
             </Pie>
             <Tooltip />
@@ -59,9 +70,41 @@ const Dashboard = () => {
           </PieChart>
         </ResponsiveContainer>
       </div>
+
+      {/* Stats cards */}
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 mt-10">
+        <div className="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm">
+          <h4 className="text-lg font-semibold text-gray-700">Completed</h4>
+          <p className="mt-2 text-3xl font-bold text-green-600">
+            {completedCount}
+          </p>
+          <span className="text-sm text-gray-500">
+            {(totalCount ? (completedCount / totalCount) * 100 : 0).toFixed(0)}%
+          </span>
+        </div>
+
+        <div className="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm">
+          <h4 className="text-lg font-semibold text-gray-700">In Progress</h4>
+          <p className="mt-2 text-3xl font-bold text-blue-600">
+            {inProgressCount}
+          </p>
+          <span className="text-sm text-gray-500">
+            {(totalCount ? (inProgressCount / totalCount) * 100 : 0).toFixed(0)}%
+          </span>
+        </div>
+
+        <div className="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm">
+          <h4 className="text-lg font-semibold text-gray-700">Pending</h4>
+          <p className="mt-2 text-3xl font-bold text-orange-600">
+            {pendingCount}
+          </p>
+          <span className="text-sm text-gray-500">
+            {(totalCount ? (pendingCount / totalCount) * 100 : 0).toFixed(0)}%
+          </span>
+        </div>
+      </div>
     </>
   );
 };
 
 export default Dashboard;
-// ...existing code...
diff --git a/src/Pages/TodoLists.tsx b/src/Pages/TodoLists.tsx
index 09d8e7a..4dc6385 100644
--- a/src/Pages/TodoLists.tsx
+++ b/src/Pages/TodoLists.tsx
@@ -25,7 +25,7 @@ const TodoLists = ({
 
   return (
 
-    <div className="m-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+    <div className="m-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-4">
       
       {todos.data.map((todo) => {
         const matchedStatus = Statuses.find(s => s.name === todo.todo_status);