429 lines
12 KiB
JavaScript
429 lines
12 KiB
JavaScript
import {
|
|
Badge,
|
|
Box,
|
|
Button,
|
|
HStack,
|
|
Input,
|
|
Link,
|
|
Text,
|
|
useBoolean,
|
|
useDisclosure,
|
|
useToast,
|
|
} from "@chakra-ui/react";
|
|
import React, { useContext, useEffect, useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import CustomAlertDialog from "../../../Components/CustomAlertDialog";
|
|
import NormalTable from "../../../Components/DataTable/NormalTable";
|
|
import Pagination from "../../../Components/Pagination";
|
|
import ToastBox from "../../../Components/ToastBox";
|
|
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
|
|
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
|
|
import { useGetDepositHistoryQuery } from "../../../Services/deposit.request.service";
|
|
import { debounce } from "../../Master/Sponser/AddSponser";
|
|
|
|
import { ExternalLinkIcon } from "@chakra-ui/icons";
|
|
import InitiateReversalPopup from "../../../Components/Popups/InitiateReversalPopups";
|
|
import { generateSerialNumber, isMaker } from "../../../Constants/Constants";
|
|
import { TABLE_PAGINATION } from "../../../Constants/Paginations";
|
|
import { useCreateBankDepositReversalRequestMutation } from "../../../Services/bankdeposit.request.service";
|
|
|
|
const formatDate = (date) => {
|
|
return new Date(date).toLocaleDateString("en-GB", {
|
|
day: "2-digit",
|
|
month: "2-digit",
|
|
year: "numeric",
|
|
});
|
|
}; // Simple date formatter
|
|
|
|
const DepositHistory = () => {
|
|
const navigate = useNavigate();
|
|
const toast = useToast();
|
|
const { depositHistory, setDepositHistory, slideFromRight } =
|
|
useContext(GlobalStateContext);
|
|
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 [createBankDepositReversalRequest] =
|
|
useCreateBankDepositReversalRequestMutation();
|
|
|
|
// =========================== [Use State] =============================
|
|
const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
|
|
const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|
const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
|
|
const [reversalId, setReversalId] = useState();
|
|
const {
|
|
isOpen: isOpenInRev,
|
|
onOpen: onOpenInRev,
|
|
onClose: onCloseInRev,
|
|
} = useDisclosure();
|
|
const [isReversalLoading, setIsReversalLoading] = useBoolean();
|
|
|
|
// Debounce the search term to avoid making a request on every keystroke
|
|
useEffect(() => {
|
|
const handler = setTimeout(() => {
|
|
setDebouncedSearchTerm(searchTerm);
|
|
}, 500); // Adjust delay as needed
|
|
return () => {
|
|
clearTimeout(handler);
|
|
};
|
|
}, [searchTerm]);
|
|
|
|
const {
|
|
data,
|
|
error,
|
|
refetch,
|
|
isLoading: depositHistoryLoading,
|
|
} = useGetDepositHistoryQuery(
|
|
{
|
|
page: debouncedSearchTerm ? undefined : currentPage, // Omit pagination for search
|
|
size: debouncedSearchTerm ? undefined : pageSize, // Omit pagination for search
|
|
search: debouncedSearchTerm,
|
|
},
|
|
{
|
|
skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request
|
|
}
|
|
);
|
|
|
|
// Use useEffect to refetch data when the component mounts
|
|
useEffect(() => {
|
|
refetch();
|
|
}, [refetch]);
|
|
|
|
// ====================================================[Table Setup]================================================================
|
|
const tableHeadRow = [
|
|
"Sr.no",
|
|
"Client ID",
|
|
"First Name",
|
|
"Last Name",
|
|
"Country",
|
|
"Phone Number",
|
|
"Deposit Amount",
|
|
"Deposit Date",
|
|
"Status",
|
|
"Supporting's",
|
|
isMaker() && "Reversal Action",
|
|
];
|
|
|
|
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);
|
|
|
|
const filteredData = data?.data?.rows
|
|
.filter((item) => {
|
|
// Filter by name (case insensitive)
|
|
const name = [item.firstName, item.lastName, item.countryName]
|
|
.filter(Boolean)
|
|
.join(" ");
|
|
const searchLower = searchTerm.toLowerCase();
|
|
const nameMatches = name.toLowerCase().includes(searchLower);
|
|
|
|
// Filter by status (Uncomment and use if needed)
|
|
// const status = item.status;
|
|
// const statusLower = status ? "active" : "inactive";
|
|
|
|
// const statusMatches =
|
|
// statusFilter === "all" ||
|
|
// (statusFilter === "active" && status === true) ||
|
|
// (statusFilter === "inactive" && status === false);
|
|
|
|
return nameMatches;
|
|
})
|
|
.sort((b, a) => new Date(a.createdAt) - new Date(b.createdAt));
|
|
|
|
// const handleView = (id) => {
|
|
// setActionId(id);
|
|
// onViewOpen();
|
|
// };
|
|
|
|
const extractedArray = data?.data?.rows?.map((item, idx) => ({
|
|
"Sr.no": (
|
|
<Text
|
|
w={"10px"}
|
|
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>
|
|
),
|
|
"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={"60px"}>
|
|
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
|
|
{item?.firstName}
|
|
</Text>
|
|
</Box>
|
|
),
|
|
"Last Name": (
|
|
<Box w={"70px"} isTruncated={true}>
|
|
<Text as={"span"} color={"teal.900"}>
|
|
{item?.lastName}
|
|
</Text>
|
|
</Box>
|
|
),
|
|
Country: (
|
|
<Box w={"80px"} isTruncated={true}>
|
|
<Text as={"span"} color={"teal.900"}>
|
|
{item?.countryName}
|
|
</Text>
|
|
</Box>
|
|
),
|
|
"Phone Number": (
|
|
<Box w={"80px"} isTruncated={true}>
|
|
<Text as={"span"} color={"teal.900"}>
|
|
{item?.mobileNumber}
|
|
</Text>
|
|
</Box>
|
|
),
|
|
"Deposit Amount": (
|
|
<Box isTruncated={true} display={"flex"} justifyContent={"end"}>
|
|
<Text as={"span"} color={"teal.900"} textAlign={"right"}>
|
|
{parseFloat(item?.investorAmount || 0).toLocaleString(undefined, {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2,
|
|
})}
|
|
<Badge ms={1} colorScheme="green">
|
|
{item?.currencyCode}
|
|
</Badge>
|
|
</Text>
|
|
</Box>
|
|
),
|
|
"Deposit 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>
|
|
),
|
|
Status: (
|
|
<Box w={"70px"} isTruncated={true} cursor={"pointer"}>
|
|
<Text
|
|
as={"span"}
|
|
color={
|
|
item.transactionStatus === "Approved" ? "green.500" : "red.500"
|
|
}
|
|
fontWeight={700}
|
|
>
|
|
{item.transactionStatus}
|
|
</Text>
|
|
</Box>
|
|
),
|
|
"Supporting's":
|
|
item.transactionStatus === "Approved" ? (
|
|
<Text
|
|
w={"60px"}
|
|
justifyContent={slideFromRight ? "right" : "left"}
|
|
as={"span"}
|
|
color={"teal.900"}
|
|
fontWeight={"500"}
|
|
className="d-flex align-items-center web-text-small"
|
|
>
|
|
{/* {item?.supporting_FileName} */}
|
|
<Badge
|
|
px={2}
|
|
py={0.5}
|
|
display={"flex"}
|
|
alignItems={"center"}
|
|
textTransform={"inherit"}
|
|
fontWeight={500}
|
|
colorScheme={"forestGreen"}
|
|
>
|
|
<Link
|
|
href={import.meta.env.VITE_IMAGE_URL + item?.supporting_FileName}
|
|
isExternal
|
|
>
|
|
<Box as="span" cursor={"pointer"}>
|
|
View
|
|
</Box>
|
|
<ExternalLinkIcon />
|
|
</Link>
|
|
{/* <Link to="www.google.com" isExternal>
|
|
<Box as="span">View</Box> <ExternalLinkIcon />
|
|
</Link> */}
|
|
</Badge>
|
|
</Text>
|
|
) : (
|
|
""
|
|
),
|
|
"Reversal Action": (
|
|
<Box w={"120px"} isTruncated={true} cursor={"pointer"}>
|
|
{item.transactionStatus === "Approved" ? (
|
|
<Text
|
|
as={"span"}
|
|
color={!item.isReversal ? "green.500" : "#FFBB00"}
|
|
fontWeight={700}
|
|
>
|
|
{!item.isReversal ? (
|
|
<Button
|
|
onClick={() => {
|
|
onOpenInRev(); // Call the function
|
|
setReversalId(item.id);
|
|
}}
|
|
colorScheme="teal"
|
|
size="xs"
|
|
variant="outline"
|
|
>
|
|
Initiate Reversal
|
|
</Button>
|
|
) : (
|
|
"Under process"
|
|
)}
|
|
</Text>
|
|
) : (
|
|
""
|
|
)}
|
|
</Box>
|
|
),
|
|
}));
|
|
|
|
// const handleDelete = () => {
|
|
// const IOtype = investmentType.filter(
|
|
// (investmentType) => investmentType.id !== actionId
|
|
// );
|
|
|
|
// setTimeout(() => {
|
|
// setInvestmentType(IOtype);
|
|
// setDeleteAlert(false);
|
|
// setIsLoading(false);
|
|
// }, 100);
|
|
// setIsLoading(true);
|
|
// };
|
|
|
|
const handleApproved = async (data) => {
|
|
setIsReversalLoading.on(); // Start loading
|
|
try {
|
|
const { error, data: responseData } =
|
|
await createBankDepositReversalRequest({
|
|
id: reversalId,
|
|
data,
|
|
});
|
|
|
|
if (error) {
|
|
throw error; // Explicitly handle the error
|
|
}
|
|
|
|
// Success: Perform necessary actions
|
|
refetch();
|
|
toast({
|
|
render: () => (
|
|
<ToastBox message={responseData?.message || "Action successful!"} />
|
|
),
|
|
});
|
|
onCloseInRev();
|
|
} catch (error) {
|
|
// Handle errors
|
|
toast({
|
|
render: () => (
|
|
<ToastBox
|
|
message={
|
|
error?.data?.message || "Something went wrong. Please try again."
|
|
}
|
|
status="error"
|
|
/>
|
|
),
|
|
});
|
|
console.error("Error:", error);
|
|
} finally {
|
|
setIsReversalLoading.off(); // Ensure loading is toggled off
|
|
}
|
|
};
|
|
|
|
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
|
|
isLoading={depositHistoryLoading}
|
|
pageSize={pageSize}
|
|
setPageSize={setPageSize}
|
|
currentPage={currentPage}
|
|
setCurrentPage={setCurrentPage}
|
|
totalItems={data?.data?.totalItems}
|
|
/>
|
|
</HStack>
|
|
</HStack>
|
|
</Box>
|
|
|
|
<NormalTable
|
|
emptyMessage={`We don't have any Investment type `}
|
|
tableHeadRow={tableHeadRow}
|
|
// setData={setExtractedArray}
|
|
data={extractedArray}
|
|
isLoading={depositHistoryLoading}
|
|
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}
|
|
/> */}
|
|
|
|
<InitiateReversalPopup
|
|
onClose={onCloseInRev}
|
|
isOpen={isOpenInRev}
|
|
handelApproved={handleApproved}
|
|
isLoading={isReversalLoading}
|
|
/>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default DepositHistory;
|