Notes

import React from "react";
import "./LargeClaims.css";
import { submissionData } from "../../../Shared/Redux/Slicers/SubmissionSlice";
import { useSelector } from 'react-redux'
import NewDataTable from "../../../Shared/Components/NewDataTable";
import Accordion from "../../../Shared/Components/Accordian";
import { useState } from "react";
import { FaChevronDown, FaChevronUp } from 'react-icons/fa'; // Importing icons for up/down arrows

const LargeClaims = ({ isLargeClaims }) => {
const data = useSelector(submissionData)
const { tableColumns: largeClaimsTableColumns } = data.LargeClaimsTable
const newDataLargeClaim = data.LargeClaimsTable.tableRows;

const { tableColumns: claimantyearColumns } = data.ClaimantData
const claimantyear = data.ClaimantData.tableRows
const additionalFieldsForLargeClaim = data.AdditionalFieldsForLargeClaim

console.log(additionalFieldsForLargeClaim, "nnn")


console.log(newDataLargeClaim, "nnn")
console.log(claimantyear, "nnn")

const dummyData = {
GWP: "$560,166",
AcquisitionExpense: 0.8,
NWP: "$448,133"

};
const [expandedRows, setExpandedRows] = useState([]);
const accordionTitles = ["CY", "PY1", "PY2", "PY3"];

const toggleRow = (index) => {
setExpandedRows(prevState => {
// Check if the index is already in the expanded state
if (prevState.includes(index)) {
return prevState.filter(i => i !== index); // Collapse if already expanded
} else {
return [...prevState, index]; // Expand if not already expanded
}
});
};

const extraTableData = [
{ id: 1, name: "Claim 1", claimNo: "12345", amount: "$5000", status: "Open", date: "2024-01-01", assignedTo: "John" },
{ id: 2, name: "Claim 2", claimNo: "12346", amount: "$12000", status: "Closed", date: "2024-02-15", assignedTo: "Doe" },


{ id: 3, name: "Claim 3", claimNo: "12347", amount: "$8000", status: "Open", date: "2024-03-12", assignedTo: "Jane" }
];



return (
<>
<div className="top-header-div">
<div className="info-item">
<strong > GWP: </strong>{dummyData.GWP}
</div>
<div className="info-item">
<strong> Acquisition Expense: </strong>{dummyData.AcquisitionExpense}
</div>
<div className="info-item">
<strong > NWP: </strong>{dummyData.NWP}
</div>

</div>
<div className="column1 mt-3">
<table className="custom-table">
<thead>
<tr>
{/* Add Accordion Column as the first column */}
<th>Details</th>
{largeClaimsTableColumns.map((column) => (
<th key={column.controlId}>{column.name}</th>
))}
</tr>
</thead>
<tbody>
{newDataLargeClaim.map((row, rowIndex) => (
<React.Fragment key={rowIndex}>
<tr>
{/* Accordion Column on the Left */}
<td
onClick={() => toggleRow(rowIndex)}
style={{ cursor: "pointer" }}
>
<div className="accordion-header">
{/* Display the title along with the arrow */}
<span>{accordionTitles[rowIndex % accordionTitles.length]}</span>
{expandedRows.includes(rowIndex) ? <FaChevronUp /> : <FaChevronDown />}
</div>
</td>
{/* Other Table Columns */}
{largeClaimsTableColumns.map((column, colIndex) => (
<td key={colIndex}>
{/* Display the data for each cell in the table */}
{row[column.controlId]}
</td>
))}
</tr>
{expandedRows.includes(rowIndex) && (
<tr>
<td colSpan={largeClaimsTableColumns.length + 1} className="extra-table-row">
{/* Extra Table below Accordion */}
<table className="extra-table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Claim No</th>
<th>Amount</th>
<th>Status</th>
<th>Date</th>
<th>Assigned To</th>
</tr>
</thead>
<tbody>
{extraTableData.map((item, index) => (
<tr key={index}>
<td>{item.id}</td>
<td>{item.name}</td>
<td>{item.claimNo}</td>
<td>{item.amount}</td>
<td>{item.status}</td>
<td>{item.date}</td>
<td>{item.assignedTo}</td>
</tr>
))}
</tbody>
</table>
</td>
</tr>
)}
</React.Fragment>
))}
</tbody>
</table>
</div>
<div className="average-div"> <h5>Average</h5>
<h5>Expected Claimants over spec
</h5></div>
<div className="h4-div">
<h4>Claimant Year Over Year View
</h4>
</div>
<NewDataTable tableColumns={claimantyearColumns} tableRows={claimantyear} />

</>

);
};
export default LargeClaims;



.main-container {
background: var(--Background-Gray, #F7F8F9);
width: 100%;
gap: 40px;
display: flex;
flex-direction: column;
}
.main-container-div{
padding: 0px 40px 40px 40px;
}

.reset-btn {
margin-left: 0.9%;
}

.col-1 {
flex: 0 0 auto;
width: 6.33333333%;
}

.dropdown-custom {
border-radius: 4px;
border: 1px solid var(--Light-Gray, #E1E4E8);
background: var(--White, #FFF);
}

.custom-padding {
padding-left: 0px;
font-size: 13.5px;
color: var(--Black, #000);
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 21px;
}

.fff {
overflow: scroll;

}

.welcome-note {
display: flex;
justify-content: space-between;
padding-top: 56px;
padding-top: 56px;
color: var(--grayscale-black, #000);
/* Headings/H2 (40) */
font-family: Stag;
font-size: 40px;
font-style: normal;
font-weight: 500;
line-height: 48px;
/* 120% */
letter-spacing: 1px;
}

.dashboard-datatable {
border-radius: 16px;
background: var(--White, #FFF);
box-shadow: 0px 4px 30px 0px rgba(75, 76, 78, 0.10);
font-family: Stag;
width: 100%;
}

.table {
/* padding: 0.5rem 0.5rem; */
background-color: var(--bs-table-bg);
border-bottom-width: 1px;
box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
flex-shrink: 1 0 auto;
width: 100% !important;
}

.table-container {
width: 100%;
overflow: auto;
min-height:470px;
height: max-content;
max-height: 700px;
}

td {
font-family: 'Stag';
padding: 16px 24px 16px 24px !important;
color: var(--Black, #000);
/* Body/Body Small (14) */
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 21px;
/* 150% */
}

th {
padding: 16px 24px 16px 24px !important;
color: var(--Coal, #191919);
/* Body/Body Bold (16) */
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px;
/* 150% */
}

.datatable-heading-container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-self: stretch;
padding-left: 25px;
padding-right: 25px;
padding-top: 25px;

}

.search-container {
padding-left: 17px;
padding-right: 25px;
padding-top: 25px;
display: flex;
align-items: flex-end;
overflow-x: auto;
height: 7rem;
margin-bottom: 25px;
}
.input-label {
color: #000;

/* Misc./Label (14) */
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px;
/* 142.857% */
}

.input-boxes-container {
width: 260px;
height: 56px;
border-radius: 4px;
border: 1px solid var(--grayscale-light-gray, #E1E4E8);
display: flex;
justify-content: space-around;
align-items: center;
padding: 12px;
}

.search-box {
margin-left: 20px;
width: 260px;
height: 100%;
padding-bottom: 0.31%;
}

.search-itemes-box-common-box {
height: 20px;
display: flex;
justify-content: center;
align-items: center;
/* margin-left: 240px; */
}

.search-input-field {
width: 200px;
height: 40px;
align-self: flex-start;
color: var(--grayscale-coal, #191919);
/* Body/Body (16) */
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
/* 150% */
;
border: none;
outline: none;
padding: 4px;
}

.datatable-heading {
color: var(--Black, #000);
font-family: Stag;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 36px;
align-self: center;
letter-spacing: 1px;
text-transform: capitalize;
}

.Submission-status-container {
display: flex;
padding: 2px;
justify-content: center;
align-self: center;
gap: 10px;
border-radius: 4px;
border: 1px solid var(--brand-primary-700-main, #003DA5);
height: 44px;
}

.active-submission-btn {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 4px;
background: var(--brand-primary-700-main, #003DA5);
height: 100%;
width: 50%;
color: var(--grayscale-white, #FFF);
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px;
color: #FFFFFF;
width: 179px;
}

.closed-submision-btn {
border: none;
background-color: transparent;
padding: 10px;
color: var(--grayscale-coal, #191919);
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px;
width:179px
}

.table-header-row {
gap: 40px;
position :sticky;
top:0;
background: rgba(228, 243, 250, 1);
z-index : 1;
}

.thead-light {
gap: 40px;
padding: 16px 24px;
border-top: 1px solid var(--Light-Gray, #E1E4E8);
border-bottom: 1px solid var(--Light-Gray, #E1E4E8);
background: var(--Secondary-600-Tint, rgba(0, 154, 228, 0.10));
color: #191919;

}

.record-entries-container {
display: flex;
padding: 24px;
justify-content: space-between;
align-items: center;
gap: 16px;
align-self: stretch;
padding-top: 0px;
padding-bottom: 0px;
}

.records-entries {
color: var(--Medium-Gray, #A7AEBB);
/* Misc./Caption 1 (14) */
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 21px;
/* 150% */
text-transform: uppercase;
padding: 0px !important;
}

.entries {
color: black;
font-weight: bold;
}

.pagination {
display: flex;
justify-content: center;
list-style: none;
margin-top: 3%;
margin-bottom: 3%;
}

.hr-line {
height: 0px;
align-self: stretch;
stroke-width: 1px;
stroke: var(--Light-Gray, #E1E4E8);
margin-bottom: 24px;
}

.normal-td {
display:inline-block;
padding: 8px;
justify-content: left;
align-items: center;
gap: 10px;
border-radius: 8px;
color: var(--Black, #000);
/* Body/Body Small (14) */
font-family: Inter;
font-size: 14px;
font-style: normal;
line-height: 21px;
padding-left: 0px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* 150% */
}

.custom-popover-style{
font-family: Inter;
line-height: 21px;
font-weight: bold;
font-size: 14px;
text-align: center;
padding: 10px;
height: auto;
width: auto;
white-space: initial !important;
}

.td-centered{
justify-content: center;
}

.status-block {
display: flex;
padding: 8px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 8px;
background: var(--Secondary-600-Tint, rgba(0, 154, 228, 0.10));
color: #009AE4;
width: auto;
text-align: center;
color: var(--grayscale-coal, #191919);
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 500;
text-wrap: nowrap;
}

.status-block-status-width {
width: 129px;
}

.gen-ai-pass {
color: var(--Success, #00865A);

/* Misc./Label (14) */
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px;
/* 142.857% */
border-radius: 8px;
background: var(--success-tint-10, rgba(0, 134, 90, 0.10));
}

.gen-ai-fail {
color: var(--Error, #A50000);

/* Misc./Label (14) */
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 500;
border-radius: 8px;
background: var(--error-tint-10, rgba(165, 0, 0, 0.10));
line-height: 20px;
/* 142.857% */
}

.failed-status {
justify-content: center;
align-items: center;
gap: 10px;
width: auto;
color: var(--White, #FFF);
/* Misc./Label (14) */
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px;
/* 142.857% */
border-radius: 8px;
background: var(--Error, #A50000);
display: flex;
padding: 8px 0px 8px 0px;
justify-content: center;
align-items: center;
gap: 10px;
width: 50%;
}

.more-info {
color: var(--Warning, #D43900);
background: var(--warning-tint-10, rgba(212, 57, 0, 0.10));
}

.missing-info{
background: var(--status-warning-tint-10, #FBEBE5);
color: var(--status-warning, #D43900);
}

.review-needed{
color: var(--brand-primary-700-main, #003DA5);
background: var(--brand-primary-70010, #E5ECF6);
}

.Accept {
color: #00865A;
background: var(--status-success-tint-10, rgba(0, 134, 90, 0.10));
}

.Decline {
color: #A50000;
background: var(--status-error-tint-10, rgba(165, 0, 0, 0.10));
}

.Refer {
background-color: var(--brand-primary-70010, #E5ECF6);
color: var(--brand-primary-700-main, #003DA5);
}

.pending-cc-status{
background-color: var(--brand-primary-70010, #a80505);
color: var(--brand-primary-700-main, #ececec);
width: max-content;
}
.au-uw-review-status{
background-color: var(--brand-primary-70010, #c7950d);
color: var(--brand-primary-700-main, #ececec);
}
.review-complete-status{
background-color: var(--grayscale-medium-gray,#a7aebb);
color: var(--brand-primary-700-main, #ececec);
}
.accept-status{
background-color: var(--brand-primary-70010, #089c21);
color: var(--brand-primary-700-main, #ececec);
}

.Other {
background-color: var(--brand-primary-70010, #E5ECF6);
color: var(--brand-primary-700-main, #003DA5);
}

.in-progress {
background-color: #F7F8F9;
color: var(--grayscale-coal, #191919);
/* Misc./Label (14) */
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px;
/* 142.857% */
}

.close-status{
color: var(--grayscale-white, #FFF) !important;
background: var(--grayscale-medium-gray, #A7AEBB);
}

.ready-for-review-status {
color: var(--White, #FFF);
background: var(--secondary-600-main, #009AE4);
}

.in-review{
color: var(--White, #FFF);
background: var(--brand-tertiary, #00205B);
}

.gen-ai-runnig-status {
color: var(--secondary-600-main, #009AE4);
background: var(--Secondary-600-Tint, rgba(0, 154, 228, 0.10));
}

.pagination>li>a,
.pagination>li>span {
border-radius: 50% !important;
margin: 0 5px;
list-style-type: circle;
color: var(--Medium-Gray, #A7AEBB);
text-align: center;

/* Misc./Label (14) */
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px;
/* 142.857% */
}

.prev-next {
list-style-type: none !important;
border: none !important;

}

.prev-arrow-custom {
border: none;
font-size: 26px;
}

.active-page {
border-radius: 20px;
border: 1px solid var(--primary-700-main, #003DA5);
background: var(--White, #FFF);
color: #003DA5;

}
.cursor-pointer-row {
cursor : pointer;
}
.switch-container {
display: flex;
align-items: center;
gap: 12px;
}
.switch-container-outer{
display: flex;
align-items: center;
margin-right: 40px;
}

.switch-label {
color: #000;
/* Misc./Label (14) */
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px;
/* 142.857% */
}
.No-record{
display: flex;
height: 488px;
padding: 10px;
justify-content: center;
align-items: center;
gap: 10px;
flex-shrink: 0;
align-self: stretch;
background: rgba(247, 248, 249, 0.50);
}
.empty-msg{
color: var(--grayscale-medium-gray, #A7AEBB);

/* Misc./Label (14) */
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 142.857% */
}

.page-size-visibility{
visibility: hidden;
}

.sorting-btn{
background-color: transparent;
outline: none;
border: none;
}
.env-label{
position: relative;
text-align: end;
color:red
}
.summary-cards-div{
display: flex;
flex-direction: row;
margin-bottom: 35px;
}
.summary-card{
display: flex;
border-radius: 4px;
background: var(--White, #FFF);
box-shadow: 0px 4px 30px 0px rgba(75, 76, 78, 0.10);
padding: 10px;
margin-left:10px
}
.summary-details{
margin-left:10px
}
.summary-data{
font-family: 'Inter';
font-size:20px;
font-weight:700
}
.summary-text{
font-family: 'Inter';
font-size:14px;
font-weight:500
}
.icon{
padding: 5px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
}
.summary-card-span{
display: flex;
border-radius: 4px;
background: var(--White, #FFF);
box-shadow: 0px 4px 30px 0px rgba(75, 76, 78, 0.10);
padding: 10px;
}
.divider{
border-radius: 14px;
border-right:1px solid lightgray;
margin-left:10px
}
.underwriter-dropdown{
width:147px;
height:30px;
border-radius:14px

}
.icon-dashboard-summary {
padding: 5px;
}
.save-preference-button{
border-radius: 24px;
font-size: 14px;
font-family: 'Inter Medium';
height: 45px;
border: 2px solid var(--brand-primary-700-main, #003DA5);
color: var(--brand-primary-700-main, #003DA5);
}
.save-preference-button:hover{
cursor:pointer;
color: white;
background-color: #003DA5;

}
.dashboard-controls{
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 24px;
}
.inline{
display: flex;
justify-content: space-between;
}
.business-status{
display: flex;
gap:10px
}
.business-status-popup{
border: 1px solid lightgray;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
padding: 5px 5px;
}
.it-status-text{
font-family:"Inter";
font-size:14px;
font-weight: 600;
color:#191919
}

span.status-success {
color: #288106;
font-weight: 600;
font-size: 18px;
}

span.status-danger {
color: #ac1a1a;
font-weight: 600;
font-size: 18px;
}

/* <span class="status-danger">🗸</span> */