From 125c5233ffa362cb3412e7a0c5035beeeaf033c8 Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Tue, 30 Jul 2024 13:30:34 +0530
Subject: [PATCH] transation modal

---
 src/Components/DataTable/DataTable.jsx        |  11 +-
 .../ViewIO/HeaderModal/Cancle.jsx             | 319 +++++++++++++---
 .../HeaderModal/DistributionInvestor.jsx      | 119 +++---
 .../HeaderModal/DistributionSponsor.jsx       |   2 +-
 .../IO_Management/ViewIO/HeaderModal/Exit.jsx | 342 +++++++++++++-----
 .../ViewIO/HeaderModal/FeesExpenses.jsx       |   2 +-
 .../ViewIO/HeaderModal/UpdateIONav.jsx        |   2 +-
 src/Pages/Master/Sponser/AddSponser.jsx       |   6 +-
 src/Pages/Master/Sponser/Sponsers.jsx         |   2 +
 src/Services/investment.type.service.js       |   2 +-
 10 files changed, 605 insertions(+), 202 deletions(-)

diff --git a/src/Components/DataTable/DataTable.jsx b/src/Components/DataTable/DataTable.jsx
index 3fb0e31..f7d0785 100644
--- a/src/Components/DataTable/DataTable.jsx
+++ b/src/Components/DataTable/DataTable.jsx
@@ -10,6 +10,7 @@ import {
   Skeleton,
   TableCaption,
   Box,
+  Text,
 } from "@chakra-ui/react";
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
 import EmptySearchList from "../EmptySearchList";
@@ -28,7 +29,8 @@ const DataTable = ({
   setMouseEntered,
   setMouseEnteredId,
   caption,
-  isDraggable
+  isDraggable,
+  capTitle
 }) => {
   const navigate = useNavigate();
   const { slideFromRight } = useContext(GlobalStateContext);
@@ -61,6 +63,8 @@ const DataTable = ({
         <DragDropContext onDragEnd={handleDragEnd}>
           <Droppable droppableId="table">
             {(provided) => (
+              <>
+              {/*  */}
               <Table size="sm" {...provided.droppableProps} ref={provided.innerRef}>
                 <TableCaption p={0}>{caption}</TableCaption>
                 <Thead backgroundColor="gray.50">
@@ -143,6 +147,11 @@ const DataTable = ({
                   {provided.placeholder}
                 </Tbody>
               </Table>
+              <Box>
+                <Text>{capTitle}</Text>
+                <Box mb={2}>{caption}</Box>
+              </Box>
+              </>
             )}
           </Droppable>
         </DragDropContext>
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/Cancle.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/Cancle.jsx
index b906ea3..105add7 100644
--- a/src/Pages/IO_Management/ViewIO/HeaderModal/Cancle.jsx
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/Cancle.jsx
@@ -1,63 +1,266 @@
 import {
-    Box,
-    Button,
-    FormControl,
-    FormLabel,
-    Input,
-    Modal,
-    ModalBody,
-    ModalCloseButton,
-    ModalContent,
-    ModalFooter,
-    ModalHeader,
-    ModalOverlay,
-    Text,
-    Textarea,
-  } from "@chakra-ui/react";
-  
-  const Cancle = ({ isOpen, onClose }) => {
+  Box,
+  Button,
+  FormControl,
+  FormLabel,
+  HStack,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Switch,
+  Table,
+  Tbody,
+  Text,
+  Textarea,
+  Th,
+  Tr,
+} from "@chakra-ui/react";
+import DataTable from "../../../../Components/DataTable/DataTable";
+import { useState } from "react";
+import { AddIcon } from "@chakra-ui/icons";
+
+const Cancle = ({ isOpen, onClose }) => {
+  // ====================================================[Table Setup]================================================================
+  const tableHeadRow = [
+    "Sr No.",
+    "Client Id",
+    "First name",
+    "Last Name",
+    "Invested Amount",
+    "Distribution %",
+    "Exit Amount",
+  ];
+
+  const filteredData = [
+    {
+      id: 1,
+    },
+    {
+      id: 1,
+    },
+    {
+      id: 1,
+    },
+    {
+      id: 1,
+    },
+    {
+      id: 1,
+    },
+    {
+      id: 1,
+    },
+  ];
+
+  const [extractedArray, setExtractedArray] = useState(
+    filteredData?.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"}>
+            BH0000000
+          </Text>
+        </Box>
+      ),
+      "First name": (
+        <Box minW={24} isTruncated={true}>
+          <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+            Faisal
+          </Text>
+        </Box>
+      ),
+      "Last Name": (
+        <Box minW={24} isTruncated={true}>
+          <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+            Aljalahma
+          </Text>
+        </Box>
+      ),
+      "Invested Amount": (
+        <Box minW={24} isTruncated={true}>
+          <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+            $100,000
+          </Text>
+        </Box>
+      ),
+      "Distribution %": (
+        <Box minW={19} isTruncated={true}>
+          <Text
+            textAlign={"right"}
+            as={"span"}
+            color={"teal.900"}
+            fontWeight={"500"}
+          >
+            26.0 %
+          </Text>
+        </Box>
+      ),
+      "Exit Amount": (
+        <Box minW={24} isTruncated={true}>
+          <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+            $100,000
+          </Text>
+        </Box>
+      ),
+    }))
+  );
+
+  const Total = () => {
     return (
-      <Modal isCentered isOpen={isOpen} onClose={onClose}>
-        <ModalOverlay />
-        <ModalContent>
-          <ModalHeader fontSize={'md'}>Cancel</ModalHeader>
-          <ModalCloseButton />
-          <ModalBody>
-  <FormControl mb={"15px"} >
-    <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>Comment</FormLabel>
-    <Textarea 
-      size="sm"
-      rounded={'sm'}
-      textAlign={'start'}
-      rows={3}
-      focusBorderColor="forestGreen.300"
-      fontSize={"sm"} placeholder="Enter comments here..."  />
-  </FormControl>
-  
-          </ModalBody>
-          <ModalFooter>
-            <Button
-              bg={"hsla(139, 100%, 14%, 1)"}
-              mr={3}
-              color={"#fff"}
-              _hover={{
-                bg: "hsl(139deg 98.99% 26.59%)",
-              }}
-              size={'sm'}
-              rounded={"sm"}
+      <Table size="sm">
+        <Tbody backgroundColor="gray.50">
+          <Tr>
+            <Th
+              textAlign={"left"}
+              p={3}
+              width="90px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
             >
-              Save
-            </Button>
-            <Button 
-              size={'sm'}
-              rounded={"sm"} mr={3} onClick={onClose}>
-              Close
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
+              Total
+            </Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="100px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              {" "}
+            </Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="90px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              {" "}
+            </Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="90px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              {" "}
+            </Th>
+            <Th
+              textAlign={"left"}
+              p={3}
+              width="100px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              $1,000,000
+            </Th>
+            <Th
+              textAlign={"left"}
+              p={3}
+              width="90px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              100.0%
+            </Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="100px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              $1,229,750 
+            </Th>
+          </Tr>
+        </Tbody>
+      </Table>
     );
   };
-  
-  export default Cancle;
-  
\ No newline at end of file
+
+  return (
+    <Modal size={"xl"} isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent maxW={1000}>
+        <ModalHeader fontSize={"md"}>Cancel Transaction</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <Text as="label" mb='5px' fontSize='sm' fontWeight={500}>Enter Cancellation Amount</Text>
+          <HStack mb={4}>
+            <Input focusBorderColor="forestGreen.400" placeholder="$00.00" size={"sm"} className="col" />
+            <Button
+              size={"sm"}
+              rounded={"sm"}
+              colorScheme="forestGreen"
+            >
+              Calculate
+            </Button>
+          </HStack>
+
+          <DataTable
+            emptyMessage={`We don't have any Sponers `}
+            tableHeadRow={tableHeadRow}
+            data={extractedArray}
+            setData={setExtractedArray}
+            caption={<Total />}
+            // isLoading={isLoading}
+          />
+        </ModalBody>
+        <ModalFooter pt={0}>
+          <Button
+            bg={"hsla(139, 100%, 14%, 1)"}
+            mr={3}
+            color={"#fff"}
+            _hover={{
+              bg: "hsl(139deg 98.99% 26.59%)",
+            }}
+            size={'sm'}
+            rounded={"sm"}
+          >
+            Save
+          </Button>
+          <Button 
+            size={'sm'}
+            rounded={"sm"} mr={3} onClick={onClose}>
+            Close
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default Cancle;
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionInvestor.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionInvestor.jsx
index 4ac31e3..36b88a5 100644
--- a/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionInvestor.jsx
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionInvestor.jsx
@@ -25,7 +25,6 @@ import { useState } from "react";
 import { AddIcon } from "@chakra-ui/icons";
 
 const DistributionInvestor = ({ isOpen, onClose }) => {
-
   // ====================================================[Table Setup]================================================================
   const tableHeadRow = [
     "Sr No.",
@@ -49,68 +48,80 @@ const DistributionInvestor = ({ isOpen, onClose }) => {
     },
     {
       id: 1,
-    },]
+    },
+  ];
 
   const [extractedArray, setExtractedArray] = useState(
     filteredData?.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>,
+      "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"}>
-          BH00000001
+            BH00000001
           </Text>
         </Box>
       ),
       "First name": (
         <Box minW={24} isTruncated={true}>
           <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
-          Faisal
+            Faisal
           </Text>
         </Box>
       ),
       "Last Name": (
         <Box minW={24} isTruncated={true}>
-        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
-        Aljalahma
-        </Text>
+          <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+            Aljalahma
+          </Text>
         </Box>
       ),
-      "Amount": (
+      Amount: (
         <Box minW={24} isTruncated={true}>
-        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
-        $100,000 /-
-        </Text>
+          <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+            $100,000 /-
+          </Text>
         </Box>
       ),
       "%": (
         <Box minW={19} isTruncated={true}>
-        <Text textAlign={'right'} as={"span"} color={"teal.900"} fontWeight={"500"}>
-        26.0 %
-        </Text>
+          <Text
+            textAlign={"right"}
+            as={"span"}
+            color={"teal.900"}
+            fontWeight={"500"}
+          >
+            26.0 %
+          </Text>
         </Box>
       ),
       "($)": (
         <Box minW={24} isTruncated={true}>
-        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
-        $100,000 /-
-        </Text>
+          <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+            $100,000 /-
+          </Text>
         </Box>
       ),
     }))
   );
 
-
   const Total = () => {
     return (
       <Table size="sm">
         <Tbody backgroundColor="gray.50">
-          <Tr >
+          <Tr>
             <Th
               textAlign={"left"}
               p={3}
@@ -175,7 +186,7 @@ const DistributionInvestor = ({ isOpen, onClose }) => {
               wordBreak="normal"
               overflowWrap="normal"
             >
-              {" "}
+              100.0%
             </Th>
             <Th
               textAlign={"center"}
@@ -186,7 +197,6 @@ const DistributionInvestor = ({ isOpen, onClose }) => {
               wordBreak="normal"
               overflowWrap="normal"
             >
-              
               $100230
             </Th>
           </Tr>
@@ -195,35 +205,37 @@ const DistributionInvestor = ({ isOpen, onClose }) => {
     );
   };
 
-
-
-
-
   return (
-    <Modal size={'xl'} isOpen={isOpen} onClose={onClose}>
+    <Modal size={"xl"} isOpen={isOpen} onClose={onClose}>
       <ModalOverlay />
-      <ModalContent maxW={1000} >
-        <ModalHeader fontSize={"md"}>Distribution To investors</ModalHeader>
+      <ModalContent maxW={1000}>
+        <ModalHeader fontSize={"md"}>Distribution To Investor Transaction</ModalHeader>
         <ModalCloseButton />
-        <ModalBody >
+        <ModalBody>
+        <Text as="label" mb='5px' fontSize='sm' fontWeight={500}>Amount to Distribute</Text>
+          <HStack mb={4}>
+            <Input placeholder="$00.00" size={"sm"} className="col" />
+            {/* <Input placeholder="$00.00" size={"sm"} className="col" /> */}
+            <Button
+              // leftIcon={<AddIcon />}
+              size={"sm"}
+              rounded={"sm"}
+              colorScheme="forestGreen"
+            >
+              Calculate
+            </Button>
+          </HStack>
 
-<HStack mb={4} >
-  <Input placeholder="$00.00" size={'sm'} className="col" />
-  <Input placeholder="$00.00" size={'sm'} className="col" />
-  <Button leftIcon={<AddIcon />} size={'sm'} rounded={'sm'} colorScheme="forestGreen">Add</Button>
-</HStack>
-
-        <DataTable
-        emptyMessage={`We don't have any Sponers `}
-        tableHeadRow={tableHeadRow}
-        data={extractedArray}
-        setData={setExtractedArray}
-        caption={<Total/>}
-        // isLoading={isLoading}
-      />
-          
+          <DataTable
+            emptyMessage={`We don't have any Sponers `}
+            tableHeadRow={tableHeadRow}
+            data={extractedArray}
+            setData={setExtractedArray}
+            caption={<Total />}
+            // isLoading={isLoading}
+          />
         </ModalBody>
-        {/* <ModalFooter>
+        <ModalFooter pt={0}>
           <Button
             bg={"hsla(139, 100%, 14%, 1)"}
             mr={3}
@@ -241,10 +253,7 @@ const DistributionInvestor = ({ isOpen, onClose }) => {
             rounded={"sm"} mr={3} onClick={onClose}>
             Close
           </Button>
-        </ModalFooter> */}
-
-
-        
+        </ModalFooter>
       </ModalContent>
     </Modal>
   );
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionSponsor.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionSponsor.jsx
index 4076396..c1ad0ef 100644
--- a/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionSponsor.jsx
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionSponsor.jsx
@@ -20,7 +20,7 @@ const DistributionSponsor = ({ isOpen, onClose }) => {
     <Modal isOpen={isOpen} onClose={onClose}>
       <ModalOverlay />
       <ModalContent>
-        <ModalHeader fontSize={'md'}>Distribution from Sponsors</ModalHeader>
+        <ModalHeader fontSize={'md'}>Distribution from Sponsor Transaction</ModalHeader>
         <ModalCloseButton />
         <ModalBody>
           <FormControl mb={"15px"}>
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/Exit.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/Exit.jsx
index eb3c41a..74fc695 100644
--- a/src/Pages/IO_Management/ViewIO/HeaderModal/Exit.jsx
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/Exit.jsx
@@ -1,86 +1,266 @@
 import {
-    Box,
-    Button,
-    FormControl,
-    FormLabel,
-    Input,
-    Modal,
-    ModalBody,
-    ModalCloseButton,
-    ModalContent,
-    ModalFooter,
-    ModalHeader,
-    ModalOverlay,
-    Text,
-    Textarea,
-  } from "@chakra-ui/react";
-  
-  const Exit = ({ isOpen, onClose }) => {
+  Box,
+  Button,
+  FormControl,
+  FormLabel,
+  HStack,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Switch,
+  Table,
+  Tbody,
+  Text,
+  Textarea,
+  Th,
+  Tr,
+} from "@chakra-ui/react";
+import DataTable from "../../../../Components/DataTable/DataTable";
+import { useState } from "react";
+import { AddIcon } from "@chakra-ui/icons";
+
+const Exit = ({ isOpen, onClose }) => {
+  // ====================================================[Table Setup]================================================================
+  const tableHeadRow = [
+    "Sr No.",
+    "Client Id",
+    "First name",
+    "Last Name",
+    "Invested Amount",
+    "Distribution %",
+    "Exit Amount",
+  ];
+
+  const filteredData = [
+    {
+      id: 1,
+    },
+    {
+      id: 1,
+    },
+    {
+      id: 1,
+    },
+    {
+      id: 1,
+    },
+    {
+      id: 1,
+    },
+    {
+      id: 1,
+    },
+  ];
+
+  const [extractedArray, setExtractedArray] = useState(
+    filteredData?.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"}>
+            BH0000000
+          </Text>
+        </Box>
+      ),
+      "First name": (
+        <Box minW={24} isTruncated={true}>
+          <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+            Faisal
+          </Text>
+        </Box>
+      ),
+      "Last Name": (
+        <Box minW={24} isTruncated={true}>
+          <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+            Aljalahma
+          </Text>
+        </Box>
+      ),
+      "Invested Amount": (
+        <Box minW={24} isTruncated={true}>
+          <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+            $100,000
+          </Text>
+        </Box>
+      ),
+      "Distribution %": (
+        <Box minW={19} isTruncated={true}>
+          <Text
+            textAlign={"right"}
+            as={"span"}
+            color={"teal.900"}
+            fontWeight={"500"}
+          >
+            26.0 %
+          </Text>
+        </Box>
+      ),
+      "Exit Amount": (
+        <Box minW={24} isTruncated={true}>
+          <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+            $100,000
+          </Text>
+        </Box>
+      ),
+    }))
+  );
+
+  const Total = () => {
     return (
-      <Modal isOpen={isOpen} onClose={onClose}>
-        <ModalOverlay />
-        <ModalContent>
-          <ModalHeader fontSize={'md'}>Amount Invested</ModalHeader>
-          <ModalCloseButton />
-          <ModalBody>
-            <FormControl mb={"15px"}>
-              <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
-                Date
-              </FormLabel>
-              <Input
-                placeholder="Select Date"
-                size="sm"
-                rounded={'sm'}
-                fontSize={"sm"}
-                focusBorderColor="forestGreen.300"
-                type="date"
-              />
-            </FormControl>
-  
-            <FormControl mb={"15px"} >
-              <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>IO NAV</FormLabel>
-              <Input 
-                size="sm"
-                rounded={'sm'}
-                textAlign={'end'}
-                focusBorderColor="forestGreen.300"
-                fontSize={"sm"} placeholder="$00.00"  />
-            </FormControl>
-  
-  <FormControl mb={"15px"} >
-    <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>Distribution</FormLabel>
-    <Input 
-      size="sm"
-      rounded={'sm'}
-      textAlign={'end'}
-      focusBorderColor="forestGreen.300"
-      fontSize={"sm"} placeholder="$00.00"  />
-  </FormControl>
-  
-          </ModalBody>
-          <ModalFooter>
-            <Button
-              bg={"hsla(139, 100%, 14%, 1)"}
-              mr={3}
-              color={"#fff"}
-              _hover={{
-                bg: "hsl(139deg 98.99% 26.59%)",
-              }}
-              size={'sm'}
-              rounded={"sm"}
+      <Table size="sm">
+        <Tbody backgroundColor="gray.50">
+          <Tr>
+            <Th
+              textAlign={"left"}
+              p={3}
+              width="90px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
             >
-              Save
-            </Button>
-            <Button 
-              size={'sm'}
-              rounded={"sm"} mr={3} onClick={onClose}>
-              Close
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
+              Total
+            </Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="100px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              {" "}
+            </Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="90px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              {" "}
+            </Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="90px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              {" "}
+            </Th>
+            <Th
+              textAlign={"left"}
+              p={3}
+              width="100px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              $1,000,000
+            </Th>
+            <Th
+              textAlign={"left"}
+              p={3}
+              width="90px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              100.0%
+            </Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="100px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              $1,229,750 
+            </Th>
+          </Tr>
+        </Tbody>
+      </Table>
     );
   };
-  
-  export default Exit;
-  
\ No newline at end of file
+
+  return (
+    <Modal size={"xl"} isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent maxW={1000}>
+        <ModalHeader fontSize={"md"}>Exit Transaction</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+        <Text as="label" mb='5px' fontSize='sm' fontWeight={500}>Enter Exit Amount</Text>
+          <HStack mb={4}>
+            <Input focusBorderColor="forestGreen.400" placeholder="$00.00" size={"sm"} className="col" />
+            <Button
+              size={"sm"}
+              rounded={"sm"}
+              colorScheme="forestGreen"
+            >
+              Calculate
+            </Button>
+          </HStack>
+
+          <DataTable
+            emptyMessage={`We don't have any Sponers `}
+            tableHeadRow={tableHeadRow}
+            data={extractedArray}
+            setData={setExtractedArray}
+            caption={<Total />}
+            // isLoading={isLoading}
+          />
+        </ModalBody>
+        <ModalFooter pt={0}>
+          <Button
+            bg={"hsla(139, 100%, 14%, 1)"}
+            mr={3}
+            color={"#fff"}
+            _hover={{
+              bg: "hsl(139deg 98.99% 26.59%)",
+            }}
+            size={'sm'}
+            rounded={"sm"}
+          >
+            Save
+          </Button>
+          <Button 
+            size={'sm'}
+            rounded={"sm"} mr={3} onClick={onClose}>
+            Close
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default Exit;
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/FeesExpenses.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/FeesExpenses.jsx
index 5ef5506..5e232c0 100644
--- a/src/Pages/IO_Management/ViewIO/HeaderModal/FeesExpenses.jsx
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/FeesExpenses.jsx
@@ -21,7 +21,7 @@ const FeesExpenses = ({ isOpen, onClose }) => {
     <Modal isOpen={isOpen} onClose={onClose}>
       <ModalOverlay />
       <ModalContent>
-        <ModalHeader fontSize={'md'}>Fees & Expenses</ModalHeader>
+        <ModalHeader fontSize={'md'}>Fees & Expenses Transaction</ModalHeader>
         <ModalCloseButton />
         <ModalBody>
           <FormControl mb={"15px"}>
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIONav.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIONav.jsx
index 5298630..526ab5e 100644
--- a/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIONav.jsx
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIONav.jsx
@@ -20,7 +20,7 @@ const UpdateIONav = ({ isOpen, onClose }) => {
     <Modal isOpen={isOpen} onClose={onClose}>
       <ModalOverlay />
       <ModalContent>
-        <ModalHeader fontSize={'md'}>Update iO NAV</ModalHeader>
+        <ModalHeader fontSize={'md'}>Update iO NAV Transaction</ModalHeader>
         <ModalCloseButton />
         <ModalBody>
           <FormControl mb={"15px"}>
diff --git a/src/Pages/Master/Sponser/AddSponser.jsx b/src/Pages/Master/Sponser/AddSponser.jsx
index 158a9f7..ad4dce3 100644
--- a/src/Pages/Master/Sponser/AddSponser.jsx
+++ b/src/Pages/Master/Sponser/AddSponser.jsx
@@ -94,8 +94,8 @@ const AddSponser = () => {
       try {
         const formData = {
           ...form,
-          // isActive: isSwitchOn,
-        };
+          isActive: isSwitchOn,
+        };  
             // Remove email field if it's an empty string
     if (formData.email === '') {
       delete formData.email;
@@ -129,7 +129,7 @@ const AddSponser = () => {
       try {
         const formData = {
           ...form,
-          // isActive: isSwitchOn,
+          isActive: isSwitchOn,
         };
         await createSponser(formData).then((response) => {
           console.log(response);
diff --git a/src/Pages/Master/Sponser/Sponsers.jsx b/src/Pages/Master/Sponser/Sponsers.jsx
index 8483d19..6f2fd35 100644
--- a/src/Pages/Master/Sponser/Sponsers.jsx
+++ b/src/Pages/Master/Sponser/Sponsers.jsx
@@ -42,6 +42,8 @@ const Sponser = () => {
 
   const {data: sponsors,error,isLoading: isSponserLoading,} = useGetSponserMasterQuery({ page: 1, size: 20 });
 
+  console.log(sponsors?.data?.rows);
+
   // ========================= [Toggle ToastBox] ==========================
 
   // const handleUpdateStatus = debounce(async (id) => {
diff --git a/src/Services/investment.type.service.js b/src/Services/investment.type.service.js
index 334f872..bee903b 100644
--- a/src/Services/investment.type.service.js
+++ b/src/Services/investment.type.service.js
@@ -41,7 +41,7 @@ export const investmentType = createApi({
 
     updateInvestmentType: builder.mutation({
       query: ({ data, id }) => ({
-        url: `/investmentType/admin/${id}`,
+        url: `/investmentType/admin/${id}`, 
         method: "PATCH",
         body: data,
       }),