Untitled
import React, { useState } from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'; import SecuritiesSeverityComp from '../SecuritySeverityComp'; const QuoteBuilderCollapsibleTable = ({ columns, data }) => { const [collapseData, setCollapseData] = useState({}); const toggleCollapse = (id, data) => { setCollapseData(collapseData?.id === id ? null : {id,data}); }; return ( <div className="container mt-4" style={{ maxHeight: '200px', overflow: 'auto', }}> <table className='table' > <thead> <tr> {columns.map((data, index) => ( <th key={index}>{data.header}</th> ))} </tr> </thead> <tbody style={{ backgroundColor: '#ffffff' }}> {data.map((item) => ( <React.Fragment key={item.id}> <tr> {columns.map(({ accessorKey, expandable }) => expandable ? <td onClick={() => toggleCollapse(item.id,item.details)}> <>{item.id} {collapseData?.id === item.id ? <FontAwesomeIcon icon={faChevronUp} /> : <FontAwesomeIcon icon={faChevronDown} />} </></td> : <td> {item[accessorKey]}</td>)} </tr> {collapseData?.id === item.id && ( <SecuritiesSeverityComp qouteBuilderData={item} open={collapseData.id} toggle={toggleCollapse} /> )} </React.Fragment> ))} </tbody> </table> </div> ); }; export default QuoteBuilderCollapsibleTable import { useState } from "react"; import { Accordion, AccordionBody, AccordionHeader, AccordionItem, Table } from "reactstrap"; const SecuritiesSeverityComp = ({ header, security, qouteBuilderData }) => { const [open, setOpen] = useState(""); const formatNumber = (num) => { return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); }; const formatPercentage = (value) => `${value}%`; const metrics = [ { key: "premium", label: "Premium", format: formatNumber }, { key: "adequacy", label: "Adequacy", format: formatPercentage }, { key: "rateOnLine", label: "Rate on Line", format: formatPercentage }, { key: "ultimateLossRatio", label: "Ultimate Loss Ratio", format: formatPercentage }, ]; const toggle = (id) => { setOpen(prevOpen => prevOpen === id ? "" : id); }; console.log("quo",qouteBuilderData); const details = qouteBuilderData?.details; return ( <div className="accordion-custom-dropdown"> <Accordion open={open} toggle={toggle}> <AccordionItem> <AccordionHeader targetId="1"> {header} </AccordionHeader> <AccordionBody accordionId="1"> <Table className="metrics-table" borderless> <thead> <tr className="table-header-row"> <th className="model-header"></th> <th colSpan="2" className="model-header">Modelled</th> <th colSpan="2" className="model-header">Benchmark</th> </tr> <tr > <th className="subheader"></th> <th className="subheader">Unadjusted</th> <th className="subheader">Adjusted</th> <th className="subheader">Unadjusted</th> <th className="subheader">Adjusted</th> </tr> </thead> <tbody> {metrics.map(({ key, label }) => ( <tr key={key}> <td className="accordion-label">{label}</td> <td className="model-cell"> {details?.modelled?.unadjusted[key]} </td> <td className="model-cell"> {details?.modelled?.adjusted[key]} </td> <td className="model-cell"> {details?.benchmark?.unadjusted[key]} </td> <td className="model-cell"> {details?.benchmark?.adjusted[key]} </td> </tr> ))} </tbody> </Table> </AccordionBody> </AccordionItem> </Accordion> </div> ); }; export default SecuritiesSeverityComp
Leave a Comment