feat: Host-centric compliance scan interface with enhanced UX

[remyluslosius]

Summary

• Transform /scans page from scan-centric to host-centric accordion view
• Integrate real-time host status monitoring with existing StatusChip system
• Implement comprehensive scan-host association validation and data integrity
• Align ComplianceScans page design with application-wide UI patterns

Major Features

🖥️ Host-Centric Accordion Interface

• Replace flat scan table with collapsible host sections
• Display success ratio (5/10 format) prominently in host headers
• Sort hosts by most recent scan date with 30-day filtering
• Expandable sections revealing individual scan details per host

📊 Enhanced Host Status Integration

• Real-time host status display using existing StatusChip component
• Support for comprehensive status types: online/offline/reachable/ping_only/scanning/error
• Extract host status and IP address from backend scan data
• Visual status indicators with proper icons and color coding

🔧 Host-Level Actions

• One-click rescan using most recent scan configuration
• Navigate to detailed host information pages
• Export host scan reports (all/completed/failed) as CSV
• Individual scan actions: View Results, Download Reports

🛡️ Robust Data Validation

• Comprehensive scan-host association validation with detailed logging
• Transform backend nested host data to frontend expected format
• Filter invalid scans with user-friendly error messages
• Host ID collision detection and data integrity checks

🎨 Design Consistency Updates

• Align ComplianceScans page with Dashboard/Hosts/Users design patterns
• Use standard Container maxWidth="xl" for full-width utilization
• Apply consistent Paper/Card wrapping with proper shadows and spacing
• Standardize typography hierarchy and section spacing

Technical Improvements

Data Architecture

• Add BackendScan interface for proper API response typing
• Create hostStatusMap for efficient status data management
• Implement 30-day scan filtering with date-based sorting
• Add comprehensive error handling and user feedback

User Experience

• Eliminate excessive whitespace with proper container utilization
• Clean accordion interface with host metrics in headers
• Success ratio prominently displayed for quick compliance overview
• Consistent status visualization across host and scan levels

Performance & Reliability

• Fix infinite re-render loop with proper useEffect dependencies
• Maintain periodic refresh for running scans without performance impact
• Preserve backward compatibility with existing API endpoints
• Ensure all scans have required host_id foreign key association

Test Plan

• Verify host-centric accordion display with proper grouping
• Test host status integration shows correct online/offline states
• Confirm periodic refresh works for running scans without flickering
• Validate scan-host associations are properly maintained
• Check design consistency matches other application pages
• Test host-level actions (rescan, view details, export)
• Verify CSV export functionality works for different filter types
• Confirm navigation to detailed scan pages (/scans/{uuid})

🤖 Generated with Claude Code

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud