src/components/master/CreateExpense.jsx

@@ -1,72 +0,0 @@
-
-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/ManageExpenseType.jsx

@@ -0,0 +1,113 @@
+import React, { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  useCreateExpenseType,
+  useUpdateExpenseType,
+} 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 ManageExpenseType = ({ data = null, onClose }) => {
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(ExpnseSchema),
+    defaultValues: { name: "", noOfPersonsRequired: false, description: "" },
+  });
+  const { mutate: UpdateExpenseType, isPending:isPendingUpdate } = useUpdateExpenseType(
+    () => onClose?.()
+  );
+  const { mutate: CreateExpenseType, isPending } = useCreateExpenseType(() =>
+    onClose?.()
+  );
+
+  const onSubmit = (payload) => {
+    if (data) {
+      UpdateExpenseType({
+        id: data.id,
+        payload: { ...payload, id: data.id },
+      });
+    } else {
+      CreateExpenseType(payload);
+    }
+  };
+
+  useEffect(() => {
+    if (data) {
+      reset({
+        name: data.name ?? "",
+        noOfPersonsRequired: data.noOfPersonsRequired ?? false,
+        description: data.description ?? "",
+      });
+    }
+  }, [data]);
+  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 || isPendingUpdate}
+        >
+          {isPending || isPendingUpdate
+            ? "Please Wait..."
+            : data
+            ? "Update"
+            : "Submit"}
+        </button>
+        <button
+          type="reset"
+          className="btn btn-sm btn-label-secondary "
+          data-bs-dismiss="modal"
+          aria-label="Close"
+          disabled={isPending || isPendingUpdate}
+          onClick={()=>onClose()}
+        >
+          Cancel
+        </button>
+      </div>
+    </form>
+  );
+};
+
+export default ManageExpenseType;

src/components/master/MasterModal.jsx

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

src/hooks/masterHook/useMaster.js

@@ -557,6 +557,31 @@ export const useCreateExpenseType = (onSuccessCallback)=>{
     }
   })
 }
+export const useUpdateExpenseType = (onSuccessCallback) =>
+{
+   const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ( {id, payload} ) =>
+    {
+      const response = await MasterRespository.updateExpenseType(id,payload);
+      return response.data;
+    },
+    onSuccess: (data, variables) => {
+
+      queryClient.invalidateQueries({
+        queryKey: ["masterData", "Expense Type"],
+      });
+      showToast("Expense Type updated 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

@@ -60,6 +60,7 @@ export const MasterRespository = {
 
   getExpenseType:()=>api.get('/api/Master/expenses-types'),
   createExpenseType:(data)=>api.post('/api/Master/expenses-type',data),
+  updateExpenseType:(id,data)=>api.put(`/api/Master/expenses-type/edit/${id}`,data),
 
 
   getPaymentMode:()=>api.get('/api/Master/payment-modes'),