deposit table
This commit is contained in:
YasinShaikh123
91
package-lock.json
generated
91
package-lock.json
generated
@@ -14,6 +14,7 @@
|
||||
"@emotion/styled": "^11.11.5",
|
||||
"@hookform/resolvers": "^3.3.4",
|
||||
"@reduxjs/toolkit": "^2.2.3",
|
||||
"axios": "^1.7.2",
|
||||
"bootstrap": "5.3.3",
|
||||
"dotenv": "^16.4.5",
|
||||
"framer-motion": "^11.1.5",
|
||||
@@ -2808,6 +2809,11 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/asynckit": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
|
||||
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
|
||||
},
|
||||
"node_modules/available-typed-arrays": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
|
||||
@@ -2823,6 +2829,16 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "1.7.2",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
|
||||
"integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.15.6",
|
||||
"form-data": "^4.0.0",
|
||||
"proxy-from-env": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/babel-plugin-macros": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
|
||||
@@ -2964,6 +2980,17 @@
|
||||
"resolved": "https://registry.npmjs.org/color2k/-/color2k-2.0.3.tgz",
|
||||
"integrity": "sha512-zW190nQTIoXcGCaU08DvVNFTmQhUpnJfVuAKfWqUQkflXKpaDdpaYoM0iluLS9lgJNHyBF58KKA2FBEwkD7wog=="
|
||||
},
|
||||
"node_modules/combined-stream": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
|
||||
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
|
||||
"dependencies": {
|
||||
"delayed-stream": "~1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/compute-scroll-into-view": {
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.0.3.tgz",
|
||||
@@ -3171,6 +3198,14 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/delayed-stream": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
||||
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
|
||||
"engines": {
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/detect-node-es": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
|
||||
@@ -3742,6 +3777,25 @@
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/follow-redirects": {
|
||||
"version": "1.15.6",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
|
||||
"integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://github.com/sponsors/RubenVerborgh"
|
||||
}
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=4.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"debug": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/for-each": {
|
||||
"version": "0.3.3",
|
||||
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
|
||||
@@ -3751,6 +3805,19 @@
|
||||
"is-callable": "^1.1.3"
|
||||
}
|
||||
},
|
||||
"node_modules/form-data": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
|
||||
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
|
||||
"dependencies": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
"mime-types": "^2.1.12"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/frac": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
|
||||
@@ -4658,6 +4725,25 @@
|
||||
"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
|
||||
"integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
|
||||
},
|
||||
"node_modules/mime-db": {
|
||||
"version": "1.52.0",
|
||||
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
|
||||
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/mime-types": {
|
||||
"version": "2.1.35",
|
||||
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
|
||||
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
|
||||
"dependencies": {
|
||||
"mime-db": "1.52.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/minimatch": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
|
||||
@@ -5019,6 +5105,11 @@
|
||||
"resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz",
|
||||
"integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA=="
|
||||
},
|
||||
"node_modules/proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
|
||||
},
|
||||
"node_modules/punycode": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
|
||||
|
||||
@@ -1680,7 +1680,6 @@ const GlobalStateProvider = ({ children }) => {
|
||||
},
|
||||
]);
|
||||
|
||||
|
||||
const [ IODetails, setIODetails ] = useState([
|
||||
{
|
||||
id:generateUniqueId(),
|
||||
@@ -1763,6 +1762,121 @@ const GlobalStateProvider = ({ children }) => {
|
||||
typeName: "Residential"
|
||||
}
|
||||
])
|
||||
|
||||
const [depositRequest, setDepositRequest] = useState([
|
||||
{
|
||||
id: 1,
|
||||
clientId: "SA00000001",
|
||||
firstName: "John",
|
||||
lastName: "David",
|
||||
country: "Saudi Arabia",
|
||||
phoneNumber: "8940035906",
|
||||
currency: "SAR",
|
||||
depositAmount: "$100,000",
|
||||
fees:"$2,000",
|
||||
totalAmount:"$102,000",
|
||||
amountcurrency:"382574.17",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
clientId: "KU00000001",
|
||||
firstName: "Faisal",
|
||||
lastName: "Aljalahma",
|
||||
country: "Kuwait",
|
||||
phoneNumber: "8226278945",
|
||||
currency: "KWD",
|
||||
depositAmount: "$200,000",
|
||||
fees:"$4,000",
|
||||
totalAmount:"$204,000",
|
||||
amountcurrency:"62438.98",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
clientId: "BH00000001",
|
||||
firstName: "Nawaf",
|
||||
lastName: "Almaskati",
|
||||
country: "Bahrain",
|
||||
phoneNumber: "8940035906",
|
||||
currency: "BHD",
|
||||
depositAmount: "$300,000",
|
||||
fees:"$6,000",
|
||||
totalAmount:"$306,000",
|
||||
amountcurrency:"115328.04",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
clientId: "SA00000002",
|
||||
firstName: "Sulaiman",
|
||||
lastName: "AlBassam",
|
||||
country: "Saudi Arabia",
|
||||
phoneNumber: "8226278945",
|
||||
currency: "SAR",
|
||||
depositAmount: "$400,000",
|
||||
fees:"$8,000",
|
||||
totalAmount:"$408,000",
|
||||
amountcurrency:"1530296.67",
|
||||
},
|
||||
]);
|
||||
|
||||
const [depositHistory, setDepositHistory] = useState([
|
||||
{
|
||||
id: 1,
|
||||
clientId: "SA00000001",
|
||||
firstName: "John",
|
||||
lastName: "David",
|
||||
country: "Saudi Arabia",
|
||||
phoneNumber: "8940035906",
|
||||
currency: "SAR",
|
||||
depositAmount: "$100,000",
|
||||
fees:"$2,000",
|
||||
totalAmount:"$102,000",
|
||||
amountcurrency:"382574.17",
|
||||
status:"Approved",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
clientId: "KU00000001",
|
||||
firstName: "Faisal",
|
||||
lastName: "Aljalahma",
|
||||
country: "Kuwait",
|
||||
phoneNumber: "8226278945",
|
||||
currency: "KWD",
|
||||
depositAmount: "$200,000",
|
||||
fees:"$4,000",
|
||||
totalAmount:"$204,000",
|
||||
amountcurrency:"62438.98",
|
||||
status:"Rejected"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
clientId: "BH00000001",
|
||||
firstName: "Nawaf",
|
||||
lastName: "Almaskati",
|
||||
country: "Bahrain",
|
||||
phoneNumber: "8940035906",
|
||||
currency: "BHD",
|
||||
depositAmount: "$300,000",
|
||||
fees:"$6,000",
|
||||
totalAmount:"$306,000",
|
||||
amountcurrency:"115328.04",
|
||||
status:"Approved"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
clientId: "SA00000002",
|
||||
firstName: "Sulaiman",
|
||||
lastName: "AlBassam",
|
||||
country: "Saudi Arabia",
|
||||
phoneNumber: "8226278945",
|
||||
currency: "SAR",
|
||||
depositAmount: "$400,000",
|
||||
fees:"$8,000",
|
||||
totalAmount:"$408,000",
|
||||
amountcurrency:"1530296.67",
|
||||
status:"Rejected"
|
||||
},
|
||||
]);
|
||||
|
||||
return (
|
||||
<GlobalStateContext.Provider
|
||||
value={{
|
||||
@@ -1816,6 +1930,10 @@ const GlobalStateProvider = ({ children }) => {
|
||||
setCaseDetails,
|
||||
viewInvestor,
|
||||
setViewInvestor,
|
||||
depositRequest,
|
||||
setDepositRequest,
|
||||
depositHistory,
|
||||
setDepositHistory,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
|
||||
272
src/Pages/Deposit/DepositHistory.jsx
Normal file
272
src/Pages/Deposit/DepositHistory.jsx
Normal file
@@ -0,0 +1,272 @@
|
||||
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;
|
||||
|
||||
310
src/Pages/Deposit/DepositRequest.jsx
Normal file
310
src/Pages/Deposit/DepositRequest.jsx
Normal file
@@ -0,0 +1,310 @@
|
||||
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 DepositRequest = () => {
|
||||
const navigate = useNavigate();
|
||||
const toast = useToast();
|
||||
const { depositRequest, setDepositRequest, 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",
|
||||
"Action",
|
||||
];
|
||||
|
||||
const handleUpdateStatus = debounce((id) => {
|
||||
setDepositRequest((prevDepositRequest) =>
|
||||
prevDepositRequest.map((depositRequest) =>
|
||||
depositRequest.id === id
|
||||
? { ...depositRequest, status: !depositRequest.status }
|
||||
: depositRequest
|
||||
)
|
||||
);
|
||||
toast({
|
||||
render: () => <ToastBox message={"Status changed succesfully.!"} />,
|
||||
});
|
||||
}, 300);
|
||||
|
||||
// ====================================================[Table Filter]================================================================
|
||||
const filteredData = depositRequest.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>
|
||||
),
|
||||
Action: (
|
||||
<Box display={"flex"} justifyContent={"space-around"} gap={2}>
|
||||
<Tooltip
|
||||
rounded={"sm"}
|
||||
fontSize={"xs"}
|
||||
label="Accept"
|
||||
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={'10px'} /> Approve
|
||||
</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={'7px'} /> Reject
|
||||
</Badge>
|
||||
</Tooltip>
|
||||
</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 DepositRequest;
|
||||
@@ -78,18 +78,18 @@ const PendingRequest = () => {
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
fontWeight={'500'}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{index + 1}.
|
||||
</Text>
|
||||
),
|
||||
"Date": (
|
||||
Date: (
|
||||
<Text
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
as={"span"}
|
||||
color={"gray.600"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
fontWeight={'500'}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{formatDate(item.date)}
|
||||
</Text>
|
||||
@@ -100,7 +100,7 @@ const PendingRequest = () => {
|
||||
as={"span"}
|
||||
color={"gray.600"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
fontWeight={'500'}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{item.Distribution}
|
||||
</Text>
|
||||
@@ -111,7 +111,7 @@ const PendingRequest = () => {
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
fontWeight={'500'}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{item.charge}
|
||||
{/* {formatDate(item.charge)} */}
|
||||
@@ -123,7 +123,7 @@ const PendingRequest = () => {
|
||||
as={"span"}
|
||||
color={"gray.800"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
fontWeight={'500'}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{item.year}
|
||||
</Text>
|
||||
@@ -134,20 +134,38 @@ const PendingRequest = () => {
|
||||
as={"span"}
|
||||
color={"gray.600"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
fontWeight={'500'}
|
||||
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">
|
||||
<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 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>
|
||||
),
|
||||
}));
|
||||
|
||||
@@ -34,7 +34,7 @@ export const nav = [
|
||||
title: "Master",
|
||||
submenu: [
|
||||
{
|
||||
title: "Sponsorer Master",
|
||||
title: "Sponser Master",
|
||||
path: "/sponser",
|
||||
icon: RiMoneyDollarBoxLine,
|
||||
},
|
||||
@@ -91,16 +91,21 @@ export const nav = [
|
||||
type: "title",
|
||||
},
|
||||
{
|
||||
title: "Investor Management",
|
||||
menu: [
|
||||
title: "Deposit",
|
||||
submenu: [
|
||||
{
|
||||
title: "Investor Details",
|
||||
path: "/investor-details",
|
||||
icon: TbListDetails,
|
||||
title: "Pending Request",
|
||||
path: "/deposit-request",
|
||||
icon: RiMoneyDollarBoxLine,
|
||||
},
|
||||
{
|
||||
title: "View History",
|
||||
path: "/deposit-history",
|
||||
icon: RiExchangeBoxLine,
|
||||
},
|
||||
],
|
||||
type: "accordion",
|
||||
Icon: TbCalendarDollar,
|
||||
Icon: BiMoneyWithdraw,
|
||||
},
|
||||
{
|
||||
title: "Withdrawal",
|
||||
|
||||
@@ -32,6 +32,8 @@ 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 DepositRequest from "../Pages/Deposit/DepositRequest";
|
||||
import DepositHistory from "../Pages/Deposit/DepositHistory";
|
||||
|
||||
export const RouteLink = [
|
||||
// =============[ Tanami ]================
|
||||
@@ -63,6 +65,10 @@ export const RouteLink = [
|
||||
{ path: "/investor-details/view-investor-details", Component: ViewInvestorDetails },
|
||||
{ path: "/investor-transactions", Component: InvestorTransactions },
|
||||
|
||||
// ===============[ Deposit ]===============
|
||||
{ path: "/deposit-request", Component: DepositRequest },
|
||||
{ path: "/deposit-history", Component: DepositHistory },
|
||||
|
||||
// ===============[ Withdrawal]===============
|
||||
{ path: "/withdraw-request", Component: PendingRequest },
|
||||
{ path: "/withdraw-history", Component: ViewHistory },
|
||||
|
||||
Reference in New Issue
Block a user