883 lines
40 KiB
HTML
883 lines
40 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Report Adverse Reaction - {{ transfusion.transfusion_id }}{% endblock %}
|
|
|
|
{% block css %}
|
|
<link href="{% static 'plugins/select2/dist/css/select2.min.css' %}" rel="stylesheet" />
|
|
<style>
|
|
.form-section {
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
border-left: 4px solid #007bff;
|
|
}
|
|
|
|
.form-section h5 {
|
|
color: #007bff;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.required-field {
|
|
color: #dc3545;
|
|
}
|
|
|
|
.transfusion-info {
|
|
background: #d1ecf1;
|
|
border-left: 4px solid #17a2b8;
|
|
}
|
|
|
|
.reaction-details {
|
|
background: #f8d7da;
|
|
border-left: 4px solid #dc3545;
|
|
}
|
|
|
|
.severity-critical {
|
|
background: #f8d7da;
|
|
border: 2px solid #dc3545;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
.severity-moderate {
|
|
background: #fff3cd;
|
|
border-left: 4px solid #ffc107;
|
|
}
|
|
|
|
.severity-mild {
|
|
background: #d4edda;
|
|
border-left: 4px solid #28a745;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% { opacity: 1; }
|
|
50% { opacity: 0.8; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
.symptom-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 15px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.symptom-category {
|
|
background: white;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
}
|
|
|
|
.symptom-category h6 {
|
|
color: #495057;
|
|
border-bottom: 1px solid #dee2e6;
|
|
padding-bottom: 10px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.vital-signs-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 15px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.vital-sign {
|
|
background: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
text-align: center;
|
|
}
|
|
|
|
.timeline-entry {
|
|
background: #e9ecef;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
margin-bottom: 15px;
|
|
border-left: 4px solid #6c757d;
|
|
}
|
|
|
|
.intervention-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 15px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.intervention-category {
|
|
background: white;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
}
|
|
|
|
.severity-indicator {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.mild { background-color: #28a745; }
|
|
.moderate { background-color: #ffc107; }
|
|
.severe { background-color: #fd7e14; }
|
|
.critical { background-color: #dc3545; }
|
|
|
|
.reaction-summary {
|
|
background: #e2e3e5;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
margin-top: 15px;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- BEGIN breadcrumb -->
|
|
<ol class="breadcrumb float-xl-end">
|
|
<li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Home</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'blood_bank:dashboard' %}">Blood Bank</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'blood_bank:transfusion_list' %}">Transfusions</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'blood_bank:transfusion_detail' transfusion.id %}">{{ transfusion.transfusion_id }}</a></li>
|
|
<li class="breadcrumb-item active">Adverse Reaction</li>
|
|
</ol>
|
|
<!-- END breadcrumb -->
|
|
|
|
<!-- BEGIN page-header -->
|
|
<h1 class="page-header">
|
|
Adverse Reaction Report
|
|
<small>{{ transfusion.transfusion_id }}</small>
|
|
<span class="badge bg-danger ms-2">URGENT</span>
|
|
</h1>
|
|
<!-- END page-header -->
|
|
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
<i class="fa fa-exclamation-triangle"></i> Adverse Transfusion Reaction Report
|
|
</h4>
|
|
<div class="panel-heading-btn">
|
|
<span class="badge bg-danger">PRIORITY REPORT</span>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<form method="post" id="adverseReactionForm">
|
|
{% csrf_token %}
|
|
|
|
<!-- BEGIN transfusion information -->
|
|
<div class="form-section transfusion-info">
|
|
<h5><i class="fa fa-heartbeat"></i> Transfusion Information</h5>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<table class="table table-borderless mb-0">
|
|
<tr>
|
|
<td class="fw-bold">Transfusion ID:</td>
|
|
<td>{{ transfusion.transfusion_id }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Patient:</td>
|
|
<td>{{ transfusion.patient.full_name }} ({{ transfusion.patient.patient_id }})</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Blood Group:</td>
|
|
<td><span class="badge bg-primary">{{ transfusion.patient.blood_group.display_name }}</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Blood Unit:</td>
|
|
<td>{{ transfusion.blood_unit.unit_number }}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<table class="table table-borderless mb-0">
|
|
<tr>
|
|
<td class="fw-bold">Unit Blood Group:</td>
|
|
<td><span class="badge bg-info">{{ transfusion.blood_unit.blood_group.display_name }}</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Component:</td>
|
|
<td>{{ transfusion.blood_unit.component.get_name_display }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Start Time:</td>
|
|
<td>{{ transfusion.start_time|date:"M d, Y H:i" }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Volume Transfused:</td>
|
|
<td>{{ transfusion.volume_transfused|default:"Calculating..." }} ml</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END transfusion information -->
|
|
|
|
<!-- BEGIN reaction details -->
|
|
<div class="form-section reaction-details">
|
|
<h5><i class="fa fa-exclamation-circle"></i> Reaction Details</h5>
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="form-group">
|
|
<label for="reactionTime" class="form-label">
|
|
Reaction Time <span class="required-field">*</span>
|
|
</label>
|
|
<input type="datetime-local" class="form-control" id="reactionTime" name="reaction_time" required>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="form-group">
|
|
<label for="severity" class="form-label">
|
|
Severity <span class="required-field">*</span>
|
|
</label>
|
|
<select class="form-select" id="severity" name="severity" required>
|
|
<option value="">Select severity...</option>
|
|
<option value="mild">Mild</option>
|
|
<option value="moderate">Moderate</option>
|
|
<option value="severe">Severe</option>
|
|
<option value="critical">Critical/Life-threatening</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="form-group">
|
|
<label for="reactionType" class="form-label">
|
|
Reaction Type <span class="required-field">*</span>
|
|
</label>
|
|
<select class="form-select" id="reactionType" name="reaction_type" required>
|
|
<option value="">Select type...</option>
|
|
<option value="febrile">Febrile Non-Hemolytic</option>
|
|
<option value="allergic">Allergic</option>
|
|
<option value="anaphylactic">Anaphylactic</option>
|
|
<option value="hemolytic_acute">Acute Hemolytic</option>
|
|
<option value="hemolytic_delayed">Delayed Hemolytic</option>
|
|
<option value="trali">TRALI</option>
|
|
<option value="taco">TACO</option>
|
|
<option value="septic">Septic</option>
|
|
<option value="other">Other</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="timeFromStart" class="form-label">
|
|
Time from Transfusion Start
|
|
</label>
|
|
<input type="text" class="form-control" id="timeFromStart" name="time_from_start" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="volumeAtReaction" class="form-label">
|
|
Volume Transfused at Reaction (ml)
|
|
</label>
|
|
<input type="number" class="form-control" id="volumeAtReaction" name="volume_at_reaction"
|
|
min="0" max="{{ transfusion.blood_unit.volume_ml }}">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END reaction details -->
|
|
|
|
<!-- BEGIN symptoms -->
|
|
<div class="form-section">
|
|
<h5><i class="fa fa-stethoscope"></i> Symptoms & Signs</h5>
|
|
<div class="symptom-grid">
|
|
<!-- Cardiovascular Symptoms -->
|
|
<div class="symptom-category">
|
|
<h6><i class="fa fa-heart"></i> Cardiovascular</h6>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="symptoms" value="hypotension" id="hypotension">
|
|
<label class="form-check-label" for="hypotension">Hypotension</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="symptoms" value="hypertension" id="hypertension">
|
|
<label class="form-check-label" for="hypertension">Hypertension</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="symptoms" value="tachycardia" id="tachycardia">
|
|
<label class="form-check-label" for="tachycardia">Tachycardia</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="symptoms" value="bradycardia" id="bradycardia">
|
|
<label class="form-check-label" for="bradycardia">Bradycardia</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="symptoms" value="chest_pain" id="chest_pain">
|
|
<label class="form-check-label" for="chest_pain">Chest Pain</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Respiratory Symptoms -->
|
|
<div class="symptom-category">
|
|
<h6><i class="fa fa-lungs"></i> Respiratory</h6>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="symptoms" value="dyspnea" id="dyspnea">
|
|
<label class="form-check-label" for="dyspnea">Dyspnea</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="symptoms" value="wheezing" id="wheezing">
|
|
<label class="form-check-label" for="wheezing">Wheezing</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="symptoms" value="cough" id="cough">
|
|
<label class="form-check-label" for="cough">Cough</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="symptoms" value="stridor" id="stridor">
|
|
<label class="form-check-label" for="stridor">Stridor</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="symptoms" value="cyanosis" id="cyanosis">
|
|
<label class="form-check-label" for="cyanosis">Cyanosis</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dermatologic Symptoms -->
|
|
<div class="symptom-category">
|
|
<h6><i class="fa fa-hand-paper"></i> Dermatologic</h6>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="symptoms" value="urticaria" id="urticaria">
|
|
<label class="form-check-label" for="urticaria">Urticaria (Hives)</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="symptoms" value="rash" id="rash">
|
|
<label class="form-check-label" for="rash">Rash</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="symptoms" value="pruritus" id="pruritus">
|
|
<label class="form-check-label" for="pruritus">Pruritus (Itching)</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="symptoms" value="flushing" id="flushing">
|
|
<label class="form-check-label" for="flushing">Flushing</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="symptoms" value="angioedema" id="angioedema">
|
|
<label class="form-check-label" for="angioedema">Angioedema</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Systemic Symptoms -->
|
|
<div class="symptom-category">
|
|
<h6><i class="fa fa-thermometer-half"></i> Systemic</h6>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="symptoms" value="fever" id="fever">
|
|
<label class="form-check-label" for="fever">Fever</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="symptoms" value="chills" id="chills">
|
|
<label class="form-check-label" for="chills">Chills</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="symptoms" value="rigors" id="rigors">
|
|
<label class="form-check-label" for="rigors">Rigors</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="symptoms" value="nausea" id="nausea">
|
|
<label class="form-check-label" for="nausea">Nausea</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="symptoms" value="vomiting" id="vomiting">
|
|
<label class="form-check-label" for="vomiting">Vomiting</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Neurologic Symptoms -->
|
|
<div class="symptom-category">
|
|
<h6><i class="fa fa-brain"></i> Neurologic</h6>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="symptoms" value="anxiety" id="anxiety">
|
|
<label class="form-check-label" for="anxiety">Anxiety</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="symptoms" value="confusion" id="confusion">
|
|
<label class="form-check-label" for="confusion">Confusion</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="symptoms" value="headache" id="headache">
|
|
<label class="form-check-label" for="headache">Headache</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="symptoms" value="dizziness" id="dizziness">
|
|
<label class="form-check-label" for="dizziness">Dizziness</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="symptoms" value="loss_consciousness" id="loss_consciousness">
|
|
<label class="form-check-label" for="loss_consciousness">Loss of Consciousness</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Other Symptoms -->
|
|
<div class="symptom-category">
|
|
<h6><i class="fa fa-plus"></i> Other</h6>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="symptoms" value="back_pain" id="back_pain">
|
|
<label class="form-check-label" for="back_pain">Back Pain</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="symptoms" value="flank_pain" id="flank_pain">
|
|
<label class="form-check-label" for="flank_pain">Flank Pain</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="symptoms" value="hemoglobinuria" id="hemoglobinuria">
|
|
<label class="form-check-label" for="hemoglobinuria">Hemoglobinuria</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="symptoms" value="jaundice" id="jaundice">
|
|
<label class="form-check-label" for="jaundice">Jaundice</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="symptoms" value="bleeding" id="bleeding">
|
|
<label class="form-check-label" for="bleeding">Abnormal Bleeding</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END symptoms -->
|
|
|
|
<!-- BEGIN vital signs at reaction -->
|
|
<div class="form-section">
|
|
<h5><i class="fa fa-heartbeat"></i> Vital Signs at Time of Reaction</h5>
|
|
<div class="vital-signs-grid">
|
|
<div class="vital-sign">
|
|
<label class="form-label">Blood Pressure</label>
|
|
<input type="text" class="form-control" name="bp_at_reaction" placeholder="120/80">
|
|
</div>
|
|
<div class="vital-sign">
|
|
<label class="form-label">Heart Rate (bpm)</label>
|
|
<input type="number" class="form-control" name="hr_at_reaction" min="30" max="250">
|
|
</div>
|
|
<div class="vital-sign">
|
|
<label class="form-label">Temperature (°C)</label>
|
|
<input type="number" step="0.1" class="form-control" name="temp_at_reaction" min="35" max="45">
|
|
</div>
|
|
<div class="vital-sign">
|
|
<label class="form-label">Respiratory Rate</label>
|
|
<input type="number" class="form-control" name="rr_at_reaction" min="8" max="60">
|
|
</div>
|
|
<div class="vital-sign">
|
|
<label class="form-label">O2 Saturation (%)</label>
|
|
<input type="number" class="form-control" name="o2_sat_at_reaction" min="70" max="100">
|
|
</div>
|
|
<div class="vital-sign">
|
|
<label class="form-label">Pain Scale (0-10)</label>
|
|
<input type="number" class="form-control" name="pain_scale" min="0" max="10">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END vital signs at reaction -->
|
|
|
|
<!-- BEGIN immediate actions -->
|
|
<div class="form-section">
|
|
<h5><i class="fa fa-first-aid"></i> Immediate Actions Taken</h5>
|
|
<div class="intervention-grid">
|
|
<!-- Basic Interventions -->
|
|
<div class="intervention-category">
|
|
<h6><i class="fa fa-stop"></i> Basic Interventions</h6>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="interventions" value="transfusion_stopped" id="transfusion_stopped">
|
|
<label class="form-check-label" for="transfusion_stopped">Transfusion stopped immediately</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="interventions" value="iv_line_maintained" id="iv_line_maintained">
|
|
<label class="form-check-label" for="iv_line_maintained">IV line maintained with saline</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="interventions" value="physician_notified" id="physician_notified">
|
|
<label class="form-check-label" for="physician_notified">Physician notified</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="interventions" value="blood_bank_notified" id="blood_bank_notified">
|
|
<label class="form-check-label" for="blood_bank_notified">Blood bank notified</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Medications -->
|
|
<div class="intervention-category">
|
|
<h6><i class="fa fa-pills"></i> Medications</h6>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="interventions" value="antihistamine" id="antihistamine">
|
|
<label class="form-check-label" for="antihistamine">Antihistamine given</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="interventions" value="corticosteroids" id="corticosteroids">
|
|
<label class="form-check-label" for="corticosteroids">Corticosteroids given</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="interventions" value="epinephrine" id="epinephrine">
|
|
<label class="form-check-label" for="epinephrine">Epinephrine given</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="interventions" value="bronchodilators" id="bronchodilators">
|
|
<label class="form-check-label" for="bronchodilators">Bronchodilators given</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Supportive Care -->
|
|
<div class="intervention-category">
|
|
<h6><i class="fa fa-hand-holding-medical"></i> Supportive Care</h6>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="interventions" value="oxygen_therapy" id="oxygen_therapy">
|
|
<label class="form-check-label" for="oxygen_therapy">Oxygen therapy</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="interventions" value="fluid_resuscitation" id="fluid_resuscitation">
|
|
<label class="form-check-label" for="fluid_resuscitation">Fluid resuscitation</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="interventions" value="vasopressors" id="vasopressors">
|
|
<label class="form-check-label" for="vasopressors">Vasopressors</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="interventions" value="icu_transfer" id="icu_transfer">
|
|
<label class="form-check-label" for="icu_transfer">ICU transfer</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END immediate actions -->
|
|
|
|
<!-- BEGIN outcome and follow-up -->
|
|
<div class="form-section">
|
|
<h5><i class="fa fa-chart-line"></i> Outcome & Follow-up</h5>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="outcome" class="form-label">
|
|
Patient Outcome <span class="required-field">*</span>
|
|
</label>
|
|
<select class="form-select" id="outcome" name="outcome" required>
|
|
<option value="">Select outcome...</option>
|
|
<option value="resolved">Resolved completely</option>
|
|
<option value="improved">Improved with treatment</option>
|
|
<option value="ongoing">Ongoing symptoms</option>
|
|
<option value="worsened">Worsened despite treatment</option>
|
|
<option value="death">Death</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="resolutionTime" class="form-label">
|
|
Time to Resolution
|
|
</label>
|
|
<input type="text" class="form-control" id="resolutionTime" name="resolution_time"
|
|
placeholder="e.g., 30 minutes, 2 hours">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="form-group">
|
|
<label for="followUpRequired" class="form-label">Follow-up Required</label>
|
|
<textarea class="form-control" id="followUpRequired" name="follow_up_required" rows="3"
|
|
placeholder="Describe any follow-up care, monitoring, or testing required..."></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END outcome and follow-up -->
|
|
|
|
<!-- BEGIN reporting information -->
|
|
<div class="form-section">
|
|
<h5><i class="fa fa-user-md"></i> Reporting Information</h5>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="reportedBy" class="form-label">
|
|
Reported By <span class="required-field">*</span>
|
|
</label>
|
|
<select class="form-select" id="reportedBy" name="reported_by" required>
|
|
<option value="">Select reporter...</option>
|
|
{% for staff in clinical_staff %}
|
|
<option value="{{ staff.id }}">{{ staff.get_full_name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="reportDate" class="form-label">
|
|
Report Date <span class="required-field">*</span>
|
|
</label>
|
|
<input type="datetime-local" class="form-control" id="reportDate" name="report_date" required>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="form-group">
|
|
<label for="additionalNotes" class="form-label">Additional Notes</label>
|
|
<textarea class="form-control" id="additionalNotes" name="additional_notes" rows="4"
|
|
placeholder="Any additional observations, circumstances, or relevant information..."></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END reporting information -->
|
|
|
|
<!-- BEGIN reaction summary -->
|
|
<div class="reaction-summary">
|
|
<h6><i class="fa fa-clipboard-check"></i> Reaction Summary</h6>
|
|
<div id="reactionSummary">
|
|
<p class="text-muted">Complete the form to view reaction summary</p>
|
|
</div>
|
|
</div>
|
|
<!-- END reaction summary -->
|
|
|
|
<!-- BEGIN form actions -->
|
|
<div class="d-flex justify-content-between mt-4">
|
|
<a href="{% url 'blood_bank:transfusion_detail' transfusion.id %}" class="btn btn-secondary">
|
|
<i class="fa fa-arrow-left"></i> Cancel
|
|
</a>
|
|
<div>
|
|
<button type="button" class="btn btn-info" onclick="validateReaction()">
|
|
<i class="fa fa-check"></i> Validate Report
|
|
</button>
|
|
<button type="submit" class="btn btn-danger" id="submitBtn" disabled>
|
|
<i class="fa fa-exclamation-triangle"></i> Submit Adverse Reaction Report
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- END form actions -->
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<!-- END panel -->
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
<script src="{% static 'plugins/select2/dist/js/select2.min.js' %}"></script>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Initialize Select2
|
|
$('#severity, #reactionType, #outcome, #reportedBy').select2({
|
|
theme: 'bootstrap-5'
|
|
});
|
|
|
|
// Set default times
|
|
var now = new Date();
|
|
$('#reactionTime').val(now.toISOString().slice(0, 16));
|
|
$('#reportDate').val(now.toISOString().slice(0, 16));
|
|
|
|
// Update displays when form changes
|
|
updateTimeFromStart();
|
|
updateReactionSummary();
|
|
|
|
// Event listeners
|
|
$('#reactionTime').on('change', function() {
|
|
updateTimeFromStart();
|
|
updateReactionSummary();
|
|
});
|
|
|
|
$('#severity').on('change', function() {
|
|
updateSeverityDisplay();
|
|
updateReactionSummary();
|
|
});
|
|
|
|
$('#reactionType, #outcome').on('change', function() {
|
|
updateReactionSummary();
|
|
validateReaction();
|
|
});
|
|
|
|
$('input[name="symptoms"], input[name="interventions"]').on('change', function() {
|
|
updateReactionSummary();
|
|
validateReaction();
|
|
});
|
|
|
|
// Form validation
|
|
$('#adverseReactionForm').on('submit', function(e) {
|
|
if (!validateReaction()) {
|
|
e.preventDefault();
|
|
}
|
|
});
|
|
});
|
|
|
|
function updateTimeFromStart() {
|
|
var reactionTime = new Date($('#reactionTime').val());
|
|
var startTime = new Date("{{ transfusion.start_time|date:'c' }}");
|
|
|
|
if (reactionTime && startTime) {
|
|
var diffMs = reactionTime - startTime;
|
|
var diffMins = Math.round(diffMs / 60000);
|
|
|
|
if (diffMins < 60) {
|
|
$('#timeFromStart').val(diffMins + ' minutes');
|
|
} else {
|
|
var hours = Math.floor(diffMins / 60);
|
|
var mins = diffMins % 60;
|
|
$('#timeFromStart').val(hours + ' hours ' + mins + ' minutes');
|
|
}
|
|
}
|
|
}
|
|
|
|
function updateSeverityDisplay() {
|
|
var severity = $('#severity').val();
|
|
var reactionSection = $('.reaction-details');
|
|
|
|
reactionSection.removeClass('severity-mild severity-moderate severity-critical');
|
|
|
|
switch(severity) {
|
|
case 'mild':
|
|
reactionSection.addClass('severity-mild');
|
|
break;
|
|
case 'moderate':
|
|
reactionSection.addClass('severity-moderate');
|
|
break;
|
|
case 'severe':
|
|
case 'critical':
|
|
reactionSection.addClass('severity-critical');
|
|
break;
|
|
}
|
|
}
|
|
|
|
function updateReactionSummary() {
|
|
var severity = $('#severity').val();
|
|
var reactionType = $('#reactionType').val();
|
|
var outcome = $('#outcome').val();
|
|
var symptoms = $('input[name="symptoms"]:checked').length;
|
|
var interventions = $('input[name="interventions"]:checked').length;
|
|
|
|
if (!severity || !reactionType) {
|
|
$('#reactionSummary').html('<p class="text-muted">Complete the form to view reaction summary</p>');
|
|
return;
|
|
}
|
|
|
|
var summaryHtml = '<div class="row">';
|
|
|
|
// Severity indicator
|
|
var severityClass = severity === 'critical' ? 'critical' : severity === 'severe' ? 'severe' : severity === 'moderate' ? 'moderate' : 'mild';
|
|
summaryHtml += '<div class="col-md-3">';
|
|
summaryHtml += '<strong>Severity:</strong><br>';
|
|
summaryHtml += '<span class="severity-indicator ' + severityClass + '"></span>';
|
|
summaryHtml += severity.charAt(0).toUpperCase() + severity.slice(1);
|
|
summaryHtml += '</div>';
|
|
|
|
// Reaction type
|
|
summaryHtml += '<div class="col-md-3">';
|
|
summaryHtml += '<strong>Type:</strong><br>' + $('#reactionType option:selected').text();
|
|
summaryHtml += '</div>';
|
|
|
|
// Symptoms count
|
|
summaryHtml += '<div class="col-md-3">';
|
|
summaryHtml += '<strong>Symptoms:</strong><br>' + symptoms + ' documented';
|
|
summaryHtml += '</div>';
|
|
|
|
// Interventions count
|
|
summaryHtml += '<div class="col-md-3">';
|
|
summaryHtml += '<strong>Interventions:</strong><br>' + interventions + ' performed';
|
|
summaryHtml += '</div>';
|
|
|
|
summaryHtml += '</div>';
|
|
|
|
// Outcome
|
|
if (outcome) {
|
|
summaryHtml += '<div class="mt-2">';
|
|
summaryHtml += '<strong>Outcome:</strong> ' + $('#outcome option:selected').text();
|
|
summaryHtml += '</div>';
|
|
}
|
|
|
|
// Critical warnings
|
|
if (severity === 'critical' || severity === 'severe') {
|
|
summaryHtml += '<div class="alert alert-danger mt-2">';
|
|
summaryHtml += '<strong>⚠️ SERIOUS ADVERSE REACTION:</strong> Immediate regulatory reporting required.';
|
|
summaryHtml += '</div>';
|
|
}
|
|
|
|
$('#reactionSummary').html(summaryHtml);
|
|
}
|
|
|
|
function validateReaction() {
|
|
var errors = [];
|
|
|
|
// Check required fields
|
|
if (!$('#reactionTime').val()) {
|
|
errors.push('Please enter reaction time');
|
|
}
|
|
|
|
if (!$('#severity').val()) {
|
|
errors.push('Please select reaction severity');
|
|
}
|
|
|
|
if (!$('#reactionType').val()) {
|
|
errors.push('Please select reaction type');
|
|
}
|
|
|
|
if (!$('#outcome').val()) {
|
|
errors.push('Please select patient outcome');
|
|
}
|
|
|
|
if (!$('#reportedBy').val()) {
|
|
errors.push('Please select who is reporting this reaction');
|
|
}
|
|
|
|
if (!$('#reportDate').val()) {
|
|
errors.push('Please enter report date');
|
|
}
|
|
|
|
// Check that at least one symptom is selected
|
|
var symptoms = $('input[name="symptoms"]:checked').length;
|
|
if (symptoms === 0) {
|
|
errors.push('Please select at least one symptom');
|
|
}
|
|
|
|
// Check that basic interventions are documented
|
|
var basicInterventions = ['transfusion_stopped', 'physician_notified', 'blood_bank_notified'];
|
|
var missingBasic = basicInterventions.filter(function(intervention) {
|
|
return !document.getElementById(intervention).checked;
|
|
});
|
|
|
|
if (missingBasic.length > 0) {
|
|
errors.push('Please confirm basic interventions (stop transfusion, notify physician, notify blood bank)');
|
|
}
|
|
|
|
// Enable/disable submit button
|
|
$('#submitBtn').prop('disabled', errors.length > 0);
|
|
|
|
if (errors.length > 0) {
|
|
if (errors.length < 8) { // Only show errors if validation was explicitly requested
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Validation Errors',
|
|
html: '<ul class="text-start"><li>' + errors.join('</li><li>') + '</li></ul>',
|
|
confirmButtonText: 'OK'
|
|
});
|
|
}
|
|
return false;
|
|
}
|
|
|
|
// Check for critical reactions
|
|
var severity = $('#severity').val();
|
|
if (severity === 'critical' || severity === 'severe') {
|
|
Swal.fire({
|
|
icon: 'warning',
|
|
title: 'Serious Adverse Reaction',
|
|
html: '<strong>This is a serious adverse reaction that requires immediate regulatory reporting.</strong><br><br>Please ensure all appropriate notifications have been made.',
|
|
confirmButtonText: 'I Understand'
|
|
});
|
|
} else {
|
|
Swal.fire({
|
|
icon: 'success',
|
|
title: 'Validation Passed',
|
|
text: 'Adverse reaction report is complete and ready for submission.',
|
|
timer: 1500,
|
|
showConfirmButton: false
|
|
});
|
|
}
|
|
|
|
return true;
|
|
}
|
|
</script>
|
|
{% endblock %}
|
|
|