Initial commit: WrestleDesk full project
- 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
This commit is contained in:
Andrej Spielmann
@@ -0,0 +1,156 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user