Dashboard ejecutivo de monitorización (OFITECO)

El problema

La información de monitorización (histórico de sensores, alarmas, ubicaciones, series temporales) vivía dispersa y era difícil de explotar para una visión ejecutiva. Hacía falta un panel único que la gestión pudiera abrir y entender en segundos, con filtrado fino y mapas.

Qué construí

Un panel ejecutivo de gestión estratégica, diseñado de la arquitectura a la presentación:

• Histórico en tabla avanzada (flowbite): orden por columna, tamaño de página (10/25/50/100/todos), densidad, detalle por fila en modal con sparkline, export CSV (RFC 4180, anti-inyección de fórmulas) y chips de filtros.
• Filtros en cascada (cuenca → río → presa → estado): cada filtro acota a los demás.
• KPIs derivados del histórico filtrado (registros, sensores activos, alarmas, último evento), reactivos al filtro.
• Mapas Leaflet (central + topográfico) con tooltips de marca y modo foco a pantalla completa; mapa de calor.
• Command palette ⌘K accesible (WAI-ARIA combobox/listbox): búsqueda global + saltos a filtros, acciones e idioma.
• 4 idiomas (es / ca / en / fr) con autodetección, tema claro/oscuro animado (View Transitions) y UX premium (count-up de KPIs, skeletons, toasts) respetando prefers-reduced-motion.

Arquitectura y datos

Clean Architecture 4 capas (DDD); la inyección de dependencias vive en main.ts y las violaciones de capa fallan en lint. La capa de datos está tras un puerto de repositorio: hoy con un adapter en memoria (seed determinista) y preparada para conmutar a un backend real implementando el mismo puerto, sin tocar la UI.

Calidad

CSP estricta en build; secretlint, npm audit, knip, madge, svelte-check, ESLint y Prettier en los gates. Cobertura 100/100/100/80 en los módulos incluidos. Axe en Playwright para WCAG 2.1 AA.

Stack

Svelte 5 (runes) · TypeScript estricto (cero any) · Vite 8 · Tailwind 4 · flowbite-svelte · Leaflet · Vitest · Playwright.

Proyecto profesional en OFITECO (Grupo VINCI) · repositorio privado.