From 06548abf1e26656ede5ed3e59e7f2c20cf011d0d Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Thu, 14 Nov 2024 12:08:17 +0530
Subject: [PATCH] update tabs

---
 src/Contexts/GlobalStateProvider.jsx          | 125 +++++-
 .../IO_Management/CreateIO/AddCashDetails.jsx |   2 +-
 src/Pages/IO_Management/CreateIO/CreateIO.jsx |  15 +-
 .../CreateIO/IOCashDetails/AddApproved.jsx    | 254 ++++++++++++
 .../CreateIO/IOCashDetails/AddPending.jsx     | 254 ++++++++++++
 .../CreateIO/IOCashDetails/AddRejected.jsx    | 249 ++++++++++++
 .../CreateIO/IOCashDetails/Approved.jsx       | 361 +++++++++++++++++
 .../CreateIO/IOCashDetails/IOCashDetails.jsx  |  54 +++
 .../CreateIO/IOCashDetails/Pending.jsx        | 364 ++++++++++++++++++
 .../CreateIO/IOCashDetails/Rejected.jsx       | 314 +++++++++++++++
 ...IOCashDetails.jsx => IOCashDetailsOld.jsx} |  54 ++-
 .../CreateIO/IONAVDetails/Approved.jsx        | 260 +++++++++++++
 .../CreateIO/IONAVDetails/IONAVDetails.jsx    |  54 +++
 .../CreateIO/IONAVDetails/Pending.jsx         | 273 +++++++++++++
 .../CreateIO/IONAVDetails/Rejected.jsx        | 224 +++++++++++
 .../{IONAVDetails.jsx => IONAVDetailsOld.jsx} |   0
 .../CreateIO/IOTransaction/Approved.jsx       | 215 +++++++++++
 .../CreateIO/IOTransaction/IOTransaction.jsx  |  54 +++
 .../CreateIO/IOTransaction/Pending.jsx        | 269 +++++++++++++
 .../CreateIO/IOTransaction/Rejected.jsx       | 214 ++++++++++
 src/Pages/IO_Management/ViewIO/ViewIOdata.jsx |  14 +-
 .../InvestorDetails/InvestorDetails.jsx       |   3 -
 src/Services/io.service.js                    |  21 +-
 23 files changed, 3602 insertions(+), 45 deletions(-)
 create mode 100644 src/Pages/IO_Management/CreateIO/IOCashDetails/AddApproved.jsx
 create mode 100644 src/Pages/IO_Management/CreateIO/IOCashDetails/AddPending.jsx
 create mode 100644 src/Pages/IO_Management/CreateIO/IOCashDetails/AddRejected.jsx
 create mode 100644 src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx
 create mode 100644 src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx
 create mode 100644 src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
 create mode 100644 src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
 rename src/Pages/IO_Management/CreateIO/{IOCashDetails.jsx => IOCashDetailsOld.jsx} (92%)
 create mode 100644 src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx
 create mode 100644 src/Pages/IO_Management/CreateIO/IONAVDetails/IONAVDetails.jsx
 create mode 100644 src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx
 create mode 100644 src/Pages/IO_Management/CreateIO/IONAVDetails/Rejected.jsx
 rename src/Pages/IO_Management/CreateIO/{IONAVDetails.jsx => IONAVDetailsOld.jsx} (100%)
 create mode 100644 src/Pages/IO_Management/CreateIO/IOTransaction/Approved.jsx
 create mode 100644 src/Pages/IO_Management/CreateIO/IOTransaction/IOTransaction.jsx
 create mode 100644 src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
 create mode 100644 src/Pages/IO_Management/CreateIO/IOTransaction/Rejected.jsx

diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx
index b3cce1a..b172727 100644
--- a/src/Contexts/GlobalStateProvider.jsx
+++ b/src/Contexts/GlobalStateProvider.jsx
@@ -1557,6 +1557,123 @@ const GlobalStateProvider = ({ children }) => {
     },
   ]);
 
+  const [approved, setApproved] = useState([
+    {
+      id: 1,
+      transactionDate: "02-Jan-24",
+      particulars: "Cash Reserve- Initated",
+      amount: "50,000.00",
+      Comments: "",
+      user: "Faisal",
+      entryDate: "02-Jan-24",
+    },
+    {
+      id: 2,
+      transactionDate: "12-Feb-24",
+      particulars: "Fees & Expense",
+      amount: "-22,000.00",
+      Comments: "",
+      user: "Faisal",
+      entryDate: "13-Feb-24",
+    },
+    {
+      id: 3,
+      transactionDate: "12-Feb-24",
+      particulars: "Distribution Received From Sponsor",
+      amount: "50,000.00",
+      Comments: "",
+      user: "Nawab",
+      entryDate: "24-Mar-24",
+    },
+    {
+      id: 4,
+      transactionDate: "28-Mar-24",
+      particulars: "Distribution Paid To Investors",
+      amount: "-40,000.00",
+      Comments: "",
+      user: "Faisal",
+      entryDate: "28-Mar-24",
+    },
+    {
+      id: 5,
+      transactionDate: "26-Jun-24",
+      particulars: "Distribution Received From Sponsor",
+      amount: "70,000.00",
+      Comments: "",
+      user: "Faisal",
+      entryDate: "27-Jun-24",
+    },
+    {
+      id: 6,
+      transactionDate: "28-Jun-24",
+      particulars: "Distribution Paid To Investors",
+      amount: "-60,000.00",
+      Comments: "",
+      user: "Nawab",
+      entryDate: "28-Jun-24",
+    },
+  ]);
+
+  const [iONAVDetail, setIONAVDetail] = useState([
+    {
+      id: 1,
+      valuationDate: "01-Jul-24",
+      nav: "1,229,750.00 ",
+      lastUpdate: "12.56",
+      investmentClose: "29.45",
+      updatedBy: "Nawab",
+      updatedOn: "01-Jul-24",
+    },
+    {
+      id: 2,
+      valuationDate: "25-Apr-24",
+      nav: "1,092,500.00",
+      lastUpdate: "15.00",
+      investmentClose: "15.00",
+      updatedBy: "Faisal",
+      updatedOn: "25-Apr-24",
+    },
+    {
+      id: 3,
+      valuationDate: "02-Jan-24",
+      nav: "950,000.00",
+      lastUpdate: "",
+      investmentClose: "",
+      updatedBy: "Faisal",
+      updatedOn: "02-Jan-24",
+    },
+  ]);
+
+  const [iOTransaction, setIOTransaction] = useState([
+    {
+      id: 1,
+      transactionName: "Amount Invested",
+      amount: "995,000",
+      createdBy: "Faisal",
+      createdOn: "27-Oct-24",
+      approvedBy: "Nawab",
+      approvedOn: "28-Oct-24",
+    },
+    {
+      id: 2,
+      transactionName: "Distribution To Sponser",
+      amount: "40,000",
+      createdBy: "Faisal",
+      createdOn: "30-Oct-24",
+      approvedBy: "Nawab",
+      approvedOn: "31-Oct-24",
+    },
+    {
+      id: 3,
+      transactionName: "Amount Invested",
+      amount: "995,000",
+      createdBy: "Faisal",
+      createdOn: "27-Oct-24",
+      approvedBy: "Nawab",
+      approvedOn: "28-Oct-24",
+    },
+  ]);
+
   const [InvestorWallet, setInvestorWallet] = useState(null);
 
   // ==============[ prod state ]===============================
@@ -1643,7 +1760,13 @@ const GlobalStateProvider = ({ children }) => {
         fawateerRequest,
         setFawateerRequest,
         approveHistory,
-        setApproveHistory
+        setApproveHistory,
+        approved,
+        setApproved,
+        iONAVDetail,
+        setIONAVDetail,
+        iOTransaction,
+        setIOTransaction,
       }}
     >
       {children}
diff --git a/src/Pages/IO_Management/CreateIO/AddCashDetails.jsx b/src/Pages/IO_Management/CreateIO/AddCashDetails.jsx
index 695de3d..ac5ae23 100644
--- a/src/Pages/IO_Management/CreateIO/AddCashDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/AddCashDetails.jsx
@@ -56,7 +56,7 @@ const AddCashDetails = ({ isOpen, onClose, firstField, actionId, setActionId, da
   const [updateVideoArtifacts] = useUpdateVideoArtifactsMutation()
   // const {
   //   data
-  // } = useGetArtifactsQuery(id)
+  // } = useGetArtifactsQuery(id) 
 
   const {
     control,
diff --git a/src/Pages/IO_Management/CreateIO/CreateIO.jsx b/src/Pages/IO_Management/CreateIO/CreateIO.jsx
index cc0599e..b5a81eb 100644
--- a/src/Pages/IO_Management/CreateIO/CreateIO.jsx
+++ b/src/Pages/IO_Management/CreateIO/CreateIO.jsx
@@ -8,8 +8,8 @@ import IODetails from "./IODetails";
 import KeyMerits from "./KeyMerits";
 import IOArtifacts from "./IOArtifacts";
 import Investors from "./Investors";
-import IOCashDetails from "./IOCashDetails";
-import IONAVDetails from "./IONAVDetails";
+// import IOCashDetails from "./IOCashDetailsold";
+// import IONAVDetails from "./IONAVDetailsOld";
 import InvestmentDocument from "./InvestmentDocument"; // Ensure this is the correct import
 import ViewIOdataHeader from "../ViewIO/ViewIOdataHeader";
 import { useParams } from "react-router-dom";
@@ -17,6 +17,9 @@ import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders";
 import { useGetIOprepopulateDataQuery } from "../../../Services/io.service";
 import UnderConstruction from "../../UnderConstruction";
 import Destribution from "./Destribution";
+import IOCashDetails from "./IOCashDetails/IOCashDetails";
+import IONAVDetails from "./IONAVDetails/IONAVDetails";
+import IOTransaction from "./IOTransaction/IOTransaction";
 
 const CreateIO = () => {
   const id = useParams()?.id;
@@ -75,6 +78,11 @@ const CreateIO = () => {
       Content: Destribution,
       isDisabled: id ? true : true,
     },
+    {
+      label: "IO Transaction",
+      Content: IOTransaction,
+      isDisabled: id ? true : true,
+    },
   ];
 
   const [tabs, setTabs] = useState(initialTabsState);
@@ -114,7 +122,8 @@ const CreateIO = () => {
             <Tab
               isDisabled={isDisabled}
               key={index}
-              fontSize={"sm"}
+              fontSize={"xs"}
+              fontWeight={500}
               _selected={{
                 color: "#004118",
                 borderBottom: "2px solid #38a169",
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/AddApproved.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/AddApproved.jsx
new file mode 100644
index 0000000..17bddef
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/AddApproved.jsx
@@ -0,0 +1,254 @@
+import {
+    Box,
+    Button,
+    Drawer,
+    DrawerBody,
+    DrawerCloseButton,
+    DrawerContent,
+    DrawerFooter,
+    DrawerHeader,
+    DrawerOverlay,
+    FormControl,
+    FormErrorMessage,
+    FormLabel,
+    Input,
+    Select,
+    Stack,
+    Textarea,
+    useToast,
+  } from "@chakra-ui/react";
+  import * as yup from "yup";
+  import React, { useState, useEffect, useContext } from "react";
+  import { useForm, Controller } from "react-hook-form";
+  import { yupResolver } from "@hookform/resolvers/yup";
+  import { v4 as uuidv4 } from "uuid";
+//   import { useCreateIoCashMutation, useCreateVideoArtifactsMutation, useUpdateVideoArtifactsMutation } from "../../../Services/io.service";
+  import { useParams } from "react-router-dom";
+import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+import ToastBox from "../../../../Components/ToastBox";
+import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+import CurrencyInput from "../../../../Components/CurrencyInput";
+  
+  const cashDetails = yup.object().shape({
+    transactionDate: yup.string().required("Date is required"),
+    ioTransType_xid: yup.number().required("Cash transaction is required"),
+    transactionAmount: yup.number().required("Transaction Amount is required"),
+    comments: yup.string().notRequired(),
+  });
+  
+  const AddApproved = ({ isOpen, onClose, firstField, actionId, setActionId, data }) => {
+    const params = useParams() 
+    const id = params?.id
+    const [file, setFile] = useState("");
+    const [fileName, setFileName] = useState("");
+    const [isLoading, setIsLoading] = useState(false)
+    const [alert, setAlert] = useState(false);
+    const toast = useToast();
+  
+  
+  
+    // ======================[ Cotext Api ]
+    const { IODetails } = useContext(GlobalStateContext);
+    const found = data?.find((item) => item?.id === actionId);
+  
+  
+    // const [createArtifactsVideo] = useCreateVideoArtifactsMutation()
+    // const [updateVideoArtifacts] = useUpdateVideoArtifactsMutation()
+    // const {
+    //   data
+    // } = useGetArtifactsQuery(id)
+  
+    const {
+      control,
+      handleSubmit,
+      watch,
+      reset,
+      formState: { errors },
+    } = useForm({
+      resolver: yupResolver(cashDetails),
+    });
+  
+  
+    // const [createIoCash] = useCreateIoCashMutation()
+  
+  
+    const onSubmit = async (data) => {
+  
+      setIsLoading(true)
+  
+      try {
+  
+        const res = await createIoCash({ data, id })
+        if (res?.data?.statusCode === 200) {
+          setIsLoading(false);
+          toast({
+            render: () => <ToastBox message={res?.data?.message} />,
+          });
+          handleClose()
+        }else if(res?.error?.status === 400){
+          setIsLoading(false);
+          toast({
+            render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
+          });
+        }
+  
+  
+      } catch (error) {
+        console.log(error);
+  
+      }
+  
+    };
+  
+  
+  
+    const handleConfirm = () => {
+      handleSubmit(onSubmit)();
+    };
+  
+    const handleSave = () => {
+      handleSubmit(onSubmit)();
+    };
+  
+    const handleClose = () => {
+      setAlert(false)
+      onClose()
+      reset({
+        transactionAmount:""
+      })
+    }
+  
+    return (
+      <>
+        <Drawer
+          size={"md"}
+          isOpen={isOpen}
+          placement="right"
+          initialFocusRef={firstField}
+          onClose={handleClose}
+        >
+          <DrawerOverlay />
+          <DrawerContent>
+            <DrawerCloseButton />
+            <DrawerHeader fontSize={"sm"}>IO Cash Details</DrawerHeader>
+  
+            <DrawerBody>
+              <Stack spacing={4}>
+                <FormControl isInvalid={errors.transactionDate} isRequired> 
+                  <FormLabel fontSize={"sm"}>Date Selection</FormLabel>
+                  <Controller
+                    name="transactionDate"
+                    control={control}
+                    render={({ field }) => (
+                      <Input 
+                      focusBorderColor="forestGreen.300" {...field} fontSize={"sm"} type="date" size={"sm"} />
+                    )}
+                  />
+                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                    {errors.transactionDate?.message}
+                  </FormErrorMessage>
+                </FormControl>
+  
+  
+                <FormControl isInvalid={errors.ioTransType_xid} isRequired>
+                  <FormLabel fontSize={"sm"}>Cash transaction</FormLabel>
+                  <Controller
+                    name="ioTransType_xid"
+                    control={control}
+                    render={({ field }) => (
+                      <Select
+                        {...field}
+                        placeholder="Select an option"
+                        fontSize={"sm"}
+                        size={"sm"}
+                        focusBorderColor="forestGreen.300"
+                      >
+                        {IODetails?.ioCashTransaction?.map(({ id, transactionName }) => (
+                          <option key={id} value={id}>
+                            {transactionName}
+                          </option>
+                        ))}
+                      </Select>
+                    )}
+                  />
+                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                    {errors.ioTransType_xid?.message}
+                  </FormErrorMessage>
+                </FormControl>
+  
+  
+  
+  
+                <FormControl isInvalid={errors.transactionAmount} isRequired>
+                  <FormLabel fontSize={"sm"}>Amount</FormLabel>
+                  <Controller
+                    name="transactionAmount"
+                    control={control}
+                    render={({ field }) => (
+                      <CurrencyInput {...field} textAlign={'right'} fontSize={"sm"} type="number" size={"sm"} />
+                    )}
+                  />
+                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                    {errors.transactionAmount?.message}
+                  </FormErrorMessage>
+                </FormControl>
+  
+  
+  
+                <FormControl isInvalid={errors.comments}>
+                  <FormLabel fontSize={"sm"}>Comments</FormLabel>
+                  <Controller
+                    name="comments"
+                    control={control}
+                    render={({ field }) => (
+                      <Textarea {...field} textAlign={'left'} 
+                      focusBorderColor="forestGreen.300" fontSize={"sm"} type="text" size={"sm"} />
+                    )}
+                  />
+                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                    {errors.comments?.message}
+                  </FormErrorMessage>
+                </FormControl>
+  
+              </Stack>
+            </DrawerBody>
+  
+            <DrawerFooter>
+              <Button
+                variant="outline"
+                colorScheme={"forestGreen"}
+                rounded={"sm"}
+                size={"sm"}
+                mr={3}
+                onClick={handleClose}
+              >
+                Cancel
+              </Button>
+  
+              <Button
+                colorScheme={"forestGreen"}
+                rounded={"sm"}
+                size={"sm"}
+  
+                onClick={() => setAlert(true)}
+              >
+                Save
+              </Button>
+            </DrawerFooter>
+          </DrawerContent>
+        </Drawer>
+  
+  
+        <CustomAlertDialog
+          isOpen={alert}
+          onClose={() => setAlert(false)}
+          alertHandler={handleSave}
+          message={"Are you sure you want to add cash details?"}
+          isLoading={isLoading}
+        />
+      </>
+    );
+  };
+  
+  export default AddApproved;
+  
\ No newline at end of file
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/AddPending.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/AddPending.jsx
new file mode 100644
index 0000000..941c592
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/AddPending.jsx
@@ -0,0 +1,254 @@
+import {
+    Box,
+    Button,
+    Drawer,
+    DrawerBody,
+    DrawerCloseButton,
+    DrawerContent,
+    DrawerFooter,
+    DrawerHeader,
+    DrawerOverlay,
+    FormControl,
+    FormErrorMessage,
+    FormLabel,
+    Input,
+    Select,
+    Stack,
+    Textarea,
+    useToast,
+  } from "@chakra-ui/react";
+  import * as yup from "yup";
+  import React, { useState, useEffect, useContext } from "react";
+  import { useForm, Controller } from "react-hook-form";
+  import { yupResolver } from "@hookform/resolvers/yup";
+  import { v4 as uuidv4 } from "uuid";
+//   import { useCreateIoCashMutation, useCreateVideoArtifactsMutation, useUpdateVideoArtifactsMutation } from "../../../Services/io.service";
+  import { useParams } from "react-router-dom";
+import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+import ToastBox from "../../../../Components/ToastBox";
+import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+import CurrencyInput from "../../../../Components/CurrencyInput";
+  
+  const cashDetails = yup.object().shape({
+    transactionDate: yup.string().required("Date is required"),
+    ioTransType_xid: yup.number().required("Cash transaction is required"),
+    transactionAmount: yup.number().required("Transaction Amount is required"),
+    comments: yup.string().notRequired(),
+  });
+  
+  const AddPending = ({ isOpen, onClose, firstField, actionId, setActionId, data }) => {
+    const params = useParams() 
+    const id = params?.id
+    const [file, setFile] = useState("");
+    const [fileName, setFileName] = useState("");
+    const [isLoading, setIsLoading] = useState(false)
+    const [alert, setAlert] = useState(false);
+    const toast = useToast();
+  
+  
+  
+    // ======================[ Cotext Api ]
+    const { IODetails } = useContext(GlobalStateContext);
+    const found = data?.find((item) => item?.id === actionId);
+  
+  
+    // const [createArtifactsVideo] = useCreateVideoArtifactsMutation()
+    // const [updateVideoArtifacts] = useUpdateVideoArtifactsMutation()
+    // const {
+    //   data
+    // } = useGetArtifactsQuery(id)
+  
+    const {
+      control,
+      handleSubmit,
+      watch,
+      reset,
+      formState: { errors },
+    } = useForm({
+      resolver: yupResolver(cashDetails),
+    });
+  
+  
+    // const [createIoCash] = useCreateIoCashMutation()
+  
+  
+    const onSubmit = async (data) => {
+  
+      setIsLoading(true)
+  
+      try {
+  
+        const res = await createIoCash({ data, id })
+        if (res?.data?.statusCode === 200) {
+          setIsLoading(false);
+          toast({
+            render: () => <ToastBox message={res?.data?.message} />,
+          });
+          handleClose()
+        }else if(res?.error?.status === 400){
+          setIsLoading(false);
+          toast({
+            render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
+          });
+        }
+  
+  
+      } catch (error) {
+        console.log(error);
+  
+      }
+  
+    };
+  
+  
+  
+    const handleConfirm = () => {
+      handleSubmit(onSubmit)();
+    };
+  
+    const handleSave = () => {
+      handleSubmit(onSubmit)();
+    };
+  
+    const handleClose = () => {
+      setAlert(false)
+      onClose()
+      reset({
+        transactionAmount:""
+      })
+    }
+  
+    return (
+      <>
+        <Drawer
+          size={"md"}
+          isOpen={isOpen}
+          placement="right"
+          initialFocusRef={firstField}
+          onClose={handleClose}
+        >
+          <DrawerOverlay />
+          <DrawerContent>
+            <DrawerCloseButton />
+            <DrawerHeader fontSize={"sm"}>IO Cash Details</DrawerHeader>
+  
+            <DrawerBody>
+              <Stack spacing={4}>
+                <FormControl isInvalid={errors.transactionDate} isRequired> 
+                  <FormLabel fontSize={"sm"}>Date Selection</FormLabel>
+                  <Controller
+                    name="transactionDate"
+                    control={control}
+                    render={({ field }) => (
+                      <Input 
+                      focusBorderColor="forestGreen.300" {...field} fontSize={"sm"} type="date" size={"sm"} />
+                    )}
+                  />
+                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                    {errors.transactionDate?.message}
+                  </FormErrorMessage>
+                </FormControl>
+  
+  
+                <FormControl isInvalid={errors.ioTransType_xid} isRequired>
+                  <FormLabel fontSize={"sm"}>Cash transaction</FormLabel>
+                  <Controller
+                    name="ioTransType_xid"
+                    control={control}
+                    render={({ field }) => (
+                      <Select
+                        {...field}
+                        placeholder="Select an option"
+                        fontSize={"sm"}
+                        size={"sm"}
+                        focusBorderColor="forestGreen.300"
+                      >
+                        {IODetails?.ioCashTransaction?.map(({ id, transactionName }) => (
+                          <option key={id} value={id}>
+                            {transactionName}
+                          </option>
+                        ))}
+                      </Select>
+                    )}
+                  />
+                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                    {errors.ioTransType_xid?.message}
+                  </FormErrorMessage>
+                </FormControl>
+  
+  
+  
+  
+                <FormControl isInvalid={errors.transactionAmount} isRequired>
+                  <FormLabel fontSize={"sm"}>Amount</FormLabel>
+                  <Controller
+                    name="transactionAmount"
+                    control={control}
+                    render={({ field }) => (
+                      <CurrencyInput {...field} textAlign={'right'} fontSize={"sm"} type="number" size={"sm"} />
+                    )}
+                  />
+                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                    {errors.transactionAmount?.message}
+                  </FormErrorMessage>
+                </FormControl>
+  
+  
+  
+                <FormControl isInvalid={errors.comments}>
+                  <FormLabel fontSize={"sm"}>Comments</FormLabel>
+                  <Controller
+                    name="comments"
+                    control={control}
+                    render={({ field }) => (
+                      <Textarea {...field} textAlign={'left'} 
+                      focusBorderColor="forestGreen.300" fontSize={"sm"} type="text" size={"sm"} />
+                    )}
+                  />
+                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                    {errors.comments?.message}
+                  </FormErrorMessage>
+                </FormControl>
+  
+              </Stack>
+            </DrawerBody>
+  
+            <DrawerFooter>
+              <Button
+                variant="outline"
+                colorScheme={"forestGreen"}
+                rounded={"sm"}
+                size={"sm"}
+                mr={3}
+                onClick={handleClose}
+              >
+                Cancel
+              </Button>
+  
+              <Button
+                colorScheme={"forestGreen"}
+                rounded={"sm"}
+                size={"sm"}
+  
+                onClick={() => setAlert(true)}
+              >
+                Save
+              </Button>
+            </DrawerFooter>
+          </DrawerContent>
+        </Drawer>
+  
+  
+        <CustomAlertDialog
+          isOpen={alert}
+          onClose={() => setAlert(false)}
+          alertHandler={handleSave}
+          message={"Are you sure you want to add cash details?"}
+          isLoading={isLoading}
+        />
+      </>
+    );
+  };
+  
+  export default AddPending;
+  
\ No newline at end of file
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/AddRejected.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/AddRejected.jsx
new file mode 100644
index 0000000..b00639f
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/AddRejected.jsx
@@ -0,0 +1,249 @@
+import {
+    Box,
+    Button,
+    Drawer,
+    DrawerBody,
+    DrawerCloseButton,
+    DrawerContent,
+    DrawerFooter,
+    DrawerHeader,
+    DrawerOverlay,
+    FormControl,
+    FormErrorMessage,
+    FormLabel,
+    Input,
+    Select,
+    Stack,
+    Textarea,
+    useToast,
+  } from "@chakra-ui/react";
+  import * as yup from "yup";
+  import React, { useState, useEffect, useContext } from "react";
+  import { useForm, Controller } from "react-hook-form";
+  import { yupResolver } from "@hookform/resolvers/yup";
+  import { v4 as uuidv4 } from "uuid";
+//   import { useCreateIoCashMutation, useCreateVideoArtifactsMutation, useUpdateVideoArtifactsMutation } from "../../../Services/io.service";
+  import { useParams } from "react-router-dom";
+import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+import ToastBox from "../../../../Components/ToastBox";
+import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+import CurrencyInput from "../../../../Components/CurrencyInput";
+  
+  const cashDetails = yup.object().shape({
+    transactionDate: yup.string().required("Date is required"),
+    ioTransType_xid: yup.number().required("Cash transaction is required"),
+    transactionAmount: yup.number().required("Transaction Amount is required"),
+    comments: yup.string().notRequired(),
+  });
+  
+  const AddRejected = ({ isOpen, onClose, firstField, actionId, setActionId, data }) => {
+    const params = useParams() 
+    const id = params?.id
+    const [file, setFile] = useState("");
+    const [fileName, setFileName] = useState("");
+    const [isLoading, setIsLoading] = useState(false)
+    const [alert, setAlert] = useState(false);
+    const toast = useToast();
+  
+  
+  
+    // ======================[ Cotext Api ]
+    const { IODetails } = useContext(GlobalStateContext);
+    const found = data?.find((item) => item?.id === actionId);
+  
+  
+    // const [createArtifactsVideo] = useCreateVideoArtifactsMutation()
+    // const [updateVideoArtifacts] = useUpdateVideoArtifactsMutation()
+    // const {
+    //   data
+    // } = useGetArtifactsQuery(id)
+  
+    const {
+      control,
+      handleSubmit,
+      watch,
+      reset,
+      formState: { errors },
+    } = useForm({
+      resolver: yupResolver(cashDetails),
+    });
+  
+  
+    // const [createIoCash] = useCreateIoCashMutation()
+  
+  
+    const onSubmit = async (data) => {
+  
+      setIsLoading(true)
+  
+      try {
+  
+        const res = await createIoCash({ data, id })
+        if (res?.data?.statusCode === 200) {
+          setIsLoading(false);
+          toast({
+            render: () => <ToastBox message={res?.data?.message} />,
+          });
+          handleClose()
+        }else if(res?.error?.status === 400){
+          setIsLoading(false);
+          toast({
+            render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
+          });
+        }
+  
+  
+      } catch (error) {
+        console.log(error);
+  
+      }
+  
+    };
+  
+  
+  
+    const handleConfirm = () => {
+      handleSubmit(onSubmit)();
+    };
+  
+    const handleSave = () => {
+      handleSubmit(onSubmit)();
+    };
+  
+    const handleClose = () => {
+      setAlert(false)
+      onClose()
+      reset({
+        transactionAmount:""
+      })
+    }
+  
+    return (
+      <>
+        <Drawer
+          size={"md"}
+          isOpen={isOpen}
+          placement="right"
+          initialFocusRef={firstField}
+          onClose={handleClose}
+        >
+          <DrawerOverlay />
+          <DrawerContent>
+            <DrawerCloseButton />
+            <DrawerHeader fontSize={"sm"}>IO Cash Details</DrawerHeader>
+  
+            <DrawerBody>
+              <Stack spacing={4}>
+                <FormControl isInvalid={errors.transactionDate} isRequired> 
+                  <FormLabel fontSize={"sm"}>Date Selection</FormLabel>
+                  <Controller
+                    name="transactionDate"
+                    control={control}
+                    render={({ field }) => (
+                      <Input 
+                      focusBorderColor="forestGreen.300" {...field} fontSize={"sm"} type="date" size={"sm"} />
+                    )}
+                  />
+                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                    {errors.transactionDate?.message}
+                  </FormErrorMessage>
+                </FormControl>
+  
+  
+                <FormControl isInvalid={errors.ioTransType_xid} isRequired>
+                  <FormLabel fontSize={"sm"}>Cash transaction</FormLabel>
+                  <Controller
+                    name="ioTransType_xid"
+                    control={control}
+                    render={({ field }) => (
+                      <Select
+                        {...field}
+                        placeholder="Select an option"
+                        fontSize={"sm"}
+                        size={"sm"}
+                        focusBorderColor="forestGreen.300"
+                      >
+                        {IODetails?.ioCashTransaction?.map(({ id, transactionName }) => (
+                          <option key={id} value={id}>
+                            {transactionName}
+                          </option>
+                        ))}
+                      </Select>
+                    )}
+                  />
+                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                    {errors.ioTransType_xid?.message}
+                  </FormErrorMessage>
+                </FormControl>
+  
+                <FormControl isInvalid={errors.transactionAmount} isRequired>
+                  <FormLabel fontSize={"sm"}>Amount</FormLabel>
+                  <Controller
+                    name="transactionAmount"
+                    control={control}
+                    render={({ field }) => (
+                      <CurrencyInput {...field} textAlign={'right'} fontSize={"sm"} type="number" size={"sm"} />
+                    )}
+                  />
+                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                    {errors.transactionAmount?.message}
+                  </FormErrorMessage>
+                </FormControl>
+  
+                <FormControl isInvalid={errors.comments}>
+                  <FormLabel fontSize={"sm"}>Comments</FormLabel>
+                  <Controller
+                    name="comments"
+                    control={control}
+                    render={({ field }) => (
+                      <Textarea {...field} textAlign={'left'} 
+                      focusBorderColor="forestGreen.300" fontSize={"sm"} type="text" size={"sm"} />
+                    )}
+                  />
+                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                    {errors.comments?.message}
+                  </FormErrorMessage>
+                </FormControl>
+  
+              </Stack>
+            </DrawerBody>
+  
+            <DrawerFooter>
+              <Button
+                variant="outline"
+                colorScheme={"forestGreen"}
+                rounded={"sm"}
+                size={"sm"}
+                mr={3}
+                onClick={handleClose}
+              >
+                Cancel
+              </Button>
+  
+              <Button
+                colorScheme={"forestGreen"}
+                rounded={"sm"}
+                size={"sm"}
+  
+                onClick={() => setAlert(true)}
+              >
+                Save
+              </Button>
+            </DrawerFooter>
+          </DrawerContent>
+        </Drawer>
+  
+  
+        <CustomAlertDialog
+          isOpen={alert}
+          onClose={() => setAlert(false)}
+          alertHandler={handleSave}
+          message={"Are you sure you want to add cash details?"}
+          isLoading={isLoading}
+        />
+      </>
+    );
+  };
+  
+  export default AddRejected;
+  
\ No newline at end of file
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx
new file mode 100644
index 0000000..906b4ab
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx
@@ -0,0 +1,361 @@
+import {
+  Avatar,
+  Badge,
+  Box,
+  Button,
+  HStack,
+  Input,
+  Table,
+  Tag,
+  Tbody,
+  Text,
+  Th,
+  Tooltip,
+  Tr,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import { AddIcon, DeleteIcon, EditIcon, ViewIcon } from "@chakra-ui/icons";
+import { LuFileSpreadsheet } from "react-icons/lu";
+import * as XLSX from "xlsx";
+import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
+import NormalTable from "../../../../Components/DataTable/NormalTable";
+import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+import ToastBox from "../../../../Components/ToastBox";
+import AddCashDetails from "../AddCashDetails";
+import { debounce } from "../../../Admin/Contact";
+import AddApproved from "./addApproved";
+
+const formatDate = (date) => new Date(date).toLocaleDateString();
+
+const Approved = () => {
+  const toast = useToast();
+  const firstField = useRef();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { IODetails, approved, setApproved } =
+    useContext(GlobalStateContext);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isLoading, setIsLoading] = useState(true);
+  const [deleteAlert, setDeleteAlert] = useState(false);
+  const [actionId, setActionId] = useState(false);
+  const [mouseEntered, setMouseEntered] = useState(false);
+  const [mouseEnteredId, setMouseEnteredId] = useState("");
+
+  useEffect(() => {
+    // Simulate loading
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 1500);
+
+    // Cleanup the timer on component unmount
+    return () => clearTimeout(timer);
+  }, []);
+
+  const formatDate = (date) => {
+    return new Date(date).toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+    });
+  };
+
+  console.log("==============",IODetails?.ioCashStatusHistory?.Approved);
+  
+
+  // Table filter
+  const filteredData = IODetails?.ioCashStatusHistory?.Approved?.filter((item) => {
+    // Filter by name (case insensitive)
+    const name = item.transactionDate;
+    const searchLower = searchTerm.toLowerCase();
+    const nameMatches = name.toLowerCase().includes(searchLower);
+    return nameMatches;
+  });
+
+  const tableHeadRow = [
+    "Sr No.",
+    "Transaction date",
+    "Amount",
+    "Comments",
+    "Update by",
+    "Update On",
+  ];
+
+  const extractedArray = filteredData?.map((item, index) => ({
+    id: item?.id,
+    "Sr No.": (
+      <Text
+        as={"span"}
+        color={"gray.800"}
+        fontWeight={"500"}
+      >
+        {index + 1}.
+      </Text>
+    ),
+    "Transaction date": (
+      <Text
+        as={"span"}
+        color={"gray.600"}
+        fontWeight={"500"}
+      >
+        {formatDate(item?.transactionDate)}
+      </Text>
+    ),
+    "Amount": (
+      <Text
+        as={"span"}
+        color={"gray.800"}
+        fontWeight={"500"}
+      >
+        <Badge ms={1} colorScheme="green" me={1}>
+          $
+        </Badge>
+        {item?.transactionAmount}
+      </Text>
+    ),
+    "Comments": (
+      <Text
+        w={"100px"}
+        as={"span"}
+        color={"gray.800"}
+        fontWeight={"500"}
+      >
+        {item?.comments ? item?.comments : "---" }
+      </Text>
+    ),
+    "Update by": (
+      <Text
+        w={"100px"}
+        as={"span"}
+        color={"gray.800"}
+        fontWeight={"500"}
+        display={"flex"}
+        alignItems={"center"}
+      >
+        <Avatar
+         mr={2}
+          size="sm"
+          name={item.creator?.firstName}
+          src={item.creator?.profilePhoto}
+        />
+        {item?.creator?.firstName}
+      </Text>
+    ),
+    "Update On": (
+      <Text
+        w={"100px"}
+        as={"span"}
+        color={"gray.800"}
+        fontWeight={"500"}
+      >
+        {formatDate(item.updatedAt)}
+      </Text>
+    ),
+  }));
+
+  const handleDelete = () => {
+    const updatedSponsors = sponser.filter(
+      (sponsor) => sponsor.id !== actionId
+    );
+
+    setTimeout(() => {
+      setCaseDetails(updatedSponsors);
+      setDeleteAlert(false);
+      setIsLoading(false);
+    }, 100);
+    setIsLoading(true);
+  };
+
+  const ioCashExporteDetails = IODetails?.ioCashStatusHistory?.Approved?.map((item, index) => ({
+    "Transaction date": item?.transactionDate,
+    "Transaction type": item?.transactionType,
+    Amount: parseFloat(item?.transactionAmount) || 0,
+    Comments: item?.comments,
+  }));
+  
+  const exportToExcelNew = (data, fileName) => {
+    const worksheet = XLSX.utils.json_to_sheet(data);
+    const workbook = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
+
+    // Export file
+    XLSX.writeFile(workbook, `${fileName}.xlsx`);
+  };
+
+  const Total = () => {
+    return (
+      <Table size="sm">
+        <Tbody backgroundColor="gray.50">
+          <Tr>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="140px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              Balance in IO Cash
+            </Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="100px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              {" "}
+            </Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="120px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              {"48,000.00"}
+            </Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="150px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              {}
+            </Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="100px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              {" "}
+            </Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="100px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            ></Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="100px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            ></Th>
+          </Tr>
+        </Tbody>
+      </Table>
+    );
+  };
+
+  return (
+    <Box {...OPACITY_ON_LOAD} pb={0}>
+      <Box bg="white.500">
+        <HStack
+          display={"flex"}
+          justifyContent={"space-between"}
+          pb={3}
+          spacing="24px"
+        >
+          <Input
+            type="search"
+            width={300}
+            placeholder="Search..."
+            size="sm"
+            rounded="sm"
+            focusBorderColor="green.500"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+
+          <HStack display={"flex"} alignItems={"center"}>
+            <Button
+              onClick={() =>
+                exportToExcelNew(ioCashExporteDetails, "IO Cash History")
+              }
+              leftIcon={<LuFileSpreadsheet />}
+              colorScheme="forestGreen"
+              size={"sm"}
+              variant={"outline"}
+              rounded={"sm"}
+              fontSize={"xs"}
+              isDisabled={ioCashExporteDetails?.length === 0}
+            >
+              Export xls
+            </Button>
+            {/* <Button
+              onClick={onOpen}
+              leftIcon={<AddIcon />}
+              colorScheme={"forestGreen"}
+              rounded={"sm"}
+              fontSize={"xs"}
+              size={"sm"}
+              fontWeight={500}
+            >
+              Add
+            </Button> */}
+            {IODetails?.isInvestedAmount ? (
+              <Button
+                onClick={onOpen}
+                leftIcon={<AddIcon />}
+                colorScheme="forestGreen"
+                size={"sm"}
+                rounded={"sm"}
+                fontSize={"xs"}
+              >
+                Add
+              </Button>
+            ) : null}
+          </HStack>
+        </HStack>
+      </Box>
+
+      <NormalTable
+        emptyMessage={`We don't have any Sponers`}
+        tableHeadRow={tableHeadRow}
+        data={extractedArray}
+        isLoading={isLoading}
+        viewActionId={actionId}
+        setViewActionId={setActionId}
+        total={<Total/>}
+        setMouseEnteredId={setMouseEnteredId}
+        setMouseEntered={setMouseEntered}
+      />
+
+      <CustomAlertDialog
+        onClose={() => setDeleteAlert(false)}
+        isOpen={deleteAlert}
+        message={"Are you sure you want to delete sponers?"}
+        alertHandler={handleDelete}
+        isLoading={isLoading}
+      />
+
+      <AddApproved
+        isOpen={isOpen}
+        onClose={onClose}
+        firstField={firstField}
+      />
+    </Box>
+  );
+};
+
+export default Approved;
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx
new file mode 100644
index 0000000..4c9e6c7
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx
@@ -0,0 +1,54 @@
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
+import React from "react";
+import Approved from "./Approved";
+import Pending from "./Pending";
+import Rejected from "./Rejected";
+
+const IOCashDetails = () => {
+  return (
+    <Tabs>
+      <TabList>
+        <Tab
+          fontSize={"sm"}
+          _selected={{
+            color: "#004118",
+            borderBottom: "2px solid #38a169",
+          }}
+        >
+          Approved
+        </Tab>
+        <Tab
+          fontSize={"sm"}
+          _selected={{
+            color: "#004118",
+            borderBottom: "2px solid #38a169",
+          }}
+        >
+          Pending
+        </Tab>
+        <Tab
+          fontSize={"sm"}
+          _selected={{
+            color: "#004118",
+            borderBottom: "2px solid #38a169",
+          }}
+        >
+          Rejected
+        </Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel>
+          <Approved />
+        </TabPanel>
+        <TabPanel>
+          <Pending />
+        </TabPanel>
+        <TabPanel>
+          <Rejected />
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  );
+};
+
+export default IOCashDetails;
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
new file mode 100644
index 0000000..88c613f
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
@@ -0,0 +1,364 @@
+import {
+  Avatar,
+  Badge,
+  Box,
+  Button,
+  HStack,
+  Input,
+  Table,
+  Tag,
+  Tbody,
+  Text,
+  Th,
+  Tooltip,
+  Tr,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import {
+  AddIcon,
+  CheckIcon,
+  CloseIcon,
+  DeleteIcon,
+  EditIcon,
+  ViewIcon,
+} from "@chakra-ui/icons";
+import { LuFileSpreadsheet } from "react-icons/lu";
+import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
+import NormalTable from "../../../../Components/DataTable/NormalTable";
+import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+import ToastBox from "../../../../Components/ToastBox";
+import AddCashDetails from "../AddCashDetails";
+import { debounce } from "../../../Admin/Contact";
+import AddPending from "./AddPending";
+
+const formatDate = (date) => new Date(date).toLocaleDateString();
+
+const Pending = () => {
+  const toast = useToast();
+  const firstField = useRef();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { IODetails, approved, setApproved } =
+    useContext(GlobalStateContext);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isLoading, setIsLoading] = useState(true);
+  const [deleteAlert, setDeleteAlert] = useState(false);
+  const [actionId, setActionId] = useState(false);
+  const [mouseEntered, setMouseEntered] = useState(false);
+  const [mouseEnteredId, setMouseEnteredId] = useState("");
+
+  useEffect(() => {
+    // Simulate loading
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 1500);
+
+    // Cleanup the timer on component unmount
+    return () => clearTimeout(timer);
+  }, []);
+
+  const formatDate = (date) => {
+    return new Date(date).toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+    });
+  };
+
+  // Table filter
+  const filteredData = IODetails?.ioCashStatusHistory?.Pending?.filter((item) => {
+    // Filter by name (case insensitive)
+    const name = item.transactionDate;
+    const searchLower = searchTerm.toLowerCase();
+    const nameMatches = name.toLowerCase().includes(searchLower);
+    return nameMatches;
+  });
+
+  const tableHeadRow = [
+    "Sr No.",
+    "Transaction date",
+    "Amount",
+    "Comments",
+    "Update by",
+    "Update On",
+    "Status",
+  ];
+
+  const extractedArray = filteredData?.map((item, index) => ({
+    id: item?.id,
+    "Sr No.": (
+      <Text as={"span"} color={"gray.800"} fontWeight={"500"}>
+        {index + 1}.
+      </Text>
+    ),
+    "Transaction date": (
+      <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
+        {formatDate(item?.transactionDate)}
+      </Text>
+    ),
+    Amount: (
+      <Text as={"span"} color={"gray.800"} fontWeight={"500"}>
+        <Badge ms={1} colorScheme="green" me={1}>
+          $
+        </Badge>
+        {item?.transactionAmount}
+      </Text>
+    ),
+    Comments: (
+      <Text w={"100px"} as={"span"} color={"gray.800"} fontWeight={"500"}>
+        {item?.comments}
+      </Text>
+    ),
+    "Update by": (
+      <Text
+        w={"100px"}
+        as={"span"}
+        color={"gray.800"}
+        fontWeight={"500"}
+        display={"flex"}
+        alignItems={"center"}
+      >
+        <Avatar
+          mr={2}
+          size="sm"
+          name={item.creator?.firstName}
+          src={item.creator?.profilePhoto}
+        />
+        {item?.creator?.firstName}
+      </Text>
+    ),
+    "Update On": (
+      <Text w={"100px"} as={"span"} color={"gray.800"} fontWeight={"500"}>
+        {formatDate(item.updatedAt)}
+      </Text>
+    ),
+    Status: (
+      <Box display={"flex"} justifyContent={"center"} gap={2}>
+        <Tooltip
+          rounded={"sm"}
+          fontSize={"xs"}
+          label="Approve"
+          bg="#fff"
+          color={"green.500"}
+          placement="left-start"
+        >
+          <Button
+            // colorScheme="forestGreen"
+            // color="green.500"
+            rounded={"sm"}
+            size={"xs"}
+            textTransform={"inherit"}
+            fontWeight={500}
+            px={2}
+            py={1}
+            onClick={() => {
+              setActionId(item.id);
+              onConfirmOpen();
+            }}
+            colorScheme="green"
+            variant={"solid"}
+            cursor={"pointer"}
+          >
+            <CheckIcon fontSize={"12px"} />
+          </Button>
+        </Tooltip>
+        <Tooltip
+          rounded={"sm"}
+          fontSize={"xs"}
+          label="Reject"
+          bg="#fff"
+          color={"red.500"}
+          placement="left-start"
+        >
+          <Button
+            colorScheme="red"
+            // color="red.500"
+            rounded={"sm"}
+            size={"xs"}
+            textTransform={"inherit"}
+            fontWeight={500}
+            px={2}
+            onClick={() => {
+              setActionId(item.id);
+              onRejectOpen();
+            }}
+            py={1}
+            // variant={"solid"}
+          >
+            <CloseIcon fontSize={"10px"} />
+          </Button>
+        </Tooltip>
+      </Box>
+    ),
+  }));
+
+  const handleDelete = () => {
+    const updatedSponsors = sponser.filter(
+      (sponsor) => sponsor.id !== actionId
+    );
+
+    setTimeout(() => {
+      setCaseDetails(updatedSponsors);
+      setDeleteAlert(false);
+      setIsLoading(false);
+    }, 100);
+    setIsLoading(true);
+  };
+
+  const Total = () => {
+    return (
+      <Table size="sm">
+        <Tbody backgroundColor="gray.50">
+          <Tr>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="130px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              Balance in IO Cash
+            </Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="150px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              {" "}
+            </Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="150px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              {}
+            </Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="100px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              {"48,000.00"}
+            </Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="100px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              {" "}
+            </Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="100px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            ></Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="80px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            ></Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="50px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            ></Th>
+          </Tr>
+        </Tbody>
+      </Table>
+    );
+  };
+
+  return (
+    <Box {...OPACITY_ON_LOAD} pb={0}>
+      <Box bg="white.500">
+        <HStack
+          display={"flex"}
+          justifyContent={"space-between"}
+          pb={3}
+          spacing="24px"
+        >
+          <Input
+            type="search"
+            width={300}
+            placeholder="Search..."
+            size="sm"
+            rounded="sm"
+            focusBorderColor="green.500"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+
+          <HStack display={"flex"} alignItems={"center"}>
+            <Button
+              onClick={onOpen}
+              leftIcon={<AddIcon />}
+              colorScheme={"forestGreen"}
+              rounded={"sm"}
+              fontSize={"xs"}
+              size={"sm"}
+              fontWeight={500}
+            >
+              Add
+            </Button>
+          </HStack>
+        </HStack>
+      </Box>
+
+      <NormalTable
+        emptyMessage={`We don't have any Sponers`}
+        tableHeadRow={tableHeadRow}
+        data={extractedArray}
+        isLoading={isLoading}
+        viewActionId={actionId}
+        setViewActionId={setActionId}
+        total={<Total />}
+        setMouseEnteredId={setMouseEnteredId}
+        setMouseEntered={setMouseEntered}
+      />
+
+      <CustomAlertDialog
+        onClose={() => setDeleteAlert(false)}
+        isOpen={deleteAlert}
+        message={"Are you sure you want to delete sponers?"}
+        alertHandler={handleDelete}
+        isLoading={isLoading}
+      />
+
+      <AddPending isOpen={isOpen} onClose={onClose} firstField={firstField} />
+    </Box>
+  );
+};
+
+export default Pending;
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
new file mode 100644
index 0000000..d1c99bb
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
@@ -0,0 +1,314 @@
+import {
+    Avatar,
+    Badge,
+    Box,
+    Button,
+    HStack,
+    Input,
+    Table,
+    Tag,
+    Tbody,
+    Text,
+    Th,
+    Tooltip,
+    Tr,
+    useDisclosure,
+    useToast,
+  } from "@chakra-ui/react";
+  import React, { useContext, useEffect, useRef, useState } from "react";
+  import { AddIcon} from "@chakra-ui/icons";
+  import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
+  import NormalTable from "../../../../Components/DataTable/NormalTable";
+  import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+  import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+  import AddCashDetails from "../AddCashDetails";
+import AddRejected from "./AddRejected";
+  
+  const formatDate = (date) => new Date(date).toLocaleDateString();
+  
+  const Rejected = () => {
+    const toast = useToast();
+    const firstField = useRef();
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    const { IODetails, approved, setApproved } =
+      useContext(GlobalStateContext);
+    const [searchTerm, setSearchTerm] = useState("");
+    const [isLoading, setIsLoading] = useState(true);
+    const [deleteAlert, setDeleteAlert] = useState(false);
+    const [actionId, setActionId] = useState(false);
+    const [mouseEntered, setMouseEntered] = useState(false);
+    const [mouseEnteredId, setMouseEnteredId] = useState("");
+  
+    useEffect(() => {
+      // Simulate loading
+      const timer = setTimeout(() => {
+        setIsLoading(false);
+      }, 1500);
+  
+      // Cleanup the timer on component unmount
+      return () => clearTimeout(timer);
+    }, []);
+  
+    const formatDate = (date) => {
+      return new Date(date).toLocaleDateString("en-GB", {
+        day: "2-digit",
+        month: "2-digit",
+        year: "numeric",
+      });
+    };
+  
+  
+    // Table filter
+    const filteredData = IODetails?.ioCashStatusHistory?.Reject?.filter((item) => {
+      // Filter by name (case insensitive)
+      const name = item.transactionDate;
+      const searchLower = searchTerm.toLowerCase();
+      const nameMatches = name.toLowerCase().includes(searchLower);
+      return nameMatches;
+    });
+  
+    const tableHeadRow = [
+      "Sr No.",
+      "Transaction date",
+      "Amount",
+      "Comments",
+      "Update by",
+      "Update On",
+    ];
+  
+    const extractedArray = filteredData?.map((item, index) => ({
+      id: item?.id,
+      "Sr No.": (
+        <Text
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+        >
+          {index + 1}.
+        </Text>
+      ),
+      "Transaction date": (
+        <Text
+          as={"span"}
+          color={"gray.600"}
+          fontWeight={"500"}
+        >
+          {formatDate(item?.transactionDate)}
+        </Text>
+      ),
+      "Amount": (
+        <Text
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+        >
+          <Badge ms={1} colorScheme="green" me={1}>
+            $
+          </Badge>
+          {item?.transactionAmount}
+        </Text>
+      ),
+      "Comments": (
+        <Text
+          w={"100px"}
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+        >
+          {item?.comments}
+        </Text>
+      ),
+      "Update by": (
+        <Text
+          w={"100px"}
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+          display={"flex"}
+          alignItems={"center"}
+        >
+          <Avatar
+           mr={2}
+            size="sm"
+            name={item.creator?.firstName}
+            src={item.creator?.profilePhoto}
+          />
+          {item?.creator?.firstName}
+        </Text>
+      ),
+      "Update On": (
+        <Text
+          w={"100px"}
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+        >
+          {formatDate(item.updatedAt)}
+        </Text>
+      ),
+    }));
+  
+    const handleDelete = () => {
+      const updatedSponsors = sponser.filter(
+        (sponsor) => sponsor.id !== actionId
+      );
+  
+      setTimeout(() => {
+        setCaseDetails(updatedSponsors);
+        setDeleteAlert(false);
+        setIsLoading(false);
+      }, 100);
+      setIsLoading(true);
+    };
+  
+    const Total = () => {
+      return (
+        <Table size="sm">
+          <Tbody backgroundColor="gray.50">
+            <Tr>
+              <Th
+                textAlign={"center"}
+                p={3}
+                width="130px"
+                color={"#004118"}
+                whiteSpace="normal"
+                wordBreak="normal"
+                overflowWrap="normal"
+              >
+                Balance in IO Cash
+              </Th>
+              <Th
+                textAlign={"center"}
+                p={3}
+                width="150px"
+                color={"#004118"}
+                whiteSpace="normal"
+                wordBreak="normal"
+                overflowWrap="normal"
+              >
+                {" "}
+              </Th>
+              <Th
+                textAlign={"center"}
+                p={3}
+                width="150px"
+                color={"#004118"}
+                whiteSpace="normal"
+                wordBreak="normal"
+                overflowWrap="normal"
+              >
+                {}
+              </Th>
+              <Th
+                textAlign={"center"}
+                p={3}
+                width="100px"
+                color={"#004118"}
+                whiteSpace="normal"
+                wordBreak="normal"
+                overflowWrap="normal"
+              >
+                {"48,000.00"}
+              </Th>
+              <Th
+                textAlign={"center"}
+                p={3}
+                width="100px"
+                color={"#004118"}
+                whiteSpace="normal"
+                wordBreak="normal"
+                overflowWrap="normal"
+              >
+                {" "}
+              </Th>
+              <Th
+                textAlign={"center"}
+                p={3}
+                width="100px"
+                color={"#004118"}
+                whiteSpace="normal"
+                wordBreak="normal"
+                overflowWrap="normal"
+              ></Th>
+              <Th
+                textAlign={"center"}
+                p={3}
+                width="100px"
+                color={"#004118"}
+                whiteSpace="normal"
+                wordBreak="normal"
+                overflowWrap="normal"
+              ></Th>
+            </Tr>
+          </Tbody>
+        </Table>
+      );
+    };
+  
+    return (
+      <Box {...OPACITY_ON_LOAD} pb={0}>
+        <Box bg="white.500">
+          <HStack
+            display={"flex"}
+            justifyContent={"space-between"}
+            pb={3}
+            spacing="24px"
+          >
+            <Input
+              type="search"
+              width={300}
+              placeholder="Search..."
+              size="sm"
+              rounded="sm"
+              focusBorderColor="green.500"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+  
+            <HStack display={"flex"} alignItems={"center"}>
+              <Button
+              onClick={onOpen}
+                leftIcon={<AddIcon />}
+                colorScheme={"forestGreen"}
+                rounded={"sm"}
+                fontSize={"xs"}
+                size={"sm"}
+                fontWeight={500}
+              >
+                Add
+              </Button>
+            </HStack>
+          </HStack>
+        </Box>
+  
+        <NormalTable
+          emptyMessage={`We don't have any Sponers`}
+          tableHeadRow={tableHeadRow}
+          data={extractedArray}
+          isLoading={isLoading}
+          viewActionId={actionId}
+          setViewActionId={setActionId}
+          total={<Total/>}
+          setMouseEnteredId={setMouseEnteredId}
+          setMouseEntered={setMouseEntered}
+        />
+  
+        <CustomAlertDialog
+          onClose={() => setDeleteAlert(false)}
+          isOpen={deleteAlert}
+          message={"Are you sure you want to delete sponers?"}
+          alertHandler={handleDelete}
+          isLoading={isLoading}
+        />
+  
+        <AddRejected
+          isOpen={isOpen}
+          onClose={onClose}
+          firstField={firstField}
+        />
+      </Box>
+    );
+  };
+  
+  export default Rejected;
+  
\ No newline at end of file
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetailsOld.jsx
similarity index 92%
rename from src/Pages/IO_Management/CreateIO/IOCashDetails.jsx
rename to src/Pages/IO_Management/CreateIO/IOCashDetailsOld.jsx
index e834d30..ff9acf7 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetailsOld.jsx
@@ -29,7 +29,7 @@ import { exportToExcel, exportToExcelNew } from "../../../Constants/Constants";
 
 const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
 
-const IOCashDetails = () => {
+const IOCashDetailsOld = () => {
   const toast = useToast();
   const firstField = useRef();
   const { isOpen, onOpen, onClose } = useDisclosure();
@@ -75,7 +75,7 @@ const IOCashDetails = () => {
     "Update by ",
     "Update On",
   ];
- 
+
   const handleUpdateStatus = debounce((id) => {
     setCaseDetails((prevSponser) =>
       prevSponser.map((sponsor) =>
@@ -134,9 +134,9 @@ const IOCashDetails = () => {
         </Badge>
         {/* {parseFloat(item.transactionAmount || 0).toLocaleString()} */}
         {`${parseFloat(item.transactionAmount || 0).toLocaleString(undefined, {
-            minimumFractionDigits: 2,
-            maximumFractionDigits: 2,
-          })}`}
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2,
+        })}`}
       </Text>
     ),
     Comments: (
@@ -180,8 +180,6 @@ const IOCashDetails = () => {
     ),
   }));
 
-
-
   const customHeaders = [
     { label: "Date", key: "transactionDate" },
     { label: "Transaction type", key: "transactionType" },
@@ -192,12 +190,12 @@ const IOCashDetails = () => {
     // Add more headers as needed
   ];
 
-  const ioCashExporteDetails = IODetails?.ioCashHistory?.map((item, index) =>({
-    "Date": item?.transactionDate,
+  const ioCashExporteDetails = IODetails?.ioCashHistory?.map((item, index) => ({
+    Date: item?.transactionDate,
     "Transaction type": item?.transactionType,
-    "Amount":parseFloat(item?.transactionAmount) || 0,
-    "Comments": item?.comments
-  }))
+    Amount: parseFloat(item?.transactionAmount) || 0,
+    Comments: item?.comments,
+  }));
 
   console.log(ioCashExporteDetails);
 
@@ -312,8 +310,7 @@ const IOCashDetails = () => {
             onChange={(e) => setSearchTerm(e.target.value)}
           />
 
-
-<HStack display={"flex"} alignItems={"center"}>
+          <HStack display={"flex"} alignItems={"center"}>
             <Button
               onClick={() =>
                 exportToExcelNew(ioCashExporteDetails, "IO Cash History")
@@ -324,25 +321,24 @@ const IOCashDetails = () => {
               variant={"outline"}
               rounded={"sm"}
               fontSize={"xs"}
-              
               isDisabled={ioCashExporteDetails?.length === 0}
             >
               Export xls
             </Button>
 
-          {IODetails?.isInvestedAmount ? (
-            <Button
-              onClick={onOpen}
-              leftIcon={<AddIcon />}
-              colorScheme="forestGreen"
-              size={"sm"}
-              rounded={"sm"}
-              fontSize={"xs"}
-            >
-              Add IO Cash
-            </Button>
-          ) : null}
-        </HStack>
+            {IODetails?.isInvestedAmount ? (
+              <Button
+                onClick={onOpen}
+                leftIcon={<AddIcon />}
+                colorScheme="forestGreen"
+                size={"sm"}
+                rounded={"sm"}
+                fontSize={"xs"}
+              >
+                Add IO Cash
+              </Button>
+            ) : null}
+          </HStack>
         </HStack>
       </Box>
 
@@ -376,4 +372,4 @@ const IOCashDetails = () => {
   );
 };
 
-export default IOCashDetails;
+export default IOCashDetailsOld;
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx
new file mode 100644
index 0000000..ee406db
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx
@@ -0,0 +1,260 @@
+import {
+    Avatar,
+    Badge,
+    Box,
+    Button,
+    HStack,
+    Input,
+    Table,
+    Tag,
+    Tbody,
+    Text,
+    Th,
+    Tooltip,
+    Tr,
+    useDisclosure,
+    useToast,
+  } from "@chakra-ui/react";
+  import React, { useContext, useEffect, useRef, useState } from "react";
+  import { AddIcon, DeleteIcon, EditIcon, ViewIcon } from "@chakra-ui/icons";
+  import { LuFileSpreadsheet } from "react-icons/lu";
+  import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
+  import NormalTable from "../../../../Components/DataTable/NormalTable";
+  import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+  import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+  import * as XLSX from "xlsx";
+  import ToastBox from "../../../../Components/ToastBox";
+  import AddCashDetails from "../AddCashDetails";
+  import { debounce } from "../../../Admin/Contact";
+  
+  const formatDate = (date) => new Date(date).toLocaleDateString();
+  
+  const Approved = () => {
+    const toast = useToast();
+    const firstField = useRef();
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    const { IODetails, iONAVDetail, setIONAVDetail } =
+      useContext(GlobalStateContext);
+    const [searchTerm, setSearchTerm] = useState("");
+    const [isLoading, setIsLoading] = useState(true);
+    const [deleteAlert, setDeleteAlert] = useState(false);
+    const [actionId, setActionId] = useState(false);
+    const [mouseEntered, setMouseEntered] = useState(false);
+    const [mouseEnteredId, setMouseEnteredId] = useState("");
+  
+    useEffect(() => {
+      // Simulate loading
+      const timer = setTimeout(() => {
+        setIsLoading(false);
+      }, 1500);
+  
+      // Cleanup the timer on component unmount
+      return () => clearTimeout(timer);
+    }, []);
+  
+    const formatDate = (date) => {
+      return new Date(date).toLocaleDateString("en-GB", {
+        day: "2-digit",
+        month: "2-digit",
+        year: "numeric",
+      });
+    };
+  
+  
+    // Table filter
+    const filteredData = IODetails?.ioNAVStatusHistory?.Approved?.filter((item) => {
+      // Filter by name (case insensitive)
+      const name = item.transactionAmount;
+      const searchLower = searchTerm.toLowerCase();
+      const nameMatches = name.toLowerCase().includes(searchLower);
+      return nameMatches;
+    });
+  
+    const tableHeadRow = [
+      "Sr No.",
+      "Valuation date",
+      "NAV",
+      "Last Nav Update",
+      "Investment Closed",
+      "Comments", 
+      "Updated By",
+    ];
+  
+    const extractedArray = filteredData?.map((item, index) => ({
+      id: item?.id,
+      "Sr No.": (
+        <Text
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+        >
+          {index + 1}.
+        </Text>
+      ),
+      "Valuation date": (
+        <Text
+          as={"span"}
+          color={"gray.600"}
+          fontWeight={"500"}
+        >
+          {formatDate(item?.transactionDate)}
+        </Text>
+      ),
+      "NAV": (
+        <Text
+          as={"span"}
+          color={"gray.600"}
+          fontWeight={"500"}
+        >
+            <Badge ms={1} colorScheme="green" me={1}>
+            $
+          </Badge>
+          {item?.transactionAmount}
+        </Text>
+      ),
+      "Last Nav Update": (
+        <Text
+          justifyContent={"center"}
+          as={"span"}
+          color={"teal.900"}
+          fontWeight={"500"}
+          className="d-flex align-items-center web-text-small"
+        >
+          {item.previousNAVvalue && `${item.previousNAVvalue}`}
+        </Text>
+      ),
+      "Investment Closed": ( 
+      <Text
+        justifyContent={"center"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item?.initialNAVvalue && `${item?.initialNAVvalue}`}
+      </Text>
+    ),
+      "Comments": (
+        <Text
+          w={"100px"}
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+        >
+          {item?.comments ? item?.comments : "---" }
+        </Text>
+      ),
+      "Updated By": (
+        <Text
+          w={"100px"}
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+          display={"flex"}
+        alignItems={"center"}
+        >
+           <Avatar
+            mr={2}
+          size="sm"
+          name={item.creator?.firstName}
+          src={item.creator?.profilePhoto}
+        />
+          {item?.creator?.firstName}
+        </Text>
+      ),
+    }));
+  
+    const handleDelete = () => {
+      const updatedSponsors = sponser.filter(
+        (sponsor) => sponsor.id !== actionId
+      );
+  
+      setTimeout(() => {
+        setCaseDetails(updatedSponsors);
+        setDeleteAlert(false);
+        setIsLoading(false);
+      }, 100);
+      setIsLoading(true);
+    };
+
+    const exportToExcelNew = (data, fileName) => {
+      const worksheet = XLSX.utils.json_to_sheet(data);
+      const workbook = XLSX.utils.book_new();
+      XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
+  
+      // Export file
+      XLSX.writeFile(workbook, `${fileName}.xlsx`);
+    };
+
+    const ioNavExport = IODetails?.ioNAVStatusHistory?.Approved?.map((item, index) => ({
+      "ID": item?.id, // Keep as integer if it's already a number
+      "Valuation date": formatDate(item?.transactionDate), // Assuming this is a date, no conversion needed
+      "NAV": parseFloat(item?.transactionAmount) || 0, // Convert to float
+      "Last Nav Update": parseFloat(item?.previousNAVvalue) || 0, // Convert to float
+      "Investment Closed": parseFloat(item?.initialNAVvalue) || 0, // Convert to float
+      "Comments": item?.comments, // Keep as string
+      // "Transaction Type": item?.transactionType,
+      "Updated By": item?.creator?.firstName, // Keep as string
+      // "Update On": formatDate(item?.updatedAt) // Assuming this is a date, no conversion needed
+    }));
+  
+    return (
+      <Box {...OPACITY_ON_LOAD} pb={0}>
+        <Box bg="white.500">
+          <HStack
+            display={"flex"}
+            justifyContent={"space-between"}
+            pb={3}
+            spacing="24px"
+          >
+            <Input
+              type="search"
+              width={300}
+              placeholder="Search..."
+              size="sm"
+              rounded="sm"
+              focusBorderColor="green.500"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+            <Button
+              onClick={() =>
+                exportToExcelNew(ioNavExport, "Io Nav details")
+              }
+              leftIcon={<LuFileSpreadsheet />}
+              colorScheme="forestGreen"
+              size={"sm"}
+              variant={"outline"}
+              rounded={"sm"}
+              fontSize={"xs"}
+              isDisabled={ioNavExport?.length === 0}
+            >
+              Export xls
+            </Button>
+          </HStack>
+        </Box>
+  
+        <NormalTable
+          emptyMessage={`We don't have any Sponers`}
+          tableHeadRow={tableHeadRow}
+          data={extractedArray}
+          isLoading={isLoading}
+          viewActionId={actionId}
+          setViewActionId={setActionId}
+          setMouseEnteredId={setMouseEnteredId}
+          setMouseEntered={setMouseEntered}
+        />
+  
+        <CustomAlertDialog
+          onClose={() => setDeleteAlert(false)}
+          isOpen={deleteAlert}
+          message={"Are you sure you want to delete sponers?"}
+          alertHandler={handleDelete}
+          isLoading={isLoading}
+        />
+      </Box>
+    );
+  };
+  
+  export default Approved;
+  
\ No newline at end of file
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/IONAVDetails.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/IONAVDetails.jsx
new file mode 100644
index 0000000..bad63f8
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/IONAVDetails.jsx
@@ -0,0 +1,54 @@
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
+import React from "react";
+import Approved from "./Approved";
+import Pending from "./Pending";
+import Rejected from "./Rejected";
+
+const IONAVDetails = () => {
+  return (
+    <Tabs>
+      <TabList>
+        <Tab
+          fontSize={"sm"}
+          _selected={{
+            color: "#004118",
+            borderBottom: "2px solid #38a169",
+          }}
+        >
+          Approved
+        </Tab>
+        <Tab
+          fontSize={"sm"}
+          _selected={{
+            color: "#004118",
+            borderBottom: "2px solid #38a169",
+          }}
+        >
+          Pending
+        </Tab>
+        <Tab
+          fontSize={"sm"}
+          _selected={{
+            color: "#004118",
+            borderBottom: "2px solid #38a169",
+          }}
+        >
+          Rejected
+        </Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel>
+          <Approved />
+        </TabPanel>
+        <TabPanel>
+          <Pending />
+        </TabPanel>
+        <TabPanel>
+          <Rejected />
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  );
+};
+
+export default IONAVDetails;
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx
new file mode 100644
index 0000000..fd8836c
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx
@@ -0,0 +1,273 @@
+import {
+    Badge,
+    Box,
+    Button,
+    HStack,
+    Input,
+    Text,
+    Tooltip,
+    useDisclosure,
+    useToast,
+  } from "@chakra-ui/react";
+  import React, { useContext, useEffect, useRef, useState } from "react";
+  import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
+  import NormalTable from "../../../../Components/DataTable/NormalTable";
+  import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+  import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+import { CheckIcon, CloseIcon } from "@chakra-ui/icons";
+  
+  const formatDate = (date) => new Date(date).toLocaleDateString();
+  
+  const Pending = () => {
+    const toast = useToast();
+    const firstField = useRef();
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    const { IODetails, iONAVDetail, setIONAVDetail } =
+      useContext(GlobalStateContext);
+    const [searchTerm, setSearchTerm] = useState("");
+    const [isLoading, setIsLoading] = useState(true);
+    const [deleteAlert, setDeleteAlert] = useState(false);
+    const [actionId, setActionId] = useState(false);
+    const [mouseEntered, setMouseEntered] = useState(false);
+    const [mouseEnteredId, setMouseEnteredId] = useState("");
+  
+    useEffect(() => {
+      // Simulate loading
+      const timer = setTimeout(() => {
+        setIsLoading(false);
+      }, 1500);
+  
+      // Cleanup the timer on component unmount
+      return () => clearTimeout(timer);
+    }, []);
+  
+    const formatDate = (date) => {
+      return new Date(date).toLocaleDateString("en-GB", {
+        day: "2-digit",
+        month: "2-digit",
+        year: "numeric",
+      });
+    };
+  
+  
+    // Table filter
+    const filteredData = IODetails?.ioNAVStatusHistory?.Pending?.filter((item) => {
+      // Filter by name (case insensitive)
+      const name = item.transactionDate;
+      const searchLower = searchTerm.toLowerCase();
+      const nameMatches = name.toLowerCase().includes(searchLower);
+      return nameMatches;
+    });
+  
+    const tableHeadRow = [
+      "Sr No.",
+      "Valuation date",
+      "NAV",
+      "Last Nav Update",
+      "Investment Closed",
+      "Comments",
+      "Updated By",
+      "Status",
+    ];
+  
+    const extractedArray = filteredData?.map((item, index) => ({
+      id: item?.id,
+      "Sr No.": (
+        <Text
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+        >
+          {index + 1}.
+        </Text>
+      ),
+      "Valuation date": (
+        <Text
+          as={"span"}
+          color={"gray.600"}
+          fontWeight={"500"}
+        >
+          {formatDate(item?.transactionDate)}
+        </Text>
+      ),
+      "NAV": (
+        <Text
+          as={"span"}
+          color={"gray.600"}
+          fontWeight={"500"}
+        >
+            <Badge ms={1} colorScheme="green" me={1}>
+            $
+          </Badge>
+          {item?.transactionAmount}
+        </Text>
+      ),
+      "Last Nav Update": (
+        <Text
+          justifyContent={"center"}
+          as={"span"}
+          color={"teal.900"}
+          fontWeight={"500"}
+          className="d-flex align-items-center web-text-small"
+        >
+          {item.previousNAVvalue && `${item.previousNAVvalue}`}
+        </Text>
+      ),
+      "Investment Closed": ( 
+      <Text
+        justifyContent={"center"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item?.initialNAVvalue && `${item?.initialNAVvalue}`}
+      </Text>
+    ),
+      "Comments": (
+        <Text
+          w={"100px"}
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+        >
+          {item?.comments ? item?.comments : "---" }
+        </Text>
+      ),
+      "Updated By": (
+        <Text
+          w={"100px"}
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+          display={"flex"}
+        alignItems={"center"}
+        >
+           <Avatar
+            mr={2}
+          size="sm"
+          name={item.creator?.firstName}
+          src={item.creator?.profilePhoto}
+        />
+          {item?.creator?.firstName}
+        </Text>
+      ),
+      "Status": (
+        <Box display={"flex"} justifyContent={"center"} gap={2}>
+          <Tooltip
+            rounded={"sm"}
+            fontSize={"xs"}
+            label="Approve"
+            bg="#fff"
+            color={"green.500"}
+            placement="left-start"
+          >
+            <Button
+              // colorScheme="forestGreen"
+              // color="green.500"
+              rounded={"sm"}
+              size={"xs"}
+              textTransform={"inherit"}
+              fontWeight={500}
+              px={2}
+              py={1}
+              onClick={() => {
+                setActionId(item.id);
+                onConfirmOpen();
+              }}
+              colorScheme="green"
+              variant={"solid"}
+              cursor={"pointer"}
+            >
+              <CheckIcon fontSize={"12px"} />
+            </Button>
+          </Tooltip>
+          <Tooltip 
+            rounded={"sm"}
+            fontSize={"xs"}
+            label="Reject"
+            bg="#fff"
+            color={"red.500"}
+            placement="left-start"
+          >
+            <Button
+              colorScheme="red"
+              // color="red.500"
+              rounded={"sm"}
+              size={"xs"}
+              textTransform={"inherit"}
+              fontWeight={500}
+              px={2}
+              onClick={() => {
+                setActionId(item.id);
+                onRejectOpen();
+              }}
+              py={1}
+            // variant={"solid"}
+            >
+              <CloseIcon fontSize={"10px"} />
+            </Button>
+          </Tooltip>
+        </Box>
+      ),
+    }));
+  
+    const handleDelete = () => {
+      const updatedSponsors = sponser.filter(
+        (sponsor) => sponsor.id !== actionId
+      );
+  
+      setTimeout(() => {
+        setCaseDetails(updatedSponsors);
+        setDeleteAlert(false);
+        setIsLoading(false);
+      }, 100);
+      setIsLoading(true);
+    };
+  
+    return (
+      <Box {...OPACITY_ON_LOAD} pb={0}>
+        <Box bg="white.500">
+          <HStack
+            display={"flex"}
+            justifyContent={"space-between"}
+            pb={3}
+            spacing="24px"
+          >
+            <Input
+              type="search"
+              width={300}
+              placeholder="Search..."
+              size="sm"
+              rounded="sm"
+              focusBorderColor="green.500"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+          </HStack>
+        </Box>
+  
+        <NormalTable
+          emptyMessage={`We don't have any Sponers`}
+          tableHeadRow={tableHeadRow}
+          data={extractedArray}
+          isLoading={isLoading}
+          viewActionId={actionId}
+          setViewActionId={setActionId}
+          setMouseEnteredId={setMouseEnteredId}
+          setMouseEntered={setMouseEntered}
+        />
+  
+        <CustomAlertDialog
+          onClose={() => setDeleteAlert(false)}
+          isOpen={deleteAlert}
+          message={"Are you sure you want to delete sponers?"}
+          alertHandler={handleDelete}
+          isLoading={isLoading}
+        />
+      </Box>
+    );
+  };
+  
+  export default Pending;
+  
\ No newline at end of file
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/Rejected.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/Rejected.jsx
new file mode 100644
index 0000000..caa437c
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/Rejected.jsx
@@ -0,0 +1,224 @@
+import {
+    Avatar,
+    Badge,
+    Box,
+    Button,
+    HStack,
+    Input,
+    Table,
+    Tag,
+    Tbody,
+    Text,
+    Th,
+    Tooltip,
+    Tr,
+    useDisclosure,
+    useToast,
+  } from "@chakra-ui/react";
+  import React, { useContext, useEffect, useRef, useState } from "react";
+  import { AddIcon, DeleteIcon, EditIcon, ViewIcon } from "@chakra-ui/icons";
+  import { LuFileSpreadsheet } from "react-icons/lu";
+  import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
+  import NormalTable from "../../../../Components/DataTable/NormalTable";
+  import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+  import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+  import ToastBox from "../../../../Components/ToastBox";
+  import AddCashDetails from "../AddCashDetails";
+  import { debounce } from "../../../Admin/Contact";
+  
+  const formatDate = (date) => new Date(date).toLocaleDateString();
+  
+  const Rejected = () => {
+    const toast = useToast();
+    const firstField = useRef();
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    const { IODetails, iONAVDetail, setIONAVDetail } =
+      useContext(GlobalStateContext);
+    const [searchTerm, setSearchTerm] = useState("");
+    const [isLoading, setIsLoading] = useState(true);
+    const [deleteAlert, setDeleteAlert] = useState(false);
+    const [actionId, setActionId] = useState(false);
+    const [mouseEntered, setMouseEntered] = useState(false);
+    const [mouseEnteredId, setMouseEnteredId] = useState("");
+  
+    useEffect(() => {
+      // Simulate loading
+      const timer = setTimeout(() => {
+        setIsLoading(false);
+      }, 1500);
+  
+      // Cleanup the timer on component unmount
+      return () => clearTimeout(timer);
+    }, []);
+  
+    const formatDate = (date) => {
+      return new Date(date).toLocaleDateString("en-GB", {
+        day: "2-digit",
+        month: "2-digit",
+        year: "numeric",
+      });
+    };
+  
+  
+    // Table filter
+    const filteredData = IODetails?.ioNAVStatusHistory?.Reject?.filter((item) => {
+      // Filter by name (case insensitive)
+      const name = item.transactionAmount;
+      const searchLower = searchTerm.toLowerCase();
+      const nameMatches = name.toLowerCase().includes(searchLower);
+      return nameMatches;
+    });
+  
+    const tableHeadRow = [
+      "Sr No.",
+      "Valuation date",
+      "NAV",
+      "Last Nav Update",
+      "Investment Closed",
+      "Comments", 
+      "Updated By",
+    ];
+  
+    const extractedArray = filteredData?.map((item, index) => ({
+      id: item?.id,
+      "Sr No.": (
+        <Text
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+        >
+          {index + 1}.
+        </Text>
+      ),
+      "Valuation date": (
+        <Text
+          as={"span"}
+          color={"gray.600"}
+          fontWeight={"500"}
+        >
+          {formatDate(item?.transactionDate)}
+        </Text>
+      ),
+      "NAV": (
+        <Text
+          as={"span"}
+          color={"gray.600"}
+          fontWeight={"500"}
+        >
+            <Badge ms={1} colorScheme="green" me={1}>
+            $
+          </Badge>
+          {item?.transactionAmount}
+        </Text>
+      ),
+      "Last Nav Update": (
+        <Text
+          justifyContent={"center"}
+          as={"span"}
+          color={"teal.900"}
+          fontWeight={"500"}
+          className="d-flex align-items-center web-text-small"
+        >
+          {item.previousNAVvalue && `${item.previousNAVvalue}`}
+        </Text>
+      ),
+      "Investment Closed": ( 
+      <Text
+        justifyContent={"center"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item?.initialNAVvalue && `${item?.initialNAVvalue}`}
+      </Text>
+    ),
+      "Comments": (
+        <Text
+          w={"100px"}
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+        >
+          {item?.comments ? item?.comments : "---" }
+        </Text>
+      ),
+      "Updated By": (
+        <Text
+          w={"100px"}
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+          display={"flex"}
+        alignItems={"center"}
+        >
+           <Avatar
+            mr={2}
+          size="sm"
+          name={item.creator?.firstName}
+          src={item.creator?.profilePhoto}
+        />
+          {item?.creator?.firstName}
+        </Text>
+      ),
+    }));
+  
+    const handleDelete = () => {
+      const updatedSponsors = sponser.filter(
+        (sponsor) => sponsor.id !== actionId
+      );
+  
+      setTimeout(() => {
+        setCaseDetails(updatedSponsors);
+        setDeleteAlert(false);
+        setIsLoading(false);
+      }, 100);
+      setIsLoading(true);
+    };
+  
+    return (
+      <Box {...OPACITY_ON_LOAD} pb={0}>
+        <Box bg="white.500">
+          <HStack
+            display={"flex"}
+            justifyContent={"space-between"}
+            pb={3}
+            spacing="24px"
+          >
+            <Input
+              type="search"
+              width={300}
+              placeholder="Search..."
+              size="sm"
+              rounded="sm"
+              focusBorderColor="green.500"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+          </HStack>
+        </Box>
+  
+        <NormalTable
+          emptyMessage={`We don't have any Sponers`}
+          tableHeadRow={tableHeadRow}
+          data={extractedArray}
+          isLoading={isLoading}
+          viewActionId={actionId}
+          setViewActionId={setActionId}
+          setMouseEnteredId={setMouseEnteredId}
+          setMouseEntered={setMouseEntered}
+        />
+  
+        <CustomAlertDialog
+          onClose={() => setDeleteAlert(false)}
+          isOpen={deleteAlert}
+          message={"Are you sure you want to delete sponers?"}
+          alertHandler={handleDelete}
+          isLoading={isLoading}
+        />
+      </Box>
+    );
+  };
+  
+  export default Rejected;
+  
\ No newline at end of file
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetailsOld.jsx
similarity index 100%
rename from src/Pages/IO_Management/CreateIO/IONAVDetails.jsx
rename to src/Pages/IO_Management/CreateIO/IONAVDetailsOld.jsx
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/Approved.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/Approved.jsx
new file mode 100644
index 0000000..ac72f90
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/Approved.jsx
@@ -0,0 +1,215 @@
+import {
+    Avatar,
+    Badge,
+    Box,
+    Button,
+    HStack,
+    Input,
+    Table,
+    Tag,
+    Tbody,
+    Text,
+    Th,
+    Tooltip,
+    Tr,
+    useDisclosure,
+    useToast,
+  } from "@chakra-ui/react";
+  import React, { useContext, useEffect, useRef, useState } from "react";
+  import { AddIcon, DeleteIcon, EditIcon, ViewIcon } from "@chakra-ui/icons";
+  import { LuFileSpreadsheet } from "react-icons/lu";
+  import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
+  import NormalTable from "../../../../Components/DataTable/NormalTable";
+  import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+  import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+  import ToastBox from "../../../../Components/ToastBox";
+  import AddCashDetails from "../AddCashDetails";
+  import { debounce } from "../../../Admin/Contact";
+  
+  const formatDate = (date) => new Date(date).toLocaleDateString();
+  
+  const Approved = () => {
+    const toast = useToast();
+    const firstField = useRef();
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    const { IODetails, iOTransaction, setIOTransaction } =
+      useContext(GlobalStateContext);
+    const [searchTerm, setSearchTerm] = useState("");
+    const [isLoading, setIsLoading] = useState(true);
+    const [deleteAlert, setDeleteAlert] = useState(false);
+    const [actionId, setActionId] = useState(false);
+    const [mouseEntered, setMouseEntered] = useState(false);
+    const [mouseEnteredId, setMouseEnteredId] = useState("");
+  
+    useEffect(() => {
+      // Simulate loading
+      const timer = setTimeout(() => {
+        setIsLoading(false);
+      }, 1500);
+  
+      // Cleanup the timer on component unmount
+      return () => clearTimeout(timer);
+    }, []);
+  
+    const formatDate = (date) => {
+      return new Date(date).toLocaleDateString("en-GB", {
+        day: "2-digit",
+        month: "2-digit",
+        year: "numeric",
+      });
+    };
+  
+  
+    // Table filter
+    const filteredData =  IODetails?.ioTransactionRecords?.Approved?.filter((item) => {
+      // Filter by name (case insensitive)
+      const name = item.transactionAmount;
+      const searchLower = searchTerm.toLowerCase();
+      const nameMatches = name.toLowerCase().includes(searchLower);
+      return nameMatches;
+    });
+  
+    const tableHeadRow = [
+      "Sr No.",
+      "Transaction Name",
+      "Amount",
+      "Created By",
+      "Created On",
+      "Approved By",
+      "Approved On",
+    ];
+  
+    const extractedArray = filteredData?.map((item, index) => ({
+      id: item?.id,
+      "Sr No.": (
+        <Text
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+        >
+          {index + 1}.
+        </Text>
+      ),
+      "Transaction Name": (
+        <Text
+          as={"span"}
+          color={"gray.600"}
+          fontWeight={"500"}
+        >
+          {item?.transactionType}
+        </Text>
+      ),
+      "Amount": (
+        <Text
+          as={"span"}
+          color={"gray.600"}
+          fontWeight={"500"}
+        >
+          <Badge ms={1} colorScheme="green" me={1}>
+            $
+          </Badge>
+          {item?.transactionAmount}
+        </Text>
+      ),
+      "Created By": (
+        <Text
+          w={"100px"}
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+        >
+          {item?.createdBy}
+        </Text>
+      ),
+      "Created On": (
+        <Text
+          w={"100px"}
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+        >
+          {formatDate(item?.createdAt)}
+        </Text>
+      ),
+      "Approved By": (
+        <Text
+          w={"100px"}
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+        >
+          {item?.modifier ? item?.modifier : "---" }
+        </Text>
+      ),
+      "Approved On": (
+          <Text
+          w={"100px"}
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+          >
+            {item?.modifier ? formatDate(item?.updatedAt) : "---" }
+          {}
+        </Text>
+      ),
+    }));
+  
+    const handleDelete = () => {
+      const updatedSponsors = sponser.filter(
+        (sponsor) => sponsor.id !== actionId
+      );
+  
+      setTimeout(() => {
+        setCaseDetails(updatedSponsors);
+        setDeleteAlert(false);
+        setIsLoading(false);
+      }, 100);
+      setIsLoading(true);
+    };
+  
+    return (
+      <Box {...OPACITY_ON_LOAD} pb={0}>
+        <Box bg="white.500">
+          <HStack
+            display={"flex"}
+            justifyContent={"space-between"}
+            pb={3}
+            spacing="24px"
+          >
+            <Input
+              type="search"
+              width={300}
+              placeholder="Search..."
+              size="sm"
+              rounded="sm"
+              focusBorderColor="green.500"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+          </HStack>
+        </Box>
+  
+        <NormalTable
+          emptyMessage={`We don't have any Sponers`}
+          tableHeadRow={tableHeadRow}
+          data={extractedArray}
+          isLoading={isLoading}
+          viewActionId={actionId}
+          setViewActionId={setActionId}
+          setMouseEnteredId={setMouseEnteredId}
+          setMouseEntered={setMouseEntered}
+        />
+  
+        <CustomAlertDialog
+          onClose={() => setDeleteAlert(false)}
+          isOpen={deleteAlert}
+          message={"Are you sure you want to delete sponers?"}
+          alertHandler={handleDelete}
+          isLoading={isLoading}
+        />
+      </Box>
+    );
+  };
+  
+  export default Approved;
+  
\ No newline at end of file
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/IOTransaction.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/IOTransaction.jsx
new file mode 100644
index 0000000..7ac057d
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/IOTransaction.jsx
@@ -0,0 +1,54 @@
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
+import React from "react";
+import Approved from "./Approved";
+import Pending from "./Pending";
+import Rejected from "./Rejected";
+
+const IOTransaction = () => {
+  return (
+    <Tabs>
+      <TabList>
+        <Tab
+          fontSize={"sm"}
+          _selected={{
+            color: "#004118",
+            borderBottom: "2px solid #38a169",
+          }}
+        >
+          Approved
+        </Tab>
+        <Tab
+          fontSize={"sm"}
+          _selected={{
+            color: "#004118",
+            borderBottom: "2px solid #38a169",
+          }}
+        >
+          Pending
+        </Tab>
+        <Tab
+          fontSize={"sm"}
+          _selected={{
+            color: "#004118",
+            borderBottom: "2px solid #38a169",
+          }}
+        >
+          Rejected
+        </Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel>
+          <Approved />
+        </TabPanel>
+        <TabPanel>
+          <Pending />
+        </TabPanel>
+        <TabPanel>
+          <Rejected />
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  );
+};
+
+export default IOTransaction;
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
new file mode 100644
index 0000000..458d82c
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
@@ -0,0 +1,269 @@
+import {
+    Avatar,
+    Badge,
+    Box,
+    Button,
+    HStack,
+    Input,
+    Table,
+    Tag,
+    Tbody,
+    Text,
+    Th,
+    Tooltip,
+    Tr,
+    useDisclosure,
+    useToast,
+  } from "@chakra-ui/react";
+  import React, { useContext, useEffect, useRef, useState } from "react";
+  import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
+  import NormalTable from "../../../../Components/DataTable/NormalTable";
+  import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+  import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+import { CheckIcon, CloseIcon } from "@chakra-ui/icons";
+  
+  const formatDate = (date) => new Date(date).toLocaleDateString();
+  
+  const Pending = () => {
+    const toast = useToast();
+    const firstField = useRef();
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    const { IODetails, iOTransaction, setIOTransaction } =
+      useContext(GlobalStateContext);
+    const [searchTerm, setSearchTerm] = useState("");
+    const [isLoading, setIsLoading] = useState(true);
+    const [deleteAlert, setDeleteAlert] = useState(false);
+    const [actionId, setActionId] = useState(false);
+    const [mouseEntered, setMouseEntered] = useState(false);
+    const [mouseEnteredId, setMouseEnteredId] = useState("");
+  
+    useEffect(() => {
+      // Simulate loading
+      const timer = setTimeout(() => {
+        setIsLoading(false);
+      }, 1500);
+  
+      // Cleanup the timer on component unmount
+      return () => clearTimeout(timer);
+    }, []);
+  
+    const formatDate = (date) => {
+      return new Date(date).toLocaleDateString("en-GB", {
+        day: "2-digit",
+        month: "2-digit",
+        year: "numeric",
+      });
+    };
+  
+  
+    // Table filter
+    const filteredData = IODetails?.ioTransactionRecords?.Pending?.filter((item) => {
+      // Filter by name (case insensitive)
+      const name = item.transactionName;
+      const searchLower = searchTerm.toLowerCase();
+      const nameMatches = name.toLowerCase().includes(searchLower);
+      return nameMatches;
+    });
+  
+    const tableHeadRow = [
+      "Sr No.",
+      "Transaction Name",
+      "Amount",
+      "Created By",
+      "Created On",
+      "Approved By",
+      "Approved On",
+      "Status"
+    ];
+  
+    const extractedArray = filteredData?.map((item, index) => ({
+      id: item?.id,
+      "Sr No.": (
+        <Text
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+        >
+          {index + 1}.
+        </Text>
+      ),
+      "Transaction Name": (
+        <Text
+          as={"span"}
+          color={"gray.600"}
+          fontWeight={"500"}
+        >
+          {item?.transactionType}
+        </Text>
+      ),
+      "Amount": (
+        <Text
+          as={"span"}
+          color={"gray.600"}
+          fontWeight={"500"}
+        >
+          <Badge ms={1} colorScheme="green" me={1}>
+            $
+          </Badge>
+          {item?.transactionAmount}
+        </Text>
+      ),
+      "Created By": (
+        <Text
+          w={"100px"}
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+        >
+          {item?.createdBy}
+        </Text>
+      ),
+      "Created On": (
+        <Text
+          w={"100px"}
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+        >
+          {formatDate(item?.createdAt)}
+        </Text>
+      ),
+      "Approved By": (
+        <Text
+          w={"100px"}
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+        >
+          {item?.modifier ? item?.modifier : "---" }
+        </Text>
+      ),
+      "Approved On": (
+        <Text
+          w={"100px"}
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+        >
+          {formatDate(item?.updatedAt)}
+        </Text>
+      ),
+      "Status": (
+        <Box display={"flex"} justifyContent={"center"} gap={2}>
+          <Tooltip
+            rounded={"sm"}
+            fontSize={"xs"}
+            label="Approve"
+            bg="#fff"
+            color={"green.500"}
+            placement="left-start"
+          >
+            <Button
+              // colorScheme="forestGreen"
+              // color="green.500"
+              rounded={"sm"}
+              size={"xs"}
+              textTransform={"inherit"}
+              fontWeight={500}
+              px={2}
+              py={1}
+              onClick={() => {
+                setActionId(item.id);
+                onConfirmOpen();
+              }}
+              colorScheme="green"
+              variant={"solid"}
+              cursor={"pointer"}
+            >
+              <CheckIcon fontSize={"12px"} />
+            </Button>
+          </Tooltip>
+          <Tooltip 
+            rounded={"sm"}
+            fontSize={"xs"}
+            label="Reject"
+            bg="#fff"
+            color={"red.500"}
+            placement="left-start"
+          >
+            <Button
+              colorScheme="red"
+              // color="red.500"
+              rounded={"sm"}
+              size={"xs"}
+              textTransform={"inherit"}
+              fontWeight={500}
+              px={2}
+              onClick={() => {
+                setActionId(item.id);
+                onRejectOpen();
+              }}
+              py={1}
+            // variant={"solid"}
+            >
+              <CloseIcon fontSize={"10px"} />
+            </Button>
+          </Tooltip>
+        </Box>
+      ),
+    }));
+  
+    const handleDelete = () => {
+      const updatedSponsors = sponser.filter(
+        (sponsor) => sponsor.id !== actionId
+      );
+  
+      setTimeout(() => {
+        setCaseDetails(updatedSponsors);
+        setDeleteAlert(false);
+        setIsLoading(false);
+      }, 100);
+      setIsLoading(true);
+    };
+  
+    return (
+      <Box {...OPACITY_ON_LOAD} pb={0}>
+        <Box bg="white.500">
+          <HStack
+            display={"flex"}
+            justifyContent={"space-between"}
+            pb={3}
+            spacing="24px"
+          >
+            <Input
+              type="search"
+              width={300}
+              placeholder="Search..."
+              size="sm"
+              rounded="sm"
+              focusBorderColor="green.500"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+          </HStack>
+        </Box>
+  
+        <NormalTable
+          emptyMessage={`We don't have any Sponers`}
+          tableHeadRow={tableHeadRow}
+          data={extractedArray}
+          isLoading={isLoading}
+          viewActionId={actionId}
+          setViewActionId={setActionId}
+          setMouseEnteredId={setMouseEnteredId}
+          setMouseEntered={setMouseEntered}
+        />
+  
+        <CustomAlertDialog
+          onClose={() => setDeleteAlert(false)}
+          isOpen={deleteAlert}
+          message={"Are you sure you want to delete sponers?"}
+          alertHandler={handleDelete}
+          isLoading={isLoading}
+        />
+      </Box>
+    );
+  };
+  
+  export default Pending;
+  
\ No newline at end of file
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/Rejected.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/Rejected.jsx
new file mode 100644
index 0000000..49893eb
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/Rejected.jsx
@@ -0,0 +1,214 @@
+import {
+    Avatar,
+    Badge,
+    Box,
+    Button,
+    HStack,
+    Input,
+    Table,
+    Tag,
+    Tbody,
+    Text,
+    Th,
+    Tooltip,
+    Tr,
+    useDisclosure,
+    useToast,
+  } from "@chakra-ui/react";
+  import React, { useContext, useEffect, useRef, useState } from "react";
+  import { AddIcon, DeleteIcon, EditIcon, ViewIcon } from "@chakra-ui/icons";
+  import { LuFileSpreadsheet } from "react-icons/lu";
+  import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
+  import NormalTable from "../../../../Components/DataTable/NormalTable";
+  import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+  import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+  import ToastBox from "../../../../Components/ToastBox";
+  import AddCashDetails from "../AddCashDetails";
+  import { debounce } from "../../../Admin/Contact";
+  
+  const formatDate = (date) => new Date(date).toLocaleDateString();
+  
+  const Rejected = () => {
+    const toast = useToast();
+    const firstField = useRef();
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    const { IODetails, iOTransaction, setIOTransaction } =
+      useContext(GlobalStateContext);
+    const [searchTerm, setSearchTerm] = useState("");
+    const [isLoading, setIsLoading] = useState(true);
+    const [deleteAlert, setDeleteAlert] = useState(false);
+    const [actionId, setActionId] = useState(false);
+    const [mouseEntered, setMouseEntered] = useState(false);
+    const [mouseEnteredId, setMouseEnteredId] = useState("");
+  
+    useEffect(() => {
+      // Simulate loading
+      const timer = setTimeout(() => {
+        setIsLoading(false);
+      }, 1500);
+  
+      // Cleanup the timer on component unmount
+      return () => clearTimeout(timer);
+    }, []);
+  
+    const formatDate = (date) => {
+      return new Date(date).toLocaleDateString("en-GB", {
+        day: "2-digit",
+        month: "2-digit",
+        year: "numeric",
+      });
+    };
+  
+  
+    // Table filter
+    const filteredData = IODetails?.ioTransactionRecords?.Reject?.filter((item) => {
+      // Filter by name (case insensitive)
+      const name = item.transactionName;
+      const searchLower = searchTerm.toLowerCase();
+      const nameMatches = name.toLowerCase().includes(searchLower);
+      return nameMatches;
+    });
+  
+    const tableHeadRow = [
+      "Sr No.",
+      "Transaction Name",
+      "Amount",
+      "Created By",
+      "Created On",
+      "Approved By",
+      "Approved On",
+    ];
+  
+    const extractedArray = filteredData?.map((item, index) => ({
+      id: item?.id,
+      "Sr No.": (
+        <Text
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+        >
+          {index + 1}.
+        </Text>
+      ),
+      "Transaction Name": (
+        <Text
+          as={"span"}
+          color={"gray.600"}
+          fontWeight={"500"}
+        >
+          {item?.transactionType}
+        </Text>
+      ),
+      "Amount": (
+        <Text
+          as={"span"}
+          color={"gray.600"}
+          fontWeight={"500"}
+        >
+          <Badge ms={1} colorScheme="green" me={1}>
+            $
+          </Badge>
+          {item?.transactionAmount}
+        </Text>
+      ),
+      "Created By": (
+        <Text
+          w={"100px"}
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+        >
+          {item?.createdBy}
+        </Text>
+      ),
+      "Created On": (
+        <Text
+          w={"100px"}
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+        >
+          {formatDate(item?.createdAt)}
+        </Text>
+      ),
+      "Approved By": (
+        <Text
+          w={"100px"}
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+        >
+          {item?.modifier ? item?.modifier : "---" }
+        </Text>
+      ),
+      "Approved On": (
+        <Text
+          w={"100px"}
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+        >
+          {formatDate(item?.updatedAt)}
+        </Text>
+      ),
+    }));
+  
+    const handleDelete = () => {
+      const updatedSponsors = sponser.filter(
+        (sponsor) => sponsor.id !== actionId
+      );
+  
+      setTimeout(() => {
+        setCaseDetails(updatedSponsors);
+        setDeleteAlert(false);
+        setIsLoading(false);
+      }, 100);
+      setIsLoading(true);
+    };
+  
+    return (
+      <Box {...OPACITY_ON_LOAD} pb={0}>
+        <Box bg="white.500">
+          <HStack
+            display={"flex"}
+            justifyContent={"space-between"}
+            pb={3}
+            spacing="24px"
+          >
+            <Input
+              type="search"
+              width={300}
+              placeholder="Search..."
+              size="sm"
+              rounded="sm"
+              focusBorderColor="green.500"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+          </HStack>
+        </Box>
+  
+        <NormalTable
+          emptyMessage={`We don't have any Sponers`}
+          tableHeadRow={tableHeadRow}
+          data={extractedArray}
+          isLoading={isLoading}
+          viewActionId={actionId}
+          setViewActionId={setActionId}
+          setMouseEnteredId={setMouseEnteredId}
+          setMouseEntered={setMouseEntered}
+        />
+  
+        <CustomAlertDialog
+          onClose={() => setDeleteAlert(false)}
+          isOpen={deleteAlert}
+          message={"Are you sure you want to delete sponers?"}
+          alertHandler={handleDelete}
+          isLoading={isLoading}
+        />
+      </Box>
+    );
+  };
+  
+  export default Rejected;
+  
\ No newline at end of file
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
index 53aeaf5..c2f5e49 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
@@ -32,11 +32,14 @@ import KeyMerits from "../CreateIO/KeyMerits";
 import Investors from "../CreateIO/Investors";
 import EditIO from "../EditIO/EditIO";
 import IOArtifacts from "../CreateIO/IOArtifacts";
-import IOCashDetails from "../CreateIO/IOCashDetails";
-import IONAVDetails from "../CreateIO/IONAVDetails";
+// import IOCashDetails from "../CreateIO/IOCashDetailsold";
+// import IONAVDetails from "../CreateIO/IONAVDetailsOld";
 import { useGetIOprepopulateDataQuery } from "../../../Services/io.service";
 import UnderConstruction from "../../UnderConstruction";
 import Destribution from "../CreateIO/Destribution";
+import IOCashDetails from "../CreateIO/IOCashDetails/IOCashDetails";
+import IONAVDetails from "../CreateIO/IONAVDetails/IONAVDetails";
+import IOTransaction from "../CreateIO/IOTransaction/IOTransaction";
 
 const ViewIOdata = () => {
   const params = useParams();
@@ -64,6 +67,10 @@ const ViewIOdata = () => {
       label: "Distribution to Investors",
       content: <Destribution data={data?.data} />,
     },
+    {
+      label: "IO Transaction",
+      content: <IOTransaction data={data?.data} />,
+    },
     // { label: "Distribution to Investors", content: <UnderConstruction h={'75vh'}  />  },
   ];
 
@@ -101,11 +108,12 @@ const ViewIOdata = () => {
                     : !IODetails?.isInvestedAmount
                 }
                 key={index}
-                fontSize={"sm"}
+                fontSize={"xs"}
                 _selected={{
                   color: "#004118",
                   borderBottom: "2px solid #38a169",
                 }}
+                fontWeight={500}
               >
                 {label}
               </Tab>
diff --git a/src/Pages/Investor_Management/InvestorDetails/InvestorDetails.jsx b/src/Pages/Investor_Management/InvestorDetails/InvestorDetails.jsx
index 1f7f5a9..3e50cc9 100644
--- a/src/Pages/Investor_Management/InvestorDetails/InvestorDetails.jsx
+++ b/src/Pages/Investor_Management/InvestorDetails/InvestorDetails.jsx
@@ -6,8 +6,6 @@ import {
   HStack,
   Input,
   Select,
-  Switch,
-  Tag,
   Text,
   Tooltip,
   useDisclosure,
@@ -103,7 +101,6 @@ const InvestorDetails = () => {
   // ====================================================[Table Setup]================================================================
   const tableHeadRow = [
     "Sr No",
-    
     "Client ID",
     "First Name",
     "Last Name",
diff --git a/src/Services/io.service.js b/src/Services/io.service.js
index 12b4c3e..8b2ba3e 100644
--- a/src/Services/io.service.js
+++ b/src/Services/io.service.js
@@ -431,11 +431,17 @@ export const ioService = createApi({
     }),
 
 
+    // ========Add Io Details========
 
-
-
-
-
+       updateIOCase: builder.mutation({
+        query: ({ data, id }) => ({
+          url: `/io/admin/maker-transaction/${id}/verify-pending-transaction-for-cash-and-nav`,
+          method: "POST",
+          body: data,
+        }),
+  
+        invalidatesTags: ["getIOById"],
+    }),
 
 
   }),
@@ -509,6 +515,11 @@ export const {
   useCreateInvestmentTypeMutation,
   useUpdateInvestmentTypeMutation,
   useDeleteInvestmentTypeMutation,
-  useProfileQuery
+  useProfileQuery,
+
+
+  // ========[ Add Io Details ]========
+
+  useUpdateIOCaseMutation
 
 } = ioService;