Settings & administration

The account / admin surfaces: BillingPage (plan + invoices), IntegrationsPage (connector grid), PermissionsPage (role × capability matrix) and TeamManagementPage (member roster + detail). All compose the same RecordPage / DashboardLayout / TablePage / ListDetailLayout primitives the rest of the kit uses.

All four are server-safe shells — the live bits (a payment widget, a permission toggle, a member action) ride caller-passed slots, so the page chrome renders on the server.

BillingPage

An account-billing page: a usage band + invoice history in the body, with current-plan and payment-method cards in the facts aside.

Seats

12 / 20

API calls

84,210+6%

Storage

6.2 GB

Invoice	Date	Amount	Status
INV-1043	May 31, 2026	$99.00	Paid
INV-1029	Apr 30, 2026	$99.00	Paid
INV-1014	Mar 31, 2026	$99.00	Paid
INV-1001	Feb 28, 2026	$49.00	Paid

<BillingPage> — TitleBar + "Pro" status pill · usage StatGrid + invoice DataTable in the body · current-plan over payment-method ActionCards in the facts aside · centered reading column

plan / paymentMethod: plan is the current-plan card (tier / price / renewal) atop the facts aside; paymentMethod sits under it.
usage / invoices: usage is a metered StatGrid band atop the body; invoices is the invoice-history DataTable / list (the body).
asideWidth / maxWidth: asideWidth default 340px; maxWidth centers to a reading column. Server-safe.

IntegrationsPage

A connectors page: a summary band over a responsive grid of connector cards, with optional sections (webhooks / API keys) below.

Integrations

Connected

active connectors

Available

in marketplace

Failing

1-1

needs attention

Connected

Slack

Post alerts to a channel

Connected

Google Sheets

NVDA form sync

Connected

Stripe

Donations

Available

BeagleBot groups

Webhooks

3 endpoints

Endpoint	Event	Last delivery	Status
https://hooks.savethedogs.io/nvda	rescuer.created	2m ago	Active
https://api.beaglebot.io/groups	group.synced	14m ago	Active
https://hooks.slack.com/services/T0/B0	alert.raised	1h ago	Retrying

<IntegrationsPage> — TitleBar · connected/available/failing StatGrid · auto-fit grid of connector ActionCards with status pills · webhooks DataTable below

integrations (required): The connector cards laid out in the responsive auto-fit grid.
summary / minWidth / children: summary is a leading StatGrid (connected / available / failing); minWidth is the card column min (default 280px); children are sections below the grid (e.g. a webhooks / API-keys table).
footer: Footer slot. Server-safe.

PermissionsPage

A roles & permissions page: a roles rail beside the role × capability matrix, with a search/filter toolbar above.

Roles & permissions

Capability	Owner	Admin	Member	Viewer
View roster
Edit roster
Export
Manage billing
Manage integrations

5 capabilities × 4 roles · owner column locked

<PermissionsPage> — TitleBar (+ New role) · toolbar (filter Input + Show-inherited Toggle) · roles rail (RolePills + counts) · capability × role matrix of Toggles (owner locked-on) · dimensions footer

matrix (required): The role × capability grid → TablePage table.
toolbar / roles / roleWidth: toolbar is the search / filter / view-toggle band; roles is the roles rail (→ TablePage facets, e.g. a FacetRail / RolePill list); roleWidth default 240px.
footer: Footer slot. Server-safe shell.

TeamManagementPage

A team-admin console: a member roster rail beside the selected member's detail panel (role, permissions, activity).

Team

12 members

Lena Ortiz

lena@savethedogs.io

Email: lena@savethedogs.io
Role: admin
Joined: Jan 17, 2025
Status: Active

Role

Controls what this member can see and change.

admin

Activity

Dana Riverapromoted Lena to adminFeb 9, 2026

Lena Ortizapproved 12 intake recordsJun 21, 2026

Lena Ortizsigned in from a new deviceJun 26, 2026

<TeamManagementPage> — TitleBar + members badge · selectable roster rail (Avatar · RolePill) · member detail (DefGrid · role editor · activity Timeline · remove)

members (required) / detail (required): members is the roster rail (→ ListDetailLayout list); detail is the selected member's panel (role, permissions, activity).
listWidth / listEnd / fullHeight: Roster width (default 360px), listEnd moves it trailing, fullHeight fills the viewport below the admin nav (inbox-style).
footer: Footer slot. Server-safe.