# 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:**
```json
{
  "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