342 lines
14 KiB
HTML
342 lines
14 KiB
HTML
{% load static %}
|
|
|
|
<!-- Care Plan Summary Widget -->
|
|
<div class="care-plan-summary-widget">
|
|
{% if care_plans %}
|
|
<div class="row">
|
|
{% for plan in care_plans %}
|
|
<div class="col-lg-6 col-md-12 mb-3">
|
|
<div class="card border-0 shadow-sm h-100">
|
|
<div class="card-header bg-{{ plan.get_status_color }} text-white py-2">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h6 class="card-title mb-0">
|
|
<i class="fa fa-clipboard-list me-2"></i>{{ plan.title|truncatechars:30 }}
|
|
</h6>
|
|
<span class="badge bg-white text-{{ plan.get_status_color }} fs-11px">
|
|
{{ plan.get_status_display }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-body p-3">
|
|
<!-- Plan Type and Priority -->
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<span class="badge bg-light text-dark">{{ plan.get_plan_type_display }}</span>
|
|
<span class="badge bg-{{ plan.get_priority_color }}">{{ plan.get_priority_display }}</span>
|
|
</div>
|
|
|
|
<!-- Progress Bar -->
|
|
<div class="mb-3">
|
|
<div class="d-flex justify-content-between align-items-center mb-1">
|
|
<small class="text-muted">Progress</small>
|
|
<small class="fw-bold">{{ plan.completion_percentage }}%</small>
|
|
</div>
|
|
<div class="progress" style="height: 6px;">
|
|
<div class="progress-bar bg-{{ plan.get_progress_color }}"
|
|
style="width: {{ plan.completion_percentage }}%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Plan Details -->
|
|
<div class="small text-muted mb-2">
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<i class="fa fa-calendar me-1"></i>
|
|
Start: {{ plan.start_date|date:"M d, Y" }}
|
|
</div>
|
|
<div class="col-6">
|
|
{% if plan.target_completion_date %}
|
|
<i class="fa fa-flag me-1"></i>
|
|
Target: {{ plan.target_completion_date|date:"M d, Y" }}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Primary Provider -->
|
|
<div class="small text-muted mb-2">
|
|
<i class="fa fa-user-md me-1"></i>
|
|
Provider: {{ plan.primary_provider.get_full_name }}
|
|
</div>
|
|
|
|
<!-- Care Team -->
|
|
{% if plan.care_team.exists %}
|
|
<div class="small text-muted mb-2">
|
|
<i class="fa fa-users me-1"></i>
|
|
Team: {{ plan.care_team.count }} member{{ plan.care_team.count|pluralize }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Goals Summary -->
|
|
{% if plan.goals %}
|
|
<div class="mb-2">
|
|
<small class="text-muted">Goals ({{ plan.goals|length }}):</small>
|
|
<div class="small">
|
|
{% for goal in plan.goals|slice:":2" %}
|
|
<div class="text-truncate">• {{ goal.description|truncatechars:40 }}</div>
|
|
{% endfor %}
|
|
{% if plan.goals|length > 2 %}
|
|
<div class="text-muted">... and {{ plan.goals|length|add:"-2" }} more</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Next Review -->
|
|
{% if plan.next_review_date %}
|
|
<div class="small mb-2">
|
|
<i class="fa fa-clock me-1 {% if plan.is_overdue %}text-danger{% else %}text-info{% endif %}"></i>
|
|
<span class="{% if plan.is_overdue %}text-danger fw-bold{% else %}text-muted{% endif %}">
|
|
Next Review: {{ plan.next_review_date|date:"M d, Y" }}
|
|
{% if plan.is_overdue %}(Overdue){% endif %}
|
|
</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Related Problems -->
|
|
{% if plan.related_problems.exists %}
|
|
<div class="small text-muted mb-2">
|
|
<i class="fa fa-link me-1"></i>
|
|
{{ plan.related_problems.count }} related problem{{ plan.related_problems.count|pluralize }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="d-flex justify-content-between align-items-center mt-3">
|
|
<div class="btn-group btn-group-sm">
|
|
<a href="{% url 'emr:care_plan_detail' plan.pk %}"
|
|
class="btn btn-outline-primary btn-sm" title="View Details">
|
|
<i class="fa fa-eye"></i>
|
|
</a>
|
|
<a href="{% url 'emr:care_plan_update' plan.pk %}"
|
|
class="btn btn-outline-secondary btn-sm" title="Edit">
|
|
<i class="fa fa-edit"></i>
|
|
</a>
|
|
{% if plan.status == 'ACTIVE' %}
|
|
<button class="btn btn-outline-success btn-sm"
|
|
onclick="updatePlanProgress({{ plan.pk }})" title="Update Progress">
|
|
<i class="fa fa-tasks"></i>
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Status Indicators -->
|
|
<div class="d-flex align-items-center">
|
|
{% if plan.approved %}
|
|
<i class="fa fa-check-circle text-success me-1" title="Approved"></i>
|
|
{% endif %}
|
|
{% if plan.is_overdue %}
|
|
<i class="fa fa-exclamation-triangle text-warning me-1" title="Review Overdue"></i>
|
|
{% endif %}
|
|
{% if plan.completion_percentage == 100 %}
|
|
<i class="fa fa-trophy text-warning" title="Completed"></i>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer with Last Updated -->
|
|
<div class="card-footer bg-light py-2">
|
|
<small class="text-muted">
|
|
<i class="fa fa-clock me-1"></i>
|
|
Updated {{ plan.updated_at|timesince }} ago
|
|
{% if plan.last_reviewed %}
|
|
• Last reviewed {{ plan.last_reviewed|date:"M d" }}
|
|
{% endif %}
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Summary Statistics -->
|
|
<div class="row mt-3">
|
|
<div class="col-md-3 col-6 mb-2">
|
|
<div class="card border-0 bg-primary text-white">
|
|
<div class="card-body p-3 text-center">
|
|
<div class="fs-18px fw-bold">{{ care_plans|length }}</div>
|
|
<div class="fs-12px">Total Plans</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 col-6 mb-2">
|
|
<div class="card border-0 bg-success text-white">
|
|
<div class="card-body p-3 text-center">
|
|
<div class="fs-18px fw-bold">{{ active_plans_count }}</div>
|
|
<div class="fs-12px">Active</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 col-6 mb-2">
|
|
<div class="card border-0 bg-warning text-white">
|
|
<div class="card-body p-3 text-center">
|
|
<div class="fs-18px fw-bold">{{ overdue_plans_count }}</div>
|
|
<div class="fs-12px">Overdue</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 col-6 mb-2">
|
|
<div class="card border-0 bg-info text-white">
|
|
<div class="card-body p-3 text-center">
|
|
<div class="fs-18px fw-bold">{{ avg_completion }}%</div>
|
|
<div class="fs-12px">Avg Progress</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions Bar -->
|
|
<div class="d-flex justify-content-between align-items-center mt-3 p-3 bg-light rounded">
|
|
<div>
|
|
<strong>Care Plan Management</strong>
|
|
<div class="small text-muted">Manage patient care coordination and goals</div>
|
|
</div>
|
|
<div class="btn-group">
|
|
<a href="{% url 'emr:care_plan_create' %}" class="btn btn-primary btn-sm">
|
|
<i class="fa fa-plus me-2"></i>New Care Plan
|
|
</a>
|
|
<a href="{% url 'emr:care_plan_list' %}" class="btn btn-outline-secondary btn-sm">
|
|
<i class="fa fa-list me-2"></i>View All
|
|
</a>
|
|
<button class="btn btn-outline-info btn-sm" onclick="generateCarePlanReport()">
|
|
<i class="fa fa-chart-bar me-2"></i>Report
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{% else %}
|
|
<!-- Empty State -->
|
|
<div class="text-center py-5">
|
|
<div class="mb-4">
|
|
<i class="fa fa-clipboard-list fa-4x text-muted"></i>
|
|
</div>
|
|
<h5 class="text-muted mb-3">No Care Plans</h5>
|
|
<p class="text-muted mb-4">
|
|
No care plans have been created for this patient yet.<br>
|
|
Care plans help coordinate patient care and track treatment goals.
|
|
</p>
|
|
<div class="btn-group">
|
|
<a href="{% url 'emr:care_plan_create' %}" class="btn btn-primary">
|
|
<i class="fa fa-plus me-2"></i>Create First Care Plan
|
|
</a>
|
|
<a href="{% url 'emr:care_plan_templates' %}" class="btn btn-outline-secondary">
|
|
<i class="fa fa-template me-2"></i>Browse Templates
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<script>
|
|
function updatePlanProgress(planId) {
|
|
// Show modal or inline form to update care plan progress
|
|
var newProgress = prompt('Enter new completion percentage (0-100):');
|
|
if (newProgress !== null && !isNaN(newProgress) && newProgress >= 0 && newProgress <= 100) {
|
|
$.ajax({
|
|
url: '{% url "emr:care_plan_update_progress" 0 %}'.replace('0', planId),
|
|
method: 'POST',
|
|
data: {
|
|
'completion_percentage': newProgress,
|
|
'csrfmiddlewaretoken': '{{ csrf_token }}'
|
|
},
|
|
success: function(response) {
|
|
if (response.success) {
|
|
toastr.success('Care plan progress updated');
|
|
location.reload();
|
|
} else {
|
|
toastr.error('Failed to update progress');
|
|
}
|
|
},
|
|
error: function() {
|
|
toastr.error('An error occurred while updating progress');
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function generateCarePlanReport() {
|
|
window.open('{% url "emr:care_plan_report" %}?patient_id={{ patient.id }}', '_blank');
|
|
}
|
|
|
|
// Auto-refresh care plan data every 5 minutes
|
|
setInterval(function() {
|
|
// Reload the care plan summary widget
|
|
$.ajax({
|
|
url: '{% url "emr:care_plan_summary_api" %}',
|
|
data: { 'patient_id': '{{ patient.id }}' },
|
|
success: function(data) {
|
|
$('.care-plan-summary-widget').html(data.html);
|
|
}
|
|
});
|
|
}, 300000);
|
|
</script>
|
|
|
|
<style>
|
|
.care-plan-summary-widget .card {
|
|
transition: transform 0.2s ease-in-out;
|
|
}
|
|
|
|
.care-plan-summary-widget .card:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.care-plan-summary-widget .progress {
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.care-plan-summary-widget .btn-group-sm .btn {
|
|
padding: 0.25rem 0.5rem;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.care-plan-summary-widget .card-header {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.care-plan-summary-widget .card-footer {
|
|
border-top: 1px solid rgba(0,0,0,.125);
|
|
}
|
|
|
|
/* Status color helpers */
|
|
.bg-draft { background-color: #6c757d !important; }
|
|
.bg-active { background-color: #198754 !important; }
|
|
.bg-on_hold { background-color: #ffc107 !important; }
|
|
.bg-completed { background-color: #0d6efd !important; }
|
|
.bg-cancelled { background-color: #dc3545 !important; }
|
|
|
|
.text-draft { color: #6c757d !important; }
|
|
.text-active { color: #198754 !important; }
|
|
.text-on_hold { color: #ffc107 !important; }
|
|
.text-completed { color: #0d6efd !important; }
|
|
.text-cancelled { color: #dc3545 !important; }
|
|
|
|
/* Priority colors */
|
|
.bg-low { background-color: #6c757d !important; }
|
|
.bg-routine { background-color: #0d6efd !important; }
|
|
.bg-urgent { background-color: #fd7e14 !important; }
|
|
.bg-asap { background-color: #dc3545 !important; }
|
|
.bg-stat { background-color: #dc3545 !important; }
|
|
|
|
/* Progress colors */
|
|
.bg-progress-low { background-color: #dc3545 !important; }
|
|
.bg-progress-medium { background-color: #ffc107 !important; }
|
|
.bg-progress-high { background-color: #198754 !important; }
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.care-plan-summary-widget .card-body {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.care-plan-summary-widget .btn-group {
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
|
|
.care-plan-summary-widget .btn-group .btn {
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
}
|
|
</style>
|
|
|