From 2ae2b12267bac1117d12a923db23de5d8f2b0218 Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Mon, 8 Jul 2024 12:23:26 +0530
Subject: [PATCH 1/7] stash commit

---
 src/Components/DataTable/DataTable.jsx        |   2 +-
 src/Pages/IO_Management/CreateIO/CreateIO.jsx |   2 +-
 .../IO_Management/CreateIO/IOArtifacts.jsx    |   4 +-
 .../IO_Management/CreateIO/KeyMerits.jsx      |   5 +-
 src/Pages/IO_Management/IOArtifactsAdd.jsx    | 140 ++++++++++++++++
 src/Pages/IO_Management/KeyMeritsAdd.jsx      | 150 ++++++++++++++++++
 6 files changed, 297 insertions(+), 6 deletions(-)
 create mode 100644 src/Pages/IO_Management/IOArtifactsAdd.jsx
 create mode 100644 src/Pages/IO_Management/KeyMeritsAdd.jsx

diff --git a/src/Components/DataTable/DataTable.jsx b/src/Components/DataTable/DataTable.jsx
index f8864ed..db0537a 100644
--- a/src/Components/DataTable/DataTable.jsx
+++ b/src/Components/DataTable/DataTable.jsx
@@ -27,7 +27,7 @@ const DataTable = ({
   const { slideFromRight } = useContext(GlobalStateContext);
 
   return (
-    <TableContainer overflowX={"hidden"} className="h-auto mb-3 w-100">
+    <TableContainer overflowX={"scroll"} className="h-auto mb-3 w-100">
       {data?.length === 0 ? (
         <EmptySearchList message={emptyMessage} />
       ) : (
diff --git a/src/Pages/IO_Management/CreateIO/CreateIO.jsx b/src/Pages/IO_Management/CreateIO/CreateIO.jsx
index bd37bb4..d8b9266 100644
--- a/src/Pages/IO_Management/CreateIO/CreateIO.jsx
+++ b/src/Pages/IO_Management/CreateIO/CreateIO.jsx
@@ -151,7 +151,7 @@ const CreateIO = () => {
     {
       label: "Investors",
       content: <Investors control={control} errors={errors} />,
-      isDisabled: true,
+      isDisabled: false,
     },
     {
       label: "IO Cash Details",
diff --git a/src/Pages/IO_Management/CreateIO/IOArtifacts.jsx b/src/Pages/IO_Management/CreateIO/IOArtifacts.jsx
index 938afff..12607f2 100644
--- a/src/Pages/IO_Management/CreateIO/IOArtifacts.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOArtifacts.jsx
@@ -7,7 +7,6 @@ import {
   useDisclosure,
 } from "@chakra-ui/react";
 import React, { useContext, useEffect, useRef, useState } from "react";
-import InvestmentDocuments from "../InvestmentDocuments";
 import DataTable from "../../../Components/DataTable/DataTable";
 import CustomAlertDialog from "../../../Components/CustomAlertDialog";
 import GlobalStateContext from "../../../Contexts/GlobalStateContext";
@@ -20,6 +19,7 @@ import {
   EditIcon,
   ViewIcon,
 } from "@chakra-ui/icons";
+import IOArtifactsAdd from "../IOArtifactsAdd";
 
 const IOArtifacts = () => {
   const { iOArtifacts, setIOArtifacts, slideFromRight } =
@@ -220,7 +220,7 @@ const IOArtifacts = () => {
         >
           Add
         </Button>
-        <InvestmentDocuments
+        <IOArtifactsAdd
           isOpen={isOpen}
           onClose={onClose}
           firstField={firstField}
diff --git a/src/Pages/IO_Management/CreateIO/KeyMerits.jsx b/src/Pages/IO_Management/CreateIO/KeyMerits.jsx
index 7110a56..9b175fc 100644
--- a/src/Pages/IO_Management/CreateIO/KeyMerits.jsx
+++ b/src/Pages/IO_Management/CreateIO/KeyMerits.jsx
@@ -7,6 +7,7 @@ import GlobalStateContext from "../../../Contexts/GlobalStateContext";
 import { debounce } from "../../Master/Sponser/AddSponser";
 import { formatDate } from "../../../Components/Functions/UTCConvertor";
 import { AddIcon, DeleteIcon, DownloadIcon, EditIcon, ViewIcon } from "@chakra-ui/icons";
+import KeyMeritsAdd from "../KeyMeritsAdd";
 
 const KeyMerits = () => {
     const { keyMerits, setKeyMerits,slideFromRight} =
@@ -132,7 +133,7 @@ const KeyMerits = () => {
             rounded={"sm"}
             size={"xs"}
           >
-            <ViewIcon />
+            <ViewIcon /> 
           </Button>
         </Tooltip>
         <Tooltip
@@ -207,7 +208,7 @@ const KeyMerits = () => {
         >
           Add
         </Button>
-        <InvestmentDocuments
+        <KeyMeritsAdd
           isOpen={isOpen}
           onClose={onClose}
           firstField={firstField}
diff --git a/src/Pages/IO_Management/IOArtifactsAdd.jsx b/src/Pages/IO_Management/IOArtifactsAdd.jsx
new file mode 100644
index 0000000..a0367f9
--- /dev/null
+++ b/src/Pages/IO_Management/IOArtifactsAdd.jsx
@@ -0,0 +1,140 @@
+import {
+    Box,
+    Button,
+    Drawer,
+    DrawerBody,
+    DrawerCloseButton,
+    DrawerContent,
+    DrawerFooter,
+    DrawerHeader,
+    DrawerOverlay,
+    FormControl,
+    FormLabel,
+    Input,
+    InputGroup,
+    Stack,
+  } from "@chakra-ui/react";
+  import * as yup from "yup";
+  import React, { useContext, useEffect, useRef, useState } from "react";
+  import FormInputMain from "../../Components/FormInputMain";
+  import { useForm } from "react-hook-form";
+  import { yupResolver } from "@hookform/resolvers/yup";
+  import CustomAlertDialog from "../../Components/CustomAlertDialog";
+  
+  export const investmentDoct = yup.object().shape({
+    type: yup.string().required("Sponser name is required"),
+    document: yup.string().required("Sponser name is required"),
+    fileName: yup.string().required("Mobile no is required"),
+  });
+  
+  const IOArtifactsAdd = ({ id, isOpen, onClose, firstField }) => {
+    const [file, setFile] = useState("");
+    const [fileName, setFileName] = useState("");
+    const [alert, setAlert] = useState(false);
+  
+    const {
+      control,
+      handleSubmit,
+      formState: { errors },
+    } = useForm({
+      resolver: yupResolver(investmentDoct),
+    });
+  
+  
+  
+    const onSubmit = (data) => {
+      console.log(data);
+      setSponser([
+        {
+          ...data,
+          status: true,
+          id: uuidv4(),
+          createdAt: new Date().toISOString(),
+        },
+        ...investmentDoct,
+      ]);
+    };
+  
+    const handleSave = () => {
+      console.log({
+        fileName: fileName,
+        file:file
+      });
+      setAlert(false)
+      onClose()
+  
+    }
+  
+    return (
+      <>
+        <Drawer 
+          isOpen={isOpen}
+          placement="right"
+          initialFocusRef={firstField}
+          onClose={onClose}
+        >
+          <DrawerOverlay />
+          <DrawerContent>
+            <DrawerCloseButton />
+            <DrawerHeader fontSize={"sm"}>IO Artifacts</DrawerHeader>
+  
+            <DrawerBody>
+  
+              <FormControl mb={4}>
+                <FormLabel fontSize={"sm"}>File Name</FormLabel>
+                <Input
+                  value={fileName}
+                  onChange={(e) => setFileName(e.target.value)}
+                  fontSize={"sm"}
+                  type="text"
+                  size={"sm"}
+                />
+              </FormControl>
+              <FormControl mb={4}>
+                <FormLabel fontSize={"sm"}>Document</FormLabel>
+                <Input
+                  value={file}
+                  onChange={(e) => setFile(e.target.value)}
+                  fontSize={"sm"}
+                  type="file"
+                  className="form-control"
+                  size={"sm"}
+                />
+              </FormControl>
+  
+            </DrawerBody>
+            <DrawerFooter>
+              <Button
+                variant="outline"
+                colorScheme={"green"}
+                rounded={"sm"}
+                size={"sm"}
+                mr={3}
+                onClick={onClose}
+              >
+                Cancel
+              </Button>
+  
+              <Button
+                colorScheme={"green"}
+                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 this document?"}
+        />
+      </>
+    );
+  };
+  
+  export default IOArtifactsAdd;
+  
\ No newline at end of file
diff --git a/src/Pages/IO_Management/KeyMeritsAdd.jsx b/src/Pages/IO_Management/KeyMeritsAdd.jsx
new file mode 100644
index 0000000..2de28e9
--- /dev/null
+++ b/src/Pages/IO_Management/KeyMeritsAdd.jsx
@@ -0,0 +1,150 @@
+import {
+    Box,
+    Button,
+    Drawer,
+    DrawerBody,
+    DrawerCloseButton,
+    DrawerContent,
+    DrawerFooter,
+    DrawerHeader,
+    DrawerOverlay,
+    FormControl,
+    FormLabel,
+    Input,
+    InputGroup,
+    Stack,
+  } from "@chakra-ui/react";
+  import * as yup from "yup";
+  import React, { useContext, useEffect, useRef, useState } from "react";
+  import FormInputMain from "../../Components/FormInputMain";
+  import { useForm } from "react-hook-form";
+  import { yupResolver } from "@hookform/resolvers/yup";
+  import CustomAlertDialog from "../../Components/CustomAlertDialog";
+  
+  export const investmentDoct = yup.object().shape({
+    type: yup.string().required("Sponser name is required"),
+    document: yup.string().required("Sponser name is required"),
+    fileName: yup.string().required("Mobile no is required"),
+  });
+  
+  const KeyMeritsAdd = ({ id, isOpen, onClose, firstField }) => {
+    const [file, setFile] = useState("");
+    const [fileName, setFileName] = useState("");
+    const [alert, setAlert] = useState(false);
+  
+    const {
+      control,
+      handleSubmit,
+      formState: { errors },
+    } = useForm({
+      resolver: yupResolver(investmentDoct),
+    });
+  
+  
+  
+    const onSubmit = (data) => {
+      console.log(data);
+      setSponser([
+        {
+          ...data,
+          status: true,
+          id: uuidv4(),
+          createdAt: new Date().toISOString(),
+        },
+        ...investmentDoct,
+      ]);
+    };
+  
+    const handleSave = () => {
+      console.log({
+        fileName: fileName,
+        file:file
+      });
+      setAlert(false)
+      onClose()
+  
+    }
+  
+    return (
+      <>
+        <Drawer 
+          isOpen={isOpen}
+          placement="right"
+          initialFocusRef={firstField}
+          onClose={onClose}
+        >
+          <DrawerOverlay />
+          <DrawerContent>
+            <DrawerCloseButton />
+            <DrawerHeader fontSize={"sm"}>Key Merits</DrawerHeader>
+  
+            <DrawerBody>
+  
+              <FormControl mb={4}>
+                <FormLabel fontSize={"sm"}>Title</FormLabel>
+                <Input
+                  value={fileName}
+                  onChange={(e) => setFileName(e.target.value)}
+                  fontSize={"sm"}
+                  type="text"
+                  size={"sm"}
+                />
+              </FormControl>
+              <FormControl mb={4}>
+                <FormLabel fontSize={"sm"}>Sub Title</FormLabel>
+                <Input
+                  value={fileName}
+                  onChange={(e) => setFileName(e.target.value)}
+                  fontSize={"sm"}
+                  type="textarea"
+                  size={"sm"}
+                />
+              </FormControl>
+              <FormControl mb={4}>
+                <FormLabel fontSize={"sm"}>Icon</FormLabel>
+                <Input
+                  value={file}
+                  onChange={(e) => setFile(e.target.value)}
+                  fontSize={"sm"}
+                  type="file"
+                  className="form-control"
+                  size={"sm"}
+                />
+              </FormControl>
+  
+            </DrawerBody>
+            <DrawerFooter>
+              <Button
+                variant="outline"
+                colorScheme={"green"}
+                rounded={"sm"}
+                size={"sm"}
+                mr={3}
+                onClick={onClose}
+              >
+                Cancel
+              </Button>
+  
+              <Button
+                colorScheme={"green"}
+                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 this document?"}
+        />
+      </>
+    );
+  };
+  
+  export default KeyMeritsAdd;
+  
\ No newline at end of file

From c3893d843bf86e7c297a35dc7e5bcf41aaee3e7c Mon Sep 17 00:00:00 2001
From: rockyeverlast <rockyeverlast@gmail.com>
Date: Mon, 8 Jul 2024 20:14:34 +0530
Subject: [PATCH 2/7] CreatViewIO header menu and EditViewIO modal

---
 package-lock.json                             | 114 ++++++-
 src/Components/FormInputMain.jsx              |  43 +--
 src/Pages/IO_Management/EditIO/EditIO.jsx     | 282 ++++++++++++++++++
 src/Pages/IO_Management/EditIO/EditIOForm.jsx |  65 ++++
 .../ViewIO/HeaderModal/AmountInvested.jsx     |  32 ++
 .../HeaderModal/DistributionInvestor.jsx      |  68 +++++
 .../HeaderModal/DistributionSponsor.jsx       |  68 +++++
 .../ViewIO/HeaderModal/FeesExpenses.jsx       |  69 +++++
 .../ViewIO/HeaderModal/UpdateIONav.jsx        |  68 +++++
 .../ViewIO/HeaderModal/UpdateIOStatus.jsx     |  68 +++++
 src/Pages/IO_Management/ViewIO/ViewIOdata.jsx |  18 +-
 .../IO_Management/ViewIO/ViewIOdataHeader.jsx | 161 +++++++++-
 12 files changed, 1025 insertions(+), 31 deletions(-)
 create mode 100644 src/Pages/IO_Management/EditIO/EditIO.jsx
 create mode 100644 src/Pages/IO_Management/EditIO/EditIOForm.jsx
 create mode 100644 src/Pages/IO_Management/ViewIO/HeaderModal/AmountInvested.jsx
 create mode 100644 src/Pages/IO_Management/ViewIO/HeaderModal/DistributionInvestor.jsx
 create mode 100644 src/Pages/IO_Management/ViewIO/HeaderModal/DistributionSponsor.jsx
 create mode 100644 src/Pages/IO_Management/ViewIO/HeaderModal/FeesExpenses.jsx
 create mode 100644 src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIONav.jsx
 create mode 100644 src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx

diff --git a/package-lock.json b/package-lock.json
index 4b3e017..a7dc44f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "framer-motion": "^11.1.5",
         "js-cookie": "^3.0.5",
         "react": "^18.2.0",
+        "react-beautiful-dnd": "^13.1.1",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.51.3",
         "react-icons": "^5.1.0",
@@ -27,7 +28,7 @@
         "react-router-dom": "^6.22.3",
         "redux-persist": "^6.0.0",
         "redux-persist-transform-encrypt": "^5.1.1",
-        "uuid": "^9.0.1",
+        "uuid": "^10.0.0",
         "xlsx": "^0.18.5",
         "yup": "^1.4.0"
       },
@@ -2464,6 +2465,15 @@
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "dev": true
     },
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz",
+      "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==",
+      "dependencies": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "node_modules/@types/lodash": {
       "version": "4.17.0",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.0.tgz",
@@ -2485,8 +2495,7 @@
     "node_modules/@types/prop-types": {
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
-      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
-      "devOptional": true
+      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
     },
     "node_modules/@types/quill": {
       "version": "1.3.10",
@@ -2500,7 +2509,6 @@
       "version": "18.2.79",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.79.tgz",
       "integrity": "sha512-RwGAGXPl9kSXwdNTafkOEuFrTBD5SA2B3iEB96xi8+xu5ddUa/cpvyVCSNn+asgLCTHkb5ZxN8gbuibYJi4s1w==",
-      "devOptional": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -2515,6 +2523,25 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-redux": {
+      "version": "7.1.33",
+      "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.33.tgz",
+      "integrity": "sha512-NF8m5AjWCkert+fosDsN3hAlHzpjSiXlVy9EgQEmLoBhaNXbmyeGs/aj5dQzKuF+/q+S7JQagorGDW8pJ28Hmg==",
+      "dependencies": {
+        "@types/hoist-non-react-statics": "^3.3.0",
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0",
+        "redux": "^4.0.0"
+      }
+    },
+    "node_modules/@types/react-redux/node_modules/redux": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+      "dependencies": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
     "node_modules/@types/use-sync-external-store": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
@@ -4626,6 +4653,11 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -5042,6 +5074,11 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/raf-schd": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz",
+      "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ=="
+    },
     "node_modules/react": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@@ -5053,6 +5090,61 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-beautiful-dnd": {
+      "version": "13.1.1",
+      "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz",
+      "integrity": "sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.9.2",
+        "css-box-model": "^1.2.0",
+        "memoize-one": "^5.1.1",
+        "raf-schd": "^4.0.2",
+        "react-redux": "^7.2.0",
+        "redux": "^4.0.4",
+        "use-memo-one": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.5 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.5 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-beautiful-dnd/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+    },
+    "node_modules/react-beautiful-dnd/node_modules/react-redux": {
+      "version": "7.2.9",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz",
+      "integrity": "sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.15.4",
+        "@types/react-redux": "^7.1.20",
+        "hoist-non-react-statics": "^3.3.2",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-is": "^17.0.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.3 || ^17 || ^18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-beautiful-dnd/node_modules/redux": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+      "dependencies": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
     "node_modules/react-clientside-effect": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz",
@@ -5913,6 +6005,14 @@
         }
       }
     },
+    "node_modules/use-memo-one": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.3.tgz",
+      "integrity": "sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/use-sidecar": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
@@ -5943,9 +6043,9 @@
       }
     },
     "node_modules/uuid": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
-      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
       "funding": [
         "https://github.com/sponsors/broofa",
         "https://github.com/sponsors/ctavan"
diff --git a/src/Components/FormInputMain.jsx b/src/Components/FormInputMain.jsx
index ee67c64..2edef3d 100644
--- a/src/Components/FormInputMain.jsx
+++ b/src/Components/FormInputMain.jsx
@@ -5,28 +5,29 @@ import { OPACITY_ON_LOAD } from "../Layout/animations";
 import { ArrowBackIcon } from "@chakra-ui/icons";
 
 const FormInputMain = ({
+  register,
   groupedFields,
   control,
   errors,
   onSubmit,
   children,
-  onCancle, 
+  onCancle,
   submitTitle,
   p,
-  w
+  w,
 }) => {
   return (
     <form onSubmit={onSubmit}>
       {Object.entries(groupedFields).map(([section, fields], index) => (
-        <Box key={section} mt={4} >
-          <Heading as="h6" size="xs" mx={5} fontWeight={'500'}>
+        <Box key={section} mt={4}>
+          <Heading as="h6" size="xs" mx={5} fontWeight={"500"}>
             {/* <ArrowBackIcon fontSize={'lg'} />  */}
             {section}
           </Heading>
           <Box display={"flex"} gap={0}>
             <Box
               width={"100%"}
-              p={p?p:5}
+              p={p ? p : 5}
               display={"flex"}
               flexWrap={"wrap"}
               gap={4}
@@ -49,7 +50,7 @@ const FormInputMain = ({
                     options,
                     helperText,
                     multiple,
-                    width
+                    width,
                   },
                   key
                 ) => (
@@ -83,22 +84,24 @@ const FormInputMain = ({
       ))}
 
       {children}
-      
-      <Box display={'flex'} justifyContent={'end'} mb={5}>
-        <Box display={"flex"} justifyContent={"end"} p={2} w={'49%'} gap={4}>
-          {onCancle && <Button
-            size={"sm"}
-            width={w?w:"44.5%"}
-            rounded={"sm"}
-            type="submit"
-            colorScheme='gray'
-            onClick={onCancle}
-          >
-            Cancel
-          </Button>}
+
+      <Box display={"flex"} justifyContent={"end"} mb={5}>
+        <Box display={"flex"} justifyContent={"end"} p={2} w={"49%"} gap={4}>
+          {onCancle && (
+            <Button
+              size={"sm"}
+              width={w ? w : "44.5%"}
+              rounded={"sm"}
+              type="submit"
+              colorScheme="gray"
+              onClick={onCancle}
+            >
+              Cancel
+            </Button>
+          )}
           <Button
             size={"sm"}
-            width={w?w:"44.5%"}
+            width={w ? w : "44.5%"}
             rounded={"sm"}
             type="submit"
             colorScheme="green"
diff --git a/src/Pages/IO_Management/EditIO/EditIO.jsx b/src/Pages/IO_Management/EditIO/EditIO.jsx
new file mode 100644
index 0000000..a93561e
--- /dev/null
+++ b/src/Pages/IO_Management/EditIO/EditIO.jsx
@@ -0,0 +1,282 @@
+import {
+  Box,
+  Button,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Textarea,
+} from "@chakra-ui/react";
+import { useForm } from "react-hook-form";
+import FormInputMain from "../../../Components/FormInputMain";
+import FormField from "./EditIOForm";
+
+const EditIO = ({ isOpen, onClose }) => {
+  const {
+    register,
+    handleSubmit,
+    control,
+    formState: { errors },
+  } = useForm({
+    defaultValues: {
+      ioName: "",
+      ioNameArabic: "",
+      description: "",
+      descriptionArabic: "",
+      typeName: "",
+      typeNameArabic: "",
+      sponserName: "",
+      sponserNameArabic: "",
+      goalAmount: 0,
+      minInvestment: 0,
+      maxInvestment: 0,
+      holdingPeriod: 0,
+      expectedReturn: 0,
+      closingDate: "",
+      ioStatus: "",
+    },
+  });
+
+  const formFields = [
+    {
+      label: "IO Name (English)",
+      placeHolder: " ",
+      name: "ioName",
+      type: "text",
+
+      section: " ",
+      width: "49%",
+    },
+    {
+      label: "IO Name (Arabic)",
+      placeHolder: " ",
+      name: "ioNameArabic",
+      type: "text",
+
+      section: " ",
+      width: "49%",
+    },
+    {
+      label: "Description (English)",
+      placeHolder: " ",
+      name: "discription",
+      type: "textarea",
+
+      section: " ",
+      width: "49%",
+    },
+    {
+      label: "Description (Arabic)",
+      placeHolder: " ",
+      name: "discriptionArabic",
+      type: "textarea",
+
+      section: " ",
+      width: "49%",
+    },
+    {
+      label: "Investment Type (English)",
+      placeHolder: " ",
+      name: "typeName",
+      type: "select",
+
+      section: " ",
+      width: "49%",
+      options: [
+        {
+          label: "option 1",
+          value: "option 1",
+        },
+        {
+          label: "option 2",
+          value: "option 2",
+        },
+        {
+          label: "option 3",
+          value: "option 3",
+        },
+        {
+          label: "option 4",
+          value: "option 4",
+        },
+      ],
+    },
+    {
+      label: "Investment Type (Arabic)",
+      placeHolder: " ",
+      name: "typeNameArabic",
+      type: "select",
+
+      section: " ",
+      width: "49%",
+      options: [
+        {
+          label: "option 1",
+          value: "option 1",
+        },
+        {
+          label: "option 2",
+          value: "option 2",
+        },
+        {
+          label: "option 3",
+          value: "option 3",
+        },
+        {
+          label: "option 4",
+          value: "option 4",
+        },
+      ],
+    },
+    {
+      label: "Sponser Name (English)",
+      placeHolder: " ",
+      name: "sponserName",
+      type: "text",
+
+      section: " ",
+      width: "49%",
+    },
+    {
+      label: "Sponser Name (Arabic)",
+      placeHolder: " ",
+      name: "sponserNameArabic",
+      type: "text",
+
+      section: " ",
+      width: "49%",
+    },
+    {
+      label: "Goal Amount (English)",
+      placeHolder: " ",
+      name: "goalAmount",
+      type: "Number",
+
+      section: " ",
+      width: "49%",
+    },
+    {
+      label: "Minimum Investment Amount (English)",
+      placeHolder: " ",
+      name: "minInvestment",
+      type: "number",
+
+      section: " ",
+      width: "32.3%",
+    },
+    {
+      label: "Maximum Investment Amount (English)",
+      placeHolder: " ",
+      name: "maxInvestment",
+      type: "number",
+
+      section: " ",
+      width: "32.3%",
+    },
+    {
+      label: "Holding Period (English)",
+      placeHolder: " ",
+      name: "holdingPeriod",
+      type: "number",
+
+      section: " ",
+      width: "32.3%",
+    },
+    {
+      label: "Expected Return Estimated (English)",
+      placeHolder: " ",
+      name: "expectedReturn",
+      type: "number",
+
+      section: " ",
+      width: "32.3%",
+    },
+    {
+      label: "Closing Date (English)",
+      placeHolder: " ",
+      name: "closingDate",
+      type: "date",
+
+      section: " ",
+      width: "32.3%",
+    },
+    {
+      label: "IO status",
+      placeHolder: " ",
+      name: "ioStatus",
+      type: "select",
+
+      section: " ",
+      width: "32.3%",
+      options: [
+        {
+          label: "option 1",
+          value: "option 1",
+        },
+        {
+          label: "option 2",
+          value: "option 2",
+        },
+        {
+          label: "option 3",
+          value: "option 3",
+        },
+        {
+          label: "option 4",
+          value: "option 4",
+        },
+      ],
+    },
+  ];
+
+  const onSubmit = (data) => {
+    console.log(data);
+    // Handle form submission
+    onClose();
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent maxW={"1280px"}>
+        <ModalHeader>Update IO Status</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody paddingBottom={"20px"}>
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <Box display={"flex"} flexWrap={"wrap"} gap={2}>
+              {formFields.map((field, index) => (
+                <FormField
+                  key={index}
+                  field={field}
+                  register={register}
+                  errors={errors}
+                />
+              ))}
+            </Box>
+            <Box display={"flex"} justifyContent={"end"} mt={4}>
+              <Button
+                bg={"hsla(139, 100%, 14%, 1)"}
+                mr={3}
+                type="submit"
+                color={"#fff"}
+                _hover={{
+                  bg: "hsl(139deg 98.99% 26.59%)",
+                }}
+              >
+                Save
+              </Button>
+              <Button onClick={onClose}>Close</Button>
+            </Box>
+          </form>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default EditIO;
diff --git a/src/Pages/IO_Management/EditIO/EditIOForm.jsx b/src/Pages/IO_Management/EditIO/EditIOForm.jsx
new file mode 100644
index 0000000..1ec9669
--- /dev/null
+++ b/src/Pages/IO_Management/EditIO/EditIOForm.jsx
@@ -0,0 +1,65 @@
+import React from "react";
+import {
+  Box,
+  Input,
+  Select,
+  Textarea,
+  FormControl,
+  FormLabel,
+  FormErrorMessage,
+} from "@chakra-ui/react";
+
+const FormField = ({ field, register, errors }) => {
+  const { label, name, type, placeHolder, options, width } = field;
+
+  return (
+    <Box width={width}>
+      <FormControl isInvalid={errors[name]}>
+        <FormLabel>{label}</FormLabel>
+        {type === "text" && (
+          <Input
+            placeholder={placeHolder}
+            {...register(name, { required: true })}
+          />
+        )}
+        {type === "textarea" && (
+          <Textarea
+            placeholder={placeHolder}
+            {...register(name, { required: true })}
+          />
+        )}
+        {type === "number" && (
+          <Input
+            type="number"
+            placeholder={placeHolder}
+            {...register(name, { required: true })}
+          />
+        )}
+        {type === "date" && (
+          <Input
+            type="date"
+            placeholder={placeHolder}
+            {...register(name, { required: true })}
+          />
+        )}
+        {type === "select" && (
+          <Select
+            placeholder={placeHolder}
+            {...register(name, { required: true })}
+          >
+            {options.map((option, index) => (
+              <option key={index} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </Select>
+        )}
+        <FormErrorMessage>
+          {errors[name] && `${label} is required`}
+        </FormErrorMessage>
+      </FormControl>
+    </Box>
+  );
+};
+
+export default FormField;
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/AmountInvested.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/AmountInvested.jsx
new file mode 100644
index 0000000..1ec6bfa
--- /dev/null
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/AmountInvested.jsx
@@ -0,0 +1,32 @@
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+} from "@chakra-ui/react";
+
+const AmountInvested = ({ isOpen, onClose }) => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Investment</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <p>Amount Invested details go here...</p>
+        </ModalBody>
+        <ModalFooter>
+          <Button colorScheme="blue" mr={3} onClick={onClose}>
+            Close
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default AmountInvested;
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionInvestor.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionInvestor.jsx
new file mode 100644
index 0000000..badc2dc
--- /dev/null
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionInvestor.jsx
@@ -0,0 +1,68 @@
+import {
+  Box,
+  Button,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Textarea,
+} from "@chakra-ui/react";
+
+const DistributionInvestor = ({ isOpen, onClose }) => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Distribution To investors</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <Box mb={"15px"}>
+            <Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
+              Date
+            </Text>
+            <Input
+              placeholder="Select Date"
+              size="md"
+              type="date"
+              fontSize={"sm"}
+            />
+          </Box>
+
+          <Box mb={"15px"} fontSize={"sm"} fontWeight={"bold"}>
+            <Text as={"label"}>Amount</Text>
+            <Input placeholder="Enter amount" fontSize={"sm"} />
+          </Box>
+
+          <Box mb={"15px"}>
+            <Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
+              Comments
+            </Text>
+            <Textarea placeholder="Write Comments" fontSize={"sm"} />
+          </Box>
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            bg={"hsla(139, 100%, 14%, 1)"}
+            mr={3}
+            color={"#fff"}
+            _hover={{
+              bg: "hsl(139deg 98.99% 26.59%)",
+            }}
+          >
+            Save
+          </Button>
+          <Button mr={3} onClick={onClose}>
+            Close
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default DistributionInvestor;
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionSponsor.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionSponsor.jsx
new file mode 100644
index 0000000..48e6b2b
--- /dev/null
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionSponsor.jsx
@@ -0,0 +1,68 @@
+import {
+  Box,
+  Button,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Textarea,
+} from "@chakra-ui/react";
+
+const DistributionSponsor = ({ isOpen, onClose }) => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Distribution from Sponsors</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <Box mb={"15px"}>
+            <Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
+              Date
+            </Text>
+            <Input
+              placeholder="Select Date"
+              size="md"
+              type="date"
+              fontSize={"sm"}
+            />
+          </Box>
+
+          <Box mb={"15px"} fontSize={"sm"} fontWeight={"bold"}>
+            <Text as={"label"}>Amount</Text>
+            <Input placeholder="Enter amount" fontSize={"sm"} />
+          </Box>
+
+          <Box mb={"15px"}>
+            <Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
+              Comments
+            </Text>
+            <Textarea placeholder="Write Comments" fontSize={"sm"} />
+          </Box>
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            bg={"hsla(139, 100%, 14%, 1)"}
+            mr={3}
+            color={"#fff"}
+            _hover={{
+              bg: "hsl(139deg 98.99% 26.59%)",
+            }}
+          >
+            Save
+          </Button>
+          <Button mr={3} onClick={onClose}>
+            Close
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default DistributionSponsor;
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/FeesExpenses.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/FeesExpenses.jsx
new file mode 100644
index 0000000..c904b6b
--- /dev/null
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/FeesExpenses.jsx
@@ -0,0 +1,69 @@
+import {
+  Box,
+  Button,
+  Input,
+  InputGroup,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Textarea,
+} from "@chakra-ui/react";
+
+const FeesExpenses = ({ isOpen, onClose }) => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Fees & Expenses</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <Box mb={"15px"}>
+            <Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
+              Date
+            </Text>
+            <Input
+              placeholder="Select Date"
+              size="md"
+              type="date"
+              fontSize={"sm"}
+            />
+          </Box>
+
+          <Box mb={"15px"} fontSize={"sm"} fontWeight={"bold"}>
+            <Text as={"label"}>Amount</Text>
+            <Input placeholder="Enter amount" fontSize={"sm"} />
+          </Box>
+
+          <Box mb={"15px"}>
+            <Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
+              Comments
+            </Text>
+            <Textarea placeholder="Write Comments" fontSize={"sm"} />
+          </Box>
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            bg={"hsla(139, 100%, 14%, 1)"}
+            mr={3}
+            color={"#fff"}
+            _hover={{
+              bg: "hsl(139deg 98.99% 26.59%)",
+            }}
+          >
+            Save
+          </Button>
+          <Button  mr={3} onClick={onClose}>
+            Close
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default FeesExpenses;
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIONav.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIONav.jsx
new file mode 100644
index 0000000..ac77924
--- /dev/null
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIONav.jsx
@@ -0,0 +1,68 @@
+import {
+  Box,
+  Button,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Textarea,
+} from "@chakra-ui/react";
+
+const UpdateIONav = ({ isOpen, onClose }) => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Update iO NAV</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <Box mb={"15px"}>
+            <Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
+              Date
+            </Text>
+            <Input
+              placeholder="Select Date"
+              size="md"
+              type="date"
+              fontSize={"sm"}
+            />
+          </Box>
+
+          <Box mb={"15px"} fontSize={"sm"} fontWeight={"bold"}>
+            <Text as={"label"}>Amount</Text>
+            <Input placeholder="Enter amount" fontSize={"sm"} />
+          </Box>
+
+          <Box mb={"15px"}>
+            <Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
+              Comments
+            </Text>
+            <Textarea placeholder="Write Comments" fontSize={"sm"} />
+          </Box>
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            bg={"hsla(139, 100%, 14%, 1)"}
+            mr={3}
+            color={"#fff"}
+            _hover={{
+              bg: "hsl(139deg 98.99% 26.59%)",
+            }}
+          >
+            Save
+          </Button>
+          <Button mr={3} onClick={onClose}>
+            Close
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default UpdateIONav;
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx
new file mode 100644
index 0000000..1db6ecb
--- /dev/null
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx
@@ -0,0 +1,68 @@
+import {
+  Box,
+  Button,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Textarea,
+} from "@chakra-ui/react";
+
+const UpdateIOStatus = ({ isOpen, onClose }) => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Update IO Status</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <Box mb={"15px"}>
+            <Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
+              Date
+            </Text>
+            <Input
+              placeholder="Select Date"
+              size="md"
+              type="date"
+              fontSize={"sm"}
+            />
+          </Box>
+
+          <Box mb={"15px"} fontSize={"sm"} fontWeight={"bold"}>
+            <Text as={"label"}>Amount</Text>
+            <Input placeholder="Enter amount" fontSize={"sm"} />
+          </Box>
+
+          <Box mb={"15px"}>
+            <Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
+              Comments
+            </Text>
+            <Textarea placeholder="Write Comments" fontSize={"sm"} />
+          </Box>
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            bg={"hsla(139, 100%, 14%, 1)"}
+            mr={3}
+            color={"#fff"}
+            _hover={{
+              bg: "hsl(139deg 98.99% 26.59%)",
+            }}
+          >
+            Save
+          </Button>
+          <Button mr={3} onClick={onClose}>
+            Close
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default UpdateIOStatus;
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
index a9fe68e..3e8db8d 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
@@ -8,6 +8,7 @@ import {
   TabPanels,
   Tabs,
   Text,
+  useDisclosure,
 } from "@chakra-ui/react";
 import { useNavigate, useParams } from "react-router-dom";
 import GlobalStateContext from "../../../Contexts/GlobalStateContext";
@@ -26,9 +27,10 @@ import ViewInvestors from "./ViewInvestors";
 import ViewIOcash from "./ViewIOcash";
 import ViewIOnav from "./ViewIOnav";
 import ViewDistribution from "./ViewDistribution";
+import EditIO from "../EditIO/EditIO";
 
 const ViewIOdata = () => {
-  const [isEditing, setIsEditing] = useState(false);
+  const { isOpen, onOpen, onClose } = useDisclosure();
   const navigate = useNavigate();
 
   const tabs = [
@@ -70,7 +72,19 @@ const ViewIOdata = () => {
             </Tab>
           ))}
         </TabList>
-
+        <Box p={3} width={"100%"} textAlign={"right"}>
+          <Button
+            bg={"hsla(139, 100%, 14%, 1)"}
+            color={"#fff"}
+            _hover={{
+              bg: "hsl(139deg 98.99% 26.59%)",
+            }}
+            onClick={onOpen}
+          >
+            Edit
+          </Button>
+          <EditIO isOpen={isOpen} onClose={onClose} />
+        </Box>
         <TabPanels>
           {tabs.map(({ content }, index) => (
             <TabPanel key={index}>{content}</TabPanel>
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
index c476aaf..defae50 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
@@ -1,14 +1,82 @@
-import { Box, Image, Text } from "@chakra-ui/react";
+import {
+  Box,
+  Button,
+  Divider,
+  Image,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Portal,
+  Text,
+  useDisclosure,
+} from "@chakra-ui/react";
 import header from "../../../assets/IOheader.png";
+import { HiDotsVertical } from "react-icons/hi";
+import { Link } from "react-router-dom";
+import AmountInvested from "./HeaderModal/AmountInvested";
+import FeesExpenses from "./HeaderModal/FeesExpenses";
+import DistributionSponsor from "./HeaderModal/DistributionSponsor";
+import DistributionInvestor from "./HeaderModal/DistributionInvestor";
+import UpdateIONav from "./HeaderModal/UpdateIONav";
+import UpdateIOStatus from "./HeaderModal/UpdateIOStatus";
 
 const ViewIOdataHeader = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  const {
+    isOpen: isInvestmentOpen,
+    onOpen: onInvestmentOpen,
+    onClose: onInvestmentClose,
+  } = useDisclosure();
+  const {
+    isOpen: isFeesOpen,
+    onOpen: onFeesOpen,
+    onClose: onFeesClose,
+  } = useDisclosure();
+  const {
+    isOpen: isDistSponsorOpen,
+    onOpen: onDistSponsorOpen,
+    onClose: onDistSponsorClose,
+  } = useDisclosure();
+  const {
+    isOpen: isDistInvestorOpen,
+    onOpen: onDistInvestorOpen,
+    onClose: onDistInvestorClose,
+  } = useDisclosure();
+  const {
+    isOpen: isUpdateNavOpen,
+    onOpen: onUpdateNavOpen,
+    onClose: onUpdateNavClose,
+  } = useDisclosure();
+  const {
+    isOpen: isUpdateStatusOpen,
+    onOpen: onUpdateStatusOpen,
+    onClose: onUpdateStatusClose,
+  } = useDisclosure();
+
+  const bg = {
+    bg: "#fff",
+  };
+
+  const hover = {
+    textDecoration: "underline",
+    background: "#fff",
+  };
   return (
     <Box
       display={"flex"}
       alignItems={"center"}
       justifyContent={"space-between"}
       bg={"#caf5d8"}
-      paddingRight={"25px"}
+      paddingRight={"10px"}
       borderRadius={"10px"}
     >
       <Box>
@@ -34,6 +102,95 @@ const ViewIOdataHeader = () => {
         <Text>IO NAV</Text>
         <Text fontWeight={"500"}>$1,140,500</Text>
       </Box>
+
+      <Box display={"flex"} alignItems={"start"} height={"95px"}>
+        <Menu>
+          <MenuButton
+            className="link p-1 rounded-1"
+            bg={"#fff"}
+            _hover={{ backgroundColor: "#fff !important" }}
+            onClick={onOpen}
+          >
+            <HiDotsVertical className="rubix-text-dark fs-6" />
+          </MenuButton>
+          {/* <Portal>
+            <MenuList minWidth="80px">
+              <MenuItem className="web-text-medium">Delete</MenuItem>
+            </MenuList>
+          </Portal> */}
+        </Menu>
+
+        {/* Modal */}
+        <Modal isOpen={isOpen} onClose={onClose}>
+          <ModalOverlay />
+          <ModalContent>
+            <ModalHeader>Transaction</ModalHeader>
+            <ModalCloseButton />
+            <ModalBody paddingInline={"10px"}>
+              <Box
+                display={"grid"}
+                alignContent={"left"}
+                justifyItems={"start"}
+              >
+                <Button onClick={onInvestmentOpen} bg={bg} _hover={hover}>
+                  Amount Invested
+                </Button>
+                <Divider />
+                <Button onClick={onFeesOpen} bg={bg} _hover={hover}>
+                  Fees & Expenses
+                </Button>
+                <Divider />
+                <Button onClick={onDistSponsorOpen} bg={bg} _hover={hover}>
+                  Distribution from Sponsors
+                </Button>
+                <Divider />
+                <Button onClick={onDistInvestorOpen} bg={bg} _hover={hover}>
+                  Distribution To Investors
+                </Button>
+                <Divider />
+                <Button onClick={onUpdateNavOpen} bg={bg} _hover={hover}>
+                  Update IO NAV
+                </Button>
+                <Divider />
+                <Button onClick={onUpdateStatusOpen} bg={bg} _hover={hover}>
+                  Update IO Status
+                </Button>
+                <Divider />
+                <Button
+                  variant="ghost"
+                  mr={3}
+                  onClick={onClose}
+                  bg={bg}
+                  _hover={hover}
+                >
+                  Exit
+                </Button>
+                <Divider />
+                {/* <Button variant="ghost" onClick={onClose} bg={bg}>
+                  Cancel
+                </Button> */}
+              </Box>
+            </ModalBody>
+          </ModalContent>
+        </Modal>
+
+        {/* Modals */}
+        <AmountInvested isOpen={isInvestmentOpen} onClose={onInvestmentClose} />
+        <FeesExpenses isOpen={isFeesOpen} onClose={onFeesClose} />
+        <DistributionSponsor
+          isOpen={isDistSponsorOpen}
+          onClose={onDistSponsorClose}
+        />
+        <DistributionInvestor
+          isOpen={isDistInvestorOpen}
+          onClose={onDistInvestorClose}
+        />
+        <UpdateIONav isOpen={isUpdateNavOpen} onClose={onUpdateNavClose} />
+        <UpdateIOStatus
+          isOpen={isUpdateStatusOpen}
+          onClose={onUpdateStatusClose}
+        />
+      </Box>
     </Box>
   );
 };

From 7deb66f26b6d11a5a3fa01a67816ad95b3ee2c02 Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Mon, 8 Jul 2024 20:39:43 +0530
Subject: [PATCH 3/7] invest add

---
 package-lock.json                             | 114 ++++++-
 src/Contexts/GlobalStateProvider.jsx          |  81 ++---
 .../IO_Management/CreateIO/IOCashDetails.jsx  | 297 +++++++++++++++++-
 .../CreateIO/InvestmentDocument.jsx           | 255 +++++++++------
 .../IO_Management/CreateIO/Investors.jsx      |  11 +-
 .../IO_Management/CreateIO/KeyMerits.jsx      |   1 +
 .../IO_Management/InvestmentDocuments.jsx     | 231 +++++++++-----
 src/Pages/Master/Sponser/AddSponser.jsx       |   2 +-
 src/Pages/Master/Sponser/Sponsers.jsx         |  11 +-
 9 files changed, 753 insertions(+), 250 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4b3e017..a7dc44f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "framer-motion": "^11.1.5",
         "js-cookie": "^3.0.5",
         "react": "^18.2.0",
+        "react-beautiful-dnd": "^13.1.1",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.51.3",
         "react-icons": "^5.1.0",
@@ -27,7 +28,7 @@
         "react-router-dom": "^6.22.3",
         "redux-persist": "^6.0.0",
         "redux-persist-transform-encrypt": "^5.1.1",
-        "uuid": "^9.0.1",
+        "uuid": "^10.0.0",
         "xlsx": "^0.18.5",
         "yup": "^1.4.0"
       },
@@ -2464,6 +2465,15 @@
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "dev": true
     },
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz",
+      "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==",
+      "dependencies": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "node_modules/@types/lodash": {
       "version": "4.17.0",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.0.tgz",
@@ -2485,8 +2495,7 @@
     "node_modules/@types/prop-types": {
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
-      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
-      "devOptional": true
+      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
     },
     "node_modules/@types/quill": {
       "version": "1.3.10",
@@ -2500,7 +2509,6 @@
       "version": "18.2.79",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.79.tgz",
       "integrity": "sha512-RwGAGXPl9kSXwdNTafkOEuFrTBD5SA2B3iEB96xi8+xu5ddUa/cpvyVCSNn+asgLCTHkb5ZxN8gbuibYJi4s1w==",
-      "devOptional": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -2515,6 +2523,25 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-redux": {
+      "version": "7.1.33",
+      "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.33.tgz",
+      "integrity": "sha512-NF8m5AjWCkert+fosDsN3hAlHzpjSiXlVy9EgQEmLoBhaNXbmyeGs/aj5dQzKuF+/q+S7JQagorGDW8pJ28Hmg==",
+      "dependencies": {
+        "@types/hoist-non-react-statics": "^3.3.0",
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0",
+        "redux": "^4.0.0"
+      }
+    },
+    "node_modules/@types/react-redux/node_modules/redux": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+      "dependencies": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
     "node_modules/@types/use-sync-external-store": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
@@ -4626,6 +4653,11 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -5042,6 +5074,11 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/raf-schd": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz",
+      "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ=="
+    },
     "node_modules/react": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@@ -5053,6 +5090,61 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-beautiful-dnd": {
+      "version": "13.1.1",
+      "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz",
+      "integrity": "sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.9.2",
+        "css-box-model": "^1.2.0",
+        "memoize-one": "^5.1.1",
+        "raf-schd": "^4.0.2",
+        "react-redux": "^7.2.0",
+        "redux": "^4.0.4",
+        "use-memo-one": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.5 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.5 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-beautiful-dnd/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+    },
+    "node_modules/react-beautiful-dnd/node_modules/react-redux": {
+      "version": "7.2.9",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz",
+      "integrity": "sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.15.4",
+        "@types/react-redux": "^7.1.20",
+        "hoist-non-react-statics": "^3.3.2",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-is": "^17.0.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.3 || ^17 || ^18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-beautiful-dnd/node_modules/redux": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+      "dependencies": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
     "node_modules/react-clientside-effect": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz",
@@ -5913,6 +6005,14 @@
         }
       }
     },
+    "node_modules/use-memo-one": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.3.tgz",
+      "integrity": "sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/use-sidecar": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
@@ -5943,9 +6043,9 @@
       }
     },
     "node_modules/uuid": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
-      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
       "funding": [
         "https://github.com/sponsors/broofa",
         "https://github.com/sponsors/ctavan"
diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx
index c260bf5..79090a1 100644
--- a/src/Contexts/GlobalStateProvider.jsx
+++ b/src/Contexts/GlobalStateProvider.jsx
@@ -411,58 +411,65 @@ const GlobalStateProvider = ({ children }) => {
       totalReturnOnInvestment: "73.0%",
     },
   ]);
-  
-  const [create, setCreate] = useState([
+
+  const [caseDetails, setCaseDetails] = useState([
     {
       id: 1,
-      Type: "PDF",
-      fileName: "Investment Private Company",
-      document: "Investment.pdf",
-      status: true,
+      date: "02-Jan-24",
+      particulars: "Cash Reserve- Initated",
+      amount: "50,000.00",
+      comments: " ",
+      updateBy: "Faisal",
+      updateOn: "02-Jan-24",
     },
     {
       id: 2,
-      Type: "PDF",
-      fileName: "Investment Private",
-      document: "Investment.pdf",
-      status: true,
+      date: "12-Feb-24",
+      particulars: "Fees & Expense",
+      amount: "22,000.00",
+      comments: "Fees = $20,000 Expense = $2,000 ",
+      updateBy: "Faisal",
+      updateOn: "13-Feb-24",
     },
     {
       id: 3,
-      Type: "PDF",
-      fileName: "Investment Private",
-      document: "Investment.pdf",
-      status: true,
+      date: "23-Mar-24",
+      particulars: "Distribution Received From Sponsor",
+      amount: "50,000.00",
+      comments: " ",
+      updateBy: "Nawab",
+      updateOn: "24-Mar-24",
     },
     {
       id: 4,
-      Type: "PDF",
-      fileName: "Investment Private",
-      document: "Investment.pdf",
-      status: true,
+      date: "28-Mar-24",
+      particulars: "Distribution Paid To Investors",
+      amount: "40,000.00",
+      comments: " ",
+      updateBy: "Faisal",
+      updateOn: "28-Mar-24",
     },
     {
       id: 5,
-      Type: "PDF",
-      fileName: "Investment Private",
-      document: "Investment.pdf",
-      status: true,
+      date: "26-Jun-24",
+      particulars: "Distribution Received From Sponsor",
+      amount: "70,000.00",
+      comments: " ",
+      updateBy: "Faisal",
+      updateOn: "27-Jun-24",
     },
     {
       id: 6,
-      Type: "PDF",
-      fileName: "Investment Private",
-      document: "Investment.pdf",
-      status: true,
-    },
-    {
-      id: 7,
-      Type: "PDF",
-      fileName: "Investment Private",
-      document: "Investment.pdf",
-      status: true,
+      date: "02-Jan-24",
+      particulars: "Distribution Paid To Investors",
+      amount: "60,000.00",
+      comments: " ",
+      updateBy: "Nawab",
+      updateOn: "28-Jun-24",
     },
   ]);
+  
+  
   const [keyMerits, setKeyMerits] = useState([
     {
       id: 1,
@@ -1500,14 +1507,16 @@ const GlobalStateProvider = ({ children }) => {
         setDeleteRequest,
         viewIO,
         setViewIO,
-        create,
-        setCreate,
+        // create,
+        // setCreate,
         keyMerits,
         setKeyMerits,
         iOArtifacts,
         setIOArtifacts,
         investors, 
-        setInvestors
+        setInvestors,
+        caseDetails,
+        setCaseDetails,
       }}
     >
       {children}
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails.jsx
index 5420978..2beb2fe 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails.jsx
@@ -1,9 +1,294 @@
-import React from 'react'
+import {
+  Box,
+  Button,
+  HStack,
+  Input,
+  Table,
+  Tag,
+  Tbody,
+  Text,
+  Th,
+  Tr,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useState } from "react";
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
+import DataTable from "../../../Components/DataTable/DataTable";
+import Pagination from "../../../Components/Pagination";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import CustomAlertDialog from "../../../Components/CustomAlertDialog";
+import ToastBox from "../../../Components/ToastBox";
+import { debounce } from "../../Master/Sponser/AddSponser";
+
+const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
 
 const IOCashDetails = () => {
-  return (
-    <div>IOCashDetails</div>
-  )
-}
+  const toast = useToast();
+  const { caseDetails, setCaseDetails, slideFromRight } =
+    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("");
 
-export default IOCashDetails
\ No newline at end of file
+  useEffect(() => {
+    // Simulate loading
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 1500);
+
+    // Cleanup the timer on component unmount
+    return () => clearTimeout(timer);
+  }, []);
+
+  // Calculate totals
+  const totalAmount = caseDetails.reduce(
+    (acc, caseDetail) => acc + caseDetail.amount,
+    0
+  );
+
+  // Table setup
+  const tableHeadRow = [
+    "Date",
+    "Particulars",
+    "Amount",
+    "Comments",
+    "Update by ",
+    "Update On",
+  ];
+
+  const handleUpdateStatus = debounce((id) => {
+    setCaseDetails((prevSponser) =>
+      prevSponser.map((sponsor) =>
+        sponsor.id === id ? { ...sponsor, status: !sponsor.status } : sponsor
+      )
+    );
+    toast({
+      render: () => <ToastBox message={"Status changed succesfully.!"} />,
+    });
+  }, 300);
+
+  // Table filter
+  const filteredData = caseDetails.filter((item) => {
+    const name = item.date;
+    const searchLower = searchTerm.toLowerCase();
+    const nameMatches = name.toLowerCase().includes(searchLower);
+    return nameMatches;
+  });
+
+
+  const [ extractedArray, setExtractedArray ] = useState(filteredData?.map((item, index) => ({
+    id: item?.id,
+    "Date": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "center"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item.date}
+      </Text>
+    ),
+    "Particulars": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "center"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item.particulars}
+      </Text>
+    ),
+    "Amount": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "center"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+       {item.amount}
+      </Text>
+    ),
+    "Comments": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "center"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item.comments}
+      </Text>
+    ),
+    "Update by ": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "center"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item.updateBy}
+      </Text>
+    ),
+    "Update On": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "center"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item.updateOn}
+      </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="80px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              Total
+            </Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="210px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              {" "}
+            </Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="80px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              {/* {totalAmount} */}
+              {"5000"}
+            </Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="160px"
+              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"}>
+            <Pagination totalItems={10} />
+          </HStack>
+        </HStack>
+      </Box>
+
+      <DataTable
+        centered={true}
+        emptyMessage={`We don't have any Sponers`}
+        tableHeadRow={tableHeadRow}
+        data={extractedArray} 
+        setData={setExtractedArray}
+        isLoading={isLoading}
+        viewActionId={actionId}
+        setViewActionId={setActionId}
+        caption={<Total />}
+        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 IOCashDetails;
diff --git a/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx b/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx
index 9101030..47d3561 100644
--- a/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx
+++ b/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx
@@ -1,44 +1,104 @@
-import { Box, Button, HStack, Input, Text, Tooltip, useDisclosure, VStack } from "@chakra-ui/react";
+import {
+  Box,
+  Button,
+  HStack,
+  Input,
+  Text,
+  Tooltip,
+  useDisclosure,
+  VStack,
+  useToast,
+} from "@chakra-ui/react";
 import React, { useContext, useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
 import InvestmentDocuments from "../InvestmentDocuments";
 import DataTable from "../../../Components/DataTable/DataTable";
 import CustomAlertDialog from "../../../Components/CustomAlertDialog";
 import GlobalStateContext from "../../../Contexts/GlobalStateContext";
 import { debounce } from "../../Master/Sponser/AddSponser";
-import { formatDate } from "../../../Components/Functions/UTCConvertor";
-import { AddIcon, DeleteIcon, DownloadIcon, EditIcon, ViewIcon } from "@chakra-ui/icons";
+import {
+  AddIcon,
+  DeleteIcon,
+  DownloadIcon,
+  EditIcon,
+  ViewIcon,
+} from "@chakra-ui/icons";
 
 const InvestmentDocument = ({ control, errors, enableNextTab, index }) => {
-    const { create, setCreate, sponser, setSponser,slideFromRight} =
-      useContext(GlobalStateContext);
-      const firstField = useRef();
-    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, onOpen, onClose } = useDisclosure();
+  const { slideFromRight } =
+    useContext(GlobalStateContext);
+  const firstField = useRef();
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isLoading, setIsLoading] = useState(true);
+  const [deleteAlert, setDeleteAlert] = useState(false);
+  const [actionId, setActionId] = useState(null);
+  const [mouseEntered, setMouseEntered] = useState(false);
+  const [mouseEnteredId, setMouseEnteredId] = useState("");
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const navigate = useNavigate();
+  const toast = useToast();
 
-    useEffect(() => {
-        // Simulate loading
-        const timer = setTimeout(() => {
-          setIsLoading(false);
-        }, 1500);
-    
-        // Cleanup the timer on component unmount
-        return () => clearTimeout(timer);
-      }, []);
+  const [create, setCreate] = useState([
+    {
+      id: 1,
+      Type: "PDF",
+      fileName: "Investment Private Company",
+      document: "Investment.pdf",
+      status: true,
+    },
+    {
+      id: 2,
+      Type: "PDF",
+      fileName: "Investment Private",
+      document: "Investment.pdf",
+      status: true,
+    },
+    {
+      id: 3,
+      Type: "PDF",
+      fileName: "Investment Private",
+      document: "Investment.pdf",
+      status: true,
+    },
+    {
+      id: 4,
+      Type: "PDF",
+      fileName: "Investment Private",
+      document: "Investment.pdf",
+      status: true,
+    },
+    {
+      id: 5,
+      Type: "PDF",
+      fileName: "Investment Private",
+      document: "Investment.pdf",
+      status: true,
+    },
+    {
+      id: 6,
+      Type: "PDF",
+      fileName: "Investment Private",
+      document: "Investment.pdf",
+      status: true,
+    },
+    {
+      id: 7,
+      Type: "PDF",
+      fileName: "Investment Private",
+      document: "Investment.pdf",
+      status: true,
+    },
+  ]);
 
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 1500);
 
-    
-  const tableHeadRow = [
-    "Sr.no",
-    "Type",
-    "File Name",
-    "Document",
-    "Action",
-  ];
+    return () => clearTimeout(timer);
+  }, []);
+
+  const tableHeadRow = ["Sr.no", "Type", "File Name", "Document", "Action"];
 
   const handleUpdateStatus = debounce((id) => {
     setCreate((prevCreate) =>
@@ -47,148 +107,140 @@ const InvestmentDocument = ({ control, errors, enableNextTab, index }) => {
       )
     );
     toast({
-      render: () => <ToastBox message={"Status changed succesfully.!"} />,
+      render: () => (
+        <Box color="white" p={3} bg="green.500">
+          Status changed successfully!
+        </Box>
+      ),
     });
   }, 300);
 
-  const filteredData = create?.filter((item) => {
-    // Filter by name (case insensitive)
-    const name = item.Type;
-    const searchLower = searchTerm.toLowerCase();
-    const nameMatches = name.toLowerCase().includes(searchLower);
-
-    return nameMatches;
-  });
+  const filteredData = create.filter((item) =>
+    item?.fileName?.toLowerCase().includes(searchTerm.toLowerCase())
+  );
 
   const handleDelete = () => {
     const updatedCreate = create.filter((create) => create.id !== actionId);
-
     setTimeout(() => {
-      setSponser(updatedCreate);
+      setCreate(updatedCreate);
       setDeleteAlert(false);
       setIsLoading(false);
     }, 100);
     setIsLoading(true);
   };
 
-  const extractedArray = filteredData?.map((item, index) => ({
+  const extractedArray = filteredData.map((item, index) => ({
     "Sr.no": (
       <Text
         justifyContent={slideFromRight ? "right" : "left"}
-        as={"span"}
-        color={"teal.900"}
-        fontWeight={"500"}
+        as="span"
+        color="teal.900"
+        fontWeight="500"
         className="d-flex align-items-center web-text-small"
       >
         {index + 1}
       </Text>
     ),
-    "Type": (
+    Type: (
       <Text
         justifyContent={slideFromRight ? "right" : "left"}
-        as={"span"}
-        color={"teal.900"}
-        fontWeight={"500"}
+        as="span"
+        color="teal.900"
+        fontWeight="500"
         className="d-flex align-items-center web-text-small"
       >
         {item.Type}
       </Text>
     ),
     "File Name": (
-      <Box w={"200px"} isTruncated={true}>
-        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+      <Box w="200px" isTruncated>
+        <Text as="span" color="teal.900" fontWeight="500">
           {item.fileName}
         </Text>
       </Box>
     ),
-    "Document": (
+    Document: (
       <Text
         justifyContent={slideFromRight ? "right" : "left"}
-        as={"span"}
-        color={"teal.900"}
-        fontWeight={"500"}
+        as="span"
+        color="teal.900"
+        fontWeight="500"
         className="d-flex align-items-center web-text-small"
       >
         {item.document}
       </Text>
     ),
     Action: (
-      <Box display={"flex"} justifyContent={"space-evenly"}>
+      <Box display="flex" justifyContent="space-evenly">
         <Tooltip
-          rounded={"sm"}
-          fontSize={"xs"}
+          rounded="sm"
+          fontSize="xs"
           label="View"
           bg="#fff"
-          color={"green.500"}
+          color="green.500"
           placement="top"
         >
           <Button
             _hover={{ color: "green.500" }}
-            // transition={"0.5s all"}
-            onClick={() => {
-              navigate(`view-investment/${item.id}`);
-            }}
+            onClick={() => navigate(`view-investment/${item.id}`)}
             color="green.300"
-            rounded={"sm"}
-            size={"xs"}
+            rounded="sm"
+            size="xs"
           >
             <ViewIcon />
           </Button>
         </Tooltip>
         <Tooltip
-          rounded={"sm"}
-          fontSize={"xs"}
+          rounded="sm"
+          fontSize="xs"
           label="Edit"
           bg="#fff"
-          color={"blue.500"}
+          color="blue.500"
           placement="top"
         >
           <Button
             _hover={{ color: "blue.500" }}
-            // transition={"0.5s all"}
             color="blue.400"
-            rounded={"sm"}
-            size={"xs"}
+            rounded="sm"
+            size="xs"
           >
             <EditIcon />
           </Button>
         </Tooltip>
         <Tooltip
-          rounded={"sm"}
-          fontSize={"xs"}
-          label="Edit"
+          rounded="sm"
+          fontSize="xs"
+          label="Download"
           bg="#fff"
-          color={"blue.500"}
+          color="blue.500"
           placement="top"
         >
           <Button
             _hover={{ color: "blue.500" }}
-            // transition={"0.5s all"}
             color="blue.400"
-            rounded={"sm"}
-            size={"xs"}
+            rounded="sm"
+            size="xs"
           >
             <DownloadIcon />
           </Button>
         </Tooltip>
         <Tooltip
-          rounded={"sm"}
-          fontSize={"xs"}
+          rounded="sm"
+          fontSize="xs"
           label="Delete"
           bg="#fff"
-          color={"red.500"}
+          color="red.500"
           placement="top"
         >
           <Button
             onClick={() => {
-              setActionId(item?.id);
+              setActionId(item.id);
               setDeleteAlert(true);
             }}
             _hover={{ color: "red.500" }}
-            // transition={"0.5s all"}
             color="red.300"
-            rounded={"sm"}
-            size={"xs"}
+            rounded="sm"
+            size="xs"
           >
             <DeleteIcon />
           </Button>
@@ -197,10 +249,9 @@ const InvestmentDocument = ({ control, errors, enableNextTab, index }) => {
     ),
   }));
 
-
   return (
     <Box>
-      <Box display={"flex"} justifyContent={"space-between"} mb={4}>
+      <Box display="flex" justifyContent="space-between" mb={4}>
         <Input
           type="search"
           width={300}
@@ -214,41 +265,47 @@ const InvestmentDocument = ({ control, errors, enableNextTab, index }) => {
         <Button
           leftIcon={<AddIcon />}
           onClick={onOpen}
-          size={"sm"}
-          // width={"44.5%"}
-          fontSize={"xs"}
-          rounded={"sm"}
-
+          size="sm"
+          fontSize="xs"
+          rounded="sm"
           colorScheme="green"
         >
           Add
         </Button>
         <InvestmentDocuments
+        create={create}
+        setCreate={setCreate}
           isOpen={isOpen}
           onClose={onClose}
           firstField={firstField}
         />
       </Box>
       <DataTable
-        emptyMessage={`We don't have any Sponers `}
+        emptyMessage="We don't have any Sponsors"
         tableHeadRow={tableHeadRow}
         data={extractedArray}
         isLoading={isLoading}
         viewActionId={actionId}
         setViewActionId={setActionId}
-        // totalPages={10}
-
         setMouseEnteredId={setMouseEnteredId}
         setMouseEntered={setMouseEntered}
       />
-      <HStack  justifyContent={'flex-end'}>
-        <Button ps={8} pe={8} colorScheme="green" size={'sm'} rounded={'sm'} onClick={()=> enableNextTab(index)}>Next</Button>
-
+      <HStack justifyContent="flex-end">
+        <Button
+          ps={8}
+          pe={8}
+          colorScheme="green"
+          size="sm"
+          rounded="sm"
+          onClick={() => enableNextTab(index)}
+        >
+          Next
+        </Button>
       </HStack>
       <CustomAlertDialog
         onClose={() => setDeleteAlert(false)}
         isOpen={deleteAlert}
-        message={"Are you sure you want to delete sponers?"}
+        message="Are you sure you want to delete the sponsor?"
         alertHandler={handleDelete}
         isLoading={isLoading}
       />
diff --git a/src/Pages/IO_Management/CreateIO/Investors.jsx b/src/Pages/IO_Management/CreateIO/Investors.jsx
index ebd3eb0..7d3d6ea 100644
--- a/src/Pages/IO_Management/CreateIO/Investors.jsx
+++ b/src/Pages/IO_Management/CreateIO/Investors.jsx
@@ -27,15 +27,6 @@ import { OPACITY_ON_LOAD } from "../../../Layout/animations";
 import DataTable from "../../../Components/DataTable/DataTable";
 import { HiDotsVertical } from "react-icons/hi";
 import { Link, Link as RouterLink } from "react-router-dom";
-import {
-  AddIcon,
-  CheckIcon,
-  CloseIcon,
-  DeleteIcon,
-  EditIcon,
-  EmailIcon,
-  ViewIcon,
-} from "@chakra-ui/icons";
 import Pagination from "../../../Components/Pagination";
 import GlobalStateContext from "../../../Contexts/GlobalStateContext";
 import CustomAlertDialog from "../../../Components/CustomAlertDialog";
@@ -396,7 +387,7 @@ const Investors = () => {
         centered={true}
         emptyMessage={`We don't have any Sponers `}
         tableHeadRow={tableHeadRow}
-        data={extractedArray}
+        data={extractedArray} 
         setData={setExtractedArray}
         isLoading={isLoading}
         viewActionId={actionId}
diff --git a/src/Pages/IO_Management/CreateIO/KeyMerits.jsx b/src/Pages/IO_Management/CreateIO/KeyMerits.jsx
index 329f00b..dbd7fd6 100644
--- a/src/Pages/IO_Management/CreateIO/KeyMerits.jsx
+++ b/src/Pages/IO_Management/CreateIO/KeyMerits.jsx
@@ -20,6 +20,7 @@ const KeyMerits = ({enableNextTab, index}) => {
     const [mouseEntered, setMouseEntered] = useState(false);
     const [mouseEnteredId, setMouseEnteredId] = useState("");
     const { isOpen, onOpen, onClose } = useDisclosure();
+    
 
     useEffect(() => {
         // Simulate loading
diff --git a/src/Pages/IO_Management/InvestmentDocuments.jsx b/src/Pages/IO_Management/InvestmentDocuments.jsx
index e95146b..decb18e 100644
--- a/src/Pages/IO_Management/InvestmentDocuments.jsx
+++ b/src/Pages/IO_Management/InvestmentDocuments.jsx
@@ -11,63 +11,110 @@ import {
   FormControl,
   FormLabel,
   Input,
-  InputGroup,
-  Stack,
+  Text,
 } from "@chakra-ui/react";
 import * as yup from "yup";
-import React, { useContext, useEffect, useRef, useState } from "react";
-import FormInputMain from "../../Components/FormInputMain";
+import React, { useContext, useState } from "react";
 import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import CustomAlertDialog from "../../Components/CustomAlertDialog";
+import { v4 as uuidv4 } from 'uuid';
+import { useNavigate } from 'react-router-dom';
+import { GrDocumentPdf } from "react-icons/gr";
+import { FaRegFileAlt } from "react-icons/fa";
+import { TbFileTypeDocx } from "react-icons/tb";
+import { AiOutlineFileGif } from "react-icons/ai";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import InvestmentDocument from "./CreateIO/InvestmentDocument";
 
-export const investmentDoct = yup.object().shape({
-  type: yup.string().required("Sponser name is required"),
-  document: yup.string().required("Sponser name is required"),
-  fileName: yup.string().required("Mobile no is required"),
+export const bytesToMB = (bytes) => {
+  if (bytes === 0) return "0 MB";
+  const bytesInMB = 1024 * 1024;
+  return (bytes / bytesInMB).toFixed(2) + " MB";
+};
+
+export const investmentDocSchema = yup.object().shape({
+  document: yup.mixed().required("Document is required"),
+  fileName: yup.string().required("File name is required"),
 });
 
-const InvestmentDocuments = ({ id, isOpen, onClose, firstField }) => {
-  const [file, setFile] = useState("");
-  const [fileName, setFileName] = useState("");
+const InvestmentDocuments = ({ id, isOpen, onClose, firstField, create, setCreate }) => {
+  const [file, setFile] = useState(null);
   const [alert, setAlert] = useState(false);
 
+  const navigate = useNavigate();
+
   const {
-    control,
+    register,
     handleSubmit,
     formState: { errors },
   } = useForm({
-    resolver: yupResolver(investmentDoct),
+    resolver: yupResolver(investmentDocSchema),
   });
 
-
+  // const onSubmit = (data) => {
+  //   console.log(data);
+  //   setFile(data.document[0]);
+  //   // Additional code for handling form submission
+  // };
 
   const onSubmit = (data) => {
     console.log(data);
-    setSponser([
-      {
-        ...data,
-        status: true,
-        id: uuidv4(),
-        createdAt: new Date().toISOString(),
-      },
-      ...investmentDoct,
-    ]);
+    setFile(data.document[0]);
+
+    const newDocument = {
+      ...data,
+      document: data.document[0].name, // Store the document name
+      status: true,
+      id: uuidv4(),
+      createdAt: new Date().toISOString(),
+      Type:getFileIcon(file.type)
+    };
+
+    setCreate((prevCreate) => [...prevCreate, newDocument]);
+    navigate(" ");
   };
 
-  const handleSave = () => {
-    console.log({
-      fileName: fileName,
-      file:file
-    });
-    setAlert(false)
-    onClose()
+  const handleFileChange = (event) => {
+    const selectedFile = event.target.files[0];
+    setFile(selectedFile);
+  };
 
-  }
+  const getFileIcon = (type) => {
+    switch (type) {
+      case 'application/pdf':
+        return <GrDocumentPdf />;
+      case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+      case 'application/msword':
+        return <TbFileTypeDocx />;
+      case 'image/jpeg':
+      case 'image/png':
+      case 'image/gif':
+        return <AiOutlineFileGif />;
+      default:
+        return <FaRegFileAlt />;
+    }
+  };
+
+  const getFileTitle = (type) => {
+    switch (type) {
+      case 'application/pdf':
+        return "PDF";
+      case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+      case 'application/msword':
+        return "DOCX";
+      case 'image/jpeg':
+      case 'image/png':
+      case 'image/gif':
+        return "JPG";
+      default:
+        return "HH";
+    }
+  };
 
   return (
     <>
-      <Drawer 
+      <Drawer
         isOpen={isOpen}
         placement="right"
         initialFocusRef={firstField}
@@ -76,61 +123,81 @@ const InvestmentDocuments = ({ id, isOpen, onClose, firstField }) => {
         <DrawerOverlay />
         <DrawerContent>
           <DrawerCloseButton />
-          <DrawerHeader fontSize={"sm"}>Add Details</DrawerHeader>
-
-          <DrawerBody>
-
-            <FormControl mb={4}>
-              <FormLabel fontSize={"sm"}>File Name</FormLabel>
-              <Input
-                value={fileName}
-                onChange={(e) => setFileName(e.target.value)}
-                fontSize={"sm"}
-                type="text"
-                size={"sm"}
-              />
-            </FormControl>
-            <FormControl mb={4}>
-              <FormLabel fontSize={"sm"}>File Name</FormLabel>
-              <Input
-                value={file}
-                onChange={(e) => setFile(e.target.value)}
-                fontSize={"sm"}
-                type="file"
-                className="form-control"
-                size={"sm"}
-              />
-            </FormControl>
-
-          </DrawerBody>
-          <DrawerFooter>
-            <Button
-              variant="outline"
-              colorScheme={"green"}
-              rounded={"sm"}
-              size={"sm"}
-              mr={3}
-              onClick={onClose}
-            >
-              Cancel
-            </Button>
-
-            <Button
-              colorScheme={"green"}
-              rounded={"sm"}
-              size={"sm"}
-              onClick={() => setAlert(true)}
-            >
-              Save
-            </Button>
-          </DrawerFooter>
+          <DrawerHeader fontSize="sm">Add Details</DrawerHeader>
+          <Box as="form" onSubmit={handleSubmit(onSubmit)}>
+            <DrawerBody>
+              <FormControl mb={4}>
+                <FormLabel fontSize="sm">File Name</FormLabel>
+                <Input
+                  name="fileName"
+                  {...register("fileName")}
+                  fontSize="sm"
+                  type="text"
+                  size="sm"
+                />
+                {errors.fileName && (
+                  <Text fontSize="sm" color="red">
+                    {errors.fileName.message}
+                  </Text>
+                )}
+              </FormControl>
+              <FormControl mb={4}>
+                <FormLabel fontSize="sm">Document</FormLabel>
+                <Input
+                  name="document"
+                  {...register("document")}
+                  fontSize="sm"
+                   className="form-control"
+                  type="file"
+                  size="sm"
+                  onChange={handleFileChange}
+                />
+                {errors.document && (
+                  <Text fontSize="sm" color="red">
+                    {errors.document.message}
+                  </Text>
+                )}
+              </FormControl>
+              {file && (
+                <Box mt={4}>
+                  <Box display="flex" mb={2}>
+                    {getFileIcon(file.type)}
+                    <Text fontSize="sm" ml={2} mb={0  }>
+                      {file.name}
+                    </Text>
+                  </Box>
+                  <Text fontSize="sm">{bytesToMB(file.size)}</Text>
+                </Box>
+              )}
+            </DrawerBody>
+            <DrawerFooter>
+              <Button
+                variant="outline"
+                colorScheme="green"
+                rounded="sm"
+                size="sm"
+                mr={3}
+                onClick={onClose}
+              >
+                Cancel
+              </Button>
+              <Button
+                colorScheme="green"
+                rounded="sm"
+                size="sm"
+                type="submit"
+                onClick={onSubmit}
+              >
+                Save
+              </Button>
+            </DrawerFooter>
+          </Box>
         </DrawerContent>
       </Drawer>
       <CustomAlertDialog
         isOpen={alert}
         onClose={() => setAlert(false)}
-        alertHandler={handleSave}
-        message={"Are you sure you want to add this document?"}
+        message="Are you sure you want to add this document?"
       />
     </>
   );
diff --git a/src/Pages/Master/Sponser/AddSponser.jsx b/src/Pages/Master/Sponser/AddSponser.jsx
index 238d22c..850c175 100644
--- a/src/Pages/Master/Sponser/AddSponser.jsx
+++ b/src/Pages/Master/Sponser/AddSponser.jsx
@@ -257,7 +257,7 @@ const AddSponser = () => {
         createdAt: new Date().toISOString(),
       },
       ...sponser,
-    ]);
+    ]);  
     navigate("/sponser");
   };
 
diff --git a/src/Pages/Master/Sponser/Sponsers.jsx b/src/Pages/Master/Sponser/Sponsers.jsx
index 8fb996a..ba5dea9 100644
--- a/src/Pages/Master/Sponser/Sponsers.jsx
+++ b/src/Pages/Master/Sponser/Sponsers.jsx
@@ -1,16 +1,8 @@
 import {
-  Avatar,
-  Badge,
   Box,
   Button,
   HStack,
   Input,
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuList,
-  Portal,
-  Select,
   Switch,
   Tag,
   Text,
@@ -194,7 +186,7 @@ const Sponser = () => {
             <EditIcon />
           </Button>
         </Tooltip>
-
+   
 
         <Tooltip
           rounded={"sm"}
@@ -261,6 +253,7 @@ const Sponser = () => {
     }, 100);
     setIsLoading(true);
   };
+  
 
   return (
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>

From a22088bafd8e6ce516f194ba7a875b26a6d99cdb Mon Sep 17 00:00:00 2001
From: rockyeverlast <rockyeverlast@gmail.com>
Date: Tue, 9 Jul 2024 12:25:52 +0530
Subject: [PATCH 4/7] Added drawer to header menu in ViewIO

---
 src/Pages/IO_Management/EditIO/EditIO.jsx     |  1 +
 src/Pages/IO_Management/EditIO/EditIOForm.jsx |  7 +-
 .../ViewIO/HeaderModal/AmountInvested.jsx     | 42 +++++++-
 .../IO_Management/ViewIO/ViewIOdataHeader.jsx | 95 +++++++++++++------
 4 files changed, 112 insertions(+), 33 deletions(-)

diff --git a/src/Pages/IO_Management/EditIO/EditIO.jsx b/src/Pages/IO_Management/EditIO/EditIO.jsx
index a93561e..8057e93 100644
--- a/src/Pages/IO_Management/EditIO/EditIO.jsx
+++ b/src/Pages/IO_Management/EditIO/EditIO.jsx
@@ -17,6 +17,7 @@ import FormInputMain from "../../../Components/FormInputMain";
 import FormField from "./EditIOForm";
 
 const EditIO = ({ isOpen, onClose }) => {
+    
   const {
     register,
     handleSubmit,
diff --git a/src/Pages/IO_Management/EditIO/EditIOForm.jsx b/src/Pages/IO_Management/EditIO/EditIOForm.jsx
index 1ec9669..52e0bfd 100644
--- a/src/Pages/IO_Management/EditIO/EditIOForm.jsx
+++ b/src/Pages/IO_Management/EditIO/EditIOForm.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useContext } from "react";
 import {
   Box,
   Input,
@@ -8,9 +8,12 @@ import {
   FormLabel,
   FormErrorMessage,
 } from "@chakra-ui/react";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import { useParams } from "react-router-dom";
 
 const FormField = ({ field, register, errors }) => {
-  const { label, name, type, placeHolder, options, width } = field;
+    const { label, name, type, placeHolder, options, width } = field;   
+
 
   return (
     <Box width={width}>
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/AmountInvested.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/AmountInvested.jsx
index 1ec6bfa..f151fb5 100644
--- a/src/Pages/IO_Management/ViewIO/HeaderModal/AmountInvested.jsx
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/AmountInvested.jsx
@@ -1,5 +1,7 @@
 import {
+  Box,
   Button,
+  Input,
   Modal,
   ModalBody,
   ModalCloseButton,
@@ -7,6 +9,8 @@ import {
   ModalFooter,
   ModalHeader,
   ModalOverlay,
+  Text,
+  Textarea,
 } from "@chakra-ui/react";
 
 const AmountInvested = ({ isOpen, onClose }) => {
@@ -14,13 +18,45 @@ const AmountInvested = ({ isOpen, onClose }) => {
     <Modal isOpen={isOpen} onClose={onClose}>
       <ModalOverlay />
       <ModalContent>
-        <ModalHeader>Investment</ModalHeader>
+        <ModalHeader>Amount Invested</ModalHeader>
         <ModalCloseButton />
         <ModalBody>
-          <p>Amount Invested details go here...</p>
+          <Box mb={"15px"}>
+            <Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
+              Date
+            </Text>
+            <Input
+              placeholder="Select Date"
+              size="md"
+              type="date"
+              fontSize={"sm"}
+            />
+          </Box>
+
+          <Box mb={"15px"} fontSize={"sm"} fontWeight={"bold"}>
+            <Text as={"label"}>Amount</Text>
+            <Input placeholder="Enter amount" fontSize={"sm"} />
+          </Box>
+
+          <Box mb={"15px"}>
+            <Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
+              Comments
+            </Text>
+            <Textarea placeholder="Write Comments" fontSize={"sm"} />
+          </Box>
         </ModalBody>
         <ModalFooter>
-          <Button colorScheme="blue" mr={3} onClick={onClose}>
+          <Button
+            bg={"hsla(139, 100%, 14%, 1)"}
+            mr={3}
+            color={"#fff"}
+            _hover={{
+              bg: "hsl(139deg 98.99% 26.59%)",
+            }}
+          >
+            Save
+          </Button>
+          <Button mr={3} onClick={onClose}>
             Close
           </Button>
         </ModalFooter>
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
index defae50..0af6990 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
@@ -18,6 +18,15 @@ import {
   Text,
   useDisclosure,
 } from "@chakra-ui/react";
+import {
+  Drawer,
+  DrawerBody,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerCloseButton,
+} from "@chakra-ui/react";
 import header from "../../../assets/IOheader.png";
 import { HiDotsVertical } from "react-icons/hi";
 import { Link } from "react-router-dom";
@@ -27,9 +36,11 @@ import DistributionSponsor from "./HeaderModal/DistributionSponsor";
 import DistributionInvestor from "./HeaderModal/DistributionInvestor";
 import UpdateIONav from "./HeaderModal/UpdateIONav";
 import UpdateIOStatus from "./HeaderModal/UpdateIOStatus";
+import { useRef } from "react";
 
 const ViewIOdataHeader = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
+  const btnRef = useRef();
 
   const {
     isOpen: isInvestmentOpen,
@@ -110,69 +121,97 @@ const ViewIOdataHeader = () => {
             bg={"#fff"}
             _hover={{ backgroundColor: "#fff !important" }}
             onClick={onOpen}
+            ref={btnRef}
           >
             <HiDotsVertical className="rubix-text-dark fs-6" />
           </MenuButton>
-          {/* <Portal>
-            <MenuList minWidth="80px">
-              <MenuItem className="web-text-medium">Delete</MenuItem>
-            </MenuList>
-          </Portal> */}
         </Menu>
 
-        {/* Modal */}
-        <Modal isOpen={isOpen} onClose={onClose}>
-          <ModalOverlay />
-          <ModalContent>
-            <ModalHeader>Transaction</ModalHeader>
-            <ModalCloseButton />
-            <ModalBody paddingInline={"10px"}>
+        {/* Drawer */}
+        <Drawer
+          isOpen={isOpen}
+          placement="right"
+          onClose={onClose}
+          finalFocusRef={btnRef}
+        >
+          <DrawerOverlay />
+          <DrawerContent>
+            <DrawerCloseButton />
+            <DrawerHeader>Transaction</DrawerHeader>
+
+            <DrawerBody>
               <Box
                 display={"grid"}
                 alignContent={"left"}
                 justifyItems={"start"}
               >
-                <Button onClick={onInvestmentOpen} bg={bg} _hover={hover}>
+                <Button
+                  onClick={onInvestmentOpen}
+                  bg={bg}
+                  _hover={hover}
+                  paddingInline={"0px"}
+                >
                   Amount Invested
                 </Button>
                 <Divider />
-                <Button onClick={onFeesOpen} bg={bg} _hover={hover}>
+                <Button
+                  onClick={onFeesOpen}
+                  bg={bg}
+                  _hover={hover}
+                  paddingInline={"0px"}
+                >
                   Fees & Expenses
                 </Button>
                 <Divider />
-                <Button onClick={onDistSponsorOpen} bg={bg} _hover={hover}>
+                <Button
+                  onClick={onDistSponsorOpen}
+                  bg={bg}
+                  _hover={hover}
+                  paddingInline={"0px"}
+                >
                   Distribution from Sponsors
                 </Button>
                 <Divider />
-                <Button onClick={onDistInvestorOpen} bg={bg} _hover={hover}>
+                <Button
+                  onClick={onDistInvestorOpen}
+                  bg={bg}
+                  _hover={hover}
+                  paddingInline={"0px"}
+                >
                   Distribution To Investors
                 </Button>
                 <Divider />
-                <Button onClick={onUpdateNavOpen} bg={bg} _hover={hover}>
+                <Button
+                  onClick={onUpdateNavOpen}
+                  bg={bg}
+                  _hover={hover}
+                  paddingInline={"0px"}
+                >
                   Update IO NAV
                 </Button>
                 <Divider />
-                <Button onClick={onUpdateStatusOpen} bg={bg} _hover={hover}>
-                  Update IO Status
-                </Button>
-                <Divider />
                 <Button
-                  variant="ghost"
-                  mr={3}
-                  onClick={onClose}
+                  onClick={onUpdateStatusOpen}
                   bg={bg}
                   _hover={hover}
+                  paddingInline={"0px"}
                 >
-                  Exit
+                  Update IO Status
                 </Button>
                 <Divider />
                 {/* <Button variant="ghost" onClick={onClose} bg={bg}>
                   Cancel
                 </Button> */}
               </Box>
-            </ModalBody>
-          </ModalContent>
-        </Modal>
+            </DrawerBody>
+
+            <DrawerFooter>
+              <Button variant="outline" mr={3} onClick={onClose}>
+                Cancel
+              </Button>
+            </DrawerFooter>
+          </DrawerContent>
+        </Drawer>
 
         {/* Modals */}
         <AmountInvested isOpen={isInvestmentOpen} onClose={onInvestmentClose} />

From dd054d1da8a59c71ca3f316147a9316aa10b69d0 Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Tue, 9 Jul 2024 12:35:24 +0530
Subject: [PATCH 5/7] icon font

---
 .../CreateIO/InvestmentDocument.jsx           | 44 +++----------------
 .../IO_Management/InvestmentDocuments.jsx     |  2 +-
 2 files changed, 7 insertions(+), 39 deletions(-)

diff --git a/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx b/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx
index 47d3561..8b9f946 100644
--- a/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx
+++ b/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx
@@ -23,6 +23,8 @@ import {
   EditIcon,
   ViewIcon,
 } from "@chakra-ui/icons";
+import { GrDocumentPdf } from "react-icons/gr";
+import { AiOutlineFileGif } from "react-icons/ai";
 
 const InvestmentDocument = ({ control, errors, enableNextTab, index }) => {
   const { slideFromRight } =
@@ -41,49 +43,14 @@ const InvestmentDocument = ({ control, errors, enableNextTab, index }) => {
   const [create, setCreate] = useState([
     {
       id: 1,
-      Type: "PDF",
+      Type: <GrDocumentPdf />,
       fileName: "Investment Private Company",
       document: "Investment.pdf",
       status: true,
     },
     {
       id: 2,
-      Type: "PDF",
-      fileName: "Investment Private",
-      document: "Investment.pdf",
-      status: true,
-    },
-    {
-      id: 3,
-      Type: "PDF",
-      fileName: "Investment Private",
-      document: "Investment.pdf",
-      status: true,
-    },
-    {
-      id: 4,
-      Type: "PDF",
-      fileName: "Investment Private",
-      document: "Investment.pdf",
-      status: true,
-    },
-    {
-      id: 5,
-      Type: "PDF",
-      fileName: "Investment Private",
-      document: "Investment.pdf",
-      status: true,
-    },
-    {
-      id: 6,
-      Type: "PDF",
-      fileName: "Investment Private",
-      document: "Investment.pdf",
-      status: true,
-    },
-    {
-      id: 7,
-      Type: "PDF",
+      Type: <AiOutlineFileGif />,
       fileName: "Investment Private",
       document: "Investment.pdf",
       status: true,
@@ -147,7 +114,8 @@ const InvestmentDocument = ({ control, errors, enableNextTab, index }) => {
         as="span"
         color="teal.900"
         fontWeight="500"
-        className="d-flex align-items-center web-text-small"
+        className="d-flex align-items-center"
+        fontSize={'xl'}
       >
         {item.Type}
       </Text>
diff --git a/src/Pages/IO_Management/InvestmentDocuments.jsx b/src/Pages/IO_Management/InvestmentDocuments.jsx
index decb18e..a2a5d6f 100644
--- a/src/Pages/IO_Management/InvestmentDocuments.jsx
+++ b/src/Pages/IO_Management/InvestmentDocuments.jsx
@@ -161,7 +161,7 @@ const InvestmentDocuments = ({ id, isOpen, onClose, firstField, create, setCreat
               {file && (
                 <Box mt={4}>
                   <Box display="flex" mb={2}>
-                    {getFileIcon(file.type)}
+                    <Text>{getFileIcon(file.type)}</Text>
                     <Text fontSize="sm" ml={2} mb={0  }>
                       {file.name}
                     </Text>

From e2bac58a408b3e207f805facad30d9eed736919f Mon Sep 17 00:00:00 2001
From: rockyeverlast <rockyeverlast@gmail.com>
Date: Tue, 9 Jul 2024 13:05:58 +0530
Subject: [PATCH 6/7] Update the header menu to pop up

---
 src/Pages/IO_Management/EditIO/EditIOForm.jsx |  7 +-
 .../IO_Management/ViewIO/ViewIOdataHeader.jsx | 65 +++++++++++++++----
 2 files changed, 57 insertions(+), 15 deletions(-)

diff --git a/src/Pages/IO_Management/EditIO/EditIOForm.jsx b/src/Pages/IO_Management/EditIO/EditIOForm.jsx
index 52e0bfd..60af0e9 100644
--- a/src/Pages/IO_Management/EditIO/EditIOForm.jsx
+++ b/src/Pages/IO_Management/EditIO/EditIOForm.jsx
@@ -12,13 +12,14 @@ import GlobalStateContext from "../../../Contexts/GlobalStateContext";
 import { useParams } from "react-router-dom";
 
 const FormField = ({ field, register, errors }) => {
-    const { label, name, type, placeHolder, options, width } = field;   
-
+  const { label, name, type, placeHolder, options, width } = field;
 
   return (
     <Box width={width}>
       <FormControl isInvalid={errors[name]}>
-        <FormLabel>{label}</FormLabel>
+        <FormLabel fontSize={"sm"} fontWeight={"400"}>
+          {label}
+        </FormLabel>
         {type === "text" && (
           <Input
             placeholder={placeHolder}
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
index 0af6990..5801a86 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
@@ -19,13 +19,10 @@ import {
   useDisclosure,
 } from "@chakra-ui/react";
 import {
-  Drawer,
-  DrawerBody,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerOverlay,
-  DrawerContent,
-  DrawerCloseButton,
+  MenuItemOption,
+  MenuGroup,
+  MenuOptionGroup,
+  MenuDivider,
 } from "@chakra-ui/react";
 import header from "../../../assets/IOheader.png";
 import { HiDotsVertical } from "react-icons/hi";
@@ -125,10 +122,57 @@ const ViewIOdataHeader = () => {
           >
             <HiDotsVertical className="rubix-text-dark fs-6" />
           </MenuButton>
+          <MenuList>
+            <Box display={"grid"} alignContent={"left"} justifyItems={"start"}>
+              <MenuItem _hover={hover} _focus={{ bg: "transparent" }}>
+                <Button onClick={onInvestmentOpen} bg={bg} _hover={hover}>
+                  Amount Invested
+                </Button>
+              </MenuItem>
+
+              <Divider />
+              <MenuItem _hover={hover}>
+                <Button onClick={onFeesOpen} bg={bg} _hover={hover}>
+                  Fees & Expenses
+                </Button>
+              </MenuItem>
+
+              <Divider />
+              <MenuItem _hover={hover}>
+                <Button onClick={onDistSponsorOpen} bg={bg} _hover={hover}>
+                  Distribution from Sponsors
+                </Button>
+              </MenuItem>
+
+              <Divider />
+
+              <MenuItem _hover={hover}>
+                <Button onClick={onDistInvestorOpen} bg={bg} _hover={hover}>
+                  Distribution To Investors
+                </Button>
+              </MenuItem>
+
+              <Divider />
+
+              <MenuItem _hover={hover}>
+                <Button onClick={onUpdateNavOpen} bg={bg} _hover={hover}>
+                  Update IO NAV
+                </Button>
+              </MenuItem>
+
+              <Divider />
+
+              <MenuItem _hover={hover}>
+                <Button onClick={onUpdateStatusOpen} bg={bg} _hover={hover}>
+                  Update IO Status
+                </Button>
+              </MenuItem>
+            </Box>
+          </MenuList>
         </Menu>
 
         {/* Drawer */}
-        <Drawer
+        {/* <Drawer
           isOpen={isOpen}
           placement="right"
           onClose={onClose}
@@ -199,9 +243,6 @@ const ViewIOdataHeader = () => {
                   Update IO Status
                 </Button>
                 <Divider />
-                {/* <Button variant="ghost" onClick={onClose} bg={bg}>
-                  Cancel
-                </Button> */}
               </Box>
             </DrawerBody>
 
@@ -211,7 +252,7 @@ const ViewIOdataHeader = () => {
               </Button>
             </DrawerFooter>
           </DrawerContent>
-        </Drawer>
+        </Drawer> */}
 
         {/* Modals */}
         <AmountInvested isOpen={isInvestmentOpen} onClose={onInvestmentClose} />

From cd22e6199302e64db5d1d442258364802a67007c Mon Sep 17 00:00:00 2001
From: rockyeverlast <rockyeverlast@gmail.com>
Date: Tue, 9 Jul 2024 13:13:39 +0530
Subject: [PATCH 7/7] Update headerMenu fontstyle

---
 .../IO_Management/ViewIO/ViewIOdataHeader.jsx | 47 ++++++++++++++++---
 1 file changed, 41 insertions(+), 6 deletions(-)

diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
index 5801a86..4730f75 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
@@ -78,6 +78,11 @@ const ViewIOdataHeader = () => {
     textDecoration: "underline",
     background: "#fff",
   };
+
+  const style = {
+    fontSize: "0.875rem",
+    fontWeight: "400",
+  };
   return (
     <Box
       display={"flex"}
@@ -125,21 +130,36 @@ const ViewIOdataHeader = () => {
           <MenuList>
             <Box display={"grid"} alignContent={"left"} justifyItems={"start"}>
               <MenuItem _hover={hover} _focus={{ bg: "transparent" }}>
-                <Button onClick={onInvestmentOpen} bg={bg} _hover={hover}>
+                <Button
+                  onClick={onInvestmentOpen}
+                  bg={bg}
+                  _hover={hover}
+                  style={style}
+                >
                   Amount Invested
                 </Button>
               </MenuItem>
 
               <Divider />
               <MenuItem _hover={hover}>
-                <Button onClick={onFeesOpen} bg={bg} _hover={hover}>
+                <Button
+                  onClick={onFeesOpen}
+                  bg={bg}
+                  _hover={hover}
+                  style={style}
+                >
                   Fees & Expenses
                 </Button>
               </MenuItem>
 
               <Divider />
               <MenuItem _hover={hover}>
-                <Button onClick={onDistSponsorOpen} bg={bg} _hover={hover}>
+                <Button
+                  onClick={onDistSponsorOpen}
+                  bg={bg}
+                  _hover={hover}
+                  style={style}
+                >
                   Distribution from Sponsors
                 </Button>
               </MenuItem>
@@ -147,7 +167,12 @@ const ViewIOdataHeader = () => {
               <Divider />
 
               <MenuItem _hover={hover}>
-                <Button onClick={onDistInvestorOpen} bg={bg} _hover={hover}>
+                <Button
+                  onClick={onDistInvestorOpen}
+                  bg={bg}
+                  _hover={hover}
+                  style={style}
+                >
                   Distribution To Investors
                 </Button>
               </MenuItem>
@@ -155,7 +180,12 @@ const ViewIOdataHeader = () => {
               <Divider />
 
               <MenuItem _hover={hover}>
-                <Button onClick={onUpdateNavOpen} bg={bg} _hover={hover}>
+                <Button
+                  onClick={onUpdateNavOpen}
+                  bg={bg}
+                  _hover={hover}
+                  style={style}
+                >
                   Update IO NAV
                 </Button>
               </MenuItem>
@@ -163,7 +193,12 @@ const ViewIOdataHeader = () => {
               <Divider />
 
               <MenuItem _hover={hover}>
-                <Button onClick={onUpdateStatusOpen} bg={bg} _hover={hover}>
+                <Button
+                  onClick={onUpdateStatusOpen}
+                  bg={bg}
+                  _hover={hover}
+                  style={style}
+                >
                   Update IO Status
                 </Button>
               </MenuItem>