src/Context/FabContext.jsx

@@ -1,15 +0,0 @@
-import React, { createContext, useContext, useState } from "react";
-
-const FabContext = createContext();
-
-export const FabProvider = ({ children }) => {
-  const [actions, setActions] = useState([]);
-
-  return (
-    <FabContext.Provider value={{ actions, setActions }}>
-      {children}
-    </FabContext.Provider>
-  );
-};
-
-export const useFab = () => useContext(FabContext);

src/components/Directory/DirectorySchema.js

@@ -39,7 +39,7 @@ export const ContactSchema = z
         })
       )
       .min(1, { message: "At least one tag is required" }),
-    bucketIds: z.array(z.string()).min(1,{message:"At least one Label required"}),
+    bucketIds: z.array(z.string()).optional(),
   })
 
 //    .refine((data) => {

src/components/Directory/ManageBucket.jsx

@@ -16,7 +16,7 @@ import ConfirmModal from "../common/ConfirmModal";
 const ManageBucket = () => {
   const [bucketList, setBucketList] = useState([]);
   const { employeesList } = useAllEmployees(false);
-  const { buckets, loading,refetch } = useBuckets();
+  const { buckets, loading } = useBuckets();
   const [action_bucket, setAction_bucket] = useState(false);
   const [isSubmitting, setSubmitting] = useState(false);
   const [selected_bucket, select_bucket] = useState(null);
@@ -91,13 +91,7 @@ const ManageBucket = () => {
 
   const handleDeleteContact = async () => {
     try {
-      const resp = await DirectoryRepository.DeleteBucket( deleteBucket );
-         const cache_buckets = getCachedData("buckets") || [];
-        const updatedBuckets = cache_buckets.filter((bucket) =>
-          bucket.id != deleteBucket
-        );
-        cacheData("buckets", updatedBuckets);
-        setBucketList(updatedBuckets);
+      // delete api calling here
       showToast("Bucket deleted successfully", "success");
       setDeleteBucket(null);
     } catch (error) {
@@ -166,20 +160,14 @@ const ManageBucket = () => {
               onClick={handleBack}
             ></i>
           ) : (
-            <div className="d-flex align-items-center gap-2">
+            <div>
               <input
                 type="search"
                 className="form-control form-control-sm"
                 placeholder="Search Bucket ..."
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
-                />
-                   <i
-            className={`bx bx-refresh cursor-pointer fs-4 ${loading  ? "spin" : ""
-              }`}
-            title="Refresh"
-            onClick={() => rrefetch()}
-          />
+              />
             </div>
           )}
 

src/components/Directory/ProfileContactDirectory.jsx

@@ -6,6 +6,7 @@ import NotesDirectory from "./NotesDirectory";
 
 const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
   const { conatProfile, loading } = useContactProfile(contact?.id);
+  const [activeTab, setActiveTab] = useState("profile");
   const [profileContact, setProfileContact] = useState();
 
   useEffect(() => {
@@ -33,11 +34,9 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
               <i className="bx bx-building bx-xs"></i>{" "}
               {conatProfile?.organization}
             </span>
-            <span className="small-text">Manager</span>
           </div>
         </div>
-        <div className="row">
-            <div className="col-12 col-md-6 d-flex flex-column text-start">
+        <div className="d-flex flex-column text-start">
           {conatProfile?.contactEmails?.length > 0 && (
             <div className="d-flex mb-2">
               <div style={{ width: "100px", minWidth: "100px" }}>
@@ -62,7 +61,7 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
               </div>
               <div>
                 <ul className="list-inline mb-0">
-                  {conatProfile?.contactPhones.map((phone, idx) => (
+                  {conatProfile.contactPhones.map((phone, idx) => (
                     <li className="list-inline-item me-3" key={idx}>
                       <i className="bx bx-phone bx-xs me-1"></i>
                       {phone.phoneNumber}
@@ -88,28 +87,7 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
               </div>
             </div>
           )}
-          </div>
-          { conatProfile?.buckets?.length > 0 && 
-                <div className="col-12 col-md-6 d-flex flex-column text-start">
-              {conatProfile?.contactEmails?.length > 0 && (
-            <div className="d-flex mb-2 align-items-center">
-              <div style={{ width: "100px", minWidth: "100px" }}>
-                <p className="m-0">Buckets</p>
-              </div>
-              <div>
-                <ul className="list-inline mb-0">
-                  {conatProfile.buckets.map((bucket) => (
-                    <li className="list-inline-item me-2" key={bucket.id}>
-                      <span class="badge bg-label-primary my-1">{ bucket.name}</span>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            </div>
-          )}
-           </div>
-         }
-       </div>
+        </div>
 
         <hr className="my-1" />
         <NotesDirectory

src/components/common/FloatingMenu.css

@@ -1,35 +0,0 @@
-
-.fab-container {
-  position: fixed;
-  bottom: 35px;
-  right: 30px;
-  z-index: 1050;
-  display: flex;
-  flex-direction: column;
-  align-items: end;
-}
-
-.fab-main {
-  /* width: 45px;
-  height: 45px;
-  border-radius: 100%;
-  background-color: #0d6efd;
-  color: white;
-  border: none; */
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
-  /* font-size: 24px; */
-  cursor: pointer;
-  pointer-events: auto;
-}
-
-.fab-option {
-  pointer-events: auto;
-  margin-bottom: 10px;
-}
-@media (max-width: 768px) {
-  .fab-container {
-    right: 20px;
-    left: 50%;
-    bottom: 20px;
-  }
-}

src/components/common/FloatingMenu.jsx

@@ -1,33 +0,0 @@
-import React, { useState } from "react";
-import {useFab} from "../../Context/FabContext";
-import './FloatingMenu.css'
-
-const FloatingMenu = () => {
-  const { actions } = useFab(); 
-  const [open, setOpen] = useState(false);
-  if (actions.length === 0) return null; 
-
-  return (
-    <div className="fab-container">
-     {open &&
-  actions.map((action, index) => (
-    <button
-      key={index}
-      className={`badge bg-label-${action.color} rounded-pill mb-2 d-inline-flex align-items-center gap-2 px-3 py-1 cursor-pointer fab-option`}
-      onClick={action.onClick}
-      title={action.label}
-    >
-      <i className={action.icon}></i>
-      <span>{action.label}</span> 
-    </button>
-))}
-
-          <button type="button" className="btn btn-lg btn-icon rounded-pill me-2 btn-primary fab-main " onClick={() => setOpen(!open)}>
-        <span className={`bx ${open ? "bx-x" : "bx-plus"}`}></span>
-      </button>
-    </div>
-  );
-};
-
-export default FloatingMenu;
-

src/hooks/useDirectory.js

@@ -37,46 +37,47 @@ export const useDirectory = (isActive) => {
   };
 };
 
+
+
 export const useBuckets = () => {
   const [buckets, setBuckets] = useState([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
 
   const fetchBuckets = async () => {
-    setLoading(true);
-    try {
-      const resp = await DirectoryRepository.GetBucktes();
-      setBuckets(resp.data);
-      cacheData("buckets", resp.data);
-      setLoading(false);
-    } catch (error) {
-      const msg =
-        error?.response?.data?.message ||
-        error?.message ||
-        "Something went wrong";
-      setError( msg );
-      setLoading(false);
+    const cacheBuckets = getCachedData("buckets");
+    if (!cacheBuckets) {
+        setLoading( true );
+      try {
+        const resp = await DirectoryRepository.GetBucktes(); 
+        setBuckets(resp.data);
+          cacheData( "buckets", resp.data );
+            setLoading(false);
+      } catch (error) {
+        const msg =
+          error?.response?.data?.message || error?.message || "Something went wrong";
+        setError(msg);
+      } 
+    } else {
+      setBuckets(cacheBuckets);
     }
   };
 
   useEffect(() => {
-    const cacheBuckets = getCachedData("buckets");
-    if (!cacheBuckets) {
-      fetchBuckets();
-    } else {
-      setBuckets(cacheBuckets);
-    }
+    fetchBuckets();
   }, []);
 
-  return { buckets, loading, error, refetch: fetchBuckets };
+  return { buckets, loading, error };
 };
 
-export const useContactProfile = (id) => {
-  const [conatProfile, setContactProfile] = useState(null);
-  const [loading, setLoading] = useState(false);
-  const [Error, setError] = useState("");
+export const useContactProfile = (id) =>
+{
+  const [ conatProfile, setContactProfile ] = useState( null );
+  const [ loading, setLoading ] = useState( false );
+  const [ Error, setError ] = useState( "" );
 
-  const fetchContactProfile = async () => {
+
+const fetchContactProfile = async () => {
     const cached = getCachedData("Contact Profile");
 
     if (!cached || cached.contactId !== id) {
@@ -87,9 +88,7 @@ export const useContactProfile = (id) => {
         cacheData("Contact Profile", { data: resp.data, contactId: id });
       } catch (err) {
         const msg =
-          err?.response?.data?.message ||
-          err?.message ||
-          "Something went wrong";
+          err?.response?.data?.message || err?.message || "Something went wrong";
         setError(msg);
       } finally {
         setLoading(false);
@@ -100,33 +99,35 @@ export const useContactProfile = (id) => {
   };
 
   useEffect(() => {
-    if (id) {
+    if ( id )
+    {
       fetchContactProfile(id);
     }
   }, [id]);
 
   return { conatProfile, loading, Error };
-};
+}
 
-export const useContactNotes = (id, IsActive) => {
-  const [contactNotes, setContactNotes] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [Error, setError] = useState("");
 
-  const fetchContactNotes = async () => {
+export const useContactNotes = (id,IsActive) =>
+{
+  const [ contactNotes, setContactNotes ] = useState( [] );
+  const [ loading, setLoading ] = useState( false );
+  const [ Error, setError ] = useState( "" );
+
+
+const fetchContactNotes = async () => {
     const cached = getCachedData("Contact Notes");
 
     if (!cached || cached.contactId !== id) {
       setLoading(true);
       try {
-        const resp = await DirectoryRepository.GetNote(id, IsActive);
+        const resp = await DirectoryRepository.GetNote(id,IsActive);
         setContactNotes(resp.data);
         cacheData("Contact Notes", { data: resp.data, contactId: id });
       } catch (err) {
         const msg =
-          err?.response?.data?.message ||
-          err?.message ||
-          "Something went wrong";
+          err?.response?.data?.message || err?.message || "Something went wrong";
         setError(msg);
       } finally {
         setLoading(false);
@@ -137,43 +138,46 @@ export const useContactNotes = (id, IsActive) => {
   };
 
   useEffect(() => {
-    if (id) {
+    if ( id )
+    {
       fetchContactNotes(id);
     }
   }, [id]);
 
   return { contactNotes, loading, Error };
-};
+}
 
-export const useOrganization = () => {
-  const [organizationList, setOrganizationList] = useState([]);
+
+export const useOrganization = () =>
+{
+      const [organizationList, setOrganizationList] = useState([]);
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
+  const [ error, setError ] = useState( "" );
+  
 
-  const fetchOrg = async () => {
-    const cacheOrg = getCachedData("organizations");
+  const fetchOrg = async() =>
+  {
+      const cacheOrg = getCachedData("organizations");
     if (cacheOrg?.length != 0) {
-      setLoading(true);
+        setLoading( true );
       try {
-        const resp = await DirectoryRepository.GetOrganizations();
-        cacheData("organizations", resp.data);
-        setOrganizationList(resp.data);
-        setLoading(false);
+        const resp = await DirectoryRepository.GetOrganizations()
+        cacheData( "organizations", resp.data );
+        setOrganizationList( resp.data );
+        setLoading(false)
       } catch (error) {
         const msg =
-          error?.response?.data?.message ||
-          error?.message ||
-          "Something went wrong";
+          error?.response?.data?.message || error?.message || "Something went wrong";
         setError(msg);
-      }
+      } 
     } else {
       setOrganizationList(cacheOrg);
     }
-  };
+   }
 
   useEffect(() => {
     fetchOrg();
   }, []);
 
   return { organizationList, loading, error };
-};
+}

src/layouts/HomeLayout.jsx

@@ -4,30 +4,25 @@ import Header from "../components/Layout/Header";
 import Sidebar from "../components/Layout/Sidebar";
 
 import Footer from "../components/Layout/Footer";
-import FloatingMenu from "../components/common/FloatingMenu";
-import { FabProvider } from "../Context/FabContext";
 
 const HomeLayout = () => {
   useEffect(() => {
     Main();
   }, []);
   return (
-    <FabProvider>
-      <div className="layout-wrapper layout-content-navbar">
-        <div className="layout-container">
-          <Sidebar />
-          <div className="layout-page ">
-            <Header />
-            <div className="content-wrapper">
-              <Outlet />
-              <Footer />
-            </div>
+    <div className="layout-wrapper layout-content-navbar" >
+      <div className="layout-container" >
+        <Sidebar />
+        <div className="layout-page ">
+          <Header />
+          <div className="content-wrapper"  >
+            <Outlet />
+            <Footer />
           </div>
-          <FloatingMenu />
-          <div className="layout-overlay layout-menu-toggle"></div>
         </div>
+        <div className="layout-overlay layout-menu-toggle"></div>
       </div>
-    </FabProvider>
+    </div>
   );
 };
 

src/pages/Directory/Directory.jsx

@@ -18,7 +18,6 @@ import ConfirmModal from "../../components/common/ConfirmModal";
 import DirectoryListTableHeader from "./DirectoryListTableHeader";
 import DirectoryPageHeader from "./DirectoryPageHeader";
 import ManageBucket from "../../components/Directory/ManageBucket";
-import {useFab} from "../../Context/FabContext";
 
 const Directory = () =>
 {
@@ -37,12 +36,11 @@ const Directory = () =>
   const [openBucketModal,setOpenBucketModal] = useState(false)
 
   const [tempSelectedBucketIds, setTempSelectedBucketIds] = useState([]);
-  const [ tempSelectedCategoryIds, setTempSelectedCategoryIds ] = useState( [] );
-    const {setActions} = useFab()
+  const [tempSelectedCategoryIds, setTempSelectedCategoryIds] = useState([]);
 
-  const { contacts, loading , refetch} = useDirectory(IsActive);
+  const { contacts, loading } = useDirectory(IsActive);
   const { contactCategory, loading: contactCategoryLoading } =
-  useContactCategory();
+    useContactCategory();
   const {buckets} = useBuckets();
   
   const submitContact = async (data) => {
@@ -58,17 +56,15 @@ const Directory = () =>
         );
         showToast("Contact updated successfully", "success");
         setIsOpenModal(false);
-        setSelectedContact( null );
+        setSelectedContact(null);
       } else {
         response = await DirectoryRepository.CreateContact(data);
         updatedContacts = [...contacts_cache, response.data];
         showToast("Contact created successfully", "success");
         setIsOpenModal(false);
       }
-  
-      // cacheData("Contacts", {data:updatedContacts,isActive:IsActive});
-      // setContactList(updatedContacts);
-      refetch()
+       cacheData("Contacts", {data:updatedContacts,isActive:IsActive});
+      setContactList(updatedContacts);
     } catch (error) {
       const msg =
         error.response?.data?.message ||
@@ -84,7 +80,7 @@ const Directory = () =>
       const contacts_cache = getCachedData("contacts")?.data || [];
 
       const response = await DirectoryRepository.DeleteContact(deleteContact);
-      const updatedContacts = ContactList.filter( ( c ) => c.id !== deleteContact );
+      const updatedContacts = ContactList.filter((c) => c.id !== deleteContact);
       setContactList(updatedContacts);
       cacheData("Contacts", {data:updatedContacts,isActive:IsActive});
       showToast("Contact deleted successfully", "success");
@@ -159,7 +155,7 @@ const Directory = () =>
 
       return matchesSearch && matchesCategory && matchesBucket;
     }).sort((a, b) => a.name.localeCompare(b.name));
-  }, [ContactList, searchText, selectedCategoryIds, selectedBucketIds,selectedContact]);
+  }, [ContactList, searchText, selectedCategoryIds, selectedBucketIds]);
 
   const applyFilter = () => {
     setSelectedBucketIds(tempSelectedBucketIds);
@@ -196,30 +192,8 @@ const Directory = () =>
     }
   };
 
-
-   useEffect(() => {
-    setActions([
-      {
-        label: "New Contact",
-        icon: "bx bx-plus-circle",
-         color: "warning",
-        onClick: () =>  setIsOpenModal(true),
-      },
-           {
-        label: "Manage Bucket",
-             icon: "fa-solid fa-bucket fs-5 ",
-         color: "primary",
-        onClick: () => setOpenBucketModal(true),
-      },
-   
-    ]);
-
-    return () => setActions([]); // Clean up
-  }, []);
-
   return (
     <div className="container-xxl flex-grow-1 container-p-y">
-    
       <Breadcrumb
         data={[
           { label: "Home", link: "/dashboard" },
@@ -359,8 +333,6 @@ const Directory = () =>
             ))}
           </div>
         )}
-        <div>
-  </div>
 
         {!loading && currentItems < ITEMS_PER_PAGE && (
           <nav aria-label="Page ">

src/repositories/DirectoryRepository.jsx

@@ -11,7 +11,7 @@ export const DirectoryRepository = {
     GetBucktes: () => api.get( `/api/directory/buckets` ),
     CreateBuckets: ( data ) => api.post( `/api/Directory/bucket`, data ),
     UpdateBuckets: ( id, data ) => api.put( `/api/Directory/bucket/${ id }`, data ),
-    DeleteBucket:(id)=>api.delete(`/api/directory/bucket/${id}`),
+    DeleteBucket:(id)=>api.post(`/api/directory/bucket/${id}`),
 
     GetContactProfile: ( id ) => api.get( `/api/directory/profile/${ id }` ),