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

refactor: update UI components and pages with a refreshed visual design and improved styling.

Browse Source
This commit is contained in:
Juan Enrique Allende Cifuentes
2026-03-03 12:42:37 -03:00
parent 9123337200
commit 15f2649777
27 changed files with 1864 additions and 1557 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/studio/src/app/courses/[id]/announcements/page.tsx
+64 -59
View File
@@ -75,15 +75,15 @@ export default function AnnouncementsPage() {
Comunicados del Curso
</h2>
{/* Search Bar */}
<div className="glass p-4 rounded-2xl flex items-center gap-4">
<div className="bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 p-6 rounded-[2rem] flex items-center gap-4 shadow-sm">
<div className="relative flex-1">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 dark:text-gray-500" />
<input
type="text"
placeholder="Search announcements..."
placeholder="Find an announcement..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
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"
className="w-full bg-slate-50 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-2xl py-3.5 pl-11 pr-4 text-sm focus:outline-none focus:ring-2 focus:ring-orange-500/50 transition-all text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-gray-500 font-bold shadow-inner"
/>
</div>
</div>
@@ -95,12 +95,12 @@ export default function AnnouncementsPage() {
<p className="text-gray-400">Loading announcements...</p>
</div>
) : filteredAnnouncements.length > 0 ? (
<div className="grid gap-6">
<div className="grid gap-8">
{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-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">
<div key={a.id} className={`relative p-8 rounded-[2.5rem] border transition-all duration-300 shadow-sm ${a.is_pinned ? 'bg-orange-50 dark:bg-orange-500/10 border-orange-200 dark:border-orange-500/30' : 'bg-white dark:bg-white/5 border-slate-200 dark:border-white/10 hover:bg-slate-50 dark:hover:bg-white/10'}`}>
<div className="flex items-start justify-between mb-6">
<div className="flex items-center gap-4">
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-orange-500 to-red-500 flex items-center justify-center text-white font-black overflow-hidden shadow-lg shadow-orange-500/20 border-2 border-white dark:border-white/10">
{a.author_avatar ? (
<img src={a.author_avatar} alt={a.author_name} className="w-full h-full object-cover" />
) : (
@@ -108,8 +108,8 @@ export default function AnnouncementsPage() {
)}
</div>
<div>
<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">
<h4 className="font-black text-slate-900 dark:text-white uppercase tracking-tight">{a.author_name}</h4>
<div className="flex items-center gap-2 text-[11px] text-slate-400 dark:text-gray-500 font-bold uppercase tracking-widest mt-0.5">
<span>{formatDistanceToNow(new Date(a.created_at), { addSuffix: true, locale: es })}</span>
{a.cohort_ids && a.cohort_ids.length > 0 && (
<>
@@ -133,12 +133,12 @@ export default function AnnouncementsPage() {
</button>
</div>
</div>
<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>
<h3 className="text-2xl font-black text-slate-900 dark:text-white mb-3 uppercase tracking-tight leading-tight">{a.title}</h3>
<p className="text-slate-600 dark:text-gray-300 whitespace-pre-wrap leading-relaxed font-medium italic">{a.content}</p>
{/* Display Target Cohort Names if segmented */}
{a.cohort_ids && a.cohort_ids.length > 0 && (
<div className="mt-4 flex flex-wrap gap-2">
<div className="mt-8 flex flex-wrap gap-2 pt-6 border-t border-slate-100 dark:border-white/5">
{a.cohort_ids.map(cid => {
const cohort = cohorts.find(c => c.id === cid);
return (
@@ -153,10 +153,12 @@ export default function AnnouncementsPage() {
))}
</div>
) : (
<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 className="bg-slate-50 dark:bg-white/5 border-2 border-dashed border-slate-200 dark:border-white/10 rounded-[2.5rem] p-24 text-center shadow-inner">
<div className="w-20 h-20 rounded-3xl bg-white dark:bg-white/5 flex items-center justify-center mx-auto mb-6 shadow-sm">
<Megaphone className="w-10 h-10 text-slate-400 dark:text-gray-600 opacity-40" />
</div>
<h3 className="text-xl font-black text-slate-900 dark:text-white mb-2 uppercase tracking-tight">No announcements yet</h3>
<p className="text-xs text-slate-400 dark:text-gray-500 font-bold uppercase tracking-widest italic">Start communicating with your student body today.</p>
</div>
)}
</div>
@@ -212,53 +214,55 @@ 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 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-slate-400 hover:text-slate-900 dark:text-gray-500 dark:hover:text-white transition-colors">
<Plus className="w-6 h-6 rotate-45" />
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/40 dark:bg-black/80 backdrop-blur-md animate-in fade-in duration-300">
<div className="bg-white dark:bg-[#1a1c1e] border border-slate-200 dark:border-white/10 rounded-[2.5rem] w-full max-w-2xl overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200">
<div className="p-10 border-b border-slate-100 dark:border-white/5 flex items-center justify-between bg-slate-50/50 dark:bg-transparent">
<div>
<h2 className="text-2xl font-black flex items-center gap-3 text-slate-900 dark:text-white uppercase tracking-tight">
<Megaphone className="w-6 h-6 text-orange-500" />
New Announcement
</h2>
<p className="text-xs text-slate-400 dark:text-gray-500 font-bold uppercase tracking-widest mt-1">Share news and updates with your course</p>
</div>
<button onClick={onClose} className="p-3 hover:bg-slate-200 dark:hover:bg-white/10 rounded-2xl transition-all group active:scale-95">
<Plus size={20} className="text-slate-400 group-hover:text-slate-900 dark:group-hover:text-white transition-colors rotate-45" />
</button>
</div>
<form onSubmit={handleSubmit} className="p-6 space-y-6">
<div className="space-y-2">
<label className="text-sm font-bold text-gray-400">Title</label>
<form onSubmit={handleSubmit} className="p-10 space-y-8">
<div className="space-y-3">
<label className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 ml-1">Topic Title</label>
<input
required
value={title}
onChange={(e) => setTitle(e.target.value)}
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"
className="w-full bg-slate-50 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-2xl px-5 py-4 focus:outline-none focus:ring-2 focus:ring-orange-500/50 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-gray-500 font-bold shadow-inner"
placeholder="What's this announcement about?"
/>
</div>
<div className="space-y-2">
<label className="text-sm font-bold text-gray-400">Content</label>
<div className="space-y-3">
<label className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 ml-1">Message Body</label>
<textarea
required
rows={5}
value={content}
onChange={(e) => setContent(e.target.value)}
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..."
className="w-full bg-slate-50 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-2xl px-5 py-4 focus:outline-none focus:ring-2 focus:ring-orange-500/50 resize-none text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-gray-500 font-medium italic shadow-inner"
placeholder="Type your detailed message here..."
/>
</div>
<div className="space-y-3">
<label className="text-sm font-bold text-gray-400 flex items-center gap-2">
<Users className="w-4 h-4" />
<div className="space-y-4">
<label className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 flex items-center gap-2 ml-1">
<Users className="w-4 h-4 text-blue-500" />
Target Segments (Optional)
</label>
<p className="text-xs text-gray-500">Select specific cohorts to receive this announcement. Leave empty to send to all students.</p>
<div className="flex flex-wrap gap-2 max-h-32 overflow-y-auto p-1">
<div className="flex flex-wrap gap-2 max-h-40 overflow-y-auto p-1 custom-scrollbar">
{cohorts.map(c => (
<button
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-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'}`}
className={`px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all border shadow-sm active:scale-95 ${selectedCohorts.includes(c.id) ? 'bg-blue-600 border-blue-500 text-white shadow-blue-500/20' : 'bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-400 dark:text-gray-500 hover:border-blue-500/30'}`}
>
{c.name}
</button>
@@ -266,29 +270,30 @@ function NewAnnouncementModal({ courseId, cohorts, onClose, onSuccess }: { cours
</div>
</div>
<div className="flex items-center gap-3 p-4 bg-orange-500/5 border border-orange-500/10 rounded-2xl">
<input
type="checkbox"
id="pin"
checked={isPinned}
onChange={(e) => setIsPinned(e.target.checked)}
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-slate-600 dark:text-gray-300 cursor-pointer">
Pin this announcement to the top
<div className="flex items-center gap-4 p-5 bg-orange-50 dark:bg-orange-500/5 border border-orange-100 dark:border-orange-500/10 rounded-[2rem] shadow-sm">
<div className="relative inline-flex items-center cursor-pointer">
<input
type="checkbox"
id="pin"
checked={isPinned}
onChange={(e) => setIsPinned(e.target.checked)}
className="w-6 h-6 rounded-lg border-slate-300 dark:border-white/10 bg-white dark:bg-black/40 text-orange-600 focus:ring-orange-500/50 shadow-inner"
/>
</div>
<label htmlFor="pin" className="text-xs font-black uppercase tracking-widest text-orange-800/80 dark:text-orange-400/80 cursor-pointer">
Pin this announcement to the top of the course feed
</label>
</div>
<div className="flex justify-end gap-3 pt-4">
<button type="button" onClick={onClose} className="px-6 py-2.5 font-bold text-gray-500 hover:bg-white/5 rounded-xl transition-colors">
Cancel
<div className="flex justify-end gap-4 pt-6">
<button type="button" onClick={onClose} className="px-8 py-3 font-black text-[10px] uppercase tracking-widest text-slate-400 dark:text-gray-500 hover:text-slate-900 dark:hover:text-white transition-all active:scale-95">
Discard
</button>
<button
type="submit"
disabled={loading}
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"
disabled={loading || !title || !content}
className="px-10 py-3 bg-orange-600 hover:bg-orange-500 disabled:bg-slate-200 dark:disabled:bg-white/5 text-white disabled:text-slate-400 rounded-2xl font-black text-[10px] uppercase tracking-[0.2em] shadow-xl shadow-orange-500/20 transition-all active:scale-95 disabled:shadow-none group flex items-center gap-3"
>
{loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Megaphone className="w-4 h-4" />}
{loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Megaphone className="w-5 h-5 group-hover:scale-110 transition-transform" />}
Publish Announcement
</button>
</div>
web/studio/src/app/courses/[id]/calendar/page.tsx
+27 -27
View File
@@ -52,7 +52,7 @@ export default function CourseCalendarPage({ params }: { params: { id: string }
// Padding for first week
for (let i = 0; i < firstDay; i++) {
days.push(<div key={`empty-${i}`} className="h-32 border border-white/5 bg-white/2"></div>);
days.push(<div key={`empty-${i}`} className="h-32 border-r border-b border-slate-100 dark:border-white/5 bg-slate-50/50 dark:bg-white/2"></div>);
}
// Days of month
@@ -61,19 +61,19 @@ export default function CourseCalendarPage({ params }: { params: { id: string }
const dayLessons = lessons.filter(l => l.due_date && l.due_date.startsWith(dateStr));
days.push(
<div key={day} className="h-32 border border-white/5 p-2 relative hover:bg-white/5 transition-colors group">
<span className="text-sm font-bold text-gray-400">{day}</span>
<div className="mt-1 space-y-1 overflow-y-auto max-h-24">
<div key={day} className="h-36 border-r border-b border-slate-100 dark:border-white/5 p-3 relative hover:bg-slate-50 dark:hover:bg-white/5 transition-all group cursor-pointer">
<span className="text-xs font-black text-slate-400 dark:text-gray-500 uppercase tracking-widest">{day}</span>
<div className="mt-2 space-y-1.5 overflow-y-auto max-h-24 custom-scrollbar">
{dayLessons.map(lesson => (
<div
key={lesson.id}
className={`text-[10px] p-1 rounded truncate flex items-center gap-1 ${lesson.important_date_type === 'exam' ? 'bg-red-500/20 text-red-400 border border-red-500/30' :
lesson.important_date_type === 'assignment' ? 'bg-blue-500/20 text-blue-400 border border-blue-500/30' :
lesson.important_date_type === 'live-session' ? 'bg-purple-500/20 text-purple-400 border border-purple-500/30' :
'bg-green-500/20 text-green-400 border border-green-500/30'
className={`text-[9px] p-1.5 rounded-lg truncate flex items-center gap-1.5 font-bold uppercase tracking-tight shadow-sm border ${lesson.important_date_type === 'exam' ? 'bg-red-50 text-red-700 border-red-100 dark:bg-red-500/20 dark:text-red-400 dark:border-red-500/30' :
lesson.important_date_type === 'assignment' ? 'bg-blue-50 text-blue-700 border-blue-100 dark:bg-blue-500/20 dark:text-blue-400 dark:border-blue-500/30' :
lesson.important_date_type === 'live-session' ? 'bg-purple-50 text-purple-700 border-purple-100 dark:bg-purple-500/20 dark:text-purple-400 dark:border-purple-500/30' :
'bg-emerald-50 text-emerald-700 border-emerald-100 dark:bg-green-500/20 dark:text-green-400 dark:border-green-500/30'
}`}
>
<span className="w-1.5 h-1.5 rounded-full bg-current"></span>
<span className={`w-1.5 h-1.5 rounded-full ${lesson.important_date_type === 'exam' ? 'bg-red-500' : lesson.important_date_type === 'assignment' ? 'bg-blue-500' : lesson.important_date_type === 'live-session' ? 'bg-purple-500' : 'bg-emerald-500'}`}></span>
{lesson.title}
</div>
))}
@@ -115,24 +115,24 @@ export default function CourseCalendarPage({ params }: { params: { id: string }
</div>
<div className="flex gap-4">
<div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-gray-500">
<span className="w-2 h-2 rounded-full bg-red-500"></span> Examen
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-gray-500">
<span className="w-2.5 h-2.5 rounded-full bg-red-500 shadow-sm shadow-red-500/20"></span> Examen
</div>
<div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-gray-500">
<span className="w-2 h-2 rounded-full bg-blue-500"></span> Tarea
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-gray-500">
<span className="w-2.5 h-2.5 rounded-full bg-blue-500 shadow-sm shadow-blue-500/20"></span> Tarea
</div>
<div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-gray-500">
<span className="w-2 h-2 rounded-full bg-purple-500"></span> En Vivo
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-gray-500">
<span className="w-2.5 h-2.5 rounded-full bg-purple-500 shadow-sm shadow-purple-500/20"></span> En Vivo
</div>
<div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-gray-500">
<span className="w-2 h-2 rounded-full bg-green-500"></span> Lección
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-gray-500">
<span className="w-2.5 h-2.5 rounded-full bg-emerald-500 shadow-sm shadow-emerald-500/20"></span> Lección
</div>
</div>
</div>
<div className="grid grid-cols-7 border-t border-l border-white/5 rounded-xl overflow-hidden shadow-2xl overflow-hidden">
<div className="grid grid-cols-7 border-t border-l border-slate-200 dark:border-white/5 rounded-[2.5rem] overflow-hidden shadow-sm bg-white dark:bg-white/[0.02]">
{['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'].map(day => (
<div key={day} className="bg-white/5 py-4 text-center text-xs font-black uppercase tracking-widest text-gray-500 border-r border-b border-white/5">
<div key={day} className="bg-slate-50 dark:bg-white/5 py-4 text-center text-xs font-black uppercase tracking-widest text-slate-400 dark:text-gray-500 border-r border-b border-slate-200 dark:border-white/5">
{day}
</div>
))}
@@ -144,26 +144,26 @@ export default function CourseCalendarPage({ params }: { params: { id: string }
<AlertCircle className="w-5 h-5 text-blue-500" />
Upcoming Deadlines
</h4>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{lessons
.filter(l => l.due_date && new Date(l.due_date) >= new Date())
.sort((a, b) => new Date(a.due_date!).getTime() - new Date(b.due_date!).getTime())
.slice(0, 6)
.map(lesson => (
<div key={lesson.id} className="glass p-4 border-white/5 hover:border-blue-500/30 transition-all group">
<div key={lesson.id} className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl p-6 hover:bg-white dark:hover:bg-white/10 transition-all group shadow-sm">
<div className="flex justify-between items-start">
<div>
<div className={`text-[10px] font-black uppercase tracking-widest mb-1 ${lesson.important_date_type === 'exam' ? 'text-red-400' :
lesson.important_date_type === 'assignment' ? 'text-blue-400' :
'text-green-400'
<div className={`text-[10px] font-black uppercase tracking-[0.2em] mb-2 ${lesson.important_date_type === 'exam' ? 'text-red-500' :
lesson.important_date_type === 'assignment' ? 'text-blue-500' :
'text-emerald-500'
}`}>
{lesson.important_date_type || 'Activity'}
</div>
<h5 className="font-bold group-hover:text-blue-400 transition-colors">{lesson.title}</h5>
<h5 className="font-bold text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors uppercase tracking-tight">{lesson.title}</h5>
</div>
<div className="text-right">
<div className="text-sm font-black">{new Date(lesson.due_date!).toLocaleDateString()}</div>
<div className="text-[10px] text-gray-500 uppercase font-bold">Due Date</div>
<div className="text-sm font-black text-slate-900 dark:text-white">{new Date(lesson.due_date!).toLocaleDateString()}</div>
<div className="text-[10px] text-slate-400 dark:text-gray-500 uppercase font-black mt-0.5 tracking-tighter">Due Date</div>
</div>
</div>
</div>
web/studio/src/app/courses/[id]/files/page.tsx
+38 -28
View File
@@ -95,60 +95,70 @@ export default function CourseFilesPage() {
/>
<label
htmlFor="file-upload"
className={`flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-bold text-sm shadow-md shadow-blue-600/20 transition-all cursor-pointer active:scale-95 ${isUploading ? 'opacity-50 cursor-wait' : ''}`}
className={`flex items-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl font-black text-[10px] uppercase tracking-[0.2em] shadow-xl shadow-blue-500/20 transition-all cursor-pointer active:scale-95 ${isUploading ? 'opacity-50 cursor-wait' : ''}`}
>
{!isUploading && <Upload className="w-4 h-4" />}
{isUploading ? `Subiendo ${uploadProgress}%` : 'Subir Archivo'}
{isUploading ? `UPLOADING ${uploadProgress}%` : 'SUBIR ARCHIVO'}
</label>
</div>
}
>
<div className="space-y-6">
<div className="glass rounded-xl overflow-hidden">
<table className="w-full text-left">
<thead className="bg-white/5 border-b border-white/10 text-gray-400 font-medium">
<tr>
<th className="p-4">Name</th>
<th className="p-4">Type</th>
<th className="p-4">Size</th>
<th className="p-4">Uploaded</th>
<th className="p-4 text-right">Actions</th>
<div className="bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[2.5rem] overflow-hidden shadow-sm">
<table className="w-full text-left border-collapse">
<thead>
<tr className="bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/5">
<th className="p-6 text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500">Asset Name</th>
<th className="p-6 text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500">MIME Type</th>
<th className="p-6 text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500">Size</th>
<th className="p-6 text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500">Uploaded</th>
<th className="p-6 text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 text-right">Actions</th>
</tr>
</thead>
<tbody className="divide-y divide-white/5">
<tbody className="divide-y divide-slate-100 dark:divide-white/5">
{isLoading ? (
<tr><td colSpan={5} className="p-8 text-center text-gray-500">Loading files...</td></tr>
<tr><td colSpan={5} className="p-12 text-center text-slate-400 dark:text-gray-500 font-bold italic animate-pulse">Scanning server for assets...</td></tr>
) : assets.length === 0 ? (
<tr><td colSpan={5} className="p-12 text-center text-gray-500">No files uploaded yet.</td></tr>
<tr>
<td colSpan={5} className="p-24 text-center">
<div className="flex flex-col items-center justify-center gap-4 text-slate-300 dark:text-gray-600">
<div className="w-20 h-20 rounded-3xl bg-slate-50 dark:bg-white/5 border-2 border-dashed border-slate-100 dark:border-white/5 flex items-center justify-center">
<FileIcon className="w-10 h-10 opacity-20" />
</div>
<p className="text-xs font-black uppercase tracking-widest">No assets found for this course</p>
</div>
</td>
</tr>
) : (
assets.map((asset) => (
<tr key={asset.id} className="hover:bg-white/5 transition-colors">
<td className="p-4">
<div className="flex items-center gap-3">
{getIcon(asset.mimetype)}
<tr key={asset.id} className="hover:bg-slate-50 dark:hover:bg-white/[0.02] transition-colors group">
<td className="p-6">
<div className="flex items-center gap-5">
<div className="w-14 h-14 rounded-2xl bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/10 flex items-center justify-center shadow-sm group-hover:scale-110 transition-transform">
{getIcon(asset.mimetype)}
</div>
<div>
<div className="font-medium text-gray-900 dark:text-white">{asset.filename}</div>
<div className="text-xs text-blue-400">{getImageUrl(asset.storage_path.replace('uploads/', '/assets/'))}</div>
<div className="font-black text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors uppercase tracking-tight text-sm">{asset.filename}</div>
<div className="text-[11px] text-blue-500/60 font-mono mt-1 break-all max-w-sm">{getImageUrl(asset.storage_path.replace('uploads/', '/assets/'))}</div>
</div>
</div>
</td>
<td className="p-4 text-gray-400 font-mono text-sm">{asset.mimetype}</td>
<td className="p-4 text-gray-400 text-sm">{formatSize(asset.size_bytes)}</td>
<td className="p-4 text-gray-400 text-sm">{new Date(asset.created_at).toLocaleDateString()}</td>
<td className="p-4 text-right">
<div className="flex justify-end gap-2">
<td className="p-6 text-slate-400 dark:text-gray-500 font-mono text-xs uppercase font-bold">{asset.mimetype}</td>
<td className="p-6 text-slate-900 dark:text-white font-black text-sm uppercase tracking-tighter">{formatSize(asset.size_bytes)}</td>
<td className="p-6 text-slate-400 dark:text-gray-500 text-xs font-bold">{new Date(asset.created_at).toLocaleDateString()}</td>
<td className="p-6 text-right">
<div className="flex justify-end gap-3">
<button
onClick={() => copyToClipboard(asset.storage_path.replace('uploads/', '/assets/'))}
title="Copy Internal URL"
className="p-2 hover:bg-white/10 rounded-lg transition-colors text-blue-400"
className="w-10 h-10 flex items-center justify-center bg-slate-100 dark:bg-white/5 hover:bg-blue-600 hover:text-white rounded-xl transition-all text-blue-500 shadow-sm active:scale-90"
>
<Copy className="w-4 h-4" />
</button>
<button
onClick={() => handleDelete(asset.id)}
title="Delete File"
className="p-2 hover:bg-white/10 rounded-lg transition-colors text-red-400"
className="w-10 h-10 flex items-center justify-center bg-slate-100 dark:bg-white/5 hover:bg-red-600 hover:text-white rounded-xl transition-all text-red-500 shadow-sm active:scale-90"
>
<Trash2 className="w-4 h-4" />
</button>
web/studio/src/app/courses/[id]/grades/page.tsx
+95 -85
View File
@@ -149,9 +149,9 @@ export default function GradebookPage() {
<div className="flex items-center gap-3">
<button
onClick={() => setShowBulkEnroll(true)}
className="bg-white/5 hover:bg-white/10 border border-white/10 px-4 py-2 rounded-xl flex items-center gap-2 transition-all font-medium text-sm"
className="bg-slate-50 dark:bg-white/5 hover:bg-slate-100 dark:hover:bg-white/10 border border-slate-200 dark:border-white/10 px-4 py-2 rounded-xl flex items-center gap-2 transition-all font-bold text-xs uppercase tracking-widest text-slate-600 dark:text-gray-400 shadow-sm"
>
<Users size={16} /> Inscripción Masiva
<Users size={16} className="text-blue-500" /> Inscripción Masiva
</button>
<button
onClick={exportCSV}
@@ -166,66 +166,73 @@ 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 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>
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/40 dark:bg-black/80 backdrop-blur-md animate-in fade-in duration-300">
<div className="bg-white dark:bg-[#1a1d23] border border-slate-200 dark:border-white/10 rounded-[2.5rem] w-full max-w-2xl overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200">
<div className="p-8 border-b border-slate-100 dark:border-white/5 flex items-center justify-between bg-slate-50/50 dark:bg-transparent">
<div>
<h3 className="text-2xl font-black flex items-center gap-3 text-slate-900 dark:text-white uppercase tracking-tight">
<Users className="text-blue-600 dark:text-blue-400" /> Inscripción Masiva
</h3>
<p className="text-xs text-slate-400 dark:text-gray-500 font-bold uppercase tracking-widest mt-1">Enroll multiple students at once</p>
</div>
<button
onClick={() => {
setShowBulkEnroll(false);
setBulkResults(null);
setBulkEmails("");
}}
className="p-1 hover:bg-white/5 rounded-lg transition-colors"
className="p-3 hover:bg-slate-200 dark:hover:bg-white/10 rounded-2xl transition-all group active:scale-95"
>
<X size={20} />
<X size={20} className="text-slate-400 group-hover:text-slate-900 dark:group-hover:text-white" />
</button>
</div>
<div className="p-8 space-y-6">
<div className="p-8 space-y-8">
{!bulkResults ? (
<>
<div>
<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 className="block text-xs font-black uppercase tracking-widest text-slate-400 dark:text-gray-500 mb-3">
Enter email addresses (separated by commas or new lines)
</label>
<textarea
value={bulkEmails}
onChange={(e) => setBulkEmails(e.target.value)}
placeholder="student1@example.com&#10;student2@example.com"
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"
className="w-full h-48 bg-slate-50 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-3xl p-5 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 shadow-inner leading-relaxed"
/>
</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">
<AlertTriangle size={18} className="shrink-0" />
Los estudiantes deben tener una cuenta en esta organización para ser inscritos.
<div className="bg-blue-50 dark:bg-blue-500/10 border border-blue-100 dark:border-blue-500/20 rounded-2xl p-5 flex gap-4">
<div className="w-10 h-10 rounded-xl bg-white dark:bg-black/20 flex items-center justify-center shrink-0 shadow-sm text-blue-500">
<AlertTriangle size={20} />
</div>
<p className="text-xs text-blue-800/80 dark:text-blue-300 leading-relaxed font-bold uppercase tracking-tight">
Students must already have an account in this organization directory to be successfully enrolled into the course.
</p>
</div>
</>
) : (
<div className="space-y-6">
<div className="grid grid-cols-3 gap-4">
<div className="bg-green-500/10 border border-green-500/20 rounded-xl p-4 text-center">
<div className="text-2xl font-black text-green-400">{bulkResults.successful_emails.length}</div>
<div className="text-xs uppercase tracking-widest text-gray-500 font-bold mt-1">Enrolled</div>
<div className="space-y-8">
<div className="grid grid-cols-3 gap-6">
<div className="bg-green-50 dark:bg-green-500/10 border border-green-100 dark:border-green-500/20 rounded-[2rem] p-6 text-center shadow-sm">
<div className="text-3xl font-black text-green-600 dark:text-green-400">{bulkResults.successful_emails.length}</div>
<div className="text-[10px] uppercase tracking-[0.2em] text-green-700/50 dark:text-gray-500 font-black mt-1">Enrolled</div>
</div>
<div className="bg-yellow-500/10 border border-yellow-500/20 rounded-xl p-4 text-center">
<div className="text-2xl font-black text-yellow-400">{bulkResults.already_enrolled_emails.length}</div>
<div className="text-xs uppercase tracking-widest text-gray-500 font-bold mt-1">Skipped</div>
<div className="bg-yellow-50 dark:bg-yellow-500/10 border border-yellow-100 dark:border-yellow-500/20 rounded-[2rem] p-6 text-center shadow-sm">
<div className="text-3xl font-black text-yellow-600 dark:text-yellow-400">{bulkResults.already_enrolled_emails.length}</div>
<div className="text-[10px] uppercase tracking-[0.2em] text-yellow-700/50 dark:text-gray-500 font-black mt-1">Skipped</div>
</div>
<div className="bg-red-500/10 border border-red-500/20 rounded-xl p-4 text-center">
<div className="text-2xl font-black text-red-400">{bulkResults.failed_emails.length}</div>
<div className="text-xs uppercase tracking-widest text-gray-500 font-bold mt-1">Failed</div>
<div className="bg-red-50 dark:bg-red-500/10 border border-red-100 dark:border-red-500/20 rounded-[2rem] p-6 text-center shadow-sm">
<div className="text-3xl font-black text-red-600 dark:text-red-400">{bulkResults.failed_emails.length}</div>
<div className="text-[10px] uppercase tracking-[0.2em] text-red-700/50 dark:text-gray-500 font-black mt-1">Failed</div>
</div>
</div>
{bulkResults.failed_emails.length > 0 && (
<div>
<p className="text-xs font-bold text-gray-500 uppercase tracking-widest mb-2">Failed Emails (Not Found):</p>
<div className="bg-black/20 rounded-xl p-3 text-xs text-red-400 max-h-32 overflow-y-auto font-mono">
<div className="space-y-3">
<p className="text-[10px] font-black text-red-500/60 dark:text-gray-500 uppercase tracking-[0.2em]">Failed Emails (Not Found):</p>
<div className="bg-red-50/50 dark:bg-black/20 border border-red-100 dark:border-white/10 rounded-2xl p-5 text-xs text-red-600 dark:text-red-400 max-h-48 overflow-y-auto font-mono custom-scrollbar leading-relaxed">
{bulkResults.failed_emails.map(e => (
<div key={e}>{e}</div>
<div key={e} className="py-1 border-b border-red-500/5 last:border-0">{e}</div>
))}
</div>
</div>
@@ -234,21 +241,21 @@ export default function GradebookPage() {
)}
</div>
<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">
<div className="p-8 bg-slate-50/50 dark:bg-white/5 border-t border-slate-100 dark:border-white/5 flex justify-end items-center gap-4">
{!bulkResults ? (
<>
<button
onClick={() => setShowBulkEnroll(false)}
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"
className="px-8 py-3 rounded-2xl hover:bg-slate-200 dark:hover:bg-white/5 transition-all font-black text-[10px] uppercase tracking-widest text-slate-400 dark:text-gray-400 active:scale-95"
>
Cancel
</button>
<button
onClick={handleBulkEnroll}
disabled={bulkLoading || !bulkEmails.trim()}
className="btn-premium px-8 flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
className="flex items-center gap-3 px-10 py-3 bg-blue-600 hover:bg-blue-500 disabled:bg-slate-200 dark:disabled:bg-white/5 text-white disabled:text-slate-400 rounded-2xl font-black text-[10px] uppercase tracking-[0.2em] shadow-xl shadow-blue-500/20 transition-all active:scale-95 disabled:shadow-none disabled:cursor-not-allowed group"
>
{bulkLoading ? <Loader2 className="animate-spin w-4 h-4" /> : 'Procesar Inscripción'}
{bulkLoading ? <Loader2 className="animate-spin w-4 h-4" /> : <CheckCircle size={16} className="group-hover:scale-110 transition-transform" />} Procesar Inscripción
</button>
</>
) : (
@@ -258,7 +265,7 @@ export default function GradebookPage() {
setBulkResults(null);
setBulkEmails("");
}}
className="btn-premium px-8"
className="btn-premium px-12 py-3 rounded-2xl font-black text-[10px] uppercase tracking-widest active:scale-95 shadow-xl shadow-blue-500/20"
>
Done
</button>
@@ -274,41 +281,41 @@ export default function GradebookPage() {
Registro de Calificaciones
</h2>
{/* Controls & Stats */}
<div className="flex flex-col md:flex-row gap-6 justify-between items-center bg-white/5 border border-white/10 rounded-2xl p-6">
<div className="flex items-center gap-4 w-full md:w-auto">
<div className="relative">
{/* Controls & Stats */}
<div className="flex flex-col md:flex-row gap-8 justify-between items-stretch bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[2.5rem] p-8 shadow-sm">
<div className="flex flex-col sm:flex-row items-center gap-4 flex-1">
<div className="relative w-full sm:w-auto">
<Users size={16} className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 dark:text-gray-500 pointer-events-none z-10" />
<select
value={selectedCohortId}
onChange={(e) => setSelectedCohortId(e.target.value)}
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]"
className="appearance-none bg-slate-50 dark:bg-black/20 text-slate-900 dark:text-white border border-slate-200 dark:border-white/10 rounded-2xl pl-11 pr-10 py-3.5 text-xs font-black uppercase tracking-widest focus:outline-none focus:ring-2 focus:ring-blue-500/50 min-w-full sm:min-w-[240px] shadow-inner cursor-pointer"
>
<option value="">All Cohorts</option>
{cohorts.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
</select>
<div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-gray-500">
▼
</div>
</div>
<div className="relative flex-1 md:w-64">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 w-4 h-4" />
<div className="relative w-full flex-1">
<Search className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 dark:text-gray-500 w-4 h-4" />
<input
type="text"
placeholder="Search students..."
placeholder="Find a student fast..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
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"
className="w-full bg-slate-50 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-2xl pl-11 pr-4 py-3.5 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 font-bold shadow-inner"
/>
</div>
</div>
<div className="flex gap-8 border-l border-white/10 pl-8">
<div className="flex gap-10 border-l border-slate-100 dark:border-white/10 pl-10 items-center">
<div>
<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>
<p className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-[0.2em] mb-1.5">Total Enrollment</p>
<p className="text-3xl font-black text-slate-900 dark:text-white uppercase tracking-tighter">{filteredStudents.length}</p>
</div>
<div className="w-px h-10 bg-slate-100 dark:bg-white/5" />
<div>
<p className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-1">Avg Score</p>
<p className={`text-2xl font-black ${averageScore < 0.7 ? 'text-orange-400' : 'text-green-400'}`}>
<p className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-[0.2em] mb-1.5">Avg Performance</p>
<p className={`text-3xl font-black tracking-tighter ${averageScore < 0.7 ? 'text-orange-500' : 'text-blue-600'}`}>
{(averageScore * 100).toFixed(0)}%
</p>
</div>
@@ -316,45 +323,45 @@ export default function GradebookPage() {
</div>
{/* Student List */}
<div className="rounded-3xl border border-white/10 bg-white/[0.02] overflow-hidden">
<div className="rounded-[2.5rem] border border-slate-200 dark:border-white/10 bg-white dark:bg-white/[0.02] overflow-hidden shadow-sm">
<table className="w-full text-left border-collapse">
<thead>
<tr className="bg-white/5 border-b border-white/5">
<th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Student</th>
<th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Progress</th>
<th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Avg. Score</th>
<th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Last Active</th>
<th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500 text-right">Status</th>
<tr className="bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/5">
<th className="p-6 text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500">Student</th>
<th className="p-6 text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500">Learning Progress</th>
<th className="p-6 text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500">Score Rating</th>
<th className="p-6 text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500">Activity</th>
<th className="p-6 text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 text-right">Status</th>
</tr>
</thead>
<tbody className="divide-y divide-white/5">
<tbody className="divide-y divide-slate-100 dark:divide-white/5">
{filteredStudents.length === 0 ? (
<tr>
<td colSpan={5} className="p-12 text-center text-gray-600 italic">No students found.</td>
</tr>
) : filteredStudents.map((s) => (
<tr key={s.user_id} className="hover:bg-white/[0.02] transition-colors group">
<tr key={s.user_id} className="hover:bg-slate-50 dark:hover:bg-white/[0.02] transition-colors group">
<td className="p-6">
<div className="flex items-center gap-4">
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-gray-900 dark:text-white font-bold text-sm">
<div className="flex items-center gap-5">
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white font-black text-lg shadow-lg shadow-blue-500/20">
{s.full_name.charAt(0)}
</div>
<div>
<div className="font-bold text-gray-900 dark:text-white group-hover:text-blue-400 transition-colors">{s.full_name}</div>
<div className="text-xs text-gray-500 flex items-center gap-1 mt-0.5">
<Mail size={10} /> {s.email}
<div className="font-black text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors uppercase tracking-tight text-sm">{s.full_name}</div>
<div className="text-[11px] text-slate-400 dark:text-gray-500 flex items-center gap-1.5 mt-1 font-medium italic">
<Mail size={12} className="text-blue-400" /> {s.email}
</div>
</div>
</div>
</td>
<td className="p-6 align-middle">
<div className="w-full max-w-[140px]">
<div className="flex justify-between text-xs mb-1 font-bold text-gray-400">
<span>{(s.progress * 100).toFixed(0)}%</span>
<div className="w-full max-w-[160px]">
<div className="flex justify-between text-[10px] mb-2 font-black text-slate-400 uppercase tracking-widest">
<span>{(s.progress * 100).toFixed(0)}% Complete</span>
</div>
<div className="h-1.5 bg-white/10 rounded-full overflow-hidden">
<div className="h-2 bg-slate-100 dark:bg-white/10 rounded-full overflow-hidden shadow-inner">
<div
className="h-full bg-blue-500 rounded-full"
className="h-full bg-gradient-to-r from-blue-600 to-blue-400 rounded-full shadow-lg shadow-blue-500/30 transition-all duration-500"
style={{ width: `${s.progress * 100}%` }}
/>
</div>
@@ -362,31 +369,34 @@ export default function GradebookPage() {
</td>
<td className="p-6 align-middle">
{s.average_score !== null ? (
<span className={`font-black ${(s.average_score || 0) >= 0.8 ? 'text-green-400' : (s.average_score || 0) >= 0.6 ? 'text-yellow-400' : 'text-red-400'}`}>
{((s.average_score || 0) * 100).toFixed(0)}%
</span>
<div className="flex flex-col">
<span className={`text-lg font-black tracking-tighter ${(s.average_score || 0) >= 0.8 ? 'text-green-600 dark:text-green-400' : (s.average_score || 0) >= 0.6 ? 'text-orange-500' : 'text-red-500'}`}>
{((s.average_score || 0) * 100).toFixed(0)}%
</span>
<span className="text-[9px] font-black uppercase tracking-widest text-slate-400 mt-0.5">Weighted Avg</span>
</div>
) : (
<span className="text-gray-600 text-xs italic">No grades</span>
<span className="text-slate-400 dark:text-gray-600 text-[10px] font-black uppercase tracking-widest italic bg-slate-100 dark:bg-white/5 px-2 py-1 rounded-md">Pending</span>
)}
</td>
<td className="p-6 align-middle">
<div className="text-sm text-gray-400 flex items-center gap-2">
<Clock size={14} />
{s.last_active_at ? new Date(s.last_active_at).toLocaleDateString() : 'Never'}
<div className="text-xs text-slate-500 dark:text-gray-400 font-bold flex items-center gap-2 uppercase tracking-tight">
<Clock size={16} className="text-slate-400" />
{s.last_active_at ? new Date(s.last_active_at).toLocaleDateString() : 'No Activity'}
</div>
</td>
<td className="p-6 text-right align-middle">
{s.progress >= 1 ? (
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-green-500/10 text-green-400 border border-green-500/20">
<CheckCircle size={12} /> Completed
<span className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full text-[10px] font-black uppercase tracking-[0.2em] bg-green-500/10 text-green-600 dark:text-green-400 border border-green-500/20 shadow-sm">
<CheckCircle size={12} /> Graduated
</span>
) : s.last_active_at && (Date.now() - new Date(s.last_active_at).getTime() > 7 * 24 * 60 * 60 * 1000) ? (
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-red-500/10 text-red-400 border border-red-500/20">
<AlertCircle size={12} /> Inactive
<span className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full text-[10px] font-black uppercase tracking-[0.2em] bg-red-500/10 text-red-600 dark:text-red-400 border border-red-500/20 shadow-sm">
<AlertCircle size={12} /> At Risk
</span>
) : (
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-blue-500/10 text-blue-400 border border-blue-500/20">
<GraduationCap size={12} /> Active
<span className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full text-[10px] font-black uppercase tracking-[0.2em] bg-blue-500/10 text-blue-600 dark:text-blue-400 border border-blue-500/20 shadow-sm">
<GraduationCap size={12} /> Engaged
</span>
)}
</td>
web/studio/src/app/courses/[id]/grading/page.tsx
+44 -38
View File
@@ -10,7 +10,8 @@ import {
AlertCircle,
CheckCircle2,
TrendingUp,
Settings
Settings,
Loader2
} from "lucide-react";
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
@@ -84,13 +85,15 @@ export default function GradingPolicyPage() {
pageDescription="Configura los tipos de evaluación y la distribución de pesos del curso."
pageActions={
<div className={cn(
"flex items-center gap-2 px-4 py-2 rounded-xl border transition-all duration-500",
isBalanced ? "bg-green-500/10 border-green-500/30 text-green-400 shadow-lg shadow-green-500/5"
: "bg-amber-500/10 border-amber-500/30 text-amber-400"
"flex items-center gap-3 px-6 py-2.5 rounded-2xl border transition-all duration-500 shadow-sm",
isBalanced ? "bg-green-50 dark:bg-green-500/10 border-green-200 dark:border-green-500/30 text-green-600 dark:text-green-400"
: "bg-amber-50 dark:bg-amber-500/10 border-amber-200 dark:border-amber-500/30 text-amber-600 dark:text-amber-400"
)}>
{isBalanced ? <CheckCircle2 className="w-5 h-5" /> : <AlertCircle className="w-5 h-5" />}
<span className="font-bold text-lg">{totalWeight}%</span>
<span className="text-sm opacity-70">Total Weight</span>
{isBalanced ? <CheckCircle2 className="w-5 h-5" /> : <AlertCircle className="w-5 h-5 animate-pulse" />}
<div className="flex flex-col items-start leading-none">
<span className="font-black text-xl tracking-tighter">{totalWeight}%</span>
<span className="text-[9px] font-black uppercase tracking-widest opacity-60">Total Defined</span>
</div>
</div>
}
>
@@ -98,37 +101,38 @@ 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-slate-500 dark:text-gray-500 mb-6 flex items-center gap-2">
<Settings className="w-4 h-4" /> Assessment Categories
<h2 className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 mb-8 flex items-center gap-2.5">
<Settings className="w-4 h-4 text-blue-500" /> Course Grading Structure
</h2>
{categories.length === 0 ? (
<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 className="bg-slate-50 dark:bg-white/5 border-2 border-dashed border-slate-200 dark:border-white/10 rounded-[2.5rem] p-24 text-center shadow-inner">
<TrendingUp className="w-12 h-12 text-slate-400 dark:text-gray-600 mx-auto mb-6 opacity-40 shadow-sm" />
<p className="text-xs font-black uppercase tracking-widest text-slate-400 dark:text-gray-500 italic">No grading categories defined for this curriculum</p>
</div>
) : (
categories.map((cat) => (
<div
key={cat.id}
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"
className="group bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 p-6 rounded-3xl flex items-center justify-between hover:bg-slate-50 dark:hover:bg-white/[0.08] transition-all shadow-sm"
>
<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-600 dark:text-blue-400 font-bold group-hover:scale-110 transition-transform">
{cat.weight}%
<div className="flex items-center gap-5">
<div className="w-16 h-16 rounded-2xl bg-blue-50 dark:bg-blue-500/10 border border-blue-100 dark:border-blue-500/20 flex flex-col items-center justify-center text-blue-600 dark:text-blue-400 shadow-sm group-hover:scale-110 transition-transform">
<span className="text-2xl font-black">{cat.weight}</span>
<span className="text-[10px] font-black uppercase tracking-tighter">Weight</span>
</div>
<div>
<h3 className="text-lg font-semibold text-slate-900 dark:text-white">{cat.name}</h3>
<h3 className="text-lg font-black text-slate-900 dark:text-white uppercase tracking-tight">{cat.name}</h3>
<div className="flex items-center gap-2 mt-1">
<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 className="text-[10px] font-black uppercase tracking-widest text-blue-500/60 dark:text-gray-500 bg-slate-100 dark:bg-white/5 px-2.5 py-1 rounded-md">
Primary Assessment Category
</span>
</div>
</div>
</div>
<button
onClick={() => handleDelete(cat.id)}
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"
className="p-4 bg-red-50 dark:bg-red-500/10 text-red-500 dark:text-red-400 rounded-2xl opacity-0 group-hover:opacity-100 hover:bg-red-600 hover:text-white transition-all shadow-sm active:scale-95"
>
<Trash2 className="w-5 h-5" />
</button>
@@ -139,20 +143,20 @@ export default function GradingPolicyPage() {
{/* Add New Category Form */}
<div className="space-y-6">
<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
<div className="bg-white dark:bg-white/5 p-10 rounded-[2.5rem] border border-slate-200 dark:border-white/10 sticky top-8 shadow-sm">
<h2 className="text-2xl font-black mb-8 flex items-center gap-3 text-slate-900 dark:text-white uppercase tracking-tight">
<Plus className="w-6 h-6 text-blue-500" /> New Format
</h2>
<div className="space-y-4">
<div>
<label className="text-xs font-semibold text-slate-500 dark:text-gray-400 uppercase tracking-widest ml-1">Assessment Type</label>
<div className="space-y-3">
<label className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 ml-1">Assessment Type</label>
<select
value={newName}
onChange={(e) => setNewName(e.target.value)}
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"
className="w-full bg-slate-50 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-2xl px-5 py-4 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all text-slate-900 dark:text-gray-100 appearance-none font-bold shadow-inner"
>
<option value="">Select a type...</option>
<option value="">Choose assessment...</option>
<option value="Continuous Assessment">Continuous Assessment (Min 4)</option>
<option value="Midterm">Midterm</option>
<option value="Final Test">Final Test</option>
@@ -160,26 +164,26 @@ export default function GradingPolicyPage() {
</select>
</div>
<div>
<label className="text-xs font-semibold text-slate-500 dark:text-gray-400 uppercase tracking-widest ml-1">Weight (%)</label>
<div className="relative mt-1.5">
<div className="space-y-3">
<label className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 ml-1">Weight Value (%)</label>
<div className="relative">
<input
type="number"
placeholder="20"
value={newWeight || ""}
onChange={(e) => setNewWeight(parseInt(e.target.value) || 0)}
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"
className="w-full bg-slate-50 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-2xl px-5 py-4 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all text-slate-900 dark:text-gray-100 pl-11 font-black text-lg shadow-inner"
/>
<Percent className="w-4 h-4 text-slate-400 dark:text-gray-500 absolute left-4 top-1/2 -translate-y-1/2" />
<Percent className="w-4 h-4 text-blue-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-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"
className="w-full bg-blue-600 hover:bg-blue-500 disabled:bg-slate-100 dark:disabled:bg-white/5 disabled:text-slate-400 dark:disabled:text-gray-500 text-white font-black py-4 rounded-[1.5rem] mt-6 transition-all shadow-xl shadow-blue-500/20 active:scale-95 flex items-center justify-center gap-3 uppercase tracking-[0.2em] text-[10px]"
>
{submitting ? "Adding..." : (
{submitting ? <Loader2 className="w-4 h-4 animate-spin" /> : (
<>
<Plus className="w-5 h-5" />
Add Category
@@ -188,10 +192,12 @@ export default function GradingPolicyPage() {
</button>
{!isBalanced && (
<div className="mt-6 p-4 rounded-xl bg-amber-500/10 border border-amber-500/20 flex gap-3">
<AlertCircle className="w-5 h-5 text-amber-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>
<div className="mt-8 p-5 rounded-2xl bg-amber-50 dark:bg-amber-500/10 border border-amber-100 dark:border-amber-500/20 flex gap-4">
<div className="w-10 h-10 rounded-xl bg-white dark:bg-black/20 flex items-center justify-center shrink-0 shadow-sm text-amber-500">
<AlertCircle size={20} className="animate-pulse" />
</div>
<p className="text-[11px] text-amber-900/80 dark:text-amber-200/80 leading-relaxed font-bold uppercase tracking-tight">
The total weight must be exactly 100% for certification eligibility. Current sum: <span className="text-amber-600 font-black">{totalWeight}%</span>
</p>
</div>
)}
web/studio/src/app/courses/[id]/lessons/[lessonId]/page.tsx
+397 -284
View File
@@ -7,6 +7,7 @@ import { cmsApi, Lesson, Block, GradingCategory, LibraryBlock, Rubric, RubricLev
import {
Layout,
CheckCircle2,
Check,
Pencil,
Save,
Trash2,
@@ -368,10 +369,10 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
<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-slate-200 dark:border-white/5 pb-8">
<div className="space-y-1">
<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>
<div className="flex items-center gap-3 text-[10px] font-black uppercase tracking-[0.2em]">
<Link href={`/courses/${params.id}`} className="text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Outline</Link>
<span className="text-slate-300 dark:text-gray-700">/</span>
<span>Activity</span>
<span className="text-blue-600 dark:text-blue-500">Activity Builder</span>
</div>
<div className="flex items-center gap-4">
{editingId === 'lesson-title' ? (
@@ -381,10 +382,10 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
value={editValue}
onChange={(e) => setEditValue(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && handleSaveLessonTitle()}
className="text-4xl font-black bg-transparent border-b-2 border-blue-500 focus:outline-none"
className="text-4xl font-black bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[1.5rem] px-6 py-3 focus:outline-none focus:ring-4 focus:ring-blue-500/20 transition-all text-slate-900 dark:text-white shadow-inner"
/>
<button onClick={handleSaveLessonTitle} className="text-green-400"><Save className="w-6 h-6" /></button>
<button onClick={() => setEditingId(null)} className="text-gray-400"><X className="w-6 h-6" /></button>
<button onClick={handleSaveLessonTitle} className="p-3 bg-green-500 text-white rounded-2xl shadow-xl shadow-green-500/20 active:scale-95 transition-all"><Save className="w-6 h-6" /></button>
<button onClick={() => setEditingId(null)} className="p-3 bg-slate-100 dark:bg-white/10 text-slate-400 rounded-2xl active:scale-95 transition-all"><X className="w-6 h-6" /></button>
</div>
) : (
<div className="flex items-center gap-4 group">
@@ -402,28 +403,43 @@ 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-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"}
<div className="flex items-center gap-4">
<button
onClick={() => setEditMode(false)}
className="px-8 py-3 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl text-[10px] font-black uppercase tracking-[0.2em] hover:bg-slate-50 dark:hover:bg-white/10 transition-all text-slate-500 dark:text-white active:scale-95 shadow-sm"
>
Discard
</button>
</>
<button
onClick={handleSave}
disabled={isSaving}
className="px-10 py-3 bg-blue-600 text-white rounded-2xl font-black text-[10px] uppercase tracking-[0.2em] shadow-xl shadow-blue-500/30 hover:bg-blue-500 transition-all active:scale-95 disabled:bg-slate-200"
>
{isSaving ? "Saving..." : "Save Changes"}
</button>
</div>
) : (
<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
onClick={() => setEditMode(true)}
className="group px-10 py-3.5 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[1.5rem] text-[10px] font-black uppercase tracking-[0.3em] hover:border-blue-500/50 hover:shadow-xl transition-all flex items-center gap-3 text-slate-700 dark:text-white active:scale-95 shadow-md"
>
<span className="group-hover:rotate-12 transition-transform text-lg">✏️</span> Edit Activity
</button>
)}
</div>
</div>
{editMode && (
<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="bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[2.5rem] p-10 space-y-8 animate-in fade-in slide-in-from-top-4 duration-500 shadow-sm hover:shadow-md transition-all">
<div className="flex items-center justify-between">
<div>
<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 className="text-2xl font-black flex items-center gap-3 text-slate-900 dark:text-white uppercase tracking-tight">
<div className="w-12 h-12 rounded-2xl bg-indigo-50 dark:bg-indigo-500/10 border border-indigo-100 dark:border-indigo-500/20 flex items-center justify-center text-indigo-600 dark:text-indigo-400 shadow-sm">
<Target size={24} />
</div>
Grading Policy
</h3>
<p className="text-sm text-slate-500 dark:text-gray-500 mt-1">Determine if this activity contributes to the final grade</p>
<p className="text-sm font-medium text-slate-500 dark:text-gray-500 mt-2 ml-15">Configure how this activity impacts the student gradebook</p>
</div>
<label className="relative inline-flex items-center cursor-pointer group">
<input
@@ -432,19 +448,22 @@ 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-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"}
<div className="w-16 h-9 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-[4.5px] after:start-[5px] after:bg-white after:border-slate-300 dark:after:border-gray-300 after:border after:rounded-full after:h-7 after:w-7 after:transition-all peer-checked:bg-blue-600 group-hover:after:scale-105 transition-all shadow-md"></div>
<span className="ms-4 text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-400 peer-checked:text-blue-600 dark:peer-checked:text-blue-400 transition-colors">
{isGraded ? "Graded" : "Unscored"}
</span>
</label>
</div>
<div className="flex items-center justify-between pt-6 border-t border-slate-200 dark:border-white/5">
<div className="flex items-center justify-between pt-10 border-t border-slate-100 dark:border-white/5">
<div>
<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 className="text-2xl font-black flex items-center gap-3 text-slate-900 dark:text-white uppercase tracking-tight">
<div className="w-12 h-12 rounded-2xl bg-amber-50 dark:bg-amber-500/10 border border-amber-100 dark:border-amber-500/20 flex items-center justify-center text-amber-600 dark:text-amber-400 shadow-sm">
<Eye size={24} />
</div>
Discovery Settings
</h3>
<p className="text-sm text-slate-500 dark:text-gray-500 mt-1">Allow students to view this lesson without being enrolled</p>
<p className="text-sm font-medium text-slate-500 dark:text-gray-500 mt-2 ml-15">Control how this lesson appears to prospective students</p>
</div>
<label className="relative inline-flex items-center cursor-pointer group">
<input
@@ -453,96 +472,112 @@ 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-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"}
<div className="w-16 h-9 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-[4.5px] after:start-[5px] after:bg-white after:border-slate-300 dark:after:border-gray-300 after:border after:rounded-full after:h-7 after:w-7 after:transition-all peer-checked:bg-amber-600 group-hover:after:scale-105 transition-all shadow-md"></div>
<span className="ms-4 text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-400 peer-checked:text-amber-600 dark:peer-checked:text-amber-400 transition-colors">
{isPreviewable ? "Preview Public" : "Private"}
</span>
</label>
</div>
{isGraded && (
<>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div className="grid grid-cols-1 md:grid-cols-2 gap-10">
<div className="space-y-4">
<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-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="">Select Category...</option>
{gradingCategories.map((cat) => (
<option key={cat.id} value={cat.id}>
{cat.name} ({cat.weight}%)
</option>
))}
</select>
<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>
<span className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 mb-2 block">Assessment Category</span>
<div className="relative group/select">
<select
value={selectedCategoryId}
onChange={(e) => setSelectedCategoryId(e.target.value)}
className="w-full bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[1.25rem] px-5 py-4 text-sm focus:outline-none focus:ring-4 focus:ring-blue-500/20 transition-all appearance-none font-bold text-slate-900 dark:text-white shadow-inner"
>
<option value="">Select Category...</option>
{gradingCategories.map((cat) => (
<option key={cat.id} value={cat.id}>
{cat.name} ({cat.weight}%)
</option>
))}
</select>
<div className="absolute right-5 top-1/2 -translate-y-1/2 pointer-events-none text-slate-400">
<ChevronDown size={18} />
</div>
</div>
<div className="text-[10px] text-slate-400 dark:text-gray-500 italic mt-2 pl-2 flex items-center gap-2">
<div className="w-1 h-1 rounded-full bg-slate-300"></div>
Define rules in <Link href={`/courses/${params.id}/grading`} className="text-blue-600 dark:text-blue-400 hover:text-blue-700 font-black uppercase tracking-widest decoration-blue-500/30 underline-offset-4 underline">Grading Policy</Link>
</div>
</div>
<div className="space-y-4">
<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">
<span className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 mb-2 block">Evaluation Rubric (Optional)</span>
<div className="bg-slate-50 dark:bg-black/20 border border-slate-100 dark:border-white/10 rounded-[1.5rem] p-6 max-h-56 overflow-y-auto space-y-3 shadow-inner">
{courseRubrics.length === 0 ? (
<p className="text-xs text-slate-400 dark:text-gray-500 italic p-2 text-center">No rubrics found in this course.</p>
<div className="flex flex-col items-center justify-center p-8 text-center text-slate-400 dark:text-gray-500 italic">
<div className="w-10 h-10 bg-slate-100 dark:bg-white/5 rounded-full flex items-center justify-center mb-3">
<Library size={16} />
</div>
<p className="text-xs font-medium">No rubrics found for this course.</p>
</div>
) : (
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-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-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-slate-600 dark:text-gray-200 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">{rubric.name}</span>
<label key={rubric.id} className={`flex items-center justify-between p-4 rounded-xl transition-all cursor-pointer group border ${isAssigned ? 'bg-blue-50 dark:bg-blue-500/10 border-blue-200 dark:border-blue-500/30' : 'bg-white dark:bg-white/5 border-slate-100 dark:border-white/5 hover:border-blue-300 dark:hover:border-blue-500/50 hover:shadow-sm'}`}>
<div className="flex items-center gap-4">
<div className={`w-5 h-5 rounded flex items-center justify-center border transition-all ${isAssigned ? 'bg-blue-600 border-blue-600' : 'bg-slate-50 dark:bg-gray-800 border-slate-200 dark:border-gray-700'}`}>
<input
type="checkbox"
checked={isAssigned}
onChange={() => toggleRubric(rubric.id, isAssigned)}
className="hidden"
/>
{isAssigned && <Check size={14} className="text-white" />}
</div>
<span className={`text-sm font-black uppercase tracking-tight transition-colors ${isAssigned ? 'text-blue-700 dark:text-blue-400' : 'text-slate-500 dark:text-gray-400 group-hover:text-blue-600'}`}>
{rubric.name}
</span>
</div>
<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>
<span className="text-[9px] font-black text-slate-400 dark:text-gray-500 bg-slate-100 dark:bg-white/10 px-2.5 py-1 rounded-full border border-slate-200 dark:border-white/10 uppercase tracking-tighter">{rubric.total_points} PTS</span>
</label>
);
})
)}
</div>
<div className="text-[10px] text-gray-500 italic mt-1 pl-1">
Manage rubrics in <Link href={`/courses/${params.id}/rubrics`} className="text-blue-400 hover:underline">Rubrics Manager</Link>
<div className="text-[10px] text-slate-400 dark:text-gray-500 italic mt-2 pl-2 flex items-center gap-2">
<div className="w-1 h-1 rounded-full bg-slate-300"></div>
Create more in <Link href={`/courses/${params.id}/rubrics`} className="text-blue-600 dark:text-blue-400 hover:text-blue-700 font-black uppercase tracking-widest decoration-blue-500/30 underline-offset-4 underline">Rubrics Manager</Link>
</div>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 pt-6 border-t border-white/5 animate-in fade-in duration-500">
<div className="grid grid-cols-1 md:grid-cols-2 gap-10 pt-10 border-t border-slate-100 dark: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-slate-500 dark:text-gray-500 mb-2 block">Maximum Attempts</span>
<div className="flex items-center gap-3">
<span className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 mb-2 block">Maximum Attempts</span>
<div className="flex items-center gap-5">
<input
type="number"
value={maxAttempts || ""}
onChange={(e) => setMaxAttempts(e.target.value ? parseInt(e.target.value) : null)}
placeholder="Unlimited"
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"
placeholder="∞ Unlimited"
className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[1.25rem] px-5 py-4 text-sm focus:outline-none focus:ring-4 focus:ring-blue-500/20 transition-all w-40 text-slate-900 dark:text-white shadow-inner font-black"
/>
<span className="text-xs text-slate-500 dark:text-gray-500">Leave empty for unlimited</span>
<span className="text-[10px] font-bold uppercase tracking-widest text-slate-400 dark:text-gray-500">Clear for infinite</span>
</div>
</label>
</div>
<div className="space-y-2">
<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">
<div className="space-y-3">
<span className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 block mb-2">Self-Correction System</span>
<label className="flex items-center gap-4 cursor-pointer group relative">
<input
type="checkbox"
checked={allowRetry}
onChange={(e) => setAllowRetry(e.target.checked)}
className="sr-only peer"
/>
<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>
<div className="w-12 h-7 bg-slate-200 dark:bg-gray-700 rounded-full peer peer-checked:bg-blue-600 after:content-[''] after:absolute after:top-[3.5px] after:left-[4px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-5 shadow-sm"></div>
<span className="text-sm font-black uppercase tracking-tight text-slate-400 dark:text-gray-400 peer-checked:text-blue-700 dark:peer-checked:text-blue-400 transition-colors">Instant Feedback Mode</span>
</label>
<p className="text-[10px] text-slate-500 dark:text-gray-600 italic">Enables &quot;Check Answer&quot; buttons for individual blocks</p>
<p className="text-[11px] font-medium text-slate-400 dark:text-gray-600 italic ml-1">Allows &quot;Validate Answer&quot; buttons in interactive blocks</p>
</div>
</div>
@@ -649,44 +684,147 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
{
editMode && (
<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="bg-white dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-[2.5rem] p-10 space-y-8 animate-in fade-in slide-in-from-top-4 duration-500 shadow-sm hover:shadow-md transition-all">
<div>
<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 className="text-2xl font-black flex items-center gap-3 text-slate-900 dark:text-white uppercase tracking-tight">
<div className="w-12 h-12 rounded-2xl bg-blue-50 dark:bg-blue-500/10 border border-blue-100 dark:border-blue-500/20 flex items-center justify-center text-blue-600 dark:text-blue-400 shadow-sm">
<Settings size={24} />
</div>
Scheduling & Sequencing
</h3>
<p className="text-sm text-slate-500 dark:text-gray-500 mt-1">Set deadlines and mark important dates for this activity</p>
<p className="text-sm font-medium text-slate-500 dark:text-gray-500 mt-2 ml-15">Establish temporal constraints and learning paths</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div className="grid grid-cols-1 md:grid-cols-2 gap-10">
<div className="space-y-4">
<label className="block">
<span className="text-[10px] font-black uppercase tracking-widest text-slate-500 dark:text-gray-500 mb-2 block">Due Date</span>
<span className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 mb-2 block">Final Deadline</span>
<input
type="date"
value={dueDate}
onChange={(e) => setDueDate(e.target.value)}
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"
className="w-full bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[1.25rem] px-5 py-4 text-sm focus:outline-none focus:ring-4 focus:ring-blue-500/20 transition-all font-black text-slate-900 dark:text-white shadow-inner"
/>
</label>
</div>
<div className="space-y-4">
<label className="block">
<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-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="">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>
<span className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 mb-2 block">Event Marker Type</span>
<div className="relative group/select">
<select
value={importantDateType}
onChange={(e) => setImportantDateType(e.target.value)}
className="w-full bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[1.25rem] px-5 py-4 text-sm focus:outline-none focus:ring-4 focus:ring-blue-500/20 transition-all appearance-none font-black text-slate-900 dark:text-white shadow-inner"
>
<option value="">Standard Activity</option>
<option value="exam">🏆 Final Exam</option>
<option value="assignment">📝 Main Assignment</option>
<option value="milestone">🚩 Project Milestone</option>
<option value="live-session">🎥 Live Training</option>
</select>
<div className="absolute right-5 top-1/2 -translate-y-1/2 pointer-events-none text-slate-400">
<ChevronDown size={18} />
</div>
</div>
</label>
</div>
</div>
{/* Prerequisites Sub-Panel inside Scheduling */}
<div className="pt-10 border-t border-slate-100 dark:border-white/5">
<div className="flex items-center gap-3 mb-8 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>
Learning Dependency Graph
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
<div className="space-y-4">
<h4 className="text-[11px] font-black uppercase tracking-widest text-slate-900 dark:text-gray-200">Prerequisites</h4>
<div className="bg-slate-50 dark:bg-black/40 border border-slate-100 dark:border-white/10 rounded-[2rem] p-6 max-h-72 overflow-y-auto space-y-3 shadow-inner">
{allLessons.length === 0 ? (
<p className="text-xs text-slate-400 italic p-6 text-center">No other modules in focus.</p>
) : (
allLessons.map(l => {
const dep = dependencies.find(d => d.prerequisite_lesson_id === l.id);
const isAssigned = !!dep;
return (
<div key={l.id} className={`p-4 rounded-[1.25rem] transition-all group border ${isAssigned ? 'bg-indigo-50 dark:bg-indigo-500/10 border-indigo-200 dark:border-indigo-500/30' : 'bg-white dark:bg-white/5 border-slate-50 dark:border-white/5 hover:border-indigo-300 shadow-sm'}`}>
<label className="flex items-center justify-between cursor-pointer">
<div className="flex items-center gap-4">
<div className={`w-5 h-5 rounded flex items-center justify-center border transition-all ${isAssigned ? 'bg-indigo-600 border-indigo-600' : 'bg-slate-50 dark:bg-gray-800 border-slate-200 dark:border-gray-700'}`}>
<input
type="checkbox"
checked={isAssigned}
onChange={() => toggleDependency(l.id, isAssigned)}
className="hidden"
/>
{isAssigned && <Check size={14} className="text-white" />}
</div>
<span className={`text-sm font-black uppercase tracking-tight transition-colors ${isAssigned ? 'text-indigo-700 dark:text-indigo-400' : 'text-slate-500 dark:text-gray-400 group-hover:text-indigo-600'}`}>
{l.title}
</span>
</div>
{l.is_graded && (
<span className="text-[8px] font-black uppercase tracking-widest px-2.5 py-1 bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 rounded-lg border border-indigo-500/20">GRADED</span>
)}
</label>
{isAssigned && l.is_graded && (
<div className="mt-4 pl-9 flex items-center gap-4 animate-in slide-in-from-left-4 duration-500">
<span className="text-[10px] text-slate-400 dark:text-gray-500 font-extrabold uppercase tracking-widest">MIN % SCORE</span>
<input
type="number"
min="0"
max="100"
value={dep.min_score_percentage || 0}
onChange={async (e) => {
const minScore = parseFloat(e.target.value);
try {
const updated = await cmsApi.assignDependency(params.lessonId, {
prerequisite_lesson_id: l.id,
min_score_percentage: minScore
});
setDependencies(dependencies.map(d => d.id === updated.id ? updated : d));
} catch (err) {
console.error("Failed to update min score", err);
}
}}
className="w-16 bg-white dark:bg-black/60 border border-slate-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-indigo-600 dark:text-indigo-400 font-black text-center focus:outline-none focus:ring-4 focus:ring-indigo-500/20 shadow-inner"
/>
</div>
)}
</div>
);
})
)}
</div>
</div>
<div className="flex flex-col justify-center gap-6">
<div className="p-6 rounded-[2rem] bg-indigo-50 dark:bg-indigo-500/5 border border-indigo-100 dark:border-indigo-500/10 shadow-sm">
<div className="flex items-start gap-4">
<div className="w-12 h-12 rounded-2xl bg-indigo-100 dark:bg-indigo-500/20 flex items-center justify-center text-indigo-600 dark:text-indigo-400 shadow-sm shrink-0">
<Layout size={24} />
</div>
<div>
<h5 className="text-sm font-black uppercase tracking-tight text-indigo-700 dark:text-indigo-300">Intelligent Flow</h5>
<p className="text-[11px] font-medium text-indigo-500/80 dark:text-indigo-300/60 leading-relaxed mt-2">
Locked nodes appear with a lock visualizer until prerequisites are cleared by the student.
</p>
</div>
</div>
</div>
<div className="p-6 rounded-[2rem] bg-emerald-50 dark:bg-emerald-500/5 border border-emerald-100 dark:border-emerald-500/10 shadow-sm">
<div className="flex items-start gap-4">
<div className="w-12 h-12 rounded-2xl bg-emerald-100 dark:bg-emerald-500/20 flex items-center justify-center text-emerald-600 dark:text-emerald-400 shadow-sm shrink-0">
<CheckCircle2 size={24} />
</div>
<div>
<h5 className="text-sm font-black uppercase tracking-tight text-emerald-700 dark:text-emerald-300">Mastery Gates</h5>
<p className="text-[11px] font-medium text-emerald-500/80 dark:text-emerald-300/60 leading-relaxed mt-2">
When score thresholds are set, success in prior activities is mandatory for progression.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
@@ -694,34 +832,45 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
{/* AI Magic Section */}
{
editMode && (
<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 className="bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[2.5rem] p-10 space-y-10 animate-in fade-in slide-in-from-top-4 duration-500 shadow-sm hover:shadow-md transition-all group/ai overflow-hidden relative">
<div className="absolute top-0 right-0 w-64 h-64 bg-indigo-500/5 rounded-full blur-[80px] -translate-y-1/2 translate-x-1/2 group-hover/ai:bg-indigo-500/10 transition-colors"></div>
<div className="flex items-center gap-4 z-10 relative">
<div className="w-14 h-14 rounded-2xl bg-indigo-600 dark:bg-white/10 flex items-center justify-center text-white dark:text-indigo-400 shadow-xl shadow-indigo-500/20">
<Brain size={32} className="animate-pulse" />
</div>
<div>
<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>
<h3 className="text-2xl font-black italic tracking-tight text-slate-900 dark:text-white uppercase">AI Content Copilot</h3>
<p className="text-[10px] text-slate-400 dark:text-gray-400 mt-1 uppercase tracking-[0.2em] font-black">Powered by Neural Processing Unit</p>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 z-10 relative">
<button
onClick={handleSummarize}
disabled={isGeneratingSummary}
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'}`}
className={`group/btn p-8 rounded-[2rem] border transition-all text-left flex flex-col gap-4 shadow-sm relative overflow-hidden ${isGeneratingSummary ? 'bg-indigo-50 dark:bg-indigo-500/20 border-indigo-200 dark:border-indigo-500/50 text-indigo-600 dark:text-indigo-300 animate-pulse' : summary ? 'bg-indigo-50/50 dark:bg-white/5 border-indigo-200 dark:border-indigo-500/20 text-indigo-600 dark:text-indigo-400 hover:border-indigo-400' : 'bg-white dark:bg-white/5 border-slate-100 dark:border-white/10 text-slate-400 dark:text-indigo-400 hover:border-indigo-500/50 hover:bg-indigo-50 hover:text-indigo-600 dark:hover:bg-indigo-500/10'}`}
>
<span className="text-xl">{isGeneratingSummary ? '⏳' : '✍️'}</span>
<div className="text-[10px] font-black uppercase tracking-widest opacity-80">Summarization</div>
<div className="font-bold">{isGeneratingSummary ? 'Generating...' : summary ? 'Update Summary' : 'Generate Summary'}</div>
<div className="w-12 h-12 rounded-2xl bg-indigo-100 dark:bg-indigo-500/20 flex items-center justify-center text-indigo-600 dark:text-indigo-400 shadow-sm group-hover/btn:scale-110 transition-transform">
{isGeneratingSummary ? '⏳' : <ChevronDown className="rotate-90" />}
</div>
<div className="space-y-1">
<div className="text-[10px] font-black uppercase tracking-[0.2em] opacity-80">Semantic Analysis</div>
<div className="font-black text-xl tracking-tight">{isGeneratingSummary ? 'Processing Content...' : summary ? 'Refresh Summary' : 'Extract Summary'}</div>
</div>
</button>
<button
onClick={handleGenerateQuiz}
disabled={isGeneratingQuiz}
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'}`}
className={`group/btn p-8 border rounded-[2rem] transition-all text-left flex flex-col gap-4 shadow-sm relative overflow-hidden ${isGeneratingQuiz ? 'bg-purple-50 dark:bg-purple-500/20 border-purple-200 dark:border-purple-500/50 text-purple-600 dark:text-purple-300 animate-pulse' : 'bg-white dark:bg-white/5 border-slate-100 dark:border-white/10 text-slate-400 dark:text-purple-400 hover:border-purple-500/50 hover:bg-purple-50 hover:text-purple-600 dark:hover:bg-purple-500/10'}`}
>
<span className="text-xl">{isGeneratingQuiz ? '⏳' : '💡'}</span>
<div className="text-[10px] font-black uppercase tracking-widest opacity-80">Assessments</div>
<div className="font-bold">{isGeneratingQuiz ? 'Building...' : 'Generate Quiz'}</div>
<div className="w-12 h-12 rounded-2xl bg-purple-100 dark:bg-purple-500/20 flex items-center justify-center text-purple-600 dark:text-purple-400 shadow-sm group-hover/btn:scale-110 transition-transform">
{isGeneratingQuiz ? '⏳' : <Target />}
</div>
<div className="space-y-1">
<div className="text-[10px] font-black uppercase tracking-[0.2em] opacity-80">Knowledge Check</div>
<div className="font-black text-xl tracking-tight">{isGeneratingQuiz ? 'Building Quiz...' : 'Generate New Test'}</div>
</div>
</button>
</div>
</div>
@@ -731,27 +880,33 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
{/* AI Summary Visualization */}
{
(summary || editMode) && (
<div className="bg-gradient-to-br from-indigo-500/10 to-blue-500/10 border border-indigo-500/20 rounded-3xl p-8 space-y-6 animate-in fade-in duration-700">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<span className="text-2xl">✨</span>
<div className="bg-white dark:bg-white/5 border border-indigo-100 dark:border-indigo-500/20 rounded-[2.5rem] p-10 space-y-8 animate-in fade-in duration-700 shadow-sm relative overflow-hidden group/summary">
<div className="absolute top-0 left-0 w-1 h-full bg-indigo-500/40"></div>
<div className="flex items-center justify-between relative z-10">
<div className="flex items-center gap-4">
<div className="w-12 h-12 rounded-2xl bg-indigo-50 dark:bg-indigo-500/10 flex items-center justify-center text-indigo-600 dark:text-indigo-400">
<Brain size={24} />
</div>
<div>
<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>
<h3 className="text-xl font-black italic tracking-tight text-slate-900 dark:text-white uppercase">Neural Insight Summary</h3>
<p className="text-[10px] text-slate-400 dark:text-gray-400 mt-1 uppercase tracking-[0.2em] font-black">Synthesized from activity contents</p>
</div>
</div>
</div>
{editMode ? (
<textarea
value={summary}
onChange={(e) => setSummary(e.target.value)}
placeholder="A concise summary of the lesson content..."
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"
placeholder="Write a concise executive summary..."
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-[2rem] p-8 text-sm text-slate-700 dark:text-gray-300 focus:outline-none focus:ring-4 focus:ring-indigo-500/10 min-h-[160px] transition-all font-medium leading-relaxed shadow-inner"
/>
) : (
<div className="text-sm text-slate-600 dark:text-gray-400 leading-relaxed italic border-l-2 border-indigo-500/30 pl-6 py-2">
&quot;{summary}&quot;
<div className="relative">
<span className="absolute -left-4 -top-4 text-6xl text-indigo-500/10 font-serif">&ldquo;</span>
<div className="text-lg text-slate-600 dark:text-gray-300 leading-relaxed italic pl-6 font-medium">
{summary}
</div>
<span className="absolute -right-2 -bottom-4 text-6xl text-indigo-500/10 font-serif">&rdquo;</span>
</div>
)}
</div>
@@ -762,40 +917,42 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
{blocks.map((block, index) => (
<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-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-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" />
</button>
<button
onClick={() => moveBlock(index, 'down')}
disabled={index === blocks.length - 1}
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" />
</button>
<div className="h-4"></div>
<button
onClick={() => openSaveToLibraryModal(block)}
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-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" />
</button>
<div className="w-0.5 flex-1 bg-white/5 mt-2"></div>
<div className="absolute -left-20 top-0 h-full flex flex-col items-center gap-3 opacity-0 group-hover/block:opacity-100 transition-all duration-300 -translate-x-4 group-hover/block:translate-x-0">
<div className="flex flex-col gap-1.5 p-2 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[1.5rem] shadow-xl">
<button
onClick={() => moveBlock(index, 'up')}
disabled={index === 0}
className="w-10 h-10 rounded-xl bg-slate-50 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 disabled:opacity-20 disabled:cursor-not-allowed shadow-sm border border-slate-100 dark:border-transparent"
title="Subir Bloque"
>
<ChevronUp className="w-5 h-5" />
</button>
<button
onClick={() => moveBlock(index, 'down')}
disabled={index === blocks.length - 1}
className="w-10 h-10 rounded-xl bg-slate-50 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 disabled:opacity-20 disabled:cursor-not-allowed shadow-sm border border-slate-100 dark:border-transparent"
title="Bajar Bloque"
>
<ChevronDown className="w-5 h-5" />
</button>
</div>
<div className="flex flex-col gap-1.5 p-2 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-[1.5rem] shadow-xl">
<button
onClick={() => openSaveToLibraryModal(block)}
className="w-10 h-10 rounded-xl bg-emerald-50 text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-400 flex items-center justify-center hover:bg-emerald-600 hover:text-white transition-all border border-emerald-100 dark:border-transparent shadow-sm"
title="Guardar en Biblioteca"
>
<BookMarked className="w-5 h-5" />
</button>
<button
onClick={() => removeBlock(block.id)}
className="w-10 h-10 rounded-xl bg-red-50 text-red-600 dark:bg-red-500/10 dark:text-red-400 flex items-center justify-center hover:bg-red-600 hover:text-white transition-all border border-red-100 dark:border-transparent shadow-sm"
title="Eliminar Bloque"
>
<Trash2 className="w-5 h-5" />
</button>
</div>
</div>
)}
@@ -935,120 +1092,68 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
))}
{editMode && (
<div className="pt-12 border-t border-white/5">
<div className="flex flex-col items-center gap-6">
<span className="text-[10px] text-gray-500 font-bold uppercase tracking-[0.3em]">Add Content Block</span>
<div className="flex items-center gap-4">
<button
onClick={() => addBlock('description')}
className="flex flex-col items-center gap-2 p-6 glass hover:border-blue-500/50 transition-all group w-32"
>
<span className="text-2xl group-hover:scale-110 transition-transform">📄</span>
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">Text</span>
</button>
<button
onClick={() => addBlock('media')}
className="flex flex-col items-center gap-2 p-6 glass hover:border-blue-500/50 transition-all group w-32"
>
<span className="text-2xl group-hover:scale-110 transition-transform">🎬</span>
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">Media</span>
</button>
<button
onClick={() => addBlock('video_marker')}
className="flex flex-col items-center gap-2 p-6 glass hover:border-indigo-500/50 transition-all group w-32"
>
<span className="text-2xl group-hover:scale-110 transition-transform">⏱️</span>
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">Video+Q</span>
</button>
<button
onClick={() => addBlock('quiz')}
className="flex flex-col items-center gap-2 p-6 glass hover:border-blue-500/50 transition-all group w-32"
>
<span className="text-2xl group-hover:scale-110 transition-transform">💡</span>
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">Quiz</span>
</button>
<button
onClick={() => addBlock('fill-in-the-blanks')}
className="flex flex-col items-center gap-2 p-6 glass hover:border-blue-500/50 transition-all group w-32"
>
<span className="text-2xl group-hover:scale-110 transition-transform">✍️</span>
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">Blanks</span>
</button>
<button
onClick={() => addBlock('matching')}
className="flex flex-col items-center gap-2 p-6 glass hover:border-blue-500/50 transition-all group w-32"
>
<span className="text-2xl group-hover:scale-110 transition-transform">🔗</span>
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">Match</span>
</button>
<button
onClick={() => addBlock('ordering')}
className="flex flex-col items-center gap-2 p-6 glass hover:border-blue-500/50 transition-all group w-32"
>
<span className="text-2xl group-hover:scale-110 transition-transform">🔢</span>
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">Order</span>
</button>
<button
onClick={() => addBlock('short-answer')}
className="flex flex-col items-center gap-2 p-6 glass hover:border-blue-500/50 transition-all group w-32"
>
<span className="text-2xl group-hover:scale-110 transition-transform">💬</span>
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">Short</span>
</button>
<button
onClick={() => addBlock('document')}
className="flex flex-col items-center gap-2 p-6 glass hover:border-blue-500/50 transition-all group w-32"
>
<span className="text-2xl group-hover:scale-110 transition-transform">📚</span>
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">Reading</span>
</button>
<button
onClick={() => addBlock('audio-response')}
className="flex flex-col items-center gap-2 p-6 glass hover:border-purple-500/50 transition-all group w-32"
>
<span className="text-2xl group-hover:scale-110 transition-transform">🎤</span>
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">Audio</span>
</button>
<button
onClick={() => addBlock('hotspot')}
className="flex flex-col items-center gap-2 p-6 glass hover:border-amber-500/50 transition-all group w-32"
>
<span className="text-2xl group-hover:scale-110 transition-transform">🔍</span>
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">Hotspot</span>
</button>
<button
onClick={() => addBlock('memory-match')}
className="flex flex-col items-center gap-2 p-6 glass hover:border-purple-500/50 transition-all group w-32"
>
<span className="text-2xl group-hover:scale-110 transition-transform">🧠</span>
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">Memory</span>
</button>
<button
onClick={() => addBlock('peer-review')}
className="flex flex-col items-center gap-2 p-6 glass hover:border-purple-500/50 transition-all group w-32"
>
<span className="text-2xl group-hover:scale-110 transition-transform">👥</span>
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">Peer Rev</span>
</button>
<div className="pt-20 border-t border-slate-100 dark:border-white/5">
<div className="flex flex-col items-center gap-12">
<div className="text-center space-y-2">
<h3 className="text-sm font-black uppercase tracking-[0.4em] text-slate-400 dark:text-gray-500">Infinite Canvas</h3>
<p className="text-[10px] font-bold text-slate-300 dark:text-gray-600 uppercase tracking-widest">Select a specialized block to expand your activity</p>
</div>
<div className="w-px h-12 bg-white/5"></div>
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-4 w-full">
{[
{ type: 'description', icon: '📄', label: 'Text Block', color: 'blue' },
{ type: 'media', icon: '🎬', label: 'Hyper Media', color: 'indigo' },
{ type: 'video_marker', icon: '⏱️', label: 'Interactive', color: 'violet' },
{ type: 'document', icon: '📚', label: 'Resources', color: 'slate' },
{ type: 'quiz', icon: '💡', label: 'Knowledge', color: 'blue' },
{ type: 'fill-in-the-blanks', icon: '✍️', label: 'Syntax', color: 'indigo' },
{ type: 'matching', icon: '🔗', label: 'Relations', color: 'violet' },
{ type: 'ordering', icon: '🔢', label: 'Sequence', color: 'blue' },
{ type: 'short-answer', icon: '💬', label: 'Open-Ended', color: 'indigo' },
{ type: 'hotspot', icon: '🔍', label: 'Hotspot', color: 'amber' },
{ type: 'audio-response', icon: '🎤', label: 'Phonetic', color: 'purple' },
{ type: 'memory-match', icon: '🧠', label: 'Cognitive', color: 'fuchsia' },
{ type: 'peer-review', icon: '👥', label: 'Peer Review', color: 'rose' },
].map((item) => (
<button
key={item.type}
onClick={() => addBlock(item.type as any)}
className="flex flex-col items-center justify-center gap-3 p-6 bg-white dark:bg-white/5 border border-slate-100 dark:border-white/10 rounded-[2rem] hover:border-blue-500/50 hover:shadow-xl hover:-translate-y-1 transition-all active:scale-95 group shadow-sm shrink-0"
>
<span className="text-3xl group-hover:scale-125 transition-transform duration-300">{item.icon}</span>
<div className="flex flex-col items-center">
<span className="text-[8px] font-black uppercase tracking-widest text-slate-400 dark:text-gray-500 group-hover:text-blue-600 transition-colors uppercase">{item.label}</span>
</div>
</button>
))}
</div>
<div className="flex flex-wrap items-center justify-center gap-6 pt-8">
<button
onClick={handleGenerateQuiz}
disabled={isGeneratingQuiz}
className="flex flex-col items-center gap-2 p-6 bg-gradient-to-b from-indigo-500/20 to-blue-500/20 border border-indigo-500/30 hover:border-indigo-500/60 rounded-3xl transition-all group w-36"
className="px-10 py-5 bg-gradient-to-br from-indigo-600 to-blue-700 text-white rounded-[2rem] shadow-2xl shadow-blue-500/40 hover:scale-105 active:scale-95 transition-all flex items-center gap-4 group disabled:opacity-50"
>
<span className="text-2xl group-hover:scale-110 transition-transform">{isGeneratingQuiz ? '⏳' : '✨'}</span>
<span className="text-[10px] font-black uppercase tracking-widest text-indigo-400">{isGeneratingQuiz ? 'Building...' : 'AI Builder'}</span>
<div className="w-10 h-10 rounded-xl bg-white/20 flex items-center justify-center text-xl group-hover:rotate-12 transition-transform">
{isGeneratingQuiz ? '⏳' : '✨'}
</div>
<div className="text-left">
<div className="text-[10px] font-black uppercase tracking-[0.2em] opacity-70">Neural Engine</div>
<div className="font-black text-sm uppercase tracking-wider">{isGeneratingQuiz ? 'Constructing...' : 'AI Builder'}</div>
</div>
</button>
{/* Browse Library */}
<button
onClick={() => setIsLibraryPanelOpen(true)}
className="flex flex-col items-center gap-2 p-6 bg-gradient-to-b from-emerald-500/20 to-teal-500/20 border border-emerald-500/30 hover:border-emerald-500/60 rounded-3xl transition-all group w-36"
className="px-10 py-5 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-900 dark:text-white rounded-[2rem] shadow-xl hover:border-emerald-500/50 hover:bg-emerald-50 dark:hover:bg-emerald-500/10 active:scale-95 transition-all flex items-center gap-4 group"
>
<Library className="w-6 h-6 text-emerald-400 group-hover:scale-110 transition-transform" />
<span className="text-[10px] font-black uppercase tracking-widest text-emerald-400">Library</span>
<div className="w-10 h-10 rounded-xl bg-emerald-500/10 flex items-center justify-center text-emerald-600 dark:text-emerald-400 group-hover:scale-110 transition-transform">
<Library size={24} />
</div>
<div className="text-left">
<div className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400">Personal Vault</div>
<div className="font-black text-sm uppercase tracking-wider">Cloud Library</div>
</div>
</button>
</div>
</div>
@@ -1059,67 +1164,75 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
<Modal
isOpen={isAIQuizModalOpen}
onClose={() => !isGeneratingQuiz && setIsAIQuizModalOpen(false)}
title="AI Quiz Customization"
title="AI Neural Configuration"
>
<form onSubmit={handleConfirmGenerateQuiz} className="space-y-6">
<div className="p-4 rounded-xl bg-purple-500/5 border border-purple-500/10">
<p className="text-xs text-purple-300 leading-relaxed font-medium">
Tell the AI what to focus on and what type of questions you prefer.
<form onSubmit={handleConfirmGenerateQuiz} className="space-y-8 p-4">
<div className="p-6 rounded-[1.5rem] bg-indigo-50 dark:bg-indigo-500/10 border border-indigo-100 dark:border-indigo-500/20 flex gap-4">
<div className="w-10 h-10 rounded-xl bg-white dark:bg-white/10 flex items-center justify-center text-indigo-600 dark:text-indigo-400 shadow-sm shrink-0">
<Brain size={20} />
</div>
<p className="text-xs text-indigo-700 dark:text-indigo-300 leading-relaxed font-black uppercase tracking-tight">
Define the thematic focus. The model will synthesize activity blocks based on your curriculum constraints.
</p>
</div>
<div>
<label className="block text-[10px] font-black uppercase tracking-widest text-gray-500 mb-2">
Focus / Context
<div className="space-y-3">
<label className="block text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500">
Thematic Context / Focus Area
</label>
<textarea
autoFocus
value={aiQuizContext}
onChange={(e) => setAiQuizContext(e.target.value)}
placeholder="e.g. Focus on past tense verbs, or use vocabulary related to travel..."
className="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-purple-500 transition-all text-gray-900 dark:text-white h-24 resize-none"
placeholder="e.g. Focus on cognitive load management, or prioritize practical applications..."
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-[1.5rem] p-6 text-sm focus:outline-none focus:ring-4 focus:ring-indigo-500/10 transition-all text-slate-900 dark:text-white h-32 resize-none shadow-inner font-medium"
disabled={isGeneratingQuiz}
/>
</div>
<div>
<label className="block text-[10px] font-black uppercase tracking-widest text-gray-500 mb-2">
Question Type
<div className="space-y-3">
<label className="block text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500">
Block Architecture
</label>
<select
value={aiQuizType}
onChange={(e) => setAiQuizType(e.target.value)}
className="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-purple-500 transition-all text-gray-900 dark:text-white appearance-none font-bold"
disabled={isGeneratingQuiz}
>
<option value="multiple-choice">Multiple Choice</option>
<option value="true-false">True / False</option>
<option value="vocabulary">Vocabulary Focus</option>
<option value="grammar">Grammar Focus</option>
</select>
<div className="relative group/select">
<select
value={aiQuizType}
onChange={(e) => setAiQuizType(e.target.value)}
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-2xl px-5 py-4 text-sm focus:outline-none focus:ring-4 focus:ring-indigo-500/10 transition-all text-slate-900 dark:text-white appearance-none font-black uppercase tracking-tight shadow-inner"
disabled={isGeneratingQuiz}
>
<option value="multiple-choice">Multiple Choice Matrix</option>
<option value="true-false">Binary Validation (T/F)</option>
<option value="vocabulary">Lexical Focus / Vocab</option>
<option value="grammar">Structural / Grammar Focus</option>
</select>
<div className="absolute right-5 top-1/2 -translate-y-1/2 pointer-events-none text-slate-400">
<ChevronDown size={18} />
</div>
</div>
</div>
<div className="flex gap-3 pt-2">
<div className="flex gap-4 pt-4">
<button
type="button"
onClick={() => setIsAIQuizModalOpen(false)}
disabled={isGeneratingQuiz}
className="flex-1 px-4 py-2.5 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg transition-all text-sm font-medium"
className="flex-1 px-8 py-4 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl transition-all text-[10px] font-black uppercase tracking-[0.2em] text-slate-500 hover:bg-slate-50 active:scale-95 shadow-sm"
>
Cancel
Abort
</button>
<button
type="submit"
disabled={isGeneratingQuiz}
className="flex-[2] px-4 py-2.5 bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-500 hover:to-indigo-500 text-gray-900 dark:text-white rounded-lg transition-all shadow-lg shadow-purple-500/20 font-bold text-sm flex items-center justify-center gap-2"
className="flex-[2] px-8 py-4 bg-indigo-600 text-white rounded-2xl transition-all shadow-xl shadow-indigo-500/40 font-black text-[10px] uppercase tracking-[0.2em] flex items-center justify-center gap-3 hover:bg-indigo-500 active:scale-95 disabled:bg-slate-300"
>
{isGeneratingQuiz ? (
<>
<div className="w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin" />
Generating...
Synthesizing...
</>
) : (
"Generate Quiz"
"Initiate Generation"
)}
</button>
</div>
web/studio/src/app/courses/[id]/page.tsx
+60 -54
View File
@@ -228,7 +228,7 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
pageTitle="Editor de Curso"
pageDescription={`Diseña la estructura de tu curso y el contenido de las lecciones.`}
pageActions={
<>
<div className="flex items-center gap-4">
<button
onClick={async () => {
try {
@@ -240,105 +240,108 @@ 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-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"
className="flex items-center gap-3 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-2xl text-[10px] uppercase tracking-widest font-black transition-all active:scale-95 text-slate-600 dark:text-white shadow-sm"
>
<PlayCircle size={18} /> Previsualizar
<PlayCircle size={20} className="text-blue-500" /> PREVIEW
</button>
<button
onClick={handlePublish}
disabled={saving}
className={`flex items-center gap-2 px-6 py-2.5 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-bold text-sm shadow-md shadow-blue-600/20 transition-all active:scale-95 ${saving ? 'opacity-50 cursor-not-allowed' : ''}`}
className={`flex items-center gap-3 px-8 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl font-black text-[10px] uppercase tracking-[0.2em] shadow-xl shadow-blue-500/20 transition-all active:scale-95 ${saving ? 'opacity-50 cursor-not-allowed' : ''}`}
>
{saving ? (
<div className="w-5 h-5 border-2 border-white/20 border-t-white rounded-full animate-spin" />
<div className="w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin" />
) : (
<Send size={18} />
)}
{saving ? 'Publicando...' : 'Publicar Curso'}
{saving ? 'PUBLISHING...' : 'PUBLISH COURSE'}
</button>
</>
</div>
}
>
<div className="space-y-6">
{modules.map((module: FullModule, mIndex: number) => (
<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">
<div key={module.id} className="bg-white dark:bg-white/5 rounded-[2.5rem] overflow-hidden border border-slate-200 dark:border-white/10 shadow-sm group/module">
<div className="bg-slate-50 dark:bg-white/5 px-8 p-6 flex justify-between items-center border-b border-slate-200 dark:border-white/5">
<div className="flex items-center gap-6 flex-1">
<div className="flex flex-col gap-1">
<button
onClick={() => handleReorderModule(mIndex, 'up')}
disabled={mIndex === 0}
className="text-slate-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 disabled:opacity-0 transition-colors"
className="p-1 text-slate-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 disabled:opacity-0 transition-colors bg-white dark:bg-white/5 rounded-md border border-slate-100 dark:border-white/5"
>
<ChevronUp className="w-4 h-4" />
<ChevronUp className="w-3 h-3" />
</button>
<button
onClick={() => handleReorderModule(mIndex, 'down')}
disabled={mIndex === modules.length - 1}
className="text-slate-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 disabled:opacity-0 transition-colors"
className="p-1 text-slate-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 disabled:opacity-0 transition-colors bg-white dark:bg-white/5 rounded-md border border-slate-100 dark:border-white/5"
>
<ChevronDown className="w-4 h-4" />
<ChevronDown className="w-3 h-3" />
</button>
</div>
<GripVertical className="text-slate-400 dark:text-gray-600 w-5 h-5 cursor-grab active:cursor-grabbing" />
<GripVertical className="text-slate-300 dark:text-gray-600 w-5 h-5 cursor-grab active:cursor-grabbing hover:text-blue-500 transition-colors" />
{editingId === module.id ? (
<div className="flex items-center gap-2 flex-1">
<div className="flex items-center gap-3 flex-1 max-w-2xl">
<input
autoFocus
value={editValue}
onChange={(e) => setEditValue(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && handleSaveTitle(module.id, 'module')}
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"
className="bg-white dark:bg-black/40 border border-blue-500/50 rounded-2xl px-5 py-3 flex-1 text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500/30 text-lg font-black uppercase tracking-tight shadow-inner"
/>
<button onClick={() => handleSaveTitle(module.id, 'module')} className="text-green-400 hover:text-green-300">
<button onClick={() => handleSaveTitle(module.id, 'module')} className="w-12 h-12 flex items-center justify-center bg-blue-50 dark:bg-blue-500/10 text-blue-600 dark:text-blue-400 rounded-xl hover:bg-blue-600 hover:text-white transition-all shadow-lg shadow-blue-500/10">
<Save className="w-5 h-5" />
</button>
<button onClick={() => setEditingId(null)} className="text-gray-400 hover:text-red-400">
<button onClick={() => setEditingId(null)} className="w-12 h-12 flex items-center justify-center bg-red-50 dark:bg-red-500/10 text-red-500 dark:text-red-400 rounded-xl hover:bg-red-600 hover:text-white transition-all">
<X className="w-5 h-5" />
</button>
</div>
) : (
<div className="flex items-center gap-3 group flex-1">
<span
onClick={() => { setEditingId(module.id); setEditValue(module.title); }}
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>
<div className="flex flex-col">
<span className="text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-gray-500 mb-0.5">Module {mIndex + 1}</span>
<span
onClick={() => { setEditingId(module.id); setEditValue(module.title); }}
className="font-black text-2xl text-slate-900 dark:text-white cursor-pointer hover:text-blue-600 dark:hover:text-blue-400 transition-colors uppercase tracking-tight"
>
{module.title || `Untitled Section`}
</span>
</div>
<button
onClick={() => { setEditingId(module.id); setEditValue(module.title); }}
className="opacity-0 group-hover:opacity-100 text-slate-400 hover:text-slate-900 dark:text-white transition-opacity"
className="opacity-0 group-hover:opacity-100 p-2 text-slate-400 hover:text-blue-600 dark:text-gray-600 transition-all active:scale-90"
>
<Pencil className="w-4 h-4" />
</button>
</div>
)}
</div>
<div className="flex items-center gap-3">
<div className="flex items-center gap-2">
<button
onClick={() => handleDeleteModule(module.id)}
className="text-slate-400 hover:text-red-500 dark:hover:text-red-400 transition-colors"
className="w-11 h-11 flex items-center justify-center bg-transparent border border-transparent hover:border-red-500/30 hover:bg-red-50 dark:hover:bg-red-500/10 text-slate-300 hover:text-red-600 transition-all rounded-xl active:scale-95"
>
<Trash2 className="w-4 h-4" />
<Trash2 className="w-5 h-5" />
</button>
</div>
</div>
<div className="p-6 space-y-3">
<div className="p-10 space-y-4 bg-slate-50/30 dark:bg-transparent">
{module.lessons.map((lesson: Lesson, lIndex: number) => (
<div key={lesson.id} className="flex items-center gap-3 group/row">
<div className="flex flex-col opacity-0 group-hover/row:opacity-100 transition-opacity">
<div key={lesson.id} className="flex items-center gap-5 group/row">
<div className="flex flex-col gap-1 opacity-0 group-hover/row:opacity-100 transition-all scale-95 group-hover/row:scale-100">
<button
onClick={() => handleReorderLesson(module.id, lIndex, 'up')}
disabled={lIndex === 0}
className="text-slate-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 disabled:opacity-0"
className="p-1 text-slate-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 disabled:opacity-0 bg-white dark:bg-white/5 rounded-md border border-slate-100 dark:border-white/5"
>
<ChevronUp className="w-3 h-3" />
</button>
<button
onClick={() => handleReorderLesson(module.id, lIndex, 'down')}
disabled={lIndex === module.lessons.length - 1}
className="text-slate-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 disabled:opacity-0"
className="p-1 text-slate-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 disabled:opacity-0 bg-white dark:bg-white/5 rounded-md border border-slate-100 dark:border-white/5"
>
<ChevronDown className="w-3 h-3" />
</button>
@@ -346,38 +349,38 @@ 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-slate-50 dark:bg-black/20 shadow-inner">
<div className="flex items-center gap-3 bg-white dark:bg-black/20 border-2 border-blue-500/50 p-3 rounded-2xl shadow-inner animate-in slide-in-from-left-2 duration-200">
<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-slate-900 dark:text-white focus:outline-none font-medium"
className="bg-transparent border-none flex-1 text-slate-900 dark:text-white focus:outline-none font-black uppercase tracking-tight"
/>
<button onClick={() => handleSaveTitle(lesson.id, 'lesson')} className="text-green-600 dark:text-green-400">
<button onClick={() => handleSaveTitle(lesson.id, 'lesson')} className="w-9 h-9 flex items-center justify-center bg-blue-50 dark:bg-blue-500/10 text-blue-600 dark:text-blue-400 rounded-xl hover:bg-blue-600 hover:text-white transition-all">
<Save className="w-4 h-4" />
</button>
<button onClick={() => setEditingId(null)} className="text-slate-400 dark:text-gray-400">
<button onClick={() => setEditingId(null)} className="w-9 h-9 flex items-center justify-center bg-red-50 dark:bg-red-500/10 text-red-500 dark:text-red-400 rounded-xl hover:bg-red-600 hover:text-white transition-all">
<X className="w-4 h-4" />
</button>
</div>
) : (
<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-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 className="flex items-center justify-between bg-white dark:bg-black/20 border border-slate-200 dark:border-white/5 p-5 rounded-[1.5rem] 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-5">
<div className="w-12 h-12 rounded-xl bg-blue-50 dark:bg-blue-500/10 border border-blue-100 dark:border-blue-500/20 flex items-center justify-center text-blue-600 dark:text-blue-400 group-hover/lesson:scale-110 transition-transform shadow-sm">
{lesson.content_type === 'video' ? <PlayCircle className="w-6 h-6" /> : <FileText className="w-6 h-6" />}
</div>
<div className="flex flex-col">
<span
onClick={(e) => { e.preventDefault(); e.stopPropagation(); startEditing(lesson.id, lesson.title); }}
className="font-bold text-slate-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
className="font-black text-slate-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-colors uppercase tracking-tight text-sm"
>
{lesson.title}
</span>
<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>
<div className="flex items-center gap-3 text-[10px] text-slate-400 dark:text-gray-500 uppercase mt-1 font-black tracking-widest">
<span className="px-2 py-0.5 bg-slate-100 dark:bg-white/5 rounded-md">{lesson.content_type}</span>
{lesson.due_date && (
<div className="flex items-center gap-1 text-orange-600 dark:text-orange-400">
<div className="flex items-center gap-1.5 text-orange-600 dark:text-orange-400/80">
<Calendar className="w-3 h-3" />
{new Date(lesson.due_date).toLocaleDateString()}
</div>
@@ -385,16 +388,16 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
</div>
</div>
</Link>
<div className="flex items-center gap-4">
<div className="flex items-center gap-2">
<button
onClick={(e) => { e.preventDefault(); e.stopPropagation(); startEditing(lesson.id, lesson.title); }}
className="opacity-0 group-hover/lesson:opacity-100 text-slate-400 hover:text-slate-900 dark:text-white transition-opacity"
className="opacity-0 group-hover/lesson:opacity-100 w-10 h-10 flex items-center justify-center bg-transparent hover:bg-blue-50 dark:hover:bg-white/5 rounded-xl text-slate-400 hover:text-blue-600 transition-all"
>
<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-slate-400 hover:text-red-500 dark:hover:text-red-400 transition-opacity"
className="opacity-0 group-hover/lesson:opacity-100 w-10 h-10 flex items-center justify-center bg-transparent hover:bg-red-50 dark:hover:bg-red-500/10 rounded-xl text-slate-400 hover:text-red-500 transition-all"
>
<Trash2 className="w-4 h-4" />
</button>
@@ -407,9 +410,9 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
<button
onClick={() => handleAddLesson(module.id)}
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"
className="w-full py-4 border-2 border-dashed border-slate-200 dark:border-white/10 rounded-2xl text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 hover:border-blue-500/40 hover:bg-blue-50/50 dark:hover:bg-blue-500/5 transition-all mt-4 flex items-center justify-center gap-3 active:scale-95"
>
<Plus className="w-4 h-4" /> New Lesson
<Plus className="w-4 h-4" /> Add Lesson to Module
</button>
</div>
</div>
@@ -417,9 +420,12 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
<button
onClick={handleAddModule}
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"
className="w-full py-12 border-2 border-dashed border-slate-200 dark:border-white/10 rounded-[2.5rem] font-black text-xs uppercase tracking-[0.3em] text-slate-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 hover:border-blue-500/40 hover:bg-blue-50/50 dark:hover:bg-blue-500/5 transition-all flex items-center justify-center gap-4 group shadow-inner"
>
<Plus className="w-6 h-6" /> Add New Module
<div className="w-12 h-12 rounded-2xl bg-white dark:bg-white/5 flex items-center justify-center border border-slate-100 dark:border-white/5 shadow-sm group-hover:scale-110 transition-transform">
<Plus className="w-6 h-6" />
</div>
Add New Curriculum Module
</button>
</div>
</CourseEditorLayout>
web/studio/src/app/courses/[id]/peer-reviews/page.tsx
+67 -56
View File
@@ -119,23 +119,23 @@ export default function PeerReviewDashboard() {
<ArrowLeft className="w-6 h-6" />
</button>
<div>
<h1 className="text-3xl font-bold bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent">
Peer Review Management
<h1 className="text-4xl font-black bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent uppercase tracking-tighter">
Peer Assessment
</h1>
<p className="text-gray-400 mt-1">Monitor and manage student peer assessments</p>
<p className="text-slate-500 dark:text-gray-400 mt-1 font-medium">Monitor and manage student peer feedback loops</p>
</div>
</div>
</div>
<CourseEditorLayout activeTab="peer-reviews">
<div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
<div className="grid grid-cols-1 lg:grid-cols-4 gap-10">
{/* Lessons List */}
<div className="space-y-4">
<h3 className="text-sm font-bold text-gray-500 uppercase tracking-widest px-2">Activities</h3>
<div className="space-y-6">
<h3 className="text-[10px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-[0.2em] px-4">Learning Activities</h3>
<div className="space-y-2">
{lessons.length === 0 ? (
<div className="p-4 bg-white/5 border border-white/10 rounded-xl text-sm text-gray-500 italic">
No peer review activities found in this course.
<div className="p-6 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl text-sm text-slate-400 italic">
No peer review activities found.
</div>
) : (
lessons.map(lesson => (
@@ -145,13 +145,13 @@ export default function PeerReviewDashboard() {
setSelectedLessonId(lesson.id);
setSelectedSubmissionId(null);
}}
className={`w-full text-left p-4 rounded-xl border transition-all ${selectedLessonId === lesson.id
? "bg-purple-500/10 border-purple-500/50 text-purple-400 shadow-lg shadow-purple-500/5"
: "bg-white/5 border-white/10 text-gray-400 hover:border-white/20"
className={`w-full text-left p-5 rounded-[1.5rem] border transition-all active:scale-95 ${selectedLessonId === lesson.id
? "bg-purple-50 dark:bg-purple-500/10 border-purple-200 dark:border-purple-500/50 text-purple-600 dark:text-purple-400 shadow-md shadow-purple-500/5 font-black uppercase tracking-tight"
: "bg-white dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-500 dark:text-gray-400 hover:border-purple-500/30 font-bold"
}`}
>
<div className="font-bold truncate">{lesson.title}</div>
<div className="text-[10px] uppercase font-black tracking-tighter opacity-70 mt-1">Peer Assessment</div>
<div className="truncate text-sm">{lesson.title}</div>
<div className="text-[9px] uppercase font-black tracking-widest opacity-60 mt-1">Requirement</div>
</button>
))
)}
@@ -159,100 +159,111 @@ export default function PeerReviewDashboard() {
</div>
{/* Submissions List */}
<div className="lg:col-span-3 space-y-6">
<div className="glass p-6 border-white/10">
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6">
<h2 className="text-xl font-bold flex items-center gap-2">
<Users className="text-blue-400" />
<div className="lg:col-span-3 space-y-8">
<div className="bg-white dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-[2.5rem] p-10 shadow-sm">
<div className="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-10">
<h2 className="text-2xl font-black flex items-center gap-4 uppercase tracking-tight text-slate-900 dark:text-white">
<div className="w-12 h-12 rounded-2xl bg-blue-50 dark:bg-blue-500/10 border border-blue-100 dark:border-blue-500/20 flex items-center justify-center text-blue-600 dark:text-blue-400 shadow-sm">
<Users size={24} />
</div>
Submissions
</h2>
<div className="relative w-full md:w-64">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 w-4 h-4" />
<div className="relative w-full md:w-80 group">
<Search className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-300 dark:text-gray-500 w-5 h-5 group-focus-within:text-blue-500 transition-colors" />
<input
type="text"
placeholder="Search students..."
placeholder="Search student 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"
className="w-full bg-slate-50 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-[1.25rem] py-4 pl-12 pr-6 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/30 text-slate-900 dark:text-white transition-all shadow-inner"
/>
</div>
</div>
{submissionsLoading ? (
<div className="flex justify-center py-20">
<Loader2 className="w-8 h-8 text-blue-500 animate-spin" />
<div className="flex flex-col items-center justify-center py-32 space-y-4">
<Loader2 className="w-12 h-12 text-blue-500 animate-spin" />
<span className="text-xs font-black uppercase tracking-widest text-slate-400">Loading records...</span>
</div>
) : filteredSubmissions.length === 0 ? (
<div className="text-center py-20 bg-black/20 rounded-2xl border border-dashed border-white/10">
<MessageSquare className="w-12 h-12 text-gray-600 mx-auto mb-4" />
<p className="text-gray-500 italic">No submissions found for this activity.</p>
<div className="text-center py-32 bg-slate-50 dark:bg-black/20 rounded-3xl border border-dashed border-slate-200 dark:border-white/10">
<div className="w-20 h-20 bg-white dark:bg-white/5 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-sm">
<MessageSquare className="w-10 h-10 text-slate-300 dark:text-gray-700" />
</div>
<p className="text-slate-500 dark:text-gray-500 font-bold uppercase tracking-tight">No submissions found for this activity.</p>
</div>
) : (
<div className="space-y-3 overflow-y-auto max-h-[600px] pr-2 custom-scrollbar">
<div className="space-y-4 overflow-y-auto max-h-[700px] pr-4 custom-scrollbar">
{filteredSubmissions.map(sub => (
<div key={sub.id} className="group">
<div
onClick={() => setSelectedSubmissionId(selectedSubmissionId === sub.id ? null : sub.id)}
className={`p-4 rounded-xl border transition-all cursor-pointer ${selectedSubmissionId === sub.id
? "bg-blue-500/5 border-blue-500/30"
: "bg-white/[0.02] border-white/5 hover:bg-white/[0.05] hover:border-white/20"
className={`p-6 rounded-[1.5rem] border transition-all cursor-pointer shadow-sm active:scale-[0.99] ${selectedSubmissionId === sub.id
? "bg-blue-50 dark:bg-blue-500/5 border-blue-200 dark:border-blue-500/30"
: "bg-slate-50/50 dark:bg-white/[0.02] border-slate-200 dark:border-white/5 hover:bg-white dark:hover:bg-white/[0.05] hover:border-blue-500/30"
}`}
>
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center font-bold text-sm">
<div className="flex items-center gap-5">
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-blue-600 to-indigo-700 flex items-center justify-center font-black text-white text-lg shadow-lg shadow-blue-500/20">
{sub.full_name.charAt(0)}
</div>
<div>
<div className="font-bold text-gray-900 dark:text-white group-hover:text-blue-400 transition-colors">{sub.full_name}</div>
<div className="text-xs text-gray-500">{sub.email}</div>
<div className="font-black text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors uppercase tracking-tight text-sm">{sub.full_name}</div>
<div className="text-[10px] font-bold text-slate-400 dark:text-gray-500 uppercase tracking-widest">{sub.email}</div>
</div>
</div>
<div className="flex items-center gap-8">
<div className="flex items-center gap-10">
<div className="text-right">
<div className="text-sm font-black text-gray-900 dark:text-white flex items-center gap-1.5 justify-end">
<Award className="w-4 h-4 text-yellow-400" />
<div className="text-lg font-black text-slate-900 dark:text-white flex items-center gap-2 justify-end">
<Award className="w-5 h-5 text-yellow-500" />
{sub.average_score !== null ? `${(sub.average_score).toFixed(1)}/10` : '—'}
</div>
<div className="text-[10px] text-gray-500 font-bold uppercase tracking-widest">Avg. Score</div>
<div className="text-[9px] text-slate-400 dark:text-gray-500 font-black uppercase tracking-[0.2em]">Rating</div>
</div>
<div className="text-right">
<div className={`text-sm font-black flex items-center gap-1.5 justify-end ${sub.review_count >= 2 ? 'text-green-400' : 'text-orange-400'}`}>
<CheckCircle className="w-4 h-4" />
<div className={`text-lg font-black flex items-center gap-2 justify-end ${sub.review_count >= 2 ? 'text-green-600' : 'text-orange-500'}`}>
<CheckCircle className="w-5 h-5" />
{sub.review_count}
</div>
<div className="text-[10px] text-gray-500 font-bold uppercase tracking-widest">Reviews</div>
<div className="text-[9px] text-slate-400 dark:text-gray-500 font-black uppercase tracking-[0.2em]">Feedback</div>
</div>
<div className="text-right hidden md:block">
<div className="text-sm font-medium text-gray-400 flex items-center gap-1.5 justify-end">
<div className="text-right hidden xl:block">
<div className="text-sm font-bold text-slate-400 dark:text-gray-500 flex items-center gap-2 justify-end">
<Clock className="w-4 h-4" />
{new Date(sub.submitted_at).toLocaleDateString()}
</div>
<div className="text-[10px] text-gray-500 font-bold uppercase tracking-widest">Submitted</div>
<div className="text-[9px] text-slate-400 dark:text-gray-500 font-black uppercase tracking-[0.2em]">Delivery</div>
</div>
<ChevronRight className={`w-5 h-5 text-gray-600 transition-transform ${selectedSubmissionId === sub.id ? 'rotate-90' : ''}`} />
<ChevronRight className={`w-6 h-6 text-slate-300 transition-all ${selectedSubmissionId === sub.id ? 'rotate-90 text-blue-500' : ''}`} />
</div>
</div>
</div>
{/* Reviews Detail Drawer-like expansion */}
{selectedSubmissionId === sub.id && (
<div className="mt-2 ml-4 p-6 bg-black/40 border-l-2 border-blue-500/50 rounded-r-xl space-y-4 animate-in slide-in-from-left-2 duration-200">
<h4 className="text-sm font-bold uppercase tracking-widest text-blue-400">Review Details</h4>
<div className="mt-4 ml-8 p-10 bg-slate-50 dark:bg-black/40 border-l-4 border-blue-500 dark:border-blue-500/50 rounded-r-[2rem] space-y-8 animate-in slide-in-from-left-4 duration-300 shadow-inner">
<h4 className="text-[10px] font-black uppercase tracking-[0.3em] text-blue-600 dark:text-blue-400 ml-1">Submission Feedback Details</h4>
{reviewsLoading ? (
<div className="flex py-4"><Loader2 className="w-5 h-5 animate-spin text-blue-500" /></div>
<div className="flex py-10"><Loader2 className="w-8 h-8 animate-spin text-blue-500" /></div>
) : reviews.length === 0 ? (
<p className="text-sm text-gray-500 italic">No reviews received yet.</p>
<div className="p-8 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl text-center text-slate-400 italic">
No peer reviews have been submitted for this user yet.
</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{reviews.map(review => (
<div key={review.id} className="p-4 bg-white/5 border border-white/10 rounded-xl space-y-2">
<div className="flex justify-between items-center">
<span className="text-xs font-bold text-gray-400">Review Task</span>
<span className="text-sm font-black text-yellow-500">{review.score}/10</span>
<div key={review.id} className="p-6 bg-white dark:bg-white/5 border border-slate-100 dark:border-white/10 rounded-2xl space-y-4 shadow-sm group/review hover:border-blue-500/30 transition-all">
<div className="flex justify-between items-center pb-3 border-b border-slate-50 dark:border-white/5">
<span className="text-[9px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-widest">Peer Evaluator</span>
<span className="px-3 py-1 bg-yellow-50 dark:bg-yellow-500/10 text-yellow-600 dark:text-yellow-500 text-sm font-black rounded-lg">
{review.score}/10
</span>
</div>
<p className="text-sm text-gray-300 leading-relaxed italic">"{review.feedback}"</p>
<p className="text-sm text-slate-600 dark:text-gray-300 leading-relaxed italic font-medium px-2">
"{review.feedback}"
</p>
</div>
))}
</div>
web/studio/src/app/courses/[id]/rubrics/page.tsx
+2 -2
View File
@@ -17,9 +17,9 @@ export default function RubricsPage() {
pageTitle="Gestión de Rúbricas"
pageDescription="Crea y gestiona rúbricas de evaluación para tu curso."
pageActions={
<div className="hidden md:flex items-center gap-2 bg-blue-500/10 border border-blue-500/20 px-4 py-2 rounded-2xl text-blue-400 text-sm">
<div className="hidden md:flex items-center gap-3 bg-blue-50 dark:bg-blue-500/10 border border-blue-100 dark:border-blue-500/20 px-5 py-2.5 rounded-2xl text-blue-600 dark:text-blue-400 text-[10px] font-black uppercase tracking-widest shadow-sm">
<Info className="w-4 h-4" />
<span>Las rúbricas pueden asignarse a múltiples lecciones.</span>
<span>Reusable rubrics can be assigned to multiple lessons across the course.</span>
</div>
}
>
web/studio/src/app/courses/[id]/sessions/page.tsx
+56 -52
View File
@@ -87,60 +87,62 @@ export default function LiveSessionsPage() {
pageActions={
<button
onClick={() => setIsCreateModalOpen(true)}
className="flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-bold text-sm shadow-md shadow-blue-600/20 transition-all active:scale-95"
className="flex items-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl font-black text-[10px] uppercase tracking-[0.2em] shadow-xl shadow-blue-500/20 transition-all active:scale-95"
>
<Plus size={16} />
Programar Sesión
<Plus size={18} />
PROGRAM SESSION
</button>
}
>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{meetings.length === 0 ? (
<div className="col-span-full py-20 bg-white/[0.02] border border-dashed border-white/10 rounded-3xl text-center">
<Video className="w-16 h-16 text-gray-700 mx-auto mb-4" />
<h3 className="text-xl font-bold text-gray-400 mb-2">No active sessions</h3>
<p className="text-gray-500 max-w-sm mx-auto">Start by scheduling your first virtual meeting for this course.</p>
<div className="col-span-full py-32 bg-slate-50 dark:bg-white/[0.02] border border-dashed border-slate-200 dark:border-white/10 rounded-[3rem] text-center">
<div className="w-24 h-24 bg-white dark:bg-white/5 border border-slate-100 dark:border-white/5 rounded-[2rem] flex items-center justify-center mx-auto mb-6 shadow-sm">
<Video className="w-12 h-12 text-slate-300 dark:text-gray-700" />
</div>
<h3 className="text-2xl font-black text-slate-900 dark:text-white mb-2 uppercase tracking-tight">No active sessions</h3>
<p className="text-slate-500 dark:text-gray-500 max-w-sm mx-auto font-medium">Start by scheduling your first virtual meeting for this course.</p>
</div>
) : (
meetings.map(meeting => (
<div key={meeting.id} className="glass p-6 border-white/10 hover:border-blue-500/30 transition-all group relative overflow-hidden">
<div className="absolute top-0 right-0 p-2 opacity-0 group-hover:opacity-100 transition-opacity">
<div key={meeting.id} className="bg-white dark:bg-black/20 rounded-[2rem] p-8 border border-slate-200 dark:border-white/10 hover:border-blue-500/30 transition-all group relative overflow-hidden shadow-sm hover:shadow-md">
<div className="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
<button
onClick={() => handleDeleteMeeting(meeting.id)}
className="p-2 hover:bg-red-500/20 text-red-400 rounded-lg transition-colors"
className="p-3 bg-red-50 dark:bg-red-500/10 hover:bg-red-500 text-red-500 hover:text-white rounded-xl transition-all shadow-sm"
>
<Trash2 size={16} />
<Trash2 size={18} />
</button>
</div>
<div className="flex items-start gap-4 mb-6">
<div className="w-12 h-12 rounded-2xl bg-blue-500/20 border border-blue-500/30 flex items-center justify-center text-blue-400 shrink-0">
<Video size={24} />
<div className="flex items-start gap-5 mb-8">
<div className="w-14 h-14 rounded-2xl bg-blue-50 dark:bg-blue-500/10 border border-blue-100 dark:border-blue-500/20 flex items-center justify-center text-blue-600 dark:text-blue-400 shrink-0 shadow-sm transition-transform group-hover:scale-110">
<Video size={28} />
</div>
<div>
<h4 className="font-bold text-lg leading-tight mb-1 group-hover:text-blue-400 transition-colors uppercase tracking-tight">{meeting.title}</h4>
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-gray-500">
<Globe size={10} />
<h4 className="font-black text-xl leading-tight mb-2 text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors uppercase tracking-tight">{meeting.title}</h4>
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-gray-500">
<Globe size={12} className="text-blue-500/50" />
{meeting.provider} Session
</div>
</div>
</div>
<div className="space-y-3 mb-8">
<div className="flex items-center gap-3 text-sm text-gray-400">
<CalendarIcon size={16} className="text-blue-500" />
<span className="font-medium">{new Date(meeting.start_at).toLocaleDateString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}</span>
<div className="space-y-4 mb-10">
<div className="flex items-center gap-3 text-sm text-slate-600 dark:text-gray-400 bg-slate-50 dark:bg-white/5 p-3 rounded-xl border border-slate-100 dark:border-white/5 shadow-inner">
<CalendarIcon size={18} className="text-blue-500" />
<span className="font-bold tracking-tight uppercase text-[11px]">{new Date(meeting.start_at).toLocaleDateString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}</span>
</div>
<div className="flex items-center gap-3 text-sm text-gray-400">
<Clock size={16} className="text-blue-500" />
<span className="font-medium">
<div className="flex items-center gap-3 text-sm text-slate-600 dark:text-gray-400 bg-slate-50 dark:bg-white/5 p-3 rounded-xl border border-slate-100 dark:border-white/5 shadow-inner">
<Clock size={18} className="text-blue-500" />
<span className="font-black text-[11px] uppercase tracking-widest">
{new Date(meeting.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
<span className="mx-2 opacity-30">|</span>
{meeting.duration_minutes} minutes
<span className="mx-3 opacity-30">|</span>
{meeting.duration_minutes} MIN
</span>
</div>
{meeting.description && (
<p className="text-xs text-gray-500 line-clamp-2 mt-2 leading-relaxed italic">
<p className="text-xs text-slate-500 dark:text-gray-500 line-clamp-3 mt-4 leading-relaxed italic px-2">
"{meeting.description}"
</p>
)}
@@ -148,17 +150,17 @@ export default function LiveSessionsPage() {
<div className="flex items-center gap-3">
<button
className="flex-1 py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl text-xs font-bold transition-all flex items-center justify-center gap-2"
className="flex-1 py-3 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-[10px] font-black uppercase tracking-widest text-slate-600 dark:text-white transition-all flex items-center justify-center gap-2 shadow-sm active:scale-95"
onClick={() => {
const url = meeting.join_url || `https://meet.jit.si/${meeting.meeting_id}`;
window.open(url, '_blank');
}}
>
<LinkIcon size={14} />
Preview Link
<LinkIcon size={14} className="text-blue-500" />
PREVIEW LINK
</button>
<div className={`px-3 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest ${meeting.is_active ? 'bg-green-500/20 text-green-400' : 'bg-gray-500/20 text-gray-500'}`}>
{meeting.is_active ? 'Scheduled' : 'Past'}
<div className={`px-4 py-3 rounded-xl text-[10px] font-black uppercase tracking-widest border ${meeting.is_active ? 'bg-green-50 dark:bg-green-500/10 text-green-600 dark:text-green-400 border-green-100 dark:border-green-500/20' : 'bg-slate-100 dark:bg-gray-500/20 text-slate-400 dark:text-gray-500 border-slate-200 dark:border-white/5'}`}>
{meeting.is_active ? 'SCHEDULED' : 'PAST'}
</div>
</div>
</div>
@@ -169,65 +171,67 @@ export default function LiveSessionsPage() {
{/* Create Meeting Modal */}
{isCreateModalOpen && (
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm">
<div className="bg-[#16181b] border border-white/10 rounded-3xl w-full max-w-lg overflow-hidden shadow-2xl scale-in-center">
<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 font-black uppercase tracking-tighter">
<Video className="text-blue-500" />
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-900/60 dark:bg-black/80 backdrop-blur-md">
<div className="bg-white dark:bg-[#16181b] border border-slate-200 dark:border-white/10 rounded-[2.5rem] w-full max-w-lg overflow-hidden shadow-2xl animate-in fade-in zoom-in duration-200">
<div className="p-8 border-b border-slate-100 dark:border-white/5 flex items-center justify-between bg-slate-50/50 dark:bg-transparent">
<h2 className="text-2xl font-black flex items-center gap-3 uppercase tracking-tighter text-slate-900 dark:text-white">
<div className="p-2 bg-blue-50 dark:bg-blue-500/10 rounded-xl text-blue-600 dark:text-blue-400">
<Video size={24} />
</div>
Schedule Session
</h2>
<button onClick={() => setIsCreateModalOpen(false)} className="p-2 hover:bg-white/10 rounded-full transition-colors">
<X size={20} />
<button onClick={() => setIsCreateModalOpen(false)} className="w-10 h-10 flex items-center justify-center hover:bg-slate-100 dark:hover:bg-white/10 text-slate-400 rounded-full transition-colors">
<X size={24} />
</button>
</div>
<div className="p-8 space-y-4">
<div className="p-10 space-y-6">
<div className="space-y-2">
<label className="text-xs font-black uppercase tracking-widest text-gray-500">Meeting Title</label>
<label className="text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-gray-500 ml-1">Meeting Title</label>
<input
type="text"
value={newMeeting.title}
onChange={(e) => setNewMeeting({ ...newMeeting, title: e.target.value })}
placeholder="e.g., Weekly Office Hours"
className="w-full bg-black/20 border border-white/10 rounded-xl py-3 px-4 text-sm focus:outline-none focus:border-blue-500/50"
className="w-full bg-slate-50 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-2xl py-4 px-5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/30 text-slate-900 dark:text-white placeholder:text-slate-300 transition-all font-medium shadow-inner"
/>
</div>
<div className="space-y-2">
<label className="text-xs font-black uppercase tracking-widest text-gray-500">Description (Optional)</label>
<label className="text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-gray-500 ml-1">Description (Optional)</label>
<textarea
value={newMeeting.description}
onChange={(e) => setNewMeeting({ ...newMeeting, description: e.target.value })}
placeholder="What will be covered?"
className="w-full bg-black/20 border border-white/10 rounded-xl py-3 px-4 text-sm focus:outline-none focus:border-blue-500/50 resize-none h-20"
className="w-full bg-slate-50 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-2xl py-4 px-5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/30 text-slate-900 dark:text-white placeholder:text-slate-300 transition-all font-medium h-24 resize-none shadow-inner"
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="grid grid-cols-2 gap-6">
<div className="space-y-2">
<label className="text-xs font-black uppercase tracking-widest text-gray-500">Start Time</label>
<label className="text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-gray-500 ml-1">Start Time</label>
<input
type="datetime-local"
value={newMeeting.start_at}
onChange={(e) => setNewMeeting({ ...newMeeting, start_at: e.target.value })}
className="w-full bg-black/20 border border-white/10 rounded-xl py-3 px-4 text-sm focus:outline-none focus:border-blue-500/50 text-gray-900 dark:text-white"
className="w-full bg-slate-50 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-2xl py-4 px-5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/30 text-slate-900 dark:text-white transition-all font-medium shadow-inner"
/>
</div>
<div className="space-y-2">
<label className="text-xs font-black uppercase tracking-widest text-gray-500">Duration (Min)</label>
<label className="text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-gray-500 ml-1">Duration (Min)</label>
<input
type="number"
value={newMeeting.duration_minutes}
onChange={(e) => setNewMeeting({ ...newMeeting, duration_minutes: parseInt(e.target.value) })}
className="w-full bg-black/20 border border-white/10 rounded-xl py-3 px-4 text-sm focus:outline-none focus:border-blue-500/50"
className="w-full bg-slate-50 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-2xl py-4 px-5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/30 text-slate-900 dark:text-white transition-all font-medium shadow-inner"
/>
</div>
</div>
<div className="pt-6">
<div className="pt-8 pb-4">
<button
onClick={handleCreateMeeting}
disabled={!newMeeting.title}
className="w-full py-4 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed rounded-2xl text-sm font-black uppercase tracking-[0.2em] transition-all shadow-xl shadow-blue-500/10"
className="w-full py-5 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed rounded-2xl text-xs font-black uppercase tracking-[0.3em] transition-all shadow-xl shadow-blue-500/20 active:scale-95 text-white"
>
Create Session
Confirm & Create Session
</button>
</div>
</div>
web/studio/src/app/courses/[id]/students/page.tsx
+64 -49
View File
@@ -16,7 +16,8 @@ import {
Mail,
Plus,
UserCircle,
MoreHorizontal
MoreHorizontal,
ChevronRight
} from "lucide-react";
import CourseEditorLayout from "@/components/CourseEditorLayout";
@@ -137,21 +138,21 @@ export default function CourseStudentsPage() {
Listado de Estudiantes
</h2>
{/* Search and Filters */}
<div className="glass p-4 rounded-2xl flex flex-col md:flex-row items-center gap-4">
<div className="bg-slate-50/50 dark:bg-white/5 border border-slate-200 dark:border-white/10 p-5 rounded-3xl flex flex-col md:flex-row items-center gap-4 shadow-sm">
<div className="relative flex-1 w-full">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 w-4 h-4" />
<Search className="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400 dark:text-gray-500 w-4 h-4" />
<input
type="text"
placeholder="Search by name or email..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
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"
className="w-full bg-white dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-2xl py-2.5 pl-11 pr-4 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all font-bold text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-gray-600 shadow-inner"
/>
</div>
<div className="flex items-center gap-2 w-full md:w-auto">
<Filter size={16} className="text-gray-400" />
<div className="flex items-center gap-3 w-full md:w-auto">
<Filter size={16} className="text-slate-400 dark:text-gray-400" />
<select
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]"
className="bg-white dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-2xl px-5 py-2.5 text-xs font-black uppercase tracking-widest focus:outline-none focus:ring-2 focus:ring-blue-500/50 text-slate-900 dark:text-white min-w-[180px] shadow-sm cursor-pointer"
value={selectedCohortId}
onChange={(e) => setSelectedCohortId(e.target.value)}
>
@@ -162,16 +163,16 @@ export default function CourseStudentsPage() {
</div>
{/* Student List */}
<div className="rounded-3xl border border-white/10 bg-white/[0.02] overflow-hidden">
<div className="rounded-3xl border border-slate-200 dark:border-white/10 bg-white dark:bg-white/[0.02] overflow-hidden shadow-sm">
<table className="w-full text-left border-collapse">
<thead>
<tr className="bg-white/5 border-b border-white/5 font-bold text-xs uppercase tracking-widest text-gray-500 uppercase">
<tr className="bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/5 font-black text-[10px] uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500">
<th className="p-6">Student</th>
<th className="p-6">Enrollment Date</th>
<th className="p-6 text-center">Enrollment Status</th>
<th className="p-6 text-right">Actions</th>
</tr>
</thead>
<tbody className="divide-y divide-white/5">
<tbody className="divide-y divide-slate-100 dark:divide-white/5">
{filteredStudents.length === 0 ? (
<tr>
<td colSpan={3} className="p-12 text-center text-slate-500 dark:text-gray-500 italic">No students found.</td>
@@ -180,41 +181,45 @@ export default function CourseStudentsPage() {
<tr key={student.user_id} className="hover:bg-white/[0.02] transition-colors group">
<td className="p-6">
<div className="flex items-center gap-4">
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center font-bold text-sm">
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center font-black text-white text-lg shadow-lg shadow-blue-500/20">
{student.full_name.charAt(0)}
</div>
<div>
<div className="font-bold text-gray-900 dark:text-white group-hover:text-blue-400 transition-colors uppercase tracking-tight">{student.full_name}</div>
<div className="text-xs text-gray-500 flex items-center gap-1 mt-0.5"><Mail size={12} /> {student.email}</div>
<div className="font-black text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors uppercase tracking-tight text-sm">{student.full_name}</div>
<div className="text-xs text-slate-400 dark:text-gray-500 flex items-center gap-1.5 mt-1 font-medium italic"><Mail size={12} className="text-blue-400" /> {student.email}</div>
</div>
</div>
</td>
<td className="p-6 text-gray-400 text-sm font-medium">
{/* In a real app we'd have the enrollment date here */}
Available upon request
<td className="p-6 text-center">
<div className="inline-flex items-center gap-2 px-3 py-1.5 bg-green-500/10 text-green-600 dark:text-green-400 rounded-full border border-green-500/20 text-[10px] font-black uppercase tracking-widest">
<CheckCircle2 size={12} /> Active
</div>
</td>
<td className="p-6 text-right">
<div className="flex items-center justify-end gap-2">
<div className="relative group/actions">
<button className="p-2 hover:bg-white/10 rounded-lg transition-colors text-gray-500">
<button className="p-2.5 hover:bg-slate-100 dark:hover:bg-white/10 rounded-xl transition-all text-slate-400 dark:text-gray-500 active:scale-90">
<MoreHorizontal size={20} />
</button>
<div className="absolute right-0 top-full mt-2 w-48 bg-[#1a1c1e] border border-white/10 rounded-xl shadow-2xl invisible group-hover/actions:visible z-10 p-2">
<div className="text-[10px] font-black uppercase tracking-widest text-gray-600 px-3 py-2 border-b border-white/5 mb-1">Move to Cohort</div>
<div className="absolute right-0 top-full mt-2 w-56 bg-white dark:bg-[#1a1c1e] border border-slate-200 dark:border-white/10 rounded-2xl shadow-2xl invisible group-hover/actions:visible z-10 p-2 animate-in fade-in slide-in-from-top-2 duration-200">
<div className="text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-gray-600 px-3 py-2.5 border-b border-slate-100 dark:border-white/5 mb-1.5 flex items-center gap-2">
<Filter size={10} /> Move to Cohort
</div>
{cohorts.map(c => (
<button
key={c.id}
onClick={() => handleCohortAssignment(student.user_id, c.id)}
className="w-full text-left px-3 py-2 text-xs hover:bg-white/5 rounded-lg transition-colors"
className="w-full text-left px-4 py-2.5 text-xs font-bold text-slate-700 dark:text-gray-300 hover:bg-slate-50 dark:hover:bg-white/5 hover:text-blue-600 dark:hover:text-white rounded-xl transition-all flex items-center justify-between group/item"
>
{c.name}
<ChevronRight size={14} className="opacity-0 group-hover/item:opacity-100 -translate-x-2 group-hover/item:translate-x-0 transition-all" />
</button>
))}
<button
className="w-full text-left px-3 py-2 text-xs text-red-400 hover:bg-red-500/10 rounded-lg transition-colors mt-2 border-t border-white/5"
className="w-full text-left px-4 py-2.5 text-xs font-black uppercase tracking-widest text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10 rounded-xl transition-all mt-2 border-t border-slate-100 dark:border-white/5 pt-3"
onClick={() => { if (confirm("Unenroll student?")) handleCohortAssignment(student.user_id, "", true) }}
>
Unenroll
Unenroll Student
</button>
</div>
</div>
@@ -231,58 +236,68 @@ export default function CourseStudentsPage() {
{/* Enroll Modal */}
{
isEnrollModalOpen && (
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm animate-in fade-in duration-200">
<div className="bg-[#16181b] border border-white/10 rounded-3xl w-full max-w-2xl overflow-hidden shadow-2xl scale-in-center">
<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">
<UserPlus className="text-blue-500" />
Enroll Organization Students
</h2>
<button onClick={() => setIsEnrollModalOpen(false)} className="p-2 hover:bg-white/10 rounded-full transition-colors">
<X size={20} />
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-900/40 dark:bg-black/80 backdrop-blur-md animate-in fade-in duration-300">
<div className="bg-white dark:bg-[#16181b] border border-slate-200 dark:border-white/10 rounded-[2.5rem] w-full max-w-2xl overflow-hidden shadow-2xl scale-in-center">
<div className="p-8 border-b border-slate-100 dark:border-white/5 flex items-center justify-between bg-slate-50/50 dark:bg-transparent">
<div>
<h2 className="text-2xl font-black flex items-center gap-3 text-slate-900 dark:text-white">
<UserPlus className="text-blue-600 dark:text-blue-500" />
Enroll Students
</h2>
<p className="text-xs text-slate-400 dark:text-gray-500 font-bold uppercase tracking-widest mt-1">Select from organization directory</p>
</div>
<button onClick={() => setIsEnrollModalOpen(false)} className="p-3 hover:bg-slate-200 dark:hover:bg-white/10 rounded-2xl transition-all group active:scale-90">
<X size={20} className="text-slate-400 group-hover:text-slate-900 dark:group-hover:text-white" />
</button>
</div>
<div className="p-8 space-y-6">
<div className="p-8 space-y-8">
<div className="relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 w-4 h-4" />
<Search className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 dark:text-gray-500 w-5 h-5" />
<input
type="text"
placeholder="Search and select students from organization..."
placeholder="Search by name or email..."
value={enrollSearch}
onChange={(e) => setEnrollSearch(e.target.value)}
className="w-full bg-black/20 border border-white/10 rounded-xl py-3 pl-10 pr-4 text-sm focus:outline-none"
className="w-full bg-slate-100 dark:bg-black/20 border border-slate-200 dark:border-white/10 rounded-[1.5rem] py-4 pl-12 pr-4 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 font-bold text-slate-900 dark:text-white shadow-inner"
/>
</div>
<div className="space-y-2 max-h-[300px] overflow-y-auto pr-2 custom-scrollbar">
<div className="space-y-3 max-h-[400px] overflow-y-auto pr-2 custom-scrollbar">
{orgUsersLoading ? (
<div className="flex justify-center p-8"><Loader2 className="w-8 h-8 animate-spin text-blue-500" /></div>
<div className="flex justify-center p-12 text-blue-500 items-center flex-col gap-4">
<Loader2 className="w-10 h-10 animate-spin" />
<span className="text-xs font-black uppercase tracking-widest text-slate-400">Fetching Directory...</span>
</div>
) : allOrgUsers.filter(u => u.full_name.toLowerCase().includes(enrollSearch.toLowerCase())).length === 0 ? (
<div className="text-center p-8 text-gray-500 italic">No remaining students to enroll.</div>
<div className="text-center p-12 text-slate-400 dark:text-gray-500 italic font-medium">No remaining students found in organization directory.</div>
) : (
allOrgUsers.filter(u => u.full_name.toLowerCase().includes(enrollSearch.toLowerCase())).map(user => (
<div key={user.id} className="flex items-center justify-between p-4 bg-white/5 border border-white/10 rounded-xl">
<div className="flex items-center gap-3">
<UserCircle className="text-gray-500" />
<div key={user.id} className="flex items-center justify-between p-5 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl group/user hover:bg-white dark:hover:bg-white/[0.08] transition-all shadow-sm">
<div className="flex items-center gap-4">
<div className="w-12 h-12 rounded-2xl bg-white dark:bg-black/20 border border-slate-100 dark:border-white/10 flex items-center justify-center shadow-sm">
<UserCircle className="text-slate-400 dark:text-gray-500" size={24} />
</div>
<div>
<div className="font-bold text-sm tracking-tight">{user.full_name}</div>
<div className="text-xs text-gray-500">{user.email}</div>
<div className="font-black text-slate-900 dark:text-white text-sm tracking-tight group-hover/user:text-blue-600 dark:group-hover/user:text-blue-400 transition-colors uppercase">{user.full_name}</div>
<div className="text-xs text-slate-400 dark:text-gray-500 font-medium flex items-center gap-1.5 mt-0.5 italic"><Mail size={10} className="text-blue-400" /> {user.email}</div>
</div>
</div>
<button
onClick={() => handleEnroll([user.email])}
className="px-4 py-1.5 bg-blue-600 hover:bg-blue-500 text-gray-900 dark:text-white text-xs font-bold rounded-lg transition-all"
className="px-6 py-2 bg-blue-600 hover:bg-blue-500 text-white text-xs font-black uppercase tracking-widest rounded-xl transition-all shadow-md shadow-blue-500/20 active:scale-95"
>
Enroll Now
Enroll
</button>
</div>
))
)}
</div>
<div className="bg-blue-500/10 border border-blue-500/20 p-4 rounded-xl flex gap-3">
<Plus size={20} className="text-blue-400 shrink-0" />
<div className="text-xs text-blue-300 leading-relaxed font-medium">
<div className="bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/20 p-5 rounded-3xl flex gap-4 shadow-sm">
<div className="w-10 h-10 rounded-2xl bg-white dark:bg-black/20 flex items-center justify-center shrink-0 shadow-sm">
<Plus size={20} className="text-blue-600 dark:text-blue-400" />
</div>
<div className="text-xs text-blue-800/80 dark:text-blue-300 leading-relaxed font-bold uppercase tracking-wide">
You can also enroll external students by going to the <strong>Gradebook</strong> and using the Bulk Enroll feature.
</div>
</div>
web/studio/src/app/courses/[id]/team/page.tsx
+41 -31
View File
@@ -119,31 +119,36 @@ export default function CourseTeamPage() {
{loading ? (
<div className="py-20 text-center text-gray-500 animate-pulse">Loading team members...</div>
) : instructors.length === 0 ? (
<div className="py-20 glass rounded-2xl flex flex-col items-center justify-center text-gray-500 gap-4">
<GraduationCap className="w-12 h-12 opacity-20" />
<p>No instructors assigned yet.</p>
<div className="py-24 bg-slate-50 dark:bg-white/5 border-2 border-dashed border-slate-200 dark:border-white/10 rounded-[2.5rem] flex flex-col items-center justify-center text-slate-400 dark:text-gray-500 gap-4 shadow-inner">
<div className="w-20 h-20 rounded-3xl bg-white dark:bg-white/5 flex items-center justify-center shadow-sm">
<GraduationCap className="w-10 h-10 opacity-40" />
</div>
<div className="text-center">
<p className="font-black uppercase tracking-widest text-xs">No instructors assigned yet</p>
<p className="text-[10px] mt-1 font-medium italic">Start by adding your first team member</p>
</div>
</div>
) : (
instructors.map((inst) => (
<div key={inst.id} className="glass p-6 rounded-2xl border-white/5 flex items-center justify-between group">
<div key={inst.id} className="bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 p-6 rounded-[2rem] flex items-center justify-between group hover:bg-slate-50 dark:hover:bg-white/[0.08] transition-all shadow-sm">
<div className="flex items-center gap-6">
<div className="w-12 h-12 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-xl font-bold border-2 border-white/10 shadow-xl">
<div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-2xl font-black text-white border-4 border-white dark:border-white/10 shadow-xl shadow-blue-500/20">
{inst.full_name?.charAt(0) || inst.email?.charAt(0)}
</div>
<div className="space-y-1">
<h3 className="text-lg font-bold flex items-center gap-2">
<h3 className="text-lg font-black text-slate-900 dark:text-white flex items-center gap-3 uppercase tracking-tight">
{inst.full_name}
{inst.role === 'primary' && (
<span className="text-[10px] font-black uppercase px-2 py-0.5 bg-orange-500/10 text-orange-400 border border-orange-500/20 rounded-full">
<span className="text-[9px] font-black uppercase px-2.5 py-1 bg-blue-600 text-white border border-blue-500 shadow-sm shadow-blue-500/20 rounded-full">
Owner
</span>
)}
</h3>
<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}
<div className="flex items-center gap-3 text-xs text-slate-500 dark:text-gray-400 font-bold uppercase tracking-wider">
<span className="flex items-center gap-1.5 lowercase font-medium text-slate-400 normal-case">
<Mail className="w-3.5 h-3.5 text-blue-400 shrink-0" /> {inst.email}
</span>
<span className="w-1 h-1 rounded-full bg-gray-700" />
<span className="w-1 h-1 rounded-full bg-slate-300 dark:bg-gray-700" />
<span className="flex items-center gap-1.5">
{getRoleIcon(inst.role)} {getRoleLabel(inst.role)}
</span>
@@ -171,31 +176,31 @@ export default function CourseTeamPage() {
{/* Add Member Modal */}
{
isAddModalOpen && (
<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 className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/40 dark:bg-black/80 backdrop-blur-md animate-in fade-in duration-300">
<div className="bg-white dark:bg-[#1a1c22] border border-slate-200 dark:border-white/10 rounded-[2.5rem] w-full max-w-lg overflow-hidden shadow-2xl animate-in zoom-in-95 duration-300">
<div className="p-8 border-b border-slate-100 dark:border-white/5 flex justify-between items-center bg-slate-50/50 dark:bg-transparent">
<div>
<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>
<h2 className="text-2xl font-black text-slate-900 dark:text-white uppercase tracking-tight">Add Team Member</h2>
<p className="text-xs text-slate-400 dark:text-gray-500 mt-1 font-bold uppercase tracking-widest">Search for a user in the directory</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" />
<button onClick={() => setIsAddModalOpen(false)} className="p-3 hover:bg-slate-200 dark:hover:bg-white/10 rounded-2xl transition-all text-slate-400 dark:text-gray-500 active:scale-90 group">
<X className="w-6 h-6 group-hover:text-slate-900 dark:group-hover:text-white transition-colors" />
</button>
</div>
<div className="p-8 space-y-8">
<form onSubmit={handleSearch} className="relative">
<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400 dark:text-gray-500" />
<input
autoFocus
placeholder="Type name or email..."
placeholder="Enter name or direct email..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
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"
className="w-full bg-slate-100 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:ring-2 focus:ring-blue-500/50 transition-all font-bold text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-gray-500 shadow-inner"
/>
{searching && (
<div className="absolute right-4 top-1/2 -translate-y-1/2">
<div className="w-5 h-5 border-2 border-white/20 border-t-blue-500 rounded-full animate-spin" />
<div className="w-5 h-5 border-2 border-slate-200 dark:border-white/20 border-t-blue-500 rounded-full animate-spin" />
</div>
)}
</form>
@@ -228,31 +233,36 @@ export default function CourseTeamPage() {
</label>
</div>
<div className="space-y-3 max-h-60 overflow-y-auto pr-2 custom-scrollbar">
<div className="space-y-4 max-h-72 overflow-y-auto pr-2 custom-scrollbar">
{users.length > 0 ? (
users.map(u => (
<button
key={u.id}
onClick={() => handleAddMember(u)}
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"
className="w-full flex items-center justify-between p-5 rounded-3xl bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/10 hover:border-blue-500/30 hover:bg-white dark:hover:bg-white/10 transition-all group shadow-sm active:scale-[0.98]"
>
<div className="flex items-center gap-4 text-left">
<div className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center font-bold text-sm">
<div className="w-12 h-12 rounded-2xl bg-white dark:bg-black/20 border border-slate-100 dark:border-white/10 flex items-center justify-center font-black text-blue-500 text-lg shadow-sm">
{u.full_name.charAt(0)}
</div>
<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 className="font-black text-slate-900 dark:text-white text-sm tracking-tight group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors uppercase">{u.full_name}</div>
<div className="text-xs text-slate-400 dark:text-gray-500 font-medium italic flex items-center gap-1.5 mt-0.5"><Mail size={12} className="text-blue-400" /> {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">
<Plus className="w-4 h-4 text-blue-400 opacity-0 group-hover:opacity-100" />
<div className="w-10 h-10 rounded-xl bg-blue-500/0 flex items-center justify-center group-hover:bg-blue-600 group-hover:text-white transition-all shadow-lg shadow-blue-500/0 group-hover:shadow-blue-500/20">
<Plus className="w-5 h-5 text-blue-600 group-hover:text-white" />
</div>
</button>
))
) : searchQuery && !searching ? (
<div className="py-8 text-center text-gray-600 italic text-sm">No users found matching your search.</div>
) : null}
<div className="py-12 text-center text-slate-400 dark:text-gray-600 italic text-sm font-medium border-2 border-dashed border-slate-100 dark:border-white/5 rounded-[2rem]">No users found matching your search.</div>
) : (
<div className="py-12 bg-blue-50/30 dark:bg-blue-500/5 rounded-3xl border border-blue-100/50 dark:border-blue-500/10 flex flex-col items-center justify-center text-blue-600/50 dark:text-blue-400/30 gap-3">
<Search className="w-8 h-8" />
<p className="text-[10px] font-black uppercase tracking-[0.2em]">Enter a name to search</p>
</div>
)}
</div>
</div>
</div>