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

Google Meet (scope adicional):

• Solo visible cuando Google Calendar ya esta conectado
• Estado: “Google Meet activo” (badge verde) / boton “Activar Google Meet”
• Al activar → GET /api/auth/google/meet-scope — OAuth incremental que añade el scope meetings.space.created sin re-autorizar todo
• Una vez activo, todas las sesiones nuevas generan un link de Meet automaticamente via Meet Spaces API v2 (independiente del calendar sync)

Extension de Chrome:

• Estado: “Conectado” (badge verde si hay token) / boton “Generar token”
• Al generar → POST /auth/extension-token devuelve { token } — se muestra en claro una unica vez con boton de copiar
• Acciones cuando hay token: “Rotar token” (genera uno nuevo) / “Revocar” (DELETE /auth/extension-token)
• El token permite a la extension autenticarse en cualquier ruta /teacher/* via cabecera X-Extension-Token

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