{/* Greeting + headline — plain text on the page background. Bobby
2026-05-06: "Lets get rid of the yellow and purple backgrounds.
instead make the 4 cards background yellow or purple." */}
{/* Bobby 2026-05-12: derive the quarter label from score.qStart
(Q2 2026 was hardcoded). Falls back to "this quarter" if the
calc didn't return a window. */}
{(() => null)()}
{(() => {
const qLabel = (() => {
if (!score.qStart) return 'this quarter';
const [yy, mm] = String(score.qStart).split('-').map(Number);
const qn = Math.floor(((mm || 1) - 1) / 3) + 1;
return `Q${qn} ${yy}`;
})();
if (projected > 0) {
return <>You're on track for {CABT_fmtMoney(projected)} this quarter.;
}
if (!score.totalPot || score.totalPot <= 0) {
return <>Bonus pot for {qLabel} isn't set yet. Admin → Quarter inputs.;
}
if (!score.mrrShare || score.mrrShare <= 0) {
return <>No bonus-eligible MRR on your book yet — log monthly metrics to qualify.;
}
if (!score.composite || score.composite <= 0) {
return <>Projected payout: $0 — composite at zero. Log data to lift Performance / Growth.;
}
return <>Projected payout: $0 this quarter.;
})()}
{/* Score cards — each card carries the brand color (yellow or navy
per active theme). Number lives inside the ring; label sits OUTSIDE
below the ring so it can't overlap the stroke. Bobby 2026-05-06:
"purple bg has white letters; yellow bg has black letters; fix the
formatting so letters do not overlap the circle graphs." Both rules
satisfied via theme.accentInk + label-outside-ring layout. */}
{/* Book health chips — 4 buckets so the counts add up to the full
client total. Bobby 2026-05-04: "On track / Watch / At risk only
have 1, 1, 5 but there are about 50 active accounts." Clients
with no scoreable data this quarter were silently dropping into
the gray bucket and disappearing from the chip row. Now they
surface as "No data — needs logging" so the math is transparent. */}
);
}
function ClientRow({ client, sub, lastMetric, needsData, status, theme, onClick, isLast, excluded, missingInfo, missingCount }) {
const score = sub.composite;
return (
);
}
// ── CA Profile / Me tab ────────────────────────────────────────────────────
// Shown when the user taps the "Me" tab in the floating nav. Displays a
// concise summary of the signed-in CA: avatar, name, role badge, email, a
// few book stats, and a sign-out button.
function CAProfile({ state, ca, theme, navigate, profile, onSignOut }) {
// The active CA might come from local state.cas (demo) or from the joined
// Supabase profile. Prefer the live profile if present for name/email.
const displayName = (profile && (profile.display_name || profile.displayName)) || (ca && ca.name) || 'You';
const email = (profile && profile.email) || (ca && ca.email) || '';
const role = (profile && profile.role) || 'ca';
const initials = (displayName || 'YOU').split(/\s+/).map(s => s[0]).slice(0, 2).join('').toUpperCase();
// Book stats (only meaningful for CAs with assigned clients).
// Bobby 2026-05-04: was using snake_case `cancel_date` here while the API
// serves camelCase `cancelDate`, so the !cancelled filter was a no-op and
// the count included cancelled clients. Use cancelDate.
const myClients = ca ? (state.clients || []).filter(c => c.assignedCA === ca.id && !c.cancelDate) : [];
const totalRetainer = myClients.reduce((s, c) => s + (c.monthlyRetainer || c.monthly_retainer || 0), 0);
const recentSurveys = ca ? (state.surveys || []).filter(s => s.caId === ca.id || s.ca_id === ca.id).length : 0;
const roleLabel = (typeof CABT_roleLabel === 'function')
? CABT_roleLabel(role, profile && profile.sales_role)
: role;
return (
{/* Header card with avatar + name + role */}
{initials}
{displayName}
{email}
{roleLabel}
{ca && ca.id && (
{ca.id}
)}
{/* Stats grid — only meaningful when CA has a book */}
{ca && (