Hugging Face's logo

Spaces:
thors1
/
doctor-admin
Running

App Files Community
thors1 commited on
Commit
0a9563a
·
verified ·
1 Parent(s): 64de61d

undefined - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +674 -460
index.html CHANGED
@@ -3,14 +3,13 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>MediCare Clinic - Patient Management</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
  /* Custom scrollbar */
11
  ::-webkit-scrollbar {
12
  width: 8px;
13
- height: 8px;
14
  }
15
  ::-webkit-scrollbar-track {
16
  background: #f1f1f1;
@@ -29,537 +28,752 @@
29
  to { transform: translateX(0); }
30
  }
31
 
32
- .notification {
33
  animation: slideIn 0.3s ease-out;
34
  }
 
 
 
 
 
 
 
 
 
 
 
35
  </style>
36
  </head>
37
- <body class="bg-gray-50 text-gray-800 font-sans">
38
- <!-- Mobile menu button -->
39
- <div class="lg:hidden fixed top-4 right-4 z-50">
40
- <button id="mobileMenuButton" class="p-2 rounded-lg bg-blue-600 text-white shadow-lg">
41
- <i class="fas fa-bars"></i>
42
- </button>
43
- </div>
44
-
45
- <!-- Sidebar -->
46
- <div id="sidebar" class="fixed inset-y-0 left-0 transform -translate-x-full lg:translate-x-0 w-64 bg-white shadow-lg z-40 transition-transform duration-300 ease-in-out">
47
- <div class="flex items-center justify-center h-16 px-4 bg-blue-600 text-white">
48
- <div class="flex items-center">
49
- <i class="fas fa-heartbeat text-2xl mr-2"></i>
50
- <span class="text-xl font-bold">MediCare Clinic</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
51
  </div>
52
  </div>
53
- <nav class="mt-6">
54
- <div class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">
55
- Main
56
- </div>
57
- <a href="#" class="flex items-center px-4 py-3 text-blue-600 bg-blue-50 border-l-4 border-blue-600">
58
- <i class="fas fa-user-injured mr-3"></i>
59
- <span>Patients</span>
60
- </a>
61
- <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-100">
62
- <i class="fas fa-calendar-alt mr-3"></i>
63
- <span>Appointments</span>
64
- </a>
65
- <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-100">
66
- <i class="fas fa-prescription mr-3"></i>
67
- <span>Prescriptions</span>
68
- </a>
69
- <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-100">
70
- <i class="fas fa-file-medical mr-3"></i>
71
- <span>Medical Records</span>
72
- </a>
73
-
74
- <div class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider mt-4">
75
- Administration
76
- </div>
77
- <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-100">
78
- <i class="fas fa-user-md mr-3"></i>
79
- <span>Doctors</span>
80
- </a>
81
- <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-100">
82
- <i class="fas fa-cog mr-3"></i>
83
- <span>Settings</span>
84
- </a>
85
- </nav>
86
- <div class="absolute bottom-0 w-full p-4 border-t border-gray-200">
87
- <div class="flex items-center">
88
- <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile">
89
- <div class="ml-3">
90
- <p class="text-sm font-medium text-gray-700">Dr. Sarah Johnson</p>
91
- <p class="text-xs text-gray-500">Admin</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
92
  </div>
93
  </div>
94
  </div>
95
- </div>
96
-
97
- <!-- Main content -->
98
- <div class="lg:ml-64 min-h-screen">
99
- <!-- Top navigation -->
100
- <header class="bg-white shadow-sm">
101
- <div class="px-4 py-4 flex justify-between items-center">
102
- <h1 class="text-2xl font-bold text-gray-800">
103
- <i class="fas fa-user-injured mr-2 text-blue-600"></i>
104
- Patient Management
105
- </h1>
 
 
 
 
 
106
  <div class="flex items-center space-x-4">
107
- <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 relative">
108
  <i class="fas fa-bell"></i>
109
- <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
110
  </button>
111
- <div class="hidden md:flex items-center">
112
- <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile">
113
- <span class="ml-2 text-sm font-medium">Dr. Sarah Johnson</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
114
  </div>
115
  </div>
116
  </div>
117
- </header>
118
-
119
- <!-- Content -->
120
- <main class="p-4">
121
- <!-- Filters and actions -->
122
- <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
123
- <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
124
- <div class="flex-1">
125
- <div class="relative">
126
- <input type="text" placeholder="Search patients..." class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
127
- <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
128
  </div>
129
- </div>
130
- <div class="flex space-x-2">
131
- <button class="px-4 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center">
132
- <i class="fas fa-filter mr-2 text-gray-600"></i>
133
- <span>Filters</span>
134
  </button>
135
- <div class="relative">
136
- <button id="exportDropdownButton" class="px-4 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center">
137
- <i class="fas fa-file-export mr-2 text-gray-600"></i>
138
- <span>Export</span>
139
- <i class="fas fa-chevron-down ml-2 text-xs"></i>
140
- </button>
141
- <div id="exportDropdown" class="hidden absolute right-0 mt-1 w-48 bg-white rounded-md shadow-lg z-10 border border-gray-200">
142
- <div class="py-1">
143
- <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"><i class="fas fa-file-excel mr-2 text-green-600"></i> Excel</a>
144
- <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"><i class="fas fa-file-pdf mr-2 text-red-600"></i> PDF</a>
145
- <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"><i class="fas fa-file-csv mr-2 text-blue-600"></i> CSV</a>
146
- </div>
 
147
  </div>
148
  </div>
149
- <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center">
150
- <i class="fas fa-plus mr-2"></i>
151
- <span>New Patient</span>
152
- </button>
153
  </div>
154
- </div>
155
-
156
- <!-- Advanced filters (collapsible) -->
157
- <div id="advancedFilters" class="mt-4 hidden">
158
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
159
- <div>
160
- <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
161
- <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
162
- <option>All</option>
163
- <option>Active</option>
164
- <option>Inactive</option>
165
- <option>New</option>
166
- </select>
167
  </div>
168
- <div>
169
- <label class="block text-sm font-medium text-gray-700 mb-1">Gender</label>
170
- <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
171
- <option>All</option>
172
- <option>Male</option>
173
- <option>Female</option>
174
- <option>Other</option>
175
- </select>
176
  </div>
177
- <div>
178
- <label class="block text-sm font-medium text-gray-700 mb-1">Age Range</label>
179
- <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
180
- <option>All</option>
181
- <option>0-18</option>
182
- <option>19-35</option>
183
- <option>36-55</option>
184
- <option>55+</option>
185
- </select>
 
 
186
  </div>
187
- <div>
188
- <label class="block text-sm font-medium text-gray-700 mb-1">Last Visit</label>
189
- <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
190
- <option>All Time</option>
191
- <option>Last 7 Days</option>
192
- <option>Last 30 Days</option>
193
- <option>Last 6 Months</option>
194
- </select>
195
  </div>
196
  </div>
197
- <div class="mt-4 flex justify-end">
198
- <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 mr-2">
199
- Reset
200
- </button>
201
- <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
202
- Apply Filters
203
- </button>
 
 
 
 
 
 
 
204
  </div>
205
  </div>
206
- </div>
207
-
208
- <!-- Patient list -->
209
- <div class="bg-white rounded-lg shadow-sm overflow-hidden">
210
- <div class="overflow-x-auto">
211
- <table class="min-w-full divide-y divide-gray-200">
212
- <thead class="bg-gray-50">
213
- <tr>
214
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
215
- Patient ID
216
- </th>
217
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
218
- Name
219
- </th>
220
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
221
- Gender
222
- </th>
223
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
224
- Age
225
- </th>
226
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
227
- Last Visit
228
- </th>
229
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
230
- Status
231
- </th>
232
- <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
233
- Actions
234
- </th>
235
- </tr>
236
- </thead>
237
- <tbody class="bg-white divide-y divide-gray-200">
238
- <tr class="hover:bg-gray-50">
239
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
240
- #PAT-1001
241
- </td>
242
- <td class="px-6 py-4 whitespace-nowrap">
243
  <div class="flex items-center">
244
- <div class="flex-shrink-0 h-10 w-10">
245
- <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
 
 
246
  </div>
247
- <div class="ml-4">
248
- <div class="text-sm font-medium text-gray-900">John Smith</div>
249
- <div class="text-sm text-gray-500">john.smith@example.com</div>
 
 
 
 
 
 
 
250
  </div>
251
  </div>
252
- </td>
253
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
254
- Male
255
- </td>
256
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
257
- 42
258
- </td>
259
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
260
- 2023-06-15
261
- </td>
262
- <td class="px-6 py-4 whitespace-nowrap">
263
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
264
- Active
265
- </span>
266
- </td>
267
- <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
268
- <div class="flex justify-end space-x-2">
269
- <button class="text-blue-600 hover:text-blue-900">
270
- <i class="fas fa-eye"></i>
271
- </button>
272
- <button class="text-yellow-600 hover:text-yellow-900">
273
- <i class="fas fa-edit"></i>
274
- </button>
275
- <button class="text-red-600 hover:text-red-900">
276
- <i class="fas fa-trash"></i>
277
- </button>
278
  </div>
279
- </td>
280
- </tr>
281
- <tr class="hover:bg-gray-50">
282
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
283
- #PAT-1002
284
- </td>
285
- <td class="px-6 py-4 whitespace-nowrap">
286
  <div class="flex items-center">
287
- <div class="flex-shrink-0 h-10 w-10">
288
- <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
 
 
289
  </div>
290
- <div class="ml-4">
291
- <div class="text-sm font-medium text-gray-900">Emily Johnson</div>
292
- <div class="text-sm text-gray-500">emily.j@example.com</div>
 
 
 
 
 
 
 
293
  </div>
294
  </div>
295
- </td>
296
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
297
- Female
298
- </td>
299
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
300
- 35
301
- </td>
302
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
303
- 2023-06-10
304
- </td>
305
- <td class="px-6 py-4 whitespace-nowrap">
306
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
307
- Active
308
- </span>
309
- </td>
310
- <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
311
- <div class="flex justify-end space-x-2">
312
- <button class="text-blue-600 hover:text-blue-900">
313
- <i class="fas fa-eye"></i>
314
- </button>
315
- <button class="text-yellow-600 hover:text-yellow-900">
316
- <i class="fas fa-edit"></i>
317
- </button>
318
- <button class="text-red-600 hover:text-red-900">
319
- <i class="fas fa-trash"></i>
320
- </button>
321
  </div>
322
- </td>
323
- </tr>
324
- <tr class="hover:bg-gray-50">
325
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
326
- #PAT-1003
327
- </td>
328
- <td class="px-6 py-4 whitespace-nowrap">
329
  <div class="flex items-center">
330
- <div class="flex-shrink-0 h-10 w-10">
331
- <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt="">
 
 
332
  </div>
333
- <div class="ml-4">
334
- <div class="text-sm font-medium text-gray-900">Robert Davis</div>
335
- <div class="text-sm text-gray-500">robert.d@example.com</div>
 
 
 
 
 
 
 
336
  </div>
337
  </div>
338
- </td>
339
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
340
- Male
341
- </td>
342
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
343
- 58
344
- </td>
345
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
346
- 2023-05-22
347
- </td>
348
- <td class="px-6 py-4 whitespace-nowrap">
349
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
350
- Follow-up
351
- </span>
352
- </td>
353
- <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
354
- <div class="flex justify-end space-x-2">
355
- <button class="text-blue-600 hover:text-blue-900">
356
- <i class="fas fa-eye"></i>
357
- </button>
358
- <button class="text-yellow-600 hover:text-yellow-900">
359
- <i class="fas fa-edit"></i>
360
- </button>
361
- <button class="text-red-600 hover:text-red-900">
362
- <i class="fas fa-trash"></i>
363
- </button>
 
 
364
  </div>
365
- </td>
366
- </tr>
367
- <tr class="hover:bg-gray-50">
368
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
369
- #PAT-1004
370
- </td>
371
- <td class="px-6 py-4 whitespace-nowrap">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
372
  <div class="flex items-center">
373
- <div class="flex-shrink-0 h-10 w-10">
374
- <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/63.jpg" alt="">
375
- </div>
376
  <div class="ml-4">
377
- <div class="text-sm font-medium text-gray-900">Sarah Wilson</div>
378
- <div class="text-sm text-gray-500">sarah.w@example.com</div>
 
 
 
 
379
  </div>
380
  </div>
381
- </td>
382
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
383
- Female
384
- </td>
385
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
386
- 29
387
- </td>
388
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
389
- 2023-06-18
390
- </td>
391
- <td class="px-6 py-4 whitespace-nowrap">
392
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
393
- New
394
- </span>
395
- </td>
396
- <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
397
- <div class="flex justify-end space-x-2">
398
- <button class="text-blue-600 hover:text-blue-900">
399
- <i class="fas fa-eye"></i>
400
- </button>
401
- <button class="text-yellow-600 hover:text-yellow-900">
402
- <i class="fas fa-edit"></i>
403
- </button>
404
- <button class="text-red-600 hover:text-red-900">
405
- <i class="fas fa-trash"></i>
406
- </button>
407
- </div>
408
- </td>
409
- </tr>
410
- <tr class="hover:bg-gray-50">
411
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
412
- #PAT-1005
413
- </td>
414
- <td class="px-6 py-4 whitespace-nowrap">
415
  <div class="flex items-center">
416
- <div class="flex-shrink-0 h-10 w-10">
417
- <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/82.jpg" alt="">
 
 
 
 
 
 
418
  </div>
 
 
 
 
 
 
 
419
  <div class="ml-4">
420
- <div class="text-sm font-medium text-gray-900">Michael Brown</div>
421
- <div class="text-sm text-gray-500">michael.b@example.com</div>
 
 
 
 
422
  </div>
423
  </div>
424
- </td>
425
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
426
- Male
427
- </td>
428
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
429
- 45
430
- </td>
431
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
432
- 2023-04-30
433
- </td>
434
- <td class="px-6 py-4 whitespace-nowrap">
435
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
436
- Inactive
437
- </span>
438
- </td>
439
- <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
440
- <div class="flex justify-end space-x-2">
441
- <button class="text-blue-600 hover:text-blue-900">
442
- <i class="fas fa-eye"></i>
443
- </button>
444
- <button class="text-yellow-600 hover:text-yellow-900">
445
- <i class="fas fa-edit"></i>
446
- </button>
447
- <button class="text-red-600 hover:text-red-900">
448
- <i class="fas fa-trash"></i>
449
- </button>
450
  </div>
451
- </td>
452
- </tr>
453
- </tbody>
454
- </table>
455
  </div>
456
 
457
- <!-- Pagination -->
458
- <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
459
- <div class="flex-1 flex justify-between sm:hidden">
460
- <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
461
- Previous
462
- </a>
463
- <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
464
- Next
465
- </a>
 
 
 
 
 
 
 
 
 
 
 
466
  </div>
467
- <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
468
- <div>
469
- <p class="text-sm text-gray-700">
470
- Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">24</span> patients
471
- </p>
 
472
  </div>
473
- <div>
474
- <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
475
- <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
476
- <span class="sr-only">Previous</span>
477
- <i class="fas fa-chevron-left"></i>
478
- </a>
479
- <a href="#" aria-current="page" class="z-10 bg-blue-50 border-blue-500 text-blue-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
480
- 1
481
- </a>
482
- <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
483
- 2
484
- </a>
485
- <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
486
- 3
487
- </a>
488
- <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
489
- ...
490
- </span>
491
- <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
492
- 8
493
- </a>
494
- <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
495
- <span class="sr-only">Next</span>
496
- <i class="fas fa-chevron-right"></i>
497
- </a>
498
- </nav>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
499
  </div>
500
  </div>
501
  </div>
502
  </div>
503
- </main>
504
  </div>
505
-
506
- <!-- Notification (example) -->
507
- <div id="notification" class="fixed bottom-4 right-4 hidden">
508
- <div class="notification bg-green-500 text-white px-4 py-3 rounded-lg shadow-lg flex items-center">
509
- <i class="fas fa-check-circle mr-2"></i>
510
- <span>Patient record updated successfully!</span>
511
- <button class="ml-4" onclick="hideNotification()">
512
- <i class="fas fa-times"></i>
513
- </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
514
  </div>
 
515
  </div>
516
-
 
517
  <script>
518
- // Mobile menu toggle
519
- const mobileMenuButton = document.getElementById('mobileMenuButton');
520
- const sidebar = document.getElementById('sidebar');
 
521
 
522
- mobileMenuButton.addEventListener('click', () => {
523
- sidebar.classList.toggle('-translate-x-full');
524
  });
525
-
526
- // Export dropdown toggle
527
- const exportDropdownButton = document.getElementById('exportDropdownButton');
528
- const exportDropdown = document.getElementById('exportDropdown');
529
 
530
- exportDropdownButton.addEventListener('click', () => {
531
- exportDropdown.classList.toggle('hidden');
532
  });
533
-
534
- // Close dropdown when clicking outside
535
- document.addEventListener('click', (event) => {
536
- if (!exportDropdownButton.contains(event.target) && !exportDropdown.contains(event.target)) {
537
- exportDropdown.classList.add('hidden');
 
 
 
538
  }
539
  });
540
-
541
- // Toggle advanced filters
542
- const filterButton = document.querySelector('button:has(.fa-filter)');
543
- const advancedFilters = document.getElementById('advancedFilters');
544
 
545
- filterButton.addEventListener('click', () => {
546
- advancedFilters.classList.toggle('hidden');
 
 
 
 
 
 
547
  });
548
-
549
- // Show notification (example)
550
- function showNotification() {
551
- const notification = document.getElementById('notification');
552
- notification.classList.remove('hidden');
553
- setTimeout(hideNotification, 5000);
554
- }
555
-
556
- function hideNotification() {
557
- const notification = document.getElementById('notification');
558
- notification.classList.add('hidden');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
559
  }
560
-
561
- // Example: Show notification after 2 seconds (for demo)
562
- setTimeout(showNotification, 2000);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
563
  </script>
564
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=thors1/doctor-admin" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
565
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>MediCare Pro - Doctor's Dashboard</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
  /* Custom scrollbar */
11
  ::-webkit-scrollbar {
12
  width: 8px;
 
13
  }
14
  ::-webkit-scrollbar-track {
15
  background: #f1f1f1;
 
28
  to { transform: translateX(0); }
29
  }
30
 
31
+ .notification-slide {
32
  animation: slideIn 0.3s ease-out;
33
  }
34
+
35
+ /* Pulse animation for urgent items */
36
+ @keyframes pulse {
37
+ 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
38
+ 70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
39
+ 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
40
+ }
41
+
42
+ .pulse-urgent {
43
+ animation: pulse 2s infinite;
44
+ }
45
  </style>
46
  </head>
47
+ <body class="bg-gray-100 font-sans">
48
+ <div class="flex h-screen overflow-hidden">
49
+ <!-- Sidebar -->
50
+ <div class="hidden md:flex md:flex-shrink-0">
51
+ <div class="flex flex-col w-64 bg-gradient-to-b from-blue-900 to-blue-800">
52
+ <div class="flex items-center h-16 px-4 border-b border-blue-700">
53
+ <div class="flex items-center">
54
+ <i class="fas fa-heartbeat text-white text-2xl mr-2"></i>
55
+ <span class="text-white font-bold text-xl">MediCare Pro</span>
56
+ </div>
57
+ </div>
58
+ <div class="flex flex-col flex-grow overflow-y-auto">
59
+ <div class="px-4 py-6">
60
+ <div class="flex items-center px-4 py-3 bg-blue-700 rounded-lg">
61
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/65.jpg" alt="Doctor">
62
+ <div class="ml-3">
63
+ <p class="text-sm font-medium text-white">Dr. Sarah Johnson</p>
64
+ <p class="text-xs font-medium text-blue-200">Cardiologist</p>
65
+ </div>
66
+ </div>
67
+ </div>
68
+ <nav class="flex-1 px-2 space-y-1">
69
+ <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-white bg-blue-700 rounded-lg">
70
+ <i class="fas fa-tachometer-alt mr-3"></i>
71
+ Dashboard
72
+ </a>
73
+ <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-blue-200 hover:text-white hover:bg-blue-700 rounded-lg">
74
+ <i class="fas fa-calendar-check mr-3"></i>
75
+ Appointments
76
+ </a>
77
+ <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-blue-200 hover:text-white hover:bg-blue-700 rounded-lg">
78
+ <i class="fas fa-procedures mr-3"></i>
79
+ Patients
80
+ </a>
81
+ <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-blue-200 hover:text-white hover:bg-blue-700 rounded-lg">
82
+ <i class="fas fa-file-medical mr-3"></i>
83
+ Medical Records
84
+ </a>
85
+ <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-blue-200 hover:text-white hover:bg-blue-700 rounded-lg">
86
+ <i class="fas fa-prescription mr-3"></i>
87
+ Prescriptions
88
+ </a>
89
+ <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-blue-200 hover:text-white hover:bg-blue-700 rounded-lg">
90
+ <i class="fas fa-chart-line mr-3"></i>
91
+ Analytics
92
+ </a>
93
+ <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-blue-200 hover:text-white hover:bg-blue-700 rounded-lg">
94
+ <i class="fas fa-comment-medical mr-3"></i>
95
+ Telemedicine
96
+ </a>
97
+ <div class="px-4 pt-4">
98
+ <p class="text-xs font-semibold text-blue-400 uppercase tracking-wider">Settings</p>
99
+ </div>
100
+ <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-blue-200 hover:text-white hover:bg-blue-700 rounded-lg">
101
+ <i class="fas fa-cog mr-3"></i>
102
+ Account Settings
103
+ </a>
104
+ <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-blue-200 hover:text-white hover:bg-blue-700 rounded-lg">
105
+ <i class="fas fa-sign-out-alt mr-3"></i>
106
+ Logout
107
+ </a>
108
+ </nav>
109
+ </div>
110
  </div>
111
  </div>
112
+
113
+ <!-- Mobile sidebar -->
114
+ <div class="md:hidden fixed inset-0 z-40" id="mobile-sidebar" style="display: none;">
115
+ <div class="fixed inset-0 bg-gray-600 bg-opacity-75" id="sidebar-backdrop"></div>
116
+ <div class="relative flex flex-col w-72 max-w-xs h-full bg-gradient-to-b from-blue-900 to-blue-800">
117
+ <div class="flex items-center h-16 px-4 border-b border-blue-700">
118
+ <div class="flex items-center">
119
+ <i class="fas fa-heartbeat text-white text-2xl mr-2"></i>
120
+ <span class="text-white font-bold text-xl">MediCare Pro</span>
121
+ </div>
122
+ <button class="ml-auto p-1 rounded-md text-blue-200 hover:text-white focus:outline-none" id="close-sidebar">
123
+ <i class="fas fa-times"></i>
124
+ </button>
125
+ </div>
126
+ <div class="flex-1 overflow-y-auto">
127
+ <div class="px-4 py-6">
128
+ <div class="flex items-center px-4 py-3 bg-blue-700 rounded-lg">
129
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/65.jpg" alt="Doctor">
130
+ <div class="ml-3">
131
+ <p class="text-sm font-medium text-white">Dr. Sarah Johnson</p>
132
+ <p class="text-xs font-medium text-blue-200">Cardiologist</p>
133
+ </div>
134
+ </div>
135
+ </div>
136
+ <nav class="px-2 space-y-1">
137
+ <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-white bg-blue-700 rounded-lg">
138
+ <i class="fas fa-tachometer-alt mr-3"></i>
139
+ Dashboard
140
+ </a>
141
+ <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-blue-200 hover:text-white hover:bg-blue-700 rounded-lg">
142
+ <i class="fas fa-calendar-check mr-3"></i>
143
+ Appointments
144
+ </a>
145
+ <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-blue-200 hover:text-white hover:bg-blue-700 rounded-lg">
146
+ <i class="fas fa-procedures mr-3"></i>
147
+ Patients
148
+ </a>
149
+ <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-blue-200 hover:text-white hover:bg-blue-700 rounded-lg">
150
+ <i class="fas fa-file-medical mr-3"></i>
151
+ Medical Records
152
+ </a>
153
+ <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-blue-200 hover:text-white hover:bg-blue-700 rounded-lg">
154
+ <i class="fas fa-prescription mr-3"></i>
155
+ Prescriptions
156
+ </a>
157
+ <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-blue-200 hover:text-white hover:bg-blue-700 rounded-lg">
158
+ <i class="fas fa-chart-line mr-3"></i>
159
+ Analytics
160
+ </a>
161
+ <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-blue-200 hover:text-white hover:bg-blue-700 rounded-lg">
162
+ <i class="fas fa-comment-medical mr-3"></i>
163
+ Telemedicine
164
+ </a>
165
+ <div class="px-4 pt-4">
166
+ <p class="text-xs font-semibold text-blue-400 uppercase tracking-wider">Settings</p>
167
+ </div>
168
+ <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-blue-200 hover:text-white hover:bg-blue-700 rounded-lg">
169
+ <i class="fas fa-cog mr-3"></i>
170
+ Account Settings
171
+ </a>
172
+ <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-blue-200 hover:text-white hover:bg-blue-700 rounded-lg">
173
+ <i class="fas fa-sign-out-alt mr-3"></i>
174
+ Logout
175
+ </a>
176
+ </nav>
177
  </div>
178
  </div>
179
  </div>
180
+
181
+ <!-- Main content -->
182
+ <div class="flex flex-col flex-1 overflow-hidden">
183
+ <!-- Top navigation -->
184
+ <div class="flex items-center justify-between h-16 px-4 bg-white border-b border-gray-200">
185
+ <div class="flex items-center">
186
+ <button class="md:hidden text-gray-500 focus:outline-none" id="open-sidebar">
187
+ <i class="fas fa-bars"></i>
188
+ </button>
189
+ <div class="relative ml-4 md:ml-0">
190
+ <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
191
+ <i class="fas fa-search text-gray-400"></i>
192
+ </div>
193
+ <input type="text" class="block w-full py-2 pl-10 pr-3 text-sm bg-gray-100 border border-transparent rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Search patients, records...">
194
+ </div>
195
+ </div>
196
  <div class="flex items-center space-x-4">
197
+ <button class="p-1 text-gray-400 rounded-full hover:text-gray-500 focus:outline-none">
198
  <i class="fas fa-bell"></i>
199
+ <span class="sr-only">View notifications</span>
200
  </button>
201
+ <button class="p-1 text-gray-400 rounded-full hover:text-gray-500 focus:outline-none">
202
+ <i class="fas fa-envelope"></i>
203
+ <span class="sr-only">View messages</span>
204
+ </button>
205
+ <div class="relative">
206
+ <button class="flex items-center text-sm text-gray-800 rounded-full focus:outline-none" id="user-menu">
207
+ <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/women/65.jpg" alt="Doctor">
208
+ <span class="ml-2 hidden md:inline">Dr. Johnson</span>
209
+ <i class="fas fa-chevron-down ml-1 text-gray-500 text-xs"></i>
210
+ </button>
211
+ <!-- Dropdown menu -->
212
+ <div class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50" id="user-dropdown">
213
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Your Profile</a>
214
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
215
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sign out</a>
216
+ </div>
217
  </div>
218
  </div>
219
  </div>
220
+
221
+ <!-- Main content area -->
222
+ <div class="flex-1 overflow-auto p-4">
223
+ <!-- Welcome banner -->
224
+ <div class="bg-gradient-to-r from-blue-600 to-blue-800 rounded-xl shadow-md p-6 mb-6 text-white">
225
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between">
226
+ <div>
227
+ <h1 class="text-2xl font-bold">Welcome back, Dr. Johnson</h1>
228
+ <p class="mt-2 opacity-90">You have 5 appointments today and 3 pending prescriptions to review.</p>
 
 
229
  </div>
230
+ <button class="mt-4 md:mt-0 bg-white text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-lg font-medium transition duration-150 ease-in-out">
231
+ View Schedule
 
 
 
232
  </button>
233
+ </div>
234
+ </div>
235
+
236
+ <!-- Stats cards -->
237
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
238
+ <div class="bg-white rounded-xl shadow p-6">
239
+ <div class="flex items-center">
240
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600">
241
+ <i class="fas fa-calendar-check text-lg"></i>
242
+ </div>
243
+ <div class="ml-4">
244
+ <p class="text-sm font-medium text-gray-500">Today's Appointments</p>
245
+ <p class="text-2xl font-semibold text-gray-800">12</p>
246
  </div>
247
  </div>
248
+ <div class="mt-4">
249
+ <span class="text-green-600 text-sm font-medium">+2 from yesterday</span>
250
+ </div>
 
251
  </div>
252
+
253
+ <div class="bg-white rounded-xl shadow p-6">
254
+ <div class="flex items-center">
255
+ <div class="p-3 rounded-full bg-green-100 text-green-600">
256
+ <i class="fas fa-user-injured text-lg"></i>
257
+ </div>
258
+ <div class="ml-4">
259
+ <p class="text-sm font-medium text-gray-500">Active Patients</p>
260
+ <p class="text-2xl font-semibold text-gray-800">248</p>
261
+ </div>
 
 
 
262
  </div>
263
+ <div class="mt-4">
264
+ <span class="text-green-600 text-sm font-medium">+5 this week</span>
 
 
 
 
 
 
265
  </div>
266
+ </div>
267
+
268
+ <div class="bg-white rounded-xl shadow p-6">
269
+ <div class="flex items-center">
270
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600">
271
+ <i class="fas fa-file-prescription text-lg"></i>
272
+ </div>
273
+ <div class="ml-4">
274
+ <p class="text-sm font-medium text-gray-500">Prescriptions</p>
275
+ <p class="text-2xl font-semibold text-gray-800">7</p>
276
+ </div>
277
  </div>
278
+ <div class="mt-4">
279
+ <span class="text-red-600 text-sm font-medium">3 pending review</span>
 
 
 
 
 
 
280
  </div>
281
  </div>
282
+
283
+ <div class="bg-white rounded-xl shadow p-6">
284
+ <div class="flex items-center">
285
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
286
+ <i class="fas fa-clock text-lg"></i>
287
+ </div>
288
+ <div class="ml-4">
289
+ <p class="text-sm font-medium text-gray-500">Avg. Wait Time</p>
290
+ <p class="text-2xl font-semibold text-gray-800">8 min</p>
291
+ </div>
292
+ </div>
293
+ <div class="mt-4">
294
+ <span class="text-green-600 text-sm font-medium">-2 min from last week</span>
295
+ </div>
296
  </div>
297
  </div>
298
+
299
+ <!-- Main content grid -->
300
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
301
+ <!-- Upcoming Appointments -->
302
+ <div class="lg:col-span-2 bg-white rounded-xl shadow overflow-hidden">
303
+ <div class="px-6 py-4 border-b border-gray-200">
304
+ <div class="flex items-center justify-between">
305
+ <h2 class="text-lg font-semibold text-gray-800">Today's Appointments</h2>
306
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View All</button>
307
+ </div>
308
+ </div>
309
+ <div class="overflow-y-auto" style="max-height: 500px;">
310
+ <div class="divide-y divide-gray-200">
311
+ <!-- Appointment item -->
312
+ <div class="p-4 hover:bg-gray-50 transition duration-150 ease-in-out">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
313
  <div class="flex items-center">
314
+ <div class="flex-shrink-0">
315
+ <div class="p-2 rounded-full bg-blue-100 text-blue-600">
316
+ <i class="fas fa-calendar-day"></i>
317
+ </div>
318
  </div>
319
+ <div class="ml-4 flex-1">
320
+ <div class="flex items-center justify-between">
321
+ <h3 class="text-sm font-medium text-gray-900">Michael Brown</h3>
322
+ <span class="text-xs font-medium bg-blue-100 text-blue-800 px-2 py-1 rounded-full">New Patient</span>
323
+ </div>
324
+ <p class="text-sm text-gray-500">Follow-up for hypertension</p>
325
+ <div class="mt-1 flex items-center text-sm text-gray-500">
326
+ <i class="far fa-clock mr-1.5"></i>
327
+ <span>9:30 AM - 10:00 AM</span>
328
+ </div>
329
  </div>
330
  </div>
331
+ </div>
332
+
333
+ <!-- Appointment item -->
334
+ <div class="p-4 hover:bg-gray-50 transition duration-150 ease-in-out">
335
+ <div class="flex items-center">
336
+ <div class="flex-shrink-0">
337
+ <div class="p-2 rounded-full bg-green-100 text-green-600">
338
+ <i class="fas fa-calendar-day"></i>
339
+ </div>
340
+ </div>
341
+ <div class="ml-4 flex-1">
342
+ <div class="flex items-center justify-between">
343
+ <h3 class="text-sm font-medium text-gray-900">Emily Wilson</h3>
344
+ <span class="text-xs font-medium bg-green-100 text-green-800 px-2 py-1 rounded-full">Routine</span>
345
+ </div>
346
+ <p class="text-sm text-gray-500">Annual physical examination</p>
347
+ <div class="mt-1 flex items-center text-sm text-gray-500">
348
+ <i class="far fa-clock mr-1.5"></i>
349
+ <span>10:15 AM - 10:45 AM</span>
350
+ </div>
351
+ </div>
 
 
 
 
 
352
  </div>
353
+ </div>
354
+
355
+ <!-- Appointment item (urgent) -->
356
+ <div class="p-4 hover:bg-gray-50 transition duration-150 ease-in-out pulse-urgent">
 
 
 
357
  <div class="flex items-center">
358
+ <div class="flex-shrink-0">
359
+ <div class="p-2 rounded-full bg-red-100 text-red-600">
360
+ <i class="fas fa-calendar-day"></i>
361
+ </div>
362
  </div>
363
+ <div class="ml-4 flex-1">
364
+ <div class="flex items-center justify-between">
365
+ <h3 class="text-sm font-medium text-gray-900">Robert Taylor</h3>
366
+ <span class="text-xs font-medium bg-red-100 text-red-800 px-2 py-1 rounded-full">Urgent</span>
367
+ </div>
368
+ <p class="text-sm text-gray-500">Chest pain evaluation</p>
369
+ <div class="mt-1 flex items-center text-sm text-gray-500">
370
+ <i class="far fa-clock mr-1.5"></i>
371
+ <span>11:00 AM - 11:30 AM</span>
372
+ </div>
373
  </div>
374
  </div>
375
+ </div>
376
+
377
+ <!-- Appointment item -->
378
+ <div class="p-4 hover:bg-gray-50 transition duration-150 ease-in-out">
379
+ <div class="flex items-center">
380
+ <div class="flex-shrink-0">
381
+ <div class="p-2 rounded-full bg-purple-100 text-purple-600">
382
+ <i class="fas fa-calendar-day"></i>
383
+ </div>
384
+ </div>
385
+ <div class="ml-4 flex-1">
386
+ <div class="flex items-center justify-between">
387
+ <h3 class="text-sm font-medium text-gray-900">Jennifer Lee</h3>
388
+ <span class="text-xs font-medium bg-purple-100 text-purple-800 px-2 py-1 rounded-full">Follow-up</span>
389
+ </div>
390
+ <p class="text-sm text-gray-500">Diabetes management</p>
391
+ <div class="mt-1 flex items-center text-sm text-gray-500">
392
+ <i class="far fa-clock mr-1.5"></i>
393
+ <span>1:30 PM - 2:00 PM</span>
394
+ </div>
395
+ </div>
 
 
 
 
 
396
  </div>
397
+ </div>
398
+
399
+ <!-- Appointment item -->
400
+ <div class="p-4 hover:bg-gray-50 transition duration-150 ease-in-out">
 
 
 
401
  <div class="flex items-center">
402
+ <div class="flex-shrink-0">
403
+ <div class="p-2 rounded-full bg-yellow-100 text-yellow-600">
404
+ <i class="fas fa-calendar-day"></i>
405
+ </div>
406
  </div>
407
+ <div class="ml-4 flex-1">
408
+ <div class="flex items-center justify-between">
409
+ <h3 class="text-sm font-medium text-gray-900">David Miller</h3>
410
+ <span class="text-xs font-medium bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">Consultation</span>
411
+ </div>
412
+ <p class="text-sm text-gray-500">Cardiology consultation</p>
413
+ <div class="mt-1 flex items-center text-sm text-gray-500">
414
+ <i class="far fa-clock mr-1.5"></i>
415
+ <span>2:15 PM - 3:00 PM</span>
416
+ </div>
417
  </div>
418
  </div>
419
+ </div>
420
+ </div>
421
+ </div>
422
+ </div>
423
+
424
+ <!-- Quick Actions & Recent Patients -->
425
+ <div class="space-y-6">
426
+ <!-- Quick Actions -->
427
+ <div class="bg-white rounded-xl shadow overflow-hidden">
428
+ <div class="px-6 py-4 border-b border-gray-200">
429
+ <h2 class="text-lg font-semibold text-gray-800">Quick Actions</h2>
430
+ </div>
431
+ <div class="p-4 grid grid-cols-2 gap-4">
432
+ <button class="flex flex-col items-center justify-center p-4 rounded-lg border border-gray-200 hover:bg-blue-50 hover:border-blue-200 transition duration-150 ease-in-out">
433
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600 mb-2">
434
+ <i class="fas fa-user-plus"></i>
435
+ </div>
436
+ <span class="text-sm font-medium text-gray-700">New Patient</span>
437
+ </button>
438
+ <button class="flex flex-col items-center justify-center p-4 rounded-lg border border-gray-200 hover:bg-green-50 hover:border-green-200 transition duration-150 ease-in-out">
439
+ <div class="p-3 rounded-full bg-green-100 text-green-600 mb-2">
440
+ <i class="fas fa-prescription-bottle-alt"></i>
441
+ </div>
442
+ <span class="text-sm font-medium text-gray-700">New Prescription</span>
443
+ </button>
444
+ <button class="flex flex-col items-center justify-center p-4 rounded-lg border border-gray-200 hover:bg-purple-50 hover:border-purple-200 transition duration-150 ease-in-out">
445
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600 mb-2">
446
+ <i class="fas fa-file-medical"></i>
447
  </div>
448
+ <span class="text-sm font-medium text-gray-700">Add Record</span>
449
+ </button>
450
+ <button class="flex flex-col items-center justify-center p-4 rounded-lg border border-gray-200 hover:bg-yellow-50 hover:border-yellow-200 transition duration-150 ease-in-out">
451
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mb-2">
452
+ <i class="fas fa-video"></i>
453
+ </div>
454
+ <span class="text-sm font-medium text-gray-700">Start Telemedicine</span>
455
+ </button>
456
+ </div>
457
+ </div>
458
+
459
+ <!-- Recent Patients -->
460
+ <div class="bg-white rounded-xl shadow overflow-hidden">
461
+ <div class="px-6 py-4 border-b border-gray-200">
462
+ <div class="flex items-center justify-between">
463
+ <h2 class="text-lg font-semibold text-gray-800">Recent Patients</h2>
464
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View All</button>
465
+ </div>
466
+ </div>
467
+ <div class="divide-y divide-gray-200">
468
+ <!-- Patient item -->
469
+ <div class="p-4 hover:bg-gray-50 transition duration-150 ease-in-out">
470
  <div class="flex items-center">
471
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Patient">
 
 
472
  <div class="ml-4">
473
+ <h3 class="text-sm font-medium text-gray-900">James Wilson</h3>
474
+ <div class="flex items-center text-xs text-gray-500 mt-1">
475
+ <span>Last visit: 2 days ago</span>
476
+ <span class="mx-1">•</span>
477
+ <span class="text-blue-600">Hypertension</span>
478
+ </div>
479
  </div>
480
  </div>
481
+ </div>
482
+
483
+ <!-- Patient item -->
484
+ <div class="p-4 hover:bg-gray-50 transition duration-150 ease-in-out">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
485
  <div class="flex items-center">
486
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Patient">
487
+ <div class="ml-4">
488
+ <h3 class="text-sm font-medium text-gray-900">Lisa Thompson</h3>
489
+ <div class="flex items-center text-xs text-gray-500 mt-1">
490
+ <span>Last visit: 1 week ago</span>
491
+ <span class="mx-1">•</span>
492
+ <span class="text-green-600">Diabetes</span>
493
+ </div>
494
  </div>
495
+ </div>
496
+ </div>
497
+
498
+ <!-- Patient item -->
499
+ <div class="p-4 hover:bg-gray-50 transition duration-150 ease-in-out">
500
+ <div class="flex items-center">
501
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Patient">
502
  <div class="ml-4">
503
+ <h3 class="text-sm font-medium text-gray-900">Mark Davis</h3>
504
+ <div class="flex items-center text-xs text-gray-500 mt-1">
505
+ <span>Last visit: 3 weeks ago</span>
506
+ <span class="mx-1">•</span>
507
+ <span class="text-purple-600">Asthma</span>
508
+ </div>
509
  </div>
510
  </div>
511
+ </div>
512
+
513
+ <!-- Patient item -->
514
+ <div class="p-4 hover:bg-gray-50 transition duration-150 ease-in-out">
515
+ <div class="flex items-center">
516
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Patient">
517
+ <div class="ml-4">
518
+ <h3 class="text-sm font-medium text-gray-900">Sarah Miller</h3>
519
+ <div class="flex items-center text-xs text-gray-500 mt-1">
520
+ <span>Last visit: 1 month ago</span>
521
+ <span class="mx-1">•</span>
522
+ <span class="text-red-600">High Cholesterol</span>
523
+ </div>
524
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
525
  </div>
526
+ </div>
527
+ </div>
528
+ </div>
529
+ </div>
530
  </div>
531
 
532
+ <!-- Charts and additional info -->
533
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
534
+ <!-- Patient Visits Chart -->
535
+ <div class="bg-white rounded-xl shadow p-6">
536
+ <div class="flex items-center justify-between mb-4">
537
+ <h2 class="text-lg font-semibold text-gray-800">Patient Visits (Last 7 Days)</h2>
538
+ <div class="relative">
539
+ <select class="appearance-none bg-gray-100 border border-gray-300 text-gray-700 py-1 px-3 pr-8 rounded-md leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm">
540
+ <option>This Week</option>
541
+ <option>Last Week</option>
542
+ <option>This Month</option>
543
+ </select>
544
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
545
+ <i class="fas fa-chevron-down text-xs"></i>
546
+ </div>
547
+ </div>
548
+ </div>
549
+ <div class="h-64">
550
+ <canvas id="visitsChart"></canvas>
551
+ </div>
552
  </div>
553
+
554
+ <!-- Prescriptions Status -->
555
+ <div class="bg-white rounded-xl shadow p-6">
556
+ <div class="flex items-center justify-between mb-4">
557
+ <h2 class="text-lg font-semibold text-gray-800">Prescriptions Status</h2>
558
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View All</button>
559
  </div>
560
+ <div class="space-y-4">
561
+ <!-- Prescription item -->
562
+ <div class="flex items-start">
563
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
564
+ <i class="fas fa-pills"></i>
565
+ </div>
566
+ <div class="ml-4 flex-1">
567
+ <div class="flex items-center justify-between">
568
+ <h3 class="text-sm font-medium text-gray-900">Atorvastatin 20mg</h3>
569
+ <span class="text-xs font-medium bg-green-100 text-green-800 px-2 py-1 rounded-full">Completed</span>
570
+ </div>
571
+ <p class="text-sm text-gray-500 mt-1">For: James Wilson - High cholesterol</p>
572
+ <div class="mt-1 flex items-center text-xs text-gray-500">
573
+ <i class="far fa-calendar-alt mr-1.5"></i>
574
+ <span>Issued: May 15, 2023</span>
575
+ </div>
576
+ </div>
577
+ </div>
578
+
579
+ <!-- Prescription item -->
580
+ <div class="flex items-start">
581
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600">
582
+ <i class="fas fa-pills"></i>
583
+ </div>
584
+ <div class="ml-4 flex-1">
585
+ <div class="flex items-center justify-between">
586
+ <h3 class="text-sm font-medium text-gray-900">Metformin 500mg</h3>
587
+ <span class="text-xs font-medium bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">Pending</span>
588
+ </div>
589
+ <p class="text-sm text-gray-500 mt-1">For: Lisa Thompson - Type 2 Diabetes</p>
590
+ <div class="mt-1 flex items-center text-xs text-gray-500">
591
+ <i class="far fa-calendar-alt mr-1.5"></i>
592
+ <span>Issued: May 18, 2023</span>
593
+ </div>
594
+ </div>
595
+ </div>
596
+
597
+ <!-- Prescription item -->
598
+ <div class="flex items-start">
599
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-red-100 flex items-center justify-center text-red-600">
600
+ <i class="fas fa-pills"></i>
601
+ </div>
602
+ <div class="ml-4 flex-1">
603
+ <div class="flex items-center justify-between">
604
+ <h3 class="text-sm font-medium text-gray-900">Lisinopril 10mg</h3>
605
+ <span class="text-xs font-medium bg-red-100 text-red-800 px-2 py-1 rounded-full">Overdue</span>
606
+ </div>
607
+ <p class="text-sm text-gray-500 mt-1">For: Robert Taylor - Hypertension</p>
608
+ <div class="mt-1 flex items-center text-xs text-gray-500">
609
+ <i class="far fa-calendar-alt mr-1.5"></i>
610
+ <span>Issued: May 10, 2023</span>
611
+ </div>
612
+ </div>
613
+ </div>
614
  </div>
615
  </div>
616
  </div>
617
  </div>
618
+ </div>
619
  </div>
620
+
621
+ <!-- Notification panel -->
622
+ <div class="fixed inset-0 flex items-end justify-end px-4 py-6 pointer-events-none z-50" id="notification-panel">
623
+ <!-- Notification example (would be dynamically added) -->
624
+ <!--
625
+ <div class="max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto notification-slide mb-2">
626
+ <div class="rounded-lg shadow-xs overflow-hidden">
627
+ <div class="p-4">
628
+ <div class="flex items-start">
629
+ <div class="flex-shrink-0">
630
+ <i class="fas fa-check-circle text-green-400"></i>
631
+ </div>
632
+ <div class="ml-3 w-0 flex-1 pt-0.5">
633
+ <p class="text-sm font-medium text-gray-900">Appointment confirmed</p>
634
+ <p class="mt-1 text-sm text-gray-500">Michael Brown at 9:30 AM today</p>
635
+ </div>
636
+ <div class="ml-4 flex-shrink-0 flex">
637
+ <button class="inline-flex text-gray-400 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150">
638
+ <i class="fas fa-times"></i>
639
+ </button>
640
+ </div>
641
+ </div>
642
+ </div>
643
+ </div>
644
  </div>
645
+ -->
646
  </div>
647
+
648
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
649
  <script>
650
+ // Mobile sidebar toggle
651
+ document.getElementById('open-sidebar').addEventListener('click', function() {
652
+ document.getElementById('mobile-sidebar').style.display = 'flex';
653
+ });
654
 
655
+ document.getElementById('close-sidebar').addEventListener('click', function() {
656
+ document.getElementById('mobile-sidebar').style.display = 'none';
657
  });
 
 
 
 
658
 
659
+ document.getElementById('sidebar-backdrop').addEventListener('click', function() {
660
+ document.getElementById('mobile-sidebar').style.display = 'none';
661
  });
662
+
663
+ // User dropdown toggle
664
+ document.getElementById('user-menu').addEventListener('click', function() {
665
+ const dropdown = document.getElementById('user-dropdown');
666
+ if (dropdown.classList.contains('hidden')) {
667
+ dropdown.classList.remove('hidden');
668
+ } else {
669
+ dropdown.classList.add('hidden');
670
  }
671
  });
 
 
 
 
672
 
673
+ // Close dropdown when clicking outside
674
+ document.addEventListener('click', function(event) {
675
+ const dropdown = document.getElementById('user-dropdown');
676
+ const userMenu = document.getElementById('user-menu');
677
+
678
+ if (!userMenu.contains(event.target) && !dropdown.contains(event.target)) {
679
+ dropdown.classList.add('hidden');
680
+ }
681
  });
682
+
683
+ // Sample notification
684
+ function showNotification(title, message, type = 'info') {
685
+ const icons = {
686
+ 'success': 'fas fa-check-circle text-green-400',
687
+ 'error': 'fas fa-exclamation-circle text-red-400',
688
+ 'warning': 'fas fa-exclamation-triangle text-yellow-400',
689
+ 'info': 'fas fa-info-circle text-blue-400'
690
+ };
691
+
692
+ const notification = document.createElement('div');
693
+ notification.className = 'max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto notification-slide mb-2';
694
+ notification.innerHTML = `
695
+ <div class="rounded-lg shadow-xs overflow-hidden">
696
+ <div class="p-4">
697
+ <div class="flex items-start">
698
+ <div class="flex-shrink-0">
699
+ <i class="${icons[type]}"></i>
700
+ </div>
701
+ <div class="ml-3 w-0 flex-1 pt-0.5">
702
+ <p class="text-sm font-medium text-gray-900">${title}</p>
703
+ <p class="mt-1 text-sm text-gray-500">${message}</p>
704
+ </div>
705
+ <div class="ml-4 flex-shrink-0 flex">
706
+ <button class="inline-flex text-gray-400 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 close-notification">
707
+ <i class="fas fa-times"></i>
708
+ </button>
709
+ </div>
710
+ </div>
711
+ </div>
712
+ </div>
713
+ `;
714
+
715
+ document.getElementById('notification-panel').appendChild(notification);
716
+
717
+ // Auto remove after 5 seconds
718
+ setTimeout(() => {
719
+ notification.remove();
720
+ }, 5000);
721
+
722
+ // Close button
723
+ notification.querySelector('.close-notification').addEventListener('click', function() {
724
+ notification.remove();
725
+ });
726
  }
727
+
728
+ // Sample notifications - would be triggered by actual events in a real app
729
+ setTimeout(() => {
730
+ showNotification('New Message', 'You have a new message from patient Lisa Thompson', 'info');
731
+ }, 1000);
732
+
733
+ setTimeout(() => {
734
+ showNotification('Appointment Reminder', 'Your next appointment starts in 15 minutes', 'warning');
735
+ }, 3000);
736
+
737
+ // Initialize charts
738
+ document.addEventListener('DOMContentLoaded', function() {
739
+ // Patient Visits Chart
740
+ const visitsCtx = document.getElementById('visitsChart').getContext('2d');
741
+ const visitsChart = new Chart(visitsCtx, {
742
+ type: 'bar',
743
+ data: {
744
+ labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
745
+ datasets: [{
746
+ label: 'Patient Visits',
747
+ data: [12, 19, 8, 15, 22, 5, 3],
748
+ backgroundColor: '#3B82F6',
749
+ borderColor: '#3B82F6',
750
+ borderWidth: 1
751
+ }]
752
+ },
753
+ options: {
754
+ responsive: true,
755
+ maintainAspectRatio: false,
756
+ scales: {
757
+ y: {
758
+ beginAtZero: true,
759
+ grid: {
760
+ drawBorder: false
761
+ }
762
+ },
763
+ x: {
764
+ grid: {
765
+ display: false
766
+ }
767
+ }
768
+ },
769
+ plugins: {
770
+ legend: {
771
+ display: false
772
+ }
773
+ }
774
+ }
775
+ });
776
+ });
777
  </script>
778
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=thors1/doctor-admin" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
779
  </html>