Multi-site reporting

Multi-site report index — published weekly, monthly, and yearly report windows per site

@tetherto/mdk-react-devkit/foundation

SiteReports is the multi-site report index — a duration toggle (weekly / monthly / yearly) and a sortable table of published report windows. Each row has a "View Report" action that the caller handles, so the component stays routing-agnostic.

For single-site financial reporting see Financial.

Prerequisites

Complete the @tetherto/mdk-react-devkit installation and add the dependency

Components

Component	Description
`SiteReports`	Multi-site reporting aggregation view

`SiteReports`

Aggregates financial and operational reporting metrics across multiple sites for portfolio-level analysis.

Import

import { SiteReports } from '@tetherto/mdk-react-devkit/foundation'
import type { SiteReportsProps, SiteReportRecord, SiteReportViewContext } from '@tetherto/mdk-react-devkit/foundation'

Props

Prop	Status	Type	Default	Description
`pageTitle`	Optional	`string`	`'Reports'`	Heading displayed above the toolbar
`siteName`	Optional	`string`	—	Optional site label shown below the heading
`duration`	Optional	`ReportDuration`	—	Controlled duration (`'weekly'`, `'monthly'`, `'yearly'`)
`defaultDuration`	Optional	`ReportDuration`	`'weekly'`	Initial duration when uncontrolled
`onDurationChange`	Optional	`function`	—	Fires when the user switches duration
`reports`	Optional	`SiteReportRecord[]`	auto-generated	Explicit report windows — when omitted, windows are auto-generated from the current date
`referenceDate`	Optional	`Date`	`new Date()`	Reference point for auto-generating report windows
`onViewReport`	Optional	`function`	—	Called when the user clicks "View Report" on a row; button is disabled when omitted
`className`	Optional	`string`	—	Optional root class override

`SiteReportRecord` type

type SiteReportRecord = {
  from: Date        // report window start
  to: Date          // report window end
  publishedAt: Date // when this report was published
}

`ReportDuration` type

type ReportDuration = 'weekly' | 'monthly' | 'yearly'

`SiteReportViewContext` type

Passed as the second argument to onViewReport:

type SiteReportViewContext = {
  duration: ReportDuration
  siteName?: string
}

Basic usage

import { SiteReports } from '@tetherto/mdk-react-devkit/foundation'

<SiteReports
  pageTitle="Reports"
  siteName="EU Site 01"
  onViewReport={(record, context) =>
    router.push(`/reports/${context.duration}/${record.from.toISOString()}`)
  }
/>

More examples

Behaviour

Renders a two-part surface:

Toolbar — page heading, optional site name, and a segmented duration toggle (Weekly / Monthly / Yearly) implemented as side-variant Tabs.
Table — DataTable with three columns: Date (the formatted report window), Date of Publish (formatted publishedAt), and Actions (a "View Report" button). Both date columns are sortable. The "View Report" button is disabled when onViewReport is not provided.

When reports is omitted, the component auto-generates windows backwards from referenceDate based on the active duration.

Duration is uncontrolled by default; pass duration + onDurationChange to make it controlled.

Styling

.mdk-site-reports: Root element
.mdk-site-reports__toolbar: Heading + duration toggle row
.mdk-site-reports__heading: Page title text
.mdk-site-reports__site-name: Site name label
.mdk-site-reports__duration: Duration tab container
.mdk-site-reports__table: Data table wrapper
.mdk-site-reports__view-button: "View Report" action button

Multi-site reporting

Controlled duration

Providing explicit report windows

On this page