Merge pull request 'Move all the project-related code from the Dashboard component into a new component named 'Projects'.' (#131) from Kartik_Enhancement#334 into Issue_May_4W
Reviewed-on: #131
This commit is contained in:
commit
9a60cebc42
@ -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)}
|
||||
>
|
||||
|
33
src/components/Dashboard/Projects.jsx
Normal file
33
src/components/Dashboard/Projects.jsx
Normal 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;
|
Loading…
x
Reference in New Issue
Block a user