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:
@@ -0,0 +1,388 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import { lmsApi, cmsApi, StudioMentorshipView, User } from "@/lib/api";
|
||||
import {
|
||||
Award,
|
||||
Search,
|
||||
Loader2,
|
||||
X,
|
||||
Plus,
|
||||
Trash2,
|
||||
UserCircle,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
} from "lucide-react";
|
||||
import CourseEditorLayout from "@/components/CourseEditorLayout";
|
||||
|
||||
export default function CourseMentorshipsPage() {
|
||||
const { id: courseId } = useParams() as { id: string };
|
||||
|
||||
const [mentorships, setMentorships] = useState<StudioMentorshipView[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
// Modal de asignación
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [orgUsers, setOrgUsers] = useState<User[]>([]);
|
||||
const [orgUsersLoading, setOrgUsersLoading] = useState(false);
|
||||
const [selectedMentorId, setSelectedMentorId] = useState("");
|
||||
const [selectedStudentId, setSelectedStudentId] = useState("");
|
||||
const [notes, setNotes] = useState("");
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [searchMentor, setSearchMentor] = useState("");
|
||||
const [searchStudent, setSearchStudent] = useState("");
|
||||
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const data = await lmsApi.listCourseMentorships(courseId);
|
||||
setMentorships(data);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [courseId]);
|
||||
|
||||
useEffect(() => { load(); }, [load]);
|
||||
|
||||
const openModal = async () => {
|
||||
setIsModalOpen(true);
|
||||
if (orgUsers.length === 0) {
|
||||
setOrgUsersLoading(true);
|
||||
try {
|
||||
const users = await cmsApi.getAllUsers();
|
||||
setOrgUsers(users);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
setOrgUsersLoading(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleAssign = async () => {
|
||||
if (!selectedMentorId || !selectedStudentId) return;
|
||||
if (selectedMentorId === selectedStudentId) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
const created = await lmsApi.assignMentor(courseId, selectedMentorId, selectedStudentId, notes || undefined);
|
||||
setMentorships(prev => {
|
||||
// Si ya existía (upsert), reemplazar; si no, añadir
|
||||
const exists = prev.find(m => m.id === created.id);
|
||||
if (exists) return prev.map(m => m.id === created.id ? created : m);
|
||||
return [created, ...prev];
|
||||
});
|
||||
setIsModalOpen(false);
|
||||
setSelectedMentorId("");
|
||||
setSelectedStudentId("");
|
||||
setNotes("");
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (mentorshipId: string) => {
|
||||
try {
|
||||
await lmsApi.deleteMentorship(courseId, mentorshipId);
|
||||
setMentorships(prev => prev.filter(m => m.id !== mentorshipId));
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
};
|
||||
|
||||
const filteredMentors = orgUsers.filter(u =>
|
||||
(u.full_name + u.email).toLowerCase().includes(searchMentor.toLowerCase())
|
||||
);
|
||||
const filteredStudents = orgUsers.filter(u =>
|
||||
(u.full_name + u.email).toLowerCase().includes(searchStudent.toLowerCase())
|
||||
);
|
||||
|
||||
// Agrupar por mentor para mostrar vista compacta
|
||||
const grouped = mentorships.reduce<Record<string, StudioMentorshipView[]>>((acc, m) => {
|
||||
if (!acc[m.mentor_id]) acc[m.mentor_id] = [];
|
||||
acc[m.mentor_id].push(m);
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
return (
|
||||
<CourseEditorLayout
|
||||
activeTab="mentorships"
|
||||
pageTitle="Sistema de Mentoría"
|
||||
pageDescription="Asigna mentores a alumnos para acompañamiento personalizado durante el curso."
|
||||
pageActions={
|
||||
<button
|
||||
onClick={openModal}
|
||||
className="flex items-center gap-2 px-6 py-2.5 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-bold text-sm shadow-md shadow-blue-600/20 transition-all active:scale-95"
|
||||
>
|
||||
<Plus size={18} /> Nueva Asignación
|
||||
</button>
|
||||
}
|
||||
>
|
||||
{loading ? (
|
||||
<div className="flex justify-center py-20">
|
||||
<Loader2 size={32} className="text-blue-400 animate-spin" />
|
||||
</div>
|
||||
) : mentorships.length === 0 ? (
|
||||
<div className="py-20 text-center rounded-3xl border border-white/5 bg-white/[0.02]">
|
||||
<div className="w-16 h-16 rounded-2xl bg-blue-500/10 flex items-center justify-center mx-auto mb-4">
|
||||
<Award size={28} className="text-blue-400" />
|
||||
</div>
|
||||
<h3 className="text-lg font-black text-slate-900 dark:text-white mb-1">Sin asignaciones de mentoría</h3>
|
||||
<p className="text-slate-500 text-sm">Asigna un mentor a un alumno para comenzar el acompañamiento.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
<p className="text-xs text-slate-400 font-bold uppercase tracking-widest">
|
||||
{mentorships.length} asignación{mentorships.length > 1 ? "es" : ""} — {Object.keys(grouped).length} mentor{Object.keys(grouped).length > 1 ? "es" : ""}
|
||||
</p>
|
||||
{Object.entries(grouped).map(([mentorId, items]) => (
|
||||
<MentorGroup
|
||||
key={mentorId}
|
||||
items={items}
|
||||
onDelete={handleDelete}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Modal de asignación */}
|
||||
{isModalOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
|
||||
<div className="bg-white dark:bg-slate-900 rounded-3xl shadow-2xl w-full max-w-lg border border-slate-200 dark:border-white/10 overflow-hidden">
|
||||
<div className="flex items-center justify-between p-6 border-b border-slate-100 dark:border-white/5">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-9 h-9 rounded-xl bg-blue-500/10 flex items-center justify-center">
|
||||
<Award size={18} className="text-blue-500" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="font-black text-sm text-slate-900 dark:text-white">Nueva Asignación</h2>
|
||||
<p className="text-[10px] text-slate-400 mt-0.5">Selecciona un mentor y un alumno</p>
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={() => setIsModalOpen(false)} className="p-2 hover:bg-slate-100 dark:hover:bg-white/10 rounded-xl transition-all">
|
||||
<X size={18} className="text-slate-400" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-6 space-y-5">
|
||||
{orgUsersLoading ? (
|
||||
<div className="flex justify-center py-8">
|
||||
<Loader2 size={24} className="text-blue-400 animate-spin" />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Selector mentor */}
|
||||
<UserSelector
|
||||
label="Mentor"
|
||||
users={filteredMentors}
|
||||
search={searchMentor}
|
||||
onSearch={setSearchMentor}
|
||||
selectedId={selectedMentorId}
|
||||
onSelect={setSelectedMentorId}
|
||||
excludeId={selectedStudentId}
|
||||
/>
|
||||
|
||||
{/* Selector alumno */}
|
||||
<UserSelector
|
||||
label="Alumno"
|
||||
users={filteredStudents}
|
||||
search={searchStudent}
|
||||
onSearch={setSearchStudent}
|
||||
selectedId={selectedStudentId}
|
||||
onSelect={setSelectedStudentId}
|
||||
excludeId={selectedMentorId}
|
||||
/>
|
||||
|
||||
{/* Notas */}
|
||||
<div>
|
||||
<label className="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2">
|
||||
Notas internas (opcional)
|
||||
</label>
|
||||
<textarea
|
||||
rows={2}
|
||||
value={notes}
|
||||
onChange={e => setNotes(e.target.value)}
|
||||
placeholder="Ej: Apoyo en módulos 3-5, seguimiento semanal…"
|
||||
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-blue-500/40 resize-none"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="px-6 pb-6 flex justify-end gap-3">
|
||||
<button
|
||||
onClick={() => setIsModalOpen(false)}
|
||||
className="px-5 py-2.5 rounded-xl border border-slate-200 dark:border-white/10 text-sm font-black text-slate-500 hover:text-slate-700 dark:hover:text-white transition-all"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
onClick={handleAssign}
|
||||
disabled={saving || !selectedMentorId || !selectedStudentId || selectedMentorId === selectedStudentId}
|
||||
className="flex items-center gap-2 px-6 py-2.5 bg-blue-600 hover:bg-blue-500 disabled:opacity-50 text-white rounded-xl font-black text-sm transition-all active:scale-95"
|
||||
>
|
||||
{saving ? <Loader2 size={16} className="animate-spin" /> : <Plus size={16} />}
|
||||
Asignar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CourseEditorLayout>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Sub-componentes ───────────────────────────────────────────────────────────
|
||||
|
||||
function UserSelector({
|
||||
label,
|
||||
users,
|
||||
search,
|
||||
onSearch,
|
||||
selectedId,
|
||||
onSelect,
|
||||
excludeId,
|
||||
}: {
|
||||
label: string;
|
||||
users: User[];
|
||||
search: string;
|
||||
onSearch: (v: string) => void;
|
||||
selectedId: string;
|
||||
onSelect: (id: string) => void;
|
||||
excludeId: string;
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const selected = users.find(u => u.id === selectedId);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<label className="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2">
|
||||
{label}
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(v => !v)}
|
||||
className="w-full flex items-center justify-between px-3 py-2.5 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl text-sm transition-all hover:border-blue-400/50"
|
||||
>
|
||||
<span className={selected ? "text-slate-900 dark:text-white font-bold" : "text-slate-400"}>
|
||||
{selected ? `${selected.full_name} (${selected.email})` : `Selecciona ${label.toLowerCase()}…`}
|
||||
</span>
|
||||
{open ? <ChevronUp size={14} className="text-slate-400" /> : <ChevronDown size={14} className="text-slate-400" />}
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="mt-1 border border-slate-200 dark:border-white/10 rounded-xl overflow-hidden bg-white dark:bg-slate-800 shadow-lg">
|
||||
<div className="flex items-center gap-2 px-3 py-2 border-b border-slate-100 dark:border-white/5">
|
||||
<Search size={14} className="text-slate-400" />
|
||||
<input
|
||||
autoFocus
|
||||
value={search}
|
||||
onChange={e => onSearch(e.target.value)}
|
||||
placeholder="Buscar…"
|
||||
className="flex-1 bg-transparent text-sm text-slate-900 dark:text-white placeholder-slate-400 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
<div className="max-h-40 overflow-y-auto">
|
||||
{users.filter(u => u.id !== excludeId).slice(0, 30).map(u => (
|
||||
<button
|
||||
key={u.id}
|
||||
onClick={() => { onSelect(u.id); setOpen(false); }}
|
||||
className={`w-full flex items-center gap-3 px-3 py-2.5 text-left hover:bg-blue-50 dark:hover:bg-blue-500/10 transition-all ${u.id === selectedId ? "bg-blue-50 dark:bg-blue-500/10" : ""}`}
|
||||
>
|
||||
<div className="w-7 h-7 rounded-full bg-slate-200 dark:bg-white/10 flex items-center justify-center shrink-0 overflow-hidden">
|
||||
{u.avatar_url ? (
|
||||
<img src={u.avatar_url} alt="" className="w-full h-full object-cover" />
|
||||
) : (
|
||||
<UserCircle size={16} className="text-slate-400" />
|
||||
)}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-xs font-bold text-slate-900 dark:text-white truncate">{u.full_name}</p>
|
||||
<p className="text-[10px] text-slate-400 truncate">{u.email}</p>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
{users.filter(u => u.id !== excludeId).length === 0 && (
|
||||
<p className="text-xs text-slate-400 text-center py-4">Sin resultados</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MentorGroup({
|
||||
items,
|
||||
onDelete,
|
||||
}: {
|
||||
items: StudioMentorshipView[];
|
||||
onDelete: (id: string) => void;
|
||||
}) {
|
||||
const [expanded, setExpanded] = useState(true);
|
||||
const mentor = items[0];
|
||||
|
||||
return (
|
||||
<div className="rounded-2xl border border-slate-200 dark:border-white/10 overflow-hidden bg-white dark:bg-white/[0.02]">
|
||||
{/* Header del mentor */}
|
||||
<button
|
||||
onClick={() => setExpanded(v => !v)}
|
||||
className="w-full flex items-center gap-4 p-4 hover:bg-slate-50 dark:hover:bg-white/5 transition-all"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-full bg-blue-500/10 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={20} className="text-blue-400" />
|
||||
)}
|
||||
</div>
|
||||
<div className="text-left flex-1 min-w-0">
|
||||
<p className="font-black text-sm text-slate-900 dark:text-white truncate">{mentor.mentor_name}</p>
|
||||
<p className="text-[10px] text-slate-400 truncate">{mentor.mentor_email}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-[10px] font-black text-blue-500 bg-blue-500/10 px-2.5 py-1 rounded-full">
|
||||
{items.length} mentoreado{items.length > 1 ? "s" : ""}
|
||||
</span>
|
||||
{expanded ? <ChevronUp size={14} className="text-slate-400" /> : <ChevronDown size={14} className="text-slate-400" />}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{expanded && (
|
||||
<div className="border-t border-slate-100 dark:border-white/5 divide-y divide-slate-100 dark:divide-white/5">
|
||||
{items.map(m => (
|
||||
<div key={m.id} className="flex items-center gap-4 px-4 py-3 group hover:bg-slate-50 dark:hover:bg-white/5 transition-all">
|
||||
<div className="w-8 h-8 rounded-full bg-slate-100 dark:bg-white/5 flex items-center justify-center shrink-0 overflow-hidden ml-6">
|
||||
{m.student_avatar ? (
|
||||
<img src={m.student_avatar} alt="" className="w-full h-full object-cover" />
|
||||
) : (
|
||||
<UserCircle size={16} 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>
|
||||
<p className="text-[10px] text-slate-400 truncate">{m.student_email}</p>
|
||||
</div>
|
||||
{m.notes && (
|
||||
<p className="text-[10px] text-slate-400 italic max-w-[180px] truncate hidden md:block" title={m.notes}>
|
||||
{m.notes}
|
||||
</p>
|
||||
)}
|
||||
<button
|
||||
onClick={() => onDelete(m.id)}
|
||||
className="p-2 rounded-xl hover:bg-red-50 dark:hover:bg-red-500/10 text-slate-300 hover:text-red-400 transition-all opacity-0 group-hover:opacity-100"
|
||||
title="Eliminar asignación"
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { cmsApi, lmsApi, Course, Lesson, SubmissionWithReviews, PeerReview } from "@/lib/api";
|
||||
import { cmsApi, lmsApi, Course, Lesson, SubmissionWithReviews, PeerReview, PeerReviewSettings } from "@/lib/api";
|
||||
import {
|
||||
Users,
|
||||
MessageSquare,
|
||||
@@ -12,10 +12,584 @@ import {
|
||||
CheckCircle,
|
||||
Clock,
|
||||
ChevronRight,
|
||||
Award
|
||||
Award,
|
||||
Settings,
|
||||
Zap,
|
||||
Star,
|
||||
SlidersHorizontal,
|
||||
BadgeCheck,
|
||||
} from "lucide-react";
|
||||
import CourseEditorLayout from "@/components/CourseEditorLayout";
|
||||
|
||||
// ─── Componente: Panel de configuración de rúbrica/pesos ─────────────────────
|
||||
function PeerSettingsPanel({
|
||||
courseId,
|
||||
lessonId,
|
||||
onAssignDone,
|
||||
}: {
|
||||
courseId: string;
|
||||
lessonId: string;
|
||||
onAssignDone: () => void;
|
||||
}) {
|
||||
const [settings, setSettings] = useState<PeerReviewSettings | null>(null);
|
||||
const [peerWeight, setPeerWeight] = useState(70);
|
||||
const [instructorWeight, setInstructorWeight] = useState(30);
|
||||
const [requiredReviews, setRequiredReviews] = useState(2);
|
||||
const [autoAssign, setAutoAssign] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [assigning, setAssigning] = useState(false);
|
||||
const [assignResult, setAssignResult] = useState<{ submissions_processed: number; assignments_created: number } | null>(null);
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
lmsApi.getPeerReviewSettings(courseId, lessonId).then(s => {
|
||||
if (s) {
|
||||
setSettings(s);
|
||||
setPeerWeight(s.peer_weight);
|
||||
setInstructorWeight(s.instructor_weight);
|
||||
setRequiredReviews(s.required_reviews);
|
||||
setAutoAssign(s.auto_assign);
|
||||
}
|
||||
}).catch(() => {});
|
||||
}, [courseId, lessonId]);
|
||||
|
||||
const handleSave = async () => {
|
||||
setSaving(true);
|
||||
try {
|
||||
const updated = await lmsApi.upsertPeerReviewSettings(courseId, lessonId, {
|
||||
peer_weight: peerWeight,
|
||||
instructor_weight: instructorWeight,
|
||||
required_reviews: requiredReviews,
|
||||
auto_assign: autoAssign,
|
||||
});
|
||||
setSettings(updated);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAutoAssign = async () => {
|
||||
setAssigning(true);
|
||||
setAssignResult(null);
|
||||
try {
|
||||
const result = await lmsApi.autoAssignPeerReviews(courseId, lessonId);
|
||||
setAssignResult(result);
|
||||
onAssignDone();
|
||||
} finally {
|
||||
setAssigning(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePeerWeightChange = (v: number) => {
|
||||
setPeerWeight(v);
|
||||
setInstructorWeight(100 - v);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-[2rem] overflow-hidden shadow-sm mb-8">
|
||||
<button
|
||||
onClick={() => setOpen(o => !o)}
|
||||
className="w-full flex items-center justify-between px-8 py-5 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-3 text-sm font-black uppercase tracking-widest text-slate-600 dark:text-slate-300">
|
||||
<SlidersHorizontal className="w-4 h-4 text-purple-500" />
|
||||
Configuración de Pesos y Asignación Automática
|
||||
</div>
|
||||
<ChevronRight className={`w-5 h-5 text-slate-400 transition-transform ${open ? "rotate-90" : ""}`} />
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="px-8 pb-8 space-y-6 border-t border-slate-100 dark:border-white/5 pt-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{/* Revisiones requeridas */}
|
||||
<div>
|
||||
<label className="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2">
|
||||
Revisiones requeridas por entrega
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
max={10}
|
||||
value={requiredReviews}
|
||||
onChange={e => setRequiredReviews(Number(e.target.value))}
|
||||
className="w-full bg-slate-50 dark:bg-black/30 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-2 text-sm font-bold focus:outline-none focus:ring-2 focus:ring-purple-500/30"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Peso de pares */}
|
||||
<div>
|
||||
<label className="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2">
|
||||
Peso pares: <span className="text-purple-500">{peerWeight}%</span>
|
||||
</label>
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={100}
|
||||
step={5}
|
||||
value={peerWeight}
|
||||
onChange={e => handlePeerWeightChange(Number(e.target.value))}
|
||||
className="w-full accent-purple-500"
|
||||
/>
|
||||
<div className="flex justify-between text-[9px] text-slate-400 font-bold mt-1">
|
||||
<span>Instructor: {instructorWeight}%</span>
|
||||
<span>Pares: {peerWeight}%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Asignación automática */}
|
||||
<div className="flex items-center gap-3 pt-5">
|
||||
<button
|
||||
onClick={() => setAutoAssign(a => !a)}
|
||||
className={`relative w-12 h-6 rounded-full transition-colors ${autoAssign ? "bg-purple-500" : "bg-slate-300 dark:bg-slate-700"}`}
|
||||
>
|
||||
<span className={`absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow transition-transform ${autoAssign ? "translate-x-6" : ""}`} />
|
||||
</button>
|
||||
<span className="text-sm font-bold text-slate-600 dark:text-slate-300">
|
||||
Asignación automática al entregar
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 flex-wrap">
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={saving}
|
||||
className="flex items-center gap-2 px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white rounded-xl text-sm font-black uppercase tracking-wider disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Settings className="w-4 h-4" />}
|
||||
Guardar configuración
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handleAutoAssign}
|
||||
disabled={assigning}
|
||||
className="flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-yellow-500 to-orange-500 hover:from-yellow-600 hover:to-orange-600 text-white rounded-xl text-sm font-black uppercase tracking-wider disabled:opacity-50 transition-all shadow-md shadow-yellow-500/20"
|
||||
>
|
||||
{assigning ? <Loader2 className="w-4 h-4 animate-spin" /> : <Zap className="w-4 h-4" />}
|
||||
Asignar revisiones automáticamente
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{assignResult && (
|
||||
<div className="flex items-center gap-3 text-sm text-green-600 dark:text-green-400 bg-green-50 dark:bg-green-500/10 border border-green-200 dark:border-green-500/20 rounded-xl px-4 py-3">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
<span className="font-bold">
|
||||
{assignResult.submissions_processed} entregas procesadas · {assignResult.assignments_created} asignaciones creadas
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{settings && (
|
||||
<p className="text-[10px] text-slate-400 font-medium">
|
||||
Config guardada · Actualizada {new Date(settings.updated_at).toLocaleString()}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Componente: Modal para calificación del instructor ───────────────────────
|
||||
function InstructorGradeModal({
|
||||
courseId,
|
||||
lessonId,
|
||||
submissionId,
|
||||
studentName,
|
||||
onClose,
|
||||
onGraded,
|
||||
}: {
|
||||
courseId: string;
|
||||
lessonId: string;
|
||||
submissionId: string;
|
||||
studentName: string;
|
||||
onClose: () => void;
|
||||
onGraded: () => void;
|
||||
}) {
|
||||
const [score, setScore] = useState(75);
|
||||
const [feedback, setFeedback] = useState("");
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!feedback.trim()) { setError("El feedback es obligatorio"); return; }
|
||||
setSaving(true);
|
||||
setError("");
|
||||
try {
|
||||
await lmsApi.instructorGradeSubmission(courseId, lessonId, submissionId, score, feedback);
|
||||
onGraded();
|
||||
onClose();
|
||||
} catch (e: any) {
|
||||
setError(e.message ?? "Error al guardar la calificación");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
|
||||
<div className="bg-white dark:bg-gray-900 border border-slate-200 dark:border-white/10 rounded-[2rem] p-8 w-full max-w-md shadow-2xl space-y-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-yellow-50 dark:bg-yellow-500/10 flex items-center justify-center">
|
||||
<Star className="w-5 h-5 text-yellow-500" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-black text-slate-900 dark:text-white uppercase tracking-tight">Calificación del Instructor</h3>
|
||||
<p className="text-xs text-slate-400">{studentName}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2">
|
||||
Puntuación: <span className="text-yellow-500">{score}/100</span>
|
||||
</label>
|
||||
<input
|
||||
type="range" min={0} max={100} step={1} value={score}
|
||||
onChange={e => setScore(Number(e.target.value))}
|
||||
className="w-full accent-yellow-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2">
|
||||
Feedback del instructor *
|
||||
</label>
|
||||
<textarea
|
||||
rows={4}
|
||||
value={feedback}
|
||||
onChange={e => setFeedback(e.target.value)}
|
||||
placeholder="Escribe tu retroalimentación detallada..."
|
||||
className="w-full bg-slate-50 dark:bg-black/30 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500/30 resize-none"
|
||||
/>
|
||||
{error && <p className="text-xs text-red-500 mt-1">{error}</p>}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button onClick={onClose} className="flex-1 px-4 py-3 border border-slate-200 dark:border-white/10 rounded-xl text-sm font-bold text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors">
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
disabled={saving}
|
||||
className="flex-1 flex items-center justify-center gap-2 px-4 py-3 bg-yellow-500 hover:bg-yellow-600 text-white rounded-xl text-sm font-black uppercase tracking-wider disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <BadgeCheck className="w-4 h-4" />}
|
||||
Calificar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Página Principal ─────────────────────────────────────────────────────────
|
||||
export default function PeerReviewDashboard() {
|
||||
const { id } = useParams() as { id: string };
|
||||
const router = useRouter();
|
||||
const [course, setCourse] = useState<Course | null>(null);
|
||||
const [lessons, setLessons] = useState<Lesson[]>([]);
|
||||
const [selectedLessonId, setSelectedLessonId] = useState<string | null>(null);
|
||||
const [submissions, setSubmissions] = useState<SubmissionWithReviews[]>([]);
|
||||
const [selectedSubmissionId, setSelectedSubmissionId] = useState<string | null>(null);
|
||||
const [reviews, setReviews] = useState<PeerReview[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [submissionsLoading, setSubmissionsLoading] = useState(false);
|
||||
const [reviewsLoading, setReviewsLoading] = useState(false);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [gradeModal, setGradeModal] = useState<{ submissionId: string; studentName: string } | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const loadInitialData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const courseData = await cmsApi.getCourseWithFullOutline(id);
|
||||
setCourse(courseData);
|
||||
|
||||
const peerReviewLessons: Lesson[] = [];
|
||||
courseData.modules?.forEach(m => {
|
||||
m.lessons.forEach(l => {
|
||||
const hasPeerReview = l.metadata?.blocks?.some((b: any) => b.type === 'peer-review');
|
||||
if (hasPeerReview) {
|
||||
peerReviewLessons.push(l);
|
||||
}
|
||||
});
|
||||
});
|
||||
setLessons(peerReviewLessons);
|
||||
|
||||
if (peerReviewLessons.length > 0) {
|
||||
setSelectedLessonId(peerReviewLessons[0].id);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading course data:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
loadInitialData();
|
||||
}, [id]);
|
||||
|
||||
const loadSubmissions = useCallback(async () => {
|
||||
if (!selectedLessonId) return;
|
||||
try {
|
||||
setSubmissionsLoading(true);
|
||||
const data = await lmsApi.listLessonSubmissions(id, selectedLessonId);
|
||||
setSubmissions(data);
|
||||
} catch (error) {
|
||||
console.error("Error loading submissions:", error);
|
||||
} finally {
|
||||
setSubmissionsLoading(false);
|
||||
}
|
||||
}, [id, selectedLessonId]);
|
||||
|
||||
useEffect(() => {
|
||||
loadSubmissions();
|
||||
}, [loadSubmissions]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedSubmissionId) {
|
||||
setReviews([]);
|
||||
return;
|
||||
}
|
||||
|
||||
const loadReviews = async () => {
|
||||
try {
|
||||
setReviewsLoading(true);
|
||||
const data = await lmsApi.getSubmissionReviews(selectedSubmissionId);
|
||||
setReviews(data);
|
||||
} catch (error) {
|
||||
console.error("Error loading reviews:", error);
|
||||
} finally {
|
||||
setReviewsLoading(false);
|
||||
}
|
||||
};
|
||||
loadReviews();
|
||||
}, [selectedSubmissionId]);
|
||||
|
||||
const filteredSubmissions = submissions.filter(s =>
|
||||
s.full_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
s.email.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-transparent flex items-center justify-center">
|
||||
<Loader2 className="w-10 h-10 text-blue-500 animate-spin" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div className="flex items-center gap-4">
|
||||
<button onClick={() => router.back()} className="p-2 hover:bg-white/10 rounded-full transition-colors">
|
||||
<ArrowLeft className="w-6 h-6" />
|
||||
</button>
|
||||
<div>
|
||||
<h1 className="text-4xl font-black bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent uppercase tracking-tighter">
|
||||
Peer Assessment
|
||||
</h1>
|
||||
<p className="text-slate-500 dark:text-gray-400 mt-1 font-medium">Monitor, asignación automática y calificación con rúbricas configurables</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CourseEditorLayout activeTab="peer-reviews">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-10">
|
||||
{/* Lessons List */}
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-[0.2em] px-4">Actividades</h3>
|
||||
<div className="space-y-2">
|
||||
{lessons.length === 0 ? (
|
||||
<div className="p-6 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl text-sm text-slate-400 italic">
|
||||
No se encontraron actividades de peer review.
|
||||
</div>
|
||||
) : (
|
||||
lessons.map(lesson => (
|
||||
<button
|
||||
key={lesson.id}
|
||||
onClick={() => {
|
||||
setSelectedLessonId(lesson.id);
|
||||
setSelectedSubmissionId(null);
|
||||
}}
|
||||
className={`w-full text-left p-5 rounded-[1.5rem] border transition-all active:scale-95 ${selectedLessonId === lesson.id
|
||||
? "bg-purple-50 dark:bg-purple-500/10 border-purple-200 dark:border-purple-500/50 text-purple-600 dark:text-purple-400 shadow-md shadow-purple-500/5 font-black uppercase tracking-tight"
|
||||
: "bg-white dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-500 dark:text-gray-400 hover:border-purple-500/30 font-bold"
|
||||
}`}
|
||||
>
|
||||
<div className="truncate text-sm">{lesson.title}</div>
|
||||
<div className="text-[9px] uppercase font-black tracking-widest opacity-60 mt-1">Peer Review</div>
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main content */}
|
||||
<div className="lg:col-span-3 space-y-0">
|
||||
{/* Panel de configuración — solo cuando hay lección seleccionada */}
|
||||
{selectedLessonId && (
|
||||
<PeerSettingsPanel
|
||||
courseId={id}
|
||||
lessonId={selectedLessonId}
|
||||
onAssignDone={loadSubmissions}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Submissions List */}
|
||||
<div className="bg-white dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-[2.5rem] p-10 shadow-sm">
|
||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-10">
|
||||
<h2 className="text-2xl font-black flex items-center gap-4 uppercase tracking-tight text-slate-900 dark:text-white">
|
||||
<div className="w-12 h-12 rounded-2xl bg-blue-50 dark:bg-blue-500/10 border border-blue-100 dark:border-blue-500/20 flex items-center justify-center text-blue-600 dark:text-blue-400 shadow-sm">
|
||||
<Users size={24} />
|
||||
</div>
|
||||
Entregas
|
||||
</h2>
|
||||
<div className="relative w-full md:w-80 group">
|
||||
<Search className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-300 dark:text-gray-500 w-5 h-5 group-focus-within:text-blue-500 transition-colors" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Buscar alumno o email..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full bg-slate-50 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-[1.25rem] py-4 pl-12 pr-6 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/30 text-slate-900 dark:text-white transition-all shadow-inner"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{submissionsLoading ? (
|
||||
<div className="flex flex-col items-center justify-center py-32 space-y-4">
|
||||
<Loader2 className="w-12 h-12 text-blue-500 animate-spin" />
|
||||
<span className="text-xs font-black uppercase tracking-widest text-slate-400">Cargando entregas...</span>
|
||||
</div>
|
||||
) : filteredSubmissions.length === 0 ? (
|
||||
<div className="text-center py-32 bg-slate-50 dark:bg-black/20 rounded-3xl border border-dashed border-slate-200 dark:border-white/10">
|
||||
<div className="w-20 h-20 bg-white dark:bg-white/5 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-sm">
|
||||
<MessageSquare className="w-10 h-10 text-slate-300 dark:text-gray-700" />
|
||||
</div>
|
||||
<p className="text-slate-500 dark:text-gray-500 font-bold uppercase tracking-tight">No se encontraron entregas para esta actividad.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4 overflow-y-auto max-h-[700px] pr-4 custom-scrollbar">
|
||||
{filteredSubmissions.map(sub => (
|
||||
<div key={sub.id} className="group">
|
||||
<div
|
||||
onClick={() => setSelectedSubmissionId(selectedSubmissionId === sub.id ? null : sub.id)}
|
||||
className={`p-6 rounded-[1.5rem] border transition-all cursor-pointer shadow-sm active:scale-[0.99] ${selectedSubmissionId === sub.id
|
||||
? "bg-blue-50 dark:bg-blue-500/5 border-blue-200 dark:border-blue-500/30"
|
||||
: "bg-slate-50/50 dark:bg-white/[0.02] border-slate-200 dark:border-white/5 hover:bg-white dark:hover:bg-white/[0.05] hover:border-blue-500/30"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-blue-600 to-indigo-700 flex items-center justify-center font-black text-white text-lg shadow-lg shadow-blue-500/20">
|
||||
{sub.full_name.charAt(0)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-black text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors uppercase tracking-tight text-sm">{sub.full_name}</div>
|
||||
<div className="text-[10px] font-bold text-slate-400 dark:text-gray-500 uppercase tracking-widest">{sub.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-6">
|
||||
{/* Calificación promedio */}
|
||||
<div className="text-right">
|
||||
<div className="text-lg font-black text-slate-900 dark:text-white flex items-center gap-2 justify-end">
|
||||
<Award className="w-5 h-5 text-yellow-500" />
|
||||
{sub.average_score !== null ? `${(sub.average_score).toFixed(1)}` : '—'}
|
||||
</div>
|
||||
<div className="text-[9px] text-slate-400 dark:text-gray-500 font-black uppercase tracking-[0.2em]">Prom. pares</div>
|
||||
</div>
|
||||
{/* Nº de revisiones */}
|
||||
<div className="text-right">
|
||||
<div className={`text-lg font-black flex items-center gap-2 justify-end ${sub.review_count >= 2 ? 'text-green-600' : 'text-orange-500'}`}>
|
||||
<CheckCircle className="w-5 h-5" />
|
||||
{sub.review_count}
|
||||
</div>
|
||||
<div className="text-[9px] text-slate-400 dark:text-gray-500 font-black uppercase tracking-[0.2em]">Revisiones</div>
|
||||
</div>
|
||||
{/* Fecha */}
|
||||
<div className="text-right hidden xl:block">
|
||||
<div className="text-sm font-bold text-slate-400 dark:text-gray-500 flex items-center gap-2 justify-end">
|
||||
<Clock className="w-4 h-4" />
|
||||
{new Date(sub.submitted_at).toLocaleDateString()}
|
||||
</div>
|
||||
<div className="text-[9px] text-slate-400 dark:text-gray-500 font-black uppercase tracking-[0.2em]">Entregado</div>
|
||||
</div>
|
||||
{/* Botón calificar instructor */}
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setGradeModal({ submissionId: sub.id, studentName: sub.full_name });
|
||||
}}
|
||||
className="p-2 rounded-xl bg-yellow-50 dark:bg-yellow-500/10 border border-yellow-200 dark:border-yellow-500/20 text-yellow-600 dark:text-yellow-400 hover:bg-yellow-100 dark:hover:bg-yellow-500/20 transition-colors"
|
||||
title="Calificar como instructor"
|
||||
>
|
||||
<Star className="w-4 h-4" />
|
||||
</button>
|
||||
<ChevronRight className={`w-6 h-6 text-slate-300 transition-all ${selectedSubmissionId === sub.id ? 'rotate-90 text-blue-500' : ''}`} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Reviews expandidas */}
|
||||
{selectedSubmissionId === sub.id && (
|
||||
<div className="mt-4 ml-8 p-10 bg-slate-50 dark:bg-black/40 border-l-4 border-blue-500 dark:border-blue-500/50 rounded-r-[2rem] space-y-8 animate-in slide-in-from-left-4 duration-300 shadow-inner">
|
||||
<h4 className="text-[10px] font-black uppercase tracking-[0.3em] text-blue-600 dark:text-blue-400 ml-1">Revisiones Recibidas</h4>
|
||||
{reviewsLoading ? (
|
||||
<div className="flex py-10"><Loader2 className="w-8 h-8 animate-spin text-blue-500" /></div>
|
||||
) : reviews.length === 0 ? (
|
||||
<div className="p-8 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl text-center text-slate-400 italic">
|
||||
Aún no hay revisiones para esta entrega.
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{reviews.map(review => (
|
||||
<div key={review.id} className={`p-6 bg-white dark:bg-white/5 border rounded-2xl space-y-4 shadow-sm transition-all ${review.is_instructor_review ? "border-yellow-200 dark:border-yellow-500/30" : "border-slate-100 dark:border-white/10"}`}>
|
||||
<div className="flex justify-between items-center pb-3 border-b border-slate-50 dark:border-white/5">
|
||||
<span className={`text-[9px] font-black uppercase tracking-widest ${review.is_instructor_review ? "text-yellow-600" : "text-slate-400 dark:text-gray-500"}`}>
|
||||
{review.is_instructor_review ? "⭐ Instructor" : "Par evaluador"}
|
||||
</span>
|
||||
<span className={`px-3 py-1 text-sm font-black rounded-lg ${review.is_instructor_review ? "bg-yellow-50 dark:bg-yellow-500/10 text-yellow-600 dark:text-yellow-500" : "bg-blue-50 dark:bg-blue-500/10 text-blue-600 dark:text-blue-500"}`}>
|
||||
{review.score}/100
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-slate-600 dark:text-gray-300 leading-relaxed italic font-medium px-2">
|
||||
"{review.feedback}"
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CourseEditorLayout>
|
||||
</div>
|
||||
|
||||
{/* Modal calificación instructor */}
|
||||
{gradeModal && (
|
||||
<InstructorGradeModal
|
||||
courseId={id}
|
||||
lessonId={selectedLessonId!}
|
||||
submissionId={gradeModal.submissionId}
|
||||
studentName={gradeModal.studentName}
|
||||
onClose={() => setGradeModal(null)}
|
||||
onGraded={loadSubmissions}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export default function PeerReviewDashboard() {
|
||||
const { id } = useParams() as { id: string };
|
||||
const router = useRouter();
|
||||
|
||||
@@ -234,12 +234,11 @@ 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 blob = await cmsApi.exportCourse(id);
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `course_${id}_export.json`;
|
||||
a.download = `course_${id}.ccb`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
@@ -258,17 +257,15 @@ export default function CourseSettingsPage() {
|
||||
|
||||
setImporting(true);
|
||||
try {
|
||||
const text = await file.text();
|
||||
const data = JSON.parse(text);
|
||||
const newCourse = await cmsApi.importCourse(data);
|
||||
const newCourse = await cmsApi.importCourse(file);
|
||||
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.");
|
||||
alert("Error al importar el curso. Asegúrate de que el archivo sea un .ccb válido.");
|
||||
} finally {
|
||||
setImporting(false);
|
||||
if (e.target) e.target.value = ''; // Reset input
|
||||
if (e.target) e.target.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
@@ -654,13 +651,13 @@ export default function CourseSettingsPage() {
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-sm font-black text-slate-800 dark:text-gray-300 uppercase tracking-wider">Import Course</h3>
|
||||
<p className="text-xs text-slate-500 dark:text-gray-500 font-medium">
|
||||
Upload a previously exported course JSON file. This will create a NEW course
|
||||
within the current organization based on that data.
|
||||
Sube un archivo <code>.ccb</code> exportado previamente. Se creará un NUEVO curso
|
||||
en la organización actual con todos sus módulos, lecciones y categorías de calificación.
|
||||
</p>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="file"
|
||||
accept=".json"
|
||||
accept=".ccb,.zip"
|
||||
onChange={handleImport}
|
||||
disabled={importing}
|
||||
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
|
||||
|
||||
@@ -2,309 +2,448 @@
|
||||
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { lmsApi, cmsApi, StudentGradeReport, Cohort, User } from "@/lib/api";
|
||||
import { lmsApi, cmsApi, StudentGradeReport, User } from "@/lib/api";
|
||||
import {
|
||||
Users,
|
||||
UserPlus,
|
||||
Search,
|
||||
ArrowLeft,
|
||||
Loader2,
|
||||
X,
|
||||
Filter,
|
||||
CheckCircle2,
|
||||
Trash2,
|
||||
Mail,
|
||||
Plus,
|
||||
UserCircle,
|
||||
MoreHorizontal,
|
||||
ChevronRight
|
||||
Bell,
|
||||
TrendingDown,
|
||||
AlertTriangle,
|
||||
Clock,
|
||||
BarChart2,
|
||||
} from "lucide-react";
|
||||
import CourseEditorLayout from "@/components/CourseEditorLayout";
|
||||
|
||||
function riskLevel(student: StudentGradeReport): "critical" | "high" | "medium" | "ok" {
|
||||
const daysInactive = student.last_active_at
|
||||
? Math.floor((Date.now() - new Date(student.last_active_at).getTime()) / 86400000)
|
||||
: 999;
|
||||
const avgScore = student.average_score ?? null;
|
||||
if (daysInactive >= 14 || (avgScore !== null && avgScore * 100 < 40)) return "critical";
|
||||
if (daysInactive >= 7 || (avgScore !== null && avgScore * 100 < 60)) return "high";
|
||||
if (daysInactive >= 3 || (avgScore !== null && avgScore * 100 < 70)) return "medium";
|
||||
return "ok";
|
||||
}
|
||||
|
||||
function RiskBadge({ level }: { level: ReturnType<typeof riskLevel> }) {
|
||||
const map = {
|
||||
critical: { label: "Crítico", cls: "bg-red-500/10 text-red-500 border-red-500/20" },
|
||||
high: { label: "Alto", cls: "bg-orange-500/10 text-orange-500 border-orange-500/20" },
|
||||
medium: { label: "Medio", cls: "bg-yellow-500/10 text-yellow-500 border-yellow-500/20" },
|
||||
ok: { label: "Bien", cls: "bg-emerald-500/10 text-emerald-500 border-emerald-500/20" },
|
||||
};
|
||||
const { label, cls } = map[level];
|
||||
return (
|
||||
<span className={`inline-flex items-center px-2.5 py-1 rounded-full border text-[9px] font-black uppercase tracking-widest ${cls}`}>
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export default function CourseStudentsPage() {
|
||||
const { id } = useParams() as { id: string };
|
||||
const router = useRouter();
|
||||
const [students, setStudents] = useState<StudentGradeReport[]>([]);
|
||||
const [cohorts, setCohorts] = useState<Cohort[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [selectedCohortId, setSelectedCohortId] = useState<string>("all");
|
||||
const [riskFilter, setRiskFilter] = useState<"all" | "critical" | "high" | "medium">("all");
|
||||
|
||||
const [isEnrollModalOpen, setIsEnrollModalOpen] = useState(false);
|
||||
const [allOrgUsers, setAllOrgUsers] = useState<User[]>([]);
|
||||
const [orgUsersLoading, setOrgUsersLoading] = useState(false);
|
||||
const [enrollSearch, setEnrollSearch] = useState("");
|
||||
|
||||
const [notifyTarget, setNotifyTarget] = useState<StudentGradeReport | null>(null);
|
||||
const [notifyTitle, setNotifyTitle] = useState("");
|
||||
const [notifyMessage, setNotifyMessage] = useState("");
|
||||
const [notifySending, setNotifySending] = useState(false);
|
||||
const [notifySuccess, setNotifySuccess] = useState(false);
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const [gradesData, cohortsData] = await Promise.all([
|
||||
lmsApi.getCourseGrades(id),
|
||||
lmsApi.getCohorts()
|
||||
]);
|
||||
const gradesData = await lmsApi.getCourseGrades(id);
|
||||
setStudents(gradesData);
|
||||
setCohorts(cohortsData);
|
||||
} catch (error) {
|
||||
console.error("Error fetching students and cohorts:", error);
|
||||
console.error("Error fetching students:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [fetchData]);
|
||||
|
||||
const loadOrgUsers = async () => {
|
||||
try {
|
||||
setOrgUsersLoading(true);
|
||||
const users = await cmsApi.getAllUsers();
|
||||
// Filter out those already enrolled
|
||||
const enrolledIds = new Set(students.map(s => s.user_id));
|
||||
setAllOrgUsers(users.filter(u => u.role === 'student' && !enrolledIds.has(u.id)));
|
||||
} catch (error) {
|
||||
console.error("Error loading org users:", error);
|
||||
} finally {
|
||||
setOrgUsersLoading(false);
|
||||
}
|
||||
};
|
||||
useEffect(() => { fetchData(); }, [fetchData]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isEnrollModalOpen) {
|
||||
loadOrgUsers();
|
||||
}
|
||||
if (!isEnrollModalOpen) return;
|
||||
setOrgUsersLoading(true);
|
||||
cmsApi.getAllUsers()
|
||||
.then((users: User[]) => {
|
||||
const enrolled = new Set(students.map(s => s.user_id));
|
||||
setAllOrgUsers(users.filter(u => u.role === "student" && !enrolled.has(u.id)));
|
||||
})
|
||||
.catch(console.error)
|
||||
.finally(() => setOrgUsersLoading(false));
|
||||
}, [isEnrollModalOpen, students]);
|
||||
|
||||
const handleEnroll = async (emails: string[]) => {
|
||||
try {
|
||||
await lmsApi.bulkEnroll(id, emails);
|
||||
fetchData();
|
||||
setIsEnrollModalOpen(false);
|
||||
} catch (error) {
|
||||
console.error("Enrollment failed:", error);
|
||||
alert("Failed to enroll students.");
|
||||
}
|
||||
await lmsApi.bulkEnroll(id, emails);
|
||||
fetchData();
|
||||
setIsEnrollModalOpen(false);
|
||||
};
|
||||
|
||||
const handleCohortAssignment = async (userId: string, cohortId: string, remove: boolean = false) => {
|
||||
const openNotify = (student: StudentGradeReport) => {
|
||||
setNotifyTarget(student);
|
||||
setNotifyTitle("");
|
||||
setNotifyMessage("");
|
||||
setNotifySuccess(false);
|
||||
};
|
||||
|
||||
const handleNotify = async () => {
|
||||
if (!notifyTarget || !notifyTitle.trim() || !notifyMessage.trim()) return;
|
||||
setNotifySending(true);
|
||||
try {
|
||||
if (remove) {
|
||||
await lmsApi.removeMember(cohortId, userId);
|
||||
} else {
|
||||
await lmsApi.addMember(cohortId, userId);
|
||||
}
|
||||
// In a real app we'd need to refresh specifically which cohorts each student is in.
|
||||
// Since StudentGradeReport doesn't include cohorts, we might need a better API or just a toast.
|
||||
alert(`Student ${remove ? 'removed from' : 'added to'} cohort.`);
|
||||
} catch (error) {
|
||||
console.error("Cohort assignment failed:", error);
|
||||
await lmsApi.notifyStudent(id, notifyTarget.user_id, notifyTitle, notifyMessage);
|
||||
setNotifySuccess(true);
|
||||
setTimeout(() => {
|
||||
setNotifyTarget(null);
|
||||
setNotifyTitle("");
|
||||
setNotifyMessage("");
|
||||
setNotifySuccess(false);
|
||||
}, 1500);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
setNotifySending(false);
|
||||
}
|
||||
};
|
||||
|
||||
const filteredStudents = students.filter(s => {
|
||||
const matchesSearch = s.full_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
const matchSearch =
|
||||
s.full_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
s.email.toLowerCase().includes(searchTerm.toLowerCase());
|
||||
// Note: Filtering by cohort is tricky because the grades API doesn't return cohorts per student directly.
|
||||
// For now we'll just implement search. Real cohort filtering would need backend support in getCourseGrades.
|
||||
return matchesSearch;
|
||||
const matchRisk = riskFilter === "all" || riskLevel(s) === riskFilter;
|
||||
return matchSearch && matchRisk;
|
||||
});
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-transparent flex items-center justify-center">
|
||||
<Loader2 className="w-10 h-10 text-blue-500 animate-spin" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const atRisk = students.filter(s => ["critical", "high"].includes(riskLevel(s)));
|
||||
|
||||
if (loading) return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<Loader2 className="w-10 h-10 text-blue-500 animate-spin" />
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<CourseEditorLayout
|
||||
activeTab="students"
|
||||
pageTitle="Estudiantes y Grupos"
|
||||
pageDescription="Gestiona las inscripciones y segmenta a tu audiencia por cohortes."
|
||||
pageDescription="Gestiona inscripciones, monitorea progreso y comunícate con tus alumnos."
|
||||
pageActions={
|
||||
<button
|
||||
onClick={() => setIsEnrollModalOpen(true)}
|
||||
className="flex items-center gap-2 px-6 py-2.5 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-bold text-sm shadow-md shadow-blue-600/20 transition-all active:scale-95"
|
||||
>
|
||||
<UserPlus size={18} />
|
||||
Inscribir Estudiantes
|
||||
<UserPlus size={18} /> Inscribir Estudiantes
|
||||
</button>
|
||||
}
|
||||
>
|
||||
<div className="space-y-8">
|
||||
<h2 className="section-title">
|
||||
<Users className="text-blue-500" />
|
||||
Listado de Estudiantes
|
||||
</h2>
|
||||
{/* Search and Filters */}
|
||||
<div className="bg-slate-50/50 dark:bg-white/5 border border-slate-200 dark:border-white/10 p-5 rounded-3xl flex flex-col md:flex-row items-center gap-4 shadow-sm">
|
||||
{/* Alerta de riesgo */}
|
||||
{atRisk.length > 0 && (
|
||||
<div className="flex items-start gap-4 p-5 bg-red-500/5 border border-red-500/20 rounded-2xl">
|
||||
<AlertTriangle size={20} className="text-red-500 shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm font-black text-red-500">
|
||||
{atRisk.length} alumno{atRisk.length > 1 ? "s" : ""} necesita{atRisk.length === 1 ? "" : "n"} atención
|
||||
</p>
|
||||
<p className="text-xs text-red-400/70 mt-0.5">
|
||||
Sin actividad reciente o con calificaciones por debajo del umbral. Usa el botón 🔔 para contactarlos.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Filtros */}
|
||||
<div className="bg-slate-50/50 dark:bg-white/5 border border-slate-200 dark:border-white/10 p-5 rounded-3xl flex flex-col md:flex-row items-center gap-4">
|
||||
<div className="relative flex-1 w-full">
|
||||
<Search className="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400 dark:text-gray-500 w-4 h-4" />
|
||||
<Search className="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400 w-4 h-4" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search by name or email..."
|
||||
placeholder="Buscar por nombre o email..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full bg-white dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-2xl py-2.5 pl-11 pr-4 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all font-bold text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-gray-600 shadow-inner"
|
||||
onChange={e => setSearchTerm(e.target.value)}
|
||||
className="w-full bg-white dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-2xl py-2.5 pl-11 pr-4 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 font-bold text-slate-900 dark:text-white placeholder-slate-400"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 w-full md:w-auto">
|
||||
<Filter size={16} className="text-slate-400 dark:text-gray-400" />
|
||||
<Filter size={16} className="text-slate-400 shrink-0" />
|
||||
<select
|
||||
className="bg-white dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-2xl px-5 py-2.5 text-xs font-black uppercase tracking-widest focus:outline-none focus:ring-2 focus:ring-blue-500/50 text-slate-900 dark:text-white min-w-[180px] shadow-sm cursor-pointer"
|
||||
value={selectedCohortId}
|
||||
onChange={(e) => setSelectedCohortId(e.target.value)}
|
||||
value={riskFilter}
|
||||
onChange={e => setRiskFilter(e.target.value as typeof riskFilter)}
|
||||
className="bg-white dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-2xl px-4 py-2.5 text-xs font-black uppercase tracking-widest focus:outline-none text-slate-900 dark:text-white min-w-[160px]"
|
||||
>
|
||||
<option value="all">All Cohorts</option>
|
||||
{cohorts.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
|
||||
<option value="all">Todos los alumnos</option>
|
||||
<option value="critical">⚠ Riesgo Crítico</option>
|
||||
<option value="high">🟠 Riesgo Alto</option>
|
||||
<option value="medium">🟡 Riesgo Medio</option>
|
||||
</select>
|
||||
</div>
|
||||
<span className="text-xs text-slate-400 font-bold whitespace-nowrap">
|
||||
{filteredStudents.length} de {students.length}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Student List */}
|
||||
{/* Tabla */}
|
||||
<div className="rounded-3xl border border-slate-200 dark:border-white/10 bg-white dark:bg-white/[0.02] overflow-hidden shadow-sm">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/5 font-black text-[10px] uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500">
|
||||
<th className="p-6">Student</th>
|
||||
<th className="p-6 text-center">Enrollment Status</th>
|
||||
<th className="p-6 text-right">Actions</th>
|
||||
<tr className="bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/5 text-[10px] uppercase tracking-[0.2em] text-slate-400 font-black">
|
||||
<th className="p-5">Alumno</th>
|
||||
<th className="p-5 text-center hidden md:table-cell">Progreso</th>
|
||||
<th className="p-5 text-center hidden lg:table-cell">Promedio</th>
|
||||
<th className="p-5 text-center hidden lg:table-cell">Última Actividad</th>
|
||||
<th className="p-5 text-center">Riesgo</th>
|
||||
<th className="p-5 text-right">Acción</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100 dark:divide-white/5">
|
||||
{filteredStudents.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={3} className="p-12 text-center text-slate-500 dark:text-gray-500 italic">No students found.</td>
|
||||
<td colSpan={6} className="p-12 text-center text-slate-400 italic text-sm">
|
||||
No se encontraron alumnos.
|
||||
</td>
|
||||
</tr>
|
||||
) : filteredStudents.map(student => (
|
||||
<tr key={student.user_id} className="hover:bg-white/[0.02] transition-colors group">
|
||||
<td className="p-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center font-black text-white text-lg shadow-lg shadow-blue-500/20">
|
||||
{student.full_name.charAt(0)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-black text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors uppercase tracking-tight text-sm">{student.full_name}</div>
|
||||
<div className="text-xs text-slate-400 dark:text-gray-500 flex items-center gap-1.5 mt-1 font-medium italic"><Mail size={12} className="text-blue-400" /> {student.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-6 text-center">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1.5 bg-green-500/10 text-green-600 dark:text-green-400 rounded-full border border-green-500/20 text-[10px] font-black uppercase tracking-widest">
|
||||
<CheckCircle2 size={12} /> Active
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-6 text-right">
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<div className="relative group/actions">
|
||||
<button className="p-2.5 hover:bg-slate-100 dark:hover:bg-white/10 rounded-xl transition-all text-slate-400 dark:text-gray-500 active:scale-90">
|
||||
<MoreHorizontal size={20} />
|
||||
</button>
|
||||
<div className="absolute right-0 top-full mt-2 w-56 bg-white dark:bg-[#1a1c1e] border border-slate-200 dark:border-white/10 rounded-2xl shadow-2xl invisible group-hover/actions:visible z-10 p-2 animate-in fade-in slide-in-from-top-2 duration-200">
|
||||
<div className="text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-gray-600 px-3 py-2.5 border-b border-slate-100 dark:border-white/5 mb-1.5 flex items-center gap-2">
|
||||
<Filter size={10} /> Move to Cohort
|
||||
) : filteredStudents.map(student => {
|
||||
const risk = riskLevel(student);
|
||||
const daysInactive = student.last_active_at
|
||||
? Math.floor((Date.now() - new Date(student.last_active_at).getTime()) / 86400000)
|
||||
: null;
|
||||
const progress = Math.min(Math.round(student.progress ?? 0), 100);
|
||||
const avgPct = student.average_score != null ? Math.round(student.average_score * 100) : null;
|
||||
|
||||
return (
|
||||
<tr key={student.user_id} className="hover:bg-slate-50 dark:hover:bg-white/[0.03] transition-colors">
|
||||
{/* Alumno */}
|
||||
<td className="p-5">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center font-black text-white text-sm shrink-0">
|
||||
{student.full_name.charAt(0)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-black text-slate-900 dark:text-white text-sm">{student.full_name}</div>
|
||||
<div className="text-[10px] text-slate-400 flex items-center gap-1 mt-0.5">
|
||||
<Mail size={10} /> {student.email}
|
||||
</div>
|
||||
{cohorts.map(c => (
|
||||
<button
|
||||
key={c.id}
|
||||
onClick={() => handleCohortAssignment(student.user_id, c.id)}
|
||||
className="w-full text-left px-4 py-2.5 text-xs font-bold text-slate-700 dark:text-gray-300 hover:bg-slate-50 dark:hover:bg-white/5 hover:text-blue-600 dark:hover:text-white rounded-xl transition-all flex items-center justify-between group/item"
|
||||
>
|
||||
{c.name}
|
||||
<ChevronRight size={14} className="opacity-0 group-hover/item:opacity-100 -translate-x-2 group-hover/item:translate-x-0 transition-all" />
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
className="w-full text-left px-4 py-2.5 text-xs font-black uppercase tracking-widest text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10 rounded-xl transition-all mt-2 border-t border-slate-100 dark:border-white/5 pt-3"
|
||||
onClick={() => { if (confirm("Unenroll student?")) handleCohortAssignment(student.user_id, "", true) }}
|
||||
>
|
||||
Unenroll Student
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</td>
|
||||
|
||||
{/* Progreso */}
|
||||
<td className="p-5 hidden md:table-cell">
|
||||
<div className="flex flex-col gap-1.5 min-w-[120px]">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[9px] font-black text-slate-400 uppercase">Progreso</span>
|
||||
<span className={`text-[10px] font-black ${progress >= 80 ? "text-emerald-500" : progress >= 40 ? "text-blue-400" : "text-slate-400"}`}>{progress}%</span>
|
||||
</div>
|
||||
<div className="w-full h-1.5 bg-slate-100 dark:bg-white/10 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full rounded-full transition-all duration-700 ${progress >= 80 ? "bg-emerald-500" : progress >= 40 ? "bg-blue-500" : "bg-slate-300 dark:bg-white/20"}`}
|
||||
style={{ width: `${progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* Promedio */}
|
||||
<td className="p-5 text-center hidden lg:table-cell">
|
||||
{avgPct !== null ? (
|
||||
<span className={`text-sm font-black ${avgPct >= 70 ? "text-emerald-500" : avgPct >= 50 ? "text-orange-400" : "text-red-500"}`}>
|
||||
{avgPct}%
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-xs text-slate-300 dark:text-white/20">—</span>
|
||||
)}
|
||||
</td>
|
||||
|
||||
{/* Última actividad */}
|
||||
<td className="p-5 text-center hidden lg:table-cell">
|
||||
{daysInactive !== null ? (
|
||||
<div className={`flex items-center justify-center gap-1 text-xs font-bold ${daysInactive >= 14 ? "text-red-400" : daysInactive >= 7 ? "text-orange-400" : "text-slate-500 dark:text-gray-400"}`}>
|
||||
<Clock size={12} />
|
||||
{daysInactive === 0 ? "Hoy" : daysInactive === 1 ? "Ayer" : `Hace ${daysInactive}d`}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-xs text-slate-300 dark:text-white/20">Sin datos</span>
|
||||
)}
|
||||
</td>
|
||||
|
||||
{/* Riesgo */}
|
||||
<td className="p-5 text-center">
|
||||
<RiskBadge level={risk} />
|
||||
</td>
|
||||
|
||||
{/* Acciones */}
|
||||
<td className="p-5 text-right">
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<button
|
||||
onClick={() => openNotify(student)}
|
||||
title="Enviar notificación"
|
||||
className="p-2 rounded-xl bg-blue-500/10 hover:bg-blue-600 text-blue-500 hover:text-white transition-all active:scale-95"
|
||||
>
|
||||
<Bell size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => router.push(`/courses/${id}/grades`)}
|
||||
title="Ver libro de notas"
|
||||
className="p-2 rounded-xl bg-slate-100 dark:bg-white/5 hover:bg-slate-200 dark:hover:bg-white/10 text-slate-400 hover:text-slate-700 dark:hover:text-white transition-all active:scale-95"
|
||||
>
|
||||
<BarChart2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Leyenda */}
|
||||
<div className="flex flex-wrap items-center gap-4 px-1">
|
||||
<span className="text-[9px] font-black uppercase tracking-widest text-slate-400">Indicador de riesgo:</span>
|
||||
<span className="flex items-center gap-1.5 text-[10px] text-slate-500"><TrendingDown size={12} className="text-red-500" /> Crítico — inactivo ≥14d o promedio <40%</span>
|
||||
<span className="flex items-center gap-1.5 text-[10px] text-slate-500"><TrendingDown size={12} className="text-orange-400" /> Alto — inactivo ≥7d o promedio <60%</span>
|
||||
<span className="flex items-center gap-1.5 text-[10px] text-slate-500"><TrendingDown size={12} className="text-yellow-400" /> Medio — inactivo ≥3d o promedio <70%</span>
|
||||
<span className="flex items-center gap-1.5 text-[10px] text-slate-500"><CheckCircle2 size={12} className="text-emerald-500" /> Bien</span>
|
||||
</div>
|
||||
</div>
|
||||
</CourseEditorLayout>
|
||||
|
||||
{/* Enroll Modal */}
|
||||
{
|
||||
isEnrollModalOpen && (
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-900/40 dark:bg-black/80 backdrop-blur-md animate-in fade-in duration-300">
|
||||
<div className="bg-white dark:bg-[#16181b] border border-slate-200 dark:border-white/10 rounded-[2.5rem] w-full max-w-2xl overflow-hidden shadow-2xl scale-in-center">
|
||||
<div className="p-8 border-b border-slate-100 dark:border-white/5 flex items-center justify-between bg-slate-50/50 dark:bg-transparent">
|
||||
<div>
|
||||
<h2 className="text-2xl font-black flex items-center gap-3 text-slate-900 dark:text-white">
|
||||
<UserPlus className="text-blue-600 dark:text-blue-500" />
|
||||
Enroll Students
|
||||
</h2>
|
||||
<p className="text-xs text-slate-400 dark:text-gray-500 font-bold uppercase tracking-widest mt-1">Select from organization directory</p>
|
||||
</div>
|
||||
<button onClick={() => setIsEnrollModalOpen(false)} className="p-3 hover:bg-slate-200 dark:hover:bg-white/10 rounded-2xl transition-all group active:scale-90">
|
||||
<X size={20} className="text-slate-400 group-hover:text-slate-900 dark:group-hover:text-white" />
|
||||
</button>
|
||||
{/* Modal: Inscribir */}
|
||||
{isEnrollModalOpen && (
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200">
|
||||
<div className="bg-white dark:bg-[#16181b] border border-slate-200 dark:border-white/10 rounded-[2.5rem] w-full max-w-2xl overflow-hidden shadow-2xl">
|
||||
<div className="p-8 border-b border-slate-100 dark:border-white/5 flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-xl font-black flex items-center gap-3 text-slate-900 dark:text-white">
|
||||
<UserPlus className="text-blue-600" /> Inscribir Estudiantes
|
||||
</h2>
|
||||
<p className="text-xs text-slate-400 font-bold uppercase tracking-widest mt-1">Directorio de la organización</p>
|
||||
</div>
|
||||
<div className="p-8 space-y-8">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 dark:text-gray-500 w-5 h-5" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search by name or email..."
|
||||
value={enrollSearch}
|
||||
onChange={(e) => setEnrollSearch(e.target.value)}
|
||||
className="w-full bg-slate-100 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-[1.5rem] py-4 pl-12 pr-4 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 font-bold text-slate-900 dark:text-white shadow-inner"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 max-h-[400px] overflow-y-auto pr-2 custom-scrollbar">
|
||||
{orgUsersLoading ? (
|
||||
<div className="flex justify-center p-12 text-blue-500 items-center flex-col gap-4">
|
||||
<Loader2 className="w-10 h-10 animate-spin" />
|
||||
<span className="text-xs font-black uppercase tracking-widest text-slate-400">Fetching Directory...</span>
|
||||
</div>
|
||||
) : allOrgUsers.filter(u => u.full_name.toLowerCase().includes(enrollSearch.toLowerCase())).length === 0 ? (
|
||||
<div className="text-center p-12 text-slate-400 dark:text-gray-500 italic font-medium">No remaining students found in organization directory.</div>
|
||||
) : (
|
||||
allOrgUsers.filter(u => u.full_name.toLowerCase().includes(enrollSearch.toLowerCase())).map(user => (
|
||||
<div key={user.id} className="flex items-center justify-between p-5 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl group/user hover:bg-white dark:hover:bg-white/[0.08] transition-all shadow-sm">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-2xl bg-white dark:bg-black/20 border border-slate-100 dark:border-white/10 flex items-center justify-center shadow-sm">
|
||||
<UserCircle className="text-slate-400 dark:text-gray-500" size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-black text-slate-900 dark:text-white text-sm tracking-tight group-hover/user:text-blue-600 dark:group-hover/user:text-blue-400 transition-colors uppercase">{user.full_name}</div>
|
||||
<div className="text-xs text-slate-400 dark:text-gray-500 font-medium flex items-center gap-1.5 mt-0.5 italic"><Mail size={10} className="text-blue-400" /> {user.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleEnroll([user.email])}
|
||||
className="px-6 py-2 bg-blue-600 hover:bg-blue-500 text-white text-xs font-black uppercase tracking-widest rounded-xl transition-all shadow-md shadow-blue-500/20 active:scale-95"
|
||||
>
|
||||
Enroll
|
||||
</button>
|
||||
<button onClick={() => setIsEnrollModalOpen(false)} className="p-3 hover:bg-slate-100 dark:hover:bg-white/10 rounded-2xl transition-all">
|
||||
<X size={20} className="text-slate-400" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-8 space-y-6">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 w-4 h-4" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Buscar por nombre o email..."
|
||||
value={enrollSearch}
|
||||
onChange={e => setEnrollSearch(e.target.value)}
|
||||
className="w-full bg-slate-50 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-2xl py-3 pl-11 pr-4 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 font-bold text-slate-900 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-3 max-h-[360px] overflow-y-auto">
|
||||
{orgUsersLoading ? (
|
||||
<div className="flex justify-center p-12"><Loader2 className="w-8 h-8 text-blue-500 animate-spin" /></div>
|
||||
) : allOrgUsers.filter(u => u.full_name.toLowerCase().includes(enrollSearch.toLowerCase())).length === 0 ? (
|
||||
<p className="text-center p-10 text-slate-400 italic text-sm">No hay más estudiantes disponibles.</p>
|
||||
) : allOrgUsers.filter(u => u.full_name.toLowerCase().includes(enrollSearch.toLowerCase())).map(u => (
|
||||
<div key={u.id} className="flex items-center justify-between p-4 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-white dark:bg-black/20 border border-slate-100 dark:border-white/10 flex items-center justify-center">
|
||||
<UserCircle size={22} className="text-slate-400" />
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/20 p-5 rounded-3xl flex gap-4 shadow-sm">
|
||||
<div className="w-10 h-10 rounded-2xl bg-white dark:bg-black/20 flex items-center justify-center shrink-0 shadow-sm">
|
||||
<Plus size={20} className="text-blue-600 dark:text-blue-400" />
|
||||
<div>
|
||||
<div className="font-black text-slate-900 dark:text-white text-sm">{u.full_name}</div>
|
||||
<div className="text-xs text-slate-400 flex items-center gap-1"><Mail size={10} /> {u.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleEnroll([u.email])}
|
||||
className="px-5 py-2 bg-blue-600 hover:bg-blue-500 text-white text-xs font-black uppercase tracking-widest rounded-xl transition-all active:scale-95"
|
||||
>
|
||||
Inscribir
|
||||
</button>
|
||||
</div>
|
||||
<div className="text-xs text-blue-800/80 dark:text-blue-300 leading-relaxed font-bold uppercase tracking-wide">
|
||||
You can also enroll external students by going to the <strong>Gradebook</strong> and using the Bulk Enroll feature.
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/20 p-4 rounded-2xl flex gap-3 text-xs text-blue-700 dark:text-blue-300 font-medium">
|
||||
<Plus size={16} className="text-blue-500 shrink-0 mt-0.5" />
|
||||
También puedes inscribir alumnos externos desde el <strong>Libro de Notas</strong> con la función de inscripción masiva.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Modal: Notificar alumno */}
|
||||
{notifyTarget && (
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200">
|
||||
<div className="bg-white dark:bg-[#16181b] border border-slate-200 dark:border-white/10 rounded-[2rem] w-full max-w-lg shadow-2xl">
|
||||
<div className="p-7 border-b border-slate-100 dark:border-white/5 flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-lg font-black flex items-center gap-2 text-slate-900 dark:text-white">
|
||||
<Bell size={18} className="text-blue-500" /> Notificar Alumno
|
||||
</h2>
|
||||
<p className="text-xs text-slate-400 mt-0.5">{notifyTarget.full_name} · {notifyTarget.email}</p>
|
||||
</div>
|
||||
<button onClick={() => setNotifyTarget(null)} className="p-2 hover:bg-slate-100 dark:hover:bg-white/10 rounded-xl transition-all">
|
||||
<X size={18} className="text-slate-400" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-7 space-y-5">
|
||||
{notifySuccess ? (
|
||||
<div className="flex flex-col items-center gap-3 py-8">
|
||||
<CheckCircle2 size={40} className="text-emerald-500" />
|
||||
<p className="font-black text-emerald-500">Notificación enviada</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div>
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2 block">Título</label>
|
||||
<input
|
||||
type="text"
|
||||
value={notifyTitle}
|
||||
onChange={e => setNotifyTitle(e.target.value)}
|
||||
placeholder="Ej: Recordatorio de actividad pendiente"
|
||||
className="w-full bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-3 text-sm font-bold text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500/50"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2 block">Mensaje</label>
|
||||
<textarea
|
||||
value={notifyMessage}
|
||||
onChange={e => setNotifyMessage(e.target.value)}
|
||||
placeholder="Escribe el mensaje para el alumno..."
|
||||
rows={4}
|
||||
className="w-full bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-3 text-sm font-medium text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500/50 resize-none"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleNotify}
|
||||
disabled={notifySending || !notifyTitle.trim() || !notifyMessage.trim()}
|
||||
className="w-full py-3 bg-blue-600 hover:bg-blue-500 disabled:opacity-50 disabled:cursor-not-allowed text-white font-black text-sm uppercase tracking-widest rounded-xl transition-all active:scale-95 flex items-center justify-center gap-2"
|
||||
>
|
||||
{notifySending ? <Loader2 size={16} className="animate-spin" /> : <Bell size={16} />}
|
||||
{notifySending ? "Enviando..." : "Enviar Notificación"}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
+12
-17
@@ -86,15 +86,15 @@ export default function StudioDashboard() {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
try {
|
||||
const data = await cmsApi.exportCourse(courseId);
|
||||
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
|
||||
const blob = await cmsApi.exportCourse(courseId);
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = `course_${title.replace(/\s+/g, '_')}.json`;
|
||||
link.download = `course_${title.replace(/\s+/g, '_')}.ccb`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(url);
|
||||
} catch (err) {
|
||||
console.error("Export failed", err);
|
||||
alert("Failed to export course");
|
||||
@@ -105,19 +105,14 @@ export default function StudioDashboard() {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = async (event) => {
|
||||
try {
|
||||
const json = JSON.parse(event.target?.result as string);
|
||||
const newCourse = await cmsApi.importCourse(json);
|
||||
setCourses((prev: Course[]) => [...prev, newCourse]);
|
||||
alert("Course imported successfully!");
|
||||
} catch (err) {
|
||||
console.error("Import failed", err);
|
||||
alert("Failed to import course. Ensure the file is a valid OpenCCB course export.");
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
try {
|
||||
const newCourse = await cmsApi.importCourse(file);
|
||||
setCourses((prev: Course[]) => [...prev, newCourse]);
|
||||
alert("Course imported successfully!");
|
||||
} catch (err) {
|
||||
console.error("Import failed", err);
|
||||
alert("Failed to import course. Ensure the file is a valid .ccb export.");
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteCourse = async (e: React.MouseEvent, courseId: string, title: string) => {
|
||||
@@ -146,7 +141,7 @@ export default function StudioDashboard() {
|
||||
<label className="flex items-center gap-2 px-5 py-2.5 bg-slate-50 dark:bg-white/5 hover:bg-slate-100 dark:hover:bg-white/10 border border-slate-200 dark:border-white/10 rounded-xl font-bold text-sm transition-all cursor-pointer active:scale-95 text-slate-900 dark:text-white">
|
||||
<Upload size={16} />
|
||||
Importar
|
||||
<input type="file" accept=".json" onChange={handleImport} className="hidden" />
|
||||
<input type="file" accept=".ccb,.zip" onChange={handleImport} className="hidden" />
|
||||
</label>
|
||||
<button
|
||||
onClick={() => setIsAIModalOpen(true)}
|
||||
|
||||
@@ -24,6 +24,7 @@ type TabKey =
|
||||
| "team"
|
||||
| "peer-reviews"
|
||||
| "students"
|
||||
| "mentorships"
|
||||
| "sessions"
|
||||
| "pedagogical"
|
||||
| "lti-tools"
|
||||
@@ -101,6 +102,7 @@ export default function CourseEditorLayout({
|
||||
tabs: [
|
||||
{ key: "team", label: "Equipo", icon: Users, href: `/courses/${id}/team` },
|
||||
{ key: "students", label: "Estudiantes y Grupos", icon: GraduationCap, href: `/courses/${id}/students` },
|
||||
{ key: "mentorships", label: "Mentoría", icon: Award, href: `/courses/${id}/mentorships` },
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@@ -903,6 +903,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 {
|
||||
@@ -911,9 +914,26 @@ 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 PeerReviewWithFlag extends PeerReview {
|
||||
is_instructor_review: boolean;
|
||||
}
|
||||
|
||||
export interface CourseInstructor {
|
||||
id: string;
|
||||
course_id: string;
|
||||
@@ -1116,11 +1136,39 @@ export const cmsApi = {
|
||||
return apiFetch(`/courses/${id}/analytics/advanced${query}`, {}, true);
|
||||
},
|
||||
getLessonHeatmap: (lessonId: string): Promise<{ second: number, count: number }[]> => apiFetch(`/lessons/${lessonId}/heatmap`),
|
||||
exportCourse: (id: string): Promise<Record<string, unknown>> => apiFetch(`/courses/${id}/export`),
|
||||
importCourse: (data: Record<string, unknown>): Promise<Course> => apiFetch(`/courses/import`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(data)
|
||||
}),
|
||||
exportCourse: (id: string): Promise<Blob> => {
|
||||
const token = getToken();
|
||||
const orgId = getSelectedOrgId();
|
||||
return fetch(`${API_BASE_URL}/courses/${id}/export`, {
|
||||
headers: {
|
||||
...(token ? { 'Authorization': `Bearer ${token}` } : {}),
|
||||
...(orgId ? { 'X-Organization-Id': orgId } : {}),
|
||||
},
|
||||
}).then(res => {
|
||||
if (!res.ok) return Promise.reject(new Error('Export failed'));
|
||||
return res.blob();
|
||||
});
|
||||
},
|
||||
importCourse: (file: File): Promise<Course> => {
|
||||
const token = getToken();
|
||||
const orgId = getSelectedOrgId();
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
return fetch(`${API_BASE_URL}/courses/import`, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
headers: {
|
||||
...(token ? { 'Authorization': `Bearer ${token}` } : {}),
|
||||
...(orgId ? { 'X-Organization-Id': orgId } : {}),
|
||||
},
|
||||
}).then(async res => {
|
||||
if (!res.ok) {
|
||||
const text = await res.text();
|
||||
return Promise.reject(new Error(text || 'Import failed'));
|
||||
}
|
||||
return res.json();
|
||||
});
|
||||
},
|
||||
|
||||
// Course Templates
|
||||
listCourseTemplates: (): Promise<CourseTemplateSummary[]> => apiFetch('/course-templates'),
|
||||
@@ -1668,6 +1716,11 @@ export const lmsApi = {
|
||||
},
|
||||
bulkEnroll: (courseId: string, emails: string[]): Promise<BulkEnrollResponse> =>
|
||||
apiFetch('/bulk-enroll', { method: 'POST', body: JSON.stringify({ course_id: courseId, emails }) }, true),
|
||||
notifyStudent: (courseId: string, studentId: string, title: string, message: string, linkUrl?: string): Promise<void> =>
|
||||
apiFetch(`/courses/${courseId}/students/${studentId}/notify`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ title, message, link_url: linkUrl ?? null }),
|
||||
}, true),
|
||||
// Peer Assessment
|
||||
submitAssignment: (courseId: string, lessonId: string, content: string): Promise<CourseSubmission> =>
|
||||
apiFetch(`/courses/${courseId}/lessons/${lessonId}/submit`, { method: 'POST', body: JSON.stringify({ content }) }, true),
|
||||
@@ -1681,6 +1734,15 @@ export const lmsApi = {
|
||||
apiFetch(`/courses/${courseId}/lessons/${lessonId}/submissions`, {}, true),
|
||||
getSubmissionReviews: (submissionId: string): Promise<PeerReview[]> =>
|
||||
apiFetch(`/peer-reviews/submissions/${submissionId}/reviews`, {}, true),
|
||||
// 41-F: Peer Review Mejorado
|
||||
getPeerReviewSettings: (courseId: string, lessonId: string): Promise<PeerReviewSettings | null> =>
|
||||
apiFetch(`/courses/${courseId}/lessons/${lessonId}/peer-settings`, {}, true),
|
||||
upsertPeerReviewSettings: (courseId: string, lessonId: string, payload: Partial<PeerReviewSettings>): Promise<PeerReviewSettings> =>
|
||||
apiFetch(`/courses/${courseId}/lessons/${lessonId}/peer-settings`, { method: 'POST', body: JSON.stringify(payload) }, true),
|
||||
autoAssignPeerReviews: (courseId: string, lessonId: string): Promise<{ submissions_processed: number; assignments_created: number }> =>
|
||||
apiFetch(`/courses/${courseId}/lessons/${lessonId}/auto-assign-reviews`, { method: 'POST' }, true),
|
||||
instructorGradeSubmission: (courseId: string, lessonId: string, submissionId: string, score: number, feedback: string): Promise<PeerReviewWithFlag> =>
|
||||
apiFetch(`/courses/${courseId}/lessons/${lessonId}/instructor-grade`, { method: 'POST', body: JSON.stringify({ submission_id: submissionId, score, feedback }) }, true),
|
||||
|
||||
// Announcements
|
||||
listAnnouncements: (courseId: string): Promise<AnnouncementWithAuthor[]> =>
|
||||
@@ -1857,6 +1919,17 @@ export const lmsApi = {
|
||||
apiFetch(`/courses/${courseId}/study-rooms/${roomId}/recordings`, {}, true),
|
||||
updateLessonCollaborativeDoc: (lessonId: string, payload: UpdateCollaborativeDocPayload): Promise<UpdateCollaborativeDocResponse> =>
|
||||
apiFetch(`/lessons/${lessonId}/collaborative-doc`, { method: 'PUT', body: JSON.stringify(payload) }, true),
|
||||
|
||||
// Fase 41-C: Mentoría
|
||||
listCourseMentorships: (courseId: string): Promise<StudioMentorshipView[]> =>
|
||||
apiFetch(`/courses/${courseId}/mentorships`, {}, true),
|
||||
assignMentor: (courseId: string, mentorId: string, studentId: string, notes?: string): Promise<StudioMentorshipView> =>
|
||||
apiFetch(`/courses/${courseId}/mentorships`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ mentor_id: mentorId, student_id: studentId, notes: notes ?? null }),
|
||||
}, true),
|
||||
deleteMentorship: (courseId: string, mentorshipId: string): Promise<void> =>
|
||||
apiFetch(`/courses/${courseId}/mentorships/${mentorshipId}`, { method: 'DELETE' }, true),
|
||||
};
|
||||
|
||||
export interface StudyRoom {
|
||||
@@ -2392,4 +2465,20 @@ export async function updateLessonCollaborativeDoc(
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(payload),
|
||||
}, true);
|
||||
}
|
||||
|
||||
// Fase 41-C: Mentoría
|
||||
export interface StudioMentorshipView {
|
||||
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