feat: Introduce AI code hinting, enforce single-tenant organization model, and add a Code Lab block component.
This commit is contained in:
@@ -15,7 +15,6 @@ El proyecto ha sido optimizado para reducir la complejidad de la infraestructura
|
|||||||
3. **Database**: PostgreSQL compartido.
|
3. **Database**: PostgreSQL compartido.
|
||||||
4. **AI Services**: stack local con Faster-Whisper (Transcripción) y Ollama (Traducción y Resúmenes).
|
4. **AI Services**: stack local con Faster-Whisper (Transcripción) y Ollama (Traducción y Resúmenes).
|
||||||
- **AI Course Wizard**: Generación automática de cursos a partir de prompts estructurados.
|
- **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.
|
- **Course Portability**: Importación/Exportación de cursos completos mediante JSON.
|
||||||
- **User Profiles**: Gestión completa de identidad (avatar, bio, preferencias).
|
- **User Profiles**: Gestión completa de identidad (avatar, bio, preferencias).
|
||||||
- **Engagement Heatmaps**: Visualización de retención segundo a segundo en videos.
|
- **Engagement Heatmaps**: Visualización de retención segundo a segundo en videos.
|
||||||
@@ -36,8 +35,7 @@ El proyecto ha sido optimizado para reducir la complejidad de la infraestructura
|
|||||||
- **Color-Coded Progress Navigation**: Sistema visual de seguimiento de progreso mediante colores (Verde: Completado, Amarillo: En Proceso, Rojo: Repetible) tanto a nivel de lección como de módulo.
|
- **Color-Coded Progress Navigation**: Sistema visual de seguimiento de progreso mediante colores (Verde: Completado, Amarillo: En Proceso, Rojo: Repetible) tanto a nivel de lección como de módulo.
|
||||||
- **Adaptive Skill Analysis**: Motor de análisis de etiquetas que calcula la maestría de habilidades (Gramática, Vocabulario, etc.) para personalizar las recomendaciones de IA.
|
- **Adaptive Skill Analysis**: Motor de análisis de etiquetas que calcula la maestría de habilidades (Gramática, Vocabulario, etc.) para personalizar las recomendaciones de IA.
|
||||||
- **Efficient Docker Builds**: Imágenes de contenedor optimizadas para desarrollo rápido y despliegue ligero.
|
- **Efficient Docker Builds**: Imágenes de contenedor optimizadas para desarrollo rápido y despliegue ligero.
|
||||||
- **Discussion Forums**: Sistema completo de foros por curso con hilos de discusión, respuestas anidadas, votación, moderación por instructores y suscripciones.
|
- **Unified Authentication Flow**: Flujo de inicio de sesión simplificado para estudiantes e instructores.
|
||||||
- **Split Authentication Flow**: Flujos de autenticación diferenciados para usuarios personales (email/password) y empresas (dominio corporativo).
|
|
||||||
- **Course Monetization**: Integración con Mercado Pago para venta de cursos, con inscripciones automáticas y paneles de precios para instructores.
|
- **Course Monetization**: Integración con Mercado Pago para venta de cursos, con inscripciones automáticas y paneles de precios para instructores.
|
||||||
- **Student Notes**: Sistema de anotaciones personales por lección con auto-guardado inteligente (debounced).
|
- **Student Notes**: Sistema de anotaciones personales por lección con auto-guardado inteligente (debounced).
|
||||||
- **Interactive Gradebook**: Libro de calificaciones avanzado con filtrado por cohortes, exportación masiva a CSV con desgloses por categoría y pertenencia a cohortes.
|
- **Interactive Gradebook**: Libro de calificaciones avanzado con filtrado por cohortes, exportación masiva a CSV con desgloses por categoría y pertenencia a cohortes.
|
||||||
@@ -54,6 +52,7 @@ El proyecto ha sido optimizado para reducir la complejidad de la infraestructura
|
|||||||
- **Predictive Analytics (Dropout Risk)**: Motor de IA que analiza el desempeño, actividad y compromiso social del estudiante para detectar riesgos de abandono de forma proactiva, con alertas accionables para instructores.
|
- **Predictive Analytics (Dropout Risk)**: Motor de IA que analiza el desempeño, actividad y compromiso social del estudiante para detectar riesgos de abandono de forma proactiva, con alertas accionables para instructores.
|
||||||
- **Live Learning (Videoconference)**: Integración nativa con Jitsi para clases virtuales síncronas, con programación desde Studio y acceso integrado en Experience.
|
- **Live Learning (Videoconference)**: Integración nativa con Jitsi para clases virtuales síncronas, con programación desde Studio y acceso integrado en Experience.
|
||||||
- **Student Portfolio & Badges**: Sistema de reconocimiento con Open Badges y perfiles públicos profesionales para mostrar logros y progreso verificado.
|
- **Student Portfolio & Badges**: Sistema de reconocimiento con Open Badges y perfiles públicos profesionales para mostrar logros y progreso verificado.
|
||||||
|
- **Dynamic Mermaid Diagrams**: Generación automática de diagramas (flowcharts, mapas mentales, secuencias) a partir del contenido de cada lección usando IA, con editor visual integrado para instructores.
|
||||||
|
|
||||||
## Requisitos del Sistema
|
## Requisitos del Sistema
|
||||||
|
|
||||||
@@ -147,16 +146,14 @@ Para resetear completamente el entorno de desarrollo y empezar desde cero:
|
|||||||
Gestión de registro, login y perfiles organizacionales.
|
Gestión de registro, login y perfiles organizacionales.
|
||||||
|
|
||||||
#### POST /auth/register
|
#### POST /auth/register
|
||||||
Crea una nueva organización y el usuario administrador inicial.
|
Crea un nuevo usuario vinculado a la organización por defecto.
|
||||||
|
|
||||||
- **Lógica Inteligente**: Si `organization_name` está vacío, se utiliza el dominio del email. El primer usuario es marcado como `role: admin`.
|
|
||||||
- **Cuerpo de la Petición ( AuthPayload ):**
|
- **Cuerpo de la Petición ( AuthPayload ):**
|
||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
"email": "string",
|
"email": "string",
|
||||||
"password": "string",
|
"password": "string",
|
||||||
"full_name": "string",
|
"full_name": "string",
|
||||||
"organization_name": "string",
|
|
||||||
"role": "string (admin | instructor | student)"
|
"role": "string (admin | instructor | student)"
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
@@ -172,10 +169,10 @@ OpenCCB actúa como un Tool Provider LTI 1.3 moderno, utilizando OIDC y JWKS par
|
|||||||
- **Autoprovisionamiento**: Los usuarios lanzados vía LTI se crean automáticamente con los roles correspondientes.
|
- **Autoprovisionamiento**: Los usuarios lanzados vía LTI se crean automáticamente con los roles correspondientes.
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# Registrar un nuevo administrador y empresa
|
# Registrar un nuevo administrador
|
||||||
curl -X POST "http://localhost:3001/auth/register" \
|
curl -X POST "http://localhost:3001/auth/register" \
|
||||||
-H "Content-Type: application/json" \
|
-H "Content-Type: application/json" \
|
||||||
-d '{"email": "admin@empresa.com", "password": "pass", "organization_name": "OpenCCB Corp"}'
|
-d '{"email": "admin@empresa.com", "password": "pass", "full_name": "Admin Name"}'
|
||||||
```
|
```
|
||||||
|
|
||||||
---
|
---
|
||||||
@@ -575,39 +572,15 @@ curl -X POST http://localhost:3002/courses/{course_id}/announcements \
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### 6. Multi-tenencia y Gestión Global (Super Admin)
|
### 6. Estructura Single-Tenant
|
||||||
OpenCCB está diseñado para multi-tenencia. Las organizaciones están aisladas, pero un **Super Admin** puede gestionarlo todo.
|
OpenCCB está diseñado como un módulo premium single-tenant. Todas las operaciones se realizan bajo una única organización preconfigurada.
|
||||||
|
|
||||||
#### Definición de Super Admin
|
#### Organización por Defecto
|
||||||
- **ID de Organización por Defecto**: `00000000-0000-0000-0000-000000000001`
|
- **ID de Organización**: `00000000-0000-0000-0000-000000000001`
|
||||||
- Cualquier usuario con `role: admin` en esta organización es un **Super Admin**.
|
- El sistema utiliza este ID de forma transparente para todas las consultas y recursos.
|
||||||
#### 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.
|
|
||||||
|
|
||||||
#### Cursos Globales
|
#### Branding Unificado
|
||||||
Los cursos creados por los Super Admins en la **Organización por Defecto** son automáticamente marcados como **Globales**.
|
- La personalización de marca se aplica globalmente a través del panel de Ajustes en Studio, afectando tanto a la interfaz administrativa como al portal del estudiante.
|
||||||
- Aparecen en el catálogo de **todas las organizaciones**.
|
|
||||||
- Los usuarios de cualquier organización pueden inscribirse en cursos globales.
|
|
||||||
Riverside
|
|
||||||
|
|
||||||
#### Publicación Entre Organizaciones
|
|
||||||
Los Super Admins pueden publicar cursos en **cualquier organización**. Al publicar a través de Studio, un **Selector de Organizaciones** premium permite elegir el destino.
|
|
||||||
|
|
||||||
#### X-Organization-Id Header
|
|
||||||
Super Admins can simulate the context of any organization by sending this header in their requests:
|
|
||||||
```bash
|
|
||||||
curl -H "Authorization: Bearer $SUPER_ADMIN_TOKEN" \
|
|
||||||
-H "X-Organization-Id: $TARGET_ORG_ID" \
|
|
||||||
http://localhost:3001/courses
|
|
||||||
```
|
|
||||||
|
|
||||||
#### GET /organizations
|
|
||||||
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`.
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
+2
-1
@@ -238,7 +238,8 @@ if [ "$ADMIN_EXISTS" != "t" ]; then
|
|||||||
read -s -p "Contraseña del Administrador [password123]: " ADMIN_PASS
|
read -s -p "Contraseña del Administrador [password123]: " ADMIN_PASS
|
||||||
ADMIN_PASS=${ADMIN_PASS:-password123}
|
ADMIN_PASS=${ADMIN_PASS:-password123}
|
||||||
echo ""
|
echo ""
|
||||||
ORG_NAME="Default Organization"
|
read -p "Nombre de la Organización [OpenCCB]: " ORG_NAME
|
||||||
|
ORG_NAME=${ORG_NAME:-OpenCCB}
|
||||||
fi
|
fi
|
||||||
|
|
||||||
# Selective Build/Rebuild
|
# Selective Build/Rebuild
|
||||||
|
|||||||
+20
-21
@@ -69,23 +69,22 @@
|
|||||||
- [x] Visualización de feedback basada en niveles
|
- [x] Visualización de feedback basada en niveles
|
||||||
- [x] Actualización de notas en tiempo real
|
- [x] Actualización de notas en tiempo real
|
||||||
|
|
||||||
## Fase 6: Funcionalidades Avanzadas ✅
|
## Fase 6: Refactorización a Single-Tenant ✅
|
||||||
- [x] **Multi-tenancy**: Soporte para múltiples organizaciones (Completado)
|
- [x] **Single-tenancy**: Reposicionamiento como módulo premium (Completado)
|
||||||
- [x] Migración del esquema DB (añadir `organization_id`)
|
- [x] Hardcoding del `organization_id` por defecto en middleware común
|
||||||
- [x] Actualización de modelos Rust y Claims de JWT
|
- [x] Remoción de selectores de organización en Studio y Experience
|
||||||
- [x] Middleware en Axum para contexto de organización
|
- [x] Simplificación de registros y logins para un solo inquilino
|
||||||
- [x] Registro en frontend con soporte para organizaciones
|
- [x] Eliminación de rutas y controladores de gestión multi-empresa
|
||||||
- [x] **Super Admin y Org por Defecto**: Gestión global de todos los inquilinos
|
- [x] Limpieza de componentes frontend redundantes (Selector, Gestión de Orgs)
|
||||||
- [x] **Visibilidad Global de Cursos**: Cursos de sistema disponibles para todas las organizaciones
|
- [x] **Personalización de Marca (Branding Premium)**: Identidad unificada (Completado)
|
||||||
- [x] **Personalización de Marca (Branding)**: Identidad propia por organización (Completado)
|
- [x] Endpoints singulares para gestión de marca sin parámetros de ID
|
||||||
- [x] Carga y optimización de logotipos y favicons customizados
|
- [x] Carga y optimización de logotipos y favicons customizados
|
||||||
- [x] Nombre de plataforma personalizado (White-label)
|
- [x] Nombre de plataforma personalizado (White-label)
|
||||||
- [x] Esquemas de colores personalizados (Primario/Secundario)
|
- [x] Esquemas de colores personalizados aplicado globalmente
|
||||||
- [x] Adaptación dinámica del portal de Experience
|
- [x] Previsualización en vivo del branding en Studio renovada
|
||||||
- [x] Previsualización en vivo del branding en Studio
|
- [x] **Interfaz de Usuario Simplificada**:
|
||||||
- [x] **Interfaz de Usuario Avanzada**:
|
- [x] **Login Unificado**: Eliminación de flujo dividido Personas/Empresas
|
||||||
- [x] **Selector de Organizaciones Premium**: Gestión multi-tenant con búsqueda predictiva
|
- [x] **Navegación Limpia**: Remoción de enlaces de administración de organizaciones
|
||||||
- [x] **Combobox de Búsqueda**: Componente elegante con filtrado y estilo glassmorphism
|
|
||||||
|
|
||||||
## Fase 7: Compromiso y Social (En Progreso)
|
## Fase 7: Compromiso y Social (En Progreso)
|
||||||
- [x] **Analíticas de Vanguardia**:
|
- [x] **Analíticas de Vanguardia**:
|
||||||
@@ -231,14 +230,14 @@
|
|||||||
- [x] **Generación de Juegos de Memoria Conceptuales**: Creación automática de parejas (concepto/definición) a partir de transcripciones. (Completado)
|
- [x] **Generación de Juegos de Memoria Conceptuales**: Creación automática de parejas (concepto/definición) a partir de transcripciones. (Completado)
|
||||||
- [x] **Simulaciones de Rol y Diálogos Ramificados**: Motor de escenarios interactivos con respuestas dinámicas de la IA. (Completado)
|
- [x] **Simulaciones de Rol y Diálogos Ramificados**: Motor de escenarios interactivos con respuestas dinámicas de la IA. (Completado)
|
||||||
- [x] **Auto-Hotspots Pedagógicos**: Identificación automática de puntos de interés en imágenes con descripciones técnicas. (Completado)
|
- [x] **Auto-Hotspots Pedagógicos**: Identificación automática de puntos de interés en imágenes con descripciones técnicas. (Completado)
|
||||||
- [ ] **Diagramas de Mermaid Dinámicos**: Visualización automática de procesos y mapas mentales a partir del contenido de la lección.
|
- [x] **Diagramas de Mermaid Dinámicos**: Visualización automática de procesos y mapas mentales a partir del contenido de la lección. (Completado)
|
||||||
- [ ] **Laboratorios de Código con Hints de IA**: Generación de desafíos de programación con pistas contextuales basadas en errores.
|
- [x] **Laboratorios de Código con Hints de IA**: Generación de desafíos de programación con pistas contextuales basadas en errores. (Completado)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
**Estado Actual**: La plataforma cuenta con un motor de IA avanzado, gestión multi-tenant completa, tutoría inteligente con memoria histórica, una **interfaz 100% responsiva**, flujos de autenticación diferenciados, **sistema de foros de discusión funcional**, **gestión de anuncios segmentados**, **monetización integrada con Mercado Pago**, **Inscripción Masiva de Usuarios**, **Exportación Avanzada de Calificaciones**, **Librerías de Contenido reutilizables**, **Sistema de Rúbricas Avanzado**, **Secuencias de Aprendizaje**, **Gestión de Equipos Docentes**, **Vista Previa de Cursos**, **Dashboard de Progreso Estudiantil**, **Sistema de Marcadores**, **Biblioteca Global de Activos**, **Interoperabilidad LTI 1.3**, **Analíticas Predictivas**, **Integración de Jitsi**, **Portafolios con Perfiles Públicos** y **Landing Pages de Cursos (Marketing) automatizadas**.
|
**Estado Actual**: La plataforma cuenta con un motor de IA avanzado, gestión multi-tenant completa, tutoría inteligente con memoria histórica, una **interfaz 100% responsiva**, flujos de autenticación diferenciados, **sistema de foros de discusión funcional**, **gestión de anuncios segmentados**, **monetización integrada con Mercado Pago**, **Inscripción Masiva de Usuarios**, **Exportación Avanzada de Calificaciones**, **Librerías de Contenido reutilizables**, **Sistema de Rúbricas Avanzado**, **Secuencias de Aprendizaje**, **Gestión de Equipos Docentes**, **Vista Previa de Cursos**, **Dashboard de Progreso Estudiantil**, **Sistema de Marcadores**, **Biblioteca Global de Activos**, **Interoperabilidad LTI 1.3**, **Analíticas Predictivas**, **Integración de Jitsi**, **Portafolios con Perfiles Públicos**, **Landing Pages de Cursos (Marketing) automatizadas**, **Diagramas de Mermaid Dinámicos** y **Laboratorios de Código con Hints de IA**.
|
||||||
|
|
||||||
**Próximas Prioridades**:
|
**Próximas Prioridades**:
|
||||||
1. **Diagramas de Mermaid Dinámicos**: IA genera flujos y mapas mentales automáticamente.
|
1. **Accesibilidad Universal**: Auditoría y ajustes de contraste para cumplimiento WCAG 2.1.
|
||||||
2. **Accesibilidad Universal**: Auditoría y ajustes de contraste para cumplimiento WCAG 2.1.
|
2. **Integraciones Empresariales**: Conectividad con HRIS y ERPs externos.
|
||||||
3. **Integraciones Empresariales**: Conectividad con HRIS y ERPs externos.
|
3. **Optimización de Performance**: Refactorización de componentes críticos y carga diferida (lazy loading).
|
||||||
|
|||||||
@@ -211,18 +211,12 @@ CREATE OR REPLACE FUNCTION fn_register_user(
|
|||||||
p_password_hash VARCHAR(255),
|
p_password_hash VARCHAR(255),
|
||||||
p_full_name VARCHAR(255),
|
p_full_name VARCHAR(255),
|
||||||
p_role VARCHAR(50),
|
p_role VARCHAR(50),
|
||||||
p_org_name VARCHAR(255)
|
p_org_name VARCHAR(255) -- Preserved for signature compatibility but ignored
|
||||||
) RETURNS SETOF users AS $$
|
) RETURNS SETOF users AS $$
|
||||||
DECLARE
|
DECLARE
|
||||||
v_org_id UUID;
|
v_org_id UUID := '00000000-0000-0000-0000-000000000001';
|
||||||
BEGIN
|
BEGIN
|
||||||
-- Find or create organization
|
-- Create user in default organization
|
||||||
INSERT INTO organizations (name)
|
|
||||||
VALUES (p_org_name)
|
|
||||||
ON CONFLICT (name) DO UPDATE SET name = EXCLUDED.name
|
|
||||||
RETURNING id INTO v_org_id;
|
|
||||||
|
|
||||||
-- Create user
|
|
||||||
RETURN QUERY
|
RETURN QUERY
|
||||||
INSERT INTO users (email, password_hash, full_name, role, organization_id)
|
INSERT INTO users (email, password_hash, full_name, role, organization_id)
|
||||||
VALUES (p_email, p_password_hash, p_full_name, p_role, v_org_id)
|
VALUES (p_email, p_password_hash, p_full_name, p_role, v_org_id)
|
||||||
|
|||||||
@@ -0,0 +1,29 @@
|
|||||||
|
-- Migration: Enforce single-tenant and update organization name
|
||||||
|
-- This migration updates fn_register_user to always use the default organization ID (0...1)
|
||||||
|
-- but allows updating its name during the initial registration.
|
||||||
|
|
||||||
|
CREATE OR REPLACE FUNCTION fn_register_user(
|
||||||
|
p_email VARCHAR(255),
|
||||||
|
p_password_hash VARCHAR(255),
|
||||||
|
p_full_name VARCHAR(255),
|
||||||
|
p_role VARCHAR(50),
|
||||||
|
p_org_name VARCHAR(255) DEFAULT NULL
|
||||||
|
) RETURNS SETOF users AS $$
|
||||||
|
DECLARE
|
||||||
|
v_org_id UUID := '00000000-0000-0000-0000-000000000001';
|
||||||
|
BEGIN
|
||||||
|
-- Update the default organization name if a custom name is provided
|
||||||
|
IF p_org_name IS NOT NULL AND p_org_name <> '' AND p_org_name <> 'Default Organization' AND p_org_name <> 'Organización por Defecto' THEN
|
||||||
|
UPDATE organizations
|
||||||
|
SET name = p_org_name,
|
||||||
|
updated_at = NOW()
|
||||||
|
WHERE id = v_org_id;
|
||||||
|
END IF;
|
||||||
|
|
||||||
|
-- Create user and assign to the default organization
|
||||||
|
RETURN QUERY
|
||||||
|
INSERT INTO users (email, password_hash, full_name, role, organization_id)
|
||||||
|
VALUES (p_email, p_password_hash, p_full_name, p_role, v_org_id)
|
||||||
|
RETURNING *;
|
||||||
|
END;
|
||||||
|
$$ LANGUAGE plpgsql;
|
||||||
@@ -8,8 +8,9 @@ use axum::{
|
|||||||
};
|
};
|
||||||
use bcrypt::{DEFAULT_COST, hash, verify};
|
use bcrypt::{DEFAULT_COST, hash, verify};
|
||||||
use chrono::{DateTime, Utc};
|
use chrono::{DateTime, Utc};
|
||||||
use common::auth::{Claims, create_jwt, create_preview_token};
|
pub use common::auth::Claims;
|
||||||
use common::middleware::Org;
|
pub use common::middleware::Org;
|
||||||
|
use common::auth::{create_jwt, create_preview_token};
|
||||||
use common::models::{
|
use common::models::{
|
||||||
AuthResponse, Course, CourseAnalytics, Lesson, Module, Organization, PublishedCourse,
|
AuthResponse, Course, CourseAnalytics, Lesson, Module, Organization, PublishedCourse,
|
||||||
PublishedModule, User, UserResponse, CourseInstructor,
|
PublishedModule, User, UserResponse, CourseInstructor,
|
||||||
@@ -1831,6 +1832,122 @@ pub async fn generate_mermaid_diagram(
|
|||||||
})))
|
})))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#[derive(Deserialize)]
|
||||||
|
pub struct GenerateCodeLabPayload {
|
||||||
|
pub language: Option<String>,
|
||||||
|
pub prompt_hint: Option<String>,
|
||||||
|
}
|
||||||
|
|
||||||
|
pub async fn generate_code_lab(
|
||||||
|
Org(org_ctx): Org,
|
||||||
|
_claims: Claims,
|
||||||
|
State(pool): State<PgPool>,
|
||||||
|
Path(lesson_id): Path<Uuid>,
|
||||||
|
Json(payload): Json<GenerateCodeLabPayload>,
|
||||||
|
) -> Result<Json<serde_json::Value>, (StatusCode, String)> {
|
||||||
|
tracing::info!("Generating Code Lab for lesson_id={}", lesson_id);
|
||||||
|
|
||||||
|
let lesson = sqlx::query_as::<_, Lesson>("SELECT * FROM lessons WHERE id = $1 AND organization_id = $2")
|
||||||
|
.bind(lesson_id)
|
||||||
|
.bind(org_ctx.id)
|
||||||
|
.fetch_one(&pool)
|
||||||
|
.await
|
||||||
|
.map_err(|_| (StatusCode::NOT_FOUND, "Lección no encontrada".into()))?;
|
||||||
|
|
||||||
|
let provider = env::var("AI_PROVIDER").unwrap_or_else(|_| "local".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://ollama:11434".to_string());
|
||||||
|
let model = env::var("LOCAL_LLM_MODEL").unwrap_or_else(|_| "llama3.2:3b".to_string());
|
||||||
|
(format!("{}/v1/chat/completions", base_url), "".to_string(), model)
|
||||||
|
} else {
|
||||||
|
(
|
||||||
|
"https://api.openai.com/v1/chat/completions".to_string(),
|
||||||
|
format!("Bearer {}", env::var("OPENAI_API_KEY").unwrap_or_default()),
|
||||||
|
"gpt-4o".to_string(),
|
||||||
|
)
|
||||||
|
};
|
||||||
|
|
||||||
|
let transcription_str = lesson.transcription.as_ref().and_then(|v| v.as_str());
|
||||||
|
let summary_str = lesson.summary.as_deref();
|
||||||
|
let lesson_context = transcription_str.or(summary_str).unwrap_or("Conceptos generales de la lección.");
|
||||||
|
let language = payload.language.unwrap_or_else(|| "python".to_string());
|
||||||
|
let user_hint = payload.prompt_hint.unwrap_or_else(|| "Diseña un ejercicio práctico que refuerce los conceptos de la lección.".to_string());
|
||||||
|
|
||||||
|
let system_prompt = format!(
|
||||||
|
"Eres un experto pedagogo y programador especializado en crear ejercicios de código educativos.\n\
|
||||||
|
Tu tarea es generar un ejercicio de programación en {} basado en el siguiente contenido de la lección.\n\
|
||||||
|
INSTRUCCIONES CRÍTICAS:\n\
|
||||||
|
1. Responde ÚNICAMENTE con un objeto JSON válido. Sin texto adicional, sin explicaciones, sin bloques markdown.\n\
|
||||||
|
2. El JSON debe tener exactamente esta estructura:\n\
|
||||||
|
{{\"title\": \"string\", \"instructions\": \"string\", \"initial_code\": \"string\", \"solution\": \"string\", \"test_cases\": [{{\"description\": \"string\", \"expected\": \"string\"}}]}}\n\
|
||||||
|
3. El campo 'initial_code' debe ser un esqueleto con comentarios TODO para que el estudiante lo complete.\n\
|
||||||
|
4. El campo 'solution' debe ser la solución completa.\n\
|
||||||
|
5. El campo 'test_cases' debe contener 2-3 casos de prueba descriptivos.\n\
|
||||||
|
6. Las instrucciones deben ser claras y pedagógicamente apropiadas.\n\n\
|
||||||
|
Contexto de la lección:\n{}\n\n\
|
||||||
|
Instrucciones adicionales:\n{}",
|
||||||
|
language, lesson_context, user_hint
|
||||||
|
);
|
||||||
|
|
||||||
|
let response = client
|
||||||
|
.post(&url)
|
||||||
|
.header("Content-Type", "application/json")
|
||||||
|
.header("Authorization", auth_header)
|
||||||
|
.json(&serde_json::json!({
|
||||||
|
"model": model,
|
||||||
|
"messages": [
|
||||||
|
{ "role": "system", "content": system_prompt },
|
||||||
|
{ "role": "user", "content": "Genera el ejercicio de código ahora." }
|
||||||
|
],
|
||||||
|
"temperature": 0.4
|
||||||
|
}))
|
||||||
|
.send()
|
||||||
|
.await
|
||||||
|
.map_err(|e| {
|
||||||
|
tracing::error!("LLM Request failed: {}", e);
|
||||||
|
(StatusCode::INTERNAL_SERVER_ERROR, "Error contacting AI provider".into())
|
||||||
|
})?;
|
||||||
|
|
||||||
|
if !response.status().is_success() {
|
||||||
|
let err_body = response.text().await.unwrap_or_default();
|
||||||
|
tracing::error!("LLM Error response: {}", err_body);
|
||||||
|
return Err((StatusCode::INTERNAL_SERVER_ERROR, "AI provider returned an error".into()));
|
||||||
|
}
|
||||||
|
|
||||||
|
let ai_data: serde_json::Value = response.json().await.map_err(|e| {
|
||||||
|
tracing::error!("Failed to parse LLM JSON: {}", e);
|
||||||
|
(StatusCode::INTERNAL_SERVER_ERROR, "Error parsing AI response".into())
|
||||||
|
})?;
|
||||||
|
|
||||||
|
let ai_text = ai_data["choices"][0]["message"]["content"]
|
||||||
|
.as_str()
|
||||||
|
.unwrap_or("{}")
|
||||||
|
.trim();
|
||||||
|
|
||||||
|
// Strip potential markdown code fences
|
||||||
|
let cleaned = ai_text
|
||||||
|
.strip_prefix("```json\n").unwrap_or(ai_text)
|
||||||
|
.strip_prefix("```\n").unwrap_or(ai_text)
|
||||||
|
.strip_suffix("```").unwrap_or(ai_text)
|
||||||
|
.trim();
|
||||||
|
|
||||||
|
let exercise: serde_json::Value = serde_json::from_str(cleaned).map_err(|e| {
|
||||||
|
tracing::error!("Failed to parse exercise JSON from LLM: {} | raw: {}", e, cleaned);
|
||||||
|
(StatusCode::INTERNAL_SERVER_ERROR, "AI returned invalid exercise JSON".into())
|
||||||
|
})?;
|
||||||
|
|
||||||
|
Ok(Json(serde_json::json!({
|
||||||
|
"language": language,
|
||||||
|
"title": exercise["title"],
|
||||||
|
"instructions": exercise["instructions"],
|
||||||
|
"initial_code": exercise["initial_code"],
|
||||||
|
"solution": exercise["solution"],
|
||||||
|
"test_cases": exercise["test_cases"],
|
||||||
|
})))
|
||||||
|
}
|
||||||
|
|
||||||
#[derive(Deserialize)]
|
#[derive(Deserialize)]
|
||||||
pub struct GenerateHotspotsPayload {
|
pub struct GenerateHotspotsPayload {
|
||||||
pub image_url: String,
|
pub image_url: String,
|
||||||
@@ -2082,15 +2199,6 @@ pub struct AuthPayload {
|
|||||||
pub organization_name: Option<String>,
|
pub organization_name: Option<String>,
|
||||||
}
|
}
|
||||||
|
|
||||||
#[derive(serde::Deserialize)]
|
|
||||||
pub struct ProvisionPayload {
|
|
||||||
pub org_name: String,
|
|
||||||
pub org_domain: Option<String>,
|
|
||||||
pub admin_email: String,
|
|
||||||
pub admin_password: String,
|
|
||||||
pub admin_full_name: String,
|
|
||||||
}
|
|
||||||
|
|
||||||
#[derive(serde::Deserialize, serde::Serialize)]
|
#[derive(serde::Deserialize, serde::Serialize)]
|
||||||
pub struct AdminCreateUserPayload {
|
pub struct AdminCreateUserPayload {
|
||||||
pub email: String,
|
pub email: String,
|
||||||
@@ -3130,176 +3238,9 @@ pub async fn update_user(
|
|||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
|
|
||||||
// Organizations Management (Plural/Admin)
|
// Organizations Management (Simplified for Single-Tenant)
|
||||||
pub async fn get_organizations(
|
// Multi-tenant organization management has been removed.
|
||||||
claims: common::auth::Claims,
|
// The system now operates on a single default organization.
|
||||||
State(pool): State<PgPool>,
|
|
||||||
) -> Result<Json<Vec<Organization>>, StatusCode> {
|
|
||||||
if claims.role != "admin" {
|
|
||||||
return Err(StatusCode::FORBIDDEN);
|
|
||||||
}
|
|
||||||
|
|
||||||
let orgs =
|
|
||||||
sqlx::query_as::<_, Organization>("SELECT * FROM organizations ORDER BY created_at DESC")
|
|
||||||
.fetch_all(&pool)
|
|
||||||
.await
|
|
||||||
.map_err(|e| {
|
|
||||||
tracing::error!("Failed to fetch organizations: {}", e);
|
|
||||||
StatusCode::INTERNAL_SERVER_ERROR
|
|
||||||
})?;
|
|
||||||
|
|
||||||
Ok(Json(orgs))
|
|
||||||
}
|
|
||||||
|
|
||||||
#[derive(Deserialize)]
|
|
||||||
pub struct OrgSearchQuery {
|
|
||||||
pub q: String,
|
|
||||||
}
|
|
||||||
|
|
||||||
#[derive(Serialize, sqlx::FromRow)]
|
|
||||||
pub struct OrgSearchResult {
|
|
||||||
pub id: Uuid,
|
|
||||||
pub name: String,
|
|
||||||
pub domain: Option<String>,
|
|
||||||
}
|
|
||||||
|
|
||||||
pub async fn search_organizations(
|
|
||||||
State(pool): State<PgPool>,
|
|
||||||
Query(query): Query<OrgSearchQuery>,
|
|
||||||
) -> Result<Json<Vec<OrgSearchResult>>, StatusCode> {
|
|
||||||
if query.q.trim().is_empty() {
|
|
||||||
return Ok(Json(vec![]));
|
|
||||||
}
|
|
||||||
|
|
||||||
let search_term = format!("%{}%", query.q.trim());
|
|
||||||
|
|
||||||
let orgs = sqlx::query_as::<_, OrgSearchResult>(
|
|
||||||
"SELECT id, name, domain FROM organizations WHERE name ILIKE $1 OR domain ILIKE $1 ORDER BY name ASC LIMIT 10"
|
|
||||||
)
|
|
||||||
.bind(search_term)
|
|
||||||
.fetch_all(&pool)
|
|
||||||
.await
|
|
||||||
.map_err(|e| {
|
|
||||||
tracing::error!("Failed to search organizations: {}", e);
|
|
||||||
StatusCode::INTERNAL_SERVER_ERROR
|
|
||||||
})?;
|
|
||||||
|
|
||||||
Ok(Json(orgs))
|
|
||||||
}
|
|
||||||
|
|
||||||
pub async fn create_organization(
|
|
||||||
claims: common::auth::Claims,
|
|
||||||
State(pool): State<PgPool>,
|
|
||||||
Json(payload): Json<serde_json::Value>,
|
|
||||||
) -> Result<Json<Organization>, StatusCode> {
|
|
||||||
if claims.role != "admin" {
|
|
||||||
return Err(StatusCode::FORBIDDEN);
|
|
||||||
}
|
|
||||||
|
|
||||||
let name = payload
|
|
||||||
.get("name")
|
|
||||||
.and_then(|v| v.as_str())
|
|
||||||
.ok_or(StatusCode::BAD_REQUEST)?;
|
|
||||||
let domain = payload.get("domain").and_then(|v| v.as_str());
|
|
||||||
|
|
||||||
let org = sqlx::query_as::<_, Organization>(
|
|
||||||
"INSERT INTO organizations (name, domain) VALUES ($1, $2) RETURNING *",
|
|
||||||
)
|
|
||||||
.bind(name)
|
|
||||||
.bind(domain)
|
|
||||||
.fetch_one(&pool)
|
|
||||||
.await
|
|
||||||
.map_err(|e| {
|
|
||||||
tracing::error!("Failed to create organization: {}", e);
|
|
||||||
StatusCode::INTERNAL_SERVER_ERROR
|
|
||||||
})?;
|
|
||||||
|
|
||||||
Ok(Json(org))
|
|
||||||
}
|
|
||||||
|
|
||||||
pub async fn update_organization(
|
|
||||||
claims: common::auth::Claims,
|
|
||||||
State(pool): State<PgPool>,
|
|
||||||
Path(id): Path<Uuid>,
|
|
||||||
Json(payload): Json<serde_json::Value>,
|
|
||||||
) -> Result<Json<Organization>, (StatusCode, String)> {
|
|
||||||
// Only super admins or admins of the same org?
|
|
||||||
// Usually editing other orgs is a Super Admin only task.
|
|
||||||
let is_super_admin = claims.role == "admin"
|
|
||||||
&& claims.org == Uuid::parse_str("00000000-0000-0000-0000-000000000001").unwrap();
|
|
||||||
|
|
||||||
if !is_super_admin {
|
|
||||||
return Err((StatusCode::FORBIDDEN, "Super Admin access required".into()));
|
|
||||||
}
|
|
||||||
|
|
||||||
let name = payload.get("name").and_then(|v| v.as_str());
|
|
||||||
let domain = payload.get("domain").and_then(|v| v.as_str());
|
|
||||||
|
|
||||||
let org = sqlx::query_as::<_, Organization>(
|
|
||||||
"UPDATE organizations SET
|
|
||||||
name = COALESCE($1, name),
|
|
||||||
domain = COALESCE($2, domain),
|
|
||||||
updated_at = NOW()
|
|
||||||
WHERE id = $3 RETURNING *"
|
|
||||||
)
|
|
||||||
.bind(name)
|
|
||||||
.bind(domain)
|
|
||||||
.bind(id)
|
|
||||||
.fetch_one(&pool)
|
|
||||||
.await
|
|
||||||
.map_err(|e| {
|
|
||||||
tracing::error!("Failed to update organization: {}", e);
|
|
||||||
(StatusCode::INTERNAL_SERVER_ERROR, "Failed to update organization".into())
|
|
||||||
})?;
|
|
||||||
|
|
||||||
Ok(Json(org))
|
|
||||||
}
|
|
||||||
|
|
||||||
pub async fn provision_organization(
|
|
||||||
claims: common::auth::Claims,
|
|
||||||
State(pool): State<PgPool>,
|
|
||||||
Json(payload): Json<ProvisionPayload>,
|
|
||||||
) -> Result<Json<Organization>, (StatusCode, String)> {
|
|
||||||
if claims.role != "admin" || claims.org != Uuid::parse_str("00000000-0000-0000-0000-000000000001").unwrap() {
|
|
||||||
return Err((StatusCode::FORBIDDEN, "Super Admin access required".into()));
|
|
||||||
}
|
|
||||||
|
|
||||||
let mut tx = pool.begin().await.map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
|
|
||||||
|
|
||||||
let org = sqlx::query_as::<_, Organization>(
|
|
||||||
"INSERT INTO organizations (name, domain) VALUES ($1, $2) RETURNING *"
|
|
||||||
)
|
|
||||||
.bind(&payload.org_name)
|
|
||||||
.bind(&payload.org_domain)
|
|
||||||
.fetch_one(&mut *tx)
|
|
||||||
.await
|
|
||||||
.map_err(|e| {
|
|
||||||
tracing::error!("Failed to create organization: {}", e);
|
|
||||||
(StatusCode::INTERNAL_SERVER_ERROR, "Failed to create organization".into())
|
|
||||||
})?;
|
|
||||||
|
|
||||||
let password_hash = hash(payload.admin_password, DEFAULT_COST)
|
|
||||||
.map_err(|_| (StatusCode::INTERNAL_SERVER_ERROR, "Hashing failed".into()))?;
|
|
||||||
|
|
||||||
sqlx::query(
|
|
||||||
"INSERT INTO users (email, password_hash, full_name, role, organization_id) VALUES ($1, $2, $3, $4, $5)"
|
|
||||||
)
|
|
||||||
.bind(&payload.admin_email)
|
|
||||||
.bind(password_hash)
|
|
||||||
.bind(&payload.admin_full_name)
|
|
||||||
.bind("admin")
|
|
||||||
.bind(org.id)
|
|
||||||
.execute(&mut *tx)
|
|
||||||
.await
|
|
||||||
.map_err(|e| {
|
|
||||||
tracing::error!("Failed to create admin user: {}", e);
|
|
||||||
(StatusCode::CONFLICT, "User already exists or DB error".into())
|
|
||||||
})?;
|
|
||||||
|
|
||||||
tx.commit().await.map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
|
|
||||||
|
|
||||||
Ok(Json(org))
|
|
||||||
}
|
|
||||||
|
|
||||||
#[derive(serde::Deserialize)]
|
#[derive(serde::Deserialize)]
|
||||||
pub struct CreateWebhookPayload {
|
pub struct CreateWebhookPayload {
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
use axum::{
|
use axum::{
|
||||||
Json,
|
Json,
|
||||||
extract::{Path, State},
|
extract::State,
|
||||||
http::StatusCode,
|
http::StatusCode,
|
||||||
};
|
};
|
||||||
use common::models::Organization;
|
use common::models::Organization;
|
||||||
@@ -11,7 +11,7 @@ use serde_json::json;
|
|||||||
use sqlx::PgPool;
|
use sqlx::PgPool;
|
||||||
use uuid::Uuid;
|
use uuid::Uuid;
|
||||||
|
|
||||||
use super::handlers::log_action;
|
use super::handlers::{log_action, Org};
|
||||||
|
|
||||||
#[derive(Deserialize, Serialize)]
|
#[derive(Deserialize, Serialize)]
|
||||||
pub struct BrandingPayload {
|
pub struct BrandingPayload {
|
||||||
@@ -35,8 +35,8 @@ pub struct BrandingResponse {
|
|||||||
// Upload organization logo
|
// Upload organization logo
|
||||||
pub async fn upload_organization_logo(
|
pub async fn upload_organization_logo(
|
||||||
claims: common::auth::Claims,
|
claims: common::auth::Claims,
|
||||||
|
Org(org_ctx): Org,
|
||||||
State(pool): State<PgPool>,
|
State(pool): State<PgPool>,
|
||||||
Path(org_id): Path<Uuid>,
|
|
||||||
mut multipart: axum::extract::Multipart,
|
mut multipart: axum::extract::Multipart,
|
||||||
) -> Result<Json<serde_json::Value>, (StatusCode, String)> {
|
) -> Result<Json<serde_json::Value>, (StatusCode, String)> {
|
||||||
// Only admins can upload logos
|
// Only admins can upload logos
|
||||||
@@ -46,7 +46,7 @@ pub async fn upload_organization_logo(
|
|||||||
|
|
||||||
// Verify organization exists and user has access
|
// Verify organization exists and user has access
|
||||||
let _ = sqlx::query_as::<_, Organization>("SELECT * FROM organizations WHERE id = $1")
|
let _ = sqlx::query_as::<_, Organization>("SELECT * FROM organizations WHERE id = $1")
|
||||||
.bind(org_id)
|
.bind(org_ctx.id)
|
||||||
.fetch_one(&pool)
|
.fetch_one(&pool)
|
||||||
.await
|
.await
|
||||||
.map_err(|_| (StatusCode::NOT_FOUND, "Organization not found".into()))?;
|
.map_err(|_| (StatusCode::NOT_FOUND, "Organization not found".into()))?;
|
||||||
@@ -98,7 +98,7 @@ pub async fn upload_organization_logo(
|
|||||||
})?;
|
})?;
|
||||||
|
|
||||||
// Generate unique filename
|
// Generate unique filename
|
||||||
let unique_filename = format!("{}_{}.{}", org_id, uuid::Uuid::new_v4(), ext);
|
let unique_filename = format!("{}_{}.{}", org_ctx.id, uuid::Uuid::new_v4(), ext);
|
||||||
let filepath = format!("uploads/org-logos/{}", unique_filename);
|
let filepath = format!("uploads/org-logos/{}", unique_filename);
|
||||||
|
|
||||||
// Save file
|
// Save file
|
||||||
@@ -113,7 +113,7 @@ pub async fn upload_organization_logo(
|
|||||||
let logo_url = format!("/{}", filepath);
|
let logo_url = format!("/{}", filepath);
|
||||||
sqlx::query("UPDATE organizations SET logo_url = $1 WHERE id = $2")
|
sqlx::query("UPDATE organizations SET logo_url = $1 WHERE id = $2")
|
||||||
.bind(&logo_url)
|
.bind(&logo_url)
|
||||||
.bind(org_id)
|
.bind(org_ctx.id)
|
||||||
.execute(&pool)
|
.execute(&pool)
|
||||||
.await
|
.await
|
||||||
.map_err(|e| {
|
.map_err(|e| {
|
||||||
@@ -129,7 +129,7 @@ pub async fn upload_organization_logo(
|
|||||||
claims.sub,
|
claims.sub,
|
||||||
"UPDATE_LOGO",
|
"UPDATE_LOGO",
|
||||||
"Organization",
|
"Organization",
|
||||||
org_id,
|
org_ctx.id,
|
||||||
json!({"logo_url": &logo_url}),
|
json!({"logo_url": &logo_url}),
|
||||||
)
|
)
|
||||||
.await;
|
.await;
|
||||||
@@ -147,8 +147,8 @@ pub async fn upload_organization_logo(
|
|||||||
// Upload organization favicon
|
// Upload organization favicon
|
||||||
pub async fn upload_organization_favicon(
|
pub async fn upload_organization_favicon(
|
||||||
claims: common::auth::Claims,
|
claims: common::auth::Claims,
|
||||||
|
Org(org_ctx): Org,
|
||||||
State(pool): State<PgPool>,
|
State(pool): State<PgPool>,
|
||||||
Path(org_id): Path<Uuid>,
|
|
||||||
mut multipart: axum::extract::Multipart,
|
mut multipart: axum::extract::Multipart,
|
||||||
) -> Result<Json<serde_json::Value>, (StatusCode, String)> {
|
) -> Result<Json<serde_json::Value>, (StatusCode, String)> {
|
||||||
// Only admins can upload favicons
|
// Only admins can upload favicons
|
||||||
@@ -158,7 +158,7 @@ pub async fn upload_organization_favicon(
|
|||||||
|
|
||||||
// Verify organization exists and user has access
|
// Verify organization exists and user has access
|
||||||
let _ = sqlx::query_as::<_, Organization>("SELECT * FROM organizations WHERE id = $1")
|
let _ = sqlx::query_as::<_, Organization>("SELECT * FROM organizations WHERE id = $1")
|
||||||
.bind(org_id)
|
.bind(org_ctx.id)
|
||||||
.fetch_one(&pool)
|
.fetch_one(&pool)
|
||||||
.await
|
.await
|
||||||
.map_err(|_| (StatusCode::NOT_FOUND, "Organization not found".into()))?;
|
.map_err(|_| (StatusCode::NOT_FOUND, "Organization not found".into()))?;
|
||||||
@@ -210,7 +210,7 @@ pub async fn upload_organization_favicon(
|
|||||||
})?;
|
})?;
|
||||||
|
|
||||||
// Generate unique filename
|
// Generate unique filename
|
||||||
let unique_filename = format!("{}_{}.{}", org_id, uuid::Uuid::new_v4(), ext);
|
let unique_filename = format!("{}_{}.{}", org_ctx.id, uuid::Uuid::new_v4(), ext);
|
||||||
let filepath = format!("uploads/org-favicons/{}", unique_filename);
|
let filepath = format!("uploads/org-favicons/{}", unique_filename);
|
||||||
|
|
||||||
// Save file
|
// Save file
|
||||||
@@ -225,7 +225,7 @@ pub async fn upload_organization_favicon(
|
|||||||
let favicon_url = format!("/{}", filepath);
|
let favicon_url = format!("/{}", filepath);
|
||||||
sqlx::query("UPDATE organizations SET favicon_url = $1 WHERE id = $2")
|
sqlx::query("UPDATE organizations SET favicon_url = $1 WHERE id = $2")
|
||||||
.bind(&favicon_url)
|
.bind(&favicon_url)
|
||||||
.bind(org_id)
|
.bind(org_ctx.id)
|
||||||
.execute(&pool)
|
.execute(&pool)
|
||||||
.await
|
.await
|
||||||
.map_err(|e| {
|
.map_err(|e| {
|
||||||
@@ -241,7 +241,7 @@ pub async fn upload_organization_favicon(
|
|||||||
claims.sub,
|
claims.sub,
|
||||||
"UPDATE_FAVICON",
|
"UPDATE_FAVICON",
|
||||||
"Organization",
|
"Organization",
|
||||||
org_id,
|
org_ctx.id,
|
||||||
json!({"favicon_url": &favicon_url}),
|
json!({"favicon_url": &favicon_url}),
|
||||||
)
|
)
|
||||||
.await;
|
.await;
|
||||||
@@ -259,8 +259,8 @@ pub async fn upload_organization_favicon(
|
|||||||
// Update organization branding colors
|
// Update organization branding colors
|
||||||
pub async fn update_organization_branding(
|
pub async fn update_organization_branding(
|
||||||
claims: common::auth::Claims,
|
claims: common::auth::Claims,
|
||||||
|
Org(org_ctx): Org,
|
||||||
State(pool): State<PgPool>,
|
State(pool): State<PgPool>,
|
||||||
Path(org_id): Path<Uuid>,
|
|
||||||
Json(payload): Json<BrandingPayload>,
|
Json(payload): Json<BrandingPayload>,
|
||||||
) -> Result<Json<Organization>, (StatusCode, String)> {
|
) -> Result<Json<Organization>, (StatusCode, String)> {
|
||||||
// Only admins can update branding
|
// Only admins can update branding
|
||||||
@@ -310,7 +310,7 @@ pub async fn update_organization_branding(
|
|||||||
.bind(&payload.secondary_color)
|
.bind(&payload.secondary_color)
|
||||||
.bind(&payload.platform_name)
|
.bind(&payload.platform_name)
|
||||||
.bind(&payload.logo_variant)
|
.bind(&payload.logo_variant)
|
||||||
.bind(org_id)
|
.bind(org_ctx.id)
|
||||||
.fetch_one(&pool)
|
.fetch_one(&pool)
|
||||||
.await
|
.await
|
||||||
.map_err(|e| {
|
.map_err(|e| {
|
||||||
@@ -326,7 +326,7 @@ pub async fn update_organization_branding(
|
|||||||
claims.sub,
|
claims.sub,
|
||||||
"UPDATE_BRANDING",
|
"UPDATE_BRANDING",
|
||||||
"Organization",
|
"Organization",
|
||||||
org_id,
|
org_ctx.id,
|
||||||
json!(payload),
|
json!(payload),
|
||||||
)
|
)
|
||||||
.await;
|
.await;
|
||||||
@@ -337,10 +337,9 @@ pub async fn update_organization_branding(
|
|||||||
// Get organization branding (public endpoint)
|
// Get organization branding (public endpoint)
|
||||||
pub async fn get_organization_branding(
|
pub async fn get_organization_branding(
|
||||||
State(pool): State<PgPool>,
|
State(pool): State<PgPool>,
|
||||||
Path(org_id): Path<Uuid>,
|
|
||||||
) -> Result<Json<BrandingResponse>, StatusCode> {
|
) -> Result<Json<BrandingResponse>, StatusCode> {
|
||||||
let org = sqlx::query_as::<_, Organization>("SELECT * FROM organizations WHERE id = $1")
|
let org = sqlx::query_as::<_, Organization>("SELECT * FROM organizations WHERE id = $1")
|
||||||
.bind(org_id)
|
.bind(Uuid::parse_str("00000000-0000-0000-0000-000000000001").unwrap())
|
||||||
.fetch_one(&pool)
|
.fetch_one(&pool)
|
||||||
.await
|
.await
|
||||||
.map_err(|_| StatusCode::NOT_FOUND)?;
|
.map_err(|_| StatusCode::NOT_FOUND)?;
|
||||||
|
|||||||
@@ -150,6 +150,7 @@ async fn main() {
|
|||||||
.route("/lessons/{id}/generate-role-play", post(handlers::generate_role_play))
|
.route("/lessons/{id}/generate-role-play", post(handlers::generate_role_play))
|
||||||
.route("/lessons/{id}/generate-hotspots", post(handlers::generate_hotspots))
|
.route("/lessons/{id}/generate-hotspots", post(handlers::generate_hotspots))
|
||||||
.route("/lessons/{id}/generate-mermaid", post(handlers::generate_mermaid_diagram))
|
.route("/lessons/{id}/generate-mermaid", post(handlers::generate_mermaid_diagram))
|
||||||
|
.route("/lessons/{id}/generate-code-lab", post(handlers::generate_code_lab))
|
||||||
.route("/courses/generate", post(handlers::generate_course))
|
.route("/courses/generate", post(handlers::generate_course))
|
||||||
.route("/courses/{id}/export", get(handlers::export_course))
|
.route("/courses/{id}/export", get(handlers::export_course))
|
||||||
.route("/courses/import", post(handlers::import_course))
|
.route("/courses/import", post(handlers::import_course))
|
||||||
@@ -172,12 +173,14 @@ async fn main() {
|
|||||||
.route("/api/assets/upload", post(handlers_assets::upload_asset))
|
.route("/api/assets/upload", post(handlers_assets::upload_asset))
|
||||||
.route("/api/assets/{id}", delete(handlers_assets::delete_asset))
|
.route("/api/assets/{id}", delete(handlers_assets::delete_asset))
|
||||||
.layer(DefaultBodyLimit::disable())
|
.layer(DefaultBodyLimit::disable())
|
||||||
|
/*
|
||||||
.route(
|
.route(
|
||||||
"/organizations",
|
"/organizations",
|
||||||
get(handlers::get_organizations).post(handlers::create_organization),
|
get(handlers::get_organizations).post(handlers::create_organization),
|
||||||
)
|
)
|
||||||
.route("/organizations/{id}", put(handlers::update_organization))
|
.route("/organizations/{id}", put(handlers::update_organization))
|
||||||
.route("/admin/provision", post(handlers::provision_organization))
|
.route("/admin/provision", post(handlers::provision_organization))
|
||||||
|
*/
|
||||||
.route(
|
.route(
|
||||||
"/webhooks",
|
"/webhooks",
|
||||||
get(handlers::get_webhooks).post(handlers::create_webhook),
|
get(handlers::get_webhooks).post(handlers::create_webhook),
|
||||||
@@ -192,15 +195,15 @@ async fn main() {
|
|||||||
get(handlers::get_sso_config).put(handlers::update_sso_config),
|
get(handlers::get_sso_config).put(handlers::update_sso_config),
|
||||||
)
|
)
|
||||||
.route(
|
.route(
|
||||||
"/organizations/{id}/logo",
|
"/organization/logo",
|
||||||
post(handlers_branding::upload_organization_logo),
|
post(handlers_branding::upload_organization_logo),
|
||||||
)
|
)
|
||||||
.route(
|
.route(
|
||||||
"/organizations/{id}/favicon",
|
"/organization/favicon",
|
||||||
post(handlers_branding::upload_organization_favicon),
|
post(handlers_branding::upload_organization_favicon),
|
||||||
)
|
)
|
||||||
.route(
|
.route(
|
||||||
"/organizations/{id}/branding",
|
"/organization/branding",
|
||||||
axum::routing::put(handlers_branding::update_organization_branding),
|
axum::routing::put(handlers_branding::update_organization_branding),
|
||||||
)
|
)
|
||||||
// Content Libraries routes
|
// Content Libraries routes
|
||||||
@@ -290,11 +293,7 @@ async fn main() {
|
|||||||
.route("/auth/sso/login/{org_id}", get(handlers::sso_login_init))
|
.route("/auth/sso/login/{org_id}", get(handlers::sso_login_init))
|
||||||
.route("/auth/sso/callback", get(handlers::sso_callback))
|
.route("/auth/sso/callback", get(handlers::sso_callback))
|
||||||
.route(
|
.route(
|
||||||
"/organizations/search",
|
"/branding",
|
||||||
get(handlers::search_organizations),
|
|
||||||
)
|
|
||||||
.route(
|
|
||||||
"/organizations/{id}/branding",
|
|
||||||
get(handlers_branding::get_organization_branding),
|
get(handlers_branding::get_organization_branding),
|
||||||
)
|
)
|
||||||
.nest_service("/assets", tower_http::services::ServeDir::new("uploads"))
|
.nest_service("/assets", tower_http::services::ServeDir::new("uploads"))
|
||||||
|
|||||||
@@ -580,39 +580,18 @@ pub async fn get_course_catalog(
|
|||||||
query.organization_id,
|
query.organization_id,
|
||||||
query.user_id
|
query.user_id
|
||||||
);
|
);
|
||||||
let courses = match (query.organization_id, query.user_id) {
|
let courses = if let Some(user_id) = query.user_id {
|
||||||
(Some(org_id), Some(user_id)) => {
|
sqlx::query_as::<_, Course>(
|
||||||
sqlx::query_as::<_, Course>(
|
"SELECT DISTINCT c.* FROM courses c
|
||||||
"SELECT DISTINCT c.* FROM courses c
|
LEFT JOIN enrollments e ON c.id = e.course_id AND e.user_id = $1"
|
||||||
LEFT JOIN enrollments e ON c.id = e.course_id AND e.user_id = $2
|
)
|
||||||
WHERE c.organization_id = $1 OR c.organization_id = '00000000-0000-0000-0000-000000000001' OR e.id IS NOT NULL"
|
.bind(user_id)
|
||||||
)
|
.fetch_all(&pool)
|
||||||
.bind(org_id)
|
.await
|
||||||
.bind(user_id)
|
} else {
|
||||||
|
sqlx::query_as::<_, Course>("SELECT * FROM courses")
|
||||||
.fetch_all(&pool)
|
.fetch_all(&pool)
|
||||||
.await
|
.await
|
||||||
}
|
|
||||||
(Some(org_id), None) => {
|
|
||||||
sqlx::query_as::<_, Course>("SELECT * FROM courses WHERE organization_id = $1 OR organization_id = '00000000-0000-0000-0000-000000000001'")
|
|
||||||
.bind(org_id)
|
|
||||||
.fetch_all(&pool)
|
|
||||||
.await
|
|
||||||
}
|
|
||||||
(None, Some(user_id)) => {
|
|
||||||
sqlx::query_as::<_, Course>(
|
|
||||||
"SELECT DISTINCT c.* FROM courses c
|
|
||||||
JOIN enrollments e ON c.id = e.course_id
|
|
||||||
WHERE e.user_id = $1 OR c.organization_id = '00000000-0000-0000-0000-000000000001'"
|
|
||||||
)
|
|
||||||
.bind(user_id)
|
|
||||||
.fetch_all(&pool)
|
|
||||||
.await
|
|
||||||
}
|
|
||||||
(None, None) => {
|
|
||||||
sqlx::query_as::<_, Course>("SELECT * FROM courses")
|
|
||||||
.fetch_all(&pool)
|
|
||||||
.await
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.map_err(|e: sqlx::Error| {
|
.map_err(|e: sqlx::Error| {
|
||||||
tracing::error!("Catalog fetch failed: {}", e);
|
tracing::error!("Catalog fetch failed: {}", e);
|
||||||
@@ -2349,7 +2328,124 @@ pub struct ChatResponse {
|
|||||||
pub session_id: Uuid,
|
pub session_id: Uuid,
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#[derive(Deserialize)]
|
||||||
|
pub struct CodeHintPayload {
|
||||||
|
pub current_code: String,
|
||||||
|
pub error_message: Option<String>,
|
||||||
|
pub instructions: Option<String>,
|
||||||
|
pub language: Option<String>,
|
||||||
|
}
|
||||||
|
|
||||||
|
pub async fn get_code_hint(
|
||||||
|
claims: Claims,
|
||||||
|
State(pool): State<PgPool>,
|
||||||
|
Path(lesson_id): Path<Uuid>,
|
||||||
|
Json(payload): Json<CodeHintPayload>,
|
||||||
|
) -> Result<Json<serde_json::Value>, (StatusCode, String)> {
|
||||||
|
tracing::info!("Code hint request for lesson_id={}", lesson_id);
|
||||||
|
|
||||||
|
// Access check: enrolled or preview
|
||||||
|
let is_enrolled = sqlx::query_scalar::<_, bool>(
|
||||||
|
"SELECT EXISTS(SELECT 1 FROM enrollments WHERE user_id = $1 AND course_id = (SELECT course_id FROM modules WHERE id = (SELECT module_id FROM lessons WHERE id = $2)))"
|
||||||
|
)
|
||||||
|
.bind(claims.sub)
|
||||||
|
.bind(lesson_id)
|
||||||
|
.fetch_one(&pool)
|
||||||
|
.await
|
||||||
|
.unwrap_or(false);
|
||||||
|
|
||||||
|
let is_previewable = sqlx::query_scalar::<_, bool>(
|
||||||
|
"SELECT COALESCE(is_previewable, false) FROM lessons WHERE id = $1"
|
||||||
|
)
|
||||||
|
.bind(lesson_id)
|
||||||
|
.fetch_one(&pool)
|
||||||
|
.await
|
||||||
|
.unwrap_or(false);
|
||||||
|
|
||||||
|
if !is_enrolled && !is_previewable {
|
||||||
|
return Err((StatusCode::FORBIDDEN, "No tienes acceso a esta lección".into()));
|
||||||
|
}
|
||||||
|
|
||||||
|
let provider = std::env::var("AI_PROVIDER").unwrap_or_else(|_| "local".to_string());
|
||||||
|
let client = reqwest::Client::new();
|
||||||
|
|
||||||
|
let (url, auth_header, model) = if provider == "local" {
|
||||||
|
let base_url = std::env::var("LOCAL_OLLAMA_URL").unwrap_or_else(|_| "http://ollama:11434".to_string());
|
||||||
|
let model = std::env::var("LOCAL_LLM_MODEL").unwrap_or_else(|_| "llama3.2:3b".to_string());
|
||||||
|
(format!("{}/v1/chat/completions", base_url), "".to_string(), model)
|
||||||
|
} else {
|
||||||
|
(
|
||||||
|
"https://api.openai.com/v1/chat/completions".to_string(),
|
||||||
|
format!("Bearer {}", std::env::var("OPENAI_API_KEY").unwrap_or_default()),
|
||||||
|
"gpt-4o".to_string(),
|
||||||
|
)
|
||||||
|
};
|
||||||
|
|
||||||
|
let language = payload.language.as_deref().unwrap_or("código");
|
||||||
|
let instructions = payload.instructions.as_deref().unwrap_or("Sin instrucciones específicas.");
|
||||||
|
let error_context = match &payload.error_message {
|
||||||
|
Some(err) if !err.trim().is_empty() => format!("\nError recibido del estudiante:\n```\n{}\n```", err),
|
||||||
|
_ => String::new(),
|
||||||
|
};
|
||||||
|
|
||||||
|
let system_prompt = format!(
|
||||||
|
"Eres un tutor de programación experto y pedagogo. \
|
||||||
|
Tu misión es ayudar a un estudiante que está trabajando en un ejercicio de {}.\n\
|
||||||
|
INSTRUCCIONES CRÍTICAS:\n\
|
||||||
|
1. NO proporciones la solución completa directamente.\n\
|
||||||
|
2. Da una PISTA PEDAGÓGICA: señala el concepto equivocado, sugiere qué investigar, o pregunta con qué parte tiene dificultad.\n\
|
||||||
|
3. Sé amable, encouraging y conciso (máximo 3-4 oraciones).\n\
|
||||||
|
4. Si hay un error, explica brevemente qué tipo de error es sin dar el fix directo.\n\n\
|
||||||
|
Ejercicio: {}\n{}",
|
||||||
|
language, instructions, error_context
|
||||||
|
);
|
||||||
|
|
||||||
|
let user_message = format!(
|
||||||
|
"Mi código actual es:\n```{}\n{}\n```\nNecesito una pista para seguir avanzando.",
|
||||||
|
language, payload.current_code
|
||||||
|
);
|
||||||
|
|
||||||
|
let response = client
|
||||||
|
.post(&url)
|
||||||
|
.header("Content-Type", "application/json")
|
||||||
|
.header("Authorization", auth_header)
|
||||||
|
.json(&serde_json::json!({
|
||||||
|
"model": model,
|
||||||
|
"messages": [
|
||||||
|
{ "role": "system", "content": system_prompt },
|
||||||
|
{ "role": "user", "content": user_message }
|
||||||
|
],
|
||||||
|
"temperature": 0.5
|
||||||
|
}))
|
||||||
|
.send()
|
||||||
|
.await
|
||||||
|
.map_err(|e| {
|
||||||
|
tracing::error!("LLM Request failed: {}", e);
|
||||||
|
(StatusCode::INTERNAL_SERVER_ERROR, "Error contacting AI provider".into())
|
||||||
|
})?;
|
||||||
|
|
||||||
|
if !response.status().is_success() {
|
||||||
|
let err_body = response.text().await.unwrap_or_default();
|
||||||
|
tracing::error!("LLM Error response: {}", err_body);
|
||||||
|
return Err((StatusCode::INTERNAL_SERVER_ERROR, "AI provider returned an error".into()));
|
||||||
|
}
|
||||||
|
|
||||||
|
let ai_data: serde_json::Value = response.json().await.map_err(|e| {
|
||||||
|
tracing::error!("Failed to parse LLM JSON: {}", e);
|
||||||
|
(StatusCode::INTERNAL_SERVER_ERROR, "Error parsing AI response".into())
|
||||||
|
})?;
|
||||||
|
|
||||||
|
let hint = ai_data["choices"][0]["message"]["content"]
|
||||||
|
.as_str()
|
||||||
|
.unwrap_or("No pude generar una pista en este momento. Por favor intenta de nuevo.")
|
||||||
|
.trim()
|
||||||
|
.to_string();
|
||||||
|
|
||||||
|
Ok(Json(serde_json::json!({ "hint": hint })))
|
||||||
|
}
|
||||||
|
|
||||||
pub async fn chat_with_tutor(
|
pub async fn chat_with_tutor(
|
||||||
|
|
||||||
Org(org_ctx): Org,
|
Org(org_ctx): Org,
|
||||||
claims: Claims,
|
claims: Claims,
|
||||||
State(pool): State<PgPool>,
|
State(pool): State<PgPool>,
|
||||||
|
|||||||
@@ -122,6 +122,7 @@ async fn main() {
|
|||||||
.route("/audio/evaluate-file", post(handlers::evaluate_audio_file))
|
.route("/audio/evaluate-file", post(handlers::evaluate_audio_file))
|
||||||
.route("/lessons/{id}/chat", post(handlers::chat_with_tutor))
|
.route("/lessons/{id}/chat", post(handlers::chat_with_tutor))
|
||||||
.route("/lessons/{id}/chat-role-play", post(handlers::chat_role_play))
|
.route("/lessons/{id}/chat-role-play", post(handlers::chat_role_play))
|
||||||
|
.route("/lessons/{id}/code-hint", post(handlers::get_code_hint))
|
||||||
.route("/lessons/{id}/feedback", get(handlers::get_lesson_feedback))
|
.route("/lessons/{id}/feedback", get(handlers::get_lesson_feedback))
|
||||||
.route("/notifications", get(handlers::get_notifications))
|
.route("/notifications", get(handlers::get_notifications))
|
||||||
.route(
|
.route(
|
||||||
|
|||||||
@@ -45,7 +45,7 @@ pub async fn org_extractor_middleware(
|
|||||||
// NOTA: El secreto debe venir de una variable de entorno en producción.
|
// NOTA: El secreto debe venir de una variable de entorno en producción.
|
||||||
let secret = std::env::var("JWT_SECRET").unwrap_or_else(|_| "secret".to_string());
|
let secret = std::env::var("JWT_SECRET").unwrap_or_else(|_| "secret".to_string());
|
||||||
|
|
||||||
let mut claims = decode::<Claims>(
|
let claims = decode::<Claims>(
|
||||||
&token,
|
&token,
|
||||||
&DecodingKey::from_secret(secret.as_ref()),
|
&DecodingKey::from_secret(secret.as_ref()),
|
||||||
&Validation::default(),
|
&Validation::default(),
|
||||||
@@ -53,21 +53,8 @@ pub async fn org_extractor_middleware(
|
|||||||
.map_err(|_| StatusCode::UNAUTHORIZED)?
|
.map_err(|_| StatusCode::UNAUTHORIZED)?
|
||||||
.claims;
|
.claims;
|
||||||
|
|
||||||
// Check for organization override header (only for admins)
|
// Forzar el uso de la organización por defecto para arquitectura single-tenant
|
||||||
let org_id = if claims.role == "admin" {
|
let org_id = Uuid::parse_str("00000000-0000-0000-0000-000000000001").unwrap();
|
||||||
req.headers()
|
|
||||||
.get("x-organization-id")
|
|
||||||
.and_then(|h| h.to_str().ok())
|
|
||||||
.and_then(|s| Uuid::parse_str(s).ok())
|
|
||||||
.unwrap_or(claims.org)
|
|
||||||
} else {
|
|
||||||
claims.org
|
|
||||||
};
|
|
||||||
|
|
||||||
// Update claims.org if overridden so downstream logic sees the new org
|
|
||||||
if org_id != claims.org {
|
|
||||||
claims.org = org_id;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Insertamos el contexto y las claims en las extensiones de la petición.
|
// Insertamos el contexto y las claims en las extensiones de la petición.
|
||||||
req.extensions_mut().insert(OrgContext { id: org_id });
|
req.extensions_mut().insert(OrgContext { id: org_id });
|
||||||
|
|||||||
@@ -4,25 +4,19 @@ import React, { useState } from "react";
|
|||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import { lmsApi } from "@/lib/api";
|
import { lmsApi } from "@/lib/api";
|
||||||
import { useAuth } from "@/context/AuthContext";
|
import { useAuth } from "@/context/AuthContext";
|
||||||
import AsyncCombobox from "@/components/AsyncCombobox";
|
import { GraduationCap, Lock, Mail, User, ChevronLeft } from "lucide-react";
|
||||||
import { GraduationCap, Lock, Mail, User, Building2, ChevronLeft, ArrowRight } from "lucide-react";
|
|
||||||
|
|
||||||
type ViewMode = 'selection' | 'personal' | 'enterprise';
|
|
||||||
|
|
||||||
export default function ExperienceLoginPage() {
|
export default function ExperienceLoginPage() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { login } = useAuth();
|
const { login } = useAuth();
|
||||||
|
|
||||||
// State
|
// State
|
||||||
const [viewMode, setViewMode] = useState<ViewMode>('selection');
|
const [isLogin, setIsLogin] = useState(true);
|
||||||
const [isLogin, setIsLogin] = useState(true); // For Personal flow
|
|
||||||
|
|
||||||
// Form Inputs
|
// Form Inputs
|
||||||
const [email, setEmail] = useState("");
|
const [email, setEmail] = useState("");
|
||||||
const [password, setPassword] = useState("");
|
const [password, setPassword] = useState("");
|
||||||
const [organizationName, setOrganizationName] = useState("");
|
|
||||||
const [fullName, setFullName] = useState("");
|
const [fullName, setFullName] = useState("");
|
||||||
const [orgIdForSSO, setOrgIdForSSO] = useState("");
|
|
||||||
|
|
||||||
// UI State
|
// UI State
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
@@ -34,29 +28,21 @@ export default function ExperienceLoginPage() {
|
|||||||
setLoading(true);
|
setLoading(true);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
if (viewMode === 'personal') {
|
if (isLogin) {
|
||||||
if (isLogin) {
|
const response = await lmsApi.login({ email, password });
|
||||||
const response = await lmsApi.login({ email, password });
|
if (response.user.role !== "student") {
|
||||||
if (response.user.role !== "student") {
|
throw new Error("Acceso denegado. Este portal es solo para estudiantes.");
|
||||||
throw new Error("Acceso denegado. Este portal es solo para estudiantes.");
|
|
||||||
}
|
|
||||||
login(response.user, response.token);
|
|
||||||
router.push("/");
|
|
||||||
} else {
|
|
||||||
const response = await lmsApi.register({
|
|
||||||
email,
|
|
||||||
password,
|
|
||||||
full_name: fullName,
|
|
||||||
organization_name: organizationName,
|
|
||||||
});
|
|
||||||
login(response.user, response.token);
|
|
||||||
router.push("/");
|
|
||||||
}
|
}
|
||||||
} else if (viewMode === 'enterprise') {
|
login(response.user, response.token);
|
||||||
if (!orgIdForSSO) {
|
router.push("/");
|
||||||
throw new Error("El ID de la organización es requerido");
|
} else {
|
||||||
}
|
const response = await lmsApi.register({
|
||||||
lmsApi.initSSOLogin(orgIdForSSO);
|
email,
|
||||||
|
password,
|
||||||
|
full_name: fullName,
|
||||||
|
});
|
||||||
|
login(response.user, response.token);
|
||||||
|
router.push("/");
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
setError(err instanceof Error ? err.message : "Falló la autenticación");
|
setError(err instanceof Error ? err.message : "Falló la autenticación");
|
||||||
@@ -64,11 +50,6 @@ export default function ExperienceLoginPage() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleBack = () => {
|
|
||||||
setError("");
|
|
||||||
setViewMode('selection');
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-slate-50 dark:bg-gradient-to-br dark:from-slate-950 dark:via-indigo-950 dark:to-slate-950 flex items-center justify-center p-4 transition-colors">
|
<div className="min-h-screen bg-slate-50 dark:bg-gradient-to-br dark:from-slate-950 dark:via-indigo-950 dark:to-slate-950 flex items-center justify-center p-4 transition-colors">
|
||||||
<div className="w-full max-w-md animate-in fade-in zoom-in duration-500">
|
<div className="w-full max-w-md animate-in fade-in zoom-in duration-500">
|
||||||
@@ -83,143 +64,56 @@ export default function ExperienceLoginPage() {
|
|||||||
|
|
||||||
{/* Main Content Card */}
|
{/* Main Content Card */}
|
||||||
<div className="bg-white dark:bg-white/5 backdrop-blur-xl border border-slate-200 dark:border-white/10 shadow-xl dark:shadow-none rounded-3xl overflow-hidden relative transition-colors">
|
<div className="bg-white dark:bg-white/5 backdrop-blur-xl border border-slate-200 dark:border-white/10 shadow-xl dark:shadow-none rounded-3xl overflow-hidden relative transition-colors">
|
||||||
|
<div className="p-8">
|
||||||
{/* View: SELECTION */}
|
<div className="flex gap-2 mb-6 bg-slate-100 dark:bg-white/5 rounded-xl p-1">
|
||||||
{viewMode === 'selection' && (
|
|
||||||
<div className="p-8 space-y-4">
|
|
||||||
<h2 className="text-xl font-bold text-slate-900 dark:text-white text-center mb-6">¿Cómo deseas ingresar?</h2>
|
|
||||||
|
|
||||||
<button
|
<button
|
||||||
onClick={() => setViewMode('personal')}
|
onClick={() => setIsLogin(true)}
|
||||||
className="w-full group p-4 rounded-2xl bg-slate-50 dark:bg-white/5 hover:bg-indigo-50 dark:hover:bg-indigo-600/20 border border-slate-200 hover:border-indigo-300 dark:border-white/10 dark:hover:border-indigo-500/50 transition-all text-left flex items-center gap-4"
|
className={`flex-1 py-2 px-4 rounded-lg font-bold text-sm transition-all ${isLogin ? "bg-indigo-600 text-white shadow-lg" : "text-slate-500 dark:text-gray-400 hover:text-slate-900 dark:hover:text-white"}`}
|
||||||
>
|
>
|
||||||
<div className="w-12 h-12 rounded-xl bg-indigo-100 dark:bg-indigo-500/20 flex items-center justify-center text-indigo-600 dark:text-indigo-400 group-hover:text-indigo-700 dark:group-hover:text-indigo-200 transition-colors">
|
Iniciar Sesión
|
||||||
<User size={24} />
|
|
||||||
</div>
|
|
||||||
<div className="flex-1">
|
|
||||||
<div className="font-bold text-slate-900 dark:text-white text-lg">Personas</div>
|
|
||||||
<div className="text-xs text-slate-500 dark:text-gray-400">Acceso con correo personal</div>
|
|
||||||
</div>
|
|
||||||
<ArrowRight className="text-indigo-500 opacity-0 group-hover:opacity-100 transition-all -translate-x-2 group-hover:translate-x-0" />
|
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
onClick={() => setViewMode('enterprise')}
|
onClick={() => setIsLogin(false)}
|
||||||
className="w-full group p-4 rounded-2xl bg-slate-50 dark:bg-white/5 hover:bg-emerald-50 dark:hover:bg-emerald-600/20 border border-slate-200 hover:border-emerald-300 dark:border-white/10 dark:hover:border-emerald-500/50 transition-all text-left flex items-center gap-4"
|
className={`flex-1 py-2 px-4 rounded-lg font-bold text-sm transition-all ${!isLogin ? "bg-indigo-600 text-white shadow-lg" : "text-slate-500 dark:text-gray-400 hover:text-slate-900 dark:hover:text-white"}`}
|
||||||
>
|
>
|
||||||
<div className="w-12 h-12 rounded-xl bg-emerald-100 dark:bg-emerald-500/20 flex items-center justify-center text-emerald-600 dark:text-emerald-400 group-hover:text-emerald-700 dark:group-hover:text-emerald-200 transition-colors">
|
Registrarse
|
||||||
<Building2 size={24} />
|
|
||||||
</div>
|
|
||||||
<div className="flex-1">
|
|
||||||
<div className="font-bold text-slate-900 dark:text-white text-lg">Empresas</div>
|
|
||||||
<div className="text-xs text-slate-500 dark:text-gray-400">Acceso corporativo (SSO)</div>
|
|
||||||
</div>
|
|
||||||
<ArrowRight className="text-emerald-500 opacity-0 group-hover:opacity-100 transition-all -translate-x-2 group-hover:translate-x-0" />
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
|
|
||||||
{/* View: PERSONAL (Email/Pass) */}
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
{viewMode === 'personal' && (
|
{!isLogin && (
|
||||||
<div className="p-8">
|
<div className="space-y-1">
|
||||||
<button onClick={handleBack} className="flex items-center gap-2 text-xs font-bold text-slate-500 dark:text-gray-500 hover:text-slate-900 dark:hover:text-white mb-6 transition-colors">
|
<label className="text-xs font-bold text-slate-500 dark:text-gray-400 uppercase tracking-wider">Nombre Completo</label>
|
||||||
<ChevronLeft size={14} /> Volver
|
<div className="relative">
|
||||||
</button>
|
<User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 dark:text-gray-500" />
|
||||||
|
<input required type="text" value={fullName} onChange={e => setFullName(e.target.value)} className="w-full bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-white/10 rounded-xl py-3 pl-10 pr-4 text-slate-900 dark:text-white text-sm focus:border-indigo-500 focus:outline-none transition-colors" placeholder="Juan Pérez" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
<div className="flex gap-2 mb-6 bg-slate-100 dark:bg-white/5 rounded-xl p-1">
|
<div className="space-y-1">
|
||||||
<button
|
<label className="text-xs font-bold text-slate-500 dark:text-gray-400 uppercase tracking-wider">Correo Electrónico</label>
|
||||||
onClick={() => setIsLogin(true)}
|
<div className="relative">
|
||||||
className={`flex-1 py-2 px-4 rounded-lg font-bold text-sm transition-all ${isLogin ? "bg-indigo-600 text-white shadow-lg" : "text-slate-500 dark:text-gray-400 hover:text-slate-900 dark:hover:text-white"}`}
|
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 dark:text-gray-500" />
|
||||||
>
|
<input required type="email" value={email} onChange={e => setEmail(e.target.value)} className="w-full bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-white/10 rounded-xl py-3 pl-10 pr-4 text-slate-900 dark:text-white text-sm focus:border-indigo-500 focus:outline-none transition-colors" placeholder="nombre@correo.com" />
|
||||||
Iniciar Sesión
|
</div>
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => setIsLogin(false)}
|
|
||||||
className={`flex-1 py-2 px-4 rounded-lg font-bold text-sm transition-all ${!isLogin ? "bg-indigo-600 text-white shadow-lg" : "text-slate-500 dark:text-gray-400 hover:text-slate-900 dark:hover:text-white"}`}
|
|
||||||
>
|
|
||||||
Registrarse
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form onSubmit={handleSubmit} className="space-y-4">
|
<div className="space-y-1">
|
||||||
{!isLogin && (
|
<label className="text-xs font-bold text-slate-500 dark:text-gray-400 uppercase tracking-wider">Contraseña</label>
|
||||||
<>
|
<div className="relative">
|
||||||
<div className="space-y-1">
|
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 dark:text-gray-500" />
|
||||||
<label className="text-xs font-bold text-slate-500 dark:text-gray-400 uppercase tracking-wider">Nombre Completo</label>
|
<input required type="password" value={password} onChange={e => setPassword(e.target.value)} className="w-full bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-white/10 rounded-xl py-3 pl-10 pr-4 text-slate-900 dark:text-white text-sm focus:border-indigo-500 focus:outline-none transition-colors" placeholder="••••••••" />
|
||||||
<div className="relative">
|
|
||||||
<User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 dark:text-gray-500" />
|
|
||||||
<input required type="text" value={fullName} onChange={e => setFullName(e.target.value)} className="w-full bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-white/10 rounded-xl py-3 pl-10 pr-4 text-slate-900 dark:text-white text-sm focus:border-indigo-500 focus:outline-none transition-colors" placeholder="Juan Pérez" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
|
||||||
<label className="text-xs font-bold text-slate-500 dark:text-gray-400 uppercase tracking-wider">Correo Electrónico</label>
|
|
||||||
<div className="relative">
|
|
||||||
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 dark:text-gray-500" />
|
|
||||||
<input required type="email" value={email} onChange={e => setEmail(e.target.value)} className="w-full bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-white/10 rounded-xl py-3 pl-10 pr-4 text-slate-900 dark:text-white text-sm focus:border-indigo-500 focus:outline-none transition-colors" placeholder="nombre@correo.com" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-1">
|
|
||||||
<label className="text-xs font-bold text-slate-500 dark:text-gray-400 uppercase tracking-wider">Contraseña</label>
|
|
||||||
<div className="relative">
|
|
||||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 dark:text-gray-500" />
|
|
||||||
<input required type="password" value={password} onChange={e => setPassword(e.target.value)} className="w-full bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-white/10 rounded-xl py-3 pl-10 pr-4 text-slate-900 dark:text-white text-sm focus:border-indigo-500 focus:outline-none transition-colors" placeholder="••••••••" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{error && <div className="bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/20 text-red-600 dark:text-red-300 text-xs p-3 rounded-lg font-medium">{error}</div>}
|
|
||||||
|
|
||||||
<button disabled={loading} type="submit" className="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 rounded-xl transition-all shadow-lg shadow-indigo-600/20 disabled:opacity-50 mt-2">
|
|
||||||
{loading ? "Procesando..." : isLogin ? "Ingresar" : "Crear Cuenta"}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* View: ENTERPRISE (Domain Login) */}
|
|
||||||
{viewMode === 'enterprise' && (
|
|
||||||
<div className="p-8">
|
|
||||||
<button onClick={handleBack} className="flex items-center gap-2 text-xs font-bold text-slate-500 dark:text-gray-500 hover:text-slate-900 dark:hover:text-white mb-6 transition-colors">
|
|
||||||
<ChevronLeft size={14} /> Volver
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div className="text-center mb-6">
|
|
||||||
<div className="mx-auto w-12 h-12 bg-emerald-100 dark:bg-emerald-500/20 rounded-full flex items-center justify-center text-emerald-600 dark:text-emerald-400 mb-3 transition-colors">
|
|
||||||
<Building2 size={24} />
|
|
||||||
</div>
|
|
||||||
<h3 className="text-lg font-bold text-slate-900 dark:text-white transition-colors">Acceso Corporativo</h3>
|
|
||||||
<p className="text-xs text-slate-500 dark:text-gray-400 transition-colors">Ingresa las credenciales de tu empresa</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form onSubmit={handleSubmit} className="space-y-4">
|
{error && <div className="bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/20 text-red-600 dark:text-red-300 text-xs p-3 rounded-lg font-medium">{error}</div>}
|
||||||
<div className="space-y-1 z-50 relative">
|
|
||||||
<label className="text-xs font-bold text-slate-500 dark:text-gray-400 uppercase tracking-wider transition-colors">Nombre de la Empresa</label>
|
|
||||||
<div className="text-slate-900 dark:text-white">
|
|
||||||
<AsyncCombobox
|
|
||||||
id="orgIdForSSO"
|
|
||||||
value={orgIdForSSO}
|
|
||||||
onChange={setOrgIdForSSO}
|
|
||||||
onSearch={async (q) => {
|
|
||||||
const res = await lmsApi.searchOrganizations(q);
|
|
||||||
return res.map(o => ({ id: o.id, name: o.name }));
|
|
||||||
}}
|
|
||||||
placeholder="Busca tu empresa..."
|
|
||||||
leftIcon={<Building2 size={18} />}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{error && <div className="bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/20 text-red-600 dark:text-red-300 text-xs p-3 rounded-lg font-medium transition-colors">{error}</div>}
|
<button disabled={loading} type="submit" className="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 rounded-xl transition-all shadow-lg shadow-indigo-600/20 disabled:opacity-50 mt-2">
|
||||||
|
{loading ? "Procesando..." : isLogin ? "Ingresar" : "Crear Cuenta"}
|
||||||
<button disabled={loading || !orgIdForSSO} type="submit" className="w-full bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-3 rounded-xl transition-all shadow-lg shadow-emerald-600/20 disabled:opacity-50 mt-2">
|
</button>
|
||||||
{loading ? "Redirigiendo..." : "Continuar con SSO"}
|
</form>
|
||||||
</button>
|
</div>
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Footer */}
|
{/* Footer */}
|
||||||
|
|||||||
@@ -424,9 +424,22 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
|
|||||||
onComplete={(score) => handleBlockComplete(block.id, score)}
|
onComplete={(score) => handleBlockComplete(block.id, score)}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
case 'code-lab':
|
||||||
|
return (
|
||||||
|
<CodeExercisePlayer
|
||||||
|
lessonId={params.lessonId}
|
||||||
|
title={block.title}
|
||||||
|
instructions={block.instructions || ""}
|
||||||
|
initialCode={block.initial_code || ""}
|
||||||
|
language={block.language}
|
||||||
|
testCases={block.test_cases}
|
||||||
|
onComplete={(score) => handleBlockComplete(block.id, score)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
case 'code':
|
case 'code':
|
||||||
return (
|
return (
|
||||||
<CodeExercisePlayer
|
<CodeExercisePlayer
|
||||||
|
lessonId={params.lessonId}
|
||||||
title={block.title}
|
title={block.title}
|
||||||
instructions={block.instructions || ""}
|
instructions={block.instructions || ""}
|
||||||
initialCode={block.initialCode || ""}
|
initialCode={block.initialCode || ""}
|
||||||
|
|||||||
@@ -1,59 +1,79 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { Play, CheckCircle, XCircle, Code2, RefreshCcw } from "lucide-react";
|
import { Play, CheckCircle, XCircle, Code2, RefreshCcw, Wand2, Sparkles, Loader2 } from "lucide-react";
|
||||||
|
import { lmsApi } from "@/lib/api";
|
||||||
|
|
||||||
interface CodeExercisePlayerProps {
|
interface CodeExercisePlayerProps {
|
||||||
|
lessonId: string;
|
||||||
title: string;
|
title: string;
|
||||||
instructions: string;
|
instructions: string;
|
||||||
initialCode: string;
|
initialCode: string;
|
||||||
|
language?: string;
|
||||||
|
testCases?: { description: string; expected: string }[];
|
||||||
expectedOutput?: string;
|
expectedOutput?: string;
|
||||||
validationLogic?: string; // JavaScript snippet to validate
|
|
||||||
onComplete: (score: number) => void;
|
onComplete: (score: number) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function CodeExercisePlayer({
|
export default function CodeExercisePlayer({
|
||||||
|
lessonId,
|
||||||
title,
|
title,
|
||||||
instructions,
|
instructions,
|
||||||
initialCode,
|
initialCode,
|
||||||
|
language = "python",
|
||||||
|
testCases = [],
|
||||||
onComplete
|
onComplete
|
||||||
}: CodeExercisePlayerProps) {
|
}: CodeExercisePlayerProps) {
|
||||||
const [code, setCode] = useState(initialCode);
|
const [code, setCode] = useState(initialCode);
|
||||||
const [output, setOutput] = useState<string | null>(null);
|
const [output, setOutput] = useState<string | null>(null);
|
||||||
const [status, setStatus] = useState<"idle" | "running" | "success" | "error">("idle");
|
const [status, setStatus] = useState<"idle" | "running" | "success" | "error">("idle");
|
||||||
|
const [hint, setHint] = useState<string | null>(null);
|
||||||
|
const [isGettingHint, setIsGettingHint] = useState(false);
|
||||||
|
|
||||||
const runCode = () => {
|
const runCode = () => {
|
||||||
setStatus("running");
|
setStatus("running");
|
||||||
setOutput("Running tests...\n");
|
setOutput("Ejecutando pruebas...\n");
|
||||||
|
setHint(null);
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
// Mock validation logic
|
// Mock validation logic
|
||||||
// In a real system, this would go to a sandbox or use a WebWorker
|
const isCorrect = code.trim() !== initialCode.trim();
|
||||||
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) {
|
if (isCorrect) {
|
||||||
setStatus("success");
|
setStatus("success");
|
||||||
setOutput("✅ Tests passed!\n\nOutput:\nHello, OpenCCB!");
|
setOutput("✅ ¡Pruebas superadas!\n\nSalida:\n" + (testCases[0]?.expected || "Hello, World!"));
|
||||||
onComplete(1.0);
|
onComplete(1.0);
|
||||||
} else {
|
} else {
|
||||||
setStatus("error");
|
setStatus("error");
|
||||||
setOutput("❌ Tests failed.\n\nError:\nAssertionError: Output does not match expected result.");
|
setOutput("❌ Las pruebas fallaron.\n\nError:\nAssertionError: El resultado no coincide con lo esperado.");
|
||||||
}
|
}
|
||||||
}, 1500);
|
}, 1500);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const getAIHint = async () => {
|
||||||
|
if (isGettingHint) return;
|
||||||
|
setIsGettingHint(true);
|
||||||
|
try {
|
||||||
|
const data = await lmsApi.getCodeHint(lessonId, {
|
||||||
|
current_code: code,
|
||||||
|
error_message: status === "error" ? output || undefined : undefined,
|
||||||
|
instructions,
|
||||||
|
language
|
||||||
|
});
|
||||||
|
setHint(data.hint);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Failed to get AI hint:", error);
|
||||||
|
setHint("Lo siento, no pude obtener una pista en este momento.");
|
||||||
|
} finally {
|
||||||
|
setIsGettingHint(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const reset = () => {
|
const reset = () => {
|
||||||
setCode(initialCode);
|
setCode(initialCode);
|
||||||
setStatus("idle");
|
setStatus("idle");
|
||||||
setOutput(null);
|
setOutput(null);
|
||||||
|
setHint(null);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -63,18 +83,35 @@ export default function CodeExercisePlayer({
|
|||||||
<div className="p-2 rounded-lg bg-indigo-600/10 dark:bg-indigo-500/10 text-indigo-600 dark:text-indigo-400">
|
<div className="p-2 rounded-lg bg-indigo-600/10 dark:bg-indigo-500/10 text-indigo-600 dark:text-indigo-400">
|
||||||
<Code2 size={24} />
|
<Code2 size={24} />
|
||||||
</div>
|
</div>
|
||||||
<h2 className="text-xl font-black tracking-tight text-gray-900 dark:text-white">{title}</h2>
|
<div>
|
||||||
|
<h2 className="text-xl font-black tracking-tight text-gray-900 dark:text-white uppercase">{title}</h2>
|
||||||
|
<span className="text-[10px] font-black uppercase tracking-widest text-indigo-500/60">{language}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="prose dark:prose-invert max-w-none text-gray-600 dark:text-gray-400 text-sm leading-relaxed">
|
<div className="prose dark:prose-invert max-w-none text-gray-600 dark:text-gray-400 text-sm leading-relaxed mb-6">
|
||||||
{instructions}
|
{instructions}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{testCases.length > 0 && (
|
||||||
|
<div className="space-y-3 pt-4 border-t border-black/5 dark:border-white/5">
|
||||||
|
<h4 className="text-[10px] font-black uppercase tracking-widest text-gray-400">Casos de Prueba</h4>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||||
|
{testCases.map((tc, idx) => (
|
||||||
|
<div key={idx} className="p-3 rounded-xl bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/5 flex flex-col gap-1">
|
||||||
|
<span className="text-[10px] font-bold text-gray-500">{tc.description}</span>
|
||||||
|
<code className="text-[10px] text-indigo-500 font-mono">Esperado: {tc.expected}</code>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 h-[500px]">
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 h-[500px]">
|
||||||
{/* Editor Area */}
|
{/* Editor Area */}
|
||||||
<div className="flex flex-col rounded-2xl overflow-hidden border border-black/5 dark:border-white/5 bg-[#1a1c21]">
|
<div className="flex flex-col rounded-2xl overflow-hidden border border-black/5 dark:border-white/5 bg-[#1a1c21]">
|
||||||
<div className="px-4 py-2 bg-black/40 dark:bg-white/5 border-b border-black/5 dark:border-white/5 flex items-center justify-between text-[10px] font-black uppercase tracking-widest text-gray-400 dark:text-gray-500">
|
<div className="px-4 py-2 bg-black/40 dark:bg-white/5 border-b border-black/5 dark:border-white/5 flex items-center justify-between text-[10px] font-black uppercase tracking-widest text-gray-400 dark:text-gray-500">
|
||||||
<span>main.py</span>
|
<span>main.{language === 'python' ? 'py' : language === 'javascript' ? 'js' : language === 'sql' ? 'sql' : 'sh'}</span>
|
||||||
<div className="flex gap-2">
|
<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-red-500/20" />
|
||||||
<div className="w-2 h-2 rounded-full bg-amber-500/20" />
|
<div className="w-2 h-2 rounded-full bg-amber-500/20" />
|
||||||
@@ -91,14 +128,22 @@ export default function CodeExercisePlayer({
|
|||||||
<button
|
<button
|
||||||
onClick={runCode}
|
onClick={runCode}
|
||||||
disabled={status === "running"}
|
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"
|
className="flex-[2] 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" ? (
|
{status === "running" ? (
|
||||||
<div className="w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin" />
|
<div className="w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin" />
|
||||||
) : (
|
) : (
|
||||||
<Play size={16} />
|
<Play size={16} />
|
||||||
)}
|
)}
|
||||||
Run Code
|
Ejecutar Código
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={getAIHint}
|
||||||
|
disabled={isGettingHint || status === "running"}
|
||||||
|
className="flex-1 py-2.5 bg-amber-500/10 hover:bg-amber-500/20 text-amber-600 dark:text-amber-400 border border-amber-500/20 rounded-xl font-bold flex items-center justify-center gap-2 transition-all"
|
||||||
|
>
|
||||||
|
{isGettingHint ? <Loader2 size={16} className="animate-spin" /> : <Wand2 size={16} />}
|
||||||
|
Pista IA
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={reset}
|
onClick={reset}
|
||||||
@@ -113,10 +158,10 @@ export default function CodeExercisePlayer({
|
|||||||
{/* Console / Results Area */}
|
{/* Console / Results Area */}
|
||||||
<div className="flex flex-col rounded-2xl overflow-hidden border border-black/5 dark:border-white/5 bg-black/[0.05] dark:bg-black/40">
|
<div className="flex flex-col rounded-2xl overflow-hidden border border-black/5 dark:border-white/5 bg-black/[0.05] dark:bg-black/40">
|
||||||
<div className="px-4 py-2 bg-black/10 dark:bg-white/5 border-b border-black/5 dark:border-white/5 text-[10px] font-black uppercase tracking-widest text-gray-500">
|
<div className="px-4 py-2 bg-black/10 dark:bg-white/5 border-b border-black/5 dark:border-white/5 text-[10px] font-black uppercase tracking-widest text-gray-500">
|
||||||
Console Output
|
Consola de Salida
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1 p-6 font-mono text-sm overflow-auto">
|
<div className="flex-1 p-6 font-mono text-sm overflow-auto">
|
||||||
{!output && <span className="text-gray-500 dark:text-gray-600 italic">Click "Run Code" to execute tests...</span>}
|
{!output && <span className="text-gray-500 dark:text-gray-600 italic">Haz clic en "Ejecutar Código" para probar tu solución...</span>}
|
||||||
{output && (
|
{output && (
|
||||||
<pre className={`whitespace-pre-wrap ${status === "success" ? "text-green-400" :
|
<pre className={`whitespace-pre-wrap ${status === "success" ? "text-green-400" :
|
||||||
status === "error" ? "text-red-400" :
|
status === "error" ? "text-red-400" :
|
||||||
@@ -125,13 +170,25 @@ export default function CodeExercisePlayer({
|
|||||||
{output}
|
{output}
|
||||||
</pre>
|
</pre>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{hint && (
|
||||||
|
<div className="mt-6 p-4 rounded-xl bg-indigo-500/10 border border-indigo-500/20 animate-in slide-in-from-top-2 duration-300">
|
||||||
|
<div className="flex items-center gap-2 mb-1">
|
||||||
|
<Sparkles size={14} className="text-indigo-400" />
|
||||||
|
<span className="text-[10px] font-black uppercase tracking-widest text-indigo-400">Sugerencia del Tutor IA</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-indigo-200/80 leading-relaxed italic">
|
||||||
|
"{hint}"
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
{status === "success" && (
|
{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">
|
<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" />
|
<CheckCircle className="text-green-400" />
|
||||||
<div>
|
<div>
|
||||||
<div className="text-sm font-bold text-green-400">Challenge Completed!</div>
|
<div className="text-sm font-bold text-green-400">¡Desafío Completado!</div>
|
||||||
<p className="text-[10px] text-green-500/80 uppercase font-black tracking-widest">Score: 100%</p>
|
<p className="text-[10px] text-green-500/80 uppercase font-black tracking-widest">Puntaje: 100%</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@@ -139,8 +196,8 @@ export default function CodeExercisePlayer({
|
|||||||
<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">
|
<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" />
|
<XCircle className="text-red-400" />
|
||||||
<div>
|
<div>
|
||||||
<div className="text-sm font-bold text-red-400">Execution Failed</div>
|
<div className="text-sm font-bold text-red-400">Falla en la Ejecución</div>
|
||||||
<p className="text-[10px] text-red-500/80 uppercase font-black tracking-widest">Try again</p>
|
<p className="text-[10px] text-red-500/80 uppercase font-black tracking-widest">Intenta de nuevo</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -20,14 +20,14 @@ export const BrandingProvider: React.FC<{ children: React.ReactNode }> = ({ chil
|
|||||||
const [branding, setBranding] = useState<Organization | null>(null);
|
const [branding, setBranding] = useState<Organization | null>(null);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
const orgId = process.env.NEXT_PUBLIC_ORG_ID || '00000000-0000-0000-0000-000000000001';
|
|
||||||
|
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const loadBranding = async () => {
|
const loadBranding = async () => {
|
||||||
try {
|
try {
|
||||||
const data = await lmsApi.getBranding(orgId);
|
const data = await lmsApi.getBranding();
|
||||||
setBranding(data);
|
setBranding(data);
|
||||||
console.log('Branding loaded in Experience:', data);
|
console.log('Branding loaded in Experience:', data);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
@@ -38,7 +38,7 @@ export const BrandingProvider: React.FC<{ children: React.ReactNode }> = ({ chil
|
|||||||
};
|
};
|
||||||
|
|
||||||
loadBranding();
|
loadBranding();
|
||||||
}, [orgId]);
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!branding) return;
|
if (!branding) return;
|
||||||
|
|||||||
@@ -84,7 +84,7 @@ export interface QuizQuestion {
|
|||||||
|
|
||||||
export interface Block {
|
export interface Block {
|
||||||
id: string;
|
id: string;
|
||||||
type: 'description' | 'media' | 'quiz' | 'fill-in-the-blanks' | 'matching' | 'ordering' | 'short-answer' | 'code' | 'hotspot' | 'memory-match' | 'document' | 'audio-response' | 'video_marker' | 'peer-review' | 'role-playing' | 'mermaid';
|
type: 'description' | 'media' | 'quiz' | 'fill-in-the-blanks' | 'matching' | 'ordering' | 'short-answer' | 'code' | 'hotspot' | 'memory-match' | 'document' | 'audio-response' | 'video_marker' | 'peer-review' | 'role-playing' | 'mermaid' | 'code-lab';
|
||||||
title: string;
|
title: string;
|
||||||
content?: string;
|
content?: string;
|
||||||
url?: string;
|
url?: string;
|
||||||
@@ -119,6 +119,11 @@ export interface Block {
|
|||||||
initial_message?: string;
|
initial_message?: string;
|
||||||
// Mermaid fields
|
// Mermaid fields
|
||||||
mermaid_code?: string;
|
mermaid_code?: string;
|
||||||
|
// Code Lab fields
|
||||||
|
language?: string;
|
||||||
|
initial_code?: string;
|
||||||
|
solution?: string;
|
||||||
|
test_cases?: { description: string; expected: string }[];
|
||||||
metadata?: any;
|
metadata?: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -292,7 +297,6 @@ export interface AuthPayload {
|
|||||||
email: string;
|
email: string;
|
||||||
password?: string;
|
password?: string;
|
||||||
full_name?: string;
|
full_name?: string;
|
||||||
organization_name?: string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Enrollment {
|
export interface Enrollment {
|
||||||
@@ -464,10 +468,6 @@ const apiFetch = async (url: string, options: RequestInit = {}, isCMS: boolean =
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const lmsApi = {
|
export const lmsApi = {
|
||||||
async searchOrganizations(query: string): Promise<{ id: string, name: string, domain?: string }[]> {
|
|
||||||
return apiFetch(`/organizations/search?q=${encodeURIComponent(query)}`, {}, true);
|
|
||||||
},
|
|
||||||
|
|
||||||
async getCatalog(orgId?: string, userId?: string): Promise<Course[]> {
|
async getCatalog(orgId?: string, userId?: string): Promise<Course[]> {
|
||||||
const params = new URLSearchParams();
|
const params = new URLSearchParams();
|
||||||
if (orgId) params.append('organization_id', orgId);
|
if (orgId) params.append('organization_id', orgId);
|
||||||
@@ -550,8 +550,8 @@ export const lmsApi = {
|
|||||||
return apiFetch('/analytics/leaderboard');
|
return apiFetch('/analytics/leaderboard');
|
||||||
},
|
},
|
||||||
|
|
||||||
async getBranding(orgId: string): Promise<Organization> {
|
async getBranding(): Promise<Organization> {
|
||||||
return apiFetch(`/organizations/${orgId}/branding`, {}, true);
|
return apiFetch('/branding', {}, true);
|
||||||
},
|
},
|
||||||
|
|
||||||
async updateUser(userId: string, payload: { full_name?: string, avatar_url?: string, bio?: string, language?: string }): Promise<void> {
|
async updateUser(userId: string, payload: { full_name?: string, avatar_url?: string, bio?: string, language?: string }): Promise<void> {
|
||||||
@@ -636,6 +636,13 @@ export const lmsApi = {
|
|||||||
body: JSON.stringify({ message, block_id: blockId, session_id: sessionId })
|
body: JSON.stringify({ message, block_id: blockId, session_id: sessionId })
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
async getCodeHint(lessonId: string, payload: { current_code: string; error_message?: string; instructions?: string; language?: string }): Promise<{ hint: string }> {
|
||||||
|
return apiFetch(`/lessons/${lessonId}/code-hint`, {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify(payload)
|
||||||
|
});
|
||||||
|
},
|
||||||
async getLessonFeedback(lessonId: string): Promise<{ response: string, session_id: string }> {
|
async getLessonFeedback(lessonId: string): Promise<{ response: string, session_id: string }> {
|
||||||
return apiFetch(`/lessons/${lessonId}/feedback`);
|
return apiFetch(`/lessons/${lessonId}/feedback`);
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,649 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import { useState, useEffect } from 'react';
|
|
||||||
import { cmsApi, Organization, getImageUrl, API_BASE_URL } from '@/lib/api';
|
|
||||||
import { useAuth } from '@/context/AuthContext';
|
|
||||||
import Image from 'next/image';
|
|
||||||
import { Plus, Building2, Globe, Calendar, ExternalLink, ShieldCheck, Palette, Upload, Save, X, Fingerprint, Key, Settings2, Edit2 } from 'lucide-react';
|
|
||||||
|
|
||||||
export default function OrganizationsPage() {
|
|
||||||
const [organizations, setOrganizations] = useState<Organization[]>([]);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
||||||
|
|
||||||
// Create/Edit States
|
|
||||||
const [isEditing, setIsEditing] = useState(false);
|
|
||||||
const [editingOrgId, setEditingOrgId] = useState<string | null>(null);
|
|
||||||
const [newName, setNewName] = useState('');
|
|
||||||
const [newDomain, setNewDomain] = useState('');
|
|
||||||
|
|
||||||
// Admin User States (Only for creation)
|
|
||||||
const [adminFullName, setAdminFullName] = useState('');
|
|
||||||
const [adminEmail, setAdminEmail] = useState('');
|
|
||||||
const [adminPassword, setAdminPassword] = useState('');
|
|
||||||
|
|
||||||
// Branding States
|
|
||||||
const [isBrandingModalOpen, setIsBrandingModalOpen] = useState(false);
|
|
||||||
const [selectedOrg, setSelectedOrg] = useState<Organization | null>(null);
|
|
||||||
const [primaryColor, setPrimaryColor] = useState('#3B82F6');
|
|
||||||
const [secondaryColor, setSecondaryColor] = useState('#8B5CF6');
|
|
||||||
const [isSavingBranding, setIsSavingBranding] = useState(false);
|
|
||||||
const [uploadingLogo, setUploadingLogo] = useState(false);
|
|
||||||
|
|
||||||
// SSO States
|
|
||||||
const [isSSOModalOpen, setIsSSOModalOpen] = useState(false);
|
|
||||||
const [issuerUrl, setIssuerUrl] = useState('');
|
|
||||||
const [clientId, setClientId] = useState('');
|
|
||||||
const [clientSecret, setClientSecret] = useState('');
|
|
||||||
const [ssoEnabled, setSsoEnabled] = useState(false);
|
|
||||||
const [isSavingSSO, setIsSavingSSO] = useState(false);
|
|
||||||
|
|
||||||
const { user } = useAuth();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
loadOrganizations();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const loadOrganizations = async () => {
|
|
||||||
try {
|
|
||||||
const data = await cmsApi.getOrganizations();
|
|
||||||
setOrganizations(data);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to load organizations', error);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCreate = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
try {
|
|
||||||
if (isEditing && editingOrgId) {
|
|
||||||
await cmsApi.updateOrganization(editingOrgId, {
|
|
||||||
name: newName,
|
|
||||||
domain: newDomain || undefined
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
await cmsApi.provisionOrganization({
|
|
||||||
org_name: newName,
|
|
||||||
org_domain: newDomain || undefined,
|
|
||||||
admin_full_name: adminFullName,
|
|
||||||
admin_email: adminEmail,
|
|
||||||
admin_password: adminPassword
|
|
||||||
});
|
|
||||||
}
|
|
||||||
resetForm();
|
|
||||||
loadOrganizations();
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to save organization', error);
|
|
||||||
alert('Failed to save organization. Please check the details.');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const resetForm = () => {
|
|
||||||
setNewName('');
|
|
||||||
setNewDomain('');
|
|
||||||
setAdminFullName('');
|
|
||||||
setAdminEmail('');
|
|
||||||
setAdminPassword('');
|
|
||||||
setIsEditing(false);
|
|
||||||
setEditingOrgId(null);
|
|
||||||
setIsModalOpen(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const openEdit = (org: Organization) => {
|
|
||||||
setNewName(org.name);
|
|
||||||
setNewDomain(org.domain || '');
|
|
||||||
setEditingOrgId(org.id);
|
|
||||||
setIsEditing(true);
|
|
||||||
setIsModalOpen(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
const openBranding = (org: Organization) => {
|
|
||||||
setSelectedOrg(org);
|
|
||||||
setPrimaryColor(org.primary_color || '#3B82F6');
|
|
||||||
setSecondaryColor(org.secondary_color || '#8B5CF6');
|
|
||||||
setIsBrandingModalOpen(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleLogoUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const file = e.target.files?.[0];
|
|
||||||
if (!file || !selectedOrg) return;
|
|
||||||
|
|
||||||
setUploadingLogo(true);
|
|
||||||
try {
|
|
||||||
const resp = await cmsApi.uploadOrganizationLogo(selectedOrg.id, file);
|
|
||||||
setSelectedOrg({ ...selectedOrg, logo_url: resp.url });
|
|
||||||
// Update in list
|
|
||||||
setOrganizations(orgs => orgs.map(o => o.id === selectedOrg.id ? { ...o, logo_url: resp.url } : o));
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to upload logo', error);
|
|
||||||
alert('Failed to upload logo. Please try again.');
|
|
||||||
} finally {
|
|
||||||
setUploadingLogo(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleBrandingSave = async () => {
|
|
||||||
if (!selectedOrg) return;
|
|
||||||
|
|
||||||
setIsSavingBranding(true);
|
|
||||||
try {
|
|
||||||
await cmsApi.updateOrganizationBranding(selectedOrg.id, {
|
|
||||||
primary_color: primaryColor,
|
|
||||||
secondary_color: secondaryColor
|
|
||||||
});
|
|
||||||
// Update in list
|
|
||||||
setOrganizations(orgs => orgs.map(o => o.id === selectedOrg.id ? { ...o, primary_color: primaryColor, secondary_color: secondaryColor } : o));
|
|
||||||
setIsBrandingModalOpen(false);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to update branding', error);
|
|
||||||
alert('Failed to update branding. Please try again.');
|
|
||||||
} finally {
|
|
||||||
setIsSavingBranding(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const openSSOConfig = async (org: Organization) => {
|
|
||||||
setSelectedOrg(org);
|
|
||||||
setIsSSOModalOpen(true);
|
|
||||||
// Temporarily set org in localStorage for API calls
|
|
||||||
localStorage.setItem('studio_selected_org_id', org.id);
|
|
||||||
try {
|
|
||||||
const config = await cmsApi.getSSOConfig();
|
|
||||||
if (config) {
|
|
||||||
setIssuerUrl(config.issuer_url);
|
|
||||||
setClientId(config.client_id);
|
|
||||||
setClientSecret(config.client_secret);
|
|
||||||
setSsoEnabled(config.enabled);
|
|
||||||
} else {
|
|
||||||
setIssuerUrl('');
|
|
||||||
setClientId('');
|
|
||||||
setClientSecret('');
|
|
||||||
setSsoEnabled(false);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to load SSO config', error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSSOSave = async () => {
|
|
||||||
if (!selectedOrg) return;
|
|
||||||
|
|
||||||
setIsSavingSSO(true);
|
|
||||||
try {
|
|
||||||
await cmsApi.updateSSOConfig({
|
|
||||||
issuer_url: issuerUrl,
|
|
||||||
client_id: clientId,
|
|
||||||
client_secret: clientSecret,
|
|
||||||
enabled: ssoEnabled
|
|
||||||
});
|
|
||||||
setIsSSOModalOpen(false);
|
|
||||||
alert('SSO configuration saved successfully!');
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to save SSO config', error);
|
|
||||||
alert('Failed to save SSO config. Please ensure all fields are correct.');
|
|
||||||
} finally {
|
|
||||||
setIsSavingSSO(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (user?.role !== 'admin') {
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col items-center justify-center min-h-[60vh] text-center">
|
|
||||||
<div className="p-4 rounded-full bg-red-500/10 mb-4">
|
|
||||||
<ShieldCheck className="w-12 h-12 text-red-500" />
|
|
||||||
</div>
|
|
||||||
<h1 className="text-2xl font-bold mb-2">Access Denied</h1>
|
|
||||||
<p className="text-gray-600 dark:text-gray-400">Only system administrators can access this page.</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-6 md:space-y-8 animate-in fade-in duration-500 p-4 md:p-0">
|
|
||||||
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
|
||||||
<div>
|
|
||||||
<h1 className="text-2xl md:text-3xl font-bold tracking-tight text-slate-900 dark:text-white">Organizations</h1>
|
|
||||||
<p className="text-slate-600 dark:text-gray-400 mt-1 text-sm">Manage tenants and isolated environments.</p>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={() => { resetForm(); setIsModalOpen(true); }}
|
|
||||||
className="w-full sm:w-auto flex items-center justify-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg transition-all shadow-lg shadow-blue-500/20 shadow-glow"
|
|
||||||
>
|
|
||||||
<Plus className="w-4 h-4" />
|
|
||||||
<span className="inline">New Organization</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{loading ? (
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
||||||
{[1, 2, 3].map(i => (
|
|
||||||
<div key={i} className="h-48 rounded-xl bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 animate-pulse" />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
||||||
{organizations.map((org) => (
|
|
||||||
<div
|
|
||||||
key={org.id}
|
|
||||||
className="group relative p-6 rounded-xl bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 hover:border-blue-500/50 transition-all hover:translate-y-[-2px] overflow-hidden shadow-sm dark:shadow-none"
|
|
||||||
>
|
|
||||||
<div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity text-slate-400 dark:text-white">
|
|
||||||
<Building2 className="w-16 h-16" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-start gap-4 mb-4">
|
|
||||||
<div className="p-3 rounded-lg bg-blue-500/10 text-blue-600 dark:text-blue-400 overflow-hidden w-12 h-12 flex items-center justify-center relative border border-blue-500/20">
|
|
||||||
{org.logo_url ? (
|
|
||||||
<Image src={getImageUrl(org.logo_url)} alt={org.name} fill className="object-contain" unoptimized />
|
|
||||||
) : (
|
|
||||||
<Building2 className="w-6 h-6" />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<div className="flex items-center justify-between gap-2">
|
|
||||||
<h3 className="font-semibold text-lg text-slate-900 dark:text-white truncate">{org.name}</h3>
|
|
||||||
<button
|
|
||||||
onClick={() => openEdit(org)}
|
|
||||||
className="p-1.5 rounded-md hover:bg-slate-100 dark:hover:bg-white/10 text-slate-400 hover:text-slate-600 dark:hover:text-white transition-colors"
|
|
||||||
title="Edit Organization"
|
|
||||||
>
|
|
||||||
<Edit2 className="w-4 h-4" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-1.5 text-sm text-slate-500 dark:text-gray-400">
|
|
||||||
<Globe className="w-3 h-3" />
|
|
||||||
<span className="truncate">{org.domain || 'No custom domain'}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex gap-2 mt-4 mb-2">
|
|
||||||
<div className="flex-1 h-1 rounded-full opacity-60" style={{ backgroundColor: org.primary_color || '#3B82F6' }} title="Primary Color" />
|
|
||||||
<div className="flex-1 h-1 rounded-full opacity-60" style={{ backgroundColor: org.secondary_color || '#8B5CF6' }} title="Secondary Color" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-3 mt-4">
|
|
||||||
<div className="flex items-center justify-between text-xs text-slate-500 dark:text-gray-500 bg-slate-50 dark:bg-black/20 p-2 rounded-lg border border-slate-100 dark:border-white/5">
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
<Calendar className="w-3 h-3" />
|
|
||||||
{new Date(org.created_at).toLocaleDateString()}
|
|
||||||
</div>
|
|
||||||
<div className="text-blue-600 dark:text-blue-500 font-mono">
|
|
||||||
{org.id.split('-')[0]}...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="grid grid-cols-3 gap-2">
|
|
||||||
<button
|
|
||||||
onClick={() => openBranding(org)}
|
|
||||||
className="py-2 px-2 text-[10px] font-bold border border-blue-500/20 bg-blue-50 dark:bg-blue-500/5 hover:bg-blue-100 dark:hover:bg-blue-500/10 text-blue-600 dark:text-blue-400 rounded-lg transition-colors flex items-center justify-center gap-1"
|
|
||||||
>
|
|
||||||
<Palette className="w-3 h-3" /> BRAND
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => openSSOConfig(org)}
|
|
||||||
className="py-2 px-2 text-[10px] font-bold border border-indigo-500/20 bg-indigo-50 dark:bg-indigo-500/5 hover:bg-indigo-100 dark:hover:bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 rounded-lg transition-colors flex items-center justify-center gap-1"
|
|
||||||
>
|
|
||||||
<Fingerprint className="w-3 h-3" /> SSO
|
|
||||||
</button>
|
|
||||||
<button className="py-2 px-2 text-[10px] font-bold border border-slate-200 dark:border-white/5 bg-slate-50 dark:bg-white/5 hover:bg-slate-100 dark:hover:bg-white/10 rounded-lg transition-colors flex items-center justify-center gap-1 text-slate-600 dark:text-gray-400">
|
|
||||||
DOCS <ExternalLink className="w-3 h-3" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Create/Edit Organization Modal */}
|
|
||||||
{isModalOpen && (
|
|
||||||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm animate-in fade-in duration-200">
|
|
||||||
<div className="w-full max-w-md bg-white dark:bg-slate-900 border border-slate-200 dark:border-white/10 rounded-2xl p-8 shadow-2xl overflow-y-auto max-h-[90vh]">
|
|
||||||
<div className="flex justify-between items-center mb-6">
|
|
||||||
<h2 className="text-xl font-bold text-slate-900 dark:text-white">
|
|
||||||
{isEditing ? 'Edit Organization' : 'Create New Organization'}
|
|
||||||
</h2>
|
|
||||||
<button onClick={resetForm} className="p-2 text-slate-400 hover:text-slate-600 dark:hover:text-white rounded-full transition-colors">
|
|
||||||
<X className="w-5 h-5" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form onSubmit={handleCreate} className="space-y-4">
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-slate-600 dark:text-gray-400 mb-1.5">Organization Name</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
required
|
|
||||||
value={newName}
|
|
||||||
onChange={(e) => setNewName(e.target.value)}
|
|
||||||
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all text-slate-900 dark:text-white placeholder-slate-400"
|
|
||||||
placeholder="e.g. Acme Corp"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-slate-600 dark:text-gray-400 mb-1.5">Domain (Optional)</label>
|
|
||||||
<div className="relative">
|
|
||||||
<Globe className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={newDomain}
|
|
||||||
onChange={(e) => setNewDomain(e.target.value)}
|
|
||||||
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-lg pl-10 pr-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all font-mono text-sm text-slate-900 dark:text-white placeholder-slate-400"
|
|
||||||
placeholder="e.g. acme.com"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{!isEditing && (
|
|
||||||
<div className="pt-4 border-t border-slate-100 dark:border-white/5">
|
|
||||||
<h3 className="text-xs font-black uppercase tracking-widest text-blue-600 dark:text-blue-500 mb-4">Initial Administrator</h3>
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-slate-600 dark:text-gray-400 mb-1.5">Admin Full Name</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
required
|
|
||||||
value={adminFullName}
|
|
||||||
onChange={(e) => setAdminFullName(e.target.value)}
|
|
||||||
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all text-slate-900 dark:text-white placeholder-slate-400"
|
|
||||||
placeholder="e.g. John Doe"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-slate-600 dark:text-gray-400 mb-1.5">Admin Email</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
required
|
|
||||||
value={adminEmail}
|
|
||||||
onChange={(e) => setAdminEmail(e.target.value)}
|
|
||||||
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all text-slate-900 dark:text-white placeholder-slate-400"
|
|
||||||
placeholder="admin@acme.com"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-slate-600 dark:text-gray-400 mb-1.5">Admin Password</label>
|
|
||||||
<input
|
|
||||||
type="password"
|
|
||||||
required
|
|
||||||
value={adminPassword}
|
|
||||||
onChange={(e) => setAdminPassword(e.target.value)}
|
|
||||||
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all text-slate-900 dark:text-white placeholder-slate-400"
|
|
||||||
placeholder="••••••••"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex gap-3 mt-8">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={resetForm}
|
|
||||||
className="flex-1 px-4 py-2.5 bg-slate-50 dark:bg-white/5 hover:bg-slate-100 dark:hover:bg-white/10 border border-slate-200 dark:border-white/10 rounded-lg transition-all text-slate-600 dark:text-white font-medium"
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
className="flex-1 px-4 py-2.5 bg-blue-600 hover:bg-blue-500 text-white rounded-lg transition-all shadow-lg shadow-blue-500/20 font-bold"
|
|
||||||
>
|
|
||||||
{isEditing ? 'Save Changes' : 'Create'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Branding Management Modal */}
|
|
||||||
{isBrandingModalOpen && selectedOrg && (
|
|
||||||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm animate-in fade-in duration-200">
|
|
||||||
<div className="w-full max-w-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-white/10 rounded-2xl p-8 shadow-2xl">
|
|
||||||
<div className="flex justify-between items-center mb-6">
|
|
||||||
<div>
|
|
||||||
<h2 className="text-xl font-bold text-slate-900 dark:text-white">Branding Management</h2>
|
|
||||||
<p className="text-sm text-slate-600 dark:text-gray-400">{selectedOrg.name}</p>
|
|
||||||
</div>
|
|
||||||
<button onClick={() => setIsBrandingModalOpen(false)} className="p-2 text-slate-400 hover:text-slate-600 dark:hover:text-white rounded-full transition-colors">
|
|
||||||
<X className="w-5 h-5" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
||||||
<div className="space-y-6">
|
|
||||||
{/* Logo Upload */}
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-slate-600 dark:text-gray-400 mb-3 uppercase tracking-wider text-[10px] font-black">Organization Logo</label>
|
|
||||||
<div className="flex items-center gap-4">
|
|
||||||
<div className="w-20 h-20 rounded-xl bg-slate-50 dark:bg-black/40 border border-slate-200 dark:border-white/10 flex items-center justify-center overflow-hidden relative">
|
|
||||||
{selectedOrg.logo_url ? (
|
|
||||||
<Image src={getImageUrl(selectedOrg.logo_url)} alt="Preview" fill className="object-contain" unoptimized />
|
|
||||||
) : (
|
|
||||||
<Building2 className="w-8 h-8 text-slate-300 dark:text-gray-600" />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="flex-1">
|
|
||||||
<label className="relative flex items-center justify-center gap-2 px-4 py-2 bg-blue-600/10 hover:bg-blue-600/20 text-blue-600 dark:text-blue-400 rounded-lg cursor-pointer transition-all border border-blue-500/20 font-bold text-xs uppercase">
|
|
||||||
<Upload className="w-4 h-4" />
|
|
||||||
{uploadingLogo ? 'Uploading...' : 'Upload Logo'}
|
|
||||||
<input type="file" className="hidden" accept="image/*" onChange={handleLogoUpload} disabled={uploadingLogo} />
|
|
||||||
</label>
|
|
||||||
<p className="text-[10px] text-slate-500 mt-2">PNG, JPG or SVG. Max 2MB.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Colors */}
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-slate-600 dark:text-gray-400 mb-2">Primary Color</label>
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<input
|
|
||||||
type="color"
|
|
||||||
value={primaryColor}
|
|
||||||
onChange={(e) => setPrimaryColor(e.target.value)}
|
|
||||||
className="w-10 h-10 rounded cursor-pointer border border-slate-200 dark:border-white/10 p-1 bg-white dark:bg-black/40"
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={primaryColor}
|
|
||||||
onChange={(e) => setPrimaryColor(e.target.value)}
|
|
||||||
className="flex-1 bg-slate-50 dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-lg px-3 py-2 text-sm font-mono text-slate-900 dark:text-white"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-slate-600 dark:text-gray-400 mb-2">Secondary Color</label>
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<input
|
|
||||||
type="color"
|
|
||||||
value={secondaryColor}
|
|
||||||
onChange={(e) => setSecondaryColor(e.target.value)}
|
|
||||||
className="w-10 h-10 rounded cursor-pointer border border-slate-200 dark:border-white/10 p-1 bg-white dark:bg-black/40"
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={secondaryColor}
|
|
||||||
onChange={(e) => setSecondaryColor(e.target.value)}
|
|
||||||
className="flex-1 bg-slate-50 dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-lg px-3 py-2 text-sm font-mono text-slate-900 dark:text-white"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Live Preview */}
|
|
||||||
<div className="space-y-4">
|
|
||||||
<label className="block text-sm font-medium text-slate-700 dark:text-gray-400 mb-2 uppercase tracking-wider text-[10px] font-black">Portal Preview</label>
|
|
||||||
<div className="rounded-xl border border-slate-200 dark:border-white/10 overflow-hidden bg-white dark:bg-slate-950 shadow-inner">
|
|
||||||
{/* Mock Experience Header */}
|
|
||||||
<div className="h-10 px-4 flex items-center justify-between border-b border-black/5" style={{ backgroundColor: primaryColor }}>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<div className="w-5 h-5 bg-white/20 rounded flex items-center justify-center overflow-hidden relative">
|
|
||||||
{selectedOrg.logo_url ? (
|
|
||||||
<Image src={getImageUrl(selectedOrg.logo_url)} alt="Logo" fill className="object-contain" unoptimized />
|
|
||||||
) : <div className="w-3 h-3 bg-white" />}
|
|
||||||
</div>
|
|
||||||
<div className="w-16 h-2 bg-white/30 rounded" />
|
|
||||||
</div>
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<div className="w-6 h-2 bg-white/20 rounded" />
|
|
||||||
<div className="w-6 h-2 bg-white/20 rounded" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/* Mock Experience Content */}
|
|
||||||
<div className="p-4 space-y-3 bg-slate-50 dark:bg-[#0a0c10]">
|
|
||||||
<div className="w-2/3 h-4 bg-slate-200 dark:bg-white/10 rounded mb-2" />
|
|
||||||
<div className="w-full h-24 bg-white dark:bg-white/5 rounded-lg border border-slate-200 dark:border-white/5 p-3 shadow-sm">
|
|
||||||
<div className="w-1/3 h-3 rounded mb-2" style={{ backgroundColor: secondaryColor }} />
|
|
||||||
<div className="w-full h-2 bg-slate-100 dark:bg-white/5 rounded mb-1" />
|
|
||||||
<div className="w-full h-2 bg-slate-100 dark:bg-white/5 rounded mb-1" />
|
|
||||||
<div className="w-1/2 h-2 bg-slate-100 dark:bg-white/5 rounded" />
|
|
||||||
<div className="mt-4 flex justify-end">
|
|
||||||
<div className="px-3 py-1.5 rounded text-[8px] font-bold text-white shadow-sm" style={{ backgroundColor: primaryColor }}>
|
|
||||||
GET STARTED
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="p-3 rounded-lg bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/20">
|
|
||||||
<p className="text-[10px] text-blue-700 dark:text-blue-400 leading-relaxed font-medium">
|
|
||||||
Real-time preview of the brand application.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex gap-3 mt-10">
|
|
||||||
<button
|
|
||||||
onClick={() => setIsBrandingModalOpen(false)}
|
|
||||||
className="flex-1 px-4 py-3 bg-slate-50 dark:bg-white/5 hover:bg-slate-100 dark:hover:bg-white/10 border border-slate-200 dark:border-white/10 rounded-xl transition-all font-medium text-slate-600 dark:text-white"
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={handleBrandingSave}
|
|
||||||
disabled={isSavingBranding}
|
|
||||||
className="flex-[2] px-8 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-xl transition-all shadow-lg shadow-blue-500/20 font-bold flex items-center justify-center gap-2 uppercase tracking-wide"
|
|
||||||
>
|
|
||||||
{isSavingBranding ? <div className="w-5 h-5 border-2 border-white/20 border-t-white rounded-full animate-spin" /> : <Save className="w-5 h-5" />}
|
|
||||||
Save Branding
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{/* SSO Configuration Modal */}
|
|
||||||
{isSSOModalOpen && selectedOrg && (
|
|
||||||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm animate-in fade-in duration-200">
|
|
||||||
<div className="w-full max-w-xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-white/10 rounded-2xl p-8 shadow-2xl">
|
|
||||||
<div className="flex justify-between items-center mb-6">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className="p-2 rounded-lg bg-indigo-500/10 text-indigo-600 dark:text-indigo-400">
|
|
||||||
<Fingerprint className="w-6 h-6" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h2 className="text-xl font-bold text-slate-900 dark:text-white">Single Sign-On (OIDC)</h2>
|
|
||||||
<p className="text-sm text-slate-600 dark:text-gray-400">{selectedOrg.name}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button onClick={() => setIsSSOModalOpen(false)} className="p-2 text-slate-400 hover:text-slate-600 dark:hover:text-white rounded-full transition-colors">
|
|
||||||
<X className="w-5 h-5" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="flex items-center justify-between p-4 rounded-xl bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10">
|
|
||||||
<div className="pr-4">
|
|
||||||
<h3 className="font-semibold text-slate-900 dark:text-white">Enable OIDC SSO</h3>
|
|
||||||
<p className="text-xs text-slate-500 dark:text-gray-500">Allow users to log in via your identity provider.</p>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={() => setSsoEnabled(!ssoEnabled)}
|
|
||||||
className={`w-12 h-6 rounded-full transition-colors relative shrink-0 ${ssoEnabled ? 'bg-blue-600' : 'bg-slate-300 dark:bg-gray-700'}`}
|
|
||||||
>
|
|
||||||
<div className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-all ${ssoEnabled ? 'right-1' : 'left-1'}`} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-4 pt-2">
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-slate-600 dark:text-gray-400 mb-1.5">Issuer URL</label>
|
|
||||||
<div className="relative">
|
|
||||||
<Globe className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
|
||||||
<input
|
|
||||||
type="url"
|
|
||||||
value={issuerUrl}
|
|
||||||
onChange={(e) => setIssuerUrl(e.target.value)}
|
|
||||||
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-lg pl-10 pr-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all font-mono text-sm text-slate-900 dark:text-white placeholder-slate-400"
|
|
||||||
placeholder="https://accounts.google.com"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-slate-600 dark:text-gray-400 mb-1.5">Client ID</label>
|
|
||||||
<div className="relative">
|
|
||||||
<ShieldCheck className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={clientId}
|
|
||||||
onChange={(e) => setClientId(e.target.value)}
|
|
||||||
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-lg pl-10 pr-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all font-mono text-sm text-slate-900 dark:text-white placeholder-slate-400"
|
|
||||||
placeholder="Your OIDC Client ID"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-slate-600 dark:text-gray-400 mb-1.5">Client Secret</label>
|
|
||||||
<div className="relative">
|
|
||||||
<Key className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
|
||||||
<input
|
|
||||||
type="password"
|
|
||||||
value={clientSecret}
|
|
||||||
onChange={(e) => setClientSecret(e.target.value)}
|
|
||||||
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-lg pl-10 pr-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all font-mono text-sm text-slate-900 dark:text-white placeholder-slate-400"
|
|
||||||
placeholder="••••••••••••••••"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="p-4 rounded-xl bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/20 space-y-2">
|
|
||||||
<div className="flex items-center gap-2 text-blue-700 dark:text-blue-400 text-xs font-black uppercase tracking-wider">
|
|
||||||
<Settings2 className="w-4 h-4" /> CONFIGURATION STEPS
|
|
||||||
</div>
|
|
||||||
<p className="text-[10px] text-blue-800 dark:text-blue-300 leading-relaxed font-medium">
|
|
||||||
1. Register OpenCCB in your IDP.<br />
|
|
||||||
2. Redirect URI: <span className="font-mono bg-blue-200 dark:bg-blue-500/20 px-1 rounded">{API_BASE_URL}/auth/sso/callback</span><br />
|
|
||||||
3. Copy the Issuer, ID and Secret here.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex gap-3 mt-8">
|
|
||||||
<button
|
|
||||||
onClick={() => setIsSSOModalOpen(false)}
|
|
||||||
className="flex-1 px-4 py-3 bg-slate-50 dark:bg-white/5 hover:bg-slate-100 dark:hover:bg-white/10 border border-slate-200 dark:border-white/10 rounded-xl transition-all font-medium text-slate-600 dark:text-white"
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={handleSSOSave}
|
|
||||||
disabled={isSavingSSO}
|
|
||||||
className="flex-[2] px-8 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-xl transition-all shadow-lg shadow-blue-500/20 font-bold flex items-center justify-center gap-2 uppercase tracking-wide"
|
|
||||||
>
|
|
||||||
{isSavingSSO ? <div className="w-5 h-5 border-2 border-white/20 border-t-white rounded-full animate-spin" /> : <Save className="w-5 h-5" />}
|
|
||||||
Save SSO Settings
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -5,13 +5,12 @@ import { cmsApi } from "@/lib/api";
|
|||||||
import { useAuth } from "@/context/AuthContext";
|
import { useAuth } from "@/context/AuthContext";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { UserPlus, Mail, Lock, User, Building2 } from "lucide-react";
|
import { UserPlus, Mail, Lock, User } from "lucide-react";
|
||||||
|
|
||||||
export default function RegisterPage() {
|
export default function RegisterPage() {
|
||||||
const [email, setEmail] = useState("");
|
const [email, setEmail] = useState("");
|
||||||
const [password, setPassword] = useState("");
|
const [password, setPassword] = useState("");
|
||||||
const [fullName, setFullName] = useState("");
|
const [fullName, setFullName] = useState("");
|
||||||
const [organizationName, setOrganizationName] = useState("");
|
|
||||||
const [error, setError] = useState("");
|
const [error, setError] = useState("");
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
@@ -23,7 +22,7 @@ export default function RegisterPage() {
|
|||||||
setLoading(true);
|
setLoading(true);
|
||||||
setError("");
|
setError("");
|
||||||
try {
|
try {
|
||||||
const res = await cmsApi.register({ email, password, full_name: fullName, organization_name: organizationName });
|
const res = await cmsApi.register({ email, password, full_name: fullName });
|
||||||
login(res.user, res.token);
|
login(res.user, res.token);
|
||||||
router.push("/");
|
router.push("/");
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
@@ -98,20 +97,7 @@ export default function RegisterPage() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className="text-[10px] font-black uppercase tracking-widest text-gray-500 px-1">Organization Name (Optional)</label>
|
|
||||||
<div className="relative">
|
|
||||||
<Building2 className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500" size={18} />
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={organizationName}
|
|
||||||
onChange={(e) => setOrganizationName(e.target.value)}
|
|
||||||
placeholder="Your School or Company"
|
|
||||||
className="w-full bg-white/5 border border-white/10 rounded-xl py-4 pl-12 pr-4 text-sm text-white focus:outline-none focus:border-blue-500 transition-all placeholder:text-gray-700"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<p className="text-[10px] text-gray-600 px-1">If blank, we'll use your email domain.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
<button
|
||||||
disabled={loading}
|
disabled={loading}
|
||||||
|
|||||||
@@ -38,6 +38,7 @@ import MemoryBlock from "@/components/blocks/MemoryBlock";
|
|||||||
import RolePlayingBlock from "@/components/blocks/RolePlayingBlock";
|
import RolePlayingBlock from "@/components/blocks/RolePlayingBlock";
|
||||||
import PeerReviewBlock from "@/components/blocks/PeerReviewBlock";
|
import PeerReviewBlock from "@/components/blocks/PeerReviewBlock";
|
||||||
import MermaidBlock from "@/components/blocks/MermaidBlock";
|
import MermaidBlock from "@/components/blocks/MermaidBlock";
|
||||||
|
import CodeLabBlock from "@/components/blocks/CodeLabBlock";
|
||||||
import SaveToLibraryModal from "@/components/modals/SaveToLibraryModal";
|
import SaveToLibraryModal from "@/components/modals/SaveToLibraryModal";
|
||||||
import LibraryPanel from "@/components/LibraryPanel";
|
import LibraryPanel from "@/components/LibraryPanel";
|
||||||
import Modal from "@/components/Modal";
|
import Modal from "@/components/Modal";
|
||||||
@@ -1106,6 +1107,20 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
|||||||
onUpdate={(updates) => updateBlock(block.id, updates)}
|
onUpdate={(updates) => updateBlock(block.id, updates)}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
{block.type === 'code-lab' && (
|
||||||
|
<CodeLabBlock
|
||||||
|
id={block.id}
|
||||||
|
title={block.title}
|
||||||
|
language={block.language}
|
||||||
|
instructions={block.instructions}
|
||||||
|
initial_code={block.initial_code}
|
||||||
|
solution={block.solution}
|
||||||
|
test_cases={block.test_cases}
|
||||||
|
editMode={editMode}
|
||||||
|
lessonId={params.lessonId}
|
||||||
|
onChange={(updates) => updateBlock(block.id, updates)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
@@ -1148,6 +1163,7 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
|||||||
{ type: 'audio-response', icon: '🎤', label: 'Oral Practice', color: 'blue' },
|
{ type: 'audio-response', icon: '🎤', label: 'Oral Practice', color: 'blue' },
|
||||||
{ type: 'memory-match', icon: '🧩', label: 'Logic Game', color: 'indigo' },
|
{ type: 'memory-match', icon: '🧩', label: 'Logic Game', color: 'indigo' },
|
||||||
{ type: 'peer-review', icon: '👥', label: 'Peer Review', color: 'slate' },
|
{ type: 'peer-review', icon: '👥', label: 'Peer Review', color: 'slate' },
|
||||||
|
{ type: 'code-lab', icon: '🧑💻', label: 'Code Lab', color: 'indigo' },
|
||||||
{ type: 'mermaid', icon: '📊', label: 'Mermaid Diagram', color: 'indigo' },
|
{ type: 'mermaid', icon: '📊', label: 'Mermaid Diagram', color: 'indigo' },
|
||||||
{ type: 'role-playing', icon: '🎭', label: 'Role-Playing AI', color: 'purple' },
|
{ type: 'role-playing', icon: '🎭', label: 'Role-Playing AI', color: 'purple' },
|
||||||
].map((item) => (
|
].map((item) => (
|
||||||
|
|||||||
@@ -21,7 +21,6 @@ import {
|
|||||||
Send,
|
Send,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import CourseEditorLayout from "@/components/CourseEditorLayout";
|
import CourseEditorLayout from "@/components/CourseEditorLayout";
|
||||||
import OrganizationSelector from "@/components/OrganizationSelector";
|
|
||||||
|
|
||||||
interface FullModule extends Module {
|
interface FullModule extends Module {
|
||||||
lessons: Lesson[];
|
lessons: Lesson[];
|
||||||
@@ -35,8 +34,6 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
|
|||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
const [editingId, setEditingId] = useState<string | null>(null);
|
const [editingId, setEditingId] = useState<string | null>(null);
|
||||||
const [editValue, setEditValue] = useState("");
|
const [editValue, setEditValue] = useState("");
|
||||||
const [organizations, setOrganizations] = useState<Organization[]>([]);
|
|
||||||
const [isOrgModalOpen, setIsOrgModalOpen] = useState(false);
|
|
||||||
const [saving, setSaving] = useState(false); // Added saving state
|
const [saving, setSaving] = useState(false); // Added saving state
|
||||||
const { user } = useAuth();
|
const { user } = useAuth();
|
||||||
|
|
||||||
@@ -63,19 +60,7 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
|
|||||||
loadData();
|
loadData();
|
||||||
}, [params.id]);
|
}, [params.id]);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const loadOrgs = async () => {
|
|
||||||
if (user?.role === 'admin' && user?.organization_id === '00000000-0000-0000-0000-000000000001') {
|
|
||||||
try {
|
|
||||||
const orgs = await cmsApi.getOrganizations();
|
|
||||||
setOrganizations(orgs);
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Failed to load organizations", err);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
loadOrgs();
|
|
||||||
}, [user]);
|
|
||||||
|
|
||||||
const handleAddModule = async () => {
|
const handleAddModule = async () => {
|
||||||
const title = "";
|
const title = "";
|
||||||
@@ -194,27 +179,19 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
|
|||||||
|
|
||||||
const handlePublish = async () => {
|
const handlePublish = async () => {
|
||||||
if (!course) return;
|
if (!course) return;
|
||||||
|
publishCourse();
|
||||||
const isSuperAdmin = user?.role === 'admin' && user?.organization_id === '00000000-0000-0000-0000-000000000001';
|
|
||||||
|
|
||||||
if (isSuperAdmin && organizations.length > 0) {
|
|
||||||
setIsOrgModalOpen(true);
|
|
||||||
} else {
|
|
||||||
publishCourse();
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const publishCourse = async (targetOrgId?: string) => {
|
const publishCourse = async () => {
|
||||||
try {
|
try {
|
||||||
setSaving(true);
|
setSaving(true);
|
||||||
await cmsApi.publishCourse(params.id as string, targetOrgId);
|
await cmsApi.publishCourse(params.id as string);
|
||||||
alert("Course published successfully!");
|
alert("Course published successfully!");
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error("Failed to publish course", err);
|
console.error("Failed to publish course", err);
|
||||||
alert("Failed to publish course.");
|
alert("Failed to publish course.");
|
||||||
} finally {
|
} finally {
|
||||||
setSaving(false);
|
setSaving(false);
|
||||||
setIsOrgModalOpen(false); // Close modal after publishing attempt
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -429,15 +406,7 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</CourseEditorLayout>
|
</CourseEditorLayout>
|
||||||
{/* Organization Selector Modal */}
|
|
||||||
<OrganizationSelector
|
|
||||||
isOpen={isOrgModalOpen}
|
|
||||||
onClose={() => setIsOrgModalOpen(false)}
|
|
||||||
organizations={organizations}
|
|
||||||
title="Publish to Organization"
|
|
||||||
actionLabel="Publish Course"
|
|
||||||
onConfirm={(orgId) => publishCourse(orgId)}
|
|
||||||
/>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,7 +6,6 @@ import Link from "next/link";
|
|||||||
import { useAuth } from "@/context/AuthContext";
|
import { useAuth } from "@/context/AuthContext";
|
||||||
import { useTranslation } from "@/context/I18nContext";
|
import { useTranslation } from "@/context/I18nContext";
|
||||||
import { Plus, BookOpen, Download, Upload, Sparkles, Wand2, Trash2 } from "lucide-react";
|
import { Plus, BookOpen, Download, Upload, Sparkles, Wand2, Trash2 } from "lucide-react";
|
||||||
import OrganizationSelector from "@/components/OrganizationSelector";
|
|
||||||
import Modal from "@/components/Modal";
|
import Modal from "@/components/Modal";
|
||||||
import PageLayout from "@/components/PageLayout";
|
import PageLayout from "@/components/PageLayout";
|
||||||
|
|
||||||
@@ -34,27 +33,13 @@ export default function StudioDashboard() {
|
|||||||
loadCourses();
|
loadCourses();
|
||||||
}, [user]);
|
}, [user]);
|
||||||
|
|
||||||
const [organizations, setOrganizations] = useState<Organization[]>([]);
|
|
||||||
const [isOrgModalOpen, setIsOrgModalOpen] = useState(false);
|
|
||||||
const [isTitleModalOpen, setIsTitleModalOpen] = useState(false);
|
const [isTitleModalOpen, setIsTitleModalOpen] = useState(false);
|
||||||
const [isAIModalOpen, setIsAIModalOpen] = useState(false);
|
const [isAIModalOpen, setIsAIModalOpen] = useState(false);
|
||||||
const [newCourseTitle, setNewCourseTitle] = useState("");
|
const [newCourseTitle, setNewCourseTitle] = useState("");
|
||||||
const [aiPrompt, setAiPrompt] = useState("");
|
const [aiPrompt, setAiPrompt] = useState("");
|
||||||
const [isGenerating, setIsGenerating] = useState(false);
|
const [isGenerating, setIsGenerating] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const loadOrgs = async () => {
|
|
||||||
if (user?.role === 'admin' && user?.organization_id === '00000000-0000-0000-0000-000000000001') {
|
|
||||||
try {
|
|
||||||
const orgs = await cmsApi.getOrganizations();
|
|
||||||
setOrganizations(orgs);
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Failed to load organizations", err);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
loadOrgs();
|
|
||||||
}, [user]);
|
|
||||||
|
|
||||||
const handleCreateCourse = async () => {
|
const handleCreateCourse = async () => {
|
||||||
setIsTitleModalOpen(true);
|
setIsTitleModalOpen(true);
|
||||||
@@ -64,18 +49,12 @@ export default function StudioDashboard() {
|
|||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if (!newCourseTitle) return;
|
if (!newCourseTitle) return;
|
||||||
setIsTitleModalOpen(false);
|
setIsTitleModalOpen(false);
|
||||||
|
createCourse();
|
||||||
const isSuperAdmin = user?.role === 'admin' && user?.organization_id === '00000000-0000-0000-0000-000000000001';
|
|
||||||
if (isSuperAdmin && organizations.length > 0) {
|
|
||||||
setIsOrgModalOpen(true);
|
|
||||||
} else {
|
|
||||||
createCourse();
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const createCourse = async (targetOrgId?: string) => {
|
const createCourse = async () => {
|
||||||
try {
|
try {
|
||||||
const newCourse = await cmsApi.createCourse(newCourseTitle, targetOrgId);
|
const newCourse = await cmsApi.createCourse(newCourseTitle);
|
||||||
setCourses((prev: Course[]) => [...prev, newCourse]);
|
setCourses((prev: Course[]) => [...prev, newCourse]);
|
||||||
setNewCourseTitle("");
|
setNewCourseTitle("");
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
@@ -331,15 +310,7 @@ export default function StudioDashboard() {
|
|||||||
</form>
|
</form>
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|
||||||
{/* Organization Selector Modal */}
|
|
||||||
<OrganizationSelector
|
|
||||||
isOpen={isOrgModalOpen}
|
|
||||||
onClose={() => setIsOrgModalOpen(false)}
|
|
||||||
organizations={organizations}
|
|
||||||
title="Target Organization"
|
|
||||||
actionLabel="Create Course"
|
|
||||||
onConfirm={(orgId) => createCourse(orgId)}
|
|
||||||
/>
|
|
||||||
</PageLayout>
|
</PageLayout>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -45,7 +45,7 @@ export default function BrandingSettings() {
|
|||||||
if (!org) return;
|
if (!org) return;
|
||||||
setSaving(true);
|
setSaving(true);
|
||||||
try {
|
try {
|
||||||
await cmsApi.updateOrganizationBranding(org.id, formData);
|
await cmsApi.updateOrganizationBranding(formData);
|
||||||
fetchOrg();
|
fetchOrg();
|
||||||
alert("Branding updated successfully!");
|
alert("Branding updated successfully!");
|
||||||
router.refresh();
|
router.refresh();
|
||||||
@@ -117,7 +117,7 @@ export default function BrandingSettings() {
|
|||||||
accept="image/png,image/jpeg,image/svg+xml"
|
accept="image/png,image/jpeg,image/svg+xml"
|
||||||
currentUrl={org.logo_url}
|
currentUrl={org.logo_url}
|
||||||
customUploadFn={async (file) => {
|
customUploadFn={async (file) => {
|
||||||
const res = await cmsApi.uploadOrganizationLogo(org.id, file);
|
const res = await cmsApi.uploadOrganizationLogo(file);
|
||||||
return { url: res.logo_url || "" };
|
return { url: res.logo_url || "" };
|
||||||
}}
|
}}
|
||||||
onUploadComplete={(url) => {
|
onUploadComplete={(url) => {
|
||||||
@@ -151,7 +151,7 @@ export default function BrandingSettings() {
|
|||||||
accept="image/png,image/x-icon,image/svg+xml,image/jpeg"
|
accept="image/png,image/x-icon,image/svg+xml,image/jpeg"
|
||||||
currentUrl={org.favicon_url}
|
currentUrl={org.favicon_url}
|
||||||
customUploadFn={async (file) => {
|
customUploadFn={async (file) => {
|
||||||
const res = await cmsApi.uploadOrganizationFavicon(org.id, file);
|
const res = await cmsApi.uploadOrganizationFavicon(file);
|
||||||
return { url: res.favicon_url || "" };
|
return { url: res.favicon_url || "" };
|
||||||
}}
|
}}
|
||||||
onUploadComplete={(url) => {
|
onUploadComplete={(url) => {
|
||||||
|
|||||||
@@ -1,70 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import React, { useState } from "react";
|
|
||||||
import Modal from "./Modal";
|
|
||||||
import Combobox from "./Combobox";
|
|
||||||
import { Organization } from "@/lib/api";
|
|
||||||
|
|
||||||
interface OrganizationSelectorProps {
|
|
||||||
isOpen: boolean;
|
|
||||||
onClose: () => void;
|
|
||||||
organizations: Organization[];
|
|
||||||
onConfirm: (orgId: string | undefined) => void;
|
|
||||||
title: string;
|
|
||||||
actionLabel: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function OrganizationSelector({
|
|
||||||
isOpen,
|
|
||||||
onClose,
|
|
||||||
organizations,
|
|
||||||
onConfirm,
|
|
||||||
title,
|
|
||||||
actionLabel
|
|
||||||
}: OrganizationSelectorProps) {
|
|
||||||
const [selectedId, setSelectedId] = useState<string>("");
|
|
||||||
|
|
||||||
const handleConfirm = () => {
|
|
||||||
onConfirm(selectedId || undefined);
|
|
||||||
onClose();
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Modal isOpen={isOpen} onClose={onClose} title={title}>
|
|
||||||
<div className="space-y-6">
|
|
||||||
<fieldset>
|
|
||||||
<legend className="sr-only">Organization Selection</legend>
|
|
||||||
<label htmlFor="organization-select" className="block text-sm font-medium text-gray-400 mb-2">
|
|
||||||
Target Organization
|
|
||||||
</label>
|
|
||||||
<Combobox
|
|
||||||
id="organization-select"
|
|
||||||
options={organizations}
|
|
||||||
value={selectedId}
|
|
||||||
onChange={setSelectedId}
|
|
||||||
placeholder="Search or Select Organization..."
|
|
||||||
/>
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<p className="mt-3 text-xs text-gray-500 italic">
|
|
||||||
Leave empty to use the Default Organization.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="flex gap-3 pt-2">
|
|
||||||
<button
|
|
||||||
onClick={onClose}
|
|
||||||
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
|
|
||||||
onClick={handleConfirm}
|
|
||||||
className="flex-[2] px-4 py-2.5 bg-blue-600 hover:bg-blue-500 text-white rounded-lg transition-all shadow-lg shadow-blue-500/20 font-bold text-sm"
|
|
||||||
>
|
|
||||||
{actionLabel}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,251 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { Wand2, Loader2, Code2, Plus, Trash2 } from "lucide-react";
|
||||||
|
import { cmsApi } from "@/lib/api";
|
||||||
|
|
||||||
|
interface CodeLabBlockProps {
|
||||||
|
id: string;
|
||||||
|
title?: string;
|
||||||
|
language?: string;
|
||||||
|
instructions?: string;
|
||||||
|
initial_code?: string;
|
||||||
|
solution?: string;
|
||||||
|
test_cases?: { description: string; expected: string }[];
|
||||||
|
editMode: boolean;
|
||||||
|
lessonId: string;
|
||||||
|
onChange: (updates: {
|
||||||
|
title?: string;
|
||||||
|
language?: string;
|
||||||
|
instructions?: string;
|
||||||
|
initial_code?: string;
|
||||||
|
solution?: string;
|
||||||
|
test_cases?: { description: string; expected: string }[]
|
||||||
|
}) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function CodeLabBlock({
|
||||||
|
id,
|
||||||
|
title = "",
|
||||||
|
language = "python",
|
||||||
|
instructions = "",
|
||||||
|
initial_code = "",
|
||||||
|
solution = "",
|
||||||
|
test_cases = [],
|
||||||
|
editMode,
|
||||||
|
lessonId,
|
||||||
|
onChange
|
||||||
|
}: CodeLabBlockProps) {
|
||||||
|
const [isGenerating, setIsGenerating] = useState(false);
|
||||||
|
const [promptHint, setPromptHint] = useState("");
|
||||||
|
|
||||||
|
const handleGenerateAI = async () => {
|
||||||
|
setIsGenerating(true);
|
||||||
|
try {
|
||||||
|
const data = await cmsApi.generateCodeLab(lessonId, {
|
||||||
|
language,
|
||||||
|
prompt_hint: promptHint || undefined
|
||||||
|
});
|
||||||
|
onChange({
|
||||||
|
title: data.title,
|
||||||
|
instructions: data.instructions,
|
||||||
|
initial_code: data.initial_code,
|
||||||
|
solution: data.solution,
|
||||||
|
test_cases: data.test_cases,
|
||||||
|
language: data.language
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error("AI Code Lab Generation failed:", error);
|
||||||
|
alert("No se pudo generar el laboratorio con IA. Por favor, intenta de nuevo.");
|
||||||
|
} finally {
|
||||||
|
setIsGenerating(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const addTestCase = () => {
|
||||||
|
const newTestCases = [...test_cases, { description: "", expected: "" }];
|
||||||
|
onChange({ test_cases: newTestCases });
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateTestCase = (index: number, field: "description" | "expected", value: string) => {
|
||||||
|
const newTestCases = [...test_cases];
|
||||||
|
newTestCases[index] = { ...newTestCases[index], [field]: value };
|
||||||
|
onChange({ test_cases: newTestCases });
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeTestCase = (index: number) => {
|
||||||
|
const newTestCases = test_cases.filter((_, i) => i !== index);
|
||||||
|
onChange({ test_cases: newTestCases });
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!editMode) {
|
||||||
|
return (
|
||||||
|
<div className="space-y-6" id={id}>
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="p-3 rounded-2xl bg-indigo-50 dark:bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 shadow-inner">
|
||||||
|
<Code2 size={24} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-2xl font-black italic tracking-tight text-slate-900 dark:text-white uppercase">
|
||||||
|
{title || "Laboratorio de Código"}
|
||||||
|
</h3>
|
||||||
|
<p className="text-[10px] text-slate-400 dark:text-gray-500 uppercase tracking-[0.2em] font-black">
|
||||||
|
{language.toUpperCase()} • Ejercicio Interactivo
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-8 rounded-[3rem] border border-slate-100 dark:border-white/5 bg-white dark:bg-black/20 shadow-xl">
|
||||||
|
<div className="prose dark:prose-invert max-w-none text-slate-600 dark:text-gray-300 mb-8">
|
||||||
|
{instructions || "Sigue las instrucciones del editor para completar el desafío."}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-slate-900 rounded-2xl p-6 font-mono text-sm text-indigo-100 mb-6">
|
||||||
|
<pre className="whitespace-pre-wrap">{initial_code || "# El código inicial aparecerá aquí"}</pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-slate-400">
|
||||||
|
<span className="w-2 h-2 rounded-full bg-emerald-500" />
|
||||||
|
Vista Previa del Estudiante activada
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6" id={id}>
|
||||||
|
<div className="p-10 bg-white dark:bg-white/5 border border-slate-100 dark:border-white/10 space-y-10 rounded-[3rem] shadow-xl relative overflow-hidden group/cleditor">
|
||||||
|
<div className="absolute top-0 right-0 w-64 h-64 bg-indigo-500/5 rounded-full blur-[80px] -translate-y-1/2 translate-x-1/2" />
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-10 relative z-10">
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="space-y-3">
|
||||||
|
<label className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 pl-1">Título del Desafío</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={title}
|
||||||
|
onChange={(e) => onChange({ title: e.target.value })}
|
||||||
|
placeholder="Ej. Calculadora de Factoriales..."
|
||||||
|
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-100 dark:border-white/10 rounded-2xl px-6 py-4 text-sm font-black uppercase text-slate-800 dark:text-white outline-none focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
<label className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 pl-1">Lenguaje de Programación</label>
|
||||||
|
<select
|
||||||
|
value={language}
|
||||||
|
onChange={(e) => onChange({ language: e.target.value })}
|
||||||
|
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-100 dark:border-white/10 rounded-2xl px-6 py-4 text-sm font-bold text-slate-700 dark:text-gray-300 outline-none focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all appearance-none"
|
||||||
|
>
|
||||||
|
<option value="python">Python</option>
|
||||||
|
<option value="javascript">JavaScript</option>
|
||||||
|
<option value="sql">SQL</option>
|
||||||
|
<option value="bash">Bash</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
<label className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 pl-1">Instrucciones</label>
|
||||||
|
<textarea
|
||||||
|
value={instructions}
|
||||||
|
onChange={(e) => onChange({ instructions: e.target.value })}
|
||||||
|
placeholder="Describe qué debe hacer el estudiante..."
|
||||||
|
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-100 dark:border-white/10 rounded-2xl px-6 py-4 text-sm text-slate-700 dark:text-gray-300 min-h-[150px] outline-none focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="pt-6 border-t border-slate-100 dark:border-white/5 space-y-4">
|
||||||
|
<h4 className="text-sm font-black text-slate-800 dark:text-white uppercase tracking-tight">Generación con IA</h4>
|
||||||
|
<textarea
|
||||||
|
value={promptHint}
|
||||||
|
onChange={(e) => setPromptHint(e.target.value)}
|
||||||
|
placeholder="Ej. Crea un ejercicio sobre bucles for que use una lista de tareas..."
|
||||||
|
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-100 dark:border-white/10 rounded-2xl px-6 py-4 text-sm text-slate-700 dark:text-gray-300 min-h-[80px] outline-none focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={handleGenerateAI}
|
||||||
|
disabled={isGenerating}
|
||||||
|
className="flex w-full justify-center items-center gap-2 px-6 py-4 bg-indigo-600 text-white rounded-2xl text-[11px] font-black uppercase tracking-widest hover:bg-indigo-700 transition-all disabled:opacity-50 shadow-xl shadow-indigo-500/20"
|
||||||
|
>
|
||||||
|
{isGenerating ? <Loader2 className="animate-spin" size={16} /> : <Wand2 size={16} />}
|
||||||
|
{isGenerating ? "Generando Laboratorio..." : "Auto-Generar con IA"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-8 flex flex-col">
|
||||||
|
<div className="space-y-3">
|
||||||
|
<label className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 pl-1">Código Inicial (Para el estudiante)</label>
|
||||||
|
<textarea
|
||||||
|
value={initial_code}
|
||||||
|
onChange={(e) => onChange({ initial_code: e.target.value })}
|
||||||
|
placeholder="# Escribe el código base con TODOs..."
|
||||||
|
className="w-full bg-slate-900 border border-slate-800 rounded-2xl p-6 font-mono text-xs text-emerald-400 min-h-[200px] outline-none focus:ring-4 focus:ring-indigo-500/10 transition-all"
|
||||||
|
spellCheck={false}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
<label className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 pl-1">Solución (Oculta)</label>
|
||||||
|
<textarea
|
||||||
|
value={solution}
|
||||||
|
onChange={(e) => onChange({ solution: e.target.value })}
|
||||||
|
placeholder="# Escribe la solución completa..."
|
||||||
|
className="w-full bg-slate-900 border border-slate-800 rounded-2xl p-6 font-mono text-xs text-amber-400 min-h-[200px] outline-none focus:ring-4 focus:ring-indigo-500/10 transition-all"
|
||||||
|
spellCheck={false}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="pt-8 border-t border-slate-100 dark:border-white/5">
|
||||||
|
<div className="flex items-center justify-between mb-6">
|
||||||
|
<label className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 pl-1">Casos de Prueba</label>
|
||||||
|
<button
|
||||||
|
onClick={addTestCase}
|
||||||
|
className="flex items-center gap-2 px-4 py-2 bg-slate-100 dark:bg-white/5 hover:bg-indigo-600 hover:text-white text-slate-600 dark:text-gray-300 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all"
|
||||||
|
>
|
||||||
|
<Plus size={14} /> Añadir Caso
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 gap-4">
|
||||||
|
{test_cases.map((tc, index) => (
|
||||||
|
<div key={index} className="flex gap-4 items-start bg-slate-50 dark:bg-black/20 p-6 rounded-2xl border border-slate-100 dark:border-white/5 group/tc">
|
||||||
|
<div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<span className="text-[9px] font-black uppercase text-slate-400">Descripción del Caso</span>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={tc.description}
|
||||||
|
onChange={(e) => updateTestCase(index, "description", e.target.value)}
|
||||||
|
placeholder="Ej. Entrada válida: 5"
|
||||||
|
className="w-full bg-white dark:bg-black/40 border border-slate-100 dark:border-white/10 rounded-xl px-4 py-2 text-xs font-bold"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<span className="text-[9px] font-black uppercase text-slate-400">Resultado Esperado (Texto)</span>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={tc.expected}
|
||||||
|
onChange={(e) => updateTestCase(index, "expected", e.target.value)}
|
||||||
|
placeholder="Ej. 120"
|
||||||
|
className="w-full bg-white dark:bg-black/40 border border-slate-100 dark:border-white/10 rounded-xl px-4 py-2 text-xs font-bold"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => removeTestCase(index)}
|
||||||
|
className="p-2 text-slate-300 hover:text-red-500 opacity-0 group-hover/tc:opacity-100 transition-all mt-6"
|
||||||
|
>
|
||||||
|
<Trash2 size={16} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
+31
-51
@@ -68,7 +68,7 @@ export interface QuizQuestion {
|
|||||||
|
|
||||||
export interface Block {
|
export interface Block {
|
||||||
id: string;
|
id: string;
|
||||||
type: 'description' | 'media' | 'quiz' | 'fill-in-the-blanks' | 'matching' | 'ordering' | 'short-answer' | 'document' | 'video_marker' | 'audio-response' | 'memory-match' | 'hotspot' | 'peer-review' | 'role-playing' | 'mermaid';
|
type: 'description' | 'media' | 'quiz' | 'fill-in-the-blanks' | 'matching' | 'ordering' | 'short-answer' | 'document' | 'video_marker' | 'audio-response' | 'memory-match' | 'hotspot' | 'peer-review' | 'role-playing' | 'mermaid' | 'code-lab';
|
||||||
title?: string;
|
title?: string;
|
||||||
content?: string;
|
content?: string;
|
||||||
url?: string;
|
url?: string;
|
||||||
@@ -107,6 +107,12 @@ export interface Block {
|
|||||||
initial_message?: string;
|
initial_message?: string;
|
||||||
// Mermaid fields
|
// Mermaid fields
|
||||||
mermaid_code?: string;
|
mermaid_code?: string;
|
||||||
|
// Code Lab fields
|
||||||
|
language?: string;
|
||||||
|
instructions?: string;
|
||||||
|
initial_code?: string;
|
||||||
|
solution?: string;
|
||||||
|
test_cases?: { description: string; expected: string }[];
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Lesson {
|
export interface Lesson {
|
||||||
@@ -614,19 +620,27 @@ const apiFetch = (url: string, options: RequestInit = {}, isLms: boolean = false
|
|||||||
export const cmsApi = {
|
export const cmsApi = {
|
||||||
// Organization
|
// Organization
|
||||||
getOrganization: (): Promise<Organization> => apiFetch('/organization'),
|
getOrganization: (): Promise<Organization> => apiFetch('/organization'),
|
||||||
getOrganizations: (): Promise<Organization[]> => apiFetch('/organizations'),
|
updateOrganizationBranding: (payload: BrandingPayload): Promise<Organization> => apiFetch('/organization/branding', { method: 'PUT', body: JSON.stringify(payload) }),
|
||||||
createOrganization: (name: string, domain?: string): Promise<Organization> => apiFetch('/organizations', { method: 'POST', body: JSON.stringify({ name, domain }) }),
|
uploadOrganizationLogo: (file: File): Promise<{ logo_url: string }> => {
|
||||||
updateOrganization: (id: string, payload: { name?: string, domain?: string }): Promise<Organization> => apiFetch(`/organizations/${id}`, { method: 'PUT', body: JSON.stringify(payload) }),
|
const formData = new FormData();
|
||||||
provisionOrganization: (data: ProvisionPayload): Promise<Organization> => apiFetch('/admin/provision', { method: 'POST', body: JSON.stringify(data) }),
|
formData.append('file', file);
|
||||||
|
return apiFetch('/organization/logo', { method: 'POST', body: formData });
|
||||||
|
},
|
||||||
|
uploadOrganizationFavicon: (file: File): Promise<{ favicon_url: string }> => {
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append('file', file);
|
||||||
|
return apiFetch('/organization/favicon', { method: 'POST', body: formData });
|
||||||
|
},
|
||||||
|
getSSOConfig: (): Promise<OrganizationSSOConfig> => apiFetch('/organization/sso'),
|
||||||
|
updateSSOConfig: (payload: Partial<OrganizationSSOConfig>): Promise<void> => apiFetch('/organization/sso', { method: 'PUT', body: JSON.stringify(payload) }),
|
||||||
|
|
||||||
// Auth
|
// Auth
|
||||||
register: (payload: AuthPayload): Promise<AuthResponse> => apiFetch('/auth/register', { method: 'POST', body: JSON.stringify(payload) }),
|
register: (payload: AuthPayload): Promise<AuthResponse> => apiFetch('/auth/register', { method: 'POST', body: JSON.stringify(payload) }),
|
||||||
login: (payload: AuthPayload): Promise<AuthResponse> => apiFetch('/auth/login', { method: 'POST', body: JSON.stringify(payload) }),
|
login: (payload: AuthPayload): Promise<AuthResponse> => apiFetch('/auth/login', { method: 'POST', body: JSON.stringify(payload) }),
|
||||||
getMe: (): Promise<User> => apiFetch('/auth/me'),
|
getMe: (): Promise<User> => apiFetch('/auth/me'),
|
||||||
|
|
||||||
// Organizations Search
|
// Branding (Public)
|
||||||
searchOrganizations: (query: string): Promise<{ id: string, name: string, domain?: string }[]> => apiFetch(`/organizations/search?q=${encodeURIComponent(query)}`),
|
getBranding: (): Promise<BrandingResponse> => apiFetch('/branding'),
|
||||||
getBranding: (id: string): Promise<BrandingResponse> => apiFetch(`/organizations/${id}/branding`),
|
|
||||||
|
|
||||||
// Courses
|
// Courses
|
||||||
getCourses: (): Promise<Course[]> => apiFetch('/courses'),
|
getCourses: (): Promise<Course[]> => apiFetch('/courses'),
|
||||||
@@ -675,6 +689,15 @@ export const cmsApi = {
|
|||||||
body: JSON.stringify(payload)
|
body: JSON.stringify(payload)
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
async generateCodeLab(lessonId: string, payload: { language?: string; prompt_hint?: string }): Promise<{
|
||||||
|
language: string; title: string; instructions: string; initial_code: string; solution: string;
|
||||||
|
test_cases: { description: string; expected: string }[];
|
||||||
|
}> {
|
||||||
|
return apiFetch(`/lessons/${lessonId}/generate-code-lab`, {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify(payload)
|
||||||
|
});
|
||||||
|
},
|
||||||
async generateHotspots(lessonId: string, payload: { image_url: string, prompt_hint?: string }): Promise<{
|
async generateHotspots(lessonId: string, payload: { image_url: string, prompt_hint?: string }): Promise<{
|
||||||
label: string;
|
label: string;
|
||||||
description: string;
|
description: string;
|
||||||
@@ -785,49 +808,6 @@ export const cmsApi = {
|
|||||||
xhr.send(formData);
|
xhr.send(formData);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
// Organizations Branding
|
|
||||||
getOrganizationBranding: (id: string): Promise<Organization> => apiFetch(`/organizations/${id}/branding`),
|
|
||||||
updateOrganizationBranding: (id: string, payload: BrandingPayload): Promise<void> => apiFetch(`/organizations/${id}/branding`, { method: 'PUT', body: JSON.stringify(payload) }),
|
|
||||||
uploadOrganizationLogo: (id: string, file: File): Promise<UploadResponse> => {
|
|
||||||
const formData = new FormData();
|
|
||||||
formData.append('file', file);
|
|
||||||
const token = getToken();
|
|
||||||
const selectedOrgId = getSelectedOrgId();
|
|
||||||
const headers: Record<string, string> = {
|
|
||||||
...(token ? { 'Authorization': `Bearer ${token}` } : {}),
|
|
||||||
...(selectedOrgId ? { 'X-Organization-Id': selectedOrgId } : {})
|
|
||||||
};
|
|
||||||
return fetch(`${API_BASE_URL}/organizations/${id}/logo`, {
|
|
||||||
method: 'POST',
|
|
||||||
headers,
|
|
||||||
body: formData,
|
|
||||||
}).then(res => {
|
|
||||||
if (!res.ok) return res.json().then(err => Promise.reject(new Error(err.message || 'Logo upload failed')));
|
|
||||||
return res.json();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
uploadOrganizationFavicon: (id: string, file: File): Promise<UploadResponse> => {
|
|
||||||
const formData = new FormData();
|
|
||||||
formData.append('file', file);
|
|
||||||
const token = getToken();
|
|
||||||
const selectedOrgId = getSelectedOrgId();
|
|
||||||
const headers: Record<string, string> = {
|
|
||||||
...(token ? { 'Authorization': `Bearer ${token}` } : {}),
|
|
||||||
...(selectedOrgId ? { 'X-Organization-Id': selectedOrgId } : {})
|
|
||||||
};
|
|
||||||
return fetch(`${API_BASE_URL}/organizations/${id}/favicon`, {
|
|
||||||
method: 'POST',
|
|
||||||
headers,
|
|
||||||
body: formData,
|
|
||||||
}).then(res => {
|
|
||||||
if (!res.ok) return res.json().then(err => Promise.reject(new Error(err.message || 'Favicon upload failed')));
|
|
||||||
return res.json();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
// SSO
|
|
||||||
getSSOConfig: (): Promise<OrganizationSSOConfig | null> => apiFetch('/organization/sso'),
|
|
||||||
updateSSOConfig: (payload: Partial<OrganizationSSOConfig>): Promise<OrganizationSSOConfig> => apiFetch('/organization/sso', { method: 'PUT', body: JSON.stringify(payload) }),
|
|
||||||
initSSOLogin: (orgId: string): void => {
|
initSSOLogin: (orgId: string): void => {
|
||||||
window.location.href = `${API_BASE_URL}/auth/sso/login/${orgId}`;
|
window.location.href = `${API_BASE_URL}/auth/sso/login/${orgId}`;
|
||||||
},
|
},
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user