user can update and assign bucket to emp

src/components/Directory/ManageBucket.jsx

@@ -125,7 +125,7 @@ const ManageBucket = () => {
 
         cacheData("buckets", updatedData);
 
-        setBucketList(updatedData)
+        setBucketList(updatedData);
         showToast("Bucket Updated Successfully", "success");
       }
 
@@ -137,7 +137,6 @@ const ManageBucket = () => {
         cacheData("buckets", updatedBuckets);
         setBucketList(updatedBuckets);
 
-
         showToast("Bucket Created Successfully", "success");
       }
 
@@ -249,7 +248,7 @@ const ManageBucket = () => {
 
           <button
             type="button"
-            className={`btn btn-sm btn-primary ms-auto ${
+            className={`btn btn-xs btn-primary ms-auto ${
               action_bucket ? "d-none" : ""
             }`}
             onClick={() => setAction_bucket(true)}
@@ -278,6 +277,7 @@ const ManageBucket = () => {
                         <span>Description</span>
                       </div>
                     </th>
+                    <th>Contacts</th>
                     <th>
                       <div className="d-flex align-items-center justify-content-center gap-1">
                         <span>Action</span>
@@ -323,11 +323,18 @@ const ManageBucket = () => {
                           {bucket.name}
                         </td>
                         <td
-                          className="text-start d-none d-sm-table-cell text-wrap"
+                          className="text-start d-none d-sm-table-cell text-truncate"
-                          style={{ width: "60%" }}
+                          style={{
+                            maxWidth: "300px", 
+                            whiteSpace: "wrap",
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                          }}
+                          title={bucket.description} 
                         >
                           {bucket.description}
                         </td>
+                        <td>{bucket.numberOfContacts}</td>
                         <td className="justify-content-center">
                           <div className="d-flex justify-content-center align-items-center gap-2">
                             <i
@@ -341,7 +348,6 @@ const ManageBucket = () => {
                               className="bx bx-trash bx-sm text-danger cursor-pointer"
                               onClick={() => setDeleteBucket(bucket?.id)}
                             ></i>
-                            <i className="bx bx-user-plus  cursor-pointer"></i>
                           </div>
                         </td>
                       </tr>