added key for listviewdirectory

src/components/Directory/CardViewDirectory.jsx

@@ -1,12 +1,21 @@
 import React from "react";
+import Avatar from "../common/Avatar";
 
-const CardViewDirectory = ({contact}) => {
+const CardViewDirectory = ({ contact,setSelectedContact , setIsOpenModal}) => {
   return (
-    <div class="card text-start ">
+    <div class="card text-start border-1">
       <div class="card-body d-flex justify-content-between px-1 py-2">
-        <div>
-                  <p className="fs-6 m-0">{contact.name}</p>
-          <small className="simple-text m-0 text-muted"></small>
+        <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) || ""
+            }
+          />{" "}
+          <p className="m-0">{contact.name}</p>
         </div>
         <div>
           <div className="dropdown z-2 ">
@@ -26,7 +35,11 @@ const CardViewDirectory = ({contact}) => {
               ></i>
             </button>
             <ul className="dropdown-menu dropdown-menu-end w-auto">
-              <li >
+              <li onClick={() =>
+              {
+                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>
@@ -43,30 +56,43 @@ const CardViewDirectory = ({contact}) => {
         </div>
       </div>
       <div class="card-footer text-start px-1 py-1">
-        <hr className="my-0"/>
-              {contact.contactEmails && <ul className="list-inline my-1 ">
-                  <li className="list-inline-item me-2">
-                      <i className="bx bx-envelope bx-xs"></i>
-                  </li>
-                  <li className="list-inline-item small-text">{contact.contactEmails[ 0 ]?.emailAddress}</li>
-              </ul>}
+        <hr className="my-0" />
+        {contact.contactEmails[0] && (
+          <ul className="list-inline my-1 ">
+            <li className="list-inline-item me-2">
+              <i className="bx bx-envelope bx-xs"></i>
+            </li>
+            <li className="list-inline-item small-text">
+              {contact.contactEmails[0]?.emailAddress}
+            </li>
+          </ul>
+        )}
 
-              {contact.contactPhones && <ul className="list-inline m-0">
-                  <li className="list-inline-item me-2">
-                      <i className="bx bx-phone bx-xs"></i>
-                  </li>
-                  <li className="list-inline-item small-text">{contact.contactPhones[ 0 ]?.phoneNumber}</li>
-              </ul>}
-
-      <ul className="list-inline m-0">
-        <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>
+        {contact.contactPhones[0] && (
+          <ul className="list-inline m-0">
+            <li className="list-inline-item me-2">
+              <i className="bx bx-phone bx-xs"></i>
+            </li>
+            <li className="list-inline-item small-text">
+              {contact.contactPhones[0]?.phoneNumber}
+            </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(10, "Invalid Number")
+            .max(13, "Invalid Number")
             .regex(/^[\d\s+()-]+$/, "Invalid phone number format").or(z.literal("")),
         })
       )

src/components/Directory/ListViewDirectory.jsx

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

src/components/Directory/ManageDirectory.jsx

@@ -144,7 +144,6 @@ 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">
@@ -211,7 +210,7 @@ useEffect(() => {
                         onClick={handleAddEmail}
                         style={{ width: "24px", height: "24px" }}
                       >
-                        <i className="bx bx-plus bx-xs" />
+                        <i className="bx bx-plus-circle bx-xs" />
                       </button>
                     ) : (
                       <button
@@ -220,7 +219,7 @@ useEffect(() => {
                         onClick={() => removeEmail(index)}
                         style={{ width: "24px", height: "24px" }}
                       >
-                        <i className="bx bx-x bx-xs" />
+                        <i className="bx bx-minus-circle bx-xs" />
                       </button>
                     )}
                   </div>
@@ -271,7 +270,7 @@ useEffect(() => {
                         onClick={handleAddPhone}
                         style={{ width: "24px", height: "24px" }}
                       >
-                        <i className="bx bx-plus bx-xs" />
+                        <i className="bx bx-plus-circle bx-xs" />
                       </button>
                     ) : (
                       <button
@@ -280,7 +279,7 @@ useEffect(() => {
                         onClick={() => removePhone(index)}
                         style={{ width: "24px", height: "24px" }}
                       >
-                        <i className="bx bx-x bx-xs" />
+                        <i className="bx bx-minus-circle bx-xs" />
                       </button>
                     )}
                   </div>
@@ -311,7 +310,7 @@ useEffect(() => {
                 </option>
               ) : (
                 <>
-                  <option disabled selected value="">
+                  <option disabled  value="">
                     Select Category
                   </option>
                   {contactCategory?.map((cate) => (

src/components/Directory/UpdateContact.jsx

@@ -111,19 +111,29 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
   };
 
   const onSubmit = async (data) => {
-    debugger;
-    const cleaned = {
-      ...data,
-      contactEmails: (data.contactEmails || []).filter(
-        (e) => e.emailAddress?.trim() !== ""
-      ),
-      contactPhones: (data.contactPhones || []).filter(
-        (p) => p.phoneNumber?.trim() !== ""
-      ),
-    };
+const cleaned = {
+  ...data,
+  contactEmails: (data.contactEmails || [])
+    .filter((e) => e.emailAddress?.trim() !== "")
+    .map((email, index) => {
+      const existingEmail = existingContact.contactEmails?.[index];
+      return existingEmail
+        ? { ...email, id: existingEmail.id } 
+        : 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);
     
   };
@@ -161,7 +171,7 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
       setIsInitialized(true)
     }
     
-    return()=> reset()
+    // return()=> reset()
   }, [ existingContact, buckets, projects ] );
   
 
@@ -169,7 +179,6 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
     <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">
@@ -236,7 +245,7 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
                         onClick={handleAddEmail}
                         style={{ width: "24px", height: "24px" }}
                       >
-                        <i className="bx bx-plus bx-xs" />
+                        <i className="bx bx-plus-circle bx-xs" />
                       </button>
                     ) : (
                       <button
@@ -245,7 +254,7 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
                         onClick={() => removeEmail(index)}
                         style={{ width: "24px", height: "24px" }}
                       >
-                        <i className="bx bx-x bx-xs" />
+                        <i className="bx bx-minus-circle bx-xs" />
                       </button>
                     )}
                   </div>
@@ -296,7 +305,7 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
                         onClick={handleAddPhone}
                         style={{ width: "24px", height: "24px" }}
                       >
-                        <i className="bx bx-plus bx-xs" />
+                        <i className="bx bx-plus-circle bx-xs" />
                       </button>
                     ) : (
                       <button
@@ -305,7 +314,7 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
                         onClick={() => removePhone(index)}
                         style={{ width: "24px", height: "24px" }}
                       >
-                        <i className="bx bx-x bx-xs" />
+                        <i className="bx bx-minus-circle bx-xs" />
                       </button>
                     )}
                   </div>
@@ -336,7 +345,7 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
                 </option>
               ) : (
                 <>
-                  <option disabled selected value="">
+                  <option disabled  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  // Disable backdrop
+    backdrop: false,
   });
 
   if (isOpen) {
@@ -26,16 +26,27 @@ 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(false);
+   const [listView, setListView] = useState(true);
 
   const { contacts, loading } = useDirectory();
   const { contactCategory, loading: contactCategoryLoading } =
@@ -79,7 +79,7 @@ const Directory = () => {
     );
   };
   const filteredContacts = useMemo(() => {
-    return contacts
+    return ContatList
       .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));
-  }, [contacts, searchText, selectedCategoryIds]);
+  }, [ContatList, 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-sm btn-primary"
+              className="btn btn-xs btn-primary"
               onClick={() => setIsOpenModal(true)}
             >
               <i className="bx bx-plus-circle me-2"></i>
@@ -277,6 +277,7 @@ const Directory = () => {
               {!loading &&
                 currentItems.map((contact) => (
                   <ListViewDirectory
+                      key={contact.id} 
                     contact={contact}
                     setSelectedContact={setSelectedContact}
                     setIsOpenModal={setIsOpenModal}
@@ -287,9 +288,13 @@ const Directory = () => {
         </div>
           ) : (
                 <div className="row">
-          {currentItems.map((item, index) => (
-            <div key={index} className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4">
-              <CardViewDirectory contact={item} />
+          {currentItems.map((contact, index) => (
+            <div key={contact.id} className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4">
+              <CardViewDirectory contact={contact}
+                setSelectedContact={setSelectedContact}
+                setIsOpenModal={setIsOpenModal}
+            
+              />
             </div>
           ))}
         </div>