469 lines
24 KiB
HTML
469 lines
24 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Waitlist Management{% endblock %}
|
|
|
|
{% block css %}
|
|
<link href="{% static 'assets/plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css' %}" rel="stylesheet" />
|
|
<link href="{% static 'assets/plugins/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css' %}" rel="stylesheet" />
|
|
{% 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 'appointments:appointment_list' %}">Appointments</a></li>
|
|
<li class="breadcrumb-item active">Waitlist</li>
|
|
</ul>
|
|
|
|
<div class="row align-items-center mb-3">
|
|
<div class="col">
|
|
<h1 class="page-header">Waitlist Management</h1>
|
|
</div>
|
|
<div class="col-auto">
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addToWaitlistModal">
|
|
<i class="fa fa-plus me-2"></i>Add to Waitlist
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Summary Cards -->
|
|
<div class="row mb-4">
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="card border-0 text-truncate">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-7">
|
|
<div class="text-dark fs-13px">Total Waitlist</div>
|
|
<div class="text-dark fs-20px fw-600 lh-14">{{ total_waitlist }}</div>
|
|
</div>
|
|
<div class="col-5">
|
|
<div class="mt-n1 mb-n1">
|
|
<div class="w-75 mx-auto">
|
|
<i class="fa fa-clock fa-2x text-primary"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="card border-0 text-truncate">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-7">
|
|
<div class="text-dark fs-13px">Scheduled Today</div>
|
|
<div class="text-dark fs-20px fw-600 lh-14">{{ scheduled_today }}</div>
|
|
</div>
|
|
<div class="col-5">
|
|
<div class="mt-n1 mb-n1">
|
|
<div class="w-75 mx-auto">
|
|
<i class="fa fa-calendar-check fa-2x text-success"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="card border-0 text-truncate">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-7">
|
|
<div class="text-dark fs-13px">Priority Cases</div>
|
|
<div class="text-dark fs-20px fw-600 lh-14">{{ priority_cases }}</div>
|
|
</div>
|
|
<div class="col-5">
|
|
<div class="mt-n1 mb-n1">
|
|
<div class="w-75 mx-auto">
|
|
<i class="fa fa-exclamation-triangle fa-2x text-warning"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="card border-0 text-truncate">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-7">
|
|
<div class="text-dark fs-13px">Avg Wait Time</div>
|
|
<div class="text-dark fs-20px fw-600 lh-14">{{ avg_wait_time }} days</div>
|
|
</div>
|
|
<div class="col-5">
|
|
<div class="mt-n1 mb-n1">
|
|
<div class="w-75 mx-auto">
|
|
<i class="fa fa-hourglass-half fa-2x text-info"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<div class="card mb-4">
|
|
<div class="card-body">
|
|
<form method="get" class="row g-3">
|
|
<div class="col-md-3">
|
|
<label class="form-label">Provider</label>
|
|
<select name="provider" class="form-select">
|
|
<option value="">All Providers</option>
|
|
{% for provider in providers %}
|
|
<option value="{{ provider.id }}" {% if request.GET.provider == provider.id|stringformat:"s" %}selected{% endif %}>
|
|
{{ provider.first_name }} {{ provider.last_name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label class="form-label">Department</label>
|
|
<select name="department" class="form-select">
|
|
<option value="">All Departments</option>
|
|
{% for department in departments %}
|
|
<option value="{{ department.id }}" {% if request.GET.department == department.id|stringformat:"s" %}selected{% endif %}>
|
|
{{ department.name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label class="form-label">Priority</label>
|
|
<select name="priority" class="form-select">
|
|
<option value="">All Priorities</option>
|
|
<option value="urgent" {% if request.GET.priority == 'urgent' %}selected{% endif %}>Urgent</option>
|
|
<option value="high" {% if request.GET.priority == 'high' %}selected{% endif %}>High</option>
|
|
<option value="normal" {% if request.GET.priority == 'normal' %}selected{% endif %}>Normal</option>
|
|
<option value="low" {% if request.GET.priority == 'low' %}selected{% endif %}>Low</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label class="form-label"> </label>
|
|
<div>
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fa fa-search me-2"></i>Filter
|
|
</button>
|
|
<a href="{% url 'appointments:waitlist_management' %}" class="btn btn-secondary ms-2">Reset</a>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Waitlist Table -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Current Waitlist</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
{% if messages %}
|
|
{% for message in messages %}
|
|
<div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
|
|
{{ message }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
<div class="table-responsive">
|
|
<table id="waitlistTable" class="table table-striped table-bordered align-middle">
|
|
<thead>
|
|
<tr>
|
|
<th width="5%">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="selectAll">
|
|
</div>
|
|
</th>
|
|
<th>Position</th>
|
|
<th>Patient</th>
|
|
<th>Provider</th>
|
|
<th>Type</th>
|
|
<th>Priority</th>
|
|
<th>Added</th>
|
|
<th>Wait Time</th>
|
|
<th width="12%">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for entry in waitlist_entries %}
|
|
<tr>
|
|
<td>
|
|
<div class="form-check">
|
|
<input class="form-check-input waitlist-checkbox" type="checkbox" value="{{ entry.id }}">
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="badge bg-primary fs-12px">{{ entry.position }}</span>
|
|
</td>
|
|
<td>
|
|
<div class="d-flex align-items-center">
|
|
<div>
|
|
<div class="fw-bold">{{ entry.patient.first_name }} {{ entry.patient.last_name }}</div>
|
|
<div class="text-muted small">{{ entry.patient.patient_id }}</div>
|
|
<div class="text-muted small">{{ entry.patient.phone_number|default:"No phone" }}</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div>
|
|
<div class="fw-bold">{{ entry.preferred_provider.first_name }} {{ entry.preferred_provider.last_name }}</div>
|
|
<div class="text-muted small">{{ entry.preferred_provider.department.name }}</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="badge bg-info">{{ entry.appointment_type.name }}</span>
|
|
</td>
|
|
<td>
|
|
{% if entry.priority == 'urgent' %}
|
|
<span class="badge bg-danger">Urgent</span>
|
|
{% elif entry.priority == 'high' %}
|
|
<span class="badge bg-warning">High</span>
|
|
{% elif entry.priority == 'normal' %}
|
|
<span class="badge bg-success">Normal</span>
|
|
{% else %}
|
|
<span class="badge bg-secondary">Low</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<div>{{ entry.added_date|date:"M d, Y" }}</div>
|
|
<div class="text-muted small">{{ entry.added_date|time:"g:i A" }}</div>
|
|
</td>
|
|
<td>
|
|
<div class="fw-bold">{{ entry.wait_days }} days</div>
|
|
{% if entry.wait_days > 30 %}
|
|
<div class="text-danger small">Long wait</div>
|
|
{% elif entry.wait_days > 14 %}
|
|
<div class="text-warning small">Extended wait</div>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<div class="btn-group btn-group-sm">
|
|
<button type="button" class="btn btn-outline-success" onclick="scheduleFromWaitlist('{{ entry.id }}')"
|
|
title="Schedule Appointment">
|
|
<i class="fa fa-calendar-plus"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-outline-primary" onclick="contactPatient('{{ entry.id }}')"
|
|
title="Contact Patient">
|
|
<i class="fa fa-phone"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-outline-warning" onclick="editWaitlistEntry('{{ entry.id }}')"
|
|
title="Edit Entry">
|
|
<i class="fa fa-edit"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-outline-danger" onclick="removeFromWaitlist('{{ entry.id }}')"
|
|
title="Remove from Waitlist">
|
|
<i class="fa fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="9" class="text-center text-muted py-4">
|
|
<i class="fa fa-list fa-3x mb-3"></i>
|
|
<div>No patients on waitlist</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add to Waitlist Modal -->
|
|
<div class="modal fade" id="addToWaitlistModal" tabindex="-1">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Add Patient to Waitlist</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<form method="post" action="{% url 'appointments:add_to_waitlist' %}">
|
|
<div class="modal-body">
|
|
{% csrf_token %}
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label">Patient <span class="text-danger">*</span></label>
|
|
<select name="patient" class="form-select" required>
|
|
<option value="">Select Patient</option>
|
|
{% for patient in patients %}
|
|
<option value="{{ patient.id }}">
|
|
{{ patient.first_name }} {{ patient.last_name }} ({{ patient.patient_id }})
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">Preferred Provider <span class="text-danger">*</span></label>
|
|
<select name="preferred_provider" class="form-select" required>
|
|
<option value="">Select Provider</option>
|
|
{% for provider in providers %}
|
|
<option value="{{ provider.id }}">
|
|
{{ provider.first_name }} {{ provider.last_name }} - {{ provider.department.name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label">Appointment Type <span class="text-danger">*</span></label>
|
|
<select name="appointment_type" class="form-select" required>
|
|
<option value="">Select Type</option>
|
|
{% for type in appointment_types %}
|
|
<option value="{{ type.id }}">{{ type.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">Priority <span class="text-danger">*</span></label>
|
|
<select name="priority" class="form-select" required>
|
|
<option value="normal">Normal</option>
|
|
<option value="high">High</option>
|
|
<option value="urgent">Urgent</option>
|
|
<option value="low">Low</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label">Preferred Date Range</label>
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<input type="date" name="preferred_start_date" class="form-control">
|
|
</div>
|
|
<div class="col-6">
|
|
<input type="date" name="preferred_end_date" class="form-control">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">Preferred Time</label>
|
|
<select name="preferred_time" class="form-select">
|
|
<option value="">Any Time</option>
|
|
<option value="morning">Morning (8 AM - 12 PM)</option>
|
|
<option value="afternoon">Afternoon (12 PM - 5 PM)</option>
|
|
<option value="evening">Evening (5 PM - 8 PM)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Reason for Appointment</label>
|
|
<textarea name="reason" class="form-control" rows="3"
|
|
placeholder="Brief description of the reason for the appointment"></textarea>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Special Requirements</label>
|
|
<textarea name="special_requirements" class="form-control" rows="2"
|
|
placeholder="Any special requirements or accommodations needed"></textarea>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="flexible_scheduling" id="flexible_scheduling">
|
|
<label class="form-check-label" for="flexible_scheduling">
|
|
Patient has flexible scheduling
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="auto_notify" id="auto_notify" checked>
|
|
<label class="form-check-label" for="auto_notify">
|
|
Automatically notify when slot becomes available
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fa fa-plus me-2"></i>Add to Waitlist
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
<script src="{% static 'assets/plugins/datatables.net/js/jquery.dataTables.min.js' %}"></script>
|
|
<script src="{% static 'assets/plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js' %}"></script>
|
|
<script src="{% static 'assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js' %}"></script>
|
|
<script src="{% static 'assets/plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js' %}"></script>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Initialize DataTable
|
|
$('#waitlistTable').DataTable({
|
|
responsive: true,
|
|
order: [[1, 'asc']],
|
|
columnDefs: [
|
|
{ orderable: false, targets: [0, 8] }
|
|
]
|
|
});
|
|
|
|
// Select all functionality
|
|
$('#selectAll').change(function() {
|
|
$('.waitlist-checkbox').prop('checked', this.checked);
|
|
});
|
|
|
|
// Set default dates
|
|
var today = new Date();
|
|
var nextMonth = new Date(today);
|
|
nextMonth.setMonth(nextMonth.getMonth() + 1);
|
|
|
|
$('input[name="preferred_start_date"]').val(today.toISOString().split('T')[0]);
|
|
$('input[name="preferred_end_date"]').val(nextMonth.toISOString().split('T')[0]);
|
|
});
|
|
|
|
function scheduleFromWaitlist(entryId) {
|
|
if (confirm('Schedule an appointment for this patient?')) {
|
|
window.location.href = '{% url "appointments:schedule_from_waitlist" 0 %}'.replace('0', entryId);
|
|
}
|
|
}
|
|
|
|
function contactPatient(entryId) {
|
|
window.open('{% url "appointments:contact_waitlist_patient" 0 %}'.replace('0', entryId), '_blank');
|
|
}
|
|
|
|
function editWaitlistEntry(entryId) {
|
|
window.location.href = '{% url "appointments:edit_waitlist_entry" 0 %}'.replace('0', entryId);
|
|
}
|
|
|
|
function removeFromWaitlist(entryId) {
|
|
if (confirm('Are you sure you want to remove this patient from the waitlist?')) {
|
|
$.post('{% url "appointments:remove_from_waitlist" %}', {
|
|
'entry_id': entryId,
|
|
'csrfmiddlewaretoken': '{{ csrf_token }}'
|
|
}, function(data) {
|
|
if (data.success) {
|
|
location.reload();
|
|
} else {
|
|
alert('Failed to remove from waitlist: ' + data.error);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %}
|
|
|