 Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory : /home/gositeme/domains/lavocat.ca/private_html/src/components/ |
import React, { useState } from 'react';
import { formatDistanceToNow } from 'date-fns';
import { AchievementData, BadgeData } from '@/hooks/useProfileActivity';
interface AchievementsPanelProps {
achievements: AchievementData[];
badges: BadgeData[];
isLoading: boolean;
error: string | null;
}
const getRarityColor = (rarity: string): string => {
switch (rarity) {
case 'COMMON':
return 'bg-gray-100 text-gray-800 border-gray-200';
case 'UNCOMMON':
return 'bg-green-100 text-green-800 border-green-200';
case 'RARE':
return 'bg-blue-100 text-blue-800 border-blue-200';
case 'EPIC':
return 'bg-purple-100 text-purple-800 border-purple-200';
case 'LEGENDARY':
return 'bg-orange-100 text-orange-800 border-orange-200';
default:
return 'bg-gray-100 text-gray-800 border-gray-200';
}
};
const getRarityIcon = (rarity: string): string => {
switch (rarity) {
case 'COMMON':
return '🥉';
case 'UNCOMMON':
return '🥈';
case 'RARE':
return '🥇';
case 'EPIC':
return '💎';
case 'LEGENDARY':
return '👑';
default:
return '🏆';
}
};
export default function AchievementsPanel({ achievements, badges, isLoading, error }: AchievementsPanelProps) {
const [activeTab, setActiveTab] = useState<'achievements' | 'badges'>('achievements');
if (isLoading) {
return (
<div className="space-y-4">
<div className="flex space-x-4 border-b">
<div className="h-8 bg-gray-200 rounded w-24 animate-pulse"></div>
<div className="h-8 bg-gray-200 rounded w-20 animate-pulse"></div>
</div>
<div className="space-y-3">
{[...Array(3)].map((_, i) => (
<div key={i} className="animate-pulse">
<div className="flex items-center space-x-3">
<div className="w-12 h-12 bg-gray-200 rounded-full"></div>
<div className="flex-1 space-y-2">
<div className="h-4 bg-gray-200 rounded w-3/4"></div>
<div className="h-3 bg-gray-200 rounded w-1/2"></div>
</div>
</div>
</div>
))}
</div>
</div>
);
}
if (error) {
return (
<div className="text-center py-8">
<div className="text-red-500 text-2xl mb-2">⚠️</div>
<p className="text-red-600 font-medium">Error loading achievements</p>
<p className="text-red-500 text-sm mt-1">{error}</p>
</div>
);
}
return (
<div>
{/* Tabs */}
<div className="flex space-x-4 border-b mb-4">
<button
onClick={() => setActiveTab('achievements')}
className={`pb-2 px-1 ${
activeTab === 'achievements'
? 'border-b-2 border-blue-500 text-blue-600 font-medium'
: 'text-gray-500 hover:text-gray-700'
}`}
>
Achievements ({achievements.length})
</button>
<button
onClick={() => setActiveTab('badges')}
className={`pb-2 px-1 ${
activeTab === 'badges'
? 'border-b-2 border-blue-500 text-blue-600 font-medium'
: 'text-gray-500 hover:text-gray-700'
}`}
>
Badges ({badges.length})
</button>
</div>
{/* Achievements Tab */}
{activeTab === 'achievements' && (
<div className="space-y-4">
{achievements.length === 0 ? (
<div className="text-center py-8">
<div className="text-gray-400 text-4xl mb-3">🏆</div>
<p className="text-gray-500 font-medium">No achievements yet</p>
<p className="text-gray-400 text-sm mt-1">Complete tasks to unlock achievements</p>
</div>
) : (
achievements.map((achievement) => (
<div
key={achievement.id}
className={`flex items-center space-x-3 p-3 rounded-lg border ${
achievement.isCompleted
? 'bg-green-50 border-green-200'
: 'bg-gray-50 border-gray-200'
}`}
>
<div className="flex-shrink-0">
<div className={`w-12 h-12 rounded-full flex items-center justify-center text-2xl ${
achievement.isCompleted
? 'bg-green-100 text-green-600'
: 'bg-gray-100 text-gray-400'
}`}>
{achievement.icon || '🏆'}
</div>
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between">
<h4 className="text-sm font-medium text-gray-900">
{achievement.name}
</h4>
{achievement.isCompleted && (
<span className="text-xs text-green-600 font-medium">✓ Completed</span>
)}
</div>
<p className="text-sm text-gray-600 mt-1">
{achievement.description}
</p>
{/* Progress Bar */}
<div className="mt-2">
<div className="flex justify-between text-xs text-gray-500 mb-1">
<span>Progress</span>
<span>{achievement.currentProgress} / {achievement.target}</span>
</div>
<div className="w-full bg-gray-200 rounded-full h-2">
<div
className={`h-2 rounded-full ${
achievement.isCompleted ? 'bg-green-500' : 'bg-blue-500'
}`}
style={{
width: `${Math.min((achievement.currentProgress / achievement.target) * 100, 100)}%`
}}
></div>
</div>
</div>
<div className="flex items-center justify-between mt-2">
<span className="text-xs text-gray-500">
{achievement.xpReward} XP reward
</span>
{achievement.completedAt && (
<span className="text-xs text-gray-400">
{formatDistanceToNow(new Date(achievement.completedAt), { addSuffix: true })}
</span>
)}
</div>
</div>
</div>
))
)}
</div>
)}
{/* Badges Tab */}
{activeTab === 'badges' && (
<div className="space-y-4">
{badges.length === 0 ? (
<div className="text-center py-8">
<div className="text-gray-400 text-4xl mb-3">🏅</div>
<p className="text-gray-500 font-medium">No badges yet</p>
<p className="text-gray-400 text-sm mt-1">Earn badges by completing special tasks</p>
</div>
) : (
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
{badges.map((badge) => (
<div
key={badge.id}
className="p-4 rounded-lg border border-gray-200 hover:shadow-md transition-shadow"
>
<div className="flex items-center space-x-3">
<div className="flex-shrink-0">
<div className="w-12 h-12 rounded-full bg-gradient-to-br from-yellow-400 to-orange-500 flex items-center justify-center text-2xl">
{badge.icon}
</div>
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between">
<h4 className="text-sm font-medium text-gray-900 truncate">
{badge.name}
</h4>
<span className="text-xs">{getRarityIcon(badge.rarity)}</span>
</div>
<p className="text-sm text-gray-600 mt-1 line-clamp-2">
{badge.description}
</p>
<div className="flex items-center justify-between mt-2">
<span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium border ${getRarityColor(badge.rarity)}`}>
{badge.rarity}
</span>
<span className="text-xs text-gray-400">
{formatDistanceToNow(new Date(badge.earnedAt), { addSuffix: true })}
</span>
</div>
</div>
</div>
</div>
))}
</div>
)}
</div>
)}
</div>
);
}