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

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

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


From 95c629533ec4069c1adc130754f5b3a9c23d000f Mon Sep 17 00:00:00 2001
From: "Siddhesh.More" <siddhesh.more@wdimails.com>
Date: Thu, 14 Nov 2024 12:18:54 +0530
Subject: [PATCH 02/49] update

---
 src/Components/Loaders/FullscreenLoaders.jsx | 24 +++++---
 src/Components/Loaders/Loader01.jsx          | 32 +++++++----
 src/Pages/SplashScreen.jsx                   | 60 ++++++++++++--------
 3 files changed, 73 insertions(+), 43 deletions(-)

diff --git a/src/Components/Loaders/FullscreenLoaders.jsx b/src/Components/Loaders/FullscreenLoaders.jsx
index a821ce3..4f2348a 100644
--- a/src/Components/Loaders/FullscreenLoaders.jsx
+++ b/src/Components/Loaders/FullscreenLoaders.jsx
@@ -1,18 +1,19 @@
 import { Box, Spinner, Text } from "@chakra-ui/react";
 import React from "react";
-import './FullscreenLoaders.css'
+import "./FullscreenLoaders.css";
 
-const FullscreenLoaders = ({height}) => {
+const FullscreenLoaders = ({ height }) => {
   return (
     <Box
       display={"flex"}
       justifyContent={"center"}
-      flexDirection={'column'}
+      flexDirection={"column"}
       alignItems={"center"}
       w={"100%"}
-      h={height ? height: "100vh"}
+      h={height ? height : "100vh"}
       gap={4}
-    ><div className="dot-spinner">
+    >
+      {/* <div className="dot-spinner">
     <div className="dot-spinner__dot"></div>
     <div className="dot-spinner__dot"></div>
     <div className="dot-spinner__dot"></div>
@@ -21,8 +22,17 @@ const FullscreenLoaders = ({height}) => {
     <div className="dot-spinner__dot"></div>
     <div className="dot-spinner__dot"></div>
     <div className="dot-spinner__dot"></div>
-</div>
-  {/* <Text color='#004717' fontSize={'md'} fontWeight={500}>Loading...</Text> */}
+</div> */}
+      {/* <Text color='#004717' fontSize={'md'} fontWeight={500}>Loading...</Text> */}
+      {/* <div className="spinner-grow" style={{backgroundColor:"#004118"}} role="status" /> */}
+
+      <Spinner
+        thickness="4px"
+        speed="0.65s"
+        emptyColor="#fff"
+        color="#004118"
+        size="lg"
+      />
     </Box>
   );
 };
diff --git a/src/Components/Loaders/Loader01.jsx b/src/Components/Loaders/Loader01.jsx
index d730e32..1ca3a81 100644
--- a/src/Components/Loaders/Loader01.jsx
+++ b/src/Components/Loaders/Loader01.jsx
@@ -1,19 +1,29 @@
 import React from "react";
-import './FullscreenLoaders.css'
+import "./FullscreenLoaders.css";
+import { Spinner } from "@chakra-ui/react";
 
 const Loader01 = () => {
   return (
+    // <div className="dot-spinner">
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    // </div>
 
-    <div className="dot-spinner">
-      <div className="dot-spinner__dot"></div>
-      <div className="dot-spinner__dot"></div>
-      <div className="dot-spinner__dot"></div>
-      <div className="dot-spinner__dot"></div>
-      <div className="dot-spinner__dot"></div>
-      <div className="dot-spinner__dot"></div>
-      <div className="dot-spinner__dot"></div>
-      <div className="dot-spinner__dot"></div>
-    </div>
+    // {/* <div className="spinner-grow" style={{backgroundColor:"#004118"}} role="status" /> */}
+
+    <Spinner
+      thickness="4px"
+      speed="0.65s"
+      emptyColor="#fff"
+      color="#004118"
+      size="lg"
+    />
   );
 };
 
diff --git a/src/Pages/SplashScreen.jsx b/src/Pages/SplashScreen.jsx
index a975efa..47f0bc6 100644
--- a/src/Pages/SplashScreen.jsx
+++ b/src/Pages/SplashScreen.jsx
@@ -1,31 +1,41 @@
-import { Box, Image, Spinner, Text } from '@chakra-ui/react'
-import React from 'react'
-import logo from '../assets/logo2.png'
+import { Box, Image, Spinner, Text } from "@chakra-ui/react";
+import React from "react";
+import logo from "../assets/logo2.png";
 
 const SplashScreen = () => {
   return (
     <Box
-    h={'100vh'}
-    display={'flex'}
-    justifyContent={'center'}
-    alignItems={'center'}
-    flexDirection={'column'}
-    gap={10}
+      h={"100vh"}
+      display={"flex"}
+      justifyContent={"center"}
+      alignItems={"center"}
+      flexDirection={"column"}
+      gap={10}
     >
-        <Image src={logo} />
-        {/* <Spinner color='green.900' size='md' /> */}
-        <div className="dot-spinner">
-    <div className="dot-spinner__dot"></div>
-    <div className="dot-spinner__dot"></div>
-    <div className="dot-spinner__dot"></div>
-    <div className="dot-spinner__dot"></div>
-    <div className="dot-spinner__dot"></div>
-    <div className="dot-spinner__dot"></div>
-    <div className="dot-spinner__dot"></div>
-    <div className="dot-spinner__dot"></div>
-</div>
-    </Box>
-  )
-}
+      <Image src={logo} />
 
-export default SplashScreen
\ No newline at end of file
+      {/* <div className="spinner-grow" style={{backgroundColor:"#004118"}} role="status" /> */}
+      {/* <Spinner color='green.900' size='md' /> */}
+      {/* <div className="dot-spinner">
+    <div className="dot-spinner__dot"></div>
+    <div className="dot-spinner__dot"></div>
+    <div className="dot-spinner__dot"></div>
+    <div className="dot-spinner__dot"></div>
+    <div className="dot-spinner__dot"></div>
+    <div className="dot-spinner__dot"></div>
+    <div className="dot-spinner__dot"></div>
+    <div className="dot-spinner__dot"></div>
+</div> */}
+
+      <Spinner
+        thickness="4px"
+        speed="0.65s"
+        emptyColor="#fff"
+        color="#004118"
+        size="lg"
+      />
+    </Box>
+  );
+};
+
+export default SplashScreen;
-- 
2.34.1


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

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

diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/AddApproved.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/AddApproved.jsx
index 17bddef..5685ce1 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/AddApproved.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/AddApproved.jsx
@@ -1,254 +1,251 @@
 import {
-    Box,
-    Button,
-    Drawer,
-    DrawerBody,
-    DrawerCloseButton,
-    DrawerContent,
-    DrawerFooter,
-    DrawerHeader,
-    DrawerOverlay,
-    FormControl,
-    FormErrorMessage,
-    FormLabel,
-    Input,
-    Select,
-    Stack,
-    Textarea,
-    useToast,
-  } from "@chakra-ui/react";
-  import * as yup from "yup";
-  import React, { useState, useEffect, useContext } from "react";
-  import { useForm, Controller } from "react-hook-form";
-  import { yupResolver } from "@hookform/resolvers/yup";
-  import { v4 as uuidv4 } from "uuid";
-//   import { useCreateIoCashMutation, useCreateVideoArtifactsMutation, useUpdateVideoArtifactsMutation } from "../../../Services/io.service";
-  import { useParams } from "react-router-dom";
+  Box,
+  Button,
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  Input,
+  Select,
+  Stack,
+  Textarea,
+  useToast,
+} from "@chakra-ui/react";
+import * as yup from "yup";
+import React, { useState, useEffect, useContext } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { v4 as uuidv4 } from "uuid";
+import { useParams } from "react-router-dom";
 import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+import { useCreateIoCashMutation, useCreateVideoArtifactsMutation, useUpdateVideoArtifactsMutation } from "../../../../Services/io.service";
 import ToastBox from "../../../../Components/ToastBox";
 import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
 import CurrencyInput from "../../../../Components/CurrencyInput";
-  
-  const cashDetails = yup.object().shape({
-    transactionDate: yup.string().required("Date is required"),
-    ioTransType_xid: yup.number().required("Cash transaction is required"),
-    transactionAmount: yup.number().required("Transaction Amount is required"),
-    comments: yup.string().notRequired(),
+
+const cashDetails = yup.object().shape({
+  transactionDate: yup.string().required("Date is required"),
+  ioTransType_xid: yup.number().required("Cash transaction is required"),
+  transactionAmount: yup.number().required("Transaction Amount is required"),
+  comments: yup.string().notRequired(),
+});
+
+const AddApproved = ({ isOpen, onClose, firstField, actionId, setActionId, data }) => {
+  const params = useParams() 
+  const id = params?.id
+  const [file, setFile] = useState("");
+  const [fileName, setFileName] = useState("");
+  const [isLoading, setIsLoading] = useState(false)
+  const [alert, setAlert] = useState(false);
+  const toast = useToast();
+
+
+
+  // ======================[ Cotext Api ]
+  const { IODetails } = useContext(GlobalStateContext);
+  const found = data?.find((item) => item?.id === actionId);
+
+
+  const [createArtifactsVideo] = useCreateVideoArtifactsMutation()
+  const [updateVideoArtifacts] = useUpdateVideoArtifactsMutation()
+  // const {
+  //   data
+  // } = useGetArtifactsQuery(id) 
+
+  const {
+    control,
+    handleSubmit,
+    watch,
+    reset,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(cashDetails),
   });
-  
-  const AddApproved = ({ isOpen, onClose, firstField, actionId, setActionId, data }) => {
-    const params = useParams() 
-    const id = params?.id
-    const [file, setFile] = useState("");
-    const [fileName, setFileName] = useState("");
-    const [isLoading, setIsLoading] = useState(false)
-    const [alert, setAlert] = useState(false);
-    const toast = useToast();
-  
-  
-  
-    // ======================[ Cotext Api ]
-    const { IODetails } = useContext(GlobalStateContext);
-    const found = data?.find((item) => item?.id === actionId);
-  
-  
-    // const [createArtifactsVideo] = useCreateVideoArtifactsMutation()
-    // const [updateVideoArtifacts] = useUpdateVideoArtifactsMutation()
-    // const {
-    //   data
-    // } = useGetArtifactsQuery(id)
-  
-    const {
-      control,
-      handleSubmit,
-      watch,
-      reset,
-      formState: { errors },
-    } = useForm({
-      resolver: yupResolver(cashDetails),
-    });
-  
-  
-    // const [createIoCash] = useCreateIoCashMutation()
-  
-  
-    const onSubmit = async (data) => {
-  
-      setIsLoading(true)
-  
-      try {
-  
-        const res = await createIoCash({ data, id })
-        if (res?.data?.statusCode === 200) {
-          setIsLoading(false);
-          toast({
-            render: () => <ToastBox message={res?.data?.message} />,
-          });
-          handleClose()
-        }else if(res?.error?.status === 400){
-          setIsLoading(false);
-          toast({
-            render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
-          });
-        }
-  
-  
-      } catch (error) {
-        console.log(error);
-  
+
+
+  const [createIoCash] = useCreateIoCashMutation()
+
+
+  const onSubmit = async (data) => {
+
+    setIsLoading(true)
+
+    try {
+
+      const res = await createIoCash({ data, id })
+      if (res?.data?.statusCode === 200) {
+        setIsLoading(false);
+        toast({
+          render: () => <ToastBox message={res?.data?.message} />,
+        });
+        handleClose()
+      }else if(res?.error?.status === 400){
+        setIsLoading(false);
+        toast({
+          render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
+        });
       }
-  
-    };
-  
-  
-  
-    const handleConfirm = () => {
-      handleSubmit(onSubmit)();
-    };
-  
-    const handleSave = () => {
-      handleSubmit(onSubmit)();
-    };
-  
-    const handleClose = () => {
-      setAlert(false)
-      onClose()
-      reset({
-        transactionAmount:""
-      })
+
+    } catch (error) {
+      console.log(error);
     }
-  
-    return (
-      <>
-        <Drawer
-          size={"md"}
-          isOpen={isOpen}
-          placement="right"
-          initialFocusRef={firstField}
-          onClose={handleClose}
-        >
-          <DrawerOverlay />
-          <DrawerContent>
-            <DrawerCloseButton />
-            <DrawerHeader fontSize={"sm"}>IO Cash Details</DrawerHeader>
-  
-            <DrawerBody>
-              <Stack spacing={4}>
-                <FormControl isInvalid={errors.transactionDate} isRequired> 
-                  <FormLabel fontSize={"sm"}>Date Selection</FormLabel>
-                  <Controller
-                    name="transactionDate"
-                    control={control}
-                    render={({ field }) => (
-                      <Input 
-                      focusBorderColor="forestGreen.300" {...field} fontSize={"sm"} type="date" size={"sm"} />
-                    )}
-                  />
-                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
-                    {errors.transactionDate?.message}
-                  </FormErrorMessage>
-                </FormControl>
-  
-  
-                <FormControl isInvalid={errors.ioTransType_xid} isRequired>
-                  <FormLabel fontSize={"sm"}>Cash transaction</FormLabel>
-                  <Controller
-                    name="ioTransType_xid"
-                    control={control}
-                    render={({ field }) => (
-                      <Select
-                        {...field}
-                        placeholder="Select an option"
-                        fontSize={"sm"}
-                        size={"sm"}
-                        focusBorderColor="forestGreen.300"
-                      >
-                        {IODetails?.ioCashTransaction?.map(({ id, transactionName }) => (
-                          <option key={id} value={id}>
-                            {transactionName}
-                          </option>
-                        ))}
-                      </Select>
-                    )}
-                  />
-                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
-                    {errors.ioTransType_xid?.message}
-                  </FormErrorMessage>
-                </FormControl>
-  
-  
-  
-  
-                <FormControl isInvalid={errors.transactionAmount} isRequired>
-                  <FormLabel fontSize={"sm"}>Amount</FormLabel>
-                  <Controller
-                    name="transactionAmount"
-                    control={control}
-                    render={({ field }) => (
-                      <CurrencyInput {...field} textAlign={'right'} fontSize={"sm"} type="number" size={"sm"} />
-                    )}
-                  />
-                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
-                    {errors.transactionAmount?.message}
-                  </FormErrorMessage>
-                </FormControl>
-  
-  
-  
-                <FormControl isInvalid={errors.comments}>
-                  <FormLabel fontSize={"sm"}>Comments</FormLabel>
-                  <Controller
-                    name="comments"
-                    control={control}
-                    render={({ field }) => (
-                      <Textarea {...field} textAlign={'left'} 
-                      focusBorderColor="forestGreen.300" fontSize={"sm"} type="text" size={"sm"} />
-                    )}
-                  />
-                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
-                    {errors.comments?.message}
-                  </FormErrorMessage>
-                </FormControl>
-  
-              </Stack>
-            </DrawerBody>
-  
-            <DrawerFooter>
-              <Button
-                variant="outline"
-                colorScheme={"forestGreen"}
-                rounded={"sm"}
-                size={"sm"}
-                mr={3}
-                onClick={handleClose}
-              >
-                Cancel
-              </Button>
-  
-              <Button
-                colorScheme={"forestGreen"}
-                rounded={"sm"}
-                size={"sm"}
-  
-                onClick={() => setAlert(true)}
-              >
-                Save
-              </Button>
-            </DrawerFooter>
-          </DrawerContent>
-        </Drawer>
-  
-  
-        <CustomAlertDialog
-          isOpen={alert}
-          onClose={() => setAlert(false)}
-          alertHandler={handleSave}
-          message={"Are you sure you want to add cash details?"}
-          isLoading={isLoading}
-        />
-      </>
-    );
+
   };
-  
-  export default AddApproved;
-  
\ No newline at end of file
+
+
+
+  const handleConfirm = () => {
+    handleSubmit(onSubmit)();
+  };
+
+  const handleSave = () => {
+    handleSubmit(onSubmit)();
+  };
+
+  const handleClose = () => {
+    setAlert(false)
+    onClose()
+    reset({
+      transactionAmount:""
+    })
+  }
+
+  return (
+    <>
+      <Drawer
+        size={"md"}
+        isOpen={isOpen}
+        placement="right"
+        initialFocusRef={firstField}
+        onClose={handleClose}
+      >
+        <DrawerOverlay />
+        <DrawerContent>
+          <DrawerCloseButton />
+          <DrawerHeader fontSize={"sm"}>IO Cash Details</DrawerHeader>
+
+          <DrawerBody>
+            <Stack spacing={4}>
+              <FormControl isInvalid={errors.transactionDate} isRequired> 
+                <FormLabel fontSize={"sm"}>Date Selection</FormLabel>
+                <Controller
+                  name="transactionDate"
+                  control={control}
+                  render={({ field }) => (
+                    <Input 
+                    focusBorderColor="forestGreen.300" {...field} fontSize={"sm"} type="date" size={"sm"} />
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.transactionDate?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+
+              <FormControl isInvalid={errors.ioTransType_xid} isRequired>
+                <FormLabel fontSize={"sm"}>Cash transaction</FormLabel>
+                <Controller
+                  name="ioTransType_xid"
+                  control={control}
+                  render={({ field }) => (
+                    <Select
+                      {...field}
+                      placeholder="Select an option"
+                      fontSize={"sm"}
+                      size={"sm"}
+                      focusBorderColor="forestGreen.300"
+                    >
+                      {IODetails?.ioCashTransaction?.map(({ id, transactionName }) => (
+                        <option key={id} value={id}>
+                          {transactionName}
+                        </option>
+                      ))}
+                    </Select>
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.ioTransType_xid?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+
+
+
+              <FormControl isInvalid={errors.transactionAmount} isRequired>
+                <FormLabel fontSize={"sm"}>Transaction Amount</FormLabel>
+                <Controller
+                  name="transactionAmount"
+                  control={control}
+                  render={({ field }) => (
+                    <CurrencyInput {...field} textAlign={'right'} fontSize={"sm"} type="number" size={"sm"} />
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.transactionAmount?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+
+
+              <FormControl isInvalid={errors.comments}>
+                <FormLabel fontSize={"sm"}>Comments</FormLabel>
+                <Controller
+                  name="comments"
+                  control={control}
+                  render={({ field }) => (
+                    <Textarea {...field} textAlign={'left'} 
+                    focusBorderColor="forestGreen.300" fontSize={"sm"} type="text" size={"sm"} />
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.comments?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+            </Stack>
+          </DrawerBody>
+
+          <DrawerFooter>
+            <Button
+              variant="outline"
+              colorScheme={"forestGreen"}
+              rounded={"sm"}
+              size={"sm"}
+              mr={3}
+              onClick={handleClose}
+            >
+              Cancel
+            </Button>
+
+            <Button
+              colorScheme={"forestGreen"}
+              rounded={"sm"}
+              size={"sm"}
+
+              onClick={() => setAlert(true)}
+            >
+              Save
+            </Button>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+
+
+      <CustomAlertDialog
+        isOpen={alert}
+        onClose={() => setAlert(false)}
+        alertHandler={handleSave}
+        message={"Are you sure you want to add cash details?"}
+        isLoading={isLoading}
+      />
+    </>
+  );
+};
+
+export default AddApproved;
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/AddPending.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/AddPending.jsx
index 941c592..7209f35 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/AddPending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/AddPending.jsx
@@ -1,254 +1,251 @@
 import {
-    Box,
-    Button,
-    Drawer,
-    DrawerBody,
-    DrawerCloseButton,
-    DrawerContent,
-    DrawerFooter,
-    DrawerHeader,
-    DrawerOverlay,
-    FormControl,
-    FormErrorMessage,
-    FormLabel,
-    Input,
-    Select,
-    Stack,
-    Textarea,
-    useToast,
-  } from "@chakra-ui/react";
-  import * as yup from "yup";
-  import React, { useState, useEffect, useContext } from "react";
-  import { useForm, Controller } from "react-hook-form";
-  import { yupResolver } from "@hookform/resolvers/yup";
-  import { v4 as uuidv4 } from "uuid";
-//   import { useCreateIoCashMutation, useCreateVideoArtifactsMutation, useUpdateVideoArtifactsMutation } from "../../../Services/io.service";
-  import { useParams } from "react-router-dom";
+  Box,
+  Button,
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  Input,
+  Select,
+  Stack,
+  Textarea,
+  useToast,
+} from "@chakra-ui/react";
+import * as yup from "yup";
+import React, { useState, useEffect, useContext } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { v4 as uuidv4 } from "uuid";
+import { useParams } from "react-router-dom";
 import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+import { useCreateIoCashMutation, useCreateVideoArtifactsMutation, useUpdateVideoArtifactsMutation } from "../../../../Services/io.service";
 import ToastBox from "../../../../Components/ToastBox";
 import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
 import CurrencyInput from "../../../../Components/CurrencyInput";
-  
-  const cashDetails = yup.object().shape({
-    transactionDate: yup.string().required("Date is required"),
-    ioTransType_xid: yup.number().required("Cash transaction is required"),
-    transactionAmount: yup.number().required("Transaction Amount is required"),
-    comments: yup.string().notRequired(),
+
+const cashDetails = yup.object().shape({
+  transactionDate: yup.string().required("Date is required"),
+  ioTransType_xid: yup.number().required("Cash transaction is required"),
+  transactionAmount: yup.number().required("Transaction Amount is required"),
+  comments: yup.string().notRequired(),
+});
+
+const AddPending = ({ isOpen, onClose, firstField, actionId, setActionId, data }) => {
+  const params = useParams() 
+  const id = params?.id
+  const [file, setFile] = useState("");
+  const [fileName, setFileName] = useState("");
+  const [isLoading, setIsLoading] = useState(false)
+  const [alert, setAlert] = useState(false);
+  const toast = useToast();
+
+
+
+  // ======================[ Cotext Api ]
+  const { IODetails } = useContext(GlobalStateContext);
+  const found = data?.find((item) => item?.id === actionId);
+
+
+  const [createArtifactsVideo] = useCreateVideoArtifactsMutation()
+  const [updateVideoArtifacts] = useUpdateVideoArtifactsMutation()
+  // const {
+  //   data
+  // } = useGetArtifactsQuery(id) 
+
+  const {
+    control,
+    handleSubmit,
+    watch,
+    reset,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(cashDetails),
   });
-  
-  const AddPending = ({ isOpen, onClose, firstField, actionId, setActionId, data }) => {
-    const params = useParams() 
-    const id = params?.id
-    const [file, setFile] = useState("");
-    const [fileName, setFileName] = useState("");
-    const [isLoading, setIsLoading] = useState(false)
-    const [alert, setAlert] = useState(false);
-    const toast = useToast();
-  
-  
-  
-    // ======================[ Cotext Api ]
-    const { IODetails } = useContext(GlobalStateContext);
-    const found = data?.find((item) => item?.id === actionId);
-  
-  
-    // const [createArtifactsVideo] = useCreateVideoArtifactsMutation()
-    // const [updateVideoArtifacts] = useUpdateVideoArtifactsMutation()
-    // const {
-    //   data
-    // } = useGetArtifactsQuery(id)
-  
-    const {
-      control,
-      handleSubmit,
-      watch,
-      reset,
-      formState: { errors },
-    } = useForm({
-      resolver: yupResolver(cashDetails),
-    });
-  
-  
-    // const [createIoCash] = useCreateIoCashMutation()
-  
-  
-    const onSubmit = async (data) => {
-  
-      setIsLoading(true)
-  
-      try {
-  
-        const res = await createIoCash({ data, id })
-        if (res?.data?.statusCode === 200) {
-          setIsLoading(false);
-          toast({
-            render: () => <ToastBox message={res?.data?.message} />,
-          });
-          handleClose()
-        }else if(res?.error?.status === 400){
-          setIsLoading(false);
-          toast({
-            render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
-          });
-        }
-  
-  
-      } catch (error) {
-        console.log(error);
-  
+
+
+  const [createIoCash] = useCreateIoCashMutation()
+
+
+  const onSubmit = async (data) => {
+
+    setIsLoading(true)
+
+    try {
+
+      const res = await createIoCash({ data, id })
+      if (res?.data?.statusCode === 200) {
+        setIsLoading(false);
+        toast({
+          render: () => <ToastBox message={res?.data?.message} />,
+        });
+        handleClose()
+      }else if(res?.error?.status === 400){
+        setIsLoading(false);
+        toast({
+          render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
+        });
       }
-  
-    };
-  
-  
-  
-    const handleConfirm = () => {
-      handleSubmit(onSubmit)();
-    };
-  
-    const handleSave = () => {
-      handleSubmit(onSubmit)();
-    };
-  
-    const handleClose = () => {
-      setAlert(false)
-      onClose()
-      reset({
-        transactionAmount:""
-      })
+
+    } catch (error) {
+      console.log(error);
     }
-  
-    return (
-      <>
-        <Drawer
-          size={"md"}
-          isOpen={isOpen}
-          placement="right"
-          initialFocusRef={firstField}
-          onClose={handleClose}
-        >
-          <DrawerOverlay />
-          <DrawerContent>
-            <DrawerCloseButton />
-            <DrawerHeader fontSize={"sm"}>IO Cash Details</DrawerHeader>
-  
-            <DrawerBody>
-              <Stack spacing={4}>
-                <FormControl isInvalid={errors.transactionDate} isRequired> 
-                  <FormLabel fontSize={"sm"}>Date Selection</FormLabel>
-                  <Controller
-                    name="transactionDate"
-                    control={control}
-                    render={({ field }) => (
-                      <Input 
-                      focusBorderColor="forestGreen.300" {...field} fontSize={"sm"} type="date" size={"sm"} />
-                    )}
-                  />
-                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
-                    {errors.transactionDate?.message}
-                  </FormErrorMessage>
-                </FormControl>
-  
-  
-                <FormControl isInvalid={errors.ioTransType_xid} isRequired>
-                  <FormLabel fontSize={"sm"}>Cash transaction</FormLabel>
-                  <Controller
-                    name="ioTransType_xid"
-                    control={control}
-                    render={({ field }) => (
-                      <Select
-                        {...field}
-                        placeholder="Select an option"
-                        fontSize={"sm"}
-                        size={"sm"}
-                        focusBorderColor="forestGreen.300"
-                      >
-                        {IODetails?.ioCashTransaction?.map(({ id, transactionName }) => (
-                          <option key={id} value={id}>
-                            {transactionName}
-                          </option>
-                        ))}
-                      </Select>
-                    )}
-                  />
-                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
-                    {errors.ioTransType_xid?.message}
-                  </FormErrorMessage>
-                </FormControl>
-  
-  
-  
-  
-                <FormControl isInvalid={errors.transactionAmount} isRequired>
-                  <FormLabel fontSize={"sm"}>Amount</FormLabel>
-                  <Controller
-                    name="transactionAmount"
-                    control={control}
-                    render={({ field }) => (
-                      <CurrencyInput {...field} textAlign={'right'} fontSize={"sm"} type="number" size={"sm"} />
-                    )}
-                  />
-                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
-                    {errors.transactionAmount?.message}
-                  </FormErrorMessage>
-                </FormControl>
-  
-  
-  
-                <FormControl isInvalid={errors.comments}>
-                  <FormLabel fontSize={"sm"}>Comments</FormLabel>
-                  <Controller
-                    name="comments"
-                    control={control}
-                    render={({ field }) => (
-                      <Textarea {...field} textAlign={'left'} 
-                      focusBorderColor="forestGreen.300" fontSize={"sm"} type="text" size={"sm"} />
-                    )}
-                  />
-                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
-                    {errors.comments?.message}
-                  </FormErrorMessage>
-                </FormControl>
-  
-              </Stack>
-            </DrawerBody>
-  
-            <DrawerFooter>
-              <Button
-                variant="outline"
-                colorScheme={"forestGreen"}
-                rounded={"sm"}
-                size={"sm"}
-                mr={3}
-                onClick={handleClose}
-              >
-                Cancel
-              </Button>
-  
-              <Button
-                colorScheme={"forestGreen"}
-                rounded={"sm"}
-                size={"sm"}
-  
-                onClick={() => setAlert(true)}
-              >
-                Save
-              </Button>
-            </DrawerFooter>
-          </DrawerContent>
-        </Drawer>
-  
-  
-        <CustomAlertDialog
-          isOpen={alert}
-          onClose={() => setAlert(false)}
-          alertHandler={handleSave}
-          message={"Are you sure you want to add cash details?"}
-          isLoading={isLoading}
-        />
-      </>
-    );
+
   };
-  
-  export default AddPending;
-  
\ No newline at end of file
+
+
+
+  const handleConfirm = () => {
+    handleSubmit(onSubmit)();
+  };
+
+  const handleSave = () => {
+    handleSubmit(onSubmit)();
+  };
+
+  const handleClose = () => {
+    setAlert(false)
+    onClose()
+    reset({
+      transactionAmount:""
+    })
+  }
+
+  return (
+    <>
+      <Drawer
+        size={"md"}
+        isOpen={isOpen}
+        placement="right"
+        initialFocusRef={firstField}
+        onClose={handleClose}
+      >
+        <DrawerOverlay />
+        <DrawerContent>
+          <DrawerCloseButton />
+          <DrawerHeader fontSize={"sm"}>IO Cash Details</DrawerHeader>
+
+          <DrawerBody>
+            <Stack spacing={4}>
+              <FormControl isInvalid={errors.transactionDate} isRequired> 
+                <FormLabel fontSize={"sm"}>Date Selection</FormLabel>
+                <Controller
+                  name="transactionDate"
+                  control={control}
+                  render={({ field }) => (
+                    <Input 
+                    focusBorderColor="forestGreen.300" {...field} fontSize={"sm"} type="date" size={"sm"} />
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.transactionDate?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+
+              <FormControl isInvalid={errors.ioTransType_xid} isRequired>
+                <FormLabel fontSize={"sm"}>Cash transaction</FormLabel>
+                <Controller
+                  name="ioTransType_xid"
+                  control={control}
+                  render={({ field }) => (
+                    <Select
+                      {...field}
+                      placeholder="Select an option"
+                      fontSize={"sm"}
+                      size={"sm"}
+                      focusBorderColor="forestGreen.300"
+                    >
+                      {IODetails?.ioCashTransaction?.map(({ id, transactionName }) => (
+                        <option key={id} value={id}>
+                          {transactionName}
+                        </option>
+                      ))}
+                    </Select>
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.ioTransType_xid?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+
+
+
+              <FormControl isInvalid={errors.transactionAmount} isRequired>
+                <FormLabel fontSize={"sm"}>Transaction Amount</FormLabel>
+                <Controller
+                  name="transactionAmount"
+                  control={control}
+                  render={({ field }) => (
+                    <CurrencyInput {...field} textAlign={'right'} fontSize={"sm"} type="number" size={"sm"} />
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.transactionAmount?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+
+
+              <FormControl isInvalid={errors.comments}>
+                <FormLabel fontSize={"sm"}>Comments</FormLabel>
+                <Controller
+                  name="comments"
+                  control={control}
+                  render={({ field }) => (
+                    <Textarea {...field} textAlign={'left'} 
+                    focusBorderColor="forestGreen.300" fontSize={"sm"} type="text" size={"sm"} />
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.comments?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+            </Stack>
+          </DrawerBody>
+
+          <DrawerFooter>
+            <Button
+              variant="outline"
+              colorScheme={"forestGreen"}
+              rounded={"sm"}
+              size={"sm"}
+              mr={3}
+              onClick={handleClose}
+            >
+              Cancel
+            </Button>
+
+            <Button
+              colorScheme={"forestGreen"}
+              rounded={"sm"}
+              size={"sm"}
+
+              onClick={() => setAlert(true)}
+            >
+              Save
+            </Button>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+
+
+      <CustomAlertDialog
+        isOpen={alert}
+        onClose={() => setAlert(false)}
+        alertHandler={handleSave}
+        message={"Are you sure you want to add cash details?"}
+        isLoading={isLoading}
+      />
+    </>
+  );
+};
+
+export default AddPending;
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/AddRejected.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/AddRejected.jsx
index b00639f..197df0c 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/AddRejected.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/AddRejected.jsx
@@ -1,249 +1,251 @@
 import {
-    Box,
-    Button,
-    Drawer,
-    DrawerBody,
-    DrawerCloseButton,
-    DrawerContent,
-    DrawerFooter,
-    DrawerHeader,
-    DrawerOverlay,
-    FormControl,
-    FormErrorMessage,
-    FormLabel,
-    Input,
-    Select,
-    Stack,
-    Textarea,
-    useToast,
-  } from "@chakra-ui/react";
-  import * as yup from "yup";
-  import React, { useState, useEffect, useContext } from "react";
-  import { useForm, Controller } from "react-hook-form";
-  import { yupResolver } from "@hookform/resolvers/yup";
-  import { v4 as uuidv4 } from "uuid";
-//   import { useCreateIoCashMutation, useCreateVideoArtifactsMutation, useUpdateVideoArtifactsMutation } from "../../../Services/io.service";
-  import { useParams } from "react-router-dom";
+  Box,
+  Button,
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  Input,
+  Select,
+  Stack,
+  Textarea,
+  useToast,
+} from "@chakra-ui/react";
+import * as yup from "yup";
+import React, { useState, useEffect, useContext } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { v4 as uuidv4 } from "uuid";
+import { useParams } from "react-router-dom";
 import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+import { useCreateIoCashMutation, useCreateVideoArtifactsMutation, useUpdateVideoArtifactsMutation } from "../../../../Services/io.service";
 import ToastBox from "../../../../Components/ToastBox";
 import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
 import CurrencyInput from "../../../../Components/CurrencyInput";
-  
-  const cashDetails = yup.object().shape({
-    transactionDate: yup.string().required("Date is required"),
-    ioTransType_xid: yup.number().required("Cash transaction is required"),
-    transactionAmount: yup.number().required("Transaction Amount is required"),
-    comments: yup.string().notRequired(),
+
+const cashDetails = yup.object().shape({
+  transactionDate: yup.string().required("Date is required"),
+  ioTransType_xid: yup.number().required("Cash transaction is required"),
+  transactionAmount: yup.number().required("Transaction Amount is required"),
+  comments: yup.string().notRequired(),
+});
+
+const AddRejected = ({ isOpen, onClose, firstField, actionId, setActionId, data }) => {
+  const params = useParams() 
+  const id = params?.id
+  const [file, setFile] = useState("");
+  const [fileName, setFileName] = useState("");
+  const [isLoading, setIsLoading] = useState(false)
+  const [alert, setAlert] = useState(false);
+  const toast = useToast();
+
+
+
+  // ======================[ Cotext Api ]
+  const { IODetails } = useContext(GlobalStateContext);
+  const found = data?.find((item) => item?.id === actionId);
+
+
+  const [createArtifactsVideo] = useCreateVideoArtifactsMutation()
+  const [updateVideoArtifacts] = useUpdateVideoArtifactsMutation()
+  // const {
+  //   data
+  // } = useGetArtifactsQuery(id) 
+
+  const {
+    control,
+    handleSubmit,
+    watch,
+    reset,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(cashDetails),
   });
-  
-  const AddRejected = ({ isOpen, onClose, firstField, actionId, setActionId, data }) => {
-    const params = useParams() 
-    const id = params?.id
-    const [file, setFile] = useState("");
-    const [fileName, setFileName] = useState("");
-    const [isLoading, setIsLoading] = useState(false)
-    const [alert, setAlert] = useState(false);
-    const toast = useToast();
-  
-  
-  
-    // ======================[ Cotext Api ]
-    const { IODetails } = useContext(GlobalStateContext);
-    const found = data?.find((item) => item?.id === actionId);
-  
-  
-    // const [createArtifactsVideo] = useCreateVideoArtifactsMutation()
-    // const [updateVideoArtifacts] = useUpdateVideoArtifactsMutation()
-    // const {
-    //   data
-    // } = useGetArtifactsQuery(id)
-  
-    const {
-      control,
-      handleSubmit,
-      watch,
-      reset,
-      formState: { errors },
-    } = useForm({
-      resolver: yupResolver(cashDetails),
-    });
-  
-  
-    // const [createIoCash] = useCreateIoCashMutation()
-  
-  
-    const onSubmit = async (data) => {
-  
-      setIsLoading(true)
-  
-      try {
-  
-        const res = await createIoCash({ data, id })
-        if (res?.data?.statusCode === 200) {
-          setIsLoading(false);
-          toast({
-            render: () => <ToastBox message={res?.data?.message} />,
-          });
-          handleClose()
-        }else if(res?.error?.status === 400){
-          setIsLoading(false);
-          toast({
-            render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
-          });
-        }
-  
-  
-      } catch (error) {
-        console.log(error);
-  
+
+
+  const [createIoCash] = useCreateIoCashMutation()
+
+
+  const onSubmit = async (data) => {
+
+    setIsLoading(true)
+
+    try {
+
+      const res = await createIoCash({ data, id })
+      if (res?.data?.statusCode === 200) {
+        setIsLoading(false);
+        toast({
+          render: () => <ToastBox message={res?.data?.message} />,
+        });
+        handleClose()
+      }else if(res?.error?.status === 400){
+        setIsLoading(false);
+        toast({
+          render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
+        });
       }
-  
-    };
-  
-  
-  
-    const handleConfirm = () => {
-      handleSubmit(onSubmit)();
-    };
-  
-    const handleSave = () => {
-      handleSubmit(onSubmit)();
-    };
-  
-    const handleClose = () => {
-      setAlert(false)
-      onClose()
-      reset({
-        transactionAmount:""
-      })
+
+    } catch (error) {
+      console.log(error);
     }
-  
-    return (
-      <>
-        <Drawer
-          size={"md"}
-          isOpen={isOpen}
-          placement="right"
-          initialFocusRef={firstField}
-          onClose={handleClose}
-        >
-          <DrawerOverlay />
-          <DrawerContent>
-            <DrawerCloseButton />
-            <DrawerHeader fontSize={"sm"}>IO Cash Details</DrawerHeader>
-  
-            <DrawerBody>
-              <Stack spacing={4}>
-                <FormControl isInvalid={errors.transactionDate} isRequired> 
-                  <FormLabel fontSize={"sm"}>Date Selection</FormLabel>
-                  <Controller
-                    name="transactionDate"
-                    control={control}
-                    render={({ field }) => (
-                      <Input 
-                      focusBorderColor="forestGreen.300" {...field} fontSize={"sm"} type="date" size={"sm"} />
-                    )}
-                  />
-                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
-                    {errors.transactionDate?.message}
-                  </FormErrorMessage>
-                </FormControl>
-  
-  
-                <FormControl isInvalid={errors.ioTransType_xid} isRequired>
-                  <FormLabel fontSize={"sm"}>Cash transaction</FormLabel>
-                  <Controller
-                    name="ioTransType_xid"
-                    control={control}
-                    render={({ field }) => (
-                      <Select
-                        {...field}
-                        placeholder="Select an option"
-                        fontSize={"sm"}
-                        size={"sm"}
-                        focusBorderColor="forestGreen.300"
-                      >
-                        {IODetails?.ioCashTransaction?.map(({ id, transactionName }) => (
-                          <option key={id} value={id}>
-                            {transactionName}
-                          </option>
-                        ))}
-                      </Select>
-                    )}
-                  />
-                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
-                    {errors.ioTransType_xid?.message}
-                  </FormErrorMessage>
-                </FormControl>
-  
-                <FormControl isInvalid={errors.transactionAmount} isRequired>
-                  <FormLabel fontSize={"sm"}>Amount</FormLabel>
-                  <Controller
-                    name="transactionAmount"
-                    control={control}
-                    render={({ field }) => (
-                      <CurrencyInput {...field} textAlign={'right'} fontSize={"sm"} type="number" size={"sm"} />
-                    )}
-                  />
-                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
-                    {errors.transactionAmount?.message}
-                  </FormErrorMessage>
-                </FormControl>
-  
-                <FormControl isInvalid={errors.comments}>
-                  <FormLabel fontSize={"sm"}>Comments</FormLabel>
-                  <Controller
-                    name="comments"
-                    control={control}
-                    render={({ field }) => (
-                      <Textarea {...field} textAlign={'left'} 
-                      focusBorderColor="forestGreen.300" fontSize={"sm"} type="text" size={"sm"} />
-                    )}
-                  />
-                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
-                    {errors.comments?.message}
-                  </FormErrorMessage>
-                </FormControl>
-  
-              </Stack>
-            </DrawerBody>
-  
-            <DrawerFooter>
-              <Button
-                variant="outline"
-                colorScheme={"forestGreen"}
-                rounded={"sm"}
-                size={"sm"}
-                mr={3}
-                onClick={handleClose}
-              >
-                Cancel
-              </Button>
-  
-              <Button
-                colorScheme={"forestGreen"}
-                rounded={"sm"}
-                size={"sm"}
-  
-                onClick={() => setAlert(true)}
-              >
-                Save
-              </Button>
-            </DrawerFooter>
-          </DrawerContent>
-        </Drawer>
-  
-  
-        <CustomAlertDialog
-          isOpen={alert}
-          onClose={() => setAlert(false)}
-          alertHandler={handleSave}
-          message={"Are you sure you want to add cash details?"}
-          isLoading={isLoading}
-        />
-      </>
-    );
+
   };
-  
-  export default AddRejected;
-  
\ No newline at end of file
+
+
+
+  const handleConfirm = () => {
+    handleSubmit(onSubmit)();
+  };
+
+  const handleSave = () => {
+    handleSubmit(onSubmit)();
+  };
+
+  const handleClose = () => {
+    setAlert(false)
+    onClose()
+    reset({
+      transactionAmount:""
+    })
+  }
+
+  return (
+    <>
+      <Drawer
+        size={"md"}
+        isOpen={isOpen}
+        placement="right"
+        initialFocusRef={firstField}
+        onClose={handleClose}
+      >
+        <DrawerOverlay />
+        <DrawerContent>
+          <DrawerCloseButton />
+          <DrawerHeader fontSize={"sm"}>IO Cash Details</DrawerHeader>
+
+          <DrawerBody>
+            <Stack spacing={4}>
+              <FormControl isInvalid={errors.transactionDate} isRequired> 
+                <FormLabel fontSize={"sm"}>Date Selection</FormLabel>
+                <Controller
+                  name="transactionDate"
+                  control={control}
+                  render={({ field }) => (
+                    <Input 
+                    focusBorderColor="forestGreen.300" {...field} fontSize={"sm"} type="date" size={"sm"} />
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.transactionDate?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+
+              <FormControl isInvalid={errors.ioTransType_xid} isRequired>
+                <FormLabel fontSize={"sm"}>Cash transaction</FormLabel>
+                <Controller
+                  name="ioTransType_xid"
+                  control={control}
+                  render={({ field }) => (
+                    <Select
+                      {...field}
+                      placeholder="Select an option"
+                      fontSize={"sm"}
+                      size={"sm"}
+                      focusBorderColor="forestGreen.300"
+                    >
+                      {IODetails?.ioCashTransaction?.map(({ id, transactionName }) => (
+                        <option key={id} value={id}>
+                          {transactionName}
+                        </option>
+                      ))}
+                    </Select>
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.ioTransType_xid?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+
+
+
+              <FormControl isInvalid={errors.transactionAmount} isRequired>
+                <FormLabel fontSize={"sm"}>Transaction Amount</FormLabel>
+                <Controller
+                  name="transactionAmount"
+                  control={control}
+                  render={({ field }) => (
+                    <CurrencyInput {...field} textAlign={'right'} fontSize={"sm"} type="number" size={"sm"} />
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.transactionAmount?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+
+
+              <FormControl isInvalid={errors.comments}>
+                <FormLabel fontSize={"sm"}>Comments</FormLabel>
+                <Controller
+                  name="comments"
+                  control={control}
+                  render={({ field }) => (
+                    <Textarea {...field} textAlign={'left'} 
+                    focusBorderColor="forestGreen.300" fontSize={"sm"} type="text" size={"sm"} />
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.comments?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+            </Stack>
+          </DrawerBody>
+
+          <DrawerFooter>
+            <Button
+              variant="outline"
+              colorScheme={"forestGreen"}
+              rounded={"sm"}
+              size={"sm"}
+              mr={3}
+              onClick={handleClose}
+            >
+              Cancel
+            </Button>
+
+            <Button
+              colorScheme={"forestGreen"}
+              rounded={"sm"}
+              size={"sm"}
+
+              onClick={() => setAlert(true)}
+            >
+              Save
+            </Button>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+
+
+      <CustomAlertDialog
+        isOpen={alert}
+        onClose={() => setAlert(false)}
+        alertHandler={handleSave}
+        message={"Are you sure you want to add cash details?"}
+        isLoading={isLoading}
+      />
+    </>
+  );
+};
+
+export default AddRejected;
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx
index 906b4ab..7746881 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx
@@ -27,12 +27,16 @@ import ToastBox from "../../../../Components/ToastBox";
 import AddCashDetails from "../AddCashDetails";
 import { debounce } from "../../../Admin/Contact";
 import AddApproved from "./addApproved";
+import { useUpdateIOCaseMutation } from "../../../../Services/io.service";
+import { useParams } from "react-router-dom";
 
 const formatDate = (date) => new Date(date).toLocaleDateString();
 
 const Approved = () => {
-  const toast = useToast();
   const firstField = useRef();
+  const params = useParams()
+  const toast = useToast();
+  const id = params?.id
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { IODetails, approved, setApproved } =
     useContext(GlobalStateContext);
@@ -73,6 +77,8 @@ const Approved = () => {
     return nameMatches;
   });
 
+  const [updateIOCase] = useUpdateIOCaseMutation()
+
   const tableHeadRow = [
     "Sr No.",
     "Transaction date",
@@ -267,6 +273,31 @@ const Approved = () => {
     );
   };
 
+  const handleAdd = async () =>{
+   try {
+      const res = await updateIOCase(id)
+      if (res?.data) {
+        toast({
+          render: () => (
+            <ToastBox status={"success"} message={res?.data?.message} />
+          ),
+        });
+        setIsLoading(false);
+        onOpen()
+
+      } else if (res?.error) {
+        toast({
+          render: () => (
+            <ToastBox status={"error"} message={res?.error?.data?.message} />
+          ),
+        });
+        setIsLoading(false);
+      }
+   } catch (error) { 
+    
+   }
+  }
+
   return (
     <Box {...OPACITY_ON_LOAD} pb={0}>
       <Box bg="white.500">
@@ -315,7 +346,7 @@ const Approved = () => {
             </Button> */}
             {IODetails?.isInvestedAmount ? (
               <Button
-                onClick={onOpen}
+                onClick={handleAdd}
                 leftIcon={<AddIcon />}
                 colorScheme="forestGreen"
                 size={"sm"}
@@ -341,13 +372,13 @@ const Approved = () => {
         setMouseEntered={setMouseEntered}
       />
 
-      <CustomAlertDialog
+      {/* <CustomAlertDialog
         onClose={() => setDeleteAlert(false)}
         isOpen={deleteAlert}
         message={"Are you sure you want to delete sponers?"}
         alertHandler={handleDelete}
         isLoading={isLoading}
-      />
+      /> */}
 
       <AddApproved
         isOpen={isOpen}
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
index 88c613f..f172fc8 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
@@ -33,11 +33,15 @@ import ToastBox from "../../../../Components/ToastBox";
 import AddCashDetails from "../AddCashDetails";
 import { debounce } from "../../../Admin/Contact";
 import AddPending from "./AddPending";
+import { useParams } from "react-router-dom";
+import { useUpdateIOCaseMutation } from "../../../../Services/io.service";
 
 const formatDate = (date) => new Date(date).toLocaleDateString();
 
 const Pending = () => {
   const toast = useToast();
+  const params = useParams()
+  const id = params?.id
   const firstField = useRef();
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { IODetails, approved, setApproved } =
@@ -49,6 +53,8 @@ const Pending = () => {
   const [mouseEntered, setMouseEntered] = useState(false);
   const [mouseEnteredId, setMouseEnteredId] = useState("");
 
+  const [updateIOCase] = useUpdateIOCaseMutation()
+
   useEffect(() => {
     // Simulate loading
     const timer = setTimeout(() => {
@@ -300,6 +306,31 @@ const Pending = () => {
     );
   };
 
+  const handleAdd = async () =>{
+    try {
+       const res = await updateIOCase(id)
+       if (res?.data) {
+         toast({
+           render: () => (
+             <ToastBox status={"success"} message={res?.data?.message} />
+           ),
+         });
+         setIsLoading(false);
+         onOpen()
+ 
+       } else if (res?.error) {
+         toast({
+           render: () => (
+             <ToastBox status={"error"} message={res?.error?.data?.message} />
+           ),
+         });
+         setIsLoading(false);
+       }
+    } catch (error) { 
+     
+    }
+   }
+
   return (
     <Box {...OPACITY_ON_LOAD} pb={0}>
       <Box bg="white.500">
@@ -322,7 +353,7 @@ const Pending = () => {
 
           <HStack display={"flex"} alignItems={"center"}>
             <Button
-              onClick={onOpen}
+               onClick={handleAdd}
               leftIcon={<AddIcon />}
               colorScheme={"forestGreen"}
               rounded={"sm"}
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
index d1c99bb..6be91f1 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
@@ -23,10 +23,15 @@ import {
   import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
   import AddCashDetails from "../AddCashDetails";
 import AddRejected from "./AddRejected";
+import { useUpdateIOCaseMutation } from "../../../../Services/io.service";
+import { useParams } from "react-router-dom";
+import ToastBox from "../../../../Components/ToastBox";
   
   const formatDate = (date) => new Date(date).toLocaleDateString();
   
   const Rejected = () => {
+    const params = useParams()
+    const id = params?.id
     const toast = useToast();
     const firstField = useRef();
     const { isOpen, onOpen, onClose } = useDisclosure();
@@ -38,6 +43,8 @@ import AddRejected from "./AddRejected";
     const [actionId, setActionId] = useState(false);
     const [mouseEntered, setMouseEntered] = useState(false);
     const [mouseEnteredId, setMouseEnteredId] = useState("");
+
+    const [updateIOCase] = useUpdateIOCaseMutation()
   
     useEffect(() => {
       // Simulate loading
@@ -244,6 +251,31 @@ import AddRejected from "./AddRejected";
         </Table>
       );
     };
+
+    
+  const handleAdd = async () =>{
+    try {
+       const res = await updateIOCase(id)
+       if (res?.data) {
+         toast({
+           render: () => (
+             <ToastBox status={"success"} message={res?.data?.message} />
+           ),
+         });
+         setIsLoading(false);
+         onOpen()
+ 
+       } else if (res?.error) {
+         toast({
+           render: () => (
+             <ToastBox status={"error"} message={res?.error?.data?.message} />
+           ),
+         });
+         setIsLoading(false);
+       }
+    } catch (error) {    
+    }
+  }
   
     return (
       <Box {...OPACITY_ON_LOAD} pb={0}>
@@ -266,17 +298,18 @@ import AddRejected from "./AddRejected";
             />
   
             <HStack display={"flex"} alignItems={"center"}>
+              {IODetails?.isInvestedAmount ? (
               <Button
-              onClick={onOpen}
+                onClick={handleAdd}
                 leftIcon={<AddIcon />}
-                colorScheme={"forestGreen"}
+                colorScheme="forestGreen"
+                size={"sm"}
                 rounded={"sm"}
                 fontSize={"xs"}
-                size={"sm"}
-                fontWeight={500}
               >
                 Add
               </Button>
+            ) : null}
             </HStack>
           </HStack>
         </Box>
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/AddApproved.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/AddApproved.jsx
new file mode 100644
index 0000000..ab6a5d3
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/AddApproved.jsx
@@ -0,0 +1,251 @@
+import {
+  Box,
+  Button,
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  Input,
+  Select,
+  Stack,
+  Textarea,
+  useToast,
+} from "@chakra-ui/react";
+import * as yup from "yup";
+import React, { useState, useEffect, useContext } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { v4 as uuidv4 } from "uuid";
+import { useParams } from "react-router-dom";
+import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+import { useCreateIoCashMutation, useCreateVideoArtifactsMutation, useUpdateVideoArtifactsMutation } from "../../../../Services/io.service";
+import ToastBox from "../../../../Components/ToastBox";
+import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+import CurrencyInput from "../../../../Components/CurrencyInput";
+
+const cashDetails = yup.object().shape({
+  transactionDate: yup.string().required("Date is required"),
+  ioTransType_xid: yup.number().required("Cash transaction is required"),
+  transactionAmount: yup.number().required("Transaction Amount is required"),
+  comments: yup.string().notRequired(),
+});
+
+const AddApproved = ({ isOpen, onClose, firstField, actionId, setActionId, data }) => {
+  const params = useParams() 
+  const id = params?.id
+  const [file, setFile] = useState("");
+  const [fileName, setFileName] = useState("");
+  const [isLoading, setIsLoading] = useState(false)
+  const [alert, setAlert] = useState(false);
+  const toast = useToast();
+
+
+
+  // ======================[ Cotext Api ]
+  const { IODetails } = useContext(GlobalStateContext);
+  const found = data?.find((item) => item?.id === actionId);
+
+
+  const [createArtifactsVideo] = useCreateVideoArtifactsMutation()
+  const [updateVideoArtifacts] = useUpdateVideoArtifactsMutation()
+  // const {
+  //   data
+  // } = useGetArtifactsQuery(id) 
+
+  const {
+    control,
+    handleSubmit,
+    watch,
+    reset,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(cashDetails),
+  });
+
+
+  const [createIoCash] = useCreateIoCashMutation()
+
+
+  const onSubmit = async (data) => {
+
+    setIsLoading(true)
+
+    try {
+
+      const res = await createIoCash({ data, id })
+      if (res?.data?.statusCode === 200) {
+        setIsLoading(false);
+        toast({
+          render: () => <ToastBox message={res?.data?.message} />,
+        });
+        handleClose()
+      }else if(res?.error?.status === 400){
+        setIsLoading(false);
+        toast({
+          render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
+        });
+      }
+
+    } catch (error) {
+      console.log(error);
+    }
+
+  };
+
+
+
+  const handleConfirm = () => {
+    handleSubmit(onSubmit)();
+  };
+
+  const handleSave = () => {
+    handleSubmit(onSubmit)();
+  };
+
+  const handleClose = () => {
+    setAlert(false)
+    onClose()
+    reset({
+      transactionAmount:""
+    })
+  }
+
+  return (
+    <>
+      <Drawer
+        size={"md"}
+        isOpen={isOpen}
+        placement="right"
+        initialFocusRef={firstField}
+        onClose={handleClose}
+      >
+        <DrawerOverlay />
+        <DrawerContent>
+          <DrawerCloseButton />
+          <DrawerHeader fontSize={"sm"}>IO Nav Details</DrawerHeader>
+
+          <DrawerBody>
+            <Stack spacing={4}>
+              <FormControl isInvalid={errors.transactionDate} isRequired> 
+                <FormLabel fontSize={"sm"}>Date Selection</FormLabel>
+                <Controller
+                  name="transactionDate"
+                  control={control}
+                  render={({ field }) => (
+                    <Input 
+                    focusBorderColor="forestGreen.300" {...field} fontSize={"sm"} type="date" size={"sm"} />
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.transactionDate?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+
+              <FormControl isInvalid={errors.ioTransType_xid} isRequired>
+                <FormLabel fontSize={"sm"}>Cash transaction</FormLabel>
+                <Controller
+                  name="ioTransType_xid"
+                  control={control}
+                  render={({ field }) => (
+                    <Select
+                      {...field}
+                      placeholder="Select an option"
+                      fontSize={"sm"}
+                      size={"sm"}
+                      focusBorderColor="forestGreen.300"
+                    >
+                      {IODetails?.ioCashTransaction?.map(({ id, transactionName }) => (
+                        <option key={id} value={id}>
+                          {transactionName}
+                        </option>
+                      ))}
+                    </Select>
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.ioTransType_xid?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+
+
+
+              <FormControl isInvalid={errors.transactionAmount} isRequired>
+                <FormLabel fontSize={"sm"}>Transaction Amount</FormLabel>
+                <Controller
+                  name="transactionAmount"
+                  control={control}
+                  render={({ field }) => (
+                    <CurrencyInput {...field} textAlign={'right'} fontSize={"sm"} type="number" size={"sm"} />
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.transactionAmount?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+
+
+              <FormControl isInvalid={errors.comments}>
+                <FormLabel fontSize={"sm"}>Comments</FormLabel>
+                <Controller
+                  name="comments"
+                  control={control}
+                  render={({ field }) => (
+                    <Textarea {...field} textAlign={'left'} 
+                    focusBorderColor="forestGreen.300" fontSize={"sm"} type="text" size={"sm"} />
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.comments?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+            </Stack>
+          </DrawerBody>
+
+          <DrawerFooter>
+            <Button
+              variant="outline"
+              colorScheme={"forestGreen"}
+              rounded={"sm"}
+              size={"sm"}
+              mr={3}
+              onClick={handleClose}
+            >
+              Cancel
+            </Button>
+
+            <Button
+              colorScheme={"forestGreen"}
+              rounded={"sm"}
+              size={"sm"}
+
+              onClick={() => setAlert(true)}
+            >
+              Save
+            </Button>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+
+
+      <CustomAlertDialog
+        isOpen={alert}
+        onClose={() => setAlert(false)}
+        alertHandler={handleSave}
+        message={"Are you sure you want to add cash details?"}
+        isLoading={isLoading}
+      />
+    </>
+  );
+};
+
+export default AddApproved;
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/AddPending.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/AddPending.jsx
new file mode 100644
index 0000000..ac0e038
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/AddPending.jsx
@@ -0,0 +1,251 @@
+import {
+  Box,
+  Button,
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  Input,
+  Select,
+  Stack,
+  Textarea,
+  useToast,
+} from "@chakra-ui/react";
+import * as yup from "yup";
+import React, { useState, useEffect, useContext } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { v4 as uuidv4 } from "uuid";
+import { useParams } from "react-router-dom";
+import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+import { useCreateIoCashMutation, useCreateVideoArtifactsMutation, useUpdateVideoArtifactsMutation } from "../../../../Services/io.service";
+import ToastBox from "../../../../Components/ToastBox";
+import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+import CurrencyInput from "../../../../Components/CurrencyInput";
+
+const cashDetails = yup.object().shape({
+  transactionDate: yup.string().required("Date is required"),
+  ioTransType_xid: yup.number().required("Cash transaction is required"),
+  transactionAmount: yup.number().required("Transaction Amount is required"),
+  comments: yup.string().notRequired(),
+});
+
+const AddPending = ({ isOpen, onClose, firstField, actionId, setActionId, data }) => {
+  const params = useParams() 
+  const id = params?.id
+  const [file, setFile] = useState("");
+  const [fileName, setFileName] = useState("");
+  const [isLoading, setIsLoading] = useState(false)
+  const [alert, setAlert] = useState(false);
+  const toast = useToast();
+
+
+
+  // ======================[ Cotext Api ]
+  const { IODetails } = useContext(GlobalStateContext);
+  const found = data?.find((item) => item?.id === actionId);
+
+
+  const [createArtifactsVideo] = useCreateVideoArtifactsMutation()
+  const [updateVideoArtifacts] = useUpdateVideoArtifactsMutation()
+  // const {
+  //   data
+  // } = useGetArtifactsQuery(id) 
+
+  const {
+    control,
+    handleSubmit,
+    watch,
+    reset,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(cashDetails),
+  });
+
+
+  const [createIoCash] = useCreateIoCashMutation()
+
+
+  const onSubmit = async (data) => {
+
+    setIsLoading(true)
+
+    try {
+
+      const res = await createIoCash({ data, id })
+      if (res?.data?.statusCode === 200) {
+        setIsLoading(false);
+        toast({
+          render: () => <ToastBox message={res?.data?.message} />,
+        });
+        handleClose()
+      }else if(res?.error?.status === 400){
+        setIsLoading(false);
+        toast({
+          render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
+        });
+      }
+
+    } catch (error) {
+      console.log(error);
+    }
+
+  };
+
+
+
+  const handleConfirm = () => {
+    handleSubmit(onSubmit)();
+  };
+
+  const handleSave = () => {
+    handleSubmit(onSubmit)();
+  };
+
+  const handleClose = () => {
+    setAlert(false)
+    onClose()
+    reset({
+      transactionAmount:""
+    })
+  }
+
+  return (
+    <>
+      <Drawer
+        size={"md"}
+        isOpen={isOpen}
+        placement="right"
+        initialFocusRef={firstField}
+        onClose={handleClose}
+      >
+        <DrawerOverlay />
+        <DrawerContent>
+          <DrawerCloseButton />
+          <DrawerHeader fontSize={"sm"}>IO Nav Details</DrawerHeader>
+
+          <DrawerBody>
+            <Stack spacing={4}>
+              <FormControl isInvalid={errors.transactionDate} isRequired> 
+                <FormLabel fontSize={"sm"}>Date Selection</FormLabel>
+                <Controller
+                  name="transactionDate"
+                  control={control}
+                  render={({ field }) => (
+                    <Input 
+                    focusBorderColor="forestGreen.300" {...field} fontSize={"sm"} type="date" size={"sm"} />
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.transactionDate?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+
+              <FormControl isInvalid={errors.ioTransType_xid} isRequired>
+                <FormLabel fontSize={"sm"}>Cash transaction</FormLabel>
+                <Controller
+                  name="ioTransType_xid"
+                  control={control}
+                  render={({ field }) => (
+                    <Select
+                      {...field}
+                      placeholder="Select an option"
+                      fontSize={"sm"}
+                      size={"sm"}
+                      focusBorderColor="forestGreen.300"
+                    >
+                      {IODetails?.ioCashTransaction?.map(({ id, transactionName }) => (
+                        <option key={id} value={id}>
+                          {transactionName}
+                        </option>
+                      ))}
+                    </Select>
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.ioTransType_xid?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+
+
+
+              <FormControl isInvalid={errors.transactionAmount} isRequired>
+                <FormLabel fontSize={"sm"}>Transaction Amount</FormLabel>
+                <Controller
+                  name="transactionAmount"
+                  control={control}
+                  render={({ field }) => (
+                    <CurrencyInput {...field} textAlign={'right'} fontSize={"sm"} type="number" size={"sm"} />
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.transactionAmount?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+
+
+              <FormControl isInvalid={errors.comments}>
+                <FormLabel fontSize={"sm"}>Comments</FormLabel>
+                <Controller
+                  name="comments"
+                  control={control}
+                  render={({ field }) => (
+                    <Textarea {...field} textAlign={'left'} 
+                    focusBorderColor="forestGreen.300" fontSize={"sm"} type="text" size={"sm"} />
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.comments?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+            </Stack>
+          </DrawerBody>
+
+          <DrawerFooter>
+            <Button
+              variant="outline"
+              colorScheme={"forestGreen"}
+              rounded={"sm"}
+              size={"sm"}
+              mr={3}
+              onClick={handleClose}
+            >
+              Cancel
+            </Button>
+
+            <Button
+              colorScheme={"forestGreen"}
+              rounded={"sm"}
+              size={"sm"}
+
+              onClick={() => setAlert(true)}
+            >
+              Save
+            </Button>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+
+
+      <CustomAlertDialog
+        isOpen={alert}
+        onClose={() => setAlert(false)}
+        alertHandler={handleSave}
+        message={"Are you sure you want to add cash details?"}
+        isLoading={isLoading}
+      />
+    </>
+  );
+};
+
+export default AddPending;
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/AddRejected.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/AddRejected.jsx
new file mode 100644
index 0000000..18b271b
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/AddRejected.jsx
@@ -0,0 +1,251 @@
+import {
+  Box,
+  Button,
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  Input,
+  Select,
+  Stack,
+  Textarea,
+  useToast,
+} from "@chakra-ui/react";
+import * as yup from "yup";
+import React, { useState, useEffect, useContext } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { v4 as uuidv4 } from "uuid";
+import { useParams } from "react-router-dom";
+import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+import { useCreateIoCashMutation, useCreateVideoArtifactsMutation, useUpdateVideoArtifactsMutation } from "../../../../Services/io.service";
+import ToastBox from "../../../../Components/ToastBox";
+import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+import CurrencyInput from "../../../../Components/CurrencyInput";
+
+const cashDetails = yup.object().shape({
+  transactionDate: yup.string().required("Date is required"),
+  ioTransType_xid: yup.number().required("Cash transaction is required"),
+  transactionAmount: yup.number().required("Transaction Amount is required"),
+  comments: yup.string().notRequired(),
+});
+
+const AddRejected = ({ isOpen, onClose, firstField, actionId, setActionId, data }) => {
+  const params = useParams() 
+  const id = params?.id
+  const [file, setFile] = useState("");
+  const [fileName, setFileName] = useState("");
+  const [isLoading, setIsLoading] = useState(false)
+  const [alert, setAlert] = useState(false);
+  const toast = useToast();
+
+
+
+  // ======================[ Cotext Api ]
+  const { IODetails } = useContext(GlobalStateContext);
+  const found = data?.find((item) => item?.id === actionId);
+
+
+  const [createArtifactsVideo] = useCreateVideoArtifactsMutation()
+  const [updateVideoArtifacts] = useUpdateVideoArtifactsMutation()
+  // const {
+  //   data
+  // } = useGetArtifactsQuery(id) 
+
+  const {
+    control,
+    handleSubmit,
+    watch,
+    reset,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(cashDetails),
+  });
+
+
+  const [createIoCash] = useCreateIoCashMutation()
+
+
+  const onSubmit = async (data) => {
+
+    setIsLoading(true)
+
+    try {
+
+      const res = await createIoCash({ data, id })
+      if (res?.data?.statusCode === 200) {
+        setIsLoading(false);
+        toast({
+          render: () => <ToastBox message={res?.data?.message} />,
+        });
+        handleClose()
+      }else if(res?.error?.status === 400){
+        setIsLoading(false);
+        toast({
+          render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
+        });
+      }
+
+    } catch (error) {
+      console.log(error);
+    }
+
+  };
+
+
+
+  const handleConfirm = () => {
+    handleSubmit(onSubmit)();
+  };
+
+  const handleSave = () => {
+    handleSubmit(onSubmit)();
+  };
+
+  const handleClose = () => {
+    setAlert(false)
+    onClose()
+    reset({
+      transactionAmount:""
+    })
+  }
+
+  return (
+    <>
+      <Drawer
+        size={"md"}
+        isOpen={isOpen}
+        placement="right"
+        initialFocusRef={firstField}
+        onClose={handleClose}
+      >
+        <DrawerOverlay />
+        <DrawerContent>
+          <DrawerCloseButton />
+          <DrawerHeader fontSize={"sm"}>IO Nav Details</DrawerHeader>
+
+          <DrawerBody>
+            <Stack spacing={4}>
+              <FormControl isInvalid={errors.transactionDate} isRequired> 
+                <FormLabel fontSize={"sm"}>Date Selection</FormLabel>
+                <Controller
+                  name="transactionDate"
+                  control={control}
+                  render={({ field }) => (
+                    <Input 
+                    focusBorderColor="forestGreen.300" {...field} fontSize={"sm"} type="date" size={"sm"} />
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.transactionDate?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+
+              <FormControl isInvalid={errors.ioTransType_xid} isRequired>
+                <FormLabel fontSize={"sm"}>Cash transaction</FormLabel>
+                <Controller
+                  name="ioTransType_xid"
+                  control={control}
+                  render={({ field }) => (
+                    <Select
+                      {...field}
+                      placeholder="Select an option"
+                      fontSize={"sm"}
+                      size={"sm"}
+                      focusBorderColor="forestGreen.300"
+                    >
+                      {IODetails?.ioCashTransaction?.map(({ id, transactionName }) => (
+                        <option key={id} value={id}>
+                          {transactionName}
+                        </option>
+                      ))}
+                    </Select>
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.ioTransType_xid?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+
+
+
+              <FormControl isInvalid={errors.transactionAmount} isRequired>
+                <FormLabel fontSize={"sm"}>Transaction Amount</FormLabel>
+                <Controller
+                  name="transactionAmount"
+                  control={control}
+                  render={({ field }) => (
+                    <CurrencyInput {...field} textAlign={'right'} fontSize={"sm"} type="number" size={"sm"} />
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.transactionAmount?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+
+
+              <FormControl isInvalid={errors.comments}>
+                <FormLabel fontSize={"sm"}>Comments</FormLabel>
+                <Controller
+                  name="comments"
+                  control={control}
+                  render={({ field }) => (
+                    <Textarea {...field} textAlign={'left'} 
+                    focusBorderColor="forestGreen.300" fontSize={"sm"} type="text" size={"sm"} />
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.comments?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+            </Stack>
+          </DrawerBody>
+
+          <DrawerFooter>
+            <Button
+              variant="outline"
+              colorScheme={"forestGreen"}
+              rounded={"sm"}
+              size={"sm"}
+              mr={3}
+              onClick={handleClose}
+            >
+              Cancel
+            </Button>
+
+            <Button
+              colorScheme={"forestGreen"}
+              rounded={"sm"}
+              size={"sm"}
+
+              onClick={() => setAlert(true)}
+            >
+              Save
+            </Button>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+
+
+      <CustomAlertDialog
+        isOpen={alert}
+        onClose={() => setAlert(false)}
+        alertHandler={handleSave}
+        message={"Are you sure you want to add cash details?"}
+        isLoading={isLoading}
+      />
+    </>
+  );
+};
+
+export default AddRejected;
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx
index ee406db..97c1623 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx
@@ -26,11 +26,16 @@ import {
   import ToastBox from "../../../../Components/ToastBox";
   import AddCashDetails from "../AddCashDetails";
   import { debounce } from "../../../Admin/Contact";
+import { useParams } from "react-router-dom";
+import { useUpdateIOCaseMutation } from "../../../../Services/io.service";
+import AddApproved from "./AddApproved";
   
   const formatDate = (date) => new Date(date).toLocaleDateString();
   
   const Approved = () => {
+    const params = useParams()
     const toast = useToast();
+    const id = params?.id
     const firstField = useRef();
     const { isOpen, onOpen, onClose } = useDisclosure();
     const { IODetails, iONAVDetail, setIONAVDetail } =
@@ -41,6 +46,7 @@ import {
     const [actionId, setActionId] = useState(false);
     const [mouseEntered, setMouseEntered] = useState(false);
     const [mouseEnteredId, setMouseEnteredId] = useState("");
+    const [updateIOCase] = useUpdateIOCaseMutation()
   
     useEffect(() => {
       // Simulate loading
@@ -163,6 +169,32 @@ import {
         </Text>
       ),
     }));
+
+    
+  const handleAdd = async () =>{
+    try {
+       const res = await updateIOCase(id)
+       if (res?.data) {
+         toast({
+           render: () => (
+             <ToastBox status={"success"} message={res?.data?.message} />
+           ),
+         });
+         setIsLoading(false);
+         onOpen()
+ 
+       } else if (res?.error) {
+         toast({
+           render: () => (
+             <ToastBox status={"error"} message={res?.error?.data?.message} />
+           ),
+         });
+         setIsLoading(false);
+       }
+    } catch (error) { 
+     
+    }
+   }
   
     const handleDelete = () => {
       const updatedSponsors = sponser.filter(
@@ -202,22 +234,24 @@ import {
       <Box {...OPACITY_ON_LOAD} pb={0}>
         <Box bg="white.500">
           <HStack
-            display={"flex"}
-            justifyContent={"space-between"}
-            pb={3}
-            spacing="24px"
-          >
-            <Input
-              type="search"
-              width={300}
-              placeholder="Search..."
-              size="sm"
-              rounded="sm"
-              focusBorderColor="green.500"
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-            />
-            <Button
+          display={"flex"}
+          justifyContent={"space-between"}
+          pb={3}
+          spacing="24px"
+        >
+          <Input
+            type="search"
+            width={300}
+            placeholder="Search..."
+            size="sm"
+            rounded="sm"
+            focusBorderColor="green.500"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+
+          <HStack display={"flex"} alignItems={"center"}>
+          <Button
               onClick={() =>
                 exportToExcelNew(ioNavExport, "Io Nav details")
               }
@@ -231,7 +265,20 @@ import {
             >
               Export xls
             </Button>
+            {IODetails?.isInvestedAmount ? (
+              <Button
+                onClick={handleAdd}
+                leftIcon={<AddIcon />}
+                colorScheme="forestGreen"
+                size={"sm"}
+                rounded={"sm"}
+                fontSize={"xs"}
+              >
+                Add
+              </Button>
+            ) : null}
           </HStack>
+        </HStack>
         </Box>
   
         <NormalTable
@@ -252,6 +299,12 @@ import {
           alertHandler={handleDelete}
           isLoading={isLoading}
         />
+
+      <AddApproved
+        isOpen={isOpen}
+        onClose={onClose}
+        firstField={firstField}
+      />
       </Box>
     );
   };
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/Exit.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/Exit.jsx
index 93de936..790fc09 100644
--- a/src/Pages/IO_Management/ViewIO/HeaderModal/Exit.jsx
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/Exit.jsx
@@ -94,7 +94,7 @@ const Exit = ({ isOpen, onClose }) => {
       const res = await getDistributionInvestment({ id, data });
       console.log(res?.data?.data);
 
-      if (res?.error?.status === 401) {
+      if (res?.error?.status === 401) { 
         // toast({
         //   render: () => (
         //     <ToastBox message={res?.error?.data?.message} status={"error"} />
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIONav.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIONav.jsx
index 95643e2..fb94923 100644
--- a/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIONav.jsx
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIONav.jsx
@@ -55,7 +55,7 @@ const UpdateIONav = ({ isOpen, onClose }) => {
 
   const [createIoNav] = useCreateIoNavMutation()
 
-
+ 
   const onSubmit = async (data) => {
     setIsLoading(true);
     try {
diff --git a/src/Services/io.service.js b/src/Services/io.service.js
index 8b2ba3e..167d6a8 100644
--- a/src/Services/io.service.js
+++ b/src/Services/io.service.js
@@ -434,10 +434,9 @@ export const ioService = createApi({
     // ========Add Io Details========
 
        updateIOCase: builder.mutation({
-        query: ({ data, id }) => ({
+        query: (id) => ({
           url: `/io/admin/maker-transaction/${id}/verify-pending-transaction-for-cash-and-nav`,
           method: "POST",
-          body: data,
         }),
   
         invalidatesTags: ["getIOById"],
-- 
2.34.1


From 61e49393fef74b1e8d983b052f1595740203081d Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Mon, 18 Nov 2024 17:54:23 +0530
Subject: [PATCH 04/49] update Io Cash Nav Transaction

---
 src/Components/Loaders/FullscreenLoaders.jsx  |   6 +-
 .../ApproveRequest/ApproveRequest.jsx         |   2 +-
 .../IO_Management/CreateIO/AddCashDetails.jsx |   4 +-
 .../IO_Management/CreateIO/Destribution.jsx   | 248 ++++----
 .../{AddApproved.jsx => AddCaseDetails.jsx}   |   9 +-
 .../CreateIO/IOCashDetails/Approved.jsx       | 116 ++--
 .../CreateIO/IOCashDetails/Pending.jsx        | 146 +++--
 .../CreateIO/IOCashDetails/Rejected.jsx       |  15 +-
 .../IOCashDetails/RequestApproveModal.jsx     | 176 ++++++
 .../IOCashDetails/RequestRejectModal.jsx      | 164 ++++++
 .../CreateIO/IONAVDetails/AddApproved.jsx     | 251 --------
 .../{AddPending.jsx => AddNavDetails.jsx}     | 116 ++--
 .../CreateIO/IONAVDetails/AddRejected.jsx     | 251 --------
 .../CreateIO/IONAVDetails/Approved.jsx        |  65 +-
 .../CreateIO/IONAVDetails/Pending.jsx         | 553 ++++++++++--------
 .../CreateIO/IONAVDetails/Rejected.jsx        |  53 +-
 .../IONAVDetails/RequestApproveModal.jsx      | 176 ++++++
 .../IONAVDetails/RequestRejectModal.jsx       | 164 ++++++
 .../CreateIO/IOTransaction/Approved.jsx       |   8 +-
 .../CreateIO/IOTransaction/Pending.jsx        |  57 +-
 .../CreateIO/IOTransaction/Rejected.jsx       |  18 +-
 .../IOTransaction/RequestApproveModal.jsx     | 175 ++++++
 .../IOTransaction/RequestExitApproveModal.jsx | 176 ++++++
 .../IOTransaction/RequestRejectModal.jsx      | 164 ++++++
 .../HeaderModal/DistributionInvestor.jsx      |  99 +++-
 .../IO_Management/ViewIO/HeaderModal/Exit.jsx |  92 +--
 .../IO_Management/ViewIO/ViewIOdataHeader.jsx |  71 ++-
 src/Services/io.service.js                    | 195 ++++--
 28 files changed, 2350 insertions(+), 1220 deletions(-)
 rename src/Pages/IO_Management/CreateIO/IOCashDetails/{AddApproved.jsx => AddCaseDetails.jsx} (97%)
 create mode 100644 src/Pages/IO_Management/CreateIO/IOCashDetails/RequestApproveModal.jsx
 create mode 100644 src/Pages/IO_Management/CreateIO/IOCashDetails/RequestRejectModal.jsx
 delete mode 100644 src/Pages/IO_Management/CreateIO/IONAVDetails/AddApproved.jsx
 rename src/Pages/IO_Management/CreateIO/IONAVDetails/{AddPending.jsx => AddNavDetails.jsx} (67%)
 delete mode 100644 src/Pages/IO_Management/CreateIO/IONAVDetails/AddRejected.jsx
 create mode 100644 src/Pages/IO_Management/CreateIO/IONAVDetails/RequestApproveModal.jsx
 create mode 100644 src/Pages/IO_Management/CreateIO/IONAVDetails/RequestRejectModal.jsx
 create mode 100644 src/Pages/IO_Management/CreateIO/IOTransaction/RequestApproveModal.jsx
 create mode 100644 src/Pages/IO_Management/CreateIO/IOTransaction/RequestExitApproveModal.jsx
 create mode 100644 src/Pages/IO_Management/CreateIO/IOTransaction/RequestRejectModal.jsx

diff --git a/src/Components/Loaders/FullscreenLoaders.jsx b/src/Components/Loaders/FullscreenLoaders.jsx
index a821ce3..151917d 100644
--- a/src/Components/Loaders/FullscreenLoaders.jsx
+++ b/src/Components/Loaders/FullscreenLoaders.jsx
@@ -12,7 +12,8 @@ const FullscreenLoaders = ({height}) => {
       w={"100%"}
       h={height ? height: "100vh"}
       gap={4}
-    ><div className="dot-spinner">
+    >
+      {/* <div className="dot-spinner">
     <div className="dot-spinner__dot"></div>
     <div className="dot-spinner__dot"></div>
     <div className="dot-spinner__dot"></div>
@@ -21,8 +22,9 @@ const FullscreenLoaders = ({height}) => {
     <div className="dot-spinner__dot"></div>
     <div className="dot-spinner__dot"></div>
     <div className="dot-spinner__dot"></div>
-</div>
+</div> */}
   {/* <Text color='#004717' fontSize={'md'} fontWeight={500}>Loading...</Text> */}
+  <Spinner />
     </Box>
   );
 };
diff --git a/src/Pages/FawateerChecker/ApproveRequest/ApproveRequest.jsx b/src/Pages/FawateerChecker/ApproveRequest/ApproveRequest.jsx
index 52f3760..cb45a29 100644
--- a/src/Pages/FawateerChecker/ApproveRequest/ApproveRequest.jsx
+++ b/src/Pages/FawateerChecker/ApproveRequest/ApproveRequest.jsx
@@ -138,7 +138,7 @@ import RequestRejectModal from "./RequestRejectModal";
       "Deposit Date",
       "Deposit Amount (BHD)",
       "Support Image",
-      "Action",
+      "Action", 
     ];
   
   
diff --git a/src/Pages/IO_Management/CreateIO/AddCashDetails.jsx b/src/Pages/IO_Management/CreateIO/AddCashDetails.jsx
index ac5ae23..5b26c14 100644
--- a/src/Pages/IO_Management/CreateIO/AddCashDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/AddCashDetails.jsx
@@ -91,11 +91,11 @@ const AddCashDetails = ({ isOpen, onClose, firstField, actionId, setActionId, da
           render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
         });
       }
-
+      
 
     } catch (error) {
       console.log(error);
-
+      setIsLoading(false);
     }
 
   };
diff --git a/src/Pages/IO_Management/CreateIO/Destribution.jsx b/src/Pages/IO_Management/CreateIO/Destribution.jsx
index e6478b3..f30ab8b 100644
--- a/src/Pages/IO_Management/CreateIO/Destribution.jsx
+++ b/src/Pages/IO_Management/CreateIO/Destribution.jsx
@@ -1,37 +1,49 @@
-import React, { useContext, useEffect, useRef, useState } from 'react'
-import GlobalStateContext from '../../../Contexts/GlobalStateContext';
-import { Box, HStack, Input,Text, Table, Tbody, Th, Tr, Avatar, useDisclosure,Button, Badge } from '@chakra-ui/react';
-import { OPACITY_ON_LOAD } from '../../../Layout/animations';
-import Pagination from '../../../Components/Pagination';
-import NormalTable from '../../../Components/DataTable/NormalTable';
-import CustomAlertDialog from '../../../Components/CustomAlertDialog';
-import { formatDatee } from '../../../Components/FormField';
-import { AddIcon } from '@chakra-ui/icons';
-import AddIONav from './AddIONav';
+import React, { useContext, useEffect, useRef, useState } from "react";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import {
+  Box,
+  HStack,
+  Input,
+  Text,
+  Table,
+  Tbody,
+  Th,
+  Tr,
+  Avatar,
+  useDisclosure,
+  Button,
+  Badge,
+} from "@chakra-ui/react";
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
+import Pagination from "../../../Components/Pagination";
+import NormalTable from "../../../Components/DataTable/NormalTable";
+import CustomAlertDialog from "../../../Components/CustomAlertDialog";
+import { formatDatee } from "../../../Components/FormField";
+import { AddIcon } from "@chakra-ui/icons";
+import AddIONav from "./AddIONav";
 
 const Destribution = () => {
   const { navDetails, setNavDetails, IODetails } =
     useContext(GlobalStateContext);
-    const firstField = useRef();
-    const { isOpen, onOpen, onClose } = useDisclosure();
-    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 firstField = useRef();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  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("");
 
+  console.log(IODetails?.ioNAVHistory);
+
+  const formatDate = (date) => {
+    return new Date(date).toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+    });
+  };
 
-    console.log(IODetails?.ioNAVHistory);
-    
-    const formatDate = (date) => {
-      return new Date(date).toLocaleDateString('en-GB', {
-        day: '2-digit',
-        month: '2-digit',
-        year: 'numeric',
-      });
-    };
-    
   useEffect(() => {
     // Simulate loading
     const timer = setTimeout(() => {
@@ -42,32 +54,38 @@ const Destribution = () => {
     return () => clearTimeout(timer);
   }, []);
 
-    // Table setup
-    const tableHeadRow = [
-      // "Sr.No",
-      "Date",
-      "Amount",
-      "% of Investment"
-    ];
+  // Table setup
+  const tableHeadRow = [
+    // "Sr.No",
+    "Date",
+    "Amount",
+    "% of Investment",
+  ];
 
-      // Table filter
-  const filteredData = IODetails?.distributionToInvestor?.filter((item) => {
-    const name = item?.transactionAmount;
-    const searchLower = searchTerm.toLowerCase();
-    const nameMatches = name.toLowerCase().includes(searchLower);
-    return nameMatches;
-  }).sort((b, a) => new Date(a.transactionDate) - new Date(b.transactionDate));
+  // Table filter
+  const filteredData = IODetails?.distributionToInvestor
+    ?.filter((item) => {
+      const name = item?.transactionAmount;
+      const searchLower = searchTerm.toLowerCase();
+      const nameMatches = name.toLowerCase().includes(searchLower);
+      return nameMatches;
+    })
+    .sort((b, a) => new Date(a.transactionDate) - new Date(b.transactionDate));
 
-  const  extractedArray=filteredData?.map((item, index) => ({
+  const extractedArray = filteredData?.map((item, index) => ({
     id: item?.id,
-    "Sr.No":  <Text
-    justifyContent={"start"}
-    as={"span"}
-    color={"teal.900"}
-    fontWeight={"500"}
-    className="d-flex align-items-start web-text-small"
-  >{item?.id}</Text>,
-    "Date": (
+    "Sr.No": (
+      <Text
+        justifyContent={"start"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-start web-text-small"
+      >
+        {item?.id}
+      </Text>
+    ),
+    Date: (
       <Text
         justifyContent={"center"}
         as={"span"}
@@ -78,7 +96,7 @@ const Destribution = () => {
         {formatDate(item.transactionDate)}
       </Text>
     ),
-    "Amount": (
+    Amount: (
       <Text
         justifyContent={"center"}
         as={"span"}
@@ -86,11 +104,13 @@ const Destribution = () => {
         fontWeight={"500"}
         className="d-flex align-items-center web-text-small"
       >
-        <Badge ms={1} colorScheme="green" me={1}>$</Badge>
+        <Badge ms={1} colorScheme="green" me={1}>
+          $
+        </Badge>
         {`${parseFloat(item.transactionAmount || 0).toLocaleString(undefined, {
-            minimumFractionDigits: 2,
-            maximumFractionDigits: 2,
-          })}`}
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2,
+        })}`}
       </Text>
     ),
     "% of Investment": (
@@ -106,12 +126,8 @@ const Destribution = () => {
     ),
   }));
 
-
-
   const handleDelete = () => {
-    const updatedNav = navDetails.filter(
-      (sponsor) => sponsor.id !== actionId
-    );
+    const updatedNav = navDetails.filter((sponsor) => sponsor.id !== actionId);
 
     setTimeout(() => {
       setNavDetails(updatedNav);
@@ -121,12 +137,11 @@ const Destribution = () => {
     setIsLoading(true);
   };
 
-
   const Total = () => {
     return (
       <Table size="sm">
         <Tbody>
-          <Tr  backgroundColor="gray.50">
+          <Tr backgroundColor="gray.50">
             <Th
               textAlign={"center"}
               p={3}
@@ -147,8 +162,13 @@ const Destribution = () => {
               wordBreak="normal"
               overflowWrap="normal"
             >
-              
-            <Badge ms={1} colorScheme="green" me={1}>$</Badge>{IODetails?.total_distributeToInvestor_amt?.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+              <Badge ms={1} colorScheme="green" me={1}>
+                $
+              </Badge>
+              {IODetails?.total_distributeToInvestor_amt?.toLocaleString(
+                undefined,
+                { minimumFractionDigits: 2, maximumFractionDigits: 2 }
+              )}
             </Th>
             <Th
               textAlign={"center"}
@@ -167,62 +187,52 @@ const Destribution = () => {
     );
   };
 
+  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
+        centered={true}
+        emptyMessage={`We don't have any Sponers`}
+        tableHeadRow={tableHeadRow}
+        data={extractedArray}
+        isLoading={isLoading}
+        viewActionId={actionId}
+        setViewActionId={setActionId}
+        total={<Total />}
+        setMouseEnteredId={setMouseEnteredId}
+        setMouseEntered={setMouseEntered}
+      />
 
+      <CustomAlertDialog
+        onClose={() => setDeleteAlert(false)}
+        isOpen={deleteAlert}
+        message={"Are you sure you want to delete sponers?"}
+        alertHandler={handleDelete}
+        isLoading={isLoading}
+      />
 
-  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>
+      <AddIONav isOpen={isOpen} onClose={onClose} firstField={firstField} />
     </Box>
+  );
+};
 
-    <NormalTable
-      centered={true}
-      emptyMessage={`We don't have any Sponers`}
-      tableHeadRow={tableHeadRow}
-      data={extractedArray} 
-      isLoading={isLoading}
-      viewActionId={actionId}
-      setViewActionId={setActionId}
-      total={<Total/>}
-      setMouseEnteredId={setMouseEnteredId}
-      setMouseEntered={setMouseEntered}
-    />
-
-    <CustomAlertDialog
-      onClose={() => setDeleteAlert(false)}
-      isOpen={deleteAlert}
-      message={"Are you sure you want to delete sponers?"}
-      alertHandler={handleDelete}
-      isLoading={isLoading}
-    />
-
-
-
-<AddIONav 
-          isOpen={isOpen}
-          onClose={onClose}
-          firstField={firstField} />
-
-
-  </Box>
-  )
-}
-
-export default Destribution
\ No newline at end of file
+export default Destribution;
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/AddApproved.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/AddCaseDetails.jsx
similarity index 97%
rename from src/Pages/IO_Management/CreateIO/IOCashDetails/AddApproved.jsx
rename to src/Pages/IO_Management/CreateIO/IOCashDetails/AddCaseDetails.jsx
index 5685ce1..4f65cda 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/AddApproved.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/AddCaseDetails.jsx
@@ -36,7 +36,7 @@ const cashDetails = yup.object().shape({
   comments: yup.string().notRequired(),
 });
 
-const AddApproved = ({ isOpen, onClose, firstField, actionId, setActionId, data }) => {
+const AddCaseDetails = ({ isOpen, onClose, firstField, actionId, setActionId, data }) => {
   const params = useParams() 
   const id = params?.id
   const [file, setFile] = useState("");
@@ -79,13 +79,13 @@ const AddApproved = ({ isOpen, onClose, firstField, actionId, setActionId, data
     try {
 
       const res = await createIoCash({ data, id })
-      if (res?.data?.statusCode === 200) {
+      if (res?.data) {
         setIsLoading(false);
         toast({
           render: () => <ToastBox message={res?.data?.message} />,
         });
         handleClose()
-      }else if(res?.error?.status === 400){
+      }else if(res?.error){
         setIsLoading(false);
         toast({
           render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
@@ -94,6 +94,7 @@ const AddApproved = ({ isOpen, onClose, firstField, actionId, setActionId, data
 
     } catch (error) {
       console.log(error);
+      setIsLoading(false);
     }
 
   };
@@ -248,4 +249,4 @@ const AddApproved = ({ isOpen, onClose, firstField, actionId, setActionId, data
   );
 };
 
-export default AddApproved;
+export default AddCaseDetails;
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx
index 7746881..8e474a7 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx
@@ -26,20 +26,20 @@ import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
 import ToastBox from "../../../../Components/ToastBox";
 import AddCashDetails from "../AddCashDetails";
 import { debounce } from "../../../Admin/Contact";
-import AddApproved from "./addApproved";
+import AddApproved from "./AddCaseDetails";
 import { useUpdateIOCaseMutation } from "../../../../Services/io.service";
 import { useParams } from "react-router-dom";
+import AddCaseDetails from "./AddCaseDetails";
 
 const formatDate = (date) => new Date(date).toLocaleDateString();
 
 const Approved = () => {
   const firstField = useRef();
-  const params = useParams()
+  const params = useParams();
   const toast = useToast();
-  const id = params?.id
+  const id = params?.id;
   const { isOpen, onOpen, onClose } = useDisclosure();
-  const { IODetails, approved, setApproved } =
-    useContext(GlobalStateContext);
+  const { IODetails, approved, setApproved } = useContext(GlobalStateContext);
   const [searchTerm, setSearchTerm] = useState("");
   const [isLoading, setIsLoading] = useState(true);
   const [deleteAlert, setDeleteAlert] = useState(false);
@@ -65,69 +65,59 @@ const Approved = () => {
     });
   };
 
-  console.log("==============",IODetails?.ioCashStatusHistory?.Approved);
-  
+  console.log("==============", IODetails?.ioCashStatusHistory?.Approved);
 
   // Table filter
-  const filteredData = IODetails?.ioCashStatusHistory?.Approved?.filter((item) => {
-    // Filter by name (case insensitive)
-    const name = item.transactionDate;
-    const searchLower = searchTerm.toLowerCase();
-    const nameMatches = name.toLowerCase().includes(searchLower);
-    return nameMatches;
-  });
+  const filteredData = IODetails?.ioCashStatusHistory?.Approved?.filter(
+    (item) => {
+      // Filter by name (case insensitive)
+      const name = item.transactionDate;
+      const searchLower = searchTerm.toLowerCase();
+      const nameMatches = name.toLowerCase().includes(searchLower);
+      return nameMatches;
+    }
+  );
 
-  const [updateIOCase] = useUpdateIOCaseMutation()
+  const [updateIOCase] = useUpdateIOCaseMutation();
 
   const tableHeadRow = [
     "Sr No.",
     "Transaction date",
+    "Transaction Type",
     "Amount",
     "Comments",
-    "Update by",
+    // "Update by",
     "Update On",
   ];
 
   const extractedArray = filteredData?.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 date": (
-      <Text
-        as={"span"}
-        color={"gray.600"}
-        fontWeight={"500"}
-      >
+      <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
         {formatDate(item?.transactionDate)}
       </Text>
     ),
-    "Amount": (
-      <Text
-        as={"span"}
-        color={"gray.800"}
-        fontWeight={"500"}
-      >
+    "Transaction Type": (
+      <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
+        {item?.transactionType}
+      </Text>
+    ),
+    Amount: (
+      <Text as={"span"} color={"gray.800"} fontWeight={"500"}>
         <Badge ms={1} colorScheme="green" me={1}>
           $
         </Badge>
         {item?.transactionAmount}
       </Text>
     ),
-    "Comments": (
-      <Text
-        w={"100px"}
-        as={"span"}
-        color={"gray.800"}
-        fontWeight={"500"}
-      >
-        {item?.comments ? item?.comments : "---" }
+    Comments: (
+      <Text w={"100px"} as={"span"} color={"gray.800"} fontWeight={"500"}>
+        {item?.comments ? item?.comments : "---"}
       </Text>
     ),
     "Update by": (
@@ -140,7 +130,7 @@ const Approved = () => {
         alignItems={"center"}
       >
         <Avatar
-         mr={2}
+          mr={2}
           size="sm"
           name={item.creator?.firstName}
           src={item.creator?.profilePhoto}
@@ -149,12 +139,7 @@ const Approved = () => {
       </Text>
     ),
     "Update On": (
-      <Text
-        w={"100px"}
-        as={"span"}
-        color={"gray.800"}
-        fontWeight={"500"}
-      >
+      <Text w={"100px"} as={"span"} color={"gray.800"} fontWeight={"500"}>
         {formatDate(item.updatedAt)}
       </Text>
     ),
@@ -173,13 +158,15 @@ const Approved = () => {
     setIsLoading(true);
   };
 
-  const ioCashExporteDetails = IODetails?.ioCashStatusHistory?.Approved?.map((item, index) => ({
-    "Transaction date": item?.transactionDate,
-    "Transaction type": item?.transactionType,
-    Amount: parseFloat(item?.transactionAmount) || 0,
-    Comments: item?.comments,
-  }));
-  
+  const ioCashExporteDetails = IODetails?.ioCashStatusHistory?.Approved?.map(
+    (item, index) => ({
+      "Transaction date": item?.transactionDate,
+      "Transaction type": item?.transactionType,
+      Amount: parseFloat(item?.transactionAmount) || 0,
+      Comments: item?.comments,
+    })
+  );
+
   const exportToExcelNew = (data, fileName) => {
     const worksheet = XLSX.utils.json_to_sheet(data);
     const workbook = XLSX.utils.book_new();
@@ -273,9 +260,9 @@ const Approved = () => {
     );
   };
 
-  const handleAdd = async () =>{
-   try {
-      const res = await updateIOCase(id)
+  const handleAdd = async () => {
+    try {
+      const res = await updateIOCase(id);
       if (res?.data) {
         toast({
           render: () => (
@@ -283,8 +270,7 @@ const Approved = () => {
           ),
         });
         setIsLoading(false);
-        onOpen()
-
+        onOpen();
       } else if (res?.error) {
         toast({
           render: () => (
@@ -293,10 +279,8 @@ const Approved = () => {
         });
         setIsLoading(false);
       }
-   } catch (error) { 
-    
-   }
-  }
+    } catch (error) {}
+  };
 
   return (
     <Box {...OPACITY_ON_LOAD} pb={0}>
@@ -345,7 +329,7 @@ const Approved = () => {
               Add
             </Button> */}
             {IODetails?.isInvestedAmount ? (
-              <Button
+              localStorage?.getItem('role') ==="Maker"&& <Button
                 onClick={handleAdd}
                 leftIcon={<AddIcon />}
                 colorScheme="forestGreen"
@@ -367,7 +351,7 @@ const Approved = () => {
         isLoading={isLoading}
         viewActionId={actionId}
         setViewActionId={setActionId}
-        total={<Total/>}
+        total={<Total />}
         setMouseEnteredId={setMouseEnteredId}
         setMouseEntered={setMouseEntered}
       />
@@ -380,7 +364,7 @@ const Approved = () => {
         isLoading={isLoading}
       /> */}
 
-      <AddApproved
+      <AddCaseDetails
         isOpen={isOpen}
         onClose={onClose}
         firstField={firstField}
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
index f172fc8..fd89eea 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
@@ -35,17 +35,19 @@ import { debounce } from "../../../Admin/Contact";
 import AddPending from "./AddPending";
 import { useParams } from "react-router-dom";
 import { useUpdateIOCaseMutation } from "../../../../Services/io.service";
+import RequestApproveModal from "./RequestApproveModal";
+import RequestRejectModal from "./RequestRejectModal";
+import AddCaseDetails from "./AddCaseDetails";
 
 const formatDate = (date) => new Date(date).toLocaleDateString();
 
 const Pending = () => {
   const toast = useToast();
-  const params = useParams()
-  const id = params?.id
+  const params = useParams();
+  const id = params?.id;
   const firstField = useRef();
   const { isOpen, onOpen, onClose } = useDisclosure();
-  const { IODetails, approved, setApproved } =
-    useContext(GlobalStateContext);
+  const { IODetails, approved, setApproved } = useContext(GlobalStateContext);
   const [searchTerm, setSearchTerm] = useState("");
   const [isLoading, setIsLoading] = useState(true);
   const [deleteAlert, setDeleteAlert] = useState(false);
@@ -53,7 +55,17 @@ const Pending = () => {
   const [mouseEntered, setMouseEntered] = useState(false);
   const [mouseEnteredId, setMouseEnteredId] = useState("");
 
-  const [updateIOCase] = useUpdateIOCaseMutation()
+  const [updateIOCase] = useUpdateIOCaseMutation();
+  const {
+    isOpen: isConfirmOpen,
+    onOpen: onConfirmOpen,
+    onClose: onConfirmClose,
+  } = useDisclosure();
+  const {
+    isOpen: isRejectOpen,
+    onOpen: onRejectOpen,
+    onClose: onRejectClose,
+  } = useDisclosure();
 
   useEffect(() => {
     // Simulate loading
@@ -74,22 +86,25 @@ const Pending = () => {
   };
 
   // Table filter
-  const filteredData = IODetails?.ioCashStatusHistory?.Pending?.filter((item) => {
-    // Filter by name (case insensitive)
-    const name = item.transactionDate;
-    const searchLower = searchTerm.toLowerCase();
-    const nameMatches = name.toLowerCase().includes(searchLower);
-    return nameMatches;
-  });
+  const filteredData = IODetails?.ioCashStatusHistory?.Pending?.filter(
+    (item) => {
+      // Filter by name (case insensitive)
+      const name = item?.transactionDate;
+      const searchLower = searchTerm?.toLowerCase();
+      const nameMatches = name?.toLowerCase().includes(searchLower);
+      return nameMatches;
+    }
+  );
 
   const tableHeadRow = [
     "Sr No.",
     "Transaction date",
+    "Transaction Type",
     "Amount",
     "Comments",
-    "Update by",
+    // "Update by",
     "Update On",
-    "Status",
+    ...(localStorage?.getItem('role')!=="Maker" ? ["Status"] : []),
   ];
 
   const extractedArray = filteredData?.map((item, index) => ({
@@ -104,6 +119,11 @@ const Pending = () => {
         {formatDate(item?.transactionDate)}
       </Text>
     ),
+    "Transaction Type": (
+      <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
+        {item?.transactionType}
+      </Text>
+    ),
     Amount: (
       <Text as={"span"} color={"gray.800"} fontWeight={"500"}>
         <Badge ms={1} colorScheme="green" me={1}>
@@ -129,8 +149,8 @@ const Pending = () => {
         <Avatar
           mr={2}
           size="sm"
-          name={item.creator?.firstName}
-          src={item.creator?.profilePhoto}
+          name={item?.creator?.firstName}
+          src={item?.creator?.profilePhoto}
         />
         {item?.creator?.firstName}
       </Text>
@@ -213,6 +233,15 @@ const Pending = () => {
     setIsLoading(true);
   };
 
+  const ioCashExporteDetails = IODetails?.ioCashStatusHistory?.Approved?.map(
+    (item, index) => ({
+      "Transaction date": item?.transactionDate,
+      "Transaction type": item?.transactionType,
+      Amount: parseFloat(item?.transactionAmount) || 0,
+      Comments: item?.comments,
+    })
+  );
+
   const Total = () => {
     return (
       <Table size="sm">
@@ -306,30 +335,27 @@ const Pending = () => {
     );
   };
 
-  const handleAdd = async () =>{
+  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 res = await updateIOCase(id);
+      if (res?.data) {
+        toast({
+          render: () => (
+            <ToastBox status={"success"} message={res?.data?.message} />
+          ),
+        });
+        setIsLoading(false);
+        onOpen();
+      } else if (res?.error) {
+        toast({
+          render: () => (
+            <ToastBox status={"error"} message={res?.error?.data?.message} />
+          ),
+        });
+        setIsLoading(false);
+      }
+    } catch (error) {}
+  };
 
   return (
     <Box {...OPACITY_ON_LOAD} pb={0}>
@@ -352,17 +378,18 @@ const Pending = () => {
           />
 
           <HStack display={"flex"} alignItems={"center"}>
-            <Button
-               onClick={handleAdd}
-              leftIcon={<AddIcon />}
-              colorScheme={"forestGreen"}
-              rounded={"sm"}
-              fontSize={"xs"}
-              size={"sm"}
-              fontWeight={500}
-            >
-              Add
-            </Button>
+            {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>
@@ -387,7 +414,24 @@ const Pending = () => {
         isLoading={isLoading}
       />
 
-      <AddPending isOpen={isOpen} onClose={onClose} firstField={firstField} />
+      <AddCaseDetails
+        isOpen={isOpen}
+        onClose={onClose}
+        firstField={firstField}
+      />
+
+      <RequestApproveModal
+        // data={data?.data?.rows}
+        isOpen={isConfirmOpen}
+        onClose={onConfirmClose}
+        id={actionId}
+        // firstField={firstField}
+      />
+      <RequestRejectModal
+        isOpen={isRejectOpen}
+        onClose={onRejectClose}
+        id={actionId}
+      />
     </Box>
   );
 };
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
index 6be91f1..88c7ec1 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
@@ -26,6 +26,7 @@ import AddRejected from "./AddRejected";
 import { useUpdateIOCaseMutation } from "../../../../Services/io.service";
 import { useParams } from "react-router-dom";
 import ToastBox from "../../../../Components/ToastBox";
+import AddCaseDetails from "./AddCaseDetails";
   
   const formatDate = (date) => new Date(date).toLocaleDateString();
   
@@ -77,9 +78,10 @@ import ToastBox from "../../../../Components/ToastBox";
     const tableHeadRow = [
       "Sr No.",
       "Transaction date",
+      "Transaction Type",
       "Amount",
       "Comments",
-      "Update by",
+      // "Update by",
       "Update On",
     ];
   
@@ -103,6 +105,11 @@ import ToastBox from "../../../../Components/ToastBox";
           {formatDate(item?.transactionDate)}
         </Text>
       ),
+      "Transaction Type": (
+        <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
+          {item?.transactionType}
+        </Text>
+      ),
       "Amount": (
         <Text
           as={"span"}
@@ -298,8 +305,8 @@ import ToastBox from "../../../../Components/ToastBox";
             />
   
             <HStack display={"flex"} alignItems={"center"}>
-              {IODetails?.isInvestedAmount ? (
-              <Button
+            {IODetails?.isInvestedAmount ? (
+              localStorage?.getItem('role') ==="Maker"&& <Button
                 onClick={handleAdd}
                 leftIcon={<AddIcon />}
                 colorScheme="forestGreen"
@@ -334,7 +341,7 @@ import ToastBox from "../../../../Components/ToastBox";
           isLoading={isLoading}
         />
   
-        <AddRejected
+        <AddCaseDetails
           isOpen={isOpen}
           onClose={onClose}
           firstField={firstField}
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestApproveModal.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestApproveModal.jsx
new file mode 100644
index 0000000..6ffbfa9
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestApproveModal.jsx
@@ -0,0 +1,176 @@
+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 { useApproveIOCaseMutation } 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 RequestApproveModal = ({ isOpen, onClose, firstField ,id}) => {
+  const [isBtnLoading , setIsBtnLoading] = useState(false)
+
+  const toast = useToast()
+
+  const {
+    register,
+    reset,
+    watch,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(conformModalSchema),
+  });
+
+  const [ approveIOCase ] = useApproveIOCaseMutation()
+  
+
+  const onSubmit = async(data) => {
+    console.log(data, "tewxttttt");
+    setIsBtnLoading(true)
+    try {
+      const res = await approveIOCase({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()
+        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">
+                Maximum length should be 200 characters. You have entered
+                {watch("checkerComment")?.length || 0} characters.
+              </FormHelperText>
+            </FormControl>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              colorScheme="gray"
+              mr={3}
+              onClick={onClose}
+              size={"sm"}
+              rounded={"sm"}
+            >
+              Cancel
+            </Button>
+            <Button
+              colorScheme="forestGreen"
+              variant="solid"
+              size={"sm"}
+              rounded={"sm"}
+              isLoading={isBtnLoading}
+              type="submit"
+            >
+              Send
+            </Button>
+          </ModalFooter>
+        </Box>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default RequestApproveModal;
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestRejectModal.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestRejectModal.jsx
new file mode 100644
index 0000000..3a44d26
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestRejectModal.jsx
@@ -0,0 +1,164 @@
+import {
+  Box,
+  Button,
+  FormControl,
+  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 { useRejectIOCaseMutation } from "../../../../Services/io.service";
+
+export const conformModalSchema = yup.object().shape({
+  comments: yup.string().required("Comment is required"),
+});
+
+const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
+  const [isBtnLoading , setIsBtnLoading] = useState(false)
+
+  const toast = useToast()
+
+  const {
+    register,
+    reset,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(conformModalSchema),
+  });
+
+  const [ rejectIOCase ] = useRejectIOCaseMutation()
+  
+
+  const onSubmit = async(data) => {
+    console.log(data, "tewxttttt");
+    setIsBtnLoading(true)
+    try {
+      const res = await rejectIOCase({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()
+        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"}>Reject 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="comments"
+                {...register("comments")}
+                fontSize="sm"
+                type="textarea"
+                size="md"
+                placeholder={"Enter your comments...."}
+                rounded={"md"}
+                resize={"none"}
+              />
+              {errors.comments && (
+                <Text fontSize="xs" color="red">
+                  {errors.comments.message}
+                </Text>
+              )}
+            </FormControl>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              colorScheme="gray"
+              mr={3}
+              onClick={onClose}
+              size={"sm"}
+              rounded={"sm"}
+            >
+              Cancel
+            </Button>
+            <Button
+              colorScheme="forestGreen"
+              variant="solid"
+              size={"sm"}
+              rounded={"sm"}
+              isLoading={isBtnLoading}
+              type="submit"
+            >
+              Send
+            </Button>
+          </ModalFooter>
+        </Box>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default RequestRejectModal;
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/AddApproved.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/AddApproved.jsx
deleted file mode 100644
index ab6a5d3..0000000
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/AddApproved.jsx
+++ /dev/null
@@ -1,251 +0,0 @@
-import {
-  Box,
-  Button,
-  Drawer,
-  DrawerBody,
-  DrawerCloseButton,
-  DrawerContent,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerOverlay,
-  FormControl,
-  FormErrorMessage,
-  FormLabel,
-  Input,
-  Select,
-  Stack,
-  Textarea,
-  useToast,
-} from "@chakra-ui/react";
-import * as yup from "yup";
-import React, { useState, useEffect, useContext } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { yupResolver } from "@hookform/resolvers/yup";
-import { v4 as uuidv4 } from "uuid";
-import { useParams } from "react-router-dom";
-import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
-import { useCreateIoCashMutation, useCreateVideoArtifactsMutation, useUpdateVideoArtifactsMutation } from "../../../../Services/io.service";
-import ToastBox from "../../../../Components/ToastBox";
-import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
-import CurrencyInput from "../../../../Components/CurrencyInput";
-
-const cashDetails = yup.object().shape({
-  transactionDate: yup.string().required("Date is required"),
-  ioTransType_xid: yup.number().required("Cash transaction is required"),
-  transactionAmount: yup.number().required("Transaction Amount is required"),
-  comments: yup.string().notRequired(),
-});
-
-const AddApproved = ({ isOpen, onClose, firstField, actionId, setActionId, data }) => {
-  const params = useParams() 
-  const id = params?.id
-  const [file, setFile] = useState("");
-  const [fileName, setFileName] = useState("");
-  const [isLoading, setIsLoading] = useState(false)
-  const [alert, setAlert] = useState(false);
-  const toast = useToast();
-
-
-
-  // ======================[ Cotext Api ]
-  const { IODetails } = useContext(GlobalStateContext);
-  const found = data?.find((item) => item?.id === actionId);
-
-
-  const [createArtifactsVideo] = useCreateVideoArtifactsMutation()
-  const [updateVideoArtifacts] = useUpdateVideoArtifactsMutation()
-  // const {
-  //   data
-  // } = useGetArtifactsQuery(id) 
-
-  const {
-    control,
-    handleSubmit,
-    watch,
-    reset,
-    formState: { errors },
-  } = useForm({
-    resolver: yupResolver(cashDetails),
-  });
-
-
-  const [createIoCash] = useCreateIoCashMutation()
-
-
-  const onSubmit = async (data) => {
-
-    setIsLoading(true)
-
-    try {
-
-      const res = await createIoCash({ data, id })
-      if (res?.data?.statusCode === 200) {
-        setIsLoading(false);
-        toast({
-          render: () => <ToastBox message={res?.data?.message} />,
-        });
-        handleClose()
-      }else if(res?.error?.status === 400){
-        setIsLoading(false);
-        toast({
-          render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
-        });
-      }
-
-    } catch (error) {
-      console.log(error);
-    }
-
-  };
-
-
-
-  const handleConfirm = () => {
-    handleSubmit(onSubmit)();
-  };
-
-  const handleSave = () => {
-    handleSubmit(onSubmit)();
-  };
-
-  const handleClose = () => {
-    setAlert(false)
-    onClose()
-    reset({
-      transactionAmount:""
-    })
-  }
-
-  return (
-    <>
-      <Drawer
-        size={"md"}
-        isOpen={isOpen}
-        placement="right"
-        initialFocusRef={firstField}
-        onClose={handleClose}
-      >
-        <DrawerOverlay />
-        <DrawerContent>
-          <DrawerCloseButton />
-          <DrawerHeader fontSize={"sm"}>IO Nav Details</DrawerHeader>
-
-          <DrawerBody>
-            <Stack spacing={4}>
-              <FormControl isInvalid={errors.transactionDate} isRequired> 
-                <FormLabel fontSize={"sm"}>Date Selection</FormLabel>
-                <Controller
-                  name="transactionDate"
-                  control={control}
-                  render={({ field }) => (
-                    <Input 
-                    focusBorderColor="forestGreen.300" {...field} fontSize={"sm"} type="date" size={"sm"} />
-                  )}
-                />
-                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
-                  {errors.transactionDate?.message}
-                </FormErrorMessage>
-              </FormControl>
-
-
-              <FormControl isInvalid={errors.ioTransType_xid} isRequired>
-                <FormLabel fontSize={"sm"}>Cash transaction</FormLabel>
-                <Controller
-                  name="ioTransType_xid"
-                  control={control}
-                  render={({ field }) => (
-                    <Select
-                      {...field}
-                      placeholder="Select an option"
-                      fontSize={"sm"}
-                      size={"sm"}
-                      focusBorderColor="forestGreen.300"
-                    >
-                      {IODetails?.ioCashTransaction?.map(({ id, transactionName }) => (
-                        <option key={id} value={id}>
-                          {transactionName}
-                        </option>
-                      ))}
-                    </Select>
-                  )}
-                />
-                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
-                  {errors.ioTransType_xid?.message}
-                </FormErrorMessage>
-              </FormControl>
-
-
-
-
-              <FormControl isInvalid={errors.transactionAmount} isRequired>
-                <FormLabel fontSize={"sm"}>Transaction Amount</FormLabel>
-                <Controller
-                  name="transactionAmount"
-                  control={control}
-                  render={({ field }) => (
-                    <CurrencyInput {...field} textAlign={'right'} fontSize={"sm"} type="number" size={"sm"} />
-                  )}
-                />
-                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
-                  {errors.transactionAmount?.message}
-                </FormErrorMessage>
-              </FormControl>
-
-
-
-              <FormControl isInvalid={errors.comments}>
-                <FormLabel fontSize={"sm"}>Comments</FormLabel>
-                <Controller
-                  name="comments"
-                  control={control}
-                  render={({ field }) => (
-                    <Textarea {...field} textAlign={'left'} 
-                    focusBorderColor="forestGreen.300" fontSize={"sm"} type="text" size={"sm"} />
-                  )}
-                />
-                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
-                  {errors.comments?.message}
-                </FormErrorMessage>
-              </FormControl>
-
-            </Stack>
-          </DrawerBody>
-
-          <DrawerFooter>
-            <Button
-              variant="outline"
-              colorScheme={"forestGreen"}
-              rounded={"sm"}
-              size={"sm"}
-              mr={3}
-              onClick={handleClose}
-            >
-              Cancel
-            </Button>
-
-            <Button
-              colorScheme={"forestGreen"}
-              rounded={"sm"}
-              size={"sm"}
-
-              onClick={() => setAlert(true)}
-            >
-              Save
-            </Button>
-          </DrawerFooter>
-        </DrawerContent>
-      </Drawer>
-
-
-      <CustomAlertDialog
-        isOpen={alert}
-        onClose={() => setAlert(false)}
-        alertHandler={handleSave}
-        message={"Are you sure you want to add cash details?"}
-        isLoading={isLoading}
-      />
-    </>
-  );
-};
-
-export default AddApproved;
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/AddPending.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/AddNavDetails.jsx
similarity index 67%
rename from src/Pages/IO_Management/CreateIO/IONAVDetails/AddPending.jsx
rename to src/Pages/IO_Management/CreateIO/IONAVDetails/AddNavDetails.jsx
index ac0e038..bc42ce1 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/AddPending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/AddNavDetails.jsx
@@ -11,10 +11,13 @@ import {
   FormControl,
   FormErrorMessage,
   FormLabel,
+  HStack,
   Input,
   Select,
   Stack,
+  Text,
   Textarea,
+  VStack,
   useToast,
 } from "@chakra-ui/react";
 import * as yup from "yup";
@@ -24,20 +27,20 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { v4 as uuidv4 } from "uuid";
 import { useParams } from "react-router-dom";
 import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
-import { useCreateIoCashMutation, useCreateVideoArtifactsMutation, useUpdateVideoArtifactsMutation } from "../../../../Services/io.service";
 import ToastBox from "../../../../Components/ToastBox";
 import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
 import CurrencyInput from "../../../../Components/CurrencyInput";
+import { useAddNavDetailsMutation } from "../../../../Services/io.service";
+import { formatDatee } from "../../../../Components/FormField";
 
-const cashDetails = yup.object().shape({
+const ioNav = yup.object().shape({
   transactionDate: yup.string().required("Date is required"),
-  ioTransType_xid: yup.number().required("Cash transaction is required"),
-  transactionAmount: yup.number().required("Transaction Amount is required"),
+  transactionAmount: yup.number().required("New NAV is required"),
   comments: yup.string().notRequired(),
 });
 
-const AddPending = ({ isOpen, onClose, firstField, actionId, setActionId, data }) => {
-  const params = useParams() 
+const AddNavDetails = ({ isOpen, onClose, firstField, actionId, setActionId, data }) => {
+  const params = useParams()
   const id = params?.id
   const [file, setFile] = useState("");
   const [fileName, setFileName] = useState("");
@@ -52,11 +55,10 @@ const AddPending = ({ isOpen, onClose, firstField, actionId, setActionId, data }
   const found = data?.find((item) => item?.id === actionId);
 
 
-  const [createArtifactsVideo] = useCreateVideoArtifactsMutation()
-  const [updateVideoArtifacts] = useUpdateVideoArtifactsMutation()
+  const [addNavDetails] = useAddNavDetailsMutation()
   // const {
   //   data
-  // } = useGetArtifactsQuery(id) 
+  // } = useGetArtifactsQuery(id)
 
   const {
     control,
@@ -65,35 +67,34 @@ const AddPending = ({ isOpen, onClose, firstField, actionId, setActionId, data }
     reset,
     formState: { errors },
   } = useForm({
-    resolver: yupResolver(cashDetails),
+    resolver: yupResolver(ioNav),
   });
 
 
-  const [createIoCash] = useCreateIoCashMutation()
-
-
   const onSubmit = async (data) => {
 
     setIsLoading(true)
 
     try {
 
-      const res = await createIoCash({ data, id })
-      if (res?.data?.statusCode === 200) {
+      const res = await addNavDetails({ data, id })
+      if (res?.data?.statusCode === 201) {
         setIsLoading(false);
         toast({
           render: () => <ToastBox message={res?.data?.message} />,
         });
         handleClose()
       }else if(res?.error?.status === 400){
-        setIsLoading(false);
         toast({
           render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
         });
+        handleClose()
       }
 
+
     } catch (error) {
       console.log(error);
+
     }
 
   };
@@ -109,13 +110,31 @@ const AddPending = ({ isOpen, onClose, firstField, actionId, setActionId, data }
   };
 
   const handleClose = () => {
+    setIsLoading(false);
     setAlert(false)
     onClose()
     reset({
-      transactionAmount:""
+      transactionDate:"",
+      transactionAmount:"",
+      comments:""
     })
   }
 
+
+
+
+const today = formatDatee(new Date(), 'yyyy-MM-dd');
+
+function calculatePercentage(newNav, currNav) {
+const per = (newNav - currNav) / currNav * 100
+return per.toFixed(2)
+}
+
+
+console.log(calculatePercentage(1092500, 976070));
+
+
+
   return (
     <>
       <Drawer
@@ -132,14 +151,15 @@ const AddPending = ({ isOpen, onClose, firstField, actionId, setActionId, data }
 
           <DrawerBody>
             <Stack spacing={4}>
-              <FormControl isInvalid={errors.transactionDate} isRequired> 
+              <FormControl isInvalid={errors.transactionDate} isRequired>
                 <FormLabel fontSize={"sm"}>Date Selection</FormLabel>
                 <Controller
                   name="transactionDate"
                   control={control}
                   render={({ field }) => (
-                    <Input 
-                    focusBorderColor="forestGreen.300" {...field} fontSize={"sm"} type="date" size={"sm"} />
+                    <Input {...field} 
+                    max={today} // Set max attribute to today’s date
+                     fontSize={"sm"} type="date" size={"sm"} />
                   )}
                 />
                 <FormErrorMessage fontSize={"xs"} fontWeight={500}>
@@ -148,37 +168,9 @@ const AddPending = ({ isOpen, onClose, firstField, actionId, setActionId, data }
               </FormControl>
 
 
-              <FormControl isInvalid={errors.ioTransType_xid} isRequired>
-                <FormLabel fontSize={"sm"}>Cash transaction</FormLabel>
-                <Controller
-                  name="ioTransType_xid"
-                  control={control}
-                  render={({ field }) => (
-                    <Select
-                      {...field}
-                      placeholder="Select an option"
-                      fontSize={"sm"}
-                      size={"sm"}
-                      focusBorderColor="forestGreen.300"
-                    >
-                      {IODetails?.ioCashTransaction?.map(({ id, transactionName }) => (
-                        <option key={id} value={id}>
-                          {transactionName}
-                        </option>
-                      ))}
-                    </Select>
-                  )}
-                />
-                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
-                  {errors.ioTransType_xid?.message}
-                </FormErrorMessage>
-              </FormControl>
-
-
-
 
               <FormControl isInvalid={errors.transactionAmount} isRequired>
-                <FormLabel fontSize={"sm"}>Transaction Amount</FormLabel>
+                <FormLabel fontSize={"sm"}>New NAV</FormLabel>
                 <Controller
                   name="transactionAmount"
                   control={control}
@@ -190,7 +182,26 @@ const AddPending = ({ isOpen, onClose, firstField, actionId, setActionId, data }
                   {errors.transactionAmount?.message}
                 </FormErrorMessage>
               </FormControl>
+              
 
+              <HStack justify={'start'} gap={10} bg={'green.100'} p={3} rounded={'md'} shadow={'md'}>
+                <VStack align={'start'}>
+                  <Text as={'span'} fontSize={'sm'} fontWeight={500}>Current nav</Text>
+                  <Text as={'span'} fontSize={'sm'}>
+                    {parseFloat(IODetails?.ioNAV || 0).toLocaleString(undefined, {
+                      minimumFractionDigits: 2,
+                      maximumFractionDigits: 2,
+                    })}
+                  </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>
+                </VStack>
+              </HStack>
+              
 
 
               <FormControl isInvalid={errors.comments}>
@@ -199,8 +210,7 @@ const AddPending = ({ isOpen, onClose, firstField, actionId, setActionId, data }
                   name="comments"
                   control={control}
                   render={({ field }) => (
-                    <Textarea {...field} textAlign={'left'} 
-                    focusBorderColor="forestGreen.300" fontSize={"sm"} type="text" size={"sm"} />
+                    <Textarea {...field}  fontSize={"sm"} type="text" size={"sm"} />
                   )}
                 />
                 <FormErrorMessage fontSize={"xs"} fontWeight={500}>
@@ -241,11 +251,11 @@ const AddPending = ({ isOpen, onClose, firstField, actionId, setActionId, data }
         isOpen={alert}
         onClose={() => setAlert(false)}
         alertHandler={handleSave}
-        message={"Are you sure you want to add cash details?"}
+        message={"Are you sure you want to add NAV details?"}
         isLoading={isLoading}
       />
     </>
   );
 };
 
-export default AddPending;
+export default AddNavDetails;
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/AddRejected.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/AddRejected.jsx
deleted file mode 100644
index 18b271b..0000000
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/AddRejected.jsx
+++ /dev/null
@@ -1,251 +0,0 @@
-import {
-  Box,
-  Button,
-  Drawer,
-  DrawerBody,
-  DrawerCloseButton,
-  DrawerContent,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerOverlay,
-  FormControl,
-  FormErrorMessage,
-  FormLabel,
-  Input,
-  Select,
-  Stack,
-  Textarea,
-  useToast,
-} from "@chakra-ui/react";
-import * as yup from "yup";
-import React, { useState, useEffect, useContext } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { yupResolver } from "@hookform/resolvers/yup";
-import { v4 as uuidv4 } from "uuid";
-import { useParams } from "react-router-dom";
-import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
-import { useCreateIoCashMutation, useCreateVideoArtifactsMutation, useUpdateVideoArtifactsMutation } from "../../../../Services/io.service";
-import ToastBox from "../../../../Components/ToastBox";
-import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
-import CurrencyInput from "../../../../Components/CurrencyInput";
-
-const cashDetails = yup.object().shape({
-  transactionDate: yup.string().required("Date is required"),
-  ioTransType_xid: yup.number().required("Cash transaction is required"),
-  transactionAmount: yup.number().required("Transaction Amount is required"),
-  comments: yup.string().notRequired(),
-});
-
-const AddRejected = ({ isOpen, onClose, firstField, actionId, setActionId, data }) => {
-  const params = useParams() 
-  const id = params?.id
-  const [file, setFile] = useState("");
-  const [fileName, setFileName] = useState("");
-  const [isLoading, setIsLoading] = useState(false)
-  const [alert, setAlert] = useState(false);
-  const toast = useToast();
-
-
-
-  // ======================[ Cotext Api ]
-  const { IODetails } = useContext(GlobalStateContext);
-  const found = data?.find((item) => item?.id === actionId);
-
-
-  const [createArtifactsVideo] = useCreateVideoArtifactsMutation()
-  const [updateVideoArtifacts] = useUpdateVideoArtifactsMutation()
-  // const {
-  //   data
-  // } = useGetArtifactsQuery(id) 
-
-  const {
-    control,
-    handleSubmit,
-    watch,
-    reset,
-    formState: { errors },
-  } = useForm({
-    resolver: yupResolver(cashDetails),
-  });
-
-
-  const [createIoCash] = useCreateIoCashMutation()
-
-
-  const onSubmit = async (data) => {
-
-    setIsLoading(true)
-
-    try {
-
-      const res = await createIoCash({ data, id })
-      if (res?.data?.statusCode === 200) {
-        setIsLoading(false);
-        toast({
-          render: () => <ToastBox message={res?.data?.message} />,
-        });
-        handleClose()
-      }else if(res?.error?.status === 400){
-        setIsLoading(false);
-        toast({
-          render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
-        });
-      }
-
-    } catch (error) {
-      console.log(error);
-    }
-
-  };
-
-
-
-  const handleConfirm = () => {
-    handleSubmit(onSubmit)();
-  };
-
-  const handleSave = () => {
-    handleSubmit(onSubmit)();
-  };
-
-  const handleClose = () => {
-    setAlert(false)
-    onClose()
-    reset({
-      transactionAmount:""
-    })
-  }
-
-  return (
-    <>
-      <Drawer
-        size={"md"}
-        isOpen={isOpen}
-        placement="right"
-        initialFocusRef={firstField}
-        onClose={handleClose}
-      >
-        <DrawerOverlay />
-        <DrawerContent>
-          <DrawerCloseButton />
-          <DrawerHeader fontSize={"sm"}>IO Nav Details</DrawerHeader>
-
-          <DrawerBody>
-            <Stack spacing={4}>
-              <FormControl isInvalid={errors.transactionDate} isRequired> 
-                <FormLabel fontSize={"sm"}>Date Selection</FormLabel>
-                <Controller
-                  name="transactionDate"
-                  control={control}
-                  render={({ field }) => (
-                    <Input 
-                    focusBorderColor="forestGreen.300" {...field} fontSize={"sm"} type="date" size={"sm"} />
-                  )}
-                />
-                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
-                  {errors.transactionDate?.message}
-                </FormErrorMessage>
-              </FormControl>
-
-
-              <FormControl isInvalid={errors.ioTransType_xid} isRequired>
-                <FormLabel fontSize={"sm"}>Cash transaction</FormLabel>
-                <Controller
-                  name="ioTransType_xid"
-                  control={control}
-                  render={({ field }) => (
-                    <Select
-                      {...field}
-                      placeholder="Select an option"
-                      fontSize={"sm"}
-                      size={"sm"}
-                      focusBorderColor="forestGreen.300"
-                    >
-                      {IODetails?.ioCashTransaction?.map(({ id, transactionName }) => (
-                        <option key={id} value={id}>
-                          {transactionName}
-                        </option>
-                      ))}
-                    </Select>
-                  )}
-                />
-                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
-                  {errors.ioTransType_xid?.message}
-                </FormErrorMessage>
-              </FormControl>
-
-
-
-
-              <FormControl isInvalid={errors.transactionAmount} isRequired>
-                <FormLabel fontSize={"sm"}>Transaction Amount</FormLabel>
-                <Controller
-                  name="transactionAmount"
-                  control={control}
-                  render={({ field }) => (
-                    <CurrencyInput {...field} textAlign={'right'} fontSize={"sm"} type="number" size={"sm"} />
-                  )}
-                />
-                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
-                  {errors.transactionAmount?.message}
-                </FormErrorMessage>
-              </FormControl>
-
-
-
-              <FormControl isInvalid={errors.comments}>
-                <FormLabel fontSize={"sm"}>Comments</FormLabel>
-                <Controller
-                  name="comments"
-                  control={control}
-                  render={({ field }) => (
-                    <Textarea {...field} textAlign={'left'} 
-                    focusBorderColor="forestGreen.300" fontSize={"sm"} type="text" size={"sm"} />
-                  )}
-                />
-                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
-                  {errors.comments?.message}
-                </FormErrorMessage>
-              </FormControl>
-
-            </Stack>
-          </DrawerBody>
-
-          <DrawerFooter>
-            <Button
-              variant="outline"
-              colorScheme={"forestGreen"}
-              rounded={"sm"}
-              size={"sm"}
-              mr={3}
-              onClick={handleClose}
-            >
-              Cancel
-            </Button>
-
-            <Button
-              colorScheme={"forestGreen"}
-              rounded={"sm"}
-              size={"sm"}
-
-              onClick={() => setAlert(true)}
-            >
-              Save
-            </Button>
-          </DrawerFooter>
-        </DrawerContent>
-      </Drawer>
-
-
-      <CustomAlertDialog
-        isOpen={alert}
-        onClose={() => setAlert(false)}
-        alertHandler={handleSave}
-        message={"Are you sure you want to add cash details?"}
-        isLoading={isLoading}
-      />
-    </>
-  );
-};
-
-export default AddRejected;
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx
index 97c1623..b3b1a2e 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx
@@ -28,12 +28,13 @@ import {
   import { debounce } from "../../../Admin/Contact";
 import { useParams } from "react-router-dom";
 import { useUpdateIOCaseMutation } from "../../../../Services/io.service";
-import AddApproved from "./AddApproved";
+import AddApproved from "./AddNavDetails";
+import AddNavDetails from "./AddNavDetails";
   
   const formatDate = (date) => new Date(date).toLocaleDateString();
   
   const Approved = () => {
-    const params = useParams()
+    const params = useParams() 
     const toast = useToast();
     const id = params?.id
     const firstField = useRef();
@@ -71,8 +72,8 @@ import AddApproved from "./AddApproved";
     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);
+      const searchLower = searchTerm?.toLowerCase();
+      const nameMatches = name?.toLowerCase().includes(searchLower);
       return nameMatches;
     });
   
@@ -83,7 +84,7 @@ import AddApproved from "./AddApproved";
       "Last Nav Update",
       "Investment Closed",
       "Comments", 
-      "Updated By",
+      // "Updated By",
     ];
   
     const extractedArray = filteredData?.map((item, index) => ({
@@ -171,30 +172,30 @@ import AddApproved from "./AddApproved";
     }));
 
     
-  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 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(
@@ -266,7 +267,7 @@ import AddApproved from "./AddApproved";
               Export xls
             </Button>
             {IODetails?.isInvestedAmount ? (
-              <Button
+              localStorage?.getItem('role') ==="Maker"&& <Button
                 onClick={handleAdd}
                 leftIcon={<AddIcon />}
                 colorScheme="forestGreen"
@@ -278,7 +279,7 @@ import AddApproved from "./AddApproved";
               </Button>
             ) : null}
           </HStack>
-        </HStack>
+          </HStack>
         </Box>
   
         <NormalTable
@@ -300,7 +301,7 @@ import AddApproved from "./AddApproved";
           isLoading={isLoading}
         />
 
-      <AddApproved
+      <AddNavDetails
         isOpen={isOpen}
         onClose={onClose}
         firstField={firstField}
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx
index fd8836c..c4bfe4d 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx
@@ -1,119 +1,131 @@
 import {
-    Badge,
-    Box,
-    Button,
-    HStack,
-    Input,
-    Text,
-    Tooltip,
-    useDisclosure,
-    useToast,
-  } from "@chakra-ui/react";
-  import React, { useContext, useEffect, useRef, useState } from "react";
-  import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
-  import NormalTable from "../../../../Components/DataTable/NormalTable";
-  import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
-  import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
-import { CheckIcon, CloseIcon } from "@chakra-ui/icons";
-  
-  const formatDate = (date) => new Date(date).toLocaleDateString();
-  
-  const Pending = () => {
-    const toast = useToast();
-    const firstField = useRef();
-    const { isOpen, onOpen, onClose } = useDisclosure();
-    const { IODetails, iONAVDetail, setIONAVDetail } =
-      useContext(GlobalStateContext);
-    const [searchTerm, setSearchTerm] = useState("");
-    const [isLoading, setIsLoading] = useState(true);
-    const [deleteAlert, setDeleteAlert] = useState(false);
-    const [actionId, setActionId] = useState(false);
-    const [mouseEntered, setMouseEntered] = useState(false);
-    const [mouseEnteredId, setMouseEnteredId] = useState("");
-  
-    useEffect(() => {
-      // Simulate loading
-      const timer = setTimeout(() => {
-        setIsLoading(false);
-      }, 1500);
-  
-      // Cleanup the timer on component unmount
-      return () => clearTimeout(timer);
-    }, []);
-  
-    const formatDate = (date) => {
-      return new Date(date).toLocaleDateString("en-GB", {
-        day: "2-digit",
-        month: "2-digit",
-        year: "numeric",
-      });
-    };
-  
-  
-    // Table filter
-    const filteredData = IODetails?.ioNAVStatusHistory?.Pending?.filter((item) => {
-      // Filter by name (case insensitive)
-      const name = item.transactionDate;
-      const searchLower = searchTerm.toLowerCase();
-      const nameMatches = name.toLowerCase().includes(searchLower);
-      return nameMatches;
+  Avatar,
+  Badge,
+  Box,
+  Button,
+  HStack,
+  Input,
+  Text,
+  Tooltip,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
+import NormalTable from "../../../../Components/DataTable/NormalTable";
+import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+import { AddIcon, CheckIcon, CloseIcon } from "@chakra-ui/icons";
+import { useParams } from "react-router-dom";
+import { useUpdateIOCaseMutation } from "../../../../Services/io.service";
+import ToastBox from "../../../../Components/ToastBox";
+import AddNavDetails from "./AddNavDetails";
+import RequestApproveModal from "./RequestApproveModal";
+import RequestRejectModal from "./RequestRejectModal";
+
+const formatDate = (date) => new Date(date).toLocaleDateString();
+
+const Pending = () => {
+  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();
+
+  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",
     });
-  
-    const tableHeadRow = [
-      "Sr No.",
-      "Valuation date",
-      "NAV",
-      "Last Nav Update",
-      "Investment Closed",
-      "Comments",
-      "Updated By",
-      "Status",
-    ];
-  
-    const extractedArray = filteredData?.map((item, index) => ({
-      id: item?.id,
-      "Sr No.": (
-        <Text
-          as={"span"}
-          color={"gray.800"}
-          fontWeight={"500"}
-        >
-          {index + 1}.
-        </Text>
-      ),
-      "Valuation date": (
-        <Text
-          as={"span"}
-          color={"gray.600"}
-          fontWeight={"500"}
-        >
-          {formatDate(item?.transactionDate)}
-        </Text>
-      ),
-      "NAV": (
-        <Text
-          as={"span"}
-          color={"gray.600"}
-          fontWeight={"500"}
-        >
-            <Badge ms={1} colorScheme="green" me={1}>
-            $
-          </Badge>
-          {item?.transactionAmount}
-        </Text>
-      ),
-      "Last Nav Update": (
-        <Text
-          justifyContent={"center"}
-          as={"span"}
-          color={"teal.900"}
-          fontWeight={"500"}
-          className="d-flex align-items-center web-text-small"
-        >
-          {item.previousNAVvalue && `${item.previousNAVvalue}`}
-        </Text>
-      ),
-      "Investment Closed": ( 
+  };
+
+  // Table filter
+  const filteredData = IODetails?.ioNAVStatusHistory?.Pending?.filter(
+    (item) => {
+      // Filter by name (case insensitive)
+      const name = item?.transactionDate;
+      const searchLower = searchTerm?.toLowerCase();
+      const nameMatches = name?.toLowerCase().includes(searchLower);
+      return nameMatches;
+    }
+  );
+
+  const tableHeadRow = [
+    "Sr No.",
+    "Valuation date",
+    "NAV",
+    "Last Nav Update",
+    "Investment Closed",
+    "Comments",
+    // "Updated By",
+    ...(localStorage?.getItem('role')!=="Maker" ? ["Status"] : []),
+  ];
+
+  const extractedArray = filteredData?.map((item, index) => ({
+    id: item?.id,
+    "Sr No.": (
+      <Text as={"span"} color={"gray.800"} fontWeight={"500"}>
+        {index + 1}.
+      </Text>
+    ),
+    "Valuation date": (
+      <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
+        {formatDate(item?.transactionDate)}
+      </Text>
+    ),
+    NAV: (
+      <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
+        <Badge ms={1} colorScheme="green" me={1}>
+          $
+        </Badge>
+        {item?.transactionAmount}
+      </Text>
+    ),
+    "Last Nav Update": (
+      <Text
+        justifyContent={"center"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item.previousNAVvalue && `${item.previousNAVvalue}`}
+      </Text>
+    ),
+    "Investment Closed": (
       <Text
         justifyContent={"center"}
         as={"span"}
@@ -124,150 +136,195 @@ import { CheckIcon, CloseIcon } from "@chakra-ui/icons";
         {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>
-      ),
-      "Status": (
-        <Box display={"flex"} justifyContent={"center"} gap={2}>
-          <Tooltip
+        {item?.creator?.firstName}
+      </Text>
+    ),
+    Status: (
+      <Box display={"flex"} justifyContent={"center"} gap={2}>
+        <Tooltip
+          rounded={"sm"}
+          fontSize={"xs"}
+          label="Approve"
+          bg="#fff"
+          color={"green.500"}
+          placement="left-start"
+        >
+          <Button
+            // colorScheme="forestGreen"
+            // color="green.500"
             rounded={"sm"}
-            fontSize={"xs"}
-            label="Approve"
-            bg="#fff"
-            color={"green.500"}
-            placement="left-start"
+            size={"xs"}
+            textTransform={"inherit"}
+            fontWeight={500}
+            px={2}
+            py={1}
+            onClick={() => {
+              setActionId(item.id);
+              onConfirmOpen();
+            }}
+            colorScheme="green"
+            variant={"solid"}
+            cursor={"pointer"}
           >
-            <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 
+            <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"}
-            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}
+            size={"xs"}
+            textTransform={"inherit"}
+            fontWeight={500}
+            px={2}
+            onClick={() => {
+              setActionId(item.id);
+              onRejectOpen();
+            }}
+            py={1}
             // variant={"solid"}
-            >
-              <CloseIcon fontSize={"10px"} />
-            </Button>
-          </Tooltip>
-        </Box>
-      ),
-    }));
-  
-    const handleDelete = () => {
-      const updatedSponsors = sponser.filter(
-        (sponsor) => sponsor.id !== actionId
-      );
-  
-      setTimeout(() => {
-        setCaseDetails(updatedSponsors);
-        setDeleteAlert(false);
-        setIsLoading(false);
-      }, 100);
-      setIsLoading(true);
-    };
-  
-    return (
-      <Box {...OPACITY_ON_LOAD} pb={0}>
-        <Box bg="white.500">
-          <HStack
-            display={"flex"}
-            justifyContent={"space-between"}
-            pb={3}
-            spacing="24px"
           >
-            <Input
-              type="search"
-              width={300}
-              placeholder="Search..."
-              size="sm"
-              rounded="sm"
-              focusBorderColor="green.500"
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-            />
-          </HStack>
-        </Box>
-  
-        <NormalTable
-          emptyMessage={`We don't have any Sponers`}
-          tableHeadRow={tableHeadRow}
-          data={extractedArray}
-          isLoading={isLoading}
-          viewActionId={actionId}
-          setViewActionId={setActionId}
-          setMouseEnteredId={setMouseEnteredId}
-          setMouseEntered={setMouseEntered}
-        />
-  
-        <CustomAlertDialog
-          onClose={() => setDeleteAlert(false)}
-          isOpen={deleteAlert}
-          message={"Are you sure you want to delete sponers?"}
-          alertHandler={handleDelete}
-          isLoading={isLoading}
-        />
+            <CloseIcon fontSize={"10px"} />
+          </Button>
+        </Tooltip>
       </Box>
+    ),
+  }));
+
+  const handleDelete = () => {
+    const updatedSponsors = sponser.filter(
+      (sponsor) => sponsor.id !== actionId
     );
+
+    setTimeout(() => {
+      setCaseDetails(updatedSponsors);
+      setDeleteAlert(false);
+      setIsLoading(false);
+    }, 100);
+    setIsLoading(true);
   };
-  
-  export default Pending;
-  
\ No newline at end of file
+
+  const handleAdd = async () => {
+    try {
+      const res = await updateIOCase(id);
+      if (res?.data) {
+        toast({
+          render: () => (
+            <ToastBox status={"success"} message={res?.data?.message} />
+          ),
+        });
+        setIsLoading(false);
+        onOpen();
+      } else if (res?.error) {
+        toast({
+          render: () => (
+            <ToastBox status={"error"} message={res?.error?.data?.message} />
+          ),
+        });
+        setIsLoading(false);
+      }
+    } catch (error) {}
+  };
+
+  return (
+    <Box {...OPACITY_ON_LOAD} pb={0}>
+      <Box bg="white.500">
+        <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}
+      />
+      <AddNavDetails
+        isOpen={isOpen}
+        onClose={onClose}
+        firstField={firstField}
+      />
+      <RequestApproveModal
+        // data={data?.data?.rows}
+        isOpen={isConfirmOpen}
+        onClose={onConfirmClose}
+        id={actionId}
+        // firstField={firstField}
+      />
+      <RequestRejectModal
+        isOpen={isRejectOpen}
+        onClose={onRejectClose}
+        id={actionId}
+      />
+    </Box>
+  );
+};
+
+export default Pending;
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/Rejected.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/Rejected.jsx
index caa437c..351e5dc 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/Rejected.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/Rejected.jsx
@@ -25,11 +25,16 @@ import {
   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 } =
@@ -40,6 +45,7 @@ import {
     const [actionId, setActionId] = useState(false);
     const [mouseEntered, setMouseEntered] = useState(false);
     const [mouseEnteredId, setMouseEnteredId] = useState("");
+    const [updateIOCase] = useUpdateIOCaseMutation()
   
     useEffect(() => {
       // Simulate loading
@@ -76,7 +82,7 @@ import {
       "Last Nav Update",
       "Investment Closed",
       "Comments", 
-      "Updated By",
+      // "Updated By",
     ];
   
     const extractedArray = filteredData?.map((item, index) => ({
@@ -176,6 +182,31 @@ import {
       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) { 
+       
+      }
+     }
+
     return (
       <Box {...OPACITY_ON_LOAD} pb={0}>
         <Box bg="white.500">
@@ -195,6 +226,19 @@ import {
               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>
   
@@ -216,6 +260,13 @@ import {
           alertHandler={handleDelete}
           isLoading={isLoading}
         />
+
+      <AddNavDetails
+        isOpen={isOpen}
+        onClose={onClose}
+        firstField={firstField}
+      />
+
       </Box>
     );
   };
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestApproveModal.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestApproveModal.jsx
new file mode 100644
index 0000000..861d3ed
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestApproveModal.jsx
@@ -0,0 +1,176 @@
+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 { useApproveIOCaseMutation, useApproveIONavMutation } 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 RequestApproveModal = ({ isOpen, onClose, firstField ,id}) => {
+  const [isBtnLoading , setIsBtnLoading] = useState(false)
+
+  const toast = useToast()
+
+  const {
+    register,
+    reset,
+    watch,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(conformModalSchema),
+  });
+
+  const [ approveIONav ] = useApproveIONavMutation()
+  
+
+  const onSubmit = async(data) => {
+    console.log(data, "tewxttttt");
+    setIsBtnLoading(true)
+    try {
+      const res = await approveIONav({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()
+        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">
+                Maximum length should be 200 characters. You have entered
+                {watch("checkerComment")?.length || 0} characters.
+              </FormHelperText>
+            </FormControl>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              colorScheme="gray"
+              mr={3}
+              onClick={onClose}
+              size={"sm"}
+              rounded={"sm"}
+            >
+              Cancel
+            </Button>
+            <Button
+              colorScheme="forestGreen"
+              variant="solid"
+              size={"sm"}
+              rounded={"sm"}
+              isLoading={isBtnLoading}
+              type="submit"
+            >
+              Send
+            </Button>
+          </ModalFooter>
+        </Box>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default RequestApproveModal;
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestRejectModal.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestRejectModal.jsx
new file mode 100644
index 0000000..3a44d26
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestRejectModal.jsx
@@ -0,0 +1,164 @@
+import {
+  Box,
+  Button,
+  FormControl,
+  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 { useRejectIOCaseMutation } from "../../../../Services/io.service";
+
+export const conformModalSchema = yup.object().shape({
+  comments: yup.string().required("Comment is required"),
+});
+
+const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
+  const [isBtnLoading , setIsBtnLoading] = useState(false)
+
+  const toast = useToast()
+
+  const {
+    register,
+    reset,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(conformModalSchema),
+  });
+
+  const [ rejectIOCase ] = useRejectIOCaseMutation()
+  
+
+  const onSubmit = async(data) => {
+    console.log(data, "tewxttttt");
+    setIsBtnLoading(true)
+    try {
+      const res = await rejectIOCase({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()
+        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"}>Reject 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="comments"
+                {...register("comments")}
+                fontSize="sm"
+                type="textarea"
+                size="md"
+                placeholder={"Enter your comments...."}
+                rounded={"md"}
+                resize={"none"}
+              />
+              {errors.comments && (
+                <Text fontSize="xs" color="red">
+                  {errors.comments.message}
+                </Text>
+              )}
+            </FormControl>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              colorScheme="gray"
+              mr={3}
+              onClick={onClose}
+              size={"sm"}
+              rounded={"sm"}
+            >
+              Cancel
+            </Button>
+            <Button
+              colorScheme="forestGreen"
+              variant="solid"
+              size={"sm"}
+              rounded={"sm"}
+              isLoading={isBtnLoading}
+              type="submit"
+            >
+              Send
+            </Button>
+          </ModalFooter>
+        </Box>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default RequestRejectModal;
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/Approved.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/Approved.jsx
index ac72f90..b27c5ef 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/Approved.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/Approved.jsx
@@ -63,9 +63,9 @@ import {
     // Table filter
     const filteredData =  IODetails?.ioTransactionRecords?.Approved?.filter((item) => {
       // Filter by name (case insensitive)
-      const name = item.transactionAmount;
-      const searchLower = searchTerm.toLowerCase();
-      const nameMatches = name.toLowerCase().includes(searchLower);
+      const name = item?.transactionAmount;
+      const searchLower = searchTerm?.toLowerCase();
+      const nameMatches = name?.toLowerCase().includes(searchLower);
       return nameMatches;
     });
   
@@ -75,7 +75,7 @@ import {
       "Amount",
       "Created By",
       "Created On",
-      "Approved By",
+      // "Approved By",
       "Approved On",
     ];
   
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
index 458d82c..66af682 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
@@ -21,6 +21,8 @@ import {
   import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
   import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
 import { CheckIcon, CloseIcon } from "@chakra-ui/icons";
+import RequestApproveModal from "./RequestApproveModal";
+import RequestRejectModal from "./RequestRejectModal";
   
   const formatDate = (date) => new Date(date).toLocaleDateString();
   
@@ -36,6 +38,17 @@ import { CheckIcon, CloseIcon } from "@chakra-ui/icons";
     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();
   
     useEffect(() => {
       // Simulate loading
@@ -55,15 +68,17 @@ import { CheckIcon, CloseIcon } from "@chakra-ui/icons";
       });
     };
   
+    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 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.",
@@ -71,12 +86,12 @@ import { CheckIcon, CloseIcon } from "@chakra-ui/icons";
       "Amount",
       "Created By",
       "Created On",
-      "Approved By",
+      // "Approved By",
       "Approved On",
       "Status"
     ];
   
-    const extractedArray = filteredData?.map((item, index) => ({
+    const extractedArray = IODetails?.ioTransactionRecords?.Pending?.map((item, index) => ({
       id: item?.id,
       "Sr No.": (
         <Text
@@ -139,13 +154,14 @@ import { CheckIcon, CloseIcon } from "@chakra-ui/icons";
         </Text>
       ),
       "Approved On": (
-        <Text
+          <Text
           w={"100px"}
           as={"span"}
           color={"gray.800"}
           fontWeight={"500"}
-        >
-          {formatDate(item?.updatedAt)}
+          >
+            {item?.modifier ? formatDate(item?.updatedAt) : "---" }
+          {}
         </Text>
       ),
       "Status": (
@@ -178,7 +194,7 @@ import { CheckIcon, CloseIcon } from "@chakra-ui/icons";
               <CheckIcon fontSize={"12px"} />
             </Button>
           </Tooltip>
-          <Tooltip 
+          <Tooltip
             rounded={"sm"}
             fontSize={"xs"}
             label="Reject"
@@ -199,7 +215,7 @@ import { CheckIcon, CloseIcon } from "@chakra-ui/icons";
                 onRejectOpen();
               }}
               py={1}
-            // variant={"solid"}
+              // variant={"solid"}
             >
               <CloseIcon fontSize={"10px"} />
             </Button>
@@ -261,6 +277,19 @@ import { CheckIcon, CloseIcon } from "@chakra-ui/icons";
           alertHandler={handleDelete}
           isLoading={isLoading}
         />
+
+      <RequestApproveModal
+        // data={data?.data?.rows}
+        isOpen={isConfirmOpen}
+        onClose={onConfirmClose}
+        id={actionId}
+        // firstField={firstField}
+      />
+      <RequestRejectModal
+        isOpen={isRejectOpen}
+        onClose={onRejectClose}
+        id={actionId}
+      />
       </Box>
     );
   };
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/Rejected.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/Rejected.jsx
index 49893eb..21f09ab 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/Rejected.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/Rejected.jsx
@@ -61,13 +61,13 @@ import {
   
   
     // Table filter
-    const filteredData = IODetails?.ioTransactionRecords?.Reject?.filter((item) => {
-      // Filter by name (case insensitive)
-      const name = item.transactionName;
-      const searchLower = searchTerm.toLowerCase();
-      const nameMatches = name.toLowerCase().includes(searchLower);
-      return nameMatches;
-    });
+    // const filteredData = IODetails?.ioTransactionRecords?.Reject?.filter((item) => {
+    //   // Filter by name (case insensitive)
+    //   const name = item.transactionName;
+    //   const searchLower = searchTerm.toLowerCase();
+    //   const nameMatches = name.toLowerCase().includes(searchLower);
+    //   return nameMatches;
+    // });
   
     const tableHeadRow = [
       "Sr No.",
@@ -75,11 +75,11 @@ import {
       "Amount",
       "Created By",
       "Created On",
-      "Approved By",
+      // "Approved By",
       "Approved On",
     ];
   
-    const extractedArray = filteredData?.map((item, index) => ({
+    const extractedArray = IODetails?.ioTransactionRecords?.Reject?.map((item, index) => ({
       id: item?.id,
       "Sr No.": (
         <Text
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/RequestApproveModal.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestApproveModal.jsx
new file mode 100644
index 0000000..527dbb8
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestApproveModal.jsx
@@ -0,0 +1,175 @@
+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 { useApproveDistributionMutation, useApproveIOCaseMutation, useApproveIONavMutation } 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 RequestApproveModal = ({ isOpen, onClose, firstField ,id}) => {
+  const [isBtnLoading , setIsBtnLoading] = useState(false)
+
+  const toast = useToast()
+
+  const {
+    register,
+    reset,
+    watch,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(conformModalSchema),
+  });
+
+  const [ approveDistribution ] = useApproveDistributionMutation()
+  
+
+  const onSubmit = async(data) => {
+    setIsBtnLoading(true)
+    try {
+      const res = await approveDistribution({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()
+        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">
+                Maximum length should be 200 characters. You have entered
+                {watch("checkerComment")?.length || 0} characters.
+              </FormHelperText>
+            </FormControl>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              colorScheme="gray"
+              mr={3}
+              onClick={onClose}
+              size={"sm"}
+              rounded={"sm"}
+            >
+              Cancel
+            </Button>
+            <Button
+              colorScheme="forestGreen"
+              variant="solid"
+              size={"sm"}
+              rounded={"sm"}
+              isLoading={isBtnLoading}
+              type="submit"
+            >
+              Send
+            </Button>
+          </ModalFooter>
+        </Box>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default RequestApproveModal;
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/RequestExitApproveModal.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestExitApproveModal.jsx
new file mode 100644
index 0000000..04ee265
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestExitApproveModal.jsx
@@ -0,0 +1,176 @@
+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 { useApproveDistributionMutation, useApproveExitMutation, useApproveIOCaseMutation, useApproveIONavMutation } 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 RequestApproveModal = ({ isOpen, onClose, firstField ,id}) => {
+    const [isBtnLoading , setIsBtnLoading] = useState(false)
+  
+    const toast = useToast()
+  
+    const {
+      register,
+      reset,
+      watch,
+      handleSubmit,
+      formState: { errors },
+    } = useForm({
+      resolver: yupResolver(conformModalSchema),
+    });
+  
+    const [ approveExit ] = useApproveExitMutation()
+    
+  
+    const onSubmit = async(data) => {
+      setIsBtnLoading(true)
+      try {
+        const res = await approveExit({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()
+          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">
+                  Maximum length should be 200 characters. You have entered
+                  {watch("checkerComment")?.length || 0} characters.
+                </FormHelperText>
+              </FormControl>
+            </ModalBody>
+            <ModalFooter>
+              <Button
+                colorScheme="gray"
+                mr={3}
+                onClick={onClose}
+                size={"sm"}
+                rounded={"sm"}
+              >
+                Cancel
+              </Button>
+              <Button
+                colorScheme="forestGreen"
+                variant="solid"
+                size={"sm"}
+                rounded={"sm"}
+                isLoading={isBtnLoading}
+                type="submit"
+              >
+                Send
+              </Button>
+            </ModalFooter>
+          </Box>
+          )}
+        </ModalContent>
+      </Modal>
+    );
+  };
+  
+  export default RequestApproveModal;
+  
\ No newline at end of file
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/RequestRejectModal.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestRejectModal.jsx
new file mode 100644
index 0000000..3a44d26
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestRejectModal.jsx
@@ -0,0 +1,164 @@
+import {
+  Box,
+  Button,
+  FormControl,
+  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 { useRejectIOCaseMutation } from "../../../../Services/io.service";
+
+export const conformModalSchema = yup.object().shape({
+  comments: yup.string().required("Comment is required"),
+});
+
+const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
+  const [isBtnLoading , setIsBtnLoading] = useState(false)
+
+  const toast = useToast()
+
+  const {
+    register,
+    reset,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(conformModalSchema),
+  });
+
+  const [ rejectIOCase ] = useRejectIOCaseMutation()
+  
+
+  const onSubmit = async(data) => {
+    console.log(data, "tewxttttt");
+    setIsBtnLoading(true)
+    try {
+      const res = await rejectIOCase({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()
+        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"}>Reject 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="comments"
+                {...register("comments")}
+                fontSize="sm"
+                type="textarea"
+                size="md"
+                placeholder={"Enter your comments...."}
+                rounded={"md"}
+                resize={"none"}
+              />
+              {errors.comments && (
+                <Text fontSize="xs" color="red">
+                  {errors.comments.message}
+                </Text>
+              )}
+            </FormControl>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              colorScheme="gray"
+              mr={3}
+              onClick={onClose}
+              size={"sm"}
+              rounded={"sm"}
+            >
+              Cancel
+            </Button>
+            <Button
+              colorScheme="forestGreen"
+              variant="solid"
+              size={"sm"}
+              rounded={"sm"}
+              isLoading={isBtnLoading}
+              type="submit"
+            >
+              Send
+            </Button>
+          </ModalFooter>
+        </Box>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default RequestRejectModal;
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionInvestor.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionInvestor.jsx
index ebf269c..167c686 100644
--- a/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionInvestor.jsx
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionInvestor.jsx
@@ -28,8 +28,10 @@ import NormalData from "../../../../Components/DataTable/NormalTable";
 import { useContext, useState } from "react";
 import { AddIcon } from "@chakra-ui/icons";
 import {
+  useAddIOTransactionMutation,
   useGetDistributedToInvestorMutation,
   useGetDistributionInvestorMutation,
+  useSaveIOTransactionMutation,
   useUpdateExitToInvestorMutation,
 } from "../../../../Services/io.service";
 import { useParams } from "react-router-dom";
@@ -42,6 +44,7 @@ import CurrencyInput from "../../../../Components/CurrencyInput";
 import { IoCalculator } from "react-icons/io5";
 import { debounce } from "../../../Master/Sponser/AddSponser";
 import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+import { validate } from "uuid";
 
 
 
@@ -101,6 +104,8 @@ const DistributionInvestor = ({ isOpen, onClose }) => {
     resolver: yupResolver(investorExit),
   });
 
+
+  const [saveIOTransaction] = useSaveIOTransactionMutation();
   
 
   // ====================================================[Table Setup]================================================================
@@ -314,45 +319,81 @@ const DistributionInvestor = ({ isOpen, onClose }) => {
     } catch (error) {}
   };
 
+  // const onFinalSubmit = async (data) => {
+  //   setIsFinalCalculateLoading(true);
+  //   if (!isCalcualtedData) {
+  //     setIsFinalCalculateLoading(false);
+  //     return toast({
+  //       render: () => (
+  //         <ToastBox
+  //           message={"Please calculate investment first."}
+  //           status="warn"
+  //         />
+  //       ),
+  //     });
+  //   }
+    
+
+  //   const finalData = {
+  //     transactionAmount: data?.amount,
+  //   };
+
+  //   try {
+  //     const res = await  getFinalDistributionInvestment({ id, data: finalData });
+  //     console.log(finalData);
+
+  //     if (res?.error?.status === 401) {
+  //       toast({
+  //         render: () => (
+  //           <ToastBox message={res?.error?.data?.message} status="error" />
+  //         ),
+  //       });
+  //     } else if (res?.data?.statusCode === 200) {
+  //       toast({
+  //         render: () => <ToastBox message={res?.data?.message} />,
+  //       });
+  //       handleClose();
+  //     }
+  //   } catch (error) {
+  //     console.error("An error occurred:", error);
+  //   } finally {
+  //     handleClose();
+  //   }
+  // };
+
   const onFinalSubmit = async (data) => {
     setIsFinalCalculateLoading(true);
-    if (!isCalcualtedData) {
-      setIsFinalCalculateLoading(false);
-      return toast({
-        render: () => (
-          <ToastBox
-            message={"Please calculate investment first."}
-            status="warn"
-          />
-        ),
-      });
-    }
-
-    const finalData = {
+    const currentDate = new Date();
+    const dataToSend = {
+      transactionDate:  currentDate,
       transactionAmount: data?.amount,
-    };
+    }
+    
+    console.log("dataaaaaaa",dataToSend); 
 
     try {
-      const res = await  getFinalDistributionInvestment({ id, data: finalData });
-      console.log(finalData);
-
-      if (res?.error?.status === 401) {
+      const res = await saveIOTransaction({ id,data: dataToSend });
+      console.log(res?.data?.data);
+      onClose();
+       if (!isCalcualtedData) {
+            setIsFinalCalculateLoading(false);
+            return toast({
+              render: () => (
+                <ToastBox
+                  message={"Please calculate investment first."}
+                  status="warn"
+                />
+              ),
+            });
+          } else if (res?.error) {
         toast({
           render: () => (
-            <ToastBox message={res?.error?.data?.message} status="error" />
+            <ToastBox status={"error"} message={res?.error?.data?.message} />
           ),
         });
-      } else if (res?.data?.statusCode === 200) {
-        toast({
-          render: () => <ToastBox message={res?.data?.message} />,
-        });
-        handleClose();
+        // setIsLoading(false);
       }
-    } catch (error) {
-      console.error("An error occurred:", error);
-    } finally {
-      handleClose();
-    }
+    } catch (error) {}
   };
 
   const handleClose = () => {
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/Exit.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/Exit.jsx
index 790fc09..203117c 100644
--- a/src/Pages/IO_Management/ViewIO/HeaderModal/Exit.jsx
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/Exit.jsx
@@ -28,6 +28,7 @@ import NormalData from "../../../../Components/DataTable/NormalTable";
 import { useContext, useState } from "react";
 import { AddIcon } from "@chakra-ui/icons";
 import {
+  useExitIOTransactionMutation,
   useGetDistributedToInvestorMutation,
   useGetDistributionInvestorMutation,
   useUpdateExitToInvestorMutation,
@@ -122,7 +123,7 @@ const Exit = ({ isOpen, onClose }) => {
   const [getDistributionInvestment] = useGetDistributionInvestorMutation();
   const [getFinalDistributionInvestment] =
     useGetDistributedToInvestorMutation();
-  const [updateExitToInvestor] = useUpdateExitToInvestorMutation();
+  const [exitIOTransaction] = useExitIOTransactionMutation();
 
   const investor = yup.object().shape({
     amount: yup.string().required("Amount is required"),
@@ -340,46 +341,69 @@ const Exit = ({ isOpen, onClose }) => {
     } catch (error) {}
   };
 
-  const onFinalSubmit = async (data) => {
-    console.log("hit");
-    setIsFinalCalculateLoading(true);
-    // if (!isCalcualtedData) {
-    //   setIsFinalCalculateLoading(false);
-    //   return toast({
-    //     render: () => (
-    //       <ToastBox
-    //         message={"Please calculate investment first."}
-    //         status="warn"
-    //       />
-    //     ),
-    //   });
-    // }
+  // const onFinalSubmit = async (data) => {
+  //   console.log("hit");
+  //   setIsFinalCalculateLoading(true);
+  //   const finalData = {
+  //     transactionAmount: IODetails?.ioMVNAV,
+  //   };
 
-    const finalData = {
+  //   try {
+  //     const res = await exitIOTransaction({ id, data: finalData });
+  //     console.log(finalData);
+
+  //     if (res?.error?.status === 401) {
+  //       toast({
+  //         render: () => (
+  //           <ToastBox message={res?.error?.data?.message} status="error" />
+  //         ),
+  //       });
+  //     } else if (res?.data?.statusCode === 200) {
+  //       toast({
+  //         render: () => <ToastBox message={res?.data?.message} />,
+  //       });
+  //       handleClose();
+  //     }
+  //   } catch (error) {
+  //     console.error("An error occurred:", error);
+  //   } finally {
+  //     handleClose();
+  //   }
+  // };
+
+  const onFinalSubmit = async () => {
+    setIsCalculateLoading(true);
+    const currentDate = new Date();
+    const dataToSend = {
+      transactionDate:  currentDate,
       transactionAmount: IODetails?.ioMVNAV,
-    };
+    }
+     
 
     try {
-      const res = await updateExitToInvestor({ id, data: finalData });
-      console.log(finalData);
+      const res = await exitIOTransaction({ id,data: dataToSend });
+      console.log(res?.data?.data);
 
-      if (res?.error?.status === 401) {
-        toast({
+      onClose();
+      if (!isCalcualtedData) {
+        setIsFinalCalculateLoading(false);
+        return toast({
           render: () => (
-            <ToastBox message={res?.error?.data?.message} status="error" />
+            <ToastBox
+            message={"Please calculate investment first."}
+            status="warn"
+            />
           ),
         });
-      } else if (res?.data?.statusCode === 200) {
+          } else if (res?.error) {
         toast({
-          render: () => <ToastBox message={res?.data?.message} />,
+          render: () => (
+            <ToastBox status={"error"} message={res?.error?.data?.message} />
+          ),
         });
-        handleClose();
+        setIsLoading(false);
       }
-    } catch (error) {
-      console.error("An error occurred:", error);
-    } finally {
-      handleClose();
-    }
+    } catch (error) {}
   };
 
   const handleClose = () => {
@@ -389,7 +413,7 @@ const Exit = ({ isOpen, onClose }) => {
   };
 
   return (
-    <Modal size={"xl"} isOpen={isOpen} onClose={handleClose}>
+    <Modal size={"xl"} isOpen={isOpen} onClose={handleClose} >
       <ModalOverlay />
       <ModalContent maxW={1000}>
         <ModalHeader fontSize={"md"}>Exit Transaction</ModalHeader>
@@ -435,7 +459,7 @@ const Exit = ({ isOpen, onClose }) => {
           {/* ) } */}
         </ModalBody>
         <ModalFooter pt={0}>
-          {isCalcualtedData ? (
+          {/* {isCalcualtedData ? ( */}
             <>
               <Button
                 bg={"hsla(139, 100%, 14%, 1)"}
@@ -455,9 +479,9 @@ const Exit = ({ isOpen, onClose }) => {
                 Close
               </Button>
             </>
-          ) : (
+          {/* ) : (
             ""
-          )}
+          )} */}
         </ModalFooter>
       </ModalContent>
     </Modal>
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
index e41b1f9..05f57dd 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
@@ -24,6 +24,7 @@ import {
   Box,
   Icon,
   HStack,
+  useToast,
 } from "@chakra-ui/react";
 import header from "../../../assets/IOheader.png";
 import { HiDotsVertical } from "react-icons/hi";
@@ -41,12 +42,15 @@ import Cancle from "./HeaderModal/Cancle";
 import { AddIcon } from "@chakra-ui/icons";
 import { GrGallery } from "react-icons/gr";
 import Loader01 from "../../../Components/Loaders/Loader01";
+import { useUpdateTransactionMutation } from "../../../Services/io.service";
+import ToastBox from "../../../Components/ToastBox";
 // import { formatCurrency } from "../../../Components/CurrencyInput";
 // import { removeTrailingZeros } from "../../../Constants/Constants";
 
 const ViewIOdataHeader = ({ data, isLoading }) => {
-  const params = useParams();
-  const id = params?.id;
+  const params = useParams() 
+    const toast = useToast();
+    const id = params?.id
   const { isOpen, onOpen, onClose } = useDisclosure();
   const btnRef = useRef();
   const { IODetails, isIOloading } = useContext(GlobalStateContext);
@@ -108,6 +112,63 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
       IODetails?.artifactsImage?.[0]?.artifactPathName
   );
 
+  const [updateTransaction] = useUpdateTransactionMutation()
+
+  const handleDistributionInvestors = async () =>{
+    
+    try {
+       const res = await updateTransaction(id)
+       
+       if (res?.data) {
+         toast({
+           render: () => (
+            <ToastBox status={"success"} message={res?.data?.message} />
+           ),
+         });
+        //  setIsLoading(false);
+        onDistInvestorOpen()
+ 
+       } else if (res?.error) {
+         toast({
+           render: () => (
+             <ToastBox status={"error"} message={res?.error?.data?.message} />
+           ),
+         });
+        //  setIsLoading(false);
+       }
+    } catch (error) { 
+     
+    }
+   }
+
+   const handleExit = async () =>{
+    
+    try {
+       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={"error"} message={res?.error?.data?.message} />
+           ),
+         });
+        //  setIsLoading(false);
+       }
+    } catch (error) { 
+     
+    }
+   }
+   
+
   const menu = [
     {
       id: 1,
@@ -127,8 +188,8 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
     {
       id: 6,
       title: "Distribution To Investors",
-      onClickFunction: onDistInvestorOpen,
-    },
+      onClickFunction: handleDistributionInvestors,
+    }, 
     {
       id: 5,
       title: "Update IO NAV",
@@ -137,7 +198,7 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
     {
       id: 8,
       title: "Exit",
-      onClickFunction: onExitOpen,
+      onClickFunction: handleExit,
     },
     {
       id: 9,
diff --git a/src/Services/io.service.js b/src/Services/io.service.js
index 167d6a8..79d765d 100644
--- a/src/Services/io.service.js
+++ b/src/Services/io.service.js
@@ -15,9 +15,9 @@ export const ioService = createApi({
     "getArtifactsVideo",
     "getInvestmentDocuments",
     "getIOById",
-    "getSponser", 
-    "getInvestmentType", 
-    "getInvestmentTypeID"
+    "getSponser",
+    "getInvestmentType",
+    "getInvestmentTypeID",
   ],
   endpoints: (builder) => ({
     // =====[get prepopulate data]
@@ -28,7 +28,8 @@ export const ioService = createApi({
 
     // =====[get]
     getIOs: builder.query({
-      query: ({ page, size, ioStatus_xid, search }) => `/io/admin?page=${page}&size=${size}&ioStatus_xid=${ioStatus_xid}&search=${search}`,
+      query: ({ page, size, ioStatus_xid, search }) =>
+        `/io/admin?page=${page}&size=${size}&ioStatus_xid=${ioStatus_xid}&search=${search}`,
       providesTags: ["getIO"],
     }),
 
@@ -261,9 +262,7 @@ export const ioService = createApi({
       invalidatesTags: ["getIOById"],
     }),
 
-
-
-// ==============[ Displaye Orders ]===============
+    // ==============[ Displaye Orders ]===============
 
     setDisplayOrder: builder.mutation({
       query: ({ data }) => ({
@@ -309,7 +308,7 @@ export const ioService = createApi({
         method: "POST",
         body: data,
       }),
-      invalidatesTags: ["getSponser","prePopulate"],
+      invalidatesTags: ["getSponser", "prePopulate"],
     }),
 
     // ========[Update Sponser]========
@@ -320,12 +319,11 @@ export const ioService = createApi({
         method: "PATCH",
         body: data,
       }),
-      invalidatesTags: ["getSponser","prePopulate"],
+      invalidatesTags: ["getSponser", "prePopulate"],
     }),
 
     // ======[Get All]=====
 
-    
     getSponserMaster: builder.query({
       query: ({ page, size, searchTerm }) => {
         let baseURL = `/sponsor/admin/?search=${searchTerm || ""}`;
@@ -336,10 +334,10 @@ export const ioService = createApi({
       },
       providesTags: ["getSponser"],
     }),
-    
+
     // ========[Delete Sponser]========
 
-     deleteSponser: builder.mutation({
+    deleteSponser: builder.mutation({
       query: (id) => ({
         url: `/sponsor/admin/delete/${id}`,
         method: "DELETE",
@@ -356,7 +354,7 @@ export const ioService = createApi({
     getSponserMasterActive: builder.query({
       query: () => "/sponsor/admin/active",
     }),
-    
+
     // ======[Get ID]=====
 
     getSponserById: builder.query({
@@ -369,12 +367,8 @@ export const ioService = createApi({
       query: () => `/sponsor/admin/active`,
     }),
 
+    // ===============================[ Investment Type ]===================================
 
-
-
-// ===============================[ Investment Type ]===================================
-
-    
     // ========[Get All]=========
 
     getInvestmentTypes: builder.query({
@@ -405,11 +399,15 @@ export const ioService = createApi({
 
     updateInvestmentType: builder.mutation({
       query: ({ data, id }) => ({
-        url: `/investmentType/admin/${id}`, 
+        url: `/investmentType/admin/${id}`,
         method: "PATCH",
         body: data,
       }),
-      invalidatesTags: ["getInvestmentTypeID", "getInvestmentType", "prePopulate"],
+      invalidatesTags: [
+        "getInvestmentTypeID",
+        "getInvestmentType",
+        "prePopulate",
+      ],
     }),
 
     // ========[Delete Investment]=======
@@ -419,30 +417,142 @@ export const ioService = createApi({
         url: `/investmentType/admin/delete/${id}`,
         method: "DELETE",
       }),
-      invalidatesTags: ["getInvestmentType", 'prePopulate'],
+      invalidatesTags: ["getInvestmentType", "prePopulate"],
     }),
 
-
-
-
-
     profile: builder.query({
       query: (id) => `/auth/admin/profile`,
     }),
 
-
     // ========Add Io Details========
 
-       updateIOCase: builder.mutation({
-        query: (id) => ({
-          url: `/io/admin/maker-transaction/${id}/verify-pending-transaction-for-cash-and-nav`,
-          method: "POST",
-        }),
-  
-        invalidatesTags: ["getIOById"],
+    updateIOCase: builder.mutation({
+      query: (id) => ({
+        url: `/io/admin/maker-transaction/${id}/verify-pending-transaction-for-cash-and-nav`,
+        method: "POST",
+      }),
+
+      invalidatesTags: ["getIOById"],
     }),
 
 
+    updateTransaction: builder.mutation({
+      query: (id) => ({
+        // url: `/io/admin/maker-transaction/${id}/verify-pending-transaction-for-cash-and-nav`,
+        url: `/io/admin/maker-transaction/${id}/verify-pending-transaction`,
+        method: "POST",
+      }),
+
+      invalidatesTags: ["getIOById"],
+    }),
+
+
+    addNavDetails: builder.mutation({
+      query: ({id,data}) => ({
+        url: `/io/admin/maker-transaction/${id}/io-nav`,
+        method: "POST",
+        body:data,
+      }),
+
+      invalidatesTags: ["getIOById"],
+    }),
+
+    addIOTransaction: builder.mutation({
+      query: ({id,data}) => ({
+        url: `/io/admin/maker-transaction/${id}/io-nav`,
+        method: "POST",
+        body:data,
+      }),
+
+      invalidatesTags: ["getIOById"],
+    }),
+
+    saveIOTransaction: builder.mutation({
+      query: ({id,data}) => ({
+        url: `/io/admin/maker-transaction/${id}/io-yeild`,
+        method: "POST",
+        body:data,
+      }),
+
+      invalidatesTags: ["getIOById"],
+    }),
+
+    exitIOTransaction: builder.mutation({
+      query: ({id,data}) => ({
+        url: `/io/admin/maker-transaction/${id}/io-exit`,
+        method: "POST",
+        body:data,
+      }),
+
+      invalidatesTags: ["getIOById"],
+    }),
+    
+
+    addIoCase: builder.mutation({
+      query: (id) => ({
+        url: `/io/admin/maker-transaction/${id}/verify-pending-transaction`,
+        method: "POST",
+      }),
+
+      invalidatesTags: ["getIOById"],
+    }),
+
+
+    approveIOCase: builder.mutation({
+      query: ({id,data}) => ({
+        url: `/io/admin/checker-transaction/approved/io-cash/${id}`,
+        method: "PATCH",
+        body:data,
+      }),
+
+      invalidatesTags: ["getIOById"],
+    }),
+
+
+    approveIONav: builder.mutation({
+      query: ({id,data}) => ({
+        url: `/io/admin/checker-transaction/approved/io-nav/${id}`,
+        method: "PATCH",
+        body:data,
+      }),
+
+      invalidatesTags: ["getIOById"],
+    }),
+
+    approveDistribution: builder.mutation({
+      query: ({id,data}) => ({
+        url: `/io/admin/checker-transaction/approved/distributed-to-investor/${id}`,
+        method: "PATCH",
+        body:data,
+      }),
+
+      invalidatesTags: ["getIOById"],
+    }),
+
+    
+    approveExit: builder.mutation({
+      query: ({id,data}) => ({
+        url: `/io/admin/checker-transaction/approved/exit/${id}`,
+        method: "PATCH",
+        body:data,
+      }),
+
+      invalidatesTags: ["getIOById"],
+    }),
+
+
+
+    rejectIOCase: builder.mutation({
+      query: ({id,data}) => ({
+        url: `/io/admin/checker-transaction/reject/${id}`,
+        method: "PATCH",
+        body:data,
+      }),
+
+      invalidatesTags: ["getIOById"],
+    }),
+
+ 
   }),
 });
 
@@ -475,7 +585,6 @@ export const {
   useDeleteVideoArtifactsMutation,
   useDeleteImageArtifactsMutation,
 
-
   useSetDisplayOrderMutation,
   useSetDisplayOrderIODocumentsMutation,
   useSetDisplayOrderIOArtifactsImageMutation,
@@ -493,11 +602,9 @@ export const {
   useGetDistributedToInvestorMutation,
   useUpdateExitToInvestorMutation,
 
-
   useUpdateCancleStatusMutation,
 
-
-// ==============[ Sponser ]===============
+  // ==============[ Sponser ]===============
   useGetSponserMasterQuery,
   useGetSponserMasterActiveQuery,
   useCreateSponserMutation,
@@ -506,7 +613,6 @@ export const {
   useDeleteSponserMutation,
   useGetActiveSponserMasterQuery,
 
-
   // ============[ Investment Type ]========
 
   useGetInvestmentTypesQuery,
@@ -516,9 +622,18 @@ export const {
   useDeleteInvestmentTypeMutation,
   useProfileQuery,
 
-
   // ========[ Add Io Details ]========
 
-  useUpdateIOCaseMutation
+  useUpdateIOCaseMutation,
+  useUpdateTransactionMutation,
+  useApproveIOCaseMutation,
+  useRejectIOCaseMutation,
+  useAddNavDetailsMutation,
+  useApproveIONavMutation,
+  useAddIOTransactionMutation,
+  useSaveIOTransactionMutation,
+  useApproveDistributionMutation,
+  useExitIOTransactionMutation,
+  useApproveExitMutation
 
 } = ioService;
-- 
2.34.1


From 85e3c3412068773154605d1a4908b7ecf4679e2a Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Tue, 19 Nov 2024 19:19:45 +0530
Subject: [PATCH 05/49] update transaction status modal

---
 src/Pages/Fawateer/CreateRequest.jsx          | 287 +++++++----
 .../CreateIO/IOCashDetails/Approved.jsx       |  26 +-
 .../CreateIO/IOCashDetails/Pending.jsx        |   2 +-
 .../CreateIO/IOCashDetails/Rejected.jsx       |   2 +-
 .../CreateIO/IONAVDetails/Approved.jsx        |   2 +-
 .../CreateIO/IONAVDetails/Pending.jsx         |  31 +-
 .../CreateIO/IONAVDetails/Rejected.jsx        |   2 +-
 .../ApproveDistrubationModal.jsx              | 178 +++++++
 .../IOTransaction/ApproveInvestedModal.jsx    | 176 +++++++
 .../CreateIO/IOTransaction/Approved.jsx       |  22 +-
 .../ApprovedCancelTransaction.jsx             | 160 ++++++
 .../CreateIO/IOTransaction/ApprovedExit.jsx   | 174 +++++++
 .../CreateIO/IOTransaction/Pending.jsx        | 476 +++++++++---------
 .../CreateIO/IOTransaction/Rejected.jsx       |   4 +-
 .../IOTransaction/RequestRejectModal.jsx      |  44 +-
 .../IOTransaction/ViewAmountInvested.jsx      | 304 +++++++++++
 .../CreateIO/IOTransaction/ViewCancel.jsx     | 363 +++++++++++++
 .../ViewDistributionInvestor.jsx              | 267 ++++++++++
 .../CreateIO/IOTransaction/ViewExit.jsx       | 324 ++++++++++++
 .../IO_Management/CreateIO/Investors.jsx      |   2 +-
 .../ViewIO/HeaderModal/AmountInvested.jsx     |   2 +-
 src/Services/io.service.js                    |  45 +-
 22 files changed, 2510 insertions(+), 383 deletions(-)
 create mode 100644 src/Pages/IO_Management/CreateIO/IOTransaction/ApproveDistrubationModal.jsx
 create mode 100644 src/Pages/IO_Management/CreateIO/IOTransaction/ApproveInvestedModal.jsx
 create mode 100644 src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedCancelTransaction.jsx
 create mode 100644 src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedExit.jsx
 create mode 100644 src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx
 create mode 100644 src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx
 create mode 100644 src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx
 create mode 100644 src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx

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/Approved.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx
index 8e474a7..b0f2014 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",
   ];
 
@@ -184,7 +184,7 @@ const Approved = () => {
             <Th
               textAlign={"center"}
               p={3}
-              width="140px"
+              width="200px"
               color={"#004118"}
               whiteSpace="normal"
               wordBreak="normal"
@@ -195,7 +195,7 @@ const Approved = () => {
             <Th
               textAlign={"center"}
               p={3}
-              width="100px"
+              width="120px"
               color={"#004118"}
               whiteSpace="normal"
               wordBreak="normal"
@@ -212,12 +212,26 @@ 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}
+            </Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="120px"
               color={"#004118"}
               whiteSpace="normal"
               wordBreak="normal"
@@ -329,7 +343,7 @@ const Approved = () => {
               Add
             </Button> */}
             {IODetails?.isInvestedAmount ? (
-              localStorage?.getItem('role') ==="Maker"&& <Button
+              localStorage?.getItem('role') ==="Maker" && <Button
                 onClick={handleAdd}
                 leftIcon={<AddIcon />}
                 colorScheme="forestGreen"
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
index fd89eea..30047b3 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
@@ -102,7 +102,7 @@ const Pending = () => {
     "Transaction Type",
     "Amount",
     "Comments",
-    // "Update by",
+    "Update by",
     "Update On",
     ...(localStorage?.getItem('role')!=="Maker" ? ["Status"] : []),
   ];
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
index 88c7ec1..7f18cc6 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",
     ];
   
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx
index b3b1a2e..354da90 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx
@@ -84,7 +84,7 @@ import AddNavDetails from "./AddNavDetails";
       "Last Nav Update",
       "Investment Closed",
       "Comments", 
-      // "Updated By",
+      "Updated By",
     ];
   
     const extractedArray = filteredData?.map((item, index) => ({
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx
index c4bfe4d..39a0218 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx
@@ -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) => ({
@@ -273,18 +272,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..8b69230 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/Rejected.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/Rejected.jsx
@@ -82,7 +82,7 @@ import AddNavDetails from "./AddNavDetails";
       "Last Nav Update",
       "Investment Closed",
       "Comments", 
-      // "Updated By",
+      "Updated By",
     ];
   
     const extractedArray = filteredData?.map((item, index) => ({
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..c54738d
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveDistrubationModal.jsx
@@ -0,0 +1,178 @@
+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}) => {
+    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()
+          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">
+                  Maximum length should be 200 characters. You have entered
+                  {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..a165034
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveInvestedModal.jsx
@@ -0,0 +1,176 @@
+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}) => {
+    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()
+          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">
+                  Maximum length should be 200 characters. You have entered
+                  {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..86b65d6 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/Approved.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/Approved.jsx
@@ -75,7 +75,7 @@ import {
       "Amount",
       "Created By",
       "Created On",
-      // "Approved By",
+      "Approved By",
       "Approved On",
     ];
   
@@ -132,14 +132,32 @@ import {
         </Text>
       ),
       "Approved By": (
+        <>
         <Text
           w={"100px"}
           as={"span"}
           color={"gray.800"}
           fontWeight={"500"}
         >
-          {item?.modifier ? item?.modifier : "---" }
+           {item?.modifier ? formatDate(item?.updatedAt) : "---" }
         </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..327e5b1
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedCancelTransaction.jsx
@@ -0,0 +1,160 @@
+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}) => {
+    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()
+          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">
+                  Maximum length should be 200 characters. You have entered
+                  {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..0c9a50d
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedExit.jsx
@@ -0,0 +1,174 @@
+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}) => {
+    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()
+          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">
+                  Maximum length should be 200 characters. You have entered
+                  {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..cd9a771 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
@@ -1,122 +1,137 @@
 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 Name",
+    "Amount",
+    "Created By",
+    "Created On",
+    "Approved By",
+    "Approved On",
+    "Status",
+  ];
+
+  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": (
-        <Text
-          as={"span"}
-          color={"gray.600"}
-          fontWeight={"500"}
-        >
+        <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>
@@ -124,160 +139,128 @@ import RequestRejectModal from "./RequestRejectModal";
         </Text>
       ),
       "Created By": (
-        <Text
-          w={"100px"}
-          as={"span"}
-          color={"gray.800"}
-          fontWeight={"500"}
-        >
+        <Text w={"100px"} as={"span"} color={"gray.800"} fontWeight={"500"}>
           {item?.createdBy}
         </Text>
       ),
       "Created On": (
-        <Text
-          w={"100px"}
-          as={"span"}
-          color={"gray.800"}
-          fontWeight={"500"}
-        >
+        <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 w={"100px"} as={"span"} color={"gray.800"} fontWeight={"500"}>
+          {item?.modifier ? item?.modifier : "---"}
         </Text>
       ),
       "Approved On": (
-          <Text
-          w={"100px"}
-          as={"span"}
-          color={"gray.800"}
-          fontWeight={"500"}
-          >
-            {item?.modifier ? formatDate(item?.updatedAt) : "---" }
-          {}
+        <Text w={"100px"} as={"span"} color={"gray.800"} fontWeight={"500"}>
+          {item?.modifier ? formatDate(item?.updatedAt) : "---"}
         </Text>
       ),
-      "Status": (
+      Status: (
         <Box display={"flex"} justifyContent={"center"} gap={2}>
-          <Tooltip
+          <Button
+            colorScheme="green"
             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>
+            <ViewIcon me={"4px"} /> View
+          </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 +273,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..ef5420d 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",
     ];
   
@@ -138,7 +138,7 @@ import {
           color={"gray.800"}
           fontWeight={"500"}
         >
-          {item?.modifier ? item?.modifier : "---" }
+           {item?.modifier ? formatDate(item?.updatedAt) : "---" }
         </Text>
       ),
       "Approved On": (
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/RequestRejectModal.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestRejectModal.jsx
index 3a44d26..561150e 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/RequestRejectModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestRejectModal.jsx
@@ -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: () => (
@@ -77,24 +91,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 +142,7 @@ const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
               colorScheme="gray"
               mr={3}
               onClick={onClose}
-              size={"sm"}
+              size={"xs"}
               rounded={"sm"}
             >
               Cancel
@@ -146,7 +150,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..a34685c
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx
@@ -0,0 +1,304 @@
+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";
+
+// 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 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,
+    });
+  };
+
+  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="date"
+                {...register("transactionDate")}
+                size="sm"
+                rounded={"sm"}
+                fontSize={"sm"}
+                focusBorderColor="forestGreen.300"
+              />
+              {errors.transactionDate && (
+                <Text fontSize={"xs"} fontWeight={600} color="red.500">
+                  {errors.transactionDate.message}
+                </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"))}
+                size="sm"
+                rounded={"sm"}
+                textAlign={"end"}
+                focusBorderColor="forestGreen.300"
+                fontSize={"sm"}
+                readOnly
+              />
+              {errors.Total_Amount && (
+                <Text fontSize={"xs"} fontWeight={600} color="red.500">
+                  {errors.Total_Amount.message}
+                </Text>
+              )}
+            </FormControl>
+
+            <FormControl
+              mb={"15px"}
+              isInvalid={!!errors.amountInvested}
+              isRequired
+            >
+              <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
+                Amount to invest
+              </FormLabel>
+              {/* <Input
+                type="number"
+                {...register('amountInvested')}
+                size="sm"
+                rounded={'sm'}
+                textAlign={'end'}
+                focusBorderColor="forestGreen.300"
+                fontSize={"sm"}
+                onChange={handleAmountChange}
+              /> */}
+              <Controller
+                name="amountInvested"
+                control={control}
+                render={({ field }) => (
+                  <CurrencyInput
+                    {...field}
+                    textAlign={"right"}
+                    fontSize={"sm"}
+                    type="number"
+                    size={"sm"}
+                    onChange={(value) => {
+                      field.onChange(value); // This will keep the form's internal state updated
+                      handleAmountChange(value); // This will trigger your custom logic
+                    }}
+                  />
+                )}
+              />
+              {errors.amountInvested && (
+                <Text fontSize={"xs"} fontWeight={600} color="red.500">
+                  {errors.amountInvested.message}
+                </Text>
+              )}
+            </FormControl>
+
+            <FormControl mb={"15px"} isInvalid={!!errors.IoCash}>
+              <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
+                IO Cash
+              </FormLabel>
+              <Input
+                type="text"
+                value={formatCurrency(watch("IoCash"))}
+                size="sm"
+                rounded={"sm"}
+                focusBorderColor="forestGreen.300"
+                fontSize={"sm"}
+                textAlign={"right"}
+                readOnly
+              />
+              {errors.IoCash && (
+                <Text fontSize={"xs"} fontWeight={600} color="red.500">
+                  {errors.IoCash.message}
+                </Text>
+              )}
+            </FormControl>
+
+            <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}
+        id={investorId}
+      />
+      <RequestRejectModal
+        isOpen={isRejectOpen}
+        onClose={onRejectClose}
+        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..1b89458
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx
@@ -0,0 +1,363 @@
+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>
+          <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}
+        id={cancleId}
+      />
+      <RequestRejectModal
+        isOpen={isRejectOpen}
+        onClose={onRejectClose}
+        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..591ace7
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx
@@ -0,0 +1,267 @@
+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(true);
+      }
+    } 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);
+  };
+
+  console.log(exitId);
+  
+
+  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>
+        <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}
+        id={exitId}
+      />
+      <RequestRejectModal
+        isOpen={isRejectOpen}
+        onClose={onRejectClose}
+        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..262adcf
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx
@@ -0,0 +1,324 @@
+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>
+          <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}
+            id={investerId}
+        />
+        <RequestRejectModal
+            isOpen={isRejectOpen}
+            onClose={onRejectClose}
+            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..ecbff24 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,
diff --git a/src/Services/io.service.js b/src/Services/io.service.js
index 79d765d..efb5a21 100644
--- a/src/Services/io.service.js
+++ b/src/Services/io.service.js
@@ -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;
-- 
2.34.1


From 9f54bfbc653753b88f9b423858e67b6f8fcf805b Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Thu, 21 Nov 2024 15:46:10 +0530
Subject: [PATCH 06/49] update invest amount

---
 .../CreateIO/IOTransaction/Pending.jsx        |   2 +-
 .../IOTransaction/ViewAmountInvested.jsx      | 150 +++++++-----------
 .../ViewDistributionInvestor.jsx              |   2 -
 3 files changed, 62 insertions(+), 92 deletions(-)

diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
index cd9a771..1cc5281 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
@@ -172,7 +172,7 @@ const Pending = () => {
               if (item?.transactionType === "Amount Invested") {
                 onInvestmentOpen();
               } else if (item?.transactionType === "Distribution To Investor") {
-                onDistInvestorOpen();
+                onInvestmentOpen();
               } else if (item?.transactionType === "Exit") {
                 onExitOpen();
               } else if (item?.transactionType === "Cancel") {
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx
index a34685c..d7a7607 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx
@@ -114,6 +114,8 @@ const ViewAmountInvested = ({ isOpen, onClose, id:investorId }) => {
     }
   };
 
+  const formatDate = (date) => new Date(date).toLocaleDateString();
+
   const handleAmountChange = (e) => {
     // e might be an object or just a value, handle both cases
     const amount =
@@ -129,6 +131,7 @@ const ViewAmountInvested = ({ isOpen, onClose, id:investorId }) => {
       Total_Amount: IODetails?.totalAmtInvestmentInUSD,
     });
   };
+  
 
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
@@ -146,32 +149,9 @@ const ViewAmountInvested = ({ isOpen, onClose, id:investorId }) => {
               <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
                 Date
               </FormLabel>
-              <Input
-                type="date"
-                {...register("transactionDate")}
-                size="sm"
-                rounded={"sm"}
-                fontSize={"sm"}
-                focusBorderColor="forestGreen.300"
-              />
-              {errors.transactionDate && (
-                <Text fontSize={"xs"} fontWeight={600} color="red.500">
-                  {errors.transactionDate.message}
-                </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"))}
+                value={formatDate(IODetails?.ioTransactionRecords?.Approved?.[0]?.createdAt)}
                 size="sm"
                 rounded={"sm"}
                 textAlign={"end"}
@@ -179,75 +159,67 @@ const ViewAmountInvested = ({ isOpen, onClose, id:investorId }) => {
                 fontSize={"sm"}
                 readOnly
               />
-              {errors.Total_Amount && (
-                <Text fontSize={"xs"} fontWeight={600} color="red.500">
-                  {errors.Total_Amount.message}
-                </Text>
-              )}
             </FormControl>
 
             <FormControl
-              mb={"15px"}
-              isInvalid={!!errors.amountInvested}
-              isRequired
-            >
-              <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
-                Amount to invest
-              </FormLabel>
-              {/* <Input
-                type="number"
-                {...register('amountInvested')}
-                size="sm"
-                rounded={'sm'}
-                textAlign={'end'}
-                focusBorderColor="forestGreen.300"
-                fontSize={"sm"}
-                onChange={handleAmountChange}
-              /> */}
-              <Controller
-                name="amountInvested"
-                control={control}
-                render={({ field }) => (
-                  <CurrencyInput
-                    {...field}
-                    textAlign={"right"}
-                    fontSize={"sm"}
-                    type="number"
-                    size={"sm"}
-                    onChange={(value) => {
-                      field.onChange(value); // This will keep the form's internal state updated
-                      handleAmountChange(value); // This will trigger your custom logic
-                    }}
-                  />
-                )}
-              />
-              {errors.amountInvested && (
-                <Text fontSize={"xs"} fontWeight={600} color="red.500">
-                  {errors.amountInvested.message}
-                </Text>
-              )}
-            </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"))}
+    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?.Approved?.[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?.Approved?.[0]?.transactionAmount || 0)
+    )}
+    size="sm"
+    rounded={"sm"}
+    focusBorderColor="forestGreen.300"
+    fontSize={"sm"}
+    textAlign={"right"}
+    readOnly
+  />
+</FormControl>
 
-            <FormControl mb={"15px"} isInvalid={!!errors.IoCash}>
-              <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
-                IO Cash
-              </FormLabel>
-              <Input
-                type="text"
-                value={formatCurrency(watch("IoCash"))}
-                size="sm"
-                rounded={"sm"}
-                focusBorderColor="forestGreen.300"
-                fontSize={"sm"}
-                textAlign={"right"}
-                readOnly
-              />
-              {errors.IoCash && (
-                <Text fontSize={"xs"} fontWeight={600} color="red.500">
-                  {errors.IoCash.message}
-                </Text>
-              )}
-            </FormControl>
 
             <ModalFooter>
               <Box display={"flex"} justifyContent={"center"} gap={2}>
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx
index 591ace7..87b9a25 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx
@@ -195,8 +195,6 @@ const ViewDistributionInvestor = ({ isOpen, onClose,id:exitId }) => {
     setIsFinalCalculateLoading(false);
     setIsCalcualtedData(false);
   };
-
-  console.log(exitId);
   
 
   return (
-- 
2.34.1


From 7ba524d2e465188c5c4e72c85d3161ad1f81d7ed Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Thu, 21 Nov 2024 15:51:01 +0530
Subject: [PATCH 07/49] transaction panding

---
 src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
index 1cc5281..cd9a771 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
@@ -172,7 +172,7 @@ const Pending = () => {
               if (item?.transactionType === "Amount Invested") {
                 onInvestmentOpen();
               } else if (item?.transactionType === "Distribution To Investor") {
-                onInvestmentOpen();
+                onDistInvestorOpen();
               } else if (item?.transactionType === "Exit") {
                 onExitOpen();
               } else if (item?.transactionType === "Cancel") {
-- 
2.34.1


From 470ba49c0038465b7ad0ab8914482c16bc276eb2 Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Thu, 21 Nov 2024 16:05:51 +0530
Subject: [PATCH 08/49] UPDATE invest modal

---
 .../IOTransaction/ViewAmountInvested.jsx      | 127 ++++++++++--------
 src/Pages/IO_Management/ViewIO/ViewIOdata.jsx |  30 +++--
 2 files changed, 88 insertions(+), 69 deletions(-)

diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx
index d7a7607..3983f72 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx
@@ -47,7 +47,7 @@ const formatCurrency = (value) => {
   return decimal ? `${formattedInteger}.${decimal}` : formattedInteger;
 };
 
-const ViewAmountInvested = ({ isOpen, onClose, id:investorId }) => {
+const ViewAmountInvested = ({ isOpen, onClose, id: investorId }) => {
   const params = useParams();
   const toast = useToast();
   const id = params?.id;
@@ -131,7 +131,11 @@ const ViewAmountInvested = ({ isOpen, onClose, id:investorId }) => {
       Total_Amount: IODetails?.totalAmtInvestmentInUSD,
     });
   };
-  
+
+  console.log(
+    "=========hitttt",
+    IODetails?.ioTransactionRecords?.Approved?.[0]?.transactionAmount
+  );
 
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
@@ -151,7 +155,9 @@ const ViewAmountInvested = ({ isOpen, onClose, id:investorId }) => {
               </FormLabel>
               <Input
                 type="text"
-                value={formatDate(IODetails?.ioTransactionRecords?.Approved?.[0]?.createdAt)}
+                value={formatDate(
+                  IODetails?.ioTransactionRecords?.Approved?.[0]?.createdAt
+                )}
                 size="sm"
                 rounded={"sm"}
                 textAlign={"end"}
@@ -162,64 +168,67 @@ const ViewAmountInvested = ({ isOpen, onClose, id:investorId }) => {
             </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"))}
-    size="sm"
-    rounded={"sm"}
-    textAlign={"end"}
-    focusBorderColor="forestGreen.300"
-    fontSize={"sm"}
-    readOnly
-  />
-</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?.Approved?.[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?.Approved?.[0]?.transactionAmount || 0)
-    )}
-    size="sm"
-    rounded={"sm"}
-    focusBorderColor="forestGreen.300"
-    fontSize={"sm"}
-    textAlign={"right"}
-    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>
 
             <ModalFooter>
               <Box display={"flex"} justifyContent={"center"} gap={2}>
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
index c2f5e49..dd99522 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} /> },
@@ -98,15 +98,25 @@ const ViewIOdata = () => {
             {tabs.map(({ label }, index) => (
               <Tab
                 px={3}
-                isDisabled={
-                  index === 0 ||
-                  index === 1 ||
-                  index === 2 ||
-                  index === 3 ||
-                  index === 4
-                    ? false
-                    : !IODetails?.isInvestedAmount
-                }
+                // isDisabled={
+                //   index === 0 ||
+                //   index === 1 ||
+                //   index === 2 ||
+                //   index === 3 ||
+                //   index === 4
+                //     ? false
+                //     : !IODetails?.isInvestedAmount
+                // }
+                
+                // isDisabled={
+                //   index === 0 ||
+                //   index === 1 ||
+                //   index === 2 ||
+                //   index === 3 ||
+                //   index === 4
+                //     ? false
+                //     : !IODetails?.isInvestedAmount
+                // }
                 key={index}
                 fontSize={"xs"}
                 _selected={{
-- 
2.34.1


From 6ffcff58a2f5493b4740b5748bfa1b180884c794 Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Thu, 21 Nov 2024 17:42:27 +0530
Subject: [PATCH 09/49] update tabs

---
 .../CreateIO/IOTransaction/ViewCancel.jsx     | 18 +++++++++---------
 .../ViewDistributionInvestor.jsx              | 18 +++++++++---------
 .../CreateIO/IOTransaction/ViewExit.jsx       | 18 +++++++++---------
 src/Pages/IO_Management/ViewIO/ViewIOdata.jsx | 19 ++++++++++---------
 src/Services/io.service.js                    |  2 +-
 5 files changed, 38 insertions(+), 37 deletions(-)

diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx
index 1b89458..5dc7406 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx
@@ -86,15 +86,15 @@ import RequestRejectModal from "./RequestRejectModal";
       resolver: yupResolver(investorExit),
     });
   
-    useEffect(() => {
-      console.log("hiit     useEffectc");
-      handleCalculate(id, {
-        amount: IODetails?.ioMVNAV,
-      });
-      reset({
-        amount: IODetails?.ioMVNAV,
-      });
-    }, [IODetails, id]);
+    // useEffect(() => {
+    //   console.log("hiit     useEffectc");
+    //   handleCalculate(id, {
+    //     amount: IODetails?.ioMVNAV,
+    //   });
+    //   reset({
+    //     amount: IODetails?.ioMVNAV,
+    //   });
+    // }, [IODetails, id]);
   
     const handleCalculate = async (id, data) => {
       try {
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx
index 87b9a25..3f3c059 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx
@@ -70,15 +70,15 @@ const ViewDistributionInvestor = ({ isOpen, onClose,id:exitId }) => {
     resolver: yupResolver(investorExit),
   });
 
-  useEffect(() => {
-    console.log("hiit     useEffectc");
-    handleCalculate(id, {
-      amount: IODetails?.ioMVNAV,
-    });
-    reset({
-      amount: IODetails?.ioMVNAV,
-    });
-  }, [IODetails, id]);
+  // useEffect(() => {
+  //   console.log("hiit     useEffectc");
+  //   handleCalculate(id, {
+  //     amount: IODetails?.ioMVNAV,
+  //   });
+  //   reset({
+  //     amount: IODetails?.ioMVNAV,
+  //   });
+  // }, [IODetails, id]);
 
   const handleCalculate = async (id, data) => {
     try {
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx
index 262adcf..9a5ed80 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx
@@ -76,15 +76,15 @@ import RequestRejectModal from "./RequestRejectModal";
       resolver: yupResolver(),
     });
   
-    useEffect(() => {
-      console.log("hiit     useEffectc");
-      handleCalculate(id, {
-        amount: IODetails?.ioMVNAV,
-      });
-      reset({
-        amount: IODetails?.ioMVNAV,
-      });
-    }, [IODetails, id]);
+    // useEffect(() => {
+    //   console.log("hiit     useEffectc");
+    //   handleCalculate(id, {
+    //     amount: IODetails?.ioMVNAV,
+    //   });
+    //   reset({
+    //     amount: IODetails?.ioMVNAV,
+    //   });
+    // }, [IODetails, id]);
   
     const handleCalculate = async (id, data) => {
       try {
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
index dd99522..cb3a6d1 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
@@ -98,15 +98,16 @@ const ViewIOdata = () => {
             {tabs.map(({ label }, index) => (
               <Tab
                 px={3}
-                // isDisabled={
-                //   index === 0 ||
-                //   index === 1 ||
-                //   index === 2 ||
-                //   index === 3 ||
-                //   index === 4
-                //     ? false
-                //     : !IODetails?.isInvestedAmount
-                // }
+                isDisabled={
+                  index === 0 ||
+                  index === 1 ||
+                  index === 2 ||
+                  index === 3 ||
+                  index === 4 ||
+                  index === 8
+                    ? false
+                    : !IODetails?.isInvestedAmount
+                }
                 
                 // isDisabled={
                 //   index === 0 ||
diff --git a/src/Services/io.service.js b/src/Services/io.service.js
index efb5a21..f937183 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 }) => ({
-- 
2.34.1


From 1c4f9757819fcc63a5e40d8c171019c360bd6162 Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Fri, 22 Nov 2024 12:48:02 +0530
Subject: [PATCH 10/49] update bugs

---
 .../CreateIO/IOCashDetails/Approved.jsx       |  15 +-
 .../CreateIO/IOCashDetails/Pending.jsx        |  15 +-
 .../CreateIO/IOCashDetails/Rejected.jsx       |  11 +-
 .../CreateIO/IONAVDetails/Approved.jsx        | 474 +++++++++---------
 .../CreateIO/IONAVDetails/Pending.jsx         |   5 +-
 .../CreateIO/IONAVDetails/Rejected.jsx        |   5 +-
 .../CreateIO/IOTransaction/Approved.jsx       |  18 +-
 .../CreateIO/IOTransaction/Pending.jsx        |  17 +-
 .../CreateIO/IOTransaction/Rejected.jsx       |   7 +-
 .../IOTransaction/ViewAmountInvested.jsx      |   4 +-
 .../CreateIO/IOTransaction/ViewCancel.jsx     |   8 +-
 .../ViewDistributionInvestor.jsx              |  23 +-
 .../CreateIO/IOTransaction/ViewExit.jsx       |   8 +-
 .../IO_Management/ViewIO/ViewIOdataHeader.jsx |   6 +-
 14 files changed, 328 insertions(+), 288 deletions(-)

diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx
index b0f2014..34f727a 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx
@@ -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: (
@@ -224,9 +227,13 @@ const Approved = () => {
               overflowWrap="normal"
             >
               <Badge ms={1} colorScheme="green" me={1}>
-          $
-        </Badge>
-              {IODetails?.ioCash}
+                $
+              </Badge>
+              {/* {IODetails?.ioCash} */}
+              {parseFloat(IODetails?.ioCash || 0).toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
             </Th>
             <Th
               textAlign={"center"}
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
index 30047b3..dc44a53 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
@@ -129,7 +129,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: (
@@ -289,7 +292,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"}
@@ -401,7 +410,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 7f18cc6..243e624 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
@@ -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": (
@@ -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/IONAVDetails/Approved.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx
index 354da90..f6ed889 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?.creator?.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/Pending.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx
index 39a0218..d68239e 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx
@@ -110,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": (
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/Rejected.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/Rejected.jsx
index 8b69230..3f0aa17 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/Rejected.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/Rejected.jsx
@@ -114,7 +114,10 @@ import AddNavDetails from "./AddNavDetails";
             <Badge ms={1} colorScheme="green" me={1}>
             $
           </Badge>
-          {item?.transactionAmount}
+          {parseFloat(item?.transactionAmount || 0).toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
         </Text>
       ),
       "Last Nav Update": (
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/Approved.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/Approved.jsx
index 86b65d6..b027b7d 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/Approved.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/Approved.jsx
@@ -71,6 +71,7 @@ import {
   
     const tableHeadRow = [
       "Sr No.",
+      "Transaction Date",
       "Transaction Name",
       "Amount",
       "Created By",
@@ -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": (
@@ -118,7 +132,7 @@ import {
           color={"gray.800"}
           fontWeight={"500"}
         >
-          {item?.createdBy}
+          {item?.creator?.firstName}
         </Text>
       ),
       "Created On": (
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
index cd9a771..18138fc 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
@@ -108,6 +108,7 @@ const Pending = () => {
 
   const tableHeadRow = [
     "Sr No.",
+    "Transaction Date",
     "Transaction Name",
     "Amount",
     "Created By",
@@ -125,6 +126,15 @@ const Pending = () => {
           {index + 1}.
         </Text>
       ),
+      "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}
@@ -135,12 +145,15 @@ const Pending = () => {
           <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}
+          {item?.creator?.firstName}
         </Text>
       ),
       "Created On": (
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/Rejected.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/Rejected.jsx
index ef5420d..388ce77 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/Rejected.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/Rejected.jsx
@@ -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": (
@@ -118,7 +121,7 @@ import {
           color={"gray.800"}
           fontWeight={"500"}
         >
-          {item?.createdBy}
+          {item?.creator?.firstName}
         </Text>
       ),
       "Created On": (
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx
index 3983f72..9d43fd8 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx
@@ -230,7 +230,7 @@ const ViewAmountInvested = ({ isOpen, onClose, id: investorId }) => {
               />
             </FormControl>
 
-            <ModalFooter>
+            {localStorage?.getItem("role") !== "Maker" && <ModalFooter>
               <Box display={"flex"} justifyContent={"center"} gap={2}>
                 <Button
                   rounded={"sm"}
@@ -264,7 +264,7 @@ const ViewAmountInvested = ({ isOpen, onClose, id: investorId }) => {
                   Reject
                 </Button>
               </Box>
-            </ModalFooter>
+            </ModalFooter>}
           </form>
         </ModalBody>
       </ModalContent>
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx
index 5dc7406..c5a2864 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx
@@ -309,8 +309,8 @@ import RequestRejectModal from "./RequestRejectModal";
               data={extractedArray}
             />
           </ModalBody>
-          <ModalFooter pt={0}>
-          <Box display={"flex"} justifyContent={"center"} gap={2}>
+          {localStorage?.getItem("role") !== "Maker" && <ModalFooter pt={0}>
+            <Box display={"flex"} justifyContent={"center"} gap={2}>
                 <Button
                   rounded={"sm"}
                   size={"xs"}
@@ -342,8 +342,8 @@ import RequestRejectModal from "./RequestRejectModal";
                 >
                   Reject
                 </Button>
-              </Box>
-          </ModalFooter>
+            </Box>
+          </ModalFooter>}
         </ModalContent>
         <ApprovedCancelTransaction
         isOpen={isConfirmOpen}
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx
index 3f3c059..08c3462 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx
@@ -70,15 +70,15 @@ const ViewDistributionInvestor = ({ isOpen, onClose,id:exitId }) => {
     resolver: yupResolver(investorExit),
   });
 
-  // useEffect(() => {
-  //   console.log("hiit     useEffectc");
-  //   handleCalculate(id, {
-  //     amount: IODetails?.ioMVNAV,
-  //   });
-  //   reset({
-  //     amount: IODetails?.ioMVNAV,
-  //   });
-  // }, [IODetails, id]);
+  useEffect(() => {
+    console.log("hiit     useEffectc");
+    handleCalculate(id, {
+      amount: IODetails?.ioMVNAV,
+    });
+    reset({
+      amount: IODetails?.ioMVNAV,
+    });
+  }, [IODetails, id]);
 
   const handleCalculate = async (id, data) => {
     try {
@@ -212,7 +212,8 @@ const ViewDistributionInvestor = ({ isOpen, onClose,id:exitId }) => {
             data={extractedArray}
           />
         </ModalBody>
-        <ModalFooter pt={0}>
+        {/* ...(localStorage?.getItem("role") !== "Maker" ? ["Status"] : []), */}
+        {localStorage?.getItem("role") !== "Maker" &&<ModalFooter pt={0}>
           <Box display={"flex"} justifyContent={"center"} gap={2}>
             <Button
               rounded={"sm"}
@@ -246,7 +247,7 @@ const ViewDistributionInvestor = ({ isOpen, onClose,id:exitId }) => {
               Reject
             </Button>
           </Box>
-        </ModalFooter>
+        </ModalFooter>}
       </ModalContent>
       <ApproveDistrubationModal
         isOpen={isConfirmOpen}
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx
index 9a5ed80..1b30b56 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx
@@ -270,8 +270,8 @@ import RequestRejectModal from "./RequestRejectModal";
             />
             {/* ) } */}
           </ModalBody>
-          <ModalFooter pt={0}>
-          <Box display={"flex"} justifyContent={"center"} gap={2}>
+          {localStorage?.getItem("role") !== "Maker" && <ModalFooter pt={0}>
+            <Box display={"flex"} justifyContent={"center"} gap={2}>
                 <Button
                   rounded={"sm"}
                   size={"xs"}
@@ -303,8 +303,8 @@ import RequestRejectModal from "./RequestRejectModal";
                 >
                   Reject
                 </Button>
-              </Box>
-          </ModalFooter>
+            </Box>
+          </ModalFooter>}
         </ModalContent>
         <ApprovedExit
             isOpen={isConfirmOpen}
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
index 05f57dd..b9ff454 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
@@ -505,8 +505,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 +537,7 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
               </MenuItem>
             ))}
           </MenuList>
-        </Menu>
+        </Menu>}
 
         {/* Modals */}
         <AmountInvested isOpen={isInvestmentOpen} onClose={onInvestmentClose} />
-- 
2.34.1


From f3a8a80f4df172ff414b02c2d69ace498e23adf0 Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Fri, 22 Nov 2024 13:32:28 +0530
Subject: [PATCH 11/49] update action

---
 .../CreateIO/IOCashDetails/Approved.jsx       |  4 +--
 .../CreateIO/IOCashDetails/Pending.jsx        | 25 ++++++++++++++++---
 .../CreateIO/IOCashDetails/Rejected.jsx       |  4 +--
 .../IOCashDetails/RequestApproveModal.jsx     |  4 +--
 .../CreateIO/IONAVDetails/Approved.jsx        |  4 +--
 .../CreateIO/IONAVDetails/Pending.jsx         | 22 +++++++++++++---
 .../CreateIO/IONAVDetails/Rejected.jsx        |  4 +--
 .../IONAVDetails/RequestApproveModal.jsx      |  2 +-
 .../CreateIO/IOTransaction/Approved.jsx       |  2 +-
 .../CreateIO/IOTransaction/Pending.jsx        |  4 +--
 .../CreateIO/IOTransaction/Rejected.jsx       |  2 +-
 .../IOTransaction/RequestApproveModal.jsx     |  2 +-
 .../IOTransaction/RequestExitApproveModal.jsx |  2 +-
 13 files changed, 57 insertions(+), 24 deletions(-)

diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx
index 34f727a..4b78d65 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx
@@ -132,12 +132,12 @@ const Approved = () => {
         display={"flex"}
         alignItems={"center"}
       >
-        <Avatar
+        {/* <Avatar
           mr={2}
           size="sm"
           name={item.creator?.firstName}
           src={item.creator?.profilePhoto}
-        />
+        /> */}
         {item?.creator?.firstName}
       </Text>
     ),
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
index dc44a53..a7be1f9 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
@@ -104,7 +104,8 @@ const Pending = () => {
     "Comments",
     "Update by",
     "Update On",
-    ...(localStorage?.getItem('role')!=="Maker" ? ["Status"] : []),
+    // ...(localStorage?.getItem('role')!=="Maker" ? ["Status"] : []),
+    "Status"
   ];
 
   const extractedArray = filteredData?.map((item, index) => ({
@@ -149,12 +150,12 @@ const Pending = () => {
         display={"flex"}
         alignItems={"center"}
       >
-        <Avatar
+        {/* <Avatar
           mr={2}
           size="sm"
           name={item?.creator?.firstName}
           src={item?.creator?.profilePhoto}
-        />
+        /> */}
         {item?.creator?.firstName}
       </Text>
     ),
@@ -164,7 +165,9 @@ const Pending = () => {
       </Text>
     ),
     Status: (
-      <Box display={"flex"} justifyContent={"center"} gap={2}>
+      <Box display={"flex"} justifyContent={"center"}>
+        {localStorage?.getItem("role") !== "Maker" ? <Box>
+          <Box display={"flex"} justifyContent={"center"} gap={2}>
         <Tooltip
           rounded={"sm"}
           fontSize={"xs"}
@@ -219,6 +222,20 @@ const Pending = () => {
             <CloseIcon fontSize={"10px"} />
           </Button>
         </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>
     ),
   }));
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
index 243e624..5a6af37 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
@@ -144,12 +144,12 @@ 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}
         </Text>
       ),
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/IONAVDetails/Approved.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx
index f6ed889..d9d777f 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx
@@ -147,12 +147,12 @@ const Approved = () => {
         display={"flex"}
         alignItems={"center"}
       >
-        <Avatar
+        {/* <Avatar
           mr={2}
           size="sm"
           name={item.creator?.firstName}
           src={item.creator?.profilePhoto}
-        />
+        /> */}
         {item?.creator?.firstName}
       </Text>
     ),
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx
index d68239e..133d758 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx
@@ -152,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}
       </Text>
     ),
     Status: (
-      <Box display={"flex"} justifyContent={"center"} gap={2}>
+      <Box display={"flex"} justifyContent={"center"}>
+        {localStorage?.getItem("role") !== "Maker" ? <Box>
+          <Box display={"flex"} justifyContent={"center"} gap={2}>
         <Tooltip
           rounded={"sm"}
           fontSize={"xs"}
@@ -217,6 +219,20 @@ const Pending = () => {
             <CloseIcon fontSize={"10px"} />
           </Button>
         </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>
     ),
   }));
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/Rejected.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/Rejected.jsx
index 3f0aa17..e94f61c 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/Rejected.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/Rejected.jsx
@@ -161,12 +161,12 @@ import AddNavDetails from "./AddNavDetails";
           display={"flex"}
         alignItems={"center"}
         >
-           <Avatar
+           {/* <Avatar
             mr={2}
           size="sm"
           name={item.creator?.firstName}
           src={item.creator?.profilePhoto}
-        />
+        /> */}
           {item?.creator?.firstName}
         </Text>
       ),
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/Approved.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/Approved.jsx
index b027b7d..4202924 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/Approved.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/Approved.jsx
@@ -153,7 +153,7 @@ import {
           color={"gray.800"}
           fontWeight={"500"}
         >
-           {item?.modifier ? formatDate(item?.updatedAt) : "---" }
+           {item?.modifier?.firstName}
         </Text>
         {/* <Text
           w={"100px"}
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
index 18138fc..3a795bc 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
@@ -163,7 +163,7 @@ const Pending = () => {
       ),
       "Approved By": (
         <Text w={"100px"} as={"span"} color={"gray.800"} fontWeight={"500"}>
-          {item?.modifier ? item?.modifier : "---"}
+          {item?.modifier?.firstName}
         </Text>
       ),
       "Approved On": (
@@ -193,7 +193,7 @@ const Pending = () => {
               }
             }}
           >
-            <ViewIcon me={"4px"} /> View
+            {localStorage?.getItem("role") === "Maker" ?  <ViewIcon me={"4px"} /> : null} {localStorage?.getItem("role") === "Maker" ?  "View" : "Approve / reject"}
           </Button>
         </Box>
       ),
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/Rejected.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/Rejected.jsx
index 388ce77..6203687 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/Rejected.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/Rejected.jsx
@@ -141,7 +141,7 @@ import {
           color={"gray.800"}
           fontWeight={"500"}
         >
-           {item?.modifier ? formatDate(item?.updatedAt) : "---" }
+           {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>
-- 
2.34.1


From 0ab898a3dae4d3f1f8d70a9b424e1ab496a57c6c Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Fri, 22 Nov 2024 16:19:59 +0530
Subject: [PATCH 12/49] update new bugs

---
 .../CreateIO/IOCashDetails/AddCaseDetails.jsx |   3 +
 .../CreateIO/IOCashDetails/Approved.jsx       |  16 +-
 .../CreateIO/IOCashDetails/IOCashDetails.jsx  | 138 +++--
 .../CreateIO/IOCashDetails/Pending.jsx        |  20 +-
 .../CreateIO/IOCashDetails/Rejected.jsx       |  14 +-
 .../CreateIO/IONAVDetails/AddNavDetails.jsx   |   1 -
 .../CreateIO/IONAVDetails/Approved.jsx        |  14 +-
 .../CreateIO/IONAVDetails/IONAVDetails.jsx    | 216 ++++++--
 .../CreateIO/IONAVDetails/Pending.jsx         |  32 +-
 .../CreateIO/IONAVDetails/Rejected.jsx        | 471 +++++++++---------
 .../ApproveDistrubationModal.jsx              |   3 +-
 .../CreateIO/IOTransaction/Approved.jsx       |   2 +
 .../CreateIO/IOTransaction/Pending.jsx        |  14 +-
 .../CreateIO/IOTransaction/Rejected.jsx       |   2 +
 .../IOTransaction/RequestRejectModal.jsx      |   3 +-
 .../IOTransaction/ViewAmountInvested.jsx      |  11 +-
 .../ViewDistributionInvestor.jsx              |   4 +-
 .../ViewIO/HeaderModal/AmountInvested.jsx     |   2 +-
 .../IO_Management/ViewIO/ViewIOdataHeader.jsx |  39 +-
 src/Services/io.service.js                    |   2 +-
 20 files changed, 612 insertions(+), 395 deletions(-)

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 4b78d65..e6c66d1 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx
@@ -285,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) {
@@ -322,7 +322,7 @@ const Approved = () => {
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
           />
-
+          
           <HStack display={"flex"} alignItems={"center"}>
             <Button
               onClick={() =>
@@ -349,7 +349,7 @@ const Approved = () => {
             >
               Add
             </Button> */}
-            {IODetails?.isInvestedAmount ? (
+            {/* {IODetails?.isInvestedAmount ? (
               localStorage?.getItem('role') ==="Maker" && <Button
                 onClick={handleAdd}
                 leftIcon={<AddIcon />}
@@ -360,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 a7be1f9..636359e 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
@@ -104,8 +104,8 @@ const Pending = () => {
     "Comments",
     "Update by",
     "Update On",
-    // ...(localStorage?.getItem('role')!=="Maker" ? ["Status"] : []),
-    "Status"
+    ...(localStorage?.getItem('role')!=="Maker" ? ["Actions"] : []),
+    
   ];
 
   const extractedArray = filteredData?.map((item, index) => ({
@@ -164,7 +164,7 @@ const Pending = () => {
         {formatDate(item.updatedAt)}
       </Text>
     ),
-    Status: (
+    Actions: (
       <Box display={"flex"} justifyContent={"center"}>
         {localStorage?.getItem("role") !== "Maker" ? <Box>
           <Box display={"flex"} justifyContent={"center"} gap={2}>
@@ -365,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) {
@@ -403,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}
@@ -416,7 +416,7 @@ const Pending = () => {
                 Add
               </Button>
             ) : null}
-          </HStack>
+          </HStack> */}
         </HStack>
       </Box>
 
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
index 5a6af37..70be463 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
@@ -267,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()
  
@@ -307,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}
@@ -320,7 +320,7 @@ import AddCaseDetails from "./AddCaseDetails";
                 Add
               </Button>
             ) : null}
-            </HStack>
+            </HStack> */}
           </HStack>
         </Box>
   
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 d9d777f..a7a58d1 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx
@@ -162,11 +162,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) {
@@ -249,7 +249,7 @@ const Approved = () => {
             >
               Export xls
             </Button>
-            {IODetails?.isInvestedAmount
+            {/* {IODetails?.isInvestedAmount
               ? localStorage?.getItem("role") === "Maker" && (
                   <Button
                     onClick={handleAdd}
@@ -262,7 +262,7 @@ const Approved = () => {
                     Add
                   </Button>
                 )
-              : null}
+              : null} */}
           </HStack>
         </HStack>
       </Box>
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 133d758..456096b 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";
@@ -163,7 +163,7 @@ const Pending = () => {
     ),
     Status: (
       <Box display={"flex"} justifyContent={"center"}>
-        {localStorage?.getItem("role") !== "Maker" ? <Box>
+       <Box>
           <Box display={"flex"} justifyContent={"center"} gap={2}>
         <Tooltip
           rounded={"sm"}
@@ -220,19 +220,7 @@ const Pending = () => {
           </Button>
         </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> 
       </Box>
     ),
   }));
@@ -254,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) {
@@ -291,7 +279,7 @@ const Pending = () => {
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
           />
-          {IODetails?.isInvestedAmount
+          {/* {IODetails?.isInvestedAmount
             ? localStorage?.getItem("role") === "Maker" && (
                 <Button
                   onClick={handleAdd}
@@ -304,7 +292,7 @@ const Pending = () => {
                   Add
                 </Button>
               )
-            : null}
+            : null} */}
         </HStack>
       </Box>
 
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/Rejected.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/Rejected.jsx
index e94f61c..e1040d8 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/Rejected.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/Rejected.jsx
@@ -1,137 +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>
-          {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": ( 
+  };
+
+  // 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"}
@@ -142,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?.creator?.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/IOTransaction/ApproveDistrubationModal.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveDistrubationModal.jsx
index c54738d..667db8a 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveDistrubationModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveDistrubationModal.jsx
@@ -33,7 +33,7 @@ import {
     .max(200, "Approve Comment cannot be more than 200 characters"),
   });
   
-  const ApproveDistrubationModal = ({ isOpen, onClose, firstField ,id}) => {
+  const ApproveDistrubationModal = ({ isOpen, onClose, firstField ,id, onBigModalClose}) => {
     const [isBtnLoading , setIsBtnLoading] = useState(false)
   
     const toast = useToast()
@@ -71,6 +71,7 @@ import {
             ),
           });
           onClose()
+          onBigModalClose()
           setIsBtnLoading(false)
         }else{
           toast({
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/Approved.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/Approved.jsx
index 4202924..e0f9160 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/Approved.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/Approved.jsx
@@ -131,6 +131,7 @@ import {
           as={"span"}
           color={"gray.800"}
           fontWeight={"500"}
+          textTransform={'capitalize'}
         >
           {item?.creator?.firstName}
         </Text>
@@ -152,6 +153,7 @@ import {
           as={"span"}
           color={"gray.800"}
           fontWeight={"500"}
+          textTransform={'capitalize'}
         >
            {item?.modifier?.firstName}
         </Text>
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
index 3a795bc..a8db39d 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
@@ -115,7 +115,7 @@ const Pending = () => {
     "Created On",
     "Approved By",
     "Approved On",
-    "Status",
+    "Actions",
   ];
 
   const extractedArray = IODetails?.ioTransactionRecords?.Pending?.map(
@@ -152,7 +152,8 @@ const Pending = () => {
         </Text>
       ),
       "Created By": (
-        <Text w={"100px"} as={"span"} color={"gray.800"} fontWeight={"500"}>
+        <Text 
+        textTransform={'capitalize'} w={"100px"} as={"span"} color={"gray.800"} fontWeight={"500"}>
           {item?.creator?.firstName}
         </Text>
       ),
@@ -162,7 +163,8 @@ const Pending = () => {
         </Text>
       ),
       "Approved By": (
-        <Text w={"100px"} as={"span"} color={"gray.800"} fontWeight={"500"}>
+        <Text 
+        textTransform={'capitalize'} w={"100px"} as={"span"} color={"gray.800"} fontWeight={"500"}>
           {item?.modifier?.firstName}
         </Text>
       ),
@@ -171,10 +173,10 @@ const Pending = () => {
           {item?.modifier ? formatDate(item?.updatedAt) : "---"}
         </Text>
       ),
-      Status: (
+      Actions: (
         <Box display={"flex"} justifyContent={"center"} gap={2}>
           <Button
-            colorScheme="green"
+            colorScheme="forestGreen"
             rounded={"sm"}
             size={"xs"}
             px={2}
@@ -193,7 +195,7 @@ const Pending = () => {
               }
             }}
           >
-            {localStorage?.getItem("role") === "Maker" ?  <ViewIcon me={"4px"} /> : null} {localStorage?.getItem("role") === "Maker" ?  "View" : "Approve / reject"}
+            {localStorage?.getItem("role") === "Maker" ?  <ViewIcon me={"4px"} /> : null} {localStorage?.getItem("role") === "Maker" ?  "View" : "Approve / Reject"}
           </Button>
         </Box>
       ),
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/Rejected.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/Rejected.jsx
index 6203687..942b450 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/Rejected.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/Rejected.jsx
@@ -120,6 +120,7 @@ import {
           as={"span"}
           color={"gray.800"}
           fontWeight={"500"}
+          textTransform={'capitalize'}
         >
           {item?.creator?.firstName}
         </Text>
@@ -140,6 +141,7 @@ import {
           as={"span"}
           color={"gray.800"}
           fontWeight={"500"}
+          textTransform={'capitalize'}
         >
            {item?.modifier?.firstName}
         </Text>
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/RequestRejectModal.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestRejectModal.jsx
index 561150e..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()
@@ -77,6 +77,7 @@ const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
           ),
         });
         onClose()
+        onBigModalClose()
         setIsBtnLoading(false)
       }else{
         toast({
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx
index 9d43fd8..25eef94 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx
@@ -26,6 +26,7 @@ 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({
@@ -114,7 +115,7 @@ const ViewAmountInvested = ({ isOpen, onClose, id: investorId }) => {
     }
   };
 
-  const formatDate = (date) => new Date(date).toLocaleDateString();
+  // const formatDate = (date) => new Date(date).toLocaleDateString();
 
   const handleAmountChange = (e) => {
     // e might be an object or just a value, handle both cases
@@ -134,7 +135,7 @@ const ViewAmountInvested = ({ isOpen, onClose, id: investorId }) => {
 
   console.log(
     "=========hitttt",
-    IODetails?.ioTransactionRecords?.Approved?.[0]?.transactionAmount
+    IODetails?.ioTransactionRecords?.Pending?.[0]?.createdAt
   );
 
   return (
@@ -156,8 +157,9 @@ const ViewAmountInvested = ({ isOpen, onClose, id: investorId }) => {
               <Input
                 type="text"
                 value={formatDate(
-                  IODetails?.ioTransactionRecords?.Approved?.[0]?.createdAt
+                  IODetails?.ioTransactionRecords?.Pending?.[0]?.createdAt
                 )}
+                // value={IODetails?.ioTransactionRecords?.Pending?.[0]?.createdAt}
                 size="sm"
                 rounded={"sm"}
                 textAlign={"end"}
@@ -165,6 +167,9 @@ const ViewAmountInvested = ({ isOpen, onClose, id: investorId }) => {
                 fontSize={"sm"}
                 readOnly
               />
+              {/* <Text>
+                {IODetails?.ioTransactionRecords?.Approved?.[0]?.createdAt} dccd
+              </Text> */}
             </FormControl>
 
             <FormControl
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx
index 08c3462..6df053a 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx
@@ -91,7 +91,7 @@ const ViewDistributionInvestor = ({ isOpen, onClose,id:exitId }) => {
       } else if (res?.data?.statusCode === 200) {
         setCalculatedDate(res?.data?.data);
         setIsCalculateLoading(false);
-        setIsCalcualtedData(true);
+        setIsCalcualtedData(false);
       }
     } catch (error) {}
   };
@@ -252,11 +252,13 @@ const ViewDistributionInvestor = ({ isOpen, onClose,id:exitId }) => {
       <ApproveDistrubationModal
         isOpen={isConfirmOpen}
         onClose={onConfirmClose}
+        onBigModalClose={handleClose}
         id={exitId}
       />
       <RequestRejectModal
         isOpen={isRejectOpen}
         onClose={onRejectClose}
+        onBigModalClose={handleClose}
         id={exitId}
       />
     </Modal>
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/AmountInvested.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/AmountInvested.jsx
index ecbff24..02d7af2 100644
--- a/src/Pages/IO_Management/ViewIO/HeaderModal/AmountInvested.jsx
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/AmountInvested.jsx
@@ -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/ViewIOdataHeader.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
index b9ff454..2d4eb78 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()
  
@@ -167,13 +167,40 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
      
     }
    }
+
+   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({
+           render: () => (
+             <ToastBox status={"error"} message={res?.error?.data?.message} />
+           ),
+         });
+        //  setIsLoading(false);
+       }
+    } catch (error) { 
+     
+    }
+   }
    
 
   const menu = [
     {
       id: 1,
       title: "Amount Invested",
-      onClickFunction: onInvestmentOpen,
+      onClickFunction: handleInvestment,
     },
     // {
     //   id:2,
diff --git a/src/Services/io.service.js b/src/Services/io.service.js
index f937183..77db31a 100644
--- a/src/Services/io.service.js
+++ b/src/Services/io.service.js
@@ -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`,
-- 
2.34.1


From 23c3997d06efedaef3cdef1423ab19864a9b0178 Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Fri, 22 Nov 2024 16:56:31 +0530
Subject: [PATCH 13/49] updated

---
 src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx | 2 +-
 src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx  | 2 +-
 src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx | 2 +-
 src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx  | 2 +-
 src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx   | 2 +-
 src/Pages/IO_Management/CreateIO/IONAVDetails/Rejected.jsx  | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx
index e6c66d1..749498b 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx
@@ -138,7 +138,7 @@ const Approved = () => {
           name={item.creator?.firstName}
           src={item.creator?.profilePhoto}
         /> */}
-        {item?.creator?.firstName}
+        {item?.modifier?.firstName}
       </Text>
     ),
     "Update On": (
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
index 636359e..dd6716f 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
@@ -156,7 +156,7 @@ const Pending = () => {
           name={item?.creator?.firstName}
           src={item?.creator?.profilePhoto}
         /> */}
-        {item?.creator?.firstName}
+        {item?.modifier?.firstName}
       </Text>
     ),
     "Update On": (
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
index 70be463..470fdc8 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
@@ -150,7 +150,7 @@ import AddCaseDetails from "./AddCaseDetails";
             name={item.creator?.firstName}
             src={item.creator?.profilePhoto}
           /> */}
-          {item?.creator?.firstName}
+          {item?.modifier?.firstName}
         </Text>
       ),
       "Update On": (
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx
index a7a58d1..3b1a0a8 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx
@@ -153,7 +153,7 @@ const Approved = () => {
           name={item.creator?.firstName}
           src={item.creator?.profilePhoto}
         /> */}
-        {item?.creator?.firstName}
+        {item?.modifier?.firstName}
       </Text>
     ),
   }));
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx
index 456096b..928532a 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx
@@ -158,7 +158,7 @@ const Pending = () => {
           name={item.creator?.firstName}
           src={item.creator?.profilePhoto}
         /> */}
-        {item?.creator?.firstName}
+        {item?.modifier?.firstName}
       </Text>
     ),
     Status: (
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/Rejected.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/Rejected.jsx
index e1040d8..2603e3f 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/Rejected.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/Rejected.jsx
@@ -149,7 +149,7 @@ const Rejected = () => {
           name={item.creator?.firstName}
           src={item.creator?.profilePhoto}
         /> */}
-        {item?.creator?.firstName}
+        {item?.modifier?.firstName}
       </Text>
     ),
   }));
-- 
2.34.1


From 29a49150b7bba489ca4c8fa7754c7bb69f40a624 Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Fri, 22 Nov 2024 18:51:05 +0530
Subject: [PATCH 14/49] update modal close

---
 .../CreateIO/IOCashDetails/Pending.jsx        |  8 ++++----
 .../ApproveDistrubationModal.jsx              |  2 +-
 .../IOTransaction/ApproveInvestedModal.jsx    |  5 +++--
 .../ApprovedCancelTransaction.jsx             |  5 +++--
 .../CreateIO/IOTransaction/ApprovedExit.jsx   |  5 +++--
 .../IOTransaction/ViewAmountInvested.jsx      |  2 ++
 .../CreateIO/IOTransaction/ViewCancel.jsx     |  2 ++
 .../CreateIO/IOTransaction/ViewExit.jsx       |  2 ++
 .../IO_Management/ViewIO/ViewIOdataHeader.jsx | 20 +++++++++----------
 9 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
index dd6716f..fa7e9db 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
@@ -166,8 +166,8 @@ const Pending = () => {
     ),
     Actions: (
       <Box display={"flex"} justifyContent={"center"}>
-        {localStorage?.getItem("role") !== "Maker" ? <Box>
-          <Box display={"flex"} justifyContent={"center"} gap={2}>
+        {localStorage?.getItem("role") !== "Maker"  ? <Box>
+          {index===0&&<Box display={"flex"} justifyContent={"center"} gap={2}>
         <Tooltip
           rounded={"sm"}
           fontSize={"xs"}
@@ -221,8 +221,8 @@ const Pending = () => {
           >
             <CloseIcon fontSize={"10px"} />
           </Button>
-        </Tooltip>
-        </Box>
+        </Tooltip></Box>}
+        
         </Box> : <Button
             colorScheme="green"
             rounded={"sm"}
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveDistrubationModal.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveDistrubationModal.jsx
index 667db8a..639d4b7 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveDistrubationModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveDistrubationModal.jsx
@@ -142,7 +142,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/ApproveInvestedModal.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveInvestedModal.jsx
index a165034..8ea065e 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveInvestedModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveInvestedModal.jsx
@@ -33,7 +33,7 @@ import {
     .max(200, "Approve Comment cannot be more than 200 characters"),
   });
   
-  const ApproveInvestedModal = ({ isOpen, onClose, firstField ,id}) => {
+  const ApproveInvestedModal = ({ isOpen, onClose, firstField ,id,onBigModalClose}) => {
     const [isBtnLoading , setIsBtnLoading] = useState(false)
   
     const toast = useToast()
@@ -69,6 +69,7 @@ import {
             ),
           });
           onClose()
+          onBigModalClose()
           setIsBtnLoading(false)
         }else{
           toast({
@@ -139,7 +140,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/ApprovedCancelTransaction.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedCancelTransaction.jsx
index 327e5b1..1233c75 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedCancelTransaction.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedCancelTransaction.jsx
@@ -22,7 +22,7 @@ import {
   import {useApproveCancleTransactionMutation, useApproveExitTransactionMutation} from "../../../../Services/io.service";
 
   
-  const ApprovedCancelTransaction = ({ isOpen, onClose, firstField ,id}) => {
+  const ApprovedCancelTransaction = ({ isOpen, onClose, firstField ,id,onBigModalClose}) => {
     const [isBtnLoading , setIsBtnLoading] = useState(false)
   
     const toast = useToast()
@@ -58,6 +58,7 @@ import {
             ),
           });
           onClose()
+          onBigModalClose()
           setIsBtnLoading(false)
         }else{
           toast({
@@ -123,7 +124,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/ApprovedExit.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedExit.jsx
index 0c9a50d..2b3f4fa 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedExit.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedExit.jsx
@@ -30,7 +30,7 @@ import {
     .max(200, "Approve Comment cannot be more than 200 characters"),
   });
   
-  const ApprovedExit = ({ isOpen, onClose, firstField ,id}) => {
+  const ApprovedExit = ({ isOpen, onClose, firstField ,id,onBigModalClose}) => {
     const [isBtnLoading , setIsBtnLoading] = useState(false)
   
     const toast = useToast()
@@ -66,6 +66,7 @@ import {
             ),
           });
           onClose()
+          onBigModalClose()
           setIsBtnLoading(false)
         }else{
           toast({
@@ -137,7 +138,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/ViewAmountInvested.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx
index 25eef94..a297a60 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx
@@ -276,11 +276,13 @@ const ViewAmountInvested = ({ isOpen, onClose, id: investorId }) => {
       <ApproveInvestedModal
         isOpen={isConfirmOpen}
         onClose={onConfirmClose}
+        onBigModalClose={onClose}
         id={investorId}
       />
       <RequestRejectModal
         isOpen={isRejectOpen}
         onClose={onRejectClose}
+        onBigModalClose={onClose}
         id={investorId}
       />
     </Modal>
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx
index c5a2864..e388d02 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx
@@ -348,11 +348,13 @@ import RequestRejectModal from "./RequestRejectModal";
         <ApprovedCancelTransaction
         isOpen={isConfirmOpen}
         onClose={onConfirmClose}
+        onBigModalClose={onClose}
         id={cancleId}
       />
       <RequestRejectModal
         isOpen={isRejectOpen}
         onClose={onRejectClose}
+        onBigModalClose={onClose}
         id={cancleId}
       />
       </Modal>
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx
index 1b30b56..1bb0b6a 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx
@@ -309,11 +309,13 @@ import RequestRejectModal from "./RequestRejectModal";
         <ApprovedExit
             isOpen={isConfirmOpen}
             onClose={onConfirmClose}
+            onBigModalClose={onClose}
             id={investerId}
         />
         <RequestRejectModal
             isOpen={isRejectOpen}
             onClose={onRejectClose}
+            onBigModalClose={onClose}
             id={investerId}
         />
       </Modal>
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
index 2d4eb78..9772dd0 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
@@ -147,11 +147,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);
         onExitOpen()
  
@@ -174,11 +174,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);
         onInvestmentOpen()
  
-- 
2.34.1


From 272e94caf05bd0ecbb20bf2667a4d475e074942e Mon Sep 17 00:00:00 2001
From: "Siddhesh.More" <siddhesh.more@wdimails.com>
Date: Fri, 22 Nov 2024 18:57:49 +0530
Subject: [PATCH 15/49] upodate

---
 src/Services/token.serivce.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Services/token.serivce.js b/src/Services/token.serivce.js
index 143762c..639fdf8 100644
--- a/src/Services/token.serivce.js
+++ b/src/Services/token.serivce.js
@@ -46,7 +46,7 @@ export const baseQuery = async (args, api, extraOptions) => {
         if (refreshResult.data) {
           // Save new tokens
           localStorage.setItem("accessToken", refreshResult?.data?.data?.access?.token);
-          localStorage.setItem("role", refreshResult?.data?.data?.role);
+          // localStorage.setItem("role", refreshResult?.data?.data?.role);
           // console.log(refreshResult?.data?.data?.role);
         
 
-- 
2.34.1


From b0c01f3a0c7a0ba62f7b2da7cec44e3809ba5634 Mon Sep 17 00:00:00 2001
From: "Siddhesh.More" <siddhesh.more@wdimails.com>
Date: Fri, 22 Nov 2024 19:00:14 +0530
Subject: [PATCH 16/49] updaate role

---
 src/Services/token.serivce.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Services/token.serivce.js b/src/Services/token.serivce.js
index 143762c..639fdf8 100644
--- a/src/Services/token.serivce.js
+++ b/src/Services/token.serivce.js
@@ -46,7 +46,7 @@ export const baseQuery = async (args, api, extraOptions) => {
         if (refreshResult.data) {
           // Save new tokens
           localStorage.setItem("accessToken", refreshResult?.data?.data?.access?.token);
-          localStorage.setItem("role", refreshResult?.data?.data?.role);
+          // localStorage.setItem("role", refreshResult?.data?.data?.role);
           // console.log(refreshResult?.data?.data?.role);
         
 
-- 
2.34.1


From bf7b3e1596b0aa27d2f6994b501b84eaccab506f Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Fri, 22 Nov 2024 19:04:31 +0530
Subject: [PATCH 17/49] token change

---
 src/Services/token.serivce.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Services/token.serivce.js b/src/Services/token.serivce.js
index 143762c..639fdf8 100644
--- a/src/Services/token.serivce.js
+++ b/src/Services/token.serivce.js
@@ -46,7 +46,7 @@ export const baseQuery = async (args, api, extraOptions) => {
         if (refreshResult.data) {
           // Save new tokens
           localStorage.setItem("accessToken", refreshResult?.data?.data?.access?.token);
-          localStorage.setItem("role", refreshResult?.data?.data?.role);
+          // localStorage.setItem("role", refreshResult?.data?.data?.role);
           // console.log(refreshResult?.data?.data?.role);
         
 
-- 
2.34.1


From a12b2c9a2c702332ee47ba769355addc852708f0 Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Fri, 22 Nov 2024 19:22:06 +0530
Subject: [PATCH 18/49] updaste

---
 .../IO_Management/CreateIO/IOCashDetails/AddCaseDetails.jsx | 3 ++-
 .../IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx  | 6 ++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/AddCaseDetails.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/AddCaseDetails.jsx
index 3bc016d..82983d2 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/AddCaseDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/AddCaseDetails.jsx
@@ -36,7 +36,7 @@ const cashDetails = yup.object().shape({
   comments: yup.string().notRequired(),
 });
 
-const AddCaseDetails = ({ isOpen, onClose, firstField, actionId, setActionId, data }) => {
+const AddCaseDetails = ({ isOpen, onClose, firstField, actionId, setActionId, data, setActiveTab }) => {
   const params = useParams() 
   const id = params?.id
   const [file, setFile] = useState("");
@@ -88,6 +88,7 @@ const AddCaseDetails = ({ isOpen, onClose, firstField, actionId, setActionId, da
           render: () => <ToastBox message={res?.data?.message} />,
         });
         handleClose()
+        setActiveTab(1)
       }else if(res?.error){
         setIsLoading(false);
         toast({
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx
index 3055a43..e2910fe 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx
@@ -9,7 +9,7 @@ import {
   useDisclosure,
   useToast,
 } from "@chakra-ui/react";
-import React, { useContext, useRef } from "react";
+import React, { useContext, useRef, useState } from "react";
 import Approved from "./Approved";
 import Pending from "./Pending";
 import Rejected from "./Rejected";
@@ -29,6 +29,7 @@ const IOCashDetails = () => {
   const firstField = useRef();
 
   const [updateIOCase] = useUpdateIOCaseMutation();
+  const [activeTab, setActiveTab] = useState(0);
 
   const handleAdd = async () => {
     
@@ -56,7 +57,7 @@ const IOCashDetails = () => {
 
   return (
     <Box>
-    <Tabs variant='unstyled'>
+    <Tabs index={activeTab} onChange={(index) => setActiveTab(index)} variant='unstyled'>
       <Box
         display={"flex"}
         justifyContent={"space-between"}
@@ -119,6 +120,7 @@ const IOCashDetails = () => {
       </TabPanels>
     </Tabs>
     <AddCaseDetails
+    setActiveTab={setActiveTab}
         isOpen={isOpen}
         onClose={onClose}
         firstField={firstField}
-- 
2.34.1


From d4c9a5521ff1156972b3a32056afadb885d45067 Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Fri, 22 Nov 2024 19:54:12 +0530
Subject: [PATCH 19/49] update modal view

---
 .../IOCashDetails/RequestApproveModal.jsx     |  2 +-
 .../IONAVDetails/RequestApproveModal.jsx      |  2 +-
 .../ApproveDistrubationModal.jsx              |  2 +-
 .../IOTransaction/ApproveInvestedModal.jsx    |  2 +-
 .../ApprovedCancelTransaction.jsx             |  2 +-
 .../CreateIO/IOTransaction/ApprovedExit.jsx   |  2 +-
 .../IOTransaction/RequestApproveModal.jsx     |  2 +-
 .../IOTransaction/RequestExitApproveModal.jsx |  2 +-
 .../IOTransaction/ViewAmountInvested.jsx      |  1 +
 .../CreateIO/IOTransaction/ViewCancel.jsx     | 20 ++++++++++--------
 .../ViewDistributionInvestor.jsx              | 11 +++++++---
 .../CreateIO/IOTransaction/ViewExit.jsx       | 21 +++++++++++--------
 src/Pages/IO_Management/ViewIO/ViewIOdata.jsx | 10 ++++++++-
 13 files changed, 49 insertions(+), 30 deletions(-)

diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestApproveModal.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestApproveModal.jsx
index c771b46..1acc243 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestApproveModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestApproveModal.jsx
@@ -129,7 +129,7 @@ const RequestApproveModal = ({ isOpen, onClose, firstField ,id}) => {
                 fontSize="sm"
                 type="textarea"
                 size="md"
-                placeholder={"Enter your checkerComment...."}
+                placeholder={"Enter your checker comment...."}
                 rounded={"md"}
                 resize={"none"}
                 maxLength={200}
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestApproveModal.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestApproveModal.jsx
index edad9d3..13b37ea 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestApproveModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestApproveModal.jsx
@@ -129,7 +129,7 @@ const RequestApproveModal = ({ isOpen, onClose, firstField ,id}) => {
                 fontSize="sm"
                 type="textarea"
                 size="md"
-                placeholder={"Enter your checkerComment...."}
+                placeholder={"Enter your checker comment...."}
                 rounded={"md"}
                 resize={"none"}
                 maxLength={200}
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveDistrubationModal.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveDistrubationModal.jsx
index 639d4b7..4fb5ba8 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveDistrubationModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveDistrubationModal.jsx
@@ -131,7 +131,7 @@ import {
                   fontSize="sm"
                   type="textarea"
                   size="md"
-                  placeholder={"Enter your checkerComment...."}
+                  placeholder={"Enter your checker comment...."}
                   rounded={"md"}
                   resize={"none"}
                   maxLength={200}
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveInvestedModal.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveInvestedModal.jsx
index 8ea065e..b1bd5de 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveInvestedModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveInvestedModal.jsx
@@ -129,7 +129,7 @@ import {
                   fontSize="sm"
                   type="textarea"
                   size="md"
-                  placeholder={"Enter your checkerComment...."}
+                  placeholder={"Enter your checker comment...."}
                   rounded={"md"}
                   resize={"none"}
                   maxLength={200}
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedCancelTransaction.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedCancelTransaction.jsx
index 1233c75..596c62b 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedCancelTransaction.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedCancelTransaction.jsx
@@ -113,7 +113,7 @@ import {
                   fontSize="sm"
                   type="textarea"
                   size="md"
-                  placeholder={"Enter your checkerComment...."}
+                  placeholder={"Enter your checker comment...."}
                   rounded={"md"}
                   resize={"none"}
                   maxLength={200}
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedExit.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedExit.jsx
index 2b3f4fa..977fc3f 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedExit.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedExit.jsx
@@ -127,7 +127,7 @@ import {
                   fontSize="sm"
                   type="textarea"
                   size="md"
-                  placeholder={"Enter your checkerComment...."}
+                  placeholder={"Enter your checker comment...."}
                   rounded={"md"}
                   resize={"none"}
                   maxLength={200}
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/RequestApproveModal.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestApproveModal.jsx
index 507aeb2..3a1bd92 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/RequestApproveModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestApproveModal.jsx
@@ -128,7 +128,7 @@ const RequestApproveModal = ({ isOpen, onClose, firstField ,id}) => {
                 fontSize="sm"
                 type="textarea"
                 size="md"
-                placeholder={"Enter your checkerComment...."}
+                placeholder={"Enter your checker comment...."}
                 rounded={"md"}
                 resize={"none"}
                 maxLength={200}
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/RequestExitApproveModal.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestExitApproveModal.jsx
index 5bc15c7..e6c4b5f 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/RequestExitApproveModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestExitApproveModal.jsx
@@ -128,7 +128,7 @@ import {
                   fontSize="sm"
                   type="textarea"
                   size="md"
-                  placeholder={"Enter your checkerComment...."}
+                  placeholder={"Enter your checker comment...."}
                   rounded={"md"}
                   resize={"none"}
                   maxLength={200}
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx
index a297a60..9af6d74 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx
@@ -116,6 +116,7 @@ const ViewAmountInvested = ({ isOpen, onClose, id: investorId }) => {
   };
 
   // const formatDate = (date) => new Date(date).toLocaleDateString();
+  
 
   const handleAmountChange = (e) => {
     // e might be an object or just a value, handle both cases
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx
index e388d02..8ae7157 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx
@@ -86,15 +86,17 @@ import RequestRejectModal from "./RequestRejectModal";
       resolver: yupResolver(investorExit),
     });
   
-    // useEffect(() => {
-    //   console.log("hiit     useEffectc");
-    //   handleCalculate(id, {
-    //     amount: IODetails?.ioMVNAV,
-    //   });
-    //   reset({
-    //     amount: IODetails?.ioMVNAV,
-    //   });
-    // }, [IODetails, id]);
+    useEffect(() => {
+      console.log("hiit     useEffectc");
+      if (id) {
+        handleCalculate(id, {
+          amount: IODetails?.ioMVNAV,
+        });
+       }
+      reset({
+        amount: IODetails?.ioMVNAV,
+      });
+    }, [IODetails, id]);
   
     const handleCalculate = async (id, data) => {
       try {
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx
index 6df053a..5f004a9 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx
@@ -72,9 +72,14 @@ const ViewDistributionInvestor = ({ isOpen, onClose,id:exitId }) => {
 
   useEffect(() => {
     console.log("hiit     useEffectc");
-    handleCalculate(id, {
-      amount: IODetails?.ioMVNAV,
-    });
+    // handleCalculate(id, {
+    //   amount: IODetails?.ioMVNAV,
+    // });
+    if (id) {
+      handleCalculate(id, {
+        amount: IODetails?.ioMVNAV,
+      });
+     }
     reset({
       amount: IODetails?.ioMVNAV,
     });
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx
index 1bb0b6a..ff18691 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx
@@ -76,18 +76,21 @@ import RequestRejectModal from "./RequestRejectModal";
       resolver: yupResolver(),
     });
   
-    // useEffect(() => {
-    //   console.log("hiit     useEffectc");
-    //   handleCalculate(id, {
-    //     amount: IODetails?.ioMVNAV,
-    //   });
-    //   reset({
-    //     amount: IODetails?.ioMVNAV,
-    //   });
-    // }, [IODetails, id]);
+    useEffect(() => {
+      console.log("hiit     useEffectc");
+     if (id) {
+      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);
   
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
index cb3a6d1..5b68c9b 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
@@ -40,6 +40,7 @@ import Destribution from "../CreateIO/Destribution";
 import IOCashDetails from "../CreateIO/IOCashDetails/IOCashDetails";
 import IONAVDetails from "../CreateIO/IONAVDetails/IONAVDetails";
 import IOTransaction from "../CreateIO/IOTransaction/IOTransaction";
+import { GoDotFill } from "react-icons/go";
 
 const ViewIOdata = () => {
   const params = useParams();
@@ -74,6 +75,10 @@ const ViewIOdata = () => {
     // { label: "Distribution to Investors", content: <UnderConstruction h={'75vh'}  />  },
   ];
 
+  
+  console.log(IODetails?.ioNAVHistory);
+  
+
   return (
     <Box
       {...OPACITY_ON_LOAD}
@@ -125,8 +130,11 @@ const ViewIOdata = () => {
                   borderBottom: "2px solid #38a169",
                 }}
                 fontWeight={500}
+                position={"relative"}
               >
-                {label}
+                {label} {index === 5 &&IODetails?.ioCashStatusHistory?.Pending?.length !== 0||
+                  index === 6  && IODetails?.ioNAVStatusHistory?.Pending?.length !== 0 ||
+                  index === 8 && IODetails?.ioTransactionRecords?.Pending?.length !== 0 ? <Box as="span" right={0} color={"forestGreen"} top={1} position={"absolute"}><GoDotFill /></Box>:""}
               </Tab>
             ))}
           </Box>
-- 
2.34.1


From 526d2aecca0f513dd9aac0fe7b72d122264da8a5 Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Fri, 22 Nov 2024 19:57:05 +0530
Subject: [PATCH 20/49] modal api useEffect

---
 src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx   | 2 +-
 .../CreateIO/IOTransaction/ViewDistributionInvestor.jsx         | 2 +-
 src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx
index 8ae7157..b4ee8ca 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx
@@ -88,7 +88,7 @@ import RequestRejectModal from "./RequestRejectModal";
   
     useEffect(() => {
       console.log("hiit     useEffectc");
-      if (id) {
+      if (id && IODetails) {
         handleCalculate(id, {
           amount: IODetails?.ioMVNAV,
         });
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx
index 5f004a9..b0ec1d3 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx
@@ -75,7 +75,7 @@ const ViewDistributionInvestor = ({ isOpen, onClose,id:exitId }) => {
     // handleCalculate(id, {
     //   amount: IODetails?.ioMVNAV,
     // });
-    if (id) {
+    if (id && IODetails) {
       handleCalculate(id, {
         amount: IODetails?.ioMVNAV,
       });
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx
index ff18691..a14168a 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx
@@ -78,7 +78,7 @@ import RequestRejectModal from "./RequestRejectModal";
   
     useEffect(() => {
       console.log("hiit     useEffectc");
-     if (id) {
+     if (id && IODetails) {
       handleCalculate(id, {
         amount: IODetails?.ioMVNAV,
       });
-- 
2.34.1


From 3db9488444b4f61de42e587a3d622fb057188e65 Mon Sep 17 00:00:00 2001
From: Swapnil Bendal <84583651+Swapnil155@users.noreply.github.com>
Date: Fri, 22 Nov 2024 20:25:21 +0530
Subject: [PATCH 21/49] [update] - counter in pending tab

---
 .../CreateIO/IOCashDetails/IOCashDetails.jsx  | 137 +++++++++---------
 .../CreateIO/IONAVDetails/IONAVDetails.jsx    |   8 +
 .../CreateIO/IOTransaction/IOTransaction.jsx  |  14 +-
 3 files changed, 92 insertions(+), 67 deletions(-)

diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx
index e2910fe..1b2fff1 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx
@@ -1,4 +1,5 @@
 import {
+  Badge,
   Box,
   Button,
   Tab,
@@ -24,7 +25,7 @@ const IOCashDetails = () => {
   const params = useParams();
   const toast = useToast();
   const id = params?.id;
-  const { IODetails} = useContext(GlobalStateContext);
+  const { IODetails } = useContext(GlobalStateContext);
   const { isOpen, onOpen, onClose } = useDisclosure();
   const firstField = useRef();
 
@@ -32,8 +33,6 @@ const IOCashDetails = () => {
   const [activeTab, setActiveTab] = useState(0);
 
   const handleAdd = async () => {
-    
-    
     try {
       const res = await updateIOCase(id);
       if (res?.data) {
@@ -57,70 +56,78 @@ const IOCashDetails = () => {
 
   return (
     <Box>
-    <Tabs index={activeTab} onChange={(index) => setActiveTab(index)} variant='unstyled'>
-      <Box
-        display={"flex"}
-        justifyContent={"space-between"}
-        alignItems={"center"}
-        borderBottom={"1px solid #ccc"}
+      <Tabs
+        index={activeTab}
+        onChange={(index) => setActiveTab(index)}
+        variant="unstyled"
       >
-        <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"}
+        <Box
+          display={"flex"}
+          justifyContent={"space-between"}
+          alignItems={"center"}
+          borderBottom={"1px solid #ccc"}
         >
-          Add
-        </Button>
-         ) : null} 
-      </Box>
-      <TabPanels>
-        <TabPanel>
-          <Approved />
-        </TabPanel>
-        <TabPanel>
-          <Pending />
-        </TabPanel>
-        <TabPanel>
-          <Rejected />
-        </TabPanel>
-      </TabPanels>
-    </Tabs>
-    <AddCaseDetails
-    setActiveTab={setActiveTab}
+          <TabList>
+            <Tab
+              fontSize={"sm"}
+              _selected={{
+                color: "#004118",
+                borderBottom: "2px solid #38a169",
+              }}
+            >
+              Approved
+            </Tab>
+            <Tab
+              fontSize={"sm"}
+              _selected={{
+                color: "#004118",
+                borderBottom: "2px solid #38a169",
+              }}
+            >
+              Pending{" "}
+              <Badge rounded={"sm"} colorScheme="forestGreen" ms={2}>
+                {IODetails?.ioCashStatusHistory?.Pending.length || 0}
+              </Badge>
+            </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>
+      <AddCaseDetails
+        setActiveTab={setActiveTab}
         isOpen={isOpen}
         onClose={onClose}
         firstField={firstField}
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/IONAVDetails.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/IONAVDetails.jsx
index 03cf067..b2d8959 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/IONAVDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/IONAVDetails.jsx
@@ -54,6 +54,7 @@
 // export default IONAVDetails;
 
 import {
+  Badge,
   Box,
   Button,
   Tab,
@@ -134,6 +135,13 @@ const IONAVDetails = () => {
               }}
             >
               Pending
+              <Badge
+                rounded={"sm"}
+                colorScheme="forestGreen"
+                ms={2}
+              >
+                {IODetails?.ioNAVStatusHistory?.Pending.length || 0}
+              </Badge>
             </Tab>
             <Tab
               fontSize={"sm"}
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/IOTransaction.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/IOTransaction.jsx
index 7ac057d..5b195ff 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/IOTransaction.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/IOTransaction.jsx
@@ -1,10 +1,13 @@
-import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
-import React from "react";
+import { Badge, Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
+import React, { useContext } from "react";
 import Approved from "./Approved";
 import Pending from "./Pending";
 import Rejected from "./Rejected";
+import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
 
 const IOTransaction = () => {
+  
+  const { IODetails } = useContext(GlobalStateContext);
   return (
     <Tabs>
       <TabList>
@@ -25,6 +28,13 @@ const IOTransaction = () => {
           }}
         >
           Pending
+          <Badge
+                rounded={"sm"}
+                colorScheme="forestGreen"
+                ms={2}
+              >
+                {IODetails?.ioTransactionRecords?.Pending.length || 0}
+              </Badge>
         </Tab>
         <Tab
           fontSize={"sm"}
-- 
2.34.1


From 0c21e997322406cf1c11007dc1a94ca3ff25e0eb Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Mon, 25 Nov 2024 16:41:19 +0530
Subject: [PATCH 22/49] update comment changes

---
 .../CreateIO/IOArtifactsVideo.jsx             |  4 +-
 .../IOCashDetails/RequestApproveModal.jsx     | 14 +--
 .../IOCashDetails/RequestRejectModal.jsx      | 10 ++-
 .../IONAVDetails/RequestApproveModal.jsx      | 14 +--
 .../IONAVDetails/RequestRejectModal.jsx       | 10 ++-
 .../ApproveDistrubationModal.jsx              | 14 +--
 .../IOTransaction/ApproveInvestedModal.jsx    | 14 +--
 .../ApprovedCancelTransaction.jsx             | 10 +--
 .../CreateIO/IOTransaction/ApprovedExit.jsx   | 12 +--
 .../IOTransaction/RequestApproveModal.jsx     | 14 +--
 .../IOTransaction/RequestExitApproveModal.jsx | 14 +--
 .../IOTransaction/RequestRejectModal.jsx      |  9 +-
 .../IO_Management/CreateIO/Investors.jsx      |  4 +-
 src/Pages/IO_Management/ViewIO/ViewIOdata.jsx | 85 ++++++++++++++++---
 .../IO_Management/ViewIO/ViewIOdetails.jsx    | 36 ++++----
 .../DrawalRequest/DrawalRequestApprove.jsx    | 10 ++-
 .../DrawalRequest/DrawalRequestReject.jsx     | 12 ++-
 17 files changed, 193 insertions(+), 93 deletions(-)

diff --git a/src/Pages/IO_Management/CreateIO/IOArtifactsVideo.jsx b/src/Pages/IO_Management/CreateIO/IOArtifactsVideo.jsx
index 535f7a7..c9b71a7 100644
--- a/src/Pages/IO_Management/CreateIO/IOArtifactsVideo.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOArtifactsVideo.jsx
@@ -152,7 +152,7 @@ const IOArtifactsAdd = ({ isOpen, onClose, firstField, actionId, setActionId, da
 
           <DrawerBody>
             <Stack spacing={4}>
-              <FormControl isInvalid={errors.artifactName}>
+              <FormControl isInvalid={errors.artifactName} isRequired>
                 <FormLabel fontSize={"sm"}>Artifact Name</FormLabel>
                 <Controller
                   name="artifactName"
@@ -166,7 +166,7 @@ const IOArtifactsAdd = ({ isOpen, onClose, firstField, actionId, setActionId, da
                 </FormErrorMessage>
               </FormControl>
 
-              <FormControl isInvalid={errors.artifactStreamingURL}>
+              <FormControl isInvalid={errors.artifactStreamingURL} isRequired>
                 <FormLabel fontSize={"sm"}>Artifact Streaming URL</FormLabel>
                 <Controller
                   name="artifactStreamingURL"
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestApproveModal.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestApproveModal.jsx
index 1acc243..a737d08 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestApproveModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestApproveModal.jsx
@@ -25,9 +25,9 @@ import ToastBox from "../../../../Components/ToastBox";
 import { useApproveIOCaseMutation } from "../../../../Services/io.service";
 
 export const conformModalSchema = yup.object().shape({
-  // checkerComment: yup.string().required("Comment is required")
+  // comments: yup.string().required("Comment is required")
   // .max(50, "Investment name cannot be more than 50 characters"),
-  checkerComment: yup
+  comments: yup
   .string()
   .required("Comment is required")
   .max(200, "Approve Comment cannot be more than 200 characters"),
@@ -124,8 +124,8 @@ const RequestApproveModal = ({ isOpen, onClose, firstField ,id}) => {
               <Textarea
                 rows={6}
                 focusBorderColor="green.400"
-                name="checkerComment"
-                {...register("checkerComment")}
+                name="comments"
+                {...register("comments")}
                 fontSize="sm"
                 type="textarea"
                 size="md"
@@ -134,14 +134,14 @@ const RequestApproveModal = ({ isOpen, onClose, firstField ,id}) => {
                 resize={"none"}
                 maxLength={200}
               />
-              {errors.checkerComment && (
+              {errors.comments && (
                 <Text fontSize="xs" color="red">
-                  {errors.checkerComment.message}
+                  {errors.comments.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.
+                 {watch("comments")?.length || 0} characters.
               </FormHelperText>
             </FormControl>
           </ModalBody>
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestRejectModal.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestRejectModal.jsx
index 3a44d26..9e48976 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestRejectModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestRejectModal.jsx
@@ -2,6 +2,7 @@ import {
   Box,
   Button,
   FormControl,
+  FormHelperText,
   FormLabel,
   Input,
   Modal,
@@ -24,7 +25,8 @@ import ToastBox from "../../../../Components/ToastBox";
 import { useRejectIOCaseMutation } from "../../../../Services/io.service";
 
 export const conformModalSchema = yup.object().shape({
-  comments: yup.string().required("Comment is required"),
+  comments: yup.string().required("Comment is required")
+  .max(200, "Approve Comment cannot be more than 200 characters"),
 });
 
 const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
@@ -35,6 +37,7 @@ const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
   const {
     register,
     reset,
+    watch,
     handleSubmit,
     formState: { errors },
   } = useForm({
@@ -125,12 +128,17 @@ const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
                 placeholder={"Enter your comments...."}
                 rounded={"md"}
                 resize={"none"}
+                maxLength={200}
               />
               {errors.comments && (
                 <Text fontSize="xs" color="red">
                   {errors.comments.message}
                 </Text>
               )}
+              <FormHelperText fontSize="xs" color="gray.500">
+                <Box as="span" me={1}>Maximum length should be 200 characters. You have entered </Box>
+                 {watch("comments")?.length || 0} characters.
+              </FormHelperText>
             </FormControl>
           </ModalBody>
           <ModalFooter>
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestApproveModal.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestApproveModal.jsx
index 13b37ea..4d1a439 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestApproveModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestApproveModal.jsx
@@ -25,9 +25,9 @@ import ToastBox from "../../../../Components/ToastBox";
 import { useApproveIOCaseMutation, useApproveIONavMutation } from "../../../../Services/io.service";
 
 export const conformModalSchema = yup.object().shape({
-  // checkerComment: yup.string().required("Comment is required")
+  // comments: yup.string().required("Comment is required")
   // .max(50, "Investment name cannot be more than 50 characters"),
-  checkerComment: yup
+  comments: yup
   .string()
   .required("Comment is required")
   .max(200, "Approve Comment cannot be more than 200 characters"),
@@ -124,8 +124,8 @@ const RequestApproveModal = ({ isOpen, onClose, firstField ,id}) => {
               <Textarea
                 rows={6}
                 focusBorderColor="green.400"
-                name="checkerComment"
-                {...register("checkerComment")}
+                name="comments"
+                {...register("comments")}
                 fontSize="sm"
                 type="textarea"
                 size="md"
@@ -134,14 +134,14 @@ const RequestApproveModal = ({ isOpen, onClose, firstField ,id}) => {
                 resize={"none"}
                 maxLength={200}
               />
-              {errors.checkerComment && (
+              {errors.comments && (
                 <Text fontSize="xs" color="red">
-                  {errors.checkerComment.message}
+                  {errors.comments.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.
+                {watch("comments")?.length || 0} characters.
               </FormHelperText>
             </FormControl>
           </ModalBody>
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestRejectModal.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestRejectModal.jsx
index 3a44d26..9e48976 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestRejectModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestRejectModal.jsx
@@ -2,6 +2,7 @@ import {
   Box,
   Button,
   FormControl,
+  FormHelperText,
   FormLabel,
   Input,
   Modal,
@@ -24,7 +25,8 @@ import ToastBox from "../../../../Components/ToastBox";
 import { useRejectIOCaseMutation } from "../../../../Services/io.service";
 
 export const conformModalSchema = yup.object().shape({
-  comments: yup.string().required("Comment is required"),
+  comments: yup.string().required("Comment is required")
+  .max(200, "Approve Comment cannot be more than 200 characters"),
 });
 
 const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
@@ -35,6 +37,7 @@ const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
   const {
     register,
     reset,
+    watch,
     handleSubmit,
     formState: { errors },
   } = useForm({
@@ -125,12 +128,17 @@ const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
                 placeholder={"Enter your comments...."}
                 rounded={"md"}
                 resize={"none"}
+                maxLength={200}
               />
               {errors.comments && (
                 <Text fontSize="xs" color="red">
                   {errors.comments.message}
                 </Text>
               )}
+              <FormHelperText fontSize="xs" color="gray.500">
+                <Box as="span" me={1}>Maximum length should be 200 characters. You have entered </Box>
+                 {watch("comments")?.length || 0} characters.
+              </FormHelperText>
             </FormControl>
           </ModalBody>
           <ModalFooter>
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveDistrubationModal.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveDistrubationModal.jsx
index 4fb5ba8..1ce7964 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveDistrubationModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveDistrubationModal.jsx
@@ -25,9 +25,9 @@ import {
   import { useApproveDistributedMutation } from "../../../../Services/io.service";
   
   export const conformModalSchema = yup.object().shape({
-    // checkerComment: yup.string().required("Comment is required")
+    // comments: yup.string().required("Comment is required")
     // .max(50, "Investment name cannot be more than 50 characters"),
-    checkerComment: yup
+    comments: yup
     .string()
     .required("Comment is required")
     .max(200, "Approve Comment cannot be more than 200 characters"),
@@ -126,8 +126,8 @@ import {
                 <Textarea
                   rows={6}
                   focusBorderColor="green.400"
-                  name="checkerComment"
-                  {...register("checkerComment")}
+                  name="comments"
+                  {...register("comments")}
                   fontSize="sm"
                   type="textarea"
                   size="md"
@@ -136,14 +136,14 @@ import {
                   resize={"none"}
                   maxLength={200}
                 />
-                {errors.checkerComment && (
+                {errors.comments && (
                   <Text fontSize="xs" color="red">
-                    {errors.checkerComment.message}
+                    {errors.comments.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.
+                  {watch("comments")?.length || 0} characters.
                 </FormHelperText>
               </FormControl>
             </ModalBody>
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveInvestedModal.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveInvestedModal.jsx
index b1bd5de..ff29faf 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveInvestedModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveInvestedModal.jsx
@@ -25,9 +25,9 @@ import {
   import { useApproveInvestedMutation } from "../../../../Services/io.service";
   
   export const conformModalSchema = yup.object().shape({
-    // checkerComment: yup.string().required("Comment is required")
+    // comments: yup.string().required("Comment is required")
     // .max(50, "Investment name cannot be more than 50 characters"),
-    checkerComment: yup
+    comments: yup
     .string()
     .required("Comment is required")
     .max(200, "Approve Comment cannot be more than 200 characters"),
@@ -124,8 +124,8 @@ import {
                 <Textarea
                   rows={6}
                   focusBorderColor="green.400"
-                  name="checkerComment"
-                  {...register("checkerComment")}
+                  name="comments"
+                  {...register("comments")}
                   fontSize="sm"
                   type="textarea"
                   size="md"
@@ -134,14 +134,14 @@ import {
                   resize={"none"}
                   maxLength={200}
                 />
-                {errors.checkerComment && (
+                {errors.comments && (
                   <Text fontSize="xs" color="red">
-                    {errors.checkerComment.message}
+                    {errors.comments.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.
+                  {watch("comments")?.length || 0} characters.
                 </FormHelperText>
               </FormControl>
             </ModalBody>
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedCancelTransaction.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedCancelTransaction.jsx
index 596c62b..9c0e86f 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedCancelTransaction.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedCancelTransaction.jsx
@@ -108,8 +108,8 @@ import {
                 <Textarea
                   rows={6}
                   focusBorderColor="green.400"
-                  name="checkerComment"
-                  {...register("checkerComment")}
+                  name="comments"
+                  {...register("comments")}
                   fontSize="sm"
                   type="textarea"
                   size="md"
@@ -118,14 +118,14 @@ import {
                   resize={"none"}
                   maxLength={200}
                 />
-                {errors.checkerComment && (
+                {errors.comments && (
                   <Text fontSize="xs" color="red">
-                    {errors.checkerComment.message}
+                    {errors.comments.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.
+                  {watch("comments")?.length || 0} characters.
                 </FormHelperText>
               </FormControl>
             </ModalBody>
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedExit.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedExit.jsx
index 977fc3f..d2506bd 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedExit.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedExit.jsx
@@ -24,7 +24,7 @@ import {
   import {  useApproveExitTransactionMutation } from "../../../../Services/io.service";
   
   export const conformModalSchema = yup.object().shape({
-    checkerComment: yup
+    comments: yup
     .string()
     .required("Comment is required")
     .max(200, "Approve Comment cannot be more than 200 characters"),
@@ -122,8 +122,8 @@ import {
                 <Textarea
                   rows={6}
                   focusBorderColor="green.400"
-                  name="checkerComment"
-                  {...register("checkerComment")}
+                  name="comments"
+                  {...register("comments")}
                   fontSize="sm"
                   type="textarea"
                   size="md"
@@ -132,14 +132,14 @@ import {
                   resize={"none"}
                   maxLength={200}
                 />
-                {errors.checkerComment && (
+                {errors.comments && (
                   <Text fontSize="xs" color="red">
-                    {errors.checkerComment.message}
+                    {errors.comments.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.
+                  {watch("comments")?.length || 0} characters.
                 </FormHelperText>
               </FormControl>
             </ModalBody>
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/RequestApproveModal.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestApproveModal.jsx
index 3a1bd92..1eae102 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/RequestApproveModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestApproveModal.jsx
@@ -25,9 +25,9 @@ import ToastBox from "../../../../Components/ToastBox";
 import { useApproveDistributionMutation, useApproveIOCaseMutation, useApproveIONavMutation } from "../../../../Services/io.service";
 
 export const conformModalSchema = yup.object().shape({
-  // checkerComment: yup.string().required("Comment is required")
+  // comments: yup.string().required("Comment is required")
   // .max(50, "Investment name cannot be more than 50 characters"),
-  checkerComment: yup
+  comments: yup
   .string()
   .required("Comment is required")
   .max(200, "Approve Comment cannot be more than 200 characters"),
@@ -123,8 +123,8 @@ const RequestApproveModal = ({ isOpen, onClose, firstField ,id}) => {
               <Textarea
                 rows={6}
                 focusBorderColor="green.400"
-                name="checkerComment"
-                {...register("checkerComment")}
+                name="comments"
+                {...register("comments")}
                 fontSize="sm"
                 type="textarea"
                 size="md"
@@ -133,14 +133,14 @@ const RequestApproveModal = ({ isOpen, onClose, firstField ,id}) => {
                 resize={"none"}
                 maxLength={200}
               />
-              {errors.checkerComment && (
+              {errors.comments && (
                 <Text fontSize="xs" color="red">
-                  {errors.checkerComment.message}
+                  {errors.comments.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.
+                {watch("comments")?.length || 0} characters.
               </FormHelperText>
             </FormControl>
           </ModalBody>
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/RequestExitApproveModal.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestExitApproveModal.jsx
index e6c4b5f..a5a16a5 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/RequestExitApproveModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestExitApproveModal.jsx
@@ -25,9 +25,9 @@ import {
   import { useApproveDistributionMutation, useApproveExitMutation, useApproveIOCaseMutation, useApproveIONavMutation } from "../../../../Services/io.service";
   
   export const conformModalSchema = yup.object().shape({
-    // checkerComment: yup.string().required("Comment is required")
+    // comments: yup.string().required("Comment is required")
     // .max(50, "Investment name cannot be more than 50 characters"),
-    checkerComment: yup
+    comments: yup
     .string()
     .required("Comment is required")
     .max(200, "Approve Comment cannot be more than 200 characters"),
@@ -123,8 +123,8 @@ import {
                 <Textarea
                   rows={6}
                   focusBorderColor="green.400"
-                  name="checkerComment"
-                  {...register("checkerComment")}
+                  name="comments"
+                  {...register("comments")}
                   fontSize="sm"
                   type="textarea"
                   size="md"
@@ -133,14 +133,14 @@ import {
                   resize={"none"}
                   maxLength={200}
                 />
-                {errors.checkerComment && (
+                {errors.comments && (
                   <Text fontSize="xs" color="red">
-                    {errors.checkerComment.message}
+                    {errors.comments.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.
+                  {watch("comments")?.length || 0} characters.
                 </FormHelperText>
               </FormControl>
             </ModalBody>
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/RequestRejectModal.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestRejectModal.jsx
index d4631f4..3e1660d 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/RequestRejectModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestRejectModal.jsx
@@ -2,6 +2,7 @@ import {
   Box,
   Button,
   FormControl,
+  FormHelperText,
   FormLabel,
   Input,
   Modal,
@@ -24,7 +25,8 @@ import ToastBox from "../../../../Components/ToastBox";
 import { useRejectIOCaseMutation } from "../../../../Services/io.service";
 
 export const conformModalSchema = yup.object().shape({
-  comments: yup.string().required("Comment is required"),
+  comments: yup.string().required("Comment is required")
+  .max(200, "Approve Comment cannot be more than 200 characters"),
 });
 
 const RequestRejectModal = ({ isOpen, onClose, firstField ,id, onBigModalClose}) => {
@@ -35,6 +37,7 @@ const RequestRejectModal = ({ isOpen, onClose, firstField ,id, onBigModalClose})
   const {
     register,
     reset,
+    watch,
     handleSubmit,
     formState: { errors },
   } = useForm({
@@ -136,6 +139,10 @@ const RequestRejectModal = ({ isOpen, onClose, firstField ,id, onBigModalClose})
                   {errors.comments.message}
                 </Text>
               )}
+              <FormHelperText fontSize="xs" color="gray.500">
+              <Box as="span" me={1}>Maximum length should be 200 characters. You have entered</Box>
+                {watch("comments")?.length || 0} characters.
+              </FormHelperText>
             </FormControl>
           </ModalBody>
           <ModalFooter>
diff --git a/src/Pages/IO_Management/CreateIO/Investors.jsx b/src/Pages/IO_Management/CreateIO/Investors.jsx
index 36f0955..35a6eff 100644
--- a/src/Pages/IO_Management/CreateIO/Investors.jsx
+++ b/src/Pages/IO_Management/CreateIO/Investors.jsx
@@ -508,7 +508,7 @@ console.log(IODetails?.investors);
             > 
               Export xls
             </Button>
-            <Box as="span">
+            {/* <Box as="span">
               <Icon
                 ms={0}
                 animation={
@@ -524,7 +524,7 @@ console.log(IODetails?.investors);
                 _hover={{ bg: "gray.100" }}
                 cursor={"pointer"}
               />
-            </Box>
+            </Box> */}
           </Box>
 
           <HStack
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
index 5b68c9b..b44b695 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
@@ -1,7 +1,10 @@
 import {
   Box,
   Button,
+  Icon,
   Input,
+  keyframes,
+  Stack,
   Tab,
   TabList,
   TabPanel,
@@ -16,7 +19,7 @@ import { useContext, useEffect, useState } from "react";
 import FormInputView from "../../../Components/FormInputView";
 import { useForm } from "react-hook-form"; // assuming react-hook-form is used
 import { OPACITY_ON_LOAD } from "../../../Layout/animations";
-import { ArrowBackIcon } from "@chakra-ui/icons";
+import { ArrowBackIcon, RepeatIcon } from "@chakra-ui/icons";
 import CustomAlertDialog from "../../../Components/CustomAlertDialog";
 import ViewIOdataHeader from "./ViewIOdataHeader";
 import ViewIOdetails from "./ViewIOdetails";
@@ -42,20 +45,30 @@ import IONAVDetails from "../CreateIO/IONAVDetails/IONAVDetails";
 import IOTransaction from "../CreateIO/IOTransaction/IOTransaction";
 import { GoDotFill } from "react-icons/go";
 
+const rotate = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+
 const ViewIOdata = () => {
   const params = useParams();
   const id = params?.id;
-  const { data, error, isLoading } = useGetIOprepopulateDataQuery();
+  const { data, error, isLoading, refetch } = useGetIOprepopulateDataQuery();
   const { isOpen, onOpen, onClose } = useDisclosure();
   const navigate = useNavigate();
   const [isEditing, setIsEditing] = useState(false);
+  const [isRefetchLoading, setIsRefetchLoading] = useState(false);
   const { IODetails, setIODetails } = useContext(GlobalStateContext);
-  console.log(IODetails?.isInvestedAmount); 
+  console.log(IODetails?.isInvestedAmount);
 
   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} /> },
@@ -75,9 +88,14 @@ const ViewIOdata = () => {
     // { label: "Distribution to Investors", content: <UnderConstruction h={'75vh'}  />  },
   ];
 
-  
+  const handleRefresh = async () => {
+    setIsRefetchLoading(true);
+
+    await refetch();
+    setIsRefetchLoading(false);
+  };
+
   console.log(IODetails?.ioNAVHistory);
-  
 
   return (
     <Box
@@ -99,7 +117,7 @@ const ViewIOdata = () => {
 
       <Tabs mt={4}>
         <TabList justifyContent={"space-between"} pe={4} alignItems={"center"}>
-          <Box display={"flex"}>
+          <Box display={"flex"} position={"relative"} w={"100%"}>
             {tabs.map(({ label }, index) => (
               <Tab
                 px={3}
@@ -113,7 +131,6 @@ const ViewIOdata = () => {
                     ? false
                     : !IODetails?.isInvestedAmount
                 }
-                
                 // isDisabled={
                 //   index === 0 ||
                 //   index === 1 ||
@@ -132,11 +149,57 @@ const ViewIOdata = () => {
                 fontWeight={500}
                 position={"relative"}
               >
-                {label} {index === 5 &&IODetails?.ioCashStatusHistory?.Pending?.length !== 0||
-                  index === 6  && IODetails?.ioNAVStatusHistory?.Pending?.length !== 0 ||
-                  index === 8 && IODetails?.ioTransactionRecords?.Pending?.length !== 0 ? <Box as="span" right={0} color={"forestGreen"} top={1} position={"absolute"}><GoDotFill /></Box>:""}
+                {label}{" "}
+                {(index === 5 &&
+                  IODetails?.ioCashStatusHistory?.Pending?.length !== 0) ||
+                (index === 6 &&
+                  IODetails?.ioNAVStatusHistory?.Pending?.length !== 0) ||
+                (index === 8 &&
+                  IODetails?.ioTransactionRecords?.Pending?.length !== 0) ? (
+                  <Box
+                    as="span"
+                    right={0}
+                    color={"forestGreen"}
+                    top={1}
+                    position={"absolute"}
+                  >
+                    <GoDotFill />
+                  </Box>
+                ) : (
+                  ""
+                )}
               </Tab>
             ))}
+            {/* <Box as="span" position={"absolute"} right={2} bottom={1}>
+              <Icon
+                ms={0}
+                animation={
+                  isRefetchLoading ? `${rotate} 1s linear infinite` : "none"
+                }
+                bg={"gray.50"}
+                onClick={handleRefresh}
+                fontWeight={600}
+                as={RepeatIcon}
+                boxSize={8}
+                p={2}
+                rounded={"full"}
+                _hover={{ bg: "gray.100" }}
+                cursor={"pointer"}
+              />
+            </Box> */}
+            <Stack position={"absolute"} right={2} bottom={1} direction="row" spacing={4}>
+              <Button
+                isLoading={isRefetchLoading}
+                loadingText="Refresh"
+                colorScheme="forestGreen"
+                variant="solid"
+                size={'xs'}
+                onClick={handleRefresh}
+                fontWeight={400}
+              >
+                Refresh
+              </Button>
+            </Stack>
           </Box>
         </TabList>
         <TabPanels>
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdetails.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdetails.jsx
index bd2d3f8..6c837be 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOdetails.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdetails.jsx
@@ -1,4 +1,4 @@
-import { Box, Button } from "@chakra-ui/react";
+import { Box, Button, Text } from "@chakra-ui/react";
 import React, { useContext, useEffect } from "react";
 
 import { useNavigate, useParams } from "react-router-dom";
@@ -240,11 +240,6 @@ const ViewIOdetails = () => {
       width: "32.3%",
       value: IObyID?.data?.isShariah,
     },
-
-
-
-
-
     {
       label: "Investment Type",
       placeHolder: "Select option",
@@ -351,19 +346,22 @@ const ViewIOdetails = () => {
 
   return (
     <Box position={"relative"}>
-      <Button
-        position={"absolute"}
-        top={"-62px"}
-        right={0}
-        onClick={() => navigate(`/create-io/${params?.id}`)}
-        ps={4}
-        pe={4}
-        colorScheme="forestGreen"
-        rounded={"sm"}
-        size={"xs"}
-      >  
-        Edit IO
-      </Button>
+      <Box display={"flex"} justifyContent={"space-between"}>
+        <Text></Text>
+        <Button
+          // position={"absolute"}
+          // top={"-62px"}
+          right={0}
+          onClick={() => navigate(`/create-io/${params?.id}`)}
+          ps={4}
+          pe={4}
+          colorScheme="forestGreen"
+          rounded={"sm"}
+          size={"xs"}
+        >  
+          Edit IO
+        </Button>
+      </Box>
       <FormInputView  groupedFields={groupedFields} />
     </Box>
   );
diff --git a/src/Pages/WithDrawal/DrawalRequest/DrawalRequestApprove.jsx b/src/Pages/WithDrawal/DrawalRequest/DrawalRequestApprove.jsx
index a70e7e6..6163e42 100644
--- a/src/Pages/WithDrawal/DrawalRequest/DrawalRequestApprove.jsx
+++ b/src/Pages/WithDrawal/DrawalRequest/DrawalRequestApprove.jsx
@@ -3,6 +3,7 @@ import {
   Box,
   Button,
   FormControl,
+  FormHelperText,
   FormLabel,
   Heading,
   HStack,
@@ -36,7 +37,8 @@ const FILE_TYPES = ["image/jpeg", "image/png", "image/gif"];
 
 export const conformModalSchema = yup.object().shape({
   investorAmount: yup.string().required("Investor amount is required"),
-  comment: yup.string().notRequired(),
+  comment: yup.string().notRequired()
+  .max(200, "Approve Comment cannot be more than 200 characters"),
 });
 
 const DrawalRequestApprove = ({
@@ -59,6 +61,7 @@ const DrawalRequestApprove = ({
   const {
     control,
     register,
+    watch,
     reset,
     handleSubmit,
     formState: { errors },
@@ -259,12 +262,17 @@ const DrawalRequestApprove = ({
                   size="sm"
                   placeholder={"Enter your comments...."}
                   resize={"none"}
+                  maxLength={200}
                 />
                 {errors.comment && (
                   <Text fontSize="xs" color="red">
                     {errors.comment.message}
                   </Text>
                 )}
+                <FormHelperText fontSize="xs" color="gray.500">
+                  <Text as={"span"} me={1}>Maximum length should be 200 characters. You have entered</Text>
+                  {watch("checkerComment")?.length || 0} characters.
+                </FormHelperText>
               </FormControl>
             </ModalBody>
             <ModalFooter>
diff --git a/src/Pages/WithDrawal/DrawalRequest/DrawalRequestReject.jsx b/src/Pages/WithDrawal/DrawalRequest/DrawalRequestReject.jsx
index 3766c66..e9e3668 100644
--- a/src/Pages/WithDrawal/DrawalRequest/DrawalRequestReject.jsx
+++ b/src/Pages/WithDrawal/DrawalRequest/DrawalRequestReject.jsx
@@ -2,6 +2,7 @@ import {
     Box,
     Button,
     FormControl,
+    FormHelperText,
     FormLabel,
     Input,
     Modal,
@@ -24,7 +25,8 @@ import {
 import { useDepositRejectMutation } from "../../../Services/drawal.request.service";
   
   export const conformModalSchema = yup.object().shape({
-    comments: yup.string().required("Comment is required"),
+    comments: yup.string().required("Comment is required")
+    .max(200, "Approve Comment cannot be more than 200 characters"),
   });
   
   const DrawalRequestReject = ({ isOpen, onClose, firstField ,id}) => {
@@ -34,6 +36,7 @@ import { useDepositRejectMutation } from "../../../Services/drawal.request.servi
   
     const {
       register,
+      watch,
       reset,
       handleSubmit,
       formState: { errors },
@@ -101,16 +104,21 @@ import { useDepositRejectMutation } from "../../../Services/drawal.request.servi
                   placeholder={"Enter your comments...."}
                   rounded={"md"}
                   resize={"none"}
+                  maxLength={200}
                 />
                 {errors.comments && (
                   <Text fontSize="xs" color="red">
                     {errors.comments.message}
                   </Text>
                 )}
+                <FormHelperText fontSize="xs" color="gray.500">
+                <Text as={"span"} me={1}>Maximum length should be 200 characters. You have entered</Text>
+                  {watch("checkerComment")?.length || 0} characters.
+                </FormHelperText>
               </FormControl>
             </ModalBody>
             <ModalFooter>
-              <Button
+              <Button 
                 colorScheme="gray"
                 mr={3}
                 onClick={onClose}
-- 
2.34.1


From 4f8916036edc292fb7ecfc6c8e3c1ab484da7557 Mon Sep 17 00:00:00 2001
From: Swapnil Bendal <84583651+Swapnil155@users.noreply.github.com>
Date: Mon, 25 Nov 2024 16:45:52 +0530
Subject: [PATCH 23/49] [update] - condition on pending request for checkers

---
 .../CreateIO/IOCashDetails/IOCashDetails.jsx  |  9 ++++++--
 .../CreateIO/IONAVDetails/IONAVDetails.jsx    | 12 +++++-----
 .../CreateIO/IOTransaction/IOTransaction.jsx  | 22 +++++++++++--------
 3 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx
index 1b2fff1..f7fb367 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx
@@ -85,9 +85,14 @@ const IOCashDetails = () => {
               }}
             >
               Pending{" "}
-              <Badge rounded={"sm"} colorScheme="forestGreen" ms={2}>
+              {IODetails?.ioCashStatusHistory?.Pending.length > 0 && (
+                <Badge rounded={"sm"} colorScheme="forestGreen" ms={2}>
+                  {IODetails?.ioCashStatusHistory?.Pending.length || 0}
+                </Badge>
+              )}
+              {/* <Badge rounded={"sm"} colorScheme="forestGreen" ms={2}>
                 {IODetails?.ioCashStatusHistory?.Pending.length || 0}
-              </Badge>
+              </Badge> */}
             </Tab>
             <Tab
               fontSize={"sm"}
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/IONAVDetails.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/IONAVDetails.jsx
index b2d8959..5aca373 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/IONAVDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/IONAVDetails.jsx
@@ -135,13 +135,11 @@ const IONAVDetails = () => {
               }}
             >
               Pending
-              <Badge
-                rounded={"sm"}
-                colorScheme="forestGreen"
-                ms={2}
-              >
-                {IODetails?.ioNAVStatusHistory?.Pending.length || 0}
-              </Badge>
+              {IODetails?.ioNAVStatusHistory?.Pending.length > 0 && (
+                <Badge rounded={"sm"} colorScheme="forestGreen" ms={2}>
+                  {IODetails?.ioNAVStatusHistory?.Pending.length || 0}
+                </Badge>
+              )}
             </Tab>
             <Tab
               fontSize={"sm"}
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/IOTransaction.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/IOTransaction.jsx
index 5b195ff..265a638 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/IOTransaction.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/IOTransaction.jsx
@@ -1,4 +1,11 @@
-import { Badge, Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
+import {
+  Badge,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+} from "@chakra-ui/react";
 import React, { useContext } from "react";
 import Approved from "./Approved";
 import Pending from "./Pending";
@@ -6,7 +13,6 @@ import Rejected from "./Rejected";
 import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
 
 const IOTransaction = () => {
-  
   const { IODetails } = useContext(GlobalStateContext);
   return (
     <Tabs>
@@ -28,13 +34,11 @@ const IOTransaction = () => {
           }}
         >
           Pending
-          <Badge
-                rounded={"sm"}
-                colorScheme="forestGreen"
-                ms={2}
-              >
-                {IODetails?.ioTransactionRecords?.Pending.length || 0}
-              </Badge>
+          {IODetails?.ioTransactionRecords?.Pending.length > 0 && (
+            <Badge rounded={"sm"} colorScheme="forestGreen" ms={2}>
+              {IODetails?.ioTransactionRecords?.Pending.length || 0}
+            </Badge>
+          )}
         </Tab>
         <Tab
           fontSize={"sm"}
-- 
2.34.1


From 694dde0f14fbd0425471ce3ac6540cf8f8c54de0 Mon Sep 17 00:00:00 2001
From: Swapnil Bendal <84583651+Swapnil155@users.noreply.github.com>
Date: Mon, 25 Nov 2024 19:03:42 +0530
Subject: [PATCH 24/49] [fixed] - view io details

---
 src/Pages/IO_Management/ViewIO/ViewIOdata.jsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
index b44b695..26046c6 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
@@ -37,7 +37,7 @@ import EditIO from "../EditIO/EditIO";
 import IOArtifacts from "../CreateIO/IOArtifacts";
 // import IOCashDetails from "../CreateIO/IOCashDetailsold";
 // import IONAVDetails from "../CreateIO/IONAVDetailsOld";
-import { useGetIOprepopulateDataQuery } from "../../../Services/io.service";
+import { useGetIOByIdQuery, useGetIOprepopulateDataQuery } from "../../../Services/io.service";
 import UnderConstruction from "../../UnderConstruction";
 import Destribution from "../CreateIO/Destribution";
 import IOCashDetails from "../CreateIO/IOCashDetails/IOCashDetails";
@@ -58,6 +58,12 @@ const ViewIOdata = () => {
   const params = useParams();
   const id = params?.id;
   const { data, error, isLoading, refetch } = useGetIOprepopulateDataQuery();
+  const {
+    data: IObyID,
+    isLoading: IObyIDisLoading,
+    error: IObyIDerror,
+    refetch: IObyIDrefetch,
+  } = useGetIOByIdQuery(id, { skip: !id });
   const { isOpen, onOpen, onClose } = useDisclosure();
   const navigate = useNavigate();
   const [isEditing, setIsEditing] = useState(false);
@@ -91,7 +97,7 @@ const ViewIOdata = () => {
   const handleRefresh = async () => {
     setIsRefetchLoading(true);
 
-    await refetch();
+    await IObyIDrefetch();
     setIsRefetchLoading(false);
   };
 
-- 
2.34.1


From 3b83b625c36ee27313dce66fc3d7c53f427f7ec7 Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Mon, 25 Nov 2024 20:24:39 +0530
Subject: [PATCH 25/49] update Investment Details KYC

---
 src/Pages/IO_Management/ViewIO/ViewIOdata.jsx         | 2 +-
 src/Pages/Investor_Management/InvestorDetails/Kyc.jsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
index 26046c6..0360eee 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
@@ -193,7 +193,7 @@ const ViewIOdata = () => {
                 cursor={"pointer"}
               />
             </Box> */}
-            <Stack position={"absolute"} right={2} bottom={1} direction="row" spacing={4}>
+            <Stack position={"absolute"} right={1} bottom={1} direction="row" spacing={4}>
               <Button
                 isLoading={isRefetchLoading}
                 loadingText="Refresh"
diff --git a/src/Pages/Investor_Management/InvestorDetails/Kyc.jsx b/src/Pages/Investor_Management/InvestorDetails/Kyc.jsx
index 844f470..6884845 100644
--- a/src/Pages/Investor_Management/InvestorDetails/Kyc.jsx
+++ b/src/Pages/Investor_Management/InvestorDetails/Kyc.jsx
@@ -49,7 +49,7 @@ const Kyc = () => {
           <HStack spacing={4} mb={4}>
             <FormControl>
               <FormLabel mb={1} fontSize={"sm"}>
-                House/Unit
+                Address line 1
               </FormLabel>
               <Input
                 bg={"#ccc3"}
@@ -62,7 +62,7 @@ const Kyc = () => {
             </FormControl>
             <FormControl>
               <FormLabel mb={1} fontSize={"sm"}>
-                Road/Street
+                Address line 2
               </FormLabel>
               <Input
                 bg={"#ccc3"}
-- 
2.34.1


From 537304f0fbb7988b17ffb6e05cdb58daebd48f21 Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Mon, 2 Dec 2024 12:23:27 +0530
Subject: [PATCH 26/49] update bug

---
 src/Components/Loaders/Loader01.jsx           | 22 +++++----
 src/Layout/DefaultLayout.jsx                  |  4 +-
 src/Pages/AccountDeletion/InvestorComment.jsx |  2 +-
 .../DepositRequest/DepositRequestApprove.jsx  | 12 +++--
 .../DepositRequest/DepositRequestReject.jsx   | 12 ++++-
 src/Pages/Fawateer/CreateRequest.jsx          | 10 +++-
 .../IO_Management/CreateIO/IOArtifacts.jsx    |  6 +--
 .../CreateIO/IOArtifactsVideo.jsx             | 12 +++--
 .../CreateIO/IOCashDetails/AddCaseDetails.jsx | 15 ++++--
 .../CreateIO/IOCashDetails/Approved.jsx       |  8 ++--
 .../CreateIO/IOCashDetails/IOCashDetails.jsx  |  4 +-
 .../CreateIO/IOCashDetails/Pending.jsx        |  8 ++--
 .../CreateIO/IOCashDetails/Rejected.jsx       |  8 ++--
 .../CreateIO/IONAVDetails/AddNavDetails.jsx   | 12 +++--
 .../CreateIO/InvestmentDocument.jsx           |  2 +-
 .../IO_Management/CreateIO/Investors.jsx      | 10 ++--
 .../IO_Management/CreateIO/KeyMerits.jsx      |  2 +-
 .../IO_Management/EditIO/InvestmentEdit.jsx   |  2 +-
 src/Pages/IO_Management/IOArtifactsAdd.jsx    | 14 ++++--
 .../IO_Management/InvestmentDocuments.jsx     | 15 ++++--
 src/Pages/IO_Management/KeyMeritsAdd.jsx      |  2 +-
 src/Pages/IO_Management/KeyMeritsEdit.jsx     |  2 +-
 .../InvestmentType/AddInvestmentType.jsx      | 12 ++---
 .../Master/InvestmentType/InvestmentType.jsx  | 39 +++++++++++++--
 src/Pages/Master/Sponser/Sponsers.jsx         |  6 +--
 src/Pages/SplashScreen.jsx                    | 48 +++++++++----------
 .../DrawalRequest/DrawalRequestReject.jsx     |  2 +-
 27 files changed, 191 insertions(+), 100 deletions(-)

diff --git a/src/Components/Loaders/Loader01.jsx b/src/Components/Loaders/Loader01.jsx
index d730e32..24b8f96 100644
--- a/src/Components/Loaders/Loader01.jsx
+++ b/src/Components/Loaders/Loader01.jsx
@@ -1,19 +1,21 @@
 import React from "react";
 import './FullscreenLoaders.css'
+import { Spinner } from "@chakra-ui/react";
 
 const Loader01 = () => {
   return (
 
-    <div className="dot-spinner">
-      <div className="dot-spinner__dot"></div>
-      <div className="dot-spinner__dot"></div>
-      <div className="dot-spinner__dot"></div>
-      <div className="dot-spinner__dot"></div>
-      <div className="dot-spinner__dot"></div>
-      <div className="dot-spinner__dot"></div>
-      <div className="dot-spinner__dot"></div>
-      <div className="dot-spinner__dot"></div>
-    </div>
+    // <div className="dot-spinner">
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    // </div>
+    <Spinner color='green.900' />
   );
 };
 
diff --git a/src/Layout/DefaultLayout.jsx b/src/Layout/DefaultLayout.jsx
index 27a771b..7afc70a 100644
--- a/src/Layout/DefaultLayout.jsx
+++ b/src/Layout/DefaultLayout.jsx
@@ -231,14 +231,14 @@ const DashboardLayout = ({ isOnline }) => {
         return (
           <span className="d-flex align-items-end gap-2">
             <RiMoneyDollarBoxLine className="h4 m-0 fw-normal" />
-            Deposit pending request
+            Deposit Pending Request
           </span>
         );
       case path.startsWith("/deposit-history"):
         return (
           <span className="d-flex align-items-end gap-2">
             <RiExchangeBoxLine className="h4 m-0 fw-normal" />
-            Deposite request
+            Deposite Request
           </span>
         );
         
diff --git a/src/Pages/AccountDeletion/InvestorComment.jsx b/src/Pages/AccountDeletion/InvestorComment.jsx
index 35c33ea..bf22ba4 100644
--- a/src/Pages/AccountDeletion/InvestorComment.jsx
+++ b/src/Pages/AccountDeletion/InvestorComment.jsx
@@ -49,7 +49,7 @@ const InvestorComment = ({ isOpen, onClose }) => {
                   fontSize="sm"
                   type="textarea"
                   size="md"
-                  placeholder={"Enter your comments...."}
+                  placeholder={"Enter your comment...."}
                   rounded={"md"}
                   resize={"none"}
                 />
diff --git a/src/Pages/Deposit/DepositRequest/DepositRequestApprove.jsx b/src/Pages/Deposit/DepositRequest/DepositRequestApprove.jsx
index b6e26a2..7090541 100644
--- a/src/Pages/Deposit/DepositRequest/DepositRequestApprove.jsx
+++ b/src/Pages/Deposit/DepositRequest/DepositRequestApprove.jsx
@@ -4,6 +4,7 @@ import {
   Button,
   FormControl,
   FormErrorMessage,
+  FormHelperText,
   FormLabel,
   Input,
   Modal,
@@ -35,7 +36,7 @@ const FILE_TYPES = ["image/jpeg", "image/png", "image/gif"];
 
 export const conformModalSchema = yup.object().shape({
   investorAmount: yup.string().required("Investor amount is required"),
-  comment: yup.string().notRequired(),
+  comment: yup.string().notRequired() .max(200, "Approve Comment cannot be more than 200 characters"),
   supporting_FileName: yup.mixed().required("File is required"),
   // .test("fileType", "Unsupported File Format", (value) => {
   //   return value && FILE_TYPES.includes(value.type);
@@ -192,7 +193,7 @@ const DepositRequestApprove = ({
                 )}
               </FormControl>
               <FormControl mb={4}>
-                <FormLabel fontSize="sm">Comments</FormLabel>
+                <FormLabel fontSize="sm">Comment</FormLabel>
                 <Textarea
                   rows={5}
                   focusBorderColor="green.400"
@@ -201,14 +202,19 @@ const DepositRequestApprove = ({
                   fontSize="sm"
                   type="textarea"
                   size="sm"
-                  placeholder={"Enter your comments...."}
+                  placeholder={"Enter your comment...."}
                   resize={"none"}
+                  maxLength={200} 
                 />
                 {errors.comment && (
                   <Text fontSize="xs" color="red">
                     {errors.comment.message}
                   </Text>
                 )}
+                <FormHelperText fontSize="xs" color="gray.500">
+                    <Box as="span" me={1}>Maximum length should be 200 characters. You have entered </Box>
+                    {watch("comment")?.length || 0} characters.
+                  </FormHelperText>
               </FormControl>
             </ModalBody>
             <ModalFooter>
diff --git a/src/Pages/Deposit/DepositRequest/DepositRequestReject.jsx b/src/Pages/Deposit/DepositRequest/DepositRequestReject.jsx
index c5e01f2..8a8ea29 100644
--- a/src/Pages/Deposit/DepositRequest/DepositRequestReject.jsx
+++ b/src/Pages/Deposit/DepositRequest/DepositRequestReject.jsx
@@ -2,6 +2,7 @@ import {
   Box,
   Button,
   FormControl,
+  FormHelperText,
   FormLabel,
   Input,
   Modal,
@@ -24,7 +25,8 @@ import { useDepositRejectMutation } from "../../../Services/deposit.request.serv
 import ToastBox from "../../../Components/ToastBox";
 
 export const conformModalSchema = yup.object().shape({
-  comments: yup.string().required("Comment is required"),
+  comments: yup.string().required("Comment is required") 
+  .max(200, "Approve Comment cannot be more than 200 characters"),
 });
 
 const DepositRequestReject = ({ isOpen, onClose, firstField ,id}) => {
@@ -35,6 +37,7 @@ const DepositRequestReject = ({ isOpen, onClose, firstField ,id}) => {
   const {
     register,
     reset,
+    watch,
     handleSubmit,
     formState: { errors },
   } = useForm({
@@ -121,15 +124,20 @@ const DepositRequestReject = ({ isOpen, onClose, firstField ,id}) => {
                 fontSize="sm"
                 type="textarea"
                 size="md"
-                placeholder={"Enter your comments...."}
+                placeholder={"Enter your comment...."}
                 rounded={"md"}
                 resize={"none"}
+                maxLength={200} 
               />
               {errors.comments && (
                 <Text fontSize="xs" color="red">
                   {errors.comments.message}
                 </Text>
               )}
+              <FormHelperText fontSize="xs" color="gray.500">
+                <Box as="span" me={1}>Maximum length should be 200 characters. You have entered </Box>
+                {watch("comments")?.length || 0} characters.
+              </FormHelperText>
             </FormControl>
           </ModalBody>
           <ModalFooter>
diff --git a/src/Pages/Fawateer/CreateRequest.jsx b/src/Pages/Fawateer/CreateRequest.jsx
index 0529ef9..07ce60c 100644
--- a/src/Pages/Fawateer/CreateRequest.jsx
+++ b/src/Pages/Fawateer/CreateRequest.jsx
@@ -45,7 +45,7 @@ const validationSchema = Yup.object().shape({
     .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(),
+  makerComment: Yup.string()  .max(200, "Approve Comment cannot be more than 50 characters"),
 });
 
 const CreateRequest = () => {
@@ -62,6 +62,7 @@ const CreateRequest = () => {
   const {
     control,
     register,
+    watch,
     handleSubmit,
     setValue,
     reset,
@@ -393,6 +394,7 @@ const CreateRequest = () => {
             rounded={"sm"}
             placeholder={"Description"}
             {...register("makerComment")}
+            maxLength={200}
           />
           <FormHelperText
             fontSize={"xs"}
@@ -401,6 +403,12 @@ const CreateRequest = () => {
           >
             {errors.makerComment?.message}
           </FormHelperText>
+          <FormHelperText fontSize="xs" color="gray.500">
+            <Box as="span" me={1}>
+              Maximum length should be 200 characters. You have entered
+            </Box>
+            {watch("makerComment")?.length || 0} characters.
+          </FormHelperText>
         </FormControl>
 
         {/* Submit Button */}
diff --git a/src/Pages/IO_Management/CreateIO/IOArtifacts.jsx b/src/Pages/IO_Management/CreateIO/IOArtifacts.jsx
index 870c4b2..a9777d2 100644
--- a/src/Pages/IO_Management/CreateIO/IOArtifacts.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOArtifacts.jsx
@@ -116,7 +116,7 @@ const IOArtifacts = ({ enableNextTab, index, data }) => {
         setDeleteAlertVideo(false);
         setIsLoadingBtn(false);
         toast({
-          render: () => <ToastBox message={res?.data?.message} status="error" />,
+          render: () => <ToastBox message={res?.data?.message} status="success" />,
         });
       }
     } catch (error) {
@@ -134,7 +134,7 @@ const IOArtifacts = ({ enableNextTab, index, data }) => {
         setDeleteAlertImage(false);
         setIsLoadingBtn(false);
         toast({
-          render: () => <ToastBox message={res?.data?.message} status="error" />,
+          render: () => <ToastBox message={res?.data?.message} status="success" />,
         });
 
       }
@@ -372,7 +372,7 @@ const sortedDataVideo = [...(IObyID?.data?.artifactsVideo || [])]?.sort(
           Manage IO Images
         </Box>
         <HStack>
-
+ 
 
           {IObyID?.data?.artifactsImage?.length !== 0 &&<SetDisplayOrderIOArtifactsImages data={sortedDataImage} />}
           <Button
diff --git a/src/Pages/IO_Management/CreateIO/IOArtifactsVideo.jsx b/src/Pages/IO_Management/CreateIO/IOArtifactsVideo.jsx
index c9b71a7..0e68193 100644
--- a/src/Pages/IO_Management/CreateIO/IOArtifactsVideo.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOArtifactsVideo.jsx
@@ -10,6 +10,7 @@ import {
   DrawerOverlay,
   FormControl,
   FormErrorMessage,
+  FormHelperText,
   FormLabel,
   Input,
   Stack,
@@ -26,7 +27,8 @@ import { useParams } from "react-router-dom";
 import ToastBox from "../../../Components/ToastBox";
 
 const investmentVideoSchema = yup.object().shape({
-  artifactName: yup.string().required("Artifact name is required"),
+  artifactName: yup.string().required("Artifact name is required")
+  .max(50, "Approve Comment cannot be more than 50 characters"),
   artifactStreamingURL: yup.string()
     .required("Artifact streaming URL is required")
     .url("Invalid URL format"),
@@ -158,12 +160,16 @@ const IOArtifactsAdd = ({ isOpen, onClose, firstField, actionId, setActionId, da
                   name="artifactName"
                   control={control}
                   render={({ field }) => (
-                    <Input {...field} fontSize={"sm"} type="text" size={"sm"} />
+                    <Input {...field} fontSize={"sm"} type="text" size={"sm"} maxLength={50}  />
                   )}
                 />
                 <FormErrorMessage fontSize={"xs"} fontWeight={500}>
                   {errors.artifactName?.message}
                 </FormErrorMessage>
+                <FormHelperText fontSize="xs" color="gray.500">
+                    <Box as="span" me={1}>Maximum length should be 50 characters. You have entered </Box>
+                    {watch("artifactName")?.length || 0} characters.
+                  </FormHelperText>
               </FormControl>
 
               <FormControl isInvalid={errors.artifactStreamingURL} isRequired>
@@ -211,7 +217,7 @@ const IOArtifactsAdd = ({ isOpen, onClose, firstField, actionId, setActionId, da
         isOpen={alert}
         onClose={() => setAlert(false)}
         alertHandler={handleSave}
-        message={"Are you sure you want to add this artifact?"}
+        message={"Are you sure you want to update this artifact?"}
         isLoading={isLoading}
       />
     </>
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/AddCaseDetails.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/AddCaseDetails.jsx
index 82983d2..fc10f40 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/AddCaseDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/AddCaseDetails.jsx
@@ -10,6 +10,7 @@ import {
   DrawerOverlay,
   FormControl,
   FormErrorMessage,
+  FormHelperText,
   FormLabel,
   Input,
   Select,
@@ -33,7 +34,8 @@ const cashDetails = yup.object().shape({
   transactionDate: yup.string().required("Date is required"),
   ioTransType_xid: yup.number().required("Cash transaction is required"),
   transactionAmount: yup.number().required("Transaction Amount is required"),
-  comments: yup.string().notRequired(),
+  comments: yup.string().notRequired()
+  .max(200, "Approve Comment cannot be more than 200 characters"),
 });
 
 const AddCaseDetails = ({ isOpen, onClose, firstField, actionId, setActionId, data, setActiveTab }) => {
@@ -199,18 +201,23 @@ const AddCaseDetails = ({ isOpen, onClose, firstField, actionId, setActionId, da
 
 
               <FormControl isInvalid={errors.comments}>
-                <FormLabel fontSize={"sm"}>Comments</FormLabel>
+                <FormLabel fontSize={"sm"}>Comment</FormLabel>
                 <Controller
                   name="comments"
-                  control={control}
+                  control={control} 
                   render={({ field }) => (
-                    <Textarea {...field} textAlign={'left'} 
+                    <Textarea {...field} textAlign={'left'}  
+                    maxLength={200} 
                     focusBorderColor="forestGreen.300" fontSize={"sm"} type="text" size={"sm"} />
                   )}
                 />
                 <FormErrorMessage fontSize={"xs"} fontWeight={500}>
                   {errors.comments?.message}
                 </FormErrorMessage>
+                <FormHelperText fontSize="xs" color="gray.500">
+                    <Box as="span" me={1}>Maximum length should be 200 characters. You have entered </Box>
+                    {watch("comments")?.length || 0} characters.
+                  </FormHelperText>
               </FormControl>
 
             </Stack>
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx
index 749498b..4780be9 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx
@@ -82,11 +82,11 @@ const Approved = () => {
 
   const tableHeadRow = [
     "Sr No.",
-    "Transaction date",
+    "Transaction Date",
     "Transaction Type",
     "Amount",
     "Comments",
-    "Update by",
+    "Update By",
     "Update On",
   ];
 
@@ -97,7 +97,7 @@ const Approved = () => {
         {index + 1}.
       </Text>
     ),
-    "Transaction date": (
+    "Transaction Date": (
       <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
         {formatDate(item?.transactionDate)}
       </Text>
@@ -123,7 +123,7 @@ const Approved = () => {
         {item?.comments ? item?.comments : "---"}
       </Text>
     ),
-    "Update by": (
+    "Update By": (
       <Text
         w={"100px"}
         as={"span"}
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx
index f7fb367..a66e6af 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx
@@ -84,10 +84,10 @@ const IOCashDetails = () => {
                 borderBottom: "2px solid #38a169",
               }}
             >
-              Pending{" "}
+              Pending
               {IODetails?.ioCashStatusHistory?.Pending.length > 0 && (
                 <Badge rounded={"sm"} colorScheme="forestGreen" ms={2}>
-                  {IODetails?.ioCashStatusHistory?.Pending.length || 0}
+                  {IODetails?.ioCashStatusHistory?.Pending.length !== 0 && IODetails?.ioCashStatusHistory?.Pending.length}
                 </Badge>
               )}
               {/* <Badge rounded={"sm"} colorScheme="forestGreen" ms={2}>
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
index fa7e9db..b025968 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
@@ -98,11 +98,11 @@ const Pending = () => {
 
   const tableHeadRow = [
     "Sr No.",
-    "Transaction date",
+    "Transaction Date",
     "Transaction Type",
     "Amount",
     "Comments",
-    "Update by",
+    "Update By",
     "Update On",
     ...(localStorage?.getItem('role')!=="Maker" ? ["Actions"] : []),
     
@@ -115,7 +115,7 @@ const Pending = () => {
         {index + 1}.
       </Text>
     ),
-    "Transaction date": (
+    "Transaction Date": (
       <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
         {formatDate(item?.transactionDate)}
       </Text>
@@ -141,7 +141,7 @@ const Pending = () => {
         {item?.comments}
       </Text>
     ),
-    "Update by": (
+    "Update By": (
       <Text
         w={"100px"}
         as={"span"}
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
index 470fdc8..38598ec 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
@@ -77,11 +77,11 @@ import AddCaseDetails from "./AddCaseDetails";
   
     const tableHeadRow = [
       "Sr No.",
-      "Transaction date",
+      "Transaction Date",
       "Transaction Type",
       "Amount",
       "Comments",
-      "Update by",
+      "Update By",
       "Update On",
     ];
   
@@ -96,7 +96,7 @@ import AddCaseDetails from "./AddCaseDetails";
           {index + 1}.
         </Text>
       ),
-      "Transaction date": (
+      "Transaction Date": (
         <Text
           as={"span"}
           color={"gray.600"}
@@ -135,7 +135,7 @@ import AddCaseDetails from "./AddCaseDetails";
           {item?.comments}
         </Text>
       ),
-      "Update by": (
+      "Update By": (
         <Text
           w={"100px"}
           as={"span"}
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/AddNavDetails.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/AddNavDetails.jsx
index 0427829..4d575fb 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/AddNavDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/AddNavDetails.jsx
@@ -10,6 +10,7 @@ import {
   DrawerOverlay,
   FormControl,
   FormErrorMessage,
+  FormHelperText,
   FormLabel,
   HStack,
   Input,
@@ -36,7 +37,8 @@ import { formatDatee } from "../../../../Components/FormField";
 const ioNav = yup.object().shape({
   transactionDate: yup.string().required("Date is required"),
   transactionAmount: yup.number().required("New NAV is required"),
-  comments: yup.string().notRequired(),
+  comments: yup.string().notRequired()
+  .max(200, "Approve Comment cannot be more than 200 characters"),
 });
 
 const AddNavDetails = ({ isOpen, onClose, firstField, actionId, setActionId, data }) => {
@@ -204,17 +206,21 @@ console.log(calculatePercentage(1092500, 976070));
 
 
               <FormControl isInvalid={errors.comments}>
-                <FormLabel fontSize={"sm"}>Comments</FormLabel>
+                <FormLabel fontSize={"sm"}>Comment</FormLabel>
                 <Controller
                   name="comments"
                   control={control}
                   render={({ field }) => (
-                    <Textarea {...field}  fontSize={"sm"} type="text" size={"sm"} />
+                    <Textarea {...field} maxLength={200}   fontSize={"sm"} type="text" size={"sm"} />
                   )}
                 />
                 <FormErrorMessage fontSize={"xs"} fontWeight={500}>
                   {errors.comments?.message}
                 </FormErrorMessage>
+                <FormHelperText fontSize="xs" color="gray.500">
+                    <Box as="span" me={1}>Maximum length should be 200 characters. You have entered </Box>
+                    {watch("comments")?.length || 0} characters.
+                  </FormHelperText>
               </FormControl>
 
             </Stack>
diff --git a/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx b/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx
index fe617b0..bfade61 100644
--- a/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx
+++ b/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx
@@ -363,7 +363,7 @@ const InvestmentDocument = ({ control, errors, enableNextTab, index, }) => {
       <CustomAlertDialog
         onClose={() => setDeleteAlert(false)}
         isOpen={deleteAlert}
-        message="Are you sure you want to delete the sponsor?"
+        message="Are you sure you want to delete the Investment?"
         alertHandler={handleDelete}
         isLoading={isLoading}
       />
diff --git a/src/Pages/IO_Management/CreateIO/Investors.jsx b/src/Pages/IO_Management/CreateIO/Investors.jsx
index 35a6eff..3d37013 100644
--- a/src/Pages/IO_Management/CreateIO/Investors.jsx
+++ b/src/Pages/IO_Management/CreateIO/Investors.jsx
@@ -103,16 +103,16 @@ const Investors = ({ data }) => {
   // Table setup 
   const tableHeadRow = [
     "Client ID",
-    "First name",
-    "Last name",
-    "Investment amount",
+    "First Name",
+    "Last Name",
+    "Investment Amount",
     "Percentage",
     "Market Value",
     "Return on Investment",
     "Distribution",
     "Distribution Percent",
     "Total Return",
-    "Total return on Investment",
+    "Total Return on Investment",
   ];
 
   const handleUpdateStatus = debounce((id) => {
@@ -164,7 +164,7 @@ const Investors = ({ data }) => {
     "Distribution": parseFloat(item?.Distribution_Amt) || 0, // Convert to float
     "Distribution Percent": parseFloat(item?.Distribution_Per) || 0, // Convert to float
     "Total Return": parseFloat(item?.Total_Return) || 0, // Convert to float
-    "Total return on Investment": parseFloat(item?.Total_Return_On_Investment) || 0, // Convert to float
+    "Total Return on Investment": parseFloat(item?.Total_Return_On_Investment) || 0, // Convert to float
   }));
 
   console.log(exportInvestorDetails);
diff --git a/src/Pages/IO_Management/CreateIO/KeyMerits.jsx b/src/Pages/IO_Management/CreateIO/KeyMerits.jsx
index 6d2eee0..e4bd99b 100644
--- a/src/Pages/IO_Management/CreateIO/KeyMerits.jsx
+++ b/src/Pages/IO_Management/CreateIO/KeyMerits.jsx
@@ -89,7 +89,7 @@ const KeyMerits = ({ enableNextTab, index, data: prepopData }) => {
       const res = await deleteKeyMerits(actionId);
       if (res?.data?.statusCode === 200) {
         toast({
-          render: () => <ToastBox message={res?.data?.message} />,
+          render: () => <ToastBox message={res?.data?.message} status={"success"}  />,
         });
         setIsBtnLoading(false);
         setDeleteAlert(false);
diff --git a/src/Pages/IO_Management/EditIO/InvestmentEdit.jsx b/src/Pages/IO_Management/EditIO/InvestmentEdit.jsx
index 0c71ac1..76c7299 100644
--- a/src/Pages/IO_Management/EditIO/InvestmentEdit.jsx
+++ b/src/Pages/IO_Management/EditIO/InvestmentEdit.jsx
@@ -297,7 +297,7 @@ const InvestmentEdit = ({ isOpen, onClose, thirdField, id, data }) => {
         onClose={() => setAlert(false)}
         alertHandler={handleConfirm}
         isLoading={isLoading}
-        message="Are you sure you want to add this document?"
+        message="Are you sure you want to add this Investment?"
       />
     </Drawer>
   );
diff --git a/src/Pages/IO_Management/IOArtifactsAdd.jsx b/src/Pages/IO_Management/IOArtifactsAdd.jsx
index f80f838..2e3ea3f 100644
--- a/src/Pages/IO_Management/IOArtifactsAdd.jsx
+++ b/src/Pages/IO_Management/IOArtifactsAdd.jsx
@@ -10,6 +10,7 @@ import {
   DrawerOverlay,
   FormControl,
   FormErrorMessage,
+  FormHelperText,
   FormLabel,
   Icon,
   Image,
@@ -35,7 +36,7 @@ import { IoMdRemoveCircleOutline } from "react-icons/io";
 
 const investmentImageSchema = yup.object().shape({
   artifactName: yup.string().required("Artifact image name is required")
-  .max(25, "File name must be at most 25 characters"),
+  .max(50, "Approve Comment cannot be more than 50 characters"),
   artifactPathName: yup.mixed().required("Artifact image is required"),
 });
 
@@ -226,19 +227,24 @@ const IOArtifactsAdd = ({
                   <Controller
                     name="artifactName"
                     control={control}
+                    //  maxLength={50} 
                     render={({ field }) => (
                       <Input
                         {...field}
                         fontSize={"sm"}
                         type="text"
                         size={"sm"}
-                        maxLength={25} 
+                        maxLength={50} 
                       />
                     )}
-                  />
+                  /> 
                   <FormErrorMessage fontSize={"xs"} fontWeight={500}>
                     {errors.artifactName?.message}
                   </FormErrorMessage>
+                  <FormHelperText fontSize="xs" color="gray.500">
+                    <Box as="span" me={1}>Maximum length should be 50 characters. You have entered </Box>
+                    {watch("artifactName")?.length || 0} characters.
+                  </FormHelperText>
                 </FormControl>
 
                 <FormControl
@@ -354,7 +360,7 @@ const IOArtifactsAdd = ({
         isOpen={alert}
         onClose={handleAlertClose}
         alertHandler={handleSave}
-        message={"Are you sure you want to add this artifact?"}
+        message={"Are you sure you want to update this artifact?"}
         isLoading={loading}
       />
     </>
diff --git a/src/Pages/IO_Management/InvestmentDocuments.jsx b/src/Pages/IO_Management/InvestmentDocuments.jsx
index 848c0cb..f89958f 100644
--- a/src/Pages/IO_Management/InvestmentDocuments.jsx
+++ b/src/Pages/IO_Management/InvestmentDocuments.jsx
@@ -60,7 +60,7 @@ export const investmentDocSchema = yup.object().shape({
   //   return value && value.size <= 2 * 1024 * 1024; // 2MB in bytes
   // })
   fileName: yup.string().required("File name is required")
-  .max(25, "File name must be at most 25 characters"), // Maximum length validation,
+  .max(30, "File name must be at most 30 characters"), // Maximum length validation,
   documentNameArabic: yup.string().required("File name Arabic is required")
   .max(25, "File name must be at most 30 characters"), 
 });
@@ -91,6 +91,7 @@ const InvestmentDocuments = ({
   const {
     register,
     handleSubmit,
+    watch,
     reset,
     formState: { errors },
   } = useForm({
@@ -210,13 +211,17 @@ const InvestmentDocuments = ({
                   fontSize="sm"
                   type="text"
                   size="sm"
-                  maxLength={25} // Maximum length constraint in the input field
+                  maxLength={30} // Maximum length constraint in the input field
                 />
                 {errors.fileName && (
                   <Text mt={1} fontSize="xs" fontWeight={500} color="red">
                     {errors.fileName.message}
                   </Text>
                 )}
+                <FormHelperText fontSize="xs" color="gray.500">
+                    <Box as="span" me={1}>Maximum length should be 30 characters. You have entered </Box>
+                    {watch("fileName")?.length || 0} characters.
+                </FormHelperText>
               </FormControl>
 
 
@@ -229,13 +234,17 @@ const InvestmentDocuments = ({
                   type="text"
                   size="sm"
                   textAlign={'right'}
-                  maxLength={30} // Maximum length constraint in the input field
+                  maxLength={35} // Maximum length constraint in the input field
                 />
                 {errors.documentNameArabic && (
                   <Text mt={1} fontSize="xs" fontWeight={500} color="red">
                     {errors.documentNameArabic.message}
                   </Text>
                 )}
+                <FormHelperText fontSize="xs" color="gray.500">
+                    <Box as="span" me={1}>Maximum length should be 35 characters. You have entered </Box>
+                    {watch("documentNameArabic")?.length || 0} characters.
+                </FormHelperText>
               </FormControl>
 
 
diff --git a/src/Pages/IO_Management/KeyMeritsAdd.jsx b/src/Pages/IO_Management/KeyMeritsAdd.jsx
index f7582c0..950acb1 100644
--- a/src/Pages/IO_Management/KeyMeritsAdd.jsx
+++ b/src/Pages/IO_Management/KeyMeritsAdd.jsx
@@ -360,7 +360,7 @@ const KeyMeritsAdd = ({ isOpen, onClose, firstField, id, icons }) => {
         onClose={handleClose}
         // alertHandler={handleSave}
         alertHandler={handleConfirm}
-        message={"Are you sure you want to add this key merit?"}
+        message={"Are you sure you want to add this key merits?"}
         isLoading={isLoading}
       />
     </>
diff --git a/src/Pages/IO_Management/KeyMeritsEdit.jsx b/src/Pages/IO_Management/KeyMeritsEdit.jsx
index e6dbe80..8f0b888 100644
--- a/src/Pages/IO_Management/KeyMeritsEdit.jsx
+++ b/src/Pages/IO_Management/KeyMeritsEdit.jsx
@@ -367,7 +367,7 @@ const KeyMeritsEdit = ({
         isOpen={alert}
         onClose={() => setAlert(false)}
         alertHandler={handleSave}
-        message={"Are you sure you want to add this key merit?"}
+        message={"Are you sure you want to update this key merits?"}
         isLoading={isLoading}
       />
     </>
diff --git a/src/Pages/Master/InvestmentType/AddInvestmentType.jsx b/src/Pages/Master/InvestmentType/AddInvestmentType.jsx
index d37fc31..a7fdfc0 100644
--- a/src/Pages/Master/InvestmentType/AddInvestmentType.jsx
+++ b/src/Pages/Master/InvestmentType/AddInvestmentType.jsx
@@ -24,7 +24,7 @@ export const addInvestmentType = yup.object().shape({
     .string()
     .required("Investment type is required")
     .max(50, "Investment name cannot be more than 50 characters"),
-  note: yup.string().optional().max(255, "Note cannot exceed 255 characters"),
+  // note: yup.string().optional().max(255, "Note cannot exceed 255 characters"),
   investmentTypeNameArabic: yup
     .string()
     .required("Investment type in required"),
@@ -199,7 +199,7 @@ const AddInvestmentType = () => {
       placeHolder: " ",
       name: "note",
       type: "textarea",
-      // isRequired: true,
+      isRequired: false,
       section: "",
       maxLength: 255,
       helperText: `Maximum length should be 255 characters. You have entered ${
@@ -211,7 +211,7 @@ const AddInvestmentType = () => {
       placeHolder: " ",
       name: "noteArabic",
       type: "textarea",
-      // isRequired: true,
+      isRequired: false,
       arabic: true,
       section: "",
       maxLength: 255,
@@ -254,7 +254,7 @@ const AddInvestmentType = () => {
       placeHolder: " ",
       name: "note",
       type: "textarea",
-      // isRequired: true,
+      isRequired: false,
       section: "",
       maxLength: 255,
       helperText: `Maximum length should be 255 characters. You have entered ${
@@ -266,7 +266,7 @@ const AddInvestmentType = () => {
       placeHolder: " ",
       name: "noteArabic",
       type: "textarea",
-      // isRequired: true,
+      isRequired: false,
       arabic: true,
       section: "",
       maxLength: 255,
@@ -338,7 +338,7 @@ const AddInvestmentType = () => {
         isOpen={alert}
         onClose={() => setAlert(false)}
         alertHandler={handleConfirm}
-        message={id ? "Are you sure you want to update this document?" : " Are you sure you want to add this document?"}
+        message={id ? "Are you sure you want to update this Investment Type?" : " Are you sure you want to add this Investment Type?"}
         isLoading={isLoadingBtn}
       />
     </Box>
diff --git a/src/Pages/Master/InvestmentType/InvestmentType.jsx b/src/Pages/Master/InvestmentType/InvestmentType.jsx
index 9916ea0..8c92882 100644
--- a/src/Pages/Master/InvestmentType/InvestmentType.jsx
+++ b/src/Pages/Master/InvestmentType/InvestmentType.jsx
@@ -232,16 +232,49 @@ const InvestmentType = () => {
 
   // ==================== [Delete Function] =======================
 
+  // const handleDelete = async () => {
+  //   console.log(actionId);
+  //   setIsLoading(true);
+  //   try {
+  //     const response = await deleteInvestmentType(actionId);
+  //     console.log(response);
+  //     setIsLoading(false);
+  //     setDeleteAlert(false);
+  //   } catch (error) {}
+  // };
+
   const handleDelete = async () => {
     console.log(actionId);
     setIsLoading(true);
     try {
       const response = await deleteInvestmentType(actionId);
-      console.log(response);
+      console.log(response?.data);
+  
+      if (response?.error?.data?.code === 400) {
+        toast({
+          render: () => (
+            <ToastBox message={response?.error?.data?.message} status="error" />
+          ),
+        });
+      } else if (
+        response?.data?.statusCode === 201 ||
+        response?.data?.statusCode === 200
+      ) {
+        toast({
+          render: () => (
+            <ToastBox message={response?.data?.message} status="success" />
+          ),
+        });
+      }
       setIsLoading(false);
       setDeleteAlert(false);
-    } catch (error) {}
+    } catch (error) {
+      console.error(error);
+      setIsLoading(false);
+    }
   };
+  
+
 
   return (
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
@@ -315,7 +348,7 @@ const InvestmentType = () => {
       <CustomAlertDialog
         onClose={() => setDeleteAlert(false)}
         isOpen={deleteAlert}
-        message={"Are you sure you want to delete sponers?"}
+        message={"Are you sure you want to delete Investment Type?"}
         alertHandler={handleDelete}
         isLoading={isLoading}
       />
diff --git a/src/Pages/Master/Sponser/Sponsers.jsx b/src/Pages/Master/Sponser/Sponsers.jsx
index 2af1bc0..d179d77 100644
--- a/src/Pages/Master/Sponser/Sponsers.jsx
+++ b/src/Pages/Master/Sponser/Sponsers.jsx
@@ -187,13 +187,13 @@ const Sponser = () => {
       console.log(response?.data);
       if(response?.error?.data?.code === 400){
         toast({
-          render: () => <ToastBox message={response?.error?.data?.message} status={'warn'} />,
+          render: () => <ToastBox message={response?.error?.data?.message} status={'error'} />,
         });
         setIsLoading(false);
         setDeleteAlert(false);
       } else if(response?.data?.statusCode === 201 || response?.data?.statusCode === 200){
         toast({
-          render: () => <ToastBox message={response?.data?.message} status={'error'} />,
+          render: () => <ToastBox message={response?.data?.message} status={'success'} />,
         });
         setIsLoading(false);
         setDeleteAlert(false);
@@ -201,7 +201,7 @@ const Sponser = () => {
       }
     } catch (error) {}
   };
-
+ 
   console.log(isSponserLoading);
 
   
diff --git a/src/Pages/SplashScreen.jsx b/src/Pages/SplashScreen.jsx
index a975efa..9e2b656 100644
--- a/src/Pages/SplashScreen.jsx
+++ b/src/Pages/SplashScreen.jsx
@@ -1,31 +1,31 @@
-import { Box, Image, Spinner, Text } from '@chakra-ui/react'
-import React from 'react'
-import logo from '../assets/logo2.png'
+import { Box, Image, Spinner, Text } from "@chakra-ui/react";
+import React from "react";
+import logo from "../assets/logo2.png";
 
 const SplashScreen = () => {
   return (
     <Box
-    h={'100vh'}
-    display={'flex'}
-    justifyContent={'center'}
-    alignItems={'center'}
-    flexDirection={'column'}
-    gap={10}
+      h={"100vh"}
+      display={"flex"}
+      justifyContent={"center"}
+      alignItems={"center"}
+      flexDirection={"column"}
+      gap={10}
     >
-        <Image src={logo} />
-        {/* <Spinner color='green.900' size='md' /> */}
-        <div className="dot-spinner">
-    <div className="dot-spinner__dot"></div>
-    <div className="dot-spinner__dot"></div>
-    <div className="dot-spinner__dot"></div>
-    <div className="dot-spinner__dot"></div>
-    <div className="dot-spinner__dot"></div>
-    <div className="dot-spinner__dot"></div>
-    <div className="dot-spinner__dot"></div>
-    <div className="dot-spinner__dot"></div>
-</div>
+      <Image src={logo} />
+      <Spinner color='green.900' size='md' />
+      {/* <div className="dot-spinner">
+        <div className="dot-spinner__dot"></div>
+        <div className="dot-spinner__dot"></div>
+        <div className="dot-spinner__dot"></div>
+        <div className="dot-spinner__dot"></div>
+        <div className="dot-spinner__dot"></div>
+        <div className="dot-spinner__dot"></div>
+        <div className="dot-spinner__dot"></div>
+        <div className="dot-spinner__dot"></div>
+      </div> */}
     </Box>
-  )
-}
+  );
+};
 
-export default SplashScreen
\ No newline at end of file
+export default SplashScreen;
diff --git a/src/Pages/WithDrawal/DrawalRequest/DrawalRequestReject.jsx b/src/Pages/WithDrawal/DrawalRequest/DrawalRequestReject.jsx
index e9e3668..85b9a7f 100644
--- a/src/Pages/WithDrawal/DrawalRequest/DrawalRequestReject.jsx
+++ b/src/Pages/WithDrawal/DrawalRequest/DrawalRequestReject.jsx
@@ -113,7 +113,7 @@ import { useDepositRejectMutation } from "../../../Services/drawal.request.servi
                 )}
                 <FormHelperText fontSize="xs" color="gray.500">
                 <Text as={"span"} me={1}>Maximum length should be 200 characters. You have entered</Text>
-                  {watch("checkerComment")?.length || 0} characters.
+                  {watch("comments")?.length || 0} characters.
                 </FormHelperText>
               </FormControl>
             </ModalBody>
-- 
2.34.1


From 463325e6030515ea1695fe8d22f9ab0ff79eb6da Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Mon, 2 Dec 2024 12:47:44 +0530
Subject: [PATCH 27/49] update investor

---
 src/Pages/IO_Management/CreateIO/Investors.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/Pages/IO_Management/CreateIO/Investors.jsx b/src/Pages/IO_Management/CreateIO/Investors.jsx
index 3d37013..a102399 100644
--- a/src/Pages/IO_Management/CreateIO/Investors.jsx
+++ b/src/Pages/IO_Management/CreateIO/Investors.jsx
@@ -182,7 +182,7 @@ const Investors = ({ data }) => {
         {item?.clientReference_id}
       </Text>
     ),
-    "First name": (
+    "First Name": (
       <Text
         justifyContent={slideFromRight ? "right" : "center"}
         as={"span"}
@@ -193,7 +193,7 @@ const Investors = ({ data }) => {
         {item.firstName}
       </Text>
     ),
-    "Last name": (
+    "Last Name": (
       <Text
         justifyContent={slideFromRight ? "right" : "center"}
         as={"span"}
@@ -204,7 +204,7 @@ const Investors = ({ data }) => {
         {item.lastName}
       </Text>
     ),
-    "Investment amount": (
+    "Investment Amount": (
       <Text
         justifyContent={slideFromRight ? "right" : "left"}
         as={"span"}
@@ -313,7 +313,7 @@ const Investors = ({ data }) => {
         })}`}
       </Text>
     ),
-    "Total return on Investment": (
+    "Total Return on Investment": (
       <Text
         justifyContent={slideFromRight ? "right" : "center"}
         as={"span"}
-- 
2.34.1


From d567acfec8db9c0bc1d3de6cbf266fbd563bee70 Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Thu, 5 Dec 2024 20:26:39 +0530
Subject: [PATCH 28/49] update subadmin

---
 src/Components/HeaderMain.jsx                 |  17 +-
 src/Components/RoleSwitchButton.jsx           |  66 +++
 src/Pages/ChangePassword.jsx                  | 202 ++++++++++
 src/Pages/ForgetPassword.jsx                  | 178 +++++++++
 .../CreateIO/IONAVDetails/Approved.jsx        |   7 +-
 src/Pages/Login.jsx                           |  18 +-
 src/Pages/SubAdmin/SubAdmin.jsx               | 375 ++++++++++++++++++
 src/Pages/SubAdmin/SubAdminUpdateCreate.jsx   | 354 +++++++++++++++++
 src/Routes/Nav.js                             |   5 +
 src/Routes/Routes.js                          |   8 +-
 src/Services/subadmin.service.js              |  98 +++++
 src/Store/Store.js                            |   4 +-
 12 files changed, 1317 insertions(+), 15 deletions(-)
 create mode 100644 src/Components/RoleSwitchButton.jsx
 create mode 100644 src/Pages/ChangePassword.jsx
 create mode 100644 src/Pages/ForgetPassword.jsx
 create mode 100644 src/Pages/SubAdmin/SubAdmin.jsx
 create mode 100644 src/Pages/SubAdmin/SubAdminUpdateCreate.jsx
 create mode 100644 src/Services/subadmin.service.js

diff --git a/src/Components/HeaderMain.jsx b/src/Components/HeaderMain.jsx
index 65db972..7221fb8 100644
--- a/src/Components/HeaderMain.jsx
+++ b/src/Components/HeaderMain.jsx
@@ -13,8 +13,9 @@ import {
   Portal,
   Text,
   useColorMode,
+  useDisclosure,
 } from "@chakra-ui/react";
-import React, { useContext } from "react";
+import React, { useContext, useRef } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { IoMdDownload } from "react-icons/io";
 import * as XLSX from "xlsx";
@@ -23,6 +24,7 @@ import GlobalStateContext from "../Contexts/GlobalStateContext";
 import { MdOutlineDarkMode, MdOutlineLightMode } from "react-icons/md";
 import logoMini from "../assets/propic.png";
 import { BsBack } from "react-icons/bs";
+import ChangePassword from "../Pages/ChangePassword";
 
 const HeaderMain = ({
   link,
@@ -35,6 +37,8 @@ const HeaderMain = ({
 }) => {
   const navigate = useNavigate();
   const { colorMode, toggleColorMode } = useContext(GlobalStateContext);
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const firstField = useRef();
 
   return (
     <Box
@@ -66,11 +70,11 @@ const HeaderMain = ({
               <PopoverBody onClick={()=> navigate('/profile')} className="web-text-medium pointer link">
                 Profile
               </PopoverBody>
-              <Link to={"/help-and-support"}>
+              <Box onClick={onOpen}>
                 <PopoverBody className="web-text-medium pointer ">
-                  Help & Support
+                  Change Password
                 </PopoverBody>
-              </Link>
+              </Box>
               <PopoverFooter
                 onClick={logOutHandler}
                 className="web-text-medium pointer link"
@@ -112,6 +116,11 @@ const HeaderMain = ({
         {/* <Box onClick={() => toggleColorMode()} as="span" p={2} rounded={'lg'} className="link pointer">
           {colorMode === "light"?  <MdOutlineDarkMode /> :<MdOutlineLightMode />}
         </Box> */}
+        <ChangePassword
+          isOpen={isOpen}
+          onClose={onClose}
+          firstField={firstField}
+        />
       </Box>
     </Box>
   );
diff --git a/src/Components/RoleSwitchButton.jsx b/src/Components/RoleSwitchButton.jsx
new file mode 100644
index 0000000..fe3f888
--- /dev/null
+++ b/src/Components/RoleSwitchButton.jsx
@@ -0,0 +1,66 @@
+import { Box, Text } from "@chakra-ui/react";
+import React, { useRef } from "react";
+import audioClick from "../assets/click-151673.mp3";
+
+const RoleSwitchButton = ({ isSwitchOn, setIsSwitchOn }) => {
+
+  // const [isSwitchOn, setIsSwitchOn] = useState(false);
+
+//   const audio = useRef();
+
+  const switchOnChangeHandle = () => {
+    setIsSwitchOn(!isSwitchOn);
+    // if (audio.current) {
+    //   audio.current.play();
+    // }
+  };
+
+  return (
+    <Box display="flex" alignItems="center">
+      <Box
+        as="button"
+        display="flex"
+        justifyContent="normal"
+        alignItems="center"
+        // justifyContent={isSwitchOn ? "flex-end" : "flex-start"}
+        width="85px"
+        height="24px"
+        borderRadius="20px"
+        backgroundColor={isSwitchOn ? "#00ffcc" : "#b3ff99"}
+        onClick={switchOnChangeHandle}
+        position="relative"
+        fontSize="12px"
+        fontWeight="100"
+        transition="background-color 0.2s"
+        _before={{
+          content: '""',
+          position: "absolute",
+          width: "20px",
+          height: "20px",
+          borderRadius: "50%",
+          backgroundColor: "#fff",
+          boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
+          transform: isSwitchOn ? "translateX(61px)" : "translateX(0)",
+          transition: "transform 0.2s",
+          left:'2px',
+          top:'2px'
+        }}
+      >
+        <Text
+          fontWeight="500"
+          zIndex={1}
+          position="absolute"
+          mb={0}
+          color={isSwitchOn ? "#000" : "#000"}
+          left={isSwitchOn ? "10px" : "auto"}
+          right={isSwitchOn ? "auto" : "10px"}
+        >
+          {isSwitchOn ? "Maker" : "Checker"}
+        </Text>
+      </Box>
+      {/* <audio ref={audio} src={audioClick} /> */}
+    </Box>
+  );
+};
+
+export default RoleSwitchButton;
diff --git a/src/Pages/ChangePassword.jsx b/src/Pages/ChangePassword.jsx
new file mode 100644
index 0000000..84624c2
--- /dev/null
+++ b/src/Pages/ChangePassword.jsx
@@ -0,0 +1,202 @@
+import {
+  Button,
+  DrawerFooter,
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  Stack,
+  useToast,
+} from "@chakra-ui/react";
+import * as yup from "yup";
+import React, { useState, useEffect, useContext } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { v4 as uuidv4 } from "uuid";
+import { useParams } from "react-router-dom";
+import CustomAlertDialog from "../Components/CustomAlertDialog";
+import ToastBox from "../Components/ToastBox";
+import GlobalStateContext from "../Contexts/GlobalStateContext";
+import CurrencyInput from "../Components/CurrencyInput";
+
+const ioNav = yup.object().shape({
+  transactionDate: yup.string().required("Date is required"),
+  transactionAmount: yup.string().required("New NAV is required"),
+  comments: yup
+    .string()
+    .notRequired()
+    .max(200, "Approve Comment cannot be more than 200 characters"),
+});
+
+const ChangePassword = ({
+  isOpen,
+  onClose,
+  firstField,
+  actionId,
+  setActionId,
+  data,
+}) => {
+  const params = useParams();
+  const id = params?.id;
+  const [file, setFile] = useState("");
+  const [fileName, setFileName] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [alert, setAlert] = useState(false);
+  const toast = useToast();
+
+  const [showPassword, setShowPassword] = useState(false);
+  const [subject, setSubject] = useState("");
+  const togglePasswordVisibility = () => setShowPassword(!showPassword);
+  // ======================[ Cotext Api ]
+  const { IODetails } = useContext(GlobalStateContext);
+  const found = data?.find((item) => item?.id === actionId);
+
+  // const [addNavDetails] = useAddNavDetailsMutation()
+  // const {
+  //   data
+  // } = useGetArtifactsQuery(id)
+
+  const {
+    control,
+    handleSubmit,
+    watch,
+    reset,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(ioNav),
+  });
+
+//   const onSubmit = async (data) => {
+//     setIsLoading(true);
+
+//     try {
+//       const res = await addNavDetails({ data, id });
+//       if (res?.data?.statusCode === 201) {
+//         setIsLoading(false);
+//         toast({
+//           render: () => <ToastBox message={res?.data?.message} />,
+//         });
+//         handleClose();
+//       } else if (res?.error?.status === 400) {
+//         toast({
+//           render: () => (
+//             <ToastBox message={res?.error?.data?.message} status={"error"} />
+//           ),
+//         });
+//         handleClose();
+//       }
+//     } catch (error) {
+//       console.log(error);
+//     }
+//   };
+
+  const handleSave = () => {
+    handleSubmit(onSubmit)();
+  };
+
+  const handleClose = () => {
+    setIsLoading(false);
+    setAlert(false);
+    onClose();
+  };
+  
+
+  return (
+    <>
+      <Modal
+        // closeOnOverlayClick={false}
+        isOpen={isOpen}
+        onClose={onClose}
+        initialFocusRef={firstField}
+      >
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader fontSize={"md"}>Change Password</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody pb={6}>
+            <Stack spacing={4}>
+              <FormControl isInvalid={errors.ChangePassword} isRequired>
+                <FormLabel fontSize={"sm"} mb={1} fontWeight={500}>Current Password</FormLabel>
+                <Input
+                    size={"sm"}
+                    onChange={(e) => setSubject(e.target.value)}
+                    focusBorderColor="forestGreen.300"
+                    rounded={4}
+                    type={showPassword ? "text" : "password"}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.ChangePassword?.message}
+                </FormErrorMessage>
+              </FormControl>
+              <FormControl isInvalid={errors.newPassword} isRequired>
+                <FormLabel fontSize={"sm"} mb={1}>New Password</FormLabel>
+                <Input
+                    size={"sm"}
+                    onChange={(e) => setSubject(e.target.value)}
+                    focusBorderColor="forestGreen.300"
+                    rounded={4}
+                    type="text"
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.newPassword?.message}
+                </FormErrorMessage>
+              </FormControl>
+              <FormControl isInvalid={errors.conformPassword} isRequired>
+                <FormLabel fontSize={"sm"} mb={1}>Re-Type New Password</FormLabel>
+                <Input
+                    size={"sm"}
+                    onChange={(e) => setSubject(e.target.value)}
+                    focusBorderColor="forestGreen.300"
+                    rounded={4}
+                    type="text"
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.conformPassword?.message}
+                </FormErrorMessage>
+              </FormControl>
+            </Stack>
+          </ModalBody>
+
+          <DrawerFooter mb={5}>
+            <Button
+            //   variant="outline"
+              bg={"#e0ebeb"}
+              rounded={"sm"}
+              size={"sm"}
+              mr={3}
+              onClick={handleClose}
+            >
+              Cancel
+            </Button>
+
+            <Button
+              colorScheme={"forestGreen"}
+              rounded={"sm"}
+              size={"sm"}
+              onClick={() => setAlert(true)}
+              fontWeight={400}
+            >
+              Save
+            </Button>
+          </DrawerFooter>
+        </ModalContent>
+      </Modal>
+
+      <CustomAlertDialog
+        isOpen={alert}
+        onClose={() => setAlert(false)}
+        alertHandler={handleSave}
+        message={"Are you sure you want to change password?"}
+        isLoading={isLoading}
+      />
+    </>
+  );
+};
+
+export default ChangePassword;
diff --git a/src/Pages/ForgetPassword.jsx b/src/Pages/ForgetPassword.jsx
new file mode 100644
index 0000000..8b78aba
--- /dev/null
+++ b/src/Pages/ForgetPassword.jsx
@@ -0,0 +1,178 @@
+import {
+    Button,
+    DrawerFooter,
+    FormControl,
+    FormErrorMessage,
+    FormLabel,
+    Input,
+    Modal,
+    ModalBody,
+    ModalCloseButton,
+    ModalContent,
+    ModalHeader,
+    ModalOverlay,
+    Stack,
+    useToast,
+  } from "@chakra-ui/react";
+  import * as yup from "yup";
+  import React, { useState, useEffect, useContext } from "react";
+  import { useForm, Controller } from "react-hook-form";
+  import { yupResolver } from "@hookform/resolvers/yup";
+  import { v4 as uuidv4 } from "uuid";
+  import { useParams } from "react-router-dom";
+  import CustomAlertDialog from "../Components/CustomAlertDialog";
+  import ToastBox from "../Components/ToastBox";
+  import GlobalStateContext from "../Contexts/GlobalStateContext";
+  import CurrencyInput from "../Components/CurrencyInput";
+  
+  const ioNav = yup.object().shape({
+    transactionDate: yup.string().required("Date is required"),
+    transactionAmount: yup.string().required("New NAV is required"),
+    comments: yup
+      .string()
+      .notRequired()
+      .max(200, "Approve Comment cannot be more than 200 characters"),
+  });
+  
+  const ForgetPassword = ({
+    isOpen,
+    onClose,
+    firstField,
+    actionId,
+    setActionId,
+    data,
+  }) => {
+    const params = useParams();
+    const id = params?.id;
+    const [file, setFile] = useState("");
+    const [fileName, setFileName] = useState("");
+    const [isLoading, setIsLoading] = useState(false);
+    const [alert, setAlert] = useState(false);
+    const toast = useToast();
+  
+    const [showPassword, setShowPassword] = useState(false);
+    const [subject, setSubject] = useState("");
+    // ======================[ Cotext Api ]
+    const { IODetails } = useContext(GlobalStateContext);
+    const found = data?.find((item) => item?.id === actionId);
+  
+    // const [addNavDetails] = useAddNavDetailsMutation()
+    // const {
+    //   data
+    // } = useGetArtifactsQuery(id)
+  
+    const {
+      control,
+      handleSubmit,
+      watch,
+      reset,
+      formState: { errors },
+    } = useForm({
+      resolver: yupResolver(ioNav),
+    });
+  
+  //   const onSubmit = async (data) => {
+  //     setIsLoading(true);
+  
+  //     try {
+  //       const res = await addNavDetails({ data, id });
+  //       if (res?.data?.statusCode === 201) {
+  //         setIsLoading(false);
+  //         toast({
+  //           render: () => <ToastBox message={res?.data?.message} />,
+  //         });
+  //         handleClose();
+  //       } else if (res?.error?.status === 400) {
+  //         toast({
+  //           render: () => (
+  //             <ToastBox message={res?.error?.data?.message} status={"error"} />
+  //           ),
+  //         });
+  //         handleClose();
+  //       }
+  //     } catch (error) {
+  //       console.log(error);
+  //     }
+  //   };
+  
+    const handleSave = () => {
+      handleSubmit(onSubmit)();
+    };
+  
+    const handleClose = () => {
+      setIsLoading(false);
+      setAlert(false);
+      onClose();
+    };
+    
+  
+    return (
+      <>
+        <Modal
+          // closeOnOverlayClick={false}
+          isOpen={isOpen}
+          onClose={onClose}
+          initialFocusRef={firstField}
+        >
+          <ModalOverlay />
+          <ModalContent>
+            <ModalHeader fontSize={"md"}>Forget Password</ModalHeader>
+            <ModalCloseButton />
+            <ModalBody pb={4}>
+              <Stack spacing={4}>
+                <FormControl isInvalid={errors.ChangePassword}>
+                  <FormLabel fontSize={"sm"} mb={3} fontWeight={500}>Email, Phone, or UserName</FormLabel>
+                  <Input
+                      size={"md"}
+                      onChange={(e) => setSubject(e.target.value)}
+                      focusBorderColor="forestGreen.300"
+                      rounded={4}
+                      // type={showPassword ? "text" : "password"}
+                      type="text"
+                  />
+                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                    {errors.ChangePassword?.message}
+                  </FormErrorMessage>
+                </FormControl>
+              </Stack>
+            </ModalBody>
+  
+            <DrawerFooter mb={5}>
+              {/* <Button
+              //   variant="outline"
+                bg={"#e0ebeb"}
+                rounded={"sm"}
+                size={"sm"}
+                mr={3}
+                onClick={handleClose}
+              >
+                Cancel
+              </Button> */}
+  
+              <Button
+                w={"100%"}
+                colorScheme={"forestGreen"}
+                rounded={"md"}
+                size={"md"}
+                onClick={() => setAlert(true)}
+                fontWeight={400}
+              >
+                Send Login Link
+              </Button>
+            </DrawerFooter>
+          </ModalContent>
+        </Modal>
+  
+        <CustomAlertDialog
+          isOpen={alert}
+          onClose={() => setAlert(false)}
+          alertHandler={handleSave}
+          message={"Are you sure you want to change password?"}
+          isLoading={isLoading}
+        />
+      </>
+    );
+  };
+  
+  export default ForgetPassword;
+  
\ No newline at end of file
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx
index 3b1a0a8..96b6e76 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx
@@ -4,10 +4,7 @@ import {
   Box,
   Button,
   HStack,
-  Input,
-  Table,
-  Tag,
-  Tbody,
+  Input,   
   Text,
   Th,
   Tooltip,
@@ -22,7 +19,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 * as XLSX from "xlsx";
+import * as XLSX from "xlsx";                                                                  
 import ToastBox from "../../../../Components/ToastBox";
 import AddCashDetails from "../AddCashDetails";
 import { debounce } from "../../../Admin/Contact";
diff --git a/src/Pages/Login.jsx b/src/Pages/Login.jsx
index 2af75cb..c871975 100644
--- a/src/Pages/Login.jsx
+++ b/src/Pages/Login.jsx
@@ -3,7 +3,7 @@ import Input01 from "../Components/Inputs/Input01";
 import logo from "../assets/logo2.png";
 import { useDispatch, useSelector } from "react-redux";
 import { loginUser } from "../Redux/Slice/auth";
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import Button01 from "../Components/Buttons/Button01";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { useForm } from "react-hook-form";
@@ -12,12 +12,15 @@ import Loader01 from "../Components/Loaders/Loader01";
 import Asset1 from "../assets/asset1.png";
 import Asset2 from "../assets/asset2.png";
 import {
+  Box,
   Button,
   FormControl,
   FormLabel,
   Input,
   InputGroup,
   InputRightElement,
+  Text,
+  useDisclosure,
   useToast,
 } from "@chakra-ui/react";
 import GlobalStateContext from "../Contexts/GlobalStateContext";
@@ -28,6 +31,7 @@ import { useLoginMutation } from "../Services/token.serivce";
 
 // import { yupResolver } from "@hookform/resolvers/yup";
 import * as Yup from "yup";
+import ForgetPassword from "./ForgetPassword";
 
 
 const validationSchema = Yup.object().shape({
@@ -50,6 +54,8 @@ const Login = () => {
   const dispatch = useDispatch();
 
   const [login] = useLoginMutation()
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const firstField = useRef();
 
   useEffect(() => {
     
@@ -205,7 +211,7 @@ const Login = () => {
           )}
         </FormControl>
 
-        <FormControl className="mb-4">
+        <FormControl className="mb-2">
           <FormLabel className="rubix-text-dark ps-1 web-text-medium fw-bold">
             Password <span className="text-danger">*</span>
           </FormLabel>
@@ -238,6 +244,9 @@ const Login = () => {
             </span>
           )}
         </FormControl>
+        <Box fontSize={"sm"} display={"flex"} justifyContent={"end"} mt={0}>
+          <Text fontWeight={500} cursor={"pointer"} onClick={onOpen}>Forget Password?</Text>
+        </Box>
 
         <Button
           isLoading={isLoading}
@@ -317,6 +326,11 @@ const Login = () => {
         src={Asset2}
         alt="bg-img"
       />
+      <ForgetPassword
+          isOpen={isOpen}
+          onClose={onClose}
+          firstField={firstField}
+        />
     </div>
   );
 };
diff --git a/src/Pages/SubAdmin/SubAdmin.jsx b/src/Pages/SubAdmin/SubAdmin.jsx
new file mode 100644
index 0000000..4f209bc
--- /dev/null
+++ b/src/Pages/SubAdmin/SubAdmin.jsx
@@ -0,0 +1,375 @@
+import {
+  Badge,
+  Box,
+  Button,
+  HStack,
+  Input,
+  Switch,
+  Text,
+  Tooltip,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useState } from "react";
+import { Link, Link as RouterLink } from "react-router-dom";
+import { AddIcon, DeleteIcon, EditIcon } from "@chakra-ui/icons";
+import { useNavigate } from "react-router-dom";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import NormalTable from "../../Components/DataTable/NormalTable";
+import Pagination from "../../Components/Pagination";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import CustomAlertDialog from "../../Components/CustomAlertDialog";
+import ToastBox from "../../Components/ToastBox";
+import { TABLE_PAGINATION } from "../../Constants/Paginations";
+import { generateSerialNumber } from "../../Constants/Constants";
+import { useGetSponserMasterQuery } from "../../Services/io.service";
+import {
+  useGetSubAdminMasterQuery,
+  useToggleStatusMutation,
+} from "../../Services/subadmin.service";
+import RoleSwitchButton from "../../Components/RoleSwitchButton";
+
+export const formatDate = (date) => {
+  const d = new Date(date);
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, "0"); // Months are 0-indexed
+  const day = String(d.getDate()).padStart(2, "0");
+
+  return `${day}/${month}/${year}`;
+};
+
+const SubAdmin = () => {
+  const navigate = useNavigate();
+  const toast = useToast();
+  const [isLoading, setIsLoading] = useState(false);
+  const [deleteAlert, setDeleteAlert] = useState(false);
+  const [actionId, setActionId] = useState(false);
+  const [mouseEntered, setMouseEntered] = useState(false);
+  const [mouseEnteredId, setMouseEnteredId] = useState("");
+  //   const [deleteSponser] = useDeleteSponserMutation();
+  const { sponser, setSponser, slideFromRight } =
+    useContext(GlobalStateContext);
+
+  // =========================== [Use State] =============================
+  const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
+  const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
+  const [isSwitchOn, setIsSwitchOn] = useState(true);
+
+  // Debounce the search term to avoid making a request on every keystroke
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm);
+    }, 500); // Adjust delay as needed
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [searchTerm]);
+
+  const {
+    data: subAdmin,
+    error,
+    isLoading: isSponserLoading,
+  } = useGetSubAdminMasterQuery();
+
+  const [toggleStatus] = useToggleStatusMutation();
+
+  // useEffect(() => {
+  //   if (subAdmin?.data) {
+  //     setIsSwitchOn(subAdmin?.role?.role);
+  //     console.log(subAdmin);
+  //   }
+  // }, [subAdmin]);
+
+  // ==============================[Table Filter]========================
+
+  const filteredData = subAdmin?.data?.filter((item) => {
+    const name = item.firstName;
+    const searchLower = searchTerm?.toLowerCase();
+    const nameMatches = name?.toLowerCase().includes(searchLower);
+    return nameMatches;
+  });
+
+  const handleToggleStatus = async (isMaker, id) => {
+    console.log("hit");
+    const data = {
+      role_xid: isMaker ? 1 : 2,
+    };
+    try {
+      const res = await toggleStatus(id, data).unwrap();
+      if (res?.error) {
+        toast({
+          render: () => (
+            <ToastBox status={"error"} message={res?.error?.data?.message} />
+          ),
+        });
+      } else if (res) {
+        toast({
+          render: () => (
+            <ToastBox
+              status={"success"}
+              message={res?.message || "Status updated successfully!"}
+            />
+          ),
+        });
+      }
+    } catch (error) {
+      toast({
+        render: () => (
+          <ToastBox
+            status={"error"}
+            message={error?.data?.message || "Something went wrong"}
+          />
+        ),
+      });
+    }
+  };
+
+  // ====================================================[Table Setup]================================================================
+
+  const tableHeadRow = [
+    "Sr No",
+    "First Name",
+    "Last Name",
+    "Email Address",
+    "Role",
+    "Action",
+  ];
+
+  const extractedArray = subAdmin?.data?.map((item, index) => ({
+    "Sr No": (
+      <Text
+        w={"24px"}
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.600"}
+        className="d-flex align-items-center fw-bold web-text-small"
+      >
+        {/* {item.id} */}
+        {generateSerialNumber(index, currentPage, pageSize)}
+      </Text>
+    ),
+    "First Name": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        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" : "left"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item?.lastName}
+      </Text>
+    ),
+    "Email Address": (
+      <Box isTruncated={true}>
+        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+          {item?.emailAddress}
+        </Text>
+      </Box>
+    ),
+    Role: (
+      <Box minW={24} isTruncated={true}>
+        <Badge
+          py={"2px"}
+          px={"5px"}
+          me={2}
+          bg={item?.role[0]?.role === "Maker" ? "#00ffcc" : "#b3ff99"}
+        >
+          {item?.role[0]?.role}
+        </Badge>
+        <Switch
+          onChange={() =>
+            handleToggleStatus(item?.role[0]?.role === "Maker", item?.id)
+          }
+          isChecked={item?.role[0]?.role === "Maker"}
+          // colorScheme={item?.role[0]?.role === "Maker" ? "green" : "teal"}
+          sx={{
+            ".chakra-switch__track": {
+              bg: item?.role[0]?.role === "Maker" ? "#00ffcc" : "#b3ff99", // "Off" state color
+            },
+          }}
+        />
+        {/* <RoleSwitchButton
+        setIsSwitchOn={setIsSwitchOn}
+          isSwitchOn={item?.role[0]?.role === "Maker"}
+          onClick={() => handleToggleStatus(item?.role[0]?.role=== "Maker")}
+        /> */}
+      </Box>
+    ),
+    Action: (
+      <Box display={"flex"} justifyContent={"center"} gap={2}>
+        <Tooltip
+          rounded={"sm"}
+          fontSize={"xs"}
+          label="Edit"
+          bg="#fff"
+          color={"blue.500"}
+          placement="top"
+        >
+          <Button
+            onClick={() => navigate(`/subadmin/subadmin-update/${item.id}`)}
+            // _hover={{ color: "blue.500" }}
+            // color="blue.400"
+            rounded={"sm"}
+            size={"xs"}
+            colorScheme="blue"
+          >
+            <EditIcon />
+          </Button>
+        </Tooltip>
+
+        {/* <Tooltip
+          rounded={"sm"}
+          fontSize={"xs"}
+          label="Delete"
+          bg="#fff"
+          color={"red.500"}
+          placement="top"
+        >
+          <Button
+            onClick={() => {
+              setActionId(item?.id);
+              setDeleteAlert(true);
+            }}
+            // _hover={{ color: "red.500" }}
+            // color="red"
+            rounded={"sm"}
+            size={"xs"}
+            colorScheme="red"
+            variant={"solid"}
+          >
+            <DeleteIcon />
+          </Button>
+        </Tooltip> */}
+      </Box>
+    ),
+  }));
+
+  // ===========================  [ Delete Function ] =================================
+
+  // const handleDelete = async () => {
+  //   console.log(actionId);
+  //   setIsLoading(true);
+  //   try {
+  //     const response = await deleteSponser(actionId);
+  //     console.log(response?.data);
+  //     if (response?.error?.data?.code === 400) {
+  //       toast({
+  //         render: () => (
+  //           <ToastBox
+  //             message={response?.error?.data?.message}
+  //             status={"error"}
+  //           />
+  //         ),
+  //       });
+  //       setIsLoading(false);
+  //       setDeleteAlert(false);
+  //     } else if (
+  //       response?.data?.statusCode === 201 ||
+  //       response?.data?.statusCode === 200
+  //     ) {
+  //       toast({
+  //         render: () => (
+  //           <ToastBox message={response?.data?.message} status={"success"} />
+  //         ),
+  //       });
+  //       setIsLoading(false);
+  //       setDeleteAlert(false);
+  //     }
+  //   } catch (error) {}
+  // };
+
+  console.log(isSponserLoading);
+
+  return (
+    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
+      <Box bg="white.500">
+        <HStack
+          display={"flex"}
+          justifyContent={"space-between"}
+          ps={1}
+          pe={1}
+          pb={4}
+          pt={4}
+          spacing="24px"
+        >
+          {/* =======================[Search Input]======================== */}
+
+          <Input
+            type="search"
+            width={300}
+            placeholder="Search..."
+            size="sm"
+            rounded="sm"
+            focusBorderColor="green.500"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+
+          <HStack display={"flex"} alignItems={"center"}>
+            {/* ====================[Pagination]===================== */}
+
+            <Pagination
+              isLoading={isSponserLoading}
+              pageSize={pageSize}
+              setPageSize={setPageSize}
+              currentPage={currentPage}
+              setCurrentPage={setCurrentPage}
+              totalItems={subAdmin?.data?.totalItems}
+            />
+
+            {/* =====================[Add Button]===================== */}
+
+            <Link to={"/subadmin/subadmin-update"}>
+              <Button
+                leftIcon={<AddIcon />}
+                colorScheme={"forestGreen"}
+                rounded={"sm"}
+                fontSize={"xs"}
+                size={"sm"}
+              >
+                Add
+              </Button>
+            </Link>
+          </HStack>
+        </HStack>
+      </Box>
+
+      {/* =================== [Data Table] ===================== */}
+
+      <NormalTable
+        emptyMessage={`We don't have any Sponers `}
+        tableHeadRow={tableHeadRow}
+        data={extractedArray}
+        isLoading={isSponserLoading}
+        viewActionId={actionId}
+        setViewActionId={setActionId}
+        setMouseEnteredId={setMouseEnteredId}
+        setMouseEntered={setMouseEntered}
+      />
+
+      {/* ========================  [Modal]  ======================== */}
+
+      <CustomAlertDialog
+        onClose={() => setDeleteAlert(false)}
+        isOpen={deleteAlert}
+        message={"Are you sure you want to delete sponers?"}
+        // alertHandler={handleDelete}
+        isLoading={isLoading}
+      />
+    </Box>
+  );
+};
+
+export default SubAdmin;
diff --git a/src/Pages/SubAdmin/SubAdminUpdateCreate.jsx b/src/Pages/SubAdmin/SubAdminUpdateCreate.jsx
new file mode 100644
index 0000000..13feac2
--- /dev/null
+++ b/src/Pages/SubAdmin/SubAdminUpdateCreate.jsx
@@ -0,0 +1,354 @@
+import React, { useContext, useEffect, useState } from "react";
+import { Box, Button, Text, useToast } from "@chakra-ui/react";
+import { useForm, Controller } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+import { useNavigate, useParams } from "react-router-dom";
+import { v4 as uuidv4 } from "uuid";
+import { ArrowBackIcon } from "@chakra-ui/icons";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import FormInputMain from "../../Components/FormInputMain";
+import ToastBox from "../../Components/ToastBox";
+import FullscreenLoaders from "../../Components/Loaders/FullscreenLoaders";
+import CustomAlertDialog from "../../Components/CustomAlertDialog";
+import RoleSwitchButton from "../../Components/RoleSwitchButton";
+import {
+  useCreateSubAdminMutation,
+  useGetSubAdminByIdQuery,
+  useUpdateSubAdminMutation,
+} from "../../Services/subadmin.service";
+import { useGetSponserByIdQuery } from "../../Services/io.service";
+// ======================= [validation] =========================
+
+export const addSubAdmin = yup.object().shape({
+  firstName: yup
+    .string()
+    .required("First Name is required")
+    .min(3, "First Name must be at least 3 characters long")
+    .max(50, "First Name cannot exceed 50 characters")
+    .matches(/^[^\d]+$/, "First Name cannot contain numbers"),
+
+    lastName: yup
+    .string()
+    .required("Last Name name in arabic is required"),
+    emailAddress: yup.string().email("Invalid email address").notRequired(),
+  //   .test("emailValidity", "Email address is invalid", async function (value) {
+  //     if (!value) {
+  //         return true; // Allow if the field is empty
+  //     }
+  //     return await checkEmailValidity(value);
+  // }),
+});
+
+// ==================== [debounce] ========================
+
+export function debounce(func, delay) {
+  let debounceTimer;
+  return function (...args) {
+    clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(() => func.apply(this, args), delay);
+  };
+}
+
+const SubAdminUpdateCreate = () => {
+  const toast = useToast();
+  const params = useParams();
+  const navigate = useNavigate();
+  const id = params?.id;
+
+  // =====================[useState]=======================
+
+  const [isLoadingBtn, setIsLoadingBtn] = useState(false);
+  const [alert, setAlert] = useState(false);
+  const [form, setForm] = useState();
+  const [isSwitchOn, setIsSwitchOn] = useState(true);
+
+  const [createSubAdmin] = useCreateSubAdminMutation();
+  const [updateSubAdmin] = useUpdateSubAdminMutation();
+
+  // Fetch sponsor data only if id exists
+  const {
+    data: subAdminByIdData,
+    error,
+    isLoading,
+  } = useGetSubAdminByIdQuery(id, { skip: !id });
+
+  // ======================== [validators] ===========================
+
+  const {
+    control,
+    watch,
+    handleSubmit,
+    formState: { errors },
+    reset,
+  } = useForm({
+    resolver: yupResolver(addSubAdmin),
+  });
+
+  // ========================== [useEffect] ================================
+
+  useEffect(() => {
+    if (subAdminByIdData?.data) {
+      reset({
+        firstName: subAdminByIdData?.data?.firstName,
+        lastName: subAdminByIdData?.data?.lastName,
+        emailAddress: subAdminByIdData?.data?.emailAddress,
+      });
+      setIsSwitchOn(subAdminByIdData?.data?.role[0]?.role==="Maker");
+      console.log(subAdminByIdData?.data?.role);
+    }
+  }, [subAdminByIdData, reset]);
+
+
+  if (false) {
+    return <FullscreenLoaders />;
+  }
+
+  // ============================ [API]===============================
+
+
+  const handleConfirm = async () => {
+    setIsLoadingBtn(true);
+    const id = params?.id;
+    console.log(isSwitchOn);
+    
+    if (id) {
+      try {
+        const formData = {
+          ...form,
+          role_xid: isSwitchOn?2:1,
+        };
+        await updateSubAdmin({ data: formData, id }).then((response) => {
+          if (response?.data?.statusCode) {
+            toast({
+              render: () => <ToastBox message={response?.data?.message} />,
+            });
+
+            setIsLoadingBtn(false);
+            setAlert(false);
+            navigate("/subadmin");
+          } else if (response?.error?.status === 400) {
+            toast({
+              render: () => (
+                <ToastBox
+                  message={response?.error?.data?.message}
+                  status={"error"}
+                />
+              ),
+            });
+
+            setIsLoadingBtn(false);
+            setAlert(false);
+          }
+        });
+      } catch (error) {
+        console.log(error);
+        setIsLoadingBtn(false);
+        navigate("/subadmin");
+      }
+    } else {
+      try {
+        const formData = {
+          ...form,
+          role_xid: isSwitchOn?2:1,
+        };
+        await createSubAdmin(formData).then((response) => {
+          console.log(response);
+          if (response?.data?.statusCode === 201) {
+            toast({
+              render: () => <ToastBox message={response?.data?.message} />,
+            });
+
+            setIsLoadingBtn(false);
+            navigate("/subadmin");
+          } else if (response?.error?.status === 400) {
+            toast({
+              render: () => (
+                <ToastBox
+                  message={response?.error?.data?.message}
+                  status={"error"}
+                />
+              ),
+            });
+
+            setIsLoadingBtn(false);
+            setAlert(false);
+          }
+        });
+      } catch (error) {
+        console.log(error);
+
+        setIsLoadingBtn(false);
+        navigate("/subadmin");
+      }
+    }
+  };
+
+  // ====================== [Update  Form Object] =========================
+
+  const formFields = [
+    {
+      label: "First Name",
+      placeHolder: " ",
+      name: "firstName",
+      type: "text",
+      isRequired: true,
+      section: "",
+      maxLength: 50,
+      helperText: `Maximum length should be 50 characters. You have entered ${
+        watch()?.firstName?.length || 0
+      } characters.`,
+    },
+    {
+      label: "Last Name",
+      name: "lastName",
+      placeHolder: " ",
+      type: "text",
+      isRequired: true,
+      section: "",
+      arabic: true,
+      right: true,
+      maxLength: 55,
+      helperText: `Maximum length should be 55 characters. You have entered ${
+        watch()?.lastName?.length || 0
+      } characters.`,
+    },
+    {
+      label: "Email address",
+      name: "emailAddress",
+      placeHolder: " ",
+      type: "email",
+      // isRequired: true,
+      section: "",
+    },
+  ];
+
+  // ==================== [Create Form Object] =======================
+
+  const formEditFields = [
+    {
+      label: "First Name",
+      placeHolder: " ",
+      name: "firstName",
+      type: "text",
+      isRequired: true,
+      section: "",
+      maxLength: 55,
+      helperText: `Maximum length should be 55 characters. You have entered ${
+        watch()?.firstName?.length || 0
+      } characters.`,
+    },
+    {
+      label: "Last Name",
+      name: "lastName",
+      placeHolder: " ",
+      type: "text",
+      isRequired: true,
+      section: "",
+      arabic: true,
+      maxLength: 55,
+      helperText: `Maximum length should be 55 characters. You have entered ${
+        watch()?.lastName?.length || 0
+      } characters.`,
+    },
+    {
+      label: "Email Address",
+      name: "emailAddress",
+      placeHolder: " ",
+      type: "email",
+      // isRequired: true,
+      section: "",
+    },
+  ];
+
+  // ====================== [Group Create Fields] =========================
+
+  const groupedEditFields = formEditFields.reduce((groups, field) => {
+    const { section } = field;
+    if (!groups[section]) {
+      groups[section] = [];
+    }
+    groups[section].push(field);
+    return groups;
+  }, {});
+
+  // ====================== [Group Update Fields] =======================
+
+  const groupedFields = formFields.reduce((groups, field) => {
+    const { section } = field;
+    if (!groups[section]) {
+      groups[section] = [];
+    }
+    groups[section].push(field);
+    return groups;
+  }, {});
+
+  // ==================== [On Submit] ========================
+console.log(errors);
+
+  const onSubmit = async (data) => {
+    console.log("Hit");
+    
+    if (Object.keys(errors).length === 0) {
+      setForm(data);
+      setAlert(true);
+    }
+  };
+
+  return isLoading ? (
+    <FullscreenLoaders />
+  ) : (
+    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
+      {/* =====================  [Switch Button] ======================== */}
+      <Box
+        display={"flex"}
+        justifyContent={"space-between"}
+        alignItems={"center"}
+        mt={5}
+        px={4}
+      >
+        <Text
+          fontSize={"sm"}
+          mb={0}
+          onClick={() => navigate(-1)}
+          cursor={"pointer"}
+        >
+          <ArrowBackIcon fontSize={"xl"} me={2} />
+          Add Details
+        </Text>
+        <RoleSwitchButton
+          isSwitchOn={isSwitchOn}
+          setIsSwitchOn={setIsSwitchOn}
+        />
+      </Box>
+
+      {/* ====================== [Form Input] ====================== */}
+
+      <FormInputMain
+        groupedFields={params?.id ? groupedEditFields : groupedFields}
+        control={control}
+        errors={errors}
+        onSubmit={handleSubmit(onSubmit)}
+        submitTitle={params?.id ? "Update" : "Submit"}
+      ></FormInputMain>
+
+      {/* ======================= [Modal] =========================== */}
+
+      <CustomAlertDialog
+        isOpen={alert}
+        onClose={() => setAlert(false)}
+        alertHandler={handleConfirm}
+        message={
+          id
+            ? "Are you sure you want to update this?"
+            : "Are you sure you want to add this?"
+        }
+        isLoading={isLoadingBtn}
+      />
+
+      {/* <DummyComponent /> */}
+    </Box>
+  );
+};
+
+export default SubAdminUpdateCreate;
diff --git a/src/Routes/Nav.js b/src/Routes/Nav.js
index e32d493..58996f4 100644
--- a/src/Routes/Nav.js
+++ b/src/Routes/Nav.js
@@ -233,6 +233,11 @@ export const nav = [
         path: "/bank-details",
         icon: RiBankLine,
       },
+      {
+        title: "Sub Admin",
+        path: "/subadmin",
+        icon: RiFileUserLine,
+      },
     ],
     type: "accordion",
     Icon: MdOutlineAdminPanelSettings,
diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js
index 205e3f5..5115a51 100644
--- a/src/Routes/Routes.js
+++ b/src/Routes/Routes.js
@@ -46,6 +46,8 @@ import EmailNotification from "../Pages/EmailNotification/EmailNotification";
 import User from "../Pages/User/User";
 import AddUser from "../Pages/User/AddUser";
 import Profile from "../Pages/Profile/Profile";
+import SubAdmin from "../Pages/SubAdmin/SubAdmin";
+import SubAdminUpdateCreate from "../Pages/SubAdmin/SubAdminUpdateCreate";
 
 export const RouteLink = [
   // =============[ Tanami ]================
@@ -123,6 +125,9 @@ export const RouteLink = [
   // { path: "/bank-details", Component: UnderConstruction },
   { path: "/bank-details/edit-bank-details/:id", Component: EditBankDetails },
   { path: "/profile", Component: Profile },
+  { path: "/subadmin", Component: SubAdmin },
+  { path: "/subadmin/subadmin-update/:id", Component: SubAdminUpdateCreate },
+  { path: "/subadmin/subadmin-update", Component: SubAdminUpdateCreate },
 
 
 
@@ -134,8 +139,5 @@ export const RouteLink = [
   // { path: "/fawateer-approver", Component: ApproveRequest },
   // { path: "/approver-history", Component: ApproveHistory },
 
-
-
-
   
 ];
diff --git a/src/Services/subadmin.service.js b/src/Services/subadmin.service.js
new file mode 100644
index 0000000..1f85870
--- /dev/null
+++ b/src/Services/subadmin.service.js
@@ -0,0 +1,98 @@
+
+// Need to use the React-specific entry point to import createApi
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+import { baseQuery } from "./token.serivce";
+
+
+
+// Define a service using a base URL and expected endpoints
+export const sabAdminMaster = createApi({
+  reducerPath: "sabAdminMaster",
+  baseQuery: baseQuery,
+  tagTypes: ["getSubAdmin", "prePopulate"],
+  endpoints: (builder) => ({
+
+
+
+    // ======[Get All]=====
+
+    getSubAdminMaster: builder.query({
+      query: () => `/subadmin/admin/getAll`,
+      providesTags: ["getSubAdmin"],
+    }),
+
+    // // ========[ Create ]========
+
+    createSubAdmin: builder.mutation({
+      query: (data) => ({
+        url: `/subadmin/admin/create`,
+        method: "POST",
+        body: data,
+      }),
+      invalidatesTags: ["getSubAdmin","prePopulate"],
+    }),
+
+    // // ========[Update Sponser]========
+
+    updateSubAdmin: builder.mutation({
+      query: ({ data, id }) => ({
+        url: `/subadmin/admin/${id}`,
+        method: "PATCH",
+        body: data,
+      }),
+      invalidatesTags: ["getSubAdmin"],
+    }),
+
+    getSubAdminById: builder.query({
+      query: (id) => `/subadmin/admin/${id}`,
+    }),
+
+    // // ========[Toggle Status]========
+
+    toggleStatus: builder.mutation({
+      query: (id, data) => ({
+        url: `/subadmin/admin/toggle-role/${id}`,
+        method: "PATCH",
+        body: data,
+      }),
+      invalidatesTags: ["getSubAdmin"],
+    }),
+
+    // // ========[Get Active]========
+
+    // getActiveSponserMaster: builder.query({
+    //   query: () => `/sponsor/admin/active`,
+    // }),
+
+    // getSponserMasterActive: builder.query({
+    //   query: () => "/sponsor/admin/active",
+    // }),
+
+    // // ======[Get ID]=====
+
+    // getSponserById: builder.query({
+    //   query: (id) => `/sponsor/admin/${id}`,
+    // }),
+
+    // // ========[Update Sponser]========
+
+    // updateSponser: builder.mutation({
+    //   query: ({ data, id }) => ({
+    //     url: `/sponsor/admin/${id}`,
+    //     method: "PATCH",
+    //     body: data,
+    //   }),
+    //   invalidatesTags: ["getSponser"],
+    // }),
+
+  }),
+});
+
+// Export hooks for usage in functional components
+export const {
+   useGetSubAdminMasterQuery,
+   useCreateSubAdminMutation,
+   useUpdateSubAdminMutation,
+   useGetSubAdminByIdQuery,
+   useToggleStatusMutation
+} = sabAdminMaster;
diff --git a/src/Store/Store.js b/src/Store/Store.js
index 95a0203..e2cdb06 100644
--- a/src/Store/Store.js
+++ b/src/Store/Store.js
@@ -17,6 +17,7 @@ import { deleteRequest } from "../Services/delete.request.service";
 import { banInvestorDetails } from "../Services/ban.investor.service";
 import { fawateerRequest } from "../Services/fawateer.request.service";
 import { fawateerMaker } from "../Services/fawateer.maker.service";
+import { sabAdminMaster } from "../Services/subadmin.service";
 
 export const store = configureStore({
   reducer: {
@@ -35,6 +36,7 @@ export const store = configureStore({
     [banInvestorDetails.reducerPath]: banInvestorDetails.reducer,
     [fawateerRequest.reducerPath]: fawateerRequest.reducer,
     [fawateerMaker.reducerPath]: fawateerMaker.reducer,
+    [sabAdminMaster.reducerPath]: sabAdminMaster.reducer,
 
     // Add other reducers as needed
   },
@@ -59,7 +61,7 @@ export const store = configureStore({
       banInvestorDetails.middleware,
       fawateerRequest.middleware,
       fawateerMaker.middleware,
-
+      sabAdminMaster.middleware,
     ),
 });
 
-- 
2.34.1


From 9d4d5301e508bed9a9a59ae071fc60b4dbae6f1f Mon Sep 17 00:00:00 2001
From: "Siddhesh.More" <siddhesh.more@wdimails.com>
Date: Fri, 6 Dec 2024 16:09:36 +0530
Subject: [PATCH 29/49] update

---
 src/Constants/Constants.js    | 17 ++++++++++++++++-
 src/Services/token.serivce.js |  3 ++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/Constants/Constants.js b/src/Constants/Constants.js
index aaf5bd7..da74880 100644
--- a/src/Constants/Constants.js
+++ b/src/Constants/Constants.js
@@ -1,6 +1,7 @@
 
 import dns from "node:dns"
 import * as XLSX from 'xlsx';
+import CryptoJS from "crypto-js";
 
 
 export const generateSerialNumber = (index, currentPage, pageSize) => {
@@ -218,4 +219,18 @@ export function formatDateToYYYYMMDD(dateString) {
 
   // Combine the formatted parts
   return `${year}-${month}-${day}`;
-}
\ No newline at end of file
+}
+
+
+// Encrypt a string
+export const encryptString = (text) => {
+  const ciphertext = CryptoJS.AES.encrypt(text, import.meta.env.VITE_ROLE_ENCRYPTION_KEY).toString();
+  return ciphertext;
+};
+
+// Decrypt a string
+export const decryptString = (ciphertext) => {
+  const bytes = CryptoJS.AES.decrypt(ciphertext, import.meta.env.VITE_ROLE_ENCRYPTION_KEY);
+  const originalText = bytes.toString(CryptoJS.enc.Utf8);
+  return originalText;
+};
\ No newline at end of file
diff --git a/src/Services/token.serivce.js b/src/Services/token.serivce.js
index 639fdf8..1b2b827 100644
--- a/src/Services/token.serivce.js
+++ b/src/Services/token.serivce.js
@@ -1,4 +1,5 @@
 import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+import { encryptString } from '../Constants/Constants'
 
 // Define a base query function with RTK Query
 // export const baseQuery = fetchBaseQuery({
@@ -100,7 +101,7 @@ export const apiSlice = createApi({
           localStorage.setItem("refreshToken", data?.data?.refresh?.token);
           // localStorage.setItem('refreshTokenExp', data?.data?.refresh?.expires);
           localStorage.setItem("accessTokenExp", data?.data?.access?.expires);
-          localStorage.setItem("role", data?.data?.role);
+          localStorage.setItem("role", encryptString(data?.data?.role));
         } catch (error) {
           console.error("Login failed:", error);
         }
-- 
2.34.1


From 2c8965c16a424133636d5777d9ad656520e1ce00 Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Fri, 6 Dec 2024 16:11:18 +0530
Subject: [PATCH 30/49] working chenge password

---
 src/Pages/ChangePassword.jsx                  | 139 ++++++++++++------
 .../CreateIO/IOCashDetails/IOCashDetails.jsx  |   2 +-
 .../CreateIO/IOCashDetails/Pending.jsx        |   4 +-
 .../CreateIO/IONAVDetails/IONAVDetails.jsx    |   2 +-
 .../CreateIO/IONAVDetails/Pending.jsx         |   2 +-
 .../CreateIO/IOTransaction/Pending.jsx        |   2 +-
 .../IOTransaction/ViewAmountInvested.jsx      |   2 +-
 .../CreateIO/IOTransaction/ViewCancel.jsx     |   2 +-
 .../ViewDistributionInvestor.jsx              |   2 +-
 .../CreateIO/IOTransaction/ViewExit.jsx       |   2 +-
 .../IO_Management/ViewIO/ViewIOdataHeader.jsx |   2 +-
 src/Pages/SubAdmin/SubAdmin.jsx               |  18 ++-
 src/Pages/SubAdmin/SubAdminUpdateCreate.jsx   |   5 +-
 src/Services/subadmin.service.js              |   2 +-
 14 files changed, 119 insertions(+), 67 deletions(-)

diff --git a/src/Pages/ChangePassword.jsx b/src/Pages/ChangePassword.jsx
index 84624c2..69ac7dd 100644
--- a/src/Pages/ChangePassword.jsx
+++ b/src/Pages/ChangePassword.jsx
@@ -5,6 +5,8 @@ import {
   FormErrorMessage,
   FormLabel,
   Input,
+  InputGroup,
+  InputRightElement,
   Modal,
   ModalBody,
   ModalCloseButton,
@@ -49,10 +51,9 @@ const ChangePassword = ({
   const [isLoading, setIsLoading] = useState(false);
   const [alert, setAlert] = useState(false);
   const toast = useToast();
-
-  const [showPassword, setShowPassword] = useState(false);
-  const [subject, setSubject] = useState("");
-  const togglePasswordVisibility = () => setShowPassword(!showPassword);
+  const [showCurrentPassword, setShowCurrentPassword] = useState(false);
+  const [showNewPassword, setShowNewPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
   // ======================[ Cotext Api ]
   const { IODetails } = useContext(GlobalStateContext);
   const found = data?.find((item) => item?.id === actionId);
@@ -72,29 +73,29 @@ const ChangePassword = ({
     resolver: yupResolver(ioNav),
   });
 
-//   const onSubmit = async (data) => {
-//     setIsLoading(true);
+  //   const onSubmit = async (data) => {
+  //     setIsLoading(true);
 
-//     try {
-//       const res = await addNavDetails({ data, id });
-//       if (res?.data?.statusCode === 201) {
-//         setIsLoading(false);
-//         toast({
-//           render: () => <ToastBox message={res?.data?.message} />,
-//         });
-//         handleClose();
-//       } else if (res?.error?.status === 400) {
-//         toast({
-//           render: () => (
-//             <ToastBox message={res?.error?.data?.message} status={"error"} />
-//           ),
-//         });
-//         handleClose();
-//       }
-//     } catch (error) {
-//       console.log(error);
-//     }
-//   };
+  //     try {
+  //       const res = await addNavDetails({ data, id });
+  //       if (res?.data?.statusCode === 201) {
+  //         setIsLoading(false);
+  //         toast({
+  //           render: () => <ToastBox message={res?.data?.message} />,
+  //         });
+  //         handleClose();
+  //       } else if (res?.error?.status === 400) {
+  //         toast({
+  //           render: () => (
+  //             <ToastBox message={res?.error?.data?.message} status={"error"} />
+  //           ),
+  //         });
+  //         handleClose();
+  //       }
+  //     } catch (error) {
+  //       console.log(error);
+  //     }
+  //   };
 
   const handleSave = () => {
     handleSubmit(onSubmit)();
@@ -105,7 +106,6 @@ const ChangePassword = ({
     setAlert(false);
     onClose();
   };
-  
 
   return (
     <>
@@ -122,40 +122,93 @@ const ChangePassword = ({
           <ModalBody pb={6}>
             <Stack spacing={4}>
               <FormControl isInvalid={errors.ChangePassword} isRequired>
-                <FormLabel fontSize={"sm"} mb={1} fontWeight={500}>Current Password</FormLabel>
-                <Input
-                    size={"sm"}
+                <FormLabel fontSize={"sm"} mb={1} fontWeight={500}>
+                  Current Password
+                </FormLabel>
+                <InputGroup size="sm">
+                  <Input
+                    size={"md"}
+                    fontSize={"sm"}
                     onChange={(e) => setSubject(e.target.value)}
                     focusBorderColor="forestGreen.300"
                     rounded={4}
-                    type={showPassword ? "text" : "password"}
-                />
+                    type={showCurrentPassword ? "text" : "password"} // Toggles between "text" and "password" based on the `show` state
+                  />
+                  <InputRightElement width="4.5rem">
+                    <Button
+                      mt={2}
+                      h="1.5rem"
+                      size="xs"
+                      fontSize={"xs"}
+                      color={"green.800"}
+                      onClick={() => setShowCurrentPassword((prev) => !prev)}
+                    >
+                      {showCurrentPassword ? "Hide" : "Show"}
+                    </Button>
+                  </InputRightElement>
+                </InputGroup>
                 <FormErrorMessage fontSize={"xs"} fontWeight={500}>
                   {errors.ChangePassword?.message}
                 </FormErrorMessage>
               </FormControl>
+
               <FormControl isInvalid={errors.newPassword} isRequired>
-                <FormLabel fontSize={"sm"} mb={1}>New Password</FormLabel>
-                <Input
-                    size={"sm"}
+                <FormLabel fontSize={"sm"} mb={1}>
+                  New Password
+                </FormLabel>
+                <InputGroup size="sm">
+                  <Input
+                    fontSize={"sm"}
+                    size={"md"}
                     onChange={(e) => setSubject(e.target.value)}
                     focusBorderColor="forestGreen.300"
                     rounded={4}
-                    type="text"
-                />
+                    type={showNewPassword ? "text" : "password"} // Toggles between "text" and "password" based on the `show` state
+                  />
+                  <InputRightElement width="4.5rem">
+                    <Button
+                      mt={2}
+                      h="1.5rem"
+                      size="xs"
+                      fontSize={"xs"}
+                      color={"green.800"}
+                      onClick={() => setShowNewPassword((prev) => !prev)}
+                    >
+                      {showNewPassword ? "Hide" : "Show"}
+                    </Button>
+                  </InputRightElement>
+                </InputGroup>
                 <FormErrorMessage fontSize={"xs"} fontWeight={500}>
                   {errors.newPassword?.message}
                 </FormErrorMessage>
               </FormControl>
+
               <FormControl isInvalid={errors.conformPassword} isRequired>
-                <FormLabel fontSize={"sm"} mb={1}>Re-Type New Password</FormLabel>
-                <Input
-                    size={"sm"}
+                <FormLabel fontSize={"sm"} mb={1}>
+                  Re-Type New Password
+                </FormLabel>
+                <InputGroup size="sm">
+                  <Input
+                    fontSize={"sm"}
+                    size={"md"}
                     onChange={(e) => setSubject(e.target.value)}
                     focusBorderColor="forestGreen.300"
                     rounded={4}
-                    type="text"
-                />
+                    type={showConfirmPassword ? "text" : "password"} // Toggles between "text" and "password" based on the `show` state
+                  />
+                  <InputRightElement width="4.5rem">
+                    <Button
+                      mt={2}
+                      h="1.5rem"
+                      size="xs"
+                      fontSize={"xs"}
+                      color={"green.800"}
+                      onClick={() => setShowConfirmPassword((prev) => !prev)}
+                    >
+                      {showConfirmPassword ? "Hide" : "Show"}
+                    </Button>
+                  </InputRightElement>
+                </InputGroup>
                 <FormErrorMessage fontSize={"xs"} fontWeight={500}>
                   {errors.conformPassword?.message}
                 </FormErrorMessage>
@@ -165,7 +218,7 @@ const ChangePassword = ({
 
           <DrawerFooter mb={5}>
             <Button
-            //   variant="outline"
+              //   variant="outline"
               bg={"#e0ebeb"}
               rounded={"sm"}
               size={"sm"}
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx
index a66e6af..521bab3 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx
@@ -105,7 +105,7 @@ const IOCashDetails = () => {
             </Tab>
           </TabList>
           {IODetails?.isInvestedAmount
-            ? localStorage?.getItem("role") === "Maker" && (
+            ? localStorage?.getItem("role") === import.meta.env.VITE_VITE_MAKER && (
                 <Button
                   onClick={handleAdd}
                   leftIcon={<AddIcon />}
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
index b025968..33d0838 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
@@ -104,7 +104,7 @@ const Pending = () => {
     "Comments",
     "Update By",
     "Update On",
-    ...(localStorage?.getItem('role')!=="Maker" ? ["Actions"] : []),
+    ...(localStorage?.getItem('role')!==import.meta.env.VITE_VITE_MAKER ? ["Actions"] : []),
     
   ];
 
@@ -166,7 +166,7 @@ const Pending = () => {
     ),
     Actions: (
       <Box display={"flex"} justifyContent={"center"}>
-        {localStorage?.getItem("role") !== "Maker"  ? <Box>
+        {localStorage?.getItem("role") !== import.meta.env.VITE_VITE_MAKER  ? <Box>
           {index===0&&<Box display={"flex"} justifyContent={"center"} gap={2}>
         <Tooltip
           rounded={"sm"}
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/IONAVDetails.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/IONAVDetails.jsx
index 5aca373..49b1319 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/IONAVDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/IONAVDetails.jsx
@@ -152,7 +152,7 @@ const IONAVDetails = () => {
             </Tab>
           </TabList>
           {IODetails?.isInvestedAmount
-            ? localStorage?.getItem("role") === "Maker" && (
+            ? localStorage?.getItem("role") === import.meta.env.VITE_VITE_MAKER && (
                 <Button
                   onClick={handleAdd}
                   leftIcon={<AddIcon />}
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx
index 928532a..2ea308f 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx
@@ -90,7 +90,7 @@ const Pending = () => {
     "Investment Closed",
     "Comments",
     "Updated By",
-    ...(localStorage?.getItem("role") !== "Maker" ? ["Status"] : []),
+    ...(localStorage?.getItem("role") !== import.meta.env.VITE_VITE_MAKER ? ["Status"] : []),
   ];
 
   const extractedArray = filteredData?.map((item, index) => ({
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
index a8db39d..3b85cc4 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
@@ -195,7 +195,7 @@ const Pending = () => {
               }
             }}
           >
-            {localStorage?.getItem("role") === "Maker" ?  <ViewIcon me={"4px"} /> : null} {localStorage?.getItem("role") === "Maker" ?  "View" : "Approve / Reject"}
+            {localStorage?.getItem("role") === import.meta.env.VITE_VITE_MAKER ?  <ViewIcon me={"4px"} /> : null} {localStorage?.getItem("role") === import.meta.env.VITE_VITE_MAKER ?  "View" : "Approve / Reject"}
           </Button>
         </Box>
       ),
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx
index 9af6d74..18aba78 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx
@@ -236,7 +236,7 @@ const ViewAmountInvested = ({ isOpen, onClose, id: investorId }) => {
               />
             </FormControl>
 
-            {localStorage?.getItem("role") !== "Maker" && <ModalFooter>
+            {localStorage?.getItem("role") !== import.meta.env.VITE_VITE_MAKER && <ModalFooter>
               <Box display={"flex"} justifyContent={"center"} gap={2}>
                 <Button
                   rounded={"sm"}
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx
index b4ee8ca..8b49537 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx
@@ -311,7 +311,7 @@ import RequestRejectModal from "./RequestRejectModal";
               data={extractedArray}
             />
           </ModalBody>
-          {localStorage?.getItem("role") !== "Maker" && <ModalFooter pt={0}>
+          {localStorage?.getItem("role") !== import.meta.env.VITE_VITE_MAKER && <ModalFooter pt={0}>
             <Box display={"flex"} justifyContent={"center"} gap={2}>
                 <Button
                   rounded={"sm"}
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx
index b0ec1d3..38d4d69 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx
@@ -218,7 +218,7 @@ const ViewDistributionInvestor = ({ isOpen, onClose,id:exitId }) => {
           />
         </ModalBody>
         {/* ...(localStorage?.getItem("role") !== "Maker" ? ["Status"] : []), */}
-        {localStorage?.getItem("role") !== "Maker" &&<ModalFooter pt={0}>
+        {localStorage?.getItem("role") !== import.meta.env.VITE_VITE_MAKER &&<ModalFooter pt={0}>
           <Box display={"flex"} justifyContent={"center"} gap={2}>
             <Button
               rounded={"sm"}
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx
index a14168a..fc43da9 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx
@@ -273,7 +273,7 @@ import RequestRejectModal from "./RequestRejectModal";
             />
             {/* ) } */}
           </ModalBody>
-          {localStorage?.getItem("role") !== "Maker" && <ModalFooter pt={0}>
+          {localStorage?.getItem("role") !== import.meta.env.VITE_VITE_MAKER && <ModalFooter pt={0}>
             <Box display={"flex"} justifyContent={"center"} gap={2}>
                 <Button
                   rounded={"sm"}
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
index 9772dd0..753bc8f 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
@@ -532,7 +532,7 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
         alignItems={"start"}
         height={"95px"}
       >
-        {localStorage?.getItem("role") === "Maker" && <Menu>
+        {localStorage?.getItem("role") === import.meta.env.VITE_VITE_MAKER && <Menu>
           <MenuButton 
             className="link p-1 rounded-1 "
             bg={"#fff"}
diff --git a/src/Pages/SubAdmin/SubAdmin.jsx b/src/Pages/SubAdmin/SubAdmin.jsx
index 4f209bc..6a9c6d9 100644
--- a/src/Pages/SubAdmin/SubAdmin.jsx
+++ b/src/Pages/SubAdmin/SubAdmin.jsx
@@ -93,10 +93,11 @@ const SubAdmin = () => {
   const handleToggleStatus = async (isMaker, id) => {
     console.log("hit");
     const data = {
-      role_xid: isMaker ? 1 : 2,
+      role_xid: isMaker ? "2" : "1",
     };
+    console.log("=======================",data)
     try {
-      const res = await toggleStatus(id, data).unwrap();
+      const res = await toggleStatus({id, data});
       if (res?.error) {
         toast({
           render: () => (
@@ -179,24 +180,25 @@ const SubAdmin = () => {
       </Box>
     ),
     Role: (
-      <Box minW={24} isTruncated={true}>
+      <Box  isTruncated={true} >
         <Badge
           py={"2px"}
-          px={"5px"}
           me={2}
-          bg={item?.role[0]?.role === "Maker" ? "#00ffcc" : "#b3ff99"}
+          fontWeight={600}
+          bg={item?.role[0]?.role === import.meta.env.VITE_VITE_MAKER ? "#00ffcc" : "#b3ff99"}
+          px={item?.role[0]?.role === import.meta.env.VITE_VITE_MAKER ? "12px"  : "5px"}
         >
           {item?.role[0]?.role}
         </Badge>
         <Switch
           onChange={() =>
-            handleToggleStatus(item?.role[0]?.role === "Maker", item?.id)
+            handleToggleStatus(item?.role[0]?.role === import.meta.env.VITE_VITE_MAKER, item?.id)
           }
-          isChecked={item?.role[0]?.role === "Maker"}
+          isChecked={item?.role[0]?.role === import.meta.env.VITE_VITE_MAKER}
           // colorScheme={item?.role[0]?.role === "Maker" ? "green" : "teal"}
           sx={{
             ".chakra-switch__track": {
-              bg: item?.role[0]?.role === "Maker" ? "#00ffcc" : "#b3ff99", // "Off" state color
+              bg: item?.role[0]?.role === import.meta.env.VITE_VITE_MAKER ? "#00ffcc" : "#b3ff99", // "Off" state color
             },
           }}
         />
diff --git a/src/Pages/SubAdmin/SubAdminUpdateCreate.jsx b/src/Pages/SubAdmin/SubAdminUpdateCreate.jsx
index 13feac2..1360fdd 100644
--- a/src/Pages/SubAdmin/SubAdminUpdateCreate.jsx
+++ b/src/Pages/SubAdmin/SubAdminUpdateCreate.jsx
@@ -94,7 +94,7 @@ const SubAdminUpdateCreate = () => {
         lastName: subAdminByIdData?.data?.lastName,
         emailAddress: subAdminByIdData?.data?.emailAddress,
       });
-      setIsSwitchOn(subAdminByIdData?.data?.role[0]?.role==="Maker");
+      setIsSwitchOn(subAdminByIdData?.data?.role[0]?.role===import.meta.env.VITE_VITE_MAKER);
       console.log(subAdminByIdData?.data?.role);
     }
   }, [subAdminByIdData, reset]);
@@ -206,8 +206,6 @@ const SubAdminUpdateCreate = () => {
       type: "text",
       isRequired: true,
       section: "",
-      arabic: true,
-      right: true,
       maxLength: 55,
       helperText: `Maximum length should be 55 characters. You have entered ${
         watch()?.lastName?.length || 0
@@ -245,7 +243,6 @@ const SubAdminUpdateCreate = () => {
       type: "text",
       isRequired: true,
       section: "",
-      arabic: true,
       maxLength: 55,
       helperText: `Maximum length should be 55 characters. You have entered ${
         watch()?.lastName?.length || 0
diff --git a/src/Services/subadmin.service.js b/src/Services/subadmin.service.js
index 1f85870..d6103b9 100644
--- a/src/Services/subadmin.service.js
+++ b/src/Services/subadmin.service.js
@@ -50,7 +50,7 @@ export const sabAdminMaster = createApi({
     // // ========[Toggle Status]========
 
     toggleStatus: builder.mutation({
-      query: (id, data) => ({
+      query: ({id, data}) => ({
         url: `/subadmin/admin/toggle-role/${id}`,
         method: "PATCH",
         body: data,
-- 
2.34.1


From fed51256609ddd3bdffcc73f531e32425b9c0477 Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Fri, 6 Dec 2024 20:04:20 +0530
Subject: [PATCH 31/49] working create password

---
 src/Pages/ChangePassword.jsx                  | 47 ++++++++++---------
 .../CreateIO/IOCashDetails/IOCashDetails.jsx  |  3 +-
 .../CreateIO/IOCashDetails/Pending.jsx        |  5 +-
 .../CreateIO/IONAVDetails/IONAVDetails.jsx    |  3 +-
 .../CreateIO/IONAVDetails/Pending.jsx         |  3 +-
 .../CreateIO/IOTransaction/Pending.jsx        |  3 +-
 .../IOTransaction/ViewAmountInvested.jsx      |  3 +-
 .../CreateIO/IOTransaction/ViewCancel.jsx     |  3 +-
 .../ViewDistributionInvestor.jsx              |  3 +-
 .../CreateIO/IOTransaction/ViewExit.jsx       |  3 +-
 .../IO_Management/ViewIO/ViewIOdataHeader.jsx |  3 +-
 src/Pages/SubAdmin/SubAdmin.jsx               | 10 ++--
 src/Pages/SubAdmin/SubAdminUpdateCreate.jsx   |  3 +-
 src/Services/change.password.service.js       | 33 +++++++++++++
 src/Store/Store.js                            |  3 ++
 15 files changed, 88 insertions(+), 40 deletions(-)
 create mode 100644 src/Services/change.password.service.js

diff --git a/src/Pages/ChangePassword.jsx b/src/Pages/ChangePassword.jsx
index 69ac7dd..d33954b 100644
--- a/src/Pages/ChangePassword.jsx
+++ b/src/Pages/ChangePassword.jsx
@@ -26,6 +26,7 @@ import CustomAlertDialog from "../Components/CustomAlertDialog";
 import ToastBox from "../Components/ToastBox";
 import GlobalStateContext from "../Contexts/GlobalStateContext";
 import CurrencyInput from "../Components/CurrencyInput";
+import { useUpdatePasswordMutation } from "../Services/change.password.service";
 
 const ioNav = yup.object().shape({
   transactionDate: yup.string().required("Date is required"),
@@ -58,7 +59,7 @@ const ChangePassword = ({
   const { IODetails } = useContext(GlobalStateContext);
   const found = data?.find((item) => item?.id === actionId);
 
-  // const [addNavDetails] = useAddNavDetailsMutation()
+  const [updatePassword] = useUpdatePasswordMutation()
   // const {
   //   data
   // } = useGetArtifactsQuery(id)
@@ -73,29 +74,29 @@ const ChangePassword = ({
     resolver: yupResolver(ioNav),
   });
 
-  //   const onSubmit = async (data) => {
-  //     setIsLoading(true);
+    const onSubmit = async (data) => {
+      setIsLoading(true);
 
-  //     try {
-  //       const res = await addNavDetails({ data, id });
-  //       if (res?.data?.statusCode === 201) {
-  //         setIsLoading(false);
-  //         toast({
-  //           render: () => <ToastBox message={res?.data?.message} />,
-  //         });
-  //         handleClose();
-  //       } else if (res?.error?.status === 400) {
-  //         toast({
-  //           render: () => (
-  //             <ToastBox message={res?.error?.data?.message} status={"error"} />
-  //           ),
-  //         });
-  //         handleClose();
-  //       }
-  //     } catch (error) {
-  //       console.log(error);
-  //     }
-  //   };
+      try {
+        const res = await updatePassword({ data});
+        if (res?.data?.statusCode === 201) {
+          setIsLoading(false);
+          toast({
+            render: () => <ToastBox message={res?.data?.message} />,
+          });
+          handleClose();
+        } else if (res?.error?.status === 400) {
+          toast({
+            render: () => (
+              <ToastBox message={res?.error?.data?.message} status={"error"} />
+            ),
+          });
+          handleClose();
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    };
 
   const handleSave = () => {
     handleSubmit(onSubmit)();
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx
index 521bab3..255c726 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx
@@ -20,6 +20,7 @@ import AddCaseDetails from "./AddCaseDetails";
 import { useUpdateIOCaseMutation } from "../../../../Services/io.service";
 import ToastBox from "../../../../Components/ToastBox";
 import { useParams } from "react-router-dom";
+import { encryptString } from "../../../../Constants/Constants";
 
 const IOCashDetails = () => {
   const params = useParams();
@@ -105,7 +106,7 @@ const IOCashDetails = () => {
             </Tab>
           </TabList>
           {IODetails?.isInvestedAmount
-            ? localStorage?.getItem("role") === import.meta.env.VITE_VITE_MAKER && (
+            ? localStorage?.getItem("role") === encryptString(import.meta.env.VITE_VITE_MAKER) && (
                 <Button
                   onClick={handleAdd}
                   leftIcon={<AddIcon />}
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
index 33d0838..06bc1d9 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
@@ -38,6 +38,7 @@ import { useUpdateIOCaseMutation } from "../../../../Services/io.service";
 import RequestApproveModal from "./RequestApproveModal";
 import RequestRejectModal from "./RequestRejectModal";
 import AddCaseDetails from "./AddCaseDetails";
+import { encryptString } from "../../../../Constants/Constants";
 
 const formatDate = (date) => new Date(date).toLocaleDateString();
 
@@ -104,7 +105,7 @@ const Pending = () => {
     "Comments",
     "Update By",
     "Update On",
-    ...(localStorage?.getItem('role')!==import.meta.env.VITE_VITE_MAKER ? ["Actions"] : []),
+    ...(localStorage?.getItem('role')!==encryptString(import.meta.env.VITE_VITE_MAKER) ? ["Actions"] : []),
     
   ];
 
@@ -166,7 +167,7 @@ const Pending = () => {
     ),
     Actions: (
       <Box display={"flex"} justifyContent={"center"}>
-        {localStorage?.getItem("role") !== import.meta.env.VITE_VITE_MAKER  ? <Box>
+        {localStorage?.getItem("role") !== encryptString(import.meta.env.VITE_VITE_MAKER)  ? <Box>
           {index===0&&<Box display={"flex"} justifyContent={"center"} gap={2}>
         <Tooltip
           rounded={"sm"}
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/IONAVDetails.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/IONAVDetails.jsx
index 49b1319..d9fee12 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/IONAVDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/IONAVDetails.jsx
@@ -75,6 +75,7 @@ import ToastBox from "../../../../Components/ToastBox";
 import { useParams } from "react-router-dom";
 import AddNavDetails from "./AddNavDetails";
 import { useUpdateIOCaseMutation } from "../../../../Services/io.service";
+import { encryptString } from "../../../../Constants/Constants";
 
 const IONAVDetails = () => {
   const params = useParams();
@@ -152,7 +153,7 @@ const IONAVDetails = () => {
             </Tab>
           </TabList>
           {IODetails?.isInvestedAmount
-            ? localStorage?.getItem("role") === import.meta.env.VITE_VITE_MAKER && (
+            ? localStorage?.getItem("role") === encryptString(import.meta.env.VITE_VITE_MAKER) && (
                 <Button
                   onClick={handleAdd}
                   leftIcon={<AddIcon />}
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx
index 2ea308f..a249bce 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx
@@ -22,6 +22,7 @@ import ToastBox from "../../../../Components/ToastBox";
 import AddNavDetails from "./AddNavDetails";
 import RequestApproveModal from "./RequestApproveModal";
 import RequestRejectModal from "./RequestRejectModal";
+import { encryptString } from "../../../../Constants/Constants";
 
 const formatDate = (date) => new Date(date).toLocaleDateString();
 
@@ -90,7 +91,7 @@ const Pending = () => {
     "Investment Closed",
     "Comments",
     "Updated By",
-    ...(localStorage?.getItem("role") !== import.meta.env.VITE_VITE_MAKER ? ["Status"] : []),
+    ...(localStorage?.getItem("role") !== encryptString(import.meta.env.VITE_VITE_MAKER) ? ["Status"] : []),
   ];
 
   const extractedArray = filteredData?.map((item, index) => ({
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
index 3b85cc4..d7d181a 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
@@ -27,6 +27,7 @@ import ViewAmountInvested from "./ViewAmountInvested";
 import ViewDistributionInvestor from "./ViewDistributionInvestor";
 import ViewExit from "./ViewExit";
 import ViewCancel from "./ViewCancel";
+import { encryptString } from "../../../../Constants/Constants";
 
 const formatDate = (date) => new Date(date).toLocaleDateString();
 
@@ -195,7 +196,7 @@ const Pending = () => {
               }
             }}
           >
-            {localStorage?.getItem("role") === import.meta.env.VITE_VITE_MAKER ?  <ViewIcon me={"4px"} /> : null} {localStorage?.getItem("role") === import.meta.env.VITE_VITE_MAKER ?  "View" : "Approve / Reject"}
+            {localStorage?.getItem("role") === encryptString(import.meta.env.VITE_VITE_MAKER) ?  <ViewIcon me={"4px"} /> : null} {localStorage?.getItem("role") === encryptString(import.meta.env.VITE_VITE_MAKER) ?  "View" : "Approve / Reject"}
           </Button>
         </Box>
       ),
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx
index 18aba78..6c8cdbc 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx
@@ -27,6 +27,7 @@ import CurrencyInput from "../../../../Components/CurrencyInput";
 import RequestRejectModal from "./RequestRejectModal";
 import ApproveInvestedModal from "./ApproveInvestedModal";
 import { formatDate } from "../../../Master/Sponser/Sponsers";
+import { encryptString } from "../../../../Constants/Constants";
 
 // Validation schema
 const validationSchema = yup.object().shape({
@@ -236,7 +237,7 @@ const ViewAmountInvested = ({ isOpen, onClose, id: investorId }) => {
               />
             </FormControl>
 
-            {localStorage?.getItem("role") !== import.meta.env.VITE_VITE_MAKER && <ModalFooter>
+            {localStorage?.getItem("role") !== encryptString(import.meta.env.VITE_VITE_MAKER) && <ModalFooter>
               <Box display={"flex"} justifyContent={"center"} gap={2}>
                 <Button
                   rounded={"sm"}
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx
index 8b49537..a829be5 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx
@@ -35,6 +35,7 @@ import {
   import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
 import ApprovedCancelTransaction from "./ApprovedCancelTransaction";
 import RequestRejectModal from "./RequestRejectModal";
+import { encryptString } from "../../../../Constants/Constants";
   
   const ViewCancel = ({ isOpen, onClose,id:cancleId }) => {
     const params = useParams();
@@ -311,7 +312,7 @@ import RequestRejectModal from "./RequestRejectModal";
               data={extractedArray}
             />
           </ModalBody>
-          {localStorage?.getItem("role") !== import.meta.env.VITE_VITE_MAKER && <ModalFooter pt={0}>
+          {localStorage?.getItem("role") !== encryptString(import.meta.env.VITE_VITE_MAKER) && <ModalFooter pt={0}>
             <Box display={"flex"} justifyContent={"center"} gap={2}>
                 <Button
                   rounded={"sm"}
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx
index 38d4d69..dddd11e 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx
@@ -23,6 +23,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
 import ApproveDistrubationModal from "./ApproveDistrubationModal";
 import RequestRejectModal from "./RequestRejectModal";
+import { encryptString } from "../../../../Constants/Constants";
 
 const ViewDistributionInvestor = ({ isOpen, onClose,id:exitId }) => {
   const params = useParams();
@@ -218,7 +219,7 @@ const ViewDistributionInvestor = ({ isOpen, onClose,id:exitId }) => {
           />
         </ModalBody>
         {/* ...(localStorage?.getItem("role") !== "Maker" ? ["Status"] : []), */}
-        {localStorage?.getItem("role") !== import.meta.env.VITE_VITE_MAKER &&<ModalFooter pt={0}>
+        {localStorage?.getItem("role") !== encryptString(import.meta.env.VITE_VITE_MAKER) &&<ModalFooter pt={0}>
           <Box display={"flex"} justifyContent={"center"} gap={2}>
             <Button
               rounded={"sm"}
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx
index fc43da9..4b217bf 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx
@@ -43,6 +43,7 @@ import {
   import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
 import ApprovedExit from "./ApprovedExit";
 import RequestRejectModal from "./RequestRejectModal";
+import { encryptString } from "../../../../Constants/Constants";
   
   const ViewExit = ({ isOpen, onClose ,id:investerId}) => {
     const params = useParams();
@@ -273,7 +274,7 @@ import RequestRejectModal from "./RequestRejectModal";
             />
             {/* ) } */}
           </ModalBody>
-          {localStorage?.getItem("role") !== import.meta.env.VITE_VITE_MAKER && <ModalFooter pt={0}>
+          {localStorage?.getItem("role") !== encryptString(import.meta.env.VITE_VITE_MAKER) && <ModalFooter pt={0}>
             <Box display={"flex"} justifyContent={"center"} gap={2}>
                 <Button
                   rounded={"sm"}
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
index 753bc8f..2f0fa4d 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
@@ -44,6 +44,7 @@ import { GrGallery } from "react-icons/gr";
 import Loader01 from "../../../Components/Loaders/Loader01";
 import { useUpdateTransactionMutation } from "../../../Services/io.service";
 import ToastBox from "../../../Components/ToastBox";
+import { encryptString } from "../../../Constants/Constants";
 // import { formatCurrency } from "../../../Components/CurrencyInput";
 // import { removeTrailingZeros } from "../../../Constants/Constants";
 
@@ -532,7 +533,7 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
         alignItems={"start"}
         height={"95px"}
       >
-        {localStorage?.getItem("role") === import.meta.env.VITE_VITE_MAKER && <Menu>
+        {localStorage?.getItem("role") === encryptString(import.meta.env.VITE_VITE_MAKER) && <Menu>
           <MenuButton 
             className="link p-1 rounded-1 "
             bg={"#fff"}
diff --git a/src/Pages/SubAdmin/SubAdmin.jsx b/src/Pages/SubAdmin/SubAdmin.jsx
index 6a9c6d9..ec77771 100644
--- a/src/Pages/SubAdmin/SubAdmin.jsx
+++ b/src/Pages/SubAdmin/SubAdmin.jsx
@@ -185,20 +185,20 @@ const SubAdmin = () => {
           py={"2px"}
           me={2}
           fontWeight={600}
-          bg={item?.role[0]?.role === import.meta.env.VITE_VITE_MAKER ? "#00ffcc" : "#b3ff99"}
-          px={item?.role[0]?.role === import.meta.env.VITE_VITE_MAKER ? "12px"  : "5px"}
+          bg={item?.role[0]?.role === "Maker" ? "#00ffcc" : "#b3ff99"}
+          px={item?.role[0]?.role === "Maker" ? "12px"  : "5px"}
         >
           {item?.role[0]?.role}
         </Badge>
         <Switch
           onChange={() =>
-            handleToggleStatus(item?.role[0]?.role === import.meta.env.VITE_VITE_MAKER, item?.id)
+            handleToggleStatus(item?.role[0]?.role === "Maker", item?.id)
           }
-          isChecked={item?.role[0]?.role === import.meta.env.VITE_VITE_MAKER}
+          isChecked={item?.role[0]?.role === "Maker"}
           // colorScheme={item?.role[0]?.role === "Maker" ? "green" : "teal"}
           sx={{
             ".chakra-switch__track": {
-              bg: item?.role[0]?.role === import.meta.env.VITE_VITE_MAKER ? "#00ffcc" : "#b3ff99", // "Off" state color
+              bg: item?.role[0]?.role === "Maker" ? "#00ffcc" : "#b3ff99", // "Off" state color
             },
           }}
         />
diff --git a/src/Pages/SubAdmin/SubAdminUpdateCreate.jsx b/src/Pages/SubAdmin/SubAdminUpdateCreate.jsx
index 1360fdd..948e78a 100644
--- a/src/Pages/SubAdmin/SubAdminUpdateCreate.jsx
+++ b/src/Pages/SubAdmin/SubAdminUpdateCreate.jsx
@@ -18,6 +18,7 @@ import {
   useUpdateSubAdminMutation,
 } from "../../Services/subadmin.service";
 import { useGetSponserByIdQuery } from "../../Services/io.service";
+import { encryptString } from "../../Constants/Constants";
 // ======================= [validation] =========================
 
 export const addSubAdmin = yup.object().shape({
@@ -94,7 +95,7 @@ const SubAdminUpdateCreate = () => {
         lastName: subAdminByIdData?.data?.lastName,
         emailAddress: subAdminByIdData?.data?.emailAddress,
       });
-      setIsSwitchOn(subAdminByIdData?.data?.role[0]?.role===import.meta.env.VITE_VITE_MAKER);
+      setIsSwitchOn(subAdminByIdData?.data?.role[0]?.role===encryptString(import.meta.env.VITE_VITE_MAKER));
       console.log(subAdminByIdData?.data?.role);
     }
   }, [subAdminByIdData, reset]);
diff --git a/src/Services/change.password.service.js b/src/Services/change.password.service.js
new file mode 100644
index 0000000..4c8adc3
--- /dev/null
+++ b/src/Services/change.password.service.js
@@ -0,0 +1,33 @@
+
+// Need to use the React-specific entry point to import createApi
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+import { baseQuery } from "./token.serivce";
+
+
+
+// Define a service using a base URL and expected endpoints
+export const changePasswordMake = createApi({
+  reducerPath: "changePassword",
+  baseQuery: baseQuery,
+  tagTypes: ["getPassword"],
+  endpoints: (builder) => ({
+
+
+    // // ========[ update ]========
+
+    updatePassword: builder.mutation({
+      query: (data) => ({
+        url: `/auth/admin/update-password`,
+        method: "POST",
+        body: data,
+      }),
+      invalidatesTags: ["getPassword"],
+    }),
+
+  }),
+});
+
+// Export hooks for usage in functional components
+export const {
+    useUpdatePasswordMutation
+} = changePasswordMake;
diff --git a/src/Store/Store.js b/src/Store/Store.js
index e2cdb06..42f2add 100644
--- a/src/Store/Store.js
+++ b/src/Store/Store.js
@@ -18,6 +18,7 @@ import { banInvestorDetails } from "../Services/ban.investor.service";
 import { fawateerRequest } from "../Services/fawateer.request.service";
 import { fawateerMaker } from "../Services/fawateer.maker.service";
 import { sabAdminMaster } from "../Services/subadmin.service";
+import { changePasswordMake } from "../Services/change.password.service";
 
 export const store = configureStore({
   reducer: {
@@ -37,6 +38,7 @@ export const store = configureStore({
     [fawateerRequest.reducerPath]: fawateerRequest.reducer,
     [fawateerMaker.reducerPath]: fawateerMaker.reducer,
     [sabAdminMaster.reducerPath]: sabAdminMaster.reducer,
+    [changePasswordMake.reducerPath]: changePasswordMake.reducer,
 
     // Add other reducers as needed
   },
@@ -62,6 +64,7 @@ export const store = configureStore({
       fawateerRequest.middleware,
       fawateerMaker.middleware,
       sabAdminMaster.middleware,
+      changePasswordMake.middleware,
     ),
 });
 
-- 
2.34.1


From 4ca28fd910f8c141994e2b3d391db344d94e9c91 Mon Sep 17 00:00:00 2001
From: Swapnil Bendal <84583651+Swapnil155@users.noreply.github.com>
Date: Fri, 6 Dec 2024 20:25:12 +0530
Subject: [PATCH 32/49] [untested] - code checkout in remote

---
 src/App.jsx                   |  4 +-
 src/Layout/DefaultLayout.jsx  | 18 ++++----
 src/Services/token.serivce.js | 82 ++++++++++-------------------------
 3 files changed, 34 insertions(+), 70 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 19d0e53..30de782 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -63,8 +63,8 @@ const App = () => {
           path="/*"
           element={
             // isOnline ? (
-              // isAuthenticate || isAuthenticatedInCookie  === "true" ? (
-                localStorage.getItem('accessToken') && localStorage.getItem('refreshToken')  ? (
+              isAuthenticate || isAuthenticatedInCookie  === "true" ? (
+                // localStorage.getItem('accessToken') && localStorage.getItem('refreshToken')  ? (
                 // true  ? (
                 <DefaultLayout isOnline={isOnline} />
               ) : (
diff --git a/src/Layout/DefaultLayout.jsx b/src/Layout/DefaultLayout.jsx
index 7afc70a..69d8659 100644
--- a/src/Layout/DefaultLayout.jsx
+++ b/src/Layout/DefaultLayout.jsx
@@ -104,15 +104,15 @@ const DashboardLayout = ({ isOnline }) => {
 
   const { data, refetch } = useProfileQuery();
 
-  useEffect(() => {
-    if (
-      !localStorage.getItem("accessToken") &&
-      !localStorage.getItem("refreshToken")
-    ) {
-      logOutHandler();
-      return navigate("/login");
-    }
-  }, []);
+  // useEffect(() => {
+  //   if (
+  //     !localStorage.getItem("accessToken") &&
+  //     !localStorage.getItem("refreshToken")
+  //   ) {
+  //     logOutHandler();
+  //     return navigate("/login");
+  //   }
+  // }, []);
 
   useEffect(() => {
     const savedIndex = localStorage.getItem("openAccordionIndex");
diff --git a/src/Services/token.serivce.js b/src/Services/token.serivce.js
index 639fdf8..2cfd56f 100644
--- a/src/Services/token.serivce.js
+++ b/src/Services/token.serivce.js
@@ -1,83 +1,55 @@
 import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
 
-// Define a base query function with RTK Query
-// export const baseQuery = fetchBaseQuery({
-//   baseUrl: 'https://sprint4.tanami.betadelivery.com/api/v1',
-//   prepareHeaders: (headers) => {
-//     const token = localStorage.getItem('accessToken');
-//     if (token) {
-//       headers.set('x-auth-token', `${token}`);
-//     }
-//     return headers;
-//   },
-// });
-
 // Define a base query function with token refresh logic
 export const baseQuery = async (args, api, extraOptions) => {
-  let result = await fetchBaseQuery({
+  let { data, error, } = await fetchBaseQuery({
     baseUrl: import.meta.env.VITE_BAS_URL,
+    credentials: 'include',
     prepareHeaders: (headers) => {
-      const token = localStorage.getItem("accessToken");
-      if (token) {
-        headers.set("x-auth-token", token);
-      }
+      headers.set('Content-Type', 'application/json',);
       return headers;
     },
   })(args, api, extraOptions);
 
-  if (result.error && result.error.status === 403) {
-    // Handle token refresh
-    const refreshToken = localStorage.getItem("refreshToken");
-    console.log(refreshToken);
-    if (refreshToken) {
+  console.log(data);
+  
+
+  if (error) {
+    if (error.status === 403) {
       try {
-        const refreshResult = await fetchBaseQuery({
+        const { data } = await fetchBaseQuery({
           baseUrl: import.meta.env.VITE_BAS_URL,
         })(
           {
             url: "/auth/user/regenerate-token",
             method: "POST",
-            body: { refreshToken },
           },
           api,
           extraOptions
         );
 
-        if (refreshResult.data) {
-          // Save new tokens
-          localStorage.setItem("accessToken", refreshResult?.data?.data?.access?.token);
-          // localStorage.setItem("role", refreshResult?.data?.data?.role);
-          // console.log(refreshResult?.data?.data?.role);
-        
-
-          // Retry the original request with the new token
-          result = await fetchBaseQuery({
+        if (data) {
+          return await fetchBaseQuery({
             baseUrl: import.meta.env.VITE_BAS_URL,
+            credentials: 'include',
             prepareHeaders: (headers) => {
-              const token = localStorage.getItem("accessToken");
-              if (token) {
-                headers.set("x-auth-token", token);
-              }
+              headers.set('Content-Type', 'application/json',);
               return headers;
-            },
+            }
           })(args, api, extraOptions);
-        }else{
-
-            console.log('refresh failed');
-            localStorage.clear();
-            window.location.href = '/login';  // Redirect to login page
-
-          }
+        }
       } catch (err) {
         console.error("Failed to refresh token:", err);
         localStorage.clear();
         window.location.href = '/login';  // Redirect to login page
-        // Handle refresh failure (e.g., redirect to login)
       }
     }
   }
-
-  return result;
+  else if (error.status === 401) {
+    localStorage.clear();
+    window.location.href = '/login';
+  }
+  return data;
 };
 
 // Create an RTK Query API slice
@@ -85,27 +57,23 @@ export const apiSlice = createApi({
   reducerPath: "api",
   baseQuery: baseQuery,
   endpoints: (builder) => ({
+
     login: builder.mutation({
       query: (credentials) => ({
         url: "/auth/admin",
         method: "POST",
         body: credentials,
       }),
-      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+      async onQueryStarted(arg, { queryFulfilled }) {
         try {
           const { data } = await queryFulfilled;
-          // Store tokens in local storage
-          localStorage.setItem("accessToken", data?.data?.access?.token);
-          
-          localStorage.setItem("refreshToken", data?.data?.refresh?.token);
-          // localStorage.setItem('refreshTokenExp', data?.data?.refresh?.expires);
-          localStorage.setItem("accessTokenExp", data?.data?.access?.expires);
           localStorage.setItem("role", data?.data?.role);
         } catch (error) {
           console.error("Login failed:", error);
         }
       },
     }),
+
     refreshToken: builder.mutation({
       query: (refreshToken) => ({
         url: "/auth/user/regenerate-token",
@@ -114,7 +82,6 @@ export const apiSlice = createApi({
       }),
     }),
 
-
     logout: builder.mutation({
       query: () => ({
         url: "/auth/admin/logout",
@@ -122,9 +89,6 @@ export const apiSlice = createApi({
       }),
     }),
 
-
-
-
   }),
 });
 
-- 
2.34.1


From 9c0b231e620d366f552a34e3b991f98184701cdc Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Mon, 9 Dec 2024 20:10:47 +0530
Subject: [PATCH 33/49] update changes

---
 src/Layout/DefaultLayout.jsx                |  64 +++--
 src/Pages/ChangePassword.jsx                | 193 ++++++-------
 src/Pages/ForgetPassword.jsx                | 304 +++++++++-----------
 src/Pages/Login.jsx                         |   2 +
 src/Pages/SubAdmin/SubAdminUpdateCreate.jsx |  35 +--
 src/Routes/Nav.js                           |  36 ++-
 src/Services/change.password.service.js     |   3 -
 src/Services/forget.password.service.js     |  30 ++
 src/Services/token.serivce.js               |   2 +-
 src/Store/Store.js                          |   3 +
 10 files changed, 329 insertions(+), 343 deletions(-)
 create mode 100644 src/Services/forget.password.service.js

diff --git a/src/Layout/DefaultLayout.jsx b/src/Layout/DefaultLayout.jsx
index 7afc70a..0ec59c7 100644
--- a/src/Layout/DefaultLayout.jsx
+++ b/src/Layout/DefaultLayout.jsx
@@ -15,7 +15,12 @@ import {
   TbTransactionDollar,
 } from "react-icons/tb";
 import { TbArrowBadgeRightFilled } from "react-icons/tb";
-import { ArrowBackIcon, ArrowLeftIcon, ArrowRightIcon, AtSignIcon } from "@chakra-ui/icons";
+import {
+  ArrowBackIcon,
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  AtSignIcon,
+} from "@chakra-ui/icons";
 import {
   Link,
   NavLink,
@@ -83,6 +88,7 @@ import ApproveRequest from "../Pages/FawateerChecker/ApproveRequest/ApproveReque
 import ApproveHistoryMaker from "../Pages/FawateerChecker/ApproveHistory/ApproveHistoryMaker";
 import ApproveHistory from "../Pages/FawateerChecker/ApproveHistory/ApproveHistoryChecker";
 import { useProfileQuery } from "../Services/io.service";
+import SubAdmin from "../Pages/SubAdmin/SubAdmin";
 
 const DashboardLayout = ({ isOnline }) => {
   const userRole = localStorage.getItem("role");
@@ -165,24 +171,24 @@ const DashboardLayout = ({ isOnline }) => {
             <RiMoneyDollarBoxLine className="h4 m-0" /> Sponsor
           </span>
         );
-        case path.startsWith("/email"):
-          return (
-            <span className="d-flex align-items-end gap-2">
-              <AtSignIcon className="h4 m-0" /> Email Notifiation
-            </span>
-          );
+      case path.startsWith("/email"):
+        return (
+          <span className="d-flex align-items-end gap-2">
+            <AtSignIcon className="h4 m-0" /> Email Notifiation
+          </span>
+        );
       case path.startsWith("/investment-type"):
         return (
           <span className="d-flex align-items-end gap-2">
             <VscSymbolClass className="h4 m-0" /> Investment Type
           </span>
         );
-        case path.startsWith("/profile"):
-          return (
-            <span className="d-flex align-items-end gap-2">
-              <CgProfile className="h4 m-0" /> Profile
-            </span>
-          );
+      case path.startsWith("/profile"):
+        return (
+          <span className="d-flex align-items-end gap-2">
+            <CgProfile className="h4 m-0" /> Profile
+          </span>
+        );
       case path.startsWith("/exchange-rate"):
         return (
           <span className="d-flex align-items-end gap-2">
@@ -241,7 +247,7 @@ const DashboardLayout = ({ isOnline }) => {
             Deposite Request
           </span>
         );
-        
+
       case path.startsWith("/fawateer"):
         return (
           <span className="d-flex align-items-end gap-2">
@@ -249,13 +255,13 @@ const DashboardLayout = ({ isOnline }) => {
             Fawateer Deposit
           </span>
         );
-        case path.startsWith("/fawateer-history"):
-          return (
-            <span className="d-flex align-items-end gap-2">
-              <RiMoneyDollarBoxLine className="h4 m-0 fw-normal" />
-              Fawateer Deposit
-            </span>
-          );
+      case path.startsWith("/fawateer-history"):
+        return (
+          <span className="d-flex align-items-end gap-2">
+            <RiMoneyDollarBoxLine className="h4 m-0 fw-normal" />
+            Fawateer Deposit
+          </span>
+        );
 
       case path.startsWith("/withdraw-request"):
         return (
@@ -398,6 +404,19 @@ const DashboardLayout = ({ isOnline }) => {
     return <SplashScreen />;
   }
 
+  const filteredNav = nav.map((item) => {
+    if (item.submenu) {
+      return {
+        ...item,
+        submenu: item.submenu.filter(
+          (submenuItem) =>
+            !(!data?.data?.superAdmin && submenuItem.title === "Sub Admin")
+        ),
+      };
+    }
+    return item;
+  });
+
   return (
     <Box
       style={{
@@ -515,7 +534,7 @@ const DashboardLayout = ({ isOnline }) => {
               index={openIndex}
               onChange={handleAccordionChange}
             >
-              {nav.map(({ title, type, Icon, submenu, path }, index) => {
+              {filteredNav.map(({ title, type, Icon, submenu, path }, index) => {
                 if (type === "accordion") {
                   return (
                     <AccordionItem key={index} border={"none"}>
@@ -788,6 +807,7 @@ const AppContent = ({ data }) => {
           )
         }
       />
+
       <Route path="*" element={<NotFound />} />
     </Routes>
   );
diff --git a/src/Pages/ChangePassword.jsx b/src/Pages/ChangePassword.jsx
index d33954b..fa6a898 100644
--- a/src/Pages/ChangePassword.jsx
+++ b/src/Pages/ChangePassword.jsx
@@ -17,24 +17,33 @@ import {
   useToast,
 } from "@chakra-ui/react";
 import * as yup from "yup";
-import React, { useState, useEffect, useContext } from "react";
-import { useForm, Controller } from "react-hook-form";
+import React, { useState, useContext } from "react";
+import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { v4 as uuidv4 } from "uuid";
-import { useParams } from "react-router-dom";
 import CustomAlertDialog from "../Components/CustomAlertDialog";
 import ToastBox from "../Components/ToastBox";
-import GlobalStateContext from "../Contexts/GlobalStateContext";
-import CurrencyInput from "../Components/CurrencyInput";
 import { useUpdatePasswordMutation } from "../Services/change.password.service";
+import { all } from "axios";
 
-const ioNav = yup.object().shape({
-  transactionDate: yup.string().required("Date is required"),
-  transactionAmount: yup.string().required("New NAV is required"),
-  comments: yup
+// Validation schema
+const passwordSchema = yup.object().shape({
+  oldPassword: yup.string().required("Current Password is required"),
+  newPassword: yup
     .string()
-    .notRequired()
-    .max(200, "Approve Comment cannot be more than 200 characters"),
+    .required("New Password is required")
+    .min(8, "Password must be at least 8 characters long")
+    .max(16, "Password must be at most 50 characters long")
+    .matches(/[A-Z]/, "Password must contain at least one uppercase letter")
+    .matches(/[a-z]/, "Password must contain at least one lowercase letter")
+    .matches(/[0-9]/, "Password must contain at least one number")
+    .matches(
+      /[@$!%*?&#]/,
+      "Password must contain at least one special character"
+    ),
+  confirmNewPassword: yup
+    .string()
+    .required("Confirm Password is required")
+    .oneOf([yup.ref("newPassword")], "Passwords must match"),
 });
 
 const ChangePassword = ({
@@ -43,175 +52,145 @@ const ChangePassword = ({
   firstField,
   actionId,
   setActionId,
-  data,
 }) => {
-  const params = useParams();
-  const id = params?.id;
-  const [file, setFile] = useState("");
-  const [fileName, setFileName] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [alert, setAlert] = useState(false);
-  const toast = useToast();
   const [showCurrentPassword, setShowCurrentPassword] = useState(false);
   const [showNewPassword, setShowNewPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
-  // ======================[ Cotext Api ]
-  const { IODetails } = useContext(GlobalStateContext);
-  const found = data?.find((item) => item?.id === actionId);
+  const toast = useToast();
 
-  const [updatePassword] = useUpdatePasswordMutation()
-  // const {
-  //   data
-  // } = useGetArtifactsQuery(id)
+  const [updatePassword] = useUpdatePasswordMutation();
 
+  // Form handling
   const {
-    control,
+    register,
     handleSubmit,
-    watch,
     reset,
     formState: { errors },
   } = useForm({
-    resolver: yupResolver(ioNav),
+    resolver: yupResolver(passwordSchema),
+    mode: "all",
   });
 
-    const onSubmit = async (data) => {
-      setIsLoading(true);
-
-      try {
-        const res = await updatePassword({ data});
-        if (res?.data?.statusCode === 201) {
-          setIsLoading(false);
-          toast({
-            render: () => <ToastBox message={res?.data?.message} />,
-          });
-          handleClose();
-        } else if (res?.error?.status === 400) {
-          toast({
-            render: () => (
-              <ToastBox message={res?.error?.data?.message} status={"error"} />
-            ),
-          });
-          handleClose();
-        }
-      } catch (error) {
-        console.log(error);
+  // Form submit handler
+  const onSubmit = async (data) => {
+    setIsLoading(true);
+    try {
+      const res = await updatePassword(data); // Assuming API request works as expected
+      if (res?.data?.statusCode === 200) {
+        toast({
+          render: () => <ToastBox message={res?.data?.message} />,
+        });
+        handleClose();
+      } else if (res?.error) {
+        toast({
+          render: () => (
+            <ToastBox message={res?.error?.data?.message} status={"error"} />
+          ),
+        });
       }
-    };
-
-  const handleSave = () => {
-    handleSubmit(onSubmit)();
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsLoading(false);
+    }
   };
 
+  // Handle modal close
   const handleClose = () => {
-    setIsLoading(false);
     setAlert(false);
     onClose();
+    reset();
   };
 
   return (
     <>
-      <Modal
-        // closeOnOverlayClick={false}
-        isOpen={isOpen}
-        onClose={onClose}
-        initialFocusRef={firstField}
-      >
+      <Modal isOpen={isOpen} onClose={onClose} initialFocusRef={firstField}>
         <ModalOverlay />
         <ModalContent>
-          <ModalHeader fontSize={"md"}>Change Password</ModalHeader>
+          <ModalHeader fontSize="md">Change Password</ModalHeader>
           <ModalCloseButton />
           <ModalBody pb={6}>
             <Stack spacing={4}>
-              <FormControl isInvalid={errors.ChangePassword} isRequired>
-                <FormLabel fontSize={"sm"} mb={1} fontWeight={500}>
+              {/* Current Password */}
+              <FormControl isInvalid={errors.oldPassword}>
+                <FormLabel fontSize="sm" mb={1} fontWeight={500}>
                   Current Password
                 </FormLabel>
                 <InputGroup size="sm">
                   <Input
-                    size={"md"}
-                    fontSize={"sm"}
-                    onChange={(e) => setSubject(e.target.value)}
+                    {...register("oldPassword")}
+                    fontSize="sm"
+                    type={showCurrentPassword ? "text" : "password"}
                     focusBorderColor="forestGreen.300"
-                    rounded={4}
-                    type={showCurrentPassword ? "text" : "password"} // Toggles between "text" and "password" based on the `show` state
                   />
                   <InputRightElement width="4.5rem">
                     <Button
-                      mt={2}
                       h="1.5rem"
                       size="xs"
-                      fontSize={"xs"}
-                      color={"green.800"}
                       onClick={() => setShowCurrentPassword((prev) => !prev)}
                     >
                       {showCurrentPassword ? "Hide" : "Show"}
                     </Button>
                   </InputRightElement>
                 </InputGroup>
-                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
-                  {errors.ChangePassword?.message}
+                <FormErrorMessage>
+                  {errors.oldPassword?.message}
                 </FormErrorMessage>
               </FormControl>
 
-              <FormControl isInvalid={errors.newPassword} isRequired>
-                <FormLabel fontSize={"sm"} mb={1}>
+              {/* New Password */}
+              <FormControl isInvalid={errors.newPassword}>
+                <FormLabel fontSize="sm" mb={1}>
                   New Password
                 </FormLabel>
                 <InputGroup size="sm">
                   <Input
-                    fontSize={"sm"}
-                    size={"md"}
-                    onChange={(e) => setSubject(e.target.value)}
+                    {...register("newPassword")}
+                    fontSize="sm"
+                    type={showNewPassword ? "text" : "password"}
                     focusBorderColor="forestGreen.300"
-                    rounded={4}
-                    type={showNewPassword ? "text" : "password"} // Toggles between "text" and "password" based on the `show` state
                   />
                   <InputRightElement width="4.5rem">
                     <Button
-                      mt={2}
                       h="1.5rem"
                       size="xs"
-                      fontSize={"xs"}
-                      color={"green.800"}
                       onClick={() => setShowNewPassword((prev) => !prev)}
                     >
                       {showNewPassword ? "Hide" : "Show"}
                     </Button>
                   </InputRightElement>
                 </InputGroup>
-                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                <FormErrorMessage>
                   {errors.newPassword?.message}
                 </FormErrorMessage>
               </FormControl>
 
-              <FormControl isInvalid={errors.conformPassword} isRequired>
-                <FormLabel fontSize={"sm"} mb={1}>
-                  Re-Type New Password
+              {/* Confirm Password */}
+              <FormControl isInvalid={errors.confirmNewPassword}>
+                <FormLabel fontSize="sm" mb={1}>
+                  Confirm New Password
                 </FormLabel>
                 <InputGroup size="sm">
                   <Input
-                    fontSize={"sm"}
-                    size={"md"}
-                    onChange={(e) => setSubject(e.target.value)}
+                    {...register("confirmNewPassword")}
+                    fontSize="sm"
+                    type={showConfirmPassword ? "text" : "password"}
                     focusBorderColor="forestGreen.300"
-                    rounded={4}
-                    type={showConfirmPassword ? "text" : "password"} // Toggles between "text" and "password" based on the `show` state
                   />
                   <InputRightElement width="4.5rem">
                     <Button
-                      mt={2}
                       h="1.5rem"
                       size="xs"
-                      fontSize={"xs"}
-                      color={"green.800"}
                       onClick={() => setShowConfirmPassword((prev) => !prev)}
                     >
                       {showConfirmPassword ? "Hide" : "Show"}
                     </Button>
                   </InputRightElement>
                 </InputGroup>
-                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
-                  {errors.conformPassword?.message}
+                <FormErrorMessage>
+                  {errors.confirmNewPassword?.message}
                 </FormErrorMessage>
               </FormControl>
             </Stack>
@@ -219,22 +198,20 @@ const ChangePassword = ({
 
           <DrawerFooter mb={5}>
             <Button
-              //   variant="outline"
-              bg={"#e0ebeb"}
-              rounded={"sm"}
-              size={"sm"}
-              mr={3}
               onClick={handleClose}
+              bg="#e0ebeb"
+              size="sm"
+              mr={3}
+              rounded={"sm"}
             >
               Cancel
             </Button>
-
             <Button
-              colorScheme={"forestGreen"}
               rounded={"sm"}
-              size={"sm"}
+              colorScheme="forestGreen"
+              size="sm"
               onClick={() => setAlert(true)}
-              fontWeight={400}
+              isLoading={isLoading}
             >
               Save
             </Button>
@@ -245,8 +222,8 @@ const ChangePassword = ({
       <CustomAlertDialog
         isOpen={alert}
         onClose={() => setAlert(false)}
-        alertHandler={handleSave}
-        message={"Are you sure you want to change password?"}
+        alertHandler={handleSubmit(onSubmit)}
+        message={"Are you sure you want to change the password?"}
         isLoading={isLoading}
       />
     </>
diff --git a/src/Pages/ForgetPassword.jsx b/src/Pages/ForgetPassword.jsx
index 8b78aba..23ed47b 100644
--- a/src/Pages/ForgetPassword.jsx
+++ b/src/Pages/ForgetPassword.jsx
@@ -1,178 +1,134 @@
 import {
-    Button,
-    DrawerFooter,
-    FormControl,
-    FormErrorMessage,
-    FormLabel,
-    Input,
-    Modal,
-    ModalBody,
-    ModalCloseButton,
-    ModalContent,
-    ModalHeader,
-    ModalOverlay,
-    Stack,
-    useToast,
-  } from "@chakra-ui/react";
-  import * as yup from "yup";
-  import React, { useState, useEffect, useContext } from "react";
-  import { useForm, Controller } from "react-hook-form";
-  import { yupResolver } from "@hookform/resolvers/yup";
-  import { v4 as uuidv4 } from "uuid";
-  import { useParams } from "react-router-dom";
-  import CustomAlertDialog from "../Components/CustomAlertDialog";
-  import ToastBox from "../Components/ToastBox";
-  import GlobalStateContext from "../Contexts/GlobalStateContext";
-  import CurrencyInput from "../Components/CurrencyInput";
-  
-  const ioNav = yup.object().shape({
-    transactionDate: yup.string().required("Date is required"),
-    transactionAmount: yup.string().required("New NAV is required"),
-    comments: yup
-      .string()
-      .notRequired()
-      .max(200, "Approve Comment cannot be more than 200 characters"),
+  Button,
+  DrawerFooter,
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  Stack,
+  useToast,
+} from "@chakra-ui/react";
+import * as yup from "yup";
+import React, { useState} from "react";
+import { useForm, Controller } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useForgetPasswordMutation } from "../Services/forget.password.service";
+import ToastBox from "../Components/ToastBox";
+
+const validationSchema = yup.object().shape({
+  emailAddress: yup
+    .string()
+    .email("Invalid email format")
+    .required("Email, Phone, or Username is required"),
+});
+
+const ForgetPassword = ({ isOpen, onClose, firstField }) => {
+  const toast = useToast();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [forgetPassword] = useForgetPasswordMutation();
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(validationSchema),
   });
-  
-  const ForgetPassword = ({
-    isOpen,
-    onClose,
-    firstField,
-    actionId,
-    setActionId,
-    data,
-  }) => {
-    const params = useParams();
-    const id = params?.id;
-    const [file, setFile] = useState("");
-    const [fileName, setFileName] = useState("");
-    const [isLoading, setIsLoading] = useState(false);
-    const [alert, setAlert] = useState(false);
-    const toast = useToast();
-  
-    const [showPassword, setShowPassword] = useState(false);
-    const [subject, setSubject] = useState("");
-    // ======================[ Cotext Api ]
-    const { IODetails } = useContext(GlobalStateContext);
-    const found = data?.find((item) => item?.id === actionId);
-  
-    // const [addNavDetails] = useAddNavDetailsMutation()
-    // const {
-    //   data
-    // } = useGetArtifactsQuery(id)
-  
-    const {
-      control,
-      handleSubmit,
-      watch,
-      reset,
-      formState: { errors },
-    } = useForm({
-      resolver: yupResolver(ioNav),
-    });
-  
-  //   const onSubmit = async (data) => {
-  //     setIsLoading(true);
-  
-  //     try {
-  //       const res = await addNavDetails({ data, id });
-  //       if (res?.data?.statusCode === 201) {
-  //         setIsLoading(false);
-  //         toast({
-  //           render: () => <ToastBox message={res?.data?.message} />,
-  //         });
-  //         handleClose();
-  //       } else if (res?.error?.status === 400) {
-  //         toast({
-  //           render: () => (
-  //             <ToastBox message={res?.error?.data?.message} status={"error"} />
-  //           ),
-  //         });
-  //         handleClose();
-  //       }
-  //     } catch (error) {
-  //       console.log(error);
-  //     }
-  //   };
-  
-    const handleSave = () => {
-      handleSubmit(onSubmit)();
-    };
-  
-    const handleClose = () => {
-      setIsLoading(false);
-      setAlert(false);
-      onClose();
-    };
+
+  const onSubmit = async (formData) => {
     
-  
-    return (
-      <>
-        <Modal
-          // closeOnOverlayClick={false}
-          isOpen={isOpen}
-          onClose={onClose}
-          initialFocusRef={firstField}
-        >
-          <ModalOverlay />
-          <ModalContent>
-            <ModalHeader fontSize={"md"}>Forget Password</ModalHeader>
-            <ModalCloseButton />
-            <ModalBody pb={4}>
-              <Stack spacing={4}>
-                <FormControl isInvalid={errors.ChangePassword}>
-                  <FormLabel fontSize={"sm"} mb={3} fontWeight={500}>Email, Phone, or UserName</FormLabel>
-                  <Input
-                      size={"md"}
-                      onChange={(e) => setSubject(e.target.value)}
-                      focusBorderColor="forestGreen.300"
-                      rounded={4}
-                      // type={showPassword ? "text" : "password"}
-                      type="text"
-                  />
-                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
-                    {errors.ChangePassword?.message}
-                  </FormErrorMessage>
-                </FormControl>
-              </Stack>
-            </ModalBody>
-  
-            <DrawerFooter mb={5}>
-              {/* <Button
-              //   variant="outline"
-                bg={"#e0ebeb"}
-                rounded={"sm"}
-                size={"sm"}
-                mr={3}
-                onClick={handleClose}
-              >
-                Cancel
-              </Button> */}
-  
-              <Button
-                w={"100%"}
-                colorScheme={"forestGreen"}
-                rounded={"md"}
-                size={"md"}
-                onClick={() => setAlert(true)}
-                fontWeight={400}
-              >
-                Send Login Link
-              </Button>
-            </DrawerFooter>
-          </ModalContent>
-        </Modal>
-  
-        <CustomAlertDialog
-          isOpen={alert}
-          onClose={() => setAlert(false)}
-          alertHandler={handleSave}
-          message={"Are you sure you want to change password?"}
-          isLoading={isLoading}
-        />
-      </>
-    );
+    setIsLoading(true);
+    try {
+      const res = await forgetPassword(formData);
+      if (res?.data?.statusCode === 200) {
+        toast({
+          render: () => <ToastBox message={res?.data?.message} />,
+        });
+        handleClose();
+      } else if (res?.error?.status === 401) {
+        toast({
+          render: () => (
+            <ToastBox message={res?.error?.data?.message} status="error" />
+          ),
+        });
+        handleClose();
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsLoading(false);
+    }
   };
-  
-  export default ForgetPassword;
-  
\ No newline at end of file
+
+  const handleClose = () => {
+    setIsLoading(false);
+    onClose();
+  };
+
+  return (
+    <Modal
+      isCentered
+      isOpen={isOpen}
+      onClose={handleClose}
+      initialFocusRef={firstField}
+    >
+      <ModalOverlay />
+      <ModalContent>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <ModalHeader fontSize="md">Forget Password</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody pb={4}>
+            <Stack spacing={4}>
+              <FormControl isInvalid={errors.emailAddress}>
+                <FormLabel fontSize="sm" mb={3} fontWeight={500}>
+                  Email, Phone, or Username
+                </FormLabel>
+                <Controller
+                  name="emailAddress"
+                  control={control}
+                  render={({ field }) => (
+                    <Input
+                      {...field}
+                      size="md"
+                      fontSize="sm"
+                    focusBorderColor="forestGreen.300"
+                      rounded={4}
+                      type="text"
+                    />
+                  )}
+                />
+                <FormErrorMessage fontSize="xs" fontWeight={500}>
+                  {errors.emailAddress?.message}
+                </FormErrorMessage>
+              </FormControl>
+            </Stack>
+          </ModalBody>
+
+          <DrawerFooter mb={5}>
+            <Button
+              w="100%"
+              colorScheme="forestGreen" 
+              rounded="md"
+              size="md"
+              type="submit"
+              isLoading={isLoading}
+              fontWeight={400}
+              fontSize="sm"
+            >
+              Send Login Link
+            </Button>
+          </DrawerFooter>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default ForgetPassword;
diff --git a/src/Pages/Login.jsx b/src/Pages/Login.jsx
index c871975..2eef3aa 100644
--- a/src/Pages/Login.jsx
+++ b/src/Pages/Login.jsx
@@ -256,6 +256,8 @@ const Login = () => {
           color={"whitesmoke"}
           colorScheme="green.500"
           size="lg"
+          fontWeight={500}
+          fontSize={"md"}
         >
           Log In
         </Button>
diff --git a/src/Pages/SubAdmin/SubAdminUpdateCreate.jsx b/src/Pages/SubAdmin/SubAdminUpdateCreate.jsx
index 948e78a..c483125 100644
--- a/src/Pages/SubAdmin/SubAdminUpdateCreate.jsx
+++ b/src/Pages/SubAdmin/SubAdminUpdateCreate.jsx
@@ -29,10 +29,8 @@ export const addSubAdmin = yup.object().shape({
     .max(50, "First Name cannot exceed 50 characters")
     .matches(/^[^\d]+$/, "First Name cannot contain numbers"),
 
-    lastName: yup
-    .string()
-    .required("Last Name name in arabic is required"),
-    emailAddress: yup.string().email("Invalid email address").notRequired(),
+  lastName: yup.string().required("Last Name name in arabic is required"),
+  emailAddress: yup.string().email("Invalid email address").notRequired(),
   //   .test("emailValidity", "Email address is invalid", async function (value) {
   //     if (!value) {
   //         return true; // Allow if the field is empty
@@ -95,29 +93,30 @@ const SubAdminUpdateCreate = () => {
         lastName: subAdminByIdData?.data?.lastName,
         emailAddress: subAdminByIdData?.data?.emailAddress,
       });
-      setIsSwitchOn(subAdminByIdData?.data?.role[0]?.role===encryptString(import.meta.env.VITE_VITE_MAKER));
+      setIsSwitchOn(
+        subAdminByIdData?.data?.role[0]?.role ===
+          encryptString(import.meta.env.VITE_VITE_MAKER)
+      );
       console.log(subAdminByIdData?.data?.role);
     }
   }, [subAdminByIdData, reset]);
 
-
   if (false) {
     return <FullscreenLoaders />;
   }
 
   // ============================ [API]===============================
 
-
   const handleConfirm = async () => {
     setIsLoadingBtn(true);
     const id = params?.id;
     console.log(isSwitchOn);
-    
+
     if (id) {
       try {
         const formData = {
           ...form,
-          role_xid: isSwitchOn?2:1,
+          // role_xid: !isSwitchOn ? 1 : 2,
         };
         await updateSubAdmin({ data: formData, id }).then((response) => {
           if (response?.data?.statusCode) {
@@ -151,7 +150,7 @@ const SubAdminUpdateCreate = () => {
       try {
         const formData = {
           ...form,
-          role_xid: isSwitchOn?2:1,
+          role_xid: isSwitchOn ? 1 : 2,
         };
         await createSubAdmin(formData).then((response) => {
           console.log(response);
@@ -282,11 +281,11 @@ const SubAdminUpdateCreate = () => {
   }, {});
 
   // ==================== [On Submit] ========================
-console.log(errors);
+  console.log(errors);
 
   const onSubmit = async (data) => {
     console.log("Hit");
-    
+
     if (Object.keys(errors).length === 0) {
       setForm(data);
       setAlert(true);
@@ -314,10 +313,14 @@ console.log(errors);
           <ArrowBackIcon fontSize={"xl"} me={2} />
           Add Details
         </Text>
-        <RoleSwitchButton
-          isSwitchOn={isSwitchOn}
-          setIsSwitchOn={setIsSwitchOn}
-        />
+        {params?.id ? (
+          ""
+        ) : (
+          <RoleSwitchButton
+            isSwitchOn={isSwitchOn}
+            setIsSwitchOn={setIsSwitchOn}
+          />
+        )}
       </Box>
 
       {/* ====================== [Form Input] ====================== */}
diff --git a/src/Routes/Nav.js b/src/Routes/Nav.js
index 58996f4..76bf644 100644
--- a/src/Routes/Nav.js
+++ b/src/Routes/Nav.js
@@ -104,25 +104,23 @@ export const nav = [
     title: "INVESTORS REQUEST",
     type: "title",
   },
-{
-        title: "Fawateer Deposit",
-        submenu: [
-          {
-            title: "Aprover Request",
-            path: "/fawateer",
-            icon: RiMoneyDollarBoxLine,
-          },
-          {
-            title: "View History",
-            path: "/fawateer-history",
-            icon: RiExchangeBoxLine,
-          },
-        ],
-        type: "accordion",
-        Icon: HiOutlineBanknotes,
-}
-,
-
+  {
+    title: "Fawateer Deposit",
+    submenu: [
+      {
+        title: "Aprover Request",
+        path: "/fawateer",
+        icon: RiMoneyDollarBoxLine,
+      },
+      {
+        title: "View History",
+        path: "/fawateer-history",
+        icon: RiExchangeBoxLine,
+      },
+    ],
+    type: "accordion",
+    Icon: HiOutlineBanknotes,
+  },
   {
     title: "Bank Deposit",
     submenu: [
diff --git a/src/Services/change.password.service.js b/src/Services/change.password.service.js
index 4c8adc3..1d82772 100644
--- a/src/Services/change.password.service.js
+++ b/src/Services/change.password.service.js
@@ -11,10 +11,7 @@ export const changePasswordMake = createApi({
   baseQuery: baseQuery,
   tagTypes: ["getPassword"],
   endpoints: (builder) => ({
-
-
     // // ========[ update ]========
-
     updatePassword: builder.mutation({
       query: (data) => ({
         url: `/auth/admin/update-password`,
diff --git a/src/Services/forget.password.service.js b/src/Services/forget.password.service.js
new file mode 100644
index 0000000..9af9f54
--- /dev/null
+++ b/src/Services/forget.password.service.js
@@ -0,0 +1,30 @@
+
+// Need to use the React-specific entry point to import createApi
+import { createApi} from "@reduxjs/toolkit/query/react";
+import { baseQuery } from "./token.serivce";
+
+
+
+// Define a service using a base URL and expected endpoints
+export const forgetPasswordMake = createApi({
+  reducerPath: "forgetPassword",
+  baseQuery: baseQuery,
+  tagTypes: ["getPassword"],
+  endpoints: (builder) => ({
+    // // ========[ update ]========
+    forgetPassword: builder.mutation({
+      query: (data) => ({
+        url: `/auth/admin/forget-password`,
+        method: "POST",
+        body: data,
+      }),
+      invalidatesTags: ["getPassword"],
+    }),
+
+  }),
+});
+
+// Export hooks for usage in functional components
+export const {
+    useForgetPasswordMutation
+} = forgetPasswordMake;
diff --git a/src/Services/token.serivce.js b/src/Services/token.serivce.js
index 1b2b827..9b0cc29 100644
--- a/src/Services/token.serivce.js
+++ b/src/Services/token.serivce.js
@@ -127,6 +127,6 @@ export const apiSlice = createApi({
 
 
   }),
-});
+}); 
 
 export const { useLoginMutation, useRefreshTokenMutation, useLogoutMutation } = apiSlice;
diff --git a/src/Store/Store.js b/src/Store/Store.js
index 42f2add..8d1bc65 100644
--- a/src/Store/Store.js
+++ b/src/Store/Store.js
@@ -19,6 +19,7 @@ import { fawateerRequest } from "../Services/fawateer.request.service";
 import { fawateerMaker } from "../Services/fawateer.maker.service";
 import { sabAdminMaster } from "../Services/subadmin.service";
 import { changePasswordMake } from "../Services/change.password.service";
+import { forgetPasswordMake } from "../Services/forget.password.service";
 
 export const store = configureStore({
   reducer: {
@@ -39,6 +40,7 @@ export const store = configureStore({
     [fawateerMaker.reducerPath]: fawateerMaker.reducer,
     [sabAdminMaster.reducerPath]: sabAdminMaster.reducer,
     [changePasswordMake.reducerPath]: changePasswordMake.reducer,
+    [forgetPasswordMake.reducerPath]: forgetPasswordMake.reducer,
 
     // Add other reducers as needed
   },
@@ -65,6 +67,7 @@ export const store = configureStore({
       fawateerMaker.middleware,
       sabAdminMaster.middleware,
       changePasswordMake.middleware,
+      forgetPasswordMake.middleware,
     ),
 });
 
-- 
2.34.1


From a2fe1435cb6d08d86af981b0b9f6a51e186e3da2 Mon Sep 17 00:00:00 2001
From: Swapnil Bendal <84583651+Swapnil155@users.noreply.github.com>
Date: Wed, 11 Dec 2024 11:41:02 +0530
Subject: [PATCH 34/49] [update] - token service

---
 src/Services/token.serivce.js | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/Services/token.serivce.js b/src/Services/token.serivce.js
index 2cfd56f..21b110a 100644
--- a/src/Services/token.serivce.js
+++ b/src/Services/token.serivce.js
@@ -2,7 +2,7 @@ import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
 
 // Define a base query function with token refresh logic
 export const baseQuery = async (args, api, extraOptions) => {
-  let { data, error, } = await fetchBaseQuery({
+  let result = await fetchBaseQuery({
     baseUrl: import.meta.env.VITE_BAS_URL,
     credentials: 'include',
     prepareHeaders: (headers) => {
@@ -11,14 +11,16 @@ export const baseQuery = async (args, api, extraOptions) => {
     },
   })(args, api, extraOptions);
 
-  console.log(data);
-  
-
-  if (error) {
+  if (result.error) {
     if (error.status === 403) {
       try {
         const { data } = await fetchBaseQuery({
           baseUrl: import.meta.env.VITE_BAS_URL,
+          credentials: 'include',
+          prepareHeaders: (headers) => {
+            headers.set('Content-Type', 'application/json',);
+            return headers;
+          },
         })(
           {
             url: "/auth/user/regenerate-token",
@@ -43,13 +45,14 @@ export const baseQuery = async (args, api, extraOptions) => {
         localStorage.clear();
         window.location.href = '/login';  // Redirect to login page
       }
+    } else if (error.status === 401) {
+      localStorage.clear();
+      window.location.href = '/login';
     }
   }
-  else if (error.status === 401) {
-    localStorage.clear();
-    window.location.href = '/login';
-  }
-  return data;
+  console.log(result);
+
+  return result;
 };
 
 // Create an RTK Query API slice
-- 
2.34.1


From c7d6a0fe363300b530bc71c8a3c166d57f205c9e Mon Sep 17 00:00:00 2001
From: Swapnil Bendal <84583651+Swapnil155@users.noreply.github.com>
Date: Wed, 11 Dec 2024 12:59:19 +0530
Subject: [PATCH 35/49] [update] - token service

---
 src/Pages/SubAdmin/SubAdminUpdateCreate.jsx | 39 +++++++++------------
 src/Services/token.serivce.js               | 15 ++++----
 2 files changed, 25 insertions(+), 29 deletions(-)

diff --git a/src/Pages/SubAdmin/SubAdminUpdateCreate.jsx b/src/Pages/SubAdmin/SubAdminUpdateCreate.jsx
index c483125..8b5c887 100644
--- a/src/Pages/SubAdmin/SubAdminUpdateCreate.jsx
+++ b/src/Pages/SubAdmin/SubAdminUpdateCreate.jsx
@@ -1,24 +1,22 @@
-import React, { useContext, useEffect, useState } from "react";
-import { Box, Button, Text, useToast } from "@chakra-ui/react";
-import { useForm, Controller } from "react-hook-form";
-import { yupResolver } from "@hookform/resolvers/yup";
-import * as yup from "yup";
-import { useNavigate, useParams } from "react-router-dom";
-import { v4 as uuidv4 } from "uuid";
 import { ArrowBackIcon } from "@chakra-ui/icons";
-import { OPACITY_ON_LOAD } from "../../Layout/animations";
-import FormInputMain from "../../Components/FormInputMain";
-import ToastBox from "../../Components/ToastBox";
-import FullscreenLoaders from "../../Components/Loaders/FullscreenLoaders";
+import { Box, Text, useToast } from "@chakra-ui/react";
+import { yupResolver } from "@hookform/resolvers/yup";
+import React, { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { useNavigate, useParams } from "react-router-dom";
+import * as yup from "yup";
 import CustomAlertDialog from "../../Components/CustomAlertDialog";
+import FormInputMain from "../../Components/FormInputMain";
+import FullscreenLoaders from "../../Components/Loaders/FullscreenLoaders";
 import RoleSwitchButton from "../../Components/RoleSwitchButton";
+import ToastBox from "../../Components/ToastBox";
+import { encryptString } from "../../Constants/Constants";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
 import {
   useCreateSubAdminMutation,
   useGetSubAdminByIdQuery,
   useUpdateSubAdminMutation,
 } from "../../Services/subadmin.service";
-import { useGetSponserByIdQuery } from "../../Services/io.service";
-import { encryptString } from "../../Constants/Constants";
 // ======================= [validation] =========================
 
 export const addSubAdmin = yup.object().shape({
@@ -60,17 +58,15 @@ const SubAdminUpdateCreate = () => {
   const [isLoadingBtn, setIsLoadingBtn] = useState(false);
   const [alert, setAlert] = useState(false);
   const [form, setForm] = useState();
-  const [isSwitchOn, setIsSwitchOn] = useState(true);
+  const [isSwitchOn, setIsSwitchOn] = useState(false);
 
   const [createSubAdmin] = useCreateSubAdminMutation();
   const [updateSubAdmin] = useUpdateSubAdminMutation();
 
   // Fetch sponsor data only if id exists
-  const {
-    data: subAdminByIdData,
-    error,
-    isLoading,
-  } = useGetSubAdminByIdQuery(id, { skip: !id });
+  const { data: subAdminByIdData, isLoading } = useGetSubAdminByIdQuery(id, {
+    skip: !id,
+  });
 
   // ======================== [validators] ===========================
 
@@ -97,11 +93,10 @@ const SubAdminUpdateCreate = () => {
         subAdminByIdData?.data?.role[0]?.role ===
           encryptString(import.meta.env.VITE_VITE_MAKER)
       );
-      console.log(subAdminByIdData?.data?.role);
     }
   }, [subAdminByIdData, reset]);
 
-  if (false) {
+  if (isLoading) {
     return <FullscreenLoaders />;
   }
 
@@ -281,7 +276,7 @@ const SubAdminUpdateCreate = () => {
   }, {});
 
   // ==================== [On Submit] ========================
-  console.log(errors);
+  // console.log(errors);
 
   const onSubmit = async (data) => {
     console.log("Hit");
diff --git a/src/Services/token.serivce.js b/src/Services/token.serivce.js
index 0f0e816..2cc9d7e 100644
--- a/src/Services/token.serivce.js
+++ b/src/Services/token.serivce.js
@@ -13,9 +13,9 @@ export const baseQuery = async (args, api, extraOptions) => {
   })(args, api, extraOptions);
 
   if (result.error) {
-    if (error.status === 403) {
+    if (result.error.status === 403) {
       try {
-        const { data } = await fetchBaseQuery({
+        const { data, error } = await fetchBaseQuery({
           baseUrl: import.meta.env.VITE_BAS_URL,
           credentials: 'include',
           prepareHeaders: (headers) => {
@@ -41,17 +41,18 @@ export const baseQuery = async (args, api, extraOptions) => {
             }
           })(args, api, extraOptions);
         }
+        throw error;
       } catch (err) {
         console.error("Failed to refresh token:", err);
         localStorage.clear();
-        window.location.href = '/login';  // Redirect to login page
+        // window.location.href = '/login';  // Redirect to login page
       }
-    } else if (error.status === 401) {
+    } else if (result.error.status === 401) {
       localStorage.clear();
-      window.location.href = '/login';
+      // window.location.href = '/login';
     }
   }
-  console.log(result);
+  // console.log(result);
 
   return result;
 };
@@ -94,6 +95,6 @@ export const apiSlice = createApi({
     }),
 
   }),
-}); 
+});
 
 export const { useLoginMutation, useRefreshTokenMutation, useLogoutMutation } = apiSlice;
-- 
2.34.1


From 87e07163836d223e6f81275c15306431335e6a54 Mon Sep 17 00:00:00 2001
From: Swapnil Bendal <84583651+Swapnil155@users.noreply.github.com>
Date: Wed, 11 Dec 2024 13:21:43 +0530
Subject: [PATCH 36/49] [added] - .env.exmple

---
 .env.example | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 .env.example

diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..319aefd
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,14 @@
+# Default Value Maker
+VITE_MAKER="Maker" 
+
+# Default Value Checker
+VITE_CHECKER="Checker"
+
+# Role Encryption key
+VITE_ROLE_ENCRYPTION_KEY="export"
+
+# BaseURL
+VITE_BAS_URL="http://localhost:5000/api/v1"
+
+# BaseURL for Images
+VITE_IMAGE_URL="https://sprint9.tanami.betadelivery.com/"
\ No newline at end of file
-- 
2.34.1


From bbfd617b27376ddddc18f9c0fa04964e6c4d3d24 Mon Sep 17 00:00:00 2001
From: Swapnil Bendal <84583651+Swapnil155@users.noreply.github.com>
Date: Wed, 11 Dec 2024 14:54:13 +0530
Subject: [PATCH 37/49] [update] - finalise

---
 .env.example                                  |   7 +-
 src/Components/Pagination.jsx                 |   4 +-
 src/Constants/Constants.js                    |  66 ++++----
 src/Constants/Paginations.js                  |   2 +-
 .../Investor/BankInvestor/BankInvestor.jsx    |  30 ++--
 .../Investor/UnbanInvestor/UnbanInvestor.jsx  |  31 ++--
 src/Pages/SubAdmin/SubAdmin.jsx               | 152 +++++++++---------
 src/Services/subadmin.service.js              |  26 ++-
 8 files changed, 170 insertions(+), 148 deletions(-)

diff --git a/.env.example b/.env.example
index 319aefd..1e085bc 100644
--- a/.env.example
+++ b/.env.example
@@ -7,8 +7,11 @@ VITE_CHECKER="Checker"
 # Role Encryption key
 VITE_ROLE_ENCRYPTION_KEY="export"
 
+# Super Admin
+VITE_SUPER_ADMIN_ID=1
+
 # BaseURL
-VITE_BAS_URL="http://localhost:5000/api/v1"
+VITE_BAS_URL="your_base_url"
 
 # BaseURL for Images
-VITE_IMAGE_URL="https://sprint9.tanami.betadelivery.com/"
\ No newline at end of file
+VITE_IMAGE_URL="your_base_url"
\ No newline at end of file
diff --git a/src/Components/Pagination.jsx b/src/Components/Pagination.jsx
index 0a82531..488775d 100644
--- a/src/Components/Pagination.jsx
+++ b/src/Components/Pagination.jsx
@@ -5,7 +5,7 @@ import { ChevronLeftIcon, ChevronRightIcon } from "@chakra-ui/icons";
 const Pagination = ({
   pageSize,
   setPageSize,
-  totalItems,
+  totalItems = 1,
   isLoading,
   setCurrentPage,
   currentPage,
@@ -84,7 +84,7 @@ const Pagination = ({
           onClick={paginationNext}
           className="link pointer"
           isDisabled={currentPage === totalPages}
-           aria-label="Next Page"
+          aria-label="Next Page"
         />
       </HStack>
     </HStack>
diff --git a/src/Constants/Constants.js b/src/Constants/Constants.js
index da74880..c863ac9 100644
--- a/src/Constants/Constants.js
+++ b/src/Constants/Constants.js
@@ -4,7 +4,7 @@ import * as XLSX from 'xlsx';
 import CryptoJS from "crypto-js";
 
 
-export const generateSerialNumber = (index, currentPage, pageSize) => {
+export const generateSerialNumber = (index, currentPage = 1, pageSize = 1) => {
   return (currentPage - 1) * pageSize + (index + 1);
 };
 
@@ -12,7 +12,7 @@ export function getTomorrowDate() {
   const today = new Date();
   const tomorrow = new Date(today);
   tomorrow.setDate(today.getDate() + 1);
-  
+
   // Format the date as YYYY-MM-DD (ISO 8601)
   return tomorrow.toISOString().split('T')[0];
 }
@@ -34,7 +34,7 @@ export function removeTrailingZeros(value) {
 }
 
 
- export function getCountdownTimer(utcDateString) {
+export function getCountdownTimer(utcDateString) {
   // Parse the UTC datetime string into a Date object
   const targetDate = new Date(utcDateString);
   const now = new Date();
@@ -57,7 +57,7 @@ export function removeTrailingZeros(value) {
   const remainingMinutes = minutes % 60;
   const remainingSeconds = seconds % 60;
 
-  return `${remainingDays === 0 ? "": remainingDays+"d"}  ${remainingHours === 0 ? "": remainingHours+"h"} ${remainingMinutes}m ${remainingSeconds}s `;
+  return `${remainingDays === 0 ? "" : remainingDays + "d"}  ${remainingHours === 0 ? "" : remainingHours + "h"} ${remainingMinutes}m ${remainingSeconds}s `;
 }
 
 
@@ -97,28 +97,28 @@ export function debounce(func, delay) {
 
 async function resolveMx(domain, recordType) {
   return new Promise((resolve, reject) => {
-      dns.resolveMx(domain, (err, mxRecords) => {
-          if (err) {
-              reject(err);
-              return;
-          }
-          const addresses = mxRecords.map((mxRecord) => mxRecord.exchange);
-          resolve(addresses);
-      });
+    dns.resolveMx(domain, (err, mxRecords) => {
+      if (err) {
+        reject(err);
+        return;
+      }
+      const addresses = mxRecords.map((mxRecord) => mxRecord.exchange);
+      resolve(addresses);
+    });
   });
 }
 // Async function to check email address validity
 export async function checkEmailValidity(email) {
   try {
-      const domain = email?.split("@")[1];
-      const addresses = await resolveMx(domain, "MX");
+    const domain = email?.split("@")[1];
+    const addresses = await resolveMx(domain, "MX");
 
-      if (addresses && addresses?.length > 0) {
-          return true;
-      }
-      return false; // No MX record exists
+    if (addresses && addresses?.length > 0) {
+      return true;
+    }
+    return false; // No MX record exists
   } catch (err) {
-      return false; // Error occurred
+    return false; // Error occurred
   }
 }
 
@@ -126,15 +126,15 @@ export async function checkEmailValidity(email) {
 // Function to convert timestamp to readable date format in Gulf timezone
 export function formatTimestampInGulfTimezone(timestamp) {
   const date = new Date(timestamp);
-  const options = { 
-      year: 'numeric', 
-      month: 'long', 
-      day: 'numeric', 
-      hour: '2-digit', 
-      minute: '2-digit', 
-      second: '2-digit', 
-      timeZone: 'Asia/Dubai', // Gulf Standard Time (GST) timezone
-      timeZoneName: 'short'
+  const options = {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    timeZone: 'Asia/Dubai', // Gulf Standard Time (GST) timezone
+    timeZoneName: 'short'
   };
   return date.toLocaleDateString('en-GB', options);
 }
@@ -164,7 +164,7 @@ const getNestedValue = (obj, key) => {
 export const exportToExcel = (data, headers) => {
   const flattenedData = data.map((item) => {
     const newItem = {};
-    
+
     // Loop through customHeaders and get the correct values
     headers.forEach((header) => {
       newItem[header.label] = getNestedValue(item, header.key); // Use the helper function
@@ -175,7 +175,7 @@ export const exportToExcel = (data, headers) => {
 
   // Now pass flattenedData to your Excel library to generate the file
   // Assuming you're using a library like `xlsx` for this part:
-  
+
   const worksheet = XLSX.utils.json_to_sheet(flattenedData);
   const workbook = XLSX.utils.book_new();
   XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
@@ -233,4 +233,8 @@ export const decryptString = (ciphertext) => {
   const bytes = CryptoJS.AES.decrypt(ciphertext, import.meta.env.VITE_ROLE_ENCRYPTION_KEY);
   const originalText = bytes.toString(CryptoJS.enc.Utf8);
   return originalText;
-};
\ No newline at end of file
+};
+
+export const SUPER_ADMIN_ID = import.meta.env.VITE_SUPER_ADMIN_ID || 1
+export const MAKER_ID = import.meta.env.VITE_MAKER_ID || 1
+export const CHECKER_ID = import.meta.env.VITE_CHECKER_ID || 2
\ No newline at end of file
diff --git a/src/Constants/Paginations.js b/src/Constants/Paginations.js
index b01cbd8..e657279 100644
--- a/src/Constants/Paginations.js
+++ b/src/Constants/Paginations.js
@@ -1,2 +1,2 @@
-export const TABLE_PAGINATION = { page: 1, size:20 }
+export const TABLE_PAGINATION = { page: 1, size: 20 }
 export const IMAGE_URI = import.meta.env.VITE_API_IMAGE_URL
\ No newline at end of file
diff --git a/src/Pages/Admin/Investor/BankInvestor/BankInvestor.jsx b/src/Pages/Admin/Investor/BankInvestor/BankInvestor.jsx
index e3f162a..90d9c15 100644
--- a/src/Pages/Admin/Investor/BankInvestor/BankInvestor.jsx
+++ b/src/Pages/Admin/Investor/BankInvestor/BankInvestor.jsx
@@ -1,27 +1,25 @@
 import {
-  Avatar,
   Badge,
   Box,
   HStack,
   Input,
   Select,
-  Switch,
   Text,
   useDisclosure,
   useToast,
 } from "@chakra-ui/react";
-import React, { useContext, useEffect, useState, useRef } from "react";
-import { Link, Link as RouterLink, useNavigate } from "react-router-dom";
-import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
-import { debounce } from "../../../Master/Sponser/AddSponser";
-import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
-import NormalTable from "../../../../Components/DataTable/NormalTable";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
 import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
-import Pagination from "../../../../Components/Pagination";
+import NormalTable from "../../../../Components/DataTable/NormalTable";
 import ToastBox from "../../../../Components/ToastBox";
-import ReasonBanModal from "./ReasonBanModal";
-import { useGetbanInvestorQuery } from "../../../../Services/ban.investor.service";
 import { TABLE_PAGINATION } from "../../../../Constants/Paginations";
+import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
+import { useGetbanInvestorQuery } from "../../../../Services/ban.investor.service";
+import { debounce } from "../../../Master/Sponser/AddSponser";
+import ReasonBanModal from "./ReasonBanModal";
+import Pagination from "../../../../Components/Pagination";
 
 const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
 
@@ -233,8 +231,6 @@ const BankInvestor = () => {
     ),
   }));
 
-  console.log(extractedArray);
-
   const handleDelete = () => {
     const updatedInvestorDetails = InvestorDetails.filter(
       (sponsor) => sponsor.id !== actionId
@@ -278,6 +274,14 @@ const BankInvestor = () => {
           />
 
           <HStack display={"flex"} alignItems={"center"}>
+            <Pagination
+              isLoading={unbanLoading}
+              pageSize={pageSize}
+              setPageSize={setPageSize}
+              currentPage={currentPage}
+              setCurrentPage={setCurrentPage}
+              totalItems={data?.data?.totalItems}
+            />
             {/* <Select
               focusBorderColor="green.500"
               size={"sm"}
diff --git a/src/Pages/Admin/Investor/UnbanInvestor/UnbanInvestor.jsx b/src/Pages/Admin/Investor/UnbanInvestor/UnbanInvestor.jsx
index f0b3e17..24cb0b3 100644
--- a/src/Pages/Admin/Investor/UnbanInvestor/UnbanInvestor.jsx
+++ b/src/Pages/Admin/Investor/UnbanInvestor/UnbanInvestor.jsx
@@ -1,31 +1,26 @@
 import {
-  Avatar,
   Badge,
   Box,
   HStack,
   Input,
   Select,
-  Switch,
   Text,
   useDisclosure,
   useToast,
 } from "@chakra-ui/react";
-import React, { useContext, useEffect, useState, useRef } from "react";
-import { Link, Link as RouterLink, useNavigate } from "react-router-dom";
-import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
-import { debounce } from "../../../Master/Sponser/AddSponser";
-import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
-import DataTable from "../../../../Components/DataTable/NormalTable";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
 import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
-import Pagination from "../../../../Components/Pagination";
+import DataTable from "../../../../Components/DataTable/NormalTable";
 import ToastBox from "../../../../Components/ToastBox";
-import ReasonBanModal from "./ReasonBanModal";
-import {
-  useGetInvestorQuery,
-  useGetUnbanInvestorQuery,
-} from "../../../../Services/ban.investor.service";
 import { generateSerialNumber } from "../../../../Constants/Constants";
 import { TABLE_PAGINATION } from "../../../../Constants/Paginations";
+import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
+import { useGetUnbanInvestorQuery } from "../../../../Services/ban.investor.service";
+import { debounce } from "../../../Master/Sponser/AddSponser";
+import ReasonBanModal from "./ReasonBanModal";
+import Pagination from "../../../../Components/Pagination";
 
 const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
 
@@ -270,6 +265,14 @@ const UnbanInvestor = () => {
             onChange={(e) => setSearchTerm(e.target.value)}
           />
           <HStack display={"flex"} alignItems={"center"}>
+            <Pagination
+              isLoading={unbanLoading}
+              pageSize={pageSize}
+              setPageSize={setPageSize}
+              currentPage={currentPage}
+              setCurrentPage={setCurrentPage}
+              totalItems={data?.data?.totalItems}
+            />
             {/* <Select
               focusBorderColor="green.500"
               size={"sm"}
diff --git a/src/Pages/SubAdmin/SubAdmin.jsx b/src/Pages/SubAdmin/SubAdmin.jsx
index ec77771..d592dda 100644
--- a/src/Pages/SubAdmin/SubAdmin.jsx
+++ b/src/Pages/SubAdmin/SubAdmin.jsx
@@ -1,3 +1,4 @@
+import { AddIcon, DeleteIcon, EditIcon } from "@chakra-ui/icons";
 import {
   Badge,
   Box,
@@ -9,24 +10,24 @@ import {
   Tooltip,
   useToast,
 } from "@chakra-ui/react";
-import React, { useContext, useEffect, useState } from "react";
-import { Link, Link as RouterLink } from "react-router-dom";
-import { AddIcon, DeleteIcon, EditIcon } from "@chakra-ui/icons";
-import { useNavigate } from "react-router-dom";
-import { OPACITY_ON_LOAD } from "../../Layout/animations";
-import NormalTable from "../../Components/DataTable/NormalTable";
-import Pagination from "../../Components/Pagination";
-import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import React, { useContext, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
 import CustomAlertDialog from "../../Components/CustomAlertDialog";
+import NormalTable from "../../Components/DataTable/NormalTable";
 import ToastBox from "../../Components/ToastBox";
-import { TABLE_PAGINATION } from "../../Constants/Paginations";
-import { generateSerialNumber } from "../../Constants/Constants";
-import { useGetSponserMasterQuery } from "../../Services/io.service";
 import {
+  CHECKER_ID,
+  generateSerialNumber,
+  MAKER_ID,
+  SUPER_ADMIN_ID,
+} from "../../Constants/Constants";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import {
+  useDeleteUserMutation,
   useGetSubAdminMasterQuery,
   useToggleStatusMutation,
 } from "../../Services/subadmin.service";
-import RoleSwitchButton from "../../Components/RoleSwitchButton";
 
 export const formatDate = (date) => {
   const d = new Date(date);
@@ -46,31 +47,28 @@ const SubAdmin = () => {
   const [mouseEntered, setMouseEntered] = useState(false);
   const [mouseEnteredId, setMouseEnteredId] = useState("");
   //   const [deleteSponser] = useDeleteSponserMutation();
-  const { sponser, setSponser, slideFromRight } =
-    useContext(GlobalStateContext);
+  const { slideFromRight } = useContext(GlobalStateContext);
 
   // =========================== [Use State] =============================
-  const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
-  const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
+  // const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
+  // const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
   const [searchTerm, setSearchTerm] = useState("");
-  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
-  const [isSwitchOn, setIsSwitchOn] = useState(true);
+  // const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
 
   // Debounce the search term to avoid making a request on every keystroke
-  useEffect(() => {
-    const handler = setTimeout(() => {
-      setDebouncedSearchTerm(searchTerm);
-    }, 500); // Adjust delay as needed
-    return () => {
-      clearTimeout(handler);
-    };
-  }, [searchTerm]);
+  // useEffect(() => {
+  //   const handler = setTimeout(() => {
+  //     setDebouncedSearchTerm(searchTerm);
+  //   }, 500); // Adjust delay as needed
+  //   return () => {
+  //     clearTimeout(handler);
+  //   };
+  // }, [searchTerm]);
 
-  const {
-    data: subAdmin,
-    error,
-    isLoading: isSponserLoading,
-  } = useGetSubAdminMasterQuery();
+  const { data: subAdmin, isLoading: isSponserLoading } =
+    useGetSubAdminMasterQuery();
+
+  const [deleteUser] = useDeleteUserMutation();
 
   const [toggleStatus] = useToggleStatusMutation();
 
@@ -91,13 +89,13 @@ const SubAdmin = () => {
   });
 
   const handleToggleStatus = async (isMaker, id) => {
-    console.log("hit");
+    // console.log("hit");
     const data = {
-      role_xid: isMaker ? "2" : "1",
+      role_xid: isMaker ? CHECKER_ID : MAKER_ID,
     };
-    console.log("=======================",data)
+    console.log("=======================", data);
     try {
-      const res = await toggleStatus({id, data});
+      const res = await toggleStatus({ id, data });
       if (res?.error) {
         toast({
           render: () => (
@@ -137,7 +135,7 @@ const SubAdmin = () => {
     "Action",
   ];
 
-  const extractedArray = subAdmin?.data?.map((item, index) => ({
+  const extractedArray = filteredData?.map((item, index) => ({
     "Sr No": (
       <Text
         w={"24px"}
@@ -147,7 +145,7 @@ const SubAdmin = () => {
         className="d-flex align-items-center fw-bold web-text-small"
       >
         {/* {item.id} */}
-        {generateSerialNumber(index, currentPage, pageSize)}
+        {generateSerialNumber(index)}
       </Text>
     ),
     "First Name": (
@@ -180,13 +178,13 @@ const SubAdmin = () => {
       </Box>
     ),
     Role: (
-      <Box  isTruncated={true} >
+      <Box isTruncated={true}>
         <Badge
           py={"2px"}
           me={2}
           fontWeight={600}
           bg={item?.role[0]?.role === "Maker" ? "#00ffcc" : "#b3ff99"}
-          px={item?.role[0]?.role === "Maker" ? "12px"  : "5px"}
+          px={item?.role[0]?.role === "Maker" ? "12px" : "5px"}
         >
           {item?.role[0]?.role}
         </Badge>
@@ -231,7 +229,7 @@ const SubAdmin = () => {
           </Button>
         </Tooltip>
 
-        {/* <Tooltip
+        <Tooltip
           rounded={"sm"}
           fontSize={"xs"}
           label="Delete"
@@ -240,12 +238,14 @@ const SubAdmin = () => {
           placement="top"
         >
           <Button
+          isDisabled={item?.id === SUPER_ADMIN_ID}
             onClick={() => {
               setActionId(item?.id);
               setDeleteAlert(true);
             }}
             // _hover={{ color: "red.500" }}
             // color="red"
+            // disabled={true}
             rounded={"sm"}
             size={"xs"}
             colorScheme="red"
@@ -253,46 +253,42 @@ const SubAdmin = () => {
           >
             <DeleteIcon />
           </Button>
-        </Tooltip> */}
+        </Tooltip>
       </Box>
     ),
   }));
 
   // ===========================  [ Delete Function ] =================================
 
-  // const handleDelete = async () => {
-  //   console.log(actionId);
-  //   setIsLoading(true);
-  //   try {
-  //     const response = await deleteSponser(actionId);
-  //     console.log(response?.data);
-  //     if (response?.error?.data?.code === 400) {
-  //       toast({
-  //         render: () => (
-  //           <ToastBox
-  //             message={response?.error?.data?.message}
-  //             status={"error"}
-  //           />
-  //         ),
-  //       });
-  //       setIsLoading(false);
-  //       setDeleteAlert(false);
-  //     } else if (
-  //       response?.data?.statusCode === 201 ||
-  //       response?.data?.statusCode === 200
-  //     ) {
-  //       toast({
-  //         render: () => (
-  //           <ToastBox message={response?.data?.message} status={"success"} />
-  //         ),
-  //       });
-  //       setIsLoading(false);
-  //       setDeleteAlert(false);
-  //     }
-  //   } catch (error) {}
-  // };
-
-  console.log(isSponserLoading);
+  const handleDelete = async () => {
+    setIsLoading(true);
+    try {
+      const response = await deleteUser(actionId);
+      if (response?.error?.data?.code === 400) {
+        toast({
+          render: () => (
+            <ToastBox
+              message={response?.error?.data?.message}
+              status={"error"}
+            />
+          ),
+        });
+        setIsLoading(false);
+        setDeleteAlert(false);
+      } else if (
+        response?.data?.statusCode === 201 ||
+        response?.data?.statusCode === 200
+      ) {
+        toast({
+          render: () => (
+            <ToastBox message={response?.data?.message} status={"success"} />
+          ),
+        });
+        setIsLoading(false);
+        setDeleteAlert(false);
+      }
+    } catch (error) {}
+  };
 
   return (
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
@@ -322,14 +318,14 @@ const SubAdmin = () => {
           <HStack display={"flex"} alignItems={"center"}>
             {/* ====================[Pagination]===================== */}
 
-            <Pagination
+            {/* <Pagination
               isLoading={isSponserLoading}
               pageSize={pageSize}
               setPageSize={setPageSize}
               currentPage={currentPage}
               setCurrentPage={setCurrentPage}
               totalItems={subAdmin?.data?.totalItems}
-            />
+            /> */}
 
             {/* =====================[Add Button]===================== */}
 
@@ -366,8 +362,8 @@ const SubAdmin = () => {
       <CustomAlertDialog
         onClose={() => setDeleteAlert(false)}
         isOpen={deleteAlert}
-        message={"Are you sure you want to delete sponers?"}
-        // alertHandler={handleDelete}
+        message={"Are you sure you want to delete sub-admin?"}
+        alertHandler={handleDelete}
         isLoading={isLoading}
       />
     </Box>
diff --git a/src/Services/subadmin.service.js b/src/Services/subadmin.service.js
index d6103b9..8e6305e 100644
--- a/src/Services/subadmin.service.js
+++ b/src/Services/subadmin.service.js
@@ -29,7 +29,7 @@ export const sabAdminMaster = createApi({
         method: "POST",
         body: data,
       }),
-      invalidatesTags: ["getSubAdmin","prePopulate"],
+      invalidatesTags: ["getSubAdmin", "prePopulate"],
     }),
 
     // // ========[Update Sponser]========
@@ -50,7 +50,7 @@ export const sabAdminMaster = createApi({
     // // ========[Toggle Status]========
 
     toggleStatus: builder.mutation({
-      query: ({id, data}) => ({
+      query: ({ id, data }) => ({
         url: `/subadmin/admin/toggle-role/${id}`,
         method: "PATCH",
         body: data,
@@ -58,6 +58,17 @@ export const sabAdminMaster = createApi({
       invalidatesTags: ["getSubAdmin"],
     }),
 
+
+    // ==========[Delete User] ==========
+    deleteUser: builder.mutation({
+      query: (id) => ({
+        url: `/subadmin/admin/${id}`,
+        method: "DELETE",
+      }),
+      invalidatesTags: ["getSubAdmin"],
+    }),
+
+
     // // ========[Get Active]========
 
     // getActiveSponserMaster: builder.query({
@@ -90,9 +101,10 @@ export const sabAdminMaster = createApi({
 
 // Export hooks for usage in functional components
 export const {
-   useGetSubAdminMasterQuery,
-   useCreateSubAdminMutation,
-   useUpdateSubAdminMutation,
-   useGetSubAdminByIdQuery,
-   useToggleStatusMutation
+  useGetSubAdminMasterQuery,
+  useCreateSubAdminMutation,
+  useUpdateSubAdminMutation,
+  useGetSubAdminByIdQuery,
+  useToggleStatusMutation,
+  useDeleteUserMutation,
 } = sabAdminMaster;
-- 
2.34.1


From 20c0c7840fbbfd9a5fc9be93295825427c798172 Mon Sep 17 00:00:00 2001
From: Swapnil Bendal <84583651+Swapnil155@users.noreply.github.com>
Date: Wed, 11 Dec 2024 15:45:56 +0530
Subject: [PATCH 38/49] [update] - constant

---
 src/Constants/Constants.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Constants/Constants.js b/src/Constants/Constants.js
index c863ac9..76567e0 100644
--- a/src/Constants/Constants.js
+++ b/src/Constants/Constants.js
@@ -235,6 +235,6 @@ export const decryptString = (ciphertext) => {
   return originalText;
 };
 
-export const SUPER_ADMIN_ID = import.meta.env.VITE_SUPER_ADMIN_ID || 1
+export const SUPER_ADMIN_ID = Number(import.meta.env.VITE_SUPER_ADMIN_ID) || 1
 export const MAKER_ID = import.meta.env.VITE_MAKER_ID || 1
 export const CHECKER_ID = import.meta.env.VITE_CHECKER_ID || 2
\ No newline at end of file
-- 
2.34.1


From d84b3a0e35b27a38d88159107621690a53af8203 Mon Sep 17 00:00:00 2001
From: Swapnil Bendal <84583651+Swapnil155@users.noreply.github.com>
Date: Wed, 11 Dec 2024 18:47:43 +0530
Subject: [PATCH 39/49] [update] - role check

---
 src/Constants/Constants.js                    |   5 +-
 src/Layout/DefaultLayout.jsx                  |   4 +-
 .../IO_Management/ViewIO/ViewIOdataHeader.jsx | 246 ++++++++----------
 3 files changed, 120 insertions(+), 135 deletions(-)

diff --git a/src/Constants/Constants.js b/src/Constants/Constants.js
index 76567e0..d057af1 100644
--- a/src/Constants/Constants.js
+++ b/src/Constants/Constants.js
@@ -237,4 +237,7 @@ export const decryptString = (ciphertext) => {
 
 export const SUPER_ADMIN_ID = Number(import.meta.env.VITE_SUPER_ADMIN_ID) || 1
 export const MAKER_ID = import.meta.env.VITE_MAKER_ID || 1
-export const CHECKER_ID = import.meta.env.VITE_CHECKER_ID || 2
\ No newline at end of file
+export const CHECKER_ID = import.meta.env.VITE_CHECKER_ID || 2
+
+export const isMaker = () => decryptString(localStorage?.getItem("role")) === import.meta.env.VITE_MAKER;
+export const isChecker = () => decryptString(localStorage?.getItem("role")) === import.meta.env.VITE_CHECKER;
diff --git a/src/Layout/DefaultLayout.jsx b/src/Layout/DefaultLayout.jsx
index 8d0f028..7d44f2b 100644
--- a/src/Layout/DefaultLayout.jsx
+++ b/src/Layout/DefaultLayout.jsx
@@ -157,7 +157,9 @@ const DashboardLayout = ({ isOnline }) => {
       await logout();
       localStorage.clear();
       navigate("/login");
-    } catch (error) {}
+    } catch (error) {
+      console.log(error);
+    }
   };
 
   // // Function to get the title based on the route
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
index 2f0fa4d..ef728c7 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
@@ -1,57 +1,45 @@
 import {
-  Button,
-  Divider,
+  Badge,
+  Box,
+  HStack,
+  Icon,
   Image,
   Menu,
   MenuButton,
   MenuItem,
   MenuList,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Portal,
   Text,
   useDisclosure,
-  MenuItemOption,
-  MenuGroup,
-  MenuOptionGroup,
-  MenuDivider,
-  Badge,
-  Box,
-  Icon,
-  HStack,
   useToast,
 } from "@chakra-ui/react";
-import header from "../../../assets/IOheader.png";
+import { useContext, useRef } from "react";
+import { GrGallery } from "react-icons/gr";
 import { HiDotsVertical } from "react-icons/hi";
-import { Link, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
+import Loader01 from "../../../Components/Loaders/Loader01";
+import ToastBox from "../../../Components/ToastBox";
+import {
+  decryptString,
+  encryptString,
+  isMaker,
+} from "../../../Constants/Constants";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import { useUpdateTransactionMutation } from "../../../Services/io.service";
 import AmountInvested from "./HeaderModal/AmountInvested";
-import FeesExpenses from "./HeaderModal/FeesExpenses";
-import DistributionSponsor from "./HeaderModal/DistributionSponsor";
+import Cancle from "./HeaderModal/Cancle";
 import DistributionInvestor from "./HeaderModal/DistributionInvestor";
+import DistributionSponsor from "./HeaderModal/DistributionSponsor";
+import Exit from "./HeaderModal/Exit";
+import FeesExpenses from "./HeaderModal/FeesExpenses";
 import UpdateIONav from "./HeaderModal/UpdateIONav";
 import UpdateIOStatus from "./HeaderModal/UpdateIOStatus";
-import { useContext, useRef } from "react";
-import GlobalStateContext from "../../../Contexts/GlobalStateContext";
-import Exit from "./HeaderModal/Exit";
-import Cancle from "./HeaderModal/Cancle";
-import { AddIcon } from "@chakra-ui/icons";
-import { GrGallery } from "react-icons/gr";
-import Loader01 from "../../../Components/Loaders/Loader01";
-import { useUpdateTransactionMutation } from "../../../Services/io.service";
-import ToastBox from "../../../Components/ToastBox";
-import { encryptString } from "../../../Constants/Constants";
 // import { formatCurrency } from "../../../Components/CurrencyInput";
 // import { removeTrailingZeros } from "../../../Constants/Constants";
 
 const ViewIOdataHeader = ({ data, isLoading }) => {
-  const params = useParams() 
-    const toast = useToast();
-    const id = params?.id
+  const params = useParams();
+  const toast = useToast();
+  const id = params?.id;
   const { isOpen, onOpen, onClose } = useDisclosure();
   const btnRef = useRef();
   const { IODetails, isIOloading } = useContext(GlobalStateContext);
@@ -113,89 +101,82 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
       IODetails?.artifactsImage?.[0]?.artifactPathName
   );
 
-  const [updateTransaction] = useUpdateTransactionMutation()
+  const [updateTransaction] = useUpdateTransactionMutation();
 
-  const handleDistributionInvestors = async () =>{
-    
+  const handleDistributionInvestors = async () => {
     try {
-       const res = await updateTransaction(id)
-       
-       if (res?.data) {
+      const res = await updateTransaction(id);
+
+      if (res?.data) {
         //  toast({
         //    render: () => (
         //     <ToastBox status={"success"} message={res?.data?.message} />
         //    ),
         //  });
         //  setIsLoading(false);
-        onDistInvestorOpen()
- 
-       } else if (res?.error) {
-         toast({
-           render: () => (
-             <ToastBox status={"error"} message={res?.error?.data?.message} />
-           ),
-         });
+        onDistInvestorOpen();
+      } else if (res?.error) {
+        toast({
+          render: () => (
+            <ToastBox status={"error"} message={res?.error?.data?.message} />
+          ),
+        });
         //  setIsLoading(false);
-       }
-    } catch (error) { 
-     
+      }
+    } catch (error) {
+      console.log(error);
     }
-   }
+  };
 
-   const handleExit = async () =>{
-    
+  const handleExit = async () => {
     try {
-       const res = await updateTransaction(id)
-       
-       if (res?.data) {
+      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={"error"} message={res?.error?.data?.message} />
-           ),
-         });
+        onExitOpen();
+      } else if (res?.error) {
+        toast({
+          render: () => (
+            <ToastBox status={"error"} message={res?.error?.data?.message} />
+          ),
+        });
         //  setIsLoading(false);
-       }
-    } catch (error) { 
-     
+      }
+    } catch (error) {
+      console.log(error);
     }
-   }
+  };
 
-   const handleInvestment = async () =>{
-    
+  const handleInvestment = async () => {
     try {
-       const res = await updateTransaction(id)
-       
-       if (res?.data) {
+      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({
-           render: () => (
-             <ToastBox status={"error"} message={res?.error?.data?.message} />
-           ),
-         });
+        onInvestmentOpen();
+      } else if (res?.error) {
+        toast({
+          render: () => (
+            <ToastBox status={"error"} message={res?.error?.data?.message} />
+          ),
+        });
         //  setIsLoading(false);
-       }
-    } catch (error) { 
-     
+      }
+    } catch (error) {
+      console.log(error);
     }
-   }
-   
+  };
 
   const menu = [
     {
@@ -217,7 +198,7 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
       id: 6,
       title: "Distribution To Investors",
       onClickFunction: handleDistributionInvestors,
-    }, 
+    },
     {
       id: 5,
       title: "Update IO NAV",
@@ -251,8 +232,8 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
     apiTransactionTitles?.includes(item.id)
   );
 
-
-  const balanceAmount = IODetails?.goalAmount - IODetails?.totalAmtInvestmentInUSD
+  const balanceAmount =
+    IODetails?.goalAmount - IODetails?.totalAmtInvestmentInUSD;
 
   return IODetails?.investmentNameEnglish ? (
     <Box
@@ -318,7 +299,6 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
         </Box>
 
         <Box>
-
           <Box display={"flex"} gap={2} pb={1}>
             <Text
               as={"span"}
@@ -336,7 +316,7 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
             </Text>
           </Box>
 
-          <Box  display={"flex"} gap={2} pb={1}>
+          <Box display={"flex"} gap={2} pb={1}>
             <Text
               as={"span"}
               fontSize={"xs"}
@@ -353,7 +333,7 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
             </Text>
           </Box>
 
-          <Box  display={"flex"}  gap={2} pb={1}>
+          <Box display={"flex"} gap={2} pb={1}>
             <Text
               as={"span"}
               fontSize={"xs"}
@@ -364,18 +344,13 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
               IO ID :-
             </Text>
             <Text as={"span"} fontSize={"xs"} fontWeight={"500"}>
-              {IODetails?.io_id
-                ? IODetails?.io_id
-                : "---"}
+              {IODetails?.io_id ? IODetails?.io_id : "---"}
             </Text>
           </Box>
-          
         </Box>
-        
       </HStack>
-       
-      <Box gap={8} me={12} w={"220px"}>
 
+      <Box gap={8} me={12} w={"220px"}>
         <Box display={"flex"} justifyContent={"space-between"} gap={2} pb={1}>
           <Text
             as={"span"}
@@ -405,10 +380,13 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
           </Text>
           <Text as={"span"} fontSize={"xs"} fontWeight={"500"}>
             {/* {IODetails?.ioCash ? formatCurrency(removeTrailingZeros(IODetails?.ioCash)) : "00.00"} */}
-            {parseFloat(IODetails?.totalAmtInvestmentInUSD || 0).toLocaleString(undefined, {
-              minimumFractionDigits: 2,
-              maximumFractionDigits: 2,
-            })}
+            {parseFloat(IODetails?.totalAmtInvestmentInUSD || 0).toLocaleString(
+              undefined,
+              {
+                minimumFractionDigits: 2,
+                maximumFractionDigits: 2,
+              }
+            )}
           </Text>
         </Box>
 
@@ -533,39 +511,41 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
         alignItems={"start"}
         height={"95px"}
       >
-        {localStorage?.getItem("role") === encryptString(import.meta.env.VITE_VITE_MAKER) && <Menu>
-          <MenuButton 
-            className="link p-1 rounded-1 "
-            bg={"#fff"}
-            _hover={{ backgroundColor: "#fff !important" }}
-            onClick={onOpen}
-            ref={btnRef}
-          >
-            <HiDotsVertical className="rubix-text-dark fs-6" />
-          </MenuButton>
-          <MenuList fontSize={"sm"}>
-            <MenuItem
-              _hover={{
-                bg: "#fff",
-              }}
-              as={"span"}
-              fontWeight={600}
-              className="border-bottom"
+        {isMaker() && (
+          <Menu>
+            <MenuButton
+              className="link p-1 rounded-1 "
+              bg={"#fff"}
+              _hover={{ backgroundColor: "#fff !important" }}
+              onClick={onOpen}
+              ref={btnRef}
             >
-              Tansaction
-            </MenuItem>
-
-            {filteredMenu?.map(({ id, title, onClickFunction }) => (
+              <HiDotsVertical className="rubix-text-dark fs-6" />
+            </MenuButton>
+            <MenuList fontSize={"sm"}>
               <MenuItem
-                key={id}
-                onClick={onClickFunction}
+                _hover={{
+                  bg: "#fff",
+                }}
+                as={"span"}
+                fontWeight={600}
                 className="border-bottom"
               >
-                {title}
+                Tansaction
               </MenuItem>
-            ))}
-          </MenuList>
-        </Menu>}
+
+              {filteredMenu?.map(({ id, title, onClickFunction }) => (
+                <MenuItem
+                  key={id}
+                  onClick={onClickFunction}
+                  className="border-bottom"
+                >
+                  {title}
+                </MenuItem>
+              ))}
+            </MenuList>
+          </Menu>
+        )}
 
         {/* Modals */}
         <AmountInvested isOpen={isInvestmentOpen} onClose={onInvestmentClose} />
-- 
2.34.1


From ed27ed6939b2d80f7a5e4e6296e1f1764e692269 Mon Sep 17 00:00:00 2001
From: Swapnil Bendal <84583651+Swapnil155@users.noreply.github.com>
Date: Wed, 11 Dec 2024 19:36:06 +0530
Subject: [PATCH 40/49] [update] - io cash, IO nav and pending

---
 .../CreateIO/IOCashDetails/IOCashDetails.jsx  |  7 +--
 .../CreateIO/IONAVDetails/IONAVDetails.jsx    |  4 +-
 .../CreateIO/IOTransaction/Pending.jsx        | 48 ++++++++++---------
 3 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx
index 255c726..505ba1d 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx
@@ -20,7 +20,7 @@ import AddCaseDetails from "./AddCaseDetails";
 import { useUpdateIOCaseMutation } from "../../../../Services/io.service";
 import ToastBox from "../../../../Components/ToastBox";
 import { useParams } from "react-router-dom";
-import { encryptString } from "../../../../Constants/Constants";
+import { encryptString, isMaker } from "../../../../Constants/Constants";
 
 const IOCashDetails = () => {
   const params = useParams();
@@ -88,7 +88,8 @@ const IOCashDetails = () => {
               Pending
               {IODetails?.ioCashStatusHistory?.Pending.length > 0 && (
                 <Badge rounded={"sm"} colorScheme="forestGreen" ms={2}>
-                  {IODetails?.ioCashStatusHistory?.Pending.length !== 0 && IODetails?.ioCashStatusHistory?.Pending.length}
+                  {IODetails?.ioCashStatusHistory?.Pending.length !== 0 &&
+                    IODetails?.ioCashStatusHistory?.Pending.length}
                 </Badge>
               )}
               {/* <Badge rounded={"sm"} colorScheme="forestGreen" ms={2}>
@@ -106,7 +107,7 @@ const IOCashDetails = () => {
             </Tab>
           </TabList>
           {IODetails?.isInvestedAmount
-            ? localStorage?.getItem("role") === encryptString(import.meta.env.VITE_VITE_MAKER) && (
+            ? isMaker() && (
                 <Button
                   onClick={handleAdd}
                   leftIcon={<AddIcon />}
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/IONAVDetails.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/IONAVDetails.jsx
index d9fee12..2db38b7 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/IONAVDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/IONAVDetails.jsx
@@ -75,7 +75,7 @@ import ToastBox from "../../../../Components/ToastBox";
 import { useParams } from "react-router-dom";
 import AddNavDetails from "./AddNavDetails";
 import { useUpdateIOCaseMutation } from "../../../../Services/io.service";
-import { encryptString } from "../../../../Constants/Constants";
+import { encryptString, isMaker } from "../../../../Constants/Constants";
 
 const IONAVDetails = () => {
   const params = useParams();
@@ -153,7 +153,7 @@ const IONAVDetails = () => {
             </Tab>
           </TabList>
           {IODetails?.isInvestedAmount
-            ? localStorage?.getItem("role") === encryptString(import.meta.env.VITE_VITE_MAKER) && (
+            ? isMaker() && (
                 <Button
                   onClick={handleAdd}
                   leftIcon={<AddIcon />}
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
index d7d181a..2653a94 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
@@ -27,7 +27,7 @@ import ViewAmountInvested from "./ViewAmountInvested";
 import ViewDistributionInvestor from "./ViewDistributionInvestor";
 import ViewExit from "./ViewExit";
 import ViewCancel from "./ViewCancel";
-import { encryptString } from "../../../../Constants/Constants";
+import { encryptString, isMaker } from "../../../../Constants/Constants";
 
 const formatDate = (date) => new Date(date).toLocaleDateString();
 
@@ -128,11 +128,7 @@ const Pending = () => {
         </Text>
       ),
       "Transaction Date": (
-        <Text
-          as={"span"}
-          color={"gray.600"}
-          fontWeight={"500"}
-        >
+        <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
           {formatDate(item?.transactionDate)}
         </Text>
       ),
@@ -153,8 +149,13 @@ const Pending = () => {
         </Text>
       ),
       "Created By": (
-        <Text 
-        textTransform={'capitalize'} w={"100px"} as={"span"} color={"gray.800"} fontWeight={"500"}>
+        <Text
+          textTransform={"capitalize"}
+          w={"100px"}
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+        >
           {item?.creator?.firstName}
         </Text>
       ),
@@ -164,8 +165,13 @@ const Pending = () => {
         </Text>
       ),
       "Approved By": (
-        <Text 
-        textTransform={'capitalize'} w={"100px"} as={"span"} color={"gray.800"} fontWeight={"500"}>
+        <Text
+          textTransform={"capitalize"}
+          w={"100px"}
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+        >
           {item?.modifier?.firstName}
         </Text>
       ),
@@ -196,7 +202,11 @@ const Pending = () => {
               }
             }}
           >
-            {localStorage?.getItem("role") === encryptString(import.meta.env.VITE_VITE_MAKER) ?  <ViewIcon me={"4px"} /> : null} {localStorage?.getItem("role") === encryptString(import.meta.env.VITE_VITE_MAKER) ?  "View" : "Approve / Reject"}
+            {isMaker() ? <ViewIcon me={"4px"} /> : null}{" "}
+            {localStorage?.getItem("role") ===
+            encryptString(import.meta.env.VITE_VITE_MAKER)
+              ? "View"
+              : "Approve / Reject"}
           </Button>
         </Box>
       ),
@@ -263,20 +273,12 @@ const Pending = () => {
         id={actionId}
       />
       <ViewDistributionInvestor
-          isOpen={isDistInvestorOpen}
-          onClose={onDistInvestorClose}
-          id={actionId}
-        />
-      <ViewExit 
-        isOpen={isExitOpen} 
-        onClose={onExitClose} 
+        isOpen={isDistInvestorOpen}
+        onClose={onDistInvestorClose}
         id={actionId}
       />
-      <ViewCancel 
-        isOpen={isCancelOpen} 
-        onClose={onCancelClose}
-        id={actionId} 
-      />
+      <ViewExit isOpen={isExitOpen} onClose={onExitClose} id={actionId} />
+      <ViewCancel isOpen={isCancelOpen} onClose={onCancelClose} id={actionId} />
       <RequestApproveModal
         // data={data?.data?.rows}
         isOpen={isConfirmOpen}
-- 
2.34.1


From 49beb9539a07485c0b3450710e2716666e6a09e3 Mon Sep 17 00:00:00 2001
From: Swapnil Bendal <84583651+Swapnil155@users.noreply.github.com>
Date: Wed, 11 Dec 2024 20:30:52 +0530
Subject: [PATCH 41/49] [fixed] - role

---
 src/Layout/DefaultLayout.jsx                  | 116 +++++++-----------
 .../IO_Management/CreateIO/IODetails.jsx      |   1 -
 src/Pages/IO_Management/EditViewIO.jsx        |  64 +++-------
 src/Pages/IO_Management/ViewIO/ViewIOdata.jsx |  46 +++----
 .../IO_Management/ViewIO/ViewIOdataHeader.jsx |  10 ++
 src/Services/io.service.js                    |  64 +++++-----
 src/Services/token.serivce.js                 |  25 +++-
 7 files changed, 144 insertions(+), 182 deletions(-)

diff --git a/src/Layout/DefaultLayout.jsx b/src/Layout/DefaultLayout.jsx
index 7d44f2b..b24a572 100644
--- a/src/Layout/DefaultLayout.jsx
+++ b/src/Layout/DefaultLayout.jsx
@@ -1,26 +1,48 @@
 import React, { useContext, useEffect, useState } from "react";
-import logo from "../assets/logo2.png";
-import logoDark from "../assets/logo.png";
-import logoMini from "../assets/logo-min.png";
-import logoMiniDark from "../assets/favicon.png";
-import { useDispatch } from "react-redux";
-import { loginUser } from "../Redux/Slice/auth";
-import Button02 from "../Components/Buttons/Button02";
 import { CgProfile } from "react-icons/cg";
+import { useDispatch } from "react-redux";
+import logoMiniDark from "../assets/favicon.png";
+import logoMini from "../assets/logo-min.png";
+import logoDark from "../assets/logo.png";
+import logo from "../assets/logo2.png";
 
-import {
-  TbArrowBadgeLeftFilled,
-  TbListDetails,
-  TbReportMoney,
-  TbTransactionDollar,
-} from "react-icons/tb";
-import { TbArrowBadgeRightFilled } from "react-icons/tb";
 import {
   ArrowBackIcon,
   ArrowLeftIcon,
   ArrowRightIcon,
   AtSignIcon,
 } from "@chakra-ui/icons";
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Alert,
+  AlertIcon,
+  Box,
+  Button,
+  Image,
+  Text,
+  Tooltip
+} from "@chakra-ui/react";
+import Cookies from "js-cookie"; // Import the Cookies library
+import { GrManual } from "react-icons/gr";
+import { HiOutlineChartSquareBar } from "react-icons/hi";
+import { LuContact } from "react-icons/lu";
+import { MdNotificationsNone, MdOutlineAddChart } from "react-icons/md";
+import {
+  RiBankLine,
+  RiExchangeBoxLine,
+  RiFileUserLine,
+  RiMoneyDollarBoxLine,
+} from "react-icons/ri";
+import {
+  TbListDetails,
+  TbReportMoney,
+  TbTransactionDollar
+} from "react-icons/tb";
+import { VscSymbolClass } from "react-icons/vsc";
 import {
   Link,
   NavLink,
@@ -29,71 +51,21 @@ import {
   useLocation,
   useNavigate,
 } from "react-router-dom";
-import { RouteLink } from "../Routes/Routes";
-import NotFound from "../Pages/NotFound";
-import { nav } from "../Routes/Nav";
-import {
-  Avatar,
-  Box,
-  Button,
-  PopoverArrow,
-  PopoverBody,
-  PopoverCloseButton,
-  PopoverContent,
-  PopoverFooter,
-  PopoverHeader,
-  PopoverTrigger,
-  Portal,
-  Text,
-  WrapItem,
-  Popover,
-  Tag,
-  Accordion,
-  AccordionItem,
-  AccordionButton,
-  AccordionIcon,
-  AccordionPanel,
-  Image,
-  Alert,
-  AlertIcon,
-  Breadcrumb,
-  Divider,
-  Tooltip,
-  useRadio,
-} from "@chakra-ui/react";
-import GlobalStateContext from "../Contexts/GlobalStateContext";
-import Cookies from "js-cookie"; // Import the Cookies library
-import Header from "../Components/Header";
 import HeaderMain from "../Components/HeaderMain";
-import { IoMdSwap } from "react-icons/io";
-import {
-  RiBankLine,
-  RiExchangeBoxLine,
-  RiFileUserLine,
-  RiMoneyDollarBoxLine,
-} from "react-icons/ri";
-import { VscSymbolClass } from "react-icons/vsc";
-import { MdNotificationsNone, MdOutlineAddChart } from "react-icons/md";
-import { HiOutlineChartSquareBar } from "react-icons/hi";
-import { GrManual } from "react-icons/gr";
-import { LuContact } from "react-icons/lu";
-import shield from "../assets/shield.png";
-import SplashScreen from "../Pages/SplashScreen";
-import CutomBreadcrumb from "../Components/CutomBreadcrumb";
-import CustomBreadcrumb from "../Components/CutomBreadcrumb";
-import { getCountdownTimer } from "../Constants/Constants";
-import { useLogoutMutation } from "../Services/token.serivce";
+import GlobalStateContext from "../Contexts/GlobalStateContext";
 import CreateRequest from "../Pages/Fawateer/CreateRequest";
-import ApproveRequest from "../Pages/FawateerChecker/ApproveRequest/ApproveRequest";
-import ApproveHistoryMaker from "../Pages/FawateerChecker/ApproveHistory/ApproveHistoryMaker";
 import ApproveHistory from "../Pages/FawateerChecker/ApproveHistory/ApproveHistoryChecker";
+import ApproveHistoryMaker from "../Pages/FawateerChecker/ApproveHistory/ApproveHistoryMaker";
+import ApproveRequest from "../Pages/FawateerChecker/ApproveRequest/ApproveRequest";
+import NotFound from "../Pages/NotFound";
+import SplashScreen from "../Pages/SplashScreen";
+import { nav } from "../Routes/Nav";
+import { RouteLink } from "../Routes/Routes";
 import { useProfileQuery } from "../Services/io.service";
-import SubAdmin from "../Pages/SubAdmin/SubAdmin";
+import { useLogoutMutation } from "../Services/token.serivce";
 
 const DashboardLayout = ({ isOnline }) => {
-  const userRole = localStorage.getItem("role");
   const navigate = useNavigate();
-  const dispach = useDispatch();
   const location = useLocation();
   const path = location.pathname;
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
diff --git a/src/Pages/IO_Management/CreateIO/IODetails.jsx b/src/Pages/IO_Management/CreateIO/IODetails.jsx
index de5ce86..06f528d 100644
--- a/src/Pages/IO_Management/CreateIO/IODetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IODetails.jsx
@@ -235,7 +235,6 @@ const IODetails = ({ enableNextTab, index, data }) => {
   
   const [values, setValues] = useState(id?minInvestmentById:miniValue);
 
-  console.log(values);
   
   const formatNumber = (num) => {
     // Remove non-numeric characters and format with commas
diff --git a/src/Pages/IO_Management/EditViewIO.jsx b/src/Pages/IO_Management/EditViewIO.jsx
index d22d718..e31fa3c 100644
--- a/src/Pages/IO_Management/EditViewIO.jsx
+++ b/src/Pages/IO_Management/EditViewIO.jsx
@@ -1,57 +1,29 @@
-import React, { useContext, useEffect, useState } from "react";
-import { OPACITY_ON_LOAD } from "../../../Layout/animations";
 import {
   Box,
-  Divider,
-  FormControl,
-  FormLabel,
-  Heading,
-  Input,
-  Select,
-  Textarea,
-  Button,
-  Text,
-  Image,
-  Tabs,
-  TabList,
   Tab,
+  TabList,
   TabPanel,
   TabPanels,
-  Tooltip,
-  Switch,
+  Tabs,
   useDisclosure,
 } from "@chakra-ui/react";
-import { useForm, Controller } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
-import * as yup from "yup";
-import {
-  AddIcon,
-  CloseIcon,
-  DeleteIcon,
-  EditIcon,
-  ViewIcon,
-  WarningTwoIcon,
-} from "@chakra-ui/icons";
-import { TiWarning } from "react-icons/ti";
-import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import React, { useContext, useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router-dom";
-import FormField from "../../../Components/FormField";
-import { v4 as uuidv4 } from "uuid";
-import AddIOCharges from "../AddIOCharges";
-import FormInputMain from "../../../Components/FormInputMain";
-import DataTable from "../../../Components/DataTable/DataTable";
-import { debounce } from "../../Master/Sponser/AddSponser";
-import CustomAlertDialog from "../../../Components/CustomAlertDialog";
-import { formatDate } from "../../../Components/Functions/UTCConvertor";
-import IODetails from "./IODetails";
-import KeyMerits from "./KeyMerits";
-import IOArtifacts from "./IOArtifacts";
-import Investors from "./Investors";
-import IOCashDetails from "./IOCashDetails";
-import IONAVDetails from "./IONAVDetails";
+import * as yup from "yup";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
 import Distribution from "./Destribution";
-import InvestmentDocuments from "../InvestmentDocuments";
 import InvestmentDocument from "./InvestmentDocument";
+import Investors from "./Investors";
+import IOArtifacts from "./IOArtifacts";
+import IOCashDetails from "./IOCashDetails";
+import IODetails from "./IODetails";
+import IONAVDetails from "./IONAVDetails";
+import KeyMerits from "./KeyMerits";
+import { useAuthProfileQuery } from "../../Services/token.serivce";
+import { encryptString } from "../../Constants/Constants";
 
 const schema = yup.object().shape({
   ioName: yup.string().required("Arabic name is required"),
@@ -59,7 +31,9 @@ const schema = yup.object().shape({
   discription: yup.string().required("Description is required"),
   discriptionArabic: yup.string().required("Arabic Description is required"),
   typeName: yup.string().required("Investment type is required"),
-  typeNameArabic: yup.string().required("Investment type arabic name is required"),
+  typeNameArabic: yup
+    .string()
+    .required("Investment type arabic name is required"),
   sponserName: yup.string().required("Sponsorer name is required"),
   sponserNameArabic: yup
     .string()
@@ -293,7 +267,7 @@ const EditViewIO = () => {
       isRequired: true,
       section: " ",
       width: "32.3%",
-    }, 
+    },
     {
       label: "Name (Arabic)",
       placeHolder: " ",
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
index 0360eee..b901c9a 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
@@ -1,8 +1,6 @@
 import {
   Box,
   Button,
-  Icon,
-  Input,
   keyframes,
   Stack,
   Tab,
@@ -10,40 +8,29 @@ import {
   TabPanel,
   TabPanels,
   Tabs,
-  Text,
-  useDisclosure,
+  useDisclosure
 } from "@chakra-ui/react";
+import { useContext, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import GlobalStateContext from "../../../Contexts/GlobalStateContext";
-import { useContext, useEffect, useState } from "react";
-import FormInputView from "../../../Components/FormInputView";
-import { useForm } from "react-hook-form"; // assuming react-hook-form is used
 import { OPACITY_ON_LOAD } from "../../../Layout/animations";
-import { ArrowBackIcon, RepeatIcon } from "@chakra-ui/icons";
-import CustomAlertDialog from "../../../Components/CustomAlertDialog";
+import InvestmentDocument from "../CreateIO/InvestmentDocument";
+import Investors from "../CreateIO/Investors";
+import IOArtifacts from "../CreateIO/IOArtifacts";
+import KeyMerits from "../CreateIO/KeyMerits";
 import ViewIOdataHeader from "./ViewIOdataHeader";
 import ViewIOdetails from "./ViewIOdetails";
-import ViewIOdocs from "./ViewIOdocs";
-import ViewKeyMerits from "./ViewKeyMerits";
-import ViewIOartifacts from "./ViewIOartifacts";
-import ViewInvestors from "./ViewInvestors";
-import ViewIOcash from "./ViewIOcash";
-import ViewIOnav from "./ViewIOnav";
-import ViewDistribution from "./ViewDistribution";
-import InvestmentDocument from "../CreateIO/InvestmentDocument";
-import KeyMerits from "../CreateIO/KeyMerits";
-import Investors from "../CreateIO/Investors";
-import EditIO from "../EditIO/EditIO";
-import IOArtifacts from "../CreateIO/IOArtifacts";
 // import IOCashDetails from "../CreateIO/IOCashDetailsold";
 // import IONAVDetails from "../CreateIO/IONAVDetailsOld";
-import { useGetIOByIdQuery, useGetIOprepopulateDataQuery } from "../../../Services/io.service";
-import UnderConstruction from "../../UnderConstruction";
+import { GoDotFill } from "react-icons/go";
+import {
+  useGetIOByIdQuery,
+  useGetIOprepopulateDataQuery,
+} from "../../../Services/io.service";
 import Destribution from "../CreateIO/Destribution";
 import IOCashDetails from "../CreateIO/IOCashDetails/IOCashDetails";
 import IONAVDetails from "../CreateIO/IONAVDetails/IONAVDetails";
 import IOTransaction from "../CreateIO/IOTransaction/IOTransaction";
-import { GoDotFill } from "react-icons/go";
 
 const rotate = keyframes`
   from {
@@ -69,7 +56,6 @@ const ViewIOdata = () => {
   const [isEditing, setIsEditing] = useState(false);
   const [isRefetchLoading, setIsRefetchLoading] = useState(false);
   const { IODetails, setIODetails } = useContext(GlobalStateContext);
-  console.log(IODetails?.isInvestedAmount);
 
   const tabs = [
     { label: "IO Details", content: <ViewIOdetails data={data?.data} /> },
@@ -193,13 +179,19 @@ const ViewIOdata = () => {
                 cursor={"pointer"}
               />
             </Box> */}
-            <Stack position={"absolute"} right={1} bottom={1} direction="row" spacing={4}>
+            <Stack
+              position={"absolute"}
+              right={1}
+              bottom={1}
+              direction="row"
+              spacing={4}
+            >
               <Button
                 isLoading={isRefetchLoading}
                 loadingText="Refresh"
                 colorScheme="forestGreen"
                 variant="solid"
-                size={'xs'}
+                size={"xs"}
                 onClick={handleRefresh}
                 fontWeight={400}
               >
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
index ef728c7..d68e810 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
@@ -33,6 +33,7 @@ import Exit from "./HeaderModal/Exit";
 import FeesExpenses from "./HeaderModal/FeesExpenses";
 import UpdateIONav from "./HeaderModal/UpdateIONav";
 import UpdateIOStatus from "./HeaderModal/UpdateIOStatus";
+import { useAuthProfileQuery } from "../../../Services/token.serivce";
 // import { formatCurrency } from "../../../Components/CurrencyInput";
 // import { removeTrailingZeros } from "../../../Constants/Constants";
 
@@ -44,6 +45,15 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
   const btnRef = useRef();
   const { IODetails, isIOloading } = useContext(GlobalStateContext);
 
+  const { data: authProfile } = useAuthProfileQuery();
+  if (authProfile?.data?.role) {
+    localStorage.setItem("role", encryptString(authProfile.data.role));
+  } else {
+    console.warn("Role is undefined or null. Skipping localStorage update.");
+  }
+
+  
+
   const {
     isOpen: isInvestmentOpen,
     onOpen: onInvestmentOpen,
diff --git a/src/Services/io.service.js b/src/Services/io.service.js
index 77db31a..b19cd61 100644
--- a/src/Services/io.service.js
+++ b/src/Services/io.service.js
@@ -421,7 +421,7 @@ export const ioService = createApi({
     }),
 
     profile: builder.query({
-      query: (id) => `/auth/admin/profile`,
+      query: () => `/auth/admin/profile`,
     }),
 
     // ========Add Io Details========
@@ -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`,
@@ -448,45 +448,45 @@ export const ioService = createApi({
 
 
     addNavDetails: builder.mutation({
-      query: ({id,data}) => ({
+      query: ({ id, data }) => ({
         url: `/io/admin/maker-transaction/${id}/io-nav`,
         method: "POST",
-        body:data,
+        body: data,
       }),
 
       invalidatesTags: ["getIOById"],
     }),
 
     addIOTransaction: builder.mutation({
-      query: ({id,data}) => ({
+      query: ({ id, data }) => ({
         url: `/io/admin/maker-transaction/${id}/io-nav`,
         method: "POST",
-        body:data,
+        body: data,
       }),
 
       invalidatesTags: ["getIOById"],
     }),
 
     saveIOTransaction: builder.mutation({
-      query: ({id,data}) => ({
+      query: ({ id, data }) => ({
         url: `/io/admin/maker-transaction/${id}/io-yeild`,
         method: "POST",
-        body:data,
+        body: data,
       }),
 
       invalidatesTags: ["getIOById"],
     }),
 
     exitIOTransaction: builder.mutation({
-      query: ({id,data}) => ({
+      query: ({ id, data }) => ({
         url: `/io/admin/maker-transaction/${id}/io-exit`,
         method: "POST",
-        body:data,
+        body: data,
       }),
 
       invalidatesTags: ["getIOById"],
     }),
-    
+
 
     addIoCase: builder.mutation({
       query: (id) => ({
@@ -499,10 +499,10 @@ export const ioService = createApi({
 
 
     approveIOCase: builder.mutation({
-      query: ({id,data}) => ({
+      query: ({ id, data }) => ({
         url: `/io/admin/checker-transaction/approved/io-cash/${id}`,
         method: "PATCH",
-        body:data,
+        body: data,
       }),
 
       invalidatesTags: ["getIOById"],
@@ -510,71 +510,71 @@ export const ioService = createApi({
 
 
     approveIONav: builder.mutation({
-      query: ({id,data}) => ({
+      query: ({ id, data }) => ({
         url: `/io/admin/checker-transaction/approved/io-nav/${id}`,
         method: "PATCH",
-        body:data,
+        body: data,
       }),
 
       invalidatesTags: ["getIOById"],
     }),
 
     approveDistribution: builder.mutation({
-      query: ({id,data}) => ({
+      query: ({ id, data }) => ({
         url: `/io/admin/checker-transaction/approved/distributed-to-investor/${id}`,
         method: "PATCH",
-        body:data,
+        body: data,
       }),
 
       invalidatesTags: ["getIOById"],
     }),
 
-    
+
     approveExit: builder.mutation({
-      query: ({id,data}) => ({
+      query: ({ id, data }) => ({
         url: `/io/admin/checker-transaction/approved/exit/${id}`,
         method: "PATCH",
-        body:data,
+        body: data,
       }),
 
       invalidatesTags: ["getIOById"],
     }),
 
     approveInvested: builder.mutation({
-      query: ({id,data}) => ({
+      query: ({ id, data }) => ({
         url: `/io/admin/checker-transaction/approved/amount-invested/${id}`,
         method: "PATCH",
-        body:data,
+        body: data,
       }),
 
       invalidatesTags: ["getIOById"],
     }),
-    
+
     approveDistributed: builder.mutation({
-      query: ({id,data}) => ({
+      query: ({ id, data }) => ({
         url: `/io/admin/checker-transaction/approved/distributed-to-investor/${id}`,
         method: "PATCH",
-        body:data,
+        body: data,
       }),
 
       invalidatesTags: ["getIOById"],
     }),
 
     approveExitTransaction: builder.mutation({
-      query: ({id,data}) => ({
+      query: ({ id, data }) => ({
         url: `/io/admin/checker-transaction/approved/exit/${id}`,
         method: "PATCH",
-        body:data,
+        body: data,
       }),
 
       invalidatesTags: ["getIOById"],
     }),
 
     approveCancleTransaction: builder.mutation({
-      query: ({id,data}) => ({
+      query: ({ id, data }) => ({
         url: `/io/admin/checker-transaction/approved/cancel/${id}`,
         method: "PATCH",
-        body:data,
+        body: data,
       }),
 
       invalidatesTags: ["getIOById"],
@@ -582,16 +582,16 @@ export const ioService = createApi({
 
 
     rejectIOCase: builder.mutation({
-      query: ({id,data}) => ({
+      query: ({ id, data }) => ({
         url: `/io/admin/checker-transaction/reject/${id}`,
         method: "PATCH",
-        body:data,
+        body: data,
       }),
 
       invalidatesTags: ["getIOById"],
     }),
 
- 
+
   }),
 });
 
diff --git a/src/Services/token.serivce.js b/src/Services/token.serivce.js
index 2cc9d7e..a7ce6d8 100644
--- a/src/Services/token.serivce.js
+++ b/src/Services/token.serivce.js
@@ -45,15 +45,13 @@ export const baseQuery = async (args, api, extraOptions) => {
       } catch (err) {
         console.error("Failed to refresh token:", err);
         localStorage.clear();
-        // window.location.href = '/login';  // Redirect to login page
+        window.location.href = '/login';  // Redirect to login page
       }
     } else if (result.error.status === 401) {
       localStorage.clear();
-      // window.location.href = '/login';
+      window.location.href = '/login';
     }
   }
-  // console.log(result);
-
   return result;
 };
 
@@ -61,6 +59,7 @@ export const baseQuery = async (args, api, extraOptions) => {
 export const apiSlice = createApi({
   reducerPath: "api",
   baseQuery: baseQuery,
+  tagTypes: ["authProfile"],
   endpoints: (builder) => ({
 
     login: builder.mutation({
@@ -94,7 +93,23 @@ export const apiSlice = createApi({
       }),
     }),
 
+    authProfile: builder.query({
+      query: () => `/auth/admin/profile`,
+      providesTags: (result) => result ? [{ type: 'Auth', id: 'profile' }] : [],
+      onQueryStarted: async (args, { queryFulfilled }) => {
+        try {
+          const { data } = await queryFulfilled; // Get the data from the query response
+          if (data?.role) {
+            localStorage.setItem('role', encryptString(data.role));
+          }
+        } catch (error) {
+          console.error('Error setting role in localStorage:', error);
+        }
+      },
+    }),
+
+
   }),
 });
 
-export const { useLoginMutation, useRefreshTokenMutation, useLogoutMutation } = apiSlice;
+export const { useLoginMutation, useRefreshTokenMutation, useLogoutMutation, useAuthProfileQuery } = apiSlice;
-- 
2.34.1


From f9c7bf9d5de0568a89c006a527ea5d74884ff084 Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Thu, 12 Dec 2024 13:20:12 +0530
Subject: [PATCH 42/49] update forget passsword

---
 src/Layout/DefaultLayout.jsx |  7 +++++++
 src/Pages/ForgetPassword.jsx | 10 +++++-----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/Layout/DefaultLayout.jsx b/src/Layout/DefaultLayout.jsx
index b24a572..23044a7 100644
--- a/src/Layout/DefaultLayout.jsx
+++ b/src/Layout/DefaultLayout.jsx
@@ -349,6 +349,13 @@ const DashboardLayout = ({ isOnline }) => {
             Deletion request
           </span>
         );
+        case path.startsWith("/subadmin"):
+        return (
+          <span className="d-flex align-items-end gap-2">
+            <RiMoneyDollarBoxLine className="h4 m-0 fw-normal" />
+            Manage SubAdmin
+          </span>
+        );
 
       default:
         if (path.startsWith("/community/view/")) {
diff --git a/src/Pages/ForgetPassword.jsx b/src/Pages/ForgetPassword.jsx
index 23ed47b..0a16eee 100644
--- a/src/Pages/ForgetPassword.jsx
+++ b/src/Pages/ForgetPassword.jsx
@@ -25,7 +25,7 @@ const validationSchema = yup.object().shape({
   emailAddress: yup
     .string()
     .email("Invalid email format")
-    .required("Email, Phone, or Username is required"),
+    .required("email address is required"),
 });
 
 const ForgetPassword = ({ isOpen, onClose, firstField }) => {
@@ -52,7 +52,7 @@ const ForgetPassword = ({ isOpen, onClose, firstField }) => {
           render: () => <ToastBox message={res?.data?.message} />,
         });
         handleClose();
-      } else if (res?.error?.status === 401) {
+      } else if (res?.error?.status === 400) {
         toast({
           render: () => (
             <ToastBox message={res?.error?.data?.message} status="error" />
@@ -86,9 +86,9 @@ const ForgetPassword = ({ isOpen, onClose, firstField }) => {
           <ModalCloseButton />
           <ModalBody pb={4}>
             <Stack spacing={4}>
-              <FormControl isInvalid={errors.emailAddress}>
+              <FormControl isInvalid={errors.emailAddress} isRequired>
                 <FormLabel fontSize="sm" mb={3} fontWeight={500}>
-                  Email, Phone, or Username
+                  Please Enter Email Adress
                 </FormLabel>
                 <Controller
                   name="emailAddress"
@@ -122,7 +122,7 @@ const ForgetPassword = ({ isOpen, onClose, firstField }) => {
               fontWeight={400}
               fontSize="sm"
             >
-              Send Login Link
+              Reset Password
             </Button>
           </DrawerFooter>
         </form>
-- 
2.34.1


From 49f39e1c2c59dd1743f4f5c478508c4988e14287 Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Thu, 12 Dec 2024 13:39:19 +0530
Subject: [PATCH 43/49] update subadmin

---
 src/Pages/ChangePassword.jsx                     |  2 +-
 .../Master/InvestmentType/AddInvestmentType.jsx  |  2 +-
 src/Pages/Master/Sponser/AddSponser.jsx          |  2 +-
 src/Pages/SubAdmin/SubAdmin.jsx                  |  4 ++--
 src/Pages/SubAdmin/SubAdminUpdateCreate.jsx      | 16 ++++++++++------
 5 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/Pages/ChangePassword.jsx b/src/Pages/ChangePassword.jsx
index fa6a898..59b8a0d 100644
--- a/src/Pages/ChangePassword.jsx
+++ b/src/Pages/ChangePassword.jsx
@@ -83,7 +83,7 @@ const ChangePassword = ({
           render: () => <ToastBox message={res?.data?.message} />,
         });
         handleClose();
-      } else if (res?.error) {
+      } else if (res?.error.statusCode === 400) {
         toast({
           render: () => (
             <ToastBox message={res?.error?.data?.message} status={"error"} />
diff --git a/src/Pages/Master/InvestmentType/AddInvestmentType.jsx b/src/Pages/Master/InvestmentType/AddInvestmentType.jsx
index a7fdfc0..e7e3d81 100644
--- a/src/Pages/Master/InvestmentType/AddInvestmentType.jsx
+++ b/src/Pages/Master/InvestmentType/AddInvestmentType.jsx
@@ -316,7 +316,7 @@ const AddInvestmentType = () => {
 
       <Box display={"flex"} justifyContent={"space-between"} alignItems={"center"} mt={5} px={4} mb={5}>
         <Text fontSize={"sm"} mb={0}  onClick={() => navigate(-1)} cursor={"pointer"}>
-          <ArrowBackIcon fontSize={"xl"} me={2} />Add Details
+          <ArrowBackIcon fontSize={"xl"} me={2} />{params?.id ? "Edit Details" : "Add Details"}
         </Text>
         <SwitchButton isSwitchOn={isSwitchOn} setIsSwitchOn={setIsSwitchOn} />
       </Box>
diff --git a/src/Pages/Master/Sponser/AddSponser.jsx b/src/Pages/Master/Sponser/AddSponser.jsx
index 33188ef..ed3b276 100644
--- a/src/Pages/Master/Sponser/AddSponser.jsx
+++ b/src/Pages/Master/Sponser/AddSponser.jsx
@@ -301,7 +301,7 @@ const AddSponser = () => {
       {/* =====================  [Switch Button] ======================== */}
       <Box display={"flex"} justifyContent={"space-between"} alignItems={"center"} mt={5} px={4}>
         <Text fontSize={"sm"} mb={0}  onClick={() => navigate(-1)} cursor={"pointer"}>
-          <ArrowBackIcon fontSize={"xl"} me={2} />Add Details
+          <ArrowBackIcon fontSize={"xl"} me={2} />{params?.id ? "Edit Details" : "Add Details"}
         </Text>
         <SwitchButton isSwitchOn={isSwitchOn} setIsSwitchOn={setIsSwitchOn} />
       </Box>
diff --git a/src/Pages/SubAdmin/SubAdmin.jsx b/src/Pages/SubAdmin/SubAdmin.jsx
index d592dda..a15a25f 100644
--- a/src/Pages/SubAdmin/SubAdmin.jsx
+++ b/src/Pages/SubAdmin/SubAdmin.jsx
@@ -188,7 +188,7 @@ const SubAdmin = () => {
         >
           {item?.role[0]?.role}
         </Badge>
-        <Switch
+        {/* <Switch
           onChange={() =>
             handleToggleStatus(item?.role[0]?.role === "Maker", item?.id)
           }
@@ -199,7 +199,7 @@ const SubAdmin = () => {
               bg: item?.role[0]?.role === "Maker" ? "#00ffcc" : "#b3ff99", // "Off" state color
             },
           }}
-        />
+        /> */}
         {/* <RoleSwitchButton
         setIsSwitchOn={setIsSwitchOn}
           isSwitchOn={item?.role[0]?.role === "Maker"}
diff --git a/src/Pages/SubAdmin/SubAdminUpdateCreate.jsx b/src/Pages/SubAdmin/SubAdminUpdateCreate.jsx
index 8b5c887..86cb65c 100644
--- a/src/Pages/SubAdmin/SubAdminUpdateCreate.jsx
+++ b/src/Pages/SubAdmin/SubAdminUpdateCreate.jsx
@@ -111,7 +111,7 @@ const SubAdminUpdateCreate = () => {
       try {
         const formData = {
           ...form,
-          // role_xid: !isSwitchOn ? 1 : 2,
+          role_xid: !isSwitchOn ? 2 : 1,
         };
         await updateSubAdmin({ data: formData, id }).then((response) => {
           if (response?.data?.statusCode) {
@@ -211,7 +211,7 @@ const SubAdminUpdateCreate = () => {
       name: "emailAddress",
       placeHolder: " ",
       type: "email",
-      // isRequired: true,
+      isRequired: true,
       section: "",
     },
   ];
@@ -248,7 +248,7 @@ const SubAdminUpdateCreate = () => {
       name: "emailAddress",
       placeHolder: " ",
       type: "email",
-      // isRequired: true,
+      isRequired: true,
       section: "",
     },
   ];
@@ -306,16 +306,20 @@ const SubAdminUpdateCreate = () => {
           cursor={"pointer"}
         >
           <ArrowBackIcon fontSize={"xl"} me={2} />
-          Add Details
+          {params?.id ? "Edit Details" : "Add Details"}
         </Text>
-        {params?.id ? (
+        {/* {params?.id ? (
           ""
         ) : (
           <RoleSwitchButton
             isSwitchOn={isSwitchOn}
             setIsSwitchOn={setIsSwitchOn}
           />
-        )}
+        )} */}
+        <RoleSwitchButton
+            isSwitchOn={isSwitchOn}
+            setIsSwitchOn={setIsSwitchOn}
+          />
       </Box>
 
       {/* ====================== [Form Input] ====================== */}
-- 
2.34.1


From 5d2c28f6ca7712a0ac9d6e9ba2d7588176c9da08 Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Thu, 12 Dec 2024 13:52:55 +0530
Subject: [PATCH 44/49] update change password

---
 src/Pages/ChangePassword.jsx | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/Pages/ChangePassword.jsx b/src/Pages/ChangePassword.jsx
index 59b8a0d..20e6ea1 100644
--- a/src/Pages/ChangePassword.jsx
+++ b/src/Pages/ChangePassword.jsx
@@ -56,6 +56,11 @@ const ChangePassword = ({
   const [isLoading, setIsLoading] = useState(false);
   const [alert, setAlert] = useState(false);
   const [showCurrentPassword, setShowCurrentPassword] = useState(false);
+  const [input, setInput] = useState({
+    oldPassword: "",
+    newPassword: "",
+    confirmNewPassword: "",
+  });
   const [showNewPassword, setShowNewPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
   const toast = useToast();
@@ -74,22 +79,27 @@ const ChangePassword = ({
   });
 
   // Form submit handler
-  const onSubmit = async (data) => {
+  const onSubmit = async () => {
     setIsLoading(true);
     try {
-      const res = await updatePassword(data); // Assuming API request works as expected
+      const res = await updatePassword(input); // Assuming API request works as expected
       if (res?.data?.statusCode === 200) {
         toast({
           render: () => <ToastBox message={res?.data?.message} />,
         });
         handleClose();
-      } else if (res?.error.statusCode === 400) {
+      } else if (res?.error) {
         toast({
           render: () => (
             <ToastBox message={res?.error?.data?.message} status={"error"} />
           ),
         });
       }
+      setInput({
+        oldPassword: "",
+        newPassword: "",
+        confirmNewPassword: "",
+      });
     } catch (error) {
       console.error(error);
     } finally {
@@ -97,6 +107,11 @@ const ChangePassword = ({
     }
   };
 
+  const handleAlert = (data) => {
+    setAlert(true);
+    setInput(data);
+  };
+
   // Handle modal close
   const handleClose = () => {
     setAlert(false);
@@ -210,7 +225,8 @@ const ChangePassword = ({
               rounded={"sm"}
               colorScheme="forestGreen"
               size="sm"
-              onClick={() => setAlert(true)}
+              // onClick={() => setAlert(true)}
+              onClick={handleSubmit(handleAlert)}
               isLoading={isLoading}
             >
               Save
@@ -222,7 +238,7 @@ const ChangePassword = ({
       <CustomAlertDialog
         isOpen={alert}
         onClose={() => setAlert(false)}
-        alertHandler={handleSubmit(onSubmit)}
+        alertHandler={onSubmit}
         message={"Are you sure you want to change the password?"}
         isLoading={isLoading}
       />
-- 
2.34.1


From 471e4f32ab5e9a5675f757f640f044a46235a292 Mon Sep 17 00:00:00 2001
From: Swapnil Bendal <84583651+Swapnil155@users.noreply.github.com>
Date: Thu, 12 Dec 2024 16:19:36 +0530
Subject: [PATCH 45/49] [fixed] - token server

---
 .env.example                                  |   5 +-
 .../IO_Management/ViewIO/ViewIOTable.jsx      |   1 -
 .../IO_Management/ViewIO/ViewIOdataHeader.jsx |   7 +-
 src/Services/token.serivce.js                 | 199 +++++++++---------
 4 files changed, 108 insertions(+), 104 deletions(-)

diff --git a/.env.example b/.env.example
index 1e085bc..c40434a 100644
--- a/.env.example
+++ b/.env.example
@@ -14,4 +14,7 @@ VITE_SUPER_ADMIN_ID=1
 VITE_BAS_URL="your_base_url"
 
 # BaseURL for Images
-VITE_IMAGE_URL="your_base_url"
\ No newline at end of file
+VITE_IMAGE_URL="your_base_url"
+
+# Max try re-genrate token
+VITE_MAX_TRY_REGENRATE_TOKEN=3
\ No newline at end of file
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx b/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx
index 5dc47ff..7aefcc9 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx
@@ -97,7 +97,6 @@ const ViewIOTable = () => {
     skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request
   });
 
-  console.log(data);
 
   // ===============================[ Table Header ]
   const tableHeadRow = [
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
index d68e810..8228d31 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
@@ -105,12 +105,7 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
     fontSize: "0.875rem",
     fontWeight: "400",
   };
-
-  console.log(
-    import.meta.env.VITE_IMAGE_URL +
-      IODetails?.artifactsImage?.[0]?.artifactPathName
-  );
-
+  
   const [updateTransaction] = useUpdateTransactionMutation();
 
   const handleDistributionInvestors = async () => {
diff --git a/src/Services/token.serivce.js b/src/Services/token.serivce.js
index a7ce6d8..6132c26 100644
--- a/src/Services/token.serivce.js
+++ b/src/Services/token.serivce.js
@@ -1,115 +1,122 @@
 import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
 import { encryptString } from '../Constants/Constants'
 
-// Define a base query function with token refresh logic
+// Define a base query function with token refresh logic, retry mechanism, and AbortController
 export const baseQuery = async (args, api, extraOptions) => {
-  let result = await fetchBaseQuery({
-    baseUrl: import.meta.env.VITE_BAS_URL,
-    credentials: 'include',
-    prepareHeaders: (headers) => {
-      headers.set('Content-Type', 'application/json',);
-      return headers;
-    },
-  })(args, api, extraOptions);
+	const fetchBase = fetchBaseQuery({
+		baseUrl: import.meta.env.VITE_BAS_URL,
+		credentials: 'include',
+		prepareHeaders: (headers) => {
+			headers.set('Content-Type', 'application/json');
+			return headers;
+		},
+	});
 
-  if (result.error) {
-    if (result.error.status === 403) {
-      try {
-        const { data, error } = await fetchBaseQuery({
-          baseUrl: import.meta.env.VITE_BAS_URL,
-          credentials: 'include',
-          prepareHeaders: (headers) => {
-            headers.set('Content-Type', 'application/json',);
-            return headers;
-          },
-        })(
-          {
-            url: "/auth/user/regenerate-token",
-            method: "POST",
-          },
-          api,
-          extraOptions
-        );
+	const abortController = new AbortController();
+	extraOptions = {
+		...extraOptions,
+		signal: abortController.signal,
+	};
 
-        if (data) {
-          return await fetchBaseQuery({
-            baseUrl: import.meta.env.VITE_BAS_URL,
-            credentials: 'include',
-            prepareHeaders: (headers) => {
-              headers.set('Content-Type', 'application/json',);
-              return headers;
-            }
-          })(args, api, extraOptions);
-        }
-        throw error;
-      } catch (err) {
-        console.error("Failed to refresh token:", err);
-        localStorage.clear();
-        window.location.href = '/login';  // Redirect to login page
-      }
-    } else if (result.error.status === 401) {
-      localStorage.clear();
-      window.location.href = '/login';
-    }
-  }
-  return result;
+	let result = await fetchBase(args, api, extraOptions);
+
+	if (result.error) {
+		if (result.error.status === 403) {
+			let retryCount = 0;
+			const maxRetries = import.meta.env.VITE_MAX_TRY_REGENRATE_TOKEN || 2;
+
+			while (retryCount < maxRetries) {
+				try {
+					const { data, error } = await fetchBase(
+						{
+							url: "/auth/user/regenerate-token",
+							method: "POST",
+						},
+						api,
+						{ ...extraOptions, signal: abortController.signal }
+					);
+					if (data) {
+						// Retry the original query after successful token regeneration
+						return await fetchBase(args, api, { ...extraOptions, signal: abortController.signal });
+					}
+
+					throw error;
+				} catch (err) {
+					retryCount++;
+					if (retryCount >= maxRetries) {
+						console.error("Failed to refresh token after retries:", err);
+						abortController.abort();
+						localStorage.clear();
+						window.location.href = '/login'; // Redirect to login page
+						break;
+					}
+				}
+			}
+		} else if (result.error.status === 401) {
+			abortController.abort();
+			localStorage.clear();
+			window.location.href = '/login';
+		}
+	}
+
+	return result;
 };
 
 // Create an RTK Query API slice
 export const apiSlice = createApi({
-  reducerPath: "api",
-  baseQuery: baseQuery,
-  tagTypes: ["authProfile"],
-  endpoints: (builder) => ({
+	reducerPath: "api",
+	baseQuery: baseQuery,
+	tagTypes: ["authProfile"],
+	endpoints: (builder) => ({
 
-    login: builder.mutation({
-      query: (credentials) => ({
-        url: "/auth/admin",
-        method: "POST",
-        body: credentials,
-      }),
-      async onQueryStarted(arg, { queryFulfilled }) {
-        try {
-          const { data } = await queryFulfilled;
-          localStorage.setItem("role", encryptString(data?.data?.role));
-        } catch (error) {
-          console.error("Login failed:", error);
-        }
-      },
-    }),
+		login: builder.mutation({
+			query: (credentials) => ({
+				url: "/auth/admin",
+				method: "POST",
+				body: credentials,
+			}),
+			async onQueryStarted(arg, { queryFulfilled }) {
+				try {
+					const { data } = await queryFulfilled;
+					localStorage.setItem("role", encryptString(data?.data?.role));
+				} catch (error) {
+					console.error("Login failed:", error);
+				}
+			},
+		}),
 
-    refreshToken: builder.mutation({
-      query: (refreshToken) => ({
-        url: "/auth/user/regenerate-token",
-        method: "POST",
-        body: { refreshToken },
-      }),
-    }),
+		refreshToken: builder.mutation({
+			query: (refreshToken) => ({
+				url: "/auth/user/regenerate-token",
+				method: "POST",
+				body: { refreshToken },
+			}),
+		}),
 
-    logout: builder.mutation({
-      query: () => ({
-        url: "/auth/admin/logout",
-        method: "POST",
-      }),
-    }),
+		logout: builder.mutation({
+			query: () => ({
+				url: "/auth/admin/logout",
+				method: "POST",
+			}),
+		}),
 
-    authProfile: builder.query({
-      query: () => `/auth/admin/profile`,
-      providesTags: (result) => result ? [{ type: 'Auth', id: 'profile' }] : [],
-      onQueryStarted: async (args, { queryFulfilled }) => {
-        try {
-          const { data } = await queryFulfilled; // Get the data from the query response
-          if (data?.role) {
-            localStorage.setItem('role', encryptString(data.role));
-          }
-        } catch (error) {
-          console.error('Error setting role in localStorage:', error);
-        }
-      },
-    }),
+		authProfile: builder.query({
+			query: () => `/auth/admin/profile`,
+			providesTags: (result) => result ? [{ type: 'Auth', id: 'profile' }] : [],
+			onQueryStarted: async (args, { queryFulfilled }) => {
+				try {
+					const { data } = await queryFulfilled; // Get the data from the query response
+					if (data?.role) {
+						localStorage.setItem('role', encryptString(data.role));
+					}
+				} catch (error) {
+					console.error('Error setting role in localStorage:', error);
+				}
+			},
+		}),
 
 
-  }),
+	}),
 });
 
 export const { useLoginMutation, useRefreshTokenMutation, useLogoutMutation, useAuthProfileQuery } = apiSlice;
-- 
2.34.1


From 6a0aa17e2d1f6334bff41595daeac7d9d4138e30 Mon Sep 17 00:00:00 2001
From: Swapnil Bendal <84583651+Swapnil155@users.noreply.github.com>
Date: Thu, 12 Dec 2024 17:28:32 +0530
Subject: [PATCH 46/49] [update]- profile page

---
 src/Components/RoleSwitchButton.jsx         |   3 +-
 src/Constants/Constants.js                  |  14 +-
 src/Pages/Profile/Profile.jsx               | 179 ++++++++++++--------
 src/Pages/SubAdmin/SubAdminUpdateCreate.jsx |  34 ++--
 4 files changed, 131 insertions(+), 99 deletions(-)

diff --git a/src/Components/RoleSwitchButton.jsx b/src/Components/RoleSwitchButton.jsx
index fe3f888..34ec474 100644
--- a/src/Components/RoleSwitchButton.jsx
+++ b/src/Components/RoleSwitchButton.jsx
@@ -1,6 +1,5 @@
 import { Box, Text } from "@chakra-ui/react";
-import React, { useRef } from "react";
-import audioClick from "../assets/click-151673.mp3";
+import React from "react";
 
 const RoleSwitchButton = ({ isSwitchOn, setIsSwitchOn }) => {
 
diff --git a/src/Constants/Constants.js b/src/Constants/Constants.js
index d057af1..b84271b 100644
--- a/src/Constants/Constants.js
+++ b/src/Constants/Constants.js
@@ -1,4 +1,3 @@
-
 import dns from "node:dns"
 import * as XLSX from 'xlsx';
 import CryptoJS from "crypto-js";
@@ -95,7 +94,7 @@ export function debounce(func, delay) {
 
 
 
-async function resolveMx(domain, recordType) {
+async function resolveMx(domain) {
   return new Promise((resolve, reject) => {
     dns.resolveMx(domain, (err, mxRecords) => {
       if (err) {
@@ -110,14 +109,17 @@ async function resolveMx(domain, recordType) {
 // Async function to check email address validity
 export async function checkEmailValidity(email) {
   try {
-    const domain = email?.split("@")[1];
-    const addresses = await resolveMx(domain, "MX");
+    const domain = email?.split('@')[1];
+    const addresses = await resolveMx(domain, 'MX');
+    console.log(addresses);
 
     if (addresses && addresses?.length > 0) {
       return true;
     }
     return false; // No MX record exists
   } catch (err) {
+    console.log(err);
+    
     return false; // Error occurred
   }
 }
@@ -239,5 +241,5 @@ export const SUPER_ADMIN_ID = Number(import.meta.env.VITE_SUPER_ADMIN_ID) || 1
 export const MAKER_ID = import.meta.env.VITE_MAKER_ID || 1
 export const CHECKER_ID = import.meta.env.VITE_CHECKER_ID || 2
 
-export const isMaker = () => decryptString(localStorage?.getItem("role")) === import.meta.env.VITE_MAKER;
-export const isChecker = () => decryptString(localStorage?.getItem("role")) === import.meta.env.VITE_CHECKER;
+export const isMaker = (role = decryptString(localStorage?.getItem("role"))) => role === import.meta.env.VITE_MAKER;
+export const isChecker = (role = decryptString(localStorage?.getItem("role"))) => role === import.meta.env.VITE_CHECKER;
diff --git a/src/Pages/Profile/Profile.jsx b/src/Pages/Profile/Profile.jsx
index 5add0a2..77221ea 100644
--- a/src/Pages/Profile/Profile.jsx
+++ b/src/Pages/Profile/Profile.jsx
@@ -1,26 +1,21 @@
+import { CheckIcon, CloseIcon, InfoIcon } from "@chakra-ui/icons";
 import {
   Avatar,
   Box,
   ButtonGroup,
-  Editable,
-  EditableInput,
-  EditablePreview,
-  EditableTextarea,
-  Flex,
   HStack,
   Heading,
   Icon,
   IconButton,
-  Input,
   Text,
   VStack,
-  useEditableControls,
+  useEditableControls
 } from "@chakra-ui/react";
-import React from "react";
-import { OPACITY_ON_LOAD } from "../../Layout/animations";
-import { CheckIcon, CloseIcon, EditIcon, InfoIcon } from "@chakra-ui/icons";
+import React, { useEffect, useState } from "react";
 import { FaEarthAmericas } from "react-icons/fa6";
 import logoMini from "../../assets/propic.png";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { useAuthProfileQuery } from "../../Services/token.serivce";
 
 const Profile = () => {
   /* Here's a custom control */
@@ -53,19 +48,56 @@ const Profile = () => {
       )
     );
   }
+  const { data } = useAuthProfileQuery();
 
-
-    // Array of fields to render
-    const fields = [
-      { name: "firstName", label: "First Name", defaultValue: "Faisal" },
-      { name: "lastName", label: "Last Name", defaultValue: "Aljalahma" },
-      { name: "email", label: "Email Address", defaultValue: "f.aljalahma@tanamicapital.com" },
-      { name: "mobile", label: "Mobile Number", defaultValue: "9898767876" },
-      { name: "role", label: "Role", defaultValue: "Maker" },
-    ];
-
-
-
+  const [fields, setFields] = useState([
+    {
+      name: "firstName",
+      label: "First Name",
+      defaultValue: null,
+    },
+    {
+      name: "lastName",
+      label: "Last Name",
+      defaultValue: null,
+    },
+    {
+      name: "email",
+      label: "Email Address",
+      defaultValue: null,
+    },
+    {
+      name: "mobile",
+      label: "Mobile Number",
+      defaultValue: null,
+    },
+    { name: "role", label: "Role", defaultValue: null },
+  ]);
+  useEffect(() => {
+    setFields([
+      {
+        name: "firstName",
+        label: "First Name",
+        defaultValue: data?.data?.firstName || null,
+      },
+      {
+        name: "lastName",
+        label: "Last Name",
+        defaultValue: data?.data?.lastName || null,
+      },
+      {
+        name: "email",
+        label: "Email Address",
+        defaultValue: data?.data?.emailAddress || null,
+      },
+      {
+        name: "mobile",
+        label: "Mobile Number",
+        defaultValue: data?.data?.mobileNumber || null,
+      },
+      { name: "role", label: "Role", defaultValue: data?.data?.role || null },
+    ]);
+  }, [data]);
 
   return (
     <VStack
@@ -114,7 +146,7 @@ const Profile = () => {
                 color={"gray.700"}
                 fontWeight={500}
               >
-                Faisal Aljalahma
+                {data?.data?.firstName + " " + data?.data?.lastName}
               </Text>
 
               <Text
@@ -123,7 +155,7 @@ const Profile = () => {
                 color={"gray.500"}
                 fontWeight={400}
               >
-                f.aljalahma@tanamicapital.com
+                {data?.data?.emailAddress}
               </Text>
             </VStack>
           </HStack>
@@ -150,16 +182,16 @@ const Profile = () => {
                 fontWeight={500}
               >
                 {" "}
-                <Icon as={FaEarthAmericas} /> Maker
+                <Icon as={FaEarthAmericas} /> {data?.data?.role}
               </Text>
             </VStack>
           </HStack>
         </Box>
 
+        {/* 
         <Heading as="h3" size="sm">
           About you
         </Heading>
-
         <Box
           rounded="md"
           boxShadow="base"
@@ -170,55 +202,56 @@ const Profile = () => {
           alignItems="flex-start"
           p={6}
           gap={0}
-
           pb={6}
         >
-
-{fields?.map((item) => (
-  <VStack alignItems={"flex-start"} w={"100%"} gap={1.5} mb={6} key={item?.label}>
-    <Text
-      as={"span"}
-      fontSize="xs"
-      fontWeight="semibold"
-      color={"gray.500"}
-    >
-      {item?.label}
-    </Text>
-    <Editable
-      position={"relative"}
-      gap={0}
-      defaultValue={item?.defaultValue}
-      w="100%"
-    >
-      <EditablePreview
-      cursor={'pointer'}
-        p={2}
-        rounded={"sm"}
-        w={"100%"}
-        _hover={{
-          bg: "gray.100",
-        }}
-        fontSize="sm"
-        transition={"0.5s"}
-      />
-      <Input
-      as={EditableInput}
-        ps={2}
-        size={'sm'}
-        fontSize="sm"
-        rounded={"sm"}
-        _focus={{
-          borderColor:"blue.500"
-        }}
-      />
-      <EditableControls />
-    </Editable>
-  </VStack>
-))}
-
-
-
-        </Box>
+          {fields?.map((item) => (
+            <VStack
+              alignItems={"flex-start"}
+              w={"100%"}
+              gap={1.5}
+              mb={6}
+              key={item?.label}
+            >
+              <Text
+                as={"span"}
+                fontSize="xs"
+                fontWeight="semibold"
+                color={"gray.500"}
+              >
+                {item?.label}
+              </Text>
+              <Editable
+                position={"relative"}
+                gap={0}
+                defaultValue={item?.defaultValue}
+                w="100%"
+              >
+                <EditablePreview
+                  cursor={"pointer"}
+                  p={2}
+                  rounded={"sm"}
+                  w={"100%"}
+                  _hover={{
+                    bg: "gray.100",
+                  }}
+                  fontSize="sm"
+                  transition={"0.5s"}
+                />
+                <Input
+                  as={EditableInput}
+                  ps={2}
+                  size={"sm"}
+                  fontSize="sm"
+                  rounded={"sm"}
+                  _focus={{
+                    borderColor: "blue.500",
+                  }}
+                />
+                <EditableControls />
+              </Editable>
+            </VStack>
+          ))}
+        </Box> */}
       </VStack>
     </VStack>
   );
diff --git a/src/Pages/SubAdmin/SubAdminUpdateCreate.jsx b/src/Pages/SubAdmin/SubAdminUpdateCreate.jsx
index 86cb65c..e804023 100644
--- a/src/Pages/SubAdmin/SubAdminUpdateCreate.jsx
+++ b/src/Pages/SubAdmin/SubAdminUpdateCreate.jsx
@@ -10,7 +10,9 @@ import FormInputMain from "../../Components/FormInputMain";
 import FullscreenLoaders from "../../Components/Loaders/FullscreenLoaders";
 import RoleSwitchButton from "../../Components/RoleSwitchButton";
 import ToastBox from "../../Components/ToastBox";
-import { encryptString } from "../../Constants/Constants";
+import {
+  isMaker
+} from "../../Constants/Constants";
 import { OPACITY_ON_LOAD } from "../../Layout/animations";
 import {
   useCreateSubAdminMutation,
@@ -18,8 +20,7 @@ import {
   useUpdateSubAdminMutation,
 } from "../../Services/subadmin.service";
 // ======================= [validation] =========================
-
-export const addSubAdmin = yup.object().shape({
+const addSubAdminSchema = yup.object().shape({
   firstName: yup
     .string()
     .required("First Name is required")
@@ -28,13 +29,12 @@ export const addSubAdmin = yup.object().shape({
     .matches(/^[^\d]+$/, "First Name cannot contain numbers"),
 
   lastName: yup.string().required("Last Name name in arabic is required"),
-  emailAddress: yup.string().email("Invalid email address").notRequired(),
-  //   .test("emailValidity", "Email address is invalid", async function (value) {
-  //     if (!value) {
-  //         return true; // Allow if the field is empty
-  //     }
-  //     return await checkEmailValidity(value);
-  // }),
+  emailAddress: yup
+    .string()
+    .email("Invalid email address")
+    .required()
+    .min(6, "Email address must be at least 6 characters long")
+    .max(255, "Email address can be at most 255 characters long"),
 });
 
 // ==================== [debounce] ========================
@@ -77,7 +77,8 @@ const SubAdminUpdateCreate = () => {
     formState: { errors },
     reset,
   } = useForm({
-    resolver: yupResolver(addSubAdmin),
+    resolver: yupResolver(addSubAdminSchema),
+    mode: "all",
   });
 
   // ========================== [useEffect] ================================
@@ -89,10 +90,7 @@ const SubAdminUpdateCreate = () => {
         lastName: subAdminByIdData?.data?.lastName,
         emailAddress: subAdminByIdData?.data?.emailAddress,
       });
-      setIsSwitchOn(
-        subAdminByIdData?.data?.role[0]?.role ===
-          encryptString(import.meta.env.VITE_VITE_MAKER)
-      );
+      setIsSwitchOn(isMaker(subAdminByIdData?.data?.role[0]?.role));
     }
   }, [subAdminByIdData, reset]);
 
@@ -317,9 +315,9 @@ const SubAdminUpdateCreate = () => {
           />
         )} */}
         <RoleSwitchButton
-            isSwitchOn={isSwitchOn}
-            setIsSwitchOn={setIsSwitchOn}
-          />
+          isSwitchOn={isSwitchOn}
+          setIsSwitchOn={setIsSwitchOn}
+        />
       </Box>
 
       {/* ====================== [Form Input] ====================== */}
-- 
2.34.1


From 5411d4cd189e2c5237f8c52dd7d132f835fc4522 Mon Sep 17 00:00:00 2001
From: Swapnil Bendal <84583651+Swapnil155@users.noreply.github.com>
Date: Thu, 12 Dec 2024 17:47:57 +0530
Subject: [PATCH 47/49] [fixed] - email message forget password

---
 src/Pages/ForgetPassword.jsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/Pages/ForgetPassword.jsx b/src/Pages/ForgetPassword.jsx
index 0a16eee..db62f7d 100644
--- a/src/Pages/ForgetPassword.jsx
+++ b/src/Pages/ForgetPassword.jsx
@@ -15,7 +15,7 @@ import {
   useToast,
 } from "@chakra-ui/react";
 import * as yup from "yup";
-import React, { useState} from "react";
+import React, { useState } from "react";
 import { useForm, Controller } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { useForgetPasswordMutation } from "../Services/forget.password.service";
@@ -25,7 +25,9 @@ const validationSchema = yup.object().shape({
   emailAddress: yup
     .string()
     .email("Invalid email format")
-    .required("email address is required"),
+    .required("Email address is required")
+    .min(6, "Email address must be at least 6 characters long")
+    .max(255, "Email address can be at most 255 characters long"),
 });
 
 const ForgetPassword = ({ isOpen, onClose, firstField }) => {
@@ -43,7 +45,6 @@ const ForgetPassword = ({ isOpen, onClose, firstField }) => {
   });
 
   const onSubmit = async (formData) => {
-    
     setIsLoading(true);
     try {
       const res = await forgetPassword(formData);
@@ -98,7 +99,7 @@ const ForgetPassword = ({ isOpen, onClose, firstField }) => {
                       {...field}
                       size="md"
                       fontSize="sm"
-                    focusBorderColor="forestGreen.300"
+                      focusBorderColor="forestGreen.300"
                       rounded={4}
                       type="text"
                     />
@@ -114,7 +115,7 @@ const ForgetPassword = ({ isOpen, onClose, firstField }) => {
           <DrawerFooter mb={5}>
             <Button
               w="100%"
-              colorScheme="forestGreen" 
+              colorScheme="forestGreen"
               rounded="md"
               size="md"
               type="submit"
-- 
2.34.1


From e41d6b17b9e0afc251c24b472895d6c693a4a74b Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Fri, 20 Dec 2024 16:22:29 +0530
Subject: [PATCH 48/49] update env file ang bugs

---
 .env.example                                  |  9 ++++-
 src/Pages/ChangePassword.jsx                  | 34 +++++--------------
 src/Pages/ForgetPassword.jsx                  |  7 ++--
 .../ViewIO/HeaderModal/UpdateIOStatus.jsx     | 14 ++++----
 src/Pages/Login.jsx                           |  2 +-
 src/Pages/SubAdmin/SubAdminUpdateCreate.jsx   | 29 ++++++++--------
 src/Services/subadmin.service.js              |  5 +--
 7 files changed, 47 insertions(+), 53 deletions(-)

diff --git a/.env.example b/.env.example
index c40434a..c28689a 100644
--- a/.env.example
+++ b/.env.example
@@ -17,4 +17,11 @@ VITE_BAS_URL="your_base_url"
 VITE_IMAGE_URL="your_base_url"
 
 # Max try re-genrate token
-VITE_MAX_TRY_REGENRATE_TOKEN=3
\ No newline at end of file
+VITE_MAX_TRY_REGENRATE_TOKEN=3
+
+VITE_STATUS_DRAFT="Draft"
+VITE_STATUS_PROCESSING="Processing"
+VITE_STATUS_OPEN="Open"
+VITE_STATUS_CLOSED="Closed"
+VITE_STATUS_EXITED="Exited"
+VITE_STATUS_CANCELLED="Cancelled"
\ No newline at end of file
diff --git a/src/Pages/ChangePassword.jsx b/src/Pages/ChangePassword.jsx
index 20e6ea1..9c6b730 100644
--- a/src/Pages/ChangePassword.jsx
+++ b/src/Pages/ChangePassword.jsx
@@ -42,8 +42,8 @@ const passwordSchema = yup.object().shape({
     ),
   confirmNewPassword: yup
     .string()
-    .required("Confirm Password is required")
-    .oneOf([yup.ref("newPassword")], "Passwords must match"),
+    .required("Confirm New Password is required")
+    .oneOf([yup.ref("newPassword")], "Password do not match"),
 });
 
 const ChangePassword = ({
@@ -56,11 +56,6 @@ const ChangePassword = ({
   const [isLoading, setIsLoading] = useState(false);
   const [alert, setAlert] = useState(false);
   const [showCurrentPassword, setShowCurrentPassword] = useState(false);
-  const [input, setInput] = useState({
-    oldPassword: "",
-    newPassword: "",
-    confirmNewPassword: "",
-  });
   const [showNewPassword, setShowNewPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
   const toast = useToast();
@@ -79,10 +74,10 @@ const ChangePassword = ({
   });
 
   // Form submit handler
-  const onSubmit = async () => {
+  const onSubmit = async (data) => {
     setIsLoading(true);
     try {
-      const res = await updatePassword(input); // Assuming API request works as expected
+      const res = await updatePassword(data); // Assuming API request works as expected
       if (res?.data?.statusCode === 200) {
         toast({
           render: () => <ToastBox message={res?.data?.message} />,
@@ -95,11 +90,6 @@ const ChangePassword = ({
           ),
         });
       }
-      setInput({
-        oldPassword: "",
-        newPassword: "",
-        confirmNewPassword: "",
-      });
     } catch (error) {
       console.error(error);
     } finally {
@@ -107,11 +97,6 @@ const ChangePassword = ({
     }
   };
 
-  const handleAlert = (data) => {
-    setAlert(true);
-    setInput(data);
-  };
-
   // Handle modal close
   const handleClose = () => {
     setAlert(false);
@@ -129,7 +114,7 @@ const ChangePassword = ({
           <ModalBody pb={6}>
             <Stack spacing={4}>
               {/* Current Password */}
-              <FormControl isInvalid={errors.oldPassword}>
+              <FormControl isInvalid={errors.oldPassword} isRequired>
                 <FormLabel fontSize="sm" mb={1} fontWeight={500}>
                   Current Password
                 </FormLabel>
@@ -156,7 +141,7 @@ const ChangePassword = ({
               </FormControl>
 
               {/* New Password */}
-              <FormControl isInvalid={errors.newPassword}>
+              <FormControl isInvalid={errors.newPassword} isRequired>
                 <FormLabel fontSize="sm" mb={1}>
                   New Password
                 </FormLabel>
@@ -183,7 +168,7 @@ const ChangePassword = ({
               </FormControl>
 
               {/* Confirm Password */}
-              <FormControl isInvalid={errors.confirmNewPassword}>
+              <FormControl isInvalid={errors.confirmNewPassword} isRequired>
                 <FormLabel fontSize="sm" mb={1}>
                   Confirm New Password
                 </FormLabel>
@@ -225,8 +210,7 @@ const ChangePassword = ({
               rounded={"sm"}
               colorScheme="forestGreen"
               size="sm"
-              // onClick={() => setAlert(true)}
-              onClick={handleSubmit(handleAlert)}
+              onClick={() => setAlert(true)}
               isLoading={isLoading}
             >
               Save
@@ -238,7 +222,7 @@ const ChangePassword = ({
       <CustomAlertDialog
         isOpen={alert}
         onClose={() => setAlert(false)}
-        alertHandler={onSubmit}
+        alertHandler={handleSubmit(onSubmit)}
         message={"Are you sure you want to change the password?"}
         isLoading={isLoading}
       />
diff --git a/src/Pages/ForgetPassword.jsx b/src/Pages/ForgetPassword.jsx
index db62f7d..41494ef 100644
--- a/src/Pages/ForgetPassword.jsx
+++ b/src/Pages/ForgetPassword.jsx
@@ -40,6 +40,7 @@ const ForgetPassword = ({ isOpen, onClose, firstField }) => {
     control,
     handleSubmit,
     formState: { errors },
+    reset, // Add reset from useForm
   } = useForm({
     resolver: yupResolver(validationSchema),
   });
@@ -60,6 +61,7 @@ const ForgetPassword = ({ isOpen, onClose, firstField }) => {
           ),
         });
         handleClose();
+    
       }
     } catch (error) {
       console.error(error);
@@ -71,6 +73,7 @@ const ForgetPassword = ({ isOpen, onClose, firstField }) => {
   const handleClose = () => {
     setIsLoading(false);
     onClose();
+    reset(); // Reset form state when modal closes
   };
 
   return (
@@ -83,13 +86,13 @@ const ForgetPassword = ({ isOpen, onClose, firstField }) => {
       <ModalOverlay />
       <ModalContent>
         <form onSubmit={handleSubmit(onSubmit)}>
-          <ModalHeader fontSize="md">Forget Password</ModalHeader>
+          <ModalHeader fontSize="md">Forgot Password</ModalHeader>
           <ModalCloseButton />
           <ModalBody pb={4}>
             <Stack spacing={4}>
               <FormControl isInvalid={errors.emailAddress} isRequired>
                 <FormLabel fontSize="sm" mb={3} fontWeight={500}>
-                  Please Enter Email Adress
+                  Please Enter Email Address
                 </FormLabel>
                 <Controller
                   name="emailAddress"
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx
index a7b51d5..f810159 100644
--- a/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx
@@ -154,24 +154,24 @@ const UpdateIOStatus = ({ isOpen, onClose, status }) => {
                       <Badge
                         rounded={"full"}
                         pt={1.5}
-                        pb={1.5}
+                        pb={1.5} 
                         ps={4}
                         pe={4}
                         mt={1.5}
                         mb={1.5}
                         textTransform={"none"}
                         colorScheme={
-                          statusAdmin === "Draft"
+                          statusAdmin === import.meta.env.VITE_STATUS_DRAFT
                             ? "gray"
-                            : statusAdmin === "Processing"
+                            : statusAdmin === import.meta.env.VITE_STATUS_PROCESSING
                             ? "yellow"
-                            : statusAdmin === "Open"
+                            : statusAdmin === import.meta.env.VITE_STATUS_OPEN
                             ? "blue"
-                            : statusAdmin === "Closed"
+                            : statusAdmin === import.meta.env.VITE_STATUS_CLOSED
                             ? "green"
-                            : statusAdmin === "Exited"
+                            : statusAdmin === import.meta.env.VITE_STATUS_EXITED
                             ? "red"
-                            : statusAdmin === "Cancelled"
+                            : statusAdmin === import.meta.env.VITE_STATUS_CANCELLED
                             ? "orange"
                             : "purple"
                         }
diff --git a/src/Pages/Login.jsx b/src/Pages/Login.jsx
index 2eef3aa..62837f1 100644
--- a/src/Pages/Login.jsx
+++ b/src/Pages/Login.jsx
@@ -245,7 +245,7 @@ const Login = () => {
           )}
         </FormControl>
         <Box fontSize={"sm"} display={"flex"} justifyContent={"end"} mt={0}>
-          <Text fontWeight={500} cursor={"pointer"} onClick={onOpen}>Forget Password?</Text>
+          <Text fontWeight={500} cursor={"pointer"} onClick={onOpen}>Forgot Password?</Text>
         </Box>
 
         <Button
diff --git a/src/Pages/SubAdmin/SubAdminUpdateCreate.jsx b/src/Pages/SubAdmin/SubAdminUpdateCreate.jsx
index e804023..506e7e7 100644
--- a/src/Pages/SubAdmin/SubAdminUpdateCreate.jsx
+++ b/src/Pages/SubAdmin/SubAdminUpdateCreate.jsx
@@ -23,16 +23,15 @@ import {
 const addSubAdminSchema = yup.object().shape({
   firstName: yup
     .string()
-    .required("First Name is required")
+    .required("First Name is required dcdcdcd")
     .min(3, "First Name must be at least 3 characters long")
-    .max(50, "First Name cannot exceed 50 characters")
+    .max(35, "First Name cannot exceed 35 characters")
     .matches(/^[^\d]+$/, "First Name cannot contain numbers"),
 
-  lastName: yup.string().required("Last Name name in arabic is required"),
-  emailAddress: yup
-    .string()
-    .email("Invalid email address")
-    .required()
+  lastName: yup.string().required("Last Name is required"),
+ emailAddress:yup.
+    string()
+    .required("Email address is required")
     .min(6, "Email address must be at least 6 characters long")
     .max(255, "Email address can be at most 255 characters long"),
 });
@@ -187,8 +186,8 @@ const SubAdminUpdateCreate = () => {
       type: "text",
       isRequired: true,
       section: "",
-      maxLength: 50,
-      helperText: `Maximum length should be 50 characters. You have entered ${
+      maxLength: 34,
+      helperText: `Maximum length should be 34 characters. You have entered ${
         watch()?.firstName?.length || 0
       } characters.`,
     },
@@ -199,8 +198,8 @@ const SubAdminUpdateCreate = () => {
       type: "text",
       isRequired: true,
       section: "",
-      maxLength: 55,
-      helperText: `Maximum length should be 55 characters. You have entered ${
+      maxLength: 34,
+      helperText: `Maximum length should be 34 characters. You have entered ${
         watch()?.lastName?.length || 0
       } characters.`,
     },
@@ -224,8 +223,8 @@ const SubAdminUpdateCreate = () => {
       type: "text",
       isRequired: true,
       section: "",
-      maxLength: 55,
-      helperText: `Maximum length should be 55 characters. You have entered ${
+      maxLength: 34,
+      helperText: `Maximum length should be 35 characters. You have entered ${
         watch()?.firstName?.length || 0
       } characters.`,
     },
@@ -236,8 +235,8 @@ const SubAdminUpdateCreate = () => {
       type: "text",
       isRequired: true,
       section: "",
-      maxLength: 55,
-      helperText: `Maximum length should be 55 characters. You have entered ${
+      maxLength: 34,
+      helperText: `Maximum length should be 35 characters. You have entered ${
         watch()?.lastName?.length || 0
       } characters.`,
     },
diff --git a/src/Services/subadmin.service.js b/src/Services/subadmin.service.js
index 8e6305e..d050d6d 100644
--- a/src/Services/subadmin.service.js
+++ b/src/Services/subadmin.service.js
@@ -40,11 +40,12 @@ export const sabAdminMaster = createApi({
         method: "PATCH",
         body: data,
       }),
-      invalidatesTags: ["getSubAdmin"],
+      invalidatesTags: ["getSubAdmin", "prePopulate"],
     }),
 
     getSubAdminById: builder.query({
       query: (id) => `/subadmin/admin/${id}`,
+      invalidatesTags: ["getSubAdmin", "prePopulate"],
     }),
 
     // // ========[Toggle Status]========
@@ -55,7 +56,7 @@ export const sabAdminMaster = createApi({
         method: "PATCH",
         body: data,
       }),
-      invalidatesTags: ["getSubAdmin"],
+      invalidatesTags: ["getSubAdmin", "prePopulate"],
     }),
 
 
-- 
2.34.1


From 85be7c891e9dba19f1ff3d099f3796251f36e09f Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Fri, 20 Dec 2024 17:17:18 +0530
Subject: [PATCH 49/49] update bugs

---
 .env.example                                  |  3 +-
 src/Pages/ChangePassword.jsx                  |  1 +
 .../ViewIO/HeaderModal/UpdateIOStatus.jsx     | 14 +++----
 .../IO_Management/ViewIO/ViewIOTable.jsx      | 12 +++---
 .../IO_Management/ViewIO/ViewIOdataHeader.jsx | 26 ++++++-------
 src/Pages/SubAdmin/SubAdminUpdateCreate.jsx   | 19 ++++++----
 src/Services/subadmin.service.js              | 37 +++----------------
 7 files changed, 45 insertions(+), 67 deletions(-)

diff --git a/.env.example b/.env.example
index c28689a..336cca1 100644
--- a/.env.example
+++ b/.env.example
@@ -24,4 +24,5 @@ VITE_STATUS_PROCESSING="Processing"
 VITE_STATUS_OPEN="Open"
 VITE_STATUS_CLOSED="Closed"
 VITE_STATUS_EXITED="Exited"
-VITE_STATUS_CANCELLED="Cancelled"
\ No newline at end of file
+VITE_STATUS_CANCELLED="Cancelled"
+VITE_STATUS_DEACTIVATE="DeActivate"
\ No newline at end of file
diff --git a/src/Pages/ChangePassword.jsx b/src/Pages/ChangePassword.jsx
index 9c6b730..82d7b62 100644
--- a/src/Pages/ChangePassword.jsx
+++ b/src/Pages/ChangePassword.jsx
@@ -89,6 +89,7 @@ const ChangePassword = ({
             <ToastBox message={res?.error?.data?.message} status={"error"} />
           ),
         });
+        setAlert(false);
       }
     } catch (error) {
       console.error(error);
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx
index f810159..6327f52 100644
--- a/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx
@@ -58,7 +58,7 @@ const UpdateIOStatus = ({ isOpen, onClose, status }) => {
       let res;
 
       // If selectedItem is 'Cancelled', make the updateCancelStatus API call
-      if (selectedItem === "Cancelled") {
+      if (selectedItem === import.meta.env.VITE_STATUS_CANCELLED) {
         res = await updateCancleStatus({
           id
         });
@@ -119,17 +119,17 @@ const UpdateIOStatus = ({ isOpen, onClose, status }) => {
                     mb={1.5}
                     textTransform={"none"}
                     colorScheme={
-                      selectedItem === "Draft"
+                      selectedItem === import.meta.env.VITE_STATUS_DRAFT
                         ? "gray"
-                        : selectedItem === "Processing"
+                        : selectedItem === import.meta.env.VITE_STATUS_PROCESSING
                         ? "yellow"
-                        : selectedItem === "Open"
+                        : selectedItem === import.meta.env.VITE_STATUS_OPEN
                         ? "blue"
-                        : selectedItem === "Closed"
+                        : selectedItem === import.meta.env.VITE_STATUS_CLOSED
                         ? "green"
-                        : selectedItem === "Exited"
+                        : selectedItem === import.meta.env.VITE_STATUS_EXITED
                         ? "red"
-                        : selectedItem === "Cancelled"
+                        : selectedItem === import.meta.env.VITE_STATUS_CANCELLED
                         ? "orange"
                         : "purple"
                     }
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx b/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx
index 7aefcc9..0e65e64 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx
@@ -241,17 +241,17 @@ const ViewIOTable = () => {
           textTransform={"none"}
           // variant={"solid"}
           colorScheme={
-            item?.ioStatus?.statusAdmin === "Draft"
+            item?.ioStatus?.statusAdmin === import.meta.env.VITE_STATUS_DRAFT
               ? "gray"
-              : item?.ioStatus?.statusAdmin === "Processing"
+              : item?.ioStatus?.statusAdmin === import.meta.env.VITE_STATUS_PROCESSING
               ? "yellow"
-              : item?.ioStatus?.statusAdmin === "Open"
+              : item?.ioStatus?.statusAdmin === import.meta.env.VITE_STATUS_OPEN
               ? "blue"
-              : item?.ioStatus?.statusAdmin === "Closed"
+              : item?.ioStatus?.statusAdmin === import.meta.env.VITE_STATUS_CLOSED
               ? "green"
-              : item?.ioStatus?.statusAdmin === "Exited"
+              : item?.ioStatus?.statusAdmin === import.meta.env.VITE_STATUS_EXITED
               ? "red"
-              : item?.ioStatus?.statusAdmin === "Canclled"
+              : item?.ioStatus?.statusAdmin === import.meta.env.VITE_STATUS_CANCELLED
               ? "orange"
               : "purple"
           }
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
index 8228d31..d7bf9f7 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
@@ -247,19 +247,19 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
       justifyContent={"space-between"}
       gap={8}
       bg={
-        IODetails?.ioStatus?.statusAdmin === "Draft"
+        IODetails?.ioStatus?.statusAdmin === import.meta.env.VITE_STATUS_DRAFT
           ? "#EDF2F7"
-          : IODetails?.ioStatus?.statusAdmin === "Processing"
+          : IODetails?.ioStatus?.statusAdmin === import.meta.env.VITE_STATUS_PROCESSING
           ? "#FEFBBF"
-          : IODetails?.ioStatus?.statusAdmin === "Open"
+          : IODetails?.ioStatus?.statusAdmin === import.meta.env.VITE_STATUS_OPEN
           ? "#BEE2F8"
-          : IODetails?.ioStatus?.statusAdmin === "Closed"
+          : IODetails?.ioStatus?.statusAdmin === import.meta.env.VITE_STATUS_CLOSED
           ? "#C6F6D5"
-          : IODetails?.ioStatus?.statusAdmin === "Exited"
+          : IODetails?.ioStatus?.statusAdmin === import.meta.env.VITE_STATUS_EXITED
           ? "#FED7D7"
-          : IODetails?.ioStatus?.statusAdmin === "Cancelled"
+          : IODetails?.ioStatus?.statusAdmin === import.meta.env.VITE_STATUS_CANCELLED
           ? "#E9D8FD"
-          : IODetails?.ioStatus?.statusAdmin === "DeActivate"
+          : IODetails?.ioStatus?.statusAdmin === import.meta.env.VITE_STATUS_DEACTIVATE
           ? "#E9D8FD"
           : null
       }
@@ -432,17 +432,17 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
             textTransform={"none"}
             // variant={"solid"}
             colorScheme={
-              IODetails?.ioStatus?.statusAdmin === "Draft"
+              IODetails?.ioStatus?.statusAdmin === import.meta.env.VITE_STATUS_DRAFT
                 ? "gray"
-                : IODetails?.ioStatus?.statusAdmin === "Processing"
+                : IODetails?.ioStatus?.statusAdmin === import.meta.env.VITE_STATUS_PROCESSING
                 ? "yellow"
-                : IODetails?.ioStatus?.statusAdmin === "Open"
+                : IODetails?.ioStatus?.statusAdmin === import.meta.env.VITE_STATUS_OPEN
                 ? "blue"
-                : IODetails?.ioStatus?.statusAdmin === "Closed"
+                : IODetails?.ioStatus?.statusAdmin === import.meta.env.VITE_STATUS_CLOSED
                 ? "green"
-                : IODetails?.ioStatus?.statusAdmin === "Exited"
+                : IODetails?.ioStatus?.statusAdmin === import.meta.env.VITE_STATUS_EXITED
                 ? "red"
-                : IODetails?.ioStatus?.statusAdmin === "Cancelled"
+                : IODetails?.ioStatus?.statusAdmin === import.meta.env.VITE_STATUS_CANCELLED
                 ? "purple"
                 : "purple"
             }
diff --git a/src/Pages/SubAdmin/SubAdminUpdateCreate.jsx b/src/Pages/SubAdmin/SubAdminUpdateCreate.jsx
index 506e7e7..fdb4d1a 100644
--- a/src/Pages/SubAdmin/SubAdminUpdateCreate.jsx
+++ b/src/Pages/SubAdmin/SubAdminUpdateCreate.jsx
@@ -23,12 +23,15 @@ import {
 const addSubAdminSchema = yup.object().shape({
   firstName: yup
     .string()
-    .required("First Name is required dcdcdcd")
+    .required("First Name is required")
     .min(3, "First Name must be at least 3 characters long")
     .max(35, "First Name cannot exceed 35 characters")
     .matches(/^[^\d]+$/, "First Name cannot contain numbers"),
 
-  lastName: yup.string().required("Last Name is required"),
+  lastName: yup.string().required("Last Name is required")
+    .min(3, "Last Name must be at least 3 characters long")
+    .max(35, "Last Name cannot exceed 35 characters")
+    .matches(/^[^\d]+$/, "Last Name cannot contain numbers"),
  emailAddress:yup.
     string()
     .required("Email address is required")
@@ -186,8 +189,8 @@ const SubAdminUpdateCreate = () => {
       type: "text",
       isRequired: true,
       section: "",
-      maxLength: 34,
-      helperText: `Maximum length should be 34 characters. You have entered ${
+      maxLength: 35,
+      helperText: `Maximum length should be 35 characters. You have entered ${
         watch()?.firstName?.length || 0
       } characters.`,
     },
@@ -198,8 +201,8 @@ const SubAdminUpdateCreate = () => {
       type: "text",
       isRequired: true,
       section: "",
-      maxLength: 34,
-      helperText: `Maximum length should be 34 characters. You have entered ${
+      maxLength: 35,
+      helperText: `Maximum length should be 35 characters. You have entered ${
         watch()?.lastName?.length || 0
       } characters.`,
     },
@@ -223,7 +226,7 @@ const SubAdminUpdateCreate = () => {
       type: "text",
       isRequired: true,
       section: "",
-      maxLength: 34,
+      maxLength: 35,
       helperText: `Maximum length should be 35 characters. You have entered ${
         watch()?.firstName?.length || 0
       } characters.`,
@@ -235,7 +238,7 @@ const SubAdminUpdateCreate = () => {
       type: "text",
       isRequired: true,
       section: "",
-      maxLength: 34,
+      maxLength: 35,
       helperText: `Maximum length should be 35 characters. You have entered ${
         watch()?.lastName?.length || 0
       } characters.`,
diff --git a/src/Services/subadmin.service.js b/src/Services/subadmin.service.js
index d050d6d..e23eb05 100644
--- a/src/Services/subadmin.service.js
+++ b/src/Services/subadmin.service.js
@@ -9,7 +9,7 @@ import { baseQuery } from "./token.serivce";
 export const sabAdminMaster = createApi({
   reducerPath: "sabAdminMaster",
   baseQuery: baseQuery,
-  tagTypes: ["getSubAdmin", "prePopulate"],
+  tagTypes: ["getSubAdmin", "prePopulate","getSubAdminById"],
   endpoints: (builder) => ({
 
 
@@ -40,12 +40,12 @@ export const sabAdminMaster = createApi({
         method: "PATCH",
         body: data,
       }),
-      invalidatesTags: ["getSubAdmin", "prePopulate"],
+      invalidatesTags: ["getSubAdmin","getSubAdminById"],
     }),
 
     getSubAdminById: builder.query({
       query: (id) => `/subadmin/admin/${id}`,
-      invalidatesTags: ["getSubAdmin", "prePopulate"],
+      providesTags: ["getSubAdminById"],
     }),
 
     // // ========[Toggle Status]========
@@ -56,7 +56,7 @@ export const sabAdminMaster = createApi({
         method: "PATCH",
         body: data,
       }),
-      invalidatesTags: ["getSubAdmin", "prePopulate"],
+      invalidatesTags: ["getSubAdmin"],
     }),
 
 
@@ -68,34 +68,7 @@ export const sabAdminMaster = createApi({
       }),
       invalidatesTags: ["getSubAdmin"],
     }),
-
-
-    // // ========[Get Active]========
-
-    // getActiveSponserMaster: builder.query({
-    //   query: () => `/sponsor/admin/active`,
-    // }),
-
-    // getSponserMasterActive: builder.query({
-    //   query: () => "/sponsor/admin/active",
-    // }),
-
-    // // ======[Get ID]=====
-
-    // getSponserById: builder.query({
-    //   query: (id) => `/sponsor/admin/${id}`,
-    // }),
-
-    // // ========[Update Sponser]========
-
-    // updateSponser: builder.mutation({
-    //   query: ({ data, id }) => ({
-    //     url: `/sponsor/admin/${id}`,
-    //     method: "PATCH",
-    //     body: data,
-    //   }),
-    //   invalidatesTags: ["getSponser"],
-    // }),
+    
 
   }),
 });
-- 
2.34.1