Untitled
import { useState, useEffect } from "react"; import { Accordion, AccordionBody, AccordionHeader, AccordionItem, Table } from "reactstrap"; const SecuritiesSeverityComp = ({ qouteBuilderData, initialOpenState, accordionId }) => { const [open, setOpen] = useState(""); useEffect(() => { if (initialOpenState) { setOpen("1"); } }, [initialOpenState]); const toggle = (id) => { setOpen(open === id ? "" : id); }; const details = qouteBuilderData?.details; const metrics = [ { key: "premium", label: "Premium", format: num => num?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") }, { key: "adequacy", label: "Adequacy", format: value => `${value}%` }, { key: "rateOnLine", label: "Rate on Line", format: value => `${value}%` }, { key: "ultimateLossRatio", label: "Ultimate Loss Ratio", format: value => `${value}%` }, ]; return ( <div className="accordion-custom-dropdown"> <Accordion open={open} toggle={toggle}> <AccordionItem> <div className="custom-header d-flex justify-content-between align-items-center p-3" onClick={() => toggle("1")} style={{ cursor: 'pointer' }} > <div>IQUW Share</div> <div className="d-flex gap-4"> <div>{qouteBuilderData?.iquwShare || '1,000,000'}</div> <div>{qouteBuilderData?.lineSize || '150,000'}</div> </div> </div> <AccordionBody accordionId="1" className="p-0"> <div className="tables-container"> {/* First Table */} <Table className="metrics-table mb-0" 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, format }) => ( <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> {/* Second Table - Rate on Line */} <Table className="rate-table mt-3" borderless> <thead> <tr> <th colSpan="2" className="bg-light">Rate on Line</th> </tr> </thead> <tbody> <tr> <td>Technical Rate on Line</td> <td className="text-end">83%</td> </tr> <tr> <td>Quoted Rate on Line</td> <td className="text-end">78%</td> </tr> </tbody> </Table> </div> </AccordionBody> </AccordionItem> </Accordion> <style> {` .tables-container { padding: 1rem; } .metrics-table td, .rate-table td { padding: 0.5rem; height: 40px; } .rate-table { width: auto; margin-left: auto; max-width: 300px; } .rate-table th { padding: 0.5rem; background-color: #f8f9fa; } .accordion-custom-dropdown .accordion-body { padding: 0; } .model-cell { text-align: right; } `} </style> </div> ); }; export default SecuritiesSeverityComp;
Leave a Comment