Notes

import React, { useState, useEffect } from 'react';
import "./LargeClaims.css";
import { submissionData } from "../../../Shared/Redux/Slicers/SubmissionSlice";
import { useSelector } from 'react-redux';
import DataTable from "../../../Shared/Components/DataTable";
import { Card, Typography, Box, Button, Popover } from "@mui/material";
import ApiService from '../../../Shared/Services/CyberAIService'
import CandlestickChartOutlinedIcon from '@mui/icons-material/CandlestickChartOutlined';
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';

const LargeClaims = () => {
const data = useSelector(submissionData);
const { tableColumns: claimantyearColumns } = data.ClaimantData;
const claimantyear = data.ClaimantData.tableRows;
console.log(claimantyear, "claimantyear")
const [apiData, setApiData] = useState(null);
const [reportingPeriod, setReportingPeriod] = useState([]);

const [zIndex, setZIndex] = useState({});

const [members, setMembers] = useState([]);
// State for managing the visibility of the popover
const [anchorEl, setAnchorEl] = useState(null); // anchorEl will control the position of the popover
const [openPopover, setOpenPopover] = useState(false); // Popover visibility

const [reportingPeriods, setReportingPeriods] = useState([]);
const [selectedPeriod, setSelectedPeriod] = useState(null);
const getLargeClaimsAPI = async () => {
let id1 = "c99d4434-856b-4a84-a827-7093bda960a7";
let version1 = 1;
try {
const res = await ApiService.getLargeClaimsAPIUrl(id1, version1);
let data = res.data;
if (data) {
setApiData(data);
setReportingPeriod(data.reporting_period || []);
setMembers(data.reporting_period[0]?.members || []);
}
} catch (error) {
console.error(error);
throw new Error("Something went wrong");
}
};


useEffect(() => {
if (apiData && apiData.reporting_period.length > 0) {
setReportingPeriods(apiData.reporting_period);
setSelectedPeriod(apiData.reporting_period[0]);
setMembers(apiData.reporting_period[0].members);
}
}, [apiData]);


useEffect(() => {
getLargeClaimsAPI();
}, []);

const handlePeriodClick = (item) => {
setSelectedPeriod(item);
setMembers(item.members || []);
};
// Handle popover open/close
const handlePopoverOpen = (event) => {
setAnchorEl(event.currentTarget); // Set the element that will anchor the popover
setOpenPopover(true); // Show popover
};

const handlePopoverClose = () => {
setOpenPopover(false); // Hide popover
};
const rowData = [
{ deductible: "60,000", probMod: "3.72%", claimsMod: "9.8", probStrong: "1.25%", claimsStrong: "7.7" },
{ deductible: "70,000", probMod: "2.85%", claimsMod: "8.3", probStrong: "0.98%", claimsStrong: "6.9" },
{ deductible: "80,000", probMod: "2.10%", claimsMod: "7.2", probStrong: "0.75%", claimsStrong: "5.8" },
{ deductible: "90,000", probMod: "1.65%", claimsMod: "6.1", probStrong: "0.60%", claimsStrong: "4.9" },
{ deductible: "100,000", probMod: "1.30%", claimsMod: "5.0", probStrong: "0.45%", claimsStrong: "4.2" },
{ deductible: "110,000", probMod: "1.05%", claimsMod: "4.2", probStrong: "0.35%", claimsStrong: "3.5" },
{ deductible: "120,000", probMod: "0.85%", claimsMod: "3.5", probStrong: "0.28%", claimsStrong: "2.9" },
{ deductible: "130,000", probMod: "0.70%", claimsMod: "2.9", probStrong: "0.22%", claimsStrong: "2.4" },
{ deductible: "140,000", probMod: "0.58%", claimsMod: "2.3", probStrong: "0.18%", claimsStrong: "1.9" },
{ deductible: "150,000", probMod: "0.47%", claimsMod: "1.9", probStrong: "0.14%", claimsStrong: "1.5" },
{ deductible: "170,000", probMod: "2.85%", claimsMod: "8.3", probStrong: "0.98%", claimsStrong: "6.9" },
{ deductible: "180,000", probMod: "2.10%", claimsMod: "7.2", probStrong: "0.75%", claimsStrong: "5.8" },
{ deductible: "190,000", probMod: "1.65%", claimsMod: "6.1", probStrong: "0.60%", claimsStrong: "4.9" }
];

useEffect(() => {
// Dynamically update zIndex to keep the selected card above the content
setZIndex((prev) => {
const newZIndex = {};
reportingPeriods.forEach(({ year }) => {
newZIndex[year] = year === selectedPeriod ? 100 : 5;
});
return newZIndex;
});
}, [selectedPeriod]);
console.log(apiData, "apiData");

return (
<div className="large-claims-page">
<div className="content">
<Box className="top-metrics-bar">
<div className='metrics-section'>
<div className="metric-item"><span className="metric-label-gwp"><strong>GWP</strong></span> <span className="metric-value-gwp">{apiData?.gwp && apiData.gwp != "" ? `$${apiData.gwp}` : ""} {<InfoOutlinedIcon className='gwp-icon'></InfoOutlinedIcon>}</span></div>
<div className="metric-item"><span className="metric-label"><strong>Acquisition Expenses</strong></span> <span className="metric-value">{apiData?.acquisition_expense}</span></div>
<div className="metric-item"><span className="metric-label"><strong>Commission</strong></span> <span className="metric-value">{apiData?.commission}</span></div>


<div className="metric-item"><span className="metric-label"><strong>NWP</strong></span> <span className="metric-value">{apiData?.nwp && apiData.nwp != "" ? `$${apiData.nwp}` : ""}</span></div>
<div className="metric-item"><span className="metric-label"><strong>Deductible</strong></span> <span className="metric-value">{apiData?.deductible && apiData.deductible != "" ? `$${apiData.deductible}` : ""}</span></div>
<div className='border-deductible'></div>

<div className="metric-item"><span className="metric-label"><strong>Average</strong></span> <span className="metric-value">{apiData?.average_claims_over_spec && apiData.average_claims_over_spec != "" ? `$${apiData.average_claims_over_spec}` : ""}</span></div>
<div className="metric-item"><span className="metric-label"><strong>Expected Claimants Over Spec</strong></span> <span className="metric-value">{apiData?.expected_claimants_over_spec}</span></div>
</div>
<Button
variant="outlined"
color="blue"
startIcon={<CandlestickChartOutlinedIcon className="icon-style" />}
className="button-container"
onClick={handlePopoverOpen}

>
<Typography variant="button" className="button-text">Risk Model</Typography>
</Button>
</Box>
<Typography variant="h6" className="section-title">
Large Claims Summary & Risk Assessment
</Typography>
<div className="large-claims-container">
<div className="sidebar">
{reportingPeriods.map((item, index) => (
<Card
key={index}
onClick={() => handlePeriodClick(item)}
className={`year-card ${selectedPeriod?.period === item.period ? "selected" : ""}`}
style={{
zIndex: zIndex[item] || 5,
background: selectedPeriod?.period === item.period ? '#fff' : '#f0f0f0',
}}
>
<Typography variant="h6"><strong>{item.period}</strong></Typography>
<Typography variant="body2">{item.start_date} - {item.end_date}, ({item.num_of_months} Months)</Typography>
<Typography variant="body2">Contract Basis: {item.contract_type}</Typography>
<Typography variant="body2">Claims Over Spec: {item.claims_over_spec && item.claims_over_spec != "" ? `$${item.claims_over_spec}` : ""}</Typography>
<Typography variant="body2">Claimants: {item.num_of_claimants_over_spec}</Typography>
<Typography variant="body2">Loss Ratio: {item.loss_ratio && item.loss_ratio != "" ? `${item.loss_ratio}%` : ""}</Typography>
</Card>
))}

</div>
<div className="expanded-panel">
<Box className="expanded-card-header">
<Typography variant="h6">{selectedPeriod?.period} {selectedPeriod?.start_date} - {selectedPeriod?.end_date}</Typography>
</Box>
<div className="claims-table">
<DataTable
tableColumns={[
{ controlId: "term", name: "Termed" },
{ controlId: "member_id", name: "MEMBER ID/Name/Unique ID" },
{ controlId: "diagnosis", name: "Diagnosis/Dx Code/Dx Descriptor" },
{ controlId: "laser_info", name: "Laser Info" },
{ controlId: "med_claims", name: "Med Claims", render: (row) => (row.med_claims && row.med_claims !== "" ? `$${row.med_claims}` : "N/A") },
{ controlId: "rx_claims", name: "Rx Claims", render: (row) => (row.rx_claims && row.rx_claims !== "" ? `$${row.rx_claims}` : "N/A") },
{ controlId: "total_claims", name: "Total Claims", render: (row) => (row.total_claims && row.total_claims !== "" ? `$${row.total_claims}` : "N/A") }
]}
tableRows={members.map(member => ({
...member,
med_claims: member.med_claims && member.med_claims !== "" ? `$${member.med_claims}` : "",
rx_claims: member.rx_claims && member.rx_claims !== "" ? `$${member.rx_claims}` : "",
total_claims: member.total_claims && member.total_claims !== "" ? `$${member.total_claims}` : ""
}))} />
</div>
</div>
</div>
<div className='border'></div>
<Typography variant="h6" className="section-title">
Claimant Year Over Year
</Typography>
<div className="claims-table">
<DataTable tableColumns={claimantyearColumns} tableRows={claimantyear} />
</div>
<Popover
open={openPopover}
anchorEl={anchorEl}
onClose={handlePopoverClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'left',
}}
PaperProps={{
style: {
width: '450px',
padding: '10px',
height: '500px',
},
}}
>
<Box className="risk-model-box" style={{ width: '100%', overflowy: 'auto', overflowx: 'auto' }}>
<div className='header-text'>
<strong style={{marginLeft: "20px"}}>No. of EE's: 237</strong>
<div className='header-text-border'></div>
</div>

<table className="risk-model-table" style={{ borderCollapse: "collapse", width: "100%", fontSize: "10px" }}>

<thead>
<tr>
<th className="column-specific" rowSpan="2" style={{border: "2px solid black", width: "20%", textAlign: "center" }}>
Specific Deductible
</th>
<th colSpan="2" style={{ border: "2px solid black", textAlign: "center" }}>
Moderate Network
</th>
<th className="column-strong" colSpan="2" style={{ border: "2px solid black", textAlign: "center" }}>
Strong/BUCA Network
</th>
</tr>
<tr>
<th className="no-border-right">Probability exceeding Specific deductible</th>
<th className="no-border-left">Expected number of claims based on group size</th>
<th className="no-border-right-border">Probability exceeding Specific deductible</th>
<th className="no-border-left">Expected number of claims based on group size</th>
</tr>
</thead>
<tbody>
{rowData.map((row, index) => (
<tr key={index}>
<td className="no-border-deductible"><strong>{row.deductible}</strong></td>
<td className="no-border-probMod">{row.probMod}</td>
<td className="no-border-claimsMod">{row.claimsMod}</td>
<td className="no-border-probStrong">{row.probStrong}</td>
<td className="no-border-claimsStrong">{row.claimsStrong}</td>
</tr>
))}
</tbody>
</table>
</Box>
</Popover>
</div>
</div>
);
};


export default LargeClaims;