|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Incidents | 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> |
|
|
</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-blue-600 border-b-2 border-blue-600 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-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"> |
|
|
<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">Incident Management</h1> |
|
|
<p class="mt-2 text-sm text-gray-600">Track, manage, and analyze safety incidents</p> |
|
|
</div> |
|
|
<div class="mt-4 md:mt-0 flex space-x-3"> |
|
|
<a href="new-incident.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 Incident |
|
|
</a> |
|
|
<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 Status</option> |
|
|
<option>Open</option> |
|
|
<option>Under Investigation</option> |
|
|
<option>Resolved</option> |
|
|
<option>Closed</option> |
|
|
</select> |
|
|
<i data-feather="chevron-down" class="absolute right-3 top-2.5 h-4 w-4 text-gray-400"></i> |
|
|
</div> |
|
|
<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>Last 30 days</option> |
|
|
<option>Last 7 days</option> |
|
|
<option>Last 90 days</option> |
|
|
<option>All Time</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="bg-white p-6 rounded-lg shadow mb-8"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
<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 Severities</option> |
|
|
<option>Critical</option> |
|
|
<option>High</option> |
|
|
<option>Medium</option> |
|
|
<option>Low</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> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">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>Equipment Failure</option> |
|
|
<option>PPE Non-compliance</option> |
|
|
<option>Near Miss</option> |
|
|
<option>Environmental</option> |
|
|
<option>Injury</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden"> |
|
|
<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">Incident ID</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Title</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">Department</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">Status</th> |
|
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</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">IN-2023-0425</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Gas Leak in North Unit</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">Critical</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Processing</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Apr 25, 2023</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 mr-3">View</a> |
|
|
<a href="#" class="text-gray-600 hover:text-gray-900">Edit</a> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">IN-2023-0422</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">PPE Non-compliance</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 text-sm text-gray-500">Storage</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Apr 22, 2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">Training</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 mr-3">View</a> |
|
|
<a href="#" class="text-gray-600 hover:text-gray-900">Edit</a> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">IN-2023-0418</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Near Miss - Forklift Incident</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">Low</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Logistics</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Apr 18, 2023</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 mr-3">View</a> |
|
|
<a href="#" class="text-gray-600 hover:text-gray-900">Edit</a> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">IN-2023-0415</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Equipment Failure - Compressor</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 text-sm text-gray-500">Maintenance</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Apr 15, 2023</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">Repair</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 mr-3">View</a> |
|
|
<a href="#" class="text-gray-600 hover:text-gray-900">Edit</a> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">IN-2023-0410</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Chemical Spill - Minor</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 text-sm text-gray-500">Processing</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Apr 10, 2023</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 mr-3">View</a> |
|
|
<a href="#" class="text-gray-600 hover:text-gray-900">Edit</a> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
<div class="bg-gray-50 px-6 py-3 flex items-center justify-between border-t border-gray-200"> |
|
|
<div class="flex-1 flex justify-between sm:hidden"> |
|
|
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">Previous</a> |
|
|
<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">Next</a> |
|
|
</div> |
|
|
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> |
|
|
<div> |
|
|
<p class="text-sm text-gray-700"> |
|
|
Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">24</span> incidents |
|
|
</p> |
|
|
</div> |
|
|
<div> |
|
|
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination"> |
|
|
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> |
|
|
<span class="sr-only">Previous</span> |
|
|
<i data-feather="chevron-left" class="h-5 w-5"></i> |
|
|
</a> |
|
|
<a href="#" aria-current="page" class="z-10 bg-blue-50 border-blue-500 text-blue-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">1</a> |
|
|
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">2</a> |
|
|
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">3</a> |
|
|
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> |
|
|
<span class="sr-only">Next</span> |
|
|
<i data-feather="chevron-right" class="h-5 w-5"></i> |
|
|
</a> |
|
|
</nav> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
VANTA.WAVES({ |
|
|
el: "#vanta-bg", |
|
|
color: 0x172b4d, |
|
|
waveHeight: 15.00, |
|
|
waveSpeed: 0.75, |
|
|
zoom: 0.8 |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
