From d62d9c3287f159e4984c1a44afa3ce320d514ac8 Mon Sep 17 00:00:00 2001 From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com> Date: Thu, 1 Aug 2024 11:42:48 +0530 Subject: [PATCH] investor details --- src/Contexts/GlobalStateProvider.jsx | 102 ++++- .../InvestorDetails/InvestorDetails.jsx | 146 ++++--- .../InvestorDetails/ProfileView.jsx | 88 +++-- .../InvestorDetails/Transaction.jsx | 374 ++++++++++++++++++ 4 files changed, 633 insertions(+), 77 deletions(-) create mode 100644 src/Pages/Investor_Management/InvestorDetails/Transaction.jsx diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx index a08761d..8b1503a 100644 --- a/src/Contexts/GlobalStateProvider.jsx +++ b/src/Contexts/GlobalStateProvider.jsx @@ -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, diff --git a/src/Pages/Investor_Management/InvestorDetails/InvestorDetails.jsx b/src/Pages/Investor_Management/InvestorDetails/InvestorDetails.jsx index 9dd4e68..4bd8ac7 100644 --- a/src/Pages/Investor_Management/InvestorDetails/InvestorDetails.jsx +++ b/src/Pages/Investor_Management/InvestorDetails/InvestorDetails.jsx @@ -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": ( - {item.firstName} + {item?.principal?.firstName} ), "Last Name": ( - {item.lastName} + {item?.principal?.lastName} ), Country: ( - {item.countryName} + {item?.country?.countryName} ), "Phone Number": ( - {item.mobileNumber} + {item?.principal?.mobileNumber} ), "E-mail ID": ( - {item.emailAddress} + {item?.principal?.emailAddress} ), "Investor Type": ( - {item.investorTypeName} + + {item?.investor_type?.investorTypeName} + ), "KYC Status": ( - + {item.KYCStatus} ), - // Status: ( - // handleUpdateStatus(item.id)} - // isChecked={item.status} - // /> - // ), + Status: ( + handleUpdateStatus(item.id)} + isChecked={item.userStatus} + /> + ), Action: ( { spacing="24px" > { onChange={(e) => setSearchTerm(e.target.value)} /> - - + + - - + + - - + + + + + + + + - - + + diff --git a/src/Pages/Investor_Management/InvestorDetails/ProfileView.jsx b/src/Pages/Investor_Management/InvestorDetails/ProfileView.jsx index 0aef3b6..56c6c1b 100644 --- a/src/Pages/Investor_Management/InvestorDetails/ProfileView.jsx +++ b/src/Pages/Investor_Management/InvestorDetails/ProfileView.jsx @@ -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"} > - + - - Amount - - 26,763.40 - USD + + + Amount + + + + 26,763.40 + + + USD + - - - Investor Currency - - 10,075.01 - BHD + + + Investor Currency + + + + 10,075.01 + + + BHD + - - - - - - - - - - - @@ -210,7 +223,25 @@ const ProfileView = () => { borderBottom: "2px solid #38a169", }} > - Invested Property + Portfolio + + + Transaction + + + documents @@ -221,6 +252,9 @@ const ProfileView = () => { + + + diff --git a/src/Pages/Investor_Management/InvestorDetails/Transaction.jsx b/src/Pages/Investor_Management/InvestorDetails/Transaction.jsx new file mode 100644 index 0000000..43dfe83 --- /dev/null +++ b/src/Pages/Investor_Management/InvestorDetails/Transaction.jsx @@ -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: () => , + }); + }, 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": ( + + {item.id} + + ), + "Date": ( + + + {item.date} + + + ), + "Transaction": ( + + + {item.transaction} + + + ), + "Currency": ( + + + {item.currency} + + + ), + "Amount": ( + + + {item.amount} + + + ), + "From USD": ( + + + {item.fromUSD} + + + ), + "TO USD": ( + + + {item.toUSD} + + + ), + "USD amount": ( + + + {item.USDamount} + + + ), + "IO Name": ( + + + {item.IOName} + + + ), + "Payment Method": ( + + + {item.paymentMethod} + + + ), + })); + + const handleDelete = () => { + const updatedInvestorDetails = InvestorDetails.filter( + (sponsor) => sponsor.id !== actionId + ); + + setTimeout(() => { + setInvestorDetails(updatedInvestorDetails); + setDeleteAlert(false); + setIsLoading(false); + }, 100); + setIsLoading(true); + }; + + const Total = () => { + return ( + + + + + + + + + + + + + + + +
+ Balance: + + {" "} + + {" "} + + {" "} + + 10,075.01 + + {" "} + + {" "} + + 26,763.40 + + {" "} + + {" "} +
+ ); + }; + + return ( + + + + setSearchTerm(e.target.value)} + /> + + + + + + + + } + setMouseEntered={setMouseEntered} + /> + + setDeleteAlert(false)} + isOpen={deleteAlert} + message={"Are you sure you want to delete sponers?"} + alertHandler={handleDelete} + isLoading={isLoading} + /> + + + ); + }; + + export default Transaction; + \ No newline at end of file