Hugging Face's logo

Spaces:
muboboev
/
medmis-core-orchestrator
Running

App Files Community
muboboev commited on
Commit
bf70a73
·
verified ·
1 Parent(s): e53146c

🧑‍💻 Этап 9. SuperAdminConsole

Browse files

Цель: управление всей системой.

UI: дашборд клиник и врачей.

Таблицы: активные очереди, SLA, рейтинги.

Назначение врачей (группы A/B/C, онлайн/офлайн).

Аналитика по KPI (отчёты, графики, heatmap).

Контроль событий (просрочки, неявки, эффективность).

Files changed (2) hide show
  1. index.html +10 -1
  2. superadmin.html +405 -0
index.html CHANGED
@@ -104,7 +104,16 @@
104
  </div>
105
  <p class="text-gray-300">Automated scoring with SLA monitoring and penalties</p>
106
  </a>
107
- <a href="filesanddicom.html" class="module-card rounded-xl p-6 border border-gray-700 hover:border-teal-500 transition">
 
 
 
 
 
 
 
 
 
108
  <div class="flex items-center mb-4">
109
  <div class="p-3 bg-teal-500 rounded-lg mr-4">
110
  <i data-feather="hard-drive" class="w-6 h-6"></i>
 
104
  </div>
105
  <p class="text-gray-300">Automated scoring with SLA monitoring and penalties</p>
106
  </a>
107
+ <a href="superadmin.html" class="module-card rounded-xl p-6 border border-gray-700 hover:border-pink-500 transition">
108
+ <div class="flex items-center mb-4">
109
+ <div class="p-3 bg-pink-500 rounded-lg mr-4">
110
+ <i data-feather="shield" class="w-6 h-6"></i>
111
+ </div>
112
+ <h3 class="text-xl font-semibold">SuperAdmin</h3>
113
+ </div>
114
+ <p class="text-gray-300">Global system management and monitoring</p>
115
+ </a>
116
+ <a href="filesanddicom.html" class="module-card rounded-xl p-6 border border-gray-700 hover:border-teal-500 transition">
117
  <div class="flex items-center mb-4">
118
  <div class="p-3 bg-teal-500 rounded-lg mr-4">
119
  <i data-feather="hard-drive" class="w-6 h-6"></i>
superadmin.html ADDED
@@ -0,0 +1,405 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SuperAdmin Console | MedMIS</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/heatmap.js@2.0.5/build/heatmap.min.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
13
+ body {
14
+ font-family: 'Inter', sans-serif;
15
+ }
16
+ .heatmap-container {
17
+ width: 100%;
18
+ height: 300px;
19
+ position: relative;
20
+ }
21
+ .status-dot {
22
+ width: 10px;
23
+ height: 10px;
24
+ border-radius: 50%;
25
+ display: inline-block;
26
+ }
27
+ .status-online {
28
+ background-color: #10b981;
29
+ }
30
+ .status-offline {
31
+ background-color: #ef4444;
32
+ }
33
+ .status-busy {
34
+ background-color: #f59e0b;
35
+ }
36
+ </style>
37
+ </head>
38
+ <body class="bg-gray-900 text-white min-h-screen">
39
+ <div class="container mx-auto px-4 py-8">
40
+ <header class="mb-8">
41
+ <h1 class="text-3xl font-bold">SuperAdmin Console</h1>
42
+ <p class="text-gray-300">Global system management and monitoring</p>
43
+ </header>
44
+
45
+ <!-- Summary Cards -->
46
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
47
+ <div class="bg-blue-900 rounded-xl p-4">
48
+ <div class="flex justify-between">
49
+ <div>
50
+ <h3 class="text-sm text-gray-300">Active Clinics</h3>
51
+ <p class="text-2xl font-bold">24</p>
52
+ </div>
53
+ <i data-feather="home" class="w-8 h-8 text-blue-300"></i>
54
+ </div>
55
+ <p class="text-sm text-blue-200 mt-2">+3 this month</p>
56
+ </div>
57
+ <div class="bg-purple-900 rounded-xl p-4">
58
+ <div class="flex justify-between">
59
+ <div>
60
+ <h3 class="text-sm text-gray-300">Active Doctors</h3>
61
+ <p class="text-2xl font-bold">187</p>
62
+ </div>
63
+ <i data-feather="users" class="w-8 h-8 text-purple-300"></i>
64
+ </div>
65
+ <p class="text-sm text-purple-200 mt-2">89% online</p>
66
+ </div>
67
+ <div class="bg-green-900 rounded-xl p-4">
68
+ <div class="flex justify-between">
69
+ <div>
70
+ <h3 class="text-sm text-gray-300">SLA Compliance</h3>
71
+ <p class="text-2xl font-bold">91%</p>
72
+ </div>
73
+ <i data-feather="clock" class="w-8 h-8 text-green-300"></i>
74
+ </div>
75
+ <p class="text-sm text-green-200 mt-2">+5% from last week</p>
76
+ </div>
77
+ <div class="bg-red-900 rounded-xl p-4">
78
+ <div class="flex justify-between">
79
+ <div>
80
+ <h3 class="text-sm text-gray-300">Overdue Cases</h3>
81
+ <p class="text-2xl font-bold">12</p>
82
+ </div>
83
+ <i data-feather="alert-circle" class="w-8 h-8 text-red-300"></i>
84
+ </div>
85
+ <p class="text-sm text-red-200 mt-2">-3 from yesterday</p>
86
+ </div>
87
+ </div>
88
+
89
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
90
+ <!-- Clinics Overview -->
91
+ <div class="bg-gray-800 rounded-xl p-6 lg:col-span-2">
92
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
93
+ <i data-feather="activity" class="w-5 h-5 mr-2"></i>
94
+ Clinics Overview
95
+ </h2>
96
+ <canvas id="clinicsChart" height="250"></canvas>
97
+ </div>
98
+
99
+ <!-- Doctor Status -->
100
+ <div class="bg-gray-800 rounded-xl p-6">
101
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
102
+ <i data-feather="user-check" class="w-5 h-5 mr-2"></i>
103
+ Doctor Status
104
+ </h2>
105
+ <div class="space-y-4">
106
+ <div class="flex justify-between items-center">
107
+ <span>Group A (Radiologists)</span>
108
+ <div class="flex items-center">
109
+ <span class="status-dot status-online mr-1"></span>
110
+ <span>24/30</span>
111
+ </div>
112
+ </div>
113
+ <div class="flex justify-between items-center">
114
+ <span>Group B (Technicians)</span>
115
+ <div class="flex items-center">
116
+ <span class="status-dot status-online mr-1"></span>
117
+ <span>18/22</span>
118
+ </div>
119
+ </div>
120
+ <div class="flex justify-between items-center">
121
+ <span>Group C (Referrers)</span>
122
+ <div class="flex items-center">
123
+ <span class="status-dot status-online mr-1"></span>
124
+ <span>45/55</span>
125
+ </div>
126
+ </div>
127
+ <div class="pt-4">
128
+ <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition">
129
+ <i data-feather="refresh-cw" class="w-4 h-4 mr-2"></i>
130
+ Reassign Groups
131
+ </button>
132
+ </div>
133
+ </div>
134
+ </div>
135
+ </div>
136
+
137
+ <!-- Active Queues -->
138
+ <div class="bg-gray-800 rounded-xl p-6 mb-8">
139
+ <div class="flex justify-between items-center mb-4">
140
+ <h2 class="text-xl font-semibold flex items-center">
141
+ <i data-feather="list" class="w-5 h-5 mr-2"></i>
142
+ Active Queues
143
+ </h2>
144
+ <div class="flex space-x-2">
145
+ <button class="bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded-lg transition">
146
+ <i data-feather="download" class="w-4 h-4 mr-2"></i>
147
+ Export
148
+ </button>
149
+ </div>
150
+ </div>
151
+ <div class="overflow-x-auto">
152
+ <table class="w-full">
153
+ <thead>
154
+ <tr class="text-gray-300 border-b border-gray-700">
155
+ <th class="py-3 px-4 text-left">Clinic</th>
156
+ <th class="py-3 px-4 text-left">Queue ID</th>
157
+ <th class="py-3 px-4 text-left">Patient</th>
158
+ <th class="py-3 px-4 text-left">Doctor</th>
159
+ <th class="py-3 px-4 text-left">Status</th>
160
+ <th class="py-3 px-4 text-left">SLA Time</th>
161
+ </tr>
162
+ </thead>
163
+ <tbody>
164
+ <tr class="border-b border-gray-700">
165
+ <td class="py-3 px-4">Main Radiology</td>
166
+ <td class="py-3 px-4">Q-789456</td>
167
+ <td class="py-3 px-4">John Doe</td>
168
+ <td class="py-3 px-4">Dr. Smith (A)</td>
169
+ <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>
170
+ <td class="py-3 px-4">12:30</td>
171
+ </tr>
172
+ <tr class="border-b border-gray-700">
173
+ <td class="py-3 px-4">Cardiology Center</td>
174
+ <td class="py-3 px-4">Q-654321</td>
175
+ <td class="py-3 px-4">Sarah Johnson</td>
176
+ <td class="py-3 px-4">Dr. Lee (B)</td>
177
+ <td class="py-3 px-4"><span class="bg-yellow-900 text-yellow-300 px-2 py-1 rounded text-xs">Waiting</span></td>
178
+ <td class="py-3 px-4">45:00</td>
179
+ </tr>
180
+ </tbody>
181
+ </table>
182
+ </div>
183
+ </div>
184
+
185
+ <!-- KPI Analytics -->
186
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
187
+ <div class="bg-gray-800 rounded-xl p-6">
188
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
189
+ <i data-feather="bar-chart-2" class="w-5 h-5 mr-2"></i>
190
+ KPI Performance
191
+ </h2>
192
+ <canvas id="kpiChart" height="300"></canvas>
193
+ </div>
194
+ <div class="bg-gray-800 rounded-xl p-6">
195
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
196
+ <i data-feather="map" class="w-5 h-5 mr-2"></i>
197
+ Activity Heatmap
198
+ </h2>
199
+ <div id="heatmapContainer" class="heatmap-container"></div>
200
+ </div>
201
+ </div>
202
+
203
+ <!-- Event Control -->
204
+ <div class="bg-gray-800 rounded-xl p-6">
205
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
206
+ <i data-feather="alert-triangle" class="w-5 h-5 mr-2"></i>
207
+ Event Control Center
208
+ </h2>
209
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
210
+ <div class="bg-gray-700 rounded-lg p-4">
211
+ <h3 class="font-medium mb-2">Overdue Cases</h3>
212
+ <div class="text-2xl font-bold text-red-400 mb-2">12</div>
213
+ <button class="w-full bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded text-sm">
214
+ Escalate All
215
+ </button>
216
+ </div>
217
+ <div class="bg-gray-700 rounded-lg p-4">
218
+ <h3 class="font-medium mb-2">No-Shows</h3>
219
+ <div class="text-2xl font-bold text-yellow-400 mb-2">5</div>
220
+ <button class="w-full bg-yellow-600 hover:bg-yellow-700 text-white py-2 px-4 rounded text-sm">
221
+ Send Reminders
222
+ </button>
223
+ </div>
224
+ <div class="bg-gray-700 rounded-lg p-4">
225
+ <h3 class="font-medium mb-2">Efficiency Alerts</h3>
226
+ <div class="text-2xl font-bold text-blue-400 mb-2">8</div>
227
+ <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded text-sm">
228
+ Review All
229
+ </button>
230
+ </div>
231
+ </div>
232
+ </div>
233
+
234
+ <!-- API Documentation -->
235
+ <div class="mt-8 bg-gray-800 rounded-xl p-6">
236
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
237
+ <i data-feather="code" class="w-5 h-5 mr-2"></i>
238
+ Admin API Endpoints
239
+ </h2>
240
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
241
+ <div class="bg-gray-700 rounded-lg p-4">
242
+ <div class="flex items-center mb-2">
243
+ <span class="bg-blue-500 text-white text-xs px-2 py-1 rounded mr-2">POST</span>
244
+ <code class="text-sm">/admin/reassign-doctor</code>
245
+ </div>
246
+ <p class="text-sm text-gray-300">Reassign doctor to different group</p>
247
+ <pre class="mt-2 p-2 bg-gray-900 rounded text-xs overflow-x-auto">
248
+ {
249
+ "doctorId": "doc123",
250
+ "newGroup": "A"
251
+ }</pre>
252
+ </div>
253
+ <div class="bg-gray-700 rounded-lg p-4">
254
+ <div class="flex items-center mb-2">
255
+ <span class="bg-green-500 text-white text-xs px-2 py-1 rounded mr-2">GET</span>
256
+ <code class="text-sm">/admin/system-stats</code>
257
+ </div>
258
+ <p class="text-sm text-gray-300">Retrieve system-wide statistics</p>
259
+ </div>
260
+ </div>
261
+ </div>
262
+ </div>
263
+
264
+ <script>
265
+ feather.replace();
266
+
267
+ // Initialize charts
268
+ document.addEventListener('DOMContentLoaded', function() {
269
+ // Clinics Overview Chart
270
+ const clinicsCtx = document.getElementById('clinicsChart').getContext('2d');
271
+ const clinicsChart = new Chart(clinicsCtx, {
272
+ type: 'bar',
273
+ data: {
274
+ labels: ['Radiology', 'Cardiology', 'Neurology', 'Oncology', 'Pediatrics'],
275
+ datasets: [{
276
+ label: 'Active Patients',
277
+ data: [45, 32, 28, 19, 23],
278
+ backgroundColor: 'rgba(59, 130, 246, 0.7)',
279
+ borderColor: 'rgba(59, 130, 246, 1)',
280
+ borderWidth: 1
281
+ }]
282
+ },
283
+ options: {
284
+ responsive: true,
285
+ plugins: {
286
+ legend: {
287
+ display: false
288
+ }
289
+ },
290
+ scales: {
291
+ y: {
292
+ beginAtZero: true,
293
+ grid: {
294
+ color: 'rgba(255, 255, 255, 0.1)'
295
+ },
296
+ ticks: {
297
+ color: 'rgba(255, 255, 255, 0.7)'
298
+ }
299
+ },
300
+ x: {
301
+ grid: {
302
+ display: false
303
+ },
304
+ ticks: {
305
+ color: 'rgba(255, 255, 255, 0.7)'
306
+ }
307
+ }
308
+ }
309
+ }
310
+ });
311
+
312
+ // KPI Performance Chart
313
+ const kpiCtx = document.getElementById('kpiChart').getContext('2d');
314
+ const kpiChart = new Chart(kpiCtx, {
315
+ type: 'radar',
316
+ data: {
317
+ labels: ['SLA Compliance', 'Patient Satisfaction', 'Report Accuracy', 'Efficiency', 'Resource Usage'],
318
+ datasets: [{
319
+ label: 'Current Month',
320
+ data: [92, 88, 95, 85, 78],
321
+ backgroundColor: 'rgba(99, 102, 241, 0.2)',
322
+ borderColor: 'rgba(99, 102, 241, 1)',
323
+ borderWidth: 2,
324
+ pointBackgroundColor: 'rgba(99, 102, 241, 1)'
325
+ }, {
326
+ label: 'Last Month',
327
+ data: [88, 85, 92, 80, 75],
328
+ backgroundColor: 'rgba(236, 72, 153, 0.2)',
329
+ borderColor: 'rgba(236, 72, 153, 1)',
330
+ borderWidth: 2,
331
+ pointBackgroundColor: 'rgba(236, 72, 153, 1)'
332
+ }]
333
+ },
334
+ options: {
335
+ responsive: true,
336
+ scales: {
337
+ r: {
338
+ angleLines: {
339
+ color: 'rgba(255, 255, 255, 0.1)'
340
+ },
341
+ grid: {
342
+ color: 'rgba(255, 255, 255, 0.1)'
343
+ },
344
+ pointLabels: {
345
+ color: 'rgba(255, 255, 255, 0.7)'
346
+ },
347
+ ticks: {
348
+ backdropColor: 'rgba(0, 0, 0, 0)',
349
+ color: 'rgba(255, 255, 255, 0.5)'
350
+ }
351
+ }
352
+ },
353
+ plugins: {
354
+ legend: {
355
+ labels: {
356
+ color: 'rgba(255, 255, 255, 0.7)'
357
+ }
358
+ }
359
+ }
360
+ }
361
+ });
362
+
363
+ // Initialize heatmap
364
+ const heatmapInstance = h337.create({
365
+ container: document.getElementById('heatmapContainer'),
366
+ radius: 35
367
+ });
368
+
369
+ // Generate some random heatmap data
370
+ const points = [];
371
+ const max = 100;
372
+ const width = document.getElementById('heatmapContainer').offsetWidth;
373
+ const height = 300;
374
+
375
+ for (let i = 0; i < 50; i++) {
376
+ points.push({
377
+ x: Math.floor(Math.random() * width),
378
+ y: Math.floor(Math.random() * height),
379
+ value: Math.floor(Math.random() * max)
380
+ });
381
+ }
382
+
383
+ const data = {
384
+ max: max,
385
+ data: points
386
+ };
387
+
388
+ heatmapInstance.setData(data);
389
+ });
390
+
391
+ // Simulate doctor group reassignment
392
+ document.querySelector('.bg-blue-600').addEventListener('click', function() {
393
+ alert('Doctor group reassignment modal would open here');
394
+ });
395
+
396
+ // Simulate event control actions
397
+ document.querySelectorAll('.bg-gray-700 button').forEach(button => {
398
+ button.addEventListener('click', function() {
399
+ const action = this.textContent.trim();
400
+ alert(`Processing ${action} action...`);
401
+ });
402
+ });
403
+ </script>
404
+ </body>
405
+ </html>