Andrej Spielmann
3fefc550fe
- Django backend with DRF (clubs, wrestlers, trainers, exercises, templates, trainings, homework, locations, leistungstest) - Next.js 16 frontend with React, Shadcn UI, Tailwind - JWT authentication - Full CRUD for all entities - Calendar view for trainings - Homework management system - Leistungstest tracking
157 lines
7.3 KiB
Markdown
157 lines
7.3 KiB
Markdown
# 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
|