feat: Implement advanced grading (rubrics) and lesson dependencies across CMS service, API, and Studio UI.
This commit is contained in:
@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
|
||||
import { lmsApi, Course, Module, Recommendation, UserGrade } from "@/lib/api";
|
||||
import { Sparkles, AlertTriangle, ArrowRight, CheckCircle2, XCircle, Circle } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { BookOpen, ChevronRight, PlayCircle, Calendar, Clock, Info } from "lucide-react";
|
||||
import { BookOpen, ChevronRight, PlayCircle, Calendar, Clock, Info, Lock } from "lucide-react";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import DiscussionBoard from "@/components/DiscussionBoard";
|
||||
import { AnnouncementsList } from "@/components/AnnouncementsList";
|
||||
@@ -17,6 +17,7 @@ export default function CourseOutlinePage({ params }: { params: { id: string } }
|
||||
const [loadingAI, setLoadingAI] = useState(false);
|
||||
const [userGrades, setUserGrades] = useState<UserGrade[]>([]);
|
||||
const [isEnrolled, setIsEnrolled] = useState(false);
|
||||
const [lessonDependencies, setLessonDependencies] = useState<any[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
@@ -24,6 +25,7 @@ export default function CourseOutlinePage({ params }: { params: { id: string } }
|
||||
setLoading(true);
|
||||
const data = await lmsApi.getCourseOutline(params.id);
|
||||
setCourseData({ ...data.course, modules: data.modules });
|
||||
setLessonDependencies(data.dependencies || []);
|
||||
|
||||
if (user) {
|
||||
const grades = await lmsApi.getUserGrades(user.id, params.id);
|
||||
@@ -88,7 +90,23 @@ export default function CourseOutlinePage({ params }: { params: { id: string } }
|
||||
|
||||
if (!courseData) return <div className="text-center py-20 text-gray-500">Curso no encontrado.</div>;
|
||||
|
||||
const isLessonLocked = (lessonId: string) => {
|
||||
if (!isEnrolled) return false;
|
||||
const deps = lessonDependencies.filter(d => d.lesson_id === lessonId);
|
||||
if (deps.length === 0) return false;
|
||||
|
||||
return deps.some(dep => {
|
||||
const prereqGrade = userGrades.find(g => g.lesson_id === dep.prerequisite_lesson_id);
|
||||
if (!prereqGrade) return true; // Not completed at all
|
||||
if (dep.min_score_percentage && (prereqGrade.score * 100) < dep.min_score_percentage) return true;
|
||||
return false;
|
||||
});
|
||||
};
|
||||
|
||||
const getStatusIcon = (lessonId: string, isGraded: boolean, allowRetry: boolean) => {
|
||||
if (isLessonLocked(lessonId)) {
|
||||
return <Lock size={18} className="text-gray-600" />;
|
||||
}
|
||||
const grade = userGrades.find((g: UserGrade) => g.lesson_id === lessonId);
|
||||
if (!grade) {
|
||||
return <Circle size={18} className="text-white/20" />;
|
||||
@@ -263,43 +281,63 @@ export default function CourseOutlinePage({ params }: { params: { id: string } }
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 pl-14">
|
||||
{module.lessons.map((lesson: any) => (
|
||||
isEnrolled ? (
|
||||
<Link key={lesson.id} href={`/courses/${params.id}/lessons/${lesson.id}`}>
|
||||
<div className="glass-card !p-4 group hover:bg-white/10 border-white/5 active:scale-[0.99] transition-all">
|
||||
{module.lessons.map((lesson: any) => {
|
||||
const locked = isLessonLocked(lesson.id);
|
||||
return isEnrolled ? (
|
||||
locked ? (
|
||||
<div key={lesson.id} className="glass-card !p-4 border-white/5 opacity-60 cursor-not-allowed">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-10 h-10 rounded-lg bg-white/5 flex items-center justify-center group-hover:bg-blue-500/20 transition-colors">
|
||||
{lesson.content_type === 'video' ? (
|
||||
<PlayCircle size={18} className="text-gray-400 group-hover:text-blue-400" />
|
||||
) : (
|
||||
<BookOpen size={18} className="text-gray-400 group-hover:text-blue-400" />
|
||||
)}
|
||||
<div className="w-10 h-10 rounded-lg bg-white/5 flex items-center justify-center">
|
||||
<Lock size={18} className="text-gray-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-sm font-bold text-gray-200 group-hover:text-white transition-colors">{lesson.title}</h3>
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-500">
|
||||
{lesson.content_type === 'activity' ? 'Actividad Interactiva' : 'Lección en Video'}
|
||||
</span>
|
||||
<h3 className="text-sm font-bold text-gray-400">{lesson.title}</h3>
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-600">Bloqueado por Prerrequisitos</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-6">
|
||||
{getStatusIcon(lesson.id, lesson.is_graded, lesson.allow_retry)}
|
||||
{lesson.due_date && (
|
||||
<div className="text-right hidden sm:block">
|
||||
<div className="text-[9px] font-black uppercase tracking-widest text-gray-600">Vencimiento</div>
|
||||
<div className={`text-[10px] font-bold ${new Date(lesson.due_date) < new Date() ? 'text-red-400' : 'text-blue-400'}`}>
|
||||
{new Date(lesson.due_date).toLocaleDateString()}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<ChevronRight size={18} className="text-blue-500" />
|
||||
</div>
|
||||
<Lock size={18} className="text-gray-600" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
) : (
|
||||
<Link key={lesson.id} href={`/courses/${params.id}/lessons/${lesson.id}`}>
|
||||
<div className="glass-card !p-4 group hover:bg-white/10 border-white/5 active:scale-[0.99] transition-all">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-10 h-10 rounded-lg bg-white/5 flex items-center justify-center group-hover:bg-blue-500/20 transition-colors">
|
||||
{lesson.content_type === 'video' ? (
|
||||
<PlayCircle size={18} className="text-gray-400 group-hover:text-blue-400" />
|
||||
) : (
|
||||
<BookOpen size={18} className="text-gray-400 group-hover:text-blue-400" />
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-sm font-bold text-gray-200 group-hover:text-white transition-colors">{lesson.title}</h3>
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-500">
|
||||
{lesson.content_type === 'activity' ? 'Actividad Interactiva' : 'Lección en Video'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-6">
|
||||
{getStatusIcon(lesson.id, lesson.is_graded, lesson.allow_retry)}
|
||||
{lesson.due_date && (
|
||||
<div className="text-right hidden sm:block">
|
||||
<div className="text-[9px] font-black uppercase tracking-widest text-gray-600">Vencimiento</div>
|
||||
<div className={`text-[10px] font-bold ${new Date(lesson.due_date) < new Date() ? 'text-red-400' : 'text-blue-400'}`}>
|
||||
{new Date(lesson.due_date).toLocaleDateString()}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<ChevronRight size={18} className="text-blue-500" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
) : (
|
||||
<div key={lesson.id} onClick={handleEnrollOrBuy} className="glass-card !p-4 group border-white/5 opacity-60 cursor-pointer hover:bg-white/5 transition-all">
|
||||
<div className="flex items-center justify-between">
|
||||
@@ -319,8 +357,8 @@ export default function CourseOutlinePage({ params }: { params: { id: string } }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
@@ -138,6 +138,15 @@ export interface GradingCategory {
|
||||
drop_count: number;
|
||||
}
|
||||
|
||||
export interface LessonDependency {
|
||||
id: string;
|
||||
organization_id: string;
|
||||
lesson_id: string;
|
||||
prerequisite_lesson_id: string;
|
||||
min_score_percentage: number | null;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export interface UserGrade {
|
||||
id: string;
|
||||
user_id: string;
|
||||
@@ -366,7 +375,13 @@ export const lmsApi = {
|
||||
return apiFetch(`/catalog${query}`);
|
||||
},
|
||||
|
||||
async getCourseOutline(courseId: string): Promise<{ course: Course, modules: Module[], grading_categories: GradingCategory[], organization: Organization }> {
|
||||
async getCourseOutline(courseId: string): Promise<{
|
||||
course: Course,
|
||||
modules: Module[],
|
||||
grading_categories: GradingCategory[],
|
||||
organization: Organization,
|
||||
dependencies?: LessonDependency[]
|
||||
}> {
|
||||
return apiFetch(`/courses/${courseId}/outline`);
|
||||
},
|
||||
|
||||
|
||||
@@ -1,8 +1,27 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { cmsApi, Lesson, Block, GradingCategory, LibraryBlock } from "@/lib/api";
|
||||
import Link from "next/link";
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import Link from 'next/link';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { cmsApi, Lesson, Block, GradingCategory, LibraryBlock, Rubric, RubricLevel, RubricCriterion, LessonDependency } from '@/lib/api';
|
||||
import {
|
||||
Layout,
|
||||
CheckCircle2,
|
||||
Pencil,
|
||||
Save,
|
||||
Trash2,
|
||||
Plus,
|
||||
X,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
Settings,
|
||||
Target,
|
||||
Eye,
|
||||
Brain,
|
||||
Library,
|
||||
BookMarked,
|
||||
ArrowLeft
|
||||
} from 'lucide-react';
|
||||
import DescriptionBlock from "@/components/blocks/DescriptionBlock";
|
||||
import MediaBlock from "@/components/blocks/MediaBlock";
|
||||
import QuizBlock from "@/components/blocks/QuizBlock";
|
||||
@@ -19,16 +38,6 @@ import PeerReviewBlock from "@/components/blocks/PeerReviewBlock";
|
||||
import SaveToLibraryModal from "@/components/modals/SaveToLibraryModal";
|
||||
import LibraryPanel from "@/components/LibraryPanel";
|
||||
import Modal from "@/components/Modal";
|
||||
import {
|
||||
Save,
|
||||
X,
|
||||
Pencil,
|
||||
ChevronUp,
|
||||
ChevronDown,
|
||||
Trash2,
|
||||
BookMarked,
|
||||
Library
|
||||
} from "lucide-react";
|
||||
|
||||
export default function LessonEditor({ params }: { params: { id: string; lessonId: string } }) {
|
||||
const [lesson, setLesson] = useState<Lesson | null>(null);
|
||||
@@ -50,15 +59,24 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
const [dueDate, setDueDate] = useState<string>("");
|
||||
const [importantDateType, setImportantDateType] = useState<string>("");
|
||||
|
||||
const [isAIQuizModalOpen, setIsAIQuizModalOpen] = useState(false);
|
||||
const [aiQuizContext, setAiQuizContext] = useState("");
|
||||
const [aiQuizType, setAiQuizType] = useState("multiple-choice");
|
||||
// Rubric State
|
||||
const [courseRubrics, setCourseRubrics] = useState<Rubric[]>([]);
|
||||
const [assignedRubricIds, setAssignedRubricIds] = useState<string[]>([]);
|
||||
|
||||
// Content Libraries states
|
||||
const [isSaveToLibraryModalOpen, setIsSaveToLibraryModalOpen] = useState(false);
|
||||
const [blockToSave, setBlockToSave] = useState<Block | null>(null);
|
||||
const [isLibraryPanelOpen, setIsLibraryPanelOpen] = useState(false);
|
||||
|
||||
// Learning Sequences State
|
||||
const [allLessons, setAllLessons] = useState<Lesson[]>([]);
|
||||
const [dependencies, setDependencies] = useState<LessonDependency[]>([]);
|
||||
|
||||
// AI Quiz Generation State
|
||||
const [isAIQuizModalOpen, setIsAIQuizModalOpen] = useState(false);
|
||||
const [aiQuizContext, setAiQuizContext] = useState("");
|
||||
const [aiQuizType, setAiQuizType] = useState("multiple-choice");
|
||||
|
||||
const [editValue, setEditValue] = useState("");
|
||||
|
||||
|
||||
@@ -120,6 +138,28 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
// Load grading categories
|
||||
const categories = await cmsApi.getGradingCategories(params.id);
|
||||
setGradingCategories(categories);
|
||||
|
||||
// Load course rubrics and lesson rubrics
|
||||
const [allRubrics, lessonRubrics, courseOutline, lessonDeps] = await Promise.all([
|
||||
cmsApi.listCourseRubrics(params.id),
|
||||
cmsApi.getLessonRubrics(params.lessonId),
|
||||
cmsApi.getCourseWithFullOutline(params.id),
|
||||
cmsApi.listLessonDependencies(params.lessonId)
|
||||
]);
|
||||
setCourseRubrics(allRubrics);
|
||||
setAssignedRubricIds(lessonRubrics.map(r => r.id));
|
||||
|
||||
// Extract all lessons from outline for prerequisite selection
|
||||
const lessons: Lesson[] = [];
|
||||
courseOutline.modules?.forEach(m => {
|
||||
m.lessons.forEach(l => {
|
||||
if (l.id !== params.lessonId) {
|
||||
lessons.push(l);
|
||||
}
|
||||
});
|
||||
});
|
||||
setAllLessons(lessons);
|
||||
setDependencies(lessonDeps);
|
||||
} catch {
|
||||
console.error("Failed to load lesson or categories");
|
||||
} finally {
|
||||
@@ -140,6 +180,21 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
}
|
||||
};
|
||||
|
||||
const toggleRubric = async (rubricId: string, isAssigned: boolean) => {
|
||||
try {
|
||||
if (isAssigned) {
|
||||
await cmsApi.unassignRubricFromLesson(params.lessonId, rubricId);
|
||||
setAssignedRubricIds(assignedRubricIds.filter(id => id !== rubricId));
|
||||
} else {
|
||||
await cmsApi.assignRubricToLesson(params.lessonId, rubricId);
|
||||
setAssignedRubricIds([...assignedRubricIds, rubricId]);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to toggle rubric", err);
|
||||
alert("Failed to update rubric assignment.");
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!lesson) return;
|
||||
setIsSaving(true);
|
||||
@@ -265,7 +320,22 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
}
|
||||
};
|
||||
|
||||
const handleGenerateQuiz = async () => {
|
||||
const toggleDependency = async (prerequisiteId: string, isAssigned: boolean) => {
|
||||
try {
|
||||
if (isAssigned) {
|
||||
await cmsApi.removeDependency(params.lessonId, prerequisiteId);
|
||||
setDependencies(dependencies.filter(d => d.prerequisite_lesson_id !== prerequisiteId));
|
||||
} else {
|
||||
const newDep = await cmsApi.assignDependency(params.lessonId, { prerequisite_lesson_id: prerequisiteId });
|
||||
setDependencies([...dependencies, newDep]);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to toggle dependency", err);
|
||||
alert("Failed to update prerequisite assignment.");
|
||||
}
|
||||
};
|
||||
|
||||
const handleGenerateQuiz = () => {
|
||||
setIsAIQuizModalOpen(true);
|
||||
};
|
||||
|
||||
@@ -368,22 +438,54 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
|
||||
{isGraded && (
|
||||
<>
|
||||
<div className="col-span-full space-y-2">
|
||||
<span className="text-[10px] font-black uppercase tracking-widest text-gray-500 mb-2 block">Assessment Category</span>
|
||||
<select
|
||||
value={selectedCategoryId}
|
||||
onChange={(e) => setSelectedCategoryId(e.target.value)}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-blue-500 transition-all appearance-none font-bold"
|
||||
>
|
||||
<option value="" className="bg-gray-900 border-0">Select Category...</option>
|
||||
{gradingCategories.map((cat) => (
|
||||
<option key={cat.id} value={cat.id} className="bg-gray-900 border-0">
|
||||
{cat.name} ({cat.weight}%)
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<div className="text-[10px] text-gray-500 italic mt-1 pl-1">
|
||||
Manage categories in <Link href={`/courses/${params.id}/grading`} className="text-blue-400 hover:underline">Grading Policy</Link>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="space-y-4">
|
||||
<span className="text-[10px] font-black uppercase tracking-widest text-gray-500 mb-2 block">Assessment Category</span>
|
||||
<select
|
||||
value={selectedCategoryId}
|
||||
onChange={(e) => setSelectedCategoryId(e.target.value)}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-blue-500 transition-all appearance-none font-bold"
|
||||
>
|
||||
<option value="" className="bg-gray-900 border-0">Select Category...</option>
|
||||
{gradingCategories.map((cat) => (
|
||||
<option key={cat.id} value={cat.id} className="bg-gray-900 border-0">
|
||||
{cat.name} ({cat.weight}%)
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<div className="text-[10px] text-gray-500 italic mt-1 pl-1">
|
||||
Manage categories in <Link href={`/courses/${params.id}/grading`} className="text-blue-400 hover:underline">Grading Policy</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<span className="text-[10px] font-black uppercase tracking-widest text-gray-500 mb-2 block">Rubric (Optional)</span>
|
||||
<div className="bg-white/5 border border-white/10 rounded-xl p-4 max-h-48 overflow-y-auto space-y-2">
|
||||
{courseRubrics.length === 0 ? (
|
||||
<p className="text-xs text-gray-500 italic p-2 text-center">No rubrics found in this course.</p>
|
||||
) : (
|
||||
courseRubrics.map(rubric => {
|
||||
const isAssigned = assignedRubricIds.includes(rubric.id);
|
||||
return (
|
||||
<label key={rubric.id} className="flex items-center justify-between p-2 rounded-lg hover:bg-white/5 transition-all cursor-pointer group">
|
||||
<div className="flex items-center gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isAssigned}
|
||||
onChange={() => toggleRubric(rubric.id, isAssigned)}
|
||||
className="w-4 h-4 rounded border-gray-700 bg-gray-800 text-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
<span className="text-sm font-medium text-gray-200 group-hover:text-blue-400 transition-colors">{rubric.name}</span>
|
||||
</div>
|
||||
<span className="text-[10px] font-bold text-gray-600 bg-white/5 px-1.5 py-0.5 rounded">{rubric.total_points} pts</span>
|
||||
</label>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
<div className="text-[10px] text-gray-500 italic mt-1 pl-1">
|
||||
Manage rubrics in <Link href={`/courses/${params.id}/rubrics`} className="text-blue-400 hover:underline">Rubrics Manager</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -419,6 +521,104 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
<p className="text-[10px] text-gray-600 italic">Enables "Check Answer" buttons for individual blocks</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-8 border-t border-white/5 animate-in fade-in duration-500 delay-150">
|
||||
<div className="flex items-center gap-2 mb-6 uppercase tracking-[0.2em] text-[10px] font-black text-gray-500">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-blue-500 shadow-lg shadow-blue-500/50"></span>
|
||||
Access & Prerequisites
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-sm font-bold text-gray-200">Prerequisites</h4>
|
||||
<p className="text-xs text-gray-500 leading-relaxed">
|
||||
Students must complete these lessons before they can access this one.
|
||||
</p>
|
||||
<div className="bg-white/5 border border-white/10 rounded-2xl p-4 max-h-60 overflow-y-auto space-y-2">
|
||||
{allLessons.length === 0 ? (
|
||||
<p className="text-xs text-gray-500 italic p-4 text-center">No other lessons available.</p>
|
||||
) : (
|
||||
allLessons.map(l => {
|
||||
const dep = dependencies.find(d => d.prerequisite_lesson_id === l.id);
|
||||
const isAssigned = !!dep;
|
||||
return (
|
||||
<div key={l.id} className="space-y-2 p-2 rounded-xl hover:bg-white/5 transition-all group border border-transparent hover:border-white/10">
|
||||
<label className="flex items-center justify-between cursor-pointer">
|
||||
<div className="flex items-center gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isAssigned}
|
||||
onChange={() => toggleDependency(l.id, isAssigned)}
|
||||
className="w-4 h-4 rounded-md border-gray-700 bg-gray-800 text-blue-500 focus:ring-blue-500 transition-all"
|
||||
/>
|
||||
<span className={`text-sm font-medium transition-colors ${isAssigned ? 'text-blue-400' : 'text-gray-400 group-hover:text-gray-200'}`}>
|
||||
{l.title}
|
||||
</span>
|
||||
</div>
|
||||
{l.is_graded && (
|
||||
<span className="text-[9px] font-black uppercase tracking-tighter px-2 py-0.5 bg-blue-500/10 text-blue-400 rounded-full border border-blue-500/20">Graded</span>
|
||||
)}
|
||||
</label>
|
||||
{isAssigned && l.is_graded && (
|
||||
<div className="pl-7 animate-in slide-in-from-left-2 duration-300">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-[10px] text-gray-500 font-bold uppercase tracking-widest whitespace-nowrap">Min. Score %</span>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
max="100"
|
||||
value={dep.min_score_percentage || 0}
|
||||
onChange={async (e) => {
|
||||
const minScore = parseFloat(e.target.value);
|
||||
try {
|
||||
const updated = await cmsApi.assignDependency(params.lessonId, {
|
||||
prerequisite_lesson_id: l.id,
|
||||
min_score_percentage: minScore
|
||||
});
|
||||
setDependencies(dependencies.map(d => d.id === updated.id ? updated : d));
|
||||
} catch (err) {
|
||||
console.error("Failed to update min score", err);
|
||||
}
|
||||
}}
|
||||
className="w-16 bg-black/40 border border-white/10 rounded-lg px-2 py-1 text-xs text-blue-400 font-bold focus:outline-none focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col justify-center gap-4 px-6 border-l border-white/5">
|
||||
<div className="flex items-start gap-4 p-4 rounded-2xl bg-indigo-500/5 border border-indigo-500/10">
|
||||
<div className="p-2 rounded-xl bg-indigo-500/20">
|
||||
<Layout className="w-5 h-5 text-indigo-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="text-sm font-bold text-indigo-300">Intelligent Sequences</h5>
|
||||
<p className="text-[11px] text-indigo-300/60 leading-relaxed mt-1">
|
||||
Locked lessons will be visible in the student outline with a lock icon 🔒 until they meet all prerequisites.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-4 rounded-2xl bg-blue-500/5 border border-blue-500/10">
|
||||
<div className="p-2 rounded-xl bg-blue-500/20">
|
||||
<CheckCircle2 className="w-5 h-5 text-blue-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="text-sm font-bold text-blue-300">Completion Tracking</h5>
|
||||
<p className="text-[11px] text-blue-300/60 leading-relaxed mt-1">
|
||||
If a minimum score is set, students must pass the prerequisite before the next lesson is unlocked.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div >
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import CourseEditorLayout from "@/components/CourseEditorLayout";
|
||||
import RubricList from "@/components/Rubrics/RubricList";
|
||||
import RubricEditor from "@/components/Rubrics/RubricEditor";
|
||||
import { ArrowLeft, FileText, Info } from "lucide-react";
|
||||
|
||||
export default function RubricsPage() {
|
||||
const { id } = useParams() as { id: string };
|
||||
const router = useRouter();
|
||||
const [editingRubricId, setEditingRubricId] = useState<string | null>(null);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0f1115] text-white p-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-12">
|
||||
<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-3xl font-bold bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent">
|
||||
Rubrics Management
|
||||
</h1>
|
||||
<p className="text-gray-400 mt-1">Create and manage evaluation rubrics for your course</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="hidden md:flex items-center gap-2 bg-blue-500/10 border border-blue-500/20 px-4 py-2 rounded-2xl text-blue-400 text-sm">
|
||||
<Info className="w-4 h-4" />
|
||||
<span>Rubrics can be assigned to multiple lessons across the course.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CourseEditorLayout activeTab="rubrics">
|
||||
<div className="p-8">
|
||||
{editingRubricId ? (
|
||||
<RubricEditor
|
||||
rubricId={editingRubricId}
|
||||
courseId={id}
|
||||
onClose={() => setEditingRubricId(null)}
|
||||
/>
|
||||
) : (
|
||||
<RubricList
|
||||
courseId={id}
|
||||
onEdit={(rubricId) => setEditingRubricId(rubricId)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</CourseEditorLayout>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -7,7 +7,7 @@ import { Layout, CheckCircle2, Calendar, BarChart2, Settings, Folder, Graduation
|
||||
|
||||
interface CourseEditorLayoutProps {
|
||||
children: React.ReactNode;
|
||||
activeTab: "outline" | "grading" | "calendar" | "analytics" | "settings" | "files" | "grades";
|
||||
activeTab: "outline" | "grading" | "rubrics" | "calendar" | "analytics" | "settings" | "files" | "grades";
|
||||
}
|
||||
|
||||
export default function CourseEditorLayout({ children, activeTab }: CourseEditorLayoutProps) {
|
||||
@@ -16,6 +16,7 @@ export default function CourseEditorLayout({ children, activeTab }: CourseEditor
|
||||
const tabs = [
|
||||
{ key: "outline", label: "Outline", icon: Layout, href: `/courses/${id}` },
|
||||
{ key: "grading", label: "Grading Policy", icon: CheckCircle2, href: `/courses/${id}/grading` },
|
||||
{ key: "rubrics", label: "Rubrics", icon: Layout, href: `/courses/${id}/rubrics` },
|
||||
{ key: "grades", label: "Gradebook", icon: GraduationCap, href: `/courses/${id}/grades` },
|
||||
{ key: "calendar", label: "Calendar", icon: Calendar, href: `/courses/${id}/calendar` },
|
||||
{ key: "analytics", label: "Analytics", icon: BarChart2, href: `/courses/${id}/analytics` },
|
||||
|
||||
@@ -0,0 +1,376 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import {
|
||||
RubricWithDetails,
|
||||
RubricCriterion,
|
||||
RubricLevel,
|
||||
cmsApi,
|
||||
CreateCriterionPayload,
|
||||
CreateLevelPayload
|
||||
} from "@/lib/api";
|
||||
import {
|
||||
Plus,
|
||||
Trash2,
|
||||
Save,
|
||||
X,
|
||||
GripVertical,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
AlertCircle,
|
||||
Check
|
||||
} from "lucide-react";
|
||||
import { clsx, type ClassValue } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
|
||||
interface RubricEditorProps {
|
||||
rubricId: string;
|
||||
courseId: string;
|
||||
onClose: () => void;
|
||||
onSaved?: () => void;
|
||||
}
|
||||
|
||||
export default function RubricEditor({ rubricId, courseId, onClose, onSaved }: RubricEditorProps) {
|
||||
const [rubric, setRubric] = useState<RubricWithDetails | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
loadRubric();
|
||||
}, [rubricId]);
|
||||
|
||||
const loadRubric = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await cmsApi.getRubricWithDetails(rubricId);
|
||||
setRubric(data);
|
||||
} catch (err) {
|
||||
console.error("Failed to load rubric", err);
|
||||
setError("Failed to load rubric details.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateRubric = async (name: string, description: string) => {
|
||||
if (!rubric) return;
|
||||
try {
|
||||
const updated = await cmsApi.updateRubric(rubricId, { name, description: description || undefined });
|
||||
setRubric({ ...rubric, ...updated });
|
||||
} catch (err) {
|
||||
console.error("Failed to update rubric", err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddCriterion = async () => {
|
||||
if (!rubric) return;
|
||||
const payload: CreateCriterionPayload = {
|
||||
name: "New Criterion",
|
||||
max_points: 10,
|
||||
position: rubric.criteria.length
|
||||
};
|
||||
try {
|
||||
const newCriterion = await cmsApi.createCriterion(rubricId, payload);
|
||||
setRubric({
|
||||
...rubric,
|
||||
criteria: [...rubric.criteria, { ...newCriterion, levels: [] }]
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("Failed to add criterion", err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateCriterion = async (criterionId: string, updates: Partial<RubricCriterion>) => {
|
||||
if (!rubric) return;
|
||||
try {
|
||||
const payload = {
|
||||
...updates,
|
||||
description: updates.description === null ? undefined : updates.description
|
||||
};
|
||||
const updated = await cmsApi.updateCriterion(criterionId, payload);
|
||||
setRubric({
|
||||
...rubric,
|
||||
criteria: rubric.criteria.map(c =>
|
||||
c.id === criterionId
|
||||
? { ...c, ...updated }
|
||||
: c
|
||||
)
|
||||
});
|
||||
// Total points might have changed
|
||||
if (updates.max_points !== undefined) {
|
||||
const updatedRubric = await cmsApi.getRubricWithDetails(rubricId);
|
||||
setRubric(updatedRubric);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to update criterion", err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteCriterion = async (criterionId: string) => {
|
||||
if (!confirm("Are you sure you want to delete this criterion?")) return;
|
||||
try {
|
||||
await cmsApi.deleteCriterion(criterionId);
|
||||
const updatedRubric = await cmsApi.getRubricWithDetails(rubricId);
|
||||
setRubric(updatedRubric);
|
||||
} catch (err) {
|
||||
console.error("Failed to delete criterion", err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddLevel = async (criterionId: string) => {
|
||||
if (!rubric) return;
|
||||
const criterion = rubric.criteria.find(c => c.id === criterionId);
|
||||
if (!criterion) return;
|
||||
|
||||
const payload: CreateLevelPayload = {
|
||||
name: "New Level",
|
||||
points: 0,
|
||||
position: criterion.levels.length
|
||||
};
|
||||
try {
|
||||
const newLevel = await cmsApi.createLevel(criterionId, payload);
|
||||
setRubric({
|
||||
...rubric,
|
||||
criteria: rubric.criteria.map(c =>
|
||||
c.id === criterionId
|
||||
? { ...c, levels: [...c.levels, newLevel] }
|
||||
: c
|
||||
)
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("Failed to add level", err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateLevel = async (levelId: string, criterionId: string, updates: Partial<RubricLevel>) => {
|
||||
if (!rubric) return;
|
||||
try {
|
||||
const payload = {
|
||||
...updates,
|
||||
description: updates.description === null ? undefined : updates.description
|
||||
};
|
||||
const updated = await cmsApi.updateLevel(levelId, payload);
|
||||
setRubric({
|
||||
...rubric,
|
||||
criteria: rubric.criteria.map(c =>
|
||||
c.id === criterionId
|
||||
? { ...c, levels: c.levels.map(l => l.id === levelId ? updated : l) }
|
||||
: c
|
||||
)
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("Failed to update level", err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteLevel = async (levelId: string, criterionId: string) => {
|
||||
try {
|
||||
await cmsApi.deleteLevel(levelId);
|
||||
setRubric({
|
||||
...rubric!,
|
||||
criteria: rubric!.criteria.map(c =>
|
||||
c.id === criterionId
|
||||
? { ...c, levels: c.levels.filter(l => l.id !== levelId) }
|
||||
: c
|
||||
)
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("Failed to delete level", err);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) return (
|
||||
<div className="flex items-center justify-center p-12">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
|
||||
</div>
|
||||
);
|
||||
|
||||
if (error || !rubric) return (
|
||||
<div className="p-8 text-center">
|
||||
<AlertCircle className="w-12 h-12 text-red-500 mx-auto mb-4" />
|
||||
<p className="text-red-400 font-medium">{error || "Rubric not found"}</p>
|
||||
<button onClick={onClose} className="mt-4 text-blue-400 hover:underline">Go Back</button>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="bg-[#1a1d23] rounded-3xl border border-white/10 overflow-hidden shadow-2xl flex flex-col max-h-[90vh]">
|
||||
{/* Header */}
|
||||
<div className="p-6 border-b border-white/10 flex items-center justify-between bg-white/[0.02]">
|
||||
<div className="flex-1">
|
||||
<input
|
||||
type="text"
|
||||
value={rubric.name}
|
||||
onChange={(e) => handleUpdateRubric(e.target.value, rubric.description || "")}
|
||||
placeholder="Rubric Name"
|
||||
className="bg-transparent text-2xl font-bold text-white focus:outline-none focus:ring-1 focus:ring-blue-500/50 rounded px-2 w-full"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={rubric.description || ""}
|
||||
onChange={(e) => handleUpdateRubric(rubric.name, e.target.value)}
|
||||
placeholder="Add a description..."
|
||||
className="bg-transparent text-sm text-gray-400 focus:outline-none focus:ring-1 focus:ring-blue-500/50 rounded px-2 mt-1 w-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 ml-4">
|
||||
<div className="text-right mr-4">
|
||||
<span className="text-xs text-gray-500 uppercase tracking-widest block font-semibold">Total Points</span>
|
||||
<span className="text-2xl font-bold text-blue-400">{rubric.total_points}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 hover:bg-white/10 rounded-full text-gray-400 hover:text-white transition-colors"
|
||||
>
|
||||
<X className="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto p-8 space-y-12">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h3 className="text-lg font-semibold flex items-center gap-2 text-gray-200">
|
||||
Criteria
|
||||
<span className="text-xs font-normal text-gray-500 bg-white/5 px-2 py-0.5 rounded-full">
|
||||
{rubric.criteria.length} items
|
||||
</span>
|
||||
</h3>
|
||||
<button
|
||||
onClick={handleAddCriterion}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-blue-600/10 text-blue-400 border border-blue-500/30 rounded-xl hover:bg-blue-600 hover:text-white transition-all transform active:scale-95"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Add Criterion
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{rubric.criteria.length === 0 ? (
|
||||
<div className="text-center py-12 border-2 border-dashed border-white/5 rounded-3xl bg-white/[0.01]">
|
||||
<p className="text-gray-500 italic">No criteria added yet. Add your first evaluation criterion.</p>
|
||||
</div>
|
||||
) : (
|
||||
rubric.criteria.map((item, idx) => (
|
||||
<div key={item.id} className="group bg-white/[0.03] border border-white/10 rounded-3xl p-6 hover:border-blue-500/30 transition-all">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="mt-2 text-gray-600 group-hover:text-blue-500/50 transition-colors">
|
||||
<GripVertical className="w-5 h-5 cursor-grab active:cursor-grabbing" />
|
||||
</div>
|
||||
<div className="flex-1 space-y-4">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="flex-1">
|
||||
<input
|
||||
type="text"
|
||||
value={item.name}
|
||||
onChange={(e) => handleUpdateCriterion(item.id, { name: e.target.value })}
|
||||
className="bg-transparent text-lg font-bold text-gray-100 focus:outline-none focus:border-b border-blue-500/50 w-full"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={item.description || ""}
|
||||
onChange={(e) => handleUpdateCriterion(item.id, { description: e.target.value })}
|
||||
placeholder="Description of what to evaluate..."
|
||||
className="bg-transparent text-sm text-gray-500 focus:outline-none w-full mt-1"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex flex-col items-end">
|
||||
<label className="text-[10px] text-gray-500 uppercase tracking-widest font-bold mb-1">Max Points</label>
|
||||
<input
|
||||
type="number"
|
||||
value={item.max_points}
|
||||
onChange={(e) => handleUpdateCriterion(item.id, { max_points: parseInt(e.target.value) || 0 })}
|
||||
className="bg-white/5 border border-white/10 rounded-lg px-2 py-1 w-16 text-center text-blue-400 font-bold focus:outline-none focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleDeleteCriterion(item.id)}
|
||||
className="p-2 text-red-500/50 hover:text-red-500 hover:bg-red-500/10 rounded-lg transition-all"
|
||||
>
|
||||
<Trash2 className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Levels */}
|
||||
<div className="pl-4 border-l-2 border-white/5 space-y-4 pt-2">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h4 className="text-xs font-bold text-gray-500 uppercase tracking-widest">Performance Levels</h4>
|
||||
<button
|
||||
onClick={() => handleAddLevel(item.id)}
|
||||
className="text-xs text-blue-400 hover:text-blue-300 flex items-center gap-1 font-semibold"
|
||||
>
|
||||
<Plus className="w-3 h-3" /> Add Level
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{item.levels.map(level => (
|
||||
<div key={level.id} className="bg-white/5 border border-white/10 rounded-2xl p-4 flex flex-col gap-2 relative group/level hover:bg-white/[0.08] transition-all">
|
||||
<button
|
||||
onClick={() => handleDeleteLevel(level.id, item.id)}
|
||||
className="absolute top-2 right-2 p-1 text-gray-600 hover:text-red-500 opacity-0 group-level-hover:opacity-100 transition-all"
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
</button>
|
||||
<input
|
||||
type="text"
|
||||
value={level.name}
|
||||
onChange={(e) => handleUpdateLevel(level.id, item.id, { name: e.target.value })}
|
||||
placeholder="Level Name (e.g. Excellent)"
|
||||
className="bg-transparent text-sm font-semibold text-gray-200 focus:outline-none"
|
||||
/>
|
||||
<textarea
|
||||
value={level.description || ""}
|
||||
onChange={(e) => handleUpdateLevel(level.id, item.id, { description: e.target.value })}
|
||||
placeholder="Criteria description..."
|
||||
className="bg-transparent text-xs text-gray-500 focus:outline-none resize-none h-12"
|
||||
/>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<span className="text-[10px] text-gray-600 uppercase font-bold">Points:</span>
|
||||
<input
|
||||
type="number"
|
||||
value={level.points}
|
||||
onChange={(e) => handleUpdateLevel(level.id, item.id, { points: parseInt(e.target.value) || 0 })}
|
||||
className="bg-white/5 border border-white/10 rounded px-1.5 w-12 text-xs text-center text-blue-400 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="p-6 border-t border-white/10 bg-white/[0.02] flex justify-end gap-4">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-6 py-2 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-all font-medium"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
if (onSaved) onSaved();
|
||||
onClose();
|
||||
}}
|
||||
className="px-8 py-2 bg-blue-600 text-white rounded-xl font-bold hover:bg-blue-500 shadow-lg shadow-blue-500/20 active:scale-95 transition-all flex items-center gap-2"
|
||||
>
|
||||
<Check className="w-5 h-5" />
|
||||
Done
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,192 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import { Rubric, cmsApi } from "@/lib/api";
|
||||
import {
|
||||
Plus,
|
||||
Search,
|
||||
FileText,
|
||||
MoreVertical,
|
||||
Edit2,
|
||||
Trash2,
|
||||
ExternalLink,
|
||||
AlertCircle,
|
||||
Copy
|
||||
} from "lucide-react";
|
||||
import { clsx, type ClassValue } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
|
||||
interface RubricListProps {
|
||||
courseId: string;
|
||||
onEdit: (rubricId: string) => void;
|
||||
}
|
||||
|
||||
export default function RubricList({ courseId, onEdit }: RubricListProps) {
|
||||
const [rubrics, setRubrics] = useState<Rubric[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [creating, setCreating] = useState(false);
|
||||
const [newRubricName, setNewRubricName] = useState("");
|
||||
|
||||
const loadRubrics = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await cmsApi.listCourseRubrics(courseId);
|
||||
setRubrics(data);
|
||||
} catch (err) {
|
||||
console.error("Failed to load rubrics", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [courseId]);
|
||||
|
||||
useEffect(() => {
|
||||
loadRubrics();
|
||||
}, [loadRubrics]);
|
||||
|
||||
const handleCreate = async () => {
|
||||
if (!newRubricName) return;
|
||||
setCreating(true);
|
||||
try {
|
||||
const newRubric = await cmsApi.createRubric(courseId, {
|
||||
name: newRubricName,
|
||||
course_id: courseId
|
||||
});
|
||||
setRubrics([newRubric, ...rubrics]);
|
||||
setNewRubricName("");
|
||||
onEdit(newRubric.id);
|
||||
} catch (err) {
|
||||
console.error("Failed to create rubric", err);
|
||||
} finally {
|
||||
setCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
if (!confirm("Are you sure you want to delete this rubric? This will affect any lessons using it.")) return;
|
||||
try {
|
||||
await cmsApi.deleteRubric(id);
|
||||
setRubrics(rubrics.filter(r => r.id !== id));
|
||||
} catch (err) {
|
||||
console.error("Failed to delete rubric", err);
|
||||
}
|
||||
};
|
||||
|
||||
const filteredRubrics = rubrics.filter(r =>
|
||||
r.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
(r.description && r.description.toLowerCase().includes(searchQuery.toLowerCase()))
|
||||
);
|
||||
|
||||
if (loading) return (
|
||||
<div className="flex items-center justify-center p-12">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{/* Header & Search */}
|
||||
<div className="flex flex-col md:flex-row gap-6 justify-between items-start md:items-center">
|
||||
<div className="relative flex-1 w-full max-w-md">
|
||||
<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<input
|
||||
type="search"
|
||||
placeholder="Search rubrics..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-2xl pl-11 pr-4 py-3 focus:outline-none focus:border-blue-500/50 transition-all text-gray-100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 w-full md:w-auto">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="New Rubric Name"
|
||||
value={newRubricName}
|
||||
onChange={(e) => setNewRubricName(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleCreate()}
|
||||
className="flex-1 md:w-64 bg-white/5 border border-white/10 rounded-xl px-4 py-2 focus:outline-none focus:border-blue-500/50 transition-all"
|
||||
/>
|
||||
<button
|
||||
onClick={handleCreate}
|
||||
disabled={creating || !newRubricName}
|
||||
className="bg-blue-600 hover:bg-blue-500 disabled:bg-gray-700 disabled:text-gray-500 text-white font-bold px-6 py-2 rounded-xl transition-all shadow-lg shadow-blue-500/20 active:scale-95 flex items-center gap-2"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Create
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Rubrics Grid */}
|
||||
{filteredRubrics.length === 0 ? (
|
||||
<div className="bg-white/5 border border-white/10 rounded-3xl p-16 text-center">
|
||||
<div className="w-16 h-16 bg-blue-500/10 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||||
<FileText className="w-8 h-8 text-blue-400" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-gray-200 mb-2">No rubrics found</h3>
|
||||
<p className="text-gray-500 max-w-md mx-auto">
|
||||
Create a rubric to start using advanced grading criteria in your course lessons.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
|
||||
{filteredRubrics.map((rubric) => (
|
||||
<div
|
||||
key={rubric.id}
|
||||
className="group bg-white/5 border border-white/10 rounded-3xl p-6 hover:border-blue-500/50 hover:bg-white/[0.08] transition-all duration-300 flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-indigo-500/10 flex items-center justify-center text-indigo-400">
|
||||
<FileText className="w-6 h-6" />
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={() => onEdit(rubric.id)}
|
||||
className="p-2 text-gray-500 hover:text-blue-400 hover:bg-blue-400/10 rounded-lg transition-all"
|
||||
title="Edit Rubric"
|
||||
>
|
||||
<Edit2 className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(rubric.id)}
|
||||
className="p-2 text-gray-500 hover:text-red-400 hover:bg-red-400/10 rounded-lg transition-all"
|
||||
title="Delete Rubric"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-bold text-gray-100 group-hover:text-blue-400 transition-colors mb-2">
|
||||
{rubric.name}
|
||||
</h3>
|
||||
<p className="text-gray-500 text-sm line-clamp-2 min-h-[2.5rem]">
|
||||
{rubric.description || "No description provided."}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 flex items-center justify-between">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[10px] text-gray-500 uppercase tracking-widest font-bold mb-1">Total Points</span>
|
||||
<span className="text-xl font-black text-white">{rubric.total_points}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => onEdit(rubric.id)}
|
||||
className="px-4 py-2 bg-white/5 border border-white/10 rounded-xl text-sm font-semibold hover:bg-blue-600 hover:text-white hover:border-blue-600 transition-all active:scale-95"
|
||||
>
|
||||
Manage Criteria
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -235,6 +235,118 @@ export interface LibraryBlockFilters {
|
||||
search?: string;
|
||||
}
|
||||
|
||||
// ==================== Advanced Grading / Rubrics ====================
|
||||
|
||||
export interface Rubric {
|
||||
id: string;
|
||||
organization_id: string;
|
||||
course_id: string | null;
|
||||
created_by: string;
|
||||
name: string;
|
||||
description: string | null;
|
||||
total_points: number;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface RubricCriterion {
|
||||
id: string;
|
||||
rubric_id: string;
|
||||
name: string;
|
||||
description: string | null;
|
||||
max_points: number;
|
||||
position: number;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export interface RubricLevel {
|
||||
id: string;
|
||||
criterion_id: string;
|
||||
name: string;
|
||||
description: string | null;
|
||||
points: number;
|
||||
position: number;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export interface RubricWithDetails {
|
||||
id: string;
|
||||
organization_id: string;
|
||||
course_id: string | null;
|
||||
created_by: string;
|
||||
name: string;
|
||||
description: string | null;
|
||||
total_points: number;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
criteria: CriterionWithLevels[];
|
||||
}
|
||||
|
||||
export interface CriterionWithLevels {
|
||||
id: string;
|
||||
rubric_id: string;
|
||||
name: string;
|
||||
description: string | null;
|
||||
max_points: number;
|
||||
position: number;
|
||||
created_at: string;
|
||||
levels: RubricLevel[];
|
||||
}
|
||||
|
||||
export interface CreateRubricPayload {
|
||||
name: string;
|
||||
description?: string;
|
||||
course_id?: string;
|
||||
}
|
||||
|
||||
export interface UpdateRubricPayload {
|
||||
name?: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
export interface CreateCriterionPayload {
|
||||
name: string;
|
||||
description?: string;
|
||||
max_points: number;
|
||||
position?: number;
|
||||
}
|
||||
|
||||
export interface UpdateCriterionPayload {
|
||||
name?: string;
|
||||
description?: string;
|
||||
max_points?: number;
|
||||
position?: number;
|
||||
}
|
||||
|
||||
export interface CreateLevelPayload {
|
||||
name: string;
|
||||
description?: string;
|
||||
points: number;
|
||||
position?: number;
|
||||
}
|
||||
|
||||
export interface UpdateLevelPayload {
|
||||
name?: string;
|
||||
description?: string;
|
||||
points?: number;
|
||||
position?: number;
|
||||
}
|
||||
// ==================== Learning Sequences / Dependencies ====================
|
||||
|
||||
export interface LessonDependency {
|
||||
id: string;
|
||||
organization_id: string;
|
||||
lesson_id: string;
|
||||
prerequisite_lesson_id: string;
|
||||
min_score_percentage: number | null;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export interface AssignDependencyPayload {
|
||||
prerequisite_lesson_id: string;
|
||||
min_score_percentage?: number;
|
||||
}
|
||||
|
||||
export interface AuditLog {
|
||||
id: string;
|
||||
user_id: string;
|
||||
@@ -570,6 +682,50 @@ export const cmsApi = {
|
||||
apiFetch(`/library/blocks/${id}`, { method: 'DELETE' }),
|
||||
incrementBlockUsage: (id: string): Promise<void> =>
|
||||
apiFetch(`/library/blocks/${id}/increment-usage`, { method: 'POST' }),
|
||||
|
||||
// Advanced Grading / Rubrics
|
||||
createRubric: (courseId: string, payload: CreateRubricPayload): Promise<Rubric> =>
|
||||
apiFetch(`/courses/${courseId}/rubrics`, { method: 'POST', body: JSON.stringify(payload) }),
|
||||
listCourseRubrics: (courseId: string): Promise<Rubric[]> =>
|
||||
apiFetch(`/courses/${courseId}/rubrics`),
|
||||
getRubricWithDetails: (rubricId: string): Promise<RubricWithDetails> =>
|
||||
apiFetch(`/rubrics/${rubricId}`),
|
||||
updateRubric: (rubricId: string, payload: UpdateRubricPayload): Promise<Rubric> =>
|
||||
apiFetch(`/rubrics/${rubricId}`, { method: 'PUT', body: JSON.stringify(payload) }),
|
||||
deleteRubric: (rubricId: string): Promise<void> =>
|
||||
apiFetch(`/rubrics/${rubricId}`, { method: 'DELETE' }),
|
||||
|
||||
// Rubric Criteria
|
||||
createCriterion: (rubricId: string, payload: CreateCriterionPayload): Promise<RubricCriterion> =>
|
||||
apiFetch(`/rubrics/${rubricId}/criteria`, { method: 'POST', body: JSON.stringify(payload) }),
|
||||
updateCriterion: (criterionId: string, payload: UpdateCriterionPayload): Promise<RubricCriterion> =>
|
||||
apiFetch(`/criteria/${criterionId}`, { method: 'PUT', body: JSON.stringify(payload) }),
|
||||
deleteCriterion: (criterionId: string): Promise<void> =>
|
||||
apiFetch(`/criteria/${criterionId}`, { method: 'DELETE' }),
|
||||
|
||||
// Rubric Levels
|
||||
createLevel: (criterionId: string, payload: CreateLevelPayload): Promise<RubricLevel> =>
|
||||
apiFetch(`/criteria/${criterionId}/levels`, { method: 'POST', body: JSON.stringify(payload) }),
|
||||
updateLevel: (levelId: string, payload: UpdateLevelPayload): Promise<RubricLevel> =>
|
||||
apiFetch(`/levels/${levelId}`, { method: 'PUT', body: JSON.stringify(payload) }),
|
||||
deleteLevel: (levelId: string): Promise<void> =>
|
||||
apiFetch(`/levels/${levelId}`, { method: 'DELETE' }),
|
||||
|
||||
// Lesson-Rubric Association
|
||||
assignRubricToLesson: (lessonId: string, rubricId: string): Promise<void> =>
|
||||
apiFetch(`/lessons/${lessonId}/rubrics/${rubricId}`, { method: 'POST' }),
|
||||
unassignRubricFromLesson: (lessonId: string, rubricId: string): Promise<void> =>
|
||||
apiFetch(`/lessons/${lessonId}/rubrics/${rubricId}`, { method: 'DELETE' }),
|
||||
getLessonRubrics: (lessonId: string): Promise<Rubric[]> =>
|
||||
apiFetch(`/lessons/${lessonId}/rubrics`),
|
||||
|
||||
// Learning Sequences (Dependencies)
|
||||
listLessonDependencies: (lessonId: string): Promise<LessonDependency[]> =>
|
||||
apiFetch(`/lessons/${lessonId}/dependencies`),
|
||||
assignDependency: (lessonId: string, payload: AssignDependencyPayload): Promise<LessonDependency> =>
|
||||
apiFetch(`/lessons/${lessonId}/dependencies`, { method: 'POST', body: JSON.stringify(payload) }),
|
||||
removeDependency: (lessonId: string, prerequisiteId: string): Promise<void> =>
|
||||
apiFetch(`/lessons/${lessonId}/dependencies/${prerequisiteId}`, { method: 'DELETE' }),
|
||||
};
|
||||
|
||||
export const lmsApi = {
|
||||
|
||||
Reference in New Issue
Block a user