fix issues
This commit is contained in:
@@ -246,193 +246,158 @@ export default function UserPill() {
|
||||
}
|
||||
};
|
||||
|
||||
// Demo user UI
|
||||
if (isDemo && data?.isDemo) {
|
||||
const roleLabel = {
|
||||
'driver': 'Driver',
|
||||
'sponsor': 'Sponsor',
|
||||
'league-owner': 'League Owner',
|
||||
'league-steward': 'League Steward',
|
||||
'league-admin': 'League Admin',
|
||||
'system-owner': 'System Owner',
|
||||
'super-admin': 'Super Admin',
|
||||
}[demoRole || 'driver'];
|
||||
|
||||
const roleColor = {
|
||||
'driver': 'text-primary-blue',
|
||||
'sponsor': 'text-performance-green',
|
||||
'league-owner': 'text-purple-400',
|
||||
'league-steward': 'text-amber-400',
|
||||
'league-admin': 'text-red-400',
|
||||
'system-owner': 'text-indigo-400',
|
||||
'super-admin': 'text-pink-400',
|
||||
}[demoRole || 'driver'];
|
||||
|
||||
// Call hooks unconditionally before any returns
|
||||
const hasAdminAccess = useHasAdminAccess();
|
||||
|
||||
// Handle unauthenticated users
|
||||
if (!session) {
|
||||
return (
|
||||
<div className="relative inline-flex items-center" data-user-pill>
|
||||
<motion.button
|
||||
onClick={() => setIsMenuOpen((open) => !open)}
|
||||
className="group flex items-center gap-3 rounded-full bg-gradient-to-r from-iron-gray to-deep-graphite border border-charcoal-outline px-3 py-1.5 hover:border-primary-blue/50 transition-all duration-200"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
<div className="flex items-center gap-2">
|
||||
<Link
|
||||
href="/auth/login"
|
||||
className="inline-flex items-center gap-2 rounded-full bg-iron-gray border border-charcoal-outline px-4 py-1.5 text-xs font-medium text-gray-300 hover:text-white hover:border-gray-500 transition-all"
|
||||
>
|
||||
{/* Avatar */}
|
||||
<div className="relative">
|
||||
{data.avatarUrl ? (
|
||||
<div className="w-8 h-8 rounded-full overflow-hidden bg-charcoal-outline flex items-center justify-center border border-charcoal-outline/80">
|
||||
<img
|
||||
src={data.avatarUrl}
|
||||
alt={data.displayName}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-8 h-8 rounded-full bg-gradient-to-br from-primary-blue/20 to-primary-blue/5 border border-primary-blue/30 flex items-center justify-center">
|
||||
<span className="text-xs font-bold text-primary-blue">DEMO</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full bg-primary-blue border-2 border-deep-graphite" />
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div className="hidden sm:flex flex-col items-start">
|
||||
<span className="text-xs font-semibold text-white truncate max-w-[100px]">
|
||||
{data.displayName}
|
||||
</span>
|
||||
<span className={`text-[10px] ${roleColor} font-medium`}>
|
||||
{roleLabel}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Chevron */}
|
||||
<ChevronDown className="w-3.5 h-3.5 text-gray-500 group-hover:text-gray-300 transition-colors" />
|
||||
</motion.button>
|
||||
|
||||
<AnimatePresence>
|
||||
{isMenuOpen && (
|
||||
<motion.div
|
||||
className="absolute right-0 top-full mt-2 w-56 rounded-xl bg-deep-graphite border border-charcoal-outline shadow-xl shadow-black/30 z-50 overflow-hidden"
|
||||
initial={{ opacity: 0, y: -10, scale: 0.95 }}
|
||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, y: -10, scale: 0.95 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="p-4 bg-gradient-to-r from-primary-blue/10 to-transparent border-b border-charcoal-outline">
|
||||
<div className="flex items-center gap-3">
|
||||
{data.avatarUrl ? (
|
||||
<div className="w-10 h-10 rounded-lg overflow-hidden bg-charcoal-outline flex items-center justify-center border border-charcoal-outline/80">
|
||||
<img
|
||||
src={data.avatarUrl}
|
||||
alt={data.displayName}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-10 h-10 rounded-lg bg-gradient-to-br from-primary-blue/20 to-primary-blue/5 border border-primary-blue/30 flex items-center justify-center">
|
||||
<span className="text-xs font-bold text-primary-blue">DEMO</span>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-white">{data.displayName}</p>
|
||||
<p className={`text-xs ${roleColor}`}>{roleLabel}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2 text-xs text-gray-500">
|
||||
Development account - not for production use
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Menu Items */}
|
||||
<div className="py-1 text-sm text-gray-200">
|
||||
{/* Admin link for system-owner and super-admin demo users */}
|
||||
{(demoRole === 'system-owner' || demoRole === 'super-admin') && (
|
||||
<Link
|
||||
href="/admin"
|
||||
className="flex items-center gap-3 px-4 py-2.5 hover:bg-iron-gray/50 transition-colors"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
<Shield className="h-4 w-4 text-indigo-400" />
|
||||
<span>Admin Area</span>
|
||||
</Link>
|
||||
)}
|
||||
<div className="px-4 py-2 text-xs text-gray-500 italic">
|
||||
Demo users have limited profile access
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="border-t border-charcoal-outline">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleLogout}
|
||||
className="flex w-full items-center justify-between px-4 py-3 text-sm text-gray-500 hover:text-racing-red hover:bg-racing-red/5 transition-colors"
|
||||
>
|
||||
<span>Logout</span>
|
||||
<LogOut className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
Sign In
|
||||
</Link>
|
||||
<Link
|
||||
href="/auth/signup"
|
||||
className="inline-flex items-center gap-2 rounded-full bg-primary-blue px-4 py-1.5 text-xs font-semibold text-white shadow-[0_0_12px_rgba(25,140,255,0.5)] hover:bg-primary-blue/90 hover:shadow-[0_0_18px_rgba(25,140,255,0.8)] transition-all"
|
||||
>
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Sponsor mode UI
|
||||
if (isSponsorMode) {
|
||||
return (
|
||||
<div className="relative inline-flex items-center" data-user-pill>
|
||||
<SponsorSummaryPill onClick={() => setIsMenuOpen((open) => !open)} />
|
||||
// For all authenticated users (demo or regular), show the user pill
|
||||
// Determine what to show in the pill
|
||||
const displayName = session.user.displayName || session.user.email || 'User';
|
||||
const avatarUrl = session.user.avatarUrl;
|
||||
const roleLabel = isDemo ? {
|
||||
'driver': 'Driver',
|
||||
'sponsor': 'Sponsor',
|
||||
'league-owner': 'League Owner',
|
||||
'league-steward': 'League Steward',
|
||||
'league-admin': 'League Admin',
|
||||
'system-owner': 'System Owner',
|
||||
'super-admin': 'Super Admin',
|
||||
}[demoRole || 'driver'] : null;
|
||||
|
||||
<AnimatePresence>
|
||||
{isMenuOpen && (
|
||||
<motion.div
|
||||
className="absolute right-0 top-full mt-2 w-64 rounded-xl bg-deep-graphite border border-charcoal-outline shadow-xl shadow-black/30 z-50 overflow-hidden"
|
||||
initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: -10, scale: 0.95 }}
|
||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, y: -10, scale: 0.95 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="p-4 bg-gradient-to-r from-performance-green/10 to-transparent border-b border-charcoal-outline">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-lg bg-gradient-to-br from-performance-green/20 to-performance-green/5 border border-performance-green/30 flex items-center justify-center">
|
||||
<Building2 className="w-5 h-5 text-performance-green" />
|
||||
const roleColor = isDemo ? {
|
||||
'driver': 'text-primary-blue',
|
||||
'sponsor': 'text-performance-green',
|
||||
'league-owner': 'text-purple-400',
|
||||
'league-steward': 'text-amber-400',
|
||||
'league-admin': 'text-red-400',
|
||||
'system-owner': 'text-indigo-400',
|
||||
'super-admin': 'text-pink-400',
|
||||
}[demoRole || 'driver'] : null;
|
||||
|
||||
return (
|
||||
<div className="relative inline-flex items-center" data-user-pill>
|
||||
<motion.button
|
||||
onClick={() => setIsMenuOpen((open) => !open)}
|
||||
className="group flex items-center gap-3 rounded-full bg-gradient-to-r from-iron-gray to-deep-graphite border border-charcoal-outline px-3 py-1.5 hover:border-primary-blue/50 transition-all duration-200"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
{/* Avatar */}
|
||||
<div className="relative">
|
||||
{avatarUrl ? (
|
||||
<div className="w-8 h-8 rounded-full overflow-hidden bg-charcoal-outline flex items-center justify-center border border-charcoal-outline/80">
|
||||
<img
|
||||
src={avatarUrl}
|
||||
alt={displayName}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-8 h-8 rounded-full bg-gradient-to-br from-primary-blue/20 to-primary-blue/5 border border-primary-blue/30 flex items-center justify-center">
|
||||
<span className="text-xs font-bold text-primary-blue">
|
||||
{displayName[0]?.toUpperCase() || 'U'}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full bg-primary-blue border-2 border-deep-graphite" />
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div className="hidden sm:flex flex-col items-start">
|
||||
<span className="text-xs font-semibold text-white truncate max-w-[100px]">
|
||||
{displayName}
|
||||
</span>
|
||||
{roleLabel && (
|
||||
<span className={`text-[10px] ${roleColor} font-medium`}>
|
||||
{roleLabel}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Chevron */}
|
||||
<ChevronDown className="w-3.5 h-3.5 text-gray-500 group-hover:text-gray-300 transition-colors" />
|
||||
</motion.button>
|
||||
|
||||
<AnimatePresence>
|
||||
{isMenuOpen && (
|
||||
<motion.div
|
||||
className="absolute right-0 top-full mt-2 w-56 rounded-xl bg-deep-graphite border border-charcoal-outline shadow-xl shadow-black/30 z-50 overflow-hidden"
|
||||
initial={{ opacity: 0, y: -10, scale: 0.95 }}
|
||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, y: -10, scale: 0.95 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className={`p-4 bg-gradient-to-r ${isDemo ? 'from-primary-blue/10' : 'from-iron-gray/20'} to-transparent border-b border-charcoal-outline`}>
|
||||
<div className="flex items-center gap-3">
|
||||
{avatarUrl ? (
|
||||
<div className="w-10 h-10 rounded-lg overflow-hidden bg-charcoal-outline flex items-center justify-center border border-charcoal-outline/80">
|
||||
<img
|
||||
src={avatarUrl}
|
||||
alt={displayName}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-white">Acme Racing Co.</p>
|
||||
<p className="text-xs text-gray-500">Sponsor Account</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Quick stats */}
|
||||
<div className="flex items-center gap-4 mt-3 pt-3 border-t border-charcoal-outline/50">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Trophy className="w-3.5 h-3.5 text-performance-green" />
|
||||
<span className="text-xs text-gray-400">7 active</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<TrendingUp className="w-3.5 h-3.5 text-primary-blue" />
|
||||
<span className="text-xs text-gray-400">127k views</span>
|
||||
) : (
|
||||
<div className="w-10 h-10 rounded-lg bg-gradient-to-br from-primary-blue/20 to-primary-blue/5 border border-primary-blue/30 flex items-center justify-center">
|
||||
<span className="text-xs font-bold text-primary-blue">
|
||||
{displayName[0]?.toUpperCase() || 'U'}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-white">{displayName}</p>
|
||||
{roleLabel && (
|
||||
<p className={`text-xs ${roleColor}`}>{roleLabel}</p>
|
||||
)}
|
||||
{isDemo && (
|
||||
<p className="text-xs text-gray-500">Demo Account</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{isDemo && (
|
||||
<div className="mt-2 text-xs text-gray-500">
|
||||
Development account - not for production use
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Menu Items */}
|
||||
<CapabilityGate
|
||||
capabilityKey="sponsors.portal"
|
||||
fallback={
|
||||
<div className="py-2 px-4 text-xs text-gray-500">
|
||||
Sponsor portal is currently unavailable.
|
||||
</div>
|
||||
}
|
||||
comingSoon={
|
||||
<div className="py-2 px-4 text-xs text-gray-500">
|
||||
Sponsor portal is coming soon.
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="py-2 text-sm text-gray-200">
|
||||
{/* Menu Items */}
|
||||
<div className="py-1 text-sm text-gray-200">
|
||||
{/* Admin link for Owner/Super Admin users */}
|
||||
{hasAdminAccess && (
|
||||
<Link
|
||||
href="/admin"
|
||||
className="flex items-center gap-3 px-4 py-2.5 hover:bg-iron-gray/50 transition-colors"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
<Shield className="h-4 w-4 text-indigo-400" />
|
||||
<span>Admin Area</span>
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{/* Sponsor portal link for demo sponsor users */}
|
||||
{isDemo && demoRole === 'sponsor' && (
|
||||
<>
|
||||
<Link
|
||||
href="/sponsor"
|
||||
className="flex items-center gap-3 px-4 py-2.5 hover:bg-iron-gray/50 transition-colors"
|
||||
@@ -465,108 +430,27 @@ export default function UserPill() {
|
||||
<Settings className="h-4 w-4 text-gray-400" />
|
||||
<span>Settings</span>
|
||||
</Link>
|
||||
</div>
|
||||
</CapabilityGate>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="border-t border-charcoal-outline">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
document.cookie = 'gridpilot_demo_mode=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';
|
||||
window.location.reload();
|
||||
}}
|
||||
className="flex w-full items-center justify-between px-4 py-3 text-sm text-gray-500 hover:text-racing-red hover:bg-racing-red/5 transition-colors"
|
||||
>
|
||||
<span>Exit Sponsor Mode</span>
|
||||
<LogOut className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!session) {
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<Link
|
||||
href="/auth/login"
|
||||
className="inline-flex items-center gap-2 rounded-full bg-iron-gray border border-charcoal-outline px-4 py-1.5 text-xs font-medium text-gray-300 hover:text-white hover:border-gray-500 transition-all"
|
||||
>
|
||||
Sign In
|
||||
</Link>
|
||||
<Link
|
||||
href="/auth/signup"
|
||||
className="inline-flex items-center gap-2 rounded-full bg-primary-blue px-4 py-1.5 text-xs font-semibold text-white shadow-[0_0_12px_rgba(25,140,255,0.5)] hover:bg-primary-blue/90 hover:shadow-[0_0_18px_rgba(25,140,255,0.8)] transition-all"
|
||||
>
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!data || data.isDemo) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Type guard to ensure data has the required properties for regular driver
|
||||
if (!data.driver || data.rating === undefined || data.rank === undefined) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const hasAdminAccess = useHasAdminAccess();
|
||||
|
||||
return (
|
||||
<div className="relative inline-flex items-center" data-user-pill>
|
||||
<DriverSummaryPill
|
||||
driver={data.driver}
|
||||
rating={data.rating}
|
||||
rank={data.rank}
|
||||
avatarSrc={data.avatarSrc}
|
||||
onClick={() => setIsMenuOpen((open) => !open)}
|
||||
/>
|
||||
|
||||
<AnimatePresence>
|
||||
{isMenuOpen && (
|
||||
<motion.div
|
||||
className="absolute right-0 top-full mt-2 w-48 rounded-lg bg-deep-graphite border border-charcoal-outline shadow-lg z-50"
|
||||
initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
>
|
||||
<div className="py-1 text-sm text-gray-200">
|
||||
{/* Admin link for Owner/Super Admin users */}
|
||||
{hasAdminAccess && (
|
||||
<Link
|
||||
href="/admin"
|
||||
className="flex items-center gap-2 px-3 py-2 hover:bg-charcoal-outline/80 transition-colors"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
<Shield className="h-4 w-4 text-indigo-400" />
|
||||
<span>Admin Area</span>
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Regular user profile links */}
|
||||
<Link
|
||||
href="/profile"
|
||||
className="block px-3 py-2 hover:bg-charcoal-outline/80 transition-colors"
|
||||
className="block px-4 py-2.5 hover:bg-iron-gray/50 transition-colors"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
Profile
|
||||
</Link>
|
||||
<Link
|
||||
href="/profile/leagues"
|
||||
className="block px-3 py-2 hover:bg-charcoal-outline/80 transition-colors"
|
||||
className="block px-4 py-2.5 hover:bg-iron-gray/50 transition-colors"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
Manage leagues
|
||||
</Link>
|
||||
<Link
|
||||
href="/profile/liveries"
|
||||
className="flex items-center gap-2 px-3 py-2 hover:bg-charcoal-outline/80 transition-colors"
|
||||
className="flex items-center gap-2 px-4 py-2.5 hover:bg-iron-gray/50 transition-colors"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
<Paintbrush className="h-4 w-4" />
|
||||
@@ -574,7 +458,7 @@ export default function UserPill() {
|
||||
</Link>
|
||||
<Link
|
||||
href="/profile/sponsorship-requests"
|
||||
className="flex items-center gap-2 px-3 py-2 hover:bg-charcoal-outline/80 transition-colors"
|
||||
className="flex items-center gap-2 px-4 py-2.5 hover:bg-iron-gray/50 transition-colors"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
<Handshake className="h-4 w-4 text-performance-green" />
|
||||
@@ -582,23 +466,43 @@ export default function UserPill() {
|
||||
</Link>
|
||||
<Link
|
||||
href="/profile/settings"
|
||||
className="flex items-center gap-2 px-3 py-2 hover:bg-charcoal-outline/80 transition-colors"
|
||||
className="flex items-center gap-2 px-4 py-2.5 hover:bg-iron-gray/50 transition-colors"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
<Settings className="h-4 w-4" />
|
||||
<span>Settings</span>
|
||||
</Link>
|
||||
|
||||
{/* Demo-specific info */}
|
||||
{isDemo && (
|
||||
<div className="px-4 py-2 text-xs text-gray-500 italic border-t border-charcoal-outline/50 mt-1">
|
||||
Demo users have limited profile access
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="border-t border-charcoal-outline">
|
||||
<form action="/auth/logout" method="POST">
|
||||
{isDemo ? (
|
||||
<button
|
||||
type="submit"
|
||||
className="flex w-full items-center justify-between px-3 py-2 text-sm text-gray-400 hover:text-red-400 hover:bg-red-500/10 transition-colors"
|
||||
type="button"
|
||||
onClick={handleLogout}
|
||||
className="flex w-full items-center justify-between px-4 py-3 text-sm text-gray-500 hover:text-racing-red hover:bg-racing-red/5 transition-colors"
|
||||
>
|
||||
<span>Logout</span>
|
||||
<LogOut className="h-4 w-4" />
|
||||
</button>
|
||||
</form>
|
||||
) : (
|
||||
<form action="/auth/logout" method="POST">
|
||||
<button
|
||||
type="submit"
|
||||
className="flex w-full items-center justify-between px-4 py-3 text-sm text-gray-500 hover:text-red-400 hover:bg-red-500/10 transition-colors"
|
||||
>
|
||||
<span>Logout</span>
|
||||
<LogOut className="h-4 w-4" />
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user