AR detail

AR detail is the deep view of one AR. It renders at /demo/principal/register/[arId] and holds everything the SUP 12 file should: the firm facts, the risk score and trajectory, the breach history, the file reviews, the MI returns, the conduct events, the SUP 12.8 lifecycle controls. One page, one AR, the year on a page.

Live (Heritage’s Pemberton Mortgages): lending-agent-oversight.vercel.app/demo/principal/register/heritage-ar-001.

What’s on the screen

The page splits into a three-zone header, a tabbed body, and a right rail.

Three-zone header

The header is a grid lg:grid-cols-[minmax(0,1.5fr)_auto_minmax(0,1fr)] layout with three Cards. On mobile it stacks vertically.

Zone 1 — Identity card (1.5fr)

A Card with a brand-tinted radial wash in the top-right corner (a 56-unit rounded-full element at 10% opacity, blurred 3xl, coloured var(--brand-primary)).

Inside, in order:

• Badges row. FRN badge in the skin’s brand colour ring + 8% fill, AR/IAR type badge, status chip (semantic colour per status — see below), self-employed and Important Business Service flags where set.
• Trading name in Fraunces (font-display) at 30-36px medium. The big name is the only thing in display type on the page.
• Subtitle stack — legal name (small), then city · supervised by [Skin name] in muted text.
• Auto-enrichment provenance — bottom-bordered hairline carrying a pulsing emerald dot and the line Auto-enriched · Companies House 4h · FCA Register 12h · CreditSafe 2d.

Zone 2 — Risk gauge (auto width, min 220px)

A Card centring four elements vertically:

1. The semicircular RiskGauge (lg size, 220px outer dim, 14px stroke, severity-band-coloured fill, 800ms cubic-bezier mount animation).
2. A RiskBandBadge (chip with band label and severity-coloured dot).
3. A RiskDeltaTick showing the 14-day move — up arrow at var(--severity-high) colour for rising risk, down arrow at var(--severity-low) for falling, “Steady” at zero. The previous score is in the title attribute on hover. Range deterministic on AR id (-7 to +7).
4. The ledger line composite · five inputs in muted small caps.

Zone 3 — Next-30-days timeline (1fr, max-w-xs)

A Card with three timeline rows, each carrying:

• Coloured dot (destructive if overdue, amber if < 14 days out, emerald otherwise).
• Label (Fitness review / FCA notification / Q2 MI return).
• Date and in Nd or Nd overdue.

Open FCA notifications appear in this rail when an open breach has a notifyByAt set. The timeline keeps the reader’s eye on what’s due rather than what’s already happened.

Status chip semantics

Status chips use distinct semantic colours instead of a generic outline:

Status	Treatment
active	emerald 10% / 30% border
pending-appointment	amber-soft / 30% border
suspended	muted / border
under-investigation	destructive 10% / 30% border
terminated	muted/50 / border with line-through

Tabs

Five tabs:

Tab	Content
Overview	Two cards. Key facts (appointed on, last fitness review, next review due, primary contact, email, headquarters) and Permissions matrix (per permission: code, label, granted on).
Breaches (count)	List of breach reports against this AR. Each row: severity badge, category, status, date, title, FCA-notified tick if present.
File reviews (count)	List of file reviews. Each row: case ref, reviewer, completed-at, score colour-coded against pass / advisory / fail thresholds, rubric code (MCOB / ICOBS / CONC / IAR depending on AR type and skin).
MI returns	Last 8 quarters as a 2x4 grid. Period, GBP volume (formatted £Xm or £Xk), case count, complaints count.
Conduct events	Log of senior departures, controllership changes, certifications, training completions.

Right rail

Four cards stacked vertically.

1. Next fitness review — date, days remaining or “Overdue by X days” in destructive tint, button Open annual packet routing to the annual review packet.
2. Primary contact — name, email.
3. Persona note — small dashed-border callout pointing the visitor at the persona switcher to flip to the AR’s own surface.
4. Manage AR (SUP 12.8) — ManageArMenu. See below.

Manage AR menu (SUP 12.8 lifecycle)

The card sits at the bottom of the right rail because the controls are rarely-used and destructive. Two buttons in a 2-column grid: Suspend (outline) and Terminate (outline, destructive-tinted text and border).

Both are disabled when the AR is already in the corresponding state.

Suspend

Opens a Dialog with:

• Title: Suspend [Trading Name].
• Description: “Suspension pauses the AR’s permissions while you investigate. The AR cannot transact until reinstated. SUP 12.8 notification fires automatically.”
• A textarea for the reason (10-character minimum; counts toward audit chain quality).
• Cancel / Suspend AR buttons.

On submit the dialog flips to a success view: Suspension recorded, body explaining the audit chain entry was written and permissions are paused.

Terminate

Opens a Dialog with the same structure plus:

• A Termination category select: By mutual agreement, For cause (regulatory or conduct), AR-initiated departure, Principal-initiated.
• The reason textarea (same minimum).
• A Type the trading name to confirm input (case-insensitive match against ar.tradingName). The Schedule termination button is disabled until this matches.
• A destructive-coloured primary button.

On submit the dialog flips to a success view: Termination scheduled, body explaining the SUP 12.8 thirty-day notification has been queued for the FCA, permissions revoke on the effective date, and supervision records are retained for the SYSC 9 floor.

In production both actions also require step-up auth (re-enter password and TOTP) before the dialog opens. The demo enforces only the type-the-name pattern.

States

• Loading. Server-rendered with fixtures. Tabs are interactive on hydration. Gauge fill animates on mount.
• Empty per tab.
  • Breaches: “Clean record. No breaches reported in the last 12 months.”
  • File reviews: empty list (rare given fixture density).
  • MI returns: empty grid (rare).
  • Conduct events: short note explaining production-side sourcing.
• Not found. If the arId does not match any fixture, the page renders a centred “AR not found” with a useEffect-based fallback that bounces the visitor to the highest-risk active AR after 1.4s. Anyone hitting an unknown id (cold-pasted URL, manual id fishing) lands on a real surface rather than a dead end.
• Overdue review. The right-rail next-review card is destructive-tinted, and the Overview tab’s “Next review due” row also picks up the destructive tint.
• Manage flow. Both the Suspend and Terminate flows have an internal done state that swaps the dialog body for the success celebration before the dialog auto-closes 1.6s later.

Responsive behaviour

• Mobile (< 640px). The three-zone header collapses to a single-column stack: identity card, then gauge card, then timeline card. Tabs become a horizontally scrollable row. Right rail stacks under the tabs.
• Tablet (640-1024px). Header stacks vertically, tabs and right rail in a single column.
• Desktop (> 1024px). Full three-zone header, tabs left (minmax(0, 1fr)), right rail at fixed 320px.

Components

• components/principal/ar-detail.tsx (top-level — header, tabs, rail, ManageArMenu inline)
• components/principal/risk-gauge.tsx
• components/principal/risk-band-badge.tsx
• components/principal/breach-severity-badge.tsx
• RiskDeltaTick and StatusChip and TimelineRow are inline helpers in ar-detail.tsx

How this connects to the rest of the demo

• The Breaches tab links each row into breach detail.
• The File reviews tab links each row into the file review workspace — the rubric branches on AR type so an IAR review opens against the IAR rubric.
• The right-rail next-review card opens the annual fitness review packet.
• The persona-note routes the visitor to the AR self-service surface for the matched AR.
• Walkthrough step 4 anchors here. Persona switcher pulses; clicking it triggers the principal-to-AR flip described in Live demo.
• The Manage AR menu’s Suspend / Terminate transitions are documented as state changes in State machines under the AR lifecycle diagram.