WrestleDesk/docs/superpowers/plans/2026-03-23-homework-training-improvements.md

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:

  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:

  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