Adding API for EDIT in Recurring Expense.

src/components/RecurringExpense/ManageRecurringExpense.jsx

@@ -7,12 +7,17 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { defaultRecurringExpense, PaymentRecurringExpense } from './RecurringExpenseSchema';
 import { FREQUENCY_FOR_RECURRING, INR_CURRENCY_CODE } from '../../utils/constants';
 import { useCurrencies, useProjectName } from '../../hooks/useProjects';
-import { useCreateRecurringExpense, usePayee, useUpdateRecurringExpense } from '../../hooks/useExpense';
+import { useCreateRecurringExpense, usePayee, useRecurringExpenseDetail, useUpdateRecurringExpense } from '../../hooks/useExpense';
 import InputSuggestions from '../common/InputSuggestion';
 import MultiEmployeeSearchInput from '../common/MultiEmployeeSearchInput';
 
 function ManageRecurringExpense({ closeModal, requestToEdit = null }) {
-    const data = {}
+    const {
+    data,
+    isLoading,
+    isError,
+    error: requestError,
+  } = useRecurringExpenseDetail(requestToEdit);
 
     //APIs
     const { projectNames, loading: projectLoading, error, isError: isProjectError, } = useProjectName();

src/components/RecurringExpense/RecurringExpenseList.jsx

@@ -102,14 +102,11 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
     }
 
     const header = [
-        "Recurring Payment ID",
         "Category",
         "Title",
-        "Strike Date",
         "Amount",
         "Payee",
         "Frequency",
-        "Last Generation Date",
         "Next Generation",
         "Status",
         "Action",
@@ -217,7 +214,7 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
                                                             onClick={() =>
                                                                 setManageRequest({
                                                                     IsOpen: true,
-                                                                    projectId: project.id,
+                                                                    RecurringId: recurringExpense.id,
                                                                 })
                                                             }
                                                         >

src/components/common/EmployeeSearchInput.jsx

@@ -3,9 +3,6 @@ import { useEmployeesName } from "../../hooks/useEmployees";
 import { useDebounce } from "../../utils/appUtils";
 import { useController } from "react-hook-form";
 import Avatar from "./Avatar";
-
-
-
 const EmployeeSearchInput = ({
   control,
   name,

src/components/common/MultiEmployeeSearchInput.jsx

@@ -29,19 +29,29 @@ const MultiEmployeeSearchInput = ({
         forAll
     );
 
-    // Initialize selected employees from emails (comma-separated string)
-    useEffect(() => {
-        if (value && employees?.data) {
-            const emails = value.split(",").filter(Boolean);
-            const foundEmps = employees.data.filter((emp) =>
-                emails.includes(emp.email)
-            );
-            setSelectedEmployees(foundEmps);
-            if (forAll && foundEmps.length > 0) {
-                setSearch(""); // clear search field
-            }
+useEffect(() => {
+    if (value && employees?.data) {
+        // Ensure value is a string (sometimes it may come as array/object)
+        const stringValue =
+            typeof value === "string"
+                ? value
+                : Array.isArray(value)
+                ? value.join(",")
+                : "";
+
+        const emails = stringValue.split(",").filter(Boolean);
+        const foundEmps = employees.data.filter((emp) =>
+            emails.includes(emp.email)
+        );
+
+        setSelectedEmployees(foundEmps);
+
+        if (forAll && foundEmps.length > 0) {
+            setSearch(""); // clear search field
         }
-    }, [value, employees?.data, forAll]);
+    }
+}, [value, employees?.data, forAll]);
+
 
     const handleSelect = (employee) => {
         if (!selectedEmployees.find((emp) => emp.email === employee.email)) {

src/hooks/useExpense.js

@@ -454,8 +454,8 @@ export const useUpdateRecurringExpense = (onSuccessCallBack) => {
       return response.data;
     },
     onSuccess: (updatedExpense, variables) => {     
-      queryClient.removeQueries({ queryKey: ["RecurringExpense", variables.id] });
-      queryClient.invalidateQueries({ queryKey: ["RecurringExpenseList"] });
+      queryClient.removeQueries({ queryKey: ["recurringExpense", variables.id] });
+      queryClient.invalidateQueries({ queryKey: ["recurringExpenseList"] });
       showToast("Recurring Expense updated Successfully", "success");
 
       if (onSuccessCallBack) onSuccessCallBack();
@@ -482,3 +482,15 @@ export const useRecurringExpenseList = (
     keepPreviousData: true,
   });
 };
+
+export const useRecurringExpenseDetail =(RequestId)=>{
+  return useQuery({
+    queryKey:['recurringExpense',RequestId],
+    queryFn:async()=>{
+      RequestId
+      const resp = await ExpenseRepository.GetRecurringExpense(RequestId);
+      return resp.data;
+    },
+    enabled:!!RequestId
+  })
+}

src/repositories/ExpsenseRepository.jsx

@@ -38,7 +38,7 @@ const ExpenseRepository = {
   },
   CreateRecurringExpense: (data) => api.post("/api/Expense/recurring-payment/create", data),
   UpdateRecurringExpense: (id, data) => api.put(`/api/Expense/recurring-payment/edit/${id}`, data),
-
+   GetRecurringExpense: (id) => api.get(`/api/Expense/get/recurring-payment/details/${id}`),
   //#endregion