Aria Console

AI-employee-powered life-insurance lead-to-policy console for an Indian insurer. Vite + React + TypeScript + Tailwind v4, built on the Aria design system.

Run

npm install
npm run dev        # http://localhost:5173
npm run build      # type-check + production build
npm run typecheck  # type-check only

Create .env (gitignored) pointing at the gateway:

VITE_ZINO_API_URL=https://dev.getzino.in

Sign in with a platform user (e.g. admin@getzino.com / Zino); the JWT is persisted in localStorage under lead_to_policy_token.

Backend wiring (live)

This console is wired to the sm2 Zino gateway — sandbox app 385 "Lead to Policy" (org 53), workflow e29c3c33-… (v1). No mock data on the four screens.

src/api/ is a thin SDK over the gateway:

File	Purpose
config.ts	App/workflow/RV/DV/activity UIDs, field ids, select options, state↔stage maps
client.ts	ZinoClient — login, app-scoped view/workflow calls, JWT persistence
provider.tsx	ZinoProvider + useZino + a dependency-free useQuery hook
adapters.ts	Map live records → the Aria domain types (Lead, Decision, timeline)

Endpoints used (all on the gateway):

• POST /usr/login — auth
• POST /app/385/view/recordview — pipeline + lead lookup (rv_template_uid)
• GET /app/385/view/audit?instance_id= — activity log
• GET /monitor/decisions?instance_id= — AI-employee decision stream
• POST /app/385/activity — perform Recommend Product / Collect Documents

Writes are real: submitting Recommend advances a lead Meeting Scheduled → Product Recommended; submitting Documents advances Product Recommended → Documents Collected. Document upload + OCR auto-extraction is intentionally out of scope here (field-based KYC capture only).

Screens

Route	Screen	What it shows
/pipeline	Lead Pipeline	KPI row, pipeline funnel, segment donut, leads table / kanban toggle. Click a lead → Lead 360.
/leads/:id	Lead 360	Profile, workflow stepper, current activity, AI decision stream + escalation callout.
/recommend	Recommend Product	Deep-linked (or picker-selected) lead; live indicative-premium helper, the lead's real AI suggestion, submits the Recommend Product activity.
/documents	Documents	Field-based KYC capture (PAN/Aadhaar/income/status), checklist + completion meter, submits the Collect Documents activity.

Architecture

src/
├── components/
│   ├── core/         Button, Card, Badge, Avatar, Input, Select, MultiSelect
│   ├── insurance/    ConfidenceRing, RupeeAmount, SegmentBadge, ChannelBadge,
│   │                 KpiCard, WorkflowStepper, TimelineEntry, AIDecisionCard,
│   │                 LeadRow, DocumentUploadCard
│   └── index.ts      single import surface — `import { Button } from '@/components'`
├── layout/Shell.tsx  navy sidebar (nav + AI roster) + topbar, routed via <Outlet/>
├── screens/          the four screens
├── data/mockData.ts  typed mock data (Indian context)
├── types.ts          shared domain types (Lead, Decision, Segment, Channel…)
├── lib/cn.ts         className join helper
└── styles/           styles.css + tokens/ (colors, typography, spacing, fonts)

Every screen composes design-system components — they never re-implement primitives. Components are typed, take a className for layout overrides, and are reusable across the app.

Design tokens → Tailwind

src/styles/styles.css imports the Aria tokens (CSS custom properties) and wires them into Tailwind's theme via @theme inline, so utilities resolve straight to the design system:

• bg-navy-900, text-sunrise-600, bg-emerald-100 … full brand + semantic palette
• bg-card, text-strong, text-muted, border-border-subtle … semantic aliases
• rounded-lg (16px card), rounded-md (12px control), rounded-pill
• shadow-sm/md/lg, shadow-sunrise; font-sans (Inter), font-numeric (Inter Tight)
• brand gradients via .bg-sunrise / .bg-navy-grad; tabular figures via .nums

Brand: deep navy #0B1B3B, sunrise accent #F26B3A → #FBA94C, emerald success / amber escalation; ₹ lakh/crore formatting; sentence case; no emoji.