Ajustes

Ruta: /teacher/settings · Atajo: g j · Sidebar: Ajustes

Configuracion del profesor organizada en tabs: General, Apariencia, Integraciones, Notificaciones, Privacidad, Disponibilidad, Politicas de cancelacion, Documentos legales y Contratos.

Que hay

Navegacion

Desktop: Sidebar izquierdo sticky (w-40) con tabs verticales + indicador de borde derecho
Movil: Dropdown select para cambiar entre tabs

Tab 1 — General

Configuracion basica de la cuenta:

Inicio de semana:

Toggle de 2 opciones: Lunes (default) / Domingo
Se guarda en teachers.weekStartDay (INTEGER: 0=Domingo, 1=Lunes) via PATCH /teacher/settings/scheduling
Afecta la vista semanal del calendario, el reschedule sheet y la action sheet
Tambien configurable desde el icono de configuracion (engranaje) en la pagina del Calendario

Moneda predeterminada:

Selector dropdown con 19 monedas comunes (EUR, USD, GBP, BRL, MXN, COP, ARS, CLP, PEN, etc.)
Default: EUR
Se guarda en teachers.defaultCurrency via PATCH /teacher/settings/scheduling
Usado por el dashboard para formatear ingresos y precios

KPIs del dashboard:

Grid de 8 botones toggle (2 columnas) con icono + label para cada metrica disponible
El profesor selecciona exactamente 4. Los no seleccionados se deshabilitan cuando hay 4 activos
Metricas disponibles: month_revenue, month_lessons, active_students, attendance_rate, pending_revenue, teaching_streak, new_students, completed_sessions
Default: las primeras 4 (ingresos, clases, alumnos activos, asistencia)
Boton “Guardar” aparece solo cuando la seleccion difiere de la guardada y hay exactamente 4
Se guarda en teachers.dashboardConfig (JSONB) via PATCH /teacher/settings/dashboard
Invalida queries ['teacher', 'settings'] y ['teacher-dashboard-summary']

Tab 2 — Apariencia (Brand Colors)

Personalizacion de colores de la plataforma. El profesor define un color primario y un color secundario, y el sistema genera automaticamente:

Paletas completas de 11 tonos (50–950) para ambos colores usando manipulacion HSL
Variantes de dark mode con escala invertida
Colores de contraste (texto blanco/oscuro) segun WCAG 2.1

Color pickers:

Input nativo type="color" + campo hex manual + 12 colores preset
Validacion hex: ^#[0-9a-fA-F]{6}$
Presets: naranja, orange, rojo, rosa, violeta, indigo, azul, sky, teal, verde, lima, gris

Preview en tiempo real:

La paleta generada se muestra con los 11 tonos en barra horizontal
Componentes de ejemplo: boton primario, boton outline, badge, ring de foco
Los colores se aplican en vivo mientras el profesor los selecciona (sin guardar)

Persistencia:

Colores guardados en teachers.brandColors (JSONB: { primary: "#hex", secondary: "#hex" })
Se cargan al iniciar la app via GET /auth/me → campo brandColors en la respuesta
Inyectados como CSS custom properties (--color-primary-*, --color-secondary-*, --color-ring) via <style> en <head>
Boton “Restaurar colores” elimina la personalizacion (vuelve a defaults: naranja #ffab1a + indigo #6366f1)

Alcance de los colores:

Primario → botones, enlaces, sidebar activo, badges, progress bars, seleccion de tabs
Secundario → ring de foco, accent colors, badges secundarios
Afecta toda la plataforma del profesor automaticamente gracias a las CSS custom properties de Tailwind

Archivos clave del sistema de theming:

Archivo	Proposito
`apps/app/src/lib/brand-colors.ts`	Generador de paletas HSL, contraste WCAG, CSS vars
`apps/app/src/hooks/use-brand-theme.ts`	Hook que inyecta `<style>` con las variables
`apps/app/src/routes/teacher.tsx`	Punto de montaje de `useBrandTheme()` en el layout
`apps/app/src/styles/globals.css`	Variables CSS default (primary naranja, secondary indigo)

Tab 3 — Integraciones

Grid de 3 tarjetas de integracion:

Google Calendar:

Emoji calendario + punto de estado (verde si conectado)
Estado de conexion + conteo de calendarios sincronizados
Boton “Conectar” → redirect OAuth Google

Stripe:

Emoji tarjeta + punto de estado
Estado de conexion
Boton “Conectar” → redirect Stripe Connect OAuth
Boton “Refrescar” estado

Google Drive:

Emoji carpeta + punto de estado
Estado de conexion
Si habilitado: estado de carpeta, stats de copias (copiados/pendientes), link directo a Drive
Botones habilitar/deshabilitar auto-copy

Coming Soon: Zoom, WhatsApp (tarjetas deshabilitadas con borde discontinuo)

Selector de calendarios Google:

Componente GoogleCalendarSelector dentro de la tarjeta de Google Calendar
Lista de calendarios de lectura con checkboxes (cuales se sincronizan para disponibilidad)
Selector de calendario de escritura con radio buttons (donde se crean los eventos)
Boton “Guardar” llama a PATCH /teacher/settings/google/calendars
Solo visible cuando Google Calendar esta conectado

Tab 4 — Notificaciones

7 toggles de notificacion con persistencia real:

Toggle	Default
Nueva reserva	true
Reserva confirmada	true
Reserva cancelada	true
Recordatorio antes de sesion	true
Pago recibido	true
Creditos por expirar	true
Reporte semanal	false

Estado inicial cargado via GET /teacher/settings (campo notificationPreferences JSONB)
Deteccion de cambios (hasChanges) — el boton “Guardar” solo aparece cuando hay cambios pendientes
Boton “Guardar” llama a PATCH /teacher/settings/notifications
Preferencias almacenadas en teachers.notificationPreferences (JSONB, migration 0057)

Tab 5 — Privacidad

Exportar datos:

Boton “Descargar datos” → genera JSON con todos los datos del profesor
Archivo: pinteach-data-export-YYYY-MM-DD.json

Eliminar cuenta:

Seccion con borde rojo y fondo destructive
Flujo de 2 pasos: click → confirmacion
DELETE /api/teacher/privacy/delete-account
Redirect a /login despues de eliminar

Tab 6 — Disponibilidad

UI completa para gestionar schedules de disponibilidad directamente desde Ajustes:

Lista de schedules con toggle activar/desactivar
Crear, renombrar, duplicar y eliminar schedules
Editor de reglas por dia de la semana (hora inicio/fin, multiple reglas por dia)
Activaciones por rango de fechas con calendar picker
Equivalente funcional al selector de schedules en el Calendario

Tab 7 — Politicas de cancelacion

Editor visual de politicas de cancelacion por servicio:

Lista de politicas existentes con el servicio asociado
Badge “Default” para la politica de cancelacion predeterminada del profesor
Formulario CRUD de reglas (JSONB rules): condicion + accion + descripcion
4 plantillas predefinidas: individual_relaxed, group_strict, course_no_refund, subscription_flexible
Boton “Crear desde plantilla” carga la configuracion del preset seleccionado
Toggle “Establecer como default” (unica default por profesor)

Tab 8 — Documentos legales

Gestion de documentos legales (contratos, politicas, terminos) enviables a alumnos:

Lista de documentos con tipo (contract/policy/terms/privacy), version y estado
Crear y editar documentos con editor Markdown
Reordenar documentos via drag-and-drop
Vista previa del documento antes de publicar
Historial de versiones por documento

Tab 9 — Contratos

Gestion de contratos para alumnos:

Lista de contratos activos por alumno
Estado de aceptacion (firmado/pendiente/expirado)
Reasignar contrato a alumno
Historial de aceptaciones con timestamp

Que falta

Feature	Descripcion	Estado	Implementado
Configuracion de pagos avanzada	No hay gestion de metodos de pago ni facturas. La moneda predeterminada ya se puede configurar en la tab General. El resto se maneja via Stripe Dashboard externo	Aplazado
Integracion Zoom/WhatsApp	Marcadas como “Coming Soon” pero sin fecha ni prioridad definida	Aplazado

Que falla

Bug	Descripcion	Estado	Corregido
Slug check no bloquea guardado	La verificacion de disponibilidad del slug era advisory (hint visual) pero no bloqueaba el submit. Ahora bloquea el submit si retorna `available: false`	✅	Batch 3

Que cambiaria

Mejora	Descripcion	Dificultad	Estado	Implementado
Stripe Customer Portal	Link directo al Stripe Customer Portal para gestion avanzada de pagos, facturas y metodos de pago	Medio	Implementado ✅
Unificar sub-rutas de settings	Las tabs de Disponibilidad, Politicas de cancelacion, Documentos legales y Contratos ya son accesibles desde Ajustes	Medio	✅	Batch 3
UI de politicas de cancelacion	Editor visual con plantillas predefinidas	Medio	✅	Batch 3

Referencia tecnica

Archivos clave

Archivo	Proposito
`apps/app/src/routes/teacher/settings.lazy.tsx`	Pagina completa con 9 tabs
`apps/api/src/services/teacher/settings-service.ts`	Servicio de settings
`apps/api/src/routes/teacher/settings.ts`	Rutas HTTP principales
`apps/app/src/lib/brand-colors.ts`	Generador de paletas HSL + contraste WCAG
`apps/app/src/hooks/use-brand-theme.ts`	Hook de inyeccion de CSS variables

API

Endpoint	Metodo	Proposito
`/teacher/settings`	GET	Settings completos
`/teacher/settings/profile`	PATCH	Actualizar perfil (slug, name, bio, tz)
`/teacher/settings/scheduling`	PATCH	Actualizar scheduling + general (defaultCurrency, buffer, etc.)
`/teacher/settings/dashboard`	PATCH	Actualizar dashboard KPIs config. Body: `{ kpis: string[4] }`
`/teacher/settings/notifications`	PATCH	Actualizar preferencias de notificacion. Body: JSONB de toggles
`/teacher/settings/brand-colors`	PATCH	Actualizar colores de marca. Body: `{ primary: "#hex", secondary: "#hex" }`
`/teacher/settings/brand-colors`	DELETE	Restaurar colores a los valores predeterminados
`/teacher/settings/slug-check`	GET	Verificar disponibilidad de slug
`/teacher/settings/stripe/connect`	POST	URL de OAuth Stripe
`/teacher/settings/stripe/status`	GET	Estado de conexion Stripe
`/teacher/settings/drive/enable`	POST	Habilitar auto-copy Drive
`/teacher/settings/drive/disable`	POST	Deshabilitar auto-copy
`/teacher/settings/drive/status`	GET	Estado Drive + stats
`/teacher/privacy/export-data`	POST	Exportar datos profesor
`/teacher/privacy/delete-account`	DELETE	Eliminar cuenta

Sub-rutas de settings

Prefijo	Proposito
`/teacher/settings/google/calendars`	Calendarios Google (GET + PATCH, UI en tab Integraciones)
`/teacher/settings/drive`	Configuracion Drive
`/teacher/settings/availability`	Disponibilidad
`/teacher/settings/stripe`	Stripe Connect
`/teacher/settings/policies`	Politicas de cancelacion
`/teacher/settings/contracts`	Contratos
`/teacher/settings/legal-documents`	Documentos legales