Pipeline metrics

Four StatCards, every figure computed from the contact list below rather than typed in. tone paints the icon chip only; the colour of the change line comes from polarity, not from the arrow — which is why “stalled over 10 days” going up is red and not green.

Contact list

The centrepiece, and almost entirely package. PageHeader and PageContainer frame it, SearchFilterBar owns the query, DataTable owns sorting, selection, pinned columns and column visibility, and TablePagination owns the page maths. The app supplies the columns, the data and the wiring between them — that is all.

Everything here is live. Sort by any header, tick rows and reassign their owner, hide a column (turn Location on — it starts hidden), type in the search box and watch the count in the filter bar and the range in the pagination bar move together. Click a row: it becomes the record in the next section.

• All state is controlled. The package holds no data, filters nothing and pages nothing, so the same table serves an in-memory list and a server-paged one without a second component. The cost is that the app owns filter → sort → slice.
• Search runs through matchesSearch, the package's one matcher: a substring test with the tones stripped and the case folded on both sides, so tuan finds Hoàng Minh Tuấn. Every screen in the ecosystem answers a query the same way because they all call it.
• Every filter change resets to page 1. Filtering down to six results while standing on page three shows an empty table, which reads as “no data”, not as “wrong page”.
• Selection is keyed by id, not by row index, so it survives sorting, filtering and paging. The header checkbox only acts on the rows currently on screen.
• A pinned column must declare width — the sticky offset is accumulated from it. Scroll the table sideways: Contact stays left, the action menu stays right.
• Two empty states, not one. “Nothing here yet” and “nothing matches your filters” need different words and different buttons, so the table branches on the unfiltered row count to pick one. Search for something that matches nothing to see the filter state; select every row and delete them to see the other.

Contact record

What a row opens into. The header is LetterAvatar plus StatusPill, the quick actions are real mailto: and tel: links, and the activity feed is Item rows stamped with RelativeTime, filtered by FilterChips. Click a different row above and this panel follows.

RelativeTime speaks Vietnamese unless you hand it locale={enUS}, and every timestamp on this page also gets now={NOW} — a fixed clock, so the sample data never drifts and the server and the browser render the same string.

Deal pipeline

The package ships no board, so the columns are hand-written — but the cards are composed from real components, and the column order comes from sortByStatusPriority(DEAL_STAGES) rather than from a second list that can drift away from the table's Stage column. Move a card and the table row and the funnel move with it; push one all the way to closed and the metric row moves too.

The two arrow buttons on every card are not a fallback, they are the primary path: a board whose only way to move a deal is dragging cannot be operated from a keyboard, and cannot be tested without a pointer. Add drag on top of them, never instead of them.

Sales funnel

Each bar counts the contacts currently at that stage or further along; closed-lost records leave the chart. Progress draws the bar, which is worth more than it looks: the fill uses the ink step of the brand colour (the raw gold fill is 1.86:1 on white), the track carries a border so 0% is still a visible control, and Radix supplies role="progressbar" with a real aria-valuenow.

Follow-ups

The work attached to the relationships: Item rows with a real Checkbox, priority as a dot-variant StatusPill so it does not fight the stage chips for attention, and a due date that turns text-destructive-ink once it is past. Tick one: it drops to the bottom instead of leaving a dead row at the top.

Best practices

Accessibility

• Sortable headers are real buttons and carry aria-sort; the sort icon is never dimmed below the 3:1 threshold, because it is still an operable control.
• Clickable rows join the tab order and answer Enter and Space, but keep role="row" — a role="button" row destroys the table semantics a screen reader needs.
• Give the row action button an explicit label (“Actions for Clara Whitfield”), and stop its click from bubbling into the row handler.
• Filter counts and the pagination range sit in role="status" regions, so filtering announces its own result.
• Both board arrows name the deal and the direction; the disabled end of the pipeline is disabled, not silently inert.
• Every Progress bar carries an aria-label naming the stage and the percentage.
• Pass English labels to every table, filter bar and pagination bar: the packaged defaults include aria-label and sr-only strings that are invisible in review and audible to users.
• One package string still has no prop to override it, and it is avoided here rather than shipped: the aria-label on the <nav> that PageHeader's breadcrumb renders. The × on a clearable Combobox does have one — clearLabel, on both Combobox and MultiCombobox; the multi-select one defaults clearable to true, so it carries the Vietnamese string with nothing switched on. Neither shows in a screenshot; both fail an audit. Check what a component emits, not only what it displays.
• LetterAvatar always renders the name in sr-only text, so mark it aria-hidden when the name is already visible beside it.
• Deal stage is never carried by colour alone — the pill always spells the stage out.