Nevigate to "Projects" Page Should Display Only Message When No Projects Are Assigned.

src/pages/project/ProjectList.jsx

@@ -264,14 +264,9 @@ const ProjectList = () => {
         )}
 
        {listView ? (
-          currentItems.length === 0 ? (
-            <div className="text-center text-muted mt-4">
-              No projects found.
-            </div>
-          ) : (
   <div className="card cursor-pointer">
-              <div className="card-body p-2">
+    <div className="card-body p-2" style={{ minHeight: "200px" }}>
-                <div className="table-responsive text-nowrap py-2 ">
+      <div className="table-responsive text-nowrap py-2">
         <table className="table m-3">
           <thead>
             <tr>
@@ -327,28 +322,47 @@ const ProjectList = () => {
                 </div>
               </th>
               <th
-                          className={`mx-2 ${HasManageProject ? "d-sm-table-cell" : "d-none"
+                className={`mx-2 ${
+                  HasManageProject ? "d-sm-table-cell" : "d-none"
                 }`}
               >
                 Action
               </th>
             </tr>
           </thead>
-                    <tbody className="table-border-bottom-0 overflow-auto">
+          <tbody className="table-border-bottom-0" style={{ height: "200px" }}>
-                      {currentItems.map((project) => (
+            {currentItems.length === 0 ? (
+              <tr>
+                <td
+                  colSpan="12"
+                  className="text-center"
+                  style={{
+                    verticalAlign: "middle",
+                    height: "200px",
+                    paddingTop: 0,
+                    paddingBottom: 0,
+                  }}
+                >
+                  <div className="d-flex flex-column justify-content-center align-items-center h-100">
+                    <p className="mb-0">No projects found</p>
+                  </div>
+                </td>
+              </tr>
+            ) : (
+              currentItems.map((project) => (
                 <ProjectListView
                   key={project.id}
                   projectData={project}
                   recall={sortingProject}
                 />
-                      ))}
+              ))
+            )}
           </tbody>
         </table>
       </div>
     </div>
   </div>
-          )
+) : (
-        ) : (
   <div className="row">
     {currentItems.map((project) => (
       <ProjectCard
@@ -358,8 +372,45 @@ const ProjectList = () => {
       />
     ))}
   </div>
-        )}
+)}
 
+{!loading && totalPages > 1 && (
+  <nav>
+    <ul className="pagination pagination-sm justify-content-end py-2">
+      <li className={`page-item ${currentPage === 1 && "disabled"}`}>
+        <button
+          className="page-link"
+          onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+        >
+          &laquo;
+        </button>
+      </li>
+      {[...Array(totalPages)].map((_, i) => (
+        <li
+          key={i}
+          className={`page-item ${currentPage === i + 1 && "active"}`}
+        >
+          <button
+            className="page-link"
+            onClick={() => setCurrentPage(i + 1)}
+          >
+            {i + 1}
+          </button>
+        </li>
+      ))}
+      <li className={`page-item ${currentPage === totalPages && "disabled"}`}>
+        <button
+          className="page-link"
+          onClick={() =>
+            setCurrentPage((p) => Math.min(totalPages, p + 1))
+          }
+        >
+          &raquo;
+        </button>
+      </li>
+    </ul>
+  </nav>
+)}
 
 {!loading && totalPages > 1 && (
   <nav>