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();
    }
 };
@@ -0,0 +1,77 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { cmsApi, Organization } from "@/lib/api";
+import { Building2, Calendar, Hash } from "lucide-react";
+
+export default function OrganizationPage() {
+    const [org, setOrg] = useState<Organization | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        const fetchOrg = async () => {
+            try {
+                const data = await cmsApi.getOrganization();
+                setOrg(data);
+            } catch (err) {
+                setError(err instanceof Error ? err.message : "Failed to load organization");
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchOrg();
+    }, []);
+
+    if (loading) return <div className="p-8 text-center text-gray-500">Loading organization details...</div>;
+    if (error) return <div className="p-8 text-center text-red-500 font-bold">Error: {error}</div>;
+
+    return (
+        <div className="p-8 max-w-5xl mx-auto space-y-8">
+            <header>
+                <h1 className="text-3xl font-black tracking-tighter text-white mb-2">Organization Settings</h1>
+                <p className="text-gray-400">Manage your organization&apos;s profile and settings.</p>
+            </header>
+
+            {org && (
+                <div className="grid gap-6 md:grid-cols-2">
+                    <div className="glass-card p-6 space-y-4">
+                        <div className="flex items-center gap-3 text-blue-400 mb-2">
+                            <Building2 size={24} />
+                            <h2 className="text-xl font-bold text-white">Profile</h2>
+                        </div>
+
+                        <div className="space-y-1">
+                            <label className="text-[10px] uppercase font-black tracking-widest text-gray-500">Organization Name</label>
+                            <div className="text-lg font-medium text-white">{org.name}</div>
+                        </div>
+
+                        <div className="space-y-1">
+                            <label className="text-[10px] uppercase font-black tracking-widest text-gray-500">Organization ID</label>
+                            <div className="flex items-center gap-2 text-sm text-gray-400 font-mono bg-black/20 p-2 rounded border border-white/5">
+                                <Hash size={14} />
+                                {org.id}
+                            </div>
+                        </div>
+
+                        <div className="space-y-1">
+                            <label className="text-[10px] uppercase font-black tracking-widest text-gray-500">Created At</label>
+                            <div className="flex items-center gap-2 text-sm text-gray-400">
+                                <Calendar size={14} />
+                                {new Date(org.created_at).toLocaleDateString()}
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="glass-card p-6 flex items-center justify-center text-center text-gray-500">
+                        <div>
+                            <p className="mb-2 font-bold">More settings coming soon</p>
+                            <p className="text-xs">User management and billing features are under development.</p>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}
@@ -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 placeholder:text-gray-700"
                                />
                            </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
@@ -19,6 +19,9 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI

    // Activity State (Blocks)
    const [blocks, setBlocks] = useState<Block[]>([]);
+    const [summary, setSummary] = useState<string>("");
+    const [isGeneratingSummary, setIsGeneratingSummary] = useState(false);
+    const [isGeneratingQuiz, setIsGeneratingQuiz] = useState(false);
    const [gradingCategories, setGradingCategories] = useState<GradingCategory[]>([]);
    const [isGraded, setIsGraded] = useState(false);
    const [selectedCategoryId, setSelectedCategoryId] = useState<string | "">("");
@@ -31,7 +34,8 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
                // Use cmsApi for consistency
                const lessonData = await cmsApi.getLesson(params.lessonId);
                setLesson(lessonData);
-                setIsGraded(lessonData.is_graded);
+                setSummary(lessonData.summary || "");
+                setIsGraded(lessonData.is_graded || false);
                setSelectedCategoryId(lessonData.grading_category_id || "");
                setMaxAttempts(lessonData.max_attempts);
                setAllowRetry(lessonData.allow_retry);
@@ -66,6 +70,7 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
        try {
            const updated = await cmsApi.updateLesson(lesson.id, {
                metadata: { ...lesson.metadata, blocks },
+                summary,
                is_graded: isGraded,
                grading_category_id: selectedCategoryId || null,
                max_attempts: maxAttempts,
@@ -112,6 +117,32 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
        setBlocks(newBlocks);
    };

+    const handleSummarize = async () => {
+        if (!lesson) return;
+        setIsGeneratingSummary(true);
+        try {
+            const updated = await cmsApi.summarizeLesson(lesson.id);
+            setSummary(updated.summary || "");
+        } catch {
+            alert("Failed to generate summary.");
+        } finally {
+            setIsGeneratingSummary(false);
+        }
+    };
+
+    const handleGenerateQuiz = async () => {
+        if (!lesson) return;
+        setIsGeneratingQuiz(true);
+        try {
+            const newBlocks = await cmsApi.generateQuiz(lesson.id);
+            setBlocks([...blocks, ...newBlocks]);
+        } catch {
+            alert("Failed to generate quiz.");
+        } finally {
+            setIsGeneratingQuiz(false);
+        }
+    };
+
    if (loading) return <div className="py-20 text-center text-gray-500 animate-pulse font-medium">Initializing Activity Builder...</div>;
    if (!lesson) return <div className="py-20 text-center text-red-400">Activity not found.</div>;

@@ -228,6 +259,43 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
                </div>
            )}

+            {/* AI Summary Section */}
+            {(summary || editMode) && (
+                <div className="bg-gradient-to-br from-indigo-500/10 to-blue-500/10 border border-indigo-500/20 rounded-3xl p-8 space-y-6 animate-in fade-in duration-700">
+                    <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-3">
+                            <span className="text-2xl">✨</span>
+                            <div>
+                                <h3 className="text-xl font-bold font-black italic tracking-tight">AI Lesson Summary</h3>
+                                <p className="text-xs text-gray-400 mt-1 uppercase tracking-widest font-bold">Key insights generated by intelligence</p>
+                            </div>
+                        </div>
+                        {editMode && (
+                            <button
+                                onClick={handleSummarize}
+                                disabled={isGeneratingSummary}
+                                className="px-4 py-2 bg-blue-500/10 hover:bg-blue-500/20 text-blue-400 text-[10px] font-black uppercase tracking-widest rounded-xl border border-blue-500/20 transition-all flex items-center gap-2"
+                            >
+                                {isGeneratingSummary ? "Generating..." : "Regenerate Summary"}
+                            </button>
+                        )}
+                    </div>
+
+                    {editMode ? (
+                        <textarea
+                            value={summary}
+                            onChange={(e) => setSummary(e.target.value)}
+                            placeholder="A concise summary of the lesson content..."
+                            className="w-full bg-white/5 border border-white/10 rounded-2xl p-6 text-sm text-gray-300 focus:outline-none focus:border-blue-500/50 min-h-[120px] transition-all"
+                        />
+                    ) : (
+                        <div className="text-sm text-gray-400 leading-relaxed italic border-l-2 border-indigo-500/30 pl-6 py-2">
+                            &quot;{summary}&quot;
+                        </div>
+                    )}
+                </div>
+            )}
+
            <div className="space-y-16">
                {blocks.map((block, index) => (
                    <div key={block.id} className="relative group/block animate-in fade-in slide-in-from-bottom-4 duration-500" style={{ animationDelay: `${index * 100}ms` }}>
@@ -387,6 +455,17 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
                                    <span className="text-2xl group-hover:scale-110 transition-transform">💬</span>
                                    <span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">Short</span>
                                </button>
+
+                                <div className="w-px h-12 bg-white/5"></div>
+
+                                <button
+                                    onClick={handleGenerateQuiz}
+                                    disabled={isGeneratingQuiz}
+                                    className="flex flex-col items-center gap-2 p-6 bg-gradient-to-b from-indigo-500/20 to-blue-500/20 border border-indigo-500/30 hover:border-indigo-500/60 rounded-3xl transition-all group w-36"
+                                >
+                                    <span className="text-2xl group-hover:scale-110 transition-transform">{isGeneratingQuiz ? '⏳' : '✨'}</span>
+                                    <span className="text-[10px] font-black uppercase tracking-widest text-indigo-400">{isGeneratingQuiz ? 'Building...' : 'AI Builder'}</span>
+                                </button>
                            </div>
                        </div>
                    </div>
@@ -2,8 +2,8 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import Link from "next/link";
-import { AuthProvider, useAuth } from "@/context/AuthContext";
-import { BookOpen, LogOut, ShieldAlert } from "lucide-react";
+import { AuthProvider } from "@/context/AuthContext";
+import { BookOpen } from "lucide-react";

 const inter = Inter({ subsets: ["latin"] });

@@ -12,29 +12,7 @@ export const metadata: Metadata = {
  description: "Create and manage high-fidelity educational content.",
 };

-function AuthHeader() {
-  "use client";
-  const { user, logout } = useAuth();
-  return (
-    <div className="flex items-center gap-4">
-      {user?.role === 'admin' && (
-        <Link href="/admin/audit" className="text-xs font-bold uppercase tracking-widest text-gray-400 hover:text-white transition-colors flex items-center gap-2">
-          <ShieldAlert size={16} /> Audit
-        </Link>
-      )}
-      {user && (
-        <>
-          <div className="w-8 h-8 rounded-full bg-white/10 border border-white/20 flex items-center justify-center font-bold text-xs">
-            {user.full_name.charAt(0)}
-          </div>
-          <button onClick={logout} className="p-2 hover:bg-white/10 rounded-full transition-colors">
-            <LogOut size={16} />
-          </button>
-        </>
-      )}
-    </div>
-  );
-}
+import AuthHeader from "@/components/AuthHeader";

 export default function RootLayout({
  children,
@@ -36,6 +36,7 @@ export default function StudioDashboard() {
        const newCourse = await cmsApi.createCourse(title);
        setCourses(prev => [...prev, newCourse]);
      } catch (err) {
+        console.error("Failed to create course", err);
        alert("Failed to create course. Please ensure the backend is running.");
      }
    }
@@ -59,7 +60,7 @@ export default function StudioDashboard() {
        </div>
      ) : courses.length === 0 ? (
        <div className="text-center py-20 glass-card border-dashed border-white/10">
-          <p className="text-gray-500">You haven't created any courses yet.</p>
+          <p className="text-gray-500">You haven&apos;t created any courses yet.</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -0,0 +1,33 @@
+"use client";
+
+import { useAuth } from "@/context/AuthContext";
+import { LogOut, ShieldAlert, Building2 } from "lucide-react";
+import Link from "next/link";
+
+export default function AuthHeader() {
+    const { user, logout } = useAuth();
+    return (
+        <div className="flex items-center gap-4">
+            {user?.role === 'admin' && (
+                <>
+                    <Link href="/admin/organization" className="text-xs font-bold uppercase tracking-widest text-gray-400 hover:text-white transition-colors flex items-center gap-2">
+                        <Building2 size={16} /> Org
+                    </Link>
+                    <Link href="/admin/audit" className="text-xs font-bold uppercase tracking-widest text-gray-400 hover:text-white transition-colors flex items-center gap-2">
+                        <ShieldAlert size={16} /> Audit
+                    </Link>
+                </>
+            )}
+            {user && (
+                <>
+                    <div className="w-8 h-8 rounded-full bg-white/10 border border-white/20 flex items-center justify-center font-bold text-xs">
+                        {user.full_name.charAt(0)}
+                    </div>
+                    <button onClick={logout} className="p-2 hover:bg-white/10 rounded-full transition-colors">
+                        <LogOut size={16} />
+                    </button>
+                </>
+            )}
+        </div>
+    );
+}
@@ -20,6 +20,14 @@ export interface Module {
    lessons: Lesson[];
 }

+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';
@@ -27,9 +35,9 @@ export interface Block {
    content?: string;
    url?: string;
    media_type?: 'video' | 'audio';
-    config?: any;
+    config?: Record<string, unknown>;
    quiz_data?: {
-        questions: any[];
+        questions: QuizQuestion[];
    };
    pairs?: { left: string; right: string }[];
    items?: string[];
@@ -49,7 +57,19 @@ export interface Lesson {
    grading_category_id: string | null;
    max_attempts: number | null;
    allow_retry: boolean;
-    transcription?: any;
+    summary?: string;
+    transcription?: {
+        en?: string;
+        es?: string;
+        cues?: { start: number; end: number; text: string }[];
+    } | null;
+}
+
+export interface Organization {
+    id: string;
+    name: string;
+    created_at: string;
+    updated_at: string;
 }

 export interface User {
@@ -93,7 +113,7 @@ export interface AuditLog {
    action: string;
    entity_type: string;
    entity_id: string;
-    changes: any;
+    changes: Record<string, unknown>;
    created_at: string;
 }

@@ -130,6 +150,9 @@ const apiFetch = (url: string, options: RequestInit = {}) => {
 };

 export const cmsApi = {
+    // Organization
+    getOrganization: (): Promise<Organization> => apiFetch('/organization'),
+
    // Auth
    register: (payload: AuthPayload): Promise<AuthResponse> => apiFetch('/auth/register', { method: 'POST', body: JSON.stringify(payload) }),
    login: (payload: AuthPayload): Promise<AuthResponse> => apiFetch('/auth/login', { method: 'POST', body: JSON.stringify(payload) }),
@@ -147,6 +170,8 @@ export const cmsApi = {
    createLesson: (module_id: string, title: string, content_type: string, position: number): Promise<Lesson> => apiFetch('/lessons', { method: 'POST', body: JSON.stringify({ module_id, title, content_type, position }) }),
    getLesson: (id: string): Promise<Lesson> => apiFetch(`/lessons/${id}`),
    updateLesson: (id: string, payload: Partial<Lesson>): Promise<Lesson> => apiFetch(`/lessons/${id}`, { method: 'PUT', body: JSON.stringify(payload) }),
+    summarizeLesson: (id: string): Promise<Lesson> => apiFetch(`/lessons/${id}/summarize`, { method: 'POST' }),
+    generateQuiz: (id: string): Promise<Block[]> => apiFetch(`/lessons/${id}/generate-quiz`, { method: 'POST' }),

    // Grading
    getGradingCategories: (courseId: string): Promise<GradingCategory[]> => apiFetch(`/courses/${courseId}/grading`),