Hugging Face's logo

Spaces:
SamABFlow
/
affablebpm-compliance-2
Running

App Files Community
SamABFlow commited on
Commit
7102c46
·
verified ·
1 Parent(s): e3023d9

Healthcare Compliance Management UI/UX Structure Stage 1: Compliance Setup Wizard Compliance Onboarding • - User Role: Compliance Officer / Administrator • - Accreditation Selector (e.g., JCAHO, NCQA, CMS, URAC) • - Questionnaire: Type of Facility, Services, States of Operation • - Smart Mapping: Lists relevant compliance areas & associated documentation • - Save & Resume Later option • - Visual timeline of setup progress Requirements Summary • - Auto-generated checklist • - Due dates with color-coded urgency indicators • - Role assignment (e.g., Legal Review, Policy Owner) Stage 2: Documentation & Legal Review Document Hub • - Upload templates or generate using AI • - Tags by Compliance Area, Accreditation, Department • - Status: Draft, In Review, Finalized Legal Review Workflow • - Assign to legal team • - Inline annotation and comments • - Approval flow with eSignature option • - Audit trail and version history Stage 3: Submission & Approval Tracking Compliance Submission Center • - Pre-filled forms based on accreditation body • - Submission method (auto-email, portal integration, manual) • - Status tracker per accreditation requirement • - Alerts for missing documentation Approval Tracker • - Timeline of submitted documents • - Approval status (Pending, Approved, Rejected) • - Comments from reviewing authority Stage 4: Operational Implementation Policy & Workflow Rollout • - Link approved policies to departments/processes • - Notification engine to inform stakeholders • - Embed SOPs and policy documents into relevant workflows Departmental Compliance Dashboard • - Status of each department’s compliance • - Linked documents and audit logs • - Flagged issues or overdue implementations Stage 5: Risk Monitoring & Incident Prevention Compliance Risk Map • - Interactive visualization of all back-office processes • - Risk rating & potential for compliance incidents • - Auto-highlight based on incident history or control failures Incident Tracker • - Log new incidents • - Root cause categorization (human error, system gap, outdated policy) • - Mitigation actions and status • - Links to possible fines associated with each type Stage 6: Fines Analysis & Benchmarking Fines & Penalties Explorer • - Search by regulation, accreditation, geography, and incident type • - Filters: Time period, Facility type, Dollar range • - Show similar public enforcement cases and resolution steps Root Cause Insights • - AI-generated summary of similar fines and root causes • - Recommendations to avoid similar issues • - Crosswalk to internal process or SOP updates needed Stage 7: Training Management Training Needs Matrix • - Map training requirements to roles (e.g., billing, admin, compliance) • - Auto-generate training plan based on gaps and incidents Training Scheduler & Tracker • - Assign training courses (manual/linked LMS) • - Reminders and due dates • - Completion status, scores, and certificates • - Report export for audits Stage 8: Continuous Monitoring & Audit Readiness Compliance Pulse Dashboard • - Real-time compliance scores • - Upcoming deadlines, expiring documents • - Training completion rates • - Alerts on non-compliance risks Audit Center • - Audit trail across all compliance workflows • - Export-ready reports (by body, process, department) • - Checklists and reviewer notes Admin / Settings Admin Settings • - Role-based access control • - Notification preferences • - Accreditation body master data • - System integrations (LMS, Document Management, Reporting) Use the Aptos or Calibri font and #0A829D for the darker teal color, #2c97a7 for lighter teal - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +639 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Affablebpm Compliance 2
3
- emoji: 🏢
4
- colorFrom: pink
5
- colorTo: purple
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: affablebpm-compliance-2
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: green
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,639 @@
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>HealthComply | Healthcare Compliance Management</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Calibri:wght@400;500;700&display=swap" rel="stylesheet">
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ body {
12
+ font-family: 'Calibri', sans-serif;
13
+ }
14
+ .sidebar-item.active {
15
+ border-left: 4px solid #0A829D;
16
+ background-color: rgba(10, 130, 157, 0.1);
17
+ }
18
+ .progress-dot.active {
19
+ background-color: #0A829D;
20
+ border-color: #0A829D;
21
+ }
22
+ .progress-dot.completed {
23
+ background-color: #10B981;
24
+ border-color: #10B981;
25
+ }
26
+ .risk-high {
27
+ background-color: #FEE2E2;
28
+ border-left: 4px solid #EF4444;
29
+ }
30
+ .risk-medium {
31
+ background-color: #FEF3C7;
32
+ border-left: 4px solid #F59E0B;
33
+ }
34
+ .risk-low {
35
+ background-color: #D1FAE5;
36
+ border-left: 4px solid #10B981;
37
+ }
38
+ .teal-gradient {
39
+ background: linear-gradient(135deg, #0A829D 0%, #2c97a7 100%);
40
+ }
41
+ </style>
42
+ </head>
43
+ <body class="bg-gray-50">
44
+ <div class="flex h-screen overflow-hidden">
45
+ <!-- Sidebar -->
46
+ <div class="hidden md:flex md:flex-shrink-0">
47
+ <div class="flex flex-col w-64 bg-white border-r border-gray-200">
48
+ <div class="flex items-center justify-center h-16 px-4 teal-gradient">
49
+ <div class="flex items-center">
50
+ <i class="fas fa-shield-alt text-white mr-2 text-xl"></i>
51
+ <span class="text-white font-bold text-xl">HealthComply</span>
52
+ </div>
53
+ </div>
54
+ <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto">
55
+ <div class="space-y-1">
56
+ <div class="sidebar-item active px-3 py-2 rounded-md text-sm font-medium text-gray-900 bg-gray-100">
57
+ <div class="flex items-center">
58
+ <i class="fas fa-home mr-3 text-gray-700"></i>
59
+ Dashboard
60
+ </div>
61
+ </div>
62
+ <div class="sidebar-item px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50">
63
+ <div class="flex items-center">
64
+ <i class="fas fa-magic mr-3"></i>
65
+ Compliance Setup
66
+ </div>
67
+ </div>
68
+ <div class="sidebar-item px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50">
69
+ <div class="flex items-center">
70
+ <i class="fas fa-file-alt mr-3"></i>
71
+ Documentation
72
+ </div>
73
+ </div>
74
+ <div class="sidebar-item px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50">
75
+ <div class="flex items-center">
76
+ <i class="fas fa-paper-plane mr-3"></i>
77
+ Submission Center
78
+ </div>
79
+ </div>
80
+ <div class="sidebar-item px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50">
81
+ <div class="flex items-center">
82
+ <i class="fas fa-cogs mr-3"></i>
83
+ Implementation
84
+ </div>
85
+ </div>
86
+ <div class="sidebar-item px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50">
87
+ <div class="flex items-center">
88
+ <i class="fas fa-exclamation-triangle mr-3"></i>
89
+ Risk Monitoring
90
+ </div>
91
+ </div>
92
+ <div class="sidebar-item px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50">
93
+ <div class="flex items-center">
94
+ <i class="fas fa-chart-line mr-3"></i>
95
+ Analytics
96
+ </div>
97
+ </div>
98
+ <div class="sidebar-item px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50">
99
+ <div class="flex items-center">
100
+ <i class="fas fa-graduation-cap mr-3"></i>
101
+ Training
102
+ </div>
103
+ </div>
104
+ <div class="sidebar-item px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50">
105
+ <div class="flex items-center">
106
+ <i class="fas fa-clipboard-check mr-3"></i>
107
+ Audit Center
108
+ </div>
109
+ </div>
110
+ </div>
111
+
112
+ <div class="mt-auto mb-4">
113
+ <div class="px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50">
114
+ <div class="flex items-center">
115
+ <i class="fas fa-cog mr-3"></i>
116
+ Settings
117
+ </div>
118
+ </div>
119
+ <div class="px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50">
120
+ <div class="flex items-center">
121
+ <i class="fas fa-question-circle mr-3"></i>
122
+ Help & Support
123
+ </div>
124
+ </div>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ </div>
129
+
130
+ <!-- Main content -->
131
+ <div class="flex flex-col flex-1 overflow-hidden">
132
+ <!-- Top navigation -->
133
+ <div class="flex items-center justify-between h-16 px-4 bg-white border-b border-gray-200">
134
+ <div class="flex items-center">
135
+ <button class="md:hidden text-gray-500 focus:outline-none">
136
+ <i class="fas fa-bars"></i>
137
+ </button>
138
+ <h1 class="ml-4 text-xl font-semibold text-gray-800">Compliance Dashboard</h1>
139
+ </div>
140
+
141
+ <div class="flex items-center space-x-4">
142
+ <div class="relative">
143
+ <button class="text-gray-500 focus:outline-none">
144
+ <i class="fas fa-bell"></i>
145
+ <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
146
+ </button>
147
+ </div>
148
+ <div class="relative">
149
+ <button class="flex items-center text-gray-500 focus:outline-none">
150
+ <i class="fas fa-envelope mr-2"></i>
151
+ <span class="absolute top-0 right-0 w-2 h-2 bg-blue-500 rounded-full"></span>
152
+ </button>
153
+ </div>
154
+ <div class="relative">
155
+ <div class="flex items-center">
156
+ <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User profile">
157
+ <span class="ml-2 text-sm font-medium text-gray-700">Sarah Johnson</span>
158
+ </div>
159
+ </div>
160
+ </div>
161
+ </div>
162
+
163
+ <!-- Main content area -->
164
+ <div class="flex-1 overflow-auto p-4">
165
+ <!-- Welcome Banner -->
166
+ <div class="teal-gradient rounded-lg p-6 mb-6 text-white">
167
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center">
168
+ <div>
169
+ <h2 class="text-2xl font-bold mb-2">Welcome back, Sarah!</h2>
170
+ <p class="mb-4">You have 3 high priority compliance tasks to complete this week.</p>
171
+ <button class="bg-white text-teal-800 px-4 py-2 rounded-md font-medium hover:bg-gray-100 transition duration-150">
172
+ View Tasks
173
+ </button>
174
+ </div>
175
+ <div class="mt-4 md:mt-0">
176
+ <div class="flex items-center">
177
+ <div class="mr-4 text-center">
178
+ <div class="text-3xl font-bold">87%</div>
179
+ <div class="text-sm opacity-80">Compliance Score</div>
180
+ </div>
181
+ <div class="w-16 h-16">
182
+ <svg viewBox="0 0 36 36" class="circular-chart">
183
+ <path class="circle-bg" d="M18 2.0845
184
+ a 15.9155 15.9155 0 0 1 0 31.831
185
+ a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#E5E7EB" stroke-width="3"/>
186
+ <path class="circle" stroke-dasharray="87, 100" d="M18 2.0845
187
+ a 15.9155 15.9155 0 0 1 0 31.831
188
+ a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"/>
189
+ </svg>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </div>
194
+ </div>
195
+
196
+ <!-- Compliance Setup Wizard -->
197
+ <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
198
+ <div class="flex justify-between items-center mb-6">
199
+ <h2 class="text-xl font-semibold text-gray-800">Compliance Setup Wizard</h2>
200
+ <span class="text-sm text-gray-500">Stage 1 of 8</span>
201
+ </div>
202
+
203
+ <div class="mb-8">
204
+ <div class="flex justify-between mb-2">
205
+ <div class="flex space-x-6">
206
+ <div class="flex flex-col items-center">
207
+ <div class="progress-dot active w-6 h-6 rounded-full border-2 border-gray-300 flex items-center justify-center">
208
+ <span class="text-xs font-bold">1</span>
209
+ </div>
210
+ <span class="text-xs mt-1 font-medium">Onboarding</span>
211
+ </div>
212
+ <div class="flex flex-col items-center">
213
+ <div class="progress-dot w-6 h-6 rounded-full border-2 border-gray-300 flex items-center justify-center">
214
+ <span class="text-xs font-bold">2</span>
215
+ </div>
216
+ <span class="text-xs mt-1 text-gray-500">Requirements</span>
217
+ </div>
218
+ <div class="flex flex-col items-center">
219
+ <div class="progress-dot w-6 h-6 rounded-full border-2 border-gray-300 flex items-center justify-center">
220
+ <span class="text-xs font-bold">3</span>
221
+ </div>
222
+ <span class="text-xs mt-1 text-gray-500">Documentation</span>
223
+ </div>
224
+ <div class="flex flex-col items-center">
225
+ <div class="progress-dot w-6 h-6 rounded-full border-2 border-gray-300 flex items-center justify-center">
226
+ <span class="text-xs font-bold">4</span>
227
+ </div>
228
+ <span class="text-xs mt-1 text-gray-500">Submission</span>
229
+ </div>
230
+ <div class="flex flex-col items-center">
231
+ <div class="progress-dot w-6 h-6 rounded-full border-2 border-gray-300 flex items-center justify-center">
232
+ <span class="text-xs font-bold">5</span>
233
+ </div>
234
+ <span class="text-xs mt-1 text-gray-500">Implementation</span>
235
+ </div>
236
+ </div>
237
+ </div>
238
+ <div class="w-full bg-gray-200 rounded-full h-1.5">
239
+ <div class="bg-teal-600 h-1.5 rounded-full" style="width: 12%"></div>
240
+ </div>
241
+ </div>
242
+
243
+ <div class="mb-6">
244
+ <h3 class="text-lg font-medium text-gray-800 mb-4">Compliance Onboarding</h3>
245
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
246
+ <div>
247
+ <label class="block text-sm font-medium text-gray-700 mb-1">Accreditation Body</label>
248
+ <select class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-teal-500">
249
+ <option>Select accreditation</option>
250
+ <option>JCAHO</option>
251
+ <option>NCQA</option>
252
+ <option>CMS</option>
253
+ <option>URAC</option>
254
+ <option>HIPAA</option>
255
+ </select>
256
+ </div>
257
+ <div>
258
+ <label class="block text-sm font-medium text-gray-700 mb-1">Facility Type</label>
259
+ <select class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-teal-500">
260
+ <option>Select facility type</option>
261
+ <option>Hospital</option>
262
+ <option>Clinic</option>
263
+ <option>Long-term Care</option>
264
+ <option>Home Health</option>
265
+ <option>Laboratory</option>
266
+ </select>
267
+ </div>
268
+ <div>
269
+ <label class="block text-sm font-medium text-gray-700 mb-1">Services Offered</label>
270
+ <div class="mt-1 space-y-2">
271
+ <div class="flex items-center">
272
+ <input type="checkbox" class="h-4 w-4 text-teal-600 focus:ring-teal-500 border-gray-300 rounded">
273
+ <label class="ml-2 text-sm text-gray-700">Emergency Services</label>
274
+ </div>
275
+ <div class="flex items-center">
276
+ <input type="checkbox" class="h-4 w-4 text-teal-600 focus:ring-teal-500 border-gray-300 rounded">
277
+ <label class="ml-2 text-sm text-gray-700">Surgical Services</label>
278
+ </div>
279
+ <div class="flex items-center">
280
+ <input type="checkbox" class="h-4 w-4 text-teal-600 focus:ring-teal-500 border-gray-300 rounded">
281
+ <label class="ml-2 text-sm text-gray-700">Diagnostic Imaging</label>
282
+ </div>
283
+ </div>
284
+ </div>
285
+ <div>
286
+ <label class="block text-sm font-medium text-gray-700 mb-1">States of Operation</label>
287
+ <select multiple class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-teal-500 h-24">
288
+ <option>California</option>
289
+ <option>New York</option>
290
+ <option>Texas</option>
291
+ <option>Florida</option>
292
+ <option>Illinois</option>
293
+ <option>Pennsylvania</option>
294
+ </select>
295
+ </div>
296
+ </div>
297
+ </div>
298
+
299
+ <div class="flex justify-between items-center pt-4 border-t border-gray-200">
300
+ <button class="text-gray-600 hover:text-gray-800 flex items-center">
301
+ <i class="fas fa-save mr-2"></i> Save & Resume Later
302
+ </button>
303
+ <button class="bg-teal-600 text-white px-4 py-2 rounded-md font-medium hover:bg-teal-700 transition duration-150">
304
+ Continue to Requirements <i class="fas fa-arrow-right ml-2"></i>
305
+ </button>
306
+ </div>
307
+ </div>
308
+
309
+ <!-- Quick Actions & Status -->
310
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
311
+ <!-- Documentation Status -->
312
+ <div class="bg-white rounded-lg shadow-sm p-6">
313
+ <div class="flex justify-between items-center mb-4">
314
+ <h3 class="font-medium text-gray-800">Documentation Status</h3>
315
+ <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">3 New</span>
316
+ </div>
317
+ <div class="space-y-3">
318
+ <div class="flex items-center justify-between">
319
+ <div class="flex items-center">
320
+ <div class="w-2 h-2 bg-red-500 rounded-full mr-2"></div>
321
+ <span class="text-sm">HIPAA Policy Update</span>
322
+ </div>
323
+ <span class="text-xs text-gray-500">Due Today</span>
324
+ </div>
325
+ <div class="flex items-center justify-between">
326
+ <div class="flex items-center">
327
+ <div class="w-2 h-2 bg-yellow-500 rounded-full mr-2"></div>
328
+ <span class="text-sm">JCAHO Documentation</span>
329
+ </div>
330
+ <span class="text-xs text-gray-500">Due in 3 days</span>
331
+ </div>
332
+ <div class="flex items-center justify-between">
333
+ <div class="flex items-center">
334
+ <div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div>
335
+ <span class="text-sm">Staff Training Records</span>
336
+ </div>
337
+ <span class="text-xs text-gray-500">Completed</span>
338
+ </div>
339
+ </div>
340
+ <button class="mt-4 w-full text-center text-teal-600 text-sm font-medium hover:text-teal-800">
341
+ View All Documents <i class="fas fa-chevron-right ml-1"></i>
342
+ </button>
343
+ </div>
344
+
345
+ <!-- Risk Alerts -->
346
+ <div class="bg-white rounded-lg shadow-sm p-6">
347
+ <div class="flex justify-between items-center mb-4">
348
+ <h3 class="font-medium text-gray-800">Risk Alerts</h3>
349
+ <span class="text-xs bg-red-100 text-red-800 px-2 py-1 rounded-full">2 Critical</span>
350
+ </div>
351
+ <div class="space-y-3">
352
+ <div class="p-2 rounded risk-high">
353
+ <div class="flex items-center justify-between">
354
+ <span class="text-sm font-medium">Medication Errors</span>
355
+ <span class="text-xs bg-white text-red-600 px-1 rounded">High</span>
356
+ </div>
357
+ <p class="text-xs text-gray-600 mt-1">3 incidents reported this week</p>
358
+ </div>
359
+ <div class="p-2 rounded risk-medium">
360
+ <div class="flex items-center justify-between">
361
+ <span class="text-sm font-medium">Patient Data Access</span>
362
+ <span class="text-xs bg-white text-yellow-600 px-1 rounded">Medium</span>
363
+ </div>
364
+ <p class="text-xs text-gray-600 mt-1">Unauthorized access detected</p>
365
+ </div>
366
+ </div>
367
+ <button class="mt-4 w-full text-center text-teal-600 text-sm font-medium hover:text-teal-800">
368
+ View Risk Dashboard <i class="fas fa-chevron-right ml-1"></i>
369
+ </button>
370
+ </div>
371
+
372
+ <!-- Training Needs -->
373
+ <div class="bg-white rounded-lg shadow-sm p-6">
374
+ <div class="flex justify-between items-center mb-4">
375
+ <h3 class="font-medium text-gray-800">Training Needs</h3>
376
+ <span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded-full">5 Overdue</span>
377
+ </div>
378
+ <div class="space-y-3">
379
+ <div class="flex items-center justify-between">
380
+ <div class="flex items-center">
381
+ <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-2">
382
+ <i class="fas fa-user-md text-blue-600 text-sm"></i>
383
+ </div>
384
+ <div>
385
+ <p class="text-sm">Clinical Staff</p>
386
+ <p class="text-xs text-gray-500">Infection Control</p>
387
+ </div>
388
+ </div>
389
+ <span class="text-xs text-red-600">Overdue</span>
390
+ </div>
391
+ <div class="flex items-center justify-between">
392
+ <div class="flex items-center">
393
+ <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-2">
394
+ <i class="fas fa-user-nurse text-green-600 text-sm"></i>
395
+ </div>
396
+ <div>
397
+ <p class="text-sm">Nursing Staff</p>
398
+ <p class="text-xs text-gray-500">HIPAA Refresher</p>
399
+ </div>
400
+ </div>
401
+ <span class="text-xs text-yellow-600">Due Soon</span>
402
+ </div>
403
+ </div>
404
+ <button class="mt-4 w-full text-center text-teal-600 text-sm font-medium hover:text-teal-800">
405
+ Schedule Training <i class="fas fa-chevron-right ml-1"></i>
406
+ </button>
407
+ </div>
408
+ </div>
409
+
410
+ <!-- Compliance Timeline -->
411
+ <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
412
+ <div class="flex justify-between items-center mb-6">
413
+ <h2 class="text-xl font-semibold text-gray-800">Compliance Timeline</h2>
414
+ <div class="flex space-x-2">
415
+ <button class="px-3 py-1 text-sm border border-gray-300 rounded-md hover:bg-gray-50">Week</button>
416
+ <button class="px-3 py-1 text-sm border border-gray-300 rounded-md hover:bg-gray-50">Month</button>
417
+ <button class="px-3 py-1 text-sm bg-teal-600 text-white rounded-md hover:bg-teal-700">Quarter</button>
418
+ </div>
419
+ </div>
420
+
421
+ <div class="overflow-x-auto">
422
+ <table class="min-w-full divide-y divide-gray-200">
423
+ <thead class="bg-gray-50">
424
+ <tr>
425
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Milestone</th>
426
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
427
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Due Date</th>
428
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Owner</th>
429
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
430
+ </tr>
431
+ </thead>
432
+ <tbody class="bg-white divide-y divide-gray-200">
433
+ <tr>
434
+ <td class="px-6 py-4 whitespace-nowrap">
435
+ <div class="flex items-center">
436
+ <div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center">
437
+ <i class="fas fa-file-alt text-blue-600"></i>
438
+ </div>
439
+ <div class="ml-4">
440
+ <div class="text-sm font-medium text-gray-900">Annual Policy Review</div>
441
+ <div class="text-sm text-gray-500">HIPAA Compliance</div>
442
+ </div>
443
+ </div>
444
+ </td>
445
+ <td class="px-6 py-4 whitespace-nowrap">
446
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Overdue</span>
447
+ </td>
448
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jun 15, 2023</td>
449
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Legal Team</td>
450
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
451
+ <a href="#" class="text-teal-600 hover:text-teal-900">Remind</a>
452
+ </td>
453
+ </tr>
454
+ <tr>
455
+ <td class="px-6 py-4 whitespace-nowrap">
456
+ <div class="flex items-center">
457
+ <div class="flex-shrink-0 h-10 w-10 bg-purple-100 rounded-full flex items-center justify-center">
458
+ <i class="fas fa-chart-bar text-purple-600"></i>
459
+ </div>
460
+ <div class="ml-4">
461
+ <div class="text-sm font-medium text-gray-900">Quarterly Audit</div>
462
+ <div class="text-sm text-gray-500">JCAHO Standards</div>
463
+ </div>
464
+ </div>
465
+ </td>
466
+ <td class="px-6 py-4 whitespace-nowrap">
467
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">In Progress</span>
468
+ </td>
469
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jun 30, 2023</td>
470
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Compliance Team</td>
471
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
472
+ <a href="#" class="text-teal-600 hover:text-teal-900">View</a>
473
+ </td>
474
+ </tr>
475
+ <tr>
476
+ <td class="px-6 py-4 whitespace-nowrap">
477
+ <div class="flex items-center">
478
+ <div class="flex-shrink-0 h-10 w-10 bg-green-100 rounded-full flex items-center justify-center">
479
+ <i class="fas fa-graduation-cap text-green-600"></i>
480
+ </div>
481
+ <div class="ml-4">
482
+ <div class="text-sm font-medium text-gray-900">Staff Training</div>
483
+ <div class="text-sm text-gray-500">Infection Control</div>
484
+ </div>
485
+ </div>
486
+ </td>
487
+ <td class="px-6 py-4 whitespace-nowrap">
488
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Scheduled</span>
489
+ </td>
490
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jul 10, 2023</td>
491
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">HR Department</td>
492
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
493
+ <a href="#" class="text-teal-600 hover:text-teal-900">Details</a>
494
+ </td>
495
+ </tr>
496
+ </tbody>
497
+ </table>
498
+ </div>
499
+ </div>
500
+
501
+ <!-- Department Compliance -->
502
+ <div class="bg-white rounded-lg shadow-sm p-6">
503
+ <div class="flex justify-between items-center mb-6">
504
+ <h2 class="text-xl font-semibold text-gray-800">Department Compliance Status</h2>
505
+ <button class="text-teal-600 hover:text-teal-800 text-sm font-medium">
506
+ View Full Report <i class="fas fa-chevron-right ml-1"></i>
507
+ </button>
508
+ </div>
509
+
510
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
511
+ <div class="border border-gray-200 rounded-lg p-4">
512
+ <div class="flex justify-between items-start">
513
+ <div>
514
+ <h3 class="text-sm font-medium text-gray-500">Clinical Services</h3>
515
+ <p class="text-2xl font-bold mt-1">92%</p>
516
+ </div>
517
+ <div class="w-12 h-12">
518
+ <svg viewBox="0 0 36 36" class="circular-chart">
519
+ <path class="circle-bg" d="M18 2.0845
520
+ a 15.9155 15.9155 0 0 1 0 31.831
521
+ a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#E5E7EB" stroke-width="3"/>
522
+ <path class="circle" stroke-dasharray="92, 100" d="M18 2.0845
523
+ a 15.9155 15.9155 0 0 1 0 31.831
524
+ a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#10B981" stroke-width="3" stroke-linecap="round"/>
525
+ </svg>
526
+ </div>
527
+ </div>
528
+ <div class="mt-2">
529
+ <div class="flex items-center text-sm text-gray-500">
530
+ <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
531
+ <span>On track</span>
532
+ </div>
533
+ </div>
534
+ </div>
535
+
536
+ <div class="border border-gray-200 rounded-lg p-4">
537
+ <div class="flex justify-between items-start">
538
+ <div>
539
+ <h3 class="text-sm font-medium text-gray-500">Billing</h3>
540
+ <p class="text-2xl font-bold mt-1">85%</p>
541
+ </div>
542
+ <div class="w-12 h-12">
543
+ <svg viewBox="0 0 36 36" class="circular-chart">
544
+ <path class="circle-bg" d="M18 2.0845
545
+ a 15.9155 15.9155 0 0 1 0 31.831
546
+ a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#E5E7EB" stroke-width="3"/>
547
+ <path class="circle" stroke-dasharray="85, 100" d="M18 2.0845
548
+ a 15.9155 15.9155 0 0 1 0 31.831
549
+ a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#3B82F6" stroke-width="3" stroke-linecap="round"/>
550
+ </svg>
551
+ </div>
552
+ </div>
553
+ <div class="mt-2">
554
+ <div class="flex items-center text-sm text-gray-500">
555
+ <span class="w-2 h-2 bg-yellow-500 rounded-full mr-2"></span>
556
+ <span>2 issues</span>
557
+ </div>
558
+ </div>
559
+ </div>
560
+
561
+ <div class="border border-gray-200 rounded-lg p-4">
562
+ <div class="flex justify-between items-start">
563
+ <div>
564
+ <h3 class="text-sm font-medium text-gray-500">IT Services</h3>
565
+ <p class="text-2xl font-bold mt-1">78%</p>
566
+ </div>
567
+ <div class="w-12 h-12">
568
+ <svg viewBox="0 0 36 36" class="circular-chart">
569
+ <path class="circle-bg" d="M18 2.0845
570
+ a 15.9155 15.9155 0 0 1 0 31.831
571
+ a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#E5E7EB" stroke-width="3"/>
572
+ <path class="circle" stroke-dasharray="78, 100" d="M18 2.0845
573
+ a 15.9155 15.9155 0 0 1 0 31.831
574
+ a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#F59E0B" stroke-width="3" stroke-linecap="round"/>
575
+ </svg>
576
+ </div>
577
+ </div>
578
+ <div class="mt-2">
579
+ <div class="flex items-center text-sm text-gray-500">
580
+ <span class="w-2 h-2 bg-red-500 rounded-full mr-2"></span>
581
+ <span>Security audit needed</span>
582
+ </div>
583
+ </div>
584
+ </div>
585
+
586
+ <div class="border border-gray-200 rounded-lg p-4">
587
+ <div class="flex justify-between items-start">
588
+ <div>
589
+ <h3 class="text-sm font-medium text-gray-500">Administration</h3>
590
+ <p class="text-2xl font-bold mt-1">95%</p>
591
+ </div>
592
+ <div class="w-12 h-12">
593
+ <svg viewBox="0 0 36 36" class="circular-chart">
594
+ <path class="circle-bg" d="M18 2.0845
595
+ a 15.9155 15.9155 0 0 1 0 31.831
596
+ a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#E5E7EB" stroke-width="3"/>
597
+ <path class="circle" stroke-dasharray="95, 100" d="M18 2.0845
598
+ a 15.9155 15.9155 0 0 1 0 31.831
599
+ a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#8B5CF6" stroke-width="3" stroke-linecap="round"/>
600
+ </svg>
601
+ </div>
602
+ </div>
603
+ <div class="mt-2">
604
+ <div class="flex items-center text-sm text-gray-500">
605
+ <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
606
+ <span>Fully compliant</span>
607
+ </div>
608
+ </div>
609
+ </div>
610
+ </div>
611
+ </div>
612
+ </div>
613
+ </div>
614
+ </div>
615
+
616
+ <script>
617
+ // Simple script to handle mobile menu toggle
618
+ document.addEventListener('DOMContentLoaded', function() {
619
+ const mobileMenuButton = document.querySelector('.md\\:hidden');
620
+ const sidebar = document.querySelector('.hidden.md\\:flex');
621
+
622
+ if (mobileMenuButton) {
623
+ mobileMenuButton.addEventListener('click', function() {
624
+ sidebar.classList.toggle('hidden');
625
+ });
626
+ }
627
+
628
+ // Add active class to sidebar items on click
629
+ const sidebarItems = document.querySelectorAll('.sidebar-item');
630
+ sidebarItems.forEach(item => {
631
+ item.addEventListener('click', function() {
632
+ sidebarItems.forEach(i => i.classList.remove('active', 'bg-gray-100', 'text-gray-900'));
633
+ this.classList.add('active', 'bg-gray-100', 'text-gray-900');
634
+ });
635
+ });
636
+ });
637
+ </script>
638
+ <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=SamABFlow/affablebpm-compliance-2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
639
+ </html>