feat: Professional redesign of user and admin backend
- Redesigned Sidebar with pounce puma logo and elegant premium styling - Updated CommandCenterLayout with improved top bar styling - Integrated Admin page into CommandCenterLayout for consistent experience - Created reusable DataTable component with elegant styling - Enhanced Dashboard with premium card designs and visual effects - Improved Watchlist with modern gradient styling - Added case-insensitive email handling in auth (from previous fix) All tables now have consistent, elegant styling with: - Gradient backgrounds - Subtle borders and shadows - Hover effects with accent color - Responsive design - Status badges and action buttons
This commit is contained in:
yves.gugger
@ -58,8 +58,11 @@ class AuthService:
|
||||
|
||||
@staticmethod
|
||||
async def get_user_by_email(db: AsyncSession, email: str) -> Optional[User]:
|
||||
"""Get user by email."""
|
||||
result = await db.execute(select(User).where(User.email == email))
|
||||
"""Get user by email (case-insensitive)."""
|
||||
from sqlalchemy import func
|
||||
result = await db.execute(
|
||||
select(User).where(func.lower(User.email) == email.lower())
|
||||
)
|
||||
return result.scalar_one_or_none()
|
||||
|
||||
@staticmethod
|
||||
@ -89,9 +92,9 @@ class AuthService:
|
||||
name: Optional[str] = None
|
||||
) -> User:
|
||||
"""Create a new user with default subscription."""
|
||||
# Create user
|
||||
# Create user (normalize email to lowercase)
|
||||
user = User(
|
||||
email=email,
|
||||
email=email.lower().strip(),
|
||||
hashed_password=AuthService.hash_password(password),
|
||||
name=name,
|
||||
)
|
||||
|
||||
@ -1 +1 @@
|
||||
4645
|
||||
7503
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,7 +1,7 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useRouter, useSearchParams } from 'next/navigation'
|
||||
import { useSearchParams } from 'next/navigation'
|
||||
import { useStore } from '@/lib/store'
|
||||
import { api } from '@/lib/api'
|
||||
import { CommandCenterLayout } from '@/components/CommandCenterLayout'
|
||||
@ -42,12 +42,10 @@ interface TrendingTld {
|
||||
}
|
||||
|
||||
export default function DashboardPage() {
|
||||
const router = useRouter()
|
||||
const searchParams = useSearchParams()
|
||||
const {
|
||||
isAuthenticated,
|
||||
isLoading,
|
||||
checkAuth,
|
||||
user,
|
||||
domains,
|
||||
subscription
|
||||
@ -61,15 +59,8 @@ export default function DashboardPage() {
|
||||
const [quickDomain, setQuickDomain] = useState('')
|
||||
const [addingDomain, setAddingDomain] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
checkAuth()
|
||||
}, [checkAuth])
|
||||
|
||||
useEffect(() => {
|
||||
if (!isLoading && !isAuthenticated) {
|
||||
router.push('/login')
|
||||
}
|
||||
}, [isLoading, isAuthenticated, router])
|
||||
// Note: checkAuth is called in CommandCenterLayout, no need to duplicate here
|
||||
// Auth redirect is also handled by CommandCenterLayout
|
||||
|
||||
// Check for upgrade success
|
||||
useEffect(() => {
|
||||
@ -142,126 +133,146 @@ export default function DashboardPage() {
|
||||
|
||||
<div className="max-w-7xl mx-auto space-y-8">
|
||||
{/* Quick Add */}
|
||||
<div className="p-6 bg-gradient-to-r from-accent/10 to-transparent border border-accent/20 rounded-2xl">
|
||||
<h2 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
|
||||
<Search className="w-5 h-5 text-accent" />
|
||||
Quick Add to Watchlist
|
||||
</h2>
|
||||
<form onSubmit={handleQuickAdd} className="flex gap-3">
|
||||
<input
|
||||
type="text"
|
||||
value={quickDomain}
|
||||
onChange={(e) => setQuickDomain(e.target.value)}
|
||||
placeholder="Enter domain to track (e.g., dream.com)"
|
||||
className="flex-1 h-12 px-4 bg-background border border-border rounded-xl
|
||||
text-foreground placeholder:text-foreground-subtle
|
||||
focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={addingDomain || !quickDomain.trim()}
|
||||
className="flex items-center gap-2 h-12 px-6 bg-accent text-background rounded-xl
|
||||
font-medium hover:bg-accent-hover transition-colors
|
||||
disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Add
|
||||
</button>
|
||||
</form>
|
||||
<div className="relative p-6 bg-gradient-to-r from-accent/10 via-accent/5 to-transparent border border-accent/20 rounded-2xl overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-accent/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2" />
|
||||
<div className="relative">
|
||||
<h2 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
|
||||
<div className="w-8 h-8 bg-accent/20 rounded-lg flex items-center justify-center">
|
||||
<Search className="w-4 h-4 text-accent" />
|
||||
</div>
|
||||
Quick Add to Watchlist
|
||||
</h2>
|
||||
<form onSubmit={handleQuickAdd} className="flex gap-3">
|
||||
<input
|
||||
type="text"
|
||||
value={quickDomain}
|
||||
onChange={(e) => setQuickDomain(e.target.value)}
|
||||
placeholder="Enter domain to track (e.g., dream.com)"
|
||||
className="flex-1 h-12 px-5 bg-background/80 backdrop-blur-sm border border-border/50 rounded-xl
|
||||
text-foreground placeholder:text-foreground-subtle
|
||||
focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent/30
|
||||
shadow-[0_2px_8px_-2px_rgba(0,0,0,0.1)]"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={addingDomain || !quickDomain.trim()}
|
||||
className="flex items-center gap-2 h-12 px-6 bg-gradient-to-r from-accent to-accent/80 text-background rounded-xl
|
||||
font-medium hover:shadow-[0_0_20px_-5px_rgba(16,185,129,0.4)] transition-all
|
||||
disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Add
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Overview */}
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<Link
|
||||
href="/watchlist"
|
||||
className="group p-5 bg-background-secondary/50 border border-border rounded-xl
|
||||
hover:border-foreground/20 transition-all"
|
||||
className="group relative p-5 bg-gradient-to-br from-background-secondary/60 to-background-secondary/30 border border-border/50 rounded-2xl
|
||||
hover:border-accent/30 transition-all duration-300 overflow-hidden"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="w-10 h-10 bg-foreground/5 rounded-xl flex items-center justify-center">
|
||||
<Eye className="w-5 h-5 text-foreground-muted" />
|
||||
<div className="absolute inset-0 bg-accent/5 opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
<div className="relative">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="w-11 h-11 bg-foreground/5 border border-border/30 rounded-xl flex items-center justify-center group-hover:bg-accent/10 group-hover:border-accent/20 transition-all">
|
||||
<Eye className="w-5 h-5 text-foreground-muted group-hover:text-accent transition-colors" />
|
||||
</div>
|
||||
<ChevronRight className="w-5 h-5 text-foreground-subtle group-hover:text-accent
|
||||
group-hover:translate-x-0.5 transition-all" />
|
||||
</div>
|
||||
<ChevronRight className="w-5 h-5 text-foreground-subtle group-hover:text-foreground
|
||||
group-hover:translate-x-0.5 transition-all" />
|
||||
<p className="text-3xl font-display text-foreground mb-1">{totalDomains}</p>
|
||||
<p className="text-sm text-foreground-muted">Domains Watched</p>
|
||||
</div>
|
||||
<p className="text-2xl font-display text-foreground">{totalDomains}</p>
|
||||
<p className="text-sm text-foreground-muted">Domains Watched</p>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/watchlist?filter=available"
|
||||
className={clsx(
|
||||
"group p-5 border rounded-xl transition-all",
|
||||
"group relative p-5 border rounded-2xl transition-all duration-300 overflow-hidden",
|
||||
availableDomains.length > 0
|
||||
? "bg-accent/10 border-accent/20 hover:border-accent/40"
|
||||
: "bg-background-secondary/50 border-border hover:border-foreground/20"
|
||||
? "bg-gradient-to-br from-accent/15 to-accent/5 border-accent/30 hover:border-accent/50 shadow-[0_0_30px_-10px_rgba(16,185,129,0.2)]"
|
||||
: "bg-gradient-to-br from-background-secondary/60 to-background-secondary/30 border-border/50 hover:border-accent/30"
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className={clsx(
|
||||
"w-10 h-10 rounded-xl flex items-center justify-center",
|
||||
availableDomains.length > 0 ? "bg-accent/20" : "bg-foreground/5"
|
||||
)}>
|
||||
<Sparkles className={clsx(
|
||||
"w-5 h-5",
|
||||
availableDomains.length > 0 ? "text-accent" : "text-foreground-muted"
|
||||
)} />
|
||||
{availableDomains.length > 0 && <div className="absolute inset-0 bg-accent/5 animate-pulse" />}
|
||||
<div className="relative">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className={clsx(
|
||||
"w-11 h-11 rounded-xl flex items-center justify-center border transition-all",
|
||||
availableDomains.length > 0 ? "bg-accent/20 border-accent/30" : "bg-foreground/5 border-border/30"
|
||||
)}>
|
||||
<Sparkles className={clsx(
|
||||
"w-5 h-5",
|
||||
availableDomains.length > 0 ? "text-accent" : "text-foreground-muted"
|
||||
)} />
|
||||
</div>
|
||||
{availableDomains.length > 0 && (
|
||||
<span className="px-2.5 py-1 bg-accent text-background text-xs font-bold rounded-lg shadow-[0_0_10px_rgba(16,185,129,0.3)]">
|
||||
POUNCE!
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{availableDomains.length > 0 && (
|
||||
<span className="px-2 py-0.5 bg-accent text-background text-xs font-semibold rounded-full animate-pulse">
|
||||
Action!
|
||||
</span>
|
||||
)}
|
||||
<p className={clsx(
|
||||
"text-3xl font-display mb-1",
|
||||
availableDomains.length > 0 ? "text-accent" : "text-foreground"
|
||||
)}>
|
||||
{availableDomains.length}
|
||||
</p>
|
||||
<p className="text-sm text-foreground-muted">Available Now</p>
|
||||
</div>
|
||||
<p className={clsx(
|
||||
"text-2xl font-display",
|
||||
availableDomains.length > 0 ? "text-accent" : "text-foreground"
|
||||
)}>
|
||||
{availableDomains.length}
|
||||
</p>
|
||||
<p className="text-sm text-foreground-muted">Available Now</p>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/portfolio"
|
||||
className="group p-5 bg-background-secondary/50 border border-border rounded-xl
|
||||
hover:border-foreground/20 transition-all"
|
||||
className="group relative p-5 bg-gradient-to-br from-background-secondary/60 to-background-secondary/30 border border-border/50 rounded-2xl
|
||||
hover:border-accent/30 transition-all duration-300 overflow-hidden"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="w-10 h-10 bg-foreground/5 rounded-xl flex items-center justify-center">
|
||||
<Briefcase className="w-5 h-5 text-foreground-muted" />
|
||||
<div className="absolute inset-0 bg-accent/5 opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
<div className="relative">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="w-11 h-11 bg-foreground/5 border border-border/30 rounded-xl flex items-center justify-center group-hover:bg-accent/10 group-hover:border-accent/20 transition-all">
|
||||
<Briefcase className="w-5 h-5 text-foreground-muted group-hover:text-accent transition-colors" />
|
||||
</div>
|
||||
<ChevronRight className="w-5 h-5 text-foreground-subtle group-hover:text-accent
|
||||
group-hover:translate-x-0.5 transition-all" />
|
||||
</div>
|
||||
<ChevronRight className="w-5 h-5 text-foreground-subtle group-hover:text-foreground
|
||||
group-hover:translate-x-0.5 transition-all" />
|
||||
<p className="text-3xl font-display text-foreground mb-1">0</p>
|
||||
<p className="text-sm text-foreground-muted">Portfolio Domains</p>
|
||||
</div>
|
||||
<p className="text-2xl font-display text-foreground">0</p>
|
||||
<p className="text-sm text-foreground-muted">Portfolio Domains</p>
|
||||
</Link>
|
||||
|
||||
<div className="p-5 bg-background-secondary/50 border border-border rounded-xl">
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="w-10 h-10 bg-accent/10 rounded-xl flex items-center justify-center">
|
||||
<TierIcon className="w-5 h-5 text-accent" />
|
||||
<div className="relative p-5 bg-gradient-to-br from-background-secondary/60 to-background-secondary/30 border border-border/50 rounded-2xl overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-24 h-24 bg-accent/10 rounded-full blur-2xl -translate-y-1/2 translate-x-1/2" />
|
||||
<div className="relative">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="w-11 h-11 bg-accent/10 border border-accent/20 rounded-xl flex items-center justify-center">
|
||||
<TierIcon className="w-5 h-5 text-accent" />
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-3xl font-display text-foreground mb-1">{tierName}</p>
|
||||
<p className="text-sm text-foreground-muted">
|
||||
{subscription?.domains_used || 0}/{subscription?.domain_limit || 5} slots used
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-2xl font-display text-foreground">{tierName}</p>
|
||||
<p className="text-sm text-foreground-muted">
|
||||
{subscription?.domains_used || 0}/{subscription?.domain_limit || 5} slots used
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Activity Feed + Market Pulse */}
|
||||
<div className="grid lg:grid-cols-2 gap-6">
|
||||
{/* Activity Feed */}
|
||||
<div className="p-6 bg-background-secondary/50 border border-border rounded-2xl">
|
||||
<div className="p-6 bg-gradient-to-br from-background-secondary/60 to-background-secondary/30 border border-border/50 rounded-2xl">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-lg font-semibold text-foreground flex items-center gap-2">
|
||||
<Activity className="w-5 h-5 text-accent" />
|
||||
<h2 className="text-lg font-semibold text-foreground flex items-center gap-3">
|
||||
<div className="w-9 h-9 bg-accent/10 border border-accent/20 rounded-lg flex items-center justify-center">
|
||||
<Activity className="w-4 h-4 text-accent" />
|
||||
</div>
|
||||
Activity Feed
|
||||
</h2>
|
||||
<Link href="/watchlist" className="text-sm text-accent hover:underline">
|
||||
View all
|
||||
<Link href="/watchlist" className="text-sm text-accent hover:text-accent/80 transition-colors">
|
||||
View all →
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@ -316,14 +327,16 @@ export default function DashboardPage() {
|
||||
</div>
|
||||
|
||||
{/* Market Pulse */}
|
||||
<div className="p-6 bg-background-secondary/50 border border-border rounded-2xl">
|
||||
<div className="p-6 bg-gradient-to-br from-background-secondary/60 to-background-secondary/30 border border-border/50 rounded-2xl">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-lg font-semibold text-foreground flex items-center gap-2">
|
||||
<Gavel className="w-5 h-5 text-accent" />
|
||||
<h2 className="text-lg font-semibold text-foreground flex items-center gap-3">
|
||||
<div className="w-9 h-9 bg-accent/10 border border-accent/20 rounded-lg flex items-center justify-center">
|
||||
<Gavel className="w-4 h-4 text-accent" />
|
||||
</div>
|
||||
Market Pulse
|
||||
</h2>
|
||||
<Link href="/market" className="text-sm text-accent hover:underline">
|
||||
View all
|
||||
<Link href="/market" className="text-sm text-accent hover:text-accent/80 transition-colors">
|
||||
View all →
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@ -370,14 +383,16 @@ export default function DashboardPage() {
|
||||
</div>
|
||||
|
||||
{/* Trending TLDs */}
|
||||
<div className="p-6 bg-background-secondary/50 border border-border rounded-2xl">
|
||||
<div className="p-6 bg-gradient-to-br from-background-secondary/60 to-background-secondary/30 border border-border/50 rounded-2xl">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-lg font-semibold text-foreground flex items-center gap-2">
|
||||
<TrendingUp className="w-5 h-5 text-accent" />
|
||||
<h2 className="text-lg font-semibold text-foreground flex items-center gap-3">
|
||||
<div className="w-9 h-9 bg-accent/10 border border-accent/20 rounded-lg flex items-center justify-center">
|
||||
<TrendingUp className="w-4 h-4 text-accent" />
|
||||
</div>
|
||||
Trending TLDs
|
||||
</h2>
|
||||
<Link href="/intelligence" className="text-sm text-accent hover:underline">
|
||||
View all
|
||||
<Link href="/intelligence" className="text-sm text-accent hover:text-accent/80 transition-colors">
|
||||
View all →
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@ -393,21 +408,24 @@ export default function DashboardPage() {
|
||||
<Link
|
||||
key={tld.tld}
|
||||
href={`/tld-pricing/${tld.tld}`}
|
||||
className="group p-4 bg-background border border-border rounded-xl
|
||||
hover:border-foreground/20 transition-all"
|
||||
className="group relative p-4 bg-background/50 border border-border/50 rounded-xl
|
||||
hover:border-accent/30 transition-all duration-300 overflow-hidden"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="font-mono text-xl font-semibold text-foreground">.{tld.tld}</span>
|
||||
<span className={clsx(
|
||||
"text-xs font-semibold px-2 py-0.5 rounded-full",
|
||||
(tld.price_change || 0) > 0
|
||||
? "text-orange-400 bg-orange-400/10"
|
||||
: "text-accent bg-accent/10"
|
||||
)}>
|
||||
{(tld.price_change || 0) > 0 ? '+' : ''}{(tld.price_change || 0).toFixed(1)}%
|
||||
</span>
|
||||
<div className="absolute inset-0 bg-accent/5 opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
<div className="relative">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="font-mono text-2xl font-semibold text-foreground group-hover:text-accent transition-colors">.{tld.tld}</span>
|
||||
<span className={clsx(
|
||||
"text-xs font-bold px-2.5 py-1 rounded-lg border",
|
||||
(tld.price_change || 0) > 0
|
||||
? "text-orange-400 bg-orange-400/10 border-orange-400/20"
|
||||
: "text-accent bg-accent/10 border-accent/20"
|
||||
)}>
|
||||
{(tld.price_change || 0) > 0 ? '+' : ''}{(tld.price_change || 0).toFixed(1)}%
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-foreground-muted truncate">{tld.reason}</p>
|
||||
</div>
|
||||
<p className="text-sm text-foreground-muted truncate">{tld.reason}</p>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -201,21 +201,24 @@ export default function WatchlistPage() {
|
||||
<div className="max-w-6xl mx-auto space-y-6">
|
||||
{/* Stats Cards */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
||||
<div className="p-4 bg-background-secondary/50 border border-border rounded-xl">
|
||||
<p className="text-sm text-foreground-muted mb-1">Total Watched</p>
|
||||
<p className="text-2xl font-display text-foreground">{domainsUsed}</p>
|
||||
<div className="p-5 bg-gradient-to-br from-background-secondary/60 to-background-secondary/30 border border-border/50 rounded-2xl">
|
||||
<p className="text-xs text-foreground-subtle uppercase tracking-wider mb-2">Total Watched</p>
|
||||
<p className="text-3xl font-display text-foreground">{domainsUsed}</p>
|
||||
</div>
|
||||
<div className="p-4 bg-accent/5 border border-accent/20 rounded-xl">
|
||||
<p className="text-sm text-foreground-muted mb-1">Available</p>
|
||||
<p className="text-2xl font-display text-accent">{availableCount}</p>
|
||||
<div className="relative p-5 bg-gradient-to-br from-accent/15 to-accent/5 border border-accent/30 rounded-2xl overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-20 h-20 bg-accent/10 rounded-full blur-2xl" />
|
||||
<div className="relative">
|
||||
<p className="text-xs text-foreground-subtle uppercase tracking-wider mb-2">Available</p>
|
||||
<p className="text-3xl font-display text-accent">{availableCount}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 bg-background-secondary/50 border border-border rounded-xl">
|
||||
<p className="text-sm text-foreground-muted mb-1">Watching</p>
|
||||
<p className="text-2xl font-display text-foreground">{watchingCount}</p>
|
||||
<div className="p-5 bg-gradient-to-br from-background-secondary/60 to-background-secondary/30 border border-border/50 rounded-2xl">
|
||||
<p className="text-xs text-foreground-subtle uppercase tracking-wider mb-2">Watching</p>
|
||||
<p className="text-3xl font-display text-foreground">{watchingCount}</p>
|
||||
</div>
|
||||
<div className="p-4 bg-background-secondary/50 border border-border rounded-xl">
|
||||
<p className="text-sm text-foreground-muted mb-1">Limit</p>
|
||||
<p className="text-2xl font-display text-foreground">{domainLimit === -1 ? '∞' : domainLimit}</p>
|
||||
<div className="p-5 bg-gradient-to-br from-background-secondary/60 to-background-secondary/30 border border-border/50 rounded-2xl">
|
||||
<p className="text-xs text-foreground-subtle uppercase tracking-wider mb-2">Limit</p>
|
||||
<p className="text-3xl font-display text-foreground">{domainLimit === -1 ? '∞' : domainLimit}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -229,10 +232,11 @@ export default function WatchlistPage() {
|
||||
placeholder="Enter domain to track (e.g., dream.com)"
|
||||
disabled={!canAddMore}
|
||||
className={clsx(
|
||||
"w-full h-12 px-4 bg-background-secondary border border-border rounded-xl",
|
||||
"w-full h-12 px-5 bg-background-secondary/50 border border-border/50 rounded-xl",
|
||||
"text-foreground placeholder:text-foreground-subtle",
|
||||
"focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent",
|
||||
"disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
"focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent/30",
|
||||
"disabled:opacity-50 disabled:cursor-not-allowed",
|
||||
"shadow-[0_2px_8px_-2px_rgba(0,0,0,0.1)]"
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
@ -241,7 +245,7 @@ export default function WatchlistPage() {
|
||||
disabled={adding || !newDomain.trim() || !canAddMore}
|
||||
className={clsx(
|
||||
"flex items-center gap-2 h-12 px-6 rounded-xl font-medium transition-all",
|
||||
"bg-accent text-background hover:bg-accent-hover",
|
||||
"bg-gradient-to-r from-accent to-accent/80 text-background hover:shadow-[0_0_20px_-5px_rgba(16,185,129,0.4)]",
|
||||
"disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
)}
|
||||
>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useEffect, useState, useRef } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { useStore } from '@/lib/store'
|
||||
import { Sidebar } from './Sidebar'
|
||||
@ -28,6 +28,7 @@ export function CommandCenterLayout({
|
||||
const [searchOpen, setSearchOpen] = useState(false)
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
const [mounted, setMounted] = useState(false)
|
||||
const authCheckedRef = useRef(false)
|
||||
|
||||
// Ensure component is mounted before rendering
|
||||
useEffect(() => {
|
||||
@ -44,8 +45,12 @@ export function CommandCenterLayout({
|
||||
}
|
||||
}, [mounted])
|
||||
|
||||
// Check auth only once on mount
|
||||
useEffect(() => {
|
||||
checkAuth()
|
||||
if (!authCheckedRef.current) {
|
||||
authCheckedRef.current = true
|
||||
checkAuth()
|
||||
}
|
||||
}, [checkAuth])
|
||||
|
||||
useEffect(() => {
|
||||
@ -93,19 +98,19 @@ export function CommandCenterLayout({
|
||||
className={clsx(
|
||||
"relative min-h-screen transition-all duration-300",
|
||||
// Desktop: adjust for sidebar
|
||||
"lg:ml-[240px]",
|
||||
"lg:ml-[260px]",
|
||||
sidebarCollapsed && "lg:ml-[72px]",
|
||||
// Mobile: no margin, just padding for menu button
|
||||
"ml-0 pt-16 lg:pt-0"
|
||||
)}
|
||||
>
|
||||
{/* Top Bar */}
|
||||
<header className="sticky top-0 z-30 h-16 sm:h-20 bg-background/80 backdrop-blur-xl border-b border-border/50">
|
||||
<div className="h-full px-4 sm:px-6 flex items-center justify-between">
|
||||
<header className="sticky top-0 z-30 h-16 sm:h-20 bg-gradient-to-r from-background/90 via-background/80 to-background/90 backdrop-blur-xl border-b border-border/30">
|
||||
<div className="h-full px-4 sm:px-6 lg:px-8 flex items-center justify-between">
|
||||
{/* Left: Title */}
|
||||
<div className="ml-10 lg:ml-0">
|
||||
{title && (
|
||||
<h1 className="text-lg sm:text-xl lg:text-2xl font-display text-foreground">{title}</h1>
|
||||
<h1 className="text-lg sm:text-xl lg:text-2xl font-display tracking-tight text-foreground">{title}</h1>
|
||||
)}
|
||||
{subtitle && (
|
||||
<p className="text-xs sm:text-sm text-foreground-muted mt-0.5 hidden sm:block">{subtitle}</p>
|
||||
|
||||
224
frontend/src/components/DataTable.tsx
Normal file
224
frontend/src/components/DataTable.tsx
Normal file
@ -0,0 +1,224 @@
|
||||
'use client'
|
||||
|
||||
import { ReactNode } from 'react'
|
||||
import clsx from 'clsx'
|
||||
|
||||
interface Column<T> {
|
||||
key: string
|
||||
header: string
|
||||
render?: (item: T, index: number) => ReactNode
|
||||
className?: string
|
||||
headerClassName?: string
|
||||
hideOnMobile?: boolean
|
||||
}
|
||||
|
||||
interface DataTableProps<T> {
|
||||
data: T[]
|
||||
columns: Column<T>[]
|
||||
keyExtractor: (item: T) => string | number
|
||||
onRowClick?: (item: T) => void
|
||||
emptyState?: ReactNode
|
||||
loading?: boolean
|
||||
selectable?: boolean
|
||||
selectedIds?: (string | number)[]
|
||||
onSelectionChange?: (ids: (string | number)[]) => void
|
||||
}
|
||||
|
||||
export function DataTable<T>({
|
||||
data,
|
||||
columns,
|
||||
keyExtractor,
|
||||
onRowClick,
|
||||
emptyState,
|
||||
loading,
|
||||
selectable,
|
||||
selectedIds = [],
|
||||
onSelectionChange,
|
||||
}: DataTableProps<T>) {
|
||||
const toggleSelection = (id: string | number) => {
|
||||
if (!onSelectionChange) return
|
||||
if (selectedIds.includes(id)) {
|
||||
onSelectionChange(selectedIds.filter(i => i !== id))
|
||||
} else {
|
||||
onSelectionChange([...selectedIds, id])
|
||||
}
|
||||
}
|
||||
|
||||
const toggleSelectAll = () => {
|
||||
if (!onSelectionChange) return
|
||||
if (selectedIds.length === data.length) {
|
||||
onSelectionChange([])
|
||||
} else {
|
||||
onSelectionChange(data.map(keyExtractor))
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="relative overflow-hidden rounded-2xl border border-border/50 bg-gradient-to-b from-background-secondary/50 to-background-secondary/20">
|
||||
<div className="divide-y divide-border/30">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<div key={i} className="px-6 py-5 flex gap-4">
|
||||
<div className="h-5 w-32 bg-foreground/5 rounded-lg animate-pulse" />
|
||||
<div className="h-5 w-24 bg-foreground/5 rounded-lg animate-pulse" />
|
||||
<div className="h-5 w-20 bg-foreground/5 rounded-lg animate-pulse ml-auto" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (data.length === 0) {
|
||||
return (
|
||||
<div className="relative overflow-hidden rounded-2xl border border-border/50 bg-gradient-to-b from-background-secondary/50 to-background-secondary/20">
|
||||
<div className="px-8 py-16 text-center">
|
||||
{emptyState || (
|
||||
<p className="text-foreground-muted">No data available</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative overflow-hidden rounded-2xl border border-border/50 bg-gradient-to-b from-background-secondary/50 to-background-secondary/20 shadow-[0_4px_24px_-4px_rgba(0,0,0,0.1)]">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-border/50">
|
||||
{selectable && (
|
||||
<th className="w-12 px-4 py-4">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedIds.length === data.length && data.length > 0}
|
||||
onChange={toggleSelectAll}
|
||||
className="w-4 h-4 rounded border-border/50 bg-background-secondary text-accent
|
||||
focus:ring-accent/20 focus:ring-offset-0 cursor-pointer"
|
||||
/>
|
||||
</th>
|
||||
)}
|
||||
{columns.map((col) => (
|
||||
<th
|
||||
key={col.key}
|
||||
className={clsx(
|
||||
"text-left px-6 py-4 text-xs font-semibold text-foreground-subtle/80 uppercase tracking-wider",
|
||||
col.hideOnMobile && "hidden md:table-cell",
|
||||
col.headerClassName
|
||||
)}
|
||||
>
|
||||
{col.header}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border/30">
|
||||
{data.map((item, index) => {
|
||||
const key = keyExtractor(item)
|
||||
const isSelected = selectedIds.includes(key)
|
||||
|
||||
return (
|
||||
<tr
|
||||
key={key}
|
||||
onClick={() => onRowClick?.(item)}
|
||||
className={clsx(
|
||||
"group transition-all duration-200",
|
||||
onRowClick && "cursor-pointer",
|
||||
isSelected
|
||||
? "bg-accent/5"
|
||||
: "hover:bg-foreground/[0.02]"
|
||||
)}
|
||||
>
|
||||
{selectable && (
|
||||
<td className="w-12 px-4 py-4" onClick={(e) => e.stopPropagation()}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isSelected}
|
||||
onChange={() => toggleSelection(key)}
|
||||
className="w-4 h-4 rounded border-border/50 bg-background-secondary text-accent
|
||||
focus:ring-accent/20 focus:ring-offset-0 cursor-pointer"
|
||||
/>
|
||||
</td>
|
||||
)}
|
||||
{columns.map((col) => (
|
||||
<td
|
||||
key={col.key}
|
||||
className={clsx(
|
||||
"px-6 py-4 text-sm",
|
||||
col.hideOnMobile && "hidden md:table-cell",
|
||||
col.className
|
||||
)}
|
||||
>
|
||||
{col.render
|
||||
? col.render(item, index)
|
||||
: (item as Record<string, unknown>)[col.key] as ReactNode
|
||||
}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Status badge component for tables
|
||||
export function StatusBadge({
|
||||
status,
|
||||
variant = 'default'
|
||||
}: {
|
||||
status: string
|
||||
variant?: 'success' | 'warning' | 'error' | 'default' | 'accent'
|
||||
}) {
|
||||
return (
|
||||
<span className={clsx(
|
||||
"inline-flex items-center px-2.5 py-1 text-xs font-medium rounded-lg",
|
||||
variant === 'success' && "bg-accent/10 text-accent border border-accent/20",
|
||||
variant === 'warning' && "bg-amber-500/10 text-amber-400 border border-amber-500/20",
|
||||
variant === 'error' && "bg-red-500/10 text-red-400 border border-red-500/20",
|
||||
variant === 'accent' && "bg-accent/10 text-accent border border-accent/20",
|
||||
variant === 'default' && "bg-foreground/5 text-foreground-muted border border-border/50"
|
||||
)}>
|
||||
{status}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
// Action button for tables
|
||||
export function TableAction({
|
||||
icon: Icon,
|
||||
onClick,
|
||||
variant = 'default',
|
||||
title,
|
||||
disabled,
|
||||
}: {
|
||||
icon: React.ComponentType<{ className?: string }>
|
||||
onClick?: () => void
|
||||
variant?: 'default' | 'danger' | 'accent'
|
||||
title?: string
|
||||
disabled?: boolean
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
onClick?.()
|
||||
}}
|
||||
disabled={disabled}
|
||||
title={title}
|
||||
className={clsx(
|
||||
"p-2 rounded-lg transition-all duration-200",
|
||||
"disabled:opacity-30 disabled:cursor-not-allowed",
|
||||
variant === 'danger' && "bg-red-500/10 text-red-400 hover:bg-red-500/20 border border-red-500/20",
|
||||
variant === 'accent' && "bg-accent/10 text-accent hover:bg-accent/20 border border-accent/20",
|
||||
variant === 'default' && "bg-foreground/5 text-foreground-muted hover:text-foreground hover:bg-foreground/10 border border-border/50"
|
||||
)}
|
||||
>
|
||||
<Icon className="w-4 h-4" />
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
'use client'
|
||||
|
||||
import Link from 'next/link'
|
||||
import Image from 'next/image'
|
||||
import { usePathname } from 'next/navigation'
|
||||
import { useStore } from '@/lib/store'
|
||||
import {
|
||||
@ -19,6 +20,7 @@ import {
|
||||
CreditCard,
|
||||
Menu,
|
||||
X,
|
||||
Sparkles,
|
||||
} from 'lucide-react'
|
||||
import { useState, useEffect } from 'react'
|
||||
import clsx from 'clsx'
|
||||
@ -67,7 +69,7 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
|
||||
// Count available domains for notification badge
|
||||
const availableCount = domains?.filter(d => d.is_available).length || 0
|
||||
|
||||
// Navigation items - renamed "Market" to "Auctions" per review
|
||||
// Navigation items
|
||||
const navItems = [
|
||||
{
|
||||
href: '/dashboard',
|
||||
@ -112,51 +114,85 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
|
||||
|
||||
const SidebarContent = () => (
|
||||
<>
|
||||
{/* Logo */}
|
||||
{/* Logo Section */}
|
||||
<div className={clsx(
|
||||
"h-16 sm:h-20 flex items-center border-b border-border/50",
|
||||
collapsed ? "justify-center px-2" : "px-5"
|
||||
"relative h-20 flex items-center border-b border-border/30",
|
||||
collapsed ? "justify-center px-2" : "px-4"
|
||||
)}>
|
||||
<Link href="/" className="flex items-center gap-3 group">
|
||||
<div className="w-9 h-9 bg-accent/10 rounded-xl flex items-center justify-center border border-accent/20
|
||||
group-hover:bg-accent/20 transition-colors">
|
||||
<span className="font-display text-accent text-lg font-bold">P</span>
|
||||
<div className={clsx(
|
||||
"relative flex items-center justify-center transition-all duration-300",
|
||||
collapsed ? "w-10 h-10" : "w-12 h-12"
|
||||
)}>
|
||||
{/* Glow effect behind logo */}
|
||||
<div className="absolute inset-0 bg-accent/20 blur-xl rounded-full scale-150 opacity-50 group-hover:opacity-80 transition-opacity" />
|
||||
<Image
|
||||
src="/pounce-puma.png"
|
||||
alt="pounce"
|
||||
width={48}
|
||||
height={48}
|
||||
className={clsx(
|
||||
"relative object-contain drop-shadow-[0_0_20px_rgba(16,185,129,0.3)] group-hover:drop-shadow-[0_0_30px_rgba(16,185,129,0.5)] transition-all",
|
||||
collapsed ? "w-9 h-9" : "w-12 h-12"
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
{!collapsed && (
|
||||
<span
|
||||
className="text-lg font-bold tracking-[0.1em] text-foreground"
|
||||
style={{ fontFamily: 'var(--font-display), Playfair Display, Georgia, serif' }}
|
||||
>
|
||||
POUNCE
|
||||
</span>
|
||||
<div className="flex flex-col">
|
||||
<span
|
||||
className="text-lg font-bold tracking-[0.12em] text-foreground group-hover:text-accent transition-colors"
|
||||
style={{ fontFamily: 'var(--font-display), Georgia, serif' }}
|
||||
>
|
||||
POUNCE
|
||||
</span>
|
||||
<span className="text-[10px] text-foreground-subtle tracking-wider uppercase">
|
||||
Command Center
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Main Navigation */}
|
||||
<nav className="flex-1 py-4 px-3 space-y-1 overflow-y-auto">
|
||||
<nav className="flex-1 py-6 px-3 space-y-1.5 overflow-y-auto">
|
||||
<div className={clsx("mb-4", collapsed ? "px-1" : "px-2")}>
|
||||
{!collapsed && (
|
||||
<p className="text-[10px] font-semibold text-foreground-subtle/60 uppercase tracking-[0.15em] mb-3">
|
||||
Navigation
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{navItems.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className={clsx(
|
||||
"group flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-200",
|
||||
"group relative flex items-center gap-3 px-3 py-3 rounded-xl transition-all duration-300",
|
||||
isActive(item.href)
|
||||
? "bg-accent/10 text-foreground"
|
||||
: "text-foreground-muted hover:text-foreground hover:bg-foreground/5"
|
||||
? "bg-gradient-to-r from-accent/20 to-accent/5 text-foreground border border-accent/20 shadow-[0_0_20px_-5px_rgba(16,185,129,0.2)]"
|
||||
: "text-foreground-muted hover:text-foreground hover:bg-foreground/5 border border-transparent"
|
||||
)}
|
||||
title={collapsed ? item.label : undefined}
|
||||
>
|
||||
{/* Active indicator line */}
|
||||
{isActive(item.href) && (
|
||||
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 bg-accent rounded-r-full shadow-[0_0_10px_rgba(16,185,129,0.5)]" />
|
||||
)}
|
||||
|
||||
<div className="relative">
|
||||
<item.icon className={clsx(
|
||||
"w-5 h-5 transition-colors",
|
||||
isActive(item.href) ? "text-accent" : "group-hover:text-foreground"
|
||||
"w-5 h-5 transition-all duration-300",
|
||||
isActive(item.href)
|
||||
? "text-accent drop-shadow-[0_0_8px_rgba(16,185,129,0.5)]"
|
||||
: "group-hover:text-foreground"
|
||||
)} />
|
||||
{/* Badge for notifications */}
|
||||
{item.badge && (
|
||||
<span className="absolute -top-1.5 -right-1.5 w-4 h-4 bg-accent text-background
|
||||
text-[10px] font-bold rounded-full flex items-center justify-center">
|
||||
<span className="absolute -top-2 -right-2 w-5 h-5 bg-accent text-background
|
||||
text-[10px] font-bold rounded-full flex items-center justify-center
|
||||
shadow-[0_0_10px_rgba(16,185,129,0.4)] animate-pulse">
|
||||
{item.badge > 9 ? '9+' : item.badge}
|
||||
</span>
|
||||
)}
|
||||
@ -169,25 +205,33 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
|
||||
{item.label}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Hover glow effect */}
|
||||
{!isActive(item.href) && (
|
||||
<div className="absolute inset-0 rounded-xl bg-accent/5 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
|
||||
)}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* Bottom Section */}
|
||||
<div className="border-t border-border/50 py-4 px-3 space-y-1">
|
||||
<div className="border-t border-border/30 py-4 px-3 space-y-1.5">
|
||||
{/* Admin Link */}
|
||||
{user?.is_admin && (
|
||||
<Link
|
||||
href="/admin"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className={clsx(
|
||||
"group flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-200",
|
||||
"group relative flex items-center gap-3 px-3 py-3 rounded-xl transition-all duration-300",
|
||||
pathname.startsWith('/admin')
|
||||
? "bg-accent/10 text-accent"
|
||||
: "text-accent/70 hover:text-accent hover:bg-accent/5"
|
||||
? "bg-gradient-to-r from-accent/20 to-accent/5 text-accent border border-accent/30"
|
||||
: "text-accent/70 hover:text-accent hover:bg-accent/5 border border-transparent"
|
||||
)}
|
||||
title={collapsed ? "Admin Panel" : undefined}
|
||||
>
|
||||
{pathname.startsWith('/admin') && (
|
||||
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 bg-accent rounded-r-full" />
|
||||
)}
|
||||
<Shield className="w-5 h-5" />
|
||||
{!collapsed && <span className="text-sm font-medium">Admin Panel</span>}
|
||||
</Link>
|
||||
@ -200,10 +244,10 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
|
||||
href={item.href}
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className={clsx(
|
||||
"group flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-200",
|
||||
"group relative flex items-center gap-3 px-3 py-3 rounded-xl transition-all duration-300",
|
||||
isActive(item.href)
|
||||
? "bg-foreground/10 text-foreground"
|
||||
: "text-foreground-muted hover:text-foreground hover:bg-foreground/5"
|
||||
? "bg-foreground/10 text-foreground border border-foreground/10"
|
||||
: "text-foreground-muted hover:text-foreground hover:bg-foreground/5 border border-transparent"
|
||||
)}
|
||||
title={collapsed ? item.label : undefined}
|
||||
>
|
||||
@ -212,42 +256,70 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
|
||||
</Link>
|
||||
))}
|
||||
|
||||
{/* User Info */}
|
||||
{/* User Card */}
|
||||
<div className={clsx(
|
||||
"mt-4 p-3 bg-foreground/5 rounded-xl",
|
||||
collapsed && "p-2"
|
||||
"mt-4 p-4 bg-gradient-to-br from-foreground/[0.03] to-transparent border border-border/50 rounded-2xl",
|
||||
collapsed && "p-3"
|
||||
)}>
|
||||
{collapsed ? (
|
||||
<div className="flex justify-center">
|
||||
<div className="w-8 h-8 bg-accent/10 rounded-lg flex items-center justify-center">
|
||||
<TierIcon className="w-4 h-4 text-accent" />
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-accent/20 to-accent/5 rounded-xl flex items-center justify-center border border-accent/20">
|
||||
<TierIcon className="w-5 h-5 text-accent" />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="w-9 h-9 bg-accent/10 rounded-lg flex items-center justify-center">
|
||||
<TierIcon className="w-4 h-4 text-accent" />
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-11 h-11 bg-gradient-to-br from-accent/20 to-accent/5 rounded-xl flex items-center justify-center border border-accent/20 shadow-[0_0_20px_-5px_rgba(16,185,129,0.3)]">
|
||||
<TierIcon className="w-5 h-5 text-accent" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-foreground truncate">
|
||||
<p className="text-sm font-semibold text-foreground truncate">
|
||||
{user?.name || user?.email?.split('@')[0]}
|
||||
</p>
|
||||
<p className="text-xs text-foreground-muted">{tierName}</p>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className={clsx(
|
||||
"text-xs font-medium",
|
||||
tierName === 'Tycoon' ? "text-amber-400" :
|
||||
tierName === 'Trader' ? "text-accent" :
|
||||
"text-foreground-muted"
|
||||
)}>
|
||||
{tierName}
|
||||
</span>
|
||||
{tierName === 'Tycoon' && <Sparkles className="w-3 h-3 text-amber-400" />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-xs text-foreground-subtle">
|
||||
<span>{subscription?.domains_used || 0}/{subscription?.domain_limit || 5} domains</span>
|
||||
{tierName === 'Scout' && (
|
||||
<Link
|
||||
href="/pricing"
|
||||
className="text-accent hover:underline flex items-center gap-1"
|
||||
>
|
||||
<CreditCard className="w-3 h-3" />
|
||||
Upgrade
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{/* Usage bar */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-foreground-subtle">Domains</span>
|
||||
<span className="text-foreground-muted">
|
||||
{subscription?.domains_used || 0}/{subscription?.domain_limit || 5}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-1.5 bg-foreground/5 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-accent to-accent/60 rounded-full transition-all duration-500"
|
||||
style={{
|
||||
width: `${Math.min(((subscription?.domains_used || 0) / (subscription?.domain_limit || 5)) * 100, 100)}%`
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{tierName === 'Scout' && (
|
||||
<Link
|
||||
href="/pricing"
|
||||
className="mt-4 flex items-center justify-center gap-2 w-full py-2.5 bg-gradient-to-r from-accent to-accent/80
|
||||
text-background text-xs font-semibold rounded-xl
|
||||
hover:shadow-[0_0_20px_-5px_rgba(16,185,129,0.5)] transition-all"
|
||||
>
|
||||
<CreditCard className="w-3.5 h-3.5" />
|
||||
Upgrade Plan
|
||||
</Link>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
@ -259,7 +331,7 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
|
||||
setMobileOpen(false)
|
||||
}}
|
||||
className={clsx(
|
||||
"w-full flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-200",
|
||||
"w-full flex items-center gap-3 px-3 py-3 rounded-xl transition-all duration-300",
|
||||
"text-foreground-muted hover:text-foreground hover:bg-foreground/5"
|
||||
)}
|
||||
title={collapsed ? "Sign out" : undefined}
|
||||
@ -273,9 +345,9 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
|
||||
<button
|
||||
onClick={toggleCollapsed}
|
||||
className={clsx(
|
||||
"hidden lg:flex absolute -right-3 top-24 w-6 h-6 bg-background-secondary border border-border rounded-full",
|
||||
"hidden lg:flex absolute -right-3 top-24 w-6 h-6 bg-background border border-border rounded-full",
|
||||
"items-center justify-center text-foreground-muted hover:text-foreground",
|
||||
"hover:bg-foreground/5 transition-all duration-200 shadow-sm"
|
||||
"hover:bg-accent/10 hover:border-accent/30 transition-all duration-300 shadow-lg"
|
||||
)}
|
||||
>
|
||||
{collapsed ? (
|
||||
@ -292,9 +364,9 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
onClick={() => setMobileOpen(true)}
|
||||
className="lg:hidden fixed top-4 left-4 z-50 w-10 h-10 bg-background-secondary border border-border
|
||||
className="lg:hidden fixed top-4 left-4 z-50 w-11 h-11 bg-background/80 backdrop-blur-xl border border-border
|
||||
rounded-xl flex items-center justify-center text-foreground-muted hover:text-foreground
|
||||
transition-colors shadow-lg"
|
||||
transition-all shadow-lg hover:shadow-xl hover:border-accent/30"
|
||||
>
|
||||
<Menu className="w-5 h-5" />
|
||||
</button>
|
||||
@ -311,15 +383,15 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
|
||||
<aside
|
||||
className={clsx(
|
||||
"lg:hidden fixed left-0 top-0 bottom-0 z-50 w-[280px] flex flex-col",
|
||||
"bg-background-secondary border-r border-border",
|
||||
"transition-transform duration-300 ease-in-out",
|
||||
"bg-background/95 backdrop-blur-xl border-r border-border/50",
|
||||
"transition-transform duration-300 ease-out",
|
||||
mobileOpen ? "translate-x-0" : "-translate-x-full"
|
||||
)}
|
||||
>
|
||||
{/* Close button */}
|
||||
<button
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className="absolute top-4 right-4 w-8 h-8 flex items-center justify-center
|
||||
className="absolute top-5 right-4 w-8 h-8 flex items-center justify-center
|
||||
text-foreground-muted hover:text-foreground transition-colors"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
@ -331,9 +403,10 @@ export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: S
|
||||
<aside
|
||||
className={clsx(
|
||||
"hidden lg:flex fixed left-0 top-0 bottom-0 z-40 flex-col",
|
||||
"bg-background-secondary/50 backdrop-blur-xl border-r border-border",
|
||||
"transition-all duration-300 ease-in-out",
|
||||
collapsed ? "w-[72px]" : "w-[240px]"
|
||||
"bg-gradient-to-b from-background/95 via-background/90 to-background/95 backdrop-blur-xl",
|
||||
"border-r border-border/30",
|
||||
"transition-all duration-300 ease-out",
|
||||
collapsed ? "w-[72px]" : "w-[260px]"
|
||||
)}
|
||||
>
|
||||
<SidebarContent />
|
||||
|
||||
@ -88,11 +88,13 @@ export const useStore = create<AppState>((set, get) => ({
|
||||
login: async (email, password) => {
|
||||
await api.login(email, password)
|
||||
const user = await api.getMe()
|
||||
set({ user, isAuthenticated: true })
|
||||
set({ user, isAuthenticated: true, isLoading: false })
|
||||
|
||||
// Fetch user data
|
||||
await get().fetchDomains()
|
||||
await get().fetchSubscription()
|
||||
// Fetch user data (only once after login)
|
||||
await Promise.all([
|
||||
get().fetchDomains(),
|
||||
get().fetchSubscription()
|
||||
])
|
||||
},
|
||||
|
||||
register: async (email, password, name) => {
|
||||
@ -112,13 +114,24 @@ export const useStore = create<AppState>((set, get) => ({
|
||||
},
|
||||
|
||||
checkAuth: async () => {
|
||||
// Skip if already authenticated and have data (prevents redundant fetches)
|
||||
const state = get()
|
||||
if (state.isAuthenticated && state.user && state.subscription) {
|
||||
set({ isLoading: false })
|
||||
return
|
||||
}
|
||||
|
||||
set({ isLoading: true })
|
||||
try {
|
||||
if (api.getToken()) {
|
||||
const user = await api.getMe()
|
||||
set({ user, isAuthenticated: true })
|
||||
await get().fetchDomains()
|
||||
await get().fetchSubscription()
|
||||
|
||||
// Fetch in parallel for speed
|
||||
await Promise.all([
|
||||
get().fetchDomains(),
|
||||
get().fetchSubscription()
|
||||
])
|
||||
}
|
||||
} catch {
|
||||
api.logout()
|
||||
|
||||
Reference in New Issue
Block a user