📊 Dashboard Modernization

This PR completely redesigns the dashboard with a modern, interactive interface using MUI X Charts.

✨ What's New

🎨 Modern UI Components

• DashboardKPIs: Hero section with 4 KPI cards featuring:

  • Overall Pass Rate gauge with month-over-month trend (color-coded: green >60%, orange 30-60%, red <30%)
  • Sparkline charts with area fills showing trends
  • Trend indicators (up/down arrows with change values)
  • Brand color palette throughout

• TestRunPerformance: Recent test runs in compact cards:

  • Pass rate progress bars with ~tilde for approximate times
  • Status chips (Completed/Failed based on pass rate)
  • Executor information
  • Click to navigate to test run details
  • Dynamic viewport-based item limits (6-20 items)

• ActivityTimeline: Comprehensive activity feed showing:

  • Test Created & Test Updated (NEW!)
  • Test Run Executed (usesstarted_at timestamp)
  • Test Set Created
  • Task Created (NEW!)
  • Task Assigned (NEW!)
  • Task Completed (NEW!)
  • Task Updated (NEW!)
  • Shows assignees, status, and metadata chips
  • Click to navigate to related entities
  • Dynamic viewport-based item limits (6-15 items)

📈 Technical Improvements

• Brand Consistency: All charts use brand color palette from theme
• Unified Loading: Single spinner for entire dashboard instead of 3 separate ones
• Data Consistency: Test runs data aligned with Test Results page usinggetComprehensiveTestResultsStats
• Interactive Features: Click-to-navigate, subtle hover effects (no translation animations)
• Responsive Layout: 2x3 grid system with proper spacing
• Viewport Optimization: Dynamic content display based on available screen space
• TypeScript Updates: Added missingcreated_at andupdated_at to Task interface

🗑️ Removed

• Legacy dashboard components (DashboardCharts.tsx, pie charts)
• Redundant hover animations (translateY/translateX transforms)
• Auto-refresh mechanism (data only fetched on mount and token changes)
• Window resize listeners (viewport assessed once at initial load)

📊 Dashboard Layout

┌─────────────────────────────────────────────────────────────┐│  Overall Pass │  Test Exec.   │  Total Test   │  Tests      ││  Rate (Gauge) │  (Sparkline)  │  Sets         │ (Sparkline) ││  + Trend      │               │  (Sparkline)  │             │└─────────────────────────────────────────────────────────────┘┌──────────────────────────┬──────────────────────────────────┐│  Recent Test Runs        │  Recent Activity Timeline        ││  (6-20 cards, dynamic)   │  (6-15 items, dynamic)          ││  - Pass rates            │  - Tests, Test Runs, Test Sets  ││  - Status (Completed/    │  - Tasks (Created/Assigned/     ││    Failed)               │    Completed/Updated)           ││  - ~X time ago           │  - ~X time ago                  │└──────────────────────────┴──────────────────────────────────┘

🎯 User Benefits

• ✅At-a-glance insights: KPIs with trends immediately visible
• ✅Team visibility: Task tracking shows who's working on what
• ✅Better data visualization: Aligned with Test Results page
• ✅Actionable intelligence: Click any element to drill down
• ✅Modern design: Subtle hover effects, smooth transitions
• ✅Optimized for any screen: 4K displays show more content automatically

⚠️ Backend Requirements

🔴 Critical: Missing Timestamps on Tasks & Test Sets

The/api/tasks and/api/test-sets endpoints arenot consistently returningcreated_at andupdated_at timestamps. This causes issues in the Activity Timeline where items without timestamps are sorted to the bottom with a fallback date of2000-01-01.

Workaround implemented (temporary):

• Tasks/test sets without timestamps use fallback date2000-01-01T00:00:00Z
• Console warnings logged for debugging:Task missing timestamp (will be sorted to bottom)
• Items still visible but sorted incorrectly

Required fix (choose one):

1. Option A: Fix existing endpoints

   • Ensure/api/tasks always returnscreated_at andupdated_at
   • Ensure/api/test-sets always returnscreated_at andupdated_at
   • All timestamp fields should be ISO 8601 format

2. Option B: Create dedicated timeline endpoint (recommended)

   • New endpoint:/api/timeline or/api/activity-feed
   • Returns pre-aggregated activity items with guaranteed timestamps
   • Better performance (single call vs 5 parallel calls)
   • Better control over activity types and sorting

🧪 Testing

• TypeScript type-check: ✅ Passing
• All dashboard components render correctly
• Interactive features (click navigation) working
• API queries optimized and functional
• Task tracking in activity feed verified
• Viewport-based dynamic limits working
• Unified loading spinner working

📦 Dependencies

• Uses:@mui/x-charts (already in package.json)
• No breaking changes to existing APIs

🔄 Migration Notes

• Old dashboard grids completely replaced
• No data migration needed
• Backward compatible API calls
• Timeline will work better once backend timestamps are fixed