-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Title
-{courses?.title}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Subtitle
-{courses?.subtitle}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Description
- {courses.description - ? - :No data
- } -
-
+
- {courses.published_at ?
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- <>
-
-
Thumbnail
- {courses?.thumbnail?.length - ? ( -
+ {!isLearner && (
+ router.push(isLearner ? '/dashboard' : '/courses/courses-list')}
+ />
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- No Thumbnail
- } + )} +
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Status
-{courses?.status ?? 'No data'}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Level
-{courses?.level ?? 'No data'}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Category
-{courses?.category}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Language
-{courses?.language}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- EstimatedDuration(Minutes)
-{courses?.estimated_duration_minutes || 'No data'}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Instructor
- - -{courses?.instructor?.firstName ?? 'No data'}
- - - - - - - - - - - - - - - - - - -No PublishedAt
} -Lessons Course
-
-
-
-
+
+
+
| Title | - - - - - - - -VideoURL | - - - -OrderIndex | - - - -Status | - - - -IsPreview | - - - -EstimatedMinutes | - - - -PublishedAt | - - -
|---|---|---|---|---|---|---|
| - { item.title } - | - - - - - - - -- { item.video_url } - | - - - -- { item.order_index } - | - - - -- { item.status } - | - - - -- { dataFormatter.booleanFormatter(item.is_preview) } - | - - - -- { item.estimated_minutes } - | - - - -- { dataFormatter.dateTimeFormatter(item.published_at) } - | - - -
+ {/* Main Content */}
+
+
{page}
)
}
-export default CoursesView;
\ No newline at end of file
+export default CoursesView;
diff --git a/frontend/src/pages/dashboard.tsx b/frontend/src/pages/dashboard.tsx
index 58563f3..4e41453 100644
--- a/frontend/src/pages/dashboard.tsx
+++ b/frontend/src/pages/dashboard.tsx
@@ -1,7 +1,6 @@
import * as icon from '@mdi/js';
import Head from 'next/head'
-import React from 'react'
-import axios from 'axios';
+import React, { useEffect } from 'react'
import type { ReactElement } from 'react'
import LayoutAuthenticated from '../layouts/Authenticated'
import SectionMain from '../components/SectionMain'
@@ -9,402 +8,170 @@ import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton
import BaseIcon from "../components/BaseIcon";
import { getPageTitle } from '../config'
import Link from "next/link";
-
-import { hasPermission } from "../helpers/userPermissions";
-import { fetchWidgets } from '../stores/roles/rolesSlice';
-import { WidgetCreator } from '../components/WidgetCreator/WidgetCreator';
-import { SmartWidget } from '../components/SmartWidget/SmartWidget';
+import BaseButton from '../components/BaseButton';
+import CardBox from '../components/CardBox';
import { useAppDispatch, useAppSelector } from '../stores/hooks';
+import { fetch as fetchCourses } from '../stores/courses/coursesSlice';
+import { fetch as fetchEnrollments, create as enrollInCourse } from '../stores/enrollments/enrollmentsSlice';
+
const Dashboard = () => {
const dispatch = useAppDispatch();
- const iconsColor = useAppSelector((state) => state.style.iconsColor);
- const corners = useAppSelector((state) => state.style.corners);
- const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
-
- const loadingMessage = 'Loading...';
-
-
- const [users, setUsers] = React.useState(loadingMessage);
- const [roles, setRoles] = React.useState(loadingMessage);
- const [permissions, setPermissions] = React.useState(loadingMessage);
- const [courses, setCourses] = React.useState(loadingMessage);
- const [lessons, setLessons] = React.useState(loadingMessage);
- const [enrollments, setEnrollments] = React.useState(loadingMessage);
- const [lesson_progress, setLesson_progress] = React.useState(loadingMessage);
- const [course_announcements, setCourse_announcements] = React.useState(loadingMessage);
- const [course_reviews, setCourse_reviews] = React.useState(loadingMessage);
-
-
- const [widgetsRole, setWidgetsRole] = React.useState({
- role: { value: '', label: '' },
- });
const { currentUser } = useAppSelector((state) => state.auth);
- const { isFetchingQuery } = useAppSelector((state) => state.openAi);
-
- const { rolesWidgets, loading } = useAppSelector((state) => state.roles);
-
-
- async function loadData() {
- const entities = ['users','roles','permissions','courses','lessons','enrollments','lesson_progress','course_announcements','course_reviews',];
- const fns = [setUsers,setRoles,setPermissions,setCourses,setLessons,setEnrollments,setLesson_progress,setCourse_announcements,setCourse_reviews,];
+ const { courses } = useAppSelector((state) => state.courses);
+ const { enrollments } = useAppSelector((state) => state.enrollments);
- const requests = entities.map((entity, index) => {
-
- if(hasPermission(currentUser, `READ_${entity.toUpperCase()}`)) {
- return axios.get(`/${entity.toLowerCase()}/count`);
- } else {
- fns[index](null);
- return Promise.resolve({data: {count: null}});
- }
-
- });
+ useEffect(() => {
+ if (currentUser) {
+ dispatch(fetchCourses({ query: '' }));
+ dispatch(fetchEnrollments({ query: `?student=${currentUser.id}` }));
+ }
+ }, [currentUser, dispatch]);
- Promise.allSettled(requests).then((results) => {
- results.forEach((result, i) => {
- if (result.status === 'fulfilled') {
- fns[i](result.value.data.count);
- } else {
- fns[i](result.reason.message);
- }
- });
- });
+ const handleEnroll = async (courseId: string) => {
+ const data = {
+ course: courseId,
+ student: currentUser?.id,
+ status: 'active',
+ enrolled_at: new Date().toISOString()
+ };
+ await dispatch(enrollInCourse(data));
+ dispatch(fetchEnrollments({ query: `?student=${currentUser?.id}` }));
+ };
+
+ const isEnrolled = (courseId: string) => {
+ return Array.isArray(enrollments) && enrollments.some((e: any) => e.courseId === courseId);
+ };
+
+ const isLearner = currentUser?.app_role?.name === 'Learner';
+
+ if (!isLearner) {
+ return (
+ <>
+ {getPageTitle('Overview')}
+
+
+
+ );
}
-
- async function getWidgets(roleId) {
- await dispatch(fetchWidgets(roleId));
- }
- React.useEffect(() => {
- if (!currentUser) return;
- loadData().then();
- setWidgetsRole({ role: { value: currentUser?.app_role?.id, label: currentUser?.app_role?.name } });
- }, [currentUser]);
- React.useEffect(() => {
- if (!currentUser || !widgetsRole?.role?.value) return;
- getWidgets(widgetsRole?.role?.value || '').then();
- }, [widgetsRole?.role?.value]);
-
- return (
- <>
-
-
- {getPageTitle('Overview')}
-
-
-
-
- {''}
-
-
- {hasPermission(currentUser, 'CREATE_ROLES') && {getPageTitle('Student Dashboard')}
+
+
} - -
+
+
-
-
-
- <>
-
-
);
@@ -798,14 +250,10 @@ const CoursesView = () => {
CoursesView.getLayout = function getLayout(page: ReactElement) {
return (
-
+
- {!courses?.lessons_course?.length && {courses?.title}
+{courses?.subtitle}
No data
}
- Enrollments Course
-
-
-
-
+
+
-
-
-
-
- <>
-
-
-
-
-
- router.push('/courses/courses-list')}
- />
-
+ {/* Lessons Section */}
+
+
+
+
+
+
+ {/* Sidebar */}
+ | Status | - - - -EnrolledAt | - - - -CompletedAt | - - - -ProgressPercent | - - -
|---|---|---|---|
| - { item.status } - | - - - -- { dataFormatter.dateTimeFormatter(item.enrolled_at) } - | - - - -- { dataFormatter.dateTimeFormatter(item.completed_at) } - | - - - -- { item.progress_percent } - | - - -
+
- {!courses?.enrollments_course?.length && About this course
+ {courses.description + ? + :No description available.
+ }No data
}
-
-
-
-
-
- <>
- Course_announcements Course
-
-
-
-
-
- {!courses?.course_announcements_course?.length && | Title | - - - - - -PublishedAt | - - - -IsPublished | - - -
|---|---|---|
| - { item.title } - | - - - - - -- { dataFormatter.dateTimeFormatter(item.published_at) } - | - - - -- { dataFormatter.booleanFormatter(item.is_published) } - | - - -
No data
}
- Course_reviews Course
-
-
-
-
-
- {!courses?.course_reviews_course?.length && | Rating | - - - -Comment | - - - -ReviewedAt | - - - -IsPublished | - - -
|---|---|---|---|
| - { item.rating } - | - - - -- { item.comment } - | - - - -- { dataFormatter.dateTimeFormatter(item.reviewed_at) } - | - - - -- { dataFormatter.booleanFormatter(item.is_published) } - | - - -
No data
}
-
+
+
-
+
+ Level
+{courses?.level || 'Beginner'}
+
+
+ Language
+{courses?.language || 'English'}
+
+
+ Duration
+{courses?.estimated_duration_minutes || '0'} min
+
+
+ Published
+{courses?.published_at ? dayjs(courses.published_at).format('MMM D, YYYY') : 'TBA'}
+
+
+
+ {courses.lessons_course && courses.lessons_course.length > 0 ? (
+ courses.lessons_course.sort((a: any, b: any) => (a.order_index || 0) - (b.order_index || 0)).map((lesson: any, idx: number) => (
+
+ (isEnrolled || lesson.is_preview) && router.push(`/lessons/lessons-view/?id=${lesson.id}`)}
+ >
+
+ ))
+ ) : (
+
+ {idx + 1}
+
+
+
+ {lesson.title}
+{lesson.estimated_minutes || 0} minutes
+
+ {lesson.is_preview && !isEnrolled && (
+ Preview
+ )}
+
+ No lessons available for this course yet.
+ )} +
+ {/* Enrollment Card */}
+
+
+
+ {/* Instructor Info */}
+
+
+
+
+ {courses?.thumbnail && courses.thumbnail[0] ? (
+ 
+ ) : (
+
+
+ {isEnrolled ? (
+
+ {courses?.category || 'Educational'}
+
+
+ {
+ if (courses.lessons_course?.length > 0) {
+ router.push(`/lessons/lessons-view/?id=${courses.lessons_course[0].id}`);
+ }
+ }}
+ />
+
+ ) : (
+
+
+
+
+ )}
+
+ Ready to start your journey in {courses?.title}?
+Join thousands of students learning this today!
+
+
+ Course Highlights
+-
+
-
+
+ Lifetime access +
+ -
+
+ Self-paced learning +
+ -
+
+ Mobile friendly +
+
Your Instructor
+
+
+
+ {courses?.instructor?.firstName?.[0] || 'I'}
+
+
+
+ {courses?.instructor?.firstName} {courses?.instructor?.lastName || ''}
+Expert Course Creator
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Total Courses
+{courses.length || 0}
+
+
+
+
+ Total Users
+...
+
+
+
+
+ Total Enrollments
+...
+- {`${widgetsRole?.role?.label || 'Users'}'s widgets`} -
- )} + return ( + <> +Your Enrolled Courses
+
+ {Array.isArray(enrollments) && enrollments.length > 0 ? (
+ enrollments.map((enrollment: any) => (
+
+
+ ))
+ ) : (
+
+
+ )}
+
-
+
+ {enrollment.course?.title}
+{enrollment.course?.subtitle}
+
+
+ You haven't enrolled in any courses yet.
+Browse available courses below to get started!
+
- {(isFetchingQuery || loading) && (
-
- { rolesWidgets && - rolesWidgets.map((widget) => ( -
-
- {!!rolesWidgets.length &&
-
- )}
+ - { rolesWidgets && - rolesWidgets.map((widget) => ( -
} - -
-
-
- {hasPermission(currentUser, 'READ_USERS') &&
-
-
- {page}
}
-export default Dashboard
+export default Dashboard
\ No newline at end of file
diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
index cf2b3bd..ed561b2 100644
--- a/frontend/src/pages/index.tsx
+++ b/frontend/src/pages/index.tsx
@@ -1,166 +1,127 @@
-
import React, { useEffect, useState } from 'react';
import type { ReactElement } from 'react';
import Head from 'next/head';
import Link from 'next/link';
import BaseButton from '../components/BaseButton';
-import CardBox from '../components/CardBox';
import SectionFullScreen from '../components/SectionFullScreen';
import LayoutGuest from '../layouts/Guest';
-import BaseDivider from '../components/BaseDivider';
-import BaseButtons from '../components/BaseButtons';
import { getPageTitle } from '../config';
import { useAppSelector } from '../stores/hooks';
-import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
-import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
+import { mdiSchool, mdiBookOpenVariant, mdiAccountGroup, mdiCheckDecagram } from '@mdi/js';
+import BaseIcon from '../components/BaseIcon';
-
-export default function Starter() {
- const [illustrationImage, setIllustrationImage] = useState({
- src: undefined,
- photographer: undefined,
- photographer_url: undefined,
- })
- const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
- const [contentType, setContentType] = useState('video');
- const [contentPosition, setContentPosition] = useState('left');
+export default function LandingPage() {
const textColor = useAppSelector((state) => state.style.linkColor);
-
const title = 'Course LMS'
- // Fetch Pexels image/video
- useEffect(() => {
- async function fetchData() {
- const image = await getPexelsImage();
- const video = await getPexelsVideo();
- setIllustrationImage(image);
- setIllustrationVideo(video);
- }
- fetchData();
- }, []);
-
- const imageBlock = (image) => (
-
- );
-
- const videoBlock = (video) => {
- if (video?.video_files?.length > 0) {
- return (
-
-
-
-
- )
+
+
+ );
}
Dashboard.getLayout = function getLayout(page: ReactElement) {
return
- Users
+
- }
-
- {hasPermission(currentUser, 'READ_ROLES') &&
- Explore Courses
+
+ {Array.isArray(courses) && courses.map((course: any) => (
+
+
+
+ ))}
+
-
+ {course.thumbnail && course.thumbnail[0] ? (
+ 
+ ) : (
+
+ {course.title}
+{course.category}
+{course.description?.replace(/<[^>]*>?/gm, '')}
- {users}
+
-
+ {isEnrolled(course.id) ? (
+ handleEnroll(course.id)}
+ className="w-full bg-indigo-600 hover:bg-indigo-700 border-none"
+ />
+ )}
-
-
-
-
- }
-
- {hasPermission(currentUser, 'READ_PERMISSIONS') &&
-
-
-
-
-
- Roles
-
-
- {roles}
-
-
-
-
-
- }
-
- {hasPermission(currentUser, 'READ_COURSES') &&
-
-
-
-
-
- Permissions
-
-
- {permissions}
-
-
-
-
-
- }
-
- {hasPermission(currentUser, 'READ_LESSONS') &&
-
-
-
-
-
- Courses
-
-
- {courses}
-
-
-
-
-
- }
-
- {hasPermission(currentUser, 'READ_ENROLLMENTS') &&
-
-
-
-
-
- Lessons
-
-
- {lessons}
-
-
-
-
-
- }
-
- {hasPermission(currentUser, 'READ_LESSON_PROGRESS') &&
-
-
-
-
-
- Enrollments
-
-
- {enrollments}
-
-
-
-
-
- }
-
- {hasPermission(currentUser, 'READ_COURSE_ANNOUNCEMENTS') &&
-
-
-
-
-
- Lesson progress
-
-
- {lesson_progress}
-
-
-
-
-
- }
-
- {hasPermission(currentUser, 'READ_COURSE_REVIEWS') &&
-
-
-
-
-
- Course announcements
-
-
- {course_announcements}
-
-
-
-
-
- }
-
-
-
-
-
-
-
- Course reviews
-
-
- {course_reviews}
-
-
-
-
-
-
-
)
- }
- };
-
return (
-
+
- {getPageTitle('Starter Page')}
+ {getPageTitle('Welcome to Course LMS')}
-
-
- {contentType === 'image' && contentPosition !== 'background'
- ? imageBlock(illustrationImage)
- : null}
- {contentType === 'video' && contentPosition !== 'background'
- ? videoBlock(illustrationVideo)
- : null}
- {page} ;
-};
-
+};
\ No newline at end of file
-
-
+
+
+ {/* Footer */}
+
);
}
-Starter.getLayout = function getLayout(page: ReactElement) {
+LandingPage.getLayout = function getLayout(page: ReactElement) {
return
-
+
-
- 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
+ {/* Hero Section */} +
+
-
+
-
-
+
+ Master New Skills with Our Expert-Led Courses +
++ Access high-quality education from anywhere in the world. Start your journey today with our comprehensive library of lessons. +
+
+
+
+ Get Started
+
+
+
+ Browse Courses
+
-
-
-
+ {/* Background Decorative Elements */}
+ © 2026 {title}. All rights reserved
- - Privacy Policy - -
+
+
+ {/* Features Section */}
+
+
+
+
+ Learn Faster
++ Everything you need to succeed +
+
+
+ -
+
- Structured Lessons +
-
+
Well-organized content that guides you step-by-step through complex topics.
+
+ - Expert Instructors +
-
+
Learn from industry professionals with years of real-world experience.
+
+ - Track Progress +
-
+
Keep track of your learning milestones and completed lessons easily.
+
+ - Certificates +
-
+
Earn recognition for your hard work upon course completion.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+