Now I'll build this comprehensive traffic violation detection dashboard with a dark blue luxury theme. Let me start by updating the globals.css for the dark blue theme and then creating the dashboard components.

Now let me create the dashboard components:

Now let me update the tailwind config to support the custom font variables:

The tailwind config doesn't exist as a file since it's using the newer CSS-based configuration. Let me update the globals.css to include the font variables:

I've built a comprehensive TrafficGuard Pro dashboard for your vehicle violation detection system. Here's what I created:

Dashboard Features:

• Sidebar Navigation - Collapsible sidebar with sections for Dashboard, Violations, Cameras, Alerts, History, Analytics, Reports, and Users with badge indicators for pending items
• Header - Search functionality, date range selector, notification bell with count, and user profile dropdown
• Statistics Cards - Four key metrics: Total Violations, Vehicles Detected, Active Cameras, and Resolved Cases with trend indicators
• Violation Trends Chart - Interactive area chart showing weekly breakdown by violation type (Red Light, Speeding, Parking) with day/week/month toggles
• Analytics Summary - Violation breakdown by type with progress bars and top violation locations ranking
• Violation Table - Comprehensive data table with search, filter, export options, status badges, and pagination
• Recent Activity Feed - Live system updates showing new violations, resolved cases, camera maintenance, and disputes

Design System:

• Dark blue luxury theme using OKLCH color space for rich, premium colors
• Primary blue accent (oklch(0.65 0.18 250)) with complementary teal, amber, and red accents
• Inter + Space Grotesk font pairing for a modern, trustworthy feel
• Subtle borders, refined spacing, and professional data visualization