1475 lines
50 KiB
HTML
1475 lines
50 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Patients Dashboard{% endblock %}
|
|
|
|
{% block extra_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" />
|
|
<link href="{% static 'assets/plugins/fullcalendar/main.min.css' %}" rel="stylesheet" />
|
|
<style>
|
|
.dashboard-header {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
border-radius: 0.5rem;
|
|
color: white;
|
|
margin-bottom: 2rem;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.dashboard-title {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.dashboard-subtitle {
|
|
font-size: 1.1rem;
|
|
margin-bottom: 1.5rem;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.dashboard-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.meta-item {
|
|
align-items: center;
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.meta-icon {
|
|
align-items: center;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
font-size: 1.2rem;
|
|
height: 45px;
|
|
justify-content: center;
|
|
width: 45px;
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
gap: 1.5rem;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.stat-card {
|
|
background: white;
|
|
border-radius: 0.5rem;
|
|
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.stat-card:hover {
|
|
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.stat-card-header {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 1.5rem 1.5rem 0;
|
|
}
|
|
|
|
.stat-icon {
|
|
align-items: center;
|
|
border-radius: 50%;
|
|
color: white;
|
|
display: flex;
|
|
font-size: 1.5rem;
|
|
height: 60px;
|
|
justify-content: center;
|
|
width: 60px;
|
|
}
|
|
|
|
.stat-icon.primary { background: linear-gradient(135deg, #007bff, #0056b3); }
|
|
.stat-icon.success { background: linear-gradient(135deg, #28a745, #1e7e34); }
|
|
.stat-icon.warning { background: linear-gradient(135deg, #ffc107, #e0a800); }
|
|
.stat-icon.danger { background: linear-gradient(135deg, #dc3545, #c82333); }
|
|
.stat-icon.info { background: linear-gradient(135deg, #17a2b8, #117a8b); }
|
|
.stat-icon.secondary { background: linear-gradient(135deg, #6c757d, #545b62); }
|
|
|
|
.stat-card-body {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.stat-number {
|
|
color: #495057;
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.stat-label {
|
|
color: #6c757d;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.stat-change {
|
|
align-items: center;
|
|
display: flex;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.stat-change.positive {
|
|
color: #28a745;
|
|
}
|
|
|
|
.stat-change.negative {
|
|
color: #dc3545;
|
|
}
|
|
|
|
.stat-change.neutral {
|
|
color: #6c757d;
|
|
}
|
|
|
|
.quick-actions {
|
|
background: white;
|
|
border-radius: 0.5rem;
|
|
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
|
margin-bottom: 2rem;
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.actions-grid {
|
|
display: grid;
|
|
gap: 1rem;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
}
|
|
|
|
.action-card {
|
|
background: #f8f9fa;
|
|
border: 2px dashed #dee2e6;
|
|
border-radius: 0.5rem;
|
|
cursor: pointer;
|
|
padding: 1.5rem;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.action-card:hover {
|
|
background: white;
|
|
border-color: #007bff;
|
|
border-style: solid;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.action-icon {
|
|
color: #007bff;
|
|
font-size: 2.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.action-title {
|
|
color: #495057;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.action-description {
|
|
color: #6c757d;
|
|
font-size: 0.9rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.dashboard-content {
|
|
display: grid;
|
|
gap: 2rem;
|
|
grid-template-columns: 2fr 1fr;
|
|
}
|
|
|
|
.main-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.sidebar-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.content-card {
|
|
background: white;
|
|
border-radius: 0.5rem;
|
|
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.card-header {
|
|
align-items: center;
|
|
border-bottom: 2px solid #f8f9fa;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 1.5rem;
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.card-title {
|
|
color: #495057;
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
}
|
|
|
|
.recent-patients {
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.patient-item {
|
|
align-items: center;
|
|
border-bottom: 1px solid #f8f9fa;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 1rem 0;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.patient-item:hover {
|
|
background-color: #f8f9fa;
|
|
border-radius: 0.375rem;
|
|
margin: 0 -0.5rem;
|
|
padding: 1rem 0.5rem;
|
|
}
|
|
|
|
.patient-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.patient-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.patient-name {
|
|
color: #495057;
|
|
font-weight: 600;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.patient-details {
|
|
color: #6c757d;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.patient-status {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.alerts-section {
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.alert-item {
|
|
align-items: flex-start;
|
|
border-left: 4px solid;
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin-bottom: 1rem;
|
|
padding: 1rem;
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.alert-item.critical {
|
|
background: #f8d7da;
|
|
border-left-color: #dc3545;
|
|
}
|
|
|
|
.alert-item.warning {
|
|
background: #fff3cd;
|
|
border-left-color: #ffc107;
|
|
}
|
|
|
|
.alert-item.info {
|
|
background: #d1ecf1;
|
|
border-left-color: #17a2b8;
|
|
}
|
|
|
|
.alert-icon {
|
|
flex-shrink: 0;
|
|
font-size: 1.2rem;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.alert-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.alert-title {
|
|
font-weight: 600;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.alert-description {
|
|
font-size: 0.9rem;
|
|
line-height: 1.4;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.alert-time {
|
|
color: #6c757d;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.calendar-widget {
|
|
height: 400px;
|
|
}
|
|
|
|
.search-section {
|
|
background: white;
|
|
border-radius: 0.5rem;
|
|
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
|
margin-bottom: 2rem;
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.search-form {
|
|
display: flex;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.search-input {
|
|
flex: 1;
|
|
}
|
|
|
|
.filter-tabs {
|
|
border-bottom: 1px solid #dee2e6;
|
|
display: flex;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.filter-tab {
|
|
background: none;
|
|
border: none;
|
|
border-bottom: 3px solid transparent;
|
|
color: #6c757d;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
padding: 1rem 1.5rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.filter-tab:hover,
|
|
.filter-tab.active {
|
|
border-bottom-color: #007bff;
|
|
color: #007bff;
|
|
}
|
|
|
|
.patients-table-container {
|
|
background: white;
|
|
border-radius: 0.5rem;
|
|
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.dashboard-content {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.dashboard-header {
|
|
padding: 1.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.dashboard-meta {
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.stats-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.actions-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.search-form {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.filter-tabs {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.filter-tab {
|
|
flex: 1;
|
|
min-width: 120px;
|
|
}
|
|
}
|
|
|
|
.fade-in {
|
|
animation: fadeIn 0.6s ease-in;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.pulse {
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% { transform: scale(1); }
|
|
50% { transform: scale(1.02); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
|
|
.chart-container {
|
|
height: 300px;
|
|
position: relative;
|
|
}
|
|
|
|
.progress-ring {
|
|
height: 80px;
|
|
width: 80px;
|
|
}
|
|
|
|
.progress-ring circle {
|
|
fill: transparent;
|
|
stroke: #dee2e6;
|
|
stroke-width: 8;
|
|
}
|
|
|
|
.progress-ring .progress {
|
|
stroke: #007bff;
|
|
stroke-dasharray: 251.2;
|
|
stroke-dashoffset: 251.2;
|
|
stroke-linecap: round;
|
|
transition: stroke-dashoffset 0.5s ease-in-out;
|
|
}
|
|
|
|
.notification-badge {
|
|
background: #dc3545;
|
|
border-radius: 50%;
|
|
color: white;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
height: 18px;
|
|
line-height: 18px;
|
|
position: absolute;
|
|
right: -8px;
|
|
text-align: center;
|
|
top: -8px;
|
|
width: 18px;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div id="content" class="app-content">
|
|
<div class="container-fluid">
|
|
<!-- Dashboard Header -->
|
|
<div class="dashboard-header fade-in">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-8">
|
|
<h1 class="dashboard-title">
|
|
<i class="fas fa-users me-3"></i>
|
|
Patients Dashboard
|
|
</h1>
|
|
<p class="dashboard-subtitle">
|
|
Comprehensive patient management and monitoring system
|
|
</p>
|
|
<div class="dashboard-meta">
|
|
<div class="meta-item">
|
|
<div class="meta-icon">
|
|
<i class="fas fa-calendar"></i>
|
|
</div>
|
|
<div>
|
|
<div class="fw-bold">{{ today|date:"F d, Y" }}</div>
|
|
<small>Today's Date</small>
|
|
</div>
|
|
</div>
|
|
<div class="meta-item">
|
|
<div class="meta-icon">
|
|
<i class="fas fa-clock"></i>
|
|
</div>
|
|
<div>
|
|
<div class="fw-bold" id="currentTime">{{ now|time:"g:i A" }}</div>
|
|
<small>Current Time</small>
|
|
</div>
|
|
</div>
|
|
<div class="meta-item">
|
|
<div class="meta-icon">
|
|
<i class="fas fa-user-md"></i>
|
|
</div>
|
|
<div>
|
|
<div class="fw-bold">{{ user.get_full_name }}</div>
|
|
<small>{{ user.profile.department|default:"Healthcare Provider" }}</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 text-lg-end">
|
|
<div class="d-flex flex-column gap-2">
|
|
<a href="{% url 'patients:patient_create' %}" class="btn btn-light btn-lg">
|
|
<i class="fas fa-user-plus me-2"></i>New Patient
|
|
</a>
|
|
<button class="btn btn-outline-light" onclick="refreshDashboard()">
|
|
<i class="fas fa-sync-alt me-2"></i>Refresh Data
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistics Cards -->
|
|
<div class="stats-grid fade-in">
|
|
<div class="stat-card">
|
|
<div class="stat-card-header">
|
|
<div class="stat-icon primary">
|
|
<i class="fas fa-users"></i>
|
|
</div>
|
|
<div class="dropdown">
|
|
<button class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
|
|
<i class="fas fa-ellipsis-v"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="{% url 'patients:patient_list' %}">View All</a></li>
|
|
<li><a class="dropdown-item" href="#" onclick="exportPatients()">Export</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card-body">
|
|
<div class="stat-number">{{ total_patients|default:0 }}</div>
|
|
<div class="stat-label">Total Patients</div>
|
|
<div class="stat-change positive">
|
|
<i class="fas fa-arrow-up me-1"></i>
|
|
+{{ new_patients_today|default:0 }} today
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-card-header">
|
|
<div class="stat-icon success">
|
|
<i class="fas fa-heartbeat"></i>
|
|
</div>
|
|
<div class="dropdown">
|
|
<button class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
|
|
<i class="fas fa-ellipsis-v"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="{% url 'patients:patient_list' %}?status=active">View Active</a></li>
|
|
<li><a class="dropdown-item" href="#" onclick="generateReport('active')">Report</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card-body">
|
|
<div class="stat-number">{{ active_patients|default:0 }}</div>
|
|
<div class="stat-label">Active Patients</div>
|
|
<div class="stat-change positive">
|
|
<i class="fas fa-arrow-up me-1"></i>
|
|
{{ active_percentage|default:0 }}% of total
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-card-header">
|
|
<div class="stat-icon warning">
|
|
<i class="fas fa-calendar-check"></i>
|
|
</div>
|
|
<div class="dropdown">
|
|
<button class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
|
|
<i class="fas fa-ellipsis-v"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="{% url 'appointments:appointment_list' %}">View All</a></li>
|
|
<li><a class="dropdown-item" href="#" onclick="scheduleAppointment()">Schedule New</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card-body">
|
|
<div class="stat-number">{{ appointments_today|default:0 }}</div>
|
|
<div class="stat-label">Today's Appointments</div>
|
|
<div class="stat-change neutral">
|
|
<i class="fas fa-clock me-1"></i>
|
|
{{ upcoming_appointments|default:0 }} upcoming
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-card-header">
|
|
<div class="stat-icon danger">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
</div>
|
|
<div class="dropdown">
|
|
<button class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
|
|
<i class="fas fa-ellipsis-v"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#" onclick="viewCriticalAlerts()">View Critical</a></li>
|
|
<li><a class="dropdown-item" href="#" onclick="acknowledgeAlerts()">Acknowledge All</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card-body">
|
|
<div class="stat-number">{{ critical_alerts|default:0 }}</div>
|
|
<div class="stat-label">Critical Alerts</div>
|
|
<div class="stat-change negative">
|
|
<i class="fas fa-arrow-up me-1"></i>
|
|
Requires attention
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-card-header">
|
|
<div class="stat-icon info">
|
|
<i class="fas fa-bed"></i>
|
|
</div>
|
|
<div class="dropdown">
|
|
<button class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
|
|
<i class="fas fa-ellipsis-v"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="{% url 'inpatients:bed_management' %}">Bed Management</a></li>
|
|
<li><a class="dropdown-item" href="#" onclick="viewAdmissions()">View Admissions</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card-body">
|
|
<div class="stat-number">{{ inpatients_count|default:0 }}</div>
|
|
<div class="stat-label">Current Inpatients</div>
|
|
<div class="stat-change neutral">
|
|
<i class="fas fa-percentage me-1"></i>
|
|
{{ bed_occupancy|default:0 }}% occupancy
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-card-header">
|
|
<div class="stat-icon secondary">
|
|
<i class="fas fa-star"></i>
|
|
</div>
|
|
<div class="dropdown">
|
|
<button class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
|
|
<i class="fas fa-ellipsis-v"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="{% url 'patients:patient_list' %}?vip=true">View VIP</a></li>
|
|
<li><a class="dropdown-item" href="#" onclick="vipReport()">VIP Report</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card-body">
|
|
<div class="stat-number">{{ vip_patients|default:0 }}</div>
|
|
<div class="stat-label">VIP Patients</div>
|
|
<div class="stat-change positive">
|
|
<i class="fas fa-crown me-1"></i>
|
|
Special care
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="quick-actions fade-in">
|
|
<div class="card-header">
|
|
<h4 class="card-title">
|
|
<i class="fas fa-bolt text-warning me-2"></i>
|
|
Quick Actions
|
|
</h4>
|
|
</div>
|
|
<div class="actions-grid">
|
|
<a href="{% url 'patients:patient_create' %}" class="action-card">
|
|
<div class="action-icon">
|
|
<i class="fas fa-user-plus"></i>
|
|
</div>
|
|
<div class="action-title">Register Patient</div>
|
|
<div class="action-description">Add a new patient to the system</div>
|
|
</a>
|
|
|
|
<a href="{% url 'appointments:appointment_create' %}" class="action-card">
|
|
<div class="action-icon">
|
|
<i class="fas fa-calendar-plus"></i>
|
|
</div>
|
|
<div class="action-title">Schedule Appointment</div>
|
|
<div class="action-description">Book a new patient appointment</div>
|
|
</a>
|
|
|
|
<a href="#" onclick="emergencyAdmission()" class="action-card">
|
|
<div class="action-icon">
|
|
<i class="fas fa-ambulance"></i>
|
|
</div>
|
|
<div class="action-title">Emergency Admission</div>
|
|
<div class="action-description">Quick emergency patient admission</div>
|
|
</a>
|
|
|
|
<a href="{% url 'patients:patient_search' %}" class="action-card">
|
|
<div class="action-icon">
|
|
<i class="fas fa-search"></i>
|
|
</div>
|
|
<div class="action-title">Advanced Search</div>
|
|
<div class="action-description">Find patients with detailed filters</div>
|
|
</a>
|
|
|
|
<a href="#" onclick="generateReports()" class="action-card">
|
|
<div class="action-icon">
|
|
<i class="fas fa-chart-bar"></i>
|
|
</div>
|
|
<div class="action-title">Generate Reports</div>
|
|
<div class="action-description">Create patient analytics reports</div>
|
|
</a>
|
|
|
|
<a href="#" onclick="bulkOperations()" class="action-card">
|
|
<div class="action-icon">
|
|
<i class="fas fa-tasks"></i>
|
|
</div>
|
|
<div class="action-title">Bulk Operations</div>
|
|
<div class="action-description">Perform batch patient operations</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Patient Search -->
|
|
<div class="search-section fade-in">
|
|
<div class="card-header">
|
|
<h4 class="card-title">
|
|
<i class="fas fa-search text-primary me-2"></i>
|
|
Patient Search
|
|
</h4>
|
|
</div>
|
|
<div class="search-form">
|
|
<div class="search-input">
|
|
<div class="input-group">
|
|
<span class="input-group-text">
|
|
<i class="fas fa-search"></i>
|
|
</span>
|
|
<input type="text" class="form-control" id="patientSearch"
|
|
placeholder="Search by name, MRN, phone, or email...">
|
|
</div>
|
|
</div>
|
|
<button class="btn btn-primary" onclick="performSearch()">
|
|
<i class="fas fa-search me-1"></i>Search
|
|
</button>
|
|
<button class="btn btn-outline-secondary" onclick="advancedSearch()">
|
|
<i class="fas fa-filter me-1"></i>Advanced
|
|
</button>
|
|
<button class="btn btn-outline-info" onclick="scanQR()">
|
|
<i class="fas fa-qrcode me-1"></i>Scan QR
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Dashboard Content -->
|
|
<div class="dashboard-content fade-in">
|
|
<!-- Main Content Area -->
|
|
<div class="main-content">
|
|
<!-- Filter Tabs -->
|
|
<div class="content-card">
|
|
<div class="filter-tabs">
|
|
<button class="filter-tab active" onclick="switchTab('recent')">
|
|
<i class="fas fa-clock me-2"></i>Recent Patients
|
|
</button>
|
|
<button class="filter-tab" onclick="switchTab('appointments')">
|
|
<i class="fas fa-calendar me-2"></i>Today's Appointments
|
|
</button>
|
|
<button class="filter-tab" onclick="switchTab('admissions')">
|
|
<i class="fas fa-bed me-2"></i>Recent Admissions
|
|
</button>
|
|
<button class="filter-tab" onclick="switchTab('discharges')">
|
|
<i class="fas fa-sign-out-alt me-2"></i>Recent Discharges
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Recent Patients Tab -->
|
|
<div class="tab-content active" id="recentTab">
|
|
<div class="patients-table-container">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover" id="recentPatientsTable">
|
|
<thead>
|
|
<tr>
|
|
<th>Patient</th>
|
|
<th>MRN</th>
|
|
<th>Age/Gender</th>
|
|
<th>Last Visit</th>
|
|
<th>Status</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for patient in recent_patients %}
|
|
<tr>
|
|
<td>
|
|
<div class="d-flex align-items-center">
|
|
<div class="me-3">
|
|
{% if patient.profile_picture %}
|
|
<img src="{{ patient.profile_picture.url }}"
|
|
class="rounded-circle" width="40" height="40">
|
|
{% else %}
|
|
<div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center"
|
|
style="width: 40px; height: 40px;">
|
|
{{ patient.first_name.0 }}{{ patient.last_name.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div>
|
|
<div class="fw-bold">{{ patient.get_full_name }}</div>
|
|
<small class="text-muted">{{ patient.phone|default:"No phone" }}</small>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="badge bg-light text-dark">{{ patient.mrn }}</span>
|
|
</td>
|
|
<td>{{ patient.age }}/{{ patient.get_gender_display }}</td>
|
|
<td>{{ patient.last_visit|date:"M d, Y"|default:"Never" }}</td>
|
|
<td>
|
|
{% if patient.status == 'ACTIVE' %}
|
|
<span class="badge bg-success">Active</span>
|
|
{% elif patient.status == 'INACTIVE' %}
|
|
<span class="badge bg-secondary">Inactive</span>
|
|
{% else %}
|
|
<span class="badge bg-dark">{{ patient.get_status_display }}</span>
|
|
{% endif %}
|
|
{% if patient.is_vip %}
|
|
<span class="badge bg-warning text-dark ms-1">VIP</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<div class="btn-group btn-group-sm">
|
|
<a href="{% url 'patients:patient_detail' patient.pk %}"
|
|
class="btn btn-outline-primary" title="View Details">
|
|
<i class="fas fa-eye"></i>
|
|
</a>
|
|
<a href="{% url 'patients:patient_edit' patient.pk %}"
|
|
class="btn btn-outline-secondary" title="Edit">
|
|
<i class="fas fa-edit"></i>
|
|
</a>
|
|
<a href="{% url 'appointments:appointment_create' %}?patient={{ patient.pk }}"
|
|
class="btn btn-outline-success" title="Schedule">
|
|
<i class="fas fa-calendar-plus"></i>
|
|
</a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="6" class="text-center py-4">
|
|
<i class="fas fa-users text-muted fa-3x mb-3"></i>
|
|
<h5 class="text-muted">No Recent Patients</h5>
|
|
<p class="text-muted">Recent patient activity will appear here</p>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Other tabs content would be similar -->
|
|
<div class="tab-content" id="appointmentsTab" style="display: none;">
|
|
<div class="text-center py-5">
|
|
<i class="fas fa-calendar fa-3x text-muted mb-3"></i>
|
|
<h5 class="text-muted">Today's Appointments</h5>
|
|
<p class="text-muted">Appointment data will be loaded here</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-content" id="admissionsTab" style="display: none;">
|
|
<div class="text-center py-5">
|
|
<i class="fas fa-bed fa-3x text-muted mb-3"></i>
|
|
<h5 class="text-muted">Recent Admissions</h5>
|
|
<p class="text-muted">Admission data will be loaded here</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-content" id="dischargesTab" style="display: none;">
|
|
<div class="text-center py-5">
|
|
<i class="fas fa-sign-out-alt fa-3x text-muted mb-3"></i>
|
|
<h5 class="text-muted">Recent Discharges</h5>
|
|
<p class="text-muted">Discharge data will be loaded here</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar Content -->
|
|
<div class="sidebar-content">
|
|
<!-- Critical Alerts -->
|
|
<div class="content-card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">
|
|
<i class="fas fa-exclamation-triangle text-danger me-2"></i>
|
|
Critical Alerts
|
|
{% if critical_alerts > 0 %}
|
|
<span class="notification-badge">{{ critical_alerts }}</span>
|
|
{% endif %}
|
|
</h5>
|
|
<button class="btn btn-sm btn-outline-secondary" onclick="refreshAlerts()">
|
|
<i class="fas fa-sync-alt"></i>
|
|
</button>
|
|
</div>
|
|
<div class="alerts-section">
|
|
<div class="alert-item critical">
|
|
<div class="alert-icon">
|
|
<i class="fas fa-exclamation-triangle text-danger"></i>
|
|
</div>
|
|
<div class="alert-content">
|
|
<div class="alert-title">High Priority Lab Results</div>
|
|
<div class="alert-description">3 patients have critical lab values requiring immediate attention</div>
|
|
<div class="alert-time">2 minutes ago</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="alert-item warning">
|
|
<div class="alert-icon">
|
|
<i class="fas fa-clock text-warning"></i>
|
|
</div>
|
|
<div class="alert-content">
|
|
<div class="alert-title">Appointment Delays</div>
|
|
<div class="alert-description">5 appointments are running behind schedule</div>
|
|
<div class="alert-time">15 minutes ago</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="alert-item info">
|
|
<div class="alert-icon">
|
|
<i class="fas fa-info-circle text-info"></i>
|
|
</div>
|
|
<div class="alert-content">
|
|
<div class="alert-title">System Maintenance</div>
|
|
<div class="alert-description">Scheduled maintenance tonight at 2:00 AM</div>
|
|
<div class="alert-time">1 hour ago</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Calendar Widget -->
|
|
<div class="content-card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">
|
|
<i class="fas fa-calendar text-primary me-2"></i>
|
|
Calendar
|
|
</h5>
|
|
<button class="btn btn-sm btn-outline-primary" onclick="viewFullCalendar()">
|
|
<i class="fas fa-expand-alt"></i>
|
|
</button>
|
|
</div>
|
|
<div class="calendar-widget" id="miniCalendar">
|
|
<!-- Calendar will be rendered here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Stats -->
|
|
<div class="content-card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">
|
|
<i class="fas fa-tachometer-alt text-success me-2"></i>
|
|
Quick Stats
|
|
</h5>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<span>Patient Satisfaction</span>
|
|
<span class="fw-bold">94%</span>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar bg-success" style="width: 94%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<span>Bed Occupancy</span>
|
|
<span class="fw-bold">{{ bed_occupancy|default:78 }}%</span>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar bg-warning" style="width: {{ bed_occupancy|default:78 }}%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<span>Staff Availability</span>
|
|
<span class="fw-bold">87%</span>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar bg-info" style="width: 87%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center mt-3">
|
|
<small class="text-muted">Updated {{ now|time:"g:i A" }}</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Emergency Admission Modal -->
|
|
<div class="modal fade" id="emergencyModal" tabindex="-1">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-danger text-white">
|
|
<h5 class="modal-title">
|
|
<i class="fas fa-ambulance me-2"></i>Emergency Admission
|
|
</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="emergencyForm">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group mb-3">
|
|
<label class="form-label">Patient Name *</label>
|
|
<input type="text" class="form-control" required>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group mb-3">
|
|
<label class="form-label">Emergency Contact</label>
|
|
<input type="tel" class="form-control">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group mb-3">
|
|
<label class="form-label">Chief Complaint *</label>
|
|
<textarea class="form-control" rows="3" required></textarea>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group mb-3">
|
|
<label class="form-label">Triage Level *</label>
|
|
<select class="form-select" required>
|
|
<option value="">Select Level</option>
|
|
<option value="1">Level 1 - Immediate</option>
|
|
<option value="2">Level 2 - Urgent</option>
|
|
<option value="3">Level 3 - Less Urgent</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group mb-3">
|
|
<label class="form-label">Attending Physician</label>
|
|
<select class="form-select">
|
|
<option value="">Select Physician</option>
|
|
<option value="1">Dr. Smith</option>
|
|
<option value="2">Dr. Johnson</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-danger">
|
|
<i class="fas fa-plus me-1"></i>Admit Patient
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_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 src="{% static 'assets/plugins/fullcalendar/main.min.js' %}"></script>
|
|
<script src="{% static 'assets/plugins/chart.js/dist/chart.min.js' %}"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Initialize DataTables
|
|
$('#recentPatientsTable').DataTable({
|
|
responsive: true,
|
|
pageLength: 10,
|
|
order: [[3, 'desc']], // Sort by last visit
|
|
columnDefs: [
|
|
{ orderable: false, targets: [5] } // Actions column
|
|
]
|
|
});
|
|
|
|
// Initialize mini calendar
|
|
initializeMiniCalendar();
|
|
|
|
// Update time every minute
|
|
updateCurrentTime();
|
|
setInterval(updateCurrentTime, 60000);
|
|
|
|
// Auto-refresh dashboard data every 5 minutes
|
|
setInterval(refreshDashboardData, 300000);
|
|
|
|
// Initialize search functionality
|
|
initializeSearch();
|
|
|
|
// Load initial alerts
|
|
loadCriticalAlerts();
|
|
});
|
|
|
|
function updateCurrentTime() {
|
|
const now = new Date();
|
|
const timeString = now.toLocaleTimeString('en-US', {
|
|
hour: 'numeric',
|
|
minute: '2-digit',
|
|
hour12: true
|
|
});
|
|
$('#currentTime').text(timeString);
|
|
}
|
|
|
|
function switchTab(tabName) {
|
|
// Remove active class from all tabs and content
|
|
$('.filter-tab').removeClass('active');
|
|
$('.tab-content').removeClass('active').hide();
|
|
|
|
// Add active class to clicked tab and show content
|
|
$(`.filter-tab[onclick="switchTab('${tabName}')"]`).addClass('active');
|
|
$(`#${tabName}Tab`).addClass('active').show();
|
|
|
|
// Load tab-specific data
|
|
loadTabData(tabName);
|
|
}
|
|
|
|
function loadTabData(tabName) {
|
|
switch(tabName) {
|
|
case 'appointments':
|
|
loadTodaysAppointments();
|
|
break;
|
|
case 'admissions':
|
|
loadRecentAdmissions();
|
|
break;
|
|
case 'discharges':
|
|
loadRecentDischarges();
|
|
break;
|
|
default:
|
|
// Recent patients already loaded
|
|
break;
|
|
}
|
|
}
|
|
|
|
function loadTodaysAppointments() {
|
|
// AJAX call to load today's appointments
|
|
$.ajax({
|
|
url: '/api/appointments/today/',
|
|
method: 'GET',
|
|
success: function(data) {
|
|
renderAppointments(data);
|
|
},
|
|
error: function() {
|
|
showAlert('Error loading appointments', 'error');
|
|
}
|
|
});
|
|
}
|
|
|
|
function loadRecentAdmissions() {
|
|
// AJAX call to load recent admissions
|
|
$.ajax({
|
|
url: '/api/admissions/recent/',
|
|
method: 'GET',
|
|
success: function(data) {
|
|
renderAdmissions(data);
|
|
},
|
|
error: function() {
|
|
showAlert('Error loading admissions', 'error');
|
|
}
|
|
});
|
|
}
|
|
|
|
function loadRecentDischarges() {
|
|
// AJAX call to load recent discharges
|
|
$.ajax({
|
|
url: '/api/discharges/recent/',
|
|
method: 'GET',
|
|
success: function(data) {
|
|
renderDischarges(data);
|
|
},
|
|
error: function() {
|
|
showAlert('Error loading discharges', 'error');
|
|
}
|
|
});
|
|
}
|
|
|
|
function initializeMiniCalendar() {
|
|
const calendarEl = document.getElementById('miniCalendar');
|
|
const calendar = new FullCalendar.Calendar(calendarEl, {
|
|
initialView: 'dayGridMonth',
|
|
height: 'auto',
|
|
headerToolbar: {
|
|
left: 'prev,next',
|
|
center: 'title',
|
|
right: ''
|
|
},
|
|
events: '/api/appointments/calendar/',
|
|
eventClick: function(info) {
|
|
// Handle event click
|
|
viewAppointment(info.event.id);
|
|
}
|
|
});
|
|
calendar.render();
|
|
}
|
|
|
|
function initializeSearch() {
|
|
$('#patientSearch').on('keyup', function(e) {
|
|
if (e.keyCode === 13) { // Enter key
|
|
performSearch();
|
|
}
|
|
});
|
|
|
|
// Auto-complete functionality
|
|
$('#patientSearch').autocomplete({
|
|
source: '/api/patients/search/',
|
|
minLength: 2,
|
|
select: function(event, ui) {
|
|
window.location.href = `/patients/${ui.item.id}/`;
|
|
}
|
|
});
|
|
}
|
|
|
|
function performSearch() {
|
|
const query = $('#patientSearch').val();
|
|
if (query.length < 2) {
|
|
showAlert('Please enter at least 2 characters', 'warning');
|
|
return;
|
|
}
|
|
|
|
window.location.href = `/patients/search/?q=${encodeURIComponent(query)}`;
|
|
}
|
|
|
|
function advancedSearch() {
|
|
window.location.href = '{% url "patients:patient_search" %}';
|
|
}
|
|
|
|
function scanQR() {
|
|
// QR code scanning functionality
|
|
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
|
|
// Implement QR scanner
|
|
showAlert('QR Scanner feature coming soon!', 'info');
|
|
} else {
|
|
showAlert('Camera not supported on this device', 'error');
|
|
}
|
|
}
|
|
|
|
function emergencyAdmission() {
|
|
$('#emergencyModal').modal('show');
|
|
}
|
|
|
|
function scheduleAppointment() {
|
|
window.location.href = '{% url "appointments:appointment_create" %}';
|
|
}
|
|
|
|
function generateReports() {
|
|
window.location.href = '/reports/patients/';
|
|
}
|
|
|
|
function bulkOperations() {
|
|
window.location.href = '/patients/bulk/';
|
|
}
|
|
|
|
function refreshDashboard() {
|
|
location.reload();
|
|
}
|
|
|
|
function refreshDashboardData() {
|
|
// Refresh statistics
|
|
$.ajax({
|
|
url: '/api/dashboard/stats/',
|
|
method: 'GET',
|
|
success: function(data) {
|
|
updateStatistics(data);
|
|
}
|
|
});
|
|
|
|
// Refresh alerts
|
|
loadCriticalAlerts();
|
|
}
|
|
|
|
function loadCriticalAlerts() {
|
|
$.ajax({
|
|
url: '/api/alerts/critical/',
|
|
method: 'GET',
|
|
success: function(data) {
|
|
renderAlerts(data);
|
|
}
|
|
});
|
|
}
|
|
|
|
function updateStatistics(data) {
|
|
// Update stat cards with new data
|
|
Object.keys(data).forEach(key => {
|
|
$(`.stat-number:contains('${key}')`).text(data[key]);
|
|
});
|
|
}
|
|
|
|
function renderAlerts(alerts) {
|
|
const alertsContainer = $('.alerts-section');
|
|
alertsContainer.empty();
|
|
|
|
if (alerts.length === 0) {
|
|
alertsContainer.html(`
|
|
<div class="text-center py-4">
|
|
<i class="fas fa-check-circle text-success fa-2x mb-2"></i>
|
|
<p class="text-muted">No critical alerts</p>
|
|
</div>
|
|
`);
|
|
return;
|
|
}
|
|
|
|
alerts.forEach(alert => {
|
|
const alertHtml = `
|
|
<div class="alert-item ${alert.level}">
|
|
<div class="alert-icon">
|
|
<i class="fas ${alert.icon} text-${alert.level}"></i>
|
|
</div>
|
|
<div class="alert-content">
|
|
<div class="alert-title">${alert.title}</div>
|
|
<div class="alert-description">${alert.description}</div>
|
|
<div class="alert-time">${alert.time}</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
alertsContainer.append(alertHtml);
|
|
});
|
|
}
|
|
|
|
function viewCriticalAlerts() {
|
|
window.location.href = '/alerts/critical/';
|
|
}
|
|
|
|
function acknowledgeAlerts() {
|
|
$.ajax({
|
|
url: '/api/alerts/acknowledge/',
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRFToken': $('[name=csrfmiddlewaretoken]').val()
|
|
},
|
|
success: function() {
|
|
showAlert('All alerts acknowledged', 'success');
|
|
loadCriticalAlerts();
|
|
}
|
|
});
|
|
}
|
|
|
|
function viewFullCalendar() {
|
|
window.location.href = '/calendar/';
|
|
}
|
|
|
|
function refreshAlerts() {
|
|
loadCriticalAlerts();
|
|
}
|
|
|
|
function exportPatients() {
|
|
window.location.href = '/patients/export/';
|
|
}
|
|
|
|
function generateReport(type) {
|
|
window.location.href = `/reports/patients/${type}/`;
|
|
}
|
|
|
|
function vipReport() {
|
|
window.location.href = '/reports/patients/vip/';
|
|
}
|
|
|
|
function viewAdmissions() {
|
|
window.location.href = '/inpatients/admissions/';
|
|
}
|
|
|
|
function viewAppointment(appointmentId) {
|
|
window.location.href = `/appointments/${appointmentId}/`;
|
|
}
|
|
|
|
function showAlert(message, type) {
|
|
const alertClass = type === 'success' ? 'alert-success' :
|
|
type === 'warning' ? 'alert-warning' :
|
|
type === 'info' ? 'alert-info' : 'alert-danger';
|
|
const alertHtml = `
|
|
<div class="alert ${alertClass} alert-dismissible fade show" role="alert">
|
|
${message}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
`;
|
|
|
|
$('.container-fluid').prepend(alertHtml);
|
|
setTimeout(() => $('.alert').fadeOut(), 5000);
|
|
}
|
|
|
|
// Keyboard shortcuts
|
|
$(document).keydown(function(e) {
|
|
// Ctrl+N for new patient
|
|
if (e.ctrlKey && e.keyCode === 78) {
|
|
e.preventDefault();
|
|
window.location.href = '{% url "patients:patient_create" %}';
|
|
}
|
|
|
|
// Ctrl+F for search
|
|
if (e.ctrlKey && e.keyCode === 70) {
|
|
e.preventDefault();
|
|
$('#patientSearch').focus();
|
|
}
|
|
|
|
// Ctrl+R for refresh
|
|
if (e.ctrlKey && e.keyCode === 82) {
|
|
e.preventDefault();
|
|
refreshDashboard();
|
|
}
|
|
});
|
|
|
|
// Auto-save user preferences
|
|
function saveUserPreferences() {
|
|
const preferences = {
|
|
defaultTab: $('.filter-tab.active').attr('onclick').match(/'([^']+)'/)[1],
|
|
dashboardLayout: 'default'
|
|
};
|
|
|
|
localStorage.setItem('patientDashboardPrefs', JSON.stringify(preferences));
|
|
}
|
|
|
|
// Load user preferences
|
|
function loadUserPreferences() {
|
|
const prefs = localStorage.getItem('patientDashboardPrefs');
|
|
if (prefs) {
|
|
const preferences = JSON.parse(prefs);
|
|
if (preferences.defaultTab) {
|
|
switchTab(preferences.defaultTab);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Initialize preferences on load
|
|
$(document).ready(function() {
|
|
loadUserPreferences();
|
|
|
|
// Save preferences when tabs change
|
|
$('.filter-tab').on('click', function() {
|
|
setTimeout(saveUserPreferences, 100);
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|