addded new component for profile contact , that open in modal for adding notes

src/pages/Directory/Directory.jsx

@@ -13,14 +13,17 @@ import CardViewDirectory from "../../components/Directory/CardViewDirectory";
 import { useContactCategory } from "../../hooks/masterHook/useMaster";
 import usePagination from "../../hooks/usePagination";
 import { ITEMS_PER_PAGE } from "../../utils/constants";
+import ProfileContactDirectory from "../../components/Directory/ProfileContactDirectory";
 
 const Directory = () => {
   const [isOpenModal, setIsOpenModal] = useState(false);
+  const [isOpenModalNote, setIsOpenModalNote] = useState(false);
   const [selectedContact, setSelectedContact] = useState(null);
+  const [open_contact, setOpen_contact] = useState(null);
   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 } =
@@ -59,6 +62,7 @@ const Directory = () => {
   const closedModel = () => {
     setIsOpenModal(false);
     setSelectedContact(null);
+    setOpen_contact(null);
   };
   useEffect(() => {
     setContactList(contacts);
@@ -80,8 +84,7 @@ const Directory = () => {
     );
   };
   const filteredContacts = useMemo(() => {
-    return ContatList
+    return ContatList.filter((c) => {
-      .filter((c) => {
       const matchesSearch =
         c.name.toLowerCase().includes(searchText.toLowerCase()) ||
         c.organization.toLowerCase().includes(searchText.toLowerCase());
@@ -89,14 +92,31 @@ const Directory = () => {
         selectedCategoryIds.length === 0 ||
         selectedCategoryIds.includes(c.contactCategory?.id);
       return matchesSearch && matchesCategory;
-      })
+    }).sort((a, b) => a.name.localeCompare(b.name));
-      .sort((a, b) => a.name.localeCompare(b.name));
   }, [ContatList, searchText, selectedCategoryIds]);
   const { currentPage, totalPages, currentItems, paginate } = usePagination(
     filteredContacts,
     ITEMS_PER_PAGE
   );
 
+  const renderModalContent = () => {
+    if (selectedContact) {
+      return (
+        <UpdateContact
+          existingContact={selectedContact}
+          submitContact={submitContact}
+          onCLosed={closedModel}
+        />
+      );
+    }
+
+    if (!open_contact) {
+      return (
+        <ManageDirectory submitContact={submitContact} onCLosed={closedModel} />
+      );
+    }
+  };
+
   return (
     <div className="container-xxl flex-grow-1 container-p-y">
       <Breadcrumb
@@ -112,23 +132,22 @@ const Directory = () => {
           closeModal={() => setIsOpenModal(false)}
           size="lg"
         >
-          {selectedContact ? (
+          {renderModalContent()}
-            <UpdateContact
+        </GlobalModel>
-              existingContact={selectedContact}
-              submitContact={submitContact}
-              onCLosed={closedModel}
-            />
-          ) : (
-            <ManageDirectory
-              submitContact={submitContact}
-              onCLosed={closedModel}
-            />
       )}
+      {isOpenModalNote && (
+        <GlobalModel
+          isOpen={isOpenModalNote}
+          closeModal={() => setIsOpenModalNote(false)}
+          size="lg"
+          IsCloseBtn={false}
+        >
+          {open_contact && <ProfileContactDirectory contact={open_contact} setOpen_contact={setOpen_contact} closeModal={ () => setIsOpenModalNote(false)} />}
         </GlobalModel>
       )}
       <div className="card p-2">
         <div className="row mx-0 px-0 align-items-center">
-          <div className="col-7 col-md-4 mb-2 px-1 d-flex align-items-center ">
+          <div className="col-12 col-md-4 mb-2 px-1 d-flex align-items-center ">
             <input
               type="search"
               className="form-control form-control-sm me-2"
@@ -194,19 +213,18 @@ const Directory = () => {
             </div>
           </div>
 
-          <div className="col-5 col-md-8 mb-2 px-1 text-md-end text-end">
+          <div className="col-12 col-md-8 mb-2 px-1 text-md-end text-end">
             <button
               type="button"
               className="btn btn-xs btn-primary"
               onClick={() => setIsOpenModal(true)}
             >
               <i className="bx bx-plus-circle me-2"></i>
-              <span className="d-sm-block d-none"> New Contact</span>
+              New Contact
             </button>
           </div>
         </div>
-        {
+        {listView ? (
-          listView ? (
           <div className="table-responsive text-nowrap py-2 ">
             <table className="table px-2">
               <thead>
@@ -270,7 +288,9 @@ const Directory = () => {
                     <td colSpan={10}>Loading...</td>
                   </tr>
                 )}
-              {!loading && contacts.length == 0 && ContatList.length === 0 && (
+                {!loading &&
+                  contacts.length == 0 &&
+                  ContatList.length === 0 && (
                     <tr>
                       <td colSpan={10}>No Contact Found</td>
                     </tr>
@@ -290,21 +310,21 @@ const Directory = () => {
         ) : (
           <div className="row">
             {currentItems.map((contact, index) => (
-            <div key={contact.id} className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4">
+              <div
-              <CardViewDirectory contact={contact}
+                key={contact.id}
+                className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4"
+              >
+                <CardViewDirectory
+                  contact={contact}
                   setSelectedContact={setSelectedContact}
                   setIsOpenModal={setIsOpenModal}
-            
+                  setOpen_contact={setOpen_contact}
+                  setIsOpenModalNote={setIsOpenModalNote}
                 />
               </div>
             ))}
           </div>
-          )
+        )}
-        }
-
-       
-
-      
 
         {!loading && (
           <nav aria-label="Page ">