Filter bar and saved views
Facets at scale with every filter in the URL (paste a link into WeChat and the factory sees the same list). Async facet values over hundreds of retailers, the archived toggle, and the real search rule: search pauses the tabs because the API refuses status + customer together. Saved views live in the URL and this browser; shared team views need backend (P2).
Covers: filter-bar primitive, filter-bar designer, saved-views designer. Exports: FilterBar, SavedViews.
Anatomy
The component as it sits in the product: English, compact, real data shapes.
States
8 states, left to right, top to bottom. A mock poll never finishes, so each state is drawn on purpose.
Views
Brand
Brand
Density
The phone shell is always comfortable (POWERUPS #15): 44px tap targets, 16px inputs. Compact exists on desktop only; see the desktop page.
English · 中文
Staff pick en or cn (T001 Q25). Labels arrive localised; CJK falls back to PingFang SC / Noto Sans SC.
Long string · permission denied
The long-string case (PL-063) and what a role without the permission sees (the server decides; T003).
Contract
The @rj/admin-kit API for this family. Mirrored in CONTRACT.md.
- Export
FilterBar·@rj/admin-kit- Props
facets(key, label, kind: multi|bool|range|async) ·value(URL) ·onChange·searchPausesTabs- States
- empty · set · searching · facet-loading · facet-error · archived
- shadcn / Radix
- Popover · Command (facet search) · Checkbox · ToggleGroup
- Package underneath
- nuqs (parseAsArrayOf) · cmdk · react-query (async facets) · use-debounce
- Accessibility
- each chip is a button naming facet + value; ✕ has its own label
- API operations
- admin.orders.index (status, brand, returning, customer) · admin.tickets.index (status, severity, category, owner, has_order) · with_trashed / only_trashed
- Phone variant
- chip row + bottom-sheet facet picker
- Export
SavedViews·@rj/admin-kit- Props
views·current·dirty·onSave·onUpdate- States
- clean · dirty · default
- shadcn / Radix
- DropdownMenu
- Package underneath
- zustand persist (this browser)
- API operations
- none: shared, server-stored views are proposal P2 (needs backend)