Go to file

Yashas 6d6c4931cc Ask the desk, on the phone The support desk the console got today, brought across: full screen (the only sensible shape on a phone), the conversation list behind a button like the queue drawer, and the same charts drawn from the tables the desk already answers with. Ops only, and for the same reason as the console: the desk reads the whole book — every partner, every premium, every commission — so a partner agent must not open it. The platform enforces that per user; the button is simply not drawn for anyone else. Reachable from the app bar and from the drawer, since a question about the book is as likely to start from a queue as from a lead. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>		2026-09-10 21:20:14 +05:30
public	The Lead Desk, written for a phone	2026-09-10 16:50:48 +05:30
src	Ask the desk, on the phone	2026-09-10 21:20:14 +05:30
.env.example	The Lead Desk, written for a phone	2026-09-10 16:50:48 +05:30
.gitignore	The Lead Desk, written for a phone	2026-09-10 16:50:48 +05:30
eslint.config.js	The Lead Desk, written for a phone	2026-09-10 16:50:48 +05:30
index.html	Carry the base-href placeholder the build requires	2026-09-10 16:58:26 +05:30
package-lock.json	The Lead Desk, written for a phone	2026-09-10 16:50:48 +05:30
package.json	The Lead Desk, written for a phone	2026-09-10 16:50:48 +05:30
README.md	Everything the console can do, on the phone	2026-09-10 17:27:46 +05:30
vite.config.js	The Lead Desk, written for a phone	2026-09-10 16:50:48 +05:30

README.md

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.

The dialogs are copied verbatim too — for the same reason, and because the functionality has to be identical rather than merely similar:

src/api/thread.js               the WhatsApp thread, built once
src/components/Conversation.jsx the thread, with its gaps accounted for
src/components/CallTranscript.jsx
src/components/AgentCard.jsx    what an agent is and what it can reach
src/components/LeadFileDialog.jsx  the whole record, with a filter
src/components/NewLeadDialog.jsx   filing a lead
src/components/AskDesk.jsx      the support desk (ops only)

They are NOT restyled per file. They all render the console's prose__scrim / prose__dlg chrome, and styles/app.css re-points that chrome at phone width into a bottom sheet — full width, rounded top, a grab handle via ::before, env(safe-area-inset-bottom) under the last row. One block, and every dialog in the app is phone-native at once, including the two ClampText already opened. Above 700px the console's centred dialog is kept, which is the right answer for a tablet.

Add a dialog to the console and it can be copied here as-is. Restyle one of them here and the next copy silently reverts it.

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-*).