src/components/master/DeleteMaster.jsx

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

src/pages/master/MasterPage.jsx

@@ -1,126 +1,215 @@
-import React, { useState, useMemo, useEffect } from "react";
+import React, { useState, useEffect, useMemo } 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 ConfirmModal from "../../components/common/ConfirmModal";
+import { mastersList } from "../../data/masters";
-import MasterTable from "./MasterTable";
+import { useDispatch, useSelector } from "react-redux";
-import useMaster, { useDeleteMasterItem, useMasterMenu } from "../../hooks/masterHook/useMaster";
 import { changeMaster } from "../../slices/localVariablesSlice";
+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 dispatch = useDispatch();
+  const { data, isLoading, isError, error: menuError } = useMasterMenu();
-  const queryClient = useQueryClient();
-  const selectedMaster = useSelector((store) => store.localVariables.selectedMaster);
-  const hasMasterPermission = useHasUserPermission(MANAGE_MASTER);
-
-  const { data: menuData, isLoading: menuLoading, isError: menuErrorFlag, error: menuError } = useMasterMenu();
-  const { data: masterData = [], loading, isError: isMasterError } = useMaster();
-  const { mutate: DeleteMaster, isPending: isDeleting } = useDeleteMasterItem();
-
   const [modalConfig, setModalConfig] = useState(null);
-  const [deleteData, setDeleteData] = useState(null);
   const [searchTerm, setSearchTerm] = useState("");
+  const [filteredResults, setFilteredResults] = useState([]);
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
 
-  const displayData = useMemo(() => {
+  const hasMasterPermission = useHasUserPermission(MANAGE_MASTER);
-    const dataSource = queryClient.getQueryData(["masterData", selectedMaster]) || masterData;
+  const dispatch = useDispatch();
-    if (!searchTerm) return dataSource;
+  const selectedMaster = useSelector(
-    return dataSource.filter((item) =>
+    (store) => store.localVariables.selectedMaster
-      Object.values(item).some((val) =>
+  );
-        val?.toString().toLowerCase().includes(searchTerm.toLowerCase())
+  const queryClient = useQueryClient();
+
+  const {
+    data: masterData = [],
+    loading,
+    error,
+    RecallApi,
+    isError: isMasterError,
+  } = useMaster();
+
+  const openModal = () => setIsCreateModalOpen(true);
+
+  const closeModal = () => {
+    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 = 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)
       )
     );
-  }, [searchTerm, masterData, selectedMaster, queryClient]);
+    setFilteredResults(results);
+  };
+  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) => ({ key, label: key.toUpperCase() }));
+    return Object.keys(displayData[0]).map((key) => ({
+      key,
+      label: key.toUpperCase(),
+    }));
   }, [displayData]);
 
-  const handleModalData = (type, item = null, masterType = selectedMaster) => {
+  useEffect(() => {
-    if (type === "delete") setDeleteData({ item, masterType });
+    if (modalConfig) openModal();
-    else setModalConfig({ modalType: type, item, masterType });
+  }, [modalConfig]);
-  };
 
-  const handleDeleteSubmit = () => {
+  useEffect(() => {
-    if (!deleteData) return;
+    return () => {
-    DeleteMaster({ masterType: deleteData.masterType, item: deleteData.item }, {
+      setIsCreateModalOpen(false);
-      onSuccess: () => setDeleteData(null),
+      closeModal();
-    });
     };
+  }, []);
 
-  if (menuErrorFlag || isMasterError)
+  if (isError || isMasterError)
     return (
       <div className="d-flex flex-column align-items-center justify-content-center py-5">
         <h4 className=" mb-3">
-          <i className="fa-solid fa-triangle-exclamation fs-5" /> Oops, an error occurred
+          <i className="fa-solid fa-triangle-exclamation fs-5" /> Oops, an error
+          occurred
         </h4>
-        <p className="text-muted">{menuError?.message || "Error fetching master data"}</p>
+        <p className="text-muted">{error?.message || menuError?.message}</p>
       </div>
     );
-
   return (
     <>
-      {modalConfig && (
+      {isCreateModalOpen && (
-        <GlobalModel
+        <GlobalModel isOpen={isCreateModalOpen} closeModal={()=>closeModal()}>
-          size={["Application Role", "Edit-Application Role"].includes(modalConfig.masterType) ? "lg" : "md"}
+          <MasterModal modaldata={modalConfig} closeModal={closeModal} />
-          isOpen={!!modalConfig}
-          closeModal={() => setModalConfig(null)}
-        >
-          <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 data={[{ label: "Home", link: "/dashboard" }, { label: "Masters" }]} />
+        <Breadcrumb
-
+          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
+                id="DataTables_Table_0_wrapper"
+                className="dataTables_wrapper dt-bootstrap5 no-footer"
+                style={{ width: "98%" }}
+              >
                 <div className="row  mb-2">
                   <div className="col-md-3 col-sm-6">
-                  <select
+                    <div className="ms-0">
-                    className="form-select py-1 px-2"
+                      <div
-                    style={{ fontSize: "0.875rem", height: "32px", width: "190px" }}
+                        className="dataTables_length text-start"
-                    value={selectedMaster}
+                        id="DataTables_Table_0_length"
-                    onChange={(e) => dispatch(changeMaster(e.target.value))}
                       >
-                    {menuLoading ? (
+                        <label>
-                      <option value="">Loading...</option>
+                          <select
-                    ) : (
+                            onChange={(e) =>
-                      menuData?.map((item) => <option key={item.id} value={item.name}>{item.name}</option>)
+                              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",
+                            }}
+                            value={selectedMaster}
+                          >
+                            {isLoading && <option value="">Loading...</option>}
+                            {!isLoading &&
+                              data?.map((item) => (
+                                <option key={item.id} value={item.name}>
+                                  {item.name}
+                                </option>
+                              ))}
                           </select>
+                        </label>
                       </div>
-                <div className="col-md-9 col-sm-6 d-flex justify-content-end align-items-center gap-2">
+                    </div>
-                  <div className="w-25"><input
+                  </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={(e) => setSearchTerm(e.target.value)}
+                            onChange={handleSearch}
-                  /></div>
+                          ></input>
-                  {hasMasterPermission && (
+                        </label>
-                    <button
+                      </div>
-                      className="btn btn-sm btn-primary"
+                      <div
-                      onClick={() => handleModalData(selectedMaster, null, selectedMaster)}
+                        className={`dt-buttons btn-group flex-wrap ${
+                          !hasMasterPermission && "d-none"
+                        }`}
                       >
-                      <i className="bx bx-plus-circle me-2"></i>Add {selectedMaster}
+                        {" "}
-                    </button>
+                        <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>
 
@@ -130,6 +219,8 @@ const MasterPage = () => {
                   loading={loading}
                   handleModalData={handleModalData}
                 />
+                <div style={{ width: "1%" }}></div>
+              </div>
             </div>
           </div>
         </div>

src/pages/master/MasterTable.jsx

@@ -27,7 +27,7 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
     "maxFilesAllowed",
     "maxSizeAllowedInMB",
     "isValidationRequired",
-    "documentCategory",
+    "documentCategory"
   ];
 
   const safeData = Array.isArray(data) ? data : [];
@@ -73,11 +73,9 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
 
     const handleSystemDefined = (message) =>{
       if(message){
-      showToast(
+      showToast(`The system-defined item ${selectedMaster} cannot be ${message}.`)
-        `The system-defined item ${selectedMaster} cannot be ${message}.`
+      }
-      );
     }
-  };
 
   return (
     <div className="table-responsive">
@@ -88,18 +86,12 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
           <thead className="shadow-sm">
             <tr>
               <th></th>
-              <th className="text-start">
+              <th className="text-start"> {selectedMaster === "Activity" ? "Activity" : "Name"}</th>
-                {" "}
+              <th className="text-start">  {selectedMaster === "Activity"
-                {selectedMaster === "Activity" ? "Activity" : "Name"}
-              </th>
-              <th className="text-start">
-                {" "}
-                {selectedMaster === "Activity"
     ? "Unit"
     : selectedMaster === "Document Type"
     ? "Content Type"
-                  : "Description"}
+    : "Description"}</th>
-              </th>
               <th className={` ${!hasMasterPermission && "d-none"}`}>
                 Actions
               </th>
@@ -134,15 +126,15 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
                     </td>
                   ))}
                   <td className={!hasMasterPermission ? "d-none" : ""}>
-                    {(selectedMaster === "Application Role" ||
+                  {(selectedMaster === "Application Role" || selectedMaster === "Work Category") && item?.isSystem ? ( 
-                      selectedMaster === "Work Category") &&
-                    item?.isSystem ? (
                       <>
                       <button
                         aria-label="Modify"
                         type="button"
                         className="btn p-0 dropdown-toggle hide-arrow"
-                          onClick={() => handleSystemDefined("updated")}
+                        onClick={() =>
+                          handleSystemDefined("updated")
+                        }
                       >
                         <i className="bx bxs-edit me-2 text-primary"></i>
                       </button>
@@ -165,11 +157,7 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
                           data-bs-target="#master-modal"
                           className="btn p-0 dropdown-toggle hide-arrow"
                           onClick={() =>
-                            handleModalData(
+                            handleModalData(`Edit-${selectedMaster}`, item, selectedMaster)
-                              `Edit-${selectedMaster}`,
-                              item,
-                              selectedMaster
-                            )
                           }
                         >
                           <i className="bx bxs-edit me-2 text-primary"></i>
@@ -180,7 +168,6 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
   type="button"
   className="btn p-0 dropdown-toggle hide-arrow"
   onClick={() => handleModalData("delete", item, selectedMaster)}
-
                         >
                           <i className="bx bx-trash me-1 text-danger"></i>
                         </button>

src/repositories/MastersRepository.jsx

@@ -61,7 +61,7 @@ export const MasterRespository = {
   createContactCategory: (data) =>
     api.post(`/api/master/contact-category`, data),
   updateContactCategory: (id, data) =>
-    api.post(`/api/master/contact-category/edit/${id}`, data),
+    api.put(`/api/master/contact-category/edit/${id}`, data),
 
   getContactTag: () => api.get(`/api/master/contact-tags`),
   createContactTag: (data) => api.post(`/api/master/contact-tag`, data),

src/router/AppRoutes.jsx

@@ -47,11 +47,7 @@ import MainRegisterPage from "../pages/authentication/MainRegisterPage";
 import MainForgetPage from "../pages/authentication/MainForgetPage";
 import MainResetPasswordPage from "../pages/authentication/MainResetPasswordPage";
 import TenantPage from "../pages/Tenant/TenantPage";
-import { Navigate } from "react-router-dom";
+
-import RootRedirect from "./RootRedirect";
-import CreateTenant from "../pages/Tenant/CreateTenant";
-import SuperTenantDetails from "../pages/Tenant/SuperTenantDetails";
-import SelfTenantDetails from "../pages/Tenant/SelfTenantDetails";
 const router = createBrowserRouter(
   [
     {
@@ -95,9 +91,6 @@ const router = createBrowserRouter(
             { path: "/expenses", element: <ExpensePage /> },
             { path: "/masters", element: <MasterPage /> },
             { path: "/tenants", element: <TenantPage /> },
-            { path: "/tenants/new-tenant", element: <CreateTenant /> },
-            { path: "/tenant/:tenantId", element: <SuperTenantDetails /> },
-            { path: "/tenant/self", element: <SelfTenantDetails /> },
             { path: "/help/support", element: <Support /> },
             { path: "/help/docs", element: <Documentation /> },
             { path: "/help/connect", element: <Connect /> },