|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Compliance | Safety Sentinel</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
<div id="vanta-bg" class="fixed inset-0 -z-10"></div> |
|
|
|
|
|
|
|
|
<nav class="bg-white bg-opacity-90 backdrop-blur-md border-b border-gray-200 fixed w-full z-10"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<i data-feather="shield" class="h-8 w-8 text-blue-600"></i> |
|
|
<span class="ml-2 text-xl font-bold text-gray-900">Safety Sentinel</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> |
|
|
<a href="index.html" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Dashboard</a> |
|
|
<a href="incidents.html" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Incidents</a> |
|
|
<a href="compliance.html" class="text-blue-600 border-b-2 border-blue-600 px-1 pt-1 text-sm font-medium">Compliance</a> |
|
|
<a href="reports.html" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Reports</a> |
|
|
<a href="training.html" class="text-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Training</a> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<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"> |
|
|
<i data-feather="plus" class="h-4 w-4 inline mr-1"></i> New Report |
|
|
</a> |
|
|
<div class="ml-4 relative flex-shrink-0"> |
|
|
<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"> |
|
|
<span class="sr-only">Open user menu</span> |
|
|
<img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/42" alt=""> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="pt-24 pb-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> |
|
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8"> |
|
|
<div> |
|
|
<h1 class="text-3xl font-bold text-gray-900">Compliance Management</h1> |
|
|
<p class="mt-2 text-sm text-gray-600">Monitor regulatory compliance and safety standards</p> |
|
|
</div> |
|
|
<div class="mt-4 md:mt-0"> |
|
|
<div class="relative"> |
|
|
<select class="appearance-none bg-white border border-gray-300 rounded-md pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> |
|
|
<option>All Standards</option> |
|
|
<option>OSHA</option> |
|
|
<option>ISO 45001</option> |
|
|
<option>NFPA</option> |
|
|
<option>EPA</option> |
|
|
</select> |
|
|
<i data-feather="chevron-down" class="absolute right-3 top-2.5 h-4 w-4 text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-8"> |
|
|
<div class="bg-white overflow-hidden shadow rounded-lg"> |
|
|
<div class="px-4 py-5 sm:p-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 bg-green-500 rounded-md p-3"> |
|
|
<i data-feather="check-circle" class="h-6 w-6 text-white"></i> |
|
|
</div> |
|
|
<div class="ml-5 w-0 flex-1"> |
|
|
<dl> |
|
|
<dt class="text-sm font-medium text-gray-500 truncate">Overall Compliance</dt> |
|
|
<dd> |
|
|
<div class="text-lg font-medium text-gray-900">94%</div> |
|
|
</dd> |
|
|
</dl> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="border-t border-gray-200 pt-3"> |
|
|
<p class="text-xs text-gray-500"> |
|
|
<span class="text-green-600 font-semibold">1.3%</span> from last quarter |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white overflow-hidden shadow rounded-lg"> |
|
|
<div class="px-4 py-5 sm:p-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 bg-blue-500 rounded-md p-3"> |
|
|
<i data-feather="file-text" class="h-6 w-6 text-white"></i> |
|
|
</div> |
|
|
<div class="ml-5 w-0 flex-1"> |
|
|
<dl> |
|
|
<dt class="text-sm font-medium text-gray-500 truncate">Open Requirements</dt> |
|
|
<dd> |
|
|
<div class="text-lg font-medium text-gray-900">12</div> |
|
|
</dd> |
|
|
</dl> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="border-t border-gray-200 pt-3"> |
|
|
<p class="text-xs text-gray-500"> |
|
|
<span class="text-red-600 font-semibold">3</span> critical |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white overflow-hidden shadow rounded-lg"> |
|
|
<div class="px-4 py-5 sm:p-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 bg-orange-500 rounded-md p-3"> |
|
|
<i data-feather="clock" class="h-6 w-6 text-white"></i> |
|
|
</div> |
|
|
<div class="ml-5 w-0 flex-1"> |
|
|
<dl> |
|
|
<dt class="text-sm font-medium text-gray-500 truncate">Upcoming Audits</dt> |
|
|
<dd> |
|
|
<div class="text-lg font-medium text-gray-900">2</div> |
|
|
</dd> |
|
|
</dl> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="border-t border-gray-200 pt-3"> |
|
|
<p class="text-xs text-gray-500"> |
|
|
Next in <span class="font-semibold">14 days</span> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white overflow-hidden shadow rounded-lg"> |
|
|
<div class="px-4 py-5 sm:p-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 bg-purple-500 rounded-md p-3"> |
|
|
<i data-feather="alert-triangle" class="h-6 w-6 text-white"></i> |
|
|
</div> |
|
|
<div class="ml-5 w-0 flex-1"> |
|
|
<dl> |
|
|
<dt class="text-sm font-medium text-gray-500 truncate">Overdue Actions</dt> |
|
|
<dd> |
|
|
<div class="text-lg font-medium text-gray-900">5</div> |
|
|
</dd> |
|
|
</dl> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="border-t border-gray-200 pt-3"> |
|
|
<p class="text-xs text-gray-500"> |
|
|
<span class="text-red-600 font-semibold">2</span> high priority |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white shadow rounded-lg overflow-hidden mb-8"> |
|
|
<div class="px-6 py-4 border-b border-gray-200"> |
|
|
<h2 class="text-lg font-medium text-gray-900">Compliance Standards</h2> |
|
|
</div> |
|
|
<div class="divide-y divide-gray-200"> |
|
|
<div class="px-6 py-4 hover:bg-gray-50"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 bg-blue-100 p-3 rounded-md"> |
|
|
<i data-feather="file-text" class="h-5 w-5 text-blue-600"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-sm font-medium text-gray-900">OSHA 1910</h3> |
|
|
<p class="text-sm text-gray-500">General Industry Standards</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="mr-8"> |
|
|
<span class="text-sm text-gray-500">Compliance</span> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-32 bg-gray-200 rounded-full h-2.5 mr-2"> |
|
|
<div class="bg-green-500 h-2.5 rounded-full" style="width: 97%"></div> |
|
|
</div> |
|
|
<span class="text-sm font-medium text-gray-900">97%</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<span class="text-sm text-gray-500">12 requirements</span> |
|
|
<button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="px-6 py-4 hover:bg-gray-50"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 bg-green-100 p-3 rounded-md"> |
|
|
<i data-feather="globe" class="h-5 w-5 text-green-600"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-sm font-medium text-gray-900">ISO 45001</h3> |
|
|
<p class="text-sm text-gray-500">Occupational Health and Safety</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="mr-8"> |
|
|
<span class="text-sm text-gray-500">Compliance</span> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-32 bg-gray-200 rounded-full h-2.5 mr-2"> |
|
|
<div class="bg-green-500 h-2.5 rounded-full" style="width: 93%"></div> |
|
|
</div> |
|
|
<span class="text-sm font-medium text-gray-900">93%</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<span class="text-sm text-gray-500">18 requirements</span> |
|
|
<button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="px-6 py-4 hover:bg-gray-50"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 bg-red-100 p-3 rounded-md"> |
|
|
<i data-feather="fire" class="h-5 w-5 text-red-600"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-sm font-medium text-gray-900">NFPA 70E</h3> |
|
|
<p class="text-sm text-gray-500">Electrical Safety in the Workplace</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="mr-8"> |
|
|
<span class="text-sm text-gray-500">Compliance</span> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-32 bg-gray-200 rounded-full h-2.5 mr-2"> |
|
|
<div class="bg-green-500 h-2.5 rounded-full" style="width: 89%"></div> |
|
|
</div> |
|
|
<span class="text-sm font-medium text-gray-900">89%</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<span class="text-sm text-gray-500">9 requirements</span> |
|
|
<button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="px-6 py-4 hover:bg-gray-50"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 bg-purple-100 p-3 rounded-md"> |
|
|
<i data-feather="droplet" class="h-5 w-5 text-purple-600"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-sm font-medium text-gray-900">EPA RCRA</h3> |
|
|
<p class="text-sm text-gray-500">Hazardous Waste Management</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="mr-8"> |
|
|
<span class="text-sm text-gray-500">Compliance</span> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-32 bg-gray-200 rounded-full h-2.5 mr-2"> |
|
|
<div class="bg-yellow-500 h-2.5 rounded-full" style="width: 78%"></div> |
|
|
</div> |
|
|
<span class="text-sm font-medium text-gray-900">78%</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<span class="text-sm text-gray-500">7 requirements</span> |
|
|
<button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> |
|
|
<div class="bg-white p-6 rounded-lg shadow"> |
|
|
<h2 class="text-lg font-medium text-gray-900 mb-4">Compliance by Department</h2> |
|
|
<div class="h-64"> |
|
|
<canvas id="complianceDepartmentChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-lg shadow"> |
|
|
<h2 class="text-lg font-medium text-gray-900 mb-4">Compliance Trend</h2> |
|
|
<div class="h-64"> |
|
|
<canvas id="complianceTrendChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-8 bg-white shadow rounded-lg overflow-hidden"> |
|
|
<div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between"> |
|
|
<h2 class="text-lg font-medium text-gray-900">Open Action Items</h2> |
|
|
<button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View All</button> |
|
|
</div> |
|
|
<div class="divide-y divide-gray-200"> |
|
|
<div class="px-6 py-4 hover:bg-gray-50"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<h3 class="text-sm font-medium text-gray-900">Update LOTO procedures</h3> |
|
|
<p class="text-sm text-gray-500">Required by OSHA 1910.147</p> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<span class="text-sm text-gray-500">Due in 7 days</span> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">High Priority</span> |
|
|
<button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="px-6 py-4 hover:bg-gray-50"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<h3 class="text-sm font-medium text-gray-900">Conduct emergency drill</h3> |
|
|
<p class="text-sm text-gray-500">Required by NFPA 101</p> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<span class="text-sm text-gray-500">Due in 14 days</span> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Medium Priority</span> |
|
|
<button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="px-6 py-4 hover:bg-gray-50"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<h3 class="text-sm font-medium text-gray-900">Hazardous waste training</h3> |
|
|
<p class="text-sm text-gray-500">Required by EPA RCRA</p> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<span class="text-sm text-gray-500">Due in 21 days</span> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Medium Priority</span> |
|
|
<button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
VANTA.WAVES({ |
|
|
el: "#vanta-bg", |
|
|
color: 0x172b4d, |
|
|
waveHeight: 15.00, |
|
|
waveSpeed: 0.75, |
|
|
zoom: 0.8 |
|
|
}); |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const deptCtx = document.getElementById('complianceDepartmentChart').getContext('2d'); |
|
|
const deptChart = new Chart(deptCtx, { |
|
|
type: 'bar', |
|
|
data: { |
|
|
labels: ['Processing', 'Maintenance', 'Logistics', 'Storage', 'Administration'], |
|
|
datasets: [{ |
|
|
label: 'Compliance Rate', |
|
|
data: [97, 89, 93, 84, 95], |
|
|
backgroundColor: 'rgba(59, 130, 246, 0.7)', |
|
|
borderColor: 'rgba(59, 130, 246, 1)', |
|
|
borderWidth: 1 |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: true, |
|
|
max: 100, |
|
|
ticks: { |
|
|
callback: function(value) { |
|
|
return value + '%'; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const trendCtx = document.getElementById('complianceTrendChart').getContext('2d'); |
|
|
const trendChart = new Chart(trendCtx, { |
|
|
type: 'line', |
|
|
data: { |
|
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], |
|
|
datasets: [{ |
|
|
label: 'Overall Compliance', |
|
|
data: [88, 89, 90, 91, 92, 94], |
|
|
backgroundColor: 'rgba(16, 185, 129, 0.1)', |
|
|
borderColor: 'rgba(16, 185, 129, 1)', |
|
|
borderWidth: 2, |
|
|
fill: true, |
|
|
tension: 0.4 |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: false, |
|
|
min: 85, |
|
|
max: 100, |
|
|
ticks: { |
|
|
callback: function(value) { |
|
|
return value + '%'; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
