416 lines
12 KiB
JavaScript
416 lines
12 KiB
JavaScript
import {
|
|
Alert,
|
|
AlertIcon,
|
|
Box,
|
|
Button,
|
|
FormControl,
|
|
FormErrorMessage,
|
|
FormLabel,
|
|
HStack,
|
|
Input,
|
|
Modal,
|
|
ModalBody,
|
|
ModalCloseButton,
|
|
ModalContent,
|
|
ModalFooter,
|
|
ModalHeader,
|
|
ModalOverlay,
|
|
Switch,
|
|
Table,
|
|
Tbody,
|
|
Text,
|
|
Textarea,
|
|
Th,
|
|
Tr,
|
|
useToast,
|
|
} from "@chakra-ui/react";
|
|
import NormalData from "../../../../Components/DataTable/NormalTable";
|
|
import { useState } from "react";
|
|
import { AddIcon } from "@chakra-ui/icons";
|
|
import { useGetDistributedToInvestorMutation, useGetDistributionInvestorMutation, useUpdateExitToInvestorMutation } from "../../../../Services/io.service";
|
|
import { useParams } from "react-router-dom";
|
|
import { useEffect } from "react";
|
|
import { Controller, useForm } from "react-hook-form";
|
|
import * as yup from "yup";
|
|
import { yupResolver } from "@hookform/resolvers/yup";
|
|
import ToastBox from "../../../../Components/ToastBox";
|
|
import CurrencyInput from "../../../../Components/CurrencyInput";
|
|
import { IoCalculator } from "react-icons/io5";
|
|
import { debounce } from "../../../Master/Sponser/AddSponser";
|
|
|
|
export const investor = yup.object().shape({
|
|
amount: yup.string().required("Amount is required"),
|
|
});
|
|
|
|
const DistributionInvestor = ({ isOpen, onClose, exit }) => {
|
|
const params = useParams();
|
|
const toast = useToast();
|
|
const id = params?.id;
|
|
const [ isCalculateLoading, setIsCalculateLoading ] = useState(false)
|
|
const [ isFinalCalculateLoading, setIsFinalCalculateLoading ] = useState(false)
|
|
const [ calcualtedData, setCalculatedDate ] = useState(null)
|
|
const [ isCalcualtedData, setIsCalcualtedData ] = useState(false)
|
|
|
|
// const {
|
|
// data:IObyID,
|
|
// error,
|
|
// isLoading,
|
|
// } = useGetDistributionInvestorMutation(id);
|
|
|
|
const [getDistributionInvestment] = useGetDistributionInvestorMutation();
|
|
const [getFinalDistributionInvestment] = useGetDistributedToInvestorMutation();
|
|
const [ updateExitToInvestor ] = useUpdateExitToInvestorMutation()
|
|
|
|
const {
|
|
control,
|
|
handleSubmit,
|
|
formState: { errors },
|
|
reset,
|
|
} = useForm({
|
|
resolver: yupResolver(investor),
|
|
});
|
|
|
|
|
|
// useEffect(()=>{
|
|
// try {
|
|
// const res = getDistributionInvestment({id,data})
|
|
// console.log(res);
|
|
|
|
// } catch (error) {
|
|
|
|
// }
|
|
// },[])
|
|
|
|
// console.log(IObyID);
|
|
|
|
// ====================================================[Table Setup]================================================================
|
|
const tableHeadRow = [
|
|
"Sr No.",
|
|
"Client Id",
|
|
"First name",
|
|
"Last Name",
|
|
"Amount",
|
|
"%",
|
|
"($)",
|
|
];
|
|
|
|
|
|
const extractedArray = calcualtedData?.data?.map((item, index) => ({
|
|
id: item?.id,
|
|
"Sr No.": (
|
|
<Box
|
|
w={9}
|
|
display={"flex"}
|
|
alignItems={"center"}
|
|
isTruncated={true}
|
|
h={25}
|
|
>
|
|
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
|
|
{index + 1}
|
|
</Text>
|
|
</Box>
|
|
),
|
|
"Client Id": (
|
|
<Box w={100} isTruncated={true}>
|
|
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
|
|
{item?.clientId}
|
|
</Text>
|
|
</Box>
|
|
),
|
|
"First name": (
|
|
<Box minW={24} isTruncated={true}>
|
|
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
|
|
{item?.firstName}
|
|
</Text>
|
|
</Box>
|
|
),
|
|
"Last Name": (
|
|
<Box minW={24} isTruncated={true}>
|
|
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
|
|
{item?.lastName}
|
|
</Text>
|
|
</Box>
|
|
),
|
|
Amount: (
|
|
<Box minW={24} isTruncated={true}>
|
|
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
|
|
{item?.amount?.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
|
|
</Text>
|
|
</Box>
|
|
),
|
|
"%": (
|
|
<Box minW={19} isTruncated={true}>
|
|
<Text
|
|
textAlign={"right"}
|
|
as={"span"}
|
|
color={"teal.900"}
|
|
fontWeight={"500"}
|
|
>
|
|
{item?.distribution_per} %
|
|
</Text>
|
|
</Box>
|
|
),
|
|
"($)": (
|
|
<Box minW={24} isTruncated={true}>
|
|
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
|
|
{item?.distribution_amt?.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
|
|
</Text>
|
|
</Box>
|
|
),
|
|
}))
|
|
|
|
|
|
const Total = () => {
|
|
return (
|
|
<Table size="sm">
|
|
<Tbody>
|
|
<Tr backgroundColor="gray.50">
|
|
<Th
|
|
textAlign={"left"}
|
|
p={3}
|
|
width="90px"
|
|
color={"#004118"}
|
|
whiteSpace="normal"
|
|
wordBreak="normal"
|
|
overflowWrap="normal"
|
|
>
|
|
Total
|
|
</Th>
|
|
<Th
|
|
textAlign={"center"}
|
|
p={3}
|
|
width="110px"
|
|
color={"#004118"}
|
|
whiteSpace="normal"
|
|
wordBreak="normal"
|
|
overflowWrap="normal"
|
|
>
|
|
{" "}
|
|
</Th>
|
|
<Th
|
|
textAlign={"center"}
|
|
p={3}
|
|
width="110px"
|
|
color={"#004118"}
|
|
whiteSpace="normal"
|
|
wordBreak="normal"
|
|
overflowWrap="normal"
|
|
>
|
|
{" "}
|
|
</Th>
|
|
<Th
|
|
textAlign={"center"}
|
|
p={3}
|
|
width="110px"
|
|
color={"#004118"}
|
|
whiteSpace="normal"
|
|
wordBreak="normal"
|
|
overflowWrap="normal"
|
|
>
|
|
{" "}
|
|
</Th>
|
|
<Th
|
|
textAlign={"left"}
|
|
p={3}
|
|
width="110px"
|
|
color={"#004118"}
|
|
whiteSpace="normal"
|
|
wordBreak="normal"
|
|
overflowWrap="normal"
|
|
>
|
|
{calcualtedData?.totalInvestedAmt?.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
|
|
</Th>
|
|
<Th
|
|
textAlign={"left"}
|
|
p={3}
|
|
width="90px"
|
|
color={"#004118"}
|
|
whiteSpace="normal"
|
|
wordBreak="normal"
|
|
overflowWrap="normal"
|
|
>
|
|
{calcualtedData?.distributed_per?.toFixed(2)}%
|
|
</Th>
|
|
<Th
|
|
textAlign={"center"}
|
|
p={3}
|
|
width="100px"
|
|
color={"#004118"}
|
|
whiteSpace="normal"
|
|
wordBreak="normal"
|
|
overflowWrap="normal"
|
|
>
|
|
{calcualtedData?.distributed_amt?.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
|
|
</Th>
|
|
</Tr>
|
|
</Tbody>
|
|
</Table>
|
|
);
|
|
};
|
|
|
|
const onSubmit = async (data) => {
|
|
setIsCalculateLoading(true)
|
|
|
|
try {
|
|
const res = await getDistributionInvestment({id,data})
|
|
console.log(res?.data?.data);
|
|
|
|
if (res?.error?.status === 401) {
|
|
toast({
|
|
render: () => (
|
|
<ToastBox message={res?.error?.data?.message} status={"error"} />
|
|
),
|
|
})
|
|
setIsCalculateLoading(false)
|
|
setIsCalcualtedData(false)
|
|
} else if(res?.data?.statusCode === 200){
|
|
setCalculatedDate(res?.data?.data)
|
|
toast({
|
|
render: () => (
|
|
<ToastBox message={res?.data?.message} />
|
|
),
|
|
})
|
|
setIsCalculateLoading(false)
|
|
setIsCalcualtedData(true)
|
|
|
|
}
|
|
|
|
} catch (error) {
|
|
|
|
}
|
|
};
|
|
|
|
|
|
const onFinalSubmit = async (data) => {
|
|
setIsFinalCalculateLoading(true)
|
|
if (!isCalcualtedData) {
|
|
|
|
setIsFinalCalculateLoading(false)
|
|
return toast({
|
|
render: () => (
|
|
<ToastBox message={"Please calculate investment first."} status="warn" />
|
|
),
|
|
})
|
|
}
|
|
|
|
const finalData = {
|
|
transactionAmount: data?.amount,
|
|
};
|
|
|
|
try {
|
|
const res = await exit ? updateExitToInvestor({id,data: finalData }) :getFinalDistributionInvestment({id,data: finalData });
|
|
console.log(finalData);
|
|
|
|
if (res?.error?.status === 401) {
|
|
toast({
|
|
render: () => (
|
|
<ToastBox message={res?.error?.data?.message} status="error" />
|
|
),
|
|
});
|
|
} else if (res?.data?.statusCode === 200) {
|
|
toast({
|
|
render: () => <ToastBox message={res?.data?.message} />,
|
|
});
|
|
handleClose()
|
|
}
|
|
} catch (error) {
|
|
console.error("An error occurred:", error);
|
|
} finally {
|
|
handleClose()
|
|
}
|
|
};
|
|
|
|
|
|
const handleClose = () => {
|
|
onClose()
|
|
setIsFinalCalculateLoading(false)
|
|
reset()
|
|
}
|
|
|
|
|
|
return (
|
|
<Modal size={"xl"} isOpen={isOpen} onClose={handleClose}>
|
|
<ModalOverlay />
|
|
<ModalContent maxW={1000}>
|
|
<ModalHeader fontSize={"md"}>
|
|
Distribution To Investor Transaction
|
|
</ModalHeader>
|
|
<ModalCloseButton />
|
|
<ModalBody>
|
|
{/* <Text as="label" mb="5px" fontSize="sm" fontWeight={500}>
|
|
Amount to Distribute
|
|
</Text> */}
|
|
<HStack onSubmit={handleSubmit(onSubmit)} as={"form"} mb={4}>
|
|
{/* <Input placeholder="$00.00" size={"sm"} className="col" /> */}
|
|
<FormControl isInvalid={errors.amount}>
|
|
<FormLabel textAlign={'right'} fontSize={"sm"} > Amount to Distribute</FormLabel>
|
|
<Box display={"flex"} justifyContent={'end'} alignItems={"end"} gap={2}>
|
|
<Controller
|
|
name="amount"
|
|
control={control}
|
|
render={({ field }) => (
|
|
<CurrencyInput
|
|
rounded={0}
|
|
w={'18%'}
|
|
{...field}
|
|
fontSize={"sm"}
|
|
type="number"
|
|
size={"sm"}
|
|
textAlign={"right"}
|
|
/>
|
|
)}
|
|
/>
|
|
<Button
|
|
leftIcon={<IoCalculator />}
|
|
size={"sm"}
|
|
rounded={0}
|
|
colorScheme="forestGreen"
|
|
type="submit"
|
|
isLoading={isCalculateLoading}
|
|
>
|
|
Calculate
|
|
</Button>
|
|
</Box>
|
|
<FormErrorMessage display={'flex'} justifyContent={'end'} pe={125} fontSize={"xs"} fontWeight={500}>
|
|
{errors.amount?.message}
|
|
</FormErrorMessage>
|
|
</FormControl>
|
|
</HStack>
|
|
|
|
{calcualtedData ? <NormalData
|
|
emptyMessage={`We don't have any Sponers `}
|
|
tableHeadRow={tableHeadRow}
|
|
data={extractedArray}
|
|
total={<Total />}
|
|
// isLoading={isLoading}
|
|
/> : <Alert status='info' fontSize={'sm'} rounded={'sm'}>
|
|
<AlertIcon />
|
|
Please enter amount to calcutale Distribution!
|
|
</Alert>}
|
|
</ModalBody>
|
|
<ModalFooter pt={0}>
|
|
<Button
|
|
bg={"hsla(139, 100%, 14%, 1)"}
|
|
mr={3}
|
|
color={"#fff"}
|
|
_hover={{
|
|
bg: "hsl(139deg 98.99% 26.59%)",
|
|
}}
|
|
size={"sm"}
|
|
rounded={"sm"}
|
|
onClick={handleSubmit(onFinalSubmit)}
|
|
isLoading={isFinalCalculateLoading}
|
|
>
|
|
Save
|
|
</Button>
|
|
<Button size={"sm"} rounded={"sm"} mr={3} onClick={onClose}>
|
|
Close
|
|
</Button>
|
|
</ModalFooter>
|
|
</ModalContent>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default DistributionInvestor;
|