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>
37 lines
1.4 KiB
JavaScript
37 lines
1.4 KiB
JavaScript
import { phaseOf } from './config.js'
|
|
|
|
/**
|
|
* Who is holding a lead right now, said the way the colour rule says it:
|
|
* blue = the AI, amber = a person, teal = the customer, grey = nobody (closed).
|
|
*
|
|
* Derived from phaseOf, so it agrees with the sidebar tallies and the lead
|
|
* header. `label` is the short form for a table cell: "AI · Intake",
|
|
* "Underwriter", "Customer", "Closed".
|
|
*/
|
|
const AI_NAMES = [
|
|
['intake', 'Intake'], ['engage', 'Engage'], ['advisor', 'Advisor'],
|
|
['kyc', 'KYC'], ['voice', 'Meera'], ['rating', 'Rating'],
|
|
]
|
|
|
|
function tidy(by) {
|
|
const s = String(by || '').replace(/^(the|an|a)\s+/i, '').trim()
|
|
return s ? s.charAt(0).toUpperCase() + s.slice(1) : '—'
|
|
}
|
|
|
|
export function holderOf(stageDef, row) {
|
|
if (!stageDef) return { tone: 'grey', label: '—' }
|
|
const ph = phaseOf(stageDef, row) || stageDef
|
|
switch (ph.kind) {
|
|
case 'auto': {
|
|
const by = String(ph.by || '').toLowerCase()
|
|
const hit = AI_NAMES.find(([k]) => by.includes(k))
|
|
return { tone: 'blue', label: 'AI · ' + (hit ? hit[1] : 'Engage') }
|
|
}
|
|
case 'customer': return { tone: 'teal', label: 'Customer' }
|
|
case 'needs': return { tone: 'amber', label: tidy(ph.by) }
|
|
case 'waiting': return { tone: 'grey', label: 'Calendar' }
|
|
case 'end': return { tone: 'grey', label: 'Closed' }
|
|
default: return { tone: 'grey', label: tidy(ph.by) }
|
|
}
|
|
}
|