// ==================================================================== // LEADS PAGE, full pipeline view, promoted from a Results sub-tab // ==================================================================== const { useState: useStateL, useMemo: useMemoL } = React; // --------------------------------------------------------------- // Data, richer than the old 6-row sample // --------------------------------------------------------------- const LEADS_DATA = [ { id:'L-2419', date:'Apr 14', time:'2:41 PM', who:'Maya K.', intent:'Deep clean · 4-bed home', ch:'LSA', src:'Google Local Services', type:'Call', dur:'14:21', status:'Booked', val:680, score:94, owner:'Sarah K.', responded:'2m', attribution:['Maps pack','LSA call'], note:"Maya runs operations for Indeed. Asked about a recurring clean for their 40-person office floor. I matched her to your commercial tier." }, { id:'L-2418', date:'Apr 14', time:'1:58 PM', who:'Derek T.', intent:'Recurring service · bi-weekly', ch:'PPC', src:'Search · austin-house-cleaning', type:'Form', dur:'–', status:'Pending', val:420, score:81, owner:'You', responded:'–', attribution:['Search ad','Landing page','Form'], note:"Derek filled the quote form Tuesday at 1:58 PM. Hasn't been replied to in 6h, peer median response is 18min. Likely a bi-weekly recurring plan, your AOV here is $480." }, { id:'L-2417', date:'Apr 14', time:'12:14 PM',who:'Jen M.', intent:'Move-out clean · 2-bed apt', ch:'LSEO', src:'Organic / Maps profile', type:'Call', dur:'8:04', status:'Booked', val:540, score:88, owner:'Sarah K.', responded:'1m', attribution:['Local 3-pack','GBP CTA'], note:"Jen searched 'move out cleaning austin'. Maps profile served. She booked a Saturday slot." }, { id:'L-2416', date:'Apr 13', time:'6:22 PM', who:'Ryan S.', intent:'Recurring clean · 3-bed home', ch:'Social', src:'Meta · carousel-spring', type:'Chat', dur:'–', status:'New', val:280, score:72, owner:'Unassigned',responded:'–', attribution:['Meta carousel','IG profile','DM'], note:"Cold chat from IG. Asked about monthly cleaning pricing. Reply window is closing, Meta DMs convert 3× better when answered <15min." }, { id:'L-2415', date:'Apr 13', time:'5:41 PM', who:'Alicia B.', intent:'Standard clean · 2-bed condo', ch:'PPC', src:'Search · standard-clean', type:'Form', dur:'–', status:'Booked', val:320, score:79, owner:'Sarah K.', responded:'4m', attribution:['Search ad','Standard-clean LP'], note:"Repeat customer (3 prior cleans). Standard-clean LP form. Auto-confirmed and added to Sunday's route." }, { id:'L-2414', date:'Apr 13', time:'4:08 PM', who:'Anonymous', intent:'(Hung up)', ch:'LSA', src:'Google Local Services', type:'Call', dur:'0:14', status:'No-show', val:0, score:18, owner:'–', responded:'–', attribution:['LSA listing','Click-to-call'], note:"14-second hang-up. LSA dispute eligible, I've drafted the credit request, ready for your one-click submit." }, { id:'L-2413', date:'Apr 13', time:'2:30 PM', who:'Tom W.', intent:'Office contract · 12k sqft', ch:'LSA', src:'Google Local Services', type:'Call', dur:'21:48', status:'Won', val:1820,score:97, owner:'Sarah K.', responded:'1m', attribution:['LSA call','Quote sent','Booked'], note:"BIG one. 12k-sqft office contract starting May 9. Sarah sent quote, customer paid 50% deposit. Net revenue $1,820." }, { id:'L-2412', date:'Apr 12', time:'11:50 AM',who:'Priya N.', intent:'Supply order · pickup', ch:'PPC', src:'PMax · evergreen', type:'Form', dur:'–', status:'Lost', val:0, score:64, owner:'You', responded:'52m', attribution:['PMax video','PDP','Form'], note:"Form filled, no answer for 52min. Customer went to a competitor. Add lead-routing automation to cut response to <10min." }, { id:'L-2411', date:'Apr 12', time:'10:14 AM',who:'Marcus J.', intent:'Deep clean · 3-bed home', ch:'LSEO', src:'Organic / blog', type:'Form', dur:'–', status:'Booked', val:240, score:75, owner:'You', responded:'9m', attribution:['Blog post','Inline CTA'], note:"Found you via your 'best eco cleaners austin' blog post. Engaged for 7 minutes before clicking CTA." }, { id:'L-2410', date:'Apr 12', time:'8:42 AM', who:'Gretchen P.', intent:'Office clean · weekly', ch:'LSA', src:'Google Local Services', type:'Call', dur:'11:32', status:'Booked', val:520, score:90, owner:'Sarah K.', responded:'1m', attribution:['LSA call'], note:"Weekly office clean. Booked on first call." }, { id:'L-2409', date:'Apr 11', time:'7:08 PM', who:'Kevin R.', intent:'Recurring home clean · quote', ch:'Social', src:'Meta · audience-lookalike', type:'Click',dur:'–', status:'Lost', val:0, score:45, owner:'–', responded:'–', attribution:['Meta image','Profile'], note:"Clicked once, didn't engage. Low intent, Meta lookalike audience could use refresh." }, { id:'L-2408', date:'Apr 11', time:'3:12 PM', who:'Sara L.', intent:'Office clean · 1x trial', ch:'PPC', src:'Search · office-cleaning-near-me', type:'Call', dur:'9:14', status:'Won', val:380, score:84, owner:'Sarah K.', responded:'1m', attribution:['Search ad','Click-to-call'], note:"Booked $380 trial clean for tomorrow." }, ]; const STATUS_BADGE = { 'New': 'badge-info', 'Pending': 'badge-warn', 'Booked': 'badge-ok', 'Won': 'badge-ok', 'Lost': 'badge-bad', 'No-show': 'badge-neutral', }; const CHANNEL_COLOR = { PPC: 'var(--ch-ppc)', LSA: 'var(--ch-lsa)', LSEO: 'var(--ch-seo)', Social: 'var(--ch-social)', }; // --------------------------------------------------------------- // LEADS PAGE, persona router. HQ gets a portfolio-level operational // health view; franchisees get the original lead-pipeline view. // --------------------------------------------------------------- function LeadsPage({ data, persona }) { if (persona === 'hq') return ; return ; } window.LeadsPage = LeadsPage; // --------------------------------------------------------------- // LEADS PAGE, FRANCHISEE (original) // --------------------------------------------------------------- function LeadsPageFranchisee({ data }) { const [range, setRange] = useStateL({ preset: 'last30', start: new Date(2026, 2, 29), end: new Date(2026, 3, 27), compare: false }); const [chan, setChan] = useStateL('all'); const [stat, setStat] = useStateL('all'); const [q, setQ] = useStateL(''); const [sort, setSort] = useStateL('date'); const [detail, setDetail] = useStateL(null); const [selected, setSelected] = useStateL(new Set()); // Filtering + sorting const filtered = useMemoL(() => { let out = LEADS_DATA; if (chan !== 'all') out = out.filter(r => r.ch === chan); if (stat !== 'all') out = out.filter(r => r.status === stat); if (q.trim()) { const s = q.toLowerCase(); out = out.filter(r => (r.who + r.intent + r.id + r.src).toLowerCase().includes(s)); } if (sort === 'value') out = [...out].sort((a, b) => b.val - a.val); else if (sort === 'score') out = [...out].sort((a, b) => b.score - a.score); return out; }, [chan, stat, q, sort]); // Stats, over the *unfiltered* dataset, gives stable KPI ribbon const total = LEADS_DATA.length; // Headline count comes from the same source Home uses, so the two pages agree. // LEADS_DATA.length stays the source of truth for table-level counters and // sample-based funnel + channel-mix math. const totalCaptured = data.kpis.leads.val; const booked = LEADS_DATA.filter(r => r.status === 'Booked' || r.status === 'Won').length; const lost = LEADS_DATA.filter(r => r.status === 'Lost').length; const noshow = LEADS_DATA.filter(r => r.status === 'No-show').length; const newPending = LEADS_DATA.filter(r => r.status === 'New' || r.status === 'Pending').length; const wonRev = LEADS_DATA.filter(r => r.status === 'Won' || r.status === 'Booked').reduce((s, r) => s + r.val, 0); const bookedRate = Math.round(booked / total * 100); const avgScore = Math.round(LEADS_DATA.reduce((s, r) => s + r.score, 0) / total); const channelMix = (data.variant === 'bare' ? ['PPC'] : ['LSA','PPC','LSEO','Social']).map(c => ({ ch: c, cnt: data.variant === 'bare' ? LEADS_DATA.length : LEADS_DATA.filter(r => r.ch === c).length, rev: data.variant === 'bare' ? LEADS_DATA.filter(r => r.status === 'Won' || r.status === 'Booked').reduce((s, r) => s + r.val, 0) : LEADS_DATA.filter(r => r.ch === c && (r.status === 'Won' || r.status === 'Booked')).reduce((s, r) => s + r.val, 0), color: CHANNEL_COLOR[c], })); // Funnel buckets const funnel = [ { l: 'Captured', v: total, fg: 'var(--ink-3)' }, { l: 'Contacted', v: total - newPending, fg: 'var(--sky)' }, { l: 'Qualified', v: booked + lost, fg: 'var(--marigold)' }, { l: 'Booked', v: booked, fg: 'var(--sage)' }, { l: 'Won', v: LEADS_DATA.filter(r => r.status === 'Won').length, fg: 'var(--terra)' }, ]; const funnelMax = funnel[0].v; const toggleSel = id => { setSelected(s => { const next = new Set(s); if (next.has(id)) next.delete(id); else next.add(id); return next; }); }; const allSelected = filtered.length > 0 && filtered.every(r => selected.has(r.id)); const toggleAll = () => { if (allSelected) setSelected(new Set()); else setSelected(new Set(filtered.map(r => r.id))); }; return (
Leads.
{totalCaptured} captured · {booked} booked · ${wonRev.toLocaleString()} attributed revenue. Median response time 4 min, peer median 18 min.
{ setRange(v); T('Range updated', `Showing ${v.preset && v.preset !== 'custom' ? (window.DRP_PRESET_LABEL?.(v.preset) || 'selected range') : `${(v.start.getMonth()+1)}/${v.start.getDate()} – ${(v.end.getMonth()+1)}/${v.end.getDate()}`}`, 'info'); }} align="right"/>
{/* KPI strip */}
Source: Telmetrics or other + FreshNest CRM {/* Lenny opportunity strip */}
2 leads need you right now. Derek T. (form, 6h) and Ryan S. (Meta DM), both unanswered. I drafted replies for both. Approving them now would protect ~$700 in pipeline.
{/* Channel mix + funnel */}
{/* Channel mix */}
Where leads came from
{total} this period · won revenue by channel
{channelMix.map(c => { const pct = (c.cnt / total) * 100; return (
{c.ch} ${c.rev.toLocaleString()} attributed {c.cnt} leads
); })}
{/* Funnel */}
Pipeline funnel
Captured → Won · {Math.round(LEADS_DATA.filter(r => r.status === 'Won').length / total * 100)}% close rate
↓ 23% drop-off
{funnel.map((f, i) => { const pct = (f.v / funnelMax) * 100; const dropPct = i > 0 ? Math.round((1 - f.v / funnel[i-1].v) * 100) : 0; return (
{f.l}
{f.v}
{i > 0 &&
30 ? 'var(--terra)' : 'var(--ink-4)', fontFamily: 'var(--ff-mono)', textAlign: 'right' }}>−{dropPct}%
}
); })}
Biggest leak: Captured → Contacted. Lead routing fixes this, Lenny modeled +9 booked/mo.
Source: Google Ads + FreshNest CRM {/* Filter ribbon */}
{Icon.search} setQ(e.target.value)} placeholder="Search leads, intent, ID…" style={{ border: 0, outline: 'none', flex: 1, fontSize: 12.5, background: 'transparent', color: 'var(--ink)' }}/> {q && }
{filtered.length} of {total}
{/* Bulk actions bar, only when selections exist */} {selected.size > 0 && (
{selected.size} selected ·
)} {/* The big table */}
Recent leads click any row for full detail · {filtered.length} of {total} shown · sample of {totalCaptured} MTD
{filtered.map(r => ( setDetail(r)} style={{ cursor: 'pointer' }}> ))} {filtered.length === 0 && ( )}
When Lead Intent Channel Type Status Quality Value Owner
e.stopPropagation()}> toggleSel(r.id)} style={{ cursor: 'pointer' }}/>
{r.date}
{r.time}
{r.who}
{r.id}
 {r.intent} {r.ch} {r.type}{r.dur !== '–' &&
{r.dur}
} 		{r.status} {r.val > 0 ? `$${r.val}` : –} {r.owner} e.stopPropagation()}>
No leads match those filters.
setDetail(null)}/>
); } // --------------------------------------------------------------- // FilterChip, compact dropdown used across the filter ribbon // --------------------------------------------------------------- function FilterChip({ label, value, onPick, options }) { const [open, setOpen] = useStateL(false); const cur = options.find(o => o.v === value); return (
{open && ( <>
setOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 90 }}/>
{options.map(o => ( ))}
)}
); } // --------------------------------------------------------------- // QualityPip, inline mini-bar showing Lenny's lead-quality score // --------------------------------------------------------------- function QualityPip({ score }) { const tone = score >= 80 ? 'var(--sage)' : score >= 60 ? 'var(--marigold)' : 'var(--terra)'; return (
{score}
); } // --------------------------------------------------------------- // LeadDetailDrawer, slides in from right with full context + actions // --------------------------------------------------------------- function LeadDetailDrawer({ lead, onClose }) { if (!lead) return null; const dispute = lead.ch === 'LSA' && (lead.status === 'No-show' || lead.dur === '0:14'); return ( <>
{/* Header */}
{lead.who.split(' ').map(n => n[0]).join('').slice(0, 2)}
{lead.who}
{lead.id}
{lead.intent}
{lead.status} {lead.ch} · {lead.src} Quality {lead.score}
{/* Scrollable body */}
{/* Quick stats grid */}
{[ ['Captured', `${lead.date} · ${lead.time}`], ['Contact', lead.type + (lead.dur !== '–' ? ` · ${lead.dur}` : '')], ['Response', lead.responded === '–' ? 'Pending' : lead.responded], ['Est. value', lead.val > 0 ? `$${lead.val}` : '–'], ].map(([l, v]) => (
{l}
{v}
))}
{/* Lenny's note */}
Lenny's note
{lead.note}
{/* Attribution path */}
Attribution path
{lead.attribution.map((a, i) => ( {a} {i < lead.attribution.length - 1 && →} ))}
{/* Timeline */}
Timeline
{[ { dot: 'var(--terra)', t: lead.time, l: 'Lead captured', s: `${lead.ch} · ${lead.src}` }, { dot: 'var(--sky)', t: '+ 2 min', l: 'Lenny scored as ' + (lead.score >= 80 ? 'High intent' : lead.score >= 60 ? 'Medium intent' : 'Low intent'), s: `Match score ${lead.score}/100` }, { dot: 'var(--sage)', t: lead.responded === '–' ? '–' : '+ ' + lead.responded, l: lead.responded === '–' ? 'Awaiting response' : `Responded by ${lead.owner}`, s: lead.responded === '–' ? 'No outreach yet, peer median 18min' : 'Within SLA' }, ...(lead.status === 'Booked' || lead.status === 'Won' ? [{ dot: 'var(--ok)', t: 'Today', l: lead.status === 'Won' ? `Booked + revenue logged` : 'Booked', s: `$${lead.val} attributed` }] : []), ...(lead.status === 'Lost' ? [{ dot: 'var(--terra)', t: 'Today', l: 'Marked Lost', s: 'No follow-up scheduled' }] : []), ...(lead.status === 'No-show' ? [{ dot: 'var(--terra)', t: 'Today', l: 'No-show / hang-up', s: 'LSA dispute eligible' }] : []), ].map((e, i) => (
{e.l}
{e.t}
{e.s}
))}
{/* Peer benchmark */}
Peer benchmark: {lead.intent.split('·')[0].trim()} leads from {lead.ch} book at {lead.score >= 80 ? '78%' : lead.score >= 60 ? '54%' : '22%'} across FreshNest locations · avg ticket ${Math.round(lead.val * 1.15) || 380}.
{/* Sticky action footer */}
{dispute && (
⚠️ LSA dispute eligible, call ≤30s + no booking. Lenny drafted the credit request.
)}
{lead.status === 'New' || lead.status === 'Pending' ? ( <> ) : lead.status === 'Booked' || lead.status === 'Won' ? ( <> ) : ( <> )}
); } // ==================================================================== // LEADS PAGE, HQ / CORPORATE // Portfolio-level operational view: how locations are handling inbound. // ==================================================================== // Stable hash → 0..1 so per-location modeled fields are deterministic // across renders (mirrors the pattern in results-hq.jsx). const hashFloatLeads = (s) => { let h = 2166136261; for (let i = 0; i < s.length; i++) { h ^= s.charCodeAt(i); h = Math.imul(h, 16777619); } return ((h >>> 0) % 10000) / 10000; }; // Derive per-location lead-ops metrics from hqRollup. Score-driven: well-run // locations answer faster, miss fewer calls, and book more. Bottom-tier // locations leak hard. Adds variance via hashFloatLeads so it doesn't feel // strictly monotonic. function deriveLeadOps(rollup) { return rollup.map(r => { const v = hashFloatLeads(r.unit + 'leadops'); // Response time: high score → fast (1–6 min). Low score → slow (35–95 min). const baseResp = r.score >= 85 ? 2 + v * 4 : r.score >= 75 ? 6 + v * 12 : r.score >= 65 ? 18 + v * 28 : 35 + v * 60; const responseMin = Math.round(baseResp); // Phone answer rate inversely tracks response time. 92→63%. const phoneAnswerRate = Math.max(58, Math.min(96, Math.round(95 - baseResp * 0.55 + (v - 0.5) * 6))); // Calls received roughly tracks lead volume. const callsReceived = Math.round(r.leads * (0.55 + v * 0.25)); const callsAnswered = Math.round(callsReceived * phoneAnswerRate / 100); const callsMissed = callsReceived - callsAnswered; // Modeled missed-call revenue: 14% of missed calls would have booked at $340 AOV. const missedRev = Math.round(callsMissed * 0.14 * 340); // Unanswered count = forms + DMs older than expected. const unanswered = responseMin > 30 ? Math.max(2, Math.round(r.leads * (0.04 + v * 0.06))) : responseMin > 12 ? Math.round(r.leads * (0.015 + v * 0.025)) : Math.round(r.leads * 0.005); const oldestHrs = unanswered > 0 ? Math.round(8 + v * 36 + (responseMin > 30 ? 12 : 0)) : 0; // Booked rate: high score → 62–74%, low score → 28–42%. const bookedRate = Math.max(22, Math.min(78, Math.round(34 + (r.score - 60) * 0.85 + (v - 0.5) * 8) )); // Owner: every location has someone, pull from a small pool keyed by // city so the same name always maps to the same place. const ownerPool = ['Sarah K.', 'Marcus D.', 'Priya S.', 'Tom R.', 'Jen M.', 'Diego L.', 'Alicia B.', 'Kevin O.', 'Maya P.', 'Ryan T.']; const owner = ownerPool[Math.floor(hashFloatLeads(r.unit + 'owner') * ownerPool.length)]; return { ...r, responseMin, phoneAnswerRate, callsReceived, callsAnswered, callsMissed, missedRev, unanswered, oldestHrs, bookedRate, owner, }; }); } // -------------------------------------------------------------------- // HQ LEADS PAGE // -------------------------------------------------------------------- function LeadsPageHq({ data }) { const [range, setRange] = useStateL({ preset: 'last30', start: new Date(2026, 2, 29), end: new Date(2026, 3, 27), compare: false }); const ops = useMemoL(() => deriveLeadOps(data.hqRollup || []), [data.hqRollup]); const totals = data.hqLeadOps?.totals || {}; const std = data.hqLeadOps?.standard || {}; const n = ops.length; // Sort buckets const notResponding = useMemoL(() => [...ops].filter(o => o.responseMin > 30 || o.unanswered >= 4 || o.oldestHrs >= 24) .sort((a, b) => b.responseMin - a.responseMin) .slice(0, 6) , [ops]); const phoneAbandon = useMemoL(() => [...ops].sort((a, b) => a.phoneAnswerRate - b.phoneAnswerRate).slice(0, 6) , [ops]); const topBookers = useMemoL(() => [...ops].sort((a, b) => b.bookedRate - a.bookedRate).slice(0, 5), [ops]); const bottomBookers = useMemoL(() => [...ops].sort((a, b) => a.bookedRate - b.bookedRate).slice(0, 5), [ops]); const meetingStandard = useMemoL(() => { const meet = ops.filter(o => o.responseMin <= (std.thresholdMin || 4)).length; return { meet, pct: Math.round(meet / Math.max(1, n) * 100) }; }, [ops, std.thresholdMin, n]); return (
Lead Operations.
How your locations are handling inbound. {n} locations · {(totals.monthlyLeads || 0).toLocaleString()} leads this month.
{ setRange(v); T('Range updated', `Showing ${v.preset && v.preset !== 'custom' ? (window.DRP_PRESET_LABEL?.(v.preset) || 'selected range') : `${(v.start.getMonth()+1)}/${v.start.getDate()} – ${(v.end.getMonth()+1)}/${v.end.getDate()}`}`, 'info'); }} align="right"/>
{/* Portfolio KPI strip */}
Source: Telmetrics or other + FreshNest CRM · booked rate calculated by LOCALACT {/* Locations not responding + Phone abandon */}
Source: Telmetrics or other {/* Booking-rate leaderboard */}
Source: FreshNest CRM · booked rate calculated by LOCALACT {/* Footer rollup strip */}
{meetingStandard.pct}% of locations meet the {std.label} · {std.flaggedThisWeek} locations flagged this week · last advisor outreach: {std.lastOutreach}
); } // -------------------------------------------------------------------- // Locations Not Responding card // -------------------------------------------------------------------- function NotRespondingCard({ rows }) { return (
!
Locations not responding
Median response > 30 min OR unanswered leads > 24 h old
{rows.length} flagged
Location Unans. Oldest Owner
{rows.map((r, i) => (
{r.unit}
{r.city} · response {r.responseMin}m
= 5 ? 'var(--terra)' : 'var(--ink-2)', fontWeight: 600 }}>{r.unanswered}
= 24 ? 'var(--terra)' : 'var(--ink-2)' }}>{r.oldestHrs}h
{r.owner}
))}
); } // -------------------------------------------------------------------- // Phone Abandon card // -------------------------------------------------------------------- function PhoneAbandonCard({ rows }) { const totalMissedRev = rows.reduce((s, r) => s + r.missedRev, 0); return (
☎
Phone abandon
Lowest phone-answer rates · modeled missed revenue
−${totalMissedRev.toLocaleString()}/mo
Location Recv Ans Rate Missed $
{rows.map((r, i) => (
{r.unit}
{r.city}
{r.callsReceived}
{r.callsAnswered}
= 80 ? 'var(--sage)' : r.phoneAnswerRate >= 70 ? 'var(--marigold)' : 'var(--terra)' }}> {r.phoneAnswerRate}%
−${r.missedRev.toLocaleString()}
))}
); } // -------------------------------------------------------------------- // Booking Leaderboard card (Top / Bottom) // -------------------------------------------------------------------- function BookingLeaderCard({ title, sub, tone, rows }) { const dotBg = tone === 'sage' ? 'var(--sage-soft)' : 'var(--terra-soft)'; const dotFg = tone === 'sage' ? 'var(--sage)' : 'var(--terra)'; const arrow = tone === 'sage' ? '↑' : '↓'; return (
{arrow}
{title}
{sub}
Location Leads Booked Rate
{rows.map((r, i) => (
e.currentTarget.style.background = 'var(--cream)'} onMouseLeave={e => e.currentTarget.style.background = 'transparent'} onClick={() => T(r.unit, `${r.leads} leads · ${Math.round(r.leads * r.bookedRate / 100)} booked · ${r.bookedRate}% rate`, 'info')}>
{r.unit}
{r.city}
{r.leads}
{Math.round(r.leads * r.bookedRate / 100)}
{r.bookedRate}%
))}
); } // Animations if (typeof document !== 'undefined' && !document.getElementById('leads-anim')) { const s = document.createElement('style'); s.id = 'leads-anim'; s.textContent = ` @keyframes slideInRight { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } `; document.head.appendChild(s); }