feat: Enhance UI with improved dark mode styling and color palette adjustments across course pages.
This commit is contained in:
@@ -66,12 +66,12 @@ export default function AnalyticsPage() {
|
||||
);
|
||||
|
||||
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="w-20 h-20 bg-red-500/10 rounded-full flex items-center justify-center text-red-500">
|
||||
<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-600/10 rounded-full flex items-center justify-center text-red-600 dark:text-red-500">
|
||||
<AlertTriangle size={40} />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold">Access Denied</h2>
|
||||
<p className="text-gray-600 dark:text-gray-400 max-w-md">{authError}</p>
|
||||
<h2 className="text-2xl font-black">Access Denied</h2>
|
||||
<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>
|
||||
</div>
|
||||
);
|
||||
@@ -96,7 +96,7 @@ export default function AnalyticsPage() {
|
||||
<select
|
||||
value={selectedCohortId}
|
||||
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>
|
||||
{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
|
||||
</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
|
||||
</div>
|
||||
</div>
|
||||
@@ -115,61 +115,61 @@ export default function AnalyticsPage() {
|
||||
>
|
||||
<div className="space-y-12">
|
||||
{/* 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
|
||||
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
|
||||
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
|
||||
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>
|
||||
</div>
|
||||
|
||||
{activeAnalyticsTab === "overview" && (
|
||||
<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="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="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} />
|
||||
</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 className="text-4xl font-black">{analytics.total_enrollments}</div>
|
||||
<div className="text-xs text-green-400 font-bold mt-2">Active Learners</div>
|
||||
<div className="text-4xl font-black text-slate-900 dark:text-white">{analytics.total_enrollments}</div>
|
||||
<div className="text-xs text-green-600 dark:text-green-400 font-black uppercase mt-2 tracking-wider">Active Learners</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/5 border border-white/10 rounded-3xl p-8 group hover:bg-white/[0.07] transition-all">
|
||||
<div className="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="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} />
|
||||
</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 className="text-4xl font-black">{Math.round(analytics.average_score * 100)}%</div>
|
||||
<div className="text-xs text-gray-500 font-bold mt-2">Across all assessments</div>
|
||||
<div className="text-4xl font-black text-slate-900 dark:text-white">{Math.round(analytics.average_score * 100)}%</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 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="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} />
|
||||
</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 className="text-4xl font-black">{difficultLessons.length}</div>
|
||||
<div className="text-xs text-orange-400 font-bold mt-2">Struggling Lessons</div>
|
||||
<div className="text-4xl font-black text-slate-900 dark:text-white">{difficultLessons.length}</div>
|
||||
<div className="text-xs text-orange-600 dark:text-orange-400 font-black uppercase mt-2 tracking-wider">Struggling Lessons</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -181,19 +181,19 @@ export default function AnalyticsPage() {
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
{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>
|
||||
<h3 className="font-bold">{lesson.lesson_title}</h3>
|
||||
<p className="text-xs text-gray-500 mt-1">{lesson.submission_count} submissions</p>
|
||||
<h3 className="font-bold text-slate-800 dark:text-white">{lesson.lesson_title}</h3>
|
||||
<p className="text-xs text-slate-500 dark:text-gray-500 mt-1 font-medium">{lesson.submission_count} submissions</p>
|
||||
</div>
|
||||
<div className={`text-xl font-black ${lesson.average_score < 0.6 ? "text-red-400" : lesson.average_score < 0.8 ? "text-orange-400" : "text-green-400"}`}>
|
||||
<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)}%
|
||||
</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
|
||||
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}%` }}
|
||||
/>
|
||||
</div>
|
||||
@@ -211,14 +211,14 @@ export default function AnalyticsPage() {
|
||||
{difficultLessons.length > 0 ? (
|
||||
<div className="space-y-4">
|
||||
{difficultLessons.map(l => (
|
||||
<div key={l.lesson_id} className="bg-red-500/10 border border-red-500/20 rounded-2xl p-6 flex items-center justify-between">
|
||||
<div 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>
|
||||
<h4 className="font-bold text-red-400">{l.lesson_title}</h4>
|
||||
<p className="text-xs text-red-300/60 mt-1 text-balance max-w-xs">
|
||||
<h4 className="font-bold text-red-600 dark:text-red-400">{l.lesson_title}</h4>
|
||||
<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.
|
||||
</p>
|
||||
</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>
|
||||
@@ -230,12 +230,12 @@ export default function AnalyticsPage() {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="bg-blue-600/10 border border-blue-500/20 rounded-3xl p-8">
|
||||
<h3 className="text-lg font-bold mb-4 flex items-center gap-2">
|
||||
<BookOpen className="text-blue-400" />
|
||||
<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-black mb-4 flex items-center gap-2 uppercase tracking-wide text-blue-700 dark:text-white">
|
||||
<BookOpen className="text-blue-600 dark:text-blue-400" />
|
||||
Content Strategy Tip
|
||||
</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't clearly explained in previous lessons.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -83,7 +83,7 @@ export default function AnnouncementsPage() {
|
||||
placeholder="Search announcements..."
|
||||
value={searchTerm}
|
||||
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>
|
||||
@@ -97,7 +97,7 @@ export default function AnnouncementsPage() {
|
||||
) : filteredAnnouncements.length > 0 ? (
|
||||
<div className="grid gap-6">
|
||||
{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-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">
|
||||
@@ -108,8 +108,8 @@ export default function AnnouncementsPage() {
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-gray-900 dark:text-white">{a.author_name}</h4>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-400">
|
||||
<h4 className="font-semibold text-slate-900 dark:text-white">{a.author_name}</h4>
|
||||
<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>
|
||||
{a.cohort_ids && a.cohort_ids.length > 0 && (
|
||||
<>
|
||||
@@ -133,8 +133,8 @@ export default function AnnouncementsPage() {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">{a.title}</h3>
|
||||
<p className="text-gray-300 whitespace-pre-wrap">{a.content}</p>
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-2">{a.title}</h3>
|
||||
<p className="text-slate-600 dark:text-gray-300 whitespace-pre-wrap">{a.content}</p>
|
||||
|
||||
{/* Display Target Cohort Names if segmented */}
|
||||
{a.cohort_ids && a.cohort_ids.length > 0 && (
|
||||
@@ -153,10 +153,10 @@ export default function AnnouncementsPage() {
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white/5 border border-white/10 rounded-2xl p-20 text-center">
|
||||
<Megaphone className="w-12 h-12 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>
|
||||
<p className="text-gray-400">Start by creating a new announcement for your students.</p>
|
||||
<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-slate-400 dark:text-gray-600 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-2">No announcements found</h3>
|
||||
<p className="text-slate-500 dark:text-gray-400">Start by creating a new announcement for your students.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -212,14 +212,14 @@ function NewAnnouncementModal({ courseId, cohorts, onClose, onSuccess }: { cours
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
|
||||
<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="p-6 border-b border-white/5 flex items-center justify-between">
|
||||
<h2 className="text-xl font-bold flex items-center gap-2">
|
||||
<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-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-slate-100 dark:border-white/5 flex items-center justify-between">
|
||||
<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" />
|
||||
Create New Announcement
|
||||
</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" />
|
||||
</button>
|
||||
</div>
|
||||
@@ -230,7 +230,7 @@ function NewAnnouncementModal({ courseId, cohorts, onClose, onSuccess }: { cours
|
||||
required
|
||||
value={title}
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
@@ -241,7 +241,7 @@ function NewAnnouncementModal({ courseId, cohorts, onClose, onSuccess }: { cours
|
||||
rows={5}
|
||||
value={content}
|
||||
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..."
|
||||
/>
|
||||
</div>
|
||||
@@ -258,7 +258,7 @@ function NewAnnouncementModal({ courseId, cohorts, onClose, onSuccess }: { cours
|
||||
key={c.id}
|
||||
type="button"
|
||||
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}
|
||||
</button>
|
||||
@@ -272,9 +272,9 @@ function NewAnnouncementModal({ courseId, cohorts, onClose, onSuccess }: { cours
|
||||
id="pin"
|
||||
checked={isPinned}
|
||||
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
|
||||
</label>
|
||||
</div>
|
||||
@@ -286,7 +286,7 @@ function NewAnnouncementModal({ courseId, cohorts, onClose, onSuccess }: { cours
|
||||
<button
|
||||
type="submit"
|
||||
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" />}
|
||||
Publish Announcement
|
||||
|
||||
@@ -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 gap-6">
|
||||
<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">
|
||||
<button onClick={prevMonth} className="p-2 hover:bg-white/10 rounded-lg transition-colors"><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={nextMonth} className="p-2 hover:bg-white/10 rounded-lg transition-colors"><ChevronRight className="w-5 h-5" /></button>
|
||||
<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-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 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-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>
|
||||
|
||||
|
||||
@@ -166,11 +166,11 @@ export default function GradebookPage() {
|
||||
|
||||
{/* Bulk Enroll Modal */}
|
||||
{showBulkEnroll && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
|
||||
<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="p-6 border-b border-white/5 flex items-center justify-between">
|
||||
<h3 className="text-xl font-bold flex items-center gap-2">
|
||||
<Users className="text-blue-400" /> Inscripción Masiva de Estudiantes
|
||||
<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-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-slate-100 dark:border-white/5 flex items-center justify-between">
|
||||
<h3 className="text-xl font-bold flex items-center gap-2 text-slate-900 dark:text-white">
|
||||
<Users className="text-blue-500 dark:text-blue-400" /> Inscripción Masiva de Estudiantes
|
||||
</h3>
|
||||
<button
|
||||
onClick={() => {
|
||||
@@ -188,14 +188,14 @@ export default function GradebookPage() {
|
||||
{!bulkResults ? (
|
||||
<>
|
||||
<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)
|
||||
</label>
|
||||
<textarea
|
||||
value={bulkEmails}
|
||||
onChange={(e) => setBulkEmails(e.target.value)}
|
||||
placeholder="student1@example.com 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 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 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 ? (
|
||||
<>
|
||||
<button
|
||||
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
|
||||
</button>
|
||||
@@ -280,7 +280,7 @@ export default function GradebookPage() {
|
||||
<select
|
||||
value={selectedCohortId}
|
||||
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>
|
||||
{cohorts.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
|
||||
@@ -296,15 +296,15 @@ export default function GradebookPage() {
|
||||
placeholder="Search students..."
|
||||
value={searchQuery}
|
||||
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 className="flex gap-8 border-l border-white/10 pl-8">
|
||||
<div>
|
||||
<p className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-1">Students</p>
|
||||
<p className="text-2xl font-black">{filteredStudents.length}</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 text-slate-900 dark:text-white">{filteredStudents.length}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-1">Avg Score</p>
|
||||
|
||||
@@ -98,29 +98,29 @@ export default function GradingPolicyPage() {
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Categories List */}
|
||||
<div className="lg:col-span-2 space-y-4">
|
||||
<h2 className="text-sm font-semibold uppercase tracking-wider text-gray-500 mb-6 flex items-center gap-2">
|
||||
<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
|
||||
</h2>
|
||||
|
||||
{categories.length === 0 ? (
|
||||
<div className="bg-white/5 border border-white/10 rounded-2xl p-12 text-center">
|
||||
<TrendingUp className="w-12 h-12 text-gray-600 mx-auto mb-4" />
|
||||
<p className="text-gray-400 italic">No grading categories defined yet.</p>
|
||||
<div 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-slate-400 dark:text-gray-600 mx-auto mb-4" />
|
||||
<p className="text-slate-500 dark:text-gray-400 italic">No grading categories defined yet.</p>
|
||||
</div>
|
||||
) : (
|
||||
categories.map((cat) => (
|
||||
<div
|
||||
key={cat.id}
|
||||
className="group bg-white/5 border border-white/10 p-6 rounded-2xl flex items-center justify-between hover:border-blue-500/50 hover:bg-white/[0.07] transition-all duration-300"
|
||||
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="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}%
|
||||
</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">
|
||||
<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}%
|
||||
</span>
|
||||
</div>
|
||||
@@ -128,7 +128,7 @@ export default function GradingPolicyPage() {
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleDelete(cat.id)}
|
||||
className="p-3 bg-red-500/10 text-red-400 rounded-xl opacity-0 group-hover:opacity-100 hover:bg-red-500 hover:text-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" />
|
||||
</button>
|
||||
@@ -139,45 +139,45 @@ export default function GradingPolicyPage() {
|
||||
|
||||
{/* Add New Category Form */}
|
||||
<div className="space-y-6">
|
||||
<div className="bg-gradient-to-br from-gray-800/50 to-gray-900/50 p-8 rounded-3xl border border-white/10 sticky top-8">
|
||||
<h2 className="text-xl font-bold mb-6 flex items-center gap-2">
|
||||
<Plus className="w-5 h-5 text-blue-400" /> New Format
|
||||
<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 text-slate-900 dark:text-white">
|
||||
<Plus className="w-5 h-5 text-blue-500 dark:text-blue-400" /> New Format
|
||||
</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
<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
|
||||
value={newName}
|
||||
onChange={(e) => setNewName(e.target.value)}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 mt-1.5 focus:outline-none focus:border-blue-500 transition-all text-gray-100 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="Continuous Assessment" className="bg-white dark:bg-gray-900">Continuous Assessment (Min 4)</option>
|
||||
<option value="Midterm" className="bg-white dark:bg-gray-900">Midterm</option>
|
||||
<option value="Final Test" className="bg-white dark:bg-gray-900">Final Test</option>
|
||||
<option value="Exam" className="bg-white dark:bg-gray-900">Exam</option>
|
||||
<option value="">Select a type...</option>
|
||||
<option value="Continuous Assessment">Continuous Assessment (Min 4)</option>
|
||||
<option value="Midterm">Midterm</option>
|
||||
<option value="Final Test">Final Test</option>
|
||||
<option value="Exam">Exam</option>
|
||||
</select>
|
||||
</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">
|
||||
<input
|
||||
type="number"
|
||||
placeholder="20"
|
||||
value={newWeight || ""}
|
||||
onChange={(e) => setNewWeight(parseInt(e.target.value) || 0)}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-blue-500 transition-all text-gray-100 pl-10"
|
||||
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>
|
||||
|
||||
<button
|
||||
onClick={handleAdd}
|
||||
disabled={submitting || !newName || newWeight <= 0}
|
||||
className="w-full bg-blue-600 hover:bg-blue-500 disabled:bg-gray-700 disabled:text-gray-500 text-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..." : (
|
||||
<>
|
||||
@@ -189,8 +189,8 @@ export default function GradingPolicyPage() {
|
||||
|
||||
{!isBalanced && (
|
||||
<div className="mt-6 p-4 rounded-xl bg-amber-500/10 border border-amber-500/20 flex gap-3">
|
||||
<AlertCircle className="w-5 h-5 text-amber-500 shrink-0 mt-0.5" />
|
||||
<p className="text-sm text-amber-200/80 leading-relaxed">
|
||||
<AlertCircle className="w-5 h-5 text-amber-600 dark:text-amber-500 shrink-0 mt-0.5" />
|
||||
<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>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -366,11 +366,11 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
|
||||
return (
|
||||
<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="flex items-center gap-2 text-[10px] 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>
|
||||
<span className="text-gray-700">/</span>
|
||||
<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-slate-900 dark:text-white transition-colors">Outline</Link>
|
||||
<span className="text-slate-300 dark:text-gray-700">/</span>
|
||||
<span>Activity</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
@@ -388,10 +388,10 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
</div>
|
||||
) : (
|
||||
<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
|
||||
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" />
|
||||
</button>
|
||||
@@ -403,13 +403,13 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
<div className="flex items-center gap-3">
|
||||
{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={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={() => 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 text-white">
|
||||
{isSaving ? "Saving..." : "Publish Changes"}
|
||||
</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
|
||||
</button>
|
||||
)}
|
||||
@@ -417,13 +417,13 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
</div>
|
||||
|
||||
{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>
|
||||
<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
|
||||
</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>
|
||||
<label className="relative inline-flex items-center cursor-pointer group">
|
||||
<input
|
||||
@@ -432,19 +432,19 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
onChange={(e) => setIsGraded(e.target.checked)}
|
||||
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>
|
||||
<span className="ms-3 text-sm font-bold uppercase tracking-widest text-gray-400 peer-checked:text-blue-400 transition-colors">
|
||||
<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-slate-400 dark:text-gray-400 peer-checked:text-blue-600 dark:peer-checked:text-blue-400 transition-colors">
|
||||
{isGraded ? "Graded" : "Not Graded"}
|
||||
</span>
|
||||
</label>
|
||||
</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>
|
||||
<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
|
||||
</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>
|
||||
<label className="relative inline-flex items-center cursor-pointer group">
|
||||
<input
|
||||
@@ -453,8 +453,8 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
onChange={(e) => setIsPreviewable(e.target.checked)}
|
||||
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>
|
||||
<span className="ms-3 text-sm font-bold uppercase tracking-widest text-gray-400 peer-checked:text-blue-400 transition-colors">
|
||||
<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-slate-400 dark:text-gray-400 peer-checked:text-blue-600 dark:peer-checked:text-blue-400 transition-colors">
|
||||
{isPreviewable ? "Preview Enabled" : "Preview Disabled"}
|
||||
</span>
|
||||
</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="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
|
||||
value={selectedCategoryId}
|
||||
onChange={(e) => setSelectedCategoryId(e.target.value)}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-blue-500 transition-all appearance-none font-bold"
|
||||
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) => (
|
||||
<option key={cat.id} value={cat.id} className="bg-gray-900 border-0">
|
||||
<option key={cat.id} value={cat.id}>
|
||||
{cat.name} ({cat.weight}%)
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<div className="text-[10px] text-gray-500 italic mt-1 pl-1">
|
||||
Manage categories in <Link href={`/courses/${params.id}/grading`} className="text-blue-400 hover:underline">Grading Policy</Link>
|
||||
<div className="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-600 dark:text-blue-400 hover:underline">Grading Policy</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<span className="text-[10px] font-black uppercase tracking-widest text-gray-500 mb-2 block">Rubric (Optional)</span>
|
||||
<div className="bg-white/5 border border-white/10 rounded-xl p-4 max-h-48 overflow-y-auto space-y-2">
|
||||
<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-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 ? (
|
||||
<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 => {
|
||||
const isAssigned = assignedRubricIds.includes(rubric.id);
|
||||
return (
|
||||
<label key={rubric.id} className="flex items-center justify-between p-2 rounded-lg hover:bg-white/5 transition-all cursor-pointer group">
|
||||
<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">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isAssigned}
|
||||
onChange={() => toggleRubric(rubric.id, isAssigned)}
|
||||
className="w-4 h-4 rounded border-gray-700 bg-gray-800 text-blue-500 focus:ring-blue-500"
|
||||
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>
|
||||
<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>
|
||||
);
|
||||
})
|
||||
@@ -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="space-y-4">
|
||||
<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">
|
||||
<input
|
||||
type="number"
|
||||
value={maxAttempts || ""}
|
||||
onChange={(e) => setMaxAttempts(e.target.value ? parseInt(e.target.value) : null)}
|
||||
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>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<input
|
||||
type="checkbox"
|
||||
@@ -539,54 +539,54 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
onChange={(e) => setAllowRetry(e.target.checked)}
|
||||
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>
|
||||
<span className="text-sm font-bold text-gray-400 peer-checked:text-gray-900 dark:text-white transition-colors">Allow Instant Corrections</span>
|
||||
<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-slate-400 dark:text-gray-400 peer-checked:text-slate-900 dark:peer-checked:text-white transition-colors">Allow Instant Corrections</span>
|
||||
</label>
|
||||
<p className="text-[10px] text-gray-600 italic">Enables "Check Answer" buttons for individual blocks</p>
|
||||
<p className="text-[10px] text-slate-500 dark:text-gray-600 italic">Enables "Check Answer" buttons for individual blocks</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-8 border-t border-white/5 animate-in fade-in duration-500 delay-150">
|
||||
<div className="flex items-center gap-2 mb-6 uppercase tracking-[0.2em] text-[10px] font-black text-gray-500">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-blue-500 shadow-lg shadow-blue-500/50"></span>
|
||||
<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-slate-400 dark:text-gray-500">
|
||||
<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
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-sm font-bold text-gray-200">Prerequisites</h4>
|
||||
<p className="text-xs text-gray-500 leading-relaxed">
|
||||
<h4 className="text-sm font-bold text-slate-900 dark:text-gray-200">Prerequisites</h4>
|
||||
<p className="text-xs text-slate-500 dark:text-gray-500 leading-relaxed">
|
||||
Students must complete these lessons before they can access this one.
|
||||
</p>
|
||||
<div className="bg-white/5 border border-white/10 rounded-2xl p-4 max-h-60 overflow-y-auto space-y-2">
|
||||
<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 ? (
|
||||
<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 => {
|
||||
const dep = dependencies.find(d => d.prerequisite_lesson_id === l.id);
|
||||
const isAssigned = !!dep;
|
||||
return (
|
||||
<div key={l.id} className="space-y-2 p-2 rounded-xl hover:bg-white/5 transition-all group border border-transparent hover:border-white/10">
|
||||
<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">
|
||||
<div className="flex items-center gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isAssigned}
|
||||
onChange={() => toggleDependency(l.id, isAssigned)}
|
||||
className="w-4 h-4 rounded-md border-gray-700 bg-gray-800 text-blue-500 focus:ring-blue-500 transition-all"
|
||||
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}
|
||||
</span>
|
||||
</div>
|
||||
{l.is_graded && (
|
||||
<span className="text-[9px] font-black uppercase tracking-tighter px-2 py-0.5 bg-blue-500/10 text-blue-400 rounded-full border border-blue-500/20">Graded</span>
|
||||
<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>
|
||||
{isAssigned && l.is_graded && (
|
||||
<div className="pl-7 animate-in slide-in-from-left-2 duration-300">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-[10px] text-gray-500 font-bold uppercase tracking-widest whitespace-nowrap">Min. Score %</span>
|
||||
<span className="text-[10px] text-slate-500 dark:text-gray-500 font-bold uppercase tracking-widest whitespace-nowrap">Min. Score %</span>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
@@ -604,7 +604,7 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
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>
|
||||
@@ -616,26 +616,25 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
</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="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>
|
||||
<h5 className="text-sm font-bold text-indigo-300">Intelligent Sequences</h5>
|
||||
<p className="text-[11px] text-indigo-300/60 leading-relaxed mt-1">
|
||||
<h5 className="text-sm font-bold text-indigo-600 dark:text-indigo-300">Intelligent Sequences</h5>
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-4 rounded-2xl bg-blue-500/5 border border-blue-500/10">
|
||||
<div className="p-2 rounded-xl bg-blue-500/20">
|
||||
<CheckCircle2 className="w-5 h-5 text-blue-400" />
|
||||
<CheckCircle2 className="w-5 h-5 text-blue-600 dark:text-blue-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="text-sm font-bold text-blue-300">Completion Tracking</h5>
|
||||
<p className="text-[11px] text-blue-300/60 leading-relaxed mt-1">
|
||||
<h5 className="text-sm font-bold text-blue-600 dark:text-blue-300">Completion Tracking</h5>
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
@@ -645,45 +644,45 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div >
|
||||
</div>
|
||||
)}
|
||||
|
||||
{
|
||||
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>
|
||||
<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
|
||||
</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 className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="space-y-4">
|
||||
<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
|
||||
type="date"
|
||||
value={dueDate}
|
||||
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>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<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
|
||||
value={importantDateType}
|
||||
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="exam" className="bg-gray-900">Exam</option>
|
||||
<option value="assignment" className="bg-gray-900">Assignment</option>
|
||||
<option value="milestone" className="bg-gray-900">Milestone</option>
|
||||
<option value="live-session" className="bg-gray-900">Live Session</option>
|
||||
<option value="">Standard Activity</option>
|
||||
<option value="exam">Exam</option>
|
||||
<option value="assignment">Assignment</option>
|
||||
<option value="milestone">Milestone</option>
|
||||
<option value="live-session">Live Session</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
@@ -695,21 +694,20 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
{/* AI Magic Section */}
|
||||
{
|
||||
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">
|
||||
<span className="text-2xl">🪄</span>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold italic tracking-tight">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>
|
||||
<h3 className="text-xl font-bold italic tracking-tight text-slate-900 dark:text-white">AI Content Assistant</h3>
|
||||
<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 className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
|
||||
<button
|
||||
onClick={handleSummarize}
|
||||
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>
|
||||
<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
|
||||
onClick={handleGenerateQuiz}
|
||||
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>
|
||||
<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">
|
||||
<span className="text-2xl">✨</span>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold font-black italic tracking-tight">AI Lesson Summary</h3>
|
||||
<p className="text-xs text-gray-400 mt-1 uppercase tracking-widest font-bold">Key insights generated from content</p>
|
||||
<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-slate-500 dark:text-gray-400 mt-1 uppercase tracking-widest font-bold">Key insights generated from content</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -749,10 +747,10 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
value={summary}
|
||||
onChange={(e) => setSummary(e.target.value)}
|
||||
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">
|
||||
"{summary}"
|
||||
</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` }}>
|
||||
{editMode && (
|
||||
<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
|
||||
onClick={() => moveBlock(index, 'up')}
|
||||
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"
|
||||
>
|
||||
<ChevronUp className="w-5 h-5" />
|
||||
@@ -777,7 +775,7 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
<button
|
||||
onClick={() => moveBlock(index, 'down')}
|
||||
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"
|
||||
>
|
||||
<ChevronDown className="w-5 h-5" />
|
||||
@@ -785,14 +783,14 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
<div className="h-4"></div>
|
||||
<button
|
||||
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"
|
||||
>
|
||||
<BookMarked className="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
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"
|
||||
>
|
||||
<Trash2 className="w-5 h-5" />
|
||||
|
||||
@@ -240,7 +240,7 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
|
||||
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
|
||||
</button>
|
||||
@@ -261,26 +261,26 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
|
||||
>
|
||||
<div className="space-y-6">
|
||||
{modules.map((module: FullModule, mIndex: number) => (
|
||||
<div key={module.id} className="glass rounded-xl overflow-hidden border-white/5">
|
||||
<div className="bg-white/5 px-6 py-4 flex justify-between items-center border-b 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-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 flex-col">
|
||||
<button
|
||||
onClick={() => handleReorderModule(mIndex, 'up')}
|
||||
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" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleReorderModule(mIndex, 'down')}
|
||||
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" />
|
||||
</button>
|
||||
</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 ? (
|
||||
<div className="flex items-center gap-2 flex-1">
|
||||
@@ -289,7 +289,7 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
|
||||
value={editValue}
|
||||
onChange={(e) => setEditValue(e.target.value)}
|
||||
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">
|
||||
<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">
|
||||
<span
|
||||
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}`}
|
||||
</span>
|
||||
<button
|
||||
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" />
|
||||
</button>
|
||||
@@ -318,7 +318,7 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
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" />
|
||||
</button>
|
||||
@@ -331,14 +331,14 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
|
||||
<button
|
||||
onClick={() => handleReorderLesson(module.id, lIndex, 'up')}
|
||||
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" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleReorderLesson(module.id, lIndex, 'down')}
|
||||
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" />
|
||||
</button>
|
||||
@@ -346,35 +346,35 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
|
||||
|
||||
<div className="flex-1">
|
||||
{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
|
||||
autoFocus
|
||||
value={editValue}
|
||||
onChange={(e) => setEditValue(e.target.value)}
|
||||
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">
|
||||
<Save className="w-4 h-4" />
|
||||
</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" />
|
||||
</button>
|
||||
</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">
|
||||
<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" />}
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span
|
||||
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}
|
||||
</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>
|
||||
{lesson.due_date && (
|
||||
<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">
|
||||
<button
|
||||
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" />
|
||||
</button>
|
||||
<button
|
||||
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" />
|
||||
</button>
|
||||
@@ -407,7 +407,7 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
|
||||
|
||||
<button
|
||||
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
|
||||
</button>
|
||||
@@ -417,7 +417,7 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
|
||||
|
||||
<button
|
||||
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
|
||||
</button>
|
||||
|
||||
@@ -72,40 +72,40 @@ export default function TeamManagementSection({ courseId }: TeamManagementSectio
|
||||
}
|
||||
|
||||
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 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} />
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
|
||||
{/* Add Member Form */}
|
||||
<form onSubmit={handleAddMember} className="bg-white/5 border border-white/10 rounded-2xl p-6">
|
||||
<h3 className="text-sm font-bold text-gray-300 mb-4 flex items-center gap-2">
|
||||
<UserPlus size={16} /> Add Team Member
|
||||
<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-black text-slate-900 dark:text-gray-300 mb-4 flex items-center gap-2 uppercase tracking-wider">
|
||||
<UserPlus size={16} className="text-blue-600 dark:text-blue-400" /> Add Team Member
|
||||
</h3>
|
||||
<div className="flex flex-col md:flex-row gap-4">
|
||||
<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
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
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
|
||||
/>
|
||||
</div>
|
||||
<select
|
||||
value={role}
|
||||
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="assistant">Assistant</option>
|
||||
@@ -125,36 +125,36 @@ export default function TeamManagementSection({ courseId }: TeamManagementSectio
|
||||
|
||||
{/* Member List */}
|
||||
<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">
|
||||
{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="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)}
|
||||
</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.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
|
||||
</span>
|
||||
)}
|
||||
{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
|
||||
</span>
|
||||
)}
|
||||
</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 className="flex items-center gap-2">
|
||||
{member.role !== 'primary' && (
|
||||
<button
|
||||
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"
|
||||
>
|
||||
<Trash2 size={18} />
|
||||
|
||||
@@ -149,9 +149,9 @@ export default function CourseSettingsPage() {
|
||||
<TeamManagementSection courseId={id} />
|
||||
|
||||
{/* 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="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} />
|
||||
</div>
|
||||
<h2 className="section-title">Configuración de Calificaciones</h2>
|
||||
@@ -159,7 +159,7 @@ export default function CourseSettingsPage() {
|
||||
|
||||
<div className="space-y-6">
|
||||
<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
|
||||
</label>
|
||||
<div className="flex items-center gap-6">
|
||||
@@ -169,45 +169,45 @@ export default function CourseSettingsPage() {
|
||||
max="100"
|
||||
value={passingPercentage}
|
||||
onChange={(e) => setPassingPercentage(parseInt(e.target.value))}
|
||||
className="flex-1 h-2 bg-white/10 rounded-lg appearance-none cursor-pointer accent-blue-500"
|
||||
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}%
|
||||
</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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Performance Tiers Preview */}
|
||||
<div className="bg-white/5 border border-white/10 rounded-2xl p-6">
|
||||
<h3 className="text-sm font-bold text-gray-300 mb-4">Performance Tiers Preview</h3>
|
||||
<div className="bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl p-6 shadow-sm">
|
||||
<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="flex items-center gap-3">
|
||||
<div className="w-16 h-4 bg-red-500 rounded"></div>
|
||||
<span className="text-red-400 font-bold">Reprobado:</span>
|
||||
<span className="text-gray-400">0% - {Math.max(0, passingPercentage - 1)}%</span>
|
||||
<div className="w-16 h-4 bg-red-500 rounded shadow-sm"></div>
|
||||
<span className="text-red-600 dark:text-red-400 font-bold">Reprobado:</span>
|
||||
<span className="text-slate-500 dark:text-gray-400 font-medium">0% - {Math.max(0, passingPercentage - 1)}%</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-16 h-4 bg-orange-500 rounded"></div>
|
||||
<span className="text-orange-400 font-bold">Rendimiento Bajo:</span>
|
||||
<span className="text-gray-400">{passingPercentage}% - {passingPercentage + 9}%</span>
|
||||
<div className="w-16 h-4 bg-orange-500 rounded shadow-sm"></div>
|
||||
<span className="text-orange-600 dark:text-orange-400 font-bold">Rendimiento Bajo:</span>
|
||||
<span className="text-slate-500 dark:text-gray-400 font-medium">{passingPercentage}% - {passingPercentage + 9}%</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-16 h-4 bg-yellow-500 rounded"></div>
|
||||
<span className="text-yellow-400 font-bold">Rendimiento Medio:</span>
|
||||
<span className="text-gray-400">{passingPercentage + 10}% - {passingPercentage + 15}%</span>
|
||||
<div className="w-16 h-4 bg-yellow-500 rounded shadow-sm"></div>
|
||||
<span className="text-yellow-600 dark:text-yellow-400 font-bold">Rendimiento Medio:</span>
|
||||
<span className="text-slate-500 dark:text-gray-400 font-medium">{passingPercentage + 10}% - {passingPercentage + 15}%</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-16 h-4 bg-green-500 rounded"></div>
|
||||
<span className="text-green-400 font-bold">Buen Rendimiento:</span>
|
||||
<span className="text-gray-400">{passingPercentage + 16}% - 90%</span>
|
||||
<div className="w-16 h-4 bg-green-500 rounded shadow-sm"></div>
|
||||
<span className="text-green-600 dark:text-green-400 font-bold">Buen Rendimiento:</span>
|
||||
<span className="text-slate-500 dark:text-gray-400 font-medium">{passingPercentage + 16}% - 90%</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-16 h-4 bg-blue-500 rounded"></div>
|
||||
<span className="text-blue-400 font-bold">Excelente:</span>
|
||||
<span className="text-gray-400">91% - 100%</span>
|
||||
<div className="w-16 h-4 bg-blue-500 rounded shadow-sm"></div>
|
||||
<span className="text-blue-600 dark:text-blue-400 font-bold">Excelente:</span>
|
||||
<span className="text-slate-500 dark:text-gray-400 font-medium">91% - 100%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -215,9 +215,9 @@ export default function CourseSettingsPage() {
|
||||
</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="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} />
|
||||
</div>
|
||||
<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="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">
|
||||
<button
|
||||
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="text-xs text-gray-500">Learners go at their own speed.</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-slate-500 dark:text-gray-500 font-medium">Learners go at their own speed.</div>
|
||||
</button>
|
||||
<button
|
||||
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="text-xs text-gray-500">Cohort-based with specific dates.</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-slate-500 dark:text-gray-500 font-medium">Cohort-based with specific dates.</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{pacingMode === 'instructor_led' && (
|
||||
<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="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">
|
||||
<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
|
||||
type="date"
|
||||
value={startDate}
|
||||
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 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">
|
||||
<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
|
||||
type="date"
|
||||
value={endDate}
|
||||
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>
|
||||
@@ -279,17 +279,17 @@ export default function CourseSettingsPage() {
|
||||
</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="w-12 h-12 rounded-2xl bg-blue-500/10 flex items-center justify-center text-blue-400">
|
||||
<span className="text-xl font-bold">$</span>
|
||||
<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-black">$</span>
|
||||
</div>
|
||||
<h2 className="section-title">Precio del Curso</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<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">
|
||||
<input
|
||||
type="number"
|
||||
@@ -297,22 +297,22 @@ export default function CourseSettingsPage() {
|
||||
min="0"
|
||||
value={price}
|
||||
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"
|
||||
/>
|
||||
<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}
|
||||
</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 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
|
||||
value={currency}
|
||||
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="CLP">CLP - Chilean Peso</option>
|
||||
@@ -326,40 +326,40 @@ export default function CourseSettingsPage() {
|
||||
</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="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} />
|
||||
</div>
|
||||
<h2 className="section-title">Plantilla de Certificado</h2>
|
||||
</div>
|
||||
|
||||
<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.
|
||||
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>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<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
|
||||
value={certificateTemplate}
|
||||
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..."
|
||||
/>
|
||||
<button
|
||||
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
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-bold text-gray-300">Live Preview</label>
|
||||
<div className="w-full h-[400px] bg-white rounded-xl overflow-hidden relative group">
|
||||
<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 border border-slate-200 shadow-sm">
|
||||
<iframe
|
||||
srcDoc={certificateTemplate
|
||||
.replace(/{{student_name}}/g, "Jane Doe")
|
||||
@@ -377,9 +377,9 @@ export default function CourseSettingsPage() {
|
||||
</div>
|
||||
</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="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} />
|
||||
</div>
|
||||
<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="space-y-4">
|
||||
<h3 className="text-sm font-bold text-gray-300">Export Course</h3>
|
||||
<p className="text-xs text-gray-500">
|
||||
<h3 className="text-sm font-black text-slate-800 dark:text-gray-300 uppercase tracking-wider">Export Course</h3>
|
||||
<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.
|
||||
You can use this to backup or move content between organizations.
|
||||
</p>
|
||||
<button
|
||||
onClick={handleExport}
|
||||
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} />
|
||||
{exporting ? "Exporting..." : "Download JSON"}
|
||||
@@ -403,8 +403,8 @@ export default function CourseSettingsPage() {
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-sm font-bold text-gray-300">Import Course</h3>
|
||||
<p className="text-xs text-gray-500">
|
||||
<h3 className="text-sm font-black text-slate-800 dark:text-gray-300 uppercase tracking-wider">Import Course</h3>
|
||||
<p className="text-xs text-slate-500 dark:text-gray-500 font-medium">
|
||||
Upload a previously exported course JSON file. This will create a NEW course
|
||||
within the current organization based on that data.
|
||||
</p>
|
||||
|
||||
@@ -145,13 +145,13 @@ export default function CourseStudentsPage() {
|
||||
placeholder="Search by name or email..."
|
||||
value={searchTerm}
|
||||
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 className="flex items-center gap-2 w-full md:w-auto">
|
||||
<Filter size={16} className="text-gray-400" />
|
||||
<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}
|
||||
onChange={(e) => setSelectedCohortId(e.target.value)}
|
||||
>
|
||||
@@ -174,7 +174,7 @@ export default function CourseStudentsPage() {
|
||||
<tbody className="divide-y divide-white/5">
|
||||
{filteredStudents.length === 0 ? (
|
||||
<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>
|
||||
) : filteredStudents.map(student => (
|
||||
<tr key={student.user_id} className="hover:bg-white/[0.02] transition-colors group">
|
||||
|
||||
@@ -139,7 +139,7 @@ export default function CourseTeamPage() {
|
||||
</span>
|
||||
)}
|
||||
</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">
|
||||
<Mail className="w-3.5 h-3.5 opacity-60" /> {inst.email}
|
||||
</span>
|
||||
@@ -154,7 +154,7 @@ export default function CourseTeamPage() {
|
||||
{inst.role !== 'primary' && (
|
||||
<button
|
||||
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"
|
||||
>
|
||||
<Trash2 className="w-5 h-5" />
|
||||
@@ -171,12 +171,12 @@ export default function CourseTeamPage() {
|
||||
{/* Add Member Modal */}
|
||||
{
|
||||
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="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="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-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>
|
||||
<h2 className="text-2xl font-bold">Add Team Member</h2>
|
||||
<p className="text-sm text-gray-400 mt-1">Search for a user by name or email</p>
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white">Add Team Member</h2>
|
||||
<p className="text-sm text-slate-500 dark:text-gray-400 mt-1">Search for a user by name or email</p>
|
||||
</div>
|
||||
<button onClick={() => setIsAddModalOpen(false)} className="p-2 hover:bg-white/5 rounded-full transition-colors text-gray-500">
|
||||
<X className="w-6 h-6" />
|
||||
@@ -191,7 +191,7 @@ export default function CourseTeamPage() {
|
||||
placeholder="Type name or email..."
|
||||
value={searchQuery}
|
||||
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 && (
|
||||
<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">
|
||||
<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">
|
||||
<button
|
||||
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" />
|
||||
<div>
|
||||
@@ -216,7 +216,7 @@ export default function CourseTeamPage() {
|
||||
</button>
|
||||
<button
|
||||
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" />
|
||||
<div>
|
||||
@@ -234,15 +234,15 @@ export default function CourseTeamPage() {
|
||||
<button
|
||||
key={u.id}
|
||||
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="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center font-bold text-sm">
|
||||
{u.full_name.charAt(0)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-bold text-sm">{u.full_name}</div>
|
||||
<div className="text-xs text-gray-500">{u.email}</div>
|
||||
<div className="font-bold text-sm text-slate-900 dark:text-white">{u.full_name}</div>
|
||||
<div className="text-xs text-slate-500 dark:text-gray-500">{u.email}</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">
|
||||
|
||||
@@ -10,8 +10,8 @@
|
||||
--accent-primary: #3b82f6;
|
||||
--accent-secondary: #6366f1;
|
||||
|
||||
--glass-bg: rgba(255, 255, 255, 0.8);
|
||||
--glass-border: rgba(0, 0, 0, 0.15);
|
||||
--glass-bg: rgba(255, 255, 255, 0.7);
|
||||
--glass-border: rgba(0, 0, 0, 0.08);
|
||||
--glass-blur: blur(16px);
|
||||
}
|
||||
|
||||
@@ -54,7 +54,11 @@ body {
|
||||
.btn-premium {
|
||||
@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));
|
||||
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 {
|
||||
@@ -91,7 +95,7 @@ body {
|
||||
|
||||
/* Custom Scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@@ -99,10 +103,21 @@ body {
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
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 {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
.dark ::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
Reference in New Issue
Block a user