Untitled

.accordion-body {
  display: flex;
  width: 100%;
  gap: 10px;
}

.metrics-table-container,
.rate-table-container {
  width: 100%;
}

.metrics-table {
  width: 70%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
  border: 1px solid #e6e7e7;
}

.rate-table {
  width: 30%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
  border: 1px solid #e6e7e7;
}

.table-header {
  background-color: #e3f4f0;
  color: #004c45;
  font-size: 14px;
  text-align: center;
}

.table-header-label {
  text-align: left;
}

.table-subheader {
  font-size: 14px;
  text-align: right;
}

.row-label {
  font-weight: bold;
}

td {
  text-align: right;
  font-size: 14px;
  padding: 8px;
}

th:first-child,
td:first-child {
  text-align: left;
}





import PropTypes from "prop-types";
import { useState, useEffect } from "react";
import { Accordion, AccordionBody, AccordionItem, Table } from "reactstrap";
import "./QuoteDetailsAccordion.css";
import { putThousandSeparator } from "../../../../../../utils/methods";

const QuoteDetailsAccordion = ({ quoteData, initialOpenState, accordionId, toggleCollapse }) => {
  const [isOpen, setIsOpen] = useState("");

  useEffect(() => {
    if (initialOpenState) {
      setIsOpen(accordionId);
    }
  }, [initialOpenState, accordionId]);

  const tableHeaders = {
    metrics: {
      main: [
        { key: "modelled", label: "Modelled" },
        { key: "benchmark", label: "Benchmark" },
      ],
      sub: [
        { key: "modelledAdjusted", label: "Adjusted" },
        { key: "modelledUnadjusted", label: "Unadjusted" },
        { key: "benchmarkAdjusted", label: "Adjusted" },
        { key: "benchmarkUnadjusted", label: "Unadjusted" },
      ],
    },
    rateOnLine: [{ 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 = quoteData?.details || {};

  const handleToggle = () => {
    toggleCollapse(quoteData.id, details);
  };

  const renderTableHeaders = (headers, subHeaders) => (
    <>
      <tr>
        <th className="table-header-label"></th>
        {headers.map((header) => (
          <th key={header.key} colSpan="2" className="table-header">
            {header.label}
          </th>
        ))}
      </tr>
      <tr>
        {subHeaders.map((header, index) => (
          <th
            key={header.key}
            colSpan={index === 0 ? 2 : 1}
            className="table-subheader"
          >
            {header.label}
          </th>
        ))}
      </tr>
    </>
  );

  const renderTableRows = (labels, dataKey) =>
    labels.map(({ key, label }) => (
      <tr key={key}>
        <td className="row-label">{label}</td>
        <td>{putThousandSeparator(details?.modelled?.unadjusted[key])}</td>
        <td>{putThousandSeparator(details?.modelled?.adjusted[key])}</td>
        <td>{putThousandSeparator(details?.benchmark?.unadjusted[key])}</td>
        <td>{putThousandSeparator(details?.benchmark?.adjusted[key])}</td>
      </tr>
    ));

  return (
    <Accordion open={isOpen} toggle={handleToggle}>
      <AccordionItem>
        <AccordionBody className="accordion-body" accordionId={accordionId}>
          <div className="metrics-table-container">
            <Table className="metrics-table" borderless>
              <thead>{renderTableHeaders(tableHeaders.metrics.main, tableHeaders.metrics.sub)}</thead>
              <tbody>{renderTableRows(sideLabels.metrics, "metrics")}</tbody>
            </Table>
          </div>
          <div className="rate-table-container">
            <Table className="rate-table" borderless>
              <thead>
                <tr>
                  {tableHeaders.rateOnLine.map((header) => (
                    <th key={header.key} className="table-header">
                      {header.label}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {sideLabels.rateOnLine.map(({ key, label }) => (
                  <tr key={key}>
                    <td className="row-label">{label}</td>
                    <td>{details?.rateOnLine[key]}</td>
                  </tr>
                ))}
              </tbody>
            </Table>
          </div>
        </AccordionBody>
      </AccordionItem>
    </Accordion>
  );
};

QuoteDetailsAccordion.propTypes = {
  quoteData: PropTypes.shape({
    id: PropTypes.string.isRequired,
    details: PropTypes.object.isRequired,
  }).isRequired,
  initialOpenState: PropTypes.bool,
  accordionId: PropTypes.string.isRequired,
  toggleCollapse: PropTypes.func.isRequired,
};

export default QuoteDetailsAccordion;