diff --git a/frontend/src/components/authentication/LoginPage.jsx b/frontend/src/components/authentication/LoginPage.jsx index 93f8f0b..c76ff68 100644 --- a/frontend/src/components/authentication/LoginPage.jsx +++ b/frontend/src/components/authentication/LoginPage.jsx @@ -1,18 +1,17 @@ -import React, { useEffect, useState } from "react"; -import { useNavigate } from "react-router-dom"; +import { useEffect, useState } from "react"; +import { useNavigate, redirect } from "react-router-dom"; import { useGoogleLogin } from "@react-oauth/google"; import { useCallback } from "react"; import Particles from "react-tsparticles"; import { loadFull } from "tsparticles"; import refreshAccessToken from "./refreshAcesstoken"; import axiosapi from "../../api/AuthenticationApi"; -import { useAuth } from "../../hooks/authentication/IsAuthenticated"; import { FcGoogle } from "react-icons/fc"; - +import { useAuth } from "src/hooks/AuthHooks"; function LoginPage() { + const { setIsAuthenticated } = useAuth(); const Navigate = useNavigate(); - const { isAuthenticated, setIsAuthenticated } = useAuth(); useEffect(() => { if (!refreshAccessToken()) { @@ -43,15 +42,13 @@ function LoginPage() { // On successful login, store tokens and set the authorization header localStorage.setItem("access_token", res.data.access); localStorage.setItem("refresh_token", res.data.refresh); - axiosapi.axiosInstance.defaults.headers["Authorization"] = - "Bearer " + res.data.access; + axiosapi.axiosInstance.defaults.headers["Authorization"] = "Bearer " + res.data.access; setIsAuthenticated(true); - Navigate("/"); + redirect("/"); }) .catch((err) => { console.log("Login failed"); console.log(err); - setIsAuthenticated(false); }); }; @@ -71,7 +68,6 @@ function LoginPage() { } } catch (error) { console.error("Error with the POST request:", error); - setIsAuthenticated(false); } }, onError: (errorResponse) => console.log(errorResponse), @@ -89,10 +85,7 @@ function LoginPage() { }, []); return ( -
+
{/* Particles Container */}
OR
{/* Login with Google Button */} - {/* Forgot Password Link */}
diff --git a/frontend/src/components/dashboard/Areachart.jsx b/frontend/src/components/dashboard/Areachart.jsx index 3dde527..862fa21 100644 --- a/frontend/src/components/dashboard/Areachart.jsx +++ b/frontend/src/components/dashboard/Areachart.jsx @@ -1,90 +1,24 @@ import { AreaChart, Title } from "@tremor/react"; -import React from "react"; +import { useState, useEffect } from "react"; import axiosInstance from "src/api/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: "Mon", - "This Week": 1, - "Last Week": 2, - }, - { - date: "Tue", - "This Week": 5, - "Last Week": 2, - }, - { - date: "Wed", - "This Week": 7, - "Last Week": 9, - }, - { - date: "Th", - "This Week": 10, - "Last Week": 3, - }, - { - date: "Fri", - "This Week": 5, - "Last Week": 1, - }, - { - date: "Sat", - "This Week": 7, - "Last Week": 8, - }, - { - date: "Sun", - "This Week": 3, - "Last Week": 8, - }, - ]; - return areaChartData; -}; - -const areaChartDataArray = await fetchAreaChartData(); export const AreaChartGraph = () => { - const [value, setValue] = React.useState(null); + const [areaChartDataArray, setAreaChartDataArray] = useState([]); + + useEffect(() => { + const fetchAreaChartData = async () => { + try { + const response = await axiosInstance.get("/dashboard/weekly/"); + const areaChartData = response.data; + setAreaChartDataArray(areaChartData); + } catch (error) { + console.error("Error fetching area chart data:", error); + } + }; + + fetchAreaChartData(); + }, []); + return ( <> Number of tasks statistics vs. last week @@ -95,7 +29,6 @@ export const AreaChartGraph = () => { categories={["This Week", "Last Week"]} colors={["neutral", "indigo"]} yAxisWidth={30} - onValueChange={(v) => setValue(v)} showAnimation /> diff --git a/frontend/src/components/dashboard/Barchart.jsx b/frontend/src/components/dashboard/Barchart.jsx index dbc5650..63a2c4f 100644 --- a/frontend/src/components/dashboard/Barchart.jsx +++ b/frontend/src/components/dashboard/Barchart.jsx @@ -1,89 +1,24 @@ import { BarChart, Title } from "@tremor/react"; -import React from "react"; +import { useState, useEffect } from "react"; import axiosInstance from "src/api/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: "Mon", - "This Week": 1, - "Last Week": 2, - }, - { - date: "Tue", - "This Week": 5, - "Last Week": 2, - }, - { - date: "Wed", - "This Week": 7, - "Last Week": 9, - }, - { - date: "Th", - "This Week": 10, - "Last Week": 3, - }, - { - date: "Fri", - "This Week": 5, - "Last Week": 1, - }, - { - date: "Sat", - "This Week": 7, - "Last Week": 8, - }, - { - date: "Sun", - "This Week": 3, - "Last Week": 8, - }, - ]; - return barchartData; -}; -const barchartDataArray = await fetchBarChartData(); export const BarChartGraph = () => { - const [value, setValue] = React.useState(null); + const [barchartDataArray, setBarChartDataArray] = useState([]); + + useEffect(() => { + const fetchAreaChartData = async () => { + try { + const response = await axiosInstance.get("/dashboard/weekly/"); + const barchartDataArray = response.data; + setBarChartDataArray(barchartDataArray); + } catch (error) { + console.error("Error fetching area chart data:", error); + } + }; + + fetchAreaChartData(); + }, []); + return ( <> Task completed statistics vs. last week @@ -94,7 +29,6 @@ export const BarChartGraph = () => { categories={["This Week", "Last Week"]} colors={["neutral", "indigo"]} yAxisWidth={30} - onValueChange={(v) => setValue(v)} showAnimation /> diff --git a/frontend/src/components/dashboard/DonutChart.jsx b/frontend/src/components/dashboard/DonutChart.jsx index 4db0ceb..ccab32f 100644 --- a/frontend/src/components/dashboard/DonutChart.jsx +++ b/frontend/src/components/dashboard/DonutChart.jsx @@ -1,40 +1,37 @@ import { DonutChart } from "@tremor/react"; import axiosInstance from "src/api/AxiosConfig"; +import { useState, useEffect } from "react"; -const fetchDonutData = async () => { - try { - 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: "Todo", count: todoCount }, - { name: "Recurrence", count: recurrenceCount }, - ]; - return donutData; - } catch (error) { - console.error("Error fetching donut data:", error); - return []; - } -}; - -const donutDataArray = await fetchDonutData(); export default 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 ( setValue(v)} showAnimation radius={25} /> diff --git a/frontend/src/components/dashboard/KpiCard.jsx b/frontend/src/components/dashboard/KpiCard.jsx index 4af8a22..47c7162 100644 --- a/frontend/src/components/dashboard/KpiCard.jsx +++ b/frontend/src/components/dashboard/KpiCard.jsx @@ -1,39 +1,57 @@ import { BadgeDelta, Card, Flex, Metric, ProgressBar, Text } from "@tremor/react"; -import React from "react"; +import { useEffect, useState } from "react"; import axiosInstance from "src/api/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 completedThisWeek = 4; - let completedLastWeek = 23; - 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() { + const [kpiCardData, setKpiCardData] = useState({ + completedThisWeek: 0, + completedLastWeek: 0, + incOrdec: undefined, + percentage: 0, + }); + + useEffect(() => { + const fetchKpiCardData = async () => { + try { + const response = await axiosInstance.get("/dashboard/stats/"); + const completedThisWeek = response.data.completed_this_week || 0; + const completedLastWeek = response.data.completed_last_week || 0; + const percentage = (completedThisWeek / completedLastWeek) * 100; + let incOrdec = undefined; + + if (completedThisWeek <= completedLastWeek) { + incOrdec = "moderateDecrease"; + } + if (completedThisWeek > completedLastWeek) { + incOrdec = "moderateIncrease"; + } + + setKpiCardData({ + completedThisWeek, + completedLastWeek, + incOrdec, + percentage, + }); + } catch (error) { + console.error("Error fetching KPI card data:", error); + } + }; + + fetchKpiCardData(); + }, []); + return (
- {completedThisWeek} + {kpiCardData.completedThisWeek}
- {percentage.toFixed(0)}% + {kpiCardData.percentage.toFixed(0)}% - vs. {completedLastWeek} (last week) + vs. {kpiCardData.completedLastWeek} (last week) - + ); } diff --git a/frontend/src/components/dashboard/ProgressCircle.jsx b/frontend/src/components/dashboard/ProgressCircle.jsx index 40b8d0b..c6d09b3 100644 --- a/frontend/src/components/dashboard/ProgressCircle.jsx +++ b/frontend/src/components/dashboard/ProgressCircle.jsx @@ -1,29 +1,35 @@ -import { Card, Flex, ProgressCircle, Text } from "@tremor/react"; -import React from "react"; +import { Card, Flex, ProgressCircle } from "@tremor/react"; +import { useState, useEffect } from "react"; import axiosInstance from "src/api/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() { + const [progressData, setProgressData] = useState(0); + + useEffect(() => { + const fetchProgressData = async () => { + try { + const response = await axiosInstance.get("/dashboard/stats/"); + let completedLastWeek = response.data.completed_last_week || 0; + let assignLastWeek = response.data.tasks_assigned_last_week || 0; + + if (completedLastWeek === undefined) { + completedLastWeek = 0; + } + if (assignLastWeek === undefined) { + assignLastWeek = 0; + } + + const progress = (completedLastWeek / assignLastWeek) * 100; + + setProgressData(progress); + } catch (error) { + console.error("Error fetching progress data:", error); + } + }; + + fetchProgressData(); + }, []); + return ( diff --git a/frontend/src/components/navigations/Navbar.jsx b/frontend/src/components/navigations/Navbar.jsx index aeb0065..5a024af 100644 --- a/frontend/src/components/navigations/Navbar.jsx +++ b/frontend/src/components/navigations/Navbar.jsx @@ -1,18 +1,17 @@ -import * as React from "react"; import { useNavigate } from "react-router-dom"; import axiosapi from "../../api/AuthenticationApi"; -import { useAuth } from "../../hooks/authentication/IsAuthenticated"; +import { useAuth } from "src/hooks/AuthHooks"; const settings = { - Profile: '/profile', - Account: '/account', + Profile: "/profile", + Account: "/account", }; function NavBar() { const Navigate = useNavigate(); - const { isAuthenticated, setIsAuthenticated } = useAuth(); + console.log(isAuthenticated); const logout = () => { axiosapi.apiUserLogout(); setIsAuthenticated(false);