From 482b5a1680f79ac7ea34bcb7a5dc05b98005b177 Mon Sep 17 00:00:00 2001 From: Kartik Sharma Date: Mon, 24 Nov 2025 11:02:24 +0530 Subject: [PATCH 1/7] Adding lIst view. --- .../ServiceProjectTeam/ServiceProjectList.jsx | 227 ++++++++++++++++++ .../ServiceProject/ServiceProjectDisplay.jsx | 4 +- 2 files changed, 230 insertions(+), 1 deletion(-) create mode 100644 src/components/ServiceProject/ServiceProjectTeam/ServiceProjectList.jsx diff --git a/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectList.jsx b/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectList.jsx new file mode 100644 index 00000000..e79750f0 --- /dev/null +++ b/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectList.jsx @@ -0,0 +1,227 @@ +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"; +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(); + + // 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) => ( +
+ +
    + {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 1d59f1f2..528a0683 100644 --- a/src/pages/ServiceProject/ServiceProjectDisplay.jsx +++ b/src/pages/ServiceProject/ServiceProjectDisplay.jsx @@ -11,6 +11,7 @@ import GlobalModel from "../../components/common/GlobalModel"; import ManageServiceProject from "../../components/ServiceProject/ManageServiceProject"; 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 [currentPage, setCurrentPage] = useState(1); @@ -49,7 +50,8 @@ const ServiceProjectDisplay = ({ listView ,selectedStatuses }) => { return (
{listView ? ( -

List

+ //

List

+ ) : ( filteredProjects?.map((project) => ( From 6dde240926ef3c5c67e53df0b6a5e822bd226500 Mon Sep 17 00:00:00 2001 From: Kartik Sharma Date: Mon, 24 Nov 2025 12:15:37 +0530 Subject: [PATCH 2/7] 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) => ( )) - )} +
    Date: Mon, 24 Nov 2025 12:45:51 +0530 Subject: [PATCH 3/7] Adding Message for Card and list view in Services and Infra --- src/components/Project/ProjectCardView.jsx | 7 +- src/components/Project/ProjectListView.jsx | 151 ++++++++++-------- .../ServiceProjectTeam/ServiceProjectList.jsx | 128 ++++++++------- 3 files changed, 162 insertions(+), 124 deletions(-) diff --git a/src/components/Project/ProjectCardView.jsx b/src/components/Project/ProjectCardView.jsx index cb44fd2a..3c439fbc 100644 --- a/src/components/Project/ProjectCardView.jsx +++ b/src/components/Project/ProjectCardView.jsx @@ -8,7 +8,12 @@ const ProjectCardView = ({ data, currentPage, totalPages, paginate }) => { return (
    {data?.length === 0 && ( -

    No projects found.

    +
    +

    No Infra projects found.

    +
    )} {data?.map((project) => ( diff --git a/src/components/Project/ProjectListView.jsx b/src/components/Project/ProjectListView.jsx index 2741801e..acda1d5b 100644 --- a/src/components/Project/ProjectListView.jsx +++ b/src/components/Project/ProjectListView.jsx @@ -143,77 +143,94 @@ const ProjectListView = ({ data, currentPage, totalPages, paginate }) => { - {data?.map((project) => ( - - {projectColumns.map((col) => ( - - {col.getValue - ? col.getValue(project) - : project[col.key] || "N/A"} - - ))} - -
    - - +
    + + + )) + ) : ( + + + No Infra projects available - ))} + )}
    diff --git a/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectList.jsx b/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectList.jsx index 9ec5e822..afc48bad 100644 --- a/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectList.jsx +++ b/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectList.jsx @@ -105,66 +105,82 @@ const ServiceProjectList = ({ data, currentPage, totalPages, paginate, isCore = - {data?.map((project) => ( - - {projectColumns.map((col) => ( - - {col.getValue - ? col.getValue(project) - : project[col.key] || "N/A"} - - ))} - -
    - - -
    + {col.getValue ? col.getValue(project) : project[col.key] || "N/A"} + + ))} + + + + + )) + ) : ( + + + No Service projects available - ))} + )} +
    From c669eb90c37df7fc6dbe5023cbe8af84204bc66d Mon Sep 17 00:00:00 2001 From: Kartik Sharma Date: Mon, 24 Nov 2025 12:53:34 +0530 Subject: [PATCH 4/7] Correction in List view alignment. --- src/components/Project/ProjectListView.jsx | 4 ++-- src/pages/ServiceProject/ServiceProjectDisplay.jsx | 2 +- src/pages/project/ProjectsDisplay.jsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Project/ProjectListView.jsx b/src/components/Project/ProjectListView.jsx index acda1d5b..9d0c6acb 100644 --- a/src/components/Project/ProjectListView.jsx +++ b/src/components/Project/ProjectListView.jsx @@ -126,8 +126,8 @@ const ProjectListView = ({ data, currentPage, totalPages, paginate }) => { return (
    -
    - +
    +
    {projectColumns.map((col) => ( diff --git a/src/pages/ServiceProject/ServiceProjectDisplay.jsx b/src/pages/ServiceProject/ServiceProjectDisplay.jsx index 01dc2c14..b0226eff 100644 --- a/src/pages/ServiceProject/ServiceProjectDisplay.jsx +++ b/src/pages/ServiceProject/ServiceProjectDisplay.jsx @@ -48,7 +48,7 @@ const ServiceProjectDisplay = ({ listView, selectedStatuses }) => { ); return ( -
    +
    {listView ? ( +
    {listView ? ( Date: Mon, 24 Nov 2025 13:04:17 +0530 Subject: [PATCH 5/7] Changes. --- src/pages/ServiceProject/ServiceProjectDisplay.jsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/pages/ServiceProject/ServiceProjectDisplay.jsx b/src/pages/ServiceProject/ServiceProjectDisplay.jsx index b0226eff..50671cfd 100644 --- a/src/pages/ServiceProject/ServiceProjectDisplay.jsx +++ b/src/pages/ServiceProject/ServiceProjectDisplay.jsx @@ -48,21 +48,19 @@ const ServiceProjectDisplay = ({ listView, selectedStatuses }) => {
    ); return ( -
    +
    {listView ? ( - + isCore={false} /> ) : ( filteredProjects?.map((project) => ( )) - )} + )}
    Date: Mon, 24 Nov 2025 15:53:10 +0530 Subject: [PATCH 6/7] Adding search functionality in Projectpage. --- src/hooks/useProjects.js | 7 ++++--- src/hooks/useServiceProject.jsx | 7 ++++--- src/pages/ServiceProject/ServiceProjectDisplay.jsx | 7 +++++-- src/pages/project/ProjectPage.jsx | 5 ++++- src/pages/project/ProjectsDisplay.jsx | 5 +++-- src/repositories/ProjectRepository.jsx | 4 ++-- src/repositories/ServiceProjectRepository.jsx | 4 ++-- 7 files changed, 24 insertions(+), 15 deletions(-) diff --git a/src/hooks/useProjects.js b/src/hooks/useProjects.js index 75467399..973d8b94 100644 --- a/src/hooks/useProjects.js +++ b/src/hooks/useProjects.js @@ -20,14 +20,15 @@ export const useCurrentService = () => { // ------------------------------Query------------------- -export const useProjects = (pageSize, pageNumber) => { +export const useProjects = (pageSize, pageNumber,searchString) => { const loggedUser = useSelector((store) => store.globalVariables.loginUser); return useQuery({ - queryKey: ["ProjectsList", pageSize, pageNumber], + queryKey: ["ProjectsList", pageSize, pageNumber,searchString], queryFn: async () => { const response = await ProjectRepository.getProjectList( pageSize, - pageNumber + pageNumber, + searchString, ); return response?.data; }, diff --git a/src/hooks/useServiceProject.jsx b/src/hooks/useServiceProject.jsx index 82bc5713..9319181a 100644 --- a/src/hooks/useServiceProject.jsx +++ b/src/hooks/useServiceProject.jsx @@ -8,13 +8,14 @@ import { ServiceProjectRepository } from "../repositories/ServiceProjectReposito import showToast from "../services/toastService"; //#region Service Project -export const useServiceProjects = (pageSize, pageNumber) => { +export const useServiceProjects = (pageSize, pageNumber, searchString) => { return useQuery({ - queryKey: ["serviceProjects", pageSize, pageNumber], + queryKey: ["serviceProjects", pageSize, pageNumber, searchString], queryFn: async () => { const response = await ServiceProjectRepository.GetServiceProjects( pageSize, - pageNumber + pageNumber, + searchString ); return response.data; }, diff --git a/src/pages/ServiceProject/ServiceProjectDisplay.jsx b/src/pages/ServiceProject/ServiceProjectDisplay.jsx index 50671cfd..71750599 100644 --- a/src/pages/ServiceProject/ServiceProjectDisplay.jsx +++ b/src/pages/ServiceProject/ServiceProjectDisplay.jsx @@ -12,14 +12,17 @@ import ManageServiceProject from "../../components/ServiceProject/ManageServiceP import { SpinnerLoader } from "../../components/common/Loader"; import ServiceProjectCard from "../../components/ServiceProject/ServiceProjectTeam/ServiceProjectCard"; import ServiceProjectList from "../../components/ServiceProject/ServiceProjectTeam/ServiceProjectList"; +import { useDebounce } from "../../utils/appUtils"; -const ServiceProjectDisplay = ({ listView, selectedStatuses }) => { +const ServiceProjectDisplay = ({ listView, selectedStatuses, searchTerm }) => { const [currentPage, setCurrentPage] = useState(1); const { manageServiceProject, setManageServiceProject } = useProjectContext(); + const debouncedSearch = useDebounce(searchTerm, 500); const { data, isLoading, isError, error } = useServiceProjects( ITEMS_PER_PAGE, - currentPage + currentPage, + debouncedSearch ); const paginate = (page) => { if (page >= 1 && page <= (data?.totalPages ?? 1)) { diff --git a/src/pages/project/ProjectPage.jsx b/src/pages/project/ProjectPage.jsx index d9557f48..1689fbb0 100644 --- a/src/pages/project/ProjectPage.jsx +++ b/src/pages/project/ProjectPage.jsx @@ -45,6 +45,8 @@ const ProjectPage = () => { return storedValue === 'true'; }); const HasManageProject = useHasUserPermission(MANAGE_PROJECT); + const [currentPage, setCurrentPage] = useState(1); + const [selectedStatuses, setSelectedStatuses] = useState( PROJECT_STATUS.map((s) => s.id) @@ -198,7 +200,8 @@ const ProjectPage = () => { {coreProjects ? : : }
    diff --git a/src/pages/project/ProjectsDisplay.jsx b/src/pages/project/ProjectsDisplay.jsx index 175f07e5..d01228c8 100644 --- a/src/pages/project/ProjectsDisplay.jsx +++ b/src/pages/project/ProjectsDisplay.jsx @@ -10,6 +10,7 @@ import { useServiceProjects } from "../../hooks/useServiceProject"; import { ITEMS_PER_PAGE, PROJECT_STATUS } from "../../utils/constants"; import usePagination from "../../hooks/usePagination"; import ManageProjectInfo from "../../components/Project/ManageProjectInfo"; +import { useDebounce } from "../../utils/appUtils"; const ProjectsDisplay = ({ listView, @@ -26,8 +27,8 @@ const ProjectsDisplay = ({ } = useProjectContext(); const [projectList, setProjectList] = useState([]); - - const { data, isLoading, isError, error } = useProjects(ITEMS_PER_PAGE, 1); + const debouncedSearch = useDebounce(searchTerm, 500); + const { data, isLoading, isError, error } = useProjects(ITEMS_PER_PAGE, 1, debouncedSearch); const filteredProjects = data?.data?.filter((project) => { diff --git a/src/repositories/ProjectRepository.jsx b/src/repositories/ProjectRepository.jsx index 9894feae..6759b885 100644 --- a/src/repositories/ProjectRepository.jsx +++ b/src/repositories/ProjectRepository.jsx @@ -2,8 +2,8 @@ import { api } from "../utils/axiosClient"; const ProjectRepository = { - getProjectList: (pageSize, pageNumber) => - api.get(`/api/project/list?pageSize=${pageSize}&pageNumber=${pageNumber}`), + getProjectList: (pageSize, pageNumber,searchString) => + api.get(`/api/project/list?pageSize=${pageSize}&pageNumber=${pageNumber}&searchString=${searchString}`), getProjectByprojectId: (projetid) => api.get(`/api/project/details/${projetid}`), diff --git a/src/repositories/ServiceProjectRepository.jsx b/src/repositories/ServiceProjectRepository.jsx index f043bcc0..ff3b9d3b 100644 --- a/src/repositories/ServiceProjectRepository.jsx +++ b/src/repositories/ServiceProjectRepository.jsx @@ -4,9 +4,9 @@ import { api } from "../utils/axiosClient"; export const ServiceProjectRepository = { //#region Service Project CreateServiceProject: (data) => api.post("/api/ServiceProject/create", data), - GetServiceProjects: (pageSize, pageNumber) => + GetServiceProjects: (pageSize, pageNumber,searchString) => api.get( - `/api/ServiceProject/list?pageSize=${pageSize}&pageNumber=${pageNumber}` + `/api/ServiceProject/list?pageSize=${pageSize}&pageNumber=${pageNumber}&searchString=${searchString}` ), GetServiceProject: (id) => api.get(`/api/ServiceProject/details/${id}`), UpdateServiceProject: (id, data) => From bb37fd704492f21b85a510b2b051831cda1c6097 Mon Sep 17 00:00:00 2001 From: "pramod.mahajan" Date: Mon, 24 Nov 2025 16:37:18 +0530 Subject: [PATCH 7/7] set align for Service Project List card --- .../ServiceProjectTeam/ServiceProjectList.jsx | 363 +++++++++--------- .../ServiceProject/ServiceProjectDisplay.jsx | 10 +- src/pages/project/ProjectPage.jsx | 62 +-- 3 files changed, 232 insertions(+), 203 deletions(-) diff --git a/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectList.jsx b/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectList.jsx index afc48bad..b86d4939 100644 --- a/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectList.jsx +++ b/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectList.jsx @@ -3,7 +3,10 @@ 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 { + getProjectStatusColor, + getProjectStatusName, +} from "../../../utils/projectStatus"; import { useDispatch } from "react-redux"; import { setProjectId } from "../../../slices/localVariablesSlice"; import { useNavigate } from "react-router-dom"; @@ -12,185 +15,195 @@ import { useProjectContext } from "../../../pages/project/ProjectPage"; import usePagination from "../../../hooks/usePagination"; import Pagination from "../../common/Pagination"; -const ServiceProjectList = ({ data, currentPage, totalPages, paginate, isCore = true }) => { - const dispatch = useDispatch(); - const navigate = useNavigate(); - const { setMangeProject, setManageServiceProject } = useProjectContext(); - const handleClose = () => setShowModal(false); +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) => ( -
    { - 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) { + const projectColumns = [ + { + key: "projectName", + label: "Project Name", + className: "text-start py-3", + getValue: (p) => ( +
    { dispatch(setProjectId(p.id)); - navigate(`/projects/details`); - } 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?.length > 0 ? ( - data.map((project) => ( - - {projectColumns.map((col) => ( - - ))} - - - )) - ) : ( - - - - )} - - -
    - {col.label} - Action
    - {col.getValue ? col.getValue(project) : project[col.key] || "N/A"} - - -
    - No Service projects available -
    -
    - - + }} + > + {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`); + } 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?.length > 0 ? ( + data.map((project) => ( + + {projectColumns.map((col) => ( + + ))} + + + )) + ) : ( + + + + )} + +
    + {col.label} + Action
    + {col.getValue + ? col.getValue(project) + : project[col.key] || "N/A"} + + +
    + No Service projects available +
    +
    + + +
    +
    + ); }; export default ServiceProjectList; diff --git a/src/pages/ServiceProject/ServiceProjectDisplay.jsx b/src/pages/ServiceProject/ServiceProjectDisplay.jsx index 71750599..6bb9299d 100644 --- a/src/pages/ServiceProject/ServiceProjectDisplay.jsx +++ b/src/pages/ServiceProject/ServiceProjectDisplay.jsx @@ -51,19 +51,20 @@ const ServiceProjectDisplay = ({ listView, selectedStatuses, searchTerm }) => {
    ); return ( -
    +
    +
    {listView ? ( - ) : ( + ) : filteredProjects?.length > 0 ? ( filteredProjects?.map((project) => ( )) - - )} + + ):(

    No Service projects available

    )}
    { )}
    +
    ); }; diff --git a/src/pages/project/ProjectPage.jsx b/src/pages/project/ProjectPage.jsx index 1689fbb0..f72b995c 100644 --- a/src/pages/project/ProjectPage.jsx +++ b/src/pages/project/ProjectPage.jsx @@ -41,13 +41,12 @@ const ProjectPage = () => { const [listView, setListView] = useState(false); const [searchTerm, setSearchTerm] = useState(""); const [coreProjects, setCoreProjects] = useState(() => { - const storedValue = sessionStorage.getItem('whichProjectDisplay'); - return storedValue === 'true'; + const storedValue = sessionStorage.getItem("whichProjectDisplay"); + return storedValue === "true"; }); const HasManageProject = useHasUserPermission(MANAGE_PROJECT); const [currentPage, setCurrentPage] = useState(1); - const [selectedStatuses, setSelectedStatuses] = useState( PROJECT_STATUS.map((s) => s.id) ); @@ -66,13 +65,11 @@ const ProjectPage = () => { manageServiceProject, }; - const handleToggleProject = (value) => { setCoreProjects(value); sessionStorage.setItem("whichProjectDisplay", String(value)); }; - return (
    @@ -92,8 +89,9 @@ const ProjectPage = () => { {/* Service Project Button */} -
    - {/* RIGHT SIDE — SEARCH + CARD/LIST + DROPDOWN */}
    - {/* Search */}
    {
    - {coreProjects ? : } + {coreProjects ? ( + + ) : ( + + )}
    );