Completed kpi card.

frontend/src/components/authentication/SignUpPage.jsx

@@ -54,6 +54,7 @@ export default function SignUp() {
   const handleChange = (e) => {
     const { name, value } = e.target;
     setFormData({ ...formData, [name]: value });
+    console.log(formData);
   };
   {
     /* Particles Loader*/
@@ -218,7 +219,7 @@ export default function SignUp() {
           </div>
           <br></br>
 
-          {/* Login Button */}
+          {/* Signups Button */}
           <button className="btn btn-success w-full " onClick={handleSubmit}>
             Signup
           </button>

frontend/src/components/dashboard/Areachart.jsx

@@ -0,0 +1,65 @@
+import { AreaChart, Title } from "@tremor/react";
+import React from "react";
+import axiosInstance from "../../api/configs/AxiosConfig";
+
+const fetchAreaChartData = async () => {
+    let res = await axiosInstance.get("/dashboard/weekly/");
+    console.log(res.data);
+    const areaChartData = [
+        {
+            date: "Monday",
+            "This Week": res.data[0]["This Week"],
+            "Last Week": res.data[0]["Last Week"],
+        },
+        {
+            date: "Tuesday",
+            "This Week": res.data[1]["This Week"],
+            "Last Week": res.data[1]["Last Week"],
+        },
+        {
+            date: "Wednesday",
+            "This Week": res.data[2]["This Week"],
+            "Last Week": res.data[2]["Last Week"],
+        },
+        {
+            date: "Thursday",
+            "This Week": res.data[3]["This Week"],
+            "Last Week": res.data[3]["Last Week"],
+        },
+        {
+            date: "Friday",
+            "This Week": res.data[4]["This Week"],
+            "Last Week": res.data[4]["Last Week"],
+        },
+        {
+            date: "Saturday",
+            "This Week": res.data[5]["This Week"],
+            "Last Week": res.data[5]["Last Week"],
+        },
+        {
+            date: "Sunday",
+            "This Week": res.data[6]["This Week"],
+            "Last Week": res.data[6]["Last Week"],
+        },
+    ];
+}
+
+const areaChartDataArray = await fetchAreaChartData();
+export const AreaChartGraph = () => {
+    const [value, setValue] = React.useState(null);
+    return (
+        <>
+            <Title>Number of tasks statistics vs. last week</Title>
+            <AreaChart
+                className="mt-6"
+                data={areaChartDataArray}
+                index="date"
+                categories={["This Week", "Last Week"]}
+                colors={["neutral", "indigo"]}
+                yAxisWidth={30}
+                onValueChange={(v) => setValue(v)}
+                showAnimation
+            />
+        </>
+    );
+};

frontend/src/components/dashboard/Barchart.jsx

@@ -1,48 +1,51 @@
-import { BarChart, Card, Title } from "@tremor/react";
+import { BarChart, Title } from "@tremor/react";
 import React from "react";
 import axiosInstance from "../../api/configs/AxiosConfig";
 
 const fetchBarChartData = async () => {
-}
+  let res = await axiosInstance.get("/dashboard/weekly/");
-const chartdata3 = [
+  console.log(res.data);
+  const barchartData = [
     {
       date: "Monday",
-    "This Week": 45,
+      "This Week": res.data[0]["Completed This Week"],
-    "Last Week": 78,
+      "Last Week": res.data[0]["Completed Last Week"],
     },
     {
       date: "Tuesday",
-    "This Week": 52,
+      "This Week": res.data[1]["Completed This Week"],
-    "Last Week": 71,
+      "Last Week": res.data[1]["Completed Last Week"],
     },
     {
       date: "Wednesday",
-    "2022": 48,
+      "This Week": res.data[2]["Completed This Week"],
-    "2023": 80,
+      "Last Week": res.data[2]["Completed Last Week"],
     },
     {
       date: "Thursday",
-    "2022": 61,
+      "This Week": res.data[3]["Completed This Week"],
-    "2023": 65,
+      "Last Week": res.data[3]["Completed Last Week"],
     },
     {
       date: "Friday",
-    "2022": 55,
+      "This Week": res.data[4]["Completed This Week"],
-    "2023": 58,
+      "Last Week": res.data[4]["Completed Last Week"],
     },
     {
       date: "Saturday",
-    "2022": 67,
+      "This Week": res.data[5]["Completed This Week"],
-    "2023": 62,
+      "Last Week": res.data[5]["Completed Last Week"],
     },
     {
       date: "Sunday",
-    "2022": 60,
+      "This Week": res.data[6]["Completed This Week"],
-    "2023": 54,
+      "Last Week": res.data[6]["Completed Last Week"],
     },
-
   ];
+  return barchartData;
  
+};
+const barchartDataArray = await fetchBarChartData();
 export const BarChartGraph = () => {
   const [value, setValue] = React.useState(null);
   return (
@@ -50,7 +53,7 @@ export const BarChartGraph = () => {
         <Title>Task completed statistics vs. last week</Title>
         <BarChart
           className="mt-6"
-          data={chartdata3}
+          data={barchartDataArray}
           index="date"
           categories={["This Week", "Last Week"]}
           colors={["neutral", "indigo"]}

frontend/src/components/dashboard/KpiCard.jsx

@@ -1,21 +1,40 @@
 
 import { BadgeDelta, Card, Flex, Metric, ProgressBar, Text } from "@tremor/react";
+import React from "react";
+import axiosInstance from "../../api/configs/AxiosConfig";
+
+const fetchKpiCardData = async () => {
+  let res = await axiosInstance.get("/dashboard/stats/");
+  let completedThisWeek = res.data["completed_this_week"];
+  let completedLastWeek = res.data["completed_last_week"];
+  let percentage = (completedThisWeek / completedLastWeek)*100;
+  let incOrdec = undefined;
+  if (completedThisWeek <= completedLastWeek) {
+    incOrdec = "moderateDecrease";
+  }
+  if (completedThisWeek > completedLastWeek) {
+    incOrdec = "moderateIncrease";
+  }
+  return {completedThisWeek, completedLastWeek, incOrdec, percentage};
+}
+
+const {kpiCardDataArray, completedThisWeek ,completedLastWeek,  incOrdec, percentage} = await fetchKpiCardData();
+
 
 export default function KpiCard() {
   return (
+    
     <Card className="max-w-lg mx-auto">
       <Flex alignItems="start">
         <div>
-          <Text>Sales</Text>
+          <Metric>{completedThisWeek}</Metric>
-          <Metric>$ 12,699</Metric>
         </div>
-        <BadgeDelta deltaType="moderateIncrease">13.2%</BadgeDelta>
+        <BadgeDelta deltaType={incOrdec}>{percentage}%</BadgeDelta>
       </Flex>
       <Flex className="mt-4">
-        <Text className="truncate">68% ($ 149,940)</Text>
+        <Text className="truncate">vs. {completedLastWeek} (last week)</Text>
-        <Text>$ 220,500</Text>
       </Flex>
-      <ProgressBar value={15.9} className="mt-2" />
+      <ProgressBar value={percentage} className="mt-2" />
     </Card>
   );
 }

frontend/src/components/dashboard/dashboard.jsx

@@ -14,6 +14,7 @@ import {
 import KpiCard from "./kpiCard";
 import { BarChartGraph } from "./Barchart";
 import DonutChartGraph from "./DonutChart";
+import { AreaChartGraph } from "./Areachart";
 
 
 const valueFormatter = (number) =>
@@ -41,11 +42,13 @@ export default function Dashboard() {
                   <br />
                   <KpiCard />
                   <br />
-                  <KpiCard />
                 </Card>
                 <Card>
                 <BarChartGraph />
                 </Card>
+                <Card>
+                  <AreaChartGraph />
+                </Card>
                 <div className="h-31">
                   <Card className="mx-auto h-full">
                     <Title>Tasks</Title>