feat: Implement AI-driven lesson summaries, automate quiz generation, add gamification base, and introduce Studio organization management.
This commit is contained in:
@@ -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'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'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">
|
||||
"{summary}"
|
||||
</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't created any courses yet.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
|
||||
Reference in New Issue
Block a user