484 lines
21 KiB
HTML
484 lines
21 KiB
HTML
{% load static %}
|
|
|
|
<div class="claims-history-container">
|
|
<!-- Claims Summary -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-header bg-primary text-white">
|
|
<h6 class="card-title mb-0">
|
|
<i class="fas fa-chart-bar me-2"></i>Claims Summary
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-3">
|
|
<div class="col-md-3 col-sm-6">
|
|
<div class="d-flex align-items-center p-3 bg-light rounded">
|
|
<div class="me-3">
|
|
<i class="fas fa-file-medical text-primary fa-2x"></i>
|
|
</div>
|
|
<div>
|
|
<div class="h5 mb-0">{{ summary.total_claims }}</div>
|
|
<small class="text-muted">Total Claims</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3 col-sm-6">
|
|
<div class="d-flex align-items-center p-3 bg-light rounded">
|
|
<div class="me-3">
|
|
<i class="fas fa-dollar-sign text-success fa-2x"></i>
|
|
</div>
|
|
<div>
|
|
<div class="h5 mb-0"><span class="symbol">ê</span>{{ summary.total_claimed|floatformat:2 }}</div>
|
|
<small class="text-muted">Total Claimed</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3 col-sm-6">
|
|
<div class="d-flex align-items-center p-3 bg-light rounded">
|
|
<div class="me-3">
|
|
<i class="fas fa-check-circle text-success fa-2x"></i>
|
|
</div>
|
|
<div>
|
|
<div class="h5 mb-0"><span class="symbol">ê</span>{{ summary.total_approved|floatformat:2 }}</div>
|
|
<small class="text-muted">Total Approved</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3 col-sm-6">
|
|
<div class="d-flex align-items-center p-3 bg-light rounded">
|
|
<div class="me-3">
|
|
<i class="fas fa-percentage text-info fa-2x"></i>
|
|
</div>
|
|
<div>
|
|
<div class="h5 mb-0">{{ summary.approval_rate }}%</div>
|
|
<small class="text-muted">Approval Rate</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-3">
|
|
<div class="col-md-4">
|
|
<div class="text-center">
|
|
<div class="h6 text-success">{{ summary.approved_claims }}</div>
|
|
<small class="text-muted">Approved Claims</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="text-center">
|
|
<div class="h6 text-warning">{{ summary.pending_claims }}</div>
|
|
<small class="text-muted">Pending Claims</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="text-center">
|
|
<div class="h6 text-danger">{{ summary.denied_claims }}</div>
|
|
<small class="text-muted">Denied Claims</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Claims Filter -->
|
|
<div class="row mb-3">
|
|
<div class="col-12">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body py-2">
|
|
<div class="row align-items-center">
|
|
<div class="col-md-8">
|
|
<div class="d-flex gap-2 flex-wrap">
|
|
<button type="button" class="btn btn-outline-primary btn-sm active" onclick="filterClaims('all')">
|
|
All Claims
|
|
</button>
|
|
<button type="button" class="btn btn-outline-success btn-sm" onclick="filterClaims('approved')">
|
|
Approved
|
|
</button>
|
|
<button type="button" class="btn btn-outline-warning btn-sm" onclick="filterClaims('pending')">
|
|
Pending
|
|
</button>
|
|
<button type="button" class="btn btn-outline-danger btn-sm" onclick="filterClaims('denied')">
|
|
Denied
|
|
</button>
|
|
<button type="button" class="btn btn-outline-info btn-sm" onclick="filterClaims('paid')">
|
|
Paid
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 text-end">
|
|
<div class="input-group input-group-sm">
|
|
<input type="text" class="form-control" placeholder="Search claims..." id="claims-search">
|
|
<button class="btn btn-outline-secondary" type="button">
|
|
<i class="fas fa-search"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Claims List -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-header bg-secondary text-white d-flex justify-content-between align-items-center">
|
|
<h6 class="card-title mb-0">
|
|
<i class="fas fa-list me-2"></i>Claims History
|
|
</h6>
|
|
<div>
|
|
<button type="button" class="btn btn-outline-light btn-sm me-2" onclick="exportClaims()">
|
|
<i class="fas fa-download me-1"></i>Export
|
|
</button>
|
|
<button type="button" class="btn btn-outline-light btn-sm" onclick="refreshClaims()">
|
|
<i class="fas fa-sync-alt me-1"></i>Refresh
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
{% if claims %}
|
|
<div class="table-responsive">
|
|
<table class="table table-hover mb-0" id="claims-table">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th>Claim ID</th>
|
|
<th>Service Date</th>
|
|
<th>Service Type</th>
|
|
<th>Provider</th>
|
|
<th>Amount</th>
|
|
<th>Approved</th>
|
|
<th>Patient Resp.</th>
|
|
<th>Status</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for claim in claims %}
|
|
<tr class="claim-row" data-status="{{ claim.status }}" data-service-type="{{ claim.service_type|lower }}">
|
|
<td>
|
|
<div class="fw-bold text-primary">{{ claim.claim_id }}</div>
|
|
<small class="text-muted">Filed: {{ claim.claim_date }}</small>
|
|
</td>
|
|
<td>
|
|
<div class="fw-bold">{{ claim.service_date }}</div>
|
|
{% if claim.diagnosis_code %}
|
|
<small class="text-muted">{{ claim.diagnosis_code }}</small>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<div class="fw-bold">{{ claim.service_type }}</div>
|
|
{% if claim.procedure_code %}
|
|
<small class="text-muted">{{ claim.procedure_code }}</small>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<div class="fw-bold">{{ claim.provider }}</div>
|
|
</td>
|
|
<td>
|
|
<div class="fw-bold"><span class="symbol">ê</span>{{ claim.claim_amount|floatformat:'2g' }}</div>
|
|
</td>
|
|
<td>
|
|
{% if claim.approved_amount > 0 %}
|
|
<div class="fw-bold text-success"><span class="symbol">ê</span>{{ claim.approved_amount|floatformat:'2g' }}</div>
|
|
{% else %}
|
|
<span class="text-muted">-</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{% if claim.patient_responsibility > 0 %}
|
|
<div class="fw-bold text-warning"><span class="symbol">ê</span>{{ claim.patient_responsibility|floatformat:'2g' }}</div>
|
|
{% else %}
|
|
<span class="text-muted">-</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<span class="badge {% if claim.status == 'approved' or claim.status == 'paid' %}bg-success{% elif claim.status == 'pending' or claim.status == 'processing' %}bg-warning{% elif claim.status == 'denied' %}bg-danger{% else %}bg-secondary{% endif %}">
|
|
{{ claim.status|title }}
|
|
</span>
|
|
{% if claim.processed_date %}
|
|
<br><small class="text-muted">{{ claim.processed_date }}</small>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<div class="btn-group btn-group-sm">
|
|
<button type="button" class="btn btn-outline-primary" onclick="viewClaimDetail('{{ claim.claim_id }}')" title="View Details">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
{% if claim.status == 'denied' %}
|
|
<button type="button" class="btn btn-outline-warning" onclick="appealClaim('{{ claim.claim_id }}')" title="Appeal">
|
|
<i class="fas fa-gavel"></i>
|
|
</button>
|
|
{% endif %}
|
|
{% if claim.status == 'paid' %}
|
|
<button type="button" class="btn btn-outline-success" onclick="downloadEOB('{{ claim.claim_id }}')" title="Download EOB">
|
|
<i class="fas fa-download"></i>
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-5">
|
|
<i class="fas fa-file-medical fa-3x text-muted mb-3"></i>
|
|
<h6 class="text-muted">No Claims History</h6>
|
|
<p class="text-muted">No insurance claims found for this policy.</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Patient Responsibility Summary -->
|
|
{% if summary.total_patient_responsibility > 0 %}
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<div class="alert alert-info d-flex align-items-center">
|
|
<div class="me-3">
|
|
<i class="fas fa-info-circle fa-2x"></i>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<h6 class="alert-heading mb-1">Patient Financial Responsibility</h6>
|
|
<p class="mb-0">
|
|
Total patient responsibility for all claims: <strong><span class="symbol">ê</span>{{ summary.total_patient_responsibility|floatformat:'2g' }}</strong>
|
|
<br><small class="text-muted">This includes copays, deductibles, and non-covered services.</small>
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<button type="button" class="btn btn-outline-primary btn-sm" onclick="generatePaymentPlan()">
|
|
<i class="fas fa-credit-card me-1"></i>Payment Plan
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Claim Detail Modal -->
|
|
<div class="modal fade" id="claimDetailModal" tabindex="-1">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">
|
|
<i class="fas fa-file-medical me-2"></i>Claim Details
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body" id="claim-detail-content">
|
|
<!-- Claim details will be loaded here -->
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
|
|
<i class="fas fa-times me-1"></i>Close
|
|
</button>
|
|
<button type="button" class="btn btn-primary" onclick="printClaimDetail()">
|
|
<i class="fas fa-print me-1"></i>Print
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.claims-history-container .card {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.claims-history-container .card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
|
|
}
|
|
|
|
.claims-history-container .bg-light {
|
|
background-color: #f8f9fa !important;
|
|
border: 1px solid #e9ecef;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.claims-history-container .bg-light:hover {
|
|
background-color: #e9ecef !important;
|
|
border-color: #dee2e6;
|
|
}
|
|
|
|
.claims-history-container .table-hover tbody tr:hover {
|
|
background-color: rgba(0,123,255,0.05);
|
|
}
|
|
|
|
.claims-history-container .btn-group-sm .btn {
|
|
padding: 0.25rem 0.5rem;
|
|
}
|
|
|
|
.claims-history-container .claim-row.filtered-out {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.claims-history-container .table-responsive {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.claims-history-container .btn-group-sm .btn {
|
|
padding: 0.125rem 0.25rem;
|
|
}
|
|
|
|
.claims-history-container .btn-group-sm .btn i {
|
|
font-size: 0.75rem;
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
.claims-history-container .btn,
|
|
.claims-history-container .card-header .btn {
|
|
display: none !important;
|
|
}
|
|
|
|
.claims-history-container .card {
|
|
border: 1px solid #000 !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.claims-history-container .card-header {
|
|
background-color: #f8f9fa !important;
|
|
color: #000 !important;
|
|
border-bottom: 1px solid #000 !important;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
let currentFilter = 'all';
|
|
|
|
function filterClaims(status) {
|
|
currentFilter = status;
|
|
|
|
// Update button states
|
|
$('.card-body .btn').removeClass('active');
|
|
$(event.target).addClass('active');
|
|
|
|
// Filter table rows
|
|
$('.claim-row').each(function() {
|
|
const rowStatus = $(this).data('status');
|
|
if (status === 'all' || rowStatus === status) {
|
|
$(this).removeClass('filtered-out');
|
|
} else {
|
|
$(this).addClass('filtered-out');
|
|
}
|
|
});
|
|
|
|
updateClaimsCount();
|
|
}
|
|
|
|
function updateClaimsCount() {
|
|
const visibleRows = $('.claim-row:not(.filtered-out)').length;
|
|
const totalRows = $('.claim-row').length;
|
|
|
|
// Update any count displays if needed
|
|
console.log(`Showing ${visibleRows} of ${totalRows} claims`);
|
|
}
|
|
|
|
function viewClaimDetail(claimId) {
|
|
// Load claim details
|
|
$('#claim-detail-content').html(`
|
|
<div class="text-center py-4">
|
|
<i class="fas fa-spinner fa-spin fa-2x mb-3"></i>
|
|
<p>Loading claim details...</p>
|
|
</div>
|
|
`);
|
|
|
|
$('#claimDetailModal').modal('show');
|
|
|
|
// Simulate loading claim details
|
|
setTimeout(() => {
|
|
$('#claim-detail-content').html(`
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h6>Claim Information</h6>
|
|
<table class="table table-sm">
|
|
<tr><td><strong>Claim ID:</strong></td><td>${claimId}</td></tr>
|
|
<tr><td><strong>Status:</strong></td><td><span class="badge bg-success">Approved</span></td></tr>
|
|
<tr><td><strong>Service Date:</strong></td><td>2024-01-15</td></tr>
|
|
<tr><td><strong>Provider:</strong></td><td>Dr. Smith</td></tr>
|
|
</table>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6>Financial Details</h6>
|
|
<table class="table table-sm">
|
|
<tr><td><strong>Billed Amount:</strong></td><td>$250.00</td></tr>
|
|
<tr><td><strong>Approved Amount:</strong></td><td>$200.00</td></tr>
|
|
<tr><td><strong>Patient Responsibility:</strong></td><td>$50.00</td></tr>
|
|
<tr><td><strong>Payment Date:</strong></td><td>2024-01-25</td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
`);
|
|
}, 1000);
|
|
}
|
|
|
|
function appealClaim(claimId) {
|
|
if (confirm(`Submit an appeal for claim ${claimId}?`)) {
|
|
toastr.info('Appeal process initiated. You will be contacted within 5 business days.');
|
|
}
|
|
}
|
|
|
|
function downloadEOB(claimId) {
|
|
toastr.success('Downloading Explanation of Benefits...');
|
|
// Simulate download
|
|
setTimeout(() => {
|
|
toastr.success('EOB downloaded successfully');
|
|
}, 1000);
|
|
}
|
|
|
|
function exportClaims() {
|
|
toastr.info('Preparing claims export...');
|
|
// Simulate export
|
|
setTimeout(() => {
|
|
toastr.success('Claims history exported successfully');
|
|
}, 1500);
|
|
}
|
|
|
|
function refreshClaims() {
|
|
toastr.info('Refreshing claims data...');
|
|
loadClaimsHistory();
|
|
}
|
|
|
|
function generatePaymentPlan() {
|
|
toastr.info('Redirecting to payment plan setup...');
|
|
}
|
|
|
|
function printClaimDetail() {
|
|
window.print();
|
|
}
|
|
|
|
// Search functionality
|
|
$('#claims-search').on('keyup', function() {
|
|
const searchTerm = $(this).val().toLowerCase();
|
|
|
|
$('.claim-row').each(function() {
|
|
const rowText = $(this).text().toLowerCase();
|
|
if (rowText.includes(searchTerm)) {
|
|
$(this).removeClass('search-filtered');
|
|
} else {
|
|
$(this).addClass('search-filtered');
|
|
}
|
|
});
|
|
});
|
|
|
|
// Initialize
|
|
$(document).ready(function() {
|
|
updateClaimsCount();
|
|
});
|
|
</script>
|
|
|