From 6a7eb0ee912b4d3c4192441bb6270194174bfc19 Mon Sep 17 00:00:00 2001
From: pramod mahajan <pramod.mahajan@marcoaiot.com>
Date: Mon, 14 Jul 2025 18:17:07 +0530
Subject: [PATCH] fixed card width in core.css

---
 public/assets/vendor/css/core.css |   2 +-
 src/pages/Directory/Directory.jsx |   2 +-
 src/pages/project/ProjectList.jsx | 288 +++++++++++++++---------------
 3 files changed, 145 insertions(+), 147 deletions(-)

diff --git a/public/assets/vendor/css/core.css b/public/assets/vendor/css/core.css
index 5001fa1a..aca2dc05 100644
--- a/public/assets/vendor/css/core.css
+++ b/public/assets/vendor/css/core.css
@@ -2553,7 +2553,7 @@ progress {
 }
 
 .table-responsive {
-  /* overflow-x: auto; */
+  overflow-x: auto;
   -webkit-overflow-scrolling: touch;
 }
 
diff --git a/src/pages/Directory/Directory.jsx b/src/pages/Directory/Directory.jsx
index ca95181f..8f72ac81 100644
--- a/src/pages/Directory/Directory.jsx
+++ b/src/pages/Directory/Directory.jsx
@@ -260,7 +260,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
   }, [prefernceContacts]);
 
   return (
-    <div className="container-fluid">
+    <div className={IsPage ? "container-fluid":""}>
       {IsPage && (
         <Breadcrumb
           data={[
diff --git a/src/pages/project/ProjectList.jsx b/src/pages/project/ProjectList.jsx
index 6213a786..7733a60a 100644
--- a/src/pages/project/ProjectList.jsx
+++ b/src/pages/project/ProjectList.jsx
@@ -263,155 +263,153 @@ const ProjectList = () => {
           <p className="text-center text-muted">No projects found.</p>
         )}
 
-       {listView ? (
-  <div className="card cursor-pointer">
-    <div className="card-body p-2" style={{ minHeight: "200px" }}>
-      <div className="table-responsive text-nowrap py-2">
-        <table className="table m-3">
-          <thead>
-            <tr>
-              <th className="text-start" colSpan={5}>
-                Project Name
-              </th>
-              <th className="mx-2 text-start">Contact Person</th>
-              <th className="mx-2">START DATE</th>
-              <th className="mx-2">DEADLINE</th>
-              <th className="mx-2">Task</th>
-              <th className="mx-2">Progress</th>
-              <th className="mx-2">
-                <div className="dropdown">
-                  <a
-                    className="dropdown-toggle hide-arrow cursor-pointer"
-                    data-bs-toggle="dropdown"
-                    aria-expanded="false"
-                  >
-                    Status <i className="bx bx-filter bx-sm"></i>
-                  </a>
-                  <ul className="dropdown-menu p-2 text-capitalize">
-                    {[
-                      {
-                        id: "b74da4c2-d07e-46f2-9919-e75e49b12731",
-                        label: "Active",
-                      },
-                      {
-                        id: "603e994b-a27f-4e5d-a251-f3d69b0498ba",
-                        label: "On Hold",
-                      },
-                      {
-                        id: "ef1c356e-0fe0-42df-a5d3-8daee355492d",
-                        label: "Inactive",
-                      },
-                      {
-                        id: "33deaef9-9af1-4f2a-b443-681ea0d04f81",
-                        label: "Completed",
-                      },
-                    ].map(({ id, label }) => (
-                      <li key={id}>
-                        <div className="form-check">
-                          <input
-                            className="form-check-input"
-                            type="checkbox"
-                            checked={selectedStatuses.includes(id)}
-                            onChange={() => handleStatusChange(id)}
-                          />
-                          <label className="form-check-label">{label}</label>
+        {listView ? (
+          <div className="card cursor-pointer">
+            <div className="card-body p-2">
+              <div className="table-responsive text-nowrap py-2 " style={{minHeight:"400px"}}>
+                <table className="table m-3">
+                  <thead>
+                    <tr>
+                      <th className="text-start" colSpan={5} >
+                        Project Name
+                      </th>
+                      <th className="mx-2 text-start">Contact Person</th>
+                      <th className="mx-2">START DATE</th>
+                      <th className="mx-2">DEADLINE</th>
+                      <th className="mx-2">Task</th>
+                      <th className="mx-2">Progress</th>
+                      <th className="mx-2">
+                        <div className="dropdown">
+                          <a
+                            className="dropdown-toggle hide-arrow cursor-pointer"
+                            data-bs-toggle="dropdown"
+                            aria-expanded="false"
+                          >
+                            Status <i className="bx bx-filter bx-sm"></i>
+                          </a>
+                          <ul className="dropdown-menu p-2 text-capitalize">
+                            {[
+                              {
+                                id: "b74da4c2-d07e-46f2-9919-e75e49b12731",
+                                label: "Active",
+                              },
+                              {
+                                id: "cdad86aa-8a56-4ff4-b633-9c629057dfef",
+                                label:"In Progress"
+                               },
+                              {
+                                id: "603e994b-a27f-4e5d-a251-f3d69b0498ba",
+                                label: "On Hold",
+                              },
+                              {
+                                id: "ef1c356e-0fe0-42df-a5d3-8daee355492d",
+                                label: "Inactive",
+                              },
+                              {
+                                id: "33deaef9-9af1-4f2a-b443-681ea0d04f81",
+                                label: "Completed",
+                              },
+                            ].map(({ id, label }) => (
+                              <li key={id}>
+                                <div className="form-check">
+                                  <input
+                                    className="form-check-input  "
+                                    type="checkbox"
+                                    checked={selectedStatuses.includes(id)}
+                                    onChange={() => handleStatusChange(id)}
+                                  />
+                                  <label className="form-check-label">
+                                    {label}
+                                  </label>
+                                </div>
+                              </li>
+                            ))}
+                          </ul>
                         </div>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              </th>
-              <th
-                className={`mx-2 ${
-                  HasManageProject ? "d-sm-table-cell" : "d-none"
+                      </th>
+                      <th
+                        className={`mx-2 ${
+                          HasManageProject ? "d-sm-table-cell" : "d-none"
+                        }`}
+                      >
+                        Action
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody className="table-border-bottom-0 overflow-auto ">
+                    {currentItems.length === 0 ? (
+                      <tr className="text-center">
+                        <td colSpan="12" rowSpan='12'style={{height:"200px"}} >
+                          No projects found
+                        </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
+                key={project.id}
+                projectData={project}
+                recall={sortingProject}
+              />
+            ))}
+          </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"
                 }`}
               >
-                Action
-              </th>
-            </tr>
-          </thead>
-          <tbody className="table-border-bottom-0" style={{ height: "200px" }}>
-            {currentItems.length === 0 ? (
-              <tr>
-                <td
-                  colSpan="12"
-                  className="text-center"
-                  style={{
-                    verticalAlign: "middle",
-                    height: "200px",
-                    paddingTop: 0,
-                    paddingBottom: 0,
-                  }}
+                <button
+                  className="page-link"
+                  onClick={() =>
+                    setCurrentPage((p) => Math.min(totalPages, p + 1))
+                  }
                 >
-                  <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
-        key={project.id}
-        projectData={project}
-        recall={sortingProject}
-      />
-    ))}
-  </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>
-)}
-
+                  &raquo;
+                </button>
+              </li>
+            </ul>
+          </nav>
+        )}
       </div>
     </>
   );