diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx index 0feb015..8474cd6 100644 --- a/src/Contexts/GlobalStateProvider.jsx +++ b/src/Contexts/GlobalStateProvider.jsx @@ -4,13 +4,13 @@ import GlobalStateContext from "./GlobalStateContext"; import { effect, useColorMode } from "@chakra-ui/react"; import { v4 as uuidv4 } from "uuid"; - const getRandomDate = (start, end) => { - const date = new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); + const date = new Date( + start.getTime() + Math.random() * (end.getTime() - start.getTime()) + ); return date.toISOString(); }; - const startDate = new Date(2020, 0, 1); // January 1, 2020 const endDate = new Date(); // Current date @@ -276,18 +276,8 @@ const GlobalStateProvider = ({ children }) => { 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: ",00 $0", - 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", @@ -299,114 +289,137 @@ const GlobalStateProvider = ({ children }) => { holdingPer: "5-7 years", progressValue: 80, }, - ]) - - const [ rateExchange, setRateExchange ] = useState([ { - id : uuidv4(), + 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([ + { + id: uuidv4(), fromCurr: "USD $", toCurr: "BHD .د.ب;", effectFrom: getRandomDate(startDate, endDate), effectTill: getRandomDate(startDate, endDate), - rate: 2.66 + rate: 2.66, }, { - id : uuidv4(), + id: uuidv4(), fromCurr: "USD $", toCurr: "KWD ·د.ك", effectFrom: getRandomDate(startDate, endDate), effectTill: getRandomDate(startDate, endDate), - rate: 2.66 + rate: 2.66, }, { - id : uuidv4(), + id: uuidv4(), fromCurr: "USD $", toCurr: "OMR ﷼.", effectFrom: getRandomDate(startDate, endDate), effectTill: getRandomDate(startDate, endDate), - rate: 2.66 + rate: 2.66, }, { - id : uuidv4(), + id: uuidv4(), fromCurr: "USD $", toCurr: "QAR ﷼.", effectFrom: getRandomDate(startDate, endDate), effectTill: getRandomDate(startDate, endDate), - rate: 2.66 + rate: 2.66, }, { - id : uuidv4(), + id: uuidv4(), fromCurr: "USD $", toCurr: "SAR ﷼.", effectFrom: getRandomDate(startDate, endDate), effectTill: getRandomDate(startDate, endDate), - rate: 2.66 + rate: 2.66, }, { - id : uuidv4(), + id: uuidv4(), fromCurr: "USD $", toCurr: "AED د.إ. ", effectFrom: getRandomDate(startDate, endDate), effectTill: getRandomDate(startDate, endDate), - rate: 2.66 + rate: 2.66, }, - - - - { - id : uuidv4(), + id: uuidv4(), fromCurr: "AED د.إ. ", toCurr: "USD $", effectFrom: getRandomDate(startDate, endDate), effectTill: getRandomDate(startDate, endDate), - rate: 2.66 + rate: 2.66, }, { - id : uuidv4(), + id: uuidv4(), fromCurr: "SAR ﷼.", toCurr: "USD $", effectFrom: getRandomDate(startDate, endDate), effectTill: getRandomDate(startDate, endDate), - rate: 2.66 + rate: 2.66, }, { - id : uuidv4(), + id: uuidv4(), fromCurr: "QAR ﷼.", toCurr: "USD $", effectFrom: getRandomDate(startDate, endDate), effectTill: getRandomDate(startDate, endDate), - rate: 2.66 + rate: 2.66, }, - - { - id : uuidv4(), + id: uuidv4(), fromCurr: "BHD .د.ب;", toCurr: "USD $", effectFrom: getRandomDate(startDate, endDate), effectTill: getRandomDate(startDate, endDate), - rate: 2.66 + rate: 2.66, }, { - id : uuidv4(), + id: uuidv4(), fromCurr: "KWD ·د.ك", toCurr: "USD $", effectFrom: getRandomDate(startDate, endDate), effectTill: getRandomDate(startDate, endDate), - rate: 2.66 + rate: 2.66, }, { - id : uuidv4(), + id: uuidv4(), fromCurr: "OMR ﷼.", toCurr: "USD $", effectFrom: getRandomDate(startDate, endDate), effectTill: getRandomDate(startDate, endDate), - rate: 2.66 + rate: 2.66, }, - ]) + ]); + + const [InvestorDetails, setInvestorDetails] = useState([ + { + id: 1, + InvestorName: "ICC", + Sponsor: "Adani", + InvestmentAmount: "1000000", + Action: "Distribute", + }, + { + id: 2, + InvestorName: "ECHO Investment", + Sponsor: "Tata", + InvestmentAmount: "2500000", + Action: "Distribute", + }, + ]); return ( { toggleColorMode, slideFromRight, setSlideFormRight, - investment, setInvestment, rateExchange, setRateExchange + investment, + setInvestment, + rateExchange, + setRateExchange, + InvestorDetails, + setInvestorDetails, }} > {children} diff --git a/src/Pages/Investor_Management/InvestorDetails.jsx b/src/Pages/Investor_Management/InvestorDetails.jsx index 53ff62d..8b0eb35 100644 --- a/src/Pages/Investor_Management/InvestorDetails.jsx +++ b/src/Pages/Investor_Management/InvestorDetails.jsx @@ -1,22 +1,256 @@ -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 InvestorDetails = () => { - return ( - - - - {/* The requested URL was not found on this server. */} - - ) -} +import { + Avatar, + Badge, + Box, + Button, + HStack, + Input, + Menu, + MenuButton, + MenuItem, + MenuList, + Portal, + Select, + Switch, + Tag, + 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 { HiDotsVertical } from "react-icons/hi"; +import { Link, Link as RouterLink } from "react-router-dom"; +import { AddIcon, EmailIcon } 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"; -export default InvestorDetails \ No newline at end of file +const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter + +const InvestorDetails = () => { + const toast = useToast(); + const { InvestorDetails, setInvestorDetails, 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", + "IO Name", + "Sponsor", + "Investment Amount", + "Action", + ]; + + const handleUpdateStatus = debounce((id) => { + setInvestorDetails((prevData) => + prevData.map((InvestorDetails) => + InvestorDetails.id === id ? { ...InvestorDetails } : InvestorDetails + ) + ); + toast({ + render: () => , + }); + }, 300); + + // ====================================================[Table Filter]================================================================ + const filteredData = InvestorDetails.filter((item) => { + // Filter by name (case insensitive) + const name = item.InvestorName; + 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} + + ), + "IO Name": ( + + + {item.InvestorName} + + + ), + Sponsor: ( + + + {item.Sponsor} + + + ), + "Investment Amount": ( + // handleUpdateStatus(item.id)} + // isChecked={item.status} + // /> + + + {item.InvestmentAmount} + + + ), + + // item?.status ? ( + // + // Passed + // + // ) : ( + // + // Not passes + // + // ), + + Action: ( + + + + {/* {formatDate(item.createdAt)} */} + {item.Action} + + + + + + + + + Edit + + + View + + { + setActionId(item?.id); + setDeleteAlert(true); + }} + className="web-text-medium" + > + Delete + + + + + + + ), + })); + + const handleDelete = () => { + const updatedInvestorDetails = InvestorDetails.filter( + (sponsor) => sponsor.id !== actionId + ); + + setTimeout(() => { + setInvestorDetails(updatedInvestorDetails); + 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 InvestorDetails;