512 lines
14 KiB
JavaScript
512 lines
14 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 { useContext, useState } from "react";
|
|
import { AddIcon } from "@chakra-ui/icons";
|
|
import {
|
|
useAddIOTransactionMutation,
|
|
useGetDistributedToInvestorMutation,
|
|
useGetDistributionInvestorMutation,
|
|
useSaveIOTransactionMutation,
|
|
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";
|
|
import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
|
|
import { validate } from "uuid";
|
|
|
|
|
|
|
|
const DistributionInvestor = ({ isOpen, onClose }) => {
|
|
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 { IODetails } = useContext(GlobalStateContext);
|
|
|
|
|
|
|
|
|
|
|
|
// const {
|
|
// data:IObyID,
|
|
// error,
|
|
// isLoading,
|
|
// } = useGetDistributionInvestorMutation(id);
|
|
|
|
const [getDistributionInvestment] = useGetDistributionInvestorMutation();
|
|
const [getFinalDistributionInvestment] =
|
|
useGetDistributedToInvestorMutation();
|
|
const [updateExitToInvestor] = useUpdateExitToInvestorMutation();
|
|
|
|
const investorExit = yup.object().shape({
|
|
amount: yup
|
|
.string()
|
|
.required("Amount is required")
|
|
.test(
|
|
"max",
|
|
`Distribution amount should not be greater than IO cash amount ${IODetails?.ioCash}`,
|
|
function(value) {
|
|
const { ioCash } = IODetails || {}; // Safely get ioCash
|
|
if (value && ioCash) {
|
|
return parseFloat(value) <= parseFloat(ioCash); // Ensure both are compared as numbers
|
|
}
|
|
return true; // If ioCash is not available, skip validation
|
|
}
|
|
),
|
|
});
|
|
|
|
const investor = yup.object().shape({
|
|
amount: yup.string().required("Amount is required"),
|
|
});
|
|
|
|
|
|
const {
|
|
control,
|
|
handleSubmit,
|
|
formState: { errors },
|
|
reset,
|
|
} = useForm({
|
|
resolver: yupResolver(investorExit),
|
|
});
|
|
|
|
|
|
const [saveIOTransaction] = useSaveIOTransactionMutation();
|
|
|
|
|
|
// ====================================================[Table Setup]================================================================
|
|
const tableHeadRow = [
|
|
"Sr No.",
|
|
"Client Id",
|
|
"First name",
|
|
"Last Name",
|
|
"Amount",
|
|
"Holding (%)",
|
|
"Distriution Amt($)",
|
|
"Yeild (%)",
|
|
];
|
|
|
|
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>
|
|
),
|
|
"Holding (%)": (
|
|
<Box minW={24} isTruncated={true}>
|
|
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
|
|
{item?.investor_holidings?.toLocaleString(undefined, {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2,
|
|
})}%
|
|
</Text>
|
|
</Box>
|
|
),
|
|
"Distriution Amt($)": (
|
|
<Box minW={24} isTruncated={true}>
|
|
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
|
|
{item?.distribution_amt?.toLocaleString(undefined, {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2,
|
|
})}
|
|
</Text>
|
|
</Box>
|
|
),
|
|
"Yeild (%)": (
|
|
<Box minW={24} isTruncated={true}>
|
|
<Text as={"span"} color={"teal.900"} fontWeight={"500"}>
|
|
{item?.distribution_per?.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"
|
|
opacity={0}
|
|
>
|
|
{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 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 onFinalSubmit = async (data) => {
|
|
setIsFinalCalculateLoading(true);
|
|
const currentDate = new Date();
|
|
const dataToSend = {
|
|
transactionDate: currentDate,
|
|
transactionAmount: data?.amount,
|
|
}
|
|
|
|
console.log("dataaaaaaa",dataToSend);
|
|
|
|
try {
|
|
const res = await saveIOTransaction({ id,data: dataToSend });
|
|
console.log(res?.data?.data);
|
|
onClose();
|
|
if (!isCalcualtedData) {
|
|
setIsFinalCalculateLoading(false);
|
|
return toast({
|
|
render: () => (
|
|
<ToastBox
|
|
message={"Please calculate investment first."}
|
|
status="warn"
|
|
/>
|
|
),
|
|
});
|
|
} else if (res?.error) {
|
|
toast({
|
|
render: () => (
|
|
<ToastBox status={"error"} message={res?.error?.data?.message} />
|
|
),
|
|
});
|
|
// setIsLoading(false);
|
|
}
|
|
} catch (error) {}
|
|
};
|
|
|
|
const handleClose = () => {
|
|
onClose();
|
|
setIsFinalCalculateLoading(false);
|
|
reset({
|
|
amount:""
|
|
});
|
|
setCalculatedDate(null);
|
|
setIsCalcualtedData(false);
|
|
};
|
|
|
|
return (
|
|
<Modal size={"xl"} isOpen={isOpen} onClose={handleClose}>
|
|
<ModalOverlay />
|
|
<ModalContent maxW={1200}>
|
|
<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} isRequired>
|
|
<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={600}>
|
|
{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}>
|
|
{isCalcualtedData ? (
|
|
<>
|
|
<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;
|