MDC / HES Smart-Metering Console
The operator console for a smart-electricity-metering head-end: estate health, alarm triage, live meter reads and guarded remote control, in English and Arabic.
Blurred on purpose: client work under NDA
Slide 1 of 10
Lead frontend developer · whole console
MDC / HES is the console a utility’s operators and engineers use to run a fleet of smart electricity meters: estate health, alarm triage, on-demand DLMS reads from a physical meter, and relay and limiter commands that only fire after a confirmation and are judged on the meter’s read-back. I built the frontend almost on my own, on my own Vue component kit, in English and Arabic with dark mode and phone layouts.
- Estate dashboard: availability, alarm pressure, concentrators, command outcomes and live health probes
- Live DLMS reads shown as instruments, with live sessions over a WebSocket device bus
- Relay and limiter commands with single-use confirm tokens, hold-to-confirm and server read-back
- Alarm triage with a bilingual event catalogue and tamper marking
- MapLibre estate map with worst-state clusters and an inline location picker
- Command log, request audit log, and users and roles with effective permissions
- Vue 3
- TypeScript
- Vite
- Tailwind CSS v4
- reka-ui
- Pinia
- TanStack Vue Query
- CASL
- ApexCharts
- MapLibre GL
- WebSocket
- PWA
How I built it
- My own Vue component kit (about 70 components, Vuetify-compatible API) on reka-ui and Tailwind CSS v4
- DLMS/COSEM in the browser: OBIS catalogue, DLMS date-time codec, unit-aware limiter, a scale guard on bus values
- Single-use refresh tokens with the refresh locked per tab and across tabs (Web Locks), and CASL from server permissions
- Server-driven lists with URL-synced filters, summary-fed KPIs and realtime invalidation over WebSocket with an SSE fallback
- English and Arabic with full RTL (map labels too), dark mode with a View Transition reveal, and phone layouts below 840 px
- PWA, Docker and nginx, and a CI gate with Vitest and Playwright + axe on every push