src/components/Directory/CardViewDirectory.jsx

@@ -1,21 +1,12 @@
 import React from "react";
-import Avatar from "../common/Avatar";
 
-const CardViewDirectory = ({ contact,setSelectedContact , setIsOpenModal}) => {
+const CardViewDirectory = ({contact}) => {
   return (
-    <div class="card text-start border-1">
+    <div class="card text-start ">
       <div class="card-body d-flex justify-content-between px-1 py-2">
-        <div className="d-flex align-items-center">
+        <div>
-          <Avatar
+                  <p className="fs-6 m-0">{contact.name}</p>
-            size="xs"
+          <small className="simple-text m-0 text-muted"></small>
-            firstName={
-              (contact?.name || "").trim().split(" ")[0]?.charAt(0) || ""
-            }
-            lastName={
-              (contact?.name || "").trim().split(" ")[1]?.charAt(0) || ""
-            }
-          />{" "}
-          <p className="m-0">{contact.name}</p>
         </div>
         <div>
           <div className="dropdown z-2 ">
@@ -35,11 +26,7 @@ const CardViewDirectory = ({ contact,setSelectedContact , setIsOpenModal}) => {
               ></i>
             </button>
             <ul className="dropdown-menu dropdown-menu-end w-auto">
-              <li onClick={() =>
+              <li >
-              {
-                setSelectedContact(contact)
-                setIsOpenModal(true)
-              }}>
                 <a className="dropdown-item px-2 py-0">
                   <i className="bx bx-pencil bx-xs me-2"></i>
                   <span className="align-left small-text">Modify</span>
@@ -56,43 +43,30 @@ const CardViewDirectory = ({ contact,setSelectedContact , setIsOpenModal}) => {
         </div>
       </div>
       <div class="card-footer text-start px-1 py-1">
-        <hr className="my-0" />
+        <hr className="my-0"/>
-        {contact.contactEmails[0] && (
+              {contact.contactEmails && <ul className="list-inline my-1 ">
-          <ul className="list-inline my-1 ">
+                  <li className="list-inline-item me-2">
-            <li className="list-inline-item me-2">
+                      <i className="bx bx-envelope bx-xs"></i>
-              <i className="bx bx-envelope bx-xs"></i>
+                  </li>
-            </li>
+                  <li className="list-inline-item small-text">{contact.contactEmails[ 0 ]?.emailAddress}</li>
-            <li className="list-inline-item small-text">
+              </ul>}
-              {contact.contactEmails[0]?.emailAddress}
-            </li>
-          </ul>
-        )}
 
-        {contact.contactPhones[0] && (
+              {contact.contactPhones && <ul className="list-inline m-0">
-          <ul className="list-inline m-0">
+                  <li className="list-inline-item me-2">
-            <li className="list-inline-item me-2">
+                      <i className="bx bx-phone bx-xs"></i>
-              <i className="bx bx-phone bx-xs"></i>
+                  </li>
-            </li>
+                  <li className="list-inline-item small-text">{contact.contactPhones[ 0 ]?.phoneNumber}</li>
-            <li className="list-inline-item small-text">
+              </ul>}
-              {contact.contactPhones[0]?.phoneNumber}
+
-            </li>
+      <ul className="list-inline m-0">
-          </ul>
+        <li className="list-inline-item me-2">
-        )}
+          <i className="bx bx-merge bx-xs"></i>
+        </li>
+                  <li className="list-inline-item small-text">
+                      {contact.contactCategory.name}
+        </li>
+      </ul>
 
-        <ul className="list-inline m-0">
-          <li className="list-inline-item me-2">
-            <i className="bx bx-building bx-xs"></i>
-          </li>
-          <li className="list-inline-item small-text">
-            {contact.organization}
-          </li>
-          <li className="list-inline-item me-2">
-            <i className="bx bx-merge bx-xs"></i>
-          </li>
-          <li className="list-inline-item small-text">
-            {contact.contactCategory.name}
-          </li>
-        </ul>
       </div>
     </div>
   );

src/components/Directory/DirectorySchema.js

@@ -24,7 +24,7 @@ export const ContactSchema = z
           phoneNumber: z
             .string()
             .min(6, "Invalid Number")
-            .max(13, "Invalid Number")
+            .max(10, "Invalid Number")
             .regex(/^[\d\s+()-]+$/, "Invalid phone number format").or(z.literal("")),
         })
       )

src/components/Directory/ListViewDirectory.jsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import Avatar from '../common/Avatar';
 
 const getEmailIcon = (type) => {
   switch (type) {
@@ -24,22 +23,10 @@ const getPhoneIcon = (type) => {
   }
 };
 
-const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal}) => {
+const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal }) => {
   return (
-    <tr  >
+    <tr key={contact.id} >
-      <td className="text-start" style={{width: '18%'}} colSpan={2}>
+      <td className="text-start" style={{ width: '18%' }} colSpan={2}>{`${contact.name}`}</td>
-     <div className="d-flex align-items-center">
-  <Avatar
-  size="xs"
-  firstName={(contact?.name || "").trim().split(" ")[0]?.charAt(0) || ""}
-  lastName={(contact?.name || "").trim().split(" ")[1]?.charAt(0) || ""}
-/>
-
-  <span >{contact?.name || ""}</span>
-</div>
-
-
-      </td>
 
       {/* Emails */}
       <td >
@@ -70,7 +57,7 @@ const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal}) => {
   
       <td>
         <div className="d-flex flex-column align-items-start">
-          <span className="badge badge-outline-primary">{contact?.contactCategory?.name }</span>
+          <span class="badge badge-outline-primary">{contact?.contactCategory?.name }</span>
         </div>
       </td>
 

src/components/Directory/ManageDirectory.jsx

@@ -144,6 +144,7 @@ useEffect(() => {
     <FormProvider {...methods}>
       <form className="p-2 p-sm-0" onSubmit={handleSubmit(onSubmit)}>
         <div className="d-flex justify-content-center align-items-center">
+          <IconButton size={15} iconClass="bx bx-user-plus" color="primary" />{" "}
           <h6 className="m-0 fw-18"> Create New Contact</h6>
         </div>
         <div className="row">
@@ -210,7 +211,7 @@ useEffect(() => {
                         onClick={handleAddEmail}
                         style={{ width: "24px", height: "24px" }}
                       >
-                        <i className="bx bx-plus-circle bx-xs" />
+                        <i className="bx bx-plus bx-xs" />
                       </button>
                     ) : (
                       <button
@@ -219,7 +220,7 @@ useEffect(() => {
                         onClick={() => removeEmail(index)}
                         style={{ width: "24px", height: "24px" }}
                       >
-                        <i className="bx bx-minus-circle bx-xs" />
+                        <i className="bx bx-x bx-xs" />
                       </button>
                     )}
                   </div>
@@ -270,7 +271,7 @@ useEffect(() => {
                         onClick={handleAddPhone}
                         style={{ width: "24px", height: "24px" }}
                       >
-                        <i className="bx bx-plus-circle bx-xs" />
+                        <i className="bx bx-plus bx-xs" />
                       </button>
                     ) : (
                       <button
@@ -279,7 +280,7 @@ useEffect(() => {
                         onClick={() => removePhone(index)}
                         style={{ width: "24px", height: "24px" }}
                       >
-                        <i className="bx bx-minus-circle bx-xs" />
+                        <i className="bx bx-x bx-xs" />
                       </button>
                     )}
                   </div>
@@ -310,7 +311,7 @@ useEffect(() => {
                 </option>
               ) : (
                 <>
-                  <option disabled  value="">
+                  <option disabled selected value="">
                     Select Category
                   </option>
                   {contactCategory?.map((cate) => (

src/components/Directory/UpdateContact.jsx

@@ -111,29 +111,19 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
   };
 
   const onSubmit = async (data) => {
-const cleaned = {
+    debugger;
-  ...data,
+    const cleaned = {
-  contactEmails: (data.contactEmails || [])
+      ...data,
-    .filter((e) => e.emailAddress?.trim() !== "")
+      contactEmails: (data.contactEmails || []).filter(
-    .map((email, index) => {
+        (e) => e.emailAddress?.trim() !== ""
-      const existingEmail = existingContact.contactEmails?.[index];
+      ),
-      return existingEmail
+      contactPhones: (data.contactPhones || []).filter(
-        ? { ...email, id: existingEmail.id } 
+        (p) => p.phoneNumber?.trim() !== ""
-        : email;
+      ),
-    }),
+    };
-  contactPhones: (data.contactPhones || [])
-    .filter((p) => p.phoneNumber?.trim() !== "")
-    .map((phone, index) => {
-      const existingPhone = existingContact.contactPhones?.[index];
-      return existingPhone
-        ? { ...phone, id: existingPhone.id }
-        : phone;
-    }),
-};
-
-setSubmitting(true);
-await submitContact({ ...cleaned, id: existingContact.id });
 
+    setSubmitting(true);
+    await submitContact({ ...cleaned, id: existingContact.id });
     setSubmitting(false);
     
   };
@@ -171,7 +161,7 @@ await submitContact({ ...cleaned, id: existingContact.id });
       setIsInitialized(true)
     }
     
-    // return()=> reset()
+    return()=> reset()
   }, [ existingContact, buckets, projects ] );
   
 
@@ -179,6 +169,7 @@ await submitContact({ ...cleaned, id: existingContact.id });
     <FormProvider {...methods}>
       <form className="p-2 p-sm-0" onSubmit={handleSubmit(onSubmit)}>
         <div className="d-flex justify-content-center align-items-center">
+          <IconButton size={15} iconClass="bx bx-user-plus" color="primary" />{" "}
           <h6 className="m-0 fw-18"> Update Contact</h6>
         </div>
         <div className="row">
@@ -245,7 +236,7 @@ await submitContact({ ...cleaned, id: existingContact.id });
                         onClick={handleAddEmail}
                         style={{ width: "24px", height: "24px" }}
                       >
-                        <i className="bx bx-plus-circle bx-xs" />
+                        <i className="bx bx-plus bx-xs" />
                       </button>
                     ) : (
                       <button
@@ -254,7 +245,7 @@ await submitContact({ ...cleaned, id: existingContact.id });
                         onClick={() => removeEmail(index)}
                         style={{ width: "24px", height: "24px" }}
                       >
-                        <i className="bx bx-minus-circle bx-xs" />
+                        <i className="bx bx-x bx-xs" />
                       </button>
                     )}
                   </div>
@@ -305,7 +296,7 @@ await submitContact({ ...cleaned, id: existingContact.id });
                         onClick={handleAddPhone}
                         style={{ width: "24px", height: "24px" }}
                       >
-                        <i className="bx bx-plus-circle bx-xs" />
+                        <i className="bx bx-plus bx-xs" />
                       </button>
                     ) : (
                       <button
@@ -314,7 +305,7 @@ await submitContact({ ...cleaned, id: existingContact.id });
                         onClick={() => removePhone(index)}
                         style={{ width: "24px", height: "24px" }}
                       >
-                        <i className="bx bx-minus-circle bx-xs" />
+                        <i className="bx bx-x bx-xs" />
                       </button>
                     )}
                   </div>
@@ -345,7 +336,7 @@ await submitContact({ ...cleaned, id: existingContact.id });
                 </option>
               ) : (
                 <>
-                  <option disabled  value="">
+                  <option disabled selected value="">
                     Select Category
                   </option>
                   {contactCategory?.map((cate) => (

src/components/common/GlobalModel.jsx

@@ -15,7 +15,7 @@ const GlobalModel = ({
 useEffect(() => {
   const modalElement = modalRef.current;
   const modalInstance = new window.bootstrap.Modal(modalElement, {
-    backdrop: false,
+    backdrop: false  // Disable backdrop
   });
 
   if (isOpen) {
@@ -26,27 +26,16 @@ useEffect(() => {
 
   const handleHideModal = () => {
     closeModal();
-
-    // ✅ FIX: Remove any lingering body classes/styles
-    document.body.classList.remove('modal-open');
-    document.body.style.overflow = '';
-    document.body.style.paddingRight = '';
   };
 
   modalElement.addEventListener('hidden.bs.modal', handleHideModal);
 
   return () => {
     modalElement.removeEventListener('hidden.bs.modal', handleHideModal);
-
-    // Also clean up just in case component unmounts
-    document.body.classList.remove('modal-open');
-    document.body.style.overflow = '';
-    document.body.style.paddingRight = '';
   };
 }, [isOpen, closeModal]);
 
 
-
   // Dynamically set the modal size classes (modal-sm, modal-lg, modal-xl)
   const modalSizeClass = size ? `modal-${size}` : '';  // Default is empty if no size is specified
 

src/pages/Directory/Directory.jsx

@@ -19,7 +19,7 @@ const Directory = () => {
   const [ContatList, setContactList] = useState([]);
   const [contactCategories, setContactCategories] = useState([]);
   const [ searchText, setSearchText ] = useState( "" );
-   const [listView, setListView] = useState(true);
+   const [listView, setListView] = useState(false);
 
   const { contacts, loading } = useDirectory();
   const { contactCategory, loading: contactCategoryLoading } =
@@ -79,7 +79,7 @@ const Directory = () => {
     );
   };
   const filteredContacts = useMemo(() => {
-    return ContatList
+    return contacts
       .filter((c) => {
         const matchesSearch =
           c.name.toLowerCase().includes(searchText.toLowerCase()) ||
@@ -90,7 +90,7 @@ const Directory = () => {
         return matchesSearch && matchesCategory;
       })
       .sort((a, b) => a.name.localeCompare(b.name));
-  }, [ContatList, searchText, selectedCategoryIds]);
+  }, [contacts, searchText, selectedCategoryIds]);
   const { currentPage, totalPages, currentItems, paginate } = usePagination(
     filteredContacts,
     10
@@ -196,7 +196,7 @@ const Directory = () => {
           <div className="col-5 col-md-8 mb-2 px-1 text-md-end text-end">
             <button
               type="button"
-              className="btn btn-xs btn-primary"
+              className="btn btn-sm btn-primary"
               onClick={() => setIsOpenModal(true)}
             >
               <i className="bx bx-plus-circle me-2"></i>
@@ -277,7 +277,6 @@ const Directory = () => {
               {!loading &&
                 currentItems.map((contact) => (
                   <ListViewDirectory
-                      key={contact.id} 
                     contact={contact}
                     setSelectedContact={setSelectedContact}
                     setIsOpenModal={setIsOpenModal}
@@ -288,13 +287,9 @@ const Directory = () => {
         </div>
           ) : (
                 <div className="row">
-          {currentItems.map((contact, index) => (
+          {currentItems.map((item, index) => (
-            <div key={contact.id} className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4">
+            <div key={index} className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4">
-              <CardViewDirectory contact={contact}
+              <CardViewDirectory contact={item} />
-                setSelectedContact={setSelectedContact}
-                setIsOpenModal={setIsOpenModal}
-            
-              />
             </div>
           ))}
         </div>