src/components/Project/ProjectListView.jsx

@@ -13,9 +13,15 @@ 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 ProjectListView = ({ data, currentPage, totalPages, paginate }) => {
+const ProjectListView = ({
+  currentItems,
+  selectedStatuses,
+  handleStatusChange,
+  setCurrentPage,
+  totalPages,
+  isLoading,
+}) => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const { setMangeProject } = useProjectContext();
@@ -126,16 +132,15 @@ 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">
+
+      <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`}
-                >
+              <th key={col.key} colSpan={col.colSpan} className={`${col.className} table_header_border`}>
                 {col.label}
               </th>
             ))}
@@ -143,7 +148,7 @@ const ProjectListView = ({ data, currentPage, totalPages, paginate }) => {
           </tr>
         </thead>
         <tbody>
-            {data?.map((project) => (
+          {currentItems?.map((project) => (
             <tr key={project.id}>
               {projectColumns.map((col) => (
                 <td
@@ -218,11 +223,61 @@ const ProjectListView = ({ data, currentPage, totalPages, paginate }) => {
       </table>
       </div>
 
-      <Pagination
-        currentPage={currentPage}
-        totalPages={totalPages}
-        paginate={paginate}
-      />
+      {isLoading && (
+        <div className="py-4">
+          {" "}
+          {isLoading && <p className="text-center">Loading...</p>}
+          {!isLoading && filteredProjects.length === 0 && (
+            <p className="text-center text-muted">No projects found.</p>
+          )}
+        </div>
+      )}
+      {!isLoading && currentItems.length === 0 && (
+        <div className="py-6">
+          <p className="text-center text-muted">No projects found.</p>
+        </div>
+      )}
+      {!isLoading && 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>
+      )}
     </div>
   );
 };

src/components/common/MultiSelectDropdown.css

@@ -10,7 +10,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 4px;
+  padding: 5px;
   border: 1px solid #ddd;
   border-radius: 5px;
   cursor: pointer;

src/components/common/SelectMultiple.jsx

@@ -101,7 +101,7 @@ const SelectMultiple = ({
           value={searchText}
           onChange={(e) => setSearchText(e.target.value)}
           className="multi-select-dropdown-search-input"
-          style={{ width: "100%",  }}
+          style={{ width: "100%", padding: 4 }}
         />
       </div>
 
@@ -177,7 +177,7 @@ const SelectMultiple = ({
                   return (
                     <span
                       key={val}
-                      className="badge bg-label-primary  mx-1 py-2"
+                      className="badge bg-label-primary  mx-1 py-2 mb-1"
                     >
                       {label}
                     </span>

src/pages/project/ProjectsDisplay.jsx

@@ -11,12 +11,7 @@ import { ITEMS_PER_PAGE, PROJECT_STATUS } from "../../utils/constants";
 import usePagination from "../../hooks/usePagination";
 import ManageProjectInfo from "../../components/Project/ManageProjectInfo";
 
-const ProjectsDisplay = ({
-  listView,
-  searchTerm,
-  selectedStatuses,
-  handleStatusChange,
-}) => {
+const ProjectsDisplay = ({ listView, searchTerm, selectedStatuses, handleStatusChange }) => {
   const [currentPage, setCurrentPage] = useState(1);
   const {
     manageProject,
@@ -27,12 +22,15 @@ const ProjectsDisplay = ({
 
   const [projectList, setProjectList] = useState([]);
 
+
   const { data, isLoading, isError, error } = useProjects(ITEMS_PER_PAGE, 1);
 
   const filteredProjects =
     data?.data?.filter((project) => {
       const statusId =
-        project.projectStatusId ?? project?.status?.id ?? project?.statusId;
+        project.projectStatusId ??
+        project?.status?.id ??
+        project?.statusId;
 
       const matchesStatus = selectedStatuses.includes(statusId);
 
@@ -43,12 +41,15 @@ const ProjectsDisplay = ({
       return matchesStatus && matchesSearch;
     }) ?? [];
 
+
   const paginate = (page) => {
     if (page >= 1 && page <= (data?.totalPages ?? 1)) {
       setCurrentPage(page);
     }
   };
 
+
+
   const sortingProject = (projects) => {
     if (!isLoading && Array.isArray(projects)) {
       const grouped = {};
@@ -101,10 +102,12 @@ const ProjectsDisplay = ({
     <div className="row">
       {listView ? (
         <ProjectListView
-          data={projectList}
-          currentPage={currentPage}
-          totalPages={data?.totalPages}
-          paginate={paginate}
+          currentItems={currentItems}
+          selectedStatuses={selectedStatuses}
+          handleStatusChange={handleStatusChange}
+          setCurrentPage={setCurrentPage}
+          totalPages={totalPages}
+          isLoading={isLoading}
         />
       ) : (
         <ProjectCardView
@@ -115,6 +118,7 @@ const ProjectsDisplay = ({
         />
       )}
 
+      {/* Project Manage Update or Create */}
       {manageProject?.isOpen && (
         <GlobalModel
           size="md"
@@ -127,6 +131,7 @@ const ProjectsDisplay = ({
           />
         </GlobalModel>
       )}
+
     </div>
   );
 };