feat: Add i18n support, new content block types, course export, and lesson interaction tracking.
This commit is contained in:
Generated
+7
@@ -26,6 +26,12 @@ dependencies = [
|
||||
"libc",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "anyhow"
|
||||
version = "1.0.100"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "a23eb6b1614318a8071c9b2521f36b424b2c83db5eb3a0fead4a6c0809af6e61"
|
||||
|
||||
[[package]]
|
||||
name = "atoi"
|
||||
version = "2.0.0"
|
||||
@@ -251,6 +257,7 @@ dependencies = [
|
||||
name = "cms-service"
|
||||
version = "0.1.0"
|
||||
dependencies = [
|
||||
"anyhow",
|
||||
"axum",
|
||||
"bcrypt",
|
||||
"chrono",
|
||||
|
||||
@@ -30,3 +30,4 @@ hmac = "0.12"
|
||||
sha2 = "0.10"
|
||||
hex = "0.4"
|
||||
openidconnect = { version = "3.5", features = ["reqwest"] }
|
||||
anyhow = "1.0"
|
||||
|
||||
@@ -14,9 +14,16 @@ El proyecto ha sido optimizado para reducir la complejidad de la infraestructura
|
||||
- **Backend**: API de Rust para entrega de cursos y calificaciones (LMS).
|
||||
3. **Database**: PostgreSQL compartido.
|
||||
4. **AI Services**: stack local con Faster-Whisper (Transcripción) y Ollama (Traducción y Resúmenes).
|
||||
5. **User Profiles**: Gestión completa de identidad (avatar, bio, preferencias).
|
||||
- **AI Course Wizard**: Generación automática de cursos a partir de prompts estructurados.
|
||||
- **Global Admin Console**: Panel estilo Django para gestión supervisada de tenants y auditoría.
|
||||
- **Course Portability**: Importación/Exportación de cursos completos mediante JSON.
|
||||
- **User Profiles**: Gestión completa de identidad (avatar, bio, preferencias).
|
||||
- **Engagement Heatmaps**: Visualización de retención segundo a segundo en videos.
|
||||
- **Smart Notifications**: Recordatorios de fechas límite y alertas in-app.
|
||||
- **Global i18n**: Interfaz multilingüe (EN, ES, PT) con persistencia por usuario.
|
||||
- **Document-Based Learning**: Soporte para actividades de lectura (PDF, DOCX, PPTX).
|
||||
|
||||
## � Requisitos del Sistema
|
||||
## Requisitos del Sistema
|
||||
|
||||
OpenCCB es altamente escalable. A continuación se detallan los requisitos recomendados según la carga de usuarios concurrentes:
|
||||
|
||||
@@ -40,6 +47,8 @@ OpenCCB es altamente escalable. A continuación se detallan los requisitos recom
|
||||
- **IA Local**:
|
||||
- **Faster-Whisper**: Transcripción de audio a texto.
|
||||
- **Ollama**: Traducción inteligente (EN -> ES), resúmenes y generación de cuestionarios.
|
||||
- **i18n Infrastructure**: Sistema de traducción reactivo para soporte global.
|
||||
- **Document Management**: Motor de previsualización de documentos PDF nativo.
|
||||
|
||||
## 📦 Guía de Inicio Rápido
|
||||
|
||||
@@ -70,6 +79,14 @@ npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
#### 📦 Course Portability
|
||||
Manage content mobility across different organizations using standardized JSON exports.
|
||||
|
||||
#### GET /courses/{id}/export
|
||||
Generates a complete bundle of the course, including modules, lessons, and grading settings.
|
||||
|
||||
#### POST /courses/import
|
||||
Creates a new course based on a provided export bundle. Automatic dependency mapping ensures data integrity in the new organization.
|
||||
#### Experience & LMS
|
||||
```bash
|
||||
# Iniciar backend LMS
|
||||
@@ -101,19 +118,12 @@ Crea una nueva organización y el usuario administrador inicial.
|
||||
"role": "string (admin | instructor | student)"
|
||||
}
|
||||
```
|
||||
- **Respuesta Exitosa (200 OK) ( AuthResponse ):**
|
||||
```json
|
||||
{
|
||||
"token": "string (JWT)",
|
||||
"user": {
|
||||
"id": "uuid",
|
||||
"email": "string",
|
||||
"full_name": "string",
|
||||
"role": "string",
|
||||
"organization_id": "uuid"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### SSO (OpenID Connect)
|
||||
OpenCCB soporta integración con proveedores de identidad (IdP) externos como Google, Okta y Azure AD.
|
||||
- **Configuración**: Los administradores de la organización pueden configurar sus credenciales OIDC en el panel de configuración de Studio.
|
||||
- **Autoprovisionamiento**: Los nuevos usuarios se crean automáticamente en la plataforma tras una autenticación exitosa.
|
||||
- **Flujo**: `/auth/sso/login/{org_id}` -> IdP -> `/auth/sso/callback` -> Redirección a Studio/Experience con JWT.
|
||||
|
||||
```bash
|
||||
# Registrar un nuevo administrador y empresa
|
||||
@@ -145,20 +155,66 @@ curl -X POST "http://localhost:3001/courses" \
|
||||
-H "Authorization: Bearer $TOKEN" \
|
||||
-d '{"title": "Curso de Rust", "pacing_mode": "self_paced"}'
|
||||
```
|
||||
#### POST /courses/generate
|
||||
Utiliza IA para generar la estructura completa de un curso basado en un prompt.
|
||||
|
||||
- **Lógica de Generación**: Utiliza modelos de lenguaje (LLM) para descomponer un tema complejo en una malla curricular lógica de módulos y lecciones.
|
||||
- **Cuerpo de la Petición ( GenerateCourseRequest ):**
|
||||
```json
|
||||
{
|
||||
"prompt": "string"
|
||||
}
|
||||
```
|
||||
|
||||
#### GET /courses/{id}/export
|
||||
Exporta un curso completo y su contenido a formato JSON para portabilidad.
|
||||
|
||||
- **Integridad Portátil**: Empaqueta metadatos, categorías de calificación, módulos y lecciones manteniendo sus relaciones jerárquicas.
|
||||
- **Respuesta**: Archivo JSON estandarizado para importación.
|
||||
|
||||
#### POST /courses/import
|
||||
Importa un curso a partir de un archivo JSON generado previamente.
|
||||
|
||||
- **Mapeo de Dependencias**: Re-mapea automáticamente los IDs de lecciones y módulos para la nueva organización, asegurando que las relaciones y ponderaciones se mantengan intactas.
|
||||
- **Cuerpo de la Petición ( CourseBundle ):**
|
||||
```json
|
||||
{
|
||||
"title": "string",
|
||||
"description": "string",
|
||||
"modules": []
|
||||
}
|
||||
```
|
||||
|
||||
#### POST /lessons
|
||||
Agrega contenido multimedia o evaluaciones a un módulo.
|
||||
|
||||
- **Configuración Graduable**: Si `is_graded` es true, los puntos sumarán al XP del estudiante en el LMS.
|
||||
- **Nuevos Tipos Gamificados**:
|
||||
- `hotspot`: Identificación visual sobre imágenes (ideal para niños).
|
||||
- `memory-match`: Juego de memoria con pares conceptuales.
|
||||
- **Cuerpo ( CreateLessonRequest ):**
|
||||
```json
|
||||
{
|
||||
"module_id": "uuid",
|
||||
"title": "string",
|
||||
"content_type": "string (video | reading | quiz | hotspot | memory-match | document)",
|
||||
"content_url": "string (opcional)",
|
||||
"is_graded": "boolean"
|
||||
}
|
||||
```
|
||||
|
||||
#### POST /assets
|
||||
Sube un archivo multimedia o documento al servidor y devuelve sus metadatos.
|
||||
|
||||
- **Lógica de Almacenamiento**: Genera un UUID único para el archivo, extrae el mimetype y lo almacena físicamente en el volumen de `uploads`, registrando la entrada en la base de datos de activos.
|
||||
- **Cuerpo de la Petición ( MultipartForm ):**
|
||||
- `file`: Archivo binario (PDF, Video, Imagen, Docx).
|
||||
- **Respuesta ( UploadResponse ):**
|
||||
```json
|
||||
{
|
||||
"module_id": "uuid",
|
||||
"title": "string",
|
||||
"content_type": "string (video | reading | quiz)",
|
||||
"content_url": "string (opcional)",
|
||||
"is_graded": "boolean",
|
||||
"grading_category_id": "uuid (opcional)"
|
||||
"id": "uuid",
|
||||
"url": "string",
|
||||
"mimetype": "string"
|
||||
}
|
||||
```
|
||||
|
||||
@@ -196,15 +252,19 @@ curl -X POST "http://localhost:3002/enroll" \
|
||||
Registra el puntaje de una lección y actualiza la gamificación.
|
||||
|
||||
- **Lógica Inteligente**: Actualiza automáticamente el XP del usuario y despacha webhooks si el curso se completa.
|
||||
- **Cuerpo ( GradeSubmissionPayload ):**
|
||||
```json
|
||||
{
|
||||
"course_id": "uuid",
|
||||
"lesson_id": "uuid",
|
||||
"score": "float (0.0 a 1.0)",
|
||||
"metadata": "object (opcional)"
|
||||
}
|
||||
```
|
||||
- **Engagement Tracking**: Si la lección contiene video, el frontend envía eventos de "heartbeat" cada 5 segundos para generar mapas de calor.
|
||||
|
||||
#### GET /notifications
|
||||
Obtiene las notificaciones pendientes del usuario.
|
||||
|
||||
- **Filtro de Relevancia**: Devuelve únicamente alertas no leídas sobre fechas límite próximas o logros de gamificación recientes.
|
||||
- **Respuesta**: Array de `Notification`.
|
||||
|
||||
#### POST /notifications/{id}/read
|
||||
Marca una notificación específica como leída.
|
||||
|
||||
- **Persistencia**: Actualiza el estado en la base de datos para que no reaparezca en el feed del usuario.
|
||||
- **Cuerpo de la Petición**: Vacío.
|
||||
|
||||
```bash
|
||||
# Enviar calificación de 90%
|
||||
@@ -219,10 +279,16 @@ curl -X POST "http://localhost:3002/grades" \
|
||||
Funcionalidades inteligentes 100% locales y gratuitas.
|
||||
|
||||
#### POST /lessons/{id}/transcribe
|
||||
Inicia el proceso de transcripción (Whisper) y traducción (Ollama).
|
||||
Inicia el proceso de transcripción y traducción para una lección de video/audio.
|
||||
|
||||
- **Procesamiento Asíncrono**: Despacha una tarea en segundo plano que utiliza Whisper para transcripción y Ollama para generar la traducción y el resumen inteligente.
|
||||
- **Cuerpo de la Petición**: Vacío.
|
||||
|
||||
#### GET /lessons/{id}/vtt?lang=en|es
|
||||
Devuelve los subtítulos en formato WebVTT para integración nativa en el reproductor.
|
||||
Devuelve los subtítulos en formato WebVTT para integración nativa.
|
||||
|
||||
- **Internacionalización**: Filtra los subtítulos por el parámetro `lang` y los devuelve con el formato de tiempo compatible con reproductores de video HTML5.
|
||||
- **Respuesta**: Archivo de texto WebVTT.
|
||||
|
||||
#### POST /chat (Streaming)
|
||||
Conversación en tiempo real con la base de conocimientos.
|
||||
@@ -253,7 +319,22 @@ curl -X POST "http://localhost:8000/chat" \
|
||||
**Respuesta**: Stream de texto plano. Al final incluye un JSON con el ID de sesión: `{"session_id": "..."}`.
|
||||
|
||||
#### GET /courses/{id}/analytics/advanced
|
||||
Métricas de retención y análisis de cohortes.
|
||||
Métricas de retención y análisis de cohortes para un curso.
|
||||
|
||||
- **Inteligencia de Datos**: Cruza información de intentos de evaluaciones y tiempos de visualización para identificar patrones de deserción.
|
||||
- **Respuesta**: Dashboard JSON con métricas agregadas.
|
||||
|
||||
#### GET /lessons/{id}/heatmap
|
||||
Devuelve los puntos de concentración de visualización para una lección.
|
||||
|
||||
- **Engagement Visual**: Analiza los eventos de heartbeat para determinar cuáles segundos del video son los más vistos o repetidos por los estudiantes.
|
||||
- **Respuesta**: Array de `(second, count)`.
|
||||
|
||||
#### GET /courses/{id}/analytics/reports
|
||||
Generador de reportes personalizados para exportación.
|
||||
|
||||
- **Flexibilidad Administrativa**: Permite filtrar el desempeño por cohortes específicas y devuelve la estructura necesaria para generar archivos CSV profesionales.
|
||||
- **Respuesta**: Stream de datos o estructura de reporte.
|
||||
|
||||
---
|
||||
|
||||
@@ -263,6 +344,10 @@ OpenCCB is built for multi-tenancy. Organizations are isolated, but a **Super Ad
|
||||
#### Super Admin Definition
|
||||
- **Default Organization ID**: `00000000-0000-0000-0000-000000000001`
|
||||
- Any user with `role: admin` in this organization is a **Super Admin**.
|
||||
#### Global Control Panel (`/admin`)
|
||||
- **Dashboard**: Resumen de organizaciones, usuarios y salud del sistema.
|
||||
- **Audit Logs**: Seguimiento detallado de todas las acciones administrativas.
|
||||
- **Service Monitor**: Estado en tiempo real del API Cluster, AI Services y Background Workers.
|
||||
|
||||
#### Global Courses
|
||||
Courses created by Super Admins in the **Default Organization** are automatically marked as **Global**.
|
||||
@@ -281,14 +366,25 @@ curl -H "Authorization: Bearer $SUPER_ADMIN_TOKEN" \
|
||||
```
|
||||
|
||||
#### GET /organizations
|
||||
Returns a searchable list of all organizations. (Admin only).
|
||||
Obtiene una lista de todas las organizaciones registradas.
|
||||
|
||||
- **Control Global**: Accesible únicamente para usuarios con rol `admin` dentro de la organización `Default`. Permite supervisar el crecimiento del ecosistema.
|
||||
- **Respuesta**: Array de `Organization`.
|
||||
|
||||
---
|
||||
|
||||
## 🏆 Premium UI Components
|
||||
- **Course Portability**: Full JSON-based import/export system for multi-tenant content mobility.
|
||||
- **AI Course Wizard**: Instant curriculum generation from natural language prompts.
|
||||
- **Global Admin Console**: Centralized control for organizations, users, and audit logs.
|
||||
- **Experience Player**: A high-performance, accessible learning interface with glassmorphism design.
|
||||
- **Organization Selector**: A searchable combobox for managing large lists of tenants.
|
||||
- **Engagement Heatmaps**: Dynamic bar charts showing video retention signatures.
|
||||
- **Notification Center**: Real-time alerts for deadlines and achievements.
|
||||
- **Custom Report Builder**: Professional reports with one-click CSV export.
|
||||
- **Glassmorphism Design**: Consistent aesthetic across Studio and Experience portals.
|
||||
- **Micro-animations**: Enhanced feedback for publishing and content management.
|
||||
- **Global Localization**: Native support for English, Spanish, and Portuguese.
|
||||
- **PDF Integrated Viewer**: Read academic documents without leaving the platform.
|
||||
|
||||
## 📄 Licencia
|
||||
Este proyecto es código abierto y está disponible bajo los términos de la licencia especificada en el repositorio.
|
||||
+7
-7
@@ -55,13 +55,13 @@ services:
|
||||
environment:
|
||||
- DEVICE=${WHISPER_DEVICE:-cpu}
|
||||
# GPU support for RTX 2070 Super
|
||||
#deploy:
|
||||
# resources:
|
||||
# reservations:
|
||||
# devices:
|
||||
# - driver: nvidia
|
||||
# count: 1
|
||||
# capabilities: [ gpu ]
|
||||
deploy:
|
||||
resources:
|
||||
reservations:
|
||||
devices:
|
||||
- driver: nvidia
|
||||
count: 1
|
||||
capabilities: [ gpu ]
|
||||
|
||||
e2e:
|
||||
build:
|
||||
|
||||
+49
-10
@@ -91,7 +91,7 @@
|
||||
- [x] **Advanced Analytics**:
|
||||
- [x] Cohort analysis (Implemented)
|
||||
- [x] Retention metrics (Implemented)
|
||||
- [ ] Engagement heatmaps
|
||||
- [x] Engagement heatmaps (Implemented)
|
||||
- [x] **AI Integration**:
|
||||
- [x] AI-driven lesson summaries (Implemented)
|
||||
- [x] Real-time video transcription & translation via Local AI (Implemented)
|
||||
@@ -110,27 +110,66 @@
|
||||
- [x] Instructor-led mode (Cohort-based with start/end dates).
|
||||
- [x] **Course Calendar**:
|
||||
- [x] Management of important dates (exams, assignments, milestones).
|
||||
- [ ] Automated reminders for upcoming deadlines.
|
||||
- [x] Automated reminders for upcoming deadlines. (Implemented)
|
||||
|
||||
## Phase 8: Enterprise Features (In Progress)
|
||||
- [x] **User Profiles & Lifecycle**:
|
||||
- [x] **Integrated Logout**: Standardized session management in both portals.
|
||||
- [x] **Profile Management**: Self-service user info updates (Avatar, Bio, Language).
|
||||
- [ ] **Advanced Reporting**:
|
||||
- [ ] **Integration Ecosystem**: (SSO Next)
|
||||
- [x] **Advanced Reporting**: Custom report builder and CSV exports. (Implemented)
|
||||
- [x] **Integration Ecosystem**:
|
||||
- [x] **SSO (Single Sign-On)**: Soporte completo para OIDC (Google, Okta, Azure AD) con autoprovisionamiento. (Completado)
|
||||
- [ ] **Mobile Apps**:
|
||||
- [ ] **Accessibility**:
|
||||
|
||||
## Phase 9: Course Portability (Import/Export) ✅
|
||||
- [x] **Universal JSON Schema**: Standardized format for course interchange. (Completed)
|
||||
- [x] **Recursive Exporter**: Serialization of full course hierarchies. (Completed)
|
||||
- [x] **Atomic Importer**: Batch creation with dependency re-mapping. (Completed)
|
||||
- [x] **Portability UI**: Integrated Export/Import buttons in Settings. (Completed)
|
||||
|
||||
## Phase 10: Global Admin Console (Admin Interface) ✅
|
||||
- [x] **The "Django" Panel**: Dedicated UI for Super-Admins to manage Orgs, Users, and Health. (Completed)
|
||||
- [x] **System Monitoring**: Real-time stats on AI usage and service heartbeats. (Completed)
|
||||
- [x] **Universal Audit Log**: Centralized dashboard for cross-tenant activity. (Completed)
|
||||
|
||||
## Phase 11: Extended Assessments & Quizzes (In Progress)
|
||||
- [x] **Code Quizzes**: Interactive coding challenges with IDE-like player. (Completed)
|
||||
- [ ] **Image Labeling**: Hotspot quizzes for technical training.
|
||||
- [ ] **AI Teaching Assistant**: RAG-powered tutor within the lesson player.
|
||||
|
||||
## Phase 12: AI-Powered "Auto-Course" Generator ✅
|
||||
- [x] **Magic Course Creation**: Structure generation from a single prompt. (Completed)
|
||||
- [x] **Atomic Transactional Ingestion**: Create whole structures (Module -> Lesson) in one go. (Completed)
|
||||
- [x] **LLM Prompt Engineering**: Professional curriculum design via AI. (Completed)
|
||||
|
||||
## Phase 13: Kid-Friendly Gamified Assessments ✅
|
||||
- [x] **Image Hotspots**: Visual identification quizzes. (Completed)
|
||||
- [x] **Memory Match**: Educational card games. (Completed)
|
||||
- [x] **AI Prompt Tuning**: LLM awareness of child-friendly formats. (Completed)
|
||||
|
||||
## Phase 14: Globalization & Document-Based Learning ✅
|
||||
- [x] **Internationalization (i18n)**: UI support for English, Spanish, and Portuguese. (Completed)
|
||||
- [x] **Language Switcher**: Dynamic locale switching in Navbar and User Profile. (Completed)
|
||||
- [x] **Document Block**: In-platform PDF preview and DOCX/PPTX downloads. (Completed)
|
||||
- [x] **Academic Language Consistency**: Content (graded activities) remains in original language. (Completed)
|
||||
- [x] **Multi-language AI Support**: Transcriptions and summaries follow the course context. (Completed)
|
||||
|
||||
## Current Status
|
||||
|
||||
**Platform Maturity**: Core multi-tenant architecture is stable and performance-optimized.
|
||||
|
||||
**Recent Milestones**:
|
||||
- ✅ **Local AI Stack**: 100% free transcription and translation (Whisper + Ollama).
|
||||
- ✅ **Native VTT Subtitles**: Enhanced video player with multi-language CC.
|
||||
- ✅ **User Profiles**: Glassmorphism UI for identity management.
|
||||
- ✅ **Globalization (i18n)**: Multi-language UI (EN/ES/PT) for Studio and Experience.
|
||||
- ✅ **Document Learning**: Support for PDF, DOCX, and PPTX reading activities.
|
||||
- ✅ **Course Portability**: JSON-based import/export system for multi-tenant mobility.
|
||||
- ✅ **Gamified Kids Assessments**: Image Hotspots and Memory Match features.
|
||||
- ✅ **AI Course Wizard**: Instant course structure generation from prompts.
|
||||
- ✅ **Global Admin Panel**: Centralized control center for system administrators.
|
||||
- ✅ **Interactive Code Player**: New technical assessment type for developers.
|
||||
- ✅ **SSO Integration**: OIDC support for corporate clients with self-service config.
|
||||
|
||||
**Next Priorities**:
|
||||
1. **SSO Integration**: SAML/OIDC support for enterprise clients.
|
||||
2. **Engagement Heatmaps**: Visual representation of where students drop off.
|
||||
3. **Automated Reminders**: Deadline notifications for cohort-based courses.
|
||||
1. **Personalized Learning Paths**: AI-driven content recommendations.
|
||||
2. **Mobile Apps**: Dedicated iOS and Android wrappers.
|
||||
3. **Accessibility**: WCAG 2.1 compliance audit and fixes.
|
||||
|
||||
@@ -24,3 +24,4 @@ hmac.workspace = true
|
||||
sha2.workspace = true
|
||||
hex.workspace = true
|
||||
openidconnect.workspace = true
|
||||
anyhow.workspace = true
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
use sqlx::{Postgres, PgConnection};
|
||||
use sqlx::PgConnection;
|
||||
use uuid::Uuid;
|
||||
|
||||
pub async fn set_session_context(
|
||||
|
||||
@@ -0,0 +1,65 @@
|
||||
use chrono::{DateTime, Utc};
|
||||
use common::models::{Course, Lesson, Module};
|
||||
use serde::{Deserialize, Serialize};
|
||||
use sqlx::PgPool;
|
||||
use uuid::Uuid;
|
||||
|
||||
#[derive(Debug, Serialize, Deserialize)]
|
||||
pub struct CourseExport {
|
||||
pub course: Course,
|
||||
pub modules: Vec<ModuleWithLessons>,
|
||||
pub grading_categories: Vec<common::models::GradingCategory>,
|
||||
pub export_version: String,
|
||||
pub exported_at: DateTime<Utc>,
|
||||
}
|
||||
|
||||
#[derive(Debug, Serialize, Deserialize)]
|
||||
pub struct ModuleWithLessons {
|
||||
pub module: Module,
|
||||
pub lessons: Vec<Lesson>,
|
||||
}
|
||||
|
||||
pub async fn get_course_data(pool: &PgPool, course_id: Uuid) -> anyhow::Result<CourseExport> {
|
||||
// 1. Fetch Course
|
||||
let course = sqlx::query_as::<_, Course>("SELECT * FROM courses WHERE id = $1")
|
||||
.bind(course_id)
|
||||
.fetch_one(pool)
|
||||
.await?;
|
||||
|
||||
// 2. Fetch Grading Categories
|
||||
let grading_categories = sqlx::query_as::<_, common::models::GradingCategory>(
|
||||
"SELECT * FROM grading_categories WHERE course_id = $1",
|
||||
)
|
||||
.bind(course_id)
|
||||
.fetch_all(pool)
|
||||
.await?;
|
||||
|
||||
// 3. Fetch Modules
|
||||
let modules_raw =
|
||||
sqlx::query_as::<_, Module>("SELECT * FROM modules WHERE course_id = $1 ORDER BY position")
|
||||
.bind(course_id)
|
||||
.fetch_all(pool)
|
||||
.await?;
|
||||
|
||||
let mut modules = Vec::new();
|
||||
|
||||
// 4. Fetch Lessons for each module
|
||||
for module in modules_raw {
|
||||
let lessons = sqlx::query_as::<_, Lesson>(
|
||||
"SELECT * FROM lessons WHERE module_id = $1 ORDER BY position",
|
||||
)
|
||||
.bind(module.id)
|
||||
.fetch_all(pool)
|
||||
.await?;
|
||||
|
||||
modules.push(ModuleWithLessons { module, lessons });
|
||||
}
|
||||
|
||||
Ok(CourseExport {
|
||||
course,
|
||||
modules,
|
||||
grading_categories,
|
||||
export_version: "1.0".to_string(),
|
||||
exported_at: Utc::now(),
|
||||
})
|
||||
}
|
||||
@@ -1,3 +1,4 @@
|
||||
use crate::exporter;
|
||||
use crate::webhooks::WebhookService;
|
||||
pub mod tasks;
|
||||
use axum::{
|
||||
@@ -1819,6 +1820,37 @@ pub async fn get_advanced_analytics(
|
||||
Ok(Json(analytics))
|
||||
}
|
||||
|
||||
pub async fn get_lesson_heatmap(
|
||||
Org(org_ctx): Org,
|
||||
_claims: common::auth::Claims,
|
||||
State(_pool): State<PgPool>,
|
||||
Path(lesson_id): Path<Uuid>,
|
||||
) -> Result<Json<Vec<common::models::HeatmapPoint>>, (StatusCode, String)> {
|
||||
let client = reqwest::Client::new();
|
||||
let lms_url =
|
||||
env::var("LMS_INTERNAL_URL").unwrap_or_else(|_| "http://experience:3002".to_string());
|
||||
let res = client
|
||||
.get(format!("{}/lessons/{}/heatmap", lms_url, lesson_id))
|
||||
.header("X-Organization-Id", org_ctx.id.to_string())
|
||||
.send()
|
||||
.await
|
||||
.map_err(|e| (StatusCode::BAD_GATEWAY, e.to_string()))?;
|
||||
|
||||
if !res.status().is_success() {
|
||||
return Err((
|
||||
StatusCode::INTERNAL_SERVER_ERROR,
|
||||
"Failed to fetch heatmap from LMS".into(),
|
||||
));
|
||||
}
|
||||
|
||||
let heatmap = res
|
||||
.json::<Vec<common::models::HeatmapPoint>>()
|
||||
.await
|
||||
.map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
|
||||
|
||||
Ok(Json(heatmap))
|
||||
}
|
||||
|
||||
#[derive(Deserialize)]
|
||||
pub struct AuditQuery {
|
||||
pub page: Option<i64>,
|
||||
@@ -2666,3 +2698,356 @@ pub async fn delete_webhook(
|
||||
|
||||
Ok(StatusCode::OK)
|
||||
}
|
||||
|
||||
// --- Course Portability ---
|
||||
|
||||
pub async fn export_course(
|
||||
Org(org_ctx): Org,
|
||||
_claims: Claims,
|
||||
State(pool): State<PgPool>,
|
||||
Path(id): Path<Uuid>,
|
||||
) -> Result<Json<exporter::CourseExport>, StatusCode> {
|
||||
// 1. Verify access (ensure course belongs to org)
|
||||
let exists = sqlx::query_scalar::<_, bool>(
|
||||
"SELECT EXISTS(SELECT 1 FROM courses WHERE id = $1 AND organization_id = $2)",
|
||||
)
|
||||
.bind(id)
|
||||
.bind(org_ctx.id)
|
||||
.fetch_one(&pool)
|
||||
.await
|
||||
.map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
|
||||
|
||||
if !exists {
|
||||
return Err(StatusCode::NOT_FOUND);
|
||||
}
|
||||
|
||||
// 2. Export recursively
|
||||
let export = exporter::get_course_data(&pool, id).await.map_err(|e| {
|
||||
tracing::error!("Export failed: {}", e);
|
||||
StatusCode::INTERNAL_SERVER_ERROR
|
||||
})?;
|
||||
|
||||
Ok(Json(export))
|
||||
}
|
||||
|
||||
pub async fn import_course(
|
||||
Org(org_ctx): Org,
|
||||
claims: Claims,
|
||||
State(pool): State<PgPool>,
|
||||
Json(payload): Json<exporter::CourseExport>,
|
||||
) -> Result<Json<Course>, StatusCode> {
|
||||
let mut tx = pool
|
||||
.begin()
|
||||
.await
|
||||
.map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
|
||||
|
||||
// 1. Create Course
|
||||
let new_course = sqlx::query_as::<_, Course>(
|
||||
"INSERT INTO courses (
|
||||
organization_id, instructor_id, title, pacing_mode, description,
|
||||
passing_percentage, certificate_template, start_date, end_date
|
||||
) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9)
|
||||
RETURNING *",
|
||||
)
|
||||
.bind(org_ctx.id)
|
||||
.bind(claims.sub)
|
||||
.bind(format!("{} (Importado)", payload.course.title))
|
||||
.bind(payload.course.pacing_mode)
|
||||
.bind(payload.course.description)
|
||||
.bind(payload.course.passing_percentage)
|
||||
.bind(payload.course.certificate_template)
|
||||
.bind(payload.course.start_date)
|
||||
.bind(payload.course.end_date)
|
||||
.fetch_one(&mut *tx)
|
||||
.await
|
||||
.map_err(|e| {
|
||||
tracing::error!("Failed to create imported course: {}", e);
|
||||
StatusCode::INTERNAL_SERVER_ERROR
|
||||
})?;
|
||||
|
||||
// 2. Import Grading Categories and create mapping
|
||||
let mut cat_map = std::collections::HashMap::new();
|
||||
for old_cat in payload.grading_categories {
|
||||
let new_cat = sqlx::query_as::<_, common::models::GradingCategory>(
|
||||
"INSERT INTO grading_categories (organization_id, course_id, name, weight, drop_count)
|
||||
VALUES ($1, $2, $3, $4, $5)
|
||||
RETURNING *",
|
||||
)
|
||||
.bind(org_ctx.id)
|
||||
.bind(new_course.id)
|
||||
.bind(old_cat.name)
|
||||
.bind(old_cat.weight)
|
||||
.bind(old_cat.drop_count)
|
||||
.fetch_one(&mut *tx)
|
||||
.await
|
||||
.map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
|
||||
|
||||
cat_map.insert(old_cat.id, new_cat.id);
|
||||
}
|
||||
|
||||
// 3. Import Modules & Lessons
|
||||
for module_data in payload.modules {
|
||||
let new_module = sqlx::query_as::<_, Module>(
|
||||
"INSERT INTO modules (course_id, organization_id, title, position)
|
||||
VALUES ($1, $2, $3, $4)
|
||||
RETURNING *",
|
||||
)
|
||||
.bind(new_course.id)
|
||||
.bind(org_ctx.id)
|
||||
.bind(module_data.module.title)
|
||||
.bind(module_data.module.position)
|
||||
.fetch_one(&mut *tx)
|
||||
.await
|
||||
.map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
|
||||
|
||||
for lesson in module_data.lessons {
|
||||
let new_cat_id = lesson
|
||||
.grading_category_id
|
||||
.and_then(|id| cat_map.get(&id))
|
||||
.cloned();
|
||||
|
||||
sqlx::query(
|
||||
"INSERT INTO lessons (
|
||||
module_id, course_id, organization_id, title, content_type,
|
||||
content_url, position, is_graded, metadata, summary,
|
||||
transcription, grading_category_id, max_attempts
|
||||
) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13)",
|
||||
)
|
||||
.bind(new_module.id)
|
||||
.bind(new_course.id)
|
||||
.bind(org_ctx.id)
|
||||
.bind(lesson.title)
|
||||
.bind(lesson.content_type)
|
||||
.bind(lesson.content_url)
|
||||
.bind(lesson.position)
|
||||
.bind(lesson.is_graded)
|
||||
.bind(lesson.metadata)
|
||||
.bind(lesson.summary)
|
||||
.bind(lesson.transcription)
|
||||
.bind(new_cat_id)
|
||||
.bind(lesson.max_attempts)
|
||||
.execute(&mut *tx)
|
||||
.await
|
||||
.map_err(|e| {
|
||||
tracing::error!("Failed to import lesson: {}", e);
|
||||
StatusCode::INTERNAL_SERVER_ERROR
|
||||
})?;
|
||||
}
|
||||
}
|
||||
|
||||
tx.commit()
|
||||
.await
|
||||
.map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
|
||||
|
||||
log_action(
|
||||
&pool,
|
||||
org_ctx.id,
|
||||
claims.sub,
|
||||
"COURSE_IMPORTED",
|
||||
"Course",
|
||||
new_course.id,
|
||||
serde_json::json!({ "original_title": payload.course.title }),
|
||||
)
|
||||
.await;
|
||||
|
||||
Ok(Json(new_course))
|
||||
}
|
||||
|
||||
// --- AI Course Generation ---
|
||||
|
||||
#[derive(Deserialize)]
|
||||
pub struct GenerateCoursePayload {
|
||||
pub prompt: String,
|
||||
pub target_organization_id: Option<Uuid>,
|
||||
}
|
||||
|
||||
pub async fn generate_course(
|
||||
Org(org_ctx): Org,
|
||||
claims: Claims,
|
||||
State(pool): State<PgPool>,
|
||||
Json(payload): Json<GenerateCoursePayload>,
|
||||
) -> Result<Json<Course>, StatusCode> {
|
||||
tracing::info!(
|
||||
"Starting AI course generation for prompt: {}",
|
||||
payload.prompt
|
||||
);
|
||||
|
||||
// 1. Determine target org
|
||||
let target_org_id = payload.target_organization_id.unwrap_or(org_ctx.id);
|
||||
|
||||
// 2. AI Setup
|
||||
let provider = env::var("AI_PROVIDER").unwrap_or_else(|_| "openai".to_string());
|
||||
let client = reqwest::Client::new();
|
||||
|
||||
let (url, auth_header, model) = if provider == "local" {
|
||||
let base_url =
|
||||
env::var("LOCAL_OLLAMA_URL").unwrap_or_else(|_| "http://localhost:11434".to_string());
|
||||
let model = env::var("LOCAL_LLM_MODEL").unwrap_or_else(|_| "llama3".to_string());
|
||||
(
|
||||
format!("{}/v1/chat/completions", base_url),
|
||||
"".to_string(),
|
||||
model,
|
||||
)
|
||||
} else {
|
||||
let api_key = env::var("OPENAI_API_KEY").map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
|
||||
(
|
||||
"https://api.openai.com/v1/chat/completions".to_string(),
|
||||
format!("Bearer {}", api_key),
|
||||
"gpt-4o".to_string(),
|
||||
)
|
||||
};
|
||||
|
||||
let system_prompt = r#"You are an expert curriculum designer.
|
||||
Design a structured course based on the topic provided.
|
||||
If the topic is for children or youth, use interactive content types:
|
||||
- 'hotspot': Identifying image parts.
|
||||
- 'memory-match': Card matching game.
|
||||
- 'quiz': Standard questions.
|
||||
|
||||
Return ONLY a valid JSON object with the following structure:
|
||||
{
|
||||
"title": "Clear and Engaging Course Title",
|
||||
"description": "Short overview and objectives",
|
||||
"modules": [
|
||||
{
|
||||
"title": "Module Name",
|
||||
"position": 1,
|
||||
"lessons": [
|
||||
{ "title": "Lesson Name", "position": 1, "content_type": "text|video|hotspot|memory-match|quiz" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}"#;
|
||||
|
||||
let mut request = client.post(&url).json(&json!({
|
||||
"model": model,
|
||||
"messages": [
|
||||
{ "role": "system", "content": system_prompt },
|
||||
{ "role": "user", "content": format!("Create a course about: {}", payload.prompt) }
|
||||
],
|
||||
"response_format": { "type": "json_object" }
|
||||
}));
|
||||
|
||||
if !auth_header.is_empty() {
|
||||
request = request.header("Authorization", auth_header);
|
||||
}
|
||||
|
||||
let response = request.send().await.map_err(|e| {
|
||||
tracing::error!("LLM request failed: {}", e);
|
||||
StatusCode::INTERNAL_SERVER_ERROR
|
||||
})?;
|
||||
|
||||
if !response.status().is_success() {
|
||||
let err_body = response.text().await.unwrap_or_default();
|
||||
tracing::error!("LLM API error: {}", err_body);
|
||||
return Err(StatusCode::INTERNAL_SERVER_ERROR);
|
||||
}
|
||||
|
||||
let llm_data: serde_json::Value = response
|
||||
.json()
|
||||
.await
|
||||
.map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
|
||||
let mut content_str = llm_data["choices"][0]["message"]["content"]
|
||||
.as_str()
|
||||
.unwrap_or("{}")
|
||||
.trim()
|
||||
.to_string();
|
||||
|
||||
// Clean markdown code blocks if present
|
||||
if content_str.starts_with("```") {
|
||||
content_str = content_str
|
||||
.lines()
|
||||
.filter(|line| !line.starts_with("```"))
|
||||
.collect::<Vec<_>>()
|
||||
.join("\n");
|
||||
}
|
||||
|
||||
let result_json: serde_json::Value = serde_json::from_str(&content_str).map_err(|e| {
|
||||
tracing::error!("Failed to parse AI JSON: {}. Content: {}", e, content_str);
|
||||
StatusCode::INTERNAL_SERVER_ERROR
|
||||
})?;
|
||||
|
||||
// 3. Database Transaction
|
||||
let mut tx = pool
|
||||
.begin()
|
||||
.await
|
||||
.map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
|
||||
|
||||
// Create Course
|
||||
let course_title = result_json["title"].as_str().unwrap_or("Untitled Course");
|
||||
let course_desc = result_json["description"].as_str();
|
||||
|
||||
let course = sqlx::query_as::<_, Course>(
|
||||
"INSERT INTO courses (organization_id, instructor_id, title, description, pacing_mode)
|
||||
VALUES ($1, $2, $3, $4, 'self_paced')
|
||||
RETURNING *",
|
||||
)
|
||||
.bind(target_org_id)
|
||||
.bind(claims.sub)
|
||||
.bind(course_title)
|
||||
.bind(course_desc)
|
||||
.fetch_one(&mut *tx)
|
||||
.await
|
||||
.map_err(|e| {
|
||||
tracing::error!("DB Course creation failed: {}", e);
|
||||
StatusCode::INTERNAL_SERVER_ERROR
|
||||
})?;
|
||||
|
||||
// Create Modules and Lessons
|
||||
if let Some(modules) = result_json["modules"].as_array() {
|
||||
for (m_idx, m_val) in modules.iter().enumerate() {
|
||||
let m_title = m_val["title"].as_str().unwrap_or("Module");
|
||||
|
||||
let module = sqlx::query_as::<_, Module>(
|
||||
"INSERT INTO modules (course_id, organization_id, title, position)
|
||||
VALUES ($1, $2, $3, $4)
|
||||
RETURNING *",
|
||||
)
|
||||
.bind(course.id)
|
||||
.bind(target_org_id)
|
||||
.bind(m_title)
|
||||
.bind((m_idx + 1) as i32)
|
||||
.fetch_one(&mut *tx)
|
||||
.await
|
||||
.map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
|
||||
|
||||
if let Some(lessons) = m_val["lessons"].as_array() {
|
||||
for (l_idx, l_val) in lessons.iter().enumerate() {
|
||||
let l_title = l_val["title"].as_str().unwrap_or("Lesson");
|
||||
let l_type = l_val["content_type"].as_str().unwrap_or("text");
|
||||
|
||||
sqlx::query(
|
||||
"INSERT INTO lessons (module_id, course_id, organization_id, title, content_type, position)
|
||||
VALUES ($1, $2, $3, $4, $5, $6)"
|
||||
)
|
||||
.bind(module.id)
|
||||
.bind(course.id)
|
||||
.bind(target_org_id)
|
||||
.bind(l_title)
|
||||
.bind(l_type)
|
||||
.bind((l_idx + 1) as i32)
|
||||
.execute(&mut *tx)
|
||||
.await
|
||||
.map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tx.commit()
|
||||
.await
|
||||
.map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
|
||||
|
||||
log_action(
|
||||
&pool,
|
||||
target_org_id,
|
||||
claims.sub,
|
||||
"AI_COURSE_GENERATED",
|
||||
"Course",
|
||||
course.id,
|
||||
json!({ "prompt": payload.prompt }),
|
||||
)
|
||||
.await;
|
||||
|
||||
Ok(Json(course))
|
||||
}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
use crate::handlers::run_transcription_task;
|
||||
use axum::{
|
||||
Json,
|
||||
extract::{Path, State},
|
||||
http::StatusCode,
|
||||
Json,
|
||||
};
|
||||
use serde::{Deserialize, Serialize};
|
||||
use sqlx::{PgPool, FromRow};
|
||||
use serde::Serialize;
|
||||
use sqlx::{FromRow, PgPool};
|
||||
use uuid::Uuid;
|
||||
use crate::handlers::run_transcription_task;
|
||||
|
||||
#[derive(Debug, Serialize, FromRow)]
|
||||
pub struct BackgroundTask {
|
||||
@@ -24,10 +24,10 @@ pub async fn get_background_tasks(
|
||||
// For now, assuming super-admin visibility or scoped by org_id in headers (which middleware handles)
|
||||
// But since this is a new "Admin" feature, let's keep it simple and list all tasks for the current org context
|
||||
// Ideally we should extract OrgId from request extensions, but let's query all active tasks for now.
|
||||
|
||||
|
||||
// We want tasks that are NOT idle and NOT completed (unless we want a history log)
|
||||
// The requirement is "pendientes" (pending/stuck), so 'queued', 'processing', 'failed'.
|
||||
|
||||
|
||||
let query = r#"
|
||||
SELECT
|
||||
l.id,
|
||||
@@ -44,7 +44,12 @@ pub async fn get_background_tasks(
|
||||
let tasks = sqlx::query_as::<_, BackgroundTask>(query)
|
||||
.fetch_all(&pool)
|
||||
.await
|
||||
.map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, format!("Failed to fetch tasks: {}", e)))?;
|
||||
.map_err(|e| {
|
||||
(
|
||||
StatusCode::INTERNAL_SERVER_ERROR,
|
||||
format!("Failed to fetch tasks: {}", e),
|
||||
)
|
||||
})?;
|
||||
|
||||
Ok(Json(tasks))
|
||||
}
|
||||
@@ -55,7 +60,7 @@ pub async fn retry_task(
|
||||
) -> Result<StatusCode, (StatusCode, String)> {
|
||||
// 1. Reset status to 'queued' or directly spawn
|
||||
// It's safer to spawn essentially identical logic to the upload handler
|
||||
|
||||
|
||||
// First verify it exists
|
||||
let exists = sqlx::query("SELECT 1 FROM lessons WHERE id = $1")
|
||||
.bind(id)
|
||||
@@ -70,7 +75,7 @@ pub async fn retry_task(
|
||||
// Spawn the task
|
||||
let pool_clone = pool.clone();
|
||||
tokio::spawn(async move {
|
||||
// Reset to queued first to indicate we are trying again?
|
||||
// Reset to queued first to indicate we are trying again?
|
||||
// Or actually the run_transcription_task sets it to processing immediately.
|
||||
// Let's explicitly set to queued just in case, though the task runs fast.
|
||||
let _ = sqlx::query("UPDATE lessons SET transcription_status = 'queued' WHERE id = $1")
|
||||
@@ -79,9 +84,9 @@ pub async fn retry_task(
|
||||
.await;
|
||||
|
||||
if let Err(e) = run_transcription_task(pool_clone, id).await {
|
||||
tracing::error!("Retry transcription task failed for lesson {}: {}", id, e);
|
||||
// Verify we mark it as failed is handled inside run_transcription_task?
|
||||
// Let's double check that later.
|
||||
tracing::error!("Retry transcription task failed for lesson {}: {}", id, e);
|
||||
// Verify we mark it as failed is handled inside run_transcription_task?
|
||||
// Let's double check that later.
|
||||
}
|
||||
});
|
||||
|
||||
@@ -95,12 +100,17 @@ pub async fn cancel_task(
|
||||
// "Cancel" in this context mainly means setting it to 'idle' or 'failed' so it stops showing up as stuck.
|
||||
// We can't easily kill a running tokio task unless we had a handle map, which we don't.
|
||||
// So this is effectively "Dismiss".
|
||||
|
||||
|
||||
sqlx::query("UPDATE lessons SET transcription_status = 'idle' WHERE id = $1")
|
||||
.bind(id)
|
||||
.execute(&pool)
|
||||
.await
|
||||
.map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, format!("Failed to cancel task: {}", e)))?;
|
||||
.map_err(|e| {
|
||||
(
|
||||
StatusCode::INTERNAL_SERVER_ERROR,
|
||||
format!("Failed to cancel task: {}", e),
|
||||
)
|
||||
})?;
|
||||
|
||||
Ok(StatusCode::NO_CONTENT)
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
mod db_util;
|
||||
pub mod exporter;
|
||||
mod handlers;
|
||||
mod handlers_branding;
|
||||
mod webhooks;
|
||||
@@ -97,6 +98,7 @@ async fn main() {
|
||||
"/courses/{id}/analytics/advanced",
|
||||
get(handlers::get_advanced_analytics),
|
||||
)
|
||||
.route("/lessons/{id}/heatmap", get(handlers::get_lesson_heatmap))
|
||||
.route(
|
||||
"/modules",
|
||||
get(handlers::get_modules).post(handlers::create_module),
|
||||
@@ -124,6 +126,9 @@ async fn main() {
|
||||
.route("/lessons/{id}/vtt", get(handlers::get_lesson_vtt))
|
||||
.route("/lessons/{id}/summarize", post(handlers::summarize_lesson))
|
||||
.route("/lessons/{id}/generate-quiz", post(handlers::generate_quiz))
|
||||
.route("/courses/generate", post(handlers::generate_course))
|
||||
.route("/courses/{id}/export", get(handlers::export_course))
|
||||
.route("/courses/import", post(handlers::import_course))
|
||||
.route("/grading", post(handlers::create_grading_category))
|
||||
.route("/grading/{id}", delete(handlers::delete_grading_category))
|
||||
.route(
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
-- Create lesson_interactions table for engagement tracking
|
||||
CREATE TABLE IF NOT EXISTS lesson_interactions (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
organization_id UUID NOT NULL,
|
||||
user_id UUID NOT NULL,
|
||||
lesson_id UUID NOT NULL,
|
||||
video_timestamp FLOAT, -- Timestamp in seconds for video content
|
||||
event_type VARCHAR(50) NOT NULL, -- 'heartbeat', 'pause', 'seek', 'complete', 'start'
|
||||
metadata JSONB, -- Additional data (segment duration, playback speed, etc.)
|
||||
created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
|
||||
);
|
||||
|
||||
-- Index for efficient querying of heatmaps
|
||||
CREATE INDEX IF NOT EXISTS idx_lesson_interactions_lesson_id ON lesson_interactions(lesson_id);
|
||||
CREATE INDEX IF NOT EXISTS idx_lesson_interactions_user_id ON lesson_interactions(user_id);
|
||||
CREATE INDEX IF NOT EXISTS idx_lesson_interactions_org_id ON lesson_interactions(organization_id);
|
||||
@@ -0,0 +1,16 @@
|
||||
-- Create notifications table for in-app alerts
|
||||
CREATE TABLE IF NOT EXISTS notifications (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
organization_id UUID NOT NULL,
|
||||
user_id UUID NOT NULL,
|
||||
title VARCHAR(255) NOT NULL,
|
||||
message TEXT NOT NULL,
|
||||
notification_type VARCHAR(50) DEFAULT 'info', -- 'info', 'warning', 'success', 'deadline'
|
||||
is_read BOOLEAN DEFAULT FALSE,
|
||||
link_url VARCHAR(255), -- Optional link to redirect the user
|
||||
created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
|
||||
);
|
||||
|
||||
CREATE INDEX IF NOT EXISTS idx_notifications_user_id ON notifications(user_id);
|
||||
CREATE INDEX IF NOT EXISTS idx_notifications_org_id ON notifications(organization_id);
|
||||
CREATE INDEX IF NOT EXISTS idx_notifications_unread ON notifications(user_id) WHERE is_read = FALSE;
|
||||
@@ -7,8 +7,8 @@ use bcrypt::{DEFAULT_COST, hash, verify};
|
||||
use common::auth::{Claims, create_jwt};
|
||||
use common::middleware::Org;
|
||||
use common::models::{
|
||||
AuthResponse, Course, CourseAnalytics, Enrollment, Lesson, LessonAnalytics, Module,
|
||||
Organization, User, UserResponse,
|
||||
AuthResponse, Course, CourseAnalytics, Enrollment, HeatmapPoint, Lesson, LessonAnalytics,
|
||||
Module, Notification, Organization, User, UserResponse,
|
||||
};
|
||||
use serde::Deserialize;
|
||||
use sqlx::{PgPool, Row};
|
||||
@@ -104,6 +104,13 @@ pub struct GradeSubmissionPayload {
|
||||
pub metadata: Option<serde_json::Value>,
|
||||
}
|
||||
|
||||
#[derive(Deserialize)]
|
||||
pub struct InteractionPayload {
|
||||
pub video_timestamp: Option<f64>,
|
||||
pub event_type: String, // 'heartbeat', 'pause', 'seek', 'complete', 'start'
|
||||
pub metadata: Option<serde_json::Value>,
|
||||
}
|
||||
|
||||
pub async fn register(
|
||||
State(pool): State<PgPool>,
|
||||
Json(payload): Json<AuthPayload>,
|
||||
@@ -442,7 +449,7 @@ pub async fn ingest_course(
|
||||
}
|
||||
|
||||
pub async fn get_course_outline(
|
||||
Org(org_ctx): Org,
|
||||
Org(_org_ctx): Org,
|
||||
State(pool): State<PgPool>,
|
||||
Path(id): Path<Uuid>,
|
||||
) -> Result<Json<common::models::PublishedCourse>, StatusCode> {
|
||||
@@ -503,7 +510,7 @@ pub async fn get_course_outline(
|
||||
}
|
||||
|
||||
pub async fn get_lesson_content(
|
||||
Org(org_ctx): Org,
|
||||
Org(_org_ctx): Org,
|
||||
State(pool): State<PgPool>,
|
||||
Path(id): Path<Uuid>,
|
||||
) -> Result<Json<Lesson>, StatusCode> {
|
||||
@@ -518,7 +525,7 @@ pub async fn get_lesson_content(
|
||||
}
|
||||
|
||||
pub async fn get_user_enrollments(
|
||||
Org(org_ctx): Org,
|
||||
Org(_org_ctx): Org,
|
||||
State(pool): State<PgPool>,
|
||||
Path(user_id): Path<Uuid>,
|
||||
) -> Result<Json<Vec<Enrollment>>, StatusCode> {
|
||||
@@ -748,7 +755,7 @@ pub async fn get_leaderboard(
|
||||
}
|
||||
|
||||
pub async fn get_user_course_grades(
|
||||
Org(org_ctx): Org,
|
||||
Org(_org_ctx): Org,
|
||||
State(pool): State<PgPool>,
|
||||
Path((user_id, course_id)): Path<(Uuid, Uuid)>,
|
||||
) -> Result<Json<Vec<common::models::UserGrade>>, StatusCode> {
|
||||
@@ -865,6 +872,129 @@ pub async fn get_advanced_analytics(
|
||||
}))
|
||||
}
|
||||
|
||||
pub async fn record_interaction(
|
||||
Org(org_ctx): Org,
|
||||
Path(lesson_id): Path<Uuid>,
|
||||
claims: Claims,
|
||||
State(pool): State<PgPool>,
|
||||
Json(payload): Json<InteractionPayload>,
|
||||
) -> Result<StatusCode, StatusCode> {
|
||||
sqlx::query(
|
||||
"INSERT INTO lesson_interactions (organization_id, user_id, lesson_id, video_timestamp, event_type, metadata)
|
||||
VALUES ($1, $2, $3, $4, $5, $6)"
|
||||
)
|
||||
.bind(org_ctx.id)
|
||||
.bind(claims.sub)
|
||||
.bind(lesson_id)
|
||||
.bind(payload.video_timestamp)
|
||||
.bind(payload.event_type)
|
||||
.bind(payload.metadata)
|
||||
.execute(&pool)
|
||||
.await
|
||||
.map_err(|e| {
|
||||
tracing::error!("Failed to record interaction: {}", e);
|
||||
StatusCode::INTERNAL_SERVER_ERROR
|
||||
})?;
|
||||
|
||||
Ok(StatusCode::CREATED)
|
||||
}
|
||||
|
||||
pub async fn get_lesson_heatmap(
|
||||
Org(org_ctx): Org,
|
||||
Path(lesson_id): Path<Uuid>,
|
||||
State(pool): State<PgPool>,
|
||||
) -> Result<Json<Vec<HeatmapPoint>>, StatusCode> {
|
||||
let heatmap = sqlx::query_as::<_, HeatmapPoint>(
|
||||
"SELECT floor(video_timestamp)::int as second, count(*)::bigint as count
|
||||
FROM lesson_interactions
|
||||
WHERE lesson_id = $1 AND organization_id = $2 AND video_timestamp IS NOT NULL
|
||||
GROUP BY second
|
||||
ORDER BY second",
|
||||
)
|
||||
.bind(lesson_id)
|
||||
.bind(org_ctx.id)
|
||||
.fetch_all(&pool)
|
||||
.await
|
||||
.map_err(|e| {
|
||||
tracing::error!("Failed to fetch heatmap: {}", e);
|
||||
StatusCode::INTERNAL_SERVER_ERROR
|
||||
})?;
|
||||
|
||||
Ok(Json(heatmap))
|
||||
}
|
||||
|
||||
pub async fn get_notifications(
|
||||
Org(org_ctx): Org,
|
||||
claims: Claims,
|
||||
State(pool): State<PgPool>,
|
||||
) -> Result<Json<Vec<Notification>>, StatusCode> {
|
||||
let notifications = sqlx::query_as::<_, Notification>(
|
||||
"SELECT * FROM notifications WHERE user_id = $1 AND organization_id = $2 ORDER BY created_at DESC LIMIT 50"
|
||||
)
|
||||
.bind(claims.sub)
|
||||
.bind(org_ctx.id)
|
||||
.fetch_all(&pool)
|
||||
.await
|
||||
.map_err(|e| {
|
||||
tracing::error!("Failed to fetch notifications: {}", e);
|
||||
StatusCode::INTERNAL_SERVER_ERROR
|
||||
})?;
|
||||
|
||||
Ok(Json(notifications))
|
||||
}
|
||||
|
||||
pub async fn mark_notification_as_read(
|
||||
Org(org_ctx): Org,
|
||||
claims: Claims,
|
||||
Path(id): Path<Uuid>,
|
||||
State(pool): State<PgPool>,
|
||||
) -> Result<StatusCode, StatusCode> {
|
||||
sqlx::query(
|
||||
"UPDATE notifications SET is_read = TRUE WHERE id = $1 AND user_id = $2 AND organization_id = $3"
|
||||
)
|
||||
.bind(id)
|
||||
.bind(claims.sub)
|
||||
.bind(org_ctx.id)
|
||||
.execute(&pool)
|
||||
.await
|
||||
.map_err(|e| {
|
||||
tracing::error!("Failed to mark notification as read: {}", e);
|
||||
StatusCode::INTERNAL_SERVER_ERROR
|
||||
})?;
|
||||
|
||||
Ok(StatusCode::OK)
|
||||
}
|
||||
|
||||
pub async fn check_deadlines_and_notify(pool: PgPool) {
|
||||
let result = sqlx::query(
|
||||
"INSERT INTO notifications (organization_id, user_id, title, message, notification_type, link_url)
|
||||
SELECT
|
||||
l.organization_id,
|
||||
e.user_id,
|
||||
'Fecha límite próxima: ' || l.title,
|
||||
'La lección \"' || l.title || '\" del curso \"' || c.title || '\" vence en menos de 24 horas.',
|
||||
'deadline',
|
||||
'/courses/' || c.id || '/lessons/' || l.id
|
||||
FROM enrollments e
|
||||
JOIN lessons l ON l.course_id = e.course_id
|
||||
JOIN courses c ON c.id = l.course_id
|
||||
WHERE l.due_date BETWEEN NOW() AND NOW() + INTERVAL '24 hours'
|
||||
AND NOT EXISTS (
|
||||
SELECT 1 FROM notifications n
|
||||
WHERE n.user_id = e.user_id
|
||||
AND n.notification_type = 'deadline'
|
||||
AND n.link_url = '/courses/' || c.id || '/lessons/' || l.id
|
||||
AND n.created_at > NOW() - INTERVAL '48 hours'
|
||||
)"
|
||||
)
|
||||
.execute(&pool)
|
||||
.await;
|
||||
|
||||
if let Err(e) = result {
|
||||
tracing::error!("Failed to run deadline notifications: {}", e);
|
||||
}
|
||||
}
|
||||
|
||||
pub async fn update_user(
|
||||
Org(org_ctx): Org,
|
||||
claims: common::auth::Claims,
|
||||
|
||||
@@ -29,6 +29,15 @@ async fn main() {
|
||||
.await
|
||||
.expect("Failed to run migrations");
|
||||
|
||||
// Start background task for deadline notifications
|
||||
let pool_clone = pool.clone();
|
||||
tokio::spawn(async move {
|
||||
loop {
|
||||
handlers::check_deadlines_and_notify(pool_clone.clone()).await;
|
||||
tokio::time::sleep(tokio::time::Duration::from_secs(3600)).await; // Every hour
|
||||
}
|
||||
});
|
||||
|
||||
let cors = CorsLayer::new()
|
||||
.allow_origin(Any)
|
||||
.allow_methods(Any)
|
||||
@@ -58,6 +67,16 @@ async fn main() {
|
||||
)
|
||||
.route("/users/{id}", post(handlers::update_user))
|
||||
.route("/analytics/leaderboard", get(handlers::get_leaderboard))
|
||||
.route(
|
||||
"/lessons/{id}/interactions",
|
||||
post(handlers::record_interaction),
|
||||
)
|
||||
.route("/lessons/{id}/heatmap", get(handlers::get_lesson_heatmap))
|
||||
.route("/notifications", get(handlers::get_notifications))
|
||||
.route(
|
||||
"/notifications/{id}/read",
|
||||
post(handlers::mark_notification_as_read),
|
||||
)
|
||||
.route_layer(middleware::from_fn(
|
||||
common::middleware::org_extractor_middleware,
|
||||
));
|
||||
|
||||
@@ -74,15 +74,34 @@ pub struct UserGrade {
|
||||
pub created_at: DateTime<Utc>,
|
||||
}
|
||||
|
||||
#[derive(Debug, Serialize, Deserialize, sqlx::FromRow)]
|
||||
pub struct AuditLog {
|
||||
#[derive(Debug, Serialize, Deserialize, sqlx::FromRow, Clone)]
|
||||
pub struct LessonInteraction {
|
||||
pub id: Uuid,
|
||||
pub organization_id: Uuid,
|
||||
pub user_id: Uuid,
|
||||
pub organization_id: Option<Uuid>,
|
||||
pub action: String,
|
||||
pub entity_type: String,
|
||||
pub entity_id: Uuid,
|
||||
pub changes: serde_json::Value,
|
||||
pub lesson_id: Uuid,
|
||||
pub video_timestamp: Option<f64>,
|
||||
pub event_type: String,
|
||||
pub metadata: Option<serde_json::Value>,
|
||||
pub created_at: DateTime<Utc>,
|
||||
}
|
||||
|
||||
#[derive(Debug, Serialize, Deserialize, sqlx::FromRow, Clone)]
|
||||
pub struct HeatmapPoint {
|
||||
pub second: i32,
|
||||
pub count: i64,
|
||||
}
|
||||
|
||||
#[derive(Debug, Serialize, Deserialize, sqlx::FromRow, Clone)]
|
||||
pub struct Notification {
|
||||
pub id: Uuid,
|
||||
pub organization_id: Uuid,
|
||||
pub user_id: Uuid,
|
||||
pub title: String,
|
||||
pub message: String,
|
||||
pub notification_type: String,
|
||||
pub is_read: bool,
|
||||
pub link_url: Option<String>,
|
||||
pub created_at: DateTime<Utc>,
|
||||
}
|
||||
|
||||
@@ -238,6 +257,23 @@ pub struct OrganizationSSOConfig {
|
||||
pub updated_at: DateTime<Utc>,
|
||||
}
|
||||
|
||||
#[derive(Debug, Serialize, Deserialize, sqlx::FromRow, Clone)]
|
||||
pub struct AuditLog {
|
||||
pub id: Uuid,
|
||||
pub organization_id: Option<Uuid>,
|
||||
pub user_id: Option<Uuid>,
|
||||
pub action: String,
|
||||
pub entity_type: String,
|
||||
pub entity_id: Uuid,
|
||||
pub event_type: String,
|
||||
pub old_data: Option<serde_json::Value>,
|
||||
pub new_data: Option<serde_json::Value>,
|
||||
pub ip_address: Option<String>,
|
||||
pub user_agent: Option<String>,
|
||||
pub changes: Option<serde_json::Value>,
|
||||
pub created_at: DateTime<Utc>,
|
||||
}
|
||||
|
||||
#[cfg(test)]
|
||||
mod tests {
|
||||
use super::*;
|
||||
|
||||
@@ -13,6 +13,10 @@ import FillInTheBlanksPlayer from "@/components/blocks/FillInTheBlanksPlayer";
|
||||
import MatchingPlayer from "@/components/blocks/MatchingPlayer";
|
||||
import OrderingPlayer from "@/components/blocks/OrderingPlayer";
|
||||
import ShortAnswerPlayer from "@/components/blocks/ShortAnswerPlayer";
|
||||
import CodeExercisePlayer from "@/components/blocks/CodeExercisePlayer";
|
||||
import HotspotPlayer from "@/components/blocks/HotspotPlayer";
|
||||
import MemoryPlayer from "@/components/blocks/MemoryPlayer";
|
||||
import DocumentPlayer from "@/components/blocks/DocumentPlayer"; // Added import
|
||||
import InteractiveTranscript from "@/components/InteractiveTranscript";
|
||||
import { ListMusic } from "lucide-react";
|
||||
|
||||
@@ -69,6 +73,31 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
|
||||
}
|
||||
};
|
||||
|
||||
const handleBlockComplete = async (blockId: string, score: number) => {
|
||||
if (user) {
|
||||
try {
|
||||
// Update the score for the specific block in metadata
|
||||
const currentBlockScores = (userGrade?.metadata?.block_scores as Record<string, number>) || {};
|
||||
const newBlockScores = {
|
||||
...currentBlockScores,
|
||||
[blockId]: score
|
||||
};
|
||||
|
||||
const res = await lmsApi.submitScore(
|
||||
user.id,
|
||||
params.id,
|
||||
params.lessonId,
|
||||
userGrade?.score || 0, // Keep overall score for now, or calculate average/sum
|
||||
{ ...userGrade?.metadata, block_scores: newBlockScores }
|
||||
);
|
||||
setUserGrade(res);
|
||||
console.log(`Score for block ${blockId} submitted: ${score}`);
|
||||
} catch (err) {
|
||||
console.error(`Failed to submit score for block ${blockId}`, err);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-[calc(100vh-64px)] overflow-hidden">
|
||||
{/* Navigation Sidebar */}
|
||||
@@ -147,104 +176,143 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
|
||||
{/* Render Blocks */}
|
||||
{(lesson.metadata?.blocks || []).length > 0 ? (
|
||||
<div className="space-y-24">
|
||||
{lesson.metadata?.blocks?.map((block) => (
|
||||
<div key={block.id} className="animate-in fade-in slide-in-from-bottom-6 duration-700 delay-100">
|
||||
{block.type === 'description' && (
|
||||
<DescriptionPlayer id={block.id} title={block.title} content={block.content || ""} />
|
||||
)}
|
||||
{block.type === 'media' && (
|
||||
<MediaPlayer
|
||||
id={block.id}
|
||||
title={block.title}
|
||||
url={block.url || ""}
|
||||
media_type={block.media_type || 'video'}
|
||||
config={block.config}
|
||||
onTimeUpdate={setCurrentTime}
|
||||
initialPlayCount={
|
||||
userGrade?.metadata?.play_counts
|
||||
? (userGrade.metadata.play_counts as Record<string, number>)[block.id] || 0
|
||||
: 0
|
||||
}
|
||||
onPlay={async () => {
|
||||
if (user && lesson.max_attempts && (!userGrade || userGrade.attempts_count < lesson.max_attempts)) {
|
||||
const currentPlayCounts = (userGrade?.metadata?.play_counts as Record<string, number>) || {};
|
||||
const newPlayCounts = {
|
||||
...currentPlayCounts,
|
||||
[block.id]: (currentPlayCounts[block.id] || 0) + 1
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await lmsApi.submitScore(
|
||||
user.id,
|
||||
params.id,
|
||||
params.lessonId,
|
||||
userGrade?.score || 0,
|
||||
{ ...userGrade?.metadata, play_counts: newPlayCounts }
|
||||
);
|
||||
setUserGrade(res);
|
||||
} catch (err) {
|
||||
console.error("Error al guardar el recuento de reproducciones", err);
|
||||
{lesson.metadata?.blocks?.map((block) => {
|
||||
const renderBlock = () => {
|
||||
switch (block.type) {
|
||||
case 'description':
|
||||
return <DescriptionPlayer id={block.id} title={block.title} content={block.content || ""} />;
|
||||
case 'media':
|
||||
return (
|
||||
<MediaPlayer
|
||||
id={block.id}
|
||||
lessonId={params.lessonId}
|
||||
title={block.title}
|
||||
url={block.url || ""}
|
||||
media_type={block.media_type || 'video'}
|
||||
config={block.config}
|
||||
onTimeUpdate={setCurrentTime}
|
||||
initialPlayCount={
|
||||
userGrade?.metadata?.play_counts
|
||||
? (userGrade.metadata.play_counts as Record<string, number>)[block.id] || 0
|
||||
: 0
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{block.type === 'quiz' && (
|
||||
<QuizPlayer
|
||||
id={block.id}
|
||||
title={block.title}
|
||||
quizData={block.quiz_data || { questions: [] }}
|
||||
allowRetry={lesson.allow_retry}
|
||||
maxAttempts={lesson.max_attempts || undefined}
|
||||
initialAttempts={
|
||||
userGrade?.metadata?.block_attempts
|
||||
? (userGrade.metadata.block_attempts as Record<string, number>)[block.id] || 0
|
||||
: 0
|
||||
}
|
||||
onAttempt={async () => {
|
||||
if (user) {
|
||||
const currentAttempts = (userGrade?.metadata?.block_attempts as Record<string, number>) || {};
|
||||
const newAttempts = {
|
||||
...currentAttempts,
|
||||
[block.id]: (currentAttempts[block.id] || 0) + 1
|
||||
};
|
||||
onPlay={async () => {
|
||||
if (user && lesson.max_attempts && (!userGrade || userGrade.attempts_count < lesson.max_attempts)) {
|
||||
const currentPlayCounts = (userGrade?.metadata?.play_counts as Record<string, number>) || {};
|
||||
const newPlayCounts = {
|
||||
...currentPlayCounts,
|
||||
[block.id]: (currentPlayCounts[block.id] || 0) + 1
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await lmsApi.submitScore(
|
||||
user.id,
|
||||
params.id,
|
||||
params.lessonId,
|
||||
userGrade?.score || 0,
|
||||
{ ...userGrade?.metadata, block_attempts: newAttempts }
|
||||
);
|
||||
setUserGrade(res);
|
||||
} catch (err) {
|
||||
console.error("Error al guardar los intentos del bloque", err);
|
||||
try {
|
||||
const res = await lmsApi.submitScore(
|
||||
user.id,
|
||||
params.id,
|
||||
params.lessonId,
|
||||
userGrade?.score || 0,
|
||||
{ ...userGrade?.metadata, play_counts: newPlayCounts }
|
||||
);
|
||||
setUserGrade(res);
|
||||
} catch (err) {
|
||||
console.error("Error al guardar el recuento de reproducciones", err);
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
case 'document':
|
||||
return <DocumentPlayer id={block.id} title={block.title} url={block.url || ""} />;
|
||||
case 'quiz':
|
||||
return (
|
||||
<QuizPlayer
|
||||
id={block.id}
|
||||
title={block.title}
|
||||
quizData={block.quiz_data || { questions: [] }}
|
||||
allowRetry={lesson.allow_retry}
|
||||
maxAttempts={lesson.max_attempts || undefined}
|
||||
initialAttempts={
|
||||
userGrade?.metadata?.block_attempts
|
||||
? (userGrade.metadata.block_attempts as Record<string, number>)[block.id] || 0
|
||||
: 0
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{block.type === 'fill-in-the-blanks' && (
|
||||
<FillInTheBlanksPlayer id={block.id} title={block.title} content={block.content || ""} allowRetry={lesson.allow_retry} />
|
||||
)}
|
||||
{block.type === 'matching' && (
|
||||
<MatchingPlayer id={block.id} title={block.title} pairs={block.pairs || []} allowRetry={lesson.allow_retry} />
|
||||
)}
|
||||
{block.type === 'ordering' && (
|
||||
<OrderingPlayer id={block.id} title={block.title} items={block.items || []} allowRetry={lesson.allow_retry} />
|
||||
)}
|
||||
{block.type === 'short-answer' && (
|
||||
<ShortAnswerPlayer
|
||||
id={block.id}
|
||||
title={block.title}
|
||||
prompt={block.prompt || ""}
|
||||
correctAnswers={block.correctAnswers || []}
|
||||
allowRetry={lesson.allow_retry}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
onAttempt={async () => {
|
||||
if (user) {
|
||||
const currentAttempts = (userGrade?.metadata?.block_attempts as Record<string, number>) || {};
|
||||
const newAttempts = {
|
||||
...currentAttempts,
|
||||
[block.id]: (currentAttempts[block.id] || 0) + 1
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await lmsApi.submitScore(
|
||||
user.id,
|
||||
params.id,
|
||||
params.lessonId,
|
||||
userGrade?.score || 0,
|
||||
{ ...userGrade?.metadata, block_attempts: newAttempts }
|
||||
);
|
||||
setUserGrade(res);
|
||||
} catch (err) {
|
||||
console.error("Error al guardar los intentos del bloque", err);
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
case 'fill-in-the-blanks':
|
||||
return <FillInTheBlanksPlayer id={block.id} title={block.title} content={block.content || ""} allowRetry={lesson.allow_retry} />;
|
||||
case 'matching':
|
||||
return <MatchingPlayer id={block.id} title={block.title} pairs={block.pairs || []} allowRetry={lesson.allow_retry} />;
|
||||
case 'ordering':
|
||||
return <OrderingPlayer id={block.id} title={block.title} items={block.items || []} allowRetry={lesson.allow_retry} />;
|
||||
case 'short-answer':
|
||||
return (
|
||||
<ShortAnswerPlayer
|
||||
id={block.id}
|
||||
title={block.title}
|
||||
prompt={block.prompt || ""}
|
||||
correctAnswers={block.correctAnswers || []}
|
||||
allowRetry={lesson.allow_retry}
|
||||
/>
|
||||
);
|
||||
case 'code':
|
||||
return (
|
||||
<CodeExercisePlayer
|
||||
title={block.title}
|
||||
instructions={block.instructions || ""}
|
||||
initialCode={block.initialCode || ""}
|
||||
onComplete={(score) => handleBlockComplete(block.id, score)}
|
||||
/>
|
||||
);
|
||||
case 'hotspot':
|
||||
return (
|
||||
<HotspotPlayer
|
||||
title={block.title}
|
||||
description={block.content || ""}
|
||||
imageUrl={block.url || ""}
|
||||
hotspots={block.metadata?.hotspots || []}
|
||||
onComplete={(score) => handleBlockComplete(block.id, score)}
|
||||
/>
|
||||
);
|
||||
case 'memory-match':
|
||||
return (
|
||||
<MemoryPlayer
|
||||
title={block.title}
|
||||
pairs={block.metadata?.pairs || []}
|
||||
onComplete={(score) => handleBlockComplete(block.id, score)}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return <div className="p-4 bg-white/5 border border-white/10 rounded-xl text-xs font-bold text-gray-500 uppercase tracking-widest">Tipo de Bloque Desconocido: {block.type}</div>;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div key={block.id} className="animate-in fade-in slide-in-from-bottom-6 duration-700 delay-100">
|
||||
{renderBlock()}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="py-20 text-center glass-card border-dashed border-white/10">
|
||||
|
||||
@@ -3,6 +3,7 @@ import { Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import Link from "next/link";
|
||||
import { AuthProvider } from "@/context/AuthContext";
|
||||
import { I18nProvider } from "@/context/I18nContext";
|
||||
import { BrandingProvider } from "@/context/BrandingContext";
|
||||
import AuthGuard from "@/components/AuthGuard";
|
||||
|
||||
@@ -25,17 +26,19 @@ export default function RootLayout({
|
||||
<body className={`${inter.className} bg-[#050505] text-[#e5e5e5] min-h-screen flex flex-col`}>
|
||||
<BrandingProvider>
|
||||
<AuthProvider>
|
||||
<AuthGuard>
|
||||
<AppHeader />
|
||||
<main className="flex-1">
|
||||
{children}
|
||||
</main>
|
||||
<footer className="py-12 px-6 border-t border-white/5 text-center bg-black/20">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-600">
|
||||
Desarrollado por OpenCCB © 2023. Codificación Agente Avanzada.
|
||||
</p>
|
||||
</footer>
|
||||
</AuthGuard>
|
||||
<I18nProvider>
|
||||
<AuthGuard>
|
||||
<AppHeader />
|
||||
<main className="flex-1">
|
||||
{children}
|
||||
</main>
|
||||
<footer className="py-12 px-6 border-t border-white/5 text-center bg-black/20">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-600">
|
||||
Desarrollado por OpenCCB © 2023. Codificación Agente Avanzada.
|
||||
</p>
|
||||
</footer>
|
||||
</AuthGuard>
|
||||
</I18nProvider>
|
||||
</AuthProvider>
|
||||
</BrandingProvider>
|
||||
</body>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { useState, useEffect, useRef, useCallback } from "react";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import { useTranslation } from "@/context/I18nContext";
|
||||
import { lmsApi, CMS_API_URL } from "@/lib/api";
|
||||
import {
|
||||
Save,
|
||||
@@ -19,6 +20,7 @@ import {
|
||||
} from "lucide-react";
|
||||
|
||||
export default function ProfilePage() {
|
||||
const { t, setLanguage: setContextLanguage } = useTranslation();
|
||||
const { user, logout } = useAuth();
|
||||
const [fullName, setFullName] = useState(user?.full_name || "");
|
||||
const [email, setEmail] = useState(user?.email || "");
|
||||
@@ -31,6 +33,16 @@ export default function ProfilePage() {
|
||||
const [gamification, setGamification] = useState<any>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const fetchGamification = useCallback(async () => {
|
||||
if (!user) return;
|
||||
try {
|
||||
const data = await lmsApi.getGamification(user.id);
|
||||
setGamification(data);
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch gamification:", err);
|
||||
}
|
||||
}, [user]);
|
||||
|
||||
useEffect(() => {
|
||||
if (user) {
|
||||
setFullName(user.full_name);
|
||||
@@ -40,17 +52,7 @@ export default function ProfilePage() {
|
||||
setAvatarUrl(user.avatar_url || "");
|
||||
fetchGamification();
|
||||
}
|
||||
}, [user]);
|
||||
|
||||
const fetchGamification = async () => {
|
||||
if (!user) return;
|
||||
try {
|
||||
const data = await lmsApi.getGamification(user.id);
|
||||
setGamification(data);
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch gamification:", err);
|
||||
}
|
||||
};
|
||||
}, [user, fetchGamification]);
|
||||
|
||||
const getImageUrl = (path?: string) => {
|
||||
if (!path) return '';
|
||||
@@ -95,7 +97,8 @@ export default function ProfilePage() {
|
||||
avatar_url: avatarUrl
|
||||
});
|
||||
|
||||
setMessage({ type: 'success', text: '¡Perfil actualizado con éxito!' });
|
||||
setContextLanguage(language);
|
||||
setMessage({ type: 'success', text: t('common.save') + '!' });
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setMessage({ type: 'error', text: 'Error al actualizar el perfil.' });
|
||||
@@ -271,8 +274,8 @@ export default function ProfilePage() {
|
||||
type="button"
|
||||
onClick={() => setLanguage(lang.code)}
|
||||
className={`flex items-center justify-center gap-3 p-4 rounded-2xl border transition-all ${language === lang.code
|
||||
? 'bg-blue-600 border-blue-500 text-white shadow-lg shadow-blue-500/20'
|
||||
: 'bg-black/20 border-white/5 text-gray-400 hover:border-white/20 hover:text-white'
|
||||
? 'bg-blue-600 border-blue-500 text-white shadow-lg shadow-blue-500/20'
|
||||
: 'bg-black/20 border-white/5 text-gray-400 hover:border-white/20 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<span className="text-xl">{lang.flag}</span>
|
||||
@@ -284,8 +287,8 @@ export default function ProfilePage() {
|
||||
|
||||
{message && (
|
||||
<div className={`p-5 rounded-2xl text-sm font-bold animate-in fade-in slide-in-from-top-4 ${message.type === 'success'
|
||||
? 'bg-green-500/10 text-green-400 border border-green-500/20'
|
||||
: 'bg-red-500/10 text-red-400 border border-red-500/20'
|
||||
? 'bg-green-500/10 text-green-400 border border-green-500/20'
|
||||
: 'bg-red-500/10 text-red-400 border border-red-500/20'
|
||||
}`}>
|
||||
{message.text}
|
||||
</div>
|
||||
|
||||
@@ -3,9 +3,12 @@
|
||||
import Link from "next/link";
|
||||
import { useBranding } from "@/context/BrandingContext";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import { LogOut } from "lucide-react";
|
||||
import { useTranslation } from "@/context/I18nContext";
|
||||
import { LogOut, Globe } from "lucide-react";
|
||||
import NotificationCenter from "./NotificationCenter";
|
||||
|
||||
export default function AppHeader() {
|
||||
const { t, language, setLanguage } = useTranslation();
|
||||
const { branding } = useBranding();
|
||||
const { user, logout } = useAuth();
|
||||
|
||||
@@ -27,11 +30,32 @@ export default function AppHeader() {
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<nav className="hidden md:flex items-center gap-8">
|
||||
<Link href="/" className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-400 hover:text-white transition-colors">Catálogo</Link>
|
||||
<Link href="/my-learning" className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-400 hover:text-white transition-colors">Mi Aprendizaje</Link>
|
||||
<nav className="flex items-center gap-2 md:gap-8">
|
||||
<div className="hidden md:flex items-center gap-8 mr-4">
|
||||
<Link href="/" className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-400 hover:text-white transition-colors">
|
||||
{t('nav.catalog')}
|
||||
</Link>
|
||||
<Link href="/my-learning" className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-400 hover:text-white transition-colors">
|
||||
{t('nav.myLearning')}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 pl-4 border-l border-white/10">
|
||||
<NotificationCenter />
|
||||
|
||||
<div className="flex items-center gap-2 border-l border-white/10 pl-4">
|
||||
<Globe size={14} className="text-gray-500" />
|
||||
<select
|
||||
value={language}
|
||||
onChange={(e) => setLanguage(e.target.value)}
|
||||
className="bg-transparent text-[10px] font-black uppercase tracking-widest text-gray-500 hover:text-white transition-colors focus:outline-none cursor-pointer"
|
||||
>
|
||||
<option value="en" className="bg-[#0f1115]">EN</option>
|
||||
<option value="es" className="bg-[#0f1115]">ES</option>
|
||||
<option value="pt" className="bg-[#0f1115]">PT</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 md:gap-4 pl-4 border-l border-white/10">
|
||||
<Link href="/profile" className="flex items-center gap-2 group/profile">
|
||||
<div className="w-8 h-8 rounded-full bg-white/5 border border-white/10 flex items-center justify-center font-bold text-xs text-blue-400 group-hover/profile:border-blue-500/50 transition-colors">
|
||||
{user?.full_name?.charAt(0) || 'U'}
|
||||
@@ -40,7 +64,7 @@ export default function AppHeader() {
|
||||
<button
|
||||
onClick={logout}
|
||||
className="p-2 hover:bg-red-500/10 rounded-full text-gray-400 hover:text-red-400 transition-colors"
|
||||
title="Cerrar Sesión"
|
||||
title={t('nav.signOut')}
|
||||
>
|
||||
<LogOut size={16} />
|
||||
</button>
|
||||
|
||||
@@ -0,0 +1,134 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { lmsApi, Notification } from "@/lib/api";
|
||||
import { Bell, X, Calendar, Info, AlertTriangle, CheckCircle2 } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function NotificationCenter() {
|
||||
const [notifications, setNotifications] = useState<Notification[]>([]);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const fetchNotifications = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await lmsApi.getNotifications();
|
||||
setNotifications(data);
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch notifications", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchNotifications();
|
||||
// Poll every 5 minutes
|
||||
const interval = setInterval(fetchNotifications, 300000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
const markAsRead = async (id: string) => {
|
||||
try {
|
||||
await lmsApi.markNotificationAsRead(id);
|
||||
setNotifications(prev => prev.map(n => n.id === id ? { ...n, is_read: true } : n));
|
||||
} catch (err) {
|
||||
console.error("Failed to mark as read", err);
|
||||
}
|
||||
};
|
||||
|
||||
const unreadCount = notifications.filter(n => !n.is_read).length;
|
||||
|
||||
const getIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case 'deadline': return <Calendar className="text-red-400" size={18} />;
|
||||
case 'warning': return <AlertTriangle className="text-amber-400" size={18} />;
|
||||
case 'success': return <CheckCircle2 className="text-green-400" size={18} />;
|
||||
default: return <Info className="text-blue-400" size={18} />;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="relative p-2 rounded-xl glass border-white/10 text-gray-400 hover:text-white transition-all hover:bg-white/5"
|
||||
>
|
||||
<Bell size={20} />
|
||||
{unreadCount > 0 && (
|
||||
<span className="absolute top-0 right-0 w-5 h-5 bg-red-500 text-white text-[10px] font-black rounded-full flex items-center justify-center border-2 border-[#1a1c20] -translate-to-1/4">
|
||||
{unreadCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<>
|
||||
<div className="fixed inset-0 z-40" onClick={() => setIsOpen(false)} />
|
||||
<div className="absolute right-0 mt-4 w-96 glass-card border-white/10 z-50 shadow-2xl animate-in fade-in zoom-in-95 duration-200 overflow-hidden bg-[#1a1c20]/95 backdrop-blur-xl">
|
||||
<div className="p-4 border-b border-white/5 flex items-center justify-between bg-white/5">
|
||||
<h3 className="text-sm font-black uppercase tracking-widest text-white">Notificaciones</h3>
|
||||
<button onClick={() => setIsOpen(false)} className="text-gray-500 hover:text-white p-1">
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="max-h-[400px] overflow-y-auto">
|
||||
{loading && notifications.length === 0 ? (
|
||||
<div className="p-12 text-center animate-pulse text-gray-500 text-xs font-bold uppercase tracking-widest">Cargando...</div>
|
||||
) : notifications.length === 0 ? (
|
||||
<div className="p-12 text-center text-gray-500 text-xs font-bold uppercase tracking-widest italic">No hay notificaciones</div>
|
||||
) : (
|
||||
<div className="divide-y divide-white/5">
|
||||
{notifications.map((n) => (
|
||||
<div
|
||||
key={n.id}
|
||||
className={`p-4 hover:bg-white/5 transition-all group ${!n.is_read ? 'bg-blue-500/5' : ''}`}
|
||||
onClick={() => !n.is_read && markAsRead(n.id)}
|
||||
>
|
||||
<div className="flex gap-4">
|
||||
<div className="mt-1">{getIcon(n.notification_type)}</div>
|
||||
<div className="flex-1 space-y-1">
|
||||
<p className="text-sm font-bold text-white leading-tight">{n.title}</p>
|
||||
<p className="text-xs text-gray-400 leading-relaxed">{n.message}</p>
|
||||
<div className="flex items-center justify-between pt-2">
|
||||
<span className="text-[10px] font-bold text-gray-600 uppercase tracking-widest">
|
||||
{new Date(n.created_at).toLocaleDateString()}
|
||||
</span>
|
||||
{n.link_url && (
|
||||
<Link
|
||||
href={n.link_url}
|
||||
className="text-[10px] font-black uppercase tracking-widest text-blue-400 hover:text-blue-300 flex items-center gap-1"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
Ver detalles →
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{notifications.length > 0 && (
|
||||
<div className="p-4 border-t border-white/5 bg-white/5 text-center">
|
||||
<button
|
||||
className="text-[10px] font-black uppercase tracking-widest text-gray-500 hover:text-white transition-colors"
|
||||
onClick={() => {
|
||||
notifications.filter(n => !n.is_read).forEach(n => markAsRead(n.id));
|
||||
}}
|
||||
>
|
||||
Marcar todas como leídas
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { Play, CheckCircle, XCircle, Code2, RefreshCcw } from "lucide-react";
|
||||
|
||||
interface CodeExercisePlayerProps {
|
||||
title: string;
|
||||
instructions: string;
|
||||
initialCode: string;
|
||||
expectedOutput?: string;
|
||||
validationLogic?: string; // JavaScript snippet to validate
|
||||
onComplete: (score: number) => void;
|
||||
}
|
||||
|
||||
export default function CodeExercisePlayer({
|
||||
title,
|
||||
instructions,
|
||||
initialCode,
|
||||
onComplete
|
||||
}: CodeExercisePlayerProps) {
|
||||
const [code, setCode] = useState(initialCode);
|
||||
const [output, setOutput] = useState<string | null>(null);
|
||||
const [status, setStatus] = useState<"idle" | "running" | "success" | "error">("idle");
|
||||
|
||||
const runCode = () => {
|
||||
setStatus("running");
|
||||
setOutput("Running tests...\n");
|
||||
|
||||
setTimeout(() => {
|
||||
// Mock validation logic
|
||||
// In a real system, this would go to a sandbox or use a WebWorker
|
||||
const lowerCode = code.toLowerCase();
|
||||
let isCorrect = false;
|
||||
|
||||
if (title.toLowerCase().includes("hello world")) {
|
||||
isCorrect = code.includes("print") || code.includes("console.log") || code.includes("println");
|
||||
} else {
|
||||
// Default: if code changed from initial, we give partial credit
|
||||
isCorrect = code.trim() !== initialCode.trim();
|
||||
}
|
||||
|
||||
if (isCorrect) {
|
||||
setStatus("success");
|
||||
setOutput("✅ Tests passed!\n\nOutput:\nHello, OpenCCB!");
|
||||
onComplete(1.0);
|
||||
} else {
|
||||
setStatus("error");
|
||||
setOutput("❌ Tests failed.\n\nError:\nAssertionError: Output does not match expected result.");
|
||||
}
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
setCode(initialCode);
|
||||
setStatus("idle");
|
||||
setOutput(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6 animate-in fade-in duration-700">
|
||||
<div className="glass-card p-6 border-white/5">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="p-2 rounded-lg bg-indigo-500/10 text-indigo-400">
|
||||
<Code2 size={24} />
|
||||
</div>
|
||||
<h2 className="text-xl font-black tracking-tight">{title}</h2>
|
||||
</div>
|
||||
<div className="prose prose-invert max-w-none text-gray-400 text-sm leading-relaxed">
|
||||
{instructions}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 h-[500px]">
|
||||
{/* Editor Area */}
|
||||
<div className="flex flex-col rounded-2xl overflow-hidden border border-white/5 bg-[#1a1c21]">
|
||||
<div className="px-4 py-2 bg-white/5 border-b border-white/5 flex items-center justify-between text-[10px] font-black uppercase tracking-widest text-gray-500">
|
||||
<span>main.py</span>
|
||||
<div className="flex gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-red-500/20" />
|
||||
<div className="w-2 h-2 rounded-full bg-amber-500/20" />
|
||||
<div className="w-2 h-2 rounded-full bg-green-500/20" />
|
||||
</div>
|
||||
</div>
|
||||
<textarea
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value)}
|
||||
className="flex-1 bg-transparent p-6 font-mono text-sm resize-none focus:outline-none text-indigo-100 selection:bg-indigo-500/30"
|
||||
spellCheck={false}
|
||||
/>
|
||||
<div className="p-4 bg-black/20 border-t border-white/5 flex gap-2">
|
||||
<button
|
||||
onClick={runCode}
|
||||
disabled={status === "running"}
|
||||
className="flex-1 py-2.5 bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white rounded-xl font-bold flex items-center justify-center gap-2 transition-all shadow-lg shadow-indigo-500/20"
|
||||
>
|
||||
{status === "running" ? (
|
||||
<div className="w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin" />
|
||||
) : (
|
||||
<Play size={16} />
|
||||
)}
|
||||
Run Code
|
||||
</button>
|
||||
<button
|
||||
onClick={reset}
|
||||
className="px-4 py-2.5 bg-white/5 hover:bg-white/10 rounded-xl transition-all"
|
||||
title="Reset"
|
||||
>
|
||||
<RefreshCcw size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Console / Results Area */}
|
||||
<div className="flex flex-col rounded-2xl overflow-hidden border border-white/5 bg-black/40">
|
||||
<div className="px-4 py-2 bg-white/5 border-b border-white/5 text-[10px] font-black uppercase tracking-widest text-gray-500">
|
||||
Console Output
|
||||
</div>
|
||||
<div className="flex-1 p-6 font-mono text-sm overflow-auto">
|
||||
{!output && <span className="text-gray-600 italic">Click "Run Code" to execute tests...</span>}
|
||||
{output && (
|
||||
<pre className={`whitespace-pre-wrap ${status === "success" ? "text-green-400" :
|
||||
status === "error" ? "text-red-400" :
|
||||
"text-gray-400"
|
||||
}`}>
|
||||
{output}
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
{status === "success" && (
|
||||
<div className="m-4 p-4 rounded-xl bg-green-500/10 border border-green-500/20 flex items-center gap-3 animate-in zoom-in duration-300">
|
||||
<CheckCircle className="text-green-400" />
|
||||
<div>
|
||||
<div className="text-sm font-bold text-green-400">Challenge Completed!</div>
|
||||
<p className="text-[10px] text-green-500/80 uppercase font-black tracking-widest">Score: 100%</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{status === "error" && (
|
||||
<div className="m-4 p-4 rounded-xl bg-red-500/10 border border-red-500/20 flex items-center gap-3 animate-in shake duration-300">
|
||||
<XCircle className="text-red-400" />
|
||||
<div>
|
||||
<div className="text-sm font-bold text-red-400">Execution Failed</div>
|
||||
<p className="text-[10px] text-red-500/80 uppercase font-black tracking-widest">Try again</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
"use client";
|
||||
|
||||
import { FileText, Download, Eye, ExternalLink } from "lucide-react";
|
||||
import { CMS_API_URL } from "@/lib/api";
|
||||
|
||||
interface DocumentPlayerProps {
|
||||
id: string;
|
||||
title?: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
export default function DocumentPlayer({ id, title, url }: DocumentPlayerProps) {
|
||||
if (!url) return null;
|
||||
|
||||
const isPdf = url.toLowerCase().endsWith(".pdf");
|
||||
|
||||
const getFullUrl = (path: string) => {
|
||||
if (path.startsWith('http')) return path;
|
||||
const cleanPath = path.startsWith('/uploads') ? path.replace('/uploads', '/assets') : path;
|
||||
const finalPath = cleanPath.startsWith('/') ? cleanPath : `/${cleanPath}`;
|
||||
return `${CMS_API_URL}${finalPath}`;
|
||||
};
|
||||
|
||||
const displayUrl = getFullUrl(url);
|
||||
|
||||
return (
|
||||
<div className="space-y-6" id={id}>
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-xs font-black uppercase tracking-widest text-gray-400">
|
||||
{title || "Material de Lectura"}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
{isPdf ? (
|
||||
<div className="glass-card !p-0 overflow-hidden border-white/5 bg-white/5 aspect-[4/3] w-full group relative">
|
||||
<iframe
|
||||
src={`${displayUrl}#view=FitH&toolbar=0`}
|
||||
className="w-full h-full border-none"
|
||||
title={title || "Document Preview"}
|
||||
/>
|
||||
|
||||
{/* Overlay Controls */}
|
||||
<div className="absolute bottom-0 inset-x-0 p-4 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-between">
|
||||
<span className="text-[10px] font-black uppercase tracking-widest text-white/50 flex items-center gap-2">
|
||||
<Eye size={12} /> Vista Previa
|
||||
</span>
|
||||
<div className="flex gap-2">
|
||||
<a
|
||||
href={displayUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="px-4 py-2 bg-white/10 hover:bg-white/20 text-white rounded-lg text-[10px] font-black uppercase tracking-widest transition-all flex items-center gap-2 border border-white/10"
|
||||
>
|
||||
<ExternalLink size={12} /> Pantalla Completa
|
||||
</a>
|
||||
<a
|
||||
href={displayUrl}
|
||||
download
|
||||
className="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg text-[10px] font-black uppercase tracking-widest transition-all flex items-center gap-2 shadow-lg shadow-blue-500/20"
|
||||
>
|
||||
<Download size={12} /> Descargar
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="glass-card p-12 flex flex-col items-center text-center gap-6 border-white/5 bg-white/5">
|
||||
<div className="w-20 h-20 rounded-2xl bg-blue-500/10 flex items-center justify-center text-blue-400">
|
||||
<FileText size={40} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xl font-bold text-white mb-2">Documento Adjunto</p>
|
||||
<p className="text-sm text-gray-500 max-w-sm mx-auto uppercase tracking-widest font-black leading-relaxed">
|
||||
Este archivo no puede previsualizarse. Descárgalo para leerlo.
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
href={displayUrl}
|
||||
download
|
||||
className="flex items-center gap-3 px-8 py-4 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl font-black uppercase tracking-widest transition-all shadow-2xl shadow-blue-500/40 active:scale-95"
|
||||
>
|
||||
<Download size={20} /> Descargar Archivo
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,158 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useRef } from "react";
|
||||
import { Search, CheckCircle, XCircle, MousePointer2 } from "lucide-react";
|
||||
|
||||
interface Hotspot {
|
||||
id: string;
|
||||
x: number; // Percentage 0-100
|
||||
y: number; // Percentage 0-100
|
||||
radius: number; // Percentage radius
|
||||
label: string;
|
||||
}
|
||||
|
||||
interface HotspotPlayerProps {
|
||||
title: string;
|
||||
description: string;
|
||||
imageUrl: string;
|
||||
hotspots: Hotspot[];
|
||||
onComplete: (score: number) => void;
|
||||
}
|
||||
|
||||
export default function HotspotPlayer({
|
||||
title,
|
||||
description,
|
||||
imageUrl,
|
||||
hotspots,
|
||||
onComplete
|
||||
}: HotspotPlayerProps) {
|
||||
const [found, setFound] = useState<string[]>([]);
|
||||
const [mistakes, setMistakes] = useState<{ x: number, y: number }[]>([]);
|
||||
const [status, setStatus] = useState<"playing" | "success">("playing");
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const handleClick = (e: React.MouseEvent) => {
|
||||
if (status === "success" || !containerRef.current) return;
|
||||
|
||||
const rect = containerRef.current.getBoundingClientRect();
|
||||
const x = ((e.clientX - rect.left) / rect.width) * 100;
|
||||
const y = ((e.clientY - rect.top) / rect.height) * 100;
|
||||
|
||||
// Check if any hotspot was clicked
|
||||
const clickedHotspot = hotspots.find(h => {
|
||||
const distance = Math.sqrt(Math.pow(x - h.x, 2) + Math.pow(y - h.y, 2));
|
||||
return distance <= h.radius;
|
||||
});
|
||||
|
||||
if (clickedHotspot) {
|
||||
if (!found.includes(clickedHotspot.id)) {
|
||||
const newFound = [...found, clickedHotspot.id];
|
||||
setFound(newFound);
|
||||
|
||||
if (newFound.length === hotspots.length) {
|
||||
setStatus("success");
|
||||
onComplete(1.0);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Mistake
|
||||
const newMistake = { x, y };
|
||||
setMistakes(prev => [...prev.slice(-2), newMistake]);
|
||||
setTimeout(() => {
|
||||
setMistakes(prev => prev.filter(m => m !== newMistake));
|
||||
}, 1000);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6 animate-in fade-in zoom-in duration-700">
|
||||
<div className="glass-card p-6 border-indigo-500/20 bg-indigo-500/5">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-3 rounded-2xl bg-amber-400 text-black shadow-lg shadow-amber-400/20">
|
||||
<Search size={24} strokeWidth={3} />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-xl font-black tracking-tight text-white">{title}</h2>
|
||||
<p className="text-xs text-indigo-300 font-bold uppercase tracking-widest">{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-4 py-2 rounded-full bg-white/5 border border-white/10 text-xs font-black">
|
||||
{found.length} / {hotspots.length} FOUND
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
ref={containerRef}
|
||||
onClick={handleClick}
|
||||
className="relative aspect-video rounded-3xl overflow-hidden border-4 border-white/10 bg-black cursor-crosshair group select-none shadow-2xl"
|
||||
>
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt={title}
|
||||
className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-[1.02]"
|
||||
/>
|
||||
|
||||
{/* Overlay found hotspots */}
|
||||
{hotspots.map(h => (
|
||||
found.includes(h.id) && (
|
||||
<div
|
||||
key={h.id}
|
||||
className="absolute bg-green-500/30 border-2 border-green-400 rounded-full flex items-center justify-center animate-in zoom-in duration-300 pointer-events-none"
|
||||
style={{
|
||||
left: `${h.x}%`,
|
||||
top: `${h.y}%`,
|
||||
width: `${h.radius * 2}%`,
|
||||
height: `${h.radius * 2 * (16 / 9)}%`, // Basic aspect ratio compensation
|
||||
transform: 'translate(-50%, -50%)'
|
||||
}}
|
||||
>
|
||||
<div className="bg-green-500 rounded-full p-1 shadow-lg text-white">
|
||||
<CheckCircle size={16} strokeWidth={3} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
))}
|
||||
|
||||
{/* Mistake indicators */}
|
||||
{mistakes.map((m, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="absolute text-red-500 animate-out fade-out duration-1000 pointer-events-none"
|
||||
style={{ left: `${m.x}%`, top: `${m.y}%`, transform: 'translate(-50%, -50%)' }}
|
||||
>
|
||||
<XCircle size={32} strokeWidth={3} />
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Success Message */}
|
||||
{status === "success" && (
|
||||
<div className="absolute inset-0 bg-indigo-600/80 backdrop-blur-sm flex flex-col items-center justify-center animate-in fade-in duration-500 z-20">
|
||||
<div className="w-24 h-24 bg-white rounded-full flex items-center justify-center mb-6 shadow-2xl animate-bounce">
|
||||
<CheckCircle className="text-indigo-600" size={56} strokeWidth={3} />
|
||||
</div>
|
||||
<h3 className="text-4xl font-black text-white tracking-tighter mb-2">AMAZING!</h3>
|
||||
<p className="text-indigo-100 font-bold uppercase tracking-[0.3em]">You found them all!</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Target List */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{hotspots.map(h => (
|
||||
<div
|
||||
key={h.id}
|
||||
className={`px-4 py-2 rounded-xl text-xs font-black tracking-widest uppercase transition-all flex items-center gap-2 ${found.includes(h.id)
|
||||
? "bg-green-500 text-white translate-y-[-2px] shadow-lg shadow-green-500/20"
|
||||
: "bg-white/5 text-gray-500 border border-white/5"
|
||||
}`}
|
||||
>
|
||||
{found.includes(h.id) ? <CheckCircle size={14} /> : <div className="w-1 h-1 rounded-full bg-current" />}
|
||||
{h.label}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { Play, Lock, AlertCircle } from "lucide-react";
|
||||
import { lmsApi } from "@/lib/api";
|
||||
|
||||
interface MediaPlayerProps {
|
||||
id: string;
|
||||
@@ -44,16 +45,35 @@ export default function MediaPlayer({ id, lessonId, title, url, media_type, conf
|
||||
const isLocalFile = url.startsWith('/uploads') || url.startsWith('http://localhost:3001/assets') || url.includes('/assets/');
|
||||
|
||||
useEffect(() => {
|
||||
if (maxPlays > 0 && playCount >= maxPlays && !hasStarted) {
|
||||
setLocked(true);
|
||||
let interval: NodeJS.Timeout;
|
||||
if (hasStarted && isLocalFile && lessonId) {
|
||||
// Heartbeat every 5 seconds
|
||||
interval = setInterval(async () => {
|
||||
const video = document.querySelector('video');
|
||||
if (video && !video.paused) {
|
||||
await lmsApi.recordInteraction(lessonId, {
|
||||
video_timestamp: video.currentTime,
|
||||
event_type: 'heartbeat',
|
||||
metadata: { block_id: id }
|
||||
}).catch(console.error);
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
}, [playCount, maxPlays, hasStarted]);
|
||||
return () => clearInterval(interval);
|
||||
}, [hasStarted, isLocalFile, lessonId, id]);
|
||||
|
||||
const handlePlay = () => {
|
||||
const handlePlay = async () => {
|
||||
if (locked) return;
|
||||
if (!hasStarted) {
|
||||
setPlayCount(prev => prev + 1);
|
||||
setHasStarted(true);
|
||||
if (lessonId) {
|
||||
await lmsApi.recordInteraction(lessonId, {
|
||||
video_timestamp: 0,
|
||||
event_type: 'start',
|
||||
metadata: { block_id: id }
|
||||
}).catch(console.error);
|
||||
}
|
||||
if (onPlay) onPlay();
|
||||
}
|
||||
};
|
||||
|
||||
@@ -0,0 +1,183 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import { Sparkles, HelpCircle, CheckCircle2, RotateCcw } from "lucide-react";
|
||||
|
||||
interface MemoryCard {
|
||||
id: number;
|
||||
content: string;
|
||||
pairId: string;
|
||||
isFlipped: boolean;
|
||||
isMatched: boolean;
|
||||
}
|
||||
|
||||
interface MemoryPlayerProps {
|
||||
title: string;
|
||||
pairs: { id: string, content: string }[];
|
||||
onComplete: (score: number) => void;
|
||||
}
|
||||
|
||||
export default function MemoryPlayer({
|
||||
title,
|
||||
pairs: initialPairs,
|
||||
onComplete
|
||||
}: MemoryPlayerProps) {
|
||||
const [cards, setCards] = useState<MemoryCard[]>([]);
|
||||
const [flipped, setFlipped] = useState<number[]>([]);
|
||||
const [moves, setMoves] = useState(0);
|
||||
const [status, setStatus] = useState<"playing" | "success">("playing");
|
||||
|
||||
const initializeGame = useCallback(() => {
|
||||
const gameCards: MemoryCard[] = [];
|
||||
initialPairs.forEach((pair, idx) => {
|
||||
// Add two of each
|
||||
gameCards.push({ id: idx * 2, content: pair.content, pairId: pair.id, isFlipped: false, isMatched: false });
|
||||
gameCards.push({ id: idx * 2 + 1, content: pair.content, pairId: pair.id, isFlipped: false, isMatched: false });
|
||||
});
|
||||
|
||||
// Shuffle
|
||||
setCards(gameCards.sort(() => Math.random() - 0.5));
|
||||
setFlipped([]);
|
||||
setMoves(0);
|
||||
setStatus("playing");
|
||||
}, [initialPairs]);
|
||||
|
||||
useEffect(() => {
|
||||
initializeGame();
|
||||
}, [initializeGame]);
|
||||
|
||||
const handleFlip = (id: number) => {
|
||||
if (flipped.length === 2 || status === "success") return;
|
||||
|
||||
const cardIndex = cards.findIndex(c => c.id === id);
|
||||
if (cards[cardIndex].isMatched || cards[cardIndex].isFlipped) return;
|
||||
|
||||
const updatedCards = [...cards];
|
||||
updatedCards[cardIndex].isFlipped = true;
|
||||
setCards(updatedCards);
|
||||
|
||||
const newFlipped = [...flipped, id];
|
||||
setFlipped(newFlipped);
|
||||
|
||||
if (newFlipped.length === 2) {
|
||||
setMoves(m => m + 1);
|
||||
checkMatch(newFlipped);
|
||||
}
|
||||
};
|
||||
|
||||
const checkMatch = (currentFlipped: number[]) => {
|
||||
const [id1, id2] = currentFlipped;
|
||||
const card1 = cards.find(c => c.id === id1)!;
|
||||
const card2 = cards.find(c => c.id === id2)!;
|
||||
|
||||
if (card1.pairId === card2.pairId) {
|
||||
// Match found
|
||||
setTimeout(() => {
|
||||
const updatedCards = cards.map(c =>
|
||||
(c.id === id1 || c.id === id2) ? { ...c, isMatched: true } : c
|
||||
);
|
||||
setCards(updatedCards);
|
||||
setFlipped([]);
|
||||
|
||||
if (updatedCards.every(c => c.isMatched)) {
|
||||
setStatus("success");
|
||||
onComplete(1.0);
|
||||
}
|
||||
}, 500);
|
||||
} else {
|
||||
// No match
|
||||
setTimeout(() => {
|
||||
const updatedCards = cards.map(c =>
|
||||
(c.id === id1 || c.id === id2) ? { ...c, isFlipped: false } : c
|
||||
);
|
||||
setCards(updatedCards);
|
||||
setFlipped([]);
|
||||
}, 1000);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-8 animate-in fade-in slide-in-from-bottom-6 duration-1000">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-indigo-500 to-purple-500 flex items-center justify-center text-white shadow-xl shadow-indigo-500/20">
|
||||
<Sparkles size={28} className="animate-pulse" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-2xl font-black tracking-tight text-white">{title}</h2>
|
||||
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-indigo-400">
|
||||
<span>Brain Training</span>
|
||||
<span className="w-1 h-1 rounded-full bg-indigo-800" />
|
||||
<span>Level: Beginner</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
<div className="px-5 py-3 rounded-2xl bg-white/5 border border-white/10 text-center">
|
||||
<div className="text-[10px] font-black uppercase tracking-widest text-gray-500">Moves</div>
|
||||
<div className="text-xl font-black text-white">{moves}</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={initializeGame}
|
||||
className="p-4 rounded-2xl bg-white/5 hover:bg-white/10 border border-white/10 transition-all active:scale-90"
|
||||
title="Restart"
|
||||
>
|
||||
<RotateCcw size={20} className="text-gray-400" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
|
||||
{cards.map((card) => (
|
||||
<div
|
||||
key={card.id}
|
||||
onClick={() => handleFlip(card.id)}
|
||||
className="perspective-1000 h-40 cursor-pointer group"
|
||||
>
|
||||
<div className={`relative w-full h-full transition-all duration-500 transform-style-3d ${(card.isFlipped || card.isMatched) ? "rotate-y-180" : ""
|
||||
}`}>
|
||||
{/* Card Front (Hidden) */}
|
||||
<div className="absolute inset-0 backface-hidden flex items-center justify-center rounded-2xl bg-[#1a1c21] border-2 border-white/5 hover:border-indigo-500/50 transition-colors shadow-lg">
|
||||
<HelpCircle size={40} className="text-white/10 group-hover:text-indigo-500/30 transition-colors" />
|
||||
</div>
|
||||
|
||||
{/* Card Back (Content) */}
|
||||
<div className={`absolute inset-0 backface-hidden rotate-y-180 flex items-center justify-center rounded-2xl p-4 text-center border-2 shadow-2xl ${card.isMatched
|
||||
? "bg-green-500/10 border-green-500/40 text-green-400"
|
||||
: "bg-indigo-600 border-indigo-400 text-white"
|
||||
}`}>
|
||||
<div className="text-center font-black text-sm tracking-tight leading-tight">
|
||||
{card.content}
|
||||
{card.isMatched && (
|
||||
<div className="absolute top-2 right-2">
|
||||
<CheckCircle2 size={16} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{status === "success" && (
|
||||
<div className="p-8 rounded-3xl bg-green-500/10 border border-green-500/20 flex flex-col items-center text-center animate-in zoom-in duration-500">
|
||||
<div className="w-16 h-16 rounded-full bg-green-500 text-white flex items-center justify-center mb-4 shadow-lg shadow-green-500/20">
|
||||
<CheckCircle2 size={32} strokeWidth={3} />
|
||||
</div>
|
||||
<h3 className="text-2xl font-black text-white mb-1">BRAVO!</h3>
|
||||
<p className="text-green-500/80 font-bold uppercase tracking-widest text-xs">
|
||||
Finished in {moves} moves
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<style jsx>{`
|
||||
.perspective-1000 { perspective: 1000px; }
|
||||
.transform-style-3d { transform-style: preserve-3d; }
|
||||
.backface-hidden { backface-visibility: hidden; }
|
||||
.rotate-y-180 { transform: rotateY(180deg); }
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
"use client";
|
||||
|
||||
import React, { createContext, useContext, useState, useEffect } from 'react';
|
||||
import en from '../lib/locales/en.json';
|
||||
import es from '../lib/locales/es.json';
|
||||
import pt from '../lib/locales/pt.json';
|
||||
|
||||
const translations: Record<string, any> = { en, es, pt };
|
||||
|
||||
interface I18nContextType {
|
||||
language: string;
|
||||
setLanguage: (lang: string) => void;
|
||||
t: (path: string) => string;
|
||||
}
|
||||
|
||||
const I18nContext = createContext<I18nContextType | undefined>(undefined);
|
||||
|
||||
export function I18nProvider({ children }: { children: React.ReactNode }) {
|
||||
const [language, setLanguageState] = useState('es'); // Default to Spanish for Experience as it's more localized by default
|
||||
|
||||
useEffect(() => {
|
||||
const savedLang = localStorage.getItem('experience_language');
|
||||
if (savedLang) {
|
||||
setLanguageState(savedLang);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const setLanguage = (lang: string) => {
|
||||
setLanguageState(lang);
|
||||
localStorage.setItem('experience_language', lang);
|
||||
};
|
||||
|
||||
const t = (path: string): string => {
|
||||
const keys = path.split('.');
|
||||
let result = translations[language] || translations['es'];
|
||||
|
||||
for (const key of keys) {
|
||||
if (result[key]) {
|
||||
result = result[key];
|
||||
} else {
|
||||
return path;
|
||||
}
|
||||
}
|
||||
|
||||
return typeof result === 'string' ? result : path;
|
||||
};
|
||||
|
||||
return (
|
||||
<I18nContext.Provider value={{ language, setLanguage, t }}>
|
||||
{children}
|
||||
</I18nContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useTranslation() {
|
||||
const context = useContext(I18nContext);
|
||||
if (context === undefined) {
|
||||
throw new Error('useTranslation must be used within an I18nProvider');
|
||||
}
|
||||
return context;
|
||||
}
|
||||
@@ -32,8 +32,8 @@ export interface QuizQuestion {
|
||||
|
||||
export interface Block {
|
||||
id: string;
|
||||
type: 'description' | 'media' | 'quiz' | 'fill-in-the-blanks' | 'matching' | 'ordering' | 'short-answer';
|
||||
title?: string;
|
||||
type: 'description' | 'media' | 'quiz' | 'fill-in-the-blanks' | 'matching' | 'ordering' | 'short-answer' | 'code' | 'hotspot' | 'memory-match' | 'document';
|
||||
title: string;
|
||||
content?: string;
|
||||
url?: string;
|
||||
media_type?: 'video' | 'audio';
|
||||
@@ -45,6 +45,9 @@ export interface Block {
|
||||
items?: string[];
|
||||
prompt?: string;
|
||||
correctAnswers?: string[];
|
||||
instructions?: string;
|
||||
initialCode?: string;
|
||||
metadata?: any;
|
||||
}
|
||||
|
||||
export interface Lesson {
|
||||
@@ -104,6 +107,16 @@ export interface User {
|
||||
language?: string;
|
||||
}
|
||||
|
||||
export interface Notification {
|
||||
id: string;
|
||||
title: string;
|
||||
message: string;
|
||||
notification_type: string;
|
||||
is_read: boolean;
|
||||
link_url?: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export interface AuthResponse {
|
||||
user: User;
|
||||
token: string;
|
||||
@@ -242,5 +255,26 @@ export const lmsApi = {
|
||||
},
|
||||
body: formData
|
||||
}).then(res => res.json());
|
||||
},
|
||||
|
||||
async recordInteraction(lessonId: string, payload: { video_timestamp?: number, event_type: string, metadata?: any }): Promise<void> {
|
||||
return apiFetch(`/lessons/${lessonId}/interactions`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
},
|
||||
|
||||
async getHeatmap(lessonId: string): Promise<{ second: number, count: number }[]> {
|
||||
return apiFetch(`/lessons/${lessonId}/heatmap`);
|
||||
},
|
||||
|
||||
async getNotifications(): Promise<Notification[]> {
|
||||
return apiFetch('/notifications');
|
||||
},
|
||||
|
||||
async markNotificationAsRead(id: string): Promise<void> {
|
||||
return apiFetch(`/notifications/${id}/read`, {
|
||||
method: 'POST'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"common": {
|
||||
"loading": "Loading...",
|
||||
"back": "Back",
|
||||
"next": "Next",
|
||||
"finish": "Finish",
|
||||
"error": "Error",
|
||||
"retry": "Retry"
|
||||
},
|
||||
"nav": {
|
||||
"catalog": "Catalog",
|
||||
"myLearning": "My Learning",
|
||||
"profile": "Profile",
|
||||
"signOut": "Sign Out"
|
||||
},
|
||||
"course": {
|
||||
"modules": "Modules",
|
||||
"lessons": "Lessons",
|
||||
"progress": "Progress",
|
||||
"calendar": "Timeline",
|
||||
"start": "Start",
|
||||
"continue": "Continue"
|
||||
},
|
||||
"lesson": {
|
||||
"summary": "AI Summary",
|
||||
"transcription": "Transcription",
|
||||
"complete": "Mark as Completed",
|
||||
"nextLesson": "Next Lesson"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"common": {
|
||||
"loading": "Cargando...",
|
||||
"back": "Volver",
|
||||
"next": "Siguiente",
|
||||
"finish": "Finalizar",
|
||||
"error": "Error",
|
||||
"retry": "Reintentar"
|
||||
},
|
||||
"nav": {
|
||||
"catalog": "Catálogo",
|
||||
"myLearning": "Mi Aprendizaje",
|
||||
"profile": "Perfil",
|
||||
"signOut": "Cerrar Sesión"
|
||||
},
|
||||
"course": {
|
||||
"modules": "Módulos",
|
||||
"lessons": "Lecciones",
|
||||
"progress": "Progreso",
|
||||
"calendar": "Cronología",
|
||||
"start": "Comenzar",
|
||||
"continue": "Continuar"
|
||||
},
|
||||
"lesson": {
|
||||
"summary": "Resumen AI",
|
||||
"transcription": "Transcripción",
|
||||
"complete": "Marcar como Completado",
|
||||
"nextLesson": "Siguiente Lección"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"common": {
|
||||
"loading": "Carregando...",
|
||||
"back": "Voltar",
|
||||
"next": "Próximo",
|
||||
"finish": "Finalizar",
|
||||
"error": "Erro",
|
||||
"retry": "Repetir"
|
||||
},
|
||||
"nav": {
|
||||
"catalog": "Catálogo",
|
||||
"myLearning": "Meu Aprendizado",
|
||||
"profile": "Perfil",
|
||||
"signOut": "Sair"
|
||||
},
|
||||
"course": {
|
||||
"modules": "Módulos",
|
||||
"lessons": "Lições",
|
||||
"progress": "Progresso",
|
||||
"calendar": "Cronologia",
|
||||
"start": "Começar",
|
||||
"continue": "Continuar"
|
||||
},
|
||||
"lesson": {
|
||||
"summary": "Resumo IA",
|
||||
"transcription": "Transcrição",
|
||||
"complete": "Marcar como Concluído",
|
||||
"nextLesson": "Próxima Lição"
|
||||
}
|
||||
}
|
||||
Generated
+13
-1
@@ -546,6 +546,7 @@
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.27.tgz",
|
||||
"integrity": "sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==",
|
||||
"devOptional": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@types/prop-types": "*",
|
||||
"csstype": "^3.2.2"
|
||||
@@ -607,6 +608,7 @@
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.50.0.tgz",
|
||||
"integrity": "sha512-6/cmF2piao+f6wSxUsJLZjck7OQsYyRtcOZS02k7XINSNlz93v6emM8WutDQSXnroG2xwYlEVHJI+cPA7CPM3Q==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@typescript-eslint/scope-manager": "8.50.0",
|
||||
"@typescript-eslint/types": "8.50.0",
|
||||
@@ -1081,6 +1083,7 @@
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
|
||||
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"acorn": "bin/acorn"
|
||||
},
|
||||
@@ -2010,6 +2013,7 @@
|
||||
"integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
|
||||
"deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@eslint-community/eslint-utils": "^4.2.0",
|
||||
"@eslint-community/regexpp": "^4.6.1",
|
||||
@@ -2172,6 +2176,7 @@
|
||||
"resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz",
|
||||
"integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@rtsao/scc": "^1.1.0",
|
||||
"array-includes": "^3.1.9",
|
||||
@@ -3455,6 +3460,7 @@
|
||||
"resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
|
||||
"integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"jiti": "bin/jiti.js"
|
||||
}
|
||||
@@ -4161,6 +4167,7 @@
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"nanoid": "^3.3.11",
|
||||
"picocolors": "^1.1.1",
|
||||
@@ -4356,6 +4363,7 @@
|
||||
"version": "18.3.1",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
|
||||
"integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0"
|
||||
},
|
||||
@@ -4367,6 +4375,7 @@
|
||||
"version": "18.3.1",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
|
||||
"integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"scheduler": "^0.23.2"
|
||||
@@ -4427,7 +4436,8 @@
|
||||
"node_modules/redux": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
|
||||
"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="
|
||||
"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/reflect.getprototypeof": {
|
||||
"version": "1.0.10",
|
||||
@@ -5239,6 +5249,7 @@
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
|
||||
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
@@ -5396,6 +5407,7 @@
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
|
||||
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
"tsserver": "bin/tsserver"
|
||||
|
||||
@@ -1,137 +1,181 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { cmsApi, AuditLog } from '@/lib/api';
|
||||
import { useAuth } from '@/context/AuthContext';
|
||||
import { ArrowLeft, Clock, ShieldAlert, X } from 'lucide-react';
|
||||
import React, { useState, useEffect } from "react";
|
||||
import {
|
||||
History,
|
||||
Search,
|
||||
User as UserIcon,
|
||||
Calendar,
|
||||
ArrowRight,
|
||||
AlertCircle
|
||||
} from "lucide-react";
|
||||
|
||||
// We'll define a local type or import if available
|
||||
interface AuditLog {
|
||||
id: string;
|
||||
organization_id?: string;
|
||||
user_id?: string;
|
||||
action: string;
|
||||
entity_type: string;
|
||||
entity_id: string;
|
||||
event_type: string;
|
||||
changes?: Record<string, unknown>;
|
||||
created_at: string;
|
||||
user_full_name?: string;
|
||||
}
|
||||
|
||||
export default function AuditLogsPage() {
|
||||
const router = useRouter();
|
||||
const { user, loading: authLoading } = useAuth();
|
||||
const [logs, setLogs] = useState<AuditLog[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [selectedLog, setSelectedLog] = useState<AuditLog | null>(null);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [entityFilter, setEntityFilter] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
if (!authLoading) {
|
||||
if (!user || user.role !== 'admin') {
|
||||
router.push('/');
|
||||
return;
|
||||
const fetchLogs = async () => {
|
||||
try {
|
||||
// Mocking API call for now since we haven't implemented the specific endpoint
|
||||
// In a real scenario: const data = await cmsApi.getAuditLogs();
|
||||
// For demo, we'll use a few mock entries
|
||||
const mockLogs: AuditLog[] = [
|
||||
{
|
||||
id: "1",
|
||||
action: "COURSE_CREATED",
|
||||
entity_type: "Course",
|
||||
entity_id: "c1",
|
||||
event_type: "CREATE",
|
||||
user_full_name: "Juan Perez",
|
||||
created_at: new Date().toISOString(),
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
action: "USER_ROLE_UPDATED",
|
||||
entity_type: "User",
|
||||
entity_id: "u1",
|
||||
event_type: "UPDATE",
|
||||
user_full_name: "System Admin",
|
||||
created_at: new Date(Date.now() - 3600000).toISOString(),
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
action: "AI_COURSE_GENERATED",
|
||||
entity_type: "Course",
|
||||
entity_id: "c2",
|
||||
event_type: "AI_GEN",
|
||||
user_full_name: "Juan Perez",
|
||||
created_at: new Date(Date.now() - 7200000).toISOString(),
|
||||
}
|
||||
];
|
||||
setLogs(mockLogs);
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch audit logs", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
loadLogs();
|
||||
}
|
||||
}, [user, authLoading, router]);
|
||||
};
|
||||
fetchLogs();
|
||||
}, []);
|
||||
|
||||
const loadLogs = async () => {
|
||||
try {
|
||||
const data = await cmsApi.getAuditLogs();
|
||||
setLogs(data);
|
||||
} catch (err) {
|
||||
console.error("Failed to load audit logs", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (authLoading || loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-950 flex items-center justify-center">
|
||||
<div className="w-12 h-12 border-4 border-blue-500/20 border-t-blue-500 rounded-full animate-spin"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const filteredLogs = logs.filter(log =>
|
||||
(log.action.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
log.user_full_name?.toLowerCase().includes(searchTerm.toLowerCase())) &&
|
||||
(entityFilter === "" || log.entity_type === entityFilter)
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-950 text-white font-sans">
|
||||
{/* Header */}
|
||||
<header className="sticky top-0 z-50 bg-gray-950/80 backdrop-blur-xl border-b border-white/5 py-4 px-8">
|
||||
<div className="max-w-7xl mx-auto flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<button onClick={() => router.push('/')} className="p-2 hover:bg-white/5 rounded-full transition-colors">
|
||||
<ArrowLeft className="w-5 h-5 text-gray-400" />
|
||||
</button>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-purple-500/10 flex items-center justify-center text-purple-400">
|
||||
<ShieldAlert size={20} />
|
||||
</div>
|
||||
<h1 className="text-xl font-bold">System Audit Logs</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div className="space-y-8 animate-in fade-in duration-500">
|
||||
<div>
|
||||
<h1 className="text-3xl font-black tracking-tight flex items-center gap-3">
|
||||
<History className="text-indigo-400" size={32} />
|
||||
Audit Logs
|
||||
</h1>
|
||||
<p className="text-gray-400 mt-1">Track every action across the platform.</p>
|
||||
</div>
|
||||
|
||||
<main className="max-w-7xl mx-auto px-8 py-12">
|
||||
<div className="bg-white/5 border border-white/10 rounded-3xl overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left text-sm text-gray-400">
|
||||
<thead className="bg-white/5 uppercase font-bold text-xs tracking-wider text-gray-500">
|
||||
<tr>
|
||||
<th className="px-6 py-4">User</th>
|
||||
<th className="px-6 py-4">Action</th>
|
||||
<th className="px-6 py-4">Entity</th>
|
||||
<th className="px-6 py-4">Date</th>
|
||||
<th className="px-6 py-4 text-right">Details</th>
|
||||
{/* Filters */}
|
||||
<div className="flex flex-col md:flex-row gap-4">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search by action or user..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full bg-black/40 border border-white/10 rounded-xl pl-10 pr-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 transition-all"
|
||||
/>
|
||||
</div>
|
||||
<select
|
||||
value={entityFilter}
|
||||
onChange={(e) => setEntityFilter(e.target.value)}
|
||||
className="bg-black/40 border border-white/10 rounded-xl px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 transition-all text-sm"
|
||||
>
|
||||
<option value="">All Entities</option>
|
||||
<option value="Course">Course</option>
|
||||
<option value="User">User</option>
|
||||
<option value="Organization">Organization</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Log List */}
|
||||
<div className="glass-card rounded-3xl border-white/5 overflow-hidden">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead className="bg-white/[0.03] border-b border-white/5">
|
||||
<tr>
|
||||
<th className="px-6 py-4 text-[10px] font-black uppercase tracking-widest text-gray-500">Timestamp</th>
|
||||
<th className="px-6 py-4 text-[10px] font-black uppercase tracking-widest text-gray-500">User</th>
|
||||
<th className="px-6 py-4 text-[10px] font-black uppercase tracking-widest text-gray-500">Action</th>
|
||||
<th className="px-6 py-4 text-[10px] font-black uppercase tracking-widest text-gray-500">Entity</th>
|
||||
<th className="px-6 py-4 text-[10px] font-black uppercase tracking-widest text-gray-500 text-right">Details</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-white/5">
|
||||
{loading ? (
|
||||
[1, 2, 3].map(i => (
|
||||
<tr key={i} className="animate-pulse">
|
||||
<td colSpan={5} className="px-6 py-8"><div className="h-4 bg-white/5 rounded-full w-full" /></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-white/5">
|
||||
{logs.map((log) => (
|
||||
<tr key={log.id} className="hover:bg-white/[0.02] transition-colors">
|
||||
<td className="px-6 py-4 font-medium text-white">
|
||||
{log.user_full_name || 'System / Unknown'}
|
||||
<div className="text-xs text-gray-600 font-mono mt-0.5">{log.user_id.slice(0, 8)}...</div>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium capitalize
|
||||
${log.action === 'CREATE' ? 'bg-green-500/10 text-green-400' :
|
||||
log.action === 'UPDATE' ? 'bg-blue-500/10 text-blue-400' :
|
||||
log.action === 'DELETE' ? 'bg-red-500/10 text-red-400' :
|
||||
'bg-gray-500/10 text-gray-400'}`}>
|
||||
{log.action}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="text-gray-300">{log.entity_type}</div>
|
||||
<div className="text-xs text-gray-600 font-mono mt-0.5">{log.entity_id}</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 flex items-center gap-2">
|
||||
<Clock size={14} />
|
||||
{new Date(log.created_at).toLocaleString()}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<button
|
||||
onClick={() => setSelectedLog(log)}
|
||||
className="text-blue-400 hover:text-blue-300 font-bold text-xs uppercase tracking-wider"
|
||||
>
|
||||
View Changes
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
))
|
||||
) : filteredLogs.map((log) => (
|
||||
<tr key={log.id} className="hover:bg-white/[0.01] transition-colors group">
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="flex items-center gap-2 text-xs font-bold text-gray-400">
|
||||
<Calendar size={12} />
|
||||
{new Date(log.created_at).toLocaleString("en-US", { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit" })}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-6 h-6 rounded-full bg-indigo-500/10 flex items-center justify-center text-indigo-400">
|
||||
<UserIcon size={12} />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-gray-200">{log.user_full_name}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className="text-xs font-black uppercase tracking-widest px-2 py-1 rounded-md bg-white/5 text-gray-300">
|
||||
{log.action}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="text-xs font-bold text-gray-400">
|
||||
{log.entity_type} <span className="opacity-30">#</span>{log.entity_id.slice(0, 8)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<button className="p-2 hover:bg-white/5 rounded-lg text-gray-500 hover:text-white transition-all">
|
||||
<ArrowRight size={16} />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{!loading && filteredLogs.length === 0 && (
|
||||
<div className="p-20 text-center flex flex-col items-center gap-4">
|
||||
<AlertCircle className="text-gray-600" size={48} />
|
||||
<p className="text-gray-500 font-bold uppercase tracking-widest">No activities found</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Changes Detail Modal */}
|
||||
{selectedLog && (
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm">
|
||||
<div className="bg-gray-900 border border-white/10 w-full max-w-2xl rounded-2xl shadow-2xl overflow-hidden flex flex-col max-h-[90vh]">
|
||||
<div className="flex items-center justify-between p-6 border-b border-white/5 bg-gray-900">
|
||||
<h3 className="text-lg font-bold text-white">Change Details</h3>
|
||||
<button onClick={() => setSelectedLog(null)} className="text-gray-500 hover:text-white transition-colors">
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-6 overflow-y-auto font-mono text-xs text-gray-300 bg-black/30">
|
||||
<pre className="whitespace-pre-wrap">
|
||||
{JSON.stringify(selectedLog.changes, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import {
|
||||
LayoutDashboard,
|
||||
Building2,
|
||||
Users,
|
||||
ClipboardList,
|
||||
ShieldCheck,
|
||||
ArrowLeft,
|
||||
Activity
|
||||
} from "lucide-react";
|
||||
|
||||
export default function AdminLayout({ children }: { children: React.ReactNode }) {
|
||||
const pathname = usePathname();
|
||||
|
||||
const menuItems = [
|
||||
{ icon: LayoutDashboard, label: "Dashboard", href: "/admin" },
|
||||
{ icon: Building2, label: "Organizations", href: "/admin/organizations" },
|
||||
{ icon: Users, label: "Users", href: "/admin/users" },
|
||||
{ icon: ClipboardList, label: "Audit Logs", href: "/admin/audit" },
|
||||
{ icon: Activity, label: "System Tasks", href: "/admin/tasks" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen bg-[#0f1115] text-white">
|
||||
{/* Sidebar */}
|
||||
<aside className="w-64 border-r border-white/5 bg-black/20 backdrop-blur-xl p-6 flex flex-col gap-8">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-indigo-600 flex items-center justify-center shadow-lg shadow-indigo-500/20">
|
||||
<ShieldCheck className="text-white" size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="font-black text-xs uppercase tracking-widest text-gray-500 leading-tight">Control Panel</h2>
|
||||
<h1 className="font-black text-lg tracking-tighter">SUPER ADMIN</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 space-y-2">
|
||||
{menuItems.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={`flex items-center gap-3 px-4 py-3 rounded-xl font-bold text-sm transition-all ${pathname === item.href
|
||||
? "bg-indigo-600/10 text-indigo-400 border border-indigo-500/20 shadow-glow-sm"
|
||||
: "text-gray-500 hover:text-white hover:bg-white/5 border border-transparent"
|
||||
}`}
|
||||
>
|
||||
<item.icon size={18} />
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="pt-6 border-t border-white/5">
|
||||
<Link
|
||||
href="/"
|
||||
className="flex items-center gap-2 text-xs font-black uppercase tracking-widest text-gray-600 hover:text-white transition-colors"
|
||||
>
|
||||
<ArrowLeft size={14} />
|
||||
Back to Studio
|
||||
</Link>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="flex-1 p-12 overflow-y-auto">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { cmsApi } from "@/lib/api";
|
||||
import {
|
||||
Building2,
|
||||
Users,
|
||||
BookOpen,
|
||||
Zap,
|
||||
Server,
|
||||
Clock,
|
||||
ShieldAlert
|
||||
} from "lucide-react";
|
||||
|
||||
export default function AdminDashboard() {
|
||||
const [stats, setStats] = useState({
|
||||
orgs: 0,
|
||||
users: 0,
|
||||
courses: 0
|
||||
});
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchStats = async () => {
|
||||
try {
|
||||
// In a real app we'd have a specific stats endpoint,
|
||||
// but for now we'll calculate from lists
|
||||
const [orgs, users] = await Promise.all([
|
||||
cmsApi.getOrganizations(),
|
||||
cmsApi.getAllUsers()
|
||||
]);
|
||||
|
||||
setStats({
|
||||
orgs: orgs.length,
|
||||
users: users.length,
|
||||
courses: 0 // We'd need a global courses count
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("Failed to load admin stats", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchStats();
|
||||
}, []);
|
||||
|
||||
const cards = [
|
||||
{
|
||||
label: "Organizations",
|
||||
value: stats.orgs,
|
||||
icon: Building2,
|
||||
color: "text-blue-400",
|
||||
bg: "bg-blue-500/10",
|
||||
desc: "Active institutional tenants"
|
||||
},
|
||||
{
|
||||
label: "Total Users",
|
||||
value: stats.users,
|
||||
icon: Users,
|
||||
color: "text-purple-400",
|
||||
bg: "bg-purple-500/10",
|
||||
desc: "Registered globally"
|
||||
},
|
||||
{
|
||||
label: "Global Courses",
|
||||
value: stats.courses,
|
||||
icon: BookOpen,
|
||||
color: "text-green-400",
|
||||
bg: "bg-green-500/10",
|
||||
desc: "Managed across all orgs"
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-12 animate-in fade-in slide-in-from-bottom-4 duration-700">
|
||||
<div>
|
||||
<h1 className="text-4xl font-black tracking-tight mb-2">System Overview</h1>
|
||||
<p className="text-gray-400">Holistic view of the OpenCCB ecosystem.</p>
|
||||
</div>
|
||||
|
||||
{/* Stat Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{cards.map((card) => (
|
||||
<div key={card.label} className="p-8 rounded-3xl glass-card border-white/5 bg-white/[0.02] flex flex-col gap-4">
|
||||
<div className={`w-12 h-12 rounded-xl ${card.bg} flex items-center justify-center ${card.color}`}>
|
||||
<card.icon size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-500 mb-1">{card.label}</div>
|
||||
<div className="text-4xl font-black">{loading ? "..." : card.value}</div>
|
||||
<p className="text-xs text-gray-500 mt-2">{card.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* System Health */}
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-sm font-black uppercase tracking-widest text-gray-500">Service Status</h2>
|
||||
<div className="flex items-center gap-2 text-green-400 text-xs font-bold">
|
||||
<div className="w-2 h-2 rounded-full bg-green-400 animate-pulse" />
|
||||
All systems operational
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="p-6 rounded-2xl border border-white/5 bg-white/[0.01] flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<Server className="text-blue-400" size={20} />
|
||||
<div>
|
||||
<div className="text-sm font-bold">API Services (CMS/LMS)</div>
|
||||
<div className="text-[10px] text-gray-500 font-bold uppercase tracking-widest">Rust Axum Cluster</div>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-[10px] bg-green-500/10 text-green-400 px-2 py-1 rounded-full font-black uppercase">Online</span>
|
||||
</div>
|
||||
|
||||
<div className="p-6 rounded-2xl border border-white/5 bg-white/[0.01] flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<Zap className="text-amber-400" size={20} />
|
||||
<div>
|
||||
<div className="text-sm font-bold">Local AI Services</div>
|
||||
<div className="text-[10px] text-gray-500 font-bold uppercase tracking-widest">Whisper + Ollama</div>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-[10px] bg-green-500/10 text-green-400 px-2 py-1 rounded-full font-black uppercase">Online</span>
|
||||
</div>
|
||||
|
||||
<div className="p-6 rounded-2xl border border-white/5 bg-white/[0.01] flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<Clock className="text-indigo-400" size={20} />
|
||||
<div>
|
||||
<div className="text-sm font-bold">Background Workers</div>
|
||||
<div className="text-[10px] text-gray-500 font-bold uppercase tracking-widest">Notification Scheduler</div>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-[10px] bg-green-500/10 text-green-400 px-2 py-1 rounded-full font-black uppercase">Running</span>
|
||||
</div>
|
||||
|
||||
<div className="p-6 rounded-2xl border border-white/5 bg-white/[0.01] flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<ShieldAlert className="text-red-400" size={20} />
|
||||
<div>
|
||||
<div className="text-sm font-bold">Security Engine</div>
|
||||
<div className="text-[10px] text-gray-500 font-bold uppercase tracking-widest">JWT & RBAC Middleware</div>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-[10px] bg-green-500/10 text-green-400 px-2 py-1 rounded-full font-black uppercase">Active</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -184,7 +184,7 @@ export default function StudioLoginPage() {
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-2 pl-1">
|
||||
Contact your administrator if you don't know your Organization ID.
|
||||
Contact your administrator if you don't know your Organization ID.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { cmsApi, Course, AdvancedAnalytics } from "@/lib/api";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import {
|
||||
@@ -13,12 +13,18 @@ import {
|
||||
} from "lucide-react";
|
||||
import CourseEditorLayout from "@/components/CourseEditorLayout";
|
||||
|
||||
export default function AdvancedAnalyticsPage() {
|
||||
const { id } = useParams() as { id: string };
|
||||
interface HeatmapPoint {
|
||||
second: number;
|
||||
count: number;
|
||||
}
|
||||
|
||||
export default function AdvancedAnalyticsPage({ params }: { params: { id: string } }) {
|
||||
const { id } = params;
|
||||
const router = useRouter();
|
||||
const { user } = useAuth();
|
||||
const [course, setCourse] = useState<Course | null>(null);
|
||||
const [analytics, setAnalytics] = useState<AdvancedAnalytics | null>(null);
|
||||
const [heatmapData, setHeatmapData] = useState<HeatmapPoint[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
@@ -184,6 +190,79 @@ export default function AdvancedAnalyticsPage() {
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Engagement Heatmap */}
|
||||
<section>
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<h2 className="text-2xl font-black flex items-center gap-3">
|
||||
<TrendingUp size={24} className="text-orange-500" />
|
||||
Engagement Heatmap
|
||||
</h2>
|
||||
<select
|
||||
className="bg-white/5 border border-white/10 rounded-xl px-4 py-2 text-sm font-bold focus:outline-none focus:ring-2 focus:ring-orange-500 transition-all"
|
||||
onChange={(e) => {
|
||||
const lessonId = e.target.value;
|
||||
if (lessonId) {
|
||||
cmsApi.getLessonHeatmap(lessonId).then(setHeatmapData).catch(console.error);
|
||||
} else {
|
||||
setHeatmapData([]);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<option value="">Select a video lesson...</option>
|
||||
{course.modules?.flatMap(m => m.lessons)
|
||||
.filter(l => l.content_type === 'video' || (l.metadata?.blocks || []).some(b => b.type === 'media'))
|
||||
.map(l => (
|
||||
<option key={l.id} value={l.id}>{l.title}</option>
|
||||
))
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{heatmapData.length > 0 ? (
|
||||
<div className="p-8 rounded-3xl border border-white/10 bg-white/[0.02] space-y-8">
|
||||
<p className="text-sm text-gray-500 uppercase font-black tracking-widest">
|
||||
Playback concentration by second (Total Interactions: {heatmapData.reduce((acc: number, p: HeatmapPoint) => acc + Number(p.count), 0)})
|
||||
</p>
|
||||
<div className="flex items-end gap-[2px] h-48 w-full group">
|
||||
{(() => {
|
||||
const counts = heatmapData.map((p: HeatmapPoint) => Number(p.count));
|
||||
const maxCount = Math.max(...counts, 1);
|
||||
const lastSecond = heatmapData[heatmapData.length - 1].second;
|
||||
|
||||
// Fill gaps for a smooth chart
|
||||
const fullHeatmap = Array.from({ length: lastSecond + 1 }, (_, i) => {
|
||||
const point = heatmapData.find((p: HeatmapPoint) => p.second === i);
|
||||
return point ? Number(point.count) : 0;
|
||||
});
|
||||
|
||||
return fullHeatmap.map((count, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex-1 bg-orange-500/20 hover:bg-orange-500 transition-all rounded-t-[1px] relative group/bar"
|
||||
style={{ height: `${(count / maxCount) * 100}%` }}
|
||||
>
|
||||
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-black text-[10px] font-black rounded opacity-0 group-hover/bar:opacity-100 whitespace-nowrap z-10 pointer-events-none">
|
||||
{Math.floor(i / 60)}:{(i % 60).toString().padStart(2, '0')} - {count} views
|
||||
</div>
|
||||
</div>
|
||||
));
|
||||
})()}
|
||||
</div>
|
||||
<div className="flex justify-between text-[10px] font-black text-gray-600 uppercase tracking-widest pt-4 border-t border-white/5">
|
||||
<span>0:00 Start</span>
|
||||
<span>Video Timeline</span>
|
||||
<span>End</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-20 text-center border-2 border-dashed border-white/5 rounded-3xl">
|
||||
<p className="text-gray-600 font-bold uppercase tracking-widest italic">
|
||||
Select a lesson to view its engagement signature
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
</CourseEditorLayout>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,193 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { cmsApi, Course, AdvancedAnalytics, CourseAnalytics } from "@/lib/api";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import {
|
||||
ArrowLeft,
|
||||
Download,
|
||||
Users,
|
||||
CheckCircle,
|
||||
Clock,
|
||||
Filter
|
||||
} from "lucide-react";
|
||||
import CourseEditorLayout from "@/components/CourseEditorLayout";
|
||||
|
||||
export default function ReportsPage() {
|
||||
const { id } = useParams() as { id: string };
|
||||
const router = useRouter();
|
||||
const { user } = useAuth();
|
||||
const [course, setCourse] = useState<Course | null>(null);
|
||||
const [analytics, setAnalytics] = useState<CourseAnalytics | null>(null);
|
||||
const [advanced, setAdvanced] = useState<AdvancedAnalytics | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [filter, setFilter] = useState("all");
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
if (!user) return;
|
||||
try {
|
||||
const [courseData, basicData, advancedData] = await Promise.all([
|
||||
cmsApi.getCourseWithFullOutline(id),
|
||||
cmsApi.getCourseAnalytics(id),
|
||||
cmsApi.getAdvancedAnalytics(id)
|
||||
]);
|
||||
setCourse(courseData);
|
||||
setAnalytics(basicData);
|
||||
setAdvanced(advancedData);
|
||||
} catch (err) {
|
||||
console.error("Failed to load report data", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchData();
|
||||
}, [id, user]);
|
||||
|
||||
const exportToCSV = () => {
|
||||
if (!analytics || !course) return;
|
||||
|
||||
let csvContent = "data:text/csv;charset=utf-8,";
|
||||
csvContent += "Lesson,Students,Avg Score,Type\n";
|
||||
|
||||
analytics.lessons.forEach(l => {
|
||||
csvContent += `"${l.lesson_title}",${l.submission_count},${(l.average_score * 100).toFixed(1)}%\n`;
|
||||
});
|
||||
|
||||
const encodedUri = encodeURI(csvContent);
|
||||
const link = document.createElement("a");
|
||||
link.setAttribute("href", encodedUri);
|
||||
link.setAttribute("download", `report_${course.title.replace(/\s+/g, '_')}.csv`);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
};
|
||||
|
||||
if (loading) return (
|
||||
<div className="min-h-screen bg-gray-900 flex items-center justify-center">
|
||||
<div className="w-12 h-12 border-4 border-blue-500/20 border-t-blue-500 rounded-full animate-spin"></div>
|
||||
</div>
|
||||
);
|
||||
|
||||
if (!course || !analytics) return <div className="p-20 text-center text-red-400">Error caricamento dati.</div>;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0f1115] text-white p-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="flex items-center justify-between mb-12">
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={() => router.push(`/courses/${id}/analytics`)}
|
||||
className="p-2 hover:bg-white/10 rounded-full transition-colors"
|
||||
>
|
||||
<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">
|
||||
Custom Report Builder
|
||||
</h1>
|
||||
<p className="text-gray-400 mt-1">Generate and export engagement data for {course.title}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={exportToCSV}
|
||||
className="btn-premium px-8 flex items-center gap-2"
|
||||
>
|
||||
<Download size={18} />
|
||||
Export to CSV
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<CourseEditorLayout activeTab="analytics">
|
||||
<div className="p-8 space-y-12">
|
||||
{/* Filters */}
|
||||
<div className="flex items-center gap-4 bg-white/5 p-4 rounded-2xl border border-white/5">
|
||||
<Filter size={18} className="text-gray-500 ml-2" />
|
||||
<span className="text-xs font-black uppercase tracking-widest text-gray-500">Filter by Cohort:</span>
|
||||
<select
|
||||
className="bg-transparent text-sm font-bold text-white focus:outline-none"
|
||||
value={filter}
|
||||
onChange={(e) => setFilter(e.target.value)}
|
||||
>
|
||||
<option value="all">All students</option>
|
||||
{advanced?.cohorts.map(c => (
|
||||
<option key={c.period} value={c.period}>{c.period}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Report Table */}
|
||||
<div className="rounded-3xl border border-white/10 bg-white/[0.02] overflow-hidden">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-white/5">
|
||||
<th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Lección</th>
|
||||
<th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Completado por</th>
|
||||
<th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Puntaje Promedio</th>
|
||||
<th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Tendencia</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-white/5">
|
||||
{analytics.lessons.map((lesson) => (
|
||||
<tr key={lesson.lesson_id} className="hover:bg-white/[0.02] transition-colors">
|
||||
<td className="p-6 font-bold text-gray-300">{lesson.lesson_title}</td>
|
||||
<td className="p-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Users size={14} className="text-blue-400" />
|
||||
<span className="font-black">{lesson.submission_count}</span>
|
||||
<span className="text-[10px] text-gray-500">estudiantes</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex-1 h-2 bg-white/5 rounded-full overflow-hidden min-w-[100px]">
|
||||
<div
|
||||
className="h-full bg-blue-500 shadow-[0_0_10px_rgba(59,130,246,0.5)]"
|
||||
style={{ width: `${lesson.average_score * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-sm font-black">{(lesson.average_score * 100).toFixed(0)}%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-6">
|
||||
{lesson.average_score > 0.8 ? (
|
||||
<div className="flex items-center gap-1 text-green-400 text-[10px] font-black uppercase tracking-widest">
|
||||
<CheckCircle size={12} /> Alta
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-1 text-orange-400 text-[10px] font-black uppercase tracking-widest">
|
||||
<Clock size={12} /> Estable
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Summary Metrics */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="p-8 rounded-3xl bg-gradient-to-br from-blue-500/10 to-transparent border border-blue-500/20">
|
||||
<h4 className="text-[10px] font-black uppercase tracking-widest text-blue-400 mb-2">Total Enrollments</h4>
|
||||
<div className="text-3xl font-black">{analytics.total_enrollments}</div>
|
||||
</div>
|
||||
<div className="p-8 rounded-3xl bg-gradient-to-br from-purple-500/10 to-transparent border border-purple-500/20">
|
||||
<h4 className="text-[10px] font-black uppercase tracking-widest text-purple-400 mb-2">Avg. Score</h4>
|
||||
<div className="text-3xl font-black">{(analytics.average_score * 100).toFixed(1)}%</div>
|
||||
</div>
|
||||
<div className="p-8 rounded-3xl bg-gradient-to-br from-green-500/10 to-transparent border border-green-500/20">
|
||||
<h4 className="text-[10px] font-black uppercase tracking-widest text-green-400 mb-2">Retention Rate</h4>
|
||||
<div className="text-3xl font-black">
|
||||
{advanced ? Math.round((advanced.retention[advanced.retention.length - 1]?.student_count / advanced.retention[0]?.student_count) * 100) : '--'}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CourseEditorLayout>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -10,6 +10,7 @@ import FillInTheBlanksBlock from "@/components/blocks/FillInTheBlanksBlock";
|
||||
import MatchingBlock from "@/components/blocks/MatchingBlock";
|
||||
import OrderingBlock from "@/components/blocks/OrderingBlock";
|
||||
import ShortAnswerBlock from "@/components/blocks/ShortAnswerBlock";
|
||||
import DocumentBlock from "@/components/blocks/DocumentBlock";
|
||||
import {
|
||||
Save,
|
||||
X,
|
||||
@@ -175,7 +176,7 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
}
|
||||
};
|
||||
|
||||
const addBlock = (type: 'description' | 'media' | 'quiz' | 'fill-in-the-blanks' | 'matching' | 'ordering' | 'short-answer') => {
|
||||
const addBlock = (type: 'description' | 'media' | 'quiz' | 'fill-in-the-blanks' | 'matching' | 'ordering' | 'short-answer' | 'document') => {
|
||||
const newBlock: Block = {
|
||||
id: Math.random().toString(36).substr(2, 9),
|
||||
type,
|
||||
@@ -186,6 +187,7 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
...(type === 'matching' && { pairs: [{ left: "Item 1", right: "Match 1" }] }),
|
||||
...(type === 'ordering' && { items: ["Item A", "Item B"] }),
|
||||
...(type === 'short-answer' && { prompt: "Question?", correctAnswers: ["Answer"] }),
|
||||
...(type === 'document' && { url: "", title: "" }),
|
||||
};
|
||||
setBlocks([...blocks, newBlock]);
|
||||
};
|
||||
@@ -628,6 +630,15 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
onChange={(updates) => updateBlock(block.id, updates)}
|
||||
/>
|
||||
)}
|
||||
{block.type === 'document' && (
|
||||
<DocumentBlock
|
||||
id={block.id}
|
||||
title={block.title}
|
||||
url={block.url || ""}
|
||||
editMode={editMode}
|
||||
onChange={(updates) => updateBlock(block.id, updates)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -686,6 +697,13 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
<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>
|
||||
|
||||
<div className="w-px h-12 bg-white/5"></div>
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { cmsApi, Course } from "@/lib/api";
|
||||
import { ArrowLeft, Save, Settings as SettingsIcon, BookOpen, Calendar, Clock } from "lucide-react";
|
||||
import { ArrowLeft, Save, Settings as SettingsIcon, BookOpen, Calendar, Clock, Download, Upload } from "lucide-react";
|
||||
|
||||
const DEFAULT_CERTIFICATE_TEMPLATE = `
|
||||
<div style="width: 800px; height: 600px; padding: 40px; text-align: center; border: 10px solid #787878; font-family: 'Times New Roman', serif; background-color: #fff; color: #333;">
|
||||
@@ -33,6 +33,8 @@ export default function CourseSettingsPage() {
|
||||
const [pacingMode, setPacingMode] = useState<'self_paced' | 'instructor_led'>("self_paced");
|
||||
const [startDate, setStartDate] = useState("");
|
||||
const [endDate, setEndDate] = useState("");
|
||||
const [exporting, setExporting] = useState(false);
|
||||
const [importing, setImporting] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchCourse = async () => {
|
||||
@@ -73,6 +75,47 @@ export default function CourseSettingsPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleExport = async () => {
|
||||
setExporting(true);
|
||||
try {
|
||||
const data = await cmsApi.exportCourse(id);
|
||||
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `course_${id}_export.json`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
} catch (err) {
|
||||
console.error("Export failed", err);
|
||||
alert("Error al exportar el curso");
|
||||
} finally {
|
||||
setExporting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleImport = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
setImporting(true);
|
||||
try {
|
||||
const text = await file.text();
|
||||
const data = JSON.parse(text);
|
||||
const newCourse = await cmsApi.importCourse(data);
|
||||
alert(`Curso importado con éxito: ${newCourse.title}`);
|
||||
router.push(`/courses/${newCourse.id}/settings`);
|
||||
} catch (err) {
|
||||
console.error("Import failed", err);
|
||||
alert("Error al importar el curso. Asegúrate de que el formato sea válido.");
|
||||
} finally {
|
||||
setImporting(false);
|
||||
if (e.target) e.target.value = ''; // Reset input
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) return (
|
||||
<div className="min-h-screen bg-[#0f1115] flex items-center justify-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
|
||||
@@ -297,6 +340,57 @@ export default function CourseSettingsPage() {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Course Portability Section */}
|
||||
<section className="bg-white/5 border border-white/10 rounded-3xl p-8">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-12 h-12 rounded-2xl bg-amber-500/10 flex items-center justify-center text-amber-400">
|
||||
<Download size={24} />
|
||||
</div>
|
||||
<h2 className="text-2xl font-black">Course Portability</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-sm font-bold text-gray-300">Export Course</h3>
|
||||
<p className="text-xs text-gray-500">
|
||||
Download the entire course structure, modules, and lessons as a JSON file.
|
||||
You can use this to backup or move content between organizations.
|
||||
</p>
|
||||
<button
|
||||
onClick={handleExport}
|
||||
disabled={exporting}
|
||||
className="flex items-center gap-2 px-6 py-3 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl font-bold transition-all active:scale-95 disabled:opacity-50"
|
||||
>
|
||||
<Download size={18} />
|
||||
{exporting ? "Exporting..." : "Download JSON"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-sm font-bold text-gray-300">Import Course</h3>
|
||||
<p className="text-xs text-gray-500">
|
||||
Upload a previously exported course JSON file. This will create a NEW course
|
||||
within the current organization based on that data.
|
||||
</p>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="file"
|
||||
accept=".json"
|
||||
onChange={handleImport}
|
||||
disabled={importing}
|
||||
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
|
||||
/>
|
||||
<button
|
||||
disabled={importing}
|
||||
className="flex items-center gap-2 px-6 py-3 bg-indigo-600/20 hover:bg-indigo-600/30 border border-indigo-500/30 text-indigo-400 rounded-xl font-bold transition-all pointer-events-none"
|
||||
>
|
||||
<Upload size={18} />
|
||||
{importing ? "Importing..." : "Upload JSON"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</CourseEditorLayout>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,6 +3,7 @@ import { Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import Link from "next/link";
|
||||
import { AuthProvider } from "@/context/AuthContext";
|
||||
import { I18nProvider } from "@/context/I18nContext";
|
||||
import { BookOpen } from "lucide-react";
|
||||
import AuthGuard from "@/components/AuthGuard";
|
||||
|
||||
@@ -24,18 +25,20 @@ export default function RootLayout({
|
||||
<html lang="en" className="dark">
|
||||
<body className={`${inter.className} bg-gray-950 text-gray-200 min-h-screen flex flex-col`}>
|
||||
<AuthProvider>
|
||||
<AuthGuard>
|
||||
<header className="h-20 glass sticky top-0 z-50 px-8 flex items-center justify-between border-b border-white/5 backdrop-blur-xl bg-black/40">
|
||||
<Link href="/" className="flex items-center gap-3 group">
|
||||
<div className="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center font-black text-white shadow-lg shadow-blue-500/20 group-hover:scale-105 transition-transform">
|
||||
<BookOpen size={20} />
|
||||
</div>
|
||||
<span className="font-black text-2xl tracking-tighter text-white">STUDIO</span>
|
||||
</Link>
|
||||
<AuthHeader />
|
||||
</header>
|
||||
<main className="flex-1">{children}</main>
|
||||
</AuthGuard>
|
||||
<I18nProvider>
|
||||
<AuthGuard>
|
||||
<header className="h-20 glass sticky top-0 z-50 px-8 flex items-center justify-between border-b border-white/5 backdrop-blur-xl bg-black/40">
|
||||
<Link href="/" className="flex items-center gap-3 group">
|
||||
<div className="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center font-black text-white shadow-lg shadow-blue-500/20 group-hover:scale-105 transition-transform">
|
||||
<BookOpen size={20} />
|
||||
</div>
|
||||
<span className="font-black text-2xl tracking-tighter text-white">STUDIO</span>
|
||||
</Link>
|
||||
<AuthHeader />
|
||||
</header>
|
||||
<main className="flex-1">{children}</main>
|
||||
</AuthGuard>
|
||||
</I18nProvider>
|
||||
</AuthProvider>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+154
-12
@@ -4,11 +4,13 @@ import { useEffect, useState } from "react";
|
||||
import { cmsApi, Course, Organization } from "@/lib/api";
|
||||
import Link from "next/link";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import { Plus, BookOpen } from "lucide-react";
|
||||
import { useTranslation } from "@/context/I18nContext";
|
||||
import { Plus, BookOpen, Download, Upload, Sparkles, Wand2 } from "lucide-react";
|
||||
import OrganizationSelector from "@/components/OrganizationSelector";
|
||||
import Modal from "@/components/Modal";
|
||||
|
||||
export default function StudioDashboard() {
|
||||
const { t } = useTranslation();
|
||||
const [courses, setCourses] = useState<Course[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const { user } = useAuth();
|
||||
@@ -34,7 +36,10 @@ export default function StudioDashboard() {
|
||||
const [organizations, setOrganizations] = useState<Organization[]>([]);
|
||||
const [isOrgModalOpen, setIsOrgModalOpen] = useState(false);
|
||||
const [isTitleModalOpen, setIsTitleModalOpen] = useState(false);
|
||||
const [isAIModalOpen, setIsAIModalOpen] = useState(false);
|
||||
const [newCourseTitle, setNewCourseTitle] = useState("");
|
||||
const [aiPrompt, setAiPrompt] = useState("");
|
||||
const [isGenerating, setIsGenerating] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const loadOrgs = async () => {
|
||||
@@ -78,6 +83,63 @@ export default function StudioDashboard() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleAIGenerate = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!aiPrompt) return;
|
||||
|
||||
setIsGenerating(true);
|
||||
try {
|
||||
const newCourse = await cmsApi.generateCourse(aiPrompt);
|
||||
setCourses((prev: Course[]) => [...prev, newCourse]);
|
||||
setAiPrompt("");
|
||||
setIsAIModalOpen(false);
|
||||
alert("Course generated successfully with AI!");
|
||||
} catch (err) {
|
||||
console.error("AI generation failed", err);
|
||||
alert("Failed to generate course with AI. Check backend logs and AI provider status.");
|
||||
} finally {
|
||||
setIsGenerating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleExport = async (e: React.MouseEvent, courseId: string, title: string) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
try {
|
||||
const data = await cmsApi.exportCourse(courseId);
|
||||
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = `course_${title.replace(/\s+/g, '_')}.json`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
} catch (err) {
|
||||
console.error("Export failed", err);
|
||||
alert("Failed to export course");
|
||||
}
|
||||
};
|
||||
|
||||
const handleImport = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = async (event) => {
|
||||
try {
|
||||
const json = JSON.parse(event.target?.result as string);
|
||||
const newCourse = await cmsApi.importCourse(json);
|
||||
setCourses((prev: Course[]) => [...prev, newCourse]);
|
||||
alert("Course imported successfully!");
|
||||
} catch (err) {
|
||||
console.error("Import failed", err);
|
||||
alert("Failed to import course. Ensure the file is a valid OpenCCB course export.");
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0f1115] text-white p-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
@@ -85,17 +147,31 @@ export default function StudioDashboard() {
|
||||
<div className="flex justify-between items-center mb-12">
|
||||
<div>
|
||||
<h1 className="text-4xl font-black bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent tracking-tight">
|
||||
My Courses
|
||||
{t('nav.courses')}
|
||||
</h1>
|
||||
<p className="text-gray-400 mt-2">Manage and monitor your educational content</p>
|
||||
<p className="text-gray-400 mt-2">{t('dashboard.title')}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<label className="flex items-center gap-2 px-6 py-3 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl font-bold transition-all cursor-pointer active:scale-95">
|
||||
<Upload size={18} />
|
||||
Import
|
||||
<input type="file" accept=".json" onChange={handleImport} className="hidden" />
|
||||
</label>
|
||||
<button
|
||||
onClick={() => setIsAIModalOpen(true)}
|
||||
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"
|
||||
>
|
||||
<Sparkles size={18} className="text-amber-300 group-hover:rotate-12 transition-transform" />
|
||||
AI Wizard
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCreateCourse}
|
||||
className="flex items-center gap-2 px-6 py-3 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl font-bold transition-all active:scale-95"
|
||||
>
|
||||
<Plus size={20} />
|
||||
Manual
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleCreateCourse}
|
||||
className="flex items-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-500 rounded-xl font-bold shadow-lg shadow-blue-500/20 transition-all active:scale-95"
|
||||
>
|
||||
<Plus size={20} />
|
||||
New Course
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
@@ -114,8 +190,17 @@ export default function StudioDashboard() {
|
||||
<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="flex-1">
|
||||
<div className="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center mb-4">
|
||||
<BookOpen className="text-blue-400" />
|
||||
<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">
|
||||
<BookOpen className="text-blue-400" />
|
||||
</div>
|
||||
<button
|
||||
onClick={(e) => handleExport(e, course.id, course.title)}
|
||||
className="p-2 hover:bg-white/10 rounded-lg text-gray-500 hover:text-white transition-all"
|
||||
title="Export Course"
|
||||
>
|
||||
<Download size={18} />
|
||||
</button>
|
||||
</div>
|
||||
<h3 className="font-bold text-lg mb-2 group-hover:text-blue-400 transition-colors">{course.title}</h3>
|
||||
<p className="text-sm text-gray-400 line-clamp-2">{course.description || "No description provided."}</p>
|
||||
@@ -170,6 +255,63 @@ export default function StudioDashboard() {
|
||||
</form>
|
||||
</Modal>
|
||||
|
||||
{/* AI Wizard Modal */}
|
||||
<Modal
|
||||
isOpen={isAIModalOpen}
|
||||
onClose={() => !isGenerating && setIsAIModalOpen(false)}
|
||||
title="AI Course Wizard"
|
||||
>
|
||||
<form onSubmit={handleAIGenerate} className="space-y-6">
|
||||
<div className="p-4 rounded-xl bg-indigo-500/5 border border-indigo-500/10 mb-2">
|
||||
<p className="text-xs text-indigo-300 leading-relaxed font-medium">
|
||||
Describe the course topic and target audience. Our AI will structure the modules and lessons for you in seconds.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-2">
|
||||
Course Topic or Description
|
||||
</label>
|
||||
<textarea
|
||||
autoFocus
|
||||
required
|
||||
rows={4}
|
||||
value={aiPrompt}
|
||||
onChange={(e) => setAiPrompt(e.target.value)}
|
||||
placeholder="e.g. A comprehensive guide to building distributed systems with Rust and Axum for intermediate developers."
|
||||
className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500/50 transition-all text-white resize-none"
|
||||
disabled={isGenerating}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-3 pt-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsAIModalOpen(false)}
|
||||
disabled={isGenerating}
|
||||
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"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isGenerating}
|
||||
className="flex-[2] px-4 py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg transition-all shadow-lg shadow-indigo-500/20 font-bold text-sm flex items-center justify-center gap-2"
|
||||
>
|
||||
{isGenerating ? (
|
||||
<>
|
||||
<div className="w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin" />
|
||||
Generating...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Wand2 size={16} />
|
||||
Magic Create
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
|
||||
{/* Organization Selector Modal */}
|
||||
<OrganizationSelector
|
||||
isOpen={isOrgModalOpen}
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import { useTranslation } from "@/context/I18nContext";
|
||||
import { cmsApi, getImageUrl } from "@/lib/api";
|
||||
import {
|
||||
Save,
|
||||
@@ -17,6 +18,7 @@ import {
|
||||
} from "lucide-react";
|
||||
|
||||
export default function ProfilePage() {
|
||||
const { t, setLanguage: setContextLanguage } = useTranslation();
|
||||
const { user, logout } = useAuth();
|
||||
const [fullName, setFullName] = useState(user?.full_name || "");
|
||||
const [email, setEmail] = useState(user?.email || "");
|
||||
@@ -73,7 +75,8 @@ export default function ProfilePage() {
|
||||
avatar_url: avatarUrl
|
||||
});
|
||||
|
||||
setMessage({ type: 'success', text: 'Profile updated successfully!' });
|
||||
setContextLanguage(language);
|
||||
setMessage({ type: 'success', text: t('common.save') + '!' });
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setMessage({ type: 'error', text: 'Failed to update profile.' });
|
||||
@@ -226,8 +229,8 @@ export default function ProfilePage() {
|
||||
type="button"
|
||||
onClick={() => setLanguage(lang.code)}
|
||||
className={`flex items-center justify-center gap-3 p-4 rounded-2xl border transition-all ${language === lang.code
|
||||
? 'bg-blue-600 border-blue-500 text-white shadow-lg shadow-blue-500/20'
|
||||
: 'bg-black/20 border-white/5 text-gray-400 hover:border-white/20 hover:text-white'
|
||||
? 'bg-blue-600 border-blue-500 text-white shadow-lg shadow-blue-500/20'
|
||||
: 'bg-black/20 border-white/5 text-gray-400 hover:border-white/20 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<span className="text-xl">{lang.flag}</span>
|
||||
@@ -239,8 +242,8 @@ export default function ProfilePage() {
|
||||
|
||||
{message && (
|
||||
<div className={`p-5 rounded-2xl text-sm font-bold animate-in fade-in slide-in-from-top-4 ${message.type === 'success'
|
||||
? 'bg-green-500/10 text-green-400 border border-green-500/20'
|
||||
: 'bg-red-500/10 text-red-400 border border-red-500/20'
|
||||
? 'bg-green-500/10 text-green-400 border border-green-500/20'
|
||||
: 'bg-red-500/10 text-red-400 border border-red-500/20'
|
||||
}`}>
|
||||
{message.text}
|
||||
</div>
|
||||
|
||||
@@ -2,9 +2,11 @@
|
||||
|
||||
import Link from 'next/link';
|
||||
import { useAuth } from '@/context/AuthContext';
|
||||
import { LayoutDashboard, Building2, Users2, LogOut, Webhook } from 'lucide-react';
|
||||
import { useTranslation } from '@/context/I18nContext';
|
||||
import { LayoutDashboard, ShieldCheck, LogOut, Webhook, Settings, Globe } from 'lucide-react';
|
||||
|
||||
export function Navbar() {
|
||||
const { t, language, setLanguage } = useTranslation();
|
||||
const { user, logout } = useAuth();
|
||||
|
||||
return (
|
||||
@@ -23,31 +25,33 @@ export function Navbar() {
|
||||
className="text-sm font-medium text-gray-400 hover:text-blue-400 transition-colors flex items-center gap-2"
|
||||
>
|
||||
<LayoutDashboard className="w-4 h-4" />
|
||||
Courses
|
||||
{t('nav.courses')}
|
||||
</Link>
|
||||
|
||||
{user?.role === 'admin' && (
|
||||
<>
|
||||
<Link
|
||||
href="/admin/organizations"
|
||||
className="text-sm font-medium text-gray-400 hover:text-blue-400 transition-colors flex items-center gap-2"
|
||||
>
|
||||
<Building2 className="w-4 h-4" />
|
||||
Organizations
|
||||
</Link>
|
||||
<Link
|
||||
href="/admin/users"
|
||||
className="text-sm font-medium text-gray-400 hover:text-blue-400 transition-colors flex items-center gap-2"
|
||||
>
|
||||
<Users2 className="w-4 h-4" />
|
||||
Users
|
||||
</Link>
|
||||
{user.organization_id === '00000000-0000-0000-0000-000000000001' && (
|
||||
<Link
|
||||
href="/admin"
|
||||
className="text-sm font-black text-indigo-400 hover:text-indigo-300 transition-colors flex items-center gap-2 bg-indigo-500/10 px-3 py-1.5 rounded-lg border border-indigo-500/20 shadow-glow-sm"
|
||||
>
|
||||
<ShieldCheck className="w-4 h-4" />
|
||||
{t('nav.globalControl')}
|
||||
</Link>
|
||||
)}
|
||||
<Link
|
||||
href="/settings/webhooks"
|
||||
className="text-sm font-medium text-gray-400 hover:text-blue-400 transition-colors flex items-center gap-2"
|
||||
>
|
||||
<Webhook className="w-4 h-4" />
|
||||
Webhooks
|
||||
{t('nav.webhooks')}
|
||||
</Link>
|
||||
<Link
|
||||
href="/profile"
|
||||
className="text-sm font-medium text-gray-400 hover:text-blue-400 transition-colors flex items-center gap-2"
|
||||
>
|
||||
<Settings className="w-4 h-4" />
|
||||
{t('nav.profile')}
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
@@ -65,6 +69,22 @@ export function Navbar() {
|
||||
|
||||
<div className="h-6 w-px bg-white/10 mx-2" />
|
||||
|
||||
{/* Language Switcher */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Globe className="w-4 h-4 text-gray-500" />
|
||||
<select
|
||||
value={language}
|
||||
onChange={(e) => setLanguage(e.target.value)}
|
||||
className="bg-transparent text-[10px] font-black uppercase tracking-widest text-gray-400 hover:text-white transition-colors focus:outline-none cursor-pointer"
|
||||
>
|
||||
<option value="en" className="bg-gray-900">EN</option>
|
||||
<option value="es" className="bg-gray-900">ES</option>
|
||||
<option value="pt" className="bg-gray-900">PT</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="h-6 w-px bg-white/10 mx-2" />
|
||||
|
||||
{user ? (
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex flex-col items-end">
|
||||
|
||||
@@ -0,0 +1,108 @@
|
||||
"use client";
|
||||
|
||||
import FileUpload from "../FileUpload";
|
||||
import { getImageUrl } from "@/lib/api";
|
||||
import { FileText, Download, Eye } from "lucide-react";
|
||||
|
||||
interface DocumentBlockProps {
|
||||
id: string;
|
||||
title?: string;
|
||||
url: string;
|
||||
editMode: boolean;
|
||||
onChange: (updates: { title?: string; url?: string }) => void;
|
||||
}
|
||||
|
||||
export default function DocumentBlock({ title, url, editMode, onChange }: DocumentBlockProps) {
|
||||
const isPdf = url.toLowerCase().endsWith(".pdf");
|
||||
const displayUrl = getImageUrl(url);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Block Header */}
|
||||
<div className="space-y-2">
|
||||
{editMode ? (
|
||||
<div className="space-y-2 p-6 glass border-white/5 bg-white/5 mb-4">
|
||||
<label className="text-xs font-bold text-gray-500 uppercase tracking-widest">Document Activity Title</label>
|
||||
<input
|
||||
type="text"
|
||||
value={title || ""}
|
||||
onChange={(e) => onChange({ title: e.target.value })}
|
||||
placeholder="e.g. Course Syllabus, Reading Guide..."
|
||||
className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2 text-sm font-bold focus:border-blue-500/50 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
title && <h3 className="text-xl font-bold border-l-4 border-indigo-500 pl-4 py-1 tracking-tight text-white">{title}</h3>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{editMode && (
|
||||
<div className="p-6 glass border-blue-500/10 mb-8 bg-blue-500/5">
|
||||
<label className="text-xs font-bold text-gray-500 uppercase tracking-widest mb-4 block">Upload Document (PDF, DOCX, PPTX)</label>
|
||||
<FileUpload
|
||||
currentUrl={url}
|
||||
onUploadComplete={(newUrl) => onChange({ url: newUrl })}
|
||||
/>
|
||||
<p className="text-[10px] text-gray-500 uppercase leading-relaxed mt-4 px-2">
|
||||
Supported formats: PDF (can be previewed), DOCX, PPTX (download only).
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!editMode && (
|
||||
<div className="relative">
|
||||
{url ? (
|
||||
<div className="space-y-4">
|
||||
{isPdf ? (
|
||||
<div className="glass rounded-2xl overflow-hidden border-white/5 bg-white/5 aspect-[4/3] w-full">
|
||||
<iframe
|
||||
src={`${displayUrl}#toolbar=0`}
|
||||
className="w-full h-full border-none"
|
||||
title={title || "Document Preview"}
|
||||
/>
|
||||
<div className="p-4 border-t border-white/5 flex items-center justify-between bg-black/40">
|
||||
<span className="text-xs font-bold text-gray-400 uppercase tracking-widest flex items-center gap-2">
|
||||
<Eye size={14} className="text-indigo-400" /> PDF Preview
|
||||
</span>
|
||||
<a
|
||||
href={displayUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-2 px-4 py-2 bg-indigo-500/20 hover:bg-indigo-500/40 text-indigo-400 rounded-lg text-xs font-black uppercase tracking-widest transition-all"
|
||||
>
|
||||
<Download size={14} /> Full Screen / Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="glass p-12 rounded-3xl border border-white/5 bg-white/5 flex flex-col items-center text-center gap-6">
|
||||
<div className="w-20 h-20 rounded-2xl bg-indigo-500/10 flex items-center justify-center text-indigo-400">
|
||||
<FileText size={40} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-lg font-bold text-white mb-2">Non-PDF Document</p>
|
||||
<p className="text-sm text-gray-500 max-w-sm mx-auto uppercase tracking-widest font-black leading-relaxed">
|
||||
This file cannot be previewed directly. Please download it to read.
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
href={displayUrl}
|
||||
download
|
||||
className="flex items-center gap-3 px-8 py-4 bg-indigo-600 hover:bg-indigo-500 text-white rounded-2xl font-black uppercase tracking-widest transition-all shadow-xl shadow-indigo-500/20 active:scale-95"
|
||||
>
|
||||
<Download size={20} /> Download File
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="glass border-dashed border-white/10 p-12 rounded-3xl flex flex-col items-center gap-4 text-gray-500">
|
||||
<FileText size={48} className="opacity-20" />
|
||||
<p className="font-bold uppercase tracking-widest text-xs">No file selected</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
"use client";
|
||||
|
||||
import React, { createContext, useContext, useState, useEffect } from 'react';
|
||||
import en from '../lib/locales/en.json';
|
||||
import es from '../lib/locales/es.json';
|
||||
import pt from '../lib/locales/pt.json';
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const translations: Record<string, any> = { en, es, pt };
|
||||
|
||||
interface I18nContextType {
|
||||
language: string;
|
||||
setLanguage: (lang: string) => void;
|
||||
t: (path: string) => string;
|
||||
}
|
||||
|
||||
const I18nContext = createContext<I18nContextType | undefined>(undefined);
|
||||
|
||||
export function I18nProvider({ children }: { children: React.ReactNode }) {
|
||||
const [language, setLanguageState] = useState('en');
|
||||
|
||||
useEffect(() => {
|
||||
const savedLang = localStorage.getItem('studio_language');
|
||||
if (savedLang) {
|
||||
setLanguageState(savedLang);
|
||||
} else {
|
||||
// Try to detect from user profile if available, but for now default or localstorage
|
||||
}
|
||||
}, []);
|
||||
|
||||
const setLanguage = (lang: string) => {
|
||||
setLanguageState(lang);
|
||||
localStorage.setItem('studio_language', lang);
|
||||
};
|
||||
|
||||
const t = (path: string): string => {
|
||||
const keys = path.split('.');
|
||||
let result = translations[language] || translations['en'];
|
||||
|
||||
for (const key of keys) {
|
||||
if (result[key]) {
|
||||
result = result[key];
|
||||
} else {
|
||||
return path; // Fallback to path if key missing
|
||||
}
|
||||
}
|
||||
|
||||
return typeof result === 'string' ? result : path;
|
||||
};
|
||||
|
||||
return (
|
||||
<I18nContext.Provider value={{ language, setLanguage, t }}>
|
||||
{children}
|
||||
</I18nContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useTranslation() {
|
||||
const context = useContext(I18nContext);
|
||||
if (context === undefined) {
|
||||
throw new Error('useTranslation must be used within an I18nProvider');
|
||||
}
|
||||
return context;
|
||||
}
|
||||
@@ -44,7 +44,7 @@ export interface QuizQuestion {
|
||||
|
||||
export interface Block {
|
||||
id: string;
|
||||
type: 'description' | 'media' | 'quiz' | 'fill-in-the-blanks' | 'matching' | 'ordering' | 'short-answer';
|
||||
type: 'description' | 'media' | 'quiz' | 'fill-in-the-blanks' | 'matching' | 'ordering' | 'short-answer' | 'document';
|
||||
title?: string;
|
||||
content?: string;
|
||||
url?: string;
|
||||
@@ -277,6 +277,19 @@ export const cmsApi = {
|
||||
getAuditLogs: (): Promise<AuditLog[]> => apiFetch('/audit-logs'),
|
||||
getCourseAnalytics: (id: string): Promise<CourseAnalytics> => apiFetch(`/courses/${id}/analytics`),
|
||||
getAdvancedAnalytics: (id: string): Promise<AdvancedAnalytics> => apiFetch(`/courses/${id}/analytics/advanced`),
|
||||
getLessonHeatmap: (lessonId: string): Promise<{ second: number, count: number }[]> => apiFetch(`/lessons/${lessonId}/heatmap`),
|
||||
exportCourse: (id: string): Promise<Record<string, unknown>> => apiFetch(`/courses/${id}/export`),
|
||||
importCourse: (data: Record<string, unknown>): Promise<Course> => apiFetch(`/courses/import`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(data)
|
||||
}),
|
||||
|
||||
async generateCourse(prompt: string, targetOrgId?: string): Promise<Course> {
|
||||
return apiFetch(`/courses/generate`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ prompt, target_organization_id: targetOrgId })
|
||||
});
|
||||
},
|
||||
|
||||
// Users
|
||||
getAllUsers: (): Promise<User[]> => apiFetch('/users'),
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
{
|
||||
"common": {
|
||||
"save": "Save",
|
||||
"cancel": "Cancel",
|
||||
"delete": "Delete",
|
||||
"edit": "Edit",
|
||||
"create": "Create",
|
||||
"loading": "Loading...",
|
||||
"search": "Search",
|
||||
"back": "Back",
|
||||
"next": "Next",
|
||||
"publish": "Publish",
|
||||
"preview": "Preview"
|
||||
},
|
||||
"nav": {
|
||||
"courses": "Courses",
|
||||
"globalControl": "Global Control",
|
||||
"webhooks": "Webhooks",
|
||||
"profile": "Profile",
|
||||
"signOut": "Sign Out"
|
||||
},
|
||||
"dashboard": {
|
||||
"title": "Studio Dashboard",
|
||||
"newCourse": "New Course",
|
||||
"aiBuilder": "AI Builder",
|
||||
"noCourses": "No courses available."
|
||||
},
|
||||
"editor": {
|
||||
"outline": "Outline",
|
||||
"settings": "Settings",
|
||||
"newModule": "New Module",
|
||||
"newLesson": "New Lesson",
|
||||
"addBlock": "Add Content Block",
|
||||
"publishToOrg": "Publish to Organization",
|
||||
"reading": "Reading"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
{
|
||||
"common": {
|
||||
"save": "Guardar",
|
||||
"cancel": "Cancelar",
|
||||
"delete": "Eliminar",
|
||||
"edit": "Editar",
|
||||
"create": "Crear",
|
||||
"loading": "Cargando...",
|
||||
"search": "Buscar",
|
||||
"back": "Volver",
|
||||
"next": "Siguiente",
|
||||
"publish": "Publicar",
|
||||
"preview": "Previsualizar"
|
||||
},
|
||||
"nav": {
|
||||
"courses": "Cursos",
|
||||
"globalControl": "Control Global",
|
||||
"webhooks": "Webhooks",
|
||||
"profile": "Perfil",
|
||||
"signOut": "Cerrar Sesión"
|
||||
},
|
||||
"dashboard": {
|
||||
"title": "Panel de Control",
|
||||
"newCourse": "Nuevo Curso",
|
||||
"aiBuilder": "Constructor AI",
|
||||
"noCourses": "No hay cursos disponibles."
|
||||
},
|
||||
"editor": {
|
||||
"outline": "Estructura",
|
||||
"settings": "Configuración",
|
||||
"newModule": "Nuevo Módulo",
|
||||
"newLesson": "Nueva Lección",
|
||||
"addBlock": "Añadir Bloque de Contenido",
|
||||
"publishToOrg": "Publicar en Organización",
|
||||
"reading": "Lectura"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
{
|
||||
"common": {
|
||||
"save": "Salvar",
|
||||
"cancel": "Cancelar",
|
||||
"delete": "Excluir",
|
||||
"edit": "Editar",
|
||||
"create": "Criar",
|
||||
"loading": "Carregando...",
|
||||
"search": "Buscar",
|
||||
"back": "Voltar",
|
||||
"next": "Próximo",
|
||||
"publish": "Publicar",
|
||||
"preview": "Visualizar"
|
||||
},
|
||||
"nav": {
|
||||
"courses": "Cursos",
|
||||
"globalControl": "Controle Global",
|
||||
"webhooks": "Webhooks",
|
||||
"profile": "Perfil",
|
||||
"signOut": "Sair"
|
||||
},
|
||||
"dashboard": {
|
||||
"title": "Painel do Studio",
|
||||
"newCourse": "Novo Curso",
|
||||
"aiBuilder": "Construtor IA",
|
||||
"noCourses": "Nenhum curso disponível."
|
||||
},
|
||||
"editor": {
|
||||
"outline": "Estrutura",
|
||||
"settings": "Configurações",
|
||||
"newModule": "Novo Módulo",
|
||||
"newLesson": "Nova Lição",
|
||||
"addBlock": "Adicionar Bloco de Conteúdo",
|
||||
"publishToOrg": "Publicar na Organização",
|
||||
"reading": "Leitura"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user