React Query Integration for Server State Sync in Clinet #245

Merged
admin merged 60 commits from react-query into main 2025-07-11 11:32:19 +00:00
2 changed files with 29 additions and 15 deletions
Showing only changes of commit 9447178985 - Show all commits

View File

@ -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>

View File

@ -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>