164 lines
7.9 KiB
JavaScript
164 lines
7.9 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { Trophy, Medal, Award, TrendingUp, Star, CheckSquare } from 'lucide-react';
|
|
import { motion } from 'framer-motion';
|
|
import Card from '../components/ui/Card';
|
|
import Tag from '../components/ui/Tag';
|
|
import { useApp } from '../store/AppContext';
|
|
import * as db from '../lib/db';
|
|
|
|
const BADGE_RULES = [
|
|
{ id: 'first_test', icon: Star, label: 'First Steps', condition: (u) => u.tests_completed > 0 },
|
|
{ id: 'perfectionist', icon: Award, label: 'Perfectionist', condition: (u) => u.perfectScores > 0 },
|
|
{ id: 'veteran', icon: Medal, label: 'Veteran', condition: (u) => u.tests_completed >= 5 },
|
|
];
|
|
|
|
const Leaderboard = () => {
|
|
const { state } = useApp();
|
|
const [board, setBoard] = useState([]);
|
|
|
|
useEffect(() => {
|
|
const load = async () => {
|
|
const [leaderboardData, allUsers] = await Promise.all([
|
|
db.getLeaderboard(),
|
|
db.getTeamMembers(),
|
|
]);
|
|
|
|
const nonAdminIds = allUsers.filter(u => u.role !== 'admin').map(u => u.id);
|
|
let data = leaderboardData.filter(entry => nonAdminIds.includes(entry.user_id));
|
|
|
|
// Ensure all non-admin users appear even if they have no points yet
|
|
const inBoard = new Set(data.map(e => e.user_id));
|
|
for (const user of allUsers) {
|
|
if (!inBoard.has(user.id) && user.role !== 'admin') {
|
|
data.push({ user_id: user.id, name: user.name, points: 0, tests_completed: 0, perfectScores: 0 });
|
|
}
|
|
}
|
|
|
|
// Compute perfect scores per user
|
|
data = await Promise.all(data.map(async entry => {
|
|
let perfectScores = 0;
|
|
for (let w = 1; w <= state.weekNumber; w++) {
|
|
const result = await db.getQuizResult(entry.user_id, w);
|
|
if (result && result.percentage === 100) perfectScores++;
|
|
}
|
|
return { ...entry, perfectScores };
|
|
}));
|
|
|
|
data.sort((a, b) => b.points - a.points);
|
|
setBoard(data);
|
|
};
|
|
|
|
load();
|
|
}, [state.weekNumber]);
|
|
|
|
return (
|
|
<div className="p-4 md:p-8 max-w-4xl mx-auto pb-24 md:pb-8">
|
|
<div className="text-center mb-12">
|
|
<Trophy size={56} className="mx-auto text-teal/30 mb-4" />
|
|
<h1 className="text-3xl md:text-4xl font-bold text-teal mb-3">Company Leaderboard</h1>
|
|
<p className="text-fg-muted">Compete, learn, and earn badges based on your weekly knowledge tests.</p>
|
|
</div>
|
|
|
|
{board.length >= 3 && (
|
|
<div className="flex justify-center items-end gap-2 md:gap-6 mb-16 h-64 mt-12">
|
|
<motion.div initial={{ y: 50, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ delay: 0.2 }} className="w-1/3 max-w-[140px] flex flex-col items-center">
|
|
<div className="relative mb-4">
|
|
<div className="w-16 h-16 rounded-full bg-slate-200 border-4 border-paper flex items-center justify-center text-slate-500 font-bold text-2xl shadow-lg z-10 relative">2</div>
|
|
<div className="absolute -inset-2 bg-slate-100 rounded-full z-0 blur-sm"></div>
|
|
</div>
|
|
<p className="font-bold text-center truncate w-full px-2">{board[1].name}</p>
|
|
<p className="text-teal font-medium text-sm">{board[1].points} pts</p>
|
|
<div className="w-full h-24 bg-gradient-to-t from-slate-200/50 to-transparent rounded-t-[var(--r-sm)] mt-4"></div>
|
|
</motion.div>
|
|
|
|
<motion.div initial={{ y: 50, opacity: 0 }} animate={{ y: 0, opacity: 1 }} className="w-1/3 max-w-[160px] flex flex-col items-center z-10">
|
|
<div className="relative mb-6">
|
|
<div className="w-20 h-20 rounded-full bg-yellow-400 border-4 border-paper flex items-center justify-center text-yellow-800 font-bold text-3xl shadow-xl z-10 relative">1</div>
|
|
<div className="absolute -inset-3 bg-yellow-300 rounded-full z-0 blur-md opacity-60"></div>
|
|
<Trophy size={24} className="absolute -top-6 left-1/2 -translate-x-1/2 text-yellow-500" />
|
|
</div>
|
|
<p className="font-bold text-center text-lg truncate w-full px-2">{board[0].name}</p>
|
|
<p className="text-teal font-bold">{board[0].points} pts</p>
|
|
<div className="w-full h-32 bg-gradient-to-t from-yellow-400/20 to-transparent rounded-t-[var(--r-sm)] mt-4 border-t border-yellow-400/30"></div>
|
|
</motion.div>
|
|
|
|
<motion.div initial={{ y: 50, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ delay: 0.4 }} className="w-1/3 max-w-[140px] flex flex-col items-center">
|
|
<div className="relative mb-4">
|
|
<div className="w-16 h-16 rounded-full bg-amber-700 border-4 border-paper flex items-center justify-center text-white font-bold text-2xl shadow-lg z-10 relative">3</div>
|
|
<div className="absolute -inset-2 bg-amber-800/20 rounded-full z-0 blur-sm"></div>
|
|
</div>
|
|
<p className="font-bold text-center truncate w-full px-2">{board[2].name}</p>
|
|
<p className="text-teal font-medium text-sm">{board[2].points} pts</p>
|
|
<div className="w-full h-20 bg-gradient-to-t from-amber-700/10 to-transparent rounded-t-[var(--r-sm)] mt-4"></div>
|
|
</motion.div>
|
|
</div>
|
|
)}
|
|
|
|
<Card className="border border-bg-warm p-0 overflow-hidden">
|
|
<div className="divide-y divide-bg-warm">
|
|
{board.map((user, index) => {
|
|
const earnedBadges = BADGE_RULES.filter(r => r.condition(user));
|
|
const isMe = user.user_id === state.currentUser?.id;
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ delay: index * 0.05 }}
|
|
key={user.user_id}
|
|
className={`p-4 flex flex-col sm:flex-row sm:items-center gap-4 transition-colors ${isMe ? 'bg-teal/5 border-l-4 border-teal' : 'hover:bg-bg-warm/30'}`}
|
|
>
|
|
<div className="flex items-center gap-4 min-w-[200px]">
|
|
<span className={`font-mono text-lg font-bold w-6 text-center ${
|
|
index === 0 ? 'text-yellow-500' :
|
|
index === 1 ? 'text-slate-400' :
|
|
index === 2 ? 'text-amber-700' : 'text-fg-muted'
|
|
}`}>
|
|
#{index + 1}
|
|
</span>
|
|
<div>
|
|
<p className="font-bold flex items-center gap-2">
|
|
{user.name}
|
|
{isMe && <Tag variant="accent" className="text-[10px]">You</Tag>}
|
|
</p>
|
|
<p className="text-xs text-fg-muted flex items-center gap-1">
|
|
<CheckSquare size={12} /> {user.tests_completed || 0} tests completed
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 flex sm:justify-center">
|
|
<div className="flex items-center gap-1.5 text-teal font-bold bg-teal/10 px-3 py-1 rounded-full text-sm">
|
|
<TrendingUp size={14} />
|
|
{user.points} pts
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-2 sm:justify-end min-w-[120px]">
|
|
{earnedBadges.length > 0 ? (
|
|
earnedBadges.map(b => (
|
|
<div key={b.id} title={b.label} className="w-8 h-8 rounded-full bg-bg-warm flex items-center justify-center text-teal shadow-sm border border-bg-warm">
|
|
<b.icon size={14} />
|
|
</div>
|
|
))
|
|
) : (
|
|
<span className="text-xs text-fg-muted italic">No badges yet</span>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
|
|
{board.length === 0 && (
|
|
<div className="p-8 text-center text-fg-muted">
|
|
No one is on the leaderboard yet. Be the first to complete a test!
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Leaderboard;
|