609 lines
20 KiB
HTML
609 lines
20 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Operative 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;
|
|
}
|
|
|
|
.section-card {
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 0.375rem;
|
|
margin-bottom: 1.5rem;
|
|
background: white;
|
|
}
|
|
|
|
.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(250px, 1fr));
|
|
gap: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.info-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.info-label {
|
|
font-weight: 600;
|
|
color: #6c757d;
|
|
font-size: 0.875rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.info-value {
|
|
color: #495057;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.signature-section {
|
|
background: #e8f5e8;
|
|
border: 2px solid #28a745;
|
|
border-radius: 0.375rem;
|
|
padding: 1.5rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.signature-pending {
|
|
background: #fff3cd;
|
|
border: 2px solid #ffc107;
|
|
}
|
|
|
|
.signature-draft {
|
|
background: #f8f9fa;
|
|
border: 2px solid #6c757d;
|
|
}
|
|
|
|
.timeline-item {
|
|
display: flex;
|
|
align-items: start;
|
|
margin-bottom: 1rem;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 1px solid #dee2e6;
|
|
}
|
|
|
|
.timeline-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 1rem;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.timeline-content {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.timeline-time {
|
|
font-size: 0.875rem;
|
|
color: #6c757d;
|
|
}
|
|
|
|
.procedure-details {
|
|
background: #f8f9fa;
|
|
border-radius: 0.375rem;
|
|
padding: 1rem;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.complication-alert {
|
|
background: #f8d7da;
|
|
border: 1px solid #f5c6cb;
|
|
border-radius: 0.375rem;
|
|
padding: 1rem;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.print-section {
|
|
display: none;
|
|
}
|
|
|
|
@media print {
|
|
.no-print {
|
|
display: none !important;
|
|
}
|
|
|
|
.print-section {
|
|
display: block !important;
|
|
}
|
|
|
|
.note-header {
|
|
background: #f8f9fa !important;
|
|
color: #000 !important;
|
|
border: 2px solid #000;
|
|
}
|
|
|
|
.section-card {
|
|
break-inside: avoid;
|
|
margin-bottom: 1rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.note-header {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.info-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.section-content {
|
|
padding: 1rem;
|
|
}
|
|
}
|
|
</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:operative_note_list' %}">Operative 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>Operative Note
|
|
</h1>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<div class="btn-group">
|
|
<button class="btn btn-outline-secondary" onclick="window.print()">
|
|
<i class="fas fa-print me-1"></i>Print
|
|
</button>
|
|
<a href="{% url 'operating_theatre:operative_note_pdf' note.pk %}" class="btn btn-outline-primary">
|
|
<i class="fas fa-file-pdf me-1"></i>PDF
|
|
</a>
|
|
{% if note.status == 'draft' or note.status == 'pending' %}
|
|
<a href="{% url 'operating_theatre:operative_note_edit' note.pk %}" class="btn btn-primary">
|
|
<i class="fas fa-edit me-1"></i>Edit
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Print Header -->
|
|
<div class="print-section">
|
|
<div class="text-center mb-4">
|
|
<h2>{{ hospital.name }}</h2>
|
|
<p>{{ hospital.address }}</p>
|
|
<h3>OPERATIVE NOTE</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Note Header -->
|
|
<div class="note-header">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<h2 class="mb-3">{{ note.patient.get_full_name }}</h2>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="mb-2">
|
|
<strong>Patient ID:</strong> {{ note.patient.patient_id }}
|
|
</div>
|
|
<div class="mb-2">
|
|
<strong>Date of Birth:</strong> {{ note.patient.date_of_birth|date:"M d, Y" }}
|
|
</div>
|
|
<div class="mb-2">
|
|
<strong>Gender:</strong> {{ note.patient.get_gender_display }}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-2">
|
|
<strong>Surgery Date:</strong> {{ note.surgery_date|date:"M d, Y H:i" }}
|
|
</div>
|
|
<div class="mb-2">
|
|
<strong>Operating Room:</strong> {{ note.operating_room.name }}
|
|
</div>
|
|
<div class="mb-2">
|
|
<strong>Case Number:</strong> {{ note.case_number }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 text-end">
|
|
<div class="mb-3">
|
|
{% if note.status == 'draft' %}
|
|
<span class="badge bg-secondary fs-6">Draft</span>
|
|
{% elif note.status == 'pending' %}
|
|
<span class="badge bg-warning fs-6">Pending Signature</span>
|
|
{% elif note.status == 'signed' %}
|
|
<span class="badge bg-success fs-6">Signed</span>
|
|
{% elif note.status == 'amended' %}
|
|
<span class="badge bg-info fs-6">Amended</span>
|
|
{% endif %}
|
|
</div>
|
|
{% if note.urgency == 'emergency' %}
|
|
<div class="mb-2">
|
|
<span class="badge bg-danger fs-6">Emergency</span>
|
|
</div>
|
|
{% elif note.urgency == 'urgent' %}
|
|
<div class="mb-2">
|
|
<span class="badge bg-warning fs-6">Urgent</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Procedure Information -->
|
|
<div class="section-card">
|
|
<div class="section-header">
|
|
<i class="fas fa-procedures me-2"></i>Procedure Information
|
|
</div>
|
|
<div class="section-content">
|
|
<div class="info-grid">
|
|
<div class="info-item">
|
|
<div class="info-label">Primary Procedure</div>
|
|
<div class="info-value">{{ note.procedure_name }}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">Procedure Code</div>
|
|
<div class="info-value">{{ note.procedure_code }}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">Laterality</div>
|
|
<div class="info-value">{{ note.get_laterality_display|default:"Not specified" }}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">Approach</div>
|
|
<div class="info-value">{{ note.get_approach_display|default:"Not specified" }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if note.secondary_procedures %}
|
|
<div class="procedure-details">
|
|
<h6>Secondary Procedures:</h6>
|
|
<p>{{ note.secondary_procedures }}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Surgical Team -->
|
|
<div class="section-card">
|
|
<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.primary_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>
|
|
|
|
{% if note.other_team_members %}
|
|
<div class="mt-3">
|
|
<h6>Other Team Members:</h6>
|
|
<p>{{ note.other_team_members }}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Timing Information -->
|
|
<div class="section-card">
|
|
<div class="section-header">
|
|
<i class="fas fa-clock me-2"></i>Timing Information
|
|
</div>
|
|
<div class="section-content">
|
|
<div class="info-grid">
|
|
<div class="info-item">
|
|
<div class="info-label">Surgery Start Time</div>
|
|
<div class="info-value">{{ note.surgery_start_time|date:"H:i" }}</div>
|
|
</div>
|
|
{% if note.surgery_end_time %}
|
|
<div class="info-item">
|
|
<div class="info-label">Surgery End Time</div>
|
|
<div class="info-value">{{ note.surgery_end_time|date:"H:i" }}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">Total Duration</div>
|
|
<div class="info-value">{{ note.surgery_duration }} minutes</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if note.anesthesia_start_time %}
|
|
<div class="info-item">
|
|
<div class="info-label">Anesthesia Start</div>
|
|
<div class="info-value">{{ note.anesthesia_start_time|date:"H:i" }}</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Clinical Information -->
|
|
<div class="section-card">
|
|
<div class="section-header">
|
|
<i class="fas fa-stethoscope me-2"></i>Clinical Information
|
|
</div>
|
|
<div class="section-content">
|
|
{% if note.preoperative_diagnosis %}
|
|
<div class="mb-3">
|
|
<h6>Preoperative Diagnosis:</h6>
|
|
<p>{{ note.preoperative_diagnosis }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if note.postoperative_diagnosis %}
|
|
<div class="mb-3">
|
|
<h6>Postoperative Diagnosis:</h6>
|
|
<p>{{ note.postoperative_diagnosis }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if note.indications %}
|
|
<div class="mb-3">
|
|
<h6>Indications for Surgery:</h6>
|
|
<p>{{ note.indications }}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Anesthesia Information -->
|
|
{% if note.anesthesia_type %}
|
|
<div class="section-card">
|
|
<div class="section-header">
|
|
<i class="fas fa-syringe me-2"></i>Anesthesia Information
|
|
</div>
|
|
<div class="section-content">
|
|
<div class="info-grid">
|
|
<div class="info-item">
|
|
<div class="info-label">Anesthesia Type</div>
|
|
<div class="info-value">{{ note.get_anesthesia_type_display }}</div>
|
|
</div>
|
|
{% if note.asa_classification %}
|
|
<div class="info-item">
|
|
<div class="info-label">ASA Classification</div>
|
|
<div class="info-value">{{ note.asa_classification }}</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if note.anesthesia_notes %}
|
|
<div class="mt-3">
|
|
<h6>Anesthesia Notes:</h6>
|
|
<p>{{ note.anesthesia_notes }}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Operative Technique -->
|
|
<div class="section-card">
|
|
<div class="section-header">
|
|
<i class="fas fa-cut me-2"></i>Operative Technique
|
|
</div>
|
|
<div class="section-content">
|
|
{% if note.operative_technique %}
|
|
<div class="mb-3">
|
|
<h6>Technique Description:</h6>
|
|
<div style="white-space: pre-wrap;">{{ note.operative_technique }}</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if note.findings %}
|
|
<div class="mb-3">
|
|
<h6>Operative Findings:</h6>
|
|
<div style="white-space: pre-wrap;">{{ note.findings }}</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if note.specimens %}
|
|
<div class="mb-3">
|
|
<h6>Specimens Sent:</h6>
|
|
<p>{{ note.specimens }}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Complications -->
|
|
{% if note.complications %}
|
|
<div class="section-card">
|
|
<div class="section-header">
|
|
<i class="fas fa-exclamation-triangle me-2"></i>Complications
|
|
</div>
|
|
<div class="section-content">
|
|
<div class="complication-alert">
|
|
<h6 class="text-danger">Complications Noted:</h6>
|
|
<p class="mb-0">{{ note.complications }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Postoperative Care -->
|
|
<div class="section-card">
|
|
<div class="section-header">
|
|
<i class="fas fa-bed me-2"></i>Postoperative Care
|
|
</div>
|
|
<div class="section-content">
|
|
{% if note.postoperative_instructions %}
|
|
<div class="mb-3">
|
|
<h6>Postoperative Instructions:</h6>
|
|
<div style="white-space: pre-wrap;">{{ note.postoperative_instructions }}</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if note.estimated_blood_loss %}
|
|
<div class="info-grid">
|
|
<div class="info-item">
|
|
<div class="info-label">Estimated Blood Loss</div>
|
|
<div class="info-value">{{ note.estimated_blood_loss }} mL</div>
|
|
</div>
|
|
{% if note.fluid_replacement %}
|
|
<div class="info-item">
|
|
<div class="info-label">Fluid Replacement</div>
|
|
<div class="info-value">{{ note.fluid_replacement }}</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if note.disposition %}
|
|
<div class="mt-3">
|
|
<h6>Patient Disposition:</h6>
|
|
<p>{{ note.disposition }}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Signature Section -->
|
|
<div class="signature-section {% if note.status == 'pending' %}signature-pending{% elif note.status == 'draft' %}signature-draft{% endif %}">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<h5 class="mb-3">
|
|
<i class="fas fa-signature me-2"></i>Electronic Signature
|
|
</h5>
|
|
{% if note.status == 'signed' %}
|
|
<div class="mb-2">
|
|
<strong>Signed by:</strong> {{ note.primary_surgeon.get_full_name }}
|
|
</div>
|
|
<div class="mb-2">
|
|
<strong>Date & Time:</strong> {{ note.signed_at|date:"M d, Y H:i" }}
|
|
</div>
|
|
<div class="mb-2">
|
|
<strong>Digital Signature:</strong> {{ note.signature_hash }}
|
|
</div>
|
|
{% elif note.status == 'pending' %}
|
|
<p class="mb-2">This operative note is pending electronic signature by the primary surgeon.</p>
|
|
{% if note.primary_surgeon == request.user %}
|
|
<button class="btn btn-success" onclick="signNote()">
|
|
<i class="fas fa-signature me-1"></i>Sign Note
|
|
</button>
|
|
{% endif %}
|
|
{% else %}
|
|
<p class="mb-2">This operative note is in draft status and has not been submitted for signature.</p>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-4 text-end">
|
|
{% if note.status == 'signed' %}
|
|
<div class="text-success">
|
|
<i class="fas fa-check-circle fa-3x"></i>
|
|
<div class="mt-2">Electronically Signed</div>
|
|
</div>
|
|
{% elif note.status == 'pending' %}
|
|
<div class="text-warning">
|
|
<i class="fas fa-clock fa-3x"></i>
|
|
<div class="mt-2">Pending Signature</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-secondary">
|
|
<i class="fas fa-edit fa-3x"></i>
|
|
<div class="mt-2">Draft</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Amendment History -->
|
|
{% if note.amendments.exists %}
|
|
<div class="section-card">
|
|
<div class="section-header">
|
|
<i class="fas fa-history me-2"></i>Amendment History
|
|
</div>
|
|
<div class="section-content">
|
|
{% for amendment in note.amendments.all %}
|
|
<div class="timeline-item">
|
|
<div class="timeline-icon bg-info text-white">
|
|
<i class="fas fa-edit"></i>
|
|
</div>
|
|
<div class="timeline-content">
|
|
<div class="fw-bold">Amendment {{ forloop.counter }}</div>
|
|
<div class="timeline-time">{{ amendment.created_at|date:"M d, Y H:i" }} by {{ amendment.created_by.get_full_name }}</div>
|
|
<div class="mt-2">
|
|
<strong>Reason:</strong> {{ amendment.reason }}
|
|
</div>
|
|
{% if amendment.changes %}
|
|
<div class="mt-1">
|
|
<strong>Changes:</strong> {{ amendment.changes }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
function signNote() {
|
|
if (confirm('Sign this operative note? Once signed, the note cannot be edited without creating an amendment.')) {
|
|
$.ajax({
|
|
url: '{% url "operating_theatre:operative_note_sign" note.pk %}',
|
|
method: 'POST',
|
|
data: {
|
|
'csrfmiddlewaretoken': '{{ csrf_token }}'
|
|
},
|
|
success: function(response) {
|
|
if (response.success) {
|
|
location.reload();
|
|
} else {
|
|
alert('Error signing note: ' + response.error);
|
|
}
|
|
},
|
|
error: function() {
|
|
alert('Error signing note');
|
|
}
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %}
|
|
|