Merge pull request #55 from TurTaskProject/feature/dashboard

Fix data fetching and update UI components

frontend/src/components/dashboard/Areachart.jsx

@@ -5,43 +5,81 @@ import axiosInstance from "../../api/configs/AxiosConfig";
 const fetchAreaChartData = async () => {
     let res = await axiosInstance.get("/dashboard/weekly/");
     console.log(res.data);
+    // const areaChartData = [
+    //     {
+    //         date: "Mon",
+    //         "This Week": res.data[0]["This Week"],
+    //         "Last Week": res.data[0]["Last Week"],
+    //     },
+    //     {
+    //         date: "Tue",
+    //         "This Week": res.data[1]["This Week"],
+    //         "Last Week": res.data[1]["Last Week"],
+    //     },
+    //     {
+    //         date: "Wed",
+    //         "This Week": res.data[2]["This Week"],
+    //         "Last Week": res.data[2]["Last Week"],
+    //     },
+    //     {
+    //         date: "Th",
+    //         "This Week": res.data[3]["This Week"],
+    //         "Last Week": res.data[3]["Last Week"],
+    //     },
+    //     {
+    //         date: "Fri",
+    //         "This Week": res.data[4]["This Week"],
+    //         "Last Week": res.data[4]["Last Week"],
+    //     },
+    //     {
+    //         date: "Sat",
+    //         "This Week": res.data[5]["This Week"],
+    //         "Last Week": res.data[5]["Last Week"],
+    //     },
+    //     {
+    //         date: "Sun",
+    //         "This Week": res.data[6]["This Week"],
+    //         "Last Week": res.data[6]["Last Week"],
+    //     },
+    // ];
     const areaChartData = [
         {
-            date: "Monday",
+            date: "Mon",
-            "This Week": res.data[0]["This Week"],
+            "This Week": 1,
-            "Last Week": res.data[0]["Last Week"],
+            "Last Week": 2,
         },
         {
-            date: "Tuesday",
+            date: "Tue",
-            "This Week": res.data[1]["This Week"],
+            "This Week": 5,
-            "Last Week": res.data[1]["Last Week"],
+            "Last Week": 2,
         },
         {
-            date: "Wednesday",
+            date: "Wed",
-            "This Week": res.data[2]["This Week"],
+            "This Week": 7,
-            "Last Week": res.data[2]["Last Week"],
+            "Last Week": 9,
         },
         {
-            date: "Thursday",
+            date: "Th",
-            "This Week": res.data[3]["This Week"],
+            "This Week": 10,
-            "Last Week": res.data[3]["Last Week"],
+            "Last Week": 3,
         },
         {
-            date: "Friday",
+            date: "Fri",
-            "This Week": res.data[4]["This Week"],
+            "This Week": 5,
-            "Last Week": res.data[4]["Last Week"],
+            "Last Week": 1,
         },
         {
-            date: "Saturday",
+            date: "Sat",
-            "This Week": res.data[5]["This Week"],
+            "This Week": 7,
-            "Last Week": res.data[5]["Last Week"],
+            "Last Week": 8,
         },
         {
-            date: "Sunday",
+            date: "Sun",
-            "This Week": res.data[6]["This Week"],
+            "This Week": 3,
-            "Last Week": res.data[6]["Last Week"],
+            "Last Week": 8,
         },
     ];
+    return areaChartData;
 }
 
 const areaChartDataArray = await fetchAreaChartData();

frontend/src/components/dashboard/Barchart.jsx

@@ -5,62 +5,98 @@ import axiosInstance from "../../api/configs/AxiosConfig";
 const fetchBarChartData = async () => {
   let res = await axiosInstance.get("/dashboard/weekly/");
   console.log(res.data);
+  // const barchartData = [
+  //   {
+  //     date: "Mon",
+  //     "This Week": res.data[0]["Completed This Week"],
+  //     "Last Week": res.data[0]["Completed Last Week"],
+  //   },
+  //   {
+  //     date: "Tue",
+  //     "This Week": res.data[1]["Completed This Week"],
+  //     "Last Week": res.data[1]["Completed Last Week"],
+  //   },
+  //   {
+  //     date: "Wed",
+  //     "This Week": res.data[2]["Completed This Week"],
+  //     "Last Week": res.data[2]["Completed Last Week"],
+  //   },
+  //   {
+  //     date: "Th",
+  //     "This Week": res.data[3]["Completed This Week"],
+  //     "Last Week": res.data[3]["Completed Last Week"],
+  //   },
+  //   {
+  //     date: "Fri",
+  //     "This Week": res.data[4]["Completed This Week"],
+  //     "Last Week": res.data[4]["Completed Last Week"],
+  //   },
+  //   {
+  //     date: "Sat",
+  //     "This Week": res.data[5]["Completed This Week"],
+  //     "Last Week": res.data[5]["Completed Last Week"],
+  //   },
+  //   {
+  //     date: "Sun",
+  //     "This Week": res.data[6]["Completed This Week"],
+  //     "Last Week": res.data[6]["Completed Last Week"],
+  //   },
+  // ];
   const barchartData = [
     {
-      date: "Monday",
+      date: "Mon",
-      "This Week": res.data[0]["Completed This Week"],
+      "This Week": 1,
-      "Last Week": res.data[0]["Completed Last Week"],
+      "Last Week": 2,
     },
     {
-      date: "Tuesday",
+      date: "Tue",
-      "This Week": res.data[1]["Completed This Week"],
+      "This Week": 5,
-      "Last Week": res.data[1]["Completed Last Week"],
+      "Last Week": 2,
     },
     {
-      date: "Wednesday",
+      date: "Wed",
-      "This Week": res.data[2]["Completed This Week"],
+      "This Week": 7,
-      "Last Week": res.data[2]["Completed Last Week"],
+      "Last Week": 9,
     },
     {
-      date: "Thursday",
+      date: "Th",
-      "This Week": res.data[3]["Completed This Week"],
+      "This Week": 10,
-      "Last Week": res.data[3]["Completed Last Week"],
+      "Last Week": 3,
     },
     {
-      date: "Friday",
+      date: "Fri",
-      "This Week": res.data[4]["Completed This Week"],
+      "This Week": 5,
-      "Last Week": res.data[4]["Completed Last Week"],
+      "Last Week": 1,
     },
     {
-      date: "Saturday",
+      date: "Sat",
-      "This Week": res.data[5]["Completed This Week"],
+      "This Week": 7,
-      "Last Week": res.data[5]["Completed Last Week"],
+      "Last Week": 8,
     },
     {
-      date: "Sunday",
+      date: "Sun",
-      "This Week": res.data[6]["Completed This Week"],
+      "This Week": 3,
-      "Last Week": res.data[6]["Completed Last Week"],
+      "Last Week": 8,
     },
   ];
   return barchartData;
- 
 };
 const barchartDataArray = await fetchBarChartData();
 export const BarChartGraph = () => {
   const [value, setValue] = React.useState(null);
   return (
     <>
-        <Title>Task completed statistics vs. last week</Title>
+      <Title>Task completed statistics vs. last week</Title>
-        <BarChart
+      <BarChart
-          className="mt-6"
+        className="mt-6"
-          data={barchartDataArray}
+        data={barchartDataArray}
-          index="date"
+        index="date"
-          categories={["This Week", "Last Week"]}
+        categories={["This Week", "Last Week"]}
-          colors={["neutral", "indigo"]}
+        colors={["neutral", "indigo"]}
-          yAxisWidth={30}
+        yAxisWidth={30}
-          onValueChange={(v) => setValue(v)}
+        onValueChange={(v) => setValue(v)}
-          showAnimation
+        showAnimation
-        />
+      />
     </>
   );
-};
+};

frontend/src/components/dashboard/DonutChart.jsx

@@ -4,8 +4,10 @@ import axiosInstance from "../../api/configs/AxiosConfig";
 const fetchDonutData = async () => {
   try {
     let res = await axiosInstance.get("/dashboard/stats/");
-    let todoCount = res.data.todo_count;
+    // let todoCount = res.data.todo_count;
-    let recurrenceCount = res.data.recurrence_count;
+    // let recurrenceCount = res.data.recurrence_count;
+    let todoCount = 10;
+    let recurrenceCount = 15;
     if (todoCount === undefined) {
       todoCount = 0;
     }
@@ -34,6 +36,7 @@ export default function DonutChartGraph() {
       colors={["rose", "yellow", "orange"]}
       onValueChange={(v) => setValue(v)}
       showAnimation
+      radius={25}
     />
   );
 }

frontend/src/components/dashboard/KpiCard.jsx

@@ -5,8 +5,10 @@ import axiosInstance from "../../api/configs/AxiosConfig";
 
 const fetchKpiCardData = async () => {
   let res = await axiosInstance.get("/dashboard/stats/");
-  let completedThisWeek = res.data["completed_this_week"];
+  // let completedThisWeek = res.data["completed_this_week"];
-  let completedLastWeek = res.data["completed_last_week"];
+  // let completedLastWeek = res.data["completed_last_week"];
+  let completedThisWeek = 4;
+  let completedLastWeek = 23;
   let percentage = (completedThisWeek / completedLastWeek)*100;
   let incOrdec = undefined;
   if (completedThisWeek <= completedLastWeek) {
@@ -29,7 +31,7 @@ export default function KpiCard() {
         <div>
           <Metric>{completedThisWeek}</Metric>
         </div>
-        <BadgeDelta deltaType={incOrdec}>{percentage}%</BadgeDelta>
+        <BadgeDelta deltaType={incOrdec}>{percentage.toFixed(0)}%</BadgeDelta>
       </Flex>
       <Flex className="mt-4">
         <Text className="truncate">vs. {completedLastWeek} (last week)</Text>

frontend/src/components/dashboard/ProgressCircle.jsx

@@ -0,0 +1,43 @@
+import { Card, Flex, ProgressCircle, Text,  } from "@tremor/react";
+import React from "react";
+import axiosInstance from "../../api/configs/AxiosConfig";
+
+const fetchProgressData = async () => {
+  try {
+    let res = await axiosInstance.get("/dashboard/stats/");
+    // let completedLastWeek = res.data.completed_last_week;
+    // let assignLastWeek = res.data.tasks_assigned_last_week;
+    let completedLastWeek = 15;
+    let assignLastWeek = 35;
+    if (completedLastWeek === undefined) {
+      completedLastWeek = 0;
+    }
+    if (assignLastWeek === undefined) {
+      assignLastWeek = 0;
+    }
+    return (completedLastWeek / assignLastWeek) * 100;
+  } catch (error) {
+    console.error("Error fetching progress data:", error);
+    return 0;
+  }
+};
+
+const progressData = await fetchProgressData();
+export default function ProgressCircleChart() {
+  return (
+    <Card className="max-w-lg mx-auto">
+      <Flex className="flex-col items-center">
+        <ProgressCircle
+          className="mt-6" value={progressData}
+          size={200}
+          strokeWidth={10}
+          radius={60}
+          color="indigo">
+          <span className="h-12 w-12 rounded-full bg-indigo-100 flex items-center justify-center text-sm text-indigo-500 font-medium">
+            {progressData.toFixed(0)} %
+          </span>
+        </ProgressCircle>
+      </Flex>
+    </Card>
+  );
+}

frontend/src/components/dashboard/dashboard.jsx

@@ -8,14 +8,13 @@ import {
   TabPanels,
   Text,
   Title,
-  DonutChart,
   Legend,
 } from "@tremor/react";
 import KpiCard from "./kpiCard";
 import { BarChartGraph } from "./Barchart";
 import DonutChartGraph from "./DonutChart";
 import { AreaChartGraph } from "./Areachart";
-
+import ProgressCircleChart from "./ProgressCircle";
 
 const valueFormatter = (number) =>
   `$ ${new Intl.NumberFormat("us").format(number).toString()}`;
@@ -31,10 +30,11 @@ export default function Dashboard() {
       <div>
         <TabGroup className="mt-6">
           <TabList>
+            <Tab>Weekly</Tab>
             <Tab>Overview</Tab>
-            <Tab>Detail</Tab>
           </TabList>
           <TabPanels>
+            {/*Weekly Tab*/}
             <TabPanel>
               <Grid numItemsMd={2} numItemsLg={3} className="gap-6 mt-6">
                 <Card>
@@ -42,27 +42,36 @@ export default function Dashboard() {
                   <br />
                   <KpiCard />
                   <br />
+                  <Title>Last week progress rate</Title>
+                  <br />
+                  <ProgressCircleChart />
+                  <Legend
+                    className="mt-3 mx-auto w-1/2"
+                    categories={["Completed Tasks", "Assigned Tasks"]}
+                    colors={["indigo"]}
+                  ></Legend>
                 </Card>
                 <Card>
-                <BarChartGraph />
+                  <BarChartGraph />
                 </Card>
                 <Card>
                   <AreaChartGraph />
                 </Card>
-                <div className="h-31">
+              </Grid>
+            </TabPanel>
+            <TabPanel>
+            <div className="h-31">
                   <Card className="mx-auto h-full">
                     <Title>Tasks</Title>
                     <DonutChartGraph />
-                    <br/>
+                    <br />
                     <Legend
                       className="mt-3 mx-auto w-1/2"
                       categories={["Todo Task", "Recurrence Task"]}
                       colors={["rose", "yellow"]}
                     />
-                    
                   </Card>
                 </div>
-              </Grid>
             </TabPanel>
           </TabPanels>
         </TabGroup>

frontend/tailwind.config.js

@@ -42,6 +42,7 @@ export default {
             strong: "#111827", // gray-900
             inverted: "#ffffff", // white
           },
+
         },
       },
       boxShadow:{