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