hospital-management/templates/patients/claims/insurance_claim_detail.html
Marwan Alwali 610e165e17 update
2025-09-04 19:19:52 +03:00

685 lines
31 KiB
HTML

{% extends 'base.html' %}
{% load static %}
{% block title %}Claim {{ claim.claim_number }} - Details{% endblock %}
{% block extra_css %}
<style>
.claim-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 15px;
padding: 2rem;
margin-bottom: 2rem;
}
.info-card {
border: none;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
margin-bottom: 1.5rem;
transition: transform 0.3s ease;
}
.info-card:hover {
transform: translateY(-2px);
}
.info-card .card-header {
background: #f8f9fa;
border-bottom: 1px solid #e9ecef;
border-radius: 15px 15px 0 0 !important;
padding: 1rem 1.5rem;
}
.info-card .card-body {
padding: 1.5rem;
}
.status-badge {
font-size: 1rem;
padding: 0.5rem 1rem;
border-radius: 50px;
}
.priority-indicator {
width: 12px;
height: 12px;
border-radius: 50%;
display: inline-block;
margin-right: 8px;
}
.priority-low { background-color: #28a745; }
.priority-normal { background-color: #17a2b8; }
.priority-high { background-color: #ffc107; }
.priority-urgent { background-color: #fd7e14; }
.priority-emergency { background-color: #dc3545; }
.timeline {
position: relative;
padding-left: 2rem;
}
.timeline::before {
content: '';
position: absolute;
left: 15px;
top: 0;
bottom: 0;
width: 2px;
background: #e9ecef;
}
.timeline-item {
position: relative;
margin-bottom: 1.5rem;
}
.timeline-item::before {
content: '';
position: absolute;
left: -23px;
top: 8px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #007bff;
border: 3px solid #fff;
box-shadow: 0 0 0 2px #e9ecef;
}
.timeline-item.success::before { background: #28a745; }
.timeline-item.warning::before { background: #ffc107; }
.timeline-item.danger::before { background: #dc3545; }
.timeline-item.info::before { background: #17a2b8; }
.financial-summary {
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
color: white;
border-radius: 15px;
padding: 1.5rem;
}
.approval-progress {
height: 8px;
border-radius: 10px;
background: #e9ecef;
overflow: hidden;
}
.approval-progress-bar {
height: 100%;
background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
transition: width 0.5s ease;
}
.document-item {
border: 1px solid #e9ecef;
border-radius: 10px;
padding: 1rem;
margin-bottom: 1rem;
transition: all 0.3s ease;
}
.document-item:hover {
border-color: #007bff;
box-shadow: 0 2px 10px rgba(0, 123, 255, 0.1);
}
.action-buttons .btn {
margin-right: 0.5rem;
margin-bottom: 0.5rem;
}
</style>
{% endblock %}
{% block content %}
<div id="content" class="app-content">
<!-- Breadcrumb -->
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
<li class="breadcrumb-item"><a href="{% url 'patients:patient_list' %}">Patients</a></li>
<li class="breadcrumb-item"><a href="{% url 'patients:insurance_claims_list' %}">Claims</a></li>
<li class="breadcrumb-item active">{{ claim.claim_number }}</li>
</ol>
<!-- Claim Header -->
<div class="claim-header">
<div class="row align-items-center">
<div class="col-md-8">
<h1 class="mb-2">
<i class="fas fa-file-medical me-3"></i>
Claim {{ claim.claim_number }}
</h1>
<div class="d-flex align-items-center mb-3">
{% if claim.status == 'DRAFT' %}
<span class="badge bg-secondary status-badge me-3">{{ claim.get_status_display }}</span>
{% elif claim.status == 'SUBMITTED' %}
<span class="badge bg-primary status-badge me-3">{{ claim.get_status_display }}</span>
{% elif claim.status == 'UNDER_REVIEW' %}
<span class="badge bg-warning status-badge me-3">{{ claim.get_status_display }}</span>
{% elif claim.status == 'APPROVED' or claim.status == 'PARTIALLY_APPROVED' %}
<span class="badge bg-success status-badge me-3">{{ claim.get_status_display }}</span>
{% elif claim.status == 'DENIED' %}
<span class="badge bg-danger status-badge me-3">{{ claim.get_status_display }}</span>
{% elif claim.status == 'PAID' %}
<span class="badge bg-dark status-badge me-3">{{ claim.get_status_display }}</span>
{% else %}
<span class="badge bg-light text-dark status-badge me-3">{{ claim.get_status_display }}</span>
{% endif %}
<span class="priority-indicator priority-{{ claim.priority|lower }}"></span>
<span class="me-3">{{ claim.get_priority_display }} Priority</span>
<span class="badge bg-info">{{ claim.get_claim_type_display }}</span>
</div>
<p class="mb-0 opacity-75">
<i class="fas fa-user me-2"></i>{{ claim.patient.get_full_name }} ({{ claim.patient.mrn }})
<span class="mx-3">|</span>
<i class="fas fa-calendar me-2"></i>Service Date: {{ claim.service_date|date:"F d, Y" }}
</p>
</div>
<div class="col-md-4 text-md-end">
<div class="action-buttons">
<a href="{% url 'patients:insurance_claim_edit' claim.id %}" class="btn btn-light">
<i class="fas fa-edit me-2"></i>Edit Claim
</a>
<button type="button" class="btn btn-warning" onclick="showStatusModal()">
<i class="fas fa-sync me-2"></i>Update Status
</button>
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown">
<i class="fas fa-ellipsis-v"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#" onclick="printClaim()">
<i class="fas fa-print me-2"></i>Print Claim
</a></li>
<li><a class="dropdown-item" href="#" onclick="exportClaim()">
<i class="fas fa-download me-2"></i>Export PDF
</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item text-danger" href="{% url 'patients:insurance_claim_delete' claim.id %}">
<i class="fas fa-trash me-2"></i>Delete Claim
</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<!-- Left Column -->
<div class="col-lg-8">
<!-- Patient Information -->
<div class="info-card">
<div class="card-header">
<h5 class="mb-0">
<i class="fas fa-user me-2"></i>Patient Information
</h5>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label class="form-label text-muted">Full Name</label>
<div class="fw-bold">{{ claim.patient.get_full_name }}</div>
</div>
<div class="mb-3">
<label class="form-label text-muted">Medical Record Number</label>
<div class="fw-bold">{{ claim.patient.mrn }}</div>
</div>
<div class="mb-3">
<label class="form-label text-muted">Date of Birth</label>
<div class="fw-bold">{{ claim.patient.date_of_birth|date:"F d, Y" }}</div>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="form-label text-muted">Saudi ID/Iqama</label>
<div class="fw-bold">{{ claim.saudi_id_number|default:"Not provided" }}</div>
</div>
<div class="mb-3">
<label class="form-label text-muted">Phone Number</label>
<div class="fw-bold">{{ claim.patient.phone_number|default:"Not provided" }}</div>
</div>
<div class="mb-3">
<label class="form-label text-muted">Email</label>
<div class="fw-bold">{{ claim.patient.email|default:"Not provided" }}</div>
</div>
</div>
</div>
</div>
</div>
<!-- Insurance Information -->
<div class="info-card">
<div class="card-header">
<h5 class="mb-0">
<i class="fas fa-shield-alt me-2"></i>Insurance Information
</h5>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label class="form-label text-muted">Insurance Company</label>
<div class="fw-bold">{{ claim.insurance_info.insurance_company }}</div>
</div>
<div class="mb-3">
<label class="form-label text-muted">Policy Number</label>
<div class="fw-bold">{{ claim.insurance_info.policy_number }}</div>
</div>
<div class="mb-3">
<label class="form-label text-muted">Plan Type</label>
<div class="fw-bold">{{ claim.insurance_info.get_plan_type_display|default:"Not specified" }}</div>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="form-label text-muted">Insurance Card Number</label>
<div class="fw-bold">{{ claim.insurance_card_number|default:"Not provided" }}</div>
</div>
<div class="mb-3">
<label class="form-label text-muted">Authorization Number</label>
<div class="fw-bold">{{ claim.authorization_number|default:"Not required" }}</div>
</div>
<div class="mb-3">
<label class="form-label text-muted">Insurance Type</label>
<div class="fw-bold">{{ claim.insurance_info.get_insurance_type_display }}</div>
</div>
</div>
</div>
</div>
</div>
<!-- Service Information -->
<div class="info-card">
<div class="card-header">
<h5 class="mb-0">
<i class="fas fa-hospital me-2"></i>Service Information
</h5>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label class="form-label text-muted">Service Provider</label>
<div class="fw-bold">{{ claim.service_provider }}</div>
</div>
<div class="mb-3">
<label class="form-label text-muted">Provider License</label>
<div class="fw-bold">{{ claim.service_provider_license|default:"Not provided" }}</div>
</div>
<div class="mb-3">
<label class="form-label text-muted">Service Date</label>
<div class="fw-bold">{{ claim.service_date|date:"F d, Y" }}</div>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="form-label text-muted">Healthcare Facility</label>
<div class="fw-bold">{{ claim.facility_name|default:"Not specified" }}</div>
</div>
<div class="mb-3">
<label class="form-label text-muted">Facility License</label>
<div class="fw-bold">{{ claim.facility_license|default:"Not provided" }}</div>
</div>
</div>
</div>
</div>
</div>
<!-- Medical Information -->
<div class="info-card">
<div class="card-header">
<h5 class="mb-0">
<i class="fas fa-stethoscope me-2"></i>Medical Information
</h5>
</div>
<div class="card-body">
<div class="mb-4">
<label class="form-label text-muted">Primary Diagnosis</label>
<div class="fw-bold">{{ claim.primary_diagnosis_code }}</div>
<div class="text-muted">{{ claim.primary_diagnosis_description }}</div>
</div>
{% if claim.secondary_diagnosis_codes %}
<div class="mb-4">
<label class="form-label text-muted">Secondary Diagnoses</label>
{% for diagnosis in claim.secondary_diagnosis_codes %}
<div class="mb-2">
<span class="fw-bold">{{ diagnosis.code }}</span> - {{ diagnosis.description }}
</div>
{% endfor %}
</div>
{% endif %}
{% if claim.procedure_codes %}
<div class="mb-4">
<label class="form-label text-muted">Procedures</label>
{% for procedure in claim.procedure_codes %}
<div class="mb-2">
<span class="fw-bold">{{ procedure.code }}</span> - {{ procedure.description }}
</div>
{% endfor %}
</div>
{% endif %}
{% if claim.notes %}
<div class="mb-0">
<label class="form-label text-muted">Notes</label>
<div>{{ claim.notes|linebreaks }}</div>
</div>
{% endif %}
</div>
</div>
<!-- Documents -->
{% if documents %}
<div class="info-card">
<div class="card-header">
<h5 class="mb-0">
<i class="fas fa-paperclip me-2"></i>Attached Documents ({{ documents.count }})
</h5>
</div>
<div class="card-body">
{% for document in documents %}
<div class="document-item">
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex align-items-center">
<div class="me-3">
{% if document.mime_type == 'application/pdf' %}
<i class="fas fa-file-pdf fa-2x text-danger"></i>
{% elif 'image' in document.mime_type %}
<i class="fas fa-file-image fa-2x text-info"></i>
{% elif 'word' in document.mime_type %}
<i class="fas fa-file-word fa-2x text-primary"></i>
{% else %}
<i class="fas fa-file fa-2x text-muted"></i>
{% endif %}
</div>
<div>
<div class="fw-bold">{{ document.title }}</div>
<small class="text-muted">
{{ document.get_document_type_display }} •
{{ document.file_size|filesizeformat }} •
{{ document.uploaded_at|date:"M d, Y g:i A" }}
</small>
{% if document.description %}
<div class="text-muted small mt-1">{{ document.description }}</div>
{% endif %}
</div>
</div>
<div>
<button class="btn btn-sm btn-outline-primary" onclick="viewDocument('{{ document.file_path }}')">
<i class="fas fa-eye"></i>
</button>
<button class="btn btn-sm btn-outline-secondary" onclick="downloadDocument('{{ document.file_path }}')">
<i class="fas fa-download"></i>
</button>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endif %}
</div>
<!-- Right Column -->
<div class="col-lg-4">
<!-- Financial Summary -->
<div class="financial-summary mb-4">
<h5 class="mb-3">
<i class="fas fa-calculator me-2"></i>Financial Summary
</h5>
<div class="row text-center">
<div class="col-6">
<div class="fs-4 fw-bold">{{ claim.billed_amount|floatformat:2 }}</div>
<div class="opacity-75">Billed Amount (SAR)</div>
</div>
<div class="col-6">
<div class="fs-4 fw-bold">{{ claim.approved_amount|floatformat:2 }}</div>
<div class="opacity-75">Approved Amount (SAR)</div>
</div>
</div>
<hr class="my-3 opacity-50">
<div class="row text-center">
<div class="col-6">
<div class="fs-5 fw-bold">{{ claim.paid_amount|floatformat:2 }}</div>
<div class="opacity-75">Paid Amount (SAR)</div>
</div>
<div class="col-6">
<div class="fs-5 fw-bold">{{ claim.patient_responsibility|floatformat:2 }}</div>
<div class="opacity-75">Patient Responsibility (SAR)</div>
</div>
</div>
<!-- Approval Progress -->
<div class="mt-4">
<div class="d-flex justify-content-between mb-2">
<span class="opacity-75">Approval Rate</span>
<span class="fw-bold">{{ approval_percentage|floatformat:1 }}%</span>
</div>
<div class="approval-progress">
<div class="approval-progress-bar" style="width: {{ approval_percentage }}%"></div>
</div>
</div>
</div>
<!-- Status Timeline -->
<div class="info-card">
<div class="card-header">
<h5 class="mb-0">
<i class="fas fa-history me-2"></i>Status History
</h5>
</div>
<div class="card-body">
<div class="timeline">
{% for history in status_history %}
<div class="timeline-item {% if history.to_status == 'APPROVED' or history.to_status == 'PAID' %}success{% elif history.to_status == 'DENIED' %}danger{% elif history.to_status == 'UNDER_REVIEW' %}warning{% else %}info{% endif %}">
<div class="d-flex justify-content-between align-items-start">
<div>
<div class="fw-bold">
{% if history.from_status %}
{{ history.get_from_status_display }} → {{ history.get_to_status_display }}
{% else %}
{{ history.get_to_status_display }}
{% endif %}
</div>
{% if history.reason %}
<div class="text-muted small">{{ history.reason }}</div>
{% endif %}
{% if history.changed_by %}
<div class="text-muted small">
<i class="fas fa-user me-1"></i>{{ history.changed_by.get_full_name|default:history.changed_by.username }}
</div>
{% endif %}
</div>
<small class="text-muted">{{ history.changed_at|date:"M d, g:i A" }}</small>
</div>
</div>
{% empty %}
<div class="text-muted text-center py-3">
<i class="fas fa-clock fa-2x mb-2"></i>
<div>No status history available</div>
</div>
{% endfor %}
</div>
</div>
</div>
<!-- Quick Actions -->
<div class="info-card">
<div class="card-header">
<h5 class="mb-0">
<i class="fas fa-bolt me-2"></i>Quick Actions
</h5>
</div>
<div class="card-body">
<div class="d-grid gap-2">
{% if claim.status == 'DRAFT' %}
<button class="btn btn-primary" onclick="updateClaimStatus('SUBMITTED')">
<i class="fas fa-paper-plane me-2"></i>Submit Claim
</button>
{% elif claim.status == 'SUBMITTED' %}
<button class="btn btn-warning" onclick="updateClaimStatus('UNDER_REVIEW')">
<i class="fas fa-search me-2"></i>Mark Under Review
</button>
{% elif claim.status == 'UNDER_REVIEW' %}
<button class="btn btn-success" onclick="updateClaimStatus('APPROVED')">
<i class="fas fa-check me-2"></i>Approve Claim
</button>
<button class="btn btn-danger" onclick="updateClaimStatus('DENIED')">
<i class="fas fa-times me-2"></i>Deny Claim
</button>
{% elif claim.status == 'APPROVED' %}
<button class="btn btn-dark" onclick="updateClaimStatus('PAID')">
<i class="fas fa-money-bill me-2"></i>Mark as Paid
</button>
{% endif %}
<button class="btn btn-outline-info" onclick="showStatusModal()">
<i class="fas fa-sync me-2"></i>Change Status
</button>
<hr>
<a href="{% url 'patients:patient_detail' claim.patient.id %}" class="btn btn-outline-primary">
<i class="fas fa-user me-2"></i>View Patient
</a>
<a href="{% url 'patients:insurance_claims_list' %}" class="btn btn-outline-secondary">
<i class="fas fa-list me-2"></i>Back to Claims
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Status Update Modal -->
<div class="modal fade" id="statusModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Update Claim Status</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<form id="statusForm">
<div class="mb-3">
<label class="form-label">Current Status</label>
<input type="text" class="form-control" value="{{ claim.get_status_display }}" readonly>
</div>
<div class="mb-3">
<label class="form-label">New Status</label>
<select class="form-select" id="newStatus" name="status" required>
<option value="DRAFT" {% if claim.status == 'DRAFT' %}selected{% endif %}>Draft</option>
<option value="SUBMITTED" {% if claim.status == 'SUBMITTED' %}selected{% endif %}>Submitted</option>
<option value="UNDER_REVIEW" {% if claim.status == 'UNDER_REVIEW' %}selected{% endif %}>Under Review</option>
<option value="APPROVED" {% if claim.status == 'APPROVED' %}selected{% endif %}>Approved</option>
<option value="PARTIALLY_APPROVED" {% if claim.status == 'PARTIALLY_APPROVED' %}selected{% endif %}>Partially Approved</option>
<option value="DENIED" {% if claim.status == 'DENIED' %}selected{% endif %}>Denied</option>
<option value="PAID" {% if claim.status == 'PAID' %}selected{% endif %}>Paid</option>
<option value="CANCELLED" {% if claim.status == 'CANCELLED' %}selected{% endif %}>Cancelled</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Reason</label>
<textarea class="form-control" name="reason" rows="3"
placeholder="Enter reason for status change..."></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" onclick="updateStatus()">Update Status</button>
</div>
</div>
</div>
</div>
{% endblock %}
{% block extra_js %}
<script>
function showStatusModal() {
$('#statusModal').modal('show');
}
function updateStatus() {
const formData = new FormData($('#statusForm')[0]);
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", $('[name=csrfmiddlewaretoken]').val());
}
}
});
$.ajax({
url: '{% url "patients:update_claim_status" claim.id %}',
method: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response) {
if (response.success) {
$('#statusModal').modal('hide');
location.reload();
} else {
alert('Error: ' + response.error);
}
},
error: function() {
alert('Error updating status. Please try again.');
}
});
}
function updateClaimStatus(status) {
if (!confirm(`Are you sure you want to change the status to ${status}?`)) {
return;
}
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", $('[name=csrfmiddlewaretoken]').val());
}
}
});
$.ajax({
url: '{% url "patients:update_claim_status" claim.id %}',
method: 'POST',
data: {
status: status,
reason: `Quick action: ${status}`
},
success: function(response) {
if (response.success) {
location.reload();
} else {
alert('Error: ' + response.error);
}
},
error: function() {
alert('Error updating status. Please try again.');
}
});
}
function printClaim() {
window.print();
}
function exportClaim() {
alert('Export functionality will be implemented soon.');
}
function viewDocument(filePath) {
// Open document in new window/tab
window.open(filePath, '_blank');
}
function downloadDocument(filePath) {
// Create temporary link and trigger download
const link = document.createElement('a');
link.href = filePath;
link.download = '';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
</script>
{% endblock %}