Investor details page update
This commit is contained in:
rockyeverlast
@@ -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 (
|
||||
<GlobalStateContext.Provider
|
||||
@@ -423,7 +436,12 @@ const GlobalStateProvider = ({ children }) => {
|
||||
toggleColorMode,
|
||||
slideFromRight,
|
||||
setSlideFormRight,
|
||||
investment, setInvestment, rateExchange, setRateExchange
|
||||
investment,
|
||||
setInvestment,
|
||||
rateExchange,
|
||||
setRateExchange,
|
||||
InvestorDetails,
|
||||
setInvestorDetails,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
|
||||
@@ -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 (
|
||||
|
||||
<Box
|
||||
h={'100vh'}
|
||||
display={'flex'}
|
||||
justifyContent={'center'}
|
||||
alignItems={'center'}
|
||||
flexDirection={'column'}
|
||||
gap={8}
|
||||
>
|
||||
<Image src={robot} w={"171px"} />
|
||||
{/* <Text color={'green.800'} as={'span'} fontSize={'small'}>The requested URL was not found on this server.</Text> */}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
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
|
||||
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: () => <ToastBox message={"Status changed succesfully.!"} />,
|
||||
});
|
||||
}, 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": (
|
||||
<Text
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
as={"span"}
|
||||
color={"gray.600"}
|
||||
className="d-flex align-items-center fw-bold web-text-small"
|
||||
>
|
||||
{item.id}
|
||||
</Text>
|
||||
),
|
||||
"IO Name": (
|
||||
<Box w={"auto"} isTruncated={true}>
|
||||
<Text as={"span"} color={"teal.900"}>
|
||||
{item.InvestorName}
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
Sponsor: (
|
||||
<Box w={"auto"} isTruncated={true}>
|
||||
<Text as={"span"} color={"teal.900"}>
|
||||
{item.Sponsor}
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
"Investment Amount": (
|
||||
// <Switch
|
||||
// size={"sm"}
|
||||
// color="green"
|
||||
// onChange={() => handleUpdateStatus(item.id)}
|
||||
// isChecked={item.status}
|
||||
// />
|
||||
<Box w={"auto"} isTruncated={true}>
|
||||
<Text as={"span"} color={"teal.900"}>
|
||||
{item.InvestmentAmount}
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
|
||||
// item?.status ? (
|
||||
// <Badge bg={'transparent'} color={"#05c46b"}>
|
||||
// Passed
|
||||
// </Badge>
|
||||
// ) : (
|
||||
// <Badge bg={'transparent'} color={"#f53b57"}>
|
||||
// Not passes
|
||||
// </Badge>
|
||||
// ),
|
||||
|
||||
Action: (
|
||||
<Box w={"auto"} isTruncated={true}>
|
||||
<span className="d-flex justify-content-between align-items-center">
|
||||
<Text as={"span"} color={"gray.600"} className=" fw-bold">
|
||||
{/* {formatDate(item.createdAt)} */}
|
||||
{item.Action}
|
||||
</Text>
|
||||
<Menu>
|
||||
<MenuButton className="link p-1 rounded-1">
|
||||
<HiDotsVertical className="rubix-text-dark fs-6" />
|
||||
</MenuButton>
|
||||
<Portal>
|
||||
<MenuList minWidth="80px">
|
||||
<RouterLink to={`edit-sponser/${item.id}`}>
|
||||
<MenuItem className="web-text-medium">Edit</MenuItem>
|
||||
</RouterLink>
|
||||
<RouterLink to={`view-sponser/${item.id}`}>
|
||||
<MenuItem className="web-text-medium">View</MenuItem>
|
||||
</RouterLink>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
setActionId(item?.id);
|
||||
setDeleteAlert(true);
|
||||
}}
|
||||
className="web-text-medium"
|
||||
>
|
||||
Delete
|
||||
</MenuItem>
|
||||
</MenuList>
|
||||
</Portal>
|
||||
</Menu>
|
||||
</span>
|
||||
</Box>
|
||||
),
|
||||
}));
|
||||
|
||||
const handleDelete = () => {
|
||||
const updatedInvestorDetails = InvestorDetails.filter(
|
||||
(sponsor) => sponsor.id !== actionId
|
||||
);
|
||||
|
||||
setTimeout(() => {
|
||||
setInvestorDetails(updatedInvestorDetails);
|
||||
setDeleteAlert(false);
|
||||
setIsLoading(false);
|
||||
}, 100);
|
||||
setIsLoading(true);
|
||||
};
|
||||
|
||||
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} />
|
||||
|
||||
<Link to={"/sponser/add-sponser"}>
|
||||
<Button
|
||||
leftIcon={<AddIcon />}
|
||||
colorScheme={"green"}
|
||||
rounded={"sm"}
|
||||
size={"sm"}
|
||||
>
|
||||
Add sponsers
|
||||
</Button>
|
||||
</Link>
|
||||
</HStack>
|
||||
</HStack>
|
||||
</Box>
|
||||
|
||||
<DataTable
|
||||
emptyMessage={`We don't have any Sponers `}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
viewActionId={actionId}
|
||||
setViewActionId={setActionId}
|
||||
// totalPages={10}
|
||||
|
||||
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 InvestorDetails;
|
||||
|
||||
Reference in New Issue
Block a user