added float button

src/Context/FabContext.jsx

@@ -0,0 +1,15 @@
+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()).optional(),
+    bucketIds: z.array(z.string()).min(1,{message:"At least one Label required"}),
   })
 
 //    .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 } = useBuckets();
+  const { buckets, loading,refetch } = useBuckets();
   const [action_bucket, setAction_bucket] = useState(false);
   const [isSubmitting, setSubmitting] = useState(false);
   const [selected_bucket, select_bucket] = useState(null);
@@ -91,7 +91,13 @@ const ManageBucket = () => {
 
   const handleDeleteContact = async () => {
     try {
-      // delete api calling here
+      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);
       showToast("Bucket deleted successfully", "success");
       setDeleteBucket(null);
     } catch (error) {
@@ -160,14 +166,20 @@ const ManageBucket = () => {
               onClick={handleBack}
             ></i>
           ) : (
-            <div>
+            <div className="d-flex align-items-center gap-2">
               <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,7 +6,6 @@ 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(() => {
@@ -34,9 +33,11 @@ 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="d-flex flex-column text-start">
+        <div className="row">
+            <div className="col-12 col-md-6 d-flex flex-column text-start">
           {conatProfile?.contactEmails?.length > 0 && (
             <div className="d-flex mb-2">
               <div style={{ width: "100px", minWidth: "100px" }}>
@@ -61,7 +62,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}
@@ -87,7 +88,28 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
               </div>
             </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>
 
         <hr className="my-1" />
         <NotesDirectory

src/components/common/FloatingMenu.css

@@ -0,0 +1,35 @@
+
+.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

@@ -0,0 +1,33 @@
+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,47 +37,46 @@ export const useDirectory = (isActive) => {
   };
 };
 
-
-
 export const useBuckets = () => {
   const [buckets, setBuckets] = useState([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
 
   const fetchBuckets = async () => {
-    const cacheBuckets = getCachedData("buckets");
+    setLoading(true);
-    if (!cacheBuckets) {
+    try {
-        setLoading( true );
+      const resp = await DirectoryRepository.GetBucktes();
-      try {
+      setBuckets(resp.data);
-        const resp = await DirectoryRepository.GetBucktes(); 
+      cacheData("buckets", resp.data);
-        setBuckets(resp.data);
+      setLoading(false);
-          cacheData( "buckets", resp.data );
+    } catch (error) {
-            setLoading(false);
+      const msg =
-      } catch (error) {
+        error?.response?.data?.message ||
-        const msg =
+        error?.message ||
-          error?.response?.data?.message || error?.message || "Something went wrong";
+        "Something went wrong";
-        setError(msg);
+      setError( msg );
-      } 
+      setLoading(false);
-    } else {
-      setBuckets(cacheBuckets);
     }
   };
 
   useEffect(() => {
-    fetchBuckets();
+    const cacheBuckets = getCachedData("buckets");
+    if (!cacheBuckets) {
+      fetchBuckets();
+    } else {
+      setBuckets(cacheBuckets);
+    }
   }, []);
 
-  return { buckets, loading, error };
+  return { buckets, loading, error, refetch: fetchBuckets };
 };
 
-export const useContactProfile = (id) =>
+export const useContactProfile = (id) => {
-{
+  const [conatProfile, setContactProfile] = useState(null);
-  const [ conatProfile, setContactProfile ] = useState( null );
+  const [loading, setLoading] = useState(false);
-  const [ loading, setLoading ] = useState( false );
+  const [Error, setError] = useState("");
-  const [ Error, setError ] = useState( "" );
 
-
+  const fetchContactProfile = async () => {
-const fetchContactProfile = async () => {
     const cached = getCachedData("Contact Profile");
 
     if (!cached || cached.contactId !== id) {
@@ -88,7 +87,9 @@ const fetchContactProfile = async () => {
         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);
@@ -99,35 +100,33 @@ const fetchContactProfile = async () => {
   };
 
   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("");
 
-export const useContactNotes = (id,IsActive) =>
+  const fetchContactNotes = async () => {
-{
-  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);
@@ -138,46 +137,43 @@ const fetchContactNotes = async () => {
   };
 
   useEffect(() => {
-    if ( id )
+    if (id) {
-    {
       fetchContactNotes(id);
     }
   }, [id]);
 
   return { contactNotes, loading, Error };
-}
+};
 
-
+export const useOrganization = () => {
-export const useOrganization = () =>
+  const [organizationList, setOrganizationList] = useState([]);
-{
-      const [organizationList, setOrganizationList] = useState([]);
   const [loading, setLoading] = useState(false);
-  const [ error, setError ] = useState( "" );
+  const [error, setError] = useState("");
-  
 
-  const fetchOrg = async() =>
+  const fetchOrg = async () => {
-  {
+    const cacheOrg = getCachedData("organizations");
-      const cacheOrg = getCachedData("organizations");
     if (cacheOrg?.length != 0) {
-        setLoading( true );
+      setLoading(true);
       try {
-        const resp = await DirectoryRepository.GetOrganizations()
+        const resp = await DirectoryRepository.GetOrganizations();
-        cacheData( "organizations", resp.data );
+        cacheData("organizations", resp.data);
-        setOrganizationList( resp.data );
+        setOrganizationList(resp.data);
-        setLoading(false)
+        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,25 +4,30 @@ 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 (
-    <div className="layout-wrapper layout-content-navbar" >
+    <FabProvider>
-      <div className="layout-container" >
+      <div className="layout-wrapper layout-content-navbar">
-        <Sidebar />
+        <div className="layout-container">
-        <div className="layout-page ">
+          <Sidebar />
-          <Header />
+          <div className="layout-page ">
-          <div className="content-wrapper"  >
+            <Header />
-            <Outlet />
+            <div className="content-wrapper">
-            <Footer />
+              <Outlet />
+              <Footer />
+            </div>
           </div>
+          <FloatingMenu />
+          <div className="layout-overlay layout-menu-toggle"></div>
         </div>
-        <div className="layout-overlay layout-menu-toggle"></div>
       </div>
-    </div>
+    </FabProvider>
   );
 };
 

src/pages/Directory/Directory.jsx

@@ -18,6 +18,7 @@ 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 = () =>
 {
@@ -36,11 +37,12 @@ const Directory = () =>
   const [openBucketModal,setOpenBucketModal] = useState(false)
 
   const [tempSelectedBucketIds, setTempSelectedBucketIds] = useState([]);
-  const [tempSelectedCategoryIds, setTempSelectedCategoryIds] = useState([]);
+  const [ tempSelectedCategoryIds, setTempSelectedCategoryIds ] = useState( [] );
+    const {setActions} = useFab()
 
-  const { contacts, loading } = useDirectory(IsActive);
+  const { contacts, loading , refetch} = useDirectory(IsActive);
   const { contactCategory, loading: contactCategoryLoading } =
-    useContactCategory();
+  useContactCategory();
   const {buckets} = useBuckets();
   
   const submitContact = async (data) => {
@@ -56,15 +58,17 @@ 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);
+      // cacheData("Contacts", {data:updatedContacts,isActive:IsActive});
+      // setContactList(updatedContacts);
+      refetch()
     } catch (error) {
       const msg =
         error.response?.data?.message ||
@@ -80,7 +84,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");
@@ -155,7 +159,7 @@ const Directory = () =>
 
       return matchesSearch && matchesCategory && matchesBucket;
     }).sort((a, b) => a.name.localeCompare(b.name));
-  }, [ContactList, searchText, selectedCategoryIds, selectedBucketIds]);
+  }, [ContactList, searchText, selectedCategoryIds, selectedBucketIds,selectedContact]);
 
   const applyFilter = () => {
     setSelectedBucketIds(tempSelectedBucketIds);
@@ -192,8 +196,30 @@ 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" },
@@ -333,6 +359,8 @@ 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.post(`/api/directory/bucket/${id}`),
+    DeleteBucket:(id)=>api.delete(`/api/directory/bucket/${id}`),
 
     GetContactProfile: ( id ) => api.get( `/api/directory/profile/${ id }` ),