Before Live
Mirrors src/pages/people/PeopleDetails.tsx lines 105–217 as it ships on app.saphyroo.com today.
Desktop · Light~1280px
Desktop · Dark~1280px
Mobile · Light~390px
Mobile · Dark~390px
Issues called out in critique
- Avatar 160×160 dominates the band; reference set uses 40–72px
- Online state as a separate detached pill instead of an overlay dot on the avatar
- Region appears twice — orange subtitle and grey chip
- Four metadata chips compete with role pills for attention
- Two equal-weight primary buttons; neither dominates
- "Add document" in header competes with the Documents tab
- No max-width — band stretches the full viewport, breaks the breath
Proposed Draft
Identity-first header. Linear avatar size + dot, Stripe muted-meta line, Resend single-action restraint. Capped at 960px so the page breathes like Anthropic Console.
Desktop · Light~1280px
JM
Jordan Marsh
Driver +1 ActiveSummary
Documents
Performance
Desktop · Dark~1280px
JM
Jordan Marsh
Driver +1 ActiveSummary
Documents
Performance
Mobile · Light~390px
Mobile · Dark~390px
What changed and why
- Avatar 64px with overlaid 14px green dot for online state. Linear/Slack pattern. Online text removed entirely.
- Single name row: name + primary role pill (Driver) + +1 overflow + status pill (Active) inline. No separate region subtitle.
- One muted metadata line:
Melbourne · AEST · Driver since Mar 2024+ monospace driver ID with click-to-copy. User ID hidden by default — accessed via the ⋯ menu's "Copy IDs" item. - One primary action (
Edit user) + ⋯ overflow for: Add document, Reset password, Archive, Copy IDs, View activity log.Add documentmoves into the Documents tab. - Header capped at 960px so it doesn't stretch full viewport. Anthropic Console / Linear pattern.
- Status pill uses
brand-50bg + dot, same shape as Allocations status pills — visual consistency across the product. - Mobile: identity stack reflows to keep avatar + name on one row, status pill drops below, primary action is full-width.
- Archived state: status pill flips to grey, avatar gets a desaturated ring, name + meta stay legible (not greyed out — Stripe does this).
Open questions to settle before code
- Primary action. "Edit user" is the obvious default. But for a transport ops persona opening a driver page, "View today's shift" or "Allocate to route" might be the actual primary. Which is it for the most common opening intent? If domain-action wins, "Edit user" demotes to the ⋯ menu.
- Online dot. Currently fed by
isUserOnline()from@/utils/presence— what's the actual signal? If it's "logged into mobile in last 5 min" with high false-negative rate, the dot becomes noise. Worth verifying before relying on it. - IDs visibility. Stripe hides customer IDs entirely behind a copy icon. Drive360 transport managers may quote driver IDs out loud all day. Keep DRV-0042 visible; hide User ID 4 behind ⋯?
- "Driver since" date. Do we expose
userExtension.dateJoined? Adds warmth + tenure context for almost zero cost. If we have it, ship it; if not, defer. - Role pill colour. Currently info-blue for Driver, brand-mint for Manager. Reference set uses neutral grey for role pills (state pills are coloured, role pills are not). Worth flipping to neutral so the status pill is the only coloured thing in the row?