From 5fc16b58ea25f15fa8a7b9f2a05fb01002fcc944 Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Thu, 14 Nov 2024 16:04:20 +0530
Subject: [PATCH] =?UTF-8?q?working=20tabs=F0=9F=91=B7=E2=80=8D=E2=99=82?=
 =?UTF-8?q?=EF=B8=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CreateIO/IOCashDetails/AddApproved.jsx    | 487 +++++++++---------
 .../CreateIO/IOCashDetails/AddPending.jsx     | 487 +++++++++---------
 .../CreateIO/IOCashDetails/AddRejected.jsx    | 482 ++++++++---------
 .../CreateIO/IOCashDetails/Approved.jsx       |  39 +-
 .../CreateIO/IOCashDetails/Pending.jsx        |  33 +-
 .../CreateIO/IOCashDetails/Rejected.jsx       |  41 +-
 .../CreateIO/IONAVDetails/AddApproved.jsx     | 251 +++++++++
 .../CreateIO/IONAVDetails/AddPending.jsx      | 251 +++++++++
 .../CreateIO/IONAVDetails/AddRejected.jsx     | 251 +++++++++
 .../CreateIO/IONAVDetails/Approved.jsx        |  85 ++-
 .../IO_Management/ViewIO/HeaderModal/Exit.jsx |   2 +-
 .../ViewIO/HeaderModal/UpdateIONav.jsx        |   2 +-
 src/Services/io.service.js                    |   3 +-
 13 files changed, 1655 insertions(+), 759 deletions(-)
 create mode 100644 src/Pages/IO_Management/CreateIO/IONAVDetails/AddApproved.jsx
 create mode 100644 src/Pages/IO_Management/CreateIO/IONAVDetails/AddPending.jsx
 create mode 100644 src/Pages/IO_Management/CreateIO/IONAVDetails/AddRejected.jsx

diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/AddApproved.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/AddApproved.jsx
index 17bddef..5685ce1 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/AddApproved.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/AddApproved.jsx
@@ -1,254 +1,251 @@
 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";
+  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 { useParams } from "react-router-dom";
 import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+import { useCreateIoCashMutation, useCreateVideoArtifactsMutation, useUpdateVideoArtifactsMutation } from "../../../../Services/io.service";
 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 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 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 [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"} />,
+        });
       }
-  
-    };
-  
-  
-  
-    const handleConfirm = () => {
-      handleSubmit(onSubmit)();
-    };
-  
-    const handleSave = () => {
-      handleSubmit(onSubmit)();
-    };
-  
-    const handleClose = () => {
-      setAlert(false)
-      onClose()
-      reset({
-        transactionAmount:""
-      })
+
+    } catch (error) {
+      console.log(error);
     }
-  
-    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
+
+
+
+  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"}>Transaction 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;
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/AddPending.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/AddPending.jsx
index 941c592..7209f35 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/AddPending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/AddPending.jsx
@@ -1,254 +1,251 @@
 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";
+  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 { useParams } from "react-router-dom";
 import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+import { useCreateIoCashMutation, useCreateVideoArtifactsMutation, useUpdateVideoArtifactsMutation } from "../../../../Services/io.service";
 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 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 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 [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"} />,
+        });
       }
-  
-    };
-  
-  
-  
-    const handleConfirm = () => {
-      handleSubmit(onSubmit)();
-    };
-  
-    const handleSave = () => {
-      handleSubmit(onSubmit)();
-    };
-  
-    const handleClose = () => {
-      setAlert(false)
-      onClose()
-      reset({
-        transactionAmount:""
-      })
+
+    } catch (error) {
+      console.log(error);
     }
-  
-    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
+
+
+
+  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"}>Transaction 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;
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/AddRejected.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/AddRejected.jsx
index b00639f..197df0c 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/AddRejected.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/AddRejected.jsx
@@ -1,249 +1,251 @@
 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";
+  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 { useParams } from "react-router-dom";
 import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+import { useCreateIoCashMutation, useCreateVideoArtifactsMutation, useUpdateVideoArtifactsMutation } from "../../../../Services/io.service";
 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 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 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 [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"} />,
+        });
       }
-  
-    };
-  
-  
-  
-    const handleConfirm = () => {
-      handleSubmit(onSubmit)();
-    };
-  
-    const handleSave = () => {
-      handleSubmit(onSubmit)();
-    };
-  
-    const handleClose = () => {
-      setAlert(false)
-      onClose()
-      reset({
-        transactionAmount:""
-      })
+
+    } catch (error) {
+      console.log(error);
     }
-  
-    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
+
+
+
+  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"}>Transaction 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;
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx
index 906b4ab..7746881 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx
@@ -27,12 +27,16 @@ import ToastBox from "../../../../Components/ToastBox";
 import AddCashDetails from "../AddCashDetails";
 import { debounce } from "../../../Admin/Contact";
 import AddApproved from "./addApproved";
+import { useUpdateIOCaseMutation } from "../../../../Services/io.service";
+import { useParams } from "react-router-dom";
 
 const formatDate = (date) => new Date(date).toLocaleDateString();
 
 const Approved = () => {
-  const toast = useToast();
   const firstField = useRef();
+  const params = useParams()
+  const toast = useToast();
+  const id = params?.id
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { IODetails, approved, setApproved } =
     useContext(GlobalStateContext);
@@ -73,6 +77,8 @@ const Approved = () => {
     return nameMatches;
   });
 
+  const [updateIOCase] = useUpdateIOCaseMutation()
+
   const tableHeadRow = [
     "Sr No.",
     "Transaction date",
@@ -267,6 +273,31 @@ const Approved = () => {
     );
   };
 
+  const handleAdd = async () =>{
+   try {
+      const res = await updateIOCase(id)
+      if (res?.data) {
+        toast({
+          render: () => (
+            <ToastBox status={"success"} message={res?.data?.message} />
+          ),
+        });
+        setIsLoading(false);
+        onOpen()
+
+      } else if (res?.error) {
+        toast({
+          render: () => (
+            <ToastBox status={"error"} message={res?.error?.data?.message} />
+          ),
+        });
+        setIsLoading(false);
+      }
+   } catch (error) { 
+    
+   }
+  }
+
   return (
     <Box {...OPACITY_ON_LOAD} pb={0}>
       <Box bg="white.500">
@@ -315,7 +346,7 @@ const Approved = () => {
             </Button> */}
             {IODetails?.isInvestedAmount ? (
               <Button
-                onClick={onOpen}
+                onClick={handleAdd}
                 leftIcon={<AddIcon />}
                 colorScheme="forestGreen"
                 size={"sm"}
@@ -341,13 +372,13 @@ const Approved = () => {
         setMouseEntered={setMouseEntered}
       />
 
-      <CustomAlertDialog
+      {/* <CustomAlertDialog
         onClose={() => setDeleteAlert(false)}
         isOpen={deleteAlert}
         message={"Are you sure you want to delete sponers?"}
         alertHandler={handleDelete}
         isLoading={isLoading}
-      />
+      /> */}
 
       <AddApproved
         isOpen={isOpen}
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
index 88c613f..f172fc8 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
@@ -33,11 +33,15 @@ import ToastBox from "../../../../Components/ToastBox";
 import AddCashDetails from "../AddCashDetails";
 import { debounce } from "../../../Admin/Contact";
 import AddPending from "./AddPending";
+import { useParams } from "react-router-dom";
+import { useUpdateIOCaseMutation } from "../../../../Services/io.service";
 
 const formatDate = (date) => new Date(date).toLocaleDateString();
 
 const Pending = () => {
   const toast = useToast();
+  const params = useParams()
+  const id = params?.id
   const firstField = useRef();
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { IODetails, approved, setApproved } =
@@ -49,6 +53,8 @@ const Pending = () => {
   const [mouseEntered, setMouseEntered] = useState(false);
   const [mouseEnteredId, setMouseEnteredId] = useState("");
 
+  const [updateIOCase] = useUpdateIOCaseMutation()
+
   useEffect(() => {
     // Simulate loading
     const timer = setTimeout(() => {
@@ -300,6 +306,31 @@ const Pending = () => {
     );
   };
 
+  const handleAdd = async () =>{
+    try {
+       const res = await updateIOCase(id)
+       if (res?.data) {
+         toast({
+           render: () => (
+             <ToastBox status={"success"} message={res?.data?.message} />
+           ),
+         });
+         setIsLoading(false);
+         onOpen()
+ 
+       } else if (res?.error) {
+         toast({
+           render: () => (
+             <ToastBox status={"error"} message={res?.error?.data?.message} />
+           ),
+         });
+         setIsLoading(false);
+       }
+    } catch (error) { 
+     
+    }
+   }
+
   return (
     <Box {...OPACITY_ON_LOAD} pb={0}>
       <Box bg="white.500">
@@ -322,7 +353,7 @@ const Pending = () => {
 
           <HStack display={"flex"} alignItems={"center"}>
             <Button
-              onClick={onOpen}
+               onClick={handleAdd}
               leftIcon={<AddIcon />}
               colorScheme={"forestGreen"}
               rounded={"sm"}
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
index d1c99bb..6be91f1 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
@@ -23,10 +23,15 @@ import {
   import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
   import AddCashDetails from "../AddCashDetails";
 import AddRejected from "./AddRejected";
+import { useUpdateIOCaseMutation } from "../../../../Services/io.service";
+import { useParams } from "react-router-dom";
+import ToastBox from "../../../../Components/ToastBox";
   
   const formatDate = (date) => new Date(date).toLocaleDateString();
   
   const Rejected = () => {
+    const params = useParams()
+    const id = params?.id
     const toast = useToast();
     const firstField = useRef();
     const { isOpen, onOpen, onClose } = useDisclosure();
@@ -38,6 +43,8 @@ import AddRejected from "./AddRejected";
     const [actionId, setActionId] = useState(false);
     const [mouseEntered, setMouseEntered] = useState(false);
     const [mouseEnteredId, setMouseEnteredId] = useState("");
+
+    const [updateIOCase] = useUpdateIOCaseMutation()
   
     useEffect(() => {
       // Simulate loading
@@ -244,6 +251,31 @@ import AddRejected from "./AddRejected";
         </Table>
       );
     };
+
+    
+  const handleAdd = async () =>{
+    try {
+       const res = await updateIOCase(id)
+       if (res?.data) {
+         toast({
+           render: () => (
+             <ToastBox status={"success"} message={res?.data?.message} />
+           ),
+         });
+         setIsLoading(false);
+         onOpen()
+ 
+       } else if (res?.error) {
+         toast({
+           render: () => (
+             <ToastBox status={"error"} message={res?.error?.data?.message} />
+           ),
+         });
+         setIsLoading(false);
+       }
+    } catch (error) {    
+    }
+  }
   
     return (
       <Box {...OPACITY_ON_LOAD} pb={0}>
@@ -266,17 +298,18 @@ import AddRejected from "./AddRejected";
             />
   
             <HStack display={"flex"} alignItems={"center"}>
+              {IODetails?.isInvestedAmount ? (
               <Button
-              onClick={onOpen}
+                onClick={handleAdd}
                 leftIcon={<AddIcon />}
-                colorScheme={"forestGreen"}
+                colorScheme="forestGreen"
+                size={"sm"}
                 rounded={"sm"}
                 fontSize={"xs"}
-                size={"sm"}
-                fontWeight={500}
               >
                 Add
               </Button>
+            ) : null}
             </HStack>
           </HStack>
         </Box>
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/AddApproved.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/AddApproved.jsx
new file mode 100644
index 0000000..ab6a5d3
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/AddApproved.jsx
@@ -0,0 +1,251 @@
+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 { useParams } from "react-router-dom";
+import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+import { useCreateIoCashMutation, useCreateVideoArtifactsMutation, useUpdateVideoArtifactsMutation } from "../../../../Services/io.service";
+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 Nav 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"}>Transaction 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;
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/AddPending.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/AddPending.jsx
new file mode 100644
index 0000000..ac0e038
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/AddPending.jsx
@@ -0,0 +1,251 @@
+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 { useParams } from "react-router-dom";
+import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+import { useCreateIoCashMutation, useCreateVideoArtifactsMutation, useUpdateVideoArtifactsMutation } from "../../../../Services/io.service";
+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 Nav 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"}>Transaction 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;
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/AddRejected.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/AddRejected.jsx
new file mode 100644
index 0000000..18b271b
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/AddRejected.jsx
@@ -0,0 +1,251 @@
+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 { useParams } from "react-router-dom";
+import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+import { useCreateIoCashMutation, useCreateVideoArtifactsMutation, useUpdateVideoArtifactsMutation } from "../../../../Services/io.service";
+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 Nav 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"}>Transaction 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;
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx
index ee406db..97c1623 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx
@@ -26,11 +26,16 @@ import {
   import ToastBox from "../../../../Components/ToastBox";
   import AddCashDetails from "../AddCashDetails";
   import { debounce } from "../../../Admin/Contact";
+import { useParams } from "react-router-dom";
+import { useUpdateIOCaseMutation } from "../../../../Services/io.service";
+import AddApproved from "./AddApproved";
   
   const formatDate = (date) => new Date(date).toLocaleDateString();
   
   const Approved = () => {
+    const params = useParams()
     const toast = useToast();
+    const id = params?.id
     const firstField = useRef();
     const { isOpen, onOpen, onClose } = useDisclosure();
     const { IODetails, iONAVDetail, setIONAVDetail } =
@@ -41,6 +46,7 @@ import {
     const [actionId, setActionId] = useState(false);
     const [mouseEntered, setMouseEntered] = useState(false);
     const [mouseEnteredId, setMouseEnteredId] = useState("");
+    const [updateIOCase] = useUpdateIOCaseMutation()
   
     useEffect(() => {
       // Simulate loading
@@ -163,6 +169,32 @@ import {
         </Text>
       ),
     }));
+
+    
+  const handleAdd = async () =>{
+    try {
+       const res = await updateIOCase(id)
+       if (res?.data) {
+         toast({
+           render: () => (
+             <ToastBox status={"success"} message={res?.data?.message} />
+           ),
+         });
+         setIsLoading(false);
+         onOpen()
+ 
+       } else if (res?.error) {
+         toast({
+           render: () => (
+             <ToastBox status={"error"} message={res?.error?.data?.message} />
+           ),
+         });
+         setIsLoading(false);
+       }
+    } catch (error) { 
+     
+    }
+   }
   
     const handleDelete = () => {
       const updatedSponsors = sponser.filter(
@@ -202,22 +234,24 @@ import {
       <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
+          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(ioNavExport, "Io Nav details")
               }
@@ -231,7 +265,20 @@ import {
             >
               Export xls
             </Button>
+            {IODetails?.isInvestedAmount ? (
+              <Button
+                onClick={handleAdd}
+                leftIcon={<AddIcon />}
+                colorScheme="forestGreen"
+                size={"sm"}
+                rounded={"sm"}
+                fontSize={"xs"}
+              >
+                Add
+              </Button>
+            ) : null}
           </HStack>
+        </HStack>
         </Box>
   
         <NormalTable
@@ -252,6 +299,12 @@ import {
           alertHandler={handleDelete}
           isLoading={isLoading}
         />
+
+      <AddApproved
+        isOpen={isOpen}
+        onClose={onClose}
+        firstField={firstField}
+      />
       </Box>
     );
   };
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/Exit.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/Exit.jsx
index 93de936..790fc09 100644
--- a/src/Pages/IO_Management/ViewIO/HeaderModal/Exit.jsx
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/Exit.jsx
@@ -94,7 +94,7 @@ const Exit = ({ isOpen, onClose }) => {
       const res = await getDistributionInvestment({ id, data });
       console.log(res?.data?.data);
 
-      if (res?.error?.status === 401) {
+      if (res?.error?.status === 401) { 
         // toast({
         //   render: () => (
         //     <ToastBox message={res?.error?.data?.message} status={"error"} />
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIONav.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIONav.jsx
index 95643e2..fb94923 100644
--- a/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIONav.jsx
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIONav.jsx
@@ -55,7 +55,7 @@ const UpdateIONav = ({ isOpen, onClose }) => {
 
   const [createIoNav] = useCreateIoNavMutation()
 
-
+ 
   const onSubmit = async (data) => {
     setIsLoading(true);
     try {
diff --git a/src/Services/io.service.js b/src/Services/io.service.js
index 8b2ba3e..167d6a8 100644
--- a/src/Services/io.service.js
+++ b/src/Services/io.service.js
@@ -434,10 +434,9 @@ export const ioService = createApi({
     // ========Add Io Details========
 
        updateIOCase: builder.mutation({
-        query: ({ data, id }) => ({
+        query: (id) => ({
           url: `/io/admin/maker-transaction/${id}/verify-pending-transaction-for-cash-and-nav`,
           method: "POST",
-          body: data,
         }),
   
         invalidatesTags: ["getIOById"],