Untitled
import { useState, useEffect } from "react"; import { Accordion, AccordionBody, AccordionItem, Table } from "reactstrap"; import "./QuoteDetailsAccordion.css"; import { putThousandSeparator } from "../../../../../../utils/methods"; const QuoteDetailsAccordion = ({ qouteBuilderData, initialOpenState, accordionId,toggleCollapse }) => { const [open, setOpen] = useState(""); useEffect(() => { if (initialOpenState) { setOpen(accordionId); } }, [initialOpenState]); const tableHeader = { mertics: { header: [ { key: "modelled", label: "Modelled" }, { key: "benchmark", label: "Benchmark" }, ], subHeader: [ { key: "modelledAdjusted", label: "Adjusted" }, { key: "modelledUnadjusted", label: "Unadjusted" }, { key: "benchmarkAdjusted", label: "Adjusted" }, { key: "benchmarkUnadjusted", label: "Unadjusted" }, ], }, rateOnLine: { header: [{ key: "rateOnLine", label: "Rate on Line " }], }, }; const sideLabels = { metrics: [ { key: "premium", label: "Premium" }, { key: "adequacy", label: "Adequacy" }, { key: "rateOnLine", label: "Rate on Line" }, { key: "ultimateLossRatio", label: "Ultimate Loss Ratio", }, ], rateOnLine: [ { key: "technicalRateOnLine", label: "Technical Rate on Line" }, { key: "quotedRateOnLine", label: "Quoted Rate on Line" }, ], }; const details = qouteBuilderData?.details; const handleToggle = ()=>{ toggleCollapse(qouteBuilderData.id, qouteBuilderData.details) } return ( <Accordion open={open} toggle={handleToggle}> <AccordionItem> <AccordionBody className="accordion-body" accordionId={accordionId}> <div className="metrics-table-div"> <Table className="metrics-table" borderless> <thead> <tr className="model-row"> <th className="model-header"></th> {tableHeader.mertics.header?.map((header) => ( <th key={header.key} colSpan="2" className="model-header"> {header?.label} </th> ))} </tr> <tr> {tableHeader.mertics.subHeader?.map((header, index) => ( <th key={header.key} colSpan={index == 0 ? 2 : 1} className="subheader" > {header.label} </th> ))} </tr> </thead> <tbody> {sideLabels.metrics?.map(({ key, label }) => ( <tr key={key}> <td className="text-start accordion-label">{label}</td> <td className="model-cell"> {putThousandSeparator(details?.modelled?.unadjusted[key])} </td> <td className="model-cell"> {putThousandSeparator(details?.modelled?.adjusted[key])} </td> <td className="model-cell"> {putThousandSeparator( details?.benchmark?.unadjusted[key] )} </td> <td className="model-cell"> {putThousandSeparator(details?.benchmark?.adjusted[key])} </td> </tr> ))} </tbody> </Table> </div> <div className="rate-table-div"> <Table className="rate-table" borderless> <thead> <tr> {tableHeader.rateOnLine.header.map((item) => ( <th key={item.key} className="text-start rate-header" colSpan="2" > {item.label} </th> ))} </tr> </thead> <tbody> {sideLabels.rateOnLine?.map((item) => ( <tr className="rate-row" key={item.key}> <td className="text-start rate-cell bold-cell"> {item.label} </td> <td className="rate-cell text-end"> {details?.rateOnLine[item.key]} </td> </tr> ))} </tbody> </Table> </div> </AccordionBody> </AccordionItem> </Accordion> ); }; export default QuoteDetailsAccordion; .metrics-table-div { width: 70%; } .metrics-table { margin: 0; border-collapse: separate; border-spacing: 0; border-radius: 8px; border: 1px solid #e6e7e7; } .accordion-body { display: flex; width: 100%; gap: 10px; } .metrics-table th { border-bottom: 1px solid #dee2e6; } .subheader { font-size: 14px; letter-spacing: 0px; line-height: 20px; text-align: right; } .model-row th:first-child { border-top-left-radius: 8px; } .model-row th:last-child { border-top-right-radius: 8px; } .model-header { background-color: #e3f4f0 !important; border: none !important; color: #004c45 !important; font-size: 14px; line-height: 20px; letter-spacing: 0px; text-align: center; } .model-cell { text-align: right; font-size: 14px; border-radius: 8px; } .accordion-label { font-size: 14px; font-weight: 600; border-radius: 8px; } .rate-table-div { width: 30%; } .rate-table { margin: 0; border-collapse: separate; border-spacing: 0; border-radius: 8px; border: 1px solid #e6e7e7; } .rate-header { border-top-right-radius: 8px; border-top-left-radius: 8px; } .rate-table th { background-color: #e3f4f0 !important; font-size: 14px; color: #004c45 !important; } .rate-cell { font-size: 14px; border-radius: 8px; } .bold-cell { font-weight: 600; }
Leave a Comment