Move all the project-related code from the Dashboard component into a new component named 'Projects'. #131

Merged
vikas.nale merged 1 commits from Kartik_Enhancement#334 into Issue_May_4W 2025-05-24 04:49:06 +00:00
2 changed files with 39 additions and 27 deletions
Showing only changes of commit 7cc9181fb9 - Show all commits

View File

@ -8,6 +8,7 @@ import {
useDashboardTeamsCardData,
useDashboardTasksCardData,
} from "../../hooks/useDashboard_Data";
import Projects from "./Projects";
const Dashboard = () => {
const { projects, loading } = useProjects();
@ -95,28 +96,7 @@ const Dashboard = () => {
<div className="row gy-4">
{/* Projects 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="rounded-circle bx bx-building-house text-primary"></i>{" "}
Projects
</h5>
</div>
<div className="d-flex justify-content-around align-items-start mt-n2">
<div>
<h4 className="mb-0 fw-bold">
{projectsCardData.totalProjects?.toLocaleString()}
</h4>
<small className="text-muted">Total</small>
</div>
<div>
<h4 className="mb-0 fw-bold">
{projectsCardData.ongoingProjects?.toLocaleString()}
</h4>
<small className="text-muted">Ongoing</small>
</div>
</div>
</div>
<Projects projectsCardData={projectsCardData} />
</div>
{/* Teams Card */}
@ -240,8 +220,7 @@ const Dashboard = () => {
{["1D", "1W", "15D", "1M", "3M", "1Y", "5Y"].map((key) => (
<button
key={key}
className={`border-0 bg-transparent px-2 py-1 text-sm rounded ${
range === key
className={`border-0 bg-transparent px-2 py-1 text-sm rounded ${range === key
? " border-bottom border-primary text-primary"
: "text-muted"
}`}

View File

@ -0,0 +1,33 @@
import React from "react";
import { useDashboardProjectsCardData } from "../../hooks/useDashboard_Data";
const Projects = () => {
const { projectsCardData } = useDashboardProjectsCardData();
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="rounded-circle bx bx-building-house text-primary"></i>{" "}
Projects
</h5>
</div>
<div className="d-flex justify-content-around align-items-start mt-n2">
<div>
<h4 className="mb-0 fw-bold">
{projectsCardData.totalProjects?.toLocaleString()}
</h4>
<small className="text-muted">Total</small>
</div>
<div>
<h4 className="mb-0 fw-bold">
{projectsCardData.ongoingProjects?.toLocaleString()}
</h4>
<small className="text-muted">Ongoing</small>
</div>
</div>
</div>
);
};
export default Projects;