Dashboard Compositions

Pre-composed dashboard layouts and templates.

Prerequisites

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

Components

@tetherto/mdk-react-devkit

`ActionsSidebar`

Full-height side panel for the MiningOS 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

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).

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

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>` for the OSS-style year/month picker.
`setCostAction`	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| undefined`		-	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

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

`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

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 via the shared actionsStore toggle.

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 resolves to a single route for mdk-ui add page. 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

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 by a URL query param). Leave undefined to rely solely on `initialView` / internal navigation.
`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 delegates the body to SiteOverviewDetailsContainer.

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`.
`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 detail page.

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

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 useSubsidyFees hook and is intended to be embedded inside the financial reporting page.

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

On this page