/* global React, ReactDOM */ const { useState, useEffect, useRef, useMemo } = React; // ───────────────────────────────────────────────────────────── // MOCK DATA — TODO: replace with /api/trellus/leaderboard fetch // ───────────────────────────────────────────────────────────── const DEALERSHIP = "RIVERSIDE FORD — NORTH LOT"; const TEAM_DAILY_GOAL = 50; // total appointments target for the lot today const SEED_REPS = [ { id: 1, name: "Marcus Vega", initials: "MV", color: "#F5B800", dials_made: 184, dials_connected: 47, talk_time_seconds: 7820, appointments_set: 11, last_call_at: 12, status: "ON_FIRE", dispositions: { connected: 47, no_answer: 92, voicemail: 31, wrong_number: 5, stumped: 23, demo_booked: 11, callback_requested: 8 } }, { id: 2, name: "Tanya Brooks", initials: "TB", color: "#E26A4F", dials_made: 142, dials_connected: 33, talk_time_seconds: 5410, appointments_set: 7, last_call_at: 38, status: "ON_FIRE", dispositions: { connected: 33, no_answer: 80, voicemail: 22, wrong_number: 2, stumped: 14, demo_booked: 7, callback_requested: 6 } }, { id: 3, name: "Devin Park", initials: "DP", color: "#7CB1F0", dials_made: 128, dials_connected: 28, talk_time_seconds: 4220, appointments_set: 6, last_call_at: 91, status: "ON_FIRE", dispositions: { connected: 28, no_answer: 72, voicemail: 24, wrong_number: 4, stumped: 12, demo_booked: 6, callback_requested: 5 } }, { id: 4, name: "Rosa Klein", initials: "RK", color: "#9C7BD9", dials_made: 117, dials_connected: 24, talk_time_seconds: 3905, appointments_set: 5, last_call_at: 174, status: "ACTIVE", dispositions: { connected: 24, no_answer: 65, voicemail: 21, wrong_number: 3, stumped: 11, demo_booked: 5, callback_requested: 4 } }, { id: 5, name: "Jamal Atwater", initials: "JA", color: "#5BB58A", dials_made: 103, dials_connected: 19, talk_time_seconds: 3120, appointments_set: 4, last_call_at: 63, status: "ACTIVE", dispositions: { connected: 19, no_answer: 61, voicemail: 18, wrong_number: 5, stumped: 9, demo_booked: 4, callback_requested: 3 } }, { id: 6, name: "Priya Sandoval", initials: "PS", color: "#D89C5B", dials_made: 88, dials_connected: 14, talk_time_seconds: 2010, appointments_set: 3, last_call_at: 6, status: "ACTIVE", dispositions: { connected: 14, no_answer: 54, voicemail: 16, wrong_number: 4, stumped: 7, demo_booked: 3, callback_requested: 2 } }, { id: 7, name: "Cole Heffernan", initials: "CH", color: "#6F7AA8", dials_made: 61, dials_connected: 9, talk_time_seconds: 1240, appointments_set: 2, last_call_at: 1421, status: "IDLE", dispositions: { connected: 9, no_answer: 40, voicemail: 10, wrong_number: 2, stumped: 5, demo_booked: 2, callback_requested: 1 } }, { id: 8, name: "Beth Calloway", initials: "BC", color: "#C268A2", dials_made: 44, dials_connected: 6, talk_time_seconds: 720, appointments_set: 1, last_call_at: 2207, status: "IDLE", dispositions: { connected: 6, no_answer: 30, voicemail: 7, wrong_number: 1, stumped: 2, demo_booked: 1, callback_requested: 1 } }, { id: 9, name: "Avery Quintero", initials: "AQ", color: "#4FB3B5", dials_made: 156, dials_connected: 38, talk_time_seconds: 6210, appointments_set: 8, last_call_at: 22, status: "ON_FIRE", dispositions: { connected: 38, no_answer: 82, voicemail: 26, wrong_number: 3, stumped: 19, demo_booked: 8, callback_requested: 6 } }, { id: 10, name: "Sami Doherty", initials: "SD", color: "#F08A6E", dials_made: 134, dials_connected: 29, talk_time_seconds: 4880, appointments_set: 6, last_call_at: 47, status: "ACTIVE", dispositions: { connected: 29, no_answer: 74, voicemail: 22, wrong_number: 3, stumped: 15, demo_booked: 6, callback_requested: 4 } }, { id: 11, name: "Khalid Osman", initials: "KO", color: "#8ECD68", dials_made: 121, dials_connected: 26, talk_time_seconds: 4205, appointments_set: 5, last_call_at: 14, status: "ON_FIRE", dispositions: { connected: 26, no_answer: 70, voicemail: 19, wrong_number: 2, stumped: 13, demo_booked: 5, callback_requested: 4 } }, { id: 12, name: "Lana Ruiz", initials: "LR", color: "#E2A4D1", dials_made: 109, dials_connected: 22, talk_time_seconds: 3540, appointments_set: 4, last_call_at: 134, status: "ACTIVE", dispositions: { connected: 22, no_answer: 64, voicemail: 17, wrong_number: 3, stumped: 11, demo_booked: 4, callback_requested: 3 } }, { id: 13, name: "Eddie Marchetti", initials: "EM", color: "#C2A35B", dials_made: 96, dials_connected: 17, talk_time_seconds: 2740, appointments_set: 4, last_call_at: 81, status: "ACTIVE", dispositions: { connected: 17, no_answer: 58, voicemail: 16, wrong_number: 2, stumped: 10, demo_booked: 4, callback_requested: 2 } }, { id: 14, name: "Noor Bashir", initials: "NB", color: "#9D6BB5", dials_made: 92, dials_connected: 16, talk_time_seconds: 2380, appointments_set: 3, last_call_at: 53, status: "ACTIVE", dispositions: { connected: 16, no_answer: 56, voicemail: 14, wrong_number: 3, stumped: 9, demo_booked: 3, callback_requested: 3 } }, { id: 15, name: "Trevor Lin", initials: "TL", color: "#5C9DD8", dials_made: 78, dials_connected: 13, talk_time_seconds: 1980, appointments_set: 3, last_call_at: 110, status: "ACTIVE", dispositions: { connected: 13, no_answer: 50, voicemail: 12, wrong_number: 2, stumped: 7, demo_booked: 3, callback_requested: 1 } }, { id: 16, name: "Maya Reinholt", initials: "MR", color: "#EEAA55", dials_made: 70, dials_connected: 11, talk_time_seconds: 1610, appointments_set: 2, last_call_at: 220, status: "ACTIVE", dispositions: { connected: 11, no_answer: 45, voicemail: 11, wrong_number: 2, stumped: 6, demo_booked: 2, callback_requested: 2 } }, { id: 17, name: "Garrett Mosley", initials: "GM", color: "#7090B0", dials_made: 58, dials_connected: 8, talk_time_seconds: 1110, appointments_set: 2, last_call_at: 980, status: "IDLE", dispositions: { connected: 8, no_answer: 38, voicemail: 9, wrong_number: 2, stumped: 5, demo_booked: 2, callback_requested: 1 } }, { id: 18, name: "Ines Vasquez", initials: "IV", color: "#D87CA0", dials_made: 36, dials_connected: 4, talk_time_seconds: 560, appointments_set: 1, last_call_at: 2680, status: "IDLE", dispositions: { connected: 4, no_answer: 24, voicemail: 6, wrong_number: 1, stumped: 1, demo_booked: 1, callback_requested: 0 } }, ]; const OUTCOMES = [ { key: "connected", label: "CONNECTED", tone: "good", weight: 18 }, { key: "no_answer", label: "NO ANSWER", tone: "muted", weight: 42 }, { key: "voicemail", label: "VOICEMAIL", tone: "muted", weight: 20 }, { key: "wrong_number", label: "WRONG NUMBER", tone: "warn", weight: 4 }, { key: "stumped", label: "STUMPED", tone: "warn", weight: 9 }, { key: "demo_booked", label: "DEMO BOOKED", tone: "fire", weight: 4 }, { key: "callback_requested", label: "CALLBACK", tone: "good", weight: 5 }, ]; const COMMENTARY = { demo_booked: [ { emoji: "👑", text: "sounded like an 850 credit score · white new balances for sure" }, { emoji: "👑", text: "didn't even ask the price" }, { emoji: "🤯", text: "OMG he booked himself basically" }, { emoji: "💰", text: "this one's ready to sign on the hood" }, { emoji: "⚡", text: "told me his trade was a peach" }, { emoji: "👑", text: "king behavior. pulling up Saturday" }, ], connected: [ { emoji: "👌", text: "warm one · actually picked up" }, { emoji: "🎙️", text: "got him talking about the new Tahoe" }, { emoji: "🔥", text: "locked in. running the pitch" }, { emoji: "☕", text: "he had time today thank god" }, ], callback_requested: [ { emoji: "📞", text: "says he'll call back fr fr" }, { emoji: "⏳", text: "thinking it over · keep him warm" }, { emoji: "📅", text: "asked us to ring back at 3" }, ], no_answer: [ { emoji: "👻", text: "ghost city" }, { emoji: "📵", text: "crickets" }, { emoji: "😶", text: "nobody home" }, ], voicemail: [ { emoji: "📼", text: "left a smooth one" }, { emoji: "🎤", text: "tape city. dropped the script" }, { emoji: "📩", text: "voicemail · he'll hear it" }, ], gatekeeper: [], wrong_number: [ { emoji: "🙃", text: "this number is a barber shop now" }, { emoji: "🔀", text: "data quality issue · wrong guy" }, { emoji: "❓", text: "asked for Steve, got Stephanie" }, ], stumped: [ { emoji: "💀", text: "keep shooting your shot king" }, { emoji: "😂", text: "guy said he had to talk to his wife. ok pal" }, { emoji: "😂", text: "that guy was in a bad mood anyways" }, { emoji: "💀", text: "rough one · next dial" }, { emoji: "😮‍💨", text: "got hung up on. shake it off" }, { emoji: "💀", text: "told me to lose his number lol" }, { emoji: "💪", text: "stay locked in. on to the next" }, ], }; const pickCommentary = (key) => { const arr = COMMENTARY[key]; if (!arr) return null; return arr[Math.floor(Math.random()*arr.length)]; }; // ───────────────────────────────────────────────────────────── // CHAT ROOM — fake users + seeded backlog + idle banter // ───────────────────────────────────────────────────────────── const CHAT_USERS = [ { id: 1, handle: "M.VEGA", color: "#F5B800", role: "rep" }, { id: 2, handle: "T.BROOKS", color: "#E26A4F", role: "rep" }, { id: 3, handle: "D.PARK", color: "#7CB1F0", role: "rep" }, { id: 4, handle: "R.KLEIN", color: "#9C7BD9", role: "rep" }, { id: 5, handle: "J.ATWATER", color: "#5BB58A", role: "rep" }, { id: 6, handle: "P.SANDOVAL", color: "#D89C5B", role: "rep" }, { id: 7, handle: "C.HEFFERNAN", color: "#6F7AA8", role: "rep" }, { id: 8, handle: "B.CALLOWAY", color: "#C268A2", role: "rep" }, { id: 9, handle: "M.RIVERA", color: "#FFFFFF", role: "gsm" }, ]; const userById = (id) => CHAT_USERS.find(u => u.id === id) || CHAT_USERS[0]; // Seeded backlog — appears as if the chat has been going all morning const CHAT_BACKLOG = [ { from: 9, text: "$50 BOUNTY UP — first 3 demos wins. GO." }, { from: 1, text: "say less" }, { from: 2, text: "i got u" }, { from: 5, text: "🫡" }, { from: 1, text: "just booked one. dude is pulling up sat" }, { from: 9, text: "🔥🔥🔥 @M.VEGA" }, { from: 5, text: "let him cook fr" }, { from: 7, text: "..." }, { from: 9, text: "@C.HEFFERNAN you good?" }, { from: 7, text: "yeah was in BR" }, { from: 3, text: "lol" }, { from: 4, text: "got hung up on twice already today 💀" }, { from: 6, text: "skill issue 😂" }, { from: 4, text: "@P.SANDOVAL ill remember that" }, { from: 2, text: "yall the white new balances guy from yest just rebooked" }, { from: 1, text: "850 credit score for sure" }, { from: 9, text: "next spiff hits at 100 dials. KEEP DIALING" }, ]; // ───────────────────────────────────────────────────────────── // SALES FLOOR — fictional monthly car sales data // ───────────────────────────────────────────────────────────── const SALES_MONTH = "MAY · MONTH-TO-DATE"; const SALES_REPS = [ { id: 1, name: "Marcus Vega", initials: "MV", color: "#F5B800", units: 24, front_gross: 41200, back_gross: 22800, top_sale: { vehicle: "'25 Tahoe Z71", price: 71500 }, csi: 96, last_sale: "today" }, { id: 2, name: "Tanya Brooks", initials: "TB", color: "#E26A4F", units: 21, front_gross: 36700, back_gross: 19400, top_sale: { vehicle: "'25 Mustang GT", price: 58200 }, csi: 94, last_sale: "today" }, { id: 3, name: "Devin Park", initials: "DP", color: "#7CB1F0", units: 18, front_gross: 33500, back_gross: 17100, top_sale: { vehicle: "'24 F-150 Lariat", price: 64800 }, csi: 92, last_sale: "yest" }, { id: 4, name: "Rosa Klein", initials: "RK", color: "#9C7BD9", units: 16, front_gross: 28200, back_gross: 14300, top_sale: { vehicle: "'25 Bronco Sport", price: 42100 }, csi: 95, last_sale: "today" }, { id: 5, name: "Jamal Atwater", initials: "JA", color: "#5BB58A", units: 14, front_gross: 25600, back_gross: 12800, top_sale: { vehicle: "'25 Explorer ST", price: 56400 }, csi: 90, last_sale: "yest" }, { id: 6, name: "Priya Sandoval", initials: "PS", color: "#D89C5B", units: 13, front_gross: 22900, back_gross: 11400, top_sale: { vehicle: "'24 Escape Hybrid", price: 38200 }, csi: 93, last_sale: "today" }, { id: 7, name: "Avery Quintero", initials: "AQ", color: "#4FB3B5", units: 12, front_gross: 20100, back_gross: 9800, top_sale: { vehicle: "'25 Edge Titanium", price: 48700 }, csi: 91, last_sale: "today" }, { id: 8, name: "Sami Doherty", initials: "SD", color: "#F08A6E", units: 11, front_gross: 18800, back_gross: 8600, top_sale: { vehicle: "'24 Maverick XLT", price: 32400 }, csi: 89, last_sale: "yest" }, { id: 9, name: "Khalid Osman", initials: "KO", color: "#8ECD68", units: 10, front_gross: 16400, back_gross: 7900, top_sale: { vehicle: "'25 Ranger Lariat", price: 44900 }, csi: 88, last_sale: "yest" }, { id: 10, name: "Lana Ruiz", initials: "LR", color: "#E2A4D1", units: 9, front_gross: 14700, back_gross: 7100, top_sale: { vehicle: "'24 Escape ST-Line", price: 36800 }, csi: 92, last_sale: "3 days" }, { id: 11, name: "Eddie Marchetti", initials: "EM", color: "#C2A35B", units: 8, front_gross: 12800, back_gross: 6200, top_sale: { vehicle: "'25 Bronco Heritage", price: 52300 }, csi: 87, last_sale: "yest" }, { id: 12, name: "Cole Heffernan", initials: "CH", color: "#6F7AA8", units: 6, front_gross: 9400, back_gross: 4400, top_sale: { vehicle: "'24 Edge SEL", price: 41200 }, csi: 84, last_sale: "4 days" }, { id: 13, name: "Beth Calloway", initials: "BC", color: "#C268A2", units: 4, front_gross: 6200, back_gross: 2900, top_sale: { vehicle: "'24 EcoSport SES", price: 28400 }, csi: 86, last_sale: "5 days" }, ]; const RECENT_DELIVERIES = [ { repId: 1, vehicle: "'25 Tahoe Z71", buyer: "T. NGUYEN", price: 71500, time: "14m ago" }, { repId: 4, vehicle: "'25 Bronco Sport BL", buyer: "L. ANDREWS", price: 42100, time: "1h ago" }, { repId: 2, vehicle: "'25 Mustang GT Coupe", buyer: "R. PATEL", price: 58200, time: "2h ago" }, { repId: 6, vehicle: "'24 Escape Hybrid", buyer: "D. KIM", price: 38200, time: "3h ago" }, { repId: 1, vehicle: "'25 Expedition Max", buyer: "M. CHOI", price: 78400, time: "yest" }, { repId: 7, vehicle: "'25 Edge Titanium", buyer: "S. JACKSON", price: 48700, time: "yest" }, { repId: 3, vehicle: "'24 F-150 Lariat 4WD", buyer: "B. SHARMA", price: 64800, time: "yest" }, { repId: 5, vehicle: "'25 Explorer ST", buyer: "P. ROMERO", price: 56400, time: "2 days" }, ]; const SALES_GOAL_UNITS = 200; // dealership monthly target const fmtMoney = (n) => "$" + Math.round(n).toLocaleString(); const fmtMoneyK = (n) => "$" + (n/1000).toFixed(n >= 100000 ? 0 : 1) + "K"; // Pool of fictional vehicles + buyers for the live sales sim const VEHICLE_POOL = [ "'25 F-150 Lariat 4WD", "'25 Mustang GT Coupe", "'25 Bronco Sport BL", "'24 Edge Titanium", "'25 Explorer ST", "'24 Escape Hybrid SE", "'25 Ranger Lariat", "'25 Maverick XLT Hybrid", "'25 Expedition Max", "'25 Tahoe Z71", "'24 Bronco Heritage", "'25 Edge SEL AWD", "'24 F-250 Platinum", "'25 Mustang Mach-E", "'25 Transit Connect", "'25 Bronco Wildtrak", "'25 F-150 Raptor", "'24 Mustang EcoBoost", "'25 Maverick Tremor", ]; const BUYER_INITIALS = [ "A. CHEN","B. ALONSO","C. MURPHY","D. SHARMA","E. PATEL","F. JOHNSON","G. KIM","H. PARKER", "I. LEE","J. ROMERO","K. NGUYEN","L. SMITH","M. ROSS","N. WALKER","O. BLAKE","P. TAYLOR", "Q. ESPINOZA","R. BUTLER","S. DELGADO","T. HOWARD","U. KAUR","V. FOSTER", ]; // Live sales simulator — generates a new sale every 5–11s, mutates units + // gross on the seller's row, and pushes an event into the feed. function useSalesSim() { const [reps, setReps] = useState(SALES_REPS); const [events, setEvents] = useState([]); // newest first const idRef = useRef(0); const repsRef = useRef(reps); useEffect(() => { repsRef.current = reps; }, [reps]); useEffect(() => { let to; const tick = () => { const current = repsRef.current; // weight by current units (success breeds success), with floor so cold // sellers still have a chance. const totalW = current.reduce((s, r) => s + r.units + 4, 0); let r = Math.random() * totalW; let chosen = current[0]; for (const rep of current) { r -= rep.units + 4; if (r <= 0) { chosen = rep; break; } } const vehicle = VEHICLE_POOL[Math.floor(Math.random() * VEHICLE_POOL.length)]; const buyer = BUYER_INITIALS[Math.floor(Math.random() * BUYER_INITIALS.length)]; const price = 28000 + Math.floor(Math.random() * 52000); const frontGross = 700 + Math.floor(Math.random() * 2800); const backGross = 350 + Math.floor(Math.random() * 1800); setReps((prev) => prev.map((rp) => rp.id === chosen.id ? { ...rp, units: rp.units + 1, front_gross: rp.front_gross + frontGross, back_gross: rp.back_gross + backGross, last_sale: "just now", } : rp)); const id = ++idRef.current; setEvents((prev) => [{ id, rep: chosen, vehicle, buyer, price, time: new Date(), frontGross, backGross, }, ...prev].slice(0, 14)); to = setTimeout(tick, 5000 + Math.random() * 6000); }; to = setTimeout(tick, 3500); return () => clearTimeout(to); }, []); return { reps, events }; } // Drips in over time const IDLE_BANTER = [ "anyone got tums", "this guy fr", "wd", "let him cook", "🔥", "smash", "next dial fellas", "brb · gotta hit the head", "send help", "im locked in", "going crazy on the dialer rn", "👀", "got one warm", "tell me why he asked for the price first thing 💀", "lol", "lmao", "💀💀💀", "skill issue", "voicemail city today", "stop ghosting me chad", "ringer dude", "@everyone hydrate", "got a callback fr", "im built different", "save my soul", ]; function pickOutcome() { const total = OUTCOMES.reduce((s, o) => s + o.weight, 0); let r = Math.random() * total; for (const o of OUTCOMES) { r -= o.weight; if (r <= 0) return o; } return OUTCOMES[0]; } // ───────────────────────────────────────────────────────────── // ANIMATED NUMBER — smooth tween between values // Defensive: any NaN / Infinity / absurdly-large input is coerced to a safe // finite number before being tweened or rendered. // ───────────────────────────────────────────────────────────── const TICK_HARD_MAX = 1_000_000; // anything past this is corruption — clamp. function safeNum(n, fallback = 0) { if (typeof n !== "number" || !Number.isFinite(n)) return fallback; if (Math.abs(n) > TICK_HARD_MAX) return Math.sign(n) * TICK_HARD_MAX; return n; } function useTween(value, ms = 700) { const safeValue = safeNum(value); const [display, setDisplay] = useState(safeValue); const fromRef = useRef(safeValue); const startRef = useRef(performance.now()); const targetRef = useRef(safeValue); useEffect(() => { if (safeValue === targetRef.current) return; fromRef.current = safeNum(display, safeValue); targetRef.current = safeValue; startRef.current = performance.now(); let raf; const tick = (t) => { const k = Math.min(1, (t - startRef.current) / ms); const ease = 1 - Math.pow(1 - k, 3); const v = fromRef.current + (safeValue - fromRef.current) * ease; setDisplay(safeNum(v, safeValue)); if (k < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [safeValue]); return display; } function Tick({ value, fmt = (n) => Math.round(n).toLocaleString(), className = "" }) { const v = useTween(value); return {fmt(safeNum(v))}; } function fmtTime(s) { const h = Math.floor(s / 3600); const m = Math.floor((s % 3600) / 60); const sec = Math.floor(s % 60); if (h > 0) return `${h}H ${String(m).padStart(2,"0")}M`; return `${m}:${String(sec).padStart(2,"0")}`; } function fmtIdle(s) { if (s < 60) return `${s}S`; const m = Math.floor(s / 60); if (m < 60) return `${m} MIN`; return `${Math.floor(m/60)}H ${m%60}M`; } // ───────────────────────────────────────────────────────────── // TOP BAR // ───────────────────────────────────────────────────────────── function TopBar({ period, setPeriod, sound, setSound, now, chatOpen, setChatOpen, theme, setTheme, view, setView }) { const periods = ["TODAY", "THIS WEEK", "THIS MONTH"]; const views = [ { id: "calls", label: "CALL FLOOR" }, { id: "sales", label: "SALES FLOOR" }, ]; return (
WAR MACHINE
/ {view === "sales" ? "SALES BOARD" : "LEADERBOARD"}
{DEALERSHIP}
{views.map((v) => ( ))}
{periods.map((p) => ( ))}
LIVE · {now.toLocaleTimeString([], { hour12:false })}
); } const SoundIcon = ({ on }) => ( {on ? : } ); // ───────────────────────────────────────────────────────────── // SPIFF HERO // ───────────────────────────────────────────────────────────── function SpiffHero({ teamAppts: liveAppts, goal, apptOverride, setApptOverride, goalLabel = "TEAM DAILY APPT GOAL" }) { // Effective count: when scrubbing, the override wins; otherwise we use the // live simulated count from the call ticker. const teamAppts = apptOverride != null ? apptOverride : liveAppts; const pct = Math.min(999, (teamAppts / goal) * 100); const barPct = Math.min(100, pct); const remaining = Math.max(0, goal - teamAppts); const overGoal = teamAppts >= goal; const scrubbing = apptOverride != null; const [celebrate, setCelebrate] = useState(false); const prevOverGoal = useRef(overGoal); useEffect(() => { // Fire confetti every time we *cross* the goal threshold (so scrubbing // up across it always triggers, but staying above it doesn't loop). if (overGoal && !prevOverGoal.current) { setCelebrate(true); const t = setTimeout(() => setCelebrate(false), 4200); prevOverGoal.current = overGoal; return () => clearTimeout(t); } prevOverGoal.current = overGoal; }, [overGoal]); // Drag-to-scrub on the progress bar const barRef = useRef(null); const [dragging, setDragging] = useState(false); const SCRUB_MAX = Math.round(goal * 1.4); // 140% so we can demo over-goal celebration const updateFromClientX = (clientX) => { const el = barRef.current; if (!el) return; const rect = el.getBoundingClientRect(); const ratio = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width)); setApptOverride(Math.round(ratio * SCRUB_MAX)); }; useEffect(() => { if (!dragging) return; const onMove = (e) => updateFromClientX(e.clientX ?? e.touches?.[0]?.clientX ?? 0); const onUp = () => setDragging(false); window.addEventListener("mousemove", onMove); window.addEventListener("mouseup", onUp); window.addEventListener("touchmove", onMove, { passive: false }); window.addEventListener("touchend", onUp); return () => { window.removeEventListener("mousemove", onMove); window.removeEventListener("mouseup", onUp); window.removeEventListener("touchmove", onMove); window.removeEventListener("touchend", onUp); }; }, [dragging]); let mood; if (overGoal) mood = { label: "GOAL MET · KEEP COOKING", color: "text-emerald-300", emoji: "🏆", emojiAccent: "💚" }; else if (pct < 15) mood = { label: "LOT IS DEAD", color: "text-rose-400", emoji: "💀", emojiAccent: "🪦" }; else if (pct < 30) mood = { label: "LOT IS KINDA QUIET", color: "text-orange-300", emoji: "😶", emojiAccent: "🤐" }; else if (pct < 45) mood = { label: "LOT IS HEATING UP", color: "text-amber-300", emoji: "🌡️", emojiAccent: "♨️" }; else if (pct < 60) mood = { label: "LOT IS CRACKALACKIN", color: "text-amber-200", emoji: "🔥", emojiAccent: "💥" }; else if (pct < 75) mood = { label: "LOT IS BUSSIN!", color: "text-amber-200", emoji: "🔥", emojiAccent: "⚡" }; else if (pct < 90) mood = { label: "LOT IS ON FIRE", color: "text-amber-300", emoji: "🔥", emojiAccent: "🚒" }; else mood = { label: "LOT IS WILDIN OUT FORREAL!!", color: "text-orange-200", emoji: "🚨", emojiAccent: "🔥" }; return (
{celebrate && }
{/* TEAM GOAL (left) */}
/ {goalLabel}
/ {goal} {mood.emoji} {mood.emojiAccent}
{/* BOUNTY (middle) */}
$
/ TODAY'S SPIFF
$50BOUNTY
SET BY M. RIVERA · 09:14 · WINNER TAKES ALL
{/* MOOD (top right) — text + emoji combo */}
/ FLOOR MOOD
{mood.emoji} {mood.label} {mood.emojiAccent}
{/* full width progress bar — drag to scrub the appt count for demo */}
← DRAG TO PREVIEW {scrubbing && ( )}
{ setDragging(true); updateFromClientX(e.clientX); }} onTouchStart={(e) => { setDragging(true); updateFromClientX(e.touches[0].clientX); }} className={`relative h-5 rounded-sm bg-white/[0.06] ring-1 ring-white/5 ${dragging ? "cursor-grabbing" : "cursor-grab"} select-none`} style={{ userSelect: "none" }}> {[25,50,75].map((m) => (
))}
{/* riding torch */} {!overGoal && (
88 ? "-translate-x-full" : barPct < 12 ? "" : "-translate-x-1/2"}`}> {pct >= 50 && (
{pct >= 75 && }
)}
= 50 ? "bg-amber-300" : "bg-amber-400"}`} style={{ boxShadow: pct >= 75 ? "0 0 22px rgba(245,184,0,0.95), 0 0 6px rgba(255,200,80,1)" : pct >= 50 ? "0 0 14px rgba(245,184,0,0.7)" : "0 0 6px rgba(245,184,0,0.4)" }}> {pct >= 50 && 🔥} n.toFixed(0)+"%"} /> {pct >= 75 && 🔥}
)} {/* settled badge once goal cleared */} {overGoal && (
n.toFixed(0)+"%"} />
)}
{remaining > 0 ? <>{remaining} APPTS TO HIT GOAL : +{teamAppts - goal} OVER GOAL · KEEP GOING}
); } function Confetti() { const pieces = useMemo(() => Array.from({length: 36}, (_, i) => ({ id: i, left: Math.random() * 100, delay: Math.random() * 0.4, dur: 1.6 + Math.random() * 1.4, color: ["#F5B800","#FFD86B","#5BB58A","#FFFFFF","#E26A4F"][i % 5], size: 6 + Math.random() * 6, rot: Math.random() * 720, })), []); return (
GOAL CRUSHED
{pieces.map(p => ( ))}
); } const Stat = ({k, v, hot}) => (
{k}
); // ───────────────────────────────────────────────────────────── // LEADERBOARD // ───────────────────────────────────────────────────────────── function Avatar({ rep, size = 36, fire = false }) { return (
{rep.initials}
{fire && (
)}
); } const Flame = () => ( 🔥 ); const Medal = ({ rank }) => { const palettes = { 1: { a:"#FFD86B", b:"#F5B800", c:"#7A5A00", glow:"rgba(245,184,0,0.85)", label:"1ST" }, 2: { a:"#F2F4F8", b:"#C0C5CC", c:"#5C6066", glow:"rgba(220,225,232,0.5)", label:"2ND" }, 3: { a:"#E8B582", b:"#C58A4F", c:"#6A3E1A", glow:"rgba(197,138,79,0.55)", label:"3RD" }, }; if (rank > 3) { return ( {String(rank).padStart(2,"0")} ); } const p = palettes[rank]; const size = rank === 1 ? 36 : 30; return (
{rank === 1 && }
{p.label}
); }; function StatusPill({ rep }) { if (rep.status === "ON_FIRE") return ( ON FIRE ); if (rep.status === "ACTIVE") return ( DIALING ); return ( IDLE {fmtIdle(rep.last_call_at)} ); } function Leaderboard({ reps, topDials, recentlyDialedId }) { return (

/ LEADERBOARD · {reps.length} REPS

DIALS · CONN% · TALK · APPTS
    {reps.map((rep, i) => { const rank = i + 1; const connRate = rep.dials_made ? Math.min(100, Math.max(0, (rep.dials_connected / rep.dials_made) * 100)) : 0; const barPct = (rep.dials_made / topDials) * 100; const isFire = rep.status === "ON_FIRE"; const isIdle = rep.status === "IDLE"; const justDialed = rep.id === recentlyDialedId; return (
  1. 3 ? "bg-gradient-to-r from-amber-500/[0.04] to-transparent" : ""} ${isIdle ? "bg-rose-500/[0.025]" : ""} ${justDialed ? "ring-1 ring-inset ring-amber-300/40" : ""}`}> {rank === 1 && } {rank === 2 && } {rank === 3 && } {isIdle && rank > 3 && } {isFire && rank > 3 && }
    {rep.name} {rank === 1 && 👑}
    {(isFire || rank === 1) && (
    )}
    {rep.dials_made} DIALS
    3 ? "text-white/45" : "text-white/65"}`}> } width={42} dim={rank > 3} /> n.toFixed(1)+"%"} />} width={56} dim={rank > 3} /> 3} /> } hot={rank === 1 || isFire} big width={56} crown={rank === 1} />
    2. ); })}
); } const Cell = ({ label, value, hot, big, mono, width, dim, crown }) => (
/ {label}
{value}{crown && ★}
); // ───────────────────────────────────────────────────────────── // LIVE CALL FEED // ───────────────────────────────────────────────────────────── function LiveFeed({ events, pulse, funMode, setFunMode }) { // Watch for a brand-new demo_booked event so we can fire the celebration // (banner + screen flash + sparkle burst). Trigger keys off the event id // and auto-clears so it fires every booking, not just the first. const [celebration, setCelebration] = useState(null); const lastSeenIdRef = useRef(null); useEffect(() => { const newest = events[0]; if (!newest || newest.outcome.key !== "demo_booked") return; if (lastSeenIdRef.current === newest.id) return; lastSeenIdRef.current = newest.id; setCelebration({ id: newest.id, rep: newest.rep }); const t = setTimeout(() => setCelebration(null), 4200); return () => clearTimeout(t); }, [events]); // Sparkle burst — fly outward from the avatar of the booking rep. const sparkles = useMemo(() => { if (!celebration) return []; return Array.from({ length: 10 }, (_, i) => { const angle = (i / 10) * Math.PI * 2; const dist = 40 + Math.random() * 36; return { id: i, glyph: ["✨","⭐","💥","🔥","💰","👑"][i % 6], dx: Math.cos(angle) * dist, dy: Math.sin(angle) * dist - 10, delay: Math.random() * 0.18, }; }); }, [celebration?.id]); return ( ); } const OutcomeBadge = ({ outcome }) => { const tones = { good: "bg-emerald-400/10 text-emerald-300 border-emerald-400/20", fire: "bg-amber-400/15 text-amber-300 border-amber-400/30", warn: "bg-orange-500/10 text-orange-300 border-orange-500/20", muted: "bg-white/5 text-white/45 border-white/10", }; return ( {outcome.tone === "fire" && 🔥} {outcome.label} ); }; // ───────────────────────────────────────────────────────────── // AGGREGATE FOOTER // ───────────────────────────────────────────────────────────── function AggregateFooter({ reps }) { const totals = useMemo(() => { const safe = (n) => (typeof n === "number" && Number.isFinite(n) ? n : 0); const dials = reps.reduce((s,r)=>s+safe(r.dials_made),0); const conn = reps.reduce((s,r)=>s+safe(r.dials_connected),0); const talk = reps.reduce((s,r)=>s+safe(r.talk_time_seconds),0); const appts = reps.reduce((s,r)=>s+safe(r.appointments_set),0); const rate = dials > 0 ? Math.min(100, Math.max(0, (conn/dials)*100)) : 0; return { dials, conn, talk, appts, rate }; }, [reps]); const cards = [ { k: "TEAM DIALS", v: }, { k: "TEAM CONNECT RATE",v: n.toFixed(1)+"%"} /> }, { k: "TEAM TALK TIME", v: fmtTime(totals.talk), mono:true }, { k: "APPTS BOOKED", v: , hot:true }, ]; return (
{cards.map((c, i) => (
/{c.k}
{c.v}
{i === 3 &&
}
))}
); } // ───────────────────────────────────────────────────────────── // TEAM CHAT — single shared state, rendered by both the always-visible // bottom strip (TrollBox) and the optional floating popout (FloatingChat). // ───────────────────────────────────────────────────────────── const fmtChatTime = (d) => { let h = d.getHours(); const m = String(d.getMinutes()).padStart(2,"0"); const ampm = h >= 12 ? "p" : "a"; h = h % 12 || 12; return `${h}:${m}${ampm}`; }; // Shared hook: anyone consuming this gets the same backlog + ticker, so the // bottom strip and the floating window never diverge. function useChatRoom() { const [messages, setMessages] = useState(() => { const start = Date.now() - CHAT_BACKLOG.length * 42_000; // ~12 min of "history" return CHAT_BACKLOG.map((l, i) => ({ id: i, user: userById(l.from), text: l.text, time: new Date(start + i * 42_000), })); }); const [input, setInput] = useState(""); const [typing, setTyping] = useState(null); const idRef = useRef(CHAT_BACKLOG.length); const lastUserRef = useRef(null); useEffect(() => { let to1, to2; const cycle = () => { let u; for (let i = 0; i < 6; i++) { u = CHAT_USERS[Math.floor(Math.random() * CHAT_USERS.length)]; if (u.id !== lastUserRef.current) break; } setTyping(u); to1 = setTimeout(() => { setTyping(null); const text = IDLE_BANTER[Math.floor(Math.random() * IDLE_BANTER.length)]; const id = ++idRef.current; lastUserRef.current = u.id; setMessages((m) => [...m, { id, user: u, text, time: new Date() }].slice(-80)); }, 700 + Math.random() * 800); to2 = setTimeout(cycle, 3800 + Math.random() * 5200); }; to2 = setTimeout(cycle, 2400); return () => { clearTimeout(to1); clearTimeout(to2); }; }, []); const send = () => { const trimmed = input.trim(); if (!trimmed) return; const id = ++idRef.current; setMessages((m) => [...m, { id, user: { handle: "YOU", color: "#FAFAF7", role: "demo" }, text: trimmed, time: new Date(), }].slice(-80)); setInput(""); }; return { messages, input, setInput, typing, send }; } // Tiny shared sub-components so both views render identical chat rows. function ChatBody({ messages, typing, scrollRef }) { return (
    {messages.map((m) => (
  • {fmtChatTime(m.time)} <{m.user.handle}> {m.text}
    • ))} {typing && (
  • {fmtChatTime(new Date())} {typing.handle} is typing...
    • )}
); } function ChatInputRow({ input, setInput, send }) { return (
<YOU> setInput(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") send(); }} maxLength={140} placeholder="say something..." className="min-w-0 flex-1 bg-transparent font-mono text-[12px] text-white placeholder:text-white/25 outline-none" />
); } function TrollBox({ chat }) { const { messages, input, setInput, typing, send } = chat; const listRef = useRef(null); useEffect(() => { if (listRef.current) listRef.current.scrollTop = listRef.current.scrollHeight; }, [messages, typing]); return (

/ CHAT ROOM · #riverside-north

all reps · log persists for 24h
{CHAT_USERS.length} ONLINE
); } // ───────────────────────────────────────────────────────────── // FLOATING CHAT — popup window, draggable by its title bar, with X to close. // Shares state with the bottom TrollBox via the same `chat` prop. // ───────────────────────────────────────────────────────────── function FloatingChat({ chat, onClose }) { const { messages, input, setInput, typing, send } = chat; const WIDTH = 420; const HEIGHT = 480; const [pos, setPos] = useState(() => ({ x: Math.max(20, (typeof window !== "undefined" ? window.innerWidth : 1200) / 2 - WIDTH / 2), y: 84, })); const [dragOffset, setDragOffset] = useState(null); const dragging = dragOffset != null; const onHeaderDown = (e) => { // ignore drag if X button captured the click if (e.target.closest("[data-no-drag]")) return; setDragOffset({ x: e.clientX - pos.x, y: e.clientY - pos.y }); }; useEffect(() => { if (!dragging) return; const onMove = (e) => { const w = window.innerWidth, h = window.innerHeight; setPos({ x: Math.max(0, Math.min(w - WIDTH, e.clientX - dragOffset.x)), y: Math.max(0, Math.min(h - 80, e.clientY - dragOffset.y)), }); }; const onUp = () => setDragOffset(null); window.addEventListener("mousemove", onMove); window.addEventListener("mouseup", onUp); return () => { window.removeEventListener("mousemove", onMove); window.removeEventListener("mouseup", onUp); }; }, [dragging, dragOffset]); const listRef = useRef(null); useEffect(() => { if (listRef.current) listRef.current.scrollTop = listRef.current.scrollHeight; }, [messages, typing]); return (
{/* AOL-style title bar (draggable) */}

/ TEAM CHAT

#riverside-north
{CHAT_USERS.length} ONLINE
); } // ───────────────────────────────────────────────────────────── // SALES FLOOR VIEW // ───────────────────────────────────────────────────────────── function SalesHero({ reps, unitOverride, setUnitOverride, goal = SALES_GOAL_UNITS, periodLabel = "MONTH-TO-DATE" }) { const totals = useMemo(() => { const units = reps.reduce((s,r)=>s+r.units, 0); const front = reps.reduce((s,r)=>s+r.front_gross, 0); const back = reps.reduce((s,r)=>s+r.back_gross, 0); const total = front + back; const avg = units ? total / units : 0; const top = [...reps].sort((a,b)=>b.units-a.units)[0]; return { units, front, back, total, avg, top }; }, [reps]); // Scrub override wins when set const displayUnits = unitOverride != null ? unitOverride : totals.units; const pct = Math.min(999, (displayUnits / goal) * 100); const barPct = Math.min(100, pct); const overGoal = displayUnits >= goal; const scrubbing = unitOverride != null; // Drag to scrub const barRef = useRef(null); const [dragging, setDragging] = useState(false); const SCRUB_MAX = Math.round(goal * 1.4); const updateFromClientX = (clientX) => { const el = barRef.current; if (!el) return; const rect = el.getBoundingClientRect(); const ratio = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width)); setUnitOverride(Math.round(ratio * SCRUB_MAX)); }; useEffect(() => { if (!dragging) return; const onMove = (e) => updateFromClientX(e.clientX ?? e.touches?.[0]?.clientX ?? 0); const onUp = () => setDragging(false); window.addEventListener("mousemove", onMove); window.addEventListener("mouseup", onUp); window.addEventListener("touchmove", onMove, { passive: false }); window.addEventListener("touchend", onUp); return () => { window.removeEventListener("mousemove", onMove); window.removeEventListener("mouseup", onUp); window.removeEventListener("touchmove", onMove); window.removeEventListener("touchend", onUp); }; }, [dragging]); // Confetti when crossing goal during scrub const [celebrate, setCelebrate] = useState(false); const prevOver = useRef(overGoal); useEffect(() => { if (overGoal && !prevOver.current) { setCelebrate(true); const t = setTimeout(() => setCelebrate(false), 4200); prevOver.current = overGoal; return () => clearTimeout(t); } prevOver.current = overGoal; }, [overGoal]); let mood; if (overGoal) mood = { color: "text-emerald-300", emoji: "🏆", accent: "💚" }; else if (pct < 15) mood = { color: "text-rose-400", emoji: "💀", accent: "🪦" }; else if (pct < 30) mood = { color: "text-orange-300", emoji: "😶", accent: "🤐" }; else if (pct < 45) mood = { color: "text-amber-300", emoji: "🌡️", accent: "♨️" }; else if (pct < 60) mood = { color: "text-amber-200", emoji: "🔥", accent: "💥" }; else if (pct < 75) mood = { color: "text-amber-200", emoji: "🔥", accent: "⚡" }; else if (pct < 90) mood = { color: "text-amber-300", emoji: "🔥", accent: "🚒" }; else mood = { color: "text-orange-200", emoji: "🚨", accent: "🔥" }; return (
{celebrate && }
/ MAY · {periodLabel}
/ {goal} UNITS {mood.emoji} {mood.accent}
$
/ TOTAL GROSS
{fmtMoneyK(totals.total)}
FRONT {fmtMoneyK(totals.front)} · BACK {fmtMoneyK(totals.back)}
/ MONTH LEADER
👑 {totals.top.name.toUpperCase()}
{totals.top.units} UNITS · {fmtMoneyK(totals.top.front_gross + totals.top.back_gross)}
{/* Scrubable goal bar */}
← DRAG TO PREVIEW MONTHLY PROGRESS {scrubbing && ( )}
{ setDragging(true); updateFromClientX(e.clientX); }} onTouchStart={(e) => { setDragging(true); updateFromClientX(e.touches[0].clientX); }} className={`relative h-5 rounded-sm bg-white/[0.06] ring-1 ring-white/5 ${dragging ? "cursor-grabbing" : "cursor-grab"} select-none`} style={{ userSelect: "none" }}> {[25,50,75].map((m) => (
))}
{!overGoal && (
88 ? "-translate-x-full" : barPct < 12 ? "" : "-translate-x-1/2"}`}>
= 50 ? "bg-amber-300" : "bg-amber-400"}`} style={{ boxShadow: pct >= 75 ? "0 0 22px rgba(245,184,0,0.95)" : pct >= 50 ? "0 0 14px rgba(245,184,0,0.7)" : "0 0 6px rgba(245,184,0,0.4)" }}> {pct >= 50 && 🔥} n.toFixed(0)+"%"} />
)} {overGoal && (
n.toFixed(0)+"%"} />
)}
{!overGoal ? <>{Math.max(0, goal - displayUnits)} UNITS TO GOAL : +{displayUnits - goal} OVER GOAL · KEEP GOING}
); } function SalesAggregates({ reps }) { const totals = useMemo(() => { const units = reps.reduce((s,r)=>s+r.units, 0); const total = reps.reduce((s,r)=>s+r.front_gross+r.back_gross, 0); const avg = units ? total/units : 0; const csi = Math.round(reps.reduce((s,r)=>s+r.csi, 0) / reps.length); return { units, total, avg, csi }; }, [reps]); const cards = [ { k: "UNITS SOLD", v: totals.units }, { k: "TOTAL GROSS", v: fmtMoneyK(totals.total) }, { k: "AVG GROSS / UNIT", v: fmtMoneyK(totals.avg), mono:true }, { k: "TEAM CSI", v: totals.csi + "%", hot:true }, ]; return (
{cards.map((c, i) => (
/{c.k}
{c.v}
{i === 3 &&
🏆
}
))}
); } function SalesLeaderboard({ reps }) { const topUnits = Math.max(...reps.map(r=>r.units), 1); return (

/ SALES LEADERBOARD · {reps.length} SALESPEOPLE

UNITS · FRONT · BACK · TOTAL · CSI
    {reps.map((rep, i) => { const rank = i + 1; const total = rep.front_gross + rep.back_gross; const barPct = (rep.units / topUnits) * 100; return (
  1. {rank === 1 && } {rank === 2 && } {rank === 3 && }
    {rep.name} {rank === 1 && 👑}
    {rep.units} UNITS · LAST {rep.last_sale.toUpperCase()}
    3 ? "text-white/45" : "text-white/65"}`}> 3} /> 3} /> 3} /> 3} /> 3} />
    2. ); })}
); } // Live sales feed — every car sold triggers an over-the-top celebration // (gold flash + banner + row pulse + sparkles), even bigger than the call // floor's demo_booked treatment. function SalesFeed({ events }) { const [celebration, setCelebration] = useState(null); const lastSeenIdRef = useRef(null); useEffect(() => { const newest = events[0]; if (!newest) return; if (lastSeenIdRef.current === newest.id) return; lastSeenIdRef.current = newest.id; setCelebration({ id: newest.id, rep: newest.rep, vehicle: newest.vehicle, price: newest.price }); const t = setTimeout(() => setCelebration(null), 4400); return () => clearTimeout(t); }, [events]); const sparkles = useMemo(() => { if (!celebration) return []; return Array.from({ length: 14 }, (_, i) => { const angle = (i / 14) * Math.PI * 2; const dist = 44 + Math.random() * 50; return { id: i, glyph: ["✨","⭐","💥","🔥","💰","👑","🎉","💸"][i % 8], dx: Math.cos(angle) * dist, dy: Math.sin(angle) * dist - 12, delay: Math.random() * 0.22, }; }); }, [celebration?.id]); return ( ); } function RecentDeliveries({ reps, liveEvents = [] }) { // Merge live events (newest first) with the seeded RECENT_DELIVERIES so the // panel always reflects fresh sales. Cap at 10 rows. const merged = useMemo(() => { const liveRows = liveEvents.map((e) => ({ key: "live-" + e.id, rep: e.rep, vehicle: e.vehicle, buyer: e.buyer, price: e.price, time: "just now", isNew: true, id: e.id, })); const seeded = RECENT_DELIVERIES.map((d, i) => ({ key: "seed-" + i, rep: reps.find((r) => r.id === d.repId), vehicle: d.vehicle, buyer: d.buyer, price: d.price, time: d.time, isNew: false, })); return [...liveRows, ...seeded].slice(0, 10); }, [liveEvents, reps]); // Celebrate the newest live row briefly const [celebrateId, setCelebrateId] = useState(null); const lastSeenRef = useRef(null); useEffect(() => { const newest = liveEvents[0]; if (!newest || lastSeenRef.current === newest.id) return; lastSeenRef.current = newest.id; setCelebrateId(newest.id); const t = setTimeout(() => setCelebrateId(null), 3400); return () => clearTimeout(t); }, [liveEvents]); return ( ); } // ───────────────────────────────────────────────────────────── // APP // ───────────────────────────────────────────────────────────── function App() { const [period, setPeriod] = useState("TODAY"); const [sound, setSound] = useState(false); const [funMode, setFunMode] = useState(true); const [now, setNow] = useState(new Date()); const [reps, setReps] = useState(SEED_REPS); const [events, setEvents] = useState([]); const [pulse, setPulse] = useState(false); const [lastDialed, setLastDialed] = useState(null); // Manual scrub override for the team appt count — null = follow live data. const [apptOverride, setApptOverride] = useState(null); // Floating chat window toggle. const [chatOpen, setChatOpen] = useState(false); // Shared chat state — bottom strip + floating popout consume the same hook. const chat = useChatRoom(); // Light/dark theme — persisted across page refreshes. const [theme, setTheme] = useState(() => { try { return localStorage.getItem("wm_theme") || "dark"; } catch { return "dark"; } }); useEffect(() => { try { localStorage.setItem("wm_theme", theme); } catch {} }, [theme]); // View toggle: "calls" (live dial board) or "sales" (monthly car sales). const [view, setView] = useState("calls"); // Live sales sim — runs in the background regardless of which view is shown. const sales = useSalesSim(); // Re-sort whenever sales.reps mutates (new sales rerank). const salesRanked = useMemo(() => [...sales.reps].sort((a,b) => { if (b.units !== a.units) return b.units - a.units; return (b.front_gross + b.back_gross) - (a.front_gross + a.back_gross); }), [sales.reps]); // Scrubable unit override for the sales goal bar const [unitOverride, setUnitOverride] = useState(null); // Drop any scrub overrides when the period changes so the new period's // live numbers show up immediately (otherwise the stale override looks broken). useEffect(() => { setApptOverride(null); setUnitOverride(null); }, [period]); const eventIdRef = useRef(0); // Live mirror of reps so the tick closure always sees the latest state // instead of the snapshot captured when the effect mounted. const repsRef = useRef(SEED_REPS); useEffect(() => { repsRef.current = reps; }, [reps]); // clock useEffect(() => { const t = setInterval(() => setNow(new Date()), 1000); return () => clearInterval(t); }, []); // idle timers tick up useEffect(() => { const t = setInterval(() => { setReps((rs) => rs.map((r) => r.status === "IDLE" ? { ...r, last_call_at: r.last_call_at + 1 } : r)); }, 1000); return () => clearInterval(t); }, []); // simulated call ticks — capped at multiple levels so the totals can // never spiral into junk: // 1. each rep is capped at REP_DIAL_LIMIT individually // 2. team total is capped at TEAM_DIAL_CEILING (resets to seed) // 3. the cap check is also re-run inside setReps in case of races useEffect(() => { let timeoutId; const TEAM_DIAL_CEILING = 3200; const REP_DIAL_LIMIT = 260; const tick = () => { const current = repsRef.current; // hard reset if we've overshot — read current ref, not closure const teamDials = current.reduce((s,r)=>s+(r.dials_made||0),0); if (teamDials >= TEAM_DIAL_CEILING) { setReps(SEED_REPS); setEvents([]); timeoutId = setTimeout(tick, 2500); return; } // pick a non-idle rep (weight by dials), using current state const active = current.filter((r) => r.status !== "IDLE" && (r.dials_made||0) < REP_DIAL_LIMIT); if (active.length === 0) { setReps(SEED_REPS); setEvents([]); timeoutId = setTimeout(tick, 2500); return; } const total = active.reduce((s,r)=>s+(r.dials_made||0)+5,0); let r = Math.random() * total; let chosen = active[0]; for (const rep of active) { r -= ((rep.dials_made||0) + 5); if (r <= 0) { chosen = rep; break; } } const outcome = pickOutcome(); setReps((prev) => { // double-check inside the functional updater in case of races const live = prev.reduce((s,r)=>s+(r.dials_made||0),0); if (live >= TEAM_DIAL_CEILING) return SEED_REPS; return prev.map((rep) => { if (rep.id !== chosen.id) return rep; // per-rep hard cap — silently skip the increment if at ceiling if ((rep.dials_made||0) >= REP_DIAL_LIMIT) return rep; const dispKey = outcome.key; const dispNow = (rep.dispositions && rep.dispositions[dispKey]) || 0; const next = { ...rep, dials_made: (rep.dials_made||0) + 1, last_call_at: 0, dispositions: { ...(rep.dispositions || {}), [dispKey]: dispNow + 1 }, }; if (dispKey === "connected" || dispKey === "demo_booked" || dispKey === "callback_requested") { next.dials_connected = (rep.dials_connected||0) + 1; next.talk_time_seconds = (rep.talk_time_seconds||0) + 30 + Math.floor(Math.random()*180); } if (dispKey === "demo_booked") { next.appointments_set = (rep.appointments_set||0) + 1; } return next; }); }); setLastDialed(chosen.id); setPulse(true); setTimeout(() => setPulse(false), 600); setEvents((evts) => { const id = ++eventIdRef.current; const newEvt = { id, rep: chosen, outcome, commentary: pickCommentary(outcome.key), dialNum: chosen.dials_made + 1, timeLabel: new Date().toLocaleTimeString([], { hour12:false }), }; return [newEvt, ...evts].slice(0, 8); }); // slower cadence so totals breathe and nothing balloons mid-shift timeoutId = setTimeout(tick, 2200 + Math.random() * 2800); }; timeoutId = setTimeout(tick, 1500); return () => clearTimeout(timeoutId); }, []); const ranked = useMemo(() => { return [...reps].sort((a,b) => { // primary: appointments, secondary: dials_connected, tertiary: dials_made if (b.appointments_set !== a.appointments_set) return b.appointments_set - a.appointments_set; if (b.dials_connected !== a.dials_connected) return b.dials_connected - a.dials_connected; return b.dials_made - a.dials_made; }); }, [reps]); const topDials = Math.max(...reps.map((r) => r.dials_made), 1); // ─── PERIOD SCALING ─────────────────────────────────────────── // Sims only tick "today" values. Switching the period selector // multiplies the displayed numbers up (for calls) or down (for // sales — since SALES_REPS is already month-to-date) so the // selector means something in both views. const callMult = period === "THIS MONTH" ? 22 : period === "THIS WEEK" ? 5 : 1; const salesMult = period === "THIS MONTH" ? 1 : period === "THIS WEEK" ? 0.25 : 0.08; const callRepsScaled = useMemo(() => ranked.map((r) => ({ ...r, dials_made: Math.round(r.dials_made * callMult), dials_connected: Math.round(r.dials_connected * callMult), talk_time_seconds: Math.round(r.talk_time_seconds * callMult), appointments_set: Math.round(r.appointments_set * callMult), })), [ranked, callMult]); const callGoal = Math.round(TEAM_DAILY_GOAL * callMult); const callTeamAppts = callRepsScaled.reduce((s, r) => s + r.appointments_set, 0); const salesRepsScaled = useMemo(() => salesRanked.map((r) => ({ ...r, units: Math.round(r.units * salesMult), front_gross: Math.round(r.front_gross * salesMult), back_gross: Math.round(r.back_gross * salesMult), // csi stays — quality %, not a count })), [salesRanked, salesMult]); const salesGoalScaled = Math.round(SALES_GOAL_UNITS * salesMult); const periodLabel = period === "THIS MONTH" ? "MONTH-TO-DATE" : period === "THIS WEEK" ? "WEEK-TO-DATE" : "TODAY"; const callGoalLabel = period === "THIS MONTH" ? "TEAM MONTHLY APPT GOAL" : period === "THIS WEEK" ? "TEAM WEEKLY APPT GOAL" : "TEAM DAILY APPT GOAL"; return (
{view === "calls" ? ( <>
r.dials_made), 1)} recentlyDialedId={lastDialed} />
{chatOpen && setChatOpen(false)} />} ) : ( <>
{chatOpen && setChatOpen(false)} />} )}
); } ReactDOM.createRoot(document.getElementById("root")).render();