529 lines
14 KiB
JavaScript
529 lines
14 KiB
JavaScript
import {
|
|
Avatar,
|
|
Badge,
|
|
Box,
|
|
Button,
|
|
HStack,
|
|
Icon,
|
|
Input,
|
|
Menu,
|
|
MenuButton,
|
|
MenuItem,
|
|
MenuList,
|
|
Portal,
|
|
Select,
|
|
Switch,
|
|
Table,
|
|
Tag,
|
|
Tbody,
|
|
Text,
|
|
Th,
|
|
Thead,
|
|
Tooltip,
|
|
Tr,
|
|
keyframes,
|
|
useToast,
|
|
} from "@chakra-ui/react";
|
|
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, Link as RouterLink, useParams } from "react-router-dom";
|
|
import Pagination from "../../../Components/Pagination";
|
|
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
|
|
import CustomAlertDialog from "../../../Components/CustomAlertDialog";
|
|
import ToastBox from "../../../Components/ToastBox";
|
|
import { debounce } from "../../Master/Sponser/AddSponser";
|
|
import { formatCurrency } from "../../../Components/CurrencyInput";
|
|
import { FiRefreshCw } from "react-icons/fi";
|
|
import { useGetIOByIdQuery } from "../../../Services/io.service";
|
|
import { RepeatIcon } from "@chakra-ui/icons";
|
|
|
|
const rotate = keyframes`
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
`;
|
|
|
|
const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
|
|
|
|
const Investors = ({ data }) => {
|
|
const params = useParams();
|
|
const id = params?.id;
|
|
const toast = useToast();
|
|
const { investors, setInvestors, slideFromRight, IODetails } =
|
|
useContext(GlobalStateContext);
|
|
|
|
const [isRefetchLoading, setIsRefetchLoading] = useState(false);
|
|
|
|
const { isLoading: IObyIDisLoading, refetch } = useGetIOByIdQuery(id, {
|
|
skip: !id,
|
|
});
|
|
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [deleteAlert, setDeleteAlert] = useState(false);
|
|
const [actionId, setActionId] = useState(false);
|
|
const [mouseEntered, setMouseEntered] = useState(false);
|
|
const [mouseEnteredId, setMouseEnteredId] = useState("");
|
|
|
|
useEffect(() => {
|
|
// Simulate loading
|
|
const timer = setTimeout(() => {
|
|
setIsLoading(false);
|
|
}, 1500);
|
|
|
|
// Cleanup the timer on component unmount
|
|
return () => clearTimeout(timer);
|
|
}, []);
|
|
|
|
// Calculate totals
|
|
const totalInvestedAmount = investors.reduce(
|
|
(acc, investor) => acc + investor.investedAmount,
|
|
0
|
|
);
|
|
const totalMarketValue = investors.reduce(
|
|
(acc, investor) => acc + investor.marketValue,
|
|
0
|
|
);
|
|
const totalDistribution = investors.reduce(
|
|
(acc, investor) => acc + investor.distribution,
|
|
0
|
|
);
|
|
const totalTotalReturn = investors.reduce(
|
|
(acc, investor) => acc + investor.totalReturn,
|
|
0
|
|
);
|
|
|
|
// Table setup
|
|
const tableHeadRow = [
|
|
"Client ID",
|
|
"First name",
|
|
"Last name",
|
|
"Investment amount",
|
|
"Percentage",
|
|
"Market Value",
|
|
"Return on Investment",
|
|
"Distribution",
|
|
"Distribution Percent",
|
|
"Total Return",
|
|
"Total return on Investment",
|
|
];
|
|
|
|
const handleUpdateStatus = debounce((id) => {
|
|
setInvestors((prevSponser) =>
|
|
prevSponser.map((sponsor) =>
|
|
sponsor.id === id ? { ...sponsor, status: !sponsor.status } : sponsor
|
|
)
|
|
);
|
|
toast({
|
|
render: () => <ToastBox message={"Status changed succesfully.!"} />,
|
|
});
|
|
}, 300);
|
|
|
|
// Table filter
|
|
const filteredData = IODetails?.investors?.filter((item) => {
|
|
const name = item.firstName;
|
|
const searchLower = searchTerm.toLowerCase();
|
|
const nameMatches = name.toLowerCase().includes(searchLower);
|
|
return nameMatches;
|
|
});
|
|
|
|
const extractedArray = filteredData?.map((item, index) => ({
|
|
id: item?.id,
|
|
"Client ID": (
|
|
<Text
|
|
justifyContent={slideFromRight ? "right" : "center"}
|
|
as={"span"}
|
|
color={"teal.900"}
|
|
fontWeight={"500"}
|
|
className="d-flex align-items-center web-text-small"
|
|
>
|
|
{item?.clientReference_id}
|
|
</Text>
|
|
),
|
|
"First name": (
|
|
<Text
|
|
justifyContent={slideFromRight ? "right" : "center"}
|
|
as={"span"}
|
|
color={"teal.900"}
|
|
fontWeight={"500"}
|
|
className="d-flex align-items-center web-text-small"
|
|
>
|
|
{item.firstName}
|
|
</Text>
|
|
),
|
|
"Last name": (
|
|
<Text
|
|
justifyContent={slideFromRight ? "right" : "center"}
|
|
as={"span"}
|
|
color={"teal.900"}
|
|
fontWeight={"500"}
|
|
className="d-flex align-items-center web-text-small"
|
|
>
|
|
{item.lastName}
|
|
</Text>
|
|
),
|
|
"Investment amount": (
|
|
<Text
|
|
justifyContent={slideFromRight ? "right" : "left"}
|
|
as={"span"}
|
|
color={"teal.900"}
|
|
fontWeight={"500"}
|
|
className="d-flex align-items-center web-text-small"
|
|
>
|
|
<Badge ms={1} colorScheme="green" me={1}>
|
|
$
|
|
</Badge>
|
|
{/* {`$${formatCurrency(item.InvestedAmount_USD)}`} */}
|
|
{`${parseFloat(item.InvestedAmount_USD || 0).toLocaleString(undefined, {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2,
|
|
})}`}
|
|
</Text>
|
|
),
|
|
Percentage: (
|
|
<Text
|
|
justifyContent={slideFromRight ? "right" : "center"}
|
|
as={"span"}
|
|
color={"teal.900"}
|
|
fontWeight={"500"}
|
|
className="d-flex align-items-center web-text-small"
|
|
>
|
|
{item.Investor_Holidings} %
|
|
</Text>
|
|
),
|
|
"Market Value": (
|
|
<Text
|
|
justifyContent={slideFromRight ? "right" : "left"}
|
|
as={"span"}
|
|
color={"teal.900"}
|
|
fontWeight={"500"}
|
|
className="d-flex align-items-center web-text-small"
|
|
>
|
|
<Badge ms={1} colorScheme="green" me={1}>
|
|
$
|
|
</Badge>
|
|
{`${parseFloat(item.Market_Value || 0).toLocaleString(undefined, {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2,
|
|
})}`}
|
|
</Text>
|
|
),
|
|
"Return on Investment": (
|
|
<Text
|
|
justifyContent={slideFromRight ? "right" : "center"}
|
|
as={"span"}
|
|
color={"teal.900"}
|
|
fontWeight={"500"}
|
|
h={6}
|
|
className="d-flex align-items-center web-text-small"
|
|
>
|
|
{item.Return_On_Investment || 0} %
|
|
</Text>
|
|
),
|
|
Distribution: (
|
|
<Text
|
|
justifyContent={slideFromRight ? "right" : "left"}
|
|
as={"span"}
|
|
color={"teal.900"}
|
|
fontWeight={"500"}
|
|
className="d-flex align-items-center web-text-small"
|
|
>
|
|
<Badge ms={1} colorScheme="green" me={1}>
|
|
$
|
|
</Badge>
|
|
{/* {`$${item.Distribution_Amt}`} */}
|
|
{`${parseFloat(item.Distribution_Amt || 0).toLocaleString(undefined, {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2,
|
|
})}`}
|
|
</Text>
|
|
),
|
|
"Distribution Percent": (
|
|
<Text
|
|
justifyContent={slideFromRight ? "right" : "center"}
|
|
as={"span"}
|
|
color={"teal.900"}
|
|
fontWeight={"500"}
|
|
className="d-flex align-items-center web-text-small"
|
|
>
|
|
{/* {`$${item.Distribution_Amt}`} */}
|
|
{`${parseFloat(item.Distribution_Per || 0).toLocaleString(undefined, {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2,
|
|
})} %`}
|
|
</Text>
|
|
),
|
|
"Total Return": (
|
|
<Text
|
|
justifyContent={slideFromRight ? "right" : "left"}
|
|
as={"span"}
|
|
color={"teal.900"}
|
|
fontWeight={"500"}
|
|
className="d-flex align-items-center web-text-small"
|
|
>
|
|
<Badge ms={1} colorScheme="green" me={1}>
|
|
$
|
|
</Badge>
|
|
{/* {`$${formatCurrency(item.Total_Return) || 0}`} */}
|
|
{`${parseFloat(item.Total_Return || 0).toLocaleString(undefined, {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2,
|
|
})}`}
|
|
</Text>
|
|
),
|
|
"Total return on Investment": (
|
|
<Text
|
|
justifyContent={slideFromRight ? "right" : "center"}
|
|
as={"span"}
|
|
color={"teal.900"}
|
|
fontWeight={"500"}
|
|
className="d-flex align-items-center web-text-small"
|
|
>
|
|
{item.Total_Return_On_Investment || 0} %
|
|
</Text>
|
|
),
|
|
}));
|
|
|
|
const handleDelete = () => {
|
|
const updatedSponsors = sponser.filter(
|
|
(sponsor) => sponsor.id !== actionId
|
|
);
|
|
|
|
setTimeout(() => {
|
|
setInvestors(updatedSponsors);
|
|
setDeleteAlert(false);
|
|
setIsLoading(false);
|
|
}, 100);
|
|
setIsLoading(true);
|
|
};
|
|
|
|
const Total = () => {
|
|
return (
|
|
<Table size="sm">
|
|
<Tbody backgroundColor="gray.50">
|
|
<Tr>
|
|
<Th
|
|
textAlign={"center"}
|
|
p={3}
|
|
width="100px"
|
|
color={"#004118"}
|
|
whiteSpace="normal"
|
|
wordBreak="normal"
|
|
overflowWrap="normal"
|
|
>
|
|
Total
|
|
</Th>
|
|
<Th
|
|
textAlign={"center"}
|
|
p={3}
|
|
width="100px"
|
|
color={"#004118"}
|
|
whiteSpace="normal"
|
|
wordBreak="normal"
|
|
overflowWrap="normal"
|
|
>
|
|
{" "}
|
|
</Th>
|
|
<Th
|
|
textAlign={"center"}
|
|
p={3}
|
|
width="100px"
|
|
color={"#004118"}
|
|
whiteSpace="normal"
|
|
wordBreak="normal"
|
|
overflowWrap="normal"
|
|
>
|
|
{" "}
|
|
</Th>
|
|
<Th
|
|
textAlign={"center"}
|
|
p={3}
|
|
width="100px"
|
|
color={"#004118"}
|
|
whiteSpace="normal"
|
|
wordBreak="normal"
|
|
overflowWrap="normal"
|
|
>
|
|
{`$${totalInvestedAmount}`}
|
|
</Th>
|
|
<Th
|
|
textAlign={"center"}
|
|
p={3}
|
|
width="100px"
|
|
color={"#004118"}
|
|
whiteSpace="normal"
|
|
wordBreak="normal"
|
|
overflowWrap="normal"
|
|
>
|
|
{" "}
|
|
</Th>
|
|
<Th
|
|
textAlign={"center"}
|
|
p={3}
|
|
width="100px"
|
|
color={"#004118"}
|
|
whiteSpace="normal"
|
|
wordBreak="normal"
|
|
overflowWrap="normal"
|
|
>
|
|
{`$${totalMarketValue}`}
|
|
</Th>
|
|
<Th
|
|
textAlign={"center"}
|
|
p={3}
|
|
width="100px"
|
|
color={"#004118"}
|
|
whiteSpace="normal"
|
|
wordBreak="normal"
|
|
overflowWrap="normal"
|
|
>
|
|
{" "}
|
|
</Th>
|
|
<Th
|
|
textAlign={"center"}
|
|
p={3}
|
|
width="100px"
|
|
color={"#004118"}
|
|
whiteSpace="normal"
|
|
wordBreak="normal"
|
|
overflowWrap="normal"
|
|
>
|
|
{`$${totalDistribution}`}
|
|
</Th>
|
|
<Th
|
|
textAlign={"center"}
|
|
p={3}
|
|
width="100px"
|
|
color={"#004118"}
|
|
whiteSpace="normal"
|
|
wordBreak="normal"
|
|
overflowWrap="normal"
|
|
>
|
|
{`$${totalTotalReturn}`}
|
|
</Th>
|
|
<Th
|
|
textAlign={"center"}
|
|
p={3}
|
|
width="100px"
|
|
color={"#004118"}
|
|
whiteSpace="normal"
|
|
wordBreak="normal"
|
|
overflowWrap="normal"
|
|
>
|
|
{" "}
|
|
</Th>
|
|
</Tr>
|
|
</Tbody>
|
|
</Table>
|
|
);
|
|
};
|
|
|
|
const handleRefresh = async () => {
|
|
setIsRefetchLoading(true);
|
|
|
|
await refetch();
|
|
setIsRefetchLoading(false);
|
|
};
|
|
|
|
return (
|
|
<Box {...OPACITY_ON_LOAD} pb={0}>
|
|
<Box bg="white.500">
|
|
<HStack
|
|
display={"flex"}
|
|
justifyContent={"space-between"}
|
|
pb={3}
|
|
spacing="24px"
|
|
>
|
|
<span>
|
|
<Input
|
|
type="search"
|
|
width={300}
|
|
placeholder="Search..."
|
|
size="sm"
|
|
rounded="sm"
|
|
focusBorderColor="green.500"
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
/>
|
|
<Box as="span">
|
|
<Icon
|
|
ms={3}
|
|
animation={
|
|
isRefetchLoading ? `${rotate} 1s linear infinite` : "none"
|
|
}
|
|
bg={"gray.50"}
|
|
onClick={handleRefresh}
|
|
fontWeight={600}
|
|
as={RepeatIcon}
|
|
boxSize={8}
|
|
p={2}
|
|
rounded={"full"}
|
|
_hover={{ bg: "gray.100" }}
|
|
cursor={"pointer"}
|
|
/>
|
|
</Box>
|
|
</span>
|
|
|
|
<HStack
|
|
bg={"#C6F6D5"}
|
|
ps={4}
|
|
pe={4}
|
|
pt={1.5}
|
|
pb={1.5}
|
|
rounded={"md"}
|
|
boxShadow={"sm"}
|
|
display={"flex"}
|
|
// alignItems={"end"}
|
|
// flexDirection={"column"}
|
|
alignItems={"center"}
|
|
>
|
|
<Text
|
|
fontWeight={600}
|
|
color={"gray.500"}
|
|
fontSize={"xs"}
|
|
as={"span"}
|
|
>
|
|
Total Investment Amount ( USD )
|
|
</Text>
|
|
|
|
<Text display={'flex'} alignItems={'center'} fontWeight={600} fontSize={"sm"} as={"span"} pt={"2px"}>
|
|
<Badge p={1} ms={2} fontSize={'md'} colorScheme="green" me={0}>
|
|
$
|
|
</Badge>
|
|
{parseFloat(IODetails?.totalAmtInvestmentInUSD).toLocaleString()}
|
|
</Text>
|
|
</HStack>
|
|
</HStack>
|
|
</Box>
|
|
|
|
<NormalTable
|
|
centered={true}
|
|
emptyMessage={`We don't have any Sponers `}
|
|
tableHeadRow={tableHeadRow}
|
|
data={extractedArray}
|
|
isLoading={isLoading}
|
|
viewActionId={actionId}
|
|
setViewActionId={setActionId}
|
|
caption={<Total />}
|
|
setMouseEnteredId={setMouseEnteredId}
|
|
setMouseEntered={setMouseEntered}
|
|
/>
|
|
|
|
<CustomAlertDialog
|
|
onClose={() => setDeleteAlert(false)}
|
|
isOpen={deleteAlert}
|
|
message={"Are you sure you want to delete sponers?"}
|
|
alertHandler={handleDelete}
|
|
isLoading={isLoading}
|
|
/>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default Investors;
|