---
title: "ReportHeader"
description: "The parts ReportPage is assembled from, for a page it does not fit. ReportHeader states the question and the exact days it covers, with the period and filters under it and the export at its end; ReportReading says what the figures mean in a sentence."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# ReportHeader

## A report’s header

```tsx
import { getLocalTimeZone, today } from '@internationalized/date';
import { useState } from 'react';
import { ButtonLink, FilterSelect, PeriodPicker, ReportHeader, presetRange } from '@arbol-ai/ui';

const CHANNELS = [
  { value: 'voice', label: 'Phone' },
  { value: 'whatsapp', label: 'WhatsApp' },
];

const HeaderExample = () => {
  const [period, setPeriod] = useState(() => presetRange(7));
  const [channels, setChannels] = useState<string[]>([]);
  const [isExporting, setIsExporting] = useState(false);
  return (
    <ReportHeader
      actions={
        <ButtonLink href="#/report" variant="ghost">
          See the conversations
        </ButtonLink>
      }
      description="How many conversations did the agents hold, and how did they end?"
      exportLabel="Export CSV"
      filters={
        <>
          <PeriodPicker maxValue={today(getLocalTimeZone())} onChange={setPeriod} value={period} />
          <FilterSelect
            allLabel="All channels"
            label="Channel"
            onChange={setChannels}
            options={CHANNELS}
            value={channels}
          />
        </>
      }
      isExporting={isExporting}
      onExport={() => {
        setIsExporting(true);
        globalThis.setTimeout(() => {
          setIsExporting(false);
        }, 1200);
      }}
      period={period}
      title="Conversations"
    />
  );
};

<HeaderExample />
```

## An index of reports

Only a title and a description: periods and exports belong to each report.

```tsx
import { ReportHeader } from '@arbol-ai/ui';

<ReportHeader
  description="Open the question you have; each report reads the same period."
  title="Reports"
/>
```

## A reading beside its figure

```tsx
import { ReportReading, Stat } from '@arbol-ai/ui';

<div className="grid gap-3 sm:grid-cols-2">
  <Stat label="No-shows" value={41} />
  <ReportReading>
    41 patients missed their appointment (3%) and 64 cancelled (5%). The most common reason: “Forgot”.
  </ReportReading>
</div>
```

## Source

The examples above are [`src/blocks/report/report.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/blocks/report/report.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/blocks/report/index.mdx