363 lines
10 KiB
JavaScript
363 lines
10 KiB
JavaScript
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 { CheckIcon, CloseIcon } from "@chakra-ui/icons";
|
|
import DrawalRequestReject from "./DrawalRequestReject";
|
|
import { useGetDrawalRequestQuery } from "../../../Services/drawal.request.service";
|
|
import { TABLE_PAGINATION } from "../../../Constants/Paginations";
|
|
import NormalTable from "../../../Components/DataTable/NormalTable"
|
|
import DrawalRequestApprove from "./DrawalRequestApprove";
|
|
import { formatDate } from "../../../Components/Functions/UTCConvertor";
|
|
import { generateSerialNumber } from "../../../Constants/Constants";
|
|
|
|
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("");
|
|
|
|
const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
|
|
const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
|
|
|
|
const formatDate = (date) => {
|
|
return new Date(date).toLocaleDateString('en-GB', {
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
year: 'numeric',
|
|
});
|
|
};
|
|
|
|
const {
|
|
isOpen: isConfirmOpen,
|
|
onOpen: onConfirmOpen,
|
|
onClose: onConfirmClose,
|
|
} = useDisclosure();
|
|
const {
|
|
isOpen: isRejectOpen,
|
|
onOpen: onRejectOpen,
|
|
onClose: onRejectClose,
|
|
} = useDisclosure();
|
|
|
|
const {
|
|
data,
|
|
isLoading: drawalRequestLoading,
|
|
error,
|
|
refetch
|
|
} = useGetDrawalRequestQuery({ page: currentPage, size: pageSize });
|
|
|
|
|
|
|
|
// Use useEffect to refetch data when the component mounts
|
|
useEffect(() => {
|
|
refetch();
|
|
}, [refetch]);
|
|
|
|
useEffect(() => {
|
|
|
|
// Simulate loading
|
|
const timer = setTimeout(() => {
|
|
setIsLoading(false);
|
|
}, 1500);
|
|
|
|
// Cleanup the timer on component unmount
|
|
return () => clearTimeout(timer);
|
|
}, []);
|
|
|
|
// ====================================================[Table Filter]================================================================
|
|
const filteredData = data?.data?.rows.filter((item) => {
|
|
// Filter by name (case insensitive)
|
|
const name = item.firstName;
|
|
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",
|
|
"Withdrawal Amount",
|
|
// "Currency",
|
|
// "Withdrawal Amount",
|
|
"Action",
|
|
];
|
|
|
|
|
|
|
|
const extractedArray = filteredData?.map((item, idx) => ({
|
|
// 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"
|
|
>
|
|
{generateSerialNumber(idx,currentPage, pageSize )}
|
|
</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"
|
|
>
|
|
{formatDate(item?.createdAt)}
|
|
</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.clientReference_id}
|
|
</Text>
|
|
),
|
|
"First Name": (
|
|
<Box isTruncated={true} w={'80px'}>
|
|
<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.countryName}
|
|
</Text>
|
|
</Box>
|
|
),
|
|
"Phone Number": (
|
|
<Box w={"100px"} isTruncated={true}>
|
|
<Text as={"span"} color={"teal.900"}>
|
|
{item.mobileNumber}
|
|
</Text>
|
|
</Box>
|
|
),
|
|
// Currency: (
|
|
// <Box w={"60px"} isTruncated={true}>
|
|
// <Text as={"span"} color={"teal.900"}>
|
|
// <Badge ms={1} colorScheme="green">{item?.currencyCode}</Badge>
|
|
// </Text>
|
|
// </Box>
|
|
// ),
|
|
// "Withdrawal Amount": (
|
|
// <Box w={"80px"} isTruncated={true}>
|
|
// <Text as={"span"} color={"teal.900"}>
|
|
// {parseFloat(item?.USDAmount || 0).toLocaleString(undefined, {
|
|
// minimumFractionDigits: 2,
|
|
// maximumFractionDigits: 2,
|
|
// })}💲
|
|
// {/* {item.USDAmount} */}
|
|
// </Text>
|
|
// </Box>
|
|
// ),
|
|
"Withdrawal Amount": (
|
|
<Box w={"100px"} isTruncated={true} display={'flex'} justifyContent={'end'}>
|
|
<Text as={"span"} color={"teal.900"}>
|
|
{/* {item.investorAmount} */}
|
|
{parseFloat(item?.investorAmount || 0).toLocaleString(undefined, {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2,
|
|
})}<Badge ms={1} colorScheme="green">{item?.currencyCode}</Badge>
|
|
</Text>
|
|
</Box>
|
|
),
|
|
Action: (
|
|
<Box display={"flex"} justifyContent={"center"} gap={2}>
|
|
<Tooltip
|
|
rounded={"sm"}
|
|
fontSize={"xs"}
|
|
label="Approve"
|
|
bg="#fff"
|
|
color={"green.500"}
|
|
placement="left-start"
|
|
>
|
|
<Button
|
|
// colorScheme="forestGreen"
|
|
// color="green.500"
|
|
rounded={"sm"}
|
|
size={"xs"}
|
|
textTransform={"inherit"}
|
|
fontWeight={500}
|
|
px={2}
|
|
py={1}
|
|
onClick={() => {
|
|
setActionId(item.id);
|
|
onConfirmOpen();
|
|
}}
|
|
colorScheme="green"
|
|
variant={"solid"}
|
|
cursor={"pointer"}
|
|
>
|
|
<CheckIcon fontSize={"12px"} />
|
|
</Button>
|
|
</Tooltip>
|
|
<Tooltip
|
|
rounded={"sm"}
|
|
fontSize={"xs"}
|
|
label="Reject"
|
|
bg="#fff"
|
|
color={"red.500"}
|
|
placement="left-start"
|
|
>
|
|
<Button
|
|
colorScheme="red"
|
|
// color="red.500"
|
|
rounded={"sm"}
|
|
size={"xs"}
|
|
textTransform={"inherit"}
|
|
fontWeight={500}
|
|
px={2}
|
|
onClick={() => {
|
|
setActionId(item.id);
|
|
onRejectOpen();
|
|
}}
|
|
py={1}
|
|
// variant={"solid"}
|
|
>
|
|
<CloseIcon fontSize={"10px"} />
|
|
</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)}
|
|
/>
|
|
|
|
<Pagination
|
|
isLoading={drawalRequestLoading}
|
|
pageSize={pageSize}
|
|
setPageSize={setPageSize}
|
|
currentPage={currentPage}
|
|
setCurrentPage={setCurrentPage}
|
|
totalItems={data?.data?.totalItems}
|
|
/>
|
|
</HStack>
|
|
</Box>
|
|
|
|
<NormalTable
|
|
isLoading={drawalRequestLoading}
|
|
emptyMessage={`We don't have any Sponers `}
|
|
tableHeadRow={tableHeadRow}
|
|
data={extractedArray}
|
|
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}
|
|
/>
|
|
<DrawalRequestApprove
|
|
// data={data?.data?.rows}
|
|
isOpen={isConfirmOpen}
|
|
onClose={onConfirmClose}
|
|
id={actionId}
|
|
// firstField={firstField}
|
|
/>
|
|
<DrawalRequestReject
|
|
isOpen={isRejectOpen}
|
|
onClose={onRejectClose}
|
|
id={actionId}
|
|
/>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default PendingRequest;
|