490 lines
26 KiB
HTML
490 lines
26 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Complete Surgical Case - Operating Theatre{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="content">
|
|
<div class="container-fluid">
|
|
<!-- Page Header -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="page-header">
|
|
<div class="page-title">
|
|
<h4>Complete Surgical Case</h4>
|
|
<h6>Finalize surgical case and complete documentation</h6>
|
|
</div>
|
|
<div class="page-btn">
|
|
<a href="{% url 'operating_theatre:surgical_case_list' %}" class="btn btn-secondary">
|
|
<i class="fa fa-arrow-left"></i> Back to Cases
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Case Information -->
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">Case Completion Details</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<form method="post" id="completeCaseForm">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="case_id" value="{{ surgical_case.case_id }}">
|
|
|
|
<!-- Case Summary -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<h6 class="text-primary">Case Summary</h6>
|
|
<hr>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Patient</label>
|
|
<input type="text" class="form-control" value="{{ surgical_case.patient.get_full_name }}" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Procedure</label>
|
|
<input type="text" class="form-control" value="{{ surgical_case.procedure_name }}" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Start Time</label>
|
|
<input type="text" class="form-control" value="{{ surgical_case.actual_start_time|date:'M d, Y H:i' }}" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Duration So Far</label>
|
|
<input type="text" class="form-control" value="{{ case_duration }} minutes" readonly>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Completion Details -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<h6 class="text-primary">Completion Information</h6>
|
|
<hr>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Actual End Time *</label>
|
|
<input type="datetime-local" name="actual_end_time" class="form-control" required>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Case Status *</label>
|
|
<select name="case_status" class="form-select" required>
|
|
<option value="">Select Status</option>
|
|
<option value="completed">Completed Successfully</option>
|
|
<option value="cancelled">Cancelled</option>
|
|
<option value="aborted">Aborted</option>
|
|
<option value="converted">Converted to Open</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Primary Procedure Performed</label>
|
|
<input type="text" name="primary_procedure" class="form-control" value="{{ surgical_case.procedure_name }}">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Secondary Procedures</label>
|
|
<input type="text" name="secondary_procedures" class="form-control" placeholder="Additional procedures performed">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Procedure Outcomes -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<h6 class="text-primary">Procedure Outcomes</h6>
|
|
<hr>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Estimated Blood Loss (mL)</label>
|
|
<input type="number" name="estimated_blood_loss" class="form-control" min="0">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Fluid Balance (mL)</label>
|
|
<input type="number" name="fluid_balance" class="form-control">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Complications</label>
|
|
<select name="complications" class="form-select">
|
|
<option value="none">None</option>
|
|
<option value="minor">Minor Complications</option>
|
|
<option value="major">Major Complications</option>
|
|
<option value="life_threatening">Life-threatening</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Patient Condition</label>
|
|
<select name="patient_condition" class="form-select" required>
|
|
<option value="">Select Condition</option>
|
|
<option value="stable">Stable</option>
|
|
<option value="critical">Critical</option>
|
|
<option value="unstable">Unstable</option>
|
|
<option value="deceased">Deceased</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Specimens and Implants -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<h6 class="text-primary">Specimens and Implants</h6>
|
|
<hr>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Specimens Collected</label>
|
|
<textarea name="specimens_collected" class="form-control" rows="3" placeholder="List all specimens sent to pathology..."></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Implants Used</label>
|
|
<textarea name="implants_used" class="form-control" rows="3" placeholder="List all implants, devices, or foreign materials..."></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Post-operative Orders -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<h6 class="text-primary">Post-operative Orders</h6>
|
|
<hr>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Recovery Location *</label>
|
|
<select name="recovery_location" class="form-select" required>
|
|
<option value="">Select Location</option>
|
|
<option value="pacu">PACU</option>
|
|
<option value="icu">ICU</option>
|
|
<option value="ward">General Ward</option>
|
|
<option value="discharge">Direct Discharge</option>
|
|
<option value="morgue">Morgue</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Pain Management</label>
|
|
<select name="pain_management" class="form-select">
|
|
<option value="">Select Pain Management</option>
|
|
<option value="oral">Oral Medications</option>
|
|
<option value="iv">IV Medications</option>
|
|
<option value="pca">PCA Pump</option>
|
|
<option value="epidural">Epidural</option>
|
|
<option value="nerve_block">Nerve Block</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="mb-3">
|
|
<label class="form-label">Post-operative Instructions</label>
|
|
<textarea name="postop_instructions" class="form-control" rows="4" placeholder="Detailed post-operative care instructions..."></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Post-operative Checklist -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<h6 class="text-primary">Post-operative Checklist</h6>
|
|
<hr>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" name="checklist_counts_correct" id="checkCounts" required>
|
|
<label class="form-check-label" for="checkCounts">
|
|
Instrument and sponge counts correct
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" name="checklist_specimens_labeled" id="checkSpecimens" required>
|
|
<label class="form-check-label" for="checkSpecimens">
|
|
Specimens properly labeled and sent
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" name="checklist_equipment_removed" id="checkEquipment" required>
|
|
<label class="form-check-label" for="checkEquipment">
|
|
All equipment removed from patient
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" name="checklist_dressing_applied" id="checkDressing" required>
|
|
<label class="form-check-label" for="checkDressing">
|
|
Appropriate dressing applied
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" name="checklist_patient_stable" id="checkStable" required>
|
|
<label class="form-check-label" for="checkStable">
|
|
Patient hemodynamically stable
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" name="checklist_orders_written" id="checkOrders" required>
|
|
<label class="form-check-label" for="checkOrders">
|
|
Post-operative orders written
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" name="checklist_family_notified" id="checkFamily">
|
|
<label class="form-check-label" for="checkFamily">
|
|
Family notified of completion
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" name="checklist_documentation_complete" id="checkDocs" required>
|
|
<label class="form-check-label" for="checkDocs">
|
|
All documentation complete
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Final Notes -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="mb-3">
|
|
<label class="form-label">Final Operative Notes</label>
|
|
<textarea name="final_notes" class="form-control" rows="5" placeholder="Final observations, complications, or special notes..."></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="d-flex justify-content-between">
|
|
<button type="button" class="btn btn-secondary" onclick="history.back()">
|
|
<i class="fa fa-times"></i> Cancel
|
|
</button>
|
|
<div>
|
|
<button type="button" class="btn btn-warning me-2" id="saveProgressBtn">
|
|
<i class="fa fa-save"></i> Save Progress
|
|
</button>
|
|
<button type="submit" class="btn btn-success btn-lg">
|
|
<i class="fa fa-check"></i> Complete Case
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Case Summary Sidebar -->
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">Case Information</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<strong>Case ID:</strong><br>
|
|
<span class="text-primary">{{ surgical_case.case_id }}</span>
|
|
</div>
|
|
<div class="mb-3">
|
|
<strong>Operating Room:</strong><br>
|
|
{{ surgical_case.operating_room.room_number }}
|
|
</div>
|
|
<div class="mb-3">
|
|
<strong>Primary Surgeon:</strong><br>
|
|
{{ surgical_case.primary_surgeon.get_full_name }}
|
|
</div>
|
|
<div class="mb-3">
|
|
<strong>Anesthesiologist:</strong><br>
|
|
{{ surgical_case.anesthesiologist.get_full_name|default:"Not assigned" }}
|
|
</div>
|
|
<div class="mb-3">
|
|
<strong>Current Status:</strong><br>
|
|
<span class="badge bg-info">{{ surgical_case.status|title }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Team Members -->
|
|
<div class="card mt-3">
|
|
<div class="card-header">
|
|
<h5 class="card-title">Surgical Team</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
{% for member in surgical_team %}
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<span>{{ member.name }}</span>
|
|
<span class="badge bg-secondary">{{ member.role }}</span>
|
|
</div>
|
|
{% empty %}
|
|
<p class="text-muted">No team members assigned</p>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Time Tracking -->
|
|
<div class="card mt-3">
|
|
<div class="card-header">
|
|
<h5 class="card-title">Time Tracking</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-2">
|
|
<strong>Scheduled:</strong><br>
|
|
<small>{{ surgical_case.scheduled_start_time|date:"H:i" }} - {{ surgical_case.scheduled_end_time|date:"H:i" }}</small>
|
|
</div>
|
|
<div class="mb-2">
|
|
<strong>Actual Start:</strong><br>
|
|
<small>{{ surgical_case.actual_start_time|date:"H:i" }}</small>
|
|
</div>
|
|
<div class="mb-2">
|
|
<strong>Current Duration:</strong><br>
|
|
<small class="text-primary">{{ case_duration }} minutes</small>
|
|
</div>
|
|
<div class="mb-2">
|
|
<strong>Estimated Remaining:</strong><br>
|
|
<small>{{ estimated_remaining }} minutes</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="card mt-3">
|
|
<div class="card-header">
|
|
<h5 class="card-title">Quick Actions</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-grid gap-2">
|
|
<a href="#" class="btn btn-outline-primary btn-sm">
|
|
<i class="fa fa-file-text"></i> View Operative Note
|
|
</a>
|
|
<a href="#" class="btn btn-outline-info btn-sm">
|
|
<i class="fa fa-print"></i> Print Case Summary
|
|
</a>
|
|
<a href="#" class="btn btn-outline-warning btn-sm">
|
|
<i class="fa fa-phone"></i> Contact Recovery
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Set current time as default end time
|
|
const now = new Date();
|
|
const localDateTime = new Date(now.getTime() - now.getTimezoneOffset() * 60000).toISOString().slice(0, 16);
|
|
document.querySelector('input[name="actual_end_time"]').value = localDateTime;
|
|
|
|
// Form validation
|
|
const form = document.getElementById('completeCaseForm');
|
|
form.addEventListener('submit', function(e) {
|
|
const requiredCheckboxes = document.querySelectorAll('input[type="checkbox"][required]');
|
|
let allChecked = true;
|
|
|
|
requiredCheckboxes.forEach(checkbox => {
|
|
if (!checkbox.checked) {
|
|
allChecked = false;
|
|
checkbox.closest('.form-check').classList.add('text-danger');
|
|
} else {
|
|
checkbox.closest('.form-check').classList.remove('text-danger');
|
|
}
|
|
});
|
|
|
|
if (!allChecked) {
|
|
e.preventDefault();
|
|
alert('Please complete all required checklist items before completing the case.');
|
|
return false;
|
|
}
|
|
|
|
// Confirm case completion
|
|
if (!confirm('Are you sure you want to complete this surgical case? This action cannot be undone.')) {
|
|
e.preventDefault();
|
|
return false;
|
|
}
|
|
});
|
|
|
|
// Save progress functionality
|
|
document.getElementById('saveProgressBtn').addEventListener('click', function() {
|
|
const formData = new FormData(form);
|
|
formData.append('save_progress', 'true');
|
|
|
|
fetch(form.action, {
|
|
method: 'POST',
|
|
body: formData,
|
|
headers: {
|
|
'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
alert('Progress saved successfully!');
|
|
} else {
|
|
alert('Error saving progress: ' + data.message);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('Error saving progress');
|
|
});
|
|
});
|
|
|
|
// Real-time checklist validation
|
|
const checkboxes = document.querySelectorAll('input[type="checkbox"][required]');
|
|
checkboxes.forEach(checkbox => {
|
|
checkbox.addEventListener('change', function() {
|
|
if (this.checked) {
|
|
this.closest('.form-check').classList.remove('text-danger');
|
|
this.closest('.form-check').classList.add('text-success');
|
|
} else {
|
|
this.closest('.form-check').classList.remove('text-success');
|
|
}
|
|
});
|
|
});
|
|
|
|
// Auto-calculate duration
|
|
const startTime = new Date('{{ surgical_case.actual_start_time|date:"c" }}');
|
|
const endTimeInput = document.querySelector('input[name="actual_end_time"]');
|
|
|
|
endTimeInput.addEventListener('change', function() {
|
|
const endTime = new Date(this.value);
|
|
const duration = Math.round((endTime - startTime) / (1000 * 60));
|
|
|
|
if (duration > 0) {
|
|
console.log(`Case duration: ${duration} minutes`);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|