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