feat(dashboard): show analytics+financial cards to owner; ground Top Sales leaderboard in real reps; fix en-US currency formatting

src/components/dashboard/TopSalesLeaderboard.jsx

@@ -1,18 +1,15 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { SpotlightCard } from '../SpotlightCard';
 import { Trophy, ChevronRight, User } from 'lucide-react';
 import { Link } from 'react-router-dom';
+import { useMockStore } from '../../data/mockStore';
+import { repLeaderboard } from '../../data/selectors';
 
-const MOCK_TOP_REPS = [
-    { id: 1, name: "Sarah Connor", sales: "$1.2M", deals: 42, avatar: null },
-    { id: 2, name: "Michael Ross", sales: "$980K", deals: 35, avatar: null },
-    { id: 3, name: "Jessica Pearson", sales: "$850K", deals: 28, avatar: null },
-    { id: 4, name: "Harvey Specter", sales: "$720K", deals: 24, avatar: null },
-    { id: 5, name: "Louis Litt", sales: "$640K", deals: 20, avatar: null },
-    { id: 6, name: "Donna Paulsen", sales: "$590K", deals: 18, avatar: null },
-];
+const fmtSales = (n) => n >= 1_000_000 ? `$${(n / 1_000_000).toFixed(1)}M` : `$${Math.round(n / 1000)}K`;
 
 export const TopSalesLeaderboard = () => {
+    const { projects, resolvePerson } = useMockStore();
+    const reps = useMemo(() => repLeaderboard(projects, resolvePerson), [projects, resolvePerson]);
     return (
         <SpotlightCard className="h-full flex flex-col">
             <div className="p-6 flex-1 flex flex-col min-h-0">
@@ -32,7 +29,7 @@ export const TopSalesLeaderboard = () => {
                 </div>
 
                 <div className="flex-1 min-h-0 space-y-3 overflow-y-auto pr-1 custom-scrollbar">
-                    {MOCK_TOP_REPS.map((rep, index) => (
+                    {reps.map((rep, index) => (
                         <Link
                             to="/admin/leaderboard"
                             key={rep.id}
@@ -69,7 +66,7 @@ export const TopSalesLeaderboard = () => {
 
                             <div className="text-right">
                                 <div className="text-sm font-black text-zinc-900 dark:text-white">
-                                    {rep.sales}
+                                    {fmtSales(rep.sales)}
                                 </div>
                             </div>
                         </Link>