+ {/* Welcome Header */}
+
+ );
+};
+
+// Courses List Component
+const CoursesList = () => {
+ const [searchQuery, setSearchQuery] = useState('');
+ const [filter, setFilter] = useState('all');
+
+ const filteredCourses = MOCK_COURSES.filter(course => {
+ const matchesSearch = course.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+ course.instructor.toLowerCase().includes(searchQuery.toLowerCase());
+ return matchesSearch;
+ });
+
+ return (
+
+
+
+ {/* Stats Grid */}
+
+
+
+ + Welcome back, {user?.name.split(' ')[0]}! 👋 +
+Here's what's happening with your courses today.
+
+ {stats.map((stat, i) => (
+
+
+ ))}
+
+
+
+
+ {stat.value}
+{stat.label}
+
+ {/* Continue Learning */}
+
+
+
+
+ {/* Upcoming Assignments */}
+
+
+
+ Continue Learning
+ + View All
+ {enrolledCourses.map((course, i) => {
+ const progress = MOCK_PROGRESS[course.id];
+ return (
+
+
+ );
+ })}
+
+
+ 
+
+
+
+
+
+
+
+
+
+ {progress?.overallProgress || 0}%
+
+ {course.title}
+{course.instructor}
+
+
+
+
+ Continue
+ {progress?.completedLessons || 0}/{course.totalLessons} lessons
+ {progress?.timeSpent || '0h'} spent
+
+
+
+
+
+
+ Upcoming Assignments
+
+ {pendingAssignments.length > 0 ? (
+ pendingAssignments.map((assignment, i) => (
+
+
+ ))
+ ) : (
+
+
+
+
+
+
+
+ {assignment.title}
++ Due {new Date(assignment.dueDate).toLocaleDateString()} +
+
+
+ )}
+ No pending assignments
+
+
+ );
+};
+
+// Course Player Component
+const CoursePlayer = ({ courseId }) => {
+ const course = MOCK_COURSES.find(c => c.id === courseId);
+ const lessons = MOCK_LESSONS.filter(l => l.courseId === courseId);
+ const [activeLesson, setActiveLesson] = useState(lessons[0]);
+ const [sidebarOpen, setSidebarOpen] = useState(true);
+
+ if (!course) return
+
+
+
+
+ My Courses
+Manage and access your enrolled courses
+
+
+
+
+
+ {filteredCourses.map((course, i) => {
+ const progress = MOCK_PROGRESS[course.id];
+ return (
+
+
+ );
+ })}
+
+
+
+
+
+
+ {course.level}
+
+
+
+
+ {course.code}
+ •
+ {course.credits} credits
+
+
+ + {course.title} +
++ {course.description} +
+ +
+
+
+
+
+ {course.instructor.charAt(0)}
+
+
+ {course.instructor}
+
+
+
+
+ {progress?.overallProgress > 0 ? 'Continue' : 'Start'} Learning
+
+
+ Progress
+ {progress?.overallProgress || 0}%
+
+
+
+
+ Course not found
;
+
+ const groupedLessons = lessons.reduce((acc, lesson) => {
+ if (!acc[lesson.module]) acc[lesson.module] = [];
+ acc[lesson.module].push(lesson);
+ return acc;
+ }, {});
+
+ return (
+
+ {/* Main Content */}
+
+ );
+};
+
+// Assignments Component
+const Assignments = () => {
+ const [filter, setFilter] = useState('all');
+
+ const filteredAssignments = MOCK_ASSIGNMENTS.filter(a => {
+ if (filter === 'all') return true;
+ return a.status === filter;
+ });
+
+ return (
+
+ {/* Video Player */}
+
+
+ {/* Lessons Sidebar */}
+
+
+
+ {/* Lesson Info */}
+
+
+
+
+
+ {activeLesson?.title}
+
+ {activeLesson?.duration}
+ {activeLesson?.module}
+
+
+
+ {activeLesson?.title}
++ This lesson covers fundamental concepts and principles that will help you understand the core material. +
+ +
+
+
+
+
+
+
+
+
+ Course Content
+ +
+ {Object.entries(groupedLessons).map(([module, moduleLessons], i) => (
+
+
+
+ ))}
+ + {module} +
+
+ {moduleLessons.map((lesson) => (
+
+ ))}
+
+
+
+ );
+};
+
+// Grades Component
+const Grades = () => {
+ return (
+
+
+
+
+
+ Assignments
+Track and submit your coursework
+
+ {['all', 'pending', 'graded'].map((f) => (
+
+ ))}
+
+
+ {filteredAssignments.map((assignment, i) => {
+ const course = MOCK_COURSES.find(c => c.id === assignment.courseId);
+ return (
+
+
+ );
+ })}
+
+
+
+
+
+
+
+
+ {course?.code}
+
+
+ {assignment.status === 'graded' ? 'Graded' : 'Pending'}
+
+
+
+ + {assignment.title} +
+{assignment.description}
+ +
+
+
+
+
+
+ {assignment.score && (
+
+
+ )}
+
+ {assignment.status === 'pending' && (
+ <>
+
+
+
+ )}
+ {assignment.status === 'graded' && (
+
+ )}
+
+
+
+ );
+};
+
+// Main Layout
+const MainLayout = ({ children }) => {
+ const [sidebarOpen, setSidebarOpen] = useState(false);
+
+ return (
+
+
+
+ Grades & Transcripts
+View your academic performance
+
+
+
+
+
+ Overall GPA
+3.8
+↑ 0.2 from last term
+
+
+ Credits Earned
+42
+of 120 required
+
+
+ Courses Completed
+14
+3 in progress
+
+
+
+
+ Course Grades
+
+
+
+
+
+ | Course | +Credits | +Grade | +Points | +Status | +
|---|---|---|---|---|
|
+ {course.title} +{course.code} + |
+ {course.credits} | ++ + {progress?.grade || 'N/A'} + + | +{progress?.overallProgress || 0}% | ++ + {progress?.overallProgress === 100 ? 'Completed' : 'In Progress'} + + | +
+
+ );
+};
+
+// Protected Route
+const ProtectedRoute = ({ children }) => {
+ const { user, loading } = useAuth();
+
+ if (loading) {
+ return (
+
+ {/* Top Header */}
+
+
+
+ {/* Page Content */}
+
+ {children}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ return user ? children :