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

feat: UI/UX updates - Sidebar, ProCanvas, Dashboard, Schedule, Map

Browse Source
This commit is contained in:
Satyam
2026-02-20 13:32:44 +05:30
parent 36e74e9fbc
commit 7e166726da
7 changed files with 412 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/dashboard/TopSalesLeaderboard.jsx
+84
View File
@@ -0,0 +1,84 @@
import React from 'react';
import { SpotlightCard } from '../SpotlightCard';
import { Trophy, ChevronRight, User } from 'lucide-react';
import { Link } from 'react-router-dom';
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 },
];
export const TopSalesLeaderboard = () => {
return (
<SpotlightCard className="h-full flex flex-col">
<div className="p-6 flex-1 flex flex-col min-h-0">
<div className="flex justify-between items-center mb-6">
<div className="flex items-center gap-3">
<div className="p-2 bg-amber-100 dark:bg-amber-500/10 rounded-lg text-amber-600 dark:text-amber-500">
<Trophy size={20} />
</div>
<h3 className="font-bold text-zinc-900 dark:text-white">Top Sales Reps</h3>
</div>
<Link
to="/admin/leaderboard"
className="text-xs font-bold text-zinc-500 hover:text-amber-500 dark:text-zinc-400 dark:hover:text-amber-400 flex items-center transition-colors"
>
View All <ChevronRight size={14} className="ml-1" />
</Link>
</div>
<div className="flex-1 min-h-0 space-y-3 overflow-y-auto pr-1 custom-scrollbar">
{MOCK_TOP_REPS.map((rep, index) => (
<Link
to="/admin/leaderboard"
key={rep.id}
className="flex items-center justify-between p-3 rounded-xl bg-zinc-50 dark:bg-white/5 hover:bg-zinc-100 dark:hover:bg-white/10 transition-all border border-transparent hover:border-zinc-200 dark:hover:border-white/10 group"
>
<div className="flex items-center gap-3">
<div className={`
w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold border
${index === 0 ? 'bg-amber-100 text-amber-700 border-amber-200 dark:bg-amber-500/20 dark:text-amber-400 dark:border-amber-500/30' :
index === 1 ? 'bg-zinc-200 text-zinc-700 border-zinc-300 dark:bg-zinc-700 dark:text-zinc-300 dark:border-zinc-600' :
index === 2 ? 'bg-orange-100 text-orange-800 border-orange-200 dark:bg-orange-900/40 dark:text-orange-300 dark:border-orange-800' :
'bg-zinc-100 text-zinc-500 border-zinc-200 dark:bg-zinc-800 dark:text-zinc-500 dark:border-zinc-700'}
`}>
{index + 1}
</div>
<div className="w-8 h-8 rounded-full bg-zinc-200 dark:bg-zinc-700 flex items-center justify-center overflow-hidden">
{rep.avatar ? (
<img src={rep.avatar} alt={rep.name} className="w-full h-full object-cover" />
) : (
<User size={14} className="text-zinc-400 dark:text-zinc-500" />
)}
</div>
<div>
<div className="text-sm font-bold text-zinc-900 dark:text-white group-hover:text-amber-600 dark:group-hover:text-amber-400 transition-colors">
{rep.name}
</div>
<div className="text-[10px] text-zinc-500 dark:text-zinc-400 font-mono">
{rep.deals} Deals
</div>
</div>
</div>
<div className="text-right">
<div className="text-sm font-black text-zinc-900 dark:text-white">
{rep.sales}
</div>
</div>
</Link>
))}
</div>
</div>
{/* Subtle bottom gradient for scroll indication */}
<div className="h-6 bg-gradient-to-t from-zinc-100 dark:from-black/20 to-transparent pointer-events-none -mt-6 rounded-b-2xl" />
</SpotlightCard>
);
};