src/pages/Directory/Directory.jsx

@@ -338,10 +338,19 @@ const handleDeleteContact = async (overrideId = null) => {
     IsActive={IsActive}
     setOpenBucketModal={setOpenBucketModal}
   />
-        {!listView && loading && <p>Loading...</p>}
-        {!listView && !loading && currentItems.length == 0 && (
-          <p>No Matching Contact Found</p>
+
+  {/* Messages when listView is false */}
+  {!listView && (
+    <div className="d-flex flex-column justify-content-center align-items-center text-center card-minHeight">
+      {loading && <p>Loading...</p>}
+      {!loading && contacts?.length === 0 && <p>No contact found</p>}
+      {!loading && contacts?.length > 0 && currentItems.length === 0 && (
+        <p>No matching contact found</p>
       )}
+    </div>
+  )}
+
+  {/* Table view (listView === true) */}
   {listView ? (
     <DirectoryListTableHeader>
       {loading && (
@@ -349,11 +358,19 @@ const handleDeleteContact = async (overrideId = null) => {
           <td colSpan={10}>Loading...</td>
         </tr>
       )}
-                {!loading && currentItems.length === 0 && (
-                  <tr>
-                    <td colSpan={10}>No Matching Contact Found</td>
+
+      {!loading && contacts?.length === 0 && (
+        <tr >
+          <td colSpan={10}>No contact found</td>
         </tr>
       )}
+
+      {!loading && currentItems.length === 0 && contacts?.length > 0 && (
+        <tr>
+          <td colSpan={10}>No matching contact found</td>
+        </tr>
+      )}
+
       {!loading &&
         currentItems.map((contact) => (
           <ListViewDirectory
@@ -371,7 +388,8 @@ const handleDeleteContact = async (overrideId = null) => {
     </DirectoryListTableHeader>
   ) : (
     <div className="row">
-            {!loading && currentItems.map((contact, index) => (
+      {!loading &&
+        currentItems.map((contact) => (
           <div
             key={contact.id}
             className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4"
@@ -391,14 +409,13 @@ const handleDeleteContact = async (overrideId = null) => {
     </div>
   )}
 
-       
-
-        {!loading  && currentItems < ITEMS_PER_PAGE && (
-          <nav aria-label="Page ">
+  {/* Pagination */}
+  {!loading &&
+    contacts?.length > 0 &&
+    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" : ""}`}
-              >
+          <li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
             <button
               className="page-link btn-xs"
               onClick={() => paginate(currentPage - 1)}
@@ -406,6 +423,7 @@ const handleDeleteContact = async (overrideId = null) => {
               &laquo;
             </button>
           </li>
+
           {[...Array(totalPages)].map((_, index) => (
             <li
               key={index}
@@ -414,20 +432,21 @@ const handleDeleteContact = async (overrideId = null) => {
               }`}
             >
               <button
-                    className="page-link "
+                className="page-link"
                 onClick={() => paginate(index + 1)}
               >
                 {index + 1}
               </button>
             </li>
           ))}
+
           <li
             className={`page-item ${
               currentPage === totalPages ? "disabled" : ""
             }`}
           >
             <button
-                  className="page-link "
+              className="page-link"
               onClick={() => paginate(currentPage + 1)}
             >
               &raquo;
@@ -436,7 +455,9 @@ const handleDeleteContact = async (overrideId = null) => {
         </ul>
       </nav>
     )}
-      </div>
+</div>
+
+
       </div>
   );
 };