Schedule Training button in Training tab and Add Incident button in Incidents tab is not functional. Add flow to it
b49c754
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>New Incident | 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> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <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="flex items-center"> | |
| <a href="incidents.html" class="bg-white text-gray-700 px-4 py-2 rounded-md text-sm font-medium hover:bg-gray-50 mr-4"> | |
| Cancel | |
| </a> | |
| <button type="submit" form="incidentForm" class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700"> | |
| Report Incident | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="pt-24 pb-12 px-4 sm:px-6 lg:px-8 max-w-3xl mx-auto"> | |
| <div class="mb-8"> | |
| <h1 class="text-2xl font-bold text-gray-900">Report New Incident</h1> | |
| <p class="mt-2 text-sm text-gray-600">Fill out the form below to report a new safety incident</p> | |
| </div> | |
| <form id="incidentForm" class="bg-white shadow rounded-lg p-6"> | |
| <div class="grid grid-cols-1 gap-6"> | |
| <div> | |
| <label for="incidentType" class="block text-sm font-medium text-gray-700 mb-1">Incident Type</label> | |
| <select id="incidentType" name="incidentType" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md" required> | |
| <option value="">Select incident type</option> | |
| <option>Near Miss</option> | |
| <option>First Aid Case</option> | |
| <option>Medical Treatment</option> | |
| <option>Lost Time Injury</option> | |
| <option>Fatality</option> | |
| <option>Property Damage</option> | |
| <option>Environmental</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="severity" class="block text-sm font-medium text-gray-700 mb-1">Severity Level</label> | |
| <select id="severity" name="severity" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md" required> | |
| <option value="">Select severity level</option> | |
| <option>Low</option> | |
| <option>Medium</option> | |
| <option>High</option> | |
| <option>Critical</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="date" class="block text-sm font-medium text-gray-700 mb-1">Date of Incident</label> | |
| <input type="date" id="date" name="date" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md" required> | |
| </div> | |
| <div> | |
| <label for="time" class="block text-sm font-medium text-gray-700 mb-1">Time of Incident</label> | |
| <input type="time" id="time" name="time" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md" required> | |
| </div> | |
| <div> | |
| <label for="location" class="block text-sm font-medium text-gray-700 mb-1">Location</label> | |
| <input type="text" id="location" name="location" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md" placeholder="North Processing Unit" required> | |
| </div> | |
| <div> | |
| <label for="department" class="block text-sm font-medium text-gray-700 mb-1">Department</label> | |
| <select id="department" name="department" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md" required> | |
| <option value="">Select department</option> | |
| <option>Processing</option> | |
| <option>Maintenance</option> | |
| <option>Logistics</option> | |
| <option>Storage</option> | |
| <option>Administration</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="description" class="block text-sm font-medium text-gray-700 mb-1">Description</label> | |
| <textarea id="description" name="description" rows="4" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md" placeholder="Describe what happened..." required></textarea> | |
| </div> | |
| <div> | |
| <label for="actionsTaken" class="block text-sm font-medium text-gray-700 mb-1">Immediate Actions Taken</label> | |
| <textarea id="actionsTaken" name="actionsTaken" rows="3" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md" placeholder="What actions were taken immediately after the incident?" required></textarea> | |
| </div> | |
| <div> | |
| <label for="reporter" class="block text-sm font-medium text-gray-700 mb-1">Reported By</label> | |
| <input type="text" id="reporter" name="reporter" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md" placeholder="Your name" required> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| document.getElementById('incidentForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Form submission logic would go here | |
| alert('Incident reported successfully!'); | |
| window.location.href = 'incidents.html'; | |
| }); | |
| // Set default date to today | |
| const today = new Date().toISOString().split('T')[0]; | |
| document.getElementById('date').value = today; | |
| </script> | |
| </body> | |
| </html> |