diff --git a/src/components/AnimatedNumber.jsx b/src/components/AnimatedNumber.jsx index caae96e..e585716 100644 --- a/src/components/AnimatedNumber.jsx +++ b/src/components/AnimatedNumber.jsx @@ -1,5 +1,8 @@ import React, { useEffect, useRef } from 'react'; import { gsap } from 'gsap'; +import { ScrollTrigger } from 'gsap/ScrollTrigger'; + +gsap.registerPlugin(ScrollTrigger); /** * AnimatedNumber - A reusable component that animates numbers from 0 to their target value using GSAP @@ -64,42 +67,35 @@ const AnimatedNumber = ({ const targetValue = numericValue * multiplier; - // Animate from 0 to target value + // Animate from 0 to target value, triggered when element scrolls into view const obj = { val: 0 }; + const formatValue = (v) => { + let displayValue = v.toFixed(decimals); + if (useLocaleString) { + displayValue = parseFloat(displayValue).toLocaleString('en-US', { + minimumFractionDigits: decimals, + maximumFractionDigits: decimals + }); + } + return `${extractedPrefix}${displayValue}${extractedSuffix}`; + }; + animationRef.current = gsap.to(obj, { val: numericValue, duration: duration, delay: delay, ease: 'expo.out', + scrollTrigger: { + trigger: numberRef.current, + start: 'top 95%', + toggleActions: 'play none none none', + }, onUpdate: () => { - if (numberRef.current) { - let displayValue = obj.val.toFixed(decimals); - - if (useLocaleString) { - displayValue = parseFloat(displayValue).toLocaleString(undefined, { - minimumFractionDigits: decimals, - maximumFractionDigits: decimals - }); - } - - numberRef.current.textContent = `${extractedPrefix}${displayValue}${extractedSuffix}`; - } + if (numberRef.current) numberRef.current.textContent = formatValue(obj.val); }, onComplete: () => { - // Ensure final value is exact - if (numberRef.current) { - let displayValue = numericValue.toFixed(decimals); - - if (useLocaleString) { - displayValue = parseFloat(displayValue).toLocaleString(undefined, { - minimumFractionDigits: decimals, - maximumFractionDigits: decimals - }); - } - - numberRef.current.textContent = `${extractedPrefix}${displayValue}${extractedSuffix}`; - } + if (numberRef.current) numberRef.current.textContent = formatValue(numericValue); } }); diff --git a/src/data/mockStore.jsx b/src/data/mockStore.jsx index 9ba41df..fd9f85d 100644 --- a/src/data/mockStore.jsx +++ b/src/data/mockStore.jsx @@ -731,35 +731,38 @@ const MOCK_USERS = [ ]; // --- NEW MOCK SALES HISTORY FOR LEADERBOARD --- +// Dates are in March 2026 (current month) so the default "This Month" filter shows data. +// A subset also falls in the current week (Mar 15-21) for the "This Week" filter. +// Amounts reflect residential storm-damage roofing jobs ($12K–$42K per deal). const MOCK_SALES_HISTORY = [ - // Frank Agent (High Revenue, Low Volume - "The Sniper") - { id: 'tx_1', agentId: 'e1', date: '2026-02-10', amount: 450000, status: 'closed_won' }, - { id: 'tx_2', agentId: 'e1', date: '2026-02-05', amount: 520000, status: 'closed_won' }, - { id: 'tx_3', agentId: 'e1', date: '2026-01-28', amount: 380000, status: 'closed_won' }, - { id: 'tx_4', agentId: 'e1', date: '2026-02-01', amount: 0, status: 'closed_lost' }, // Lost deal + // Frank Agent (High Revenue, Low Volume - "The Sniper") — fewer deals, bigger jobs + { id: 'tx_1', agentId: 'e1', date: '2026-03-19', amount: 38500, status: 'closed_won' }, // this week + { id: 'tx_2', agentId: 'e1', date: '2026-03-12', amount: 42000, status: 'closed_won' }, + { id: 'tx_3', agentId: 'e1', date: '2026-03-06', amount: 31800, status: 'closed_won' }, + { id: 'tx_4', agentId: 'e1', date: '2026-03-03', amount: 0, status: 'closed_lost' }, - // Fiona Field (High Volume, Mid Revenue - "The Grinder") - { id: 'tx_5', agentId: 'e2', date: '2026-02-09', amount: 250000, status: 'closed_won' }, - { id: 'tx_6', agentId: 'e2', date: '2026-02-08', amount: 240000, status: 'closed_won' }, - { id: 'tx_7', agentId: 'e2', date: '2026-02-06', amount: 260000, status: 'closed_won' }, - { id: 'tx_8', agentId: 'e2', date: '2026-01-30', amount: 230000, status: 'closed_won' }, - { id: 'tx_9', agentId: 'e2', date: '2026-02-02', amount: 255000, status: 'closed_won' }, - { id: 'tx_10', agentId: 'e2', date: '2026-01-25', amount: 0, status: 'closed_lost' }, - { id: 'tx_11', agentId: 'e2', date: '2026-01-20', amount: 0, status: 'closed_lost' }, + // Fiona Field (High Volume, Mid Revenue - "The Grinder") — more deals, consistent value + { id: 'tx_5', agentId: 'e2', date: '2026-03-17', amount: 18200, status: 'closed_won' }, // this week + { id: 'tx_6', agentId: 'e2', date: '2026-03-16', amount: 16800, status: 'closed_won' }, // this week + { id: 'tx_7', agentId: 'e2', date: '2026-03-11', amount: 21400, status: 'closed_won' }, + { id: 'tx_8', agentId: 'e2', date: '2026-03-08', amount: 19600, status: 'closed_won' }, + { id: 'tx_9', agentId: 'e2', date: '2026-03-05', amount: 17300, status: 'closed_won' }, + { id: 'tx_10', agentId: 'e2', date: '2026-03-02', amount: 0, status: 'closed_lost' }, + { id: 'tx_11', agentId: 'e2', date: '2026-03-01', amount: 0, status: 'closed_lost' }, - // Fred Flyer (New/Low Performance) - { id: 'tx_12', agentId: 'e3', date: '2026-02-07', amount: 180000, status: 'closed_won' }, - { id: 'tx_13', agentId: 'e3', date: '2026-02-03', amount: 0, status: 'closed_lost' }, - { id: 'tx_14', agentId: 'e3', date: '2026-01-29', amount: 0, status: 'closed_lost' }, + // Fred Flyer (New/Low Performance) — one close this month, struggling + { id: 'tx_12', agentId: 'e3', date: '2026-03-18', amount: 12400, status: 'closed_won' }, // this week + { id: 'tx_13', agentId: 'e3', date: '2026-03-09', amount: 0, status: 'closed_lost' }, + { id: 'tx_14', agentId: 'e3', date: '2026-03-04', amount: 0, status: 'closed_lost' }, - // Felicity Fast (Consistent) - { id: 'tx_15', agentId: 'e4', date: '2026-02-10', amount: 310000, status: 'closed_won' }, - { id: 'tx_16', agentId: 'e4', date: '2026-02-04', amount: 305000, status: 'closed_won' }, - { id: 'tx_17', agentId: 'e4', date: '2026-01-27', amount: 295000, status: 'closed_won' }, + // Felicity Fast (Consistent) — reliable mid-tier producer + { id: 'tx_15', agentId: 'e4', date: '2026-03-15', amount: 24800, status: 'closed_won' }, // this week + { id: 'tx_16', agentId: 'e4', date: '2026-03-10', amount: 23200, status: 'closed_won' }, + { id: 'tx_17', agentId: 'e4', date: '2026-03-07', amount: 26500, status: 'closed_won' }, - // Felix Fixer (Closer - High Win Rate) - { id: 'tx_18', agentId: 'e5', date: '2026-02-08', amount: 410000, status: 'closed_won' }, - { id: 'tx_19', agentId: 'e5', date: '2026-02-01', amount: 390000, status: 'closed_won' }, + // Felix Fixer (Closer - High Win Rate) — doesn't lose, picks his battles + { id: 'tx_18', agentId: 'e5', date: '2026-03-20', amount: 29500, status: 'closed_won' }, // this week + { id: 'tx_19', agentId: 'e5', date: '2026-03-11', amount: 34800, status: 'closed_won' }, ]; // Helper to generate meetings diff --git a/src/pages/LeaderboardPage.jsx b/src/pages/LeaderboardPage.jsx index 523318d..f571d5c 100644 --- a/src/pages/LeaderboardPage.jsx +++ b/src/pages/LeaderboardPage.jsx @@ -58,7 +58,7 @@ const LeaderboardPage = () => { }, [agents, salesHistory, timeframe, metric]); const formatValue = (val, type) => { - if (type === 'revenue') return `$${val.toLocaleString()}`; + if (type === 'revenue') return `$${val.toLocaleString('en-US')}`; if (type === 'volume') return `${val} Deals`; if (type === 'winRate') return `${val.toFixed(1)}%`; return val;