ACVE/frontend_plan.md

# ACVE Frontend Product Plan (MVP-first, Fully Mapped UX)

## Purpose
Give a complete, navigable frontend experience (even if powered by mock data) that illustrates the full platform: learner flow, teacher flow, auth, course creation, uploads, and admin surfaces. This is intended to be the living blueprint for backend integration.

## Principles
- Every button leads somewhere (even if placeholder).
- Every flow is complete end-to-end, including empty states.
- Mock data must map to real schema terms to reduce backend mismatch.
- Logged-out and logged-in states are always distinct and testable.
- Teacher-only actions are visible only where appropriate, but teacher onboarding should be clear.

## Target Roles
- Visitor (logged out)
- Learner (logged in)
- Teacher (logged in, teacher role)
- Org Admin (future, placeholder-only)
- Super Admin (future, placeholder-only)

## Core Navigation Map
Top nav:
- Home
- Courses
- Case Studies
- Practice
- AI Assistant
- Auth (Login/Sign up or Account menu)

Global flows:
- Auth gating for: course player, practice modules, teacher dashboard.
- Visitor can browse marketing and course detail pages.

## User Journey: Visitor -> Learner
1. Home
   - CTA: “Start Learning” -> /courses
   - CTA: “Explore Courses” -> /courses
2. Courses list
   - Filter by level
   - Course cards show title, summary, instructor, rating, lessons, weeks
   - CTA on card: “View Course” -> /courses/[slug]
3. Course detail
   - Shows course description and “Start Course” button
   - If logged out: CTA “Login to start” -> /auth/login?redirectTo=/courses/[slug]/learn
4. Login / Signup
   - Email/password login
   - “Are you a teacher? Login here” (teacher hint CTA)
5. After login
   - Redirect back to requested page or /courses
6. Course player
   - Lesson list with lock state for non-preview lessons if logged out
   - Progress tracking
   - “Mark complete” updates local progress

## User Journey: Teacher
1. Teacher login entry points
   - Login page: “Are you a teacher? Login here” -> /auth/login?role=teacher (frontend-only)
   - Navbar: “Teacher Dashboard” visible when role=teacher (or local mock toggle)
2. Teacher dashboard
   - List teacher-created courses (mock/localStorage)
   - CTA: “Create Course” -> /teacher/courses/new
3. Create course
   - Title, level, summary, instructor, weeks
   - Creates a local course stub with one intro lesson
   - Redirect to edit course page
4. Edit course
   - Update details
   - List lessons
   - CTA: “Add lesson” -> /teacher/courses/[slug]/lessons/new
5. Add lesson
   - Title, type (video/reading/interactive), duration
   - Video: field for placeholder URL or “Upload video” (mock)
   - Save -> returns to edit page
6. Course publish flow (mock)
   - Add “Status” selector (Draft/Published)
   - Published courses appear in public catalog

## Planned Screens (Additions/Upgrades)
### Auth
- Login page
  - Add teacher CTA
  - Add “Forgot password” placeholder
- Signup page
  - Add “I am a teacher” checkbox (frontend only)
  - Show note: “Teacher accounts are approved by admin” (placeholder)

### Teacher Surfaces
- /teacher
  - Add stats cards (mock)
  - Add “Upload library” link (placeholder)
- /teacher/courses/[slug]/edit
  - Add modules section (placeholder UI)
  - Add reorder UI (drag handles, non-functional)
- /teacher/uploads
  - Upload manager placeholder with file list

### Learner Surfaces
- /courses/[slug]/learn
  - Add sidebar module grouping (placeholder)
  - Add resource downloads section (placeholder)
- /practice/[slug]
  - Add attempt history (mock)

### Org Admin (future placeholder)
- /org
  - Team seats, usage, course assignments (placeholder only)

## Data Strategy (Frontend)
- Current:
  - Course catalog: mockCourses + local teacher courses
  - Practice: mock modules
  - Case studies: mock
  - Progress: localStorage (per userId or guest)
- Future API mapping (for backend):
  - Courses -> Prisma `Course`, `Module`, `Lesson`
  - Teachers -> `Profile` role=TEACHER
  - Uploads -> `Resource` or `Lesson` video URL
  - Progress -> `UserProgress`

## Page-by-Page Spec
### / (Home)
- Hero, highlights, CTA
- Quick links to courses/case studies/practice

### /courses
- Tabs for levels
- Grid of cards
- Badge for status (Draft/Published) for teacher

### /courses/[slug]
- Course overview
- “Start Course” button (auth-gated)

### /courses/[slug]/learn (Protected)
- Lesson list
- Lesson viewer with placeholders
- Progress bar

### /practice
- Modules list

### /practice/[slug] (Protected)
- Quiz flow

### /case-studies
- Case list + active preview

### /case-studies/[slug]
- Full case view

### /assistant
- Full page assistant UI

### /auth/login
- Login form
- CTA: teacher login

### /auth/signup
- Signup form
- Teacher checkbox (placeholder)

### /teacher (Protected)
- Dashboard
- Create course

### /teacher/courses/new (Protected)
- Create course form

### /teacher/courses/[slug]/edit (Protected)
- Edit course
- Lesson list

### /teacher/courses/[slug]/lessons/new (Protected)
- Add lesson

### /teacher/uploads (Protected)
- Placeholder upload UI

### /org (Protected)
- Placeholder org admin dashboard

## UX/Content Notes
- All teacher-only actions should be labeled “Teacher only” if role is not teacher.
- No real upload yet: use “Upload disabled in MVP” messaging.
- Show consistent empty states with CTA.

## Implementation Notes (Frontend)
- Use localStorage for teacher-created courses and uploads.
- Use event emitters to re-render lists when localStorage updates.
- Keep schema-aligned data shapes for easy backend swap.

## Milestones
1. Complete teacher login CTA + role hints
2. Teacher flows: create/edit/lessons + placeholder uploads
3. Course player: modules/resources placeholders
4. Org admin placeholder
5. UI polish & copy pass

## Implementation Checklist (Living)
Status key: TODO | IN PROGRESS | DONE

Auth & Entry Points
- DONE Add teacher CTA on `/auth/login` and `/auth/signup`
- DONE Add “Forgot password” placeholder link
- DONE Add teacher invite-only note on signup
- DONE Add role hint handling (`role=teacher`) for copy changes

Navigation & Role Visibility
- DONE Show “Teacher Dashboard” link when teacher role is detected (allowlist-based)
- DONE Add non-teacher “Teacher only” labels where relevant

Teacher Dashboard & Course Ops
- DONE Add stats cards (mock)
- DONE Add course publish status selector (Draft/Published)
- DONE Ensure published teacher courses appear in public catalog
- DONE Add lesson reordering UI (non-functional)

Teacher Upload Library
- DONE Create `/teacher/uploads` placeholder page
- DONE Add upload list with mock assets
- DONE Add “Attach to lesson” picker placeholder
- DONE Add “Upload disabled in MVP” messaging

Course Player Enhancements
- DONE Add module grouping sidebar (placeholder)
- DONE Add resources/downloads section (placeholder)

Practice Enhancements
- DONE Add attempt history block (mock)

Org Admin Placeholder
- DONE Create `/org` placeholder dashboard (seats, usage, assignments)

UI/Copy Polish
- DONE Empty state consistency pass
- DONE Microcopy alignment with schema terminology

## Progress Log
- 2026-02-10: Implementation checklist added.
- 2026-02-10: Added teacher CTA, invite-only copy, role-aware login copy, and forgot-password placeholder.
- 2026-02-10: Added Supabase config validation fallback so malformed env values do not crash frontend; app continues in placeholder mode.
- 2026-02-10: Added demo auth fallback credentials + cookie session for frontend-only development and allowlist-based teacher navbar visibility.
- 2026-02-10: Added teacher upload library placeholder flow (`/teacher/uploads`) with mock assets, attach picker, and dashboard link/stats.
- 2026-02-10: Added visible "Teacher only" label in navbar for logged-in non-teachers.
- 2026-02-10: Added teacher course status workflow (Draft/Published), public catalog filtering for teacher courses, and lesson reorder placeholder controls.
- 2026-02-10: Added course player module/resource placeholders, mock practice attempt history, and protected org placeholder dashboard.
- 2026-02-10: Completed UX/copy polish pass for status visibility and placeholder consistency.

## Open Questions
Resolved:
- Teacher approval is invite-only.
- Teacher roles are determined by email allowlist.
- Uploads go to a central library (“cloud”) and can be assigned to lessons/courses (reusable assets).