400 lines
22 KiB
HTML
400 lines
22 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Start 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>Start Surgical Case</h4>
|
|
<h6>Initialize surgical case and begin procedure 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 Details</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<form method="post" id="startCaseForm">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="case_id" value="{{ surgical_case.case_id }}">
|
|
|
|
<!-- Patient Information -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<h6 class="text-primary">Patient Information</h6>
|
|
<hr>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Patient Name</label>
|
|
<input type="text" class="form-control" value="{{ surgical_case.patient.get_full_name }}" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="mb-3">
|
|
<label class="form-label">MRN</label>
|
|
<input type="text" class="form-control" value="{{ surgical_case.patient.medical_record_number }}" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="mb-3">
|
|
<label class="form-label">Age</label>
|
|
<input type="text" class="form-control" value="{{ surgical_case.patient.age }} years" readonly>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Procedure Information -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<h6 class="text-primary">Procedure Information</h6>
|
|
<hr>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<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-4">
|
|
<div class="mb-3">
|
|
<label class="form-label">Procedure Code</label>
|
|
<input type="text" class="form-control" value="{{ surgical_case.procedure_code }}" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Primary Surgeon</label>
|
|
<input type="text" class="form-control" value="{{ surgical_case.primary_surgeon.get_full_name }}" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Operating Room</label>
|
|
<input type="text" class="form-control" value="{{ surgical_case.operating_room.room_number }}" readonly>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Start Case Details -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<h6 class="text-primary">Case Start Information</h6>
|
|
<hr>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Actual Start Time *</label>
|
|
<input type="datetime-local" name="actual_start_time" class="form-control" required>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Anesthesia Type *</label>
|
|
<select name="anesthesia_type" class="form-select" required>
|
|
<option value="">Select Anesthesia Type</option>
|
|
<option value="general">General Anesthesia</option>
|
|
<option value="regional">Regional Anesthesia</option>
|
|
<option value="local">Local Anesthesia</option>
|
|
<option value="sedation">Conscious Sedation</option>
|
|
<option value="mac">Monitored Anesthesia Care</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Anesthesiologist</label>
|
|
<select name="anesthesiologist" class="form-select">
|
|
<option value="">Select Anesthesiologist</option>
|
|
{% for doctor in anesthesiologists %}
|
|
<option value="{{ doctor.id }}">{{ doctor.get_full_name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Patient Position *</label>
|
|
<select name="patient_position" class="form-select" required>
|
|
<option value="">Select Position</option>
|
|
<option value="supine">Supine</option>
|
|
<option value="prone">Prone</option>
|
|
<option value="lateral">Lateral</option>
|
|
<option value="lithotomy">Lithotomy</option>
|
|
<option value="trendelenburg">Trendelenburg</option>
|
|
<option value="reverse_trendelenburg">Reverse Trendelenburg</option>
|
|
<option value="sitting">Sitting</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Team Members -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<h6 class="text-primary">Surgical Team</h6>
|
|
<hr>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Scrub Nurse</label>
|
|
<select name="scrub_nurse" class="form-select">
|
|
<option value="">Select Scrub Nurse</option>
|
|
{% for nurse in scrub_nurses %}
|
|
<option value="{{ nurse.id }}">{{ nurse.get_full_name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label class="form-label">Circulating Nurse</label>
|
|
<select name="circulating_nurse" class="form-select">
|
|
<option value="">Select Circulating Nurse</option>
|
|
{% for nurse in circulating_nurses %}
|
|
<option value="{{ nurse.id }}">{{ nurse.get_full_name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="mb-3">
|
|
<label class="form-label">Additional Team Members</label>
|
|
<select name="additional_team_members" class="form-select" multiple>
|
|
{% for member in available_team_members %}
|
|
<option value="{{ member.id }}">{{ member.get_full_name }} - {{ member.role }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<div class="form-text">Hold Ctrl/Cmd to select multiple members</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pre-operative Checklist -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<h6 class="text-primary">Pre-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_patient_identity" id="checkPatientId" required>
|
|
<label class="form-check-label" for="checkPatientId">
|
|
Patient identity verified
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" name="checklist_procedure_verified" id="checkProcedure" required>
|
|
<label class="form-check-label" for="checkProcedure">
|
|
Procedure and site verified
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" name="checklist_consent_obtained" id="checkConsent" required>
|
|
<label class="form-check-label" for="checkConsent">
|
|
Informed consent obtained
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" name="checklist_allergies_reviewed" id="checkAllergies" required>
|
|
<label class="form-check-label" for="checkAllergies">
|
|
Allergies reviewed
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" name="checklist_equipment_ready" id="checkEquipment" required>
|
|
<label class="form-check-label" for="checkEquipment">
|
|
Equipment ready and functional
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" name="checklist_antibiotics_given" id="checkAntibiotics">
|
|
<label class="form-check-label" for="checkAntibiotics">
|
|
Prophylactic antibiotics given (if applicable)
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" name="checklist_timeout_completed" id="checkTimeout" required>
|
|
<label class="form-check-label" for="checkTimeout">
|
|
Surgical timeout completed
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" name="checklist_fire_safety" id="checkFireSafety" required>
|
|
<label class="form-check-label" for="checkFireSafety">
|
|
Fire safety precautions in place
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notes -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="mb-3">
|
|
<label class="form-label">Pre-operative Notes</label>
|
|
<textarea name="preop_notes" class="form-control" rows="4" placeholder="Enter any pre-operative observations or 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>
|
|
<button type="submit" class="btn btn-success btn-lg">
|
|
<i class="fa fa-play"></i> Start Surgical Case
|
|
</button>
|
|
</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 Summary</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>Scheduled Time:</strong><br>
|
|
{{ surgical_case.scheduled_start_time|date:"M d, Y H:i" }}
|
|
</div>
|
|
<div class="mb-3">
|
|
<strong>Estimated Duration:</strong><br>
|
|
{{ surgical_case.estimated_duration }} minutes
|
|
</div>
|
|
<div class="mb-3">
|
|
<strong>Priority:</strong><br>
|
|
<span class="badge bg-{{ surgical_case.priority_color }}">{{ surgical_case.priority|title }}</span>
|
|
</div>
|
|
<div class="mb-3">
|
|
<strong>Current Status:</strong><br>
|
|
<span class="badge bg-warning">{{ surgical_case.status|title }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Equipment Status -->
|
|
<div class="card mt-3">
|
|
<div class="card-header">
|
|
<h5 class="card-title">Equipment Status</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
{% for equipment in required_equipment %}
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<span>{{ equipment.name }}</span>
|
|
<span class="badge bg-{{ equipment.status_color }}">{{ equipment.status|title }}</span>
|
|
</div>
|
|
{% empty %}
|
|
<p class="text-muted">No specific equipment requirements</p>
|
|
{% endfor %}
|
|
</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 Patient Chart
|
|
</a>
|
|
<a href="#" class="btn btn-outline-info btn-sm">
|
|
<i class="fa fa-image"></i> View Imaging
|
|
</a>
|
|
<a href="#" class="btn btn-outline-warning btn-sm">
|
|
<i class="fa fa-flask"></i> View Lab Results
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Set current time as default start time
|
|
const now = new Date();
|
|
const localDateTime = new Date(now.getTime() - now.getTimezoneOffset() * 60000).toISOString().slice(0, 16);
|
|
document.querySelector('input[name="actual_start_time"]').value = localDateTime;
|
|
|
|
// Form validation
|
|
const form = document.getElementById('startCaseForm');
|
|
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 starting the case.');
|
|
return false;
|
|
}
|
|
|
|
// Confirm case start
|
|
if (!confirm('Are you sure you want to start this surgical case? This action cannot be undone.')) {
|
|
e.preventDefault();
|
|
return false;
|
|
}
|
|
});
|
|
|
|
// 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');
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|