src/components/Directory/CardViewDirectory.jsx

@@ -1,13 +1,23 @@
 import React from "react";
 import Avatar from "../common/Avatar";
-import {getBucketNameById} from "./DirectoryUtils";
+import { getBucketNameById } from "./DirectoryUtils";
-import {useBuckets} from "../../hooks/useDirectory";
+import { useBuckets } from "../../hooks/useDirectory";
 import { getPhoneIcon } from "./DirectoryUtils";
-const CardViewDirectory = ( {contact, setSelectedContact, setIsOpenModal, setOpen_contact, setIsOpenModalNote, IsDeleted} ) =>
+const CardViewDirectory = ({
-{
+  IsActive,
-  const {buckets} = useBuckets()
+  contact,
+  setSelectedContact,
+  setIsOpenModal,
+  setOpen_contact,
+  setIsOpenModalNote,
+  IsDeleted,
+}) => {
+  const { buckets } = useBuckets();
   return (
-    <div className="card text-start border-1">
+    <div
+      className="card text-start border-1"
+      style={{ background: `${!IsActive ? "#f8f6f6" : ""}` }}
+    >
       <div className="card-body  px-1 py-2 pb-0">
         <div className="d-flex justify-content-between">
           <div className="d-flex align-items-center">
@@ -23,7 +33,7 @@ const CardViewDirectory = ( {contact, setSelectedContact, setIsOpenModal, setOpe
             <p className="m-0">{contact.name}</p>
           </div>
           <div>
-            <div className="dropdown z-2 ">
+            <div className={`dropdown z-2 ${!IsActive && "d-none"}`}>
               <button
                 type="button"
                 className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
@@ -45,6 +55,7 @@ const CardViewDirectory = ( {contact, setSelectedContact, setIsOpenModal, setOpe
                     setSelectedContact(contact);
                     setIsOpenModal(true);
                   }}
+                 
                 >
                   <a className="dropdown-item px-2 py-0">
                     <i className="bx bx-pencil bx-xs me-2"></i>
@@ -52,7 +63,10 @@ const CardViewDirectory = ( {contact, setSelectedContact, setIsOpenModal, setOpe
                   </a>
                 </li>
                 <li>
-                  <a className="dropdown-item  px-2 py-0" onClick={()=> IsDeleted(contact.id)}>
+                  <a
+                    className="dropdown-item  px-2 py-0"
+                    onClick={() => IsDeleted(contact.id)}
+                  >
                     <i className="bx bx-trash bx-xs me-2"></i>
                     <span className="align-left small-text">Delete</span>
                   </a>
@@ -63,19 +77,23 @@ const CardViewDirectory = ( {contact, setSelectedContact, setIsOpenModal, setOpe
         </div>
 
         <ul className="list-inline m-0 ps-4">
-          <li className="list-inline-item me-1" style={{fontSize:"10px"}}>
+          <li className="list-inline-item me-1" style={{ fontSize: "10px" }}>
             <i className="bx bx-building bx-xs"></i>
           </li>
-          <li className="list-inline-item" style={{fontSize:"10px"}}>
+          <li className="list-inline-item" style={{ fontSize: "10px" }}>
             {contact.organization}
           </li>
         </ul>
       </div>
-      <div className="card-footer text-start px-1 py-1" onClick={() =>
+      <div
-      {
+        className="card-footer text-start px-1 py-1"
-        setIsOpenModalNote(true)
+        onClick={() => {
-        setOpen_contact(contact)
+          if (IsActive) {
-      }}>
+            setIsOpenModalNote(true);
+            setOpen_contact(contact);
+          }
+        }}
+      >
         <hr className="my-0" />
         {contact.contactEmails[0] && (
           <ul className="list-inline my-1 ">
@@ -91,7 +109,11 @@ const CardViewDirectory = ( {contact, setSelectedContact, setIsOpenModal, setOpe
         {contact.contactPhones[0] && (
           <ul className="list-inline m-0">
             <li className="list-inline-item me-2">
-              <i className={` ${getPhoneIcon(contact.contactPhones[0].label)} bx-xs`} ></i>
+              <i
+                className={` ${getPhoneIcon(
+                  contact.contactPhones[0].label
+                )} bx-xs`}
+              ></i>
             </li>
             <li className="list-inline-item small-text">
               {contact.contactPhones[0]?.phoneNumber}
@@ -109,17 +131,16 @@ const CardViewDirectory = ( {contact, setSelectedContact, setIsOpenModal, setOpe
         </ul>
 
         <ul className="list-inline m-0">
-          {contact.bucketIds.map( ( bucketId ) => (
+          {contact.bucketIds.map((bucketId) => (
-            <>
+            <React.Fragment key={bucketId}>
-            
               <li className="list-inline-item me-1">
                 <i className="bx bx-pin bx-xs"></i>
               </li>
               <li className="list-inline-item small-text">
-            {getBucketNameById(buckets,bucketId)}
+                {getBucketNameById(buckets, bucketId)}
-          </li></>
+              </li>
+            </React.Fragment>
           ))}
-      
         </ul>
       </div>
     </div>

src/components/Directory/ListViewDirectory.jsx

@@ -3,13 +3,16 @@ import Avatar from '../common/Avatar';
 import { getEmailIcon,getPhoneIcon } from './DirectoryUtils';
 
 
-const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal,setOpen_contact,setIsOpenModalNote,IsDeleted}) => {
+const ListViewDirectory = ({IsActive, contact,setSelectedContact,setIsOpenModal,setOpen_contact,setIsOpenModalNote,IsDeleted}) => {
   return (
-    <tr  >
+    <tr style={{background:`${!IsActive ? "#f8f6f6":""}`}} >
       <td className="text-start cursor-pointer" style={{width: '18%'}} colSpan={2} onClick={() =>
+      {
+        if ( IsActive )
         {
            setIsOpenModalNote(true)
         setOpen_contact(contact)
+       }
       }}>
      <div className="d-flex align-items-center">
   <Avatar
@@ -58,14 +61,16 @@ const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal,setOpen_c
       </td>
 
       {/* Actions */}
+      {IsActive &&
         <td className="align-middle text-center ">
           <i className='bx bx-edit bx-sm text-primary cursor-pointer' onClick={() =>
           {
             setSelectedContact( contact )
-          setIsOpenModal(true)
+            setIsOpenModal( true )
           }}></i>
-         <i className='bx bx-trash bx-sm text-danger cursor-pointer' onClick={()=> IsDeleted(contact.id)}></i>
+          <i className='bx bx-trash bx-sm text-danger cursor-pointer' onClick={() => IsDeleted( contact.id )}></i>
         </td>
+      }
     </tr>
   );
 };

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,6 +92,20 @@ 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>
+        <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 )}
@@ -97,6 +118,7 @@ const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {
           {addNote ? "close" : "Add Note"}
         </span>
        </div>
+      </div>
       {addNote && (
         <form onSubmit={handleSubmit(onSubmit)}>
           <Editor
@@ -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

@@ -2,35 +2,43 @@ import { useEffect, useState } from "react";
 import { DirectoryRepository } from "../repositories/DirectoryRepository";
 import { cacheData, getCachedData } from "../slices/apiDataManager";
 
-export const useDirectory = () => {
+export const useDirectory = (isActive) => {
   const [contacts, setContacts] = useState([]);
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState();
+  const [error, setError] = useState(null);
 
-  const fetch = async () => {
+  const fetch = async (activeParam = isActive) => {
-    const cache_contacts = getCachedData("contacts");
-    if (!cache_contacts) {
     setLoading(true);
     try {
-        const response = await DirectoryRepository.GetContacts();
+      const response = await DirectoryRepository.GetContacts(activeParam);
       setContacts(response.data);
-        cacheData("contacts", response.data);
+      cacheData("contacts", { data: response.data, isActive: activeParam });
-        setLoading(false);
     } catch (error) {
       setError(error);
+    } finally {
       setLoading(false);
     }
-    } else {
-      setContacts(cache_contacts);
-    }
   };
 
-  useState(() => {
+  useEffect(() => {
-    fetch();
+    const cachedContacts = getCachedData("contacts");
-  }, []);
+    if (!cachedContacts?.data || cachedContacts.isActive !== isActive) {
-  return { contacts, loading, error };
+      fetch(isActive);
+    } else {
+      setContacts(cachedContacts.data);
+    }
+  }, [isActive]);
+
+  return {
+    contacts,
+    loading,
+    error,
+    refetch: fetch,
+  };
 };
 
+
+
 export const useBuckets = () => {
   const [buckets, setBuckets] = useState([]);
   const [loading, setLoading] = useState(false);
@@ -101,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( "" );
 
@@ -114,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) {
@@ -136,5 +144,5 @@ const fetchContactNotes = async () => {
     }
   }, [id]);
 
-  return { conatProfile, loading, Error };
+  return { contactNotes, loading, Error };
 }

src/pages/Directory/Directory.jsx

@@ -16,7 +16,9 @@ import { ITEMS_PER_PAGE } from "../../utils/constants";
 import ProfileContactDirectory from "../../components/Directory/ProfileContactDirectory";
 import ConfirmModal from "../../components/common/ConfirmModal";
 
-const Directory = () => {
+const Directory = () =>
+{
+  const[IsActive,setIsActive] = useState(true)
   const [isOpenModal, setIsOpenModal] = useState(false);
   const [isOpenModalNote, setIsOpenModalNote] = useState(false);
   const [selectedContact, setSelectedContact] = useState(null);
@@ -32,7 +34,7 @@ const Directory = () => {
   const [tempSelectedBucketIds, setTempSelectedBucketIds] = useState([]);
   const [tempSelectedCategoryIds, setTempSelectedCategoryIds] = useState([]);
 
-  const { contacts, loading } = useDirectory();
+  const { contacts, loading } = useDirectory(IsActive);
   const { contactCategory, loading: contactCategoryLoading } =
     useContactCategory();
   const { buckets } = useBuckets();
@@ -40,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);
@@ -56,7 +58,7 @@ const Directory = () => {
         showToast("Contact created successfully", "success");
         setIsOpenModal(false);
       }
-
+       cacheData("Contacts", {data:updatedContacts,isActive:IsActive});
       setContactList(updatedContacts);
     } catch (error) {
       const msg =
@@ -70,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);
 
@@ -102,7 +104,6 @@ const Directory = () => {
   useEffect(() => {
     setContactList(contacts);
 
-    // Set temp filter list only (UI checkboxes, not actual filtering yet)
     setTempSelectedCategoryIds([]);
     setTempSelectedBucketIds([]);
   }, [contacts]);
@@ -247,7 +248,7 @@ const Directory = () => {
         </div>
       )}
 
-      <div className="card p-2">
+      <div className="card p-2"    >
         <div className="row mx-0 px-0 align-items-center">
           <div className="col-12 col-md-4 mb-2 px-1 d-flex align-items-center ">
             <input
@@ -299,7 +300,7 @@ const Directory = () => {
 
                 <ul className="dropdown-menu p-3" style={{ width: "320px" }}>
                   <div>
-                    <p className="small-text text-muted m-0">Filter by</p>
+                    <p className="small-text fw-semibold text-muted m-0">Filter by</p>
 
                     {/* Bucket Filter */}
                     <div className="mt-1">
@@ -377,17 +378,17 @@ const Directory = () => {
             </div>
           </div>
           <div className="col-12 col-md-8 mb-2 px-1 text-md-end text-end">
-            <label class="switch switch-primary">
+            <label className="switch switch-primary">
-              <input type="checkbox" class="switch-input" />
+              <input type="checkbox" className="switch-input" onChange={() => setIsActive( !IsActive )} value={IsActive} disabled={ loading} />
-              <span class="switch-toggle-slider">
+              <span className="switch-toggle-slider">
-                <span class="switch-on">
+                <span className="switch-on">
                   {/* <i class="icon-base bx bx-check"></i> */}
                 </span>
-                <span class="switch-off">
+                <span className="switch-off">
                   {/* <i class="icon-base bx bx-x"></i> */}
                 </span>
               </span>
-              <span class="switch-label">Show Inactive Contacts</span>
+              <span className="switch-label small-text">Show Inactive Contacts</span>
             </label>
             <button
               type="button"
@@ -452,11 +453,11 @@ 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 ">
-                {loading && ContatList.length === 0 && (
+                {loading &&  (
                   <tr>
                     <td colSpan={10}>Loading...</td>
                   </tr>
@@ -471,6 +472,7 @@ const Directory = () => {
                   currentItems.map((contact) => (
                     <ListViewDirectory
                       key={contact.id}
+                      IsActive={IsActive}
                       contact={contact}
                       setSelectedContact={setSelectedContact}
                       setIsOpenModal={setIsOpenModal}
@@ -484,12 +486,13 @@ const Directory = () => {
           </div>
         ) : (
           <div className="row">
-            {currentItems.map((contact, index) => (
+            {!loading && currentItems.map((contact, index) => (
               <div
                 key={contact.id}
                 className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4"
               >
                 <CardViewDirectory
+                  IsActive={IsActive}
                   contact={contact}
                   setSelectedContact={setSelectedContact}
                   setIsOpenModal={setIsOpenModal}

src/repositories/DirectoryRepository.jsx

@@ -1,7 +1,7 @@
 import {api} from "../utils/axiosClient";
 
 export const DirectoryRepository = {
-    GetContacts: () => api.get( '/api/directory' ),
+    GetContacts: (isActive) => api.get( `/api/directory?active=${isActive}` ),
     CreateContact: ( data ) => api.post( '/api/directory', data ),
     UpdateContact: ( id, data ) => api.put( `/api/directory/${ id }`, data ),
     DeleteContact:(id)=>api.delete(`/api/directory/${id}`),
@@ -11,7 +11,7 @@ export const DirectoryRepository = {
     GetContactProfile: ( id ) => api.get( `/api/directory/profile/${ id }` ),
     
     CreateNote: ( data ) => api.post( '/api/directory/note', data ),
-    GetNote: ( id ) => api.get( `/api/directory/note/${ id }` ),
+    GetNote: ( id,isActive ) => api.get( `/api/directory/note/${ id }?active=${isActive}` ),
     UpdateNote: ( id, data ) => api.put( `/api/directory/note/${ id }`, data ),
     DeleteNote:(id)=> api.delete(`/api/directory/note/${ id }`)
 }