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

completed dashboard.

Browse Source
This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB 2023-11-25 15:41:54 +07:00
parent 7867a75dcd
commit 779e45aa89
1 changed files with 51 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,6 +10,8 @@ import {
Title, Title,
Legend, Legend,
Metric, Metric,
ProgressCircle,
Flex,
} from "@tremor/react"; } from "@tremor/react";
import { KpiCard } from "./KpiCard"; import { KpiCard } from "./KpiCard";
import { BarChartGraph } from "./Barchart"; import { BarChartGraph } from "./Barchart";
@ -26,7 +28,8 @@ export function Dashboard() {
const [totalTask, setTotalTask] = useState(0); const [totalTask, setTotalTask] = useState(0);
const [totalCompletedTasks, settotalCompletedTasks] = useState(0); const [totalCompletedTasks, settotalCompletedTasks] = useState(0);
const [totalCompletedTasksToday, setTotalCompletedTasksToday] = useState(0); const [totalCompletedTasksToday, setTotalCompletedTasksToday] = useState(0);
const [totalTaskToday, setTotalTaskToday] = useState(0); const [progressData, setProgressData] = useState(0);
const [overdueTask, setOverdueTask] = useState(0);
useEffect(() => { useEffect(() => {
const fetchData = async () => { const fetchData = async () => {
@ -36,11 +39,18 @@ export function Dashboard() {
const totalCompletedTasksTodayValue = const totalCompletedTasksTodayValue =
response.data.total_completed_tasks_today || 0; response.data.total_completed_tasks_today || 0;
const totalTaskToday = response.data.total_task_today || 0; const totalTaskToday = response.data.total_task_today || 0;
const totalCompletedTasksToday = response.data.tasks_completed_today || 0;
const overdueTasks = response.data.overdue_tasks || 0;
const progress =
(totalCompletedTasksToday / totalCompletedTasksToday) * 100;
setTotalTask(totalTaskValue); setTotalTask(totalTaskValue);
settotalCompletedTasks(totalCompletedTasksValue); settotalCompletedTasks(totalCompletedTasksValue);
setTotalCompletedTasksToday(totalCompletedTasksTodayValue); setTotalCompletedTasksToday(totalCompletedTasksTodayValue);
setTotalTaskToday(totalTaskToday); setTotalTaskToday(totalTaskToday);
setProgressData(progress);
setOverdueTask(overdueTasks);
}; };
fetchData(); fetchData();
@ -73,7 +83,7 @@ export function Dashboard() {
<ProgressCircleChart /> <ProgressCircleChart />
<Legend <Legend
className="mt-3 mx-auto w-1/2" className="mt-3 mx-auto w-1/2"
categories={["Completed Tasks", "Assigned Tasks"]} categories={["Completed Tasks"]}
colors={["indigo"]} colors={["indigo"]}
></Legend> ></Legend>
</Card> </Card>
@ -89,6 +99,7 @@ export function Dashboard() {
<TabPanel> <TabPanel>
<Grid numItemsMd={2} numItemsLg={3} className="gap-6 mt-6"> <Grid numItemsMd={2} numItemsLg={3} className="gap-6 mt-6">
<Card> <Card>
<Title className="mx-auto">Overview</Title>
<Card <Card
className="max-w-xs mx-auto" className="max-w-xs mx-auto"
decoration="top" decoration="top"
@ -110,25 +121,50 @@ export function Dashboard() {
<Card <Card
className="max-w-xs mx-auto" className="max-w-xs mx-auto"
decoration="top" decoration="top"
decorationColor="orange" decorationColor="pink"
> >
<Text>Task completed today</Text> <Text>Overdue tasks</Text>
<Metric>{totalCompletedTasksToday}</Metric> <Metric>{overdueTask}</Metric>
</Card> </Card>
<br></br>
</Card> </Card>
{/*Pie chart graph*/} {/*Pie chart graph*/}
<div className="h-31"> <Card className="mx-auto h-full">
<Card className="mx-auto h-full"> <Title>Overall completion rate</Title>
<Title>Tasks</Title> <DonutChartGraph />
<DonutChartGraph /> <br />
<br /> <Legend
className="mt-3 mx-auto w-1/2"
categories={["Completed Task", "Total Task"]}
colors={["rose", "yellow"]}
/>
</Card>
{/*Progress circle graph*/}
<Card className="max-w-lg mx-auto">
<Title>Today's progress</Title>
<br />
<Flex className="flex-col items-center">
<ProgressCircle
className="mt-6"
value={progressData}
size={200}
strokeWidth={10}
radius={60}
color="rose"
>
<span className="h-12 w-12 rounded-full bg-rose-100 flex items-center justify-center text-sm text-rose-500 font-medium">
{progressData.toFixed(0)} %
</span>
</ProgressCircle>
<br></br>
<Legend <Legend
className="mt-3 mx-auto w-1/2" className="mt-3 mx-auto w-1/2"
categories={["Completed Task", "Total Task"]} categories={["Completed Tasks"]}
colors={["rose", "yellow"]} colors={["rose"]}
/> ></Legend>
</Card> </Flex>
</div> </Card>
</Grid> </Grid>
</TabPanel> </TabPanel>
</TabPanels> </TabPanels>