|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>SuperAdmin Console | MedMIS</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/heatmap.js@2.0.5/build/heatmap.min.js"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
} |
|
|
.heatmap-container { |
|
|
width: 100%; |
|
|
height: 300px; |
|
|
position: relative; |
|
|
} |
|
|
.status-dot { |
|
|
width: 10px; |
|
|
height: 10px; |
|
|
border-radius: 50%; |
|
|
display: inline-block; |
|
|
} |
|
|
.status-online { |
|
|
background-color: #10b981; |
|
|
} |
|
|
.status-offline { |
|
|
background-color: #ef4444; |
|
|
} |
|
|
.status-busy { |
|
|
background-color: #f59e0b; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-white min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
<header class="mb-8"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<button onclick="history.back()" class="mr-4 p-2 rounded-lg bg-gray-700 hover:bg-gray-600 transition"> |
|
|
<i data-feather="arrow-left" class="w-5 h-5"></i> |
|
|
</button> |
|
|
<div> |
|
|
<h1 class="text-3xl font-bold" data-i18n="superAdmin.title">SuperAdmin Console</h1> |
|
|
<p class="text-gray-300" data-i18n="superAdmin.subtitle">Global system management and monitoring</p> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8"> |
|
|
<div class="bg-blue-900 rounded-xl p-4"> |
|
|
<div class="flex justify-between"> |
|
|
<div> |
|
|
<h3 class="text-sm text-gray-300">Active Clinics</h3> |
|
|
<p class="text-2xl font-bold">24</p> |
|
|
</div> |
|
|
<i data-feather="home" class="w-8 h-8 text-blue-300"></i> |
|
|
</div> |
|
|
<p class="text-sm text-blue-200 mt-2">+3 this month</p> |
|
|
</div> |
|
|
<div class="bg-purple-900 rounded-xl p-4"> |
|
|
<div class="flex justify-between"> |
|
|
<div> |
|
|
<h3 class="text-sm text-gray-300">Active Doctors</h3> |
|
|
<p class="text-2xl font-bold">187</p> |
|
|
</div> |
|
|
<i data-feather="users" class="w-8 h-8 text-purple-300"></i> |
|
|
</div> |
|
|
<p class="text-sm text-purple-200 mt-2">89% online</p> |
|
|
</div> |
|
|
<div class="bg-green-900 rounded-xl p-4"> |
|
|
<div class="flex justify-between"> |
|
|
<div> |
|
|
<h3 class="text-sm text-gray-300">SLA Compliance</h3> |
|
|
<p class="text-2xl font-bold">91%</p> |
|
|
</div> |
|
|
<i data-feather="clock" class="w-8 h-8 text-green-300"></i> |
|
|
</div> |
|
|
<p class="text-sm text-green-200 mt-2">+5% from last week</p> |
|
|
</div> |
|
|
<div class="bg-red-900 rounded-xl p-4"> |
|
|
<div class="flex justify-between"> |
|
|
<div> |
|
|
<h3 class="text-sm text-gray-300">Overdue Cases</h3> |
|
|
<p class="text-2xl font-bold">12</p> |
|
|
</div> |
|
|
<i data-feather="alert-circle" class="w-8 h-8 text-red-300"></i> |
|
|
</div> |
|
|
<p class="text-sm text-red-200 mt-2">-3 from yesterday</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8"> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 lg:col-span-2"> |
|
|
<h2 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i data-feather="activity" class="w-5 h-5 mr-2"></i> |
|
|
Clinics Overview |
|
|
</h2> |
|
|
<canvas id="clinicsChart" height="250"></canvas> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6"> |
|
|
<h2 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i data-feather="user-check" class="w-5 h-5 mr-2"></i> |
|
|
Doctor Status |
|
|
</h2> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span>Group A (Radiologists)</span> |
|
|
<div class="flex items-center"> |
|
|
<span class="status-dot status-online mr-1"></span> |
|
|
<span>24/30</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span>Group B (Technicians)</span> |
|
|
<div class="flex items-center"> |
|
|
<span class="status-dot status-online mr-1"></span> |
|
|
<span>18/22</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span>Group C (Referrers)</span> |
|
|
<div class="flex items-center"> |
|
|
<span class="status-dot status-online mr-1"></span> |
|
|
<span>45/55</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="pt-4"> |
|
|
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition"> |
|
|
<i data-feather="refresh-cw" class="w-4 h-4 mr-2"></i> |
|
|
Reassign Groups |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 mb-8"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-semibold flex items-center"> |
|
|
<i data-feather="list" class="w-5 h-5 mr-2"></i> |
|
|
Active Queues |
|
|
</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded-lg transition"> |
|
|
<i data-feather="download" class="w-4 h-4 mr-2"></i> |
|
|
Export |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="w-full"> |
|
|
<thead> |
|
|
<tr class="text-gray-300 border-b border-gray-700"> |
|
|
<th class="py-3 px-4 text-left">Clinic</th> |
|
|
<th class="py-3 px-4 text-left">Queue ID</th> |
|
|
<th class="py-3 px-4 text-left">Patient</th> |
|
|
<th class="py-3 px-4 text-left">Doctor</th> |
|
|
<th class="py-3 px-4 text-left">Status</th> |
|
|
<th class="py-3 px-4 text-left">SLA Time</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody> |
|
|
<tr class="border-b border-gray-700"> |
|
|
<td class="py-3 px-4">Main Radiology</td> |
|
|
<td class="py-3 px-4">Q-789456</td> |
|
|
<td class="py-3 px-4">John Doe</td> |
|
|
<td class="py-3 px-4">Dr. Smith (A)</td> |
|
|
<td class="py-3 px-4"><span class="bg-green-900 text-green-300 px-2 py-1 rounded text-xs">In Progress</span></td> |
|
|
<td class="py-3 px-4">12:30</td> |
|
|
</tr> |
|
|
<tr class="border-b border-gray-700"> |
|
|
<td class="py-3 px-4">Cardiology Center</td> |
|
|
<td class="py-3 px-4">Q-654321</td> |
|
|
<td class="py-3 px-4">Sarah Johnson</td> |
|
|
<td class="py-3 px-4">Dr. Lee (B)</td> |
|
|
<td class="py-3 px-4"><span class="bg-yellow-900 text-yellow-300 px-2 py-1 rounded text-xs">Waiting</span></td> |
|
|
<td class="py-3 px-4">45:00</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8"> |
|
|
<div class="bg-gray-800 rounded-xl p-6"> |
|
|
<h2 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i data-feather="bar-chart-2" class="w-5 h-5 mr-2"></i> |
|
|
KPI Performance |
|
|
</h2> |
|
|
<canvas id="kpiChart" height="300"></canvas> |
|
|
</div> |
|
|
<div class="bg-gray-800 rounded-xl p-6"> |
|
|
<h2 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i data-feather="map" class="w-5 h-5 mr-2"></i> |
|
|
Activity Heatmap |
|
|
</h2> |
|
|
<div id="heatmapContainer" class="heatmap-container"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6"> |
|
|
<h2 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i data-feather="alert-triangle" class="w-5 h-5 mr-2"></i> |
|
|
Event Control Center |
|
|
</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
|
|
<div class="bg-gray-700 rounded-lg p-4"> |
|
|
<h3 class="font-medium mb-2">Overdue Cases</h3> |
|
|
<div class="text-2xl font-bold text-red-400 mb-2">12</div> |
|
|
<button class="w-full bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded text-sm"> |
|
|
Escalate All |
|
|
</button> |
|
|
</div> |
|
|
<div class="bg-gray-700 rounded-lg p-4"> |
|
|
<h3 class="font-medium mb-2">No-Shows</h3> |
|
|
<div class="text-2xl font-bold text-yellow-400 mb-2">5</div> |
|
|
<button class="w-full bg-yellow-600 hover:bg-yellow-700 text-white py-2 px-4 rounded text-sm"> |
|
|
Send Reminders |
|
|
</button> |
|
|
</div> |
|
|
<div class="bg-gray-700 rounded-lg p-4"> |
|
|
<h3 class="font-medium mb-2">Efficiency Alerts</h3> |
|
|
<div class="text-2xl font-bold text-blue-400 mb-2">8</div> |
|
|
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded text-sm"> |
|
|
Review All |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-8 bg-gray-800 rounded-xl p-6"> |
|
|
<h2 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i data-feather="code" class="w-5 h-5 mr-2"></i> |
|
|
Admin API Endpoints |
|
|
</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div class="bg-gray-700 rounded-lg p-4"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<span class="bg-blue-500 text-white text-xs px-2 py-1 rounded mr-2">POST</span> |
|
|
<code class="text-sm">/admin/reassign-doctor</code> |
|
|
</div> |
|
|
<p class="text-sm text-gray-300">Reassign doctor to different group</p> |
|
|
<pre class="mt-2 p-2 bg-gray-900 rounded text-xs overflow-x-auto"> |
|
|
{ |
|
|
"doctorId": "doc123", |
|
|
"newGroup": "A" |
|
|
}</pre> |
|
|
</div> |
|
|
<div class="bg-gray-700 rounded-lg p-4"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<span class="bg-green-500 text-white text-xs px-2 py-1 rounded mr-2">GET</span> |
|
|
<code class="text-sm">/admin/system-stats</code> |
|
|
</div> |
|
|
<p class="text-sm text-gray-300">Retrieve system-wide statistics</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const clinicsCtx = document.getElementById('clinicsChart').getContext('2d'); |
|
|
const clinicsChart = new Chart(clinicsCtx, { |
|
|
type: 'bar', |
|
|
data: { |
|
|
labels: ['Radiology', 'Cardiology', 'Neurology', 'Oncology', 'Pediatrics'], |
|
|
datasets: [{ |
|
|
label: 'Active Patients', |
|
|
data: [45, 32, 28, 19, 23], |
|
|
backgroundColor: 'rgba(59, 130, 246, 0.7)', |
|
|
borderColor: 'rgba(59, 130, 246, 1)', |
|
|
borderWidth: 1 |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
plugins: { |
|
|
legend: { |
|
|
display: false |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: true, |
|
|
grid: { |
|
|
color: 'rgba(255, 255, 255, 0.1)' |
|
|
}, |
|
|
ticks: { |
|
|
color: 'rgba(255, 255, 255, 0.7)' |
|
|
} |
|
|
}, |
|
|
x: { |
|
|
grid: { |
|
|
display: false |
|
|
}, |
|
|
ticks: { |
|
|
color: 'rgba(255, 255, 255, 0.7)' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const kpiCtx = document.getElementById('kpiChart').getContext('2d'); |
|
|
const kpiChart = new Chart(kpiCtx, { |
|
|
type: 'radar', |
|
|
data: { |
|
|
labels: ['SLA Compliance', 'Patient Satisfaction', 'Report Accuracy', 'Efficiency', 'Resource Usage'], |
|
|
datasets: [{ |
|
|
label: 'Current Month', |
|
|
data: [92, 88, 95, 85, 78], |
|
|
backgroundColor: 'rgba(99, 102, 241, 0.2)', |
|
|
borderColor: 'rgba(99, 102, 241, 1)', |
|
|
borderWidth: 2, |
|
|
pointBackgroundColor: 'rgba(99, 102, 241, 1)' |
|
|
}, { |
|
|
label: 'Last Month', |
|
|
data: [88, 85, 92, 80, 75], |
|
|
backgroundColor: 'rgba(236, 72, 153, 0.2)', |
|
|
borderColor: 'rgba(236, 72, 153, 1)', |
|
|
borderWidth: 2, |
|
|
pointBackgroundColor: 'rgba(236, 72, 153, 1)' |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
scales: { |
|
|
r: { |
|
|
angleLines: { |
|
|
color: 'rgba(255, 255, 255, 0.1)' |
|
|
}, |
|
|
grid: { |
|
|
color: 'rgba(255, 255, 255, 0.1)' |
|
|
}, |
|
|
pointLabels: { |
|
|
color: 'rgba(255, 255, 255, 0.7)' |
|
|
}, |
|
|
ticks: { |
|
|
backdropColor: 'rgba(0, 0, 0, 0)', |
|
|
color: 'rgba(255, 255, 255, 0.5)' |
|
|
} |
|
|
} |
|
|
}, |
|
|
plugins: { |
|
|
legend: { |
|
|
labels: { |
|
|
color: 'rgba(255, 255, 255, 0.7)' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const heatmapInstance = h337.create({ |
|
|
container: document.getElementById('heatmapContainer'), |
|
|
radius: 35 |
|
|
}); |
|
|
|
|
|
|
|
|
const points = []; |
|
|
const max = 100; |
|
|
const width = document.getElementById('heatmapContainer').offsetWidth; |
|
|
const height = 300; |
|
|
|
|
|
for (let i = 0; i < 50; i++) { |
|
|
points.push({ |
|
|
x: Math.floor(Math.random() * width), |
|
|
y: Math.floor(Math.random() * height), |
|
|
value: Math.floor(Math.random() * max) |
|
|
}); |
|
|
} |
|
|
|
|
|
const data = { |
|
|
max: max, |
|
|
data: points |
|
|
}; |
|
|
|
|
|
heatmapInstance.setData(data); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelector('.bg-blue-600').addEventListener('click', function() { |
|
|
alert('Doctor group reassignment modal would open here'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.bg-gray-700 button').forEach(button => { |
|
|
button.addEventListener('click', function() { |
|
|
const action = this.textContent.trim(); |
|
|
alert(`Processing ${action} action...`); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
