94 lines
4.3 KiB
Markdown
94 lines
4.3 KiB
Markdown
# 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://sandbox.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.
|