442 lines
21 KiB
HTML
442 lines
21 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}{{ problem.problem_name }} | Problem Detail{% endblock %}
|
|
|
|
{% block css %}
|
|
<link href="{% static 'plugins/timeline/timeline.css' %}" rel="stylesheet" />
|
|
<link href="{% static 'plugins/bootstrap-icons/font/bootstrap-icons.css' %}" rel="stylesheet" />
|
|
<style>
|
|
.problem-badge {
|
|
font-size: 0.85rem;
|
|
padding: 0.35em 0.65em;
|
|
}
|
|
.problem-header {
|
|
background: linear-gradient(45deg, var(--bs-indigo), var(--bs-purple));
|
|
color: white;
|
|
padding: 1.5rem;
|
|
border-radius: 0.5rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.problem-status-active {
|
|
background-color: var(--bs-success);
|
|
color: white;
|
|
}
|
|
.problem-status-resolved {
|
|
background-color: var(--bs-secondary);
|
|
color: white;
|
|
}
|
|
.problem-status-inactive {
|
|
background-color: var(--bs-warning);
|
|
color: white;
|
|
}
|
|
.problem-priority-high {
|
|
background-color: var(--bs-danger);
|
|
color: white;
|
|
}
|
|
.problem-priority-medium {
|
|
background-color: var(--bs-warning);
|
|
color: white;
|
|
}
|
|
.problem-priority-low {
|
|
background-color: var(--bs-info);
|
|
color: white;
|
|
}
|
|
.problem-severity-mild {
|
|
background-color: var(--bs-info);
|
|
color: white;
|
|
}
|
|
.problem-severity-moderate {
|
|
background-color: var(--bs-warning);
|
|
color: white;
|
|
}
|
|
.problem-severity-severe {
|
|
background-color: var(--bs-danger);
|
|
color: white;
|
|
}
|
|
.timeline-item {
|
|
padding: 1rem;
|
|
border-left: 3px solid var(--bs-primary);
|
|
margin-bottom: 1rem;
|
|
background-color: rgba(var(--bs-light-rgb), 0.5);
|
|
}
|
|
.related-item {
|
|
transition: all 0.2s;
|
|
}
|
|
.related-item:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- begin breadcrumb -->
|
|
<ol class="breadcrumb float-xl-end">
|
|
<li class="breadcrumb-item"><a href="{% url 'dashboard' %}">Home</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'emr:dashboard' %}">EMR</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'emr:problem_list' %}">Problems</a></li>
|
|
<li class="breadcrumb-item active">{{ problem.problem_name }}</li>
|
|
</ol>
|
|
<!-- end breadcrumb -->
|
|
|
|
<!-- begin page-header -->
|
|
<h1 class="page-header">Problem Detail <small>Comprehensive problem information</small></h1>
|
|
<!-- end page-header -->
|
|
|
|
<!-- begin row -->
|
|
<div class="row">
|
|
<!-- begin col-12 -->
|
|
<div class="col-xl-12">
|
|
<!-- begin problem header -->
|
|
<div class="problem-header d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h2 class="mb-1">{{ problem.problem_name }}</h2>
|
|
<div class="d-flex align-items-center">
|
|
<span class="me-3">
|
|
<i class="bi bi-person-fill me-1"></i> {{ problem.patient.get_full_name }}
|
|
</span>
|
|
<span class="me-3">
|
|
<i class="bi bi-calendar-event me-1"></i> Onset: {{ problem.onset_date|default:"Not specified" }}
|
|
</span>
|
|
{% if problem.problem_code %}
|
|
<span>
|
|
<i class="bi bi-upc-scan me-1"></i> {{ problem.get_coding_system_display }}: {{ problem.problem_code }}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="d-flex">
|
|
<span class="badge problem-status-{{ problem.status|lower }} me-2">{{ problem.get_status_display }}</span>
|
|
<span class="badge problem-priority-{{ problem.priority|lower }} me-2">{{ problem.get_priority_display }} Priority</span>
|
|
<span class="badge problem-severity-{{ problem.severity|lower }}">{{ problem.get_severity_display }}</span>
|
|
</div>
|
|
</div>
|
|
<!-- end problem header -->
|
|
|
|
<!-- begin panel -->
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Problem 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-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>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="row">
|
|
<!-- begin col-6 -->
|
|
<div class="col-md-6">
|
|
<div class="mb-4">
|
|
<h5 class="mb-3">Basic Information</h5>
|
|
<table class="table table-bordered">
|
|
<tbody>
|
|
<tr>
|
|
<th width="35%">Problem ID</th>
|
|
<td>{{ problem.problem_id }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Problem Type</th>
|
|
<td>{{ problem.get_problem_type_display }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Status</th>
|
|
<td>{{ problem.get_status_display }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Onset Date</th>
|
|
<td>{{ problem.onset_date|default:"Not specified" }}</td>
|
|
</tr>
|
|
{% if problem.status == 'RESOLVED' or problem.status == 'REMISSION' %}
|
|
<tr>
|
|
<th>Resolution Date</th>
|
|
<td>{{ problem.resolution_date }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Duration</th>
|
|
<td>{{ problem.duration.days }} days</td>
|
|
</tr>
|
|
{% endif %}
|
|
<tr>
|
|
<th>Body Site</th>
|
|
<td>{{ problem.body_site|default:"Not specified" }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Laterality</th>
|
|
<td>{{ problem.get_laterality_display|default:"Not specified" }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{% if problem.clinical_notes %}
|
|
<div class="mb-4">
|
|
<h5 class="mb-3">Clinical Notes</h5>
|
|
<div class="p-3 bg-light rounded">
|
|
{{ problem.clinical_notes|linebreaks }}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if problem.patient_concerns %}
|
|
<div class="mb-4">
|
|
<h5 class="mb-3">Patient Concerns</h5>
|
|
<div class="p-3 bg-light rounded">
|
|
{{ problem.patient_concerns|linebreaks }}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<!-- end col-6 -->
|
|
|
|
<!-- begin col-6 -->
|
|
<div class="col-md-6">
|
|
<div class="mb-4">
|
|
<h5 class="mb-3">Provider Information</h5>
|
|
<table class="table table-bordered">
|
|
<tbody>
|
|
<tr>
|
|
<th width="35%">Diagnosing Provider</th>
|
|
<td>{{ problem.diagnosing_provider.get_full_name }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Managing Provider</th>
|
|
<td>{{ problem.managing_provider.get_full_name|default:"Not assigned" }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Related Encounter</th>
|
|
<td>
|
|
{% if problem.related_encounter %}
|
|
<a href="{% url 'emr:encounter_detail' problem.related_encounter.id %}">
|
|
{{ problem.related_encounter.encounter_type }} ({{ problem.related_encounter.start_datetime|date:"M d, Y" }})
|
|
</a>
|
|
{% else %}
|
|
Not linked to an encounter
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Verified</th>
|
|
<td>
|
|
{% if problem.verified %}
|
|
<span class="badge bg-success">Verified</span>
|
|
by {{ problem.verified_by.get_full_name }} on {{ problem.verified_date|date:"M d, Y" }}
|
|
{% else %}
|
|
<span class="badge bg-warning">Not Verified</span>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{% if problem.treatment_goals %}
|
|
<div class="mb-4">
|
|
<h5 class="mb-3">Treatment Goals</h5>
|
|
<div class="p-3 bg-light rounded">
|
|
{{ problem.treatment_goals|linebreaks }}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if problem.outcome_measures %}
|
|
<div class="mb-4">
|
|
<h5 class="mb-3">Outcome Measures</h5>
|
|
<div class="p-3 bg-light rounded">
|
|
{{ problem.outcome_measures|linebreaks }}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if problem.status == 'RESOLVED' or problem.status == 'REMISSION' %}
|
|
<div class="mb-4">
|
|
<h5 class="mb-3">Resolution Notes</h5>
|
|
<div class="p-3 bg-light rounded">
|
|
{{ problem.resolution_notes|linebreaks|default:"No resolution notes provided." }}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<!-- end col-6 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end panel -->
|
|
|
|
<!-- begin related care plans panel -->
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Related Care Plans</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>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
{% if problem.care_plans.all %}
|
|
<div class="row">
|
|
{% for care_plan in problem.care_plans.all %}
|
|
<div class="col-md-6 col-xl-4 mb-3">
|
|
<div class="card related-item h-100">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h5 class="card-title mb-0">{{ care_plan.title }}</h5>
|
|
<span class="badge bg-{{ care_plan.status|lower }}">{{ care_plan.get_status_display }}</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="card-text">{{ care_plan.description|truncatechars:100 }}</p>
|
|
<div class="progress mb-2" style="height: 10px;">
|
|
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: {{ care_plan.completion_percentage }}%">{{ care_plan.completion_percentage }}%</div>
|
|
</div>
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<small class="text-muted">{{ care_plan.get_plan_type_display }}</small>
|
|
<small class="text-muted">{{ care_plan.start_date|date:"M d, Y" }}</small>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<a href="{% url 'emr:care_plan_detail' care_plan.id %}" class="btn btn-sm btn-primary">View Care Plan</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="alert alert-info">
|
|
<i class="fa fa-info-circle me-2"></i> No care plans are associated with this problem.
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<!-- end related care plans panel -->
|
|
|
|
<!-- begin clinical notes panel -->
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Related Clinical Notes</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>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
{% if problem.related_clinical_notes.all %}
|
|
<div class="timeline">
|
|
{% for note in problem.related_clinical_notes.all %}
|
|
<div class="timeline-item">
|
|
<div class="timeline-time">
|
|
{{ note.note_datetime|date:"M d, Y" }} <small>{{ note.note_datetime|time:"h:i A" }}</small>
|
|
</div>
|
|
<div class="timeline-icon">
|
|
<a href="javascript:;"> </a>
|
|
</div>
|
|
<div class="timeline-content">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h5>{{ note.title }}</h5>
|
|
<span class="badge bg-{{ note.status|lower }}">{{ note.get_status_display }}</span>
|
|
</div>
|
|
<p class="mb-2">{{ note.content|truncatechars:200 }}</p>
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<small class="text-muted">{{ note.get_note_type_display }} by {{ note.author.get_full_name }}</small>
|
|
<a href="{% url 'emr:clinical_note_detail' note.id %}" class="btn btn-sm btn-primary">View Note</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="alert alert-info">
|
|
<i class="fa fa-info-circle me-2"></i> No clinical notes are associated with this problem.
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<!-- end clinical notes panel -->
|
|
|
|
<!-- begin action buttons -->
|
|
<div class="d-flex justify-content-between mt-3">
|
|
<div>
|
|
<a href="{% url 'emr:problem_list' %}" class="btn btn-secondary me-2">
|
|
<i class="fa fa-arrow-left me-1"></i> Back to Problem List
|
|
</a>
|
|
<a href="{% url 'emr:patient_detail' problem.patient.id %}" class="btn btn-info">
|
|
<i class="fa fa-user me-1"></i> Patient Profile
|
|
</a>
|
|
</div>
|
|
<div>
|
|
{% if problem.status != 'RESOLVED' and problem.status != 'REMISSION' %}
|
|
<a href="#" class="btn btn-success me-2" data-bs-toggle="modal" data-bs-target="#resolveModal">
|
|
<i class="fa fa-check-circle me-1"></i> Mark as Resolved
|
|
</a>
|
|
{% endif %}
|
|
<a href="{% url 'emr:problem_update' problem.id %}" class="btn btn-primary me-2">
|
|
<i class="fa fa-edit me-1"></i> Edit Problem
|
|
</a>
|
|
<a href="{% url 'emr:problem_delete' problem.id %}" class="btn btn-danger">
|
|
<i class="fa fa-trash me-1"></i> Delete
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- end action buttons -->
|
|
</div>
|
|
<!-- end col-12 -->
|
|
</div>
|
|
<!-- end row -->
|
|
|
|
<!-- begin resolve modal -->
|
|
<div class="modal fade" id="resolveModal" tabindex="-1" aria-labelledby="resolveModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="resolveModalLabel">Resolve Problem</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<form action="{% url 'emr:problem_resolve' problem.id %}" method="post">
|
|
{% csrf_token %}
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label for="resolution_date" class="form-label">Resolution Date</label>
|
|
<input type="date" class="form-control" id="resolution_date" name="resolution_date" value="{{ today|date:'Y-m-d' }}" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="resolution_status" class="form-label">Resolution Status</label>
|
|
<select class="form-select" id="resolution_status" name="status" required>
|
|
<option value="RESOLVED">Resolved</option>
|
|
<option value="REMISSION">Remission</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="resolution_notes" class="form-label">Resolution Notes</label>
|
|
<textarea class="form-control" id="resolution_notes" name="resolution_notes" rows="3" required></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="submit" class="btn btn-success">Resolve Problem</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end resolve modal -->
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
<script src="{% static 'plugins/moment/min/moment.min.js' %}"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Initialize tooltips
|
|
$('[data-bs-toggle="tooltip"]').tooltip();
|
|
|
|
// Handle HTMX events
|
|
document.body.addEventListener('htmx:afterSwap', function(evt) {
|
|
if (evt.detail.target.id === 'care-plans-container') {
|
|
// Reinitialize any components in the care plans container
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|