investor portfolio
This commit is contained in:
@@ -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> */}
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user