Refactor dashboard components and update API

endpoints

frontend/src/components/dashboard/DonutChart.jsx

@@ -1,39 +0,0 @@
-import { DonutChart } from "@tremor/react";
-import { axiosInstance } from "src/api/AxiosConfig";
-import { useState, useEffect } from "react";
-
-export function DonutChartGraph() {
-  const [donutData, setDonutData] = useState([]);
-
-  useEffect(() => {
-    const fetchDonutData = async () => {
-      try {
-        const response = await axiosInstance.get("/dashboard/stats/");
-        const todoCount = response.data.todo_count || 0;
-        const recurrenceCount = response.data.recurrence_count || 0;
-
-        const donutData = [
-          { name: "Todo", count: todoCount },
-          { name: "Recurrence", count: recurrenceCount },
-        ];
-
-        setDonutData(donutData);
-      } catch (error) {
-        console.error("Error fetching donut data:", error);
-      }
-    };
-    fetchDonutData();
-  }, []);
-
-  return (
-    <DonutChart
-      className="mt-6"
-      data={donutData}
-      category="count"
-      index="name"
-      colors={["rose", "yellow", "orange"]}
-      showAnimation
-      radius={25}
-    />
-  );
-}

frontend/src/components/dashboard/KpiCard.jsx

@@ -13,7 +13,7 @@ export function KpiCard() {
   useEffect(() => {
     const fetchKpiCardData = async () => {
       try {
-        const response = await axiosInstance.get("/dashboard/stats/");
+        const response = await axiosInstance.get("/dashboard/todostats/");
         const completedThisWeek = response.data.completed_this_week || 0;
         const completedLastWeek = response.data.completed_last_week || 0;
         const percentage = (completedThisWeek / completedLastWeek) * 100;

frontend/src/components/dashboard/PieChart.jsx

@@ -1,37 +1,34 @@
 import { DonutChart } from "@tremor/react";
-import axiosInstance from "../../api/configs/AxiosConfig";
+import { axiosInstance } from "src/api/AxiosConfig";
+import { useState, useEffect } from "react";
 
-const fetchPieData = async () => {
+export function DonutChartGraph() {
-  try {
+  const [donutData, setDonutData] = useState([]);
-    let res = await axiosInstance.get("/dashboard/stats/");
-    // let todoCount = res.data.todo_count;
-    // let recurrenceCount = res.data.recurrence_count;
-    let todoCount = 10;
-    let recurrenceCount = 15;
-    if (todoCount === undefined) {
-      todoCount = 0;
-    }
-    if (recurrenceCount === undefined) {
-      recurrenceCount = 0;
-    }
-    const donutData = [
-      { name: "Completed Tasks", count: todoCount },
-      { name: "Uncompleted Tasks", count: recurrenceCount },
-    ];
-    return donutData;
-  } catch (error) {
-    console.error("Error fetching donut data:", error);
-    return [];
-  }
-};
 
-const pieDataArray = await fetchPieData();
+  useEffect(() => {
+    const fetchDonutData = async () => {
+      try {
+        const response = await axiosInstance.get("/dashboard/todostats/");
+        const totalTask = response.data.total_tasks || 0;
+        const completedTask = response.data.total_completed_tasks || 0;
+
+        const donutData = [
+          { name: "Completed task", count: totalTask },
+          { name: "Total task", count: completedTask },
+        ];
+
+        setDonutData(donutData);
+      } catch (error) {
+        console.error("Error fetching donut data:", error);
+      }
+    };
+    fetchDonutData();
+  }, []);
 
-export  function PieChartGraph() {
   return (
     <DonutChart
       className="mt-6"
-      data={pieDataArray}
+      data={donutData}
       category="count"
       index="name"
       colors={["rose", "yellow"]}

frontend/src/components/dashboard/ProgressCircle.jsx

@@ -8,7 +8,7 @@ export function ProgressCircleChart() {
   useEffect(() => {
     const fetchProgressData = async () => {
       try {
-        const response = await axiosInstance.get("/dashboard/stats/");
+        const response = await axiosInstance.get("/dashboard/todostats/");
         let completedLastWeek = response.data.completed_last_week || 0;
         let assignLastWeek = response.data.tasks_assigned_last_week || 0;
 

frontend/src/components/dashboard/dashboard.jsx

@@ -10,10 +10,11 @@ import {
   Title,
   Legend,
 } from "@tremor/react";
-import {KpiCard} from "./KpiCard";
+import { KpiCard } from "./KpiCard";
 import { BarChartGraph } from "./Barchart";
 import { AreaChartGraph } from "./Areachart";
-import {ProgressCircleChart} from "./ProgressCircle";
+import { DonutChartGraph } from "./PieChart";
+import { ProgressCircleChart } from "./ProgressCircle";
 
 const valueFormatter = (number) =>
   `$ ${new Intl.NumberFormat("us").format(number).toString()}`;
@@ -59,17 +60,20 @@ export function Dashboard() {
               </Grid>
             </TabPanel>
             <TabPanel>
-            <div className="h-31">
+              <Grid numItemsMd={2} numItemsLg={3} className="gap-6 mt-6">
+                <div className="h-31">
                   <Card className="mx-auto h-full">
                     <Title>Tasks</Title>
+                    <DonutChartGraph />
                     <br />
                     <Legend
                       className="mt-3 mx-auto w-1/2"
-                      categories={["Todo Task", "Recurrence Task"]}
+                      categories={["Completed Task", "Total Task"]}
                       colors={["rose", "yellow"]}
                     />
                   </Card>
                 </div>
+              </Grid>
             </TabPanel>
           </TabPanels>
         </TabGroup>