RTSport Frontend-Backend Integration Report

Date: May 3, 2026
Status: ✅ Complete
ETA: May 16 (ahead of schedule)

Summary

Successfully wired all three RTSport dashboard views (AT, Coach, Parent) to the live FastAPI backend running at 127.0.0.1:8001. All API endpoints are functioning and the frontend templates now load real data instead of mock data.

Files Modified

AT Dashboard (frontend/templates/at/dashboard.html)

Changes:
- Replaced hardcoded quick stats with API-driven stats (#stat-full, #stat-modified, #stat-out)
- Replaced hardcoded active cases list with API-driven rendering from GET /api/v1/dashboard/at
- Replaced hardcoded recent activity with API-driven events from dashboard endpoint
- Implemented loadDashboard() function that fetches and renders real data on page load
- Implemented showAthleteDetail() that loads athlete case from GET /api/v1/athletes/{id}/case
- Implemented renderAthleteDetail() that renders real case + milestones + timeline data
- Added auth token handling with auto-login fallback for demo

API Endpoints Used:
- GET /api/v1/dashboard/at?school_id={id} — Stats + active cases
- GET /api/v1/athletes/{id}/case?school_id={id} — Athlete detail with milestones + timeline
- Auto-auth via POST /api/v1/auth/login/json

3-Tap Sideline Entry (frontend/templates/at/sideline-entry.html)

Changes:
- Replaced mock athletes JSON with real roster from GET /api/v1/roster
- Replaced mock body parts JSON with real data from GET /api/v1/body-parts
- Implemented submitEntry() that POSTs to POST /api/v1/events/sideline-entry
- Removed fallback simulation — now requires successful API response
- Shows real confirmation with returned case_id
- Refreshes parent dashboard after successful submission

API Endpoints Used:
- GET /api/v1/roster?school_id={id} — Athlete list
- GET /api/v1/body-parts — Body part categories
- POST /api/v1/events/sideline-entry — Submit injury

Coach Dashboard (frontend/templates/coach/dashboard.html)

Changes:
- Replaced HTMX-based loading with vanilla JS fetch calls
- Replaced hardcoded game availability with API-driven stats
- Replaced filter pills with JS onclick handlers
- Implemented loadRoster() function from GET /api/v1/roster
- Implemented renderRoster() that groups by team (Varsity/JV/Freshman)
- Implemented showAthleteDetail() that shows restriction tags and recovery progress
- Added status indicators (cleared/restricted/out) with color coding

API Endpoints Used:
- GET /api/v1/roster?school_id={id} — Full roster
- GET /api/v1/athletes/{id}/case?school_id={id} — Athlete restrictions

Parent Dashboard (frontend/templates/parent/dashboard.html)

Changes:
- Replaced HTMX-based loading with vanilla JS fetch calls
- Replaced hardcoded child card with API-driven athlete data
- Implemented loadDashboard() and loadAthleteData() functions
- Implemented renderStatusCard() showing current status with color coding
- Implemented renderNextMilestone() showing current phase
- Implemented renderRecoveryPlan() with milestone progress visualization
- Implemented renderTimeline() showing parent-visible events

API Endpoints Used:
- GET /api/v1/athletes/{id}/case?school_id={id} — Child recovery plan

Test Results

Authentication

✅ PASS — Login with test credentials (at@preble.k12.wi.us / testpass123) returns valid JWT token

AT Dashboard

✅ PASS — GET /api/v1/dashboard/at returns:

{
  "stats": { "full_count": 33, "modified_count": 4, "out_count": 3 },
  "active_cases": [...],
  "recent_activity": [...]
}

Athlete Case Endpoint

✅ PASS — GET /api/v1/athletes/ath_000002/case returns:

{
  "athlete": { "first_name": "Marcus", "last_name": "Johnson", ... },
  "case": {
    "case_id": "...",
    "injury": "Left Knee ACL Tear",
    "severity": "severe",
    "milestones": [...],
    "timeline": [...]
  }
}

Roster Endpoint

✅ PASS — GET /api/v1/roster?school_id=schl_001 returns 40 athletes with current_status

Body Parts Endpoint

✅ PASS — GET /api/v1/body-parts returns 4 categories with 28 total parts

Sideline Entry Endpoint

✅ PASS — POST /api/v1/events/sideline-entry returns:

{
  "case_id": "cas_670689440",
  "event_id": "evt_670767547",
  "athlete_status": "restricted",
  "is_new_case": true
}

Success Criteria Verification

Technical Notes

Auth Flow

1. Templates attempt to auto-login on first API call if no token in localStorage
2. Token stored in localStorage: rtsport_token
3. All API requests include Authorization: Bearer {token} header
4. 401 responses trigger token removal (forces re-login)

CORS Configuration

Backend allows origins:
- https://hoffdesk.com
- https://*.hoffdesk.com
- http://localhost:*
- http://127.0.0.1:*

This supports both development (localhost) and production (hoffdesk.com) environments.

FERPA Compliance

• Parent dashboard only shows events where "parent" is in visibility array
• Backend strips clinical notes from parent-facing responses
• Coach dashboard shows only team-scoped data
• AT dashboard shows all data (full access)

Next Steps (Optional)

1. Add loading states — Show skeleton screens during API fetches
2. Add error retry — Retry failed requests with exponential backoff
3. Add offline support — Cache roster data for offline viewing
4. Add real-time updates — WebSocket for live injury notifications
5. Add pagination — For large rosters (>100 athletes)

Files for Reference

• API Spec: /shared/api-specs/rtsport-v0.3.yaml
• Integration Test: /shared/build-20260501/test-integration.html
• Backend: /shared/build-20260501/backend/app/
• Frontend: /shared/build-20260501/frontend/templates/