feat: implement automatic course completion tracking with dashboard i… #851
Conversation
…ntegration Progress API Auto-Completion: - Extended /api/lms/progress to automatically calculate course completion - Count total lessons and completed lessons per course - Calculate progress percentage on each lesson completion - Auto-update enrollment progress field (0-100%) - Automatically mark enrollment as COMPLETED when progress reaches 100% - Set completedAt timestamp when course is finished - Return course progress data in API response Dashboard Real-Time Stats: - Fetch actual enrollment data on page load - Calculate real stats: enrolled courses, completed courses, total hours - Compute average progress across all enrollments - Replace hardcoded stats with dynamic calculations Dashboard Course Display: - Show all enrolled courses with real progress data - Dynamic progress bars reflecting actual completion percentages - Completion badges (Active vs Completed) based on enrollment status - Display completion date for finished courses - Conditional CTAs: "Continue Learning" for active, "View Course" for completed - Empty state when no enrollments exist - Enroll in More Courses CTA Student Benefits: - Automatic course completion without manual intervention - Real-time progress updates as lessons are completed - Accurate dashboard stats reflecting actual progress - Clear visual indicators of completion status - Foundation for certificates and achievements - Course completion history with dates
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR implements automatic course completion tracking with dashboard integration, enabling real-time progress monitoring without manual intervention. The system automatically calculates course completion percentages based on lesson progress and updates enrollment status accordingly.
Key Changes:
- Progress API now auto-calculates course completion by counting completed lessons versus total lessons, automatically updating enrollment status to COMPLETED at 100% and setting completion timestamps
- Dashboard displays dynamic statistics (enrolled courses, completed courses, total hours, average progress) calculated from actual enrollment data
- Course cards show real-time progress bars, completion badges, and conditional CTAs based on enrollment status
Reviewed changes
Copilot reviewed 2 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/pages/dashboard.tsx | Fetches and displays real enrollment data with dynamic stats, progress bars, completion badges, and conditional CTAs |
| src/pages/api/lms/progress/index.ts | Auto-calculates course progress on lesson completion and updates enrollment status/timestamp when reaching 100% |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| progress: progressPercentage, | ||
| lastActivity: new Date(), | ||
| status: isComplete ? 'COMPLETED' : 'ACTIVE', | ||
| completedAt: isComplete ? new Date() : null, |
There was a problem hiding this comment.
Setting completedAt to null when a course is not complete will overwrite any existing completion date if a user uncompletes a lesson after finishing a course. Consider only setting completedAt when isComplete is true, without explicitly setting it to null.
| completedAt: isComplete ? new Date() : null, | |
| ...(isComplete && { completedAt: new Date() }), |
| // Calculate stats from enrollments | ||
| const stats = { | ||
| enrolled: enrollments.filter((e) => e.status === "ACTIVE" || e.status === "COMPLETED").length, |
There was a problem hiding this comment.
The filter condition e.status === \"ACTIVE\" || e.status === \"COMPLETED\" is duplicated multiple times (lines 62, 158, 161, 262). Consider extracting this into a helper function or constant to reduce duplication and improve maintainability.
| // Calculate stats from enrollments | |
| const stats = { | |
| enrolled: enrollments.filter((e) => e.status === "ACTIVE" || e.status === "COMPLETED").length, | |
| const isActiveOrCompleted = (e: Enrollment) => | |
| e.status === "ACTIVE" || e.status === "COMPLETED"; | |
| // Calculate stats from enrollments | |
| const stats = { | |
| enrolled: enrollments.filter(isActiveOrCompleted).length, |
|
🔍 Code Quality Score Breakdown:
💡 Recommendations:
|
…ntegration
Progress API Auto-Completion:
Dashboard Real-Time Stats:
Dashboard Course Display:
Student Benefits: