// Showrooms — leaderboard / comparison view across all locations function Showrooms({ deals, showrooms, reps, stages, openDeal, setShowroom }) { // Aggregate per showroom const agg = showrooms.map(s => { const sDeals = deals.filter(d => d.showroom === s.id); const won = sDeals.filter(d => d.stage === 'sold'); const lost = sDeals.filter(d => d.stage === 'lost'); const active = sDeals.filter(d => d.stage !== 'sold' && d.stage !== 'lost'); const wonVal = won.reduce((sm, d) => sm + d.value, 0); const pipelineVal = active.reduce((sm, d) => sm + d.value, 0); const closed = won.length + lost.length; const winRate = closed ? won.length / closed : 0; const avgDeal = won.length ? wonVal / won.length : 0; const stuck = active.filter(d => d.lastActivityDaysAgo > 21).length; // Activity volume const activityCount = sDeals.reduce((sm, d) => sm + d.activities.length, 0); // Stage conversion: number of deals that have reached each stage const stageOrder = ['possible','in_progress','sold']; const stageReached = stageOrder.map((sid, i) => { return sDeals.filter(d => { if (d.stage === 'lost') return false; return stageOrder.indexOf(d.stage) >= i; }).length; }); return { ...s, sDeals, won, lost, active, wonVal, pipelineVal, wonCount: won.length, lostCount: lost.length, activeCount: active.length, winRate, avgDeal, stuck, activityCount, quotaPct: wonVal / s.target, stageReached, }; }).sort((a, b) => b.wonVal - a.wonVal); // Top reps across showrooms const repAgg = reps.map(r => { const rDeals = deals.filter(d => d.rep === r.id); const won = rDeals.filter(d => d.stage === 'sold'); const lost = rDeals.filter(d => d.stage === 'lost'); const wonVal = won.reduce((sm, d) => sm + d.value, 0); const closed = won.length + lost.length; return { ...r, wonVal, wonCount: won.length, lostCount: lost.length, winRate: closed ? won.length / closed : 0, activeCount: rDeals.filter(d => d.stage !== 'sold' && d.stage !== 'lost').length, homeShowroom: showrooms.find(s => s.id === r.home), worksAt: r.works.map(id => showrooms.find(s => s.id === id)), }; }).sort((a, b) => b.wonVal - a.wonVal); const maxStage = Math.max(...agg.flatMap(a => a.stageReached), 1); return (
{/* Big cards — one per showroom */}
{agg.map((s, i) => (
setShowroom(s.id)}> #{i + 1}
{s.name}
{s.state} · since {s.openedYear}
Closed-won
{fmt.money(s.wonVal, true)}
Pipeline
{fmt.money(s.pipelineVal, true)}
Win rate
{fmt.pct(s.winRate, 0)}
Avg deal
{fmt.money(s.avgDeal, true)}
Quota progress {fmt.pct(s.quotaPct, 0)} of {fmt.money(s.target, true)}
= 1 ? 'over' : ''}`} style={{ width: Math.min(s.quotaPct, 1.2) * 100 + '%' }}>
{s.wonCount} wins · {s.activeCount} active {s.stuck > 0 && {s.stuck} stuck}
))}
{/* Detailed comparison table */}
Performance comparison
All metrics side-by-side
{agg.map(s => ( ))} fmt.money(s.wonVal, true)} best={Math.max(...agg.map(s => s.wonVal))} val={s => s.wonVal}/> fmt.money(s.pipelineVal, true)} best={Math.max(...agg.map(s => s.pipelineVal))} val={s => s.pipelineVal}/> fmt.pct(s.winRate, 0)} best={Math.max(...agg.map(s => s.winRate))} val={s => s.winRate}/> fmt.money(s.avgDeal, true)} best={Math.max(...agg.map(s => s.avgDeal))} val={s => s.avgDeal}/> s.wonCount + s.lostCount} best={Math.max(...agg.map(s => s.wonCount + s.lostCount))} val={s => s.wonCount + s.lostCount}/> s.activeCount} best={Math.max(...agg.map(s => s.activeCount))} val={s => s.activeCount}/> s.activityCount} best={Math.max(...agg.map(s => s.activityCount))} val={s => s.activityCount}/> fmt.pct(s.quotaPct, 0)} best={Math.max(...agg.map(s => s.quotaPct))} val={s => s.quotaPct}/> s.stuck} worstHigh best={Math.min(...agg.map(s => s.stuck))} val={s => s.stuck} invert/>
Metric
{s.name}
{/* Closed-won bar chart */}
Closed-won by showroom
Current period · AUD
{agg.map(s => { const maxWon = Math.max(...agg.map(x => x.wonVal), 1); return (
{s.name}
{s.wonVal / maxWon > 0.18 && {fmt.money(s.wonVal, true)}}
{/* Target marker */}
{s.wonCount} wins
); })}
Target Team total: {fmt.money(agg.reduce((s, x) => s + x.wonVal, 0), true)}
Activity volume (calls · emails · meetings)
{agg.map(s => { const maxAct = Math.max(...agg.map(x => x.activityCount), 1); return (
{s.name}
{s.activityCount / maxAct > 0.18 && {s.activityCount}}
{(s.activityCount / s.sDeals.length).toFixed(1)} per deal
); })}
{/* Stage conversion comparison */}
Stage conversion · by showroom
% of deals that reached each stage · highest in row highlighted
{/* Top reps overall */}
Top sales reps · all showrooms
Ranked by closed-won across the entire team
{repAgg.map((r, i) => ( ))}
# Sales rep Home showroom Works at Wins Closed-won Win rate Active Quota
{String(i + 1).padStart(2, '0')}
{r.name}
{r.homeShowroom.name} {r.worksAt.map(s => ( {s.name} ))} {r.wonCount} / {r.lostCount}L {fmt.money(r.wonVal, true)} {fmt.pct(r.winRate, 0)} {r.activeCount}
{fmt.pct(r.wonVal / r.quota, 0)}
= r.quota ? 'var(--won)' : 'var(--accent)', borderRadius: 2 }}/>
); } function ComparisonRow({ label, rows, get, best, val, invert }) { return ( {label} {rows.map(s => { const v = val(s); const isBest = invert ? v === best : v === best && v > 0; return ( {get(s)} ); })} ); } function StageConversionTable({ agg }) { const stageLabels = ['Possible Sale', 'In Progress', 'Sold']; const stageIds = ['possible', 'in_progress', 'sold']; return (
Stage
{agg.map(s => (
{s.name}
))} {stageLabels.map((lbl, i) => { // Conversion at each stage = reached/start const values = agg.map(s => ({ showroom: s, pct: s.stageReached[0] > 0 ? s.stageReached[i] / s.stageReached[0] : 0, count: s.stageReached[i], })); const maxPct = Math.max(...values.map(v => v.pct), 0.01); return (
{lbl}
{values.map(v => { const isMax = v.pct === maxPct && v.pct > 0; return (
{fmt.pct(v.pct, 0)}
{v.count} deals
); })} ); })}
); } window.Showrooms = Showrooms;