Added drawer to header menu in ViewIO

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,

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}>

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>

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} />