Nurfog/openccb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement AI-driven lesson summaries, automate quiz generation, add gamification base, and introduce Studio organization management.

Browse Source
This commit is contained in:
Juan Enrique Allende Cifuentes
2025-12-26 14:58:58 -03:00
parent 2378f616aa
commit e98a16d860
26 changed files with 791 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/experience/src/app/auth/register/page.tsx
+1 -1
View File
@@ -110,7 +110,7 @@ export default function RegisterPage() {
className="w-full bg-white/5 border border-white/10 rounded-xl py-4 pl-12 pr-4 text-sm text-white focus:outline-none focus:border-blue-500 transition-all"
/>
</div>
<p className="text-[10px] text-gray-600 px-1">If blank, we'll use your email domain.</p>
<p className="text-[10px] text-gray-600 px-1">If blank, we&apos;ll use your email domain.</p>
</div>
<button
web/experience/src/app/courses/[id]/lessons/[lessonId]/page.tsx
+14 -3
View File
@@ -1,7 +1,7 @@
"use client";
import { useEffect, useState } from "react";
import { lmsApi, Lesson, Course, Module } from "@/lib/api";
import { lmsApi, Lesson, Course, Module, UserGrade } from "@/lib/api";
import Link from "next/link";
import { ChevronLeft, ChevronRight, Menu, CheckCircle2 } from "lucide-react";
import { useAuth } from "@/context/AuthContext";
@@ -19,7 +19,7 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
const [course, setCourse] = useState<(Course & { modules: Module[] }) | null>(null);
const [loading, setLoading] = useState(true);
const [sidebarOpen, setSidebarOpen] = useState(true);
const [userGrade, setUserGrade] = useState<any | null>(null);
const [userGrade, setUserGrade] = useState<UserGrade | null>(null);
const { user } = useAuth();
useEffect(() => {
@@ -34,7 +34,7 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
if (user) {
const grades = await lmsApi.getUserGrades(user.id, params.id);
const currentGrade = grades.find((g: any) => g.lesson_id === params.lessonId);
const currentGrade = grades.find((g: UserGrade) => g.lesson_id === params.lessonId);
setUserGrade(currentGrade || null);
}
} catch (err) {
@@ -107,6 +107,17 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
<h1 className="text-4xl font-black tracking-tighter text-white">{lesson.title}</h1>
</div>
{lesson.summary && (
<div className="p-8 rounded-3xl bg-gradient-to-br from-blue-500/10 to-indigo-500/10 border border-blue-500/20 animate-in fade-in slide-in-from-top-4 duration-1000">
<h3 className="text-[10px] font-black uppercase tracking-[0.3em] text-blue-400 mb-4 flex items-center gap-2">
<span className="text-base">✨</span> Summary
</h3>
<p className="text-lg text-gray-300 leading-relaxed font-medium italic">
&quot;{lesson.summary}&quot;
</p>
</div>
)}
{/* Render Blocks */}
{(lesson.metadata?.blocks || []).length > 0 ? (
<div className="space-y-24">
web/experience/src/app/page.tsx
+38
View File
@@ -11,6 +11,7 @@ export default function CatalogPage() {
const [courses, setCourses] = useState<Course[]>([]);
const [enrollments, setEnrollments] = useState<string[]>([]);
const [loading, setLoading] = useState(true);
const [gamification, setGamification] = useState<{ points: number, badges: any[] } | null>(null);
const { user } = useAuth();
const router = useRouter();
@@ -24,6 +25,9 @@ export default function CatalogPage() {
if (user) {
const enrollmentData = await lmsApi.getEnrollments(user.id);
setEnrollments(enrollmentData.map(e => e.course_id));
const gamificationData = await lmsApi.getGamification(user.id);
setGamification(gamificationData);
}
} catch (err) {
console.error(err);
@@ -82,6 +86,40 @@ export default function CatalogPage() {
)}
</div>
{user && gamification && (
<div className="mb-16 grid grid-cols-1 md:grid-cols-3 gap-6 animate-in fade-in slide-in-from-top-6 duration-700">
<div className="md:col-span-1 glass-card p-8 bg-gradient-to-br from-blue-600/20 to-indigo-700/20 border-blue-500/20 flex flex-col items-center justify-center text-center rounded-3xl">
<div className="w-16 h-16 rounded-full bg-blue-500/10 flex items-center justify-center mb-4 border border-blue-500/20">
<Star className="text-blue-400 fill-blue-400/20" size={32} />
</div>
<div className="text-4xl font-black text-white mb-1">{gamification.points}</div>
<div className="text-[10px] font-black uppercase tracking-[0.2em] text-blue-400">Total Experience Points</div>
</div>
<div className="md:col-span-2 glass-card p-8 bg-white/[0.01] border-white/5 rounded-3xl overflow-hidden relative">
<h3 className="text-xs font-black uppercase tracking-widest text-gray-500 mb-6 flex items-center gap-2">
<CheckCircle2 size={14} /> My Badges
</h3>
<div className="flex flex-wrap gap-4">
{gamification.badges.length === 0 ? (
<p className="text-sm text-gray-600 italic">No badges earned yet. Start learning to unlock achievements!</p>
) : (
gamification.badges.map(badge => (
<div key={badge.id} className="group/badge relative">
<div className="w-12 h-12 rounded-xl bg-gradient-to-tr from-amber-400/20 to-orange-500/20 border border-amber-500/30 flex items-center justify-center shadow-lg transition-transform hover:scale-110 cursor-help" title={badge.description}>
<span className="text-xl">🏆</span>
</div>
<div className="absolute -bottom-1 -right-1 w-4 h-4 bg-green-500 rounded-full border-2 border-black flex items-center justify-center text-[8px] font-bold">✓</div>
</div>
))
)}
</div>
{/* Visual Flair */}
<div className="absolute -bottom-10 -right-10 w-40 h-40 bg-blue-500/5 blur-[80px] rounded-full"></div>
</div>
</div>
)}
{courses.length === 0 ? (
<div className="py-20 text-center glass-card border-dashed border-white/10 rounded-3xl bg-white/[0.01]">
<p className="text-gray-500 font-bold uppercase tracking-widest">No courses published yet.</p>