diff --git a/src/Components/InvestmentCard/InvestmentCard.jsx b/src/Components/InvestmentCard/InvestmentCard.jsx index ba0dac3..775dd5a 100644 --- a/src/Components/InvestmentCard/InvestmentCard.jsx +++ b/src/Components/InvestmentCard/InvestmentCard.jsx @@ -2,6 +2,7 @@ import { Box, Button, Card, + CardBody, Heading, Image, Progress, @@ -9,112 +10,144 @@ import { Text, Tooltip, } from "@chakra-ui/react"; -import { FADE_IN_SCALE_UP, OPACITY_ON_LOAD } from "../../Layout/animations"; -const InvestmentCard = ({ investment }) => { +const investments = [ + { + imgSrc: + "https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60", + title: "Multi Family Residence Portfolio", + sponsor: "KKR", + annReturn: "12.5%", + annYield: "12.5%", + minInvests: "$1,000", + targClose: "24 December", + holdingPer: "5-7 years", + progressValue: 80, + }, + { + imgSrc: + "https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60", + title: "Multi Family Residence Portfolio", + sponsor: "KKR", + annReturn: "12.5%", + annYield: "12.5%", + minInvests: "$1,000", + targClose: "24 December", + holdingPer: "5-7 years", + progressValue: 80, + }, + { + imgSrc: + "https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60", + title: "Multi Family Residence Portfolio", + sponsor: "KKR", + annReturn: "12.5%", + annYield: "12.5%", + minInvests: "$1,000", + targClose: "24 December", + holdingPer: "5-7 years", + progressValue: 80, + }, +]; + +const InvestmentCard = () => { return ( - - {investment.title} - - - - - {investment.title} - - - Sponsor:{" "} - - {investment.sponsor} - {" "} - - - Ann return:{" "} - - {investment.annReturn} - {" "} - - - Ann Yield:{" "} - - {investment.annYield} - {" "} - - - - - - - Min.Invests:{" "} - - {investment.minInvests} - {" "} - - - Targ Close:{" "} - - {investment.targClose} - {" "} - - - Holding per:{" "} - - {investment.holdingPer} - {" "} - - - - - - + + {investments.map((investment, index) => ( + - - - - - + + + + + {investment.title} + + + Sponsor:{" "} + + {investment.sponsor} + {" "} + + + Ann return:{" "} + + {investment.annReturn} + {" "} + + + Ann Yield:{" "} + + {investment.annYield} + {" "} + + + + + + + Min.Invests:{" "} + + {investment.minInvests} + {" "} + + + Targ Close:{" "} + + {investment.targClose} + {" "} + + + Holding per:{" "} + + {investment.holdingPer} + {" "} + + + + + + + + + + + + + ))} + ); }; diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx index 8474cd6..06fb0a4 100644 --- a/src/Contexts/GlobalStateProvider.jsx +++ b/src/Contexts/GlobalStateProvider.jsx @@ -301,6 +301,18 @@ const GlobalStateProvider = ({ children }) => { holdingPer: "5-7 years", progressValue: 80, }, + { + imgSrc: + "https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60", + title: "Multi Family Residence Portfolio", + sponsor: "KKR", + annReturn: "12.5%", + annYield: "12.5%", + minInvests: ",00 $0", + targClose: "24 December", + holdingPer: "5-7 years", + progressValue: 80, + }, ]); const [rateExchange, setRateExchange] = useState([ @@ -421,6 +433,228 @@ const GlobalStateProvider = ({ children }) => { }, ]); + const [pendingRequest, setPendingRequest] = useState([ + { + id: uuidv4(), + date: getRandomDate(startDate, endDate), + Distribution: "lorem ipsum dummy text", + charge: "500", + year: "2024", + quater: "Q 1", + amount: 1000, + }, + { + id: uuidv4(), + date: getRandomDate(startDate, endDate), + Distribution: "lorem ipsum dummy text", + charge: "500", + year: "2024", + quater: "Q 1", + amount: 1000, + }, + { + id: uuidv4(), + date: getRandomDate(startDate, endDate), + Distribution: "lorem ipsum dummy text", + charge: "500", + year: "2024", + quater: "Q 1", + amount: 1000, + }, + { + id: uuidv4(), + date: getRandomDate(startDate, endDate), + Distribution: "lorem ipsum dummy text", + charge: "500", + year: "2024", + quater: "Q 1", + amount: 1000, + }, + { + id: uuidv4(), + date: getRandomDate(startDate, endDate), + Distribution: "lorem ipsum dummy text", + charge: "500", + year: "2024", + quater: "Q 1", + amount: 1000, + }, + { + id: uuidv4(), + date: getRandomDate(startDate, endDate), + Distribution: "lorem ipsum dummy text", + charge: "500", + year: "2024", + quater: "Q 1", + amount: 1000, + }, + { + id: uuidv4(), + date: getRandomDate(startDate, endDate), + Distribution: "lorem ipsum dummy text", + charge: "500", + year: "2024", + quater: "Q 1", + amount: 1000, + }, + { + id: uuidv4(), + date: getRandomDate(startDate, endDate), + Distribution: "lorem ipsum dummy text", + charge: "500", + year: "2024", + quater: "Q 1", + amount: 1000, + }, + { + id: uuidv4(), + date: getRandomDate(startDate, endDate), + Distribution: "lorem ipsum dummy text", + charge: "500", + year: "2024", + quater: "Q 1", + amount: 1000, + }, + { + id: uuidv4(), + date: getRandomDate(startDate, endDate), + Distribution: "lorem ipsum dummy text", + charge: "500", + year: "2024", + quater: "Q 1", + amount: 1000, + }, + { + id: uuidv4(), + date: getRandomDate(startDate, endDate), + Distribution: "lorem ipsum dummy text", + charge: "500", + year: "2024", + quater: "Q 1", + amount: 1000, + }, + { + id: uuidv4(), + date: getRandomDate(startDate, endDate), + Distribution: "lorem ipsum dummy text", + charge: "500", + year: "2024", + quater: "Q 1", + amount: 1000, + }, + ]); + + const [viewHistory, setViewHistory] = useState([ + { + id: uuidv4(), + date: "2024-01-15", + Distribution: "Office supplies", + charge: "200.50", + year: "2024", + quarter: "Q1", + amount: 1500, + }, + { + id: uuidv4(), + date: "2024-02-10", + Distribution: "Marketing expenses", + charge: "450.00", + year: "2024", + quarter: "Q1", + amount: 2000, + }, + { + id: uuidv4(), + date: "2024-03-05", + Distribution: "Software subscription", + charge: "300.75", + year: "2024", + quarter: "Q1", + amount: 1200, + }, + { + id: uuidv4(), + date: "2024-04-18", + Distribution: "Travel expenses", + charge: "600.30", + year: "2024", + quarter: "Q2", + amount: 2500, + }, + { + id: uuidv4(), + date: "2024-05-22", + Distribution: "Consulting fees", + charge: "800.00", + year: "2024", + quarter: "Q2", + amount: 3000, + }, + { + id: uuidv4(), + date: "2024-06-14", + Distribution: "Office rent", + charge: "1200.25", + year: "2024", + quarter: "Q2", + amount: 3500, + }, + { + id: uuidv4(), + date: "2024-07-09", + Distribution: "Utilities", + charge: "150.40", + year: "2024", + quarter: "Q3", + amount: 1000, + }, + { + id: uuidv4(), + date: "2024-08-29", + Distribution: "Employee training", + charge: "500.00", + year: "2024", + quarter: "Q3", + amount: 1800, + }, + { + id: uuidv4(), + date: "2024-09-13", + Distribution: "Website maintenance", + charge: "350.65", + year: "2024", + quarter: "Q3", + amount: 1400, + }, + { + id: uuidv4(), + date: "2024-10-23", + Distribution: "Advertising", + charge: "900.50", + year: "2024", + quarter: "Q4", + amount: 2200, + }, + { + id: uuidv4(), + date: "2024-10-23", + Distribution: "Advertising", + charge: "900.50", + year: "2024", + quarter: "Q4", + amount: 2200, + }, + { + id: uuidv4(), + date: "2024-10-23", + Distribution: "Advertising", + charge: "900.50", + year: "2024", + quarter: "Q4", + amount: 2200, + }, + ]); + return ( { toggleColorMode, slideFromRight, setSlideFormRight, + + InvestorDetails, + setInvestorDetails, investment, setInvestment, rateExchange, setRateExchange, - InvestorDetails, - setInvestorDetails, + pendingRequest, + setPendingRequest, + viewHistory, + setViewHistory, }} > {children} diff --git a/src/Pages/WithDrawal/PendingRequest.jsx b/src/Pages/WithDrawal/PendingRequest.jsx index 8cef3d0..a8a7db6 100644 --- a/src/Pages/WithDrawal/PendingRequest.jsx +++ b/src/Pages/WithDrawal/PendingRequest.jsx @@ -1,22 +1,220 @@ -import { Box, Image, Text } from "@chakra-ui/react" -// import error from "../assets/Error.svg" -import robot from "../../assets/robot.png" -// import robot from "../assets/robot.png" -const PendingRequest = () => { - return ( - - - - {/* The requested URL was not found on this server. */} - - ) -} +import { + Avatar, + Badge, + Box, + Button, + HStack, + Input, + Text, + 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 Pagination from "../../Components/Pagination"; +import GlobalStateContext from "../../Contexts/GlobalStateContext"; +import CustomAlertDialog from "../../Components/CustomAlertDialog"; +import { formatDate } from "../../Components/Functions/UTCConvertor"; +// import { formatDate } from "../../Components/Functions/UTCConvertor"; -export default PendingRequest \ No newline at end of file +const PendingRequest = () => { + const toast = useToast(); + const { slideFromRight, pendingRequest, setPendingRequest } = + 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 Filter]================================================================ + const filteredData = pendingRequest.filter((item) => { + // Filter by name (case insensitive) + const name = item.Distribution; + 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; + }); + + // ====================================================[Table Setup]================================================================ + const tableHeadRow = [ + "Sr No.", + "Date", + "Distribution Amount", + "Charges (USD)", + "Year", + "Quater", + "Amount", + ]; + + const extractedArray = filteredData?.map((item, index) => ({ + id: item?.id, + "Sr No.": ( + + {index + 1}. + + ), + "Date": ( + + {formatDate(item.date)} + + ), + "Distribution Amount": ( + + {item.Distribution} + + ), + "Charges (USD)": ( + + {item.charge} + {/* {formatDate(item.charge)} */} + + ), + Year: ( + + {item.year} + + ), + Quater: ( + + {item.quater} + + ), + + Amount: ( + + {item.amount} + + ), + })); + + const handleDelete = () => { + const updatedSponsors = sponser.filter( + (sponsor) => sponsor.id !== actionId + ); + + setTimeout(() => { + setSponser(updatedSponsors); + setDeleteAlert(false); + setIsLoading(false); + }, 100); + setIsLoading(true); + }; + + return ( + + + + setSearchTerm(e.target.value)} + /> + + + + + + + + + + setDeleteAlert(false)} + isOpen={deleteAlert} + message={"Are you sure you want to delete sponers?"} + alertHandler={handleDelete} + isLoading={isLoading} + /> + + ); +}; + +export default PendingRequest; diff --git a/src/Pages/WithDrawal/ViewHistory.jsx b/src/Pages/WithDrawal/ViewHistory.jsx index 7f79954..82d37cb 100644 --- a/src/Pages/WithDrawal/ViewHistory.jsx +++ b/src/Pages/WithDrawal/ViewHistory.jsx @@ -1,22 +1,220 @@ -import { Box, Image, Text } from "@chakra-ui/react" -// import error from "../assets/Error.svg" -import robot from "../../assets/robot.png" -// import robot from "../assets/robot.png" -const ViewHistory = () => { - return ( - - - - {/* The requested URL was not found on this server. */} - - ) -} +import { + Avatar, + Badge, + Box, + Button, + HStack, + Input, + Text, + 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 Pagination from "../../Components/Pagination"; +import GlobalStateContext from "../../Contexts/GlobalStateContext"; +import CustomAlertDialog from "../../Components/CustomAlertDialog"; +import { formatDate } from "../../Components/Functions/UTCConvertor"; +// import { formatDate } from "../../Components/Functions/UTCConvertor"; -export default ViewHistory \ No newline at end of file +const ViewHistory = () => { + const toast = useToast(); + const { slideFromRight, viewHistory, setViewHistory } = + 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 Filter]================================================================ + const filteredData = viewHistory.filter((item) => { + // Filter by name (case insensitive) + const name = item.Distribution; + 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; + }); + + // ====================================================[Table Setup]================================================================ + const tableHeadRow = [ + "Sr No.", + "Date", + "Distribution Amount", + "Charges (USD)", + "Year", + "Quater", + "Amount", + ]; + + const extractedArray = filteredData?.map((item, index) => ({ + id: item?.id, + "Sr No.": ( + + {index + 1}. + + ), + "Date": ( + + {formatDate(item.date)} + + ), + "Distribution Amount": ( + + {item.Distribution} + + ), + "Charges (USD)": ( + + {item.charge} + {/* {formatDate(item.charge)} */} + + ), + Year: ( + + {item.year} + + ), + Quater: ( + + {item.quarter} + + ), + + Amount: ( + + {item.amount} + + ), + })); + + const handleDelete = () => { + const updatedSponsors = sponser.filter( + (sponsor) => sponsor.id !== actionId + ); + + setTimeout(() => { + setSponser(updatedSponsors); + setDeleteAlert(false); + setIsLoading(false); + }, 100); + setIsLoading(true); + }; + + return ( + + + + setSearchTerm(e.target.value)} + /> + + + + + + + + + + setDeleteAlert(false)} + isOpen={deleteAlert} + message={"Are you sure you want to delete sponers?"} + alertHandler={handleDelete} + isLoading={isLoading} + /> + + ); +}; + +export default ViewHistory;