src/components/master/MasterModal.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 
 import CreateRole from "./CreateRole";
 import DeleteMaster from "./DeleteMaster";
@@ -7,8 +7,41 @@ import CreateJobRole from "./CreateJobRole";
 import EditJobRole from "./EditJobRole";
 import CreateActivity from "./CreateActivity";
 import EditActivity from "./EditActivity";
+import ConfirmModal from "../common/ConfirmModal";
 
 const MasterModal = ({ modaldata, closeModal }) => {
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+
+  useEffect(() => {
+    if (modaldata?.modalType === "delete") {
+      setIsDeleteModalOpen(true);
+    }
+  }, [modaldata]);
+
+  const handleCloseDeleteModal = () => {
+    setIsDeleteModalOpen(false);
+    closeModal(); 
+  };
+
+  if (modaldata?.modalType === "delete" && isDeleteModalOpen) {
+    return (
+      <div
+        className="modal fade show"
+        tabIndex="-1"
+        role="dialog"
+        style={{ display: "block", backgroundColor: "rgba(0,0,0,0.5)" }}
+        aria-hidden="false"
+      >
+        <ConfirmModal
+          type="delete"
+          header={`Delete ${modaldata.masterType}`}
+          message={"comming soon.."}
+          onClose={handleCloseDeleteModal}
+        />
+      </div>
+    );
+  }
+
   return (
     <div
       className="modal fade"
@@ -20,9 +53,7 @@ const MasterModal = ({ modaldata, closeModal }) => {
     >
       <div
         className={`modal-dialog mx-sm-auto mx-1 ${
-          ["Application Role", "Edit-Application Role"].includes(
-            modaldata?.modalType
-          )
+          ["Application Role", "Edit-Application Role"].includes(modaldata?.modalType)
             ? "modal-lg"
             : "modal-md"
         } modal-simple`}
@@ -36,33 +67,24 @@ const MasterModal = ({ modaldata, closeModal }) => {
               aria-label="Close"
               onClick={closeModal}
             ></button>
-            <div className="text-center mb-2"></div>
-            {modaldata?.modalType === "Application Role" && (
-              <CreateRole
-                masmodalType={modaldata.masterType}
-                onClose={closeModal}
-              />
+
+            {modaldata.modalType === "Application Role" && (
+              <CreateRole masmodalType={modaldata.masterType} onClose={closeModal} />
             )}
-            {modaldata?.modalType === "Edit-Application Role" && (
+            {modaldata.modalType === "Edit-Application Role" && (
               <EditRole master={modaldata} onClose={closeModal} />
             )}
-            {modaldata?.modalType === "delete" && (
-              <DeleteMaster master={modaldata} onClose={closeModal} />
-            )}
-            {modaldata?.modalType === "Job Role" && (
+            {modaldata.modalType === "Job Role" && (
               <CreateJobRole onClose={closeModal} />
             )}
-            {modaldata?.modalType === "Edit-Job Role" && (
+            {modaldata.modalType === "Edit-Job Role" && (
               <EditJobRole data={modaldata.item} onClose={closeModal} />
             )}
-            {modaldata?.modalType === "Activity" && (
+            {modaldata.modalType === "Activity" && (
               <CreateActivity onClose={closeModal} />
             )}
-            {modaldata?.modalType === "Edit-Activity" && (
-              <EditActivity
-                activityData={modaldata.item}
-                onClose={closeModal}
-              />
+            {modaldata.modalType === "Edit-Activity" && (
+              <EditActivity activityData={modaldata.item} onClose={closeModal} />
             )}
           </div>
         </div>