// BILLING & ANALYTICS — 18 opportunity components + 5 hubs
(function () {
const { useState, useMemo, useEffect, useRef } = React;
const T = window.ArbiterTokens;
const bl = window.__bl;
const ba = window.ba;
// ── Shared helpers ───────────────────────────────────────
function BaSubTabs({ tabs, active, onChange }) {
return (
{tabs.map(t => (
onChange(t.id)}
style={{ ...ba.subTab, ...(active === t.id ? ba.subTabActive : {}) }}>
{t.label}
))}
);
}
function TH({ children, align }) {
return {children} ;
}
function TD({ children, align, mono, color, bold }) {
return {children} ;
}
function Pill({ children, bg, color, title }) {
return {children} ;
}
function ProgressBar({ pct, color, height }) {
const clamp = Math.max(0, Math.min(100, pct));
return (
);
}
function useCrossRender(topics) {
const [, force] = React.useReducer(x => x + 1, 0);
React.useEffect(() => {
if (!window.BillingAnalyticsStore) return;
const t = Array.isArray(topics) ? topics : [topics || '*'];
const offs = t.map(x => window.BillingAnalyticsStore.bus.on(x, () => force()));
return () => offs.forEach(off => off());
}, []);
}
function Flash({ msg }) {
if (!msg) return null;
return (
{msg}
);
}
// ════════════════════════════════════════════════════════
// 1. PASSIVE TIME CAPTURE ENGINE
// ════════════════════════════════════════════════════════
function Ba1Passive() {
useCrossRender(['passive.approved', 'passive.rejected', 'passive.bulk-approved']);
const S = window.BillingAnalyticsStore;
const D = window.BILLING_ANALYTICS_DATA;
const [flash, setFlash] = useState(null);
const f = (m) => { setFlash(m); setTimeout(() => setFlash(null), 2000); };
const pending = S.passivePending();
const pendingValue = S.passivePendingValue();
return (
Pending Entries {pending.length}
Pending Hours {pending.reduce((s, e) => s + e.hours, 0).toFixed(1)}
Est. Value Recovered {bl.money(pendingValue)}
Avg Confidence {pending.length ? (pending.reduce((s, e) => s + e.confidence, 0) / pending.length * 100).toFixed(0) : '—'}%
Inferred Time Candidates · awaiting approval
{ const n = S.approveAllPassive('M. Kirkland'); f(`Approved ${n} entries · ${bl.money(pendingValue)} recovered`); }}>Approve All
Date Matter Source Signal Hours Conf Suggested Narrative Action
{S.state.passiveCapture.filter(e => e.status === 'pending').map(e => (
{e.date}
{e.matterName}
{e.source}
{e.signal}
{e.hours.toFixed(1)}
= 0.9 ? bl.emerald : bl.amber} bold>{(e.confidence * 100).toFixed(0)}%
{e.suggestedNarrative}
{ S.approvePassiveEntry(e.id, 'M. Kirkland'); f(`Approved · ${e.hours}h on ${e.matterName}`); }}>Approve
{ S.rejectPassiveEntry(e.id, 'M. Kirkland'); f('Rejected'); }}>Reject
))}
);
}
// ════════════════════════════════════════════════════════
// 2. OCG COMPLIANCE ENGINE
// ════════════════════════════════════════════════════════
function Ba2OcgCompliance() {
useCrossRender(['ocg.resolved']);
const S = window.BillingAnalyticsStore;
const [activeClient, setActiveClient] = useState('All');
const [flash, setFlash] = useState(null);
const f = (m) => { setFlash(m); setTimeout(() => setFlash(null), 2000); };
const clients = ['All', ...new Set(S.state.ocgRules.map(r => r.client))];
const rules = activeClient === 'All' ? S.state.ocgRules : S.state.ocgRules.filter(r => r.client === activeClient);
const violations = activeClient === 'All' ? S.state.ocgViolations : S.state.ocgViolations.filter(v => v.client === activeClient);
const sevColor = { critical: bl.crimson, high: bl.amber, medium: bl.slate };
return (
OCG Rules Parsed {S.state.ocgRules.length}
Clients Covered {new Set(S.state.ocgRules.map(r => r.client)).size}
Open Violations {S.ocgOpenCount()}
Value at Risk {bl.money(S.ocgOpenValue())}
{clients.map(c => (
setActiveClient(c)}
style={{ ...ba.subTab, ...(activeClient === c ? ba.subTabActive : {}) }}>{c}
))}
Parsed OCG Rules ({rules.length})
Rule Detail Severity Auto-block
{rules.map(r => (
{r.rule}{activeClient === 'All' ? r.client : ''}
{r.detail}
{r.severity.toUpperCase()} {r.autoBlock ? ON : OFF }
))}
Open Violations ({violations.filter(v => v.status === 'flagged').length})
Entry Timekeeper Violation Value Action
{violations.map(v => {
const rule = S.state.ocgRules.find(r => r.id === v.rule);
return (
{v.entryId}
{v.timekeeper}
{v.detail} {rule ? rule.rule : v.rule}
{bl.money(v.value)}
{v.status === 'resolved' ? RESOLVED : { S.resolveOcgViolation(v.id, 'write-down', 'M. Kirkland'); f(`Resolved ${v.entryId}`); }}>Write-down }
);
})}
);
}
// ════════════════════════════════════════════════════════
// 3. NARRATIVE INTELLIGENCE
// ════════════════════════════════════════════════════════
function Ba3Narrative() {
useCrossRender(['narrative.rewritten']);
const S = window.BillingAnalyticsStore;
const [flash, setFlash] = useState(null);
const f = (m) => { setFlash(m); setTimeout(() => setFlash(null), 2000); };
const sevColor = { critical: bl.crimson, high: bl.amber, medium: bl.slate };
return (
Flagged Narratives {S.state.narrativeFlags.length}
AI Rewrites Accepted {S.state.narrativeFlags.filter(n => n.accepted).length}
Projected Save (vs eBilling cuts) {bl.money(S.state.narrativeFlags.length * 1800)}
Narrative Rewrite Queue
{S.state.narrativeFlags.map(n => (
{n.entryId} {n.severity.toUpperCase()}
AI Rewrite
"{n.suggestion}"
{n.issue}
{n.accepted ?
APPLIED :
{ S.acceptNarrativeRewrite(n.id, 'M. Kirkland'); f(`Rewrite applied to ${n.entryId}`); }}>Apply }
))}
);
}
// ════════════════════════════════════════════════════════
// 4. RATE CARD ARCHITECT
// ════════════════════════════════════════════════════════
function Ba4RateCardArchitect() {
const S = window.BillingAnalyticsStore;
const [active, setActive] = useState('RC-STD-2026');
const [compare, setCompare] = useState('');
const card = S.state.rateCards.find(c => c.id === active);
const cmp = compare ? S.state.rateCards.find(c => c.id === compare) : null;
return (
Active Rate Cards {S.state.rateCards.length}
Pending Changes {S.state.rateChangeRequests.filter(r => r.status !== 'approved').length}
Impact if Approved {bl.money(S.state.rateChangeRequests.reduce((s, r) => s + r.impact, 0))}
{S.state.rateCards.map(c => (
{ setActive(c.id); setCompare(''); }} style={{ ...ba.subTab, ...(active === c.id ? ba.subTabActive : {}) }}>{c.name}
))}
setCompare(e.target.value)} style={{ ...ba.subTab, padding: '8px 10px' }}>
Compare with…
{S.state.rateCards.filter(c => c.id !== active).map(c => {c.name} )}
{card.name}
Effective {card.effective} · {card.discount ? `${(card.discount * 100).toFixed(0)}% discount` : 'Standard'}
Role Rate vs Standard
{card.tiers.map(tier => {
const std = S.state.rateCards.find(c => c.id === 'RC-STD-2026').tiers.find(t => t.role === tier.role);
const diff = std ? ((tier.rate - std.rate) / std.rate) * 100 : 0;
return (
{tier.role}
${tier.rate.toLocaleString()}/hr
{diff === 0 ? '—' : (diff > 0 ? '+' : '') + diff.toFixed(1) + '%'}
);
})}
{cmp && (
{cmp.name} Effective {cmp.effective}
Role Rate Δ vs {card.name.split(' ')[0]}
{cmp.tiers.map(tier => {
const other = card.tiers.find(t => t.role === tier.role);
const diff = other ? ((tier.rate - other.rate) / other.rate) * 100 : 0;
return (
{tier.role}
${tier.rate.toLocaleString()}/hr
{diff === 0 ? '—' : (diff > 0 ? '+' : '') + diff.toFixed(1) + '%'}
);
})}
)}
Pending Rate Change Requests
Proposal Rate Card Effective Revenue Impact Clients Status
{S.state.rateChangeRequests.map(r => (
{r.proposal}{r.proposedBy}
{r.rateCard}
{r.effective}
{bl.money(r.impact)}
{r.clientsAffected}
{r.status.toUpperCase()}
))}
);
}
// ════════════════════════════════════════════════════════
// 5. RATE RAISE SIMULATOR
// ════════════════════════════════════════════════════════
function Ba5RateRaiseSim() {
const D = window.BILLING_ANALYTICS_DATA;
const [selected, setSelected] = useState(D.rateRaiseScenarios[1].label);
const sc = D.rateRaiseScenarios.find(s => s.label === selected);
return (
{D.rateRaiseScenarios.map(s => (
setSelected(s.label)} style={{ ...ba.subTab, ...(selected === s.label ? ba.subTabActive : {}) }}>
{s.label} (+{s.raisePct}%)
))}
Proposed Raise +{sc.raisePct}%
Pushback Probability 0.3 ? bl.crimson : bl.amber }}>{(sc.pushbackProb * 100).toFixed(0)}%
Expected Realization {sc.expectedRealization}%
Net Revenue Δ (12mo) {bl.money(sc.netRevenueDelta)}
Scenario Comparison
Scenario Raise Pushback Realization Collection Lag Net Revenue Δ
{D.rateRaiseScenarios.map(s => {
const isSelected = s.label === selected;
return (
{s.label}
+{s.raisePct}%
0.3 ? bl.crimson : s.pushbackProb > 0.15 ? bl.amber : bl.emerald}>{(s.pushbackProb * 100).toFixed(0)}%
{s.expectedRealization}%
{s.collectionLagDays}d
{bl.money(s.netRevenueDelta)}
);
})}
Monte Carlo · 10,000 runs
);
}
// ════════════════════════════════════════════════════════
// 6. MATTER PRICING ENGINE
// ════════════════════════════════════════════════════════
function Ba6MatterPricing() {
const D = window.BILLING_ANALYTICS_DATA;
const [selected, setSelected] = useState(D.pricingBenchmarks[0].matterType);
const [priceIndex, setPriceIndex] = useState(1.0);
const bench = D.pricingBenchmarks.find(b => b.matterType === selected);
const priceOptions = [0.7, 0.9, 1.0, 1.15, 1.3];
const winProb = bench.winRateByPrice.find(w => w.priceIndex === priceIndex)?.winProb || 0.5;
const priceEst = bench.medianFee * priceIndex;
const expectedValue = priceEst * winProb;
return (
{D.pricingBenchmarks.map(b => (
setSelected(b.matterType)} style={{ ...ba.subTab, ...(selected === b.matterType ? ba.subTabActive : {}) }}>{b.matterType}
))}
Median Fee (P50) {bl.money(bench.medianFee)}
P25 — P75 Range {bl.money(bench.p25)}—{bl.money(bench.p75)}
Avg Duration {bench.avgDurationMos} mo
Recommended Staffing {bench.recommendedStaffing}
Price vs Win-Probability Curve
{priceOptions.map(p => (
setPriceIndex(p)} style={{ ...ba.subTab, ...(priceIndex === p ? ba.subTabActive : {}) }}>
{p === 1.0 ? 'Median' : p < 1 ? `P${Math.round(p * 100)} (-${Math.round((1 - p) * 100)}%)` : `P${Math.round(p * 100)} (+${Math.round((p - 1) * 100)}%)`}
))}
Price Point Fee Win Probability Expected Value Bar
{bench.winRateByPrice.map(w => {
const fee = bench.medianFee * w.priceIndex;
const ev = fee * w.winProb;
const isSelected = w.priceIndex === priceIndex;
return (
{w.priceIndex === 1.0 ? 'Median' : w.priceIndex < 1 ? 'Below' : 'Above'} ({(w.priceIndex * 100).toFixed(0)}%)
{bl.money(fee)}
0.7 ? bl.emerald : w.winProb > 0.5 ? bl.amber : bl.crimson}>{(w.winProb * 100).toFixed(0)}%
{bl.money(ev)}
0.7 ? bl.emerald : w.winProb > 0.5 ? bl.amber : bl.crimson} />
);
})}
Pricing Recommendation · {selected}
At {bl.money(priceEst)} , win probability is {(winProb * 100).toFixed(0)}% · Expected value {bl.money(expectedValue)} . Based on {bench.winRateByPrice.length}-point historical curve from {bench.avgDurationMos}-month matters.
);
}
// ════════════════════════════════════════════════════════
// 7. PRE-BILL COMMAND CENTER
// ════════════════════════════════════════════════════════
function Ba7PreBill() {
useCrossRender(['prebill.resolved', 'prebill.bulk-resolved']);
const S = window.BillingAnalyticsStore;
const [selected, setSelected] = useState([]);
const [flash, setFlash] = useState(null);
const f = (m) => { setFlash(m); setTimeout(() => setFlash(null), 2000); };
const open = S.state.preBillIssues.filter(i => i.status !== 'resolved');
const toggle = (id) => setSelected(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]);
const selectAll = () => setSelected(open.map(i => i.id));
const sevColor = { critical: bl.crimson, high: bl.amber, medium: bl.slate };
const byType = open.reduce((acc, i) => { acc[i.type] = (acc[i.type] || 0) + 1; return acc; }, {});
return (
Open Issues {open.length}
Value at Risk {bl.money(S.preBillOpenValue())}
Critical {open.filter(i => i.severity === 'critical').length}
Selected {selected.length}
{Object.entries(byType).map(([t, n]) => (
{t}: {n}
))}
Select All
setSelected([])}>Clear
{selected.length > 0 && (
<>
{ const n = S.bulkResolvePreBill(selected, 'approved', 'M. Kirkland'); f(`${n} issues resolved`); setSelected([]); }}>Bulk Approve ({selected.length})
{ const n = S.bulkResolvePreBill(selected, 'written-down', 'M. Kirkland'); f(`${n} issues written down`); setSelected([]); }}>Bulk Write-down
)}
);
}
// ════════════════════════════════════════════════════════
// 8. EBILLING SUPER-CONNECTOR
// ════════════════════════════════════════════════════════
function Ba8Ebilling() {
useCrossRender(['ebilling.appealed']);
const S = window.BillingAnalyticsStore;
const [flash, setFlash] = useState(null);
const f = (m) => { setFlash(m); setTimeout(() => setFlash(null), 2000); };
const statusColor = { Paid: bl.emerald, Pending: bl.slate, Reduced: bl.amber, Rejected: bl.crimson, Appealed: ba.violet };
const totalReduction = S.state.ebillingSubmissions.reduce((s, x) => s + (x.reduction || 0), 0);
const totalSubmitted = S.state.ebillingSubmissions.reduce((s, x) => s + x.amount, 0);
return (
Connected Vendors {S.state.ebillingVendors.filter(v => v.connected).length}/{S.state.ebillingVendors.length}
Submitted (QTD) {bl.money(totalSubmitted)}
Reductions {bl.money(totalReduction)}
Reduction Rate {((totalReduction / totalSubmitted) * 100).toFixed(1)}%
Vendor Connections
Vendor Client Format Status
{S.state.ebillingVendors.map(v => (
{v.name}
{v.client}
{v.format}
{v.connected ? CONNECTED : OFFLINE }
))}
Recent Submissions
Invoice Vendor Amount Reduced Status
{S.state.ebillingSubmissions.map(s => (
{s.invoice}
{s.vendor} {bl.money(s.amount)}
0 ? bl.crimson : T.color.text.tertiary}>{s.reduction > 0 ? bl.money(s.reduction) : '—'}
{s.status.toUpperCase()} {(s.status === 'Reduced' || s.status === 'Rejected') && { S.appealEbillingReduction(s.id, 'M. Kirkland'); f(`Appeal filed · ${s.invoice}`); }}>Appeal }
))}
Reduction Reason Analysis
{S.state.ebillingSubmissions.filter(s => s.reductionReason).map(s => (
{s.invoice}
{s.reductionReason}
{bl.money(s.reduction)}
))}
);
}
// ════════════════════════════════════════════════════════
// 9. JOINT-REP / MULTI-ENTITY
// ════════════════════════════════════════════════════════
function Ba9JointRep() {
const S = window.BillingAnalyticsStore;
return (
Joint-Rep Matters {S.state.jointMatters.length}
Total Entities {S.state.jointMatters.reduce((s, m) => s + m.parties.length, 0)}
YTD Joint Fees {bl.money(S.state.jointMatters.reduce((s, m) => s + m.ytdFees, 0))}
{S.state.jointMatters.map(m => (
{m.matter}
YTD fees {bl.money(m.ytdFees)} · costs {bl.money(m.ytdCosts)}
Entity Alloc Basis Alloc % Allocated Fees Allocated Costs Currency
{m.parties.map((p, i) => (
{p.entity}
{p.allocBasis.toUpperCase()} {p.allocPct}%
{bl.money(m.ytdFees * p.allocPct / 100)}
{bl.money(m.ytdCosts * p.allocPct / 100)}
{p.currency || 'USD'}
))}
))}
);
}
// ════════════════════════════════════════════════════════
// 10. AR INTELLIGENCE
// ════════════════════════════════════════════════════════
function Ba10ArIntel() {
useCrossRender(['collection.triggered']);
const S = window.BillingAnalyticsStore;
const [flash, setFlash] = useState(null);
const f = (m) => { setFlash(m); setTimeout(() => setFlash(null), 2000); };
const riskColor = { Low: bl.emerald, Moderate: bl.amber, Elevated: bl.orange, High: bl.crimson };
const total = S.state.arPredictions.reduce((s, a) => s + a.outstanding, 0);
const highRisk = S.state.arPredictions.filter(a => a.riskScore === 'High' || a.riskScore === 'Elevated').reduce((s, a) => s + a.outstanding, 0);
return (
Total Outstanding {bl.money(total)}
Avg Predicted DSO {Math.round(S.state.arPredictions.reduce((s, a) => s + a.predictedDaysToPay, 0) / S.state.arPredictions.length)}d
High/Elevated Risk {bl.money(highRisk)}
% of AR at Risk {((highRisk / total) * 100).toFixed(1)}%
Client-Level AR Prediction · ML-scored
Client Outstanding Predicted DTP Historical Avg Risk Trend Recommended Action
{S.state.arPredictions.map(a => (
{a.client}
{bl.money(a.outstanding)}
a.historicalAvg + 10 ? bl.crimson : a.predictedDaysToPay > a.historicalAvg ? bl.amber : bl.emerald}>{a.predictedDaysToPay}d
{a.historicalAvg}d
{a.riskScore.toUpperCase()} {a.trend}
{a.collectionAction} { S.triggerCollectionAction(a.client, a.collectionAction, 'M. Kirkland'); const dueDate = new Date(); dueDate.setDate(dueDate.getDate() + 7); S.pushCollectionToCalendar({ client: a.client, dueDate: dueDate.toISOString().slice(0, 10), priority: a.riskScore === 'High' ? 'critical' : 'high', notes: a.collectionAction }); f(`Action triggered for ${a.client} · Calendar notified`); }}>Act
))}
);
}
// ════════════════════════════════════════════════════════
// 11. WIP RISK MAP
// ════════════════════════════════════════════════════════
function Ba11WipRisk() {
const S = window.BillingAnalyticsStore;
const total = S.state.wipRisk.reduce((s, w) => s + w.wipValue, 0);
const atRisk = S.state.wipRisk.reduce((s, w) => s + (w.wipValue * w.writeDownProb), 0);
const opportunity = S.state.wipRisk.reduce((s, w) => s + w.cashAccelOpportunity, 0);
return (
Total WIP {bl.money(total)}
Probable Write-Down {bl.money(atRisk)}
Cash Accel Opportunity {bl.money(opportunity)}
Stale Matters (>90d) {S.state.wipRisk.filter(w => w.daysAged > 90).length}
WIP Risk Matrix · bill-now vs write-down
Matter Client WIP Value Days Aged Write-Down Prob Cash Opp. Recommended
{S.state.wipRisk.sort((a, b) => b.writeDownProb - a.writeDownProb).map(w => (
{w.matter}
{w.client}
{bl.money(w.wipValue)}
90 ? bl.crimson : w.daysAged > 60 ? bl.amber : bl.emerald}>{w.daysAged}d
0.3 ? bl.crimson : w.writeDownProb > 0.15 ? bl.amber : bl.emerald}>{(w.writeDownProb * 100).toFixed(0)}%
{bl.money(w.cashAccelOpportunity)}
{w.recommendedAction}
))}
);
}
// ════════════════════════════════════════════════════════
// 12. MATTER BUDGET PACING
// ════════════════════════════════════════════════════════
function Ba12BudgetPacing() {
useCrossRender(['budget.escalated']);
const S = window.BillingAnalyticsStore;
const [flash, setFlash] = useState(null);
const f = (m) => { setFlash(m); setTimeout(() => setFlash(null), 2000); };
const alertColor = { emerald: bl.emerald, amber: bl.amber, crimson: bl.crimson };
return (
Tracked Matters {S.state.budgetPacing.length}
Major Overruns {S.state.budgetPacing.filter(b => b.alertLevel === 'crimson').length}
Minor Overruns {S.state.budgetPacing.filter(b => b.alertLevel === 'amber').length}
Total Variance $ {bl.money(S.state.budgetPacing.reduce((s, b) => s + Math.max(0, b.variance), 0))}
Matter Budget Pacing · projected burn vs cap
Matter Budget Spent % Used Pace Projected Variance Status
{S.state.budgetPacing.map(b => (
{b.matter}{b.client} · {b.monthsRemaining}mo remaining
{bl.money(b.budget)}
{bl.money(b.spent)}
85 ? bl.crimson : b.pctUsed > 70 ? bl.amber : bl.emerald}>{b.pctUsed.toFixed(1)}%
85 ? bl.crimson : b.pctUsed > 70 ? bl.amber : bl.emerald} /> {bl.money(b.projectedFinal)}
0 ? bl.crimson : bl.emerald}>{b.variance > 0 ? '+' : ''}{bl.money(b.variance)}({b.varPct > 0 ? '+' : ''}{b.varPct.toFixed(1)}%)
{b.status.toUpperCase()} {b.alertLevel === 'crimson' && !b.escalated && { S.escalateBudgetAlert(b.matter, 'M. Kirkland'); f(`Escalated ${b.matter} to originating partner`); }}>Escalate }{b.escalated && ESCALATED }
))}
);
}
// ════════════════════════════════════════════════════════
// 13. REALIZATION WATERFALL
// ════════════════════════════════════════════════════════
function Ba13Realization() {
const S = window.BillingAnalyticsStore;
const w = S.state.realizationWaterfall;
const max = Math.max(...w.map(s => Math.abs(s.amount)));
return (
Standard Value {bl.money(w[0].amount)}
Collected Value {bl.money(w[w.length - 1].amount)}
Collected Realization {w[w.length - 1].pct.toFixed(1)}%
Total Leakage {bl.money(w[0].amount - w[w.length - 1].amount)}
Realization Waterfall · standard → collected
{w.map((s, i) => {
const isFinal = i === 0 || i === w.length - 1 || s.stage.includes('Worked') || s.stage.includes('Billed');
const isNeg = s.amount < 0;
const barWidth = (Math.abs(s.amount) / max) * 100;
return (
{s.stage}
{isNeg ? '' : ''}{bl.money(s.amount)} ({s.pct > 0 ? '+' : ''}{s.pct.toFixed(1)}%)
{s.reason &&
{s.reason}
}
);
})}
);
}
// ════════════════════════════════════════════════════════
// 14. MATTER PROFITABILITY (fully-loaded)
// ════════════════════════════════════════════════════════
function Ba14Profitability() {
const S = window.BillingAnalyticsStore;
const matters = [...S.state.matterProfitability].sort((a, b) => b.margin - a.margin);
const totalRev = matters.reduce((s, m) => s + m.revenue, 0);
const totalMargin = matters.reduce((s, m) => s + m.margin, 0);
return (
Revenue (sample) {bl.money(totalRev)}
Gross Margin {bl.money(totalMargin)}
Avg Margin % {((totalMargin / totalRev) * 100).toFixed(1)}%
Avg Partner ROI {(matters.reduce((s, m) => s + m.partnerROI, 0) / matters.length).toFixed(1)}x
Matter P&L · fully-loaded cost
Matter Revenue Direct Overhead Margin %
{matters.map(m => (
{m.matter}{m.client}
{bl.money(m.revenue)}
{bl.money(m.directCost)}
{bl.money(m.allocatedOverhead)}
30 ? bl.emerald : m.marginPct > 20 ? bl.amber : bl.crimson}>{bl.money(m.margin)}
30 ? bl.emerald : m.marginPct > 20 ? bl.amber : bl.crimson}>{m.marginPct.toFixed(1)}%
))}
Client Profitability Decile
Client Revenue Margin Margin % Decile
{[...S.state.clientProfitabilityDecile].sort((a, b) => a.decile - b.decile).map(c => (
{c.client}
{bl.money(c.revenue)}
30 ? bl.emerald : c.marginPct > 20 ? bl.amber : bl.crimson}>{bl.money(c.margin)}
30 ? bl.emerald : c.marginPct > 20 ? bl.amber : bl.crimson}>{c.marginPct.toFixed(1)}%
D{c.decile}
))}
);
}
// ════════════════════════════════════════════════════════
// 15. LATERAL & PARTNER BOOK
// ════════════════════════════════════════════════════════
function Ba15LateralBook() {
useCrossRender(['retention.flagged']);
const S = window.BillingAnalyticsStore;
const [flash, setFlash] = useState(null);
const f = (m) => { setFlash(m); setTimeout(() => setFlash(null), 2000); };
return (
Tracked Partners {S.state.partnerBook.length}
Combined Book {bl.money(S.state.partnerBook.reduce((s, p) => s + p.bookValue, 0))}
High Flight Risk {S.state.partnerBook.filter(p => p.flightRisk > 0.3).length}
Revenue at Risk {bl.money(S.state.partnerBook.filter(p => p.flightRisk > 0.3).reduce((s, p) => s + p.bookValue, 0))}
Partner Book Analytics · flight-risk scoring
Partner Practice Book Value 12-mo Trend Client Conc. Origination Decay Flight Risk Comp Band
{S.state.partnerBook.map(p => {
const trend = p.bookTrend12mo;
const min = Math.min(...trend);
const max = Math.max(...trend);
const range = max - min || 1;
const growth = ((trend[trend.length - 1] - trend[0]) / trend[0]) * 100;
return (
{p.partner}{p.alert && {p.alert}
}
{p.practice}
{bl.money(p.bookValue)}= 0 ? bl.emerald : bl.crimson, fontWeight: 600 }}>{growth >= 0 ? '+' : ''}{growth.toFixed(1)}% YoY
= 0 ? bl.emerald : bl.crimson} strokeWidth="1.5"
points={trend.map((v, i) => `${(i / (trend.length - 1)) * 100},${24 - ((v - min) / range) * 22 - 1}`).join(' ')} />
0.45 ? bl.crimson : p.clientConcentration > 0.35 ? bl.amber : bl.emerald}>{(p.clientConcentration * 100).toFixed(0)}%
0.15 ? bl.crimson : p.originationDecay > 0.08 ? bl.amber : bl.emerald}>{(p.originationDecay * 100).toFixed(0)}%
0.3 ? bl.crimson : p.flightRisk > 0.15 ? bl.amber : bl.emerald}>{(p.flightRisk * 100).toFixed(0)}%
{p.compVsPeer} {p.flightRisk > 0.3 && !p.retentionFlag && { S.flagPartnerRetention(p.partner, 'High flight risk · schedule retention conversation', 'EC Chair'); f(`${p.partner} flagged for retention review`); }}>Flag }{p.retentionFlag && FLAGGED }
);
})}
);
}
// ════════════════════════════════════════════════════════
// 16. INDUSTRY BENCHMARK OVERLAY
// ════════════════════════════════════════════════════════
function Ba16Benchmark() {
const S = window.BillingAnalyticsStore;
return (
Metrics Tracked {S.state.industryBenchmarks.length}
Above Peer {S.state.industryBenchmarks.filter(m => m.assessment === 'Above peer').length}
Below Peer {S.state.industryBenchmarks.filter(m => m.assessment.includes('Below')).length}
Peer Benchmark · Citi / Wells Fargo / PeerMonitor
Metric Firm Citi Wells Fargo PeerMonitor Peer Band Assessment
{S.state.industryBenchmarks.map(m => {
const fmt = (v) => m.metric.includes('PPP') ? bl.money(v) : m.metric.includes('Productivity') || m.metric.includes('Days') ? v.toLocaleString() : m.metric.includes('Margin') || m.metric.includes('Realization') ? `${(v * 100).toFixed(1)}%` : `${v.toFixed(1)}%`;
const [low, high] = m.peerBand;
const isAbove = m.firm > high;
const isBelow = m.firm < low;
const range = high - low || 1;
const firmPos = Math.max(0, Math.min(100, ((m.firm - low) / range) * 100));
return (
{m.metric}
{fmt(m.firm)}
{fmt(m.citigroup)}
{fmt(m.wellsFargo)}
{fmt(m.peerMonitor)}
{m.assessment.toUpperCase()}
);
})}
);
}
// ════════════════════════════════════════════════════════
// 17. CLIENT CHURN RISK
// ════════════════════════════════════════════════════════
function Ba17ChurnRisk() {
useCrossRender(['churn.response']);
const S = window.BillingAnalyticsStore;
const [flash, setFlash] = useState(null);
const f = (m) => { setFlash(m); setTimeout(() => setFlash(null), 2000); };
const statusColor = { Healthy: bl.emerald, Watch: bl.amber, 'At Risk': bl.orange, 'High Risk': bl.crimson };
return (
Clients Scored {S.state.churnRisk.length}
At/High Risk {S.state.churnRisk.filter(c => c.status === 'At Risk' || c.status === 'High Risk').length}
Total Revenue at Risk {bl.money(S.totalRevenueAtRisk())}
Top-5 Concentration {[...S.state.churnRisk].sort((a, b) => b.revenue - a.revenue).slice(0, 5).reduce((s, c) => s + c.pctOfBook, 0).toFixed(1)}%
Client Churn & Concentration Risk
Client Revenue % of Book Churn Prob Revenue at Risk Signals Status
{[...S.state.churnRisk].sort((a, b) => b.churnProb - a.churnProb).map(c => (
{c.client}
{bl.money(c.revenue)}
{c.pctOfBook.toFixed(1)}%
0.3 ? bl.crimson : c.churnProb > 0.15 ? bl.amber : bl.emerald}>{(c.churnProb * 100).toFixed(0)}%
{bl.money(c.revenueAtRisk)}
{c.signals.slice(0, 3).map((s, i) => {s} )} {c.status.toUpperCase()} {(c.status === 'At Risk' || c.status === 'High Risk') && !c.response && { S.triggerChurnResponse(c.client, 'EC retention plan initiated', 'EC Chair'); f(`Retention plan initiated for ${c.client}`); }}>Retain }{c.response && PLAN ACTIVE }
))}
);
}
// ════════════════════════════════════════════════════════
// 18. EXECUTIVE WAR ROOM COCKPIT
// ════════════════════════════════════════════════════════
function Ba18WarRoom() {
const S = window.BillingAnalyticsStore;
const K = S.state.warRoomKPIs;
const mk = (key, label, fmt, inverse) => {
const k = K[key];
if (!k) return null;
const vsBudget = ((k.value - k.budget) / k.budget) * 100;
const vsYr = ((k.value - k.priorYr) / k.priorYr) * 100;
const good = inverse ? k.value < k.budget : k.value >= k.budget;
const [lo, hi] = k.peerBand;
const range = hi - lo || 1;
const firmPos = Math.max(0, Math.min(100, ((k.value - lo) / range) * 100));
return (
{label}
{fmt(k.value)}
{vsBudget >= 0 ? '+' : ''}{vsBudget.toFixed(1)}% vs budget
= 0 ? bl.emerald : bl.crimson, fontWeight: 600 }}>{vsYr >= 0 ? '+' : ''}{vsYr.toFixed(1)}% vs LY
{fmt(lo)} Firm {fmt(hi)}
);
};
return (
Firm-Level KPI Cockpit · Q2 2026
Executive War Room
Firm vs Budget · vs Prior Year · vs Peer Band (Citi / Wells Fargo / PeerMonitor)
{mk('realization', 'Collected Realization', v => `${v.toFixed(1)}%`, false)}
{mk('ube', 'UBE (Util. Billable Eqv.)', v => v.toLocaleString(), false)}
{mk('arDays', 'AR Days (DSO)', v => `${v}d`, true)}
{mk('pipeline', 'Pipeline', v => bl.money(v), false)}
{mk('productivity', 'Productivity', v => `${v.toFixed(1)}%`, false)}
{mk('utilization', 'Utilization', v => `${v.toFixed(1)}%`, false)}
{mk('lateralROI', 'Lateral Hire ROI', v => `${v.toFixed(1)}x`, false)}
{mk('pppGrowth', 'PPP Growth YoY', v => `${v.toFixed(1)}%`, false)}
Narrative · AI Synthesis
Firm is tracking above peer band on PPP growth (+{K.pppGrowth.value.toFixed(1)}% vs peer median +5.2%) and productivity. Realization of {K.realization.value.toFixed(1)}% is short of {K.realization.budget.toFixed(1)}% budget — driven by {bl.money(8700000)} in pre-bill write-downs (narrative + OCG) and $3.1M in eBilling reductions. AR at {K.arDays.value}d exceeds {K.arDays.budget}d budget; top opportunity is 4 at-risk clients representing {bl.money(S.totalRevenueAtRisk() * 0.6)} in revenue-at-risk. Pipeline is +{(((K.pipeline.value - K.pipeline.priorYr) / K.pipeline.priorYr) * 100).toFixed(0)}% vs LY .
);
}
// ════════════════════════════════════════════════════════
// HUBS — 5 hubs grouping the 18 opportunities
// ════════════════════════════════════════════════════════
function BillingCaptureHub() {
const [tab, setTab] = useState('passive');
return (
);
}
function BillingRateOpsHub() {
const [tab, setTab] = useState('architect');
return (
);
}
function BillingPreBillHub() {
const [tab, setTab] = useState('prebill');
return (
);
}
function BillingCashOpsHub() {
const [tab, setTab] = useState('ar');
return (
);
}
function BillingExecBIHub() {
const [tab, setTab] = useState('realization');
return (
);
}
Object.assign(window, {
BillingCaptureHub, BillingRateOpsHub, BillingPreBillHub, BillingCashOpsHub, BillingExecBIHub,
Ba1Passive, Ba2OcgCompliance, Ba3Narrative,
Ba4RateCardArchitect, Ba5RateRaiseSim, Ba6MatterPricing,
Ba7PreBill, Ba8Ebilling, Ba9JointRep,
Ba10ArIntel, Ba11WipRisk, Ba12BudgetPacing,
Ba13Realization, Ba14Profitability, Ba15LateralBook, Ba16Benchmark, Ba17ChurnRisk, Ba18WarRoom,
});
})();