modal comma
This commit is contained in:
@@ -16,7 +16,7 @@ import { Link, Link as RouterLink, useNavigate } from "react-router-dom";
|
||||
import {
|
||||
AddIcon,
|
||||
CheckIcon,
|
||||
CloseIcon,
|
||||
CloseIcon,
|
||||
DeleteIcon,
|
||||
EditIcon,
|
||||
ViewIcon,
|
||||
@@ -35,7 +35,10 @@ import NormalTable from "../../../Components/DataTable/NormalTable";
|
||||
import { useGetDepositRequestQuery } from "../../../Services/deposit.request.service";
|
||||
import { current } from "@reduxjs/toolkit";
|
||||
import { TABLE_PAGINATION } from "../../../Constants/Paginations";
|
||||
import { generateSerialNumber, removeTrailingZeros } from "../../../Constants/Constants";
|
||||
import {
|
||||
generateSerialNumber,
|
||||
removeTrailingZeros,
|
||||
} from "../../../Constants/Constants";
|
||||
|
||||
export const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
|
||||
|
||||
@@ -64,12 +67,11 @@ const DepositRequest = () => {
|
||||
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',
|
||||
return new Date(date).toLocaleDateString("en-GB", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
});
|
||||
};
|
||||
|
||||
@@ -77,7 +79,7 @@ const DepositRequest = () => {
|
||||
data,
|
||||
isLoading: depositRequestLoading,
|
||||
error,
|
||||
refetch
|
||||
refetch,
|
||||
} = useGetDepositRequestQuery({ page: currentPage, size: pageSize });
|
||||
|
||||
// Use useEffect to refetch data when the component mounts
|
||||
@@ -85,7 +87,6 @@ const DepositRequest = () => {
|
||||
refetch();
|
||||
}, [refetch]);
|
||||
|
||||
|
||||
// ====================================================[Table Setup]================================================================
|
||||
const tableHeadRow = [
|
||||
"Sr.no",
|
||||
@@ -95,7 +96,7 @@ const DepositRequest = () => {
|
||||
"Country",
|
||||
"Phone Number",
|
||||
"Amount in Investor currency",
|
||||
"Deposit Date",
|
||||
"Deposit Date",
|
||||
"Action",
|
||||
];
|
||||
|
||||
@@ -113,26 +114,26 @@ const DepositRequest = () => {
|
||||
}, 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((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));
|
||||
// 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 extractedArray = filteredData?.map((item, idx) => ({
|
||||
// id: item?.id,
|
||||
@@ -145,7 +146,7 @@ const DepositRequest = () => {
|
||||
fontWeight={"500"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
>
|
||||
{generateSerialNumber(idx,currentPage, pageSize )}
|
||||
{generateSerialNumber(idx, currentPage, pageSize)}
|
||||
</Text>
|
||||
),
|
||||
"Client ID": (
|
||||
@@ -161,7 +162,7 @@ const DepositRequest = () => {
|
||||
</Text>
|
||||
),
|
||||
"First Name": (
|
||||
<Box isTruncated={true} w={"170px"}>
|
||||
<Box isTruncated={true}>
|
||||
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
|
||||
{item?.firstName}
|
||||
</Text>
|
||||
@@ -187,20 +188,30 @@ const DepositRequest = () => {
|
||||
{item?.mobileNumber}
|
||||
</Text>
|
||||
</Box>
|
||||
),
|
||||
),
|
||||
"Amount in Investor currency": (
|
||||
<Box display={'flex'} justifyContent={'end'} w={"100px"} isTruncated={true}>
|
||||
<Box
|
||||
display={"flex"}
|
||||
justifyContent={"end"}
|
||||
w={"130px"}
|
||||
isTruncated={true}
|
||||
>
|
||||
<Text as={"span"} color={"teal.900"}>
|
||||
{/* {formatCurrency(removeTrailingZeros(item?.investorAmount))} */}
|
||||
{parseFloat(item?.investorAmount||0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
|
||||
<Badge ms={1} colorScheme="green">{item?.currencyCode}</Badge>
|
||||
{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"}
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
as={"span"}
|
||||
color={"teal.900"}
|
||||
fontWeight={"500"}
|
||||
@@ -260,7 +271,7 @@ const DepositRequest = () => {
|
||||
onRejectOpen();
|
||||
}}
|
||||
py={1}
|
||||
// variant={"solid"}
|
||||
// variant={"solid"}
|
||||
>
|
||||
<CloseIcon fontSize={"10px"} />
|
||||
</Button>
|
||||
@@ -343,12 +354,12 @@ const DepositRequest = () => {
|
||||
isOpen={isConfirmOpen}
|
||||
onClose={onConfirmClose}
|
||||
id={actionId}
|
||||
// firstField={firstField}
|
||||
// firstField={firstField}
|
||||
/>
|
||||
<DepositRequestReject
|
||||
isOpen={isRejectOpen}
|
||||
onClose={onRejectClose}
|
||||
id={actionId}
|
||||
id={actionId}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -3,6 +3,7 @@ import {
|
||||
Box,
|
||||
Button,
|
||||
FormControl,
|
||||
FormErrorMessage,
|
||||
FormLabel,
|
||||
Input,
|
||||
Modal,
|
||||
@@ -20,11 +21,15 @@ import {
|
||||
import React, { useEffect, useState } from "react";
|
||||
import * as yup from "yup";
|
||||
import { yupResolver } from "@hookform/resolvers/yup";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { useGetDepositRequestByIdQuery, useGetDepositRequestQuery, useUpdateDepositRequestMutation } from "../../../Services/deposit.request.service";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import {
|
||||
useGetDepositRequestByIdQuery,
|
||||
useGetDepositRequestQuery,
|
||||
useUpdateDepositRequestMutation,
|
||||
} from "../../../Services/deposit.request.service";
|
||||
import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders";
|
||||
import ToastBox from "../../../Components/ToastBox";
|
||||
import { formatCurrency } from "../../../Components/CurrencyInput";
|
||||
import CurrencyInput, { formatCurrency } from "../../../Components/CurrencyInput";
|
||||
|
||||
const FILE_TYPES = ["image/jpeg", "image/png", "image/gif"];
|
||||
|
||||
@@ -37,20 +42,26 @@ export const conformModalSchema = yup.object().shape({
|
||||
// }),
|
||||
});
|
||||
|
||||
const DepositRequestApprove = ({ isOpen, onClose, firstField, id, data:requestData }) => {
|
||||
const toast = useToast()
|
||||
const DepositRequestApprove = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
firstField,
|
||||
id,
|
||||
data: requestData,
|
||||
}) => {
|
||||
const toast = useToast();
|
||||
const [file, setFile] = useState();
|
||||
const [isBtnLoading , setIsBtnLoading] = useState(false)
|
||||
const [isBtnLoading, setIsBtnLoading] = useState(false);
|
||||
|
||||
const [ updateDepositRequest ] = useUpdateDepositRequestMutation()
|
||||
const { data, isLoading } = useGetDepositRequestByIdQuery(id, {
|
||||
const [updateDepositRequest] = useUpdateDepositRequestMutation();
|
||||
const { data, isLoading } = useGetDepositRequestByIdQuery(id, {
|
||||
skip: !id,
|
||||
});
|
||||
|
||||
console.log(data?.data?.investorAmount);
|
||||
|
||||
|
||||
const {
|
||||
const {
|
||||
control,
|
||||
register,
|
||||
reset,
|
||||
watch,
|
||||
@@ -59,8 +70,8 @@ const DepositRequestApprove = ({ isOpen, onClose, firstField, id, data:requestDa
|
||||
} = useForm({
|
||||
resolver: yupResolver(conformModalSchema),
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
const investorAmount = parseFloat(data?.data?.investorAmount);
|
||||
reset({
|
||||
@@ -69,9 +80,9 @@ const DepositRequestApprove = ({ isOpen, onClose, firstField, id, data:requestDa
|
||||
});
|
||||
}
|
||||
}, [id, data, reset]);
|
||||
|
||||
const onSubmit = async(data) => {
|
||||
setIsBtnLoading(true)
|
||||
|
||||
const onSubmit = async (data) => {
|
||||
setIsBtnLoading(true);
|
||||
const formData = new FormData();
|
||||
|
||||
formData.append("investorAmount", data.investorAmount);
|
||||
@@ -79,42 +90,38 @@ const DepositRequestApprove = ({ isOpen, onClose, firstField, id, data:requestDa
|
||||
const file = data.supporting_FileName["0"];
|
||||
formData.append("supporting_FileName", file);
|
||||
|
||||
try {
|
||||
const res = await updateDepositRequest({ id, data: formData });
|
||||
|
||||
try {
|
||||
const res = await updateDepositRequest({ id ,data: formData})
|
||||
if (res?.error) {
|
||||
toast({
|
||||
render: () => (
|
||||
<ToastBox message={res?.error?.data?.message} status={"error"} />
|
||||
),
|
||||
});
|
||||
setIsBtnLoading(false);
|
||||
} else if (res?.data?.statusCode === 200) {
|
||||
toast({
|
||||
render: () => <ToastBox message={res?.data?.message} />,
|
||||
});
|
||||
setIsBtnLoading(false);
|
||||
}
|
||||
} catch (error) {}
|
||||
|
||||
|
||||
if (res?.error) {
|
||||
toast({
|
||||
render: () => (
|
||||
<ToastBox message={res?.error?.data?.message} status={"error"} />
|
||||
),
|
||||
});
|
||||
setIsBtnLoading(false)
|
||||
}else if(res?.data?.statusCode === 200) {
|
||||
toast({
|
||||
render: () => (
|
||||
<ToastBox message={res?.data?.message} />
|
||||
),
|
||||
});
|
||||
setIsBtnLoading(false)
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
|
||||
heandleOnClose();
|
||||
heandleOnClose();
|
||||
};
|
||||
|
||||
|
||||
const heandleOnClose = () =>{
|
||||
reset()
|
||||
onClose()
|
||||
}
|
||||
const heandleOnClose = () => {
|
||||
reset();
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={heandleOnClose}
|
||||
initialFocusRef={firstField}
|
||||
>
|
||||
<ModalOverlay />
|
||||
|
||||
<ModalContent pb={4}>
|
||||
@@ -125,14 +132,16 @@ const DepositRequestApprove = ({ isOpen, onClose, firstField, id, data:requestDa
|
||||
) : (
|
||||
<Box as="form" onSubmit={handleSubmit(onSubmit)}>
|
||||
<ModalBody>
|
||||
<FormControl mb={4} isRequired>
|
||||
<FormLabel fontSize="sm">Deposit Amount <Badge colorScheme="green">{data?.data?.currencyCode}</Badge></FormLabel>
|
||||
{/* <FormControl mb={4} isRequired>
|
||||
<FormLabel fontSize="sm">
|
||||
Deposit Amount
|
||||
<Badge colorScheme="green">{data?.data?.currencyCode}</Badge>
|
||||
</FormLabel>
|
||||
<Input
|
||||
focusBorderColor="green.400"
|
||||
name="investorAmount"
|
||||
{...register("investorAmount")}
|
||||
|
||||
// value={formatCurrency(watch('investorAmount'))}
|
||||
value={formatCurrency(watch("investorAmount"))}
|
||||
fontSize="sm"
|
||||
type="number"
|
||||
size="sm"
|
||||
@@ -145,7 +154,24 @@ const DepositRequestApprove = ({ isOpen, onClose, firstField, id, data:requestDa
|
||||
{errors.investorAmount.message}
|
||||
</Text>
|
||||
)}
|
||||
</FormControl> */}
|
||||
|
||||
<FormControl mb={5} isRequired>
|
||||
<FormLabel fontSize={"sm"}>Deposit Amount</FormLabel>
|
||||
<Controller
|
||||
name="investorAmount"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<CurrencyInput {...field} textAlign={'right'} fontSize={"sm"} type="number" size={"sm"} />
|
||||
)}
|
||||
/>
|
||||
{errors.investorAmount && (
|
||||
<Text fontSize="xs" color="red">
|
||||
{errors.investorAmount.message}
|
||||
</Text>
|
||||
)}
|
||||
</FormControl>
|
||||
|
||||
<FormControl mb={4} isRequired>
|
||||
<FormLabel fontSize="sm">Upload Supporting</FormLabel>
|
||||
<Input
|
||||
|
||||
@@ -37,7 +37,7 @@ const cashDetails = yup.object().shape({
|
||||
});
|
||||
|
||||
const AddCashDetails = ({ isOpen, onClose, firstField, actionId, setActionId, data }) => {
|
||||
const params = useParams()
|
||||
const params = useParams()
|
||||
const id = params?.id
|
||||
const [file, setFile] = useState("");
|
||||
const [fileName, setFileName] = useState("");
|
||||
@@ -134,7 +134,7 @@ const AddCashDetails = ({ isOpen, onClose, firstField, actionId, setActionId, da
|
||||
|
||||
<DrawerBody>
|
||||
<Stack spacing={4}>
|
||||
<FormControl isInvalid={errors.transactionDate} isRequired>
|
||||
<FormControl isInvalid={errors.transactionDate} isRequired>
|
||||
<FormLabel fontSize={"sm"}>Date Selection</FormLabel>
|
||||
<Controller
|
||||
name="transactionDate"
|
||||
|
||||
@@ -285,7 +285,7 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
|
||||
|
||||
</HStack>
|
||||
|
||||
<Box gap={8} me={12} w={"200px"}>
|
||||
<Box gap={8} me={12} w={"220px"}>
|
||||
|
||||
<Box display={"flex"} justifyContent={"space-between"} gap={2} pb={1}>
|
||||
<Text
|
||||
|
||||
@@ -1,236 +1,295 @@
|
||||
import {
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
Heading,
|
||||
Input,
|
||||
Modal,
|
||||
ModalBody,
|
||||
ModalCloseButton,
|
||||
ModalContent,
|
||||
ModalFooter,
|
||||
ModalHeader,
|
||||
ModalOverlay,
|
||||
Text,
|
||||
Textarea,
|
||||
useDisclosure,
|
||||
useToast,
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import * as yup from "yup";
|
||||
import { yupResolver } from "@hookform/resolvers/yup";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { useGetDepositRequestByIdQuery, useUpdateDepositRequestMutation } from "../../../Services/deposit.request.service";
|
||||
import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders";
|
||||
import ToastBox from "../../../Components/ToastBox";
|
||||
import { useGetDrawalRequestByIdQuery, useUpdateDrawalRequestMutation } from "../../../Services/drawal.request.service";
|
||||
|
||||
const FILE_TYPES = ["image/jpeg", "image/png", "image/gif"];
|
||||
|
||||
export const conformModalSchema = yup.object().shape({
|
||||
investorAmount: yup.string().required("Investor amount is required"),
|
||||
comment: yup.string().notRequired(),
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
Heading,
|
||||
Input,
|
||||
Modal,
|
||||
ModalBody,
|
||||
ModalCloseButton,
|
||||
ModalContent,
|
||||
ModalFooter,
|
||||
ModalHeader,
|
||||
ModalOverlay,
|
||||
Text,
|
||||
Textarea,
|
||||
useDisclosure,
|
||||
useToast,
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import * as yup from "yup";
|
||||
import { yupResolver } from "@hookform/resolvers/yup";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import {
|
||||
useGetDepositRequestByIdQuery,
|
||||
useUpdateDepositRequestMutation,
|
||||
} from "../../../Services/deposit.request.service";
|
||||
import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders";
|
||||
import ToastBox from "../../../Components/ToastBox";
|
||||
import {
|
||||
useGetDrawalRequestByIdQuery,
|
||||
useUpdateDrawalRequestMutation,
|
||||
} from "../../../Services/drawal.request.service";
|
||||
import CurrencyInput from "../../../Components/CurrencyInput";
|
||||
|
||||
const FILE_TYPES = ["image/jpeg", "image/png", "image/gif"];
|
||||
|
||||
export const conformModalSchema = yup.object().shape({
|
||||
investorAmount: yup.string().required("Investor amount is required"),
|
||||
comment: yup.string().notRequired(),
|
||||
});
|
||||
|
||||
const DrawalRequestApprove = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
firstField,
|
||||
id,
|
||||
data: requestData,
|
||||
}) => {
|
||||
const toast = useToast();
|
||||
const [file, setFile] = useState();
|
||||
const [isBtnLoading, setIsBtnLoading] = useState(false);
|
||||
|
||||
const [updateDrawalRequest] = useUpdateDrawalRequestMutation();
|
||||
const { data, isLoading } = useGetDrawalRequestByIdQuery(id, {
|
||||
skip: !id,
|
||||
});
|
||||
|
||||
const DrawalRequestApprove = ({ isOpen, onClose, firstField, id, data:requestData }) => {
|
||||
const toast = useToast()
|
||||
const [file, setFile] = useState();
|
||||
const [isBtnLoading , setIsBtnLoading] = useState(false)
|
||||
|
||||
|
||||
const filteredData = data?.dat;
|
||||
const {
|
||||
control,
|
||||
register,
|
||||
reset,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = useForm({
|
||||
resolver: yupResolver(conformModalSchema),
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
const investorAmount = parseFloat(data?.data?.investorAmount);
|
||||
reset({
|
||||
investorAmount: investorAmount,
|
||||
accountName: data?.data?.accountName,
|
||||
});
|
||||
}
|
||||
}, [id, data, reset]);
|
||||
|
||||
|
||||
|
||||
const [ updateDrawalRequest ] = useUpdateDrawalRequestMutation()
|
||||
const { data, isLoading } = useGetDrawalRequestByIdQuery(id, {
|
||||
skip: !id,
|
||||
});
|
||||
|
||||
const onSubmit = async (data) => {
|
||||
setIsBtnLoading(true);
|
||||
|
||||
const filteredData =data?.dat;
|
||||
const {
|
||||
register,
|
||||
reset,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = useForm({
|
||||
resolver: yupResolver(conformModalSchema),
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
const investorAmount = parseFloat(data?.data?.investorAmount);
|
||||
reset({
|
||||
investorAmount: investorAmount,
|
||||
accountName: data?.data?.accountName,
|
||||
});
|
||||
}
|
||||
}, [id, data, reset]);
|
||||
|
||||
const onSubmit = async(data) => {
|
||||
setIsBtnLoading(true)
|
||||
|
||||
|
||||
try {
|
||||
const res = await updateDrawalRequest({ id ,data})
|
||||
|
||||
|
||||
const res = await updateDrawalRequest({ id, data });
|
||||
|
||||
if (res?.error) {
|
||||
toast({
|
||||
render: () => (
|
||||
<ToastBox message={res?.error?.data?.message} status={"error"} />
|
||||
),
|
||||
});
|
||||
setIsBtnLoading(false)
|
||||
}else if(res?.data?.statusCode === 200) {
|
||||
setIsBtnLoading(false);
|
||||
} else if (res?.data?.statusCode === 200) {
|
||||
toast({
|
||||
render: () => (
|
||||
<ToastBox message={res?.data?.message} />
|
||||
),
|
||||
render: () => <ToastBox message={res?.data?.message} />,
|
||||
});
|
||||
setIsBtnLoading(false)
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
|
||||
setIsBtnLoading(false);
|
||||
}
|
||||
} catch (error) {}
|
||||
|
||||
heandleOnClose();
|
||||
};
|
||||
|
||||
|
||||
const handleFileChange = (event) => {
|
||||
const selectedFile = event.target.files[0];
|
||||
setFile(selectedFile);
|
||||
};
|
||||
|
||||
|
||||
// useEffect(() => {
|
||||
// if (data) {
|
||||
// reset({
|
||||
// investorAmount: data?.data?.dataValues?.investorAmount,
|
||||
// });
|
||||
// }
|
||||
// }, [data, reset]);
|
||||
|
||||
|
||||
const heandleOnClose = () =>{
|
||||
reset({
|
||||
investorAmount:""
|
||||
})
|
||||
onClose()
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
|
||||
<ModalOverlay />
|
||||
|
||||
<ModalContent pb={4}>
|
||||
<ModalHeader fontSize={"md"}>Confirm</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
{isLoading ? (
|
||||
<FullscreenLoaders height={"50vh"} />
|
||||
) : (
|
||||
<Box as="form" onSubmit={handleSubmit(onSubmit)}>
|
||||
<ModalBody>
|
||||
<FormControl mb={5} isRequired>
|
||||
<FormLabel fontSize="sm">Withdrawal Amount <Badge colorScheme="green">{filteredData?.currencyCode}</Badge></FormLabel>
|
||||
<Input
|
||||
focusBorderColor="green.400"
|
||||
name="investorAmount"
|
||||
{...register("investorAmount")}
|
||||
fontSize="sm"
|
||||
type="number"
|
||||
size="sm"
|
||||
placeholder={"100,000"}
|
||||
textAlign={"right"}
|
||||
// readOnly
|
||||
/>
|
||||
{errors.investorAmount && (
|
||||
<Text fontSize="xs" color="red">
|
||||
{errors.investorAmount.message}
|
||||
</Text>
|
||||
)}
|
||||
</FormControl>
|
||||
<Heading fontSize="sm" fontWeight={600} mb={4}>Investor Account Details</Heading>
|
||||
<Box display={"flex"} mb={3}>
|
||||
<Text fontSize="xs" mb={0} fontWeight={500} me={2} w={"110px"}>IBAN:</Text>
|
||||
<Text fontSize="xs" mb={0}>{data?.data?.bank_payouts?.IBANnumber}</Text>
|
||||
</Box>
|
||||
<Box display={"flex"} mb={3}>
|
||||
<Text fontSize="xs" mb={0} fontWeight={500} me={2} w={"110px"}>Account No:</Text>
|
||||
<Text fontSize="xs" mb={0}>{data?.data?.bank_payouts?.accountNumber}</Text>
|
||||
</Box>
|
||||
<Box display={"flex"} mb={3}>
|
||||
<Text fontSize="xs" mb={0} fontWeight={500} me={2} w={"110px"}>Bank Name:</Text>
|
||||
<Text fontSize="xs" mb={0}>{data?.data?.bank_payouts?.bankName}</Text>
|
||||
</Box>
|
||||
<Box display={"flex"} mb={3}>
|
||||
<Text fontSize="xs" mb={0} fontWeight={500} me={2} w={"110px"}>Account Name:</Text>
|
||||
<Text fontSize="xs" mb={0}>{data?.data?.bank_payouts?.accountName}</Text>
|
||||
</Box>
|
||||
<Box display={"flex"} mb={3}>
|
||||
<Text fontSize="xs" mb={0} fontWeight={500} me={2} w={"110px"}>SWIFT Code:</Text>
|
||||
<Text fontSize="xs" mb={0}>{data?.data?.bank_payouts?.swiftCode}</Text>
|
||||
</Box>
|
||||
<Box display={"flex"} mb={5}>
|
||||
<Text fontSize="xs" mb={0} fontWeight={500} me={2} w={"110px"}>Bank Address:</Text>
|
||||
<Text fontSize="xs" mb={0}>{data?.data?.bank_payouts?.bankAddress}</Text>
|
||||
</Box>
|
||||
<Box display={"flex"} mb={5}>
|
||||
<Text fontSize="xs" mb={0} fontWeight={500} me={2} w={"110px"}>Bank Nick Name:</Text>
|
||||
<Text fontSize="xs" mb={0}>{data?.data?.bank_payouts?.bankNickName}</Text>
|
||||
</Box>
|
||||
<FormControl mb={4}>
|
||||
<FormLabel fontSize="sm">Comments</FormLabel>
|
||||
<Textarea
|
||||
rows={5}
|
||||
focusBorderColor="green.400"
|
||||
name="comment"
|
||||
{...register("comment")}
|
||||
fontSize="sm"
|
||||
type="textarea"
|
||||
size="sm"
|
||||
placeholder={"Enter your comments...."}
|
||||
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="forestGreen"
|
||||
variant="solid"
|
||||
size={"sm"}
|
||||
rounded={"sm"}
|
||||
isLoading={isBtnLoading}
|
||||
type="submit"
|
||||
>
|
||||
Confirm
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</Box>
|
||||
)}
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default DrawalRequestApprove;
|
||||
|
||||
|
||||
const handleFileChange = (event) => {
|
||||
const selectedFile = event.target.files[0];
|
||||
setFile(selectedFile);
|
||||
};
|
||||
|
||||
// useEffect(() => {
|
||||
// if (data) {
|
||||
// reset({
|
||||
// investorAmount: data?.data?.dataValues?.investorAmount,
|
||||
// });
|
||||
// }
|
||||
// }, [data, reset]);
|
||||
|
||||
const heandleOnClose = () => {
|
||||
reset({
|
||||
investorAmount: "",
|
||||
});
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={heandleOnClose}
|
||||
initialFocusRef={firstField}
|
||||
>
|
||||
<ModalOverlay />
|
||||
|
||||
<ModalContent pb={4}>
|
||||
<ModalHeader fontSize={"md"}>Confirm</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
{isLoading ? (
|
||||
<FullscreenLoaders height={"50vh"} />
|
||||
) : (
|
||||
<Box as="form" onSubmit={handleSubmit(onSubmit)}>
|
||||
<ModalBody>
|
||||
{/* <FormControl mb={5} isRequired>
|
||||
<FormLabel fontSize="sm">
|
||||
Withdrawal Amount{" "}
|
||||
<Badge colorScheme="green">
|
||||
{filteredData?.currencyCode}
|
||||
</Badge>
|
||||
</FormLabel>
|
||||
<Input
|
||||
focusBorderColor="green.400"
|
||||
name="investorAmount"
|
||||
{...register("investorAmount")}
|
||||
fontSize="sm"
|
||||
type="number"
|
||||
size="sm"
|
||||
placeholder={"100,000"}
|
||||
textAlign={"right"}
|
||||
// readOnly
|
||||
/>
|
||||
{errors.investorAmount && (
|
||||
<Text fontSize="xs" color="red">
|
||||
{errors.investorAmount.message}
|
||||
</Text>
|
||||
)}
|
||||
</FormControl> */}
|
||||
{/* =======================[ Coma is acchived using Controller ]================================ */}
|
||||
<FormControl mb={5} isRequired>
|
||||
<FormLabel fontSize={"sm"}>Withdrawal Amount</FormLabel>
|
||||
<Controller
|
||||
name="investorAmount"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<CurrencyInput
|
||||
{...field}
|
||||
textAlign={"right"}
|
||||
fontSize={"sm"}
|
||||
type="number"
|
||||
size={"sm"}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.investorAmount && (
|
||||
<Text fontSize="xs" color="red">
|
||||
{errors.investorAmount.message}
|
||||
</Text>
|
||||
)}
|
||||
</FormControl>
|
||||
|
||||
<Heading fontSize="sm" fontWeight={600} mb={4}>
|
||||
Investor Account Details
|
||||
</Heading>
|
||||
<Box display={"flex"} mb={3}>
|
||||
<Text fontSize="xs" mb={0} fontWeight={500} me={2} w={"110px"}>
|
||||
IBAN:
|
||||
</Text>
|
||||
<Text fontSize="xs" mb={0}>
|
||||
{data?.data?.bank_payouts?.IBANnumber}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box display={"flex"} mb={3}>
|
||||
<Text fontSize="xs" mb={0} fontWeight={500} me={2} w={"110px"}>
|
||||
Account No:
|
||||
</Text>
|
||||
<Text fontSize="xs" mb={0}>
|
||||
{data?.data?.bank_payouts?.accountNumber}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box display={"flex"} mb={3}>
|
||||
<Text fontSize="xs" mb={0} fontWeight={500} me={2} w={"110px"}>
|
||||
Bank Name:
|
||||
</Text>
|
||||
<Text fontSize="xs" mb={0}>
|
||||
{data?.data?.bank_payouts?.bankName}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box display={"flex"} mb={3}>
|
||||
<Text fontSize="xs" mb={0} fontWeight={500} me={2} w={"110px"}>
|
||||
Account Name:
|
||||
</Text>
|
||||
<Text fontSize="xs" mb={0}>
|
||||
{data?.data?.bank_payouts?.accountName}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box display={"flex"} mb={3}>
|
||||
<Text fontSize="xs" mb={0} fontWeight={500} me={2} w={"110px"}>
|
||||
SWIFT Code:
|
||||
</Text>
|
||||
<Text fontSize="xs" mb={0}>
|
||||
{data?.data?.bank_payouts?.swiftCode}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box display={"flex"} mb={5}>
|
||||
<Text fontSize="xs" mb={0} fontWeight={500} me={2} w={"110px"}>
|
||||
Bank Address:
|
||||
</Text>
|
||||
<Text fontSize="xs" mb={0}>
|
||||
{data?.data?.bank_payouts?.bankAddress}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box display={"flex"} mb={5}>
|
||||
<Text fontSize="xs" mb={0} fontWeight={500} me={2} w={"110px"}>
|
||||
Bank Nick Name:
|
||||
</Text>
|
||||
<Text fontSize="xs" mb={0}>
|
||||
{data?.data?.bank_payouts?.bankNickName}
|
||||
</Text>
|
||||
</Box>
|
||||
<FormControl mb={4}>
|
||||
<FormLabel fontSize="sm">Comments</FormLabel>
|
||||
<Textarea
|
||||
rows={5}
|
||||
focusBorderColor="green.400"
|
||||
name="comment"
|
||||
{...register("comment")}
|
||||
fontSize="sm"
|
||||
type="textarea"
|
||||
size="sm"
|
||||
placeholder={"Enter your comments...."}
|
||||
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="forestGreen"
|
||||
variant="solid"
|
||||
size={"sm"}
|
||||
rounded={"sm"}
|
||||
isLoading={isBtnLoading}
|
||||
type="submit"
|
||||
>
|
||||
Confirm
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</Box>
|
||||
)}
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default DrawalRequestApprove;
|
||||
|
||||
Reference in New Issue
Block a user