F1 component kit/Search and pickers/Filter bar and saved viewsPhone

Filter bar and saved views

F1 variant07 · filter-bar

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.

Whole page:CompactComfortableLaravel · navyDTC · midnight green

Anatomy States Density EN · 中文 Edge cases Contract

Anatomy

The component as it sits in the product: English, compact, real data shapes.

ViewMorning triageOrder number or customer name/Brand Harrow & Vale, Atelier NorthReturning onlyPlus Size re-checkClear all

Manufacturing sub-filter:AssemblyIn-Production?status=active&brand=12,31&returning=1

States

8 states, left to right, top to bottom. A mock poll never finishes, so each state is drawn on purpose.

facets set

ViewMorning triageOrder number or customer name/Brand Harrow & Vale, Atelier NorthReturning onlyPlus Size re-checkClear all

Manufacturing sub-filter:AssemblyIn-Production?status=active&brand=12,31&returning=1

saved views menu

ViewMorning triageOrder number or customer name/Brand Harrow & Vale, Atelier NorthReturning onlyPlus Size re-checkClear all

Manufacturing sub-filter:AssemblyIn-Production?status=active&brand=12,31&returning=1

view changed (dirty dot)

ViewMorning triageOrder number or customer name/Brand Harrow & Vale, Atelier NorthReturning onlyPlus Size re-checkClear all

Manufacturing sub-filter:AssemblyIn-Production?status=active&brand=12,31&returning=1

async facet values

ViewMorning triageOrder number or customer name/Brand Harrow & Vale, Atelier NorthReturning onlyPlus Size re-checkClear all

Manufacturing sub-filter:AssemblyIn-Production?status=active&brand=12,31&returning=1

search pauses tabs

ViewMorning triage4521Brand 2

live / archived toggle

Search fabric codesonly_trashed / with_trashed

nothing set

ViewMorning triageOrder number or customer nameBrandReturning onlyPlus Size re-check

facet values failed

ViewMorning triageOrder number or customer name/Brand Harrow & Vale, Atelier NorthReturning onlyPlus Size re-checkClear all

Manufacturing sub-filter:AssemblyIn-Production?status=active&brand=12,31&returning=1

Density

Compact (2b ultra, the default) and comfortable, side by side. Same markup, only the density tokens change.

compact · default · data-density=compact

ViewMorning triageOrder number or customer name/Brand Harrow & Vale, Atelier NorthReturning onlyPlus Size re-checkClear all

Manufacturing sub-filter:AssemblyIn-Production?status=active&brand=12,31&returning=1

comfortable · data-density=comfortable

ViewMorning triageOrder number or customer name/Brand Harrow & Vale, Atelier NorthReturning onlyPlus Size re-checkClear all

Manufacturing sub-filter:AssemblyIn-Production?status=active&brand=12,31&returning=1

English · 中文

Staff pick en or cn (T001 Q25). Labels arrive localised; CJK falls back to PingFang SC / Noto Sans SC.

ViewMorning triageOrder number or customer name/Brand Harrow & Vale, Atelier NorthReturning onlyPlus Size re-checkClear all

Manufacturing sub-filter:AssemblyIn-Production?status=active&brand=12,31&returning=1

中文 · lang=zh-Hans

视图早间分拣订单号或客户名/品牌 Harrow & Vale, Atelier North仅回头单大码复核清除全部

生产子筛选:组装生产中?status=active&brand=12,31&returning=1

Long string · permission denied

The long-string case (PL-063) and what a role without the permission sees (the server decides; T003).

long string

ViewManufacturing at FRR with hand finishing at F3.5, returning customers onlyOrder number or customer name/Brand The Cambridge Gentleman's Outfitters · Trumpington Street bespoke & made-to-measure branch, Harrow & Vale +4Clear all

Manufacturing sub-filter:AssemblyIn-Production?status=active&brand=12,31&returning=1

permission denied

ViewMorning triageOrder number or customer name/Status: ManufacturingClear all

Manufacturing sub-filter:AssemblyIn-Production?status=active&brand=12,31&returning=1

Both apps

One @rj/admin-kit component, two themes: the Laravel admin (navy pinned) and the DTC admin (kit v4 Midnight green), by token swap only.

Laravel admin · :root

ViewMorning triageOrder number or customer name/Brand Harrow & Vale, Atelier NorthReturning onlyPlus Size re-checkClear all

Manufacturing sub-filter:AssemblyIn-Production?status=active&brand=12,31&returning=1

DTC admin · data-theme=dtc

ViewMorning triageOrder number or customer name/Brand Harrow & Vale, Atelier NorthReturning onlyPlus Size re-checkClear all

Manufacturing sub-filter:AssemblyIn-Production?status=active&brand=12,31&returning=1

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)