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

2025-12-26 14:58:58 -03:00
parent 2378f616aa
commit e98a16d860
26 changed files with 791 additions and 82 deletions
@@ -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
@@ -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">
@@ -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>
@@ -10,6 +10,14 @@ export interface Course {
    created_at: string;
 }

+export interface QuizQuestion {
+    id: string;
+    question: string;
+    options: string[];
+    correct: number[];
+    type?: 'multiple-choice' | 'true-false' | 'multiple-select';
+}
+
 export interface Block {
    id: string;
    type: 'description' | 'media' | 'quiz' | 'fill-in-the-blanks' | 'matching' | 'ordering' | 'short-answer';
@@ -17,15 +25,9 @@ export interface Block {
    content?: string;
    url?: string;
    media_type?: 'video' | 'audio';
-    config?: any;
+    config?: Record<string, unknown>;
    quiz_data?: {
-        questions: {
-            id: string;
-            question: string;
-            options: string[];
-            correct: number[];
-            type?: 'multiple-choice' | 'true-false' | 'multiple-select';
-        }[];
+        questions: QuizQuestion[];
    };
    pairs?: { left: string; right: string }[];
    items?: string[];
@@ -39,7 +41,12 @@ export interface Lesson {
    title: string;
    content_type: string;
    content_url?: string;
-    transcription?: any;
+    summary?: string;
+    transcription?: {
+        en?: string;
+        es?: string;
+        cues?: { start: number; end: number; text: string }[];
+    } | null;
    metadata?: {
        blocks: Block[];
    };
@@ -66,7 +73,7 @@ export interface UserGrade {
    lesson_id: string;
    score: number;
    attempts_count: number;
-    metadata: any;
+    metadata: Record<string, unknown>;
    created_at: string;
 }

@@ -138,7 +145,7 @@ export const lmsApi = {
        }).then(res => res.ok ? res.json() : res.json().then(e => Promise.reject(e)));
    },

-    async enroll(courseId: string, userId: string): Promise<any> {
+    async enroll(courseId: string, userId: string): Promise<void> {
        return fetch(`${API_BASE_URL}/enroll`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
@@ -164,5 +171,11 @@ export const lmsApi = {
        const response = await fetch(`${API_BASE_URL}/users/${userId}/courses/${courseId}/grades`);
        if (!response.ok) throw new Error('Failed to fetch user grades');
        return response.json();
+    },
+
+    async getGamification(userId: string): Promise<{ points: number, badges: { id: string, name: string, description: string }[] }> {
+        const response = await fetch(`${API_BASE_URL}/users/${userId}/gamification`);
+        if (!response.ok) throw new Error('Failed to fetch gamification data');
+        return response.json();
    }
 };