changed getProjectStatusName getProjectStatusColor location. added these fun in Utils folder

src/components/Project/ProjectCard.jsx

@@ -8,9 +8,8 @@ import ProjectRepository from "../../repositories/ProjectRepository";
 import { cacheData, getCachedData } from "../../slices/apiDataManager";
 import showToast from "../../services/toastService";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
-import { MANAGE_PROJECT } from "../../utils/constants";
+import {MANAGE_PROJECT} from "../../utils/constants";
-
+import { getProjectStatusColor,getProjectStatusName } from "../../utils/projectStatus";
-
 
 const ProjectCard = ({ projectData }) => {
   const [projectInfo, setProjectInfo] = useState(projectData);
@@ -21,7 +20,9 @@ const ProjectCard = ({ projectData }) => {
 
   const handleShow = async () => {
     try {
-            const response = await ProjectRepository.getProjectByprojectId(projectInfo.id);
+      const response = await ProjectRepository.getProjectByprojectId(
+        projectInfo.id
+      );
       setProjectDetails(response.data);
       setShowModal(true);
     } catch (error) {
@@ -38,41 +39,11 @@ const ProjectCard = ({ projectData }) => {
 
   const handleClose = () => setShowModal(false);
 
-    const getProjectStatusName = (statusId) => {
-        switch (statusId) {
-            case 1:
-                return "Active";
-            case 2:
-                return "On Hold";
-            // case 3:
-            //   return "Suspended";
-            case 3:
-                return "Inactive";
-            case 4:
-                return "Completed";
-        }
-    };
-
-    const getProjectStatusColor = (statusId) => {
-        switch (statusId) {
-            case 1:
-                return "bg-label-success";
-            case 2:
-                return "bg-label-warning";
-            case 3:
-                return "bg-label-info";
-            case 4:
-                return "bg-label-secondary";
-            case 5:
-                return "bg-label-dark";
-        }
-    };
 
   const handleViewProject = () => {
     navigate(`/projects/${projectData.id}`);
   };
 
-
   const handleFormSubmit = (updatedProject) => {
     if (projectInfo?.id) {
       ProjectRepository.updateProject(projectInfo.id, updatedProject)
@@ -160,14 +131,20 @@ const ProjectCard = ({ projectData }) => {
                     data-bs-toggle="dropdown"
                     aria-expanded="false"
                   >
-                                        <i className="bx bx-dots-vertical-rounded bx-sm text-muted"  data-bs-toggle="tooltip" data-bs-offset="0,8" data-bs-placement="top" data-bs-custom-class="tooltip-dark" title="More Action"></i>
+                    <i
+                      className="bx bx-dots-vertical-rounded bx-sm text-muted"
+                      data-bs-toggle="tooltip"
+                      data-bs-offset="0,8"
+                      data-bs-placement="top"
+                      data-bs-custom-class="tooltip-dark"
+                      title="More Action"
+                    ></i>
                   </button>
                   <ul className="dropdown-menu dropdown-menu-end">
                     <li>
                       <a
                         aria-label="click to  View details"
                         className="dropdown-item"
-                                                
                         onClick={handleViewProject}
                       >
                         <i className="bx bx-detail me-2"></i>
@@ -181,10 +158,16 @@ const ProjectCard = ({ projectData }) => {
                         <span className="align-left">Modify</span>
                       </a>
                     </li>
-                                        <li onClick={()=>navigate(`/activities/records?project=${projectInfo.id}`)}>
+                    <li
+                      onClick={() =>
+                        navigate(
+                          `/activities/records?project=${projectInfo.id}`
+                        )
+                      }
+                    >
                       <a className="dropdown-item">
                         <i className="bx bx-task me-2"></i>
-                                                <span className="align-left" >Activities</span>
+                        <span className="align-left">Activities</span>
                       </a>
                     </li>
                   </ul>
@@ -209,9 +192,7 @@ const ProjectCard = ({ projectData }) => {
                     : "NA"}
                 </p>
                 <p className="mb-0">{projectInfo.projectAddress}</p>
-
               </div>
-
             </div>
           </div>
           <div className="card-body border-top">
@@ -226,29 +207,45 @@ const ProjectCard = ({ projectData }) => {
                   {getProjectStatusName(projectInfo.projectStatusId)}
                 </span>
               </p>{" "}
-                            {getDateDifferenceInDays(projectInfo.endDate, Date()) >= 0 &&
+              {getDateDifferenceInDays(projectInfo.endDate, Date()) >= 0 && (
-                                ( <span className="badge bg-label-success ms-auto">
+                <span className="badge bg-label-success ms-auto">
                   {projectInfo.endDate &&
                     getDateDifferenceInDays(projectInfo.endDate, Date())}{" "}
                   Days left
-                            </span>) }
+                </span>
-                            {getDateDifferenceInDays(projectInfo.endDate, Date()) < 0 &&
+              )}
-                             ( <span className="badge bg-label-danger ms-auto">
+              {getDateDifferenceInDays(projectInfo.endDate, Date()) < 0 && (
+                <span className="badge bg-label-danger ms-auto">
                   {projectInfo.endDate &&
                     getDateDifferenceInDays(projectInfo.endDate, Date())}{" "}
                   Days overdue
-                            </span>)}
+                </span>
-
+              )}
             </div>
             <div className="d-flex justify-content-between align-items-center mb-2">
-                            <small className="text-body">Task: {projectInfo.completedWork} / {projectInfo.plannedWork}</small>
+              <small className="text-body">
-                            <small className="text-body">{Math.floor(getProgressInNumber(projectInfo.plannedWork, projectInfo.completedWork)) || 0} % Completed</small>
+                Task: {projectInfo.completedWork} / {projectInfo.plannedWork}
+              </small>
+              <small className="text-body">
+                {Math.floor(
+                  getProgressInNumber(
+                    projectInfo.plannedWork,
+                    projectInfo.completedWork
+                  )
+                ) || 0}{" "}
+                % Completed
+              </small>
             </div>
             <div className="progress mb-4 rounded" style={{ height: "8px" }}>
               <div
                 className="progress-bar rounded"
                 role="progressbar"
-                                style={{ width: getProgress(projectInfo.plannedWork, projectInfo.completedWork) }}
+                style={{
+                  width: getProgress(
+                    projectInfo.plannedWork,
+                    projectInfo.completedWork
+                  ),
+                }}
                 aria-valuenow={projectInfo.completedWork}
                 aria-valuemin="0"
                 aria-valuemax={projectInfo.plannedWork}
@@ -257,22 +254,17 @@ const ProjectCard = ({ projectData }) => {
             <div className="d-flex align-items-center justify-content-between">
               {/* <div className="d-flex align-items-center ">
             </div> */}
-                            <div >
+              <div>
-                                <a
+                <a className="text-muted d-flex " alt="Active team size">
-
+                  <i className="bx bx-group bx-sm me-1_5"></i>
-                                    className="text-muted d-flex " alt="Active team size"
+                  {projectInfo?.teamSize} Members
-                                >
-                                    <i className="bx bx-group bx-sm me-1_5"></i>{projectInfo?.teamSize} Members
                 </a>
-
               </div>
-                            <div >
+              <div>
-                                <a
+                <a className="text-muted d-flex align-items-center">
-                                    className="text-muted d-flex align-items-center"
+                  <i className="bx bx-chat me-1 "></i>{" "}
-                                >
+                  <span className="text-decoration-line-through">15</span>
-                                    <i className="bx bx-chat me-1 "></i> <span className="text-decoration-line-through">15</span>
                 </a>
-
               </div>
             </div>
           </div>