Mi SaaS

Frontend Next.js. El backend Laravel vive en un repo aparte, backend-sass.

mi-saas/
├── web/     Next.js 16 + MUI 7 (base: plantilla Modernize) + el BFF
└── docs/    Ficha de cada vista + el JSON que espera de la API

📖 docs/README.md — índice de vistas, convenciones de la API y el contrato JSON de cada pantalla. 📄 docs/api-contract.md — el contrato con backend-sass. Se edita aquí y solo aquí.

Arrancar

# terminal 1 — backend (repo backend-sass)
php artisan serve                      # http://localhost:8000

# terminal 2 — frontend
cd web && npm install && npm run dev   # http://localhost:3000

Estructura de web/src

Carpeta	Qué va aquí
app/	Solo rutas. Cada page.tsx compone; no lleva lógica de negocio.
features/	Un módulo de negocio por carpeta: components/, hooks/, services/, types.ts.
components/	UI reutilizable de la plantilla (shared/, forms/, container/).
layout/	Sidebar, header, customizer, breadcrumb. El menú vive en layout/vertical/sidebar/MenuItems.ts.
lib/	Infraestructura: cliente axios, query client, tipos de la API.
context/	Contextos globales (customizer del tema).
utils/	Theme de MUI e i18n.
config/	Lectura de variables de entorno.

Módulos

Módulo	Ruta	Estado
Dashboard	/	✅ construido (KPIs, ventas 7 días, citas de hoy)
Clientes	/clientes	✅ listado paginado
Citas	/citas	⬜ ruta creada, pendiente
Calendario	/calendario	⬜ pendiente
Servicios	/servicios	⬜ pendiente
Categorías	/categorias	⬜ pendiente
Empleados	/empleados	⬜ pendiente
Locales	/locales	⬜ pendiente
Caja	/caja	⬜ pendiente
Inventario	/inventario	⬜ pendiente
Reportes	/reportes	⬜ pendiente
Mi Plan	/mi-plan	⬜ pendiente (banner de prueba ✅)
WhatsApp	/whatsapp	⬜ pendiente
Configuración	/configuracion, /configuracion/perfil	⬜ pendiente
Soporte	/soporte	⬜ pendiente

Los módulos pendientes renderizan components/shared/ModuloPendiente.tsx: la ruta navega y el menú funciona, pero la pantalla está sin construir.

Cómo añadir un módulo nuevo

1. web/src/features/facturas/ con types.ts, services/facturas.api.ts, hooks/useFacturas.ts, components/.
2. web/src/app/(dashboard)/facturas/page.tsx que solo importa y compone.
3. Añade la entrada en layout/vertical/sidebar/MenuItems.ts (y en layout/horizontal/navbar/Menudata.ts si usas ese layout).

Usa features/clientes/ como plantilla: está completo de punta a punta (servicio → hook con React Query → tabla paginada → página).

Reutilizar componentes de la plantilla

La demo completa de Modernize está en mi-modernize-app/packages/typescript/main/src/app/components/. Cuando necesites una vista nueva (kanban, chat, perfil, e-commerce, gráficas), copia el componente desde ahí a web/src/features/<modulo>/components/, ajusta los imports (@/app/components/... → @/components/...) y cambia el mock por tu servicio real.

Autenticación

Sanctum por tokens, detrás de un BFF. El navegador habla con /api/* —el proxy que corre dentro de Next— y es el proxy quien llama a Laravel con el Authorization: Bearer. El token vive en una cookie httpOnly que el JS del navegador no ve.

Archivo	Qué hace
web/src/lib/api/client.ts	axios con baseURL: "/api", sin nada de sesión
web/src/app/api/[...path]/route.ts	el proxy: pone Bearer y X-Tenant
web/src/app/api/auth/{login,logout}/route.ts	lo único que escribe y borra la cookie
web/src/lib/auth/sesion.ts	las cookies y la URL del upstream
web/src/features/auth/services/auth.api.ts	los endpoints, desde el cliente

Lo que se le pide a Laravel está en docs/api-contract.md § "Base y transporte".