src/components/master/MasterModal.jsx

@@ -107,33 +107,9 @@ const MasterModal = ({ modaldata, closeModal }) => {
   );
 
   return (
-    <div
-      className="modal fade show"
-      id="master-modal"
-      tabIndex="-1"
-      role="dialog"
-      aria-hidden="true"
-      aria-labelledby="modalToggleLabel"
-      style={{ display: "block" }}
-    >
-      <div className={`modal-dialog mx-sm-auto mx-1 ${isLargeModal ? "modal-lg" : "modal-md"} modal-simple`}>
-        <div className="modal-content">
-          <div className="modal-body p-sm-4 p-0">
-            <div className="d-flex justify-content-between">
-              <h6>{modaldata?.modalType}</h6>
-              <button
-                type="button"
-                className="btn-close"
-                data-bs-dismiss="modal"
-                aria-label="Close"
-                onClick={closeModal}
-              />
-            </div>
+    <>
             {renderModalContent()}
-          </div>
-        </div>
-      </div>
-    </div>
+    </>
   );
 };
 

src/pages/master/MasterPage.jsx

@@ -10,6 +10,7 @@ import { getCachedData } from "../../slices/apiDataManager";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { MANAGE_MASTER } from "../../utils/constants";
 import { useQueryClient } from "@tanstack/react-query";
+import GlobalModel from "../../components/common/GlobalModel";
 
 
 const MasterPage = () => {
@@ -32,15 +33,6 @@ const MasterPage = () => {
     setIsCreateModalOpen(false);
     setModalConfig(null);
 
-    // Clean up Bootstrap modal manually
-    const modalEl = document.getElementById('master-modal');
-    modalEl?.classList.remove('show');
-    if (modalEl) modalEl.style.display = 'none';
-
-    document.body.classList.remove('modal-open');
-    document.body.style.overflow = 'auto';
-
-    document.querySelectorAll('.modal-backdrop').forEach((el) => el.remove());
   };
 
   const handleModalData = (modalType, item, masterType = selectedMaster) => {
@@ -91,8 +83,9 @@ const MasterPage = () => {
   return (
     <>
       {isCreateModalOpen && (
-        <MasterModal modaldata={modalConfig} closeModal={closeModal} />
-
+        <GlobalModel isOpen={isCreateModalOpen} closeModal={()=>setIsCreateModalOpen(false)} size={modalConfig.masterType === "Application Role" ? "lg":"md"}>
+          <MasterModal modaldata={modalConfig} closeModal={closeModal} />
+        </GlobalModel>
       )}
 
       <div className="container-fluid">

src/pages/master/MasterTable.jsx

@@ -75,13 +75,8 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
       {loading ? (
         <p>Loading...</p>
       ) : (
-        <table
-          className="datatables-users table border-top dataTable no-footer dtr-column"
-          id="DataTables_Table_0"
-          aria-describedby="DataTables_Table_0_info"
-          style={{ width: "100%" }}
-        >
-          <thead>
+        <table className="datatables-users table border-top dataTable no-footer dtr-column w-100">
+          <thead className="shadow-sm">
             <tr>
               <th></th>
               <th className="text-start"> {selectedMaster === "Activity" ? "Activity" : "Name"}</th>