advance

frontend_plan.md

@@ -0,0 +1,252 @@
+# 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).