feat: introduce CourseEditorLayout and AppHeader, add organization domain migration, and update Docker configurations and auth scripts
This commit is contained in:
@@ -1,77 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { cmsApi, Organization } from "@/lib/api";
|
||||
import { Building2, Calendar, Hash } from "lucide-react";
|
||||
|
||||
export default function OrganizationPage() {
|
||||
const [org, setOrg] = useState<Organization | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchOrg = async () => {
|
||||
try {
|
||||
const data = await cmsApi.getOrganization();
|
||||
setOrg(data);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to load organization");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchOrg();
|
||||
}, []);
|
||||
|
||||
if (loading) return <div className="p-8 text-center text-gray-500">Loading organization details...</div>;
|
||||
if (error) return <div className="p-8 text-center text-red-500 font-bold">Error: {error}</div>;
|
||||
|
||||
return (
|
||||
<div className="p-8 max-w-5xl mx-auto space-y-8">
|
||||
<header>
|
||||
<h1 className="text-3xl font-black tracking-tighter text-white mb-2">Organization Settings</h1>
|
||||
<p className="text-gray-400">Manage your organization's profile and settings.</p>
|
||||
</header>
|
||||
|
||||
{org && (
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="glass-card p-6 space-y-4">
|
||||
<div className="flex items-center gap-3 text-blue-400 mb-2">
|
||||
<Building2 size={24} />
|
||||
<h2 className="text-xl font-bold text-white">Profile</h2>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] uppercase font-black tracking-widest text-gray-500">Organization Name</label>
|
||||
<div className="text-lg font-medium text-white">{org.name}</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] uppercase font-black tracking-widest text-gray-500">Organization ID</label>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-400 font-mono bg-black/20 p-2 rounded border border-white/5">
|
||||
<Hash size={14} />
|
||||
{org.id}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] uppercase font-black tracking-widest text-gray-500">Created At</label>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-400">
|
||||
<Calendar size={14} />
|
||||
{new Date(org.created_at).toLocaleDateString()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="glass-card p-6 flex items-center justify-center text-center text-gray-500">
|
||||
<div>
|
||||
<p className="mb-2 font-bold">More settings coming soon</p>
|
||||
<p className="text-xs">User management and billing features are under development.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -3,6 +3,7 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { cmsApi, Organization } from '@/lib/api';
|
||||
import { useAuth } from '@/context/AuthContext';
|
||||
import Image from 'next/image';
|
||||
import { Plus, Building2, Globe, Calendar, ExternalLink, ShieldCheck, Palette, Upload, Save, X } from 'lucide-react';
|
||||
|
||||
export default function OrganizationsPage() {
|
||||
@@ -141,9 +142,9 @@ export default function OrganizationsPage() {
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 mb-4">
|
||||
<div className="p-3 rounded-lg bg-blue-500/10 text-blue-400 overflow-hidden w-12 h-12 flex items-center justify-center">
|
||||
<div className="p-3 rounded-lg bg-blue-500/10 text-blue-400 overflow-hidden w-12 h-12 flex items-center justify-center relative">
|
||||
{org.logo_url ? (
|
||||
<img src={org.logo_url} alt={org.name} className="w-full h-full object-contain" />
|
||||
<Image src={org.logo_url} alt={org.name} fill className="object-contain" />
|
||||
) : (
|
||||
<Building2 className="w-6 h-6" />
|
||||
)}
|
||||
@@ -256,9 +257,9 @@ export default function OrganizationsPage() {
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-3 text-brand">Organization Logo</label>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-20 h-20 rounded-xl bg-black/40 border border-white/10 flex items-center justify-center overflow-hidden">
|
||||
<div className="w-20 h-20 rounded-xl bg-black/40 border border-white/10 flex items-center justify-center overflow-hidden relative">
|
||||
{selectedOrg.logo_url ? (
|
||||
<img src={selectedOrg.logo_url} alt="Preview" className="w-full h-full object-contain" />
|
||||
<Image src={selectedOrg.logo_url} alt="Preview" fill className="object-contain" />
|
||||
) : (
|
||||
<Building2 className="w-8 h-8 text-gray-600" />
|
||||
)}
|
||||
@@ -320,9 +321,9 @@ export default function OrganizationsPage() {
|
||||
{/* Mock Experience Header */}
|
||||
<div className="h-10 px-4 flex items-center justify-between border-b border-white/5" style={{ backgroundColor: primaryColor }}>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-5 h-5 bg-white/20 rounded flex items-center justify-center overflow-hidden">
|
||||
<div className="w-5 h-5 bg-white/20 rounded flex items-center justify-center overflow-hidden relative">
|
||||
{selectedOrg.logo_url ? (
|
||||
<img src={selectedOrg.logo_url} alt="Logo" className="w-full h-full object-contain" />
|
||||
<Image src={selectedOrg.logo_url} alt="Logo" fill className="object-contain" />
|
||||
) : <div className="w-3 h-3 bg-white" />}
|
||||
</div>
|
||||
<div className="w-16 h-2 bg-white/30 rounded" />
|
||||
@@ -366,7 +367,7 @@ export default function OrganizationsPage() {
|
||||
<button
|
||||
onClick={handleBrandingSave}
|
||||
disabled={isSavingBranding}
|
||||
className="flex-2 px-8 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-xl transition-all shadow-lg shadow-blue-500/20 font-bold flex items-center justify-center gap-2"
|
||||
className="flex-[2] px-8 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-xl transition-all shadow-lg shadow-blue-500/20 font-bold flex items-center justify-center gap-2"
|
||||
>
|
||||
{isSavingBranding ? <div className="w-5 h-5 border-2 border-white/20 border-t-white rounded-full animate-spin" /> : <Save className="w-5 h-5" />}
|
||||
Save Branding
|
||||
|
||||
@@ -100,6 +100,7 @@ export default function StudioLoginPage() {
|
||||
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"
|
||||
autoComplete="name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
@@ -116,6 +117,7 @@ export default function StudioLoginPage() {
|
||||
onChange={(e) => setOrganizationName(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="Your School or Company"
|
||||
autoComplete="organization"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-2 pl-1">
|
||||
@@ -137,6 +139,7 @@ export default function StudioLoginPage() {
|
||||
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"
|
||||
autoComplete="email"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
@@ -154,6 +157,7 @@ export default function StudioLoginPage() {
|
||||
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="••••••••"
|
||||
autoComplete="current-password"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { cmsApi, Course, CourseAnalytics } from "@/lib/api";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import {
|
||||
@@ -13,6 +14,7 @@ import {
|
||||
CheckCircle2,
|
||||
BookOpen
|
||||
} from "lucide-react";
|
||||
import CourseEditorLayout from "@/components/CourseEditorLayout";
|
||||
|
||||
export default function AnalyticsPage() {
|
||||
const { id } = useParams() as { id: string };
|
||||
@@ -97,114 +99,133 @@ export default function AnalyticsPage() {
|
||||
</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>
|
||||
<main className="max-w-7xl mx-auto px-8 mt-12 space-y-8">
|
||||
<div className="flex items-center gap-4 text-sm text-gray-400">
|
||||
<Link href="/" className="hover:text-white transition-colors">Courses</Link>
|
||||
<span>/</span>
|
||||
<span className="text-white">{course?.title}</span>
|
||||
</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 className="flex justify-between items-center">
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold">{course?.title}</h2>
|
||||
<div className="flex items-center gap-3 mt-1">
|
||||
<span className="text-gray-400 text-sm">Performance Insights</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}%` }}
|
||||
/>
|
||||
<CourseEditorLayout activeTab="analytics">
|
||||
<div className="p-8 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>
|
||||
</section>
|
||||
<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>
|
||||
|
||||
{/* 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="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">
|
||||
{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>
|
||||
{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 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>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
{/* 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>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</CourseEditorLayout>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -7,14 +7,13 @@ import {
|
||||
Calendar as CalendarIcon,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Plus,
|
||||
Layout,
|
||||
CheckCircle2,
|
||||
BarChart2,
|
||||
Settings,
|
||||
Clock,
|
||||
AlertCircle
|
||||
} from "lucide-react";
|
||||
import CourseEditorLayout from "@/components/CourseEditorLayout";
|
||||
|
||||
export default function CourseCalendarPage({ params }: { params: { id: string } }) {
|
||||
const [course, setCourse] = useState<Course | null>(null);
|
||||
@@ -73,9 +72,9 @@ export default function CourseCalendarPage({ params }: { params: { id: string }
|
||||
<div
|
||||
key={lesson.id}
|
||||
className={`text-[10px] p-1 rounded truncate flex items-center gap-1 ${lesson.important_date_type === 'exam' ? 'bg-red-500/20 text-red-400 border border-red-500/30' :
|
||||
lesson.important_date_type === 'assignment' ? 'bg-blue-500/20 text-blue-400 border border-blue-500/30' :
|
||||
lesson.important_date_type === 'live-session' ? 'bg-purple-500/20 text-purple-400 border border-purple-500/30' :
|
||||
'bg-green-500/20 text-green-400 border border-green-500/30'
|
||||
lesson.important_date_type === 'assignment' ? 'bg-blue-500/20 text-blue-400 border border-blue-500/30' :
|
||||
lesson.important_date_type === 'live-session' ? 'bg-purple-500/20 text-purple-400 border border-purple-500/30' :
|
||||
'bg-green-500/20 text-green-400 border border-green-500/30'
|
||||
}`}
|
||||
>
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-current"></span>
|
||||
@@ -121,25 +120,7 @@ export default function CourseCalendarPage({ params }: { params: { id: string }
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="glass p-1">
|
||||
<div className="flex border-b border-white/10">
|
||||
<Link href={`/courses/${params.id}`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium text-gray-500 hover:text-white transition-colors">
|
||||
<Layout className="w-4 h-4" /> Outline
|
||||
</Link>
|
||||
<Link href={`/courses/${params.id}/grading`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium text-gray-500 hover:text-white transition-colors">
|
||||
<CheckCircle2 className="w-4 h-4" /> Grading
|
||||
</Link>
|
||||
<Link href={`/courses/${params.id}/calendar`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium border-b-2 border-blue-500 bg-white/5">
|
||||
<CalendarIcon className="w-4 h-4" /> Calendar
|
||||
</Link>
|
||||
<Link href={`/courses/${params.id}/analytics`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium text-gray-500 hover:text-white transition-colors">
|
||||
<BarChart2 className="w-4 h-4" /> Analytics
|
||||
</Link>
|
||||
<Link href={`/courses/${params.id}/settings`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium text-gray-500 hover:text-white transition-colors">
|
||||
<Settings className="w-4 h-4" /> Settings
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<CourseEditorLayout activeTab="calendar">
|
||||
<div className="p-8">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div className="flex items-center gap-6">
|
||||
@@ -191,8 +172,8 @@ export default function CourseCalendarPage({ params }: { params: { id: string }
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<div className={`text-[10px] font-black uppercase tracking-widest mb-1 ${lesson.important_date_type === 'exam' ? 'text-red-400' :
|
||||
lesson.important_date_type === 'assignment' ? 'text-blue-400' :
|
||||
'text-green-400'
|
||||
lesson.important_date_type === 'assignment' ? 'text-blue-400' :
|
||||
'text-green-400'
|
||||
}`}>
|
||||
{lesson.important_date_type || 'Activity'}
|
||||
</div>
|
||||
@@ -209,7 +190,7 @@ export default function CourseCalendarPage({ params }: { params: { id: string }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CourseEditorLayout>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { cmsApi, GradingCategory, Course } from "@/lib/api";
|
||||
import { cmsApi, GradingCategory } from "@/lib/api";
|
||||
import {
|
||||
Plus,
|
||||
Trash2,
|
||||
@@ -19,6 +19,7 @@ import {
|
||||
import Link from "next/link";
|
||||
import { clsx, type ClassValue } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import CourseEditorLayout from "@/components/CourseEditorLayout";
|
||||
|
||||
function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
@@ -113,126 +114,110 @@ export default function GradingPolicyPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="glass p-1 mb-12">
|
||||
<div className="flex border-b border-white/10">
|
||||
<Link href={`/courses/${id}`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium text-gray-500 hover:text-white transition-colors">
|
||||
<Layout className="w-4 h-4" /> Outline
|
||||
</Link>
|
||||
<Link href={`/courses/${id}/grading`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium border-b-2 border-blue-500 bg-white/5">
|
||||
<CheckCircle2 className="w-4 h-4" /> Grading
|
||||
</Link>
|
||||
<Link href={`/courses/${id}/calendar`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium text-gray-500 hover:text-white transition-colors">
|
||||
<Calendar className="w-4 h-4" /> Calendar
|
||||
</Link>
|
||||
<Link href={`/courses/${id}/analytics`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium text-gray-500 hover:text-white transition-colors">
|
||||
<BarChart2 className="w-4 h-4" /> Analytics
|
||||
</Link>
|
||||
<Link href={`/courses/${id}/settings`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium text-gray-500 hover:text-white transition-colors">
|
||||
<Settings className="w-4 h-4" /> Settings
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<CourseEditorLayout activeTab="grading">
|
||||
<div className="p-8">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Categories List */}
|
||||
<div className="lg:col-span-2 space-y-4">
|
||||
<h2 className="text-sm font-semibold uppercase tracking-wider text-gray-500 mb-6 flex items-center gap-2">
|
||||
<Settings className="w-4 h-4" /> Assessment Categories
|
||||
</h2>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Categories List */}
|
||||
<div className="lg:col-span-2 space-y-4">
|
||||
<h2 className="text-sm font-semibold uppercase tracking-wider text-gray-500 mb-6 flex items-center gap-2">
|
||||
<Settings className="w-4 h-4" /> Assessment Categories
|
||||
</h2>
|
||||
|
||||
{categories.length === 0 ? (
|
||||
<div className="bg-white/5 border border-white/10 rounded-2xl p-12 text-center">
|
||||
<TrendingUp className="w-12 h-12 text-gray-600 mx-auto mb-4" />
|
||||
<p className="text-gray-400 italic">No grading categories defined yet.</p>
|
||||
</div>
|
||||
) : (
|
||||
categories.map((cat) => (
|
||||
<div
|
||||
key={cat.id}
|
||||
className="group bg-white/5 border border-white/10 p-6 rounded-2xl flex items-center justify-between hover:border-blue-500/50 hover:bg-white/[0.07] transition-all duration-300"
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center text-blue-400 font-bold group-hover:scale-110 transition-transform">
|
||||
{cat.weight}%
|
||||
{categories.length === 0 ? (
|
||||
<div className="bg-white/5 border border-white/10 rounded-2xl p-12 text-center">
|
||||
<TrendingUp className="w-12 h-12 text-gray-600 mx-auto mb-4" />
|
||||
<p className="text-gray-400 italic">No grading categories defined yet.</p>
|
||||
</div>
|
||||
) : (
|
||||
categories.map((cat) => (
|
||||
<div
|
||||
key={cat.id}
|
||||
className="group bg-white/5 border border-white/10 p-6 rounded-2xl flex items-center justify-between hover:border-blue-500/50 hover:bg-white/[0.07] transition-all duration-300"
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center text-blue-400 font-bold group-hover:scale-110 transition-transform">
|
||||
{cat.weight}%
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-100">{cat.name}</h3>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<span className="text-xs text-gray-500 bg-white/5 px-2 py-0.5 rounded-full capitalize">
|
||||
Weight: {cat.weight}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleDelete(cat.id)}
|
||||
className="p-3 bg-red-500/10 text-red-400 rounded-xl opacity-0 group-hover:opacity-100 hover:bg-red-500 hover:text-white transition-all duration-300"
|
||||
>
|
||||
<Trash2 className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Add New Category Form */}
|
||||
<div className="space-y-6">
|
||||
<div className="bg-gradient-to-br from-gray-800/50 to-gray-900/50 p-8 rounded-3xl border border-white/10 sticky top-8">
|
||||
<h2 className="text-xl font-bold mb-6 flex items-center gap-2">
|
||||
<Plus className="w-5 h-5 text-blue-400" /> New Format
|
||||
</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-100">{cat.name}</h3>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<span className="text-xs text-gray-500 bg-white/5 px-2 py-0.5 rounded-full capitalize">
|
||||
Weight: {cat.weight}%
|
||||
</span>
|
||||
<label className="text-xs font-semibold text-gray-400 uppercase tracking-widest ml-1">Type Name</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="e.g. Quizzes, Final Exam"
|
||||
value={newName}
|
||||
onChange={(e) => setNewName(e.target.value)}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 mt-1.5 focus:outline-none focus:border-blue-500 transition-all text-gray-100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-xs font-semibold text-gray-400 uppercase tracking-widest ml-1">Weight (%)</label>
|
||||
<div className="relative mt-1.5">
|
||||
<input
|
||||
type="number"
|
||||
placeholder="20"
|
||||
value={newWeight || ""}
|
||||
onChange={(e) => setNewWeight(parseInt(e.target.value) || 0)}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-blue-500 transition-all text-gray-100 pl-10"
|
||||
/>
|
||||
<Percent className="w-4 h-4 text-gray-500 absolute left-4 top-1/2 -translate-y-1/2" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleDelete(cat.id)}
|
||||
className="p-3 bg-red-500/10 text-red-400 rounded-xl opacity-0 group-hover:opacity-100 hover:bg-red-500 hover:text-white transition-all duration-300"
|
||||
>
|
||||
<Trash2 className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Add New Category Form */}
|
||||
<div className="space-y-6">
|
||||
<div className="bg-gradient-to-br from-gray-800/50 to-gray-900/50 p-8 rounded-3xl border border-white/10 sticky top-8">
|
||||
<h2 className="text-xl font-bold mb-6 flex items-center gap-2">
|
||||
<Plus className="w-5 h-5 text-blue-400" /> New Format
|
||||
</h2>
|
||||
<button
|
||||
onClick={handleAdd}
|
||||
disabled={submitting || !newName || newWeight <= 0}
|
||||
className="w-full bg-blue-600 hover:bg-blue-500 disabled:bg-gray-700 disabled:text-gray-500 text-white font-bold py-4 rounded-2xl mt-4 transition-all shadow-lg shadow-blue-500/20 active:scale-95 flex items-center justify-center gap-2"
|
||||
>
|
||||
{submitting ? "Adding..." : (
|
||||
<>
|
||||
<Plus className="w-5 h-5" />
|
||||
Add Category
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="text-xs font-semibold text-gray-400 uppercase tracking-widest ml-1">Type Name</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="e.g. Quizzes, Final Exam"
|
||||
value={newName}
|
||||
onChange={(e) => setNewName(e.target.value)}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 mt-1.5 focus:outline-none focus:border-blue-500 transition-all text-gray-100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-xs font-semibold text-gray-400 uppercase tracking-widest ml-1">Weight (%)</label>
|
||||
<div className="relative mt-1.5">
|
||||
<input
|
||||
type="number"
|
||||
placeholder="20"
|
||||
value={newWeight || ""}
|
||||
onChange={(e) => setNewWeight(parseInt(e.target.value) || 0)}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-blue-500 transition-all text-gray-100 pl-10"
|
||||
/>
|
||||
<Percent className="w-4 h-4 text-gray-500 absolute left-4 top-1/2 -translate-y-1/2" />
|
||||
{!isBalanced && (
|
||||
<div className="mt-6 p-4 rounded-xl bg-amber-500/10 border border-amber-500/20 flex gap-3">
|
||||
<AlertCircle className="w-5 h-5 text-amber-500 shrink-0 mt-0.5" />
|
||||
<p className="text-sm text-amber-200/80 leading-relaxed">
|
||||
The total weight of all categories must be exactly 100% for the course to be valid for certification. Currently: <strong>{totalWeight}%</strong>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleAdd}
|
||||
disabled={submitting || !newName || newWeight <= 0}
|
||||
className="w-full bg-blue-600 hover:bg-blue-500 disabled:bg-gray-700 disabled:text-gray-500 text-white font-bold py-4 rounded-2xl mt-4 transition-all shadow-lg shadow-blue-500/20 active:scale-95 flex items-center justify-center gap-2"
|
||||
>
|
||||
{submitting ? "Adding..." : (
|
||||
<>
|
||||
<Plus className="w-5 h-5" />
|
||||
Add Category
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{!isBalanced && (
|
||||
<div className="mt-6 p-4 rounded-xl bg-amber-500/10 border border-amber-500/20 flex gap-3">
|
||||
<AlertCircle className="w-5 h-5 text-amber-500 shrink-0 mt-0.5" />
|
||||
<p className="text-sm text-amber-200/80 leading-relaxed">
|
||||
The total weight of all categories must be exactly 100% for the course to be valid for certification. Currently: <strong>{totalWeight}%</strong>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CourseEditorLayout>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -20,6 +20,7 @@ import {
|
||||
GripVertical,
|
||||
Trash2
|
||||
} from "lucide-react";
|
||||
import CourseEditorLayout from "@/components/CourseEditorLayout";
|
||||
|
||||
interface FullModule extends Module {
|
||||
lessons: Lesson[];
|
||||
@@ -57,7 +58,7 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
|
||||
}, [params.id]);
|
||||
|
||||
const handleAddModule = async () => {
|
||||
const title = "New Module";
|
||||
const title = "";
|
||||
try {
|
||||
const newMod = await cmsApi.createModule(params.id, title, modules.length + 1);
|
||||
const fullMod = { ...newMod, lessons: [] };
|
||||
@@ -222,25 +223,7 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="glass p-1">
|
||||
<div className="flex border-b border-white/10">
|
||||
<Link href={`/courses/${params.id}`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium border-b-2 border-blue-500 bg-white/5">
|
||||
<Layout className="w-4 h-4" /> Outline
|
||||
</Link>
|
||||
<Link href={`/courses/${params.id}/grading`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium text-gray-500 hover:text-white transition-colors">
|
||||
<CheckCircle2 className="w-4 h-4" /> Grading
|
||||
</Link>
|
||||
<Link href={`/courses/${params.id}/calendar`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium text-gray-500 hover:text-white transition-colors">
|
||||
<Calendar className="w-4 h-4" /> Calendar
|
||||
</Link>
|
||||
<Link href={`/courses/${params.id}/analytics`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium text-gray-500 hover:text-white transition-colors">
|
||||
<BarChart2 className="w-4 h-4" /> Analytics
|
||||
</Link>
|
||||
<Link href={`/courses/${params.id}/settings`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium text-gray-500 hover:text-white transition-colors">
|
||||
<Settings className="w-4 h-4" /> Settings
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<CourseEditorLayout activeTab="outline">
|
||||
<div className="p-8 space-y-6">
|
||||
{modules.map((module, mIndex) => (
|
||||
<div key={module.id} className="glass rounded-xl overflow-hidden border-white/5">
|
||||
@@ -286,7 +269,7 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
|
||||
onClick={() => { setEditingId(module.id); setEditValue(module.title); }}
|
||||
className="font-semibold text-lg text-blue-400 cursor-pointer hover:text-blue-300 transition-colors"
|
||||
>
|
||||
Module {module.position}: {module.title}
|
||||
{module.title || `Module ${module.position}`}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => { setEditingId(module.id); setEditValue(module.title); }}
|
||||
@@ -404,7 +387,7 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
|
||||
<Plus className="w-6 h-6" /> Add New Module
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</CourseEditorLayout>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -10,7 +10,7 @@ export default function AuthHeader() {
|
||||
<div className="flex items-center gap-4">
|
||||
{user?.role === 'admin' && (
|
||||
<>
|
||||
<Link href="/admin/organization" className="text-xs font-bold uppercase tracking-widest text-gray-400 hover:text-white transition-colors flex items-center gap-2">
|
||||
<Link href="/admin/organizations" className="text-xs font-bold uppercase tracking-widest text-gray-400 hover:text-white transition-colors flex items-center gap-2">
|
||||
<Building2 size={16} /> Org
|
||||
</Link>
|
||||
<Link href="/admin/audit" className="text-xs font-bold uppercase tracking-widest text-gray-400 hover:text-white transition-colors flex items-center gap-2">
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { useParams } from "next/navigation";
|
||||
import { Layout, CheckCircle2, Calendar, BarChart2, Settings } from "lucide-react";
|
||||
|
||||
interface CourseEditorLayoutProps {
|
||||
children: React.ReactNode;
|
||||
activeTab: "outline" | "grading" | "calendar" | "analytics" | "settings";
|
||||
}
|
||||
|
||||
export default function CourseEditorLayout({ children, activeTab }: CourseEditorLayoutProps) {
|
||||
const { id } = useParams() as { id: string };
|
||||
|
||||
const tabs = [
|
||||
{ key: "outline", label: "Outline", icon: Layout, href: `/courses/${id}` },
|
||||
{ key: "grading", label: "Grading", icon: CheckCircle2, href: `/courses/${id}/grading` },
|
||||
{ key: "calendar", label: "Calendar", icon: Calendar, href: `/courses/${id}/calendar` },
|
||||
{ key: "analytics", label: "Analytics", icon: BarChart2, href: `/courses/${id}/analytics` },
|
||||
{ key: "settings", label: "Settings", icon: Settings, href: `/courses/${id}/settings` },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{/* Tabs Navigation */}
|
||||
<div className="glass p-1">
|
||||
<div className="flex border-b border-white/10">
|
||||
{tabs.map((tab) => {
|
||||
const Icon = tab.icon;
|
||||
const isActive = tab.key === activeTab;
|
||||
return (
|
||||
<Link
|
||||
key={tab.key}
|
||||
href={tab.href}
|
||||
className={`flex items-center gap-2 px-6 py-4 text-sm font-medium transition-colors ${isActive
|
||||
? "border-b-2 border-blue-500 bg-white/5"
|
||||
: "text-gray-500 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
<Icon className="w-4 h-4" />
|
||||
{tab.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="space-y-6">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -156,9 +156,15 @@ const apiFetch = (url: string, options: RequestInit = {}) => {
|
||||
...(token ? { 'Authorization': `Bearer ${token}` } : {})
|
||||
};
|
||||
|
||||
return fetch(`${API_BASE_URL}${url}`, { ...options, headers }).then(res => {
|
||||
return fetch(`${API_BASE_URL}${url}`, { ...options, headers }).then(async res => {
|
||||
if (!res.ok) {
|
||||
return res.json().then(err => Promise.reject(err.message || 'An error occurred'));
|
||||
const text = await res.text();
|
||||
try {
|
||||
const json = JSON.parse(text);
|
||||
return Promise.reject(new Error(json.message || 'An error occurred'));
|
||||
} catch {
|
||||
return Promise.reject(new Error(text || res.statusText));
|
||||
}
|
||||
}
|
||||
// Handle no-content responses
|
||||
if (res.status === 204) return;
|
||||
|
||||
Reference in New Issue
Block a user