src/components/master/ManagePaymentMode.jsx

@@ -0,0 +1,80 @@
+import React, { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useCreatePaymentMode } from "../../hooks/masterHook/useMaster";
+
+const ExpnseSchema = z.object({
+  name: z.string().min(1, { message: "Name is required" }),
+  description: z.string().min(1, { message: "Description is required" }),
+});
+
+const ManagePaymentMode = ({ data = null, onClose }) => {
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(ExpnseSchema),
+    defaultValues: { name: "", noOfPersonsRequired: false, description: "" },
+  });
+
+  const { mutate: CreatePaymentMode, isPending } = useCreatePaymentMode(() =>
+    onClose?.()
+  );
+
+  const onSubmit = (payload) => {
+    CreatePaymentMode(payload);
+  };
+
+
+  return (
+    <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
+      <div className="col-12 col-md-12">
+        <label className="form-label">Payment Mode Name</label>
+        <input
+          type="text"
+          {...register("name")}
+          className={`form-control ${errors.name ? "is-invalids" : ""}`}
+        />
+        {errors.name && <p className="danger-text">{errors.name.message}</p>}
+      </div>
+      <div className="col-12 col-md-12">
+        <label className="form-label" htmlFor="description">
+          Description
+        </label>
+        <textarea
+          rows="3"
+          {...register("description")}
+          className={`form-control ${errors.description ? "is-invalids" : ""}`}
+        ></textarea>
+
+        {errors.description && (
+          <p className="danger-text">{errors.description.message}</p>
+        )}
+      </div>
+
+      <div className="col-12 text-center">
+        <button
+          type="submit"
+          className="btn btn-sm btn-primary me-3"
+          disabled={isPending }
+        >
+          {isPending ? "Please Wait..." : "Submit"}
+        </button>
+        <button
+          type="reset"
+          className="btn btn-sm btn-label-secondary "
+          data-bs-dismiss="modal"
+          aria-label="Close"
+          disabled={isPending}
+        >
+          Cancel
+        </button>
+      </div>
+    </form>
+  );
+};
+
+export default ManagePaymentMode;

src/components/master/MasterModal.jsx

@@ -18,6 +18,7 @@ import EditContactCategory from "./EditContactCategory";
 import EditContactTag from "./EditContactTag";
 import { useDeleteMasterItem } from "../../hooks/masterHook/useMaster";
 import ManageExpenseType from "./ManageExpenseType";
+import ManagePaymentMode from "./ManagePaymentMode";
 
 
 const MasterModal = ({ modaldata, closeModal }) => {
@@ -90,7 +91,8 @@ const MasterModal = ({ modaldata, closeModal }) => {
       "Contact Tag": <CreateContactTag data={item} onClose={closeModal} />,
       "Edit-Contact Tag": <EditContactTag data={item} onClose={closeModal} />,
       "Expense Type":<ManageExpenseType  onClose={closeModal} />,
-      "Edit-Expense Type":<ManageExpenseType data={item} onClose={closeModal} />
+      "Edit-Expense Type":<ManageExpenseType data={item} onClose={closeModal} />,
+      "Payment Mode":<ManagePaymentMode onClose={closeModal}/>
     };
 
     return modalComponents[modalType] || null;

src/hooks/masterHook/useMaster.js

@@ -582,6 +582,30 @@ export const useUpdateExpenseType = (onSuccessCallback) =>
   });
 }
 
+// -----------------Payment Mode -------------
+
+export const useCreatePaymentMode = (onSuccessCallback)=>{
+    const queryClient = useQueryClient();
+
+  return useMutation( {
+    mutationFn: async ( payload ) =>
+    {
+      const resp = await MasterRespository.createPaymentMode(payload);
+      return resp.data;
+    },
+    onSuccess: ( data ) =>
+    {
+      queryClient.invalidateQueries( {queryKey:[ "masterData", "Payment Mode" ]} )
+      showToast( "Payment Mode added successfully", "success" );
+      if(onSuccessCallback) onSuccessCallback(data)
+    },
+    onError: ( error ) =>
+    {
+     showToast(error.message || "Something went wrong", "error");
+    }
+  })
+}
+
 // -Delete Master --------
 export const useDeleteMasterItem = () => {
   const queryClient = useQueryClient();

src/repositories/MastersRepository.jsx

@@ -65,6 +65,7 @@ export const MasterRespository = {
 
 
   getPaymentMode:()=>api.get('/api/Master/payment-modes'),
+  createPaymentMode:(data)=>api.post(`/api/Master/payment-mode`,data),
 
 
   getExpenseStatus:()=>api.get('/api/Master/expenses-status')