Skip to content
Lending Agent Oversight

AR self-service

The AR self-service surface is the other side of the supervision loop. The principal-side surfaces describe the network. The AR-side surfaces describe one AR’s own work, viewed in their own shoes. The persona switcher in the demo chrome flips between the two.

Live: lending-agent-oversight.vercel.app/demo/ar.

Different shoes

Section titled “Different shoes”

The AR side picks up subliminal cues that signal “you’re somewhere else now”:

  • The top strip is taller (96px vs 80px on the principal side).
  • The greeting typography is Fraunces (font-display) rather than Geist.
  • The persona pill reads AR · [Trading name] in slate-100 rather than the principal’s amber-soft tint.
  • Navigation is shorter: Home, MI returns, Breaches, Profile.

In the shipped demo, only Pemberton Mortgages on Heritage carries a populated AR-side fixture set, since walkthrough step 4 anchors there. Free-explore on Crown and Pinpoint maps to the equivalent AR (the first row of each skin’s register).

AR home

Section titled “AR home”

Renders at /demo/ar.

What’s on the screen

Section titled “What’s on the screen”
  • Greeting: Good morning, [contact first name]. in Fraunces.
  • Required actions widget at the top. List of cards, each with an action label, a deadline, and a CTA button. Default fixtures show:
    • “Submit Q1 MI return by 15 May.”
    • “Read updated CONC 5.2 policy” (Pinpoint) / “Read updated MCOB 11.6 policy” (Heritage) / “Read updated ICOBS 5.2 policy” (Crown).
    • “Acknowledge complaint summary for last quarter.”
  • Performance summary. A row of three small cards: own risk score (with mini gauge), file-review average (rolling 12 months), breach count (rolling 12 months).
  • Recent comms from the principal. Reverse-chronological list of three to five items, each a small card with the sender, the subject, and a “View” link.
  • Quick links. Three cards: Submit MI return, File a breach, View profile.

MI return submission

Section titled “MI return submission”

Renders at /demo/ar/mi. A 3-step form.

Step 1: Quarter and volumes

Section titled “Step 1: Quarter and volumes”
  • Quarter selector (Q1 / Q2 / Q3 / Q4 of the current year, with the next overdue quarter pre-selected and surfaced).
  • New business volume (count and value).
  • Pipeline volume (count).
  • Cancellations (count).

Step 2: Conduct numbers

Section titled “Step 2: Conduct numbers”
  • Complaints received (count).
  • Complaints upheld (count).
  • Breaches reported in the quarter (count, including breaches filed via the breach form).
  • Conduct events (count, with a link to log specifics on the Profile page).

Step 3: Confirmation

Section titled “Step 3: Confirmation”
  • Self-attestation checkbox: “I confirm the figures above are complete and accurate to the best of my knowledge.”
  • Submitter name (auto-filled from the contact, editable).
  • Submit button.

Drafts persist in localStorage as the visitor moves between steps. Submission writes an MIReturn record into the Zustand store and routes back to the AR home with a confirmation toast: “Q1 MI return submitted. Your principal will see this immediately.”

States

Section titled “States”
  • Empty. The selected quarter starts with all numeric fields at zero. Required attestation must be ticked to enable Submit.
  • In progress. A Save draft outline button is always visible. Switching steps auto-saves.
  • Validation failure. If complaints upheld exceeds complaints received, the field shows a destructive ring with “Upheld cannot exceed received.” Submit is disabled.
  • Action-pending (submit). Button spins for 400ms, then routes.
  • Already submitted. If a return for that quarter is already in the store, the form opens in read-only mode with a banner: “You submitted this return on [date]. Your principal has it.”

Breach report form

Section titled “Breach report form”

Renders at /demo/ar/breaches/new. A single-page form with a confirmation step.

What’s on the screen

Section titled “What’s on the screen”
  • Banner: “You’re filing a breach as Pemberton Mortgages. Your principal will see this immediately.”
  • Breach type. Single-select: conduct, financial-crime, data-protection, complaints-handling, advice-suitability, disclosure, training-competence, other. Each option includes a one-line example in muted text.
  • Severity self-assessment. Single-select: low / moderate / serious / critical. Each option carries a help text explaining when it applies. The principal can revise this; the AR’s self-assessment is logged in the audit chain.
  • Title. Short single-line description.
  • Description. Multi-line. Required.
  • Customer impact. Single-select: none / potential / actual-low / actual-high.
  • Immediate steps taken. Multi-line. Optional but encouraged.
  • Submit primary button.

Submission writes a BreachReport into the Zustand store and routes back to the AR home with a confirmation: “Breach filed. Your principal will see this in their triage queue with the SUP 15 clock running.” The new breach appears at the top of the principal-side triage queue when the visitor flips the persona switcher back.

States

Section titled “States”
  • Empty. Submit is disabled until type, severity, title, description, and customer impact are set.
  • Action-pending. Standard 400ms spin, then route.
  • Validation failure. Per-field destructive rings with inline errors.

Profile

Section titled “Profile”

Renders at /demo/ar/profile. Read-mostly.

  • Trading name and legal name in Fraunces.
  • FRN, appointment type chip, status chip.
  • Contact details (editable in the production design; read-only in the demo).
  • Permissions list (read-only).
  • Certifications: list of named individuals with role, certification date, next due date. Destructive tint where overdue.

Responsive behaviour

Section titled “Responsive behaviour”
  • Mobile (< 640px). Required-actions widget collapses to single-column cards. MI return form steps render full-width. Breach report form unchanged. Profile sections stack.
  • Tablet (640-1024px). Two-column layout for MI return step 1 and step 2.
  • Desktop (> 1024px). Max-width 800px container. Forms stay narrow on purpose.

Components

Section titled “Components”
  • components/ar/ar-home.tsx
  • components/ar/required-actions-list.tsx
  • components/ar/mi-return-form.tsx
  • components/ar/breach-report-form.tsx
  • components/ar/ar-profile.tsx

How this connects to the rest of the demo

Section titled “How this connects to the rest of the demo”
  • Submitted MI returns become immediately visible on the principal-side AR detail under the MI returns tab.
  • Filed breaches land on the principal-side breach triage queue with the SUP 15 clock running. The “Filed by AR” filter chip is what surfaces them as a cohort.
  • The persona switcher returns the visitor to the principal side, where the just-filed breach is at the top of the triage queue. The transition is described in Live demo.
  • For the production design’s auth model (signed magic links for AR-side access, tenant-scoped session cookies for principal staff), see Architecture · Auth.