570 lines
23 KiB
HTML
570 lines
23 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Discharge Planning - {{ block.super }}{% endblock %}
|
|
|
|
{% block css %}
|
|
<style>
|
|
.planning-header {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
border-radius: 10px;
|
|
padding: 30px;
|
|
margin-bottom: 30px;
|
|
}
|
|
.planning-section {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin: 15px 0;
|
|
border-left: 4px solid #007bff;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.timeline {
|
|
position: relative;
|
|
padding-left: 30px;
|
|
}
|
|
.timeline::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 15px;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 2px;
|
|
background: #dee2e6;
|
|
}
|
|
.timeline-item {
|
|
position: relative;
|
|
margin-bottom: 30px;
|
|
}
|
|
.timeline-marker {
|
|
position: absolute;
|
|
left: -37px;
|
|
top: 5px;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
background: #dee2e6;
|
|
border: 3px solid white;
|
|
box-shadow: 0 0 0 2px #dee2e6;
|
|
}
|
|
.timeline-item.completed .timeline-marker {
|
|
background: #28a745;
|
|
box-shadow: 0 0 0 2px #28a745;
|
|
}
|
|
.timeline-item.active .timeline-marker {
|
|
background: #007bff;
|
|
box-shadow: 0 0 0 2px #007bff;
|
|
}
|
|
.timeline-item.pending .timeline-marker {
|
|
background: #ffc107;
|
|
box-shadow: 0 0 0 2px #ffc107;
|
|
}
|
|
.checklist-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
.checklist-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.checklist-item input[type="checkbox"] {
|
|
margin-right: 10px;
|
|
transform: scale(1.2);
|
|
}
|
|
.discharge-card {
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
margin: 10px 0;
|
|
border-left: 4px solid #28a745;
|
|
}
|
|
.risk-assessment {
|
|
background: #fff3cd;
|
|
border: 1px solid #ffeaa7;
|
|
border-radius: 6px;
|
|
padding: 15px;
|
|
margin: 15px 0;
|
|
}
|
|
.care-team {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 15px;
|
|
margin: 15px 0;
|
|
}
|
|
.team-member {
|
|
background: white;
|
|
border-radius: 6px;
|
|
padding: 15px;
|
|
text-align: center;
|
|
border: 1px solid #dee2e6;
|
|
}
|
|
.progress-bar-custom {
|
|
height: 25px;
|
|
background: #e9ecef;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #28a745, #20c997);
|
|
transition: width 0.3s ease;
|
|
}
|
|
.progress-text {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-weight: bold;
|
|
color: #333;
|
|
font-size: 0.9rem;
|
|
}
|
|
.medication-item {
|
|
background: #e8f5e8;
|
|
border-radius: 6px;
|
|
padding: 12px;
|
|
margin: 8px 0;
|
|
border-left: 3px solid #28a745;
|
|
}
|
|
.appointment-item {
|
|
background: #e3f2fd;
|
|
border-radius: 6px;
|
|
padding: 12px;
|
|
margin: 8px 0;
|
|
border-left: 3px solid #2196f3;
|
|
}
|
|
.alert-item {
|
|
padding: 10px;
|
|
margin: 5px 0;
|
|
border-radius: 4px;
|
|
font-size: 0.9rem;
|
|
}
|
|
.alert-high { background: #f8d7da; color: #721c24; border-left: 4px solid #dc3545; }
|
|
.alert-medium { background: #fff3cd; color: #856404; border-left: 4px solid #ffc107; }
|
|
.alert-low { background: #d4edda; color: #155724; border-left: 4px solid #28a745; }
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="content">
|
|
<div class="container-fluid">
|
|
<!-- Page Header -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="page-header">
|
|
<div class="page-title">
|
|
<h4><i class="fas fa-clipboard-list"></i> Discharge Planning</h4>
|
|
<h6>Comprehensive discharge planning and coordination</h6>
|
|
</div>
|
|
<div class="page-btn">
|
|
<button class="btn btn-primary me-2">
|
|
<i class="fas fa-save"></i> Save Plan
|
|
</button>
|
|
<button class="btn btn-info">
|
|
<i class="fas fa-print"></i> Print Plan
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Planning Header -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="planning-header">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<h5><i class="fas fa-user"></i> Patient: {{ admission.patient.get_full_name }}</h5>
|
|
<p><strong>MRN:</strong> {{ admission.patient.mrn }} | <strong>Age:</strong> {{ admission.patient.age }} | <strong>Gender:</strong>
|
|
{{ admission.patient.get_gender_display }}</p>
|
|
<p><strong>Admission Date:</strong> {{ admission.admission_datetime }} | <strong>Length of Stay:</strong> {{ admission.length_of_stay }} Days</p>
|
|
<p><strong>Admitting:</strong> {{ admission.admitting_physician.get_full_name }} | <strong>Attending:</strong>
|
|
{{ admission.attending_physician.get_full_name }}</p>
|
|
<p><strong>Primary Diagnosis:</strong> {{ admission.admitting_diagnosis }}</p>
|
|
</div>
|
|
<div class="col-md-4 text-end">
|
|
<div class="progress-bar-custom">
|
|
<div class="progress-fill" style="width: 75%"></div>
|
|
<div class="progress-text">75% Complete</div>
|
|
</div>
|
|
<p class="mt-2 mb-0">Expected Discharge: {{ admission.anticipated_discharge_date}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Planning Content -->
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<!-- Discharge Timeline -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-timeline"></i> Discharge Timeline</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="timeline">
|
|
<div class="timeline-item completed">
|
|
<div class="timeline-marker"></div>
|
|
<div class="timeline-content">
|
|
<h6>Medical Stabilization</h6>
|
|
<p>Patient medically stable for discharge</p>
|
|
<small class="text-muted">Completed: January 18, 2024</small>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item completed">
|
|
<div class="timeline-marker"></div>
|
|
<div class="timeline-content">
|
|
<h6>Medication Reconciliation</h6>
|
|
<p>Discharge medications reviewed and reconciled</p>
|
|
<small class="text-muted">Completed: January 19, 2024</small>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item active">
|
|
<div class="timeline-marker"></div>
|
|
<div class="timeline-content">
|
|
<h6>Patient Education</h6>
|
|
<p>Discharge instructions and education in progress</p>
|
|
<small class="text-muted">In Progress</small>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item pending">
|
|
<div class="timeline-marker"></div>
|
|
<div class="timeline-content">
|
|
<h6>Follow-up Appointments</h6>
|
|
<p>Schedule required follow-up appointments</p>
|
|
<small class="text-muted">Pending</small>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item pending">
|
|
<div class="timeline-marker"></div>
|
|
<div class="timeline-content">
|
|
<h6>Discharge Summary</h6>
|
|
<p>Complete and finalize discharge summary</p>
|
|
<small class="text-muted">Pending</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Discharge Checklist -->
|
|
<div class="card mt-3">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-tasks"></i> Discharge Checklist</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="planning-section">
|
|
<h6>Medical Clearance</h6>
|
|
<div class="checklist-item">
|
|
<input type="checkbox" checked disabled>
|
|
<label>Physician discharge order obtained</label>
|
|
</div>
|
|
<div class="checklist-item">
|
|
<input type="checkbox" checked disabled>
|
|
<label>Final vital signs documented</label>
|
|
</div>
|
|
<div class="checklist-item">
|
|
<input type="checkbox" checked disabled>
|
|
<label>Lab results reviewed and documented</label>
|
|
</div>
|
|
<div class="checklist-item">
|
|
<input type="checkbox">
|
|
<label>Discharge summary completed</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="planning-section">
|
|
<h6>Medications & Prescriptions</h6>
|
|
<div class="checklist-item">
|
|
<input type="checkbox" checked disabled>
|
|
<label>Medication reconciliation completed</label>
|
|
</div>
|
|
<div class="checklist-item">
|
|
<input type="checkbox" checked disabled>
|
|
<label>Discharge prescriptions written</label>
|
|
</div>
|
|
<div class="checklist-item">
|
|
<input type="checkbox">
|
|
<label>Patient education on medications provided</label>
|
|
</div>
|
|
<div class="checklist-item">
|
|
<input type="checkbox">
|
|
<label>Pharmacy consultation completed</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="planning-section">
|
|
<h6>Patient Education & Instructions</h6>
|
|
<div class="checklist-item">
|
|
<input type="checkbox">
|
|
<label>Discharge instructions provided and reviewed</label>
|
|
</div>
|
|
<div class="checklist-item">
|
|
<input type="checkbox">
|
|
<label>Activity restrictions explained</label>
|
|
</div>
|
|
<div class="checklist-item">
|
|
<input type="checkbox">
|
|
<label>Diet instructions provided</label>
|
|
</div>
|
|
<div class="checklist-item">
|
|
<input type="checkbox">
|
|
<label>Warning signs and when to seek care explained</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="planning-section">
|
|
<h6>Follow-up Care</h6>
|
|
<div class="checklist-item">
|
|
<input type="checkbox">
|
|
<label>Follow-up appointments scheduled</label>
|
|
</div>
|
|
<div class="checklist-item">
|
|
<input type="checkbox">
|
|
<label>Home health services arranged (if needed)</label>
|
|
</div>
|
|
<div class="checklist-item">
|
|
<input type="checkbox">
|
|
<label>Equipment/supplies ordered (if needed)</label>
|
|
</div>
|
|
<div class="checklist-item">
|
|
<input type="checkbox">
|
|
<label>Transportation arranged</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<!-- Risk Assessment -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-exclamation-triangle"></i> Risk Assessment</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="alert-item alert-medium">
|
|
<strong>Readmission Risk:</strong> Moderate
|
|
<br><small>Age >65, cardiac condition, multiple medications</small>
|
|
</div>
|
|
<div class="alert-item alert-low">
|
|
<strong>Fall Risk:</strong> Low
|
|
<br><small>Stable gait, no cognitive impairment</small>
|
|
</div>
|
|
<div class="alert-item alert-high">
|
|
<strong>Medication Compliance:</strong> High Risk
|
|
<br><small>Complex regimen, multiple medications</small>
|
|
</div>
|
|
<div class="alert-item alert-medium">
|
|
<strong>Social Support:</strong> Adequate
|
|
<br><small>Spouse available, family support</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Care Team -->
|
|
<div class="card mt-3">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-users"></i> Discharge Care Team</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="care-team">
|
|
<div class="team-member">
|
|
<i class="fas fa-user-md fa-2x text-primary mb-2"></i>
|
|
<h6>Dr. Johnson</h6>
|
|
<small>Attending Physician</small>
|
|
</div>
|
|
<div class="team-member">
|
|
<i class="fas fa-user-nurse fa-2x text-success mb-2"></i>
|
|
<h6>Nurse Smith</h6>
|
|
<small>Discharge Coordinator</small>
|
|
</div>
|
|
<div class="team-member">
|
|
<i class="fas fa-pills fa-2x text-warning mb-2"></i>
|
|
<h6>Pharmacist Lee</h6>
|
|
<small>Medication Review</small>
|
|
</div>
|
|
<div class="team-member">
|
|
<i class="fas fa-heart fa-2x text-danger mb-2"></i>
|
|
<h6>Social Worker</h6>
|
|
<small>Discharge Planning</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="card mt-3">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-bolt"></i> Quick Actions</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-grid gap-2">
|
|
<button class="btn btn-outline-primary btn-sm">
|
|
<i class="fas fa-calendar"></i> Schedule Follow-up
|
|
</button>
|
|
<button class="btn btn-outline-success btn-sm">
|
|
<i class="fas fa-home"></i> Arrange Home Health
|
|
</button>
|
|
<button class="btn btn-outline-info btn-sm">
|
|
<i class="fas fa-car"></i> Arrange Transportation
|
|
</button>
|
|
<button class="btn btn-outline-warning btn-sm">
|
|
<i class="fas fa-phone"></i> Contact Family
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Discharge Medications -->
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-pills"></i> Discharge Medications</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="medication-item">
|
|
<h6>Aspirin 81mg</h6>
|
|
<p>Take 1 tablet daily by mouth</p>
|
|
<small class="text-muted">30-day supply | Refills: 5</small>
|
|
</div>
|
|
<div class="medication-item">
|
|
<h6>Metoprolol 50mg</h6>
|
|
<p>Take 1 tablet twice daily by mouth</p>
|
|
<small class="text-muted">30-day supply | Refills: 5</small>
|
|
</div>
|
|
<div class="medication-item">
|
|
<h6>Atorvastatin 40mg</h6>
|
|
<p>Take 1 tablet daily at bedtime</p>
|
|
<small class="text-muted">30-day supply | Refills: 5</small>
|
|
</div>
|
|
<div class="medication-item">
|
|
<h6>Lisinopril 10mg</h6>
|
|
<p>Take 1 tablet daily by mouth</p>
|
|
<small class="text-muted">30-day supply | Refills: 5</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-calendar-check"></i> Follow-up Appointments</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="appointment-item">
|
|
<h6>Cardiology Follow-up</h6>
|
|
<p><strong>Date:</strong> January 30, 2024 at 2:00 PM</p>
|
|
<p><strong>Provider:</strong> Dr. Wilson</p>
|
|
<p><strong>Location:</strong> Cardiology Clinic</p>
|
|
<small class="text-muted">Appointment confirmed</small>
|
|
</div>
|
|
<div class="appointment-item">
|
|
<h6>Primary Care Follow-up</h6>
|
|
<p><strong>Date:</strong> February 5, 2024 at 10:00 AM</p>
|
|
<p><strong>Provider:</strong> Dr. Brown</p>
|
|
<p><strong>Location:</strong> Family Medicine</p>
|
|
<small class="text-muted">Appointment pending</small>
|
|
</div>
|
|
<div class="appointment-item">
|
|
<h6>Lab Work</h6>
|
|
<p><strong>Date:</strong> February 1, 2024 at 8:00 AM</p>
|
|
<p><strong>Tests:</strong> Lipid Panel, CBC</p>
|
|
<p><strong>Location:</strong> Lab Services</p>
|
|
<small class="text-muted">Fasting required</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body text-center">
|
|
<button type="button" class="btn btn-success btn-lg me-3">
|
|
<i class="fas fa-check"></i> Approve Discharge Plan
|
|
</button>
|
|
<button type="button" class="btn btn-warning btn-lg me-3">
|
|
<i class="fas fa-edit"></i> Modify Plan
|
|
</button>
|
|
<button type="button" class="btn btn-info btn-lg me-3">
|
|
<i class="fas fa-share"></i> Share with Team
|
|
</button>
|
|
<button type="button" class="btn btn-secondary btn-lg">
|
|
<i class="fas fa-save"></i> Save Draft
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Update progress based on checklist completion
|
|
function updateProgress() {
|
|
var totalItems = $('input[type="checkbox"]').length;
|
|
var completedItems = $('input[type="checkbox"]:checked').length;
|
|
var percentage = Math.round((completedItems / totalItems) * 100);
|
|
|
|
$('.progress-fill').css('width', percentage + '%');
|
|
$('.progress-text').text(percentage + '% Complete');
|
|
|
|
// Update timeline based on progress
|
|
if (percentage >= 80) {
|
|
$('.timeline-item.pending').first().removeClass('pending').addClass('active');
|
|
}
|
|
}
|
|
|
|
// Handle checklist changes
|
|
$('input[type="checkbox"]').change(function() {
|
|
updateProgress();
|
|
});
|
|
|
|
// Quick action buttons
|
|
$('.btn-outline-primary').click(function() {
|
|
alert('Opening appointment scheduling...');
|
|
});
|
|
|
|
$('.btn-outline-success').click(function() {
|
|
alert('Arranging home health services...');
|
|
});
|
|
|
|
$('.btn-outline-info').click(function() {
|
|
alert('Arranging transportation...');
|
|
});
|
|
|
|
$('.btn-outline-warning').click(function() {
|
|
alert('Contacting family members...');
|
|
});
|
|
|
|
// Main action buttons
|
|
$('.btn-success').click(function() {
|
|
if (confirm('Are you sure you want to approve this discharge plan?')) {
|
|
alert('Discharge plan approved successfully!');
|
|
}
|
|
});
|
|
|
|
$('.btn-info').click(function() {
|
|
alert('Sharing discharge plan with care team...');
|
|
});
|
|
|
|
// Initialize progress
|
|
updateProgress();
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|