Users & roles

Every Buildpad app has an administration area for people and access. These frames follow @buildpad/ui-users: UsersManager for the list and its bulk dialog, RoleDetail for a role, and PolicyDetail with the SystemPermissions matrix for a policy. The filters, selection, tabs, permission pills and menus all work.

buildpad add users-routes generates these pages: /users (UsersManager), /roles/[id] (RoleDetail) and /policies/[id] (PolicyDetail), with RolesManager and PoliciesManager for the role and policy lists. The frames are static compositions of the same Mantine parts with sample data. The real components load users, roles and policies from DaaS and show each action only if you have permission for it.

Users

The header is a title and a subtitle. The card’s toolbar has search, Role and Status filters (both clearable), the gray count badge and Add User. At this frame’s width the toolbar wraps and the table scrolls sideways, as VTable does. Select rows to bring up the bulk toolbar. Its Update roles button opens the real Modal.

Northwind Ops

Users

Manage user accounts, roles, and access permissions

6 users

User	Email	Role	Status	Last Access
AH Amelia Hart	amelia.hart@northwind.io	Administrator	active	10/28/2026
DO Daniel Osei	daniel.osei@northwind.io	Editor	active	10/28/2026
PR Priya Raman	priya.raman@northwind.io	Approver	active	10/28/2026
MS Marco Silva	marco.silva@northwind.io	Editor	invited	Never
HK Hana Kobayashi	hana.k@northwind.io	Viewer	active	10/27/2026
TB Tom Becker	tom.becker@northwind.io	Viewer	suspended	10/7/2026

Showing 6 of 6 users

Update roles dialog

The bulk dialog that UsersManager ships, open over the users page with two rows selected. It is the themed Modal, drawn inside the frame so it can be seen without clicking. You can add and remove roles in one step.

Northwind Ops

Users

Manage user accounts, roles, and access permissions

2 selected

6 users

User	Email	Role	Status	Last Access
AH Amelia Hart	amelia.hart@northwind.io	Administrator	active	10/28/2026
DO Daniel Osei	daniel.osei@northwind.io	Editor	active	10/28/2026
PR Priya Raman	priya.raman@northwind.io	Approver	active	10/28/2026
MS Marco Silva	marco.silva@northwind.io	Editor	invited	Never
HK Hana Kobayashi	hana.k@northwind.io	Viewer	active	10/27/2026
TB Tom Becker	tom.becker@northwind.io	Viewer	suspended	10/7/2026

Showing 6 of 6 users

Role detail

RoleDetail for the Approver role with unsaved changes. The header has Cancel, a red delete and a Save menu. Below it are the Basic Information, Users and Policies tabs, then InfoPanel. Click a tab to switch it. From md the page uses an 8 / 4 Grid with InfoPanel on the right. At this frame’s width it sits below the tabs.

Northwind Ops

Approver

Edit Role

Unsaved Changes

Name

Icon

Description

Parent Role

Scope Assignment Rules

Restrict which scopes users with this role can be assigned to

Users

Avatar	Name	Email	Status	Actions
PR	Priya Raman	priya.raman@northwind.io	active

Policies

Icon	Name	Access	Description	Actions
	Approver access	App	Read orders and suppliers, approve orders and manage budgets.

Information

Role ID

7c1e9a42-3b0d-4f6e-9d21-5a8f0c3e7b14

Users

1 user

Policies

1 policy

Created

3/14/2026, 9:12:40 AM

Updated

10/26/2026, 4:05:18 PM

Role information and assignments

Policy detail

PolicyDetail for the policy attached to that role. It has basic information, the App, Admin and Delegate access switches, and the Record-Level and Module-Level tabs. Click a C / R / U / D pill to change its level, or use all / none for a whole row. It uses the same 8 / 4 grid as the role page, so here too the info panel sits below and the matrix has room.

Northwind Ops

Approver access

Edit Policy

Unsaved Changes

Basic Information

Name

Icon

Description

Access Control

App Access

Allow access to the app (requires minimal permissions)

Admin Access

Grant full administrative privileges

Delegate Access

Allow using X-On-Behalf-Of header to delegate audit identity in server-to-server requests

Permissions

Per-collection permissions granted by this policy

Collection	Create	Read	Update	Delete	Remove
purchase_orders /
order_lines /
budgets /
suppliers /
System Collections
daas_users /
daas_files /

App Access is enabled. Minimal permissions are automatically applied and cannot be removed. Reset system permissions to: /

Information

Policy ID

b2f06d1e-8a4c-4c3b-a7e5-1d9f2c6b0e83

Users

1 user

Roles

1 role

Created

3/14/2026, 9:15:02 AM

Updated

10/26/2026, 4:05:18 PM

Policy information and assignments

Menus and statuses

The module’s overlays pinned open, and every account status.

Row actionsRowActionsMenu: a subtle gray size="sm" kebab with Edit and Delete in color="red". Each item appears only if you have that permission.

Status filterSelect size="sm" clearable with dropdownOpened. The dropdown uses the same surface as Menu and Popover.

Permission pillSystemPermissions' toggle: a Badge per action that opens a Menu. Filled green means all, filled blue means custom and an outline gray pill means none.

App-access minimumA cell that app access requires is a filled cyan pill with no "No Access" item. theme.ts doesn't alias cyan, so it renders Mantine's stock cyan.

active

invited

draft

suspended

terminated

Amelia Hart

Marco Silva

Tom Becker

Account statusUserStatusBadge: variant="dot" size="sm" with lowercase labels. Terminated is orange, which the theme aliases to the ember brand scale. UserAvatar is primary only for active users.

Built from

App shell: sidebar, glass header and user menu from the CLI’s AuthenticatedShell.
Page headers: UsersManager’s title and subtitle. The detail pages use a title with a yellow dot badge for unsaved changes, then Cancel, a red delete Button and Save.
Table in a bordered card, as in ManagerTable.css. The toolbar sits inside the card, and ListFooter shows “Showing N of M users” with a page-size Select. VTable is drawn here with Mantine Table. Its checkboxes use the default sm size, and selected rows get no tint.
Avatar: as in UserAvatar, active users get primary and everyone else gets gray.
Badges: light role badges, dot status badges from USER_STATUS_COLORS, filled count badges on the role tabs, and the filled or outline permission pills.
Tabs on both detail pages, and Switch rows for access control and module keys.
Inputs: TextInput, Textarea, Select and MultiSelect. The Icon field is SelectIcon’s trigger, a full-width default Button.

Permission pill colours. The pills use SystemPermissions’ mapping: filled green for all access, filled blue for custom and an outline gray pill for no access. The theme resolves those to the success, info and neutral scales. A cell that app access requires is drawn by SystemPermissions with color="cyan", and this page keeps that colour. theme.ts doesn’t alias cyan, so those pills render in Mantine’s stock cyan, not a brand colour.