src/components/Expenses/ExpenseList.jsx

@@ -7,7 +7,7 @@ import Pagination from "../common/Pagination";
 import { ITEMS_PER_PAGE } from "../../utils/constants";
 
 const ExpenseList = () => {
-  const { setViewExpense } = useExpenseContext();
+  const { setViewExpense,setExpenseModal } = useExpenseContext();
   const [currentPage, setCurrentPage] = useState(1);
   const pageSize = 10;
 
@@ -197,14 +197,12 @@ const ExpenseList = () => {
                       </span>
                       <span
                         className="cursor-pointer"
-                       
+                       onClick={()=>setExpenseModal({isOpen:true,ExpEdit:expense})}
                       >
                        <i className='bx bx-edit bx-sm text-secondary'></i>
                       </span> 
-                      
                        <span
                         className="cursor-pointer"
-                       
                       >
                        <i className='bx bx-trash bx-sm text-danger' ></i>
                       </span>

src/components/Expenses/ExpenseSchema.js

@@ -68,6 +68,21 @@ export const ExpenseSchema = (expenseTypes) => {
     });
 };
 
+export const defaultExpense = {
+      projectId: "",
+      expensesTypeId: "",
+      paymentModeId: "",
+      paidById: "",
+      transactionDate: "",
+      transactionId: "",
+      description: "",
+      location: "",
+      supplerName: "",
+      amount: "",
+      noOfPersons: "",
+      billAttachments: [],
+    }
+
 export const ActionSchema = z.object({
   comment : z.string().min(1,{message:"Please leave comment"}),
    selectedStatus: z.string().min(1, { message: "Please select a status" }),

src/components/Expenses/ManageExpense.jsx

@@ -1,7 +1,7 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
-import { ExpenseSchema } from "./ExpenseSchema";
+import { defaultExpense, ExpenseSchema } from "./ExpenseSchema";
 import { formatFileSize } from "../../utils/appUtils";
 import { useProjectName } from "../../hooks/useProjects";
 import { useDispatch, useSelector } from "react-redux";
@@ -18,7 +18,7 @@ import {
 import Avatar from "../common/Avatar";
 import { useCreateExpnse } from "../../hooks/useExpense";
 
-const CreateExpense = ({closeModal}) => {
+const CreateExpense = ({closeModal,expenseToEdit,}) => {
   const [ExpenseType, setExpenseType] = useState();
   const dispatch = useDispatch();
   const {
@@ -36,21 +36,30 @@ const CreateExpense = ({closeModal}) => {
     formState: { errors },
   } = useForm({
     resolver: zodResolver(schema),
-    defaultValues: {
+    defaultValues: defaultExpense,
-      projectId: "",
-      expensesTypeId: "",
-      paymentModeId: "",
-      paidById: "",
-      transactionDate: "",
-      transactionId: "",
-      description: "",
-      location: "",
-      supplerName: "",
-      amount: "",
-      noOfPersons: "",
-      billAttachments: [],
-    },
   });
+  console.log(expenseToEdit)
+
+  useEffect(() => {
+  if (expenseToEdit) {
+    reset({
+      projectId: expenseToEdit.project.id || "",
+      expensesTypeId: expenseToEdit.expensesType.id
+ || "",
+      paymentModeId: expenseToEdit.paymentMode.id || "",
+      paidById: expenseToEdit.paidBy.id || "",
+      transactionDate: expenseToEdit.transactionDate?.slice(0, 10) || "",
+      transactionId: expenseToEdit.transactionId || "",
+      description: expenseToEdit.description || "",
+      location: expenseToEdit.location || "",
+      supplerName: expenseToEdit.supplerName || "",
+      amount: expenseToEdit.amount || "",
+      noOfPersons: expenseToEdit.noOfPersons || "",
+      billAttachments: expenseToEdit.billAttachments || [],
+    });
+  }
+}, [expenseToEdit, reset]);
+
 
   const selectedproject = watch("projectId");
   const selectedProject = useSelector(

src/hooks/useExpense.js

@@ -50,6 +50,19 @@ export const useCreateExpnse = (onSuccessCallBack) => {
   });
 };
 
+export const useUpdateExepse =()=>{
+const queryClient = useQueryClient();
+
+return useMutation({
+  mutationFn:async (id,payload)=>{
+    const response = await ExpenseRepository.UpdateExpense(id,payload)
+  },
+  onSuccess:(updatedExpense,variables)=>{
+    // updation list and details
+  }
+})
+}
+
 export const useActionOnExpense = (onSuccessCallBack) => {
   const queryClient = useQueryClient();
 

src/pages/Expense/ExpensePage.jsx

@@ -1,7 +1,7 @@
 import React, { createContext, useContext, useState } from "react";
 
 import ExpenseList from "../../components/Expenses/ExpenseList";
-import CreateExpense from "../../components/Expenses/CreateExpense";
+import CreateExpense from "../../components/Expenses/ManageExpense";
 import ViewExpense from "../../components/Expenses/ViewExpense";
 import Breadcrumb from "../../components/common/Breadcrumb";
 import GlobalModel from "../../components/common/GlobalModel";
@@ -11,7 +11,10 @@ export const ExpenseContext = createContext();
 export const useExpenseContext = () => useContext(ExpenseContext);
 
 const ExpensePage = () => {
-  const [isNewExpense, setNewExpense] = useState(false);
+  const [expenseModal, setExpenseModal] = useState({
+    isOpen: false,
+    ExpEdit: false,
+  });
   const [viewExpense, setViewExpense] = useState({
     expenseId: null,
     view: false,

src/repositories/ExpsenseRepository.jsx

@@ -12,10 +12,11 @@ const ExpenseRepository = {
   
   GetExpenseDetails:(id)=>api.get(`/api/Expense/details/${id}`),
   CreateExpense:(data)=>api.post("/api/Expense/create",data),
-  UpdateExpense:(id)=>api.put(`/api/Expense/edit/${id}`),
+  UpdateExpense:(id,data)=>api.put(`/api/Expense/edit/${id}`,data),
   DeleteExpense:(id)=>api.delete(`/api/Expense/edit/${id}`),
 
-  ActionOnExpense:(data)=>api.post('/api/expense/action',data)
+  ActionOnExpense:(data)=>api.post('/api/expense/action',data),
+
 
 }