Compare commits
No commits in common. "ai-dev" and "master" have entirely different histories.
@ -1,12 +1,14 @@
|
|||||||
|
|
||||||
import React, { ReactElement, useEffect } from 'react';
|
import React, { ReactElement, useEffect } from 'react';
|
||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
|
import DatePicker from "react-datepicker";
|
||||||
|
import "react-datepicker/dist/react-datepicker.css";
|
||||||
import dayjs from "dayjs";
|
import dayjs from "dayjs";
|
||||||
import {useAppDispatch, useAppSelector} from "../../stores/hooks";
|
import {useAppDispatch, useAppSelector} from "../../stores/hooks";
|
||||||
import {useRouter} from "next/router";
|
import {useRouter} from "next/router";
|
||||||
import { fetch } from '../../stores/courses/coursesSlice'
|
import { fetch } from '../../stores/courses/coursesSlice'
|
||||||
import { fetch as fetchEnrollments, create as enrollInCourse } from '../../stores/enrollments/enrollmentsSlice'
|
import {saveFile} from "../../helpers/fileSaver";
|
||||||
import dataFormatter from '../../helpers/dataFormatter';
|
import dataFormatter from '../../helpers/dataFormatter';
|
||||||
|
import ImageField from "../../components/ImageField";
|
||||||
import LayoutAuthenticated from "../../layouts/Authenticated";
|
import LayoutAuthenticated from "../../layouts/Authenticated";
|
||||||
import {getPageTitle} from "../../config";
|
import {getPageTitle} from "../../config";
|
||||||
import SectionTitleLineWithButton from "../../components/SectionTitleLineWithButton";
|
import SectionTitleLineWithButton from "../../components/SectionTitleLineWithButton";
|
||||||
@ -14,235 +16,781 @@ import SectionMain from "../../components/SectionMain";
|
|||||||
import CardBox from "../../components/CardBox";
|
import CardBox from "../../components/CardBox";
|
||||||
import BaseButton from "../../components/BaseButton";
|
import BaseButton from "../../components/BaseButton";
|
||||||
import BaseDivider from "../../components/BaseDivider";
|
import BaseDivider from "../../components/BaseDivider";
|
||||||
import * as icon from "@mdi/js";
|
import {mdiChartTimelineVariant} from "@mdi/js";
|
||||||
import BaseIcon from "../../components/BaseIcon";
|
import {SwitchField} from "../../components/SwitchField";
|
||||||
|
import FormField from "../../components/FormField";
|
||||||
|
|
||||||
|
|
||||||
const CoursesView = () => {
|
const CoursesView = () => {
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const dispatch = useAppDispatch()
|
const dispatch = useAppDispatch()
|
||||||
const { courses } = useAppSelector((state) => state.courses)
|
const { courses } = useAppSelector((state) => state.courses)
|
||||||
const { currentUser } = useAppSelector((state) => state.auth)
|
|
||||||
const { enrollments } = useAppSelector((state) => state.enrollments)
|
|
||||||
|
|
||||||
const { id } = router.query;
|
const { id } = router.query;
|
||||||
|
|
||||||
|
function removeLastCharacter(str) {
|
||||||
|
console.log(str,`str`)
|
||||||
|
return str.slice(0, -1);
|
||||||
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (id) {
|
|
||||||
dispatch(fetch({ id }));
|
dispatch(fetch({ id }));
|
||||||
}
|
}, [dispatch, id]);
|
||||||
if (currentUser) {
|
|
||||||
dispatch(fetchEnrollments({ query: `?student=${currentUser.id}` }));
|
|
||||||
}
|
|
||||||
}, [dispatch, id, currentUser]);
|
|
||||||
|
|
||||||
const isEnrolled = Array.isArray(enrollments) && enrollments.some((e: any) => e.courseId === id);
|
|
||||||
const isLearner = currentUser?.app_role?.name === 'Learner';
|
|
||||||
|
|
||||||
const handleEnroll = async () => {
|
|
||||||
if (!id || !currentUser) return;
|
|
||||||
const data = {
|
|
||||||
course: id,
|
|
||||||
student: currentUser.id,
|
|
||||||
status: 'active',
|
|
||||||
enrolled_at: new Date().toISOString()
|
|
||||||
};
|
|
||||||
await dispatch(enrollInCourse(data));
|
|
||||||
dispatch(fetchEnrollments({ query: `?student=${currentUser.id}` }));
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Head>
|
<Head>
|
||||||
<title>{getPageTitle(courses?.title || 'View Course')}</title>
|
<title>{getPageTitle('View courses')}</title>
|
||||||
</Head>
|
</Head>
|
||||||
<SectionMain>
|
<SectionMain>
|
||||||
<SectionTitleLineWithButton
|
<SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View courses')} main>
|
||||||
icon={icon.mdiBookOpenVariant}
|
|
||||||
title={courses?.title || 'Course Details'}
|
|
||||||
main
|
|
||||||
>
|
|
||||||
<div className="flex gap-2">
|
|
||||||
{!isLearner && (
|
|
||||||
<BaseButton
|
<BaseButton
|
||||||
color='info'
|
color='info'
|
||||||
label='Edit Course'
|
label='Edit'
|
||||||
href={`/courses/courses-edit/?id=${id}`}
|
href={`/courses/courses-edit/?id=${id}`}
|
||||||
/>
|
/>
|
||||||
)}
|
|
||||||
<BaseButton
|
|
||||||
color='white'
|
|
||||||
label='Back to List'
|
|
||||||
onClick={() => router.push(isLearner ? '/dashboard' : '/courses/courses-list')}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</SectionTitleLineWithButton>
|
</SectionTitleLineWithButton>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
||||||
{/* Main Content */}
|
|
||||||
<div className="lg:col-span-2 space-y-6">
|
|
||||||
<CardBox>
|
<CardBox>
|
||||||
<div className="mb-6">
|
|
||||||
<h2 className="text-2xl font-bold mb-2 text-indigo-900 dark:text-indigo-100">{courses?.title}</h2>
|
|
||||||
<p className="text-xl text-gray-600 dark:text-gray-400 font-medium italic">{courses?.subtitle}</p>
|
|
||||||
|
<div className={'mb-4'}>
|
||||||
|
<p className={'block font-bold mb-2'}>Title</p>
|
||||||
|
<p>{courses?.title}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<BaseDivider />
|
|
||||||
|
|
||||||
<div className="prose dark:prose-invert max-w-none mt-6">
|
|
||||||
<h3 className="text-lg font-bold mb-3">About this course</h3>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div className={'mb-4'}>
|
||||||
|
<p className={'block font-bold mb-2'}>Subtitle</p>
|
||||||
|
<p>{courses?.subtitle}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div className={'mb-4'}>
|
||||||
|
<p className={'block font-bold mb-2'}>Description</p>
|
||||||
{courses.description
|
{courses.description
|
||||||
? <div className="text-gray-700 dark:text-gray-300 leading-relaxed" dangerouslySetInnerHTML={{__html: courses.description}}/>
|
? <p dangerouslySetInnerHTML={{__html: courses.description}}/>
|
||||||
: <p className="text-gray-500">No description available.</p>
|
: <p>No data</p>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-8 grid grid-cols-2 sm:grid-cols-4 gap-4">
|
|
||||||
<div className="bg-indigo-50 dark:bg-dark-800 p-3 rounded-lg text-center">
|
|
||||||
<BaseIcon path={icon.mdiChartLine} className="text-indigo-600 mx-auto mb-1" size={24} />
|
|
||||||
<p className="text-xs text-gray-500 uppercase">Level</p>
|
|
||||||
<p className="font-bold text-sm">{courses?.level || 'Beginner'}</p>
|
|
||||||
</div>
|
|
||||||
<div className="bg-indigo-50 dark:bg-dark-800 p-3 rounded-lg text-center">
|
|
||||||
<BaseIcon path={icon.mdiTranslate} className="text-indigo-600 mx-auto mb-1" size={24} />
|
|
||||||
<p className="text-xs text-gray-500 uppercase">Language</p>
|
|
||||||
<p className="font-bold text-sm">{courses?.language || 'English'}</p>
|
|
||||||
</div>
|
|
||||||
<div className="bg-indigo-50 dark:bg-dark-800 p-3 rounded-lg text-center">
|
|
||||||
<BaseIcon path={icon.mdiClockOutline} className="text-indigo-600 mx-auto mb-1" size={24} />
|
|
||||||
<p className="text-xs text-gray-500 uppercase">Duration</p>
|
|
||||||
<p className="font-bold text-sm">{courses?.estimated_duration_minutes || '0'} min</p>
|
|
||||||
</div>
|
|
||||||
<div className="bg-indigo-50 dark:bg-dark-800 p-3 rounded-lg text-center">
|
|
||||||
<BaseIcon path={icon.mdiCalendar} className="text-indigo-600 mx-auto mb-1" size={24} />
|
|
||||||
<p className="text-xs text-gray-500 uppercase">Published</p>
|
|
||||||
<p className="font-bold text-sm">{courses?.published_at ? dayjs(courses.published_at).format('MMM D, YYYY') : 'TBA'}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardBox>
|
|
||||||
|
|
||||||
{/* Lessons Section */}
|
|
||||||
<CardBox>
|
|
||||||
<h3 className="text-xl font-bold mb-4 flex items-center">
|
|
||||||
<BaseIcon path={icon.mdiPlayBoxMultiple} className="mr-2 text-indigo-600" size={24} />
|
|
||||||
Course Curriculum
|
|
||||||
</h3>
|
|
||||||
<div className="space-y-2">
|
|
||||||
{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) => (
|
|
||||||
<div
|
|
||||||
key={lesson.id}
|
|
||||||
className={`flex items-center p-4 rounded-lg border border-gray-100 dark:border-dark-700 hover:bg-gray-50 dark:hover:bg-dark-800 cursor-pointer transition-colors ${!isEnrolled && !lesson.is_preview ? 'opacity-60 grayscale' : ''}`}
|
|
||||||
onClick={() => (isEnrolled || lesson.is_preview) && router.push(`/lessons/lessons-view/?id=${lesson.id}`)}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div className={'mb-4'}>
|
||||||
|
<p className={'block font-bold mb-2'}>Thumbnail</p>
|
||||||
|
{courses?.thumbnail?.length
|
||||||
|
? (
|
||||||
|
<ImageField
|
||||||
|
name={'thumbnail'}
|
||||||
|
image={courses?.thumbnail}
|
||||||
|
className='w-20 h-20'
|
||||||
|
/>
|
||||||
|
) : <p>No Thumbnail</p>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div className={'mb-4'}>
|
||||||
|
<p className={'block font-bold mb-2'}>Status</p>
|
||||||
|
<p>{courses?.status ?? 'No data'}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div className={'mb-4'}>
|
||||||
|
<p className={'block font-bold mb-2'}>Level</p>
|
||||||
|
<p>{courses?.level ?? 'No data'}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div className={'mb-4'}>
|
||||||
|
<p className={'block font-bold mb-2'}>Category</p>
|
||||||
|
<p>{courses?.category}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div className={'mb-4'}>
|
||||||
|
<p className={'block font-bold mb-2'}>Language</p>
|
||||||
|
<p>{courses?.language}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div className={'mb-4'}>
|
||||||
|
<p className={'block font-bold mb-2'}>EstimatedDuration(Minutes)</p>
|
||||||
|
<p>{courses?.estimated_duration_minutes || 'No data'}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div className={'mb-4'}>
|
||||||
|
<p className={'block font-bold mb-2'}>Instructor</p>
|
||||||
|
|
||||||
|
|
||||||
|
<p>{courses?.instructor?.firstName ?? 'No data'}</p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<FormField label='PublishedAt'>
|
||||||
|
{courses.published_at ? <DatePicker
|
||||||
|
dateFormat="yyyy-MM-dd hh:mm"
|
||||||
|
showTimeSelect
|
||||||
|
selected={courses.published_at ?
|
||||||
|
new Date(
|
||||||
|
dayjs(courses.published_at).format('YYYY-MM-DD hh:mm'),
|
||||||
|
) : null
|
||||||
|
}
|
||||||
|
disabled
|
||||||
|
/> : <p>No PublishedAt</p>}
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<>
|
||||||
|
<p className={'block font-bold mb-2'}>Lessons Course</p>
|
||||||
|
<CardBox
|
||||||
|
className='mb-6 border border-gray-300 rounded overflow-hidden'
|
||||||
|
hasTable
|
||||||
>
|
>
|
||||||
<div className="w-8 h-8 rounded-full bg-indigo-100 dark:bg-dark-700 flex items-center justify-center mr-4 flex-shrink-0 text-indigo-600 font-bold">
|
<div className='overflow-x-auto'>
|
||||||
{idx + 1}
|
<table>
|
||||||
</div>
|
<thead>
|
||||||
<div className="flex-grow">
|
<tr>
|
||||||
<p className="font-semibold text-gray-900 dark:text-gray-100">{lesson.title}</p>
|
|
||||||
<p className="text-xs text-gray-500">{lesson.estimated_minutes || 0} minutes</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
{lesson.is_preview && !isEnrolled && (
|
<th>Title</th>
|
||||||
<span className="text-[10px] px-2 py-1 bg-amber-100 text-amber-700 rounded-full font-bold uppercase">Preview</span>
|
|
||||||
)}
|
|
||||||
<BaseIcon
|
|
||||||
path={(!isEnrolled && !lesson.is_preview) ? icon.mdiLock : icon.mdiPlayCircle}
|
|
||||||
className={(!isEnrolled && !lesson.is_preview) ? "text-gray-400" : "text-indigo-600"}
|
|
||||||
size={20}
|
|
||||||
/>
|
|
||||||
</div>
|
<th>VideoURL</th>
|
||||||
</div>
|
|
||||||
))
|
|
||||||
) : (
|
|
||||||
<p className="text-center py-8 text-gray-500">No lessons available for this course yet.</p>
|
<th>OrderIndex</th>
|
||||||
)}
|
|
||||||
|
|
||||||
|
|
||||||
|
<th>Status</th>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<th>IsPreview</th>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<th>EstimatedMinutes</th>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<th>PublishedAt</th>
|
||||||
|
|
||||||
|
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{courses.lessons_course && Array.isArray(courses.lessons_course) &&
|
||||||
|
courses.lessons_course.map((item: any) => (
|
||||||
|
<tr key={item.id} onClick={() => router.push(`/lessons/lessons-view/?id=${item.id}`)}>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<td data-label="title">
|
||||||
|
{ item.title }
|
||||||
|
</td>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<td data-label="video_url">
|
||||||
|
{ item.video_url }
|
||||||
|
</td>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<td data-label="order_index">
|
||||||
|
{ item.order_index }
|
||||||
|
</td>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<td data-label="status">
|
||||||
|
{ item.status }
|
||||||
|
</td>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<td data-label="is_preview">
|
||||||
|
{ dataFormatter.booleanFormatter(item.is_preview) }
|
||||||
|
</td>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<td data-label="estimated_minutes">
|
||||||
|
{ item.estimated_minutes }
|
||||||
|
</td>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<td data-label="published_at">
|
||||||
|
{ dataFormatter.dateTimeFormatter(item.published_at) }
|
||||||
|
</td>
|
||||||
|
|
||||||
|
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
{!courses?.lessons_course?.length && <div className={'text-center py-4'}>No data</div>}
|
||||||
</CardBox>
|
</CardBox>
|
||||||
</div>
|
</>
|
||||||
|
|
||||||
{/* Sidebar */}
|
|
||||||
<div className="space-y-6">
|
|
||||||
{/* Enrollment Card */}
|
|
||||||
<CardBox className="sticky top-20 border-2 border-indigo-600 shadow-xl overflow-hidden">
|
|
||||||
<div className="h-48 -mx-6 -mt-6 mb-6 bg-indigo-900 flex items-center justify-center relative">
|
|
||||||
{courses?.thumbnail && courses.thumbnail[0] ? (
|
|
||||||
<img src={courses.thumbnail[0].publicUrl} alt={courses.title} className="w-full h-full object-cover opacity-80" />
|
|
||||||
) : (
|
|
||||||
<BaseIcon path={icon.mdiSchool} size={80} className="text-white opacity-20" />
|
|
||||||
)}
|
|
||||||
<div className="absolute inset-0 bg-gradient-to-t from-indigo-900/80 to-transparent" />
|
|
||||||
<div className="absolute bottom-4 left-4 right-4">
|
|
||||||
<span className="text-white text-xs font-bold uppercase tracking-widest px-2 py-1 bg-indigo-500 rounded mb-2 inline-block">{courses?.category || 'Educational'}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{isEnrolled ? (
|
<>
|
||||||
<div className="space-y-4">
|
<p className={'block font-bold mb-2'}>Enrollments Course</p>
|
||||||
<div className="p-3 bg-green-50 text-green-700 rounded-lg flex items-center font-semibold text-sm">
|
<CardBox
|
||||||
<BaseIcon path={icon.mdiCheckCircle} className="mr-2" size={20} />
|
className='mb-6 border border-gray-300 rounded overflow-hidden'
|
||||||
You are enrolled!
|
hasTable
|
||||||
|
>
|
||||||
|
<div className='overflow-x-auto'>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<th>Status</th>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<th>EnrolledAt</th>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<th>CompletedAt</th>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<th>ProgressPercent</th>
|
||||||
|
|
||||||
|
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{courses.enrollments_course && Array.isArray(courses.enrollments_course) &&
|
||||||
|
courses.enrollments_course.map((item: any) => (
|
||||||
|
<tr key={item.id} onClick={() => router.push(`/enrollments/enrollments-view/?id=${item.id}`)}>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<td data-label="status">
|
||||||
|
{ item.status }
|
||||||
|
</td>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<td data-label="enrolled_at">
|
||||||
|
{ dataFormatter.dateTimeFormatter(item.enrolled_at) }
|
||||||
|
</td>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<td data-label="completed_at">
|
||||||
|
{ dataFormatter.dateTimeFormatter(item.completed_at) }
|
||||||
|
</td>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<td data-label="progress_percent">
|
||||||
|
{ item.progress_percent }
|
||||||
|
</td>
|
||||||
|
|
||||||
|
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<BaseButton
|
{!courses?.enrollments_course?.length && <div className={'text-center py-4'}>No data</div>}
|
||||||
label="Resume Learning"
|
</CardBox>
|
||||||
color="info"
|
</>
|
||||||
className="w-full h-12 text-lg font-bold"
|
|
||||||
onClick={() => {
|
|
||||||
if (courses.lessons_course?.length > 0) {
|
|
||||||
router.push(`/lessons/lessons-view/?id=${courses.lessons_course[0].id}`);
|
<>
|
||||||
}
|
<p className={'block font-bold mb-2'}>Course_announcements Course</p>
|
||||||
}}
|
<CardBox
|
||||||
/>
|
className='mb-6 border border-gray-300 rounded overflow-hidden'
|
||||||
|
hasTable
|
||||||
|
>
|
||||||
|
<div className='overflow-x-auto'>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<th>Title</th>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<th>PublishedAt</th>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<th>IsPublished</th>
|
||||||
|
|
||||||
|
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{courses.course_announcements_course && Array.isArray(courses.course_announcements_course) &&
|
||||||
|
courses.course_announcements_course.map((item: any) => (
|
||||||
|
<tr key={item.id} onClick={() => router.push(`/course_announcements/course_announcements-view/?id=${item.id}`)}>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<td data-label="title">
|
||||||
|
{ item.title }
|
||||||
|
</td>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<td data-label="published_at">
|
||||||
|
{ dataFormatter.dateTimeFormatter(item.published_at) }
|
||||||
|
</td>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<td data-label="is_published">
|
||||||
|
{ dataFormatter.booleanFormatter(item.is_published) }
|
||||||
|
</td>
|
||||||
|
|
||||||
|
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
{!courses?.course_announcements_course?.length && <div className={'text-center py-4'}>No data</div>}
|
||||||
<div className="space-y-4">
|
</CardBox>
|
||||||
<p className="text-center text-gray-600 dark:text-gray-400 text-sm">Ready to start your journey in <strong>{courses?.title}</strong>?</p>
|
</>
|
||||||
<BaseButton
|
|
||||||
label="Enroll Now"
|
|
||||||
color="info"
|
<>
|
||||||
className="w-full h-12 text-lg font-bold animate-pulse hover:animate-none"
|
<p className={'block font-bold mb-2'}>Course_reviews Course</p>
|
||||||
onClick={handleEnroll}
|
<CardBox
|
||||||
/>
|
className='mb-6 border border-gray-300 rounded overflow-hidden'
|
||||||
<p className="text-[10px] text-center text-gray-400">Join thousands of students learning this today!</p>
|
hasTable
|
||||||
|
>
|
||||||
|
<div className='overflow-x-auto'>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<th>Rating</th>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<th>Comment</th>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<th>ReviewedAt</th>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<th>IsPublished</th>
|
||||||
|
|
||||||
|
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{courses.course_reviews_course && Array.isArray(courses.course_reviews_course) &&
|
||||||
|
courses.course_reviews_course.map((item: any) => (
|
||||||
|
<tr key={item.id} onClick={() => router.push(`/course_reviews/course_reviews-view/?id=${item.id}`)}>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<td data-label="rating">
|
||||||
|
{ item.rating }
|
||||||
|
</td>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<td data-label="comment">
|
||||||
|
{ item.comment }
|
||||||
|
</td>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<td data-label="reviewed_at">
|
||||||
|
{ dataFormatter.dateTimeFormatter(item.reviewed_at) }
|
||||||
|
</td>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<td data-label="is_published">
|
||||||
|
{ dataFormatter.booleanFormatter(item.is_published) }
|
||||||
|
</td>
|
||||||
|
|
||||||
|
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
)}
|
{!courses?.course_reviews_course?.length && <div className={'text-center py-4'}>No data</div>}
|
||||||
|
</CardBox>
|
||||||
|
</>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<BaseDivider />
|
<BaseDivider />
|
||||||
|
|
||||||
<div className="space-y-3">
|
<BaseButton
|
||||||
<h4 className="font-bold text-sm uppercase text-gray-500">Course Highlights</h4>
|
color='info'
|
||||||
<ul className="text-sm space-y-2">
|
label='Back'
|
||||||
<li className="flex items-start">
|
onClick={() => router.push('/courses/courses-list')}
|
||||||
<BaseIcon path={icon.mdiCheck} size={16} className="text-green-500 mr-2 mt-1" />
|
/>
|
||||||
<span>Lifetime access</span>
|
|
||||||
</li>
|
|
||||||
<li className="flex items-start">
|
|
||||||
<BaseIcon path={icon.mdiCheck} size={16} className="text-green-500 mr-2 mt-1" />
|
|
||||||
<span>Self-paced learning</span>
|
|
||||||
</li>
|
|
||||||
<li className="flex items-start">
|
|
||||||
<BaseIcon path={icon.mdiCheck} size={16} className="text-green-500 mr-2 mt-1" />
|
|
||||||
<span>Mobile friendly</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</CardBox>
|
</CardBox>
|
||||||
|
|
||||||
{/* Instructor Info */}
|
|
||||||
<CardBox>
|
|
||||||
<h4 className="font-bold text-sm uppercase text-gray-500 mb-4 tracking-wider">Your Instructor</h4>
|
|
||||||
<div className="flex items-center">
|
|
||||||
<div className="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4 text-indigo-700 font-bold border-2 border-indigo-200">
|
|
||||||
{courses?.instructor?.firstName?.[0] || 'I'}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="font-bold text-gray-900 dark:text-gray-100">{courses?.instructor?.firstName} {courses?.instructor?.lastName || ''}</p>
|
|
||||||
<p className="text-xs text-gray-500">Expert Course Creator</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardBox>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</SectionMain>
|
</SectionMain>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
@ -250,7 +798,11 @@ const CoursesView = () => {
|
|||||||
|
|
||||||
CoursesView.getLayout = function getLayout(page: ReactElement) {
|
CoursesView.getLayout = function getLayout(page: ReactElement) {
|
||||||
return (
|
return (
|
||||||
<LayoutAuthenticated permission={'READ_COURSES'}>
|
<LayoutAuthenticated
|
||||||
|
|
||||||
|
permission={'READ_COURSES'}
|
||||||
|
|
||||||
|
>
|
||||||
{page}
|
{page}
|
||||||
</LayoutAuthenticated>
|
</LayoutAuthenticated>
|
||||||
)
|
)
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
import * as icon from '@mdi/js';
|
import * as icon from '@mdi/js';
|
||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
import React, { useEffect } from 'react'
|
import React from 'react'
|
||||||
|
import axios from 'axios';
|
||||||
import type { ReactElement } from 'react'
|
import type { ReactElement } from 'react'
|
||||||
import LayoutAuthenticated from '../layouts/Authenticated'
|
import LayoutAuthenticated from '../layouts/Authenticated'
|
||||||
import SectionMain from '../components/SectionMain'
|
import SectionMain from '../components/SectionMain'
|
||||||
@ -8,166 +9,398 @@ import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton
|
|||||||
import BaseIcon from "../components/BaseIcon";
|
import BaseIcon from "../components/BaseIcon";
|
||||||
import { getPageTitle } from '../config'
|
import { getPageTitle } from '../config'
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import BaseButton from '../components/BaseButton';
|
|
||||||
import CardBox from '../components/CardBox';
|
import { hasPermission } from "../helpers/userPermissions";
|
||||||
|
import { fetchWidgets } from '../stores/roles/rolesSlice';
|
||||||
|
import { WidgetCreator } from '../components/WidgetCreator/WidgetCreator';
|
||||||
|
import { SmartWidget } from '../components/SmartWidget/SmartWidget';
|
||||||
|
|
||||||
import { useAppDispatch, useAppSelector } from '../stores/hooks';
|
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 Dashboard = () => {
|
||||||
const dispatch = useAppDispatch();
|
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 { currentUser } = useAppSelector((state) => state.auth);
|
||||||
const { courses } = useAppSelector((state) => state.courses);
|
const { isFetchingQuery } = useAppSelector((state) => state.openAi);
|
||||||
const { enrollments } = useAppSelector((state) => state.enrollments);
|
|
||||||
|
|
||||||
useEffect(() => {
|
const { rolesWidgets, loading } = useAppSelector((state) => state.roles);
|
||||||
if (currentUser) {
|
|
||||||
dispatch(fetchCourses({ query: '' }));
|
|
||||||
dispatch(fetchEnrollments({ query: `?student=${currentUser.id}` }));
|
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 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}});
|
||||||
}
|
}
|
||||||
}, [currentUser, dispatch]);
|
|
||||||
|
|
||||||
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) => {
|
Promise.allSettled(requests).then((results) => {
|
||||||
return Array.isArray(enrollments) && enrollments.some((e: any) => e.courseId === courseId);
|
results.forEach((result, i) => {
|
||||||
};
|
if (result.status === 'fulfilled') {
|
||||||
|
fns[i](result.value.data.count);
|
||||||
const isLearner = currentUser?.app_role?.name === 'Learner';
|
} else {
|
||||||
|
fns[i](result.reason.message);
|
||||||
if (!isLearner) {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Head><title>{getPageTitle('Overview')}</title></Head>
|
|
||||||
<SectionMain>
|
|
||||||
<SectionTitleLineWithButton icon={icon.mdiChartTimelineVariant} title='Dashboard' main />
|
|
||||||
<div className='grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6'>
|
|
||||||
<Link href='/courses/courses-list'>
|
|
||||||
<CardBox className="cursor-pointer hover:shadow-lg transition-shadow">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<p className="text-gray-500">Total Courses</p>
|
|
||||||
<p className="text-3xl font-bold">{courses.length || 0}</p>
|
|
||||||
</div>
|
|
||||||
<BaseIcon path={icon.mdiBookOpenVariant} size={48} className="text-indigo-600" />
|
|
||||||
</div>
|
|
||||||
</CardBox>
|
|
||||||
</Link>
|
|
||||||
<Link href='/users/users-list'>
|
|
||||||
<CardBox className="cursor-pointer hover:shadow-lg transition-shadow">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<p className="text-gray-500">Total Users</p>
|
|
||||||
<p className="text-3xl font-bold">...</p>
|
|
||||||
</div>
|
|
||||||
<BaseIcon path={icon.mdiAccountGroup} size={48} className="text-blue-600" />
|
|
||||||
</div>
|
|
||||||
</CardBox>
|
|
||||||
</Link>
|
|
||||||
<Link href='/enrollments/enrollments-list'>
|
|
||||||
<CardBox className="cursor-pointer hover:shadow-lg transition-shadow">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<p className="text-gray-500">Total Enrollments</p>
|
|
||||||
<p className="text-3xl font-bold">...</p>
|
|
||||||
</div>
|
|
||||||
<BaseIcon path={icon.mdiSchool} size={48} className="text-green-600" />
|
|
||||||
</div>
|
|
||||||
</CardBox>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</SectionMain>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<Head><title>{getPageTitle('Student Dashboard')}</title></Head>
|
<Head>
|
||||||
|
<title>
|
||||||
|
{getPageTitle('Overview')}
|
||||||
|
</title>
|
||||||
|
</Head>
|
||||||
<SectionMain>
|
<SectionMain>
|
||||||
<SectionTitleLineWithButton icon={icon.mdiSchool} title={`Welcome back, ${currentUser?.firstName}!`} main />
|
<SectionTitleLineWithButton
|
||||||
|
icon={icon.mdiChartTimelineVariant}
|
||||||
|
title='Overview'
|
||||||
|
main>
|
||||||
|
{''}
|
||||||
|
</SectionTitleLineWithButton>
|
||||||
|
|
||||||
<h2 className="text-2xl font-bold mb-6 mt-8">Your Enrolled Courses</h2>
|
{hasPermission(currentUser, 'CREATE_ROLES') && <WidgetCreator
|
||||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 mb-12">
|
currentUser={currentUser}
|
||||||
{Array.isArray(enrollments) && enrollments.length > 0 ? (
|
isFetchingQuery={isFetchingQuery}
|
||||||
enrollments.map((enrollment: any) => (
|
setWidgetsRole={setWidgetsRole}
|
||||||
<CardBox key={enrollment.id} className="flex flex-col h-full border-t-4 border-indigo-500">
|
widgetsRole={widgetsRole}
|
||||||
<div className="flex-grow">
|
/>}
|
||||||
<h3 className="text-xl font-bold mb-2">{enrollment.course?.title}</h3>
|
{!!rolesWidgets.length &&
|
||||||
<p className="text-gray-600 dark:text-gray-400 line-clamp-2 mb-4">{enrollment.course?.subtitle}</p>
|
hasPermission(currentUser, 'CREATE_ROLES') && (
|
||||||
<div className="flex items-center text-sm text-gray-500 mb-4">
|
<p className=' text-gray-500 dark:text-gray-400 mb-4'>
|
||||||
<BaseIcon path={icon.mdiProgressClock} size={18} className="mr-2 text-amber-500" />
|
{`${widgetsRole?.role?.label || 'Users'}'s widgets`}
|
||||||
<span>Status: {enrollment.status}</span>
|
</p>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<BaseButton
|
|
||||||
label="Continue Learning"
|
|
||||||
color="info"
|
|
||||||
href={`/courses/courses-view/?id=${enrollment.courseId}`}
|
|
||||||
className="w-full"
|
|
||||||
/>
|
|
||||||
</CardBox>
|
|
||||||
))
|
|
||||||
) : (
|
|
||||||
<CardBox className="col-span-full py-12 text-center border-dashed border-2 border-gray-300">
|
|
||||||
<BaseIcon path={icon.mdiBookOpenVariant} size={64} className="mx-auto text-gray-300 mb-4" />
|
|
||||||
<p className="text-xl text-gray-500">You haven't enrolled in any courses yet.</p>
|
|
||||||
<p className="text-gray-400">Browse available courses below to get started!</p>
|
|
||||||
</CardBox>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr className="my-12 border-gray-200 dark:border-dark-700" />
|
<div className='grid grid-cols-1 gap-6 lg:grid-cols-4 mb-6 grid-flow-dense'>
|
||||||
|
{(isFetchingQuery || loading) && (
|
||||||
|
<div className={` ${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 text-lg leading-tight text-gray-500 flex items-center ${cardsStyle} dark:border-dark-700 p-6`}>
|
||||||
|
<BaseIcon
|
||||||
|
className={`${iconsColor} animate-spin mr-5`}
|
||||||
|
w='w-16'
|
||||||
|
h='h-16'
|
||||||
|
size={48}
|
||||||
|
path={icon.mdiLoading}
|
||||||
|
/>{' '}
|
||||||
|
Loading widgets...
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
<h2 className="text-2xl font-bold mb-6">Explore Courses</h2>
|
{ rolesWidgets &&
|
||||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
rolesWidgets.map((widget) => (
|
||||||
{Array.isArray(courses) && courses.map((course: any) => (
|
<SmartWidget
|
||||||
<CardBox key={course.id} className="flex flex-col h-full hover:shadow-md transition-shadow">
|
key={widget.id}
|
||||||
<div className="flex-grow">
|
userId={currentUser?.id}
|
||||||
<div className="h-40 bg-indigo-50 dark:bg-dark-800 rounded-lg mb-4 flex items-center justify-center overflow-hidden">
|
widget={widget}
|
||||||
{course.thumbnail && course.thumbnail[0] ? (
|
roleId={widgetsRole?.role?.value || ''}
|
||||||
<img src={course.thumbnail[0]?.publicUrl} alt={course.title} className="w-full h-full object-cover" />
|
admin={hasPermission(currentUser, 'CREATE_ROLES')}
|
||||||
) : (
|
|
||||||
<BaseIcon path={icon.mdiBookOpenVariant} size={48} className="text-indigo-200" />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<h3 className="text-lg font-bold mb-1 line-clamp-1">{course.title}</h3>
|
|
||||||
<p className="text-xs text-indigo-600 font-semibold uppercase tracking-wider mb-2">{course.category}</p>
|
|
||||||
<p className="text-gray-600 dark:text-gray-400 text-sm line-clamp-3 mb-4">{course.description?.replace(/<[^>]*>?/gm, '')}</p>
|
|
||||||
</div>
|
|
||||||
<div className="mt-4">
|
|
||||||
{isEnrolled(course.id) ? (
|
|
||||||
<BaseButton
|
|
||||||
label="Enrolled"
|
|
||||||
color="white"
|
|
||||||
className="w-full cursor-default opacity-70 border-gray-300"
|
|
||||||
disabled
|
|
||||||
/>
|
/>
|
||||||
) : (
|
|
||||||
<BaseButton
|
|
||||||
label="Enroll Now"
|
|
||||||
color="info"
|
|
||||||
onClick={() => handleEnroll(course.id)}
|
|
||||||
className="w-full bg-indigo-600 hover:bg-indigo-700 border-none"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</CardBox>
|
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{!!rolesWidgets.length && <hr className='my-6 ' />}
|
||||||
|
|
||||||
|
<div id="dashboard" className='grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6'>
|
||||||
|
|
||||||
|
|
||||||
|
{hasPermission(currentUser, 'READ_USERS') && <Link href={'/users/users-list'}>
|
||||||
|
<div
|
||||||
|
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
||||||
|
>
|
||||||
|
<div className="flex justify-between align-center">
|
||||||
|
<div>
|
||||||
|
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||||
|
Users
|
||||||
|
</div>
|
||||||
|
<div className="text-3xl leading-tight font-semibold">
|
||||||
|
{users}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<BaseIcon
|
||||||
|
className={`${iconsColor}`}
|
||||||
|
w="w-16"
|
||||||
|
h="h-16"
|
||||||
|
size={48}
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
// @ts-ignore
|
||||||
|
path={icon.mdiAccountGroup || icon.mdiTable}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>}
|
||||||
|
|
||||||
|
{hasPermission(currentUser, 'READ_ROLES') && <Link href={'/roles/roles-list'}>
|
||||||
|
<div
|
||||||
|
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
||||||
|
>
|
||||||
|
<div className="flex justify-between align-center">
|
||||||
|
<div>
|
||||||
|
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||||
|
Roles
|
||||||
|
</div>
|
||||||
|
<div className="text-3xl leading-tight font-semibold">
|
||||||
|
{roles}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<BaseIcon
|
||||||
|
className={`${iconsColor}`}
|
||||||
|
w="w-16"
|
||||||
|
h="h-16"
|
||||||
|
size={48}
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
// @ts-ignore
|
||||||
|
path={icon.mdiShieldAccountVariantOutline || icon.mdiTable}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>}
|
||||||
|
|
||||||
|
{hasPermission(currentUser, 'READ_PERMISSIONS') && <Link href={'/permissions/permissions-list'}>
|
||||||
|
<div
|
||||||
|
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
||||||
|
>
|
||||||
|
<div className="flex justify-between align-center">
|
||||||
|
<div>
|
||||||
|
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||||
|
Permissions
|
||||||
|
</div>
|
||||||
|
<div className="text-3xl leading-tight font-semibold">
|
||||||
|
{permissions}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<BaseIcon
|
||||||
|
className={`${iconsColor}`}
|
||||||
|
w="w-16"
|
||||||
|
h="h-16"
|
||||||
|
size={48}
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
// @ts-ignore
|
||||||
|
path={icon.mdiShieldAccountOutline || icon.mdiTable}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>}
|
||||||
|
|
||||||
|
{hasPermission(currentUser, 'READ_COURSES') && <Link href={'/courses/courses-list'}>
|
||||||
|
<div
|
||||||
|
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
||||||
|
>
|
||||||
|
<div className="flex justify-between align-center">
|
||||||
|
<div>
|
||||||
|
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||||
|
Courses
|
||||||
|
</div>
|
||||||
|
<div className="text-3xl leading-tight font-semibold">
|
||||||
|
{courses}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<BaseIcon
|
||||||
|
className={`${iconsColor}`}
|
||||||
|
w="w-16"
|
||||||
|
h="h-16"
|
||||||
|
size={48}
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
// @ts-ignore
|
||||||
|
path={'mdiBookOpenPageVariant' in icon ? icon['mdiBookOpenPageVariant' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>}
|
||||||
|
|
||||||
|
{hasPermission(currentUser, 'READ_LESSONS') && <Link href={'/lessons/lessons-list'}>
|
||||||
|
<div
|
||||||
|
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
||||||
|
>
|
||||||
|
<div className="flex justify-between align-center">
|
||||||
|
<div>
|
||||||
|
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||||
|
Lessons
|
||||||
|
</div>
|
||||||
|
<div className="text-3xl leading-tight font-semibold">
|
||||||
|
{lessons}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<BaseIcon
|
||||||
|
className={`${iconsColor}`}
|
||||||
|
w="w-16"
|
||||||
|
h="h-16"
|
||||||
|
size={48}
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
// @ts-ignore
|
||||||
|
path={'mdiPlayBoxMultiple' in icon ? icon['mdiPlayBoxMultiple' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>}
|
||||||
|
|
||||||
|
{hasPermission(currentUser, 'READ_ENROLLMENTS') && <Link href={'/enrollments/enrollments-list'}>
|
||||||
|
<div
|
||||||
|
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
||||||
|
>
|
||||||
|
<div className="flex justify-between align-center">
|
||||||
|
<div>
|
||||||
|
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||||
|
Enrollments
|
||||||
|
</div>
|
||||||
|
<div className="text-3xl leading-tight font-semibold">
|
||||||
|
{enrollments}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<BaseIcon
|
||||||
|
className={`${iconsColor}`}
|
||||||
|
w="w-16"
|
||||||
|
h="h-16"
|
||||||
|
size={48}
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
// @ts-ignore
|
||||||
|
path={'mdiSchool' in icon ? icon['mdiSchool' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>}
|
||||||
|
|
||||||
|
{hasPermission(currentUser, 'READ_LESSON_PROGRESS') && <Link href={'/lesson_progress/lesson_progress-list'}>
|
||||||
|
<div
|
||||||
|
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
||||||
|
>
|
||||||
|
<div className="flex justify-between align-center">
|
||||||
|
<div>
|
||||||
|
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||||
|
Lesson progress
|
||||||
|
</div>
|
||||||
|
<div className="text-3xl leading-tight font-semibold">
|
||||||
|
{lesson_progress}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<BaseIcon
|
||||||
|
className={`${iconsColor}`}
|
||||||
|
w="w-16"
|
||||||
|
h="h-16"
|
||||||
|
size={48}
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
// @ts-ignore
|
||||||
|
path={'mdiProgressCheck' in icon ? icon['mdiProgressCheck' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>}
|
||||||
|
|
||||||
|
{hasPermission(currentUser, 'READ_COURSE_ANNOUNCEMENTS') && <Link href={'/course_announcements/course_announcements-list'}>
|
||||||
|
<div
|
||||||
|
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
||||||
|
>
|
||||||
|
<div className="flex justify-between align-center">
|
||||||
|
<div>
|
||||||
|
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||||
|
Course announcements
|
||||||
|
</div>
|
||||||
|
<div className="text-3xl leading-tight font-semibold">
|
||||||
|
{course_announcements}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<BaseIcon
|
||||||
|
className={`${iconsColor}`}
|
||||||
|
w="w-16"
|
||||||
|
h="h-16"
|
||||||
|
size={48}
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
// @ts-ignore
|
||||||
|
path={'mdiBullhorn' in icon ? icon['mdiBullhorn' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>}
|
||||||
|
|
||||||
|
{hasPermission(currentUser, 'READ_COURSE_REVIEWS') && <Link href={'/course_reviews/course_reviews-list'}>
|
||||||
|
<div
|
||||||
|
className={`${corners !== 'rounded-full'? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
|
||||||
|
>
|
||||||
|
<div className="flex justify-between align-center">
|
||||||
|
<div>
|
||||||
|
<div className="text-lg leading-tight text-gray-500 dark:text-gray-400">
|
||||||
|
Course reviews
|
||||||
|
</div>
|
||||||
|
<div className="text-3xl leading-tight font-semibold">
|
||||||
|
{course_reviews}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<BaseIcon
|
||||||
|
className={`${iconsColor}`}
|
||||||
|
w="w-16"
|
||||||
|
h="h-16"
|
||||||
|
size={48}
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
// @ts-ignore
|
||||||
|
path={'mdiStarCircle' in icon ? icon['mdiStarCircle' as keyof typeof icon] : icon.mdiTable || icon.mdiTable}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>}
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
</SectionMain>
|
</SectionMain>
|
||||||
</>
|
</>
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
Dashboard.getLayout = function getLayout(page: ReactElement) {
|
Dashboard.getLayout = function getLayout(page: ReactElement) {
|
||||||
|
|||||||
@ -1,127 +1,166 @@
|
|||||||
|
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import type { ReactElement } from 'react';
|
import type { ReactElement } from 'react';
|
||||||
import Head from 'next/head';
|
import Head from 'next/head';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import BaseButton from '../components/BaseButton';
|
import BaseButton from '../components/BaseButton';
|
||||||
|
import CardBox from '../components/CardBox';
|
||||||
import SectionFullScreen from '../components/SectionFullScreen';
|
import SectionFullScreen from '../components/SectionFullScreen';
|
||||||
import LayoutGuest from '../layouts/Guest';
|
import LayoutGuest from '../layouts/Guest';
|
||||||
|
import BaseDivider from '../components/BaseDivider';
|
||||||
|
import BaseButtons from '../components/BaseButtons';
|
||||||
import { getPageTitle } from '../config';
|
import { getPageTitle } from '../config';
|
||||||
import { useAppSelector } from '../stores/hooks';
|
import { useAppSelector } from '../stores/hooks';
|
||||||
import { mdiSchool, mdiBookOpenVariant, mdiAccountGroup, mdiCheckDecagram } from '@mdi/js';
|
import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
|
||||||
import BaseIcon from '../components/BaseIcon';
|
import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
|
||||||
|
|
||||||
export default function LandingPage() {
|
|
||||||
|
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');
|
||||||
const textColor = useAppSelector((state) => state.style.linkColor);
|
const textColor = useAppSelector((state) => state.style.linkColor);
|
||||||
|
|
||||||
const title = 'Course LMS'
|
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) => (
|
||||||
|
<div
|
||||||
|
className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
|
||||||
|
style={{
|
||||||
|
backgroundImage: `${
|
||||||
|
image
|
||||||
|
? `url(${image?.src?.original})`
|
||||||
|
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
|
||||||
|
}`,
|
||||||
|
backgroundSize: 'cover',
|
||||||
|
backgroundPosition: 'left center',
|
||||||
|
backgroundRepeat: 'no-repeat',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className='flex justify-center w-full bg-blue-300/20'>
|
||||||
|
<a
|
||||||
|
className='text-[8px]'
|
||||||
|
href={image?.photographer_url}
|
||||||
|
target='_blank'
|
||||||
|
rel='noreferrer'
|
||||||
|
>
|
||||||
|
Photo by {image?.photographer} on Pexels
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const videoBlock = (video) => {
|
||||||
|
if (video?.video_files?.length > 0) {
|
||||||
return (
|
return (
|
||||||
<div className="bg-white dark:bg-dark-900">
|
<div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
|
||||||
|
<video
|
||||||
|
className='absolute top-0 left-0 w-full h-full object-cover'
|
||||||
|
autoPlay
|
||||||
|
loop
|
||||||
|
muted
|
||||||
|
>
|
||||||
|
<source src={video?.video_files[0]?.link} type='video/mp4'/>
|
||||||
|
Your browser does not support the video tag.
|
||||||
|
</video>
|
||||||
|
<div className='flex justify-center w-full bg-blue-300/20 z-10'>
|
||||||
|
<a
|
||||||
|
className='text-[8px]'
|
||||||
|
href={video?.user?.url}
|
||||||
|
target='_blank'
|
||||||
|
rel='noreferrer'
|
||||||
|
>
|
||||||
|
Video by {video.user.name} on Pexels
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={
|
||||||
|
contentPosition === 'background'
|
||||||
|
? {
|
||||||
|
backgroundImage: `${
|
||||||
|
illustrationImage
|
||||||
|
? `url(${illustrationImage.src?.original})`
|
||||||
|
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
|
||||||
|
}`,
|
||||||
|
backgroundSize: 'cover',
|
||||||
|
backgroundPosition: 'left center',
|
||||||
|
backgroundRepeat: 'no-repeat',
|
||||||
|
}
|
||||||
|
: {}
|
||||||
|
}
|
||||||
|
>
|
||||||
<Head>
|
<Head>
|
||||||
<title>{getPageTitle('Welcome to Course LMS')}</title>
|
<title>{getPageTitle('Starter Page')}</title>
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
{/* Hero Section */}
|
<SectionFullScreen bg='violet'>
|
||||||
<section className="relative overflow-hidden bg-indigo-900 py-24 sm:py-32">
|
<div
|
||||||
<div className="mx-auto max-w-7xl px-6 lg:px-8 relative z-10">
|
className={`flex ${
|
||||||
<div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-xl">
|
contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
|
||||||
<h1 className="text-4xl font-bold tracking-tight text-white sm:text-6xl">
|
} min-h-screen w-full`}
|
||||||
Master New Skills with Our Expert-Led Courses
|
>
|
||||||
</h1>
|
{contentType === 'image' && contentPosition !== 'background'
|
||||||
<p className="mt-6 text-lg leading-8 text-indigo-100">
|
? imageBlock(illustrationImage)
|
||||||
Access high-quality education from anywhere in the world. Start your journey today with our comprehensive library of lessons.
|
: null}
|
||||||
</p>
|
{contentType === 'video' && contentPosition !== 'background'
|
||||||
<div className="mt-10 flex items-center gap-x-6">
|
? videoBlock(illustrationVideo)
|
||||||
<Link href="/login">
|
: null}
|
||||||
<span className="rounded-md bg-indigo-500 px-6 py-3 text-lg font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400 cursor-pointer">
|
<div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
|
||||||
Get Started
|
<CardBox className='w-full md:w-3/5 lg:w-2/3'>
|
||||||
</span>
|
<CardBoxComponentTitle title="Welcome to your Course LMS app!"/>
|
||||||
</Link>
|
|
||||||
<Link href="/login" className="text-sm font-semibold leading-6 text-white cursor-pointer">
|
|
||||||
Browse Courses <span aria-hidden="true">→</span>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/* Background Decorative Elements */}
|
|
||||||
<div className="absolute inset-y-0 right-0 hidden lg:block w-1/2 opacity-20 translate-x-1/4">
|
|
||||||
<BaseIcon path={mdiSchool} size={600} className="text-white" />
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Features Section */}
|
<div className="space-y-3">
|
||||||
<section className="py-24 bg-gray-50 dark:bg-dark-800">
|
<p className='text-center text-gray-500'>This is a React.js/Node.js app generated by the <a className={`${textColor}`} href="https://flatlogic.com/generator">Flatlogic Web App Generator</a></p>
|
||||||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
<p className='text-center text-gray-500'>For guides and documentation please check
|
||||||
<div className="mx-auto max-w-2xl lg:text-center">
|
your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
|
||||||
<h2 className="text-base font-semibold leading-7 text-indigo-600">Learn Faster</h2>
|
|
||||||
<p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
|
|
||||||
Everything you need to succeed
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
|
|
||||||
<dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-4">
|
|
||||||
<div className="flex flex-col items-center text-center">
|
|
||||||
<div className="mb-6 flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-600">
|
|
||||||
<BaseIcon path={mdiBookOpenVariant} size={24} className="text-white" />
|
|
||||||
</div>
|
|
||||||
<dt className="text-base font-semibold leading-7 text-gray-900 dark:text-white">Structured Lessons</dt>
|
|
||||||
<dd className="mt-1 flex flex-auto flex-col text-base leading-7 text-gray-600 dark:text-gray-400">
|
|
||||||
<p>Well-organized content that guides you step-by-step through complex topics.</p>
|
|
||||||
</dd>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col items-center text-center">
|
|
||||||
<div className="mb-6 flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-600">
|
|
||||||
<BaseIcon path={mdiAccountGroup} size={24} className="text-white" />
|
|
||||||
</div>
|
|
||||||
<dt className="text-base font-semibold leading-7 text-gray-900 dark:text-white">Expert Instructors</dt>
|
|
||||||
<dd className="mt-1 flex flex-auto flex-col text-base leading-7 text-gray-600 dark:text-gray-400">
|
|
||||||
<p>Learn from industry professionals with years of real-world experience.</p>
|
|
||||||
</dd>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col items-center text-center">
|
|
||||||
<div className="mb-6 flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-600">
|
|
||||||
<BaseIcon path={mdiCheckDecagram} size={24} className="text-white" />
|
|
||||||
</div>
|
|
||||||
<dt className="text-base font-semibold leading-7 text-gray-900 dark:text-white">Track Progress</dt>
|
|
||||||
<dd className="mt-1 flex flex-auto flex-col text-base leading-7 text-gray-600 dark:text-gray-400">
|
|
||||||
<p>Keep track of your learning milestones and completed lessons easily.</p>
|
|
||||||
</dd>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col items-center text-center">
|
|
||||||
<div className="mb-6 flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-600">
|
|
||||||
<BaseIcon path={mdiSchool} size={24} className="text-white" />
|
|
||||||
</div>
|
|
||||||
<dt className="text-base font-semibold leading-7 text-gray-900 dark:text-white">Certificates</dt>
|
|
||||||
<dd className="mt-1 flex flex-auto flex-col text-base leading-7 text-gray-600 dark:text-gray-400">
|
|
||||||
<p>Earn recognition for your hard work upon course completion.</p>
|
|
||||||
</dd>
|
|
||||||
</div>
|
|
||||||
</dl>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Footer */}
|
<BaseButtons>
|
||||||
<footer className="bg-white dark:bg-dark-900 border-t border-gray-200 dark:border-dark-800">
|
<BaseButton
|
||||||
<div className="mx-auto max-w-7xl px-6 py-12 md:flex md:items-center md:justify-between lg:px-8">
|
href='/login'
|
||||||
<div className="flex justify-center space-x-6 md:order-2">
|
label='Login'
|
||||||
<Link href="/privacy-policy" className="text-gray-400 hover:text-gray-500">
|
color='info'
|
||||||
|
className='w-full'
|
||||||
|
/>
|
||||||
|
|
||||||
|
</BaseButtons>
|
||||||
|
</CardBox>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</SectionFullScreen>
|
||||||
|
<div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
|
||||||
|
<p className='py-6 text-sm'>© 2026 <span>{title}</span>. All rights reserved</p>
|
||||||
|
<Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
|
||||||
Privacy Policy
|
Privacy Policy
|
||||||
</Link>
|
</Link>
|
||||||
<Link href="/terms-of-use" className="text-gray-400 hover:text-gray-500">
|
|
||||||
Terms of Use
|
|
||||||
</Link>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-8 md:order-1 md:mt-0">
|
|
||||||
<p className="text-center text-xs leading-5 text-gray-500">
|
|
||||||
© 2026 {title}. All rights reserved. Built with Flatlogic.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
LandingPage.getLayout = function getLayout(page: ReactElement) {
|
Starter.getLayout = function getLayout(page: ReactElement) {
|
||||||
return <LayoutGuest>{page}</LayoutGuest>;
|
return <LayoutGuest>{page}</LayoutGuest>;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user