# Homework System Integration - Implementation Plan

> **For agentic workers:** Use subagent-driven-development or execute tasks manually.

**Goal:** Integrate all backend homework features into the frontend

**Architecture:** Update types, enhance homework page with exercise selection and assignments tracking

---

## File Structure

```
frontend/
├── src/lib/api.ts                    # Add missing types
├── src/app/(dashboard)/homework/page.tsx    # Enhanced with exercises
└── src/app/(dashboard)/homework/assignments/page.tsx  # NEW
```

---

## Task 1: Update Types in api.ts

**Files:**
- Modify: `frontend/src/lib/api.ts`

Add these types:
```typescript
interface IHomeworkExerciseItem {
  id: number
  exercise: number
  exercise_name: string
  reps: number | null
  time_minutes: number | null
  order: number
}

interface IHomework {
  id: number
  title: string
  description: string
  club: number
  club_name: string
  due_date: string
  is_active: boolean
  exercise_items: IHomeworkExerciseItem[]
  exercise_count: number
  created_at: string
  updated_at: string
}

interface IHomeworkAssignment {
  id: number
  homework: number
  homework_title: string
  wrestler: number
  wrestler_name: string
  club: number
  club_name: string
  due_date: string
  notes: string
  is_completed: boolean
  completion_date: string | null
  completed_items: number
  total_items: number
  items: IHomeworkAssignmentItem[]
  created_at: string
}

interface IHomeworkAssignmentItem {
  id: number
  exercise: number
  exercise_name: string
  is_completed: boolean
  completion_date: string | null
}
```

---

## Task 2: Add Exercise Selection to Homework Form

**Files:**
- Modify: `frontend/src/app/(dashboard)/homework/page.tsx`

Enhance the homework form to:
1. Fetch exercises from `/exercises/`
2. Display exercise selection list with reps/time inputs
3. Allow adding/removing exercises from homework
4. Save exercise items via `POST /homework/{id}/exercise-items/`

Changes:
- Add `exercises` state to store available exercises
- Add `selectedExercises` state for currently selected exercises
- Fetch exercises on modal open
- Display exercise chips with reps/time
- Add exercise via `POST /homework/{id}/exercise-items/`

---

## Task 3: Update Homework Display

**Files:**
- Modify: `frontend/src/app/(dashboard)/homework/page.tsx`

Update the homework list to show:
- Exercise count badge
- Visual indicator if has exercises
- Better styling for cards

---

## Task 4: Create Assignments Page

**Files:**
- Create: `frontend/src/app/(dashboard)/homework/assignments/page.tsx`

Features:
- List all homework assignments via `GET /homework/assignments/`
- Show completion progress (e.g., "3/5 exercises")
- Filter by: homework, wrestler, status
- Click to expand and see exercises
- Mark exercises as complete via `POST /homework/assignments/{id}/complete-item/`

---

## Task 5: Build and Test

Run: `cd frontend && npm run build`

Fix any TypeScript errors.

---

## Task 6: Commit

```bash
git add -A
git commit -m "feat(homework): integrate exercises and assignments"
```