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

View File

@ -8,6 +8,7 @@ import {
useDashboardTeamsCardData,
useDashboardTasksCardData,
} from "../../hooks/useDashboard_Data";
import Projects from "./Projects";
const Dashboard = () => {
const { projects, loading } = useProjects();
@ -93,30 +94,9 @@ const Dashboard = () => {
return (
<div className="container-xxl flex-grow-1 container-p-y">
<div className="row gy-4">
{/* Projects Card */}
{/* 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 */}
@ -209,7 +189,7 @@ const Dashboard = () => {
{selectedProjectId === "all"
? "All Projects"
: projects?.find((p) => p.id === selectedProjectId)
?.name || "Select Project"}
?.name || "Select Project"}
</button>
<ul className="dropdown-menu">
@ -240,11 +220,10 @@ 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"
}`}
}`}
style={{ cursor: "pointer", transition: "all 0.2s ease" }}
onClick={() => setRange(key)}
>

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;