650 lines
22 KiB
HTML
650 lines
22 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Surgical Note - {{ note.patient.get_full_name }}{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
.note-header {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
border-radius: 0.5rem;
|
|
padding: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.note-section {
|
|
background: white;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 0.375rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.section-header {
|
|
background: #f8f9fa;
|
|
border-bottom: 1px solid #dee2e6;
|
|
padding: 1rem 1.5rem;
|
|
font-weight: 600;
|
|
color: #495057;
|
|
}
|
|
|
|
.section-content {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.info-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.info-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.info-label {
|
|
font-size: 0.875rem;
|
|
color: #6c757d;
|
|
font-weight: 600;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.info-value {
|
|
color: #495057;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.note-status {
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 0.25rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
display: inline-block;
|
|
}
|
|
|
|
.status-draft { background: #f8f9fa; color: #6c757d; }
|
|
.status-in-progress { background: #fff3cd; color: #856404; }
|
|
.status-completed { background: #d4edda; color: #155724; }
|
|
.status-signed { background: #d1ecf1; color: #0c5460; }
|
|
.status-amended { background: #f8d7da; color: #721c24; }
|
|
|
|
.priority-badge {
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 0.25rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
display: inline-block;
|
|
}
|
|
|
|
.priority-low { background: #d4edda; color: #155724; }
|
|
.priority-medium { background: #fff3cd; color: #856404; }
|
|
.priority-high { background: #f8d7da; color: #721c24; }
|
|
.priority-critical { background: #f5c6cb; color: #721c24; }
|
|
|
|
.signature-section {
|
|
background: #f8f9fa;
|
|
border: 2px dashed #dee2e6;
|
|
border-radius: 0.375rem;
|
|
padding: 2rem;
|
|
text-align: center;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.signature-box {
|
|
background: white;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 0.25rem;
|
|
padding: 1rem;
|
|
margin: 1rem 0;
|
|
min-height: 100px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.timeline {
|
|
position: relative;
|
|
padding-left: 2rem;
|
|
}
|
|
|
|
.timeline-item {
|
|
position: relative;
|
|
padding-bottom: 1.5rem;
|
|
}
|
|
|
|
.timeline-item:before {
|
|
content: '';
|
|
position: absolute;
|
|
left: -2rem;
|
|
top: 0;
|
|
width: 2px;
|
|
height: 100%;
|
|
background: #dee2e6;
|
|
}
|
|
|
|
.timeline-item:last-child:before {
|
|
display: none;
|
|
}
|
|
|
|
.timeline-marker {
|
|
position: absolute;
|
|
left: -2.5rem;
|
|
top: 0.25rem;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border-radius: 50%;
|
|
background: #007bff;
|
|
border: 2px solid white;
|
|
box-shadow: 0 0 0 2px #dee2e6;
|
|
}
|
|
|
|
.timeline-content {
|
|
background: white;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 0.25rem;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.print-section {
|
|
background: #e7f3ff;
|
|
border: 1px solid #b3d9ff;
|
|
border-radius: 0.375rem;
|
|
padding: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
@media print {
|
|
.no-print {
|
|
display: none !important;
|
|
}
|
|
|
|
.note-header {
|
|
background: #f8f9fa !important;
|
|
color: #495057 !important;
|
|
border: 1px solid #dee2e6 !important;
|
|
}
|
|
|
|
.section-header {
|
|
background: #f8f9fa !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.note-header {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.info-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.timeline {
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
.timeline-item:before {
|
|
left: -1rem;
|
|
}
|
|
|
|
.timeline-marker {
|
|
left: -1.5rem;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div id="content" class="app-content">
|
|
<!-- Page Header -->
|
|
<div class="d-flex align-items-center mb-3 no-print">
|
|
<div>
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'operating_theatre:dashboard' %}">Operating Theatre</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'operating_theatre:surgical_note_list' %}">Surgical Notes</a></li>
|
|
<li class="breadcrumb-item active">{{ note.patient.get_full_name }}</li>
|
|
</ol>
|
|
<h1 class="page-header mb-0">
|
|
<i class="fas fa-file-medical me-2"></i>Surgical Note Details
|
|
</h1>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<div class="btn-group">
|
|
<a href="{% url 'operating_theatre:surgical_note_list' %}" class="btn btn-outline-secondary">
|
|
<i class="fas fa-arrow-left me-1"></i>Back to List
|
|
</a>
|
|
{% if note.status != 'signed' %}
|
|
<a href="{% url 'operating_theatre:surgical_note_edit' note.pk %}" class="btn btn-warning">
|
|
<i class="fas fa-edit me-1"></i>Edit
|
|
</a>
|
|
{% endif %}
|
|
<button class="btn btn-success" onclick="printNote()">
|
|
<i class="fas fa-print me-1"></i>Print
|
|
</button>
|
|
<div class="btn-group">
|
|
<button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
|
|
<i class="fas fa-cog me-1"></i>Actions
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#" onclick="exportNote('pdf')">
|
|
<i class="fas fa-file-pdf me-2"></i>Export as PDF
|
|
</a></li>
|
|
<li><a class="dropdown-item" href="#" onclick="exportNote('word')">
|
|
<i class="fas fa-file-word me-2"></i>Export as Word
|
|
</a></li>
|
|
<li><hr class="dropdown-divider"></li>
|
|
{% if note.status == 'completed' and not note.is_signed %}
|
|
<li><a class="dropdown-item" href="#" onclick="signNote()">
|
|
<i class="fas fa-signature me-2"></i>Sign Note
|
|
</a></li>
|
|
{% endif %}
|
|
{% if note.status == 'signed' %}
|
|
<li><a class="dropdown-item" href="#" onclick="amendNote()">
|
|
<i class="fas fa-edit me-2"></i>Create Amendment
|
|
</a></li>
|
|
{% endif %}
|
|
<li><a class="dropdown-item" href="#" onclick="duplicateNote()">
|
|
<i class="fas fa-copy me-2"></i>Duplicate Note
|
|
</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Note Header -->
|
|
<div class="note-header">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<h2 class="mb-3">{{ note.procedure_name }}</h2>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<p class="mb-1"><strong>Patient:</strong> {{ note.patient.get_full_name }}</p>
|
|
<p class="mb-1"><strong>Patient ID:</strong> {{ note.patient.patient_id }}</p>
|
|
<p class="mb-1"><strong>Date of Birth:</strong> {{ note.patient.date_of_birth|date:"M d, Y" }}</p>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<p class="mb-1"><strong>Surgery Date:</strong> {{ note.surgery_date|date:"M d, Y" }}</p>
|
|
<p class="mb-1"><strong>Surgeon:</strong> {{ note.surgeon.get_full_name }}</p>
|
|
<p class="mb-1"><strong>Operating Room:</strong> {{ note.operating_room.name }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 text-end">
|
|
<div class="mb-3">
|
|
<span class="note-status status-{{ note.status }}">
|
|
{{ note.get_status_display }}
|
|
</span>
|
|
</div>
|
|
<div class="mb-2">
|
|
<span class="priority-badge priority-{{ note.priority }}">
|
|
{{ note.get_priority_display }} Priority
|
|
</span>
|
|
</div>
|
|
<p class="mb-0"><small>Note ID: {{ note.id }}</small></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pre-operative Information -->
|
|
<div class="note-section">
|
|
<div class="section-header">
|
|
<i class="fas fa-clipboard-list me-2"></i>Pre-operative Information
|
|
</div>
|
|
<div class="section-content">
|
|
<div class="info-grid">
|
|
<div class="info-item">
|
|
<div class="info-label">Pre-operative Diagnosis</div>
|
|
<div class="info-value">{{ note.preoperative_diagnosis|default:"Not specified" }}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">Planned Procedure</div>
|
|
<div class="info-value">{{ note.planned_procedure|default:"Not specified" }}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">Anesthesia Type</div>
|
|
<div class="info-value">{{ note.get_anesthesia_type_display|default:"Not specified" }}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">ASA Classification</div>
|
|
<div class="info-value">{{ note.asa_classification|default:"Not specified" }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if note.preoperative_notes %}
|
|
<div class="mt-3">
|
|
<div class="info-label">Pre-operative Notes</div>
|
|
<div class="info-value">{{ note.preoperative_notes|linebreaks }}</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Operative Procedure -->
|
|
<div class="note-section">
|
|
<div class="section-header">
|
|
<i class="fas fa-procedures me-2"></i>Operative Procedure
|
|
</div>
|
|
<div class="section-content">
|
|
<div class="info-grid">
|
|
<div class="info-item">
|
|
<div class="info-label">Actual Procedure</div>
|
|
<div class="info-value">{{ note.actual_procedure|default:"Not specified" }}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">Procedure Duration</div>
|
|
<div class="info-value">{{ note.procedure_duration|default:"Not specified" }}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">Incision Type</div>
|
|
<div class="info-value">{{ note.incision_type|default:"Not specified" }}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">Closure Method</div>
|
|
<div class="info-value">{{ note.closure_method|default:"Not specified" }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if note.operative_findings %}
|
|
<div class="mt-3">
|
|
<div class="info-label">Operative Findings</div>
|
|
<div class="info-value">{{ note.operative_findings|linebreaks }}</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if note.procedure_description %}
|
|
<div class="mt-3">
|
|
<div class="info-label">Detailed Procedure Description</div>
|
|
<div class="info-value">{{ note.procedure_description|linebreaks }}</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Post-operative Information -->
|
|
<div class="note-section">
|
|
<div class="section-header">
|
|
<i class="fas fa-heartbeat me-2"></i>Post-operative Information
|
|
</div>
|
|
<div class="section-content">
|
|
<div class="info-grid">
|
|
<div class="info-item">
|
|
<div class="info-label">Post-operative Diagnosis</div>
|
|
<div class="info-value">{{ note.postoperative_diagnosis|default:"Not specified" }}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">Estimated Blood Loss</div>
|
|
<div class="info-value">{{ note.estimated_blood_loss|default:"Not specified" }}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">Complications</div>
|
|
<div class="info-value">{{ note.complications|default:"None reported" }}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">Condition at End</div>
|
|
<div class="info-value">{{ note.condition_at_end|default:"Not specified" }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if note.postoperative_instructions %}
|
|
<div class="mt-3">
|
|
<div class="info-label">Post-operative Instructions</div>
|
|
<div class="info-value">{{ note.postoperative_instructions|linebreaks }}</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Surgical Team -->
|
|
<div class="note-section">
|
|
<div class="section-header">
|
|
<i class="fas fa-users me-2"></i>Surgical Team
|
|
</div>
|
|
<div class="section-content">
|
|
<div class="info-grid">
|
|
<div class="info-item">
|
|
<div class="info-label">Primary Surgeon</div>
|
|
<div class="info-value">{{ note.surgeon.get_full_name }}</div>
|
|
</div>
|
|
{% if note.assistant_surgeon %}
|
|
<div class="info-item">
|
|
<div class="info-label">Assistant Surgeon</div>
|
|
<div class="info-value">{{ note.assistant_surgeon.get_full_name }}</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if note.anesthesiologist %}
|
|
<div class="info-item">
|
|
<div class="info-label">Anesthesiologist</div>
|
|
<div class="info-value">{{ note.anesthesiologist.get_full_name }}</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if note.scrub_nurse %}
|
|
<div class="info-item">
|
|
<div class="info-label">Scrub Nurse</div>
|
|
<div class="info-value">{{ note.scrub_nurse.get_full_name }}</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Revision History -->
|
|
{% if note.revisions.exists %}
|
|
<div class="note-section">
|
|
<div class="section-header">
|
|
<i class="fas fa-history me-2"></i>Revision History
|
|
</div>
|
|
<div class="section-content">
|
|
<div class="timeline">
|
|
{% for revision in note.revisions.all %}
|
|
<div class="timeline-item">
|
|
<div class="timeline-marker"></div>
|
|
<div class="timeline-content">
|
|
<div class="d-flex justify-content-between align-items-start mb-2">
|
|
<h6 class="mb-0">{{ revision.get_action_display }}</h6>
|
|
<small class="text-muted">{{ revision.created_at|date:"M d, Y g:i A" }}</small>
|
|
</div>
|
|
<p class="mb-1"><strong>By:</strong> {{ revision.created_by.get_full_name }}</p>
|
|
{% if revision.reason %}
|
|
<p class="mb-0"><strong>Reason:</strong> {{ revision.reason }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Electronic Signature -->
|
|
{% if note.status == 'signed' %}
|
|
<div class="note-section">
|
|
<div class="section-header">
|
|
<i class="fas fa-signature me-2"></i>Electronic Signature
|
|
</div>
|
|
<div class="section-content">
|
|
<div class="signature-box">
|
|
<div class="text-center">
|
|
<i class="fas fa-certificate fa-3x text-success mb-3"></i>
|
|
<h5 class="text-success">Electronically Signed</h5>
|
|
<p class="mb-1"><strong>Signed by:</strong> {{ note.signed_by.get_full_name }}</p>
|
|
<p class="mb-1"><strong>Date:</strong> {{ note.signed_at|date:"M d, Y g:i A" }}</p>
|
|
<p class="mb-0"><strong>IP Address:</strong> {{ note.signature_ip|default:"Not recorded" }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% elif note.status == 'completed' %}
|
|
<div class="signature-section no-print">
|
|
<h5 class="mb-3">
|
|
<i class="fas fa-signature me-2"></i>Electronic Signature Required
|
|
</h5>
|
|
<p class="text-muted mb-3">This note is complete and ready for electronic signature.</p>
|
|
<button class="btn btn-primary btn-lg" onclick="signNote()">
|
|
<i class="fas fa-signature me-2"></i>Sign Note
|
|
</button>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Sign Note Modal -->
|
|
<div class="modal fade" id="signNoteModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">
|
|
<i class="fas fa-signature me-2"></i>Electronic Signature
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="alert alert-info">
|
|
<i class="fas fa-info-circle me-2"></i>
|
|
By signing this note, you confirm that all information is accurate and complete.
|
|
</div>
|
|
|
|
<form id="signatureForm">
|
|
{% csrf_token %}
|
|
<div class="mb-3">
|
|
<label class="form-label">Password Confirmation</label>
|
|
<input type="password" class="form-control" name="password" required
|
|
placeholder="Enter your password to confirm signature">
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Signature Comments (Optional)</label>
|
|
<textarea class="form-control" name="signature_comments" rows="3"
|
|
placeholder="Any additional comments about this signature..."></textarea>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" onclick="submitSignature()">
|
|
<i class="fas fa-signature me-1"></i>Sign Note
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
function printNote() {
|
|
window.print();
|
|
}
|
|
|
|
function exportNote(format) {
|
|
const url = `{% url "operating_theatre:surgical_note_export" note.pk %}?format=${format}`;
|
|
window.open(url, '_blank');
|
|
}
|
|
|
|
function signNote() {
|
|
$('#signNoteModal').modal('show');
|
|
}
|
|
|
|
function submitSignature() {
|
|
const form = document.getElementById('signatureForm');
|
|
const formData = new FormData(form);
|
|
|
|
$.ajax({
|
|
url: '{% url "operating_theatre:surgical_note_sign" note.pk %}',
|
|
method: 'POST',
|
|
data: formData,
|
|
processData: false,
|
|
contentType: false,
|
|
success: function(response) {
|
|
if (response.success) {
|
|
$('#signNoteModal').modal('hide');
|
|
alert('Note signed successfully!');
|
|
location.reload();
|
|
} else {
|
|
alert('Error signing note: ' + response.error);
|
|
}
|
|
},
|
|
error: function() {
|
|
alert('Error signing note');
|
|
}
|
|
});
|
|
}
|
|
|
|
function amendNote() {
|
|
const reason = prompt('Please provide a reason for the amendment:');
|
|
if (reason) {
|
|
$.ajax({
|
|
url: '{% url "operating_theatre:surgical_note_amend" note.pk %}',
|
|
method: 'POST',
|
|
data: {
|
|
'csrfmiddlewaretoken': '{{ csrf_token }}',
|
|
'reason': reason
|
|
},
|
|
success: function(response) {
|
|
if (response.success) {
|
|
alert('Amendment created successfully!');
|
|
window.location.href = response.amendment_url;
|
|
} else {
|
|
alert('Error creating amendment: ' + response.error);
|
|
}
|
|
},
|
|
error: function() {
|
|
alert('Error creating amendment');
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function duplicateNote() {
|
|
if (confirm('Create a duplicate of this note?')) {
|
|
$.ajax({
|
|
url: '{% url "operating_theatre:surgical_note_duplicate" note.pk %}',
|
|
method: 'POST',
|
|
data: {
|
|
'csrfmiddlewaretoken': '{{ csrf_token }}'
|
|
},
|
|
success: function(response) {
|
|
if (response.success) {
|
|
alert('Note duplicated successfully!');
|
|
window.location.href = response.duplicate_url;
|
|
} else {
|
|
alert('Error duplicating note: ' + response.error);
|
|
}
|
|
},
|
|
error: function() {
|
|
alert('Error duplicating note');
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// Keyboard shortcuts
|
|
$(document).keydown(function(e) {
|
|
// Ctrl+P for print
|
|
if (e.ctrlKey && e.keyCode === 80) {
|
|
e.preventDefault();
|
|
printNote();
|
|
}
|
|
|
|
// Ctrl+E for edit (if not signed)
|
|
{% if note.status != 'signed' %}
|
|
if (e.ctrlKey && e.keyCode === 69) {
|
|
e.preventDefault();
|
|
window.location.href = '{% url "operating_theatre:surgical_note_edit" note.pk %}';
|
|
}
|
|
{% endif %}
|
|
|
|
// Ctrl+S for sign (if completed)
|
|
{% if note.status == 'completed' %}
|
|
if (e.ctrlKey && e.keyCode === 83) {
|
|
e.preventDefault();
|
|
signNote();
|
|
}
|
|
{% endif %}
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|