Inventario Inteligente

El Centro de Prototipado presta herramientas, componentes y materiales desde un conjunto de gabinetes, y hasta ahora nadie podía responder "¿quién tiene la estación de soldadura y desde cuándo?" sin preguntar por ahí. Esta aplicación full-stack reúne gabinetes, inventario y reservas en un solo lugar, registra cada movimiento y puede abrir un gabinete por MQTT desde la misma pantalla.

Arquitectura y Stack Tecnológico

Arquitectura Central

• Framework: Next.js 16 (App Router), server-first, con el React Compiler activado
• Lenguaje: TypeScript en modo estricto
• Plataforma backend: Supabase — PostgreSQL, Auth y Realtime
• Validación: esquemas Zod como única puerta de entrada de cada server action
• Puente con hardware: MQTT sobre TLS contra un broker gestionado
• Tablas y gráficas: TanStack Table para las grillas de administración, Recharts para el panel
• Exportación: jsPDF + jspdf-autotable para los reportes de inventario
• UI: shadcn/ui (Radix Nova) + Tailwind CSS 4, next-themes para claro/oscuro

Arquitectura en Capas

Lecturas y escrituras están separadas a nivel de arquitectura, no por convención: las mutaciones viven en su propia capa de acciones y las consultas en una capa de datos. Una página nunca consulta la base en línea y un formulario nunca lee — que es justo lo que mantiene cada verificación de autorización en un único sitio por operación.

Flujo de una Petición

Características Principales

Características de un Vistazo

Gabinetes y apertura rápida

Cada gabinete está modelado digitalmente con su contenido y su estado. Desde el panel de administración se puede abrir directamente: la acción sale por el puente de hardware con su propio timeout y manejo de error, así un broker inalcanzable se ve como una acción fallida y no como un spinner que nunca termina.

Reservas

Estudiantes y personal solicitan materiales; el equipo aprueba o rechaza desde el mismo panel. La reserva tiene su propio ciclo de vida y aparece en el historial del ítem, de modo que un equipo prestado no puede quedar reservado dos veces en silencio.

Roles y acceso

Autenticación, perfiles y permisos por rol separan lo que puede hacer el equipo de lo que puede hacer el resto del campus. La autorización se exige en el servidor en toda operación privilegiada, nunca solo en la interfaz que la muestra.

Historial de acceso y sesiones

Auditoría completa de aperturas de gabinete y uso de materiales, más una vista de línea de tiempo de sesiones: quién usó qué, cuándo y por cuánto tiempo.

Panel de administración

KPIs más cinco pestañas de analítica (general, inventario, mantenimiento, operaciones, reservas) construidas con Recharts, con un fallback de datos para que un RPC de analítica que falle degrade las cifras en vez de tumbar la página.

Mantenimiento

Los ítems llevan ficha e historial de mantenimiento, así una herramienta que vuelve rota una y otra vez se ve como un patrón y no como una serie de incidentes sueltos.

Destacados Técnicos

Un único resolver cacheado del usuario actual

La búsqueda de usuario autenticado + perfil se resuelve una sola vez por petición y queda cacheada, así un árbol de render que necesita al usuario en el layout, la página y tres componentes paga exactamente una consulta.

Las acciones devuelven estado, no lanzan

Toda acción de administración devuelve un resultado serializable con sus errores, los errores por campo y el estado de éxito en vez de lanzar. Los fallos de validación son datos, no excepciones — que es lo que permite que el mismo componente de formulario pinte errores por campo sin un try/catch en la UI.

Read models compuestos en TypeScript

La capa de datos no devuelve filas crudas: compone un modelo de vista enriquecido a partir de varias tablas, así los componentes renderizan un objeto tipado en vez de coser relaciones dentro del JSX.

Tiempo real como deltas, no como refetch

La grilla de gabinetes se suscribe a los eventos de cambio y los aplica como deltas en memoria. Dos personas trabajando el mismo gabinete ven los cambios de la otra sin que ninguna recargue.

Una tabla genérica para todos los módulos

Un único componente de tabla genérico carga el filtrado, ordenamiento y paginación una sola vez; cada módulo (gabinetes, inventario, usuarios, mantenimiento, reservas, actividad, sesiones) solo declara sus columnas tipadas.

Impacto y Escalabilidad

• Todo movimiento de material queda trazado: quién, qué, cuándo y por cuánto tiempo.
• El puente con el hardware está en código de producción, así que conectar un gabinete nuevo es una tarea de hardware, no un cambio de aplicación.
• La separación lectura/escritura y la tabla genérica hacen que un módulo de administración nuevo sea, sobre todo, declarar esquema, fetcher, acción y columnas.

---

Notas

Construido con Next.js 16, Supabase (PostgreSQL, Auth, Realtime), MQTT, TanStack Table, Recharts y shadcn/ui. El repositorio es privado — pertenece al Centro de Prototipado de la Universidad Nacional de Colombia.