Build an operations dashboard

Combine an analytics overview, a saved-view data grid and an audit timeline into an interface for daily operational decisions.

Overview

Updated 2 min ago

Active visitors

48,210+12.4%

Weekday traffic is carrying the gain

New signups

1,932+4.1%

Invite links drive a third of them

Trial to paid

18.6%+0.8 pt

The onboarding rewrite is landing

Median session

6m 24s-0.9%

Shorter visits on help center pages

Visitors

Direct vs search, stacked daily totals

Direct Search

Work items

Streaming ingest retries

FLW-214

In progress

MFMara Feld

Sep 4

Billing webhook dedupe

FLW-209

In review

KIKen Ito

Sep 3

Schema registry rollback

FLW-203

Blocked

PNPriya Nair

Sep 2

Retention backfill job

FLW-198

Shipped

TRTomas Rivera

Aug 29

Audit log export limits

FLW-191

In progress

JOJune Okafor

Sep 4

Segment preview cache

FLW-187

In review

MFMara Feld

Aug 30

Funnel step rounding

FLW-181

Shipped

KIKen Ito

Aug 26

Cohort comparison view

FLW-176

In progress

PNPriya Nair

Sep 1

0 of 22 selected

Page 1 of 3

Interactive example with illustrative data. Your application supplies the connected services.

Components in this recipe

2732Analytics console pagePagesExplore metrics and work items in a responsive console and download the current table as a local CSV.

2892Saved view data gridBlocksSwitch saved filters, sort customer records, and select rows in an accessible data table.

2849Audit event timelineBlocksFilter audit events and expand the recorded before and after values.

Build it yourself

Start with the analytics console. Define the reporting period and units before connecting summary values and chart data.
Place the saved-view data grid beneath the overview. Keep its filters, selection and pagination in your application state.
Use the audit timeline beside a selected record. Fetch only events the signed-in user is allowed to see.

Build with your agent

A ready-to-use task for your connected coding agent.

Build an operations dashboard

Use the Fieldbook MCP tools search_components and get_component. Select the framework already used by this project. Inspect access requirements and the returned props before editing.

Components: analytics-console-page, saved-view-data-grid, audit-event-timeline.

Start with the analytics console. Define the reporting period and units before connecting summary values and chart data.

Place the saved-view data grid beneath the overview. Keep its filters, selection and pagination in your application state.

Use the audit timeline beside a selected record. Fetch only events the signed-in user is allowed to see.

Your application supplies aggregation, pagination, authorization and persistence. Keep currency and time-zone formatting consistent across the overview, records and events.

Test an empty period, delayed data, a failed request and a narrow viewport. Changing a saved view must update the visible records without losing keyboard focus.

Preserve the project's styling conventions. Replace illustrative data with application inputs, add meaningful checks, and report integration work that remains.

Members only

Set up MCP Included with Pro

Connect your application

Your application supplies aggregation, pagination, authorization and persistence. Keep currency and time-zone formatting consistent across the overview, records and events.

Verify the result

Test an empty period, delayed data, a failed request and a narrow viewport. Changing a saved view must update the visible records without losing keyboard focus.