Executive monitoring dashboard (OFITECO)

The problem

Monitoring information (sensor history, alarms, locations, time series) was scattered and hard to exploit for an executive view. A single panel was needed that management could open and understand in seconds, with fine-grained filtering and maps.

What I built

An executive strategic-management panel, designed from architecture to presentation:

• Advanced data table (flowbite): column sorting, page size (10/25/50/100/all), density, per-row detail in a modal with a sparkline, CSV export (RFC 4180, formula-injection safe) and filter chips.
• Cascading filters (basin → river → dam → status): each filter narrows the others.
• Derived KPIs from the filtered history (records, active sensors, alarms, last event), reactive to the filter.
• Leaflet maps (main + topographic) with branded tooltips and a full-screen focus mode; heatmap.
• Command palette ⌘K (accessible WAI-ARIA combobox/listbox): global search + jumps to filters, actions and language.
• 4 languages (es / ca / en / fr) with auto-detection, animated light/dark theme (View Transitions) and premium UX (KPI count-up, skeletons, toasts) respecting prefers-reduced-motion.

Architecture and data

Clean Architecture (4 layers, DDD); dependency injection lives in main.ts and layer violations fail lint. The data layer sits behind a repository port: today an in-memory adapter (deterministic seed), ready to switch to a real backend by implementing the same port, without touching the UI.

Quality

Strict build CSP; secretlint, npm audit, knip, madge, svelte-check, ESLint and Prettier in the gates. Coverage 100/100/100/80 across included modules. Axe in Playwright for WCAG 2.1 AA.

Stack

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

Professional project at OFITECO (VINCI Group) · private repository.