From b06d6eda94e6026980fe669e587c0c9e05aa74fd Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Mon, 11 Aug 2025 14:56:12 +0530
Subject: [PATCH 1/2] Contact list grid columns not displayed when no contact
 is available

---
 src/pages/Directory/Directory.jsx             | 51 +++++++++++--------
 .../Directory/DirectoryListTableHeader.jsx    |  2 +-
 2 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/src/pages/Directory/Directory.jsx b/src/pages/Directory/Directory.jsx
index 8f72ac81..1319da5e 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
@@ -260,7 +260,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
   }, [prefernceContacts]);
 
   return (
-    <div className={IsPage ? "container-fluid":""}>
+    <div className={IsPage ? "container-fluid" : ""}>
       {IsPage && (
         <Breadcrumb
           data={[
@@ -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,23 +361,9 @@ 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">
+            <div className="card-body p-2 pb-1" style={{ minHeight: "200px" }}>
               <DirectoryListTableHeader>
                 {!loading &&
                   currentItems.map((contact) => (
@@ -394,12 +380,22 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
                     />
                   ))}
               </DirectoryListTableHeader>
+
+              {/* Empty state AFTER list */}
+              {!loading && contacts?.length === 0 && (
+                <p className="mt-3 ms-3 text-muted" >No contact found</p>
+              )}
+              {!loading &&
+                contacts?.length > 0 &&
+                currentItems.length === 0 && (
+                  <p className="mt-3 ms-3 text-muted">No matching contact found</p>
+                )}
             </div>
           </div>
         )}
 
         {viewType === "card" && (
-          <div className="row mt-4">
+          <div className="row mt-10">
             {!loading &&
               currentItems.map((contact) => (
                 <div
@@ -418,6 +414,16 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
                   />
                 </div>
               ))}
+
+            {/* Empty state for card view */}
+            {!loading && contacts?.length === 0 && (
+              <p className="mt-3 ms-3 text-muted">No contact found</p>
+            )}
+            {!loading &&
+              contacts?.length > 0 &&
+              currentItems.length === 0 && (
+                <p className="mt-3 ms-3 text-muted">No matching contact found</p>
+              )}
           </div>
         )}
 
@@ -428,7 +434,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
               setNotesForFilter={setNotes}
               searchText={searchText}
               setIsOpenModalNote={setIsOpenModalNote}
-             filterAppliedNotes={filterAppliedNotes}
+              filterAppliedNotes={filterAppliedNotes}
             />
           </div>
         )}
@@ -464,7 +470,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)}
diff --git a/src/pages/Directory/DirectoryListTableHeader.jsx b/src/pages/Directory/DirectoryListTableHeader.jsx
index a2321e9b..5702a6c6 100644
--- a/src/pages/Directory/DirectoryListTableHeader.jsx
+++ b/src/pages/Directory/DirectoryListTableHeader.jsx
@@ -3,7 +3,7 @@ import IconButton from "../../components/common/IconButton";
 
 const DirectoryListTableHeader = ({ children }) => {
   return (
-    <div className="table-responsive text-nowrap py-2">
+     <div className="table-responsive text-nowrap py-2" style={{ minHeight: "80px"}}> 
       <table className="table px-2">
         <thead>
           <tr>
-- 
2.43.0


From b7463bb9ac819271642eb0ff087c9a8868648114 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Mon, 11 Aug 2025 15:01:47 +0530
Subject: [PATCH 2/2] Removing extra space in list view.

---
 src/pages/Directory/Directory.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Directory/Directory.jsx b/src/pages/Directory/Directory.jsx
index 1319da5e..23b01267 100644
--- a/src/pages/Directory/Directory.jsx
+++ b/src/pages/Directory/Directory.jsx
@@ -362,7 +362,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
       </div>
       <div className="card-minHeight mt-0">
         {viewType === "list" && (
-          <div className="card cursor-pointer mt-5">
+          <div className="card cursor-pointer mt-3">
             <div className="card-body p-2 pb-1" style={{ minHeight: "200px" }}>
               <DirectoryListTableHeader>
                 {!loading &&
-- 
2.43.0