Hugging Face's logo

Spaces:
balaji-detect
/
safetyguardian-sentinel
Running

App Files Community
balaji-detect commited on
Commit
b56a815
·
verified ·
1 Parent(s): 830b132

Generate page for Incidents page as well

Browse files
Files changed (2) hide show
  1. incidents.html +393 -0
  2. index.html +2 -2
incidents.html ADDED
@@ -0,0 +1,393 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Incidents | 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
+ <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>
24
+
25
+ <!-- Navigation -->
26
+ <nav class="bg-white bg-opacity-90 backdrop-blur-md border-b border-gray-200 fixed w-full z-10">
27
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
28
+ <div class="flex justify-between h-16">
29
+ <div class="flex items-center">
30
+ <div class="flex-shrink-0 flex items-center">
31
+ <i data-feather="shield" class="h-8 w-8 text-blue-600"></i>
32
+ <span class="ml-2 text-xl font-bold text-gray-900">Safety Sentinel</span>
33
+ </div>
34
+ </div>
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>
56
+ </div>
57
+ </nav>
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,
373
+ maintainAspectRatio: false,
374
+ scales: {
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
+ });
390
+ });
391
+ </script>
392
+ </body>
393
+ </html>
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="#" 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="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>