Aplicación web
React 19 · Vite · TypeScript estricto · Tailwind 3 · Radix · TanStack Query y Table · react-router · graphql-request con codegen · Recharts. 194 archivos, 33 291 líneas.
Pantallas
Once rutas que cubren RF-01 a RF-08: tablero, tickets (tabla y kanban), ficha de ticket, clientes con ficha 360° de nueve pestañas, bandeja unificada, seguimientos, garantías y repuestos, productos, campañas, reportes y configuración.
Decisiones de composición
Con los mismos tokens que el móvil, la composición es distinta a propósito:
| Web | Móvil | |
|---|---|---|
| Listado de tickets | Tabla densa, 44 px por fila | Tarjetas con lo esencial |
| Navegación | Sidebar + barra superior | Tab bar de cinco destinos |
| Filtros | Barra persistente con chips | Hoja inferior |
| Ficha de cliente | Dos columnas | Pestañas deslizables |
Referencias de diseño
La interfaz se rehízo tomando criterio de productos reales: Attio para la densidad de tabla y los filtros que se leen como una consulta, Linear para la barra de filtros componible, Stripe para la presentación de una métrica, Vercel para los ajustes en filas a todo lo ancho.
Sesión
Access token en memoria, refresh en localStorage, refresco automático con
promesa compartida y cola de peticiones. Dos detalles que costaron sangre:
- StrictMode monta el efecto de arranque dos veces y el refresh token es de un solo uso: el segundo canje llegaba con el token gastado y el servidor cerraba la sesión. La sesión se perdía en cada recarga.
- Un corte de red cerraba la sesión, porque el refresco borraba las credenciales ante cualquier fallo. Ahora sólo las borra si el servidor rechaza el token.