Siddhesh.More/tanami-admin-panel
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases 2 Wiki Activity

requst table

Browse Source
This commit is contained in:
YasinShaikh123
2024-06-26 14:01:50 +05:30
parent d78702e613
commit 05d48415da
4 changed files with 802 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

237
src/Components/InvestmentCard/InvestmentCard.jsx
View File

@@ -2,6 +2,7 @@ import {
Box,
Button,
Card,
CardBody,
Heading,
Image,
Progress,
@@ -9,112 +10,144 @@ import {
Text,
Tooltip,
} from "@chakra-ui/react";
import { FADE_IN_SCALE_UP, OPACITY_ON_LOAD } from "../../Layout/animations";
const InvestmentCard = ({ investment }) => {
const investments = [
{
imgSrc:
"https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60",
title: "Multi Family Residence Portfolio",
sponsor: "KKR",
annReturn: "12.5%",
annYield: "12.5%",
minInvests: "$1,000",
targClose: "24 December",
holdingPer: "5-7 years",
progressValue: 80,
},
{
imgSrc:
"https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60",
title: "Multi Family Residence Portfolio",
sponsor: "KKR",
annReturn: "12.5%",
annYield: "12.5%",
minInvests: "$1,000",
targClose: "24 December",
holdingPer: "5-7 years",
progressValue: 80,
},
{
imgSrc:
"https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60",
title: "Multi Family Residence Portfolio",
sponsor: "KKR",
annReturn: "12.5%",
annYield: "12.5%",
minInvests: "$1,000",
targClose: "24 December",
holdingPer: "5-7 years",
progressValue: 80,
},
];
const InvestmentCard = () => {
return (
<Box
{...OPACITY_ON_LOAD}
m={1}
// direction={{ base: "column", sm: "row" }}
// overflow="scroll"
variant="outline"
display={"flex"}
alignItems={"center"}
justifyContent={"space-between"}
p={4}
boxShadow={"md"}
rounded={"md"}
border={"none"}
w={'90%'}
mb={4}
>
<Image
// p={"15px"}
rounded={"md"}
objectFit="cover"
w={"200px"}
h={"120px"}
src={investment.imgSrc}
alt={investment.title}
/>
<Stack as={"span"}>
<Box>
<Heading size="sm" fontWeight={"500"}>
{investment.title}
</Heading>
<Text fontSize="sm" mb={"4px"}>
Sponsor:{" "}
<Text as={"span"} fontWeight={"600"}>
{investment.sponsor}
</Text>{" "}
</Text>
<Text fontSize="sm" mb={"4px"}>
Ann return:{" "}
<Text as={"span"} fontWeight={"600"}>
{investment.annReturn}
</Text>{" "}
</Text>
<Text fontSize="sm" mb={"4px"}>
Ann Yield:{" "}
<Text as={"span"} fontWeight={"600"}>
{investment.annYield}
</Text>{" "}
</Text>
</Box>
</Stack>
<Stack as={"span"} borderLeft={"1px solid #ccc"} p={4}>
<Box>
<Text fontSize="sm" mb={"4px"}>
Min.Invests:{" "}
<Text as={"span"} fontWeight={"600"}>
{investment.minInvests}
</Text>{" "}
</Text>
<Text fontSize="sm" mb={"4px"}>
Targ Close:{" "}
<Text as={"span"} fontWeight={"600"}>
{investment.targClose}
</Text>{" "}
</Text>
<Text fontSize="sm" mb={"4px"}>
Holding per:{" "}
<Text as={"span"} fontWeight={"600"}>
{investment.holdingPer}
</Text>{" "}
</Text>
</Box>
</Stack>
<Stack as={"span"}>
<Box>
<Tooltip
hasArrow
placement="top-start"
label={investment.progressValue}
bg="white"
color="#000"
<Box w={"100%"}>
<Box>
{investments.map((investment, index) => (
<Card
direction={{ base: "column", sm: "row" }}
overflow="scroll"
variant="outline"
display={"flex"}
alignItems={"center"}
mb={'20px'}
boxShadow={'md'}
border={'none'}
>
<Progress
width={"200px"}
value={investment.progressValue}
rounded={"10px"}
colorScheme={"green"}
size={"sm"}
<Image
p={"15px"}
rounded={"24px"}
objectFit="cover"
w={"200px"}
h={"160px"}
src={investment.imgSrc}
alt={investment.title}
/>
</Tooltip>
<Button
// variant='ghost'
w={"100%"}
colorScheme={"gray"}
rounded={"sm"}
size={"sm"}
mt={"20px"}
>
View
</Button>
</Box>
</Stack>
<Stack>
<CardBody>
<Heading size="sm" fontWeight={"500"}>
{investment.title}
</Heading>
<Text fontSize="sm" mb={"4px"}>
Sponsor:{" "}
<Text as={"span"} fontWeight={"600"}>
{investment.sponsor}
</Text>{" "}
</Text>
<Text fontSize="sm" mb={"4px"}>
Ann return:{" "}
<Text as={"span"} fontWeight={"600"}>
{investment.annReturn}
</Text>{" "}
</Text>
<Text fontSize="sm" mb={"4px"}>
Ann Yield:{" "}
<Text as={"span"} fontWeight={"600"}>
{investment.annYield}
</Text>{" "}
</Text>
</CardBody>
</Stack>
<Stack borderLeft={"1px solid #ccc"}>
<CardBody>
<Text fontSize="sm" mb={"4px"}>
Min.Invests:{" "}
<Text as={"span"} fontWeight={"600"}>
{investment.minInvests}
</Text>{" "}
</Text>
<Text fontSize="sm" mb={"4px"}>
Targ Close:{" "}
<Text as={"span"} fontWeight={"600"}>
{investment.targClose}
</Text>{" "}
</Text>
<Text fontSize="sm" mb={"4px"}>
Holding per:{" "}
<Text as={"span"} fontWeight={"600"}>
{investment.holdingPer}
</Text>{" "}
</Text>
</CardBody>
</Stack>
<Stack>
<CardBody>
<Tooltip hasArrow placement='top-start' label={investment.progressValue} bg='white' color='#000'>
<Progress
width={"200px"}
value={investment.progressValue}
rounded={"10px"}
colorScheme={"green"}
size={'sm'}
/>
</Tooltip>
<Button
// variant='ghost'
w={"100%"}
colorScheme={"gray"}
rounded={"sm"}
size={"sm"}
mt={"20px"}
>
View
</Button>
</CardBody>
</Stack>
</Card>
))}
</Box>
</Box>
);
};