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;
}