hospital-management/templates/radiology/orders/imaging_order_form.html
2025-08-12 13:33:25 +03:00

707 lines
33 KiB
HTML

{% extends "base.html" %}
{% load static %}
{% block title %}
{% if form.instance.pk %}Edit Imaging Order{% else %}New Imaging Order{% endif %}
{% endblock %}
{% block content %}
<!-- BEGIN breadcrumb -->
<ol class="breadcrumb float-xl-end">
<li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
<li class="breadcrumb-item"><a href="{% url 'radiology:dashboard' %}">Radiology</a></li>
<li class="breadcrumb-item"><a href="{% url 'radiology:imaging_order_list' %}">Imaging Orders</a></li>
<li class="breadcrumb-item active">
{% if form.instance.pk %}Edit Order{% else %}New Order{% endif %}
</li>
</ol>
<!-- END breadcrumb -->
<!-- BEGIN page-header -->
<h1 class="page-header">
{% if form.instance.pk %}Edit Imaging Order{% else %}Create New Imaging Order{% endif %}
<small>{% if form.instance.pk %}{{ form.instance.order_number }}{% else %}Complete the form below{% endif %}</small>
</h1>
<!-- END page-header -->
<!-- BEGIN row -->
<div class="row">
<div class="col-xl-8">
<form method="post" id="orderForm" class="needs-validation" novalidate>
{% csrf_token %}
<!-- Order Information -->
<div class="panel panel-inverse">
<div class="panel-heading">
<h4 class="panel-title">Order Information</h4>
<div class="panel-heading-btn">
<button type="button" class="btn btn-secondary btn-sm" onclick="saveDraft()">
<i class="fa fa-save me-1"></i>Save Draft
</button>
</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="{{ form.patient.id_for_label }}" class="form-label required">Patient</label>
<div class="input-group">
{{ form.patient }}
<button type="button" class="btn btn-outline-secondary" onclick="searchPatient()">
<i class="fa fa-search"></i>
</button>
</div>
{% if form.patient.errors %}
<div class="invalid-feedback d-block">{{ form.patient.errors.0 }}</div>
{% endif %}
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="{{ form.ordering_provider.id_for_label }}" class="form-label required">Ordering Provider</label>
{{ form.ordering_provider }}
{% if form.ordering_provider.errors %}
<div class="invalid-feedback d-block">{{ form.ordering_provider.errors.0 }}</div>
{% endif %}
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="mb-3">
<label for="{{ form.study_type.id_for_label }}" class="form-label required">Study Type</label>
{{ form.study_type }}
{% if form.study_type.errors %}
<div class="invalid-feedback d-block">{{ form.study_type.errors.0 }}</div>
{% endif %}
</div>
</div>
<div class="col-md-4">
<div class="mb-3">
<label for="{{ form.modality.id_for_label }}" class="form-label required">Modality</label>
{{ form.modality }}
{% if form.modality.errors %}
<div class="invalid-feedback d-block">{{ form.modality.errors.0 }}</div>
{% endif %}
</div>
</div>
<div class="col-md-4">
<div class="mb-3">
<label for="{{ form.body_part.id_for_label }}" class="form-label required">Body Part</label>
{{ form.body_part }}
{% if form.body_part.errors %}
<div class="invalid-feedback d-block">{{ form.body_part.errors.0 }}</div>
{% endif %}
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="mb-3">
<label for="{{ form.priority.id_for_label }}" class="form-label required">Priority</label>
{{ form.priority }}
{% if form.priority.errors %}
<div class="invalid-feedback d-block">{{ form.priority.errors.0 }}</div>
{% endif %}
</div>
</div>
<div class="col-md-4">
<div class="mb-3">
<label for="{{ form.order_date.id_for_label }}" class="form-label required">Order Date</label>
{{ form.order_date }}
{% if form.order_date.errors %}
<div class="invalid-feedback d-block">{{ form.order_date.errors.0 }}</div>
{% endif %}
</div>
</div>
<div class="col-md-4">
<div class="mb-3">
<label for="{{ form.scheduled_date.id_for_label }}" class="form-label">Scheduled Date</label>
{{ form.scheduled_date }}
{% if form.scheduled_date.errors %}
<div class="invalid-feedback d-block">{{ form.scheduled_date.errors.0 }}</div>
{% endif %}
</div>
</div>
</div>
<div class="mb-3">
<label for="{{ form.clinical_indication.id_for_label }}" class="form-label required">Clinical Indication</label>
{{ form.clinical_indication }}
<div class="form-text">Provide detailed clinical reason for the imaging study</div>
{% if form.clinical_indication.errors %}
<div class="invalid-feedback d-block">{{ form.clinical_indication.errors.0 }}</div>
{% endif %}
</div>
<div class="mb-3">
<label for="{{ form.special_instructions.id_for_label }}" class="form-label">Special Instructions</label>
{{ form.special_instructions }}
<div class="form-text">Any special preparation or instructions for the study</div>
{% if form.special_instructions.errors %}
<div class="invalid-feedback d-block">{{ form.special_instructions.errors.0 }}</div>
{% endif %}
</div>
</div>
</div>
<!-- Contrast Information -->
<div class="panel panel-inverse">
<div class="panel-heading">
<h4 class="panel-title">Contrast Information</h4>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-3">
<div class="mb-3">
<div class="form-check">
{{ form.contrast_required }}
<label class="form-check-label" for="{{ form.contrast_required.id_for_label }}">
Contrast Required
</label>
</div>
</div>
</div>
<div class="col-md-3" id="contrastTypeDiv" style="display: none;">
<div class="mb-3">
<label for="{{ form.contrast_type.id_for_label }}" class="form-label">Contrast Type</label>
{{ form.contrast_type }}
{% if form.contrast_type.errors %}
<div class="invalid-feedback d-block">{{ form.contrast_type.errors.0 }}</div>
{% endif %}
</div>
</div>
<div class="col-md-3" id="contrastAmountDiv" style="display: none;">
<div class="mb-3">
<label for="{{ form.contrast_amount.id_for_label }}" class="form-label">Amount (ml)</label>
{{ form.contrast_amount }}
{% if form.contrast_amount.errors %}
<div class="invalid-feedback d-block">{{ form.contrast_amount.errors.0 }}</div>
{% endif %}
</div>
</div>
<div class="col-md-3" id="contrastRouteDiv" style="display: none;">
<div class="mb-3">
<label for="{{ form.contrast_route.id_for_label }}" class="form-label">Route</label>
{{ form.contrast_route }}
{% if form.contrast_route.errors %}
<div class="invalid-feedback d-block">{{ form.contrast_route.errors.0 }}</div>
{% endif %}
</div>
</div>
</div>
<div id="contrastWarnings" style="display: none;">
<div class="alert alert-warning">
<h6 class="alert-heading">
<i class="fa fa-exclamation-triangle me-2"></i>Contrast Safety Checklist
</h6>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="kidneyFunction">
<label class="form-check-label" for="kidneyFunction">
Kidney function assessed (eGFR > 30)
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="allergies">
<label class="form-check-label" for="allergies">
Contrast allergies reviewed
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="medications">
<label class="form-check-label" for="medications">
Medications reviewed (Metformin, etc.)
</label>
</div>
</div>
</div>
</div>
</div>
<!-- Resource Assignment -->
<div class="panel panel-inverse">
<div class="panel-heading">
<h4 class="panel-title">Resource Assignment</h4>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-4">
<div class="mb-3">
<label for="{{ form.equipment.id_for_label }}" class="form-label">Equipment</label>
{{ form.equipment }}
<div class="form-text">Select specific equipment if required</div>
{% if form.equipment.errors %}
<div class="invalid-feedback d-block">{{ form.equipment.errors.0 }}</div>
{% endif %}
</div>
</div>
<div class="col-md-4">
<div class="mb-3">
<label for="{{ form.technologist.id_for_label }}" class="form-label">Technologist</label>
{{ form.technologist }}
<div class="form-text">Assign specific technologist if needed</div>
{% if form.technologist.errors %}
<div class="invalid-feedback d-block">{{ form.technologist.errors.0 }}</div>
{% endif %}
</div>
</div>
<div class="col-md-4">
<div class="mb-3">
<label for="{{ form.room.id_for_label }}" class="form-label">Room</label>
{{ form.room }}
<div class="form-text">Specify room if required</div>
{% if form.room.errors %}
<div class="invalid-feedback d-block">{{ form.room.errors.0 }}</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
<!-- Patient Safety -->
<div class="panel panel-inverse">
<div class="panel-heading">
<h4 class="panel-title">Patient Safety Information</h4>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="{{ form.pregnancy_status.id_for_label }}" class="form-label">Pregnancy Status</label>
{{ form.pregnancy_status }}
{% if form.pregnancy_status.errors %}
<div class="invalid-feedback d-block">{{ form.pregnancy_status.errors.0 }}</div>
{% endif %}
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="{{ form.weight.id_for_label }}" class="form-label">Patient Weight (kg)</label>
{{ form.weight }}
<div class="form-text">Required for contrast dosing calculations</div>
{% if form.weight.errors %}
<div class="invalid-feedback d-block">{{ form.weight.errors.0 }}</div>
{% endif %}
</div>
</div>
</div>
<div class="mb-3">
<label class="form-label">Safety Checklist</label>
<div class="border rounded p-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="metalScreening" required>
<label class="form-check-label" for="metalScreening">
Metal screening completed (for MRI)
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="allergiesReviewed" required>
<label class="form-check-label" for="allergiesReviewed">
Patient allergies reviewed
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="consentObtained" required>
<label class="form-check-label" for="consentObtained">
Informed consent obtained
</label>
</div>
</div>
</div>
</div>
</div>
<!-- Form Actions -->
<div class="panel panel-inverse">
<div class="panel-body">
<div class="d-flex justify-content-between">
<div>
<a href="{% url 'radiology:imaging_order_list' %}" class="btn btn-secondary">
<i class="fa fa-arrow-left me-1"></i>Cancel
</a>
</div>
<div>
<button type="button" class="btn btn-outline-primary me-2" onclick="saveDraft()">
<i class="fa fa-save me-1"></i>Save Draft
</button>
<button type="submit" class="btn btn-primary">
<i class="fa fa-check me-1"></i>
{% if form.instance.pk %}Update Order{% else %}Create Order{% endif %}
</button>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="col-xl-4">
<!-- Patient Information -->
<div class="panel panel-inverse" id="patientInfo" style="display: none;">
<div class="panel-heading">
<h4 class="panel-title">Patient Information</h4>
</div>
<div class="panel-body" id="patientInfoContent">
<!-- Patient details will be loaded here -->
</div>
</div>
<!-- Order Guidelines -->
<div class="panel panel-inverse">
<div class="panel-heading">
<h4 class="panel-title">Ordering Guidelines</h4>
</div>
<div class="panel-body">
<div class="accordion" id="guidelinesAccordion">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#contrastGuidelines">
Contrast Guidelines
</button>
</h2>
<div id="contrastGuidelines" class="accordion-collapse collapse" data-bs-parent="#guidelinesAccordion">
<div class="accordion-body">
<ul class="list-unstyled">
<li><i class="fa fa-check text-success me-2"></i>Check kidney function (eGFR)</li>
<li><i class="fa fa-check text-success me-2"></i>Review contrast allergies</li>
<li><i class="fa fa-check text-success me-2"></i>Hold Metformin if needed</li>
<li><i class="fa fa-check text-success me-2"></i>Ensure adequate hydration</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#preparationGuidelines">
Patient Preparation
</button>
</h2>
<div id="preparationGuidelines" class="accordion-collapse collapse" data-bs-parent="#guidelinesAccordion">
<div class="accordion-body">
<ul class="list-unstyled">
<li><i class="fa fa-info text-info me-2"></i>CT Abdomen: NPO 4 hours</li>
<li><i class="fa fa-info text-info me-2"></i>MRI: Remove all metal objects</li>
<li><i class="fa fa-info text-info me-2"></i>Ultrasound: Specific prep varies</li>
<li><i class="fa fa-info text-info me-2"></i>Nuclear Medicine: Special instructions</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#urgencyGuidelines">
Urgency Levels
</button>
</h2>
<div id="urgencyGuidelines" class="accordion-collapse collapse" data-bs-parent="#guidelinesAccordion">
<div class="accordion-body">
<ul class="list-unstyled">
<li><span class="badge bg-danger me-2">STAT</span>Immediate (< 1 hour)</li>
<li><span class="badge bg-warning text-dark me-2">Urgent</span>Same day (< 8 hours)</li>
<li><span class="badge bg-success me-2">Routine</span>Within 48 hours</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Quick Templates -->
<div class="panel panel-inverse">
<div class="panel-heading">
<h4 class="panel-title">Quick Templates</h4>
</div>
<div class="panel-body">
<div class="d-grid gap-2">
<button type="button" class="btn btn-outline-primary btn-sm" onclick="loadTemplate('chest_xray')">
<i class="fa fa-lungs me-1"></i>Chest X-Ray
</button>
<button type="button" class="btn btn-outline-primary btn-sm" onclick="loadTemplate('ct_head')">
<i class="fa fa-brain me-1"></i>CT Head
</button>
<button type="button" class="btn btn-outline-primary btn-sm" onclick="loadTemplate('mri_knee')">
<i class="fa fa-walking me-1"></i>MRI Knee
</button>
<button type="button" class="btn btn-outline-primary btn-sm" onclick="loadTemplate('ultrasound_abdomen')">
<i class="fa fa-heartbeat me-1"></i>US Abdomen
</button>
</div>
</div>
</div>
<!-- Contact Information -->
<div class="panel panel-inverse">
<div class="panel-heading">
<h4 class="panel-title">Contact Information</h4>
</div>
<div class="panel-body">
<div class="text-center">
<div class="mb-2">
<i class="fa fa-phone me-2"></i>
<strong>(555) 123-4567</strong>
</div>
<div class="mb-2">
<i class="fa fa-envelope me-2"></i>
<strong>radiology@hospital.com</strong>
</div>
<div class="mb-3">
<i class="fa fa-clock me-2"></i>
<small class="text-muted">24/7 Emergency Services</small>
</div>
<div class="d-grid">
<a href="tel:+15551234567" class="btn btn-outline-primary btn-sm">
<i class="fa fa-phone me-1"></i>Call Department
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END row -->
<!-- Patient Search Modal -->
<div class="modal fade" id="patientSearchModal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Search Patient</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<!-- Patient search content -->
</div>
</div>
</div>
</div>
{% endblock %}
{% block js %}
<script>
$(document).ready(function() {
// Initialize form validation
initializeFormValidation();
// Handle contrast required checkbox
$('#{{ form.contrast_required.id_for_label }}').change(function() {
toggleContrastFields();
});
// Handle patient selection
$('#{{ form.patient.id_for_label }}').change(function() {
loadPatientInfo();
});
// Handle modality change
$('#{{ form.modality.id_for_label }}').change(function() {
updateEquipmentOptions();
});
// Auto-save every 2 minutes
setInterval(function() {
autoSave();
}, 120000);
// Initialize on page load
toggleContrastFields();
if ($('#{{ form.patient.id_for_label }}').val()) {
loadPatientInfo();
}
});
function initializeFormValidation() {
// Bootstrap validation
(function() {
'use strict';
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
}
function toggleContrastFields() {
var contrastRequired = $('#{{ form.contrast_required.id_for_label }}').is(':checked');
if (contrastRequired) {
$('#contrastTypeDiv, #contrastAmountDiv, #contrastRouteDiv, #contrastWarnings').show();
$('#{{ form.contrast_type.id_for_label }}, #{{ form.contrast_amount.id_for_label }}').prop('required', true);
} else {
$('#contrastTypeDiv, #contrastAmountDiv, #contrastRouteDiv, #contrastWarnings').hide();
$('#{{ form.contrast_type.id_for_label }}, #{{ form.contrast_amount.id_for_label }}').prop('required', false);
}
}
function loadPatientInfo() {
var patientId = $('#{{ form.patient.id_for_label }}').val();
if (patientId) {
$.ajax({
url: '{% url "patients:patient_info_ajax" %}',
data: {'patient_id': patientId},
success: function(response) {
$('#patientInfoContent').html(response.html);
$('#patientInfo').show();
// Auto-fill weight if available
if (response.weight) {
$('#{{ form.weight.id_for_label }}').val(response.weight);
}
// Show pregnancy warning if applicable
if (response.is_female && response.age >= 12 && response.age <= 55) {
showPregnancyWarning();
}
},
error: function() {
toastr.error('Failed to load patient information');
}
});
} else {
$('#patientInfo').hide();
}
}
function updateEquipmentOptions() {
var modality = $('#{{ form.modality.id_for_label }}').val();
if (modality) {
$.ajax({
url: '{% url "radiology:equipment_by_modality" %}',
data: {'modality': modality},
success: function(response) {
var equipmentSelect = $('#{{ form.equipment.id_for_label }}');
equipmentSelect.empty();
equipmentSelect.append('<option value="">---------</option>');
$.each(response.equipment, function(index, item) {
var status = item.status === 'available' ? '' : ' (Unavailable)';
equipmentSelect.append('<option value="' + item.id + '">' + item.name + status + '</option>');
});
},
error: function() {
toastr.error('Failed to load equipment options');
}
});
}
}
function searchPatient() {
$('#patientSearchModal').modal('show');
// Load patient search form via AJAX
}
function loadTemplate(templateType) {
$.ajax({
url: '{% url "radiology:order_template" %}',
data: {'template': templateType},
success: function(response) {
// Fill form fields with template data
if (response.study_type) $('#{{ form.study_type.id_for_label }}').val(response.study_type);
if (response.modality) $('#{{ form.modality.id_for_label }}').val(response.modality);
if (response.body_part) $('#{{ form.body_part.id_for_label }}').val(response.body_part);
if (response.clinical_indication) $('#{{ form.clinical_indication.id_for_label }}').val(response.clinical_indication);
if (response.special_instructions) $('#{{ form.special_instructions.id_for_label }}').val(response.special_instructions);
// Update equipment options based on modality
updateEquipmentOptions();
toastr.success('Template loaded successfully');
},
error: function() {
toastr.error('Failed to load template');
}
});
}
function saveDraft() {
var formData = $('#orderForm').serialize();
formData += '&is_draft=true';
$.ajax({
url: $('#orderForm').attr('action') || '{% url "radiology:imaging_order_create" %}',
method: 'POST',
data: formData,
success: function(response) {
if (response.success) {
toastr.success('Draft saved successfully');
if (response.order_id && !$('#orderForm').data('order-id')) {
$('#orderForm').data('order-id', response.order_id);
// Update form action for future saves
$('#orderForm').attr('action', '{% url "radiology:imaging_order_edit" 0 %}'.replace('0', response.order_id));
}
} else {
toastr.error('Failed to save draft');
}
},
error: function() {
toastr.error('Failed to save draft');
}
});
}
function autoSave() {
// Only auto-save if form has been modified
if ($('#orderForm').data('modified')) {
saveDraft();
$('#orderForm').data('modified', false);
}
}
function showPregnancyWarning() {
if (!$('#pregnancyWarning').length) {
var warning = '<div id="pregnancyWarning" class="alert alert-warning mt-3">' +
'<h6 class="alert-heading"><i class="fa fa-exclamation-triangle me-2"></i>Pregnancy Screening Required</h6>' +
'<p class="mb-0">Patient is female of childbearing age. Please verify pregnancy status before proceeding with imaging.</p>' +
'</div>';
$('#patientInfoContent').append(warning);
}
}
// Track form modifications
$('#orderForm input, #orderForm select, #orderForm textarea').on('change input', function() {
$('#orderForm').data('modified', true);
});
// Form submission
$('#orderForm').on('submit', function(e) {
e.preventDefault();
// Validate safety checklist
var safetyChecks = ['#metalScreening', '#allergiesReviewed', '#consentObtained'];
var allChecked = true;
safetyChecks.forEach(function(check) {
if (!$(check).is(':checked')) {
allChecked = false;
}
});
if (!allChecked) {
toastr.error('Please complete all safety checklist items');
return;
}
// Submit form
this.submit();
});
</script>
{% endblock %}