src/components/master/MasterModal.jsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-
 import CreateRole from "./CreateRole";
 import DeleteMaster from "./DeleteMaster";
 import EditRole from "./EditRole";
@@ -19,66 +18,41 @@ import EditContactCategory from "./EditContactCategory";
 import EditContactTag from "./EditContactTag";
 import { useDeleteMasterItem } from "../../hooks/masterHook/useMaster";
 
+
 const MasterModal = ({ modaldata, closeModal }) => {
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const { mutate: deleteMasterItem, isPending } = useDeleteMasterItem();
 
-  // const handleSelectedMasterDeleted = async () =>
-  // {
-  //   debugger
-  //   const deleteFn = MasterRespository[modaldata.masterType];
-  //   if (!deleteFn) {
-  //     showToast(`No delete strategy defined for master type`,"error");
-  //     return false;
-  //   }
-  //    try
-  //    {
-  //      const response = await deleteFn( modaldata?.item?.id );
-  //      const selected_cachedData = getCachedData( modaldata?.masterType );
-  //      const updated_master =  selected_cachedData?.filter(item => item.id !== modaldata?.item.id);
-  //      cacheData( modaldata?.masterType, updated_master )
-
-  //      showToast(`${modaldata?.masterType} is deleted successfully`, "success");
-  //      handleCloseDeleteModal()
-
-  //    } catch ( error )
-  //    {
-  //      const message = error.response.data.message || error.message || "Error occured api during call"
-  //      showToast(message, "success");
-  //   }
-  // }
-
   const handleSelectedMasterDeleted = () => {
-    if (!modaldata?.masterType || !modaldata?.item?.id) {
+    const { masterType, item, validateFn } = modaldata || {};
+    if (!masterType || !item?.id) {
       showToast("Missing master type or item", "error");
       return;
     }
+
     deleteMasterItem(
-      {
-        masterType: modaldata.masterType,
-        item: modaldata.item,
-        validateFn: modaldata.validateFn, // optional
-      },
-      {
-        onSuccess: () => {
-          handleCloseDeleteModal();
-        },
-      }
+      { masterType, item, validateFn },
+      { onSuccess: handleCloseDeleteModal }
     );
   };
 
+  const handleCloseDeleteModal = () => {
+    setIsDeleteModalOpen(false);
+    closeModal();
+  };
+
   useEffect(() => {
     if (modaldata?.modalType === "delete") {
       setIsDeleteModalOpen(true);
     }
   }, [modaldata]);
 
-  const handleCloseDeleteModal = () => {
-    setIsDeleteModalOpen(false);
+  if (!modaldata?.modalType) {
     closeModal();
-  };
+    return null;
+  }
 
-  if (modaldata?.modalType === "delete" && isDeleteModalOpen) {
+  if (modaldata.modalType === "delete" && isDeleteModalOpen) {
     return (
       <div
         className="modal fade show"
@@ -90,86 +64,63 @@ const MasterModal = ({ modaldata, closeModal }) => {
         <ConfirmModal
           type="delete"
           header={`Delete ${modaldata.masterType}`}
-          message={"Are you sure you want delete?"}
+          message="Are you sure you want delete?"
           onSubmit={handleSelectedMasterDeleted}
           onClose={handleCloseDeleteModal}
         />
       </div>
     );
   }
+
+  const renderModalContent = () => {
+    const { modalType, item, masterType } = modaldata;
+
+    const modalComponents = {
+      "Application Role": <CreateRole masmodalType={masterType} onClose={closeModal} />,
+      "Edit-Application Role": <EditRole master={modaldata} onClose={closeModal} />,
+      "Job Role": <CreateJobRole onClose={closeModal} />,
+      "Edit-Job Role": <EditJobRole data={item} onClose={closeModal} />,
+      "Activity": <CreateActivity onClose={closeModal} />,
+      "Edit-Activity": <EditActivity activityData={item} onClose={closeModal} />,
+      "Work Category": <CreateWorkCategory onClose={closeModal} />,
+      "Edit-Work Category": <EditWorkCategory data={item} onClose={closeModal} />,
+      "Contact Category": <CreateCategory data={item} onClose={closeModal} />,
+      "Edit-Contact Category": <EditContactCategory data={item} onClose={closeModal} />,
+      "Contact Tag": <CreateContactTag data={item} onClose={closeModal} />,
+      "Edit-Contact Tag": <EditContactTag data={item} onClose={closeModal} />,
+    };
+
+    return modalComponents[modalType] || null;
+  };
+
+  const isLargeModal = ["Application Role", "Edit-Application Role"].includes(
+    modaldata.modalType
+  );
+
   return (
     <div
-      className="modal fade"
+      className="modal fade show"
       id="master-modal"
       tabIndex="-1"
-      aria-hidden="true"
       role="dialog"
+      aria-hidden="true"
       aria-labelledby="modalToggleLabel"
+      style={{ display: "block" }}
     >
-      <div
-        className={`modal-dialog mx-sm-auto mx-1 ${
-          ["Application Role", "Edit-Application Role"].includes(
-            modaldata?.modalType
-          )
-            ? "modal-lg"
-            : "modal-md"
-        } modal-simple`}
-      >
+      <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>
+              <h6>{modaldata?.modalType}</h6>
               <button
                 type="button"
                 className="btn-close"
                 data-bs-dismiss="modal"
                 aria-label="Close"
                 onClick={closeModal}
-              ></button>
+              />
             </div>
-
-            {modaldata.modalType === "Application Role" && (
-              <CreateRole
-                masmodalType={modaldata.masterType}
-                onClose={closeModal}
-              />
-            )}
-            {modaldata.modalType === "Edit-Application Role" && (
-              <EditRole master={modaldata} onClose={closeModal} />
-            )}
-            {modaldata.modalType === "Job Role" && (
-              <CreateJobRole onClose={closeModal} />
-            )}
-            {modaldata.modalType === "Edit-Job Role" && (
-              <EditJobRole data={modaldata.item} onClose={closeModal} />
-            )}
-            {modaldata.modalType === "Activity" && (
-              <CreateActivity onClose={closeModal} />
-            )}
-            {modaldata.modalType === "Edit-Activity" && (
-              <EditActivity
-                activityData={modaldata.item}
-                onClose={closeModal}
-              />
-            )}
-            {modaldata.modalType === "Work Category" && (
-              <CreateWorkCategory onClose={closeModal} />
-            )}
-            {modaldata.modalType === "Edit-Work Category" && (
-              <EditWorkCategory data={modaldata.item} onClose={closeModal} />
-            )}
-            {modaldata.modalType === "Contact Category" && (
-              <CreateCategory data={modaldata.item} onClose={closeModal} />
-            )}
-            {modaldata.modalType === "Edit-Contact Category" && (
-              <EditContactCategory data={modaldata.item} onClose={closeModal} />
-            )}
-            {modaldata.modalType === "Contact Tag" && (
-              <CreateContactTag data={modaldata.item} onClose={closeModal} />
-            )}
-            {modaldata.modalType === "Edit-Contact Tag" && (
-              <EditContactTag data={modaldata.item} onClose={closeModal} />
-            )}
+            {renderModalContent()}
           </div>
         </div>
       </div>

src/data/masters.js

@@ -8,6 +8,7 @@ export const mastersList = [
   { id: 6, name: "Contact Tag" },
   { id: 7, name: "Expense Type" },
   { id: 8, name: "Payment Mode" },
+  { id: 9, name: "Expense Status" },
 ];
 // -------------------
 

src/hooks/masterHook/useMaster.js

@@ -113,6 +113,8 @@ const fetchMasterData = async (masterType) => {
       return (await MasterRespository.getExpenseType()).data;
     case "Payment Mode":
       return (await MasterRespository.getPaymentMode()).data;
+    case "Expense Status":
+      return (await MasterRespository.getExpenseStatus()).data;
     case "Status":
       return [
         {

src/repositories/MastersRepository.jsx

@@ -61,6 +61,9 @@ export const MasterRespository = {
   getExpenseType:()=>api.get('/api/Master/expenses-types'),
 
 
-  getPaymentMode:()=>api.get('/api/Master/payment-modes')
+  getPaymentMode:()=>api.get('/api/Master/payment-modes'),
+
+
+  getExpenseStatus:()=>api.get('/api/Master/expenses-status')
   
 }