# Report sheet

The paged chassis of a report (release readiness, configuration audit): a cover with what it covers and when its data was read, numbered sections, an export bar, and a provenance footer saying who or what generated it from which sources. Prints one section per page.

- Registry name: `report-sheet` (`@candor/report-sheet`)
- Tier: Pro. Installing it needs a Pro, Premium or Team licence key: the person runs `npx candor-ui key <key>` themselves; never ask for the key in chat or write it to a file.
- Docs: https://candor.themethodic.com/docs/report-sheet

## Install

```bash
npx candor-ui add report-sheet
```

Run `npx candor-ui@latest init` once first (https://candor.themethodic.com/get-started.md). Without the CLI: `npx shadcn@latest add @candor/report-sheet`.
It brings in: button, freshness-stamp, locale, utils.
npm packages: lucide-react@^1.67.0.

## Example

```tsx
"use client"

import { ReportSection, ReportSheet } from "@/components/report-sheet"
import { ComparisonView } from "@/components/comparison-view"
import { KpiRow } from "@/components/stat-card"

const ago = (hours: number) => new Date(Date.now() - hours * 3_600_000).toISOString()

export default function Example() {
  return (
    <ReportSheet
      className="max-w-3xl"
      title="Release readiness: 4.2"
      scope="Acme Production"
      period="Changes since the 4.1 release"
      generatedAt={ago(0)}
      generatedBy="Keel"
      dataReadAt={ago(3)}
      onExport={() => {}}
    >
      <ReportSection number={1} title="Summary" lede="From last night’s CI run and the 4.1 release.">
        <KpiRow
          kpis={[
            { label: "Changes in the release", value: 62, delta: { value: 18, vs: "4.1 release", good: "down" } },
            { label: "Failing tests", value: 6, delta: { value: -4, vs: "last week", good: "down" } },
            { label: "Users affected", value: null, missing: "Needs session analytics, which isn’t connected." },
          ]}
        />
      </ReportSection>
      <ReportSection number={2} title="Before and after" lede="This release against 4.1.">
        <ComparisonView
          before="4.1"
          after="4.2"
          rows={[
            { label: "Test coverage", before: 0.72, after: 0.78, format: "percent", good: "up" },
            { label: "Failing tests", before: 10, after: 6, good: "down" },
          ]}
        />
      </ReportSection>
    </ReportSheet>
  )
}
```

## <ReportSheet>

Props:

- `title: string`: The report's name, as the cover heading.
- `scope: string`: e.g. "Shop production".
- `period?: string | undefined`: The time span the report covers, shown after the scope, e.g. "March 2026".
- `generatedAt: string`: When the report was generated (ISO timestamp), shown in the footer.
- `generatedBy: string`: Who or what generated it, a person or an agent, named in the footer.
- `dataReadAt: string | null`: When the underlying data was read (ISO timestamp); null shows that it's unknown.
- `onExport?: ((format: "pdf" | "csv" | "md") => void) | undefined`: Shows PDF, CSV and Markdown export buttons; called with the chosen format.
- `children: React.ReactNode`
- `className?: string | undefined`

## <ReportSection>

A numbered section with one prop shape: number, title, optional lede, content.

Props:

- `number: number`: The section's number, shown zero-padded above the title.
- `title: string`: The section heading.
- `lede?: string | undefined`: A sentence under the heading saying what the section shows.
- `children: React.ReactNode`
- `className?: string | undefined`

## Strings (`reportSheet`)

The fixed words, English by default. Override any of them under `reportSheet` in `<LocaleProvider strings={{ reportSheet: { … } }}>`; the table is exported as `reportSheetStrings`.

- `report`: Report
- `dataRead`: Data read
- `pdf`: PDF
- `csv`: CSV
- `md`: Markdown
- `footer`: Generated by {by} on {date}. Figures come from the sources named in each section; a dash means it wasn’t measured.

## Rules for using Candor UI

- Components take plain typed data. Never pass model output as HTML or render it as a link; messages are typed blocks.
- A control that can't be used says why: wrap it in `<Locked reason="…">`, don't just disable it.
- Don't show a value you don't have: leave it out (it renders as —) rather than guess. An estimate is labelled as one.
- Nothing is pre-selected in a decision a person makes, and the agent is named from your app's data, never from model output.
- Your app's words go in `LocaleProvider` (fixed strings) and `TermsProvider` (nouns); entity kinds and agent roles in `EntityKindsProvider` and `AgentRolesProvider`.