From bb37fd704492f21b85a510b2b051831cda1c6097 Mon Sep 17 00:00:00 2001
From: "pramod.mahajan" <pramod.mahajan@marcoaiot.com>
Date: Mon, 24 Nov 2025 16:37:18 +0530
Subject: [PATCH] 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) => (
-                <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) {
+  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(`/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 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}
-            />
+          }}
+        >
+          {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;
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 }) => {
       </div>
     );
   return (
-    <div className="row">
+    <div className="">
+      <div className="row">
       {listView ? (
         <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
@@ -90,6 +91,7 @@ const ServiceProjectDisplay = ({ listView, selectedStatuses, searchTerm }) => {
         </GlobalModel>
       )}
     </div>
+    </div>
   );
 };
 
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 (
     <ProjectContext.Provider value={contextDispatcher}>
       <div className="container-fluid">
@@ -92,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
@@ -101,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
@@ -133,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"
                   >
@@ -142,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"
                   >
@@ -182,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>
@@ -197,12 +201,22 @@ const ProjectPage = () => {
           </div>
         </div>
 
-        {coreProjects ? <ProjectsDisplay listView={listView}
-          searchTerm={searchTerm}
-          selectedStatuses={selectedStatuses}
-          handleStatusChange={handleStatusChange} currentPage={currentPage}
-          setCurrentPage={setCurrentPage} /> : <ServiceProjectDisplay listView={listView} searchTerm={searchTerm}
-            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>
   );