feat: Add i18n support, new content block types, course export, and lesson interaction tracking.
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { cmsApi, Course, AdvancedAnalytics } from "@/lib/api";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import {
|
||||
@@ -13,12 +13,18 @@ import {
|
||||
} from "lucide-react";
|
||||
import CourseEditorLayout from "@/components/CourseEditorLayout";
|
||||
|
||||
export default function AdvancedAnalyticsPage() {
|
||||
const { id } = useParams() as { id: string };
|
||||
interface HeatmapPoint {
|
||||
second: number;
|
||||
count: number;
|
||||
}
|
||||
|
||||
export default function AdvancedAnalyticsPage({ params }: { params: { id: string } }) {
|
||||
const { id } = params;
|
||||
const router = useRouter();
|
||||
const { user } = useAuth();
|
||||
const [course, setCourse] = useState<Course | null>(null);
|
||||
const [analytics, setAnalytics] = useState<AdvancedAnalytics | null>(null);
|
||||
const [heatmapData, setHeatmapData] = useState<HeatmapPoint[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
@@ -184,6 +190,79 @@ export default function AdvancedAnalyticsPage() {
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Engagement Heatmap */}
|
||||
<section>
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<h2 className="text-2xl font-black flex items-center gap-3">
|
||||
<TrendingUp size={24} className="text-orange-500" />
|
||||
Engagement Heatmap
|
||||
</h2>
|
||||
<select
|
||||
className="bg-white/5 border border-white/10 rounded-xl px-4 py-2 text-sm font-bold focus:outline-none focus:ring-2 focus:ring-orange-500 transition-all"
|
||||
onChange={(e) => {
|
||||
const lessonId = e.target.value;
|
||||
if (lessonId) {
|
||||
cmsApi.getLessonHeatmap(lessonId).then(setHeatmapData).catch(console.error);
|
||||
} else {
|
||||
setHeatmapData([]);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<option value="">Select a video lesson...</option>
|
||||
{course.modules?.flatMap(m => m.lessons)
|
||||
.filter(l => l.content_type === 'video' || (l.metadata?.blocks || []).some(b => b.type === 'media'))
|
||||
.map(l => (
|
||||
<option key={l.id} value={l.id}>{l.title}</option>
|
||||
))
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{heatmapData.length > 0 ? (
|
||||
<div className="p-8 rounded-3xl border border-white/10 bg-white/[0.02] space-y-8">
|
||||
<p className="text-sm text-gray-500 uppercase font-black tracking-widest">
|
||||
Playback concentration by second (Total Interactions: {heatmapData.reduce((acc: number, p: HeatmapPoint) => acc + Number(p.count), 0)})
|
||||
</p>
|
||||
<div className="flex items-end gap-[2px] h-48 w-full group">
|
||||
{(() => {
|
||||
const counts = heatmapData.map((p: HeatmapPoint) => Number(p.count));
|
||||
const maxCount = Math.max(...counts, 1);
|
||||
const lastSecond = heatmapData[heatmapData.length - 1].second;
|
||||
|
||||
// Fill gaps for a smooth chart
|
||||
const fullHeatmap = Array.from({ length: lastSecond + 1 }, (_, i) => {
|
||||
const point = heatmapData.find((p: HeatmapPoint) => p.second === i);
|
||||
return point ? Number(point.count) : 0;
|
||||
});
|
||||
|
||||
return fullHeatmap.map((count, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex-1 bg-orange-500/20 hover:bg-orange-500 transition-all rounded-t-[1px] relative group/bar"
|
||||
style={{ height: `${(count / maxCount) * 100}%` }}
|
||||
>
|
||||
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-black text-[10px] font-black rounded opacity-0 group-hover/bar:opacity-100 whitespace-nowrap z-10 pointer-events-none">
|
||||
{Math.floor(i / 60)}:{(i % 60).toString().padStart(2, '0')} - {count} views
|
||||
</div>
|
||||
</div>
|
||||
));
|
||||
})()}
|
||||
</div>
|
||||
<div className="flex justify-between text-[10px] font-black text-gray-600 uppercase tracking-widest pt-4 border-t border-white/5">
|
||||
<span>0:00 Start</span>
|
||||
<span>Video Timeline</span>
|
||||
<span>End</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-20 text-center border-2 border-dashed border-white/5 rounded-3xl">
|
||||
<p className="text-gray-600 font-bold uppercase tracking-widest italic">
|
||||
Select a lesson to view its engagement signature
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
</CourseEditorLayout>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,193 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { cmsApi, Course, AdvancedAnalytics, CourseAnalytics } from "@/lib/api";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import {
|
||||
ArrowLeft,
|
||||
Download,
|
||||
Users,
|
||||
CheckCircle,
|
||||
Clock,
|
||||
Filter
|
||||
} from "lucide-react";
|
||||
import CourseEditorLayout from "@/components/CourseEditorLayout";
|
||||
|
||||
export default function ReportsPage() {
|
||||
const { id } = useParams() as { id: string };
|
||||
const router = useRouter();
|
||||
const { user } = useAuth();
|
||||
const [course, setCourse] = useState<Course | null>(null);
|
||||
const [analytics, setAnalytics] = useState<CourseAnalytics | null>(null);
|
||||
const [advanced, setAdvanced] = useState<AdvancedAnalytics | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [filter, setFilter] = useState("all");
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
if (!user) return;
|
||||
try {
|
||||
const [courseData, basicData, advancedData] = await Promise.all([
|
||||
cmsApi.getCourseWithFullOutline(id),
|
||||
cmsApi.getCourseAnalytics(id),
|
||||
cmsApi.getAdvancedAnalytics(id)
|
||||
]);
|
||||
setCourse(courseData);
|
||||
setAnalytics(basicData);
|
||||
setAdvanced(advancedData);
|
||||
} catch (err) {
|
||||
console.error("Failed to load report data", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchData();
|
||||
}, [id, user]);
|
||||
|
||||
const exportToCSV = () => {
|
||||
if (!analytics || !course) return;
|
||||
|
||||
let csvContent = "data:text/csv;charset=utf-8,";
|
||||
csvContent += "Lesson,Students,Avg Score,Type\n";
|
||||
|
||||
analytics.lessons.forEach(l => {
|
||||
csvContent += `"${l.lesson_title}",${l.submission_count},${(l.average_score * 100).toFixed(1)}%\n`;
|
||||
});
|
||||
|
||||
const encodedUri = encodeURI(csvContent);
|
||||
const link = document.createElement("a");
|
||||
link.setAttribute("href", encodedUri);
|
||||
link.setAttribute("download", `report_${course.title.replace(/\s+/g, '_')}.csv`);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
};
|
||||
|
||||
if (loading) return (
|
||||
<div className="min-h-screen bg-gray-900 flex items-center justify-center">
|
||||
<div className="w-12 h-12 border-4 border-blue-500/20 border-t-blue-500 rounded-full animate-spin"></div>
|
||||
</div>
|
||||
);
|
||||
|
||||
if (!course || !analytics) return <div className="p-20 text-center text-red-400">Error caricamento dati.</div>;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0f1115] text-white p-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="flex items-center justify-between mb-12">
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={() => router.push(`/courses/${id}/analytics`)}
|
||||
className="p-2 hover:bg-white/10 rounded-full transition-colors"
|
||||
>
|
||||
<ArrowLeft className="w-6 h-6" />
|
||||
</button>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent">
|
||||
Custom Report Builder
|
||||
</h1>
|
||||
<p className="text-gray-400 mt-1">Generate and export engagement data for {course.title}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={exportToCSV}
|
||||
className="btn-premium px-8 flex items-center gap-2"
|
||||
>
|
||||
<Download size={18} />
|
||||
Export to CSV
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<CourseEditorLayout activeTab="analytics">
|
||||
<div className="p-8 space-y-12">
|
||||
{/* Filters */}
|
||||
<div className="flex items-center gap-4 bg-white/5 p-4 rounded-2xl border border-white/5">
|
||||
<Filter size={18} className="text-gray-500 ml-2" />
|
||||
<span className="text-xs font-black uppercase tracking-widest text-gray-500">Filter by Cohort:</span>
|
||||
<select
|
||||
className="bg-transparent text-sm font-bold text-white focus:outline-none"
|
||||
value={filter}
|
||||
onChange={(e) => setFilter(e.target.value)}
|
||||
>
|
||||
<option value="all">All students</option>
|
||||
{advanced?.cohorts.map(c => (
|
||||
<option key={c.period} value={c.period}>{c.period}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Report Table */}
|
||||
<div className="rounded-3xl border border-white/10 bg-white/[0.02] overflow-hidden">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-white/5">
|
||||
<th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Lección</th>
|
||||
<th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Completado por</th>
|
||||
<th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Puntaje Promedio</th>
|
||||
<th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Tendencia</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-white/5">
|
||||
{analytics.lessons.map((lesson) => (
|
||||
<tr key={lesson.lesson_id} className="hover:bg-white/[0.02] transition-colors">
|
||||
<td className="p-6 font-bold text-gray-300">{lesson.lesson_title}</td>
|
||||
<td className="p-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Users size={14} className="text-blue-400" />
|
||||
<span className="font-black">{lesson.submission_count}</span>
|
||||
<span className="text-[10px] text-gray-500">estudiantes</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex-1 h-2 bg-white/5 rounded-full overflow-hidden min-w-[100px]">
|
||||
<div
|
||||
className="h-full bg-blue-500 shadow-[0_0_10px_rgba(59,130,246,0.5)]"
|
||||
style={{ width: `${lesson.average_score * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-sm font-black">{(lesson.average_score * 100).toFixed(0)}%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-6">
|
||||
{lesson.average_score > 0.8 ? (
|
||||
<div className="flex items-center gap-1 text-green-400 text-[10px] font-black uppercase tracking-widest">
|
||||
<CheckCircle size={12} /> Alta
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-1 text-orange-400 text-[10px] font-black uppercase tracking-widest">
|
||||
<Clock size={12} /> Estable
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Summary Metrics */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="p-8 rounded-3xl bg-gradient-to-br from-blue-500/10 to-transparent border border-blue-500/20">
|
||||
<h4 className="text-[10px] font-black uppercase tracking-widest text-blue-400 mb-2">Total Enrollments</h4>
|
||||
<div className="text-3xl font-black">{analytics.total_enrollments}</div>
|
||||
</div>
|
||||
<div className="p-8 rounded-3xl bg-gradient-to-br from-purple-500/10 to-transparent border border-purple-500/20">
|
||||
<h4 className="text-[10px] font-black uppercase tracking-widest text-purple-400 mb-2">Avg. Score</h4>
|
||||
<div className="text-3xl font-black">{(analytics.average_score * 100).toFixed(1)}%</div>
|
||||
</div>
|
||||
<div className="p-8 rounded-3xl bg-gradient-to-br from-green-500/10 to-transparent border border-green-500/20">
|
||||
<h4 className="text-[10px] font-black uppercase tracking-widest text-green-400 mb-2">Retention Rate</h4>
|
||||
<div className="text-3xl font-black">
|
||||
{advanced ? Math.round((advanced.retention[advanced.retention.length - 1]?.student_count / advanced.retention[0]?.student_count) * 100) : '--'}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CourseEditorLayout>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -10,6 +10,7 @@ import FillInTheBlanksBlock from "@/components/blocks/FillInTheBlanksBlock";
|
||||
import MatchingBlock from "@/components/blocks/MatchingBlock";
|
||||
import OrderingBlock from "@/components/blocks/OrderingBlock";
|
||||
import ShortAnswerBlock from "@/components/blocks/ShortAnswerBlock";
|
||||
import DocumentBlock from "@/components/blocks/DocumentBlock";
|
||||
import {
|
||||
Save,
|
||||
X,
|
||||
@@ -175,7 +176,7 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
}
|
||||
};
|
||||
|
||||
const addBlock = (type: 'description' | 'media' | 'quiz' | 'fill-in-the-blanks' | 'matching' | 'ordering' | 'short-answer') => {
|
||||
const addBlock = (type: 'description' | 'media' | 'quiz' | 'fill-in-the-blanks' | 'matching' | 'ordering' | 'short-answer' | 'document') => {
|
||||
const newBlock: Block = {
|
||||
id: Math.random().toString(36).substr(2, 9),
|
||||
type,
|
||||
@@ -186,6 +187,7 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
...(type === 'matching' && { pairs: [{ left: "Item 1", right: "Match 1" }] }),
|
||||
...(type === 'ordering' && { items: ["Item A", "Item B"] }),
|
||||
...(type === 'short-answer' && { prompt: "Question?", correctAnswers: ["Answer"] }),
|
||||
...(type === 'document' && { url: "", title: "" }),
|
||||
};
|
||||
setBlocks([...blocks, newBlock]);
|
||||
};
|
||||
@@ -628,6 +630,15 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
onChange={(updates) => updateBlock(block.id, updates)}
|
||||
/>
|
||||
)}
|
||||
{block.type === 'document' && (
|
||||
<DocumentBlock
|
||||
id={block.id}
|
||||
title={block.title}
|
||||
url={block.url || ""}
|
||||
editMode={editMode}
|
||||
onChange={(updates) => updateBlock(block.id, updates)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -686,6 +697,13 @@ 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>
|
||||
<button
|
||||
onClick={() => addBlock('document')}
|
||||
className="flex flex-col items-center gap-2 p-6 glass hover:border-blue-500/50 transition-all group w-32"
|
||||
>
|
||||
<span className="text-2xl group-hover:scale-110 transition-transform">📚</span>
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">Reading</span>
|
||||
</button>
|
||||
|
||||
<div className="w-px h-12 bg-white/5"></div>
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { cmsApi, Course } from "@/lib/api";
|
||||
import { ArrowLeft, Save, Settings as SettingsIcon, BookOpen, Calendar, Clock } from "lucide-react";
|
||||
import { ArrowLeft, Save, Settings as SettingsIcon, BookOpen, Calendar, Clock, Download, Upload } from "lucide-react";
|
||||
|
||||
const DEFAULT_CERTIFICATE_TEMPLATE = `
|
||||
<div style="width: 800px; height: 600px; padding: 40px; text-align: center; border: 10px solid #787878; font-family: 'Times New Roman', serif; background-color: #fff; color: #333;">
|
||||
@@ -33,6 +33,8 @@ export default function CourseSettingsPage() {
|
||||
const [pacingMode, setPacingMode] = useState<'self_paced' | 'instructor_led'>("self_paced");
|
||||
const [startDate, setStartDate] = useState("");
|
||||
const [endDate, setEndDate] = useState("");
|
||||
const [exporting, setExporting] = useState(false);
|
||||
const [importing, setImporting] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchCourse = async () => {
|
||||
@@ -73,6 +75,47 @@ export default function CourseSettingsPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleExport = async () => {
|
||||
setExporting(true);
|
||||
try {
|
||||
const data = await cmsApi.exportCourse(id);
|
||||
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `course_${id}_export.json`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
} catch (err) {
|
||||
console.error("Export failed", err);
|
||||
alert("Error al exportar el curso");
|
||||
} finally {
|
||||
setExporting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleImport = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
setImporting(true);
|
||||
try {
|
||||
const text = await file.text();
|
||||
const data = JSON.parse(text);
|
||||
const newCourse = await cmsApi.importCourse(data);
|
||||
alert(`Curso importado con éxito: ${newCourse.title}`);
|
||||
router.push(`/courses/${newCourse.id}/settings`);
|
||||
} catch (err) {
|
||||
console.error("Import failed", err);
|
||||
alert("Error al importar el curso. Asegúrate de que el formato sea válido.");
|
||||
} finally {
|
||||
setImporting(false);
|
||||
if (e.target) e.target.value = ''; // Reset input
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) return (
|
||||
<div className="min-h-screen bg-[#0f1115] flex items-center justify-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
|
||||
@@ -297,6 +340,57 @@ export default function CourseSettingsPage() {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Course Portability Section */}
|
||||
<section className="bg-white/5 border border-white/10 rounded-3xl p-8">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-12 h-12 rounded-2xl bg-amber-500/10 flex items-center justify-center text-amber-400">
|
||||
<Download size={24} />
|
||||
</div>
|
||||
<h2 className="text-2xl font-black">Course Portability</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-sm font-bold text-gray-300">Export Course</h3>
|
||||
<p className="text-xs text-gray-500">
|
||||
Download the entire course structure, modules, and lessons as a JSON file.
|
||||
You can use this to backup or move content between organizations.
|
||||
</p>
|
||||
<button
|
||||
onClick={handleExport}
|
||||
disabled={exporting}
|
||||
className="flex items-center gap-2 px-6 py-3 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl font-bold transition-all active:scale-95 disabled:opacity-50"
|
||||
>
|
||||
<Download size={18} />
|
||||
{exporting ? "Exporting..." : "Download JSON"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-sm font-bold text-gray-300">Import Course</h3>
|
||||
<p className="text-xs text-gray-500">
|
||||
Upload a previously exported course JSON file. This will create a NEW course
|
||||
within the current organization based on that data.
|
||||
</p>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="file"
|
||||
accept=".json"
|
||||
onChange={handleImport}
|
||||
disabled={importing}
|
||||
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
|
||||
/>
|
||||
<button
|
||||
disabled={importing}
|
||||
className="flex items-center gap-2 px-6 py-3 bg-indigo-600/20 hover:bg-indigo-600/30 border border-indigo-500/30 text-indigo-400 rounded-xl font-bold transition-all pointer-events-none"
|
||||
>
|
||||
<Upload size={18} />
|
||||
{importing ? "Importing..." : "Upload JSON"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</CourseEditorLayout>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user