From c231f12439bdc56861fdff876347e7dfd28a5e5d Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Tue, 12 Aug 2025 12:26:17 +0530
Subject: [PATCH 1/7] Change the icons on AttendanceChart.jsx

---
 src/components/Dashboard/AttendanceChart.jsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/Dashboard/AttendanceChart.jsx b/src/components/Dashboard/AttendanceChart.jsx
index 7fcc862e..e7915e53 100644
--- a/src/components/Dashboard/AttendanceChart.jsx
+++ b/src/components/Dashboard/AttendanceChart.jsx
@@ -116,14 +116,16 @@ const AttendanceOverview = () => {
                     <button
                         className={`btn btn-sm ${view === "chart" ? "btn-primary" : "btn-outline-primary"}`}
                         onClick={() => setView("chart")}
+                        title="Chart View"
                     >
-                        📊
+                        <i className="bx bx-bar-chart-alt-2"></i>
                     </button>
                     <button
                         className={`btn btn-sm ${view === "table" ? "btn-primary" : "btn-outline-primary"}`}
                         onClick={() => setView("table")}
+                        title="Table View"
                     >
-                        📋
+                        <i className="bx bx-task text-success"></i>
                     </button>
                 </div>
             </div>

From ffa622b203147c34fcb0d5e513544d2fedb66627 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Mon, 11 Aug 2025 15:53:51 +0530
Subject: [PATCH 2/7] Font size and button styling mismatch in Contact Profile
 (Web Directory)

---
 src/components/Directory/NotesDirectory.jsx | 62 +++++++++++++--------
 1 file changed, 39 insertions(+), 23 deletions(-)

diff --git a/src/components/Directory/NotesDirectory.jsx b/src/components/Directory/NotesDirectory.jsx
index cccfd8ef..93326e62 100644
--- a/src/components/Directory/NotesDirectory.jsx
+++ b/src/components/Directory/NotesDirectory.jsx
@@ -128,24 +128,40 @@ const NotesDirectory = ({
                 className="switch switch-primary"
                 style={{
                   visibility:
-                    contactProfile?.notes?.length > 0 ||
-                    contactNotes?.length > 0
+                    contactProfile?.notes?.length > 0 || contactNotes?.length > 0
                       ? "visible"
                       : "hidden",
+                  fontSize: "15px",        // smaller text
                 }}
               >
-              <input
+                <input
                   type="checkbox"
                   className="switch-input"
                   onChange={() => handleSwitch(!IsActive)}
-                  value={IsActive}
+                  checked={IsActive}
+                  style={{
+                    transform: "scale(0.8)", // smaller toggle
+                  }}
                 />
-                <input type="checkbox" className="switch-input" />
-                <span className="switch-toggle-slider">
+                <span
+                  className="switch-toggle-slider"
+                  style={{
+                    width: "30px",    // narrower slider
+                    height: "15px",   // shorter slider
+                  }}
+                >
                   <span className="switch-on"></span>
                   <span className="switch-off"></span>
                 </span>
-                <span className="switch-label">Include Deleted Notes</span>
+                <span
+                  className="switch-label"
+                  style={{
+                    fontSize: "14px", // smaller label text
+                    marginLeft: "-14px"
+                  }}
+                >
+                  Include Deleted Notes
+                </span>
               </label>
 
               {!showEditor && (
@@ -208,23 +224,23 @@ const NotesDirectory = ({
         )}
         {!isLoading && notesToDisplay.length > 0
           ? notesToDisplay
-              .slice()
-              .reverse()
-              .map((noteItem) => (
-                <NoteCardDirectory
-                  refetchProfile={refetchProfile}
-                  refetchNotes={refetch}
-                  refetchContact={refetch}
-                  noteItem={noteItem}
-                  contactId={contactProfile?.id}
-                  setProfileContact={setProfileContact}
-                  key={noteItem.id}
-                />
-              ))
+            .slice()
+            .reverse()
+            .map((noteItem) => (
+              <NoteCardDirectory
+                refetchProfile={refetchProfile}
+                refetchNotes={refetch}
+                refetchContact={refetch}
+                noteItem={noteItem}
+                contactId={contactProfile?.id}
+                setProfileContact={setProfileContact}
+                key={noteItem.id}
+              />
+            ))
           : !isLoading &&
-            !showEditor && (
-              <div className="text-center mt-5">{noNotesMessage}</div>
-            )}
+          !showEditor && (
+            <div className="text-center mt-5">{noNotesMessage}</div>
+          )}
       </div>
     </div>
   );

From 310281db0c4ea0023b96b8e9d49e288e06e0cc5c Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Mon, 11 Aug 2025 14:56:12 +0530
Subject: [PATCH 3/7] Contact list grid columns not displayed when no contact
 is available

---
 src/pages/Directory/Directory.jsx             | 51 +++++++++++--------
 .../Directory/DirectoryListTableHeader.jsx    |  2 +-
 2 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/src/pages/Directory/Directory.jsx b/src/pages/Directory/Directory.jsx
index 8f72ac81..1319da5e 100644
--- a/src/pages/Directory/Directory.jsx
+++ b/src/pages/Directory/Directory.jsx
@@ -38,7 +38,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
   const [IsDeleting, setDeleting] = useState(false);
   const [openBucketModal, setOpenBucketModal] = useState(false);
   const [notes, setNotes] = useState([]);
-    const [filterAppliedNotes, setFilterAppliedNotes] = useState([]);
+  const [filterAppliedNotes, setFilterAppliedNotes] = useState([]);
   // const [selectedOrgs, setSelectedOrgs] = useState([]);
 
   // ✅ Changed to an array for multiple selections
@@ -260,7 +260,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
   }, [prefernceContacts]);
 
   return (
-    <div className={IsPage ? "container-fluid":""}>
+    <div className={IsPage ? "container-fluid" : ""}>
       {IsPage && (
         <Breadcrumb
           data={[
@@ -353,7 +353,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
             setOpenBucketModal={setOpenBucketModal}
             contactsToExport={contacts}
             notesToExport={notes}
-            selectedNoteNames={selectedNoteNames}       
+            selectedNoteNames={selectedNoteNames}
             setSelectedNoteNames={setSelectedNoteNames}
             notesForFilter={notes}
             setFilterAppliedNotes={setFilterAppliedNotes}
@@ -361,23 +361,9 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
         </div>
       </div>
       <div className="card-minHeight mt-0">
-        {(viewType === "card" || viewType === "list" || viewType === "notes") && (
-          <div className="d-flex flex-column justify-content-center align-items-center text-center">
-            {!loading && (viewType === "card" || viewType === "list") && contacts?.length === 0 && (
-              <p className="mt-10">No contact found</p>
-            )}
-            {!loading &&
-              (viewType === "card" || viewType === "list") &&
-              contacts?.length > 0 &&
-              currentItems.length === 0 && (
-                <p className="mt-10">No matching contact found</p>
-              )}
-          </div>
-        )}
-
         {viewType === "list" && (
           <div className="card cursor-pointer mt-5">
-            <div className="card-body p-2 pb-1">
+            <div className="card-body p-2 pb-1" style={{ minHeight: "200px" }}>
               <DirectoryListTableHeader>
                 {!loading &&
                   currentItems.map((contact) => (
@@ -394,12 +380,22 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
                     />
                   ))}
               </DirectoryListTableHeader>
+
+              {/* Empty state AFTER list */}
+              {!loading && contacts?.length === 0 && (
+                <p className="mt-3 ms-3 text-muted" >No contact found</p>
+              )}
+              {!loading &&
+                contacts?.length > 0 &&
+                currentItems.length === 0 && (
+                  <p className="mt-3 ms-3 text-muted">No matching contact found</p>
+                )}
             </div>
           </div>
         )}
 
         {viewType === "card" && (
-          <div className="row mt-4">
+          <div className="row mt-10">
             {!loading &&
               currentItems.map((contact) => (
                 <div
@@ -418,6 +414,16 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
                   />
                 </div>
               ))}
+
+            {/* Empty state for card view */}
+            {!loading && contacts?.length === 0 && (
+              <p className="mt-3 ms-3 text-muted">No contact found</p>
+            )}
+            {!loading &&
+              contacts?.length > 0 &&
+              currentItems.length === 0 && (
+                <p className="mt-3 ms-3 text-muted">No matching contact found</p>
+              )}
           </div>
         )}
 
@@ -428,7 +434,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
               setNotesForFilter={setNotes}
               searchText={searchText}
               setIsOpenModalNote={setIsOpenModalNote}
-             filterAppliedNotes={filterAppliedNotes}
+              filterAppliedNotes={filterAppliedNotes}
             />
           </div>
         )}
@@ -464,7 +470,10 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
                   </li>
                 ))}
 
-                <li className={`page-item ${currentPage === totalPages ? "disabled" : ""}`}>
+                <li
+                  className={`page-item ${currentPage === totalPages ? "disabled" : ""
+                    }`}
+                >
                   <button
                     className="page-link"
                     onClick={() => paginate(currentPage + 1)}
diff --git a/src/pages/Directory/DirectoryListTableHeader.jsx b/src/pages/Directory/DirectoryListTableHeader.jsx
index a2321e9b..5702a6c6 100644
--- a/src/pages/Directory/DirectoryListTableHeader.jsx
+++ b/src/pages/Directory/DirectoryListTableHeader.jsx
@@ -3,7 +3,7 @@ import IconButton from "../../components/common/IconButton";
 
 const DirectoryListTableHeader = ({ children }) => {
   return (
-    <div className="table-responsive text-nowrap py-2">
+     <div className="table-responsive text-nowrap py-2" style={{ minHeight: "80px"}}> 
       <table className="table px-2">
         <thead>
           <tr>

From e9eb378b74945efc1848050774428745bd0f278a Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Mon, 11 Aug 2025 15:01:47 +0530
Subject: [PATCH 4/7] Removing extra space in list view.

---
 src/pages/Directory/Directory.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Directory/Directory.jsx b/src/pages/Directory/Directory.jsx
index 1319da5e..23b01267 100644
--- a/src/pages/Directory/Directory.jsx
+++ b/src/pages/Directory/Directory.jsx
@@ -362,7 +362,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
       </div>
       <div className="card-minHeight mt-0">
         {viewType === "list" && (
-          <div className="card cursor-pointer mt-5">
+          <div className="card cursor-pointer mt-3">
             <div className="card-body p-2 pb-1" style={{ minHeight: "200px" }}>
               <DirectoryListTableHeader>
                 {!loading &&

From 3d2c057428333435d892974f3107fdb733baf986 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 5/7] 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:{" "}

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 6/7] 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>

From 426c9c07e230448011be1e00d8715e7145d9435b Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Wed, 6 Aug 2025 15:30:46 +0530
Subject: [PATCH 7/7] In Masters cancel button now cancel or close the form as
 excepted.

---
 src/components/master/EditActivity.jsx        | 2 +-
 src/components/master/EditContactCategory.jsx | 2 +-
 src/components/master/EditContactTag.jsx      | 2 +-
 src/components/master/EditJobRole.jsx         | 2 +-
 src/components/master/EditRole.jsx            | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/master/EditActivity.jsx b/src/components/master/EditActivity.jsx
index cba8dad5..61fcccf0 100644
--- a/src/components/master/EditActivity.jsx
+++ b/src/components/master/EditActivity.jsx
@@ -241,7 +241,7 @@ useEffect(() => {
             {isLoading ? "Please Wait" : "Submit"}
           </button>
           <button
-            type="reset"
+            type="button"
             className="btn btn-sm btn-label-secondary"
             onClick={onClose}
           >
diff --git a/src/components/master/EditContactCategory.jsx b/src/components/master/EditContactCategory.jsx
index f8a403ae..5723eede 100644
--- a/src/components/master/EditContactCategory.jsx
+++ b/src/components/master/EditContactCategory.jsx
@@ -116,7 +116,7 @@ useEffect(() => {
          {isLoading? "Please Wait...":"Submit"}       
         </button>
         <button
-          type="reset"
+          type="button"
           className="btn btn-sm btn-label-secondary "
           data-bs-dismiss="modal"
           aria-label="Close"
diff --git a/src/components/master/EditContactTag.jsx b/src/components/master/EditContactTag.jsx
index 70ab0794..9b3783ba 100644
--- a/src/components/master/EditContactTag.jsx
+++ b/src/components/master/EditContactTag.jsx
@@ -116,7 +116,7 @@ useEffect(() => {
          {isLoading? "Please Wait...":"Submit"}       
         </button>
         <button
-          type="reset"
+          type="button"
           className="btn btn-sm btn-label-secondary "
           data-bs-dismiss="modal"
           aria-label="Close"
diff --git a/src/components/master/EditJobRole.jsx b/src/components/master/EditJobRole.jsx
index c10cd457..63c3a7c6 100644
--- a/src/components/master/EditJobRole.jsx
+++ b/src/components/master/EditJobRole.jsx
@@ -132,7 +132,7 @@ const [descriptionLength, setDescriptionLength] = useState(data?.description?.le
          {isLoading? "Please Wait...":"Submit"}       
         </button>
         <button
-          type="reset"
+          type="button"
           className="btn btn-sm btn-label-secondary"
           data-bs-dismiss="modal"
           aria-label="Close"
diff --git a/src/components/master/EditRole.jsx b/src/components/master/EditRole.jsx
index 9e377048..9d40a10c 100644
--- a/src/components/master/EditRole.jsx
+++ b/src/components/master/EditRole.jsx
@@ -278,7 +278,7 @@ const EditMaster = ({ master, onClose }) => {
       <div className="col-12 text-center">
         <button type="submit" className="btn btn-sm btn-primary me-3"> {isLoading ? "Please Wait..." : "Submit"}</button>
         <button
-          type="reset"
+          type="button"
           className="btn btn-sm btn-label-secondary"
           data-bs-dismiss="modal"
           aria-label="Close"