feat: add mentorship assignments and peer review enhancements
- Create `mentorship_assignments` table with relevant fields and indexes. - Add `peer_review_settings` table for lesson-specific peer review configurations. - Enhance `peer_reviews` and `course_submissions` tables with additional fields for instructor reviews and final scores. - Implement My Notes page to display user annotations with delete functionality. - Create Lesson Annotations component for managing notes with editing and deletion capabilities. - Develop Mentor Panel component to display mentor and mentee information. - Add Course Mentorships page for assigning mentors to students with modal for selection. Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
@@ -30,6 +30,7 @@ import LessonLockedView from "@/components/LessonLockedView";
|
||||
import StudentNotes from "@/components/StudentNotes";
|
||||
import CollaborativeWhiteboard from "@/components/CollaborativeWhiteboard";
|
||||
import CollaborativeDocEditor from "@/components/CollaborativeDocEditor";
|
||||
import LessonAnnotations from "@/components/LessonAnnotations";
|
||||
import { ListMusic, StickyNote } from "lucide-react";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
export default function LessonPlayerPage({ params }: { params: { id: string, lessonId: string } }) {
|
||||
@@ -641,6 +642,10 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
|
||||
</div>
|
||||
<CollaborativeDocEditor lessonId={params.lessonId} />
|
||||
</div>
|
||||
|
||||
<div className="pt-8 border-t border-black/5 dark:border-white/5 animate-in fade-in slide-in-from-bottom-8 duration-1000">
|
||||
<LessonAnnotations lessonId={params.lessonId} />
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -11,6 +11,7 @@ import DiscussionBoard from "@/components/DiscussionBoard";
|
||||
import { AnnouncementsList } from "@/components/AnnouncementsList";
|
||||
import AboutCourse from "@/components/AboutCourse";
|
||||
import CertificateModal from "@/components/CertificateModal";
|
||||
import MentorPanel from "@/components/MentorPanel";
|
||||
import { CertificateResponse } from "@/lib/api";
|
||||
|
||||
export default function CourseOutlinePage({ params }: { params: { id: string } }) {
|
||||
@@ -53,6 +54,10 @@ export default function CourseOutlinePage({ params }: { params: { id: string } }
|
||||
|
||||
if (enrollment) {
|
||||
setProgress(normalizeProgressPercent(enrollment.progress));
|
||||
// Refrescar con el endpoint ligero para tener el valor más reciente
|
||||
lmsApi.getCourseProgress(params.id)
|
||||
.then(p => setProgress(p.progress_percentage))
|
||||
.catch(() => {});
|
||||
}
|
||||
} else {
|
||||
// Even if not logged in, if there's a preview token, consider "enrolled" for UI
|
||||
@@ -171,28 +176,48 @@ export default function CourseOutlinePage({ params }: { params: { id: string } }
|
||||
|
||||
const getStatusIcon = (lessonId: string, isGraded: boolean, allowRetry: boolean) => {
|
||||
if (isLessonLocked(lessonId)) {
|
||||
return <Lock size={18} className="text-gray-600" />;
|
||||
return (
|
||||
<span title="Bloqueada — completa el prerrequisito para acceder">
|
||||
<Lock size={18} className="text-gray-400 dark:text-gray-600" />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
const grade = userGrades.find((g: UserGrade) => g.lesson_id === lessonId);
|
||||
if (!grade) {
|
||||
return <Circle size={18} className="text-black/10 dark:text-white/20" />;
|
||||
return (
|
||||
<span title="No iniciada">
|
||||
<Circle size={18} className="text-slate-300 dark:text-white/20" />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
if (isGraded) {
|
||||
const passing = courseData.passing_percentage || 70;
|
||||
if (grade.score >= passing) {
|
||||
return <CheckCircle2 size={18} className="text-green-500" />;
|
||||
// score es 0.0–1.0, passing_percentage es 0–100
|
||||
if (grade.score * 100 >= passing) {
|
||||
return (
|
||||
<span title={`Aprobada — ${Math.round(grade.score * 100)}%`}>
|
||||
<CheckCircle2 size={18} className="text-emerald-500" />
|
||||
</span>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div className="flex items-center gap-1">
|
||||
<XCircle size={18} className="text-red-500" />
|
||||
{allowRetry && <span className="text-[8px] font-black uppercase text-white/40">Repetible</span>}
|
||||
</div>
|
||||
<span title={`Reprobada — ${Math.round(grade.score * 100)}% (mínimo ${passing}%)${allowRetry ? ' · Puedes volver a intentarlo' : ''}`}>
|
||||
<div className="flex items-center gap-1">
|
||||
<XCircle size={18} className="text-red-500" />
|
||||
{allowRetry && <span className="text-[8px] font-black uppercase text-red-400/70">Reintentar</span>}
|
||||
</div>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return <CheckCircle2 size={18} className="text-black/20 dark:text-white/40" />;
|
||||
// Lección sin calificación pero completada (interacción registrada)
|
||||
return (
|
||||
<span title="Completada">
|
||||
<CheckCircle2 size={18} className="text-blue-400" />
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -293,6 +318,23 @@ export default function CourseOutlinePage({ params }: { params: { id: string } }
|
||||
{courseData.modules.reduce((acc, m) => acc + m.lessons.length, 0)}
|
||||
</span>
|
||||
</div>
|
||||
{isEnrolled && (
|
||||
<>
|
||||
<div className="w-px h-8 bg-black/10 dark:bg-white/10" />
|
||||
<div className="flex flex-col gap-2 min-w-[160px]">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[10px] font-black uppercase tracking-widest text-gray-400 dark:text-gray-600">Mi Progreso</span>
|
||||
<span className="text-[10px] font-black text-blue-500">{Math.round(progress)}%</span>
|
||||
</div>
|
||||
<div className="w-full h-2 bg-slate-200 dark:bg-white/10 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full rounded-full transition-all duration-1000 ${progress >= 100 ? 'bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.5)]' : 'bg-blue-500 shadow-[0_0_8px_rgba(59,130,246,0.4)]'}`}
|
||||
style={{ width: `${Math.min(progress, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
@@ -457,7 +499,34 @@ export default function CourseOutlinePage({ params }: { params: { id: string } }
|
||||
<AnnouncementsList courseId={params.id} isInstructor={user?.role === 'instructor' || user?.role === 'admin'} />
|
||||
</div>
|
||||
|
||||
{/* Panel de Mentoría */}
|
||||
{isEnrolled && (
|
||||
<div className="mb-8">
|
||||
<MentorPanel courseId={params.id} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-12">
|
||||
{isEnrolled && (
|
||||
<div className="flex flex-wrap items-center gap-4 px-1 mb-2">
|
||||
<span className="text-[9px] font-black uppercase tracking-widest text-gray-400 dark:text-gray-600">Estado de lecciones:</span>
|
||||
<span className="flex items-center gap-1.5 text-[10px] text-gray-500 dark:text-gray-400" title="No iniciada">
|
||||
<Circle size={14} className="text-slate-300 dark:text-white/20" /> No iniciada
|
||||
</span>
|
||||
<span className="flex items-center gap-1.5 text-[10px] text-gray-500 dark:text-gray-400" title="Completada (sin calificación)">
|
||||
<CheckCircle2 size={14} className="text-blue-400" /> Completada
|
||||
</span>
|
||||
<span className="flex items-center gap-1.5 text-[10px] text-gray-500 dark:text-gray-400" title="Aprobada">
|
||||
<CheckCircle2 size={14} className="text-emerald-500" /> Aprobada
|
||||
</span>
|
||||
<span className="flex items-center gap-1.5 text-[10px] text-gray-500 dark:text-gray-400" title="Reprobada">
|
||||
<XCircle size={14} className="text-red-500" /> Reprobada
|
||||
</span>
|
||||
<span className="flex items-center gap-1.5 text-[10px] text-gray-500 dark:text-gray-400" title="Bloqueada — completa el prerrequisito">
|
||||
<Lock size={14} className="text-gray-400 dark:text-gray-600" /> Bloqueada
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{courseData.modules.map((module: Module, idx: number) => (
|
||||
<div key={module.id} className="relative">
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
|
||||
@@ -0,0 +1,199 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { lmsApi, LessonAnnotation, Course, Module } from "@/lib/api";
|
||||
import { StickyNote, Clock, Trash2, ChevronRight, BookOpen } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { formatDistanceToNow } from "date-fns";
|
||||
import { es } from "date-fns/locale";
|
||||
|
||||
function formatTimestamp(secs: number): string {
|
||||
const m = Math.floor(secs / 60);
|
||||
const s = Math.floor(secs % 60);
|
||||
return `${m}:${s.toString().padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
type CourseCache = Record<string, Course & { modules: Module[] }>;
|
||||
|
||||
export default function MyNotesPage() {
|
||||
const [annotations, setAnnotations] = useState<LessonAnnotation[]>([]);
|
||||
const [courses, setCourses] = useState<CourseCache>({});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [confirmDelete, setConfirmDelete] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchAll = async () => {
|
||||
try {
|
||||
const data = await lmsApi.getMyAnnotations();
|
||||
setAnnotations(data);
|
||||
|
||||
const courseIds = [...new Set(data.map(a => a.course_id))];
|
||||
const cache: CourseCache = {};
|
||||
await Promise.all(courseIds.map(async id => {
|
||||
try {
|
||||
const outline = await lmsApi.getCourseOutline(id);
|
||||
cache[id] = { ...outline.course, modules: outline.modules };
|
||||
} catch { /* ignorar */ }
|
||||
}));
|
||||
setCourses(cache);
|
||||
} catch (err) {
|
||||
console.error("Error fetching annotations:", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchAll();
|
||||
}, []);
|
||||
|
||||
const handleDelete = async (ann: LessonAnnotation) => {
|
||||
try {
|
||||
await lmsApi.deleteLessonAnnotation(ann.lesson_id, ann.id);
|
||||
setAnnotations(prev => prev.filter(a => a.id !== ann.id));
|
||||
} catch (err) {
|
||||
console.error("Error deleting annotation:", err);
|
||||
} finally {
|
||||
setConfirmDelete(null);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="p-20 text-center animate-pulse text-gray-500 font-bold uppercase tracking-widest">
|
||||
Cargando Notas...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Agrupar por curso
|
||||
const grouped: Record<string, LessonAnnotation[]> = {};
|
||||
for (const ann of annotations) {
|
||||
if (!grouped[ann.course_id]) grouped[ann.course_id] = [];
|
||||
grouped[ann.course_id].push(ann);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto px-6 py-20">
|
||||
{/* Header */}
|
||||
<div className="mb-12">
|
||||
<div className="flex items-center gap-4 mb-2">
|
||||
<div className="w-12 h-12 rounded-2xl bg-amber-500/10 border border-amber-500/20 flex items-center justify-center">
|
||||
<StickyNote size={24} className="text-amber-400" />
|
||||
</div>
|
||||
<h1 className="text-4xl font-black tracking-tight text-white">Mis Notas</h1>
|
||||
</div>
|
||||
<p className="text-gray-500 font-bold uppercase tracking-widest text-[10px]">
|
||||
Todas las anotaciones que tomaste durante tus lecciones
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{annotations.length === 0 ? (
|
||||
<div className="py-20 text-center rounded-[2.5rem] border border-white/5 bg-white/[0.02]">
|
||||
<div className="w-20 h-20 rounded-full bg-white/5 flex items-center justify-center mx-auto mb-6">
|
||||
<StickyNote size={32} className="text-gray-600" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-2">Aún no tienes notas</h3>
|
||||
<p className="text-gray-500 max-w-md mx-auto">
|
||||
Cuando estudies una lección, usa el panel de notas para guardar ideas importantes.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-10">
|
||||
{Object.entries(grouped).map(([courseId, notes]) => {
|
||||
const course = courses[courseId];
|
||||
return (
|
||||
<section key={courseId}>
|
||||
{/* Curso header */}
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-8 h-8 rounded-xl bg-amber-500/10 flex items-center justify-center">
|
||||
<BookOpen size={14} className="text-amber-400" />
|
||||
</div>
|
||||
<h2 className="text-sm font-black uppercase tracking-widest text-amber-400">
|
||||
{course?.title ?? `Curso ${courseId.substring(0, 8)}`}
|
||||
</h2>
|
||||
<span className="text-[10px] text-gray-600 font-bold">
|
||||
{notes.length} nota{notes.length > 1 ? "s" : ""}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4">
|
||||
{notes.map(ann => {
|
||||
const lesson = course?.modules
|
||||
?.flatMap(m => m.lessons)
|
||||
.find(l => l.id === ann.lesson_id);
|
||||
const lessonTitle = lesson?.title ?? `Lección ${ann.lesson_id.substring(0, 8)}`;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={ann.id}
|
||||
className="group rounded-3xl border border-white/5 hover:border-amber-500/30 bg-white/[0.02] hover:bg-amber-500/[0.02] p-5 transition-all duration-300"
|
||||
>
|
||||
{/* Lesson title + badge de posición */}
|
||||
<div className="flex items-start justify-between gap-4 mb-3">
|
||||
<div className="min-w-0">
|
||||
<p className="text-[10px] font-black uppercase tracking-widest text-gray-500 mb-1 truncate">
|
||||
{lessonTitle}
|
||||
</p>
|
||||
{ann.position_data?.type === "timestamp" && (
|
||||
<span className="inline-flex items-center gap-1 text-[10px] font-black text-amber-500 bg-amber-500/10 px-2 py-0.5 rounded-full">
|
||||
<Clock size={9} />
|
||||
{formatTimestamp(ann.position_data.value)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-[10px] text-gray-600 shrink-0">
|
||||
{formatDistanceToNow(new Date(ann.updated_at), { addSuffix: true, locale: es })}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Contenido */}
|
||||
<p className="text-sm text-gray-300 whitespace-pre-wrap leading-relaxed mb-4">
|
||||
{ann.content}
|
||||
</p>
|
||||
|
||||
{/* Acciones */}
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<Link
|
||||
href={`/courses/${courseId}/lessons/${ann.lesson_id}`}
|
||||
className="flex items-center gap-1.5 text-xs font-black text-amber-400 hover:text-amber-300 uppercase tracking-widest transition-colors"
|
||||
>
|
||||
Ir a la lección <ChevronRight size={14} />
|
||||
</Link>
|
||||
|
||||
{confirmDelete === ann.id ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-[10px] text-red-400 font-bold">¿Eliminar?</span>
|
||||
<button
|
||||
onClick={() => handleDelete(ann)}
|
||||
className="px-3 py-1.5 bg-red-500 hover:bg-red-400 text-white text-[10px] font-black uppercase tracking-widest rounded-lg transition-all"
|
||||
>
|
||||
Sí
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setConfirmDelete(null)}
|
||||
className="px-3 py-1.5 bg-white/10 hover:bg-white/20 text-white text-[10px] font-black uppercase tracking-widest rounded-lg transition-all"
|
||||
>
|
||||
No
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => setConfirmDelete(ann.id)}
|
||||
className="p-2 rounded-xl hover:bg-red-500/10 text-gray-600 hover:text-red-400 transition-all opacity-0 group-hover:opacity-100"
|
||||
title="Eliminar nota"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -213,6 +213,9 @@ export default function AppHeader() {
|
||||
<Link href="/bookmarks" className="flex items-center gap-2 text-base font-black uppercase tracking-wider transition-colors text-slate-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white">
|
||||
{t('nav.bookmarks')}
|
||||
</Link>
|
||||
<Link href="/my-notes" className="flex items-center gap-2 text-base font-black uppercase tracking-wider transition-colors text-slate-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white">
|
||||
MIS NOTAS
|
||||
</Link>
|
||||
|
||||
<Link href={`/profile/${user.id}`} className="flex items-center gap-2 text-base font-black uppercase tracking-wider transition-colors text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300">
|
||||
MI PORTAFOLIO
|
||||
@@ -328,6 +331,13 @@ export default function AppHeader() {
|
||||
>
|
||||
{t('nav.bookmarks')}
|
||||
</Link>
|
||||
<Link
|
||||
href="/my-notes"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
className="text-sm font-black uppercase tracking-widest text-slate-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-white border-l-2 border-transparent hover:border-blue-500 pl-4 py-2 transition-all"
|
||||
>
|
||||
MIS NOTAS
|
||||
</Link>
|
||||
{user && (
|
||||
<Link
|
||||
href={`/profile/${user.id}`}
|
||||
|
||||
@@ -0,0 +1,250 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useCallback, useRef } from "react";
|
||||
import { lmsApi, LessonAnnotation, CreateAnnotationPayload } from "@/lib/api";
|
||||
import {
|
||||
StickyNote,
|
||||
Plus,
|
||||
Pencil,
|
||||
Trash2,
|
||||
Check,
|
||||
X,
|
||||
Loader2,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
Clock,
|
||||
} from "lucide-react";
|
||||
|
||||
type Props = {
|
||||
lessonId: string;
|
||||
/** Posición actual del reproductor de video (segundos), si aplica */
|
||||
videoTimestamp?: number;
|
||||
};
|
||||
|
||||
function formatTimestamp(secs: number): string {
|
||||
const m = Math.floor(secs / 60);
|
||||
const s = Math.floor(secs % 60);
|
||||
return `${m}:${s.toString().padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
function timeAgo(iso: string): string {
|
||||
const diff = (Date.now() - new Date(iso).getTime()) / 1000;
|
||||
if (diff < 60) return "Hace un momento";
|
||||
if (diff < 3600) return `Hace ${Math.floor(diff / 60)}m`;
|
||||
if (diff < 86400) return `Hace ${Math.floor(diff / 3600)}h`;
|
||||
return new Date(iso).toLocaleDateString("es-MX", { day: "numeric", month: "short" });
|
||||
}
|
||||
|
||||
export default function LessonAnnotations({ lessonId, videoTimestamp }: Props) {
|
||||
const [annotations, setAnnotations] = useState<LessonAnnotation[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [draft, setDraft] = useState("");
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [editingId, setEditingId] = useState<string | null>(null);
|
||||
const [editContent, setEditContent] = useState("");
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const data = await lmsApi.getLessonAnnotations(lessonId);
|
||||
setAnnotations(data);
|
||||
} catch {
|
||||
// silencioso
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [lessonId]);
|
||||
|
||||
useEffect(() => { load(); }, [load]);
|
||||
|
||||
// Auto-foco al abrir
|
||||
useEffect(() => {
|
||||
if (open && textareaRef.current) textareaRef.current.focus();
|
||||
}, [open]);
|
||||
|
||||
const handleCreate = async () => {
|
||||
if (!draft.trim()) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
const payload: CreateAnnotationPayload = { content: draft.trim() };
|
||||
if (videoTimestamp !== undefined) {
|
||||
payload.position_data = { type: "timestamp", value: Math.round(videoTimestamp) };
|
||||
}
|
||||
const created = await lmsApi.createLessonAnnotation(lessonId, payload);
|
||||
setAnnotations(prev => [...prev, created]);
|
||||
setDraft("");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const startEdit = (ann: LessonAnnotation) => {
|
||||
setEditingId(ann.id);
|
||||
setEditContent(ann.content);
|
||||
};
|
||||
|
||||
const handleUpdate = async (ann: LessonAnnotation) => {
|
||||
if (!editContent.trim()) return;
|
||||
try {
|
||||
const updated = await lmsApi.updateLessonAnnotation(lessonId, ann.id, {
|
||||
content: editContent.trim(),
|
||||
position_data: ann.position_data,
|
||||
});
|
||||
setAnnotations(prev => prev.map(a => a.id === updated.id ? updated : a));
|
||||
setEditingId(null);
|
||||
} catch {
|
||||
// silencioso
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
try {
|
||||
await lmsApi.deleteLessonAnnotation(lessonId, id);
|
||||
setAnnotations(prev => prev.filter(a => a.id !== id));
|
||||
} catch {
|
||||
// silencioso
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="rounded-2xl border border-slate-200 dark:border-white/10 bg-white dark:bg-white/[0.02] overflow-hidden">
|
||||
{/* Header colapsable */}
|
||||
<button
|
||||
onClick={() => setOpen(v => !v)}
|
||||
className="w-full flex items-center justify-between p-4 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-xl bg-amber-500/10 flex items-center justify-center">
|
||||
<StickyNote size={16} className="text-amber-500" />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<p className="font-black text-sm text-slate-900 dark:text-white">Mis Notas</p>
|
||||
<p className="text-[10px] text-slate-400">
|
||||
{annotations.length === 0 ? "Sin notas" : `${annotations.length} nota${annotations.length > 1 ? "s" : ""}`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{open ? (
|
||||
<ChevronUp size={16} className="text-slate-400" />
|
||||
) : (
|
||||
<ChevronDown size={16} className="text-slate-400" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="border-t border-slate-100 dark:border-white/5 p-4 space-y-4">
|
||||
{/* Editor de nueva nota */}
|
||||
<div className="space-y-2">
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
rows={3}
|
||||
value={draft}
|
||||
onChange={e => setDraft(e.target.value)}
|
||||
onKeyDown={e => {
|
||||
if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) handleCreate();
|
||||
}}
|
||||
placeholder={videoTimestamp !== undefined
|
||||
? `Nota en ${formatTimestamp(videoTimestamp)}… (Ctrl+Enter para guardar)`
|
||||
: "Escribe una nota para esta lección… (Ctrl+Enter para guardar)"}
|
||||
className="w-full bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl px-3 py-2.5 text-sm text-slate-900 dark:text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-amber-400/40 resize-none"
|
||||
/>
|
||||
{videoTimestamp !== undefined && (
|
||||
<p className="text-[10px] text-amber-500 font-bold flex items-center gap-1">
|
||||
<Clock size={10} /> Se guardará en {formatTimestamp(videoTimestamp)}
|
||||
</p>
|
||||
)}
|
||||
<button
|
||||
onClick={handleCreate}
|
||||
disabled={saving || !draft.trim()}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-amber-500 hover:bg-amber-400 disabled:opacity-50 text-white text-xs font-black uppercase tracking-widest rounded-xl transition-all active:scale-95"
|
||||
>
|
||||
{saving ? <Loader2 size={14} className="animate-spin" /> : <Plus size={14} />}
|
||||
Guardar nota
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Lista de notas */}
|
||||
{loading ? (
|
||||
<div className="flex justify-center py-4">
|
||||
<Loader2 size={20} className="text-amber-400 animate-spin" />
|
||||
</div>
|
||||
) : annotations.length === 0 ? (
|
||||
<p className="text-xs text-slate-400 italic text-center py-2">
|
||||
No tienes notas en esta lección aún.
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-2.5 max-h-64 overflow-y-auto pr-1">
|
||||
{annotations.map(ann => (
|
||||
<div
|
||||
key={ann.id}
|
||||
className="bg-amber-50 dark:bg-amber-500/5 border border-amber-200/60 dark:border-amber-500/15 rounded-xl p-3 group"
|
||||
>
|
||||
{/* Posición/timestamp */}
|
||||
{ann.position_data?.type === "timestamp" && (
|
||||
<span className="inline-flex items-center gap-1 text-[10px] font-black text-amber-600 dark:text-amber-400 bg-amber-100 dark:bg-amber-500/15 px-2 py-0.5 rounded-full mb-1.5">
|
||||
<Clock size={9} />
|
||||
{formatTimestamp(ann.position_data.value)}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{editingId === ann.id ? (
|
||||
<div className="space-y-2">
|
||||
<textarea
|
||||
rows={3}
|
||||
value={editContent}
|
||||
onChange={e => setEditContent(e.target.value)}
|
||||
autoFocus
|
||||
className="w-full bg-white dark:bg-black/20 border border-amber-300 dark:border-amber-500/30 rounded-lg px-3 py-2 text-sm text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-amber-400/40 resize-none"
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => handleUpdate(ann)}
|
||||
disabled={!editContent.trim()}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 bg-amber-500 hover:bg-amber-400 disabled:opacity-50 text-white text-[10px] font-black uppercase tracking-widest rounded-lg transition-all"
|
||||
>
|
||||
<Check size={12} /> Guardar
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setEditingId(null)}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 bg-slate-200 dark:bg-white/10 hover:bg-slate-300 dark:hover:bg-white/20 text-slate-600 dark:text-white text-[10px] font-black uppercase tracking-widest rounded-lg transition-all"
|
||||
>
|
||||
<X size={12} /> Cancelar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<p className="text-sm text-slate-700 dark:text-slate-200 whitespace-pre-wrap leading-relaxed">
|
||||
{ann.content}
|
||||
</p>
|
||||
<div className="flex items-center justify-between mt-2">
|
||||
<span className="text-[10px] text-slate-400">{timeAgo(ann.updated_at)}</span>
|
||||
<div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button
|
||||
onClick={() => startEdit(ann)}
|
||||
className="p-1.5 hover:bg-amber-200/60 dark:hover:bg-amber-500/20 text-amber-600 dark:text-amber-400 rounded-lg transition-all"
|
||||
title="Editar nota"
|
||||
>
|
||||
<Pencil size={12} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(ann.id)}
|
||||
className="p-1.5 hover:bg-red-100 dark:hover:bg-red-500/20 text-red-400 rounded-lg transition-all"
|
||||
title="Eliminar nota"
|
||||
>
|
||||
<Trash2 size={12} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,138 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { lmsApi, MentorshipView } from "@/lib/api";
|
||||
import { Award, Mail, UserCircle, ChevronDown, ChevronUp, Users } from "lucide-react";
|
||||
|
||||
type Props = {
|
||||
courseId: string;
|
||||
};
|
||||
|
||||
export default function MentorPanel({ courseId }: Props) {
|
||||
const [mentor, setMentor] = useState<MentorshipView | null | undefined>(undefined);
|
||||
const [mentees, setMentees] = useState<MentorshipView[]>([]);
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
Promise.all([
|
||||
lmsApi.getMyMentor(courseId),
|
||||
lmsApi.getMyMentees(courseId),
|
||||
]).then(([m, ms]) => {
|
||||
setMentor(m);
|
||||
setMentees(ms);
|
||||
}).catch(() => {
|
||||
setMentor(null);
|
||||
setMentees([]);
|
||||
});
|
||||
}, [courseId]);
|
||||
|
||||
// Si no hay mentor asignado ni mentoreados, no renderizar nada
|
||||
if (mentor === undefined) return null;
|
||||
if (mentor === null && mentees.length === 0) return null;
|
||||
|
||||
const hasMentor = mentor !== null;
|
||||
const hasMentees = mentees.length > 0;
|
||||
|
||||
return (
|
||||
<div className="rounded-2xl border border-slate-200 dark:border-white/10 bg-white dark:bg-white/[0.02] overflow-hidden">
|
||||
<button
|
||||
onClick={() => setOpen(v => !v)}
|
||||
className="w-full flex items-center justify-between p-4 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-xl bg-blue-500/10 flex items-center justify-center">
|
||||
<Award size={16} className="text-blue-500" />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<p className="font-black text-sm text-slate-900 dark:text-white">
|
||||
{hasMentees ? "Mentoría" : "Mi Mentor"}
|
||||
</p>
|
||||
<p className="text-[10px] text-slate-400">
|
||||
{hasMentees
|
||||
? `${mentees.length} alumno${mentees.length > 1 ? "s" : ""} a tu cargo`
|
||||
: hasMentor
|
||||
? mentor!.mentor_name
|
||||
: "Sin mentor asignado"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{open ? (
|
||||
<ChevronUp size={16} className="text-slate-400" />
|
||||
) : (
|
||||
<ChevronDown size={16} className="text-slate-400" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="border-t border-slate-100 dark:border-white/5 p-4 space-y-4">
|
||||
{/* Panel de mi mentor */}
|
||||
{hasMentor && (
|
||||
<section>
|
||||
<p className="text-[10px] font-black uppercase tracking-widest text-slate-400 mb-3">
|
||||
Tu Mentor
|
||||
</p>
|
||||
<div className="flex items-center gap-4 p-4 rounded-xl bg-blue-50 dark:bg-blue-500/5 border border-blue-100 dark:border-blue-500/15">
|
||||
<div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-500/20 flex items-center justify-center shrink-0 overflow-hidden">
|
||||
{mentor!.mentor_avatar ? (
|
||||
<img src={mentor!.mentor_avatar} alt="" className="w-full h-full object-cover" />
|
||||
) : (
|
||||
<UserCircle size={24} className="text-blue-400" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-black text-sm text-slate-900 dark:text-white truncate">
|
||||
{mentor!.mentor_name}
|
||||
</p>
|
||||
<a
|
||||
href={`mailto:${mentor!.mentor_email}`}
|
||||
className="flex items-center gap-1 text-[10px] text-blue-500 hover:text-blue-400 font-bold mt-0.5 transition-colors"
|
||||
>
|
||||
<Mail size={10} /> {mentor!.mentor_email}
|
||||
</a>
|
||||
{mentor!.notes && (
|
||||
<p className="text-[10px] text-slate-400 italic mt-1 line-clamp-2">
|
||||
{mentor!.notes}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Panel de mentoreados */}
|
||||
{hasMentees && (
|
||||
<section>
|
||||
<p className="text-[10px] font-black uppercase tracking-widest text-slate-400 mb-3 flex items-center gap-2">
|
||||
<Users size={10} /> Alumnos a tu cargo
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
{mentees.map(m => (
|
||||
<div key={m.id} className="flex items-center gap-3 p-3 rounded-xl bg-slate-50 dark:bg-white/5">
|
||||
<div className="w-9 h-9 rounded-full bg-slate-200 dark:bg-white/10 flex items-center justify-center shrink-0 overflow-hidden">
|
||||
{m.student_avatar ? (
|
||||
<img src={m.student_avatar} alt="" className="w-full h-full object-cover" />
|
||||
) : (
|
||||
<UserCircle size={18} className="text-slate-400" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-bold text-slate-800 dark:text-white truncate">
|
||||
{m.student_name}
|
||||
</p>
|
||||
<a
|
||||
href={`mailto:${m.student_email}`}
|
||||
className="text-[10px] text-blue-400 hover:text-blue-300 transition-colors flex items-center gap-1"
|
||||
>
|
||||
<Mail size={9} /> {m.student_email}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { lmsApi, Notification } from "@/lib/api";
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { lmsApi, getLmsApiUrl, getToken, Notification } from "@/lib/api";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import { Bell, X, Calendar, Info, AlertTriangle, CheckCircle2 } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
@@ -9,30 +9,42 @@ import Link from "next/link";
|
||||
export default function NotificationCenter() {
|
||||
const [notifications, setNotifications] = useState<Notification[]>([]);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const sseRef = useRef<EventSource | null>(null);
|
||||
|
||||
const { user } = useAuth();
|
||||
|
||||
const fetchNotifications = async () => {
|
||||
if (!user) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await lmsApi.getNotifications();
|
||||
setNotifications(data);
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch notifications", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (user) {
|
||||
fetchNotifications();
|
||||
// Poll every 5 minutes
|
||||
const interval = setInterval(fetchNotifications, 300000);
|
||||
return () => clearInterval(interval);
|
||||
}
|
||||
if (!user) return;
|
||||
|
||||
// Carga inicial
|
||||
lmsApi.getNotifications()
|
||||
.then(setNotifications)
|
||||
.catch(() => {})
|
||||
.finally(() => setLoading(false));
|
||||
|
||||
// SSE: actualizaciones en tiempo real
|
||||
const token = getToken() ?? "";
|
||||
const baseUrl = getLmsApiUrl();
|
||||
const url = `${baseUrl}/notifications/stream${token ? `?preview_token=${encodeURIComponent(token)}` : ""}`;
|
||||
const es = new EventSource(url);
|
||||
sseRef.current = es;
|
||||
|
||||
es.onmessage = (e) => {
|
||||
try {
|
||||
const data = JSON.parse(e.data as string) as {
|
||||
unread_count: number;
|
||||
notifications: Notification[];
|
||||
};
|
||||
setNotifications(data.notifications);
|
||||
setLoading(false);
|
||||
} catch { /* ignorar */ }
|
||||
};
|
||||
|
||||
return () => {
|
||||
es.close();
|
||||
sseRef.current = null;
|
||||
};
|
||||
}, [user]);
|
||||
|
||||
const markAsRead = async (id: string) => {
|
||||
|
||||
@@ -1,7 +1,329 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { lmsApi, Block, CourseSubmission, PeerReview } from "@/lib/api";
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { lmsApi, Block, CourseSubmission, PeerReview, PeerReviewSettings } from "@/lib/api";
|
||||
|
||||
interface PeerReviewPlayerProps {
|
||||
courseId: string;
|
||||
lessonId: string;
|
||||
block: Block;
|
||||
}
|
||||
|
||||
export default function PeerReviewPlayer({ courseId, lessonId, block }: PeerReviewPlayerProps) {
|
||||
const [view, setView] = useState<'submit' | 'dashboard' | 'reviewing'>('submit');
|
||||
const [submissionContent, setSubmissionContent] = useState("");
|
||||
const [mySubmission, setMySubmission] = useState<CourseSubmission | null>(null);
|
||||
const [peerAssignment, setPeerAssignment] = useState<CourseSubmission | null>(null);
|
||||
const [feedbackReceived, setFeedbackReceived] = useState<PeerReview[]>([]);
|
||||
const [settings, setSettings] = useState<PeerReviewSettings | null>(null);
|
||||
|
||||
// Review form state
|
||||
const [reviewScore, setReviewScore] = useState(80);
|
||||
const [reviewFeedback, setReviewFeedback] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [initLoading, setInitLoading] = useState(true);
|
||||
const [message, setMessage] = useState("");
|
||||
|
||||
const loadStatus = useCallback(async () => {
|
||||
try {
|
||||
const [sub, reviews, cfg] = await Promise.all([
|
||||
lmsApi.getMySubmission(courseId, lessonId).catch(() => null),
|
||||
lmsApi.getMySubmissionFeedback(courseId, lessonId).catch(() => [] as PeerReview[]),
|
||||
lmsApi.getPeerReviewSettings(courseId, lessonId).catch(() => null),
|
||||
]);
|
||||
if (sub) {
|
||||
setMySubmission(sub);
|
||||
setSubmissionContent(sub.content);
|
||||
setView('dashboard');
|
||||
}
|
||||
setFeedbackReceived(reviews);
|
||||
setSettings(cfg);
|
||||
} finally {
|
||||
setInitLoading(false);
|
||||
}
|
||||
}, [courseId, lessonId]);
|
||||
|
||||
useEffect(() => { loadStatus(); }, [loadStatus]);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const sub = await lmsApi.submitAssignment(courseId, lessonId, submissionContent);
|
||||
setMySubmission(sub);
|
||||
setView('dashboard');
|
||||
setMessage("Entrega guardada correctamente.");
|
||||
await loadStatus();
|
||||
} catch (err: any) {
|
||||
setMessage("Error al enviar: " + (err.message ?? "Intenta de nuevo."));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleStartReview = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const assignment = await lmsApi.getPeerReviewAssignment(courseId, lessonId);
|
||||
if (!assignment) {
|
||||
setMessage("No hay entregas disponibles para revisar. Inténtalo más tarde.");
|
||||
} else {
|
||||
setPeerAssignment(assignment);
|
||||
setView('reviewing');
|
||||
setMessage("");
|
||||
}
|
||||
} catch (err: any) {
|
||||
setMessage("Error al obtener asignación: " + (err.message ?? ""));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmitReview = async () => {
|
||||
if (!peerAssignment) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
await lmsApi.submitPeerReview(courseId, lessonId, peerAssignment.id, reviewScore, reviewFeedback);
|
||||
setMessage("Revisión enviada. ¡Gracias por tu feedback!");
|
||||
setPeerAssignment(null);
|
||||
setReviewFeedback("");
|
||||
setView('dashboard');
|
||||
await loadStatus();
|
||||
} catch (err: any) {
|
||||
setMessage("Error al enviar la revisión: " + (err.message ?? ""));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// ─── Calificación final ponderada ──────────────────────────────────────────
|
||||
const peerReviews = feedbackReceived.filter(r => !r.is_instructor_review);
|
||||
const instructorReview = feedbackReceived.find(r => r.is_instructor_review);
|
||||
const peerAvg = peerReviews.length > 0
|
||||
? peerReviews.reduce((a, r) => a + r.score, 0) / peerReviews.length
|
||||
: null;
|
||||
|
||||
let finalScore: number | null = null;
|
||||
if (mySubmission?.final_score != null) {
|
||||
finalScore = mySubmission.final_score;
|
||||
} else if (settings && peerAvg !== null && instructorReview) {
|
||||
finalScore = peerAvg * (settings.peer_weight / 100) + instructorReview.score * (settings.instructor_weight / 100);
|
||||
} else if (peerAvg !== null && !instructorReview) {
|
||||
finalScore = peerAvg;
|
||||
} else if (instructorReview && peerAvg === null) {
|
||||
finalScore = instructorReview.score;
|
||||
}
|
||||
|
||||
const statusLabel = mySubmission?.status === 'graded' ? '✅ Calificado'
|
||||
: mySubmission?.status === 'under_review' ? '🔄 En revisión'
|
||||
: '⏳ Pendiente de revisiones';
|
||||
|
||||
if (initLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="w-6 h-6 border-2 border-purple-500 border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (view === 'reviewing' && peerAssignment) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<button onClick={() => setView('dashboard')} className="text-sm text-gray-400 hover:text-white mb-4">
|
||||
← Volver al panel
|
||||
</button>
|
||||
<div className="p-6 bg-white/5 border border-white/10 rounded-2xl space-y-4">
|
||||
<h3 className="font-bold text-lg text-purple-400">Revisando entrega de un compañero</h3>
|
||||
<div className="p-4 bg-black/30 rounded-xl text-gray-300 whitespace-pre-wrap">
|
||||
{peerAssignment.content}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6 bg-white/5 border border-white/10 rounded-2xl space-y-6">
|
||||
<h4 className="font-bold text-white">Tu Feedback</h4>
|
||||
|
||||
{block.reviewCriteria && (
|
||||
<div className="text-sm text-gray-400 bg-blue-500/10 p-4 rounded-xl">
|
||||
<strong>Criterios:</strong> {block.reviewCriteria}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{settings && (
|
||||
<div className="text-xs text-slate-400 bg-purple-500/5 border border-purple-500/10 rounded-xl p-3">
|
||||
Revisiones requeridas por entrega: <strong>{settings.required_reviews}</strong> ·
|
||||
Peso pares: <strong>{settings.peer_weight}%</strong> · Peso instructor: <strong>{settings.instructor_weight}%</strong>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-bold uppercase text-gray-500 mb-2">
|
||||
Puntuación: <span className="text-purple-400">{reviewScore}/100</span>
|
||||
</label>
|
||||
<input
|
||||
type="range" min={0} max={100} step={1}
|
||||
value={reviewScore}
|
||||
onChange={(e) => setReviewScore(parseInt(e.target.value))}
|
||||
className="w-full accent-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-bold uppercase text-gray-500 mb-2">Comentarios</label>
|
||||
<textarea
|
||||
value={reviewFeedback}
|
||||
onChange={(e) => setReviewFeedback(e.target.value)}
|
||||
className="w-full bg-black/20 border border-white/10 rounded-xl p-4 min-h-[120px] text-white focus:outline-none focus:border-purple-500"
|
||||
placeholder="Proporciona feedback constructivo y detallado..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleSubmitReview}
|
||||
disabled={loading || !reviewFeedback.trim()}
|
||||
className="w-full py-3 font-bold uppercase tracking-widest text-xs rounded-xl bg-purple-600 hover:bg-purple-700 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{loading ? "Enviando..." : "Enviar Revisión"}
|
||||
</button>
|
||||
{message && <p className="text-center text-sm text-red-400">{message}</p>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (view === 'dashboard') {
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{/* Estado y nota final */}
|
||||
<div className="p-6 bg-green-500/10 border border-green-500/20 rounded-2xl flex items-start gap-4">
|
||||
<div className="text-2xl">✅</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="font-bold text-green-400">Trabajo Entregado</h3>
|
||||
<p className="text-xs text-green-300/70 mt-1">{statusLabel}</p>
|
||||
|
||||
{/* Nota final ponderada */}
|
||||
{finalScore !== null && (
|
||||
<div className="mt-3 flex items-center gap-3">
|
||||
<div className="px-4 py-2 bg-yellow-500/10 border border-yellow-500/20 rounded-xl">
|
||||
<span className="text-xs text-yellow-400/70 font-bold uppercase tracking-wider">Nota final</span>
|
||||
<div className="text-2xl font-black text-yellow-400">{finalScore.toFixed(1)}<span className="text-sm font-normal text-yellow-400/60">/100</span></div>
|
||||
</div>
|
||||
{settings && (
|
||||
<div className="text-xs text-slate-400">
|
||||
<div>Pares ({settings.peer_weight}%): {peerAvg !== null ? peerAvg.toFixed(1) : '—'}</div>
|
||||
<div>Instructor ({settings.instructor_weight}%): {instructorReview ? instructorReview.score : '—'}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-4">
|
||||
<h4 className="font-bold text-sm uppercase text-gray-500 tracking-widest">Acciones</h4>
|
||||
<button
|
||||
onClick={handleStartReview}
|
||||
disabled={loading}
|
||||
className="w-full p-6 bg-white/5 border border-white/10 rounded-2xl hover:bg-purple-500/10 hover:border-purple-500/30 transition-all text-left group disabled:opacity-50"
|
||||
>
|
||||
<span className="text-2xl mb-2 block group-hover:scale-110 transition-transform">👀</span>
|
||||
<div className="font-bold text-purple-400">Revisar a un compañero</div>
|
||||
<div className="text-xs text-gray-500 mt-1">Gana crédito revisando el trabajo de otros alumnos.</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setView('submit')}
|
||||
className="w-full p-6 bg-white/5 border border-white/10 rounded-2xl hover:bg-blue-500/10 hover:border-blue-500/30 transition-all text-left"
|
||||
>
|
||||
<span className="text-2xl mb-2 block">📝</span>
|
||||
<div className="font-bold text-blue-400">Editar mi entrega</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h4 className="font-bold text-sm uppercase text-gray-500 tracking-widest">
|
||||
Feedback Recibido ({feedbackReceived.length})
|
||||
</h4>
|
||||
{feedbackReceived.length === 0 ? (
|
||||
<div className="p-6 bg-white/5 border border-white/10 rounded-2xl text-center text-gray-500 italic text-sm">
|
||||
Aún no has recibido revisiones. ¡Vuelve pronto!
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4 max-h-80 overflow-y-auto">
|
||||
{feedbackReceived.map(review => (
|
||||
<div
|
||||
key={review.id}
|
||||
className={`p-4 border rounded-xl space-y-2 ${review.is_instructor_review
|
||||
? "bg-yellow-500/5 border-yellow-500/20"
|
||||
: "bg-white/5 border-white/10"
|
||||
}`}
|
||||
>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className={`text-xs font-bold uppercase tracking-wider ${review.is_instructor_review ? "text-yellow-400" : "text-gray-500"}`}>
|
||||
{review.is_instructor_review ? "⭐ Instructor" : "Par evaluador"}
|
||||
</span>
|
||||
<span className={`text-sm font-bold ${review.is_instructor_review ? "text-yellow-400" : "text-purple-400"}`}>
|
||||
{review.score}/100
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-300">{review.feedback}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{message && <p className="text-center text-sm text-gray-400">{message}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Default: Submit View
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-xl font-bold flex items-center gap-2">
|
||||
<span className="text-purple-400">👥</span> {block.title || "Evaluación entre Pares"}
|
||||
</h3>
|
||||
<div className="p-6 bg-white/5 border border-white/10 rounded-2xl whitespace-pre-wrap text-gray-300">
|
||||
{block.prompt || "Entrega tu trabajo a continuación."}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{settings && (
|
||||
<div className="text-xs text-slate-400 bg-purple-500/5 border border-purple-500/10 rounded-xl p-3">
|
||||
Se requieren <strong>{settings.required_reviews}</strong> revisiones ·
|
||||
Nota final: <strong>{settings.peer_weight}%</strong> pares + <strong>{settings.instructor_weight}%</strong> instructor
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-4">
|
||||
<textarea
|
||||
value={submissionContent}
|
||||
onChange={(e) => setSubmissionContent(e.target.value)}
|
||||
className="w-full bg-black/20 border border-white/10 rounded-2xl p-6 min-h-[200px] text-white focus:outline-none focus:border-purple-500 transition-all"
|
||||
placeholder="Escribe tu entrega aquí o pega un enlace..."
|
||||
/>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
{mySubmission && (
|
||||
<button onClick={() => setView('dashboard')} className="text-sm text-gray-500 hover:text-white">
|
||||
Cancelar
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
disabled={loading || !submissionContent.trim()}
|
||||
className="px-8 py-3 rounded-xl font-bold uppercase tracking-widest text-xs bg-blue-600 hover:bg-blue-700 transition-colors disabled:opacity-50 ml-auto"
|
||||
>
|
||||
{loading ? "Enviando..." : (mySubmission ? "Actualizar Entrega" : "Entregar Tarea")}
|
||||
</button>
|
||||
</div>
|
||||
{message && <p className="text-center text-sm text-gray-400">{message}</p>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
interface PeerReviewPlayerProps {
|
||||
courseId: string;
|
||||
|
||||
@@ -350,6 +350,9 @@ export interface CourseSubmission {
|
||||
lesson_id: string;
|
||||
content: string;
|
||||
submitted_at: string;
|
||||
final_score?: number | null;
|
||||
review_count: number;
|
||||
status: 'pending' | 'under_review' | 'graded';
|
||||
}
|
||||
|
||||
export interface PeerReview {
|
||||
@@ -358,9 +361,22 @@ export interface PeerReview {
|
||||
reviewer_id: string;
|
||||
score: number;
|
||||
feedback: string;
|
||||
is_instructor_review: boolean;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export interface PeerReviewSettings {
|
||||
id: string;
|
||||
lesson_id: string;
|
||||
required_reviews: number;
|
||||
peer_weight: number;
|
||||
instructor_weight: number;
|
||||
rubric_id?: string | null;
|
||||
auto_assign: boolean;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface User {
|
||||
id: string;
|
||||
email: string;
|
||||
@@ -1297,9 +1313,19 @@ export const lmsApi = {
|
||||
async getMySubmissionFeedback(courseId: string, lessonId: string): Promise<PeerReview[]> {
|
||||
return apiFetch(`/courses/${courseId}/lessons/${lessonId}/feedback`);
|
||||
},
|
||||
// 41-F: Peer Review Mejorado
|
||||
async getMySubmission(courseId: string, lessonId: string): Promise<CourseSubmission | null> {
|
||||
return apiFetch(`/courses/${courseId}/lessons/${lessonId}/my-submission`);
|
||||
},
|
||||
async getPeerReviewSettings(courseId: string, lessonId: string): Promise<PeerReviewSettings | null> {
|
||||
return apiFetch(`/courses/${courseId}/lessons/${lessonId}/peer-settings`);
|
||||
},
|
||||
async getProgressStats(courseId: string): Promise<ProgressStats> {
|
||||
return apiFetch(`/courses/${courseId}/progress-stats`);
|
||||
},
|
||||
async getCourseProgress(courseId: string): Promise<{ progress_percentage: number; completed_lessons: number; total_lessons: number; completed: boolean }> {
|
||||
return apiFetch(`/courses/${courseId}/progress`);
|
||||
},
|
||||
async toggleBookmark(lessonId: string): Promise<void> {
|
||||
return apiFetch(`/lessons/${lessonId}/bookmark`, { method: 'POST' });
|
||||
},
|
||||
@@ -1308,6 +1334,37 @@ export const lmsApi = {
|
||||
return apiFetch(`/bookmarks${query}`);
|
||||
},
|
||||
|
||||
// Anotaciones en Lecciones (Fase 41-B)
|
||||
async getLessonAnnotations(lessonId: string): Promise<LessonAnnotation[]> {
|
||||
return apiFetch(`/lessons/${lessonId}/annotations`);
|
||||
},
|
||||
async createLessonAnnotation(lessonId: string, payload: CreateAnnotationPayload): Promise<LessonAnnotation> {
|
||||
return apiFetch(`/lessons/${lessonId}/annotations`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
},
|
||||
async updateLessonAnnotation(lessonId: string, annotationId: string, payload: CreateAnnotationPayload): Promise<LessonAnnotation> {
|
||||
return apiFetch(`/lessons/${lessonId}/annotations/${annotationId}`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
},
|
||||
async deleteLessonAnnotation(lessonId: string, annotationId: string): Promise<void> {
|
||||
return apiFetch(`/lessons/${lessonId}/annotations/${annotationId}`, { method: 'DELETE' });
|
||||
},
|
||||
async getMyAnnotations(): Promise<LessonAnnotation[]> {
|
||||
return apiFetch(`/annotations`);
|
||||
},
|
||||
|
||||
// Fase 41-C: Mentoría
|
||||
async getMyMentor(courseId: string): Promise<MentorshipView | null> {
|
||||
return apiFetch(`/courses/${courseId}/my-mentor`);
|
||||
},
|
||||
async getMyMentees(courseId: string): Promise<MentorshipView[]> {
|
||||
return apiFetch(`/courses/${courseId}/my-mentees`);
|
||||
},
|
||||
|
||||
// Live Learning & Portfolio
|
||||
async getMeetings(courseId: string): Promise<Meeting[]> {
|
||||
return apiFetch(`/courses/${courseId}/meetings`, {}, false);
|
||||
@@ -1415,3 +1472,37 @@ export interface UpdateCollaborativeDocResponse {
|
||||
server_content?: string;
|
||||
server_revision?: number;
|
||||
}
|
||||
|
||||
// ─── Anotaciones en Lecciones (Fase 41-B) ────────────────────────────────────
|
||||
|
||||
export interface LessonAnnotation {
|
||||
id: string;
|
||||
user_id: string;
|
||||
lesson_id: string;
|
||||
organization_id: string;
|
||||
course_id: string;
|
||||
content: string;
|
||||
position_data: { type: 'timestamp'; value: number } | { type: 'scroll'; value: number } | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface CreateAnnotationPayload {
|
||||
content: string;
|
||||
position_data?: LessonAnnotation['position_data'];
|
||||
}
|
||||
|
||||
export interface MentorshipView {
|
||||
id: string;
|
||||
course_id: string;
|
||||
notes: string | null;
|
||||
created_at: string;
|
||||
mentor_id: string;
|
||||
mentor_name: string;
|
||||
mentor_email: string;
|
||||
mentor_avatar: string | null;
|
||||
student_id: string;
|
||||
student_name: string;
|
||||
student_email: string;
|
||||
student_avatar: string | null;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user