From 43ed77cfc672853899b3bfabcf80a62d0c393969 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Wed, 30 Jul 2025 16:56:27 +0530
Subject: [PATCH 01/13] Deleted Employee Still Visible Until Manual Refresh.

---
 src/hooks/useEmployees.js | 78 ++++++++++++++++++++++++++++-----------
 1 file changed, 57 insertions(+), 21 deletions(-)

diff --git a/src/hooks/useEmployees.js b/src/hooks/useEmployees.js
index 30e41256..d968cc48 100644
--- a/src/hooks/useEmployees.js
+++ b/src/hooks/useEmployees.js
@@ -211,31 +211,70 @@ export const useUpdateEmployee = () =>
 
 
 
-export const useSuspendEmployee = ({ setIsDeleteModalOpen, setemployeeLodaing }) => {
-  const queryClient = useQueryClient();
- const selectedProject = useSelector((store)=>store.localVariables.projectId)
-  return useMutation({
-    mutationFn: (id) => {
-      setemployeeLodaing(true);
-      return EmployeeRepository.deleteEmployee(id);
-    },
+// export const useSuspendEmployee = ({ setIsDeleteModalOpen, setemployeeLodaing }) => {
+//   const queryClient = useQueryClient();
+//  const selectedProject = useSelector((store)=>store.localVariables.projectId)
+//   return useMutation({
+//     mutationFn: (id) => {
+//       setemployeeLodaing(true);
+//       return EmployeeRepository.deleteEmployee(id);
+//     },
 
-    onSuccess: () => {
+//     onSuccess: () => {
   
 
-      // queryClient.invalidateQueries( ['allEmployee',false]);
-      queryClient.invalidateQueries( {queryKey: [ 'projectEmployees' ]} );
-      queryClient.invalidateQueries( {queryKey:[ 'employeeListByProject' ,selectedProject]} );
-          showToast("Employee deleted successfully.", "success");
+//       // queryClient.invalidateQueries( ['allEmployee',false]);
+//       queryClient.invalidateQueries( {queryKey: [ 'projectEmployees' ]} );
+//       queryClient.invalidateQueries( {queryKey:[ 'employeeListByProject' ,selectedProject]} );
+//           showToast("Employee deleted successfully.", "success");
+//       setIsDeleteModalOpen(false);
+//     },
+
+//     onError: (error) => {
+//       const message =
+//         error.response?.data?.message ||
+//         error.message ||
+//         "An unexpected error occurred";
+//       showToast(message, "error");
+//       setIsDeleteModalOpen(false);
+//     },
+
+//     onSettled: () => {
+//       setemployeeLodaing(false);
+//     },
+//   });
+// };
+
+// Manage Role
+
+export const useSuspendEmployee = ({ setIsDeleteModalOpen, setemployeeLodaing }) => {
+  const queryClient = useQueryClient();
+  const selectedProjectId = useSelector((store) => store.localVariables.projectId);
+
+  return useMutation({
+    mutationFn: async (employeeId) => {
+      setemployeeLodaing(true);
+      return await EmployeeRepository.deleteEmployee(employeeId);
+    },
+
+    onSuccess: (_, employeeId) => {
+      showToast("Employee suspended successfully.", "success");
       setIsDeleteModalOpen(false);
+
+      // Invalidate only the required employee-related queries
+      queryClient.invalidateQueries({ queryKey: ["employee", employeeId] });
+      queryClient.invalidateQueries({ queryKey: ["allEmployees"] });
+
+      if (selectedProjectId) {
+        queryClient.invalidateQueries({ queryKey: ["projectEmployees", selectedProjectId] });
+      }
     },
 
     onError: (error) => {
-      const message =
-        error.response?.data?.message ||
-        error.message ||
-        "An unexpected error occurred";
-      showToast(message, "error");
+      showToast(
+        error.response?.data?.message || error.message || "An unexpected error occurred",
+        "error"
+      );
       setIsDeleteModalOpen(false);
     },
 
@@ -245,9 +284,6 @@ export const useSuspendEmployee = ({ setIsDeleteModalOpen, setemployeeLodaing })
   });
 };
 
-// Manage Role
-
-
 export const useUpdateEmployeeRoles = ({ onClose, resetForm, onSuccessCallback } = {}) => {
   const queryClient = useQueryClient();
   const mutation = useMutation({

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 02/13] 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 03/13] 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 04/13] 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 05/13] 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 06/13] 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 07/13] 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 08/13] 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"

From cbfce2e4e2c283eafa19afddf9af99175fd557a4 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Thu, 14 Aug 2025 11:10:25 +0530
Subject: [PATCH 09/13] =?UTF-8?q?UI=20Enhancement=20Request=20=E2=80=93=20?=
 =?UTF-8?q?Highlight=20Key=20Employee=20Profile=20Information?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Employee/EmpDashboard.jsx |  98 ++++-----
 src/components/Employee/EmpOverview.jsx  | 246 ++++++++++++++---------
 2 files changed, 199 insertions(+), 145 deletions(-)

diff --git a/src/components/Employee/EmpDashboard.jsx b/src/components/Employee/EmpDashboard.jsx
index 8f029443..b25f6803 100644
--- a/src/components/Employee/EmpDashboard.jsx
+++ b/src/components/Employee/EmpDashboard.jsx
@@ -20,58 +20,58 @@ const EmpDashboard = ({ profile }) => {
         <div className="col col-sm-6 pt-5">
           <div className="card ">
             <div className="card-body">
-              <small className="card-text text-uppercase text-body-secondary small">
+              <small className="card-text text-uppercase text-body-secondary small text-start d-block">
                 My Projects
-              </small>{" "}
+              </small>
               <ul className="list-unstyled text-start my-3 py-1">
-  {selectedProjectLoding && <span>Loading</span>}
-  {projectList.map((project) => (
-    <li
-      className="d-flex mb-4 align-items-start flex-wrap"
-      key={project.id}
-    >
-      {/* Project Info */}
-      <div className="flex-grow-1">
-        <div className="d-flex flex-wrap align-items-center justify-content-between gap-2">
-          <div className="d-flex">
-            <div className="avatar flex-shrink-0 me-3">
-              <span className="avatar-initial rounded bg-label-primary">
-                <i className="icon-base bx bx-buildings icon-lg"></i>
-              </span>
-            </div>
-            <div>
-              <h6 className="mb-0">{project.projectShortName}</h6>
-              <small className="text-muted">{project.projectName}</small>
-              <div className="label-secondary">
-                Assigned:{" "}
-                {project.assignedDate ? (
-                  new Date(project.assignedDate).toLocaleDateString()
-                ) : (
-                  <em>NA</em>
-                )}
-              </div>
-            </div>
-          </div>
-          <div>
-            <span className="badge bg-label-secondary">
-              {project.designation}
-            </span>
-          </div>
-        </div>
+                {selectedProjectLoding && <span>Loading</span>}
+                {projectList.map((project) => (
+                  <li
+                    className="d-flex mb-4 align-items-start flex-wrap"
+                    key={project.id}
+                  >
+                    {/* Project Info */}
+                    <div className="flex-grow-1">
+                      <div className="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                        <div className="d-flex">
+                          <div className="avatar flex-shrink-0 me-3">
+                            <span className="avatar-initial rounded bg-label-primary">
+                              <i className="icon-base bx bx-buildings icon-lg"></i>
+                            </span>
+                          </div>
+                          <div>
+                            <h6 className="mb-0">{project.projectShortName}</h6>
+                            <small className="text-muted">{project.projectName}</small>
+                            <div className="label-secondary">
+                              Assigned:{" "}
+                              {project.assignedDate ? (
+                                new Date(project.assignedDate).toLocaleDateString()
+                              ) : (
+                                <em>NA</em>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                        <div>
+                          <span className="badge bg-label-secondary">
+                            {project.designation}
+                          </span>
+                        </div>
+                      </div>
 
-        {/* Dates */}
-        {project.removedDate && (
-          <div className="mt-2 d-flex flex-column flex-sm-row justify-content-between">
-            <div className="label-secondary">
-              Unassigned:{" "}
-              {new Date(project.removedDate).toLocaleDateString()}
-            </div>
-          </div>
-        )}
-      </div>
-    </li>
-  ))}
-</ul>
+                      {/* Dates */}
+                      {project.removedDate && (
+                        <div className="mt-2 d-flex flex-column flex-sm-row justify-content-between">
+                          <div className="label-secondary">
+                            Unassigned:{" "}
+                            {new Date(project.removedDate).toLocaleDateString()}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </li>
+                ))}
+              </ul>
 
             </div>
           </div>
diff --git a/src/components/Employee/EmpOverview.jsx b/src/components/Employee/EmpOverview.jsx
index 467a2a58..6b396745 100644
--- a/src/components/Employee/EmpOverview.jsx
+++ b/src/components/Employee/EmpOverview.jsx
@@ -1,109 +1,163 @@
 import React from "react";
-import Avatar from "../common/Avatar";
 import { useProfile } from "../../hooks/useProfile";
 
 const EmpOverview = ({ profile }) => {
   const { loggedInUserProfile } = useProfile();
+
   return (
-    <>
-      {" "}
-      <div className="row">
-        <div className="col-12 mb-4">
-          <div className="card">
-            <div className="card-body">
-              <small className="card-text text-uppercase text-body-secondary small">
-                About
-              </small>
-              <ul className="list-unstyled my-3 py-1">
-                <li className="d-flex align-items-center mb-4">
-                  <i className="icon-base bx bx-user"></i>
-                  <span className="fw-medium mx-2">Full Name:</span>{" "}
-                  <span>{`${profile?.firstName} ${profile?.lastName}`}</span>
-                </li>
-                <li className="d-flex align-items-center mb-4">
-                  <i className="icon-base bx bx-check"></i>
-                  <span className="fw-medium mx-2">Status:</span>{" "}
-                  <span>Active</span>
-                </li>
-                <li className="d-flex align-items-center mb-4">
-                  <i className="icon-base bx bx-crown"></i>
-                  <span className="fw-medium mx-2">Role:</span>{" "}
-                  <span> {profile?.jobRole || <em>NA</em>}</span>
-                </li>
-                <li className="d-flex align-items-center mb-4">
-                  <i className="icon-base bx bx-flag"></i>
-                  <span className="fw-medium mx-2">Gender:</span>{" "}
-                  <span> {profile?.gender || <em>NA</em>}</span>
-                </li>{" "}
-                <li className="d-flex align-items-center mb-2">
-                  <i className="icon-base bx bx-calendar "></i>
-                  <span className="fw-medium mx-2">Birth Date:</span>{" "}
-                  <span>
-                    {profile?.birthDate ? (
-                      new Date(profile.birthDate).toLocaleDateString()
-                    ) : (
-                      <em>NA</em>
-                    )}
-                  </span>
-                </li>
-                <li className="d-flex align-items-center mb-2">
-                  <i className="icon-base bx bx-calendar "></i>
-                  <span className="fw-medium mx-2">Joining Date:</span>{" "}
-                  <span>
-                    {profile?.joiningDate ? (
-                      new Date(profile.joiningDate).toLocaleDateString()
-                    ) : (
-                      <em>NA</em>
-                    )}
-                  </span>
-                </li>
-              </ul>
-              <small className="card-text text-uppercase text-body-secondary small">
-                Contacts
-              </small>
-              <ul className="list-unstyled my-3 py-1">
-                <li className="d-flex align-items-center mb-4">
-                  <i className="icon-base bx bx-phone"></i>
-                  <span className="fw-medium mx-2">Contact:</span>{" "}
-                  <span> {profile?.phoneNumber || <em>NA</em>}</span>
-                </li>
-                <li className="d-flex align-items-center mb-4">
-                  <i className="icon-base bx bx-envelope"></i>
-                  <span className="fw-medium mx-2">Email:</span>{" "}
-                  <a href={`mailto:${profile?.email}`}>
-                    {" "}
-                    {profile?.email || <em>NA</em>}
-                  </a>
-                </li>
-                <li className="d-flex align-items-center mb-4">
-                  <i className="icon-base bx bx-user"></i>
-                  <span className="fw-medium mx-2">
-                    {" "}
-                    Emergency Contact:
-                  </span>{" "}
-                  <span> {profile?.emergencyContactPerson || <em>NA</em>}</span>
-                </li>
-                <li className="d-flex align-items-center mb-4">
-                  <i className="icon-base bx bx-phone"></i>
-                  <span className="fw-medium mx-2"> Emergency Phone:</span>{" "}
-                  <span> {profile?.emergencyPhoneNumber || <em>NA</em>}</span>
-                </li>
-                <li className="d-flex align-items-center ">
-                  <div className="container p-0">
-                    <div className="fw-medium text-start">
-                      <i className="icon-base bx bx-map "></i> Address:
-                    </div>
-                    <div className="text-start ms-7">
-                      {profile?.currentAddress || <em>NA</em>}
-                    </div>
-                  </div>
-                </li>
-              </ul>
+    <div className="row">
+      <div className="col-12 mb-4">
+        <div className="card">
+          <div className="card-body">
+
+            {/* About Heading */}
+            <small className="card-text text-uppercase text-body-secondary small d-block text-start mb-3">
+              About
+            </small>
+
+            {/* Full Name */}
+            <div className="d-flex align-items-start mb-3">
+              <span className="d-flex">
+                <i className="bx bx-user bx-xs me-2 mt-1"></i>
+                <span>Full Name</span>
+              </span>
+              <span style={{ marginLeft: "74px" }}>:</span>
+              <span className="ms-5">
+                {profile?.firstName || <em>NA</em>} {profile?.lastName || ""}
+              </span>
             </div>
+
+            {/* Status */}
+            <div className="d-flex align-items-start mb-3">
+              <span className="d-flex">
+                <i className="bx bx-check bx-xs me-2 mt-1"></i>
+                <span>Status</span>
+              </span>
+              <span style={{ marginLeft: "96px" }}>:</span>
+              <span className="ms-5">Active</span>
+            </div>
+
+            {/* Role */}
+            <div className="d-flex align-items-start mb-3">
+              <span className="d-flex">
+                <i className="bx bx-crown bx-xs me-2 mt-1"></i>
+                <span>Role</span>
+              </span>
+              <span style={{ marginLeft: "110px" }}>:</span>
+              <span className="ms-5">{profile?.jobRole || <em>NA</em>}</span>
+            </div>
+
+            {/* Gender */}
+            <div className="d-flex align-items-start mb-3">
+              <span className="d-flex">
+                <i className="bx bx-flag bx-xs me-2 mt-1"></i>
+                <span>Gender</span>
+              </span>
+              <span style={{ marginLeft: "91px" }}>:</span>
+              <span className="ms-5">{profile?.gender || <em>NA</em>}</span>
+            </div>
+
+            {/* Birth Date */}
+            <div className="d-flex align-items-start mb-3">
+              <span className="d-flex">
+                <i className="bx bx-calendar bx-xs me-2 mt-1"></i>
+                <span>Birth Date</span>
+              </span>
+              <span style={{ marginLeft: "74px" }}>:</span>
+              <span className="ms-5">
+                {profile?.birthDate
+                  ? new Date(profile.birthDate).toLocaleDateString()
+                  : <em>NA</em>}
+              </span>
+            </div>
+
+            {/* Joining Date */}
+            <div className="d-flex align-items-start mb-3">
+              <span className="d-flex">
+                <i className="bx bx-calendar bx-xs me-2 mt-1"></i>
+                <span>Joining Date</span>
+              </span>
+              <span style={{ marginLeft: "60px" }}>:</span>
+              <span className="ms-5">
+                {profile?.joiningDate
+                  ? new Date(profile.joiningDate).toLocaleDateString()
+                  : <em>NA</em>}
+              </span>
+            </div>
+
+            {/* Contacts Heading */}
+            <small className="card-text text-uppercase text-body-secondary small d-block text-start mb-3 mt-4">
+              Contacts
+            </small>
+
+            {/* Contact Number */}
+            <div className="d-flex align-items-start mb-3">
+              <span className="d-flex">
+                <i className="bx bx-phone bx-xs me-2 mt-1"></i>
+                <span>Contact</span>
+              </span>
+              <span style={{ marginLeft: "87px" }}>:</span>
+              <span className="ms-5">{profile?.phoneNumber || <em>NA</em>}</span>
+            </div>
+
+            {/* Email */}
+            <div className="d-flex align-items-start mb-3">
+              <span className="d-flex" style={{ minWidth: "160px", whiteSpace: "nowrap" }}>
+                <i className="bx bx-envelope bx-xs me-2 mt-1"></i>
+                <span>Email</span>
+              </span>
+              <span className="me-5">:</span>
+              <span>
+                {profile?.email ? (
+                  <a href={`mailto:${profile.email}`}>{profile.email}</a>
+                ) : (
+                  <em>NA</em>
+                )}
+              </span>
+            </div>
+
+
+            {/* Emergency Contact */}
+            <div className="d-flex align-items-start mb-3">
+              <span className="d-flex">
+                <i className="bx bx-user bx-xs me-2 mt-1"></i>
+                <span>Emergency Contact</span>
+              </span>
+              <span style={{ marginLeft: "14px" }}>:</span>
+              <span className="ms-5">
+                {profile?.emergencyContactPerson || <em>NA</em>}
+              </span>
+            </div>
+
+            {/* Emergency Phone */}
+            <div className="d-flex align-items-start mb-3">
+              <span className="d-flex">
+                <i className="bx bx-phone bx-xs me-2 mt-1"></i>
+                <span>Emergency Phone</span>
+              </span>
+              <span style={{ marginLeft: "25px" }}>:</span>
+              <span className="ms-5">
+                {profile?.emergencyPhoneNumber || <em>NA</em>}
+              </span>
+            </div>
+
+            {/* Address */}
+            <div className="d-flex align-items-start">
+              <span className="d-flex">
+                <i className="bx bx-map bx-xs me-2 mt-1"></i>
+                <span>Address</span>
+              </span>
+              <span style={{ marginLeft: "86px" }}>:</span>
+              <span className="ms-5">
+                {profile?.currentAddress || <em>NA</em>}
+              </span>
+            </div>
+
           </div>
         </div>
       </div>
-    </>
+    </div>
   );
 };
+
 export default EmpOverview;

From 841ffdf133c1b446a42ad59dad31e20aca2ad6a0 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Thu, 14 Aug 2025 12:46:14 +0530
Subject: [PATCH 10/13] Unnecessary Calendar Icon Displayed in Attandance
 Employee Profile Page

---
 src/components/common/DateRangePicker.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/common/DateRangePicker.jsx b/src/components/common/DateRangePicker.jsx
index ce89b5e1..52d79e73 100644
--- a/src/components/common/DateRangePicker.jsx
+++ b/src/components/common/DateRangePicker.jsx
@@ -47,18 +47,18 @@ const DateRangePicker = ({
   }, [onRangeChange, DateDifference, endDateMode]);
 
   return (
-    <div className={`col-${sm} col-sm-${md} px-1 position-relative`}>
+    <div className={`col-${sm} col-sm-${md} px-1`}>
       <input
         type="text"
-        className="form-control form-control-sm ps-2 pe-5  me-4"
+        className="form-control form-control-sm ps-2 pe-5 me-4"
         placeholder="From to End"
         id="flatpickr-range"
         ref={inputRef}
       />
 
       <i
-        className="bx bx-calendar calendar-icon cursor-pointer position-absolute top-50  translate-middle-y "
-        style={{ right: "12px" }}
+        className="bx bx-calendar calendar-icon cursor-pointer position-relative top-50  translate-middle-y "
+        style={{ right: "22px", bottom: "-8px" }}
       ></i>
     </div>
   );

From 051fc3903dab89a354cd7ce86ad7a3b579ee767a Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Thu, 14 Aug 2025 13:42:10 +0530
Subject: [PATCH 11/13] Special Characters Shoulsd not Allowed in Name Fields

---
 src/components/Employee/ManageEmployee.jsx | 135 ++++++++++++---------
 1 file changed, 75 insertions(+), 60 deletions(-)

diff --git a/src/components/Employee/ManageEmployee.jsx b/src/components/Employee/ManageEmployee.jsx
index 1f1b3a62..2e52f29c 100644
--- a/src/components/Employee/ManageEmployee.jsx
+++ b/src/components/Employee/ManageEmployee.jsx
@@ -16,13 +16,13 @@ import {
   getCachedData,
 } from "../../slices/apiDataManager";
 import { clearApiCacheKey } from "../../slices/apiCacheSlice";
-import {useMutation} from "@tanstack/react-query";
+import { useMutation } from "@tanstack/react-query";
 
 const mobileNumberRegex = /^[0-9]\d{9}$/;
 
-const ManageEmployee = ({ employeeId, onClosed,IsAllEmployee }) => {
+const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
   const dispatch = useDispatch();
-const { mutate: updateEmployee, isPending } = useUpdateEmployee();
+  const { mutate: updateEmployee, isPending } = useUpdateEmployee();
 
   const {
     employee,
@@ -130,12 +130,11 @@ const { mutate: updateEmployee, isPending } = useUpdateEmployee();
       .min(1, { message: "Phone Number is required" })
       .regex(mobileNumberRegex, { message: "Invalid phone number " }),
     jobRoleId: z.string().min(1, { message: "Role is required" }),
-  } );
-  
-  useEffect( () =>
-  {
+  });
+
+  useEffect(() => {
     refetch()
-  },[])
+  }, [])
 
   const {
     register,
@@ -169,19 +168,19 @@ const { mutate: updateEmployee, isPending } = useUpdateEmployee();
   });
 
   const AadharNumberValue = watch("aadharNumber") || "";
- 
- const onSubmit = (data) => {
-  if (data.email === "") {
-    data.email = null;
-   }
 
-  updateEmployee({...data,IsAllEmployee},{
-    onSuccess: () => {
-      reset();
-      onClosed();
-    },
-  });
-};
+  const onSubmit = (data) => {
+    if (data.email === "") {
+      data.email = null;
+    }
+
+    updateEmployee({ ...data, IsAllEmployee }, {
+      onSuccess: () => {
+        reset();
+        onClosed();
+      },
+    });
+  };
 
 
   useEffect(() => {
@@ -212,7 +211,7 @@ const { mutate: updateEmployee, isPending } = useUpdateEmployee();
           phoneNumber: currentEmployee.phoneNumber || "",
           jobRoleId: currentEmployee.jobRoleId?.toString() || "",
         }
-        : {} 
+        : {}
     );
     setCurrentAddressLength(currentEmployee?.currentAddress?.length || 0);
     setPermanentAddressLength(currentEmployee?.permanentAddress?.length || 0);
@@ -220,66 +219,82 @@ const { mutate: updateEmployee, isPending } = useUpdateEmployee();
 
   return (
     <>
-      <form onSubmit={handleSubmit( onSubmit )} className="p-sm-0 p-2">
+      <form onSubmit={handleSubmit(onSubmit)} className="p-sm-0 p-2">
         <div className="text-center"><p className="fs-6 fw-semibold"> {employee ? "Update Employee" : "Create Employee"}</p> </div>
-                <div className="row mb-3">
-                  <div className="col-sm-4">
-                    {" "}
-                    <div className="form-text text-start">First Name</div>
-                    <input
-                      type="text"
-                      name="FirstName"
-                      {...register("firstName")}
-                      className="form-control form-control-sm"
-                      id="firstName"
-                      placeholder="First Name"
-                    />
-                    {errors.firstName && (
-                      <div
-                        className="danger-text text-start"
-                        style={{ fontSize: "12px" }}
-                      >
-                        {errors.firstName.message}
-                      </div>
-                    )}
-                  </div>{" "}
-                  <div className="col-sm-4">
-                    <div className="form-text text-start">Middle Name</div>
-
+        <div className="row mb-3">
+          <div className="col-sm-4">
+            <div className="form-text text-start">First Name</div>
             <input
               type="text"
-              {...register("middleName")}
+              name="firstName"
+              {...register("firstName", {
+                required: "First name is required",
+                pattern: {
+                  value: /^[A-Za-z\s]+$/, // Only letters and spaces
+                  message: "Only letters are allowed",
+                },
+              })}
               className="form-control form-control-sm"
-              id="middleName"
-              placeholder="Middle Name"
+              id="firstName"
+              placeholder="First Name"
+              onInput={(e) => {
+                e.target.value = e.target.value.replace(/[^A-Za-z\s]/g, "");
+              }}
             />
-            {errors.middleName && (
-              <div
-                className="danger-text text-start "
-                style={{ fontSize: "12px" }}
-              >
-                {errors.middleName.message}
+            {errors.firstName && (
+              <div className="danger-text text-start" style={{ fontSize: "12px" }}>
+                {errors.firstName.message}
               </div>
             )}
           </div>
+          <div className="col-sm-4">
+            <div className="form-text text-start">Middle Name</div>
+            <input
+              type="text"
+              {...register("middleName", {
+                pattern: {
+                  value: /^[A-Za-z\s]+$/, // Only letters and spaces
+                  message: "Only letters are allowed",
+                },
+              })}
+              className="form-control form-control-sm"
+              id="middleName"
+              placeholder="Middle Name"
+              onInput={(e) => {
+                e.target.value = e.target.value.replace(/[^A-Za-z\s]/g, "");
+              }}
+            />
+            {errors.middleName && (
+              <div className="danger-text text-start " style={{ fontSize: "12px" }}>
+                {errors.middleName.message}
+              </div>
+            )}
+          </div>
+
           <div className="col-sm-4">
             <div className="form-text text-start">Last Name</div>
             <input
               type="text"
-              {...register("lastName")}
+              {...register("lastName", {
+                pattern: {
+                  value: /^[A-Za-z\s]+$/, // Only letters and spaces
+                  message: "Only letters are allowed",
+                },
+              })}
               className="form-control form-control-sm"
               id="lastName"
               placeholder="Last Name"
+              onInput={(e) => {
+                e.target.value = e.target.value.replace(/[^A-Za-z\s]/g, "");
+              }}
             />
             {errors.lastName && (
-              <div
-                className="danger-text text-start"
-                style={{ fontSize: "12px" }}
-              >
+              <div className="danger-text text-start" style={{ fontSize: "12px" }}>
                 {errors.lastName.message}
               </div>
             )}
           </div>
+
         </div>
         <div className="row mb-3">
           <div className="col-sm-6">

From dd0c7e95bfdd08b67373f276f3b6f351bea034cc Mon Sep 17 00:00:00 2001
From: Vikas Nale <vikas@marcoaiot.com>
Date: Sat, 16 Aug 2025 12:59:07 +0530
Subject: [PATCH 12/13] change table header Official Designation to Designation

---
 src/pages/employee/EmployeeList.jsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/pages/employee/EmployeeList.jsx b/src/pages/employee/EmployeeList.jsx
index 86af49a9..ad54ce20 100644
--- a/src/pages/employee/EmployeeList.jsx
+++ b/src/pages/employee/EmployeeList.jsx
@@ -479,9 +479,7 @@ const EmployeeList = () => {
                         aria-label="User: activate to sort column ascending"
                         aria-sort="descending"
                       >
-                        <div className="text-start ms-5">
-                          Official Designation
-                        </div>
+                        <div className="text-start ms-5">Designation</div>
                       </th>
 
                       <th

From 1e9db471441d468983ba894392fa50ba8f53220d Mon Sep 17 00:00:00 2001
From: Vikas Nale <vikas@marcoaiot.com>
Date: Sat, 16 Aug 2025 13:34:54 +0530
Subject: [PATCH 13/13] missing changes from PR : Add Search Bar in Assigned
 Employee Popup under Project > Teams #324
 https://git.marcoaiot.com/admin/marco.pms.web/pulls/324

---
 src/components/Project/Teams.jsx | 400 ++++++++++++++++++-------------
 1 file changed, 229 insertions(+), 171 deletions(-)

diff --git a/src/components/Project/Teams.jsx b/src/components/Project/Teams.jsx
index 10618458..cb725e30 100644
--- a/src/components/Project/Teams.jsx
+++ b/src/components/Project/Teams.jsx
@@ -14,11 +14,13 @@ import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { ASSIGN_TO_PROJECT } from "../../utils/constants";
 import ConfirmModal from "../common/ConfirmModal";
 import eventBus from "../../services/eventBus";
-import {useEmployeesByProjectAllocated, useManageProjectAllocation} from "../../hooks/useProjects";
+import {
+  useEmployeesByProjectAllocated,
+  useManageProjectAllocation,
+} from "../../hooks/useProjects";
 import { useSelectedproject } from "../../slices/apiDataManager";
 
-const Teams = () =>
-{
+const Teams = () => {
   // const {projectId} = useParams()
   // const projectId = useSelector((store)=>store.localVariables.projectId)
   const projectId = useSelectedproject();
@@ -32,68 +34,72 @@ const Teams = () =>
   const [filteredEmployees, setFilteredEmployees] = useState([]);
   const [removingEmployeeId, setRemovingEmployeeId] = useState(null);
   const [assignedLoading, setAssignedLoading] = useState(false);
-  const [ activeEmployee, setActiveEmployee ] = useState( true )
-  const [deleteEmployee,setDeleteEmplyee] = useState(null)
+  const [activeEmployee, setActiveEmployee] = useState(true);
+  const [deleteEmployee, setDeleteEmplyee] = useState(null);
+  const [searchTerm, setSearchTerm] = useState(""); // State for search term
 
   const navigate = useNavigate();
 
-  const HasAssignUserPermission = useHasUserPermission( ASSIGN_TO_PROJECT );
-  const [ IsDeleteModal, setIsDeleteModal ] = useState( false )
-  const {projectEmployees, loading:employeeLodaing,  refetch} = useEmployeesByProjectAllocated( projectId )
-const {
-  mutate: submitAllocations,
-  isPending,
-  isSuccess,
-  isError,
-} = useManageProjectAllocation({
-  onSuccessCallback: () => {
-    setRemovingEmployeeId(null);
-    setAssignedLoading(false);
-    setDeleteEmplyee(null);
-    closeDeleteModal();
-  },
-  onErrorCallback: () => {
-    closeDeleteModal();
-  },
-});
-
-
- 
-  const removeAllocation = (item) => {
-  setRemovingEmployeeId(item.id);
-
-  submitAllocations({
-    items: [
-      {
-        empID: item.employeeId,
-        jobRoleId: item.jobRoleId,
-        projectId: projectId,
-        status: false,
-      },
-    ],
-    added: false,
+  const HasAssignUserPermission = useHasUserPermission(ASSIGN_TO_PROJECT);
+  const [IsDeleteModal, setIsDeleteModal] = useState(false);
+  const {
+    projectEmployees,
+    loading: employeeLodaing,
+    refetch,
+  } = useEmployeesByProjectAllocated(projectId);
+  const {
+    mutate: submitAllocations,
+    isPending,
+    isSuccess,
+    isError,
+  } = useManageProjectAllocation({
+    onSuccessCallback: () => {
+      setRemovingEmployeeId(null);
+      setAssignedLoading(false);
+      setDeleteEmplyee(null);
+      closeDeleteModal();
+    },
+    onErrorCallback: () => {
+      closeDeleteModal();
+    },
   });
-};
+
+  const removeAllocation = (item) => {
+    setRemovingEmployeeId(item.id);
+
+    submitAllocations({
+      items: [
+        {
+          empID: item.employeeId,
+          jobRoleId: item.jobRoleId,
+          projectId: projectId,
+          status: false,
+        },
+      ],
+      added: false,
+    });
+  };
 
   const handleEmpAlicationFormSubmit = (allocaionObj) => {
-  let items = allocaionObj.map((item) => {
-    return {
-      empID: item.empID,
-      jobRoleId: item.jobRoleId,
-      projectId: projectId,
-      status: true,
-    };
-  });
+    let items = allocaionObj.map((item) => {
+      return {
+        empID: item.empID,
+        jobRoleId: item.jobRoleId,
+        projectId: projectId,
+        status: true,
+      };
+    });
 
     submitAllocations({ items, added: true });
 
-  setActiveEmployee(true);
-  setFilteredEmployees(employees.filter((emp) => emp.isActive));
-
-  const dropdown = document.querySelector('select[name="DataTables_Table_0_length"]');
-  if (dropdown) dropdown.value = "true";
-};
+    setActiveEmployee(true);
+    setFilteredEmployees(employees.filter((emp) => emp.isActive));
 
+    const dropdown = document.querySelector(
+      'select[name="DataTables_Table_0_length"]'
+    );
+    if (dropdown) dropdown.value = "true";
+  };
 
   const getRole = (jobRoleId) => {
     if (loading) return "Loading...";
@@ -124,17 +130,17 @@ const {
   };
 
   useEffect(() => {
-  dispatch(changeMaster("Job Role"));
-}, [dispatch]);
-
+    dispatch(changeMaster("Job Role"));
+  }, [dispatch]);
 
   useEffect(() => {
-    if ( projectEmployees )
-    {
+    if (projectEmployees) {
       setEmployees(projectEmployees);
-       setFilteredEmployees( projectEmployees?.filter( ( emp ) => emp.isActive ) );
+      //setFilteredEmployees(projectEmployees?.filter((emp) => emp.isActive));
+      const filtered = projectEmployees.filter((emp) => emp.isActive);
+      setFilteredEmployees(filtered);
     }
-  }, [projectEmployees,employeeLodaing]);
+  }, [projectEmployees, employeeLodaing]);
 
   useEffect(() => {
     if (data) {
@@ -142,24 +148,57 @@ const {
     }
   }, [data]);
 
+  const filterAndSearchEmployees = useCallback(() => {
+    const statusFiltered = employees.filter((emp) =>
+      activeEmployee ? emp.isActive : !emp.isActive
+    );
+
+    if (searchTerm === "") {
+      setFilteredEmployees(statusFiltered);
+      return;
+    }
+
+    const lowercasedSearchTerm = searchTerm.toLowerCase();
+    const searchedAndFiltered = statusFiltered.filter((item) => {
+      const fullName =
+        `${item.firstName} ${item.middleName} ${item.lastName}`.toLowerCase();
+      const roleName = getRole(item.jobRoleId).toLowerCase();
+
+      return (
+        fullName.includes(lowercasedSearchTerm) ||
+        roleName.includes(lowercasedSearchTerm)
+      );
+    });
+
+    setFilteredEmployees(searchedAndFiltered);
+  }, [employees, activeEmployee, searchTerm, getRole]);
+
+  useEffect(() => {
+    filterAndSearchEmployees();
+  }, [employees, activeEmployee, searchTerm, filterAndSearchEmployees]);
+
   const handleFilterEmployee = (e) => {
     const filterValue = e.target.value;
-    if ( filterValue === "true" )
-    {
-      setActiveEmployee(true)
-      setFilteredEmployees(employees.filter((emp) => emp.isActive));
-    } else {
-      setFilteredEmployees( employees.filter( ( emp ) => !emp.isActive ) );
-      setActiveEmployee(false)
-    }
+    // if (filterValue === "true") {
+    //   setActiveEmployee(true);
+    //   setFilteredEmployees(employees.filter((emp) => emp.isActive));
+    // } else {
+    //   setFilteredEmployees(employees.filter((emp) => !emp.isActive));
+    //   setActiveEmployee(false);
+    // }
+    setActiveEmployee(filterValue === "true");
+    setSearchTerm("");
   };
 
-  const deleteModalOpen = (item) =>
-  {
-    setDeleteEmplyee(item)
-    setIsDeleteModal(true)
-  }
-  const closeDeleteModal = ()=> setIsDeleteModal(false)
+  const handleSearch = (e) => {
+    setSearchTerm(e.target.value);
+  };
+
+  const deleteModalOpen = (item) => {
+    setDeleteEmplyee(item);
+    setIsDeleteModal(true);
+  };
+  const closeDeleteModal = () => setIsDeleteModal(false);
 
   const handler = useCallback(
     (msg) => {
@@ -167,7 +206,7 @@ const {
         refetch();
       }
     },
-   [projectId, refetch]
+    [projectId, refetch]
   );
 
   useEffect(() => {
@@ -175,18 +214,19 @@ const {
     return () => eventBus.off("assign_project_all", handler);
   }, [handler]);
 
-    const employeeHandler = useCallback(
+  const employeeHandler = useCallback(
     (msg) => {
-      if(filteredEmployees.some((item) => item.employeeId == msg.employeeId)){
+      if (filteredEmployees.some((item) => item.employeeId == msg.employeeId)) {
         refetch();
       }
-    },[filteredEmployees, refetch]
+    },
+    [filteredEmployees, refetch]
   );
 
   useEffect(() => {
-    eventBus.on("employee",employeeHandler);
-    return () => eventBus.off("employee",employeeHandler)
-  },[employeeHandler])
+    eventBus.on("employee", employeeHandler);
+    return () => eventBus.off("employee", employeeHandler);
+  }, [employeeHandler]);
 
   return (
     <>
@@ -208,8 +248,7 @@ const {
         ></MapUsers>
       </div>
 
-
-       {IsDeleteModal && (
+      {IsDeleteModal && (
         <div
           className={`modal fade  ${IsDeleteModal ? "show" : ""}`}
           tabIndex="-1"
@@ -220,7 +259,6 @@ const {
           }}
           aria-hidden="false"
         >
- 
           <ConfirmModal
             type={"delete"}
             header={"Removed Employee"}
@@ -235,8 +273,20 @@ const {
 
       <div className="card card-action mb-6">
         <div className="card-body">
-          <div className="row">
-            <div className="col-12 d-flex justify-content-between mb-1">
+          <div className="row d-flex justify-content-between mb-4">
+            <div className="col-md-6 col-12 d-flex align-items-center">
+              <div className="dataTables_filter d-inline-flex align-items-center ms-2">
+                <input
+                  type="search"
+                  className="form-control form-control-sm me-4"
+                  placeholder="Search by Name or Role"
+                  aria-controls="DataTables_Table_0"
+                  value={searchTerm}
+                  onChange={handleSearch}
+                />
+              </div>
+            </div>
+            <div className="col-md-6 col-12 d-flex justify-content-end align-items-center">
               <div
                 className="dataTables_length text-start py-2 px-2"
                 id="DataTables_Table_0_length"
@@ -258,7 +308,7 @@ const {
               </div>
               <button
                 type="button"
-                className={`link-button btn-sm m-1 ${
+                className={`link-button btn-primary btn-sm ${
                   HasAssignUserPermission ? "" : "d-none"
                 }`}
                 data-bs-toggle="modal"
@@ -271,91 +321,99 @@ const {
           </div>
           <div className="table-responsive text-nowrap">
             {employeeLodaing && <p>Loading..</p>}
-            {!employeeLodaing && employees && employees.length > 0 && (
-              <table className="table ">
-                <thead>
-                  <tr>
-                    <th>Name</th>
-                    <th>Assigned Date</th>
-               {!activeEmployee && <th>Release Date</th>}
-                    <th>Project Role</th>
-                    <th>Actions</th>
-                  </tr>
-                </thead>
-                <tbody className="table-border-bottom-0">
-                  {filteredEmployees &&
-                    filteredEmployees.map((item) => (
-                      <tr key={item.id}>
-                        <td>
-                          <div className="d-flex justify-content-start align-items-center">
-                            <Avatar
-                              firstName={item.firstName}
-                              lastName={item.lastName}
-                            ></Avatar>
-                            <div className="d-flex flex-column">
-                              <a
-                                onClick={() =>
-                                  navigate(`/employee/${item.employeeId}?for=attendance`)
-                                }
-                                className="text-heading text-truncate cursor-pointer"
-                              >
-                                <span className="fw-normal">
-                                  {item.firstName} {item.middleName}{" "}
-                                  {item.lastName}
-                                </span>
-                              </a>
-                            </div>
-                          </div>
-                        </td>
-                        <td>
-                          {" "}
-                          {moment(item.allocationDate).format(
-                            "DD-MMM-YYYY"
-                          )}{" "}
-                        </td>
-                        {!activeEmployee && <td>
-                          {item.reAllocationDate
-                            ? moment(item.reAllocationDate).format(
-                                "DD-MMM-YYYY"
-                              )
-                            : "Present"}
-                        </td>}
-                        <td>
-                          <span className="badge bg-label-primary me-1">
-                            {getRole(item.jobRoleId)}
-                          </span>
-                        </td>
-                        <td>
-                          {item.isActive && (
-                            <button
-                              aria-label="Delete"
-                              type="button"
-                              title="Remove from project"
-                              className="btn p-0 dropdown-toggle hide-arrow"
-                              onClick={() => deleteModalOpen(item)}
-                            >
-                              {" "}
-                              {removingEmployeeId === item.id ? (
-                                <div
-                                  className="spinner-border spinner-border-sm text-primary"
-                                  role="status"
+            {!employeeLodaing &&
+              filteredEmployees &&
+              filteredEmployees.length > 0 && (
+                <table className="table ">
+                  <thead>
+                    <tr>
+                      <th>
+                        <div className="text-start ms-5">Name</div>
+                      </th>
+                      <th>Assigned Date</th>
+                      {!activeEmployee && <th>Release Date</th>}
+                      <th>Project Role</th>
+                      <th>Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody className="table-border-bottom-0">
+                    {filteredEmployees &&
+                      filteredEmployees.map((item) => (
+                        <tr key={item.id}>
+                          <td>
+                            <div className="d-flex justify-content-start align-items-center">
+                              <Avatar
+                                firstName={item.firstName}
+                                lastName={item.lastName}
+                              ></Avatar>
+                              <div className="d-flex flex-column">
+                                <a
+                                  onClick={() =>
+                                    navigate(
+                                      `/employee/${item.employeeId}?for=attendance`
+                                    )
+                                  }
+                                  className="text-heading text-truncate cursor-pointer"
                                 >
-                                  <span className="visually-hidden">
-                                    Loading...
+                                  <span className="fw-normal">
+                                    {item.firstName} {item.middleName}{" "}
+                                    {item.lastName}
                                   </span>
-                                </div>
-                              ) : (
-                                <i className="bx bx-trash me-1 text-danger"></i>
-                              )}
-                            </button>
+                                </a>
+                              </div>
+                            </div>
+                          </td>
+                          <td>
+                            {" "}
+                            {moment(item.allocationDate).format(
+                              "DD-MMM-YYYY"
+                            )}{" "}
+                          </td>
+                          {!activeEmployee && (
+                            <td>
+                              {item.reAllocationDate
+                                ? moment(item.reAllocationDate).format(
+                                    "DD-MMM-YYYY"
+                                  )
+                                : "Present"}
+                            </td>
                           )}
-                          {!item.isActive && <span>Not in project</span>}
-                        </td>
-                      </tr>
-                    ))}
-                </tbody>
-              </table>
-            )}
+                          <td>
+                            <span className="badge bg-label-primary me-1">
+                              {getRole(item.jobRoleId)}
+                            </span>
+                          </td>
+                          <td>
+                            {item.isActive && (
+                              <button
+                                aria-label="Delete"
+                                type="button"
+                                title="Remove from project"
+                                className="btn p-0 dropdown-toggle hide-arrow"
+                                onClick={() => deleteModalOpen(item)}
+                              >
+                                {" "}
+                                {removingEmployeeId === item.id ? (
+                                  <div
+                                    className="spinner-border spinner-border-sm text-primary"
+                                    role="status"
+                                  >
+                                    <span className="visually-hidden">
+                                      Loading...
+                                    </span>
+                                  </div>
+                                ) : (
+                                  <i className="bx bx-trash me-1 text-danger"></i>
+                                )}
+                              </button>
+                            )}
+                            {!item.isActive && <span>Not in project</span>}
+                          </td>
+                        </tr>
+                      ))}
+                  </tbody>
+                </table>
+              )}
             {!employeeLodaing && filteredEmployees.length === 0 && (
               <div className="text-center text-muted py-3">
                 {activeEmployee