Dash board

src/Pages/Dashboard.tsx

@@ -1,48 +1,109 @@
 // 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";
 
-const data = [
-  { name: "Completed Tasks", value: 65 },
-  { name: "In Progress", value: 20 },
-  { name: "Pending", value: 15 },
-];
-// 
+const Dashboard = () => {
+  const { user } = useAuth();
+  const { todos } = useTodos(user?.jwt);
 
-const COLORS = ["#4CAF50", "#FFC107", "#F44336"];
-const {user} = useAuth();
+  // 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 {todos} = useTodos(user?.jwt);
+  const totalCount = completedCount + pendingCount + inProgressCount;
+
+  // Pie chart data
+  const data = [
+    { name: "Completed", value: completedCount },
+    { name: "Pending", value: pendingCount },
+    { name: "In Progress", value: inProgressCount },
+  ];
+
+  const COLORS = ["#00C49F", "#FF8042", "#0088FE"];
 
-const Dashboard = () => {
   return (
-    <div className="flex flex-col items-center mt-10">
-      <h1 className="text-3xl font-bold mb-8">📊 Dashboard Overview</h1>
+    <>
+      <h2 className="text-center text-2xl font-bold mb-8">
+        Todo Status Overview
+      </h2>
 
-      <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}>
+      {/* Chart */}
+      <div style={{ width: "100%", height: 300 }}>
+        <ResponsiveContainer>
           <PieChart>
             <Pie
               data={data}
               cx="50%"
               cy="50%"
-              innerRadius={60}
+              labelLine={false}
+              label={({ name, percent = 0 }) =>
+                `${name}: ${(percent * 100).toFixed(0)}%`
+              }
               outerRadius={100}
-              paddingAngle={5}
               dataKey="value"
             >
-              {data.map((entry, index) => (
-                <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+              {data.map((_, index) => (
+                <Cell
+                  key={`cell-${index}`}
+                  fill={COLORS[index % COLORS.length]}
+                />
               ))}
             </Pie>
             <Tooltip />
-            <Legend verticalAlign="bottom" height={36} />
+            <Legend />
           </PieChart>
         </ResponsiveContainer>
       </div>
-    </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>
+    </>
   );
 };
 

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);