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

feat: Implement LTI deep linking, live sessions, predictive analytics, and portfolios with associated UI and database migrations.

Browse Source
This commit is contained in:
Juan Enrique Allende Cifuentes
2026-02-24 09:37:16 -03:00
parent 7f7ea3d70c
commit 04dbe05704
81 changed files with 4119 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/studio/src/app/courses/[id]/analytics/page.tsx
+130 -97
View File
@@ -12,9 +12,13 @@ import {
ArrowLeft,
CheckCircle2,
BookOpen,
Layers
Layers,
ShieldAlert
} from "lucide-react";
import CourseEditorLayout from "@/components/CourseEditorLayout";
import DropoutRiskDashboard from "@/components/Analytics/DropoutRiskDashboard";
import LiveSessions from "@/components/Courses/LiveSessions";
import { Video } from "lucide-react";
export default function AnalyticsPage() {
const { id } = useParams() as { id: string };
@@ -26,6 +30,7 @@ export default function AnalyticsPage() {
const [authError, setAuthError] = useState<string | null>(null);
const [cohorts, setCohorts] = useState<Cohort[]>([]);
const [selectedCohortId, setSelectedCohortId] = useState<string>("");
const [activeAnalyticsTab, setActiveAnalyticsTab] = useState<"overview" | "risks" | "live">("overview");
useEffect(() => {
const fetchData = async () => {
@@ -129,114 +134,142 @@ export default function AnalyticsPage() {
</div>
<CourseEditorLayout activeTab="analytics">
<div className="p-8 space-y-12">
{/* Stats Grid */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="bg-white/5 border border-white/10 rounded-3xl p-8 group hover:bg-white/[0.07] transition-all">
<div className="flex items-center gap-4 mb-4">
<div className="w-12 h-12 rounded-2xl bg-blue-500/10 flex items-center justify-center text-blue-400">
<Users size={24} />
</div>
<span className="text-sm font-bold text-gray-400 uppercase tracking-widest">Enrollments</span>
</div>
<div className="text-4xl font-black">{analytics.total_enrollments}</div>
<div className="text-xs text-green-400 font-bold mt-2">Active Learners</div>
</div>
<div className="bg-white/5 border border-white/10 rounded-3xl p-8 group hover:bg-white/[0.07] transition-all">
<div className="flex items-center gap-4 mb-4">
<div className="w-12 h-12 rounded-2xl bg-purple-500/10 flex items-center justify-center text-purple-400">
<TrendingUp size={24} />
</div>
<span className="text-sm font-bold text-gray-400 uppercase tracking-widest">Average Score</span>
</div>
<div className="text-4xl font-black">{Math.round(analytics.average_score * 100)}%</div>
<div className="text-xs text-gray-500 font-bold mt-2">Across all assessments</div>
</div>
<div className="bg-white/5 border border-white/10 rounded-3xl p-8 group hover:bg-white/[0.07] transition-all">
<div className="flex items-center gap-4 mb-4">
<div className="w-12 h-12 rounded-2xl bg-orange-500/10 flex items-center justify-center text-orange-400">
<AlertTriangle size={24} />
</div>
<span className="text-sm font-bold text-gray-400 uppercase tracking-widest">Attention Needed</span>
</div>
<div className="text-4xl font-black">{difficultLessons.length}</div>
<div className="text-xs text-orange-400 font-bold mt-2">Struggling Lessons</div>
</div>
<div className="p-8">
{/* Tab Selector */}
<div className="flex items-center gap-1 mb-10 p-1 bg-white/5 rounded-2xl w-fit">
<button
onClick={() => setActiveAnalyticsTab("overview")}
className={`px-6 py-2.5 rounded-xl text-sm font-bold transition-all flex items-center gap-2 ${activeAnalyticsTab === "overview" ? 'bg-blue-600 text-white shadow-lg shadow-blue-500/20' : 'text-gray-400 hover:text-white hover:bg-white/5'}`}
>
<BarChart3 size={16} /> Overview
</button>
<button
onClick={() => setActiveAnalyticsTab("risks")}
className={`px-6 py-2.5 rounded-xl text-sm font-bold transition-all flex items-center gap-2 ${activeAnalyticsTab === "risks" ? 'bg-red-600 text-white shadow-lg shadow-red-500/20' : 'text-gray-400 hover:text-white hover:bg-white/5'}`}
>
<ShieldAlert size={16} /> Predictive Risks
</button>
<button
onClick={() => setActiveAnalyticsTab("live")}
className={`px-6 py-2.5 rounded-xl text-sm font-bold transition-all flex items-center gap-2 ${activeAnalyticsTab === "live" ? 'bg-blue-600 text-white shadow-lg shadow-blue-500/20' : 'text-gray-400 hover:text-white hover:bg-white/5'}`}
>
<Video size={16} /> Live Sessions
</button>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
{/* Lesson Breakdown */}
<section>
<h2 className="text-2xl font-black mb-6 flex items-center gap-3">
<BarChart3 className="text-blue-500" />
Lesson Performance
</h2>
<div className="space-y-4">
{analytics.lessons.map((lesson) => (
<div key={lesson.lesson_id} className="bg-white/5 border border-white/10 rounded-2xl p-6 hover:bg-white/[0.07] transition-all">
<div className="flex items-start justify-between mb-4">
<div>
<h3 className="font-bold">{lesson.lesson_title}</h3>
<p className="text-xs text-gray-500 mt-1">{lesson.submission_count} submissions</p>
</div>
<div className={`text-xl font-black ${lesson.average_score < 0.6 ? 'text-red-400' : lesson.average_score < 0.8 ? 'text-orange-400' : 'text-green-400'}`}>
{Math.round(lesson.average_score * 100)}%
</div>
</div>
<div className="h-1.5 bg-white/5 rounded-full overflow-hidden">
<div
className={`h-full rounded-full transition-all duration-1000 ${lesson.average_score < 0.6 ? 'bg-red-500' : lesson.average_score < 0.8 ? 'bg-orange-500' : 'bg-green-500'}`}
style={{ width: `${lesson.average_score * 100}%` }}
/>
{activeAnalyticsTab === "overview" ? (
<div className="space-y-12 animate-in fade-in slide-in-from-bottom-4 duration-700">
{/* Stats Grid */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="bg-white/5 border border-white/10 rounded-3xl p-8 group hover:bg-white/[0.07] transition-all">
<div className="flex items-center gap-4 mb-4">
<div className="w-12 h-12 rounded-2xl bg-blue-500/10 flex items-center justify-center text-blue-400">
<Users size={24} />
</div>
<span className="text-sm font-bold text-gray-400 uppercase tracking-widest">Enrollments</span>
</div>
))}
</div>
</section>
<div className="text-4xl font-black">{analytics.total_enrollments}</div>
<div className="text-xs text-green-400 font-bold mt-2">Active Learners</div>
</div>
{/* Actionable Insights */}
<section className="space-y-8">
<div>
<h2 className="text-2xl font-black mb-6 flex items-center gap-3">
<AlertTriangle className="text-orange-500" />
Struggling Lessons
</h2>
{difficultLessons.length > 0 ? (
<div className="bg-white/5 border border-white/10 rounded-3xl p-8 group hover:bg-white/[0.07] transition-all">
<div className="flex items-center gap-4 mb-4">
<div className="w-12 h-12 rounded-2xl bg-purple-500/10 flex items-center justify-center text-purple-400">
<TrendingUp size={24} />
</div>
<span className="text-sm font-bold text-gray-400 uppercase tracking-widest">Average Score</span>
</div>
<div className="text-4xl font-black">{Math.round(analytics.average_score * 100)}%</div>
<div className="text-xs text-gray-500 font-bold mt-2">Across all assessments</div>
</div>
<div className="bg-white/5 border border-white/10 rounded-3xl p-8 group hover:bg-white/[0.07] transition-all">
<div className="flex items-center gap-4 mb-4">
<div className="w-12 h-12 rounded-2xl bg-orange-500/10 flex items-center justify-center text-orange-400">
<AlertTriangle size={24} />
</div>
<span className="text-sm font-bold text-gray-400 uppercase tracking-widest">Attention Needed</span>
</div>
<div className="text-4xl font-black">{difficultLessons.length}</div>
<div className="text-xs text-orange-400 font-bold mt-2">Struggling Lessons</div>
</div>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
{/* Lesson Breakdown */}
<section>
<h2 className="text-2xl font-black mb-6 flex items-center gap-3">
<BarChart3 className="text-blue-500" />
Lesson Performance
</h2>
<div className="space-y-4">
{difficultLessons.map(l => (
<div key={l.lesson_id} className="bg-red-500/10 border border-red-500/20 rounded-2xl p-6 flex items-center justify-between">
<div>
<h4 className="font-bold text-red-400">{l.lesson_title}</h4>
<p className="text-xs text-red-300/60 mt-1 text-balance max-w-xs">
Average score is below 70%. Consider reviewing the material or difficulty of questions.
</p>
{analytics.lessons.map((lesson) => (
<div key={lesson.lesson_id} className="bg-white/5 border border-white/10 rounded-2xl p-6 hover:bg-white/[0.07] transition-all">
<div className="flex items-start justify-between mb-4">
<div>
<h3 className="font-bold">{lesson.lesson_title}</h3>
<p className="text-xs text-gray-500 mt-1">{lesson.submission_count} submissions</p>
</div>
<div className={`text-xl font-black ${lesson.average_score < 0.6 ? 'text-red-400' : lesson.average_score < 0.8 ? 'text-orange-400' : 'text-green-400'}`}>
{Math.round(lesson.average_score * 100)}%
</div>
</div>
<div className="h-1.5 bg-white/5 rounded-full overflow-hidden">
<div
className={`h-full rounded-full transition-all duration-1000 ${lesson.average_score < 0.6 ? 'bg-red-500' : lesson.average_score < 0.8 ? 'bg-orange-500' : 'bg-green-500'}`}
style={{ width: `${lesson.average_score * 100}%` }}
/>
</div>
<div className="text-2xl font-black text-red-500">{Math.round(l.average_score * 100)}%</div>
</div>
))}
</div>
) : (
<div className="bg-green-500/10 border border-green-500/20 rounded-2xl p-8 text-center">
<CheckCircle2 size={40} className="text-green-500 mx-auto mb-4" />
<h4 className="font-bold text-green-400">All set!</h4>
<p className="text-sm text-green-300/60 mt-2">No lessons currently fall below the difficulty threshold.</p>
</div>
)}
</div>
</section>
<div className="bg-blue-600/10 border border-blue-500/20 rounded-3xl p-8">
<h3 className="text-lg font-bold mb-4 flex items-center gap-2">
<BookOpen className="text-blue-400" />
Content Strategy Tip
</h3>
<p className="text-sm text-blue-200/70 leading-relaxed">
High submission counts with low average scores often indicate that the assessment might be misleading or the prerequisites aren&apos;t clearly explained in previous lessons.
</p>
{/* Actionable Insights */}
<section className="space-y-8">
<div>
<h2 className="text-2xl font-black mb-6 flex items-center gap-3">
<AlertTriangle className="text-orange-500" />
Struggling Lessons
</h2>
{difficultLessons.length > 0 ? (
<div className="space-y-4">
{difficultLessons.map(l => (
<div key={l.lesson_id} className="bg-red-500/10 border border-red-500/20 rounded-2xl p-6 flex items-center justify-between">
<div>
<h4 className="font-bold text-red-400">{l.lesson_title}</h4>
<p className="text-xs text-red-300/60 mt-1 text-balance max-w-xs">
Average score is below 70%. Consider reviewing the material or difficulty of questions.
</p>
</div>
<div className="text-2xl font-black text-red-500">{Math.round(l.average_score * 100)}%</div>
</div>
))}
</div>
) : (
<div className="bg-green-500/10 border border-green-500/20 rounded-2xl p-8 text-center">
<CheckCircle2 size={40} className="text-green-500 mx-auto mb-4" />
<h4 className="font-bold text-green-400">All set!</h4>
<p className="text-sm text-green-300/60 mt-2">No lessons currently fall below the difficulty threshold.</p>
</div>
)}
</div>
<div className="bg-blue-600/10 border border-blue-500/20 rounded-3xl p-8">
<h3 className="text-lg font-bold mb-4 flex items-center gap-2">
<BookOpen className="text-blue-400" />
Content Strategy Tip
</h3>
<p className="text-sm text-blue-200/70 leading-relaxed">
High submission counts with low average scores often indicate that the assessment might be misleading or the prerequisites aren&apos;t clearly explained in previous lessons.
</p>
</div>
</section>
</div>
</section>
</div>
</div>
) : (
<DropoutRiskDashboard courseId={id} />
)}
</div>
</CourseEditorLayout>
</div>
web/studio/src/app/lti/deep-linking/page.tsx
+209
View File
@@ -0,0 +1,209 @@
"use client";
import { useEffect, useState, Suspense } from "react";
import { useSearchParams, useRouter } from "next/navigation";
import { cmsApi, lmsApi, Course, Module, Lesson, LtiDeepLinkingContentItem } from "@/lib/api";
import { Book, ChevronRight, Check, Search, ExternalLink } from "lucide-react";
function DeepLinkingPickerContent() {
const searchParams = useSearchParams();
const router = useRouter();
const [courses, setCourses] = useState<Course[]>([]);
const [loading, setLoading] = useState(true);
const [selectedCourse, setSelectedCourse] = useState<Course | null>(null);
const [selectedContent, setSelectedContent] = useState<{ type: 'course' | 'module' | 'lesson', id: string, title: string } | null>(null);
const [searchTerm, setSearchTerm] = useState("");
const [submitting, setSubmitting] = useState(false);
const token = searchParams.get("token");
const dlToken = searchParams.get("dl_token");
useEffect(() => {
if (token) {
localStorage.setItem("studio_token", token);
}
loadCourses();
}, [token]);
const loadCourses = async () => {
try {
const data = await cmsApi.getCourses();
setCourses(data);
} catch (err) {
console.error("Failed to load courses", err);
} finally {
setLoading(false);
}
};
const handleSelectCourse = async (course: Course) => {
setSelectedCourse(course);
setSelectedContent({ type: 'course', id: course.id, title: course.title });
// Fetch full outline to show modules/lessons
try {
const full = await cmsApi.getCourseWithFullOutline(course.id);
setSelectedCourse(full);
} catch (err) {
console.error("Failed to load course outline", err);
}
};
const handleConfirm = async () => {
if (!selectedContent || !dlToken) return;
setSubmitting(true);
try {
// Transform selected content into LTI items
const item: LtiDeepLinkingContentItem = {
type: 'ltiResourceLink',
title: selectedContent.title,
url: `${window.location.origin.replace('3001', '3003')}/courses/${selectedCourse?.id}${selectedContent.type === 'lesson' ? `/lessons/${selectedContent.id}` : ''}`,
};
const response = await lmsApi.getDeepLinkingResponse({
dl_token: dlToken,
items: [item]
});
// Create a form and auto-post it to the return_url
const form = document.createElement('form');
form.method = 'POST';
form.action = response.return_url;
const jwtInput = document.createElement('input');
jwtInput.type = 'hidden';
jwtInput.name = 'JWT';
jwtInput.value = response.jwt;
form.appendChild(jwtInput);
document.body.appendChild(form);
form.submit();
} catch (err) {
console.error("Failed to generate DL response", err);
setSubmitting(false);
}
};
const filteredCourses = courses.filter(c => c.title.toLowerCase().includes(searchTerm.toLowerCase()));
return (
<div className="max-w-4xl mx-auto p-8 h-full flex flex-col">
<div className="mb-8">
<h1 className="text-3xl font-black text-white tracking-tighter mb-2">PICK CONTENT TO EMBED</h1>
<p className="text-gray-400">Select the course or specific lesson you want to link in your platform.</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 flex-1 min-h-0">
{/* Right Column: Content Hierarchy */}
<div className="glass rounded-3xl border border-white/5 p-6 flex flex-col overflow-hidden">
<div className="relative mb-4">
<Search className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500" size={18} />
<input
type="text"
placeholder="Search courses..."
className="w-full bg-white/5 border border-white/10 rounded-2xl py-3 pl-12 pr-4 text-white focus:outline-none focus:border-blue-500/50 transition-colors"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
</div>
<div className="flex-1 overflow-y-auto pr-2 space-y-2">
{loading ? (
Array.from({ length: 5 }).map((_, i) => (
<div key={i} className="h-16 bg-white/5 rounded-2xl animate-pulse" />
))
) : filteredCourses.length > 0 ? (
filteredCourses.map(course => (
<button
key={course.id}
onClick={() => handleSelectCourse(course)}
className={`w-full text-left p-4 rounded-2xl transition-all flex items-center gap-4 group ${selectedCourse?.id === course.id ? 'bg-blue-600/20 border-blue-500/50' : 'hover:bg-white/5 border border-transparent'}`}
>
<div className={`w-10 h-10 rounded-xl flex items-center justify-center transition-colors ${selectedCourse?.id === course.id ? 'bg-blue-600 text-white' : 'bg-white/10 text-gray-400 group-hover:bg-white/20'}`}>
<Book size={20} />
</div>
<div className="flex-1">
<div className="font-bold text-white leading-tight">{course.title}</div>
<div className="text-sm text-gray-500">{course.pacing_mode}</div>
</div>
<ChevronRight size={18} className={`transition-transform ${selectedCourse?.id === course.id ? 'rotate-90 text-blue-400' : 'text-gray-600'}`} />
</button>
))
) : (
<div className="text-center py-12 text-gray-500 italic">No courses found</div>
)}
</div>
</div>
{/* Right Column: Outline Picker */}
<div className="glass rounded-3xl border border-white/5 p-6 flex flex-col overflow-hidden">
{selectedCourse ? (
<div className="flex flex-col h-full">
<h2 className="font-black text-xl text-white tracking-tight mb-4 flex items-center gap-2">
<Book size={18} className="text-blue-400" />
{selectedCourse.title}
</h2>
<div className="flex-1 overflow-y-auto pr-2 space-y-4">
<button
onClick={() => setSelectedContent({ type: 'course', id: selectedCourse.id, title: selectedCourse.title })}
className={`w-full text-left p-4 rounded-2xl border transition-all flex items-center justify-between ${selectedContent?.type === 'course' ? 'bg-blue-600/20 border-blue-500/50' : 'bg-white/5 border-transparent hover:border-white/10'}`}
>
<span className="font-bold text-white">Full Course Link</span>
{selectedContent?.type === 'course' && <Check size={18} className="text-blue-400" />}
</button>
{selectedCourse.modules?.map(module => (
<div key={module.id} className="space-y-2">
<div className="text-xs font-black text-gray-500 tracking-widest uppercase px-2">{module.title}</div>
{module.lessons.map(lesson => (
<button
key={lesson.id}
onClick={() => setSelectedContent({ type: 'lesson', id: lesson.id, title: lesson.title })}
className={`w-full text-left p-3 pl-4 rounded-xl border transition-all flex items-center justify-between ${selectedContent?.id === lesson.id ? 'bg-blue-600/20 border-blue-500/50' : 'bg-white/5 border-transparent hover:border-white/10'}`}
>
<span className="text-gray-300 text-sm">{lesson.title}</span>
{selectedContent?.id === lesson.id && <Check size={16} className="text-blue-400" />}
</button>
))}
</div>
))}
</div>
<button
onClick={handleConfirm}
disabled={!selectedContent || submitting}
className="mt-6 w-full bg-blue-600 hover:bg-blue-500 disabled:opacity-50 disabled:cursor-not-allowed text-white font-black py-4 rounded-2xl flex items-center justify-center gap-2 shadow-xl shadow-blue-500/20 transition-all border-b-4 border-blue-800 active:border-b-0 active:translate-y-1"
>
{submitting ? (
<div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
) : (
<>
EMBED THIS CONTENT
<ExternalLink size={18} />
</>
)}
</button>
</div>
) : (
<div className="h-full flex flex-col items-center justify-center text-center p-8">
<div className="w-16 h-16 rounded-2xl bg-white/5 flex items-center justify-center text-gray-500 mb-4">
<Book size={32} />
</div>
<div className="text-white font-bold mb-2">No Course Selected</div>
<p className="text-gray-500 text-sm">Select a course from the left to browse modules and lessons.</p>
</div>
)}
</div>
</div>
</div>
);
}
export default function DeepLinkingPicker() {
return (
<Suspense fallback={<div className="min-h-screen bg-gray-950 flex items-center justify-center"><div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin" /></div>}>
<DeepLinkingPickerContent />
</Suspense>
);
}