Notes

.policy-details-container {
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}

.policy-details-header {
display: flex;
justify-content: space-between;
align-items: center;
}

.policy-details-header h1 {
margin: 0;
font-size: 24px;
}

.back-button {
padding: 10px 20px;
font-size: 16px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

.policy-details-card {
background-color: #f8f9fa;
padding: 20px;
margin-top: 20px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.policy-info .info-row {
display: flex;
justify-content: space-between;
padding: 10px 0;
}

.info-title {
font-weight: bold;
}

.info-value {
font-size: 16px;
}

.status-active {
color: green;
}

.premium-receipts-container {
margin-top: 40px;
}

.term-button-container {
display: flex;
justify-content: flex-end;
margin-bottom: 10px;
}

.term-button {
padding: 8px 16px;
background-color: #f1f1f1;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
}

.premium-receipts-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}

.premium-receipts-table th,
.premium-receipts-table td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}

.status-outstanding {
color: red;
}

.status-badge {
padding: 5px 10px;
border-radius: 20px;
font-size: 14px;
}

.status-badge.outstanding {
background-color: #fce4e4;
color: #e74c3c;
border: 1px solid #e74c3c;
}

.calculate-button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 20px;
cursor: pointer;
}

.invoice-link,
.download-link {
color: #007bff;
text-decoration: none;
padding: 10px;
}

.invoice-link:hover,
.download-link:hover {
text-decoration: underline;
}




import React from 'react';
import './PolicyDetails.css';

const PolicyDetails = () => {
return (
<div className="policy-details-container">
<div className="policy-details-header">
<h1>Policy details</h1>
<button className="back-button">Back to Dashboard</button>
</div>

<div className="policy-details-card">
<div className="policy-info">
<div className="info-row">
<span className="info-title">Policy Holder:</span>
<span className="info-value">Performance Services</span>
</div>
<div className="info-row">
<span className="info-title">Policy Number:</span>
<span className="info-value">LGS01581-24</span>
</div>
<div className="info-row">
<span className="info-title">Policy Status:</span>
<span className="info-value status-active">Active</span>
</div>
<div className="info-row">
<span className="info-title">Coverage:</span>
<span className="info-value">Medical stop loss</span>
</div>
<div className="info-row">
<span className="info-title">Policy Effective Date:</span>
<span className="info-value">1/1/2024</span>
</div>
</div>
</div>

<div className="premium-receipts-container">
<h2>Monthly premium receipts</h2>
<div className="term-button-container">
<button className="term-button">Term – 2024</button>
</div>
<table className="premium-receipts-table">
<thead>
<tr>
<th>Reporting Period</th>
<th>Census</th>
<th>Gross Premium</th>
<th>Premium Received</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td className="status-outstanding">04/2022</td>
<td>-</td>
<td>-</td>
<td><span className="status-badge outstanding">Outstanding</span></td>
<td><button className="calculate-button">Calculate premium</button></td>
<td><a href="#" className="invoice-link">View invoice</a></td>
<td><a href="#" className="download-link">Download</a></td>
</tr>
<tr>
<td className="status-outstanding">03/2022</td>
<td>-</td>
<td>-</td>
<td><span className="status-badge outstanding">Outstanding</span></td>
<td><button className="calculate-button">Calculate premium</button></td>
<td><a href="#" className="invoice-link">View invoice</a></td>
<td><a href="#" className="download-link">Download</a></td>
</tr>
<tr>
<td>02/2022</td>
<td>192</td>
<td>$35,411.81</td>
<td>$35,411.81</td>
<td><button className="calculate-button">Calculate premium</button></td>
<td><a href="#" className="invoice-link">View invoice</a></td>
<td><a href="#" className="download-link">Download</a></td>
</tr>
<tr>
<td>01/2022</td>
<td>189</td>
<td>$24,905.36</td>
<td>$34,905.36</td>
<td><button className="calculate-button">Calculate premium</button></td>
<td><a href="#" className="invoice-link">View invoice</a></td>
<td><a href="#" className="download-link">Download</a></td>
</tr>
</tbody>
</table>
</div>
</div>
);
}

export default PolicyDetails;