added feature active and inactive not displays

src/components/Directory/NoteCardDirectory.jsx

@@ -7,7 +7,7 @@ import showToast from "../../services/toastService";
 import { cacheData, getCachedData } from "../../slices/apiDataManager";
 import "../common/TextEditor/Editor.css";
 
-const NoteCardDirectory = ({ noteItem, contactId, setProfileContact }) => {
+const NoteCardDirectory = ({ IsActive,noteItem, contactId, setProfileContact }) => {
   const [editing, setEditing] = useState(false);
   const [editorValue, setEditorValue] = useState(noteItem.note);
   const [isLoading, setIsLoading] = useState(false);
@@ -50,7 +50,8 @@ const NoteCardDirectory = ({ noteItem, contactId, setProfileContact }) => {
         cacheData("Contact Profile", updatedProfile);
       }
       setEditing(false);
-      setIsLoading(false);
+      setIsLoading( false );
+      
       showToast("Note Updated successfully", "success");
     } catch (error) {
       setIsLoading(false);
@@ -104,7 +105,7 @@ const NoteCardDirectory = ({ noteItem, contactId, setProfileContact }) => {
   return (
     <div
       className="card p-1 shadow-sm border-1 mb-2 conntactNote"
-      style={{ width: "100%", minWidth: "300px", borderRadius: "0px" }}
+      style={{ width: "100%", minWidth: "300px", borderRadius: "0px", background: `${!IsActive ? "#f8f6f6" : ""}`  }}
       key={noteItem.id}
     >
       <div className="d-flex justify-content-between align-items-center mb-1">
@@ -128,7 +129,7 @@ const NoteCardDirectory = ({ noteItem, contactId, setProfileContact }) => {
             </span>
           </div>
         </div>
-        <div>
+        <div className={`${IsActive ? " ":"d-none"}`}>
           <i
             className="bx bxs-edit bx-sm me-1 text-primary cursor-pointer"
             onClick={() => setEditing(true)}

src/components/Directory/NotesDirectory.jsx

@@ -10,12 +10,18 @@ import moment from "moment";
 import { cacheData, getCachedData } from "../../slices/apiDataManager";
 import NoteCardDirectory from "./NoteCardDirectory";
 import showToast from "../../services/toastService";
+import {useContactNotes} from "../../hooks/useDirectory";
 
 const schema = z.object({
   note: z.string().min(1, { message: "Note is required" }),
 });
 
-const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {
+const NotesDirectory = ( {isLoading, contactProfile, setProfileContact} ) =>
+{
+  const [ IsActive, setIsActive ] = useState( true )
+  const {contactNotes} = useContactNotes(contactProfile?.id,!IsActive)
+
+  
   const [NotesData, setNotesData] = useState();
   const [IsSubmitting, setIsSubmitting] = useState(false);
   const [addNote, setAddNote] = useState(false);
@@ -66,7 +72,8 @@ const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {
       setValue("note", "");
       setIsSubmitting(false);
       showToast("Note added successfully!", "success");
-      setAddNote(false);
+      setAddNote( false );
+      setIsActive(true)
     } catch (error) {
       setIsSubmitting(false);
       const msg =
@@ -85,7 +92,21 @@ const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {
     <div className="text-start">
       <div className="d-flex align-items-center justify-content-between">
         <p className="fw-semibold m-0">Notes :</p>
-        <span
+        <div className="m-0 d-flex aligin-items-center">
+
+          <label className="switch switch-primary">
+              <input type="checkbox" className="switch-input" onChange={() => setIsActive( !IsActive )} value={IsActive}  />
+              <span className="switch-toggle-slider">
+                <span className="switch-on">
+                  {/* <i class="icon-base bx bx-check"></i> */}
+                </span>
+                <span className="switch-off">
+                  {/* <i class="icon-base bx bx-x"></i> */}
+                </span>
+              </span>
+              <span className="switch-label small-text">Show Inactive Notes</span>
+            </label>
+            <span
           className={`btn btn-xs   ${addNote ? "btn-danger" : "btn-primary"}`}
           onClick={() => setAddNote( !addNote )}
         >
@@ -96,6 +117,7 @@ const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {
           ></i> */}
           {addNote ? "close" : "Add Note"}
         </span>
+       </div>
       </div>
       {addNote && (
         <form onSubmit={handleSubmit(onSubmit)}>
@@ -119,17 +141,22 @@ const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {
           </div>
         )}
         {!isLoading &&
-          [...(contactProfile?.notes || [])]
+          [...(IsActive ?   contactProfile?.notes || [] : contactNotes || [])]
             .reverse()
             .map((noteItem) => (
               <NoteCardDirectory
+                IsActive={IsActive}
                 noteItem={noteItem}
                 contactId={contactProfile?.id}
                 setProfileContact={setProfileContact}
                 key={noteItem.id}
               />
             ) )}
-        <p>{!isLoading && contactProfile?.notes.length == 0 && !addNote && (<p className="text-center">No Notes Found</p>) }</p>
+        {IsActive && ( <p>{!isLoading && contactProfile?.notes.length == 0 && !addNote && ( <p className="text-center">No Notes Found</p> )}</p> )}
+        {!IsActive && (
+        <p>{!isLoading && contactNotes.length == 0 && !addNote && (<p className="text-center">No Notes Found</p>) }</p>
+
+        )}
       </div>
     </div>
   );

src/hooks/useDirectory.js

@@ -109,9 +109,9 @@ const fetchContactProfile = async () => {
 }
 
 
-export const useContactNotes = (id) =>
+export const useContactNotes = (id,IsActive) =>
 {
-  const [ conatNotes, setContactNotes ] = useState( [] );
+  const [ contactNotes, setContactNotes ] = useState( [] );
   const [ loading, setLoading ] = useState( false );
   const [ Error, setError ] = useState( "" );
 
@@ -122,7 +122,7 @@ const fetchContactNotes = async () => {
     if (!cached || cached.contactId !== id) {
       setLoading(true);
       try {
-        const resp = await DirectoryRepository.GetNote(id);
+        const resp = await DirectoryRepository.GetNote(id,IsActive);
         setContactNotes(resp.data);
         cacheData("Contact Notes", { data: resp.data, contactId: id });
       } catch (err) {
@@ -144,5 +144,5 @@ const fetchContactNotes = async () => {
     }
   }, [id]);
 
-  return { conatProfile, loading, Error };
+  return { contactNotes, loading, Error };
 }

src/hooks/useDirectoryFilter.js

@@ -0,0 +1,21 @@
+import React, { useEffect } from "react";
+import { useDirectory } from "./useDirectory";
+
+export const useDirectoryFilter = (active) => {
+  const { contacts, loading, refetch } = useDirectory( active);
+  // Debounced search refetch
+  useEffect(() => {
+    // if (searchQuery) {
+    //   const timer = setTimeout(() => {
+    //     refetch(searchQuery, active, [], []);
+    //   }, 1000);
+    //   return () => clearTimeout(timer);
+    // }
+    refetch(active)
+  }, [ active]); 
+
+  return {
+    contacts,
+    loading,
+  };
+};

src/pages/Directory/Directory.jsx

@@ -18,7 +18,7 @@ import ConfirmModal from "../../components/common/ConfirmModal";
 
 const Directory = () =>
 {
-  const[IsActivite,setIsActive] = useState(true)
+  const[IsActive,setIsActive] = useState(true)
   const [isOpenModal, setIsOpenModal] = useState(false);
   const [isOpenModalNote, setIsOpenModalNote] = useState(false);
   const [selectedContact, setSelectedContact] = useState(null);
@@ -34,7 +34,7 @@ const Directory = () =>
   const [tempSelectedBucketIds, setTempSelectedBucketIds] = useState([]);
   const [tempSelectedCategoryIds, setTempSelectedCategoryIds] = useState([]);
 
-  const { contacts, loading } = useDirectory(IsActivite);
+  const { contacts, loading } = useDirectory(IsActive);
   const { contactCategory, loading: contactCategoryLoading } =
     useContactCategory();
   const { buckets } = useBuckets();
@@ -42,7 +42,7 @@ const Directory = () =>
     try {
       let response;
       let updatedContacts;
-      const contacts_cache = getCachedData("contacts") || [];
+      const contacts_cache = getCachedData("contacts")?.data || [];
 
       if (selectedContact) {
         response = await DirectoryRepository.UpdateContact(data.id, data);
@@ -58,7 +58,7 @@ const Directory = () =>
         showToast("Contact created successfully", "success");
         setIsOpenModal(false);
       }
-
+       cacheData("Contacts", {data:updatedContacts,isActive:IsActive});
       setContactList(updatedContacts);
     } catch (error) {
       const msg =
@@ -72,12 +72,12 @@ const Directory = () =>
   const handleDeleteContact = async () => {
     try {
       setIsDeletng(true);
-      const contacts_cache = getCachedData("contacts") || [];
+      const contacts_cache = getCachedData("contacts")?.data || [];
 
       const response = await DirectoryRepository.DeleteContact(deleteContact);
       const updatedContacts = ContactList.filter((c) => c.id !== deleteContact);
       setContactList(updatedContacts);
-      cacheData("Contacts", updatedContacts);
+      cacheData("Contacts", {data:updatedContacts,isActive:IsActive});
       showToast("Contact deleted successfully", "success");
       setDeleteContact(null);
 
@@ -104,7 +104,6 @@ const Directory = () =>
   useEffect(() => {
     setContactList(contacts);
 
-    // Set temp filter list only (UI checkboxes, not actual filtering yet)
     setTempSelectedCategoryIds([]);
     setTempSelectedBucketIds([]);
   }, [contacts]);
@@ -380,7 +379,7 @@ const Directory = () =>
           </div>
           <div className="col-12 col-md-8 mb-2 px-1 text-md-end text-end">
             <label className="switch switch-primary">
-              <input type="checkbox" className="switch-input" onChange={()=>setIsActive(!IsActivite)} value={IsActivite} />
+              <input type="checkbox" className="switch-input" onChange={() => setIsActive( !IsActive )} value={IsActive} disabled={ loading} />
               <span className="switch-toggle-slider">
                 <span className="switch-on">
                   {/* <i class="icon-base bx bx-check"></i> */}
@@ -454,7 +453,7 @@ const Directory = () =>
                     </div>
                   </th>
                   <th className="mx-2">Category</th>
-                  <th>Action</th>
+                  {IsActive && <th>Action</th>}
                 </tr>
               </thead>
               <tbody className="table-border-bottom-0 overflow-auto ">
@@ -473,6 +472,7 @@ const Directory = () =>
                   currentItems.map((contact) => (
                     <ListViewDirectory
                       key={contact.id}
+                      IsActive={IsActive}
                       contact={contact}
                       setSelectedContact={setSelectedContact}
                       setIsOpenModal={setIsOpenModal}
@@ -492,7 +492,7 @@ const Directory = () =>
                 className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4"
               >
                 <CardViewDirectory
-                  IsActive={IsActivite}
+                  IsActive={IsActive}
                   contact={contact}
                   setSelectedContact={setSelectedContact}
                   setIsOpenModal={setIsOpenModal}