Hugging Face's logo

Spaces:
alterzick
/
rig-performance-dashboard
Running

App Files Community
alterzick commited on
Commit
6bf7923
·
verified ·
1 Parent(s): 398224e

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +800 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Rig Performance Dashboard
3
- emoji: 🦀
4
  colorFrom: red
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: rig-performance-dashboard
3
+ emoji: 🐳
4
  colorFrom: red
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,800 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Rig Performance Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#4F46E5',
15
+ secondary: '#10B981',
16
+ danger: '#EF4444',
17
+ warning: '#F59E0B',
18
+ info: '#3B82F6'
19
+ }
20
+ }
21
+ }
22
+ }
23
+
24
+ // Sample data for 10 rigs
25
+ const sampleData = {
26
+ 'Rig 101': {
27
+ unsafeActions: 8,
28
+ unsafeConditions: 12,
29
+ stopWorkAuthority: 5,
30
+ dataSelfService: 72,
31
+ reliabilityScore: 85,
32
+ complianceScore: 88,
33
+ verification: 28,
34
+ cctvFindings: 8,
35
+ nptRig: 3.2
36
+ },
37
+ 'Rig 102': {
38
+ unsafeActions: 12,
39
+ unsafeConditions: 18,
40
+ stopWorkAuthority: 8,
41
+ dataSelfService: 65,
42
+ reliabilityScore: 78,
43
+ complianceScore: 82,
44
+ verification: 22,
45
+ cctvFindings: 15,
46
+ nptRig: 4.8
47
+ },
48
+ 'Rig 103': {
49
+ unsafeActions: 5,
50
+ unsafeConditions: 9,
51
+ stopWorkAuthority: 3,
52
+ dataSelfService: 82,
53
+ reliabilityScore: 92,
54
+ complianceScore: 91,
55
+ verification: 35,
56
+ cctvFindings: 5,
57
+ nptRig: 2.7
58
+ },
59
+ 'Rig 104': {
60
+ unsafeActions: 15,
61
+ unsafeConditions: 22,
62
+ stopWorkAuthority: 10,
63
+ dataSelfService: 58,
64
+ reliabilityScore: 72,
65
+ complianceScore: 75,
66
+ verification: 18,
67
+ cctvFindings: 22,
68
+ nptRig: 5.5
69
+ },
70
+ 'Rig 105': {
71
+ unsafeActions: 18,
72
+ unsafeConditions: 25,
73
+ stopWorkAuthority: 12,
74
+ dataSelfService: 48,
75
+ reliabilityScore: 68,
76
+ complianceScore: 72,
77
+ verification: 15,
78
+ cctvFindings: 28,
79
+ nptRig: 6.8
80
+ },
81
+ 'Rig 106': {
82
+ unsafeActions: 7,
83
+ unsafeConditions: 10,
84
+ stopWorkAuthority: 4,
85
+ dataSelfService: 75,
86
+ reliabilityScore: 88,
87
+ complianceScore: 86,
88
+ verification: 32,
89
+ cctvFindings: 7,
90
+ nptRig: 3.0
91
+ },
92
+ 'Rig 107': {
93
+ unsafeActions: 10,
94
+ unsafeConditions: 15,
95
+ stopWorkAuthority: 6,
96
+ dataSelfService: 68,
97
+ reliabilityScore: 82,
98
+ complianceScore: 84,
99
+ verification: 25,
100
+ cctvFindings: 12,
101
+ nptRig: 4.2
102
+ },
103
+ 'Rig 108': {
104
+ unsafeActions: 20,
105
+ unsafeConditions: 28,
106
+ stopWorkAuthority: 15,
107
+ dataSelfService: 42,
108
+ reliabilityScore: 65,
109
+ complianceScore: 68,
110
+ verification: 12,
111
+ cctvFindings: 32,
112
+ nptRig: 7.5
113
+ },
114
+ 'Rig 109': {
115
+ unsafeActions: 6,
116
+ unsafeConditions: 8,
117
+ stopWorkAuthority: 3,
118
+ dataSelfService: 80,
119
+ reliabilityScore: 90,
120
+ complianceScore: 89,
121
+ verification: 38,
122
+ cctvFindings: 4,
123
+ nptRig: 2.5
124
+ },
125
+ 'Rig 110': {
126
+ unsafeActions: 14,
127
+ unsafeConditions: 20,
128
+ stopWorkAuthority: 9,
129
+ dataSelfService: 62,
130
+ reliabilityScore: 75,
131
+ complianceScore: 78,
132
+ verification: 20,
133
+ cctvFindings: 18,
134
+ nptRig: 5.2
135
+ }
136
+ };
137
+
138
+ let currentRig = 'Rig 101';
139
+
140
+ function updateDashboard(rig) {
141
+ currentRig = rig;
142
+ const data = sampleData[rig];
143
+
144
+ // Calculate overall score (weighted average)
145
+ const overallScore = Math.round(
146
+ (getScore(data.unsafeActions + data.unsafeConditions, 20, false) * 0.15 +
147
+ getScore(data.stopWorkAuthority, 5, false) * 0.1 +
148
+ getScore(data.dataSelfService, 60, true) * 0.1 +
149
+ getScore((data.reliabilityScore + data.complianceScore)/2, 80, true) * 0.25 +
150
+ getScore(data.verification, 25, true) * 0.1 +
151
+ getScore(100 - data.cctvFindings, 85, true) * 0.15 +
152
+ getScore(100 - (data.nptRig/10*100), 70, true) * 0.25)
153
+ );
154
+
155
+ document.getElementById('overall-score').textContent = `${overallScore}%`;
156
+ document.getElementById('overall-gauge-value').textContent = `${overallScore}%`;
157
+ document.querySelector('#overall-card .progress-bar').style.width = `${overallScore}%`;
158
+
159
+ // Update indicator cards
160
+ updateIndicator(1, 'Unsafe Actions', 'Unsafe Action Findings', data.unsafeActions, 10, false, 'cases');
161
+ updateIndicator(2, 'Unsafe Conditions', 'Unsafe Condition Findings', data.unsafeConditions, 15, false, 'cases');
162
+ updateIndicator(3, 'Stop Work Authority', 'SWA Findings', data.stopWorkAuthority, 5, false, 'cases');
163
+ updateIndicator(4, 'Data Self-Service', 'Employee Self-Service Rate', data.dataSelfService, 60, true, '%');
164
+ updateIndicator(5, 'Reliability Score', 'Equipment Reliability', data.reliabilityScore, 80, true, '%');
165
+ updateIndicator(6, 'Compliance Score', 'Regulatory Compliance', data.complianceScore, 80, true, '%');
166
+ updateIndicator(7, 'Verification', 'V&V Activities Completed', data.verification, 25, true, '%');
167
+ updateIndicator(8, 'CCTV Findings', 'i-CCTV Findings', data.cctvFindings, 10, false, 'cases');
168
+ updateIndicator(9, 'NPT Rig', 'Non-Productive Time', data.nptRig, 3.5, false, 'hours');
169
+
170
+ // Update rig selector
171
+ document.querySelectorAll('.rig-option').forEach(option => {
172
+ option.classList.remove('bg-primary', 'text-white');
173
+ if (option.textContent === rig) {
174
+ option.classList.add('bg-primary', 'text-white');
175
+ }
176
+ });
177
+
178
+ // Update good/needs attention/critical counts
179
+ updateStatusCounts();
180
+ }
181
+
182
+ function updateIndicator(id, name, description, current, target, higherIsBetter, unit) {
183
+ const card = document.getElementById(`indicator-${id}`);
184
+ const score = getScore(current, target, higherIsBetter);
185
+
186
+ // Update status badge
187
+ const statusBadge = card.querySelector('.status-badge');
188
+ statusBadge.className = 'px-2 py-1 text-xs font-semibold rounded-full status-badge ' +
189
+ getStatusClass(score);
190
+ statusBadge.textContent = getStatusText(score);
191
+
192
+ // Update values
193
+ card.querySelector('.indicator-value').textContent = `${current} ${unit}`;
194
+ card.querySelector('.indicator-target').textContent = `${higherIsBetter ? '≥' : '≤'} ${target} ${unit}`;
195
+
196
+ // Update progress bar
197
+ const progressBar = card.querySelector('.progress-bar');
198
+ progressBar.style.width = `${higherIsBetter ?
199
+ Math.min(100, (current / target) * 100) :
200
+ Math.max(0, 100 - (current / target) * 100)}%`;
201
+ progressBar.className = `progress-bar h-2 rounded-full ${getStatusColor(score)}`;
202
+ }
203
+
204
+ function getScore(current, target, higherIsBetter) {
205
+ return higherIsBetter ?
206
+ Math.min(100, (current / target) * 100) :
207
+ Math.max(0, 100 - (current / target) * 100);
208
+ }
209
+
210
+ function getStatusClass(score) {
211
+ if (score >= 80) return 'bg-green-100 text-green-800';
212
+ if (score >= 50) return 'bg-yellow-100 text-yellow-800';
213
+ return 'bg-red-100 text-red-800';
214
+ }
215
+
216
+ function getStatusColor(score) {
217
+ if (score >= 80) return 'bg-green-500';
218
+ if (score >= 50) return 'bg-yellow-500';
219
+ return 'bg-red-500';
220
+ }
221
+
222
+ function getStatusText(score) {
223
+ if (score >= 80) return 'Good';
224
+ if (score >= 50) return 'Moderate';
225
+ return 'Critical';
226
+ }
227
+
228
+ function updateStatusCounts() {
229
+ const cards = document.querySelectorAll('.indicator-card:not(#overall-card)');
230
+ let good = 0, moderate = 0, critical = 0;
231
+
232
+ cards.forEach(card => {
233
+ const status = card.querySelector('.status-badge').textContent;
234
+ if (status === 'Good') good++;
235
+ else if (status === 'Moderate') moderate++;
236
+ else critical++;
237
+ });
238
+
239
+ document.getElementById('good-count').textContent = `${good}/${cards.length}`;
240
+ document.getElementById('moderate-count').textContent = `${moderate}/${cards.length}`;
241
+ document.getElementById('critical-count').textContent = `${critical}/${cards.length}`;
242
+ }
243
+
244
+ function openIndicatorModal(id) {
245
+ const indicatorNames = [
246
+ '', // 0 index unused
247
+ 'Unsafe Actions',
248
+ 'Unsafe Conditions',
249
+ 'Stop Work Authority',
250
+ 'Data Self-Service',
251
+ 'Reliability Score',
252
+ 'Compliance Score',
253
+ 'Verification',
254
+ 'CCTV Findings',
255
+ 'NPT Rig'
256
+ ];
257
+
258
+ document.getElementById('modal-title').textContent = `Update ${indicatorNames[id]} Data`;
259
+ document.getElementById('indicator-id').value = id;
260
+
261
+ // Set current values
262
+ const currentData = sampleData[currentRig];
263
+ const values = [
264
+ null, // 0 index unused
265
+ currentData.unsafeActions,
266
+ currentData.unsafeConditions,
267
+ currentData.stopWorkAuthority,
268
+ currentData.dataSelfService,
269
+ currentData.reliabilityScore,
270
+ currentData.complianceScore,
271
+ currentData.verification,
272
+ currentData.cctvFindings,
273
+ currentData.nptRig
274
+ ];
275
+
276
+ document.getElementById('indicator-value').value = values[id];
277
+
278
+ // Show modal
279
+ document.getElementById('indicator-modal').classList.remove('hidden');
280
+ }
281
+
282
+ function closeIndicatorModal() {
283
+ document.getElementById('indicator-modal').classList.add('hidden');
284
+ }
285
+
286
+ function saveIndicatorData() {
287
+ const id = parseInt(document.getElementById('indicator-id').value);
288
+ const newValue = parseFloat(document.getElementById('indicator-value').value);
289
+
290
+ if (isNaN(newValue)) {
291
+ alert('Please enter a valid number');
292
+ return;
293
+ }
294
+
295
+ // Update the data for current rig
296
+ const fields = [
297
+ '', // 0 index unused
298
+ 'unsafeActions',
299
+ 'unsafeConditions',
300
+ 'stopWorkAuthority',
301
+ 'dataSelfService',
302
+ 'reliabilityScore',
303
+ 'complianceScore',
304
+ 'verification',
305
+ 'cctvFindings',
306
+ 'nptRig'
307
+ ];
308
+
309
+ sampleData[currentRig][fields[id]] = newValue;
310
+
311
+ // Update dashboard
312
+ updateDashboard(currentRig);
313
+ closeIndicatorModal();
314
+ }
315
+
316
+ // Initialize dashboard
317
+ document.addEventListener('DOMContentLoaded', function() {
318
+ updateDashboard('Rig 101');
319
+ });
320
+ </script>
321
+ <style>
322
+ .indicator-card {
323
+ transition: all 0.3s ease;
324
+ }
325
+ .indicator-card:hover {
326
+ transform: translateY(-5px);
327
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
328
+ }
329
+ .progress-bar {
330
+ height: 8px;
331
+ border-radius: 4px;
332
+ transition: width 0.5s ease;
333
+ }
334
+ .gauge {
335
+ width: 120px;
336
+ height: 120px;
337
+ position: relative;
338
+ border-radius: 50%;
339
+ background: conic-gradient(
340
+ #EF4444 0% 25%,
341
+ #F59E0B 25% 50%,
342
+ #10B981 50% 100%
343
+ );
344
+ display: flex;
345
+ align-items: center;
346
+ justify-content: center;
347
+ margin: 0 auto;
348
+ }
349
+ .gauge::before {
350
+ content: '';
351
+ position: absolute;
352
+ width: 80%;
353
+ height: 80%;
354
+ background: white;
355
+ border-radius: 50%;
356
+ }
357
+ .gauge-value {
358
+ position: relative;
359
+ font-weight: bold;
360
+ font-size: 1.5rem;
361
+ }
362
+ .modal-overlay {
363
+ background-color: rgba(0, 0, 0, 0.5);
364
+ }
365
+ .rig-option {
366
+ transition: all 0.2s ease;
367
+ cursor: pointer;
368
+ }
369
+ .rig-option:hover:not(.bg-primary) {
370
+ background-color: #E0E7FF;
371
+ }
372
+ </style>
373
+ </head>
374
+ <body class="bg-gray-50">
375
+ <div class="min-h-screen">
376
+ <!-- Header -->
377
+ <header class="bg-white shadow-sm">
378
+ <div class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8 flex justify-between items-center">
379
+ <div class="flex items-center">
380
+ <i class="fas fa-oil-rig text-blue-500 text-2xl mr-3"></i>
381
+ <h1 class="text-xl font-bold text-gray-800">Rig Performance Dashboard</h1>
382
+ </div>
383
+ <div class="flex items-center space-x-4">
384
+ <div class="relative">
385
+ <i class="fas fa-bell text-gray-500 text-xl"></i>
386
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
387
+ </div>
388
+ <div class="flex items-center">
389
+ <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
390
+ <span class="ml-2 text-sm font-medium text-gray-700">Rig Supervisor</span>
391
+ </div>
392
+ </div>
393
+ </div>
394
+ </header>
395
+
396
+ <!-- Main Content -->
397
+ <main class="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8">
398
+ <!-- Dashboard Title and Filters -->
399
+ <div class="mb-8">
400
+ <div class="flex justify-between items-center mb-6">
401
+ <h2 class="text-2xl font-bold text-gray-800">Rig Operational Performance</h2>
402
+ <div class="flex space-x-3">
403
+ <div class="relative">
404
+ <select class="appearance-none bg-white border border-gray-300 rounded-md pl-3 pr-8 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary">
405
+ <option>Last 7 Days</option>
406
+ <option>Last 30 Days</option>
407
+ <option>Last 90 Days</option>
408
+ <option selected>This Year</option>
409
+ </select>
410
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
411
+ <i class="fas fa-chevron-down text-xs"></i>
412
+ </div>
413
+ </div>
414
+ <button class="bg-primary hover:bg-primary-dark text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
415
+ <i class="fas fa-download mr-2"></i> Export
416
+ </button>
417
+ </div>
418
+ </div>
419
+
420
+ <!-- Rig Selector -->
421
+ <div class="mb-6 bg-white rounded-lg shadow p-4">
422
+ <h3 class="text-lg font-medium text-gray-800 mb-3">Select Rig</h3>
423
+ <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
424
+ <div class="rig-option bg-primary text-white text-center py-2 px-4 rounded-md"
425
+ onclick="updateDashboard('Rig 101')">
426
+ Rig 101
427
+ </div>
428
+ <div class="rig-option bg-gray-100 text-gray-800 text-center py-2 px-4 rounded-md"
429
+ onclick="updateDashboard('Rig 102')">
430
+ Rig 102
431
+ </div>
432
+ <div class="rig-option bg-gray-100 text-gray-800 text-center py-2 px-4 rounded-md"
433
+ onclick="updateDashboard('Rig 103')">
434
+ Rig 103
435
+ </div>
436
+ <div class="rig-option bg-gray-100 text-gray-800 text-center py-2 px-4 rounded-md"
437
+ onclick="updateDashboard('Rig 104')">
438
+ Rig 104
439
+ </div>
440
+ <div class="rig-option bg-gray-100 text-gray-800 text-center py-2 px-4 rounded-md"
441
+ onclick="updateDashboard('Rig 105')">
442
+ Rig 105
443
+ </div>
444
+ <div class="rig-option bg-gray-100 text-gray-800 text-center py-2 px-4 rounded-md"
445
+ onclick="updateDashboard('Rig 106')">
446
+ Rig 106
447
+ </div>
448
+ <div class="rig-option bg-gray-100 text-gray-800 text-center py-2 px-4 rounded-md"
449
+ onclick="updateDashboard('Rig 107')">
450
+ Rig 107
451
+ </div>
452
+ <div class="rig-option bg-gray-100 text-gray-800 text-center py-2 px-4 rounded-md"
453
+ onclick="updateDashboard('Rig 108')">
454
+ Rig 108
455
+ </div>
456
+ <div class="rig-option bg-gray-100 text-gray-800 text-center py-2 px-4 rounded-md"
457
+ onclick="updateDashboard('Rig 109')">
458
+ Rig 109
459
+ </div>
460
+ <div class="rig-option bg-gray-100 text-gray-800 text-center py-2 px-4 rounded-md"
461
+ onclick="updateDashboard('Rig 110')">
462
+ Rig 110
463
+ </div>
464
+ </div>
465
+ </div>
466
+
467
+ <!-- Summary Cards -->
468
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
469
+ <div id="overall-card" class="bg-white rounded-lg shadow p-4 indicator-card">
470
+ <div class="flex justify-between">
471
+ <div>
472
+ <p class="text-sm font-medium text-gray-500">Overall Score</p>
473
+ <h3 id="overall-score" class="text-2xl font-bold text-gray-800">78%</h3>
474
+ </div>
475
+ <div class="gauge">
476
+ <span id="overall-gauge-value" class="gauge-value">78%</span>
477
+ </div>
478
+ </div>
479
+ <div class="mt-2">
480
+ <div class="w-full bg-gray-200 rounded-full h-2">
481
+ <div class="progress-bar bg-primary h-2 rounded-full" style="width: 78%"></div>
482
+ </div>
483
+ </div>
484
+ </div>
485
+ <div class="bg-white rounded-lg shadow p-4 indicator-card">
486
+ <div class="flex justify-between">
487
+ <div>
488
+ <p class="text-sm font-medium text-gray-500">Good Indicators</p>
489
+ <h3 id="good-count" class="text-2xl font-bold text-gray-800">5/9</h3>
490
+ </div>
491
+ <div class="p-3 rounded-full bg-green-100 text-green-600">
492
+ <i class="fas fa-check-circle text-xl"></i>
493
+ </div>
494
+ </div>
495
+ <p class="text-xs text-gray-500 mt-2">Meeting or exceeding targets</p>
496
+ </div>
497
+ <div class="bg-white rounded-lg shadow p-4 indicator-card">
498
+ <div class="flex justify-between">
499
+ <div>
500
+ <p class="text-sm font-medium text-gray-500">Needs Attention</p>
501
+ <h3 id="moderate-count" class="text-2xl font-bold text-gray-800">2/9</h3>
502
+ </div>
503
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
504
+ <i class="fas fa-exclamation-triangle text-xl"></i>
505
+ </div>
506
+ </div>
507
+ <p class="text-xs text-gray-500 mt-2">Approaching critical levels</p>
508
+ </div>
509
+ <div class="bg-white rounded-lg shadow p-4 indicator-card">
510
+ <div class="flex justify-between">
511
+ <div>
512
+ <p class="text-sm font-medium text-gray-500">Critical Issues</p>
513
+ <h3 id="critical-count" class="text-2xl font-bold text-gray-800">2/9</h3>
514
+ </div>
515
+ <div class="p-3 rounded-full bg-red-100 text-red-600">
516
+ <i class="fas fa-times-circle text-xl"></i>
517
+ </div>
518
+ </div>
519
+ <p class="text-xs text-gray-500 mt-2">Immediate action required</p>
520
+ </div>
521
+ </div>
522
+ </div>
523
+
524
+ <!-- Indicators Grid -->
525
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
526
+ <!-- Indicator 1: Unsafe Actions -->
527
+ <div id="indicator-1" class="bg-white rounded-lg shadow overflow-hidden indicator-card">
528
+ <div class="p-5">
529
+ <div class="flex justify-between items-start">
530
+ <div>
531
+ <h3 class="text-lg font-semibold text-gray-800">Unsafe Actions</h3>
532
+ <p class="text-sm text-gray-500">Unsafe Action Findings</p>
533
+ </div>
534
+ <span class="status-badge px-2 py-1 text-xs font-semibold rounded-full">Good</span>
535
+ </div>
536
+ <div class="mt-4">
537
+ <div class="flex justify-between text-sm text-gray-500 mb-1">
538
+ <span class="indicator-value">8 cases</span>
539
+ <span class="indicator-target">≤ 10 cases</span>
540
+ </div>
541
+ <div class="w-full bg-gray-200 rounded-full h-2">
542
+ <div class="progress-bar bg-green-500 h-2 rounded-full" style="width: 80%"></div>
543
+ </div>
544
+ </div>
545
+ </div>
546
+ <div class="bg-gray-50 px-5 py-3 border-t border-gray-200">
547
+ <button onclick="openIndicatorModal(1)" class="text-primary hover:text-primary-dark text-sm font-medium flex items-center">
548
+ <i class="fas fa-edit mr-1"></i> Update Status
549
+ </button>
550
+ </div>
551
+ </div>
552
+
553
+ <!-- Indicator 2: Unsafe Conditions -->
554
+ <div id="indicator-2" class="bg-white rounded-lg shadow overflow-hidden indicator-card">
555
+ <div class="p-5">
556
+ <div class="flex justify-between items-start">
557
+ <div>
558
+ <h3 class="text-lg font-semibold text-gray-800">Unsafe Conditions</h3>
559
+ <p class="text-sm text-gray-500">Unsafe Condition Findings</p>
560
+ </div>
561
+ <span class="status-badge px-2 py-1 text-xs font-semibold rounded-full">Moderate</span>
562
+ </div>
563
+ <div class="mt-4">
564
+ <div class="flex justify-between text-sm text-gray-500 mb-1">
565
+ <span class="indicator-value">12 cases</span>
566
+ <span class="indicator-target">≤ 15 cases</span>
567
+ </div>
568
+ <div class="w-full bg-gray-200 rounded-full h-2">
569
+ <div class="progress-bar bg-yellow-500 h-2 rounded-full" style="width: 60%"></div>
570
+ </div>
571
+ </div>
572
+ </div>
573
+ <div class="bg-gray-50 px-5 py-3 border-t border-gray-200">
574
+ <button onclick="openIndicatorModal(2)" class="text-primary hover:text-primary-dark text-sm font-medium flex items-center">
575
+ <i class="fas fa-edit mr-1"></i> Update Status
576
+ </button>
577
+ </div>
578
+ </div>
579
+
580
+ <!-- Indicator 3: Stop Work Authority -->
581
+ <div id="indicator-3" class="bg-white rounded-lg shadow overflow-hidden indicator-card">
582
+ <div class="p-5">
583
+ <div class="flex justify-between items-start">
584
+ <div>
585
+ <h3 class="text-lg font-semibold text-gray-800">Stop Work Authority</h3>
586
+ <p class="text-sm text-gray-500">SWA Findings</p>
587
+ </div>
588
+ <span class="status-badge px-2 py-1 text-xs font-semibold rounded-full">Good</span>
589
+ </div>
590
+ <div class="mt-4">
591
+ <div class="flex justify-between text-sm text-gray-500 mb-1">
592
+ <span class="indicator-value">5 cases</span>
593
+ <span class="indicator-target">≤ 5 cases</span>
594
+ </div>
595
+ <div class="w-full bg-gray-200 rounded-full h-2">
596
+ <div class="progress-bar bg-green-500 h-2 rounded-full" style="width: 100%"></div>
597
+ </div>
598
+ </div>
599
+ </div>
600
+ <div class="bg-gray-50 px-5 py-3 border-t border-gray-200">
601
+ <button onclick="openIndicatorModal(3)" class="text-primary hover:text-primary-dark text-sm font-medium flex items-center">
602
+ <i class="fas fa-edit mr-1"></i> Update Status
603
+ </button>
604
+ </div>
605
+ </div>
606
+
607
+ <!-- Indicator 4: Data Self-Service -->
608
+ <div id="indicator-4" class="bg-white rounded-lg shadow overflow-hidden indicator-card">
609
+ <div class="p-5">
610
+ <div class="flex justify-between items-start">
611
+ <div>
612
+ <h3 class="text-lg font-semibold text-gray-800">Data Self-Service</h3>
613
+ <p class="text-sm text-gray-500">Employee Self-Service Rate</p>
614
+ </div>
615
+ <span class="status-badge px-2 py-1 text-xs font-semibold rounded-full">Good</span>
616
+ </div>
617
+ <div class="mt-4">
618
+ <div class="flex justify-between text-sm text-gray-500 mb-1">
619
+ <span class="indicator-value">72%</span>
620
+ <span class="indicator-target">≥ 60%</span>
621
+ </div>
622
+ <div class="w-full bg-gray-200 rounded-full h-2">
623
+ <div class="progress-bar bg-green-500 h-2 rounded-full" style="width: 120%"></div>
624
+ </div>
625
+ </div>
626
+ </div>
627
+ <div class="bg-gray-50 px-5 py-3 border-t border-gray-200">
628
+ <button onclick="openIndicatorModal(4)" class="text-primary hover:text-primary-dark text-sm font-medium flex items-center">
629
+ <i class="fas fa-edit mr-1"></i> Update Status
630
+ </button>
631
+ </div>
632
+ </div>
633
+
634
+ <!-- Indicator 5: Reliability Score -->
635
+ <div id="indicator-5" class="bg-white rounded-lg shadow overflow-hidden indicator-card">
636
+ <div class="p-5">
637
+ <div class="flex justify-between items-start">
638
+ <div>
639
+ <h3 class="text-lg font-semibold text-gray-800">Reliability Score</h3>
640
+ <p class="text-sm text-gray-500">Equipment Reliability</p>
641
+ </div>
642
+ <span class="status-badge px-2 py-1 text-xs font-semibold rounded-full">Good</span>
643
+ </div>
644
+ <div class="mt-4">
645
+ <div class="flex justify-between text-sm text-gray-500 mb-1">
646
+ <span class="indicator-value">85%</span>
647
+ <span class="indicator-target">≥ 80%</span>
648
+ </div>
649
+ <div class="w-full bg-gray-200 rounded-full h-2">
650
+ <div class="progress-bar bg-green-500 h-2 rounded-full, style="width: 106%"></div>
651
+ </div>
652
+ </div>
653
+ </div>
654
+ <div class="bg-gray-50 px-5 py-3 border-t border-gray-200">
655
+ <button onclick="openIndicatorModal(5)" class="text-primary hover:text-primary-dark text-sm font-medium flex items-center">
656
+ <i class="fas fa-edit mr-1"></i> Update Status
657
+ </button>
658
+ </div>
659
+ </div>
660
+
661
+ <!-- Indicator 6: Compliance Score -->
662
+ <div id="indicator-6" class="bg-white rounded-lg shadow overflow-hidden indicator-card">
663
+ <div class="p-5">
664
+ <div class="flex justify-between items-start">
665
+ <div>
666
+ <h3 class="text-lg font-semibold text-gray-800">Compliance Score</h3>
667
+ <p class="text-sm text-gray-500">Regulatory Compliance</p>
668
+ </div>
669
+ <span class="status-badge px-2 py-1 text-xs font-semibold rounded-full">Good</span>
670
+ </div>
671
+ <div class="mt-4">
672
+ <div class="flex justify-between text-sm text-gray-500 mb-1">
673
+ <span class="indicator-value">88%</span>
674
+ <span class="indicator-target">≥ 80%</span>
675
+ </div>
676
+ <div class="w-full bg-gray-200 rounded-full h-2">
677
+ <div class="progress-bar bg-green-500 h-2 rounded-full" style="width: 110%"></div>
678
+ </div>
679
+ </div>
680
+ </div>
681
+ <div class="bg-gray-50 px-5 py-3 border-t border-gray-200">
682
+ <button onclick="openIndicatorModal(6)" class="text-primary hover:text-primary-dark text-sm font-medium flex items-center">
683
+ <i class="fas fa-edit mr-1"></i> Update Status
684
+ </button>
685
+ </div>
686
+ </div>
687
+
688
+ <!-- Indicator 7: Verification -->
689
+ <div id="indicator-7" class="bg-white rounded-lg shadow overflow-hidden indicator-card">
690
+ <div class="p-5">
691
+ <div class="flex justify-between items-start">
692
+ <div>
693
+ <h3 class="text-lg font-semibold text-gray-800">Verification</h3>
694
+ <p class="text-sm text-gray-500">V&V Activities Completed</p>
695
+ </div>
696
+ <span class="status-badge px-2 py-1 text-xs font-semibold rounded-full">Good</span>
697
+ </div>
698
+ <div class="mt-4">
699
+ <div class="flex justify-between text-sm text-gray-500 mb-1">
700
+ <span class="indicator-value">28%</span>
701
+ <span class="indicator-target">≥ 25%</span>
702
+ </div>
703
+ <div class="w-full bg-gray-200 rounded-full h-2">
704
+ <div class="progress-bar bg-green-500 h-2 rounded-full" style="width: 112%"></div>
705
+ </div>
706
+ </div>
707
+ </div>
708
+ <div class="bg-gray-50 px-5 py-3 border-t border-gray-200">
709
+ <button onclick="openIndicatorModal(7)" class="text-primary hover:text-primary-dark text-sm font-medium flex items-center">
710
+ <i class="fas fa-edit mr-1"></i> Update Status
711
+ </button>
712
+ </div>
713
+ </div>
714
+
715
+ <!-- Indicator 8: CCTV Findings -->
716
+ <div id="indicator-8" class="bg-white rounded-lg shadow overflow-hidden indicator-card">
717
+ <div class="p-5">
718
+ <div class="flex justify-between items-start">
719
+ <div>
720
+ <h3 class="text-lg font-semibold text-gray-800">CCTV Findings</h3>
721
+ <p class="text-sm text-gray-500">i-CCTV Findings</p>
722
+ </div>
723
+ <span class="status-badge px-2 py-1 text-xs font-semibold rounded-full">Good</span>
724
+ </div>
725
+ <div class="mt-4">
726
+ <div class="flex justify-between text-sm text-gray-500 mb-1">
727
+ <span class="indicator-value">8 cases</span>
728
+ <span class="indicator-target">≤ 10 cases</span>
729
+ </div>
730
+ <div class="w-full bg-gray-200 rounded-full h-2">
731
+ <div class="progress-bar bg-green-500 h-2 rounded-full" style="width: 80%"></div>
732
+ </div>
733
+ </div>
734
+ </div>
735
+ <div class="bg-gray-50 px-5 py-3 border-t border-gray-200">
736
+ <button onclick="openIndicatorModal(8)" class="text-primary hover:text-primary-dark text-sm font-medium flex items-center">
737
+ <i class="fas fa-edit mr-1"></i> Update Status
738
+ </button>
739
+ </div>
740
+ </div>
741
+
742
+ <!-- Indicator 9: NPT Rig -->
743
+ <div id="indicator-9" class="bg-white rounded-lg shadow overflow-hidden indicator-card">
744
+ <div class="p-5">
745
+ <div class="flex justify-between items-start">
746
+ <div>
747
+ <h3 class="text-lg font-semibold text-gray-800">NPT Rig</h3>
748
+ <p class="text-sm text-gray-500">Non-Productive Time</p>
749
+ </div>
750
+ <span class="status-badge px-2 py-1 text-xs font-semibold rounded-full">Good</span>
751
+ </div>
752
+ <div class="mt-4">
753
+ <div class="flex justify-between text-sm text-gray-500 mb-1">
754
+ <span class="indicator-value">3.2 hours</span>
755
+ <span class="indicator-target">≤ 3.5 hours</span>
756
+ </div>
757
+ <div class="w-full bg-gray-200 rounded-full h-2">
758
+ <div class="progress-bar bg-green-500 h-2 rounded-full" style="width: 91%"></div>
759
+ </div>
760
+ </div>
761
+ </div>
762
+ <div class="bg-gray-50 px-5 py-3 border-t border-gray-200">
763
+ <button onclick="openIndicatorModal(9)" class="text-primary hover:text-primary-dark text-sm font-medium flex items-center">
764
+ <i class="fas fa-edit mr-1"></i> Update Status
765
+ </button>
766
+ </div>
767
+ </div>
768
+ </div>
769
+ </main>
770
+ </div>
771
+
772
+ <!-- Indicator Update Modal -->
773
+ <div id="indicator-modal" class="hidden fixed inset-0 z-50 overflow-y-auto">
774
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
775
+ <div class="fixed inset-0 transition-opacity modal-overlay" aria-hidden="true">
776
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
777
+ </div>
778
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
779
+ <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
780
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
781
+ <h3 id="modal-title" class="text-lg leading-6 font-medium text-gray-900 mb-4">Update Indicator Data</h3>
782
+ <input type="hidden" id="indicator-id">
783
+ <div class="mb-4">
784
+ <label for="indicator-value" class="block text-sm font-medium text-gray-700">Current Value</label>
785
+ <input type="number" id="indicator-value" class="mt-1 focus:ring-primary focus:border-primary block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
786
+ </div>
787
+ </div>
788
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
789
+ <button type="button" onclick="saveIndicatorData()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary text-base font-medium text-white hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary sm:ml-3 sm:w-auto sm:text-sm">
790
+ Save
791
+ </button>
792
+ <button type="button" onclick="closeIndicatorModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
793
+ Cancel
794
+ </button>
795
+ </div>
796
+ </div>
797
+ </div>
798
+ </div>
799
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=alterzick/rig-performance-dashboard" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
800
+ </html>
prompts.txt ADDED
File without changes