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
127 lines
4.6 KiB
Markdown
127 lines
4.6 KiB
Markdown
# WrestleDesk UI Improvements - Implementation Plan
|
|
|
|
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
|
|
|
**Goal:** Fix 3 issues: (1) Better homework page cards, (2) Wrestlers pagination bug, (3) Training homework icon color + Sheet conversion
|
|
|
|
**Architecture:** Frontend-only changes (React/Next.js with TypeScript, Tailwind, Shadcn UI)
|
|
|
|
**Tech Stack:** Next.js 16, React, TypeScript, Tailwind CSS, Shadcn UI (Sheet, Card, Badge, Avatar)
|
|
|
|
---
|
|
|
|
## Files Overview
|
|
|
|
| File | Purpose |
|
|
|------|---------|
|
|
| `frontend/src/app/(dashboard)/homework/page.tsx` | Homework page - improve card layout |
|
|
| `frontend/src/app/(dashboard)/wrestlers/page.tsx` | Wrestlers page - fix pagination |
|
|
| `frontend/src/app/(dashboard)/trainings/[id]/page.tsx` | Training detail - fix icon color + Sheet |
|
|
| `frontend/src/lib/api.ts` | API types - verify ITrainingHomeworkAssignment |
|
|
|
|
---
|
|
|
|
## Task 1: Improve Homework Page Card Layout
|
|
|
|
**Files:**
|
|
- Modify: `frontend/src/app/(dashboard)/homework/page.tsx:169-246`
|
|
|
|
**Changes:**
|
|
- Replace grouped card layout with individual wrestler cards
|
|
- Each card shows: Avatar, Wrestler Name, Training Date, Group Badge, Exercise List with reps/time, Status Badge, expandable Notes
|
|
- Grid layout: 2-3 columns on desktop, 1 on mobile
|
|
- Exercise list shows category color coding
|
|
|
|
**Steps:**
|
|
|
|
- [ ] **Step 1: Add Sheet component to imports (if not already available)**
|
|
Check if Sheet is imported. If not, run:
|
|
```bash
|
|
cd frontend && npx shadcn@latest add sheet
|
|
```
|
|
|
|
- [ ] **Step 2: Modify the card rendering loop (lines 169-246)**
|
|
Replace current grouped cards with individual wrestler cards in a grid
|
|
|
|
- [ ] **Step 3: Test the new layout**
|
|
Navigate to /homework and verify cards display correctly
|
|
|
|
---
|
|
|
|
## Task 2: Fix Wrestlers Pagination Bug
|
|
|
|
**Files:**
|
|
- Modify: `frontend/src/app/(dashboard)/wrestlers/page.tsx:103-126`
|
|
- Debug: Backend `backend/wrestlers/views.py`
|
|
|
|
**Changes:**
|
|
- Verify API returns correct `count` and `results` in PaginatedResponse
|
|
- Debug why only 11 wrestlers total are returned instead of actual count
|
|
- Possibly fix backend query or frontend display logic
|
|
|
|
**Steps:**
|
|
|
|
- [ ] **Step 1: Test API directly**
|
|
Run: `curl -H "Authorization: Bearer <token>" "http://localhost:8000/api/v1/wrestlers/?page=1&page_size=10"`
|
|
Check response for `count` field and actual number of results
|
|
|
|
- [ ] **Step 2: Check backend pagination class**
|
|
Read `backend/wrestleDesk/pagination.py` to verify StandardResultsSetPagination
|
|
|
|
- [ ] **Step 3: Verify frontend handles response correctly**
|
|
Check `frontend/src/lib/api.ts` PaginatedResponse interface matches API response
|
|
|
|
- [ ] **Step 4: Fix identified issue**
|
|
- If backend: fix query or pagination
|
|
- If frontend: fix state update or display logic
|
|
|
|
- [ ] **Step 5: Test pagination**
|
|
Navigate to /wrestlers, verify page 1 shows 10 items, page 2 shows correct items
|
|
|
|
---
|
|
|
|
## Task 3: Training Homework - Icon Color + Sheet
|
|
|
|
**Files:**
|
|
- Modify: `frontend/src/app/(dashboard)/trainings/[id]/page.tsx:336-395` (participant icons)
|
|
- Modify: `frontend/src/app/(dashboard)/trainings/[id]/page.tsx:561-672` (Modal → Sheet)
|
|
|
|
**Changes:**
|
|
- BookOpen icon color: green if wrestler has homework assignment, gray/muted if not
|
|
- Convert homework Modal to Sheet component
|
|
- In Sheet, show wrestlers with existing HA marked green
|
|
|
|
**Steps:**
|
|
|
|
- [ ] **Step 1: Add Sheet component to imports (if not already available)**
|
|
Check if Sheet is imported. If not, run:
|
|
```bash
|
|
cd frontend && npx shadcn@latest add sheet
|
|
```
|
|
|
|
- [ ] **Step 2: Modify participant icon colors (lines 336-395)**
|
|
Add conditional styling to BookOpen icon:
|
|
- Green/primary color if `wrestlerAssignments.length > 0`
|
|
- Muted/gray color if no assignments
|
|
|
|
- [ ] **Step 3: Convert homework Modal to Sheet (lines 561-672)**
|
|
Replace `<Modal>` with `<Sheet>` component
|
|
Keep the same form content inside
|
|
|
|
- [ ] **Step 4: Add green highlight for wrestlers with HA in Sheet**
|
|
When opening homework sheet, show wrestlers that already have assignments highlighted
|
|
|
|
- [ ] **Step 5: Test the changes**
|
|
Navigate to /trainings/[id], verify icon colors and Sheet functionality
|
|
|
|
---
|
|
|
|
## Verification Checklist
|
|
|
|
After all tasks:
|
|
- [ ] Homework page shows cards with all details (Avatar, Name, Training, Exercises, Status, Notes)
|
|
- [ ] Wrestlers pagination works: page 1 = 10 items, page 2 = next 10 items
|
|
- [ ] Training detail: BookOpen icon is green for wrestlers with HA, gray for those without
|
|
- [ ] Training detail: Homework assignment opens as Sheet, not Modal
|
|
- [ ] No console errors on any of the affected pages
|