800 lines
42 KiB
HTML
800 lines
42 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}{{ care_plan.title }} | Care Plan 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" />
|
|
<link href="{% static 'plugins/chart.js/dist/Chart.min.css' %}" rel="stylesheet" />
|
|
<style>
|
|
.care-plan-badge {
|
|
font-size: 0.85rem;
|
|
padding: 0.35em 0.65em;
|
|
}
|
|
.care-plan-header {
|
|
background: linear-gradient(45deg, var(--bs-blue), var(--bs-indigo));
|
|
color: white;
|
|
padding: 1.5rem;
|
|
border-radius: 0.5rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.care-plan-status-active {
|
|
background-color: var(--bs-success);
|
|
color: white;
|
|
}
|
|
.care-plan-status-completed {
|
|
background-color: var(--bs-secondary);
|
|
color: white;
|
|
}
|
|
.care-plan-status-draft {
|
|
background-color: var(--bs-warning);
|
|
color: white;
|
|
}
|
|
.care-plan-status-on-hold {
|
|
background-color: var(--bs-info);
|
|
color: white;
|
|
}
|
|
.care-plan-priority-high {
|
|
background-color: var(--bs-danger);
|
|
color: white;
|
|
}
|
|
.care-plan-priority-medium {
|
|
background-color: var(--bs-warning);
|
|
color: white;
|
|
}
|
|
.care-plan-priority-low {
|
|
background-color: var(--bs-info);
|
|
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);
|
|
}
|
|
.goal-item {
|
|
padding: 1rem;
|
|
border-left: 4px solid var(--bs-success);
|
|
margin-bottom: 1rem;
|
|
background-color: rgba(var(--bs-light-rgb), 0.5);
|
|
}
|
|
.objective-item {
|
|
padding: 1rem;
|
|
border-left: 4px solid var(--bs-info);
|
|
margin-bottom: 1rem;
|
|
background-color: rgba(var(--bs-light-rgb), 0.5);
|
|
}
|
|
.intervention-item {
|
|
padding: 1rem;
|
|
border-left: 4px solid var(--bs-warning);
|
|
margin-bottom: 1rem;
|
|
background-color: rgba(var(--bs-light-rgb), 0.5);
|
|
}
|
|
.activity-item {
|
|
padding: 1rem;
|
|
border-left: 4px solid var(--bs-purple);
|
|
margin-bottom: 1rem;
|
|
background-color: rgba(var(--bs-light-rgb), 0.5);
|
|
}
|
|
.outcome-item {
|
|
padding: 1rem;
|
|
border-left: 4px solid var(--bs-teal);
|
|
margin-bottom: 1rem;
|
|
background-color: rgba(var(--bs-light-rgb), 0.5);
|
|
}
|
|
.monitoring-item {
|
|
padding: 1rem;
|
|
border-left: 4px solid var(--bs-cyan);
|
|
margin-bottom: 1rem;
|
|
background-color: rgba(var(--bs-light-rgb), 0.5);
|
|
}
|
|
.nav-tabs .nav-link.active {
|
|
font-weight: bold;
|
|
border-bottom: 3px solid var(--bs-primary);
|
|
}
|
|
</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:care_plan_list' %}">Care Plans</a></li>
|
|
<li class="breadcrumb-item active">{{ care_plan.title }}</li>
|
|
</ol>
|
|
<!-- end breadcrumb -->
|
|
|
|
<!-- begin page-header -->
|
|
<h1 class="page-header">Care Plan Detail <small>Comprehensive care plan information</small></h1>
|
|
<!-- end page-header -->
|
|
|
|
<!-- begin row -->
|
|
<div class="row">
|
|
<!-- begin col-12 -->
|
|
<div class="col-xl-12">
|
|
<!-- begin care plan header -->
|
|
<div class="care-plan-header d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h2 class="mb-1">{{ care_plan.title }}</h2>
|
|
<div class="d-flex align-items-center">
|
|
<span class="me-3">
|
|
<i class="bi bi-person-fill me-1"></i> {{ care_plan.patient.get_full_name }}
|
|
</span>
|
|
<span class="me-3">
|
|
<i class="bi bi-calendar-event me-1"></i> Start: {{ care_plan.start_date }}
|
|
{% if care_plan.end_date %}
|
|
- End: {{ care_plan.end_date }}
|
|
{% endif %}
|
|
</span>
|
|
<span>
|
|
<i class="bi bi-person-badge me-1"></i> {{ care_plan.primary_provider.get_full_name }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex">
|
|
<span class="badge care-plan-status-{{ care_plan.status|lower }} me-2">{{ care_plan.get_status_display }}</span>
|
|
<span class="badge care-plan-priority-{{ care_plan.priority|lower }}">{{ care_plan.get_priority_display }} Priority</span>
|
|
</div>
|
|
</div>
|
|
<!-- end care plan header -->
|
|
|
|
<!-- begin progress panel -->
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Progress</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">
|
|
<div class="col-md-6">
|
|
<h5 class="mb-3">Completion Progress</h5>
|
|
<div class="progress" style="height: 25px;">
|
|
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success"
|
|
role="progressbar"
|
|
style="width: {{ care_plan.completion_percentage }}%;"
|
|
aria-valuenow="{{ care_plan.completion_percentage }}"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100">
|
|
{{ care_plan.completion_percentage }}% Complete
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<h5 class="mb-3">Plan Timeline</h5>
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered">
|
|
<tbody>
|
|
<tr>
|
|
<th width="30%">Start Date</th>
|
|
<td>{{ care_plan.start_date }}</td>
|
|
</tr>
|
|
{% if care_plan.target_completion_date %}
|
|
<tr>
|
|
<th>Target Completion</th>
|
|
<td>{{ care_plan.target_completion_date }}</td>
|
|
</tr>
|
|
{% endif %}
|
|
{% if care_plan.end_date %}
|
|
<tr>
|
|
<th>End Date</th>
|
|
<td>{{ care_plan.end_date }}</td>
|
|
</tr>
|
|
{% endif %}
|
|
{% if care_plan.last_reviewed %}
|
|
<tr>
|
|
<th>Last Reviewed</th>
|
|
<td>{{ care_plan.last_reviewed }}</td>
|
|
</tr>
|
|
{% endif %}
|
|
{% if care_plan.next_review_date %}
|
|
<tr>
|
|
<th>Next Review</th>
|
|
<td>
|
|
{{ care_plan.next_review_date }}
|
|
{% if care_plan.is_overdue %}
|
|
<span class="badge bg-danger ms-2">Overdue</span>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endif %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<h5 class="mb-3">Activity Chart</h5>
|
|
<canvas id="activityChart" height="200"></canvas>
|
|
|
|
<div class="mt-4">
|
|
<h5 class="mb-3">Approval Status</h5>
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered">
|
|
<tbody>
|
|
<tr>
|
|
<th width="30%">Status</th>
|
|
<td>
|
|
{% if care_plan.approved %}
|
|
<span class="badge bg-success">Approved</span>
|
|
{% else %}
|
|
<span class="badge bg-warning">Pending Approval</span>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% if care_plan.approved %}
|
|
<tr>
|
|
<th>Approved By</th>
|
|
<td>{{ care_plan.approved_by.get_full_name }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Approved Date</th>
|
|
<td>{{ care_plan.approved_date }}</td>
|
|
</tr>
|
|
{% endif %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end progress panel -->
|
|
|
|
<!-- begin care plan details panel -->
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Care Plan 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>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<!-- begin nav tabs -->
|
|
<ul class="nav nav-tabs" id="carePlanTabs" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab" aria-controls="overview" aria-selected="true">Overview</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="goals-tab" data-bs-toggle="tab" data-bs-target="#goals" type="button" role="tab" aria-controls="goals" aria-selected="false">Goals & Objectives</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="interventions-tab" data-bs-toggle="tab" data-bs-target="#interventions" type="button" role="tab" aria-controls="interventions" aria-selected="false">Interventions</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="monitoring-tab" data-bs-toggle="tab" data-bs-target="#monitoring" type="button" role="tab" aria-controls="monitoring" aria-selected="false">Monitoring</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="patient-tab" data-bs-toggle="tab" data-bs-target="#patient" type="button" role="tab" aria-controls="patient" aria-selected="false">Patient Involvement</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="outcomes-tab" data-bs-toggle="tab" data-bs-target="#outcomes" type="button" role="tab" aria-controls="outcomes" aria-selected="false">Outcomes</button>
|
|
</li>
|
|
</ul>
|
|
<!-- end nav tabs -->
|
|
|
|
<!-- begin tab content -->
|
|
<div class="tab-content" id="carePlanTabsContent">
|
|
<!-- Overview Tab -->
|
|
<div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
|
|
<div class="p-3">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h5 class="mb-3">Basic Information</h5>
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered">
|
|
<tbody>
|
|
<tr>
|
|
<th width="30%">Care Plan ID</th>
|
|
<td>{{ care_plan.care_plan_id }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Plan Type</th>
|
|
<td>{{ care_plan.get_plan_type_display }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Category</th>
|
|
<td>{{ care_plan.get_category_display }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Status</th>
|
|
<td>{{ care_plan.get_status_display }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Priority</th>
|
|
<td>{{ care_plan.get_priority_display }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h5 class="mb-3 mt-4">Description</h5>
|
|
<div class="p-3 bg-light rounded">
|
|
{{ care_plan.description|linebreaks }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<h5 class="mb-3">Provider Information</h5>
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered">
|
|
<tbody>
|
|
<tr>
|
|
<th width="30%">Primary Provider</th>
|
|
<td>{{ care_plan.primary_provider.get_full_name }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Care Team</th>
|
|
<td>
|
|
{% if care_plan.care_team.all %}
|
|
<ul class="mb-0 ps-3">
|
|
{% for provider in care_plan.care_team.all %}
|
|
<li>{{ provider.get_full_name }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% else %}
|
|
No additional care team members
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h5 class="mb-3 mt-4">Related Problems</h5>
|
|
{% if care_plan.related_problems.all %}
|
|
<div class="list-group">
|
|
{% for problem in care_plan.related_problems.all %}
|
|
<a href="{% url 'emr:problem_detail' problem.id %}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
|
{{ problem.problem_name }}
|
|
<span class="badge bg-{{ problem.status|lower }} rounded-pill">{{ problem.get_status_display }}</span>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="alert alert-info">
|
|
<i class="fa fa-info-circle me-2"></i> No problems are associated with this care plan.
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Goals & Objectives Tab -->
|
|
<div class="tab-pane fade" id="goals" role="tabpanel" aria-labelledby="goals-tab">
|
|
<div class="p-3">
|
|
<h5 class="mb-3">Goals</h5>
|
|
{% if care_plan.goals %}
|
|
<div class="goals-list">
|
|
{% for goal in care_plan.goals %}
|
|
<div class="goal-item">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h6 class="mb-1">{{ goal.title }}</h6>
|
|
<span class="badge bg-{{ goal.status|default:'secondary'|lower }}">{{ goal.status|default:'Not Started' }}</span>
|
|
</div>
|
|
<p class="mb-1">{{ goal.description }}</p>
|
|
{% if goal.target_date %}
|
|
<small class="text-muted">Target Date: {{ goal.target_date }}</small>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="alert alert-info">
|
|
<i class="fa fa-info-circle me-2"></i> No goals have been defined for this care plan.
|
|
</div>
|
|
{% endif %}
|
|
|
|
<h5 class="mb-3 mt-4">Objectives</h5>
|
|
{% if care_plan.objectives %}
|
|
<div class="objectives-list">
|
|
{% for objective in care_plan.objectives %}
|
|
<div class="objective-item">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h6 class="mb-1">{{ objective.title }}</h6>
|
|
<span class="badge bg-{{ objective.status|default:'secondary'|lower }}">{{ objective.status|default:'Not Started' }}</span>
|
|
</div>
|
|
<p class="mb-1">{{ objective.description }}</p>
|
|
{% if objective.measure %}
|
|
<small class="text-muted">Measure: {{ objective.measure }}</small>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="alert alert-info">
|
|
<i class="fa fa-info-circle me-2"></i> No objectives have been defined for this care plan.
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Interventions Tab -->
|
|
<div class="tab-pane fade" id="interventions" role="tabpanel" aria-labelledby="interventions-tab">
|
|
<div class="p-3">
|
|
<h5 class="mb-3">Interventions</h5>
|
|
{% if care_plan.interventions %}
|
|
<div class="interventions-list">
|
|
{% for intervention in care_plan.interventions %}
|
|
<div class="intervention-item">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h6 class="mb-1">{{ intervention.title }}</h6>
|
|
<span class="badge bg-{{ intervention.status|default:'secondary'|lower }}">{{ intervention.status|default:'Not Started' }}</span>
|
|
</div>
|
|
<p class="mb-1">{{ intervention.description }}</p>
|
|
{% if intervention.frequency %}
|
|
<small class="text-muted">Frequency: {{ intervention.frequency }}</small>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="alert alert-info">
|
|
<i class="fa fa-info-circle me-2"></i> No interventions have been defined for this care plan.
|
|
</div>
|
|
{% endif %}
|
|
|
|
<h5 class="mb-3 mt-4">Activities</h5>
|
|
{% if care_plan.activities %}
|
|
<div class="activities-list">
|
|
{% for activity in care_plan.activities %}
|
|
<div class="activity-item">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h6 class="mb-1">{{ activity.title }}</h6>
|
|
<span class="badge bg-{{ activity.status|default:'secondary'|lower }}">{{ activity.status|default:'Not Started' }}</span>
|
|
</div>
|
|
<p class="mb-1">{{ activity.description }}</p>
|
|
{% if activity.assigned_to %}
|
|
<small class="text-muted">Assigned to: {{ activity.assigned_to }}</small>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="alert alert-info">
|
|
<i class="fa fa-info-circle me-2"></i> No activities have been defined for this care plan.
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Monitoring Tab -->
|
|
<div class="tab-pane fade" id="monitoring" role="tabpanel" aria-labelledby="monitoring-tab">
|
|
<div class="p-3">
|
|
<h5 class="mb-3">Monitoring Parameters</h5>
|
|
{% if care_plan.monitoring_parameters %}
|
|
<div class="monitoring-list">
|
|
{% for parameter in care_plan.monitoring_parameters %}
|
|
<div class="monitoring-item">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h6 class="mb-1">{{ parameter.title }}</h6>
|
|
<span class="badge bg-{{ parameter.status|default:'secondary'|lower }}">{{ parameter.status|default:'Not Started' }}</span>
|
|
</div>
|
|
<p class="mb-1">{{ parameter.description }}</p>
|
|
{% if parameter.frequency %}
|
|
<small class="text-muted">Frequency: {{ parameter.frequency }}</small>
|
|
{% endif %}
|
|
{% if parameter.target_range %}
|
|
<small class="text-muted d-block">Target Range: {{ parameter.target_range }}</small>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="alert alert-info">
|
|
<i class="fa fa-info-circle me-2"></i> No monitoring parameters have been defined for this care plan.
|
|
</div>
|
|
{% endif %}
|
|
|
|
<h5 class="mb-3 mt-4">Evaluation Criteria</h5>
|
|
{% if care_plan.evaluation_criteria %}
|
|
<div class="evaluation-list">
|
|
{% for criteria in care_plan.evaluation_criteria %}
|
|
<div class="monitoring-item">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h6 class="mb-1">{{ criteria.title }}</h6>
|
|
<span class="badge bg-{{ criteria.status|default:'secondary'|lower }}">{{ criteria.status|default:'Not Evaluated' }}</span>
|
|
</div>
|
|
<p class="mb-1">{{ criteria.description }}</p>
|
|
{% if criteria.measure %}
|
|
<small class="text-muted">Measure: {{ criteria.measure }}</small>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="alert alert-info">
|
|
<i class="fa fa-info-circle me-2"></i> No evaluation criteria have been defined for this care plan.
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if care_plan.progress_notes %}
|
|
<h5 class="mb-3 mt-4">Progress Notes</h5>
|
|
<div class="p-3 bg-light rounded">
|
|
{{ care_plan.progress_notes|linebreaks }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Patient Involvement Tab -->
|
|
<div class="tab-pane fade" id="patient" role="tabpanel" aria-labelledby="patient-tab">
|
|
<div class="p-3">
|
|
{% if care_plan.patient_goals %}
|
|
<h5 class="mb-3">Patient Goals</h5>
|
|
<div class="p-3 bg-light rounded mb-4">
|
|
{{ care_plan.patient_goals|linebreaks }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if care_plan.patient_preferences %}
|
|
<h5 class="mb-3">Patient Preferences</h5>
|
|
<div class="p-3 bg-light rounded mb-4">
|
|
{{ care_plan.patient_preferences|linebreaks }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if care_plan.patient_barriers %}
|
|
<h5 class="mb-3">Identified Barriers</h5>
|
|
<div class="p-3 bg-light rounded mb-4">
|
|
{{ care_plan.patient_barriers|linebreaks }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<h5 class="mb-3">Resources Needed</h5>
|
|
{% if care_plan.resources_needed %}
|
|
<div class="list-group mb-4">
|
|
{% for resource in care_plan.resources_needed %}
|
|
<div class="list-group-item">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h6 class="mb-1">{{ resource.name }}</h6>
|
|
<span class="badge bg-{{ resource.status|default:'secondary'|lower }}">{{ resource.status|default:'Pending' }}</span>
|
|
</div>
|
|
{% if resource.description %}
|
|
<p class="mb-1">{{ resource.description }}</p>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="alert alert-info mb-4">
|
|
<i class="fa fa-info-circle me-2"></i> No resources have been identified for this care plan.
|
|
</div>
|
|
{% endif %}
|
|
|
|
<h5 class="mb-3">Support Systems</h5>
|
|
{% if care_plan.support_systems %}
|
|
<div class="list-group">
|
|
{% for support in care_plan.support_systems %}
|
|
<div class="list-group-item">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h6 class="mb-1">{{ support.name }}</h6>
|
|
<span class="badge bg-{{ support.type|default:'secondary'|lower }}">{{ support.type|default:'Other' }}</span>
|
|
</div>
|
|
{% if support.description %}
|
|
<p class="mb-1">{{ support.description }}</p>
|
|
{% endif %}
|
|
{% if support.contact %}
|
|
<small class="text-muted">Contact: {{ support.contact }}</small>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="alert alert-info">
|
|
<i class="fa fa-info-circle me-2"></i> No support systems have been identified for this care plan.
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Outcomes Tab -->
|
|
<div class="tab-pane fade" id="outcomes" role="tabpanel" aria-labelledby="outcomes-tab">
|
|
<div class="p-3">
|
|
<h5 class="mb-3">Outcomes Achieved</h5>
|
|
{% if care_plan.outcomes_achieved %}
|
|
<div class="outcomes-list">
|
|
{% for outcome in care_plan.outcomes_achieved %}
|
|
<div class="outcome-item">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h6 class="mb-1">{{ outcome.title }}</h6>
|
|
<span class="badge bg-{{ outcome.status|default:'success'|lower }}">{{ outcome.status|default:'Achieved' }}</span>
|
|
</div>
|
|
<p class="mb-1">{{ outcome.description }}</p>
|
|
{% if outcome.date_achieved %}
|
|
<small class="text-muted">Date Achieved: {{ outcome.date_achieved }}</small>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="alert alert-info">
|
|
<i class="fa fa-info-circle me-2"></i> No outcomes have been recorded for this care plan.
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end tab content -->
|
|
</div>
|
|
</div>
|
|
<!-- end care plan details 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 care_plan.clinical_notes.all %}
|
|
<div class="timeline">
|
|
{% for note in care_plan.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 care plan.
|
|
</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:care_plan_list' %}" class="btn btn-secondary me-2">
|
|
<i class="fa fa-arrow-left me-1"></i> Back to Care Plans
|
|
</a>
|
|
<a href="{% url 'emr:patient_detail' care_plan.patient.id %}" class="btn btn-info">
|
|
<i class="fa fa-user me-1"></i> Patient Profile
|
|
</a>
|
|
</div>
|
|
<div>
|
|
{% if not care_plan.approved %}
|
|
<a href="#" class="btn btn-success me-2" data-bs-toggle="modal" data-bs-target="#approveModal">
|
|
<i class="fa fa-check-circle me-1"></i> Approve Plan
|
|
</a>
|
|
{% endif %}
|
|
<a href="{% url 'emr:care_plan_update' care_plan.id %}" class="btn btn-primary me-2">
|
|
<i class="fa fa-edit me-1"></i> Edit Care Plan
|
|
</a>
|
|
<a href="{% url 'emr:care_plan_delete' care_plan.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 approve modal -->
|
|
<div class="modal fade" id="approveModal" tabindex="-1" aria-labelledby="approveModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="approveModalLabel">Approve Care Plan</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<form action="{% url 'emr:care_plan_approve' care_plan.id %}" method="post">
|
|
{% csrf_token %}
|
|
<div class="modal-body">
|
|
<p>You are about to approve this care plan. This action will mark the plan as officially approved and ready for implementation.</p>
|
|
<div class="mb-3">
|
|
<label for="approval_notes" class="form-label">Approval Notes (Optional)</label>
|
|
<textarea class="form-control" id="approval_notes" name="approval_notes" rows="3"></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">Approve Care Plan</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end approve modal -->
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
<script src="{% static 'plugins/moment/min/moment.min.js' %}"></script>
|
|
<script src="{% static 'plugins/chart.js/dist/Chart.min.js' %}"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Initialize tooltips
|
|
$('[data-bs-toggle="tooltip"]').tooltip();
|
|
|
|
// Initialize activity chart
|
|
var ctx = document.getElementById('activityChart').getContext('2d');
|
|
var activityChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['Initial', 'Week 1', 'Week 2', 'Week 3', 'Week 4', 'Current'],
|
|
datasets: [{
|
|
label: 'Completion Progress',
|
|
data: [0, 15, 30, 45, 60, {{ care_plan.completion_percentage }}],
|
|
backgroundColor: 'rgba(40, 167, 69, 0.2)',
|
|
borderColor: 'rgba(40, 167, 69, 1)',
|
|
borderWidth: 2,
|
|
tension: 0.4
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
max: 100,
|
|
ticks: {
|
|
callback: function(value) {
|
|
return value + '%';
|
|
}
|
|
}
|
|
}
|
|
},
|
|
plugins: {
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(context) {
|
|
return context.dataset.label + ': ' + context.raw + '%';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Handle HTMX events
|
|
document.body.addEventListener('htmx:afterSwap', function(evt) {
|
|
if (evt.detail.target.id === 'clinical-notes-container') {
|
|
// Reinitialize any components in the clinical notes container
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|