From 3f06ba4d6e0058ea8a39c25c9e440a9ec5c6db06 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Mon, 11 Aug 2025 11:26:00 +0530
Subject: [PATCH] Show Single "No Bucket Found" Message and Improve Popup
 Design

---
 src/components/Directory/ManageBucket.jsx | 81 +++++++++++++----------
 1 file changed, 45 insertions(+), 36 deletions(-)

diff --git a/src/components/Directory/ManageBucket.jsx b/src/components/Directory/ManageBucket.jsx
index 0af5108a..58344a15 100644
--- a/src/components/Directory/ManageBucket.jsx
+++ b/src/components/Directory/ManageBucket.jsx
@@ -19,7 +19,7 @@ import { useProfile } from "../../hooks/useProfile";
 const ManageBucket = () => {
   const { profile } = useProfile();
   const [bucketList, setBucketList] = useState([]);
-  const {employeesList} = useAllEmployees( false );
+  const { employeesList } = useAllEmployees(false);
   const [selectedEmployee, setSelectEmployee] = useState([]);
   const { buckets, loading, refetch } = useBuckets();
   const [action_bucket, setAction_bucket] = useState(false);
@@ -237,9 +237,8 @@ const ManageBucket = () => {
                 onChange={(e) => setSearchTerm(e.target.value)}
               />
               <i
-                className={`bx bx-refresh cursor-pointer fs-4 ${
-                  loading ? "spin" : ""
-                }`}
+                className={`bx bx-refresh cursor-pointer fs-4 ${loading ? "spin" : ""
+                  }`}
                 title="Refresh"
                 onClick={() => refetch()}
               />
@@ -248,9 +247,8 @@ const ManageBucket = () => {
 
           <button
             type="button"
-            className={`btn btn-sm btn-primary ms-auto ${
-              action_bucket ? "d-none" : ""
-            }`}
+            className={`btn btn-sm btn-primary ms-auto ${action_bucket ? "d-none" : ""
+              }`}
             onClick={() => {
               setAction_bucket(true);
               select_bucket(null);
@@ -267,22 +265,33 @@ const ManageBucket = () => {
             <div className="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3 pt-3 px-2 px-sm-0">
               {loading && (
                 <div className="col-12">
-                  <div className="d-flex justify-content-center align-items-center py-5">
+                  <div
+                    className="d-flex justify-content-center align-items-center py-5 w-100"
+                    style={{ marginLeft: "250px" }}
+                  >
                     Loading...
                   </div>
                 </div>
               )}
-              {!loading && buckets.length === 0 && (
+
+              {!loading && buckets.length === 0 && searchTerm.trim() === "" && (
                 <div className="col-12">
-                  <div className="d-flex justify-content-center align-items-center py-5">
-                    No Buckets Available.
+                  <div
+                    className="d-flex justify-content-center align-items-center py-5 w-100"
+                    style={{ marginLeft: "250px" }}
+                  >
+                    No buckets available.
                   </div>
                 </div>
               )}
-              {!loading && sortedBucktesList.length === 0 && (
+
+              {!loading && buckets.length > 0 && sortedBucktesList.length === 0 && (
                 <div className="col-12">
-                  <div className="d-flex justify-content-center align-items-center py-5">
-                    No Matching Bucket Found.
+                  <div
+                    className="d-flex justify-content-center align-items-center py-5 w-100"
+                    style={{ marginLeft: "250px" }}
+                  >
+                    No matching buckets found.
                   </div>
                 </div>
               )}
@@ -296,29 +305,29 @@ const ManageBucket = () => {
                           {(DirManager ||
                             DirAdmin ||
                             bucket?.createdBy?.id ===
-                              profile?.employeeInfo?.id) && (
-                            <div className="d-flex gap-2">
-                              <i
-                                className="bx bx-edit bx-sm text-primary cursor-pointer"
-                                onClick={() => {
-                                  select_bucket(bucket);
-                                  setAction_bucket(true);
-                                  const initialSelectedEmployees = employeesList
-                                    .filter((emp) =>
-                                      bucket.employeeIds?.includes(
-                                        emp.employeeId
+                            profile?.employeeInfo?.id) && (
+                              <div className="d-flex gap-2">
+                                <i
+                                  className="bx bx-edit bx-sm text-primary cursor-pointer"
+                                  onClick={() => {
+                                    select_bucket(bucket);
+                                    setAction_bucket(true);
+                                    const initialSelectedEmployees = employeesList
+                                      .filter((emp) =>
+                                        bucket.employeeIds?.includes(
+                                          emp.employeeId
+                                        )
                                       )
-                                    )
-                                    .map((emp) => ({ ...emp, isActive: true }));
-                                  setSelectEmployee(initialSelectedEmployees);
-                                }}
-                              ></i>
-                              <i
-                                className="bx bx-trash bx-sm text-danger cursor-pointer ms-0"
-                                onClick={() => setDeleteBucket(bucket?.id)}
-                              ></i>
-                            </div>
-                          )}
+                                      .map((emp) => ({ ...emp, isActive: true }));
+                                    setSelectEmployee(initialSelectedEmployees);
+                                  }}
+                                ></i>
+                                <i
+                                  className="bx bx-trash bx-sm text-danger cursor-pointer ms-0"
+                                  onClick={() => setDeleteBucket(bucket?.id)}
+                                ></i>
+                              </div>
+                            )}
                         </h6>
                         <h6 className="card-subtitle mb-2 text-muted  text-start">
                           Contacts:{" "}
-- 
2.43.0