-
- {" "}
+
+
+
+ {
+ setSearchTerm(e.target.value);
+ setCurrentPage(1);
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
- {((error && !loading) || !projects) && (
-
- There was an error loading the projects. Please try again.
-
+ {loading &&
Loading...
}
+ {!loading && filteredProjects.length === 0 && !listView && (
+
No projects found.
)}
- {(!projects || projects.length === 0 || projectList.length == 0) &&
- !loading &&
- error && (
-
-
-
- )}
-
- {loading &&
Loading...
}
-
-
- {Array.isArray(currentItems) && loginUser?.projects && (
- currentItems
- .filter((item) => loginUser.projects.includes(String(item.id)))
- .map((item) => (
-
- ))
-)}
+ {listView ? (
+
+
+
+
+ |
+ Project Name
+ |
+ Project Manger |
+ START DATE |
+ DEADLINE |
+ Task |
+ Progress |
+
+
+ |
+
+ Action
+ |
+
+
+
+ {currentItems.length === 0 ? (
+
+ |
+ No projects found
+ |
+
+ ) : (
+ currentItems.map((project) => (
+
+ ))
+ )}
+
+
+
+ ) : (
+ currentItems.map((project) => (
+
+ ))
+ )}
- {/* Pagination */}
- {!loading && (
-
- )}
+
+ {!loading && totalPages > 1 && (
+
+ )}
);
diff --git a/src/pages/project/ProjectListView.jsx b/src/pages/project/ProjectListView.jsx
new file mode 100644
index 00000000..428291f6
--- /dev/null
+++ b/src/pages/project/ProjectListView.jsx
@@ -0,0 +1,199 @@
+import React, { useState, useEffect } from "react";
+import moment from "moment";
+import { useProjects } from "../../hooks/useProjects";
+import {
+ getProjectStatusName,
+ getProjectStatusColor,
+} from "../../utils/projectStatus";
+import ProgressBar from "../../components/common/ProgressBar";
+import { useNavigate } from "react-router-dom";
+import ManageProject from "../../components/Project/ManageProject";
+import ProjectRepository from "../../repositories/ProjectRepository";
+import { MANAGE_PROJECT } from "../../utils/constants";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
+import ManageProjectInfo from "../../components/Project/ManageProjectInfo";
+import showToast from "../../services/toastService";
+import { getCachedData, cacheData } from "../../slices/apiDataManager";
+
+const ProjectListView = ({ 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 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 handleClose = () => setShowModal(false);
+
+
+ const handleViewProject = () => {
+ navigate(`/projects/${projectData.id}`);
+ };
+
+ const handleFormSubmit = (updatedProject) => {
+ if (projectInfo?.id) {
+ ProjectRepository.updateProject(projectInfo.id, updatedProject)
+ .then((response) => {
+ const updatedProjectData = {
+ ...projectInfo,
+ ...response.data,
+ building: projectDetails?.building,
+ };
+
+ setProjectInfo( updatedProjectData );
+
+ if (getCachedData(`projectinfo-${projectInfo.id}`)) {
+ cacheData(`projectinfo-${projectInfo.id}`, updatedProjectData);
+ }
+
+ 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);
+ }
+ showToast("Project updated successfully.", "success");
+ setShowModal(false);
+ })
+ .catch((error) => {
+ showToast(error.message, "error");
+ });
+ }
+ };
+ return (
+ <>
+ {showModal && projectDetails && (
+
+
+
+ )}
+
+
+ |
+ navigate(`/projects/${projectInfo.id}`)}
+ >
+ {projectInfo.name}
+
+ |
+ {projectInfo.contactPerson} |
+
+
+ {projectInfo.startDate
+ ? moment(projectInfo.startDate).format("DD-MMM-YYYY")
+ : "NA"}
+
+ |
+
+ {projectInfo.endDate
+ ? moment(projectInfo.endDate).format("DD-MMM-YYYY")
+ : "NA"}
+ |
+ {projectInfo.plannedWork} |
+
+
+ |
+
+
+
+
+ {getProjectStatusName(projectInfo.projectStatusId)}
+
+
+ |
+
+
+
+ |
+
+
+ );
+};
+
+export default ProjectListView;
diff --git a/src/utils/projectStatus.js b/src/utils/projectStatus.js
index 771c6294..81ab08af 100644
--- a/src/utils/projectStatus.js
+++ b/src/utils/projectStatus.js
@@ -1,25 +1,32 @@
-export const ProjectStatus =(statusId)=>{
- switch (statusId) {
- case 1:
- return "Active"
- break;
- case 2:
- return "On Hold"
- break;
- // case 3:
- // return "Suspended"
- // break;
- case 3:
- return "Inactive"
- break;
- case 4:
- return "Completed"
- break;
- default:
- break;
- }
-}
+export 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";
+ }
+};
+export 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";
+ }
+};
// for different color for each user
export function hashString(str) {