Move all the Teams-related code from the Dashboard component into a new component named 'Teams'

This commit is contained in:
kartik.sharma 2025-05-23 14:38:28 +05:30
parent 396706dcf5
commit 38607ab482
2 changed files with 35 additions and 22 deletions

View File

@ -8,6 +8,7 @@ import {
useDashboardTeamsCardData,
useDashboardTasksCardData,
} from "../../hooks/useDashboard_Data";
import Teams from "./Teams";
const Dashboard = () => {
const { projects, loading } = useProjects();
@ -120,28 +121,8 @@ const Dashboard = () => {
</div>
{/* Teams Card */}
<div className="col-sm-6 col-lg-4">
<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-group text-warning"></i> Teams
</h5>
</div>
<div className="d-flex justify-content-around align-items-start mt-n2">
<div>
<h4 className="mb-0 fw-bold">
{teamsCardData.totalEmployees?.toLocaleString()}
</h4>
<small className="text-muted">Total Employees</small>
</div>
<div>
<h4 className="mb-0 fw-bold">
{teamsCardData.inToday?.toLocaleString()}
</h4>
<small className="text-muted">In Today</small>
</div>
</div>
</div>
<div className="col-sm-6 col-lg-4">
<Teams teamsCardData={teamsCardData} /> {/* Use the Teams component */}
</div>
{/* Tasks Card */}

View File

@ -0,0 +1,32 @@
import React from "react";
import { useDashboardTeamsCardData } from "../../hooks/useDashboard_Data";
const Teams = () => {
const { teamsCardData } = useDashboardTeamsCardData();
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-group text-warning"></i> Teams
</h5>
</div>
<div className="d-flex justify-content-around align-items-start mt-n2">
<div>
<h4 className="mb-0 fw-bold">
{teamsCardData.totalEmployees?.toLocaleString()}
</h4>
<small className="text-muted">Total Employees</small>
</div>
<div>
<h4 className="mb-0 fw-bold">
{teamsCardData.inToday?.toLocaleString()}
</h4>
<small className="text-muted">In Today</small>
</div>
</div>
</div>
);
};
export default Teams;