set align for Service Project List card

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,7 +15,13 @@ 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 ServiceProjectList = ({
+  data,
+  currentPage,
+  totalPages,
+  paginate,
+  isCore = true,
+}) => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const { setMangeProject, setManageServiceProject } = useProjectContext();
@@ -85,8 +94,8 @@ const ServiceProjectList = ({ data, currentPage, totalPages, paginate, isCore =
     }
   };
 
-
   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">
@@ -115,11 +124,15 @@ const ServiceProjectList = ({ data, currentPage, totalPages, paginate, isCore =
                         className={`${col.className} py-5`}
                         style={{ paddingTop: "20px", paddingBottom: "20px" }}
                       >
-                                            {col.getValue ? col.getValue(project) : project[col.key] || "N/A"}
+                        {col.getValue
+                          ? col.getValue(project)
+                          : project[col.key] || "N/A"}
                       </td>
                     ))}
                     <td
-                                        className={`mx-2 ${canManageProject ? "d-sm-table-cell" : "d-none"}`}
+                      className={`mx-2 ${
+                        canManageProject ? "d-sm-table-cell" : "d-none"
+                      }`}
                     >
                       <div className="dropdown z-2">
                         <button
@@ -180,7 +193,6 @@ const ServiceProjectList = ({ data, currentPage, totalPages, paginate, isCore =
                 </tr>
               )}
             </tbody>
-
           </table>
         </div>
 
@@ -190,6 +202,7 @@ const ServiceProjectList = ({ data, currentPage, totalPages, paginate, isCore =
           paginate={paginate}
         />
       </div>
+    </div>
   );
 };
 

src/pages/ServiceProject/ServiceProjectDisplay.jsx

@@ -51,6 +51,7 @@ const ServiceProjectDisplay = ({ listView, selectedStatuses, searchTerm }) => {
       </div>
     );
   return (
+    <div className="">
       <div className="row">
       {listView ? (
         <ServiceProjectList data={filteredProjects}
@@ -58,12 +59,12 @@ const ServiceProjectDisplay = ({ listView, selectedStatuses, searchTerm }) => {
           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>
   );
 };
 

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');
+    const storedValue = sessionStorage.getItem("whichProjectDisplay");
-    return storedValue === 'true';
+    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,7 +89,8 @@ 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)}
                   >
@@ -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={() =>
+                    onClick={
+                      () =>
                         coreProjects
                           ? setMangeProject({ isOpen: true, Project: null }) // Organization Project → Infra
-                        : setManageServiceProject({ isOpen: true, Project: null }) // Service Project
+                          : 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}
+        {coreProjects ? (
+          <ProjectsDisplay
+            listView={listView}
             searchTerm={searchTerm}
             selectedStatuses={selectedStatuses}
-          handleStatusChange={handleStatusChange} currentPage={currentPage}
+            handleStatusChange={handleStatusChange}
-          setCurrentPage={setCurrentPage} /> : <ServiceProjectDisplay listView={listView} searchTerm={searchTerm}
+            currentPage={currentPage}
-            selectedStatuses={selectedStatuses} />}
+            setCurrentPage={setCurrentPage}
+          />
+        ) : (
+          <ServiceProjectDisplay
+            listView={listView}
+            searchTerm={searchTerm}
+            selectedStatuses={selectedStatuses}
+          />
+        )}
       </div>
     </ProjectContext.Provider>
   );