brokerage
unknown
plain_text
a year ago
12 kB
1
Indexable
Never
import { Table, TableContainer, Tbody, Td, Th, Thead, Tr } from '@chakra-ui/table'
import React, { useState } from 'react'
import uuid from 'react-uuid'
import styles from '../../assets/css/tableStyles.module.css'
import { getDateddmmyyy, numberFormat } from '../../Services/formatter'
import { getSessionStorageClientType } from '../../Services/sessionStorage'
const TradeListingTable = ({ data }) => {
let userRole = getSessionStorageClientType()
const grandTotal = {bought:0,sold:0,value:0,brokerage:0,brkAmount:0}
let clientdata = data[0];
let headers = Object.keys(clientdata);
return (
<>
<TableContainer mt={'1rem'} className={styles.tableScrollbar} w={'100%'} overflowY={'scroll'} maxH={'28vw'}>
{data?.length > 0 && <Table variant='striped' bg={'white'} size='sm'>
<Thead>
<Tr bg={'var(--vz-primary)'}>
<Th p={'1rem'} fontSize={{ base: '0.9rem', '2xl': '0.7vw' }} key={uuid()}>Date</Th>
{
userRole != 'CL' && (
<>
<Th p={'1rem'} fontSize={{ base: '0.9rem', '2xl': '0.7vw' }} key={uuid()}>ClientCode</Th>
<Th p={'1rem'} fontSize={{ base: '0.9rem', '2xl': '0.7vw' }} key={uuid()}>ClientName</Th>
</>
)
}
<Th p={'1rem'} fontSize={{ base: '0.9rem', '2xl': '0.7vw' }} key={uuid()} textAlign={'right'}>Bought</Th>
<Th p={'1rem'} fontSize={{ base: '0.9rem', '2xl': '0.7vw' }} key={uuid()} textAlign={'right'}>Sold</Th>
<Th p={'1rem'} fontSize={{ base: '0.9rem', '2xl': '0.7vw' }} key={uuid()} textAlign={'right'}>NetRate</Th>
<Th p={'1rem'} fontSize={{ base: '0.9rem', '2xl': '0.7vw' }} key={uuid()} textAlign={'right'}>Rate</Th>
<Th p={'1rem'} fontSize={{ base: '0.9rem', '2xl': '0.7vw' }} key={uuid()} textAlign={'right'}>Value</Th>
<Th p={'1rem'} fontSize={{ base: '0.9rem', '2xl': '0.7vw' }} key={uuid()} textAlign={'right'}>Brokerage</Th>
<Th p={'1rem'} fontSize={{ base: '0.9rem', '2xl': '0.7vw' }} key={uuid()} textAlign={'right'}>BrkgAmt</Th>
<Th p={'1rem'} fontSize={{ base: '0.9rem', '2xl': '0.7vw' }} key={uuid()}>TradeID</Th>
<Th p={'1rem'} fontSize={{ base: '0.9rem', '2xl': '0.7vw' }} key={uuid()}>Time</Th>
<Th p={'1rem'} fontSize={{ base: '0.9rem', '2xl': '0.7vw' }} key={uuid()}>Settlement</Th>
<Th p={'1rem'} fontSize={{ base: '0.9rem', '2xl': '0.7vw' }} key={uuid()}>Exchange</Th>
</Tr>
</Thead>
<Tbody>
{headers?.length > 0 && headers?.map((item, index) => {
let tablecontent = clientdata[item];
let totalVar = {bought:0,sold:0,value:0,brokerage:0,brkAmount:0}
return <React.Fragment key={uuid()}>
<Tr key={uuid()} >
<Td key={uuid()} fontWeight={700} fontSize={{ base: 'md', '2xl': '0.8vw' }} colSpan={"15"} className={styles.tableCustomHeadings}>{item}</Td>
</Tr>
{
tablecontent?.length > 0 && tablecontent?.map((item1) => {
let net_rate = 0;
if (item1.SellQty == 0.0) {
net_rate = item1.BuyRate;
} else {
net_rate = item1.SellRate;
}
let brokerage = 0;
if (net_rate > item1.td_marketrate) {
brokerage = net_rate - item1.td_marketrate;
} else {
brokerage = item1.td_marketrate - net_rate;
}
let brokerage_per = 0;
brokerage_per = (Number(brokerage) / Number(net_rate)) * 100;
item1.BuyQty? totalVar.bought += item1.BuyQty:""
item1.sold? totalVar.SellQty += item1.sold:""
totalVar.value += item1.NetAmount
totalVar.brokerage += brokerage
totalVar.percentage += brokerage_per
totalVar.brkAmount += item1.Brokerage
item1.BuyQty ? grandTotal.bought += item1.BuyQty:''
item1.SellQty ? grandTotal.sold += item1.SellQty:''
grandTotal.value += item1.NetAmount
grandTotal.brokerage += brokerage
grandTotal.percentage += brokerage_per
grandTotal.brkAmount += item1.Brokerage
return (<Tr key={uuid()}>
<Td fontSize={{ base: 'md', '2xl': '0.8vw' }}>{getDateddmmyyy(item1.trdDate)}</Td>
{
userRole != 'CL' && (
<>
<Td fontSize={{ base: 'md', '2xl': '0.8vw' }}>{item1.ClientCode}</Td>
<Td fontSize={{ base: 'md', '2xl': '0.8vw' }}>{item1.ClientName}</Td>
</>
)
}
<Td textAlign={'right'} fontSize={{ base: 'md', '2xl': '0.8vw' }}>{item1.BuyQty}</Td>
<Td textAlign={'right'} fontSize={{ base: 'md', '2xl': '0.8vw' }}>{item1.SellQty}</Td>
<Td textAlign={'right'} fontSize={{ base: 'md', '2xl': '0.8vw' }}>{numberFormat(net_rate)}</Td>
<Td textAlign={'right'} fontSize={{ base: 'md', '2xl': '0.8vw' }}>{numberFormat(item1.td_marketrate)}</Td>
<Td textAlign={'right'} fontSize={{ base: 'md', '2xl': '0.8vw' }}>{numberFormat(item1.NetAmount)}</Td>
<Td textAlign={'right'} fontSize={{ base: 'md', '2xl': '0.8vw' }}>{numberFormat(brokerage)}</Td>
<Td textAlign={'right'} fontSize={{ base: 'md', '2xl': '0.8vw' }}>{numberFormat(item1.Brokerage)}</Td>
<Td fontSize={{ base: 'md', '2xl': '0.8vw' }}>{item1.tradeid}</Td>
<Td fontSize={{ base: 'md', '2xl': '0.8vw' }}>{item1.trdtime}</Td>
<Td fontSize={{ base: 'md', '2xl': '0.8vw' }}>{item1.stlmnt}</Td>
<Td fontSize={{ base: 'md', '2xl': '0.8vw' }}>{item1.Exch}</Td>
</Tr>)
})
}
<Tr key={uuid()} >
<Td key={uuid()} fontWeight={700} fontSize={{ base: 'md', '2xl': '0.8vw' }} className={styles.tableOddStyle}>Total</Td>
<Td key={uuid()} fontWeight={700} fontSize={{ base: 'md', '2xl': '0.8vw' }} className={styles.tableOddStyle}></Td>
<Td key={uuid()} fontWeight={700} fontSize={{ base: 'md', '2xl': '0.8vw' }} className={styles.tableOddStyle}></Td>
<Td key={uuid()} fontWeight={700} fontSize={{ base: 'md', '2xl': '0.8vw' }} className={styles.tableOddStyle} textAlign={'right'}>{(totalVar.bought)}</Td>
<Td key={uuid()} fontWeight={700} fontSize={{ base: 'md', '2xl': '0.8vw' }} className={styles.tableOddStyle} textAlign={'right'}>{(totalVar.sold)}</Td>
<Td key={uuid()} fontWeight={700} fontSize={{ base: 'md', '2xl': '0.8vw' }} className={styles.tableOddStyle}></Td>
<Td key={uuid()} fontWeight={700} fontSize={{ base: 'md', '2xl': '0.8vw' }} className={styles.tableOddStyle}></Td>
<Td key={uuid()} fontWeight={700} fontSize={{ base: 'md', '2xl': '0.8vw' }} className={styles.tableOddStyle} textAlign={'right'}>{numberFormat(totalVar.value)}</Td>
<Td key={uuid()} fontWeight={700} fontSize={{ base: 'md', '2xl': '0.8vw' }} className={styles.tableOddStyle} textAlign={'right'}>{numberFormat(totalVar.brokerage)}</Td>
<Td key={uuid()} fontWeight={700} fontSize={{ base: 'md', '2xl': '0.8vw' }} className={styles.tableOddStyle} textAlign={'right'}>{numberFormat(totalVar.brkAmount)}</Td>
<Td key={uuid()} fontWeight={700} fontSize={{ base: 'md', '2xl': '0.8vw' }} className={styles.tableOddStyle} colSpan={'12'}></Td>
</Tr>
<Tr><Td colSpan={'15'}></Td></Tr>
</React.Fragment>
})}
<Tr key={uuid()} >
<Td key={uuid()} fontWeight={700} fontSize={{ base: 'md', '2xl': '0.8vw' }} className={styles.tableOddStyle}>Grand Total</Td>
<Td key={uuid()} fontWeight={700} fontSize={{ base: 'md', '2xl': '0.8vw' }} className={styles.tableOddStyle}></Td>
<Td key={uuid()} fontWeight={700} fontSize={{ base: 'md', '2xl': '0.8vw' }} className={styles.tableOddStyle}></Td>
<Td key={uuid()} fontWeight={700} fontSize={{ base: 'md', '2xl': '0.8vw' }} className={styles.tableOddStyle} textAlign={'right'}>{numberFormat(grandTotal.bought)}</Td>
<Td key={uuid()} fontWeight={700} fontSize={{ base: 'md', '2xl': '0.8vw' }} className={styles.tableOddStyle} textAlign={'right'}>{numberFormat(grandTotal.sold)}</Td>
<Td key={uuid()} fontWeight={700} fontSize={{ base: 'md', '2xl': '0.8vw' }} className={styles.tableOddStyle}></Td>
<Td key={uuid()} fontWeight={700} fontSize={{ base: 'md', '2xl': '0.8vw' }} className={styles.tableOddStyle}></Td>
<Td key={uuid()} fontWeight={700} fontSize={{ base: 'md', '2xl': '0.8vw' }} className={styles.tableOddStyle} textAlign={'right'}>{numberFormat(grandTotal.value)}</Td>
<Td key={uuid()} fontWeight={700} fontSize={{ base: 'md', '2xl': '0.8vw' }} className={styles.tableOddStyle} textAlign={'right'}>{numberFormat(grandTotal.brokerage)}</Td>
<Td key={uuid()} fontWeight={700} fontSize={{ base: 'md', '2xl': '0.8vw' }} className={styles.tableOddStyle} textAlign={'right'}>{numberFormat(grandTotal.brkAmount)}</Td>
<Td key={uuid()} fontWeight={700} fontSize={{ base: 'md', '2xl': '0.8vw' }} className={styles.tableOddStyle} colSpan={'12'}></Td>
</Tr>
</Tbody>
</Table>}
</TableContainer>
</>
)
}
export default TradeListingTable