- {contentType === 'image' && contentPosition !== 'background'
- ? imageBlock(illustrationImage)
- : null}
- {contentType === 'video' && contentPosition !== 'background'
- ? videoBlock(illustrationVideo)
- : null}
-
-
-
-
This is a React.js/Node.js app generated by the Flatlogic Web App Generator
-
For guides and documentation please check
- your local README.md and the Flatlogic documentation
+
+
+
+
+
+ Instructor Student LMS
+
+
A focused LMS for instructors, students, and learning operations.
-
-
-
-
+
+
+
-
-
-
-
© 2026 {title} . All rights reserved
-
- Privacy Policy
-
-
-
+
+
+
+
+ Initial MVP slice live
+
+
+
+ A clean LMS for publishing courses and helping students finish what they start.
+
+
+ Built around the core journey that matters first: instructors publish courses and lessons,
+ students enroll, read, and watch progress update in real time.
+
+
+
+
+
+
+
+
+
+
Roles
+
3
+
Admin, Instructor, and Learner workflows are all accounted for.
+
+
+
Lesson format
+
Text / Markdown
+
Fast authoring now, easy to extend later with media attachments.
+
+
+
What is new
+
Learning Hub
+
Enroll, continue lessons, and see progress move without raw CRUD screens.
+
+
+
+
+
+
+
Thin slice
+
Student journey
+
+
+
+
+
+
+
+
1. Browse published courses
+
Students see a focused catalog instead of generic tables.
+
+
+
2. Enroll instantly
+
One click creates the enrollment and opens the lesson path.
+
+
+
3. Complete lessons
+
Completion updates course progress automatically for a real sense of momentum.
+
+
+
+
+
+
+ {featureCards.map((card) => (
+
+
+
+
+
+
{card.title}
+
{card.text}
+
+
+ ))}
+
+
+
+
+
Workflow first
+
+ The first delivery is an end-to-end loop, not just a prettier admin.
+
+
+ Core CRUD already exists. This iteration turns that foundation into a usable product slice that both students and instructors can understand immediately.
+
+
+ {workflowSteps.map((step, index) => (
+
+
+
+
+ {step.eyebrow}
+
+
+ 0{index + 1}
+
+
+
+
{step.title}
+
{step.text}
+
+
+ ))}
+
+
+
+
+
+
Ready to explore
+
+ Jump into the learner workflow or open the admin interface.
+
+
+ The app now has a public-facing entry, a direct login path, and a branded route into the new learning hub.
+
+
+
+
+
+
+
+
+
+
);
}
-Starter.getLayout = function getLayout(page: ReactElement) {
+HomePage.getLayout = function getLayout(page: ReactElement) {
return
{page} ;
};
-
diff --git a/frontend/src/pages/learning-hub.tsx b/frontend/src/pages/learning-hub.tsx
new file mode 100644
index 0000000..8beb478
--- /dev/null
+++ b/frontend/src/pages/learning-hub.tsx
@@ -0,0 +1,723 @@
+import {
+ mdiBookOpenPageVariant,
+ mdiChartTimelineVariant,
+ mdiCheckCircleOutline,
+ mdiNotebookOutline,
+ mdiSchoolOutline,
+} from '@mdi/js';
+import axios from 'axios';
+import Head from 'next/head';
+import React, {
+ ReactElement,
+ useCallback,
+ useEffect,
+ useMemo,
+ useState,
+} from 'react';
+import BaseButton from '../components/BaseButton';
+import BaseIcon from '../components/BaseIcon';
+import CardBox from '../components/CardBox';
+import LoadingSpinner from '../components/LoadingSpinner';
+import NotificationBar from '../components/NotificationBar';
+import SectionMain from '../components/SectionMain';
+import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../config';
+import LayoutAuthenticated from '../layouts/Authenticated';
+import { hasPermission } from '../helpers/userPermissions';
+import { useAppSelector } from '../stores/hooks';
+
+type Lesson = {
+ id: string;
+ title: string;
+ content_markdown: string;
+ order_index: number;
+ estimated_minutes: number;
+ is_preview: boolean;
+};
+
+type Enrollment = {
+ id: string;
+ courseId: string;
+ progress_percent: number | string;
+ status: string;
+};
+
+type Completion = {
+ id: string;
+ lessonId: string;
+ enrollmentId: string;
+ is_completed: boolean;
+};
+
+type Course = {
+ id: string;
+ title: string;
+ short_description: string;
+ description: string;
+ is_featured: boolean;
+ instructor?: {
+ firstName?: string;
+ lastName?: string;
+ email?: string;
+ };
+ lessons: Lesson[];
+ enrollment: Enrollment | null;
+ completedLessons: number;
+ totalLessons: number;
+ progressPercent: number;
+};
+
+type LearningPayload = {
+ courses: Course[];
+ completions: Completion[];
+ stats: {
+ availableCourses: number;
+ enrolledCourses: number;
+ completedLessons: number;
+ averageProgress: number;
+ };
+};
+
+const StatCard = ({ label, value, hint }: { label: string; value: string | number; hint: string }) => (
+
+
+
+ {label}
+
+
{value}
+
{hint}
+
+);
+
+const ProgressBar = ({ value }: { value: number }) => (
+
+);
+
+const formatInstructor = (course: Course) => {
+ const fullName = `${course.instructor?.firstName || ''} ${course.instructor?.lastName || ''}`.trim();
+
+ if (fullName) {
+ return fullName;
+ }
+
+ return course.instructor?.email || 'Instructor';
+};
+
+const LearningHub = () => {
+ const { currentUser } = useAppSelector((state) => state.auth);
+ const [courses, setCourses] = useState
([]);
+ const [completions, setCompletions] = useState([]);
+ const [stats, setStats] = useState({
+ availableCourses: 0,
+ enrolledCourses: 0,
+ completedLessons: 0,
+ averageProgress: 0,
+ });
+ const [selectedCourseId, setSelectedCourseId] = useState('');
+ const [selectedLessonId, setSelectedLessonId] = useState('');
+ const [isLoading, setIsLoading] = useState(true);
+ const [isRefreshing, setIsRefreshing] = useState(false);
+ const [pendingCourseId, setPendingCourseId] = useState('');
+ const [pendingLessonId, setPendingLessonId] = useState('');
+ const [successMessage, setSuccessMessage] = useState('');
+ const [errorMessage, setErrorMessage] = useState('');
+
+ const canEnroll = hasPermission(currentUser, 'CREATE_ENROLLMENTS');
+ const canManageCourses = hasPermission(currentUser, ['CREATE_COURSES', 'CREATE_LESSONS']);
+
+ const fetchLearningHub = useCallback(async (preferredCourseId?: string) => {
+ setIsRefreshing(true);
+
+ try {
+ const response = await axios.get('/enrollments/my-learning');
+ const payload = response.data;
+ const nextCourses = payload.courses || [];
+
+ setCourses(nextCourses);
+ setCompletions(payload.completions || []);
+ setStats(payload.stats);
+ setErrorMessage('');
+
+ const resolvedCourseId =
+ preferredCourseId && nextCourses.some((course) => course.id === preferredCourseId)
+ ? preferredCourseId
+ : nextCourses.find((course) => course.enrollment)?.id || nextCourses[0]?.id || '';
+
+ setSelectedCourseId(resolvedCourseId);
+ } catch (error) {
+ console.error('Failed to load learning hub:', error);
+ setErrorMessage('We could not load your learning hub right now. Please refresh and try again.');
+ } finally {
+ setIsLoading(false);
+ setIsRefreshing(false);
+ }
+ }, []);
+
+ useEffect(() => {
+ fetchLearningHub();
+ }, [fetchLearningHub]);
+
+ const activeCourse = useMemo(
+ () => courses.find((course) => course.id === selectedCourseId) || courses[0] || null,
+ [courses, selectedCourseId],
+ );
+
+ useEffect(() => {
+ if (!activeCourse) {
+ setSelectedLessonId('');
+ return;
+ }
+
+ const lessonExists = activeCourse.lessons.some((lesson) => lesson.id === selectedLessonId);
+ if (!lessonExists) {
+ setSelectedLessonId(activeCourse.lessons[0]?.id || '');
+ }
+ }, [activeCourse, selectedLessonId]);
+
+ const activeLesson = useMemo(
+ () => activeCourse?.lessons.find((lesson) => lesson.id === selectedLessonId) || null,
+ [activeCourse, selectedLessonId],
+ );
+
+ const activeEnrollment = activeCourse?.enrollment || null;
+
+ const completionLookup = useMemo(() => {
+ if (!activeEnrollment) {
+ return {} as Record;
+ }
+
+ return completions.reduce((accumulator, completion) => {
+ if (completion.enrollmentId === activeEnrollment.id) {
+ accumulator[completion.lessonId] = completion;
+ }
+
+ return accumulator;
+ }, {} as Record);
+ }, [activeEnrollment, completions]);
+
+ const enrolledCourses = courses.filter((course) => Boolean(course.enrollment));
+ const availableCourses = courses.filter((course) => !course.enrollment);
+
+ const handleEnroll = async (courseId: string) => {
+ setPendingCourseId(courseId);
+ setSuccessMessage('');
+ setErrorMessage('');
+
+ try {
+ const response = await axios.post('/enrollments/enroll-course', { courseId });
+ const message = response.data?.alreadyEnrolled
+ ? 'You are already enrolled in this course.'
+ : 'Enrollment confirmed. Your first lesson is ready.';
+
+ setSuccessMessage(message);
+ await fetchLearningHub(courseId);
+ } catch (error) {
+ console.error('Failed to enroll in course:', error);
+ setErrorMessage('We could not enroll you in that course. Please try again.');
+ } finally {
+ setPendingCourseId('');
+ }
+ };
+
+ const handleToggleLesson = async (lessonId: string) => {
+ if (!activeEnrollment) {
+ return;
+ }
+
+ setPendingLessonId(lessonId);
+ setSuccessMessage('');
+ setErrorMessage('');
+
+ try {
+ const response = await axios.post(`/enrollments/${activeEnrollment.id}/toggle-lesson`, {
+ lessonId,
+ });
+ const isCompleted = response.data?.completion?.is_completed;
+
+ setSuccessMessage(
+ isCompleted
+ ? 'Lesson marked complete — your progress just moved forward.'
+ : 'Lesson marked incomplete so you can revisit it later.',
+ );
+ await fetchLearningHub(activeCourse?.id);
+ } catch (error) {
+ console.error('Failed to update lesson progress:', error);
+ setErrorMessage('We could not update this lesson right now. Please try again.');
+ } finally {
+ setPendingLessonId('');
+ }
+ };
+
+ if (isLoading) {
+ return (
+ <>
+
+ {getPageTitle('Learning Hub')}
+
+
+
+ {''}
+
+
+
+
+
+ );
+ }
+
+ return (
+ <>
+
+ {getPageTitle('Learning Hub')}
+
+
+
+
+ {''}
+
+
+
+
+
+
+ Student MVP slice
+
+
+
+ Enroll, read lessons, and watch progress update in one clean flow.
+
+
+ This first iteration turns the LMS data model into a usable learner journey:
+ discover published courses, join instantly, and track completion lesson by lesson.
+
+
+
+
+
+
+
+
Ready right now
+
{stats.enrolledCourses}
+
Courses already active for your account.
+
+
+
Momentum
+
{stats.averageProgress}%
+
Average progress across enrolled courses.
+
+
+
+
+ {successMessage ? (
+
+ {successMessage}
+
+ ) : null}
+
+ {errorMessage ? (
+
+ {errorMessage}
+
+ ) : null}
+
+
+
+
+
+
+
+
+
+
+ Course catalog
+
+
Choose your next course
+
+ {isRefreshing ? (
+
Refreshing…
+ ) : null}
+
+ {courses.map((course) => {
+ const isSelected = activeCourse?.id === course.id;
+ const isEnrolled = Boolean(course.enrollment);
+ const buttonLabel = isEnrolled ? 'Continue course' : 'Enroll now';
+
+ return (
+
setSelectedCourseId(course.id)}
+ onKeyDown={(event) => {
+ if (event.key === 'Enter' || event.key === ' ') {
+ event.preventDefault();
+ setSelectedCourseId(course.id);
+ }
+ }}
+ className={`w-full rounded-2xl border p-5 text-left transition duration-150 focus:outline-none focus:ring ${
+ isSelected
+ ? 'border-[#2563EB] bg-[#EFF6FF] shadow-sm ring-blue-200'
+ : 'border-slate-200 bg-white hover:border-slate-300 hover:shadow-sm ring-slate-200'
+ }`}
+ >
+
+
+
+
{course.title}
+ {course.is_featured ? (
+
+ Featured
+
+ ) : null}
+ {isEnrolled ? (
+
+ Enrolled
+
+ ) : null}
+
+
{course.short_description}
+
+
+
+
+
+
+
+
Instructor
+
{formatInstructor(course)}
+
+
+
Lessons
+
{course.totalLessons} text lessons
+
+
+
+
+
+ Progress
+ {course.progressPercent}%
+
+
+
+
+
+ {isEnrolled ? (
+
+
+ ) : (
+
+
+ )}
+
+ {!isEnrolled && canEnroll ? (
+ {
+ event.stopPropagation();
+ handleEnroll(course.id);
+ }}
+ disabled={pendingCourseId === course.id}
+ />
+ ) : (
+ {
+ event.stopPropagation();
+ setSelectedCourseId(course.id);
+ }}
+ />
+ )}
+
+
+ );
+ })}
+
+ No published courses are available yet. Create or publish a course from the admin area
+ to activate this learning flow.
+
+ )}
+
+
+ {canManageCourses ? (
+
+
+
+
+ Instructor quick actions
+
+
Publish a course in three moves
+
+
+
+
1. Create the course shell
+
Set the title, description, instructor, and featured status.
+
+
+
2. Add ordered text lessons
+
Use markdown-friendly lesson content and estimated reading time.
+
+
+
3. Watch enrollments and completion grow
+
The learner hub now turns those entities into a guided student experience.
+
+
+
+
+
+ ) : null}
+
+
+
+
+ {activeCourse ? (
+
+
+
+
+
+
+ {activeEnrollment ? 'In progress' : 'Preview'}
+
+
+ {activeCourse.totalLessons} lessons
+
+
+
+
{activeCourse.title}
+
+ {activeCourse.description || activeCourse.short_description}
+
+
+
+
+ {!activeEnrollment && canEnroll ? (
+
handleEnroll(activeCourse.id)}
+ disabled={pendingCourseId === activeCourse.id}
+ />
+ ) : null}
+
+
+
+
+ Course progress
+ {activeCourse.progressPercent}%
+
+
+
+
+
+
+
+
+
Lesson path
+
+ {activeCourse.completedLessons}/{activeCourse.totalLessons} completed
+
+
+
+ {activeCourse.lessons.length ? (
+
+ {activeCourse.lessons.map((lesson, index) => {
+ const completion = completionLookup[lesson.id];
+ const isSelected = activeLesson?.id === lesson.id;
+ const isCompleted = Boolean(completion?.is_completed);
+
+ return (
+
setSelectedLessonId(lesson.id)}
+ className={`w-full rounded-2xl border p-4 text-left transition duration-150 ${
+ isSelected
+ ? 'border-[#2563EB] bg-[#EFF6FF]'
+ : 'border-slate-200 bg-white hover:border-slate-300'
+ }`}
+ >
+
+
+ {isCompleted ? '✓' : index + 1}
+
+
+
+
+
{lesson.title}
+
+ {lesson.estimated_minutes || 5} min read
+
+
+ {lesson.is_preview ? (
+
+ Preview
+
+ ) : null}
+
+
+
+ );
+ })}
+
+ ) : (
+
+ This course is published, but there are no published lessons attached yet.
+
+ )}
+
+
+
+ {activeLesson ? (
+
+
+
+
+ Lesson reader
+
+
{activeLesson.title}
+
+ Estimated time: {activeLesson.estimated_minutes || 5} minutes
+
+
+ {activeEnrollment ? (
+
handleToggleLesson(activeLesson.id)}
+ disabled={pendingLessonId === activeLesson.id}
+ />
+ ) : null}
+
+
+ {!activeEnrollment ? (
+
+ Enroll in this course to unlock completion tracking and persist your progress.
+
+ ) : null}
+
+
+
+ {activeLesson.content_markdown || 'Lesson content has not been added yet.'}
+
+
+
+ ) : (
+
+
+
+
Choose a lesson to begin
+
+ Select a lesson from the path to open the reader and record completion.
+
+
+ )}
+
+
+
+
+
+
Your learning space is ready
+
+ Publish the first course from the admin area, then come back here to enroll and track lesson completion.
+
+
+
+
+
+
+
+
+
Create
+
Instructors continue using the existing course and lesson CRUD pages.
+
+
+
Enroll
+
Learners join a published course with one click from the catalog.
+
+
+
Track progress
+
Lesson completion updates enrollment progress and completion status automatically.
+
+
+
+
+
+ );
+};
+
+LearningHub.getLayout = function getLayout(page: ReactElement) {
+ return {page} ;
+};
+
+export default LearningHub;