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,103 +132,152 @@ 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
-          <thead className="border-bottom ">
+        className="table-responsive text-nowrap page-min-h"
-            <tr>
+      >
+      <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>
+          {currentItems?.map((project) => (
+            <tr key={project.id}>
               {projectColumns.map((col) => (
-                <th
+                <td
                   key={col.key}
                   colSpan={col.colSpan}
-                  className={`${col.className} table_header_border`}
+                  className={`${col.className} py-5`}
+                  style={{ paddingTop: "20px", paddingBottom: "20px" }}
                 >
-                  {col.label}
+                  {col.getValue
-                </th>
+                    ? col.getValue(project)
-              ))}
+                    : project[col.key] || "N/A"}
-              <th className="text-center py-3">Action</th>
-            </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"
-                    >
-                      <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>
                 </td>
-              </tr>
+              ))}
-            ))}
+              <td
-          </tbody>
+                className={`mx-2 ${
-        </table>
+                  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>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
       </div>
 
-      <Pagination
+      {isLoading && (
-        currentPage={currentPage}
+        <div className="py-4">
-        totalPages={totalPages}
+          {" "}
-        paginate={paginate}
+          {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 = ({
+const ProjectsDisplay = ({ listView, searchTerm, selectedStatuses, handleStatusChange }) => {
-  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 = {};
@@ -96,15 +97,17 @@ const ProjectsDisplay = ({
         <p>{error.message}</p>
       </div>
     );
-
+    
   return (
     <div className="row">
       {listView ? (
         <ProjectListView
-          data={projectList}
+          currentItems={currentItems}
-          currentPage={currentPage}
+          selectedStatuses={selectedStatuses}
-          totalPages={data?.totalPages}
+          handleStatusChange={handleStatusChange}
-          paginate={paginate}
+          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>
   );
 };