src/components/master/CreateExpense.jsx

@@ -0,0 +1,72 @@
+
+import React from 'react'
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useCreateExpenseType } from '../../hooks/masterHook/useMaster';
+
+
+const ExpnseSchema = z.object({
+  name: z.string().min(1, { message: "Name is required" }),
+  noOfPersonsRequired: z.boolean().default(false),
+  description: z.string().min(1, { message: "Description is required" }),
+});
+
+
+const CreateExpense = ({onClose}) => {
+    const {register,handleSubmit,formState : {errors}} = useForm({
+        resolver:zodResolver(ExpnseSchema),
+        defaultValues:{name:"",noOfPersonsRequired:false,description:""}
+    })
+    const {mutate:CreateExpenseType,isPending} = useCreateExpenseType(()=>onClose?.())
+
+    const onSubmit = (payload) => {
+        CreateExpenseType(payload)
+    };
+  
+  return (
+    <form  className="row g-2" onSubmit={handleSubmit(onSubmit)}>
+        <div className="col-12 col-md-12">
+          <label className="form-label">Expesne Type 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 col-md-12 d-flex align-items-center">
+          <label className='from-label'>No. of Persons Required </label> <input  type="checkbox"
+                                          className="form-check-input  ms-2"{...register("noOfPersonsRequired")}/>
+        </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 CreateExpense

src/components/master/MasterModal.jsx

@@ -17,6 +17,7 @@ import CreateContactTag from "./CreateContactTag";
 import EditContactCategory from "./EditContactCategory";
 import EditContactTag from "./EditContactTag";
 import { useDeleteMasterItem } from "../../hooks/masterHook/useMaster";
+import CreateExpense from "./createExpense";
 
 
 const MasterModal = ({ modaldata, closeModal }) => {
@@ -88,6 +89,7 @@ const MasterModal = ({ modaldata, closeModal }) => {
       "Edit-Contact Category": <EditContactCategory data={item} onClose={closeModal} />,
       "Contact Tag": <CreateContactTag data={item} onClose={closeModal} />,
       "Edit-Contact Tag": <EditContactTag data={item} onClose={closeModal} />,
+      "Expense Type":<CreateExpense data={item} onClose={closeModal} />
     };
 
     return modalComponents[modalType] || null;

src/hooks/masterHook/useMaster.js

@@ -535,6 +535,28 @@ export const useUpdateContactTag = (onSuccessCallback) =>
   });
 }
 
+// ----------------------Expense Type------------------
+export const useCreateExpenseType = (onSuccessCallback)=>{
+    const queryClient = useQueryClient();
+
+  return useMutation( {
+    mutationFn: async ( payload ) =>
+    {
+      const resp = await MasterRespository.createExpenseType(payload);
+      return resp.data;
+    },
+    onSuccess: ( data ) =>
+    {
+      queryClient.invalidateQueries( {queryKey:[ "masterData", "Expense Type" ]} )
+      showToast( "Expense Type 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

@@ -59,6 +59,7 @@ export const MasterRespository = {
   getAuditStatus:()=>api.get('/api/Master/work-status'),
 
   getExpenseType:()=>api.get('/api/Master/expenses-types'),
+  createExpenseType:(data)=>api.post('/api/Master/expenses-type',data),
 
 
   getPaymentMode:()=>api.get('/api/Master/payment-modes'),