840 lines
36 KiB
HTML
840 lines
36 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Crossmatch Test - {{ blood_unit.unit_number }} & {{ patient.full_name }}{% 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;
|
|
}
|
|
|
|
.patient-info {
|
|
background: #d4edda;
|
|
border-left: 4px solid #28a745;
|
|
}
|
|
|
|
.unit-info {
|
|
background: #d1ecf1;
|
|
border-left: 4px solid #17a2b8;
|
|
}
|
|
|
|
.compatibility-info {
|
|
background: #fff3cd;
|
|
border-left: 4px solid #ffc107;
|
|
}
|
|
|
|
.crossmatch-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 20px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.test-panel {
|
|
background: white;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
}
|
|
|
|
.test-panel h6 {
|
|
color: #495057;
|
|
border-bottom: 1px solid #dee2e6;
|
|
padding-bottom: 10px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.test-result {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.result-indicator {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
}
|
|
|
|
.compatible { background-color: #28a745; }
|
|
.incompatible { background-color: #dc3545; }
|
|
.pending { background-color: #6c757d; }
|
|
.weak { background-color: #ffc107; }
|
|
|
|
.temperature-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 15px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.temperature-test {
|
|
background: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
text-align: center;
|
|
}
|
|
|
|
.compatibility-summary {
|
|
background: #e2e3e5;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.safety-warning {
|
|
background: #f8d7da;
|
|
border: 2px solid #dc3545;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
margin-top: 15px;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% { opacity: 1; }
|
|
50% { opacity: 0.8; }
|
|
100% { opacity: 1; }
|
|
}
|
|
</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:blood_unit_list' %}">Blood Units</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'blood_bank:blood_unit_detail' blood_unit.id %}">{{ blood_unit.unit_number }}</a></li>
|
|
<li class="breadcrumb-item active">Crossmatch</li>
|
|
</ol>
|
|
<!-- END breadcrumb -->
|
|
|
|
<!-- BEGIN page-header -->
|
|
<h1 class="page-header">Crossmatch Test <small>compatibility verification</small></h1>
|
|
<!-- END page-header -->
|
|
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
<i class="fa fa-exchange-alt"></i> Crossmatch Compatibility Test
|
|
</h4>
|
|
<div class="panel-heading-btn">
|
|
<span class="badge bg-info">Unit: {{ blood_unit.unit_number }}</span>
|
|
<span class="badge bg-success">Patient: {{ patient.patient_id }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<form method="post" id="crossmatchForm">
|
|
{% csrf_token %}
|
|
|
|
<!-- BEGIN patient information -->
|
|
<div class="form-section patient-info">
|
|
<h5><i class="fa fa-user-injured"></i> Patient Information</h5>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<table class="table table-borderless mb-0">
|
|
<tr>
|
|
<td class="fw-bold">Name:</td>
|
|
<td>{{ patient.full_name }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Patient ID:</td>
|
|
<td>{{ patient.patient_id }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Blood Group:</td>
|
|
<td>
|
|
<span class="badge bg-primary">{{ patient.blood_group.display_name|default:"Unknown" }}</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Age:</td>
|
|
<td>{{ patient.age }} years</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<table class="table table-borderless mb-0">
|
|
<tr>
|
|
<td class="fw-bold">Previous Transfusions:</td>
|
|
<td>{{ patient.transfusion_history.count }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Pregnancies:</td>
|
|
<td>{{ patient.pregnancy_history|default:"N/A" }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Known Antibodies:</td>
|
|
<td>{{ patient.known_antibodies|default:"None" }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Last Crossmatch:</td>
|
|
<td>{{ patient.last_crossmatch_date|date:"M d, Y"|default:"Never" }}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END patient information -->
|
|
|
|
<!-- BEGIN blood unit information -->
|
|
<div class="form-section unit-info">
|
|
<h5><i class="fa fa-tint"></i> Blood Unit Information</h5>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<table class="table table-borderless mb-0">
|
|
<tr>
|
|
<td class="fw-bold">Unit Number:</td>
|
|
<td>{{ blood_unit.unit_number }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Blood Group:</td>
|
|
<td><span class="badge bg-primary">{{ blood_unit.blood_group.display_name }}</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Component:</td>
|
|
<td>{{ blood_unit.component.get_name_display }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Volume:</td>
|
|
<td>{{ blood_unit.volume_ml }} ml</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<table class="table table-borderless mb-0">
|
|
<tr>
|
|
<td class="fw-bold">Donor:</td>
|
|
<td>{{ blood_unit.donor.full_name }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Collection Date:</td>
|
|
<td>{{ blood_unit.collection_date|date:"M d, Y" }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Expiry Date:</td>
|
|
<td>{{ blood_unit.expiry_date|date:"M d, Y" }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Test Status:</td>
|
|
<td>
|
|
{% if blood_unit.all_tests_passed %}
|
|
<span class="badge bg-success">All Tests Passed</span>
|
|
{% else %}
|
|
<span class="badge bg-warning">Tests Pending</span>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END blood unit information -->
|
|
|
|
<!-- BEGIN test information -->
|
|
<div class="form-section">
|
|
<h5><i class="fa fa-flask"></i> Test Information</h5>
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="form-group">
|
|
<label for="testDate" class="form-label">
|
|
Test Date <span class="required-field">*</span>
|
|
</label>
|
|
<input type="datetime-local" class="form-control" id="testDate" name="test_date" required>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="form-group">
|
|
<label for="testedBy" class="form-label">
|
|
Tested By <span class="required-field">*</span>
|
|
</label>
|
|
<select class="form-select" id="testedBy" name="tested_by" required>
|
|
<option value="">Select technician...</option>
|
|
{% for staff in lab_staff %}
|
|
<option value="{{ staff.id }}">{{ staff.get_full_name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="form-group">
|
|
<label for="testMethod" class="form-label">
|
|
Test Method <span class="required-field">*</span>
|
|
</label>
|
|
<select class="form-select" id="testMethod" name="test_method" required>
|
|
<option value="">Select method...</option>
|
|
<option value="tube">Tube Method</option>
|
|
<option value="gel">Gel Card</option>
|
|
<option value="solid_phase">Solid Phase</option>
|
|
<option value="automated">Automated System</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END test information -->
|
|
|
|
<!-- BEGIN ABO/Rh compatibility check -->
|
|
<div class="form-section compatibility-info">
|
|
<h5><i class="fa fa-shield-alt"></i> ABO/Rh Compatibility Check</h5>
|
|
<div class="compatibility-summary">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h6>Patient Blood Group</h6>
|
|
<div class="d-flex align-items-center gap-3">
|
|
<span class="badge bg-primary fs-5">{{ patient.blood_group.display_name|default:"Unknown" }}</span>
|
|
{% if patient.blood_group.display_name == "Unknown" %}
|
|
<span class="text-danger">⚠️ Patient blood group must be confirmed</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6>Donor Blood Group</h6>
|
|
<div class="d-flex align-items-center gap-3">
|
|
<span class="badge bg-info fs-5">{{ blood_unit.blood_group.display_name }}</span>
|
|
<div id="aboCompatibility">
|
|
<!-- Will be populated by JavaScript -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END ABO/Rh compatibility check -->
|
|
|
|
<!-- BEGIN crossmatch testing -->
|
|
<div class="form-section">
|
|
<h5><i class="fa fa-microscope"></i> Crossmatch Testing</h5>
|
|
<div class="crossmatch-grid">
|
|
<!-- Major Crossmatch -->
|
|
<div class="test-panel">
|
|
<h6><i class="fa fa-arrow-right"></i> Major Crossmatch</h6>
|
|
<p class="small text-muted">Patient serum + Donor red cells</p>
|
|
|
|
<div class="temperature-grid">
|
|
<div class="temperature-test">
|
|
<label class="form-label">Room Temp</label>
|
|
<div class="test-result">
|
|
<select class="form-select form-select-sm" name="major_room_temp" required>
|
|
<option value="">Result</option>
|
|
<option value="compatible">Compatible</option>
|
|
<option value="incompatible">Incompatible</option>
|
|
<option value="weak">Weak Reaction</option>
|
|
</select>
|
|
<span class="result-indicator pending" id="major_room_temp_indicator"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="temperature-test">
|
|
<label class="form-label">37°C</label>
|
|
<div class="test-result">
|
|
<select class="form-select form-select-sm" name="major_37c" required>
|
|
<option value="">Result</option>
|
|
<option value="compatible">Compatible</option>
|
|
<option value="incompatible">Incompatible</option>
|
|
<option value="weak">Weak Reaction</option>
|
|
</select>
|
|
<span class="result-indicator pending" id="major_37c_indicator"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="temperature-test">
|
|
<label class="form-label">AHG Phase</label>
|
|
<div class="test-result">
|
|
<select class="form-select form-select-sm" name="major_ahg" required>
|
|
<option value="">Result</option>
|
|
<option value="compatible">Compatible</option>
|
|
<option value="incompatible">Incompatible</option>
|
|
<option value="weak">Weak Reaction</option>
|
|
</select>
|
|
<span class="result-indicator pending" id="major_ahg_indicator"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Minor Crossmatch -->
|
|
<div class="test-panel">
|
|
<h6><i class="fa fa-arrow-left"></i> Minor Crossmatch</h6>
|
|
<p class="small text-muted">Donor serum + Patient red cells</p>
|
|
|
|
<div class="temperature-grid">
|
|
<div class="temperature-test">
|
|
<label class="form-label">Room Temp</label>
|
|
<div class="test-result">
|
|
<select class="form-select form-select-sm" name="minor_room_temp">
|
|
<option value="">Result</option>
|
|
<option value="compatible">Compatible</option>
|
|
<option value="incompatible">Incompatible</option>
|
|
<option value="weak">Weak Reaction</option>
|
|
</select>
|
|
<span class="result-indicator pending" id="minor_room_temp_indicator"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="temperature-test">
|
|
<label class="form-label">37°C</label>
|
|
<div class="test-result">
|
|
<select class="form-select form-select-sm" name="minor_37c">
|
|
<option value="">Result</option>
|
|
<option value="compatible">Compatible</option>
|
|
<option value="incompatible">Incompatible</option>
|
|
<option value="weak">Weak Reaction</option>
|
|
</select>
|
|
<span class="result-indicator pending" id="minor_37c_indicator"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="temperature-test">
|
|
<label class="form-label">AHG Phase</label>
|
|
<div class="test-result">
|
|
<select class="form-select form-select-sm" name="minor_ahg">
|
|
<option value="">Result</option>
|
|
<option value="compatible">Compatible</option>
|
|
<option value="incompatible">Incompatible</option>
|
|
<option value="weak">Weak Reaction</option>
|
|
</select>
|
|
<span class="result-indicator pending" id="minor_ahg_indicator"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Control Tests -->
|
|
<div class="test-panel">
|
|
<h6><i class="fa fa-check-circle"></i> Control Tests</h6>
|
|
<p class="small text-muted">Quality control verification</p>
|
|
|
|
<div class="test-result">
|
|
<label class="form-label">Positive Control</label>
|
|
<select class="form-select form-select-sm" name="positive_control" required>
|
|
<option value="">Result</option>
|
|
<option value="positive">Positive</option>
|
|
<option value="negative">Negative</option>
|
|
<option value="weak">Weak</option>
|
|
</select>
|
|
<span class="result-indicator pending" id="positive_control_indicator"></span>
|
|
</div>
|
|
|
|
<div class="test-result">
|
|
<label class="form-label">Negative Control</label>
|
|
<select class="form-select form-select-sm" name="negative_control" required>
|
|
<option value="">Result</option>
|
|
<option value="positive">Positive</option>
|
|
<option value="negative">Negative</option>
|
|
<option value="weak">Weak</option>
|
|
</select>
|
|
<span class="result-indicator pending" id="negative_control_indicator"></span>
|
|
</div>
|
|
|
|
<div class="test-result">
|
|
<label class="form-label">Auto Control</label>
|
|
<select class="form-select form-select-sm" name="auto_control" required>
|
|
<option value="">Result</option>
|
|
<option value="positive">Positive</option>
|
|
<option value="negative">Negative</option>
|
|
<option value="weak">Weak</option>
|
|
</select>
|
|
<span class="result-indicator pending" id="auto_control_indicator"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END crossmatch testing -->
|
|
|
|
<!-- BEGIN antibody screening -->
|
|
<div class="form-section">
|
|
<h5><i class="fa fa-search"></i> Antibody Screening</h5>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="antibodyScreen" class="form-label">
|
|
Antibody Screen Result <span class="required-field">*</span>
|
|
</label>
|
|
<select class="form-select" id="antibodyScreen" name="antibody_screen" required>
|
|
<option value="">Select result...</option>
|
|
<option value="negative">Negative</option>
|
|
<option value="positive">Positive</option>
|
|
<option value="indeterminate">Indeterminate</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="antibodyIdentification" class="form-label">
|
|
Antibody Identification
|
|
</label>
|
|
<input type="text" class="form-control" id="antibodyIdentification" name="antibody_identification"
|
|
placeholder="If positive, specify antibodies identified">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END antibody screening -->
|
|
|
|
<!-- BEGIN test notes -->
|
|
<div class="form-section">
|
|
<h5><i class="fa fa-clipboard"></i> Test Notes & Observations</h5>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="form-group">
|
|
<label for="testNotes" class="form-label">Test Notes</label>
|
|
<textarea class="form-control" id="testNotes" name="test_notes" rows="4"
|
|
placeholder="Record any observations, reaction strengths, or additional notes..."></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="reagentLots" class="form-label">Reagent Lot Numbers</label>
|
|
<input type="text" class="form-control" id="reagentLots" name="reagent_lots"
|
|
placeholder="AHG, enhancement media lot numbers">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="equipmentUsed" class="form-label">Equipment Used</label>
|
|
<input type="text" class="form-control" id="equipmentUsed" name="equipment_used"
|
|
placeholder="Centrifuge, incubator details">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END test notes -->
|
|
|
|
<!-- BEGIN final result -->
|
|
<div class="form-section">
|
|
<h5><i class="fa fa-clipboard-check"></i> Final Crossmatch Result</h5>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="finalResult" class="form-label">
|
|
Overall Compatibility <span class="required-field">*</span>
|
|
</label>
|
|
<select class="form-select" id="finalResult" name="final_result" required>
|
|
<option value="">Select final result...</option>
|
|
<option value="compatible">Compatible</option>
|
|
<option value="incompatible">Incompatible</option>
|
|
<option value="conditional">Conditional (with restrictions)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="restrictions" class="form-label">Restrictions/Conditions</label>
|
|
<input type="text" class="form-control" id="restrictions" name="restrictions"
|
|
placeholder="Any special conditions or restrictions">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Result summary -->
|
|
<div id="resultSummary" class="mt-3">
|
|
<!-- Will be populated by JavaScript -->
|
|
</div>
|
|
</div>
|
|
<!-- END final result -->
|
|
|
|
<!-- BEGIN form actions -->
|
|
<div class="d-flex justify-content-between mt-4">
|
|
<a href="{% url 'blood_bank:blood_unit_detail' blood_unit.id %}" class="btn btn-secondary">
|
|
<i class="fa fa-arrow-left"></i> Cancel
|
|
</a>
|
|
<div>
|
|
<button type="button" class="btn btn-info" onclick="validateCrossmatch()">
|
|
<i class="fa fa-check"></i> Validate Results
|
|
</button>
|
|
<button type="submit" class="btn btn-primary" id="submitBtn" disabled>
|
|
<i class="fa fa-save"></i> Save Crossmatch Results
|
|
</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
|
|
$('#testedBy, #testMethod').select2({
|
|
theme: 'bootstrap-5'
|
|
});
|
|
|
|
// Set default test date to now
|
|
var now = new Date();
|
|
$('#testDate').val(now.toISOString().slice(0, 16));
|
|
|
|
// Check ABO compatibility on load
|
|
checkABOCompatibility();
|
|
|
|
// Update result indicators when test results change
|
|
$('select[name$="_temp"], select[name$="_37c"], select[name$="_ahg"], select[name$="_control"]').on('change', function() {
|
|
updateResultIndicator(this);
|
|
updateResultSummary();
|
|
validateCrossmatch();
|
|
});
|
|
|
|
$('#finalResult').on('change', function() {
|
|
updateResultSummary();
|
|
validateCrossmatch();
|
|
});
|
|
|
|
// Form validation
|
|
$('#crossmatchForm').on('submit', function(e) {
|
|
if (!validateCrossmatch()) {
|
|
e.preventDefault();
|
|
}
|
|
});
|
|
});
|
|
|
|
function checkABOCompatibility() {
|
|
var patientBloodGroup = "{{ patient.blood_group.display_name|default:'Unknown' }}";
|
|
var donorBloodGroup = "{{ blood_unit.blood_group.display_name }}";
|
|
|
|
if (patientBloodGroup === "Unknown") {
|
|
$('#aboCompatibility').html('<span class="text-danger">⚠️ Patient blood group unknown</span>');
|
|
return;
|
|
}
|
|
|
|
// Simple ABO compatibility check
|
|
var compatible = false;
|
|
var message = "";
|
|
|
|
if (patientBloodGroup === donorBloodGroup) {
|
|
compatible = true;
|
|
message = "✅ Identical blood groups";
|
|
} else if (donorBloodGroup === "O-") {
|
|
compatible = true;
|
|
message = "✅ Universal donor";
|
|
} else if (patientBloodGroup === "AB+" && donorBloodGroup.includes("AB")) {
|
|
compatible = true;
|
|
message = "✅ Compatible";
|
|
} else {
|
|
compatible = false;
|
|
message = "⚠️ Potential incompatibility";
|
|
}
|
|
|
|
var alertClass = compatible ? 'text-success' : 'text-warning';
|
|
$('#aboCompatibility').html('<span class="' + alertClass + '">' + message + '</span>');
|
|
}
|
|
|
|
function updateResultIndicator(selectElement) {
|
|
var result = $(selectElement).val();
|
|
var indicatorId = $(selectElement).attr('name') + '_indicator';
|
|
var indicator = $('#' + indicatorId);
|
|
|
|
indicator.removeClass('compatible incompatible pending weak');
|
|
|
|
switch(result) {
|
|
case 'compatible':
|
|
case 'negative':
|
|
indicator.addClass('compatible');
|
|
break;
|
|
case 'incompatible':
|
|
case 'positive':
|
|
indicator.addClass('incompatible');
|
|
break;
|
|
case 'weak':
|
|
indicator.addClass('weak');
|
|
break;
|
|
default:
|
|
indicator.addClass('pending');
|
|
}
|
|
}
|
|
|
|
function updateResultSummary() {
|
|
var majorResults = ['major_room_temp', 'major_37c', 'major_ahg'];
|
|
var minorResults = ['minor_room_temp', 'minor_37c', 'minor_ahg'];
|
|
var controlResults = ['positive_control', 'negative_control', 'auto_control'];
|
|
|
|
var majorCompatible = majorResults.every(function(name) {
|
|
var value = $('select[name="' + name + '"]').val();
|
|
return value === 'compatible';
|
|
});
|
|
|
|
var majorIncompatible = majorResults.some(function(name) {
|
|
var value = $('select[name="' + name + '"]').val();
|
|
return value === 'incompatible';
|
|
});
|
|
|
|
var controlsValid =
|
|
$('select[name="positive_control"]').val() === 'positive' &&
|
|
$('select[name="negative_control"]').val() === 'negative' &&
|
|
$('select[name="auto_control"]').val() === 'negative';
|
|
|
|
var finalResult = $('#finalResult').val();
|
|
|
|
var summaryHtml = '<div class="row">';
|
|
|
|
// Major crossmatch summary
|
|
if (majorCompatible) {
|
|
summaryHtml += '<div class="col-md-4"><div class="alert alert-success"><strong>Major Crossmatch:</strong> Compatible</div></div>';
|
|
} else if (majorIncompatible) {
|
|
summaryHtml += '<div class="col-md-4"><div class="alert alert-danger"><strong>Major Crossmatch:</strong> Incompatible</div></div>';
|
|
} else {
|
|
summaryHtml += '<div class="col-md-4"><div class="alert alert-info"><strong>Major Crossmatch:</strong> Pending</div></div>';
|
|
}
|
|
|
|
// Controls summary
|
|
if (controlsValid) {
|
|
summaryHtml += '<div class="col-md-4"><div class="alert alert-success"><strong>Controls:</strong> Valid</div></div>';
|
|
} else {
|
|
summaryHtml += '<div class="col-md-4"><div class="alert alert-warning"><strong>Controls:</strong> Check Required</div></div>';
|
|
}
|
|
|
|
// Final result
|
|
if (finalResult === 'compatible') {
|
|
summaryHtml += '<div class="col-md-4"><div class="alert alert-success"><strong>Final Result:</strong> Compatible</div></div>';
|
|
} else if (finalResult === 'incompatible') {
|
|
summaryHtml += '<div class="col-md-4"><div class="alert alert-danger"><strong>Final Result:</strong> Incompatible</div></div>';
|
|
} else if (finalResult === 'conditional') {
|
|
summaryHtml += '<div class="col-md-4"><div class="alert alert-warning"><strong>Final Result:</strong> Conditional</div></div>';
|
|
} else {
|
|
summaryHtml += '<div class="col-md-4"><div class="alert alert-info"><strong>Final Result:</strong> Pending</div></div>';
|
|
}
|
|
|
|
summaryHtml += '</div>';
|
|
|
|
// Add safety warnings
|
|
if (majorIncompatible || finalResult === 'incompatible') {
|
|
summaryHtml += '<div class="safety-warning">';
|
|
summaryHtml += '<h6><i class="fa fa-exclamation-triangle"></i> INCOMPATIBLE CROSSMATCH DETECTED</h6>';
|
|
summaryHtml += '<p><strong>This blood unit MUST NOT be transfused to this patient.</strong></p>';
|
|
summaryHtml += '<p>Immediate investigation and alternative blood unit selection required.</p>';
|
|
summaryHtml += '</div>';
|
|
}
|
|
|
|
$('#resultSummary').html(summaryHtml);
|
|
}
|
|
|
|
function validateCrossmatch() {
|
|
var errors = [];
|
|
|
|
// Check required fields
|
|
if (!$('#testDate').val()) {
|
|
errors.push('Please enter test date');
|
|
}
|
|
|
|
if (!$('#testedBy').val()) {
|
|
errors.push('Please select who performed the test');
|
|
}
|
|
|
|
if (!$('#testMethod').val()) {
|
|
errors.push('Please select test method');
|
|
}
|
|
|
|
// Check major crossmatch results
|
|
var majorResults = ['major_room_temp', 'major_37c', 'major_ahg'];
|
|
var missingMajor = majorResults.filter(function(name) {
|
|
return !$('select[name="' + name + '"]').val();
|
|
});
|
|
|
|
if (missingMajor.length > 0) {
|
|
errors.push('Please complete all major crossmatch results');
|
|
}
|
|
|
|
// Check control results
|
|
var controlResults = ['positive_control', 'negative_control', 'auto_control'];
|
|
var missingControls = controlResults.filter(function(name) {
|
|
return !$('select[name="' + name + '"]').val();
|
|
});
|
|
|
|
if (missingControls.length > 0) {
|
|
errors.push('Please complete all control test results');
|
|
}
|
|
|
|
// Check antibody screen
|
|
if (!$('#antibodyScreen').val()) {
|
|
errors.push('Please enter antibody screen result');
|
|
}
|
|
|
|
// Check final result
|
|
if (!$('#finalResult').val()) {
|
|
errors.push('Please select final compatibility result');
|
|
}
|
|
|
|
// Validate control results
|
|
var positiveControl = $('select[name="positive_control"]').val();
|
|
var negativeControl = $('select[name="negative_control"]').val();
|
|
var autoControl = $('select[name="auto_control"]').val();
|
|
|
|
if (positiveControl === 'negative') {
|
|
errors.push('Positive control should be positive - check reagents');
|
|
}
|
|
|
|
if (negativeControl === 'positive') {
|
|
errors.push('Negative control should be negative - check for contamination');
|
|
}
|
|
|
|
if (autoControl === 'positive') {
|
|
errors.push('Auto control positive - patient may have autoantibodies');
|
|
}
|
|
|
|
// 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 incompatibility
|
|
var finalResult = $('#finalResult').val();
|
|
if (finalResult === 'incompatible') {
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Incompatible Crossmatch',
|
|
html: '<strong>This crossmatch shows incompatibility.</strong><br><br>This blood unit must not be used for this patient. Please select an alternative unit.',
|
|
confirmButtonText: 'I Understand'
|
|
});
|
|
} else if (finalResult === 'compatible') {
|
|
Swal.fire({
|
|
icon: 'success',
|
|
title: 'Compatible Crossmatch',
|
|
text: 'Crossmatch is compatible. Blood unit cleared for transfusion.',
|
|
timer: 1500,
|
|
showConfirmButton: false
|
|
});
|
|
}
|
|
|
|
return true;
|
|
}
|
|
</script>
|
|
{% endblock %}
|
|
|