|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Reports | 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> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
} |
|
|
.report-card:hover { |
|
|
transform: translateY(-3px); |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
</style> |
|
|
</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-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Compliance</a> |
|
|
<a href="reports.html" class="text-blue-600 border-b-2 border-blue-600 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"> |
|
|
<div class="ml-4 relative flex-shrink-0"> |
|
|
<div> |
|
|
<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> |
|
|
</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">Safety Reports</h1> |
|
|
<p class="mt-2 text-sm text-gray-600">View and analyze all safety reports and statistics</p> |
|
|
</div> |
|
|
<div class="mt-4 md:mt-0"> |
|
|
<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"> |
|
|
<i data-feather="file-text" class="h-4 w-4 inline mr-1"></i> Generate New Report |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-4 rounded-lg shadow mb-8"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Report Type</label> |
|
|
<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"> |
|
|
<option>All Types</option> |
|
|
<option>Incident Reports</option> |
|
|
<option>Near Misses</option> |
|
|
<option>Hazard Identifications</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Severity</label> |
|
|
<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"> |
|
|
<option>All Levels</option> |
|
|
<option>Low</option> |
|
|
<option>Medium</option> |
|
|
<option>High</option> |
|
|
<option>Critical</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Date Range</label> |
|
|
<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"> |
|
|
<option>Last 30 Days</option> |
|
|
<option>Last 90 Days</option> |
|
|
<option>This Year</option> |
|
|
<option>All Time</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Department</label> |
|
|
<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"> |
|
|
<option>All Departments</option> |
|
|
<option>Processing</option> |
|
|
<option>Maintenance</option> |
|
|
<option>Logistics</option> |
|
|
<option>Storage</option> |
|
|
</select> |
|
|
</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-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">Total Reports</dt> |
|
|
<dd> |
|
|
<div class="text-lg font-medium text-gray-900">127</div> |
|
|
</dd> |
|
|
</dl> |
|
|
</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-red-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">Open Incidents</dt> |
|
|
<dd> |
|
|
<div class="text-lg font-medium text-gray-900">14</div> |
|
|
</dd> |
|
|
</dl> |
|
|
</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-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">Resolved</dt> |
|
|
<dd> |
|
|
<div class="text-lg font-medium text-gray-900">89%</div> |
|
|
</dd> |
|
|
</dl> |
|
|
</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-yellow-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">Avg Resolution</dt> |
|
|
<dd> |
|
|
<div class="text-lg font-medium text-gray-900">3.2 days</div> |
|
|
</dd> |
|
|
</dl> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow mb-8"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<h2 class="text-lg font-medium text-gray-900">Report Trends</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-md text-sm font-medium">Monthly</button> |
|
|
<button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-md text-sm font-medium">Quarterly</button> |
|
|
<button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-md text-sm font-medium">Yearly</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="h-80"> |
|
|
<canvas id="trendsChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<h2 class="text-lg font-medium text-gray-900">Recent Reports</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-md text-sm font-medium"> |
|
|
<i data-feather="download" class="h-4 w-4 inline mr-1"></i> Export |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Report ID</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Location</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Severity</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> |
|
|
<th scope="col" class="relative px-6 py-3"> |
|
|
<span class="sr-only">Actions</span> |
|
|
</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#SR-2023-042</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Incident</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 15, 2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">North Processing</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">High</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Investigation</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<a href="#" class="text-blue-600 hover:text-blue-900">View</a> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#SR-2023-041</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Near Miss</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 14, 2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Loading Dock</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Medium</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Resolved</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<a href="#" class="text-blue-600 hover:text-blue-900">View</a> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#SR-2023-040</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Hazard</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 12, 2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Compression Station</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-orange-100 text-orange-800">High</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Resolved</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<a href="#" class="text-blue-600 hover:text-blue-900">View</a> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#SR-2023-039</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Suggestion</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 10, 2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Facility-wide</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">N/A</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Review</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<a href="#" class="text-blue-600 hover:text-blue-900">View</a> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4 flex items-center justify-between"> |
|
|
<div class="text-sm text-gray-500"> |
|
|
Showing <span class="font-medium">1</span> to <span class="font-medium">4</span> of <span class="font-medium">127</span> results |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-md text-sm font-medium"> |
|
|
Previous |
|
|
</button> |
|
|
<button class="px-3 py-1 bg-blue-600 text-white rounded-md text-sm font-medium"> |
|
|
1 |
|
|
</button> |
|
|
<button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-md text-sm font-medium"> |
|
|
2 |
|
|
</button> |
|
|
<button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-md text-sm font-medium"> |
|
|
Next |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
VANTA.WAVES({ |
|
|
el: "#vanta-bg", |
|
|
mouseControls: true, |
|
|
touchControls: true, |
|
|
gyroControls: false, |
|
|
color: 0x172b4d, |
|
|
waveHeight: 15.00, |
|
|
waveSpeed: 0.75, |
|
|
zoom: 0.8 |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
feather.replace(); |
|
|
|
|
|
const ctx = document.getElementById('trendsChart').getContext('2d'); |
|
|
const trendsChart = new Chart(ctx, { |
|
|
type: 'line', |
|
|
data: { |
|
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], |
|
|
datasets: [ |
|
|
{ |
|
|
label: 'Incident Reports', |
|
|
data: [12, 8, 15, 10, 14, 9], |
|
|
borderColor: 'rgba(239, 68, 68, 1)', |
|
|
backgroundColor: 'rgba(239, 68, 68, 0.1)', |
|
|
borderWidth: 2, |
|
|
tension: 0.3, |
|
|
fill: true |
|
|
}, |
|
|
{ |
|
|
label: 'Near Misses', |
|
|
data: [8, 10, 12, 7, 9, 6], |
|
|
borderColor: 'rgba(234, 179, 8, 1)', |
|
|
backgroundColor: 'rgba(234, 179, 8, 0.1)', |
|
|
borderWidth: 2, |
|
|
tension: 0.3, |
|
|
fill: true |
|
|
}, |
|
|
{ |
|
|
label: 'Hazard IDs', |
|
|
data: [5, 7, 4, 6, 8, 5], |
|
|
borderColor: 'rgba(59, 130, 246, 1)', |
|
|
backgroundColor: 'rgba(59, 130, 246, 0.1)', |
|
|
borderWidth: 2, |
|
|
tension: 0.3, |
|
|
fill: true |
|
|
} |
|
|
] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
position: 'top', |
|
|
}, |
|
|
tooltip: { |
|
|
mode: 'index', |
|
|
intersect: false, |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: true, |
|
|
ticks: { |
|
|
stepSize: 5 |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
