2025-10-06 15:25:37 +03:00

1247 lines
72 KiB
HTML

{% extends "base.html" %}
{% load static %}
{% block title %}Encounter Details - {{ object.patient.get_full_name }}{% endblock %}
{% block css %}
<link href="{% static 'plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css' %}" rel="stylesheet" />
<link href="{% static 'plugins/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css' %}" rel="stylesheet" />
<link href="{% static 'plugins/select2/dist/css/select2.min.css' %}" rel="stylesheet" />
<link href="{% static 'plugins/lity/dist/lity.min.css' %}" rel="stylesheet" />
{% endblock %}
{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<div>
<h1 class="h2">
<i class="fas fa-calendar-alt"></i> Encounter<span class="fw-light">Details</span>
</h1>
<p>{{ object.patient.get_full_name }} - {{ object.start_datetime|date:"M d, Y H:i" }}</p>
</div>
<div class="btn-toolbar mb-md-0">
<div class="btn-group me-2">
</div>
</div>
</div>
<!-- BEGIN page-header -->
<div class="container-fluid">
<div class="row">
<div class="col-xl-8">
<!-- BEGIN panel -->
<div class="panel panel-inverse" data-sortable-id="encounter-1">
<div class="panel-heading">
<h4 class="panel-title">Encounter Information</h4>
<div class="panel-heading-btn">
<a href="" class="btn btn-xs btn-outline-theme 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>
<a href="javascript:" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
<a href="javascript:" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
<a href="javascript:" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></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.mrn }}</small>
</td>
</tr>
<tr>
<td class="fw-bold">Provider:</td>
<td>
<a href="{% url 'hr:employee_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>
{% if object.encounter_type == 'INPATIENT' %}
<span class="badge bg-success fs-12px">
{% elif object.encounter_type == 'OUTPATIENT' %}
<span class="badge bg-primary fs-12px">
{% elif object.encounter_type == 'EMERGENCY' %}
<span class="badge bg-red fs-12px">
{% elif object.encounter_type == 'CONSULTATION' %}
<span class="badge bg-info fs-12px">
{% elif object.encounter_type == 'SURGERY' %}
<span class="badge bg-warning fs-12px">
{% else %}
<span class="badge bg-secondary fs-12px">
{% endif %}
{{ object.get_encounter_type_display }}
</span>
</td>
</tr>
<tr>
<td class="fw-bold">Status:</td>
<td>
<span class="badge bg-danger 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 }}
{% 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>
{% if object.priority == 'ROUTINE' %}
<span class="badge bg-success fs-12px">
{% elif object.priority == 'URGENT' %}
<span class="badge bg-warning fs-12px">
{% elif object.priority == 'EMERGENCY' %}
<span class="badge bg-danger fs-12px">
{% else %}
<span class="badge bg-black fs-12px">
{% endif %}
{{ 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 with tabs -->
<div class="panel panel-inverse" data-sortable-id="encounter-2">
<div class="panel-heading">
<h4 class="panel-title">Encounter Details</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-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
<a href="javascript:" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
<a href="javascript:" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
</div>
</div>
<div class="panel-body">
<!-- BEGIN nav-tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#vital-signs-tab" data-bs-toggle="tab" class="nav-link active">
<span class="d-sm-none"><i class="fas fa-heartbeat"></i></span>
<span class="d-sm-block d-none"><i class="fas fa-heartbeat me-1"></i> Vital Signs</span>
</a>
</li>
<li class="nav-item">
<a href="#clinical-notes-tab" data-bs-toggle="tab" class="nav-link">
<span class="d-sm-none"><i class="fas fa-file-medical"></i></span>
<span class="d-sm-block d-none"><i class="fas fa-file-medical me-1"></i> Clinical Notes</span>
</a>
</li>
<li class="nav-item">
<a href="#appointments-tab" data-bs-toggle="tab" class="nav-link">
<span class="d-sm-none"><i class="fas fa-calendar-alt"></i></span>
<span class="d-sm-block d-none"><i class="fas fa-calendar-alt me-1"></i> Appointments</span>
</a>
</li>
<li class="nav-item">
<a href="#laboratory-tab" data-bs-toggle="tab" class="nav-link">
<span class="d-sm-none"><i class="fas fa-flask"></i></span>
<span class="d-sm-block d-none"><i class="fas fa-flask me-1"></i> Laboratory</span>
</a>
</li>
<li class="nav-item">
<a href="#radiology-tab" data-bs-toggle="tab" class="nav-link">
<span class="d-sm-none"><i class="fas fa-x-ray"></i></span>
<span class="d-sm-block d-none"><i class="fas fa-x-ray me-1"></i> Radiology</span>
</a>
</li>
<li class="nav-item">
<a href="#problems-tab" data-bs-toggle="tab" class="nav-link">
<span class="d-sm-none"><i class="fas fa-list"></i></span>
<span class="d-sm-block d-none"><i class="fas fa-list me-1"></i> Problems</span>
</a>
</li>
<li class="nav-item">
<a href="#care-plans-tab" data-bs-toggle="tab" class="nav-link">
<span class="d-sm-none"><i class="fas fa-clipboard-list"></i></span>
<span class="d-sm-block d-none"><i class="fas fa-clipboard-list me-1"></i> Care Plans</span>
</a>
</li>
<li class="nav-item">
<a href="#billing-tab" data-bs-toggle="tab" class="nav-link">
<span class="d-sm-none"><i class="fas fa-file-invoice-dollar"></i></span>
<span class="d-sm-block d-none"><i class="fas fa-file-invoice-dollar me-1"></i> Billing</span>
</a>
</li>
</ul>
<!-- END nav-tabs -->
<!-- BEGIN tab-content -->
<div class="tab-content panel-body p-0">
<!-- BEGIN vital-signs-tab -->
<div class="tab-pane fade active show" id="vital-signs-tab">
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="m-0">Vital Signs</h5>
<a href="{% url 'emr:add_vital_signs' object.pk%}" class="btn btn-sm btn-primary">
<i class="fa fa-plus me-1"></i> Add Vitals
</a>
</div>
{% 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:add_vital_signs' object.pk %}" class="btn btn-primary">
<i class="fa fa-plus me-2"></i>Add Vital Signs
</a>
</div>
{% endif %}
</div>
<!-- END vital-signs-tab -->
<!-- BEGIN clinical-notes-tab -->
<div class="tab-pane fade" id="clinical-notes-tab">
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="m-0">Clinical Notes</h5>
<a href="{% url 'emr:clinical_note_create' object.pk %}" class="btn btn-sm btn-primary">
<i class="fa fa-plus me-1"></i> Add Note
</a>
</div>
{% if object.clinical_notes.exists %}
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th>Date/Time</th>
<th>Title</th>
<th>Type</th>
<th>Author</th>
<th>Status</th>
<th>Content Preview</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for note in clinical_notes %}
<tr>
<td>{{ note.note_datetime|date:"M d, Y H:i" }}</td>
<td><strong>{{ note.title }}</strong></td>
<td>{{ note.get_note_type_display }}</td>
<td>{{ note.author.get_full_name }}</td>
<td>
<span class="badge {% if note.status == 'COMPLETED' %}bg-success{% elif note.status == 'DRAFT' %}bg-warning{% elif note.status == 'SIGNED' %}bg-primary{% else %}bg-info{% endif %} fs-10px">
{{ note.get_status_display }}
</span>
{% if note.electronically_signed %}
<i class="fas fa-check-circle text-success ms-1" title="Electronically Signed"></i>
{% endif %}
</td>
<td>
<div class="text-truncate" style="max-width: 200px;">
{{ note.content|truncatewords:15 }}
</div>
</td>
<td>
<a href="{% url 'emr:clinical_note_detail' note.pk %}" class="btn btn-xs btn-outline-primary">
<i class="fas fa-eye"></i>
</a>
{% if note.status == 'DRAFT' and note.author == request.user %}
<a href="{% url 'emr:clinical_note_update' note.pk %}" class="btn btn-xs btn-outline-secondary">
<i class="fas fa-edit"></i>
</a>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</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' object.pk %}" class="btn btn-primary">
<i class="fa fa-plus me-2"></i>Add Clinical Note
</a>
</div>
{% endif %}
</div>
<!-- END clinical-notes-tab -->
<!-- BEGIN appointments-tab -->
<div class="tab-pane fade" id="appointments-tab">
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="m-0">Related Appointments</h5>
<a href="{% url 'appointments:appointment_create' object.patient.pk %}" class="btn btn-sm btn-primary">
<i class="fa fa-plus me-1"></i> Schedule Appointment
</a>
</div>
{% if related_appointments %}
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th>Date/Time</th>
<th>Type</th>
<th>Provider</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for appointment in related_appointments %}
<tr>
<td>
{% if appointment.scheduled_datetime %}
{{ appointment.scheduled_datetime|date:"M d, Y H:i" }}
{% else %}
{{ appointment.preferred_date|date:"M d, Y" }}
{% endif %}
</td>
<td>{{ appointment.get_appointment_type_display }}</td>
<td>{{ appointment.provider.get_full_name }}</td>
<td>
<span class="badge bg-{% if appointment.status == 'COMPLETED' %}success{% elif appointment.status == 'SCHEDULED' %}primary{% elif appointment.status == 'CANCELLED' %}danger{% else %}secondary{% endif %} fs-10px">
{{ appointment.get_status_display }}
</span>
</td>
<td>
<a href="{% url 'appointments:appointment_detail' appointment.pk %}" class="btn btn-xs btn-outline-primary">
<i class="fas fa-eye"></i>
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<div class="text-center py-4 text-muted">
<i class="fa fa-calendar-alt fa-3x mb-3"></i>
<p>No related appointments found.</p>
<a href="{% url 'appointments:appointment_create' object.patient.pk %}" class="btn btn-sm btn-primary">
<i class="fa fa-plus me-2"></i>Schedule Appointment
</a>
</div>
{% endif %}
</div>
<!-- END appointments-tab -->
<!-- BEGIN laboratory-tab -->
<div class="tab-pane fade" id="laboratory-tab">
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="m-0">Laboratory Orders</h5>
<a href="{% url 'laboratory:lab_order_create' %}?patient={{ object.patient.pk }}&encounter={{ object.pk }}" class="btn btn-sm btn-primary">
<i class="fa fa-plus me-1"></i> New Lab Order
</a>
</div>
{% if lab_orders %}
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th>Order #</th>
<th>Date</th>
<th>Tests</th>
<th>Status</th>
<th>Priority</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for order in lab_orders %}
<tr>
<td>{{ order.order_number }}</td>
<td>{{ order.order_datetime|date:"M d, Y" }}</td>
<td>
<small>{{ order.tests.count }} test{{ order.tests.count|pluralize }}</small>
</td>
<td>
<span class="badge bg-{% if order.status == 'COMPLETED' %}success{% elif order.status == 'IN_PROGRESS' %}warning{% elif order.status == 'PENDING' %}info{% else %}secondary{% endif %} fs-10px">
{{ order.get_status_display }}
</span>
</td>
<td>
<span class="badge bg-{% if order.priority == 'STAT' %}danger{% elif order.priority == 'URGENT' %}warning{% else %}secondary{% endif %} fs-10px">
{{ order.get_priority_display }}
</span>
</td>
<td>
<a href="{% url 'laboratory:lab_order_detail' order.pk %}" class="btn btn-xs btn-outline-primary">
<i class="fas fa-eye"></i>
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<div class="text-center py-4 text-muted">
<i class="fa fa-flask fa-3x mb-3"></i>
<p>No laboratory orders found.</p>
<a href="{% url 'laboratory:lab_order_create' %}?patient={{ object.patient.pk }}&encounter={{ object.pk }}" class="btn btn-sm btn-primary">
<i class="fa fa-plus me-2"></i>Create Lab Order
</a>
</div>
{% endif %}
</div>
<!-- END laboratory-tab -->
<!-- BEGIN radiology-tab -->
<div class="tab-pane fade" id="radiology-tab">
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="m-0">Imaging Orders & Studies</h5>
<a href="{% url 'radiology:imaging_order_create' %}?patient={{ object.patient.pk }}&encounter={{ object.pk }}" class="btn btn-sm btn-primary">
<i class="fa fa-plus me-1"></i> New Imaging Order
</a>
</div>
{% if imaging_orders %}
<h6 class="mt-4 mb-2">Imaging Orders</h6>
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th>Order #</th>
<th>Date</th>
<th>Study</th>
<th>Modality</th>
<th>Status</th>
<th>Priority</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for order in imaging_orders %}
<tr>
<td>{{ order.order_number }}</td>
<td>{{ order.order_datetime|date:"M d, Y" }}</td>
<td>{{ order.study_description|truncatechars:30 }}</td>
<td>
<span class="badge bg-info fs-10px">{{ order.get_modality_display }}</span>
</td>
<td>
<span class="badge bg-{% if order.status == 'COMPLETED' %}success{% elif order.status == 'IN_PROGRESS' %}warning{% elif order.status == 'PENDING' %}info{% else %}secondary{% endif %} fs-10px">
{{ order.get_status_display }}
</span>
</td>
<td>
<span class="badge bg-{% if order.priority == 'STAT' %}danger{% elif order.priority == 'URGENT' %}warning{% else %}secondary{% endif %} fs-10px">
{{ order.get_priority_display }}
</span>
</td>
<td>
<a href="{% url 'radiology:imaging_order_detail' order.pk %}" class="btn btn-xs btn-outline-primary">
<i class="fas fa-eye"></i>
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
{% if imaging_studies %}
<h6 class="mt-4 mb-2">Imaging Studies</h6>
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th>Accession #</th>
<th>Date</th>
<th>Study</th>
<th>Modality</th>
<th>Radiologist</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for study in imaging_studies %}
<tr>
<td>{{ study.accession_number }}</td>
<td>{{ study.study_date|date:"M d, Y" }}</td>
<td>{{ study.study_description|truncatechars:30 }}</td>
<td>
<span class="badge bg-primary fs-10px">{{ study.get_modality_display }}</span>
</td>
<td>
{% if study.radiologist %}
{{ study.radiologist.get_full_name }}
{% else %}
<span class="text-muted">Not assigned</span>
{% endif %}
</td>
<td>
<span class="badge bg-{% if study.status == 'FINALIZED' %}success{% elif study.status == 'INTERPRETED' %}info{% elif study.status == 'COMPLETED' %}warning{% else %}secondary{% endif %} fs-10px">
{{ study.get_status_display }}
</span>
</td>
<td>
<a href="{% url 'radiology:imaging_study_detail' study.pk %}" class="btn btn-xs btn-outline-primary">
<i class="fas fa-eye"></i>
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
{% if not imaging_orders and not imaging_studies %}
<div class="text-center py-4 text-muted">
<i class="fa fa-x-ray fa-3x mb-3"></i>
<p>No imaging orders or studies found.</p>
<a href="{% url 'radiology:imaging_order_create' %}?patient={{ object.patient.pk }}&encounter={{ object.pk }}" class="btn btn-sm btn-primary">
<i class="fa fa-plus me-2"></i>Create Imaging Order
</a>
</div>
{% endif %}
</div>
<!-- END radiology-tab -->
<!-- BEGIN problems-tab -->
<div class="tab-pane fade" id="problems-tab">
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="m-0">Problems Identified</h5>
<button class="btn btn-sm btn-primary"
hx-get="{% url 'emr:add_problem' object.id %}"
hx-target="#problem-modal .modal-content"
data-bs-toggle="modal"
data-bs-target="#problem-modal">
<i class="fa fa-plus me-1"></i> Add Problem
</button>
</div>
{% if problems %}
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th>Problem</th>
<th>Type</th>
<th>Priority</th>
<th>Status</th>
<th>Onset Date</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for problem in problems %}
<tr>
<td>
<strong>{{ problem.problem_name }}</strong>
{% if problem.problem_code %}
<br><small class="text-muted">{{ problem.problem_code }}</small>
{% endif %}
</td>
<td>{{ problem.get_problem_type_display }}</td>
<td>
<span class="badge bg-{% if problem.priority == 'HIGH' or problem.priority == 'URGENT' %}danger{% elif problem.priority == 'MEDIUM' %}warning{% else %}info{% endif %} fs-10px">
{{ problem.get_priority_display }}
</span>
</td>
<td>
<span class="badge bg-{% if problem.status == 'ACTIVE' %}success{% elif problem.status == 'RESOLVED' %}secondary{% else %}info{% endif %} fs-10px">
{{ problem.get_status_display }}
</span>
</td>
<td>
{% if problem.onset_date %}
{{ problem.onset_date|date:"M d, Y" }}
{% else %}
<span class="text-muted">Not specified</span>
{% endif %}
</td>
<td>
<a href="{% url 'emr:problem_detail' problem.pk %}" class="btn btn-xs btn-outline-primary">
<i class="fas fa-eye"></i>
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<div class="text-center py-4 text-muted">
<i class="fa fa-list fa-3x mb-3"></i>
<p>No problems identified for this encounter.</p>
<button class="btn btn-primary"
hx-get="{% url 'emr:add_problem' object.id %}"
hx-target="#problem-modal .modal-content"
data-bs-toggle="modal"
data-bs-target="#problem-modal">
<i class="fa fa-plus me-2"></i>Add Problem
</button>
</div>
{% endif %}
</div>
<!-- END problems-tab -->
<!-- BEGIN care-plans-tab -->
<div class="tab-pane fade" id="care-plans-tab">
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="m-0">Care Plans</h5>
<button class="btn btn-sm btn-primary"
hx-get="{% url 'emr:add_care_plan' object.id %}"
hx-target="#care-plan-modal .modal-content"
data-bs-toggle="modal"
data-bs-target="#care-plan-modal">
<i class="fa fa-plus me-1"></i> Add Care Plan
</button>
</div>
{% if object.patient.care_plans.exists %}
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th>Title</th>
<th>Type</th>
<th>Status</th>
<th>Priority</th>
<th>Start Date</th>
<th>Progress</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for care_plan in object.patient.care_plans.all %}
<tr>
<td><strong>{{ care_plan.title }}</strong></td>
<td>{{ care_plan.get_plan_type_display }}</td>
<td>
<span class="badge bg-{% if care_plan.status == 'ACTIVE' %}success{% elif care_plan.status == 'COMPLETED' %}primary{% elif care_plan.status == 'DRAFT' %}warning{% else %}secondary{% endif %} fs-10px">
{{ care_plan.get_status_display }}
</span>
</td>
<td>
<span class="badge bg-{% if care_plan.priority == 'STAT' or care_plan.priority == 'URGENT' %}danger{% elif care_plan.priority == 'ROUTINE' %}info{% else %}secondary{% endif %} fs-10px">
{{ care_plan.get_priority_display }}
</span>
</td>
<td>{{ care_plan.start_date|date:"M d, Y" }}</td>
<td>
<div class="progress" style="height: 20px;">
<div class="progress-bar" role="progressbar"
style="width: {{ care_plan.completion_percentage }}%;"
aria-valuenow="{{ care_plan.completion_percentage }}"
aria-valuemin="0" aria-valuemax="100">
{{ care_plan.completion_percentage }}%
</div>
</div>
</td>
<td>
<a href="{% url 'emr:care_plan_detail' care_plan.pk %}" class="btn btn-xs btn-outline-primary">
<i class="fas fa-eye"></i>
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<div class="text-center py-4 text-muted">
<i class="fa fa-clipboard-list fa-3x mb-3"></i>
<p>No care plans for this patient.</p>
<button class="btn btn-primary"
hx-get="{% url 'emr:add_care_plan' object.id %}"
hx-target="#care-plan-modal .modal-content"
data-bs-toggle="modal"
data-bs-target="#care-plan-modal">
<i class="fa fa-plus me-2"></i>Add Care Plan
</button>
</div>
{% endif %}
</div>
<!-- END care-plans-tab -->
<!-- BEGIN billing-tab -->
<div class="tab-pane fade" id="billing-tab">
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="m-0">Medical Bills</h5>
<a href="{% url 'billing:bill_create' %}?patient={{ object.patient.pk }}&encounter={{ object.pk }}" class="btn btn-sm btn-primary">
<i class="fa fa-plus me-1"></i> Create Bill
</a>
</div>
{% if medical_bills %}
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th>Bill #</th>
<th>Date</th>
<th>Type</th>
<th>Total Amount</th>
<th>Balance</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for bill in medical_bills %}
<tr>
<td>{{ bill.bill_number }}</td>
<td>{{ bill.bill_date|date:"M d, Y" }}</td>
<td>{{ bill.get_bill_type_display }}</td>
<td><span class="symbol">&#xea;</span>{{ bill.total_amount|floatformat:'2g' }}</td>
<td><span class="symbol">&#xea;</span>{{ bill.balance_amount|floatformat:'2g' }}</td>
<td>
<span class="badge bg-{% if bill.status == 'PAID' %}success{% elif bill.status == 'PARTIAL_PAID' %}warning{% elif bill.status == 'OVERDUE' %}danger{% else %}secondary{% endif %} fs-10px">
{{ bill.get_status_display }}
</span>
</td>
<td>
<a href="{% url 'billing:bill_detail' bill.bill_id %}" class="btn btn-xs btn-outline-primary">
<i class="fas fa-eye"></i>
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<div class="text-center py-4 text-muted">
<i class="fa fa-file-invoice-dollar fa-3x mb-3"></i>
<p>No medical bills found.</p>
<a href="{% url 'billing:bill_create' %}?patient={{ object.patient.pk }}&encounter={{ object.pk }}" class="btn btn-sm btn-primary">
<i class="fa fa-plus me-2"></i>Create Bill
</a>
</div>
{% endif %}
</div>
<!-- END billing-tab -->
</div>
<!-- END tab-content -->
</div>
</div>
<!-- END panel -->
</div>
<div class="col-xl-4">
<!-- BEGIN panel -->
<div class="panel panel-inverse" data-sortable-id="encounter-3">
<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-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
<a href="javascript:" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
<a href="javascript:" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
</div>
</div>
<div class="panel-body">
<div class="d-grid gap-2">
<a href="" 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:add_vital_signs' 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' 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-success"
hx-get="{% url 'emr:add_problem' object.id %}"
hx-target="#problem-modal .modal-content"
data-bs-toggle="modal"
data-bs-target="#problem-modal">
<i class="fa fa-plus me-2"></i>Add Problem
</button>
<button class="btn btn-outline-info"
hx-get="{% url 'emr:add_care_plan' object.id %}"
hx-target="#care-plan-modal .modal-content"
data-bs-toggle="modal"
data-bs-target="#care-plan-modal">
<i class="fa fa-clipboard-list me-2"></i>Add Care Plan
</button>
<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" data-sortable-id="encounter-4">
<div class="panel-heading">
<h4 class="panel-title">Patient Information</h4>
<div class="panel-heading-btn">
<a href="{% url 'patients:patient_detail' object.patient.pk %}" class="btn btn-xs btn-outline-theme">
View Profile
</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-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
<a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
<a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
</div>
</div>
<div class="panel-body">
<div class="d-flex align-items-center justify-content-between mb-3">
<div class="fw-bold">{{ object.patient.get_full_name }}</div>
<div class="text-muted"><strong class="me-2">MRN:</strong> {{ object.patient.mrn }}</div>
</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" data-sortable-id="encounter-5">
<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" data-sortable-id="encounter-6">
<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-marker bg-primary"></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>
</div>
<!-- Problem Modal -->
<div class="modal fade" id="problem-modal" tabindex="-1" aria-labelledby="problemModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- Content loaded via HTMX -->
</div>
</div>
</div>
<!-- Care Plan Modal -->
<div class="modal fade" id="care-plan-modal" tabindex="-1" aria-labelledby="carePlanModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<!-- Content loaded via HTMX -->
</div>
</div>
</div>
{% endblock %}
{% block js %}
<script src="{% static 'plugins/datatables.net/js/dataTables.min.js' %}"></script>
<script src="{% static 'plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js' %}"></script>
<script src="{% static 'plugins/select2/dist/js/select2.min.js' %}"></script>
<script src="{% static 'plugins/lity/dist/lity.min.js' %}"></script>
<script src="{% static 'plugins/moment/moment.js' %}"></script>
<script src="{% static 'plugins/toastr/toastr.min.js' %}"
<script>
function updateStatus(newStatus) {
if (confirm('Are you sure you want to update the encounter status?')) {
$.ajax({
url: '{% url "emr:update_encounter_status" object.pk %}',
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 %}