Merge pull request 'Service_Project_ListView :- Creating List view for service Project.' (#518) from Service_Project_ListView into Project_Branch_Management

Reviewed-on: #518 Merged
2025-11-24 11:16:57 +00:00 · 2025-11-24 11:16:57 +00:00 · 965fce1587
commit 965fce1587
parent 098090cf69 bb37fd7044
11 changed files with 375 additions and 131 deletions
--- a/src/components/Project/ProjectCardView.jsx
+++ b/src/components/Project/ProjectCardView.jsx
@ -8,7 +8,12 @@ const ProjectCardView = ({ data, currentPage, totalPages, paginate }) => {
  return (
    <div className="row page-min-h">
      {data?.length === 0 && (
-        <p className="text-center text-muted">No projects found.</p>
+        <div
+          className="col-12 d-flex justify-content-center align-items-center"
+          style={{ minHeight: "250px" }} 
+        >
+          <p className="text-center text-muted m-0">No Infra projects found.</p>
+        </div>
      )}

      {data?.map((project) => (
--- a/src/components/Project/ProjectListView.jsx
+++ b/src/components/Project/ProjectListView.jsx
@ -126,8 +126,8 @@ const ProjectListView = ({ data, currentPage, totalPages, paginate }) => {

  return (
    <div className="card page-min-h py-4 px-6 shadow-sm">
-      <div className="table-responsive text-nowrap page-min-h">
-        <table className="table  table-hover align-middle m-0">
+      <div className="table-responsive text-nowrap">
+        <table className="table table-hover align-middle m-0">
          <thead className="border-bottom ">
            <tr>
              {projectColumns.map((col) => (
@ -143,77 +143,94 @@ const ProjectListView = ({ data, currentPage, totalPages, paginate }) => {
            </tr>
          </thead>
          <tbody>
-            {data?.map((project) => (
-              <tr key={project.id}>
-                {projectColumns.map((col) => (
-                  <td
-                    key={col.key}
-                    colSpan={col.colSpan}
-                    className={`${col.className} py-5`}
-                    style={{ paddingTop: "20px", paddingBottom: "20px" }}
-                  >
-                    {col.getValue
-                      ? col.getValue(project)
-                      : project[col.key] || "N/A"}
-                  </td>
-                ))}
-                <td
-                  className={`mx-2 ${
-                    canManageProject ? "d-sm-table-cell" : "d-none"
-                  }`}
-                >
-                  <div className="dropdown z-2">
-                    <button
-                      type="button"
-                      className="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0"
-                      data-bs-toggle="dropdown"
-                      aria-expanded="false"
+            {data?.length > 0 ? (
+              data?.map((project) => (
+                <tr key={project.id}>
+                  {projectColumns.map((col) => (
+                    <td
+                      key={col.key}
+                      colSpan={col.colSpan}
+                      className={`${col.className} py-5`}
+                      style={{ paddingTop: "20px", paddingBottom: "20px" }}
                    >
-                      <i
-                        className="bx bx-dots-vertical-rounded bx-sm text-muted"
-                        data-bs-toggle="tooltip"
-                        data-bs-offset="0,8"
-                        data-bs-placement="top"
-                        data-bs-custom-class="tooltip-dark"
-                        title="More Action"
-                      ></i>
-                    </button>
-                    <ul className="dropdown-menu dropdown-menu-end">
-                      <li>
-                        <a
-                          aria-label="click to  View details"
-                          className="dropdown-item cursor-pointer"
-                        >
-                          <i className="bx bx-detail me-2"></i>
-                          <span className="align-left">View details</span>
-                        </a>
-                      </li>
+                      {col.getValue
+                        ? col.getValue(project)
+                        : project[col.key] || "N/A"}
+                    </td>
+                  ))}
+                  <td
+                    className={`mx-2 ${canManageProject ? "d-sm-table-cell" : "d-none"
+                      }`}
+                  >
+                    <div className="dropdown z-2">
+                      <button
+                        type="button"
+                        className="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0"
+                        data-bs-toggle="dropdown"
+                        aria-expanded="false"
+                      >
+                        <i
+                          className="bx bx-dots-vertical-rounded bx-sm text-muted"
+                          data-bs-toggle="tooltip"
+                          data-bs-offset="0,8"
+                          data-bs-placement="top"
+                          data-bs-custom-class="tooltip-dark"
+                          title="More Action"
+                        ></i>
+                      </button>
+                      <ul className="dropdown-menu dropdown-menu-end">
+                        <li>
+                          <a
+                            aria-label="click to  View details"
+                            className="dropdown-item cursor-pointer"
+                          >
+                            <i className="bx bx-detail me-2"></i>
+                            <span className="align-left">View details</span>
+                          </a>
+                        </li>

-                      <li>
-                        <a
-                          className="dropdown-item cursor-pointer"
-                          onClick={() =>
-                            setMangeProject({
-                              isOpen: true,
-                              Project: project.id,
-                            })
-                          }
-                        >
-                          <i className="bx bx-pencil me-2"></i>
-                          <span className="align-left">Modify</span>
-                        </a>
-                      </li>
-                      <li onClick={() => handleViewActivities(project.id)}>
-                        <a className="dropdown-item cursor-pointer">
-                          <i className="bx bx-task me-2"></i>
-                          <span className="align-left">Activities</span>
-                        </a>
-                      </li>
-                    </ul>
-                  </div>
+                        <li>
+                          <a
+                            className="dropdown-item cursor-pointer"
+                            onClick={() =>
+                              setMangeProject({
+                                isOpen: true,
+                                Project: project.id,
+                              })
+                            }
+                          >
+                            <i className="bx bx-pencil me-2"></i>
+                            <span className="align-left">Modify</span>
+                          </a>
+                        </li>
+                        <li onClick={() => handleViewActivities(project.id)}>
+                          <a className="dropdown-item cursor-pointer">
+                            <i className="bx bx-task me-2"></i>
+                            <span className="align-left">Activities</span>
+                          </a>
+                        </li>
+                      </ul>
+                    </div>
+                  </td>
+                </tr>
+              ))
+            ) : (
+              <tr
+                className="no-hover"
+                style={{
+                  pointerEvents: "none", 
+                  backgroundColor: "transparent",
+                }}
+              >
+                <td
+                  colSpan={projectColumns.length + 1}
+                  className="text-center align-middle"
+                  style={{ height: "300px", borderBottom: "none" }}
+                >
+                  No Infra projects available
                </td>
              </tr>
-            ))}
+            )}
          </tbody>
        </table>
      </div>
--- 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 (
        <>
            <ConfirmModal
@ -138,14 +129,6 @@ const ServiceProjectCard = ({ project, isCore = true }) => {
                                                <span className="align-left">Modify</span>
                                            </a>
                                        </li>
-                                        {isCore && (
-                                            <li onClick={handleViewActivities}>
-                                                <a className="dropdown-item">
-                                                    <i className="bx bx-task me-2"></i>
-                                                    <span className="align-left">Activities</span>
-                                                </a>
-                                            </li>
-                                        )}
                                        {!isCore && (
                                            <li
                                                onClick={() =>
--- a/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectList.jsx
+++ b/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectList.jsx
@ -0,0 +1,209 @@
+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,
+  isCore = true,
+}) => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const { setMangeProject, setManageServiceProject } = useProjectContext();
+  const handleClose = () => setShowModal(false);
+
+  //   check Permissions
+  const canManageProject = useHasUserPermission(MANAGE_PROJECT);
+
+  const projectColumns = [
+    {
+      key: "projectName",
+      label: "Project Name",
+      className: "text-start py-3",
+      getValue: (p) => (
+        <div
+          className="text-primary cursor-pointer fw-bold py-3"
+          onClick={() => {
+            dispatch(setProjectId(p.id));
+            navigate(`/service-projects/${p.id}`);
+          }}
+        >
+          {p.shortName ? `${p.name} (${p.shortName})` : p.name}
+        </div>
+      ),
+    },
+    {
+      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) => (
+        <span className={`badge ${getProjectStatusColor(p.status?.id)}`}>
+          {p.status?.status}
+        </span>
+      ),
+    },
+  ];
+
+  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 (
+    <div>
+      <div className="card page-min-h py-4 px-6 shadow-sm">
+        <div className="table-responsive text-nowrap page-min-h">
+          <table className="table  table-hover align-middle m-0">
+            <thead className="border-bottom ">
+              <tr>
+                {projectColumns.map((col) => (
+                  <th
+                    key={col.key}
+                    colSpan={col.colSpan}
+                    className={`${col.className} table_header_border`}
+                  >
+                    {col.label}
+                  </th>
+                ))}
+                <th className="text-center py-3">Action</th>
+              </tr>
+            </thead>
+            <tbody>
+              {data?.length > 0 ? (
+                data.map((project) => (
+                  <tr key={project.id}>
+                    {projectColumns.map((col) => (
+                      <td
+                        key={col.key}
+                        colSpan={col.colSpan}
+                        className={`${col.className} py-5`}
+                        style={{ paddingTop: "20px", paddingBottom: "20px" }}
+                      >
+                        {col.getValue
+                          ? col.getValue(project)
+                          : project[col.key] || "N/A"}
+                      </td>
+                    ))}
+                    <td
+                      className={`mx-2 ${
+                        canManageProject ? "d-sm-table-cell" : "d-none"
+                      }`}
+                    >
+                      <div className="dropdown z-2">
+                        <button
+                          type="button"
+                          className="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0"
+                          data-bs-toggle="dropdown"
+                          aria-expanded="false"
+                        >
+                          <i
+                            className="bx bx-dots-vertical-rounded bx-sm text-muted"
+                            data-bs-toggle="tooltip"
+                            data-bs-offset="0,8"
+                            data-bs-placement="top"
+                            data-bs-custom-class="tooltip-dark"
+                            title="More Action"
+                          ></i>
+                        </button>
+                        <ul className="dropdown-menu dropdown-menu-end">
+                          <li>
+                            <a
+                              aria-label="click to View details"
+                              className="dropdown-item"
+                              onClick={() => handleViewProject(project)}
+                            >
+                              <i className="bx bx-detail me-2"></i>
+                              <span className="align-left">View details</span>
+                            </a>
+                          </li>
+                          <li>
+                            <a
+                              className="dropdown-item"
+                              onClick={() => handleManage(project)}
+                            >
+                              <i className="bx bx-pencil me-2"></i>
+                              <span className="align-left">Modify</span>
+                            </a>
+                          </li>
+                        </ul>
+                      </div>
+                    </td>
+                  </tr>
+                ))
+              ) : (
+                <tr
+                  className="no-hover"
+                  style={{
+                    pointerEvents: "none",
+                    backgroundColor: "transparent",
+                  }}
+                >
+                  <td
+                    colSpan={projectColumns.length + 1}
+                    className="text-center align-middle"
+                    style={{ height: "300px", borderBottom: "none" }}
+                  >
+                    No Service projects available
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+
+        <Pagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          paginate={paginate}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ServiceProjectList;
--- 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;
    },
--- 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;
    },
--- a/src/pages/ServiceProject/ServiceProjectDisplay.jsx
+++ b/src/pages/ServiceProject/ServiceProjectDisplay.jsx
@ -11,14 +11,18 @@ 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";
+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)) {
@ -47,15 +51,20 @@ const ServiceProjectDisplay = ({ listView ,selectedStatuses }) => {
      </div>
    );
  return (
-    <div className="row">
+    <div className="">
+      <div className="row">
      {listView ? (
-        <p>List</p>
-      ) : (
+        <ServiceProjectList data={filteredProjects}
+          currentPage={currentPage}
+          totalPages={data?.totalPages}
+          paginate={paginate}
+          isCore={false} />
+      ) :  filteredProjects?.length > 0 ? (
        filteredProjects?.map((project) => (
          <ServiceProjectCard key={project.id} project={project} isCore={false} />
        ))
-
-      )}
+        
+      ):(<div className="d-flex justify-content-center align-items-center page-min-h "><p>No Service projects available</p></div>)}

      <div className="col-12 d-flex justify-content-start mt-3">
        <Pagination
@ -82,6 +91,7 @@ const ServiceProjectDisplay = ({ listView ,selectedStatuses }) => {
        </GlobalModel>
      )}
    </div>
+    </div>
  );
 };

--- a/src/pages/project/ProjectPage.jsx
+++ b/src/pages/project/ProjectPage.jsx
@ -41,10 +41,11 @@ 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)
@ -64,13 +65,11 @@ const ProjectPage = () => {
    manageServiceProject,
  };

-
  const handleToggleProject = (value) => {
    setCoreProjects(value);
    sessionStorage.setItem("whichProjectDisplay", String(value));
  };

-
  return (
    <ProjectContext.Provider value={contextDispatcher}>
      <div className="container-fluid">
@ -90,8 +89,9 @@ const ProjectPage = () => {
                  {/* Service Project Button */}
                  <button
                    type="button"
-                    className={`btn px-2 py-1 rounded-0 text-tiny ${!coreProjects ? "btn-primary text-white" : ""
-                      }`}
+                    className={`btn px-2 py-1 rounded-0 text-tiny ${
+                      !coreProjects ? "btn-primary text-white" : ""
+                    }`}
                    onClick={() => handleToggleProject(false)}
                  >
                    Service Project
@ -99,20 +99,18 @@ const ProjectPage = () => {
                  {/* Organization Project Button */}
                  <button
                    type="button"
-                    className={`btn px-2 py-1 rounded-0 text-tiny ${coreProjects ? "btn-primary text-white" : ""
-                      }`}
+                    className={`btn px-2 py-1 rounded-0 text-tiny ${
+                      coreProjects ? "btn-primary text-white" : ""
+                    }`}
                    onClick={() => handleToggleProject(true)}
                  >
                    Infra Project
                  </button>
-
                </div>
              </div>

-
              {/* RIGHT SIDE — SEARCH + CARD/LIST + DROPDOWN */}
              <div className="d-flex flex-wrap align-items-center justify-content-end">
-
                {/* Search */}
                <div className="me-2" style={{ minWidth: "200px" }}>
                  <input
@ -131,7 +129,9 @@ const ProjectPage = () => {
                <div className="d-flex gap-2">
                  <button
                    type="button"
-                    className={`btn btn-sm p-1 ${!listView ? "btn-primary" : "btn-outline-primary"}`}
+                    className={`btn btn-sm p-1 ${
+                      !listView ? "btn-primary" : "btn-outline-primary"
+                    }`}
                    onClick={() => setListView(false)}
                    title="Card View"
                  >
@ -140,7 +140,9 @@ const ProjectPage = () => {

                  <button
                    type="button"
-                    className={`btn btn-sm p-1 ${listView ? "btn-primary" : "btn-outline-primary"}`}
+                    className={`btn btn-sm p-1 ${
+                      listView ? "btn-primary" : "btn-outline-primary"
+                    }`}
                    onClick={() => setListView(true)}
                    title="List View"
                  >
@ -180,10 +182,14 @@ const ProjectPage = () => {
                  <button
                    type="button"
                    className="btn btn-primary btn-sm d-flex align-items-center my-2"
-                    onClick={() =>
-                      coreProjects
-                        ? setMangeProject({ isOpen: true, Project: null })      // Organization Project → Infra
-                        : setManageServiceProject({ isOpen: true, Project: null }) // Service Project
+                    onClick={
+                      () =>
+                        coreProjects
+                          ? setMangeProject({ isOpen: true, Project: null }) // Organization Project → Infra
+                          : setManageServiceProject({
+                              isOpen: true,
+                              Project: null,
+                            }) // Service Project
                    }
                  >
                    <i className="bx bx-plus-circle me-2"></i>
@ -195,11 +201,22 @@ const ProjectPage = () => {
          </div>
        </div>

-        {coreProjects ? <ProjectsDisplay listView={listView}
-          searchTerm={searchTerm}
-          selectedStatuses={selectedStatuses}
-          handleStatusChange={handleStatusChange} /> : <ServiceProjectDisplay listView={listView}
-            selectedStatuses={selectedStatuses} />}
+        {coreProjects ? (
+          <ProjectsDisplay
+            listView={listView}
+            searchTerm={searchTerm}
+            selectedStatuses={selectedStatuses}
+            handleStatusChange={handleStatusChange}
+            currentPage={currentPage}
+            setCurrentPage={setCurrentPage}
+          />
+        ) : (
+          <ServiceProjectDisplay
+            listView={listView}
+            searchTerm={searchTerm}
+            selectedStatuses={selectedStatuses}
+          />
+        )}
      </div>
    </ProjectContext.Provider>
  );
--- 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) => {
@ -98,7 +99,7 @@ const ProjectsDisplay = ({
    );

  return (
-    <div className="row">
+    <div className="">
      {listView ? (
        <ProjectListView
          data={projectList}
--- 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}`),

--- 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) =>