Admin & Team

Admin Dashboard

Internal operations dashboard for owners and admins. It combines revenue KPIs, service status, booking counts, orders, and booking detail actions into one live view so management can scan what is happening right now. It is not intended for basic end users.

AccessAdmin / owner only (live)

Shown in live app only when isAdminUser is true. Builder preview still renders for setup.

Data sourceLive + prefetched

Uses appId, secureApiCall, and useAdminDashboard(…); supports _prefetched* for instant paint.

TierFree

Available on all plans.

What it does

Four things worth knowing

Admin-only runtime visibility

In live usage the dashboard renders only for admin/owner users via isAdminUser. In Builder canvas/preview it stays visible for configuration.

Live backend operations data

Reads runtime data through appId, secureApiCall, and useAdminDashboard(…) for revenue, bookings, services, and orders.

Prefetched data for instant render

Supports _prefetchedServices, _prefetchedProviderStats, _prefetchedTeamOrders, _prefetchedBookings, and _prefetchedMembership.

Operational tabs and detail flows

Overview, Services, and Orders stay mapped to internal tab keys. Booking and order detail modals support fast review and optional customer chat.

Builder setup

Find it, drop it, publish

Where to find itAdd it to your admin screen

Component picker → Admin & Team → Admin Dashboard.
Drop it on the intended internal admin/owner screen.
Use registry key admin-dashboard for builder placement.

Before you publishFour things to check

Keep the navigation flow admin-only as well (recommended).
Set labels and visibility toggles in the property editor.
Do not expect a requireAdmin runtime toggle - it is removed for this component.
Publish so live runtime props (appId, secureApiCall, isAdminUser) apply in AppPlayer.

Category: Admin & TeamComponent: BuilderAdminDashboardRegistry key: admin-dashboardTier: Free

Props

Access, data, and editable fields

Group	Prop	Default	What it controls
Access	`isAdminUser`	Runtime injected	Live visibility gate. True shows admin dashboard, false hides/blocks for non-admin users. Builder preview still renders for editing.
Data	`appId`, `secureApiCall`	Runtime injected	Secure backend access for live KPIs, bookings, service status, and orders.
Visibility	`showRevenueCards`, `showBookingStats`, `showOrderHistory`, `showServiceStatus`, `showCustomerCount`	`true`	Toggles major dashboard blocks so you can keep the screen compact or expand it for full operations use.
Messaging	`showMessaging`	`true`	Enables the booking-detail action for customer chat from inside the dashboard flow.
Labels	`headerTitle`, `overviewTabLabel`, `servicesTabLabel`, `ordersTabLabel`	`Business Dashboard`, `Overview`, `Services`, `Orders`	UI text only. Internal tab mapping remains fixed to `overview`, `services`, and `orders`.
Label safety	`overviewTabLabel`, `servicesTabLabel`, `ordersTabLabel`	Sanitized defaults	Empty/invalid labels fall back to safe defaults. Registry should use safe select options rather than free text.
Styling	`backgroundColor`, `cardBackgroundColor`, `headerColor`, `titleColor`, `subtitleColor`, `primaryColor`, `secondaryColor`, `successColor`, `warningColor`, `dangerColor`, `borderColor`, `borderRadius`, `fontFamily`	Brand defaults	Adjusts the full visual language of the screen, from KPI cards to alerts and badge states.
Runtime	`isPreview`, `isAdminUser`, `appId`, `secureApiCall`, `_prefetchedServices`, `_prefetchedProviderStats`, `_prefetchedTeamOrders`, `_prefetchedBookings`, `_prefetchedMembership`	Injected by runtime	These values come from `AppPlayer` and Builder data context rather than normal builder editing.

Toggles & colours

Make it yours

Use the visibility and style props to match your internal admin UI while keeping runtime data and access rules intact.

Prop	Default	What it controls
`showRevenueCards`	`true`	Revenue summary cards visibility.
`showBookingStats`	`true`	Booking KPI cards and related counts.
`showOrderHistory`	`true`	Orders section visibility in dashboard flows.
`showServiceStatus`	`true`	Service status block visibility.
`showCustomerCount`	`true`	Customer count KPI visibility.
`showMessaging`	`true`	Booking detail customer chat action.
`backgroundColor`	Brand default	Main dashboard surface background.
`cardBackgroundColor`	Brand default	KPI and content card backgrounds.
`headerColor`, `titleColor`, `subtitleColor`	Brand defaults	Header and text hierarchy colours.
`primaryColor`, `secondaryColor`, `successColor`, `warningColor`, `dangerColor`	Brand defaults	Status, emphasis, and semantic indicator colours.
`borderColor`, `borderRadius`, `fontFamily`	Brand defaults	Structural style and typography.

Tips

Common mistakes to avoid

Do not re-add a runtime admin toggle

requireAdmin is removed for this component. Live access is controlled by runtime isAdminUser.

Keep backend calls secure

Preserve data access through secureApiCall for all runtime KPI, booking, and order fetches.

Update registry when adding props

If new props are introduced, also update component types.ts and registry defaultProps/propDefinitions.

Refresh bundled source when runtime logic changes

Run cd app then node collectSourceFiles.js when deployment bundles must stay in sync.

We’re almost ready.