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

const LargeClaims = () => {
const data = useSelector(submissionData);
const { tableColumns: claimantyearColumns } = data.ClaimantData;
const claimantyear = data.ClaimantData.tableRows;
const [apiData, setApiData] = useState(null);
const [reportingPeriod, setReportingPeriod] = useState([]);
const [zIndex, setZIndex] = useState({});
const [members, setMembers] = useState([]);
const [anchorEl, setAnchorEl] = useState(null);
const [openPopover, setOpenPopover] = useState(false);
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 || []);
};

const handlePopoverOpen = (event) => {
setAnchorEl(event.currentTarget);
setOpenPopover(true);
};

const handlePopoverClose = () => {
setOpenPopover(false);
};

useEffect(() => {
setZIndex((prev) => {
const newZIndex = {};
reportingPeriods.forEach(({ year }) => {
newZIndex[year] = year === selectedPeriod ? 100 : 5;
});
return newZIndex;
});
}, [selectedPeriod]);

return (
<div className="large-claims-page">
<div className="content">
<Box className="top-metrics-bar">
<div className='metrics-section'>
{/* Your Metrics */}
</div>
<Button
variant="outlined"
color="primary"
startIcon={<CandlestickChartOutlinedIcon className="icon-style" />}
className="button-container"
onClick={handlePopoverOpen} // Open popover when clicked
>
<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',
}}
>
{/* Period Details */}
</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 for Risk Model Table */}
<Popover
open={openPopover}
anchorEl={anchorEl} // Popover is anchored to the button
onClose={handlePopoverClose} // Close popover when clicked outside
anchorOrigin={{
vertical: 'bottom', // Position below the button
horizontal: 'left', // Align left to the button
}}
transformOrigin={{
vertical: 'top',
horizontal: 'left',
}}
PaperProps={{
style: {
width: '450px', // Width of the popover
padding: '10px', // Padding inside the popover
height: '500px', // Height of the popover
overflow: 'hidden', // Prevent overflow of the popover
},
}}
>
<Box className="risk-model-table" style={{ height: '100%', overflowY: 'auto' }}>
<Typography variant="h6" className="section-title">
Risk Model Data
</Typography>

{/* Scrollable Table Container */}
<div style={{ maxHeight: '400px', overflowY: 'auto' }}>
<DataTable
tableColumns={[
{ controlId: "column1", name: "Column 1" },
{ controlId: "column2_1", name: "Column 2.1" },
{ controlId: "column2_2", name: "Column 2.2" },
{ controlId: "column3_1", name: "Column 3.1" },
{ controlId: "column3_2", name: "Column 3.2" },
]}
tableRows={[
// Example rows, populate as per your data
{ column1: "Data 1", column2_1: "Data 2.1", column2_2: "Data 2.2", column3_1: "Data 3.1", column3_2: "Data 3.2" },
{ column1: "Data 1", column2_1: "Data 2.1", column2_2: "Data 2.2", column3_1: "Data 3.1", column3_2: "Data 3.2" },
]}
/>
</div>
</Box>
</Popover>
</div>
</div>
);
};

export default LargeClaims;