Unilever Safety Dashboard - Copy this React, Tailwind Component to your project

Create a responsive Unilever Safety Dashboard using React components. The design should be clean and interactive, following the following specifications: Header: Display the text "Unilever Safety Dashboard" centered at the top of the page. On the right side, add a profile section for an admin user with the text "Admin Unilever" and a search icon for functionality. Sidebar Navigation: On the left, create a vertical navigation bar with the following menu items: Dashboard (highlighted) Users Live Camera Live Alerts Reports (with submenus: Area Reports, All Model Reports, Factory Reports) Support Place the Unilever logo at the top of the sidebar. Main Dashboard Components: Add a 90% blockage circular progress indicator using a circular progress bar. Include a line graph titled "Blockage Over Time" to track blockages with hours on the X axis and count on the Y axis. Add dummy data for the graph. Add a bar chart titled "Alerts" showing the number of alerts for five gates, each with a distinct color bar. Emergency Alerts: Below the charts, add five card components, each representing a gate (Gate #1 to Gate #5). Each card should display a title, the gate number, and a random number of emergency alerts. Include different indicators for gates that are "down" or "active" (use color codes: red for down, green for active). Latest Alerts Section: At the bottom, display a row of three image thumbnails that represent security camera footage. Label this section as "Latest Alerts". Visual Design: Ensure the UI layout is clean and interactive, avoiding clutter. Use minimalist design elements, and ensure there is enough padding and spacing between components. Use appropriate dummy data for all charts and components. Keep the charts and progress indicators dynamic with sample data that can later be replaced.