Add CourseProgressTracker component for learning progress

[ashvin2005]

📋 Description

This PR adds a comprehensive CourseProgressTracker component that provides learners with a visual dashboard to track their progress across all enrolled courses, view statistics, and manage their learning journey effectively.

✨ Features Added

📊 Statistics Dashboard

Four key metric cards displaying:

• 📚 Total Courses: Count of all enrolled courses
• 📈 In Progress: Number of active courses
• ✅ Completed: Number of finished courses
• 🏆 Overall Progress: Percentage of total completion

📈 Individual Course Tracking

Each course card shows:

• Course title and category
• Visual progress bar (color-coded)
• Completed lessons vs total lessons
• Percentage completion
• Estimated time remaining
• Completion award badge (for 100% courses)

🔍 Filtering & Sorting

• Category Filter: Filter courses by subject category
• Sort Options:
  • By Progress (completion percentage)
  • By Recent (most recently accessed)
• Dynamic filtering updates the course list instantly

🎨 Visual Design

• Color-Coded Progress:
  • Green (100%): Completed courses
  • Blue (50-99%): Good progress
  • Orange (1-49%): Getting started
  • Gray (0%): Not started
• Dark Mode Support: Full light/dark theme compatibility
• Responsive Layout: Works on mobile, tablet, and desktop
• Interactive Cards: Clickable course cards for navigation

🎯 Benefits

• Motivation: Visual progress encourages course completion
• Organization: Easy to see which courses need attention
• Quick Access: Resume learning with one click
• Goal Tracking: Monitor overall learning achievements
• Better Planning: See time estimates and prioritize courses

📝 Files Added

• src/components/CourseProgressTracker.tsx - Main component (TypeScript)
• src/components/README-CourseProgressTracker.md - Complete documentation

🧪 Usage Example

import CourseProgressTracker from '@/components/CourseProgressTracker';

function LearnerDashboard() {
  const courses = [
    {
      id: '1',
      title: 'Introduction to React',
      totalLessons: 20,
      completedLessons: 15,
      category: 'Web Development',
      estimatedTime: 150
    },
    {
      id: '2',
      title: 'Python Basics',
      totalLessons: 30,
      completedLessons: 30,
      category: 'Programming',
      estimatedTime: 0
    }
  ];

  return (
    <CourseProgressTracker
      courses={courses}
      onCourseClick={(courseId) => {
        // Navigate to course player
        router.push(`/course/${courseId}`);
      }}
    />
  );
}

📸 Visual Preview

┌─────────────────────────────────────────────┐
│ My Learning Progress                        │
│ Track your courses and continue learning    │
├─────────────────────────────────────────────┤
│ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐        │
│ │📚 10 │ │📈 5  │ │✅ 3  │ │🏆75%│        │
│ │Total │ │Prog. │ │Done  │ │Prog.│        │
│ └──────┘ └──────┘ └──────┘ └──────┘        │
├─────────────────────────────────────────────┤
│ Sort: [Progress ▼] Category: [All ▼]       │
├─────────────────────────────────────────────┤
│ ┌─────────────────────────────────────────┐ │
│ │ 📚 Introduction to React        🏆     │ │
│ │ [Web Development]                       │ │
│ │ 15 of 20 lessons               75%     │ │
│ │ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░            │ │
│ │ ⏱️ 150 minutes remaining                │ │
│ └─────────────────────────────────────────┘ │
│                                             │
│ ┌─────────────────────────────────────────┐ │
│ │ 📚 Python Basics                🏆     │ │
│ │ [Programming]                           │ │
│ │ 30 of 30 lessons              100%     │ │
│ │ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓            │ │
│ │ ⏱️ 0 minutes remaining                  │ │
│ └─────────────────────────────────────────┘ │
└─────────────────────────────────────────────┘

🛠️ Technical Details

Component Interface

interface CourseProgressTrackerProps {
  courses: Course[];                        // Array of enrolled courses
  onCourseClick?: (courseId: string) => void; // Navigation callback
}

interface Course {
  id: string;                 // Unique identifier
  title: string;              // Course name
  totalLessons: number;       // Total lessons in course
  completedLessons: number;   // Lessons completed by user
  category: string;           // Course category/subject
  thumbnailUrl?: string;      // Optional thumbnail
  estimatedTime?: number;     // Time remaining (minutes)
}

Features

• ✅ TypeScript with full type safety
• ✅ React hooks (useState for filters)
• ✅ Tailwind CSS styling
• ✅ Dark mode compatible
• ✅ Responsive design (mobile-first)
• ✅ Accessible color contrasts
• ✅ Performance optimized
• ✅ No external API dependencies

Statistics Calculation

// Automatically calculates:
- Total courses enrolled
- Courses in progress (0 < progress < 100%)
- Completed courses (100% progress)
- Overall progress (total completed / total lessons)

Progress Color Logic

• 100%: Green (bg-green-500) - Completed
• 50-99%: Blue (bg-blue-500) - Good progress
• 1-49%: Orange (bg-orange-500) - Started
• 0%: Gray (bg-gray-300) - Not started

🎨 Design Specifications

Color Palette

• Blue: Stats cards, in-progress indicator
• Orange: In-progress courses
• Green: Completed courses and badges
• Purple: Overall progress metric
• Gray: Default/neutral states

Responsive Breakpoints

• Mobile: Single column layout
• Tablet (md): 2-column stat cards, wider course cards
• Desktop (lg): 4-column stat cards, full layout

Typography

• Header: Bold, 3xl (30px)
• Card values: Bold, 2xl (24px)
• Course titles: Semibold, lg (18px)
• Labels: Medium, sm (14px)

📱 Integration Points

Where to Use

1. Learner Dashboard: Main progress overview page
2. Profile Page: Show learning achievements
3. Home Page: Quick progress snapshot
4. Mobile App: Track on-the-go learning

Data Flow

User Login
    ↓
Fetch Enrolled Courses
    ↓
Calculate Progress Data
    ↓
CourseProgressTracker.display()
    ↓
User Clicks Course
    ↓
Navigate to Course Player

📚 Documentation

Comprehensive README includes:

• Feature overview and benefits
• Complete usage examples
• Props documentation with TypeScript interfaces
• Visual layout diagram
• Integration guide
• Styling specifications
• Color scheme details
• Future enhancement ideas

🎃 Hacktoberfest 2025

This contribution is part of Hacktoberfest 2025!

✅ Checklist

• TypeScript with proper types
• React best practices
• Tailwind CSS (no new dependencies)
• Dark mode support
• Responsive design (mobile-first)
• Accessible UI (WCAG compliant colors)
• Performance optimized
• Clean, commented code
• Comprehensive documentation
• No breaking changes
• Empty state handling

Copy and paste this into your Skill-Bridge PR description! 🚀📚Copy and paste this into your Skill-Bridge PR description! 🚀📚