diff --git a/src/Pages/Fawateer/CreateRequest.jsx b/src/Pages/Fawateer/CreateRequest.jsx
index 3bd9e39..0529ef9 100644
--- a/src/Pages/Fawateer/CreateRequest.jsx
+++ b/src/Pages/Fawateer/CreateRequest.jsx
@@ -1,17 +1,27 @@
 import React, { useState } from "react";
 import { OPACITY_ON_LOAD } from "../../Layout/animations";
-import { Box, Button, HStack, Input, InputGroup, InputRightAddon, Textarea, useDisclosure, Image, Icon, VStack, Text, useToast } from "@chakra-ui/react";
 import {
-  FormControl,
-  FormLabel,
-  FormHelperText,
+  Box,
+  Button,
+  HStack,
+  Input,
+  InputGroup,
+  InputRightAddon,
+  Textarea,
+  useDisclosure,
+  Image,
+  Icon,
+  VStack,
+  Text,
+  useToast,
 } from "@chakra-ui/react";
+import { FormControl, FormLabel, FormHelperText } from "@chakra-ui/react";
 import { DeleteIcon, Search2Icon } from "@chakra-ui/icons";
 import SelectInvestorModal from "./SelectInvestorModal";
 import { Controller, useForm } from "react-hook-form"; // Import useForm
 import { yupResolver } from "@hookform/resolvers/yup"; // Import resolver for Yup
 import * as Yup from "yup"; // Import Yup for validation
-import { motion } from 'framer-motion'; // Import Framer Motion for animations
+import { motion } from "framer-motion"; // Import Framer Motion for animations
 import { bytesToMB } from "../../Constants/Constants";
 import { useCreateFawateerRequestMutation } from "../../Services/fawateer.maker.service";
 import ToastBox from "../../Components/ToastBox";
@@ -23,60 +33,66 @@ const validationSchema = Yup.object().shape({
   investorName: Yup.string().required("Investor name is required"),
   clientId: Yup.string().required("Client ID is required"),
   transaction_date: Yup.date()
-  .required('Date is required')
-  .transform((value, originalValue) => {
-    return originalValue === "" ? null : value; // Convert empty strings to null
-  })
-  .typeError('Please enter a valid date').max(new Date(), "Date cannot be in the future"),
+    .required("Date is required")
+    .transform((value, originalValue) => {
+      return originalValue === "" ? null : value; // Convert empty strings to null
+    })
+    .typeError("Please enter a valid date")
+    .max(new Date(), "Date cannot be in the future"),
   transaction_amount: Yup.number()
-  .required("Transaction amount is required")
-  .transform((value, originalValue) => originalValue === "" ? null : value) // Convert empty strings to null
-  .typeError('Transaction amount must be a number') // Custom error message if it's not a number
-  .positive('Transaction amount must be greater than zero'),
+    .required("Transaction amount is required")
+    .transform((value, originalValue) => (originalValue === "" ? null : value)) // Convert empty strings to null
+    .typeError("Transaction amount must be a number") // Custom error message if it's not a number
+    .positive("Transaction amount must be greater than zero"),
   spportFile_path: Yup.mixed().required("Support file is required"),
   makerComment: Yup.string(),
 });
 
 const CreateRequest = () => {
-  const toast = useToast()
-  const navigate=useNavigate()
+  const toast = useToast();
+  const navigate = useNavigate();
   const { isOpen, onOpen, onClose } = useDisclosure();
   const [selectedInvestor, setSelectorInvestor] = useState({});
   const [filePreview, setFilePreview] = useState(null); // State for previewing the file
   const [fileType, setFileType] = useState(null); // State to store file type for conditional rendering
-  const[ isLoading, setIsLoading ] = useState(false)
-  const [id, setId ] = useState(null)
+  const [isLoading, setIsLoading] = useState(false);
+  const [id, setId] = useState(null);
 
   // Initialize useForm with the resolver for Yup validation
-  const {control, register, handleSubmit, setValue,reset, formState: { errors } } = useForm({
+  const {
+    control,
+    register,
+    handleSubmit,
+    setValue,
+    reset,
+    formState: { errors },
+  } = useForm({
     resolver: yupResolver(validationSchema),
   });
 
-
-  const [ creatFawaateerRequest ] = useCreateFawateerRequestMutation()
-
+  const [creatFawaateerRequest] = useCreateFawateerRequestMutation();
 
   const onSubmit = async (data) => {
     console.log(data);
-    setIsLoading(true)
-  
+    setIsLoading(true);
+
     // Convert data to FormData
     const formData = new FormData();
-    
-   // Append each field from the data object to the FormData
-   Object.keys(data).forEach((key) => {
-    if (key === "spportFile_path" && data[key] instanceof FileList) {
-      // Append the first file from FileList (assuming single file input)
-      formData.append(key, data[key][0]); // Append the file
-    } else {
-      formData.append(key, data[key]); // Append other fields
-    }
-  });
-  
+
+    // Append each field from the data object to the FormData
+    Object.keys(data).forEach((key) => {
+      if (key === "spportFile_path" && data[key] instanceof FileList) {
+        // Append the first file from FileList (assuming single file input)
+        formData.append(key, data[key][0]); // Append the file
+      } else {
+        formData.append(key, data[key]); // Append other fields
+      }
+    });
+
     try {
       // Make the API call with formData
       const res = await creatFawaateerRequest({ data: formData, id });
-      
+
       if (res?.error) {
         toast({
           render: () => (
@@ -84,39 +100,35 @@ const CreateRequest = () => {
           ),
         });
         setIsLoading(false);
-        reset()
-        return
+        reset();
+        return;
       } else if (res?.data) {
         toast({
-          render: () => (
-            <ToastBox message={res?.data?.message} />
-          ),
+          render: () => <ToastBox message={res?.data?.message} />,
         });
         setIsLoading(false);
-        navigate('/fawateer-history')
-        return
+        navigate("/fawateer-history");
+        return;
       } else {
         toast({
           render: () => (
-            <ToastBox status={'error'} message={"Something went wrong"} />
+            <ToastBox status={"error"} message={"Something went wrong"} />
           ),
         });
         setIsLoading(false);
-        return
+        return;
       }
-  
     } catch (error) {
       console.error("Error:", error);
       toast({
         render: () => (
-          <ToastBox status={'error'} message={"An error occurred"} />
+          <ToastBox status={"error"} message={"An error occurred"} />
         ),
       });
       setIsLoading(false);
-      return
+      return;
     }
   };
-  
 
   // Handle file change and preview
   const handleFileChange = (e) => {
@@ -137,15 +149,12 @@ const CreateRequest = () => {
     }
   };
 
-
-
-
   return (
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
       <Box
         display={"flex"}
         justifyContent={"space-between"}
-        flexWrap={'wrap'}
+        flexWrap={"wrap"}
         alignItems={"center"}
         mt={5}
         px={4}
@@ -153,11 +162,16 @@ const CreateRequest = () => {
         onSubmit={handleSubmit(onSubmit)}
       >
         {/* Investor Name Field */}
-        <FormControl isRequired w={"49%"} mb={2} isInvalid={errors.investorName}>
+        <FormControl
+          isRequired
+          w={"49%"}
+          mb={2}
+          isInvalid={errors.investorName}
+        >
           <FormLabel textAlign={"left"} fontSize={"xs"} color={"gray.600"}>
             Investor name
           </FormLabel>
-          <InputGroup size='sm'>
+          <InputGroup size="sm">
             <Input
               bg={"#F5F8F6"}
               focusBorderColor="forestGreen.300"
@@ -170,11 +184,24 @@ const CreateRequest = () => {
               {...register("investorName")}
               _placeholder={{ fontSize: "sm" }}
             />
-            <InputRightAddon gap={2} color={'forestgreen.400'} onClick={onOpen} cursor={'pointer'} fontWeight={600} fontSize={'xs'}>
+            <InputRightAddon
+              gap={2}
+              color={"forestgreen.400"}
+              onClick={onOpen}
+              cursor={"pointer"}
+              fontWeight={600}
+              fontSize={"xs"}
+            >
               <Search2Icon /> Search
             </InputRightAddon>
           </InputGroup>
-          <FormHelperText fontSize={'xs'} fontWeight={500} style={{ color: "red" }}>{errors.investorName?.message}</FormHelperText>
+          <FormHelperText
+            fontSize={"xs"}
+            fontWeight={500}
+            style={{ color: "red" }}
+          >
+            {errors.investorName?.message}
+          </FormHelperText>
         </FormControl>
 
         {/* Client ID Field */}
@@ -193,7 +220,13 @@ const CreateRequest = () => {
             placeholder={"Client ID"}
             {...register("clientId")}
           />
-          <FormHelperText fontSize={'xs'} fontWeight={500} style={{ color: "red" }}>{errors.clientId?.message}</FormHelperText>
+          <FormHelperText
+            fontSize={"xs"}
+            fontWeight={500}
+            style={{ color: "red" }}
+          >
+            {errors.clientId?.message}
+          </FormHelperText>
         </FormControl>
 
         {/* Date Field */}
@@ -208,10 +241,21 @@ const CreateRequest = () => {
             fontSize={"sm"}
             rounded={"sm"}
             type={"date"}
-            max={new Date().toISOString().split("T")[0]} // Disable future dates
-            {...register("transaction_date")}
+            max={new Date().toLocaleDateString("en-CA")} // Ensures max is in local timezone
+            {...register("transaction_date", {
+              setValueAs: (value) => {
+                // Convert date string to local timezone Date object
+                return value ? new Date(value) : undefined;
+              },
+            })}
           />
-          <FormHelperText fontSize={'xs'} fontWeight={500} style={{ color: "red" }}>{errors.transaction_date?.message}</FormHelperText>
+          <FormHelperText
+            fontSize={"xs"}
+            fontWeight={500}
+            style={{ color: "red" }}
+          >
+            {errors.transaction_date?.message}
+          </FormHelperText>
         </FormControl>
 
         {/* Amount Field */}
@@ -220,19 +264,35 @@ const CreateRequest = () => {
             Amount (BHD)
           </FormLabel>
           <Controller
-                  name="transaction_amount"
-                  control={control}
-                  render={({ field }) => (
-                    <CurrencyInput bg={"#F5F8F6"} {...field} textAlign={'right'} fontSize={"sm"} type="number" size={"sm"} />
-                  )}
-                />
-          <FormHelperText fontSize={'xs'} fontWeight={500} style={{ color: "red" }}>
+            name="transaction_amount"
+            control={control}
+            render={({ field }) => (
+              <CurrencyInput
+                bg={"#F5F8F6"}
+                {...field}
+                textAlign={"right"}
+                fontSize={"sm"}
+                type="number"
+                size={"sm"}
+              />
+            )}
+          />
+          <FormHelperText
+            fontSize={"xs"}
+            fontWeight={500}
+            style={{ color: "red" }}
+          >
             {errors.transaction_amount?.message}
-            </FormHelperText>
+          </FormHelperText>
         </FormControl>
 
         {/* Support File Field with Preview */}
-        <FormControl  isRequired  w={"49%"} mb={2} isInvalid={errors.spportFile_path}>
+        <FormControl
+          isRequired
+          w={"49%"}
+          mb={2}
+          isInvalid={errors.spportFile_path}
+        >
           <FormLabel textAlign={"left"} fontSize={"xs"} color={"gray.600"}>
             Support file
           </FormLabel>
@@ -249,7 +309,13 @@ const CreateRequest = () => {
             {...register("spportFile_path")}
             // onChange={handleFileChange}
           />
-          <FormHelperText fontSize={'xs'} fontWeight={500} style={{ color: "red" }}>{errors.spportFile_path?.message}</FormHelperText>
+          <FormHelperText
+            fontSize={"xs"}
+            fontWeight={500}
+            style={{ color: "red" }}
+          >
+            {errors.spportFile_path?.message}
+          </FormHelperText>
 
           {/* Animated Preview */}
           {filePreview && fileType?.type.startsWith("image/") && (
@@ -259,14 +325,55 @@ const CreateRequest = () => {
               transition={{ duration: 0.5 }}
               style={{ marginTop: "10px" }}
             >
-              <Box  position={'relative'} display={'flex'} alignContent={'flex-end'} gap={3}   mt={2}>
-                <Image  src={filePreview} alt="File preview" maxW={"150px"} borderRadius="md" boxShadow="md" />
-                <Icon  onClick={()=> setFilePreview(null)} className="link" rounded={'md'} color={'red.700'} cursor={'pointer'} p={1.5}  position={'absolute'} top={0} right={0} as={DeleteIcon} boxSize={7} />
-                <VStack justifyItems={'flex-end'} alignItems={'flex-start'}>
-                  <Text as={'span'} color={'gray.600'} fontSize={'xs'}>File Name: <Text as={'span'} color={'GrayText'}> {fileType?.name}</Text></Text>
-                  <Text as={'span'} color={'gray.600'} fontSize={'xs'}>File Size: <Text as={'span'} color={'GrayText'}> {bytesToMB(fileType?.size)} Mb</Text></Text>
-                  <Text as={'span'} color={'gray.600'} fontSize={'xs'}>File Type: <Text as={'span'} color={'GrayText'}> {fileType?.type}</Text></Text>
-
+              <Box
+                position={"relative"}
+                display={"flex"}
+                alignContent={"flex-end"}
+                gap={3}
+                mt={2}
+              >
+                <Image
+                  src={filePreview}
+                  alt="File preview"
+                  maxW={"150px"}
+                  borderRadius="md"
+                  boxShadow="md"
+                />
+                <Icon
+                  onClick={() => setFilePreview(null)}
+                  className="link"
+                  rounded={"md"}
+                  color={"red.700"}
+                  cursor={"pointer"}
+                  p={1.5}
+                  position={"absolute"}
+                  top={0}
+                  right={0}
+                  as={DeleteIcon}
+                  boxSize={7}
+                />
+                <VStack justifyItems={"flex-end"} alignItems={"flex-start"}>
+                  <Text as={"span"} color={"gray.600"} fontSize={"xs"}>
+                    File Name:{" "}
+                    <Text as={"span"} color={"GrayText"}>
+                      {" "}
+                      {fileType?.name}
+                    </Text>
+                  </Text>
+                  <Text as={"span"} color={"gray.600"} fontSize={"xs"}>
+                    File Size:{" "}
+                    <Text as={"span"} color={"GrayText"}>
+                      {" "}
+                      {bytesToMB(fileType?.size)} Mb
+                    </Text>
+                  </Text>
+                  <Text as={"span"} color={"gray.600"} fontSize={"xs"}>
+                    File Type:{" "}
+                    <Text as={"span"} color={"GrayText"}>
+                      {" "}
+                      {fileType?.type}
+                    </Text>
+                  </Text>
                 </VStack>
               </Box>
             </motion.div>
@@ -274,7 +381,7 @@ const CreateRequest = () => {
         </FormControl>
 
         {/* Description Field */}
-        <FormControl  w={"100%"} mb={2} isInvalid={errors.makerComment}>
+        <FormControl w={"100%"} mb={2} isInvalid={errors.makerComment}>
           <FormLabel textAlign={"left"} fontSize={"xs"} color={"gray.600"}>
             Description
           </FormLabel>
@@ -287,12 +394,18 @@ const CreateRequest = () => {
             placeholder={"Description"}
             {...register("makerComment")}
           />
-          <FormHelperText fontSize={'xs'} fontWeight={500} style={{ color: "red" }}>{errors.makerComment?.message}</FormHelperText>
+          <FormHelperText
+            fontSize={"xs"}
+            fontWeight={500}
+            style={{ color: "red" }}
+          >
+            {errors.makerComment?.message}
+          </FormHelperText>
         </FormControl>
 
         {/* Submit Button */}
-        <HStack mt={2} w={'100%'} justifyContent={'flex-end'}>
-          <Button 
+        <HStack mt={2} w={"100%"} justifyContent={"flex-end"}>
+          <Button
             colorScheme="forestGreen"
             size={"sm"}
             rounded={"sm"}
@@ -305,7 +418,13 @@ const CreateRequest = () => {
         </HStack>
       </Box>
 
-      <SelectInvestorModal setId={setId} setValue={setValue} onClose={onClose} isOpen={isOpen} onOpen={onOpen}/>
+      <SelectInvestorModal
+        setId={setId}
+        setValue={setValue}
+        onClose={onClose}
+        isOpen={isOpen}
+        onOpen={onOpen}
+      />
     </Box>
   );
 };
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/AddCaseDetails.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/AddCaseDetails.jsx
index 4f65cda..3bc016d 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/AddCaseDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/AddCaseDetails.jsx
@@ -45,6 +45,9 @@ const AddCaseDetails = ({ isOpen, onClose, firstField, actionId, setActionId, da
   const [alert, setAlert] = useState(false);
   const toast = useToast();
 
+  console.log(isOpen);
+  
+
 
 
   // ======================[ Cotext Api ]
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx
index 8e474a7..749498b 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx
@@ -86,7 +86,7 @@ const Approved = () => {
     "Transaction Type",
     "Amount",
     "Comments",
-    // "Update by",
+    "Update by",
     "Update On",
   ];
 
@@ -112,7 +112,10 @@ const Approved = () => {
         <Badge ms={1} colorScheme="green" me={1}>
           $
         </Badge>
-        {item?.transactionAmount}
+        {parseFloat(item?.transactionAmount || 0).toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
       </Text>
     ),
     Comments: (
@@ -129,13 +132,13 @@ const Approved = () => {
         display={"flex"}
         alignItems={"center"}
       >
-        <Avatar
+        {/* <Avatar
           mr={2}
           size="sm"
           name={item.creator?.firstName}
           src={item.creator?.profilePhoto}
-        />
-        {item?.creator?.firstName}
+        /> */}
+        {item?.modifier?.firstName}
       </Text>
     ),
     "Update On": (
@@ -184,7 +187,7 @@ const Approved = () => {
             <Th
               textAlign={"center"}
               p={3}
-              width="140px"
+              width="200px"
               color={"#004118"}
               whiteSpace="normal"
               wordBreak="normal"
@@ -195,7 +198,7 @@ const Approved = () => {
             <Th
               textAlign={"center"}
               p={3}
-              width="100px"
+              width="120px"
               color={"#004118"}
               whiteSpace="normal"
               wordBreak="normal"
@@ -212,12 +215,30 @@ const Approved = () => {
               wordBreak="normal"
               overflowWrap="normal"
             >
-              {"48,000.00"}
+              {" "}
             </Th>
             <Th
               textAlign={"center"}
               p={3}
-              width="150px"
+              width="140px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              <Badge ms={1} colorScheme="green" me={1}>
+                $
+              </Badge>
+              {/* {IODetails?.ioCash} */}
+              {parseFloat(IODetails?.ioCash || 0).toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
+            </Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="120px"
               color={"#004118"}
               whiteSpace="normal"
               wordBreak="normal"
@@ -264,11 +285,11 @@ const Approved = () => {
     try {
       const res = await updateIOCase(id);
       if (res?.data) {
-        toast({
-          render: () => (
-            <ToastBox status={"success"} message={res?.data?.message} />
-          ),
-        });
+        // toast({
+        //   render: () => (
+        //     <ToastBox status={"success"} message={res?.data?.message} />
+        //   ),
+        // });
         setIsLoading(false);
         onOpen();
       } else if (res?.error) {
@@ -301,7 +322,7 @@ const Approved = () => {
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
           />
-
+          
           <HStack display={"flex"} alignItems={"center"}>
             <Button
               onClick={() =>
@@ -328,8 +349,8 @@ const Approved = () => {
             >
               Add
             </Button> */}
-            {IODetails?.isInvestedAmount ? (
-              localStorage?.getItem('role') ==="Maker"&& <Button
+            {/* {IODetails?.isInvestedAmount ? (
+              localStorage?.getItem('role') ==="Maker" && <Button
                 onClick={handleAdd}
                 leftIcon={<AddIcon />}
                 colorScheme="forestGreen"
@@ -339,7 +360,7 @@ const Approved = () => {
               >
                 Add
               </Button>
-            ) : null}
+            ) : null} */}
           </HStack>
         </HStack>
       </Box>
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx
index 4c9e6c7..3055a43 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx
@@ -1,41 +1,111 @@
-import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
-import React from "react";
+import {
+  Box,
+  Button,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useContext, useRef } from "react";
 import Approved from "./Approved";
 import Pending from "./Pending";
 import Rejected from "./Rejected";
+import { AddIcon } from "@chakra-ui/icons";
+import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+import AddCaseDetails from "./AddCaseDetails";
+import { useUpdateIOCaseMutation } from "../../../../Services/io.service";
+import ToastBox from "../../../../Components/ToastBox";
+import { useParams } from "react-router-dom";
 
 const IOCashDetails = () => {
+  const params = useParams();
+  const toast = useToast();
+  const id = params?.id;
+  const { IODetails} = useContext(GlobalStateContext);
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const firstField = useRef();
+
+  const [updateIOCase] = useUpdateIOCaseMutation();
+
+  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 (
-    <Tabs>
-      <TabList>
-        <Tab
-          fontSize={"sm"}
-          _selected={{
-            color: "#004118",
-            borderBottom: "2px solid #38a169",
-          }}
+    <Box>
+    <Tabs variant='unstyled'>
+      <Box
+        display={"flex"}
+        justifyContent={"space-between"}
+        alignItems={"center"}
+        borderBottom={"1px solid #ccc"}
+      >
+        <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>
+        {IODetails?.isInvestedAmount ? (
+        localStorage?.getItem('role') ==="Maker" && 
+        <Button
+          onClick={handleAdd}
+          leftIcon={<AddIcon />}
+          colorScheme="forestGreen"
+          size={"sm"}
+          rounded={"sm"}
+          fontSize={"xs"}
         >
-          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>
+          Add
+        </Button>
+         ) : null} 
+      </Box>
       <TabPanels>
         <TabPanel>
           <Approved />
@@ -48,6 +118,12 @@ const IOCashDetails = () => {
         </TabPanel>
       </TabPanels>
     </Tabs>
+    <AddCaseDetails
+        isOpen={isOpen}
+        onClose={onClose}
+        firstField={firstField}
+      />
+    </Box>
   );
 };
 
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
index fd89eea..fa7e9db 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
@@ -102,9 +102,10 @@ const Pending = () => {
     "Transaction Type",
     "Amount",
     "Comments",
-    // "Update by",
+    "Update by",
     "Update On",
-    ...(localStorage?.getItem('role')!=="Maker" ? ["Status"] : []),
+    ...(localStorage?.getItem('role')!=="Maker" ? ["Actions"] : []),
+    
   ];
 
   const extractedArray = filteredData?.map((item, index) => ({
@@ -129,7 +130,10 @@ const Pending = () => {
         <Badge ms={1} colorScheme="green" me={1}>
           $
         </Badge>
-        {item?.transactionAmount}
+        {parseFloat(item?.transactionAmount || 0).toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
       </Text>
     ),
     Comments: (
@@ -146,13 +150,13 @@ const Pending = () => {
         display={"flex"}
         alignItems={"center"}
       >
-        <Avatar
+        {/* <Avatar
           mr={2}
           size="sm"
           name={item?.creator?.firstName}
           src={item?.creator?.profilePhoto}
-        />
-        {item?.creator?.firstName}
+        /> */}
+        {item?.modifier?.firstName}
       </Text>
     ),
     "Update On": (
@@ -160,8 +164,10 @@ const Pending = () => {
         {formatDate(item.updatedAt)}
       </Text>
     ),
-    Status: (
-      <Box display={"flex"} justifyContent={"center"} gap={2}>
+    Actions: (
+      <Box display={"flex"} justifyContent={"center"}>
+        {localStorage?.getItem("role") !== "Maker"  ? <Box>
+          {index===0&&<Box display={"flex"} justifyContent={"center"} gap={2}>
         <Tooltip
           rounded={"sm"}
           fontSize={"xs"}
@@ -215,7 +221,21 @@ const Pending = () => {
           >
             <CloseIcon fontSize={"10px"} />
           </Button>
-        </Tooltip>
+        </Tooltip></Box>}
+        
+        </Box> : <Button
+            colorScheme="green"
+            rounded={"sm"}
+            size={"xs"}
+            px={2}
+            py={1}
+            fontWeight={500}
+            onClick={() => {
+              setActionId(item.id);
+            }}
+          >
+            <ViewIcon me={"4px"} /> View
+          </Button>}
       </Box>
     ),
   }));
@@ -289,7 +309,13 @@ const Pending = () => {
               wordBreak="normal"
               overflowWrap="normal"
             >
-              {"48,000.00"}
+              <Badge ms={1} colorScheme="green" me={1}>
+                $
+              </Badge>
+              {parseFloat(IODetails?.ioCash || 0).toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
             </Th>
             <Th
               textAlign={"center"}
@@ -339,11 +365,11 @@ const Pending = () => {
     try {
       const res = await updateIOCase(id);
       if (res?.data) {
-        toast({
-          render: () => (
-            <ToastBox status={"success"} message={res?.data?.message} />
-          ),
-        });
+        // toast({
+        //   render: () => (
+        //     <ToastBox status={"success"} message={res?.data?.message} />
+        //   ),
+        // });
         setIsLoading(false);
         onOpen();
       } else if (res?.error) {
@@ -377,7 +403,7 @@ const Pending = () => {
             onChange={(e) => setSearchTerm(e.target.value)}
           />
 
-          <HStack display={"flex"} alignItems={"center"}>
+          {/* <HStack display={"flex"} alignItems={"center"}>
             {IODetails?.isInvestedAmount ? (
               localStorage?.getItem('role') ==="Maker"&& <Button
                 onClick={handleAdd}
@@ -390,7 +416,7 @@ const Pending = () => {
                 Add
               </Button>
             ) : null}
-          </HStack>
+          </HStack> */}
         </HStack>
       </Box>
 
@@ -401,7 +427,7 @@ const Pending = () => {
         isLoading={isLoading}
         viewActionId={actionId}
         setViewActionId={setActionId}
-        total={<Total />}
+        // total={<Total />}
         setMouseEnteredId={setMouseEnteredId}
         setMouseEntered={setMouseEntered}
       />
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
index 88c7ec1..470fdc8 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
@@ -81,7 +81,7 @@ import AddCaseDetails from "./AddCaseDetails";
       "Transaction Type",
       "Amount",
       "Comments",
-      // "Update by",
+      "Update by",
       "Update On",
     ];
   
@@ -117,9 +117,12 @@ import AddCaseDetails from "./AddCaseDetails";
           fontWeight={"500"}
         >
           <Badge ms={1} colorScheme="green" me={1}>
-            $
-          </Badge>
-          {item?.transactionAmount}
+                $
+              </Badge>
+              {parseFloat(IODetails?.ioCash || 0).toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
         </Text>
       ),
       "Comments": (
@@ -141,13 +144,13 @@ import AddCaseDetails from "./AddCaseDetails";
           display={"flex"}
           alignItems={"center"}
         >
-          <Avatar
+          {/* <Avatar
            mr={2}
             size="sm"
             name={item.creator?.firstName}
             src={item.creator?.profilePhoto}
-          />
-          {item?.creator?.firstName}
+          /> */}
+          {item?.modifier?.firstName}
         </Text>
       ),
       "Update On": (
@@ -264,11 +267,11 @@ import AddCaseDetails from "./AddCaseDetails";
     try {
        const res = await updateIOCase(id)
        if (res?.data) {
-         toast({
-           render: () => (
-             <ToastBox status={"success"} message={res?.data?.message} />
-           ),
-         });
+        //  toast({
+        //    render: () => (
+        //      <ToastBox status={"success"} message={res?.data?.message} />
+        //    ),
+        //  });
          setIsLoading(false);
          onOpen()
  
@@ -304,7 +307,7 @@ import AddCaseDetails from "./AddCaseDetails";
               onChange={(e) => setSearchTerm(e.target.value)}
             />
   
-            <HStack display={"flex"} alignItems={"center"}>
+            {/* <HStack display={"flex"} alignItems={"center"}>
             {IODetails?.isInvestedAmount ? (
               localStorage?.getItem('role') ==="Maker"&& <Button
                 onClick={handleAdd}
@@ -317,7 +320,7 @@ import AddCaseDetails from "./AddCaseDetails";
                 Add
               </Button>
             ) : null}
-            </HStack>
+            </HStack> */}
           </HStack>
         </Box>
   
@@ -328,7 +331,7 @@ import AddCaseDetails from "./AddCaseDetails";
           isLoading={isLoading}
           viewActionId={actionId}
           setViewActionId={setActionId}
-          total={<Total/>}
+          // total={<Total/>}
           setMouseEnteredId={setMouseEnteredId}
           setMouseEntered={setMouseEntered}
         />
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestApproveModal.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestApproveModal.jsx
index 6ffbfa9..c771b46 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestApproveModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestApproveModal.jsx
@@ -140,8 +140,8 @@ const RequestApproveModal = ({ isOpen, onClose, firstField ,id}) => {
                 </Text>
               )}
               <FormHelperText fontSize="xs" color="gray.500">
-                Maximum length should be 200 characters. You have entered
-                {watch("checkerComment")?.length || 0} characters.
+                <Box as="span" me={1}>Maximum length should be 200 characters. You have entered </Box>
+                 {watch("checkerComment")?.length || 0} characters.
               </FormHelperText>
             </FormControl>
           </ModalBody>
diff --git a/src/Pages/IO_Management/CreateIO/IODetails.jsx b/src/Pages/IO_Management/CreateIO/IODetails.jsx
index 18ff85c..de5ce86 100644
--- a/src/Pages/IO_Management/CreateIO/IODetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IODetails.jsx
@@ -70,7 +70,7 @@ const schema = yup.object().shape({
   InvestmentDetails: yup.string().notRequired(),
 
   comment: yup.string().notRequired()
-  .min(10, "Comment must be at least 10 characters long")
+  // .min(10, "Comment must be at least 10 characters long")
   .max(100, "Comment must be at most 100 characters long"),
 
   expectedReturn: yup
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/AddNavDetails.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/AddNavDetails.jsx
index bc42ce1..0427829 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/AddNavDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/AddNavDetails.jsx
@@ -195,7 +195,6 @@ console.log(calculatePercentage(1092500, 976070));
                   </Text>
                 </VStack>
 
-
                 <VStack align={'start'}>
                   <Text as={'span'} fontSize={'sm'} fontWeight={500}>Live return %</Text>
                   <Text as={'span'} fontSize={'sm'}>{calculatePercentage(watch()?.transactionAmount||IODetails?.ioNAV,IODetails?.ioNAV)}</Text>
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx
index b3b1a2e..3b1a0a8 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx
@@ -1,136 +1,128 @@
 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";
+  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";
 import { useParams } from "react-router-dom";
 import { useUpdateIOCaseMutation } from "../../../../Services/io.service";
 import AddApproved from "./AddNavDetails";
 import AddNavDetails from "./AddNavDetails";
-  
-  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 } =
-      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("");
-    const [updateIOCase] = useUpdateIOCaseMutation()
-  
-    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) => {
+
+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 } =
+    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("");
+  const [updateIOCase] = useUpdateIOCaseMutation();
+
+  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": ( 
+    }
+  );
+
+  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>
+        {parseFloat(item?.transactionAmount || 0).toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
+      </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"}
@@ -141,100 +133,93 @@ import AddNavDetails from "./AddNavDetails";
         {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"}
+    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}
+      >
+        {/* <Avatar
+          mr={2}
           size="sm"
           name={item.creator?.firstName}
           src={item.creator?.profilePhoto}
-        />
-          {item?.creator?.firstName}
-        </Text>
-      ),
-    }));
+        /> */}
+        {item?.modifier?.firstName}
+      </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(
-        (sponsor) => sponsor.id !== actionId
-      );
-  
-      setTimeout(() => {
-        setCaseDetails(updatedSponsors);
-        setDeleteAlert(false);
+  const handleAdd = async () => {
+    try {
+      const res = await updateIOCase(id);
+      if (res?.data) {
+        // toast({
+        //   render: () => (
+        //     <ToastBox status={"success"} message={res?.data?.message} />
+        //   ),
+        // });
         setIsLoading(false);
-      }, 100);
-      setIsLoading(true);
-    };
+        onOpen();
+      } else if (res?.error) {
+        toast({
+          render: () => (
+            <ToastBox status={"error"} message={res?.error?.data?.message} />
+          ),
+        });
+        setIsLoading(false);
+      }
+    } catch (error) {}
+  };
 
-    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 handleDelete = () => {
+    const updatedSponsors = sponser.filter(
+      (sponsor) => sponsor.id !== actionId
+    );
 
-    const ioNavExport = IODetails?.ioNAVStatusHistory?.Approved?.map((item, index) => ({
-      "ID": item?.id, // Keep as integer if it's already a number
+    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
+      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
+      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
+    })
+  );
+
+  return (
+    <Box {...OPACITY_ON_LOAD} pb={0}>
+      <Box bg="white.500">
+        <HStack
           display={"flex"}
           justifyContent={"space-between"}
           pb={3}
@@ -252,10 +237,8 @@ import AddNavDetails from "./AddNavDetails";
           />
 
           <HStack display={"flex"} alignItems={"center"}>
-          <Button
-              onClick={() =>
-                exportToExcelNew(ioNavExport, "Io Nav details")
-              }
+            <Button
+              onClick={() => exportToExcelNew(ioNavExport, "Io Nav details")}
               leftIcon={<LuFileSpreadsheet />}
               colorScheme="forestGreen"
               size={"sm"}
@@ -266,49 +249,50 @@ import AddNavDetails from "./AddNavDetails";
             >
               Export xls
             </Button>
-            {IODetails?.isInvestedAmount ? (
-              localStorage?.getItem('role') ==="Maker"&& <Button
-                onClick={handleAdd}
-                leftIcon={<AddIcon />}
-                colorScheme="forestGreen"
-                size={"sm"}
-                rounded={"sm"}
-                fontSize={"xs"}
-              >
-                Add
-              </Button>
-            ) : null}
+            {/* {IODetails?.isInvestedAmount
+              ? localStorage?.getItem("role") === "Maker" && (
+                  <Button
+                    onClick={handleAdd}
+                    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}
-          setMouseEnteredId={setMouseEnteredId}
-          setMouseEntered={setMouseEntered}
-        />
-  
-        <CustomAlertDialog
-          onClose={() => setDeleteAlert(false)}
-          isOpen={deleteAlert}
-          message={"Are you sure you want to delete sponers?"}
-          alertHandler={handleDelete}
-          isLoading={isLoading}
-        />
+        </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}
+      />
 
       <AddNavDetails
         isOpen={isOpen}
         onClose={onClose}
         firstField={firstField}
       />
-      </Box>
-    );
-  };
-  
-  export default Approved;
-  
\ No newline at end of file
+    </Box>
+  );
+};
+
+export default Approved;
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/IONAVDetails.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/IONAVDetails.jsx
index bad63f8..03cf067 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/IONAVDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/IONAVDetails.jsx
@@ -1,53 +1,183 @@
-import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
-import React from "react";
+// 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;
+
+import {
+  Box,
+  Button,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useContext, useRef } from "react";
 import Approved from "./Approved";
 import Pending from "./Pending";
 import Rejected from "./Rejected";
+import { AddIcon } from "@chakra-ui/icons";
+import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+import ToastBox from "../../../../Components/ToastBox";
+import { useParams } from "react-router-dom";
+import AddNavDetails from "./AddNavDetails";
+import { useUpdateIOCaseMutation } from "../../../../Services/io.service";
 
 const IONAVDetails = () => {
+  const params = useParams();
+  const toast = useToast();
+  const id = params?.id;
+  const { IODetails } = useContext(GlobalStateContext);
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const firstField = useRef();
+
+  const [updateIOCase] = useUpdateIOCaseMutation();
+
+  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 (
-    <Tabs>
-      <TabList>
-        <Tab
-          fontSize={"sm"}
-          _selected={{
-            color: "#004118",
-            borderBottom: "2px solid #38a169",
-          }}
+    <Box>
+      <Tabs variant="unstyled">
+        <Box
+          display={"flex"}
+          justifyContent={"space-between"}
+          alignItems={"center"}
+          borderBottom={"1px solid #ccc"}
         >
-          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>
+          <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>
+          {IODetails?.isInvestedAmount
+            ? localStorage?.getItem("role") === "Maker" && (
+                <Button
+                  onClick={handleAdd}
+                  leftIcon={<AddIcon />}
+                  colorScheme="forestGreen"
+                  size={"sm"}
+                  rounded={"sm"}
+                  fontSize={"xs"}
+                >
+                  Add
+                </Button>
+              )
+            : null}
+        </Box>
+        <TabPanels>
+          <TabPanel>
+            <Approved />
+          </TabPanel>
+          <TabPanel>
+            <Pending />
+          </TabPanel>
+          <TabPanel>
+            <Rejected />
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+      <AddNavDetails
+        isOpen={isOpen}
+        onClose={onClose}
+        firstField={firstField}
+      />
+    </Box>
   );
 };
 
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx
index c4bfe4d..928532a 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx
@@ -15,7 +15,7 @@ import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
 import NormalTable from "../../../../Components/DataTable/NormalTable";
 import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
 import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
-import { AddIcon, CheckIcon, CloseIcon } from "@chakra-ui/icons";
+import { AddIcon, CheckIcon, CloseIcon, ViewIcon } from "@chakra-ui/icons";
 import { useParams } from "react-router-dom";
 import { useUpdateIOCaseMutation } from "../../../../Services/io.service";
 import ToastBox from "../../../../Components/ToastBox";
@@ -53,7 +53,6 @@ const Pending = () => {
     onClose: onRejectClose,
   } = useDisclosure();
 
-
   useEffect(() => {
     // Simulate loading
     const timer = setTimeout(() => {
@@ -90,8 +89,8 @@ const Pending = () => {
     "Last Nav Update",
     "Investment Closed",
     "Comments",
-    // "Updated By",
-    ...(localStorage?.getItem('role')!=="Maker" ? ["Status"] : []),
+    "Updated By",
+    ...(localStorage?.getItem("role") !== "Maker" ? ["Status"] : []),
   ];
 
   const extractedArray = filteredData?.map((item, index) => ({
@@ -111,7 +110,10 @@ const Pending = () => {
         <Badge ms={1} colorScheme="green" me={1}>
           $
         </Badge>
-        {item?.transactionAmount}
+        {parseFloat(item?.transactionAmount || 0).toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
       </Text>
     ),
     "Last Nav Update": (
@@ -150,17 +152,19 @@ const Pending = () => {
         display={"flex"}
         alignItems={"center"}
       >
-        <Avatar
+        {/* <Avatar
           mr={2}
           size="sm"
           name={item.creator?.firstName}
           src={item.creator?.profilePhoto}
-        />
-        {item?.creator?.firstName}
+        /> */}
+        {item?.modifier?.firstName}
       </Text>
     ),
     Status: (
-      <Box display={"flex"} justifyContent={"center"} gap={2}>
+      <Box display={"flex"} justifyContent={"center"}>
+       <Box>
+          <Box display={"flex"} justifyContent={"center"} gap={2}>
         <Tooltip
           rounded={"sm"}
           fontSize={"xs"}
@@ -215,6 +219,8 @@ const Pending = () => {
             <CloseIcon fontSize={"10px"} />
           </Button>
         </Tooltip>
+        </Box>
+        </Box> 
       </Box>
     ),
   }));
@@ -236,11 +242,11 @@ const Pending = () => {
     try {
       const res = await updateIOCase(id);
       if (res?.data) {
-        toast({
-          render: () => (
-            <ToastBox status={"success"} message={res?.data?.message} />
-          ),
-        });
+        // toast({
+        //   render: () => (
+        //     <ToastBox status={"success"} message={res?.data?.message} />
+        //   ),
+        // });
         setIsLoading(false);
         onOpen();
       } else if (res?.error) {
@@ -273,18 +279,20 @@ const Pending = () => {
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
           />
-          {IODetails?.isInvestedAmount ? (
-              localStorage?.getItem('role') ==="Maker"&& <Button
-                onClick={handleAdd}
-                leftIcon={<AddIcon />}
-                colorScheme="forestGreen"
-                size={"sm"}
-                rounded={"sm"}
-                fontSize={"xs"}
-              >
-                Add
-              </Button>
-            ) : null}
+          {/* {IODetails?.isInvestedAmount
+            ? localStorage?.getItem("role") === "Maker" && (
+                <Button
+                  onClick={handleAdd}
+                  leftIcon={<AddIcon />}
+                  colorScheme="forestGreen"
+                  size={"sm"}
+                  rounded={"sm"}
+                  fontSize={"xs"}
+                >
+                  Add
+                </Button>
+              )
+            : null} */}
         </HStack>
       </Box>
 
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/Rejected.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/Rejected.jsx
index 351e5dc..2603e3f 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/Rejected.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/Rejected.jsx
@@ -1,134 +1,124 @@
 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";
+  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";
 import { useUpdateIOCaseMutation } from "../../../../Services/io.service";
 import { useParams } from "react-router-dom";
 import AddNavDetails from "./AddNavDetails";
-  
-  const formatDate = (date) => new Date(date).toLocaleDateString();
-  
-  const Rejected = () => {
-    const params = useParams()
-    const toast = useToast();
-    const id = params?.id
-    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("");
-    const [updateIOCase] = useUpdateIOCaseMutation()
-  
-    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 formatDate = (date) => new Date(date).toLocaleDateString();
+
+const Rejected = () => {
+  const params = useParams();
+  const toast = useToast();
+  const id = params?.id;
+  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("");
+  const [updateIOCase] = useUpdateIOCaseMutation();
+
+  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",
     });
-  
-    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": ( 
+  };
+
+  // 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>
+        {parseFloat(item?.transactionAmount || 0).toLocaleString(undefined, {
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2,
+        })}
+      </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"}
@@ -139,137 +129,129 @@ import AddNavDetails from "./AddNavDetails";
         {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"}
+    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
+      >
+        {/* <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);
+        /> */}
+        {item?.modifier?.firstName}
+      </Text>
+    ),
+  }));
+
+  const handleDelete = () => {
+    const updatedSponsors = sponser.filter(
+      (sponsor) => sponsor.id !== actionId
+    );
+
+    setTimeout(() => {
+      setCaseDetails(updatedSponsors);
+      setDeleteAlert(false);
+      setIsLoading(false);
+    }, 100);
+    setIsLoading(true);
+  };
+
+  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);
-      }, 100);
-      setIsLoading(true);
-    };
-  
-    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) { 
-       
       }
-     }
+    } catch (error) {}
+  };
 
-    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)}
-            />
+  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)}
+          />
 
-{IODetails?.isInvestedAmount ? (
-              localStorage?.getItem('role') ==="Maker"&& <Button
-                onClick={handleAdd}
-                leftIcon={<AddIcon />}
-                colorScheme="forestGreen"
-                size={"sm"}
-                rounded={"sm"}
-                fontSize={"xs"}
-              >
-                Add
-              </Button>
-            ) : null}
-          </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}
-        />
+          {/* {IODetails?.isInvestedAmount
+            ? localStorage?.getItem("role") === "Maker" && (
+                <Button
+                  onClick={handleAdd}
+                  leftIcon={<AddIcon />}
+                  colorScheme="forestGreen"
+                  size={"sm"}
+                  rounded={"sm"}
+                  fontSize={"xs"}
+                >
+                  Add
+                </Button>
+              )
+            : null} */}
+        </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}
+      />
 
       <AddNavDetails
         isOpen={isOpen}
         onClose={onClose}
         firstField={firstField}
       />
+    </Box>
+  );
+};
 
-      </Box>
-    );
-  };
-  
-  export default Rejected;
-  
\ No newline at end of file
+export default Rejected;
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestApproveModal.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestApproveModal.jsx
index 861d3ed..edad9d3 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestApproveModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestApproveModal.jsx
@@ -140,7 +140,7 @@ const RequestApproveModal = ({ isOpen, onClose, firstField ,id}) => {
                 </Text>
               )}
               <FormHelperText fontSize="xs" color="gray.500">
-                Maximum length should be 200 characters. You have entered
+              <Box as="span" me={1}>Maximum length should be 200 characters. You have entered</Box>
                 {watch("checkerComment")?.length || 0} characters.
               </FormHelperText>
             </FormControl>
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveDistrubationModal.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveDistrubationModal.jsx
new file mode 100644
index 0000000..639d4b7
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveDistrubationModal.jsx
@@ -0,0 +1,179 @@
+import {
+    Box,
+    Button,
+    FormControl,
+    FormHelperText,
+    FormLabel,
+    Input,
+    Modal,
+    ModalBody,
+    ModalCloseButton,
+    ModalContent,
+    ModalFooter,
+    ModalHeader,
+    ModalOverlay,
+    Text,
+    Textarea,
+    useDisclosure,
+    useToast,
+  } from "@chakra-ui/react";
+  import React, { useEffect, useState } from "react";
+  import * as yup from "yup";
+  import { yupResolver } from "@hookform/resolvers/yup";
+  import { useForm } from "react-hook-form";
+  import ToastBox from "../../../../Components/ToastBox";
+  import { useApproveDistributedMutation } from "../../../../Services/io.service";
+  
+  export const conformModalSchema = yup.object().shape({
+    // checkerComment: yup.string().required("Comment is required")
+    // .max(50, "Investment name cannot be more than 50 characters"),
+    checkerComment: yup
+    .string()
+    .required("Comment is required")
+    .max(200, "Approve Comment cannot be more than 200 characters"),
+  });
+  
+  const ApproveDistrubationModal = ({ isOpen, onClose, firstField ,id, onBigModalClose}) => {
+    const [isBtnLoading , setIsBtnLoading] = useState(false)
+  
+    const toast = useToast()
+
+    
+  
+    const {
+      register,
+      reset,
+      watch,
+      handleSubmit,
+      formState: { errors },
+    } = useForm({
+      resolver: yupResolver(conformModalSchema),
+    });
+  
+    const [ approveDistributed ] = useApproveDistributedMutation()
+    
+  
+    const onSubmit = async(data) => {
+      setIsBtnLoading(true)
+      try {
+        const res = await approveDistributed({data,id})
+        if (res?.error) {
+          toast({
+            render: () => (
+              <ToastBox status={"error"} message={res?.error?.data?.message} />
+            ),
+          });
+          setIsBtnLoading(false)
+        }else if(res?.data){
+          toast({
+            render: () => (
+              <ToastBox message={res?.data?.message} />
+            ),
+          });
+          onClose()
+          onBigModalClose()
+          setIsBtnLoading(false)
+        }else{
+          toast({
+            render: () => (
+              <ToastBox status={'error'} message={"Something went wrong"} />
+            ),
+          });
+          setIsBtnLoading(false)
+        }
+      } catch (error) {
+        
+      }
+    };
+  
+    const handleFileChange = (event) => {
+      const selectedFile = event.target.files[0];
+      setFile(selectedFile);
+    };
+  
+  
+    const { data, isLoading } = 
+    (id, {
+      skip: !id,
+    });
+  
+    useEffect(() => {
+      if (data) {
+        reset({
+          investorAmount: data?.data?.investorAmount,
+        });
+      }
+    }, [data, reset]);
+  
+    const heandleOnClose = () =>{
+      reset()
+      onClose() 
+    }
+  
+    return (
+      <Modal isCentered isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
+        <ModalOverlay />
+        <ModalContent pb={4}>
+          <ModalHeader fontSize={"md"}>Approve Comment</ModalHeader>
+          <ModalCloseButton />
+          {isLoading ? (
+            <FullscreenLoaders height={"50vh"} />
+          ) : (
+          <Box as="form" onSubmit={handleSubmit(onSubmit)}>
+            <ModalBody>
+              <FormControl mb={4} isRequired>
+                <FormLabel fontSize="sm">Comment</FormLabel>
+                <Textarea
+                  rows={6}
+                  focusBorderColor="green.400"
+                  name="checkerComment"
+                  {...register("checkerComment")}
+                  fontSize="sm"
+                  type="textarea"
+                  size="md"
+                  placeholder={"Enter your checkerComment...."}
+                  rounded={"md"}
+                  resize={"none"}
+                  maxLength={200}
+                />
+                {errors.checkerComment && (
+                  <Text fontSize="xs" color="red">
+                    {errors.checkerComment.message}
+                  </Text>
+                )}
+                <FormHelperText fontSize="xs" color="gray.500">
+                <Box as="span" me={1}> Maximum length should be 200 characters. You have entered</Box>
+                  {watch("checkerComment")?.length || 0} characters.
+                </FormHelperText>
+              </FormControl>
+            </ModalBody>
+            <ModalFooter>
+              <Button
+                colorScheme="gray"
+                mr={3}
+                onClick={onClose}
+                size={"xs"}
+                rounded={"sm"}
+              >
+                Cancel
+              </Button>
+              <Button
+                colorScheme="forestGreen"
+                variant="solid"
+                size={"xs"}
+                rounded={"sm"}
+                isLoading={isBtnLoading}
+                type="submit"
+              >
+                Send
+              </Button>
+            </ModalFooter>
+          </Box>
+          )}
+        </ModalContent>
+      </Modal>
+    );
+  };
+  
+  export default ApproveDistrubationModal;
+  
\ No newline at end of file
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveInvestedModal.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveInvestedModal.jsx
new file mode 100644
index 0000000..8ea065e
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveInvestedModal.jsx
@@ -0,0 +1,177 @@
+import {
+    Box,
+    Button,
+    FormControl,
+    FormHelperText,
+    FormLabel,
+    Input,
+    Modal,
+    ModalBody,
+    ModalCloseButton,
+    ModalContent,
+    ModalFooter,
+    ModalHeader,
+    ModalOverlay,
+    Text,
+    Textarea,
+    useDisclosure,
+    useToast,
+  } from "@chakra-ui/react";
+  import React, { useEffect, useState } from "react";
+  import * as yup from "yup";
+  import { yupResolver } from "@hookform/resolvers/yup";
+  import { useForm } from "react-hook-form";
+  import ToastBox from "../../../../Components/ToastBox";
+  import { useApproveInvestedMutation } from "../../../../Services/io.service";
+  
+  export const conformModalSchema = yup.object().shape({
+    // checkerComment: yup.string().required("Comment is required")
+    // .max(50, "Investment name cannot be more than 50 characters"),
+    checkerComment: yup
+    .string()
+    .required("Comment is required")
+    .max(200, "Approve Comment cannot be more than 200 characters"),
+  });
+  
+  const ApproveInvestedModal = ({ isOpen, onClose, firstField ,id,onBigModalClose}) => {
+    const [isBtnLoading , setIsBtnLoading] = useState(false)
+  
+    const toast = useToast()
+  
+    const {
+      register,
+      reset,
+      watch,
+      handleSubmit,
+      formState: { errors },
+    } = useForm({
+      resolver: yupResolver(conformModalSchema),
+    });
+  
+    const [ approveInvested ] = useApproveInvestedMutation()
+    
+  
+    const onSubmit = async(data) => {
+      setIsBtnLoading(true)
+      try {
+        const res = await approveInvested({data,id})
+        if (res?.error) {
+          toast({
+            render: () => (
+              <ToastBox status={"error"} message={res?.error?.data?.message} />
+            ),
+          });
+          setIsBtnLoading(false)
+        }else if(res?.data){
+          toast({
+            render: () => (
+              <ToastBox message={res?.data?.message} />
+            ),
+          });
+          onClose()
+          onBigModalClose()
+          setIsBtnLoading(false)
+        }else{
+          toast({
+            render: () => (
+              <ToastBox status={'error'} message={"Something went wrong"} />
+            ),
+          });
+          setIsBtnLoading(false)
+        }
+      } catch (error) {
+        
+      }
+    };
+  
+    const handleFileChange = (event) => {
+      const selectedFile = event.target.files[0];
+      setFile(selectedFile);
+    };
+  
+  
+    const { data, isLoading } = 
+    (id, {
+      skip: !id,
+    });
+  
+    useEffect(() => {
+      if (data) {
+        reset({
+          investorAmount: data?.data?.investorAmount,
+        });
+      }
+    }, [data, reset]);
+  
+    const heandleOnClose = () =>{
+      reset()
+      onClose() 
+    }
+  
+    return (
+      <Modal isCentered isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
+        <ModalOverlay />
+        <ModalContent pb={4}>
+          <ModalHeader fontSize={"md"}>Approve Comment</ModalHeader>
+          <ModalCloseButton />
+          {isLoading ? (
+            <FullscreenLoaders height={"50vh"} />
+          ) : (
+          <Box as="form" onSubmit={handleSubmit(onSubmit)}>
+            <ModalBody>
+              <FormControl mb={4} isRequired>
+                <FormLabel fontSize="sm">Comment</FormLabel>
+                <Textarea
+                  rows={6}
+                  focusBorderColor="green.400"
+                  name="checkerComment"
+                  {...register("checkerComment")}
+                  fontSize="sm"
+                  type="textarea"
+                  size="md"
+                  placeholder={"Enter your checkerComment...."}
+                  rounded={"md"}
+                  resize={"none"}
+                  maxLength={200}
+                />
+                {errors.checkerComment && (
+                  <Text fontSize="xs" color="red">
+                    {errors.checkerComment.message}
+                  </Text>
+                )}
+                <FormHelperText fontSize="xs" color="gray.500">
+                <Box as="span" me={1}>Maximum length should be 200 characters. You have entered</Box>
+                  {watch("checkerComment")?.length || 0} characters.
+                </FormHelperText>
+              </FormControl>
+            </ModalBody>
+            <ModalFooter>
+              <Button
+                colorScheme="gray"
+                mr={3}
+                onClick={onClose}
+                size={"xs"}
+                rounded={"sm"}
+              >
+                Cancel
+              </Button>
+              <Button
+                colorScheme="forestGreen"
+                variant="solid"
+                size={"xs"}
+                rounded={"sm"}
+                isLoading={isBtnLoading}
+                type="submit"
+              >
+                Send
+              </Button>
+            </ModalFooter>
+          </Box>
+          )}
+        </ModalContent>
+      </Modal>
+    );
+  };
+  
+  export default ApproveInvestedModal;
+  
\ No newline at end of file
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/Approved.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/Approved.jsx
index b27c5ef..e0f9160 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/Approved.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/Approved.jsx
@@ -71,11 +71,12 @@ import {
   
     const tableHeadRow = [
       "Sr No.",
+      "Transaction Date",
       "Transaction Name",
       "Amount",
       "Created By",
       "Created On",
-      // "Approved By",
+      "Approved By",
       "Approved On",
     ];
   
@@ -90,6 +91,15 @@ import {
           {index + 1}.
         </Text>
       ),
+      "Transaction Date": (
+        <Text
+          as={"span"}
+          color={"gray.600"}
+          fontWeight={"500"}
+        >
+          {formatDate(item?.transactionDate)}
+        </Text>
+      ),
       "Transaction Name": (
         <Text
           as={"span"}
@@ -108,7 +118,11 @@ import {
           <Badge ms={1} colorScheme="green" me={1}>
             $
           </Badge>
-          {item?.transactionAmount}
+          {/* {item?.transactionAmount} */}
+          {parseFloat(item?.transactionAmount || 0).toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
         </Text>
       ),
       "Created By": (
@@ -117,8 +131,9 @@ import {
           as={"span"}
           color={"gray.800"}
           fontWeight={"500"}
+          textTransform={'capitalize'}
         >
-          {item?.createdBy}
+          {item?.creator?.firstName}
         </Text>
       ),
       "Created On": (
@@ -132,14 +147,33 @@ import {
         </Text>
       ),
       "Approved By": (
+        <>
         <Text
           w={"100px"}
           as={"span"}
           color={"gray.800"}
           fontWeight={"500"}
+          textTransform={'capitalize'}
         >
-          {item?.modifier ? item?.modifier : "---" }
+           {item?.modifier?.firstName}
         </Text>
+        {/* <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> */}
+        </>
       ),
       "Approved On": (
           <Text
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedCancelTransaction.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedCancelTransaction.jsx
new file mode 100644
index 0000000..1233c75
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedCancelTransaction.jsx
@@ -0,0 +1,161 @@
+import {
+    Box,
+    Button,
+    FormControl,
+    FormHelperText,
+    FormLabel,
+    Modal,
+    ModalBody,
+    ModalCloseButton,
+    ModalContent,
+    ModalFooter,
+    ModalHeader,
+    ModalOverlay,
+    Text,
+    Textarea,
+    useToast,
+  } from "@chakra-ui/react";
+  import React, { useEffect, useState } from "react";
+  import { yupResolver } from "@hookform/resolvers/yup";
+  import { useForm } from "react-hook-form";
+  import ToastBox from "../../../../Components/ToastBox";
+  import {useApproveCancleTransactionMutation, useApproveExitTransactionMutation} from "../../../../Services/io.service";
+
+  
+  const ApprovedCancelTransaction = ({ isOpen, onClose, firstField ,id,onBigModalClose}) => {
+    const [isBtnLoading , setIsBtnLoading] = useState(false)
+  
+    const toast = useToast()
+  
+    const {
+      register,
+      reset,
+      watch,
+      handleSubmit,
+      formState: { errors },
+    } = useForm({
+      resolver: yupResolver(),
+    });
+  
+    const [ approveCancleTransaction ] = useApproveCancleTransactionMutation()
+    
+  
+    const onSubmit = async(data) => {
+      setIsBtnLoading(true)
+      try {
+        const res = await approveCancleTransaction({data,id})
+        if (res?.error) {
+          toast({
+            render: () => (
+              <ToastBox status={"error"} message={res?.error?.data?.message} />
+            ),
+          });
+          setIsBtnLoading(false)
+        }else if(res?.data){
+          toast({
+            render: () => (
+              <ToastBox message={res?.data?.message} />
+            ),
+          });
+          onClose()
+          onBigModalClose()
+          setIsBtnLoading(false)
+        }else{
+          toast({
+            render: () => (
+              <ToastBox status={'error'} message={"Something went wrong"} />
+            ),
+          });
+          setIsBtnLoading(false)
+        }
+      } catch (error) {
+        
+      }
+    };
+  
+  
+    const { data, isLoading } = 
+    (id, {
+      skip: !id,
+    });
+  
+    useEffect(() => {
+      if (data) {
+        reset({
+          investorAmount: data?.data?.investorAmount,
+        });
+      }
+    }, [data, reset]);
+  
+    const heandleOnClose = () =>{
+      reset()
+      onClose() 
+    }
+  
+    return (
+      <Modal isCentered isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
+        <ModalOverlay />
+        <ModalContent pb={4}>
+          <ModalHeader fontSize={"md"}>Approve Comment</ModalHeader>
+          <ModalCloseButton />
+          {isLoading ? (
+            <FullscreenLoaders height={"50vh"} />
+          ) : (
+          <Box as="form" onSubmit={handleSubmit(onSubmit)}>
+            <ModalBody>
+              <FormControl mb={4} isRequired>
+                <FormLabel fontSize="sm">Comment</FormLabel>
+                <Textarea
+                  rows={6}
+                  focusBorderColor="green.400"
+                  name="checkerComment"
+                  {...register("checkerComment")}
+                  fontSize="sm"
+                  type="textarea"
+                  size="md"
+                  placeholder={"Enter your checkerComment...."}
+                  rounded={"md"}
+                  resize={"none"}
+                  maxLength={200}
+                />
+                {errors.checkerComment && (
+                  <Text fontSize="xs" color="red">
+                    {errors.checkerComment.message}
+                  </Text>
+                )}
+                <FormHelperText fontSize="xs" color="gray.500">
+                  <Box as="span" me={1}>Maximum length should be 200 characters. You have entered</Box>
+                  {watch("checkerComment")?.length || 0} characters.
+                </FormHelperText>
+              </FormControl>
+            </ModalBody>
+            <ModalFooter>
+              <Button
+                colorScheme="gray"
+                mr={3}
+                onClick={onClose}
+                size={"xs"}
+                rounded={"sm"}
+              >
+                Cancel
+              </Button>
+              <Button
+                colorScheme="forestGreen"
+                variant="solid"
+                size={"xs"}
+                rounded={"sm"}
+                isLoading={isBtnLoading}
+                type="submit"
+              >
+                Send
+              </Button>
+            </ModalFooter>
+          </Box>
+          )}
+        </ModalContent>
+      </Modal>
+    );
+  };
+  
+  export default ApprovedCancelTransaction;
+  
\ No newline at end of file
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedExit.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedExit.jsx
new file mode 100644
index 0000000..2b3f4fa
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedExit.jsx
@@ -0,0 +1,175 @@
+import {
+    Box,
+    Button,
+    FormControl,
+    FormHelperText,
+    FormLabel,
+    Input,
+    Modal,
+    ModalBody,
+    ModalCloseButton,
+    ModalContent,
+    ModalFooter,
+    ModalHeader,
+    ModalOverlay,
+    Text,
+    Textarea,
+    useToast,
+  } from "@chakra-ui/react";
+  import React, { useEffect, useState } from "react";
+  import * as yup from "yup";
+  import { yupResolver } from "@hookform/resolvers/yup";
+  import { useForm } from "react-hook-form";
+  import ToastBox from "../../../../Components/ToastBox";
+  import {  useApproveExitTransactionMutation } from "../../../../Services/io.service";
+  
+  export const conformModalSchema = yup.object().shape({
+    checkerComment: yup
+    .string()
+    .required("Comment is required")
+    .max(200, "Approve Comment cannot be more than 200 characters"),
+  });
+  
+  const ApprovedExit = ({ isOpen, onClose, firstField ,id,onBigModalClose}) => {
+    const [isBtnLoading , setIsBtnLoading] = useState(false)
+  
+    const toast = useToast()
+  
+    const {
+      register,
+      reset,
+      watch,
+      handleSubmit,
+      formState: { errors },
+    } = useForm({
+      resolver: yupResolver(conformModalSchema),
+    });
+  
+    const [ approveExitTransaction ] = useApproveExitTransactionMutation()
+    
+  
+    const onSubmit = async(data) => {
+      setIsBtnLoading(true)
+      try {
+        const res = await approveExitTransaction({data,id})
+        if (res?.error) {
+          toast({
+            render: () => (
+              <ToastBox status={"error"} message={res?.error?.data?.message} />
+            ),
+          });
+          setIsBtnLoading(false)
+        }else if(res?.data){
+          toast({
+            render: () => (
+              <ToastBox message={res?.data?.message} />
+            ),
+          });
+          onClose()
+          onBigModalClose()
+          setIsBtnLoading(false)
+        }else{
+          toast({
+            render: () => (
+              <ToastBox status={'error'} message={"Something went wrong"} />
+            ),
+          });
+          setIsBtnLoading(false)
+        }
+      } catch (error) {
+        
+      }
+    };
+  
+    const handleFileChange = (event) => {
+      const selectedFile = event.target.files[0];
+      setFile(selectedFile);
+    };
+  
+  
+    const { data, isLoading } = 
+    (id, {
+      skip: !id,
+    });
+  
+    useEffect(() => {
+      if (data) {
+        reset({
+          investorAmount: data?.data?.investorAmount,
+        });
+      }
+    }, [data, reset]);
+  
+    const heandleOnClose = () =>{
+      reset()
+      onClose() 
+    }
+    
+  
+    return (
+      <Modal isCentered isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
+        <ModalOverlay />
+        <ModalContent pb={4}>
+          <ModalHeader fontSize={"md"}>Approve Comment</ModalHeader>
+          <ModalCloseButton />
+          {isLoading ? (
+            <FullscreenLoaders height={"50vh"} />
+          ) : (
+          <Box as="form" onSubmit={handleSubmit(onSubmit)}>
+            <ModalBody>
+              <FormControl mb={4} isRequired>
+                <FormLabel fontSize="sm">Comment</FormLabel>
+                <Textarea
+                  rows={6}
+                  focusBorderColor="green.400"
+                  name="checkerComment"
+                  {...register("checkerComment")}
+                  fontSize="sm"
+                  type="textarea"
+                  size="md"
+                  placeholder={"Enter your checkerComment...."}
+                  rounded={"md"}
+                  resize={"none"}
+                  maxLength={200}
+                />
+                {errors.checkerComment && (
+                  <Text fontSize="xs" color="red">
+                    {errors.checkerComment.message}
+                  </Text>
+                )}
+                <FormHelperText fontSize="xs" color="gray.500">
+                 <Box as="span" me={1}>Maximum length should be 200 characters. You have entered</Box>
+                  {watch("checkerComment")?.length || 0} characters.
+                </FormHelperText>
+              </FormControl>
+            </ModalBody>
+            <ModalFooter>
+              <Button
+                colorScheme="gray"
+                mr={3}
+                onClick={onClose}
+                size={"xs"}
+                rounded={"sm"}
+              >
+                Cancel
+              </Button>
+              <Button
+                colorScheme="forestGreen"
+                variant="solid"
+                size={"xs"}
+                rounded={"sm"}
+                isLoading={isBtnLoading}
+                type="submit"
+              >
+                Send
+              </Button>
+            </ModalFooter>
+          </Box>
+          )}
+        </ModalContent>
+      </Modal>
+    );
+  };
+  
+  export default ApprovedExit;
+  
\ No newline at end of file
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
index 66af682..a8db39d 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
@@ -1,283 +1,281 @@
 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";
+  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, ViewIcon } from "@chakra-ui/icons";
 import RequestApproveModal from "./RequestApproveModal";
 import RequestRejectModal from "./RequestRejectModal";
-  
-  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("");
+import ViewAmountInvested from "./ViewAmountInvested";
+import ViewDistributionInvestor from "./ViewDistributionInvestor";
+import ViewExit from "./ViewExit";
+import ViewCancel from "./ViewCancel";
 
-    const {
-      isOpen: isConfirmOpen,
-      onOpen: onConfirmOpen,
-      onClose: onConfirmClose,
-    } = useDisclosure();
-    const {
-      isOpen: isRejectOpen,
-      onOpen: onRejectOpen,
-      onClose: onRejectClose,
-    } = useDisclosure();
-  
-    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("==============panding",IODetails?.ioTransactionRecords?.Pending);
-    
-  
-    // 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 = IODetails?.ioTransactionRecords?.Pending?.map((item, index) => ({
+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("");
+
+  const {
+    isOpen: isConfirmOpen,
+    onOpen: onConfirmOpen,
+    onClose: onConfirmClose,
+  } = useDisclosure();
+  const {
+    isOpen: isRejectOpen,
+    onOpen: onRejectOpen,
+    onClose: onRejectClose,
+  } = useDisclosure();
+  const {
+    isOpen: isInvestmentOpen,
+    onOpen: onInvestmentOpen,
+    onClose: onInvestmentClose,
+  } = useDisclosure();
+  const {
+    isOpen: isDistInvestorOpen,
+    onOpen: onDistInvestorOpen,
+    onClose: onDistInvestorClose,
+  } = useDisclosure();
+  const {
+    isOpen: isExitOpen,
+    onOpen: onExitOpen,
+    onClose: onExitClose,
+  } = useDisclosure();
+  const {
+    isOpen: isCancelOpen,
+    onOpen: onCancelOpen,
+    onClose: onCancelClose,
+  } = useDisclosure();
+
+  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(
+    "==============panding",
+    IODetails?.ioTransactionRecords?.Pending
+  );
+
+  // 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 Date",
+    "Transaction Name",
+    "Amount",
+    "Created By",
+    "Created On",
+    "Approved By",
+    "Approved On",
+    "Actions",
+  ];
+
+  const extractedArray = IODetails?.ioTransactionRecords?.Pending?.map(
+    (item, index) => ({
       id: item?.id,
       "Sr No.": (
-        <Text
-          as={"span"}
-          color={"gray.800"}
-          fontWeight={"500"}
-        >
+        <Text as={"span"} color={"gray.800"} fontWeight={"500"}>
           {index + 1}.
         </Text>
       ),
-      "Transaction Name": (
+      "Transaction Date": (
         <Text
           as={"span"}
           color={"gray.600"}
           fontWeight={"500"}
         >
+          {formatDate(item?.transactionDate)}
+        </Text>
+      ),
+      "Transaction Name": (
+        <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
           {item?.transactionType}
         </Text>
       ),
-      "Amount": (
-        <Text
-          as={"span"}
-          color={"gray.600"}
-          fontWeight={"500"}
-        >
+      Amount: (
+        <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
           <Badge ms={1} colorScheme="green" me={1}>
             $
           </Badge>
-          {item?.transactionAmount}
+          {parseFloat(item?.transactionAmount || 0).toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
         </Text>
       ),
       "Created By": (
-        <Text
-          w={"100px"}
-          as={"span"}
-          color={"gray.800"}
-          fontWeight={"500"}
-        >
-          {item?.createdBy}
+        <Text 
+        textTransform={'capitalize'} w={"100px"} as={"span"} color={"gray.800"} fontWeight={"500"}>
+          {item?.creator?.firstName}
         </Text>
       ),
       "Created On": (
-        <Text
-          w={"100px"}
-          as={"span"}
-          color={"gray.800"}
-          fontWeight={"500"}
-        >
+        <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 
+        textTransform={'capitalize'} w={"100px"} as={"span"} color={"gray.800"} fontWeight={"500"}>
+          {item?.modifier?.firstName}
         </Text>
       ),
       "Approved On": (
-          <Text
-          w={"100px"}
-          as={"span"}
-          color={"gray.800"}
-          fontWeight={"500"}
-          >
-            {item?.modifier ? formatDate(item?.updatedAt) : "---" }
-          {}
+        <Text w={"100px"} as={"span"} color={"gray.800"} fontWeight={"500"}>
+          {item?.modifier ? formatDate(item?.updatedAt) : "---"}
         </Text>
       ),
-      "Status": (
+      Actions: (
         <Box display={"flex"} justifyContent={"center"} gap={2}>
-          <Tooltip
+          <Button
+            colorScheme="forestGreen"
             rounded={"sm"}
-            fontSize={"xs"}
-            label="Approve"
-            bg="#fff"
-            color={"green.500"}
-            placement="left-start"
+            size={"xs"}
+            px={2}
+            py={1}
+            fontWeight={500}
+            onClick={() => {
+              setActionId(item.id); // Set the action ID for all cases
+              if (item?.transactionType === "Amount Invested") {
+                onInvestmentOpen();
+              } else if (item?.transactionType === "Distribution To Investor") {
+                onDistInvestorOpen();
+              } else if (item?.transactionType === "Exit") {
+                onExitOpen();
+              } else if (item?.transactionType === "Cancel") {
+                onCancelOpen();
+              }
+            }}
           >
-            <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>
+            {localStorage?.getItem("role") === "Maker" ?  <ViewIcon me={"4px"} /> : null} {localStorage?.getItem("role") === "Maker" ?  "View" : "Approve / Reject"}
+          </Button>
         </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}
-        />
+    })
+  );
 
+  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}
+      />
+
+      <ViewAmountInvested
+        isOpen={isInvestmentOpen}
+        onClose={onInvestmentClose}
+        id={actionId}
+      />
+      <ViewDistributionInvestor
+          isOpen={isDistInvestorOpen}
+          onClose={onDistInvestorClose}
+          id={actionId}
+        />
+      <ViewExit 
+        isOpen={isExitOpen} 
+        onClose={onExitClose} 
+        id={actionId}
+      />
+      <ViewCancel 
+        isOpen={isCancelOpen} 
+        onClose={onCancelClose}
+        id={actionId} 
+      />
       <RequestApproveModal
         // data={data?.data?.rows}
         isOpen={isConfirmOpen}
@@ -290,9 +288,8 @@ import RequestRejectModal from "./RequestRejectModal";
         onClose={onRejectClose}
         id={actionId}
       />
-      </Box>
-    );
-  };
-  
-  export default Pending;
-  
\ No newline at end of file
+    </Box>
+  );
+};
+
+export default Pending;
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/Rejected.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/Rejected.jsx
index 21f09ab..942b450 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/Rejected.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/Rejected.jsx
@@ -75,7 +75,7 @@ import {
       "Amount",
       "Created By",
       "Created On",
-      // "Approved By",
+      "Approved By",
       "Approved On",
     ];
   
@@ -108,7 +108,10 @@ import {
           <Badge ms={1} colorScheme="green" me={1}>
             $
           </Badge>
-          {item?.transactionAmount}
+          {parseFloat(item?.transactionAmount || 0).toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
         </Text>
       ),
       "Created By": (
@@ -117,8 +120,9 @@ import {
           as={"span"}
           color={"gray.800"}
           fontWeight={"500"}
+          textTransform={'capitalize'}
         >
-          {item?.createdBy}
+          {item?.creator?.firstName}
         </Text>
       ),
       "Created On": (
@@ -137,8 +141,9 @@ import {
           as={"span"}
           color={"gray.800"}
           fontWeight={"500"}
+          textTransform={'capitalize'}
         >
-          {item?.modifier ? item?.modifier : "---" }
+           {item?.modifier?.firstName}
         </Text>
       ),
       "Approved On": (
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/RequestApproveModal.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestApproveModal.jsx
index 527dbb8..507aeb2 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/RequestApproveModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestApproveModal.jsx
@@ -139,7 +139,7 @@ const RequestApproveModal = ({ isOpen, onClose, firstField ,id}) => {
                 </Text>
               )}
               <FormHelperText fontSize="xs" color="gray.500">
-                Maximum length should be 200 characters. You have entered
+              <Box as="span" me={1}>Maximum length should be 200 characters. You have entered</Box>
                 {watch("checkerComment")?.length || 0} characters.
               </FormHelperText>
             </FormControl>
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/RequestExitApproveModal.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestExitApproveModal.jsx
index 04ee265..5bc15c7 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/RequestExitApproveModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestExitApproveModal.jsx
@@ -139,7 +139,7 @@ import {
                   </Text>
                 )}
                 <FormHelperText fontSize="xs" color="gray.500">
-                  Maximum length should be 200 characters. You have entered
+                <Box as="span" me={1}>Maximum length should be 200 characters. You have entered</Box>
                   {watch("checkerComment")?.length || 0} characters.
                 </FormHelperText>
               </FormControl>
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/RequestRejectModal.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestRejectModal.jsx
index 3a44d26..d4631f4 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/RequestRejectModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestRejectModal.jsx
@@ -27,7 +27,7 @@ export const conformModalSchema = yup.object().shape({
   comments: yup.string().required("Comment is required"),
 });
 
-const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
+const RequestRejectModal = ({ isOpen, onClose, firstField ,id, onBigModalClose}) => {
   const [isBtnLoading , setIsBtnLoading] = useState(false)
 
   const toast = useToast()
@@ -44,11 +44,25 @@ const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
   const [ rejectIOCase ] = useRejectIOCaseMutation()
   
 
+  const handleFileChange = (event) => {
+    const selectedFile = event.target.files[0];
+    setFile(selectedFile);
+  };
+
+
+  const { data, isLoading } = 
+  (id, {
+    skip: !id,
+  });
+
+  console.log("============data",data);
+  
+  
   const onSubmit = async(data) => {
     console.log(data, "tewxttttt");
     setIsBtnLoading(true)
     try {
-      const res = await rejectIOCase({data,id})
+      const res = await rejectIOCase({data, id})
       if (res?.error) {
         toast({
           render: () => (
@@ -63,6 +77,7 @@ const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
           ),
         });
         onClose()
+        onBigModalClose()
         setIsBtnLoading(false)
       }else{
         toast({
@@ -77,24 +92,14 @@ const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
     }
   };
 
-  const handleFileChange = (event) => {
-    const selectedFile = event.target.files[0];
-    setFile(selectedFile);
-  };
 
-
-  const { data, isLoading } = 
-  (id, {
-    skip: !id,
-  });
-
-  useEffect(() => {
-    if (data) {
-      reset({
-        investorAmount: data?.data?.investorAmount,
-      });
-    }
-  }, [data, reset]);
+  // useEffect(() => {
+  //   if (data) {
+  //     reset({
+  //       investorAmount: data?.data?.investorAmount,
+  //     });
+  //   }
+  // }, [data, reset]);
 
   const heandleOnClose = () =>{
     reset()
@@ -138,7 +143,7 @@ const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
               colorScheme="gray"
               mr={3}
               onClick={onClose}
-              size={"sm"}
+              size={"xs"}
               rounded={"sm"}
             >
               Cancel
@@ -146,7 +151,7 @@ const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
             <Button
               colorScheme="forestGreen"
               variant="solid"
-              size={"sm"}
+              size={"xs"}
               rounded={"sm"}
               isLoading={isBtnLoading}
               type="submit"
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx
new file mode 100644
index 0000000..a297a60
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx
@@ -0,0 +1,292 @@
+import React, { useContext, useEffect, useState } from "react";
+import {
+  Box,
+  Button,
+  FormControl,
+  FormLabel,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
+import { Controller, useForm } from "react-hook-form";
+import * as yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+import { useParams } from "react-router-dom";
+import { useAmountIvestmentMutation } from "../../../../Services/io.service";
+import ToastBox from "../../../../Components/ToastBox";
+import CurrencyInput from "../../../../Components/CurrencyInput";
+import RequestRejectModal from "./RequestRejectModal";
+import ApproveInvestedModal from "./ApproveInvestedModal";
+import { formatDate } from "../../../Master/Sponser/Sponsers";
+
+// Validation schema
+const validationSchema = yup.object().shape({
+  transactionDate: yup.date().required("Date is required"),
+  Total_Amount: yup.number().required("Amount is required"),
+  amountInvested: yup.number().required("Amount to invest is required"),
+  IoCash: yup
+    .number()
+    .positive("IO Cash must be positive")
+    .required("IO Cash is required"),
+});
+
+// Function to format currency
+const formatCurrency = (value) => {
+  if (isNaN(value)) return "";
+  const formatted = parseFloat(value).toFixed(2).toString();
+  const [integer, decimal] = formatted.split(".");
+  const formattedInteger = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return decimal ? `${formattedInteger}.${decimal}` : formattedInteger;
+};
+
+const ViewAmountInvested = ({ isOpen, onClose, id: investorId }) => {
+  const params = useParams();
+  const toast = useToast();
+  const id = params?.id;
+  const {
+    control,
+    register,
+    handleSubmit,
+    reset,
+    watch,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(validationSchema),
+  });
+  const [isLoading, setIsLoading] = useState(false);
+  const { IODetails } = useContext(GlobalStateContext);
+  const [amountInvested] = useAmountIvestmentMutation();
+  const [actionId, setActionId] = useState(false);
+
+  const {
+    isOpen: isConfirmOpen,
+    onOpen: onConfirmOpen,
+    onClose: onConfirmClose,
+  } = useDisclosure();
+  const {
+    isOpen: isRejectOpen,
+    onOpen: onRejectOpen,
+    onClose: onRejectClose,
+  } = useDisclosure();
+
+  useEffect(() => {
+    if (IODetails?.totalAmtInvestmentInUSD) {
+      const totalAmount = parseFloat(IODetails.totalAmtInvestmentInUSD);
+      const ioCashUpdate = parseFloat(IODetails.totalAmtInvestmentInUSD);
+      reset({
+        Total_Amount: totalAmount,
+        IoCash: ioCashUpdate,
+      });
+    }
+  }, [IODetails, reset]);
+
+  const onSubmit = async (data) => {
+    console.log(data);
+    setIsLoading(true);
+
+    try {
+      const res = await amountInvested({ data, id });
+      console.log(res);
+      if (res?.data?.statusCode === 200) {
+        toast({
+          render: () => <ToastBox message={res?.data?.message} />,
+        });
+        setIsLoading(false);
+        onClose();
+      } else if (res?.error?.status === 400) {
+        toast({
+          render: () => (
+            <ToastBox message={res?.error?.data?.message} status={"error"} />
+          ),
+        });
+        setIsLoading(false);
+      }
+    } catch (error) {
+      setIsLoading(false);
+    }
+  };
+
+  // const formatDate = (date) => new Date(date).toLocaleDateString();
+
+  const handleAmountChange = (e) => {
+    // e might be an object or just a value, handle both cases
+    const amount =
+      typeof e === "object" && e.target
+        ? parseFloat(e.target.value) || 0
+        : parseFloat(e) || 0;
+    const totalAmount = parseFloat(IODetails?.totalAmtInvestmentInUSD) || 0;
+    const ioCash = (totalAmount - amount).toFixed(2);
+
+    reset({
+      amountInvested: parseFloat(amount),
+      IoCash: parseFloat(ioCash),
+      Total_Amount: IODetails?.totalAmtInvestmentInUSD,
+    });
+  };
+
+  console.log(
+    "=========hitttt",
+    IODetails?.ioTransactionRecords?.Pending?.[0]?.createdAt
+  );
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader fontSize={"md"}>Amount Invested</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <FormControl
+              mb={"15px"}
+              isInvalid={!!errors.transactionDate}
+              isRequired
+            >
+              <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
+                Date
+              </FormLabel>
+              <Input
+                type="text"
+                value={formatDate(
+                  IODetails?.ioTransactionRecords?.Pending?.[0]?.createdAt
+                )}
+                // value={IODetails?.ioTransactionRecords?.Pending?.[0]?.createdAt}
+                size="sm"
+                rounded={"sm"}
+                textAlign={"end"}
+                focusBorderColor="forestGreen.300"
+                fontSize={"sm"}
+                readOnly
+              />
+              {/* <Text>
+                {IODetails?.ioTransactionRecords?.Approved?.[0]?.createdAt} dccd
+              </Text> */}
+            </FormControl>
+
+            <FormControl
+              mb={"15px"}
+              isInvalid={!!errors.Total_Amount}
+              isReadOnly
+            >
+              <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
+                Amount
+              </FormLabel>
+              <Input
+                type="text"
+                value={formatCurrency(watch("Total_Amount") || 0)}
+                size="sm"
+                rounded={"sm"}
+                textAlign={"end"}
+                focusBorderColor="forestGreen.300"
+                fontSize={"sm"}
+                readOnly
+              />
+            </FormControl>
+
+            <FormControl
+              mb={"15px"}
+              isInvalid={!!errors.amountInvested}
+              isRequired
+            >
+              <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
+                Amount to invest
+              </FormLabel>
+              <Input
+                type="text"
+                value={formatCurrency(
+                  IODetails?.ioTransactionRecords?.Pending?.[0]
+                    ?.transactionAmount || 0
+                )}
+                size="sm"
+                rounded={"sm"}
+                textAlign={"end"}
+                focusBorderColor="forestGreen.300"
+                fontSize={"sm"}
+                readOnly
+              />
+            </FormControl>
+
+            <FormControl mb={"15px"} isInvalid={!!errors.IoCash}>
+              <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
+                IO Cash
+              </FormLabel>
+              <Input
+                type="text"
+                value={formatCurrency(
+                  (watch("Total_Amount") || 0) -
+                    (IODetails?.ioTransactionRecords?.Pending?.[0]
+                      ?.transactionAmount || 0)
+                )}
+                size="sm"
+                rounded={"sm"}
+                focusBorderColor="forestGreen.300"
+                fontSize={"sm"}
+                textAlign={"right"}
+                readOnly
+              />
+            </FormControl>
+
+            {localStorage?.getItem("role") !== "Maker" && <ModalFooter>
+              <Box display={"flex"} justifyContent={"center"} gap={2}>
+                <Button
+                  rounded={"sm"}
+                  size={"xs"}
+                  textTransform={"inherit"}
+                  fontWeight={500}
+                  px={3}
+                  py={2}
+                  onClick={() => {
+                    setActionId(id); // Use the `id` variable from params
+                    onConfirmOpen();
+                  }}
+                  colorScheme="forestGreen"
+                  variant={"solid"}
+                  cursor={"pointer"}
+                >
+                  Approve
+                </Button>
+                <Button
+                  rounded={"sm"}
+                  size={"xs"}
+                  textTransform={"inherit"}
+                  fontWeight={500}
+                  px={3}
+                  py={2}
+                  onClick={() => {
+                    setActionId(id); // Use the `id` variable from params
+                    onRejectOpen();
+                  }}
+                >
+                  Reject
+                </Button>
+              </Box>
+            </ModalFooter>}
+          </form>
+        </ModalBody>
+      </ModalContent>
+      <ApproveInvestedModal
+        isOpen={isConfirmOpen}
+        onClose={onConfirmClose}
+        onBigModalClose={onClose}
+        id={investorId}
+      />
+      <RequestRejectModal
+        isOpen={isRejectOpen}
+        onClose={onRejectClose}
+        onBigModalClose={onClose}
+        id={investorId}
+      />
+    </Modal>
+  );
+};
+
+export default ViewAmountInvested;
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx
new file mode 100644
index 0000000..e388d02
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx
@@ -0,0 +1,365 @@
+import {
+    Badge,
+    Box,
+    Button,
+    HStack,
+    Modal,
+    ModalBody,
+    ModalCloseButton,
+    ModalContent,
+    ModalFooter,
+    ModalHeader,
+    ModalOverlay,
+    Table,
+    Tbody,
+    Text,
+    Th,
+    Tr,
+    useDisclosure,
+    useToast,
+  } from "@chakra-ui/react";
+  import NormalData from "../../../../Components/DataTable/NormalTable";
+  import { useContext, useState } from "react";
+  import {
+    useExitIOTransactionMutation,
+    useGetDistributedToInvestorMutation,
+    useGetDistributionInvestorMutation,
+    useGetIOByIdQuery,
+  } from "../../../../Services/io.service";
+  import { useParams } from "react-router-dom";
+  import { useEffect } from "react";
+  import { useForm } from "react-hook-form";
+  import * as yup from "yup";
+  import { yupResolver } from "@hookform/resolvers/yup";
+  import ToastBox from "../../../../Components/ToastBox";
+  import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+import ApprovedCancelTransaction from "./ApprovedCancelTransaction";
+import RequestRejectModal from "./RequestRejectModal";
+  
+  const ViewCancel = ({ isOpen, onClose,id:cancleId }) => {
+    const params = useParams();
+    const toast = useToast();
+    const id = params?.id;
+    const [isCalculateLoading, setIsCalculateLoading] = useState(false);
+    const [isFinalCalculateLoading, setIsFinalCalculateLoading] = useState(false);
+    const [calcualtedData, setCalculatedDate] = useState(null);
+    const [isCalcualtedData, setIsCalcualtedData] = useState(false);
+    const { investors, setInvestors, slideFromRight, IODetails } =
+    useContext(GlobalStateContext);
+
+    const [actionId, setActionId] = useState(false);
+
+    const {
+      isOpen: isConfirmOpen,
+      onOpen: onConfirmOpen,
+      onClose: onConfirmClose,
+    } = useDisclosure();
+    const {
+      isOpen: isRejectOpen,
+      onOpen: onRejectOpen,
+      onClose: onRejectClose,
+    } = useDisclosure();
+  
+    const investorExit = yup.object().shape({
+      amount: yup
+        .string()
+        .required("Amount is required")
+        .test(
+          "max",
+          `Distribution amount should not be greater than IO cash amount ${IODetails?.ioCash}`,
+          function (value) {
+            const { ioCash } = IODetails || {}; // Safely get ioCash
+            if (value && ioCash) {
+              return parseFloat(value) <= parseFloat(ioCash); // Ensure both are compared as numbers
+            }
+            return true; // If ioCash is not available, skip validation
+          }
+        ),
+    });
+  
+    const {
+      control,
+      handleSubmit,
+      formState: { errors },
+      reset,
+    } = useForm({
+      resolver: yupResolver(investorExit),
+    });
+  
+    // useEffect(() => {
+    //   console.log("hiit     useEffectc");
+    //   handleCalculate(id, {
+    //     amount: IODetails?.ioMVNAV,
+    //   });
+    //   reset({
+    //     amount: IODetails?.ioMVNAV,
+    //   });
+    // }, [IODetails, id]);
+  
+    const handleCalculate = async (id, data) => {
+      try {
+        const res = await getDistributionInvestment({ id, data });
+        console.log(res?.data?.data);
+  
+        if (res?.error?.status === 401) { 
+          setIsCalculateLoading(false);
+          setIsCalcualtedData(false);
+        } else if (res?.data?.statusCode === 200) {
+          setCalculatedDate(res?.data?.data);
+          setIsCalculateLoading(false);
+          setIsCalcualtedData(true);
+        }
+      } catch (error) {}
+    };
+  
+    const [getDistributionInvestment] = useGetDistributionInvestorMutation();
+  
+    const investor = yup.object().shape({
+      amount: yup.string().required("Amount is required"),
+    });
+  
+    // ====================================================[Table Setup]================================================================
+    const tableHeadRow = [
+    "Client ID",
+    "First name",
+    "Last name",
+    "Investment amount",
+    "Percentage",
+    "Market Value",
+    "Return on Investment",
+    "Distribution",
+    "Distribution Percent",
+    "Total Return",
+    "Total return on Investment",
+    ];
+  
+    const extractedArray = IODetails?.investors?.map((item, index) => ({
+        id: item?.id,
+        "Client ID": (
+          <Text
+            justifyContent={slideFromRight ? "right" : "center"}
+            as={"span"}
+            color={"teal.900"}
+            fontWeight={"500"}
+            className="d-flex align-items-center web-text-small"
+          >
+            {item?.clientReference_id}
+          </Text>
+        ),
+        "First name": (
+          <Text
+            justifyContent={slideFromRight ? "right" : "center"}
+            as={"span"}
+            color={"teal.900"}
+            fontWeight={"500"}
+            className="d-flex align-items-center web-text-small"
+          >
+            {item.firstName}
+          </Text>
+        ),
+        "Last name": (
+          <Text
+            justifyContent={slideFromRight ? "right" : "center"}
+            as={"span"}
+            color={"teal.900"}
+            fontWeight={"500"}
+            className="d-flex align-items-center web-text-small"
+          >
+            {item.lastName}
+          </Text>
+        ),
+        "Investment amount": (
+          <Text
+            justifyContent={slideFromRight ? "right" : "left"}
+            as={"span"}
+            color={"teal.900"}
+            fontWeight={"500"}
+            className="d-flex align-items-center web-text-small"
+          >
+            <Badge ms={1} colorScheme="green" me={1}>
+              $
+            </Badge>
+            {/* {`$${formatCurrency(item.InvestedAmount_USD)}`} */}
+            {`${parseFloat(item.InvestedAmount_USD || 0).toLocaleString(undefined, {
+              minimumFractionDigits: 2,
+              maximumFractionDigits: 2,
+            })}`}
+          </Text>
+        ),
+        Percentage: (
+          <Text
+            justifyContent={slideFromRight ? "right" : "center"}
+            as={"span"}
+            color={"teal.900"}
+            fontWeight={"500"}
+            className="d-flex align-items-center web-text-small"
+          >
+            {item.Investor_Holidings} %
+          </Text>
+        ),
+        "Market Value": (
+          <Text
+            justifyContent={slideFromRight ? "right" : "left"}
+            as={"span"}
+            color={"teal.900"}
+            fontWeight={"500"}
+            className="d-flex align-items-center web-text-small"
+          >
+            <Badge ms={1} colorScheme="green" me={1}>
+              $
+            </Badge>
+            {`${parseFloat(item.Market_Value || 0).toLocaleString(undefined, {
+              minimumFractionDigits: 2,
+              maximumFractionDigits: 2,
+            })}`}
+          </Text>
+        ),
+        "Return on Investment": (
+          <Text
+            justifyContent={slideFromRight ? "right" : "center"}
+            as={"span"}
+            color={"teal.900"}
+            fontWeight={"500"}
+            h={6}
+            className="d-flex align-items-center web-text-small"
+          >
+            {item.Return_On_Investment || 0} %
+          </Text>
+        ),
+        Distribution: (
+          <Text
+            justifyContent={slideFromRight ? "right" : "left"}
+            as={"span"}
+            color={"teal.900"}
+            fontWeight={"500"}
+            className="d-flex align-items-center web-text-small"
+          >
+            <Badge ms={1} colorScheme="green" me={1}>
+              $
+            </Badge>
+            {/* {`$${item.Distribution_Amt}`} */}
+            {`${parseFloat(item.Distribution_Amt || 0).toLocaleString(undefined, {
+              minimumFractionDigits: 2,
+              maximumFractionDigits: 2,
+            })}`}
+          </Text>
+        ),
+        "Distribution Percent": (
+          <Text
+            justifyContent={slideFromRight ? "right" : "center"}
+            as={"span"}
+            color={"teal.900"}
+            fontWeight={"500"}
+            className="d-flex align-items-center web-text-small"
+          >
+            {/* {`$${item.Distribution_Amt}`} */}
+            {`${parseFloat(item.Distribution_Per || 0).toLocaleString(undefined, {
+              minimumFractionDigits: 2,
+              maximumFractionDigits: 2,
+            })} %`}
+          </Text>
+        ),
+        "Total Return": (
+          <Text
+            justifyContent={slideFromRight ? "right" : "left"}
+            as={"span"}
+            color={"teal.900"}
+            fontWeight={"500"}
+            className="d-flex align-items-center web-text-small"
+          >
+            <Badge ms={1} colorScheme="green" me={1}>
+              $
+            </Badge>
+            {/* {`$${formatCurrency(item.Total_Return) || 0}`} */}
+            {`${parseFloat(item.Total_Return || 0).toLocaleString(undefined, {
+              minimumFractionDigits: 2,
+              maximumFractionDigits: 2,
+            })}`}
+          </Text>
+        ),
+        "Total return on Investment": (
+          <Text
+            justifyContent={slideFromRight ? "right" : "center"}
+            as={"span"}
+            color={"teal.900"}
+            fontWeight={"500"}
+            className="d-flex align-items-center web-text-small"
+          >
+            {item.Total_Return_On_Investment || 0} %
+          </Text>
+        ),
+      }));
+  
+    const handleClose = () => {
+      onClose();
+      setIsFinalCalculateLoading(false);
+      setIsCalcualtedData(false);
+    };
+  
+    return (
+      <Modal size={"xl"} isOpen={isOpen} onClose={handleClose} >
+        <ModalOverlay />
+        <ModalContent maxW={1000}>
+          <ModalHeader fontSize={"md"}>Cancel Transaction</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <NormalData
+              emptyMessage={`We don't have any Sponers `}
+              tableHeadRow={tableHeadRow}
+              data={extractedArray}
+            />
+          </ModalBody>
+          {localStorage?.getItem("role") !== "Maker" && <ModalFooter pt={0}>
+            <Box display={"flex"} justifyContent={"center"} gap={2}>
+                <Button
+                  rounded={"sm"}
+                  size={"xs"}
+                  textTransform={"inherit"}
+                  fontWeight={500}
+                  px={3}
+                  py={2}
+                  onClick={() => {
+                    setActionId(id); // Use the `id` variable from params
+                    onConfirmOpen();
+                  }}
+                  colorScheme="forestGreen"
+                  variant={"solid"}
+                  cursor={"pointer"}
+                >
+                  Approve
+                </Button>
+                <Button
+                  rounded={"sm"}
+                  size={"xs"}
+                  textTransform={"inherit"}
+                  fontWeight={500}
+                  px={3}
+                  py={2}
+                  onClick={() => {
+                    setActionId(id); // Use the `id` variable from params
+                    onRejectOpen();
+                  }}
+                >
+                  Reject
+                </Button>
+            </Box>
+          </ModalFooter>}
+        </ModalContent>
+        <ApprovedCancelTransaction
+        isOpen={isConfirmOpen}
+        onClose={onConfirmClose}
+        onBigModalClose={onClose}
+        id={cancleId}
+      />
+      <RequestRejectModal
+        isOpen={isRejectOpen}
+        onClose={onRejectClose}
+        onBigModalClose={onClose}
+        id={cancleId}
+      />
+      </Modal>
+    );
+  };
+  
+  export default ViewCancel;
+  
\ No newline at end of file
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx
new file mode 100644
index 0000000..6df053a
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx
@@ -0,0 +1,268 @@
+import {
+  Box,
+  Button,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
+import NormalData from "../../../../Components/DataTable/NormalTable";
+import { useContext, useState } from "react";
+import { useGetDistributionInvestorMutation } from "../../../../Services/io.service";
+import { useParams } from "react-router-dom";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+import ApproveDistrubationModal from "./ApproveDistrubationModal";
+import RequestRejectModal from "./RequestRejectModal";
+
+const ViewDistributionInvestor = ({ isOpen, onClose,id:exitId }) => {
+  const params = useParams();
+  const toast = useToast();
+  const id = params?.id;
+  const [isCalculateLoading, setIsCalculateLoading] = useState(false);
+  const [isFinalCalculateLoading, setIsFinalCalculateLoading] = useState(false);
+  const [calcualtedData, setCalculatedDate] = useState(null);
+  const [isCalcualtedData, setIsCalcualtedData] = useState(false);
+  const { IODetails } = useContext(GlobalStateContext);
+  const [actionId, setActionId] = useState(false);
+
+  const investorExit = yup.object().shape({
+    amount: yup
+      .string()
+      .required("Amount is required")
+      .test(
+        "max",
+        `Distribution amount should not be greater than IO cash amount ${IODetails?.ioCash}`,
+        function (value) {
+          const { ioCash } = IODetails || {}; // Safely get ioCash
+          if (value && ioCash) {
+            return parseFloat(value) <= parseFloat(ioCash); // Ensure both are compared as numbers
+          }
+          return true; // If ioCash is not available, skip validation
+        }
+      ),
+  });
+
+  const {
+    isOpen: isConfirmOpen,
+    onOpen: onConfirmOpen,
+    onClose: onConfirmClose,
+  } = useDisclosure();
+  const {
+    isOpen: isRejectOpen,
+    onOpen: onRejectOpen,
+    onClose: onRejectClose,
+  } = useDisclosure();
+
+  const {
+    formState: { errors },
+    reset,
+  } = useForm({
+    resolver: yupResolver(investorExit),
+  });
+
+  useEffect(() => {
+    console.log("hiit     useEffectc");
+    handleCalculate(id, {
+      amount: IODetails?.ioMVNAV,
+    });
+    reset({
+      amount: IODetails?.ioMVNAV,
+    });
+  }, [IODetails, id]);
+
+  const handleCalculate = async (id, data) => {
+    try {
+      const res = await getDistributionInvestment({ id, data });
+      console.log(res?.data?.data);
+
+      if (res?.error?.status === 401) {
+        setIsCalculateLoading(false);
+        setIsCalcualtedData(false);
+      } else if (res?.data?.statusCode === 200) {
+        setCalculatedDate(res?.data?.data);
+        setIsCalculateLoading(false);
+        setIsCalcualtedData(false);
+      }
+    } catch (error) {}
+  };
+
+  const [getDistributionInvestment] = useGetDistributionInvestorMutation();
+
+  // ====================================================[Table Setup]================================================================
+  const tableHeadRow = [
+    "Sr No.",
+    "Client Id",
+    "First name",
+    "Last Name",
+    "Amount",
+    "Holding (%)",
+    "Distriution Amt($)",
+    "Yeild (%)",
+  ];
+
+  const extractedArray = calcualtedData?.data?.map((item, index) => ({
+    id: item?.id,
+    "Sr No.": (
+      <Box
+        w={9}
+        display={"flex"}
+        alignItems={"center"}
+        isTruncated={true}
+        h={25}
+      >
+        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+          {index + 1}
+        </Text>
+      </Box>
+    ),
+    "Client Id": (
+      <Box w={90} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+          {item?.clientId}
+        </Text>
+      </Box>
+    ),
+    "First name": (
+      <Box w={90} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+          {item?.firstName}
+        </Text>
+      </Box>
+    ),
+    "Last Name": (
+      <Box minW={24} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+          {item?.lastName}
+        </Text>
+      </Box>
+    ),
+    Amount: (
+      <Box minW={24} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+          {item?.amount?.toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
+        </Text>
+      </Box>
+    ),
+    "Holding (%)": (
+      <Box minW={24} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+          {item?.investor_holidings?.toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
+          %
+        </Text>
+      </Box>
+    ),
+    "Distriution Amt($)": (
+      <Box minW={24} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+          {item?.distribution_amt?.toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
+        </Text>
+      </Box>
+    ),
+    "Yeild (%)": (
+      <Box minW={24} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+          {item?.distribution_per?.toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
+          %
+        </Text>
+      </Box>
+    ),
+  }));
+
+  const handleClose = () => {
+    onClose();
+    setIsFinalCalculateLoading(false);
+    setIsCalcualtedData(false);
+  };
+  
+
+  return (
+    <Modal size={"xl"} isOpen={isOpen} onClose={handleClose}>
+      <ModalOverlay />
+      <ModalContent maxW={1000}>
+        <ModalHeader fontSize={"md"}>
+          Distribution To Investor Transaction
+        </ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <NormalData
+            emptyMessage={`We don't have any Sponers `}
+            tableHeadRow={tableHeadRow}
+            data={extractedArray}
+          />
+        </ModalBody>
+        {/* ...(localStorage?.getItem("role") !== "Maker" ? ["Status"] : []), */}
+        {localStorage?.getItem("role") !== "Maker" &&<ModalFooter pt={0}>
+          <Box display={"flex"} justifyContent={"center"} gap={2}>
+            <Button
+              rounded={"sm"}
+              size={"xs"}
+              textTransform={"inherit"}
+              fontWeight={500}
+              px={3}
+              py={2}
+              onClick={() => {
+                setActionId(id); // Use the `id` variable from params
+                onConfirmOpen();
+              }}
+              colorScheme="forestGreen"
+              variant={"solid"}
+              cursor={"pointer"}
+            >
+              Approve
+            </Button>
+            <Button
+              rounded={"sm"}
+              size={"xs"}
+              textTransform={"inherit"}
+              fontWeight={500}
+              px={3}
+              py={2}
+              onClick={() => {
+                setActionId(id); // Use the `id` variable from params
+                onRejectOpen();
+              }}
+            >
+              Reject
+            </Button>
+          </Box>
+        </ModalFooter>}
+      </ModalContent>
+      <ApproveDistrubationModal
+        isOpen={isConfirmOpen}
+        onClose={onConfirmClose}
+        onBigModalClose={handleClose}
+        id={exitId}
+      />
+      <RequestRejectModal
+        isOpen={isRejectOpen}
+        onClose={onRejectClose}
+        onBigModalClose={handleClose}
+        id={exitId}
+      />
+    </Modal>
+  );
+};
+
+export default ViewDistributionInvestor;
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx
new file mode 100644
index 0000000..1bb0b6a
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx
@@ -0,0 +1,326 @@
+import {
+    Alert,
+    AlertIcon,
+    Box,
+    Button,
+    FormControl,
+    FormErrorMessage,
+    FormLabel,
+    HStack,
+    Input,
+    Modal,
+    ModalBody,
+    ModalCloseButton,
+    ModalContent,
+    ModalFooter,
+    ModalHeader,
+    ModalOverlay,
+    Switch,
+    Table,
+    Tbody,
+    Text,
+    Textarea,
+    Th,
+    Tr,
+    useDisclosure,
+    useToast,
+  } from "@chakra-ui/react";
+  import NormalData from "../../../../Components/DataTable/NormalTable";
+  import { useContext, useState } from "react";
+  import { AddIcon } from "@chakra-ui/icons";
+  import {
+    useExitIOTransactionMutation,
+    useGetDistributedToInvestorMutation,
+    useGetDistributionInvestorMutation,
+    useUpdateExitToInvestorMutation,
+  } from "../../../../Services/io.service";
+  import { useParams } from "react-router-dom";
+  import { useEffect } from "react";
+  import { Controller, useForm } from "react-hook-form";
+  import * as yup from "yup";
+  import { yupResolver } from "@hookform/resolvers/yup";
+  import ToastBox from "../../../../Components/ToastBox";
+  import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+import ApprovedExit from "./ApprovedExit";
+import RequestRejectModal from "./RequestRejectModal";
+  
+  const ViewExit = ({ isOpen, onClose ,id:investerId}) => {
+    const params = useParams();
+    const toast = useToast();
+    const id = params?.id;
+    const [isCalculateLoading, setIsCalculateLoading] = useState(false);
+    const [isFinalCalculateLoading, setIsFinalCalculateLoading] = useState(false);
+    const [calcualtedData, setCalculatedDate] = useState(null);
+    const [isCalcualtedData, setIsCalcualtedData] = useState(false);
+    const { IODetails } = useContext(GlobalStateContext);
+    const [actionId, setActionId] = useState(false);
+
+    const {
+      isOpen: isConfirmOpen,
+      onOpen: onConfirmOpen,
+      onClose: onConfirmClose,
+    } = useDisclosure();
+    const {
+      isOpen: isRejectOpen,
+      onOpen: onRejectOpen,
+      onClose: onRejectClose,
+    } = useDisclosure();
+  
+  
+    const {
+      control,
+      handleSubmit,
+      formState: { errors },
+      reset,
+    } = useForm({
+      resolver: yupResolver(),
+    });
+  
+    // useEffect(() => {
+    //   console.log("hiit     useEffectc");
+    //   handleCalculate(id, {
+    //     amount: IODetails?.ioMVNAV,
+    //   });
+    //   reset({
+    //     amount: IODetails?.ioMVNAV,
+    //   });
+    // }, [IODetails, id]);
+  
+    const handleCalculate = async (id, data) => {
+      try {
+        const res = await getDistributionInvestment({ id, data });
+        console.log(res?.data?.data);
+  
+        if (res?.error?.status === 401) { 
+          setIsCalculateLoading(false);
+          setIsCalcualtedData(false);
+        } else if (res?.data?.statusCode === 200) {
+          setCalculatedDate(res?.data?.data);
+          setIsCalculateLoading(false);
+          setIsCalcualtedData(true);
+        }
+      } catch (error) {}
+    };
+  
+    const [getDistributionInvestment] = useGetDistributionInvestorMutation();
+  
+    const investor = yup.object().shape({
+      amount: yup.string().required("Amount is required"),
+    });
+  
+    // ====================================================[Table Setup]================================================================
+    const tableHeadRow = [
+      "Sr No.",
+      "Client Id",
+      "First name",
+      "Last Name",
+      "Amount",
+      "Holding (%)",
+      "Exit Amt($)",
+    ];
+
+    
+  
+    const extractedArray = calcualtedData?.data?.map((item, index) => ({
+      id: item?.id,
+      "Sr No.": (
+        <Box
+          w={9}
+          display={"flex"}
+          alignItems={"center"}
+          isTruncated={true}
+          h={25}
+        >
+          <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+            {index + 1}
+          </Text>
+        </Box>
+      ),
+      "Client Id": (
+        <Box w={100} isTruncated={true}>
+          <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+            {item?.clientId}
+          </Text>
+        </Box>
+      ),
+      "First name": (
+        <Box minW={24} isTruncated={true}>
+          <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+            {item?.firstName}
+          </Text>
+        </Box>
+      ),
+      "Last Name": (
+        <Box minW={24} isTruncated={true}>
+          <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+            {item?.lastName}
+          </Text>
+        </Box>
+      ),
+      Amount: (
+        <Box minW={24} isTruncated={true}>
+          <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+            {item?.amount?.toLocaleString(undefined, {
+              minimumFractionDigits: 2,
+              maximumFractionDigits: 2,
+            })}
+          </Text>
+        </Box>
+      ),
+      "Holding (%)": (
+  <Box minW={24} isTruncated={true}>
+  <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+    {item?.investor_holidings?.toLocaleString(undefined, {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    })}%
+  </Text>
+  </Box>
+      ),
+      "Exit Amt($)": (
+        <Box minW={24} isTruncated={true}>
+          <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+            {item?.distribution_amt?.toLocaleString(undefined, {
+              minimumFractionDigits: 2,
+              maximumFractionDigits: 2,
+            })}
+          </Text>
+        </Box>
+      ),
+    }));
+  
+    const onSubmit = async (data) => {
+      setIsCalculateLoading(true);
+  
+      try {
+        const res = await getDistributionInvestment({ id, data });
+        console.log(res?.data?.data);
+  
+        if (res?.error?.status === 401) {
+          toast({
+            render: () => (
+              <ToastBox message={res?.error?.data?.message} status={"error"} />
+            ),
+          });
+          setIsCalculateLoading(false);
+          setIsCalcualtedData(false);
+        } else if (res?.data?.statusCode === 200) {
+          setCalculatedDate(res?.data?.data);
+          toast({
+            render: () => <ToastBox message={res?.data?.message} />,
+          });
+          setIsCalculateLoading(false);
+          setIsCalcualtedData(true);
+        }
+      } catch (error) {}
+    };
+  
+    const handleClose = () => {
+      onClose();
+      setIsFinalCalculateLoading(false);
+      setIsCalcualtedData(false);
+    };
+    
+    console.log(id);
+    
+
+    return (
+      <Modal size={"xl"} isOpen={isOpen} onClose={handleClose} >
+        <ModalOverlay />
+        <ModalContent maxW={1000}>
+          <ModalHeader fontSize={"md"}>Exit Transaction</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            {/* <Text as="label" mb="5px" fontSize="sm" fontWeight={500}>
+              Amount to Distribute
+            </Text> */}
+            <HStack onSubmit={handleSubmit(onSubmit)} as={"form"} mb={4} alignItems={'center'}>
+              {/* <Input placeholder="$00.00" size={"sm"} className="col" /> */}
+              {/* <FormControl isInvalid={errors.amount} isRequired>*/}
+                <Text textAlign={"right"} fontSize={"sm"}>
+                  Exit Amount :
+                </Text> 
+              <Text
+                textAlign={"start"}
+                bg={"green.100"}
+                p={2}
+                rounded={"md"}
+                fontSize={"sm"}
+                pt={1}
+                pb={1}
+                fontWeight={600}
+              >
+                ${" "}
+                {parseFloat(IODetails?.ioMVNAV || 0).toLocaleString(undefined, {
+                  minimumFractionDigits: 2,
+                  maximumFractionDigits: 2,
+                })}
+              </Text>
+  
+              {/* </FormControl> */}
+            </HStack>
+  
+            {/* {calcualtedData && ( */}
+            <NormalData
+              emptyMessage={`We don't have any Sponers `}
+              tableHeadRow={tableHeadRow}
+              data={extractedArray}
+              // total={<Total />}
+              // isLoading={isLoading}
+            />
+            {/* ) } */}
+          </ModalBody>
+          {localStorage?.getItem("role") !== "Maker" && <ModalFooter pt={0}>
+            <Box display={"flex"} justifyContent={"center"} gap={2}>
+                <Button
+                  rounded={"sm"}
+                  size={"xs"}
+                  textTransform={"inherit"}
+                  fontWeight={500}
+                  px={3}
+                  py={2}
+                  onClick={() => {
+                    setActionId(id); // Use the `id` variable from params
+                    onConfirmOpen();
+                  }}
+                  colorScheme="forestGreen"
+                  variant={"solid"}
+                  cursor={"pointer"}
+                >
+                  Approve
+                </Button>
+                <Button
+                  rounded={"sm"}
+                  size={"xs"}
+                  textTransform={"inherit"}
+                  fontWeight={500}
+                  px={3}
+                  py={2}
+                  onClick={() => {
+                    setActionId(id); // Use the `id` variable from params
+                    onRejectOpen();
+                  }}
+                >
+                  Reject
+                </Button>
+            </Box>
+          </ModalFooter>}
+        </ModalContent>
+        <ApprovedExit
+            isOpen={isConfirmOpen}
+            onClose={onConfirmClose}
+            onBigModalClose={onClose}
+            id={investerId}
+        />
+        <RequestRejectModal
+            isOpen={isRejectOpen}
+            onClose={onRejectClose}
+            onBigModalClose={onClose}
+            id={investerId}
+        />
+      </Modal>
+    ); 
+  };
+  
+  export default ViewExit;
+  
\ No newline at end of file
diff --git a/src/Pages/IO_Management/CreateIO/Investors.jsx b/src/Pages/IO_Management/CreateIO/Investors.jsx
index b30466a..36f0955 100644
--- a/src/Pages/IO_Management/CreateIO/Investors.jsx
+++ b/src/Pages/IO_Management/CreateIO/Investors.jsx
@@ -100,7 +100,7 @@ const Investors = ({ data }) => {
     0
   );
 
-  // Table setup
+  // Table setup 
   const tableHeadRow = [
     "Client ID",
     "First name",
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/AmountInvested.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/AmountInvested.jsx
index 7025d12..02d7af2 100644
--- a/src/Pages/IO_Management/ViewIO/HeaderModal/AmountInvested.jsx
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/AmountInvested.jsx
@@ -46,7 +46,7 @@ const AmountInvested = ({ isOpen, onClose }) => {
   const toast = useToast();
   const id = params?.id;
   const {
-    control,
+    control, 
     register,
     handleSubmit,
     reset,
@@ -114,7 +114,7 @@ const AmountInvested = ({ isOpen, onClose }) => {
 
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
-      <ModalOverlay />
+      <ModalOverlay /> 
       <ModalContent>
         <ModalHeader fontSize={"md"}>Amount Invested</ModalHeader>
         <ModalCloseButton />
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
index c2f5e49..cb3a6d1 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
@@ -54,7 +54,7 @@ const ViewIOdata = () => {
   const tabs = [
     { label: "IO Details", content: <ViewIOdetails data={data?.data} /> },
     {
-      label: "Investment documents",
+      label: "Investment documents", 
       content: <InvestmentDocument data={data?.data} />,
     },
     { label: "Key merits", content: <KeyMerits data={data?.data} /> },
@@ -103,10 +103,21 @@ const ViewIOdata = () => {
                   index === 1 ||
                   index === 2 ||
                   index === 3 ||
-                  index === 4
+                  index === 4 ||
+                  index === 8
                     ? false
                     : !IODetails?.isInvestedAmount
                 }
+                
+                // isDisabled={
+                //   index === 0 ||
+                //   index === 1 ||
+                //   index === 2 ||
+                //   index === 3 ||
+                //   index === 4
+                //     ? false
+                //     : !IODetails?.isInvestedAmount
+                // }
                 key={index}
                 fontSize={"xs"}
                 _selected={{
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
index 05f57dd..9772dd0 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
@@ -120,11 +120,11 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
        const res = await updateTransaction(id)
        
        if (res?.data) {
-         toast({
-           render: () => (
-            <ToastBox status={"success"} message={res?.data?.message} />
-           ),
-         });
+        //  toast({
+        //    render: () => (
+        //     <ToastBox status={"success"} message={res?.data?.message} />
+        //    ),
+        //  });
         //  setIsLoading(false);
         onDistInvestorOpen()
  
@@ -147,13 +147,40 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
        const res = await updateTransaction(id)
        
        if (res?.data) {
+        //  toast({
+        //    render: () => (
+        //     <ToastBox status={"success"} message={res?.data?.message} />
+        //    ),
+        //  });
+        //  setIsLoading(false);
+        onExitOpen()
+ 
+       } else if (res?.error) {
          toast({
            render: () => (
-            <ToastBox status={"success"} message={res?.data?.message} />
+             <ToastBox status={"error"} message={res?.error?.data?.message} />
            ),
          });
         //  setIsLoading(false);
-        onExitOpen()
+       }
+    } catch (error) { 
+     
+    }
+   }
+
+   const handleInvestment = async () =>{
+    
+    try {
+       const res = await updateTransaction(id)
+       
+       if (res?.data) {
+        //  toast({
+        //    render: () => (
+        //     <ToastBox status={"success"} message={res?.data?.message} />
+        //    ),
+        //  });
+        //  setIsLoading(false);
+        onInvestmentOpen()
  
        } else if (res?.error) {
          toast({
@@ -173,7 +200,7 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
     {
       id: 1,
       title: "Amount Invested",
-      onClickFunction: onInvestmentOpen,
+      onClickFunction: handleInvestment,
     },
     // {
     //   id:2,
@@ -505,8 +532,8 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
         alignItems={"start"}
         height={"95px"}
       >
-        <Menu>
-          <MenuButton
+        {localStorage?.getItem("role") === "Maker" && <Menu>
+          <MenuButton 
             className="link p-1 rounded-1 "
             bg={"#fff"}
             _hover={{ backgroundColor: "#fff !important" }}
@@ -537,7 +564,7 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
               </MenuItem>
             ))}
           </MenuList>
-        </Menu>
+        </Menu>}
 
         {/* Modals */}
         <AmountInvested isOpen={isInvestmentOpen} onClose={onInvestmentClose} />
diff --git a/src/Pages/Investor_Management/InvestorDetails/InvestorDetails.jsx b/src/Pages/Investor_Management/InvestorDetails/InvestorDetails.jsx
index 3e50cc9..69abf45 100644
--- a/src/Pages/Investor_Management/InvestorDetails/InvestorDetails.jsx
+++ b/src/Pages/Investor_Management/InvestorDetails/InvestorDetails.jsx
@@ -213,13 +213,14 @@ const InvestorDetails = () => {
         as={'span'}
           fontWeight={"700"}
           textTransform={"none"}
-          color={item.ioStatus ? "gray.500":item.kycStatus ? "blue.500" : "red.500"}
+          color={item?.KYCStatus === true ? "green" : "yellow.500"}
           px={2}
           py={0.5}
           variant={'solid'}
 
         >
-          {item.KYCStatus ? "Completed" : "Not complete"}
+          {/* {item.KYCStatus ? "Completed" : "Not complete"} */}
+          {item?.KYCStatus === true ? "Completed" : "NotCompleted"}
         </Text>
       </Box>
     ),
diff --git a/src/Services/io.service.js b/src/Services/io.service.js
index 79d765d..77db31a 100644
--- a/src/Services/io.service.js
+++ b/src/Services/io.service.js
@@ -225,7 +225,7 @@ export const ioService = createApi({
       invalidatesTags: ["getIOById"],
     }),
 
-    // ======== [ Distribution Transaction ] ========
+    // ======== [ Distribution Transaction ] ======== 
 
     getDistributionInvestor: builder.mutation({
       query: ({ id, data }) => ({
@@ -435,7 +435,7 @@ export const ioService = createApi({
       invalidatesTags: ["getIOById"],
     }),
 
-
+ 
     updateTransaction: builder.mutation({
       query: (id) => ({
         // url: `/io/admin/maker-transaction/${id}/verify-pending-transaction-for-cash-and-nav`,
@@ -540,6 +540,45 @@ export const ioService = createApi({
       invalidatesTags: ["getIOById"],
     }),
 
+    approveInvested: builder.mutation({
+      query: ({id,data}) => ({
+        url: `/io/admin/checker-transaction/approved/amount-invested/${id}`,
+        method: "PATCH",
+        body:data,
+      }),
+
+      invalidatesTags: ["getIOById"],
+    }),
+    
+    approveDistributed: builder.mutation({
+      query: ({id,data}) => ({
+        url: `/io/admin/checker-transaction/approved/distributed-to-investor/${id}`,
+        method: "PATCH",
+        body:data,
+      }),
+
+      invalidatesTags: ["getIOById"],
+    }),
+
+    approveExitTransaction: builder.mutation({
+      query: ({id,data}) => ({
+        url: `/io/admin/checker-transaction/approved/exit/${id}`,
+        method: "PATCH",
+        body:data,
+      }),
+
+      invalidatesTags: ["getIOById"],
+    }),
+
+    approveCancleTransaction: builder.mutation({
+      query: ({id,data}) => ({
+        url: `/io/admin/checker-transaction/approved/cancel/${id}`,
+        method: "PATCH",
+        body:data,
+      }),
+
+      invalidatesTags: ["getIOById"],
+    }),
 
 
     rejectIOCase: builder.mutation({
@@ -634,6 +673,10 @@ export const {
   useSaveIOTransactionMutation,
   useApproveDistributionMutation,
   useExitIOTransactionMutation,
-  useApproveExitMutation
+  useApproveExitMutation,
+  useApproveInvestedMutation,
+  useApproveDistributedMutation,
+  useApproveExitTransactionMutation,
+  useApproveCancleTransactionMutation
 
 } = ioService;