410 lines
12 KiB
JavaScript
410 lines
12 KiB
JavaScript
import {
|
|
Button,
|
|
Divider,
|
|
Image,
|
|
Menu,
|
|
MenuButton,
|
|
MenuItem,
|
|
MenuList,
|
|
Modal,
|
|
ModalBody,
|
|
ModalCloseButton,
|
|
ModalContent,
|
|
ModalFooter,
|
|
ModalHeader,
|
|
ModalOverlay,
|
|
Portal,
|
|
Text,
|
|
useDisclosure,
|
|
MenuItemOption,
|
|
MenuGroup,
|
|
MenuOptionGroup,
|
|
MenuDivider,
|
|
Badge,
|
|
Box,
|
|
Icon,
|
|
} from "@chakra-ui/react";
|
|
import header from "../../../assets/IOheader.png";
|
|
import { HiDotsVertical } from "react-icons/hi";
|
|
import { Link, useParams } 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 { useContext, useRef } from "react";
|
|
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
|
|
import Exit from "./HeaderModal/Exit";
|
|
import Cancle from "./HeaderModal/Cancle";
|
|
import { AddIcon } from "@chakra-ui/icons";
|
|
import { GrGallery } from "react-icons/gr";
|
|
|
|
const ViewIOdataHeader = () => {
|
|
const params = useParams();
|
|
const id = params?.id;
|
|
const { isOpen, onOpen, onClose } = useDisclosure();
|
|
const btnRef = useRef();
|
|
const { IODetails } = useContext(GlobalStateContext);
|
|
console.log(
|
|
"=================>>>>>",
|
|
IODetails?.artifactsImage?.[0]?.artifactPathName
|
|
);
|
|
|
|
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 {
|
|
isOpen: isExitOpen,
|
|
onOpen: onExitOpen,
|
|
onClose: onExitClose,
|
|
} = useDisclosure();
|
|
const {
|
|
isOpen: isCancleOpen,
|
|
onOpen: onCancleOpen,
|
|
onClose: onCancleClose,
|
|
} = 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={8}
|
|
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"}
|
|
position={"relative"}
|
|
>
|
|
<Box h={100} w={200} p={1.5}>
|
|
{/* <Image rounded={'md'} h={"100%"} src={ " https://tanami.betadelivery.com/" + IODetails?.ioName} alt={IODetails?.ioName}/> */}
|
|
{IODetails?.artifactsImage?.[0]?.artifactPathName ? (
|
|
<Image
|
|
rounded={"md"}
|
|
h={"100%"}
|
|
w={"100%"}
|
|
objectFit={"cover"}
|
|
src={
|
|
" https://tanami.betadelivery.com/" +
|
|
IODetails?.artifactsImage?.[0]?.artifactPathName
|
|
}
|
|
alt={IODetails?.ioName}
|
|
/>
|
|
) : (
|
|
<Box
|
|
w={"100%"}
|
|
h={"100%"}
|
|
display={"flex"}
|
|
justifyContent={"center"}
|
|
alignItems={"center"}
|
|
bg={"#fff"}
|
|
rounded={"md"}
|
|
>
|
|
<Icon color={"gray.700"} as={GrGallery} />
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
{/* <Box display={"flex"} flexDirection={"column"} gap={2}>
|
|
<Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
|
|
IO name: <Text as={'span'} ms={2}>{foundObject?.ioName}</Text>
|
|
</Text>
|
|
<Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
|
|
Sponsor name: <Text as={'span'} ms={2}>{foundObject?.sponserName}</Text>
|
|
</Text>
|
|
</Box> */}
|
|
|
|
{/* <Box display={"flex"} flexDirection={"column"} gap={2}>
|
|
<Text as={"span"} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>
|
|
IO ID
|
|
</Text>
|
|
<Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
|
|
{IODetails?.io_id ? IODetails?.io_id : "---"}
|
|
</Text>
|
|
</Box> */}
|
|
|
|
<Box display={"flex"} w={"auto"} flexDirection={"column"} gap={2}>
|
|
<Text as={"span"} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>
|
|
IO Name
|
|
</Text>
|
|
<Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
|
|
{IODetails?.investmentNameEnglish
|
|
? IODetails?.investmentNameEnglish
|
|
: "---"}
|
|
</Text>
|
|
</Box>
|
|
|
|
<Box display={"flex"} flexDirection={"column"} gap={2}>
|
|
<Text as={"span"} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>
|
|
Sponsorer Name
|
|
</Text>
|
|
<Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
|
|
{IODetails?.sponsor?.sponsorName
|
|
? IODetails?.sponsor?.sponsorName
|
|
: "---"}
|
|
</Text>
|
|
</Box>
|
|
|
|
<Box display={"flex"} flexDirection={"column"} gap={2}>
|
|
<Text as={"span"} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>
|
|
IO Status
|
|
</Text>
|
|
<Badge
|
|
rounded={"sm"}
|
|
pt={0.5}
|
|
pb={0.5}
|
|
ps={4}
|
|
pe={4}
|
|
textTransform={"none"}
|
|
variant={"solid"}
|
|
colorScheme={
|
|
IODetails?.ioStatus?.statusAdmin === "Draft"
|
|
? "blue"
|
|
: IODetails?.ioStatus?.statusAdmin === "Processing"
|
|
? "yellow"
|
|
: IODetails?.ioStatus?.statusAdmin === "Open"
|
|
? "forestGreen"
|
|
: IODetails?.ioStatus?.statusAdmin === "Closed"
|
|
? "red"
|
|
: "gray"
|
|
}
|
|
>
|
|
{IODetails?.ioStatus?.statusAdmin
|
|
? IODetails?.ioStatus?.statusAdmin
|
|
: "---"}
|
|
</Badge>
|
|
</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"}>
|
|
{IODetails?.currentValuation ? IODetails?.currentValuation : "00.00"}
|
|
</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"}>
|
|
{IODetails?.ioCash ? IODetails?.ioCash : "00.00"}
|
|
</Text>
|
|
</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"}>
|
|
{IODetails?.marketValue ? IODetails?.marketValue : "00.00"}
|
|
</Text>
|
|
</Box>
|
|
|
|
<Box
|
|
position={"absolute"}
|
|
right={3}
|
|
top={2}
|
|
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 fontSize={"sm"}>
|
|
<MenuItem
|
|
_hover={{
|
|
bg: "#fff",
|
|
}}
|
|
as={"span"}
|
|
fontWeight={600}
|
|
className="border-bottom"
|
|
>
|
|
Tansaction
|
|
</MenuItem>
|
|
<MenuItem onClick={onInvestmentOpen} className="border-bottom">
|
|
Amount Invested
|
|
</MenuItem>
|
|
<MenuItem onClick={onFeesOpen} className="border-bottom">
|
|
Fees & Expenses
|
|
</MenuItem>
|
|
<MenuItem onClick={onDistSponsorOpen} className="border-bottom">
|
|
Distribution from Sponsors
|
|
</MenuItem>
|
|
<MenuItem onClick={onDistInvestorOpen} className="border-bottom">
|
|
Distribution To investors
|
|
</MenuItem>
|
|
<MenuItem onClick={onUpdateNavOpen} className="border-bottom">
|
|
Update iO NAV
|
|
</MenuItem>
|
|
<MenuItem onClick={onExitOpen} className="border-bottom">
|
|
Exit
|
|
</MenuItem>
|
|
<MenuItem onClick={onCancleOpen} className="border-bottom">
|
|
Cancel
|
|
</MenuItem>
|
|
<MenuItem onClick={onUpdateStatusOpen}>Update iO status</MenuItem>
|
|
</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} />
|
|
<Exit isOpen={isExitOpen} onClose={onExitClose} />
|
|
<Cancle isOpen={isCancleOpen} onClose={onCancleClose} />
|
|
<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;
|