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