91 lines
3.3 KiB
JavaScript
91 lines
3.3 KiB
JavaScript
import React from "react";
|
|
import {
|
|
useEmployeesByProjectAllocated,
|
|
useProjects,
|
|
} from "../../hooks/useProjects";
|
|
import { formatNumber, getCompletionPercentage } from "../../utils/dateUtils";
|
|
import ProgressBar from "../common/ProgressBar";
|
|
|
|
const ProjectOverview = ({ project }) => {
|
|
const { projects } = useProjects();
|
|
|
|
const project_detail = projects.find((pro) => pro.id == project);
|
|
|
|
return (
|
|
<div className="card mb-6">
|
|
<div className="card-header text-start">
|
|
<h6 className="card-action-title mb-0">
|
|
{" "}
|
|
<i className="fa fa-line-chart rounded-circle text-primary"></i>
|
|
<span className="ms-2">Project Statistics</span>
|
|
</h6>
|
|
</div>
|
|
<div className="card-body">
|
|
<ul className="list-unstyled mb-0 mt-3 pt-1">
|
|
<li className="d-flex align-items-center mb-3">
|
|
<i className="bx bx-check"></i>
|
|
<span className="fw-medium mx-2">Task Planned:</span>{" "}
|
|
<span>{formatNumber(project_detail?.plannedWork)}</span>
|
|
</li>
|
|
<li className="d-flex align-items-center mb-3">
|
|
<i className="bx bx-star"></i>
|
|
<span className="fw-medium mx-2">Task Completed:</span>{" "}
|
|
<span>{formatNumber(project_detail?.completedWork)}</span>
|
|
</li>
|
|
<li className="d-flex align-items-center mb-3">
|
|
<i className="bx bx-user"></i>
|
|
<span className="fw-medium mx-2">Current team Size:</span>{" "}
|
|
<span>{project_detail?.teamSize}</span>
|
|
</li>
|
|
<li className=" mb-3">
|
|
{project_detail && (
|
|
<>
|
|
<div className="d-flex text-end mb-2 mt-5">
|
|
<small className="text-body text-muted ">
|
|
{/* {Math.floor(
|
|
getProgressInNumber(
|
|
|
|
project_detail.completedWork
|
|
)
|
|
) || 0}{" "} */}
|
|
{
|
|
getCompletionPercentage( formatNumber(project_detail.completedWork),formatNumber(project_detail.plannedWork))
|
|
|
|
}
|
|
% Completed
|
|
</small>
|
|
</div>
|
|
{/* <div
|
|
className="progress mb-4 rounded"
|
|
style={{ height: "8px" }}
|
|
>
|
|
<div
|
|
className="progress-bar rounded"
|
|
role="progressbar"
|
|
style={{
|
|
width: getProgress(
|
|
project_detail.plannedWork,
|
|
project_detail.completedWork
|
|
),
|
|
}}
|
|
aria-valuenow={project_detail.completedWork}
|
|
aria-valuemin="0"
|
|
aria-valuemax={project_detail.plannedWork}
|
|
></div>
|
|
</div> */}
|
|
<ProgressBar
|
|
completedWork={formatNumber(project_detail?.completedWork)}
|
|
plannedWork={formatNumber(project_detail?.plannedWork)}
|
|
className="m-0 text-info"
|
|
/>
|
|
</>
|
|
)}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProjectOverview;
|