From 3d8247a27b822eae79a893f62cef1a46ced4b06a Mon Sep 17 00:00:00 2001
From: Kartik sharma <kartik.sharma@marcoaiot.com>
Date: Tue, 8 Jul 2025 12:38:08 +0530
Subject: [PATCH 1/3] UI Misaligned on Toggling 'Show Inactive Contact' When No
 Inactive Contacts Exist in Directory at projects.

---
 src/pages/Directory/Directory.jsx | 115 +++++++++++++++++-------------
 1 file changed, 64 insertions(+), 51 deletions(-)

diff --git a/src/pages/Directory/Directory.jsx b/src/pages/Directory/Directory.jsx
index ca95181f..d83e6328 100644
--- a/src/pages/Directory/Directory.jsx
+++ b/src/pages/Directory/Directory.jsx
@@ -38,7 +38,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
   const [IsDeleting, setDeleting] = useState(false);
   const [openBucketModal, setOpenBucketModal] = useState(false);
   const [notes, setNotes] = useState([]);
-    const [filterAppliedNotes, setFilterAppliedNotes] = useState([]);
+  const [filterAppliedNotes, setFilterAppliedNotes] = useState([]);
   // const [selectedOrgs, setSelectedOrgs] = useState([]);
 
   // ✅ Changed to an array for multiple selections
@@ -353,7 +353,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
             setOpenBucketModal={setOpenBucketModal}
             contactsToExport={contacts}
             notesToExport={notes}
-            selectedNoteNames={selectedNoteNames}       
+            selectedNoteNames={selectedNoteNames}
             setSelectedNoteNames={setSelectedNoteNames}
             notesForFilter={notes}
             setFilterAppliedNotes={setFilterAppliedNotes}
@@ -361,52 +361,35 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
         </div>
       </div>
       <div className="card-minHeight mt-0">
-        {(viewType === "card" || viewType === "list" || viewType === "notes") && (
-          <div className="d-flex flex-column justify-content-center align-items-center text-center">
-            {!loading && (viewType === "card" || viewType === "list") && contacts?.length === 0 && (
-              <p className="mt-10">No contact found</p>
-            )}
-            {!loading &&
-              (viewType === "card" || viewType === "list") &&
-              contacts?.length > 0 &&
-              currentItems.length === 0 && (
-                <p className="mt-10">No matching contact found</p>
-              )}
-          </div>
-        )}
-
-        {viewType === "list" && (
-          <div className="card cursor-pointer mt-5">
-            <div className="card-body p-2 pb-1">
-              <DirectoryListTableHeader>
-                {!loading &&
-                  currentItems.map((contact) => (
-                    <ListViewDirectory
-                      key={contact.id}
-                      IsActive={IsActive}
-                      contact={contact}
-                      setSelectedContact={setSelectedContact}
-                      setIsOpenModal={setIsOpenModal}
-                      setOpen_contact={setOpen_contact}
-                      setIsOpenModalNote={setIsOpenModalNote}
-                      IsDeleted={setDeleteContact}
-                      restore={handleDeleteContact}
-                    />
-                  ))}
-              </DirectoryListTableHeader>
+        {/* Loader when switching between Active/Pending or filtering */}
+        {loading && (
+          <div className="d-flex justify-content-center align-items-center py-5">
+            <div className="spinner-border text-primary" role="status">
+              <span className="visually-hidden">Loading...</span>
             </div>
           </div>
         )}
 
-        {viewType === "card" && (
-          <div className="row mt-4">
-            {!loading &&
-              currentItems.map((contact) => (
-                <div
-                  key={contact.id}
-                  className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4"
-                >
-                  <CardViewDirectory
+        {/* Empty state messages */}
+        {!loading && (viewType === "card" || viewType === "list") && (
+          <div className="d-flex flex-column justify-content-center align-items-center text-center">
+            {contacts?.length === 0 && (
+              <p className="mt-10">No contact found</p>
+            )}
+            {contacts?.length > 0 && currentItems.length === 0 && (
+              <p className="mt-10">No matching contact found</p>
+            )}
+          </div>
+        )}
+
+        {/* List View */}
+        {!loading && viewType === "list" && currentItems.length > 0 && (
+          <div className="card cursor-pointer mt-5">
+            <div className="card-body p-2 pb-1">
+              <DirectoryListTableHeader>
+                {currentItems.map((contact) => (
+                  <ListViewDirectory
+                    key={contact.id}
                     IsActive={IsActive}
                     contact={contact}
                     setSelectedContact={setSelectedContact}
@@ -416,19 +399,44 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
                     IsDeleted={setDeleteContact}
                     restore={handleDeleteContact}
                   />
-                </div>
-              ))}
+                ))}
+              </DirectoryListTableHeader>
+            </div>
           </div>
         )}
 
-        {viewType === "notes" && (
+        {/* Card View */}
+        {!loading && viewType === "card" && currentItems.length > 0 && (
+          <div className="row mt-4">
+            {currentItems.map((contact) => (
+              <div
+                key={contact.id}
+                className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4"
+              >
+                <CardViewDirectory
+                  IsActive={IsActive}
+                  contact={contact}
+                  setSelectedContact={setSelectedContact}
+                  setIsOpenModal={setIsOpenModal}
+                  setOpen_contact={setOpen_contact}
+                  setIsOpenModalNote={setIsOpenModalNote}
+                  IsDeleted={setDeleteContact}
+                  restore={handleDeleteContact}
+                />
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Notes View */}
+        {!loading && viewType === "notes" && (
           <div className="mt-0">
             <NotesCardViewDirectory
               notes={notes}
               setNotesForFilter={setNotes}
               searchText={searchText}
               setIsOpenModalNote={setIsOpenModalNote}
-             filterAppliedNotes={filterAppliedNotes}
+              filterAppliedNotes={filterAppliedNotes}
             />
           </div>
         )}
@@ -437,7 +445,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
         {!loading &&
           viewType !== "notes" &&
           contacts?.length > 0 &&
-          currentItems.length > ITEMS_PER_PAGE && (
+          filteredContacts.length > ITEMS_PER_PAGE && (
             <nav aria-label="Page navigation">
               <ul className="pagination pagination-sm justify-content-end py-1">
                 <li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
@@ -464,7 +472,10 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
                   </li>
                 ))}
 
-                <li className={`page-item ${currentPage === totalPages ? "disabled" : ""}`}>
+                <li
+                  className={`page-item ${currentPage === totalPages ? "disabled" : ""
+                    }`}
+                >
                   <button
                     className="page-link"
                     onClick={() => paginate(currentPage + 1)}
@@ -476,8 +487,10 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
             </nav>
           )}
       </div>
+
     </div>
   );
 };
 
-export default Directory;
\ No newline at end of file
+export default Directory;
+

From e3417287d350eac366f01e2a34ee605d56fdb78c Mon Sep 17 00:00:00 2001
From: Kartik sharma <kartik.sharma@marcoaiot.com>
Date: Wed, 9 Jul 2025 10:20:32 +0530
Subject: [PATCH 2/3] Sizing for the projects directory has been corrected.

---
 public/assets/vendor/css/core.css    | 2 +-
 src/pages/project/ProjectDetails.jsx | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/public/assets/vendor/css/core.css b/public/assets/vendor/css/core.css
index d7f7cfcb..12040459 100644
--- a/public/assets/vendor/css/core.css
+++ b/public/assets/vendor/css/core.css
@@ -836,7 +836,7 @@ progress {
 }
 
 .row {
-  --bs-gutter-x: 1.625rem;
+  --bs-gutter-x: 3.625rem;
   --bs-gutter-y: 0;
   display: flex;
   flex-wrap: wrap;
diff --git a/src/pages/project/ProjectDetails.jsx b/src/pages/project/ProjectDetails.jsx
index b52f6836..3d6b28d5 100644
--- a/src/pages/project/ProjectDetails.jsx
+++ b/src/pages/project/ProjectDetails.jsx
@@ -81,7 +81,7 @@ const ProjectDetails = () => {
       case "profile": {
         return (
           <>
-            <div className="row">
+            <div className="row ">
               <div className="col-lg-4 col-md-5 mt-5">
                 {/* About User */}
                 <AboutProject data={projectDetails}></AboutProject>
@@ -139,7 +139,7 @@ const ProjectDetails = () => {
       }
       case "directory": {
         return (
-          <div className="row">
+          <div className="row mt-2">
             <Directory IsPage={false} prefernceContacts={projectDetails.id} />
           </div>
         );
@@ -193,7 +193,7 @@ const ProjectDetails = () => {
           ]}
         ></Breadcrumb>
 
-        <div className="row">
+        <div className="row ">
           {projectLoading && <p>Loading....</p>}
           {/* {!projectLoading && project && (
             <ProjectBanner project_data={project}></ProjectBanner>

From bae48be2b55e3280e837b0391b6a3b0cfbd7c2e4 Mon Sep 17 00:00:00 2001
From: Kartik sharma <kartik.sharma@marcoaiot.com>
Date: Wed, 9 Jul 2025 16:06:30 +0530
Subject: [PATCH 3/3] Increase the size of table in Projects Directory and show
 text in center and add 200 px height.

---
 src/pages/Directory/Directory.jsx | 145 +++++++++++++++++-------------
 1 file changed, 83 insertions(+), 62 deletions(-)

diff --git a/src/pages/Directory/Directory.jsx b/src/pages/Directory/Directory.jsx
index d83e6328..3b3f4671 100644
--- a/src/pages/Directory/Directory.jsx
+++ b/src/pages/Directory/Directory.jsx
@@ -361,75 +361,97 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
         </div>
       </div>
       <div className="card-minHeight mt-0">
-        {/* Loader when switching between Active/Pending or filtering */}
-        {loading && (
-          <div className="d-flex justify-content-center align-items-center py-5">
-            <div className="spinner-border text-primary" role="status">
-              <span className="visually-hidden">Loading...</span>
-            </div>
-          </div>
-        )}
-
-        {/* Empty state messages */}
-        {!loading && (viewType === "card" || viewType === "list") && (
-          <div className="d-flex flex-column justify-content-center align-items-center text-center">
-            {contacts?.length === 0 && (
-              <p className="mt-10">No contact found</p>
-            )}
-            {contacts?.length > 0 && currentItems.length === 0 && (
-              <p className="mt-10">No matching contact found</p>
-            )}
-          </div>
-        )}
-
-        {/* List View */}
-        {!loading && viewType === "list" && currentItems.length > 0 && (
-          <div className="card cursor-pointer mt-5">
-            <div className="card-body p-2 pb-1">
+        {/* LIST VIEW */}
+        {viewType === "list" && (
+          <div className="card cursor-pointer mt-3">
+            <div className="card-body p-2 pb-1" style={{ minHeight: "200px" }}>
               <DirectoryListTableHeader>
-                {currentItems.map((contact) => (
-                  <ListViewDirectory
-                    key={contact.id}
-                    IsActive={IsActive}
-                    contact={contact}
-                    setSelectedContact={setSelectedContact}
-                    setIsOpenModal={setIsOpenModal}
-                    setOpen_contact={setOpen_contact}
-                    setIsOpenModalNote={setIsOpenModalNote}
-                    IsDeleted={setDeleteContact}
-                    restore={handleDeleteContact}
-                  />
-                ))}
+                {!loading && contacts?.length === 0 ? (
+                  <tr>
+                    <td colSpan="6">
+                      <div
+                        className="d-flex justify-content-center align-items-center"
+                        style={{ height: "150px",marginLeft: "230px" }}
+                      >
+                        <p className="mb-0 text-muted">No contact found</p>
+                      </div>
+                    </td>
+                  </tr>
+                ) : !loading && contacts?.length > 0 && currentItems.length === 0 ? (
+                  <tr>
+                    <td colSpan="6">
+                      <div
+                        className="d-flex justify-content-center align-items-center"
+                        style={{ height: "150px" }}
+                      >
+                        <p className="mb-0 text-muted">No matching contact found</p>
+                      </div>
+                    </td>
+                  </tr>
+                ) : (
+                  !loading &&
+                  currentItems.map((contact) => (
+                    <ListViewDirectory
+                      key={contact.id}
+                      IsActive={IsActive}
+                      contact={contact}
+                      setSelectedContact={setSelectedContact}
+                      setIsOpenModal={setIsOpenModal}
+                      setOpen_contact={setOpen_contact}
+                      setIsOpenModalNote={setIsOpenModalNote}
+                      IsDeleted={setDeleteContact}
+                      restore={handleDeleteContact}
+                    />
+                  ))
+                )}
               </DirectoryListTableHeader>
             </div>
           </div>
         )}
 
-        {/* Card View */}
-        {!loading && viewType === "card" && currentItems.length > 0 && (
-          <div className="row mt-4">
-            {currentItems.map((contact) => (
+        {/* CARD VIEW */}
+        {viewType === "card" && (
+          <>
+            {contacts?.length === 0 && !loading ? (
               <div
-                key={contact.id}
-                className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4"
+                className="d-flex justify-content-center align-items-center text-center"
+                style={{ minHeight: "200px" }}
               >
-                <CardViewDirectory
-                  IsActive={IsActive}
-                  contact={contact}
-                  setSelectedContact={setSelectedContact}
-                  setIsOpenModal={setIsOpenModal}
-                  setOpen_contact={setOpen_contact}
-                  setIsOpenModalNote={setIsOpenModalNote}
-                  IsDeleted={setDeleteContact}
-                  restore={handleDeleteContact}
-                />
+                <p className="text-muted mb-0">No contact found</p>
               </div>
-            ))}
-          </div>
+            ) : currentItems.length === 0 && !loading ? (
+              <div
+                className="d-flex justify-content-center align-items-center text-center"
+                style={{ minHeight: "250px" }}
+              >
+                <p className="text-muted mb-0">No matching contact found</p>
+              </div>
+            ) : (
+              <div className="row mt-4">
+                {currentItems.map((contact) => (
+                  <div
+                    key={contact.id}
+                    className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4"
+                  >
+                    <CardViewDirectory
+                      IsActive={IsActive}
+                      contact={contact}
+                      setSelectedContact={setSelectedContact}
+                      setIsOpenModal={setIsOpenModal}
+                      setOpen_contact={setOpen_contact}
+                      setIsOpenModalNote={setIsOpenModalNote}
+                      IsDeleted={setDeleteContact}
+                      restore={handleDeleteContact}
+                    />
+                  </div>
+                ))}
+              </div>
+            )}
+          </>
         )}
 
-        {/* Notes View */}
-        {!loading && viewType === "notes" && (
+        {/* NOTES VIEW */}
+        {viewType === "notes" && (
           <div className="mt-0">
             <NotesCardViewDirectory
               notes={notes}
@@ -441,11 +463,11 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
           </div>
         )}
 
-        {/* Pagination */}
+        {/* PAGINATION */}
         {!loading &&
           viewType !== "notes" &&
           contacts?.length > 0 &&
-          filteredContacts.length > ITEMS_PER_PAGE && (
+          currentItems.length > ITEMS_PER_PAGE && (
             <nav aria-label="Page navigation">
               <ul className="pagination pagination-sm justify-content-end py-1">
                 <li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
@@ -492,5 +514,4 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
   );
 };
 
-export default Directory;
-
+export default Directory;
\ No newline at end of file