This commit is contained in:
2024-07-15 12:27:42 +05:30
17 changed files with 1375 additions and 912 deletions

View File

@@ -756,6 +756,7 @@ const GlobalStateProvider = ({ children }) => {
const [InvestorDetails, setInvestorDetails] = useState([
{
id: 1,
clientId:"SA00000001",
fullName:"John David",
firstName:"John",
lastName: "David",
@@ -773,6 +774,7 @@ const GlobalStateProvider = ({ children }) => {
},
{
id: 2,
clientId:"SA00000001",
fullName:"John David",
firstName:"John",
lastName: "David",
@@ -790,6 +792,7 @@ const GlobalStateProvider = ({ children }) => {
},
{
id: 3,
clientId:"SA00000001",
fullName:"John David",
firstName:"John",
lastName: "David",
@@ -807,6 +810,7 @@ const GlobalStateProvider = ({ children }) => {
},
{
id: 4,
clientId:"SA00000001",
fullName:"John David",
firstName:"John",
lastName: "David",
@@ -824,6 +828,7 @@ const GlobalStateProvider = ({ children }) => {
},
{
id: 5,
clientId:"SA00000001",
fullName:"John David",
firstName:"John",
lastName: "David",
@@ -841,6 +846,7 @@ const GlobalStateProvider = ({ children }) => {
},
{
id: 6,
clientId:"SA00000001",
fullName:"John David",
firstName:"John",
lastName: "David",
@@ -858,6 +864,7 @@ const GlobalStateProvider = ({ children }) => {
},
{
id: 7,
clientId:"SA00000001",
fullName:"John David",
firstName:"John",
lastName: "David",
@@ -875,6 +882,7 @@ const GlobalStateProvider = ({ children }) => {
},
{
id: 8,
clientId:"SA00000001",
fullName:"John David",
firstName:"John",
lastName: "David",
@@ -892,6 +900,7 @@ const GlobalStateProvider = ({ children }) => {
},
{
id: 9,
clientId:"SA00000001",
fullName:"John David",
firstName:"John",
lastName: "David",
@@ -909,6 +918,7 @@ const GlobalStateProvider = ({ children }) => {
},
{
id: 10,
clientId:"SA00000001",
fullName:"John David",
firstName:"John",
lastName: "David",
@@ -930,7 +940,7 @@ const GlobalStateProvider = ({ children }) => {
{
id: 1,
dealId:"UWE3424992",
dealId: "KKR Private Equity Fund",
dealName: "KKR Private Equity Fund",
sponsorName: "KKR",
investAmount: "$100,000",
holdingPeriod: "4-5 years",
@@ -940,7 +950,7 @@ const GlobalStateProvider = ({ children }) => {
{
id: 2,
dealId:"UWE3424992",
dealId: "Blackstone Real Estate Income Trust",
dealName: "Blackstone Real Estate Income Trust",
sponsorName: "Blackstone",
investAmount: "$100,000",
holdingPeriod: "4-5 years",
@@ -950,7 +960,7 @@ const GlobalStateProvider = ({ children }) => {
{
id: 3,
dealId:"UWE3424992",
dealId: "J.P. Morgan",
dealName: "J.P. Morgan",
sponsorName: "J.P. Morgan",
investAmount: "$100,000",
holdingPeriod: "4-5 years",
@@ -989,224 +999,109 @@ const GlobalStateProvider = ({ children }) => {
Action: "Distribute",
},
]);
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: 1,
date:"02-Jan-2024",
clientId: "SA00000001",
firstName: "John",
lastName: "David",
country: "Saudi Arabia",
phoneNumber: "8940035906",
currency: "SAR",
withDrawalAmount: "$100,000",
amountcurrency:"382574.17",
},
{
id: uuidv4(),
date: getRandomDate(startDate, endDate),
Distribution: "lorem ipsum dummy text",
charge: "500",
year: "2024",
quater: "Q 1",
amount: 1000,
id: 2,
date:"02-Jan-2024",
clientId: "KU00000001",
firstName: "Faisal",
lastName: "Aljalahma",
country: "Kuwait",
phoneNumber: "8226278945",
currency: "KWD",
withDrawalAmount: "$200,000",
amountcurrency:"62438.98",
},
{
id: uuidv4(),
date: getRandomDate(startDate, endDate),
Distribution: "lorem ipsum dummy text",
charge: "500",
year: "2024",
quater: "Q 1",
amount: 1000,
id: 3,
date:"02-Jan-2024",
clientId: "BH00000001",
firstName: "Nawaf",
lastName: "Almaskati",
country: "Bahrain",
phoneNumber: "8940035906",
currency: "BHD",
withDrawalAmount: "$300,000",
amountcurrency:"115328.04",
},
{
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: 4,
date:"02-Jan-2024",
clientId: "SA00000002",
firstName: "Sulaiman",
lastName: "AlBassam",
country: "Saudi Arabia",
phoneNumber: "8226278945",
currency: "SAR",
withDrawalAmount: "$400,000",
amountcurrency:"1530296.67",
},
]);
const [viewHistory, setViewHistory] = useState([
{
id: uuidv4(),
date: "2024-01-15",
Distribution: "Office supplies",
charge: "200.50",
year: "2024",
quarter: "Q1",
amount: 1500,
id: 1,
date:"02-Jan-2024",
clientId: "SA00000001",
firstName: "John",
lastName: "David",
country: "Saudi Arabia",
phoneNumber: "8940035906",
currency: "SAR",
withDrawalAmount: "$100,000",
amountcurrency:"382574.17",
status:"Approved",
},
{
id: uuidv4(),
date: "2024-02-10",
Distribution: "Marketing expenses",
charge: "450.00",
year: "2024",
quarter: "Q1",
amount: 2000,
id: 2,
date:"02-Jan-2024",
clientId: "KU00000001",
firstName: "Faisal",
lastName: "Aljalahma",
country: "Kuwait",
phoneNumber: "8226278945",
currency: "KWD",
withDrawalAmount: "$200,000",
amountcurrency:"62438.98",
status:"Rejected",
},
{
id: uuidv4(),
date: "2024-03-05",
Distribution: "Software subscription",
charge: "300.75",
year: "2024",
quarter: "Q1",
amount: 1200,
id: 3,
date:"02-Jan-2024",
clientId: "BH00000001",
firstName: "Nawaf",
lastName: "Almaskati",
country: "Bahrain",
phoneNumber: "8940035906",
currency: "BHD",
withDrawalAmount: "$300,000",
amountcurrency:"115328.04",
status:"Approved",
},
{
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,
id: 4,
date:"02-Jan-2024",
clientId: "SA00000002",
firstName: "Sulaiman",
lastName: "AlBassam",
country: "Saudi Arabia",
phoneNumber: "8226278945",
currency: "SAR",
withDrawalAmount: "$400,000",
amountcurrency:"1530296.67",
status:"Rejected",
},
]);
const [upgradeHistory, setUpgradeHistory] = useState([
@@ -1766,6 +1661,7 @@ const GlobalStateProvider = ({ children }) => {
const [depositRequest, setDepositRequest] = useState([
{
id: 1,
date:"02-Jan-2024",
clientId: "SA00000001",
firstName: "John",
lastName: "David",
@@ -1779,6 +1675,7 @@ const GlobalStateProvider = ({ children }) => {
},
{
id: 2,
date:"02-Jan-2024",
clientId: "KU00000001",
firstName: "Faisal",
lastName: "Aljalahma",
@@ -1792,6 +1689,7 @@ const GlobalStateProvider = ({ children }) => {
},
{
id: 3,
date:"02-Jan-2024",
clientId: "BH00000001",
firstName: "Nawaf",
lastName: "Almaskati",
@@ -1805,6 +1703,7 @@ const GlobalStateProvider = ({ children }) => {
},
{
id: 4,
date:"02-Jan-2024",
clientId: "SA00000002",
firstName: "Sulaiman",
lastName: "AlBassam",
@@ -1821,6 +1720,7 @@ const GlobalStateProvider = ({ children }) => {
const [depositHistory, setDepositHistory] = useState([
{
id: 1,
date:"02-Jan-2024",
clientId: "SA00000001",
firstName: "John",
lastName: "David",
@@ -1835,6 +1735,7 @@ const GlobalStateProvider = ({ children }) => {
},
{
id: 2,
date:"02-Jan-2024",
clientId: "KU00000001",
firstName: "Faisal",
lastName: "Aljalahma",
@@ -1849,6 +1750,7 @@ const GlobalStateProvider = ({ children }) => {
},
{
id: 3,
date:"02-Jan-2024",
clientId: "BH00000001",
firstName: "Nawaf",
lastName: "Almaskati",
@@ -1863,6 +1765,7 @@ const GlobalStateProvider = ({ children }) => {
},
{
id: 4,
date:"02-Jan-2024",
clientId: "SA00000002",
firstName: "Sulaiman",
lastName: "AlBassam",

View File

@@ -1,22 +1,43 @@
import { Box, Image, Text } from "@chakra-ui/react"
import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
// import error from "../assets/Error.svg"
import robot from "../../assets/robot.png"
import robot from "../../assets/robot.png";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import { useState } from "react";
import Pagination from "../../Components/Pagination";
// import robot from "../assets/robot.png"
const BankInvestor = () => {
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>
)
}
const [searchTerm, setSearchTerm] = useState("");
export default BankInvestor
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} />
</HStack> */}
</Input>
</HStack>
</Box>
</Box>
);
};
export default BankInvestor;

View File

@@ -1,272 +0,0 @@
import {
Badge,
Box,
Button,
HStack,
Input,
Switch,
Text,
Tooltip,
useToast,
} from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
import { HiDotsVertical } from "react-icons/hi";
import { Link, Link as RouterLink, useNavigate } from "react-router-dom";
import {
AddIcon,
CheckIcon,
CloseIcon,
DeleteIcon,
EditIcon,
ViewIcon,
} from "@chakra-ui/icons";
// import { debounce } from "./AddInvestmentType";
import { debounce } from "../Master/Sponser/AddSponser";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import Pagination from "../../Components/Pagination";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import CustomAlertDialog from "../../Components/CustomAlertDialog";
import ToastBox from "../../Components/ToastBox";
import DataTable from "../../Components/DataTable/DataTable";
const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
const DepositHistory = () => {
const navigate = useNavigate();
const toast = useToast();
const { depositHistory, setDepositHistory, 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.no",
"Client ID",
"First Name",
"Last Name",
"Country",
"Phone Number",
"Currency",
"Deposit Amount",
"Fees",
"Total Amount",
"Amount in Investor currency",
"Status",
];
const handleUpdateStatus = debounce((id) => {
setDepositHistory((prevDepositHistory) =>
prevDepositHistory.map((depositHistory) =>
depositHistory.id === id
? { ...depositHistory, status: !depositHistory.status }
: depositHistory
)
);
toast({
render: () => <ToastBox message={"Status changed succesfully.!"} />,
});
}, 300);
// ====================================================[Table Filter]================================================================
const filteredData = depositHistory.filter((item) => {
// Filter by name (case insensitive)
const name = item.clientId;
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, setExtractedArray] = useState(
filteredData?.map((item, index) => ({
// id: item?.id,
"Sr.no": (
<Text
w={"30px"}
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
>
{index + 1}
</Text>
),
"Client ID": (
<Text
w={"60px"}
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
>
{item.clientId}
</Text>
),
"First Name": (
<Box isTruncated={true} w={'50px'}>
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
{item.firstName}
</Text>
</Box>
),
"Last Name": (
<Box w={"50px"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.lastName}
</Text>
</Box>
),
Country: (
<Box w={"70px"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.country}
</Text>
</Box>
),
"Phone Number": (
<Box w={"70px"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.phoneNumber}
</Text>
</Box>
),
Currency: (
<Box w={"50px"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
<Badge px={2} py={1}>{item.currency}</Badge>
</Text>
</Box>
),
"Deposit Amount": (
<Box w={"50px"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.depositAmount}
</Text>
</Box>
),
Fees: (
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.fees}
</Text>
</Box>
),
"Total Amount": (
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.totalAmount}
</Text>
</Box>
),
"Amount in Investor currency": (
<Box w={"70px"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.amountcurrency}
</Text>
</Box>
),
Status: (
<Box w={"70px"} isTruncated={true}>
<Text as={"span"} color={item.status === "Approved" ? "green" : "red"}>
{item.status}
</Text>
</Box>
),
}))
);
const handleDelete = () => {
const IOtype = investmentType.filter(
(investmentType) => investmentType.id !== actionId
);
setTimeout(() => {
setInvestmentType(IOtype);
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} />
</HStack>
</HStack>
</Box>
<DataTable
emptyMessage={`We don't have any Investment type `}
tableHeadRow={tableHeadRow}
setData={setExtractedArray}
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 DepositHistory;

View File

@@ -56,6 +56,7 @@ const DepositRequest = () => {
// ====================================================[Table Setup]================================================================
const tableHeadRow = [
"Sr.no",
"Date",
"Client ID",
"First Name",
"Last Name",
@@ -116,6 +117,18 @@ const DepositRequest = () => {
{index + 1}
</Text>
),
"Date": (
<Text
w={"60px"}
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
>
{item.date}
</Text>
),
"Client ID": (
<Text
w={"60px"}
@@ -196,7 +209,7 @@ const DepositRequest = () => {
<Tooltip
rounded={"sm"}
fontSize={"xs"}
label="Accept"
label="Approve"
bg="#fff"
color={"green.500"}
placement="left-start"
@@ -211,7 +224,7 @@ const DepositRequest = () => {
px={2}
py={1}
>
<CheckIcon fontSize={'10px'} /> Approve
<CheckIcon fontSize={'12px'} />
</Badge>
</Tooltip>
<Tooltip
@@ -232,7 +245,7 @@ const DepositRequest = () => {
px={2}
py={1}
>
<CloseIcon fontSize={'7px'} /> Reject
<CloseIcon fontSize={'10px'} />
</Badge>
</Tooltip>
</Box>

View File

@@ -0,0 +1,128 @@
import {
Box,
Button,
FormControl,
FormLabel,
Input,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay,
Text,
useDisclosure,
} from "@chakra-ui/react";
import React from "react";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import { useForm } from "react-hook-form";
export const conformModalSchema = yup.object().shape({
fees: yup.string().required("File name is required"),
totalAmount: yup.string().required("File name is required"),
});
const ConfirmModal = ({ isOpen, onClose, firstField }) => {
const {
register,
handleSubmit,
formState: { errors },
} = useForm({
resolver: yupResolver(conformModalSchema),
});
const onSubmit = (data) => {
console.log(data);
setFile(data.document[0]);
const newDocument = {
...data,
document: data.document[0].name, // Store the document name
status: true,
id: uuidv4(),
createdAt: new Date().toISOString(),
Type: getFileIcon(file.type),
};
setCreate((prevCreate) => [...prevCreate, newDocument]);
onClose();
};
const handleFileChange = (event) => {
const selectedFile = event.target.files[0];
setFile(selectedFile);
};
return (
<Modal isOpen={isOpen} onClose={onClose} initialFocusRef={firstField}>
<ModalOverlay />
<ModalContent pb={4}>
<ModalHeader fontSize={"md"}>Confirm</ModalHeader>
<ModalCloseButton />
<Box as="form" onSubmit={handleSubmit(onSubmit)}>
<ModalBody>
<FormControl mb={4}>
<FormLabel fontSize="sm">Deposit Amount</FormLabel>
<Input
focusBorderColor='green.400'
name="fileName"
{...register("fileName")}
fontSize="sm"
type="text"
size="sm"
placeholder={"$100,000"}
readOnly
/>
</FormControl>
<FormControl mb={4}>
<FormLabel fontSize="sm">Fees</FormLabel>
<Input
focusBorderColor='green.400'
name="fileName"
{...register("fileName")}
fontSize="sm"
type="text"
size="sm"
placeholder={"$100,000"}
/>
{errors.fees && (
<Text fontSize="xs" color="red">
{errors.fees.message}
</Text>
)}
</FormControl>
<FormControl mb={4}>
<FormLabel fontSize="sm">Total Amount</FormLabel>
<Input
focusBorderColor='green.400'
name="fileName"
{...register("fileName")}
fontSize="sm"
type="text"
size="sm"
placeholder={"$100,000"}
/>
{errors.totalAmount && (
<Text fontSize="xs" color="red">
{errors.totalAmount.message}
</Text>
)}
</FormControl>
</ModalBody>
<ModalFooter>
<Button colorScheme="gray" mr={3} onClick={onClose} size={'sm'} rounded={'sm'}>
Cancel
</Button>
<Button colorScheme="green" variant="solid" size={'sm'} rounded={'sm'}>
Confirm
</Button>
</ModalFooter>
</Box>
</ModalContent>
</Modal>
);
};
export default ConfirmModal;

View File

@@ -0,0 +1,307 @@
import {
Badge,
Box,
Button,
HStack,
Input,
Switch,
Text,
Tooltip,
useToast,
useDisclosure
} from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
import { HiDotsVertical } from "react-icons/hi";
import { Link, Link as RouterLink, useNavigate } from "react-router-dom";
import { debounce } from "../../Master/Sponser/AddSponser";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import Pagination from "../../../Components/Pagination";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import CustomAlertDialog from "../../../Components/CustomAlertDialog";
import ToastBox from "../../../Components/ToastBox";
import DataTable from "../../../Components/DataTable/DataTable";
import ConfirmModal from "./ConfirmModal";
import RejectModal from "./RejectModal";
const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
const DepositHistory = () => {
const navigate = useNavigate();
const toast = useToast();
const { depositHistory, setDepositHistory, 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("");
const {
isOpen: isConfirmOpen,
onOpen: onConfirmOpen,
onClose: onConfirmClose,
} = useDisclosure();
const {
isOpen: isRejectOpen,
onOpen: onRejectOpen,
onClose: onRejectClose,
} = useDisclosure();
useEffect(() => {
// Simulate loading
const timer = setTimeout(() => {
setIsLoading(false);
}, 1500);
// Cleanup the timer on component unmount
return () => clearTimeout(timer);
}, []);
// ====================================================[Table Setup]================================================================
const tableHeadRow = [
"Sr.no",
"Date",
"Client ID",
"First Name",
"Last Name",
"Country",
"Phone Number",
"Currency",
"Deposit Amount",
"Fees",
"Total Amount",
"Amount in Investor currency",
"Status",
];
const handleUpdateStatus = debounce((id) => {
setDepositHistory((prevDepositHistory) =>
prevDepositHistory.map((depositHistory) =>
depositHistory.id === id
? { ...depositHistory, status: !depositHistory.status }
: depositHistory
)
);
toast({
render: () => <ToastBox message={"Status changed succesfully.!"} />,
});
}, 300);
// ====================================================[Table Filter]================================================================
const filteredData = depositHistory.filter((item) => {
// Filter by name (case insensitive)
const name = item.clientId;
const searchLower = searchTerm.toLowerCase();
const nameMatches = name.toLowerCase().includes(searchLower);
return nameMatches;
});
// const handleView = (id) => {
// setActionId(id);
// onViewOpen();
// };
const [extractedArray, setExtractedArray] = useState(
filteredData?.map((item, index) => ({
"Sr.no": (
<Text
w={"30px"}
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
>
{index + 1}
</Text>
),
"Date": (
<Text
w={"60px"}
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
>
{item.date}
</Text>
),
"Client ID": (
<Text
w={"60px"}
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
>
{item.clientId}
</Text>
),
"First Name": (
<Box isTruncated={true} w={"50px"}>
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
{item.firstName}
</Text>
</Box>
),
"Last Name": (
<Box w={"50px"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.lastName}
</Text>
</Box>
),
Country: (
<Box w={"70px"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.country}
</Text>
</Box>
),
"Phone Number": (
<Box w={"70px"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.phoneNumber}
</Text>
</Box>
),
Currency: (
<Box w={"50px"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
<Badge px={2} py={1}>
{item.currency}
</Badge>
</Text>
</Box>
),
"Deposit Amount": (
<Box w={"50px"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.depositAmount}
</Text>
</Box>
),
Fees: (
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.fees}
</Text>
</Box>
),
"Total Amount": (
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.totalAmount}
</Text>
</Box>
),
"Amount in Investor currency": (
<Box w={"70px"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.amountcurrency}
</Text>
</Box>
),
Status: (
<Box w={"70px"} isTruncated={true} cursor={'pointer'}>
<Text
// onClick={() => {
// setActionId(item.id);
// onConfirmOpen();
// }}
onClick={() => {
setActionId(item.id);
if (item.status === "Approved") {
onConfirmOpen();
} else {
onRejectOpen();
}
}}
as={"span"}
color={item.status === "Approved" ? "green" : "red"}
>
{item.status}
</Text>
</Box>
),
}))
);
const handleDelete = () => {
const IOtype = investmentType.filter(
(investmentType) => investmentType.id !== actionId
);
setTimeout(() => {
setInvestmentType(IOtype);
setDeleteAlert(false);
setIsLoading(false);
}, 100);
setIsLoading(true);
};
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
<ConfirmModal
isOpen={isConfirmOpen}
onClose={onConfirmClose}
// firstField={firstField}
/>
<RejectModal
isOpen={isRejectOpen}
onClose={onRejectClose}
/>
<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} />
</HStack>
</HStack>
</Box>
<DataTable
emptyMessage={`We don't have any Investment type `}
tableHeadRow={tableHeadRow}
setData={setExtractedArray}
data={extractedArray}
isLoading={isLoading}
viewActionId={actionId}
setViewActionId={setActionId}
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 DepositHistory;

View File

@@ -0,0 +1,99 @@
import {
Box,
Button,
FormControl,
FormLabel,
Input,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay,
Text,
Textarea,
useDisclosure,
} from "@chakra-ui/react";
import React from "react";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import { useForm } from "react-hook-form";
export const conformModalSchema = yup.object().shape({
comment: yup.string().required("Comment is required"),
});
const RejectModal = ({ isOpen, onClose, firstField }) => {
const {
register,
handleSubmit,
formState: { errors },
} = useForm({
resolver: yupResolver(conformModalSchema),
});
const onSubmit = (data) => {
console.log(data);
setFile(data.document[0]);
const newDocument = {
...data,
document: data.document[0].name, // Store the document name
comment: true,
id: uuidv4(),
Type: getFileIcon(file.type),
};
setCreate((prevCreate) => [...prevCreate, newDocument]);
onClose();
};
const handleFileChange = (event) => {
const selectedFile = event.target.files[0];
setFile(selectedFile);
};
return (
<Modal isOpen={isOpen} onClose={onClose} initialFocusRef={firstField}>
<ModalOverlay />
<ModalContent pb={4}>
<ModalHeader fontSize={"md"}>Reject</ModalHeader>
<ModalCloseButton />
<Box as="form" onSubmit={handleSubmit(onSubmit)}>
<ModalBody>
<FormControl mb={4}>
<FormLabel fontSize="sm">Comment</FormLabel>
<Textarea rows={6}
focusBorderColor='green.400'
name="fileName"
{...register("fileName")}
fontSize="sm"
type="textarea"
size="md"
placeholder={"$100,000"}
rounded={'md'}
resize={'none'}
/>
{errors.comment && (
<Text fontSize="xs" color="red">
{errors.comment.message}
</Text>
)}
</FormControl>
</ModalBody>
<ModalFooter>
<Button colorScheme="gray" mr={3} onClick={onClose} size={'sm'} rounded={'sm'}>
Cancel
</Button>
<Button colorScheme="green" variant="solid" size={'sm'} rounded={'sm'}>
Send
</Button>
</ModalFooter>
</Box>
</ModalContent>
</Modal>
);
};
export default RejectModal;

View File

@@ -222,7 +222,6 @@ const InvestmentDocument = ({ control, errors, enableNextTab, index }) => {
</Box>
),
}));
return (
<Box>
<Box display="flex" justifyContent="space-between" mb={4}>
@@ -246,7 +245,7 @@ const InvestmentDocument = ({ control, errors, enableNextTab, index }) => {
>
Add Document
</Button>
<InvestmentDocuments
<InvestmentDocuments
create={create}
setCreate={setCreate}
isOpen={isOpen}

View File

@@ -67,13 +67,13 @@ const InvestorDetails = () => {
// ====================================================[Table Setup]================================================================
const tableHeadRow = [
"Sr N/O",
"Client ID",
"First Name",
"Last Name",
"Country",
"Phone Number",
"E-mail ID",
"KYC Status",
"Invested Property",
"Status",
"Action",
];
@@ -120,6 +120,13 @@ const InvestorDetails = () => {
{item.id}
</Text>
),
"Client ID": (
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.clientId}
</Text>
</Box>
),
"First Name": (
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
@@ -162,15 +169,6 @@ const InvestorDetails = () => {
</Badge>
</Box>
),
"Invested Property": (
<Box w={"auto"} isTruncated={true}>
<Badge as={"span"} color={"teal.900"} variant='outline' colorScheme='green' fontWeight={500} px={2} py={0.5}>
<Link to='/investor-details/view-investor-details'>
View
</Link>
</Badge>
</Box>
),
Status: (
<Switch
size={"sm"}
@@ -191,7 +189,7 @@ const InvestorDetails = () => {
>
<Button
onClick={() => {
navigate(`/profile-view/${item.id}`);
navigate(`/investor-details/profile-view/${item.id}`);
}}
_hover={{ color: "green.500" }}
// transition={"0.5s all"}
@@ -202,49 +200,6 @@ const InvestorDetails = () => {
<ViewIcon />
</Button>
</Tooltip>
<Tooltip
rounded={"sm"}
fontSize={"xs"}
label="Edit"
bg="#fff"
color={"blue.500"}
placement="top"
>
<Button
onClick={() => handleEdit(item.id)}
_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>
),
}));

View File

@@ -1,4 +1,4 @@
import { Box } from "@chakra-ui/react";
import { Box, Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
import { useNavigate, useParams } from "react-router-dom";
import { useContext, useEffect, useState } from "react";
import { useForm } from "react-hook-form"; // assuming react-hook-form is used
@@ -6,6 +6,7 @@ import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import { ArrowBackIcon } from "@chakra-ui/icons";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import FormInputView from "../../../Components/FormInputView";
import ViewInvestorDetails from "./ViewInvestorDetails";
const ProfileView = () => {
const navigate = useNavigate();
@@ -23,13 +24,21 @@ const ProfileView = () => {
}
const formFields = [
{
label: "Client ID",
value: foundObject.clientId,
type: "text",
isRequired: true,
section: "",
width: "32%",
},
{
label: "Full Name",
value: foundObject.fullName,
type: "text",
isRequired: true,
section: "",
width:"32%"
width: "32%",
},
{
label: "E-mail ID",
@@ -38,7 +47,7 @@ const ProfileView = () => {
isRequired: true,
arabic: true,
section: "",
width:"32%"
width: "32%",
},
{
label: "Phone Number",
@@ -47,7 +56,7 @@ const ProfileView = () => {
isRequired: true,
arabic: true,
section: "",
width:"32%"
width: "32%",
},
{
label: "Address",
@@ -55,7 +64,7 @@ const ProfileView = () => {
type: "text",
isRequired: true,
section: "",
width:"32%"
width: "32%",
},
{
label: "Bank Name",
@@ -63,7 +72,7 @@ const ProfileView = () => {
type: "text",
isRequired: true,
section: "",
width:"32%"
width: "32%",
},
{
label: "Branch Address",
@@ -71,7 +80,7 @@ const ProfileView = () => {
type: "text",
isRequired: true,
section: "",
width:"32%"
width: "32%",
},
{
label: "IBAN",
@@ -79,7 +88,7 @@ const ProfileView = () => {
type: "text",
isRequired: true,
section: "",
width:"32%"
width: "32%",
},
{
label: "SWIFT/BIC code",
@@ -87,7 +96,7 @@ const ProfileView = () => {
type: "text",
isRequired: true,
section: "",
width:"32%"
width: "32%",
},
{
label: "Reference ID",
@@ -95,7 +104,7 @@ const ProfileView = () => {
type: "text",
isRequired: true,
section: "",
width:"32%"
width: "32%",
},
];
@@ -116,7 +125,38 @@ const ProfileView = () => {
>
<ArrowBackIcon cursor={"pointer"} /> Back
</span>
<FormInputView width={"32%"} groupedFields={groupedFields} />
<Tabs mt={0}>
<Box>
<TabList >
<Tab
fontSize={"sm"}
_selected={{
color: "#004118",
borderBottom: "2px solid #38a169",
}}
>
View Details
</Tab>
<Tab
fontSize={"sm"}
_selected={{
color: "#004118",
borderBottom: "2px solid #38a169",
}}
>
Invested Property
</Tab>
</TabList>
</Box>
<TabPanels>
<TabPanel>
<FormInputView width={"32%"} groupedFields={groupedFields} />
</TabPanel>
<TabPanel>
<ViewInvestorDetails />
</TabPanel>
</TabPanels>
</Tabs>
</Box>
);
};

View File

@@ -61,7 +61,6 @@ const ViewInvestorDetails = () => {
// ====================================================[Table Setup]================================================================
const tableHeadRow = [
"Sr N/O",
"Deal ID",
"Deal Name",
"Sponsor Name",
"Investment Amount",
@@ -104,7 +103,7 @@ const ViewInvestorDetails = () => {
const extractedArray = filteredData?.map((item) => ({
id: item?.id,
"Sr N/O": (
<Text
<Text w={'50px'}
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"gray.600"}
@@ -113,17 +112,10 @@ const ViewInvestorDetails = () => {
{item.id}
</Text>
),
"Deal ID": (
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.dealId}
</Text>
</Box>
),
"Deal Name": (
<Box w={"auto"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.dealId}
{item.dealName}
</Text>
</Box>
),
@@ -236,17 +228,6 @@ const ViewInvestorDetails = () => {
<HStack display={"flex"} alignItems={"center"}>
<Pagination totalItems={10} />
<Link to={"/sponser/add-sponser"}>
<Button
leftIcon={<AddIcon />}
colorScheme={"green"}
rounded={"sm"}
size={"sm"}
>
Add
</Button>
</Link>
</HStack>
</HStack>
</Box>
@@ -258,8 +239,6 @@ const ViewInvestorDetails = () => {
isLoading={isLoading}
viewActionId={actionId}
setViewActionId={setActionId}
// totalPages={10}
setMouseEnteredId={setMouseEnteredId}
setMouseEntered={setMouseEntered}
/>
@@ -271,6 +250,7 @@ const ViewInvestorDetails = () => {
alertHandler={handleDelete}
isLoading={isLoading}
/>
</Box>
);
};

View File

@@ -0,0 +1,95 @@
import {
Box,
Button,
FormControl,
FormLabel,
Input,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay,
Text,
useDisclosure,
} from "@chakra-ui/react";
import React from "react";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import { useForm } from "react-hook-form";
export const conformModalSchema = yup.object().shape({
fees: yup.string().required("File name is required"),
totalAmount: yup.string().required("File name is required"),
});
const ConfirmModal = ({ isOpen, onClose, firstField }) => {
const {
register,
handleSubmit,
formState: { errors },
} = useForm({
resolver: yupResolver(conformModalSchema),
});
const onSubmit = (data) => {
console.log(data);
setFile(data.document[0]);
const newDocument = {
...data,
document: data.document[0].name, // Store the document name
status: true,
id: uuidv4(),
createdAt: new Date().toISOString(),
Type: getFileIcon(file.type),
};
setCreate((prevCreate) => [...prevCreate, newDocument]);
onClose();
};
const handleFileChange = (event) => {
const selectedFile = event.target.files[0];
setFile(selectedFile);
};
return (
<Modal isOpen={isOpen} onClose={onClose} initialFocusRef={firstField}>
<ModalOverlay />
<ModalContent pb={4}>
<ModalHeader fontSize={"md"}>Confirm</ModalHeader>
<ModalCloseButton />
<Box as="form" onSubmit={handleSubmit(onSubmit)}>
<ModalBody>
<FormControl mb={4}>
<FormLabel fontSize="sm">Withdrawal Amount</FormLabel>
<Input
focusBorderColor='green.400'
name="fileName"
{...register("fileName")}
fontSize="sm"
type="text"
size="sm"
placeholder={"$100,000"}
readOnly
/>
</FormControl>
</ModalBody>
<ModalFooter>
<Button colorScheme="gray" mr={3} onClick={onClose} size={'sm'} rounded={'sm'}>
Cancel
</Button>
<Button colorScheme="green" variant="solid" size={'sm'} rounded={'sm'}>
Confirm
</Button>
</ModalFooter>
</Box>
</ModalContent>
</Modal>
);
};
export default ConfirmModal;

View File

@@ -0,0 +1,100 @@
import {
Box,
Button,
FormControl,
FormLabel,
Input,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay,
Text,
Textarea,
useDisclosure,
} from "@chakra-ui/react";
import React from "react";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import { useForm } from "react-hook-form";
export const conformModalSchema = yup.object().shape({
comment: yup.string().required("Comment is required"),
});
const RejectModal = ({ isOpen, onClose, firstField }) => {
const {
register,
handleSubmit,
formState: { errors },
} = useForm({
resolver: yupResolver(conformModalSchema),
});
const onSubmit = (data) => {
console.log(data);
setFile(data.document[0]);
const newDocument = {
...data,
document: data.document[0].name, // Store the document name
comment: true,
id: uuidv4(),
Type: getFileIcon(file.type),
};
setCreate((prevCreate) => [...prevCreate, newDocument]);
onClose();
};
const handleFileChange = (event) => {
const selectedFile = event.target.files[0];
setFile(selectedFile);
};
return (
<Modal isOpen={isOpen} onClose={onClose} initialFocusRef={firstField}>
<ModalOverlay />
<ModalContent pb={4}>
<ModalHeader fontSize={"md"}>Reject</ModalHeader>
<ModalCloseButton />
<Box as="form" onSubmit={handleSubmit(onSubmit)}>
<ModalBody>
<FormControl mb={4}>
<FormLabel fontSize="sm">Comment</FormLabel>
<Textarea rows={6}
focusBorderColor='green.400'
name="fileName"
{...register("fileName")}
fontSize="sm"
type="textarea"
size="md"
placeholder={"$100,000"}
rounded={'md'}
resize={'none'}
/>
{errors.comment && (
<Text fontSize="xs" color="red">
{errors.comment.message}
</Text>
)}
</FormControl>
</ModalBody>
<ModalFooter>
<Button colorScheme="gray" mr={3} onClick={onClose} size={'sm'} rounded={'sm'}>
Cancel
</Button>
<Button colorScheme="green" variant="solid" size={'sm'} rounded={'sm'}>
Send
</Button>
</ModalFooter>
</Box>
</ModalContent>
</Modal>
);
};
export default RejectModal;

View File

@@ -0,0 +1,274 @@
import {
Avatar,
Badge,
Box,
Button,
HStack,
Input,
Text,
Tooltip,
useDisclosure,
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 { CheckIcon, CloseIcon } from "@chakra-ui/icons";
import ConfirmModal from "./ConfirmModal";
import RejectModal from "./RejectModal";
// import { formatDate } from "../../Components/Functions/UTCConvertor";
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("");
const {
isOpen: isConfirmOpen,
onOpen: onConfirmOpen,
onClose: onConfirmClose,
} = useDisclosure();
const {
isOpen: isRejectOpen,
onOpen: onRejectOpen,
onClose: onRejectClose,
} = useDisclosure();
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.clientId;
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",
"Client ID",
"First Name",
"Last Name",
"Country",
"Phone Number",
"Currency",
"Withdrawal Amount",
"Amount in Investor currency",
"Status",
];
const [extractedArray, setExtractedArray] = useState(
filteredData?.map((item, index) => ({
// id: item?.id,
"Sr.no": (
<Text
w={"auto"}
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
>
{index + 1}
</Text>
),
"Date": (
<Text
w={"60px"}
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
>
{item.date}
</Text>
),
"Client ID": (
<Text
w={"60px"}
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
>
{item.clientId}
</Text>
),
"First Name": (
<Box isTruncated={true} w={'50px'}>
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
{item.firstName}
</Text>
</Box>
),
"Last Name": (
<Box w={"50px"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.lastName}
</Text>
</Box>
),
Country: (
<Box w={"70px"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.country}
</Text>
</Box>
),
"Phone Number": (
<Box w={"70px"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.phoneNumber}
</Text>
</Box>
),
Currency: (
<Box w={"50px"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
<Badge px={2} py={1}>{item.currency}</Badge>
</Text>
</Box>
),
"Withdrawal Amount": (
<Box w={"50px"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.withDrawalAmount}
</Text>
</Box>
),
"Amount in Investor currency": (
<Box w={"70px"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.amountcurrency}
</Text>
</Box>
),
Status: (
<Box w={"70px"} isTruncated={true} cursor={'pointer'}>
<Text
onClick={() => {
setActionId(item.id);
if (item.status === "Approved") {
onConfirmOpen();
} else {
onRejectOpen();
}
}}
as={"span"}
color={item.status === "Approved" ? "green" : "red"}
>
{item.status}
</Text>
</Box>
),
}))
);
const handleDelete = () => {
const updatedSponsors = sponser.filter(
(sponsor) => sponsor.id !== actionId
);
setTimeout(() => {
setSponser(updatedSponsors);
setDeleteAlert(false);
setIsLoading(false);
}, 100);
setIsLoading(true);
};
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
<ConfirmModal
isOpen={isConfirmOpen}
onClose={onConfirmClose}
// firstField={firstField}
/>
<RejectModal
isOpen={isRejectOpen}
onClose={onRejectClose}
/>
<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} />
</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 ViewHistory;

View File

@@ -43,7 +43,7 @@ const PendingRequest = () => {
// ====================================================[Table Filter]================================================================
const filteredData = pendingRequest.filter((item) => {
// Filter by name (case insensitive)
const name = item.Distribution;
const name = item.clientId;
const searchLower = searchTerm.toLowerCase();
const nameMatches = name.toLowerCase().includes(searchLower);
@@ -61,114 +61,155 @@ const PendingRequest = () => {
// ====================================================[Table Setup]================================================================
const tableHeadRow = [
"Sr No.",
"Sr.no",
"Date",
"Distribution Amount",
"Charges (USD)",
"Year",
"Quater",
"Client ID",
"First Name",
"Last Name",
"Country",
"Phone Number",
"Currency",
"Withdrawal Amount",
"Amount in Investor currency",
"Action",
];
const extractedArray = filteredData?.map((item, index) => ({
id: item?.id,
"Sr No.": (
<Text
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"gray.800"}
className="d-flex align-items-center web-text-small"
fontWeight={"500"}
>
{index + 1}.
</Text>
),
Date: (
<Text
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"gray.600"}
className="d-flex align-items-center web-text-small"
fontWeight={"500"}
>
{formatDate(item.date)}
</Text>
),
"Distribution Amount": (
<Text
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"gray.600"}
className="d-flex align-items-center web-text-small"
fontWeight={"500"}
>
{item.Distribution}
</Text>
),
"Charges (USD)": (
<Text
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"gray.800"}
className="d-flex align-items-center web-text-small"
fontWeight={"500"}
>
{item.charge}
{/* {formatDate(item.charge)} */}
</Text>
),
Year: (
<Text
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"gray.800"}
className="d-flex align-items-center web-text-small"
fontWeight={"500"}
>
{item.year}
</Text>
),
Quater: (
<Text
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"gray.600"}
className="d-flex align-items-center web-text-small"
fontWeight={"500"}
>
{item.quater}
</Text>
),
Action: (
<Box display={"flex"} justifyContent={"space-around"}>
<Tooltip
rounded={"sm"}
fontSize={"xs"}
label="Accept"
bg="#fff"
color={"green.500"}
placement="left-start"
const [extractedArray, setExtractedArray] = useState(
filteredData?.map((item, index) => ({
// id: item?.id,
"Sr.no": (
<Text
w={"auto"}
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
>
<Button color="green.500" rounded={"sm"} size={"xs"}>
<CheckIcon />
</Button>
</Tooltip>
<Tooltip
rounded={"sm"}
fontSize={"xs"}
label="Reject"
bg="#fff"
color={"red.500"}
placement="left-start"
{index + 1}
</Text>
),
"Date": (
<Text
w={"60px"}
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
>
<Button color="red.500" rounded={"sm"} size={"xs"}>
<CloseIcon />
</Button>
</Tooltip>
</Box>
),
}));
{item.date}
</Text>
),
"Client ID": (
<Text
w={"60px"}
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"teal.900"}
fontWeight={"500"}
className="d-flex align-items-center web-text-small"
>
{item.clientId}
</Text>
),
"First Name": (
<Box isTruncated={true} w={'50px'}>
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
{item.firstName}
</Text>
</Box>
),
"Last Name": (
<Box w={"50px"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.lastName}
</Text>
</Box>
),
Country: (
<Box w={"70px"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.country}
</Text>
</Box>
),
"Phone Number": (
<Box w={"70px"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.phoneNumber}
</Text>
</Box>
),
Currency: (
<Box w={"50px"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
<Badge px={2} py={1}>{item.currency}</Badge>
</Text>
</Box>
),
"Withdrawal Amount": (
<Box w={"50px"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.withDrawalAmount}
</Text>
</Box>
),
"Amount in Investor currency": (
<Box w={"70px"} isTruncated={true}>
<Text as={"span"} color={"teal.900"}>
{item.amountcurrency}
</Text>
</Box>
),
Action: (
<Box display={"flex"} justifyContent={"space-around"} gap={2}>
<Tooltip
rounded={"sm"}
fontSize={"xs"}
label="Approve"
bg="#fff"
color={"green.500"}
placement="left-start"
>
<Badge
colorScheme="green"
color="green.500"
rounded={"sm"}
size={"xs"}
textTransform={"inherit"}
fontWeight={500}
px={2}
py={1}
>
<CheckIcon fontSize={'12px'} />
</Badge>
</Tooltip>
<Tooltip
rounded={"sm"}
fontSize={"xs"}
label="Reject"
bg="#fff"
color={"red.500"}
placement="left-start"
>
<Badge
colorScheme="red"
color="red.500"
rounded={"sm"}
size={"xs"}
textTransform={"inherit"}
fontWeight={500}
px={2}
py={1}
>
<CloseIcon fontSize={'10px'} />
</Badge>
</Tooltip>
</Box>
),
}))
);
const handleDelete = () => {
const updatedSponsors = sponser.filter(

View File

@@ -1,220 +0,0 @@
import {
Avatar,
Badge,
Box,
Button,
HStack,
Input,
Text,
Tooltip,
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 { CheckIcon, CloseIcon } from "@chakra-ui/icons";
// import { formatDate } from "../../Components/Functions/UTCConvertor";
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",
"Action",
];
const extractedArray = filteredData?.map((item, index) => ({
id: item?.id,
"Sr No.": (
<Text
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"gray.800"}
className="d-flex align-items-center web-text-small"
fontWeight={'500'}
>
{index + 1}.
</Text>
),
"Date": (
<Text
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"gray.600"}
className="d-flex align-items-center web-text-small"
fontWeight={'500'}
>
{formatDate(item.date)}
</Text>
),
"Distribution Amount": (
<Text
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"gray.600"}
className="d-flex align-items-center web-text-small"
fontWeight={'500'}
>
{item.Distribution}
</Text>
),
"Charges (USD)": (
<Text
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"gray.800"}
className="d-flex align-items-center web-text-small"
fontWeight={'500'}
>
{item.charge}
{/* {formatDate(item.charge)} */}
</Text>
),
Year: (
<Text
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"gray.800"}
className="d-flex align-items-center web-text-small"
fontWeight={'500'}
>
{item.year}
</Text>
),
Quater: (
<Text
justifyContent={slideFromRight ? "right" : "left"}
as={"span"}
color={"gray.600"}
className="d-flex align-items-center web-text-small"
fontWeight={'500'}
>
{item.quarter}
</Text>
),
Action: (
<Box display={'flex'} justifyContent={'space-around'}>
<Tooltip rounded={'sm'} fontSize={'xs'} label='Accept' bg='#fff' color={'green.500'} placement="left-start">
<Button color="green.500" rounded={'sm'} size={'xs'}>
<CheckIcon /></Button></Tooltip>
<Tooltip rounded={'sm'} fontSize={'xs'} label='Reject' bg='#fff' color={'red.500'} placement="left-start">
<Button color="red.500" rounded={'sm'} size={'xs'}>
<CloseIcon /></Button></Tooltip>
</Box>
),
}));
const handleDelete = () => {
const updatedSponsors = sponser.filter(
(sponsor) => sponsor.id !== actionId
);
setTimeout(() => {
setSponser(updatedSponsors);
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} />
</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 ViewHistory;

View File

@@ -31,9 +31,9 @@ import EditSponser from "../Pages/Master/Sponser/EditSponser";
import Sponser from "../Pages/Master/Sponser/Sponsers";
import ViewSponser from "../Pages/Master/Sponser/ViewSponser";
import PendingRequest from "../Pages/WithDrawal/PendingRequest";
import ViewHistory from "../Pages/WithDrawal/ViewHistory";
import ViewHistory from "../Pages/WithDrawal/DrawalView/ViewHistory";
import DepositRequest from "../Pages/Deposit/DepositRequest";
import DepositHistory from "../Pages/Deposit/DepositHistory";
import DepositHistory from "../Pages/Deposit/DepositViewHistory/DepositHistory";
export const RouteLink = [
// =============[ Tanami ]================
@@ -61,7 +61,7 @@ export const RouteLink = [
// ===============[ Investor Management]===============
{ path: "/investor-details", Component: InvestorDetails },
{ path: "/profile-view/:id", Component: ProfileView },
{ path: "/investor-details/profile-view/:id", Component: ProfileView },
{ path: "/investor-details/view-investor-details", Component: ViewInvestorDetails },
{ path: "/investor-transactions", Component: InvestorTransactions },