From 9de0b1a0df506c615ea8d0cb5695ed630c806613 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Fri, 10 Oct 2025 16:00:52 +0530
Subject: [PATCH] Project List view UI implementation.

---
 src/components/Project/ProjectListView.jsx | 241 +++++++++++----------
 1 file changed, 121 insertions(+), 120 deletions(-)

diff --git a/src/components/Project/ProjectListView.jsx b/src/components/Project/ProjectListView.jsx
index fb81428f..0c1a5c41 100644
--- a/src/components/Project/ProjectListView.jsx
+++ b/src/components/Project/ProjectListView.jsx
@@ -131,148 +131,149 @@ const ProjectListView = ({
 
   const handleMoveDetails = (project) => {
     dispatch(setProjectId(project));
-    localStorage.setItem("lastActiveProjectTab","profile")
+    localStorage.setItem("lastActiveProjectTab", "profile")
     navigate("/projects/details");
   };
   return (
     <div className="card page-min-h py-4 px-6 shadow-sm">
-      <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}>
-                {col.label}
-              </th>
-            ))}
-            <th className="text-center py-3">Action</th>
-          </tr>
-        </thead>
-        <tbody>
-          {currentItems?.map((project) => (
-            <tr key={project.id}>
+      <div className="table-responsive text-nowrap">
+        <table className="table  table-hover align-middle m-0">
+          <thead className="border-bottom">
+            <tr>
               {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>
+                <th key={col.key} colSpan={col.colSpan} className={col.className}>
+                  {col.label}
+                </th>
               ))}
-              <td className={`mx-2 ${"d-sm-table-cell"}`}>
-                <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"
+              <th className="text-center py-3">Action</th>
+            </tr>
+          </thead>
+          <tbody>
+            {currentItems?.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" }}
                   >
-                    <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 onClick={() => handleMoveDetails(project.id)}>
-                      <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>
+                    {col.getValue
+                      ? col.getValue(project)
+                      : project[col.key] || "N/A"}
+                  </td>
+                ))}
+                <td className={`mx-2 ${"d-sm-table-cell"}`}>
+                  <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 onClick={() => handleMoveDetails(project.id)}>
+                        <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)}>
+                      <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>
+                    </ul>
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
 
-      {isLoading && (
-        <div className="py-4">
-          {" "}
-          {isLoading && <p className="text-center">Loading...</p>}
-          {!isLoading && filteredProjects.length === 0 && (
+        {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 && 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) => (
+          </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
-                key={i}
-                className={`page-item ${currentPage === i + 1 && "active"}`}
+                className={`page-item ${currentPage === totalPages && "disabled"
+                  }`}
               >
                 <button
                   className="page-link"
-                  onClick={() => setCurrentPage(i + 1)}
+                  onClick={() =>
+                    setCurrentPage((p) => Math.min(totalPages, p + 1))
+                  }
                 >
-                  {i + 1}
+                  &raquo;
                 </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>
-      )}
+            </ul>
+          </nav>
+        )}
+      </div>
     </div>
   );
 };