The Raven

The Problem

KEDCO is an electricity distribution company serving customers across Kebbi, Sokoto, and Zamfara states in Nigeria. Before The Raven, operational data lived in disconnected spreadsheets, phone calls, and verbal shift handovers. A transformer fault in Birnin Kebbi might take two hours to reach anyone with authority to act on it. Management had no live picture of what was happening across the network at any given moment.

The Execution

I built The Raven as a React dashboard backed by Redux Toolkit for global state and ApexCharts for all data visualization. Permissions are enforced at the component level using CASL, so the same codebase renders completely different interfaces depending on whether you're a field engineer, district manager, or executive. MUI's DataGrid handles large tabular datasets — feeder logs, meter readings, billing summaries — with built-in column virtualization. For report generation, I integrated react-to-print so any table or chart view can be printed directly from the browser without leaving the application. The geographic layer uses React Map GL to plot network assets and fault locations on an interactive map.

Impact

Technical Notes

The most deliberate decision was using react-window's virtualized list inside MUI's DataGrid for the feeder log table. At peak usage, the table holds over 8,000 rows. Rendering all of them at once on the low-spec Windows machines used in KEDCO's district offices caused scroll lag severe enough that engineers stopped using the table. Virtualizing the rows — rendering only what's visible in the viewport — brought scroll performance back to 60fps on the same hardware. The CASL permission layer also required careful thought: abilities are computed once when a user logs in and stored in Redux, so permission checks throughout the component tree are synchronous lookups rather than API calls.