Mini Dashboard: UI component and CompTeams integration

[tfield]

Mini Dashboard UI

Parent: #76
Split from: #105
Depends on: #191 (data layer must be merged first)

Overview

Build the MiniDashboard component and integrate it into the team selection screen (CompTeams.tsx). The data layer (#191) provides the IndexedDB store and sync — this ticket reads from it and renders the UI.

Requirements

New component: MiniDashboard

• File: RavenEye/app/common/track/MiniDashboard.tsx
• Props: { teamData: DashboardTeamData | undefined }
• Renders inside each team button (the button becomes larger to accommodate the dashboard).

Dot design:

• Each metric is rendered as a small colored dot in a fixed position (1st dot = 1st metric, 2nd dot = 2nd metric, etc.).
• Position of the dot indicates which metric it represents.
• Color + number inside the dot indicates the quartile:
  • Green with "1" = top (top quartile)
  • Yellow with "2" = upperMiddle
  • Orange with "3" = lowerMiddle
  • Red with "4" = bottom
  • Grey with no number = noData
• This design is color-blind accessible because both color and number convey the quartile.

Legend:

• A legend at the top of the CompTeams page maps each dot position to its metric label.
• Display the metric code as the default label. Students may override with a more readable label during implementation.
• The legend uses the same dot styling as the team buttons for visual consistency.

Matches tracked:

• Show the matchesTracked count (e.g., "3m" or "3 matches") inside the button.
• If matchesTracked is 0, display a "No data" indicator instead of dots.

Update CompTeams.tsx

• Load mini-dashboard data for the current tournament from IndexedDB on mount.
• Pass the relevant DashboardTeamData to a MiniDashboard instance inside each of the 6 team buttons.
• Also render a button with MiniDashboard for the owner team (team number comes from the ownerTeam field in the DashboardData response). If the owner team is already one of the 6 match teams, do not show it twice.
• The team buttons remain clickable to select a robot. The mini-dashboard is informational only.
• If mini-dashboard data has not been synced yet (IndexedDB store is empty), the component should gracefully show nothing — just the team number as before. It must not block the team selection flow.

Key files to modify

• New file: RavenEye/app/common/track/MiniDashboard.tsx
• RavenEye/app/common/track/CompTeams.tsx — integrate MiniDashboard component, add legend
• RavenEye/app/assets/css/components.css (or new CSS file) — mini-dashboard and dot styles

Key files to reference

• RavenEye/app/common/track/CompTeams.tsx — current team selection UI (lines 1-71)
• RavenEye/app/common/storage/db.ts — repository methods for reading from IndexedDB (added in Mini Dashboard: data layer (db, sync, API) #191)
• RavenEye/app/assets/css/colors.css — alliance button styles (lines 77-127)
• RavenEye/app/types/ — TypeScript types for dashboard data (added in Mini Dashboard: data layer (db, sync, API) #191)

Design constraints

• iPhone 5 compatible: the select-robot screen with mini-dashboards must work on a 320px-wide screen.
• Offline-first: mini-dashboard data is read from IndexedDB only. If the store is empty, degrade gracefully (show buttons without dashboard data).
• Student-readable: no abstractions beyond what exists. Prop drill the data. Vanilla CSS.
• Color-blind accessible: quartile is conveyed by both color and number inside the dot.

Acceptance criteria

• MiniDashboard component renders colored dots with quartile numbers inside each team button
• Dot position corresponds to metric, dot color+number corresponds to quartile
• Green/1 = top, Yellow/2 = upperMiddle, Orange/3 = lowerMiddle, Red/4 = bottom, Grey/blank = noData
• Legend at top of CompTeams page maps dot positions to metric labels
• Matches tracked count is shown per team
• Owner team's mini-dashboard appears on the team selection screen (unless it's already one of the 6 match teams)
• Teams with 0 matches tracked show a "No data" indicator instead of dots
• CompTeams screen remains functional when mini-dashboard data is not yet synced (graceful degradation)
• Layout works on iPhone 5 (320px width) without horizontal scrolling
• Team buttons remain clickable and navigate to area-menu as before
• npm run typecheck passes with no errors