WrestleDesk/docs/superpowers/specs/2026-03-23-dashboard-statistics-design.md

Dashboard Statistics Design

Date: 2026-03-23

Status: Approved

Overview

Expand the Dashboard with comprehensive statistics displayed in a Bento Grid layout. Replace the current simple count cards with rich stat cards and add new visualization cards for attendance, homework completion, wrestler distribution, and trainer activity.

Design

Layout Structure

┌─────────────────────────────────────────────────────────────────┐
│  Dashboard                              Willkommen, [User]      │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  [Stat Cards Row - 4 cards]                                    │
│  ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐                   │
│  │ Ringer │ │Trainer │ │Training│ │Hausauf.│                   │
│  │  127   │ │  12    │ │  45    │ │  23    │                   │
│  │+5/woche│ │Aktiv:10│ │diese: 8│ │offen   │                   │
│  └────────┘ └────────┘ └────────┘ └────────┘                   │
│                                                                 │
│  [Middle Row - 2 cards]                                        │
│  ┌─────────────────────────┐ ┌─────────────────────────┐       │
│  │ Teilnahme diese Woche   │ │ Training Aktivität      │       │
│  │ ● Kinder ████████░░ 85% │ │ ▁▂▃▅▇██▇▅▃▂▁▂▃▅▇       │       │
│  │ ● Jugend ██████░░░░ 62% │ │ Letzte 14 Tage         │       │
│  │ ● Erwachs.████████ 100% │ └─────────────────────────┘       │
│  │ Ø: 24/30                                                 │       │
│  └─────────────────────────┘                                   │
│                                                                 │
│  [Full Width Card]                                              │
│  ┌─────────────────────────────────────────────────────────────┐│
│  │ ✅ Hausaufgaben Erledigung                                  ││
│  │ ████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  38%   ││
│  └─────────────────────────────────────────────────────────────┘│
│                                                                 │
│  [Bottom Row - 2 cards]                                        │
│  ┌─────────────────────────┐ ┌─────────────────────────┐       │
│  │ Ringer nach Gruppe       │ │ Top Trainer              │       │
│  │ ●Kinder    ████████  45│ │ 1. Max M.       12      │       │
│  │ ●Jugend    ██████░░  35│ │ 2. Anna S.      10      │       │
│  │ ●Erwachs.  █████░░░  25│ │ 3. Tom K.        9      │       │
│  │ ●Inaktiv   ███░░░░░  22│ │                         │       │
│  └─────────────────────────┘ └─────────────────────────┘       │
└─────────────────────────────────────────────────────────────────┘

Components

1. Stat Card (existing, enhanced)

• Icon + Label (top-left)
• Main number (large, bold)
• Sub-info (small, muted)
• Hover: subtle lift effect

2. Attendance Card

• Title: "Teilnahme diese Woche"
• 3 rows (Kids, Youth, Adults) with progress bars
• Progress bar: colored background with filled portion
• Percentage and absolute numbers (e.g., "24/30")
• Average attendance line at bottom

3. Training Activity Card

• Title: "Training Aktivität"
• Simple bar chart visualization using divs
• 14 bars representing last 14 days
• Bar height proportional to attendance
• Label: "Letzte 14 Tage"

4. Homework Completion Card (full width)

• Title: "Hausaufgaben Erledigung"
• Single horizontal progress bar
• Green fill for completed, gray for open
• Percentage and absolute numbers on right
• Trend indicator: "+5 diese Woche"

5. Wrestlers by Group Card

• Title: "Ringer nach Gruppe"
• 4 rows with progress bars
• Groups: Kinder, Jugend, Erwachsene, Inaktiv
• Each row: colored dot, label, progress bar, count

6. Top Trainers Card

• Title: "Top Trainer"
• List of 3-5 trainers with:
  • Rank number
  • Trainer name
  • Training count
• Simple list, no avatars needed

Data Requirements

Backend API Endpoints needed:

• GET /api/v1/stats/dashboard/ - Returns all dashboard statistics

Response shape:

{
  "wrestlers": { "total": 127, "this_week": 5 },
  "trainers": { "total": 12, "active": 10 },
  "trainings": { "total": 45, "this_week": 8 },
  "homework": { "open": 23, "completed": 38 },
  "attendance": {
    "this_week": {
      "kids": { "attended": 17, "total": 20, "percent": 85 },
      "youth": { "attended": 12, "total": 20, "percent": 62 },
      "adults": { "attended": 20, "total": 20, "percent": 100 }
    },
    "average": 24,
    "expected": 30
  },
  "activity": [
    { "date": "2026-03-09", "count": 18 },
    { "date": "2026-03-10", "count": 22 },
    ...
  ],
  "wrestlers_by_group": {
    "kids": 45,
    "youth": 35,
    "adults": 25,
    "inactive": 22
  },
  "top_trainers": [
    { "name": "Max M.", "training_count": 12 },
    { "name": "Anna S.", "training_count": 10 },
    { "name": "Tom K.", "training_count": 9 }
  ]
}

Implementation Steps

1. Backend: Create stats endpoint with all aggregations
2. Frontend: Update dashboard page with new stat cards
3. Frontend: Add new visualization cards
4. Styling: Match existing color scheme (primary, secondary, accent)

Color Scheme

• Primary: #1B1A55 (navy) - for main elements
• Secondary: #535C91 (blue) - for secondary elements
• Accent: #9290C3 (lavender) - for highlights
• Kids: Blue
• Youth: Purple
• Adults: Orange
• Success/Completed: Green (#22c55e)
• Inactive: Gray

Notes

• All statistics should load asynchronously
• Show skeleton loaders during loading
• Error handling: show "Fehler beim Laden" message if API fails