import React, { useState } from "react"; import { MANAGE_PROJECT, PROJECT_STATUS } from "../../utils/constants"; import { useProjects } from "../../hooks/useProjects"; import { formatNumber, formatUTCToLocalTime } from "../../utils/dateUtils"; import ProgressBar from "../common/ProgressBar"; import { getProjectStatusColor, getProjectStatusName, } from "../../utils/projectStatus"; import { useDispatch } from "react-redux"; import { setProjectId } from "../../slices/localVariablesSlice"; import { useNavigate } from "react-router-dom"; import { useHasUserPermission } from "../../hooks/useHasUserPermission"; import { useProjectContext } from "../../pages/project/ProjectPage"; import usePagination from "../../hooks/usePagination"; const ProjectListView = ({ currentItems, selectedStatuses, handleStatusChange, setCurrentPage, totalPages, isLoading, }) => { const dispatch = useDispatch(); const navigate = useNavigate(); const { setMangeProject } = useProjectContext(); // const { data, isLoading, isError, error } = useProjects(); // check Permissions // const canManageProject = useHasUserPermission(MANAGE_PROJECT); const projectColumns = [ { key: "projectName", label: "Project Name", className: "text-start py-3", getValue: (p) => (
{ dispatch(setProjectId(p.id)); navigate(`/projects/details`); }} > {p.shortName ? `${p.name} (${p.shortName})` : p.name}
), }, { key: "contactPerson", label: "Contact Person", className: "text-start small", getValue: (p) => `${p?.contactPerson ?? ""}`.trim() || "N/A", }, { key: "startDate", label: "Start Date", className: "text-center small", getValue: (p) => formatUTCToLocalTime(p?.startDate) || "N/A", }, { key: "deadline", label: "Deadline", className: "text-center small", getValue: (p) => formatUTCToLocalTime(p?.endDate) || "N/A", }, { key: "task", label: "Task", colSpan: 2, className: "text-center small", getValue: (p) => formatNumber(p?.plannedWork) || "0", }, { key: "progress", label: "Progress", className: "text-start small", getValue: (p) => ( ), }, { key: "status", label: "Status", className: "text-center small", isFilter: true, customRender: (_, selectedStatuses, handleStatusChange) => (
), getValue: (p) => ( {getProjectStatusName(p.projectStatusId)} ), }, ]; // const handleViewActivities = (project) => { // dispatch(setProjectId(project)); // navigate(`/activities/records?project=${project}`); // }; const handleMoveDetails = (project) => { dispatch(setProjectId(project)); localStorage.setItem("lastActiveProjectTab","profile") navigate("/projects/details"); }; return (
{projectColumns.map((col) => ( ))} {currentItems?.map((project) => ( {projectColumns.map((col) => ( ))} ))}
{col.label} Action
{col.getValue ? col.getValue(project) : project[col.key] || "N/A"}
{isLoading && (
{" "} {isLoading &&

Loading...

} {!isLoading && filteredProjects.length === 0 && (

No projects found.

)}
)} {!isLoading && currentItems.length === 0 && (

No projects found.

)} {!isLoading && totalPages > 1 && ( )}
); }; export default ProjectListView;