investor portfolio

This commit is contained in:
YasinShaikh123
2024-09-10 17:55:48 +05:30
parent 8b43ff77a9
commit a53069f6f6
2 changed files with 140 additions and 54 deletions

View File

@@ -21,7 +21,12 @@ import React, { useContext, useEffect, useState } from "react";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import NormalTable from "../../../Components/DataTable/NormalTable";
import { HiDotsVertical } from "react-icons/hi";
import { Link, Navigate, Link as RouterLink, useParams } from "react-router-dom";
import {
Link,
Navigate,
Link as RouterLink,
useParams,
} from "react-router-dom";
import {
AddIcon,
DeleteIcon,
@@ -40,7 +45,7 @@ const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date
const ViewInvestorDetails = () => {
const toast = useToast();
const { viewInvestor, setViewInvestor, slideFromRight } =
const { viewInvestor, setViewInvestor, slideFromRight, InvestorWallet } =
useContext(GlobalStateContext);
const [searchTerm, setSearchTerm] = useState("");
const [isLoading, setIsLoading] = useState(true);
@@ -49,17 +54,15 @@ const ViewInvestorDetails = () => {
const [mouseEntered, setMouseEntered] = useState(false);
const [mouseEnteredId, setMouseEnteredId] = useState("");
const [isSwitchOn, setIsSwitchOn] = useState(false);
// const params = useParams();
// const id = params?.id;
// const { data, errors, refetch} = useGetInvestorsDetailsById_InInvCurQuery(id, {
// skip: !id,
// });
// console.log(data);
const params = useParams();
const id = params?.id;
const { data, errors, refetch } = useGetInvestorsDetailsById_InInvCurQuery(
{ id, currencyIn: !isSwitchOn },
{
skip: !id,
}
);
useEffect(() => {
// Simulate loading
@@ -109,8 +112,6 @@ const ViewInvestorDetails = () => {
return nameMatches;
});
console.log(filteredData);
const extractedArray = filteredData?.map((item, index) => ({
id: item?.id,
"Sr N/O": (
@@ -146,15 +147,34 @@ const ViewInvestorDetails = () => {
</Box>
),
"Investment Amount": (
<Box w={"auto"} isTruncated={true}>
<Box
display={"flex"}
justifyContent={isSwitchOn ? "end" : "start"}
w={"auto"}
isTruncated={true}
>
<Text as={"span"} color={"teal.900"}>
<Badge ms={1} colorScheme="green" me={1}>
$
</Badge>
{parseFloat(item?.investedAmount || 0).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}
{isSwitchOn ? (
<>
{parseFloat(item?.investedAmount || 0).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}
<Badge ms={1} colorScheme="green" me={1}>
{InvestorWallet?.currencyCode_InCur}
</Badge>
</>
) : (
<>
<Badge ms={1} colorScheme="green" me={1}>
$
</Badge>
{parseFloat(item?.investedAmount || 0).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}
</>
)}
</Text>
</Box>
),
@@ -166,15 +186,34 @@ const ViewInvestorDetails = () => {
</Box>
),
"Market Value": (
<Box w={"auto"} isTruncated={true}>
<Box
display={"flex"}
justifyContent={isSwitchOn ? "end" : "start"}
w={"auto"}
isTruncated={true}
>
<Text as={"span"} color={"teal.900"}>
<Badge ms={1} colorScheme="green" me={1}>
$
</Badge>
{parseFloat(item?.MarketValue || 0).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}
{isSwitchOn ? (
<>
{parseFloat(item?.MarketValue || 0).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}
<Badge ms={1} colorScheme="green" me={1}>
{InvestorWallet?.currencyCode_InCur}
</Badge>
</>
) : (
<>
<Badge ms={1} colorScheme="green" me={1}>
$
</Badge>
{parseFloat(item?.MarketValue || 0).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}
</>
)}
</Text>
</Box>
),
@@ -186,17 +225,39 @@ const ViewInvestorDetails = () => {
</Box>
),
Distribution: (
<Box w={"auto"} isTruncated={true}>
<Box
display={"flex"}
justifyContent={isSwitchOn ? "end" : "start"}
w={"auto"}
isTruncated={true}
>
<Text as={"span"} color={"teal.900"}>
<Badge ms={1} colorScheme="green" me={1}>
$
</Badge>
{parseFloat(item?.DistributionAmountReceived || 0).toLocaleString(
undefined,
{
minimumFractionDigits: 2,
maximumFractionDigits: 2,
}
{isSwitchOn ? (
<>
{parseFloat(item?.DistributionAmountReceived || 0).toLocaleString(
undefined,
{
minimumFractionDigits: 2,
maximumFractionDigits: 2,
}
)}
<Badge ms={1} colorScheme="green" me={1}>
{InvestorWallet?.currencyCode_InCur}
</Badge>
</>
) : (
<>
<Badge ms={1} colorScheme="green" me={1}>
$
</Badge>
{parseFloat(item?.DistributionAmountReceived || 0).toLocaleString(
undefined,
{
minimumFractionDigits: 2,
maximumFractionDigits: 2,
}
)}
</>
)}
</Text>
</Box>
@@ -209,15 +270,34 @@ const ViewInvestorDetails = () => {
</Box>
),
"Total return": (
<Box w={"auto"} isTruncated={true}>
<Box
display={"flex"}
justifyContent={isSwitchOn ? "end" : "start"}
w={"auto"}
isTruncated={true}
>
<Text as={"span"} color={"teal.900"}>
<Badge ms={1} colorScheme="green" me={1}>
$
</Badge>
{parseFloat(item?.TotalReturn || 0).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}
{isSwitchOn ? (
<>
{parseFloat(item?.TotalReturn || 0).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}
<Badge ms={1} colorScheme="green" me={1}>
{InvestorWallet?.currencyCode_InCur}
</Badge>
</>
) : (
<>
<Badge ms={1} colorScheme="green" me={1}>
$
</Badge>
{parseFloat(item?.TotalReturn || 0).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}
</>
)}
</Text>
</Box>
),
@@ -298,6 +378,7 @@ const ViewInvestorDetails = () => {
const switchOnChangeHandle = () => {
setIsSwitchOn(!isSwitchOn); // Toggle the switch state
setViewInvestor(data?.data?.portfolio);
};
return (
@@ -322,7 +403,7 @@ const ViewInvestorDetails = () => {
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
{/* <Box
<Box
as="button"
display="flex"
alignItems="center"
@@ -360,7 +441,7 @@ const ViewInvestorDetails = () => {
>
{isSwitchOn ? "Investor Currency" : "Investor Currency"}
</Text>
</Box> */}
</Box>
{/* <HStack display={"flex"} alignItems={"center"}>
<Pagination totalItems={10} />
</HStack> */}

View File

@@ -25,13 +25,18 @@ export const investorDetails = createApi({
// =====[get investment details ]
getInvestorsDetailsById_InInvCur: builder.query({
query: (id) => `/investorDetails/admin/byId/${id}?currencyIn=InvCur`,
query: ({ id, currencyIn }) =>
currencyIn
? `/investorDetails/admin/byId/${id}?currencyIn=InvCur`
: `/investorDetails/admin/byId/${id}`,
providesTags: ["getInvestors"],
}),
}),
});
// Export hooks for usage in functional components
export const { useGetInvestorsQuery, useGetInvestorsDetailsByIdQuery,useGetInvestorsDetailsById_InInvCurQuery } =
investorDetails;
export const {
useGetInvestorsQuery,
useGetInvestorsDetailsByIdQuery,
useGetInvestorsDetailsById_InInvCurQuery,
} = investorDetails;