Dashboard compositions

Pre-composed dashboard layouts and templates.

Prerequisites

Complete the installation

Add the dependency to your app's package.json

{
  "dependencies": {
    "@tetherto/mdk-react-devkit": "*",
    "@tetherto/mdk-react-adapter": "*",
    "@tetherto/mdk-ui-foundation": "*"
  }
}

Run npm install from the mdk/ui workspace root after your app is under apps/ so npm links workspace packages.

Import styles: import '@tetherto/mdk-react-devkit/styles.css'

Components

@tetherto/mdk-react-devkit

Import the public APIs on this page from @tetherto/mdk-react-devkit.

`ActionsSidebar`

Full-height side panel for the reference app voting/approval workflow.

Three sections (only rendered when non-empty): - Draft — locally-staged actions not yet sent to the server. - In review — actions this user submitted, awaiting votes. - Requested — other users' voting actions this user can approve/reject (only shown when the current token has actions:w).

Open/close state is driven by actionsStore.sidebarOpen so the header PendingActionsButton and any in-page code can open it without prop-drilling. Mount this once at the app root — it renders nothing when closed

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/pool-manager/actions-sidebar/actions-sidebar.tsx

Props

Prop	Status	Type / Options	Default	Description
`className`	Optional	`string`	-	Extra class names merged onto the sidebar root element

`Cost`

Cost Summary - composite reporting page (single-site).

Reads cost-summary view model fields (from useCostSummary) and renders: - page header with "Cost Summary" title and an optional action slot (setCostAction) pinned to the opposite edge - period selector slot (controls) - pass <TimeframeControls> for the OSS-style Year/Month picker or any other date selector element - shared CostContent 2x2 grid (charts + metric tiles)

Multi-site is intentionally out of scope for this extraction wave

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/reporting-tool/financial/cost/cost.tsx

Props

Prop	Status	Type / Options	Default	Description
`btcPriceLog`	Required	`readonly BtcPriceTimeSeriesEntry[]`	-	BTC price time series aligned to `costLog` buckets
`controls`	Required	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>>`	-	Period selector element. Pass `<TimeframeControls>` for the OSS-style year/month picker
`costLog`	Required	`readonly CostTimeSeriesEntry[]`	-	Monthly/weekly production-cost time series for the Production `Cost` / Price chart
`dateRange`	Required	`FinancialDateRange \| null`	-	Active date range; drives x-axis labels across all charts
`metrics`	Required	`CostSummaryDisplayMetrics \| null`	-	Headline $/MWh tiles (all-in, energy, operations). Pass `null` while loading
`totals`	Required	`CostSummaryMonetaryTotals \| null`	-	Period totals (energy + operations USD) for the Operations vs Energy doughnut
`avgAllInCostData`	Optional	`readonly AvgAllInCostDataPoint[]`	-	Optional revenue/cost time-series for the Avg All-in `Cost` panel
`error`	Optional	`unknown`	-	When truthy, renders an error message in place of the chart grid
`isLoading`	Optional	`boolean`	`false`	Shows a loading spinner overlay over the chart grid
`setCostAction`	Optional	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>>`	-	Optional "Set Monthly `Cost`" header action slot. A `ReactElement` slot (rather than an href string) so consumers can hand in router-aware components like `<Link>` or `<Button onClick={...} />` without triggering a full page reload

`CostContent`

Renders the data-driven portion of the Cost page in a 2x2 Mosaic grid:

(1,1) Production Cost / Price - (1,2) Avg All-in Cost - (2,1) Operations vs Energy Cost - (2,2) Headline metric tiles (stacked)

Exported alongside Cost so consumers who want to embed the cost rendering inside their own page chrome (custom header, layout, navigation) can mount CostContent directly without the default title / "Set Monthly Cost" link

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/reporting-tool/financial/cost/cost-content.tsx

Props

Prop	Status	Type / Options	Default	Description
`btcPriceLog`	Required	`readonly BtcPriceTimeSeriesEntry[]`	-	BTC price time series aligned to `costLog` buckets
`costLog`	Required	`readonly CostTimeSeriesEntry[]`	-	Monthly/weekly production-cost time series for the Production `Cost` / Price chart
`dateRange`	Required	`FinancialDateRange \| null`	-	Active date range; drives x-axis labels across all charts
`metrics`	Required	`CostSummaryDisplayMetrics \| null`	-	Headline $/MWh tiles (all-in, energy, operations). Pass `null` while loading
`totals`	Required	`CostSummaryMonetaryTotals \| null`	-	Period totals (energy + operations USD) for the Operations vs Energy doughnut
`avgAllInCostData`	Optional	`readonly AvgAllInCostDataPoint[]`	-	Optional revenue/cost time-series for the Avg All-in `Cost` panel
`error`	Optional	`unknown`	-	When truthy, renders an error message in place of the chart grid
`isLoading`	Optional	`boolean`	`false`	Shows a loading spinner overlay over the chart grid

`EnergyReport`

Operational Energy report — site consumption trend, power modes by miner type, and per–mining-unit / per–miner-type bar charts

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/composite/reporting-tool/operational/energy-report/energy-report.tsx

Props

Prop	Status	Type / Options	Default	Description
`className`	Optional	`string`	-	-
`defaultTab`	Optional	`"site-view" \| "miner-type-view" \| "miner-unit-view"`	-	-
`minerTypeView`	Optional	`EnergyReportGroupedBarViewProps`	-	-
`minerUnitView`	Optional	`EnergyReportGroupedBarViewProps`	-	-
`siteView`	Optional	`(Omit<EnergyReportSiteViewProps, "dateRange"> & { dateRange?: EnergyReportDateRange \| undefined; })`	-	-

`HashBalance`

Hash balance reporting page — revenue vs cost tabs with site hash revenue, network hashrate, hashprice charts, and integrated timeframe controls

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/composite/reporting-tool/financial/hash-balance/hash-balance.tsx

Props

Prop	Status	Type / Options	Default	Description
`className`	Optional	`string`	-	Root layout class
`data`	Optional	`HashRevenueResponse \| null`	`null`	Revenue / cost log and summary
`errorMessage`	Optional	`string`	`"Error loading hash balance data. Please try again later."`	Error copy when `isError`
`initialDateRange`	Optional	`FinancialDateRange`	`year-to-date`	Initial period
`isError`	Optional	`boolean`	`false`	Show error state
`isLoading`	Optional	`boolean`	`false`	Show loading state
`onDateRangeChange`	Optional	`(dateRange: FinancialDateRange, query: FinanceQueryParams) => void`	-	Fired when the user changes the period
`tabsClassName`	Optional	`string`	-	`Tabs` wrapper class
`tabsListClassName`	Optional	`string`	-	Tab list class

`HashBalanceCostPanel`

Cost tab panel for hash balance — metric tiles and combined cost / revenue / network hashprice bar chart for the selected period

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/composite/reporting-tool/financial/hash-balance/hash-balance-cost-panel.tsx

Props

Prop	Status	Type / Options	Default	Description
`dateRange`	Required	`FinancialDateRange`	-	Active reporting window
`data`	Optional	`HashRevenueResponse \| null`	`null`	Revenue / cost log and summary payload
`isLoading`	Optional	`boolean`	`false`	Loading state
`log`	Optional	`HashRevenueLogEntry[]`	-	Optional log override
`timeframeType`	Optional	`null \| "month" \| "week" \| "year"`	`null`	Year / month / week mode

`HashBalanceRevenuePanel`

Revenue tab panel for hash balance — site hash revenue, network hashrate, hashprice charts, and currency toggle for per-PH/day units

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/composite/reporting-tool/financial/hash-balance/hash-balance-revenue-panel.tsx

Props

Prop	Status	Type / Options	Default	Description
`currency`	Required	`"BTC" \| "USD"`	-	`USD` or `BTC` label for per-PH/day units
`dateRange`	Required	`FinancialDateRange`	-	Active reporting window
`onCurrencyChange`	Required	`(currency: HashBalanceCurrency) => void`	-	Currency toggle handler
`data`	Optional	`HashRevenueResponse \| null`	`null`	Revenue / cost log and summary payload
`isLoading`	Optional	`boolean`	`false`	Loading state
`log`	Optional	`HashRevenueLogEntry[]`	-	Optional log override
`timeframeType`	Optional	`null \| "month" \| "week" \| "year"`	`null`	Year / month / week mode

`OperationalDashboard`

Operational dashboard - a 2x2 grid of the four site-operations charts (hashrate, power consumption, site efficiency, miners status). Each card can expand to full width; expand state persists across remounts. Thin glue: pass pre-shaped data from useOperationsDashboard and an optional controls slot (e.g. a date-range picker)

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/reporting-tool/operational/dashboard/USAGE.md#props-detail

Props

Prop	Status	Type / Options	Default	Description
`consumption`	Optional	`OperationalDashboardTrendInput`	-	Shaped power-consumption trend
`controls`	Optional	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>>`	-	Optional controls (e.g. a date-range picker) rendered above the grid
`efficiency`	Optional	`OperationalDashboardTrendInput`	-	Shaped site-efficiency trend
`hashrate`	Optional	`OperationalDashboardTrendInput`	-	Shaped hashrate trend (`LineChartCardData`)
`miners`	Optional	`OperationalDashboardMinersInput`	-	Shaped stacked miners-status data

`PendingActionsButton`

Header action tile showing the total count of pending actions (local drafts + submitted voting actions + others' requests). Clicking opens the ActionsSidebar via the shared actionsStore toggle

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/header-actions/pending-actions-button.tsx

Props

Prop	Status	Type / Options	Default	Description
`className`	Optional	`string`	-	Additional class names
`onClick`	Optional	`((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void)`	`toggles 'actionsStore' sidebar`	Click handler override — defaults to toggling the actionsStore sidebar

`PoolManager`

Composite Pool Manager surface. Owns internal, state-based view switching across the dashboard and the four feature views (Pools, Miner Explorer, Sites Overview, Site Detail) so the whole experience resolves to a single route. Receives all data as props — the shell page is thin glue that reads the adapter hooks and passes them down.

Actions staged from any sub-view (create/edit pool, assign miners) are reviewed via the global ActionsSidebar mounted in App.tsx, opened by the PendingActionsButton in the header toolbar

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/features/pool-manager/pool-manager/pool-manager.tsx

Props

Prop	Status	Type / Options	Default	Description
`poolConfig`	Required	`PoolConfigEntry[]`	-	Pool configurations shared by every sub-view (Pools, Miner Explorer, Sites)
`alerts`	Optional	`Alert[]`	-	Recent alerts for the dashboard list
`className`	Optional	`string`	-	Additional class names
`initialView`	Optional	`"dashboard" \| "pools" \| "sites-overview" \| "miner-explorer" \| "site-detail"`	`"dashboard"`	Initial view (defaults to `dashboard`)
`isSiteDetailLoading`	Optional	`boolean`	-	Site Detail loading flag
`isSitesLoading`	Optional	`boolean`	-	Sites Overview loading flag
`isStatsLoading`	Optional	`boolean`	-	Dashboard stats loading flag
`miners`	Optional	`ListThingsDevice[]`	`[]`	Miners for the Miner Explorer view
`onSiteSelect`	Optional	`((unitId: string) => void)`	-	Notified with the selected unit id when a site card is opened
`onViewAllAlerts`	Optional	`VoidFunction`	-	Dashboard "View All `Alerts`" handler (e.g. navigate to `/alerts`)
`onViewChange`	Optional	`((view: PoolManagerView) => void)`	-	Notified whenever the active view changes (lets the page lazy-fetch)
`siteDetailDataOptions`	Optional	`SiteOverviewDetailsDataOptions`	-	Extra data-fetch knobs forwarded to the Site Detail container
`siteDevices`	Optional	`ContainerUnit[]`	`[]`	Raw container devices used to resolve the selected unit for Site Detail
`sitesError`	Optional	`unknown`	-	Sites Overview error
`stats`	Optional	`DashboardStats`	-	Dashboard site-level stat blocks
`units`	Optional	`ProcessedContainerUnit[]`	`[]`	Normalised site units for the Sites Overview view
`view`	Optional	`"dashboard" \| "pools" \| "sites-overview" \| "miner-explorer" \| "site-detail"`	-	Controlled view — when provided the component syncs its internal state to this value whenever it changes (e.g. driven by a URL query param). Leave undefined to rely solely on `initialView` / internal navigation

`PoolManagerDashboard`

Landing page for the Pool Manager: site-level stats, primary navigation blocks, and a compact recent-alerts list

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/pool-manager/dashboard/dashboard.tsx

Props

Prop	Status	Type / Options	Default	Description
`onNavigationClick`	Required	`(url: string) => void`	-	Called when a navigation block is clicked
`onViewAllAlerts`	Required	`VoidFunction`	-	Called when "View All `Alerts`" is clicked
`alerts`	Optional	`Alert[]`	`[]`	Recent alerts list (capped to `MAX_ALERTS_DISPLAYED`)
`isStatsLoading`	Optional	`boolean`	`false`	Hide stats while loading
`stats`	Optional	`DashboardStats`	-	Top-of-page stat blocks; hidden while loading

`PoolManagerSiteOverviewDetails`

Pool-manager site detail page — drilldown for a single site showing configured pools, recent miner activity, and performance charts. Renders a breadcrumb header (Site Overview / <unitName>) and delegates the body to SiteOverviewDetailsContainer

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/features/pool-manager/site-overview-details/pool-manager-site-overview-details.tsx

Props

Prop	Status	Type / Options	Default	Description
`backButtonClick`	Required	`VoidFunction`	-	Called when the operator clicks the "Site Overview" back link
`poolConfig`	Required	`PoolConfigEntry[]`	-	Pool configurations powering the per-pool detail rows
`unit`	Required	`UnitData`	-	The site (container unit) to render details for
`unitName`	Required	`string`	-	Display name shown in the breadcrumb (`Site Overview / <unitName>`)
`dataOptions`	Optional	`SiteOverviewDetailsDataOptions`	-	Optional data-fetch knobs forwarded to `useSiteOverviewDetailsData`
`isLoading`	Optional	`boolean`	`false`	Show a centered loader instead of the detail container

`PoolManagerSitesOverview`

Pool-manager sites overview page — landing screen listing every site as a status card with a snapshot of pools, miners online, hashrate, and any active incidents. Each card navigates to the site detail page.

Renders its own loading / empty / error states; safe to render without external guarding

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/features/pool-manager/sites-overview/pool-manager-sites-overview.tsx

Props

Prop	Status	Type / Options	Default	Description
`backButtonClick`	Required	`VoidFunction`	-	Called when the operator clicks the "Pool Manager" back link
`onCardClick`	Required	`(unitId: string) => void`	-	Called with the clicked unit id — typically navigates to `/sites/:id`
`poolConfig`	Required	`PoolConfigEntry[]`	-	Pool configurations powering each card's pool summary
`units`	Required	`ProcessedContainerUnit[]`	-	Sites to render (already normalised through `useSitesOverviewData`)
`error`	Optional	`unknown`	-	Shows a "Failed to load data" alert when defined (together with the internal pool-config fetch error)
`isLoading`	Optional	`boolean`	`false`	Show a skeleton placeholder while site data is fetching

`SubsidyFee`

Subsidy & fees reporting view — combines a stacked bar chart of mining rewards (subsidy vs fees) with optional summary stat cards and a timeframe selector. Drives data through the companion useSubsidyFees hook and is intended to be embedded inside the financial reporting page

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/reporting-tool/financial/subsidy-fee/subsidy-fee.tsx

Props

Prop	Status	Type / Options	Default	Description
`data`	Optional	`SubsidyFeesResponse \| null`	-	Subsidy fee data
`errorMessage`	Optional	`string`	`"Error loading block data. Please try again later."`	Error message to display
`isError`	Optional	`boolean`	`false`	Show error state
`isLoading`	Optional	`boolean`	`false`	Show loading state
`log`	Optional	`SubsidyFeesLogEntry[]`	-	Fee log entries
`onDateRangeChange`	Optional	`(dateRange: FinancialDateRange, query: FinanceQueryParams) => void`	-	Called when date range changes
`showSummaryCards`	Optional	`boolean`	`false`	Show summary stat cards

Dashboard compositions

Show steps

On this page