Report
Report view
A generated report document. Sections argue in prose and show their evidence as exhibits: a pulled-out fact (StatCard), a row of facts (Stat), a fieldwork voice, or a charted figure (PanelChart). Figures number in document order, every prop is serializable, and every metric arrives resolved and pre-formatted.
Install
npx shadcn@latest add @alix/reportViewPreview
Where the operating model leaks value
Findings from eight weeks of fieldwork across three regional hubs.
The cost of the current shape
Duplication across the three regional hubs adds four handoffs to every order-to-cash cycle. The delay is structural, not personal.
Usage
<ReportView
title="Where the operating model leaks value"
standfirst="Findings from eight weeks of fieldwork."
sections={[
{
heading: "The cost of the current shape",
paragraphs: ["Duplication across the three regional hubs..."],
exhibits: [
{ type: "stat", metric: { value: "£14m", label: "Recoverable EBITDA" } },
{ type: "quote", text: "We disagree about who gets to decide.", attribution: "Operations director" },
],
},
]}
nextSteps={["Confirm the hub consolidation sequence."]}
/>Examples
The exhibit vocabulary
Four exhibit types, gated by a discriminated union: stat (a StatCard pull-out), stats (a hairline row of Stats), quote (a fieldwork voice), and figure (a numbered PanelChart). An invalid combination won't compile, and a generator maps the union to a conditional-field choice.
What the numbers say
Four figures carry the case
Client MIS, weeks 1–8; AlixPartners analysis.
exhibits={[
{ type: "stats", metrics: [{ value: "£14m", label: "Recoverable EBITDA" }, ...] },
{ type: "figure", panel: { title: "Utilisation vs target", type: "line", series: [...] }, source: "Client MIS" },
]}When to use it
Use it for
- Pack reports and any document whose content arrives as stored or generated JSON.
- Metrics resolved and formatted once by the caller, so a fact reads identically here, on the deck, and on the dashboard.
- Exhibits where the section's prose has earned them: evidence, not decoration.
Reach for something else
- Hand-written editorial pages: compose Text and the foundations directly.
- The same facts as a monitoring surface: use DashboardView.
- Charts needing their own axes or formatting: the report only speaks PanelChart.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title / standfirst | string | – | The document's name and its one-or-two-sentence promise. The title takes the responsive heading-md step; the construction-red rule above it is the brand's mark. |
| sections | ReportSection[] | – | { heading, paragraphs, exhibits? }: prose first, evidence second. Exhibits are a discriminated union: stat | stats | quote | figure. |
| nextSteps | string[] | – | Closing numbered actions; omit and the document ends on its last section. |