# 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

```bash
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.