TL;DR · 10 seconds
An interactive ops dashboard that stitches data from 6 existing systems and generates a forwardable weekly briefing on demand.
- Click any customer in the health table — the WHOLE dashboard scopes to that account.
- Click the pulsing “See where the data lives” button — see the system→widget mapping (McLeod TMS, Salesforce, ServiceNow, Greenhouse, Excel, Slack).
- Click “Generate weekly briefing” — Claude composes a forwardable HTML memo from the dashboard's current state. The whole AIBC pattern in one click.
Sprint 01 · Executive Visibility · Claude Code Tier · Advanced
Hartwell Ops Dashboard.
A Next.js 16 + Tailwind 4 + Recharts dashboard built with Claude Code as a Sprint 01 / Code / Advanced capstone example. Reuses the same fictional Hartwell Logistics company context as the Sprint 01 briefing demo — this is what Lena Park (the COO) looks at on Monday morning before reading Marcus's weekly briefing. Click any customer in the health table and the WHOLE dashboard scopes to that account. Every widget header tells you where the data lives — McLeod TMS, Salesforce, ServiceNow, Excel, Slack. Hit the pulsing “See where the data lives” button for the full system→widget map. Click “Generate weekly briefing” to watch Claude compose a forwardable HTML memo from the dashboard's current state.
Tier
Code · Advanced
Stack
Next.js · Tailwind
Persona
COO at 3PL
Output
Vercel · GitHub
Section I
What the dashboard does.
Hartwell Logistics is a fictional regional 3PL — Cincinnati HQ, 250 employees across four facilities, ~$60M annual revenue. COO Lena Park runs a Monday-morning leadership meeting where she reads ops metrics, customer health, and pending decisions before Marcus Bell (Director of Ops) walks her through the week's briefing.
The dashboard is what Lena bookmarks. Eight widgets, one page, a glance reveals: are we hitting the Q2 OTD mandate, which customers are at risk, where lanes are running hot, what capex is pending her sign-off, who got hired or left this week, and what strategic pressures are shaping the numbers. All pulled from the same Hartwell company context the Sprint 01 briefing Project uses — one company, multiple tools.
Goal: replace the Monday-morning hour Lena loses pulling these numbers from email, Slack, and four different SaaS tools. The cohort version of this build is the same shape — your KPIs, your accounts, your weekly cadence.
Section II
What's on the dashboard.
Eight widgets, all wired to the same Hartwell sample data. Open the live deploy to see them rendered.
Click-to-filter customer health table
Top 5 accounts ranked by revenue share. Click any row → THE WHOLE DASHBOARD scopes to that account. KPIs swap to per-customer values, OTD trend re-renders on the customer's 12-week history, lanes filter to lanes serving them, capex filters to customer-tagged items, people activity filters to customer-tagged events, strategic context filters to customer-relevant items, plus an account-team panel surfacing AE / Solutions Owner / customer-side contact. Cyan filtered-banner spans top-of-main when active.
Data-source pills on every widget
Each widget header carries a colored source-pill: '🗄 Source: McLeod LoadMaster (TMS)', '💼 Source: Salesforce + Priya's status spreadsheet', '🎫 Source: ServiceNow / email queue', '👤 Source: Greenhouse + Renee's hire/exit spreadsheet', etc. Plus a TopSourceStrip below the header listing all 6 source systems. Visualizes the AIBC pattern — dashboard composes from existing systems, no migration.
Pulsing 'See where the data lives' toggle
Top-bar amber-pulsing button (with 'click here first' nudge arrow) opens a modal showing the per-widget system→source mapping in a table. Self-dampens after first click via localStorage. The AHA moment for buyers — they see exactly where each widget pulls from and realize: 'I can build this for MY tool stack.'
KPI cards with anomaly highlighting
OTD, CPSP, claims rate, open driver reqs — WoW deltas + target/baseline comparisons. Cards auto-flag with a red border + 'Anomaly' pill when a metric breaches its threshold. Per-customer values when filtered with a 'For {customer}' sub-label.
OTD trend with drill-down
Line chart with target + Q2-mandate reference lines. Click any data point → modal with that week's full KPI block + top-5 missed loads. Re-renders when the date-range picker changes (1w / 4w / 12w) and when a customer is selected.
Lane utilization with new-lane onboarding
Bar chart of live corridors color-coded by utilization band. Onboarding strip surfaces the three new ATL-* lanes from the Acme expansion. Filters to customer-served lanes when a customer is selected.
Capex pending + customer escalations + sticky notes
Capex items with sponsor + payback + click-to-open justification modal. Escalations with severity + owner + status + per-card editable sticky notes persisted in localStorage.
Generate weekly briefing button
Top-bar primary action. Calls /api/generate-report → Claude Sonnet 4.6 composes a styled HTML weekly briefing from the dashboard's current state, using the same artifact shape as the Sprint 01 / Claude / Entry briefing Project. Renders inline in an iframe with Copy HTML + Download .html. The AIBC pattern in one click — state → synthesis → forwardable document Lena sends to Ed and Tony.
Section III
Where the data came from.
All sample data lives insrc/data/hartwell.tsin the repo. The persona — Marcus, Lena, customers, lanes, KPIs, Q2 strategic context — is the same one the Sprint 01 briefing Project uses. One Hartwell company library, two tools built on top.
In a real cohort build, this is where the operator's actual data sources land — TMS extracts, customer health from CRM, capex tracker exports, ServiceNow ticket queue, hiring tracker. For the demo, we hardcode 12 weeks of plausible KPI history, top 5 customers with health flags, all live + new lane corridors, three pending capex items, three live escalations, and a handful of recent people events.
Section IV
Build path · 5 steps.
How we built this with Claude Code. End-to-end ~4 hours from empty folder to deployed app. If you bring your own KPIs and persona, you replicate this build path exactly — same steps, your inputs.
01
Scaffold the app
claude-code → 'create a Next.js 16 + Tailwind 4 dashboard with Recharts.' Sets up the repo, package.json, base layout.
02
Build the data layer with attribution
Reuse the Hartwell company context from the abc-site Sprint 01 briefing demo. Generate 12 weeks of KPI history + per-customer KPI snapshots + per-customer OTD histories, customer portfolio with lane ownership, capex with customer tags, escalations, people activity. Every widget gets annotated with its real-life data source — that becomes the 'See where the data lives' modal.
03
Build each widget as a presentation component
WidgetHeader / KpiCard / OtdTrend / CustomerHealth / LaneUtilization / CapexBoard / EscalationsQueue / PeopleActivity / StrategicContext. Each accepts data + optional source pill + optional filterLabel + callbacks (onSelectCustomer, onPointClick, onSelectItem). Page.tsx is the client component owning all interactive state.
04
Add the synthesis layer
Server route /api/generate-report wraps Claude Sonnet 4.6 with a Hartwell ghostwriter system prompt mirroring the Sprint 01 briefing artifact. Reads the dashboard's current state, returns a styled HTML artifact. ANTHROPIC_API_KEY lives server-side only — never exposed to the client.
05
Deploy + wire interactivity
git push to GitHub, vercel --prod, set ANTHROPIC_API_KEY in Vercel env, custom-domain hartwell-dashboard.aibuildersclub.ai. Live, public, no signup. Click any customer in the table → whole dashboard filters. Click 'See where the data lives' → modal shows where each widget pulls from. Click Generate weekly briefing → forwardable HTML artifact.
End of Specimen No. 04
Now build yours.
Hartwell is sample data. The shape of the build is portable: your company's KPIs, your account list, your operational cadence. Same five steps, same widget pattern, your inputs. The Sprint 01 Code-Advanced build is one of six modalities you can pick for this skill in the cohort sprint.
One real workflow. One working tool. One cohort.