Updated inline styles to conditionally set 'display' and 'backgroundColor' based on showModal2 state.

Ensures modal appears with a dark overlay when active and is hidden otherwise.

src/components/Project/Infrastructure/WorkItem.jsx

@@ -6,27 +6,29 @@ import { useHasUserPermission } from "../../../hooks/useHasUserPermission";
 import { MANAGE_PROJECT_INFRA, MANAGE_TASK } from "../../../utils/constants";
 
 import ConfirmModal from "../../common/ConfirmModal";
-import ProjectRepository from '../../../repositories/ProjectRepository'
+import ProjectRepository from "../../../repositories/ProjectRepository";
-import {useProjectDetails} from '../../../hooks/useProjects'
+import { useProjectDetails } from "../../../hooks/useProjects";
 import showToast from "../../../services/toastService";
-import {cacheData, getCachedData} from "../../../slices/apiDataManager";
+import { cacheData, getCachedData } from "../../../slices/apiDataManager";
-import {useDispatch} from "react-redux";
+import { useDispatch } from "react-redux";
-import {refreshData} from "../../../slices/localVariablesSlice";
+import { refreshData } from "../../../slices/localVariablesSlice";
 
 const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
   const { projectId } = useParams();
   const [itemName, setItemName] = useState("");
   const [NewWorkItem, setNewWorkItem] = useState();
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [ showModal, setShowModal ] = useState( false );
+  const [showModal, setShowModal] = useState(false);
   const [showModal2, setShowModal2] = useState(false);
   const ManageTasks = useHasUserPermission(MANAGE_TASK);
-  const ManageInfra = useHasUserPermission( MANAGE_PROJECT_INFRA );
+  const ManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
-  const [ loadingDelete, setLoadingDelete ] = useState( false )
+  const [loadingDelete, setLoadingDelete] = useState(false);
   const project = getCachedData("projectInfo");
- const dispatch = useDispatch()
+  const dispatch = useDispatch();
 
-  const {projects_Details} = useProjectDetails(projectId || project?.projectId)
+  const { projects_Details } = useProjectDetails(
+    projectId || project?.projectId
+  );
 
   const openModal = () => setIsModalOpen(true);
   const closeModal = () => setIsModalOpen(false);
@@ -55,24 +57,20 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
       document.querySelectorAll('[data-bs-toggle="tooltip"]')
     );
     tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
-  }, [] );
+  }, []);
-  
-
 
   const showModal1 = () => setShowModal(true);
-  const closeModal1 = () => setShowModal( false );
+  const closeModal1 = () => setShowModal(false);
   const showModalDelete = () => setShowModal2(true);
-  const closeModalDelete = () => setShowModal2( false );
+  const closeModalDelete = () => setShowModal2(false);
 
-
+  const handleSubmit = async () => {
-  const handleSubmit = async() => {
     setLoadingDelete(true);
-    try
+    try {
-    {
-    
       const updatedProject = { ...projects_Details };
-      const response = await ProjectRepository.deleteProjectTask( workItem.workItemId );
+      const response = await ProjectRepository.deleteProjectTask(
-      debugger
+        workItem.workItemId
+      );
       const newProject = {
         ...updatedProject,
         buildings: updatedProject.buildings.map((building) =>
@@ -108,20 +106,18 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
         data: newProject,
       });
 
-      dispatch( refreshData( true ) );
+      dispatch(refreshData(true));
-      closeModalDelete()
+      closeModalDelete();
-      setLoadingDelete(false)
+      setLoadingDelete(false);
-      showToast("Activity Deleted Successfully","success")     
+      showToast("Activity Deleted Successfully", "success");
-    } catch ( error )
+    } catch (error) {
-    {
+      setLoadingDelete(false);
-      setLoadingDelete( false )
+      closeModalDelete();
-      closeModalDelete()
       const message =
         error.response?.data?.message ||
         error.message ||
         "An unexpected error occurred";
-      showToast( message, "error" );
+      showToast(message, "error");
-     
     }
   };
   return (
@@ -138,7 +134,8 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
         </div>
       )}
 
-      {showModal && <div
+      {showModal && (
+        <div
           className={`modal fade ${showModal ? "show" : ""}`}
           tabIndex="-1"
           role="dialog"
@@ -152,18 +149,30 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
             floor={forFloor}
             onClose={closeModal1}
           />
-      </div>}
+        </div>
+      )}
 
-      
+      {showModal2 && (
-      {showModal2 && <div
+        <div
           className={`modal fade  ${showModal2 ? "show" : ""}`}
           tabIndex="-1"
           role="dialog"
-        style={{ display: showModal2 ? "block" : "none" }}
+          style={{
-        aria-hidden='false'
+            display: showModal2 ? "block" : "none",
+            backgroundColor: showModal2 ? "rgba(0,0,0,0.5)" : "transparent",
+          }}
+          aria-hidden="false"
         >
-        <ConfirmModal type={"delete"} header={"Delete Activity"} message={"Are you sure you want delete?"} onSubmit={ handleSubmit} onClose={closeModalDelete} loading={loadingDelete}/>
+          <ConfirmModal
-      </div> }
+            type={"delete"}
+            header={"Delete Activity"}
+            message={"Are you sure you want delete?"}
+            onSubmit={handleSubmit}
+            onClose={closeModalDelete}
+            loading={loadingDelete}
+          />
+        </div>
+      )}
 
       <tr>
         <td className="text-start table-cell-small">
@@ -178,8 +187,11 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
         {/* for mobile view */}
         <td className="text-center d-sm-none d-sm-table-cell">
           {hasWorkItem
-    ? NewWorkItem?.workItem?.completedWork ?? workItem?.completedWork ?? "NA"
+            ? NewWorkItem?.workItem?.completedWork ??
-    : "NA"}/{" "}
+              workItem?.completedWork ??
+              "NA"
+            : "NA"}
+          /{" "}
           {hasWorkItem
             ? NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork
             : "NA"}
@@ -187,12 +199,16 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
         {/* for greather than mobile view ************* */}
         <td className="text-center d-none d-md-table-cell">
           {hasWorkItem
-    ? NewWorkItem?.workItem?.plannedWork ?? workItem?.plannedWork ?? "NA"
+            ? NewWorkItem?.workItem?.plannedWork ??
+              workItem?.plannedWork ??
+              "NA"
             : "NA"}
         </td>
         <td className="text-center d-none d-md-table-cell">
           {hasWorkItem
-    ? NewWorkItem?.workItem?.completedWork ?? workItem?.completedWork ?? "NA"
+            ? NewWorkItem?.workItem?.completedWork ??
+              workItem?.completedWork ??
+              "NA"
             : "NA"}
         </td>
         <td className="text-center" style={{ width: "15%" }}>
@@ -234,7 +250,7 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
                 </span>
               </button>
             )}
-            { ManageInfra && (
+            {ManageInfra && (
               <>
                 <button
                   aria-label="Modify"