fixed progress bar and team size on project Card

src/components/Project/ProjectCard.jsx

@@ -29,6 +29,10 @@ const ProjectCard = ({ projectData }) => {
     }
   };
 
+  const getProgress = (planned, completed) => {
+    return (completed * 100) / planned + "%";
+  };
+
   const handleClose = () => setShowModal( false );
   
   const getProjectStatusName = (statusId) => {
@@ -236,22 +240,31 @@ const ProjectCard = ({ projectData }) => {
             <div
               className="progress-bar rounded"
               role="progressbar"
-              style={{ width: "95%" }}
-              aria-valuenow="95"
+              style={{ width: getProgress(projectInfo.plannedWork,projectInfo.completedWork) }}
+              aria-valuenow={projectInfo.completedWork}
               aria-valuemin="0"
-              aria-valuemax="100"
+              aria-valuemax={projectInfo.plannedWork}
             ></div>
           </div>
-          <div className="d-flex align-items-center">
-            <div className="d-flex align-items-center">
-            </div>
-            <div className="ms-auto">
+          <div className="d-flex align-items-center justify-content-between">
+            {/* <div className="d-flex align-items-center ">
+            </div> */}
+            <div >
               <a
             
+                className="text-muted d-flex "
+              >
+               <i className="bx bx-group bx-sm me-1_5"></i>{projectInfo?.teamSize}
+                </a>
+                
+              </div>
+              <div >
+              <a
                 className="text-muted d-flex align-items-center"
               >
                 <i className="bx bx-chat me-1"></i> 15
-              </a>
+                </a>
+                
             </div>
           </div>
         </div>

src/components/Project/ProjectOverview.jsx

@@ -1,11 +1,10 @@
 import React from "react";
-import {useEmployeesByProjectAllocated} from "../../hooks/useProjects";
+import {useEmployeesByProjectAllocated, useProjects} from "../../hooks/useProjects";
 
 const ProjectOverview = ({project}) =>
 {
-  const {projectEmployees} = useEmployeesByProjectAllocated( project?.id );
-  let teamSize = projectEmployees.filter( ( emp ) => emp.isActive )
-
+const {projects} = useProjects()
+const teamSize = projects.find((pro)=>pro.id == project)
   return (
     <div className="card mb-6">
       <div className="card-body">
@@ -26,7 +25,7 @@ const ProjectOverview = ({project}) =>
           <li className="d-flex align-items-center">
             <i className="bx bx-user"></i>
             <span className="fw-medium mx-2">Current team Size:</span>{" "}
-            <span>{ teamSize?.length}</span>
+            <span>{teamSize?.teamSize}</span>
           </li>
         </ul>
       </div>

src/components/common/ProgressBar.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+const ProgressBar = ( {completeValue, totalValue} ) =>
+{
+    
+
+  const getProgress = (complete, total) => {
+    return (total * 100) / complete + "%";
+  };
+    return (
+        <div className="progress mb-4 rounded" style={{height: "8px"}}>
+                <div className="progress p-0">
+      <div
+        className="progress-bar"
+        role="progressbar"
+        style={{
+          width: `${getProgress( totalValue,completeValue)}`,
+          height: "10px",
+        }}
+        aria-valuenow={completeValue}
+        aria-valuemin="0"
+        aria-valuemax={totalValue}
+      ></div>
+    </div>
+        </div>
+
+  );
+};
+
+export default ProgressBar;

src/pages/project/ProjectDetails.jsx

@@ -101,7 +101,7 @@ const ProjectDetails = () => {
             </div>
             <div className="col-xl-4 col-lg-5 col-md-5">
               {/* Profile Overview */}
-              <ProjectOverview project={ project} />
+              <ProjectOverview project={projectId} />
               {/* Profile Overview */}
             </div>
           </div>

src/pages/project/ProjectList.jsx

@@ -23,7 +23,7 @@ const ProjectList = () =>
   const[HasManageProject,setHasManageProject] = useState(HasManageProjectPermission)
   const dispatch = useDispatch();
   const [currentPage, setCurrentPage] = useState(1);
-  const [itemsPerPage] = useState(5);
+  const [itemsPerPage] = useState(6);
 
     
     const handleShow = () => setShowModal(true);