889 lines
45 KiB
HTML
889 lines
45 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}
|
|
{% if form.instance.id %}Edit Care Plan: {{ form.instance.title }}{% else %}New Care Plan{% endif %}
|
|
{% endblock %}
|
|
|
|
{% block css %}
|
|
<link href="{% static 'plugins/select2/dist/css/select2.min.css' %}" rel="stylesheet" />
|
|
<link href="{% static 'plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css' %}" rel="stylesheet" />
|
|
<link href="{% static 'plugins/bootstrap-icons/font/bootstrap-icons.css' %}" rel="stylesheet" />
|
|
<link href="{% static 'plugins/summernote/dist/summernote-lite.min.css' %}" rel="stylesheet" />
|
|
<style>
|
|
.form-floating > .form-control:focus ~ label,
|
|
.form-floating > .form-control:not(:placeholder-shown) ~ label,
|
|
.form-floating > .form-select ~ label {
|
|
opacity: .65;
|
|
transform: scale(.85) translateY(-0.5rem) translateX(0.15rem);
|
|
}
|
|
.form-floating > label {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
padding: 1rem 0.75rem;
|
|
pointer-events: none;
|
|
border: 1px solid transparent;
|
|
transform-origin: 0 0;
|
|
transition: opacity .1s ease-in-out, transform .1s ease-in-out;
|
|
}
|
|
.form-section {
|
|
padding: 1.5rem;
|
|
border-radius: 0.5rem;
|
|
background-color: rgba(var(--bs-light-rgb), 0.5);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.form-section-title {
|
|
margin-bottom: 1rem;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 1px solid var(--bs-gray-300);
|
|
}
|
|
.required-field label::after {
|
|
content: " *";
|
|
color: var(--bs-danger);
|
|
}
|
|
.help-sidebar {
|
|
position: sticky;
|
|
top: 1rem;
|
|
}
|
|
.help-card {
|
|
transition: all 0.2s;
|
|
}
|
|
.help-card:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
|
}
|
|
.dynamic-formset {
|
|
border: 1px solid var(--bs-gray-300);
|
|
border-radius: 0.5rem;
|
|
padding: 1rem;
|
|
margin-bottom: 1rem;
|
|
position: relative;
|
|
}
|
|
.dynamic-formset .remove-formset {
|
|
position: absolute;
|
|
top: 0.5rem;
|
|
right: 0.5rem;
|
|
}
|
|
.preview-section {
|
|
border: 1px solid var(--bs-gray-300);
|
|
border-radius: 0.5rem;
|
|
padding: 1rem;
|
|
margin-top: 1rem;
|
|
}
|
|
.preview-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.preview-content {
|
|
font-size: 0.9rem;
|
|
}
|
|
.preview-badge {
|
|
font-size: 0.8rem;
|
|
padding: 0.35em 0.65em;
|
|
}
|
|
</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">
|
|
{% if form.instance.id %}Edit Care Plan{% else %}New Care Plan{% endif %}
|
|
</li>
|
|
</ol>
|
|
<!-- end breadcrumb -->
|
|
|
|
<!-- begin page-header -->
|
|
<h1 class="page-header">
|
|
{% if form.instance.id %}
|
|
Edit Care Plan <small>Update care plan information</small>
|
|
{% else %}
|
|
New Care Plan <small>Create a new patient care plan</small>
|
|
{% endif %}
|
|
</h1>
|
|
<!-- end page-header -->
|
|
|
|
<!-- begin row -->
|
|
<div class="row">
|
|
<!-- begin col-9 -->
|
|
<div class="col-xl-9">
|
|
<!-- begin panel -->
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
{% if form.instance.id %}
|
|
Edit Care Plan: {{ form.instance.title }}
|
|
{% else %}
|
|
Care Plan Information
|
|
{% endif %}
|
|
</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">
|
|
<form method="post" id="carePlanForm">
|
|
{% csrf_token %}
|
|
|
|
{% if form.errors %}
|
|
<div class="alert alert-danger">
|
|
<strong>Error!</strong> Please correct the errors below.
|
|
{% if form.non_field_errors %}
|
|
<ul>
|
|
{% for error in form.non_field_errors %}
|
|
<li>{{ error }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Basic Information Section -->
|
|
<div class="form-section">
|
|
<h5 class="form-section-title">Basic Information</h5>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3 required-field">
|
|
<div class="form-floating">
|
|
{{ form.patient }}
|
|
<label for="{{ form.patient.id_for_label }}">Patient</label>
|
|
</div>
|
|
{% if form.patient.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.patient.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6 mb-3 required-field">
|
|
<div class="form-floating">
|
|
{{ form.title }}
|
|
<label for="{{ form.title.id_for_label }}">Care Plan Title</label>
|
|
</div>
|
|
{% if form.title.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.title.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3 required-field">
|
|
<div class="form-floating">
|
|
{{ form.plan_type }}
|
|
<label for="{{ form.plan_type.id_for_label }}">Plan Type</label>
|
|
</div>
|
|
{% if form.plan_type.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.plan_type.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6 mb-3 required-field">
|
|
<div class="form-floating">
|
|
{{ form.category }}
|
|
<label for="{{ form.category.id_for_label }}">Category</label>
|
|
</div>
|
|
{% if form.category.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.category.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12 mb-3">
|
|
<label for="{{ form.description.id_for_label }}">Description</label>
|
|
{{ form.description }}
|
|
{% if form.description.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.description.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Timeline Section -->
|
|
<div class="form-section">
|
|
<h5 class="form-section-title">Timeline</h5>
|
|
<div class="row">
|
|
<div class="col-md-4 mb-3 required-field">
|
|
<div class="form-floating">
|
|
{{ form.start_date }}
|
|
<label for="{{ form.start_date.id_for_label }}">Start Date</label>
|
|
</div>
|
|
{% if form.start_date.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.start_date.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<div class="form-floating">
|
|
{{ form.target_completion_date }}
|
|
<label for="{{ form.target_completion_date.id_for_label }}">Target Completion Date</label>
|
|
</div>
|
|
{% if form.target_completion_date.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.target_completion_date.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<div class="form-floating">
|
|
{{ form.end_date }}
|
|
<label for="{{ form.end_date.id_for_label }}">End Date</label>
|
|
</div>
|
|
{% if form.end_date.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.end_date.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-4 mb-3">
|
|
<div class="form-floating">
|
|
{{ form.next_review_date }}
|
|
<label for="{{ form.next_review_date.id_for_label }}">Next Review Date</label>
|
|
</div>
|
|
{% if form.next_review_date.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.next_review_date.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-4 mb-3 required-field">
|
|
<div class="form-floating">
|
|
{{ form.status }}
|
|
<label for="{{ form.status.id_for_label }}">Status</label>
|
|
</div>
|
|
{% if form.status.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.status.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-4 mb-3 required-field">
|
|
<div class="form-floating">
|
|
{{ form.priority }}
|
|
<label for="{{ form.priority.id_for_label }}">Priority</label>
|
|
</div>
|
|
{% if form.priority.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.priority.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3 required-field">
|
|
<div class="form-floating">
|
|
{{ form.completion_percentage }}
|
|
<label for="{{ form.completion_percentage.id_for_label }}">Completion Percentage</label>
|
|
</div>
|
|
{% if form.completion_percentage.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.completion_percentage.errors }}</div>
|
|
{% endif %}
|
|
<div class="progress mt-2" style="height: 10px;">
|
|
<div class="progress-bar bg-success" role="progressbar" id="completion-progress" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<div class="form-check form-switch mt-4">
|
|
{{ form.approved }}
|
|
<label class="form-check-label" for="{{ form.approved.id_for_label }}">Approved</label>
|
|
</div>
|
|
{% if form.approved.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.approved.errors }}</div>
|
|
{% endif %}
|
|
<div class="approved-fields" style="display: none;">
|
|
<div class="form-floating mt-2">
|
|
{{ form.approved_by }}
|
|
<label for="{{ form.approved_by.id_for_label }}">Approved By</label>
|
|
</div>
|
|
{% if form.approved_by.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.approved_by.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Provider Information Section -->
|
|
<div class="form-section">
|
|
<h5 class="form-section-title">Provider Information</h5>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3 required-field">
|
|
<div class="form-floating">
|
|
{{ form.primary_provider }}
|
|
<label for="{{ form.primary_provider.id_for_label }}">Primary Provider</label>
|
|
</div>
|
|
{% if form.primary_provider.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.primary_provider.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="{{ form.care_team.id_for_label }}">Care Team</label>
|
|
{{ form.care_team }}
|
|
{% if form.care_team.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.care_team.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Related Problems Section -->
|
|
<div class="form-section">
|
|
<h5 class="form-section-title">Related Problems</h5>
|
|
<div class="row">
|
|
<div class="col-md-12 mb-3">
|
|
<label for="{{ form.related_problems.id_for_label }}">Related Problems</label>
|
|
{{ form.related_problems }}
|
|
{% if form.related_problems.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.related_problems.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Goals & Objectives Section -->
|
|
<div class="form-section">
|
|
<h5 class="form-section-title">Goals & Objectives</h5>
|
|
<div class="row">
|
|
<div class="col-md-12 mb-3">
|
|
<label for="goals">Goals</label>
|
|
<div id="goals-container">
|
|
<div class="dynamic-formset goal-formset">
|
|
<button type="button" class="btn btn-sm btn-danger remove-formset" style="display: none;">
|
|
<i class="fa fa-times"></i>
|
|
</button>
|
|
<div class="row">
|
|
<div class="col-md-12 mb-3">
|
|
<div class="form-floating">
|
|
<input type="text" class="form-control" name="goal_title[]" placeholder="Goal Title">
|
|
<label>Goal Title</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12 mb-3">
|
|
<div class="form-floating">
|
|
<textarea class="form-control" name="goal_description[]" placeholder="Goal Description" style="height: 100px;"></textarea>
|
|
<label>Goal Description</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<div class="form-floating">
|
|
<input type="text" class="form-control datepicker" name="goal_target_date[]" placeholder="Target Date">
|
|
<label>Target Date</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<div class="form-floating">
|
|
<select class="form-select" name="goal_status[]">
|
|
<option value="not_started">Not Started</option>
|
|
<option value="in_progress">In Progress</option>
|
|
<option value="completed">Completed</option>
|
|
<option value="cancelled">Cancelled</option>
|
|
</select>
|
|
<label>Status</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="btn btn-sm btn-primary mt-2" id="add-goal">
|
|
<i class="fa fa-plus me-1"></i> Add Goal
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-4">
|
|
<div class="col-md-12 mb-3">
|
|
<label for="objectives">Objectives</label>
|
|
<div id="objectives-container">
|
|
<div class="dynamic-formset objective-formset">
|
|
<button type="button" class="btn btn-sm btn-danger remove-formset" style="display: none;">
|
|
<i class="fa fa-times"></i>
|
|
</button>
|
|
<div class="row">
|
|
<div class="col-md-12 mb-3">
|
|
<div class="form-floating">
|
|
<input type="text" class="form-control" name="objective_title[]" placeholder="Objective Title">
|
|
<label>Objective Title</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12 mb-3">
|
|
<div class="form-floating">
|
|
<textarea class="form-control" name="objective_description[]" placeholder="Objective Description" style="height: 100px;"></textarea>
|
|
<label>Objective Description</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<div class="form-floating">
|
|
<input type="text" class="form-control" name="objective_measure[]" placeholder="Measure">
|
|
<label>Measure</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<div class="form-floating">
|
|
<select class="form-select" name="objective_status[]">
|
|
<option value="not_started">Not Started</option>
|
|
<option value="in_progress">In Progress</option>
|
|
<option value="completed">Completed</option>
|
|
<option value="cancelled">Cancelled</option>
|
|
</select>
|
|
<label>Status</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="btn btn-sm btn-primary mt-2" id="add-objective">
|
|
<i class="fa fa-plus me-1"></i> Add Objective
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Interventions Section -->
|
|
<div class="form-section">
|
|
<h5 class="form-section-title">Interventions & Activities</h5>
|
|
<div class="row">
|
|
<div class="col-md-12 mb-3">
|
|
<label for="interventions">Interventions</label>
|
|
<div id="interventions-container">
|
|
<div class="dynamic-formset intervention-formset">
|
|
<button type="button" class="btn btn-sm btn-danger remove-formset" style="display: none;">
|
|
<i class="fa fa-times"></i>
|
|
</button>
|
|
<div class="row">
|
|
<div class="col-md-12 mb-3">
|
|
<div class="form-floating">
|
|
<input type="text" class="form-control" name="intervention_title[]" placeholder="Intervention Title">
|
|
<label>Intervention Title</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12 mb-3">
|
|
<div class="form-floating">
|
|
<textarea class="form-control" name="intervention_description[]" placeholder="Intervention Description" style="height: 100px;"></textarea>
|
|
<label>Intervention Description</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<div class="form-floating">
|
|
<input type="text" class="form-control" name="intervention_frequency[]" placeholder="Frequency">
|
|
<label>Frequency</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<div class="form-floating">
|
|
<select class="form-select" name="intervention_status[]">
|
|
<option value="not_started">Not Started</option>
|
|
<option value="in_progress">In Progress</option>
|
|
<option value="completed">Completed</option>
|
|
<option value="cancelled">Cancelled</option>
|
|
</select>
|
|
<label>Status</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="btn btn-sm btn-primary mt-2" id="add-intervention">
|
|
<i class="fa fa-plus me-1"></i> Add Intervention
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Monitoring Section -->
|
|
<div class="form-section">
|
|
<h5 class="form-section-title">Monitoring & Evaluation</h5>
|
|
<div class="row">
|
|
<div class="col-md-12 mb-3">
|
|
<label for="monitoring_parameters">Monitoring Parameters</label>
|
|
<div id="monitoring-container">
|
|
<div class="dynamic-formset monitoring-formset">
|
|
<button type="button" class="btn btn-sm btn-danger remove-formset" style="display: none;">
|
|
<i class="fa fa-times"></i>
|
|
</button>
|
|
<div class="row">
|
|
<div class="col-md-12 mb-3">
|
|
<div class="form-floating">
|
|
<input type="text" class="form-control" name="monitoring_title[]" placeholder="Parameter Title">
|
|
<label>Parameter Title</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12 mb-3">
|
|
<div class="form-floating">
|
|
<textarea class="form-control" name="monitoring_description[]" placeholder="Parameter Description" style="height: 100px;"></textarea>
|
|
<label>Parameter Description</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<div class="form-floating">
|
|
<input type="text" class="form-control" name="monitoring_frequency[]" placeholder="Frequency">
|
|
<label>Frequency</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<div class="form-floating">
|
|
<input type="text" class="form-control" name="monitoring_target_range[]" placeholder="Target Range">
|
|
<label>Target Range</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="btn btn-sm btn-primary mt-2" id="add-monitoring">
|
|
<i class="fa fa-plus me-1"></i> Add Monitoring Parameter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-4">
|
|
<div class="col-md-12 mb-3">
|
|
<label for="{{ form.progress_notes.id_for_label }}">Progress Notes</label>
|
|
{{ form.progress_notes }}
|
|
{% if form.progress_notes.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.progress_notes.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Patient Involvement Section -->
|
|
<div class="form-section">
|
|
<h5 class="form-section-title">Patient Involvement</h5>
|
|
<div class="row">
|
|
<div class="col-md-12 mb-3">
|
|
<label for="{{ form.patient_goals.id_for_label }}">Patient Goals</label>
|
|
{{ form.patient_goals }}
|
|
{% if form.patient_goals.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.patient_goals.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12 mb-3">
|
|
<label for="{{ form.patient_preferences.id_for_label }}">Patient Preferences</label>
|
|
{{ form.patient_preferences }}
|
|
{% if form.patient_preferences.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.patient_preferences.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12 mb-3">
|
|
<label for="{{ form.patient_barriers.id_for_label }}">Identified Barriers</label>
|
|
{{ form.patient_barriers }}
|
|
{% if form.patient_barriers.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.patient_barriers.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Actions -->
|
|
<div class="d-flex justify-content-between mt-4">
|
|
<a href="{% url 'emr:care_plan_list' %}" class="btn btn-secondary">
|
|
<i class="fa fa-arrow-left me-1"></i> Cancel
|
|
</a>
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fa fa-save me-1"></i>
|
|
{% if form.instance.id %}Update Care Plan{% else %}Create Care Plan{% endif %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<!-- end panel -->
|
|
</div>
|
|
<!-- end col-9 -->
|
|
|
|
<!-- begin col-3 -->
|
|
<div class="col-xl-3">
|
|
<!-- begin help sidebar -->
|
|
<div class="help-sidebar">
|
|
<!-- Preview Card -->
|
|
<div class="card mb-3 help-card">
|
|
<div class="card-header bg-primary text-white">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fa fa-eye me-1"></i> Care Plan Preview
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="preview-section">
|
|
<div class="preview-title" id="preview-title">Care Plan Title</div>
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<span class="text-muted" id="preview-patient">Patient Name</span>
|
|
<span class="badge bg-secondary preview-badge" id="preview-status">Draft</span>
|
|
</div>
|
|
<div class="preview-content" id="preview-description">
|
|
Care plan description will appear here...
|
|
</div>
|
|
<div class="progress mt-3" style="height: 10px;">
|
|
<div class="progress-bar bg-success" role="progressbar" id="preview-progress" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<div class="d-flex justify-content-between align-items-center mt-1">
|
|
<small class="text-muted">Progress</small>
|
|
<small class="text-muted" id="preview-percentage">0%</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Tips Card -->
|
|
<div class="card mb-3 help-card">
|
|
<div class="card-header bg-info text-white">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fa fa-lightbulb me-1"></i> Quick Tips
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<ul class="ps-3">
|
|
<li class="mb-2">Fields marked with <span class="text-danger">*</span> are required.</li>
|
|
<li class="mb-2">Set realistic goals and objectives that are measurable.</li>
|
|
<li class="mb-2">Include the patient in care planning for better adherence.</li>
|
|
<li class="mb-2">Specify monitoring parameters to track progress effectively.</li>
|
|
<li class="mb-2">Regular reviews improve care plan effectiveness.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Care Plan Types Card -->
|
|
<div class="card help-card">
|
|
<div class="card-header bg-success text-white">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fa fa-info-circle me-1"></i> Care Plan Types
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<dl>
|
|
<dt>Treatment</dt>
|
|
<dd>Focused on treating specific conditions</dd>
|
|
|
|
<dt>Nursing</dt>
|
|
<dd>Nursing-specific interventions and monitoring</dd>
|
|
|
|
<dt>Rehabilitation</dt>
|
|
<dd>Recovery and restoration of function</dd>
|
|
|
|
<dt>Palliative</dt>
|
|
<dd>Comfort and symptom management</dd>
|
|
|
|
<dt>Preventive</dt>
|
|
<dd>Prevention of disease or complications</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end help sidebar -->
|
|
</div>
|
|
<!-- end col-3 -->
|
|
</div>
|
|
<!-- end row -->
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
<script src="{% static 'plugins/select2/dist/js/select2.min.js' %}"></script>
|
|
<script src="{% static 'plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js' %}"></script>
|
|
<script src="{% static 'plugins/summernote/dist/summernote-lite.min.js' %}"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Initialize select2
|
|
$('.form-select').select2({
|
|
theme: 'bootstrap',
|
|
width: '100%'
|
|
});
|
|
|
|
// Initialize datepicker
|
|
$('.datepicker').datepicker({
|
|
format: 'yyyy-mm-dd',
|
|
autoclose: true,
|
|
todayHighlight: true
|
|
});
|
|
|
|
// Initialize summernote
|
|
$('.summernote').summernote({
|
|
height: 150,
|
|
toolbar: [
|
|
['style', ['style']],
|
|
['font', ['bold', 'underline', 'clear']],
|
|
['para', ['ul', 'ol', 'paragraph']],
|
|
['insert', ['link']],
|
|
['view', ['fullscreen', 'codeview', 'help']]
|
|
]
|
|
});
|
|
|
|
// Show/hide approved by field based on approved checkbox
|
|
function toggleApprovedFields() {
|
|
if ($('#{{ form.approved.id_for_label }}').is(':checked')) {
|
|
$('.approved-fields').show();
|
|
} else {
|
|
$('.approved-fields').hide();
|
|
}
|
|
}
|
|
|
|
// Update completion progress bar
|
|
function updateCompletionProgress() {
|
|
var percentage = $('#{{ form.completion_percentage.id_for_label }}').val() || 0;
|
|
$('#completion-progress').css('width', percentage + '%').attr('aria-valuenow', percentage);
|
|
}
|
|
|
|
// Update preview
|
|
function updatePreview() {
|
|
$('#preview-title').text($('#{{ form.title.id_for_label }}').val() || 'Care Plan Title');
|
|
|
|
var patientSelect = $('#{{ form.patient.id_for_label }}');
|
|
var patientText = patientSelect.find('option:selected').text() || 'Patient Name';
|
|
$('#preview-patient').text(patientText);
|
|
|
|
var statusSelect = $('#{{ form.status.id_for_label }}');
|
|
var statusText = statusSelect.find('option:selected').text() || 'Draft';
|
|
var statusClass = 'bg-secondary';
|
|
|
|
switch(statusSelect.val()) {
|
|
case 'ACTIVE':
|
|
statusClass = 'bg-success';
|
|
break;
|
|
case 'DRAFT':
|
|
statusClass = 'bg-warning';
|
|
break;
|
|
case 'COMPLETED':
|
|
statusClass = 'bg-secondary';
|
|
break;
|
|
case 'ON_HOLD':
|
|
statusClass = 'bg-info';
|
|
break;
|
|
}
|
|
|
|
$('#preview-status').text(statusText).removeClass().addClass('badge preview-badge ' + statusClass);
|
|
|
|
$('#preview-description').text($('#{{ form.description.id_for_label }}').val() || 'Care plan description will appear here...');
|
|
|
|
var percentage = $('#{{ form.completion_percentage.id_for_label }}').val() || 0;
|
|
$('#preview-progress').css('width', percentage + '%').attr('aria-valuenow', percentage);
|
|
$('#preview-percentage').text(percentage + '%');
|
|
}
|
|
|
|
// Dynamic formsets
|
|
function setupFormsetRemoval() {
|
|
$('.remove-formset').click(function() {
|
|
$(this).closest('.dynamic-formset').remove();
|
|
});
|
|
}
|
|
|
|
// Add goal formset
|
|
$('#add-goal').click(function() {
|
|
var clone = $('.goal-formset').first().clone();
|
|
clone.find('input, textarea, select').val('');
|
|
clone.find('.remove-formset').show();
|
|
$('#goals-container').append(clone);
|
|
setupFormsetRemoval();
|
|
|
|
// Reinitialize datepicker for the cloned element
|
|
clone.find('.datepicker').datepicker({
|
|
format: 'yyyy-mm-dd',
|
|
autoclose: true,
|
|
todayHighlight: true
|
|
});
|
|
});
|
|
|
|
// Add objective formset
|
|
$('#add-objective').click(function() {
|
|
var clone = $('.objective-formset').first().clone();
|
|
clone.find('input, textarea, select').val('');
|
|
clone.find('.remove-formset').show();
|
|
$('#objectives-container').append(clone);
|
|
setupFormsetRemoval();
|
|
});
|
|
|
|
// Add intervention formset
|
|
$('#add-intervention').click(function() {
|
|
var clone = $('.intervention-formset').first().clone();
|
|
clone.find('input, textarea, select').val('');
|
|
clone.find('.remove-formset').show();
|
|
$('#interventions-container').append(clone);
|
|
setupFormsetRemoval();
|
|
});
|
|
|
|
// Add monitoring formset
|
|
$('#add-monitoring').click(function() {
|
|
var clone = $('.monitoring-formset').first().clone();
|
|
clone.find('input, textarea, select').val('');
|
|
clone.find('.remove-formset').show();
|
|
$('#monitoring-container').append(clone);
|
|
setupFormsetRemoval();
|
|
});
|
|
|
|
// Initial toggle and update
|
|
toggleApprovedFields();
|
|
updateCompletionProgress();
|
|
updatePreview();
|
|
setupFormsetRemoval();
|
|
|
|
// Toggle on change
|
|
$('#{{ form.approved.id_for_label }}').change(toggleApprovedFields);
|
|
$('#{{ form.completion_percentage.id_for_label }}').on('input', function() {
|
|
updateCompletionProgress();
|
|
updatePreview();
|
|
});
|
|
|
|
// Update preview on change
|
|
$('#{{ form.title.id_for_label }}, #{{ form.patient.id_for_label }}, #{{ form.status.id_for_label }}, #{{ form.description.id_for_label }}').on('change input', updatePreview);
|
|
|
|
// Form validation
|
|
$('#carePlanForm').submit(function(e) {
|
|
var isValid = true;
|
|
|
|
// Check required fields
|
|
$('.required-field select, .required-field input, .required-field textarea').each(function() {
|
|
if (!$(this).val()) {
|
|
$(this).addClass('is-invalid');
|
|
isValid = false;
|
|
} else {
|
|
$(this).removeClass('is-invalid');
|
|
}
|
|
});
|
|
|
|
// Check approved by if approved is checked
|
|
if ($('#{{ form.approved.id_for_label }}').is(':checked') && !$('#{{ form.approved_by.id_for_label }}').val()) {
|
|
$('#{{ form.approved_by.id_for_label }}').addClass('is-invalid');
|
|
isValid = false;
|
|
}
|
|
|
|
// Check date consistency
|
|
var startDate = new Date($('#{{ form.start_date.id_for_label }}').val());
|
|
var targetDate = new Date($('#{{ form.target_completion_date.id_for_label }}').val());
|
|
var endDate = new Date($('#{{ form.end_date.id_for_label }}').val());
|
|
|
|
if ($('#{{ form.target_completion_date.id_for_label }}').val() && targetDate < startDate) {
|
|
$('#{{ form.target_completion_date.id_for_label }}').addClass('is-invalid');
|
|
isValid = false;
|
|
}
|
|
|
|
if ($('#{{ form.end_date.id_for_label }}').val() && endDate < startDate) {
|
|
$('#{{ form.end_date.id_for_label }}').addClass('is-invalid');
|
|
isValid = false;
|
|
}
|
|
|
|
if (!isValid) {
|
|
e.preventDefault();
|
|
$('html, body').animate({
|
|
scrollTop: $('.is-invalid').first().offset().top - 100
|
|
}, 200);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|