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>Training | 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> | |
| <!-- Navigation --> | |
| <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-gray-500 hover:text-gray-700 px-1 pt-1 text-sm font-medium">Reports</a> | |
| <a href="training.html" class="text-blue-600 border-b-2 border-blue-600 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> | |
| <!-- Main Content --> | |
| <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 Training</h1> | |
| <p class="mt-2 text-sm text-gray-600">Manage employee training and certifications</p> | |
| </div> | |
| <div class="mt-4 md:mt-0"> | |
| <a href="new-training.html" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 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 mr-2"></i> Schedule Training | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Training Stats --> | |
| <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="users" 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">Employees Trained</dt> | |
| <dd> | |
| <div class="text-lg font-medium text-gray-900">143</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">12</span> this month | |
| </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-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">Completion Rate</dt> | |
| <dd> | |
| <div class="text-lg font-medium text-gray-900">92%</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">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-yellow-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 Trainings</dt> | |
| <dd> | |
| <div class="text-lg font-medium text-gray-900">7</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> 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-purple-500 rounded-md p-3"> | |
| <i data-feather="calendar" 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 Sessions</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"> | |
| Next in <span class="font-semibold">3 days</span> | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Training Programs --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8"> | |
| <div class="bg-white p-6 rounded-lg shadow lg:col-span-2"> | |
| <h2 class="text-lg font-medium text-gray-900 mb-4">Training Programs</h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-start p-4 border border-gray-200 rounded-lg"> | |
| <div class="flex-shrink-0 bg-blue-100 p-3 rounded-md"> | |
| <i data-feather="shield" class="h-5 w-5 text-blue-600"></i> | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <h3 class="text-sm font-medium text-gray-900">General Safety Orientation</h3> | |
| <p class="text-sm text-gray-500 mt-1">Mandatory for all new employees. Covers basic safety protocols and emergency procedures.</p> | |
| <div class="mt-2 flex flex-wrap gap-2"> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Annual</span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">45 min</span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">95% Complete</span> | |
| </div> | |
| </div> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View</button> | |
| </div> | |
| <div class="flex items-start p-4 border border-gray-200 rounded-lg"> | |
| <div class="flex-shrink-0 bg-red-100 p-3 rounded-md"> | |
| <i data-feather="alert-octagon" class="h-5 w-5 text-red-600"></i> | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <h3 class="text-sm font-medium text-gray-900">Hazardous Materials Handling</h3> | |
| <p class="text-sm text-gray-500 mt-1">Training for employees who work with or near hazardous chemicals.</p> | |
| <div class="mt-2 flex flex-wrap gap-2"> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Biennial</span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">2 hrs</span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">87% Complete</span> | |
| </div> | |
| </div> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View</button> | |
| </div> | |
| <div class="flex items-start p-4 border border-gray-200 rounded-lg"> | |
| <div class="flex-shrink-0 bg-yellow-100 p-3 rounded-md"> | |
| <i data-feather="zap" class="h-5 w-5 text-yellow-600"></i> | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <h3 class="text-sm font-medium text-gray-900">LOTO (Lockout/Tagout)</h3> | |
| <p class="text-sm text-gray-500 mt-1">Required for maintenance personnel to safely service equipment.</p> | |
| <div class="mt-2 flex flex-wrap gap-2"> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Annual</span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">1.5 hrs</span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">76% Complete</span> | |
| </div> | |
| </div> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View</button> | |
| </div> | |
| <div class="flex items-start p-4 border border-gray-200 rounded-lg"> | |
| <div class="flex-shrink-0 bg-green-100 p-3 rounded-md"> | |
| <i data-feather="activity" class="h-5 w-5 text-green-600"></i> | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <h3 class="text-sm font-medium text-gray-900">Emergency Response</h3> | |
| <p class="text-sm text-gray-500 mt-1">Prepares employees for fire, chemical spills, and other emergencies.</p> | |
| <div class="mt-2 flex flex-wrap gap-2"> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Annual</span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">1 hr</span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">91% Complete</span> | |
| </div> | |
| </div> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Upcoming Sessions --> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <h2 class="text-lg font-medium text-gray-900 mb-4">Upcoming Training Sessions</h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="bg-blue-100 p-2 rounded-full"> | |
| <i data-feather="calendar" class="h-5 w-5 text-blue-600"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <p class="text-sm font-medium text-gray-900">General Safety Orientation</p> | |
| <p class="text-sm text-gray-500">Jul 15, 2023 • 9:00 AM - 10:00 AM</p> | |
| <div class="mt-1 flex flex-wrap gap-2"> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">12 seats left</span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Main Conference Room</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="bg-red-100 p-2 rounded-full"> | |
| <i data-feather="calendar" class="h-5 w-5 text-red-600"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <p class="text-sm font-medium text-gray-900">Hazardous Materials Refresher</p> | |
| <p class="text-sm text-gray-500">Jul 18, 2023 • 1:00 PM - 3:00 PM</p> | |
| <div class="mt-1 flex flex-wrap gap-2"> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">2 seats left</span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Training Center B</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="bg-yellow-100 p-2 rounded-full"> | |
| <i data-feather="calendar" class="h-5 w-5 text-yellow-600"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <p class="text-sm font-medium text-gray-900">Forklift Certification</p> | |
| <p class="text-sm text-gray-500">Jul 20, 2023 • 8:00 AM - 12:00 PM</p> | |
| <div class="mt-1 flex flex-wrap gap-2"> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">5 seats left</span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Warehouse Area</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="bg-purple-100 p-2 rounded-full"> | |
| <i data-feather="calendar" class="h-5 w-5 text-purple-600"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <p class="text-sm font-medium text-gray-900">First Aid & CPR</p> | |
| <p class="text-sm text-gray-500">Jul 22, 2023 • 10:00 AM - 2:00 PM</p> | |
| <div class="mt-1 flex flex-wrap gap-2"> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">Waitlist</span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Medical Office</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <button class="w-full text-center text-blue-600 hover:text-blue-800 text-sm font-medium">View All Scheduled Sessions</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Training Progress --> | |
| <div class="bg-white p-6 rounded-lg shadow mb-8"> | |
| <h2 class="text-lg font-medium text-gray-900 mb-4">Training Progress by Department</h2> | |
| <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">Department</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Required</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Completed</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Overdue</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Completion</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Processing</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">11</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">92%</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">On Track</span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Maintenance</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">67%</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">Needs Attention</span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Logistics</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">9</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">90%</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">On Track</span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Storage</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">7</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">88%</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">On Track</span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Administration</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">0</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">100%</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">Complete</span> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Training Charts --> | |
| <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">Training Completion</h2> | |
| <div class="h-64"> | |
| <canvas id="trainingCompletionChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <h2 class="text-lg font-medium text-gray-900 mb-4">Training Types</h2> | |
| <div class="h-64"> | |
| <canvas id="trainingTypesChart"></canvas> | |
| </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() { | |
| // Training Completion Chart | |
| const completionCtx = document.getElementById('trainingCompletionChart').getContext('2d'); | |
| const completionChart = new Chart(completionCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], | |
| datasets: [{ | |
| label: 'Completion Rate', | |
| data: [75, 78, 82, 85, 88, 92], | |
| backgroundColor: 'rgba(59, 130, 246, 0.1)', | |
| borderColor: 'rgba(59, 130, 246, 1)', | |
| borderWidth: 2, | |
| fill: true, | |
| tension: 0.4 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| scales: { | |
| y: { | |
| beginAtZero: false, | |
| min: 70, | |
| max: 100, | |
| ticks: { | |
| callback: function(value) { | |
| return value + '%'; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Training Types Chart | |
| const typesCtx = document.getElementById('trainingTypesChart').getContext('2d'); | |
| const typesChart = new Chart(typesCtx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['Safety Orientation', 'Hazardous Materials', 'Equipment', 'Emergency', 'Other'], | |
| datasets: [{ | |
| data: [35, 25, 20, 15, 5], | |
| backgroundColor: [ | |
| 'rgba(59, 130, 246, 0.7)', | |
| 'rgba(239, 68, 68, 0.7)', | |
| 'rgba(234, 179, 8, 0.7)', | |
| 'rgba(16, 185, 129, 0.7)', | |
| 'rgba(139, 92, 246, 0.7)' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |