} title={e.consultant} badges={ {e.sentiment.label} PO {PO_LABEL[e.po].toLowerCase()} } meta={{e.role} · (client ? navigate('client/' + client.id) : null)}>{e.client} · {e.location}} /> {program ? (

navigate('engagement/' + program.id))}> hub

Part of {program.name}

Managed service · {program.team.length} consultants · {program.contract.tcv} TCV · health {program.health.score}

{program.health.tone === 'success' ? 'Healthy' : 'At risk'} chevron_right

) : null}

{tab === 'overview' ? ( {/* PO burn + economics */}

Purchase order burn {e.poBurn}% consumed · {daysLabel}% remaining

{C ? : null}

{[['Bill rate', '$' + e.bill + '/hr'], ['Pay rate', '$' + e.pay + '/hr'], ['Margin', m + '%'], ['Annual value', e.renewalValue]].map(([k, v], i) => (

{k}

{v}

))}

{/* Compact time summary (daily rhythm) - opens the Timesheet tab */} {tt && cc ? (

setTab('time')} onKeyDown={(ev) => { if (ev.key === 'Enter' || ev.key === ' ') { ev.preventDefault(); setTab('time'); } }}>

Time entry {TS_LABEL[tt.status] || tt.status}

{cc.worked}h

this week

{cc.days.map((d, i) => (

{d.worked ? (

{d.dt ? : null} {d.ot ? : null} {d.reg ? : null}

) :

}

{(D.dayNames[i] || ' ')[0]}

))}

{tsumBreakdown ? (

{(D.payCats || []).map((k) => { const h = cc.cats[k.id]; if (!h) return null; return {k.abbr} {h}h; })}

) : null}

${Math.round(cc.billings).toLocaleString()} billed ${Math.round(cc.margin).toLocaleString()} margin ${Math.round(cc.effBill)}/hr eff

{tsumAppr} Open timesheet arrow_forward

) : null} {/* Renewal status */} {e.renewal !== 'Not due' ? (

Renewal {e.escalated ? 'Escalated' : e.renewal}

Extension value {e.renewalValue} Likelihood {e.extensionPct}% showToast('Renewal email drafted to ' + e.sponsor + ' - review in Approvals', 'Open approvals', () => navigate('approvals'))}>Draft renewal

) : null} {/* Redeploy options */} {redeployMatches.length ? (

Redeploy options matched to {e.consultant.split(' ')[0]}’s skills before roll-off

{redeployMatches.map((rj) => ( ))}

) : null} {/* Care timeline - one merged activity feed incl. this consultant's own notes */}

Care & history Add note

) : null} {tab === 'time' ? : null} {tab === 'casestudy' ? (

Case study {caseStudy ? navigate('casestudies')}>All case studies → : null}

{caseStudy && CaseStudyCard ? : (

auto_stories

No case study yet

{e.sentiment.tone === 'danger' ? 'Resolve the at-risk signals first, then capture the turnaround.' : 'ELEV8 can draft one from this engagement’s history and results.'}

showToast('ELEV8 drafted a case study for ' + e.consultant + ' - review in Approvals', 'Open approvals', () => navigate('approvals'))}>Draft with AI

)}

) : null}

{/* Right rail */}

Assignment

Sponsor{e.sponsor || '-'}

Hours/wk{e.hoursWk}

{payRule ?

Pay rule{payRule.label}

: null} {owner ? (

Owner {owner.name} {ownerInfo.orphaned ? ( Left ) : null}

) : null} {canReassign ? (

setReassignOpen(true)}>Reassign owner

) : null}

Contract

Started{e.start}

Tenure{e.tenure}

Ends{e.ends}

Skills

{client ? (

CSM

) : null}

{reassignOpen ? setReassignOpen(false)} /> : null} ); } /* ============================== RATE LIBRARY ============================== */ /* Rate library - delivery-geo aware (US onshore / Mexico nearshore / India offshore). Geo series use the categorical --ui-cat-* tokens, NOT status colors: geography is a category, and status colors stay reserved for actual health/risk semantics. */ const RL_GEOS = [ { id: 'US', label: 'US', c: 'var(--ui-cat-1-text)', bg: 'var(--ui-cat-1-bg)' }, { id: 'Mexico', label: 'Mexico', c: 'var(--ui-cat-6-text)', bg: 'var(--ui-cat-6-bg)' }, { id: 'India', label: 'India', c: 'var(--ui-cat-3-text)', bg: 'var(--ui-cat-3-bg)' }, ]; const rlMedian = (arr) => { if (!arr.length) return 0; const s = arr.slice().sort((a, b) => a - b); const m = Math.floor(s.length / 2); return s.length % 2 ? s[m] : Math.round((s[m - 1] + s[m]) / 2); }; /* YoY: latest quarter vs the same quarter a year earlier (4 back). */ const rlYoy = (hist) => { if (!hist || hist.length < 5) return 0; const prev = hist[hist.length - 5]; return prev ? Math.round(((hist[hist.length - 1] - prev) / prev) * 100) : 0; }; function RlGeoChip({ geo }) { const g = RL_GEOS.find((x) => x.id === geo) || RL_GEOS[0]; return {g.label}; } /* The living layer: observed bill rates from the ACTUAL book - active engagements whose role matches the card's family (US delivery today). Re-derives on store changes, so the library reads as a living view of what we really bill, not a static list. */ const RL_FAMILY = { 'Senior Java Developer': /java/i, 'Cloud Security Engineer': /security/i, 'Data Engineer': /data engineer/i, 'Data Analyst': /data analyst/i, 'ServiceNow Developer': /servicenow dev/i, 'ServiceNow Admin': /servicenow admin/i, 'Salesforce Administrator': /salesforce admin/i, 'QA Automation Engineer': /qa/i, 'Scrum Master': /scrum/i, }; function rlObserved(role) { const rx = RL_FAMILY[role]; if (!rx) return null; const bills = ((window.E8DATA && window.E8DATA.engagements) || []).filter((e) => rx.test(e.role || '') && e.bill).map((e) => e.bill); if (!bills.length) return null; return { n: bills.length, min: Math.min.apply(null, bills), max: Math.max.apply(null, bills), med: rlMedian(bills) }; } /* Where the card sits inside the market band: p25-p75 range, median tick, card-rate dot, and the delta vs median. Under p25 = leaving money on the table; over p75 = premium. */ function RlBandBar({ market, bill }) { if (!market) return —; const lo = Math.min(market.p25, bill) * 0.92, hi = Math.max(market.p75, bill) * 1.06; const pct = (v) => Math.max(0, Math.min(100, Math.round(((v - lo) / (hi - lo || 1)) * 100))); const delta = Math.round(((bill - market.p50) / market.p50) * 100); const under = bill < market.p25, over = bill > market.p75; const tone = under ? 'var(--ui-warning-text)' : over ? 'var(--ui-accent)' : 'var(--ui-success-text)'; return ( 0 ? '+' : '') + delta + '% vs median'}> {delta > 0 ? '+' : ''}{delta}% ); } /* Median bill by quarter, one line per geo. Lines only in the SVG (labels live in HTML so nothing stretches); the legend carries current values + YoY. Dims non-active geos. */ function RlTrendChart({ histByGeo, quarters, activeGeo }) { const W = 600, H = 150, pad = 8; const all = RL_GEOS.flatMap((g) => histByGeo[g.id] || []).filter((v) => v > 0); if (!all.length) return null; const max = Math.max.apply(null, all), min = Math.min.apply(null, all); const rng = (max - min) || 1; const x = (i) => pad + (i / (quarters.length - 1)) * (W - pad * 2); const y = (v) => H - pad - ((v - min) / rng) * (H - pad * 2); return (
{RL_GEOS.map((g) => { const data = histByGeo[g.id] || []; const cur = data[data.length - 1] || 0; const yoy = data.length > 4 && data[data.length - 5] ? Math.round(((cur - data[data.length - 5]) / data[data.length - 5]) * 100) : 0; const dim = activeGeo !== 'all' && activeGeo !== g.id; return ( {g.label} ${cur} 0 ? 'var(--ui-success-text)' : 'var(--ui-text-tertiary)' }}>{yoy > 0 ? '+' : ''}{yoy}% YoY ); })}
); } function RateLibraryScreen() { const D = window.E8DATA; const { showToast, density } = React.useContext(window.E8Ctx); const [q, setQ] = React.useState(''); const [geo, setGeo] = React.useState('all'); /* Living library: observed book rates re-derive when engagements change. */ const [, setTick] = React.useState(0); React.useEffect(() => (window.E8Events ? window.E8Events.subscribe(['store:changed'], () => setTick((t) => t + 1)) : undefined), []); const margin = (r) => Math.round(((r.bill - r.pay) / r.bill) * 100); const ql = q.trim().toLowerCase(); /* search narrows everything; the geo tab narrows tiles + table only - the trend chart and benchmark keep all three geos visible (dimmed) so the comparison never disappears. */ const searched = D.rates.filter((r) => !ql || [r.role, r.skill, r.client, r.region, r.geo].join(' ').toLowerCase().includes(ql)); const rows = searched.filter((r) => geo === 'all' || r.geo === geo).map((r, i) => ({ ...r, id: 'rate-' + r.geo + '-' + i })); const geoCount = (g) => searched.filter((r) => r.geo === g).length; const medians = {}; RL_GEOS.forEach((g) => { medians[g.id] = rlMedian(searched.filter((r) => r.geo === g.id).map((r) => r.bill)); }); const histByGeo = {}; RL_GEOS.forEach((g) => { const set = searched.filter((r) => r.geo === g.id && r.hist); histByGeo[g.id] = (D.rateQuarters || []).map((_, i) => rlMedian(set.map((r) => r.hist[i]))); }); const avgMargin = rows.length ? Math.round(rows.reduce((n, r) => n + margin(r), 0) / rows.length) : 0; const usMed = medians.US || 0; const deltaVs = (g) => (usMed && medians[g]) ? Math.round(((medians[g] - usMed) / usMed) * 100) : 0; return ( Export New rate } />

{/* Search + geo filter */}
setQ(e.target.value)} placeholder="Search role, skill, client, market…" /> ({ id: g.id, label: g.label, count: geoCount(g.id) })))} active={geo} onChange={setGeo} />
{/* Vital signs - react to the current filter */}
= 28 ? 'success' : 'warning'} />
{/* Trends + geo benchmark */}

Median bill rate · 8 quarters {ql ? filtered: “{q.trim()}” : null} market bands · {D.ratesAsOf}

Geo benchmark · median bill
{RL_GEOS.map((g) => { const med = medians[g.id]; const dim = geo !== 'all' && geo !== g.id; return (
{med ? '$' + med + '/hr' : '—'} {g.id === 'US' ? 'anchor' : (med && usMed ? deltaVs(g.id) + '% vs US' : '')}
); })}
Blend example: 1 US lead + 2 nearshore ≈ ${usMed && medians.Mexico ? Math.round((usMed + 2 * medians.Mexico) / 3) : '—'}/hr blended vs ${usMed || '—'} all-onshore.

{/* Rate cards */} r.role, render: (r) => ( {r.role} {r.skill} · {r.type} ) }, { key: 'geo', label: 'Geo', sortable: true, sortValue: (r) => r.geo, render: (r) => ( {r.region} ) }, { key: 'client', label: 'Client', sortable: true, sortValue: (r) => r.client, render: (r) => r.client === 'Market' ? Market : r.client }, { key: 'bill', label: 'Bill', num: true, sortable: true, sortValue: (r) => r.bill, render: (r) => { const ob = r.geo === 'US' ? rlObserved(r.role) : null; return ( ${r.bill}/hr {ob ? 1 ? 's' : '') + ' in the book'}>book {ob.n > 1 ? '$' + ob.min + '–' + ob.max : '$' + ob.med} · n{ob.n} : null} ); } }, { key: 'pay', label: 'Pay', num: true, sortable: true, sortValue: (r) => r.pay, render: (r) => ${r.pay}/hr }, { key: 'margin', label: 'Margin', num: true, sortable: true, sortValue: (r) => margin(r), render: (r) => { const m = margin(r); return = 28 ? 'success' : m >= 22 ? 'warning' : 'danger'}>{m}%; } }, { key: 'market', label: 'vs market', sortable: true, sortValue: (r) => r.market ? (r.bill - r.market.p50) / r.market.p50 : -99, render: (r) => }, { key: 'trend', label: 'Trend · YoY', render: (r) => { const yy = rlYoy(r.hist); return ( {window.E8Charts ? 1 ? 'up' : 'flat'} /> : null} 1 ? 'var(--ui-success-text)' : 'var(--ui-text-tertiary)' }}>{yy > 0 ? '+' : ''}{yy}% ); } }, { key: 'updated', label: 'Updated', render: (r) => {r.updated} }, ]} mobileCard={(r) => { const m = margin(r); const yy = rlYoy(r.hist); const ob = r.geo === 'US' ? rlObserved(r.role) : null; const mk = r.market; const delta = mk ? Math.round(((r.bill - mk.p50) / mk.p50) * 100) : null; return (

{r.role}

{r.skill} · {r.type} · {r.region}{r.client !== 'Market' ? ' · ' + r.client : ''}

${r.bill}/hr ${r.pay}/hr pay = 28 ? 'success' : m >= 22 ? 'warning' : 'danger'}>{m}% {window.E8Charts ? 1 ? 'up' : 'flat'} /> : null} 1 ? 'var(--ui-success-text)' : 'var(--ui-text-tertiary)' }}>{yy > 0 ? '+' : ''}{yy}%
{mk ? (
Market ${mk.p25}–${mk.p75} · mk.p75 ? 'var(--ui-accent)' : 'var(--ui-success-text)' }}>{delta > 0 ? '+' : ''}{delta}% vs median {ob ? · book {ob.n > 1 ? '$' + ob.min + '–' + ob.max : '$' + ob.med} (n{ob.n}) : null}
) : null}
Updated {r.updated} {r.client === 'Market' ? 'Market benchmark' : 'Client rate · ' + r.client}

); }} rows={rows} empty={
{ setQ(''); setGeo('all'); }}>Clear filters} />
} rowActions={(r) => showToast('Rate applied to a new job')}>Use} />

); } /* ============================== AUDIT LOG ============================== */ /* R78: the log is live - E8Audit entries (queue decisions, agent runs, on-device AI calls) merge ahead of the seeded history in the same row shape the screen always rendered. */ function liveAuditRows() { const fmt = (iso) => { try { const d = new Date(iso); const t = d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }).toLowerCase(); return (d.toDateString() === new Date().toDateString() ? 'Today · ' : d.toLocaleDateString([], { month: 'short', day: 'numeric' }) + ' · ') + t; } catch (err) { return ''; } }; return (window.E8Audit ? window.E8Audit.list() : []).map((e) => ({ id: e.id, when: fmt(e.at), actor: e.agent, ai: e.prov !== 'human', prov: e.prov, action: e.action, target: e.target || '', targetTo: e.route, })); } function AuditLogScreen() { const D = window.E8DATA; const { showToast } = React.useContext(window.E8Ctx); const [filter, setFilter] = React.useState('all'); const [agentQ, setAgentQ] = React.useState(() => (parseHash().query || {}).agent || null); React.useEffect(() => { const fn = () => setAgentQ((parseHash().query || {}).agent || null); window.addEventListener('hashchange', fn); return () => window.removeEventListener('hashchange', fn); }, []); const [live, setLive] = React.useState(liveAuditRows); React.useEffect(() => (window.E8Events ? window.E8Events.subscribe(['audit:logged'], () => setLive(liveAuditRows())) : undefined), []); const all = live.concat(D.audit); const rows = all.filter((a) => (filter === 'all' || (filter === 'ai' ? a.ai : !a.ai)) && (!agentQ || a.actor === agentQ)); return ( showToast('Audit log exported')}>Export} />

a.ai).length }, { id: 'human', label: 'People', count: all.filter((a) => !a.ai).length }]} active={filter} onChange={setFilter} /> {agentQ ? : null} Every consequential action - human or agent - is logged with provenance and is reversible.

{rows.map((a) => (
{a.action} {' '} {a.targetTo ? navigate(a.targetTo)}>{a.target} : {a.target}} {a.when}
))} {!rows.length ?
No matching entries yet.
: null}

); } /* ============================== CSMs ============================== */ /* Book of business for a CSM, derived live from the clients they own. */ function csmBook(name) { const D = window.E8DATA; const book = D.clients.filter((c) => c.csm === name); return { book, clients: book.length, jobs: book.reduce((n, c) => n + c.openJobs, 0), consultants: book.reduce((n, c) => n + c.consultants, 0), renewals: book.reduce((n, c) => n + c.renewals, 0), atRisk: book.filter((c) => c.health.tone === 'danger' || c.health.tone === 'warning').length, }; } function CsmCard({ csm, onOpen }) { const C = window.E8Charts; const b = csmBook(csm.name); return ( ); } function CsmsScreen() { const D = window.E8DATA; const { showToast } = React.useContext(window.E8Ctx); const csms = D.csms; const totalGm = csms.reduce((n, c) => n + parseFloat(String(c.gmOwned).replace(/[^0-9.]/g, '')), 0); const avgRenewal = csms.length ? Math.round((csms.reduce((n, c) => n + c.renewalRate, 0) / csms.length) * 100) : 0; const avgCsat = csms.length ? (csms.reduce((n, c) => n + c.csat, 0) / csms.length).toFixed(1) : '0.0'; const totalAtRisk = csms.reduce((n, c) => n + csmBook(c.name).atRisk, 0); return ( Export Add CSM } />

Client success managers

Who owns each relationship and how their book is performing

2 ? 'down' : 'flat'} spark={[2, 3, 3, 2, 3, totalAtRisk]} />

{csms.map((csm) => navigate('csm/' + csm.id)} />)}

); } /* ---------- CSM workspace ---------- */ function CsmDetailScreen({ id }) { const D = window.E8DATA; const C = window.E8Charts; const { showToast, density } = React.useContext(window.E8Ctx); const isMobile = useIsMobile(); const csm = D.csms.find((x) => x.id === id); if (!csm) { return (
navigate('csms')}>Back to client success} />
); } const b = csmBook(csm.name); const renewalsOwned = D.engagements.filter((e) => { const cl = D.clients.find((c) => c.name === e.client); return cl && cl.csm === csm.name && e.renewal !== 'Not due'; }); const watchList = b.book.filter((c) => c.health.tone === 'danger' || c.health.tone === 'warning'); return ( showToast('1:1 agenda drafted for ' + csm.name)}>Draft 1:1 navigate('clients')}>View book in Clients } />

} title={csm.name} badges={ {csm.title} {b.atRisk ? {b.atRisk} to watch : Book healthy} } meta={{csm.region} · {csm.tenure} at Stand8 · {csm.wins}} />

{/* Performance */}

Gross margin under management {csm.gmOwned} · trailing 6 months
{C ? : null}
{[['Renewal rate', Math.round(csm.renewalRate * 100) + '%'], ['CSAT', csm.csat + '/5'], ['NPS', String(csm.nps)], ['Avg response', csm.avgResponse]].map(([k, v]) => (

{k}

{v}

))}

{/* Accounts to watch */} {watchList.length ? (

Accounts to watch

{watchList.map((c) => ( ))}

) : null} {/* Book */}

Book of business · {b.clients} clients
navigate('client/' + c.id)} registry={[ { key: 'name', label: 'Client', render: (c) => }, { key: 'health', label: 'Health', render: (c) => {c.health.label} }, { key: 'openJobs', label: 'Open jobs', num: true }, { key: 'consultants', label: 'On billing', num: true }, { key: 'renewals', label: 'Renewals 90d', num: true, render: (c) => c.renewals || - }, ]} rows={b.book} />
{/* Renewals owned */} {renewalsOwned.length ? (

Renewals in flight · {renewalsOwned.length}
{isMobile ? (
{renewalsOwned.map((e) => )}
) : ( navigate('consultant/' + e.cid)} registry={[ { key: 'consultant', label: 'Consultant', render: (e) => }, { key: 'value', label: 'Value', num: true, render: (e) => {e.renewalValue} }, { key: 'stage', label: 'Stage', width: 200, render: (e) => }, { key: 'status', label: 'Status', render: (e) => {e.escalated ? 'Escalated' : e.renewal} }, ]} rows={renewalsOwned} /> )}
) : null}
{/* Right rail */}

Snapshot

Region{csm.region}

Tenure{csm.tenure}

GM owned{csm.gmOwned}

Wins{csm.wins}

Capacity{csm.capacity}%

Industry focus

{csm.focus.map((f) => {f})}

About

{csm.bio}

); } /* ============================== SYNC QUEUE ============================== */ const SYNC_T = { Synced: 'success', Pending: 'info', Error: 'danger' }; function SyncQueueScreen() { const D = window.E8DATA; const { showToast, density } = React.useContext(window.E8Ctx); const counts = { Synced: 0, Pending: 0, Error: 0 }; D.syncQueue.forEach((s) => { counts[s.status] += 1; }); return ( showToast('Forcing a full re-sync with Bullhorn…')}>Re-sync all} />

{counts.Synced} synced {counts.Pending} pending {counts.Error} error Two-way sync with Bullhorn · last full sync 24 min ago
( {s.record} {s.note ? {s.note} : null} ) }, { key: 'type', label: 'Type', secondary: true }, { key: 'system', label: 'System' }, { key: 'status', label: 'Status', render: (s) => {s.status} }, { key: 'when', label: 'When', secondary: true, render: (s) => {s.when} }, ]} rows={D.syncQueue} rowActions={(s) => s.status === 'Error' ? showToast('Retrying sync for ' + s.record)}>Retry : s.status === 'Pending' ? showToast('Pushed ' + s.record + ' now')}>Sync now : showToast('Sync history opens here')}>History} />

); } /* ============================== COMMISSIONS / SALES ============================== */ function CommissionsScreen() { const D = window.E8DATA; const E = window.E8Econ; const { showToast } = React.useContext(window.E8Ctx); const [, setTick] = React.useState(0); React.useEffect(() => (window.E8Events ? window.E8Events.subscribe(['timesheet:decided'], () => setTick((t) => t + 1)) : undefined), []); const reps = D.reps || []; const summaries = reps.map((r) => E.repSummary(r.id)).sort((a, b) => b.attainment - a.attainment); const [selId, setSelId] = React.useState((summaries[0] && summaries[0].rep.id) || null); const [proj, setProj] = React.useState(false); const sel = summaries.find((s) => s.rep.id === selId) || summaries[0]; /* Empty-data guard: no reps means no summaries and nothing to select. */ if (!summaries.length) { return (

); } const money = (n) => (Math.abs(n) >= 1000 ? '$' + (n / 1000).toFixed(1) + 'K' : '$' + Math.round(n).toLocaleString()); const pct = (x) => Math.round(x * 100) + '%'; const bookedH = (s) => s.perCon.reduce((n, c) => n + c.booked, 0); const pendH = (s) => s.perCon.reduce((n, c) => n + c.pending, 0); const desk = summaries.reduce((a, s) => ({ billings: a.billings + s.billings, hours: a.hours + bookedH(s), pendHours: a.pendHours + pendH(s), marginApproved: a.marginApproved + s.marginApproved, marginPending: a.marginPending + s.marginPending, commApproved: a.commApproved + s.commApproved, commProjected: a.commProjected + s.commProjected, pendingCount: a.pendingCount + s.perCon.filter((c) => c.pending > 0).length, }), { billings: 0, hours: 0, pendHours: 0, marginApproved: 0, marginPending: 0, commApproved: 0, commProjected: 0, pendingCount: 0 }); const chain = [ { k: 'Approved hours', v: desk.hours.toLocaleString() + 'h', sub: desk.pendHours ? '+' + desk.pendHours + 'h pending' : 'all in', icon: 'schedule' }, { k: 'Billings', v: money(desk.billings), sub: 'hours x bill rate', icon: 'receipt_long' }, { k: 'Gross margin', v: money(desk.marginApproved), sub: desk.marginPending ? '+' + money(desk.marginPending) + ' pending' : 'the spread', icon: 'savings' }, { k: 'Rep commission', v: money(desk.commApproved), sub: desk.commProjected > desk.commApproved ? '+' + money(desk.commProjected - desk.commApproved) + ' if approved' : 'earned', icon: 'paid' }, ]; return ( Include pending setProj(!proj)} /> showToast('Commission statement exported (prototype)')}>Export } />

Commissions

Timesheets to billings to gross margin to rep commission · this cycle

{chain.map((s, i) => (
{s.icon}
{s.v}

{s.k}

{s.sub}

{i < chain.length - 1 ? arrow_forward : null} ))}
{desk.pendingCount ? (
pending_actions {desk.pendingCount} timesheets awaiting approval = {money(desk.marginPending)} more margin and {money(desk.commProjected - desk.commApproved)} more commission across the team. { /* R78: real approvals - write the same e8-ts-* keys TimeHub does, so E8Econ books them. */ const pending = summaries.flatMap((sm) => sm.perCon.filter((c) => c.pending > 0).map((c) => c.cid)); const prevs = []; const gain = money(desk.commProjected - desk.commApproved); pending.forEach((cid) => { let raw = null; try { raw = localStorage.getItem('e8-ts-' + cid); } catch (err) {} prevs.push([cid, raw]); const base = raw ? JSON.parse(raw) : JSON.parse(JSON.stringify(((D.timesheets || {})[cid] || {}).current || {})); base.status = 'approved'; base.approvedOn = (D.tsWeeks || []).slice(-1)[0] || 'This week'; try { localStorage.setItem('e8-ts-' + cid, JSON.stringify(base)); } catch (err) {} if (window.E8Audit) window.E8Audit.log({ agent: 'You', prov: 'human', action: 'Approved timesheet', target: cid.replace('cons-', ''), route: 'consultant/' + cid }); }); if (window.E8Events) window.E8Events.emit('timesheet:decided', { cids: pending, status: 'approved' }); showToast('Approved ' + pending.length + ' timesheets · +' + gain + ' commission booked', 'Undo', () => { prevs.forEach(([cid, raw]) => { try { raw == null ? localStorage.removeItem('e8-ts-' + cid) : localStorage.setItem('e8-ts-' + cid, raw); } catch (err) {} }); if (window.E8Events) window.E8Events.emit('timesheet:decided', { cids: pending, status: 'undone' }); }); }}>Approve all
) : null}
By salesperson · attainment to quota{proj ? ' (incl. pending)' : ''}

{summaries.map((s) => { const att = proj ? s.attainmentProjected : s.attainment; const comm = proj ? s.commProjected : s.commApproved; return ( ); })}
{sel ? (

{sel.rep.name} · book of business

{sel.perCon.map((c) => { const tier = E.tierRateAt(sel.marginApproved, sel.rep); return (
navigate('consultant/' + c.cid))}>

{c.name}

{c.role} · {c.client}

Margin{money(c.margin)}

Commission{money(c.margin * tier)}

{c.pending ? +{money(c.pendingMargin * tier)} pending : approved}

); })}

{sel.rep.name.split(' ')[0]} is on the {pct(E.tierRateAt(proj ? sel.marginProjected : sel.marginApproved, sel.rep))} tier ({sel.rep.tiers.map((t) => Math.round(t.rate * 100) + '%').join(' / ')} at {money(sel.rep.quota)} quota).{sel.attainmentProjected >= 1 && sel.attainment < 1 ? ' Approving the pending timesheets crosses quota into the accelerator.' : ''}

) : null}

); } /* The Time hub: a manager view aggregating every consultant's current period - the approval queue, exceptions (OT/DT/weekend/not-submitted), category mix, and rollups by SOW + work location. Reads the same localStorage the entry sheet writes, so approvals stay consistent across both surfaces. */ function TimeHub() { const D = window.E8DATA, T = window.E8Time; const { showToast } = React.useContext(window.E8Ctx); const cats = D.payCats || []; const weekLabel = (D.tsWeeks || []).slice(-1)[0] || 'This week'; const [tick, setTick] = React.useState(0); const [filter, setFilter] = React.useState('all'); const money = function (n) { return '$' + Math.round(n).toLocaleString(); }; const effCur = function (cid) { try { const s = localStorage.getItem('e8-ts-' + cid); if (s) return JSON.parse(s); } catch (err) {} const sh = (D.timesheets || {})[cid]; return sh ? sh.current : null; }; const rows = !T ? [] : (D.engagements || []).filter(function (e) { return (D.timesheets || {})[e.cid]; }).map(function (e) { const sh = (D.timesheets || {})[e.cid]; const cc = T.calcSheet(e, { workState: sh.workState, prior: sh.prior, current: effCur(e.cid) }); return { e: e, cc: cc, c: cc.current }; }); const agg = { worked: 0, billable: 0, billings: 0, margin: 0, pendCount: 0, pendBill: 0, pendMargin: 0 }; const catTot = { reg: 0, ot: 0, dt: 0, oncall: 0, hol: 0, pto: 0 }; rows.forEach(function (r) { const c = r.c; agg.worked += c.worked; agg.billable += c.billableHours; agg.billings += c.billings; agg.margin += c.margin; Object.keys(catTot).forEach(function (k) { catTot[k] += c.cats[k] || 0; }); if (c.status === 'submitted') { agg.pendCount++; agg.pendBill += c.billings; agg.pendMargin += c.margin; } }); const otdt = catTot.ot + catTot.dt; const totalCatH = Object.keys(catTot).reduce(function (s, k) { return s + catTot[k]; }, 0) || 1; const exceptions = rows.filter(function (r) { return r.c.flags.some(function (f) { return f.k === 'ot' || f.k === 'dt' || f.k === 'weekend'; }) || r.c.status === 'pending'; }); const submitted = rows.filter(function (r) { return r.c.status === 'submitted'; }); const projMap = {}; rows.forEach(function (r) { r.c.byProject.forEach(function (p) { const key = p.projectId || '_staff'; if (!projMap[key]) projMap[key] = { projectId: p.projectId, hours: 0, billings: 0 }; projMap[key].hours += p.reg + p.ot + p.dt + (p.oncall || 0); projMap[key].billings += p.billings; }); }); const projRoll = Object.keys(projMap).map(function (k) { return projMap[k]; }).sort(function (a, b) { return b.billings - a.billings; }); const locMap = {}; rows.forEach(function (r) { const st = r.cc.state; if (!locMap[st]) locMap[st] = { state: st, label: r.cc.rule.label, daily: !!r.cc.rule.daily, hours: 0, ot: 0, dt: 0, n: 0 }; locMap[st].hours += r.c.worked; locMap[st].ot += r.c.cats.ot; locMap[st].dt += r.c.cats.dt; locMap[st].n++; }); const locRoll = Object.keys(locMap).map(function (k) { return locMap[k]; }).sort(function (a, b) { return b.hours - a.hours; }); const setStatus = function (cid, status) { const cur = effCur(cid) || {}; const next = Object.assign({}, cur, { status: status, approvedOn: status === 'approved' ? weekLabel : cur.approvedOn, submittedOn: status === 'pending' ? null : cur.submittedOn }); try { localStorage.setItem('e8-ts-' + cid, JSON.stringify(next)); } catch (err) {} }; const bump = function () { setTick(function (t) { return t + 1; }); }; /* R78: decisions are real now - E8Econ reads the same e8-ts-* keys, so approving moves billings/commissions. Every decision hits the bus + audit log, and Undo restores the sheet. */ const snapTs = function (cid) { try { return localStorage.getItem('e8-ts-' + cid); } catch (err) { return null; } }; const restoreTs = function (cid, raw) { try { if (raw == null) localStorage.removeItem('e8-ts-' + cid); else localStorage.setItem('e8-ts-' + cid, raw); } catch (err) {} bump(); if (window.E8Events) window.E8Events.emit('timesheet:decided', { cid: cid, status: 'undone' }); }; const record = function (r, status, action) { if (window.E8Audit) window.E8Audit.log({ agent: 'You', prov: 'human', action: action, target: r.e.consultant + ' · ' + money(r.c.billings), route: 'consultant/' + r.e.cid }); if (window.E8Events) window.E8Events.emit('timesheet:decided', { cid: r.e.cid, status: status, consultant: r.e.consultant, billings: r.c.billings }); }; const approve = function (r) { const prev = snapTs(r.e.cid); setStatus(r.e.cid, 'approved'); bump(); record(r, 'approved', 'Approved timesheet'); showToast('Approved ' + r.e.consultant + ' · ' + money(r.c.billings) + ' booked', 'Undo', function () { restoreTs(r.e.cid, prev); }); }; const reject = function (r) { const prev = snapTs(r.e.cid); setStatus(r.e.cid, 'pending'); bump(); record(r, 'returned', 'Returned timesheet for changes'); showToast('Returned to ' + r.e.consultant + ' for changes', 'Undo', function () { restoreTs(r.e.cid, prev); }); }; const approveAll = function () { let n = 0, b = 0; const prevs = []; submitted.forEach(function (r) { prevs.push([r.e.cid, snapTs(r.e.cid)]); setStatus(r.e.cid, 'approved'); record(r, 'approved', 'Approved timesheet'); n++; b += r.c.billings; }); bump(); showToast(n + ' timesheets approved · ' + money(b) + ' booked', 'Undo', function () { prevs.forEach(function (p) { restoreTs(p[0], p[1]); }); }); }; const STt = { draft: 'neutral', pending: 'neutral', submitted: 'warning', approved: 'success' }; const STl = { draft: 'Draft', pending: 'Not submitted', submitted: 'Submitted', approved: 'Approved' }; const order = { submitted: 0, pending: 1, draft: 2, approved: 3 }; const shown = rows.filter(function (r) { if (filter === 'all') return true; if (filter === 'submitted') return r.c.status === 'submitted'; if (filter === 'exceptions') return exceptions.indexOf(r) >= 0; return r.cc.state === filter; }).sort(function (a, b) { return (order[a.c.status] || 9) - (order[b.c.status] || 9); }); const chips = [ { id: 'all', label: 'All (' + rows.length + ')' }, { id: 'submitted', label: 'Awaiting approval (' + submitted.length + ')' }, { id: 'exceptions', label: 'Exceptions (' + exceptions.length + ')' }, ].concat(locRoll.map(function (l) { return { id: l.state, label: l.state + ' (' + l.n + ')' }; })); return ( {submitted.length ? Approve all ({submitted.length}) : null}} />

Time
Week of {weekLabel} · {rows.length} consultants · hours auto-classified by work location

Worked hours{agg.worked}h

Billable{agg.billable}h

Billings{money(agg.billings)}

Gross margin{money(agg.margin)}

OT + DT{otdt}h

Awaiting approval{agg.pendCount} · {money(agg.pendBill)}

{cats.map(function (k) { const h = catTot[k.id]; if (!h) return null; return ; })}

{cats.map(function (k) { const h = catTot[k.id]; if (!h) return null; return {k.abbr} {h}h; })}

{chips.map(function (ch) { return ; })}

{shown.length === 0 ?
No timesheets match this filter.
: shown.map(function (r) { const e = r.e, c = r.c; const proj = (c.byProject[0] && c.byProject[0].projectId) ? (D.managedEngagements || []).find(function (m) { return m.id === c.byProject[0].projectId; }) : null; return (

{e.consultant}{r.cc.rule.daily ? CA : null}

{e.role} · {proj ? proj.name : (e.client || 'Staff aug')}

{c.worked}h
{c.cats.ot ? {c.cats.ot} : null} {c.cats.dt ? {c.cats.dt} : null} {c.cats.oncall ? {c.cats.oncall} : null} {c.cats.pto ? {c.cats.pto} : null}

{money(c.billings)}
{STl[c.status]}
{c.status === 'submitted' ? ( Approve ) : }

); })}

{agg.pendCount ? (

Awaiting approval

{agg.pendCount}

{money(agg.pendBill)} billings · {money(agg.pendMargin)} margin pending
Approve all
) : null}

By SOW / project
{projRoll.map(function (p, i) { const proj = p.projectId ? (D.managedEngagements || []).find(function (m) { return m.id === p.projectId; }) : null; return
{proj ? proj.name : 'Staff aug'}{p.hours}h · {money(p.billings)}
; })}

By work location
{locRoll.map(function (l, i) { return
{l.state}{l.daily ? daily OT : {l.label}}{l.hours}h{l.ot + l.dt ? ' · ' + (l.ot + l.dt) + 'h OT/DT' : ''}
; })}

); } Object.assign(window, { ReportsScreen, ConsultantsScreen, ConsultantDetailScreen, RateLibraryScreen, AuditLogScreen, CsmsScreen, CsmDetailScreen, SyncQueueScreen, KpiCard, CommissionsScreen, TimeSheetPanel, TimeHub });