);
}
// Plain-language explanation of goal, set rate and target, using this store's own numbers.
function GoalTip() {
const info = useContext(GoalContext);
const [open, setOpen] = useState(false);
if (!info) return null;
const top = SET_RATE_BENCHMARKS.percentiles.p75;
const own = info.baselineSource === 'store';
const belowTop = info.baseline < top;
return (
<>
{open && (
Goal, pace and target
Set rate is appointments set divided by leads received. The goal is the set rate we are aiming for: {info.goal}%.{' '}
{own
? <>It starts from this store's last 26 weeks ({info.baseline}%)
: <>This store does not have enough lead history yet, so it starts from the typical Foureyes store ({info.baseline}%)}
{belowTop
? <> and moves halfway toward the top quarter of Foureyes stores ({top}% and up).
: <>, which is already in the top quarter of Foureyes stores ({top}% and up), so the goal is 5% above its own average.}
Pace looks back: the set rate so far, compared with the goal. Teal is on pace, coral is behind.
Target looks forward: how many appointments to set a day from here to close the month's gap, if leads come in at the usual volume. If leads run lower, fewer appointments can still be on pace.
Gold is saved for achievements: streaks, hat tricks and first place.
)}
);
}
interface Status {
behind: boolean;
text: string;
}
function periodStatus(period: PeriodView): Status {
const { need, early } = period;
return need > 0
? { behind: true, text: `${need} appts behind` }
: { behind: false, text: early ? 'On pace so far' : 'On pace' };
}
// The month as seen from the week: how far behind it is, or on pace.
function monthStatus(link: MonthLink): Status {
return link.gap > 0
? { behind: true, text: `${link.gap} appts behind` }
: { behind: false, text: 'On pace' };
}
// "34% fewer than usual" becomes "34% fewer leads than usual", so it is clear what it counts.
function leadsPhrase(note: string): string {
return note.replace(/^(\d+% (?:fewer|more)) than usual$/, '$1 leads than usual');
}
function RateBlock({ label, rate, status, goal }: { label: string; rate: number; status: Status; goal?: number }) {
return (
);
}
interface RepTableProps {
period: PeriodView;
title: string;
page: number;
}
export function RepTable({ period, title, page }: RepTableProps) {
const onPage = useContext(PageContext);
const isWeek = period.key === 'week';
const pages = Math.max(1, Math.ceil(period.rows.length / PAGE_SIZE));
const shown = period.rows.slice(page * PAGE_SIZE, page * PAGE_SIZE + PAGE_SIZE);
// The busiest rep's bar is full width, across every page, so bars stay comparable.
const maxOpps = Math.max(1, ...period.rows.map((r) => r.opps));
return (
{title}
Set rate is appointments set divided by leads received. Ranked by set rate.
Rank
Rep
{isWeek ? (
{DAY_LABELS.map((d) => (
{d}
))}
) : (
Set rate
)}
{isWeek &&
Set rate
}
Appts set
Streak
{shown.map((row) => (
))}
{isWeek ? 'Each box is appointments set that day. Flame is days in a row with an appointment set.' : 'Bar: leads received, filled part appointments set, tick is the goal. Flame: days in a row.'}
{pages > 1 && (
);
}
````
### File 14 of 28: `src/modules/leaderboard/components/side-cards.tsx`
````tsx
import type { MonthLink, PeriodView, StreakRep, YesterdayView } from '@modules/leaderboard/lib/compute';
import {
CalendarCheckIcon,
FlameIcon,
SideHead,
TrendIcon,
} from '@modules/leaderboard/components/parts';
import { streakColor } from '@modules/leaderboard/components/streak-badge';
// Month screen: yesterday's count, with no target beside it. A past count is not compared with a target.
export function YesterdayCard({ y }: { y: YesterdayView }) {
const top = y.rows.filter((r) => r.count > 0).slice(0, 3);
return (
}>Appointments set yesterday
{y.total}on {y.leads} leads, {y.rate}% set rate
{top.map((r) => (
{r.name}
{r.count}
))}
{y.leadNote &&
Leads yesterday: {y.leadNote}
}
);
}
// Yesterday screen: how yesterday went, as pace.
export function YesterdayPaceCard({ y }: { y: YesterdayView }) {
return (
}>Yesterday
{y.total}appointments on {y.leads} leads
{y.onPace ? 'On pace' : 'Behind'}
{y.rate}% set rate
{y.leadNote &&
Leads were {y.leadNote}
}
);
}
// Yesterday screen: the one forward-looking number, a count for today.
export function TodayTargetCard({ link }: { link: MonthLink }) {
if (link.perDay === null || link.perDay <= 0 || !link.endLabel) return null;
return (
}>Target: today
{link.perDay}appointments
{link.gap > 0
? `At usual lead volume, closes the month's gap by ${link.endLabel}`
: `At usual lead volume, keeps the month on pace through ${link.endLabel}`}
);
}
interface StreakCardProps {
title: string;
reps: StreakRep[];
limit: number;
/** Reps with no streak, shown as a nudge to start one */
noStreak?: number;
grow?: boolean;
}
// Longest active streaks. Used for the leaders on Week and Month, and for the streaks on the line
// today on the Yesterday screen.
export function StreakCard({ title, reps, limit, noStreak, grow }: StreakCardProps) {
const shown = reps.slice(0, limit);
return (
} gold>{title}
{shown.length === 0 ? (
Nobody has a streak yet. Set an appointment to start one.
{noStreak} rep{noStreak === 1 ? '' : 's'} can start a streak today
)}
);
}
// Past days are plain counts. Days still to come show a dashed bar at the target.
export function DayChartCard({ period, aim }: { period: PeriodView; aim: number | null }) {
const days = period.dayTotals;
const showAim = aim !== null && aim > 0 && !period.isFinal;
const maxCount = days.reduce((m, d) => Math.max(m, d.count), 0);
const unit = 140 / Math.max(showAim ? (aim as number) : 0, maxCount, 1);
return (
}>Appointments by day
{showAim ? `Target: ${aim} a day at usual lead volume` : 'Appointments set each day'}
{days.map((d) => {
const done = d.state === 'done';
const height = done ? d.count * unit : showAim ? (aim as number) * unit : 0;
return (
{done ? d.count : ''}
{d.label}
);
})}
);
}
````
### File 15 of 28: `src/modules/leaderboard/components/slides.tsx`
````tsx
import type { BoardView, PeriodView, YesterdayRow } from '@modules/leaderboard/lib/compute';
import { Strip } from '@modules/leaderboard/components/parts';
import { RepTable } from '@modules/leaderboard/components/rep-table';
import {
DayChartCard,
StreakCard,
TodayTargetCard,
YesterdayCard,
YesterdayPaceCard,
} from '@modules/leaderboard/components/side-cards';
import { StreakBadge } from '@modules/leaderboard/components/streak-badge';
const SLIDE_STYLE = { display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0, gap: 20 } as const;
export function PeriodSlide({ view, period, page }: { view: BoardView; period: PeriodView; page: number }) {
const isWeek = period.key === 'week';
const name = isWeek
? period.isFinal ? 'Last week, final' : 'This week, day by day'
: period.isFinal ? 'Last month, final' : 'This month';
const eyebrow = isWeek
? period.isFinal ? 'Last week set rate' : 'Week set rate'
: period.isFinal ? 'Last month set rate' : 'Month set rate';
return (
{isWeek ? (
) : (
)}
);
}
function chipClass(chip: YesterdayRow['chip']): string {
if (chip === 'Hat trick') return 'lb-chip lb-chip--gold';
if (chip === 'First on the board') return 'lb-chip lb-chip--first';
if (chip === 'On the board') return 'lb-chip lb-chip--on';
return 'lb-chip lb-chip--building';
}
export function YesterdaySlide({ view }: { view: BoardView }) {
const y = view.yesterdayView;
const rows = y.rows.slice(0, 8);
return (
Hat trick3 or more in a dayFirst on the boardfirst appointment of the dayEmpty circles show the personal target of {view.personalTarget}. Flame is days in a row.
);
}
````
### File 16 of 28: `src/modules/leaderboard/components/streak-badge.tsx`
````tsx
import { FlameIcon } from '@modules/leaderboard/components/parts';
import '@modules/leaderboard/board-streak.css';
export const streakColor = (n: number): string =>
n >= 5 ? '#ffbe0b' : n > 0 ? '#ffffff' : 'rgba(194,222,255,0.5)';
// Days in a row with at least one appointment set. Shown from day one, and a dim flame at 0
// so a rep without a streak can see there is one to start.
export function StreakBadge({ days, size = 18 }: { days: number; size?: number }) {
const color = streakColor(days);
return (
0 ? `${days} day${days === 1 ? '' : 's'} in a row with an appointment set` : 'No streak yet'}
>
{days}
);
}
````
### File 17 of 28: `src/modules/leaderboard/lib/baseline.ts`
````ts
import { runQuery } from '@modules/leaderboard/lib/queries';
export interface Baseline {
leads: number;
sets: number;
}
// The store's trailing 26 weeks (182 days ending yesterday, store-local), on the same definition
// the board uses everywhere: appointments set (a lead's first appointment, by booking day) and
// leads received, both for leads owned by an active salesperson.
export async function fetchBaseline(organizationId: string, storeId: string): Promise {
if (!/^[A-Za-z0-9]+$/.test(storeId)) throw new Error('Unexpected store id');
const id = storeId;
const rows = await runQuery(
organizationId,
`WITH loc AS (
SELECT ID, TIMEZONE, CAST(CONVERT_TIMEZONE(TIMEZONE, CURRENT_TIMESTAMP()) AS DATE) AS TODAY
FROM FOUREYES.PUBLIC.LOCATIONS WHERE ID = '${id}'
),
owner AS (
SELECT st.CUSTOMER_OPPORTUNITY_ID AS OPP_ID,
COALESCE(MAX(IFF(st."PRIMARY", st.SALESPERSON_ID, NULL)), MAX(st.SALESPERSON_ID)) AS SP_ID
FROM FOUREYES.PUBLIC.CUSTOMER_OPPORTUNITY_SALES_TEAM st
WHERE st.ACTIVE AND st.ROLE_TYPE = 'SALESPERSON' AND st.LOCATION_ID = '${id}'
GROUP BY st.CUSTOMER_OPPORTUNITY_ID
),
firsts AS (
SELECT ID AS FIRST_ID FROM (
SELECT a.ID, ROW_NUMBER() OVER (PARTITION BY a.CUSTOMER_OPPORTUNITY_ID ORDER BY a.APPOINTMENT_CREATED_AT, a.ID) AS RN
FROM FOUREYES.PUBLIC.CUSTOMER_OPPORTUNITY_APPOINTMENTS a
WHERE a.LOCATION_ID = '${id}' AND a.APPOINTMENT_CREATED_AT IS NOT NULL
) WHERE RN = 1
),
leads AS (
SELECT COUNT(DISTINCT co.ID) AS LEADS
FROM FOUREYES.PUBLIC.CUSTOMER_OPPORTUNITIES co
JOIN loc ON loc.ID = co.LOCATION_ID
JOIN owner o ON o.OPP_ID = co.ID
JOIN FOUREYES.PUBLIC.CRM_SALESPEOPLE sp ON sp.ID = o.SP_ID AND sp.LOCATION_ID = co.LOCATION_ID
WHERE co.LOCATION_ID = '${id}' AND sp.ACTIVE
AND co.OPPORTUNITY_AT >= DATEADD(day, -190, CURRENT_DATE())
AND CAST(CONVERT_TIMEZONE('UTC', loc.TIMEZONE, co.OPPORTUNITY_AT) AS DATE) BETWEEN DATEADD(day, -182, loc.TODAY) AND DATEADD(day, -1, loc.TODAY)
),
sets AS (
SELECT COUNT(DISTINCT a.ID) AS SETS
FROM FOUREYES.PUBLIC.CUSTOMER_OPPORTUNITY_APPOINTMENTS a
JOIN firsts f ON f.FIRST_ID = a.ID
JOIN loc ON loc.ID = a.LOCATION_ID
JOIN owner o ON o.OPP_ID = a.CUSTOMER_OPPORTUNITY_ID
JOIN FOUREYES.PUBLIC.CRM_SALESPEOPLE sp ON sp.ID = o.SP_ID AND sp.LOCATION_ID = a.LOCATION_ID
WHERE a.LOCATION_ID = '${id}' AND sp.ACTIVE
AND a.APPOINTMENT_CREATED_AT >= DATEADD(day, -190, CURRENT_DATE())
AND CAST(CONVERT_TIMEZONE('UTC', loc.TIMEZONE, a.APPOINTMENT_CREATED_AT) AS DATE) BETWEEN DATEADD(day, -182, loc.TODAY) AND DATEADD(day, -1, loc.TODAY)
)
SELECT leads.LEADS AS leads, sets.SETS AS sets FROM leads, sets`
);
return { leads: Number(rows[0]?.leads ?? 0), sets: Number(rows[0]?.sets ?? 0) };
}
````
### File 18 of 28: `src/modules/leaderboard/lib/benchmarks.ts`
````ts
// Static benchmark table: Foureyes appointment set rate, aggregated across 12 dealer groups and
// 434 stores, 26 weeks ending 2026-10-05. No store or group identifiers. Replace this table to
// update the benchmark; nothing else in the app needs to change.
export const SET_RATE_BENCHMARKS = {
version: '2026-10-06',
windowWeeks: 26,
minLeads: 500,
percentiles: { p10: 9.5, p25: 11.5, p50: 15.5, p75: 18.5, p90: 22.5 },
} as const;
// Vocabulary used everywhere on the board:
// GOAL the set rate we are aiming for, a percentage
// PACE a window's set rate so far, compared with the goal (looks back, in rates)
// TARGET appointments to set from here, spread over the days left (looks forward, in counts)
export interface GoalInfo {
/** Whole-number set-rate goal, in percent */
goal: number;
/** The store's own trailing 26-week set rate, or the benchmark median when it has too few leads */
baseline: number;
baselineSource: 'store' | 'benchmark-median';
/** Leads the store typically gets in a day, from the same 26 weeks */
typicalLeadsPerDay: number;
}
// Goal rule, from the benchmark file:
// baseline = store's own set rate over the trailing 26 weeks (benchmark p50 if under 500 leads)
// below p75: goal = baseline + 0.5 x (p75 - baseline)
// at or above p75: goal = baseline x 1.05
export function computeGoal(sets: number, leads: number): GoalInfo {
const b = SET_RATE_BENCHMARKS;
const enough = leads >= b.minLeads;
const baseline = enough ? (sets / leads) * 100 : b.percentiles.p50;
const goal =
baseline < b.percentiles.p75
? baseline + 0.5 * (b.percentiles.p75 - baseline)
: baseline * 1.05;
return {
goal: Math.max(1, Math.round(goal)),
baseline: Math.round(baseline * 10) / 10,
baselineSource: enough ? 'store' : 'benchmark-median',
typicalLeadsPerDay: leads / (b.windowWeeks * 7),
};
}
````
### File 19 of 28: `src/modules/leaderboard/lib/compute.ts`
````ts
import { addDays, daysBetween, formatWeekday, monthStart, mondayOf } from './dates';
import type { ApptRow, OppRow, StoreInfo } from './queries';
// VOCABULARY, used the same way everywhere on the board:
// GOAL the set rate we are aiming for, a percentage
// PACE a window's set rate so far, compared with the goal. It looks back, in rates.
// TARGET appointments to set from here, spread over the days left. It looks forward, in counts.
// A past count is never compared with a count to aim for.
//
// SET RATE, defined once and used at every level (store, rep, day, week, month):
// set rate = appointments set in the period / leads received in the period
// An appointment is "set" on the day it is booked, and only a lead's first appointment counts,
// so a reschedule is not a second set. The lead itself can have arrived in any earlier period.
//
// RANKING: reps are ranked by set rate, plain and simple. Ties go to the rep with more
// appointments set, then to the rep with fewer leads, then by name.
//
// STREAK = consecutive store open days, ending yesterday, with at least one appointment set.
// A day when the rep received no leads and set nothing is treated as a day off: it neither adds
// to the streak nor breaks it. More than two such days in a row ends the streak.
export interface RawBoard {
store: StoreInfo;
opp: OppRow[];
appt: ApptRow[];
}
export interface BoardConfig {
/** Set-rate goal in percent. Computed from the store's own history, see benchmarks.ts. */
goal?: number;
/** Leads the store typically gets in a day */
typicalLeadsPerDay?: number;
/** Personal per-rep daily target shown as empty circles. */
personalTarget: number;
}
export interface DayCell {
date: string;
state: 'done' | 'today' | 'future';
count: number;
}
export interface RepRow {
id: string;
name: string;
initials: string;
rank: number;
/** Positive = moved up since the day before */
move: number;
/** Leads received in the period */
opps: number;
/** Appointments set in the period */
set: number;
/** Set rate, in percent */
rate: number;
streak: number;
days: DayCell[];
}
export interface PeriodView {
key: 'week' | 'month';
start: string;
end: string;
isFinal: boolean;
goal: number;
/** Axis scale for the rate bars in the rep table */
scale: number;
/** The window's pace: set rate so far */
teamRate: number;
/** Appointments set so far */
set: number;
/** Leads received so far */
opps: number;
/** Appointments still needed to be on pace at the leads received so far (never negative) */
need: number;
/** True while the sample is small */
early: boolean;
/** How lead volume compares with the usual, in words */
leadNote: string | null;
rows: RepRow[];
dayTotals: { label: string; count: number; state: DayCell['state'] }[];
}
export interface YesterdayRow {
id: string;
name: string;
initials: string;
count: number;
streak: number;
chip: 'Hat trick' | 'First on the board' | 'On the board' | 'On deck';
}
export interface YesterdayView {
date: string;
total: number;
/** Leads received yesterday */
leads: number;
/** Yesterday's pace: set rate */
rate: number;
onPace: boolean;
leadNote: string | null;
rows: YesterdayRow[];
}
export interface StreakRep {
id: string;
name: string;
initials: string;
days: number;
}
/**
* Where the month stands, and what to do next about it.
* gap is how many appointments the month is behind pace (negative when ahead).
*/
export interface MonthLink {
gap: number;
/** Appointments a day, from today to month end, that close the gap (or keep the month on pace) */
perDay: number | null;
endLabel: string | null;
}
export interface BoardView {
storeName: string;
yesterday: string;
today: string;
goal: number;
personalTarget: number;
week: PeriodView;
month: PeriodView;
monthLink: MonthLink;
yesterdayView: YesterdayView;
/** Active streaks, longest first */
streaks: StreakRep[];
/** Reps on the roster with no streak right now */
noStreak: number;
}
/** Under this many leads, a window's pace is a small sample. */
const EARLY_LEADS = 100;
const initialsOf = (name: string): string =>
name
.split(/\s+/)
.filter(Boolean)
.map((p) => p[0])
.slice(0, 2)
.join('')
.toUpperCase();
interface Agg {
id: string;
name: string;
opps: number;
set: number;
}
function aggregate(opp: OppRow[], appt: ApptRow[], start: string, end: string): Map {
const reps = new Map();
const get = (id: string, name: string): Agg => {
let a = reps.get(id);
if (!a) {
a = { id, name, opps: 0, set: 0 };
reps.set(id, a);
}
return a;
};
for (const o of opp) {
if (o.d < start || o.d > end) continue;
get(o.spId, o.name).opps += o.opps;
}
for (const p of appt) {
if (p.d < start || p.d > end) continue;
get(p.spId, p.name).set += p.sets;
}
return reps;
}
const pct = (num: number, den: number): number => (den > 0 ? Math.round((num / den) * 100) : 0);
/** Lead volume against the usual, in words. Null when there is nothing to compare with. */
function leadNoteFor(leads: number, expected: number): string | null {
if (expected <= 0) return null;
const delta = Math.round((leads / expected - 1) * 100);
if (delta <= -10) return `${Math.abs(delta)}% fewer than usual`;
if (delta >= 10) return `${delta}% more than usual`;
return 'about the usual';
}
/** Every rep with leads, best first, by set rate. */
function rankAgg(reps: Map): Agg[] {
return [...reps.values()]
.filter((a) => a.opps > 0)
.sort(
(a, b) =>
b.set / b.opps - a.set / a.opps || b.set - a.set || a.opps - b.opps || a.name.localeCompare(b.name)
);
}
const MAX_OFF_RUN = 2;
function streakFor(
repId: string,
setByRepDay: Map,
leadsByRepDay: Map,
openDays: Set,
yday: string
): number {
let streak = 0;
let offRun = 0;
let d = yday;
for (let i = 0; i < 50; i++) {
if (openDays.has(d)) {
const key = `${repId}|${d}`;
if ((setByRepDay.get(key) ?? 0) > 0) {
streak += 1;
offRun = 0;
} else if ((leadsByRepDay.get(key) ?? 0) > 0) {
break; // had leads and set nothing: the streak ends
} else {
offRun += 1; // a day off: neither extends nor breaks, up to a short run
if (offRun > MAX_OFF_RUN) break;
}
}
d = addDays(d, -1);
}
return streak;
}
function daysInMonthOf(iso: string): number {
const [y, m] = iso.split('-').map(Number);
return new Date(Date.UTC(y, m, 0)).getUTCDate();
}
function shortDate(iso: string): string {
return new Date(`${iso}T00:00:00Z`).toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
timeZone: 'UTC',
});
}
export function buildBoard(raw: RawBoard, cfg: BoardConfig): BoardView {
const { store, opp, appt } = raw;
const today = store.today;
const yday = addDays(today, -1);
// Fallback goal from the last 30 days if the caller does not supply a computed one.
const baseStart = addDays(yday, -29);
let baseOpps = 0;
let baseSet = 0;
for (const o of opp) {
if (o.d >= baseStart && o.d <= yday) baseOpps += o.opps;
}
for (const p of appt) {
if (p.d >= baseStart && p.d <= yday) baseSet += p.sets;
}
const goal = Math.max(1, cfg.goal ?? pct(baseSet, baseOpps));
const typical = cfg.typicalLeadsPerDay ?? 0;
const setByRepDay = new Map();
const storeDay = new Map();
for (const p of appt) {
setByRepDay.set(`${p.spId}|${p.d}`, (setByRepDay.get(`${p.spId}|${p.d}`) ?? 0) + p.sets);
storeDay.set(p.d, (storeDay.get(p.d) ?? 0) + p.sets);
}
const leadsByRepDay = new Map();
const leadsByDay = new Map();
for (const o of opp) {
leadsByRepDay.set(`${o.spId}|${o.d}`, (leadsByRepDay.get(`${o.spId}|${o.d}`) ?? 0) + o.opps);
leadsByDay.set(o.d, (leadsByDay.get(o.d) ?? 0) + o.opps);
}
const openDays = new Set([...storeDay.entries()].filter(([, n]) => n > 0).map(([d]) => d));
const streaks = new Map();
const streakOf = (id: string): number => {
if (!streaks.has(id)) streaks.set(id, streakFor(id, setByRepDay, leadsByRepDay, openDays, yday));
return streaks.get(id) ?? 0;
};
function period(key: 'week' | 'month'): PeriodView {
const start = key === 'week' ? mondayOf(yday) : monthStart(yday);
const end = yday;
const isFinal = key === 'week' ? mondayOf(today) !== start : monthStart(today) !== start;
const length = daysBetween(start, end);
const current = aggregate(opp, appt, start, end);
const ranked = rankAgg(current);
// Rank as of the day before, for movement arrows.
const prevRank = new Map();
if (end > start) {
const prev = aggregate(opp, appt, start, addDays(end, -1));
rankAgg(prev).forEach((a, i) => prevRank.set(a.id, i + 1));
}
const dayCells = (id: string): DayCell[] => {
if (key !== 'week') return [];
return Array.from({ length: 7 }, (_, i) => {
const date = addDays(start, i);
if (date <= end) return { date, state: 'done' as const, count: setByRepDay.get(`${id}|${date}`) ?? 0 };
if (date === today) return { date, state: 'today' as const, count: 0 };
return { date, state: 'future' as const, count: 0 };
});
};
const rows: RepRow[] = ranked.map((a, i) => ({
id: a.id,
name: a.name,
initials: initialsOf(a.name),
rank: i + 1,
move: prevRank.has(a.id) ? (prevRank.get(a.id) as number) - (i + 1) : 0,
opps: a.opps,
set: a.set,
rate: pct(a.set, a.opps),
streak: streakOf(a.id),
days: dayCells(a.id),
}));
let teamOpps = 0;
let teamSet = 0;
for (const a of current.values()) {
teamOpps += a.opps;
teamSet += a.set;
}
const teamRate = pct(teamSet, teamOpps);
const need = Math.max(0, Math.ceil((goal / 100) * teamOpps) - teamSet);
const maxRate = rows.reduce((m, r) => Math.max(m, r.rate), 0);
const scale = Math.max(60, Math.ceil((Math.max(goal, teamRate, maxRate) + 10) / 10) * 10);
const dayTotals =
key === 'week'
? Array.from({ length: 7 }, (_, i) => {
const date = addDays(start, i);
const state: DayCell['state'] = date <= end ? 'done' : date === today ? 'today' : 'future';
return { label: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'][i], count: storeDay.get(date) ?? 0, state };
})
: [];
return {
key,
start,
end,
isFinal,
goal,
scale,
teamRate,
set: teamSet,
opps: teamOpps,
need,
early: teamOpps < EARLY_LEADS,
leadNote: leadNoteFor(teamOpps, typical * length),
rows,
dayTotals,
};
}
const month = period('month');
const week = period('week');
// The month's gap, and the daily count that closes it by month end.
const gapAt = (opps: number, set: number): number => Math.ceil((goal / 100) * opps) - set;
const monthGap = gapAt(month.opps, month.set);
let perDay: number | null = null;
let endLabel: string | null = null;
if (!month.isFinal && typical > 0) {
const last = addDays(monthStart(today), daysInMonthOf(monthStart(today)) - 1);
const remaining = daysBetween(today, last); // today through month end
if (remaining > 0) {
const finalNeeded = Math.ceil((goal / 100) * (month.opps + typical * remaining));
perDay = Math.max(0, Math.ceil(Math.max(0, finalNeeded - month.set) / remaining));
endLabel = shortDate(last);
}
}
const monthLink: MonthLink = { gap: monthGap, perDay, endLabel };
// Roster = reps with leads in the last 30 days, plus anyone who set an appointment yesterday.
const roster = new Map();
for (const o of opp) {
if (o.d < addDays(yday, -29) || o.d > yday) continue;
const r = roster.get(o.spId) ?? { id: o.spId, name: o.name, opps: 0 };
r.opps += o.opps;
roster.set(o.spId, r);
}
const firstAt = new Map();
for (const p of appt) {
if (p.d === yday && p.sets > 0) {
firstAt.set(p.spId, p.firstAt);
if (!roster.has(p.spId)) roster.set(p.spId, { id: p.spId, name: p.name, opps: 0 });
}
}
const countY = (id: string): number => setByRepDay.get(`${id}|${yday}`) ?? 0;
const ordered = [...roster.values()].sort(
(a, b) => countY(b.id) - countY(a.id) || (firstAt.get(a.id) ?? '').localeCompare(firstAt.get(b.id) ?? '') || b.opps - a.opps
);
const earliest = [...firstAt.entries()].sort((a, b) => a[1].localeCompare(b[1]))[0]?.[0];
const yRows: YesterdayRow[] = ordered.map((r) => {
const count = countY(r.id);
let chip: YesterdayRow['chip'] = 'On deck';
if (count >= 3) chip = 'Hat trick';
else if (count > 0 && r.id === earliest) chip = 'First on the board';
else if (count > 0) chip = 'On the board';
return { id: r.id, name: r.name, initials: initialsOf(r.name), count, streak: streakOf(r.id), chip };
});
const yTotal = yRows.reduce((s, r) => s + r.count, 0);
const yLeads = leadsByDay.get(yday) ?? 0;
const yRate = pct(yTotal, yLeads);
const yOnPace = yTotal >= Math.ceil((goal / 100) * yLeads);
const streakList: StreakRep[] = [...roster.values()]
.map((r) => ({ id: r.id, name: r.name, initials: initialsOf(r.name), days: streakOf(r.id) }))
.filter((r) => r.days > 0)
.sort((a, b) => b.days - a.days || a.name.localeCompare(b.name));
return {
storeName: store.name,
yesterday: yday,
today,
goal,
personalTarget: cfg.personalTarget,
week,
month,
monthLink,
yesterdayView: {
date: yday,
total: yTotal,
leads: yLeads,
rate: yRate,
onPace: yOnPace,
leadNote: leadNoteFor(yLeads, typical),
rows: yRows,
},
streaks: streakList,
noStreak: roster.size - streakList.length,
};
}
export { formatWeekday };
````
### File 20 of 28: `src/modules/leaderboard/lib/constants.ts`
````ts
export const BOARD_REFRESH_MS = 15 * 60 * 1000;
````
### File 21 of 28: `src/modules/leaderboard/lib/dates.ts`
````ts
// All dates in this module are plain 'YYYY-MM-DD' strings in the store's own timezone.
// They compare correctly as strings.
export const DAY_LABELS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] as const;
export function addDays(iso: string, n: number): string {
const [y, m, d] = iso.split('-').map(Number);
const dt = new Date(Date.UTC(y, m - 1, d + n));
return dt.toISOString().slice(0, 10);
}
/** 0 = Sunday ... 6 = Saturday */
export function weekday(iso: string): number {
return new Date(`${iso}T00:00:00Z`).getUTCDay();
}
export function mondayOf(iso: string): string {
const back = (weekday(iso) + 6) % 7;
return addDays(iso, -back);
}
export function monthStart(iso: string): string {
return `${iso.slice(0, 8)}01`;
}
export function daysBetween(start: string, end: string): number {
const a = Date.parse(`${start}T00:00:00Z`);
const b = Date.parse(`${end}T00:00:00Z`);
return Math.round((b - a) / 86_400_000) + 1;
}
export function formatLong(iso: string): string {
return new Date(`${iso}T00:00:00Z`).toLocaleDateString('en-US', {
weekday: 'long',
month: 'short',
day: 'numeric',
timeZone: 'UTC',
});
}
export function formatWeekday(iso: string): string {
return new Date(`${iso}T00:00:00Z`).toLocaleDateString('en-US', {
weekday: 'long',
timeZone: 'UTC',
});
}
````
### File 22 of 28: `src/modules/leaderboard/lib/goal-context.ts`
````ts
import { createContext } from 'react';
import type { GoalInfo } from '@modules/leaderboard/lib/benchmarks';
export const GoalContext = createContext(undefined);
````
### File 23 of 28: `src/modules/leaderboard/lib/queries.ts`
````ts
import { authenticatedFetch } from '@shared/lib/api-client';
// Foureyes public API: POST /v2/intelligence-queries?organizationId=...
// Body: { statement, timeoutSeconds? }
// Response: { intelligenceQuery: { columns: [{ name, type }], rows: unknown[][], rowCount, isTruncated } }
interface IntelligenceQueryResponse {
intelligenceQuery: {
columns: { name: string; type: string }[];
rows: unknown[][];
rowCount: number;
isTruncated: boolean;
};
}
type Row = Record;
// The data service limits how many queries one account can run at once and answers 429 when the
// limit is hit. Every query in the app goes through one shared queue: at most MAX_CONCURRENT run
// together, and a 429 is retried with a growing pause before giving up.
const MAX_CONCURRENT = 2;
const MAX_RETRIES = 5;
let active = 0;
const queue: (() => void)[] = [];
function acquire(): Promise {
return new Promise((resolve) => {
if (active < MAX_CONCURRENT) {
active += 1;
resolve();
} else {
queue.push(() => {
active += 1;
resolve();
});
}
});
}
function release(): void {
active -= 1;
const next = queue.shift();
if (next) next();
}
const sleep = (ms: number): Promise => new Promise((resolve) => window.setTimeout(resolve, ms));
class RateLimitedError extends Error {}
async function attempt(organizationId: string, statement: string): Promise {
const res = await authenticatedFetch(
`/v2/intelligence-queries?organizationId=${encodeURIComponent(organizationId)}`,
{
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ statement, timeoutSeconds: 25 }),
}
);
if (res.status === 429) throw new RateLimitedError('The data service is busy');
if (!res.ok) {
const text = await res.text().catch(() => '');
throw new Error(`Data request failed (${res.status}). ${text.slice(0, 240)}`);
}
const body = (await res.json()) as IntelligenceQueryResponse;
const { columns, rows, isTruncated } = body.intelligenceQuery;
if (isTruncated) {
// Surfaced in the console so a truncated result is never silent.
console.warn('Leaderboard query result was truncated');
}
return rows.map((r) => {
const out: Row = {};
columns.forEach((c, i) => {
out[c.name.toLowerCase()] = r[i];
});
return out;
});
}
export async function runQuery(organizationId: string, statement: string): Promise {
await acquire();
try {
for (let i = 0; ; i += 1) {
try {
return await attempt(organizationId, statement);
} catch (e) {
if (e instanceof RateLimitedError) {
if (i >= MAX_RETRIES) {
throw new Error('The data service is busy right now. It will try again automatically.');
}
// Keep the slot while waiting so a busy service is not hit harder.
await sleep(1000 * 2 ** i + Math.random() * 500);
continue;
}
throw e;
}
}
} finally {
release();
}
}
const num = (v: unknown): number => Number(v ?? 0);
const str = (v: unknown): string => String(v ?? '');
// Location ids are opaque hex strings. Only allow that shape into SQL.
function safeId(id: string): string {
if (!/^[A-Za-z0-9]+$/.test(id)) throw new Error('Unexpected store id');
return id;
}
export interface StoreInfo {
id: string;
name: string;
timezone: string;
/** Today's date in the store's own timezone, YYYY-MM-DD */
today: string;
}
/** Leads received by a rep on a local day. */
export interface OppRow {
spId: string;
name: string;
d: string;
opps: number;
}
/**
* Appointments set by a rep on a local day, by the day the appointment was BOOKED.
* sets = leads whose first appointment was booked that day (the "appointments set" number).
*/
export interface ApptRow {
spId: string;
name: string;
d: string;
sets: number;
firstAt: string;
}
export async function fetchStores(organizationId: string): Promise {
const rows = await runQuery(
organizationId,
`SELECT ID AS id, NAME AS name, TIMEZONE AS tz,
CAST(CONVERT_TIMEZONE(TIMEZONE, CURRENT_TIMESTAMP()) AS DATE)::VARCHAR AS today
FROM FOUREYES.PUBLIC.LOCATIONS
ORDER BY NAME`
);
return rows.map((r) => ({
id: str(r.id),
name: str(r.name),
timezone: str(r.tz),
today: str(r.today),
}));
}
// One owner per opportunity: the primary active SALESPERSON when the CRM supplies one,
// otherwise any active SALESPERSON. Collapsed before joining so rows are never multiplied.
const ownerCte = (id: string) => `owner AS (
SELECT st.CUSTOMER_OPPORTUNITY_ID AS OPP_ID,
COALESCE(MAX(IFF(st."PRIMARY", st.SALESPERSON_ID, NULL)), MAX(st.SALESPERSON_ID)) AS SP_ID
FROM FOUREYES.PUBLIC.CUSTOMER_OPPORTUNITY_SALES_TEAM st
WHERE st.ACTIVE AND st.ROLE_TYPE = 'SALESPERSON' AND st.LOCATION_ID = '${id}'
GROUP BY st.CUSTOMER_OPPORTUNITY_ID
)`;
/** Leads received per rep per local day (the denominator of set rate). */
export async function fetchOppRows(organizationId: string, storeId: string): Promise {
const id = safeId(storeId);
const rows = await runQuery(
organizationId,
`WITH loc AS (
SELECT ID, TIMEZONE FROM FOUREYES.PUBLIC.LOCATIONS WHERE ID = '${id}'
),
${ownerCte(id)},
opps AS (
SELECT co.ID AS OPP_ID, o.SP_ID,
CAST(CONVERT_TIMEZONE('UTC', loc.TIMEZONE, co.OPPORTUNITY_AT) AS DATE) AS D
FROM FOUREYES.PUBLIC.CUSTOMER_OPPORTUNITIES co
JOIN loc ON loc.ID = co.LOCATION_ID
JOIN owner o ON o.OPP_ID = co.ID
WHERE co.LOCATION_ID = '${id}'
AND co.OPPORTUNITY_AT >= DATEADD(day, -50, CURRENT_DATE())
)
SELECT CAST(sp.ID AS VARCHAR) AS sp_id, sp.FULL_NAME AS name, CAST(op.D AS VARCHAR) AS d,
COUNT(DISTINCT op.OPP_ID) AS opps
FROM opps op
JOIN FOUREYES.PUBLIC.CRM_SALESPEOPLE sp ON sp.ID = op.SP_ID AND sp.LOCATION_ID = '${id}'
WHERE sp.ACTIVE
GROUP BY 1, 2, 3`
);
return rows.map((r) => ({
spId: str(r.sp_id),
name: str(r.name),
d: str(r.d),
opps: num(r.opps),
}));
}
/**
* Appointments by the day they were set, credited to the rep who owns the lead today.
* A lead's first appointment ever is what counts as "set", so a reschedule is not a second set.
*/
export async function fetchApptRows(organizationId: string, storeId: string): Promise {
const id = safeId(storeId);
const rows = await runQuery(
organizationId,
`WITH loc AS (
SELECT ID, TIMEZONE FROM FOUREYES.PUBLIC.LOCATIONS WHERE ID = '${id}'
),
${ownerCte(id)},
firsts AS (
SELECT ID AS FIRST_ID FROM (
SELECT a.ID, ROW_NUMBER() OVER (PARTITION BY a.CUSTOMER_OPPORTUNITY_ID ORDER BY a.APPOINTMENT_CREATED_AT, a.ID) AS RN
FROM FOUREYES.PUBLIC.CUSTOMER_OPPORTUNITY_APPOINTMENTS a
WHERE a.LOCATION_ID = '${id}' AND a.APPOINTMENT_CREATED_AT IS NOT NULL
) WHERE RN = 1
)
SELECT CAST(sp.ID AS VARCHAR) AS sp_id, sp.FULL_NAME AS name,
CAST(CONVERT_TIMEZONE('UTC', loc.TIMEZONE, a.APPOINTMENT_CREATED_AT) AS DATE)::VARCHAR AS d,
COUNT(DISTINCT IFF(f.FIRST_ID IS NOT NULL, a.ID, NULL)) AS sets,
MIN(IFF(f.FIRST_ID IS NOT NULL, CONVERT_TIMEZONE('UTC', loc.TIMEZONE, a.APPOINTMENT_CREATED_AT), NULL))::VARCHAR AS first_at
FROM FOUREYES.PUBLIC.CUSTOMER_OPPORTUNITY_APPOINTMENTS a
JOIN loc ON loc.ID = a.LOCATION_ID
JOIN owner o ON o.OPP_ID = a.CUSTOMER_OPPORTUNITY_ID
JOIN FOUREYES.PUBLIC.CRM_SALESPEOPLE sp ON sp.ID = o.SP_ID AND sp.LOCATION_ID = a.LOCATION_ID
LEFT JOIN firsts f ON f.FIRST_ID = a.ID
WHERE a.LOCATION_ID = '${id}'
AND a.APPOINTMENT_CREATED_AT >= DATEADD(day, -50, CURRENT_DATE())
AND sp.ACTIVE
GROUP BY 1, 2, 3`
);
return rows.map((r) => ({
spId: str(r.sp_id),
name: str(r.name),
d: str(r.d),
sets: num(r.sets),
firstAt: str(r.first_at),
}));
}
````
### File 24 of 28: `src/modules/leaderboard/lib/use-board-data.ts`
````ts
import { useEffect, useState } from 'react';
import { fetchApptRows, fetchOppRows, fetchStores, type StoreInfo } from './queries';
import type { RawBoard } from './compute';
import { BOARD_REFRESH_MS } from './constants';
interface Async {
data: T | undefined;
error: string | undefined;
loading: boolean;
}
const errorText = (e: unknown): string => (e instanceof Error ? e.message : String(e));
// Loads one store's numbers and refreshes every 15 minutes. The data itself updates once a day,
// so the refresh mostly makes sure a screen left on overnight rolls over to the new day.
export function useBoardData(
organizationId: string | undefined,
store: StoreInfo | undefined
): Async {
const [state, setState] = useState>({
data: undefined,
error: undefined,
loading: true,
});
const storeId = store?.id;
useEffect(() => {
if (!organizationId || !storeId) return;
let cancelled = false;
setState((s) => ({
data: s.data?.store.id === storeId ? s.data : undefined,
error: undefined,
loading: true,
}));
const load = async () => {
try {
const [stores, opp, appt] = await Promise.all([
fetchStores(organizationId),
fetchOppRows(organizationId, storeId),
fetchApptRows(organizationId, storeId),
]);
const fresh = stores.find((s) => s.id === storeId);
if (!fresh) throw new Error('That store is no longer available');
if (!cancelled) {
setState({ data: { store: fresh, opp, appt }, error: undefined, loading: false });
}
} catch (e: unknown) {
if (!cancelled) {
setState((s) => ({ data: s.data, error: errorText(e), loading: false }));
}
}
};
void load();
const timer = window.setInterval(() => void load(), BOARD_REFRESH_MS);
return () => {
cancelled = true;
window.clearInterval(timer);
};
}, [organizationId, storeId]);
return state;
}
````
### File 25 of 28: `src/modules/leaderboard/lib/use-goal.ts`
````ts
import { useEffect, useState } from 'react';
import { fetchBaseline } from '@modules/leaderboard/lib/baseline';
import { computeGoal, type GoalInfo } from '@modules/leaderboard/lib/benchmarks';
import type { StoreInfo } from '@modules/leaderboard/lib/queries';
interface GoalState {
data: GoalInfo | undefined;
error: string | undefined;
}
// The goal is computed from the store's own trailing 26 weeks plus the static benchmark table.
// It moves slowly, so it is loaded once per store.
export function useGoal(organizationId: string | undefined, store: StoreInfo | undefined): GoalState {
const [state, setState] = useState({ data: undefined, error: undefined });
const storeId = store?.id;
useEffect(() => {
if (!organizationId || !storeId) return;
let cancelled = false;
setState({ data: undefined, error: undefined });
fetchBaseline(organizationId, storeId)
.then((b) => {
if (!cancelled) setState({ data: computeGoal(b.sets, b.leads), error: undefined });
})
.catch((e: unknown) => {
if (!cancelled) setState({ data: undefined, error: e instanceof Error ? e.message : String(e) });
});
return () => {
cancelled = true;
};
}, [organizationId, storeId]);
return state;
}
````
### File 26 of 28: `src/modules/leaderboard/lib/use-stores.ts`
````ts
import { useEffect, useState } from 'react';
import { fetchStores, type StoreInfo } from './queries';
interface Async {
data: T | undefined;
error: string | undefined;
loading: boolean;
}
const errorText = (e: unknown): string => (e instanceof Error ? e.message : String(e));
export function useStores(organizationId: string | undefined): Async {
const [state, setState] = useState>({
data: undefined,
error: undefined,
loading: true,
});
useEffect(() => {
if (!organizationId) return;
let cancelled = false;
setState({ data: undefined, error: undefined, loading: true });
fetchStores(organizationId)
.then((data) => {
if (!cancelled) setState({ data, error: undefined, loading: false });
})
.catch((e: unknown) => {
if (!cancelled) setState({ data: undefined, error: errorText(e), loading: false });
});
return () => {
cancelled = true;
};
}, [organizationId]);
return state;
}
````
### File 27 of 28: `src/modules/leaderboard/pages/board-page.tsx`
````tsx
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useSearchParams } from 'react-router';
import { useOrganization } from '@shared/hooks/use-organization';
import { useStores } from '@modules/leaderboard/lib/use-stores';
import { useBoardData } from '@modules/leaderboard/lib/use-board-data';
import { useGoal } from '@modules/leaderboard/lib/use-goal';
import { GoalContext } from '@modules/leaderboard/lib/goal-context';
import { buildBoard, type BoardView } from '@modules/leaderboard/lib/compute';
import { Header, type SlideKey } from '@modules/leaderboard/components/parts';
import { PAGE_SIZE, PageContext } from '@modules/leaderboard/components/rep-table';
import { PeriodSlide, YesterdaySlide } from '@modules/leaderboard/components/slides';
import '@modules/leaderboard/board-base.css';
import '@modules/leaderboard/board-slides.css';
import '@modules/leaderboard/board-controls.css';
const DESIGN_W = 1920;
const DESIGN_H = 1080;
const STORE_KEY = 'leaderboard.store';
const MANUAL_VIEWS: SlideKey[] = ['yesterday', 'week', 'month'];
function useFit() {
const calc = () => {
const scale = Math.min(window.innerWidth / DESIGN_W, window.innerHeight / DESIGN_H);
return {
scale,
left: (window.innerWidth - DESIGN_W * scale) / 2,
top: (window.innerHeight - DESIGN_H * scale) / 2,
};
};
const [fit, setFit] = useState(calc);
useEffect(() => {
const onResize = () => setFit(calc());
window.addEventListener('resize', onResize);
return () => window.removeEventListener('resize', onResize);
}, []);
return fit;
}
function readStore(): string | null {
try {
return window.localStorage.getItem(STORE_KEY);
} catch {
return null;
}
}
function pagesFor(rows: number): number {
return Math.max(1, Math.ceil(rows / PAGE_SIZE));
}
function rowsFor(key: SlideKey, view: BoardView): number {
if (key === 'week') return view.week.rows.length;
if (key === 'month') return view.month.rows.length;
return 0;
}
// "Through Oct 5": the last day the data covers.
function throughLabel(iso: string): string {
const d = new Date(`${iso}T00:00:00Z`).toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
timeZone: 'UTC',
});
return `Through ${d}`;
}
function Message({ title, body }: { title: string; body: string }) {
return (
{title}
{body}
);
}
export function BoardPage() {
const fit = useFit();
const { organizationId, isLoading: orgLoading } = useOrganization();
const [params, setParams] = useSearchParams();
const stores = useStores(organizationId);
const storeList = stores.data ?? [];
const wanted = params.get('store') ?? readStore();
const store = storeList.find((s) => s.id === wanted) ?? storeList[0];
const board = useBoardData(organizationId, store);
const goalState = useGoal(organizationId, store);
const goalInfo = goalState.data;
// Goal is computed, not set by hand: see lib/benchmarks.ts. Pace and target follow from it.
const personalParam = Number(params.get('personal'));
const view = useMemo(
() =>
board.data && goalInfo
? buildBoard(board.data, {
goal: goalInfo.goal,
typicalLeadsPerDay: goalInfo.typicalLeadsPerDay,
personalTarget: personalParam > 0 ? personalParam : 2,
})
: undefined,
[board.data, goalInfo, personalParam]
);
// The viewer picks the screen. It starts on the week, or on the screen named in the address.
const viewParam = params.get('view') as SlideKey | null;
const [current, setCurrent] = useState(viewParam && MANUAL_VIEWS.includes(viewParam) ? viewParam : 'week');
const [manualPage, setManualPage] = useState(0);
const storeId = store?.id;
useEffect(() => {
setManualPage(0);
}, [storeId]);
const updateParams = useCallback(
(changes: Record) => {
const next = new URLSearchParams(params);
for (const [k, v] of Object.entries(changes)) {
if (v === null) next.delete(k);
else next.set(k, v);
}
setParams(next, { replace: true });
},
[params, setParams]
);
const onStore = useCallback(
(id: string) => {
try {
window.localStorage.setItem(STORE_KEY, id);
} catch {
// Remembering the store is a convenience only.
}
updateParams({ store: id });
},
[updateParams]
);
const onTab = useCallback(
(key: SlideKey) => {
setCurrent(key);
setManualPage(0);
updateParams({ view: key });
},
[updateParams]
);
const pages = view ? pagesFor(rowsFor(current, view)) : 1;
const page = Math.min(manualPage, pages - 1);
let body;
if (orgLoading || stores.loading) {
body = ;
} else if (!organizationId) {
body = ;
} else if (stores.error) {
body = ;
} else if (!store) {
body = ;
} else if (!view && (board.error || goalState.error)) {
body = ;
} else if (!view) {
body = ;
} else if (current === 'yesterday') {
body = ;
} else if (current === 'week') {
body = ;
} else {
body = ;
}
return (
setFailed(true)} />;
}
export function Header({ stores, storeId, onStore, freshness, active, onTab }: HeaderProps) {
const { logout } = useAuth();
return (