React Query Integration for Server State Sync in Clinet #245
@ -22,12 +22,12 @@ const AboutProject = () => {
|
|||||||
<li className="d-flex align-items-center mb-3">
|
<li className="d-flex align-items-center mb-3">
|
||||||
<i className="bx bx-cog"></i>
|
<i className="bx bx-cog"></i>
|
||||||
<span className="fw-medium mx-2">Name:</span>{" "}
|
<span className="fw-medium mx-2">Name:</span>{" "}
|
||||||
<span>{data.name}</span>
|
<span>{projects_Details.name}</span>
|
||||||
</li>
|
</li>
|
||||||
<li className="d-flex align-items-center mb-3">
|
<li className="d-flex align-items-center mb-3">
|
||||||
<i className="bx bx-fingerprint"></i>
|
<i className="bx bx-fingerprint"></i>
|
||||||
<span className="fw-medium mx-2">Nick Name:</span>{" "}
|
<span className="fw-medium mx-2">Nick Name:</span>{" "}
|
||||||
<span> {data.shortName} </span>
|
<span> {projects_Details.shortName} </span>
|
||||||
</li>
|
</li>
|
||||||
<li className="d-flex align-items-center mb-3">
|
<li className="d-flex align-items-center mb-3">
|
||||||
<i className="bx bx-check"></i>
|
<i className="bx bx-check"></i>
|
||||||
|
@ -1,11 +1,16 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import {useEmployeesByProjectAllocated, useProjects} from "../../hooks/useProjects";
|
import {
|
||||||
import {formatNumber} from "../../utils/dateUtils";
|
useEmployeesByProjectAllocated,
|
||||||
|
useProjects,
|
||||||
|
} from "../../hooks/useProjects";
|
||||||
|
import { formatNumber } from "../../utils/dateUtils";
|
||||||
|
import ProgressBar from "../common/ProgressBar";
|
||||||
|
|
||||||
const ProjectOverview = ({project}) =>{
|
const ProjectOverview = ({ project }) => {
|
||||||
const {projects} = useProjects()
|
const { projects } = useProjects();
|
||||||
|
|
||||||
|
const project_detail = projects.find((pro) => pro.id == project);
|
||||||
|
|
||||||
const project_detail = projects.find( ( pro ) => pro.id == project )
|
|
||||||
return (
|
return (
|
||||||
<div className="card mb-6">
|
<div className="card mb-6">
|
||||||
<div className="card-header text-start">
|
<div className="card-header text-start">
|
||||||
@ -20,13 +25,12 @@ const ProjectOverview = ({project}) =>{
|
|||||||
<li className="d-flex align-items-center mb-3">
|
<li className="d-flex align-items-center mb-3">
|
||||||
<i className="bx bx-check"></i>
|
<i className="bx bx-check"></i>
|
||||||
<span className="fw-medium mx-2">Task Planned:</span>{" "}
|
<span className="fw-medium mx-2">Task Planned:</span>{" "}
|
||||||
<span>{formatNumber(project_detail?.plannedWork)
|
<span>{formatNumber(project_detail?.plannedWork)}</span>
|
||||||
}</span>
|
|
||||||
</li>
|
</li>
|
||||||
<li className="d-flex align-items-center mb-3">
|
<li className="d-flex align-items-center mb-3">
|
||||||
<i className="bx bx-star"></i>
|
<i className="bx bx-star"></i>
|
||||||
<span className="fw-medium mx-2">Task Completed:</span>{" "}
|
<span className="fw-medium mx-2">Task Completed:</span>{" "}
|
||||||
<span>{formatNumber(project_detail?.completedWork) }</span>
|
<span>{formatNumber(project_detail?.completedWork)}</span>
|
||||||
</li>
|
</li>
|
||||||
<li className="d-flex align-items-center mb-3">
|
<li className="d-flex align-items-center mb-3">
|
||||||
<i className="bx bx-user"></i>
|
<i className="bx bx-user"></i>
|
||||||
@ -38,16 +42,21 @@ const ProjectOverview = ({project}) =>{
|
|||||||
<>
|
<>
|
||||||
<div className="d-flex text-end mb-2 mt-5">
|
<div className="d-flex text-end mb-2 mt-5">
|
||||||
<small className="text-body text-muted ">
|
<small className="text-body text-muted ">
|
||||||
{Math.floor(
|
{/* {Math.floor(
|
||||||
getProgressInNumber(
|
getProgressInNumber(
|
||||||
project_detail.plannedWork,
|
|
||||||
project_detail.completedWork
|
project_detail.completedWork
|
||||||
)
|
)
|
||||||
) || 0}{" "}
|
) || 0}{" "} */}
|
||||||
|
{
|
||||||
|
(formatNumber(project_detail.plannedWork),
|
||||||
|
"/",
|
||||||
|
formatNumber(project_detail.completedWork))
|
||||||
|
}
|
||||||
% Completed
|
% Completed
|
||||||
</small>
|
</small>
|
||||||
</div>
|
</div>
|
||||||
<div
|
{/* <div
|
||||||
className="progress mb-4 rounded"
|
className="progress mb-4 rounded"
|
||||||
style={{ height: "8px" }}
|
style={{ height: "8px" }}
|
||||||
>
|
>
|
||||||
@ -64,7 +73,12 @@ const ProjectOverview = ({project}) =>{
|
|||||||
aria-valuemin="0"
|
aria-valuemin="0"
|
||||||
aria-valuemax={project_detail.plannedWork}
|
aria-valuemax={project_detail.plannedWork}
|
||||||
></div>
|
></div>
|
||||||
</div>
|
</div> */}
|
||||||
|
<ProgressBar
|
||||||
|
completedWork={formatNumber(project_detail?.completedWork)}
|
||||||
|
plannedWork={formatNumber(project_detail?.plannedWork)}
|
||||||
|
className="m-0 text-info"
|
||||||
|
/>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</li>
|
</li>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user