Add mutation endpoints for Fawateer reversal requests and update DepositHistory component
This commit is contained in:
Swapnil Bendal
@@ -23,7 +23,7 @@ import { debounce } from "../../Master/Sponser/AddSponser";
|
||||
|
||||
import { ExternalLinkIcon } from "@chakra-ui/icons";
|
||||
import InitiateReversalPopup from "../../../Components/Popups/InitiateReversalPopups";
|
||||
import { generateSerialNumber } from "../../../Constants/Constants";
|
||||
import { generateSerialNumber, isMaker } from "../../../Constants/Constants";
|
||||
import { TABLE_PAGINATION } from "../../../Constants/Paginations";
|
||||
import { useCreateBankDepositReversalRequestMutation } from "../../../Services/bankdeposit.request.service";
|
||||
|
||||
@@ -105,7 +105,7 @@ const DepositHistory = () => {
|
||||
"Deposit Date",
|
||||
"Status",
|
||||
"Supporting's",
|
||||
"Reversal Action",
|
||||
isMaker() && "Reversal Action",
|
||||
];
|
||||
|
||||
const handleUpdateStatus = debounce((id) => {
|
||||
@@ -320,31 +320,43 @@ const DepositHistory = () => {
|
||||
// setIsLoading(true);
|
||||
// };
|
||||
|
||||
const handelApproved = async (data) => {
|
||||
setIsReversalLoading.on;
|
||||
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} />,
|
||||
render: () => (
|
||||
<ToastBox message={responseData?.message || "Action successful!"} />
|
||||
),
|
||||
});
|
||||
onCloseInRev();
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
} catch (error) {
|
||||
// Handle errors
|
||||
toast({
|
||||
render: () => (
|
||||
<ToastBox message={error?.data?.message} status={"error"} />
|
||||
<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
|
||||
}
|
||||
setIsReversalLoading.off;
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -406,7 +418,7 @@ const DepositHistory = () => {
|
||||
<InitiateReversalPopup
|
||||
onClose={onCloseInRev}
|
||||
isOpen={isOpenInRev}
|
||||
handelApproved={handelApproved}
|
||||
handelApproved={handleApproved}
|
||||
isLoading={isReversalLoading}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
@@ -1,46 +1,25 @@
|
||||
import {
|
||||
Avatar,
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
HStack,
|
||||
Input,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuList,
|
||||
Portal,
|
||||
Select,
|
||||
Switch,
|
||||
Tag,
|
||||
Text,
|
||||
Tooltip,
|
||||
useDisclosure,
|
||||
useToast,
|
||||
useToast
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useContext, useEffect, useState, useRef } from "react";
|
||||
import { OPACITY_ON_LOAD } from "../../Layout/animations";
|
||||
import NormalTable from "../../Components/DataTable/NormalTable";
|
||||
import { HiDotsVertical } from "react-icons/hi";
|
||||
import { Link, Link as RouterLink, useNavigate } from "react-router-dom";
|
||||
import {
|
||||
AddIcon,
|
||||
DeleteIcon,
|
||||
EditIcon,
|
||||
EmailIcon,
|
||||
ViewIcon,
|
||||
} from "@chakra-ui/icons";
|
||||
import Pagination from "../../Components/Pagination";
|
||||
import GlobalStateContext from "../../Contexts/GlobalStateContext";
|
||||
import React, { useContext, useEffect, useRef, 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 { debounce } from "../Master/Sponser/AddSponser";
|
||||
// import InvestmentDetailsEdit from "./InvestmentDetailsEdit";
|
||||
import { useGetInvestorsQuery } from "../../Services/investor.details.service";
|
||||
import { generateSerialNumber } from "../../Constants/Constants";
|
||||
import { TABLE_PAGINATION } from "../../Constants/Paginations";
|
||||
import { exportToExcel, generateSerialNumber } from "../../Constants/Constants";
|
||||
import { LuFileSpreadsheet } from "react-icons/lu";
|
||||
|
||||
import { useGetInvestorsQuery } from "../../Services/investor.details.service";
|
||||
|
||||
const FawateerRequest = () => {
|
||||
const navigate = useNavigate();
|
||||
@@ -60,8 +39,7 @@ const FawateerRequest = () => {
|
||||
} = useDisclosure();
|
||||
const btnRef = React.useRef();
|
||||
|
||||
|
||||
// =========================== [Use State] =============================
|
||||
// =========================== [Use State] =============================
|
||||
const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
|
||||
const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
@@ -77,21 +55,20 @@ const FawateerRequest = () => {
|
||||
};
|
||||
}, [searchTerm]);
|
||||
|
||||
|
||||
const {
|
||||
data: investorDetails,
|
||||
isLoading: investorDetailsLoading,
|
||||
error,
|
||||
} = useGetInvestorsQuery({
|
||||
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
|
||||
}
|
||||
);
|
||||
|
||||
} = useGetInvestorsQuery(
|
||||
{
|
||||
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
|
||||
}
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
// Simulate loading
|
||||
@@ -109,10 +86,10 @@ const FawateerRequest = () => {
|
||||
"Client ID",
|
||||
"First Name",
|
||||
"Last Name",
|
||||
"Country",
|
||||
"Country",
|
||||
"Phone Number",
|
||||
"E-mail ID",
|
||||
// "Type",
|
||||
// "Type",
|
||||
// "KYC Status",
|
||||
"Approval Status",
|
||||
];
|
||||
@@ -131,7 +108,15 @@ const FawateerRequest = () => {
|
||||
// ====================================================[Table Filter]================================================================
|
||||
const filteredData = investorDetails?.data?.rows?.filter((item) => {
|
||||
// Filter by name (case insensitive)
|
||||
const name = [item?.principal?.firstName, item?.principal?.lastName, item?.country?.countryName, item?.principal?.mobileNumber, item?.principal?.emailAddress].filter(Boolean).join(' ');
|
||||
const name = [
|
||||
item?.principal?.firstName,
|
||||
item?.principal?.lastName,
|
||||
item?.country?.countryName,
|
||||
item?.principal?.mobileNumber,
|
||||
item?.principal?.emailAddress,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ");
|
||||
const searchLower = searchTerm.toLowerCase();
|
||||
const nameMatches = name?.toLowerCase().includes(searchLower);
|
||||
|
||||
@@ -147,35 +132,31 @@ const FawateerRequest = () => {
|
||||
return nameMatches;
|
||||
});
|
||||
|
||||
|
||||
|
||||
const customHeaders = [
|
||||
{ label: "ID", key: "id" },
|
||||
{ label: "Client ID", key: "clientReference_id" },
|
||||
{ label: "First Name", key: "principal.firstName" }, // Nested property
|
||||
{ label: "Last Name", key: "principal.lastName" }, // Nested property
|
||||
{ label: "Country", key: "country.countryName" }, // Nested property
|
||||
{ label: "First Name", key: "principal.firstName" }, // Nested property
|
||||
{ label: "Last Name", key: "principal.lastName" }, // Nested property
|
||||
{ label: "Country", key: "country.countryName" }, // Nested property
|
||||
{ label: "Phone Number", key: "principal.mobileNumber" }, // Nested property
|
||||
{ label: "E-mail ID", key: "principal.emailAddress" }, // Nested property
|
||||
{ label: "E-mail ID", key: "principal.emailAddress" }, // Nested property
|
||||
{ label: "Type", key: "investor_type.investorTypeName" }, // Nested property
|
||||
{ label: "Status", key: "ioStatus" }, // Simple property
|
||||
{ label: "KYC Status", key: "KYCStatus" }, // Simple property
|
||||
{ label: "Status", key: "ioStatus" }, // Simple property
|
||||
{ label: "KYC Status", key: "KYCStatus" }, // Simple property
|
||||
];
|
||||
|
||||
|
||||
const extractedArray = investorDetails?.data?.rows?.map((item, idx) => ({
|
||||
id: item?.id,
|
||||
"Sr No": (
|
||||
<Text
|
||||
w={'24px'}
|
||||
w={"24px"}
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
as={"span"}
|
||||
color={"gray.600"}
|
||||
className="d-flex align-items-center fw-bold web-text-small"
|
||||
>
|
||||
{/* {item.id} */}
|
||||
{generateSerialNumber(idx,currentPage, pageSize )}
|
||||
|
||||
{generateSerialNumber(idx, currentPage, pageSize)}
|
||||
</Text>
|
||||
),
|
||||
"Client ID": (
|
||||
@@ -183,7 +164,7 @@ const FawateerRequest = () => {
|
||||
<Text as={"span"} color={"teal.900"}>
|
||||
{item.clientReference_id}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
),
|
||||
"First Name": (
|
||||
<Box w={"auto"} isTruncated={true}>
|
||||
@@ -220,27 +201,33 @@ const FawateerRequest = () => {
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
"Type": (
|
||||
Type: (
|
||||
<Box w={"auto"} isTruncated={true}>
|
||||
<Text as={"span"} >
|
||||
<Badge color={"forestGreen.500"} variant={'ghost'} fontWeight={"700"} px={2} py={0.5}>
|
||||
<Text as={"span"}>
|
||||
<Badge
|
||||
color={"forestGreen.500"}
|
||||
variant={"ghost"}
|
||||
fontWeight={"700"}
|
||||
px={2}
|
||||
py={0.5}
|
||||
>
|
||||
{item?.investor_type?.investorTypeName}
|
||||
</Badge>
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
"Approval Status": (
|
||||
<Box w={"auto"} isTruncated={true}>
|
||||
<Badge
|
||||
fontWeight={"700"}
|
||||
textTransform={"none"}
|
||||
colorScheme={item.ioStatus ? "red" : "purple"}
|
||||
px={2}
|
||||
py={0.5}
|
||||
>
|
||||
Approved
|
||||
</Badge>
|
||||
</Box>
|
||||
<Box w={"auto"} isTruncated={true}>
|
||||
<Badge
|
||||
fontWeight={"700"}
|
||||
textTransform={"none"}
|
||||
colorScheme={item.ioStatus ? "red" : "purple"}
|
||||
px={2}
|
||||
py={0.5}
|
||||
>
|
||||
Approved
|
||||
</Badge>
|
||||
</Box>
|
||||
),
|
||||
}));
|
||||
|
||||
@@ -264,8 +251,6 @@ const FawateerRequest = () => {
|
||||
|
||||
console.log(investorDetails?.data?.totalItems);
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
|
||||
<Box bg="white.500">
|
||||
@@ -290,23 +275,17 @@ const FawateerRequest = () => {
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
|
||||
|
||||
|
||||
<HStack display={"flex"} alignItems={"center"}>
|
||||
|
||||
|
||||
<Pagination
|
||||
isLoading={investorDetailsLoading}
|
||||
isLoading={investorDetailsLoading}
|
||||
pageSize={pageSize}
|
||||
setPageSize={setPageSize}
|
||||
currentPage={currentPage}
|
||||
setCurrentPage={setCurrentPage}
|
||||
totalItems={investorDetails?.data?.totalItems}
|
||||
|
||||
/>
|
||||
|
||||
|
||||
{/*
|
||||
{/*
|
||||
<Button
|
||||
leftIcon={<AddIcon />}
|
||||
colorScheme="forestGreen"
|
||||
@@ -317,7 +296,6 @@ const FawateerRequest = () => {
|
||||
>
|
||||
Create request
|
||||
</Button> */}
|
||||
|
||||
</HStack>
|
||||
</HStack>
|
||||
</Box>
|
||||
@@ -345,4 +323,4 @@ const FawateerRequest = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default FawateerRequest
|
||||
export default FawateerRequest;
|
||||
|
||||
@@ -1,230 +1,239 @@
|
||||
import {
|
||||
Avatar,
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
HStack,
|
||||
Input,
|
||||
Link,
|
||||
Text,
|
||||
Tooltip,
|
||||
useDisclosure,
|
||||
useToast,
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useContext, useEffect, useState } from "react";
|
||||
import { CheckIcon, CloseIcon, ExternalLinkIcon } from "@chakra-ui/icons";
|
||||
import Pagination from "../../../Components/Pagination";
|
||||
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
|
||||
import CustomAlertDialog from "../../../Components/CustomAlertDialog";
|
||||
import DrawalRequestReject from "../../WithDrawal/DrawalRequest/DrawalRequestReject";
|
||||
import NormalTable from "../../../Components/DataTable/NormalTable";
|
||||
import DrawalRequestApprove from "../../WithDrawal/DrawalRequest/DrawalRequestApprove";
|
||||
import { generateSerialNumber } from "../../../Constants/Constants";
|
||||
import {
|
||||
useGetApproveHistoryQuery,
|
||||
useGetFawateerForMakerRequestQuery,
|
||||
useGetFawateerRequestQuery,
|
||||
} from "../../../Services/fawateer.request.service";
|
||||
import { TABLE_PAGINATION } from "../../../Constants/Paginations";
|
||||
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
|
||||
|
||||
const ApproveHistoryMaker = () => {
|
||||
const toast = useToast();
|
||||
const { slideFromRight, approveHistory, setApproveHistory } =
|
||||
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 [debouncedSearchTerm, setDebouncedSearchTerm] = 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();
|
||||
Avatar,
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
HStack,
|
||||
Input,
|
||||
Link,
|
||||
Text,
|
||||
Tooltip,
|
||||
useBoolean,
|
||||
useDisclosure,
|
||||
useToast,
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useContext, useEffect, useState } from "react";
|
||||
import { CheckIcon, CloseIcon, ExternalLinkIcon } from "@chakra-ui/icons";
|
||||
import Pagination from "../../../Components/Pagination";
|
||||
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
|
||||
import CustomAlertDialog from "../../../Components/CustomAlertDialog";
|
||||
import DrawalRequestReject from "../../WithDrawal/DrawalRequest/DrawalRequestReject";
|
||||
import NormalTable from "../../../Components/DataTable/NormalTable";
|
||||
import DrawalRequestApprove from "../../WithDrawal/DrawalRequest/DrawalRequestApprove";
|
||||
import { generateSerialNumber, isMaker } from "../../../Constants/Constants";
|
||||
import {
|
||||
useGetApproveHistoryQuery,
|
||||
useGetFawateerForMakerRequestQuery,
|
||||
useGetFawateerRequestQuery,
|
||||
} from "../../../Services/fawateer.request.service";
|
||||
import { TABLE_PAGINATION } from "../../../Constants/Paginations";
|
||||
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
|
||||
import InitiateReversalPopup from "../../../Components/Popups/InitiateReversalPopups";
|
||||
import ToastBox from "../../../Components/ToastBox";
|
||||
import { useCreateFawateerReversalRequestMutation } from "../../../Services/reversal.fawateer.deposit.service";
|
||||
|
||||
const {
|
||||
data,
|
||||
isLoading: drawalRequestLoading,
|
||||
error,
|
||||
refetch
|
||||
} = useGetFawateerForMakerRequestQuery(
|
||||
{
|
||||
page: debouncedSearchTerm ? undefined : currentPage, // Omit pagination for search
|
||||
size: debouncedSearchTerm ? undefined : pageSize, // Omit pagination for search
|
||||
searchTerm: debouncedSearchTerm,
|
||||
},
|
||||
{
|
||||
skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request
|
||||
}
|
||||
);
|
||||
|
||||
console.log(data);
|
||||
const ApproveHistoryMaker = () => {
|
||||
const toast = useToast();
|
||||
const { slideFromRight, approveHistory, setApproveHistory } =
|
||||
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 [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
const handler = setTimeout(() => {
|
||||
setDebouncedSearchTerm(searchTerm);
|
||||
}, 500); // Adjust delay as needed
|
||||
return () => {
|
||||
clearTimeout(handler);
|
||||
};
|
||||
}, [searchTerm]);
|
||||
|
||||
// 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;
|
||||
const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
|
||||
const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
|
||||
|
||||
const [createFawateerReversalRequest] =
|
||||
useCreateFawateerReversalRequestMutation();
|
||||
|
||||
const [reversalId, setReversalId] = useState();
|
||||
const {
|
||||
isOpen: isOpenInRev,
|
||||
onOpen: onOpenInRev,
|
||||
onClose: onCloseInRev,
|
||||
} = useDisclosure();
|
||||
const [isReversalLoading, setIsReversalLoading] = useBoolean();
|
||||
|
||||
const formatDate = (date) => {
|
||||
return new Date(date).toLocaleDateString("en-GB", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
});
|
||||
|
||||
// ====================================================[Table Setup]================================================================
|
||||
const tableHeadRow = [
|
||||
"Sr.no",
|
||||
"Client ID",
|
||||
"First Name",
|
||||
"Last Name",
|
||||
"E-mail ID",
|
||||
"Phone Number",
|
||||
"Deposit Date",
|
||||
"Deposit Amount (BHD)",
|
||||
"Support Image",
|
||||
"Status",
|
||||
"Reversal",
|
||||
];
|
||||
|
||||
const extractedArray = data?.data?.rows?.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)}
|
||||
};
|
||||
|
||||
const {
|
||||
isOpen: isConfirmOpen,
|
||||
onOpen: onConfirmOpen,
|
||||
onClose: onConfirmClose,
|
||||
} = useDisclosure();
|
||||
const {
|
||||
isOpen: isRejectOpen,
|
||||
onOpen: onRejectOpen,
|
||||
onClose: onRejectClose,
|
||||
} = useDisclosure();
|
||||
|
||||
const {
|
||||
data,
|
||||
isLoading: drawalRequestLoading,
|
||||
error,
|
||||
refetch,
|
||||
} = useGetFawateerForMakerRequestQuery(
|
||||
{
|
||||
page: debouncedSearchTerm ? undefined : currentPage, // Omit pagination for search
|
||||
size: debouncedSearchTerm ? undefined : pageSize, // Omit pagination for search
|
||||
searchTerm: debouncedSearchTerm,
|
||||
},
|
||||
{
|
||||
skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request
|
||||
}
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const handler = setTimeout(() => {
|
||||
setDebouncedSearchTerm(searchTerm);
|
||||
}, 500); // Adjust delay as needed
|
||||
return () => {
|
||||
clearTimeout(handler);
|
||||
};
|
||||
}, [searchTerm]);
|
||||
|
||||
// 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",
|
||||
"Client ID",
|
||||
"First Name",
|
||||
"Last Name",
|
||||
"E-mail ID",
|
||||
"Phone Number",
|
||||
"Deposit Date",
|
||||
"Deposit Amount (BHD)",
|
||||
"Support Image",
|
||||
"Status",
|
||||
isMaker() && "Reversal Action",
|
||||
];
|
||||
|
||||
const extractedArray = data?.data?.rows?.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>
|
||||
),
|
||||
"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>
|
||||
),
|
||||
"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}
|
||||
</Box>
|
||||
),
|
||||
"Last Name": (
|
||||
<Box w={"50px"} isTruncated={true}>
|
||||
<Text as={"span"} color={"teal.900"}>
|
||||
{item.lastName}
|
||||
</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>
|
||||
),
|
||||
"E-mail ID": (
|
||||
<Box isTruncated={true}>
|
||||
<Text as={"span"} color={"teal.900"}>
|
||||
{item.emailAddress}
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
"Phone Number": (
|
||||
<Box w={"100px"} isTruncated={true}>
|
||||
<Text as={"span"} color={"teal.900"}>
|
||||
{item.mobileNumber}
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
"Deposit Date": (
|
||||
<Box
|
||||
w={"100px"}
|
||||
isTruncated={true}
|
||||
display={"flex"}
|
||||
>
|
||||
<Text as={"span"} color={"teal.900"}>
|
||||
{formatDate(item?.transaction_date)}
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
"Deposit Amount (BHD)": (
|
||||
<Box w={"130px"} isTruncated={true} display={"flex"}>
|
||||
<Text as={"span"} color={"teal.900"}>
|
||||
{/* {item.investorAmount} */}
|
||||
{parseFloat(item?.transaction_amount || 0).toLocaleString(undefined, {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
})}
|
||||
{/* <Badge ms={1} colorScheme="green">{item?.transaction_amount}</Badge> */}
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
"Support Image": (
|
||||
<Text
|
||||
color={"green.500"}
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
as={"span"}
|
||||
fontWeight={"500"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
>
|
||||
{item?.spportFile_path&&<Badge
|
||||
</Box>
|
||||
),
|
||||
"E-mail ID": (
|
||||
<Box isTruncated={true}>
|
||||
<Text as={"span"} color={"teal.900"}>
|
||||
{item.emailAddress}
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
"Phone Number": (
|
||||
<Box w={"100px"} isTruncated={true}>
|
||||
<Text as={"span"} color={"teal.900"}>
|
||||
{item.mobileNumber}
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
"Deposit Date": (
|
||||
<Box w={"100px"} isTruncated={true} display={"flex"}>
|
||||
<Text as={"span"} color={"teal.900"}>
|
||||
{formatDate(item?.transaction_date)}
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
"Deposit Amount (BHD)": (
|
||||
<Box w={"130px"} isTruncated={true} display={"flex"}>
|
||||
<Text as={"span"} color={"teal.900"}>
|
||||
{/* {item.investorAmount} */}
|
||||
{parseFloat(item?.transaction_amount || 0).toLocaleString(undefined, {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
})}
|
||||
{/* <Badge ms={1} colorScheme="green">{item?.transaction_amount}</Badge> */}
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
"Support Image": (
|
||||
<Text
|
||||
color={"green.500"}
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
as={"span"}
|
||||
fontWeight={"500"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
>
|
||||
{item?.spportFile_path && (
|
||||
<Badge
|
||||
px={2}
|
||||
py={0.5}
|
||||
textTransform={"inherit"}
|
||||
@@ -237,137 +246,197 @@ import {
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
>
|
||||
<Box me={"1px"}
|
||||
as="span"
|
||||
cursor={"pointer"}
|
||||
>
|
||||
<Box me={"1px"} as="span" cursor={"pointer"}>
|
||||
View
|
||||
</Box>
|
||||
<ExternalLinkIcon />
|
||||
</Link>
|
||||
</Badge>}
|
||||
</Text>
|
||||
),
|
||||
Status: (
|
||||
<Box isTruncated={true} display={"flex"}>
|
||||
<Badge
|
||||
my={1}
|
||||
fontWeight={500}
|
||||
px={2}
|
||||
py={"2px"}
|
||||
rounded={4}
|
||||
colorScheme={
|
||||
item?.transactionStatus === "Approved"
|
||||
</Badge>
|
||||
)}
|
||||
</Text>
|
||||
),
|
||||
Status: (
|
||||
<Box isTruncated={true} display={"flex"}>
|
||||
<Badge
|
||||
my={1}
|
||||
fontWeight={500}
|
||||
px={2}
|
||||
py={"2px"}
|
||||
rounded={4}
|
||||
colorScheme={
|
||||
item?.transactionStatus === "Approved"
|
||||
? "green"
|
||||
: item?.transactionStatus === "Pending"
|
||||
? "yellow"
|
||||
: item?.transactionStatus === "Reject"
|
||||
? "red"
|
||||
: "gray" // default border color if status doesn't match any condition
|
||||
}
|
||||
>
|
||||
{item.transactionStatus}
|
||||
</Badge>
|
||||
</Box>
|
||||
),
|
||||
"Reversal": (
|
||||
<Box isTruncated={true} display={"flex"}>
|
||||
<Badge
|
||||
fontWeight={"500"}
|
||||
textTransform={"none"}
|
||||
color={item?.reversal === false ? "red" : "#FFBB00"}
|
||||
px={2}
|
||||
py={0.5}
|
||||
variant={"ghost"}
|
||||
>
|
||||
{item?.reversal === true ? "Initiate Reversal" : "Under Process"}
|
||||
</Badge>
|
||||
</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}
|
||||
/>
|
||||
}
|
||||
>
|
||||
{item.transactionStatus}
|
||||
</Badge>
|
||||
</Box>
|
||||
),
|
||||
"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.transaction_xid);
|
||||
setReversalId(item.id);
|
||||
}}
|
||||
colorScheme="teal"
|
||||
size="xs"
|
||||
variant="outline"
|
||||
>
|
||||
Initiate Reversal
|
||||
</Button>
|
||||
) : (
|
||||
"Under process"
|
||||
)}
|
||||
</Text>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</Box>
|
||||
),
|
||||
}));
|
||||
|
||||
const handleDelete = () => {
|
||||
const updatedSponsors = sponser.filter(
|
||||
(sponsor) => sponsor.id !== actionId
|
||||
);
|
||||
|
||||
setTimeout(() => {
|
||||
setSponser(updatedSponsors);
|
||||
setDeleteAlert(false);
|
||||
setIsLoading(false);
|
||||
}, 100);
|
||||
setIsLoading(true);
|
||||
};
|
||||
|
||||
export default ApproveHistoryMaker;
|
||||
|
||||
|
||||
const handleApproved = async (data) => {
|
||||
setIsReversalLoading.on(); // Start loading
|
||||
try {
|
||||
const { error, data: responseData } = await createFawateerReversalRequest(
|
||||
{
|
||||
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)}
|
||||
/>
|
||||
|
||||
<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}
|
||||
/>
|
||||
|
||||
<InitiateReversalPopup
|
||||
onClose={onCloseInRev}
|
||||
isOpen={isOpenInRev}
|
||||
handelApproved={handleApproved}
|
||||
isLoading={isReversalLoading}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default ApproveHistoryMaker;
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
// Need to use the React-specific entry point to import createApi
|
||||
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
|
||||
import { createApi } from "@reduxjs/toolkit/query/react";
|
||||
import { baseQuery } from "./token.serivce";
|
||||
|
||||
// Define a service using a base URL and expected endpoints
|
||||
export const reversalFawateerDepositMaster = createApi({
|
||||
reducerPath: "FawateerDeposit",
|
||||
baseQuery: baseQuery,
|
||||
tagTypes: ["getFawateerDeposit"],
|
||||
tagTypes: ["getFawateerDeposit", 'getDepositHistory'],
|
||||
endpoints: (builder) => ({
|
||||
// ======[Get All]=====
|
||||
|
||||
@@ -14,9 +14,39 @@ export const reversalFawateerDepositMaster = createApi({
|
||||
query: () => `/reversal-transactions/bank-transfer/getAll`,
|
||||
providesTags: ["getFawateerDeposit"],
|
||||
}),
|
||||
}),
|
||||
|
||||
approveFawateerRequest: builder.mutation({
|
||||
query: ({ id, data }) => ({
|
||||
url: `/reversal-transactions/fawateer/approve/${id}`,
|
||||
method: "PATCH",
|
||||
body: data,
|
||||
}),
|
||||
invalidatesTags: ["getFawateerDeposit", "getDepositHistory"],
|
||||
}),
|
||||
|
||||
createFawateerReversalRequest: builder.mutation({
|
||||
query: ({ id, data }) => ({
|
||||
url: `/reversal-transactions/fawateer/create/${id}`,
|
||||
method: "POST",
|
||||
body: data,
|
||||
}),
|
||||
invalidatesTags: ["getFawateerDeposit", "getDepositHistory"],
|
||||
}),
|
||||
|
||||
rejectFawateerRequest: builder.mutation({
|
||||
query: ({ id, data }) => ({
|
||||
url: `/reversal-transactions/bank-transfer/reject/${id}`,
|
||||
method: "PATCH",
|
||||
body: data,
|
||||
}),
|
||||
invalidatesTags: ["getFawateerDeposit", "getDepositHistory"],
|
||||
}),
|
||||
})
|
||||
});
|
||||
|
||||
export const {
|
||||
useGetFawateerDepositMasterQuery,
|
||||
} = reversalFawateerDepositMaster;
|
||||
export const {
|
||||
useGetFawateerDepositMasterQuery,
|
||||
useApproveFawateerRequestMutation,
|
||||
useCreateFawateerReversalRequestMutation,
|
||||
useRejectFawateerRequestMutation,
|
||||
} = reversalFawateerDepositMaster;
|
||||
|
||||
Reference in New Issue
Block a user