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
2026-03-26 13:24:57 +01:00
commit 3fefc550fe
256 changed files with 38295 additions and 0 deletions
@@ -0,0 +1,123 @@
+# Trainings Calendar View - Design Spec
+
+## Overview
+
+Add a calendar month view to the Trainings page as an alternative to the existing grid/list views. Users can toggle between three views: **Grid**, **List**, and **Calendar**.
+
+---
+
+## Design
+
+### View Toggle
+
+Location: Top-right of the page header (already exists as grid/list toggle)
+
+```
+[+ Training hinzufügen]                    [Grid] [List] [Calendar]
+```
+
+Three icon buttons with active state highlighting. Same pattern as existing grid/list toggle.
+
+---
+
+### Calendar Month View
+
+**Library:** `react-big-calendar` with custom styling to match Shadcn design
+
+**Layout:**
+- Full-width month grid
+- Weekdays: Mo Di Mi Do Fr Sa So (German)
+- Month/Year header with `<` `>` navigation arrows
+- "Today" button to jump to current month
+
+**Day Cells:**
+- Show up to 3 training chips per day (colored by group)
+- "+N more" indicator if more trainings exist
+- Today highlighted with accent ring
+- Past days slightly muted
+
+**Training Chips:**
+- Small colored pills showing time + group badge
+- Colors match existing groupConfig:
+  - kids: primary
+  - youth: secondary  
+  - adults: accent
+
+**Click on Day:**
+- Opens a popover/dropdown showing all trainings for that day
+- Each training shows: time, group, location, attendance count
+- Click training to open detail page or edit modal
+
+**Click on Training Chip:**
+- Opens training detail modal directly
+
+---
+
+## Data Loading
+
+- Fetch trainings for the displayed month (with buffer for partial weeks)
+- `date_from` / `date_to` params sent to API to get relevant trainings
+- Cache fetched month data to avoid re-fetching on day navigation within same month
+
+---
+
+## Component Structure
+
+```
+TrainingsPage/
+├── TrainingsContent (main container)
+│   ├── Header with toggle buttons
+│   ├── FilterBar (existing)
+│   ├── ViewContainer
+│   │   ├── GridView (existing)
+│   │   ├── ListView (existing)
+│   │   └── CalendarView (NEW)
+│   │       ├── CalendarHeader (month nav)
+│   │       ├── CalendarGrid
+│   │       └── DayPopover (trainings for selected day)
+│   └── Pagination (shown in grid/list, hidden in calendar)
+```
+
+---
+
+## Technical Approach
+
+**Dependencies:**
+- `react-big-calendar` - Calendar component
+- `date-fns` - Date manipulation (already available via project or to be added)
+
+**Styling:**
+- Custom CSS matching Shadcn theme colors
+- Override default react-big-calendar styles
+
+**State:**
+- `viewMode: "grid" | "list" | "calendar"` (extend existing)
+- `calendarMonth: Date` - currently displayed month
+- `selectedDay: Date | null` - for day popover
+
+**API:**
+- Keep existing `/trainings/?date_from=X&date_to=Y` to fetch trainings
+- Calculate date range from calendar month view
+
+---
+
+## Interactions
+
+| Action | Result |
+|--------|--------|
+| Click calendar icon in toggle | Switch to calendar view |
+| Click `<` / `>` arrows | Navigate months |
+| Click "Today" | Jump to current month |
+| Click on day cell | Show popover with day's trainings |
+| Click on training chip | Open training detail modal |
+| Switch away from calendar | Preserve last viewed month |
+| Create/edit training | Refresh calendar data |
+
+---
+
+## Polish
+
+- Smooth transitions when switching views
+- Loading skeleton for calendar while fetching
+- Empty state for days with no trainings
+- Responsive: on mobile, calendar shows in portrait mode with smaller cells