Yashas
6455579cc2
A separate app from the desktop console, talking to the same platform with the same client. Not a breakpoint on the old one: the two answer different questions. The console answers "what is the state of the book?" across a wide grid; a phone answers "what needs me, and what happened to this one?" in a column you scroll with a thumb. The old console at 390px showed why. Tables scrolled sideways, nine queues stacked above the content ate the first screenful, and the action you came to perform sat below the fold. So every row of every table is a CARD — customer, stage, when it is due, who is holding it, and one line about what is happening. Everything else is one tap away. The queues live in a drawer. The action a lead is waiting on is pinned to the bottom of the screen, where a thumb already is. Shared with the console, because a divergence would be two apps disagreeing about the same lead: the whole api/ layer, ActivityForm, and Timeline — whose audit-row merging (one submission writes three rows) is hard-won and must not be reimplemented twice. Written fresh: the shell, the three screens, and the stylesheet. The colour rule is unchanged and is the product in four colours: blue the AI holds it, amber a person, teal the customer, red risk and nothing else. A PWA, so Add to Home Screen gives a full-screen app; the layout pads for the notch and the home indicator. Verified at 402x874: login, overview, drawer, a queue, and a lead, with no horizontal overflow on any of them. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
64 lines
2.5 KiB
Markdown
64 lines
2.5 KiB
Markdown
# Zurich Kotak — Lead Desk (phone)
|
|
|
|
The renewal desk on a phone. A separate app from the desktop console
|
|
(`zurich_kotak`), talking to the same platform with the same API client.
|
|
|
|
## Why a second app rather than a breakpoint
|
|
|
|
The two answer different questions. The desktop console answers *"what is the
|
|
state of the book?"* across a wide grid — six-column tables, a lead beside its
|
|
record, a rail of queues always visible. A phone answers *"what needs me, and
|
|
what happened to this one?"* in a column you scroll with a thumb.
|
|
|
|
Squeezing the first into 390px produced what it always produces: tables that
|
|
scroll sideways, a menu that eats the first screenful, and a primary action
|
|
somewhere below the fold. So the screens are written for the phone, and only
|
|
the parts that must not diverge are shared.
|
|
|
|
## What is shared, and what is not
|
|
|
|
**Copied verbatim, because it is the contract with the platform** — a
|
|
divergence here would be two apps disagreeing about the same lead:
|
|
|
|
src/api/client.js every call
|
|
src/api/config.js stages, actions, doc slots, the workflow mirror
|
|
src/api/permissions.js who may perform what
|
|
src/api/portfolio.jsx the one record-view call the queues share
|
|
src/api/holder.js who is holding a lead
|
|
src/api/lead.js how to read a date, name a field, group the record
|
|
src/components/ActivityForm.jsx, FileField.jsx, Timeline.jsx
|
|
|
|
`Timeline.jsx` in particular is shared on purpose: its audit-row merging (one
|
|
submission writes three rows) is hard-won, and reimplementing it here would
|
|
mean two different accounts of the same history.
|
|
|
|
**Written fresh for the phone:** every screen, the shell, and the stylesheet.
|
|
|
|
## The colour rule
|
|
|
|
Unchanged from the console, and it is the whole product in four colours:
|
|
|
|
blue the AI is holding it
|
|
amber a person is holding it
|
|
teal the customer is holding it
|
|
red risk — and nothing else
|
|
|
|
A lead that is amber on a laptop must be amber on a phone.
|
|
|
|
## Run it
|
|
|
|
npm install
|
|
npm run dev # http://localhost:5176
|
|
|
|
`VITE_ZINO_API_URL` in `.env` for local dev only. In a deployed build the API
|
|
host is read at RUNTIME from the `config.js` the server writes when it places
|
|
the build — never compiled in, so one artifact is promoted between
|
|
environments unchanged.
|
|
|
|
## Installing it
|
|
|
|
It is a PWA: `manifest.webmanifest`, a standalone display mode, and the navy
|
|
theme colour, so Add to Home Screen gives a full-screen app with no browser
|
|
chrome. The layout pads for the notch and the home indicator through
|
|
`env(safe-area-inset-*)`.
|