From f9b0603f8b194c1bd7a5fab82cb41cd693e2d767 Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Tue, 21 Nov 2023 00:30:01 +0700
Subject: [PATCH] Completed kpi card.

---
 .../components/authentication/SignUpPage.jsx  |  3 +-
 .../src/components/dashboard/Areachart.jsx    | 65 ++++++++++++++
 .../src/components/dashboard/Barchart.jsx     | 87 ++++++++++---------
 frontend/src/components/dashboard/KpiCard.jsx | 31 +++++--
 .../src/components/dashboard/dashboard.jsx    |  5 +-
 5 files changed, 141 insertions(+), 50 deletions(-)
 create mode 100644 frontend/src/components/dashboard/Areachart.jsx

diff --git a/frontend/src/components/authentication/SignUpPage.jsx b/frontend/src/components/authentication/SignUpPage.jsx
index 5d3c76f..6bcc8dc 100644
--- a/frontend/src/components/authentication/SignUpPage.jsx
+++ b/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>
diff --git a/frontend/src/components/dashboard/Areachart.jsx b/frontend/src/components/dashboard/Areachart.jsx
new file mode 100644
index 0000000..9d0fe41
--- /dev/null
+++ b/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
+            />
+        </>
+    );
+};
\ No newline at end of file
diff --git a/frontend/src/components/dashboard/Barchart.jsx b/frontend/src/components/dashboard/Barchart.jsx
index 9636925..fcf9044 100644
--- a/frontend/src/components/dashboard/Barchart.jsx
+++ b/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 () => {
-}
-const chartdata3 = [
-  {
-    date: "Monday",
-    "This Week": 45,
-    "Last Week": 78,
-  },
-  {
-    date: "Tuesday",
-    "This Week": 52,
-    "Last Week": 71,
-  },
-  {
-    date: "Wednesday",
-    "2022": 48,
-    "2023": 80,
-  },
-  {
-    date: "Thursday",
-    "2022": 61,
-    "2023": 65,
-  },
-  {
-    date: "Friday",
-    "2022": 55,
-    "2023": 58,
-  },
-  {
-    date: "Saturday",
-    "2022": 67,
-    "2023": 62,
-  },
-  {
-    date: "Sunday",
-    "2022": 60,
-    "2023": 54,
-  },
-
-];
-
+  let res = await axiosInstance.get("/dashboard/weekly/");
+  console.log(res.data);
+  const barchartData = [
+    {
+      date: "Monday",
+      "This Week": res.data[0]["Completed This Week"],
+      "Last Week": res.data[0]["Completed Last Week"],
+    },
+    {
+      date: "Tuesday",
+      "This Week": res.data[1]["Completed This Week"],
+      "Last Week": res.data[1]["Completed Last Week"],
+    },
+    {
+      date: "Wednesday",
+      "This Week": res.data[2]["Completed This Week"],
+      "Last Week": res.data[2]["Completed Last Week"],
+    },
+    {
+      date: "Thursday",
+      "This Week": res.data[3]["Completed This Week"],
+      "Last Week": res.data[3]["Completed Last Week"],
+    },
+    {
+      date: "Friday",
+      "This Week": res.data[4]["Completed This Week"],
+      "Last Week": res.data[4]["Completed Last Week"],
+    },
+    {
+      date: "Saturday",
+      "This Week": res.data[5]["Completed This Week"],
+      "Last Week": res.data[5]["Completed Last Week"],
+    },
+    {
+      date: "Sunday",
+      "This Week": res.data[6]["Completed This Week"],
+      "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"]}
diff --git a/frontend/src/components/dashboard/KpiCard.jsx b/frontend/src/components/dashboard/KpiCard.jsx
index 08d7a99..2ed9f10 100644
--- a/frontend/src/components/dashboard/KpiCard.jsx
+++ b/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>$ 12,699</Metric>
+          <Metric>{completedThisWeek}</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>$ 220,500</Text>
+        <Text className="truncate">vs. {completedLastWeek} (last week)</Text>
       </Flex>
-      <ProgressBar value={15.9} className="mt-2" />
+      <ProgressBar value={percentage} className="mt-2" />
     </Card>
   );
 }
\ No newline at end of file
diff --git a/frontend/src/components/dashboard/dashboard.jsx b/frontend/src/components/dashboard/dashboard.jsx
index 702318b..ac26298 100644
--- a/frontend/src/components/dashboard/dashboard.jsx
+++ b/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>