@get-asset/react

Customers

Styled, drop-in Customers directory — name, email, phone and an active/disabled status dot per row. The header carries a name search, an Active/Disabled filter, and an “Add customer” button that reveals a panel above the table; each row's kebab offers Edit, which expands the same form from the row, and Disable. Name is the only required field. Covers loading, error, empty and success, and restacks onto a narrow layout via a container query.

Preview

Loading preview…

Required scopes

The access token used by AssetProvider must include these scopes for this primitive to fetch data successfully:

  • customer:read
  • customer:create
  • customer:update
  • vendor:read
  • vendor:create
  • vendor:update

API reference

Root props

PropTypeDefaultDescription
pageSizenumber25Rows per request. Further pages load from the footer's Load more button.
contactsContactOverride[]Override the fetched customers (skips the API call). The search and status filters still apply, client-side.
state"loading" | "error" | "empty"Force a specific state for testing.
hasMorebooleanForce the Load more button when using contacts (previews/tests).
defaultCreatingbooleanfalseOpen the add-customer panel on mount.
classNamestringForwarded to the outer Card wrapper element.

States

Loading

Loading preview…

Success

Loading preview…

EmptyNo customers yet — the state offers the add action.

Loading preview…

Error

Loading preview…

AddingThe add panel, revealed above the table.

Loading preview…

Disabled listingSwitching the filter to Disabled shows the other listing.

Loading preview…

Behaviour

Typing in the search box filters on the customer's name and is debounced before the list is re-requested, so the table doesn't flash a loading state on every keystroke. The Active/Disabled dropdown switches between two listings rather than widening one, so every row in view carries the same status.

A disabled customer drops out of the default listing and out of pickers, but the invoices already raised against it are untouched, and the same menu item re-enables it. Adding and editing share one form: only Name is required, and a cleared email or phone is saved as empty rather than left behind.

The empty state adapts to why it's empty — a search that matched nothing offers to clear it, the disabled listing says everyone is active, and a genuinely empty directory offers the add action.

Every value, control and gate is a slot on the headless compound. See the Contacts part inventory to rearrange the layout or swap the primitives, and AssetVendors for the same surface over vendors.