+
+
+ {open ? (
+
+ )
+}
diff --git a/src/runtimeConfig.js b/src/runtimeConfig.js
index c1b57bd..7f68c25 100644
--- a/src/runtimeConfig.js
+++ b/src/runtimeConfig.js
@@ -35,7 +35,19 @@ export function requireConfigValue(key) {
*
* `import.meta.env.BASE_URL` is NOT usable here — with Vite's relative base it
* resolves to "./".
+ *
+ * It reads the TAG, not `document.baseURI`. With no
+
+ ) : null}
+
+
+
+
+
+ {name}
+ {user?.email ? {user.email} : null}
+ {roles ? {roles} : null}
+
+ Could not load lead {instanceId}.
if (!row) return {err.status} {err.message}
Loading…
+ // Only groups that actually hold something; an empty tab is a dead end. + const groups = GROUPS + .map(([title, keys]) => [title, keys.map((k) => [k, fmt(k, row[k])]).filter(([, v]) => v !== null)]) + .filter(([, shown]) => shown.length) + const active = Math.min(tab, Math.max(groups.length - 1, 0)) + const stateName = row.current_state_name || '' const stage = STAGES.find((s) => s.name === stateName) const actions = ACTIONS[stage?.uid] || [] @@ -82,16 +112,34 @@ export default function Lead() { return (
- {e.label} {e.on}
) : null })()}
+ {row.quoted_premium ? (
+ {row.lead_ref || `Lead ${instanceId}`}
+
+ {/* React Router stamps the first entry in a session with key 'default',
+ so a lead opened from its own URL has nothing to go back TO and
+ lands on the queue instead of leaving the app. */}
+
+
+
{row.customer_name || row.lead_ref || `Lead ${instanceId}`}
- {row.customer_name}{row.entity_name ? ` · ${row.entity_name}` : ''} ·{' '} + {row.lead_ref || `Lead ${instanceId}`} + {row.entity_name ? ` · ${row.entity_name}` : ''} ·{' '} {row.product_line === 'motor' ? 'Motor' : 'SME Package'}
+
Stage
- {stateName || '—'}
+ {stateName || '—'}
+ {/* An end state runs no activity. That is worth one line next to the
+ stage, not a panel of its own where the actions would be. */}
+ {!actions.length ? Closed — nothing runs from here : null}
@@ -102,80 +150,112 @@ export default function Lead() {
+ Quoted premium
+ ₹{Number(row.quoted_premium).toLocaleString('en-IN')}
+
+ ) : null}
{row.current_insurer ?
-
-
-
What happens next
-- These are the only activities this state allows. Who normally performs - each is shown — but the workflow decides, server-side, whether you may. -
+
+
+ {actions.length ? (
+
-
+
-
+
+
+
+ What happens next
++ These are the only activities this state allows. Who normally performs + each is shown — but the workflow decides, server-side, whether you may. +
+
+ {actions.map((a) => (
+
+ ))}
+
+ {open ? (
+
+ setOpen(null)}
+ onDone={() => { setOpen(null); load() }}
+ />
+
+ ) : null}
- {actions.map((a) => (
-
- ))}
-
- {open ? (
-
- setOpen(null)}
- onDone={() => { setOpen(null); load() }}
- />
+ ) : null}
+
+ {/* The flow's own detail. Each group is one click away rather than one
+ long scroll, and prose is folded to a few lines — the page can be
+ scanned, and still holds everything for whoever wants it. */}
+ {groups.length ? (
+
- ) : (
-
+
) : null}
+
+
+
+ Flow details
+Everything captured on this lead, grouped in the order it was worked.
+
+ {groups.map(([title, shown], i) => (
+
+ ))}
+
+ -
+ {groups[active][1].map(([k, v]) => (
+ v.length > LONG ? (
+
- {label(k)} +
- {label(k)} +
- {v} +
+
+ ) : (
+
+
+ )
+ ))}
+ Terminal.
- )}
- No activity runs from {stateName}.
-
{state.status === 'ready' ? (
- {state.rows.length}
+
-
- {GROUPS.map(([title, keys]) => {
- const shown = keys.map((k) => [k, fmt(k, row[k])]).filter(([, v]) => v !== null)
- if (!shown.length) return null
- return (
-
-
- What has happened
-- Every step on this lead, in order, and who took it — an AI employee, - a person, or the platform itself. -
+ {/* The story runs alongside the file rather than under it, so what was + done and what was captured can be read against each other. */} +
-
- )
- })}
-
- {title}
--
- {shown.map(([k, v]) => (
-
- {k.replace(/_/g, ' ')} -
- {v} -
-
- ))}
- Back to the queue
) } diff --git a/src/screens/Pipeline.jsx b/src/screens/Pipeline.jsx index c05e260..b391606 100644 --- a/src/screens/Pipeline.jsx +++ b/src/screens/Pipeline.jsx @@ -80,11 +80,18 @@ export default function Pipeline() {
+ {state.rows.length}
+ {state.rows.length === 1 ? 'lead' : 'leads'}
+
) : null}
- {state.status === 'loading' ? Loading…
: null} + {state.status === 'loading' ? ( +
+ {Array.from({ length: 6 }, (_, i) => )}
+
+ ) : null}
{state.status === 'error' ? (
@@ -103,44 +110,48 @@ export default function Pipeline() {
) : null}
{state.status === 'ready' && state.rows.length > 0 ? (
-
-
-
+
| Lead | Customer | Channel | -Product | Renewal due | Premium | -Attribution | Added | -
|---|---|---|---|---|---|---|---|
| {r.lead_ref || id} | -{r.customer_name || '—'} {r.entity_name || ''} |
- {ch.label} | -{r.product_line === 'motor' ? 'Motor' : 'SME Package'} | -
- {exp
- ? <>{exp.label}
- {exp.on}
- : —}
- |
- {r.quoted_premium ? Number(r.quoted_premium).toLocaleString('en-IN') : '—'} | -- {r.attribution_status === 'contested' - ? Contested - : {r.attribution_status || '—'}} - | -{add.abs} {add.rel} |
-
+
+
+
+
) : null}
)
diff --git a/src/screens/screens.css b/src/screens/screens.css
index 8a514ff..acd483d 100644
--- a/src/screens/screens.css
+++ b/src/screens/screens.css
@@ -1,109 +1,792 @@
+/* ---- page header ---- */
.page__head {
- display: flex; align-items: flex-start; justify-content: space-between;
- gap: 24px; margin-bottom: 20px;
-}
-.page__title { margin: 0; font-size: 1.5rem; font-weight: 500; letter-spacing: -.01em; color: var(--zk-ink); }
-.page__sub { margin: 3px 0 0; font-size: .84rem; color: var(--zk-muted); }
-.page__count {
- font-size: 1.35rem; font-weight: 500; color: var(--zk-blue);
- background: var(--zk-white); border: 1px solid var(--zk-line);
- border-radius: 6px; padding: 6px 16px; font-variant-numeric: tabular-nums;
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: 24px;
+ margin-bottom: 24px;
}
-.empty { color: var(--zk-muted); font-size: .88rem; padding: 28px 2px; }
+.page__title {
+ margin: 0;
+ font-size: 1.7rem;
+ font-weight: 500;
+ letter-spacing: -0.022em;
+ line-height: 1.2;
+ color: var(--zk-ink);
+}
+
+.page__sub {
+ margin: 6px 0 0;
+ max-width: 72ch;
+ font-size: 0.855rem;
+ line-height: 1.5;
+ color: var(--zk-muted);
+}
+
+/* The queue depth, as a stat tile rather than a loose number. */
+.page__count {
+ flex: none;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 1px;
+ min-width: 84px;
+ padding: 10px 18px;
+ border-radius: var(--r-lg);
+ background: var(--zk-white);
+ border: 1px solid var(--zk-line);
+ box-shadow: var(--sh-sm);
+}
+
+.page__count strong {
+ font-size: 1.6rem;
+ font-weight: 500;
+ line-height: 1.1;
+ color: var(--zk-blue);
+ font-variant-numeric: tabular-nums;
+}
+
+.page__count span {
+ font-size: 0.6rem;
+ font-weight: 500;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ color: var(--zk-grey);
+}
+
+.empty {
+ margin: 0;
+ color: var(--zk-muted);
+ font-size: 0.88rem;
+ text-align: center;
+ padding: 44px 24px;
+ border-radius: var(--r-lg);
+ border: 1px dashed var(--zk-line);
+ background: linear-gradient(180deg, var(--zk-white) 0%, var(--zk-tint) 100%);
+}
.notice {
- background: var(--zk-white); border: 1px solid var(--zk-line);
- border-left: 3px solid var(--zk-blue); border-radius: 0 6px 6px 0; padding: 16px 20px;
- max-width: 60ch;
+ background: var(--zk-white);
+ border: 1px solid var(--zk-line);
+ border-left: 3px solid var(--zk-blue);
+ border-radius: var(--r-xs) var(--r-lg) var(--r-lg) var(--r-xs);
+ box-shadow: var(--sh-sm);
+ padding: 18px 22px;
+ max-width: 64ch;
}
-.notice strong { display: block; font-weight: 500; margin-bottom: 6px; }
-.notice p { margin: 0 0 6px; font-size: .86rem; color: var(--zk-muted); line-height: 1.55; }
-.notice__detail { font-size: .76rem !important; color: var(--zk-grey) !important; }
+
+.notice strong {
+ display: block;
+ font-weight: 500;
+ margin-bottom: 7px;
+}
+
+.notice p {
+ margin: 0 0 6px;
+ font-size: 0.86rem;
+ color: var(--zk-muted);
+ line-height: 1.55;
+}
+
+.notice__detail {
+ font-size: 0.76rem !important;
+ color: var(--zk-grey) !important;
+}
+
.notice code {
- font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8em;
- background: var(--zk-tint); border: 1px solid var(--zk-line-soft);
- border-radius: 3px; padding: 1px 4px;
+ font-family: var(--font-mono);
+ font-size: 0.8em;
+ background: var(--zk-tint);
+ border: 1px solid var(--zk-line-soft);
+ border-radius: var(--r-xs);
+ padding: 1px 5px;
+}
+
+/* ---- queue table ---- */
+.gridwrap {
+ background: var(--zk-white);
+ border: 1px solid var(--zk-line);
+ border-radius: var(--r-lg);
+ box-shadow: var(--sh-sm);
+ overflow: hidden;
+ overflow-x: auto;
}
.grid {
- width: 100%; border-collapse: collapse; background: var(--zk-white);
- border: 1px solid var(--zk-line); border-radius: 6px; overflow: hidden; font-size: .86rem;
+ width: 100%;
+ /* Eight columns of operational data do not compress: below this the card
+ scrolls sideways rather than squeezing every cell into two words a line. */
+ min-width: 900px;
+ border-collapse: separate;
+ border-spacing: 0;
+ font-size: 0.86rem;
}
-.grid th {
- text-align: left; font-size: .68rem; font-weight: 500; letter-spacing: .08em;
- text-transform: uppercase; color: var(--zk-muted); padding: 10px 14px;
- background: var(--zk-tint); border-bottom: 1px solid var(--zk-line); white-space: nowrap;
-}
-.grid td { padding: 11px 14px; border-bottom: 1px solid var(--zk-line-soft); vertical-align: top; }
-.grid tbody tr:last-child td { border-bottom: none; }
-.grid tbody tr:hover { background: var(--zk-tint); }
-.grid .num { text-align: right; font-variant-numeric: tabular-nums; }
-.grid__sub { font-size: .76rem; color: var(--zk-muted); margin-top: 2px; }
-.grid__link { color: var(--zk-blue); text-decoration: none; font-weight: 500; }
-.grid__link:hover { text-decoration: underline; }
-.chip {
- display: inline-block; font-size: .72rem; padding: 2px 8px; border-radius: 3px;
- background: var(--zk-tint-blue); color: var(--zk-blue-dark); border: 1px solid var(--zk-blue-light);
+.grid th {
+ position: sticky;
+ top: 0;
+ z-index: 1;
+ text-align: left;
+ font-size: 0.65rem;
+ font-weight: 500;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ color: var(--zk-muted);
+ padding: 12px 16px;
+ background: var(--zk-tint);
+ border-bottom: 1px solid var(--zk-line);
+ white-space: nowrap;
+}
+
+.grid td {
+ padding: 13px 16px;
+ border-bottom: 1px solid var(--zk-line-soft);
+ vertical-align: top;
+}
+
+.grid tbody tr {
+ transition: background var(--t-fast);
+}
+
+.grid tbody tr:last-child td {
+ border-bottom: none;
+}
+
+.grid tbody tr:hover {
+ background: var(--zk-tint);
+}
+
+/* An accent that arrives on hover, drawn inside the cell so it never disturbs
+ the table's own borders. */
+.grid tbody tr:hover td:first-child {
+ box-shadow: inset 3px 0 0 var(--zk-blue);
+}
+
+.grid .num {
+ text-align: right;
+ font-variant-numeric: tabular-nums;
+}
+
+.grid__sub {
+ font-size: 0.76rem;
+ color: var(--zk-muted);
+ margin-top: 3px;
+}
+
+.grid__link {
+ color: var(--zk-blue);
+ text-decoration: none;
+ font-weight: 500;
+ border-bottom: 1px solid transparent;
+ transition: border-color var(--t-fast);
+}
+
+.grid__link:hover {
+ border-bottom-color: currentColor;
+}
+
+/* Row action. Renders as a button; stays an anchor so an operator can open a
+ lead in a new tab from a queue.
+ NOT `.act` — that class belongs to the Lead page's activity buttons and is
+ display:flex, which stretched this anchor to fill the cell. */
+.grid__act {
+ text-align: right;
+ white-space: nowrap;
+ width: 1%;
+}
+
+.grid__btn {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ text-decoration: none;
+ white-space: nowrap;
+ font-size: 0.78rem;
+ font-weight: 500;
+ padding: 6px 14px;
+ border-radius: var(--r-pill);
+ background: var(--zk-white);
+ color: var(--zk-blue);
+ border: 1px solid var(--zk-line);
+ transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
+}
+
+.grid__btn::after {
+ content: '→';
+ font-size: 0.85em;
+ transition: transform var(--t-fast);
+}
+
+.grid__btn:hover {
+ background: var(--zk-tint-blue);
+ border-color: var(--zk-blue-light);
+}
+
+.grid__btn:hover::after {
+ transform: translateX(2px);
+}
+
+.grid__btn:focus-visible {
+ outline: none;
+ border-color: var(--zk-blue);
+ box-shadow: var(--ring);
+}
+
+/* ---- loading skeleton ---- */
+.skel {
+ display: flex;
+ flex-direction: column;
+ gap: 1px;
+ padding: 14px 0;
+ background: var(--zk-white);
+ border: 1px solid var(--zk-line);
+ border-radius: var(--r-lg);
+ box-shadow: var(--sh-sm);
+ overflow: hidden;
+}
+
+.skel__row {
+ height: 18px;
+ margin: 9px 16px;
+ border-radius: var(--r-sm);
+ background: linear-gradient(90deg, var(--zk-line-soft) 0%, var(--zk-tint) 40%, var(--zk-line-soft) 80%);
+ background-size: 420px 100%;
+ animation: zk-shimmer 1.25s linear infinite;
+}
+
+.skel__row:nth-child(odd) { width: calc(100% - 32px); }
+.skel__row:nth-child(3n) { width: 72%; }
+.skel__row:nth-child(3n + 2) { width: 88%; }
+
+/* ---- chips ---- */
+.chip {
+ display: inline-flex;
+ align-items: center;
+ font-size: 0.72rem;
+ font-weight: 500;
+ padding: 3px 10px;
+ border-radius: var(--r-pill);
+ background: var(--zk-tint-blue);
+ color: var(--zk-blue-dark);
+ border: 1px solid var(--zk-blue-light);
+}
+
+.chip--warn {
+ background: var(--zk-amber-tint);
+ color: var(--zk-amber-ink);
+ border-color: var(--zk-amber-line);
}
-.chip--warn { background: #fdf1e7; color: #93500f; border-color: #f0c69a; }
/* ---- doors ---- */
-.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
-.door {
- font: inherit; text-align: left; cursor: pointer; background: var(--zk-white);
- border: 1px solid var(--zk-line); border-top: 3px solid var(--zk-blue);
- border-radius: 0 0 6px 6px; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px;
+.doors {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
+ gap: 18px;
+}
+
+.door {
+ position: relative;
+ font: inherit;
+ text-align: left;
+ cursor: pointer;
+ background: var(--zk-white);
+ border: 1px solid var(--zk-line);
+ border-radius: var(--r-lg);
+ box-shadow: var(--sh-sm);
+ padding: 22px 22px 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ overflow: hidden;
+ transition: box-shadow var(--t), transform var(--t-fast), border-color var(--t-fast);
+}
+
+/* The accent bar is the door's handle: 3px at rest, the full brand gradient
+ once the pointer is on it. */
+.door::before {
+ content: '';
+ position: absolute;
+ inset: 0 0 auto;
+ height: 3px;
+ background: var(--grad-blue);
+ transform-origin: left;
+ transition: height var(--t);
+}
+
+.door:hover {
+ border-color: var(--zk-blue-light);
+ box-shadow: var(--sh-md);
+ transform: translateY(-2px);
+}
+
+.door:hover::before {
+ height: 5px;
+}
+
+.door:focus-visible {
+ border-color: var(--zk-blue);
+ box-shadow: var(--ring);
+}
+
+.door strong {
+ font-size: 1.02rem;
+ font-weight: 500;
+ letter-spacing: -0.01em;
+ color: var(--zk-ink);
+}
+
+.door p {
+ margin: 0;
+ font-size: 0.82rem;
+ color: var(--zk-muted);
+ line-height: 1.55;
+}
+
+.door .chip {
+ align-self: flex-start;
}
-.door:hover { border-color: var(--zk-blue-light); border-top-color: var(--zk-blue); background: var(--zk-tint); }
-.door strong { font-size: 1rem; font-weight: 500; color: var(--zk-ink); }
-.door p { margin: 0; font-size: .82rem; color: var(--zk-muted); line-height: 1.5; }
-.door .chip { align-self: flex-start; }
/* ---- panel ---- */
-.panel { background: var(--zk-white); border: 1px solid var(--zk-line); border-radius: 6px; padding: 20px 22px; margin-bottom: 22px; }
-.panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
-.panel__title { margin: 0; font-size: 1.05rem; font-weight: 500; }
-.panel__sub { margin: 3px 0 0; font-size: .82rem; color: var(--zk-muted); max-width: 62ch; line-height: 1.5; }
+.panel {
+ background: var(--zk-white);
+ border: 1px solid var(--zk-line);
+ border-radius: var(--r-lg);
+ box-shadow: var(--sh-sm);
+ padding: 24px 26px;
+ margin-bottom: 22px;
+}
+
+.panel__head {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: 20px;
+ margin-bottom: 18px;
+}
+
+.panel__title {
+ margin: 0;
+ font-size: 1.06rem;
+ font-weight: 500;
+ letter-spacing: -0.012em;
+}
+
+.panel__sub {
+ margin: 5px 0 0;
+ font-size: 0.82rem;
+ color: var(--zk-muted);
+ max-width: 62ch;
+ line-height: 1.55;
+}
/* ---- actions ---- */
-.acts { display: flex; flex-wrap: wrap; gap: 10px; }
-.act {
- font: inherit; cursor: pointer; text-align: left; background: var(--zk-white);
- border: 1px solid var(--zk-line); border-radius: 5px; padding: 10px 14px;
- display: flex; flex-direction: column; gap: 2px; min-width: 190px;
+.acts {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+}
+
+.act {
+ font: inherit;
+ cursor: pointer;
+ text-align: left;
+ background: var(--zk-white);
+ border: 1px solid var(--zk-line);
+ border-radius: var(--r-md);
+ padding: 11px 16px;
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+ min-width: 196px;
+ transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
+}
+
+.act:hover {
+ border-color: var(--zk-blue-light);
+ background: var(--zk-tint);
+ box-shadow: var(--sh-sm);
+ transform: translateY(-1px);
+}
+
+.act.is-open {
+ border-color: var(--zk-blue);
+ background: var(--zk-tint-blue);
+ box-shadow: var(--ring);
+ transform: none;
+}
+
+.act strong {
+ font-size: 0.885rem;
+ font-weight: 500;
+}
+
+.act__by {
+ font-size: 0.72rem;
+ color: var(--zk-muted);
+}
+
+.acts__form {
+ margin-top: 22px;
+ padding-top: 22px;
+ border-top: 1px solid var(--zk-line-soft);
+ animation: zk-rise 0.24s var(--ease) both;
+}
+
+/* ---- back ----
+ An icon, not a sentence: the way out of a record is a known shape and does not
+ need naming twice on the page. It carries a title and an aria-label, so the
+ name is still there for a pointer that hovers and for a screen reader. */
+.backbtn {
+ flex: none;
+ margin-top: 4px;
+ width: 34px;
+ height: 34px;
+ display: grid;
+ place-items: center;
+ cursor: pointer;
+ border-radius: var(--r-md);
+ border: 1px solid var(--zk-line);
+ background: var(--zk-white);
+ color: var(--zk-muted);
+ box-shadow: var(--sh-xs);
+ transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
+}
+
+.backbtn svg {
+ width: 16px;
+ height: 16px;
+ transition: transform var(--t-fast);
+}
+
+.backbtn:hover {
+ border-color: var(--zk-blue-light);
+ background: var(--zk-tint-blue);
+ color: var(--zk-blue-dark);
+ box-shadow: var(--sh-sm);
+}
+
+.backbtn:hover svg {
+ transform: translateX(-2px);
+}
+
+.backbtn:focus-visible {
+ outline: none;
+ border-color: var(--zk-blue);
+ box-shadow: var(--ring);
+}
+
+.page__lead {
+ display: flex;
+ align-items: flex-start;
+ gap: 14px;
+ min-width: 0;
+}
+
+/* ---- lead: the file beside the story ---- */
+.lead {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) 384px;
+ gap: 20px;
+ align-items: start;
+}
+
+.lead__main {
+ min-width: 0;
+}
+
+/* The trail stays in view while the file is read against it. */
+.lead__side {
+ position: sticky;
+ top: 90px;
+ min-width: 0;
+}
+
+.panel--rail {
+ padding: 0;
+ margin-bottom: 0;
+ overflow: hidden;
+}
+
+.panel--rail .panel__head {
+ padding: 20px 22px 0;
+ margin-bottom: 14px;
+}
+
+.lead__feed {
+ max-height: calc(100vh - 210px);
+ overflow-y: auto;
+ overscroll-behavior: contain;
+ padding: 0 22px 20px;
+}
+
+/* One column below the width where a 384px rail stops paying for itself. */
+@media (max-width: 1180px) {
+ .lead {
+ grid-template-columns: minmax(0, 1fr);
+ }
+
+ .lead__side {
+ position: static;
+ }
+
+ .lead__feed {
+ max-height: 560px;
+ }
+}
+
+/* ---- tabs ----
+ Underline rather than pills: these swap the whole panel below them, which is
+ what a tab is for; a pill segment reads as a filter on shared content. The
+ 2px rule lives on the button, so a strip that wraps to two rows still marks
+ the active one correctly. */
+.tabs {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 2px;
+ margin-bottom: 20px;
+ border-bottom: 1px solid var(--zk-line);
+}
+
+.tab {
+ font: inherit;
+ font-size: 0.82rem;
+ white-space: nowrap;
+ cursor: pointer;
+ display: inline-flex;
+ align-items: center;
+ gap: 7px;
+ padding: 9px 13px;
+ background: none;
+ border: 0;
+ border-bottom: 2px solid transparent;
+ border-radius: var(--r-sm) var(--r-sm) 0 0;
+ color: var(--zk-muted);
+ transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
+}
+
+.tab:hover {
+ background: var(--zk-tint);
+ color: var(--zk-ink);
+}
+
+.tab.is-on {
+ color: var(--zk-blue-dark);
+ font-weight: 500;
+ border-bottom-color: var(--zk-blue);
+}
+
+.tab__n {
+ font-size: 0.66rem;
+ font-variant-numeric: tabular-nums;
+ min-width: 18px;
+ padding: 1px 6px;
+ border-radius: var(--r-pill);
+ background: var(--zk-line-soft);
+ color: var(--zk-muted);
+ text-align: center;
+}
+
+.tab.is-on .tab__n {
+ background: var(--zk-tint-blue);
+ color: var(--zk-blue);
+}
+
+/* ---- property rows ----
+ Facts read as label/value pairs on hairlines rather than as a wall of filled
+ boxes: the tint was carrying no information and made every field shout as
+ loudly as every other. */
+.props {
+ margin: 0;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
+ gap: 0 36px;
+}
+
+.prop {
+ display: grid;
+ grid-template-columns: minmax(96px, 33%) minmax(0, 1fr);
+ gap: 16px;
+ align-items: baseline;
+ padding: 11px 10px;
+ margin: 0 -10px;
+ border-radius: var(--r-md);
+ border-bottom: 1px solid var(--zk-line-soft);
+ transition: background var(--t-fast);
+}
+
+.prop:hover {
+ background: var(--zk-tint);
+}
+
+.prop dt {
+ font-size: 0.78rem;
+ color: var(--zk-muted);
+ line-height: 1.45;
+}
+
+.prop dd {
+ margin: 0;
+ font-size: 0.875rem;
+ color: var(--zk-ink);
+ line-height: 1.45;
+ overflow-wrap: anywhere;
+}
+
+.prop__num {
+ font-variant-numeric: tabular-nums;
+ font-weight: 500;
+}
+
+/* Prose is not a property. It takes the full width, is labelled above rather
+ than beside, and is folded by ClampText. */
+.prop--note {
+ grid-column: 1 / -1;
+ display: block;
+ margin: 10px -10px;
+ padding: 14px 16px;
+ border-bottom: 0;
+ border: 1px solid var(--zk-line-soft);
+ border-left: 3px solid var(--zk-blue-light);
+ border-radius: 0 var(--r-md) var(--r-md) 0;
+ background: var(--zk-tint);
+}
+
+.prop--note:hover {
+ background: var(--zk-tint);
+ border-color: var(--zk-blue-light);
+}
+
+.prop--note dt {
+ margin-bottom: 7px;
+ font-size: 0.66rem;
+ font-weight: 500;
+ letter-spacing: 0.09em;
+ text-transform: uppercase;
+ color: var(--zk-blue-dark);
+}
+
+.prop--note dd {
+ margin: 0;
}
-.act:hover { border-color: var(--zk-blue-light); background: var(--zk-tint); }
-.act.is-open { border-color: var(--zk-blue); background: var(--zk-tint-blue); }
-.act strong { font-size: .88rem; font-weight: 500; }
-.act__by { font-size: .72rem; color: var(--zk-muted); }
-.acts__form { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--zk-line-soft); }
/* ---- lead file ---- */
-.lead__stage { text-align: right; }
-.lead__stagelabel { display: block; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--zk-grey); }
-.lead__stage strong { font-size: 1rem; font-weight: 500; color: var(--zk-blue-dark); }
-.grp { background: var(--zk-white); border: 1px solid var(--zk-line); border-radius: 6px; padding: 16px 20px; margin-bottom: 14px; }
-.grp__title { margin: 0 0 10px; font-size: .72rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--zk-muted); }
-.grp__list { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 20px; }
-.grp__row { display: flex; flex-direction: column; gap: 1px; padding: 4px 0; border-bottom: 1px solid var(--zk-line-soft); }
-.grp__row dt { font-size: .7rem; color: var(--zk-grey); text-transform: capitalize; }
-.grp__row dd { margin: 0; font-size: .87rem; color: var(--zk-ink); }
-.lead__back { margin-top: 18px; }
+.lead__stage {
+ flex: none;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ gap: 5px;
+ text-align: right;
+}
+
+.lead__stagelabel {
+ display: block;
+ font-size: 0.6rem;
+ font-weight: 500;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ color: var(--zk-grey);
+}
+
+.lead__closed {
+ font-size: 0.7rem;
+ color: var(--zk-grey);
+}
+
+.lead__stage strong {
+ font-size: 0.9rem;
+ font-weight: 500;
+ color: var(--zk-blue-dark);
+ padding: 6px 14px;
+ border-radius: var(--r-pill);
+ background: var(--zk-tint-blue);
+ border: 1px solid var(--zk-blue-light);
+}
+
+/* A closed lead is not a live stage; it should not wear the live stage's blue. */
+.lead__stage strong.is-closed {
+ color: var(--zk-muted);
+ background: var(--zk-tint);
+ border-color: var(--zk-line);
+}
/* ---- renewal countdown ---- */
.due {
- display: inline-block; font-size: .76rem; font-weight: 500;
- padding: 2px 8px; border-radius: 3px; white-space: nowrap;
+ display: inline-flex;
+ align-items: center;
+ font-size: 0.75rem;
+ font-weight: 500;
+ padding: 3px 10px;
+ border-radius: var(--r-pill);
+ white-space: nowrap;
+}
+
+.due--lapsed {
+ background: var(--zk-danger-tint);
+ color: var(--zk-danger-ink);
+ border: 1px solid var(--zk-danger-line);
+}
+
+.due--urgent {
+ background: var(--zk-amber-tint);
+ color: var(--zk-amber-ink);
+ border: 1px solid var(--zk-amber-line);
+}
+
+.due--soon {
+ background: var(--zk-tint-blue);
+ color: var(--zk-blue-dark);
+ border: 1px solid var(--zk-blue-light);
+}
+
+.due--later {
+ background: var(--zk-tint);
+ color: var(--zk-muted);
+ border: 1px solid var(--zk-line);
}
-.due--lapsed { background: #fdeceb; color: #a3261f; border: 1px solid #f0c2bd; }
-.due--urgent { background: #fdf1e7; color: #93500f; border: 1px solid #f0c69a; }
-.due--soon { background: var(--zk-tint-blue); color: var(--zk-blue-dark); border: 1px solid var(--zk-blue-light); }
-.due--later { background: var(--zk-tint); color: var(--zk-muted); border: 1px solid var(--zk-line); }
/* ---- lead header meta ---- */
-.lead__meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 8px; }
-.lead__meta div { display: flex; flex-direction: column; gap: 1px; }
-.lead__meta dt { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--zk-grey); }
-.lead__meta dd { margin: 0; font-size: .84rem; color: var(--zk-ink); }
+.lead__meta {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+ margin: 0 0 22px;
+}
+
+.lead__meta div {
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+ padding: 9px 16px;
+ border-radius: var(--r-md);
+ background: var(--zk-white);
+ border: 1px solid var(--zk-line);
+ box-shadow: var(--sh-xs);
+}
+
+.lead__meta dt {
+ font-size: 0.6rem;
+ font-weight: 500;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ color: var(--zk-grey);
+}
+
+.lead__meta dd {
+ margin: 0;
+ font-size: 0.85rem;
+ color: var(--zk-ink);
+}
+
+.lead__meta--money {
+ border-color: var(--zk-blue-light) !important;
+ background: var(--zk-tint-blue) !important;
+}
+
+.lead__meta--money dd {
+ font-size: 1rem;
+ font-weight: 500;
+ color: var(--zk-blue-dark);
+ font-variant-numeric: tabular-nums;
+}
| Customer | Channel | +Product | Renewal due | Premium | +Attribution | Added | + |
|---|---|---|---|---|---|---|---|
| {r.customer_name || '—'} {r.entity_name || ''} |
+ {ch.label} | +{r.product_line === 'motor' ? 'Motor' : 'SME Package'} | +
+ {exp
+ ? <>{exp.label}
+ {exp.on}
+ : —}
+ |
+ {r.quoted_premium ? Number(r.quoted_premium).toLocaleString('en-IN') : '—'} | ++ {r.attribution_status === 'contested' + ? Contested + : {r.attribution_status || '—'}} + | +{add.abs} {add.rel} |
+ + Open + | +