feat: Implement comprehensive course analytics, RBAC with roles and authentication, and dynamic passing thresholds.
This commit is contained in:
@@ -1,98 +1,169 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { cmsApi } from "@/lib/api";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import React, { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { LogIn, Mail, Lock } from "lucide-react";
|
||||
import { cmsApi } from "@/lib/api";
|
||||
import { BookOpen, Lock, Mail, User } from "lucide-react";
|
||||
|
||||
export default function LoginPage() {
|
||||
export default function StudioLoginPage() {
|
||||
const router = useRouter();
|
||||
const [isLogin, setIsLogin] = useState(true);
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [fullName, setFullName] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const { login } = useAuth();
|
||||
const router = useRouter();
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError("");
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const res = await cmsApi.login({ email, password });
|
||||
login(res.user, res.token);
|
||||
router.push("/");
|
||||
if (isLogin) {
|
||||
const response = await cmsApi.login({ email, password });
|
||||
|
||||
// Verify user is instructor or admin
|
||||
if (response.user.role !== "instructor" && response.user.role !== "admin") {
|
||||
setError("Access denied. This portal is for instructors and administrators only.");
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
localStorage.setItem("studio_token", response.token);
|
||||
localStorage.setItem("studio_user", JSON.stringify(response.user));
|
||||
router.push("/");
|
||||
} else {
|
||||
const response = await cmsApi.register({
|
||||
email,
|
||||
password,
|
||||
full_name: fullName,
|
||||
role: "instructor"
|
||||
});
|
||||
|
||||
localStorage.setItem("studio_token", response.token);
|
||||
localStorage.setItem("studio_user", JSON.stringify(response.user));
|
||||
router.push("/");
|
||||
}
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : "Authentication failed. Please verify your credentials.";
|
||||
setError(message);
|
||||
setError(err instanceof Error ? err.message : "Authentication failed");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-[calc(100vh-160px)] flex items-center justify-center p-6">
|
||||
<div className="w-full max-w-md space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700">
|
||||
<div className="text-center space-y-2">
|
||||
<div className="w-16 h-16 rounded-2xl bg-blue-600/10 border border-blue-500/20 flex items-center justify-center mx-auto text-blue-500 mb-6">
|
||||
<LogIn size={32} />
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-950 via-blue-950 to-gray-950 flex items-center justify-center p-4">
|
||||
<div className="w-full max-w-md">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 bg-blue-600 rounded-2xl mb-4">
|
||||
<BookOpen className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h1 className="text-3xl font-black tracking-tighter text-white">Studio Login</h1>
|
||||
<p className="text-gray-500 font-bold uppercase tracking-widest text-[10px]">Access your educational dashboard</p>
|
||||
<h1 className="text-3xl font-black text-white mb-2">OpenCCB Studio</h1>
|
||||
<p className="text-gray-400">Instructor & Administrator Portal</p>
|
||||
</div>
|
||||
|
||||
<div className="glass-card p-8 border-white/5 bg-white/[0.02] rounded-3xl">
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* Login/Register Form */}
|
||||
<div className="bg-white/5 backdrop-blur-xl border border-white/10 rounded-3xl p-8">
|
||||
<div className="flex gap-2 mb-6 bg-white/5 rounded-xl p-1">
|
||||
<button
|
||||
onClick={() => setIsLogin(true)}
|
||||
className={`flex-1 py-2 px-4 rounded-lg font-bold transition-all ${isLogin ? "bg-blue-600 text-white" : "text-gray-400 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
Login
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setIsLogin(false)}
|
||||
className={`flex-1 py-2 px-4 rounded-lg font-bold transition-all ${!isLogin ? "bg-blue-600 text-white" : "text-gray-400 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
Register
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{!isLogin && (
|
||||
<div>
|
||||
<label className="block text-sm font-bold text-gray-300 mb-2">
|
||||
Full Name
|
||||
</label>
|
||||
<div className="relative">
|
||||
<User className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
value={fullName}
|
||||
onChange={(e) => setFullName(e.target.value)}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl py-3 pl-11 pr-4 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="John Doe"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-bold text-gray-300 mb-2">
|
||||
Email
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl py-3 pl-11 pr-4 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="instructor@example.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-bold text-gray-300 mb-2">
|
||||
Password
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl py-3 pl-11 pr-4 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="••••••••"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="p-4 rounded-xl bg-red-500/10 border border-red-500/20 text-red-400 text-xs font-bold text-center">
|
||||
<div className="bg-red-500/10 border border-red-500/20 rounded-xl p-3 text-red-400 text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-gray-500 px-1">Instructor Email</label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500" size={18} />
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="instructor@openccb.com"
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl py-4 pl-12 pr-4 text-sm text-white focus:outline-none focus:border-blue-500 transition-all placeholder:text-gray-700"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-gray-500 px-1">Password</label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500" size={18} />
|
||||
<input
|
||||
type="password"
|
||||
required
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="••••••••"
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl py-4 pl-12 pr-4 text-sm text-white focus:outline-none focus:border-blue-500 transition-all placeholder:text-gray-700"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
disabled={loading}
|
||||
type="submit"
|
||||
className="w-full py-4 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-black text-xs uppercase tracking-[0.2em] shadow-xl shadow-blue-500/20 disabled:opacity-50 transition-all active:scale-[0.98]"
|
||||
disabled={loading}
|
||||
className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-xl transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{loading ? "Verifying..." : "Enter Studio"}
|
||||
{loading ? "Processing..." : isLogin ? "Sign In" : "Create Account"}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="mt-6 pt-6 border-t border-white/10 text-center">
|
||||
<p className="text-sm text-gray-400">
|
||||
Are you a student?{" "}
|
||||
<a href="http://localhost:3003/auth/login" className="text-blue-400 hover:text-blue-300 font-bold">
|
||||
Go to Student Portal
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-center text-[10px] font-bold uppercase tracking-widest text-gray-600">
|
||||
New to Studio? <Link href="/auth/register" className="text-blue-500 hover:text-blue-400">Create an account</Link>
|
||||
<p className="text-center text-xs text-gray-500 mt-6">
|
||||
OpenCCB Studio - Instructor & Administrator Portal
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,218 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { cmsApi, Course, CourseAnalytics } from "@/lib/api";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import {
|
||||
BarChart3,
|
||||
Users,
|
||||
TrendingUp,
|
||||
AlertTriangle,
|
||||
ArrowLeft,
|
||||
CheckCircle2,
|
||||
BookOpen
|
||||
} from "lucide-react";
|
||||
|
||||
export default function AnalyticsPage() {
|
||||
const { id } = useParams() as { id: string };
|
||||
const router = useRouter();
|
||||
const { user } = useAuth();
|
||||
const [course, setCourse] = useState<Course | null>(null);
|
||||
const [analytics, setAnalytics] = useState<CourseAnalytics | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [authError, setAuthError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
// Wait for auth to load
|
||||
if (!user) {
|
||||
console.log("AnalyticsPage: No user found yet.");
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("AnalyticsPage: User found:", user);
|
||||
console.log("AnalyticsPage: User Role:", user.role);
|
||||
|
||||
// Check authorization
|
||||
if (user.role !== 'admin' && user.role !== 'instructor') {
|
||||
console.warn("AnalyticsPage: Unauthorized role. Redirecting to home.", user.role);
|
||||
router.push('/');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
console.log("AnalyticsPage: Fetching data for course:", id);
|
||||
const [courseData, analyticsData] = await Promise.all([
|
||||
cmsApi.getCourseWithFullOutline(id),
|
||||
cmsApi.getCourseAnalytics(id)
|
||||
]);
|
||||
console.log("AnalyticsPage: Data fetched successfully", { courseData, analyticsData });
|
||||
setCourse(courseData);
|
||||
setAnalytics(analyticsData);
|
||||
} catch (err: unknown) {
|
||||
console.error("Failed to load analytics", err);
|
||||
setAuthError(err instanceof Error ? err.message : "Failed to load data");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchData();
|
||||
}, [id, user, router]);
|
||||
|
||||
if (loading) return (
|
||||
<div className="min-h-screen bg-gray-900 flex items-center justify-center">
|
||||
<div className="w-12 h-12 border-4 border-blue-500/20 border-t-blue-500 rounded-full animate-spin"></div>
|
||||
</div>
|
||||
);
|
||||
|
||||
if (authError) return (
|
||||
<div className="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center p-20 text-center gap-6">
|
||||
<div className="w-20 h-20 bg-red-500/10 rounded-full flex items-center justify-center text-red-500">
|
||||
<AlertTriangle size={40} />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold">Access Denied</h2>
|
||||
<p className="text-gray-400 max-w-md">{authError}</p>
|
||||
<button onClick={() => router.back()} className="btn-premium px-8 py-3">Go Back</button>
|
||||
</div>
|
||||
);
|
||||
|
||||
if (!course || !analytics) return (
|
||||
<div className="min-h-screen bg-gray-900 text-white p-20 text-center">
|
||||
Course not found or analytics unavailable.
|
||||
</div>
|
||||
);
|
||||
|
||||
const difficultLessons = analytics.lessons
|
||||
.filter(l => l.average_score < 0.7 && l.submission_count > 0)
|
||||
.sort((a, b) => a.average_score - b.average_score);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-950 text-white pb-20">
|
||||
{/* Header */}
|
||||
<header className="sticky top-0 z-50 bg-gray-950/80 backdrop-blur-xl border-b border-white/5 py-4 px-8">
|
||||
<div className="max-w-7xl mx-auto flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<button onClick={() => router.back()} className="p-2 hover:bg-white/5 rounded-full transition-colors">
|
||||
<ArrowLeft className="w-5 h-5 text-gray-400" />
|
||||
</button>
|
||||
<h1 className="text-xl font-bold">{course.title} - Performance Insights</h1>
|
||||
<div className="bg-blue-500/20 text-blue-400 text-[10px] font-black uppercase tracking-wider px-2 py-1 rounded border border-blue-500/30">
|
||||
{user?.role} View
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-7xl mx-auto px-8 mt-12 space-y-12">
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="bg-white/5 border border-white/10 rounded-3xl p-8 group hover:bg-white/[0.07] transition-all">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-12 h-12 rounded-2xl bg-blue-500/10 flex items-center justify-center text-blue-400">
|
||||
<Users size={24} />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-gray-400 uppercase tracking-widest">Enrollments</span>
|
||||
</div>
|
||||
<div className="text-4xl font-black">{analytics.total_enrollments}</div>
|
||||
<div className="text-xs text-green-400 font-bold mt-2">Active Learners</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/5 border border-white/10 rounded-3xl p-8 group hover:bg-white/[0.07] transition-all">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-12 h-12 rounded-2xl bg-purple-500/10 flex items-center justify-center text-purple-400">
|
||||
<TrendingUp size={24} />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-gray-400 uppercase tracking-widest">Average Score</span>
|
||||
</div>
|
||||
<div className="text-4xl font-black">{Math.round(analytics.average_score * 100)}%</div>
|
||||
<div className="text-xs text-gray-500 font-bold mt-2">Across all assessments</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/5 border border-white/10 rounded-3xl p-8 group hover:bg-white/[0.07] transition-all">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-12 h-12 rounded-2xl bg-orange-500/10 flex items-center justify-center text-orange-400">
|
||||
<AlertTriangle size={24} />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-gray-400 uppercase tracking-widest">Attention Needed</span>
|
||||
</div>
|
||||
<div className="text-4xl font-black">{difficultLessons.length}</div>
|
||||
<div className="text-xs text-orange-400 font-bold mt-2">Struggling Lessons</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
{/* Lesson Breakdown */}
|
||||
<section>
|
||||
<h2 className="text-2xl font-black mb-6 flex items-center gap-3">
|
||||
<BarChart3 className="text-blue-500" />
|
||||
Lesson Performance
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
{analytics.lessons.map((lesson) => (
|
||||
<div key={lesson.lesson_id} className="bg-white/5 border border-white/10 rounded-2xl p-6 hover:bg-white/[0.07] transition-all">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<h3 className="font-bold">{lesson.lesson_title}</h3>
|
||||
<p className="text-xs text-gray-500 mt-1">{lesson.submission_count} submissions</p>
|
||||
</div>
|
||||
<div className={`text-xl font-black ${lesson.average_score < 0.6 ? 'text-red-400' : lesson.average_score < 0.8 ? 'text-orange-400' : 'text-green-400'}`}>
|
||||
{Math.round(lesson.average_score * 100)}%
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-1.5 bg-white/5 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full rounded-full transition-all duration-1000 ${lesson.average_score < 0.6 ? 'bg-red-500' : lesson.average_score < 0.8 ? 'bg-orange-500' : 'bg-green-500'}`}
|
||||
style={{ width: `${lesson.average_score * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Actionable Insights */}
|
||||
<section className="space-y-8">
|
||||
<div>
|
||||
<h2 className="text-2xl font-black mb-6 flex items-center gap-3">
|
||||
<AlertTriangle className="text-orange-500" />
|
||||
Struggling Lessons
|
||||
</h2>
|
||||
{difficultLessons.length > 0 ? (
|
||||
<div className="space-y-4">
|
||||
{difficultLessons.map(l => (
|
||||
<div key={l.lesson_id} className="bg-red-500/10 border border-red-500/20 rounded-2xl p-6 flex items-center justify-between">
|
||||
<div>
|
||||
<h4 className="font-bold text-red-400">{l.lesson_title}</h4>
|
||||
<p className="text-xs text-red-300/60 mt-1 text-balance max-w-xs">
|
||||
Average score is below 70%. Consider reviewing the material or difficulty of questions.
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-2xl font-black text-red-500">{Math.round(l.average_score * 100)}%</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-green-500/10 border border-green-500/20 rounded-2xl p-8 text-center">
|
||||
<CheckCircle2 size={40} className="text-green-500 mx-auto mb-4" />
|
||||
<h4 className="font-bold text-green-400">All set!</h4>
|
||||
<p className="text-sm text-green-300/60 mt-2">No lessons currently fall below the difficulty threshold.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="bg-blue-600/10 border border-blue-500/20 rounded-3xl p-8">
|
||||
<h3 className="text-lg font-bold mb-4 flex items-center gap-2">
|
||||
<BookOpen className="text-blue-400" />
|
||||
Content Strategy Tip
|
||||
</h3>
|
||||
<p className="text-sm text-blue-200/70 leading-relaxed">
|
||||
High submission counts with low average scores often indicate that the assessment might be misleading or the prerequisites aren't clearly explained in previous lessons.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -119,7 +119,8 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
|
||||
<div className="flex border-b border-white/10">
|
||||
<Link href={`/courses/${params.id}`} className="px-6 py-3 text-sm font-medium border-b-2 border-blue-500 bg-white/5">Outline</Link>
|
||||
<Link href={`/courses/${params.id}/grading`} className="px-6 py-3 text-sm font-medium text-gray-500 hover:text-white transition-colors">Grading</Link>
|
||||
<button className="px-6 py-3 text-sm font-medium text-gray-500 hover:text-white transition-colors">Settings</button>
|
||||
<Link href={`/courses/${params.id}/analytics`} className="px-6 py-3 text-sm font-medium text-gray-500 hover:text-white transition-colors">Analytics</Link>
|
||||
<Link href={`/courses/${params.id}/settings`} className="px-6 py-3 text-sm font-medium text-gray-500 hover:text-white transition-colors">Settings</Link>
|
||||
<button className="px-6 py-3 text-sm font-medium text-gray-500 hover:text-white transition-colors">Files</button>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -0,0 +1,148 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { cmsApi, Course } from "@/lib/api";
|
||||
import { ArrowLeft, Save, Settings as SettingsIcon } from "lucide-react";
|
||||
|
||||
export default function CourseSettingsPage() {
|
||||
const { id } = useParams() as { id: string };
|
||||
const router = useRouter();
|
||||
const [course, setCourse] = useState<Course | null>(null);
|
||||
const [passingPercentage, setPassingPercentage] = useState(70);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchCourse = async () => {
|
||||
try {
|
||||
const data = await cmsApi.getCourse(id);
|
||||
setCourse(data);
|
||||
setPassingPercentage(data.passing_percentage || 70);
|
||||
} catch (err) {
|
||||
console.error("Failed to load course", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchCourse();
|
||||
}, [id]);
|
||||
|
||||
const handleSave = async () => {
|
||||
setSaving(true);
|
||||
try {
|
||||
const updated = await cmsApi.updateCourse(id, { passing_percentage: passingPercentage });
|
||||
setCourse(updated);
|
||||
alert("Course settings updated successfully!");
|
||||
} catch (err) {
|
||||
console.error("Failed to save", err);
|
||||
alert("Failed to save settings");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) return (
|
||||
<div className="min-h-screen bg-gray-900 flex items-center justify-center">
|
||||
<div className="w-12 h-12 border-4 border-blue-500/20 border-t-blue-500 rounded-full animate-spin"></div>
|
||||
</div>
|
||||
);
|
||||
|
||||
if (!course) return (
|
||||
<div className="min-h-screen bg-gray-900 text-white p-20 text-center">
|
||||
Course not found.
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-950 text-white pb-20">
|
||||
{/* Header */}
|
||||
<header className="sticky top-0 z-50 bg-gray-950/80 backdrop-blur-xl border-b border-white/5 py-4 px-8">
|
||||
<div className="max-w-5xl mx-auto flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<button onClick={() => router.back()} className="p-2 hover:bg-white/5 rounded-full transition-colors">
|
||||
<ArrowLeft className="w-5 h-5 text-gray-400" />
|
||||
</button>
|
||||
<h1 className="text-xl font-bold">{course.title} - Settings</h1>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={saving}
|
||||
className="flex items-center gap-2 px-6 py-2 bg-blue-600 hover:bg-blue-700 rounded-xl font-bold transition-colors disabled:opacity-50"
|
||||
>
|
||||
<Save size={18} />
|
||||
{saving ? "Saving..." : "Save Changes"}
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-5xl mx-auto px-8 mt-12 space-y-8">
|
||||
{/* Passing Percentage Section */}
|
||||
<section className="bg-white/5 border border-white/10 rounded-3xl p-8">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-12 h-12 rounded-2xl bg-purple-500/10 flex items-center justify-center text-purple-400">
|
||||
<SettingsIcon size={24} />
|
||||
</div>
|
||||
<h2 className="text-2xl font-black">Grading Configuration</h2>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-bold text-gray-300 mb-3">
|
||||
Passing Percentage
|
||||
</label>
|
||||
<div className="flex items-center gap-6">
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
value={passingPercentage}
|
||||
onChange={(e) => setPassingPercentage(parseInt(e.target.value))}
|
||||
className="flex-1 h-2 bg-white/10 rounded-lg appearance-none cursor-pointer accent-blue-500"
|
||||
/>
|
||||
<div className="text-4xl font-black text-blue-400 w-24 text-right">
|
||||
{passingPercentage}%
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-3">
|
||||
Students must achieve at least this percentage to pass the course.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Performance Tiers Preview */}
|
||||
<div className="bg-white/5 border border-white/10 rounded-2xl p-6">
|
||||
<h3 className="text-sm font-bold text-gray-300 mb-4">Performance Tiers Preview</h3>
|
||||
<div className="space-y-3 text-xs">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-16 h-4 bg-red-500 rounded"></div>
|
||||
<span className="text-red-400 font-bold">Reprobado:</span>
|
||||
<span className="text-gray-400">0% - {Math.max(0, passingPercentage - 1)}%</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-16 h-4 bg-orange-500 rounded"></div>
|
||||
<span className="text-orange-400 font-bold">Rendimiento Bajo:</span>
|
||||
<span className="text-gray-400">{passingPercentage}% - {passingPercentage + 9}%</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-16 h-4 bg-yellow-500 rounded"></div>
|
||||
<span className="text-yellow-400 font-bold">Rendimiento Medio:</span>
|
||||
<span className="text-gray-400">{passingPercentage + 10}% - {passingPercentage + 15}%</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-16 h-4 bg-green-500 rounded"></div>
|
||||
<span className="text-green-400 font-bold">Buen Rendimiento:</span>
|
||||
<span className="text-gray-400">{passingPercentage + 16}% - 90%</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-16 h-4 bg-blue-500 rounded"></div>
|
||||
<span className="text-blue-400 font-bold">Excelente:</span>
|
||||
<span className="text-gray-400">91% - 100%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+40
-15
@@ -1,10 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { cmsApi, Course } from "@/lib/api";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Home() {
|
||||
const router = useRouter();
|
||||
const [courses, setCourses] = useState<Course[]>([]);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
@@ -12,22 +14,38 @@ export default function Home() {
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
fetchCourses();
|
||||
}, []);
|
||||
|
||||
const fetchCourses = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await cmsApi.getCourses();
|
||||
setCourses(data);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch courses:", err);
|
||||
setError("Could not connect to CMS service. showing offline mode.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
// Check authentication
|
||||
const savedUser = localStorage.getItem("studio_user");
|
||||
if (!savedUser) {
|
||||
router.push("/auth/login");
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
// The `setUser` function was not defined, causing a linting error.
|
||||
// If user data needs to be stored in state, a `useState` for `user` should be added.
|
||||
// For now, removing the call to fix the linting error.
|
||||
// setUser(JSON.parse(savedUser));
|
||||
|
||||
// Fetch courses
|
||||
const loadCourses = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await cmsApi.getCourses();
|
||||
setCourses(data);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch courses:", err);
|
||||
setError("Could not connect to CMS service. showing offline mode.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadCourses();
|
||||
}, [router]);
|
||||
|
||||
|
||||
|
||||
const handleCreateCourse = async () => {
|
||||
const title = prompt("Enter course title:");
|
||||
@@ -42,7 +60,14 @@ export default function Home() {
|
||||
};
|
||||
|
||||
const placeholderCourses: Course[] = [
|
||||
{ id: "p1", title: "Introduction to Rust (Demo)", instructor_id: "demo", created_at: new Date().toISOString() },
|
||||
{
|
||||
id: "p1",
|
||||
title: "Introduction to Rust (Demo)",
|
||||
description: "A demo course to get started",
|
||||
instructor_id: "demo",
|
||||
passing_percentage: 70,
|
||||
created_at: new Date().toISOString()
|
||||
},
|
||||
];
|
||||
|
||||
const displayCourses = courses.length > 0 ? courses : (loading ? [] : placeholderCourses);
|
||||
|
||||
Reference in New Issue
Block a user