Fixed case mismatch in error rendering (BucketIds ➝ bucketIds)

src/components/Directory/DirectorySchema.js

@@ -6,7 +6,7 @@ export const ContactSchema = z
     contactCategoryId: z.string().nullable().optional(),
     address: z.string().optional(),
     description: z.string().min(1, { message: "Description is required" }),
-    projectIds: z.array(z.string()), // min(1, "Project is required")
+    projectIds: z.array(z.string()).nullable().optional(), // min(1, "Project is required")
     contactEmails: z
       .array(
         z.object({
@@ -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()).nonempty({ message: "At least one label is required" })
   })
 
 //    .refine((data) => {

src/components/Directory/ManageBucket.jsx

@@ -12,8 +12,13 @@ import EmployeeList from "./EmployeeList";
 import { useAllEmployees, useEmployees } from "../../hooks/useEmployees";
 import { useSortableData } from "../../hooks/useSortableData";
 import ConfirmModal from "../common/ConfirmModal";
+import {useHasUserPermission} from "../../hooks/useHasUserPermission";
+import {DIRECTORY_ADMIN, DIRECTORY_MANAGER} from "../../utils/constants";
+import {useProfile} from "../../hooks/useProfile";
 
-const ManageBucket = () => {
+const ManageBucket = () =>
+{
+  const {profile} =useProfile()
   const [bucketList, setBucketList] = useState([]);
   const { employeesList } = useAllEmployees(false);
   const [selectedEmployee, setSelectEmployee] = useState([]);
@@ -22,7 +27,9 @@ const ManageBucket = () => {
   const [isSubmitting, setSubmitting] = useState(false);
   const [selected_bucket, select_bucket] = useState(null);
   const [deleteBucket, setDeleteBucket] = useState(null);
-  const [searchTerm, setSearchTerm] = useState("");
+  const [ searchTerm, setSearchTerm ] = useState( "" );
+  const DirManager = useHasUserPermission( DIRECTORY_MANAGER )
+  const DirAdmin = useHasUserPermission(DIRECTORY_ADMIN)
   const {
     items: sortedBuckteList,
     requestSort,
@@ -336,19 +343,25 @@ const ManageBucket = () => {
                         </td>
                         <td>{bucket.numberOfContacts}</td>
                         <td className="justify-content-center">
-                          <div className="d-flex justify-content-center align-items-center gap-2">
-                            <i
-                              className="bx bx-edit bx-sm text-primary cursor-pointer"
-                              onClick={() => {
-                                select_bucket(bucket);
-                                setAction_bucket(true);
+                        
+                            {(DirManager ||
+                            DirAdmin ||
+                            bucket?.createdBy?.id ===
+                              profile?.employeeInfo?.id) && (
+                            <div className="d-flex justify-content-center align-items-center gap-2">
+                                <i
+                                className="bx bx-edit bx-sm text-primary cursor-pointer "
+                                onClick={() => {
+                                  select_bucket(bucket);
+                                  setAction_bucket(true);
                               }}
-                            ></i>
-                            <i
-                              className="bx bx-trash bx-sm text-danger cursor-pointer"
-                              onClick={() => setDeleteBucket(bucket?.id)}
-                            ></i>
-                          </div>
+                              ></i>
+                              <i
+                                className="bx bx-trash bx-sm text-danger cursor-pointer"
+                                onClick={() => setDeleteBucket(bucket?.id)}
+                              ></i>
+                            </div>
+                          )}
                         </td>
                       </tr>
                     ))}
@@ -386,7 +399,7 @@ const ManageBucket = () => {
                   <EmployeeList
                     employees={employeesList}
                     onChange={(data) => setSelectEmployee(data)}
-                    assignedEmployee={selected_bucket?.employeeIds}
+                    bucket={selected_bucket}
                   />
                 )}
 

src/components/Directory/UpdateContact.jsx

@@ -387,13 +387,10 @@ await submitContact({ ...cleaned, id: existingContact.id });
           )}
         </div>
         <div className="row">
-          <div className="col-md-12 mt-1 text-start">
+         <div className="col-md-12 mt-1 text-start">
             <label className="form-label ">Select Label</label>
 
-            <ul
-              className="d-flex flex-wrap px-1 list-unstyled  mb-0"
-             
-            >
+            <ul className="d-flex flex-wrap px-1 list-unstyled  mb-0">
               {bucketsLoaging && <p>Loading...</p>}
               {buckets?.map((item) => (
                 <li
@@ -417,11 +414,12 @@ await submitContact({ ...cleaned, id: existingContact.id });
                   </div>
                 </li>
               ))}
+              {errors.bucketIds && (
+                <small className="danger-text mt-0">
+                  {errors.bucketIds.message}
+                </small>
+              )}
             </ul>
-
-            {errors.BucketIds && (
-              <small className="text-danger">{errors.BucketIds.message}</small>
-            )}
           </div>
         </div>