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

import { Badge, 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,
  MenuItemOption,
  MenuGroup,
  MenuOptionGroup,
  MenuDivider,
} 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";
import { useRef } from "react";

const ViewIOdataHeader = () => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const btnRef = useRef();

  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",
  };

  const style = {
    fontSize: "0.875rem",
    fontWeight: "400",
  };
  return (
    <Box
      display={"flex"}
      alignItems={"center"}
      justifyContent={"start"}
      gap={14}
      bg={"#caf5d8"}
      rounded={"md"}
      // bgGradient='linear(to-r, #caf5d8, #f5e8ca)'
      // bgGradient='linear(to-r, #caf5d8, #d4a5a5)'
      // bgGradient='linear(to-r, #caf5d8, #d4a5a5)'
      // bgGradient='linear(to-r, #caf5d8, #b3e5fc)'
      // bgGradient='linear(to-r, #ffd54f, #caf5d8)'
      // bgGradient='linear(to-r, #caf5d8, #a8e6cf)'
      boxShadow={'md'}





      paddingRight={"10px"}
      borderRadius={"10px"}
    >
      <Box p={1}>
        <Image h={82} src={header} />
      </Box>
      <Box  display={"flex"} flexDirection={'column'} gap={2}>
        <Text as={'span'} fontSize={"sm"} fontWeight={"500"}>KKR Private Equity Fund (K-Prime)</Text>
        <Text as={'span'} fontSize={"sm"} fontWeight={"500"}>sponsor name: KKR</Text>
      </Box>
      <Box  display={"flex"} flexDirection={'column'} gap={2}>
        <Text as={'span'} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>IO Status</Text>
        <Badge  variant='subtle' w={"auto"}  color='green'>Open</Badge>
      </Box>
      <Box  display={"flex"} flexDirection={'column'} gap={2}>
        <Text as={'span'} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>IO MV NAV</Text>
        <Text as={'span'} fontSize={"sm"}  fontWeight={"500"}>$1,092,500</Text>
      </Box>
      <Box  display={"flex"} flexDirection={'column'} gap={2}>
        <Text as={'span'} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>IO cash</Text>
        <Text as={'span'} fontSize={"sm"}  fontWeight={"500"}>$48,000</Text>
      </Box>
      <Box  display={"flex"} flexDirection={'column'} gap={2}>
        <Text as={'span'} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>IO NAV</Text>
        <Text as={'span'} fontSize={"sm"}  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}
            ref={btnRef}
          >
            <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}
                  style={style}
                >
                  Amount Invested
                </Button>
              </MenuItem>

              <Divider />
              <MenuItem _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}
                  style={style}
                >
                  Distribution from Sponsors
                </Button>
              </MenuItem>

              <Divider />

              <MenuItem _hover={hover}>
                <Button
                  onClick={onDistInvestorOpen}
                  bg={bg}
                  _hover={hover}
                  style={style}
                >
                  Distribution To Investors
                </Button>
              </MenuItem>

              <Divider />

              <MenuItem _hover={hover}>
                <Button
                  onClick={onUpdateNavOpen}
                  bg={bg}
                  _hover={hover}
                  style={style}
                >
                  Update IO NAV
                </Button>
              </MenuItem>

              <Divider />

              <MenuItem _hover={hover}>
                <Button
                  onClick={onUpdateStatusOpen}
                  bg={bg}
                  _hover={hover}
                  style={style}
                >
                  Update IO Status
                </Button>
              </MenuItem>
            </Box>
          </MenuList>
        </Menu>

        {/* 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}
                  paddingInline={"0px"}
                >
                  Amount Invested
                </Button>
                <Divider />
                <Button
                  onClick={onFeesOpen}
                  bg={bg}
                  _hover={hover}
                  paddingInline={"0px"}
                >
                  Fees & Expenses
                </Button>
                <Divider />
                <Button
                  onClick={onDistSponsorOpen}
                  bg={bg}
                  _hover={hover}
                  paddingInline={"0px"}
                >
                  Distribution from Sponsors
                </Button>
                <Divider />
                <Button
                  onClick={onDistInvestorOpen}
                  bg={bg}
                  _hover={hover}
                  paddingInline={"0px"}
                >
                  Distribution To Investors
                </Button>
                <Divider />
                <Button
                  onClick={onUpdateNavOpen}
                  bg={bg}
                  _hover={hover}
                  paddingInline={"0px"}
                >
                  Update IO NAV
                </Button>
                <Divider />
                <Button
                  onClick={onUpdateStatusOpen}
                  bg={bg}
                  _hover={hover}
                  paddingInline={"0px"}
                >
                  Update IO Status
                </Button>
                <Divider />
              </Box>
            </DrawerBody>

            <DrawerFooter>
              <Button variant="outline" mr={3} onClick={onClose}>
                Cancel
              </Button>
            </DrawerFooter>
          </DrawerContent>
        </Drawer> */}

        {/* 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;