Internal Support Dashboard
Built a support dashboard from scratch inside a production Rails + React codebase — 100+ daily users, still in active use.
Overview
Saw a clear gap: support and engineering teams had no shared internal tooling to investigate production state, manage billing and access, or troubleshoot complex feature failures. Built a dedicated internal support dashboard from scratch — solely responsible for the front end and its GraphQL integration layer — inside an existing production Ruby on Rails and TypeScript/React codebase. The dashboard covers every major operational concern: user and org profile lookup, account masking for support session replication, billing and paywall management, administrative actions (IP unblocking, email updates, account pairing, metric conversion), version audit history with field-level diffs, and a Harbor integration partner panel for managing API keys and third-party partner org access. A dedicated AI Scribe troubleshooting panel — built within the same dashboard — gives support engineers a per-appointment view of transcript capture jobs, LLM call chains, task status, and configuration diagnostics for the live AI charting feature. Building complex internal tooling inside an existing production codebase is a different discipline than greenfield work: working within an established GraphQL schema, coordinating with backend engineers on new query shapes, integrating Valtio proxy state for cross-component masking without prop drilling, and structuring deeply nested React containers so other engineers can extend them without guidance. The dashboard has 100+ daily active users across cross-functional teams and is still in production use. *Code examples on this page are representative illustrations of the architectural patterns used — they are not actual proprietary source code from the production system.*
Technical Stack
Frontend
- ▸TypeScript
- ▸React
- ▸GraphQL
- ▸React Query
- ▸Valtio
- ▸CSS Modules
- ▸SCSS
Backend
- ▸Ruby on Rails
- ▸GraphQL API
- ▸PostgreSQL
- ▸RSpec
Tooling
- ▸Jest
- ▸React Testing Library
- ▸CircleCI
- ▸ESLint
Key Features
User and org profile lookup with deep inspection of production account state
Account masking and unmasking — impersonate any user to replicate support sessions exactly
Billing and paywall management — extend or modify trial and subscription states without an admin backend
Administrative actions: IP address unblocking, email updates, account pairing, unit and currency conversion
Version audit history with field-level diffs for any record across the application
Harbor integration partner panel — create, search, configure, and revoke API keys for third-party EHR integrations
AI Scribe troubleshooting panel — per-appointment view of transcript capture jobs, LLM call chains, task status, and configuration diagnostics
Valtio proxy state for cross-component masking indicator with one-click unmask from any view
Code Examples
Technical Challenges
Integrating a large new surface area into an established GraphQL schema without breaking existing consumers
Designing for non-technical support users while preserving the depth engineers need to diagnose production issues
Managing cross-component masking state (impersonation) cleanly without prop drilling across deeply nested containers
Coordinating with backend engineers to ship new query shapes on the same release cadence as the frontend
Building a troubleshooting panel for a live AI feature (transcription + LLM) where failure modes span multiple services