Dashboard Compositions

Pre-composed dashboard layouts and templates.

Prerequisites

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

Components

`ActionsSidebar`

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

agent-ready

Props

Prop	Type	Required	Default	Description
`className`	`string \| undefined`		-	Extra class names merged onto the sidebar root element.

`Cost`

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

agent-ready

Props

Prop	Type	Required	Default	Description
`metrics`	`CostSummaryDisplayMetrics \| null`	✓	-	-
`costLog`	`readonly CostTimeSeriesEntry[]`	✓	-	-
`btcPriceLog`	`readonly BtcPriceTimeSeriesEntry[]`	✓	-	-
`totals`	`CostSummaryMonetaryTotals \| null`	✓	-	-
`isLoading`	`boolean \| undefined`		-	-
`error`	`unknown`		-	-
`dateRange`	`FinancialDateRange \| null`	✓	-	-
`avgAllInCostData`	`readonly AvgAllInCostDataPoint[] \| undefined`		-	Optional revenue/cost time-series for the Avg All-in `Cost` panel.
`controls`	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>>`	✓	-	Period selector element. Pass `<[`TimeframeControls`](/reference/ui/components/filters/#timeframecontrols)>` for the OSS-style year/month picker.
`setCostAction`	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| undefined`		-	Optional "Set Monthly `Cost`" header action slot.

`CostContent`

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

agent-ready

Props

Prop	Type	Required	Default	Description
`metrics`	`CostSummaryDisplayMetrics \| null`	✓	-	-
`costLog`	`readonly CostTimeSeriesEntry[]`	✓	-	-
`btcPriceLog`	`readonly BtcPriceTimeSeriesEntry[]`	✓	-	-
`totals`	`CostSummaryMonetaryTotals \| null`	✓	-	-
`isLoading`	`boolean \| undefined`		-	-
`error`	`unknown`		-	-
`dateRange`	`FinancialDateRange \| null`	✓	-	-
`avgAllInCostData`	`readonly AvgAllInCostDataPoint[] \| undefined`		-	Optional revenue/cost time-series for the Avg All-in `Cost` panel.

`EnergyReport`

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

agent-ready

Props

Prop	Type	Default	Description
`defaultTab`	`EnergyReportTabValue \| undefined`	-	-
`siteView`	`(Omit<EnergyReportSiteViewProps, "dateRange"> & { dateRange?: EnergyReportDateRange \| undefined; }) \| undefined`	-	-
`minerTypeView`	`EnergyReportGroupedBarViewProps \| undefined`	-	-
`minerUnitView`	`EnergyReportGroupedBarViewProps \| undefined`	-	-
`className`	`string \| undefined`	-	-

`HashBalance`

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

agent-ready

Props

Prop	Type	Default	Description
`isError`	`boolean`	-	-
`isLoading`	`boolean`	-	-
`errorMessage`	`string`	-	-
`className`	`string`	-	-
`tabsClassName`	`string`	-	-
`tabsListClassName`	`string`	-	-
`data`	`HashRevenueResponse \| null`	-	-
`initialDateRange`	`FinancialDateRange`	-	-
`onDateRangeChange`	`(dateRange: FinancialDateRange, query: FinanceQueryParams) => void`	-	-

`HashBalanceCostPanel`

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

agent-ready

Props

Prop	Type	Required	Default	Description
`data`	`HashRevenueResponse \| null \| undefined`		-	-
`log`	`HashRevenueLogEntry[] \| undefined`		-	-
`dateRange`	`FinancialDateRange`	✓	-	-
`timeframeType`	`TimeframeTypeValue \| null \| undefined`		-	-
`isLoading`	`boolean \| undefined`		-	-

`HashBalanceRevenuePanel`

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

agent-ready

Props

Prop	Type	Required	Default	Description
`data`	`HashRevenueResponse \| null \| undefined`		-	-
`log`	`HashRevenueLogEntry[] \| undefined`		-	-
`dateRange`	`FinancialDateRange`	✓	-	-
`timeframeType`	`TimeframeTypeValue \| null \| undefined`		-	-
`isLoading`	`boolean \| undefined`		-	-
`currency`	`HashBalanceCurrency`	✓	-	-
`onCurrencyChange`	`(currency: HashBalanceCurrency) => void`	✓	-	-

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 r…

agent-ready

Props

Prop	Type	Default	Description
`hashrate`	`OperationalDashboardTrendInput`	-	-
`consumption`	`OperationalDashboardTrendInput`	-	-
`efficiency`	`OperationalDashboardTrendInput`	-	-
`miners`	`OperationalDashboardMinersInput`	-	-
`controls`	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>>`	-	Optional controls (e.g. a date-range picker) rendered above the grid.

`PendingActionsButton`

Header action tile showing the total count of pending actions (local drafts + submitted voting actions + others' requests). Clicking opens the [**ActionsSidebar**](/reference/ui/components/dashboards/#actionssidebar) via the shared actionsStore tog…

agent-ready

Props

Prop	Type	Required	Default	Description
`onClick`	`((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void) \| undefined`		-	Click handler override — defaults to toggling the actionsStore sidebar.
`className`	`string \| undefined`		-	-

`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…

agent-ready

Props

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

`PoolManagerDashboard`

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

agent-ready

Props

Prop	Type	Required	Default	Description
`stats`	`DashboardStats \| undefined`		-	-
`isStatsLoading`	`boolean \| undefined`		-	-
`alerts`	`Alert[] \| undefined`		-	-
`onNavigationClick`	`(url: string) => void`	✓	-	-
`onViewAllAlerts`	`VoidFunction`	✓	-	-

`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 del…

agent-ready

Props

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

`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 deta…

agent-ready

Props

Prop	Type	Required	Default	Description
`units`	`ProcessedContainerUnit[]`	✓	-	Sites to render (already normalised through `useSitesOverviewData`).
`poolConfig`	`PoolConfigEntry[]`	✓	-	Pool configurations powering each card's pool summary.
`isLoading`	`boolean \| undefined`		-	Show a skeleton placeholder while site data is fetching.
`error`	`unknown`		-	Surface a "could not load sites" message when defined.
`backButtonClick`	`VoidFunction`	✓	-	Called when the operator clicks the "Pool Manager" back link.
`onCardClick`	`(unitId: string) => void`	✓	-	Called with the clicked unit id — typically navigates to `/sites/:id`.

`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 `useSubsi…

agent-ready

Props

Prop	Type	Default	Description
`isError`	`boolean`	-	-
`isLoading`	`boolean`	-	-
`errorMessage`	`string`	-	-
`showSummaryCards`	`boolean`	-	-
`log`	`SubsidyFeesLogEntry[]`	-	-
`data`	`SubsidyFeesResponse \| null`	-	-
`onDateRangeChange`	`(dateRange: FinancialDateRange, query: FinanceQueryParams) => void`	-	-

Dashboard Compositions

Prerequisites

Components

`ActionsSidebar`

Props

`Cost`

Props

`CostContent`

Props

`EnergyReport`

Props

`HashBalance`

Props

`HashBalanceCostPanel`

Props

`HashBalanceRevenuePanel`

Props

`OperationalDashboard`

Props

`PendingActionsButton`

Props

`PoolManager`

Props

`PoolManagerDashboard`

Props

`PoolManagerSiteOverviewDetails`

Props

`PoolManagerSitesOverview`

Props

`SubsidyFee`

Props

On this page