230 lines
12 KiB
HTML
230 lines
12 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block title %}Appointment Dashboard - Hospital Management System{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
|
|
<h1 class="h2">
|
|
<i class="fas fa-calendar-alt"></i> Appointment Dashboard
|
|
</h1>
|
|
<div class="btn-toolbar mb-2 mb-md-0">
|
|
<div class="btn-group me-2">
|
|
<button type="button" class="btn btn-sm btn-outline-secondary">
|
|
<i class="fas fa-calendar-plus"></i> Schedule
|
|
</button>
|
|
<button type="button" class="btn btn-sm btn-outline-secondary">
|
|
<i class="fas fa-users"></i> Queue
|
|
</button>
|
|
</div>
|
|
<button type="button" class="btn btn-sm btn-primary">
|
|
<i class="fas fa-video"></i> Telemedicine
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Appointment Statistics -->
|
|
<div id="appointment-stats"
|
|
hx-get="{% url 'appointments:appointment_stats' %}"
|
|
hx-trigger="load, every 30s"
|
|
class="auto-refresh mb-4">
|
|
<div class="htmx-indicator">
|
|
<div class="spinner-border spinner-border-sm" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- Today's Appointments -->
|
|
<div class="col-lg-6">
|
|
<div class="panel panel-inverse mb-4" data-sortable-id="index-1">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
<i class="fas fa-calendar-day"></i> Today's Appointments
|
|
</h4>
|
|
<div class="panel-heading-btn">
|
|
<a href="{% url 'appointments:appointment_list' %}" class="btn btn-xs btn-outline-primary me-2">View All</a>
|
|
<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>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover mb-0">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th>Time</th>
|
|
<th>Patient</th>
|
|
<th>Provider</th>
|
|
<th>Type</th>
|
|
<th>Status</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for appointment in todays_appointments %}
|
|
<tr>
|
|
<td>
|
|
<strong>{{ appointment.scheduled_datetime|time:"g:i A" }}</strong>
|
|
{% if appointment.is_telemedicine %}
|
|
<br><span class="badge bg-info">Telemedicine</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<div>{{ appointment.patient.get_full_name }}</div>
|
|
<small class="text-muted">MRN: {{ appointment.patient.mrn }}</small>
|
|
</td>
|
|
<td>{{ appointment.provider.get_full_name }}</td>
|
|
<td>
|
|
<div>{{ appointment.get_appointment_type_display }}</div>
|
|
<small class="text-muted">{{ appointment.get_specialty_display }}</small>
|
|
</td>
|
|
<td>
|
|
{% if appointment.status == 'SCHEDULED' %}
|
|
<span class="badge bg-primary">{{ appointment.get_status_display }}</span>
|
|
{% elif appointment.status == 'CHECKED_IN' %}
|
|
<span class="badge bg-warning">{{ appointment.get_status_display }}</span>
|
|
{% elif appointment.status == 'IN_PROGRESS' %}
|
|
<span class="badge bg-info">{{ appointment.get_status_display }}</span>
|
|
{% elif appointment.status == 'COMPLETED' %}
|
|
<span class="badge bg-success">{{ appointment.get_status_display }}</span>
|
|
{% elif appointment.status == 'CANCELLED' %}
|
|
<span class="badge bg-danger">{{ appointment.get_status_display }}</span>
|
|
{% else %}
|
|
<span class="badge bg-secondary">{{ appointment.get_status_display }}</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<div class="btn-group btn-group-sm" role="group">
|
|
{% if appointment.status == 'SCHEDULED' %}
|
|
<button type="button"
|
|
class="btn btn-outline-success"
|
|
title="Check In"
|
|
hx-post="{% url 'appointments:check_in_patient' appointment.id %}"
|
|
hx-target="#appointment-stats"
|
|
hx-swap="outerHTML">
|
|
<i class="fas fa-check"></i>
|
|
</button>
|
|
{% endif %}
|
|
|
|
{% if appointment.is_telemedicine and appointment.status in 'CHECKED_IN,IN_PROGRESS' %}
|
|
<button type="button"
|
|
class="btn btn-outline-primary"
|
|
title="Join Meeting"
|
|
onclick="window.open('{{ appointment.meeting_url }}', '_blank')">
|
|
<i class="fas fa-video"></i>
|
|
</button>
|
|
{% endif %}
|
|
|
|
<a href="{% url 'appointments:appointment_detail' appointment.pk %}"
|
|
class="btn btn-outline-info"
|
|
title="View Details">
|
|
<i class="fas fa-eye"></i>
|
|
</a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="6" class="text-center text-muted py-4">
|
|
<i class="fas fa-calendar fa-2x mb-2"></i>
|
|
<br>No appointments scheduled for today.
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Active Queues -->
|
|
<div class="col-lg-4">
|
|
<div class="panel panel-inverse mb-4" data-sortable-id="index-2">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
<i class="fas fa-users"></i> Active Queues
|
|
</h4>
|
|
<div class="panel-heading-btn">
|
|
<a href="{% url 'appointments:queue_management' %}" class="btn btn-xs btn-outline-primary me-2">View All</a>
|
|
<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>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
{% for queue in active_queues %}
|
|
<div class="d-flex justify-content-between align-items-center mb-3 p-3 border rounded">
|
|
<div>
|
|
<h6 class="mb-1">{{ queue.name }}</h6>
|
|
<small class="text-muted">{{ queue.get_queue_type_display }}</small>
|
|
</div>
|
|
<div class="text-end">
|
|
<div class="h5 mb-0">{{ queue.current_queue_size }}</div>
|
|
<small class="text-muted">waiting</small>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<div class="text-center text-muted py-3">
|
|
<i class="fas fa-users fa-2x mb-2"></i>
|
|
<br>No active queues.
|
|
</div>
|
|
{% endfor %}
|
|
|
|
{% if active_queues %}
|
|
<div class="d-grid">
|
|
<a href="{% url 'appointments:queue_management' %}" class="btn btn-outline-primary">
|
|
<i class="fas fa-cog"></i> Manage Queues
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-2">
|
|
<!-- Quick Actions -->
|
|
<div class="panel panel-inverse mb-4" data-sortable-id="index-3">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
<i class="fas fa-bolt"></i> Quick Actions
|
|
</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>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="d-grid gap-2">
|
|
<a href="{% url 'appointments:scheduling_calendar' %}" class="btn btn-outline-primary">
|
|
<i class="fas fa-calendar-plus"></i> Schedule Appointment
|
|
</a>
|
|
<a href="{% url 'appointments:appointment_list' %}" class="btn btn-outline-secondary">
|
|
<i class="fas fa-list"></i> View All Appointments
|
|
</a>
|
|
<a href="{% url 'appointments:telemedicine' %}" class="btn btn-outline-info">
|
|
<i class="fas fa-video"></i> Telemedicine Sessions
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Real-time Updates -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Auto-refresh dashboard every 30 seconds
|
|
setInterval(function() {
|
|
htmx.trigger('#appointment-stats', 'refresh');
|
|
}, 30000);
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|