Hugging Face's logo

Spaces:
balaji-detect
/
safetyguardian-sentinel
Running

App Files Community
balaji-detect commited on
Commit
0cf5ea8
·
verified ·
1 Parent(s): 768cebe

Generate interface for incidents, compliance, reports and training page as well

Browse files
Files changed (8) hide show
  1. compliance.html +434 -0
  2. incidents.html +157 -243
  3. index.html +2 -2
  4. report-generator.html +150 -0
  5. reports.html +248 -0
  6. safety-checklist.html +327 -0
  7. training-management.html +255 -0
  8. training.html +460 -0
compliance.html ADDED
@@ -0,0 +1,434 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Compliance | Safety Sentinel</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
12
+ </head>
13
+ <body class="bg-gray-50">
14
+ <div id="vanta-bg" class="fixed inset-0 -z-10"></div>
15
+
16
+ <!-- Navigation -->
17
+ <nav class="bg-white bg-opacity-90 backdrop-blur-md border-b border-gray-200 fixed w-full z-10">
18
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
19
+ <div class="flex justify-between h-16">
20
+ <div class="flex items-center">
21
+ <div class="flex-shrink-0 flex items-center">
22
+ <i data-feather="shield" class="h-8 w-8 text-blue-600"></i>
23
+ <span class="ml-2 text-xl font-bold text-gray-900">Safety Sentinel</span>
24
+ </div>
25
+ </div>
26
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
27
+ <a href="index.html" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Dashboard</a>
28
+ <a href="incidents.html" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Incidents</a>
29
+ <a href="compliance.html" class="text-blue-600 border-b-2 border-blue-600 px-1 pt-1 text-sm font-medium">Compliance</a>
30
+ <a href="reports.html" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Reports</a>
31
+ <a href="training.html" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Training</a>
32
+ </div>
33
+ <div class="flex items-center">
34
+ <a href="new-report.html" class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
35
+ <i data-feather="plus" class="h-4 w-4 inline mr-1"></i> New Report
36
+ </a>
37
+ <div class="ml-4 relative flex-shrink-0">
38
+ <button type="button" class="bg-white rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" id="user-menu">
39
+ <span class="sr-only">Open user menu</span>
40
+ <img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/42" alt="">
41
+ </button>
42
+ </div>
43
+ </div>
44
+ </div>
45
+ </div>
46
+ </nav>
47
+
48
+ <!-- Main Content -->
49
+ <div class="pt-24 pb-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
50
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8">
51
+ <div>
52
+ <h1 class="text-3xl font-bold text-gray-900">Compliance Management</h1>
53
+ <p class="mt-2 text-sm text-gray-600">Monitor regulatory compliance and safety standards</p>
54
+ </div>
55
+ <div class="mt-4 md:mt-0">
56
+ <div class="relative">
57
+ <select class="appearance-none bg-white border border-gray-300 rounded-md pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
58
+ <option>All Standards</option>
59
+ <option>OSHA</option>
60
+ <option>ISO 45001</option>
61
+ <option>NFPA</option>
62
+ <option>EPA</option>
63
+ </select>
64
+ <i data-feather="chevron-down" class="absolute right-3 top-2.5 h-4 w-4 text-gray-400"></i>
65
+ </div>
66
+ </div>
67
+ </div>
68
+
69
+ <!-- Compliance Overview -->
70
+ <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-8">
71
+ <div class="bg-white overflow-hidden shadow rounded-lg">
72
+ <div class="px-4 py-5 sm:p-6">
73
+ <div class="flex items-center">
74
+ <div class="flex-shrink-0 bg-green-500 rounded-md p-3">
75
+ <i data-feather="check-circle" class="h-6 w-6 text-white"></i>
76
+ </div>
77
+ <div class="ml-5 w-0 flex-1">
78
+ <dl>
79
+ <dt class="text-sm font-medium text-gray-500 truncate">Overall Compliance</dt>
80
+ <dd>
81
+ <div class="text-lg font-medium text-gray-900">94%</div>
82
+ </dd>
83
+ </dl>
84
+ </div>
85
+ </div>
86
+ <div class="mt-4">
87
+ <div class="border-t border-gray-200 pt-3">
88
+ <p class="text-xs text-gray-500">
89
+ <span class="text-green-600 font-semibold">1.3%</span> from last quarter
90
+ </p>
91
+ </div>
92
+ </div>
93
+ </div>
94
+ </div>
95
+ <div class="bg-white overflow-hidden shadow rounded-lg">
96
+ <div class="px-4 py-5 sm:p-6">
97
+ <div class="flex items-center">
98
+ <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
99
+ <i data-feather="file-text" class="h-6 w-6 text-white"></i>
100
+ </div>
101
+ <div class="ml-5 w-0 flex-1">
102
+ <dl>
103
+ <dt class="text-sm font-medium text-gray-500 truncate">Open Requirements</dt>
104
+ <dd>
105
+ <div class="text-lg font-medium text-gray-900">12</div>
106
+ </dd>
107
+ </dl>
108
+ </div>
109
+ </div>
110
+ <div class="mt-4">
111
+ <div class="border-t border-gray-200 pt-3">
112
+ <p class="text-xs text-gray-500">
113
+ <span class="text-red-600 font-semibold">3</span> critical
114
+ </p>
115
+ </div>
116
+ </div>
117
+ </div>
118
+ </div>
119
+ <div class="bg-white overflow-hidden shadow rounded-lg">
120
+ <div class="px-4 py-5 sm:p-6">
121
+ <div class="flex items-center">
122
+ <div class="flex-shrink-0 bg-orange-500 rounded-md p-3">
123
+ <i data-feather="clock" class="h-6 w-6 text-white"></i>
124
+ </div>
125
+ <div class="ml-5 w-0 flex-1">
126
+ <dl>
127
+ <dt class="text-sm font-medium text-gray-500 truncate">Upcoming Audits</dt>
128
+ <dd>
129
+ <div class="text-lg font-medium text-gray-900">2</div>
130
+ </dd>
131
+ </dl>
132
+ </div>
133
+ </div>
134
+ <div class="mt-4">
135
+ <div class="border-t border-gray-200 pt-3">
136
+ <p class="text-xs text-gray-500">
137
+ Next in <span class="font-semibold">14 days</span>
138
+ </p>
139
+ </div>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ <div class="bg-white overflow-hidden shadow rounded-lg">
144
+ <div class="px-4 py-5 sm:p-6">
145
+ <div class="flex items-center">
146
+ <div class="flex-shrink-0 bg-purple-500 rounded-md p-3">
147
+ <i data-feather="alert-triangle" class="h-6 w-6 text-white"></i>
148
+ </div>
149
+ <div class="ml-5 w-0 flex-1">
150
+ <dl>
151
+ <dt class="text-sm font-medium text-gray-500 truncate">Overdue Actions</dt>
152
+ <dd>
153
+ <div class="text-lg font-medium text-gray-900">5</div>
154
+ </dd>
155
+ </dl>
156
+ </div>
157
+ </div>
158
+ <div class="mt-4">
159
+ <div class="border-t border-gray-200 pt-3">
160
+ <p class="text-xs text-gray-500">
161
+ <span class="text-red-600 font-semibold">2</span> high priority
162
+ </p>
163
+ </div>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ </div>
168
+
169
+ <!-- Compliance Standards -->
170
+ <div class="bg-white shadow rounded-lg overflow-hidden mb-8">
171
+ <div class="px-6 py-4 border-b border-gray-200">
172
+ <h2 class="text-lg font-medium text-gray-900">Compliance Standards</h2>
173
+ </div>
174
+ <div class="divide-y divide-gray-200">
175
+ <div class="px-6 py-4 hover:bg-gray-50">
176
+ <div class="flex items-center justify-between">
177
+ <div class="flex items-center">
178
+ <div class="flex-shrink-0 bg-blue-100 p-3 rounded-md">
179
+ <i data-feather="file-text" class="h-5 w-5 text-blue-600"></i>
180
+ </div>
181
+ <div class="ml-4">
182
+ <h3 class="text-sm font-medium text-gray-900">OSHA 1910</h3>
183
+ <p class="text-sm text-gray-500">General Industry Standards</p>
184
+ </div>
185
+ </div>
186
+ <div class="flex items-center">
187
+ <div class="mr-8">
188
+ <span class="text-sm text-gray-500">Compliance</span>
189
+ <div class="flex items-center">
190
+ <div class="w-32 bg-gray-200 rounded-full h-2.5 mr-2">
191
+ <div class="bg-green-500 h-2.5 rounded-full" style="width: 97%"></div>
192
+ </div>
193
+ <span class="text-sm font-medium text-gray-900">97%</span>
194
+ </div>
195
+ </div>
196
+ <div class="flex items-center space-x-4">
197
+ <span class="text-sm text-gray-500">12 requirements</span>
198
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View</button>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ <div class="px-6 py-4 hover:bg-gray-50">
204
+ <div class="flex items-center justify-between">
205
+ <div class="flex items-center">
206
+ <div class="flex-shrink-0 bg-green-100 p-3 rounded-md">
207
+ <i data-feather="globe" class="h-5 w-5 text-green-600"></i>
208
+ </div>
209
+ <div class="ml-4">
210
+ <h3 class="text-sm font-medium text-gray-900">ISO 45001</h3>
211
+ <p class="text-sm text-gray-500">Occupational Health and Safety</p>
212
+ </div>
213
+ </div>
214
+ <div class="flex items-center">
215
+ <div class="mr-8">
216
+ <span class="text-sm text-gray-500">Compliance</span>
217
+ <div class="flex items-center">
218
+ <div class="w-32 bg-gray-200 rounded-full h-2.5 mr-2">
219
+ <div class="bg-green-500 h-2.5 rounded-full" style="width: 93%"></div>
220
+ </div>
221
+ <span class="text-sm font-medium text-gray-900">93%</span>
222
+ </div>
223
+ </div>
224
+ <div class="flex items-center space-x-4">
225
+ <span class="text-sm text-gray-500">18 requirements</span>
226
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View</button>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ <div class="px-6 py-4 hover:bg-gray-50">
232
+ <div class="flex items-center justify-between">
233
+ <div class="flex items-center">
234
+ <div class="flex-shrink-0 bg-red-100 p-3 rounded-md">
235
+ <i data-feather="fire" class="h-5 w-5 text-red-600"></i>
236
+ </div>
237
+ <div class="ml-4">
238
+ <h3 class="text-sm font-medium text-gray-900">NFPA 70E</h3>
239
+ <p class="text-sm text-gray-500">Electrical Safety in the Workplace</p>
240
+ </div>
241
+ </div>
242
+ <div class="flex items-center">
243
+ <div class="mr-8">
244
+ <span class="text-sm text-gray-500">Compliance</span>
245
+ <div class="flex items-center">
246
+ <div class="w-32 bg-gray-200 rounded-full h-2.5 mr-2">
247
+ <div class="bg-green-500 h-2.5 rounded-full" style="width: 89%"></div>
248
+ </div>
249
+ <span class="text-sm font-medium text-gray-900">89%</span>
250
+ </div>
251
+ </div>
252
+ <div class="flex items-center space-x-4">
253
+ <span class="text-sm text-gray-500">9 requirements</span>
254
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View</button>
255
+ </div>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ <div class="px-6 py-4 hover:bg-gray-50">
260
+ <div class="flex items-center justify-between">
261
+ <div class="flex items-center">
262
+ <div class="flex-shrink-0 bg-purple-100 p-3 rounded-md">
263
+ <i data-feather="droplet" class="h-5 w-5 text-purple-600"></i>
264
+ </div>
265
+ <div class="ml-4">
266
+ <h3 class="text-sm font-medium text-gray-900">EPA RCRA</h3>
267
+ <p class="text-sm text-gray-500">Hazardous Waste Management</p>
268
+ </div>
269
+ </div>
270
+ <div class="flex items-center">
271
+ <div class="mr-8">
272
+ <span class="text-sm text-gray-500">Compliance</span>
273
+ <div class="flex items-center">
274
+ <div class="w-32 bg-gray-200 rounded-full h-2.5 mr-2">
275
+ <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 78%"></div>
276
+ </div>
277
+ <span class="text-sm font-medium text-gray-900">78%</span>
278
+ </div>
279
+ </div>
280
+ <div class="flex items-center space-x-4">
281
+ <span class="text-sm text-gray-500">7 requirements</span>
282
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View</button>
283
+ </div>
284
+ </div>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ </div>
289
+
290
+ <!-- Compliance Charts -->
291
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
292
+ <div class="bg-white p-6 rounded-lg shadow">
293
+ <h2 class="text-lg font-medium text-gray-900 mb-4">Compliance by Department</h2>
294
+ <div class="h-64">
295
+ <canvas id="complianceDepartmentChart"></canvas>
296
+ </div>
297
+ </div>
298
+ <div class="bg-white p-6 rounded-lg shadow">
299
+ <h2 class="text-lg font-medium text-gray-900 mb-4">Compliance Trend</h2>
300
+ <div class="h-64">
301
+ <canvas id="complianceTrendChart"></canvas>
302
+ </div>
303
+ </div>
304
+ </div>
305
+
306
+ <!-- Action Items -->
307
+ <div class="mt-8 bg-white shadow rounded-lg overflow-hidden">
308
+ <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
309
+ <h2 class="text-lg font-medium text-gray-900">Open Action Items</h2>
310
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View All</button>
311
+ </div>
312
+ <div class="divide-y divide-gray-200">
313
+ <div class="px-6 py-4 hover:bg-gray-50">
314
+ <div class="flex items-center justify-between">
315
+ <div>
316
+ <h3 class="text-sm font-medium text-gray-900">Update LOTO procedures</h3>
317
+ <p class="text-sm text-gray-500">Required by OSHA 1910.147</p>
318
+ </div>
319
+ <div class="flex items-center space-x-4">
320
+ <span class="text-sm text-gray-500">Due in 7 days</span>
321
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">High Priority</span>
322
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View</button>
323
+ </div>
324
+ </div>
325
+ </div>
326
+ <div class="px-6 py-4 hover:bg-gray-50">
327
+ <div class="flex items-center justify-between">
328
+ <div>
329
+ <h3 class="text-sm font-medium text-gray-900">Conduct emergency drill</h3>
330
+ <p class="text-sm text-gray-500">Required by NFPA 101</p>
331
+ </div>
332
+ <div class="flex items-center space-x-4">
333
+ <span class="text-sm text-gray-500">Due in 14 days</span>
334
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Medium Priority</span>
335
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View</button>
336
+ </div>
337
+ </div>
338
+ </div>
339
+ <div class="px-6 py-4 hover:bg-gray-50">
340
+ <div class="flex items-center justify-between">
341
+ <div>
342
+ <h3 class="text-sm font-medium text-gray-900">Hazardous waste training</h3>
343
+ <p class="text-sm text-gray-500">Required by EPA RCRA</p>
344
+ </div>
345
+ <div class="flex items-center space-x-4">
346
+ <span class="text-sm text-gray-500">Due in 21 days</span>
347
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Medium Priority</span>
348
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View</button>
349
+ </div>
350
+ </div>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ </div>
355
+
356
+ <script>
357
+ feather.replace();
358
+ VANTA.WAVES({
359
+ el: "#vanta-bg",
360
+ color: 0x172b4d,
361
+ waveHeight: 15.00,
362
+ waveSpeed: 0.75,
363
+ zoom: 0.8
364
+ });
365
+
366
+ document.addEventListener('DOMContentLoaded', function() {
367
+ // Compliance by Department Chart
368
+ const deptCtx = document.getElementById('complianceDepartmentChart').getContext('2d');
369
+ const deptChart = new Chart(deptCtx, {
370
+ type: 'bar',
371
+ data: {
372
+ labels: ['Processing', 'Maintenance', 'Logistics', 'Storage', 'Administration'],
373
+ datasets: [{
374
+ label: 'Compliance Rate',
375
+ data: [97, 89, 93, 84, 95],
376
+ backgroundColor: 'rgba(59, 130, 246, 0.7)',
377
+ borderColor: 'rgba(59, 130, 246, 1)',
378
+ borderWidth: 1
379
+ }]
380
+ },
381
+ options: {
382
+ responsive: true,
383
+ maintainAspectRatio: false,
384
+ scales: {
385
+ y: {
386
+ beginAtZero: true,
387
+ max: 100,
388
+ ticks: {
389
+ callback: function(value) {
390
+ return value + '%';
391
+ }
392
+ }
393
+ }
394
+ }
395
+ }
396
+ });
397
+
398
+ // Compliance Trend Chart
399
+ const trendCtx = document.getElementById('complianceTrendChart').getContext('2d');
400
+ const trendChart = new Chart(trendCtx, {
401
+ type: 'line',
402
+ data: {
403
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
404
+ datasets: [{
405
+ label: 'Overall Compliance',
406
+ data: [88, 89, 90, 91, 92, 94],
407
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
408
+ borderColor: 'rgba(16, 185, 129, 1)',
409
+ borderWidth: 2,
410
+ fill: true,
411
+ tension: 0.4
412
+ }]
413
+ },
414
+ options: {
415
+ responsive: true,
416
+ maintainAspectRatio: false,
417
+ scales: {
418
+ y: {
419
+ beginAtZero: false,
420
+ min: 85,
421
+ max: 100,
422
+ ticks: {
423
+ callback: function(value) {
424
+ return value + '%';
425
+ }
426
+ }
427
+ }
428
+ }
429
+ }
430
+ });
431
+ });
432
+ </script>
433
+ </body>
434
+ </html>
incidents.html CHANGED
@@ -9,15 +9,6 @@
9
  <script src="https://unpkg.com/feather-icons"></script>
10
  <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
11
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
12
- <style>
13
- @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
14
- body {
15
- font-family: 'Inter', sans-serif;
16
- }
17
- .incident-table tr:hover {
18
- background-color: #f8fafc;
19
- }
20
- </style>
21
  </head>
22
  <body class="bg-gray-50">
23
  <div id="vanta-bg" class="fixed inset-0 -z-10"></div>
@@ -35,21 +26,19 @@
35
  <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
36
  <a href="index.html" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Dashboard</a>
37
  <a href="incidents.html" class="text-blue-600 border-b-2 border-blue-600 px-1 pt-1 text-sm font-medium">Incidents</a>
38
- <a href="#" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Compliance</a>
39
- <a href="#" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Reports</a>
40
- <a href="#" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Training</a>
41
  </div>
42
  <div class="flex items-center">
43
  <a href="new-report.html" class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
44
  <i data-feather="plus" class="h-4 w-4 inline mr-1"></i> New Report
45
  </a>
46
  <div class="ml-4 relative flex-shrink-0">
47
- <div>
48
- <button type="button" class="bg-white rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" id="user-menu">
49
- <span class="sr-only">Open user menu</span>
50
- <img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/42" alt="">
51
- </button>
52
- </div>
53
  </div>
54
  </div>
55
  </div>
@@ -58,315 +47,249 @@
58
 
59
  <!-- Main Content -->
60
  <div class="pt-24 pb-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
61
- <!-- Header -->
62
  <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8">
63
  <div>
64
  <h1 class="text-3xl font-bold text-gray-900">Incident Management</h1>
65
- <p class="mt-2 text-sm text-gray-600">Track and manage all safety incidents</p>
66
  </div>
67
- <div class="mt-4 md:mt-0 flex space-x-3">
68
  <div class="relative">
69
  <select class="appearance-none bg-white border border-gray-300 rounded-md pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
70
- <option>All Status</option>
71
- <option>Open</option>
72
- <option>Investigating</option>
73
- <option>Resolved</option>
74
- </select>
75
- <i data-feather="chevron-down" class="absolute right-3 top-2.5 h-4 w-4 text-gray-400"></i>
76
- </div>
77
- <div class="relative">
78
- <select class="appearance-none bg-white border border-gray-300 rounded-md pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
79
- <option>All Severity</option>
80
- <option>Low</option>
81
- <option>Medium</option>
82
- <option>High</option>
83
- <option>Critical</option>
84
  </select>
85
  <i data-feather="chevron-down" class="absolute right-3 top-2.5 h-4 w-4 text-gray-400"></i>
86
  </div>
87
  </div>
88
  </div>
89
 
90
- <!-- Stats Cards -->
91
- <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-8">
92
- <div class="bg-white overflow-hidden shadow rounded-lg">
93
- <div class="px-4 py-5 sm:p-6">
94
- <div class="flex items-center">
95
- <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
96
- <i data-feather="alert-circle" class="h-6 w-6 text-white"></i>
97
- </div>
98
- <div class="ml-5 w-0 flex-1">
99
- <dl>
100
- <dt class="text-sm font-medium text-gray-500 truncate">Total Incidents</dt>
101
- <dd>
102
- <div class="text-lg font-medium text-gray-900">37</div>
103
- </dd>
104
- </dl>
105
- </div>
106
- </div>
107
- <div class="mt-4">
108
- <div class="border-t border-gray-200 pt-3">
109
- <p class="text-xs text-gray-500">
110
- <span class="text-green-600 font-semibold">8.7%</span> from last month
111
- </p>
112
- </div>
113
- </div>
114
- </div>
115
- </div>
116
- <div class="bg-white overflow-hidden shadow rounded-lg">
117
- <div class="px-4 py-5 sm:p-6">
118
- <div class="flex items-center">
119
- <div class="flex-shrink-0 bg-red-500 rounded-md p-3">
120
- <i data-feather="alert-octagon" class="h-6 w-6 text-white"></i>
121
- </div>
122
- <div class="ml-5 w-0 flex-1">
123
- <dl>
124
- <dt class="text-sm font-medium text-gray-500 truncate">Open Incidents</dt>
125
- <dd>
126
- <div class="text-lg font-medium text-gray-900">12</div>
127
- </dd>
128
- </dl>
129
- </div>
130
- </div>
131
- <div class="mt-4">
132
- <div class="border-t border-gray-200 pt-3">
133
- <p class="text-xs text-gray-500">
134
- <span class="text-red-600 font-semibold">3.2%</span> from last month
135
- </p>
136
- </div>
137
- </div>
138
  </div>
139
- </div>
140
- <div class="bg-white overflow-hidden shadow rounded-lg">
141
- <div class="px-4 py-5 sm:p-6">
142
- <div class="flex items-center">
143
- <div class="flex-shrink-0 bg-yellow-500 rounded-md p-3">
144
- <i data-feather="clock" class="h-6 w-6 text-white"></i>
145
- </div>
146
- <div class="ml-5 w-0 flex-1">
147
- <dl>
148
- <dt class="text-sm font-medium text-gray-500 truncate">Avg Resolution Time</dt>
149
- <dd>
150
- <div class="text-lg font-medium text-gray-900">6.2 days</div>
151
- </dd>
152
- </dl>
153
- </div>
154
- </div>
155
- <div class="mt-4">
156
- <div class="border-t border-gray-200 pt-3">
157
- <p class="text-xs text-gray-500">
158
- <span class="text-green-600 font-semibold">1.5 days</span> improvement
159
- </p>
160
- </div>
161
- </div>
162
  </div>
163
- </div>
164
- <div class="bg-white overflow-hidden shadow rounded-lg">
165
- <div class="px-4 py-5 sm:p-6">
166
- <div class="flex items-center">
167
- <div class="flex-shrink-0 bg-green-500 rounded-md p-3">
168
- <i data-feather="check-circle" class="h-6 w-6 text-white"></i>
169
- </div>
170
- <div class="ml-5 w-0 flex-1">
171
- <dl>
172
- <dt class="text-sm font-medium text-gray-500 truncate">Resolved</dt>
173
- <dd>
174
- <div class="text-lg font-medium text-gray-900">68%</div>
175
- </dd>
176
- </dl>
177
- </div>
178
- </div>
179
- <div class="mt-4">
180
- <div class="border-t border-gray-200 pt-3">
181
- <p class="text-xs text-gray-500">
182
- <span class="text-green-600 font-semibold">5.4%</span> from last month
183
- </p>
184
- </div>
185
- </div>
186
  </div>
187
- </div>
188
- </div>
189
-
190
- <!-- Incident Chart -->
191
- <div class="bg-white p-6 rounded-lg shadow mb-8">
192
- <div class="flex items-center justify-between mb-4">
193
- <h2 class="text-lg font-medium text-gray-900">Incident Trends</h2>
194
- <div class="flex space-x-2">
195
- <button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-md text-sm font-medium">Monthly</button>
196
- <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-md text-sm font-medium">Quarterly</button>
197
- <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-md text-sm font-medium">Yearly</button>
198
  </div>
199
  </div>
200
- <div class="h-80">
201
- <canvas id="incidentTrendsChart"></canvas>
202
- </div>
203
  </div>
204
 
205
  <!-- Incident Table -->
206
  <div class="bg-white shadow rounded-lg overflow-hidden">
207
- <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
208
- <h3 class="text-lg font-medium text-gray-900">Recent Incidents</h3>
209
- <div class="relative">
210
- <input type="text" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5" placeholder="Search incidents...">
211
- <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
212
- <i data-feather="search" class="h-4 w-4 text-gray-400"></i>
213
- </div>
214
  </div>
215
  </div>
216
  <div class="overflow-x-auto">
217
- <table class="min-w-full divide-y divide-gray-200 incident-table">
218
  <thead class="bg-gray-50">
219
  <tr>
220
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
221
  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
222
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
 
223
  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Severity</th>
224
  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
225
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
226
- <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
227
  </tr>
228
  </thead>
229
  <tbody class="bg-white divide-y divide-gray-200">
230
- <tr>
231
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">INC-2023-042</td>
232
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Gas Leak</td>
233
- <td class="px-6 py-4 text-sm text-gray-500">Minor gas leak detected at processing unit B</td>
 
234
  <td class="px-6 py-4 whitespace-nowrap">
235
  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Critical</span>
236
  </td>
237
  <td class="px-6 py-4 whitespace-nowrap">
238
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Investigating</span>
239
  </td>
240
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 hours ago</td>
241
- <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
242
- <a href="#" class="text-blue-600 hover:text-blue-900">View</a>
243
  </td>
244
  </tr>
245
- <tr>
246
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">INC-2023-041</td>
247
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">PPE Violation</td>
248
- <td class="px-6 py-4 text-sm text-gray-500">Worker found without proper safety equipment</td>
 
249
  <td class="px-6 py-4 whitespace-nowrap">
250
  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Medium</span>
251
  </td>
252
  <td class="px-6 py-4 whitespace-nowrap">
253
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Action Required</span>
254
  </td>
255
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yesterday</td>
256
- <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
257
- <a href="#" class="text-blue-600 hover:text-blue-900">View</a>
258
  </td>
259
  </tr>
260
- <tr>
261
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">INC-2023-040</td>
262
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Near Miss</td>
263
- <td class="px-6 py-4 text-sm text-gray-500">Equipment nearly fell from elevated platform</td>
 
264
  <td class="px-6 py-4 whitespace-nowrap">
265
  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Low</span>
266
  </td>
267
  <td class="px-6 py-4 whitespace-nowrap">
268
  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Resolved</span>
269
  </td>
270
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 days ago</td>
271
- <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
272
- <a href="#" class="text-blue-600 hover:text-blue-900">View</a>
273
  </td>
274
  </tr>
275
- <tr>
276
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">INC-2023-039</td>
277
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Equipment Failure</td>
278
- <td class="px-6 py-4 text-sm text-gray-500">Pressure valve malfunction at compression unit</td>
 
279
  <td class="px-6 py-4 whitespace-nowrap">
280
  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-orange-100 text-orange-800">High</span>
281
  </td>
282
  <td class="px-6 py-4 whitespace-nowrap">
283
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Resolved</span>
284
  </td>
285
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3 days ago</td>
286
- <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
287
- <a href="#" class="text-blue-600 hover:text-blue-900">View</a>
288
  </td>
289
  </tr>
290
- <tr>
291
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">INC-2023-038</td>
292
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Slip Hazard</td>
293
- <td class="px-6 py-4 text-sm text-gray-500">Oil spill in maintenance area not cleaned promptly</td>
 
294
  <td class="px-6 py-4 whitespace-nowrap">
295
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Medium</span>
296
  </td>
297
  <td class="px-6 py-4 whitespace-nowrap">
298
  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Resolved</span>
299
  </td>
300
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5 days ago</td>
301
- <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
302
- <a href="#" class="text-blue-600 hover:text-blue-900">View</a>
303
  </td>
304
  </tr>
305
  </tbody>
306
  </table>
307
  </div>
308
  <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
309
- <div class="text-sm text-gray-500">
310
- Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">37</span> incidents
311
- </div>
312
  <div class="flex space-x-2">
313
- <button class="px-3 py-1 rounded-md bg-gray-100 text-gray-600 text-sm font-medium">Previous</button>
314
- <button class="px-3 py-1 rounded-md bg-blue-600 text-white text-sm font-medium">1</button>
315
- <button class="px-3 py-1 rounded-md bg-gray-100 text-gray-600 text-sm font-medium">2</button>
316
- <button class="px-3 py-1 rounded-md bg-gray-100 text-gray-600 text-sm font-medium">3</button>
317
- <button class="px-3 py-1 rounded-md bg-gray-100 text-gray-600 text-sm font-medium">Next</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
318
  </div>
319
  </div>
320
  </div>
321
  </div>
322
 
323
  <script>
324
- // Vanta.js Background
325
  VANTA.WAVES({
326
  el: "#vanta-bg",
327
- mouseControls: true,
328
- touchControls: true,
329
- gyroControls: false,
330
- minHeight: 200.00,
331
- minWidth: 200.00,
332
- scale: 1.00,
333
- scaleMobile: 1.00,
334
  color: 0x172b4d,
335
- shininess: 35.00,
336
  waveHeight: 15.00,
337
  waveSpeed: 0.75,
338
  zoom: 0.8
339
  });
340
 
341
- // Chart.js Implementation
342
  document.addEventListener('DOMContentLoaded', function() {
343
- feather.replace();
344
-
345
- const ctx = document.getElementById('incidentTrendsChart').getContext('2d');
346
- const incidentTrendsChart = new Chart(ctx, {
347
- type: 'line',
348
  data: {
349
- labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
350
- datasets: [
351
- {
352
- label: 'Total Incidents',
353
- data: [5, 7, 4, 6, 5, 8, 6],
354
- backgroundColor: 'rgba(59, 130, 246, 0.1)',
355
- borderColor: 'rgba(59, 130, 246, 1)',
356
- borderWidth: 2,
357
- tension: 0.3,
358
- fill: true
359
- },
360
- {
361
- label: 'Critical Incidents',
362
- data: [1, 0, 2, 1, 0, 1, 2],
363
- backgroundColor: 'rgba(239, 68, 68, 0.1)',
364
- borderColor: 'rgba(239, 68, 68, 1)',
365
- borderWidth: 2,
366
- tension: 0.3,
367
- fill: true
368
- }
369
- ]
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
370
  },
371
  options: {
372
  responsive: true,
@@ -375,15 +298,6 @@
375
  y: {
376
  beginAtZero: true
377
  }
378
- },
379
- plugins: {
380
- legend: {
381
- position: 'top',
382
- },
383
- tooltip: {
384
- mode: 'index',
385
- intersect: false,
386
- }
387
  }
388
  }
389
  });
 
9
  <script src="https://unpkg.com/feather-icons"></script>
10
  <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
11
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
 
 
 
 
 
 
 
 
12
  </head>
13
  <body class="bg-gray-50">
14
  <div id="vanta-bg" class="fixed inset-0 -z-10"></div>
 
26
  <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
27
  <a href="index.html" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Dashboard</a>
28
  <a href="incidents.html" class="text-blue-600 border-b-2 border-blue-600 px-1 pt-1 text-sm font-medium">Incidents</a>
29
+ <a href="compliance.html" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Compliance</a>
30
+ <a href="reports.html" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Reports</a>
31
+ <a href="training.html" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Training</a>
32
  </div>
33
  <div class="flex items-center">
34
  <a href="new-report.html" class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
35
  <i data-feather="plus" class="h-4 w-4 inline mr-1"></i> New Report
36
  </a>
37
  <div class="ml-4 relative flex-shrink-0">
38
+ <button type="button" class="bg-white rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" id="user-menu">
39
+ <span class="sr-only">Open user menu</span>
40
+ <img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/42" alt="">
41
+ </button>
 
 
42
  </div>
43
  </div>
44
  </div>
 
47
 
48
  <!-- Main Content -->
49
  <div class="pt-24 pb-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
 
50
  <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8">
51
  <div>
52
  <h1 class="text-3xl font-bold text-gray-900">Incident Management</h1>
53
+ <p class="mt-2 text-sm text-gray-600">Track, analyze and resolve safety incidents</p>
54
  </div>
55
+ <div class="mt-4 md:mt-0">
56
  <div class="relative">
57
  <select class="appearance-none bg-white border border-gray-300 rounded-md pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
58
+ <option>All Incident Types</option>
59
+ <option>Near Miss</option>
60
+ <option>Minor Incident</option>
61
+ <option>Major Incident</option>
62
+ <option>Hazard</option>
 
 
 
 
 
 
 
 
 
63
  </select>
64
  <i data-feather="chevron-down" class="absolute right-3 top-2.5 h-4 w-4 text-gray-400"></i>
65
  </div>
66
  </div>
67
  </div>
68
 
69
+ <!-- Incident Filters -->
70
+ <div class="bg-white p-4 rounded-lg shadow mb-8">
71
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
72
+ <div>
73
+ <label class="block text-sm font-medium text-gray-700 mb-1">Date Range</label>
74
+ <select class="w-full border border-gray-300 rounded-md py-2 px-3 text-sm">
75
+ <option>Last 7 days</option>
76
+ <option>Last 30 days</option>
77
+ <option>Last 90 days</option>
78
+ <option>Custom range</option>
79
+ </select>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
80
  </div>
81
+ <div>
82
+ <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
83
+ <select class="w-full border border-gray-300 rounded-md py-2 px-3 text-sm">
84
+ <option>All Statuses</option>
85
+ <option>Open</option>
86
+ <option>Under Investigation</option>
87
+ <option>Resolved</option>
88
+ </select>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
89
  </div>
90
+ <div>
91
+ <label class="block text-sm font-medium text-gray-700 mb-1">Department</label>
92
+ <select class="w-full border border-gray-300 rounded-md py-2 px-3 text-sm">
93
+ <option>All Departments</option>
94
+ <option>Processing</option>
95
+ <option>Maintenance</option>
96
+ <option>Logistics</option>
97
+ <option>Storage</option>
98
+ </select>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
99
  </div>
100
+ <div class="flex items-end">
101
+ <button class="w-full bg-blue-600 text-white py-2 px-4 rounded-md text-sm hover:bg-blue-700">Apply Filters</button>
 
 
 
 
 
 
 
 
 
102
  </div>
103
  </div>
 
 
 
104
  </div>
105
 
106
  <!-- Incident Table -->
107
  <div class="bg-white shadow rounded-lg overflow-hidden">
108
+ <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200">
109
+ <h2 class="text-lg font-medium text-gray-900">Recent Incidents</h2>
110
+ <div class="flex space-x-3">
111
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Export</button>
112
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Print</button>
 
 
113
  </div>
114
  </div>
115
  <div class="overflow-x-auto">
116
+ <table class="min-w-full divide-y divide-gray-200">
117
  <thead class="bg-gray-50">
118
  <tr>
119
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Incident ID</th>
120
  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
121
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
122
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Location</th>
123
  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Severity</th>
124
  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
125
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
 
126
  </tr>
127
  </thead>
128
  <tbody class="bg-white divide-y divide-gray-200">
129
+ <tr class="hover:bg-gray-50">
130
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">INC-2023-142</td>
131
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Gas Leak</td>
132
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Today, 09:42</td>
133
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">North Processing Unit</td>
134
  <td class="px-6 py-4 whitespace-nowrap">
135
  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Critical</span>
136
  </td>
137
  <td class="px-6 py-4 whitespace-nowrap">
138
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Investigation</span>
139
  </td>
140
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
141
+ <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">View</a>
142
+ <a href="#" class="text-gray-600 hover:text-gray-900">Edit</a>
143
  </td>
144
  </tr>
145
+ <tr class="hover:bg-gray-50">
146
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">INC-2023-141</td>
147
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">PPE Violation</td>
148
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Today, 07:15</td>
149
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Central Storage</td>
150
  <td class="px-6 py-4 whitespace-nowrap">
151
  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Medium</span>
152
  </td>
153
  <td class="px-6 py-4 whitespace-nowrap">
154
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">Training</span>
155
  </td>
156
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
157
+ <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">View</a>
158
+ <a href="#" class="text-gray-600 hover:text-gray-900">Edit</a>
159
  </td>
160
  </tr>
161
+ <tr class="hover:bg-gray-50">
162
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">INC-2023-140</td>
163
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Near Miss</td>
164
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yesterday, 14:30</td>
165
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Loading Dock</td>
166
  <td class="px-6 py-4 whitespace-nowrap">
167
  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Low</span>
168
  </td>
169
  <td class="px-6 py-4 whitespace-nowrap">
170
  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Resolved</span>
171
  </td>
172
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
173
+ <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">View</a>
174
+ <a href="#" class="text-gray-600 hover:text-gray-900">Edit</a>
175
  </td>
176
  </tr>
177
+ <tr class="hover:bg-gray-50">
178
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">INC-2023-139</td>
179
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Equipment Failure</td>
180
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yesterday, 10:45</td>
181
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Compression Station</td>
182
  <td class="px-6 py-4 whitespace-nowrap">
183
  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-orange-100 text-orange-800">High</span>
184
  </td>
185
  <td class="px-6 py-4 whitespace-nowrap">
186
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Repair</span>
187
  </td>
188
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
189
+ <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">View</a>
190
+ <a href="#" class="text-gray-600 hover:text-gray-900">Edit</a>
191
  </td>
192
  </tr>
193
+ <tr class="hover:bg-gray-50">
194
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">INC-2023-138</td>
195
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Chemical Spill</td>
196
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 days ago</td>
197
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Lab B</td>
198
  <td class="px-6 py-4 whitespace-nowrap">
199
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Critical</span>
200
  </td>
201
  <td class="px-6 py-4 whitespace-nowrap">
202
  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Resolved</span>
203
  </td>
204
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
205
+ <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">View</a>
206
+ <a href="#" class="text-gray-600 hover:text-gray-900">Edit</a>
207
  </td>
208
  </tr>
209
  </tbody>
210
  </table>
211
  </div>
212
  <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
213
+ <div class="text-sm text-gray-500">Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">23</span> results</div>
 
 
214
  <div class="flex space-x-2">
215
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">Previous</button>
216
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700">1</button>
217
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">2</button>
218
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">3</button>
219
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">Next</button>
220
+ </div>
221
+ </div>
222
+ </div>
223
+
224
+ <!-- Incident Trends -->
225
+ <div class="mt-8 grid grid-cols-1 lg:grid-cols-2 gap-8">
226
+ <div class="bg-white p-6 rounded-lg shadow">
227
+ <h2 class="text-lg font-medium text-gray-900 mb-4">Incidents by Type</h2>
228
+ <div class="h-64">
229
+ <canvas id="incidentTypeChart"></canvas>
230
+ </div>
231
+ </div>
232
+ <div class="bg-white p-6 rounded-lg shadow">
233
+ <h2 class="text-lg font-medium text-gray-900 mb-4">Incidents by Severity</h2>
234
+ <div class="h-64">
235
+ <canvas id="incidentSeverityChart"></canvas>
236
  </div>
237
  </div>
238
  </div>
239
  </div>
240
 
241
  <script>
242
+ feather.replace();
243
  VANTA.WAVES({
244
  el: "#vanta-bg",
 
 
 
 
 
 
 
245
  color: 0x172b4d,
 
246
  waveHeight: 15.00,
247
  waveSpeed: 0.75,
248
  zoom: 0.8
249
  });
250
 
 
251
  document.addEventListener('DOMContentLoaded', function() {
252
+ // Incident Type Chart
253
+ const typeCtx = document.getElementById('incidentTypeChart').getContext('2d');
254
+ const typeChart = new Chart(typeCtx, {
255
+ type: 'doughnut',
 
256
  data: {
257
+ labels: ['Near Miss', 'PPE Violation', 'Equipment Failure', 'Chemical Spill', 'Other'],
258
+ datasets: [{
259
+ data: [35, 25, 20, 15, 5],
260
+ backgroundColor: [
261
+ 'rgba(59, 130, 246, 0.7)',
262
+ 'rgba(234, 179, 8, 0.7)',
263
+ 'rgba(239, 68, 68, 0.7)',
264
+ 'rgba(139, 92, 246, 0.7)',
265
+ 'rgba(16, 185, 129, 0.7)'
266
+ ],
267
+ borderWidth: 1
268
+ }]
269
+ },
270
+ options: {
271
+ responsive: true,
272
+ maintainAspectRatio: false
273
+ }
274
+ });
275
+
276
+ // Incident Severity Chart
277
+ const severityCtx = document.getElementById('incidentSeverityChart').getContext('2d');
278
+ const severityChart = new Chart(severityCtx, {
279
+ type: 'bar',
280
+ data: {
281
+ labels: ['Critical', 'High', 'Medium', 'Low'],
282
+ datasets: [{
283
+ label: 'Incidents',
284
+ data: [5, 12, 18, 25],
285
+ backgroundColor: [
286
+ 'rgba(239, 68, 68, 0.7)',
287
+ 'rgba(249, 115, 22, 0.7)',
288
+ 'rgba(234, 179, 8, 0.7)',
289
+ 'rgba(59, 130, 246, 0.7)'
290
+ ],
291
+ borderWidth: 1
292
+ }]
293
  },
294
  options: {
295
  responsive: true,
 
298
  y: {
299
  beginAtZero: true
300
  }
 
 
 
 
 
 
 
 
 
301
  }
302
  }
303
  });
index.html CHANGED
@@ -42,8 +42,8 @@
42
  </div>
43
  <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
44
  <a href="#" class="text-blue-600 border-b-2 border-blue-600 px-1 pt-1 text-sm font-medium">Dashboard</a>
45
- <a href="incidents.html" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Incidents</a>
46
- <a href="#" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Compliance</a>
47
  <a href="#" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Reports</a>
48
  <a href="#" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Training</a>
49
  </div>
 
42
  </div>
43
  <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
44
  <a href="#" class="text-blue-600 border-b-2 border-blue-600 px-1 pt-1 text-sm font-medium">Dashboard</a>
45
+ <a href="#" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Incidents</a>
46
+ <a href="#" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Compliance</a>
47
  <a href="#" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Reports</a>
48
  <a href="#" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Training</a>
49
  </div>
report-generator.html ADDED
@@ -0,0 +1,150 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Report Generator | Safety Sentinel</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
11
+ </head>
12
+ <body class="bg-gray-50">
13
+ <div id="vanta-bg" class="fixed inset-0 -z-10"></div>
14
+
15
+ <!-- Navigation -->
16
+ <nav class="bg-white bg-opacity-90 backdrop-blur-md border-b border-gray-200 fixed w-full z-10">
17
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
18
+ <div class="flex justify-between h-16">
19
+ <div class="flex items-center">
20
+ <div class="flex-shrink-0 flex items-center">
21
+ <i data-feather="shield" class="h-8 w-8 text-blue-600"></i>
22
+ <span class="ml-2 text-xl font-bold text-gray-900">Safety Sentinel</span>
23
+ </div>
24
+ </div>
25
+ <div class="flex items-center">
26
+ <a href="index.html" class="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Back to Dashboard</a>
27
+ </div>
28
+ </div>
29
+ </div>
30
+ </nav>
31
+
32
+ <!-- Main Form -->
33
+ <div class="pt-24 pb-12 px-4 sm:px-6 lg:px-8 max-w-3xl mx-auto">
34
+ <div class="bg-white p-8 rounded-lg shadow">
35
+ <h1 class="text-2xl font-bold text-gray-900 mb-6">Report Generator</h1>
36
+
37
+ <form>
38
+ <div class="space-y-6">
39
+ <div>
40
+ <label class="block text-sm font-medium text-gray-700 mb-1">Report Type</label>
41
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
42
+ <div class="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
43
+ <input id="incident-report" name="report-type" type="radio" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
44
+ <label for="incident-report" class="ml-3 block text-sm font-medium text-gray-700">
45
+ <span>Incident Report</span>
46
+ <p class="text-xs text-gray-500 mt-1">Summary of safety incidents</p>
47
+ </label>
48
+ </div>
49
+ <div class="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
50
+ <input id="compliance-report" name="report-type" type="radio" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
51
+ <label for="compliance-report" class="ml-3 block text-sm font-medium text-gray-700">
52
+ <span>Compliance Report</span>
53
+ <p class="text-xs text-gray-500 mt-1">Regulatory compliance status</p>
54
+ </label>
55
+ </div>
56
+ <div class="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
57
+ <input id="training-report" name="report-type" type="radio" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
58
+ <label for="training-report" class="ml-3 block text-sm font-medium text-gray-700">
59
+ <span>Training Report</span>
60
+ <p class="text-xs text-gray-500 mt-1">Employee training records</p>
61
+ </label>
62
+ </div>
63
+ <div class="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
64
+ <input id="custom-report" name="report-type" type="radio" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
65
+ <label for="custom-report" class="ml-3 block text-sm font-medium text-gray-700">
66
+ <span>Custom Report</span>
67
+ <p class="text-xs text-gray-500 mt-1">Build your own report</p>
68
+ </label>
69
+ </div>
70
+ </div>
71
+ </div>
72
+
73
+ <div>
74
+ <label for="date-range" class="block text-sm font-medium text-gray-700 mb-1">Date Range</label>
75
+ <select id="date-range" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
76
+ <option>Last 7 days</option>
77
+ <option>Last 30 days</option>
78
+ <option>Last 90 days</option>
79
+ <option>This quarter</option>
80
+ <option>Custom range</option>
81
+ </select>
82
+ </div>
83
+
84
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
85
+ <div>
86
+ <label for="start-date" class="block text-sm font-medium text-gray-700 mb-1">Start Date</label>
87
+ <input type="date" id="start-date" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
88
+ </div>
89
+ <div>
90
+ <label for="end-date" class="block text-sm font-medium text-gray-700 mb-1">End Date</label>
91
+ <input type="date" id="end-date" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
92
+ </div>
93
+ </div>
94
+
95
+ <div>
96
+ <label for="department" class="block text-sm font-medium text-gray-700 mb-1">Department</label>
97
+ <select id="department" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
98
+ <option>All Departments</option>
99
+ <option>Processing</option>
100
+ <option>Maintenance</option>
101
+ <option>Logistics</option>
102
+ <option>Storage</option>
103
+ </select>
104
+ </div>
105
+
106
+ <div>
107
+ <label for="format" class="block text-sm font-medium text-gray-700 mb-1">Format</label>
108
+ <select id="format" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
109
+ <option>PDF (Portable Document Format)</option>
110
+ <option>Excel Spreadsheet</option>
111
+ <option>CSV (Comma Separated Values)</option>
112
+ <option>HTML (Web Page)</option>
113
+ </select>
114
+ </div>
115
+
116
+ <div class="flex items-center">
117
+ <input id="include-charts" name="include-charts" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
118
+ <label for="include-charts" class="ml-2 block text-sm text-gray-700">Include charts and graphs</label>
119
+ </div>
120
+
121
+ <div class="flex items-center">
122
+ <input id="include-details" name="include-details" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
123
+ <label for="include-details" class="ml-2 block text-sm text-gray-700">Include detailed records</label>
124
+ </div>
125
+
126
+ <div class="flex justify-end space-x-3">
127
+ <button type="button" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
128
+ Cancel
129
+ </button>
130
+ <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
131
+ Generate Report
132
+ </button>
133
+ </div>
134
+ </div>
135
+ </form>
136
+ </div>
137
+ </div>
138
+
139
+ <script>
140
+ feather.replace();
141
+ VANTA.WAVES({
142
+ el: "#vanta-bg",
143
+ color: 0x172b4d,
144
+ waveHeight: 15.00,
145
+ waveSpeed: 0.75,
146
+ zoom: 0.8
147
+ });
148
+ </script>
149
+ </body>
150
+ </html>
reports.html ADDED
@@ -0,0 +1,248 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Reports | Safety Sentinel</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
11
+ </head>
12
+ <body class="bg-gray-50">
13
+ <div id="vanta-bg" class="fixed inset-0 -z-10"></div>
14
+
15
+ <!-- Navigation -->
16
+ <nav class="bg-white bg-opacity-90 backdrop-blur-md border-b border-gray-200 fixed w-full z-10">
17
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
18
+ <div class="flex justify-between h-16">
19
+ <div class="flex items-center">
20
+ <div class="flex-shrink-0 flex items-center">
21
+ <i data-feather="shield" class="h-8 w-8 text-blue-600"></i>
22
+ <span class="ml-2 text-xl font-bold text-gray-900">Safety Sentinel</span>
23
+ </div>
24
+ </div>
25
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
26
+ <a href="index.html" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Dashboard</a>
27
+ <a href="incidents.html" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Incidents</a>
28
+ <a href="compliance.html" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Compliance</a>
29
+ <a href="reports.html" class="text-blue-600 border-b-2 border-blue-600 px-1 pt-1 text-sm font-medium">Reports</a>
30
+ <a href="training.html" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Training</a>
31
+ </div>
32
+ <div class="flex items-center">
33
+ <a href="new-report.html" class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
34
+ <i data-feather="plus" class="h-4 w-4 inline mr-1"></i> New Report
35
+ </a>
36
+ <div class="ml-4 relative flex-shrink-0">
37
+ <button type="button" class="bg-white rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" id="user-menu">
38
+ <span class="sr-only">Open user menu</span>
39
+ <img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/42" alt="">
40
+ </button>
41
+ </div>
42
+ </div>
43
+ </div>
44
+ </div>
45
+ </nav>
46
+
47
+ <!-- Main Content -->
48
+ <div class="pt-24 pb-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
49
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8">
50
+ <div>
51
+ <h1 class="text-3xl font-bold text-gray-900">Safety Reports</h1>
52
+ <p class="mt-2 text-sm text-gray-600">Generate and manage safety reports</p>
53
+ </div>
54
+ <div class="mt-4 md:mt-0">
55
+ <a href="report-generator.html" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
56
+ <i data-feather="plus" class="h-4 w-4 mr-2"></i> New Report
57
+ </a>
58
+ </div>
59
+ </div>
60
+
61
+ <!-- Report Templates -->
62
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
63
+ <div class="bg-white p-6 rounded-lg shadow hover:shadow-md transition-shadow">
64
+ <div class="flex items-center mb-4">
65
+ <div class="flex-shrink-0 bg-blue-100 p-3 rounded-md">
66
+ <i data-feather="file-text" class="h-6 w-6 text-blue-600"></i>
67
+ </div>
68
+ <h2 class="ml-3 text-lg font-medium text-gray-900">Incident Summary</h2>
69
+ </div>
70
+ <p class="text-sm text-gray-600 mb-4">Monthly summary of all safety incidents, categorized by type and severity.</p>
71
+ <div class="flex justify-between items-center">
72
+ <span class="text-xs text-gray-500">Last generated: 3 days ago</span>
73
+ <button class="text-sm text-blue-600 hover:text-blue-800 font-medium">Generate</button>
74
+ </div>
75
+ </div>
76
+ <div class="bg-white p-6 rounded-lg shadow hover:shadow-md transition-shadow">
77
+ <div class="flex items-center mb-4">
78
+ <div class="flex-shrink-0 bg-green-100 p-3 rounded-md">
79
+ <i data-feather="check-circle" class="h-6 w-6 text-green-600"></i>
80
+ </div>
81
+ <h2 class="ml-3 text-lg font-medium text-gray-900">Compliance Status</h2>
82
+ </div>
83
+ <p class="text-sm text-gray-600 mb-4">Detailed report on compliance with all regulatory requirements.</p>
84
+ <div class="flex justify-between items-center">
85
+ <span class="text-xs text-gray-500">Last generated: 1 week ago</span>
86
+ <button class="text-sm text-blue-600 hover:text-blue-800 font-medium">Generate</button>
87
+ </div>
88
+ </div>
89
+ <div class="bg-white p-6 rounded-lg shadow hover:shadow-md transition-shadow">
90
+ <div class="flex items-center mb-4">
91
+ <div class="flex-shrink-0 bg-purple-100 p-3 rounded-md">
92
+ <i data-feather="users" class="h-6 w-6 text-purple-600"></i>
93
+ </div>
94
+ <h2 class="ml-3 text-lg font-medium text-gray-900">Training Records</h2>
95
+ </div>
96
+ <p class="text-sm text-gray-600 mb-4">Comprehensive report on employee training completion and status.</p>
97
+ <div class="flex justify-between items-center">
98
+ <span class="text-xs text-gray-500">Last generated: 2 weeks ago</span>
99
+ <button class="text-sm text-blue-600 hover:text-blue-800 font-medium">Generate</button>
100
+ </div>
101
+ </div>
102
+ <div class="bg-white p-6 rounded-lg shadow hover:shadow-md transition-shadow">
103
+ <div class="flex items-center mb-4">
104
+ <div class="flex-shrink-0 bg-yellow-100 p-3 rounded-md">
105
+ <i data-feather="alert-triangle" class="h-6 w-6 text-yellow-600"></i>
106
+ </div>
107
+ <h2 class="ml-3 text-lg font-medium text-gray-900">Hazard Analysis</h2>
108
+ </div>
109
+ <p class="text-sm text-gray-600 mb-4">Analysis of identified hazards and risk mitigation measures.</p>
110
+ <div class="flex justify-between items-center">
111
+ <span class="text-xs text-gray-500">Last generated: 5 days ago</span>
112
+ <button class="text-sm text-blue-600 hover:text-blue-800 font-medium">Generate</button>
113
+ </div>
114
+ </div>
115
+ <div class="bg-white p-6 rounded-lg shadow hover:shadow-md transition-shadow">
116
+ <div class="flex items-center mb-4">
117
+ <div class="flex-shrink-0 bg-red-100 p-3 rounded-md">
118
+ <i data-feather="activity" class="h-6 w-6 text-red-600"></i>
119
+ </div>
120
+ <h2 class="ml-3 text-lg font-medium text-gray-900">Safety Metrics</h2>
121
+ </div>
122
+ <p class="text-sm text-gray-600 mb-4">Key performance indicators and safety metrics over time.</p>
123
+ <div class="flex justify-between items-center">
124
+ <span class="text-xs text-gray-500">Last generated: 1 day ago</span>
125
+ <button class="text-sm text-blue-600 hover:text-blue-800 font-medium">Generate</button>
126
+ </div>
127
+ </div>
128
+ <div class="bg-white p-6 rounded-lg shadow hover:shadow-md transition-shadow">
129
+ <div class="flex items-center mb-4">
130
+ <div class="flex-shrink-0 bg-indigo-100 p-3 rounded-md">
131
+ <i data-feather="bar-chart-2" class="h-6 w-6 text-indigo-600"></i>
132
+ </div>
133
+ <h2 class="ml-3 text-lg font-medium text-gray-900">Custom Report</h2>
134
+ </div>
135
+ <p class="text-sm text-gray-600 mb-4">Create a custom report with your specific parameters and data.</p>
136
+ <div class="flex justify-between items-center">
137
+ <span class="text-xs text-gray-500">Configure your own</span>
138
+ <button class="text-sm text-blue-600 hover:text-blue-800 font-medium">Create</button>
139
+ </div>
140
+ </div>
141
+ </div>
142
+
143
+ <!-- Recent Reports -->
144
+ <div class="bg-white shadow rounded-lg overflow-hidden">
145
+ <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
146
+ <h2 class="text-lg font-medium text-gray-900">Recent Reports</h2>
147
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View All</button>
148
+ </div>
149
+ <div class="divide-y divide-gray-200">
150
+ <div class="px-6 py-4 hover:bg-gray-50">
151
+ <div class="flex items-center justify-between">
152
+ <div class="flex items-center">
153
+ <div class="flex-shrink-0">
154
+ <i data-feather="file-text" class="h-5 w-5 text-gray-400"></i>
155
+ </div>
156
+ <div class="ml-4">
157
+ <h3 class="text-sm font-medium text-gray-900">June 2023 Incident Summary</h3>
158
+ <p class="text-sm text-gray-500">Generated on June 30, 2023</p>
159
+ </div>
160
+ </div>
161
+ <div class="flex items-center space-x-4">
162
+ <span class="text-sm text-gray-500">PDF • 2.4 MB</span>
163
+ <div class="flex space-x-2">
164
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Download</button>
165
+ <button class="text-gray-600 hover:text-gray-900 text-sm font-medium">Share</button>
166
+ </div>
167
+ </div>
168
+ </div>
169
+ </div>
170
+ <div class="px-6 py-4 hover:bg-gray-50">
171
+ <div class="flex items-center justify-between">
172
+ <div class="flex items-center">
173
+ <div class="flex-shrink-0">
174
+ <i data-feather="file-text" class="h-5 w-5 text-gray-400"></i>
175
+ </div>
176
+ <div class="ml-4">
177
+ <h3 class="text-sm font-medium text-gray-900">Q2 Compliance Report</h3>
178
+ <p class="text-sm text-gray-500">Generated on June 28, 2023</p>
179
+ </div>
180
+ </div>
181
+ <div class="flex items-center space-x-4">
182
+ <span class="text-sm text-gray-500">PDF • 3.1 MB</span>
183
+ <div class="flex space-x-2">
184
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Download</button>
185
+ <button class="text-gray-600 hover:text-gray-900 text-sm font-medium">Share</button>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ <div class="px-6 py-4 hover:bg-gray-50">
191
+ <div class="flex items-center justify-between">
192
+ <div class="flex items-center">
193
+ <div class="flex-shrink-0">
194
+ <i data-feather="file-text" class="h-5 w-5 text-gray-400"></i>
195
+ </div>
196
+ <div class="ml-4">
197
+ <h3 class="text-sm font-medium text-gray-900">Emergency Drill Analysis</h3>
198
+ <p class="text-sm text-gray-500">Generated on June 25, 2023</p>
199
+ </div>
200
+ </div>
201
+ <div class="flex items-center space-x-4">
202
+ <span class="text-sm text-gray-500">PDF • 1.8 MB</span>
203
+ <div class="flex space-x-2">
204
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Download</button>
205
+ <button class="text-gray-600 hover:text-gray-900 text-sm font-medium">Share</button>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ <div class="px-6 py-4 hover:bg-gray-50">
211
+ <div class="flex items-center justify-between">
212
+ <div class="flex items-center">
213
+ <div class="flex-shrink-0">
214
+ <i data-feather="file-text" class="h-5 w-5 text-gray-400"></i>
215
+ </div>
216
+ <div class="ml-4">
217
+ <h3 class="text-sm font-medium text-gray-900">Monthly Safety Metrics</h3>
218
+ <p class="text-sm text-gray-500">Generated on June 20, 2023</p>
219
+ </div>
220
+ </div>
221
+ <div class="flex items-center space-x-4">
222
+ <span class="text-sm text-gray-500">PDF • 1.2 MB</span>
223
+ <div class="flex space-x-2">
224
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Download</button>
225
+ <button class="text-gray-600 hover:text-gray-900 text-sm font-medium">Share</button>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ <div class="px-6 py-4 border-t border-gray-200 text-center">
232
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Load More</button>
233
+ </div>
234
+ </div>
235
+ </div>
236
+
237
+ <script>
238
+ feather.replace();
239
+ VANTA.WAVES({
240
+ el: "#vanta-bg",
241
+ color: 0x172b4d,
242
+ waveHeight: 15.00,
243
+ waveSpeed: 0.75,
244
+ zoom: 0.8
245
+ });
246
+ </script>
247
+ </body>
248
+ </html>
safety-checklist.html ADDED
@@ -0,0 +1,327 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Safety Checklist | Safety Sentinel</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
11
+ </head>
12
+ <body class="bg-gray-50">
13
+ <div id="vanta-bg" class="fixed inset-0 -z-10"></div>
14
+
15
+ <!-- Navigation -->
16
+ <nav class="bg-white bg-opacity-90 backdrop-blur-md border-b border-gray-200 fixed w-full z-10">
17
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
18
+ <div class="flex justify-between h-16">
19
+ <div class="flex items-center">
20
+ <div class="flex-shrink-0 flex items-center">
21
+ <i data-feather="shield" class="h-8 w-8 text-blue-600"></i>
22
+ <span class="ml-2 text-xl font-bold text-gray-900">Safety Sentinel</span>
23
+ </div>
24
+ </div>
25
+ <div class="flex items-center">
26
+ <a href="index.html" class="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Back to Dashboard</a>
27
+ </div>
28
+ </div>
29
+ </div>
30
+ </nav>
31
+
32
+ <!-- Main Form -->
33
+ <div class="pt-24 pb-12 px-4 sm:px-6 lg:px-8 max-w-3xl mx-auto">
34
+ <div class="bg-white p-8 rounded-lg shadow">
35
+ <h1 class="text-2xl font-bold text-gray-900 mb-6">Safety Inspection Checklist</h1>
36
+
37
+ <form>
38
+ <div class="mb-8">
39
+ <label for="location" class="block text-sm font-medium text-gray-700 mb-1">Location</label>
40
+ <input type="text" id="location" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Building 4, North Processing Unit">
41
+ </div>
42
+
43
+ <div class="mb-8">
44
+ <label for="inspector" class="block text-sm font-medium text-gray-700 mb-1">Inspector</label>
45
+ <input type="text" id="inspector" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Your name">
46
+ </div>
47
+
48
+ <div class="mb-8">
49
+ <label for="date" class="block text-sm font-medium text-gray-700 mb-1">Date</label>
50
+ <input type="date" id="date" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
51
+ </div>
52
+
53
+ <div class="divide-y divide-gray-200">
54
+ <div class="py-4">
55
+ <h2 class="text-lg font-medium text-gray-900 mb-4">PPE Compliance</h2>
56
+ <div class="space-y-4">
57
+ <div class="flex items-center justify-between">
58
+ <label class="block text-sm font-medium text-gray-700">All personnel wearing required PPE</label>
59
+ <div class="flex space-x-4">
60
+ <div class="flex items-center">
61
+ <input id="ppe-1-yes" name="ppe-1" type="radio" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300">
62
+ <label for="ppe-1-yes" class="ml-2 block text-sm text-gray-700">Yes</label>
63
+ </div>
64
+ <div class="flex items-center">
65
+ <input id="ppe-1-no" name="ppe-1" type="radio" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300">
66
+ <label for="ppe-1-no" class="ml-2 block text-sm text-gray-700">No</label>
67
+ </div>
68
+ <div class="flex items-center">
69
+ <input id="ppe-1-na" name="ppe-1" type="radio" class="h-4 w-4 text-gray-600 focus:ring-gray-500 border-gray-300">
70
+ <label for="ppe-1-na" class="ml-2 block text-sm text-gray-700">N/A</label>
71
+ </div>
72
+ </div>
73
+ </div>
74
+ <div class="flex items-center justify-between">
75
+ <label class="block text-sm font-medium text-gray-700">PPE in good condition</label>
76
+ <div class="flex space-x-4">
77
+ <div class="flex items-center">
78
+ <input id="ppe-2-yes" name="ppe-2" type="radio" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300">
79
+ <label for="ppe-2-yes" class="ml-2 block text-sm text-gray-700">Yes</label>
80
+ </div>
81
+ <div class="flex items-center">
82
+ <input id="ppe-2-no" name="ppe-2" type="radio" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300">
83
+ <label for="ppe-2-no" class="ml-2 block text-sm text-gray-700">No</label>
84
+ </div>
85
+ <div class="flex items-center">
86
+ <input id="ppe-2-na" name="ppe-2" type="radio" class="h-4 w-4 text-gray-600 focus:ring-gray-500 border-gray-300">
87
+ <label for="ppe-2-na" class="ml-2 block text-sm text-gray-700">N/A</label>
88
+ </div>
89
+ </div>
90
+ </div>
91
+ <div class="flex items-center justify-between">
92
+ <label class="block text-sm font-medium text-gray-700">Proper storage of PPE</label>
93
+ <div class="flex space-x-4">
94
+ <div class="flex items-center">
95
+ <input id="ppe-3-yes" name="ppe-3" type="radio" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300">
96
+ <label for="ppe-3-yes" class="ml-2 block text-sm text-gray-700">Yes</label>
97
+ </div>
98
+ <div class="flex items-center">
99
+ <input id="ppe-3-no" name="ppe-3" type="radio" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300">
100
+ <label for="ppe-3-no" class="ml-2 block text-sm text-gray-700">No</label>
101
+ </div>
102
+ <div class="flex items-center">
103
+ <input id="ppe-3-na" name="ppe-3" type="radio" class="h-4 w-4 text-gray-600 focus:ring-gray-500 border-gray-300">
104
+ <label for="ppe-3-na" class="ml-2 block text-sm text-gray-700">N/A</label>
105
+ </div>
106
+ </div>
107
+ </div>
108
+ </div>
109
+ </div>
110
+
111
+ <div class="py-4">
112
+ <h2 class="text-lg font-medium text-gray-900 mb-4">Equipment Safety</h2>
113
+ <div class="space-y-4">
114
+ <div class="flex items-center justify-between">
115
+ <label class="block text-sm font-medium text-gray-700">Equipment properly guarded</label>
116
+ <div class="flex space-x-4">
117
+ <div class="flex items-center">
118
+ <input id="equip-1-yes" name="equip-1" type="radio" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300">
119
+ <label for="equip-1-yes" class="ml-2 block text-sm text-gray-700">Yes</label>
120
+ </div>
121
+ <div class="flex items-center">
122
+ <input id="equip-1-no" name="equip-1" type="radio" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300">
123
+ <label for="equip-1-no" class="ml-2 block text-sm text-gray-700">No</label>
124
+ </div>
125
+ <div class="flex items-center">
126
+ <input id="equip-1-na" name="equip-1" type="radio" class="h-4 w-4 text-gray-600 focus:ring-gray-500 border-gray-300">
127
+ <label for="equip-1-na" class="ml-2 block text-sm text-gray-700">N/A</label>
128
+ </div>
129
+ </div>
130
+ </div>
131
+ <div class="flex items-center justify-between">
132
+ <label class="block text-sm font-medium text-gray-700">LOTO procedures followed</label>
133
+ <div class="flex space-x-4">
134
+ <div class="flex items-center">
135
+ <input id="equip-2-yes" name="equip-2" type="radio" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300">
136
+ <label for="equip-2-yes" class="ml-2 block text-sm text-gray-700">Yes</label>
137
+ </div>
138
+ <div class="flex items-center">
139
+ <input id="equip-2-no" name="equip-2" type="radio" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300">
140
+ <label for="equip-2-no" class="ml-2 block text-sm text-gray-700">No</label>
141
+ </div>
142
+ <div class="flex items-center">
143
+ <input id="equip-2-na" name="equip-2" type="radio" class="h-4 w-4 text-gray-600 focus:ring-gray-500 border-gray-300">
144
+ <label for="equip-2-na" class="ml-2 block text-sm text-gray-700">N/A</label>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ <div class="flex items-center justify-between">
149
+ <label class="block text-sm font-medium text-gray-700">Equipment in good working condition</label>
150
+ <div class="flex space-x-4">
151
+ <div class="flex items-center">
152
+ <input id="equip-3-yes" name="equip-3" type="radio" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300">
153
+ <label for="equip-3-yes" class="ml-2 block text-sm text-gray-700">Yes</label>
154
+ </div>
155
+ <div class="flex items-center">
156
+ <input id="equip-3-no" name="equip-3" type="radio" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300">
157
+ <label for="equip-3-no" class="ml-2 block text-sm text-gray-700">No</label>
158
+ </div>
159
+ <div class="flex items-center">
160
+ <input id="equip-3-na" name="equip-3" type="radio" class="h-4 w-4 text-gray-600 focus:ring-gray-500 border-gray-300">
161
+ <label for="equip-3-na" class="ml-2 block text-sm text-gray-700">N/A</label>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ </div>
166
+ </div>
167
+
168
+ <div class="py-4">
169
+ <h2 class="text-lg font-medium text-gray-900 mb-4">Hazardous Materials</h2>
170
+ <div class="space-y-4">
171
+ <div class="flex items-center justify-between">
172
+ <label class="block text-sm font-medium text-gray-700">Proper labeling of containers</label>
173
+ <div class="flex space-x-4">
174
+ <div class="flex items-center">
175
+ <input id="hazmat-1-yes" name="hazmat-1" type="radio" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300">
176
+ <label for="hazmat-1-yes" class="ml-2 block text-sm text-gray-700">Yes</label>
177
+ </div>
178
+ <div class="flex items-center">
179
+ <input id="hazmat-1-no" name="hazmat-1" type="radio" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300">
180
+ <label for="hazmat-1-no" class="ml-2 block text-sm text-gray-700">No</label>
181
+ </div>
182
+ <div class="flex items-center">
183
+ <input id="hazmat-1-na" name="hazmat-1" type="radio" class="h-4 w-4 text-gray-600 focus:ring-gray-500 border-gray-300">
184
+ <label for="hazmat-1-na" class="ml-2 block text-sm text-gray-700">N/A</label>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ <div class="flex items-center justify-between">
189
+ <label class="block text-sm font-medium text-gray-700">MSDS/SDS available</label>
190
+ <div class="flex space-x-4">
191
+ <div class="flex items-center">
192
+ <input id="hazmat-2-yes" name="hazmat-2" type="radio" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300">
193
+ <label for="hazmat-2-yes" class="ml-2 block text-sm text-gray-700">Yes</label>
194
+ </div>
195
+ <div class="flex items-center">
196
+ <input id="hazmat-2-no" name="hazmat-2" type="radio" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300">
197
+ <label for="hazmat-2-no" class="ml-2 block text-sm text-gray-700">No</label>
198
+ </div>
199
+ <div class="flex items-center">
200
+ <input id="hazmat-2-na" name="hazmat-2" type="radio" class="h-4 w-4 text-gray-600 focus:ring-gray-500 border-gray-300">
201
+ <label for="hazmat-2-na" class="ml-2 block text-sm text-gray-700">N/A</label>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ <div class="flex items-center justify-between">
206
+ <label class="block text-sm font-medium text-gray-700">Proper storage of hazardous materials</label>
207
+ <div class="flex space-x-4">
208
+ <div class="flex items-center">
209
+ <input id="hazmat-3-yes" name="hazmat-3" type="radio" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300">
210
+ <label for="hazmat-3-yes" class="ml-2 block text-sm text-gray-700">Yes</label>
211
+ </div>
212
+ <div class="flex items-center">
213
+ <input id="hazmat-3-no" name="hazmat-3" type="radio" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300">
214
+ <label for="hazmat-3-no" class="ml-2 block text-sm text-gray-700">No</label>
215
+ </div>
216
+ <div class="flex items-center">
217
+ <input id="hazmat-3-na" name="hazmat-3" type="radio" class="h-4 w-4 text-gray-600 focus:ring-gray-500 border-gray-300">
218
+ <label for="hazmat-3-na" class="ml-2 block text-sm text-gray-700">N/A</label>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </div>
223
+ </div>
224
+
225
+ <div class="py-4">
226
+ <h2 class="text-lg font-medium text-gray-900 mb-4">Emergency Preparedness</h2>
227
+ <div class="space-y-4">
228
+ <div class="flex items-center justify-between">
229
+ <label class="block text-sm font-medium text-gray-700">Emergency exits unobstructed</label>
230
+ <div class="flex space-x-4">
231
+ <div class="flex items-center">
232
+ <input id="emerg-1-yes" name="emerg-1" type="radio" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300">
233
+ <label for="emerg-1-yes" class="ml-2 block text-sm text-gray-700">Yes</label>
234
+ </div>
235
+ <div class="flex items-center">
236
+ <input id="emerg-1-no" name="emerg-1" type="radio" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300">
237
+ <label for="emerg-1-no" class="ml-2 block text-sm text-gray-700">No</label>
238
+ </div>
239
+ <div class="flex items-center">
240
+ <input id="emerg-1-na" name="emerg-1" type="radio" class="h-4 w-4 text-gray-600 focus:ring-gray-500 border-gray-300">
241
+ <label for="emerg-1-na" class="ml-2 block text-sm text-gray-700">N/A</label>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ <div class="flex items-center justify-between">
246
+ <label class="block text-sm font-medium text-gray-700">Fire extinguishers charged and accessible</label>
247
+ <div class="flex space-x-4">
248
+ <div class="flex items-center">
249
+ <input id="emerg-2-yes" name="emerg-2" type="radio" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300">
250
+ <label for="emerg-2-yes" class="ml-2 block text-sm text-gray-700">Yes</label>
251
+ </div>
252
+ <div class="flex items-center">
253
+ <input id="emerg-2-no" name="emerg-2" type="radio" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300">
254
+ <label for="emerg-2-no" class="ml-2 block text-sm text-gray-700">No</label>
255
+ </div>
256
+ <div class="flex items-center">
257
+ <input id="emerg-2-na" name="emerg-2" type="radio" class="h-4 w-4 text-gray-600 focus:ring-gray-500 border-gray-300">
258
+ <label for="emerg-2-na" class="ml-2 block text-sm text-gray-700">N/A</label>
259
+ </div>
260
+ </div>
261
+ </div>
262
+ <div class="flex items-center justify-between">
263
+ <label class="block text-sm font-medium text-gray-700">First aid kits fully stocked</label>
264
+ <div class="flex space-x-4">
265
+ <div class="flex items-center">
266
+ <input id="emerg-3-yes" name="emerg-3" type="radio" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300">
267
+ <label for="emerg-3-yes" class="ml-2 block text-sm text-gray-700">Yes</label>
268
+ </div>
269
+ <div class="flex items-center">
270
+ <input id="emerg-3-no" name="emerg-3" type="radio" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300">
271
+ <label for="emerg-3-no" class="ml-2 block text-sm text-gray-700">No</label>
272
+ </div>
273
+ <div class="flex items-center">
274
+ <input id="emerg-3-na" name="emerg-3" type="radio" class="h-4 w-4 text-gray-600 focus:ring-gray-500 border-gray-300">
275
+ <label for="emerg-3-na" class="ml-2 block text-sm text-gray-700">N/A</label>
276
+ </div>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ </div>
281
+
282
+ <div class="py-4">
283
+ <label for="notes" class="block text-sm font-medium text-gray-700 mb-1">Additional Notes</label>
284
+ <textarea id="notes" rows="4" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Any additional observations or comments"></textarea>
285
+ </div>
286
+
287
+ <div class="py-4">
288
+ <label class="block text-sm font-medium text-gray-700 mb-1">Attach Photos (if applicable)</label>
289
+ <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
290
+ <div class="space-y-1 text-center">
291
+ <div class="flex text-sm text-gray-600">
292
+ <label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none">
293
+ <span>Upload files</span>
294
+ <input id="file-upload" name="file-upload" type="file" class="sr-only" multiple>
295
+ </label>
296
+ <p class="pl-1">or drag and drop</p>
297
+ </div>
298
+ <p class="text-xs text-gray-500">PNG, JPG up to 10MB</p>
299
+ </div>
300
+ </div>
301
+ </div>
302
+
303
+ <div class="flex justify-end space-x-3 pt-6">
304
+ <button type="button" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
305
+ Cancel
306
+ </button>
307
+ <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
308
+ Submit Inspection
309
+ </button>
310
+ </div>
311
+ </div>
312
+ </form>
313
+ </div>
314
+ </div>
315
+
316
+ <script>
317
+ feather.replace();
318
+ VANTA.WAVES({
319
+ el: "#vanta-bg",
320
+ color: 0x172b4d,
321
+ waveHeight: 15.00,
322
+ waveSpeed: 0.75,
323
+ zoom: 0.8
324
+ });
325
+ </script>
326
+ </body>
327
+ </html>
training-management.html ADDED
@@ -0,0 +1,255 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ```html
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Training Management | Safety Sentinel</title>
8
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
12
+ </head>
13
+ <body class="bg-gray-50">
14
+ <div id="vanta-bg" class="fixed inset-0 -z-10"></div>
15
+
16
+ <!-- Navigation -->
17
+ <nav class="bg-white bg-opacity-90 backdrop-blur-md border-b border-gray-200 fixed w-full z-10">
18
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
19
+ <div class="flex justify-between h-16">
20
+ <div class="flex items-center">
21
+ <div class="flex-shrink-0 flex items-center">
22
+ <i data-feather="shield" class="h-8 w-8 text-blue-600"></i>
23
+ <span class="ml-2 text-xl font-bold text-gray-900">Safety Sentinel</span>
24
+ </div>
25
+ </div>
26
+ <div class="flex items-center">
27
+ <a href="index.html" class="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Back to Dashboard</a>
28
+ </div>
29
+ </div>
30
+ </div>
31
+ </nav>
32
+
33
+ <!-- Main Content -->
34
+ <div class="pt-24 pb-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
35
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8">
36
+ <div>
37
+ <h1 class="text-3xl font-bold text-gray-900">Training Management</h1>
38
+ <p class="mt-2 text-sm text-gray-600">Schedule and manage employee training sessions</p>
39
+ </div>
40
+ <div class="mt-4 md:mt-0">
41
+ <a href="new-training.html" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
42
+ <i data-feather="plus" class="h-4 w-4 mr-2"></i> New Training
43
+ </a>
44
+ </div>
45
+ </div>
46
+
47
+ <!-- Training Sessions -->
48
+ <div class="bg-white shadow rounded-lg overflow-hidden mb-8">
49
+ <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
50
+ <h2 class="text-lg font-medium text-gray-900">Upcoming Training Sessions</h2>
51
+ <div class="flex space-x-3">
52
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Export</button>
53
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Print</button>
54
+ </div>
55
+ </div>
56
+ <div class="overflow-x-auto">
57
+ <table class="min-w-full divide-y divide-gray-200">
58
+ <thead class="bg-gray-50">
59
+ <tr>
60
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Training</th>
61
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date & Time</th>
62
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Location</th>
63
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Instructor</th>
64
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Attendees</th>
65
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
66
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
67
+ </tr>
68
+ </thead>
69
+ <tbody class="bg-white divide-y divide-gray-200">
70
+ <tr class="hover:bg-gray-50">
71
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">General Safety Orientation</td>
72
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jul 15, 2023 • 9:00 AM</td>
73
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Main Conference Room</td>
74
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">John Smith</td>
75
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12/15</td>
76
+ <td class="px-6 py-4 whitespace-nowrap">
77
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Scheduled</span>
78
+ </td>
79
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
80
+ <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">View</a>
81
+ <a href="#" class="text-gray-600 hover:text-gray-900">Edit</a>
82
+ </td>
83
+ </tr>
84
+ <tr class="hover:bg-gray-50">
85
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Hazardous Materials Refresher</td>
86
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jul 18, 2023 • 1:00 PM</td>
87
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Training Center B</td>
88
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sarah Johnson</td>
89
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">18/20</td>
90
+ <td class="px-6 py-4 whitespace-nowrap">
91
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Scheduled</span>
92
+ </td>
93
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
94
+ <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">View</a>
95
+ <a href="#" class="text-gray-600 hover:text-gray-900">Edit</a>
96
+ </td>
97
+ </tr>
98
+ <tr class="hover:bg-gray-50">
99
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Forklift Certification</td>
100
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jul 20, 2023 • 8:00 AM</td>
101
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Warehouse Area</td>
102
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Mike Rodriguez</td>
103
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5/5</td>
104
+ <td class="px-6 py-4 whitespace-nowrap">
105
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Confirmed</span>
106
+ </td>
107
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
108
+ <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">View</a>
109
+ <a href="#" class="text-gray-600 hover:text-gray-900">Edit</a>
110
+ </td>
111
+ </tr>
112
+ <tr class="hover:bg-gray-50">
113
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">First Aid & CPR</td>
114
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jul 22, 2023 • 10:00 AM</td>
115
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Medical Office</td>
116
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Dr. Emily Chen</td>
117
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Waitlist</td>
118
+ <td class="px-6 py-4 whitespace-nowrap">
119
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">Full</span>
120
+ </td>
121
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
122
+ <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">View</a>
123
+ <a href="#" class="text-gray-600 hover:text-gray-900">Edit</a>
124
+ </td>
125
+ </tr>
126
+ <tr class="hover:bg-gray-50">
127
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Emergency Response Drills</td>
128
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jul 25, 2023 • 2:00 PM</td>
129
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Facility-wide</td>
130
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Safety Team</td>
131
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">All</td>
132
+ <td class="px-6 py-4 whitespace-nowrap">
133
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span>
134
+ </td>
135
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
136
+ <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">View</a>
137
+ <a href="#" class="text-gray-600 hover:text-gray-900">Edit</a>
138
+ </td>
139
+ </tr>
140
+ </tbody>
141
+ </table>
142
+ </div>
143
+ <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
144
+ <div class="text-sm text-gray-500">Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">12</span> results</div>
145
+ <div class="flex space-x-2">
146
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">Previous</button>
147
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700">1</button>
148
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">2</button>
149
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">3</button>
150
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">Next</button>
151
+ </div>
152
+ </div>
153
+ </div>
154
+
155
+ <!-- Training Resources -->
156
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
157
+ <div class="bg-white p-6 rounded-lg shadow hover:shadow-md transition-shadow">
158
+ <div class="flex items-center mb-4">
159
+ <div class="flex-shrink-0 bg-blue-100 p-3 rounded-md">
160
+ <i data-feather="film" class="h-6 w-6 text-blue-600"></i>
161
+ </div>
162
+ <h2 class="ml-3 text-lg font-medium text-gray-900">Safety Orientation Video</h2>
163
+ </div>
164
+ <p class="text-sm text-gray-600 mb-4">Mandatory onboarding video for all new employees.</p>
165
+ <div class="flex justify-between items-center">
166
+ <span class="text-xs text-gray-500">Duration: 25 min</span>
167
+ <button class="text-sm text-blue-600 hover:text-blue-800 font-medium">View</button>
168
+ </div>
169
+ </div>
170
+ <div class="bg-white p-6 rounded-lg shadow hover:shadow-md transition-shadow">
171
+ <div class="flex items-center mb-4">
172
+ <div class="flex-shrink-0 bg-green-100 p-3 rounded-md">
173
+ <i data-feather="book" class="h-6 w-6 text-green-600"></i>
174
+ </div>
175
+ <h2 class="ml-3 text-lg font-medium text-gray-900">Hazardous Materials Guide</h2>
176
+ </div>
177
+ <p class="text-sm text-gray-600 mb-4">Comprehensive guide to handling hazardous substances.</p>
178
+ <div class="flex justify-between items-center">
179
+ <span class="text-xs text-gray-500">PDF • 5.2 MB</span>
180
+ <button class="text-sm text-blue-600 hover:text-blue-800 font-medium">Download</button>
181
+ </div>
182
+ </div>
183
+ <div class="bg-white p-6 rounded-lg shadow hover:shadow-md transition-shadow">
184
+ <div class="flex items-center mb-4">
185
+ <div class="flex-shrink-0 bg-purple-100 p-3 rounded-md">
186
+ <i data-feather="file-text" class="h-6 w-6 text-purple-600"></i>
187
+ </div>
188
+ <h2 class="ml-3 text-lg font-medium text-gray-900">PPE Policy Document</h2>
189
+ </div>
190
+ <p class="text-sm text-gray-600 mb-4">Updated personal protective equipment policy.</p>
191
+ <div class="flex justify-between items-center">
192
+ <span class="text-xs text-gray-500">PDF • 1.8 MB</span>
193
+ <button class="text-sm text-blue-600 hover:text-blue-800 font-medium">Download</button>
194
+ </div>
195
+ </div>
196
+ <div class="bg-white p-6 rounded-lg shadow hover:shadow-md transition-shadow">
197
+ <div class="flex items-center mb-4">
198
+ <div class="flex-shrink-0 bg-yellow-100 p-3 rounded-md">
199
+ <i data-feather="film" class="h-6 w-6 text-yellow-600"></i>
200
+ </div>
201
+ <h2 class="ml-3 text-lg font-medium text-gray-900">Emergency Procedures</h2>
202
+ </div>
203
+ <p class="text-sm text-gray-600 mb-4">Video demonstrating proper emergency response.</p>
204
+ <div class="flex justify-between items-center">
205
+ <span class="text-xs text-gray-500">Duration: 18 min</span>
206
+ <button class="text-sm text-blue-600 hover:text-blue-800 font-medium">View</button>
207
+ </div>
208
+ </div>
209
+ <div class="bg-white p-6 rounded-lg shadow hover:shadow-md transition-shadow">
210
+ <div class="flex items-center mb-4">
211
+ <div class="flex-shrink-0 bg-red-100 p-3 rounded-md">
212
+ <i data-feather="book" class="h-6 w-6 text-red-600"></i>
213
+ </div>
214
+ <h2 class="ml-3 text-lg font-medium text-gray-900">LOTO Manual</h2>
215
+ </div>
216
+ <p class="text-sm text-gray-600 mb-4">Lockout/Tagout procedures for maintenance staff.</p>
217
+ <div class="flex justify-between items-center">
218
+ <span class="text-xs text-gray-500">PDF • 3.5 MB</span>
219
+ <button class="text-sm text-blue-600 hover:text-blue-800 font-medium">Download</button>
220
+ </div>
221
+ </div>
222
+ <div class="bg-white p-6 rounded-lg shadow hover:shadow-md transition-shadow">
223
+ <div class="flex items-center mb-4">
224
+ <div class="flex-shrink-0 bg-indigo-100 p-3 rounded-md">
225
+ <i data-feather="plus" class="h-6 w-6 text-indigo-600"></i>
226
+ </div>
227
+ <h2 class="ml-3 text-lg font-medium text-gray-900">Add New Resource</h2>
228
+ </div>
229
+ <p class="text-sm text-gray-600 mb-4">Upload new training materials for employees.</p>
230
+ <div class="flex justify-between items-center">
231
+ <span class="text-xs text-gray-500">Various formats</span>
232
+ <button class="text-sm text-blue-600 hover:text-blue-800 font-medium">Upload</button>
233
+ </div>
234
+ </div>
235
+ </div>
236
+
237
+ <!-- Training Records -->
238
+ <div class="bg-white shadow rounded-lg overflow-hidden">
239
+ <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
240
+ <h2 class="text-lg font-medium text-gray-900">Employee Training Records</h2>
241
+ <div class="flex space-x-3">
242
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Export</button>
243
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Print</button>
244
+ </div>
245
+ </div>
246
+ <div class="overflow-x-auto">
247
+ <table class="min-w-full divide-y divide-gray-200">
248
+ <thead class="bg-gray-50">
249
+ <tr>
250
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Employee</th>
251
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Department</th>
252
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Required</th>
253
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Completed</th>
254
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Overdue</th>
255
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking
training.html ADDED
@@ -0,0 +1,460 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Training | Safety Sentinel</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
12
+ </head>
13
+ <body class="bg-gray-50">
14
+ <div id="vanta-bg" class="fixed inset-0 -z-10"></div>
15
+
16
+ <!-- Navigation -->
17
+ <nav class="bg-white bg-opacity-90 backdrop-blur-md border-b border-gray-200 fixed w-full z-10">
18
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
19
+ <div class="flex justify-between h-16">
20
+ <div class="flex items-center">
21
+ <div class="flex-shrink-0 flex items-center">
22
+ <i data-feather="shield" class="h-8 w-8 text-blue-600"></i>
23
+ <span class="ml-2 text-xl font-bold text-gray-900">Safety Sentinel</span>
24
+ </div>
25
+ </div>
26
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
27
+ <a href="index.html" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Dashboard</a>
28
+ <a href="incidents.html" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Incidents</a>
29
+ <a href="compliance.html" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Compliance</a>
30
+ <a href="reports.html" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Reports</a>
31
+ <a href="training.html" class="text-blue-600 border-b-2 border-blue-600 px-1 pt-1 text-sm font-medium">Training</a>
32
+ </div>
33
+ <div class="flex items-center">
34
+ <a href="new-report.html" class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
35
+ <i data-feather="plus" class="h-4 w-4 inline mr-1"></i> New Report
36
+ </a>
37
+ <div class="ml-4 relative flex-shrink-0">
38
+ <button type="button" class="bg-white rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" id="user-menu">
39
+ <span class="sr-only">Open user menu</span>
40
+ <img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/42" alt="">
41
+ </button>
42
+ </div>
43
+ </div>
44
+ </div>
45
+ </div>
46
+ </nav>
47
+
48
+ <!-- Main Content -->
49
+ <div class="pt-24 pb-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
50
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8">
51
+ <div>
52
+ <h1 class="text-3xl font-bold text-gray-900">Safety Training</h1>
53
+ <p class="mt-2 text-sm text-gray-600">Manage employee training and certifications</p>
54
+ </div>
55
+ <div class="mt-4 md:mt-0">
56
+ <a href="new-training.html" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
57
+ <i data-feather="plus" class="h-4 w-4 mr-2"></i> Schedule Training
58
+ </a>
59
+ </div>
60
+ </div>
61
+
62
+ <!-- Training Stats -->
63
+ <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-8">
64
+ <div class="bg-white overflow-hidden shadow rounded-lg">
65
+ <div class="px-4 py-5 sm:p-6">
66
+ <div class="flex items-center">
67
+ <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
68
+ <i data-feather="users" class="h-6 w-6 text-white"></i>
69
+ </div>
70
+ <div class="ml-5 w-0 flex-1">
71
+ <dl>
72
+ <dt class="text-sm font-medium text-gray-500 truncate">Employees Trained</dt>
73
+ <dd>
74
+ <div class="text-lg font-medium text-gray-900">143</div>
75
+ </dd>
76
+ </dl>
77
+ </div>
78
+ </div>
79
+ <div class="mt-4">
80
+ <div class="border-t border-gray-200 pt-3">
81
+ <p class="text-xs text-gray-500">
82
+ <span class="text-green-600 font-semibold">12</span> this month
83
+ </p>
84
+ </div>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ <div class="bg-white overflow-hidden shadow rounded-lg">
89
+ <div class="px-4 py-5 sm:p-6">
90
+ <div class="flex items-center">
91
+ <div class="flex-shrink-0 bg-green-500 rounded-md p-3">
92
+ <i data-feather="check-circle" class="h-6 w-6 text-white"></i>
93
+ </div>
94
+ <div class="ml-5 w-0 flex-1">
95
+ <dl>
96
+ <dt class="text-sm font-medium text-gray-500 truncate">Completion Rate</dt>
97
+ <dd>
98
+ <div class="text-lg font-medium text-gray-900">92%</div>
99
+ </dd>
100
+ </dl>
101
+ </div>
102
+ </div>
103
+ <div class="mt-4">
104
+ <div class="border-t border-gray-200 pt-3">
105
+ <p class="text-xs text-gray-500">
106
+ <span class="text-green-600 font-semibold">3%</span> from last quarter
107
+ </p>
108
+ </div>
109
+ </div>
110
+ </div>
111
+ </div>
112
+ <div class="bg-white overflow-hidden shadow rounded-lg">
113
+ <div class="px-4 py-5 sm:p-6">
114
+ <div class="flex items-center">
115
+ <div class="flex-shrink-0 bg-yellow-500 rounded-md p-3">
116
+ <i data-feather="alert-triangle" class="h-6 w-6 text-white"></i>
117
+ </div>
118
+ <div class="ml-5 w-0 flex-1">
119
+ <dl>
120
+ <dt class="text-sm font-medium text-gray-500 truncate">Overdue Trainings</dt>
121
+ <dd>
122
+ <div class="text-lg font-medium text-gray-900">7</div>
123
+ </dd>
124
+ </dl>
125
+ </div>
126
+ </div>
127
+ <div class="mt-4">
128
+ <div class="border-t border-gray-200 pt-3">
129
+ <p class="text-xs text-gray-500">
130
+ <span class="text-red-600 font-semibold">2</span> critical
131
+ </p>
132
+ </div>
133
+ </div>
134
+ </div>
135
+ </div>
136
+ <div class="bg-white overflow-hidden shadow rounded-lg">
137
+ <div class="px-4 py-5 sm:p-6">
138
+ <div class="flex items-center">
139
+ <div class="flex-shrink-0 bg-purple-500 rounded-md p-3">
140
+ <i data-feather="calendar" class="h-6 w-6 text-white"></i>
141
+ </div>
142
+ <div class="ml-5 w-0 flex-1">
143
+ <dl>
144
+ <dt class="text-sm font-medium text-gray-500 truncate">Upcoming Sessions</dt>
145
+ <dd>
146
+ <div class="text-lg font-medium text-gray-900">5</div>
147
+ </dd>
148
+ </dl>
149
+ </div>
150
+ </div>
151
+ <div class="mt-4">
152
+ <div class="border-t border-gray-200 pt-3">
153
+ <p class="text-xs text-gray-500">
154
+ Next in <span class="font-semibold">3 days</span>
155
+ </p>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ </div>
160
+ </div>
161
+
162
+ <!-- Training Programs -->
163
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
164
+ <div class="bg-white p-6 rounded-lg shadow lg:col-span-2">
165
+ <h2 class="text-lg font-medium text-gray-900 mb-4">Training Programs</h2>
166
+ <div class="space-y-4">
167
+ <div class="flex items-start p-4 border border-gray-200 rounded-lg">
168
+ <div class="flex-shrink-0 bg-blue-100 p-3 rounded-md">
169
+ <i data-feather="shield" class="h-5 w-5 text-blue-600"></i>
170
+ </div>
171
+ <div class="ml-4 flex-1">
172
+ <h3 class="text-sm font-medium text-gray-900">General Safety Orientation</h3>
173
+ <p class="text-sm text-gray-500 mt-1">Mandatory for all new employees. Covers basic safety protocols and emergency procedures.</p>
174
+ <div class="mt-2 flex flex-wrap gap-2">
175
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Annual</span>
176
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">45 min</span>
177
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">95% Complete</span>
178
+ </div>
179
+ </div>
180
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View</button>
181
+ </div>
182
+ <div class="flex items-start p-4 border border-gray-200 rounded-lg">
183
+ <div class="flex-shrink-0 bg-red-100 p-3 rounded-md">
184
+ <i data-feather="alert-octagon" class="h-5 w-5 text-red-600"></i>
185
+ </div>
186
+ <div class="ml-4 flex-1">
187
+ <h3 class="text-sm font-medium text-gray-900">Hazardous Materials Handling</h3>
188
+ <p class="text-sm text-gray-500 mt-1">Training for employees who work with or near hazardous chemicals.</p>
189
+ <div class="mt-2 flex flex-wrap gap-2">
190
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Biennial</span>
191
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">2 hrs</span>
192
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">87% Complete</span>
193
+ </div>
194
+ </div>
195
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View</button>
196
+ </div>
197
+ <div class="flex items-start p-4 border border-gray-200 rounded-lg">
198
+ <div class="flex-shrink-0 bg-yellow-100 p-3 rounded-md">
199
+ <i data-feather="zap" class="h-5 w-5 text-yellow-600"></i>
200
+ </div>
201
+ <div class="ml-4 flex-1">
202
+ <h3 class="text-sm font-medium text-gray-900">LOTO (Lockout/Tagout)</h3>
203
+ <p class="text-sm text-gray-500 mt-1">Required for maintenance personnel to safely service equipment.</p>
204
+ <div class="mt-2 flex flex-wrap gap-2">
205
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Annual</span>
206
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">1.5 hrs</span>
207
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">76% Complete</span>
208
+ </div>
209
+ </div>
210
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View</button>
211
+ </div>
212
+ <div class="flex items-start p-4 border border-gray-200 rounded-lg">
213
+ <div class="flex-shrink-0 bg-green-100 p-3 rounded-md">
214
+ <i data-feather="activity" class="h-5 w-5 text-green-600"></i>
215
+ </div>
216
+ <div class="ml-4 flex-1">
217
+ <h3 class="text-sm font-medium text-gray-900">Emergency Response</h3>
218
+ <p class="text-sm text-gray-500 mt-1">Prepares employees for fire, chemical spills, and other emergencies.</p>
219
+ <div class="mt-2 flex flex-wrap gap-2">
220
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Annual</span>
221
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">1 hr</span>
222
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">91% Complete</span>
223
+ </div>
224
+ </div>
225
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View</button>
226
+ </div>
227
+ </div>
228
+ </div>
229
+
230
+ <!-- Upcoming Sessions -->
231
+ <div class="bg-white p-6 rounded-lg shadow">
232
+ <h2 class="text-lg font-medium text-gray-900 mb-4">Upcoming Training Sessions</h2>
233
+ <div class="space-y-4">
234
+ <div class="flex items-start">
235
+ <div class="flex-shrink-0 mt-1">
236
+ <div class="bg-blue-100 p-2 rounded-full">
237
+ <i data-feather="calendar" class="h-5 w-5 text-blue-600"></i>
238
+ </div>
239
+ </div>
240
+ <div class="ml-3 flex-1">
241
+ <p class="text-sm font-medium text-gray-900">General Safety Orientation</p>
242
+ <p class="text-sm text-gray-500">Jul 15, 2023 • 9:00 AM - 10:00 AM</p>
243
+ <div class="mt-1 flex flex-wrap gap-2">
244
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">12 seats left</span>
245
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Main Conference Room</span>
246
+ </div>
247
+ </div>
248
+ </div>
249
+ <div class="flex items-start">
250
+ <div class="flex-shrink-0 mt-1">
251
+ <div class="bg-red-100 p-2 rounded-full">
252
+ <i data-feather="calendar" class="h-5 w-5 text-red-600"></i>
253
+ </div>
254
+ </div>
255
+ <div class="ml-3 flex-1">
256
+ <p class="text-sm font-medium text-gray-900">Hazardous Materials Refresher</p>
257
+ <p class="text-sm text-gray-500">Jul 18, 2023 • 1:00 PM - 3:00 PM</p>
258
+ <div class="mt-1 flex flex-wrap gap-2">
259
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">2 seats left</span>
260
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Training Center B</span>
261
+ </div>
262
+ </div>
263
+ </div>
264
+ <div class="flex items-start">
265
+ <div class="flex-shrink-0 mt-1">
266
+ <div class="bg-yellow-100 p-2 rounded-full">
267
+ <i data-feather="calendar" class="h-5 w-5 text-yellow-600"></i>
268
+ </div>
269
+ </div>
270
+ <div class="ml-3 flex-1">
271
+ <p class="text-sm font-medium text-gray-900">Forklift Certification</p>
272
+ <p class="text-sm text-gray-500">Jul 20, 2023 • 8:00 AM - 12:00 PM</p>
273
+ <div class="mt-1 flex flex-wrap gap-2">
274
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">5 seats left</span>
275
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Warehouse Area</span>
276
+ </div>
277
+ </div>
278
+ </div>
279
+ <div class="flex items-start">
280
+ <div class="flex-shrink-0 mt-1">
281
+ <div class="bg-purple-100 p-2 rounded-full">
282
+ <i data-feather="calendar" class="h-5 w-5 text-purple-600"></i>
283
+ </div>
284
+ </div>
285
+ <div class="ml-3 flex-1">
286
+ <p class="text-sm font-medium text-gray-900">First Aid & CPR</p>
287
+ <p class="text-sm text-gray-500">Jul 22, 2023 • 10:00 AM - 2:00 PM</p>
288
+ <div class="mt-1 flex flex-wrap gap-2">
289
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">Waitlist</span>
290
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Medical Office</span>
291
+ </div>
292
+ </div>
293
+ </div>
294
+ </div>
295
+ <div class="mt-4">
296
+ <button class="w-full text-center text-blue-600 hover:text-blue-800 text-sm font-medium">View All Scheduled Sessions</button>
297
+ </div>
298
+ </div>
299
+ </div>
300
+
301
+ <!-- Training Progress -->
302
+ <div class="bg-white p-6 rounded-lg shadow mb-8">
303
+ <h2 class="text-lg font-medium text-gray-900 mb-4">Training Progress by Department</h2>
304
+ <div class="overflow-x-auto">
305
+ <table class="min-w-full divide-y divide-gray-200">
306
+ <thead class="bg-gray-50">
307
+ <tr>
308
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Department</th>
309
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Required</th>
310
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Completed</th>
311
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Overdue</th>
312
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Completion</th>
313
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
314
+ </tr>
315
+ </thead>
316
+ <tbody class="bg-white divide-y divide-gray-200">
317
+ <tr>
318
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Processing</td>
319
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12</td>
320
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">11</td>
321
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1</td>
322
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">92%</td>
323
+ <td class="px-6 py-4 whitespace-nowrap">
324
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">On Track</span>
325
+ </td>
326
+ </tr>
327
+ <tr>
328
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Maintenance</td>
329
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15</td>
330
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10</td>
331
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5</td>
332
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">67%</td>
333
+ <td class="px-6 py-4 whitespace-nowrap">
334
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Needs Attention</span>
335
+ </td>
336
+ </tr>
337
+ <tr>
338
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Logistics</td>
339
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10</td>
340
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">9</td>
341
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1</td>
342
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">90%</td>
343
+ <td class="px-6 py-4 whitespace-nowrap">
344
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">On Track</span>
345
+ </td>
346
+ </tr>
347
+ <tr>
348
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Storage</td>
349
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8</td>
350
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">7</td>
351
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1</td>
352
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">88%</td>
353
+ <td class="px-6 py-4 whitespace-nowrap">
354
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">On Track</span>
355
+ </td>
356
+ </tr>
357
+ <tr>
358
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Administration</td>
359
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5</td>
360
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5</td>
361
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">0</td>
362
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">100%</td>
363
+ <td class="px-6 py-4 whitespace-nowrap">
364
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Complete</span>
365
+ </td>
366
+ </tr>
367
+ </tbody>
368
+ </table>
369
+ </div>
370
+ </div>
371
+
372
+ <!-- Training Charts -->
373
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
374
+ <div class="bg-white p-6 rounded-lg shadow">
375
+ <h2 class="text-lg font-medium text-gray-900 mb-4">Training Completion</h2>
376
+ <div class="h-64">
377
+ <canvas id="trainingCompletionChart"></canvas>
378
+ </div>
379
+ </div>
380
+ <div class="bg-white p-6 rounded-lg shadow">
381
+ <h2 class="text-lg font-medium text-gray-900 mb-4">Training Types</h2>
382
+ <div class="h-64">
383
+ <canvas id="trainingTypesChart"></canvas>
384
+ </div>
385
+ </div>
386
+ </div>
387
+ </div>
388
+
389
+ <script>
390
+ feather.replace();
391
+ VANTA.WAVES({
392
+ el: "#vanta-bg",
393
+ color: 0x172b4d,
394
+ waveHeight: 15.00,
395
+ waveSpeed: 0.75,
396
+ zoom: 0.8
397
+ });
398
+
399
+ document.addEventListener('DOMContentLoaded', function() {
400
+ // Training Completion Chart
401
+ const completionCtx = document.getElementById('trainingCompletionChart').getContext('2d');
402
+ const completionChart = new Chart(completionCtx, {
403
+ type: 'line',
404
+ data: {
405
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
406
+ datasets: [{
407
+ label: 'Completion Rate',
408
+ data: [75, 78, 82, 85, 88, 92],
409
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
410
+ borderColor: 'rgba(59, 130, 246, 1)',
411
+ borderWidth: 2,
412
+ fill: true,
413
+ tension: 0.4
414
+ }]
415
+ },
416
+ options: {
417
+ responsive: true,
418
+ maintainAspectRatio: false,
419
+ scales: {
420
+ y: {
421
+ beginAtZero: false,
422
+ min: 70,
423
+ max: 100,
424
+ ticks: {
425
+ callback: function(value) {
426
+ return value + '%';
427
+ }
428
+ }
429
+ }
430
+ }
431
+ }
432
+ });
433
+
434
+ // Training Types Chart
435
+ const typesCtx = document.getElementById('trainingTypesChart').getContext('2d');
436
+ const typesChart = new Chart(typesCtx, {
437
+ type: 'doughnut',
438
+ data: {
439
+ labels: ['Safety Orientation', 'Hazardous Materials', 'Equipment', 'Emergency', 'Other'],
440
+ datasets: [{
441
+ data: [35, 25, 20, 15, 5],
442
+ backgroundColor: [
443
+ 'rgba(59, 130, 246, 0.7)',
444
+ 'rgba(239, 68, 68, 0.7)',
445
+ 'rgba(234, 179, 8, 0.7)',
446
+ 'rgba(16, 185, 129, 0.7)',
447
+ 'rgba(139, 92, 246, 0.7)'
448
+ ],
449
+ borderWidth: 1
450
+ }]
451
+ },
452
+ options: {
453
+ responsive: true,
454
+ maintainAspectRatio: false
455
+ }
456
+ });
457
+ });
458
+ </script>
459
+ </body>
460
+ </html>