468 lines
13 KiB
JavaScript
468 lines
13 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 {
|
|
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";
|
|
import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
|
|
|
|
const Exit = ({ 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 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 {
|
|
control,
|
|
handleSubmit,
|
|
formState: { errors },
|
|
reset,
|
|
} = useForm({
|
|
resolver: yupResolver(investorExit),
|
|
});
|
|
|
|
useEffect(() => {
|
|
console.log("hiit useEffectc");
|
|
handleCalculate(id, {
|
|
amount: IODetails?.ioMVNAV,
|
|
});
|
|
reset({
|
|
amount: IODetails?.ioMVNAV,
|
|
});
|
|
}, [IODetails, id]);
|
|
|
|
const handleCalculate = async (id, data) => {
|
|
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 {
|
|
// data:IObyID,
|
|
// error,
|
|
// isLoading,
|
|
// } = useGetDistributionInvestorMutation(id);
|
|
|
|
const [getDistributionInvestment] = useGetDistributionInvestorMutation();
|
|
const [getFinalDistributionInvestment] =
|
|
useGetDistributedToInvestorMutation();
|
|
const [updateExitToInvestor] = useUpdateExitToInvestorMutation();
|
|
|
|
const investor = yup.object().shape({
|
|
amount: yup.string().required("Amount is required"),
|
|
});
|
|
|
|
// 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",
|
|
"Holding (%)",
|
|
"Exit Amt($)",
|
|
];
|
|
|
|
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>
|
|
),
|
|
"Exit 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>
|
|
),
|
|
}));
|
|
|
|
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) => {
|
|
console.log("hit");
|
|
setIsFinalCalculateLoading(true);
|
|
// if (!isCalcualtedData) {
|
|
// setIsFinalCalculateLoading(false);
|
|
// return toast({
|
|
// render: () => (
|
|
// <ToastBox
|
|
// message={"Please calculate investment first."}
|
|
// status="warn"
|
|
// />
|
|
// ),
|
|
// });
|
|
// }
|
|
|
|
const finalData = {
|
|
transactionAmount: IODetails?.ioMVNAV,
|
|
};
|
|
|
|
try {
|
|
const res = await updateExitToInvestor({ 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);
|
|
setIsCalcualtedData(false);
|
|
};
|
|
|
|
return (
|
|
<Modal size={"xl"} isOpen={isOpen} onClose={handleClose}>
|
|
<ModalOverlay />
|
|
<ModalContent maxW={1000}>
|
|
<ModalHeader fontSize={"md"}>Exit 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} alignItems={'center'}>
|
|
{/* <Input placeholder="$00.00" size={"sm"} className="col" /> */}
|
|
{/* <FormControl isInvalid={errors.amount} isRequired>*/}
|
|
<Text textAlign={"right"} fontSize={"sm"}>
|
|
Exit Amount :
|
|
</Text>
|
|
<Text
|
|
textAlign={"start"}
|
|
bg={"green.100"}
|
|
p={2}
|
|
rounded={"md"}
|
|
fontSize={"sm"}
|
|
pt={1}
|
|
pb={1}
|
|
fontWeight={600}
|
|
>
|
|
${" "}
|
|
{parseFloat(IODetails?.ioMVNAV || 0).toLocaleString(undefined, {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2,
|
|
})}
|
|
</Text>
|
|
|
|
{/* </FormControl> */}
|
|
</HStack>
|
|
|
|
{/* {calcualtedData && ( */}
|
|
<NormalData
|
|
emptyMessage={`We don't have any Sponers `}
|
|
tableHeadRow={tableHeadRow}
|
|
data={extractedArray}
|
|
// total={<Total />}
|
|
// isLoading={isLoading}
|
|
/>
|
|
{/* ) } */}
|
|
</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={() => onFinalSubmit()}
|
|
isLoading={isFinalCalculateLoading}
|
|
>
|
|
Save
|
|
</Button>
|
|
<Button size={"sm"} rounded={"sm"} mr={3} onClick={onClose}>
|
|
Close
|
|
</Button>
|
|
</>
|
|
) : (
|
|
""
|
|
)}
|
|
</ModalFooter>
|
|
</ModalContent>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default Exit;
|