Story 1.3: Admin Courses List Page

Epic: Epic 1 - Course Builder & Management Story ID: STORY-1.3 Date Created: 2025-10-19 Date Activated: 2025-10-19 Status: Active - Ready for Implementation Priority: High (Critical for navigation) Story Type: Feature Epic Document: documentation/reference/epics/epic-1-course-builder-management.md

Implementation Order: After Story 1.4a testing completes

Problem Statement

Currently, instructors have no way to navigate to their courses within the application. The InstructorLayout navigation has a "My Courses" link pointing to /admin/courses, but this page doesn't exist. This forces users to:

Manually type course builder URLs
Bookmark specific course pages
Have no overview of all their courses

User Story

As an instructor or admin I want to see a list of all my courses So that I can easily navigate to the course builder for any course I teach

Acceptance Criteria

Must Have

Page accessible at /admin/courses
Shows list of all courses for the current instructor
For admins, show all courses in their tenant
Each course card displays:
- Course title
- Course description (truncated)
- Status badge (draft, published, archived)
- Last updated date
- Number of enrolled learners
Clicking a course card navigates to the course builder
"Create New Course" button at the top
Empty state when no courses exist
Loading state while fetching courses
Error state if fetch fails

Should Have

Filter courses by status (all, draft, published, archived)
Search courses by title
Sort courses (by name, date created, date updated)
Responsive grid layout (1 column mobile, 2-3 columns desktop)
Course thumbnail/cover image
Quick actions menu (edit, duplicate, archive, delete)

Could Have

Bulk actions (archive multiple, delete multiple)
Course statistics preview (completion rate, avg progress)
Recent activity feed
Export course list to CSV

Technical Design

Route Structure

/admin/courses - Course list page
/admin/courses/new - Create new course (already exists?)
/course-builder/[courseId] - Course builder (already exists ✓)

Components Needed

CourseListPage - Main page component
CourseCard - Individual course card with metadata
CourseFilters - Filter and sort controls
CreateCourseButton - CTA button
EmptyCoursesState - Empty state component

API Endpoints

GET /api/courses - Fetch courses for current user/tenant
  Query params:
    - status?: 'draft' | 'published' | 'archived'
    - search?: string
    - sort?: 'title' | 'created_at' | 'updated_at'
    - order?: 'asc' | 'desc'

  Response:
    - courses: Course[]
    - total: number

Data Requirements

Need to join with enrollments table to get learner count
Need to check user role (instructor vs admin) for filtering
Instructors see only their courses (instructor_id = user.id)
Admins see all courses in their tenant

Permissions

Instructors: Can view courses where instructor_id = user.id
Admins: Can view all courses in their tenant
Super Admins: Can view all courses across tenants

UI/UX Considerations

Layout

┌─────────────────────────────────────────┐
│ My Courses              [Create Course] │
├─────────────────────────────────────────┤
│ [Filters: All | Draft | Published]      │
│ [Search: ________________] [Sort: ▼]    │
├─────────────────────────────────────────┤
│ ┌─────────┐ ┌─────────┐ ┌─────────┐   │
│ │ Course  │ │ Course  │ │ Course  │   │
│ │  Card   │ │  Card   │ │  Card   │   │
│ └─────────┘ └─────────┘ └─────────┘   │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐   │
│ │ Course  │ │ Course  │ │ Course  │   │
│ │  Card   │ │  Card   │ │  Card   │   │
│ └─────────┘ └─────────┘ └─────────┘   │
└─────────────────────────────────────────┘

Course Card Design

┌───────────────────────────┐
│ [Cover Image]             │
│ Course Title              │
│ Brief description...      │
│                           │
│ [Draft] • 12 learners     │
│ Updated 2 days ago        │
│                           │
│ [Edit] [View] [•••]       │
└───────────────────────────┘

Dependencies

Required Before Starting

✅ Course builder page exists
✅ Courses API endpoint exists
✅ InstructorLayout exists
✅ User authentication working

Blocks Other Work

Story 1.5: Course Publishing Workflow (needs this page to publish courses)
Story 2.1: Learner Course Browsing (similar UI patterns)

Implementation Notes

Phase 1: MVP (2-4 hours)

Create basic page at /admin/courses
Fetch and display courses in simple list
Link to course builder
Add "Create Course" button
Handle loading and error states

Phase 2: Enhanced Features (2-3 hours)

Add course cards with metadata
Implement filters and search
Add sort functionality
Create responsive grid layout

Phase 3: Polish (1-2 hours)

Add course thumbnails
Implement quick actions menu
Add animations and transitions
Optimize performance

Testing Requirements

Unit Tests

Course list fetches correct courses based on user role
Filters work correctly
Search filters courses by title
Sort changes course order

Integration Tests

Instructor sees only their courses
Admin sees all tenant courses
Creating new course redirects to course builder
Clicking course navigates to builder

E2E Tests

Complete flow: Login → My Courses → Click Course → Course Builder
Create new course flow
Filter and search interactions

Discovery During Testing

Found during Story 1.4a testing session (2025-10-19):

User tried to click "My Courses" in navigation
Expected to see list of their courses
Instead got redirected to dashboard
Had to manually navigate to course builder URL
This blocked intuitive navigation flow

Estimated Effort

MVP: 3-4 hours
Full Implementation: 6-8 hours
Testing: 2-3 hours
Total: 8-11 hours

Success Metrics

Instructors can find and navigate to their courses in < 5 seconds
Zero manual URL entry required
100% of instructors use this page as entry point to course builder
Zero navigation-related support tickets

Next Steps:

Review and approve this story
Add to sprint backlog
Assign to developer
Create feature branch: feature/admin-courses-list
Implement MVP first
Get user feedback
Iterate on enhanced features