investor details
This commit is contained in:
YasinShaikh123
@@ -520,7 +520,7 @@ const GlobalStateProvider = ({ children }) => {
|
||||
rate: 2.66,
|
||||
},
|
||||
]);
|
||||
const [InvestorDetails, setInvestorDetails] = useState([
|
||||
const [InvestorDetails, setInvestorDetails] = useState([
|
||||
{
|
||||
id: 1,
|
||||
clientId: "SA00000001",
|
||||
@@ -745,6 +745,104 @@ const GlobalStateProvider = ({ children }) => {
|
||||
kycStatus: "Closed",
|
||||
},
|
||||
]);
|
||||
const [transaction, setTransaction] = useState([
|
||||
{
|
||||
id: 1,
|
||||
date: "2-Jan-24",
|
||||
transaction: "Deposit",
|
||||
currency: "BHD",
|
||||
amount: "12000.00",
|
||||
fromUSD: "",
|
||||
toUSD: "2.6376",
|
||||
USDamount: "31,651.20",
|
||||
IOName:"",
|
||||
paymentMethod:"Bank"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
date: "6-Jan-24",
|
||||
transaction: "Invested",
|
||||
currency: "BHD",
|
||||
amount: "-4000.00",
|
||||
fromUSD: "",
|
||||
toUSD: "2.6376",
|
||||
USDamount: "-10,550.40",
|
||||
IOName:"KKR Private Equity Fund",
|
||||
paymentMethod:"-"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
date: "7-Jan-24",
|
||||
transaction: "Deposit",
|
||||
currency: "BHD",
|
||||
amount: "4000.00",
|
||||
fromUSD: "",
|
||||
toUSD: "2.6376",
|
||||
USDamount: "10,550.40",
|
||||
IOName:"-",
|
||||
paymentMethod:"Apple Pay"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
date: "8-Jan-24",
|
||||
transaction: "Invested",
|
||||
currency: "BHD",
|
||||
amount: "-3000.00",
|
||||
fromUSD: "",
|
||||
toUSD: "2.6376",
|
||||
USDamount: "-7,912.80",
|
||||
IOName:"Black Stone Real Estate Income Trust",
|
||||
paymentMethod:"-"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
date: "2-Jan-24",
|
||||
transaction: "Deposit",
|
||||
currency: "BHD",
|
||||
amount: "12000.00",
|
||||
fromUSD: "0.3747",
|
||||
toUSD: "",
|
||||
USDamount: "31,651.20",
|
||||
IOName:"KKR Private Equity Fund",
|
||||
paymentMethod:"-"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
date: "2-Jan-24",
|
||||
transaction: "Deposit",
|
||||
currency: "BHD",
|
||||
amount: "12000.00",
|
||||
fromUSD: "0.3747",
|
||||
toUSD: "",
|
||||
USDamount: "31,651.20",
|
||||
IOName:"Black Stone Real Estate Income Trust",
|
||||
paymentMethod:"-"
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
date: "2-Jan-24",
|
||||
transaction: "Deposit",
|
||||
currency: "BHD",
|
||||
amount: "12000.00",
|
||||
fromUSD: "0.3747",
|
||||
toUSD: "",
|
||||
USDamount: "31,651.20",
|
||||
IOName:"KKR Private Equity Fund",
|
||||
paymentMethod:"-"
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
date: "2-Jan-24",
|
||||
transaction: "Deposit",
|
||||
currency: "BHD",
|
||||
amount: "12000.00",
|
||||
fromUSD: "",
|
||||
toUSD: "2.6376",
|
||||
USDamount: "31,651.20",
|
||||
IOName:"",
|
||||
paymentMethod:"Bank"
|
||||
},
|
||||
]);
|
||||
|
||||
const [investorTransaction, setInvestorTransaction] = useState([
|
||||
{
|
||||
@@ -1681,6 +1779,8 @@ const GlobalStateProvider = ({ children }) => {
|
||||
setCaseDetails,
|
||||
viewInvestor,
|
||||
setViewInvestor,
|
||||
transaction,
|
||||
setTransaction,
|
||||
depositRequest,
|
||||
setDepositRequest,
|
||||
depositHistory,
|
||||
|
||||
@@ -18,11 +18,11 @@ import {
|
||||
useDisclosure,
|
||||
useToast,
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useContext, useEffect, useState,useRef } from "react";
|
||||
import React, { useContext, useEffect, useState, useRef } from "react";
|
||||
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
|
||||
import DataTable from "../../../Components/DataTable/DataTable";
|
||||
import { HiDotsVertical } from "react-icons/hi";
|
||||
import { Link, Link as RouterLink,useNavigate } from "react-router-dom";
|
||||
import { Link, Link as RouterLink, useNavigate } from "react-router-dom";
|
||||
import {
|
||||
AddIcon,
|
||||
DeleteIcon,
|
||||
@@ -52,15 +52,21 @@ const InvestorDetails = () => {
|
||||
const [actionId, setActionId] = useState(false);
|
||||
const [mouseEntered, setMouseEntered] = useState(false);
|
||||
const [mouseEnteredId, setMouseEnteredId] = useState("");
|
||||
const {isOpen: isEditOpen,onOpen: onEditOpen,onClose: onEditClose,} = useDisclosure();
|
||||
const btnRef = React.useRef()
|
||||
const {
|
||||
isOpen: isEditOpen,
|
||||
onOpen: onEditOpen,
|
||||
onClose: onEditClose,
|
||||
} = useDisclosure();
|
||||
const btnRef = React.useRef();
|
||||
|
||||
const {
|
||||
data: investorDetails,
|
||||
isLoading: investorDetailsLoading,
|
||||
error,
|
||||
} = useGetInvestorsQuery({ page: 1, size: 10 });
|
||||
|
||||
const {data: investorDetails,isLoading: investorDetailsLoading,error,} = useGetInvestorsQuery({ page: 1, size: 10 });
|
||||
|
||||
console.log(investorDetails);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
// Simulate loading
|
||||
const timer = setTimeout(() => {
|
||||
@@ -140,60 +146,68 @@ const InvestorDetails = () => {
|
||||
"First Name": (
|
||||
<Box w={"auto"} isTruncated={true}>
|
||||
<Text as={"span"} color={"teal.900"}>
|
||||
{item.firstName}
|
||||
{item?.principal?.firstName}
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
"Last Name": (
|
||||
<Box w={"auto"} isTruncated={true}>
|
||||
<Text as={"span"} color={"teal.900"}>
|
||||
{item.lastName}
|
||||
{item?.principal?.lastName}
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
Country: (
|
||||
<Box w={"auto"} isTruncated={true}>
|
||||
<Text as={"span"} color={"teal.900"}>
|
||||
{item.countryName}
|
||||
{item?.country?.countryName}
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
"Phone Number": (
|
||||
<Box w={"auto"} isTruncated={true}>
|
||||
<Text as={"span"} color={"teal.900"}>
|
||||
{item.mobileNumber}
|
||||
{item?.principal?.mobileNumber}
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
"E-mail ID": (
|
||||
<Box w={"auto"} isTruncated={true}>
|
||||
<Text as={"span"} color={"teal.900"}>
|
||||
{item.emailAddress}
|
||||
{item?.principal?.emailAddress}
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
"Investor Type": (
|
||||
<Box w={"auto"} isTruncated={true}>
|
||||
<Text as={"span"} color={"teal.900"}>
|
||||
<Badge fontWeight={'500'} px={2} py={0.5}>{item.investorTypeName}</Badge>
|
||||
<Badge fontWeight={"500"} px={2} py={0.5}>
|
||||
{item?.investor_type?.investorTypeName}
|
||||
</Badge>
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
"KYC Status": (
|
||||
<Box w={"auto"} isTruncated={true}>
|
||||
<Badge fontWeight={'500'} textTransform={'none'} color={item.kycStatus === "Completed" ? "blue" : "red"} px={2} py={0.5}>
|
||||
<Badge
|
||||
fontWeight={"500"}
|
||||
textTransform={"none"}
|
||||
color={item.kycStatus === "Completed" ? "blue" : "red"}
|
||||
px={2}
|
||||
py={0.5}
|
||||
>
|
||||
{item.KYCStatus}
|
||||
</Badge>
|
||||
</Box>
|
||||
),
|
||||
// Status: (
|
||||
// <Switch
|
||||
// size={"sm"}
|
||||
// colorScheme="forestGreen"
|
||||
// onChange={() => handleUpdateStatus(item.id)}
|
||||
// isChecked={item.status}
|
||||
// />
|
||||
// ),
|
||||
Status: (
|
||||
<Switch
|
||||
size={"sm"}
|
||||
colorScheme="forestGreen"
|
||||
onChange={() => handleUpdateStatus(item.id)}
|
||||
isChecked={item.userStatus}
|
||||
/>
|
||||
),
|
||||
Action: (
|
||||
<Box display={"flex"} justifyContent={"space-between"} gap={2}>
|
||||
<Tooltip
|
||||
@@ -252,7 +266,7 @@ const InvestorDetails = () => {
|
||||
spacing="24px"
|
||||
>
|
||||
<Input
|
||||
mt={1}
|
||||
mt={1}
|
||||
type="search"
|
||||
width={300}
|
||||
placeholder="Search..."
|
||||
@@ -263,45 +277,79 @@ const InvestorDetails = () => {
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
|
||||
|
||||
<HStack className="col" display={"flex"} alignItems={"center"}>
|
||||
<Select focusBorderColor="green.500" size={'sm'} fontSize={'xs'} cursor={'pointer'}>
|
||||
<option value="" selected disabled hidden>Status</option>
|
||||
|
||||
<Select
|
||||
focusBorderColor="green.500"
|
||||
size={"sm"}
|
||||
fontSize={"xs"}
|
||||
cursor={"pointer"}
|
||||
>
|
||||
<option value="" selected disabled hidden>
|
||||
Status
|
||||
</option>
|
||||
|
||||
<option value="all">All</option>
|
||||
<option value="ban">Ban</option>
|
||||
<option value="unban">UnBan</option>
|
||||
</Select>
|
||||
<Select focusBorderColor="green.500" size={'sm'} fontSize={'xs'} cursor={'pointer'}>
|
||||
<option value="" selected disabled hidden>Status</option>
|
||||
|
||||
<option value="all">All</option>
|
||||
<option value="ban">Ban</option>
|
||||
<option value="unban">UnBan</option>
|
||||
</Select>
|
||||
<Select focusBorderColor="green.500" size={'sm'} fontSize={'xs'} cursor={'pointer'}>
|
||||
<option value="" selected disabled hidden>Status</option>
|
||||
|
||||
<Select
|
||||
focusBorderColor="green.500"
|
||||
size={"sm"}
|
||||
fontSize={"xs"}
|
||||
cursor={"pointer"}
|
||||
>
|
||||
<option value="" selected disabled hidden>
|
||||
Status
|
||||
</option>
|
||||
|
||||
<option value="all">All</option>
|
||||
<option value="ban">Ban</option>
|
||||
<option value="unban">UnBan</option>
|
||||
</Select>
|
||||
|
||||
<Select focusBorderColor="green.500" size={'sm'} fontSize={'xs'} cursor={'pointer'}>
|
||||
<option value="" selected disabled hidden>KYC Status</option>
|
||||
<Select
|
||||
focusBorderColor="green.500"
|
||||
size={"sm"}
|
||||
fontSize={"xs"}
|
||||
cursor={"pointer"}
|
||||
>
|
||||
<option value="" selected disabled hidden>
|
||||
Status
|
||||
</option>
|
||||
|
||||
<option value="all">All</option>
|
||||
<option value="ban">Ban</option>
|
||||
<option value="unban">UnBan</option>
|
||||
</Select>
|
||||
|
||||
<Select
|
||||
focusBorderColor="green.500"
|
||||
size={"sm"}
|
||||
fontSize={"xs"}
|
||||
cursor={"pointer"}
|
||||
>
|
||||
<option value="" selected disabled hidden>
|
||||
KYC Status
|
||||
</option>
|
||||
<option value="all">All</option>
|
||||
<option value="completed">Completed</option>
|
||||
<option value="incompleted">Incompleted</option>
|
||||
</Select>
|
||||
|
||||
<Select focusBorderColor="green.500" size={'sm'} fontSize={'xs'} cursor={'pointer'}>
|
||||
<option value="" selected disabled hidden>Country</option>
|
||||
<option value="behrain">Behrain</option>
|
||||
<option value="kuwait">Kuwait</option>
|
||||
<option value="oman">Oman</option>
|
||||
<option value="saudi arabia">Saudi arabia</option>
|
||||
<option value="united arab emirates">United arab emirates</option>
|
||||
</Select>
|
||||
|
||||
<Select
|
||||
focusBorderColor="green.500"
|
||||
size={"sm"}
|
||||
fontSize={"xs"}
|
||||
cursor={"pointer"}
|
||||
>
|
||||
<option value="" selected disabled hidden>
|
||||
Country
|
||||
</option>
|
||||
<option value="behrain">Behrain</option>
|
||||
<option value="kuwait">Kuwait</option>
|
||||
<option value="oman">Oman</option>
|
||||
<option value="saudi arabia">Saudi arabia</option>
|
||||
<option value="united arab emirates">United arab emirates</option>
|
||||
</Select>
|
||||
<Pagination totalItems={10} />
|
||||
</HStack>
|
||||
</HStack>
|
||||
|
||||
@@ -18,6 +18,7 @@ import GlobalStateContext from "../../../Contexts/GlobalStateContext";
|
||||
import FormInputView from "../../../Components/FormInputView";
|
||||
import ViewInvestorDetails from "./ViewInvestorDetails";
|
||||
import { LuWallet } from "react-icons/lu";
|
||||
import Transaction from "./Transaction";
|
||||
|
||||
const ProfileView = () => {
|
||||
const navigate = useNavigate();
|
||||
@@ -151,40 +152,52 @@ const ProfileView = () => {
|
||||
width={"auto"}
|
||||
fontSize={"sm"}
|
||||
as="span"
|
||||
boxShadow={'lg'}
|
||||
rounded={'md'}
|
||||
bg={'#EAF2EC'}
|
||||
boxShadow={"lg"}
|
||||
rounded={"md"}
|
||||
bg={"#EAF2EC"}
|
||||
>
|
||||
<Icon color={'#004717'} boxSize={8} as={LuWallet} />
|
||||
<Icon color={"#004717"} boxSize={8} as={LuWallet} />
|
||||
|
||||
<Box display={'flex'} flexDirection={'column'} as="span">
|
||||
<Text as={'span'} color={"#6F6F6F"} fontSize={'10px'}>Amount</Text>
|
||||
<Box as="span" gap={2} alignItems={'center'} fontSize={'sm'} display={'flex'} >
|
||||
<Text fontWeight={500} as={'span'}>26,763.40</Text>
|
||||
<Badge display={'flex'} alignItems={'center'}>USD</Badge>
|
||||
<Box display={"flex"} flexDirection={"column"} as="span">
|
||||
<Text as={"span"} color={"#6F6F6F"} fontSize={"10px"}>
|
||||
Amount
|
||||
</Text>
|
||||
<Box
|
||||
as="span"
|
||||
gap={2}
|
||||
alignItems={"center"}
|
||||
fontSize={"sm"}
|
||||
display={"flex"}
|
||||
>
|
||||
<Text fontWeight={500} as={"span"}>
|
||||
26,763.40
|
||||
</Text>
|
||||
<Badge display={"flex"} alignItems={"center"}>
|
||||
USD
|
||||
</Badge>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
|
||||
<Box display={'flex'} flexDirection={'column'} as="span">
|
||||
<Text as={'span'} color={"#6F6F6F"} fontSize={'10px'}>Investor Currency</Text>
|
||||
<Box as="span" gap={2} alignItems={'center'} fontSize={'sm'} display={'flex'} >
|
||||
<Text fontWeight={500} as={'span'}>10,075.01</Text>
|
||||
<Badge display={'flex'} alignItems={'center'}>BHD</Badge>
|
||||
<Box display={"flex"} flexDirection={"column"} as="span">
|
||||
<Text as={"span"} color={"#6F6F6F"} fontSize={"10px"}>
|
||||
Investor Currency
|
||||
</Text>
|
||||
<Box
|
||||
as="span"
|
||||
gap={2}
|
||||
alignItems={"center"}
|
||||
fontSize={"sm"}
|
||||
display={"flex"}
|
||||
>
|
||||
<Text fontWeight={500} as={"span"}>
|
||||
10,075.01
|
||||
</Text>
|
||||
<Badge display={"flex"} alignItems={"center"}>
|
||||
BHD
|
||||
</Badge>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
|
||||
|
||||
|
||||
</Box>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</Box>
|
||||
<Tabs mt={0}>
|
||||
<Box>
|
||||
@@ -210,7 +223,25 @@ const ProfileView = () => {
|
||||
borderBottom: "2px solid #38a169",
|
||||
}}
|
||||
>
|
||||
Invested Property
|
||||
Portfolio
|
||||
</Tab>
|
||||
<Tab
|
||||
fontSize={"sm"}
|
||||
_selected={{
|
||||
color: "#004118",
|
||||
borderBottom: "2px solid #38a169",
|
||||
}}
|
||||
>
|
||||
Transaction
|
||||
</Tab>
|
||||
<Tab
|
||||
fontSize={"sm"}
|
||||
_selected={{
|
||||
color: "#004118",
|
||||
borderBottom: "2px solid #38a169",
|
||||
}}
|
||||
>
|
||||
documents
|
||||
</Tab>
|
||||
</TabList>
|
||||
</Box>
|
||||
@@ -221,6 +252,9 @@ const ProfileView = () => {
|
||||
<TabPanel>
|
||||
<ViewInvestorDetails />
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<Transaction />
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</Box>
|
||||
|
||||
374
src/Pages/Investor_Management/InvestorDetails/Transaction.jsx
Normal file
374
src/Pages/Investor_Management/InvestorDetails/Transaction.jsx
Normal file
@@ -0,0 +1,374 @@
|
||||
import {
|
||||
Avatar,
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
HStack,
|
||||
Input,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuList,
|
||||
Portal,
|
||||
Select,
|
||||
Switch,
|
||||
Table,
|
||||
Tag,
|
||||
Tbody,
|
||||
Text,
|
||||
Th,
|
||||
Tooltip,
|
||||
Tr,
|
||||
useToast,
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useContext, useEffect, useState } from "react";
|
||||
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
|
||||
import DataTable from "../../../Components/DataTable/DataTable";
|
||||
import { HiDotsVertical } from "react-icons/hi";
|
||||
import { Link, Navigate, Link as RouterLink } from "react-router-dom";
|
||||
import {
|
||||
AddIcon,
|
||||
DeleteIcon,
|
||||
EditIcon,
|
||||
EmailIcon,
|
||||
ViewIcon,
|
||||
} from "@chakra-ui/icons";
|
||||
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";
|
||||
|
||||
const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
|
||||
|
||||
const Transaction = () => {
|
||||
const toast = useToast();
|
||||
const { transaction, setTransaction, slideFromRight } =
|
||||
useContext(GlobalStateContext);
|
||||
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);
|
||||
}, []);
|
||||
|
||||
// ====================================================[Table Setup]================================================================
|
||||
const tableHeadRow = [
|
||||
"Sr N/O",
|
||||
"Date",
|
||||
"Transaction",
|
||||
"Currency",
|
||||
"Amount",
|
||||
"From USD",
|
||||
"TO USD",
|
||||
"USD amount",
|
||||
"IO Name",
|
||||
"Payment Method",
|
||||
];
|
||||
|
||||
const handleUpdateStatus = debounce((id) => {
|
||||
setViewInvestor((prevData) =>
|
||||
prevData.map((transaction) =>
|
||||
transaction.id === id ? { ...transaction } : transaction
|
||||
)
|
||||
);
|
||||
toast({
|
||||
render: () => <ToastBox message={"Status changed succesfully.!"} />,
|
||||
});
|
||||
}, 300);
|
||||
|
||||
// ====================================================[Table Filter]================================================================
|
||||
const filteredData = transaction?.filter((item) => {
|
||||
// Filter by name (case insensitive)
|
||||
const name = item.date;
|
||||
const searchLower = searchTerm.toLowerCase();
|
||||
const nameMatches = name?.toLowerCase().includes(searchLower);
|
||||
|
||||
// Filter by status
|
||||
// const status = item.status;
|
||||
// const statusLower = status ? "active" : "inactive";
|
||||
|
||||
// const statusMatches =
|
||||
// statusFilter === "all" ||
|
||||
// (statusFilter === "active" && status === true) ||
|
||||
// (statusFilter === "inactive" && status === false);
|
||||
|
||||
return nameMatches;
|
||||
});
|
||||
|
||||
const extractedArray = filteredData?.map((item) => ({
|
||||
id: item?.id,
|
||||
"Sr N/O": (
|
||||
<Text w={'50px'}
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
as={"span"}
|
||||
color={"gray.600"}
|
||||
className="d-flex align-items-center fw-bold web-text-small"
|
||||
>
|
||||
{item.id}
|
||||
</Text>
|
||||
),
|
||||
"Date": (
|
||||
<Box w={"auto"} isTruncated={true}>
|
||||
<Text as={"span"} color={"teal.900"}>
|
||||
{item.date}
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
"Transaction": (
|
||||
<Box w={"auto"} isTruncated={true}>
|
||||
<Text as={"span"} color={"teal.900"}>
|
||||
{item.transaction}
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
"Currency": (
|
||||
<Box w={"auto"} isTruncated={true}>
|
||||
<Text as={"span"} color={"teal.900"}>
|
||||
{item.currency}
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
"Amount": (
|
||||
<Box w={"auto"} isTruncated={true}>
|
||||
<Text as={"span"} color={"teal.900"}>
|
||||
{item.amount}
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
"From USD": (
|
||||
<Box w={"auto"} isTruncated={true}>
|
||||
<Text as={"span"} color={"teal.900"}>
|
||||
{item.fromUSD}
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
"TO USD": (
|
||||
<Box w={"auto"} isTruncated={true}>
|
||||
<Text as={"span"} color={"teal.900"}>
|
||||
{item.toUSD}
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
"USD amount": (
|
||||
<Box w={"auto"} isTruncated={true}>
|
||||
<Text as={"span"} color={"teal.900"}>
|
||||
{item.USDamount}
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
"IO Name": (
|
||||
<Box w={"auto"} isTruncated={true}>
|
||||
<Text as={"span"} color={"teal.900"}>
|
||||
{item.IOName}
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
"Payment Method": (
|
||||
<Box w={"auto"} isTruncated={true}>
|
||||
<Text as={"span"} color={"teal.900"}>
|
||||
{item.paymentMethod}
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
}));
|
||||
|
||||
const handleDelete = () => {
|
||||
const updatedInvestorDetails = InvestorDetails.filter(
|
||||
(sponsor) => sponsor.id !== actionId
|
||||
);
|
||||
|
||||
setTimeout(() => {
|
||||
setInvestorDetails(updatedInvestorDetails);
|
||||
setDeleteAlert(false);
|
||||
setIsLoading(false);
|
||||
}, 100);
|
||||
setIsLoading(true);
|
||||
};
|
||||
|
||||
const Total = () => {
|
||||
return (
|
||||
<Table size="sm">
|
||||
<Tbody backgroundColor="gray.50">
|
||||
<Tr >
|
||||
<Th
|
||||
textAlign={"center"}
|
||||
p={3}
|
||||
width="60px"
|
||||
color={"#004118"}
|
||||
whiteSpace="normal"
|
||||
wordBreak="normal"
|
||||
overflowWrap="normal"
|
||||
>
|
||||
Balance:
|
||||
</Th>
|
||||
<Th
|
||||
textAlign={"center"}
|
||||
p={3}
|
||||
width="60px"
|
||||
color={"#004118"}
|
||||
whiteSpace="normal"
|
||||
wordBreak="normal"
|
||||
overflowWrap="normal"
|
||||
>
|
||||
{" "}
|
||||
</Th>
|
||||
<Th
|
||||
textAlign={"center"}
|
||||
p={3}
|
||||
width="60px"
|
||||
color={"#004118"}
|
||||
whiteSpace="normal"
|
||||
wordBreak="normal"
|
||||
overflowWrap="normal"
|
||||
>
|
||||
{" "}
|
||||
</Th>
|
||||
<Th
|
||||
textAlign={"center"}
|
||||
p={3}
|
||||
width="60px"
|
||||
color={"#004118"}
|
||||
whiteSpace="normal"
|
||||
wordBreak="normal"
|
||||
overflowWrap="normal"
|
||||
>
|
||||
{" "}
|
||||
</Th>
|
||||
<Th
|
||||
textAlign={"center"}
|
||||
p={3}
|
||||
width="80px"
|
||||
color={"#004118"}
|
||||
whiteSpace="normal"
|
||||
wordBreak="normal"
|
||||
overflowWrap="normal"
|
||||
>
|
||||
10,075.01
|
||||
</Th>
|
||||
<Th
|
||||
textAlign={"center"}
|
||||
p={3}
|
||||
width="60px"
|
||||
color={"#004118"}
|
||||
whiteSpace="normal"
|
||||
wordBreak="normal"
|
||||
overflowWrap="normal"
|
||||
>
|
||||
{" "}
|
||||
</Th>
|
||||
<Th
|
||||
textAlign={"center"}
|
||||
p={3}
|
||||
width="60px"
|
||||
color={"#004118"}
|
||||
whiteSpace="normal"
|
||||
wordBreak="normal"
|
||||
overflowWrap="normal"
|
||||
>
|
||||
{" "}
|
||||
</Th>
|
||||
<Th
|
||||
textAlign={"center"}
|
||||
p={3}
|
||||
width="80px"
|
||||
color={"#004118"}
|
||||
whiteSpace="normal"
|
||||
wordBreak="normal"
|
||||
overflowWrap="normal"
|
||||
>
|
||||
26,763.40
|
||||
</Th>
|
||||
<Th
|
||||
textAlign={"center"}
|
||||
p={3}
|
||||
width="120px"
|
||||
color={"#004118"}
|
||||
whiteSpace="normal"
|
||||
wordBreak="normal"
|
||||
overflowWrap="normal"
|
||||
>
|
||||
{" "}
|
||||
</Th>
|
||||
<Th
|
||||
textAlign={"center"}
|
||||
p={3}
|
||||
width="120px"
|
||||
color={"#004118"}
|
||||
whiteSpace="normal"
|
||||
wordBreak="normal"
|
||||
overflowWrap="normal"
|
||||
>
|
||||
{" "}
|
||||
</Th>
|
||||
</Tr>
|
||||
</Tbody>
|
||||
</Table>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
|
||||
<Box bg="white.500">
|
||||
<HStack
|
||||
display={"flex"}
|
||||
justifyContent={"space-between"}
|
||||
ps={1}
|
||||
pe={1}
|
||||
pb={4}
|
||||
pt={4}
|
||||
spacing="24px"
|
||||
>
|
||||
<Input
|
||||
type="search"
|
||||
width={300}
|
||||
placeholder="Search..."
|
||||
size="sm"
|
||||
rounded="sm"
|
||||
focusBorderColor="green.500"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
|
||||
<HStack display={"flex"} alignItems={"center"}>
|
||||
<Pagination totalItems={10} />
|
||||
</HStack>
|
||||
</HStack>
|
||||
</Box>
|
||||
|
||||
<DataTable
|
||||
emptyMessage={`We don't have any Sponers `}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
viewActionId={actionId}
|
||||
setViewActionId={setActionId}
|
||||
setMouseEnteredId={setMouseEnteredId}
|
||||
caption={<Total />}
|
||||
setMouseEntered={setMouseEntered}
|
||||
/>
|
||||
|
||||
<CustomAlertDialog
|
||||
onClose={() => setDeleteAlert(false)}
|
||||
isOpen={deleteAlert}
|
||||
message={"Are you sure you want to delete sponers?"}
|
||||
alertHandler={handleDelete}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Transaction;
|
||||
|
||||
Reference in New Issue
Block a user