src/components/Directory/CardViewDirectory.jsx

@@ -1,11 +1,7 @@
 import React from "react";
 import Avatar from "../common/Avatar";
-import {getBucketNameById} from "./DirectoryUtils";
+
-import {useBuckets} from "../../hooks/useDirectory";
+const CardViewDirectory = ({ contact, setSelectedContact, setIsOpenModal,setOpen_contact,setIsOpenModalNote }) => {
-import { getPhoneIcon } from "./DirectoryUtils";
-const CardViewDirectory = ( {contact, setSelectedContact, setIsOpenModal, setOpen_contact, setIsOpenModalNote, IsDeleted} ) =>
-{
-  const {buckets} = useBuckets()
   return (
     <div className="card text-start border-1">
       <div className="card-body  px-1 py-2 pb-0">
@@ -52,7 +48,7 @@ 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">
                     <i className="bx bx-trash bx-xs me-2"></i>
                     <span className="align-left small-text">Delete</span>
                   </a>
@@ -91,7 +87,7 @@ 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="bx bx-phone bx-xs"></i>
             </li>
             <li className="list-inline-item small-text">
               {contact.contactPhones[0]?.phoneNumber}
@@ -107,20 +103,6 @@ const CardViewDirectory = ( {contact, setSelectedContact, setIsOpenModal, setOpe
             {contact.contactCategory.name}
           </li>
         </ul>
-
-        <ul className="list-inline m-0">
-          {contact.bucketIds.map( ( 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)}
-          </li></>
-          ))}
-      
-        </ul>
       </div>
     </div>
   );

src/components/Directory/DirectoryUtils.js

@@ -1,26 +0,0 @@
-import {useBuckets} from "../../hooks/useDirectory";
-
-export const getEmailIcon = (type) => {
-  switch (type) {
-    case 'Work': return "bx bx-briefcase me-1 " ;
-    case 'Personal': return "bx bx-user me-1";
-    case 'support': return "bx headphone-mic me-1";
-    case 'billing': return "bx bx-receipt me-1";
-    default: return "bx bx-envelope me-1";
-  }
-};
-
-export const getPhoneIcon = (type) => {
-  switch (type) {
-    case 'Business': return "bx bx-phone me-1 ";
-    case 'Personal': return "bx bx-mobile me-1 ";
-    case 'Office': return "bx bx-phone me-1 ";
-    default: return "bx bx-phone me-1";
-  }
-};
-
-
-export const getBucketNameById = (buckets, id) => {
-  const bucket = buckets.find(b => b.id === id);
-  return bucket ? bucket.name : 'Unknown';
-};

src/components/Directory/ListViewDirectory.jsx

@@ -1,16 +1,33 @@
 import React from 'react'
 import Avatar from '../common/Avatar';
-import { getEmailIcon,getPhoneIcon } from './DirectoryUtils';
 
+const getEmailIcon = (type) => {
+  switch (type) {
+    case 'work': return "bx bx-briefcase me-1 " ;
+    case 'personal': return "bx bx-user me-1";
+    case 'support': return "bxr headphone-mic me-1";
+    case 'billing': return "bx bx-receipt me-1";
+    default: return "bx bx-envelope me-1";
+  }
+};
 
-const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal,setOpen_contact,setIsOpenModalNote,IsDeleted}) => {
+const getPhoneIcon = (type) => {
+  switch (type) {
+    case 'business': return "bx bx-briefcase me-1 ";
+    case 'home': return "bx bx-mobile me-1 ";
+    case 'personal': return "bx bx-user me-1 ";
+    case 'landline': return "bx bx-phone me-1 ";
+    case 'fax': return "bx bx-printer me-1";
+    case 'whatsapp': return "bxl-whatsapp me-1";
+    case 'emergency': return "bx bx-error-circle me-1";
+    default: return "bx bx-phone me-1";
+  }
+};
+
+const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal}) => {
   return (
     <tr  >
-      <td className="text-start cursor-pointer" style={{width: '18%'}} colSpan={2} onClick={() =>
+      <td className="text-start" style={{width: '18%'}} colSpan={2}>
-      {
-         setIsOpenModalNote(true)
-        setOpen_contact(contact)
-      }}>
      <div className="d-flex align-items-center">
   <Avatar
   size="xs"
@@ -64,7 +81,7 @@ const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal,setOpen_c
           setSelectedContact( contact )
           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'></i>
       </td>
     </tr>
   );

src/components/Directory/NoteCardDirectory.jsx

@@ -120,11 +120,7 @@ const NoteCardDirectory = ({ noteItem, contactId, setProfileContact }) => {
               {noteItem.createdBy.firstName} {noteItem.createdBy.lastName}
             </span>
             <span className="text-muted" style={{ fontSize: "10px" }}>
-              {moment
+              {moment(noteItem.createdAt).format("MMMM DD, YYYY [at] hh:mm A")}
-                .utc(noteItem.createdAt)
-                .add(5, "hours")
-                .add(30, "minutes")
-                .format("MMMM DD, YYYY [at] hh:mm A")}
             </span>
           </div>
         </div>

src/components/Directory/NotesDirectory.jsx

@@ -83,19 +83,27 @@ const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {
 
   return (
     <div className="text-start">
-      <div className="d-flex align-items-center justify-content-between">
+      <div
-        <p className="fw-semibold m-0">Notes :</p>
+        className={`${
-        <span
+          contactProfile?.notes?.length > 0
-          className={`btn btn-xs   ${addNote ? "btn-danger" : "btn-primary"}`}
+            ? "d-flex justify-content-between"
-          onClick={() => setAddNote( !addNote )}
+            : "d-flex justify-content-end"
+        }`}
+      >
+        {contactProfile?.notes.length > 0 && (
+          <p className="fw-semibold m-0">Notes :</p>
+        )}
+        <a
+          className="small-text m-0 cursor-pointer"
+          onClick={() => setAddNote(!addNote)}
         >
-          {/* <i
+          <u>
-            className={`icon-base  bx ${
+            {addNote ? "" : "Add Note"}
-              addNote ? "bx-x bx-sm" : "bx-pencil"
+            <i
-            } bx-xs `}
+              className={`bx  ${addNote ? "bx-x" : "bx-pencil"} bx-xs`}
-          ></i> */}
+            ></i>{" "}
-          {addNote ? "close" : "Add Note"}
+          </u>{" "}
-        </span>
+        </a>
       </div>
       {addNote && (
         <form onSubmit={handleSubmit(onSubmit)}>
@@ -111,7 +119,10 @@ const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {
           )}
         </form>
       )}
-      <div className=" justify-content-start  px-1 mt-1">
+      <div
+        className=" justify-content-start overflow-auto px-1"
+        style={{ maxHeight: "300px" }}
+      >
         {isLoading && (
           <div className="text-center">
             {" "}
@@ -128,8 +139,7 @@ const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {
                 setProfileContact={setProfileContact}
                 key={noteItem.id}
               />
-            ) )}
+            ))}
-        <p>{!isLoading && contactProfile?.notes.length == 0 && !addNote && (<p className="text-center">No Notes Found</p>) }</p>
       </div>
     </div>
   );

src/pages/Directory/Directory.jsx

@@ -6,7 +6,7 @@ import ManageDirectory from "../../components/Directory/ManageDirectory";
 import ListViewDirectory from "../../components/Directory/ListViewDirectory";
 import { useBuckets, useDirectory } from "../../hooks/useDirectory";
 import { DirectoryRepository } from "../../repositories/DirectoryRepository";
-import { cacheData, getCachedData } from "../../slices/apiDataManager";
+import { getCachedData } from "../../slices/apiDataManager";
 import showToast from "../../services/toastService";
 import UpdateContact from "../../components/Directory/UpdateContact";
 import CardViewDirectory from "../../components/Directory/CardViewDirectory";
@@ -14,7 +14,6 @@ import { useContactCategory } from "../../hooks/masterHook/useMaster";
 import usePagination from "../../hooks/usePagination";
 import { ITEMS_PER_PAGE } from "../../utils/constants";
 import ProfileContactDirectory from "../../components/Directory/ProfileContactDirectory";
-import ConfirmModal from "../../components/common/ConfirmModal";
 
 const Directory = () => {
   const [isOpenModal, setIsOpenModal] = useState(false);
@@ -26,11 +25,6 @@ const Directory = () => {
   const [searchText, setSearchText] = useState("");
   const [listView, setListView] = useState(false);
   const [selectedBucketIds, setSelectedBucketIds] = useState([]);
-  const [deleteContact, setDeleteContact] = useState(null);
-  const [IsDeleting, setIsDeletng] = useState(false);
-
-  const [tempSelectedBucketIds, setTempSelectedBucketIds] = useState([]);
-  const [tempSelectedCategoryIds, setTempSelectedCategoryIds] = useState([]);
 
   const { contacts, loading } = useDirectory();
   const { contactCategory, loading: contactCategoryLoading } =
@@ -67,64 +61,36 @@ const Directory = () => {
     }
   };
 
-  const handleDeleteContact = async () => {
-    try {
-      setIsDeletng(true);
-      const contacts_cache = getCachedData("contacts") || [];
-
-      const response = await DirectoryRepository.DeleteContact(deleteContact);
-      const updatedContacts = ContactList.filter((c) => c.id !== deleteContact);
-      setContactList(updatedContacts);
-      cacheData("Contacts", updatedContacts);
-      showToast("Contact deleted successfully", "success");
-      setDeleteContact(null);
-
-      setIsDeletng(false);
-    } catch (error) {
-      const msg =
-        error.response.data.message ||
-        error.message ||
-        "Error occured during API calling";
-      showToast(msg, "error");
-      setIsDeletng(false);
-    }
-  };
-
   const closedModel = () => {
     setIsOpenModal(false);
     setSelectedContact(null);
     setOpen_contact(null);
   };
+  useEffect(() => {
+    setContactList(contacts);
+  }, [contacts]);
+
   const [selectedCategoryIds, setSelectedCategoryIds] = useState(
     contactCategory.map((category) => category.id)
   );
 
-  useEffect(() => {
-    setContactList(contacts);
-
-    // Set temp filter list only (UI checkboxes, not actual filtering yet)
-    setTempSelectedCategoryIds([]);
-    setTempSelectedBucketIds([]);
-  }, [contacts]);
-
   const usedCategoryIds = [
     ...new Set(contacts.map((c) => c.contactCategory?.id)),
   ];
   const filteredCategories = contactCategory.filter((category) =>
     usedCategoryIds.includes(category.id)
   );
-  const handleTempBucketChange = (id) => {
+  const handleCategoryChange = (id) => {
-    setTempSelectedBucketIds((prev) =>
+    setSelectedCategoryIds((prev) =>
-      prev.includes(id) ? prev.filter((bid) => bid !== id) : [...prev, id]
-    );
-  };
-
-  const handleTempCategoryChange = (id) => {
-    setTempSelectedCategoryIds((prev) =>
       prev.includes(id) ? prev.filter((cid) => cid !== id) : [...prev, id]
     );
   };
 
+  const handleBucketChange = (id) => {
+    setSelectedBucketIds((prev) =>
+      prev.includes(id) ? prev.filter((bid) => bid !== id) : [...prev, id]
+    );
+  };
   const usedBucketIds = [
     ...new Set(contacts.flatMap((c) => c.bucketIds || [])),
   ];
@@ -151,18 +117,6 @@ const Directory = () => {
     }).sort((a, b) => a.name.localeCompare(b.name));
   }, [ContactList, searchText, selectedCategoryIds, selectedBucketIds]);
 
-  const applyFilter = () => {
-    setSelectedBucketIds(tempSelectedBucketIds);
-    setSelectedCategoryIds(tempSelectedCategoryIds);
-  };
-
-  const clearFilter = () => {
-    setTempSelectedBucketIds([]);
-    setTempSelectedCategoryIds([]);
-    setSelectedBucketIds([]);
-    setSelectedCategoryIds([]);
-  };
-
   const { currentPage, totalPages, currentItems, paginate } = usePagination(
     filteredContacts,
     ITEMS_PER_PAGE
@@ -191,7 +145,7 @@ const Directory = () => {
       <Breadcrumb
         data={[
           { label: "Home", link: "/dashboard" },
-          { label: "Directory", link: null },
+          { label: "Directory (Comming Soon)", link: null },
         ]}
       ></Breadcrumb>
 
@@ -225,28 +179,6 @@ const Directory = () => {
           )}
         </GlobalModel>
       )}
-      {deleteContact && (
-        <div
-          className={`modal fade  ${deleteContact ? "show" : ""}`}
-          tabIndex="-1"
-          role="dialog"
-          style={{
-            display: deleteContact ? "block" : "none",
-            backgroundColor: deleteContact ? "rgba(0,0,0,0.5)" : "transparent",
-          }}
-          aria-hidden="false"
-        >
-          <ConfirmModal
-            type={"delete"}
-            header={"Delete Contact"}
-            message={"Are you sure you want delete?"}
-            onSubmit={handleDeleteContact}
-            onClose={() => setDeleteContact(null)}
-            loading={IsDeleting}
-          />
-        </div>
-      )}
-
       <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 ">
@@ -287,108 +219,69 @@ const Directory = () => {
                 <i className="bx bx-list-ul bx-sm"></i>
               </button>
             </div>
-            <div className="dropdown" style={{ width: "fit-content" }}>
+            <div className="dropdown">
-              <div className="dropdown" style={{ width: "fit-content" }}>
+              <a
-                <a
+                className="dropdown-toggle hide-arrow cursor-pointer d-flex align-items-center"
-                  className="dropdown-toggle hide-arrow cursor-pointer d-flex align-items-center"
+                data-bs-toggle="dropdown"
-                  data-bs-toggle="dropdown"
+                aria-expanded="false"
-                  aria-expanded="false"
+              >
-                >
+                <i className="bx bx-filter bx-lg  ms-1"></i>
-                  <i className="fa-solid fa-filter ms-1 fs-5"></i>
+              </a>
-                </a>
+              <ul
-
+                className="dropdown-menu p-2 text-capitalize"
-                <ul className="dropdown-menu p-3" style={{ width: "320px" }}>
+                style={{ Width: "100%" }}
-                  <div>
+              >
-                    <p className="small-text text-muted m-0">Filter by</p>
+                <p className="small-text text-muted m-0">Filter by</p>
-
+                <div className="d-flex gap-4 justify-content-between">
-                    {/* Bucket Filter */}
+                  {/* Bucket Filter */}
-                    <div className="mt-1">
+                  <div className="flex-fill ">
-                      <p className="small-text mb-1 fw-semibold">Buckets</p>
+                    <p className="small-text mb-2 ">Buckets</p>
-                      <div className="d-flex flex-wrap">
+                    {filteredBuckets.map(({ id, name }) => (
-                        {filteredBuckets.map(({ id, name }) => (
+                      <div className="form-check mb-1" key={id}>
-                          <div
+                        <input
-                            className="form-check me-1 mb-1"
+                          className="form-check-input  "
-                            style={{ width: "33.33%" }}
+                          type="checkbox"
-                            key={id}
+                          id={`bucket-${id}`}
-                          >
+                          checked={selectedBucketIds.includes(id)}
-                            <input
+                          onChange={() => handleBucketChange(id)}
-                              className="form-check-input"
+                        />
-                              type="checkbox"
+                        <label
-                              id={`bucket-${id}`}
+                          className="form-check-label text-nowrap"
-                              checked={tempSelectedBucketIds.includes(id)}
+                          htmlFor={`bucket-${id}`}
-                              onChange={() => handleTempBucketChange(id)}
+                        >
-                            />
+                          {name}
-                            <label
+                        </label>
-                              className="form-check-label text-nowrap small-text"
-                              htmlFor={`bucket-${id}`}
-                            >
-                              {name}
-                            </label>
-                          </div>
-                        ))}
                       </div>
-                    </div>
+                    ))}
-                    <hr className="m-0" />
-                    {/* Category Filter */}
-                    <div className="mt-1">
-                      <p className="small-text mb-1 fw-semibold">Categories</p>
-                      <div className="d-flex flex-wrap">
-                        {filteredCategories.map(({ id, name }) => (
-                          <div
-                            className="form-check me-1 mb-1"
-                            style={{ width: "33.33%" }}
-                            key={id}
-                          >
-                            <input
-                              className="form-check-input"
-                              type="checkbox"
-                              id={`cat-${id}`}
-                              checked={tempSelectedCategoryIds.includes(id)}
-                              onChange={() => handleTempCategoryChange(id)}
-                            />
-                            <label
-                              className="form-check-label text-nowrap small-text"
-                              htmlFor={`cat-${id}`}
-                            >
-                              {name}
-                            </label>
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-
-                    <div className="d-flex justify-content-end gap-2 mt-1">
-                      <button
-                        className="btn btn-xs btn-secondary"
-                        onClick={clearFilter}
-                      >
-                        Clear
-                      </button>
-                      <button
-                        className="btn btn-xs btn-primary"
-                        onClick={applyFilter}
-                      >
-                        Apply Filter
-                      </button>
-                    </div>
                   </div>
-                </ul>
+
-              </div>
+                  {/* Category Filter */}
+                  <div className="flex-fill">
+                    <p className="small-text mb-2">Categories</p>
+                    {filteredCategories.map(({ id, name }) => (
+                      <div className="form-check mb-1" key={id}>
+                        <input
+                          className="form-check-input"
+                          type="checkbox"
+                          id={`cat-${id}`}
+                          checked={selectedCategoryIds.includes(id)}
+                          onChange={() => handleCategoryChange(id)}
+                        />
+                        <label
+                          className="form-check-label text-nowrap"
+                          htmlFor={`cat-${id}`}
+                        >
+                          {name}
+                        </label>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </ul>
             </div>
           </div>
+
           <div className="col-12 col-md-8 mb-2 px-1 text-md-end text-end">
-            <label class="switch switch-primary">
-              <input type="checkbox" class="switch-input" />
-              <span class="switch-toggle-slider">
-                <span class="switch-on">
-                  {/* <i class="icon-base bx bx-check"></i> */}
-                </span>
-                <span class="switch-off">
-                  {/* <i class="icon-base bx bx-x"></i> */}
-                </span>
-              </span>
-              <span class="switch-label">Show Inactive Contacts</span>
-            </label>
             <button
               type="button"
               className="btn btn-xs btn-primary"
@@ -400,9 +293,7 @@ const Directory = () => {
           </div>
         </div>
         {!listView && loading && <p>Loading...</p>}
-        {!listView && !loading && currentItems.length == 0 && (
+        {!listView && !loading && currentItems.length == 0  && <p>Not Found Contact</p>}
-          <p>No Matching Contact Found</p>
-        )}
         {listView ? (
           <div className="table-responsive text-nowrap py-2 ">
             <table className="table px-2">
@@ -452,7 +343,10 @@ const Directory = () => {
                     </div>
                   </th>
                   <th className="mx-2">Category</th>
-                  <th>Action</th>
+                  <th
+                  >
+                    Action
+                  </th>
                 </tr>
               </thead>
               <tbody className="table-border-bottom-0 overflow-auto ">
@@ -461,12 +355,13 @@ const Directory = () => {
                     <td colSpan={10}>Loading...</td>
                   </tr>
                 )}
-                {!loading && currentItems.length === 0 && (
+                {!loading &&
-                  <tr>
+                  currentItems.length === 0 && (
-                    <td colSpan={10}>No Matching Contact Found</td>
+                    <tr>
-                  </tr>
+                      <td colSpan={10}>Not Found Contact</td>
-                )}
+                    </tr>
-
+                  )}
+                
                 {!loading &&
                   currentItems.map((contact) => (
                     <ListViewDirectory
@@ -474,9 +369,6 @@ const Directory = () => {
                       contact={contact}
                       setSelectedContact={setSelectedContact}
                       setIsOpenModal={setIsOpenModal}
-                      setOpen_contact={setOpen_contact}
-                      setIsOpenModalNote={setIsOpenModalNote}
-                      IsDeleted={setDeleteContact}
                     />
                   ))}
               </tbody>
@@ -495,14 +387,13 @@ const Directory = () => {
                   setIsOpenModal={setIsOpenModal}
                   setOpen_contact={setOpen_contact}
                   setIsOpenModalNote={setIsOpenModalNote}
-                  IsDeleted={setDeleteContact}
                 />
               </div>
             ))}
           </div>
         )}
 
-        {!loading && currentItems < ITEMS_PER_PAGE && (
+        {!loading && (
           <nav aria-label="Page ">
             <ul className="pagination pagination-sm justify-content-end py-1">
               <li

src/repositories/DirectoryRepository.jsx

@@ -3,8 +3,7 @@ import {api} from "../utils/axiosClient";
 export const DirectoryRepository = {
     GetContacts: () => api.get( '/api/directory' ),
     CreateContact: ( data ) => api.post( '/api/directory', data ),
-    UpdateContact: ( id, data ) => api.put( `/api/directory/${ id }`, data ),
+    UpdateContact:(id,data)=>api.put(`/api/directory/${id}`,data),
-    DeleteContact:(id)=>api.delete(`/api/directory/${id}`),
     
     GetBucktes: () => api.get( `/api/directory/buckets` ),