handle delete master modal

src/components/master/DeleteMaster.jsx

@@ -1,48 +1,46 @@
-import React, { useState } from "react";
+import { useDeleteMasterItem } from "../../hooks/masterHook/useMaster";
-import axios from "axios";
 
-const API_URL = "http://localhost:5000/mastersdata";
 
 const DeleteMaster = ({ master, onClose }) => {
-  const [loader, setLoader] = useState(false);
+  const { mutate: deleteMaster, isPending } = useDeleteMasterItem();
 
   const handleDelete = () => {
-    const index = mastersdata[master?.masterType]?.findIndex(
+    deleteMaster(
-      (item) => String(item?.id) === String(master?.item?.id)
+      { masterType: master?.masterType, item: master?.item },
+      {
+        onSuccess: () => {
+          onClose(); 
+        },
+      }
     );
-    if (index !== -1) {
-      mastersdata[master?.masterType].splice(index, 1);
-    }
-    onClose();
   };
 
   return (
     <div className="row g-2">
-      <p className="h5">Are your sure , you want delete</p>
+      <p className="h5">Are you sure you want to delete?</p>
-      <div className="col-12 d-flex justify-content-between width-md-6 width-sm-12">
+      <div className="col-12 d-flex justify-content-between">
         <button
-          type="submit"
+          type="button"
-          className="btn btn-primary me-3"
+          className="btn btn-danger me-3"
           onClick={handleDelete}
+          disabled={isPending}
         >
-          {loader ? (
+          {isPending ? (
-            <div className="spinner-border text-primary" role="status">
+            <div className="spinner-border text-light" role="status">
-              <span className="sr-only">Loading...</span>
+              <span className="visually-hidden">Loading...</span>
             </div>
           ) : (
             "Delete"
           )}
         </button>
         <button
-          type="button"   // ✅ not reset
+          type="button"
           className="btn btn-label-secondary"
-          onClick={() => {
+          onClick={onClose}
-            onClose?.(); // properly close modal
+          disabled={isPending}
-          }}
         >
           Cancel
         </button>
-
       </div>
     </div>
   );

src/pages/master/MasterPage.jsx

@@ -1,235 +1,135 @@
-import React, { useState, useEffect, useMemo } from "react";
+import React, { useState, useMemo, useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useQueryClient } from "@tanstack/react-query";
 import Breadcrumb from "../../components/common/Breadcrumb";
 import MasterModal from "../../components/master/MasterModal";
-import { mastersList } from "../../data/masters";
+import ConfirmModal from "../../components/common/ConfirmModal";
-import { useDispatch, useSelector } from "react-redux";
-import { changeMaster } from "../../slices/localVariablesSlice";
-import useMaster, { useMasterMenu } from "../../hooks/masterHook/useMaster";
 import MasterTable from "./MasterTable";
-import { getCachedData } from "../../slices/apiDataManager";
+import useMaster, { useDeleteMasterItem, useMasterMenu } from "../../hooks/masterHook/useMaster";
+import { changeMaster } from "../../slices/localVariablesSlice";
 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 [modalConfig, setModalConfig] = useState(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 queryClient = useQueryClient();
+  const selectedMaster = useSelector((store) => store.localVariables.selectedMaster);
+  const hasMasterPermission = useHasUserPermission(MANAGE_MASTER);
 
-  const {
+  const { data: menuData, isLoading: menuLoading, isError: menuErrorFlag, error: menuError } = useMasterMenu();
-    data: masterData = [],
+  const { data: masterData = [], loading, isError: isMasterError } = useMaster();
-    loading,
+  const { mutate: DeleteMaster, isPending: isDeleting } = useDeleteMasterItem();
-    error,
-    RecallApi,
-    isError: isMasterError,
-  } = useMaster();
 
-  const openModal = () => setIsCreateModalOpen(true);
+  const [modalConfig, setModalConfig] = useState(null);
+  const [deleteData, setDeleteData] = useState(null);
+  const [searchTerm, setSearchTerm] = useState("");
 
-  const closeModal = () => {
+  const displayData = useMemo(() => {
-    setIsCreateModalOpen(false);
+    const dataSource = queryClient.getQueryData(["masterData", selectedMaster]) || masterData;
-    setModalConfig(null);
+    if (!searchTerm) return dataSource;
-
+    return dataSource.filter((item) =>
-    // Clean up Bootstrap modal manually
+      Object.values(item).some((val) =>
-    const modalEl = document.getElementById("master-modal");
+        val?.toString().toLowerCase().includes(searchTerm.toLowerCase())
-    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 = null,
-    masterType = selectedMaster
-  ) => {
-    setModalConfig({ modalType, item, masterType });
-  };
-
-  const handleSearch = (e) => {
-    const value = e.target.value.toLowerCase();
-    setSearchTerm(value);
-
-    if (!masterData?.length) return;
-
-    const results = masterData.filter((item) =>
-      Object.values(item).some((field) =>
-        field?.toString().toLowerCase().includes(value)
       )
     );
-    setFilteredResults(results);
+  }, [searchTerm, masterData, selectedMaster, queryClient]);
-  };
-  const displayData = useMemo(() => {
-    if (searchTerm) return filteredResults;
-    return (
-      queryClient.getQueryData(["masterData", selectedMaster]) || masterData
-    );
-  }, [searchTerm, filteredResults, selectedMaster, masterData]);
 
   const columns = useMemo(() => {
-    if (!displayData?.length) return [];
+    if (!displayData.length) return [];
-    return Object.keys(displayData[0]).map((key) => ({
+    return Object.keys(displayData[0]).map((key) => ({ key, label: key.toUpperCase() }));
-      key,
-      label: key.toUpperCase(),
-    }));
   }, [displayData]);
 
-  useEffect(() => {
+  const handleModalData = (type, item = null, masterType = selectedMaster) => {
-    if (modalConfig) openModal();
+    if (type === "delete") setDeleteData({ item, masterType });
-  }, [modalConfig]);
+    else setModalConfig({ modalType: type, item, masterType });
+  };
 
-  useEffect(() => {
+  const handleDeleteSubmit = () => {
-    return () => {
+    if (!deleteData) return;
-      setIsCreateModalOpen(false);
+    DeleteMaster({ masterType: deleteData.masterType, item: deleteData.item }, {
-      closeModal();
+      onSuccess: () => setDeleteData(null),
-    };
+    });
-  }, []);
+  };
 
-  if (isError || isMasterError)
+  if (menuErrorFlag || isMasterError)
     return (
       <div className="d-flex flex-column align-items-center justify-content-center py-5">
-        <h4 className=" mb-3">
+        <h4 className="mb-3">
-          <i className="fa-solid fa-triangle-exclamation fs-5" /> Oops, an error
+          <i className="fa-solid fa-triangle-exclamation fs-5" /> Oops, an error occurred
-          occurred
         </h4>
-        <p className="text-muted">{error?.message || menuError?.message}</p>
+        <p className="text-muted">{menuError?.message || "Error fetching master data"}</p>
       </div>
     );
+
   return (
     <>
-      {isCreateModalOpen && (
+      {modalConfig && (
         <GlobalModel
-          size={
+          size={["Application Role", "Edit-Application Role"].includes(modalConfig.masterType) ? "lg" : "md"}
-            modalConfig?.masterType === "Application Role" ||
+          isOpen={!!modalConfig}
-            modalConfig?.masterType === "Edit-Application Role"
+          closeModal={() => setModalConfig(null)}
-              ? "lg"
-              : "md"
-          }
-          isOpen={isCreateModalOpen}
-          closeModal={() => closeModal()}
         >
-          <MasterModal modaldata={modalConfig} closeModal={closeModal} />
+          <MasterModal modaldata={modalConfig} closeModal={() => setModalConfig(null)} />
         </GlobalModel>
       )}
 
+      <ConfirmModal
+        type="delete"
+        header={`Delete ${selectedMaster}`}
+        message={`Are you sure you want to delete this ${selectedMaster}?`}
+        isOpen={!!deleteData}
+        loading={isDeleting}
+        onSubmit={handleDeleteSubmit}
+        onClose={() => setDeleteData(null)}
+      />
+
       <div className="container-fluid">
-        <Breadcrumb
+        <Breadcrumb data={[{ label: "Home", link: "/dashboard" }, { label: "Masters" }]} />
-          data={[
+
-            { label: "Home", link: "/dashboard" },
-            { label: "Masters", link: null },
-          ]}
-        ></Breadcrumb>
         <div className="row">
           <div className="card">
             <div className="card-datatable table-responsive py-4">
-              <div
+              <div className="row mb-2">
-                id="DataTables_Table_0_wrapper"
+                <div className="col-md-3 col-sm-6">
-                className="dataTables_wrapper dt-bootstrap5 no-footer"
+                  <select
-                style={{ width: "98%" }}
+                    className="form-select py-1 px-2"
-              >
+                    style={{ fontSize: "0.875rem", height: "32px", width: "190px" }}
-                <div className="row  mb-2">
+                    value={selectedMaster}
-                  <div className="col-md-3 col-sm-6">
+                    onChange={(e) => dispatch(changeMaster(e.target.value))}
-                    <div className="ms-0">
+                  >
-                      <div
+                    {menuLoading ? (
-                        className="dataTables_length text-start"
+                      <option value="">Loading...</option>
-                        id="DataTables_Table_0_length"
+                    ) : (
-                      >
+                      menuData?.map((item) => <option key={item.id} value={item.name}>{item.name}</option>)
-                        <label>
+                    )}
-                          <select
+                  </select>
-                            onChange={(e) =>
+                </div>
-                              dispatch(changeMaster(e.target.value))
+                <div className="col-md-9 col-sm-6 d-flex justify-content-end align-items-center gap-2">
-                            }
+                  <div className="w-25"><input
-                            name="DataTables_Table_0_length"
+                    type="search"
-                            aria-controls="DataTables_Table_0"
+                    className="form-control form-control-sm"
-                            className="form-select py-1 px-2"
+                    placeholder="Search"
-                            style={{
+                    value={searchTerm}
-                              fontSize: "0.875rem",
+                    onChange={(e) => setSearchTerm(e.target.value)}
-                              height: "32px",
+                  /></div>
-                              width: "190px",
+                  {hasMasterPermission && (
-                            }}
+                    <button
-                            value={selectedMaster}
+                      className="btn btn-sm btn-primary"
-                          >
+                      onClick={() => handleModalData(selectedMaster, null, selectedMaster)}
-                            {isLoading && <option value="">Loading...</option>}
+                    >
-                            {!isLoading &&
+                      <i className="bx bx-plus-circle me-2"></i>Add {selectedMaster}
-                              data?.map((item) => (
+                    </button>
-                                <option key={item.id} value={item.name}>
+                  )}
-                                  {item.name}
-                                </option>
-                              ))}
-                          </select>
-                        </label>
-                      </div>
-                    </div>
-                  </div>
-                  <div className="col-md-9 col-sm-6">
-                    <div className="dt-action-buttons text-xl-end text-lg-start text-md-end text-start d-flex align-items-center justify-content-sm-end justify-content-between gap-2 flex-md-row flex-sm-column mb-3 mb-md-0 mt-1 mt-md-0 gap-md-4">
-                      <div
-                        id="DataTables_Table_0_filter"
-                        className="dataTables_filter"
-                      >
-                        <label>
-                          <input
-                            type="search"
-                            className="form-control form-control-sm"
-                            placeholder="Search"
-                            aria-controls="DataTables_Table_0"
-                            value={searchTerm}
-                            onChange={handleSearch}
-                          ></input>
-                        </label>
-                      </div>
-                      <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"
-                            aria-controls="DataTables_Table_0"
-                            type="button"
-                            data-bs-toggle="modal"
-                            data-bs-target="#master-modal"
-                            onClick={() =>
-                              handleModalData(selectedMaster, null)
-                            }
-                          >
-                            <span>
-                              <i className="bx bx-plus-circle me-2"></i>
-                              <span className=" d-sm-inline-block">
-                                Add {selectedMaster}
-                              </span>
-                            </span>
-                          </button>{" "}
-                        </div>
-                      </div>
-                    </div>
-                  </div>
                 </div>
-
-                <MasterTable
-                  data={displayData}
-                  columns={columns}
-                  loading={loading}
-                  handleModalData={handleModalData}
-                />
-                <div style={{ width: "1%" }}></div>
               </div>
+
+              <MasterTable
+                data={displayData}
+                columns={columns}
+                loading={loading}
+                handleModalData={handleModalData}
+              />
             </div>
           </div>
         </div>

src/pages/master/MasterTable.jsx

@@ -179,9 +179,8 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
                           aria-label="Delete"
                           type="button"
                           className="btn p-0 dropdown-toggle hide-arrow"
-                          onClick={() =>
+                          onClick={() => handleModalData("delete", item, selectedMaster)}
-                            handleModalData("delete", item, selectedMaster)
+
-                          }
                         >
                           <i className="bx bx-trash me-1 text-danger"></i>
                         </button>