changes tage reponse and changed confirm modal format

src/components/Directory/ManageBucket.jsx

@@ -198,23 +198,14 @@ const ManageBucket = () => {
   return (
     <>
       {deleteBucket && (
-        <div
+        <ConfirmModal
-          className={`modal fade ${deleteBucket ? "show" : ""}`}
+          isOpen={!!deleteBucket}
-          tabIndex="-1"
+          type="delete"
-          role="dialog"
+          header="Delete Bucket"
-          style={{
+          message="Are you sure you want to delete this bucket?"
-            display: deleteBucket ? "block" : "none",
+          onSubmit={handleDeleteContact}
-            backgroundColor: deleteBucket ? "rgba(0,0,0,0.5)" : "transparent",
+          onClose={() => setDeleteBucket(null)}
-          }}
+        />
-        >
-          <ConfirmModal
-            type={"delete"}
-            header={"Delete Bucket"}
-            message={"Are you sure you want to delete this bucket?"}
-            onSubmit={handleDeleteContact}
-            onClose={() => setDeleteBucket(null)}
-          />
-        </div>
       )}
 
       <div className="container m-0 p-0" style={{ minHeight: "00px" }}>
@@ -237,8 +228,9 @@ 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()}
               />
@@ -247,8 +239,9 @@ 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);
@@ -285,16 +278,18 @@ const ManageBucket = () => {
                 </div>
               )}
 
-              {!loading && buckets.length > 0 && sortedBucktesList.length === 0 && (
+              {!loading &&
-                <div className="col-12">
+                buckets.length > 0 &&
-                  <div
+                sortedBucktesList.length === 0 && (
-                    className="d-flex justify-content-center align-items-center py-5 w-100"
+                  <div className="col-12">
-                    style={{ marginLeft: "250px" }}
+                    <div
-                  >
+                      className="d-flex justify-content-center align-items-center py-5 w-100"
-                    No matching buckets found.
+                      style={{ marginLeft: "250px" }}
+                    >
+                      No matching buckets found.
+                    </div>
                   </div>
-                </div>
+                )}
-              )}
               {!loading &&
                 sortedBucktesList.map((bucket) => (
                   <div className="col" key={bucket.id}>
@@ -305,29 +300,29 @@ const ManageBucket = () => {
                           {(DirManager ||
                             DirAdmin ||
                             bucket?.createdBy?.id ===
-                            profile?.employeeInfo?.id) && (
+                              profile?.employeeInfo?.id) && (
-                              <div className="d-flex gap-2">
+                            <div className="d-flex gap-2">
-                                <i
+                              <i
-                                  className="bx bx-edit bx-sm text-primary cursor-pointer"
+                                className="bx bx-edit bx-sm text-primary cursor-pointer"
-                                  onClick={() => {
+                                onClick={() => {
-                                    select_bucket(bucket);
+                                  select_bucket(bucket);
-                                    setAction_bucket(true);
+                                  setAction_bucket(true);
-                                    const initialSelectedEmployees = employeesList
+                                  const initialSelectedEmployees = employeesList
-                                      .filter((emp) =>
+                                    .filter((emp) =>
-                                        bucket.employeeIds?.includes(
+                                      bucket.employeeIds?.includes(
-                                          emp.employeeId
+                                        emp.employeeId
-                                        )
                                       )
-                                      .map((emp) => ({ ...emp, isActive: true }));
+                                    )
-                                    setSelectEmployee(initialSelectedEmployees);
+                                    .map((emp) => ({ ...emp, isActive: true }));
-                                  }}
+                                  setSelectEmployee(initialSelectedEmployees);
-                                ></i>
+                                }}
-                                <i
+                              ></i>
-                                  className="bx bx-trash bx-sm text-danger cursor-pointer ms-0"
+                              <i
-                                  onClick={() => setDeleteBucket(bucket?.id)}
+                                className="bx bx-trash bx-sm text-danger cursor-pointer ms-0"
-                                ></i>
+                                onClick={() => setDeleteBucket(bucket?.id)}
-                              </div>
+                              ></i>
-                            )}
+                            </div>
+                          )}
                         </h6>
                         <h6 className="card-subtitle mb-2 text-muted  text-start">
                           Contacts:{" "}

src/components/Directory/NoteCardDirectoryEditable.jsx

@@ -33,7 +33,10 @@ const NoteCardDirectoryEditable = ({
         note: editorValue,
         contactId,
       };
-      const response = await DirectoryRepository.UpdateNote(noteItem.id, payload);
+      const response = await DirectoryRepository.UpdateNote(
+        noteItem.id,
+        payload
+      );
 
       const cachedContactProfile = getCachedData("Contact Profile");
       if (cachedContactProfile?.contactId === contactId) {
@@ -75,9 +78,9 @@ const NoteCardDirectoryEditable = ({
 
   const contactProfile = (contactId) => {
     DirectoryRepository.GetContactProfile(contactId).then((res) => {
-        setOpen_contact(res?.data);
+      setOpen_contact(res?.data);
-        setIsOpenModalNote(true);
+      setIsOpenModalNote(true);
-      });
+    });
   };
 
   const handleRestore = async () => {
@@ -95,7 +98,6 @@ const NoteCardDirectoryEditable = ({
 
   return (
     <>
-
       {isOpenModalNote && (
         <GlobalModel
           isOpen={isOpenModalNote}
@@ -125,7 +127,6 @@ const NoteCardDirectoryEditable = ({
         {/* Header */}
         <div className="d-flex justify-content-between align-items-center mb-1">
           <div className="d-flex align-items-center">
-
             <Avatar
               size="xxs"
               firstName={noteItem?.createdBy?.firstName}
@@ -133,30 +134,36 @@ const NoteCardDirectoryEditable = ({
               className="m-0"
             />
             <div>
-              <div className="d-flex ms-0 align-middle cursor-pointer" onClick={() =>contactProfile(noteItem.contactId)}>
+              <div
+                className="d-flex ms-0 align-middle cursor-pointer"
+                onClick={() => contactProfile(noteItem.contactId)}
+              >
                 <span>
-                  <span className="fw-bold ">  {noteItem?.contactName}  </span> <span className="text-muted font-weight-normal">
+                  <span className="fw-bold "> {noteItem?.contactName} </span>{" "}
+                  <span className="text-muted font-weight-normal">
                     ({noteItem?.organizationName})
                   </span>
                 </span>
-
-              </div>
-              <div className="d-flex ms-0 align-middle">
-
-
               </div>
+              <div className="d-flex ms-0 align-middle"></div>
               <div className="d-flex ms-0 mt-2">
                 <span className="text-muted">
-                  by <span className="fw-bold "> {noteItem?.createdBy?.firstName} {noteItem?.createdBy?.lastName} </span>
+                  by{" "}
-                  &nbsp; <span className="text-muted">
+                  <span className="fw-bold ">
-                    on {moment
+                    {" "}
+                    {noteItem?.createdBy?.firstName}{" "}
+                    {noteItem?.createdBy?.lastName}{" "}
+                  </span>
+                  &nbsp;{" "}
+                  <span className="text-muted">
+                    on{" "}
+                    {moment
                       .utc(noteItem?.createdAt)
                       .add(5, "hours")
                       .add(30, "minutes")
                       .format("DD MMMM, YYYY [at] hh:mm A")}
                   </span>
                 </span>
-
               </div>
             </div>
           </div>
@@ -228,26 +235,16 @@ const NoteCardDirectoryEditable = ({
 
       {/* Delete Confirm Modal */}
       {isDeleteModalOpen && (
-        <div
+        <ConfirmModal
-          className={`modal fade ${isDeleteModalOpen ? "show" : ""}`}
+          isOpen={isDeleteModalOpen}
-          tabIndex="-1"
+          type="delete"
-          role="dialog"
+          header="Delete Note"
-          style={{
+          message="Are you sure you want to delete this note?"
-            display: isDeleteModalOpen ? "block" : "none",
+          onSubmit={suspendEmployee}
-            backgroundColor: "rgba(0,0,0,0.5)",
+          onClose={() => setIsDeleteModalOpen(false)}
-          }}
+          loading={isDeleting}
-          aria-hidden="false"
+          paramData={noteItem}
-        >
+        />
-          <ConfirmModal
-            type={"delete"}
-            header={"Delete Note"}
-            message={"Are you sure you want to delete this note?"}
-            onSubmit={suspendEmployee}
-            onClose={() => setIsDeleteModalOpen(false)}
-            loading={isDeleting}
-            paramData={noteItem}
-          />
-        </div>
       )}
     </>
   );

src/components/Documents/DocumentsList.jsx

@@ -156,23 +156,16 @@ const DocumentsList = ({
   return (
     <>
       {IsDeleteModalOpen && (
-        <div
+        <ConfirmModal
-          className="modal fade show"
+          isOpen={IsDeleteModalOpen}
-          tabIndex="-1"
+          type="delete"
-          role="dialog"
+          header="Delete Document"
-          style={{ display: "block", backgroundColor: "rgba(0,0,0,0.5)" }}
+          message="Are you sure you want to delete this document?"
-          aria-hidden="false"
+          onSubmit={handleDelete}
-        >
+          onClose={() => setIsDeleteModalOpen(false)}
-          <ConfirmModal
+          loading={!!isPending}
-            type="delete"
+          paramData={deletingId}
-            header="Delete Document"
+        />
-            message="Are you sure you want delete?"
-            onSubmit={handleDelete}
-            onClose={() => setIsDeleteModalOpen(false)}
-            loading={!!isPending}
-            paramData={deletingId}
-          />
-        </div>
       )}
 
       <div className="table-responsive">

src/components/Employee/EmployeeList.jsx

@@ -4,4 +4,4 @@ const EmployeeList = () => {
   return <div>EmployeeList</div>;
 };
 
-export default EmployeeList;
+export default EmployeeList;

src/components/Expenses/ExpenseList.jsx

@@ -110,8 +110,9 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
       label: "Submitted By",
       align: "text-start",
       getValue: (e) =>
-        `${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""}`.trim() ||
+        `${e.createdBy?.firstName ?? ""} ${
-        "N/A",
+          e.createdBy?.lastName ?? ""
+        }`.trim() || "N/A",
       customRender: (e) => (
         <div className="d-flex align-items-center">
           <Avatar
@@ -185,26 +186,16 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
   return (
     <>
       {IsDeleteModalOpen && (
-        <div
+        <ConfirmModal
-          className={`modal fade show`}
+          isOpen={IsDeleteModalOpen}
-          tabIndex="-1"
+          type="delete"
-          role="dialog"
+          header="Delete Expense"
-          style={{
+          message="Are you sure you want delete?"
-            display: "block",
+          onSubmit={handleDelete}
-            backgroundColor: "rgba(0,0,0,0.5)",
+          onClose={() => setIsDeleteModalOpen(false)}
-          }}
+          loading={isPending}
-          aria-hidden="false"
+          paramData={deletingId}
-        >
+        />
-          <ConfirmModal
-            type="delete"
-            header="Delete Expense"
-            message="Are you sure you want delete?"
-            onSubmit={handleDelete}
-            onClose={() => setIsDeleteModalOpen(false)}
-            loading={isPending}
-            paramData={deletingId}
-          />
-        </div>
       )}
 
       <div className="card px-0 px-sm-4">

src/components/Project/Infrastructure/WorkItem.jsx

@@ -32,8 +32,8 @@ const WorkItem = ({
   forWorkArea,
   deleteHandleTask,
 }) => {
-  const  projectId  = useSelector((store)=>store.localVariables.projectId) 
+  const projectId = useSelector((store) => store.localVariables.projectId);
-const isTaskPlanning = /^\/activities\/task$/.test(location.pathname);
+  const isTaskPlanning = /^\/activities\/task$/.test(location.pathname);
 
   const [itemName, setItemName] = useState("");
   const [NewWorkItem, setNewWorkItem] = useState();
@@ -135,25 +135,15 @@ const isTaskPlanning = /^\/activities\/task$/.test(location.pathname);
       )}
 
       {showModal2 && (
-        <div
+        <ConfirmModal
-          className={`modal fade  ${showModal2 ? "show" : ""}`}
+          isOpen={showModal2}
-          tabIndex="-1"
+          type="delete"
-          role="dialog"
+          header="Delete Activity"
-          style={{
+          message="Are you sure you want delete?"
-            display: showModal2 ? "block" : "none",
+          onSubmit={handleSubmit}
-            backgroundColor: showModal2 ? "rgba(0,0,0,0.5)" : "transparent",
+          onClose={closeModalDelete}
-          }}
+          loading={isPending}
-          aria-hidden="false"
+        />
-        >
-          <ConfirmModal
-            type={"delete"}
-            header={"Delete Activity"}
-            message={"Are you sure you want delete?"}
-            onSubmit={handleSubmit}
-            onClose={closeModalDelete}
-            loading={loadingDelete}
-          />
-        </div>
       )}
 
       <tr key={NewWorkItem?.workItemId}>
@@ -240,9 +230,7 @@ const isTaskPlanning = /^\/activities\/task$/.test(location.pathname);
         </td>
 
         {(ManageInfra ||
-          (
+          (ManageAndAssignTak && PlannedWork !== CompletedWork)) && (
-            ManageAndAssignTak &&
-            PlannedWork !== CompletedWork)) && (
           <td className="text-end align-items-middle border-top">
             {/* Desktop (md and up): inline icons */}
             <div className="d-none d-md-flex justify-content-end gap-1 px-2">

src/components/Project/Teams.jsx

@@ -249,26 +249,15 @@ const Teams = () => {
       </div>
 
       {IsDeleteModal && (
-        <div
+        <ConfirmModal
-          className={`modal fade  ${IsDeleteModal ? "show" : ""}`}
+          isOpen={IsDeleteModal}
-          tabIndex="-1"
+          type="delete"
-          role="dialog"
+          header="Removed Employee"
-          style={{
+          message="Are you sure you want delete?"
-            display: IsDeleteModal ? "block" : "none",
+          onSubmit={() => removeAllocation(deleteEmployee)}
-            backgroundColor: IsDeleteModal ? "rgba(0,0,0,0.5)" : "transparent",
+          onClose={closeDeleteModal}
-          }}
+          loading={isPending}
-          aria-hidden="false"
+        />
-        >
-          <ConfirmModal
-            type={"delete"}
-            header={"Removed Employee"}
-            message={"Are you sure you want delete?"}
-            onSubmit={removeAllocation}
-            onClose={closeDeleteModal}
-            loading={isPending}
-            paramData={deleteEmployee}
-          />
-        </div>
       )}
 
       <div className="card card-action mb-6">

src/components/common/TagInput.jsx

@@ -3,13 +3,15 @@ import { useFormContext } from "react-hook-form";
 
 const TagInput = ({ label, name, placeholder, color = "#e9ecef", options = [] }) => {
   const { setValue, watch } = useFormContext();
-  const tags = watch(name) || [];  
+  const tags = watch(name) || [];
   const [input, setInput] = useState("");
   const [suggestions, setSuggestions] = useState([]);
 
   const handleAdd = (newTag) => {
-    if (!tags.some((t) => t.name === newTag)) {
+    const tagObj = typeof newTag === "string" ? { name: newTag, isActive: true } : newTag;
-      setValue(name, [...tags, { name: newTag, isActive: true }], { shouldValidate: true });
+
+    if (!tags.some((t) => t.name === tagObj.name)) {
+      setValue(name, [...tags, tagObj], { shouldValidate: true });
     }
   };
 
@@ -30,26 +32,32 @@ const TagInput = ({ label, name, placeholder, color = "#e9ecef", options = [] })
     }
   };
 
-  const handleChange = (e) => {
+const handleChange = (e) => {
-    const val = e.target.value;
+  const val = e.target.value;
-    setInput(val);
+  setInput(val);
-    if (val) {
+
-      setSuggestions(
+  if (val) {
-        options
+    setSuggestions(
-          .filter(
+      options
-            (opt) =>
+        .filter((opt) => {
-              opt.toLowerCase().includes(val.toLowerCase()) &&
+          const label = typeof opt === "string" ? opt : opt.name;
-              !tags.some((t) => t.name === opt)
+          return (
-          )
+            label.toLowerCase().includes(val.toLowerCase()) &&
-          .map((s) => ({ name: s, isActive: true }))
+            !tags.some((t) => t.name === label)
-      );
+          );
-    } else {
+        })
-      setSuggestions([]);
+        .map((opt) => ({
-    }
+          name: typeof opt === "string" ? opt : opt.name,
-  };
+          isActive: true,
+        }))
+    );
+  } else {
+    setSuggestions([]);
+  }
+};
 
   const handleSuggestionClick = (sugg) => {
-    handleAdd(sugg.name);
+    handleAdd(sugg);
     setInput("");
     setSuggestions([]);
   };
@@ -60,7 +68,10 @@ const TagInput = ({ label, name, placeholder, color = "#e9ecef", options = [] })
         {label}
       </label>
 
-      <div className="form-control form-control-sm p-1" style={{ minHeight: "38px", position: "relative" }}>
+      <div
+        className="form-control form-control-sm p-1"
+        style={{ minHeight: "38px", position: "relative" }}
+      >
         <div className="d-flex flex-wrap align-items-center gap-1">
           {tags.map((tag, index) => (
             <span
@@ -104,7 +115,6 @@ const TagInput = ({ label, name, placeholder, color = "#e9ecef", options = [] })
               zIndex: 1000,
               maxHeight: "150px",
               overflowY: "auto",
-              boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.2)",
               borderRadius: "3px",
               border: "1px solid #ddd",
             }}
@@ -127,4 +137,5 @@ const TagInput = ({ label, name, placeholder, color = "#e9ecef", options = [] })
 };
 
 
+
 export default TagInput;

src/pages/Directory/Directory.jsx

@@ -301,25 +301,15 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
         </GlobalModel>
       )}
       {deleteContact && (
-        <div
+        <ConfirmModal
-          className={`modal fade  ${deleteContact ? "show" : ""}`}
+          isOpen={!!deleteContact}
-          tabIndex="-1"
+          type="delete"
-          role="dialog"
+          header="Delete Contact"
-          style={{
+          message="Are you sure you want delete?"
-            display: deleteContact ? "block" : "none",
+          onSubmit={handleDeleteContact}
-            backgroundColor: deleteContact ? "rgba(0,0,0,0.5)" : "transparent",
+          onClose={() => setDeleteContact(null)}
-          }}
+          loading={IsDeleting}
-          aria-hidden="false"
+        />
-        >
-          <ConfirmModal
-            type={"delete"}
-            header={"Delete Contact"}
-            message={"Are you sure you want delete?"}
-            onSubmit={handleDeleteContact}
-            onClose={() => setDeleteContact(null)}
-            loading={IsDeleting}
-          />
-        </div>
       )}
 
       {openBucketModal && (
@@ -383,12 +373,14 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
 
               {/* Empty state AFTER list */}
               {!loading && contacts?.length === 0 && (
-                <p className="mt-3 ms-3 text-muted" >No contact found</p>
+                <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>
+                  <p className="mt-3 ms-3 text-muted">
+                    No matching contact found
+                  </p>
                 )}
             </div>
           </div>
@@ -419,11 +411,9 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
             {!loading && contacts?.length === 0 && (
               <p className="mt-3 ms-3 text-muted">No contact found</p>
             )}
-            {!loading &&
+            {!loading && contacts?.length > 0 && currentItems.length === 0 && (
-              contacts?.length > 0 &&
+              <p className="mt-3 ms-3 text-muted">No matching contact found</p>
-              currentItems.length === 0 && (
+            )}
-                <p className="mt-3 ms-3 text-muted">No matching contact found</p>
-              )}
           </div>
         )}
 
@@ -446,7 +436,9 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
           currentItems.length > ITEMS_PER_PAGE && (
             <nav aria-label="Page navigation">
               <ul className="pagination pagination-sm justify-content-end py-1">
-                <li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
+                <li
+                  className={`page-item ${currentPage === 1 ? "disabled" : ""}`}
+                >
                   <button
                     className="page-link btn-xs"
                     onClick={() => paginate(currentPage - 1)}
@@ -458,8 +450,9 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
                 {[...Array(totalPages)].map((_, index) => (
                   <li
                     key={index}
-                    className={`page-item ${currentPage === index + 1 ? "active" : ""
+                    className={`page-item ${
-                      }`}
+                      currentPage === index + 1 ? "active" : ""
+                    }`}
                   >
                     <button
                       className="page-link"
@@ -471,8 +464,9 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
                 ))}
 
                 <li
-                  className={`page-item ${currentPage === totalPages ? "disabled" : ""
+                  className={`page-item ${
-                    }`}
+                    currentPage === totalPages ? "disabled" : ""
+                  }`}
                 >
                   <button
                     className="page-link"
@@ -489,4 +483,4 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
   );
 };
 
-export default Directory;
+export default Directory;

src/pages/employee/EmployeeList.jsx

@@ -177,10 +177,12 @@ const EmployeeList = () => {
   useEffect(() => {
     if (!loading && Array.isArray(employees)) {
       const sorted = [...employees].sort((a, b) => {
-        const nameA = `${a.firstName || ""}${a.middleName || ""}${a.lastName || ""
+        const nameA = `${a.firstName || ""}${a.middleName || ""}${
-          }`.toLowerCase();
+          a.lastName || ""
-        const nameB = `${b.firstName || ""}${b.middleName || ""}${b.lastName || ""
+        }`.toLowerCase();
-          }`.toLowerCase();
+        const nameB = `${b.firstName || ""}${b.middleName || ""}${
+          b.lastName || ""
+        }`.toLowerCase();
         return nameA?.localeCompare(nameB);
       });
 
@@ -259,37 +261,26 @@ const EmployeeList = () => {
       )}
 
       {IsDeleteModalOpen && (
-        <div
+        <ConfirmModal
-          className={`modal fade  ${IsDeleteModalOpen ? "show" : ""}`}
+          isOpen={IsDeleteModalOpen}
-          tabIndex="-1"
+          type="delete"
-          role="dialog"
+          header={
-          style={{
+            selectedEmpFordelete?.isActive
-            display: IsDeleteModalOpen ? "block" : "none",
+              ? "Suspend Employee"
-            backgroundColor: IsDeleteModalOpen
+              : "Reactivate Employee"
-              ? "rgba(0,0,0,0.5)"
+          }
-              : "transparent",
+          message={`Are you sure you want to ${
-          }}
+            selectedEmpFordelete?.isActive ? "suspend" : "reactivate"
-          aria-hidden="false"
+          } this employee?`}
-        >
+          onSubmit={() =>
-          <ConfirmModal
+            suspendEmployee({
-            type={"delete"}
+              employeeId: selectedEmpFordelete.id,
-            header={
+              active: !selectedEmpFordelete.isActive,
-              selectedEmpFordelete?.isActive
+            })
-                ? "Suspend Employee"
+          }
-                : "Reactivate Employee"
+          onClose={() => setIsDeleteModalOpen(false)}
-            }
+          loading={employeeLodaing}
-            message={`Are you sure you want to ${selectedEmpFordelete?.isActive ? "suspend" : "reactivate"
+        />
-              } this employee?`}
-            onSubmit={() =>
-              suspendEmployee({
-                employeeId: selectedEmpFordelete.id,
-                active: !selectedEmpFordelete.isActive,
-              })
-            }
-            onClose={() => setIsDeleteModalOpen(false)}
-            loading={employeeLodaing}
-          />
-        </div>
       )}
 
       <div className="container-fluid">
@@ -511,8 +502,9 @@ const EmployeeList = () => {
                         Status
                       </th>
                       <th
-                        className={`sorting_disabled  ${!Manage_Employee && "d-none"
+                        className={`sorting_disabled  ${
-                          }`}
+                          !Manage_Employee && "d-none"
+                        }`}
                         rowSpan="1"
                         colSpan="1"
                         style={{ width: "50px" }}
@@ -532,9 +524,9 @@ const EmployeeList = () => {
                     )}
                     {/* Conditional messages for no data or no search results */}
                     {!loading &&
-                      displayData?.length === 0 &&
+                    displayData?.length === 0 &&
-                      searchText &&
+                    searchText &&
-                      !showAllEmployees ? (
+                    !showAllEmployees ? (
                       <tr>
                         <td colSpan={8}>
                           <small className="muted">
@@ -544,8 +536,8 @@ const EmployeeList = () => {
                       </tr>
                     ) : null}
                     {!loading &&
-                      displayData?.length === 0 &&
+                    displayData?.length === 0 &&
-                      (!searchText || showAllEmployees) ? (
+                    (!searchText || showAllEmployees) ? (
                       <tr>
                         <td
                           colSpan={8}
@@ -639,7 +631,9 @@ const EmployeeList = () => {
                                 <div className="dropdown-menu dropdown-menu-end">
                                   {/* View always visible */}
                                   <button
-                                    onClick={() => navigate(`/employee/${item.id}`)}
+                                    onClick={() =>
+                                      navigate(`/employee/${item.id}`)
+                                    }
                                     className="dropdown-item py-1"
                                   >
                                     <i className="bx bx-detail bx-sm"></i> View
@@ -650,9 +644,12 @@ const EmployeeList = () => {
                                     <>
                                       <button
                                         className="dropdown-item py-1"
-                                        onClick={() => handleEmployeeModel(item.id)}
+                                        onClick={() =>
+                                          handleEmployeeModel(item.id)
+                                        }
                                       >
-                                        <i className="bx bx-edit bx-sm"></i> Edit
+                                        <i className="bx bx-edit bx-sm"></i>{" "}
+                                        Edit
                                       </button>
 
                                       {/* Suspend only when active */}
@@ -661,7 +658,8 @@ const EmployeeList = () => {
                                           className="dropdown-item py-1"
                                           onClick={() => handleOpenDelete(item)}
                                         >
-                                          <i className="bx bx-task-x bx-sm"></i> Suspend
+                                          <i className="bx bx-task-x bx-sm"></i>{" "}
+                                          Suspend
                                         </button>
                                       )}
 
@@ -670,11 +668,13 @@ const EmployeeList = () => {
                                         type="button"
                                         data-bs-toggle="modal"
                                         data-bs-target="#managerole-modal"
-                                        onClick={() => setEmpForManageRole(item.id)}
+                                        onClick={() =>
+                                          setEmpForManageRole(item.id)
+                                        }
                                       >
-                                        <i className="bx bx-cog bx-sm"></i> Manage Role
+                                        <i className="bx bx-cog bx-sm"></i>{" "}
+                                        Manage Role
                                       </button>
-
                                     </>
                                   )}
 
@@ -684,7 +684,8 @@ const EmployeeList = () => {
                                       className="dropdown-item py-1"
                                       onClick={() => handleOpenDelete(item)}
                                     >
-                                      <i className="bx bx-refresh bx-sm me-1"></i> Re-activate
+                                      <i className="bx bx-refresh bx-sm me-1"></i>{" "}
+                                      Re-activate
                                     </button>
                                   )}
                                 </div>
@@ -703,8 +704,9 @@ const EmployeeList = () => {
                   <nav aria-label="Page">
                     <ul className="pagination pagination-sm justify-content-end py-1">
                       <li
-                        className={`page-item ${currentPage === 1 ? "disabled" : ""
+                        className={`page-item ${
-                          }`}
+                          currentPage === 1 ? "disabled" : ""
+                        }`}
                       >
                         <button
                           className="page-link btn-xs"
@@ -717,8 +719,9 @@ const EmployeeList = () => {
                       {[...Array(totalPages)]?.map((_, index) => (
                         <li
                           key={index}
-                          className={`page-item ${currentPage === index + 1 ? "active" : ""
+                          className={`page-item ${
-                            }`}
+                            currentPage === index + 1 ? "active" : ""
+                          }`}
                         >
                           <button
                             className="page-link"
@@ -730,8 +733,9 @@ const EmployeeList = () => {
                       ))}
 
                       <li
-                        className={`page-item ${currentPage === totalPages ? "disabled" : ""
+                        className={`page-item ${
-                          }`}
+                          currentPage === totalPages ? "disabled" : ""
+                        }`}
                       >
                         <button
                           className="page-link"