investor details table

This commit is contained in:
YasinShaikh123
2024-07-10 12:03:00 +05:30
parent 22e9b08176
commit ede08c12a6
2 changed files with 136 additions and 41 deletions

View File

@@ -716,17 +716,25 @@ const GlobalStateProvider = ({ children }) => {
const [InvestorDetails, setInvestorDetails] = useState([
{
id: 1,
InvestorName: "ICC",
Sponsor: "Adani",
InvestmentAmount: "1000000",
Action: "Distribute",
firstName:"John",
lastName: "David",
country: "Saudi Arabia",
phoneNumber: "8940035906",
emailID: "john@gmail.com",
kycStatus:"Completed",
// investedProperty:"View",
status:"Unban",
},
{
id: 2,
InvestorName: "ECHO Investment",
Sponsor: "Tata",
InvestmentAmount: "2500000",
Action: "Distribute",
firstName:"John",
lastName: "David",
country: "Saudi Arabia",
phoneNumber: "8940035906",
emailID: "john@gmail.com",
kycStatus:"Completed",
// investedProperty:"View",
status:"Unban",
},
]);
const [investorTransaction, setInvestorTransaction] = useState([

View File

@@ -14,6 +14,7 @@ import {
Switch,
Tag,
Text,
Tooltip,
useToast,
} from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
@@ -21,7 +22,7 @@ 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 { AddIcon, DeleteIcon, EditIcon, EmailIcon, ViewIcon } from "@chakra-ui/icons";
import Pagination from "../../Components/Pagination";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import CustomAlertDialog from "../../Components/CustomAlertDialog";
@@ -54,9 +55,14 @@ const InvestorDetails = () => {
// ====================================================[Table Setup]================================================================
const tableHeadRow = [
"Sr N/O",
"Investor Name",
"Sponsor",
"Investment Amount",
"First Name",
"Last Name",
"Country",
"Phone Number",
"E-mail ID",
"KYC Status",
"Invested Property",
"Status",
"Action",
];
@@ -72,9 +78,9 @@ const InvestorDetails = () => {
}, 300);
// ====================================================[Table Filter]================================================================
const filteredData = InvestorDetails.filter((item) => {
const filteredData = InvestorDetails?.filter((item) => {
// Filter by name (case insensitive)
const name = item.InvestorName;
const name = item.firstName;
const searchLower = searchTerm.toLowerCase();
const nameMatches = name?.toLowerCase().includes(searchLower);
@@ -102,49 +108,130 @@ const InvestorDetails = () => {
{item.id}
</Text>
),
"Investor Name": (
"First Name": (
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.InvestorName}
{item.firstName}
</Text>
</Box>
),
Sponsor: (
"Last Name": (
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.Sponsor}
{item.lastName}
</Text>
</Box>
),
"Investment Amount": (
// <Switch
// size={"sm"}
// color="green"
// onChange={() => handleUpdateStatus(item.id)}
// isChecked={item.status}
// />
"Country": (
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.InvestmentAmount} $
{item.country}
</Text>
</Box>
),
// item?.status ? (
// <Badge bg={'transparent'} color={"#05c46b"}>
// Passed
// </Badge>
// ) : (
// <Badge bg={'transparent'} color={"#f53b57"}>
// Not passes
// </Badge>
// ),
"Phone Number": (
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.phoneNumber}
</Text>
</Box>
),
"E-mail ID": (
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.emailID}
</Text>
</Box>
),
"KYC Status": (
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.kycStatus}
</Text>
</Box>
),
"Invested Property": (
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
View
</Text>
</Box>
),
Status: (
<Switch
size={"sm"}
colorScheme="green"
onChange={() => handleUpdateStatus(item.id)}
isChecked={item.status}
/>
),
Action: (
<Button
color={"green.500"} size={"xs"} variant={"ghost"}>
Distribute
</Button>
<Box display={"flex"} justifyContent={"space-between"}>
<Tooltip
rounded={"sm"}
fontSize={"xs"}
label="View"
bg="#fff"
color={"green.500"}
placement="top"
>
<Button
_hover={{ color: "green.500" }}
// transition={"0.5s all"}
color="green.300"
rounded={"sm"}
size={"xs"}
>
<ViewIcon />
</Button>
</Tooltip>
<Tooltip
rounded={"sm"}
fontSize={"xs"}
label="Edit"
bg="#fff"
color={"blue.500"}
placement="top"
>
<Button
_hover={{ color: "blue.500" }}
// transition={"0.5s all"}
color="blue.400"
rounded={"sm"}
size={"xs"}
>
<EditIcon />
</Button>
</Tooltip>
<Tooltip
rounded={"sm"}
fontSize={"xs"}
label="Delete"
bg="#fff"
color={"red.500"}
placement="top"
>
<Button
onClick={() => {
setActionId(item?.id);
setDeleteAlert(true);
}}
_hover={{ color: "red.500" }}
// transition={"0.5s all"}
color="red.300"
rounded={"sm"}
size={"xs"}
>
<DeleteIcon />
</Button>
</Tooltip>
</Box>
),
}));