From 6dde240926ef3c5c67e53df0b6a5e822bd226500 Mon Sep 17 00:00:00 2001 From: Kartik Sharma Date: Mon, 24 Nov 2025 12:15:37 +0530 Subject: [PATCH] Creating a list view for Services. --- .../ServiceProjectTeam/ServiceProjectCard.jsx | 21 +- .../ServiceProjectTeam/ServiceProjectList.jsx | 369 ++++++++---------- .../ServiceProject/ServiceProjectDisplay.jsx | 13 +- 3 files changed, 172 insertions(+), 231 deletions(-) diff --git a/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectCard.jsx b/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectCard.jsx index e6f39b36..21f77a4a 100644 --- a/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectCard.jsx +++ b/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectCard.jsx @@ -26,13 +26,6 @@ const ServiceProjectCard = ({ project, isCore = true }) => { const ManageProject = useHasUserPermission(MANAGE_PROJECT); const { setMangeProject, setManageServiceProject } = useProjectContext(); - const getProgress = (planned, completed) => { - return (completed * 100) / planned + "%"; - }; - const getProgressInNumber = (planned, completed) => { - return (completed * 100) / planned; - }; - const handleClose = () => setShowModal(false); const handleViewProject = () => { @@ -43,10 +36,6 @@ const ServiceProjectCard = ({ project, isCore = true }) => { navigate(`/service-projects/${project.id}`); } }; - const handleViewActivities = () => { - dispatch(setProjectId(project.id)); - navigate(`/activities/records?project=${project.id}`); - }; const handleManage = () => { if (isCore) { setMangeProject({ @@ -68,6 +57,8 @@ const ServiceProjectCard = ({ project, isCore = true }) => { DeleteProject(projectId, false); }; + + return ( <> { Modify - {isCore && ( -
  • - - - Activities - -
    • - )} {!isCore && (
  • diff --git a/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectList.jsx b/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectList.jsx index e79750f0..9ec5e822 100644 --- a/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectList.jsx +++ b/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectList.jsx @@ -1,9 +1,9 @@ import React, { useState } from "react"; -import { MANAGE_PROJECT,PROJECT_STATUS } from "../../../utils/constants"; +import { MANAGE_PROJECT, PROJECT_STATUS } from "../../../utils/constants"; import { useProjects } from "../../../hooks/useProjects"; -import { formatNumber,formatUTCToLocalTime } from "../../../utils/dateUtils"; +import { formatNumber, formatUTCToLocalTime } from "../../../utils/dateUtils"; import ProgressBar from "../../common/ProgressBar"; -import { getProjectStatusColor,getProjectStatusName } from "../../../utils/projectStatus"; +import { getProjectStatusColor, getProjectStatusName } from "../../../utils/projectStatus"; import { useDispatch } from "react-redux"; import { setProjectId } from "../../../slices/localVariablesSlice"; import { useNavigate } from "react-router-dom"; @@ -12,216 +12,169 @@ import { useProjectContext } from "../../../pages/project/ProjectPage"; import usePagination from "../../../hooks/usePagination"; import Pagination from "../../common/Pagination"; -const ServiceProjectList = ({ data, currentPage, totalPages, paginate }) => { - const dispatch = useDispatch(); - const navigate = useNavigate(); - const { setMangeProject } = useProjectContext(); - // const { data, isLoading, isError, error } = useProjects(); +const ServiceProjectList = ({ data, currentPage, totalPages, paginate, isCore = true }) => { + const dispatch = useDispatch(); + const navigate = useNavigate(); + const { setMangeProject, setManageServiceProject } = useProjectContext(); + const handleClose = () => setShowModal(false); - // check Permissions - const canManageProject = useHasUserPermission(MANAGE_PROJECT); + // check Permissions + const canManageProject = useHasUserPermission(MANAGE_PROJECT); - const projectColumns = [ - { - key: "projectName", - label: "Project Name", - className: "text-start py-3", - getValue: (p) => ( -
    { + const projectColumns = [ + { + key: "projectName", + label: "Project Name", + className: "text-start py-3", + getValue: (p) => ( +
    { + dispatch(setProjectId(p.id)); + navigate(`/service-projects/${p.id}`); + }} + > + {p.shortName ? `${p.name} (${p.shortName})` : p.name} +
    + ), + }, + { + key: "client.contactPerson", + label: "Contact Person", + className: "text-start small", + getValue: (p) => p.client?.contactPerson || "N/A", + }, + { + key: "assignedDate", + label: "Assign Date", + className: "text-center small", + getValue: (p) => formatUTCToLocalTime(p.assignedDate), + }, + { + key: "status", + label: "Status", + className: "text-center small", + getValue: (p) => ( + + {p.status?.status} + + ), + }, + ]; + + const handleViewProject = (p) => { + if (isCore) { dispatch(setProjectId(p.id)); navigate(`/projects/details`); - }} - > - {p.shortName ? `${p.name} (${p.shortName})` : p.name} + } else { + navigate(`/service-projects/${p.id}`); + } + }; + + const handleManage = (p) => { + if (isCore) { + setMangeProject({ + isOpen: true, + Project: p.id, + }); + } else { + setManageServiceProject({ + isOpen: true, + project: p.id, + }); + } + }; + + + return ( +
    +
    + + + + {projectColumns.map((col) => ( + + ))} + + + + + {data?.map((project) => ( + + {projectColumns.map((col) => ( + + ))} + + + ))} + +
    + {col.label} + Action
    + {col.getValue + ? col.getValue(project) + : project[col.key] || "N/A"} + + +
    +
    + +
    - ), - }, - { - 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) => ( -
    - -
      - {PROJECT_STATUS.map(({ id, label }) => ( -
    • -
      - handleStatusChange(id)} - /> - -
      -
      • - ))} -
    -
    - ), - getValue: (p) => ( - - {getProjectStatusName(p.projectStatusId)} - - ), - }, - ]; - - const handleViewActivities = (project) => { - dispatch(setProjectId(project)); - navigate(`/activities/records?project=${project}`); - }; - - return ( -
    -
    - - - - {projectColumns.map((col) => ( - - ))} - - - - - {data?.map((project) => ( - - {projectColumns.map((col) => ( - - ))} - - - ))} - -
    - {col.label} - Action
    - {col.getValue - ? col.getValue(project) - : project[col.key] || "N/A"} - - -
    -
    - - -
    - ); + ); }; export default ServiceProjectList; diff --git a/src/pages/ServiceProject/ServiceProjectDisplay.jsx b/src/pages/ServiceProject/ServiceProjectDisplay.jsx index 528a0683..01dc2c14 100644 --- a/src/pages/ServiceProject/ServiceProjectDisplay.jsx +++ b/src/pages/ServiceProject/ServiceProjectDisplay.jsx @@ -13,7 +13,7 @@ import { SpinnerLoader } from "../../components/common/Loader"; import ServiceProjectCard from "../../components/ServiceProject/ServiceProjectTeam/ServiceProjectCard"; import ServiceProjectList from "../../components/ServiceProject/ServiceProjectTeam/ServiceProjectList"; -const ServiceProjectDisplay = ({ listView ,selectedStatuses }) => { +const ServiceProjectDisplay = ({ listView, selectedStatuses }) => { const [currentPage, setCurrentPage] = useState(1); const { manageServiceProject, setManageServiceProject } = useProjectContext(); @@ -50,15 +50,20 @@ const ServiceProjectDisplay = ({ listView ,selectedStatuses }) => { return (
    {listView ? ( - //

    List

    - + ) : ( filteredProjects?.map((project) => ( )) - )} +