327 lines
9.3 KiB
JavaScript
327 lines
9.3 KiB
JavaScript
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;
|