2025-08-12 13:33:25 +03:00

652 lines
30 KiB
HTML

{% extends "base.html" %}
{% load static %}
{% block title %}Encounter Details - {{ object.patient.get_full_name }}{% endblock %}
{% block css %}
<link href="{% static 'assets/plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css' %}" rel="stylesheet" />
<link href="{% static 'assets/plugins/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css' %}" rel="stylesheet" />
<link href="{% static 'assets/plugins/select2/dist/css/select2.min.css' %}" rel="stylesheet" />
{% 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 'emr:dashboard' %}">EMR</a></li>
<li class="breadcrumb-item"><a href="{% url 'emr:encounter_list' %}">Encounters</a></li>
<li class="breadcrumb-item active">{{ object.patient.get_full_name }}</li>
</ol>
<!-- END breadcrumb -->
<!-- BEGIN page-header -->
<h1 class="page-header">
Encounter Details
<small>{{ object.patient.get_full_name }} - {{ object.start_datetime|date:"M d, Y H:i" }}</small>
</h1>
<!-- END page-header -->
<div class="row">
<div class="col-xl-8">
<!-- BEGIN panel -->
<div class="panel panel-inverse">
<div class="panel-heading">
<h4 class="panel-title">Encounter Information</h4>
<div class="panel-heading-btn">
<a href="{% url 'emr:encounter_update' object.pk %}" class="btn btn-xs btn-primary me-2">
<i class="fa fa-edit"></i> Edit
</a>
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<table class="table table-borderless">
<tr>
<td class="fw-bold" width="150">Encounter ID:</td>
<td>{{ object.encounter_id }}</td>
</tr>
<tr>
<td class="fw-bold">Patient:</td>
<td>
<a href="{% url 'patients:patient_detail' object.patient.pk %}" class="text-decoration-none">
{{ object.patient.get_full_name }}
</a>
<br><small class="text-muted">{{ object.patient.medical_record_number }}</small>
</td>
</tr>
<tr>
<td class="fw-bold">Provider:</td>
<td>
<a href="{% url 'users:user_detail' object.provider.pk %}" class="text-decoration-none">
Dr. {{ object.provider.get_full_name }}
</a>
</td>
</tr>
<tr>
<td class="fw-bold">Encounter Type:</td>
<td>
<span class="badge bg-{{ object.get_encounter_type_color }} fs-12px">
{{ object.get_encounter_type_display }}
</span>
</td>
</tr>
<tr>
<td class="fw-bold">Status:</td>
<td>
<span class="badge bg-{{ object.get_status_color }} fs-12px">
{{ object.get_status_display }}
</span>
</td>
</tr>
</table>
</div>
<div class="col-md-6">
<table class="table table-borderless">
<tr>
<td class="fw-bold" width="150">Start Date/Time:</td>
<td>{{ object.start_datetime|date:"M d, Y H:i" }}</td>
</tr>
<tr>
<td class="fw-bold">End Date/Time:</td>
<td>
{% if object.end_datetime %}
{{ object.end_datetime|date:"M d, Y H:i" }}
{% else %}
{% if object.is_active %}
<span class="text-primary">Ongoing</span>
{% else %}
Not set
{% endif %}
{% endif %}
</td>
</tr>
<tr>
<td class="fw-bold">Duration:</td>
<td>
{% if object.duration %}
{{ object.duration }}
{% elif object.is_active %}
<span class="text-primary">Ongoing</span>
{% else %}
Not calculated
{% endif %}
</td>
</tr>
<tr>
<td class="fw-bold">Location:</td>
<td>
{{ object.location|default:"Not specified" }}
{% if object.room_number %}
<br><small class="text-muted">Room {{ object.room_number }}</small>
{% endif %}
</td>
</tr>
<tr>
<td class="fw-bold">Priority:</td>
<td>
<span class="badge bg-{{ object.get_priority_color }} fs-12px">
{{ object.get_priority_display }}
</span>
</td>
</tr>
</table>
</div>
</div>
{% if object.chief_complaint or object.reason_for_visit %}
<div class="mt-4">
<h6>Clinical Information</h6>
{% if object.chief_complaint %}
<div class="mb-3">
<strong>Chief Complaint:</strong><br>
<div class="bg-light p-3 rounded">{{ object.chief_complaint }}</div>
</div>
{% endif %}
{% if object.reason_for_visit %}
<div class="mb-3">
<strong>Reason for Visit:</strong><br>
<div class="bg-light p-3 rounded">{{ object.reason_for_visit }}</div>
</div>
{% endif %}
</div>
{% endif %}
<!-- Documentation Status -->
<div class="mt-4">
<h6>Documentation Status</h6>
<div class="row">
<div class="col-md-6">
<div class="mb-2">
<i class="fa fa-{{ object.documentation_complete|yesno:'check text-success,times text-danger' }} me-2"></i>
Documentation Complete
</div>
<div class="mb-2">
<i class="fa fa-{{ object.signed_off|yesno:'check text-success,times text-danger' }} me-2"></i>
Signed Off
</div>
</div>
<div class="col-md-6">
{% if object.signed_off and object.signed_by %}
<div class="small text-muted">
Signed by: {{ object.signed_by.get_full_name }}<br>
Date: {{ object.signed_datetime|date:"M d, Y H:i" }}
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
<!-- END panel -->
<!-- BEGIN panel -->
<div class="panel panel-inverse">
<div class="panel-heading">
<h4 class="panel-title">Vital Signs</h4>
<div class="panel-heading-btn">
<a href="{% url 'emr:vital_signs_create' %}?encounter={{ object.pk }}" class="btn btn-xs btn-success me-2">
<i class="fa fa-plus"></i> Add Vitals
</a>
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
</div>
</div>
<div class="panel-body">
{% if object.vital_signs.exists %}
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th>Time</th>
<th>Temp</th>
<th>BP</th>
<th>HR</th>
<th>RR</th>
<th>O2 Sat</th>
<th>Pain</th>
<th>Measured By</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for vital in object.vital_signs.all %}
<tr>
<td>{{ vital.measured_datetime|time:"H:i" }}</td>
<td>
{% if vital.temperature %}
{{ vital.temperature }}°F
{% else %}
-
{% endif %}
</td>
<td>
{% if vital.blood_pressure %}
{{ vital.blood_pressure }}
{% else %}
-
{% endif %}
</td>
<td>
{% if vital.heart_rate %}
{{ vital.heart_rate }} bpm
{% else %}
-
{% endif %}
</td>
<td>
{% if vital.respiratory_rate %}
{{ vital.respiratory_rate }} /min
{% else %}
-
{% endif %}
</td>
<td>
{% if vital.oxygen_saturation %}
{{ vital.oxygen_saturation }}%
{% else %}
-
{% endif %}
</td>
<td>
{% if vital.pain_scale %}
{{ vital.pain_scale }}/10
{% else %}
-
{% endif %}
</td>
<td>{{ vital.measured_by.get_full_name }}</td>
<td>
<a href="{% url 'emr:vital_signs_detail' vital.pk %}" class="btn btn-xs btn-outline-primary">
<i class="fa fa-eye"></i>
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<div class="text-center py-4 text-muted">
<i class="fa fa-heartbeat fa-3x mb-3"></i>
<p>No vital signs recorded for this encounter.</p>
<a href="{% url 'emr:vital_signs_create' %}?encounter={{ object.pk }}" class="btn btn-primary">
<i class="fa fa-plus me-2"></i>Add Vital Signs
</a>
</div>
{% endif %}
</div>
</div>
<!-- END panel -->
<!-- BEGIN panel -->
<div class="panel panel-inverse">
<div class="panel-heading">
<h4 class="panel-title">Clinical Notes</h4>
<div class="panel-heading-btn">
<a href="{% url 'emr:clinical_note_create' %}?encounter={{ object.pk }}" class="btn btn-xs btn-success me-2">
<i class="fa fa-plus"></i> Add Note
</a>
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
</div>
</div>
<div class="panel-body">
{% if object.clinical_notes.exists %}
<div class="timeline">
{% for note in object.clinical_notes.all %}
<div class="timeline-item">
<div class="timeline-time">{{ note.note_datetime|time:"H:i" }}</div>
<div class="timeline-icon bg-{{ note.get_note_type_color }}">
<i class="fa fa-file-medical"></i>
</div>
<div class="timeline-body">
<div class="timeline-header">
<a href="{% url 'emr:clinical_note_detail' note.pk %}" class="fw-bold text-decoration-none">
{{ note.title }}
</a>
<span class="badge bg-{{ note.get_status_color }} ms-2">{{ note.get_status_display }}</span>
</div>
<div class="timeline-content">
<div class="small text-muted mb-2">
{{ note.get_note_type_display }} by {{ note.author.get_full_name }}
{% if note.electronically_signed %}
<i class="fa fa-check-circle text-success ms-2" title="Signed"></i>
{% endif %}
</div>
<div class="text-truncate">
{{ note.content|truncatewords:20 }}
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% else %}
<div class="text-center py-4 text-muted">
<i class="fa fa-file-medical fa-3x mb-3"></i>
<p>No clinical notes for this encounter.</p>
<a href="{% url 'emr:clinical_note_create' %}?encounter={{ object.pk }}" class="btn btn-primary">
<i class="fa fa-plus me-2"></i>Add Clinical Note
</a>
</div>
{% endif %}
</div>
</div>
<!-- END panel -->
</div>
<div class="col-xl-4">
<!-- BEGIN panel -->
<div class="panel panel-inverse">
<div class="panel-heading">
<h4 class="panel-title">Quick Actions</h4>
<div class="panel-heading-btn">
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
</div>
</div>
<div class="panel-body">
<div class="d-grid gap-2">
<a href="{% url 'emr:encounter_update' object.pk %}" class="btn btn-primary">
<i class="fa fa-edit me-2"></i>Edit Encounter
</a>
{% if object.status != 'FINISHED' %}
<button class="btn btn-success" onclick="updateStatus('FINISHED')">
<i class="fa fa-check me-2"></i>Mark as Finished
</button>
{% endif %}
{% if object.status == 'FINISHED' and not object.documentation_complete %}
<button class="btn btn-warning" onclick="completeDocumentation()">
<i class="fa fa-file-check me-2"></i>Complete Documentation
</button>
{% endif %}
{% if object.documentation_complete and not object.signed_off %}
<button class="btn btn-info" onclick="signOffEncounter()">
<i class="fa fa-signature me-2"></i>Sign Off Encounter
</button>
{% endif %}
<a href="{% url 'emr:vital_signs_create' %}?encounter={{ object.pk }}" class="btn btn-outline-primary">
<i class="fa fa-heartbeat me-2"></i>Add Vital Signs
</a>
<a href="{% url 'emr:clinical_note_create' %}?encounter={{ object.pk }}" class="btn btn-outline-secondary">
<i class="fa fa-file-medical me-2"></i>Add Clinical Note
</a>
<button class="btn btn-outline-info" onclick="printEncounter()">
<i class="fa fa-print me-2"></i>Print Encounter
</button>
</div>
</div>
</div>
<!-- END panel -->
<!-- BEGIN panel -->
<div class="panel panel-inverse">
<div class="panel-heading">
<h4 class="panel-title">Patient Information</h4>
<div class="panel-heading-btn">
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
</div>
</div>
<div class="panel-body">
<div class="d-flex align-items-center mb-3">
<div class="flex-fill">
<div class="fw-bold">{{ object.patient.get_full_name }}</div>
<div class="text-muted small">{{ object.patient.medical_record_number }}</div>
</div>
<a href="{% url 'patients:patient_detail' object.patient.pk %}" class="btn btn-sm btn-outline-primary">
View Profile
</a>
</div>
<table class="table table-sm table-borderless">
<tr>
<td class="text-muted">Age:</td>
<td>{{ object.patient.age }} years</td>
</tr>
<tr>
<td class="text-muted">Gender:</td>
<td>{{ object.patient.get_gender_display }}</td>
</tr>
<tr>
<td class="text-muted">Blood Type:</td>
<td>
{% if object.patient.blood_type %}
<span class="badge bg-danger">{{ object.patient.blood_type }}</span>
{% else %}
Unknown
{% endif %}
</td>
</tr>
<tr>
<td class="text-muted">Allergies:</td>
<td>
{% if object.patient.allergies %}
<span class="text-warning">{{ object.patient.allergies }}</span>
{% else %}
None known
{% endif %}
</td>
</tr>
</table>
</div>
</div>
<!-- END panel -->
<!-- BEGIN panel -->
<div class="panel panel-inverse">
<div class="panel-heading">
<h4 class="panel-title">Related Information</h4>
<div class="panel-heading-btn">
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
</div>
</div>
<div class="panel-body">
{% if object.appointment %}
<div class="mb-3">
<strong>Related Appointment:</strong><br>
<a href="{% url 'appointments:appointment_detail' object.appointment.pk %}" class="text-decoration-none">
{{ object.appointment.appointment_date|date:"M d, Y H:i" }}
</a>
</div>
{% endif %}
{% if object.admission %}
<div class="mb-3">
<strong>Related Admission:</strong><br>
<a href="{% url 'inpatients:admission_detail' object.admission.pk %}" class="text-decoration-none">
Admission {{ object.admission.admission_date|date:"M d, Y" }}
</a>
</div>
{% endif %}
{% if object.billing_codes %}
<div class="mb-3">
<strong>Billing Codes:</strong><br>
{% for code in object.billing_codes %}
<span class="badge bg-secondary me-1">{{ code }}</span>
{% endfor %}
</div>
{% endif %}
<div class="small text-muted">
<div>Created: {{ object.created_at|date:"M d, Y H:i" }}</div>
{% if object.created_by %}
<div>By: {{ object.created_by.get_full_name }}</div>
{% endif %}
<div>Last Updated: {{ object.updated_at|date:"M d, Y H:i" }}</div>
</div>
</div>
</div>
<!-- END panel -->
<!-- BEGIN panel -->
<div class="panel panel-inverse">
<div class="panel-heading">
<h4 class="panel-title">Encounter Timeline</h4>
<div class="panel-heading-btn">
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
</div>
</div>
<div class="panel-body">
<div class="timeline">
<div class="timeline-item">
<div class="timeline-time">{{ object.start_datetime|time:"H:i" }}</div>
<div class="timeline-icon bg-primary"><i class="fa fa-play"></i></div>
<div class="timeline-body">
<div class="timeline-header">Encounter Started</div>
<div class="timeline-content text-muted">
{{ object.get_encounter_type_display }} encounter initiated
</div>
</div>
</div>
{% if object.status == 'FINISHED' %}
<div class="timeline-item">
<div class="timeline-time">
{% if object.end_datetime %}
{{ object.end_datetime|time:"H:i" }}
{% else %}
{{ object.updated_at|time:"H:i" }}
{% endif %}
</div>
<div class="timeline-icon bg-success"><i class="fa fa-check"></i></div>
<div class="timeline-body">
<div class="timeline-header">Encounter Completed</div>
<div class="timeline-content text-muted">
Encounter marked as finished
</div>
</div>
</div>
{% endif %}
{% if object.signed_off %}
<div class="timeline-item">
<div class="timeline-time">{{ object.signed_datetime|time:"H:i" }}</div>
<div class="timeline-icon bg-info"><i class="fa fa-signature"></i></div>
<div class="timeline-body">
<div class="timeline-header">Encounter Signed Off</div>
<div class="timeline-content text-muted">
Signed by {{ object.signed_by.get_full_name }}
</div>
</div>
</div>
{% endif %}
</div>
</div>
</div>
<!-- END panel -->
</div>
</div>
{% endblock %}
{% block js %}
<script src="{% static 'assets/plugins/datatables.net/js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'assets/plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js' %}"></script>
<script src="{% static 'assets/plugins/select2/dist/js/select2.min.js' %}"></script>
<script>
function updateStatus(newStatus) {
if (confirm('Are you sure you want to update the encounter status?')) {
$.ajax({
url: '{% url "emr:encounter_update_status" %}',
method: 'POST',
data: {
'encounter_id': '{{ object.pk }}',
'status': newStatus,
'csrfmiddlewaretoken': '{{ csrf_token }}'
},
success: function(response) {
if (response.success) {
toastr.success('Encounter status updated successfully');
location.reload();
} else {
toastr.error('Failed to update encounter status');
}
},
error: function() {
toastr.error('An error occurred while updating the status');
}
});
}
}
function completeDocumentation() {
if (confirm('Mark documentation as complete? This will indicate that all required documentation has been finished.')) {
$.ajax({
url: '{% url "emr:encounter_complete_documentation" object.pk %}',
method: 'POST',
data: {
'csrfmiddlewaretoken': '{{ csrf_token }}'
},
success: function(response) {
if (response.success) {
toastr.success('Documentation marked as complete');
location.reload();
} else {
toastr.error('Failed to complete documentation');
}
},
error: function() {
toastr.error('An error occurred while completing documentation');
}
});
}
}
function signOffEncounter() {
if (confirm('Sign off this encounter? This action cannot be undone.')) {
$.ajax({
url: '{% url "emr:encounter_sign_off" object.pk %}',
method: 'POST',
data: {
'csrfmiddlewaretoken': '{{ csrf_token }}'
},
success: function(response) {
if (response.success) {
toastr.success('Encounter signed off successfully');
location.reload();
} else {
toastr.error('Failed to sign off encounter');
}
},
error: function() {
toastr.error('An error occurred while signing off the encounter');
}
});
}
}
function printEncounter() {
window.open('{% url "emr:encounter_print" object.pk %}', '_blank');
}
$(document).ready(function() {
// Auto-refresh encounter status every 30 seconds if active
{% if object.is_active %}
setInterval(function() {
$.ajax({
url: '{% url "emr:encounter_status_check" object.pk %}',
success: function(response) {
if (response.status !== '{{ object.status }}') {
location.reload();
}
}
});
}, 30000);
{% endif %}
});
</script>
{% endblock %}