Untitled

// QuoteBuilderCollapsibleTable.jsx
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(null);

  const toggleCollapse = (id, details) => {
    if (collapseData?.id === id) {
      setCollapseData(null);
    } else {
      setCollapseData({ id, data: details });
      // Pre-open the accordion in SecuritiesSeverityComp
      document.getElementById(`accordion-${id}`)?.click();
    }
  };

  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 
                      key={accessorKey}
                      onClick={() => toggleCollapse(item.id, item.details)}
                      style={{ cursor: 'pointer' }}
                    >
                      <>{item.id} {collapseData?.id === item.id ? 
                        <FontAwesomeIcon icon={faChevronUp} /> : 
                        <FontAwesomeIcon icon={faChevronDown} />}
                      </>
                    </td>
                  ) : (
                    <td key={accessorKey}>{item[accessorKey]}</td>
                  )
                )}
              </tr>
              {collapseData?.id === item.id && (
                <tr>
                  <td colSpan={columns.length}>
                    <SecuritiesSeverityComp 
                      qouteBuilderData={item} 
                      initialOpenState={true}
                      accordionId={`accordion-${item.id}`}
                    />
                  </td>
                </tr>
              )}
            </React.Fragment>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default QuoteBuilderCollapsibleTable;

// SecuritiesSeverityComp.jsx
import { useState, useEffect } from "react";
import { Accordion, AccordionBody, AccordionHeader, AccordionItem, Table } from "reactstrap";

const SecuritiesSeverityComp = ({ header, qouteBuilderData, initialOpenState, accordionId }) => {
  const [open, setOpen] = useState("");

  // Set initial open state when the component mounts
  useEffect(() => {
    if (initialOpenState) {
      setOpen("1");
    }
  }, [initialOpenState]);

  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(open === id ? "" : id);
  };

  const details = qouteBuilderData?.details;

  return (
    <div className="accordion-custom-dropdown">
      <Accordion open={open} toggle={toggle}>
        <AccordionItem>
          <AccordionHeader targetId="1" id={accordionId}>
            {header || "Details"}
          </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;