Saltar a contenido

Frontend Overview

Tech stack

  • Framework: Next.js 13 (app router) con soporte para Server/Client components.
  • UI: Shadcn UI (@/components/ui/*), iconografía lucide-react, toasts sonner.
  • Estado: Compuesto; React hooks + Zustand para sesiones de centros de costos (frontend/lib/project-client.ts).
  • Build: Dockerfile dedicado (frontend/Dockerfile), hot reload habilitado con WATCHPACK y CHOKIDAR.

Organización

frontend/
 ├─ app/                 # Rutas (admin, ingeniería, construcción, lda, etc.)
 │   └─ admin/users      # Ejemplo de módulo completo con DynamicTable
 ├─ components/          # Reutilizables (dynamic-table, project-selector, navigation, ...)
 ├─ hooks/               # Hooks custom (use-debounce, etc.)
 ├─ lib/                 # Helpers (handleError, project-client, fetchers)
 └─ public/              # Activos estáticos

Componentes clave

Layout y navegación

  • PageLayoutSesion envuelve cada página protegida, integra barras de navegación (frontend/components/navigation.tsx) y verifica selección de centros.
  • ProjectSelector y ProjectSelectorNavbar ofrecen UX consistente para elegir centros de costos; dependen de la API /api/admin/centros_costos/*.

Para una descripción detallada de DynamicTable, SearchBar, el store useProjectSession, helpers de exportación y el middleware de Next.js, consulta componentes-clave.md.

Integración con backend

  • Las páginas invocan APIs internas (/api/...) que son proxied vía Next.js. En despliegue productivo Nginx enruta /api al backend FastAPI.
  • Para evitar problemas de CORS se recomienda servir frontend y backend bajo el mismo dominio con subdominios (auth., app.) aprovechando la cookie session_token.
  • Ejemplo completo: frontend/app/admin/users/page.tsx.
  • Carga roles y centros al montar (fetch("/api/admin/roles"), fetch("/api/admin/centros_costos?size=1000")).
  • Usa DynamicTable para listar usuarios (apiUrl="/api/admin/users").
  • Implementa formularios modales para editar usuarios y enviar invitaciones.

Buenas prácticas

  • Reutiliza DynamicTable para cualquier listado paginado; solo configura columns y apiUrl.
  • Cuando una vista dependa de centros de costos, envuélvela en <ProjectSelector> para asegurarte de que la cookie está presente antes de hacer fetch.
  • Centraliza el manejo de errores con handleErrorResponse para mostrar mensajes amigables.
  • Asegura que tus endpoints devuelvan PageModel y acepten el DSL; eso garantiza compatibilidad con SearchBar.

Revisa users.md para un ejemplo detallado del módulo de administración de usuarios.