Move all the Tasks-related code from the Dashboard component into a new component named 'Tasks'.
This commit is contained in:
parent
396706dcf5
commit
377c024e33
@ -8,6 +8,7 @@ import {
|
|||||||
useDashboardTeamsCardData,
|
useDashboardTeamsCardData,
|
||||||
useDashboardTasksCardData,
|
useDashboardTasksCardData,
|
||||||
} from "../../hooks/useDashboard_Data";
|
} from "../../hooks/useDashboard_Data";
|
||||||
|
import TasksCard from "./Tasks";
|
||||||
|
|
||||||
const Dashboard = () => {
|
const Dashboard = () => {
|
||||||
const { projects, loading } = useProjects();
|
const { projects, loading } = useProjects();
|
||||||
@ -145,28 +146,8 @@ const Dashboard = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Tasks Card */}
|
{/* Tasks Card */}
|
||||||
<div className="col-sm-6 col-lg-4">
|
<div className="col-sm-6 col-lg-4">
|
||||||
<div className="card p-3 h-100 text-center d-flex justify-content-between">
|
<TasksCard tasksCardData={tasksCardData} /> {/* Use the TasksCard component */}
|
||||||
<div className="d-flex justify-content-start align-items-center mb-3">
|
|
||||||
<h5 className="fw-bold mb-0 ms-2">
|
|
||||||
<i className="bx bx-task text-success"></i> Tasks
|
|
||||||
</h5>
|
|
||||||
</div>
|
|
||||||
<div className="d-flex justify-content-around align-items-start mt-n2">
|
|
||||||
<div>
|
|
||||||
<h4 className="mb-0 fw-bold">
|
|
||||||
{tasksCardData.totalTasks?.toLocaleString()}
|
|
||||||
</h4>
|
|
||||||
<small className="text-muted">Total</small>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h4 className="mb-0 fw-bold">
|
|
||||||
{tasksCardData.completedTasks?.toLocaleString()}
|
|
||||||
</h4>
|
|
||||||
<small className="text-muted">Completed</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Bar Chart */}
|
{/* Bar Chart */}
|
||||||
|
32
src/components/Dashboard/Tasks.jsx
Normal file
32
src/components/Dashboard/Tasks.jsx
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { useDashboardTasksCardData } from "../../hooks/useDashboard_Data";
|
||||||
|
|
||||||
|
const TasksCard = () => {
|
||||||
|
const { tasksCardData } = useDashboardTasksCardData();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="card p-3 h-100 text-center d-flex justify-content-between">
|
||||||
|
<div className="d-flex justify-content-start align-items-center mb-3">
|
||||||
|
<h5 className="fw-bold mb-0 ms-2">
|
||||||
|
<i className="bx bx-task text-success"></i> Tasks
|
||||||
|
</h5>
|
||||||
|
</div>
|
||||||
|
<div className="d-flex justify-content-around align-items-start mt-n2">
|
||||||
|
<div>
|
||||||
|
<h4 className="mb-0 fw-bold">
|
||||||
|
{tasksCardData.totalTasks?.toLocaleString()}
|
||||||
|
</h4>
|
||||||
|
<small className="text-muted">Total</small>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="mb-0 fw-bold">
|
||||||
|
{tasksCardData.completedTasks?.toLocaleString()}
|
||||||
|
</h4>
|
||||||
|
<small className="text-muted">Completed</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TasksCard;
|
Loading…
x
Reference in New Issue
Block a user