added view for working area

src/components/RecurringExpense/RecurringExpenseList.jsx

@@ -16,9 +16,9 @@ import { useRecurringExpenseContext } from "../../pages/RecurringExpense/Recurri
 import { useRecurringExpenseList } from "../../hooks/useExpense";
 
 const RecurringExpenseList = ({ search, filterStatuses }) => {
-  const { setManageRequest, setVieRequest } = useRecurringExpenseContext();
+  const { setManageRequest, setVieRequest , setViewRecurring} = useRecurringExpenseContext();
   const navigate = useNavigate();
-  const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [IsDeleteModalOpen, setIsDeleteModalOpen,] = useState(false);
   const [deletingId, setDeletingId] = useState(null);
 
   const SelfId = useSelector(
@@ -191,12 +191,12 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
                       <div className="d-flex flex-row gap-2 gap-0">
                         <i
                           className="bx bx-show text-primary cursor-pointer"
-                          // onClick={() =>
+                          onClick={() =>
-                          //     setVieRequest({
+                              setViewRecurring({
-                          //         requestId: recurringExpense.id,
+                                  recurringId: recurringExpense?.id,
-                          //         view: true,
+                                  view: true,
-                          //     })
+                              })
-                          // }
+                          }
                         ></i>
 
                         <div className="dropdown z-2">

src/components/RecurringExpense/ViewRecurringExpense.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+const ViewRecurringExpense = () => {
+  return (
+    <div>
+      <h5>Detail Recurring</h5>
+      <div className='d-flex justify-content-center align-items-center'>
+        <p>Under the Working!</p>
+      </div>
+    </div>
+  )
+}
+
+export default ViewRecurringExpense

src/pages/RecurringExpense/RecurringExpensePage.jsx

@@ -7,6 +7,7 @@ import ManageRecurringExpense from "../../components/RecurringExpense/ManageRecu
 import RecurringExpenseList from "../../components/RecurringExpense/RecurringExpenseList";
 import { PAYEE_RECURRING_EXPENSE } from "../../utils/constants";
 import { SearchRecurringExpenseSchema } from "../../components/RecurringExpense/RecurringExpenseSchema";
+import ViewRecurringExpense from "../../components/RecurringExpense/ViewRecurringExpense";
 
 export const RecurringExpenseContext = createContext();
 export const useRecurringExpenseContext = () => {
@@ -21,7 +22,7 @@ const RecurringExpensePage = () => {
         IsOpen: null,
         RecurringId: null,
     });
-    const [ViewRequest, setVieRequest] = useState({ view: false, requestId: null })
+    const [viewRecurring, setViewRecurring] = useState({ view: false, recurringId: null })
 
     const [selectedStatuses, setSelectedStatuses] = useState(
         PAYEE_RECURRING_EXPENSE.map((s) => s.id)
@@ -31,7 +32,7 @@ const RecurringExpensePage = () => {
 
     const contextValue = {
         setManageRequest,
-        setVieRequest
+        setViewRecurring
     };
 
     const handleStatusChange = (id) => {
@@ -134,6 +135,24 @@ const RecurringExpensePage = () => {
                         />
                     </GlobalModel>
                 )}
+                   {viewRecurring.view && (
+                    <GlobalModel
+                        isOpen
+                        size="lg"
+                        closeModal={() =>
+                            setViewRecurring({ IsOpen: null, recurringId: null })
+                        }
+                    >
+                        <viewRecurring
+                            key={viewRecurring.RecurringId ?? "new"}
+                            closeModal={() =>
+                                setViewRecurring({ IsOpen: null, recurringId: null })
+                            }
+                            recurringId={viewRecurring.recurringId}
+                        />
+                        <ViewRecurringExpense/>
+                    </GlobalModel>
+                )}
 
                 {/* {ViewRequest.view && (
           <GlobalModel