pledge
unknown
plain_text
a year ago
8.8 kB
2
Indexable
Never
import { Button, Container, Flex, Input, Radio, RadioGroup, Select, Text, VStack, useToast } from '@chakra-ui/react'
import { Table, TableContainer, Tbody, Td, Th, Thead, Tr } from '@chakra-ui/table'
import React, { useEffect, useState } from 'react'
import radioStyles from '../../assets/css/inputRadioStyles.module.css'
import { getSessionStorageLoginID } from '../../Services/sessionStorage'
import { pledgeCDSLFn } from '../../Services/getdatafromapi'
import { useNavigate } from 'react-router-dom'
import { numberFormat } from '../../Services/formatter'
const PledgeTable = ({ data,clientCode='' }) => {
const toast = useToast()
const [pledgeType, setpledgeType] = useState('MP')
const [inputValue, setinputValue] = useState(data.map((item,index)=>{return 0}))
const [amount, setAmount] = useState(0);
const [allClientRadio, setAllClientRadio] = useState('CM');
const [redirectionLink, setredirectionLink] = useState(null)
const [clientdata, setData] = useState(data);
const [errorMessage,setErrorMessage]=useState("")
const handleOnSubmit= async()=>{
let tempData = []
clientdata.map((clientdataItem,index)=>{
if(clientdataItem.new_pledge>0){
tempData.push({isin:clientdataItem.ISIN,Price:clientdataItem.Price, newPledgeQty: clientdataItem.new_pledge,script_code:clientdataItem.ScripCode})
}
})
if(tempData.length == 0){
toast({
title: 'Missing Pledge Quantity',
description: "Please enter pledge quantity to continue.",
status: 'error',
duration: 1500,
isClosable: true,
position:'top'
})
return
}
let payload = {
client_code: clientCode == ''?getSessionStorageLoginID():clientCode,
data: tempData,
segment: pledgeType == 'MP'?allClientRadio:'',
pledgeType:pledgeType
}
let res = await pledgeCDSLFn("CDSLPledge", payload);
if (res.status == 200) {
setredirectionLink(res.data)
}
else{
setErrorMessage(res.message)
}
}
data?.map((item)=>{
item.inputValue = 0
item.new_pledge = 0
})
const handleInputChange = (id, value,index) => {
const inputValueData = [...inputValue];
inputValueData[index] = parseInt(value)
setinputValue(inputValueData)
const updatedData = clientdata.map(updateDataItem => {
if (updateDataItem.ISIN == id) {
const maxPledgeQty = Math.min(parseInt(value), updateDataItem.Qty);
return { ...updateDataItem,new_pledge:value != '' ? maxPledgeQty:0, inputValue: value != '' ? (updateDataItem.Price - (updateDataItem.Haircut/100) * updateDataItem.Price) * parseInt(value):0 };
}
return updateDataItem;
});
setData(updatedData);
};
const totalCalculate = () =>{
const totalQty = clientdata.reduce((accumulator, item) => {
return accumulator + (item.inputValue);
}, 0);
setAmount(totalQty)
}
useEffect(()=>{
totalCalculate()
},[clientdata])
useEffect(() => {
if(redirectionLink != null){
const openLinkInNewTab = () => {
const url = redirectionLink;
const target = '_blank';
window.open(url, target);
};
openLinkInNewTab();
}
}, [redirectionLink]);
return (
<VStack w={'100%'}>
<a href={redirectionLink} target="_blank" rel="noopener noreferrer" style={{display:'none'}}></a>
<Container maxW='100%'>
<Flex mb={'1rem'} justifyContent={'space-between'} alignItems={'center'}>
<Flex gap={'1rem'}>
<Select defaultValue={'MP'} onChange={(e)=>setpledgeType(e.target.value)}>
<option value='MP'>Margin</option>
<option value='MF'>MTF</option>
</Select>
{pledgeType == 'MP' && <RadioGroup onChange={setAllClientRadio} value={allClientRadio}>
<Flex gap={'1rem'}>
<label htmlFor="allClientsRadio" className={radioStyles.radioBtn}>
<Radio id='allClientsRadio' value='CM' >CM</Radio>
</label>
<label htmlFor="groupRadio" className={radioStyles.radioBtn}>
<Radio id='groupRadio' value='FO' >F&O</Radio>
</label>
</Flex>
</RadioGroup>}
</Flex>
<Text>Amount : ₹ {numberFormat(amount)}</Text>
<Button bg={'var(--vz-primary)'} color={'var(--vz-white)'} _hover={{ bg: 'var(--vz-primary-dark)' }} size='md' onClick={handleOnSubmit}>Continue</Button>
</Flex>
</Container>
<Container maxW='100%'>
<TableContainer overflowY={'scroll'} maxH={'28vw'} w='full'>
<Table variant='striped' size='sm'>
<Thead>
<Tr>
<Th p={'1rem'} fontSize={{ base: '0.9rem', '2xl': '0.7vw' }}>ScripCode</Th>
<Th p={'1rem'} fontSize={{ base: '0.9rem', '2xl': '0.7vw' }}>ScriptName</Th>
<Th p={'1rem'} fontSize={{ base: '0.9rem', '2xl': '0.7vw' }}>ISIN</Th>
<Th p={'1rem'} fontSize={{ base: '0.9rem', '2xl': '0.7vw' }}>Total Qty</Th>
<Th p={'1rem'} fontSize={{ base: '0.9rem', '2xl': '0.7vw' }}>Pledge Qty</Th>
<Th p={'1rem'} fontSize={{ base: '0.9rem', '2xl': '0.7vw' }}>New Pledge</Th>
<Th p={'1rem'} fontSize={{ base: '0.9rem', '2xl': '0.7vw' }}>Price</Th>
<Th p={'1rem'} fontSize={{ base: '0.9rem', '2xl': '0.7vw' }}>Haircut</Th>
<Th p={'1rem'} fontSize={{ base: '0.9rem', '2xl': '0.7vw' }}>Net Value</Th>
</Tr>
</Thead>
<Tbody>
{clientdata?.length > 0 && clientdata?.map((item, i) => (
<Tr key={i}>
<Td fontSize={{ base: 'md', '2xl': '0.8vw' }}>{item["ScripCode"]}</Td>
<Td fontSize={{ base: 'md', '2xl': '0.8vw' }}>{item["ScripName"]}</Td>
<Td fontSize={{ base: 'md', '2xl': '0.8vw' }}>{item["ISIN"]}</Td>
<Td textAlign={'right'} fontSize={{ base: 'md', '2xl': '0.8vw' }}>{item["Qty"]}</Td>
<Td textAlign={'right'} fontSize={{ base: 'md', '2xl': '0.8vw' }}>{item["AlreadyPledge"]}</Td>
<Td p={'1rem'} fontSize={{ base: '0.9rem', '2xl': '0.7vw' }}>
<Input bg={'white'}
disabled={item.Qty == 0} value={inputValue[i]} type='number' placeholder='Enter Pledge Quantity'
onChange={(e) => {
if((parseInt(e.target.value)<0) || (parseInt(e.target.value) > parseInt(item.Qty))){
return
}else{
}
handleInputChange(item.ISIN, e.target.value,i)
}}
></Input>
</Td>
<Td textAlign={'right'} fontSize={{ base: 'md', '2xl': '0.8vw' }}>{numberFormat(item["Price"])}</Td>
<Td textAlign={'right'} fontSize={{ base: 'md', '2xl': '0.8vw' }}>{numberFormat(item["Haircut"])}</Td>
<Td textAlign={'right'} fontSize={{ base: 'md', '2xl': '0.8vw' }}>{numberFormat(item.inputValue)}</Td>
</Tr>
))}
</Tbody>
</Table>
</TableContainer>
</Container>
</VStack>
)
}
export default PledgeTable