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

feat: Introduce PageLayout component to standardize page headers and overall structure across various application pages.

Browse Source
This commit is contained in:
Juan Enrique Allende Cifuentes
2026-03-02 15:35:34 -03:00
parent fe730998a9
commit 2f76ba2f87
12 changed files with 724 additions and 653 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/studio/src/app/courses/[id]/files/page.tsx
+23 -23
View File
@@ -80,30 +80,30 @@ export default function CourseFilesPage() {
}; };
return ( return (
<CourseEditorLayout activeTab="files"> <CourseEditorLayout
<div className="space-y-6"> activeTab="files"
<div className="flex justify-between items-center"> pageTitle="Archivos y Recursos"
<div> pageDescription="Gestiona los archivos específicos de este curso. Estos se incluirán en las exportaciones."
<h1 className="text-2xl font-bold">Course Files & Assets</h1> pageActions={
<p className="text-gray-400 mt-1">Manage files specific to this course. These will be included in exports.</p> <div className="relative">
</div> <input
<div className="relative"> type="file"
<input onChange={handleUpload}
type="file" className="hidden"
onChange={handleUpload} id="file-upload"
className="hidden" disabled={isUploading}
id="file-upload" />
disabled={isUploading} <label
/> htmlFor="file-upload"
<label 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' : ''}`}
htmlFor="file-upload" >
className={`btn btn-primary gap-2 cursor-pointer ${isUploading ? 'loading' : ''}`} {!isUploading && <Upload className="w-4 h-4" />}
> {isUploading ? `Subiendo ${uploadProgress}%` : 'Subir Archivo'}
{!isUploading && <Upload className="w-4 h-4" />} </label>
{isUploading ? `Uploading ${uploadProgress}%` : 'Upload File'}
</label>
</div>
</div> </div>
}
>
<div className="space-y-6">
<div className="glass rounded-xl overflow-hidden"> <div className="glass rounded-xl overflow-hidden">
<table className="w-full text-left"> <table className="w-full text-left">
web/studio/src/app/courses/[id]/grading/page.tsx
+109 -128
View File
@@ -1,7 +1,7 @@
"use client"; "use client";
import React, { useState, useEffect, useCallback } from "react"; import React, { useState, useEffect, useCallback } from "react";
import { useParams, useRouter } from "next/navigation"; import { useParams } from "next/navigation";
import { cmsApi, GradingCategory } from "@/lib/api"; import { cmsApi, GradingCategory } from "@/lib/api";
import { import {
Plus, Plus,
@@ -9,7 +9,6 @@ import {
Percent, Percent,
AlertCircle, AlertCircle,
CheckCircle2, CheckCircle2,
ArrowLeft,
TrendingUp, TrendingUp,
Settings Settings
} from "lucide-react"; } from "lucide-react";
@@ -23,7 +22,6 @@ function cn(...inputs: ClassValue[]) {
export default function GradingPolicyPage() { export default function GradingPolicyPage() {
const { id } = useParams() as { id: string }; const { id } = useParams() as { id: string };
const router = useRouter();
const [categories, setCategories] = useState<GradingCategory[]>([]); const [categories, setCategories] = useState<GradingCategory[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [newName, setNewName] = useState(""); const [newName, setNewName] = useState("");
@@ -80,145 +78,128 @@ export default function GradingPolicyPage() {
); );
return ( return (
<div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8"> <CourseEditorLayout
<div className="max-w-4xl mx-auto"> activeTab="grading"
{/* Header */} pageTitle="Política de Notas"
<div className="flex items-center justify-between mb-12"> pageDescription="Configura los tipos de evaluación y la distribución de pesos del curso."
<div className="flex items-center gap-4"> pageActions={
<button <div className={cn(
onClick={() => router.back()} "flex items-center gap-2 px-4 py-2 rounded-xl border transition-all duration-500",
className="p-2 hover:bg-white/10 rounded-full transition-colors" 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"
<ArrowLeft className="w-6 h-6" /> )}>
</button> {isBalanced ? <CheckCircle2 className="w-5 h-5" /> : <AlertCircle className="w-5 h-5" />}
<div> <span className="font-bold text-lg">{totalWeight}%</span>
<h1 className="text-3xl font-bold bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent"> <span className="text-sm opacity-70">Total Weight</span>
Grading Policy
</h1>
<p className="text-gray-400 mt-1">Configure assessment types and weight distribution</p>
</div>
</div>
<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"
)}>
{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>
</div>
</div> </div>
}
>
<div className="p-0">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
{/* Categories List */}
<div className="lg:col-span-2 space-y-4">
<h2 className="text-sm font-semibold uppercase tracking-wider text-gray-500 mb-6 flex items-center gap-2">
<Settings className="w-4 h-4" /> Assessment Categories
</h2>
<CourseEditorLayout activeTab="grading"> {categories.length === 0 ? (
<div className="p-8"> <div className="bg-white/5 border border-white/10 rounded-2xl p-12 text-center">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8"> <TrendingUp className="w-12 h-12 text-gray-600 mx-auto mb-4" />
{/* Categories List */} <p className="text-gray-400 italic">No grading categories defined yet.</p>
<div className="lg:col-span-2 space-y-4">
<h2 className="text-sm font-semibold uppercase tracking-wider text-gray-500 mb-6 flex items-center gap-2">
<Settings className="w-4 h-4" /> Assessment Categories
</h2>
{categories.length === 0 ? (
<div className="bg-white/5 border border-white/10 rounded-2xl p-12 text-center">
<TrendingUp className="w-12 h-12 text-gray-600 mx-auto mb-4" />
<p className="text-gray-400 italic">No grading categories defined yet.</p>
</div>
) : (
categories.map((cat) => (
<div
key={cat.id}
className="group bg-white/5 border border-white/10 p-6 rounded-2xl flex items-center justify-between hover:border-blue-500/50 hover:bg-white/[0.07] transition-all duration-300"
>
<div className="flex items-center gap-4">
<div className="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center text-blue-400 font-bold group-hover:scale-110 transition-transform">
{cat.weight}%
</div>
<div>
<h3 className="text-lg font-semibold text-gray-100">{cat.name}</h3>
<div className="flex items-center gap-2 mt-1">
<span className="text-xs text-gray-500 bg-white/5 px-2 py-0.5 rounded-full capitalize">
Weight: {cat.weight}%
</span>
</div>
</div>
</div>
<button
onClick={() => handleDelete(cat.id)}
className="p-3 bg-red-500/10 text-red-400 rounded-xl opacity-0 group-hover:opacity-100 hover:bg-red-500 hover:text-gray-900 dark:text-white transition-all duration-300"
>
<Trash2 className="w-5 h-5" />
</button>
</div>
))
)}
</div> </div>
) : (
{/* Add New Category Form */} categories.map((cat) => (
<div className="space-y-6"> <div
<div className="bg-gradient-to-br from-gray-800/50 to-gray-900/50 p-8 rounded-3xl border border-white/10 sticky top-8"> key={cat.id}
<h2 className="text-xl font-bold mb-6 flex items-center gap-2"> className="group bg-white/5 border border-white/10 p-6 rounded-2xl flex items-center justify-between hover:border-blue-500/50 hover:bg-white/[0.07] transition-all duration-300"
<Plus className="w-5 h-5 text-blue-400" /> New Format >
</h2> <div className="flex items-center gap-4">
<div className="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center text-blue-400 font-bold group-hover:scale-110 transition-transform">
<div className="space-y-4"> {cat.weight}%
<div>
<label className="text-xs font-semibold text-gray-400 uppercase tracking-widest ml-1">Assessment Type</label>
<select
value={newName}
onChange={(e) => setNewName(e.target.value)}
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 mt-1.5 focus:outline-none focus:border-blue-500 transition-all text-gray-100 appearance-none"
>
<option value="" className="bg-white dark:bg-gray-900 text-gray-500">Select a type...</option>
<option value="Continuous Assessment" className="bg-white dark:bg-gray-900">Continuous Assessment (Min 4)</option>
<option value="Midterm" className="bg-white dark:bg-gray-900">Midterm</option>
<option value="Final Test" className="bg-white dark:bg-gray-900">Final Test</option>
<option value="Exam" className="bg-white dark:bg-gray-900">Exam</option>
</select>
</div> </div>
<div> <div>
<label className="text-xs font-semibold text-gray-400 uppercase tracking-widest ml-1">Weight (%)</label> <h3 className="text-lg font-semibold text-gray-100">{cat.name}</h3>
<div className="relative mt-1.5"> <div className="flex items-center gap-2 mt-1">
<input <span className="text-xs text-gray-500 bg-white/5 px-2 py-0.5 rounded-full capitalize">
type="number" Weight: {cat.weight}%
placeholder="20" </span>
value={newWeight || ""}
onChange={(e) => setNewWeight(parseInt(e.target.value) || 0)}
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-blue-500 transition-all text-gray-100 pl-10"
/>
<Percent className="w-4 h-4 text-gray-500 absolute left-4 top-1/2 -translate-y-1/2" />
</div> </div>
</div> </div>
</div>
<button
onClick={() => handleDelete(cat.id)}
className="p-3 bg-red-500/10 text-red-400 rounded-xl opacity-0 group-hover:opacity-100 hover:bg-red-500 hover:text-gray-900 dark:text-white transition-all duration-300"
>
<Trash2 className="w-5 h-5" />
</button>
</div>
))
)}
</div>
<button {/* Add New Category Form */}
onClick={handleAdd} <div className="space-y-6">
disabled={submitting || !newName || newWeight <= 0} <div className="bg-gradient-to-br from-gray-800/50 to-gray-900/50 p-8 rounded-3xl border border-white/10 sticky top-8">
className="w-full bg-blue-600 hover:bg-blue-500 disabled:bg-gray-700 disabled:text-gray-500 text-gray-900 dark:text-white font-bold py-4 rounded-2xl mt-4 transition-all shadow-lg shadow-blue-500/20 active:scale-95 flex items-center justify-center gap-2" <h2 className="text-xl font-bold mb-6 flex items-center gap-2">
> <Plus className="w-5 h-5 text-blue-400" /> New Format
{submitting ? "Adding..." : ( </h2>
<>
<Plus className="w-5 h-5" />
Add Category
</>
)}
</button>
{!isBalanced && ( <div className="space-y-4">
<div className="mt-6 p-4 rounded-xl bg-amber-500/10 border border-amber-500/20 flex gap-3"> <div>
<AlertCircle className="w-5 h-5 text-amber-500 shrink-0 mt-0.5" /> <label className="text-xs font-semibold text-gray-400 uppercase tracking-widest ml-1">Assessment Type</label>
<p className="text-sm text-amber-200/80 leading-relaxed"> <select
The total weight of all categories must be exactly 100% for the course to be valid for certification. Currently: <strong>{totalWeight}%</strong> value={newName}
</p> onChange={(e) => setNewName(e.target.value)}
</div> className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 mt-1.5 focus:outline-none focus:border-blue-500 transition-all text-gray-100 appearance-none"
)} >
<option value="" className="bg-white dark:bg-gray-900 text-gray-500">Select a type...</option>
<option value="Continuous Assessment" className="bg-white dark:bg-gray-900">Continuous Assessment (Min 4)</option>
<option value="Midterm" className="bg-white dark:bg-gray-900">Midterm</option>
<option value="Final Test" className="bg-white dark:bg-gray-900">Final Test</option>
<option value="Exam" className="bg-white dark:bg-gray-900">Exam</option>
</select>
</div>
<div>
<label className="text-xs font-semibold text-gray-400 uppercase tracking-widest ml-1">Weight (%)</label>
<div className="relative mt-1.5">
<input
type="number"
placeholder="20"
value={newWeight || ""}
onChange={(e) => setNewWeight(parseInt(e.target.value) || 0)}
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-blue-500 transition-all text-gray-100 pl-10"
/>
<Percent className="w-4 h-4 text-gray-500 absolute left-4 top-1/2 -translate-y-1/2" />
</div> </div>
</div> </div>
<button
onClick={handleAdd}
disabled={submitting || !newName || newWeight <= 0}
className="w-full bg-blue-600 hover:bg-blue-500 disabled:bg-gray-700 disabled:text-gray-500 text-gray-900 dark:text-white font-bold py-4 rounded-2xl mt-4 transition-all shadow-lg shadow-blue-500/20 active:scale-95 flex items-center justify-center gap-2"
>
{submitting ? "Adding..." : (
<>
<Plus className="w-5 h-5" />
Add Category
</>
)}
</button>
{!isBalanced && (
<div className="mt-6 p-4 rounded-xl bg-amber-500/10 border border-amber-500/20 flex gap-3">
<AlertCircle className="w-5 h-5 text-amber-500 shrink-0 mt-0.5" />
<p className="text-sm text-amber-200/80 leading-relaxed">
The total weight of all categories must be exactly 100% for the course to be valid for certification. Currently: <strong>{totalWeight}%</strong>
</p>
</div>
)}
</div> </div>
</div> </div>
</div> </div>
</CourseEditorLayout> </div>
</div> </div>
</div> </CourseEditorLayout>
); );
} }
web/studio/src/app/courses/[id]/page.tsx
+167 -186
View File
@@ -222,30 +222,13 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
if (error) return <div className="py-20 text-center text-red-400">{error}</div>; if (error) return <div className="py-20 text-center text-red-400">{error}</div>;
return ( return (
<div className="min-h-screen bg-transparent text-gray-900 dark:text-gray-100 p-8 transition-colors duration-300"> <>
<div className="max-w-6xl mx-auto"> <CourseEditorLayout
{/* Header */} activeTab="outline"
<div className="flex items-center justify-between mb-12"> pageTitle="Editor de Curso"
<div className="flex items-center gap-4"> pageDescription={`Diseña la estructura de tu curso y el contenido de las lecciones.`}
<button pageActions={
onClick={() => router.push('/')} <>
className="p-2 hover:bg-black/5 dark:hover:bg-white/10 rounded-full transition-colors text-gray-700 dark:text-gray-300"
>
<ArrowLeft className="w-6 h-6" />
</button>
<div>
<h1 className="text-3xl font-bold bg-gradient-to-r from-blue-600 to-indigo-600 dark:from-blue-400 dark:to-indigo-400 bg-clip-text text-transparent">
Course Editor
</h1>
<div className="flex items-center gap-3 mt-1">
<p className="text-gray-600 dark:text-gray-400">Design your course structure and lesson content for {course?.title}</p>
<span className={`text-xs uppercase font-bold px-2 py-0.5 rounded ${course?.pacing_mode === 'instructor_led' ? 'bg-purple-500/10 dark:bg-purple-500/20 text-purple-600 dark:text-purple-400' : 'bg-green-500/10 dark:bg-green-500/20 text-green-600 dark:text-green-400'}`}>
{course?.pacing_mode?.replace('_', ' ') || 'Self Paced'}
</span>
</div>
</div>
</div>
<div className="flex gap-3">
<button <button
onClick={async () => { onClick={async () => {
try { try {
@@ -257,191 +240,189 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
alert("Failed to start preview."); alert("Failed to start preview.");
} }
}} }}
className="flex items-center gap-2 px-6 py-3 glass hover:bg-white/20 transition-all rounded-xl text-sm font-bold shadow-lg active:scale-95" className="flex items-center gap-2 px-6 py-2.5 bg-white dark:bg-white/5 hover:bg-black/5 dark:hover:bg-white/10 border border-black/10 dark:border-white/10 rounded-xl text-sm font-bold transition-all active:scale-95"
> >
<PlayCircle size={18} /> Preview <PlayCircle size={18} /> Previsualizar
</button> </button>
<button <button
onClick={handlePublish} onClick={handlePublish}
disabled={saving} disabled={saving}
className={`flex items-center gap-2 px-6 py-2.5 bg-blue-600 hover:bg-blue-500 rounded-xl font-bold transition-all shadow-lg shadow-blue-500/20 active:scale-95 ${saving ? 'opacity-50 cursor-not-allowed' : ''}`} 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' : ''}`}
> >
{saving ? ( {saving ? (
<div className="w-5 h-5 border-2 border-white/20 border-t-white rounded-full animate-spin" /> <div className="w-5 h-5 border-2 border-white/20 border-t-white rounded-full animate-spin" />
) : ( ) : (
<Send size={18} /> <Send size={18} />
)} )}
{saving ? 'Publishing...' : 'Publish Course'} {saving ? 'Publicando...' : 'Publicar Curso'}
</button> </button>
</div> </>
</div> }
>
<CourseEditorLayout activeTab="outline"> <div className="space-y-6">
<div className="p-8 space-y-6"> {modules.map((module: FullModule, mIndex: number) => (
{modules.map((module: FullModule, mIndex: number) => ( <div key={module.id} className="glass rounded-xl overflow-hidden border-white/5">
<div key={module.id} className="glass rounded-xl overflow-hidden border-white/5"> <div className="bg-white/5 px-6 py-4 flex justify-between items-center border-b border-white/5">
<div className="bg-white/5 px-6 py-4 flex justify-between items-center border-b border-white/5"> <div className="flex items-center gap-4 flex-1">
<div className="flex items-center gap-4 flex-1"> <div className="flex flex-col">
<div className="flex flex-col">
<button
onClick={() => handleReorderModule(mIndex, 'up')}
disabled={mIndex === 0}
className="text-gray-500 hover:text-blue-400 disabled:opacity-0 transition-colors"
>
<ChevronUp className="w-4 h-4" />
</button>
<button
onClick={() => handleReorderModule(mIndex, 'down')}
disabled={mIndex === modules.length - 1}
className="text-gray-500 hover:text-blue-400 disabled:opacity-0 transition-colors"
>
<ChevronDown className="w-4 h-4" />
</button>
</div>
<GripVertical className="text-gray-600 w-5 h-5 cursor-grab active:cursor-grabbing" />
{editingId === module.id ? (
<div className="flex items-center gap-2 flex-1">
<input
autoFocus
value={editValue}
onChange={(e) => setEditValue(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && handleSaveTitle(module.id, 'module')}
className="bg-black/5 dark:bg-black/40 border border-blue-500/50 rounded px-3 py-1 flex-1 text-gray-900 dark:text-gray-900 dark:text-white focus:outline-none"
/>
<button onClick={() => handleSaveTitle(module.id, 'module')} className="text-green-400 hover:text-green-300">
<Save className="w-5 h-5" />
</button>
<button onClick={() => setEditingId(null)} className="text-gray-400 hover:text-red-400">
<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-semibold text-lg text-blue-600 dark:text-blue-400 cursor-pointer hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
>
{module.title || `Module ${module.position}`}
</span>
<button
onClick={() => { setEditingId(module.id); setEditValue(module.title); }}
className="opacity-0 group-hover:opacity-100 text-gray-500 hover:text-gray-900 dark:text-white transition-opacity"
>
<Pencil className="w-4 h-4" />
</button>
</div>
)}
</div>
<div className="flex items-center gap-3">
<button <button
onClick={() => handleDeleteModule(module.id)} onClick={() => handleReorderModule(mIndex, 'up')}
className="text-gray-500 hover:text-red-400 transition-colors" disabled={mIndex === 0}
className="text-gray-500 hover:text-blue-400 disabled:opacity-0 transition-colors"
> >
<Trash2 className="w-4 h-4" /> <ChevronUp className="w-4 h-4" />
</button>
<button
onClick={() => handleReorderModule(mIndex, 'down')}
disabled={mIndex === modules.length - 1}
className="text-gray-500 hover:text-blue-400 disabled:opacity-0 transition-colors"
>
<ChevronDown className="w-4 h-4" />
</button> </button>
</div> </div>
</div> <GripVertical className="text-gray-600 w-5 h-5 cursor-grab active:cursor-grabbing" />
<div className="p-6 space-y-3">
{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">
<button
onClick={() => handleReorderLesson(module.id, lIndex, 'up')}
disabled={lIndex === 0}
className="text-gray-500 hover:text-blue-400 disabled:opacity-0"
>
<ChevronUp className="w-3 h-3" />
</button>
<button
onClick={() => handleReorderLesson(module.id, lIndex, 'down')}
disabled={lIndex === module.lessons.length - 1}
className="text-gray-500 hover:text-blue-400 disabled:opacity-0"
>
<ChevronDown className="w-3 h-3" />
</button>
</div>
<div className="flex-1"> {editingId === module.id ? (
{editingId === lesson.id ? ( <div className="flex items-center gap-2 flex-1">
<div className="flex items-center gap-2 glass border-blue-500/30 p-2 rounded-lg bg-black/5 dark:bg-black/20"> <input
<input autoFocus
autoFocus value={editValue}
value={editValue} onChange={(e) => setEditValue(e.target.value)}
onChange={(e) => setEditValue(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && handleSaveTitle(module.id, 'module')}
onKeyDown={(e) => e.key === 'Enter' && handleSaveTitle(lesson.id, 'lesson')} className="bg-black/5 dark:bg-black/40 border border-blue-500/50 rounded px-3 py-1 flex-1 text-gray-900 dark:text-gray-900 dark:text-white focus:outline-none"
className="bg-transparent border-none flex-1 text-gray-900 dark:text-gray-900 dark:text-white focus:outline-none" />
/> <button onClick={() => handleSaveTitle(module.id, 'module')} className="text-green-400 hover:text-green-300">
<button onClick={() => handleSaveTitle(lesson.id, 'lesson')} className="text-green-600 dark:text-green-400"> <Save className="w-5 h-5" />
<Save className="w-4 h-4" /> </button>
</button> <button onClick={() => setEditingId(null)} className="text-gray-400 hover:text-red-400">
<button onClick={() => setEditingId(null)} className="text-gray-500 dark:text-gray-400"> <X className="w-5 h-5" />
<X className="w-4 h-4" /> </button>
</button>
</div>
) : (
<div className="flex items-center justify-between glass border-black/5 dark:border-white/5 p-4 rounded-xl hover:bg-black/5 dark:hover:bg-white/10 hover:border-blue-500/30 transition-all cursor-pointer group/lesson">
<Link href={`/courses/${params.id}/lessons/${lesson.id}`} className="flex-1 flex items-center gap-4">
<div className="p-2 bg-blue-500/10 dark:bg-blue-500/20 rounded-lg text-blue-600 dark:text-blue-400 group-hover/lesson:scale-110 transition-transform">
{lesson.content_type === 'video' ? <PlayCircle className="w-5 h-5" /> : <FileText className="w-5 h-5" />}
</div>
<div className="flex flex-col">
<span
onClick={(e) => { e.preventDefault(); e.stopPropagation(); startEditing(lesson.id, lesson.title); }}
className="font-medium text-gray-900 dark:text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
>
{lesson.title}
</span>
<div className="flex items-center gap-3 text-xs text-gray-500 uppercase mt-0.5 font-bold">
<span>{lesson.content_type}</span>
{lesson.due_date && (
<div className="flex items-center gap-1 text-orange-600 dark:text-orange-400">
<Calendar className="w-3 h-3" />
{new Date(lesson.due_date).toLocaleDateString()}
</div>
)}
</div>
</div>
</Link>
<div className="flex items-center gap-4">
<button
onClick={(e) => { e.preventDefault(); e.stopPropagation(); startEditing(lesson.id, lesson.title); }}
className="opacity-0 group-hover/lesson:opacity-100 text-gray-500 hover:text-gray-900 dark:text-white transition-opacity"
>
<Pencil className="w-4 h-4" />
</button>
<button
onClick={(e) => { e.preventDefault(); e.stopPropagation(); handleDeleteLesson(module.id, lesson.id); }}
className="opacity-0 group-hover/lesson:opacity-100 text-gray-500 hover:text-red-400 transition-opacity"
>
<Trash2 className="w-4 h-4" />
</button>
</div>
</div>
)}
</div>
</div> </div>
))} ) : (
<div className="flex items-center gap-3 group flex-1">
<span
onClick={() => { setEditingId(module.id); setEditValue(module.title); }}
className="font-semibold text-lg text-blue-600 dark:text-blue-400 cursor-pointer hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
>
{module.title || `Module ${module.position}`}
</span>
<button
onClick={() => { setEditingId(module.id); setEditValue(module.title); }}
className="opacity-0 group-hover:opacity-100 text-gray-500 hover:text-gray-900 dark:text-white transition-opacity"
>
<Pencil className="w-4 h-4" />
</button>
</div>
)}
</div>
<div className="flex items-center gap-3">
<button <button
onClick={() => handleAddLesson(module.id)} onClick={() => handleDeleteModule(module.id)}
className="w-full py-3 border border-dashed border-black/10 dark:border-white/10 rounded-xl text-sm text-gray-500 hover:text-gray-900 dark:hover:text-gray-900 dark:text-white hover:border-black/20 dark:hover:border-white/20 hover:bg-black/5 dark:hover:bg-white/5 transition-all mt-3 flex items-center justify-center gap-2" className="text-gray-500 hover:text-red-400 transition-colors"
> >
<Plus className="w-4 h-4" /> New Lesson <Trash2 className="w-4 h-4" />
</button> </button>
</div> </div>
</div> </div>
))} <div className="p-6 space-y-3">
{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">
<button
onClick={() => handleReorderLesson(module.id, lIndex, 'up')}
disabled={lIndex === 0}
className="text-gray-500 hover:text-blue-400 disabled:opacity-0"
>
<ChevronUp className="w-3 h-3" />
</button>
<button
onClick={() => handleReorderLesson(module.id, lIndex, 'down')}
disabled={lIndex === module.lessons.length - 1}
className="text-gray-500 hover:text-blue-400 disabled:opacity-0"
>
<ChevronDown className="w-3 h-3" />
</button>
</div>
<button <div className="flex-1">
onClick={handleAddModule} {editingId === lesson.id ? (
className="w-full py-6 border-2 border-dashed border-black/10 dark:border-white/10 rounded-2xl font-medium text-gray-500 hover:text-gray-900 dark:hover:text-gray-900 dark:text-white hover:border-black/20 dark:hover:border-white/20 hover:bg-black/5 dark:hover:bg-white/5 transition-all flex items-center justify-center gap-3 text-lg" <div className="flex items-center gap-2 glass border-blue-500/30 p-2 rounded-lg bg-black/5 dark:bg-black/20">
> <input
<Plus className="w-6 h-6" /> Add New Module autoFocus
</button> value={editValue}
</div> onChange={(e) => setEditValue(e.target.value)}
</CourseEditorLayout> onKeyDown={(e) => e.key === 'Enter' && handleSaveTitle(lesson.id, 'lesson')}
</div> className="bg-transparent border-none flex-1 text-gray-900 dark:text-gray-900 dark:text-white focus:outline-none"
/>
<button onClick={() => handleSaveTitle(lesson.id, 'lesson')} className="text-green-600 dark:text-green-400">
<Save className="w-4 h-4" />
</button>
<button onClick={() => setEditingId(null)} className="text-gray-500 dark:text-gray-400">
<X className="w-4 h-4" />
</button>
</div>
) : (
<div className="flex items-center justify-between glass border-black/5 dark:border-white/5 p-4 rounded-xl hover:bg-black/5 dark:hover:bg-white/10 hover:border-blue-500/30 transition-all cursor-pointer group/lesson">
<Link href={`/courses/${params.id}/lessons/${lesson.id}`} className="flex-1 flex items-center gap-4">
<div className="p-2 bg-blue-500/10 dark:bg-blue-500/20 rounded-lg text-blue-600 dark:text-blue-400 group-hover/lesson:scale-110 transition-transform">
{lesson.content_type === 'video' ? <PlayCircle className="w-5 h-5" /> : <FileText className="w-5 h-5" />}
</div>
<div className="flex flex-col">
<span
onClick={(e) => { e.preventDefault(); e.stopPropagation(); startEditing(lesson.id, lesson.title); }}
className="font-medium text-gray-900 dark:text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
>
{lesson.title}
</span>
<div className="flex items-center gap-3 text-xs text-gray-500 uppercase mt-0.5 font-bold">
<span>{lesson.content_type}</span>
{lesson.due_date && (
<div className="flex items-center gap-1 text-orange-600 dark:text-orange-400">
<Calendar className="w-3 h-3" />
{new Date(lesson.due_date).toLocaleDateString()}
</div>
)}
</div>
</div>
</Link>
<div className="flex items-center gap-4">
<button
onClick={(e) => { e.preventDefault(); e.stopPropagation(); startEditing(lesson.id, lesson.title); }}
className="opacity-0 group-hover/lesson:opacity-100 text-gray-500 hover:text-gray-900 dark:text-white transition-opacity"
>
<Pencil className="w-4 h-4" />
</button>
<button
onClick={(e) => { e.preventDefault(); e.stopPropagation(); handleDeleteLesson(module.id, lesson.id); }}
className="opacity-0 group-hover/lesson:opacity-100 text-gray-500 hover:text-red-400 transition-opacity"
>
<Trash2 className="w-4 h-4" />
</button>
</div>
</div>
)}
</div>
</div>
))}
<button
onClick={() => handleAddLesson(module.id)}
className="w-full py-3 border border-dashed border-black/10 dark:border-white/10 rounded-xl text-sm text-gray-500 hover:text-gray-900 dark:hover:text-gray-900 dark:text-white hover:border-black/20 dark:hover:border-white/20 hover:bg-black/5 dark:hover:bg-white/5 transition-all mt-3 flex items-center justify-center gap-2"
>
<Plus className="w-4 h-4" /> New Lesson
</button>
</div>
</div>
))}
<button
onClick={handleAddModule}
className="w-full py-6 border-2 border-dashed border-black/10 dark:border-white/10 rounded-2xl font-medium text-gray-500 hover:text-gray-900 dark:hover:text-gray-900 dark:text-white hover:border-black/20 dark:hover:border-white/20 hover:bg-black/5 dark:hover:bg-white/5 transition-all flex items-center justify-center gap-3 text-lg"
>
<Plus className="w-6 h-6" /> Add New Module
</button>
</div>
</CourseEditorLayout>
{/* Organization Selector Modal */} {/* Organization Selector Modal */}
<OrganizationSelector <OrganizationSelector
isOpen={isOrgModalOpen} isOpen={isOrgModalOpen}
@@ -451,6 +432,6 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
actionLabel="Publish Course" actionLabel="Publish Course"
onConfirm={(orgId) => publishCourse(orgId)} onConfirm={(orgId) => publishCourse(orgId)}
/> />
</div> </>
); );
} }
web/studio/src/app/courses/[id]/rubrics/page.tsx
+26 -44
View File
@@ -1,60 +1,42 @@
"use client"; "use client";
import React, { useState } from "react"; import React, { useState } from "react";
import { useParams, useRouter } from "next/navigation"; import { useParams } from "next/navigation";
import CourseEditorLayout from "@/components/CourseEditorLayout"; import CourseEditorLayout from "@/components/CourseEditorLayout";
import RubricList from "@/components/Rubrics/RubricList"; import RubricList from "@/components/Rubrics/RubricList";
import RubricEditor from "@/components/Rubrics/RubricEditor"; import RubricEditor from "@/components/Rubrics/RubricEditor";
import { ArrowLeft, FileText, Info } from "lucide-react"; import { FileText, Info } from "lucide-react";
export default function RubricsPage() { export default function RubricsPage() {
const { id } = useParams() as { id: string }; const { id } = useParams() as { id: string };
const router = useRouter();
const [editingRubricId, setEditingRubricId] = useState<string | null>(null); const [editingRubricId, setEditingRubricId] = useState<string | null>(null);
return ( return (
<div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8"> <CourseEditorLayout
<div className="max-w-7xl mx-auto"> activeTab="rubrics"
{/* Header */} pageTitle="Gestión de Rúbricas"
<div className="flex items-center justify-between mb-12"> pageDescription="Crea y gestiona rúbricas de evaluación para tu curso."
<div className="flex items-center gap-4"> pageActions={
<button <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">
onClick={() => router.back()} <Info className="w-4 h-4" />
className="p-2 hover:bg-white/10 rounded-full transition-colors" <span>Las rúbricas pueden asignarse a múltiples lecciones.</span>
>
<ArrowLeft className="w-6 h-6" />
</button>
<div>
<h1 className="text-3xl font-bold bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent">
Rubrics Management
</h1>
<p className="text-gray-400 mt-1">Create and manage evaluation rubrics for your course</p>
</div>
</div>
<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">
<Info className="w-4 h-4" />
<span>Rubrics can be assigned to multiple lessons across the course.</span>
</div>
</div> </div>
}
<CourseEditorLayout activeTab="rubrics"> >
<div className="p-8"> <div className="p-0">
{editingRubricId ? ( {editingRubricId ? (
<RubricEditor <RubricEditor
rubricId={editingRubricId} rubricId={editingRubricId}
courseId={id} courseId={id}
onClose={() => setEditingRubricId(null)} onClose={() => setEditingRubricId(null)}
/> />
) : ( ) : (
<RubricList <RubricList
courseId={id} courseId={id}
onEdit={(rubricId) => setEditingRubricId(rubricId)} onEdit={(rubricId) => setEditingRubricId(rubricId)}
/> />
)} )}
</div>
</CourseEditorLayout>
</div> </div>
</div> </CourseEditorLayout>
); );
} }
web/studio/src/app/courses/[id]/sessions/page.tsx
+80 -92
View File
@@ -1,7 +1,7 @@
"use client"; "use client";
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { useParams, useRouter } from "next/navigation"; import { useParams } from "next/navigation";
import { lmsApi, cmsApi, Course, Meeting } from "@/lib/api"; import { lmsApi, cmsApi, Course, Meeting } from "@/lib/api";
import { import {
Video, Video,
@@ -9,7 +9,6 @@ import {
Calendar as CalendarIcon, Calendar as CalendarIcon,
Clock, Clock,
Trash2, Trash2,
ArrowLeft,
Loader2, Loader2,
Globe, Globe,
Link as LinkIcon, Link as LinkIcon,
@@ -19,7 +18,6 @@ import CourseEditorLayout from "@/components/CourseEditorLayout";
export default function LiveSessionsPage() { export default function LiveSessionsPage() {
const { id } = useParams() as { id: string }; const { id } = useParams() as { id: string };
const router = useRouter();
const [meetings, setMeetings] = useState<Meeting[]>([]); const [meetings, setMeetings] = useState<Meeting[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false); const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
@@ -81,103 +79,93 @@ export default function LiveSessionsPage() {
} }
return ( return (
<div className="min-h-screen bg-transparent text-gray-900 dark:text-white p-8"> <>
<div className="max-w-7xl mx-auto"> <CourseEditorLayout
<div className="flex items-center justify-between mb-8"> activeTab="sessions"
<div className="flex items-center gap-4"> pageTitle="Sesiones en Vivo"
<button onClick={() => router.back()} className="p-2 hover:bg-white/10 rounded-full transition-colors"> pageDescription="Programa y gestiona reuniones virtuales y sesiones en vivo."
<ArrowLeft className="w-6 h-6" /> pageActions={
</button>
<div>
<h1 className="text-3xl font-bold bg-gradient-to-r from-blue-400 to-green-400 bg-clip-text text-transparent">
Live Learning Sessions
</h1>
<p className="text-gray-400 mt-1">Schedule and manage virtual meetings and live sessions</p>
</div>
</div>
<button <button
onClick={() => setIsCreateModalOpen(true)} onClick={() => setIsCreateModalOpen(true)}
className="btn-premium px-6 py-3 flex items-center gap-2" 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"
> >
<Plus size={18} /> <Plus size={16} />
Schedule Session Programar Sesión
</button> </button>
</div> }
>
<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>
) : (
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">
<button
onClick={() => handleDeleteMeeting(meeting.id)}
className="p-2 hover:bg-red-500/20 text-red-400 rounded-lg transition-colors"
>
<Trash2 size={16} />
</button>
</div>
<CourseEditorLayout activeTab="sessions"> <div className="flex items-start gap-4 mb-6">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-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">
{meetings.length === 0 ? ( <Video size={24} />
<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>
) : (
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">
<button
onClick={() => handleDeleteMeeting(meeting.id)}
className="p-2 hover:bg-red-500/20 text-red-400 rounded-lg transition-colors"
>
<Trash2 size={16} />
</button>
</div> </div>
<div>
<div className="flex items-start gap-4 mb-6"> <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="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"> <div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-gray-500">
<Video size={24} /> <Globe size={10} />
</div> {meeting.provider} Session
<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} />
{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>
<div className="flex items-center gap-3 text-sm text-gray-400">
<Clock size={16} className="text-blue-500" />
<span className="font-medium">
{new Date(meeting.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
<span className="mx-2 opacity-30">|</span>
{meeting.duration_minutes} minutes
</span>
</div>
{meeting.description && (
<p className="text-xs text-gray-500 line-clamp-2 mt-2 leading-relaxed italic">
"{meeting.description}"
</p>
)}
</div>
<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"
onClick={() => {
const url = meeting.join_url || `https://meet.jit.si/${meeting.meeting_id}`;
window.open(url, '_blank');
}}
>
<LinkIcon size={14} />
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> </div>
</div> </div>
</div> </div>
))
)} <div className="space-y-3 mb-8">
</div> <div className="flex items-center gap-3 text-sm text-gray-400">
</CourseEditorLayout> <CalendarIcon size={16} className="text-blue-500" />
</div> <span className="font-medium">{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">
{new Date(meeting.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
<span className="mx-2 opacity-30">|</span>
{meeting.duration_minutes} minutes
</span>
</div>
{meeting.description && (
<p className="text-xs text-gray-500 line-clamp-2 mt-2 leading-relaxed italic">
"{meeting.description}"
</p>
)}
</div>
<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"
onClick={() => {
const url = meeting.join_url || `https://meet.jit.si/${meeting.meeting_id}`;
window.open(url, '_blank');
}}
>
<LinkIcon size={14} />
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>
</div>
</div>
))
)}
</div>
</CourseEditorLayout>
{/* Create Meeting Modal */} {/* Create Meeting Modal */}
{isCreateModalOpen && ( {isCreateModalOpen && (
@@ -246,6 +234,6 @@ export default function LiveSessionsPage() {
</div> </div>
</div> </div>
)} )}
</div> </>
); );
} }
web/studio/src/app/library/assets/page.tsx
+21 -34
View File
@@ -3,12 +3,12 @@
import React, { useEffect, useState, useCallback } from "react"; import React, { useEffect, useState, useCallback } from "react";
import { import {
Search, Image as ImageIcon, FileText, Film, File as FileIcon, Search, Image as ImageIcon, FileText, Film, File as FileIcon,
Loader2, Upload, Trash2, ExternalLink, Filter, Plus, ChevronLeft Loader2, Upload, Trash2, ExternalLink, Filter, Plus
} from "lucide-react"; } from "lucide-react";
import { cmsApi, Asset, AssetFilters, getImageUrl } from "@/lib/api"; import { cmsApi, Asset, AssetFilters, getImageUrl } from "@/lib/api";
import { useAuth } from "@/context/AuthContext"; import { useAuth } from "@/context/AuthContext";
import { useTranslation } from "@/context/I18nContext"; import { useTranslation } from "@/context/I18nContext";
import Link from "next/link"; import PageLayout from "@/components/PageLayout";
export default function AssetLibraryPage() { export default function AssetLibraryPage() {
const { t } = useTranslation(); const { t } = useTranslation();
@@ -86,37 +86,24 @@ export default function AssetLibraryPage() {
}; };
return ( return (
<div className="min-h-screen bg-transparent text-gray-900 dark:text-white pt-24 pb-12 px-6 transition-colors duration-300"> <PageLayout
<div className="max-w-7xl mx-auto space-y-8"> title="Biblioteca de Recursos"
{/* Header */} description="Gestiona y reutiliza archivos de medios en todos tus cursos."
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4"> actions={
<div className="space-y-1"> <label 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 transition-all cursor-pointer shadow-md shadow-blue-600/20 active:scale-95">
<Link href="/" className="flex items-center gap-2 text-gray-500 hover:text-blue-400 transition-colors text-xs uppercase font-bold tracking-widest mb-2"> <Upload className="w-4 h-4" />
<ChevronLeft className="w-4 h-4" /> Subir Archivos
Back to Dashboard <input
</Link> type="file"
<h1 className="text-4xl font-black tracking-tight flex items-center gap-4"> multiple
Global <span className="gradient-text">Asset Library</span> className="hidden"
</h1> onChange={handleFileUpload}
<p className="text-gray-600 dark:text-gray-500 text-sm font-medium">Manage and reuse your organization's media files across all courses.</p> disabled={isUploading}
</div> />
</label>
<div className="flex gap-3"> }
<label className="flex items-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl font-bold transition-all cursor-pointer shadow-lg shadow-blue-600/20 active:scale-95"> >
<Upload className="w-5 h-5" /> <div className="space-y-6">
Upload Files
<input
type="file"
multiple
className="hidden"
onChange={handleFileUpload}
disabled={isUploading}
/>
</label>
</div>
</div>
{/* Upload Progress Bar */}
{isUploading && ( {isUploading && (
<div className="w-full bg-black/5 dark:bg-white/5 rounded-2xl border border-black/10 dark:border-white/10 p-4 animate-in fade-in slide-in-from-top-4"> <div className="w-full bg-black/5 dark:bg-white/5 rounded-2xl border border-black/10 dark:border-white/10 p-4 animate-in fade-in slide-in-from-top-4">
<div className="flex justify-between items-center mb-2"> <div className="flex justify-between items-center mb-2">
@@ -251,6 +238,6 @@ export default function AssetLibraryPage() {
</div> </div>
)} )}
</div> </div>
</div> </PageLayout>
); );
} }
web/studio/src/app/page.tsx
+73 -78
View File
@@ -8,6 +8,7 @@ import { useTranslation } from "@/context/I18nContext";
import { Plus, BookOpen, Download, Upload, Sparkles, Wand2, Trash2 } from "lucide-react"; import { Plus, BookOpen, Download, Upload, Sparkles, Wand2, Trash2 } from "lucide-react";
import OrganizationSelector from "@/components/OrganizationSelector"; import OrganizationSelector from "@/components/OrganizationSelector";
import Modal from "@/components/Modal"; import Modal from "@/components/Modal";
import PageLayout from "@/components/PageLayout";
export default function StudioDashboard() { export default function StudioDashboard() {
const { t } = useTranslation(); const { t } = useTranslation();
@@ -158,87 +159,81 @@ export default function StudioDashboard() {
}; };
return ( return (
<div className="min-h-screen bg-transparent text-gray-900 dark:text-gray-100 p-8 transition-colors duration-300"> <PageLayout
<div className="max-w-7xl mx-auto"> title={t('nav.courses')}
{/* Header */} description={t('dashboard.title') || 'Panel de Control'}
<div className="flex justify-between items-center mb-12"> actions={
<div> <>
<h1 className="text-4xl font-black bg-gradient-to-r from-blue-600 to-indigo-600 dark:from-blue-400 dark:to-indigo-400 bg-clip-text text-transparent tracking-tight"> <label className="flex items-center gap-2 px-5 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 font-bold text-sm transition-all cursor-pointer active:scale-95 text-slate-900 dark:text-white">
{t('nav.courses')} <Upload size={16} />
</h1> Importar
<p className="text-gray-600 dark:text-gray-400 mt-2">{t('dashboard.title')}</p> <input type="file" accept=".json" onChange={handleImport} className="hidden" />
</div> </label>
<div className="flex items-center gap-3"> <button
<label className="flex items-center gap-2 px-6 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 font-bold transition-all cursor-pointer active:scale-95 text-slate-900 dark:text-white"> onClick={() => setIsAIModalOpen(true)}
<Upload size={18} /> className="flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 text-white rounded-xl font-bold text-sm shadow-lg shadow-indigo-500/20 transition-all active:scale-95 group"
Importar >
<input type="file" accept=".json" onChange={handleImport} className="hidden" /> <Sparkles size={16} className="text-amber-300 group-hover:rotate-12 transition-transform" />
</label> AI Wizard
<button </button>
onClick={() => setIsAIModalOpen(true)} <button
className="flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 rounded-xl font-bold shadow-lg shadow-indigo-500/20 transition-all active:scale-95 group" onClick={handleCreateCourse}
> className="flex items-center gap-2 px-5 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 font-bold text-sm transition-all active:scale-95 text-slate-900 dark:text-white"
<Sparkles size={18} className="text-amber-300 group-hover:rotate-12 transition-transform" /> >
AI Wizard <Plus size={18} />
</button> Manual
<button </button>
onClick={handleCreateCourse} </>
className="flex items-center gap-2 px-6 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 font-bold transition-all active:scale-95 text-slate-900 dark:text-white" }
> >
<Plus size={20} />
Manual
</button>
</div>
</div>
{loading ? ( {loading ? (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{[1, 2, 3].map(i => ( {[1, 2, 3].map(i => (
<div key={i} className="h-64 glass-card animate-pulse bg-white/5 border-white/5"></div> <div key={i} className="h-64 glass-card animate-pulse bg-white/5 border-white/5"></div>
))} ))}
</div> </div>
) : courses.length === 0 ? ( ) : courses.length === 0 ? (
<div className="text-center py-20 glass-card border-dashed border-black/10 dark:border-white/10"> <div className="text-center py-20 glass-card border-dashed border-black/10 dark:border-white/10">
<p className="text-gray-500 dark:text-gray-400">Aún no has creado ningún curso.</p> <p className="text-gray-500 dark:text-gray-400">Aún no has creado ningún curso.</p>
</div> </div>
) : ( ) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{courses.map((course: Course) => ( {courses.map((course: Course) => (
<Link href={`/courses/${course.id}`} key={course.id}> <Link href={`/courses/${course.id}`} key={course.id}>
<div className="glass-card h-full flex flex-col group hover:border-blue-500/50 transition-all"> <div className="glass-card h-full flex flex-col group hover:border-blue-500/50 transition-all">
<div className="flex-1"> <div className="flex-1">
<div className="flex items-start justify-between mb-4"> <div className="flex items-start justify-between mb-4">
<div className="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center"> <div className="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center">
<BookOpen className="text-blue-600 dark:text-blue-400" /> <BookOpen className="text-blue-600 dark:text-blue-400" />
</div>
<button
onClick={(e) => handleExport(e, course.id, course.title)}
className="p-2 hover:bg-slate-100 dark:hover:bg-white/10 rounded-lg text-slate-500 hover:text-slate-900 dark:hover:text-white transition-all"
title="Export Course"
>
<Download size={18} />
</button>
<button
onClick={(e) => handleDeleteCourse(e, course.id, course.title)}
className="p-2 hover:bg-red-500/10 rounded-lg text-gray-500 hover:text-red-600 dark:hover:text-red-400 transition-all"
title="Delete Course"
>
<Trash2 size={18} />
</button>
</div> </div>
<h3 className="font-bold text-lg mb-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors text-gray-900 dark:text-white">{course.title}</h3> <button
<p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">{course.description || "Sin descripción disponible."}</p> onClick={(e) => handleExport(e, course.id, course.title)}
</div> className="p-2 hover:bg-slate-100 dark:hover:bg-white/10 rounded-lg text-slate-500 hover:text-slate-900 dark:hover:text-white transition-all"
<div className="flex items-center justify-between mt-6 pt-4 border-t border-slate-100 dark:border-white/5 text-xs text-slate-500 dark:text-gray-400"> title="Export Course"
<span>Última actualización: {new Date(course.updated_at).toLocaleDateString()}</span> >
<span>ID: {course.id.slice(0, 4)}...</span> <Download size={18} />
</button>
<button
onClick={(e) => handleDeleteCourse(e, course.id, course.title)}
className="p-2 hover:bg-red-500/10 rounded-lg text-gray-500 hover:text-red-600 dark:hover:text-red-400 transition-all"
title="Delete Course"
>
<Trash2 size={18} />
</button>
</div> </div>
<h3 className="font-bold text-lg mb-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors text-gray-900 dark:text-white">{course.title}</h3>
<p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">{course.description || "Sin descripción disponible."}</p>
</div> </div>
</Link> <div className="flex items-center justify-between mt-6 pt-4 border-t border-slate-100 dark:border-white/5 text-xs text-slate-500 dark:text-gray-400">
))} <span>Última actualización: {new Date(course.updated_at).toLocaleDateString()}</span>
</div> <span>ID: {course.id.slice(0, 4)}...</span>
)} </div>
</div> </div>
</Link>
))}
</div>
)}
{/* New Course Title Modal */} {/* New Course Title Modal */}
<Modal <Modal
@@ -345,6 +340,6 @@ export default function StudioDashboard() {
actionLabel="Create Course" actionLabel="Create Course"
onConfirm={(orgId) => createCourse(orgId)} onConfirm={(orgId) => createCourse(orgId)}
/> />
</div > </PageLayout>
); );
} }
web/studio/src/app/profile/page.tsx
+7 -7
View File
@@ -17,6 +17,7 @@ import {
Trash2 Trash2
} from "lucide-react"; } from "lucide-react";
import Image from "next/image"; import Image from "next/image";
import PageLayout from "@/components/PageLayout";
export default function ProfilePage() { export default function ProfilePage() {
const { t, setLanguage: setContextLanguage } = useTranslation(); const { t, setLanguage: setContextLanguage } = useTranslation();
@@ -89,12 +90,11 @@ export default function ProfilePage() {
if (!user) return null; if (!user) return null;
return ( return (
<div className="max-w-5xl mx-auto py-12 px-6"> <PageLayout
<div className="mb-12"> title="Perfil de Usuario"
<h1 className="text-4xl font-black tracking-tight text-slate-900 dark:text-white mb-2 transition-colors">User Profile</h1> description="Gestiona tu identidad y preferencias en la plataforma."
<p className="text-slate-500 dark:text-gray-400 transition-colors">Manage your identity and preferences across the platform.</p> maxWidth="narrow"
</div> >
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
{/* Left Column: Profile Card */} {/* Left Column: Profile Card */}
<div className="lg:col-span-1 space-y-6"> <div className="lg:col-span-1 space-y-6">
@@ -285,6 +285,6 @@ export default function ProfilePage() {
</div> </div>
</div> </div>
</div> </div>
</div> </PageLayout>
); );
} }
web/studio/src/app/settings/page.tsx
+7 -7
View File
@@ -1,6 +1,7 @@
"use client"; "use client";
import BrandingSettings from "@/components/BrandingSettings"; import BrandingSettings from "@/components/BrandingSettings";
import PageLayout from "@/components/PageLayout";
import { useAuth } from "@/context/AuthContext"; import { useAuth } from "@/context/AuthContext";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { useEffect } from "react"; import { useEffect } from "react";
@@ -16,16 +17,15 @@ export default function SettingsPage() {
}, [user, loading, router]); }, [user, loading, router]);
if (loading) return null; if (loading) return null;
if (!user || user.role !== "admin") return null; if (!user || user.role !== "admin") return null;
return ( return (
<div className="pt-24 px-8 pb-12 min-h-screen bg-transparent transition-colors duration-300"> <PageLayout
<div className="max-w-4xl mx-auto mb-8"> title="Configuración de Organización"
<h1 className="text-3xl font-black text-gray-900 dark:text-white tracking-tight">Organization Settings</h1> description="Gestiona el branding y la identidad de tu plataforma."
<p className="text-gray-600 dark:text-gray-400 mt-2">Manage your white-label branding and platform identity.</p> maxWidth="narrow"
</div> >
<BrandingSettings /> <BrandingSettings />
</div> </PageLayout>
); );
} }
web/studio/src/components/CourseEditorLayout.tsx
+117 -53
View File
@@ -1,13 +1,14 @@
"use client"; "use client";
import React from "react"; import React, { useEffect, useState } from "react";
import Link from "next/link"; import Link from "next/link";
import { useParams } from "next/navigation"; import { useParams, useRouter } from "next/navigation";
import { import {
Layout, CheckCircle2, BarChart2, Settings, Folder, Layout, CheckCircle2, BarChart2, Settings, Folder,
GraduationCap, Megaphone, Users, Award, Video, GraduationCap, Megaphone, Users, Award, Video,
BookOpen, ShieldCheck, Radio, TrendingUp BookOpen, ShieldCheck, Radio, TrendingUp, ChevronLeft
} from "lucide-react"; } from "lucide-react";
import { cmsApi, Course } from "@/lib/api";
type TabKey = type TabKey =
| "outline" | "outline"
@@ -27,6 +28,12 @@ type TabKey =
interface CourseEditorLayoutProps { interface CourseEditorLayoutProps {
children: React.ReactNode; children: React.ReactNode;
activeTab: TabKey; activeTab: TabKey;
/** Título de la sección específica (ej: "Grading Policy"). Si se omite, usa el nombre del curso. */
pageTitle?: string;
/** Descripción de la sección específica. */
pageDescription?: string;
/** Acciones extra que van a la derecha del header (Preview, Publish, etc.) */
pageActions?: React.ReactNode;
} }
interface Tab { interface Tab {
@@ -43,8 +50,21 @@ interface Group {
tabs: Tab[]; tabs: Tab[];
} }
export default function CourseEditorLayout({ children, activeTab }: CourseEditorLayoutProps) { export default function CourseEditorLayout({
const { id } = useParams() as { id: string }; children,
activeTab,
pageTitle,
pageDescription,
pageActions,
}: CourseEditorLayoutProps) {
const params = useParams() as { id: string };
const id = params.id;
const router = useRouter();
const [course, setCourse] = useState<Course | null>(null);
useEffect(() => {
cmsApi.getCourse(id).then(setCourse).catch(console.error);
}, [id]);
const groups: Group[] = [ const groups: Group[] = [
{ {
@@ -101,65 +121,109 @@ export default function CourseEditorLayout({ children, activeTab }: CourseEditor
const activeGroup = groups.find((g) => g.tabs.some((t) => t.key === activeTab)); const activeGroup = groups.find((g) => g.tabs.some((t) => t.key === activeTab));
const subTabs = activeGroup?.tabs ?? []; const subTabs = activeGroup?.tabs ?? [];
return ( // Determine header text
<div className="space-y-0"> const displayTitle = pageTitle || "Course Editor";
{/* PRIMARY GROUP NAV */} const displayDescription = pageDescription
<nav || (course ? `${course.title}` : "Cargando curso...");
className="bg-white dark:bg-black/20 border border-black/8 dark:border-white/8 rounded-t-xl overflow-hidden"
aria-label="Grupos del editor de cursos"
>
<ul className="flex border-b border-black/8 dark:border-white/8">
{groups.map((group) => {
const Icon = group.icon;
const isGroupActive = group.key === activeGroup?.key;
// When clicking a group, go to its first tab
const groupHref = group.tabs[0].href;
return (
<li key={group.key} className="flex-shrink-0">
<Link
href={groupHref}
className={`flex items-center gap-2 px-6 py-3 text-sm font-black uppercase tracking-wider transition-all border-b-2 whitespace-nowrap ${isGroupActive
? "border-blue-600 dark:border-blue-400 text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/10"
: "border-transparent text-slate-500 dark:text-gray-400 hover:text-slate-800 dark:hover:text-gray-100 hover:bg-slate-50 dark:hover:bg-white/5"
}`}
>
<Icon className="w-4 h-4 flex-shrink-0" aria-hidden="true" />
{group.label}
</Link>
</li>
);
})}
</ul>
{/* SECONDARY SUB-TAB NAV */} return (
{subTabs.length > 1 && ( <div className="min-h-screen bg-transparent">
<ul className="flex bg-slate-50 dark:bg-white/[0.03] border-b border-black/5 dark:border-white/5 px-2 gap-1" aria-label="Sub-secciones"> <div className="max-w-7xl mx-auto px-6 pt-8 pb-12">
{subTabs.map((tab) => {
const Icon = tab.icon; {/* ── PAGE HEADER ── */}
const isActive = tab.key === activeTab; <div className="flex items-center justify-between gap-4 mb-6">
<div className="flex items-center gap-3">
<button
onClick={() => router.push("/")}
className="p-1.5 hover:bg-black/5 dark:hover:bg-white/10 rounded-full transition-colors text-slate-500 hover:text-slate-800 dark:hover:text-gray-200"
aria-label="Volver al inicio"
>
<ChevronLeft className="w-5 h-5" />
</button>
<div>
<h1 className="text-2xl font-black text-gray-900 dark:text-white tracking-tight leading-tight">
{displayTitle}
</h1>
<p className="text-sm text-slate-500 dark:text-gray-400 mt-0.5">
{displayDescription}
{course?.pacing_mode && (
<span className={`ml-2 text-xs font-bold px-1.5 py-0.5 rounded ${course.pacing_mode === "instructor_led"
? "bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-400"
: "bg-green-100 dark:bg-green-500/20 text-green-700 dark:text-green-400"
}`}>
{course.pacing_mode.replace("_", " ").toUpperCase()}
</span>
)}
</p>
</div>
</div>
{pageActions && (
<div className="flex items-center gap-3 shrink-0">
{pageActions}
</div>
)}
</div>
{/* ── TAB NAVIGATION ── */}
<nav
className="bg-white dark:bg-black/20 border border-black/8 dark:border-white/8 rounded-xl overflow-hidden mb-6"
aria-label="Grupos del editor de cursos"
>
<ul className="flex border-b border-black/8 dark:border-white/8">
{groups.map((group) => {
const Icon = group.icon;
const isGroupActive = group.key === activeGroup?.key;
const groupHref = group.tabs[0].href;
return ( return (
<li key={tab.key} className="flex-shrink-0"> <li key={group.key} className="flex-shrink-0">
<Link <Link
href={tab.href} href={groupHref}
aria-current={isActive ? "page" : undefined} className={`flex items-center gap-2 px-6 py-3 text-sm font-black uppercase tracking-wider transition-all border-b-2 whitespace-nowrap ${isGroupActive
className={`flex items-center gap-1.5 px-4 py-2 my-1 text-xs font-bold uppercase tracking-wider rounded-lg transition-all whitespace-nowrap ${isActive ? "border-blue-600 dark:border-blue-400 text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/10"
? "bg-blue-600 text-white shadow-sm shadow-blue-500/30" : "border-transparent text-slate-500 dark:text-gray-400 hover:text-slate-800 dark:hover:text-gray-100 hover:bg-slate-50 dark:hover:bg-white/5"
: "text-slate-500 dark:text-gray-400 hover:text-slate-800 dark:hover:text-gray-100 hover:bg-black/5 dark:hover:bg-white/5"
}`} }`}
> >
<Icon className="w-3.5 h-3.5 flex-shrink-0" aria-hidden="true" /> <Icon className="w-4 h-4 flex-shrink-0" aria-hidden="true" />
{tab.label} {group.label}
</Link> </Link>
</li> </li>
); );
})} })}
</ul> </ul>
)}
</nav>
{/* Content */} {/* SECONDARY SUB-TAB NAV */}
<div className="pt-6 space-y-6"> {subTabs.length > 1 && (
{children} <ul
className="flex bg-slate-50 dark:bg-white/[0.03] px-2 gap-1"
aria-label="Sub-secciones"
>
{subTabs.map((tab) => {
const Icon = tab.icon;
const isActive = tab.key === activeTab;
return (
<li key={tab.key} className="flex-shrink-0">
<Link
href={tab.href}
aria-current={isActive ? "page" : undefined}
className={`flex items-center gap-1.5 px-4 py-2 my-1 text-xs font-bold uppercase tracking-wider rounded-lg transition-all whitespace-nowrap ${isActive
? "bg-blue-600 text-white shadow-sm shadow-blue-500/30"
: "text-slate-500 dark:text-gray-400 hover:text-slate-800 dark:hover:text-gray-100 hover:bg-black/5 dark:hover:bg-white/5"
}`}
>
<Icon className="w-3.5 h-3.5 flex-shrink-0" aria-hidden="true" />
{tab.label}
</Link>
</li>
);
})}
</ul>
)}
</nav>
{/* ── PAGE CONTENT ── */}
<div className="space-y-6">
{children}
</div>
</div> </div>
</div> </div>
); );
web/studio/src/components/PageLayout.tsx
+93
View File
@@ -0,0 +1,93 @@
"use client";
import React from "react";
import Link from "next/link";
import { ChevronLeft } from "lucide-react";
interface PageLayoutProps {
/** Título principal de la página */
title: string;
/** Descripción/subtítulo opcional */
description?: string;
/** Acciones que van a la derecha del título (botones, etc.) */
actions?: React.ReactNode;
/** Componente de navegación secundaria (ej: pestañas del editor) */
navigation?: React.ReactNode;
/** Link de "volver atrás" — mostrar solo cuando sea necesario */
backHref?: string;
backLabel?: string;
/** Contenido principal de la página */
children: React.ReactNode;
/** Ancho máximo del contenedor: 'default' (max-w-7xl) o 'narrow' (max-w-5xl) */
maxWidth?: "default" | "narrow" | "wide";
}
const MAX_WIDTH_CLASS = {
default: "max-w-7xl",
narrow: "max-w-5xl",
wide: "max-w-screen-2xl",
};
/**
* Componente de layout estándar para todas las páginas del Studio.
* Garantiza: mismo padding superior, misma jerarquía tipográfica, mismo max-width.
*/
export default function PageLayout({
title,
description,
actions,
navigation,
backHref,
backLabel = "Volver",
children,
maxWidth = "default",
}: PageLayoutProps) {
const containerClass = MAX_WIDTH_CLASS[maxWidth];
return (
<div className="min-h-screen bg-transparent">
<div className={`${containerClass} mx-auto px-6 pt-10 pb-12`}>
{/* Back link */}
{backHref && (
<Link
href={backHref}
className="inline-flex items-center gap-1.5 text-sm font-medium text-slate-500 hover:text-slate-800 dark:text-gray-400 dark:hover:text-gray-100 transition-colors mb-5"
>
<ChevronLeft className="w-4 h-4" />
{backLabel}
</Link>
)}
{/* Page header */}
<div className="flex items-start justify-between gap-4 mb-8">
<div>
<h1 className="text-2xl font-black text-gray-900 dark:text-white tracking-tight leading-tight">
{title}
</h1>
{description && (
<p className="mt-1.5 text-sm text-slate-500 dark:text-gray-400">
{description}
</p>
)}
</div>
{actions && (
<div className="flex items-center gap-3 shrink-0">
{actions}
</div>
)}
</div>
{/* Optional secondary navigation (tabs, breadcrumbs, etc.) */}
{navigation && (
<div className="mb-6">
{navigation}
</div>
)}
{/* Main content */}
{children}
</div>
</div>
);
}
web/studio/tsconfig.tsbuildinfo
+1 -1
View File
File diff suppressed because one or more lines are too long