2025-08-12 13:33:25 +03:00

1209 lines
64 KiB
HTML

{% extends 'base.html' %}
{% load static %}
{% block title %}Care Plan{% endblock %}
{% block content %}
<div id="content" class="app-content">
<div class="container">
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
<li class="breadcrumb-item"><a href="{% url 'emr:dashboard' %}">EMR</a></li>
<li class="breadcrumb-item active">Care Plan</li>
</ul>
<div class="row align-items-center mb-3">
<div class="col">
<h1 class="page-header">Care Plan Management</h1>
<p class="text-muted">Comprehensive patient care planning and coordination</p>
</div>
<div class="col-auto">
<div class="btn-group">
{% if care_plan %}
<button class="btn btn-primary" onclick="saveCarePlan()">
<i class="fa fa-save me-2"></i>Save Plan
</button>
<button class="btn btn-outline-secondary" onclick="printPlan()">
<i class="fa fa-print me-2"></i>Print
</button>
<button class="btn btn-outline-info" onclick="sharePlan()">
<i class="fa fa-share me-2"></i>Share
</button>
{% else %}
<button class="btn btn-primary" onclick="createCarePlan()">
<i class="fa fa-plus me-2"></i>Create Plan
</button>
{% endif %}
</div>
</div>
</div>
<!-- Patient Information -->
<div class="row mb-4">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Patient Information</h4>
<div class="card-tools">
<button class="btn btn-outline-primary btn-sm" onclick="selectPatient()">
<i class="fa fa-search me-1"></i>Select Patient
</button>
</div>
</div>
<div class="card-body">
{% if patient %}
<div class="row">
<div class="col-md-3">
<p><strong>Name:</strong> {{ patient.first_name }} {{ patient.last_name }}</p>
<p><strong>DOB:</strong> {{ patient.date_of_birth|date:"M d, Y" }}</p>
<p><strong>Age:</strong> {{ patient.age }}</p>
</div>
<div class="col-md-3">
<p><strong>MRN:</strong> {{ patient.patient_id }}</p>
<p><strong>Gender:</strong> {{ patient.get_gender_display }}</p>
<p><strong>Phone:</strong> {{ patient.phone_primary|default:"Not provided" }}</p>
</div>
<div class="col-md-3">
<p><strong>Primary Care Provider:</strong> {{ patient.primary_care_provider|default:"Not assigned" }}</p>
<p><strong>Insurance:</strong> {{ patient.primary_insurance|default:"Not provided" }}</p>
<p><strong>Emergency Contact:</strong> {{ patient.emergency_contact_name|default:"Not provided" }}</p>
</div>
<div class="col-md-3">
<p><strong>Allergies:</strong> {{ patient.allergies|default:"NKDA" }}</p>
<p><strong>Code Status:</strong> {{ patient.code_status|default:"Full Code" }}</p>
<p><strong>Care Plan Status:</strong>
<span class="badge bg-{{ care_plan.status|default:'secondary' }}">
{{ care_plan.get_status_display|default:"Not Created" }}
</span>
</p>
</div>
</div>
{% else %}
<div class="text-center py-3">
<i class="fa fa-user fa-2x text-muted mb-2"></i>
<p class="text-muted">No patient selected. Please select a patient to create care plan.</p>
</div>
{% endif %}
</div>
</div>
</div>
</div>
{% if patient %}
<!-- Care Plan Form -->
<form id="carePlanForm">
{% csrf_token %}
<input type="hidden" name="patient_id" value="{{ patient.patient_id }}">
<!-- Plan Overview -->
<div class="row mb-4">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Plan Overview</h4>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">Plan Name</label>
<input type="text" class="form-control" name="plan_name"
value="{{ care_plan.plan_name|default:'' }}" required>
</div>
</div>
<div class="col-md-3">
<div class="mb-3">
<label class="form-label">Start Date</label>
<input type="date" class="form-control" name="start_date"
value="{{ care_plan.start_date|date:'Y-m-d'|default:today }}" required>
</div>
</div>
<div class="col-md-3">
<div class="mb-3">
<label class="form-label">Target End Date</label>
<input type="date" class="form-control" name="target_end_date"
value="{{ care_plan.target_end_date|date:'Y-m-d'|default:'' }}">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">Primary Care Team</label>
<select class="form-select" name="primary_care_team">
<option value="">Select care team...</option>
<option value="internal_medicine" {% if care_plan.primary_care_team == 'internal_medicine' %}selected{% endif %}>Internal Medicine</option>
<option value="family_medicine" {% if care_plan.primary_care_team == 'family_medicine' %}selected{% endif %}>Family Medicine</option>
<option value="cardiology" {% if care_plan.primary_care_team == 'cardiology' %}selected{% endif %}>Cardiology</option>
<option value="oncology" {% if care_plan.primary_care_team == 'oncology' %}selected{% endif %}>Oncology</option>
<option value="neurology" {% if care_plan.primary_care_team == 'neurology' %}selected{% endif %}>Neurology</option>
<option value="psychiatry" {% if care_plan.primary_care_team == 'psychiatry' %}selected{% endif %}>Psychiatry</option>
<option value="geriatrics" {% if care_plan.primary_care_team == 'geriatrics' %}selected{% endif %}>Geriatrics</option>
<option value="palliative" {% if care_plan.primary_care_team == 'palliative' %}selected{% endif %}>Palliative Care</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">Care Coordinator</label>
<input type="text" class="form-control" name="care_coordinator"
value="{{ care_plan.care_coordinator|default:user.get_full_name }}">
</div>
</div>
</div>
<div class="mb-3">
<label class="form-label">Plan Description</label>
<textarea class="form-control" name="plan_description" rows="3">{{ care_plan.plan_description|default:'' }}</textarea>
</div>
</div>
</div>
</div>
</div>
<!-- Health Conditions -->
<div class="row mb-4">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Health Conditions</h4>
<div class="card-tools">
<button type="button" class="btn btn-outline-primary btn-sm" onclick="addCondition()">
<i class="fa fa-plus me-1"></i>Add Condition
</button>
<button type="button" class="btn btn-outline-secondary btn-sm" onclick="importDiagnoses()">
<i class="fa fa-download me-1"></i>Import Diagnoses
</button>
</div>
</div>
<div class="card-body">
<div id="healthConditions">
{% for condition in health_conditions %}
<div class="condition-item mb-3">
<div class="row">
<div class="col-md-4">
<label class="form-label">Condition/Diagnosis</label>
<input type="text" class="form-control" name="condition_name[]" value="{{ condition.name }}">
</div>
<div class="col-md-2">
<label class="form-label">Priority</label>
<select class="form-select" name="condition_priority[]">
<option value="high" {% if condition.priority == 'high' %}selected{% endif %}>High</option>
<option value="medium" {% if condition.priority == 'medium' %}selected{% endif %}>Medium</option>
<option value="low" {% if condition.priority == 'low' %}selected{% endif %}>Low</option>
</select>
</div>
<div class="col-md-2">
<label class="form-label">Status</label>
<select class="form-select" name="condition_status[]">
<option value="active" {% if condition.status == 'active' %}selected{% endif %}>Active</option>
<option value="stable" {% if condition.status == 'stable' %}selected{% endif %}>Stable</option>
<option value="improving" {% if condition.status == 'improving' %}selected{% endif %}>Improving</option>
<option value="worsening" {% if condition.status == 'worsening' %}selected{% endif %}>Worsening</option>
<option value="resolved" {% if condition.status == 'resolved' %}selected{% endif %}>Resolved</option>
</select>
</div>
<div class="col-md-3">
<label class="form-label">Notes</label>
<input type="text" class="form-control" name="condition_notes[]" value="{{ condition.notes }}">
</div>
<div class="col-md-1">
<label class="form-label">&nbsp;</label>
<button type="button" class="btn btn-outline-danger form-control" onclick="removeCondition(this)">
<i class="fa fa-times"></i>
</button>
</div>
</div>
</div>
{% empty %}
<div class="condition-item mb-3">
<div class="row">
<div class="col-md-4">
<label class="form-label">Condition/Diagnosis</label>
<input type="text" class="form-control" name="condition_name[]" placeholder="Enter condition or diagnosis">
</div>
<div class="col-md-2">
<label class="form-label">Priority</label>
<select class="form-select" name="condition_priority[]">
<option value="high">High</option>
<option value="medium" selected>Medium</option>
<option value="low">Low</option>
</select>
</div>
<div class="col-md-2">
<label class="form-label">Status</label>
<select class="form-select" name="condition_status[]">
<option value="active" selected>Active</option>
<option value="stable">Stable</option>
<option value="improving">Improving</option>
<option value="worsening">Worsening</option>
<option value="resolved">Resolved</option>
</select>
</div>
<div class="col-md-3">
<label class="form-label">Notes</label>
<input type="text" class="form-control" name="condition_notes[]">
</div>
<div class="col-md-1">
<label class="form-label">&nbsp;</label>
<button type="button" class="btn btn-outline-danger form-control" onclick="removeCondition(this)">
<i class="fa fa-times"></i>
</button>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
<!-- Care Goals -->
<div class="row mb-4">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Care Goals</h4>
<div class="card-tools">
<button type="button" class="btn btn-outline-primary btn-sm" onclick="addGoal()">
<i class="fa fa-plus me-1"></i>Add Goal
</button>
</div>
</div>
<div class="card-body">
<div id="careGoals">
{% for goal in care_goals %}
<div class="goal-item mb-3">
<div class="row">
<div class="col-md-4">
<label class="form-label">Goal Description</label>
<textarea class="form-control" name="goal_description[]" rows="2">{{ goal.description }}</textarea>
</div>
<div class="col-md-2">
<label class="form-label">Target Date</label>
<input type="date" class="form-control" name="goal_target_date[]" value="{{ goal.target_date|date:'Y-m-d' }}">
</div>
<div class="col-md-2">
<label class="form-label">Priority</label>
<select class="form-select" name="goal_priority[]">
<option value="high" {% if goal.priority == 'high' %}selected{% endif %}>High</option>
<option value="medium" {% if goal.priority == 'medium' %}selected{% endif %}>Medium</option>
<option value="low" {% if goal.priority == 'low' %}selected{% endif %}>Low</option>
</select>
</div>
<div class="col-md-2">
<label class="form-label">Status</label>
<select class="form-select" name="goal_status[]">
<option value="not_started" {% if goal.status == 'not_started' %}selected{% endif %}>Not Started</option>
<option value="in_progress" {% if goal.status == 'in_progress' %}selected{% endif %}>In Progress</option>
<option value="achieved" {% if goal.status == 'achieved' %}selected{% endif %}>Achieved</option>
<option value="modified" {% if goal.status == 'modified' %}selected{% endif %}>Modified</option>
<option value="discontinued" {% if goal.status == 'discontinued' %}selected{% endif %}>Discontinued</option>
</select>
</div>
<div class="col-md-1">
<label class="form-label">Progress %</label>
<input type="number" class="form-control" name="goal_progress[]" min="0" max="100" value="{{ goal.progress }}">
</div>
<div class="col-md-1">
<label class="form-label">&nbsp;</label>
<button type="button" class="btn btn-outline-danger form-control" onclick="removeGoal(this)">
<i class="fa fa-times"></i>
</button>
</div>
</div>
</div>
{% empty %}
<div class="goal-item mb-3">
<div class="row">
<div class="col-md-4">
<label class="form-label">Goal Description</label>
<textarea class="form-control" name="goal_description[]" rows="2" placeholder="Describe the care goal"></textarea>
</div>
<div class="col-md-2">
<label class="form-label">Target Date</label>
<input type="date" class="form-control" name="goal_target_date[]">
</div>
<div class="col-md-2">
<label class="form-label">Priority</label>
<select class="form-select" name="goal_priority[]">
<option value="high">High</option>
<option value="medium" selected>Medium</option>
<option value="low">Low</option>
</select>
</div>
<div class="col-md-2">
<label class="form-label">Status</label>
<select class="form-select" name="goal_status[]">
<option value="not_started" selected>Not Started</option>
<option value="in_progress">In Progress</option>
<option value="achieved">Achieved</option>
<option value="modified">Modified</option>
<option value="discontinued">Discontinued</option>
</select>
</div>
<div class="col-md-1">
<label class="form-label">Progress %</label>
<input type="number" class="form-control" name="goal_progress[]" min="0" max="100" value="0">
</div>
<div class="col-md-1">
<label class="form-label">&nbsp;</label>
<button type="button" class="btn btn-outline-danger form-control" onclick="removeGoal(this)">
<i class="fa fa-times"></i>
</button>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
<!-- Interventions -->
<div class="row mb-4">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Interventions & Activities</h4>
<div class="card-tools">
<button type="button" class="btn btn-outline-primary btn-sm" onclick="addIntervention()">
<i class="fa fa-plus me-1"></i>Add Intervention
</button>
</div>
</div>
<div class="card-body">
<div id="interventions">
{% for intervention in interventions %}
<div class="intervention-item mb-3">
<div class="row">
<div class="col-md-3">
<label class="form-label">Intervention Type</label>
<select class="form-select" name="intervention_type[]">
<option value="medication" {% if intervention.type == 'medication' %}selected{% endif %}>Medication</option>
<option value="therapy" {% if intervention.type == 'therapy' %}selected{% endif %}>Therapy</option>
<option value="education" {% if intervention.type == 'education' %}selected{% endif %}>Patient Education</option>
<option value="monitoring" {% if intervention.type == 'monitoring' %}selected{% endif %}>Monitoring</option>
<option value="lifestyle" {% if intervention.type == 'lifestyle' %}selected{% endif %}>Lifestyle Modification</option>
<option value="procedure" {% if intervention.type == 'procedure' %}selected{% endif %}>Procedure</option>
<option value="referral" {% if intervention.type == 'referral' %}selected{% endif %}>Referral</option>
<option value="other" {% if intervention.type == 'other' %}selected{% endif %}>Other</option>
</select>
</div>
<div class="col-md-4">
<label class="form-label">Description</label>
<textarea class="form-control" name="intervention_description[]" rows="2">{{ intervention.description }}</textarea>
</div>
<div class="col-md-2">
<label class="form-label">Frequency</label>
<input type="text" class="form-control" name="intervention_frequency[]" value="{{ intervention.frequency }}" placeholder="e.g., Daily, Weekly">
</div>
<div class="col-md-2">
<label class="form-label">Responsible Provider</label>
<input type="text" class="form-control" name="intervention_provider[]" value="{{ intervention.provider }}">
</div>
<div class="col-md-1">
<label class="form-label">&nbsp;</label>
<button type="button" class="btn btn-outline-danger form-control" onclick="removeIntervention(this)">
<i class="fa fa-times"></i>
</button>
</div>
</div>
</div>
{% empty %}
<div class="intervention-item mb-3">
<div class="row">
<div class="col-md-3">
<label class="form-label">Intervention Type</label>
<select class="form-select" name="intervention_type[]">
<option value="medication">Medication</option>
<option value="therapy">Therapy</option>
<option value="education">Patient Education</option>
<option value="monitoring">Monitoring</option>
<option value="lifestyle">Lifestyle Modification</option>
<option value="procedure">Procedure</option>
<option value="referral">Referral</option>
<option value="other">Other</option>
</select>
</div>
<div class="col-md-4">
<label class="form-label">Description</label>
<textarea class="form-control" name="intervention_description[]" rows="2" placeholder="Describe the intervention"></textarea>
</div>
<div class="col-md-2">
<label class="form-label">Frequency</label>
<input type="text" class="form-control" name="intervention_frequency[]" placeholder="e.g., Daily, Weekly">
</div>
<div class="col-md-2">
<label class="form-label">Responsible Provider</label>
<input type="text" class="form-control" name="intervention_provider[]">
</div>
<div class="col-md-1">
<label class="form-label">&nbsp;</label>
<button type="button" class="btn btn-outline-danger form-control" onclick="removeIntervention(this)">
<i class="fa fa-times"></i>
</button>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
<!-- Care Team -->
<div class="row mb-4">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Care Team Members</h4>
<div class="card-tools">
<button type="button" class="btn btn-outline-primary btn-sm" onclick="addTeamMember()">
<i class="fa fa-plus me-1"></i>Add Member
</button>
</div>
</div>
<div class="card-body">
<div id="careTeam">
{% for member in care_team %}
<div class="team-member-item mb-3">
<div class="row">
<div class="col-md-3">
<label class="form-label">Name</label>
<input type="text" class="form-control" name="team_member_name[]" value="{{ member.name }}">
</div>
<div class="col-md-2">
<label class="form-label">Role</label>
<select class="form-select" name="team_member_role[]">
<option value="physician" {% if member.role == 'physician' %}selected{% endif %}>Physician</option>
<option value="nurse" {% if member.role == 'nurse' %}selected{% endif %}>Nurse</option>
<option value="therapist" {% if member.role == 'therapist' %}selected{% endif %}>Therapist</option>
<option value="social_worker" {% if member.role == 'social_worker' %}selected{% endif %}>Social Worker</option>
<option value="pharmacist" {% if member.role == 'pharmacist' %}selected{% endif %}>Pharmacist</option>
<option value="dietitian" {% if member.role == 'dietitian' %}selected{% endif %}>Dietitian</option>
<option value="case_manager" {% if member.role == 'case_manager' %}selected{% endif %}>Case Manager</option>
<option value="specialist" {% if member.role == 'specialist' %}selected{% endif %}>Specialist</option>
<option value="other" {% if member.role == 'other' %}selected{% endif %}>Other</option>
</select>
</div>
<div class="col-md-2">
<label class="form-label">Specialty</label>
<input type="text" class="form-control" name="team_member_specialty[]" value="{{ member.specialty }}">
</div>
<div class="col-md-2">
<label class="form-label">Phone</label>
<input type="text" class="form-control" name="team_member_phone[]" value="{{ member.phone }}">
</div>
<div class="col-md-2">
<label class="form-label">Email</label>
<input type="email" class="form-control" name="team_member_email[]" value="{{ member.email }}">
</div>
<div class="col-md-1">
<label class="form-label">&nbsp;</label>
<button type="button" class="btn btn-outline-danger form-control" onclick="removeTeamMember(this)">
<i class="fa fa-times"></i>
</button>
</div>
</div>
</div>
{% empty %}
<div class="team-member-item mb-3">
<div class="row">
<div class="col-md-3">
<label class="form-label">Name</label>
<input type="text" class="form-control" name="team_member_name[]" placeholder="Provider name">
</div>
<div class="col-md-2">
<label class="form-label">Role</label>
<select class="form-select" name="team_member_role[]">
<option value="physician">Physician</option>
<option value="nurse">Nurse</option>
<option value="therapist">Therapist</option>
<option value="social_worker">Social Worker</option>
<option value="pharmacist">Pharmacist</option>
<option value="dietitian">Dietitian</option>
<option value="case_manager">Case Manager</option>
<option value="specialist">Specialist</option>
<option value="other">Other</option>
</select>
</div>
<div class="col-md-2">
<label class="form-label">Specialty</label>
<input type="text" class="form-control" name="team_member_specialty[]">
</div>
<div class="col-md-2">
<label class="form-label">Phone</label>
<input type="text" class="form-control" name="team_member_phone[]">
</div>
<div class="col-md-2">
<label class="form-label">Email</label>
<input type="email" class="form-control" name="team_member_email[]">
</div>
<div class="col-md-1">
<label class="form-label">&nbsp;</label>
<button type="button" class="btn btn-outline-danger form-control" onclick="removeTeamMember(this)">
<i class="fa fa-times"></i>
</button>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
<!-- Plan Status -->
<div class="row mb-4">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Plan Status & Review</h4>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-3">
<div class="mb-3">
<label class="form-label">Plan Status</label>
<select class="form-select" name="plan_status">
<option value="draft" {% if care_plan.status == 'draft' %}selected{% endif %}>Draft</option>
<option value="active" {% if care_plan.status == 'active' %}selected{% endif %}>Active</option>
<option value="on_hold" {% if care_plan.status == 'on_hold' %}selected{% endif %}>On Hold</option>
<option value="completed" {% if care_plan.status == 'completed' %}selected{% endif %}>Completed</option>
<option value="cancelled" {% if care_plan.status == 'cancelled' %}selected{% endif %}>Cancelled</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="mb-3">
<label class="form-label">Next Review Date</label>
<input type="date" class="form-control" name="next_review_date"
value="{{ care_plan.next_review_date|date:'Y-m-d'|default:'' }}">
</div>
</div>
<div class="col-md-3">
<div class="mb-3">
<label class="form-label">Review Frequency</label>
<select class="form-select" name="review_frequency">
<option value="weekly" {% if care_plan.review_frequency == 'weekly' %}selected{% endif %}>Weekly</option>
<option value="biweekly" {% if care_plan.review_frequency == 'biweekly' %}selected{% endif %}>Bi-weekly</option>
<option value="monthly" {% if care_plan.review_frequency == 'monthly' %}selected{% endif %}>Monthly</option>
<option value="quarterly" {% if care_plan.review_frequency == 'quarterly' %}selected{% endif %}>Quarterly</option>
<option value="annually" {% if care_plan.review_frequency == 'annually' %}selected{% endif %}>Annually</option>
<option value="as_needed" {% if care_plan.review_frequency == 'as_needed' %}selected{% endif %}>As Needed</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="mb-3">
<label class="form-label">Last Updated By</label>
<input type="text" class="form-control" name="last_updated_by"
value="{{ care_plan.last_updated_by|default:user.get_full_name }}" readonly>
</div>
</div>
</div>
<div class="mb-3">
<label class="form-label">Plan Notes</label>
<textarea class="form-control" name="plan_notes" rows="3">{{ care_plan.plan_notes|default:'' }}</textarea>
</div>
</div>
</div>
</div>
</div>
</form>
<!-- Action Buttons -->
<div class="row mb-4">
<div class="col-12">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<button type="button" class="btn btn-outline-secondary" onclick="saveDraft()">
<i class="fa fa-save me-2"></i>Save as Draft
</button>
<button type="button" class="btn btn-outline-info" onclick="previewPlan()">
<i class="fa fa-eye me-2"></i>Preview
</button>
<button type="button" class="btn btn-outline-warning" onclick="duplicatePlan()">
<i class="fa fa-copy me-2"></i>Duplicate
</button>
</div>
<div>
<button type="button" class="btn btn-success" onclick="activatePlan()">
<i class="fa fa-play me-2"></i>Activate Plan
</button>
<button type="button" class="btn btn-primary" onclick="shareWithTeam()">
<i class="fa fa-share me-2"></i>Share with Team
</button>
</div>
</div>
</div>
</div>
</div>
</div>
{% endif %}
</div>
</div>
<!-- Patient Selection Modal -->
<div class="modal fade" id="patientSelectionModal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Select Patient</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<input type="text" class="form-control" id="patientSearchInput" placeholder="Search by name, ID, or phone number...">
</div>
<div id="patientSearchResults">
<!-- Search results will be loaded here -->
</div>
</div>
</div>
</div>
</div>
<!-- Preview Modal -->
<div class="modal fade" id="previewModal" tabindex="-1">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Care Plan Preview</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div id="previewContent">
<!-- Preview content will be loaded here -->
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="printPreview()">Print</button>
</div>
</div>
</div>
</div>
{% endblock %}
{% block js %}
<script>
$(document).ready(function() {
setupEventHandlers();
setupAutoSave();
});
function setupEventHandlers() {
// Patient search
$('#patientSearchInput').on('input', function() {
var query = $(this).val();
if (query.length >= 3) {
searchPatients(query);
}
});
// Form validation
$('#carePlanForm').on('submit', function(e) {
e.preventDefault();
saveCarePlan();
});
}
function setupAutoSave() {
// Auto-save every 5 minutes
setInterval(function() {
if ($('#carePlanForm').length) {
saveDraft(true); // Silent save
}
}, 300000); // 5 minutes
}
function selectPatient() {
$('#patientSelectionModal').modal('show');
}
function searchPatients(query) {
$.get('{% url "emr:patient_search_api" %}', {q: query}, function(data) {
var html = '';
if (data.patients.length === 0) {
html = '<div class="alert alert-info">No patients found matching "' + query + '"</div>';
} else {
html = '<div class="list-group">';
data.patients.forEach(function(patient) {
html += '<button type="button" class="list-group-item list-group-item-action" onclick="selectPatientForPlan(\'' + patient.patient_id + '\')">' +
'<div class="d-flex w-100 justify-content-between">' +
'<h6 class="mb-1">' + patient.first_name + ' ' + patient.last_name + '</h6>' +
'<small>' + patient.patient_id + '</small>' +
'</div>' +
'<p class="mb-1">DOB: ' + patient.date_of_birth + ' | Gender: ' + patient.gender + '</p>' +
'<small>Phone: ' + (patient.phone_primary || 'Not provided') + '</small>' +
'</button>';
});
html += '</div>';
}
$('#patientSearchResults').html(html);
});
}
function selectPatientForPlan(patientId) {
window.location.href = '{% url "emr:care_plan" %}?patient_id=' + patientId;
}
function createCarePlan() {
var patientId = '{{ patient.patient_id|default:"" }}';
if (!patientId) {
toastr.error('Please select a patient first');
return;
}
$.post('{% url "emr:create_care_plan" %}', {
patient_id: patientId,
csrfmiddlewaretoken: '{{ csrf_token }}'
}, function(data) {
if (data.success) {
toastr.success('Care plan created');
location.reload();
} else {
toastr.error('Failed to create care plan: ' + data.error);
}
});
}
function addCondition() {
var html = '<div class="condition-item mb-3">' +
'<div class="row">' +
'<div class="col-md-4">' +
'<label class="form-label">Condition/Diagnosis</label>' +
'<input type="text" class="form-control" name="condition_name[]" placeholder="Enter condition or diagnosis">' +
'</div>' +
'<div class="col-md-2">' +
'<label class="form-label">Priority</label>' +
'<select class="form-select" name="condition_priority[]">' +
'<option value="high">High</option>' +
'<option value="medium" selected>Medium</option>' +
'<option value="low">Low</option>' +
'</select>' +
'</div>' +
'<div class="col-md-2">' +
'<label class="form-label">Status</label>' +
'<select class="form-select" name="condition_status[]">' +
'<option value="active" selected>Active</option>' +
'<option value="stable">Stable</option>' +
'<option value="improving">Improving</option>' +
'<option value="worsening">Worsening</option>' +
'<option value="resolved">Resolved</option>' +
'</select>' +
'</div>' +
'<div class="col-md-3">' +
'<label class="form-label">Notes</label>' +
'<input type="text" class="form-control" name="condition_notes[]">' +
'</div>' +
'<div class="col-md-1">' +
'<label class="form-label">&nbsp;</label>' +
'<button type="button" class="btn btn-outline-danger form-control" onclick="removeCondition(this)">' +
'<i class="fa fa-times"></i>' +
'</button>' +
'</div>' +
'</div>' +
'</div>';
$('#healthConditions').append(html);
}
function removeCondition(button) {
$(button).closest('.condition-item').remove();
}
function importDiagnoses() {
var patientId = '{{ patient.patient_id|default:"" }}';
$.get('{% url "emr:get_patient_diagnoses" %}', {patient_id: patientId}, function(data) {
if (data.success) {
// Clear existing conditions
$('#healthConditions').empty();
// Add imported diagnoses
data.diagnoses.forEach(function(diagnosis) {
var html = '<div class="condition-item mb-3">' +
'<div class="row">' +
'<div class="col-md-4">' +
'<label class="form-label">Condition/Diagnosis</label>' +
'<input type="text" class="form-control" name="condition_name[]" value="' + diagnosis.name + '">' +
'</div>' +
'<div class="col-md-2">' +
'<label class="form-label">Priority</label>' +
'<select class="form-select" name="condition_priority[]">' +
'<option value="high" ' + (diagnosis.priority === 'high' ? 'selected' : '') + '>High</option>' +
'<option value="medium" ' + (diagnosis.priority === 'medium' ? 'selected' : '') + '>Medium</option>' +
'<option value="low" ' + (diagnosis.priority === 'low' ? 'selected' : '') + '>Low</option>' +
'</select>' +
'</div>' +
'<div class="col-md-2">' +
'<label class="form-label">Status</label>' +
'<select class="form-select" name="condition_status[]">' +
'<option value="active" selected>Active</option>' +
'<option value="stable">Stable</option>' +
'<option value="improving">Improving</option>' +
'<option value="worsening">Worsening</option>' +
'<option value="resolved">Resolved</option>' +
'</select>' +
'</div>' +
'<div class="col-md-3">' +
'<label class="form-label">Notes</label>' +
'<input type="text" class="form-control" name="condition_notes[]">' +
'</div>' +
'<div class="col-md-1">' +
'<label class="form-label">&nbsp;</label>' +
'<button type="button" class="btn btn-outline-danger form-control" onclick="removeCondition(this)">' +
'<i class="fa fa-times"></i>' +
'</button>' +
'</div>' +
'</div>' +
'</div>';
$('#healthConditions').append(html);
});
toastr.success('Diagnoses imported successfully');
} else {
toastr.error('Failed to import diagnoses: ' + data.error);
}
});
}
function addGoal() {
var html = '<div class="goal-item mb-3">' +
'<div class="row">' +
'<div class="col-md-4">' +
'<label class="form-label">Goal Description</label>' +
'<textarea class="form-control" name="goal_description[]" rows="2" placeholder="Describe the care goal"></textarea>' +
'</div>' +
'<div class="col-md-2">' +
'<label class="form-label">Target Date</label>' +
'<input type="date" class="form-control" name="goal_target_date[]">' +
'</div>' +
'<div class="col-md-2">' +
'<label class="form-label">Priority</label>' +
'<select class="form-select" name="goal_priority[]">' +
'<option value="high">High</option>' +
'<option value="medium" selected>Medium</option>' +
'<option value="low">Low</option>' +
'</select>' +
'</div>' +
'<div class="col-md-2">' +
'<label class="form-label">Status</label>' +
'<select class="form-select" name="goal_status[]">' +
'<option value="not_started" selected>Not Started</option>' +
'<option value="in_progress">In Progress</option>' +
'<option value="achieved">Achieved</option>' +
'<option value="modified">Modified</option>' +
'<option value="discontinued">Discontinued</option>' +
'</select>' +
'</div>' +
'<div class="col-md-1">' +
'<label class="form-label">Progress %</label>' +
'<input type="number" class="form-control" name="goal_progress[]" min="0" max="100" value="0">' +
'</div>' +
'<div class="col-md-1">' +
'<label class="form-label">&nbsp;</label>' +
'<button type="button" class="btn btn-outline-danger form-control" onclick="removeGoal(this)">' +
'<i class="fa fa-times"></i>' +
'</button>' +
'</div>' +
'</div>' +
'</div>';
$('#careGoals').append(html);
}
function removeGoal(button) {
$(button).closest('.goal-item').remove();
}
function addIntervention() {
var html = '<div class="intervention-item mb-3">' +
'<div class="row">' +
'<div class="col-md-3">' +
'<label class="form-label">Intervention Type</label>' +
'<select class="form-select" name="intervention_type[]">' +
'<option value="medication">Medication</option>' +
'<option value="therapy">Therapy</option>' +
'<option value="education">Patient Education</option>' +
'<option value="monitoring">Monitoring</option>' +
'<option value="lifestyle">Lifestyle Modification</option>' +
'<option value="procedure">Procedure</option>' +
'<option value="referral">Referral</option>' +
'<option value="other">Other</option>' +
'</select>' +
'</div>' +
'<div class="col-md-4">' +
'<label class="form-label">Description</label>' +
'<textarea class="form-control" name="intervention_description[]" rows="2" placeholder="Describe the intervention"></textarea>' +
'</div>' +
'<div class="col-md-2">' +
'<label class="form-label">Frequency</label>' +
'<input type="text" class="form-control" name="intervention_frequency[]" placeholder="e.g., Daily, Weekly">' +
'</div>' +
'<div class="col-md-2">' +
'<label class="form-label">Responsible Provider</label>' +
'<input type="text" class="form-control" name="intervention_provider[]">' +
'</div>' +
'<div class="col-md-1">' +
'<label class="form-label">&nbsp;</label>' +
'<button type="button" class="btn btn-outline-danger form-control" onclick="removeIntervention(this)">' +
'<i class="fa fa-times"></i>' +
'</button>' +
'</div>' +
'</div>' +
'</div>';
$('#interventions').append(html);
}
function removeIntervention(button) {
$(button).closest('.intervention-item').remove();
}
function addTeamMember() {
var html = '<div class="team-member-item mb-3">' +
'<div class="row">' +
'<div class="col-md-3">' +
'<label class="form-label">Name</label>' +
'<input type="text" class="form-control" name="team_member_name[]" placeholder="Provider name">' +
'</div>' +
'<div class="col-md-2">' +
'<label class="form-label">Role</label>' +
'<select class="form-select" name="team_member_role[]">' +
'<option value="physician">Physician</option>' +
'<option value="nurse">Nurse</option>' +
'<option value="therapist">Therapist</option>' +
'<option value="social_worker">Social Worker</option>' +
'<option value="pharmacist">Pharmacist</option>' +
'<option value="dietitian">Dietitian</option>' +
'<option value="case_manager">Case Manager</option>' +
'<option value="specialist">Specialist</option>' +
'<option value="other">Other</option>' +
'</select>' +
'</div>' +
'<div class="col-md-2">' +
'<label class="form-label">Specialty</label>' +
'<input type="text" class="form-control" name="team_member_specialty[]">' +
'</div>' +
'<div class="col-md-2">' +
'<label class="form-label">Phone</label>' +
'<input type="text" class="form-control" name="team_member_phone[]">' +
'</div>' +
'<div class="col-md-2">' +
'<label class="form-label">Email</label>' +
'<input type="email" class="form-control" name="team_member_email[]">' +
'</div>' +
'<div class="col-md-1">' +
'<label class="form-label">&nbsp;</label>' +
'<button type="button" class="btn btn-outline-danger form-control" onclick="removeTeamMember(this)">' +
'<i class="fa fa-times"></i>' +
'</button>' +
'</div>' +
'</div>' +
'</div>';
$('#careTeam').append(html);
}
function removeTeamMember(button) {
$(button).closest('.team-member-item').remove();
}
function saveDraft(silent = false) {
var formData = $('#carePlanForm').serialize();
formData += '&plan_status=draft';
$.post('{% url "emr:save_care_plan" %}', formData, function(data) {
if (data.success) {
if (!silent) {
toastr.success('Draft saved');
}
} else {
if (!silent) {
toastr.error('Failed to save draft: ' + data.error);
}
}
});
}
function saveCarePlan() {
var formData = $('#carePlanForm').serialize();
$.post('{% url "emr:save_care_plan" %}', formData, function(data) {
if (data.success) {
toastr.success('Care plan saved');
} else {
toastr.error('Failed to save care plan: ' + data.error);
}
});
}
function activatePlan() {
var formData = $('#carePlanForm').serialize();
formData += '&plan_status=active';
$.post('{% url "emr:save_care_plan" %}', formData, function(data) {
if (data.success) {
toastr.success('Care plan activated');
location.reload();
} else {
toastr.error('Failed to activate plan: ' + data.error);
}
});
}
function previewPlan() {
var formData = $('#carePlanForm').serialize();
$.post('{% url "emr:preview_care_plan" %}', formData, function(data) {
if (data.success) {
$('#previewContent').html(data.html);
$('#previewModal').modal('show');
} else {
toastr.error('Failed to generate preview: ' + data.error);
}
});
}
function printPlan() {
var patientId = '{{ patient.patient_id|default:"" }}';
window.open('{% url "emr:print_care_plan" %}?patient_id=' + patientId, '_blank');
}
function printPreview() {
var printWindow = window.open('', '_blank');
printWindow.document.write('<html><head><title>Care Plan</title>');
printWindow.document.write('<style>body { font-family: Arial, sans-serif; margin: 20px; } .header { text-align: center; margin-bottom: 20px; } .section { margin-bottom: 15px; } .label { font-weight: bold; }</style>');
printWindow.document.write('</head><body>');
printWindow.document.write($('#previewContent').html());
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.print();
}
function sharePlan() {
var patientId = '{{ patient.patient_id|default:"" }}';
$.post('{% url "emr:share_care_plan" %}', {
patient_id: patientId,
csrfmiddlewaretoken: '{{ csrf_token }}'
}, function(data) {
if (data.success) {
toastr.success('Care plan shared with team');
} else {
toastr.error('Failed to share plan: ' + data.error);
}
});
}
function shareWithTeam() {
sharePlan();
}
function duplicatePlan() {
var patientId = '{{ patient.patient_id|default:"" }}';
$.post('{% url "emr:duplicate_care_plan" %}', {
patient_id: patientId,
csrfmiddlewaretoken: '{{ csrf_token }}'
}, function(data) {
if (data.success) {
toastr.success('Care plan duplicated');
window.location.href = '{% url "emr:care_plan" %}?patient_id=' + patientId + '&plan_id=' + data.new_plan_id;
} else {
toastr.error('Failed to duplicate plan: ' + data.error);
}
});
}
</script>
<style>
.card-tools {
margin-left: auto;
}
.condition-item, .goal-item, .intervention-item, .team-member-item {
border-bottom: 1px solid #dee2e6;
padding-bottom: 15px;
margin-bottom: 15px;
}
.condition-item:last-child, .goal-item:last-child, .intervention-item:last-child, .team-member-item:last-child {
border-bottom: none;
margin-bottom: 0;
}
.form-control-sm, .form-select-sm {
font-size: 0.875rem;
}
.list-group-item-action:hover {
background-color: #f8f9fa;
}
.card-header h4 {
margin-bottom: 0;
}
.btn-group .btn {
margin-right: 5px;
}
.btn-group .btn:last-child {
margin-right: 0;
}
#previewContent {
max-height: 70vh;
overflow-y: auto;
}
.preview-section {
margin-bottom: 20px;
padding: 15px;
border: 1px solid #dee2e6;
border-radius: 0.375rem;
}
.preview-section h5 {
color: #0d6efd;
border-bottom: 1px solid #dee2e6;
padding-bottom: 5px;
margin-bottom: 10px;
}
.badge {
font-size: 0.75em;
}
.bg-draft { background-color: #6c757d !important; }
.bg-active { background-color: #198754 !important; }
.bg-on_hold { background-color: #fd7e14 !important; }
.bg-completed { background-color: #0d6efd !important; }
.bg-cancelled { background-color: #dc3545 !important; }
@media print {
.btn, .card-header, .breadcrumb {
display: none !important;
}
.card {
border: none !important;
box-shadow: none !important;
}
.card-body {
padding: 0 !important;
}
}
</style>
{% endblock %}