Hugging Face's logo

Spaces:
Ceasear
/
laboratory
Running

App Files Community
Ceasear commited on
Commit
f625fec
·
verified ·
1 Parent(s): 1edb534

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1556 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Laboratory
3
- emoji: 🏢
4
- colorFrom: indigo
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: laboratory
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1556 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>MediAnalytics Pro - Advanced Medical Analysis</title>
7
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
8
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <style>
11
+ :root {
12
+ --primary-color: #1a73e8;
13
+ --primary-light: #e8f0fe;
14
+ --secondary-color: #f8f9fa;
15
+ --accent-color: #ff6d00;
16
+ --text-dark: #202124;
17
+ --text-medium: #5f6368;
18
+ --text-light: #9aa0a6;
19
+ --success-color: #34a853;
20
+ --warning-color: #f9ab00;
21
+ --danger-color: #d93025;
22
+ --border-radius: 12px;
23
+ --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
24
+ --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
25
+ }
26
+
27
+ * {
28
+ margin: 0;
29
+ padding: 0;
30
+ box-sizing: border-box;
31
+ font-family: 'Roboto', sans-serif;
32
+ }
33
+
34
+ body {
35
+ background-color: #f8f9fa;
36
+ color: var(--text-dark);
37
+ }
38
+
39
+ .app-container {
40
+ display: grid;
41
+ grid-template-columns: 280px 1fr;
42
+ min-height: 100vh;
43
+ }
44
+
45
+ /* Sidebar Styles */
46
+ .sidebar {
47
+ background-color: #ffffff;
48
+ border-right: 1px solid #dadce0;
49
+ position: sticky;
50
+ top: 0;
51
+ height: 100vh;
52
+ z-index: 10;
53
+ }
54
+
55
+ .logo-container {
56
+ padding: 24px;
57
+ display: flex;
58
+ align-items: center;
59
+ border-bottom: 1px solid #f1f3f4;
60
+ }
61
+
62
+ .logo-icon {
63
+ font-size: 36px;
64
+ margin-right: 12px;
65
+ color: var(--primary-color);
66
+ background-color: var(--primary-light);
67
+ width: 48px;
68
+ height: 48px;
69
+ border-radius: 50%;
70
+ display: flex;
71
+ align-items: center;
72
+ justify-content: center;
73
+ }
74
+
75
+ .logo-text {
76
+ font-size: 20px;
77
+ font-weight: 700;
78
+ color: var(--text-dark);
79
+ }
80
+
81
+ .logo-text span {
82
+ color: var(--primary-color);
83
+ }
84
+
85
+ .sidebar-menu {
86
+ padding: 24px 0;
87
+ }
88
+
89
+ .menu-item {
90
+ display: flex;
91
+ align-items: center;
92
+ padding: 12px 24px;
93
+ margin: 4px 0;
94
+ cursor: pointer;
95
+ transition: var(--transition);
96
+ color: var(--text-medium);
97
+ position: relative;
98
+ }
99
+
100
+ .menu-item:hover {
101
+ background-color: var(--primary-light);
102
+ color: var(--primary-color);
103
+ }
104
+
105
+ .menu-item.active {
106
+ background-color: var(--primary-light);
107
+ color: var(--primary-color);
108
+ font-weight: 500;
109
+ }
110
+
111
+ .menu-item.active:before {
112
+ content: '';
113
+ position: absolute;
114
+ left: 0;
115
+ top: 0;
116
+ height: 100%;
117
+ width: 4px;
118
+ background-color: var(--primary-color);
119
+ }
120
+
121
+ .menu-item i {
122
+ margin-right: 16px;
123
+ font-size: 22px;
124
+ }
125
+
126
+ .menu-item .badge {
127
+ margin-left: auto;
128
+ background-color: var(--danger-color);
129
+ color: white;
130
+ font-size: 11px;
131
+ padding: 2px 6px;
132
+ border-radius: 10px;
133
+ }
134
+
135
+ /* Main Content Styles */
136
+ .main-content {
137
+ padding: 24px 32px;
138
+ overflow-y: auto;
139
+ }
140
+
141
+ .header {
142
+ display: flex;
143
+ justify-content: space-between;
144
+ align-items: center;
145
+ margin-bottom: 24px;
146
+ position: sticky;
147
+ top: 0;
148
+ background-color: #f8f9fa;
149
+ padding: 16px 0;
150
+ z-index: 5;
151
+ }
152
+
153
+ .page-title {
154
+ font-size: 28px;
155
+ font-weight: 500;
156
+ color: var(--text-dark);
157
+ }
158
+
159
+ .page-subtitle {
160
+ font-size: 14px;
161
+ color: var(--text-light);
162
+ margin-top: 4px;
163
+ font-weight: 400;
164
+ }
165
+
166
+ .user-controls {
167
+ display: flex;
168
+ align-items: center;
169
+ gap: 16px;
170
+ }
171
+
172
+ .search-bar {
173
+ position: relative;
174
+ }
175
+
176
+ .search-bar input {
177
+ padding: 12px 20px 12px 48px;
178
+ border-radius: 24px;
179
+ border: 1px solid #dadce0;
180
+ width: 280px;
181
+ transition: var(--transition);
182
+ font-size: 14px;
183
+ background-color: white;
184
+ }
185
+
186
+ .search-bar input:focus {
187
+ outline: none;
188
+ border-color: var(--primary-color);
189
+ box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
190
+ }
191
+
192
+ .search-bar i {
193
+ position: absolute;
194
+ left: 16px;
195
+ top: 50%;
196
+ transform: translateY(-50%);
197
+ color: var(--text-light);
198
+ }
199
+
200
+ .notifications {
201
+ position: relative;
202
+ cursor: pointer;
203
+ }
204
+
205
+ .notifications i {
206
+ font-size: 24px;
207
+ color: var(--text-medium);
208
+ }
209
+
210
+ .notification-badge {
211
+ position: absolute;
212
+ top: -5px;
213
+ right: -5px;
214
+ background-color: var(--danger-color);
215
+ color: white;
216
+ font-size: 10px;
217
+ width: 18px;
218
+ height: 18px;
219
+ border-radius: 50%;
220
+ display: flex;
221
+ align-items: center;
222
+ justify-content: center;
223
+ font-weight: bold;
224
+ }
225
+
226
+ .user-profile {
227
+ display: flex;
228
+ align-items: center;
229
+ cursor: pointer;
230
+ padding: 8px;
231
+ border-radius: 24px;
232
+ transition: var(--transition);
233
+ }
234
+
235
+ .user-profile:hover {
236
+ background-color: #f1f3f4;
237
+ }
238
+
239
+ .user-avatar {
240
+ width: 40px;
241
+ height: 40px;
242
+ border-radius: 50%;
243
+ background-color: var(--primary-color);
244
+ color: white;
245
+ display: flex;
246
+ align-items: center;
247
+ justify-content: center;
248
+ margin-right: 12px;
249
+ font-weight: 500;
250
+ font-size: 18px;
251
+ }
252
+
253
+ .user-name {
254
+ font-weight: 500;
255
+ }
256
+
257
+ .user-role {
258
+ font-size: 12px;
259
+ color: var(--text-light);
260
+ margin-top: 2px;
261
+ }
262
+
263
+ /* Dashboard Cards */
264
+ .dashboard-grid {
265
+ display: grid;
266
+ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
267
+ gap: 20px;
268
+ margin-bottom: 24px;
269
+ }
270
+
271
+ .card {
272
+ background-color: white;
273
+ border-radius: var(--border-radius);
274
+ box-shadow: var(--box-shadow);
275
+ padding: 20px;
276
+ transition: var(--transition);
277
+ border: 1px solid #f1f3f4;
278
+ }
279
+
280
+ .card:hover {
281
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
282
+ transform: translateY(-2px);
283
+ }
284
+
285
+ .card-header {
286
+ display: flex;
287
+ justify-content: space-between;
288
+ align-items: flex-start;
289
+ margin-bottom: 16px;
290
+ }
291
+
292
+ .card-title {
293
+ font-size: 16px;
294
+ font-weight: 500;
295
+ color: var(--text-medium);
296
+ }
297
+
298
+ .card-value {
299
+ font-size: 32px;
300
+ font-weight: 700;
301
+ margin-bottom: 8px;
302
+ color: var(--text-dark);
303
+ }
304
+
305
+ .card-change {
306
+ font-size: 14px;
307
+ display: flex;
308
+ align-items: center;
309
+ gap: 4px;
310
+ }
311
+
312
+ .card-change.positive {
313
+ color: var(--success-color);
314
+ }
315
+
316
+ .card-change.negative {
317
+ color: var(--danger-color);
318
+ }
319
+
320
+ .card-icon {
321
+ width: 56px;
322
+ height: 56px;
323
+ border-radius: 16px;
324
+ display: flex;
325
+ align-items: center;
326
+ justify-content: center;
327
+ color: white;
328
+ font-size: 28px;
329
+ }
330
+
331
+ .card-icon.patients {
332
+ background-color: #4285f4;
333
+ background-image: linear-gradient(to bottom right, #4285f4, #34a853);
334
+ }
335
+
336
+ .card-icon.labs {
337
+ background-color: #ea4335;
338
+ background-image: linear-gradient(to bottom right, #ea4335, #fbbc05);
339
+ }
340
+
341
+ .card-icon.prescriptions {
342
+ background-color: #9c27b0;
343
+ background-image: linear-gradient(to bottom right, #9c27b0, #673ab7);
344
+ }
345
+
346
+ .card-icon.revenue {
347
+ background-color: #34a853;
348
+ background-image: linear-gradient(to bottom right, #34a853, #fbbc05);
349
+ }
350
+
351
+ /* Main Data Section */
352
+ .data-section {
353
+ display: grid;
354
+ grid-template-columns: 2fr 1fr;
355
+ gap: 20px;
356
+ margin-bottom: 24px;
357
+ }
358
+
359
+ @media (max-width: 1200px) {
360
+ .data-section {
361
+ grid-template-columns: 1fr;
362
+ }
363
+ }
364
+
365
+ .card-lg {
366
+ grid-column: span 1;
367
+ height: 100%;
368
+ }
369
+
370
+ .card-header-lg {
371
+ display: flex;
372
+ justify-content: space-between;
373
+ align-items: center;
374
+ margin-bottom: 16px;
375
+ }
376
+
377
+ .card-header-lg h2 {
378
+ font-size: 20px;
379
+ font-weight: 500;
380
+ color: var(--text-dark);
381
+ }
382
+
383
+ .card-actions {
384
+ display: flex;
385
+ gap: 8px;
386
+ }
387
+
388
+ .card-action-btn {
389
+ background: none;
390
+ border: none;
391
+ cursor: pointer;
392
+ color: var(--text-medium);
393
+ padding: 6px 12px;
394
+ border-radius: 6px;
395
+ transition: var(--transition);
396
+ display: flex;
397
+ align-items: center;
398
+ gap: 4px;
399
+ font-size: 14px;
400
+ }
401
+
402
+ .card-action-btn:hover {
403
+ background-color: #f1f3f4;
404
+ color: var(--primary-color);
405
+ }
406
+
407
+ .table-container {
408
+ overflow-x: auto;
409
+ max-height: 500px;
410
+ border-radius: var(--border-radius);
411
+ border: 1px solid #f1f3f4;
412
+ }
413
+
414
+ table {
415
+ width: 100%;
416
+ border-collapse: collapse;
417
+ min-width: 800px;
418
+ }
419
+
420
+ thead {
421
+ background-color: #f8f9fa;
422
+ position: sticky;
423
+ top: 0;
424
+ }
425
+
426
+ th {
427
+ padding: 14px 16px;
428
+ text-align: left;
429
+ font-weight: 500;
430
+ color: var(--text-medium);
431
+ border-bottom: 2px solid #f1f3f4;
432
+ white-space: nowrap;
433
+ }
434
+
435
+ td {
436
+ padding: 12px 16px;
437
+ border-bottom: 1px solid #f1f3f4;
438
+ color: var(--text-dark);
439
+ }
440
+
441
+ tr:hover {
442
+ background-color: #f8f9fa;
443
+ }
444
+
445
+ .status {
446
+ display: inline-block;
447
+ padding: 6px 10px;
448
+ border-radius: 12px;
449
+ font-size: 12px;
450
+ font-weight: 500;
451
+ min-width: 80px;
452
+ text-align: center;
453
+ }
454
+
455
+ .status.active {
456
+ background-color: rgba(52, 168, 83, 0.1);
457
+ color: var(--success-color);
458
+ }
459
+
460
+ .status.inactive {
461
+ background-color: rgba(217, 48, 37, 0.1);
462
+ color: var(--danger-color);
463
+ }
464
+
465
+ .status.pending {
466
+ background-color: rgba(249, 171, 0, 0.1);
467
+ color: var(--warning-color);
468
+ }
469
+
470
+ .test-result {
471
+ font-weight: 600;
472
+ }
473
+
474
+ .test-result.high {
475
+ color: var(--danger-color);
476
+ }
477
+
478
+ .test-result.normal {
479
+ color: var(--success-color);
480
+ }
481
+
482
+ .test-result.low {
483
+ color: var(--warning-color);
484
+ }
485
+
486
+ /* Patient Details */
487
+ .patient-details {
488
+ display: flex;
489
+ gap: 20px;
490
+ margin-bottom: 20px;
491
+ background-color: white;
492
+ padding: 20px;
493
+ border-radius: var(--border-radius);
494
+ box-shadow: var(--box-shadow);
495
+ border: 1px solid #f1f3f4;
496
+ }
497
+
498
+ .patient-avatar {
499
+ width: 80px;
500
+ height: 80px;
501
+ border-radius: 50%;
502
+ background-color: #f1f3f4;
503
+ display: flex;
504
+ align-items: center;
505
+ justify-content: center;
506
+ font-size: 32px;
507
+ color: var(--primary-color);
508
+ flex-shrink: 0;
509
+ overflow: hidden;
510
+ }
511
+
512
+ .patient-avatar img {
513
+ width: 100%;
514
+ height: 100%;
515
+ object-fit: cover;
516
+ }
517
+
518
+ .patient-info h3 {
519
+ font-size: 18px;
520
+ margin-bottom: 4px;
521
+ color: var(--text-dark);
522
+ }
523
+
524
+ .patient-meta {
525
+ color: var(--text-light);
526
+ font-size: 14px;
527
+ margin-bottom: 12px;
528
+ display: flex;
529
+ gap: 12px;
530
+ }
531
+
532
+ .patient-meta span {
533
+ display: flex;
534
+ align-items: center;
535
+ gap: 4px;
536
+ }
537
+
538
+ .patient-stats {
539
+ display: flex;
540
+ gap: 12px;
541
+ }
542
+
543
+ .patient-stat {
544
+ padding: 12px;
545
+ background-color: white;
546
+ border-radius: var(--border-radius);
547
+ box-shadow: var(--box-shadow);
548
+ min-width: 120px;
549
+ border: 1px solid #f1f3f4;
550
+ }
551
+
552
+ .patient-stat-value {
553
+ font-size: 24px;
554
+ font-weight: 700;
555
+ margin-bottom: 4px;
556
+ color: var(--text-dark);
557
+ }
558
+
559
+ .patient-stat-label {
560
+ font-size: 12px;
561
+ color: var(--text-light);
562
+ }
563
+
564
+ /* Lab Results */
565
+ .lab-results {
566
+ background-color: white;
567
+ padding: 20px;
568
+ border-radius: var(--border-radius);
569
+ box-shadow: var(--box-shadow);
570
+ border: 1px solid #f1f3f4;
571
+ margin-top: 20px;
572
+ }
573
+
574
+ .lab-results h4 {
575
+ margin-bottom: 16px;
576
+ font-weight: 500;
577
+ color: var(--text-dark);
578
+ font-size: 18px;
579
+ }
580
+
581
+ .lab-item {
582
+ display: flex;
583
+ justify-content: space-between;
584
+ padding: 12px 0;
585
+ border-bottom: 1px solid #f1f3f4;
586
+ align-items: center;
587
+ }
588
+
589
+ .lab-item:last-child {
590
+ border-bottom: none;
591
+ }
592
+
593
+ .lab-name {
594
+ font-weight: 500;
595
+ color: var(--text-dark);
596
+ }
597
+
598
+ .lab-range {
599
+ font-size: 12px;
600
+ color: var(--text-light);
601
+ margin-top: 4px;
602
+ }
603
+
604
+ .lab-value {
605
+ font-weight: 700;
606
+ text-align: right;
607
+ }
608
+
609
+ .lab-value.high {
610
+ color: var(--danger-color);
611
+ }
612
+
613
+ .lab-value.normal {
614
+ color: var(--success-color);
615
+ }
616
+
617
+ .lab-value.low {
618
+ color: var(--warning-color);
619
+ }
620
+
621
+ /* Charts Section */
622
+ .chart-card {
623
+ background-color: white;
624
+ border-radius: var(--border-radius);
625
+ box-shadow: var(--box-shadow);
626
+ padding: 20px;
627
+ margin-bottom: 24px;
628
+ border: 1px solid #f1f3f4;
629
+ }
630
+
631
+ .chart-header {
632
+ display: flex;
633
+ justify-content: space-between;
634
+ align-items: center;
635
+ margin-bottom: 20px;
636
+ }
637
+
638
+ .chart-header h2 {
639
+ font-size: 20px;
640
+ font-weight: 500;
641
+ color: var(--text-dark);
642
+ }
643
+
644
+ .chart-tabs {
645
+ display: flex;
646
+ background-color: #f1f3f4;
647
+ border-radius: 8px;
648
+ padding: 4px;
649
+ }
650
+
651
+ .chart-tab {
652
+ padding: 6px 16px;
653
+ cursor: pointer;
654
+ font-size: 14px;
655
+ border-radius: 6px;
656
+ transition: var(--transition);
657
+ }
658
+
659
+ .chart-tab.active {
660
+ background-color: white;
661
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
662
+ color: var(--primary-color);
663
+ font-weight: 500;
664
+ }
665
+
666
+ .chart-container {
667
+ height: 300px;
668
+ position: relative;
669
+ }
670
+
671
+ /* Critical Alerts */
672
+ .alerts-container {
673
+ margin-bottom: 24px;
674
+ }
675
+
676
+ .alert-item {
677
+ display: flex;
678
+ align-items: center;
679
+ padding: 16px;
680
+ background-color: white;
681
+ border-radius: var(--border-radius);
682
+ box-shadow: var(--box-shadow);
683
+ margin-bottom: 12px;
684
+ border: 1px solid #f1f3f4;
685
+ border-left: 4px solid var(--danger-color);
686
+ }
687
+
688
+ .alert-icon {
689
+ width: 40px;
690
+ height: 40px;
691
+ border-radius: 50%;
692
+ background-color: rgba(217, 48, 37, 0.1);
693
+ color: var(--danger-color);
694
+ display: flex;
695
+ align-items: center;
696
+ justify-content: center;
697
+ margin-right: 16px;
698
+ flex-shrink: 0;
699
+ }
700
+
701
+ .alert-content {
702
+ flex: 1;
703
+ }
704
+
705
+ .alert-title {
706
+ font-weight: 500;
707
+ color: var(--text-dark);
708
+ margin-bottom: 4px;
709
+ }
710
+
711
+ .alert-message {
712
+ color: var(--text-medium);
713
+ font-size: 14px;
714
+ }
715
+
716
+ .alert-time {
717
+ color: var(--text-light);
718
+ font-size: 12px;
719
+ margin-top: 4px;
720
+ }
721
+
722
+ /* Calendar Events */
723
+ .events-container {
724
+ background-color: white;
725
+ border-radius: var(--border-radius);
726
+ box-shadow: var(--box-shadow);
727
+ padding: 20px;
728
+ border: 1px solid #f1f3f4;
729
+ }
730
+
731
+ .event-item {
732
+ display: flex;
733
+ padding: 12px 0;
734
+ border-bottom: 1px solid #f1f3f4;
735
+ }
736
+
737
+ .event-item:last-child {
738
+ border-bottom: none;
739
+ }
740
+
741
+ .event-time {
742
+ font-weight: 500;
743
+ color: var(--primary-color);
744
+ min-width: 80px;
745
+ padding-right: 16px;
746
+ }
747
+
748
+ .event-details h4 {
749
+ font-size: 16px;
750
+ font-weight: 500;
751
+ color: var(--text-dark);
752
+ margin-bottom: 4px;
753
+ }
754
+
755
+ .event-details p {
756
+ color: var(--text-medium);
757
+ font-size: 14px;
758
+ }
759
+
760
+ /* Recent Activity */
761
+ .activity-container {
762
+ background-color: white;
763
+ border-radius: var(--border-radius);
764
+ box-shadow: var(--box-shadow);
765
+ padding: 20px;
766
+ border: 1px solid #f1f3f4;
767
+ margin-bottom: 24px;
768
+ }
769
+
770
+ .activity-item {
771
+ display: flex;
772
+ padding: 12px 0;
773
+ border-bottom: 1px solid #f1f3f4;
774
+ align-items: flex-start;
775
+ }
776
+
777
+ .activity-item:last-child {
778
+ border-bottom: none;
779
+ }
780
+
781
+ .activity-avatar {
782
+ width: 32px;
783
+ height: 32px;
784
+ border-radius: 50%;
785
+ background-color: #f1f3f4;
786
+ display: flex;
787
+ align-items: center;
788
+ justify-content: center;
789
+ color: var(--primary-color);
790
+ margin-right: 12px;
791
+ flex-shrink: 0;
792
+ font-size: 14px;
793
+ }
794
+
795
+ .activity-content {
796
+ flex: 1;
797
+ }
798
+
799
+ .activity-title {
800
+ font-weight: 500;
801
+ color: var(--text-dark);
802
+ margin-bottom: 4px;
803
+ }
804
+
805
+ .activity-message {
806
+ color: var(--text-medium);
807
+ font-size: 14px;
808
+ display: flex;
809
+ flex-wrap: wrap;
810
+ }
811
+
812
+ .activity-time {
813
+ color: var(--text-light);
814
+ font-size: 12px;
815
+ margin-top: 4px;
816
+ }
817
+
818
+ /* Quick Actions */
819
+ .quick-actions {
820
+ display: grid;
821
+ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
822
+ gap: 16px;
823
+ margin-bottom: 24px;
824
+ }
825
+
826
+ .action-btn {
827
+ display: flex;
828
+ flex-direction: column;
829
+ align-items: center;
830
+ justify-content: center;
831
+ padding: 20px;
832
+ background-color: white;
833
+ border-radius: var(--border-radius);
834
+ box-shadow: var(--box-shadow);
835
+ border: 1px solid #f1f3f4;
836
+ cursor: pointer;
837
+ transition: var(--transition);
838
+ text-align: center;
839
+ }
840
+
841
+ .action-btn:hover {
842
+ background-color: #f8f9fa;
843
+ transform: translateY(-2px);
844
+ }
845
+
846
+ .action-icon {
847
+ width: 48px;
848
+ height: 48px;
849
+ border-radius: 50%;
850
+ background-color: var(--primary-light);
851
+ color: var(--primary-color);
852
+ display: flex;
853
+ align-items: center;
854
+ justify-content: center;
855
+ margin-bottom: 12px;
856
+ font-size: 24px;
857
+ }
858
+
859
+ .action-label {
860
+ font-weight: 500;
861
+ color: var(--text-dark);
862
+ }
863
+
864
+ /* Responsive Adjustments */
865
+ @media (max-width: 1024px) {
866
+ .app-container {
867
+ grid-template-columns: 1fr;
868
+ }
869
+
870
+ .sidebar {
871
+ height: auto;
872
+ position: static;
873
+ }
874
+
875
+ .main-content {
876
+ padding: 24px;
877
+ }
878
+
879
+ .header {
880
+ position: static;
881
+ }
882
+ }
883
+
884
+ @media (max-width: 768px) {
885
+ .dashboard-grid {
886
+ grid-template-columns: 1fr 1fr;
887
+ }
888
+
889
+ .header {
890
+ flex-direction: column;
891
+ align-items: flex-start;
892
+ gap: 16px;
893
+ }
894
+
895
+ .user-controls {
896
+ width: 100%;
897
+ justify-content: space-between;
898
+ }
899
+
900
+ .search-bar {
901
+ width: 100%;
902
+ }
903
+
904
+ .search-bar input {
905
+ width: 100%;
906
+ }
907
+
908
+ .quick-actions {
909
+ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
910
+ }
911
+ }
912
+
913
+ @media (max-width: 480px) {
914
+ .dashboard-grid {
915
+ grid-template-columns: 1fr;
916
+ }
917
+
918
+ .patient-stats {
919
+ flex-wrap: wrap;
920
+ }
921
+
922
+ .patient-stat {
923
+ min-width: calc(50% - 6px);
924
+ }
925
+ }
926
+ </style>
927
+ </head>
928
+ <body>
929
+ <div class="app-container">
930
+ <!-- Sidebar Navigation -->
931
+ <div class="sidebar">
932
+ <div class="logo-container">
933
+ <div class="logo-icon">
934
+ <i class="material-icons">monitor_heart</i>
935
+ </div>
936
+ <div class="logo-text">Medi<span>Analytics</span></div>
937
+ </div>
938
+ <div class="sidebar-menu">
939
+ <div class="menu-item active">
940
+ <i class="material-icons">dashboard</i>
941
+ <span>Dashboard</span>
942
+ </div>
943
+ <div class="menu-item">
944
+ <i class="material-icons">personal_injury</i>
945
+ <span>Patients</span>
946
+ </div>
947
+ <div class="menu-item">
948
+ <i class="material-icons">biotech</i>
949
+ <span>Lab Tests</span>
950
+ <span class="badge">3</span>
951
+ </div>
952
+ <div class="menu-item">
953
+ <i class="material-icons">medication</i>
954
+ <span>Prescriptions</span>
955
+ </div>
956
+ <div class="menu-item">
957
+ <i class="material-icons">bar_chart</i>
958
+ <span>Statistics</span>
959
+ </div>
960
+ <div class="menu-item">
961
+ <i class="material-icons">assignment</i>
962
+ <span>Reports</span>
963
+ </div>
964
+ <div class="menu-item">
965
+ <i class="material-icons">notifications</i>
966
+ <span>Alerts</span>
967
+ <span class="badge">2</span>
968
+ </div>
969
+ <div class="menu-item">
970
+ <i class="material-icons">calendar_today</i>
971
+ <span>Schedule</span>
972
+ </div>
973
+ <div class="menu-item">
974
+ <i class="material-icons">settings</i>
975
+ <span>Settings</span>
976
+ </div>
977
+ </div>
978
+ </div>
979
+
980
+ <!-- Main Content Area -->
981
+ <div class="main-content">
982
+ <div class="header">
983
+ <div>
984
+ <h1 class="page-title">Medical Analytics Dashboard</h1>
985
+ <p class="page-subtitle">Monitor patient data, lab results, and medical statistics in real-time</p>
986
+ </div>
987
+ <div class="user-controls">
988
+ <div class="search-bar">
989
+ <i class="material-icons">search</i>
990
+ <input type="text" placeholder="Search patients, tests, results...">
991
+ </div>
992
+ <div class="notifications">
993
+ <i class="material-icons">notifications</i>
994
+ <span class="notification-badge">5</span>
995
+ </div>
996
+ <div class="user-profile">
997
+ <div class="user-avatar">
998
+ <i class="material-icons">person</i>
999
+ </div>
1000
+ <div>
1001
+ <div class="user-name">Dr. Sarah Johnson</div>
1002
+ <div class="user-role">Cardiologist</div>
1003
+ </div>
1004
+ <i class="material-icons" style="margin-left: 8px;">expand_more</i>
1005
+ </div>
1006
+ </div>
1007
+ </div>
1008
+
1009
+ <!-- Critical Alerts -->
1010
+ <div class="alerts-container">
1011
+ <div class="alert-item">
1012
+ <div class="alert-icon">
1013
+ <i class="material-icons">warning</i>
1014
+ </div>
1015
+ <div class="alert-content">
1016
+ <div class="alert-title">Critical Lab Result - John Wilson</div>
1017
+ <div class="alert-message">Hemoglobin level significantly high (17.2 g/dL). Normal range is 13.8-17.2 g/dL.</div>
1018
+ <div class="alert-time">Today, 09:42 AM</div>
1019
+ </div>
1020
+ </div>
1021
+ </div>
1022
+
1023
+ <!-- Overview Cards -->
1024
+ <div class="dashboard-grid">
1025
+ <div class="card">
1026
+ <div class="card-header">
1027
+ <div>
1028
+ <div class="card-title">Active Patients</div>
1029
+ <div class="card-value">1,248</div>
1030
+ <div class="card-change positive">
1031
+ <i class="material-icons">trending_up</i> 8.2% increase
1032
+ </div>
1033
+ </div>
1034
+ <div class="card-icon patients">
1035
+ <i class="material-icons">personal_injury</i>
1036
+ </div>
1037
+ </div>
1038
+ </div>
1039
+ <div class="card">
1040
+ <div class="card-header">
1041
+ <div>
1042
+ <div class="card-title">Completed Tests</div>
1043
+ <div class="card-value">378</div>
1044
+ <div class="card-change positive">
1045
+ <i class="material-icons">trending_up</i> 5.3% increase
1046
+ </div>
1047
+ </div>
1048
+ <div class="card-icon labs">
1049
+ <i class="material-icons">science</i>
1050
+ </div>
1051
+ </div>
1052
+ </div>
1053
+ <div class="card">
1054
+ <div class="card-header">
1055
+ <div>
1056
+ <div class="card-title">Prescriptions Issued</div>
1057
+ <div class="card-value">216</div>
1058
+ <div class="card-change negative">
1059
+ <i class="material-icons">trending_down</i> 2.1% decrease
1060
+ </div>
1061
+ </div>
1062
+ <div class="card-icon prescriptions">
1063
+ <i class="material-icons">medication</i>
1064
+ </div>
1065
+ </div>
1066
+ </div>
1067
+ <div class="card">
1068
+ <div class="card-header">
1069
+ <div>
1070
+ <div class="card-title">Total Revenue</div>
1071
+ <div class="card-value">$86,742</div>
1072
+ <div class="card-change positive">
1073
+ <i class="material-icons">trending_up</i> 14.7% increase
1074
+ </div>
1075
+ </div>
1076
+ <div class="card-icon revenue">
1077
+ <i class="material-icons">attach_money</i>
1078
+ </div>
1079
+ </div>
1080
+ </div>
1081
+ </div>
1082
+
1083
+ <!-- Quick Actions -->
1084
+ <div class="quick-actions">
1085
+ <div class="action-btn">
1086
+ <div class="action-icon">
1087
+ <i class="material-icons">add_box</i>
1088
+ </div>
1089
+ <div class="action-label">New Patient</div>
1090
+ </div>
1091
+ <div class="action-btn">
1092
+ <div class="action-icon">
1093
+ <i class="material-icons">assignment</i>
1094
+ </div>
1095
+ <div class="action-label">Order Test</div>
1096
+ </div>
1097
+ <div class="action-btn">
1098
+ <div class="action-icon">
1099
+ <i class="material-icons">receipt</i>
1100
+ </div>
1101
+ <div class="action-label">Generate Report</div>
1102
+ </div>
1103
+ <div class="action-btn">
1104
+ <div class="action-icon">
1105
+ <i class="material-icons">calendar_today</i>
1106
+ </div>
1107
+ <div class="action-label">Schedule</div>
1108
+ </div>
1109
+ </div>
1110
+
1111
+ <!-- Main Data Section -->
1112
+ <div class="data-section">
1113
+ <div class="card card-lg">
1114
+ <div class="card-header-lg">
1115
+ <h2>Recent Lab Tests</h2>
1116
+ <div class="card-actions">
1117
+ <button class="card-action-btn">
1118
+ <i class="material-icons">filter_list</i> Filter
1119
+ </button>
1120
+ <button class="card-action-btn">
1121
+ <i class="material-icons">download</i> Export
1122
+ </button>
1123
+ </div>
1124
+ </div>
1125
+ <div class="table-container">
1126
+ <table>
1127
+ <thead>
1128
+ <tr>
1129
+ <th>Patient ID</th>
1130
+ <th>Name</th>
1131
+ <th>Test Type</th>
1132
+ <th>Date</th>
1133
+ <th>Status</th>
1134
+ <th>Results</th>
1135
+ </tr>
1136
+ </thead>
1137
+ <tbody>
1138
+ <tr>
1139
+ <td>#P-10045</td>
1140
+ <td>
1141
+ <div style="display: flex; align-items: center; gap: 8px;">
1142
+ <div style="width: 32px; height: 32px; border-radius: 50%; background-color: #e0e0e0; display: flex; align-items: center; justify-content: center;">
1143
+ <i class="material-icons" style="font-size: 16px; color: #666;">person</i>
1144
+ </div>
1145
+ John Wilson
1146
+ </div>
1147
+ </td>
1148
+ <td>Complete Blood Count</td>
1149
+ <td>May 15, 2023</td>
1150
+ <td><span class="status active">Completed</span></td>
1151
+ <td><span class="test-result high">17.2 g/dL</span></td>
1152
+ </tr>
1153
+ <tr>
1154
+ <td>#P-10098</td>
1155
+ <td>
1156
+ <div style="display: flex; align-items: center; gap: 8px;">
1157
+ <div style="width: 32px; height: 32px; border-radius: 50%; background-color: #e0e0e0; display: flex; align-items: center; justify-content: center;">
1158
+ <i class="material-icons" style="font-size: 16px; color: #666;">person</i>
1159
+ </div>
1160
+ Sarah Johnson
1161
+ </div>
1162
+ </td>
1163
+ <td>Lipid Panel</td>
1164
+ <td>May 15, 2023</td>
1165
+ <td><span class="status active">Completed</span></td>
1166
+ <td><span class="test-result normal">185 mg/dL</span></td>
1167
+ </tr>
1168
+ <tr>
1169
+ <td>#P-10124</td>
1170
+ <td>
1171
+ <div style="display: flex; align-items: center; gap: 8px;">
1172
+ <div style="width: 32px; height: 32px; border-radius: 50%; background-color: #e0e0e0; display: flex; align-items: center; justify-content: center;">
1173
+ <i class="material-icons" style="font-size: 16px; color: #666;">person</i>
1174
+ </div>
1175
+ Michael Brown
1176
+ </div>
1177
+ </td>
1178
+ <td>Liver Function</td>
1179
+ <td>May 14, 2023</td>
1180
+ <td><span class="status active">Completed</span></td>
1181
+ <td><span class="test-result normal">42 U/L</span></td>
1182
+ </tr>
1183
+ <tr>
1184
+ <td>#P-10077</td>
1185
+ <td>
1186
+ <div style="display: flex; align-items: center; gap: 8px;">
1187
+ <div style="width: 32px; height: 32px; border-radius: 50%; background-color: #e0e0e0; display: flex; align-items: center; justify-content: center;">
1188
+ <i class="material-icons" style="font-size: 16px; color: #666;">person</i>
1189
+ </div>
1190
+ Emily Davis
1191
+ </div>
1192
+ </td>
1193
+ <td>Thyroid Panel</td>
1194
+ <td>May 14, 2023</td>
1195
+ <td><span class="status active">Completed</span></td>
1196
+ <td><span class="test-result low">0.7 µIU/mL</span></td>
1197
+ </tr>
1198
+ <tr>
1199
+ <td>#P-10132</td>
1200
+ <td>
1201
+ <div style="display: flex; align-items: center; gap: 8px;">
1202
+ <div style="width: 32px; height: 32px; border-radius: 50%; background-color: #e0e0e0; display: flex; align-items: center; justify-content: center;">
1203
+ <i class="material-icons" style="font-size: 16px; color: #666;">person</i>
1204
+ </div>
1205
+ Robert Miller
1206
+ </div>
1207
+ </td>
1208
+ <td>Electrolyte Panel</td>
1209
+ <td>May 13, 2023</td>
1210
+ <td><span class="status pending">Processing</span></td>
1211
+ <td><span class="test-result">Pending</span></td>
1212
+ </tr>
1213
+ </tbody>
1214
+ </table>
1215
+ </div>
1216
+ </div>
1217
+ <div class="card card-lg">
1218
+ <div class="card-header-lg">
1219
+ <h2>Critical Patient</h2>
1220
+ <div class="card-actions">
1221
+ <button class="card-action-btn">
1222
+ <i class="material-icons">more_vert</i>
1223
+ </button>
1224
+ </div>
1225
+ </div>
1226
+ <div class="patient-details">
1227
+ <div class="patient-avatar">
1228
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Patient">
1229
+ </div>
1230
+ <div class="patient-info">
1231
+ <h3>John Wilson</h3>
1232
+ <div class="patient-meta">
1233
+ <span><i class="material-icons" style="font-size: 16px;">male</i> Male</span>
1234
+ <span><i class="material-icons" style="font-size: 16px;">cake</i> 42 years</span>
1235
+ <span><i class="material-icons" style="font-size: 16px;">fingerprint</i> #P-10045</span>
1236
+ </div>
1237
+ <div class="patient-stats">
1238
+ <div class="patient-stat">
1239
+ <div class="patient-stat-value">17.2</div>
1240
+ <div class="patient-stat-label">Hemoglobin</div>
1241
+ </div>
1242
+ <div class="patient-stat">
1243
+ <div class="patient-stat-value">148</div>
1244
+ <div class="patient-stat-label">Glucose</div>
1245
+ </div>
1246
+ <div class="patient-stat">
1247
+ <div class="patient-stat-value">12.6</div>
1248
+ <div class="patient-stat-label">WBC count</div>
1249
+ </div>
1250
+ </div>
1251
+ </div>
1252
+ </div>
1253
+ <div class="lab-results">
1254
+ <h4>Abnormal Results</h4>
1255
+ <div class="lab-item">
1256
+ <div>
1257
+ <div class="lab-name">Hemoglobin</div>
1258
+ <div class="lab-range">Normal: 13.8-17.2 g/dL</div>
1259
+ </div>
1260
+ <div class="lab-value high">17.2 g/dL</div>
1261
+ </div>
1262
+ <div class="lab-item">
1263
+ <div>
1264
+ <div class="lab-name">Triglycerides</div>
1265
+ <div class="lab-range">Normal: <150 mg/dL</div>
1266
+ </div>
1267
+ <div class="lab-value high">210 mg/dL</div>
1268
+ </div>
1269
+ <div class="lab-item">
1270
+ <div>
1271
+ <div class="lab-name">Blood Pressure</div>
1272
+ <div class="lab-range">Normal: 120/80 mmHg</div>
1273
+ </div>
1274
+ <div class="lab-value high">142/92 mmHg</div>
1275
+ </div>
1276
+ </div>
1277
+ </div>
1278
+ </div>
1279
+
1280
+ <!-- Charts Section -->
1281
+ <div class="chart-card">
1282
+ <div class="chart-header">
1283
+ <h2>Patient Visit Trends</h2>
1284
+ <div class="chart-tabs">
1285
+ <div class="chart-tab active">Daily</div>
1286
+ <div class="chart-tab">Weekly</div>
1287
+ <div class="chart-tab">Monthly</div>
1288
+ </div>
1289
+ </div>
1290
+ <div class="chart-container">
1291
+ <canvas id="patientVisitsChart"></canvas>
1292
+ </div>
1293
+ </div>
1294
+
1295
+ <!-- Bottom Section -->
1296
+ <div class="data-section">
1297
+ <div class="card card-lg">
1298
+ <div class="card-header-lg">
1299
+ <h2>Recent Activity</h2>
1300
+ <div class="card-actions">
1301
+ <button class="card-action-btn">
1302
+ <i class="material-icons">refresh</i> Refresh
1303
+ </button>
1304
+ </div>
1305
+ </div>
1306
+ <div class="activity-container">
1307
+ <div class="activity-item">
1308
+ <div class="activity-avatar">
1309
+ <i class="material-icons">person</i>
1310
+ </div>
1311
+ <div class="activity-content">
1312
+ <div class="activity-title">New patient registered</div>
1313
+ <div class="activity-message">
1314
+ <span>Michael Brown was added to the system by Dr. Smith</span>
1315
+ </div>
1316
+ <div class="activity-time">Today, 10:15 AM</div>
1317
+ </div>
1318
+ </div>
1319
+ <div class="activity-item">
1320
+ <div class="activity-avatar">
1321
+ <i class="material-icons">science</i>
1322
+ </div>
1323
+ <div class="activity-content">
1324
+ <div class="activity-title">Lab test completed</div>
1325
+ <div class="activity-message">
1326
+ <span>Complete Blood Count results are available for John Wilson</span>
1327
+ </div>
1328
+ <div class="activity-time">Today, 09:42 AM</div>
1329
+ </div>
1330
+ </div>
1331
+ <div class="activity-item">
1332
+ <div class="activity-avatar">
1333
+ <i class="material-icons">medication</i>
1334
+ </div>
1335
+ <div class="activity-content">
1336
+ <div class="activity-title">Prescription issued</div>
1337
+ <div class="activity-message">
1338
+ <span>Dr. Johnson prescribed Medication X to Sarah Miller</span>
1339
+ </div>
1340
+ <div class="activity-time">Yesterday, 4:30 PM</div>
1341
+ </div>
1342
+ </div>
1343
+ <div class="activity-item">
1344
+ <div class="activity-avatar">
1345
+ <i class="material-icons">assignment</i>
1346
+ </div>
1347
+ <div class="activity-content">
1348
+ <div class="activity-title">Report generated</div>
1349
+ <div class="activity-message">
1350
+ <span>Monthly analytics report has been generated</span>
1351
+ </div>
1352
+ <div class="activity-time">Yesterday, 3:15 PM</div>
1353
+ </div>
1354
+ </div>
1355
+ </div>
1356
+ </div>
1357
+ <div class="card card-lg">
1358
+ <div class="card-header-lg">
1359
+ <h2>Upcoming Appointments</h2>
1360
+ <div class="card-actions">
1361
+ <button class="card-action-btn">
1362
+ <i class="material-icons">add</i> Add New
1363
+ </button>
1364
+ </div>
1365
+ </div>
1366
+ <div class="events-container">
1367
+ <div class="event-item">
1368
+ <div class="event-time">10:00 AM</div>
1369
+ <div class="event-details">
1370
+ <h4>Follow-up: John Wilson</h4>
1371
+ <p>Review lab results and discuss treatment plan</p>
1372
+ </div>
1373
+ </div>
1374
+ <div class="event-item">
1375
+ <div class="event-time">11:30 AM</div>
1376
+ <div class="event-details">
1377
+ <h4>New Patient: Robert Chen</h4>
1378
+ <p>Initial consultation and medical history</p>
1379
+ </div>
1380
+ </div>
1381
+ <div class="event-item">
1382
+ <div class="event-time">02:15 PM</div>
1383
+ <div class="event-details">
1384
+ <h4>Lab Test: Sarah Johnson</h4>
1385
+ <p>Annual blood work and cholesterol check</p>
1386
+ </div>
1387
+ </div>
1388
+ <div class="event-item">
1389
+ <div class="event-time">04:00 PM</div>
1390
+ <div class="event-details">
1391
+ <h4>Staff Meeting</h4>
1392
+ <p>Weekly departmental meeting and updates</p>
1393
+ </div>
1394
+ </div>
1395
+ </div>
1396
+ </div>
1397
+ </div>
1398
+ </div>
1399
+ </div>
1400
+
1401
+ <script>
1402
+ document.addEventListener('DOMContentLoaded', function() {
1403
+ // Menu item click handler
1404
+ const menuItems = document.querySelectorAll('.menu-item');
1405
+ menuItems.forEach(item => {
1406
+ item.addEventListener('click', function() {
1407
+ menuItems.forEach(i => i.classList.remove('active'));
1408
+ this.classList.add('active');
1409
+ });
1410
+ });
1411
+
1412
+ // Chart tab click handler
1413
+ const chartTabs = document.querySelectorAll('.chart-tab');
1414
+ chartTabs.forEach(tab => {
1415
+ tab.addEventListener('click', function() {
1416
+ chartTabs.forEach(t => t.classList.remove('active'));
1417
+ this.classList.add('active');
1418
+ // In a real app, you'd update the chart data here
1419
+ updateChartData(this.textContent);
1420
+ });
1421
+ });
1422
+
1423
+ // Patient Visits Chart
1424
+ const ctx = document.getElementById('patientVisitsChart').getContext('2d');
1425
+ const patientVisitsChart = new Chart(ctx, {
1426
+ type: 'line',
1427
+ data: {
1428
+ labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
1429
+ datasets: [{
1430
+ label: 'Patient Visits',
1431
+ data: [45, 52, 48, 65, 72, 38, 20],
1432
+ backgroundColor: 'rgba(26, 115, 232, 0.1)',
1433
+ borderColor: 'rgb(26, 115, 232)',
1434
+ borderWidth: 2,
1435
+ tension: 0.3,
1436
+ fill: true,
1437
+ pointBackgroundColor: 'white',
1438
+ pointBorderColor: 'rgb(26, 115, 232)',
1439
+ pointBorderWidth: 2,
1440
+ pointRadius: 5,
1441
+ pointHoverRadius: 7
1442
+ }]
1443
+ },
1444
+ options: {
1445
+ responsive: true,
1446
+ maintainAspectRatio: false,
1447
+ plugins: {
1448
+ legend: {
1449
+ display: false
1450
+ },
1451
+ tooltip: {
1452
+ backgroundColor: 'rgba(0, 0, 0, 0.8)',
1453
+ titleFont: {
1454
+ size: 14,
1455
+ weight: 'bold'
1456
+ },
1457
+ bodyFont: {
1458
+ size: 12
1459
+ },
1460
+ padding: 12,
1461
+ cornerRadius: 8,
1462
+ displayColors: false
1463
+ }
1464
+ },
1465
+ scales: {
1466
+ y: {
1467
+ beginAtZero: true,
1468
+ grid: {
1469
+ color: 'rgba(0, 0, 0, 0.05)'
1470
+ },
1471
+ ticks: {
1472
+ stepSize: 20
1473
+ }
1474
+ },
1475
+ x: {
1476
+ grid: {
1477
+ display: false
1478
+ }
1479
+ }
1480
+ }
1481
+ }
1482
+ });
1483
+
1484
+ function updateChartData(range) {
1485
+ let newData;
1486
+ let newLabels;
1487
+
1488
+ if (range === 'Weekly') {
1489
+ newLabels = ['Week 1', 'Week 2', 'Week 3', 'Week 4'];
1490
+ newData = [320, 350, 380, 410];
1491
+ } else if (range === 'Monthly') {
1492
+ newLabels = ['Jan', 'Feb', 'Mar', 'Apr', 'May'];
1493
+ newData = [1320, 1250, 1480, 1420, 1560];
1494
+ } else {
1495
+ newLabels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
1496
+ newData = [45, 52, 48, 65, 72, 38, 20];
1497
+ }
1498
+
1499
+ patientVisitsChart.data.labels = newLabels;
1500
+ patientVisitsChart.data.datasets[0].data = newData;
1501
+ patientVisitsChart.update();
1502
+ }
1503
+
1504
+ // Search functionality placeholder
1505
+ const searchInput = document.querySelector('.search-bar input');
1506
+ searchInput.addEventListener('input', function() {
1507
+ console.log('Searching for:', this.value);
1508
+ // In a real app, you'd filter data or make an API call here
1509
+ });
1510
+
1511
+ // Sample data for a real implementation
1512
+ const patientDatabase = [
1513
+ {
1514
+ id: "P-10045",
1515
+ name: "John Wilson",
1516
+ age: 42,
1517
+ gender: "Male",
1518
+ lastVisit: "2023-05-15",
1519
+ testResults: [
1520
+ { test: "Hemoglobin", value: 17.2, unit: "g/dL", status: "high" },
1521
+ { test: "WBC", value: 12.6, unit: "10³/µL", status: "high" },
1522
+ { test: "Glucose", value: 148, unit: "mg/dL", status: "high" }
1523
+ ],
1524
+ upcomingAppointment: "2023-05-16"
1525
+ },
1526
+ {
1527
+ id: "P-10098",
1528
+ name: "Sarah Johnson",
1529
+ age: 35,
1530
+ gender: "Female",
1531
+ lastVisit: "2023-05-15",
1532
+ testResults: [
1533
+ { test: "Cholesterol", value: 185, unit: "mg/dL", status: "normal" },
1534
+ { test: "Triglycerides", value: 120, unit: "mg/dL", status: "normal" }
1535
+ ],
1536
+ upcomingAppointment: "2023-05-17"
1537
+ },
1538
+ {
1539
+ id: "P-10124",
1540
+ name: "Michael Brown",
1541
+ age: 58,
1542
+ gender: "Male",
1543
+ lastVisit: "2023-05-14",
1544
+ testResults: [
1545
+ { test: "AST", value: 42, unit: "U/L", status: "normal" },
1546
+ { test: "ALT", value: 38, unit: "U/L", status: "normal" }
1547
+ ],
1548
+ upcomingAppointment: "2023-05-18"
1549
+ }
1550
+ ];
1551
+
1552
+ console.log("Medical dashboard loaded. Sample patient database:", patientDatabase);
1553
+ });
1554
+ </script>
1555
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">This website has been generated by <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
1556
+ </html>