Added props to hide component based on role; identifies if it's a page or component

src/pages/Directory/Directory.jsx

@@ -21,8 +21,9 @@ import ManageBucket from "../../components/Directory/ManageBucket";
 import {useFab} from "../../Context/FabContext";
 import {DireProvider, useDir} from "../../Context/DireContext";
 
-const Directory = () =>
+const Directory = ({IsPage=true,prefernceContacts}) =>
 {
+  const[projectPrefernce,setPerfence] = useState(null)
   const[IsActive,setIsActive] = useState(true)
   const [isOpenModal, setIsOpenModal] = useState(false);
   const [isOpenModalNote, setIsOpenModalNote] = useState(false);
@@ -44,7 +45,7 @@ const Directory = () =>
   const { dirActions, setDirActions } = useDir(); 
 
 
-  const { contacts, loading , refetch} = useDirectory(IsActive);
+  const { contacts, loading , refetch} = useDirectory(IsActive,projectPrefernce);
   const { contactCategory, loading: contactCategoryLoading } =
   useContactCategory();
   const {buckets} = useBuckets();
@@ -72,7 +73,7 @@ const Directory = () =>
   
       // cacheData("Contacts", {data:updatedContacts,isActive:IsActive});
       // setContactList(updatedContacts);
-      refetch()
+      refetch(IsActive,prefernceContacts)
     } catch (error) {
       const msg =
         error.response?.data?.message ||
@@ -216,35 +217,43 @@ const handleDeleteContact = async (overrideId = null) => {
   };
 
 
-   useEffect(() => {
+ useEffect(() => {
-    setActions([
+  const actions = [];
-      {
-        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
+  if (IsPage) {
-  }, []);
+    actions.push({
+    label: "Manage Bucket",
+    icon: "fa-solid fa-bucket fs-5",
+    color:"primary",
+    onClick: () => setOpenBucketModal(true),
+  });
+  }
+    actions.push({
+      label: "New Contact",
+      icon: "bx bx-plus-circle",
+      color: "warning",
+      onClick: () => setIsOpenModal(true),
+    } );
+  
+
+  setActions(actions);
+
+  return () => setActions([]); 
+}, [IsPage]);
+  useEffect( () =>
+  {
+  setPerfence(prefernceContacts)
+},[prefernceContacts])
 
   return (
     <div className="container-xxl flex-grow-1 container-p-y">
     
-      <Breadcrumb
+   {IsPage && (   <Breadcrumb
         data={[
           { label: "Home", link: "/dashboard" },
           { label: "Directory", link: null },
         ]}
-      ></Breadcrumb>
+      ></Breadcrumb>)}
 
       {isOpenModal && (
         <GlobalModel

src/pages/Directory/DirectoryPageHeader.jsx

@@ -29,7 +29,7 @@ const DirectoryPageHeader = ({
     <>
       <div className="row"></div>
       <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 ">
+        <div className="col-12 col-md-6 mb-2 px-1 d-flex align-items-center gap-4 ">
           <input
             type="search"
             className="form-control form-control-sm me-2"
@@ -167,7 +167,7 @@ const DirectoryPageHeader = ({
             </div>
           </div>
         </div>
-        <div className="col-12 col-md-8 mb-2 px-1 d-flex justify-content-end gap-2 align-items-center text-end">
+        <div className="col-12 col-md-6 mb-2 px-1 d-flex justify-content-end gap-2 align-items-center text-end">
              <label className="switch switch-primary align-self-start mb-2">
                     <input
                       type="checkbox"