|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Rig Performance Dashboard</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#4F46E5', |
|
|
secondary: '#10B981', |
|
|
danger: '#EF4444', |
|
|
warning: '#F59E0B', |
|
|
info: '#3B82F6' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const sampleData = { |
|
|
'Rig 101': { |
|
|
unsafeActions: 8, |
|
|
unsafeConditions: 12, |
|
|
stopWorkAuthority: 5, |
|
|
dataSelfService: 72, |
|
|
reliabilityScore: 85, |
|
|
complianceScore: 88, |
|
|
verification: 28, |
|
|
cctvFindings: 8, |
|
|
nptRig: 3.2 |
|
|
}, |
|
|
'Rig 102': { |
|
|
unsafeActions: 12, |
|
|
unsafeConditions: 18, |
|
|
stopWorkAuthority: 8, |
|
|
dataSelfService: 65, |
|
|
reliabilityScore: 78, |
|
|
complianceScore: 82, |
|
|
verification: 22, |
|
|
cctvFindings: 15, |
|
|
nptRig: 4.8 |
|
|
}, |
|
|
'Rig 103': { |
|
|
unsafeActions: 5, |
|
|
unsafeConditions: 9, |
|
|
stopWorkAuthority: 3, |
|
|
dataSelfService: 82, |
|
|
reliabilityScore: 92, |
|
|
complianceScore: 91, |
|
|
verification: 35, |
|
|
cctvFindings: 5, |
|
|
nptRig: 2.7 |
|
|
}, |
|
|
'Rig 104': { |
|
|
unsafeActions: 15, |
|
|
unsafeConditions: 22, |
|
|
stopWorkAuthority: 10, |
|
|
dataSelfService: 58, |
|
|
reliabilityScore: 72, |
|
|
complianceScore: 75, |
|
|
verification: 18, |
|
|
cctvFindings: 22, |
|
|
nptRig: 5.5 |
|
|
}, |
|
|
'Rig 105': { |
|
|
unsafeActions: 18, |
|
|
unsafeConditions: 25, |
|
|
stopWorkAuthority: 12, |
|
|
dataSelfService: 48, |
|
|
reliabilityScore: 68, |
|
|
complianceScore: 72, |
|
|
verification: 15, |
|
|
cctvFindings: 28, |
|
|
nptRig: 6.8 |
|
|
}, |
|
|
'Rig 106': { |
|
|
unsafeActions: 7, |
|
|
unsafeConditions: 10, |
|
|
stopWorkAuthority: 4, |
|
|
dataSelfService: 75, |
|
|
reliabilityScore: 88, |
|
|
complianceScore: 86, |
|
|
verification: 32, |
|
|
cctvFindings: 7, |
|
|
nptRig: 3.0 |
|
|
}, |
|
|
'Rig 107': { |
|
|
unsafeActions: 10, |
|
|
unsafeConditions: 15, |
|
|
stopWorkAuthority: 6, |
|
|
dataSelfService: 68, |
|
|
reliabilityScore: 82, |
|
|
complianceScore: 84, |
|
|
verification: 25, |
|
|
cctvFindings: 12, |
|
|
nptRig: 4.2 |
|
|
}, |
|
|
'Rig 108': { |
|
|
unsafeActions: 20, |
|
|
unsafeConditions: 28, |
|
|
stopWorkAuthority: 15, |
|
|
dataSelfService: 42, |
|
|
reliabilityScore: 65, |
|
|
complianceScore: 68, |
|
|
verification: 12, |
|
|
cctvFindings: 32, |
|
|
nptRig: 7.5 |
|
|
}, |
|
|
'Rig 109': { |
|
|
unsafeActions: 6, |
|
|
unsafeConditions: 8, |
|
|
stopWorkAuthority: 3, |
|
|
dataSelfService: 80, |
|
|
reliabilityScore: 90, |
|
|
complianceScore: 89, |
|
|
verification: 38, |
|
|
cctvFindings: 4, |
|
|
nptRig: 2.5 |
|
|
}, |
|
|
'Rig 110': { |
|
|
unsafeActions: 14, |
|
|
unsafeConditions: 20, |
|
|
stopWorkAuthority: 9, |
|
|
dataSelfService: 62, |
|
|
reliabilityScore: 75, |
|
|
complianceScore: 78, |
|
|
verification: 20, |
|
|
cctvFindings: 18, |
|
|
nptRig: 5.2 |
|
|
} |
|
|
}; |
|
|
|
|
|
let currentRig = 'Rig 101'; |
|
|
|
|
|
function updateDashboard(rig) { |
|
|
currentRig = rig; |
|
|
const data = sampleData[rig]; |
|
|
|
|
|
|
|
|
const overallScore = Math.round( |
|
|
(getScore(data.unsafeActions + data.unsafeConditions, 20, false) * 0.15 + |
|
|
getScore(data.stopWorkAuthority, 5, false) * 0.1 + |
|
|
getScore(data.dataSelfService, 60, true) * 0.1 + |
|
|
getScore((data.reliabilityScore + data.complianceScore)/2, 80, true) * 0.25 + |
|
|
getScore(data.verification, 25, true) * 0.1 + |
|
|
getScore(100 - data.cctvFindings, 85, true) * 0.15 + |
|
|
getScore(100 - (data.nptRig/10*100), 70, true) * 0.25) |
|
|
); |
|
|
|
|
|
document.getElementById('overall-score').textContent = `${overallScore}%`; |
|
|
document.getElementById('overall-gauge-value').textContent = `${overallScore}%`; |
|
|
document.querySelector('#overall-card .progress-bar').style.width = `${overallScore}%`; |
|
|
|
|
|
|
|
|
updateIndicator(1, 'Unsafe Actions', 'Unsafe Action Findings', data.unsafeActions, 10, false, 'cases'); |
|
|
updateIndicator(2, 'Unsafe Conditions', 'Unsafe Condition Findings', data.unsafeConditions, 15, false, 'cases'); |
|
|
updateIndicator(3, 'Stop Work Authority', 'SWA Findings', data.stopWorkAuthority, 5, false, 'cases'); |
|
|
updateIndicator(4, 'Data Self-Service', 'Employee Self-Service Rate', data.dataSelfService, 60, true, '%'); |
|
|
updateIndicator(5, 'Reliability Score', 'Equipment Reliability', data.reliabilityScore, 80, true, '%'); |
|
|
updateIndicator(6, 'Compliance Score', 'Regulatory Compliance', data.complianceScore, 80, true, '%'); |
|
|
updateIndicator(7, 'Verification', 'V&V Activities Completed', data.verification, 25, true, '%'); |
|
|
updateIndicator(8, 'CCTV Findings', 'i-CCTV Findings', data.cctvFindings, 10, false, 'cases'); |
|
|
updateIndicator(9, 'NPT Rig', 'Non-Productive Time', data.nptRig, 3.5, false, 'hours'); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.rig-option').forEach(option => { |
|
|
option.classList.remove('bg-primary', 'text-white'); |
|
|
if (option.textContent === rig) { |
|
|
option.classList.add('bg-primary', 'text-white'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
updateStatusCounts(); |
|
|
} |
|
|
|
|
|
function updateIndicator(id, name, description, current, target, higherIsBetter, unit) { |
|
|
const card = document.getElementById(`indicator-${id}`); |
|
|
const score = getScore(current, target, higherIsBetter); |
|
|
|
|
|
|
|
|
const statusBadge = card.querySelector('.status-badge'); |
|
|
statusBadge.className = 'px-2 py-1 text-xs font-semibold rounded-full status-badge ' + |
|
|
getStatusClass(score); |
|
|
statusBadge.textContent = getStatusText(score); |
|
|
|
|
|
|
|
|
card.querySelector('.indicator-value').textContent = `${current} ${unit}`; |
|
|
card.querySelector('.indicator-target').textContent = `${higherIsBetter ? '≥' : '≤'} ${target} ${unit}`; |
|
|
|
|
|
|
|
|
const progressBar = card.querySelector('.progress-bar'); |
|
|
progressBar.style.width = `${higherIsBetter ? |
|
|
Math.min(100, (current / target) * 100) : |
|
|
Math.max(0, 100 - (current / target) * 100)}%`; |
|
|
progressBar.className = `progress-bar h-2 rounded-full ${getStatusColor(score)}`; |
|
|
} |
|
|
|
|
|
function getScore(current, target, higherIsBetter) { |
|
|
return higherIsBetter ? |
|
|
Math.min(100, (current / target) * 100) : |
|
|
Math.max(0, 100 - (current / target) * 100); |
|
|
} |
|
|
|
|
|
function getStatusClass(score) { |
|
|
if (score >= 80) return 'bg-green-100 text-green-800'; |
|
|
if (score >= 50) return 'bg-yellow-100 text-yellow-800'; |
|
|
return 'bg-red-100 text-red-800'; |
|
|
} |
|
|
|
|
|
function getStatusColor(score) { |
|
|
if (score >= 80) return 'bg-green-500'; |
|
|
if (score >= 50) return 'bg-yellow-500'; |
|
|
return 'bg-red-500'; |
|
|
} |
|
|
|
|
|
function getStatusText(score) { |
|
|
if (score >= 80) return 'Good'; |
|
|
if (score >= 50) return 'Moderate'; |
|
|
return 'Critical'; |
|
|
} |
|
|
|
|
|
function updateStatusCounts() { |
|
|
const cards = document.querySelectorAll('.indicator-card:not(#overall-card)'); |
|
|
let good = 0, moderate = 0, critical = 0; |
|
|
|
|
|
cards.forEach(card => { |
|
|
const status = card.querySelector('.status-badge').textContent; |
|
|
if (status === 'Good') good++; |
|
|
else if (status === 'Moderate') moderate++; |
|
|
else critical++; |
|
|
}); |
|
|
|
|
|
document.getElementById('good-count').textContent = `${good}/${cards.length}`; |
|
|
document.getElementById('moderate-count').textContent = `${moderate}/${cards.length}`; |
|
|
document.getElementById('critical-count').textContent = `${critical}/${cards.length}`; |
|
|
} |
|
|
|
|
|
function openIndicatorModal(id) { |
|
|
const indicatorNames = [ |
|
|
'', |
|
|
'Unsafe Actions', |
|
|
'Unsafe Conditions', |
|
|
'Stop Work Authority', |
|
|
'Data Self-Service', |
|
|
'Reliability Score', |
|
|
'Compliance Score', |
|
|
'Verification', |
|
|
'CCTV Findings', |
|
|
'NPT Rig' |
|
|
]; |
|
|
|
|
|
document.getElementById('modal-title').textContent = `Update ${indicatorNames[id]} Data`; |
|
|
document.getElementById('indicator-id').value = id; |
|
|
|
|
|
|
|
|
const currentData = sampleData[currentRig]; |
|
|
const values = [ |
|
|
null, |
|
|
currentData.unsafeActions, |
|
|
currentData.unsafeConditions, |
|
|
currentData.stopWorkAuthority, |
|
|
currentData.dataSelfService, |
|
|
currentData.reliabilityScore, |
|
|
currentData.complianceScore, |
|
|
currentData.verification, |
|
|
currentData.cctvFindings, |
|
|
currentData.nptRig |
|
|
]; |
|
|
|
|
|
document.getElementById('indicator-value').value = values[id]; |
|
|
|
|
|
|
|
|
document.getElementById('indicator-modal').classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function closeIndicatorModal() { |
|
|
document.getElementById('indicator-modal').classList.add('hidden'); |
|
|
} |
|
|
|
|
|
function saveIndicatorData() { |
|
|
const id = parseInt(document.getElementById('indicator-id').value); |
|
|
const newValue = parseFloat(document.getElementById('indicator-value').value); |
|
|
|
|
|
if (isNaN(newValue)) { |
|
|
alert('Please enter a valid number'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
const fields = [ |
|
|
'', |
|
|
'unsafeActions', |
|
|
'unsafeConditions', |
|
|
'stopWorkAuthority', |
|
|
'dataSelfService', |
|
|
'reliabilityScore', |
|
|
'complianceScore', |
|
|
'verification', |
|
|
'cctvFindings', |
|
|
'nptRig' |
|
|
]; |
|
|
|
|
|
sampleData[currentRig][fields[id]] = newValue; |
|
|
|
|
|
|
|
|
updateDashboard(currentRig); |
|
|
closeIndicatorModal(); |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
updateDashboard('Rig 101'); |
|
|
}); |
|
|
</script> |
|
|
<style> |
|
|
.indicator-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.indicator-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.progress-bar { |
|
|
height: 8px; |
|
|
border-radius: 4px; |
|
|
transition: width 0.5s ease; |
|
|
} |
|
|
.gauge { |
|
|
width: 120px; |
|
|
height: 120px; |
|
|
position: relative; |
|
|
border-radius: 50%; |
|
|
background: conic-gradient( |
|
|
#EF4444 0% 25%, |
|
|
#F59E0B 25% 50%, |
|
|
#10B981 50% 100% |
|
|
); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
margin: 0 auto; |
|
|
} |
|
|
.gauge::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 80%; |
|
|
height: 80%; |
|
|
background: white; |
|
|
border-radius: 50%; |
|
|
} |
|
|
.gauge-value { |
|
|
position: relative; |
|
|
font-weight: bold; |
|
|
font-size: 1.5rem; |
|
|
} |
|
|
.modal-overlay { |
|
|
background-color: rgba(0, 0, 0, 0.5); |
|
|
} |
|
|
.rig-option { |
|
|
transition: all 0.2s ease; |
|
|
cursor: pointer; |
|
|
} |
|
|
.rig-option:hover:not(.bg-primary) { |
|
|
background-color: #E0E7FF; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
<div class="min-h-screen"> |
|
|
|
|
|
<header class="bg-white shadow-sm"> |
|
|
<div class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8 flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-oil-rig text-blue-500 text-2xl mr-3"></i> |
|
|
<h1 class="text-xl font-bold text-gray-800">Rig Performance Dashboard</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<i class="fas fa-bell text-gray-500 text-xl"></i> |
|
|
<span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<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=""> |
|
|
<span class="ml-2 text-sm font-medium text-gray-700">Rig Supervisor</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8"> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold text-gray-800">Rig Operational Performance</h2> |
|
|
<div class="flex space-x-3"> |
|
|
<div class="relative"> |
|
|
<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"> |
|
|
<option>Last 7 Days</option> |
|
|
<option>Last 30 Days</option> |
|
|
<option>Last 90 Days</option> |
|
|
<option selected>This Year</option> |
|
|
</select> |
|
|
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"> |
|
|
<i class="fas fa-chevron-down text-xs"></i> |
|
|
</div> |
|
|
</div> |
|
|
<button class="bg-primary hover:bg-primary-dark text-white px-4 py-2 rounded-md text-sm font-medium flex items-center"> |
|
|
<i class="fas fa-download mr-2"></i> Export |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-6 bg-white rounded-lg shadow p-4"> |
|
|
<h3 class="text-lg font-medium text-gray-800 mb-3">Select Rig</h3> |
|
|
<div class="grid grid-cols-2 md:grid-cols-5 gap-2"> |
|
|
<div class="rig-option bg-primary text-white text-center py-2 px-4 rounded-md" |
|
|
onclick="updateDashboard('Rig 101')"> |
|
|
Rig 101 |
|
|
</div> |
|
|
<div class="rig-option bg-gray-100 text-gray-800 text-center py-2 px-4 rounded-md" |
|
|
onclick="updateDashboard('Rig 102')"> |
|
|
Rig 102 |
|
|
</div> |
|
|
<div class="rig-option bg-gray-100 text-gray-800 text-center py-2 px-4 rounded-md" |
|
|
onclick="updateDashboard('Rig 103')"> |
|
|
Rig 103 |
|
|
</div> |
|
|
<div class="rig-option bg-gray-100 text-gray-800 text-center py-2 px-4 rounded-md" |
|
|
onclick="updateDashboard('Rig 104')"> |
|
|
Rig 104 |
|
|
</div> |
|
|
<div class="rig-option bg-gray-100 text-gray-800 text-center py-2 px-4 rounded-md" |
|
|
onclick="updateDashboard('Rig 105')"> |
|
|
Rig 105 |
|
|
</div> |
|
|
<div class="rig-option bg-gray-100 text-gray-800 text-center py-2 px-4 rounded-md" |
|
|
onclick="updateDashboard('Rig 106')"> |
|
|
Rig 106 |
|
|
</div> |
|
|
<div class="rig-option bg-gray-100 text-gray-800 text-center py-2 px-4 rounded-md" |
|
|
onclick="updateDashboard('Rig 107')"> |
|
|
Rig 107 |
|
|
</div> |
|
|
<div class="rig-option bg-gray-100 text-gray-800 text-center py-2 px-4 rounded-md" |
|
|
onclick="updateDashboard('Rig 108')"> |
|
|
Rig 108 |
|
|
</div> |
|
|
<div class="rig-option bg-gray-100 text-gray-800 text-center py-2 px-4 rounded-md" |
|
|
onclick="updateDashboard('Rig 109')"> |
|
|
Rig 109 |
|
|
</div> |
|
|
<div class="rig-option bg-gray-100 text-gray-800 text-center py-2 px-4 rounded-md" |
|
|
onclick="updateDashboard('Rig 110')"> |
|
|
Rig 110 |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6"> |
|
|
<div id="overall-card" class="bg-white rounded-lg shadow p-4 indicator-card"> |
|
|
<div class="flex justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Overall Score</p> |
|
|
<h3 id="overall-score" class="text-2xl font-bold text-gray-800">78%</h3> |
|
|
</div> |
|
|
<div class="gauge"> |
|
|
<span id="overall-gauge-value" class="gauge-value">78%</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-2"> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="progress-bar bg-primary h-2 rounded-full" style="width: 78%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-4 indicator-card"> |
|
|
<div class="flex justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Good Indicators</p> |
|
|
<h3 id="good-count" class="text-2xl font-bold text-gray-800">5/9</h3> |
|
|
</div> |
|
|
<div class="p-3 rounded-full bg-green-100 text-green-600"> |
|
|
<i class="fas fa-check-circle text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 mt-2">Meeting or exceeding targets</p> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-4 indicator-card"> |
|
|
<div class="flex justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Needs Attention</p> |
|
|
<h3 id="moderate-count" class="text-2xl font-bold text-gray-800">2/9</h3> |
|
|
</div> |
|
|
<div class="p-3 rounded-full bg-yellow-100 text-yellow-600"> |
|
|
<i class="fas fa-exclamation-triangle text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 mt-2">Approaching critical levels</p> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-4 indicator-card"> |
|
|
<div class="flex justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Critical Issues</p> |
|
|
<h3 id="critical-count" class="text-2xl font-bold text-gray-800">2/9</h3> |
|
|
</div> |
|
|
<div class="p-3 rounded-full bg-red-100 text-red-600"> |
|
|
<i class="fas fa-times-circle text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 mt-2">Immediate action required</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div id="indicator-1" class="bg-white rounded-lg shadow overflow-hidden indicator-card"> |
|
|
<div class="p-5"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-gray-800">Unsafe Actions</h3> |
|
|
<p class="text-sm text-gray-500">Unsafe Action Findings</p> |
|
|
</div> |
|
|
<span class="status-badge px-2 py-1 text-xs font-semibold rounded-full">Good</span> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="flex justify-between text-sm text-gray-500 mb-1"> |
|
|
<span class="indicator-value">8 cases</span> |
|
|
<span class="indicator-target">≤ 10 cases</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="progress-bar bg-green-500 h-2 rounded-full" style="width: 80%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 px-5 py-3 border-t border-gray-200"> |
|
|
<button onclick="openIndicatorModal(1)" class="text-primary hover:text-primary-dark text-sm font-medium flex items-center"> |
|
|
<i class="fas fa-edit mr-1"></i> Update Status |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="indicator-2" class="bg-white rounded-lg shadow overflow-hidden indicator-card"> |
|
|
<div class="p-5"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-gray-800">Unsafe Conditions</h3> |
|
|
<p class="text-sm text-gray-500">Unsafe Condition Findings</p> |
|
|
</div> |
|
|
<span class="status-badge px-2 py-1 text-xs font-semibold rounded-full">Moderate</span> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="flex justify-between text-sm text-gray-500 mb-1"> |
|
|
<span class="indicator-value">12 cases</span> |
|
|
<span class="indicator-target">≤ 15 cases</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="progress-bar bg-yellow-500 h-2 rounded-full" style="width: 60%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 px-5 py-3 border-t border-gray-200"> |
|
|
<button onclick="openIndicatorModal(2)" class="text-primary hover:text-primary-dark text-sm font-medium flex items-center"> |
|
|
<i class="fas fa-edit mr-1"></i> Update Status |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="indicator-3" class="bg-white rounded-lg shadow overflow-hidden indicator-card"> |
|
|
<div class="p-5"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-gray-800">Stop Work Authority</h3> |
|
|
<p class="text-sm text-gray-500">SWA Findings</p> |
|
|
</div> |
|
|
<span class="status-badge px-2 py-1 text-xs font-semibold rounded-full">Good</span> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="flex justify-between text-sm text-gray-500 mb-1"> |
|
|
<span class="indicator-value">5 cases</span> |
|
|
<span class="indicator-target">≤ 5 cases</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="progress-bar bg-green-500 h-2 rounded-full" style="width: 100%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 px-5 py-3 border-t border-gray-200"> |
|
|
<button onclick="openIndicatorModal(3)" class="text-primary hover:text-primary-dark text-sm font-medium flex items-center"> |
|
|
<i class="fas fa-edit mr-1"></i> Update Status |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="indicator-4" class="bg-white rounded-lg shadow overflow-hidden indicator-card"> |
|
|
<div class="p-5"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-gray-800">Data Self-Service</h3> |
|
|
<p class="text-sm text-gray-500">Employee Self-Service Rate</p> |
|
|
</div> |
|
|
<span class="status-badge px-2 py-1 text-xs font-semibold rounded-full">Good</span> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="flex justify-between text-sm text-gray-500 mb-1"> |
|
|
<span class="indicator-value">72%</span> |
|
|
<span class="indicator-target">≥ 60%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="progress-bar bg-green-500 h-2 rounded-full" style="width: 120%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 px-5 py-3 border-t border-gray-200"> |
|
|
<button onclick="openIndicatorModal(4)" class="text-primary hover:text-primary-dark text-sm font-medium flex items-center"> |
|
|
<i class="fas fa-edit mr-1"></i> Update Status |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="indicator-5" class="bg-white rounded-lg shadow overflow-hidden indicator-card"> |
|
|
<div class="p-5"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-gray-800">Reliability Score</h3> |
|
|
<p class="text-sm text-gray-500">Equipment Reliability</p> |
|
|
</div> |
|
|
<span class="status-badge px-2 py-1 text-xs font-semibold rounded-full">Good</span> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="flex justify-between text-sm text-gray-500 mb-1"> |
|
|
<span class="indicator-value">85%</span> |
|
|
<span class="indicator-target">≥ 80%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="progress-bar bg-green-500 h-2 rounded-full, style="width: 106%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 px-5 py-3 border-t border-gray-200"> |
|
|
<button onclick="openIndicatorModal(5)" class="text-primary hover:text-primary-dark text-sm font-medium flex items-center"> |
|
|
<i class="fas fa-edit mr-1"></i> Update Status |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="indicator-6" class="bg-white rounded-lg shadow overflow-hidden indicator-card"> |
|
|
<div class="p-5"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-gray-800">Compliance Score</h3> |
|
|
<p class="text-sm text-gray-500">Regulatory Compliance</p> |
|
|
</div> |
|
|
<span class="status-badge px-2 py-1 text-xs font-semibold rounded-full">Good</span> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="flex justify-between text-sm text-gray-500 mb-1"> |
|
|
<span class="indicator-value">88%</span> |
|
|
<span class="indicator-target">≥ 80%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="progress-bar bg-green-500 h-2 rounded-full" style="width: 110%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 px-5 py-3 border-t border-gray-200"> |
|
|
<button onclick="openIndicatorModal(6)" class="text-primary hover:text-primary-dark text-sm font-medium flex items-center"> |
|
|
<i class="fas fa-edit mr-1"></i> Update Status |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="indicator-7" class="bg-white rounded-lg shadow overflow-hidden indicator-card"> |
|
|
<div class="p-5"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-gray-800">Verification</h3> |
|
|
<p class="text-sm text-gray-500">V&V Activities Completed</p> |
|
|
</div> |
|
|
<span class="status-badge px-2 py-1 text-xs font-semibold rounded-full">Good</span> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="flex justify-between text-sm text-gray-500 mb-1"> |
|
|
<span class="indicator-value">28%</span> |
|
|
<span class="indicator-target">≥ 25%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="progress-bar bg-green-500 h-2 rounded-full" style="width: 112%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 px-5 py-3 border-t border-gray-200"> |
|
|
<button onclick="openIndicatorModal(7)" class="text-primary hover:text-primary-dark text-sm font-medium flex items-center"> |
|
|
<i class="fas fa-edit mr-1"></i> Update Status |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="indicator-8" class="bg-white rounded-lg shadow overflow-hidden indicator-card"> |
|
|
<div class="p-5"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-gray-800">CCTV Findings</h3> |
|
|
<p class="text-sm text-gray-500">i-CCTV Findings</p> |
|
|
</div> |
|
|
<span class="status-badge px-2 py-1 text-xs font-semibold rounded-full">Good</span> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="flex justify-between text-sm text-gray-500 mb-1"> |
|
|
<span class="indicator-value">8 cases</span> |
|
|
<span class="indicator-target">≤ 10 cases</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="progress-bar bg-green-500 h-2 rounded-full" style="width: 80%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 px-5 py-3 border-t border-gray-200"> |
|
|
<button onclick="openIndicatorModal(8)" class="text-primary hover:text-primary-dark text-sm font-medium flex items-center"> |
|
|
<i class="fas fa-edit mr-1"></i> Update Status |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="indicator-9" class="bg-white rounded-lg shadow overflow-hidden indicator-card"> |
|
|
<div class="p-5"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-gray-800">NPT Rig</h3> |
|
|
<p class="text-sm text-gray-500">Non-Productive Time</p> |
|
|
</div> |
|
|
<span class="status-badge px-2 py-1 text-xs font-semibold rounded-full">Good</span> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="flex justify-between text-sm text-gray-500 mb-1"> |
|
|
<span class="indicator-value">3.2 hours</span> |
|
|
<span class="indicator-target">≤ 3.5 hours</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="progress-bar bg-green-500 h-2 rounded-full" style="width: 91%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 px-5 py-3 border-t border-gray-200"> |
|
|
<button onclick="openIndicatorModal(9)" class="text-primary hover:text-primary-dark text-sm font-medium flex items-center"> |
|
|
<i class="fas fa-edit mr-1"></i> Update Status |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="indicator-modal" class="hidden fixed inset-0 z-50 overflow-y-auto"> |
|
|
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> |
|
|
<div class="fixed inset-0 transition-opacity modal-overlay" aria-hidden="true"> |
|
|
<div class="absolute inset-0 bg-gray-500 opacity-75"></div> |
|
|
</div> |
|
|
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> |
|
|
<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"> |
|
|
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> |
|
|
<h3 id="modal-title" class="text-lg leading-6 font-medium text-gray-900 mb-4">Update Indicator Data</h3> |
|
|
<input type="hidden" id="indicator-id"> |
|
|
<div class="mb-4"> |
|
|
<label for="indicator-value" class="block text-sm font-medium text-gray-700">Current Value</label> |
|
|
<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"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> |
|
|
<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"> |
|
|
Save |
|
|
</button> |
|
|
<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"> |
|
|
Cancel |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<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> |
|
|
</html> |
