tanami-admin-panel/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx

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={"10px"}
      borderRadius={"10px"}
    >
      <Box>
        <Image src={header} />
      </Box>
      <Box fontSize={"sm"} fontWeight={"500"}>
        <Text>KKR Private Equity Fund (K-Prime)</Text>
        <Text>sponsor name: KKR</Text>
      </Box>
      <Box fontSize={"sm"}>
        <Text>IO Status</Text>
        <Text fontWeight={"500"}>Open</Text>
      </Box>
      <Box fontSize={"sm"}>
        <Text>IO MV NAV</Text>
        <Text fontWeight={"500"}>$1,092,500</Text>
      </Box>
      <Box fontSize={"sm"}>
        <Text>IO cash</Text>
        <Text fontWeight={"500"}>$48,000</Text>
      </Box>
      <Box fontSize={"sm"}>
        <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>
  );
};

export default ViewIOdataHeader;