feat: Leaderboard access for Admins

2026-02-11 19:01:42 +05:30
parent be828b205d
commit 3b40ab18f4
6 changed files with 477 additions and 7 deletions
@@ -0,0 +1,138 @@
+import React, { useState, useMemo } from 'react';
+import { useMockStore } from '../../data/mockStore';
+import { Trophy, TrendingUp, DollarSign, Target, Calendar as CalendarIcon, ChevronDown } from 'lucide-react';
+
+const LeaderboardWidget = () => {
+    const { users, salesHistory } = useMockStore();
+    const [timeframe, setTimeframe] = useState('month'); // 'week', 'month', 'custom'
+    const [metric, setMetric] = useState('revenue'); // 'revenue', 'volume', 'winRate'
+
+    // Filter agents
+    const agents = useMemo(() => users.filter(u => u.role === 'FIELD_AGENT'), [users]);
+
+    // Calculate metrics based on timeframe
+    const leaderboardData = useMemo(() => {
+        const now = new Date();
+        const startOfWeek = new Date(now.setDate(now.getDate() - now.getDay()));
+        startOfWeek.setHours(0, 0, 0, 0);
+
+        const startOfMonth = new Date(new Date().getFullYear(), new Date().getMonth(), 1);
+
+        return agents.map(agent => {
+            const agentTxals = salesHistory.filter(tx => {
+                const txDate = new Date(tx.date);
+                const isAgent = tx.agentId === agent.id;
+
+                if (!isAgent) return false;
+
+                if (timeframe === 'week') return txDate >= startOfWeek;
+                if (timeframe === 'month') return txDate >= startOfMonth;
+                return true; // All time / Custom (TODO: Add custom range picker logic)
+            });
+
+            // Calculate Metrics
+            const revenue = agentTxals
+                .filter(tx => tx.status === 'closed_won')
+                .reduce((sum, tx) => sum + tx.amount, 0);
+
+            const volume = agentTxals
+                .filter(tx => tx.status === 'closed_won')
+                .length;
+
+            const won = agentTxals.filter(tx => tx.status === 'closed_won').length;
+            const lost = agentTxals.filter(tx => tx.status === 'closed_lost').length;
+            const totalDeals = won + lost;
+            const winRate = totalDeals > 0 ? (won / totalDeals) * 100 : 0;
+
+            return {
+                ...agent,
+                revenue,
+                volume,
+                winRate
+            };
+        }).sort((a, b) => b[metric] - a[metric]);
+
+    }, [agents, salesHistory, timeframe, metric]);
+
+    const formatValue = (val, type) => {
+        if (type === 'revenue') return `$${(val / 1000).toFixed(1)}k`;
+        if (type === 'volume') return `${val} Deals`;
+        if (type === 'winRate') return `${val.toFixed(0)}%`;
+        return val;
+    };
+
+    return (
+        <div className="mt-6 mb-2">
+            <div className="flex items-center justify-between px-4 mb-3">
+                <div className="flex items-center space-x-2 text-zinc-900 dark:text-white">
+                    <Trophy size={16} className="text-yellow-500" />
+                    <span className="text-xs font-bold uppercase tracking-wider">Top Performers</span>
+                </div>
+
+                {/* Simple Timeframe Toggle for now */}
+                <div className="flex bg-zinc-100 dark:bg-white/5 rounded-lg p-0.5">
+                    <button
+                        onClick={() => setTimeframe('week')}
+                        className={`px-2 py-0.5 text-[10px] font-bold rounded-md transition-all ${timeframe === 'week' ? 'bg-white dark:bg-zinc-800 shadow-sm text-zinc-900 dark:text-white' : 'text-zinc-500 hover:text-zinc-900 dark:hover:text-white'}`}
+                    >
+                        W
+                    </button>
+                    <button
+                        onClick={() => setTimeframe('month')}
+                        className={`px-2 py-0.5 text-[10px] font-bold rounded-md transition-all ${timeframe === 'month' ? 'bg-white dark:bg-zinc-800 shadow-sm text-zinc-900 dark:text-white' : 'text-zinc-500 hover:text-zinc-900 dark:hover:text-white'}`}
+                    >
+                        M
+                    </button>
+                </div>
+            </div>
+
+            {/* Metric Selector Tabs */}
+            <div className="flex px-4 mb-4 space-x-1">
+                {[
+                    { id: 'revenue', icon: DollarSign, label: 'Rev' },
+                    { id: 'volume', icon: Target, label: 'Vol' },
+                    { id: 'winRate', icon: TrendingUp, label: 'Win%' }
+                ].map(m => (
+                    <button
+                        key={m.id}
+                        onClick={() => setMetric(m.id)}
+                        className={`flex-1 flex flex-col items-center justify-center py-2 rounded-lg border text-[10px] font-bold transition-all ${metric === m.id
+                            ? 'bg-blue-50 dark:bg-blue-500/10 border-blue-200 dark:border-blue-500/20 text-blue-600 dark:text-blue-300'
+                            : 'bg-transparent border-transparent text-zinc-500 hover:bg-zinc-100 dark:hover:bg-white/5'}`}
+                    >
+                        <m.icon size={14} className="mb-0.5" />
+                        {m.label}
+                    </button>
+                ))}
+            </div>
+
+            {/* List */}
+            <div className="space-y-1 px-2">
+                {leaderboardData.map((agent, index) => (
+                    <div key={agent.id} className="flex items-center justify-between p-2 rounded-lg bg-white/40 dark:bg-white/5 border border-zinc-200/50 dark:border-white/5 hover:bg-white/60 dark:hover:bg-white/10 transition-all group">
+                        <div className="flex items-center space-x-3">
+                            <div className={`w-5 h-5 flex items-center justify-center rounded-full text-[10px] font-bold ${index === 0 ? 'bg-yellow-100 text-yellow-700 border border-yellow-200' :
+                                    index === 1 ? 'bg-zinc-100 text-zinc-700 border border-zinc-200' :
+                                        index === 2 ? 'bg-orange-100 text-orange-700 border border-orange-200' :
+                                            'bg-transparent text-zinc-400'
+                                }`}>
+                                {index + 1}
+                            </div>
+                            <div>
+                                <p className="text-xs font-bold text-zinc-900 dark:text-white leading-none mb-0.5">{agent.name}</p>
+                                <p className="text-[9px] text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">{agent.role.replace('_', ' ')}</p>
+                            </div>
+                        </div>
+                        <div className="text-right">
+                            <span className="text-xs font-bold font-mono text-zinc-900 dark:text-white">
+                                {formatValue(agent[metric], metric)}
+                            </span>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default LeaderboardWidget;