diff --git a/src/components/Project/ProjectCard.jsx b/src/components/Project/ProjectCard.jsx index bd0a0fca..a6a44d32 100644 --- a/src/components/Project/ProjectCard.jsx +++ b/src/components/Project/ProjectCard.jsx @@ -8,278 +8,270 @@ 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); - const [projectDetails, setProjectDetails] = useState(null); - const [showModal, setShowModal] = useState(false); - const navigate = useNavigate(); - const ManageProject = useHasUserPermission(MANAGE_PROJECT); + const [projectInfo, setProjectInfo] = useState(projectData); + const [projectDetails, setProjectDetails] = useState(null); + const [showModal, setShowModal] = useState(false); + const navigate = useNavigate(); + const ManageProject = useHasUserPermission(MANAGE_PROJECT); - const handleShow = async () => { - try { - const response = await ProjectRepository.getProjectByprojectId(projectInfo.id); - setProjectDetails(response.data); - setShowModal(true); - } catch (error) { - showToast("Failed to load project details", "error"); - } - }; + const handleShow = async () => { + try { + const response = await ProjectRepository.getProjectByprojectId( + projectInfo.id + ); + setProjectDetails(response.data); + setShowModal(true); + } catch (error) { + showToast("Failed to load project details", "error"); + } + }; - const getProgress = (planned, completed) => { - return (completed * 100) / planned + "%"; - }; - const getProgressInNumber = (planned, completed) => { - return (completed * 100) / planned; - }; + const getProgress = (planned, completed) => { + return (completed * 100) / planned + "%"; + }; + const getProgressInNumber = (planned, completed) => { + return (completed * 100) / planned; + }; - 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 handleClose = () => setShowModal(false); - const handleFormSubmit = (updatedProject) => { - if (projectInfo?.id) { - ProjectRepository.updateProject(projectInfo.id, updatedProject) - .then((response) => { - const updatedProjectData = { - ...projectInfo, - ...response.data, - building: projectDetails?.building, - }; + const handleViewProject = () => { + navigate(`/projects/${projectData.id}`); + }; - setProjectInfo(updatedProject); + const handleFormSubmit = (updatedProject) => { + if (projectInfo?.id) { + ProjectRepository.updateProject(projectInfo.id, updatedProject) + .then((response) => { + const updatedProjectData = { + ...projectInfo, + ...response.data, + building: projectDetails?.building, + }; - if (getCachedData(`projectinfo-${projectInfo.id}`)) { - cacheData(`projectinfo-${projectInfo.id}`, updatedProjectData); - } + setProjectInfo(updatedProject); - const projects_list = getCachedData("projectslist"); - if (projects_list) { - const updatedProjectsList = projects_list.map((project) => - project.id === projectInfo.id - ? { ...project, ...response.data, tenant: project.tenant } - : project - ); - cacheData("projectslist", updatedProjectsList); - } + if (getCachedData(`projectinfo-${projectInfo.id}`)) { + cacheData(`projectinfo-${projectInfo.id}`, updatedProjectData); + } - showToast("Project updated successfully.", "success"); - setShowModal(false); - }) - .catch((error) => { - showToast(error.message, "error"); - }); - } - }; + const projects_list = getCachedData("projectslist"); + if (projects_list) { + const updatedProjectsList = projects_list.map((project) => + project.id === projectInfo.id + ? { ...project, ...response.data, tenant: project.tenant } + : project + ); + cacheData("projectslist", updatedProjectsList); + } - return ( - <> - {showModal && projectDetails && ( -
- + showToast("Project updated successfully.", "success"); + setShowModal(false); + }) + .catch((error) => { + showToast(error.message, "error"); + }); + } + }; + + return ( + <> + {showModal && projectDetails && ( +
+ +
+ )} + +
+
+
+
+
+
+
- )} - -
-
-
-
-
-
- -
-
-
- - {projectInfo.name} - -
-
- Client: - {projectInfo.contactPerson} -
-
-
-
-
- - -
-
-
-
-
-
-
-

- Start Date: - {projectInfo.startDate - ? moment(projectInfo.startDate).format("DD-MMM-YYYY") - : "NA"} -

-

- Deadline: - - {projectInfo.endDate - ? moment(projectInfo.endDate).format("DD-MMM-YYYY") - : "NA"} -

-

{projectInfo.projectAddress}

- -
- -
-
-
-
-

- - {getProjectStatusName(projectInfo.projectStatusId)} - -

{" "} - {getDateDifferenceInDays(projectInfo.endDate, Date()) >= 0 && - ( - {projectInfo.endDate && - getDateDifferenceInDays(projectInfo.endDate, Date())}{" "} - Days left - ) } - {getDateDifferenceInDays(projectInfo.endDate, Date()) < 0 && - ( - {projectInfo.endDate && - getDateDifferenceInDays(projectInfo.endDate, Date())}{" "} - Days overdue - )} - -
-
- Task: {projectInfo.completedWork} / {projectInfo.plannedWork} - {Math.floor(getProgressInNumber(projectInfo.plannedWork, projectInfo.completedWork)) || 0} % Completed -
-
-
-
- -
+
+
+ + {projectInfo.name} + +
+
+ Client: + {projectInfo.contactPerson} +
+
+
+
+ + +
+
- - ); +
+
+
+
+

+ Start Date: + {projectInfo.startDate + ? moment(projectInfo.startDate).format("DD-MMM-YYYY") + : "NA"} +

+

+ Deadline: + + {projectInfo.endDate + ? moment(projectInfo.endDate).format("DD-MMM-YYYY") + : "NA"} +

+

{projectInfo.projectAddress}

+
+
+
+
+
+

+ + {getProjectStatusName(projectInfo.projectStatusId)} + +

{" "} + {getDateDifferenceInDays(projectInfo.endDate, Date()) >= 0 && ( + + {projectInfo.endDate && + getDateDifferenceInDays(projectInfo.endDate, Date())}{" "} + Days left + + )} + {getDateDifferenceInDays(projectInfo.endDate, Date()) < 0 && ( + + {projectInfo.endDate && + getDateDifferenceInDays(projectInfo.endDate, Date())}{" "} + Days overdue + + )} +
+
+ + Task: {projectInfo.completedWork} / {projectInfo.plannedWork} + + + {Math.floor( + getProgressInNumber( + projectInfo.plannedWork, + projectInfo.completedWork + ) + ) || 0}{" "} + % Completed + +
+
+
+
+ +
+
+
+ + ); }; export default ProjectCard;