Hugging Face's logo

Spaces:
balaji-detect
/
safetyguardian-sentinel
Running

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

Generate similar page for reports tab at top

Browse files
Files changed (2) hide show
  1. index.html +2 -2
  2. reports.html +307 -162
index.html CHANGED
@@ -44,8 +44,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>
50
  <div class="flex items-center">
51
  <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
  <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="reports.html" 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>
50
  <div class="flex items-center">
51
  <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">
reports.html CHANGED
@@ -8,6 +8,17 @@
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>
@@ -24,20 +35,19 @@
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>
@@ -46,203 +56,338 @@
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>
 
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
+ .report-card:hover {
18
+ transform: translateY(-3px);
19
+ transition: all 0.2s ease;
20
+ }
21
+ </style>
22
  </head>
23
  <body class="bg-gray-50">
24
  <div id="vanta-bg" class="fixed inset-0 -z-10"></div>
 
35
  </div>
36
  <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
37
  <a href="index.html" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Dashboard</a>
38
+ <a href="#" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Incidents</a>
39
+ <a href="#" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Compliance</a>
40
  <a href="reports.html" class="text-blue-600 border-b-2 border-blue-600 px-1 pt-1 text-sm font-medium">Reports</a>
41
+ <a href="#" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Training</a>
42
  </div>
43
  <div class="flex items-center">
 
 
 
44
  <div class="ml-4 relative flex-shrink-0">
45
+ <div>
46
+ <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">
47
+ <span class="sr-only">Open user menu</span>
48
+ <img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/42" alt="">
49
+ </button>
50
+ </div>
51
  </div>
52
  </div>
53
  </div>
 
56
 
57
  <!-- Main Content -->
58
  <div class="pt-24 pb-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
59
+ <!-- Header -->
60
  <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8">
61
  <div>
62
  <h1 class="text-3xl font-bold text-gray-900">Safety Reports</h1>
63
+ <p class="mt-2 text-sm text-gray-600">View and analyze all safety reports and statistics</p>
64
  </div>
65
  <div class="mt-4 md:mt-0">
66
+ <a href="report-generator.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">
67
+ <i data-feather="file-text" class="h-4 w-4 inline mr-1"></i> Generate New Report
68
  </a>
69
  </div>
70
  </div>
71
 
72
+ <!-- Filters -->
73
+ <div class="bg-white p-4 rounded-lg shadow mb-8">
74
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
75
+ <div>
76
+ <label class="block text-sm font-medium text-gray-700 mb-1">Report Type</label>
77
+ <select 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">
78
+ <option>All Types</option>
79
+ <option>Incident Reports</option>
80
+ <option>Near Misses</option>
81
+ <option>Hazard Identifications</option>
82
+ </select>
83
  </div>
84
+ <div>
85
+ <label class="block text-sm font-medium text-gray-700 mb-1">Severity</label>
86
+ <select 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">
87
+ <option>All Levels</option>
88
+ <option>Low</option>
89
+ <option>Medium</option>
90
+ <option>High</option>
91
+ <option>Critical</option>
92
+ </select>
93
  </div>
94
+ <div>
95
+ <label class="block text-sm font-medium text-gray-700 mb-1">Date Range</label>
96
+ <select 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">
97
+ <option>Last 30 Days</option>
98
+ <option>Last 90 Days</option>
99
+ <option>This Year</option>
100
+ <option>All Time</option>
101
+ </select>
102
  </div>
103
+ <div>
104
+ <label class="block text-sm font-medium text-gray-700 mb-1">Department</label>
105
+ <select 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">
106
+ <option>All Departments</option>
107
+ <option>Processing</option>
108
+ <option>Maintenance</option>
109
+ <option>Logistics</option>
110
+ <option>Storage</option>
111
+ </select>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
112
  </div>
113
  </div>
114
  </div>
115
 
116
+ <!-- Reports Summary -->
117
+ <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-8">
118
+ <div class="bg-white overflow-hidden shadow rounded-lg">
119
+ <div class="px-4 py-5 sm:p-6">
120
+ <div class="flex items-center">
121
+ <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
122
+ <i data-feather="file-text" class="h-6 w-6 text-white"></i>
 
 
 
 
 
 
 
 
 
 
123
  </div>
124
+ <div class="ml-5 w-0 flex-1">
125
+ <dl>
126
+ <dt class="text-sm font-medium text-gray-500 truncate">Total Reports</dt>
127
+ <dd>
128
+ <div class="text-lg font-medium text-gray-900">127</div>
129
+ </dd>
130
+ </dl>
131
  </div>
132
  </div>
133
  </div>
134
+ </div>
135
+ <div class="bg-white overflow-hidden shadow rounded-lg">
136
+ <div class="px-4 py-5 sm:p-6">
137
+ <div class="flex items-center">
138
+ <div class="flex-shrink-0 bg-red-500 rounded-md p-3">
139
+ <i data-feather="alert-triangle" class="h-6 w-6 text-white"></i>
 
 
 
 
140
  </div>
141
+ <div class="ml-5 w-0 flex-1">
142
+ <dl>
143
+ <dt class="text-sm font-medium text-gray-500 truncate">Open Incidents</dt>
144
+ <dd>
145
+ <div class="text-lg font-medium text-gray-900">14</div>
146
+ </dd>
147
+ </dl>
148
  </div>
149
  </div>
150
  </div>
151
+ </div>
152
+ <div class="bg-white overflow-hidden shadow rounded-lg">
153
+ <div class="px-4 py-5 sm:p-6">
154
+ <div class="flex items-center">
155
+ <div class="flex-shrink-0 bg-green-500 rounded-md p-3">
156
+ <i data-feather="check-circle" class="h-6 w-6 text-white"></i>
 
 
 
 
157
  </div>
158
+ <div class="ml-5 w-0 flex-1">
159
+ <dl>
160
+ <dt class="text-sm font-medium text-gray-500 truncate">Resolved</dt>
161
+ <dd>
162
+ <div class="text-lg font-medium text-gray-900">89%</div>
163
+ </dd>
164
+ </dl>
165
  </div>
166
  </div>
167
  </div>
168
+ </div>
169
+ <div class="bg-white overflow-hidden shadow rounded-lg">
170
+ <div class="px-4 py-5 sm:p-6">
171
+ <div class="flex items-center">
172
+ <div class="flex-shrink-0 bg-yellow-500 rounded-md p-3">
173
+ <i data-feather="clock" class="h-6 w-6 text-white"></i>
 
 
 
 
174
  </div>
175
+ <div class="ml-5 w-0 flex-1">
176
+ <dl>
177
+ <dt class="text-sm font-medium text-gray-500 truncate">Avg Resolution</dt>
178
+ <dd>
179
+ <div class="text-lg font-medium text-gray-900">3.2 days</div>
180
+ </dd>
181
+ </dl>
182
  </div>
183
  </div>
184
  </div>
185
  </div>
186
+ </div>
187
+
188
+ <!-- Report Trends Chart -->
189
+ <div class="bg-white p-6 rounded-lg shadow mb-8">
190
+ <div class="flex items-center justify-between mb-4">
191
+ <h2 class="text-lg font-medium text-gray-900">Report Trends</h2>
192
+ <div class="flex space-x-2">
193
+ <button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-md text-sm font-medium">Monthly</button>
194
+ <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-md text-sm font-medium">Quarterly</button>
195
+ <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-md text-sm font-medium">Yearly</button>
196
+ </div>
197
+ </div>
198
+ <div class="h-80">
199
+ <canvas id="trendsChart"></canvas>
200
+ </div>
201
+ </div>
202
+
203
+ <!-- Reports List -->
204
+ <div class="bg-white p-6 rounded-lg shadow">
205
+ <div class="flex items-center justify-between mb-4">
206
+ <h2 class="text-lg font-medium text-gray-900">Recent Reports</h2>
207
+ <div class="flex space-x-2">
208
+ <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-md text-sm font-medium">
209
+ <i data-feather="download" class="h-4 w-4 inline mr-1"></i> Export
210
+ </button>
211
+ </div>
212
+ </div>
213
+
214
+ <div class="overflow-x-auto">
215
+ <table class="min-w-full divide-y divide-gray-200">
216
+ <thead class="bg-gray-50">
217
+ <tr>
218
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Report ID</th>
219
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
220
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
221
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Location</th>
222
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Severity</th>
223
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
224
+ <th scope="col" class="relative px-6 py-3">
225
+ <span class="sr-only">Actions</span>
226
+ </th>
227
+ </tr>
228
+ </thead>
229
+ <tbody class="bg-white divide-y divide-gray-200">
230
+ <tr class="hover:bg-gray-50">
231
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#SR-2023-042</td>
232
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Incident</td>
233
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 15, 2023</td>
234
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">North Processing</td>
235
+ <td class="px-6 py-4 whitespace-nowrap">
236
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">High</span>
237
+ </td>
238
+ <td class="px-6 py-4 whitespace-nowrap">
239
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Investigation</span>
240
+ </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 class="hover:bg-gray-50">
246
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#SR-2023-041</td>
247
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Near Miss</td>
248
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 14, 2023</td>
249
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Loading Dock</td>
250
+ <td class="px-6 py-4 whitespace-nowrap">
251
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Medium</span>
252
+ </td>
253
+ <td class="px-6 py-4 whitespace-nowrap">
254
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Resolved</span>
255
+ </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 class="hover:bg-gray-50">
261
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#SR-2023-040</td>
262
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Hazard</td>
263
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 12, 2023</td>
264
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Compression Station</td>
265
+ <td class="px-6 py-4 whitespace-nowrap">
266
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-orange-100 text-orange-800">High</span>
267
+ </td>
268
+ <td class="px-6 py-4 whitespace-nowrap">
269
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Resolved</span>
270
+ </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 class="hover:bg-gray-50">
276
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#SR-2023-039</td>
277
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Suggestion</td>
278
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 10, 2023</td>
279
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Facility-wide</td>
280
+ <td class="px-6 py-4 whitespace-nowrap">
281
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">N/A</span>
282
+ </td>
283
+ <td class="px-6 py-4 whitespace-nowrap">
284
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Review</span>
285
+ </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
+ </tbody>
291
+ </table>
292
+ </div>
293
+
294
+ <div class="mt-4 flex items-center justify-between">
295
+ <div class="text-sm text-gray-500">
296
+ Showing <span class="font-medium">1</span> to <span class="font-medium">4</span> of <span class="font-medium">127</span> results
297
+ </div>
298
+ <div class="flex space-x-2">
299
+ <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-md text-sm font-medium">
300
+ Previous
301
+ </button>
302
+ <button class="px-3 py-1 bg-blue-600 text-white rounded-md text-sm font-medium">
303
+ 1
304
+ </button>
305
+ <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-md text-sm font-medium">
306
+ 2
307
+ </button>
308
+ <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-md text-sm font-medium">
309
+ Next
310
+ </button>
311
+ </div>
312
  </div>
313
  </div>
314
  </div>
315
 
316
  <script>
317
+ // Vanta.js Background
318
  VANTA.WAVES({
319
  el: "#vanta-bg",
320
+ mouseControls: true,
321
+ touchControls: true,
322
+ gyroControls: false,
323
  color: 0x172b4d,
324
  waveHeight: 15.00,
325
  waveSpeed: 0.75,
326
  zoom: 0.8
327
  });
328
+
329
+ // Chart.js Implementation
330
+ document.addEventListener('DOMContentLoaded', function() {
331
+ feather.replace();
332
+
333
+ const ctx = document.getElementById('trendsChart').getContext('2d');
334
+ const trendsChart = new Chart(ctx, {
335
+ type: 'line',
336
+ data: {
337
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
338
+ datasets: [
339
+ {
340
+ label: 'Incident Reports',
341
+ data: [12, 8, 15, 10, 14, 9],
342
+ borderColor: 'rgba(239, 68, 68, 1)',
343
+ backgroundColor: 'rgba(239, 68, 68, 0.1)',
344
+ borderWidth: 2,
345
+ tension: 0.3,
346
+ fill: true
347
+ },
348
+ {
349
+ label: 'Near Misses',
350
+ data: [8, 10, 12, 7, 9, 6],
351
+ borderColor: 'rgba(234, 179, 8, 1)',
352
+ backgroundColor: 'rgba(234, 179, 8, 0.1)',
353
+ borderWidth: 2,
354
+ tension: 0.3,
355
+ fill: true
356
+ },
357
+ {
358
+ label: 'Hazard IDs',
359
+ data: [5, 7, 4, 6, 8, 5],
360
+ borderColor: 'rgba(59, 130, 246, 1)',
361
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
362
+ borderWidth: 2,
363
+ tension: 0.3,
364
+ fill: true
365
+ }
366
+ ]
367
+ },
368
+ options: {
369
+ responsive: true,
370
+ maintainAspectRatio: false,
371
+ plugins: {
372
+ legend: {
373
+ position: 'top',
374
+ },
375
+ tooltip: {
376
+ mode: 'index',
377
+ intersect: false,
378
+ }
379
+ },
380
+ scales: {
381
+ y: {
382
+ beginAtZero: true,
383
+ ticks: {
384
+ stepSize: 5
385
+ }
386
+ }
387
+ }
388
+ }
389
+ });
390
+ });
391
  </script>
392
  </body>
393
  </html>