Arquitectura del Panel de Administración

Visión General

El Panel de Administración (court-commander-app) es una aplicación web moderna construida con Nuxt 4, Vue 3 y TypeScript. Forma parte de un monorepo gestionado con Nx y pnpm.

Stack Tecnológico

Frontend (Panel Admin)

• Framework: Nuxt 4 (Vue 3)
• Lenguaje: TypeScript
• UI: Nuxt UI + Tailwind CSS
• Gráficos: Chart.js con vue-chartjs (barras, donas, tortas)
• Testing: Vitest + Vue Test Utils

Backend (API)

• Framework: Laravel 12 (PHP 8.2+)
• Base de datos: MySQL
• Autenticación: Laravel Passport (OAuth2 con tokens)
• Permisos: Spatie Laravel Permission (RBAC)
• Auditoría: Spatie Laravel ActivityLog
• Pagos: MercadoPago SDK
• Emails: Resend (envío asíncrono con colas)
• Documentación API: Knuckles Scribe

Infraestructura

• Monorepo: Nx con pnpm workspaces
• Contenedores: Docker (web, MySQL, Redis)
• Despliegue: AWS Amplify

Componentes Principales

Panel (Dashboard)

La pantalla principal donde ves el resumen de tu negocio con métricas, estadísticas y accesos rápidos.

Módulos de Gestión

Cada sección (Sedes, Canchas, Precios, Reservas, etc.) es independiente y accesible desde el menú lateral. Los módulos principales son:

• Sedes y Canchas: Gestión de sedes, canchas y tipos de cancha
• Mapa de Canchas: Editor visual de la disposición de canchas en una grilla
• Precios: Sistema de reglas de precio con prioridades y asignación por cancha
• Reservas: CRUD completo con grilla diaria y múltiples estados
• Turnos Fijos: Reservas recurrentes semanales con generación automática
• Bloqueos: Control de disponibilidad por cancha
• Etiquetas y Profesores: Categorización y asignación de instructores
• Usuarios y Roles: Gestión de accesos con permisos granulares
• Reportes: Ingresos, ocupación, profesores, etiquetas, origen y utilización
• Registro de Actividad: Auditoría completa de acciones del sistema
• Configuración: Datos institucionales, MercadoPago y opciones de reservas

Sistema de Autenticación

• Login con email y contraseña
• Token OAuth2 almacenado en cookie
• Tres roles: Superadmin, Administrador y Manager
• Permisos granulares por módulo (ver, crear, editar, eliminar)
• Middleware de acceso por sede (managers solo ven sus sedes)

Flujo de Trabajo

1. Ingresás con tu usuario y contraseña
2. Seleccionás la sede que querés gestionar
3. Navegás por el menú lateral
4. Gestionás la información (crear, editar, eliminar)
5. Analizás con reportes
6. Cerrás sesión al terminar

Comunicación con el Backend

El panel se comunica con la API REST de Laravel a través de un composable useApi() que:

• Agrega automáticamente el token de autenticación
• Redirige al login si el token expiró (401)
• Maneja errores de forma centralizada

Seguridad

• Todas las conexiones son seguras (HTTPS)
• Las contraseñas están encriptadas (bcrypt)
• Los tokens OAuth2 expiran automáticamente
• Credenciales sensibles (MercadoPago) se almacenan encriptadas en la base de datos
• Cada acción queda registrada en el log de actividad con usuario, fecha y cambios realizados
• Control de acceso por sede para managers

Próximos Pasos

• Componentes - Elementos de la interfaz
• Desarrollo - Para desarrolladores