Case Study · 02
A new department head walks in. First question: "Where's all the data?" — Built iteratively from a Google Sites iframe hack to a full React app used live in leadership meetings.
Fully rebuilt as an open React / Next.js sandbox — same architecture, anonymized data, no login required
Production data · Enterprise confidentiality
The original tool ran on live operational data inside a regulated corporate environment. Real KPI figures and internal dashboards aren't shareable — and that's a professional boundary worth respecting, not working around. So instead of blurring screenshots, the entire dashboard was rebuilt from scratch as a public interactive sandbox — same architecture, same chart logic, same UX decisions, all powered by anonymized dummy data. Hit the button above and explore it directly. That's a more honest demonstration than a static screenshot ever would be.
When a new leader takes the head of a 100+ person department spread across five specialized teams, the first instinct is always the same: get visibility, fast. The ask was simple — one place, all the numbers. The reality was more complicated. Some data lived in spreadsheets updated manually by team leads every week. Some came from the operational intelligence platform used for aircraft data. Some was exported from financial tracking tools. Nothing talked to each other, and there was no clean way to compare delivery performance against team costs, or headcount against output, without opening four different tabs and doing mental math in a meeting.
Before — Data Silos
The first version was honest about its constraints: the fastest way to get something in front of the department head was to build it in Google Sites and embed chart dashboards as iframes. Not elegant, but functional in under a week. It worked — until the number of requested visualizations doubled, then doubled again. Page load times became a problem. So the whole thing got rebuilt properly. Google Apps Script as the backbone, React and Recharts for the visualizations, with AI tooling helping accelerate the coding. The new version could open multiple screens simultaneously — comparing delivery targets against subcontracting costs, team-level performance, headcount distribution — with the ability to drill into any of the five sub-teams on demand.
Glance layer — KPI snapshot
LiveThe insight that shaped the whole architecture: the department head didn't just want to see numbers — he wanted to see relationships. Placing aircraft delivery targets next to team costs, or headcount distribution next to output metrics, lets you ask questions the data alone can't answer: "Are we overspending on one team relative to the deliveries they're responsible for?" That kind of correlation was only visible when the data lived in the same screen.
The department head used this in live meetings — not as a report to review afterward, but as the actual presentation surface during weekly reviews with his team leads and upper management. That changed the requirements significantly. The tool needed to open at a glance level instantly — no loading spinners in a conference room — then let him drill into any of the five teams on demand, without leaving the screen or breaking the rhythm of the conversation.
Navigation Layers — Glance to Detail
KPI Cards
Instant health check
Charts & Matrices
Trend & cross-team analysis
Team Detail Tables
Individual headcount drill-down
No infrastructure approvals. No IT tickets. No waiting. Every technical decision was made within what the team already had access to. The original version used embedded Looker Studio iframes in a Google Site — creative, fast to ship, but brittle at scale. The rebuilt version moved to Google Apps Scriptwith a custom React + Recharts layer, which handled the volume of visualizations without performance issues. Constraint often makes design better — when you can't add complexity, you get precise about what actually matters.
v1 → v2
Rebuilt from iframe embeds to a full React app — same week turnaround required
5 teams
Individual drill-downs: headcount, costs, and performance per sub-team
Live use
Used as the actual presentation surface in weekly leadership meetings
Click the button below to open the interactive dashboard and explore all KPIs, charts, and team-detail tables — running on the Next.js refactor with dummy operational data.