# 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