Nurfog/openccb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Enhance UI with improved dark mode styling and color palette adjustments across course pages.

Browse Source
This commit is contained in:
Juan Enrique Allende Cifuentes
2026-03-03 11:11:06 -03:00
parent 1987acd734
commit 9123337200
15 changed files with 374 additions and 361 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/studio/src/app/courses/[id]/analytics/page.tsx
+42 -42
View File
@@ -66,12 +66,12 @@ export default function AnalyticsPage() {
); );
if (authError) return ( if (authError) return (
<div className="min-h-screen bg-transparent text-gray-900 dark:text-white flex flex-col items-center justify-center p-20 text-center gap-6"> <div className="min-h-screen bg-transparent text-slate-900 dark: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"> <div className="w-20 h-20 bg-red-600/10 rounded-full flex items-center justify-center text-red-600 dark:text-red-500">
<AlertTriangle size={40} /> <AlertTriangle size={40} />
</div> </div>
<h2 className="text-2xl font-bold">Access Denied</h2> <h2 className="text-2xl font-black">Access Denied</h2>
<p className="text-gray-600 dark:text-gray-400 max-w-md">{authError}</p> <p className="text-slate-500 dark:text-gray-400 max-w-md font-medium">{authError}</p>
<button onClick={() => router.back()} className="btn-premium px-8 py-3">Go Back</button> <button onClick={() => router.back()} className="btn-premium px-8 py-3">Go Back</button>
</div> </div>
); );
@@ -96,7 +96,7 @@ export default function AnalyticsPage() {
<select <select
value={selectedCohortId} value={selectedCohortId}
onChange={(e) => setSelectedCohortId(e.target.value)} onChange={(e) => setSelectedCohortId(e.target.value)}
className="bg-white/5 text-gray-900 dark:text-white border border-white/10 rounded-xl px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 min-w-[160px]" className="bg-slate-100 dark:bg-white/5 text-slate-900 dark:text-white border border-slate-200 dark:border-white/10 rounded-xl px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 min-w-[160px]"
> >
<option value="">Todos los Estudiantes</option> <option value="">Todos los Estudiantes</option>
{cohorts.map(c => <option key={c.id} value={c.id}>{c.name}</option>)} {cohorts.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
@@ -107,7 +107,7 @@ export default function AnalyticsPage() {
> >
<Layers size={14} /> Insights Avanzados <Layers size={14} /> Insights Avanzados
</button> </button>
<div className="bg-blue-500/10 text-blue-400 text-[10px] font-black uppercase tracking-wider px-3 py-1.5 rounded-lg border border-blue-500/20"> <div className="bg-blue-600/10 text-blue-600 dark:text-blue-400 text-[10px] font-black uppercase tracking-wider px-3 py-1.5 rounded-lg border border-blue-600/20">
{user?.role} View {user?.role} View
</div> </div>
</div> </div>
@@ -115,61 +115,61 @@ export default function AnalyticsPage() {
> >
<div className="space-y-12"> <div className="space-y-12">
{/* Tab Selector */} {/* Tab Selector */}
<div className="flex items-center gap-1 mb-10 p-1 bg-white/5 rounded-2xl w-fit"> <div className="flex items-center gap-1 mb-10 p-1.5 bg-slate-100 dark:bg-white/5 rounded-2xl w-fit border border-slate-200 dark:border-white/5">
<button <button
onClick={() => setActiveAnalyticsTab("overview")} onClick={() => setActiveAnalyticsTab("overview")}
className={`px-6 py-2.5 rounded-xl text-sm font-bold transition-all flex items-center gap-2 ${activeAnalyticsTab === "overview" ? "bg-blue-600 text-white shadow-lg shadow-blue-500/20" : "text-gray-400 hover:text-white hover:bg-white/5"}`} className={`px-6 py-2.5 rounded-xl text-xs font-black uppercase tracking-widest transition-all flex items-center gap-2 ${activeAnalyticsTab === "overview" ? "bg-blue-600 text-white shadow-lg shadow-blue-500/20" : "text-slate-500 dark:text-gray-400 hover:text-slate-800 dark:hover:text-white hover:bg-white/5"}`}
> >
<BarChart3 size={16} /> Overview <BarChart3 size={14} /> Overview
</button> </button>
<button <button
onClick={() => setActiveAnalyticsTab("risks")} onClick={() => setActiveAnalyticsTab("risks")}
className={`px-6 py-2.5 rounded-xl text-sm font-bold transition-all flex items-center gap-2 ${activeAnalyticsTab === "risks" ? "bg-red-600 text-white shadow-lg shadow-red-500/20" : "text-gray-400 hover:text-white hover:bg-white/5"}`} className={`px-6 py-2.5 rounded-xl text-xs font-black uppercase tracking-widest transition-all flex items-center gap-2 ${activeAnalyticsTab === "risks" ? "bg-red-600 text-white shadow-lg shadow-red-500/20" : "text-slate-500 dark:text-gray-400 hover:text-red-500 dark:hover:text-white hover:bg-white/5"}`}
> >
<ShieldAlert size={16} /> Predictive Risks <ShieldAlert size={14} /> Predictive Risks
</button> </button>
<button <button
onClick={() => setActiveAnalyticsTab("live")} onClick={() => setActiveAnalyticsTab("live")}
className={`px-6 py-2.5 rounded-xl text-sm font-bold transition-all flex items-center gap-2 ${activeAnalyticsTab === "live" ? "bg-blue-600 text-white shadow-lg shadow-blue-500/20" : "text-gray-400 hover:text-white hover:bg-white/5"}`} className={`px-6 py-2.5 rounded-xl text-xs font-black uppercase tracking-widest transition-all flex items-center gap-2 ${activeAnalyticsTab === "live" ? "bg-blue-600 text-white shadow-lg shadow-blue-500/20" : "text-slate-500 dark:text-gray-400 hover:text-slate-800 dark:hover:text-white hover:bg-white/5"}`}
> >
<Video size={16} /> Live Sessions <Video size={14} /> Live Sessions
</button> </button>
</div> </div>
{activeAnalyticsTab === "overview" && ( {activeAnalyticsTab === "overview" && (
<div className="space-y-12 animate-in fade-in slide-in-from-bottom-4 duration-700"> <div className="space-y-12 animate-in fade-in slide-in-from-bottom-4 duration-700">
<div className="grid grid-cols-1 md:grid-cols-3 gap-6"> <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="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl p-8 group hover:bg-white transition-all shadow-sm">
<div className="flex items-center gap-4 mb-4"> <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"> <div className="w-12 h-12 rounded-2xl bg-blue-600/10 flex items-center justify-center text-blue-600 dark:text-blue-400">
<Users size={24} /> <Users size={24} />
</div> </div>
<span className="text-sm font-bold text-gray-400 uppercase tracking-widest">Enrollments</span> <span className="text-xs font-black text-slate-400 dark:text-gray-400 uppercase tracking-[0.2em]">Enrollments</span>
</div> </div>
<div className="text-4xl font-black">{analytics.total_enrollments}</div> <div className="text-4xl font-black text-slate-900 dark:text-white">{analytics.total_enrollments}</div>
<div className="text-xs text-green-400 font-bold mt-2">Active Learners</div> <div className="text-xs text-green-600 dark:text-green-400 font-black uppercase mt-2 tracking-wider">Active Learners</div>
</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="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl p-8 group hover:bg-white transition-all shadow-sm">
<div className="flex items-center gap-4 mb-4"> <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"> <div className="w-12 h-12 rounded-2xl bg-purple-600/10 flex items-center justify-center text-purple-600 dark:text-purple-400">
<TrendingUp size={24} /> <TrendingUp size={24} />
</div> </div>
<span className="text-sm font-bold text-gray-400 uppercase tracking-widest">Average Score</span> <span className="text-xs font-black text-slate-400 dark:text-gray-400 uppercase tracking-[0.2em]">Average Score</span>
</div> </div>
<div className="text-4xl font-black">{Math.round(analytics.average_score * 100)}%</div> <div className="text-4xl font-black text-slate-900 dark:text-white">{Math.round(analytics.average_score * 100)}%</div>
<div className="text-xs text-gray-500 font-bold mt-2">Across all assessments</div> <div className="text-xs text-slate-500 dark:text-gray-500 font-black uppercase mt-2 tracking-wider">Across all assessments</div>
</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="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl p-8 group hover:bg-white transition-all shadow-sm">
<div className="flex items-center gap-4 mb-4"> <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"> <div className="w-12 h-12 rounded-2xl bg-orange-600/10 flex items-center justify-center text-orange-600 dark:text-orange-400">
<AlertTriangle size={24} /> <AlertTriangle size={24} />
</div> </div>
<span className="text-sm font-bold text-gray-400 uppercase tracking-widest">Attention Needed</span> <span className="text-xs font-black text-slate-400 dark:text-gray-400 uppercase tracking-[0.2em]">Attention Needed</span>
</div> </div>
<div className="text-4xl font-black">{difficultLessons.length}</div> <div className="text-4xl font-black text-slate-900 dark:text-white">{difficultLessons.length}</div>
<div className="text-xs text-orange-400 font-bold mt-2">Struggling Lessons</div> <div className="text-xs text-orange-600 dark:text-orange-400 font-black uppercase mt-2 tracking-wider">Struggling Lessons</div>
</div> </div>
</div> </div>
@@ -181,19 +181,19 @@ export default function AnalyticsPage() {
</h2> </h2>
<div className="space-y-4"> <div className="space-y-4">
{analytics.lessons.map((lesson) => ( {analytics.lessons.map((lesson) => (
<div key={lesson.lesson_id} className="bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-2xl p-6 hover:bg-black/[0.07] dark:hover:bg-white/[0.07] transition-all"> <div key={lesson.lesson_id} className="bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl p-6 hover:bg-slate-50 dark:hover:bg-white/[0.07] transition-all shadow-sm">
<div className="flex items-start justify-between mb-4"> <div className="flex items-start justify-between mb-4">
<div> <div>
<h3 className="font-bold">{lesson.lesson_title}</h3> <h3 className="font-bold text-slate-800 dark:text-white">{lesson.lesson_title}</h3>
<p className="text-xs text-gray-500 mt-1">{lesson.submission_count} submissions</p> <p className="text-xs text-slate-500 dark:text-gray-500 mt-1 font-medium">{lesson.submission_count} submissions</p>
</div> </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"}`}> <div className={`text-xl font-black ${lesson.average_score < 0.6 ? "text-red-500" : lesson.average_score < 0.8 ? "text-orange-500" : "text-emerald-500"}`}>
{Math.round(lesson.average_score * 100)}% {Math.round(lesson.average_score * 100)}%
</div> </div>
</div> </div>
<div className="h-1.5 bg-white/5 rounded-full overflow-hidden"> <div className="h-2 bg-slate-100 dark:bg-white/5 rounded-full overflow-hidden">
<div <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"}`} className={`h-full rounded-full transition-all duration-1000 ${lesson.average_score < 0.6 ? "bg-red-500 shadow-[0_0_10px_rgba(239,68,68,0.4)]" : lesson.average_score < 0.8 ? "bg-orange-500 shadow-[0_0_10px_rgba(249,115,22,0.4)]" : "bg-emerald-500 shadow-[0_0_10px_rgba(16,185,129,0.4)]"}`}
style={{ width: `${lesson.average_score * 100}%` }} style={{ width: `${lesson.average_score * 100}%` }}
/> />
</div> </div>
@@ -211,14 +211,14 @@ export default function AnalyticsPage() {
{difficultLessons.length > 0 ? ( {difficultLessons.length > 0 ? (
<div className="space-y-4"> <div className="space-y-4">
{difficultLessons.map(l => ( {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 key={l.lesson_id} className="bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/20 rounded-2xl p-6 flex items-center justify-between shadow-sm">
<div> <div>
<h4 className="font-bold text-red-400">{l.lesson_title}</h4> <h4 className="font-bold text-red-600 dark:text-red-400">{l.lesson_title}</h4>
<p className="text-xs text-red-300/60 mt-1 text-balance max-w-xs"> <p className="text-xs text-red-700/60 dark:text-red-300/60 mt-1 text-balance max-w-xs font-medium">
Average score is below 70%. Consider reviewing the material or difficulty of questions. Average score is below 70%. Consider reviewing the material or difficulty of questions.
</p> </p>
</div> </div>
<div className="text-2xl font-black text-red-500">{Math.round(l.average_score * 100)}%</div> <div className="text-2xl font-black text-red-600 dark:text-red-500">{Math.round(l.average_score * 100)}%</div>
</div> </div>
))} ))}
</div> </div>
@@ -230,12 +230,12 @@ export default function AnalyticsPage() {
</div> </div>
)} )}
</div> </div>
<div className="bg-blue-600/10 border border-blue-500/20 rounded-3xl p-8"> <div className="bg-blue-50 dark:bg-blue-600/10 border border-blue-200 dark:border-blue-500/20 rounded-3xl p-8 shadow-sm">
<h3 className="text-lg font-bold mb-4 flex items-center gap-2"> <h3 className="text-lg font-black mb-4 flex items-center gap-2 uppercase tracking-wide text-blue-700 dark:text-white">
<BookOpen className="text-blue-400" /> <BookOpen className="text-blue-600 dark:text-blue-400" />
Content Strategy Tip Content Strategy Tip
</h3> </h3>
<p className="text-sm text-blue-200/70 leading-relaxed"> <p className="text-sm text-blue-800/70 dark:text-blue-200/70 leading-relaxed font-medium">
High submission counts with low average scores often indicate that the assessment might be misleading or the prerequisites aren&apos;t clearly explained in previous lessons. High submission counts with low average scores often indicate that the assessment might be misleading or the prerequisites aren&apos;t clearly explained in previous lessons.
</p> </p>
</div> </div>
web/studio/src/app/courses/[id]/announcements/page.tsx
+21 -21
View File
@@ -83,7 +83,7 @@ export default function AnnouncementsPage() {
placeholder="Search announcements..." placeholder="Search announcements..."
value={searchTerm} value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)} onChange={(e) => setSearchTerm(e.target.value)}
className="w-full bg-black/20 border border-white/10 rounded-xl py-2 pl-10 pr-4 text-sm focus:outline-none focus:border-orange-500/50 transition-all" className="w-full bg-slate-100 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-xl py-2 pl-10 pr-4 text-sm focus:outline-none focus:border-orange-500/50 transition-all text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-gray-500"
/> />
</div> </div>
</div> </div>
@@ -97,7 +97,7 @@ export default function AnnouncementsPage() {
) : filteredAnnouncements.length > 0 ? ( ) : filteredAnnouncements.length > 0 ? (
<div className="grid gap-6"> <div className="grid gap-6">
{filteredAnnouncements.map((a) => ( {filteredAnnouncements.map((a) => (
<div key={a.id} className={`relative p-6 rounded-2xl border transition-all duration-300 ${a.is_pinned ? 'bg-orange-500/10 border-orange-500/30' : 'bg-white/5 border-white/10 hover:border-white/20'}`}> <div key={a.id} className={`relative p-6 rounded-2xl border transition-all duration-300 ${a.is_pinned ? 'bg-orange-500/10 border-orange-500/30' : 'bg-slate-50 dark:bg-white/5 border-slate-100 dark:border-white/10 hover:border-slate-200 dark:hover:border-white/20'}`}>
<div className="flex items-start justify-between mb-4"> <div className="flex items-start justify-between mb-4">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-orange-500 to-red-500 flex items-center justify-center text-gray-900 dark:text-white font-bold overflow-hidden"> <div className="w-10 h-10 rounded-full bg-gradient-to-br from-orange-500 to-red-500 flex items-center justify-center text-gray-900 dark:text-white font-bold overflow-hidden">
@@ -108,8 +108,8 @@ export default function AnnouncementsPage() {
)} )}
</div> </div>
<div> <div>
<h4 className="font-semibold text-gray-900 dark:text-white">{a.author_name}</h4> <h4 className="font-semibold text-slate-900 dark:text-white">{a.author_name}</h4>
<div className="flex items-center gap-2 text-sm text-gray-400"> <div className="flex items-center gap-2 text-sm text-slate-500 dark:text-gray-400">
<span>{formatDistanceToNow(new Date(a.created_at), { addSuffix: true, locale: es })}</span> <span>{formatDistanceToNow(new Date(a.created_at), { addSuffix: true, locale: es })}</span>
{a.cohort_ids && a.cohort_ids.length > 0 && ( {a.cohort_ids && a.cohort_ids.length > 0 && (
<> <>
@@ -133,8 +133,8 @@ export default function AnnouncementsPage() {
</button> </button>
</div> </div>
</div> </div>
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">{a.title}</h3> <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-2">{a.title}</h3>
<p className="text-gray-300 whitespace-pre-wrap">{a.content}</p> <p className="text-slate-600 dark:text-gray-300 whitespace-pre-wrap">{a.content}</p>
{/* Display Target Cohort Names if segmented */} {/* Display Target Cohort Names if segmented */}
{a.cohort_ids && a.cohort_ids.length > 0 && ( {a.cohort_ids && a.cohort_ids.length > 0 && (
@@ -153,10 +153,10 @@ export default function AnnouncementsPage() {
))} ))}
</div> </div>
) : ( ) : (
<div className="bg-white/5 border border-white/10 rounded-2xl p-20 text-center"> <div className="bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/10 rounded-2xl p-20 text-center">
<Megaphone className="w-12 h-12 text-gray-600 mx-auto mb-4" /> <Megaphone className="w-12 h-12 text-slate-400 dark:text-gray-600 mx-auto mb-4" />
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">No announcements found</h3> <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-2">No announcements found</h3>
<p className="text-gray-400">Start by creating a new announcement for your students.</p> <p className="text-slate-500 dark:text-gray-400">Start by creating a new announcement for your students.</p>
</div> </div>
)} )}
</div> </div>
@@ -212,14 +212,14 @@ function NewAnnouncementModal({ courseId, cohorts, onClose, onSuccess }: { cours
}; };
return ( return (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"> <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 dark:bg-black/80 backdrop-blur-sm animate-in fade-in duration-300">
<div className="bg-[#1a1c1e] border border-white/10 rounded-3xl w-full max-w-2xl overflow-hidden shadow-2xl animate-in fade-in zoom-in duration-200"> <div className="bg-white dark:bg-[#1a1c1e] border border-slate-200 dark:border-white/10 rounded-3xl w-full max-w-2xl overflow-hidden shadow-2xl animate-in fade-in zoom-in duration-200">
<div className="p-6 border-b border-white/5 flex items-center justify-between"> <div className="p-6 border-b border-slate-100 dark:border-white/5 flex items-center justify-between">
<h2 className="text-xl font-bold flex items-center gap-2"> <h2 className="text-xl font-bold flex items-center gap-2 text-slate-900 dark:text-white">
<Megaphone className="w-5 h-5 text-orange-500" /> <Megaphone className="w-5 h-5 text-orange-500" />
Create New Announcement Create New Announcement
</h2> </h2>
<button onClick={onClose} className="text-gray-500 hover:text-gray-900 dark:text-white transition-colors"> <button onClick={onClose} className="text-slate-400 hover:text-slate-900 dark:text-gray-500 dark:hover:text-white transition-colors">
<Plus className="w-6 h-6 rotate-45" /> <Plus className="w-6 h-6 rotate-45" />
</button> </button>
</div> </div>
@@ -230,7 +230,7 @@ function NewAnnouncementModal({ courseId, cohorts, onClose, onSuccess }: { cours
required required
value={title} value={title}
onChange={(e) => setTitle(e.target.value)} onChange={(e) => setTitle(e.target.value)}
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-orange-500/50" className="w-full bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-orange-500/50 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-gray-500"
placeholder="Announcement title" placeholder="Announcement title"
/> />
</div> </div>
@@ -241,7 +241,7 @@ function NewAnnouncementModal({ courseId, cohorts, onClose, onSuccess }: { cours
rows={5} rows={5}
value={content} value={content}
onChange={(e) => setContent(e.target.value)} onChange={(e) => setContent(e.target.value)}
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-orange-500/50 resize-none" className="w-full bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-orange-500/50 resize-none text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-gray-500"
placeholder="Type your message here..." placeholder="Type your message here..."
/> />
</div> </div>
@@ -258,7 +258,7 @@ function NewAnnouncementModal({ courseId, cohorts, onClose, onSuccess }: { cours
key={c.id} key={c.id}
type="button" type="button"
onClick={() => toggleCohort(c.id)} onClick={() => toggleCohort(c.id)}
className={`px-3 py-1.5 rounded-lg text-xs font-bold transition-all border ${selectedCohorts.includes(c.id) ? 'bg-blue-600 border-blue-500 text-gray-900 dark:text-white' : 'bg-white/5 border-white/10 text-gray-400 hover:bg-white/10'}`} className={`px-3 py-1.5 rounded-lg text-xs font-bold transition-all border ${selectedCohorts.includes(c.id) ? 'bg-blue-600 border-blue-500 text-white' : 'bg-slate-50 dark:bg-white/5 border-slate-100 dark:border-white/10 text-slate-500 dark:text-gray-400 hover:bg-slate-100 dark:hover:bg-white/10'}`}
> >
{c.name} {c.name}
</button> </button>
@@ -272,9 +272,9 @@ function NewAnnouncementModal({ courseId, cohorts, onClose, onSuccess }: { cours
id="pin" id="pin"
checked={isPinned} checked={isPinned}
onChange={(e) => setIsPinned(e.target.checked)} onChange={(e) => setIsPinned(e.target.checked)}
className="w-5 h-5 rounded border-white/10 bg-white/5 text-orange-600 focus:ring-orange-500/50" className="w-5 h-5 rounded border-slate-200 dark:border-white/10 bg-slate-50 dark:bg-white/5 text-orange-600 focus:ring-orange-500/50"
/> />
<label htmlFor="pin" className="text-sm font-medium text-gray-300 cursor-pointer"> <label htmlFor="pin" className="text-sm font-medium text-slate-600 dark:text-gray-300 cursor-pointer">
Pin this announcement to the top Pin this announcement to the top
</label> </label>
</div> </div>
@@ -286,7 +286,7 @@ function NewAnnouncementModal({ courseId, cohorts, onClose, onSuccess }: { cours
<button <button
type="submit" type="submit"
disabled={loading} disabled={loading}
className="px-8 py-2.5 bg-orange-600 hover:bg-orange-500 disabled:opacity-50 text-gray-900 dark:text-white rounded-xl font-bold flex items-center gap-2 shadow-lg shadow-orange-500/20" className="px-8 py-2.5 bg-orange-600 hover:bg-orange-500 disabled:opacity-50 text-white rounded-xl font-bold flex items-center gap-2 shadow-lg shadow-orange-500/20"
> >
{loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Megaphone className="w-4 h-4" />} {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Megaphone className="w-4 h-4" />}
Publish Announcement Publish Announcement
web/studio/src/app/courses/[id]/calendar/page.tsx
+4 -4
View File
@@ -107,10 +107,10 @@ export default function CourseCalendarPage({ params }: { params: { id: string }
<div className="flex items-center justify-between mb-8"> <div className="flex items-center justify-between mb-8">
<div className="flex items-center gap-6"> <div className="flex items-center gap-6">
<h3 className="text-2xl font-black uppercase tracking-tight">{monthName} <span className="text-blue-500">{year}</span></h3> <h3 className="text-2xl font-black uppercase tracking-tight">{monthName} <span className="text-blue-500">{year}</span></h3>
<div className="flex items-center gap-2 bg-white/5 rounded-xl p-1 border border-white/10"> <div className="flex items-center gap-2 bg-slate-100 dark:bg-white/5 rounded-xl p-1 border border-slate-200 dark:border-white/10">
<button onClick={prevMonth} className="p-2 hover:bg-white/10 rounded-lg transition-colors"><ChevronLeft className="w-5 h-5" /></button> <button onClick={prevMonth} className="p-2 hover:bg-slate-200 dark:hover:bg-white/10 rounded-lg transition-colors text-slate-600 dark:text-gray-400"><ChevronLeft className="w-5 h-5" /></button>
<button onClick={() => setCurrentDate(new Date())} className="px-3 py-1 text-xs font-bold uppercase tracking-widest hover:text-blue-400 transition-colors">Hoy</button> <button onClick={() => setCurrentDate(new Date())} className="px-3 py-1 text-xs font-bold uppercase tracking-widest text-slate-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-colors">Hoy</button>
<button onClick={nextMonth} className="p-2 hover:bg-white/10 rounded-lg transition-colors"><ChevronRight className="w-5 h-5" /></button> <button onClick={nextMonth} className="p-2 hover:bg-slate-200 dark:hover:bg-white/10 rounded-lg transition-colors text-slate-600 dark:text-gray-400"><ChevronRight className="w-5 h-5" /></button>
</div> </div>
</div> </div>
web/studio/src/app/courses/[id]/grades/page.tsx
+13 -13
View File
@@ -166,11 +166,11 @@ export default function GradebookPage() {
{/* Bulk Enroll Modal */} {/* Bulk Enroll Modal */}
{showBulkEnroll && ( {showBulkEnroll && (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"> <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 dark:bg-black/80 backdrop-blur-sm animate-in fade-in duration-300">
<div className="bg-[#1a1d23] border border-white/10 rounded-2xl w-full max-w-2xl overflow-hidden shadow-2xl animate-in fade-in zoom-in duration-200"> <div className="bg-white dark:bg-[#1a1d23] border border-slate-200 dark:border-white/10 rounded-2xl w-full max-w-2xl overflow-hidden shadow-2xl animate-in fade-in zoom-in duration-200">
<div className="p-6 border-b border-white/5 flex items-center justify-between"> <div className="p-6 border-b border-slate-100 dark:border-white/5 flex items-center justify-between">
<h3 className="text-xl font-bold flex items-center gap-2"> <h3 className="text-xl font-bold flex items-center gap-2 text-slate-900 dark:text-white">
<Users className="text-blue-400" /> Inscripción Masiva de Estudiantes <Users className="text-blue-500 dark:text-blue-400" /> Inscripción Masiva de Estudiantes
</h3> </h3>
<button <button
onClick={() => { onClick={() => {
@@ -188,14 +188,14 @@ export default function GradebookPage() {
{!bulkResults ? ( {!bulkResults ? (
<> <>
<div> <div>
<label className="block text-sm font-medium text-gray-400 mb-2"> <label className="block text-sm font-medium text-slate-500 dark:text-gray-400 mb-2">
Ingresa las direcciones de correo (separadas por comas o saltos de línea) Ingresa las direcciones de correo (separadas por comas o saltos de línea)
</label> </label>
<textarea <textarea
value={bulkEmails} value={bulkEmails}
onChange={(e) => setBulkEmails(e.target.value)} onChange={(e) => setBulkEmails(e.target.value)}
placeholder="student1@example.com&#10;student2@example.com" placeholder="student1@example.com&#10;student2@example.com"
className="w-full h-48 bg-black/20 border border-white/10 rounded-xl p-4 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 text-gray-900 dark:text-white placeholder-gray-600 resize-none font-mono" className="w-full h-48 bg-slate-50 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-xl p-4 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-gray-600 resize-none font-mono"
/> />
</div> </div>
<div className="bg-blue-500/10 border border-blue-500/20 rounded-xl p-4 flex gap-3 italic text-sm text-blue-400"> <div className="bg-blue-500/10 border border-blue-500/20 rounded-xl p-4 flex gap-3 italic text-sm text-blue-400">
@@ -234,12 +234,12 @@ export default function GradebookPage() {
)} )}
</div> </div>
<div className="p-6 bg-white/5 border-t border-white/5 flex justify-end gap-3"> <div className="p-6 bg-slate-50 dark:bg-white/5 border-t border-slate-100 dark:border-white/5 flex justify-end gap-3">
{!bulkResults ? ( {!bulkResults ? (
<> <>
<button <button
onClick={() => setShowBulkEnroll(false)} onClick={() => setShowBulkEnroll(false)}
className="px-6 py-2 rounded-xl hover:bg-white/5 transition-colors font-medium" className="px-6 py-2 rounded-xl hover:bg-slate-200 dark:hover:bg-white/5 transition-colors font-medium text-slate-600 dark:text-gray-400"
> >
Cancel Cancel
</button> </button>
@@ -280,7 +280,7 @@ export default function GradebookPage() {
<select <select
value={selectedCohortId} value={selectedCohortId}
onChange={(e) => setSelectedCohortId(e.target.value)} onChange={(e) => setSelectedCohortId(e.target.value)}
className="appearance-none bg-black/20 text-gray-900 dark:text-white border border-white/10 rounded-xl pl-4 pr-10 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 min-w-[200px]" className="appearance-none bg-slate-100 dark:bg-black/20 text-slate-900 dark:text-white border border-slate-200 dark:border-white/10 rounded-xl pl-4 pr-10 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 min-w-[200px]"
> >
<option value="">All Cohorts</option> <option value="">All Cohorts</option>
{cohorts.map(c => <option key={c.id} value={c.id}>{c.name}</option>)} {cohorts.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
@@ -296,15 +296,15 @@ export default function GradebookPage() {
placeholder="Search students..." placeholder="Search students..."
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
className="w-full bg-black/20 border border-white/10 rounded-xl pl-10 pr-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 text-gray-900 dark:text-white placeholder-gray-600" className="w-full bg-slate-100 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-xl pl-10 pr-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-gray-600"
/> />
</div> </div>
</div> </div>
<div className="flex gap-8 border-l border-white/10 pl-8"> <div className="flex gap-8 border-l border-white/10 pl-8">
<div> <div>
<p className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-1">Students</p> <p className="text-xs font-bold text-slate-500 dark:text-gray-500 uppercase tracking-wider mb-1">Students</p>
<p className="text-2xl font-black">{filteredStudents.length}</p> <p className="text-2xl font-black text-slate-900 dark:text-white">{filteredStudents.length}</p>
</div> </div>
<div> <div>
<p className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-1">Avg Score</p> <p className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-1">Avg Score</p>
web/studio/src/app/courses/[id]/grading/page.tsx
+25 -25
View File
@@ -98,29 +98,29 @@ export default function GradingPolicyPage() {
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
{/* Categories List */} {/* Categories List */}
<div className="lg:col-span-2 space-y-4"> <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"> <h2 className="text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-gray-500 mb-6 flex items-center gap-2">
<Settings className="w-4 h-4" /> Assessment Categories <Settings className="w-4 h-4" /> Assessment Categories
</h2> </h2>
{categories.length === 0 ? ( {categories.length === 0 ? (
<div className="bg-white/5 border border-white/10 rounded-2xl p-12 text-center"> <div className="bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/10 rounded-2xl p-12 text-center">
<TrendingUp className="w-12 h-12 text-gray-600 mx-auto mb-4" /> <TrendingUp className="w-12 h-12 text-slate-400 dark:text-gray-600 mx-auto mb-4" />
<p className="text-gray-400 italic">No grading categories defined yet.</p> <p className="text-slate-500 dark:text-gray-400 italic">No grading categories defined yet.</p>
</div> </div>
) : ( ) : (
categories.map((cat) => ( categories.map((cat) => (
<div <div
key={cat.id} 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" className="group bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/10 p-6 rounded-2xl flex items-center justify-between hover:border-blue-500/50 hover:bg-slate-100 dark:hover:bg-white/[0.07] transition-all duration-300"
> >
<div className="flex items-center gap-4"> <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"> <div className="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center text-blue-600 dark:text-blue-400 font-bold group-hover:scale-110 transition-transform">
{cat.weight}% {cat.weight}%
</div> </div>
<div> <div>
<h3 className="text-lg font-semibold text-gray-100">{cat.name}</h3> <h3 className="text-lg font-semibold text-slate-900 dark:text-white">{cat.name}</h3>
<div className="flex items-center gap-2 mt-1"> <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"> <span className="text-xs text-slate-500 dark:text-gray-500 bg-slate-100 dark:bg-white/5 px-2 py-0.5 rounded-full capitalize">
Weight: {cat.weight}% Weight: {cat.weight}%
</span> </span>
</div> </div>
@@ -128,7 +128,7 @@ export default function GradingPolicyPage() {
</div> </div>
<button <button
onClick={() => handleDelete(cat.id)} 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-gray-900 dark:text-white transition-all duration-300" className="p-3 bg-red-500/10 text-red-500 dark: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" /> <Trash2 className="w-5 h-5" />
</button> </button>
@@ -139,45 +139,45 @@ export default function GradingPolicyPage() {
{/* Add New Category Form */} {/* Add New Category Form */}
<div className="space-y-6"> <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"> <div className="bg-slate-50 dark:bg-gradient-to-br dark:from-gray-800/50 dark:to-gray-900/50 p-8 rounded-3xl border border-slate-200 dark:border-white/10 sticky top-8">
<h2 className="text-xl font-bold mb-6 flex items-center gap-2"> <h2 className="text-xl font-bold mb-6 flex items-center gap-2 text-slate-900 dark:text-white">
<Plus className="w-5 h-5 text-blue-400" /> New Format <Plus className="w-5 h-5 text-blue-500 dark:text-blue-400" /> New Format
</h2> </h2>
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<label className="text-xs font-semibold text-gray-400 uppercase tracking-widest ml-1">Assessment Type</label> <label className="text-xs font-semibold text-slate-500 dark:text-gray-400 uppercase tracking-widest ml-1">Assessment Type</label>
<select <select
value={newName} value={newName}
onChange={(e) => setNewName(e.target.value)} 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 appearance-none" className="w-full bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-3 mt-1.5 focus:outline-none focus:border-blue-500 transition-all text-slate-900 dark:text-gray-100 appearance-none"
> >
<option value="" className="bg-white dark:bg-gray-900 text-gray-500">Select a type...</option> <option value="">Select a type...</option>
<option value="Continuous Assessment" className="bg-white dark:bg-gray-900">Continuous Assessment (Min 4)</option> <option value="Continuous Assessment">Continuous Assessment (Min 4)</option>
<option value="Midterm" className="bg-white dark:bg-gray-900">Midterm</option> <option value="Midterm">Midterm</option>
<option value="Final Test" className="bg-white dark:bg-gray-900">Final Test</option> <option value="Final Test">Final Test</option>
<option value="Exam" className="bg-white dark:bg-gray-900">Exam</option> <option value="Exam">Exam</option>
</select> </select>
</div> </div>
<div> <div>
<label className="text-xs font-semibold text-gray-400 uppercase tracking-widest ml-1">Weight (%)</label> <label className="text-xs font-semibold text-slate-500 dark:text-gray-400 uppercase tracking-widest ml-1">Weight (%)</label>
<div className="relative mt-1.5"> <div className="relative mt-1.5">
<input <input
type="number" type="number"
placeholder="20" placeholder="20"
value={newWeight || ""} value={newWeight || ""}
onChange={(e) => setNewWeight(parseInt(e.target.value) || 0)} 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" className="w-full bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-blue-500 transition-all text-slate-900 dark:text-gray-100 pl-10"
/> />
<Percent className="w-4 h-4 text-gray-500 absolute left-4 top-1/2 -translate-y-1/2" /> <Percent className="w-4 h-4 text-slate-400 dark:text-gray-500 absolute left-4 top-1/2 -translate-y-1/2" />
</div> </div>
</div> </div>
<button <button
onClick={handleAdd} onClick={handleAdd}
disabled={submitting || !newName || newWeight <= 0} disabled={submitting || !newName || newWeight <= 0}
className="w-full bg-blue-600 hover:bg-blue-500 disabled:bg-gray-700 disabled:text-gray-500 text-gray-900 dark: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" className="w-full bg-blue-600 hover:bg-blue-500 disabled:bg-slate-200 dark:disabled:bg-gray-700 disabled:text-slate-400 dark: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..." : ( {submitting ? "Adding..." : (
<> <>
@@ -189,8 +189,8 @@ export default function GradingPolicyPage() {
{!isBalanced && ( {!isBalanced && (
<div className="mt-6 p-4 rounded-xl bg-amber-500/10 border border-amber-500/20 flex gap-3"> <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" /> <AlertCircle className="w-5 h-5 text-amber-600 dark:text-amber-500 shrink-0 mt-0.5" />
<p className="text-sm text-amber-200/80 leading-relaxed"> <p className="text-sm text-amber-800 dark: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> The total weight of all categories must be exactly 100% for the course to be valid for certification. Currently: <strong>{totalWeight}%</strong>
</p> </p>
</div> </div>
web/studio/src/app/courses/[id]/lessons/[lessonId]/page.tsx
+86 -88
View File
@@ -366,11 +366,11 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
return ( return (
<div className="max-w-4xl mx-auto space-y-12 pb-40 px-4"> <div className="max-w-4xl mx-auto space-y-12 pb-40 px-4">
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 border-b border-white/5 pb-8"> <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 border-b border-slate-200 dark:border-white/5 pb-8">
<div className="space-y-1"> <div className="space-y-1">
<div className="flex items-center gap-2 text-[10px] text-blue-500 font-bold uppercase tracking-[0.2em]"> <div className="flex items-center gap-2 text-[10px] text-blue-600 dark:text-blue-500 font-bold uppercase tracking-[0.2em]">
<Link href={`/courses/${params.id}`} className="hover:text-gray-900 dark:text-white transition-colors">Outline</Link> <Link href={`/courses/${params.id}`} className="hover:text-slate-900 dark:text-white transition-colors">Outline</Link>
<span className="text-gray-700">/</span> <span className="text-slate-300 dark:text-gray-700">/</span>
<span>Activity</span> <span>Activity</span>
</div> </div>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
@@ -388,10 +388,10 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
</div> </div>
) : ( ) : (
<div className="flex items-center gap-4 group"> <div className="flex items-center gap-4 group">
<h2 className="text-4xl font-black tracking-tight">{lesson.title}</h2> <h2 className="text-4xl font-black tracking-tight text-slate-900 dark:text-white">{lesson.title}</h2>
<button <button
onClick={() => { setEditingId('lesson-title'); setEditValue(lesson.title); }} onClick={() => { setEditingId('lesson-title'); setEditValue(lesson.title); }}
className="opacity-0 group-hover:opacity-100 text-gray-500 hover:text-gray-900 dark:text-white transition-opacity" className="opacity-0 group-hover:opacity-100 text-slate-400 hover:text-slate-900 dark:text-white transition-opacity"
> >
<Pencil className="w-5 h-5" /> <Pencil className="w-5 h-5" />
</button> </button>
@@ -403,13 +403,13 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
{editMode ? ( {editMode ? (
<> <>
<button onClick={() => setEditMode(false)} className="px-6 py-2.5 glass text-xs font-bold uppercase tracking-widest hover:bg-white/5 transition-all">Discard</button> <button onClick={() => setEditMode(false)} className="px-6 py-2.5 glass text-xs font-bold uppercase tracking-widest hover:bg-slate-50 dark:hover:bg-white/5 transition-all text-slate-600 dark:text-white">Discard</button>
<button onClick={handleSave} disabled={isSaving} className="btn-premium px-8 py-2.5 min-w-[140px] text-xs font-bold uppercase tracking-widest shadow-blue-500/20 shadow-lg"> <button onClick={handleSave} disabled={isSaving} className="btn-premium px-8 py-2.5 min-w-[140px] text-xs font-bold uppercase tracking-widest text-white">
{isSaving ? "Saving..." : "Publish Changes"} {isSaving ? "Saving..." : "Publish Changes"}
</button> </button>
</> </>
) : ( ) : (
<button onClick={() => setEditMode(true)} className="px-8 py-3 glass text-xs font-bold uppercase tracking-widest hover:border-blue-500/50 transition-all flex items-center gap-2 group"> <button onClick={() => setEditMode(true)} className="px-8 py-3 glass text-xs font-bold uppercase tracking-widest hover:border-blue-500/50 transition-all flex items-center gap-2 group text-slate-700 dark:text-white">
<span className="group-hover:rotate-12 transition-transform">✏️</span> Edit Activity <span className="group-hover:rotate-12 transition-transform">✏️</span> Edit Activity
</button> </button>
)} )}
@@ -417,13 +417,13 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
</div> </div>
{editMode && ( {editMode && (
<div className="bg-white/5 border border-white/10 rounded-3xl p-8 space-y-6 animate-in fade-in slide-in-from-top-4 duration-500"> <div className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl p-8 space-y-6 animate-in fade-in slide-in-from-top-4 duration-500">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<h3 className="text-xl font-bold flex items-center gap-2"> <h3 className="text-xl font-bold flex items-center gap-2 text-slate-900 dark:text-white">
<span className="text-blue-500">⚖️</span> Grading Configuration <span className="text-blue-500">⚖️</span> Grading Configuration
</h3> </h3>
<p className="text-sm text-gray-500 mt-1">Determine if this activity contributes to the final grade</p> <p className="text-sm text-slate-500 dark:text-gray-500 mt-1">Determine if this activity contributes to the final grade</p>
</div> </div>
<label className="relative inline-flex items-center cursor-pointer group"> <label className="relative inline-flex items-center cursor-pointer group">
<input <input
@@ -432,19 +432,19 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
onChange={(e) => setIsGraded(e.target.checked)} onChange={(e) => setIsGraded(e.target.checked)}
className="sr-only peer" className="sr-only peer"
/> />
<div className="w-14 h-8 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:start-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-blue-600 group-hover:after:scale-110 transition-all"></div> <div className="w-14 h-8 bg-slate-200 dark:bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:start-[4px] after:bg-white after:border-slate-300 dark:after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-blue-600 group-hover:after:scale-110 transition-all shadow-sm"></div>
<span className="ms-3 text-sm font-bold uppercase tracking-widest text-gray-400 peer-checked:text-blue-400 transition-colors"> <span className="ms-3 text-sm font-bold uppercase tracking-widest text-slate-400 dark:text-gray-400 peer-checked:text-blue-600 dark:peer-checked:text-blue-400 transition-colors">
{isGraded ? "Graded" : "Not Graded"} {isGraded ? "Graded" : "Not Graded"}
</span> </span>
</label> </label>
</div> </div>
<div className="flex items-center justify-between pt-6 border-t border-white/5"> <div className="flex items-center justify-between pt-6 border-t border-slate-200 dark:border-white/5">
<div> <div>
<h3 className="text-xl font-bold flex items-center gap-2"> <h3 className="text-xl font-bold flex items-center gap-2 text-slate-900 dark:text-white">
<span className="text-blue-500">🔓</span> Course Preview <span className="text-blue-500">🔓</span> Course Preview
</h3> </h3>
<p className="text-sm text-gray-500 mt-1">Allow students to view this lesson without being enrolled</p> <p className="text-sm text-slate-500 dark:text-gray-500 mt-1">Allow students to view this lesson without being enrolled</p>
</div> </div>
<label className="relative inline-flex items-center cursor-pointer group"> <label className="relative inline-flex items-center cursor-pointer group">
<input <input
@@ -453,8 +453,8 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
onChange={(e) => setIsPreviewable(e.target.checked)} onChange={(e) => setIsPreviewable(e.target.checked)}
className="sr-only peer" className="sr-only peer"
/> />
<div className="w-14 h-8 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:start-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-blue-600 group-hover:after:scale-110 transition-all"></div> <div className="w-14 h-8 bg-slate-200 dark:bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:start-[4px] after:bg-white after:border-slate-300 dark:after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-blue-600 group-hover:after:scale-110 transition-all shadow-sm"></div>
<span className="ms-3 text-sm font-bold uppercase tracking-widest text-gray-400 peer-checked:text-blue-400 transition-colors"> <span className="ms-3 text-sm font-bold uppercase tracking-widest text-slate-400 dark:text-gray-400 peer-checked:text-blue-600 dark:peer-checked:text-blue-400 transition-colors">
{isPreviewable ? "Preview Enabled" : "Preview Disabled"} {isPreviewable ? "Preview Enabled" : "Preview Disabled"}
</span> </span>
</label> </label>
@@ -464,44 +464,44 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
<> <>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8"> <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div className="space-y-4"> <div className="space-y-4">
<span className="text-[10px] font-black uppercase tracking-widest text-gray-500 mb-2 block">Assessment Category</span> <span className="text-[10px] font-black uppercase tracking-widest text-slate-500 dark:text-gray-500 mb-2 block">Assessment Category</span>
<select <select
value={selectedCategoryId} value={selectedCategoryId}
onChange={(e) => setSelectedCategoryId(e.target.value)} 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" className="w-full bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-blue-500 transition-all appearance-none font-bold text-slate-900 dark:text-white"
> >
<option value="" className="bg-gray-900 border-0">Select Category...</option> <option value="">Select Category...</option>
{gradingCategories.map((cat) => ( {gradingCategories.map((cat) => (
<option key={cat.id} value={cat.id} className="bg-gray-900 border-0"> <option key={cat.id} value={cat.id}>
{cat.name} ({cat.weight}%) {cat.name} ({cat.weight}%)
</option> </option>
))} ))}
</select> </select>
<div className="text-[10px] text-gray-500 italic mt-1 pl-1"> <div className="text-[10px] text-slate-500 dark: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> Manage categories in <Link href={`/courses/${params.id}/grading`} className="text-blue-600 dark:text-blue-400 hover:underline">Grading Policy</Link>
</div> </div>
</div> </div>
<div className="space-y-4"> <div className="space-y-4">
<span className="text-[10px] font-black uppercase tracking-widest text-gray-500 mb-2 block">Rubric (Optional)</span> <span className="text-[10px] font-black uppercase tracking-widest text-slate-500 dark: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"> <div className="bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl p-4 max-h-48 overflow-y-auto space-y-2">
{courseRubrics.length === 0 ? ( {courseRubrics.length === 0 ? (
<p className="text-xs text-gray-500 italic p-2 text-center">No rubrics found in this course.</p> <p className="text-xs text-slate-400 dark:text-gray-500 italic p-2 text-center">No rubrics found in this course.</p>
) : ( ) : (
courseRubrics.map(rubric => { courseRubrics.map(rubric => {
const isAssigned = assignedRubricIds.includes(rubric.id); const isAssigned = assignedRubricIds.includes(rubric.id);
return ( return (
<label key={rubric.id} className="flex items-center justify-between p-2 rounded-lg hover:bg-white/5 transition-all cursor-pointer group"> <label key={rubric.id} className="flex items-center justify-between p-2 rounded-lg hover:bg-slate-200 dark:hover:bg-white/5 transition-all cursor-pointer group">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<input <input
type="checkbox" type="checkbox"
checked={isAssigned} checked={isAssigned}
onChange={() => toggleRubric(rubric.id, 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" className="w-4 h-4 rounded border-slate-300 dark:border-gray-700 bg-slate-100 dark: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> <span className="text-sm font-medium text-slate-600 dark:text-gray-200 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">{rubric.name}</span>
</div> </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> <span className="text-[10px] font-bold text-slate-500 bg-slate-200 dark:bg-white/5 px-1.5 py-0.5 rounded">{rubric.total_points} pts</span>
</label> </label>
); );
}) })
@@ -516,22 +516,22 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 pt-6 border-t border-white/5 animate-in fade-in duration-500"> <div className="grid grid-cols-1 md:grid-cols-2 gap-8 pt-6 border-t border-white/5 animate-in fade-in duration-500">
<div className="space-y-4"> <div className="space-y-4">
<label className="block"> <label className="block">
<span className="text-[10px] font-black uppercase tracking-widest text-gray-500 mb-2 block">Maximum Attempts</span> <span className="text-[10px] font-black uppercase tracking-widest text-slate-500 dark:text-gray-500 mb-2 block">Maximum Attempts</span>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<input <input
type="number" type="number"
value={maxAttempts || ""} value={maxAttempts || ""}
onChange={(e) => setMaxAttempts(e.target.value ? parseInt(e.target.value) : null)} onChange={(e) => setMaxAttempts(e.target.value ? parseInt(e.target.value) : null)}
placeholder="Unlimited" placeholder="Unlimited"
className="bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-blue-500 transition-all w-32" className="bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-blue-500 transition-all w-32 text-slate-900 dark:text-white"
/> />
<span className="text-xs text-gray-500">Leave empty for unlimited</span> <span className="text-xs text-slate-500 dark:text-gray-500">Leave empty for unlimited</span>
</div> </div>
</label> </label>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<span className="text-[10px] font-black uppercase tracking-widest text-gray-500 block mb-2">After Submission</span> <span className="text-[10px] font-black uppercase tracking-widest text-slate-500 dark:text-gray-500 block mb-2">After Submission</span>
<label className="flex items-center gap-3 cursor-pointer group relative"> <label className="flex items-center gap-3 cursor-pointer group relative">
<input <input
type="checkbox" type="checkbox"
@@ -539,54 +539,54 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
onChange={(e) => setAllowRetry(e.target.checked)} onChange={(e) => setAllowRetry(e.target.checked)}
className="sr-only peer" className="sr-only peer"
/> />
<div className="w-10 h-6 bg-gray-700 rounded-full peer peer-checked:bg-blue-600 after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-4"></div> <div className="w-10 h-6 bg-slate-200 dark:bg-gray-700 rounded-full peer peer-checked:bg-blue-600 after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-4 shadow-sm"></div>
<span className="text-sm font-bold text-gray-400 peer-checked:text-gray-900 dark:text-white transition-colors">Allow Instant Corrections</span> <span className="text-sm font-bold text-slate-400 dark:text-gray-400 peer-checked:text-slate-900 dark:peer-checked:text-white transition-colors">Allow Instant Corrections</span>
</label> </label>
<p className="text-[10px] text-gray-600 italic">Enables &quot;Check Answer&quot; buttons for individual blocks</p> <p className="text-[10px] text-slate-500 dark:text-gray-600 italic">Enables &quot;Check Answer&quot; buttons for individual blocks</p>
</div> </div>
</div> </div>
<div className="pt-8 border-t border-white/5 animate-in fade-in duration-500 delay-150"> <div className="pt-8 border-t border-slate-200 dark: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"> <div className="flex items-center gap-2 mb-6 uppercase tracking-[0.2em] text-[10px] font-black text-slate-400 dark:text-gray-500">
<span className="w-1.5 h-1.5 rounded-full bg-blue-500 shadow-lg shadow-blue-500/50"></span> <span className="w-1.5 h-1.5 rounded-full bg-blue-600 dark:bg-blue-500 shadow-lg shadow-blue-500/50"></span>
Access & Prerequisites Access & Prerequisites
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8"> <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div className="space-y-4"> <div className="space-y-4">
<h4 className="text-sm font-bold text-gray-200">Prerequisites</h4> <h4 className="text-sm font-bold text-slate-900 dark:text-gray-200">Prerequisites</h4>
<p className="text-xs text-gray-500 leading-relaxed"> <p className="text-xs text-slate-500 dark:text-gray-500 leading-relaxed">
Students must complete these lessons before they can access this one. Students must complete these lessons before they can access this one.
</p> </p>
<div className="bg-white/5 border border-white/10 rounded-2xl p-4 max-h-60 overflow-y-auto space-y-2"> <div className="bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl p-4 max-h-60 overflow-y-auto space-y-2">
{allLessons.length === 0 ? ( {allLessons.length === 0 ? (
<p className="text-xs text-gray-500 italic p-4 text-center">No other lessons available.</p> <p className="text-xs text-slate-500 dark:text-gray-500 italic p-4 text-center">No other lessons available.</p>
) : ( ) : (
allLessons.map(l => { allLessons.map(l => {
const dep = dependencies.find(d => d.prerequisite_lesson_id === l.id); const dep = dependencies.find(d => d.prerequisite_lesson_id === l.id);
const isAssigned = !!dep; const isAssigned = !!dep;
return ( 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"> <div key={l.id} className="space-y-2 p-2 rounded-xl hover:bg-slate-200 dark:hover:bg-white/5 transition-all group border border-transparent hover:border-slate-300 dark:hover:border-white/10">
<label className="flex items-center justify-between cursor-pointer"> <label className="flex items-center justify-between cursor-pointer">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<input <input
type="checkbox" type="checkbox"
checked={isAssigned} checked={isAssigned}
onChange={() => toggleDependency(l.id, 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" className="w-4 h-4 rounded-md border-slate-300 dark:border-gray-700 bg-slate-100 dark: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'}`}> <span className={`text-sm font-medium transition-colors ${isAssigned ? 'text-blue-600 dark:text-blue-400' : 'text-slate-500 dark:text-gray-400 group-hover:text-slate-900 dark:group-hover:text-gray-200'}`}>
{l.title} {l.title}
</span> </span>
</div> </div>
{l.is_graded && ( {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> <span className="text-[9px] font-black uppercase tracking-tighter px-2 py-0.5 bg-blue-500/10 text-blue-600 dark:text-blue-400 rounded-full border border-blue-500/20">Graded</span>
)} )}
</label> </label>
{isAssigned && l.is_graded && ( {isAssigned && l.is_graded && (
<div className="pl-7 animate-in slide-in-from-left-2 duration-300"> <div className="pl-7 animate-in slide-in-from-left-2 duration-300">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<span className="text-[10px] text-gray-500 font-bold uppercase tracking-widest whitespace-nowrap">Min. Score %</span> <span className="text-[10px] text-slate-500 dark:text-gray-500 font-bold uppercase tracking-widest whitespace-nowrap">Min. Score %</span>
<input <input
type="number" type="number"
min="0" min="0"
@@ -604,7 +604,7 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
console.error("Failed to update min score", 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" className="w-16 bg-slate-100 dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-lg px-2 py-1 text-xs text-blue-600 dark:text-blue-400 font-bold focus:outline-none focus:border-blue-500"
/> />
</div> </div>
</div> </div>
@@ -616,26 +616,25 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
</div> </div>
</div> </div>
<div className="flex flex-col justify-center gap-4 px-6 border-l border-white/5"> <div className="flex flex-col justify-center gap-4 px-6 border-l border-slate-100 dark: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="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"> <div className="p-2 rounded-xl bg-indigo-500/20">
<Layout className="w-5 h-5 text-indigo-400" /> <Layout className="w-5 h-5 text-indigo-500 dark:text-indigo-400" />
</div> </div>
<div> <div>
<h5 className="text-sm font-bold text-indigo-300">Intelligent Sequences</h5> <h5 className="text-sm font-bold text-indigo-600 dark:text-indigo-300">Intelligent Sequences</h5>
<p className="text-[11px] text-indigo-300/60 leading-relaxed mt-1"> <p className="text-[11px] text-indigo-500 dark: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. Locked lessons will be visible in the student outline with a lock icon 🔒 until they meet all prerequisites.
</p> </p>
</div> </div>
</div> </div>
<div className="flex items-start gap-4 p-4 rounded-2xl bg-blue-500/5 border border-blue-500/10"> <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"> <div className="p-2 rounded-xl bg-blue-500/20">
<CheckCircle2 className="w-5 h-5 text-blue-400" /> <CheckCircle2 className="w-5 h-5 text-blue-600 dark:text-blue-400" />
</div> </div>
<div> <div>
<h5 className="text-sm font-bold text-blue-300">Completion Tracking</h5> <h5 className="text-sm font-bold text-blue-600 dark:text-blue-300">Completion Tracking</h5>
<p className="text-[11px] text-blue-300/60 leading-relaxed mt-1"> <p className="text-[11px] text-blue-500 dark: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. If a minimum score is set, students must pass the prerequisite before the next lesson is unlocked.
</p> </p>
</div> </div>
@@ -645,45 +644,45 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
</div> </div>
</> </>
)} )}
</div > </div>
)} )}
{ {
editMode && ( editMode && (
<div className="bg-white/5 border border-white/10 rounded-3xl p-8 space-y-6 animate-in fade-in slide-in-from-top-4 duration-500"> <div className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl p-8 space-y-6 animate-in fade-in slide-in-from-top-4 duration-500">
<div> <div>
<h3 className="text-xl font-bold flex items-center gap-2"> <h3 className="text-xl font-bold flex items-center gap-2 text-slate-900 dark:text-white">
<span className="text-blue-500">📅</span> Scheduling & Deadlines <span className="text-blue-500">📅</span> Scheduling & Deadlines
</h3> </h3>
<p className="text-sm text-gray-500 mt-1">Set deadlines and mark important dates for this activity</p> <p className="text-sm text-slate-500 dark:text-gray-500 mt-1">Set deadlines and mark important dates for this activity</p>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8"> <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div className="space-y-4"> <div className="space-y-4">
<label className="block"> <label className="block">
<span className="text-[10px] font-black uppercase tracking-widest text-gray-500 mb-2 block">Due Date</span> <span className="text-[10px] font-black uppercase tracking-widest text-slate-500 dark:text-gray-500 mb-2 block">Due Date</span>
<input <input
type="date" type="date"
value={dueDate} value={dueDate}
onChange={(e) => setDueDate(e.target.value)} onChange={(e) => setDueDate(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 font-bold" className="w-full bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-blue-500 transition-all font-bold text-slate-900 dark:text-white"
/> />
</label> </label>
</div> </div>
<div className="space-y-4"> <div className="space-y-4">
<label className="block"> <label className="block">
<span className="text-[10px] font-black uppercase tracking-widest text-gray-500 mb-2 block">Date Type</span> <span className="text-[10px] font-black uppercase tracking-widest text-slate-500 dark:text-gray-500 mb-2 block">Date Type</span>
<select <select
value={importantDateType} value={importantDateType}
onChange={(e) => setImportantDateType(e.target.value)} onChange={(e) => setImportantDateType(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" className="w-full bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-blue-500 transition-all appearance-none font-bold text-slate-900 dark:text-white"
> >
<option value="" className="bg-gray-900">Standard Activity</option> <option value="">Standard Activity</option>
<option value="exam" className="bg-gray-900">Exam</option> <option value="exam">Exam</option>
<option value="assignment" className="bg-gray-900">Assignment</option> <option value="assignment">Assignment</option>
<option value="milestone" className="bg-gray-900">Milestone</option> <option value="milestone">Milestone</option>
<option value="live-session" className="bg-gray-900">Live Session</option> <option value="live-session">Live Session</option>
</select> </select>
</label> </label>
</div> </div>
@@ -695,21 +694,20 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
{/* AI Magic Section */} {/* AI Magic Section */}
{ {
editMode && ( editMode && (
<div className="bg-white/5 border border-white/10 rounded-3xl p-8 space-y-6 animate-in fade-in slide-in-from-top-4 duration-500"> <div className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl p-8 space-y-6 animate-in fade-in slide-in-from-top-4 duration-500">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<span className="text-2xl">🪄</span> <span className="text-2xl">🪄</span>
<div> <div>
<h3 className="text-xl font-bold italic tracking-tight">AI Content Assistant</h3> <h3 className="text-xl font-bold italic tracking-tight text-slate-900 dark:text-white">AI Content Assistant</h3>
<p className="text-xs text-gray-400 mt-1 uppercase tracking-widest font-bold">Automate your content creation with Local AI</p> <p className="text-xs text-slate-500 dark:text-gray-400 mt-1 uppercase tracking-widest font-bold">Automate your content creation with Local AI</p>
</div> </div>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<button <button
onClick={handleSummarize} onClick={handleSummarize}
disabled={isGeneratingSummary} disabled={isGeneratingSummary}
className={`p-6 rounded-2xl border transition-all text-left flex flex-col gap-2 ${isGeneratingSummary ? 'bg-indigo-500/20 border-indigo-500/50 text-indigo-300 animate-pulse' : summary ? 'bg-green-500/10 border-green-500/30 text-green-400' : 'bg-indigo-500/10 border-indigo-500/30 text-indigo-400 hover:border-indigo-500/60'}`} className={`p-6 rounded-2xl border transition-all text-left flex flex-col gap-2 shadow-sm ${isGeneratingSummary ? 'bg-indigo-500/20 border-indigo-500/50 text-indigo-600 dark:text-indigo-300 animate-pulse' : summary ? 'bg-green-500/10 border-green-500/30 text-green-600 dark:text-green-400' : 'bg-indigo-500/10 border-indigo-500/30 text-indigo-600 dark:text-indigo-400 hover:border-indigo-500/60'}`}
> >
<span className="text-xl">{isGeneratingSummary ? '⏳' : '✍️'}</span> <span className="text-xl">{isGeneratingSummary ? '⏳' : '✍️'}</span>
<div className="text-[10px] font-black uppercase tracking-widest opacity-80">Summarization</div> <div className="text-[10px] font-black uppercase tracking-widest opacity-80">Summarization</div>
@@ -719,7 +717,7 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
<button <button
onClick={handleGenerateQuiz} onClick={handleGenerateQuiz}
disabled={isGeneratingQuiz} disabled={isGeneratingQuiz}
className={`p-6 border rounded-2xl transition-all text-left flex flex-col gap-2 ${isGeneratingQuiz ? 'bg-purple-500/20 border-purple-500/50 text-purple-300 animate-pulse' : 'bg-purple-500/10 border-purple-500/30 hover:border-purple-500/60 text-purple-400'}`} className={`p-6 border rounded-2xl transition-all text-left flex flex-col gap-2 shadow-sm ${isGeneratingQuiz ? 'bg-purple-500/20 border-purple-500/50 text-purple-600 dark:text-purple-300 animate-pulse' : 'bg-purple-500/10 border-purple-500/30 hover:border-purple-500/60 text-purple-600 dark:text-purple-400'}`}
> >
<span className="text-xl">{isGeneratingQuiz ? '⏳' : '💡'}</span> <span className="text-xl">{isGeneratingQuiz ? '⏳' : '💡'}</span>
<div className="text-[10px] font-black uppercase tracking-widest opacity-80">Assessments</div> <div className="text-[10px] font-black uppercase tracking-widest opacity-80">Assessments</div>
@@ -738,8 +736,8 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<span className="text-2xl">✨</span> <span className="text-2xl">✨</span>
<div> <div>
<h3 className="text-xl font-bold font-black italic tracking-tight">AI Lesson Summary</h3> <h3 className="text-xl font-bold font-black italic tracking-tight text-slate-900 dark:text-white">AI Lesson Summary</h3>
<p className="text-xs text-gray-400 mt-1 uppercase tracking-widest font-bold">Key insights generated from content</p> <p className="text-xs text-slate-500 dark:text-gray-400 mt-1 uppercase tracking-widest font-bold">Key insights generated from content</p>
</div> </div>
</div> </div>
</div> </div>
@@ -749,10 +747,10 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
value={summary} value={summary}
onChange={(e) => setSummary(e.target.value)} onChange={(e) => setSummary(e.target.value)}
placeholder="A concise summary of the lesson content..." placeholder="A concise summary of the lesson content..."
className="w-full bg-white/5 border border-white/10 rounded-2xl p-6 text-sm text-gray-300 focus:outline-none focus:border-blue-500/50 min-h-[120px] transition-all" className="w-full bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl p-6 text-sm text-slate-700 dark:text-gray-300 focus:outline-none focus:border-blue-500/50 min-h-[120px] transition-all"
/> />
) : ( ) : (
<div className="text-sm text-gray-400 leading-relaxed italic border-l-2 border-indigo-500/30 pl-6 py-2"> <div className="text-sm text-slate-600 dark:text-gray-400 leading-relaxed italic border-l-2 border-indigo-500/30 pl-6 py-2">
&quot;{summary}&quot; &quot;{summary}&quot;
</div> </div>
)} )}
@@ -765,11 +763,11 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
<div key={block.id} className="relative group/block animate-in fade-in slide-in-from-bottom-4 duration-500" style={{ animationDelay: `${index * 100}ms` }}> <div key={block.id} className="relative group/block animate-in fade-in slide-in-from-bottom-4 duration-500" style={{ animationDelay: `${index * 100}ms` }}>
{editMode && ( {editMode && (
<div className="absolute -left-16 top-0 h-full flex flex-col items-center gap-2 opacity-100 transition-all"> <div className="absolute -left-16 top-0 h-full flex flex-col items-center gap-2 opacity-100 transition-all">
<span className="text-[10px] font-black text-gray-700 uppercase vertical-text mb-2">Move</span> <span className="text-[10px] font-black text-slate-300 dark:text-gray-700 uppercase vertical-text mb-2">Move</span>
<button <button
onClick={() => moveBlock(index, 'up')} onClick={() => moveBlock(index, 'up')}
disabled={index === 0} disabled={index === 0}
className="w-10 h-10 rounded-xl bg-white/5 text-gray-400 flex items-center justify-center hover:bg-blue-500 hover:text-gray-900 dark:text-white transition-all border border-white/10 disabled:opacity-20 disabled:cursor-not-allowed group-hover/block:scale-110" className="w-10 h-10 rounded-xl bg-slate-100 dark:bg-white/5 text-slate-400 dark:text-gray-400 flex items-center justify-center hover:bg-blue-600 dark:hover:bg-blue-500 hover:text-white transition-all border border-slate-200 dark:border-white/10 disabled:opacity-20 disabled:cursor-not-allowed group-hover/block:scale-110 shadow-sm"
title="Move Up" title="Move Up"
> >
<ChevronUp className="w-5 h-5" /> <ChevronUp className="w-5 h-5" />
@@ -777,7 +775,7 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
<button <button
onClick={() => moveBlock(index, 'down')} onClick={() => moveBlock(index, 'down')}
disabled={index === blocks.length - 1} disabled={index === blocks.length - 1}
className="w-10 h-10 rounded-xl bg-white/5 text-gray-400 flex items-center justify-center hover:bg-blue-500 hover:text-gray-900 dark:text-white transition-all border border-white/10 disabled:opacity-20 disabled:cursor-not-allowed group-hover/block:scale-110" className="w-10 h-10 rounded-xl bg-slate-100 dark:bg-white/5 text-slate-400 dark:text-gray-400 flex items-center justify-center hover:bg-blue-600 dark:hover:bg-blue-500 hover:text-white transition-all border border-slate-200 dark:border-white/10 disabled:opacity-20 disabled:cursor-not-allowed group-hover/block:scale-110 shadow-sm"
title="Move Down" title="Move Down"
> >
<ChevronDown className="w-5 h-5" /> <ChevronDown className="w-5 h-5" />
@@ -785,14 +783,14 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
<div className="h-4"></div> <div className="h-4"></div>
<button <button
onClick={() => openSaveToLibraryModal(block)} onClick={() => openSaveToLibraryModal(block)}
className="w-10 h-10 rounded-xl bg-emerald-500/10 text-emerald-400 flex items-center justify-center hover:bg-emerald-500 hover:text-gray-900 dark:text-white transition-all border border-emerald-500/20 group-hover/block:scale-110" className="w-10 h-10 rounded-xl bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 flex items-center justify-center hover:bg-emerald-500 hover:text-white transition-all border border-emerald-500/20 group-hover/block:scale-110 shadow-sm"
title="Save to Library" title="Save to Library"
> >
<BookMarked className="w-5 h-5" /> <BookMarked className="w-5 h-5" />
</button> </button>
<button <button
onClick={() => removeBlock(block.id)} onClick={() => removeBlock(block.id)}
className="w-10 h-10 rounded-xl bg-red-500/10 text-red-400 flex items-center justify-center hover:bg-red-500 hover:text-gray-900 dark:text-white transition-all border border-red-500/20 group-hover/block:scale-110" className="w-10 h-10 rounded-xl bg-red-500/10 text-red-600 dark:text-red-400 flex items-center justify-center hover:bg-red-500 hover:text-white transition-all border border-red-500/20 group-hover/block:scale-110 shadow-sm"
title="Remove Block" title="Remove Block"
> >
<Trash2 className="w-5 h-5" /> <Trash2 className="w-5 h-5" />
web/studio/src/app/courses/[id]/page.tsx
+23 -23
View File
@@ -240,7 +240,7 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
alert("Failed to start preview."); alert("Failed to start preview.");
} }
}} }}
className="flex items-center gap-2 px-6 py-2.5 bg-white dark:bg-white/5 hover:bg-black/5 dark:hover:bg-white/10 border border-black/10 dark:border-white/10 rounded-xl text-sm font-bold transition-all active:scale-95" className="flex items-center gap-2 px-6 py-2.5 bg-slate-50 dark:bg-white/5 hover:bg-slate-100 dark:hover:bg-white/10 border border-slate-200 dark:border-white/10 rounded-xl text-sm font-bold transition-all active:scale-95 text-slate-700 dark:text-white shadow-sm"
> >
<PlayCircle size={18} /> Previsualizar <PlayCircle size={18} /> Previsualizar
</button> </button>
@@ -261,26 +261,26 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
> >
<div className="space-y-6"> <div className="space-y-6">
{modules.map((module: FullModule, mIndex: number) => ( {modules.map((module: FullModule, mIndex: number) => (
<div key={module.id} className="glass rounded-xl overflow-hidden border-white/5"> <div key={module.id} className="glass rounded-xl overflow-hidden border-slate-200 dark:border-white/5 shadow-sm">
<div className="bg-white/5 px-6 py-4 flex justify-between items-center border-b border-white/5"> <div className="bg-slate-50 dark:bg-white/5 px-6 py-4 flex justify-between items-center border-b border-slate-200 dark:border-white/5">
<div className="flex items-center gap-4 flex-1"> <div className="flex items-center gap-4 flex-1">
<div className="flex flex-col"> <div className="flex flex-col">
<button <button
onClick={() => handleReorderModule(mIndex, 'up')} onClick={() => handleReorderModule(mIndex, 'up')}
disabled={mIndex === 0} disabled={mIndex === 0}
className="text-gray-500 hover:text-blue-400 disabled:opacity-0 transition-colors" className="text-slate-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 disabled:opacity-0 transition-colors"
> >
<ChevronUp className="w-4 h-4" /> <ChevronUp className="w-4 h-4" />
</button> </button>
<button <button
onClick={() => handleReorderModule(mIndex, 'down')} onClick={() => handleReorderModule(mIndex, 'down')}
disabled={mIndex === modules.length - 1} disabled={mIndex === modules.length - 1}
className="text-gray-500 hover:text-blue-400 disabled:opacity-0 transition-colors" className="text-slate-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 disabled:opacity-0 transition-colors"
> >
<ChevronDown className="w-4 h-4" /> <ChevronDown className="w-4 h-4" />
</button> </button>
</div> </div>
<GripVertical className="text-gray-600 w-5 h-5 cursor-grab active:cursor-grabbing" /> <GripVertical className="text-slate-400 dark:text-gray-600 w-5 h-5 cursor-grab active:cursor-grabbing" />
{editingId === module.id ? ( {editingId === module.id ? (
<div className="flex items-center gap-2 flex-1"> <div className="flex items-center gap-2 flex-1">
@@ -289,7 +289,7 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
value={editValue} value={editValue}
onChange={(e) => setEditValue(e.target.value)} onChange={(e) => setEditValue(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && handleSaveTitle(module.id, 'module')} onKeyDown={(e) => e.key === 'Enter' && handleSaveTitle(module.id, 'module')}
className="bg-black/5 dark:bg-black/40 border border-blue-500/50 rounded px-3 py-1 flex-1 text-gray-900 dark:text-gray-900 dark:text-white focus:outline-none" className="bg-slate-100 dark:bg-black/40 border border-blue-500/50 rounded px-3 py-1 flex-1 text-slate-900 dark:text-white focus:outline-none"
/> />
<button onClick={() => handleSaveTitle(module.id, 'module')} className="text-green-400 hover:text-green-300"> <button onClick={() => handleSaveTitle(module.id, 'module')} className="text-green-400 hover:text-green-300">
<Save className="w-5 h-5" /> <Save className="w-5 h-5" />
@@ -302,13 +302,13 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
<div className="flex items-center gap-3 group flex-1"> <div className="flex items-center gap-3 group flex-1">
<span <span
onClick={() => { setEditingId(module.id); setEditValue(module.title); }} onClick={() => { setEditingId(module.id); setEditValue(module.title); }}
className="font-semibold text-lg text-blue-600 dark:text-blue-400 cursor-pointer hover:text-blue-700 dark:hover:text-blue-300 transition-colors" className="font-bold text-lg text-blue-600 dark:text-blue-400 cursor-pointer hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
> >
{module.title || `Module ${module.position}`} {module.title || `Module ${module.position}`}
</span> </span>
<button <button
onClick={() => { setEditingId(module.id); setEditValue(module.title); }} onClick={() => { setEditingId(module.id); setEditValue(module.title); }}
className="opacity-0 group-hover:opacity-100 text-gray-500 hover:text-gray-900 dark:text-white transition-opacity" className="opacity-0 group-hover:opacity-100 text-slate-400 hover:text-slate-900 dark:text-white transition-opacity"
> >
<Pencil className="w-4 h-4" /> <Pencil className="w-4 h-4" />
</button> </button>
@@ -318,7 +318,7 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<button <button
onClick={() => handleDeleteModule(module.id)} onClick={() => handleDeleteModule(module.id)}
className="text-gray-500 hover:text-red-400 transition-colors" className="text-slate-400 hover:text-red-500 dark:hover:text-red-400 transition-colors"
> >
<Trash2 className="w-4 h-4" /> <Trash2 className="w-4 h-4" />
</button> </button>
@@ -331,14 +331,14 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
<button <button
onClick={() => handleReorderLesson(module.id, lIndex, 'up')} onClick={() => handleReorderLesson(module.id, lIndex, 'up')}
disabled={lIndex === 0} disabled={lIndex === 0}
className="text-gray-500 hover:text-blue-400 disabled:opacity-0" className="text-slate-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 disabled:opacity-0"
> >
<ChevronUp className="w-3 h-3" /> <ChevronUp className="w-3 h-3" />
</button> </button>
<button <button
onClick={() => handleReorderLesson(module.id, lIndex, 'down')} onClick={() => handleReorderLesson(module.id, lIndex, 'down')}
disabled={lIndex === module.lessons.length - 1} disabled={lIndex === module.lessons.length - 1}
className="text-gray-500 hover:text-blue-400 disabled:opacity-0" className="text-slate-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 disabled:opacity-0"
> >
<ChevronDown className="w-3 h-3" /> <ChevronDown className="w-3 h-3" />
</button> </button>
@@ -346,35 +346,35 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
<div className="flex-1"> <div className="flex-1">
{editingId === lesson.id ? ( {editingId === lesson.id ? (
<div className="flex items-center gap-2 glass border-blue-500/30 p-2 rounded-lg bg-black/5 dark:bg-black/20"> <div className="flex items-center gap-2 glass border-blue-500/30 p-2 rounded-lg bg-slate-50 dark:bg-black/20 shadow-inner">
<input <input
autoFocus autoFocus
value={editValue} value={editValue}
onChange={(e) => setEditValue(e.target.value)} onChange={(e) => setEditValue(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && handleSaveTitle(lesson.id, 'lesson')} onKeyDown={(e) => e.key === 'Enter' && handleSaveTitle(lesson.id, 'lesson')}
className="bg-transparent border-none flex-1 text-gray-900 dark:text-gray-900 dark:text-white focus:outline-none" className="bg-transparent border-none flex-1 text-slate-900 dark:text-white focus:outline-none font-medium"
/> />
<button onClick={() => handleSaveTitle(lesson.id, 'lesson')} className="text-green-600 dark:text-green-400"> <button onClick={() => handleSaveTitle(lesson.id, 'lesson')} className="text-green-600 dark:text-green-400">
<Save className="w-4 h-4" /> <Save className="w-4 h-4" />
</button> </button>
<button onClick={() => setEditingId(null)} className="text-gray-500 dark:text-gray-400"> <button onClick={() => setEditingId(null)} className="text-slate-400 dark:text-gray-400">
<X className="w-4 h-4" /> <X className="w-4 h-4" />
</button> </button>
</div> </div>
) : ( ) : (
<div className="flex items-center justify-between glass border-black/5 dark:border-white/5 p-4 rounded-xl hover:bg-black/5 dark:hover:bg-white/10 hover:border-blue-500/30 transition-all cursor-pointer group/lesson"> <div className="flex items-center justify-between glass border-slate-200 dark:border-white/5 p-4 rounded-xl hover:bg-slate-50 dark:hover:bg-white/10 hover:border-blue-500/30 transition-all cursor-pointer group/lesson shadow-sm">
<Link href={`/courses/${params.id}/lessons/${lesson.id}`} className="flex-1 flex items-center gap-4"> <Link href={`/courses/${params.id}/lessons/${lesson.id}`} className="flex-1 flex items-center gap-4">
<div className="p-2 bg-blue-500/10 dark:bg-blue-500/20 rounded-lg text-blue-600 dark:text-blue-400 group-hover/lesson:scale-110 transition-transform"> <div className="p-2 bg-blue-600/10 dark:bg-blue-500/20 rounded-lg text-blue-600 dark:text-blue-400 group-hover/lesson:scale-110 transition-transform">
{lesson.content_type === 'video' ? <PlayCircle className="w-5 h-5" /> : <FileText className="w-5 h-5" />} {lesson.content_type === 'video' ? <PlayCircle className="w-5 h-5" /> : <FileText className="w-5 h-5" />}
</div> </div>
<div className="flex flex-col"> <div className="flex flex-col">
<span <span
onClick={(e) => { e.preventDefault(); e.stopPropagation(); startEditing(lesson.id, lesson.title); }} onClick={(e) => { e.preventDefault(); e.stopPropagation(); startEditing(lesson.id, lesson.title); }}
className="font-medium text-gray-900 dark:text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-colors" className="font-bold text-slate-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
> >
{lesson.title} {lesson.title}
</span> </span>
<div className="flex items-center gap-3 text-xs text-gray-500 uppercase mt-0.5 font-bold"> <div className="flex items-center gap-3 text-xs text-slate-500 dark:text-gray-500 uppercase mt-0.5 font-bold">
<span>{lesson.content_type}</span> <span>{lesson.content_type}</span>
{lesson.due_date && ( {lesson.due_date && (
<div className="flex items-center gap-1 text-orange-600 dark:text-orange-400"> <div className="flex items-center gap-1 text-orange-600 dark:text-orange-400">
@@ -388,13 +388,13 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<button <button
onClick={(e) => { e.preventDefault(); e.stopPropagation(); startEditing(lesson.id, lesson.title); }} onClick={(e) => { e.preventDefault(); e.stopPropagation(); startEditing(lesson.id, lesson.title); }}
className="opacity-0 group-hover/lesson:opacity-100 text-gray-500 hover:text-gray-900 dark:text-white transition-opacity" className="opacity-0 group-hover/lesson:opacity-100 text-slate-400 hover:text-slate-900 dark:text-white transition-opacity"
> >
<Pencil className="w-4 h-4" /> <Pencil className="w-4 h-4" />
</button> </button>
<button <button
onClick={(e) => { e.preventDefault(); e.stopPropagation(); handleDeleteLesson(module.id, lesson.id); }} onClick={(e) => { e.preventDefault(); e.stopPropagation(); handleDeleteLesson(module.id, lesson.id); }}
className="opacity-0 group-hover/lesson:opacity-100 text-gray-500 hover:text-red-400 transition-opacity" className="opacity-0 group-hover/lesson:opacity-100 text-slate-400 hover:text-red-500 dark:hover:text-red-400 transition-opacity"
> >
<Trash2 className="w-4 h-4" /> <Trash2 className="w-4 h-4" />
</button> </button>
@@ -407,7 +407,7 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
<button <button
onClick={() => handleAddLesson(module.id)} onClick={() => handleAddLesson(module.id)}
className="w-full py-3 border border-dashed border-black/10 dark:border-white/10 rounded-xl text-sm text-gray-500 hover:text-gray-900 dark:hover:text-gray-900 dark:text-white hover:border-black/20 dark:hover:border-white/20 hover:bg-black/5 dark:hover:bg-white/5 transition-all mt-3 flex items-center justify-center gap-2" className="w-full py-3 border border-dashed border-slate-300 dark:border-white/10 rounded-xl text-sm text-slate-500 dark:text-gray-400 hover:text-slate-900 dark:hover:text-white hover:border-blue-500/50 hover:bg-slate-50 dark:hover:bg-white/5 transition-all mt-3 flex items-center justify-center gap-2 font-bold"
> >
<Plus className="w-4 h-4" /> New Lesson <Plus className="w-4 h-4" /> New Lesson
</button> </button>
@@ -417,7 +417,7 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
<button <button
onClick={handleAddModule} onClick={handleAddModule}
className="w-full py-6 border-2 border-dashed border-black/10 dark:border-white/10 rounded-2xl font-medium text-gray-500 hover:text-gray-900 dark:hover:text-gray-900 dark:text-white hover:border-black/20 dark:hover:border-white/20 hover:bg-black/5 dark:hover:bg-white/5 transition-all flex items-center justify-center gap-3 text-lg" className="w-full py-6 border-2 border-dashed border-slate-300 dark:border-white/10 rounded-2xl font-bold text-slate-500 dark:text-gray-400 hover:text-slate-900 dark:hover:text-white hover:border-blue-500/50 hover:bg-slate-50 dark:hover:bg-white/5 transition-all flex items-center justify-center gap-3 text-lg"
> >
<Plus className="w-6 h-6" /> Add New Module <Plus className="w-6 h-6" /> Add New Module
</button> </button>
web/studio/src/app/courses/[id]/settings/TeamManagementSection.tsx
+16 -16
View File
@@ -72,40 +72,40 @@ export default function TeamManagementSection({ courseId }: TeamManagementSectio
} }
return ( return (
<section className="bg-white/5 border border-white/10 rounded-3xl p-8 space-y-8"> <section className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl p-8 space-y-8 shadow-sm">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-12 h-12 rounded-2xl bg-blue-500/10 flex items-center justify-center text-blue-400"> <div className="w-12 h-12 rounded-2xl bg-blue-600/10 flex items-center justify-center text-blue-600 dark:text-blue-400">
<Users size={24} /> <Users size={24} />
</div> </div>
<div> <div>
<h2 className="section-title">Equipo del Curso</h2> <h2 className="section-title">Equipo del Curso</h2>
<p className="text-sm text-gray-400">Gestiona los instructores y asistentes de este curso</p> <p className="text-sm text-slate-500 dark:text-gray-400">Gestiona los instructores y asistentes de este curso</p>
</div> </div>
</div> </div>
</div> </div>
{/* Add Member Form */} {/* Add Member Form */}
<form onSubmit={handleAddMember} className="bg-white/5 border border-white/10 rounded-2xl p-6"> <form onSubmit={handleAddMember} className="bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl p-6 shadow-sm">
<h3 className="text-sm font-bold text-gray-300 mb-4 flex items-center gap-2"> <h3 className="text-sm font-black text-slate-900 dark:text-gray-300 mb-4 flex items-center gap-2 uppercase tracking-wider">
<UserPlus size={16} /> Add Team Member <UserPlus size={16} className="text-blue-600 dark:text-blue-400" /> Add Team Member
</h3> </h3>
<div className="flex flex-col md:flex-row gap-4"> <div className="flex flex-col md:flex-row gap-4">
<div className="flex-1 relative"> <div className="flex-1 relative">
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" /> <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 dark:text-gray-500" />
<input <input
type="email" type="email"
value={email} value={email}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
placeholder="instructor@example.com" placeholder="instructor@example.com"
className="w-full bg-black/30 border border-white/10 rounded-xl py-2 pl-10 pr-4 text-sm focus:outline-none focus:border-blue-500 transition-colors" className="w-full bg-slate-50 dark:bg-black/30 border border-slate-200 dark:border-white/10 rounded-xl py-2 pl-10 pr-4 text-sm focus:outline-none focus:border-blue-500 transition-colors text-slate-900 dark:text-white"
required required
/> />
</div> </div>
<select <select
value={role} value={role}
onChange={(e) => setRole(e.target.value)} onChange={(e) => setRole(e.target.value)}
className="bg-black/30 border border-white/10 rounded-xl px-4 py-2 text-sm focus:outline-none focus:border-blue-500 transition-colors" className="bg-slate-50 dark:bg-black/30 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-2 text-sm focus:outline-none focus:border-blue-500 transition-colors text-slate-900 dark:text-white font-bold"
> >
<option value="instructor">Instructor</option> <option value="instructor">Instructor</option>
<option value="assistant">Assistant</option> <option value="assistant">Assistant</option>
@@ -125,36 +125,36 @@ export default function TeamManagementSection({ courseId }: TeamManagementSectio
{/* Member List */} {/* Member List */}
<div className="space-y-4"> <div className="space-y-4">
<h3 className="text-sm font-bold text-gray-300">Active Instructors</h3> <h3 className="text-xs font-black text-slate-400 dark:text-gray-500 uppercase tracking-[0.2em]">Active Instructors</h3>
<div className="grid grid-cols-1 gap-4"> <div className="grid grid-cols-1 gap-4">
{team.map((member) => ( {team.map((member) => (
<div key={member.user_id} className="flex items-center justify-between p-4 bg-white/5 border border-white/10 rounded-2xl hover:bg-white/[0.07] transition-colors"> <div key={member.user_id} className="flex items-center justify-between p-5 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl hover:bg-slate-50 dark:hover:bg-white/[0.07] transition-all shadow-sm group">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="w-10 h-10 rounded-full bg-gradient-to-tr from-blue-500 to-indigo-500 flex items-center justify-center text-white font-bold text-sm shadow-lg shadow-blue-500/10"> <div className="w-10 h-10 rounded-full bg-gradient-to-tr from-blue-500 to-indigo-500 flex items-center justify-center text-white font-bold text-sm shadow-lg shadow-blue-500/10">
{member.full_name.charAt(0)} {member.full_name.charAt(0)}
</div> </div>
<div> <div>
<div className="font-bold flex items-center gap-2"> <div className="font-bold flex items-center gap-2 text-slate-900 dark:text-white">
{member.full_name} {member.full_name}
{member.role === 'primary' && ( {member.role === 'primary' && (
<span className="px-2 py-0.5 bg-blue-500/10 border border-blue-500/20 rounded text-[10px] text-blue-400 font-bold uppercase tracking-wider"> <span className="px-2 py-0.5 bg-blue-600/10 border border-blue-500/20 rounded text-[9px] text-blue-600 dark:text-blue-400 font-black uppercase tracking-wider">
Primary Primary
</span> </span>
)} )}
{member.role === 'assistant' && ( {member.role === 'assistant' && (
<span className="px-2 py-0.5 bg-gray-500/10 border border-gray-500/20 rounded text-[10px] text-gray-400 font-bold uppercase tracking-wider"> <span className="px-2 py-0.5 bg-slate-500/10 border border-slate-500/20 rounded text-[9px] text-slate-600 dark:text-gray-400 font-black uppercase tracking-wider">
Assistant Assistant
</span> </span>
)} )}
</div> </div>
<div className="text-xs text-gray-500">{member.email}</div> <div className="text-xs text-slate-500 dark:text-gray-500 font-medium">{member.email}</div>
</div> </div>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{member.role !== 'primary' && ( {member.role !== 'primary' && (
<button <button
onClick={() => handleRemoveMember(member.user_id)} onClick={() => handleRemoveMember(member.user_id)}
className="p-2 text-gray-500 hover:text-red-400 hover:bg-red-400/10 rounded-lg transition-all" className="p-2 text-slate-400 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-500/10 rounded-lg transition-all opacity-0 group-hover:opacity-100"
title="Remove member" title="Remove member"
> >
<Trash2 size={18} /> <Trash2 size={18} />
web/studio/src/app/courses/[id]/settings/page.tsx
+64 -64
View File
@@ -149,9 +149,9 @@ export default function CourseSettingsPage() {
<TeamManagementSection courseId={id} /> <TeamManagementSection courseId={id} />
{/* Passing Percentage Section */} {/* Passing Percentage Section */}
<section className="bg-white/5 border border-white/10 rounded-3xl p-8"> <section className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl p-8 shadow-sm">
<div className="flex items-center gap-3 mb-6"> <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"> <div className="w-12 h-12 rounded-2xl bg-purple-600/10 flex items-center justify-center text-purple-600 dark:text-purple-400">
<SettingsIcon size={24} /> <SettingsIcon size={24} />
</div> </div>
<h2 className="section-title">Configuración de Calificaciones</h2> <h2 className="section-title">Configuración de Calificaciones</h2>
@@ -159,7 +159,7 @@ export default function CourseSettingsPage() {
<div className="space-y-6"> <div className="space-y-6">
<div> <div>
<label className="block text-sm font-bold text-gray-300 mb-3"> <label className="block text-sm font-black text-slate-700 dark:text-gray-300 mb-3 uppercase tracking-wider">
Passing Percentage Passing Percentage
</label> </label>
<div className="flex items-center gap-6"> <div className="flex items-center gap-6">
@@ -169,45 +169,45 @@ export default function CourseSettingsPage() {
max="100" max="100"
value={passingPercentage} value={passingPercentage}
onChange={(e) => setPassingPercentage(parseInt(e.target.value))} onChange={(e) => setPassingPercentage(parseInt(e.target.value))}
className="flex-1 h-2 bg-white/10 rounded-lg appearance-none cursor-pointer accent-blue-500" className="flex-1 h-2 bg-slate-200 dark:bg-white/10 rounded-lg appearance-none cursor-pointer accent-blue-600 dark:accent-blue-500"
/> />
<div className="text-4xl font-black text-blue-400 w-24 text-right"> <div className="text-4xl font-black text-blue-600 dark:text-blue-400 w-24 text-right">
{passingPercentage}% {passingPercentage}%
</div> </div>
</div> </div>
<p className="text-xs text-gray-500 mt-3"> <p className="text-xs text-slate-500 dark:text-gray-500 mt-3 font-medium">
Students must achieve at least this percentage to pass the course. Students must achieve at least this percentage to pass the course.
</p> </p>
</div> </div>
{/* Performance Tiers Preview */} {/* Performance Tiers Preview */}
<div className="bg-white/5 border border-white/10 rounded-2xl p-6"> <div className="bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl p-6 shadow-sm">
<h3 className="text-sm font-bold text-gray-300 mb-4">Performance Tiers Preview</h3> <h3 className="text-xs font-black text-slate-400 dark:text-gray-500 mb-4 uppercase tracking-[0.2em]">Performance Tiers Preview</h3>
<div className="space-y-3 text-xs"> <div className="space-y-3 text-xs">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-16 h-4 bg-red-500 rounded"></div> <div className="w-16 h-4 bg-red-500 rounded shadow-sm"></div>
<span className="text-red-400 font-bold">Reprobado:</span> <span className="text-red-600 dark:text-red-400 font-bold">Reprobado:</span>
<span className="text-gray-400">0% - {Math.max(0, passingPercentage - 1)}%</span> <span className="text-slate-500 dark:text-gray-400 font-medium">0% - {Math.max(0, passingPercentage - 1)}%</span>
</div> </div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-16 h-4 bg-orange-500 rounded"></div> <div className="w-16 h-4 bg-orange-500 rounded shadow-sm"></div>
<span className="text-orange-400 font-bold">Rendimiento Bajo:</span> <span className="text-orange-600 dark:text-orange-400 font-bold">Rendimiento Bajo:</span>
<span className="text-gray-400">{passingPercentage}% - {passingPercentage + 9}%</span> <span className="text-slate-500 dark:text-gray-400 font-medium">{passingPercentage}% - {passingPercentage + 9}%</span>
</div> </div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-16 h-4 bg-yellow-500 rounded"></div> <div className="w-16 h-4 bg-yellow-500 rounded shadow-sm"></div>
<span className="text-yellow-400 font-bold">Rendimiento Medio:</span> <span className="text-yellow-600 dark:text-yellow-400 font-bold">Rendimiento Medio:</span>
<span className="text-gray-400">{passingPercentage + 10}% - {passingPercentage + 15}%</span> <span className="text-slate-500 dark:text-gray-400 font-medium">{passingPercentage + 10}% - {passingPercentage + 15}%</span>
</div> </div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-16 h-4 bg-green-500 rounded"></div> <div className="w-16 h-4 bg-green-500 rounded shadow-sm"></div>
<span className="text-green-400 font-bold">Buen Rendimiento:</span> <span className="text-green-600 dark:text-green-400 font-bold">Buen Rendimiento:</span>
<span className="text-gray-400">{passingPercentage + 16}% - 90%</span> <span className="text-slate-500 dark:text-gray-400 font-medium">{passingPercentage + 16}% - 90%</span>
</div> </div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-16 h-4 bg-blue-500 rounded"></div> <div className="w-16 h-4 bg-blue-500 rounded shadow-sm"></div>
<span className="text-blue-400 font-bold">Excelente:</span> <span className="text-blue-600 dark:text-blue-400 font-bold">Excelente:</span>
<span className="text-gray-400">91% - 100%</span> <span className="text-slate-500 dark:text-gray-400 font-medium">91% - 100%</span>
</div> </div>
</div> </div>
</div> </div>
@@ -215,9 +215,9 @@ export default function CourseSettingsPage() {
</section> </section>
{/* Course Pacing Section */} {/* Course Pacing Section */}
<section className="bg-white/5 border border-white/10 rounded-3xl p-8"> <section className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl p-8 shadow-sm">
<div className="flex items-center gap-3 mb-6"> <div className="flex items-center gap-3 mb-6">
<div className="w-12 h-12 rounded-2xl bg-green-500/10 flex items-center justify-center text-green-400"> <div className="w-12 h-12 rounded-2xl bg-emerald-600/10 flex items-center justify-center text-emerald-600 dark:text-green-400">
<Clock size={24} /> <Clock size={24} />
</div> </div>
<h2 className="section-title">Ritmo y Calendario del Curso</h2> <h2 className="section-title">Ritmo y Calendario del Curso</h2>
@@ -225,50 +225,50 @@ export default function CourseSettingsPage() {
<div className="grid grid-cols-1 md:grid-cols-2 gap-8"> <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div className="space-y-4"> <div className="space-y-4">
<label className="block text-sm font-bold text-gray-300">Pacing Mode</label> <label className="block text-sm font-black text-slate-700 dark:text-gray-300 uppercase tracking-wider">Pacing Mode</label>
<div className="flex gap-4"> <div className="flex gap-4">
<button <button
onClick={() => setPacingMode('self_paced')} onClick={() => setPacingMode('self_paced')}
className={`flex-1 p-4 rounded-2xl border-2 transition-all text-left ${pacingMode === 'self_paced' ? 'border-blue-500 bg-blue-500/10' : 'border-white/5 bg-white/5 hover:border-white/10'}`} className={`flex-1 p-4 rounded-2xl border-2 transition-all text-left shadow-sm ${pacingMode === 'self_paced' ? 'border-blue-600 bg-blue-100/30' : 'border-slate-200 bg-white dark:border-white/5 dark:bg-white/5 hover:border-slate-300 dark:hover:border-white/10'}`}
> >
<div className="font-bold">Self-Paced</div> <div className={`font-bold ${pacingMode === 'self_paced' ? 'text-blue-600 dark:text-blue-400' : 'text-slate-700 dark:text-white'}`}>Self-Paced</div>
<div className="text-xs text-gray-500">Learners go at their own speed.</div> <div className="text-xs text-slate-500 dark:text-gray-500 font-medium">Learners go at their own speed.</div>
</button> </button>
<button <button
onClick={() => setPacingMode('instructor_led')} onClick={() => setPacingMode('instructor_led')}
className={`flex-1 p-4 rounded-2xl border-2 transition-all text-left ${pacingMode === 'instructor_led' ? 'border-purple-500 bg-purple-500/10' : 'border-white/5 bg-white/5 hover:border-white/10'}`} className={`flex-1 p-4 rounded-2xl border-2 transition-all text-left shadow-sm ${pacingMode === 'instructor_led' ? 'border-purple-600 bg-purple-100/30' : 'border-slate-200 bg-white dark:border-white/5 dark:bg-white/5 hover:border-slate-300 dark:hover:border-white/10'}`}
> >
<div className="font-bold">Instructor-Led</div> <div className={`font-bold ${pacingMode === 'instructor_led' ? 'text-purple-600 dark:text-purple-400' : 'text-slate-700 dark:text-white'}`}>Instructor-Led</div>
<div className="text-xs text-gray-500">Cohort-based with specific dates.</div> <div className="text-xs text-slate-500 dark:text-gray-500 font-medium">Cohort-based with specific dates.</div>
</button> </button>
</div> </div>
</div> </div>
{pacingMode === 'instructor_led' && ( {pacingMode === 'instructor_led' && (
<div className="space-y-4 animate-in fade-in slide-in-from-top-2"> <div className="space-y-4 animate-in fade-in slide-in-from-top-2">
<label className="block text-sm font-bold text-gray-300">Course Schedule</label> <label className="block text-sm font-black text-slate-700 dark:text-gray-300 uppercase tracking-wider">Course Schedule</label>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div className="space-y-2"> <div className="space-y-2">
<label className="text-xs text-gray-500">Start Date</label> <label className="text-[10px] text-slate-400 dark:text-gray-500 font-black uppercase tracking-widest">Start Date</label>
<div className="relative"> <div className="relative">
<Calendar className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" /> <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 dark:text-gray-500" />
<input <input
type="date" type="date"
value={startDate} value={startDate}
onChange={(e) => setStartDate(e.target.value)} onChange={(e) => setStartDate(e.target.value)}
className="w-full bg-black/30 border border-white/10 rounded-xl py-2 pl-10 pr-4 text-sm focus:outline-none focus:border-blue-500" className="w-full bg-slate-100 dark:bg-black/30 border border-slate-200 dark:border-white/10 rounded-xl py-2.5 pl-10 pr-4 text-sm focus:outline-none focus:border-blue-500 text-slate-900 dark:text-white font-bold"
/> />
</div> </div>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<label className="text-xs text-gray-500">End Date</label> <label className="text-[10px] text-slate-400 dark:text-gray-500 font-black uppercase tracking-widest">End Date</label>
<div className="relative"> <div className="relative">
<Calendar className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" /> <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 dark:text-gray-500" />
<input <input
type="date" type="date"
value={endDate} value={endDate}
onChange={(e) => setEndDate(e.target.value)} onChange={(e) => setEndDate(e.target.value)}
className="w-full bg-black/30 border border-white/10 rounded-xl py-2 pl-10 pr-4 text-sm focus:outline-none focus:border-blue-500" className="w-full bg-slate-100 dark:bg-black/30 border border-slate-200 dark:border-white/10 rounded-xl py-2.5 pl-10 pr-4 text-sm focus:outline-none focus:border-blue-500 text-slate-900 dark:text-white font-bold"
/> />
</div> </div>
</div> </div>
@@ -279,17 +279,17 @@ export default function CourseSettingsPage() {
</section> </section>
{/* Course Pricing Section */} {/* Course Pricing Section */}
<section className="bg-white/5 border border-white/10 rounded-3xl p-8"> <section className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl p-8 shadow-sm">
<div className="flex items-center gap-3 mb-6"> <div className="flex items-center gap-3 mb-6">
<div className="w-12 h-12 rounded-2xl bg-blue-500/10 flex items-center justify-center text-blue-400"> <div className="w-12 h-12 rounded-2xl bg-blue-600/10 flex items-center justify-center text-blue-600 dark:text-blue-400">
<span className="text-xl font-bold">$</span> <span className="text-xl font-black">$</span>
</div> </div>
<h2 className="section-title">Precio del Curso</h2> <h2 className="section-title">Precio del Curso</h2>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8"> <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div className="space-y-4"> <div className="space-y-4">
<label className="block text-sm font-bold text-gray-300">Price</label> <label className="block text-sm font-black text-slate-700 dark:text-gray-300 uppercase tracking-wider">Price</label>
<div className="relative"> <div className="relative">
<input <input
type="number" type="number"
@@ -297,22 +297,22 @@ export default function CourseSettingsPage() {
min="0" min="0"
value={price} value={price}
onChange={(e) => setPrice(parseFloat(e.target.value))} onChange={(e) => setPrice(parseFloat(e.target.value))}
className="w-full bg-black/30 border border-white/10 rounded-xl py-3 px-4 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500 transition-colors" className="w-full bg-slate-100 dark:bg-black/30 border border-slate-200 dark:border-white/10 rounded-xl py-3 px-4 text-slate-900 dark:text-white focus:outline-none focus:border-blue-500 transition-colors font-bold"
placeholder="0.00" placeholder="0.00"
/> />
<div className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500 font-bold"> <div className="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 dark:text-gray-500 font-black">
{currency} {currency}
</div> </div>
</div> </div>
<p className="text-xs text-gray-500">Set to 0 for a free course.</p> <p className="text-xs text-slate-500 dark:text-gray-500 font-medium">Set to 0 for a free course.</p>
</div> </div>
<div className="space-y-4"> <div className="space-y-4">
<label className="block text-sm font-bold text-gray-300">Currency</label> <label className="block text-sm font-black text-slate-700 dark:text-gray-300 uppercase tracking-wider">Currency</label>
<select <select
value={currency} value={currency}
onChange={(e) => setCurrency(e.target.value)} onChange={(e) => setCurrency(e.target.value)}
className="w-full bg-black/30 border border-white/10 rounded-xl py-3 px-4 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500 transition-colors appearance-none" className="w-full bg-slate-100 dark:bg-black/30 border border-slate-200 dark:border-white/10 rounded-xl py-3 px-4 text-slate-900 dark:text-white focus:outline-none focus:border-blue-500 transition-colors appearance-none font-bold"
> >
<option value="USD">USD - US Dollar</option> <option value="USD">USD - US Dollar</option>
<option value="CLP">CLP - Chilean Peso</option> <option value="CLP">CLP - Chilean Peso</option>
@@ -326,40 +326,40 @@ export default function CourseSettingsPage() {
</section> </section>
{/* Certificate Template Section */} {/* Certificate Template Section */}
<section className="bg-white/5 border border-white/10 rounded-3xl p-8"> <section className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl p-8 shadow-sm">
<div className="flex items-center gap-3 mb-6"> <div className="flex items-center gap-3 mb-6">
<div className="w-12 h-12 rounded-2xl bg-indigo-500/10 flex items-center justify-center text-indigo-400"> <div className="w-12 h-12 rounded-2xl bg-indigo-600/10 flex items-center justify-center text-indigo-600 dark:text-indigo-400">
<BookOpen size={24} /> <BookOpen size={24} />
</div> </div>
<h2 className="section-title">Plantilla de Certificado</h2> <h2 className="section-title">Plantilla de Certificado</h2>
</div> </div>
<div className="space-y-6"> <div className="space-y-6">
<p className="text-gray-400"> <p className="text-slate-500 dark:text-gray-400 font-medium">
Design the HTML certificate that students will receive upon passing the course. Design the HTML certificate that students will receive upon passing the course.
Available variables: <code className="text-blue-400">{"{{student_name}}"}</code>, <code className="text-blue-400">{"{{course_title}}"}</code>, <code className="text-blue-400">{"{{date}}"}</code>, <code className="text-blue-400">{"{{score}}"}</code>. Available variables: <code className="text-blue-600 dark:text-blue-400 font-black">{"{{student_name}}"}</code>, <code className="text-blue-600 dark:text-blue-400 font-black">{"{{course_title}}"}</code>, <code className="text-blue-600 dark:text-blue-400 font-black">{"{{date}}"}</code>, <code className="text-blue-600 dark:text-blue-400 font-black">{"{{score}}"}</code>.
</p> </p>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div className="space-y-2"> <div className="space-y-2">
<label className="block text-sm font-bold text-gray-300">HTML Template</label> <label className="block text-sm font-black text-slate-700 dark:text-gray-300 uppercase tracking-wider">HTML Template</label>
<textarea <textarea
value={certificateTemplate} value={certificateTemplate}
onChange={(e) => setCertificateTemplate(e.target.value)} onChange={(e) => setCertificateTemplate(e.target.value)}
className="w-full h-[400px] bg-black/30 border border-white/10 rounded-xl p-4 font-mono text-sm text-gray-300 focus:outline-none focus:border-blue-500 transition-colors resize-none" className="w-full h-[400px] bg-slate-100 dark:bg-black/30 border border-slate-200 dark:border-white/10 rounded-xl p-6 font-mono text-sm text-slate-700 dark:text-gray-300 focus:outline-none focus:border-blue-500 transition-colors resize-none shadow-inner"
placeholder="Enter HTML code here..." placeholder="Enter HTML code here..."
/> />
<button <button
onClick={() => setCertificateTemplate(DEFAULT_CERTIFICATE_TEMPLATE)} onClick={() => setCertificateTemplate(DEFAULT_CERTIFICATE_TEMPLATE)}
className="text-xs text-blue-400 hover:text-blue-300 underline" className="text-[10px] font-black uppercase tracking-widest text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
> >
Reset to Default Template Reset to Default Template
</button> </button>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<label className="block text-sm font-bold text-gray-300">Live Preview</label> <label className="block text-sm font-black text-slate-700 dark:text-gray-300 uppercase tracking-wider">Live Preview</label>
<div className="w-full h-[400px] bg-white rounded-xl overflow-hidden relative group"> <div className="w-full h-[400px] bg-white rounded-xl overflow-hidden relative group border border-slate-200 shadow-sm">
<iframe <iframe
srcDoc={certificateTemplate srcDoc={certificateTemplate
.replace(/{{student_name}}/g, "Jane Doe") .replace(/{{student_name}}/g, "Jane Doe")
@@ -377,9 +377,9 @@ export default function CourseSettingsPage() {
</div> </div>
</section> </section>
{/* Course Portability Section */} {/* Course Portability Section */}
<section className="bg-white/5 border border-white/10 rounded-3xl p-8"> <section className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl p-8 shadow-sm">
<div className="flex items-center gap-3 mb-6"> <div className="flex items-center gap-3 mb-6">
<div className="w-12 h-12 rounded-2xl bg-amber-500/10 flex items-center justify-center text-amber-400"> <div className="w-12 h-12 rounded-2xl bg-amber-600/10 flex items-center justify-center text-amber-600 dark:text-amber-400">
<Download size={24} /> <Download size={24} />
</div> </div>
<h2 className="section-title">Portabilidad del Curso</h2> <h2 className="section-title">Portabilidad del Curso</h2>
@@ -387,15 +387,15 @@ export default function CourseSettingsPage() {
<div className="grid grid-cols-1 md:grid-cols-2 gap-8"> <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div className="space-y-4"> <div className="space-y-4">
<h3 className="text-sm font-bold text-gray-300">Export Course</h3> <h3 className="text-sm font-black text-slate-800 dark:text-gray-300 uppercase tracking-wider">Export Course</h3>
<p className="text-xs text-gray-500"> <p className="text-xs text-slate-500 dark:text-gray-500 font-medium">
Download the entire course structure, modules, and lessons as a JSON file. Download the entire course structure, modules, and lessons as a JSON file.
You can use this to backup or move content between organizations. You can use this to backup or move content between organizations.
</p> </p>
<button <button
onClick={handleExport} onClick={handleExport}
disabled={exporting} disabled={exporting}
className="flex items-center gap-2 px-6 py-3 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl font-bold transition-all active:scale-95 disabled:opacity-50" className="flex items-center gap-2 px-6 py-3 bg-white dark:bg-white/5 hover:bg-slate-50 dark:hover:bg-white/10 border border-slate-200 dark:border-white/10 rounded-xl font-bold transition-all active:scale-95 disabled:opacity-50 shadow-sm text-slate-700 dark:text-white"
> >
<Download size={18} /> <Download size={18} />
{exporting ? "Exporting..." : "Download JSON"} {exporting ? "Exporting..." : "Download JSON"}
@@ -403,8 +403,8 @@ export default function CourseSettingsPage() {
</div> </div>
<div className="space-y-4"> <div className="space-y-4">
<h3 className="text-sm font-bold text-gray-300">Import Course</h3> <h3 className="text-sm font-black text-slate-800 dark:text-gray-300 uppercase tracking-wider">Import Course</h3>
<p className="text-xs text-gray-500"> <p className="text-xs text-slate-500 dark:text-gray-500 font-medium">
Upload a previously exported course JSON file. This will create a NEW course Upload a previously exported course JSON file. This will create a NEW course
within the current organization based on that data. within the current organization based on that data.
</p> </p>
web/studio/src/app/courses/[id]/students/page.tsx
+3 -3
View File
@@ -145,13 +145,13 @@ export default function CourseStudentsPage() {
placeholder="Search by name or email..." placeholder="Search by name or email..."
value={searchTerm} value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)} onChange={(e) => setSearchTerm(e.target.value)}
className="w-full bg-black/20 border border-white/10 rounded-xl py-2 pl-10 pr-4 text-sm focus:outline-none focus:border-blue-500/50 transition-all font-medium" className="w-full bg-slate-100 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-xl py-2 pl-10 pr-4 text-sm focus:outline-none focus:border-blue-500/50 transition-all font-medium text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-gray-600"
/> />
</div> </div>
<div className="flex items-center gap-2 w-full md:w-auto"> <div className="flex items-center gap-2 w-full md:w-auto">
<Filter size={16} className="text-gray-400" /> <Filter size={16} className="text-gray-400" />
<select <select
className="bg-black/20 border border-white/10 rounded-xl px-4 py-2 text-sm focus:outline-none focus:border-blue-500/50 text-gray-900 dark:text-white min-w-[150px]" className="bg-slate-100 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-xl px-4 py-2 text-sm focus:outline-none focus:border-blue-500/50 text-slate-900 dark:text-white min-w-[150px]"
value={selectedCohortId} value={selectedCohortId}
onChange={(e) => setSelectedCohortId(e.target.value)} onChange={(e) => setSelectedCohortId(e.target.value)}
> >
@@ -174,7 +174,7 @@ export default function CourseStudentsPage() {
<tbody className="divide-y divide-white/5"> <tbody className="divide-y divide-white/5">
{filteredStudents.length === 0 ? ( {filteredStudents.length === 0 ? (
<tr> <tr>
<td colSpan={3} className="p-12 text-center text-gray-500 italic">No students found.</td> <td colSpan={3} className="p-12 text-center text-slate-500 dark:text-gray-500 italic">No students found.</td>
</tr> </tr>
) : filteredStudents.map(student => ( ) : filteredStudents.map(student => (
<tr key={student.user_id} className="hover:bg-white/[0.02] transition-colors group"> <tr key={student.user_id} className="hover:bg-white/[0.02] transition-colors group">
web/studio/src/app/courses/[id]/team/page.tsx
+13 -13
View File
@@ -139,7 +139,7 @@ export default function CourseTeamPage() {
</span> </span>
)} )}
</h3> </h3>
<div className="flex items-center gap-3 text-sm text-gray-400"> <div className="flex items-center gap-3 text-sm text-slate-600 dark:text-gray-400 font-medium">
<span className="flex items-center gap-1.5"> <span className="flex items-center gap-1.5">
<Mail className="w-3.5 h-3.5 opacity-60" /> {inst.email} <Mail className="w-3.5 h-3.5 opacity-60" /> {inst.email}
</span> </span>
@@ -154,7 +154,7 @@ export default function CourseTeamPage() {
{inst.role !== 'primary' && ( {inst.role !== 'primary' && (
<button <button
onClick={() => handleRemoveMember(inst.user_id)} onClick={() => handleRemoveMember(inst.user_id)}
className="p-3 rounded-xl hover:bg-red-500/10 text-gray-500 hover:text-red-400 transition-all active:scale-95" className="p-3 rounded-xl hover:bg-red-500/10 text-slate-400 dark:text-gray-500 hover:text-red-500 dark:hover:text-red-400 transition-all active:scale-95"
title="Remove member" title="Remove member"
> >
<Trash2 className="w-5 h-5" /> <Trash2 className="w-5 h-5" />
@@ -171,12 +171,12 @@ export default function CourseTeamPage() {
{/* Add Member Modal */} {/* Add Member Modal */}
{ {
isAddModalOpen && ( isAddModalOpen && (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm animate-in fade-in duration-300"> <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 dark:bg-black/80 backdrop-blur-sm animate-in fade-in duration-300">
<div className="bg-[#1a1c22] border border-white/10 rounded-3xl w-full max-w-lg overflow-hidden shadow-2xl animate-in zoom-in-95 duration-300"> <div className="bg-white dark:bg-[#1a1c22] border border-slate-200 dark:border-white/10 rounded-3xl w-full max-w-lg overflow-hidden shadow-2xl animate-in zoom-in-95 duration-300">
<div className="p-8 border-b border-white/5 flex justify-between items-center"> <div className="p-8 border-b border-white/5 flex justify-between items-center">
<div> <div>
<h2 className="text-2xl font-bold">Add Team Member</h2> <h2 className="text-2xl font-bold text-slate-900 dark:text-white">Add Team Member</h2>
<p className="text-sm text-gray-400 mt-1">Search for a user by name or email</p> <p className="text-sm text-slate-500 dark:text-gray-400 mt-1">Search for a user by name or email</p>
</div> </div>
<button onClick={() => setIsAddModalOpen(false)} className="p-2 hover:bg-white/5 rounded-full transition-colors text-gray-500"> <button onClick={() => setIsAddModalOpen(false)} className="p-2 hover:bg-white/5 rounded-full transition-colors text-gray-500">
<X className="w-6 h-6" /> <X className="w-6 h-6" />
@@ -191,7 +191,7 @@ export default function CourseTeamPage() {
placeholder="Type name or email..." placeholder="Type name or email..."
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
className="w-full bg-white/5 border border-white/10 rounded-2xl pl-12 pr-4 py-4 text-sm focus:outline-none focus:border-blue-500 transition-all font-medium" className="w-full bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl pl-12 pr-4 py-4 text-sm focus:outline-none focus:border-blue-500 transition-all font-medium text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-gray-500"
/> />
{searching && ( {searching && (
<div className="absolute right-4 top-1/2 -translate-y-1/2"> <div className="absolute right-4 top-1/2 -translate-y-1/2">
@@ -202,11 +202,11 @@ export default function CourseTeamPage() {
<div className="space-y-4"> <div className="space-y-4">
<label className="block"> <label className="block">
<span className="text-[10px] font-black uppercase tracking-widest text-gray-500 mb-3 block">Assign Role</span> <span className="text-[10px] font-black uppercase tracking-widest text-slate-500 dark:text-gray-500 mb-3 block">Assign Role</span>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<button <button
onClick={() => setSelectedRole('instructor')} onClick={() => setSelectedRole('instructor')}
className={`flex items-center gap-3 p-4 rounded-2xl border transition-all text-left ${selectedRole === 'instructor' ? 'bg-blue-600/10 border-blue-500/50 text-blue-400' : 'bg-white/5 border-white/10 text-gray-500 hover:border-white/20'}`} className={`flex items-center gap-3 p-4 rounded-2xl border transition-all text-left ${selectedRole === 'instructor' ? 'bg-blue-600/10 border-blue-500/50 text-blue-600 dark:text-blue-400' : 'bg-slate-50 dark:bg-white/5 border-slate-100 dark:border-white/10 text-slate-500 dark:text-gray-500 hover:border-slate-200 dark:hover:border-white/20'}`}
> >
<ShieldCheck className="w-5 h-5" /> <ShieldCheck className="w-5 h-5" />
<div> <div>
@@ -216,7 +216,7 @@ export default function CourseTeamPage() {
</button> </button>
<button <button
onClick={() => setSelectedRole('assistant')} onClick={() => setSelectedRole('assistant')}
className={`flex items-center gap-3 p-4 rounded-2xl border transition-all text-left ${selectedRole === 'assistant' ? 'bg-blue-600/10 border-blue-500/50 text-blue-400' : 'bg-white/5 border-white/10 text-gray-500 hover:border-white/20'}`} className={`flex items-center gap-3 p-4 rounded-2xl border transition-all text-left ${selectedRole === 'assistant' ? 'bg-blue-600/10 border-blue-500/50 text-blue-600 dark:text-blue-400' : 'bg-slate-50 dark:bg-white/5 border-slate-100 dark:border-white/10 text-slate-500 dark:text-gray-500 hover:border-slate-200 dark:hover:border-white/20'}`}
> >
<Shield className="w-5 h-5" /> <Shield className="w-5 h-5" />
<div> <div>
@@ -234,15 +234,15 @@ export default function CourseTeamPage() {
<button <button
key={u.id} key={u.id}
onClick={() => handleAddMember(u)} onClick={() => handleAddMember(u)}
className="w-full flex items-center justify-between p-4 rounded-2xl bg-white/5 border border-white/10 hover:border-blue-500/30 hover:bg-white/10 transition-all group" className="w-full flex items-center justify-between p-4 rounded-2xl bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/10 hover:border-blue-500/30 hover:bg-slate-100 dark:hover:bg-white/10 transition-all group"
> >
<div className="flex items-center gap-4 text-left"> <div className="flex items-center gap-4 text-left">
<div className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center font-bold text-sm"> <div className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center font-bold text-sm">
{u.full_name.charAt(0)} {u.full_name.charAt(0)}
</div> </div>
<div> <div>
<div className="font-bold text-sm">{u.full_name}</div> <div className="font-bold text-sm text-slate-900 dark:text-white">{u.full_name}</div>
<div className="text-xs text-gray-500">{u.email}</div> <div className="text-xs text-slate-500 dark:text-gray-500">{u.email}</div>
</div> </div>
</div> </div>
<div className="w-8 h-8 rounded-lg bg-blue-500/0 flex items-center justify-center group-hover:bg-blue-500/20 transition-all"> <div className="w-8 h-8 rounded-lg bg-blue-500/0 flex items-center justify-center group-hover:bg-blue-500/20 transition-all">
web/studio/src/app/globals.css
+20 -5
View File
@@ -10,8 +10,8 @@
--accent-primary: #3b82f6; --accent-primary: #3b82f6;
--accent-secondary: #6366f1; --accent-secondary: #6366f1;
--glass-bg: rgba(255, 255, 255, 0.8); --glass-bg: rgba(255, 255, 255, 0.7);
--glass-border: rgba(0, 0, 0, 0.15); --glass-border: rgba(0, 0, 0, 0.08);
--glass-blur: blur(16px); --glass-blur: blur(16px);
} }
@@ -54,7 +54,11 @@ body {
.btn-premium { .btn-premium {
@apply relative px-6 py-2.5 rounded-xl font-bold transition-all duration-300; @apply relative px-6 py-2.5 rounded-xl font-bold transition-all duration-300;
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2); box-shadow: 0 4px 15px rgba(59, 130, 246, 0.15);
}
.dark .btn-premium {
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
} }
.btn-premium:hover { .btn-premium:hover {
@@ -91,7 +95,7 @@ body {
/* Custom Scrollbar */ /* Custom Scrollbar */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 6px; width: 8px;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
@@ -99,10 +103,21 @@ body {
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.1);
border-radius: 10px; border-radius: 10px;
border: 2px solid transparent;
background-clip: content-box;
}
.dark ::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.2);
background-clip: content-box;
}
.dark ::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
} }
web/studio/src/components/Analytics/DropoutRiskDashboard.tsx
+19 -19
View File
@@ -56,20 +56,20 @@ export default function DropoutRiskDashboard({ courseId }: DropoutRiskDashboardP
<div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700"> <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700">
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4"> <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
<div> <div>
<h2 className="text-2xl font-black flex items-center gap-3"> <h2 className="text-2xl font-black flex items-center gap-3 text-slate-900 dark:text-white">
<AlertCircle className="text-red-500" /> <AlertCircle className="text-red-600 dark:text-red-500" />
Dropout Risk Analysis Dropout Risk Analysis
</h2> </h2>
<p className="text-sm text-gray-400 mt-1">AI-powered detection based on grades, activity, and engagement.</p> <p className="text-sm text-slate-500 dark:text-gray-400 mt-1 font-medium">AI-powered detection based on grades, activity, and engagement.</p>
</div> </div>
<div className="relative"> <div className="relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 w-4 h-4" /> <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 dark:text-gray-500 w-4 h-4" />
<input <input
type="text" type="text"
placeholder="Search student..." placeholder="Search student..."
value={searchTerm} value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)} onChange={(e) => setSearchTerm(e.target.value)}
className="bg-white/5 border border-white/10 rounded-xl pl-10 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 w-full md:w-64" className="bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl pl-10 pr-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 w-full md:w-64 text-slate-900 dark:text-white font-bold"
/> />
</div> </div>
</div> </div>
@@ -77,17 +77,17 @@ export default function DropoutRiskDashboard({ courseId }: DropoutRiskDashboardP
{filteredRisks.length > 0 ? ( {filteredRisks.length > 0 ? (
<div className="grid grid-cols-1 gap-4"> <div className="grid grid-cols-1 gap-4">
{filteredRisks.map((risk) => ( {filteredRisks.map((risk) => (
<div key={risk.id} className="bg-white/5 border border-white/10 rounded-2xl p-6 hover:bg-white/[0.07] transition-all group"> <div key={risk.id} className="bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl p-6 hover:bg-slate-50 dark:hover:bg-white/[0.07] transition-all group shadow-sm">
<div className="flex flex-col md:flex-row md:items-center justify-between gap-6"> <div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="w-12 h-12 rounded-full bg-blue-500/10 flex items-center justify-center text-blue-400 text-xl font-bold"> <div className="w-12 h-12 rounded-full bg-blue-500/10 flex items-center justify-center text-blue-400 text-xl font-bold">
{risk.user_full_name?.[0] || <User />} {risk.user_full_name?.[0] || <User />}
</div> </div>
<div> <div>
<h3 className="font-bold text-lg">{risk.user_full_name || "Unknown Student"}</h3> <h3 className="font-bold text-lg text-slate-900 dark:text-white">{risk.user_full_name || "Unknown Student"}</h3>
<div className="flex items-center gap-3 text-xs text-gray-500 mt-1"> <div className="flex items-center gap-3 text-xs text-slate-500 dark:text-gray-500 mt-1 font-medium">
<span className="flex items-center gap-1"><Mail size={12} /> {risk.user_email || "N/A"}</span> <span className="flex items-center gap-1"><Mail size={12} className="text-slate-400" /> {risk.user_email || "N/A"}</span>
<span className="flex items-center gap-1"><Calendar size={12} /> Last active: {new Date(risk.last_calculated_at).toLocaleDateString()}</span> <span className="flex items-center gap-1"><Calendar size={12} className="text-slate-400" /> Last active: {new Date(risk.last_calculated_at).toLocaleDateString()}</span>
</div> </div>
</div> </div>
</div> </div>
@@ -98,8 +98,8 @@ export default function DropoutRiskDashboard({ courseId }: DropoutRiskDashboardP
</div> </div>
<div className="flex flex-col items-end min-w-[100px]"> <div className="flex flex-col items-end min-w-[100px]">
<div className="text-sm font-bold text-gray-400">Score: {Math.round(risk.score * 100)}%</div> <div className="text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-gray-400">Score: {Math.round(risk.score * 100)}%</div>
<div className="w-24 h-1 bg-white/5 rounded-full mt-1 overflow-hidden"> <div className="w-24 h-1.5 bg-slate-100 dark:bg-white/5 rounded-full mt-1.5 overflow-hidden">
<div <div
className={`h-full transition-all duration-1000 ${risk.score > 0.8 ? 'bg-red-500' : risk.score > 0.5 ? 'bg-orange-500' : 'bg-green-500'}`} className={`h-full transition-all duration-1000 ${risk.score > 0.8 ? 'bg-red-500' : risk.score > 0.5 ? 'bg-orange-500' : 'bg-green-500'}`}
style={{ width: `${risk.score * 100}%` }} style={{ width: `${risk.score * 100}%` }}
@@ -114,10 +114,10 @@ export default function DropoutRiskDashboard({ courseId }: DropoutRiskDashboardP
</div> </div>
{risk.reasons && risk.reasons.length > 0 && ( {risk.reasons && risk.reasons.length > 0 && (
<div className="mt-6 pt-6 border-t border-white/5 flex flex-wrap gap-3"> <div className="mt-6 pt-6 border-t border-slate-100 dark:border-white/5 flex flex-wrap gap-2">
{risk.reasons.map((reason, _idx) => ( {risk.reasons.map((reason, _idx) => (
<div key={_idx} className="bg-white/5 rounded-lg px-3 py-1.5 text-[10px] font-bold text-gray-400 flex items-center gap-2"> <div key={_idx} className="bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/5 rounded-lg px-3 py-1.5 text-[10px] font-black text-slate-500 dark:text-gray-400 flex items-center gap-2 uppercase tracking-wide">
<Activity size={10} className="text-blue-500" /> <Activity size={10} className="text-blue-600 dark:text-blue-500" />
{reason.description} {reason.description}
</div> </div>
))} ))}
@@ -127,10 +127,10 @@ export default function DropoutRiskDashboard({ courseId }: DropoutRiskDashboardP
))} ))}
</div> </div>
) : ( ) : (
<div className="bg-white/5 border border-white/10 rounded-3xl p-20 text-center"> <div className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl p-20 text-center shadow-sm">
<User size={48} className="text-gray-600 mx-auto mb-4" /> <User size={48} className="text-slate-300 dark:text-gray-600 mx-auto mb-4" />
<h3 className="text-xl font-bold text-gray-400">No students at risk</h3> <h3 className="text-xl font-black text-slate-800 dark:text-gray-300 uppercase tracking-widest">No students at risk</h3>
<p className="text-sm text-gray-500 mt-2">Everyone seems to be doing great in this course!</p> <p className="text-sm text-slate-500 dark:text-gray-500 mt-2 font-medium">Everyone seems to be doing great in this course!</p>
</div> </div>
)} )}
</div> </div>
web/studio/src/components/CourseEditorLayout.tsx
+4 -4
View File
@@ -135,7 +135,7 @@ export default function CourseEditorLayout({
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<button <button
onClick={() => router.push("/")} onClick={() => router.push("/")}
className="p-1.5 hover:bg-black/5 dark:hover:bg-white/10 rounded-full transition-colors text-slate-500 hover:text-slate-800 dark:hover:text-gray-200" className="p-1.5 hover:bg-slate-100 dark:hover:bg-white/10 rounded-full transition-colors text-slate-500 hover:text-slate-800 dark:hover:text-gray-200"
aria-label="Volver al inicio" aria-label="Volver al inicio"
> >
<ChevronLeft className="w-5 h-5" /> <ChevronLeft className="w-5 h-5" />
@@ -166,10 +166,10 @@ export default function CourseEditorLayout({
{/* ── TAB NAVIGATION ── */} {/* ── TAB NAVIGATION ── */}
<nav <nav
className="bg-white dark:bg-black/20 border border-black/8 dark:border-white/8 rounded-xl overflow-hidden mb-6" className="bg-white dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-xl overflow-hidden mb-6 shadow-sm"
aria-label="Grupos del editor de cursos" aria-label="Grupos del editor de cursos"
> >
<ul className="flex border-b border-black/8 dark:border-white/8"> <ul className="flex border-b border-slate-200 dark:border-white/10">
{groups.map((group) => { {groups.map((group) => {
const Icon = group.icon; const Icon = group.icon;
const isGroupActive = group.key === activeGroup?.key; const isGroupActive = group.key === activeGroup?.key;
@@ -207,7 +207,7 @@ export default function CourseEditorLayout({
aria-current={isActive ? "page" : undefined} aria-current={isActive ? "page" : undefined}
className={`flex items-center gap-1.5 px-4 py-2 my-1 text-xs font-bold uppercase tracking-wider rounded-lg transition-all whitespace-nowrap ${isActive className={`flex items-center gap-1.5 px-4 py-2 my-1 text-xs font-bold uppercase tracking-wider rounded-lg transition-all whitespace-nowrap ${isActive
? "bg-blue-600 text-white shadow-sm shadow-blue-500/30" ? "bg-blue-600 text-white shadow-sm shadow-blue-500/30"
: "text-slate-500 dark:text-gray-400 hover:text-slate-800 dark:hover:text-gray-100 hover:bg-black/5 dark:hover:bg-white/5" : "text-slate-500 dark:text-gray-400 hover:text-slate-800 dark:hover:text-gray-100 hover:bg-slate-200/50 dark:hover:bg-white/5"
}`} }`}
> >
<Icon className="w-3.5 h-3.5 flex-shrink-0" aria-hidden="true" /> <Icon className="w-3.5 h-3.5 flex-shrink-0" aria-hidden="true" />
web/studio/src/components/Courses/LiveSessions.tsx
+21 -21
View File
@@ -72,11 +72,11 @@ export default function LiveSessions({ courseId }: LiveSessionsProps) {
<div className="space-y-6"> <div className="space-y-6">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<div> <div>
<h2 className="text-xl font-bold flex items-center gap-2"> <h2 className="text-xl font-black flex items-center gap-2 text-slate-900 dark:text-white">
<Video className="text-blue-500" /> <Video className="text-blue-600 dark:text-blue-500" />
Virtual Classrooms Virtual Classrooms
</h2> </h2>
<p className="text-sm text-gray-500">Schedule and manage your live Jitsi sessions.</p> <p className="text-sm text-slate-500 dark:text-gray-400 font-medium">Schedule and manage your live Jitsi sessions.</p>
</div> </div>
<button <button
onClick={() => setShowForm(true)} onClick={() => setShowForm(true)}
@@ -87,34 +87,34 @@ export default function LiveSessions({ courseId }: LiveSessionsProps) {
</div> </div>
{showForm && ( {showForm && (
<div className="bg-white/5 border border-white/10 rounded-2xl p-6 animate-in slide-in-from-top-4"> <div className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl p-6 animate-in slide-in-from-top-4 shadow-sm">
<form onSubmit={handleCreate} className="space-y-4"> <form onSubmit={handleCreate} className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-1"> <div className="space-y-1">
<label className="text-xs font-bold text-gray-400">SESSION TITLE</label> <label className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-widest">SESSION TITLE</label>
<input <input
required required
className="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 focus:border-blue-500 outline-none" className="w-full bg-white dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-lg px-4 py-2.5 focus:border-blue-500 outline-none text-slate-900 dark:text-white font-bold"
placeholder="Weekly Sync Up" placeholder="Weekly Sync Up"
value={formData.title} value={formData.title}
onChange={e => setFormData({ ...formData, title: e.target.value })} onChange={e => setFormData({ ...formData, title: e.target.value })}
/> />
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<label className="text-xs font-bold text-gray-400">START DATE & TIME</label> <label className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-widest">START DATE & TIME</label>
<input <input
required required
type="datetime-local" type="datetime-local"
className="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 focus:border-blue-500 outline-none" className="w-full bg-white dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-lg px-4 py-2.5 focus:border-blue-500 outline-none text-slate-900 dark:text-white font-bold"
value={formData.start_at} value={formData.start_at}
onChange={e => setFormData({ ...formData, start_at: e.target.value })} onChange={e => setFormData({ ...formData, start_at: e.target.value })}
/> />
</div> </div>
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<label className="text-xs font-bold text-gray-400">DESCRIPTION (OPTIONAL)</label> <label className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-widest">DESCRIPTION (OPTIONAL)</label>
<textarea <textarea
className="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 focus:border-blue-500 outline-none h-20" className="w-full bg-white dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-lg px-4 py-2 focus:border-blue-500 outline-none h-24 text-slate-900 dark:text-white font-medium resize-none shadow-inner"
value={formData.description} value={formData.description}
onChange={e => setFormData({ ...formData, description: e.target.value })} onChange={e => setFormData({ ...formData, description: e.target.value })}
/> />
@@ -129,18 +129,18 @@ export default function LiveSessions({ courseId }: LiveSessionsProps) {
<div className="grid grid-cols-1 gap-4"> <div className="grid grid-cols-1 gap-4">
{meetings.map(m => ( {meetings.map(m => (
<div key={m.id} className="bg-white/5 border border-white/10 rounded-2xl p-5 hover:bg-white/[0.08] transition-all group"> <div key={m.id} className="bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl p-5 hover:bg-slate-50 dark:hover:bg-white/[0.08] transition-all group shadow-sm">
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4"> <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
<div className="flex items-start gap-4"> <div className="flex items-start gap-4">
<div className="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center text-blue-400"> <div className="w-12 h-12 rounded-xl bg-blue-600/10 flex items-center justify-center text-blue-600 dark:text-blue-400">
<Video size={24} /> <Video size={24} />
</div> </div>
<div> <div>
<h3 className="font-bold text-lg">{m.title}</h3> <h3 className="font-bold text-lg text-slate-900 dark:text-white">{m.title}</h3>
<div className="flex flex-wrap items-center gap-4 text-xs text-gray-400 mt-1"> <div className="flex flex-wrap items-center gap-4 text-xs text-slate-500 dark:text-gray-400 mt-1 font-medium">
<span className="flex items-center gap-1"><Calendar size={14} /> {new Date(m.start_at).toLocaleString()}</span> <span className="flex items-center gap-1.5"><Calendar size={14} className="text-slate-400" /> {new Date(m.start_at).toLocaleString()}</span>
<span className="flex items-center gap-1"><Clock size={14} /> {m.duration_minutes} min</span> <span className="flex items-center gap-1.5"><Clock size={14} className="text-slate-400" /> {m.duration_minutes} min</span>
<span className="capitalize px-2 py-0.5 bg-white/5 rounded-full border border-white/10">{m.provider}</span> <span className="capitalize px-2 py-0.5 bg-slate-100 dark:bg-white/5 rounded-full border border-slate-200 dark:border-white/10 text-[10px] font-black uppercase tracking-widest">{m.provider}</span>
</div> </div>
</div> </div>
</div> </div>
@@ -149,7 +149,7 @@ export default function LiveSessions({ courseId }: LiveSessionsProps) {
href={m.join_url} href={m.join_url}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="flex items-center gap-2 bg-white/10 hover:bg-white/20 px-4 py-2 rounded-xl text-sm font-bold transition-all" className="flex items-center gap-2 bg-slate-100 dark:bg-white/10 hover:bg-blue-600 dark:hover:bg-white/20 hover:text-white px-4 py-2 rounded-xl text-sm font-bold transition-all shadow-sm text-slate-700 dark:text-white"
> >
Join Room <ExternalLink size={14} /> Join Room <ExternalLink size={14} />
</a> </a>
@@ -165,9 +165,9 @@ export default function LiveSessions({ courseId }: LiveSessionsProps) {
))} ))}
{meetings.length === 0 && !loading && ( {meetings.length === 0 && !loading && (
<div className="p-12 text-center border-2 border-dashed border-white/5 rounded-3xl"> <div className="p-12 text-center border-2 border-dashed border-slate-200 dark:border-white/5 rounded-3xl bg-slate-50/50 dark:bg-transparent">
<AlertCircle className="mx-auto text-gray-600 mb-2" /> <AlertCircle className="mx-auto text-slate-300 dark:text-gray-600 mb-2" size={32} />
<p className="text-gray-500">No sessions scheduled for this course.</p> <p className="text-slate-500 dark:text-gray-500 font-medium">No sessions scheduled for this course.</p>
</div> </div>
)} )}
</div> </div>