Portal del alumno

Ruta: /student?tab=classes|book|shop|purchases|documents · Auth: Magic link (alumno)

El portal del alumno es una SPA single-page con 5 tabs accesibles via URL search param ?tab=. Cada tab es un componente React lazy-loaded (React.lazy + Suspense) para code-splitting. La ruta por defecto es ?tab=classes.

Las rutas legacy (/student/book, /student/packages) redirigen automaticamente al tab correspondiente.

---

Arquitectura

Layout

┌─────────────────────────────────────────────┐
│  Logo · Nombre del alumno · Logout          │
├─────────────────────────────────────────────┤
│  [Mis clases] [Reservar] [Tienda] [Compras] [Docs] │
├─────────────────────────────────────────────┤
│                                             │
│           <Suspense fallback>               │
│             Tab content                     │
│                                             │
└─────────────────────────────────────────────┘

Tabs

Tab	ID	Icono	Componente	Archivo
Mis clases	classes	Calendar	TabClasses	tab-classes.tsx (968 lines)
Reservar	book	BookOpen	TabBook	tab-book.tsx (704 lines)
Tienda	shop	ShoppingBag	TabShop	tab-shop.tsx (307 lines)
Mis compras	purchases	Receipt	TabPurchases	tab-purchases.tsx (393 lines)
Documentos	documents	Shield	TabDocuments	tab-documents.tsx (289 lines)

Archivos compartidos

Archivo	Proposito
shared-types.ts	Interfaces: StudentMeData, Session, SessionDetail, LegalDoc, etc.
student-helpers.ts	Utilities: moodEmojis, generateIcsContent, downloadIcs, getGreetingKey, relativeLabel, useCountdown, fmtDate
booking-calendar.tsx	Componente BookingCalendar — grid semanal visual

---

Tab: Mis clases

Muestra las sesiones del alumno divididas en proximas y pasadas.

Resumen de creditos (3 cards)

Card	Datos
Disponibles	Creditos libres para reservar
Reservados	Creditos en sesiones programadas
Consumidos	Creditos de sesiones completadas

Si hay creditos por expirar, se muestra aviso ambar con la fecha mas proxima.

Proxima clase (Hero card)

Tarjeta destacada con:

• Bloque de fecha grande (dia, numero, mes) con fondo primary
• Nombre del servicio, rango horario, duracion, etiqueta relativa (“Hoy”/“Manana”)
• Countdown en tiempo real hasta la clase
• Chips de recursos y homework vinculados
• Acciones: Entrar a clase (icono video), reprogramar, cancelar, descargar .ics

Proximas sesiones

Filas colapsables con bloque de fecha, expandibles para ver detalle:

• URL de reunion, recursos, resumen, rating, mood, avatar del profesor

Estadisticas de asistencia

Badge con sesiones completadas, canceladas y tasa de consistencia.

Clases pasadas

Filas agrupadas por mes con busqueda y filtros por estado/fecha. Notas del profesor renderizadas con MarkdownPreview.

Mood y reviews

Para sesiones completadas:

• Selector de mood dual: 5 emojis para student mood + teacher mood
• Review prompt: Formulario inline que aparece automaticamente despues de enviar mood

Note

Durante la impersonacion (teacher → view as student), las acciones de mood, review y reserva estan deshabilitadas.

---

Tab: Reservar

Ver documentacion completa en Reservar clase.

Calendario semanal visual con los huecos libres del profesor. Auto-seleccion inteligente cuando solo hay un paquete/servicio disponible.

---

Tab: Tienda

Ver documentacion completa en Tienda.

Grid de servicios disponibles con precios, codigos de descuento y checkout via Stripe.

---

Tab: Mis compras

Ver documentacion completa en Mis compras.

Historial de enrollments, gestion de suscripciones y acceso al billing portal de Stripe.

---

Tab: Documentos

Ver documentacion completa en Documentos.

Documentos legales con historial de versiones firmadas y workflow de aceptacion.

---

Referencia tecnica

Archivos clave

Archivo	Proposito
apps/app/src/routes/student/index.lazy.tsx	Container de tabs (lazy loading)
apps/app/src/routes/student/index.tsx	Route config con validateSearch para ?tab=
apps/app/src/routes/student.tsx	Layout (header + outlet)
apps/app/src/components/student/tab-classes.tsx	Tab Mis clases
apps/app/src/components/student/tab-book.tsx	Tab Reservar
apps/app/src/components/student/tab-shop.tsx	Tab Tienda
apps/app/src/components/student/tab-purchases.tsx	Tab Mis compras
apps/app/src/components/student/tab-documents.tsx	Tab Documentos
apps/app/src/components/student/booking-calendar.tsx	Calendario visual de reservas
apps/app/src/components/student/shared-types.ts	Tipos compartidos
apps/app/src/components/student/student-helpers.ts	Utilidades compartidas

API

Endpoint	Metodo	Proposito
/student/me	GET	Info del alumno + creditos
/student/sessions	GET	Lista de sesiones (filtros: from, to, status)
/student/sessions/:id	GET	Detalle de sesion
/student/sessions/:id/cancel	POST	Cancelar sesion
/student/sessions/:id/mood	POST	Enviar mood
/student/sessions/:id/review	POST	Enviar review
/student/sessions/:id/reschedule	POST	Reprogramar
/student/teacher	GET	Info del profesor + servicios
/student/enrollments	GET/POST	Lista / crear enrollment
/student/preferred-hours	GET/PATCH	Preferencias horarias
/student/sessions	POST	Reservar sesion
/student/sessions/batch	POST	Reservar multiples sesiones
/student/legal-documents	GET	Documentos legales pendientes y firmados
/student/legal-documents/:id/accept	POST	Aceptar documento
/public/:slug/service-availability	GET	Slots disponibles
/public/:slug/validate-discount	POST	Validar codigo de descuento