TurTaskProject/TurTaskWeb
1
0
Fork 0
mirror of https://github.com/TurTaskProject/TurTaskWeb.git synced 2025-12-19 05:54:07 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix capitalization of Dashboard component and add

Browse Source 
task statistics to Overview tab
This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB 2023-11-25 15:18:21 +07:00
parent debcbef7ca
commit c29543407f
2 changed files with 57 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/App.jsx
View File

@ -11,7 +11,7 @@ import { SideNav } from "./components/navigations/IconSideNav";
import { Eisenhower } from "./components/EisenhowerMatrix/Eisenhower";
import { PrivateRoute } from "./PrivateRoute";
import { ProfileUpdatePage } from "./components/profile/profilePage";
import { Dashboard } from "./components/dashboard/dashboard";
import { Dashboard } from "./components/dashboard/Dashboard";
import { LandingPage } from "./components/landingPage/LandingPage";
import { PublicRoute } from "./PublicRoute";
import { useAuth } from "./hooks/AuthHooks";

56
frontend/src/components/dashboard/dashboard.jsx
View File

@ -9,17 +9,43 @@ import {
Text,
Title,
Legend,
Metric,
} from "@tremor/react";
import { KpiCard } from "./KpiCard";
import { BarChartGraph } from "./Barchart";
import { AreaChartGraph } from "./Areachart";
import { DonutChartGraph } from "./PieChart";
import { ProgressCircleChart } from "./ProgressCircle";
import { axiosInstance } from "src/api/AxiosConfig";
import { useEffect, useState } from "react";
const valueFormatter = (number) =>
`$ ${new Intl.NumberFormat("us").format(number).toString()}`;
export function Dashboard() {
const [totalTask, setTotalTask] = useState(0);
const [totalCompletedTasks, settotalCompletedTasks] = useState(0);
const [totalCompletedTasksToday, setTotalCompletedTasksToday] = useState(0);
const [totalTaskToday, setTotalTaskToday] = useState(0);
useEffect(() => {
const fetchData = async () => {
const response = await axiosInstance.get("/dashboard/todostats/");
const totalTaskValue = response.data.total_tasks || 0;
const totalCompletedTasksValue = response.data.total_completed_tasks || 0;
const totalCompletedTasksTodayValue =
response.data.total_completed_tasks_today || 0;
const totalTaskToday = response.data.total_task_today || 0;
setTotalTask(totalTaskValue);
settotalCompletedTasks(totalCompletedTasksValue);
setTotalCompletedTasksToday(totalCompletedTasksTodayValue);
setTotalTaskToday(totalTaskToday);
};
fetchData();
}, []);
return (
<div className="flex flex-col p-12">
<div>
@ -59,8 +85,38 @@ export function Dashboard() {
</Card>
</Grid>
</TabPanel>
{/*Overview Tab*/}
<TabPanel>
<Grid numItemsMd={2} numItemsLg={3} className="gap-6 mt-6">
<Card>
<Card
className="max-w-xs mx-auto"
decoration="top"
decorationColor="yellow"
>
<Text>Total tasks</Text>
<Metric>{totalTask}</Metric>
</Card>
<br></br>
<Card
className="max-w-xs mx-auto"
decoration="top"
decorationColor="rose"
>
<Text>Total completed tasks</Text>
<Metric>{totalCompletedTasks}</Metric>
</Card>
<br></br>
<Card
className="max-w-xs mx-auto"
decoration="top"
decorationColor="orange"
>
<Text>Task completed today</Text>
<Metric>{totalCompletedTasksToday}</Metric>
</Card>
</Card>
{/*Pie chart graph*/}
<div className="h-31">
<Card className="mx-auto h-full">
<Title>Tasks</Title>