src/pages/master/MasterPage.jsx

@@ -4,27 +4,39 @@ import MasterModal from "../../components/master/MasterModal";
 import { mastersList } from "../../data/masters";
 import { useDispatch, useSelector } from "react-redux";
 import { changeMaster } from "../../slices/localVariablesSlice";
-import useMaster, { useMasterMenu } from "../../hooks/masterHook/useMaster"
+import useMaster, { useMasterMenu } from "../../hooks/masterHook/useMaster";
 import MasterTable from "./MasterTable";
 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 = () => {
-  const {data,isLoading,isError,error:menuError} = useMasterMenu()
+  const { data, isLoading, isError, error: menuError } = useMasterMenu();
-  const [modalConfig, setModalConfig] = useState({ modalType: "", item: null, masterType: null });
+  const [modalConfig, setModalConfig] = useState({
-  const [searchTerm, setSearchTerm] = useState('');
+    modalType: "",
+    item: null,
+    masterType: null,
+  });
+  const [searchTerm, setSearchTerm] = useState("");
   const [filteredResults, setFilteredResults] = useState([]);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
 
   const hasMasterPermission = useHasUserPermission(MANAGE_MASTER);
   const dispatch = useDispatch();
-  const selectedMaster = useSelector((store) => store.localVariables.selectedMaster);
+  const selectedMaster = useSelector(
+    (store) => store.localVariables.selectedMaster
+  );
   const queryClient = useQueryClient();
 
-  const { data: masterData = [], loading, error, RecallApi,isError:isMasterError } = useMaster();
+  const {
+    data: masterData = [],
+    loading,
+    error,
+    RecallApi,
+    isError: isMasterError,
+  } = useMaster();
 
   const openModal = () => setIsCreateModalOpen(true);
 
@@ -33,17 +45,21 @@ const MasterPage = () => {
     setModalConfig(null);
 
     // Clean up Bootstrap modal manually
-    const modalEl = document.getElementById('master-modal');
+    const modalEl = document.getElementById("master-modal");
-    modalEl?.classList.remove('show');
+    modalEl?.classList.remove("show");
-    if (modalEl) modalEl.style.display = 'none';
+    if (modalEl) modalEl.style.display = "none";
 
-    document.body.classList.remove('modal-open');
+    document.body.classList.remove("modal-open");
-    document.body.style.overflow = 'auto';
+    document.body.style.overflow = "auto";
 
-    document.querySelectorAll('.modal-backdrop').forEach((el) => el.remove());
+    document.querySelectorAll(".modal-backdrop").forEach((el) => el.remove());
   };
 
-  const handleModalData = (modalType, item, masterType = selectedMaster) => {
+  const handleModalData = (
+    modalType,
+    item = null,
+    masterType = selectedMaster
+  ) => {
     setModalConfig({ modalType, item, masterType });
   };
 
@@ -54,15 +70,17 @@ const MasterPage = () => {
     if (!masterData?.length) return;
 
     const results = masterData.filter((item) =>
-      Object.values(item).some(
+      Object.values(item).some((field) =>
-        (field) => field?.toString().toLowerCase().includes(value)
+        field?.toString().toLowerCase().includes(value)
       )
     );
     setFilteredResults(results);
   };
   const displayData = useMemo(() => {
     if (searchTerm) return filteredResults;
-    return queryClient.getQueryData(["masterData", selectedMaster]) || masterData;
+    return (
+      queryClient.getQueryData(["masterData", selectedMaster]) || masterData
+    );
   }, [searchTerm, filteredResults, selectedMaster, masterData]);
 
   const columns = useMemo(() => {
@@ -84,15 +102,22 @@ const MasterPage = () => {
     };
   }, []);
 
-  if(isError || isMasterError) return <div className="d-flex flex-column align-items-center justify-content-center py-5">
+  if (isError || isMasterError)
-      <h4 className=" mb-3"><i className="fa-solid fa-triangle-exclamation fs-5" /> Oops, an error occurred</h4>
+    return (
-      <p className="text-muted">{error?.message || menuError?.message}</p>
+      <div className="d-flex flex-column align-items-center justify-content-center py-5">
-  </div>
+        <h4 className=" mb-3">
+          <i className="fa-solid fa-triangle-exclamation fs-5" /> Oops, an error
+          occurred
+        </h4>
+        <p className="text-muted">{error?.message || menuError?.message}</p>
+      </div>
+    );
   return (
     <>
       {isCreateModalOpen && (
-        <MasterModal modaldata={modalConfig} closeModal={closeModal} />
+        <GlobalModel isOpen={isCreateModalOpen} closeModal={()=>closeModal()}>
-
+          <MasterModal modaldata={modalConfig} closeModal={closeModal} />
+        </GlobalModel>
       )}
 
       <div className="container-fluid">
@@ -119,11 +144,17 @@ const MasterPage = () => {
                       >
                         <label>
                           <select
-                            onChange={(e) => dispatch(changeMaster(e.target.value))}
+                            onChange={(e) =>
+                              dispatch(changeMaster(e.target.value))
+                            }
                             name="DataTables_Table_0_length"
                             aria-controls="DataTables_Table_0"
                             className="form-select py-1 px-2"
-                            style={{ fontSize: "0.875rem", height: "32px", width: "190px" }}
+                            style={{
+                              fontSize: "0.875rem",
+                              height: "32px",
+                              width: "190px",
+                            }}
                             value={selectedMaster}
                           >
                             {isLoading && <option value="">Loading...</option>}
@@ -155,10 +186,13 @@ const MasterPage = () => {
                           ></input>
                         </label>
                       </div>
-                      <div className={`dt-buttons btn-group flex-wrap ${!hasMasterPermission && 'd-none'}`}>
+                      <div
+                        className={`dt-buttons btn-group flex-wrap ${
+                          !hasMasterPermission && "d-none"
+                        }`}
+                      >
                         {" "}
                         <div className="input-group">
-
                           <button
                             className={`btn btn-sm  add-new btn-primary `}
                             tabIndex="0"
@@ -166,14 +200,14 @@ const MasterPage = () => {
                             type="button"
                             data-bs-toggle="modal"
                             data-bs-target="#master-modal"
-                            onClick={() => {
+                            onClick={() =>
-                              handleModalData(selectedMaster, "null", selectedMaster)
+                              handleModalData(selectedMaster, null)
-                            }}
+                            }
                           >
                             <span>
                               <i className="bx bx-plus-circle me-2"></i>
                               <span className=" d-sm-inline-block">
-                                Add  {selectedMaster}
+                                Add {selectedMaster}
                               </span>
                             </span>
                           </button>{" "}
@@ -183,13 +217,17 @@ const MasterPage = () => {
                   </div>
                 </div>
 
-                <MasterTable data={displayData} columns={columns} loading={loading} handleModalData={handleModalData} />
+                <MasterTable
+                  data={displayData}
+                  columns={columns}
+                  loading={loading}
+                  handleModalData={handleModalData}
+                />
                 <div style={{ width: "1%" }}></div>
               </div>
             </div>
           </div>
         </div>
-
       </div>
     </>
   );