Live Operations Dashboard, Okto Technologies

CLIENT

Okto Technologies
Northern Ireland, UK

TECHNOLOGIES

Next.js · TypeScript · React
Tailwind CSS · Vitest · Playwright
Google APIs · SONI Grid · SerpAPI

SERVICES

Real-Time Data Dashboard
Multi-API Integration
Live Monitoring System

DATE

May 1, 2026

Live Operations Dashboard, Okto Technologies

Overview

Contract engagement with Okto Technologies to design and build a bespoke real-time monitoring dashboard for Northern Ireland operations. The dashboard aggregates live data from eight distinct sources into a single always-on display, purpose-built for dedicated 4K UHD hardware at 3840×360.

Duration: May 2026 (2-week contract)
Stack: Next.js · TypeScript · React · Tailwind CSS · Vitest · Playwright
Display: 4K UHD, 3840×360, fixed-aspect-ratio, dark theme

What Was Built

Eight live panels, each polling an independent data source and updating automatically throughout the day:

Wind & Sonification — wind speed, direction, and generation status from SONI
Belfast Traffic — M1 arterial flow with live delay estimates
Air Quality — NO₂, PM2.5, PM10, and O₃ from the M1 monitoring station
7-Day Weather — forecast, sunrise/sunset, and active amber warnings
NIE Grid — live power consumption in MW and equipment fault tracking
PHA Surveillance — disease activity levels for Flu, RSV, COVID-19, MPox, and Norovirus
Industrial Action — live union ballot and pay negotiation status across health sector
Events — 24-hour calendar of concerts, protests, road closures, and parades

API Integration & Resilience

Each panel connects to a real external data source with no manual data entry. Where official APIs exist (Google Weather, Air Quality, Maps; SONI Grid; NIE Networks), they are consumed directly. Where they do not — PHA disease surveillance and industrial action — live news is classified via SerpAPI using keyword frequency to infer current status.

typescript

// Dual-API resilience — grid data returns even when faults endpoint fails
const [gridResult, faultsResult] = await Promise.allSettled([fetchSoniGrid(), fetchNieFaults()]);

return {
  ...gridResult.value,
  incidents: faultsResult.status === 'fulfilled' ? faultsResult.value : [],
  incidentsDataAvailable: faultsResult.status === 'fulfilled',
};

All API routes return null on failure rather than throwing, allowing each panel to render a graceful fallback independently. A single panel outage does not affect the rest of the dashboard.

Polling & Performance

Custom hooks manage polling per panel with configurable intervals and three-retry exponential backoff. Weather polls every 45 minutes; grid and traffic every 5 minutes; event data every 30 minutes. Intervals clean up correctly on unmount. The fixed aspect-[3840/360] root layout enforces the hardware aspect ratio across any host screen.

Testing

Unit tests run under Vitest with MSW handlers providing per-test API mock responses. Playwright E2E tests run at the exact hardware viewport (3840×360) to catch layout regressions specific to the target display.

Outcomes

Eight live data panels delivered in two weeks, production-ready for dedicated hardware deployment
Dual-API resilience keeps grid data live even when the NIE faults endpoint is unavailable
News classification via SerpAPI fills gaps where no official NI health or union APIs exist
Per-panel graceful degradation ensures a single API failure never takes down the whole display
Full test suite: Vitest unit tests with MSW mocking, Playwright E2E at 3840×360 viewport

Overview

Duration: May 2026 (2-week contract)
Stack: Next.js · TypeScript · React · Tailwind CSS · Vitest · Playwright
Display: 4K UHD, 3840×360, fixed-aspect-ratio, dark theme

What Was Built

Eight live panels, each polling an independent data source and updating automatically throughout the day:

Wind & Sonification — wind speed, direction, and generation status from SONI

Belfast Traffic — M1 arterial flow with live delay estimates

Air Quality — NO₂, PM2.5, PM10, and O₃ from the M1 monitoring station

7-Day Weather — forecast, sunrise/sunset, and active amber warnings

NIE Grid — live power consumption in MW and equipment fault tracking

PHA Surveillance — disease activity levels for Flu, RSV, COVID-19, MPox, and Norovirus

Industrial Action — live union ballot and pay negotiation status across health sector

Events — 24-hour calendar of concerts, protests, road closures, and parades

API Integration & Resilience

typescript

// Dual-API resilience — grid data returns even when faults endpoint fails
const [gridResult, faultsResult] = await Promise.allSettled([fetchSoniGrid(), fetchNieFaults()]);

return {
  ...gridResult.value,
  incidents: faultsResult.status === 'fulfilled' ? faultsResult.value : [],
  incidentsDataAvailable: faultsResult.status === 'fulfilled',
};

All API routes return null on failure rather than throwing, allowing each panel to render a graceful fallback independently. A single panel outage does not affect the rest of the dashboard.

Polling & Performance

Outcomes

Eight live data panels delivered in two weeks, production-ready for dedicated hardware deployment

Dual-API resilience keeps grid data live even when the NIE faults endpoint is unavailable

News classification via SerpAPI fills gaps where no official NI health or union APIs exist

Per-panel graceful degradation ensures a single API failure never takes down the whole display

Full test suite: Vitest unit tests with MSW mocking, Playwright E2E at 3840×360 viewport