Goutam/LynkedUpPro_CRM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add GSAP animated counters and fix Team Schedule theme issues

Browse Source 
- Created reusable AnimatedNumber component with GSAP
- Integrated animated counters in Dashboard (metrics, weather)
- Integrated animated counters in Leaderboard (podium, table)
- Fixed AdminSchedule dark mode styling with theme-aware classes
- Added responsive columns and functional dropdown to Team Schedule
- Implemented date range and status filters for Team Schedule
- Improved animation smoothness with expo.out easing
This commit is contained in:
Satyam
2026-02-16 13:48:04 +05:30
parent e0da94aa0c
commit ed79b266af
4 changed files with 471 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/LeaderboardPage.jsx
+10 -7
View File
@@ -2,6 +2,7 @@ import React, { useState, useMemo } from 'react';
import { useMockStore } from '../data/mockStore';
import { Trophy, TrendingUp, DollarSign, Target, Calendar, Medal, ArrowUpRight, Crown } from 'lucide-react';
import { SpotlightCard } from '../components/SpotlightCard';
import AnimatedNumber from '../components/AnimatedNumber';
const LeaderboardPage = () => {
const { users, salesHistory } = useMockStore();
@@ -82,7 +83,9 @@ const LeaderboardPage = () => {
</div>
<h3 className="font-bold text-sm md:text-base text-zinc-900 dark:text-white truncate max-w-[100px]">{agent.name}</h3>
<p className={`font-mono font-bold text-sm md:text-lg ${color.replace('border-', 'text-')}`}>
{formatValue(agent[metric], metric)}
{metric === 'revenue' && <AnimatedNumber value={agent[metric]} prefix="$" useLocaleString duration={1.5} delay={rank * 0.2} />}
{metric === 'volume' && <><AnimatedNumber value={agent[metric]} duration={1.5} delay={rank * 0.2} /> Deals</>}
{metric === 'winRate' && <><AnimatedNumber value={agent[metric]} decimals={1} duration={1.5} delay={rank * 0.2} />%</>}
</p>
</div>
@@ -184,9 +187,9 @@ const LeaderboardPage = () => {
<tr key={agent.id} className="group hover:bg-zinc-50 dark:hover:bg-white/5 transition-colors">
<td className="py-4 pl-4">
<div className={`w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm ${index === 0 ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-500/20 dark:text-yellow-300' :
index === 1 ? 'bg-zinc-100 text-zinc-700 dark:bg-white/10 dark:text-zinc-300' :
index === 2 ? 'bg-orange-100 text-orange-700 dark:bg-orange-500/20 dark:text-orange-300' :
'text-zinc-500'
index === 1 ? 'bg-zinc-100 text-zinc-700 dark:bg-white/10 dark:text-zinc-300' :
index === 2 ? 'bg-orange-100 text-orange-700 dark:bg-orange-500/20 dark:text-orange-300' :
'text-zinc-500'
}`}>
{index + 1}
</div>
@@ -203,13 +206,13 @@ const LeaderboardPage = () => {
</div>
</td>
<td className={`py-4 text-right font-mono font-medium ${metric === 'revenue' ? 'text-blue-600 dark:text-blue-400 font-bold' : 'text-zinc-500 dark:text-zinc-400'}`}>
{formatValue(agent.revenue, 'revenue')}
<AnimatedNumber value={agent.revenue} prefix="$" useLocaleString duration={1.2} delay={index * 0.05} />
</td>
<td className={`py-4 text-right font-mono font-medium ${metric === 'volume' ? 'text-blue-600 dark:text-blue-400 font-bold' : 'text-zinc-500 dark:text-zinc-400'}`}>
{formatValue(agent.volume, 'volume')}
<AnimatedNumber value={agent.volume} duration={1.2} delay={index * 0.05} /> Deals
</td>
<td className={`py-4 text-right font-mono font-medium ${metric === 'winRate' ? 'text-blue-600 dark:text-blue-400 font-bold' : 'text-zinc-500 dark:text-zinc-400'}`}>
{formatValue(agent.winRate, 'winRate')}
<AnimatedNumber value={agent.winRate} decimals={1} duration={1.2} delay={index * 0.05} />%
</td>
</tr>
))}