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

portfolio switch btn

Browse Source
This commit is contained in:
YasinShaikh123
2024-09-03 13:14:49 +05:30
parent c2d75c340c
commit 226b8a39bc
2 changed files with 95 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/Pages/Investor_Management/InvestorDetails/Transaction.jsx
View File

@@ -133,10 +133,16 @@ const Transaction = () => {
</Text>
</Box>
),
"Amount": (
Amount: (
<Box w={100} display={"flex"} justifyContent={"right"}>
<Text as={"span"} w={"100%"} color={"teal.900"} display={"flex"} justifyContent={"end"}>
{/* <Badge ms={1} colorScheme="green" me={1}>$</Badge> */}
<Text
as={"span"}
w={"100%"}
color={"teal.900"}
display={"flex"}
justifyContent={"end"}
>
{/* <Badge ms={1} colorScheme="green" me={1}>$</Badge> */}
{parseFloat(item?.investorAmount || 0).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
@@ -158,19 +164,18 @@ const Transaction = () => {
</Text>
),
"USD amount": (
<Box w={100} display={"flex"} justifyContent={"left"}>
{
item?.invCurToUSD_Rate === '0.0000' && (
<Text as={"span"} w={"100%"} color={"teal.900"}>
<Badge ms={1} colorScheme="green" me={1}>$</Badge>
{parseFloat(item?.USDAmount || 0).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}
</Text>
)
}
{item?.invCurToUSD_Rate === "0.0000" && (
<Text as={"span"} w={"100%"} color={"teal.900"}>
<Badge ms={1} colorScheme="green" me={1}>
$
</Badge>
{parseFloat(item?.USDAmount || 0).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}
</Text>
)}
</Box>
),
"IO Name": (
@@ -209,14 +214,22 @@ const Transaction = () => {
),
Transaction: null,
// "Currency": null,
"Amount": (
InvestorWallet?.currencyCode_InCur&&<Box w={100} display={"flex"} justifyContent={"end"}>
<Text as={"span"} textAlign={"right"} w={"100%"} color={"teal.900"} fontWeight={600}>
{/* <Badge ms={1} colorScheme="green" me={1}>$</Badge> */}
{parseFloat(InvestorWallet?.WalletBalance_InInvCur||0).toLocaleString(
undefined,
{ minimumFractionDigits: 2, maximumFractionDigits: 2 }
)}
Amount: InvestorWallet?.currencyCode_InCur && (
<Box w={100} display={"flex"} justifyContent={"end"}>
<Text
as={"span"}
textAlign={"right"}
w={"100%"}
color={"teal.900"}
fontWeight={600}
>
{/* <Badge ms={1} colorScheme="green" me={1}>$</Badge> */}
{parseFloat(
InvestorWallet?.WalletBalance_InInvCur || 0
).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}
<Badge ms={1} colorScheme="green">
{InvestorWallet?.currencyCode_InCur}
</Badge>
@@ -230,7 +243,6 @@ const Transaction = () => {
"Payment Method": null,
};
extractedArray?.push(totalRow);
const handleDelete = () => {
@@ -247,7 +259,7 @@ const Transaction = () => {
};
return (
<Box {...OPACITY_ON_LOAD} height={"100vh"} pb={38}>
<Box {...OPACITY_ON_LOAD} height={"100vh"} pb={38}>
<Box bg="white.500">
<HStack
display={"flex"}

66
src/Pages/Investor_Management/InvestorDetails/ViewInvestorDetails.jsx
View File

@@ -47,6 +47,7 @@ const ViewInvestorDetails = () => {
const [actionId, setActionId] = useState(false);
const [mouseEntered, setMouseEntered] = useState(false);
const [mouseEnteredId, setMouseEnteredId] = useState("");
const [isSwitchOn, setIsSwitchOn] = useState(false);
useEffect(() => {
// Simulate loading
@@ -75,7 +76,6 @@ const ViewInvestorDetails = () => {
// "Action",
];
// ====================================================[Table Filter]================================================================
const filteredData = viewInvestor?.filter((item) => {
// Filter by name (case insensitive)
@@ -118,7 +118,7 @@ const ViewInvestorDetails = () => {
</Box>
),
"Sponsor Name": (
<Box w={"auto"} isTruncated={true}>
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.sponsorName}
</Text>
@@ -127,7 +127,9 @@ const ViewInvestorDetails = () => {
"Investment Amount": (
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
<Badge ms={1} colorScheme="green" me={1}>$</Badge>
<Badge ms={1} colorScheme="green" me={1}>
$
</Badge>
{parseFloat(item?.investedAmount || 0).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
@@ -144,8 +146,10 @@ const ViewInvestorDetails = () => {
),
"Market Value": (
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
<Badge ms={1} colorScheme="green" me={1}>$</Badge>
<Text as={"span"} color={"teal.900"}>
<Badge ms={1} colorScheme="green" me={1}>
$
</Badge>
{parseFloat(item?.MarketValue || 0).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
@@ -163,7 +167,9 @@ const ViewInvestorDetails = () => {
Distribution: (
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
<Badge ms={1} colorScheme="green" me={1}>$</Badge>
<Badge ms={1} colorScheme="green" me={1}>
$
</Badge>
{parseFloat(item?.DistributionAmountReceived || 0).toLocaleString(
undefined,
{
@@ -184,7 +190,9 @@ const ViewInvestorDetails = () => {
"Total return": (
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
<Badge ms={1} colorScheme="green" me={1}>$</Badge>
<Badge ms={1} colorScheme="green" me={1}>
$
</Badge>
{parseFloat(item?.TotalReturn || 0).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
@@ -267,6 +275,10 @@ const ViewInvestorDetails = () => {
setIsLoading(true);
};
const switchOnChangeHandle = () => {
setIsSwitchOn(!isSwitchOn); // Toggle the switch state
};
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
<Box bg="white.500">
@@ -289,7 +301,45 @@ const ViewInvestorDetails = () => {
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
<Box
as="button"
display="flex"
alignItems="center"
justifyContent={isSwitchOn ? "flex-end" : "flex-start"} // Use this if needed
width="155px"
height="30px"
borderRadius="20px"
backgroundColor={isSwitchOn ? "#004118" : "#ef0000"}
onClick={switchOnChangeHandle} // Correct handler name
position="relative"
fontSize="13px"
fontWeight="100"
transition="background-color 0.2s"
_before={{
content: '""',
position: "absolute",
width: "20px",
height: "20px",
borderRadius: "50%",
backgroundColor: "#FFF",
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
transform: isSwitchOn ? "translateX(128px)" : "translateX(0)",
transition: "transform 0.2s",
left: "4px",
}}
>
<Text
fontWeight="400"
zIndex={1}
position="absolute"
mb={0}
color="#fff"
left={isSwitchOn ? "10px" : "auto"}
right={isSwitchOn ? "auto" : "10px"}
>
{isSwitchOn ? "Investor Currency" : "Investor Currency"}
</Text>
</Box>
{/* <HStack display={"flex"} alignItems={"center"}>
<Pagination totalItems={10} />
</HStack> */}