From 9551152eeb6a674bb1b7dab3db6e81ea8a809107 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Mon, 11 Aug 2025 10:28:13 +0530
Subject: [PATCH] When the data is not loaded then the filter show "No Filter
 found" message.

---
 src/pages/Directory/DirectoryPageHeader.jsx | 195 +++++++++++---------
 1 file changed, 111 insertions(+), 84 deletions(-)

diff --git a/src/pages/Directory/DirectoryPageHeader.jsx b/src/pages/Directory/DirectoryPageHeader.jsx
index 81074dde..f5f4fdde 100644
--- a/src/pages/Directory/DirectoryPageHeader.jsx
+++ b/src/pages/Directory/DirectoryPageHeader.jsx
@@ -318,54 +318,60 @@ const DirectoryPageHeader = ({
                                         whiteSpace: "normal"
                                     }}
                                 >
-                                    <div className="d-flex gap-3">
-                                        {/* Created By */}
-                                        <div style={{ flexBasis: "30%", maxHeight: "260px", overflowY: "auto" }}>
-                                            <div style={{ position: "sticky", top: 0, background: "#fff", zIndex: 1 }}>
-                                                <p className="text-muted mb-2 pt-2">Created By</p>
-                                            </div>
-                                            {allCreators.map((name, idx) => (
-                                                <div className="form-check mb-1" key={`creator-${idx}`}>
-                                                    <input
-                                                        className="form-check-input form-check-input-sm"
-                                                        type="checkbox"
-                                                        id={`creator-${idx}`}
-                                                        checked={selectedCreators.includes(name)}
-                                                        onChange={() => handleToggleCreator(name)}
-                                                        style={{ width: "1rem", height: "1rem" }}
-                                                    />
-                                                    <label className="form-check-label text-nowrap" htmlFor={`creator-${idx}`}>
-                                                        {name}
-                                                    </label>
-                                                </div>
-                                            ))}
+                                    {allCreators.length === 0 && filteredOrganizations.length === 0 ? (
+                                        <div className="text-center text-muted py-5">
+                                            No filter found
                                         </div>
-
-                                        {/* Organization */}
-                                        <div style={{ maxHeight: "260px", overflowY: "auto", overflowX: "hidden", }}>
-                                            <div style={{ position: "sticky", top: 0, background: "#fff", zIndex: 1 }}>
-                                                <p className="text-muted mb-2 pt-2">Organization</p>
-                                            </div>
-                                            {filteredOrganizations.map((org, idx) => (
-                                                <div className="form-check mb-1" key={`org-${idx}`}>
-                                                    <input
-                                                        className="form-check-input form-check-input-sm"
-                                                        type="checkbox"
-                                                        id={`org-${idx}`}
-                                                        checked={selectedOrgs.includes(org)}
-                                                        onChange={() => handleToggleOrg(org)}
-                                                        style={{ width: "1rem", height: "1rem" }}
-                                                    />
-                                                    <label className="form-check-label text-nowrap" htmlFor={`org-${idx}`}>
-                                                        {org}
-                                                    </label>
+                                    ) : (
+                                        <div className="d-flex gap-3">
+                                            {/* Created By */}
+                                            <div style={{ flexBasis: "30%", maxHeight: "260px", overflowY: "auto" }}>
+                                                <div style={{ position: "sticky", top: 0, background: "#fff", zIndex: 1 }}>
+                                                    <p className="text-muted mb-2 pt-2">Created By</p>
                                                 </div>
-                                            ))}
-                                        </div>
-                                    </div>
+                                                {allCreators.map((name, idx) => (
+                                                    <div className="form-check mb-1" key={`creator-${idx}`}>
+                                                        <input
+                                                            className="form-check-input form-check-input-sm"
+                                                            type="checkbox"
+                                                            id={`creator-${idx}`}
+                                                            checked={selectedCreators.includes(name)}
+                                                            onChange={() => handleToggleCreator(name)}
+                                                            style={{ width: "1rem", height: "1rem" }}
+                                                        />
+                                                        <label className="form-check-label text-nowrap" htmlFor={`creator-${idx}`}>
+                                                            {name}
+                                                        </label>
+                                                    </div>
+                                                ))}
+                                            </div>
 
+                                            {/* Organization */}
+                                            <div style={{ maxHeight: "260px", overflowY: "auto", overflowX: "hidden" }}>
+                                                <div style={{ position: "sticky", top: 0, background: "#fff", zIndex: 1 }}>
+                                                    <p className="text-muted mb-2 pt-2">Organization</p>
+                                                </div>
+                                                {filteredOrganizations.map((org, idx) => (
+                                                    <div className="form-check mb-1" key={`org-${idx}`}>
+                                                        <input
+                                                            className="form-check-input form-check-input-sm"
+                                                            type="checkbox"
+                                                            id={`org-${idx}`}
+                                                            checked={selectedOrgs.includes(org)}
+                                                            onChange={() => handleToggleOrg(org)}
+                                                            style={{ width: "1rem", height: "1rem" }}
+                                                        />
+                                                        <label className="form-check-label text-nowrap" htmlFor={`org-${idx}`}>
+                                                            {org}
+                                                        </label>
+                                                    </div>
+                                                ))}
+                                            </div>
+                                        </div>
+                                    )}
                                 </div>
 
+
                                 {/* Sticky Footer Buttons */}
                                 <div
                                     className="d-flex justify-content-end gap-2 p-2 "
@@ -440,54 +446,74 @@ const DirectoryPageHeader = ({
                             <ul className="dropdown-menu p-3" style={{ width: "700px" }}>
                                 <p className="text-muted m-0 h6">Filter by</p>
 
-                                <div className="d-flex flex-nowrap">
-                                    <div className="mt-1 me-4" style={{ flexBasis: "50%" }}>
-                                        <p className="text-small mb-1">Buckets</p>
-                                        <div className="d-flex flex-wrap">
-                                            {filteredBuckets.map(({ id, name }) => (
-                                                <div className="form-check me-3 mb-1" style={{ minWidth: "calc(50% - 15px)" }} key={id}>
-                                                    <input
-                                                        className="form-check-input form-check-input-sm"
-                                                        type="checkbox"
-                                                        id={`bucket-${id}`}
-                                                        checked={tempSelectedBucketIds.includes(id)}
-                                                        onChange={() => handleTempBucketChange(id)}
-                                                        style={{ width: "1rem", height: "1rem" }}
-                                                    />
-                                                    <label className="form-check-label text-nowrap text-small" htmlFor={`bucket-${id}`}>
-                                                        {name}
-                                                    </label>
-                                                </div>
-                                            ))}
+                                {filteredBuckets.length === 0 && filteredCategories.length === 0 ? (
+                                    <div className="text-center text-muted py-5">
+                                        No filter found
+                                    </div>
+                                ) : (
+                                    <div className="d-flex flex-nowrap">
+                                        <div className="mt-1 me-4" style={{ flexBasis: "50%" }}>
+                                            <p className="text-small mb-1">Buckets</p>
+                                            <div className="d-flex flex-wrap">
+                                                {filteredBuckets.map(({ id, name }) => (
+                                                    <div
+                                                        className="form-check me-3 mb-1"
+                                                        style={{ minWidth: "calc(50% - 15px)" }}
+                                                        key={id}
+                                                    >
+                                                        <input
+                                                            className="form-check-input form-check-input-sm"
+                                                            type="checkbox"
+                                                            id={`bucket-${id}`}
+                                                            checked={tempSelectedBucketIds.includes(id)}
+                                                            onChange={() => handleTempBucketChange(id)}
+                                                            style={{ width: "1rem", height: "1rem" }}
+                                                        />
+                                                        <label
+                                                            className="form-check-label text-nowrap text-small"
+                                                            htmlFor={`bucket-${id}`}
+                                                        >
+                                                            {name}
+                                                        </label>
+                                                    </div>
+                                                ))}
+                                            </div>
+                                        </div>
+
+                                        <div className="mt-1" style={{ flexBasis: "50%" }}>
+                                            <p className="text-small mb-1">Categories</p>
+                                            <div className="d-flex flex-wrap">
+                                                {filteredCategories.map(({ id, name }) => (
+                                                    <div
+                                                        className="form-check me-3 mb-1"
+                                                        style={{ minWidth: "calc(50% - 15px)" }}
+                                                        key={id}
+                                                    >
+                                                        <input
+                                                            className="form-check-input form-check-input-sm"
+                                                            type="checkbox"
+                                                            id={`cat-${id}`}
+                                                            checked={tempSelectedCategoryIds.includes(id)}
+                                                            onChange={() => handleTempCategoryChange(id)}
+                                                            style={{ width: "1rem", height: "1rem" }}
+                                                        />
+                                                        <label
+                                                            className="form-check-label text-nowrap text-small"
+                                                            htmlFor={`cat-${id}`}
+                                                        >
+                                                            {name}
+                                                        </label>
+                                                    </div>
+                                                ))}
+                                            </div>
                                         </div>
                                     </div>
-                                    <div className="mt-1" style={{ flexBasis: "50%" }}>
-                                        <p className="text-small mb-1">Categories</p>
-                                        <div className="d-flex flex-wrap">
-                                            {filteredCategories.map(({ id, name }) => (
-                                                <div className="form-check me-3 mb-1" style={{ minWidth: "calc(50% - 15px)" }} key={id}>
-                                                    <input
-                                                        className="form-check-input form-check-input-sm"
-                                                        type="checkbox"
-                                                        id={`cat-${id}`}
-                                                        checked={tempSelectedCategoryIds.includes(id)}
-                                                        onChange={() => handleTempCategoryChange(id)}
-                                                        style={{ width: "1rem", height: "1rem" }}
-                                                    />
-                                                    <label className="form-check-label text-nowrap text-small" htmlFor={`cat-${id}`}>
-                                                        {name}
-                                                    </label>
-                                                </div>
-                                            ))}
-                                        </div>
-                                    </div>
-                                </div>
+                                )}
 
                                 <div className="d-flex justify-content-end gap-2 mt-1">
                                     <button
                                         className="btn btn-xs btn-secondary"
                                         onClick={(e) => {
-                                            // e.stopPropagation();
                                             clearFilter();
                                         }}
                                     >
@@ -503,6 +529,7 @@ const DirectoryPageHeader = ({
                                     </button>
                                 </div>
                             </ul>
+
                         </div>
                     )}
                 </div>