added direct bucket permission

src/components/Directory/BucketList.jsx

@@ -1,4 +1,11 @@
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
+import { useProfile } from "../../hooks/useProfile";
+import { DIRECTORY_ADMIN, DIRECTORY_MANAGER } from "../../utils/constants";
+
 const BucketList = ({ buckets, loading, searchTerm, onEdit, onDelete }) => {
+  const { profile } = useProfile();
+  const IsDirecrory_Admin = useHasUserPermission(DIRECTORY_ADMIN);
+  const IsDirectory_Manager = useHasUserPermission(DIRECTORY_MANAGER);
   const sorted = buckets.filter((bucket) =>
     bucket.name.toLowerCase().includes(searchTerm.toLowerCase())
   );
@@ -14,6 +21,9 @@ const BucketList = ({ buckets, loading, searchTerm, onEdit, onDelete }) => {
             <div className="card-body p-4">
               <h6 className="card-title d-flex justify-content-between">
                 <span>{bucket.name}</span>
+                {(IsDirecrory_Admin ||
+                  IsDirectory_Manager ||
+                  bucket?.createdBy?.id === profile?.employeeInfo?.id) && (
                   <div className="d-flex gap-2">
                     <i
                       className="bx bx-edit bx-sm text-primary cursor-pointer"
@@ -21,14 +31,17 @@ const BucketList = ({ buckets, loading, searchTerm, onEdit, onDelete }) => {
                     />
                     <i
                       className="bx bx-trash bx-sm text-danger cursor-pointer"
-                    onClick={() => onDelete(bucket.id)}
+                      onClick={() => onDelete(bucket?.id)}
                     />
                   </div>
+                )}
               </h6>
               <h6 className="card-subtitle mb-2 text-muted">
                 Contacts: {bucket.numberOfContacts || 0}
               </h6>
-              <p className="card-text">{bucket.description || "No description"}</p>
+              <p className="card-text">
+                {bucket.description || "No description"}
+              </p>
             </div>
           </div>
         </div>