Major navigation overhaul: Add Command Center with Sidebar
- New Sidebar component with collapsible navigation - New CommandCenterLayout for logged-in users - Separate routes: /watchlist, /portfolio, /market, /intelligence - Dashboard with Activity Feed and Market Pulse - Traffic light status indicators for domain status - Updated Header for public/logged-in state separation - Settings page uses new Command Center layout
This commit is contained in:
yves.gugger
File diff suppressed because it is too large
Load Diff
257
frontend/src/app/intelligence/page.tsx
Normal file
257
frontend/src/app/intelligence/page.tsx
Normal file
@ -0,0 +1,257 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useEffect, useState } from 'react'
|
||||||
|
import { useStore } from '@/lib/store'
|
||||||
|
import { api } from '@/lib/api'
|
||||||
|
import { CommandCenterLayout } from '@/components/CommandCenterLayout'
|
||||||
|
import {
|
||||||
|
Search,
|
||||||
|
TrendingUp,
|
||||||
|
TrendingDown,
|
||||||
|
Minus,
|
||||||
|
ChevronRight,
|
||||||
|
Globe,
|
||||||
|
ArrowUpDown,
|
||||||
|
ExternalLink,
|
||||||
|
BarChart3,
|
||||||
|
DollarSign,
|
||||||
|
} from 'lucide-react'
|
||||||
|
import clsx from 'clsx'
|
||||||
|
import Link from 'next/link'
|
||||||
|
|
||||||
|
interface TLDData {
|
||||||
|
tld: string
|
||||||
|
min_price: number
|
||||||
|
avg_price: number
|
||||||
|
max_price: number
|
||||||
|
cheapest_registrar: string
|
||||||
|
cheapest_registrar_url?: string
|
||||||
|
price_change_7d?: number
|
||||||
|
popularity_rank?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function IntelligencePage() {
|
||||||
|
const { subscription } = useStore()
|
||||||
|
|
||||||
|
const [tldData, setTldData] = useState<TLDData[]>([])
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
const [searchQuery, setSearchQuery] = useState('')
|
||||||
|
const [sortBy, setSortBy] = useState<'popularity' | 'price_asc' | 'price_desc' | 'change'>('popularity')
|
||||||
|
const [page, setPage] = useState(0)
|
||||||
|
const [total, setTotal] = useState(0)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadTLDData()
|
||||||
|
}, [page, sortBy])
|
||||||
|
|
||||||
|
const loadTLDData = async () => {
|
||||||
|
setLoading(true)
|
||||||
|
try {
|
||||||
|
const response = await api.getTldPrices({
|
||||||
|
limit: 50,
|
||||||
|
offset: page * 50,
|
||||||
|
sort_by: sortBy,
|
||||||
|
})
|
||||||
|
setTldData(response.tlds || [])
|
||||||
|
setTotal(response.total || 0)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to load TLD data:', error)
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Filter by search
|
||||||
|
const filteredData = tldData.filter(tld =>
|
||||||
|
tld.tld.toLowerCase().includes(searchQuery.toLowerCase())
|
||||||
|
)
|
||||||
|
|
||||||
|
const getTrendIcon = (change: number | undefined) => {
|
||||||
|
if (!change) return <Minus className="w-4 h-4 text-foreground-muted" />
|
||||||
|
if (change > 0) return <TrendingUp className="w-4 h-4 text-orange-400" />
|
||||||
|
return <TrendingDown className="w-4 h-4 text-accent" />
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<CommandCenterLayout
|
||||||
|
title="TLD Intelligence"
|
||||||
|
subtitle={`Real-time pricing data for ${total}+ TLDs`}
|
||||||
|
>
|
||||||
|
<div className="max-w-7xl mx-auto space-y-6">
|
||||||
|
{/* Stats Overview */}
|
||||||
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||||
|
<div className="p-5 bg-background-secondary/50 border border-border rounded-xl">
|
||||||
|
<div className="flex items-center gap-3 mb-3">
|
||||||
|
<div className="w-10 h-10 bg-accent/10 rounded-xl flex items-center justify-center">
|
||||||
|
<Globe className="w-5 h-5 text-accent" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-2xl font-display text-foreground">{total}+</p>
|
||||||
|
<p className="text-sm text-foreground-muted">TLDs Tracked</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="p-5 bg-background-secondary/50 border border-border rounded-xl">
|
||||||
|
<div className="flex items-center gap-3 mb-3">
|
||||||
|
<div className="w-10 h-10 bg-accent/10 rounded-xl flex items-center justify-center">
|
||||||
|
<DollarSign className="w-5 h-5 text-accent" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-2xl font-display text-foreground">$0.99</p>
|
||||||
|
<p className="text-sm text-foreground-muted">Lowest Price</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="p-5 bg-background-secondary/50 border border-border rounded-xl">
|
||||||
|
<div className="flex items-center gap-3 mb-3">
|
||||||
|
<div className="w-10 h-10 bg-orange-400/10 rounded-xl flex items-center justify-center">
|
||||||
|
<TrendingUp className="w-5 h-5 text-orange-400" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-2xl font-display text-foreground">.ai</p>
|
||||||
|
<p className="text-sm text-foreground-muted">Hottest TLD</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="p-5 bg-background-secondary/50 border border-border rounded-xl">
|
||||||
|
<div className="flex items-center gap-3 mb-3">
|
||||||
|
<div className="w-10 h-10 bg-foreground/5 rounded-xl flex items-center justify-center">
|
||||||
|
<BarChart3 className="w-5 h-5 text-foreground-muted" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-2xl font-display text-foreground">24h</p>
|
||||||
|
<p className="text-sm text-foreground-muted">Update Frequency</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filters */}
|
||||||
|
<div className="flex flex-col sm:flex-row gap-3">
|
||||||
|
<div className="relative flex-1">
|
||||||
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-foreground-muted" />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
placeholder="Search TLDs..."
|
||||||
|
className="w-full h-10 pl-10 pr-4 bg-background-secondary border border-border rounded-lg
|
||||||
|
text-sm text-foreground placeholder:text-foreground-subtle
|
||||||
|
focus:outline-none focus:border-accent"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="relative">
|
||||||
|
<select
|
||||||
|
value={sortBy}
|
||||||
|
onChange={(e) => setSortBy(e.target.value as any)}
|
||||||
|
className="h-10 pl-4 pr-10 bg-background-secondary border border-border rounded-lg
|
||||||
|
text-sm text-foreground appearance-none cursor-pointer
|
||||||
|
focus:outline-none focus:border-accent"
|
||||||
|
>
|
||||||
|
<option value="popularity">By Popularity</option>
|
||||||
|
<option value="price_asc">Price: Low to High</option>
|
||||||
|
<option value="price_desc">Price: High to Low</option>
|
||||||
|
<option value="change">By Change %</option>
|
||||||
|
</select>
|
||||||
|
<ArrowUpDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-foreground-muted pointer-events-none" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* TLD Table */}
|
||||||
|
{loading ? (
|
||||||
|
<div className="space-y-3">
|
||||||
|
{[...Array(10)].map((_, i) => (
|
||||||
|
<div key={i} className="h-16 bg-background-secondary/50 border border-border rounded-xl animate-pulse" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="overflow-hidden border border-border rounded-xl">
|
||||||
|
{/* Table Header */}
|
||||||
|
<div className="hidden lg:grid lg:grid-cols-12 gap-4 p-4 bg-background-secondary/50 border-b border-border text-sm text-foreground-muted font-medium">
|
||||||
|
<div className="col-span-2">TLD</div>
|
||||||
|
<div className="col-span-2">Min Price</div>
|
||||||
|
<div className="col-span-2">Avg Price</div>
|
||||||
|
<div className="col-span-2">Change</div>
|
||||||
|
<div className="col-span-3">Cheapest Registrar</div>
|
||||||
|
<div className="col-span-1"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Table Rows */}
|
||||||
|
<div className="divide-y divide-border">
|
||||||
|
{filteredData.map((tld) => (
|
||||||
|
<Link
|
||||||
|
key={tld.tld}
|
||||||
|
href={`/tld-pricing/${tld.tld}`}
|
||||||
|
className="block lg:grid lg:grid-cols-12 gap-4 p-4 hover:bg-foreground/5 transition-colors"
|
||||||
|
>
|
||||||
|
{/* TLD */}
|
||||||
|
<div className="col-span-2 flex items-center gap-3 mb-3 lg:mb-0">
|
||||||
|
<span className="font-mono text-xl font-semibold text-foreground">.{tld.tld}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Min Price */}
|
||||||
|
<div className="col-span-2 flex items-center">
|
||||||
|
<span className="text-foreground font-medium">${tld.min_price.toFixed(2)}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Avg Price */}
|
||||||
|
<div className="col-span-2 flex items-center">
|
||||||
|
<span className="text-foreground-muted">${tld.avg_price.toFixed(2)}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Change */}
|
||||||
|
<div className="col-span-2 flex items-center gap-2">
|
||||||
|
{getTrendIcon(tld.price_change_7d)}
|
||||||
|
<span className={clsx(
|
||||||
|
"font-medium",
|
||||||
|
(tld.price_change_7d || 0) > 0 ? "text-orange-400" :
|
||||||
|
(tld.price_change_7d || 0) < 0 ? "text-accent" : "text-foreground-muted"
|
||||||
|
)}>
|
||||||
|
{(tld.price_change_7d || 0) > 0 ? '+' : ''}{(tld.price_change_7d || 0).toFixed(1)}%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Registrar */}
|
||||||
|
<div className="col-span-3 flex items-center">
|
||||||
|
<span className="text-foreground-muted truncate">{tld.cheapest_registrar}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Arrow */}
|
||||||
|
<div className="col-span-1 flex items-center justify-end">
|
||||||
|
<ChevronRight className="w-5 h-5 text-foreground-subtle" />
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Pagination */}
|
||||||
|
{total > 50 && (
|
||||||
|
<div className="flex items-center justify-center gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => setPage(Math.max(0, page - 1))}
|
||||||
|
disabled={page === 0}
|
||||||
|
className="px-4 py-2 text-sm text-foreground-muted hover:text-foreground
|
||||||
|
disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
Previous
|
||||||
|
</button>
|
||||||
|
<span className="text-sm text-foreground-muted">
|
||||||
|
Page {page + 1} of {Math.ceil(total / 50)}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
onClick={() => setPage(page + 1)}
|
||||||
|
disabled={(page + 1) * 50 >= total}
|
||||||
|
className="px-4 py-2 text-sm text-foreground-muted hover:text-foreground
|
||||||
|
disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
Next
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CommandCenterLayout>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
252
frontend/src/app/market/page.tsx
Normal file
252
frontend/src/app/market/page.tsx
Normal file
@ -0,0 +1,252 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useEffect, useState } from 'react'
|
||||||
|
import { useRouter } from 'next/navigation'
|
||||||
|
import { useStore } from '@/lib/store'
|
||||||
|
import { api } from '@/lib/api'
|
||||||
|
import { CommandCenterLayout } from '@/components/CommandCenterLayout'
|
||||||
|
import {
|
||||||
|
Search,
|
||||||
|
Filter,
|
||||||
|
Clock,
|
||||||
|
TrendingUp,
|
||||||
|
Flame,
|
||||||
|
Sparkles,
|
||||||
|
ExternalLink,
|
||||||
|
ChevronDown,
|
||||||
|
Globe,
|
||||||
|
Gavel,
|
||||||
|
ArrowUpDown,
|
||||||
|
} from 'lucide-react'
|
||||||
|
import clsx from 'clsx'
|
||||||
|
|
||||||
|
type ViewType = 'all' | 'ending' | 'hot' | 'opportunities'
|
||||||
|
|
||||||
|
interface Auction {
|
||||||
|
domain: string
|
||||||
|
platform: string
|
||||||
|
current_bid: number
|
||||||
|
num_bids: number
|
||||||
|
end_time: string
|
||||||
|
time_remaining: string
|
||||||
|
affiliate_url: string
|
||||||
|
tld: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function MarketPage() {
|
||||||
|
const router = useRouter()
|
||||||
|
const { subscription } = useStore()
|
||||||
|
|
||||||
|
const [auctions, setAuctions] = useState<Auction[]>([])
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
const [activeView, setActiveView] = useState<ViewType>('all')
|
||||||
|
const [searchQuery, setSearchQuery] = useState('')
|
||||||
|
const [platformFilter, setPlatformFilter] = useState<string>('all')
|
||||||
|
const [sortBy, setSortBy] = useState<string>('end_time')
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadAuctions()
|
||||||
|
}, [activeView])
|
||||||
|
|
||||||
|
const loadAuctions = async () => {
|
||||||
|
setLoading(true)
|
||||||
|
try {
|
||||||
|
let data
|
||||||
|
switch (activeView) {
|
||||||
|
case 'ending':
|
||||||
|
data = await api.getEndingSoonAuctions(50)
|
||||||
|
break
|
||||||
|
case 'hot':
|
||||||
|
data = await api.getHotAuctions(50)
|
||||||
|
break
|
||||||
|
case 'opportunities':
|
||||||
|
data = await api.getOpportunityAuctions(50)
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
const response = await api.getAuctions({ limit: 50, sort_by: sortBy })
|
||||||
|
data = response.auctions || []
|
||||||
|
}
|
||||||
|
setAuctions(data)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to load auctions:', error)
|
||||||
|
setAuctions([])
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Filter auctions
|
||||||
|
const filteredAuctions = auctions.filter(auction => {
|
||||||
|
if (searchQuery && !auction.domain.toLowerCase().includes(searchQuery.toLowerCase())) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
if (platformFilter !== 'all' && auction.platform !== platformFilter) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
return true
|
||||||
|
})
|
||||||
|
|
||||||
|
const platforms = ['GoDaddy', 'Sedo', 'NameJet', 'DropCatch', 'ExpiredDomains']
|
||||||
|
|
||||||
|
const views = [
|
||||||
|
{ id: 'all', label: 'All Auctions', icon: Gavel },
|
||||||
|
{ id: 'ending', label: 'Ending Soon', icon: Clock },
|
||||||
|
{ id: 'hot', label: 'Hot', icon: Flame },
|
||||||
|
{ id: 'opportunities', label: 'Opportunities', icon: Sparkles },
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<CommandCenterLayout
|
||||||
|
title="Market Scanner"
|
||||||
|
subtitle="Live auctions from all major platforms"
|
||||||
|
>
|
||||||
|
<div className="max-w-7xl mx-auto space-y-6">
|
||||||
|
{/* View Tabs */}
|
||||||
|
<div className="flex flex-wrap gap-2 p-1 bg-background-secondary/50 rounded-xl border border-border">
|
||||||
|
{views.map((view) => (
|
||||||
|
<button
|
||||||
|
key={view.id}
|
||||||
|
onClick={() => setActiveView(view.id as ViewType)}
|
||||||
|
className={clsx(
|
||||||
|
"flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium transition-all",
|
||||||
|
activeView === view.id
|
||||||
|
? "bg-foreground text-background"
|
||||||
|
: "text-foreground-muted hover:text-foreground hover:bg-foreground/5"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<view.icon className="w-4 h-4" />
|
||||||
|
{view.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filters */}
|
||||||
|
<div className="flex flex-col sm:flex-row gap-3">
|
||||||
|
{/* Search */}
|
||||||
|
<div className="relative flex-1">
|
||||||
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-foreground-muted" />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
placeholder="Search domains..."
|
||||||
|
className="w-full h-10 pl-10 pr-4 bg-background-secondary border border-border rounded-lg
|
||||||
|
text-sm text-foreground placeholder:text-foreground-subtle
|
||||||
|
focus:outline-none focus:border-accent"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Platform Filter */}
|
||||||
|
<div className="relative">
|
||||||
|
<select
|
||||||
|
value={platformFilter}
|
||||||
|
onChange={(e) => setPlatformFilter(e.target.value)}
|
||||||
|
className="h-10 pl-4 pr-10 bg-background-secondary border border-border rounded-lg
|
||||||
|
text-sm text-foreground appearance-none cursor-pointer
|
||||||
|
focus:outline-none focus:border-accent"
|
||||||
|
>
|
||||||
|
<option value="all">All Platforms</option>
|
||||||
|
{platforms.map((p) => (
|
||||||
|
<option key={p} value={p}>{p}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
<ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-foreground-muted pointer-events-none" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Sort */}
|
||||||
|
<div className="relative">
|
||||||
|
<select
|
||||||
|
value={sortBy}
|
||||||
|
onChange={(e) => {
|
||||||
|
setSortBy(e.target.value)
|
||||||
|
loadAuctions()
|
||||||
|
}}
|
||||||
|
className="h-10 pl-4 pr-10 bg-background-secondary border border-border rounded-lg
|
||||||
|
text-sm text-foreground appearance-none cursor-pointer
|
||||||
|
focus:outline-none focus:border-accent"
|
||||||
|
>
|
||||||
|
<option value="end_time">Ending Soon</option>
|
||||||
|
<option value="bid_asc">Price: Low to High</option>
|
||||||
|
<option value="bid_desc">Price: High to Low</option>
|
||||||
|
<option value="bids">Most Bids</option>
|
||||||
|
</select>
|
||||||
|
<ArrowUpDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-foreground-muted pointer-events-none" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stats Bar */}
|
||||||
|
<div className="flex items-center gap-6 text-sm text-foreground-muted">
|
||||||
|
<span>{filteredAuctions.length} auctions</span>
|
||||||
|
<span>•</span>
|
||||||
|
<span className="flex items-center gap-1.5">
|
||||||
|
<Globe className="w-3.5 h-3.5" />
|
||||||
|
{platforms.length} platforms
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Auction List */}
|
||||||
|
{loading ? (
|
||||||
|
<div className="space-y-3">
|
||||||
|
{[...Array(5)].map((_, i) => (
|
||||||
|
<div key={i} className="h-20 bg-background-secondary/50 border border-border rounded-xl animate-pulse" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : filteredAuctions.length === 0 ? (
|
||||||
|
<div className="text-center py-16 bg-background-secondary/30 border border-border rounded-xl">
|
||||||
|
<Gavel className="w-12 h-12 text-foreground-subtle mx-auto mb-4" />
|
||||||
|
<p className="text-foreground-muted">No auctions found</p>
|
||||||
|
<p className="text-sm text-foreground-subtle mt-1">Try adjusting your filters</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-3">
|
||||||
|
{filteredAuctions.map((auction, idx) => (
|
||||||
|
<div
|
||||||
|
key={`${auction.domain}-${idx}`}
|
||||||
|
className="group p-4 sm:p-5 bg-background-secondary/50 border border-border rounded-xl
|
||||||
|
hover:border-foreground/20 transition-all"
|
||||||
|
>
|
||||||
|
<div className="flex flex-col sm:flex-row sm:items-center gap-4">
|
||||||
|
{/* Domain Info */}
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center gap-3 mb-1">
|
||||||
|
<h3 className="text-lg font-semibold text-foreground truncate">{auction.domain}</h3>
|
||||||
|
<span className="shrink-0 px-2 py-0.5 bg-foreground/5 text-foreground-muted text-xs rounded">
|
||||||
|
{auction.platform}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-4 text-sm text-foreground-muted">
|
||||||
|
<span className="flex items-center gap-1.5">
|
||||||
|
<Clock className="w-3.5 h-3.5" />
|
||||||
|
{auction.time_remaining}
|
||||||
|
</span>
|
||||||
|
<span>{auction.num_bids} bids</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Price + Action */}
|
||||||
|
<div className="flex items-center gap-4 shrink-0">
|
||||||
|
<div className="text-right">
|
||||||
|
<p className="text-xl font-semibold text-foreground">${auction.current_bid.toLocaleString()}</p>
|
||||||
|
<p className="text-xs text-foreground-subtle">Current bid</p>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
href={auction.affiliate_url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="flex items-center gap-2 px-4 py-2.5 bg-foreground text-background rounded-lg
|
||||||
|
font-medium text-sm hover:bg-foreground/90 transition-colors"
|
||||||
|
>
|
||||||
|
Bid
|
||||||
|
<ExternalLink className="w-3.5 h-3.5" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CommandCenterLayout>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
529
frontend/src/app/portfolio/page.tsx
Normal file
529
frontend/src/app/portfolio/page.tsx
Normal file
@ -0,0 +1,529 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useEffect, useState } from 'react'
|
||||||
|
import { useStore } from '@/lib/store'
|
||||||
|
import { api, PortfolioDomain, PortfolioSummary, DomainValuation } from '@/lib/api'
|
||||||
|
import { CommandCenterLayout } from '@/components/CommandCenterLayout'
|
||||||
|
import { Toast, useToast } from '@/components/Toast'
|
||||||
|
import {
|
||||||
|
Plus,
|
||||||
|
Trash2,
|
||||||
|
Edit2,
|
||||||
|
DollarSign,
|
||||||
|
Calendar,
|
||||||
|
Building,
|
||||||
|
RefreshCw,
|
||||||
|
Loader2,
|
||||||
|
TrendingUp,
|
||||||
|
TrendingDown,
|
||||||
|
Tag,
|
||||||
|
ExternalLink,
|
||||||
|
Sparkles,
|
||||||
|
ArrowUpRight,
|
||||||
|
X,
|
||||||
|
} from 'lucide-react'
|
||||||
|
import clsx from 'clsx'
|
||||||
|
import Link from 'next/link'
|
||||||
|
|
||||||
|
export default function PortfolioPage() {
|
||||||
|
const { subscription } = useStore()
|
||||||
|
const { toast, showToast, hideToast } = useToast()
|
||||||
|
|
||||||
|
const [portfolio, setPortfolio] = useState<PortfolioDomain[]>([])
|
||||||
|
const [summary, setSummary] = useState<PortfolioSummary | null>(null)
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
const [showAddModal, setShowAddModal] = useState(false)
|
||||||
|
const [showEditModal, setShowEditModal] = useState(false)
|
||||||
|
const [showSellModal, setShowSellModal] = useState(false)
|
||||||
|
const [showValuationModal, setShowValuationModal] = useState(false)
|
||||||
|
const [selectedDomain, setSelectedDomain] = useState<PortfolioDomain | null>(null)
|
||||||
|
const [valuation, setValuation] = useState<DomainValuation | null>(null)
|
||||||
|
const [valuatingDomain, setValuatingDomain] = useState('')
|
||||||
|
const [addingDomain, setAddingDomain] = useState(false)
|
||||||
|
const [savingEdit, setSavingEdit] = useState(false)
|
||||||
|
const [processingSale, setProcessingSale] = useState(false)
|
||||||
|
const [refreshingId, setRefreshingId] = useState<number | null>(null)
|
||||||
|
|
||||||
|
const [addForm, setAddForm] = useState({
|
||||||
|
domain: '',
|
||||||
|
purchase_price: '',
|
||||||
|
purchase_date: '',
|
||||||
|
registrar: '',
|
||||||
|
renewal_date: '',
|
||||||
|
renewal_cost: '',
|
||||||
|
notes: '',
|
||||||
|
})
|
||||||
|
|
||||||
|
const [editForm, setEditForm] = useState({
|
||||||
|
purchase_price: '',
|
||||||
|
purchase_date: '',
|
||||||
|
registrar: '',
|
||||||
|
renewal_date: '',
|
||||||
|
renewal_cost: '',
|
||||||
|
notes: '',
|
||||||
|
})
|
||||||
|
|
||||||
|
const [sellForm, setSellForm] = useState({
|
||||||
|
sale_date: new Date().toISOString().split('T')[0],
|
||||||
|
sale_price: '',
|
||||||
|
})
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadPortfolio()
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const loadPortfolio = async () => {
|
||||||
|
setLoading(true)
|
||||||
|
try {
|
||||||
|
const [portfolioData, summaryData] = await Promise.all([
|
||||||
|
api.getPortfolio(),
|
||||||
|
api.getPortfolioSummary(),
|
||||||
|
])
|
||||||
|
setPortfolio(portfolioData)
|
||||||
|
setSummary(summaryData)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to load portfolio:', error)
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleAddDomain = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
if (!addForm.domain.trim()) return
|
||||||
|
|
||||||
|
setAddingDomain(true)
|
||||||
|
try {
|
||||||
|
await api.addToPortfolio({
|
||||||
|
domain: addForm.domain.trim(),
|
||||||
|
purchase_price: addForm.purchase_price ? parseFloat(addForm.purchase_price) : undefined,
|
||||||
|
purchase_date: addForm.purchase_date || undefined,
|
||||||
|
registrar: addForm.registrar || undefined,
|
||||||
|
renewal_date: addForm.renewal_date || undefined,
|
||||||
|
renewal_cost: addForm.renewal_cost ? parseFloat(addForm.renewal_cost) : undefined,
|
||||||
|
notes: addForm.notes || undefined,
|
||||||
|
})
|
||||||
|
showToast(`Added ${addForm.domain} to portfolio`, 'success')
|
||||||
|
setAddForm({ domain: '', purchase_price: '', purchase_date: '', registrar: '', renewal_date: '', renewal_cost: '', notes: '' })
|
||||||
|
setShowAddModal(false)
|
||||||
|
loadPortfolio()
|
||||||
|
} catch (err: any) {
|
||||||
|
showToast(err.message || 'Failed to add domain', 'error')
|
||||||
|
} finally {
|
||||||
|
setAddingDomain(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleEditDomain = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
if (!selectedDomain) return
|
||||||
|
|
||||||
|
setSavingEdit(true)
|
||||||
|
try {
|
||||||
|
await api.updatePortfolioDomain(selectedDomain.id, {
|
||||||
|
purchase_price: editForm.purchase_price ? parseFloat(editForm.purchase_price) : undefined,
|
||||||
|
purchase_date: editForm.purchase_date || undefined,
|
||||||
|
registrar: editForm.registrar || undefined,
|
||||||
|
renewal_date: editForm.renewal_date || undefined,
|
||||||
|
renewal_cost: editForm.renewal_cost ? parseFloat(editForm.renewal_cost) : undefined,
|
||||||
|
notes: editForm.notes || undefined,
|
||||||
|
})
|
||||||
|
showToast('Domain updated', 'success')
|
||||||
|
setShowEditModal(false)
|
||||||
|
loadPortfolio()
|
||||||
|
} catch (err: any) {
|
||||||
|
showToast(err.message || 'Failed to update', 'error')
|
||||||
|
} finally {
|
||||||
|
setSavingEdit(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSellDomain = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
if (!selectedDomain || !sellForm.sale_price) return
|
||||||
|
|
||||||
|
setProcessingSale(true)
|
||||||
|
try {
|
||||||
|
await api.markAsSold(selectedDomain.id, {
|
||||||
|
sale_date: sellForm.sale_date,
|
||||||
|
sale_price: parseFloat(sellForm.sale_price),
|
||||||
|
})
|
||||||
|
showToast(`Marked ${selectedDomain.domain} as sold`, 'success')
|
||||||
|
setShowSellModal(false)
|
||||||
|
loadPortfolio()
|
||||||
|
} catch (err: any) {
|
||||||
|
showToast(err.message || 'Failed to process sale', 'error')
|
||||||
|
} finally {
|
||||||
|
setProcessingSale(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleValuate = async (domain: PortfolioDomain) => {
|
||||||
|
setValuatingDomain(domain.domain)
|
||||||
|
setShowValuationModal(true)
|
||||||
|
try {
|
||||||
|
const result = await api.getValuation(domain.domain)
|
||||||
|
setValuation(result)
|
||||||
|
} catch (err: any) {
|
||||||
|
showToast(err.message || 'Failed to get valuation', 'error')
|
||||||
|
setShowValuationModal(false)
|
||||||
|
} finally {
|
||||||
|
setValuatingDomain('')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleRefresh = async (domain: PortfolioDomain) => {
|
||||||
|
setRefreshingId(domain.id)
|
||||||
|
try {
|
||||||
|
await api.refreshPortfolioValuation(domain.id)
|
||||||
|
showToast('Valuation refreshed', 'success')
|
||||||
|
loadPortfolio()
|
||||||
|
} catch (err: any) {
|
||||||
|
showToast(err.message || 'Failed to refresh', 'error')
|
||||||
|
} finally {
|
||||||
|
setRefreshingId(null)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDelete = async (domain: PortfolioDomain) => {
|
||||||
|
if (!confirm(`Remove ${domain.domain} from your portfolio?`)) return
|
||||||
|
|
||||||
|
try {
|
||||||
|
await api.removeFromPortfolio(domain.id)
|
||||||
|
showToast(`Removed ${domain.domain}`, 'success')
|
||||||
|
loadPortfolio()
|
||||||
|
} catch (err: any) {
|
||||||
|
showToast(err.message || 'Failed to remove', 'error')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const openEditModal = (domain: PortfolioDomain) => {
|
||||||
|
setSelectedDomain(domain)
|
||||||
|
setEditForm({
|
||||||
|
purchase_price: domain.purchase_price?.toString() || '',
|
||||||
|
purchase_date: domain.purchase_date || '',
|
||||||
|
registrar: domain.registrar || '',
|
||||||
|
renewal_date: domain.renewal_date || '',
|
||||||
|
renewal_cost: domain.renewal_cost?.toString() || '',
|
||||||
|
notes: domain.notes || '',
|
||||||
|
})
|
||||||
|
setShowEditModal(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const openSellModal = (domain: PortfolioDomain) => {
|
||||||
|
setSelectedDomain(domain)
|
||||||
|
setSellForm({
|
||||||
|
sale_date: new Date().toISOString().split('T')[0],
|
||||||
|
sale_price: '',
|
||||||
|
})
|
||||||
|
setShowSellModal(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const portfolioLimit = subscription?.portfolio_limit || 0
|
||||||
|
const canAddMore = portfolioLimit === -1 || portfolio.length < portfolioLimit
|
||||||
|
|
||||||
|
return (
|
||||||
|
<CommandCenterLayout
|
||||||
|
title="Portfolio"
|
||||||
|
subtitle={`Track your domain investments`}
|
||||||
|
actions={
|
||||||
|
<button
|
||||||
|
onClick={() => setShowAddModal(true)}
|
||||||
|
disabled={!canAddMore}
|
||||||
|
className="flex items-center gap-2 h-9 px-4 bg-accent text-background rounded-lg
|
||||||
|
font-medium text-sm hover:bg-accent-hover transition-colors
|
||||||
|
disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
<Plus className="w-4 h-4" />
|
||||||
|
Add Domain
|
||||||
|
</button>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{toast && <Toast message={toast.message} type={toast.type} onClose={hideToast} />}
|
||||||
|
|
||||||
|
<div className="max-w-7xl mx-auto space-y-6">
|
||||||
|
{/* Summary Stats */}
|
||||||
|
{summary && (
|
||||||
|
<div className="grid grid-cols-2 lg:grid-cols-5 gap-4">
|
||||||
|
<div className="p-5 bg-background-secondary/50 border border-border rounded-xl">
|
||||||
|
<p className="text-sm text-foreground-muted mb-1">Total Domains</p>
|
||||||
|
<p className="text-2xl font-display text-foreground">{summary.total_domains}</p>
|
||||||
|
</div>
|
||||||
|
<div className="p-5 bg-background-secondary/50 border border-border rounded-xl">
|
||||||
|
<p className="text-sm text-foreground-muted mb-1">Total Invested</p>
|
||||||
|
<p className="text-2xl font-display text-foreground">${summary.total_invested?.toLocaleString() || 0}</p>
|
||||||
|
</div>
|
||||||
|
<div className="p-5 bg-background-secondary/50 border border-border rounded-xl">
|
||||||
|
<p className="text-sm text-foreground-muted mb-1">Est. Value</p>
|
||||||
|
<p className="text-2xl font-display text-foreground">${summary.total_value?.toLocaleString() || 0}</p>
|
||||||
|
</div>
|
||||||
|
<div className={clsx(
|
||||||
|
"p-5 border rounded-xl",
|
||||||
|
(summary.total_profit || 0) >= 0
|
||||||
|
? "bg-accent/5 border-accent/20"
|
||||||
|
: "bg-red-500/5 border-red-500/20"
|
||||||
|
)}>
|
||||||
|
<p className="text-sm text-foreground-muted mb-1">Profit/Loss</p>
|
||||||
|
<p className={clsx(
|
||||||
|
"text-2xl font-display",
|
||||||
|
(summary.total_profit || 0) >= 0 ? "text-accent" : "text-red-400"
|
||||||
|
)}>
|
||||||
|
{(summary.total_profit || 0) >= 0 ? '+' : ''}${summary.total_profit?.toLocaleString() || 0}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="p-5 bg-background-secondary/50 border border-border rounded-xl">
|
||||||
|
<p className="text-sm text-foreground-muted mb-1">Sold</p>
|
||||||
|
<p className="text-2xl font-display text-foreground">{summary.sold_domains || 0}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!canAddMore && (
|
||||||
|
<div className="flex items-center justify-between p-4 bg-amber-500/10 border border-amber-500/20 rounded-xl">
|
||||||
|
<p className="text-sm text-amber-400">
|
||||||
|
You've reached your portfolio limit. Upgrade to add more.
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
href="/pricing"
|
||||||
|
className="text-sm font-medium text-amber-400 hover:text-amber-300 flex items-center gap-1"
|
||||||
|
>
|
||||||
|
Upgrade <ArrowUpRight className="w-3 h-3" />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Domain List */}
|
||||||
|
{loading ? (
|
||||||
|
<div className="space-y-3">
|
||||||
|
{[...Array(3)].map((_, i) => (
|
||||||
|
<div key={i} className="h-24 bg-background-secondary/50 border border-border rounded-xl animate-pulse" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : portfolio.length === 0 ? (
|
||||||
|
<div className="text-center py-16 bg-background-secondary/30 border border-border rounded-xl">
|
||||||
|
<div className="w-16 h-16 bg-foreground/5 rounded-2xl flex items-center justify-center mx-auto mb-4">
|
||||||
|
<Plus className="w-8 h-8 text-foreground-subtle" />
|
||||||
|
</div>
|
||||||
|
<p className="text-foreground-muted mb-2">Your portfolio is empty</p>
|
||||||
|
<p className="text-sm text-foreground-subtle mb-4">Add your first domain to start tracking investments</p>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowAddModal(true)}
|
||||||
|
className="inline-flex items-center gap-2 px-4 py-2 bg-accent text-background rounded-lg font-medium"
|
||||||
|
>
|
||||||
|
<Plus className="w-4 h-4" />
|
||||||
|
Add Domain
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-3">
|
||||||
|
{portfolio.map((domain) => (
|
||||||
|
<div
|
||||||
|
key={domain.id}
|
||||||
|
className="group p-5 bg-background-secondary/50 border border-border rounded-xl
|
||||||
|
hover:border-foreground/20 transition-all"
|
||||||
|
>
|
||||||
|
<div className="flex flex-col lg:flex-row lg:items-center gap-4">
|
||||||
|
{/* Domain Info */}
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<h3 className="text-lg font-semibold text-foreground mb-2">{domain.domain}</h3>
|
||||||
|
<div className="flex flex-wrap gap-4 text-sm text-foreground-muted">
|
||||||
|
{domain.purchase_price && (
|
||||||
|
<span className="flex items-center gap-1.5">
|
||||||
|
<DollarSign className="w-3.5 h-3.5" />
|
||||||
|
Bought: ${domain.purchase_price}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{domain.registrar && (
|
||||||
|
<span className="flex items-center gap-1.5">
|
||||||
|
<Building className="w-3.5 h-3.5" />
|
||||||
|
{domain.registrar}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{domain.renewal_date && (
|
||||||
|
<span className="flex items-center gap-1.5">
|
||||||
|
<Calendar className="w-3.5 h-3.5" />
|
||||||
|
Renews: {new Date(domain.renewal_date).toLocaleDateString()}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Valuation */}
|
||||||
|
{domain.current_valuation && (
|
||||||
|
<div className="text-right">
|
||||||
|
<p className="text-xl font-semibold text-foreground">
|
||||||
|
${domain.current_valuation.toLocaleString()}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-foreground-subtle">Est. Value</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => handleValuate(domain)}
|
||||||
|
className="p-2 text-foreground-muted hover:text-accent hover:bg-accent/10 rounded-lg transition-colors"
|
||||||
|
title="Get valuation"
|
||||||
|
>
|
||||||
|
<Sparkles className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handleRefresh(domain)}
|
||||||
|
disabled={refreshingId === domain.id}
|
||||||
|
className="p-2 text-foreground-muted hover:bg-foreground/5 rounded-lg transition-colors"
|
||||||
|
title="Refresh valuation"
|
||||||
|
>
|
||||||
|
<RefreshCw className={clsx("w-4 h-4", refreshingId === domain.id && "animate-spin")} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => openEditModal(domain)}
|
||||||
|
className="p-2 text-foreground-muted hover:bg-foreground/5 rounded-lg transition-colors"
|
||||||
|
title="Edit"
|
||||||
|
>
|
||||||
|
<Edit2 className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => openSellModal(domain)}
|
||||||
|
className="px-3 py-2 text-sm font-medium text-accent hover:bg-accent/10 rounded-lg transition-colors"
|
||||||
|
>
|
||||||
|
Sell
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handleDelete(domain)}
|
||||||
|
className="p-2 text-foreground-muted hover:text-red-400 hover:bg-red-400/10 rounded-lg transition-colors"
|
||||||
|
title="Remove"
|
||||||
|
>
|
||||||
|
<Trash2 className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Add Modal */}
|
||||||
|
{showAddModal && (
|
||||||
|
<Modal title="Add Domain to Portfolio" onClose={() => setShowAddModal(false)}>
|
||||||
|
<form onSubmit={handleAddDomain} className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm text-foreground-muted mb-1">Domain *</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={addForm.domain}
|
||||||
|
onChange={(e) => setAddForm({ ...addForm, domain: e.target.value })}
|
||||||
|
placeholder="example.com"
|
||||||
|
className="w-full h-10 px-3 bg-background border border-border rounded-lg text-foreground"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm text-foreground-muted mb-1">Purchase Price</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={addForm.purchase_price}
|
||||||
|
onChange={(e) => setAddForm({ ...addForm, purchase_price: e.target.value })}
|
||||||
|
placeholder="100"
|
||||||
|
className="w-full h-10 px-3 bg-background border border-border rounded-lg text-foreground"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm text-foreground-muted mb-1">Purchase Date</label>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
value={addForm.purchase_date}
|
||||||
|
onChange={(e) => setAddForm({ ...addForm, purchase_date: e.target.value })}
|
||||||
|
className="w-full h-10 px-3 bg-background border border-border rounded-lg text-foreground"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm text-foreground-muted mb-1">Registrar</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={addForm.registrar}
|
||||||
|
onChange={(e) => setAddForm({ ...addForm, registrar: e.target.value })}
|
||||||
|
placeholder="Namecheap"
|
||||||
|
className="w-full h-10 px-3 bg-background border border-border rounded-lg text-foreground"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-end gap-3">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setShowAddModal(false)}
|
||||||
|
className="px-4 py-2 text-foreground-muted hover:text-foreground"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={addingDomain || !addForm.domain.trim()}
|
||||||
|
className="flex items-center gap-2 px-4 py-2 bg-accent text-background rounded-lg font-medium
|
||||||
|
disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{addingDomain && <Loader2 className="w-4 h-4 animate-spin" />}
|
||||||
|
Add Domain
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</Modal>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Valuation Modal */}
|
||||||
|
{showValuationModal && (
|
||||||
|
<Modal title="Domain Valuation" onClose={() => { setShowValuationModal(false); setValuation(null); }}>
|
||||||
|
{valuatingDomain ? (
|
||||||
|
<div className="flex items-center justify-center py-8">
|
||||||
|
<Loader2 className="w-6 h-6 animate-spin text-accent" />
|
||||||
|
</div>
|
||||||
|
) : valuation ? (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="text-center p-6 bg-accent/5 border border-accent/20 rounded-xl">
|
||||||
|
<p className="text-4xl font-display text-accent">${valuation.estimated_value.toLocaleString()}</p>
|
||||||
|
<p className="text-sm text-foreground-muted mt-1">Estimated Value</p>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2 text-sm">
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-foreground-muted">Confidence</span>
|
||||||
|
<span className="text-foreground capitalize">{valuation.confidence}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-foreground-muted">Formula</span>
|
||||||
|
<span className="text-foreground font-mono text-xs">{valuation.valuation_formula}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</Modal>
|
||||||
|
)}
|
||||||
|
</CommandCenterLayout>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Simple Modal Component
|
||||||
|
function Modal({ title, children, onClose }: { title: string; children: React.ReactNode; onClose: () => void }) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm flex items-center justify-center p-4"
|
||||||
|
onClick={onClose}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="w-full max-w-md bg-background-secondary border border-border rounded-2xl shadow-2xl"
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between p-4 border-b border-border">
|
||||||
|
<h3 className="text-lg font-semibold text-foreground">{title}</h3>
|
||||||
|
<button onClick={onClose} className="text-foreground-muted hover:text-foreground">
|
||||||
|
<X className="w-5 h-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="p-4">
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
@ -2,8 +2,7 @@
|
|||||||
|
|
||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useState } from 'react'
|
||||||
import { useRouter } from 'next/navigation'
|
import { useRouter } from 'next/navigation'
|
||||||
import { Header } from '@/components/Header'
|
import { CommandCenterLayout } from '@/components/CommandCenterLayout'
|
||||||
import { Footer } from '@/components/Footer'
|
|
||||||
import { useStore } from '@/lib/store'
|
import { useStore } from '@/lib/store'
|
||||||
import { api, PriceAlert } from '@/lib/api'
|
import { api, PriceAlert } from '@/lib/api'
|
||||||
import {
|
import {
|
||||||
@ -181,34 +180,13 @@ export default function SettingsPage() {
|
|||||||
]
|
]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-background relative overflow-hidden">
|
<CommandCenterLayout
|
||||||
{/* Background Effects - matching landing page */}
|
title="Settings"
|
||||||
<div className="fixed inset-0 pointer-events-none">
|
subtitle="Manage your account"
|
||||||
<div className="absolute top-[-20%] left-1/2 -translate-x-1/2 w-[1200px] h-[800px] bg-accent/[0.03] rounded-full blur-[120px]" />
|
>
|
||||||
<div className="absolute bottom-[-10%] right-[-10%] w-[600px] h-[600px] bg-accent/[0.02] rounded-full blur-[100px]" />
|
|
||||||
<div
|
|
||||||
className="absolute inset-0 opacity-[0.015]"
|
|
||||||
style={{
|
|
||||||
backgroundImage: `linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px)`,
|
|
||||||
backgroundSize: '64px 64px',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Header />
|
<main className="max-w-5xl mx-auto">
|
||||||
|
<div className="space-y-8">
|
||||||
<main className="relative flex-1 pt-32 sm:pt-40 pb-20 sm:pb-28 px-4 sm:px-6 lg:px-8">
|
|
||||||
<div className="max-w-7xl mx-auto">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="mb-12 sm:mb-16 animate-fade-in">
|
|
||||||
<span className="text-sm font-semibold text-accent uppercase tracking-wider">Settings</span>
|
|
||||||
<h1 className="mt-4 font-display text-[2rem] sm:text-[2.75rem] md:text-[3.5rem] leading-[1.1] tracking-[-0.03em] text-foreground">
|
|
||||||
Your account.
|
|
||||||
</h1>
|
|
||||||
<p className="mt-3 text-lg text-foreground-muted">
|
|
||||||
Your rules. Configure everything in one place.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Messages */}
|
{/* Messages */}
|
||||||
{error && (
|
{error && (
|
||||||
@ -735,9 +713,7 @@ export default function SettingsPage() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
</CommandCenterLayout>
|
||||||
<Footer />
|
|
||||||
</div>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
494
frontend/src/app/watchlist/page.tsx
Normal file
494
frontend/src/app/watchlist/page.tsx
Normal file
@ -0,0 +1,494 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useEffect, useState } from 'react'
|
||||||
|
import { useStore } from '@/lib/store'
|
||||||
|
import { api } from '@/lib/api'
|
||||||
|
import { CommandCenterLayout } from '@/components/CommandCenterLayout'
|
||||||
|
import { Toast, useToast } from '@/components/Toast'
|
||||||
|
import {
|
||||||
|
Plus,
|
||||||
|
Trash2,
|
||||||
|
RefreshCw,
|
||||||
|
Loader2,
|
||||||
|
Bell,
|
||||||
|
BellOff,
|
||||||
|
History,
|
||||||
|
ExternalLink,
|
||||||
|
MoreVertical,
|
||||||
|
Search,
|
||||||
|
Filter,
|
||||||
|
ArrowUpRight,
|
||||||
|
} from 'lucide-react'
|
||||||
|
import clsx from 'clsx'
|
||||||
|
import Link from 'next/link'
|
||||||
|
|
||||||
|
interface DomainHistory {
|
||||||
|
id: number
|
||||||
|
status: string
|
||||||
|
is_available: boolean
|
||||||
|
checked_at: string
|
||||||
|
}
|
||||||
|
|
||||||
|
// Status indicator component with traffic light system
|
||||||
|
function StatusIndicator({ domain }: { domain: any }) {
|
||||||
|
// Determine status based on domain data
|
||||||
|
let status: 'available' | 'watching' | 'stable' = 'stable'
|
||||||
|
let label = 'Stable'
|
||||||
|
let description = 'Domain is registered and active'
|
||||||
|
|
||||||
|
if (domain.is_available) {
|
||||||
|
status = 'available'
|
||||||
|
label = 'Available'
|
||||||
|
description = 'Domain is available for registration!'
|
||||||
|
} else if (domain.status === 'checking' || domain.status === 'pending') {
|
||||||
|
status = 'watching'
|
||||||
|
label = 'Watching'
|
||||||
|
description = 'Monitoring for changes'
|
||||||
|
}
|
||||||
|
|
||||||
|
const colors = {
|
||||||
|
available: 'bg-accent text-accent',
|
||||||
|
watching: 'bg-amber-400 text-amber-400',
|
||||||
|
stable: 'bg-foreground-muted text-foreground-muted',
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="relative">
|
||||||
|
<span className={clsx(
|
||||||
|
"block w-3 h-3 rounded-full",
|
||||||
|
colors[status].split(' ')[0]
|
||||||
|
)} />
|
||||||
|
{status === 'available' && (
|
||||||
|
<span className={clsx(
|
||||||
|
"absolute inset-0 rounded-full animate-ping opacity-75",
|
||||||
|
colors[status].split(' ')[0]
|
||||||
|
)} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className={clsx(
|
||||||
|
"text-sm font-medium",
|
||||||
|
status === 'available' ? 'text-accent' :
|
||||||
|
status === 'watching' ? 'text-amber-400' : 'text-foreground-muted'
|
||||||
|
)}>
|
||||||
|
{label}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-foreground-subtle hidden sm:block">{description}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function WatchlistPage() {
|
||||||
|
const { domains, addDomain, deleteDomain, refreshDomain, subscription } = useStore()
|
||||||
|
const { toast, showToast, hideToast } = useToast()
|
||||||
|
|
||||||
|
const [newDomain, setNewDomain] = useState('')
|
||||||
|
const [adding, setAdding] = useState(false)
|
||||||
|
const [refreshingId, setRefreshingId] = useState<number | null>(null)
|
||||||
|
const [deletingId, setDeletingId] = useState<number | null>(null)
|
||||||
|
const [selectedDomainId, setSelectedDomainId] = useState<number | null>(null)
|
||||||
|
const [domainHistory, setDomainHistory] = useState<DomainHistory[] | null>(null)
|
||||||
|
const [loadingHistory, setLoadingHistory] = useState(false)
|
||||||
|
const [togglingNotifyId, setTogglingNotifyId] = useState<number | null>(null)
|
||||||
|
const [filterStatus, setFilterStatus] = useState<'all' | 'available' | 'watching'>('all')
|
||||||
|
const [searchQuery, setSearchQuery] = useState('')
|
||||||
|
|
||||||
|
// Filter domains
|
||||||
|
const filteredDomains = domains?.filter(domain => {
|
||||||
|
// Search filter
|
||||||
|
if (searchQuery && !domain.name.toLowerCase().includes(searchQuery.toLowerCase())) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
// Status filter
|
||||||
|
if (filterStatus === 'available' && !domain.is_available) return false
|
||||||
|
if (filterStatus === 'watching' && domain.is_available) return false
|
||||||
|
return true
|
||||||
|
}) || []
|
||||||
|
|
||||||
|
// Stats
|
||||||
|
const availableCount = domains?.filter(d => d.is_available).length || 0
|
||||||
|
const watchingCount = domains?.filter(d => !d.is_available).length || 0
|
||||||
|
|
||||||
|
const handleAddDomain = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
if (!newDomain.trim()) return
|
||||||
|
|
||||||
|
setAdding(true)
|
||||||
|
try {
|
||||||
|
await addDomain(newDomain.trim())
|
||||||
|
setNewDomain('')
|
||||||
|
showToast(`Added ${newDomain.trim()} to watchlist`, 'success')
|
||||||
|
} catch (err: any) {
|
||||||
|
showToast(err.message || 'Failed to add domain', 'error')
|
||||||
|
} finally {
|
||||||
|
setAdding(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleRefresh = async (id: number) => {
|
||||||
|
setRefreshingId(id)
|
||||||
|
try {
|
||||||
|
await refreshDomain(id)
|
||||||
|
showToast('Domain status refreshed', 'success')
|
||||||
|
} catch (err: any) {
|
||||||
|
showToast(err.message || 'Failed to refresh', 'error')
|
||||||
|
} finally {
|
||||||
|
setRefreshingId(null)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDelete = async (id: number, name: string) => {
|
||||||
|
if (!confirm(`Remove ${name} from your watchlist?`)) return
|
||||||
|
|
||||||
|
setDeletingId(id)
|
||||||
|
try {
|
||||||
|
await deleteDomain(id)
|
||||||
|
showToast(`Removed ${name} from watchlist`, 'success')
|
||||||
|
} catch (err: any) {
|
||||||
|
showToast(err.message || 'Failed to remove', 'error')
|
||||||
|
} finally {
|
||||||
|
setDeletingId(null)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleToggleNotify = async (id: number, currentState: boolean) => {
|
||||||
|
setTogglingNotifyId(id)
|
||||||
|
try {
|
||||||
|
await api.updateDomainNotify(id, !currentState)
|
||||||
|
showToast(
|
||||||
|
!currentState ? 'Notifications enabled' : 'Notifications disabled',
|
||||||
|
'success'
|
||||||
|
)
|
||||||
|
} catch (err: any) {
|
||||||
|
showToast(err.message || 'Failed to update', 'error')
|
||||||
|
} finally {
|
||||||
|
setTogglingNotifyId(null)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const loadHistory = async (domainId: number) => {
|
||||||
|
if (selectedDomainId === domainId) {
|
||||||
|
setSelectedDomainId(null)
|
||||||
|
setDomainHistory(null)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
setSelectedDomainId(domainId)
|
||||||
|
setLoadingHistory(true)
|
||||||
|
try {
|
||||||
|
const history = await api.getDomainHistory(domainId)
|
||||||
|
setDomainHistory(history)
|
||||||
|
} catch (err) {
|
||||||
|
setDomainHistory([])
|
||||||
|
} finally {
|
||||||
|
setLoadingHistory(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const domainLimit = subscription?.domain_limit || 5
|
||||||
|
const domainsUsed = domains?.length || 0
|
||||||
|
const canAddMore = domainsUsed < domainLimit
|
||||||
|
|
||||||
|
return (
|
||||||
|
<CommandCenterLayout
|
||||||
|
title="Watchlist"
|
||||||
|
subtitle={`${domainsUsed}/${domainLimit} domains tracked`}
|
||||||
|
>
|
||||||
|
{toast && <Toast message={toast.message} type={toast.type} onClose={hideToast} />}
|
||||||
|
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Add Domain Form */}
|
||||||
|
<form onSubmit={handleAddDomain} className="flex gap-3">
|
||||||
|
<div className="flex-1 relative">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={newDomain}
|
||||||
|
onChange={(e) => setNewDomain(e.target.value)}
|
||||||
|
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",
|
||||||
|
"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"
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
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",
|
||||||
|
"disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{adding ? (
|
||||||
|
<Loader2 className="w-4 h-4 animate-spin" />
|
||||||
|
) : (
|
||||||
|
<Plus className="w-4 h-4" />
|
||||||
|
)}
|
||||||
|
Add
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
{!canAddMore && (
|
||||||
|
<div className="flex items-center justify-between p-4 bg-amber-500/10 border border-amber-500/20 rounded-xl">
|
||||||
|
<p className="text-sm text-amber-400">
|
||||||
|
You've reached your domain limit. Upgrade to track more.
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
href="/pricing"
|
||||||
|
className="text-sm font-medium text-amber-400 hover:text-amber-300 flex items-center gap-1"
|
||||||
|
>
|
||||||
|
Upgrade <ArrowUpRight className="w-3 h-3" />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Filters */}
|
||||||
|
<div className="flex flex-col sm:flex-row gap-3 sm:items-center sm:justify-between">
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => setFilterStatus('all')}
|
||||||
|
className={clsx(
|
||||||
|
"px-4 py-2 text-sm rounded-lg transition-colors",
|
||||||
|
filterStatus === 'all'
|
||||||
|
? "bg-foreground/10 text-foreground"
|
||||||
|
: "text-foreground-muted hover:bg-foreground/5"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
All ({domainsUsed})
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setFilterStatus('available')}
|
||||||
|
className={clsx(
|
||||||
|
"px-4 py-2 text-sm rounded-lg transition-colors flex items-center gap-2",
|
||||||
|
filterStatus === 'available'
|
||||||
|
? "bg-accent/10 text-accent"
|
||||||
|
: "text-foreground-muted hover:bg-foreground/5"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<span className="w-2 h-2 rounded-full bg-accent" />
|
||||||
|
Available ({availableCount})
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setFilterStatus('watching')}
|
||||||
|
className={clsx(
|
||||||
|
"px-4 py-2 text-sm rounded-lg transition-colors flex items-center gap-2",
|
||||||
|
filterStatus === 'watching'
|
||||||
|
? "bg-foreground/10 text-foreground"
|
||||||
|
: "text-foreground-muted hover:bg-foreground/5"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<span className="w-2 h-2 rounded-full bg-foreground-muted" />
|
||||||
|
Watching ({watchingCount})
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative">
|
||||||
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-foreground-muted" />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
placeholder="Search domains..."
|
||||||
|
className="w-full sm:w-64 h-10 pl-9 pr-4 bg-background-secondary border border-border rounded-lg
|
||||||
|
text-sm text-foreground placeholder:text-foreground-subtle
|
||||||
|
focus:outline-none focus:border-accent"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Domain List */}
|
||||||
|
<div className="space-y-3">
|
||||||
|
{filteredDomains.length === 0 ? (
|
||||||
|
<div className="text-center py-16 bg-background-secondary/30 border border-border rounded-xl">
|
||||||
|
{domainsUsed === 0 ? (
|
||||||
|
<>
|
||||||
|
<div className="w-16 h-16 bg-foreground/5 rounded-2xl flex items-center justify-center mx-auto mb-4">
|
||||||
|
<Plus className="w-8 h-8 text-foreground-subtle" />
|
||||||
|
</div>
|
||||||
|
<p className="text-foreground-muted mb-2">Your watchlist is empty</p>
|
||||||
|
<p className="text-sm text-foreground-subtle">Add a domain above to start tracking</p>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Filter className="w-8 h-8 text-foreground-subtle mx-auto mb-4" />
|
||||||
|
<p className="text-foreground-muted">No domains match your filters</p>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
filteredDomains.map((domain) => (
|
||||||
|
<div
|
||||||
|
key={domain.id}
|
||||||
|
className={clsx(
|
||||||
|
"group p-4 sm:p-5 rounded-xl border transition-all duration-200",
|
||||||
|
domain.is_available
|
||||||
|
? "bg-accent/5 border-accent/20 hover:border-accent/40"
|
||||||
|
: "bg-background-secondary/50 border-border hover:border-foreground/20"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col sm:flex-row sm:items-center gap-4">
|
||||||
|
{/* Domain Name + Status */}
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center gap-3 mb-2">
|
||||||
|
<h3 className="text-lg font-semibold text-foreground truncate">
|
||||||
|
{domain.name}
|
||||||
|
</h3>
|
||||||
|
{domain.is_available && (
|
||||||
|
<span className="shrink-0 px-2 py-0.5 bg-accent/20 text-accent text-xs font-semibold rounded-full">
|
||||||
|
GRAB IT!
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<StatusIndicator domain={domain} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div className="flex items-center gap-2 shrink-0">
|
||||||
|
{/* Notify Toggle */}
|
||||||
|
<button
|
||||||
|
onClick={() => handleToggleNotify(domain.id, domain.notify_on_available)}
|
||||||
|
disabled={togglingNotifyId === domain.id}
|
||||||
|
className={clsx(
|
||||||
|
"p-2 rounded-lg transition-colors",
|
||||||
|
domain.notify_on_available
|
||||||
|
? "bg-accent/10 text-accent hover:bg-accent/20"
|
||||||
|
: "text-foreground-muted hover:bg-foreground/5"
|
||||||
|
)}
|
||||||
|
title={domain.notify_on_available ? "Disable alerts" : "Enable alerts"}
|
||||||
|
>
|
||||||
|
{togglingNotifyId === domain.id ? (
|
||||||
|
<Loader2 className="w-4 h-4 animate-spin" />
|
||||||
|
) : domain.notify_on_available ? (
|
||||||
|
<Bell className="w-4 h-4" />
|
||||||
|
) : (
|
||||||
|
<BellOff className="w-4 h-4" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* History */}
|
||||||
|
<button
|
||||||
|
onClick={() => loadHistory(domain.id)}
|
||||||
|
className={clsx(
|
||||||
|
"p-2 rounded-lg transition-colors",
|
||||||
|
selectedDomainId === domain.id
|
||||||
|
? "bg-foreground/10 text-foreground"
|
||||||
|
: "text-foreground-muted hover:bg-foreground/5"
|
||||||
|
)}
|
||||||
|
title="View history"
|
||||||
|
>
|
||||||
|
<History className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Refresh */}
|
||||||
|
<button
|
||||||
|
onClick={() => handleRefresh(domain.id)}
|
||||||
|
disabled={refreshingId === domain.id}
|
||||||
|
className="p-2 rounded-lg text-foreground-muted hover:bg-foreground/5 transition-colors"
|
||||||
|
title="Refresh status"
|
||||||
|
>
|
||||||
|
<RefreshCw className={clsx(
|
||||||
|
"w-4 h-4",
|
||||||
|
refreshingId === domain.id && "animate-spin"
|
||||||
|
)} />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Delete */}
|
||||||
|
<button
|
||||||
|
onClick={() => handleDelete(domain.id, domain.name)}
|
||||||
|
disabled={deletingId === domain.id}
|
||||||
|
className="p-2 rounded-lg text-foreground-muted hover:text-red-400 hover:bg-red-400/10 transition-colors"
|
||||||
|
title="Remove"
|
||||||
|
>
|
||||||
|
{deletingId === domain.id ? (
|
||||||
|
<Loader2 className="w-4 h-4 animate-spin" />
|
||||||
|
) : (
|
||||||
|
<Trash2 className="w-4 h-4" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* External Link (if available) */}
|
||||||
|
{domain.is_available && (
|
||||||
|
<a
|
||||||
|
href={`https://www.namecheap.com/domains/registration/results/?domain=${domain.name}`}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="flex items-center gap-2 px-4 py-2 bg-accent text-background rounded-lg
|
||||||
|
font-medium text-sm hover:bg-accent-hover transition-colors"
|
||||||
|
>
|
||||||
|
Register
|
||||||
|
<ExternalLink className="w-3 h-3" />
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* History Panel */}
|
||||||
|
{selectedDomainId === domain.id && (
|
||||||
|
<div className="mt-4 pt-4 border-t border-border/50">
|
||||||
|
<h4 className="text-sm font-medium text-foreground-muted mb-3">Status History</h4>
|
||||||
|
{loadingHistory ? (
|
||||||
|
<div className="flex items-center gap-2 text-foreground-muted">
|
||||||
|
<Loader2 className="w-4 h-4 animate-spin" />
|
||||||
|
<span className="text-sm">Loading...</span>
|
||||||
|
</div>
|
||||||
|
) : domainHistory && domainHistory.length > 0 ? (
|
||||||
|
<div className="space-y-2">
|
||||||
|
{domainHistory.slice(0, 5).map((entry) => (
|
||||||
|
<div
|
||||||
|
key={entry.id}
|
||||||
|
className="flex items-center gap-3 text-sm"
|
||||||
|
>
|
||||||
|
<span className={clsx(
|
||||||
|
"w-2 h-2 rounded-full",
|
||||||
|
entry.is_available ? "bg-accent" : "bg-foreground-muted"
|
||||||
|
)} />
|
||||||
|
<span className="text-foreground-muted">
|
||||||
|
{new Date(entry.checked_at).toLocaleDateString()} at{' '}
|
||||||
|
{new Date(entry.checked_at).toLocaleTimeString()}
|
||||||
|
</span>
|
||||||
|
<span className="text-foreground">
|
||||||
|
{entry.is_available ? 'Available' : 'Registered'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<p className="text-sm text-foreground-subtle">No history available yet</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CommandCenterLayout>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
238
frontend/src/components/CommandCenterLayout.tsx
Normal file
238
frontend/src/components/CommandCenterLayout.tsx
Normal file
@ -0,0 +1,238 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useEffect, useState } from 'react'
|
||||||
|
import { useRouter } from 'next/navigation'
|
||||||
|
import { useStore } from '@/lib/store'
|
||||||
|
import { Sidebar } from './Sidebar'
|
||||||
|
import { Bell, Search, X } from 'lucide-react'
|
||||||
|
import Link from 'next/link'
|
||||||
|
import clsx from 'clsx'
|
||||||
|
|
||||||
|
interface CommandCenterLayoutProps {
|
||||||
|
children: React.ReactNode
|
||||||
|
title?: string
|
||||||
|
subtitle?: string
|
||||||
|
actions?: React.ReactNode
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CommandCenterLayout({
|
||||||
|
children,
|
||||||
|
title,
|
||||||
|
subtitle,
|
||||||
|
actions
|
||||||
|
}: CommandCenterLayoutProps) {
|
||||||
|
const router = useRouter()
|
||||||
|
const { isAuthenticated, isLoading, checkAuth, domains } = useStore()
|
||||||
|
const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
|
||||||
|
const [notificationsOpen, setNotificationsOpen] = useState(false)
|
||||||
|
const [searchOpen, setSearchOpen] = useState(false)
|
||||||
|
const [searchQuery, setSearchQuery] = useState('')
|
||||||
|
|
||||||
|
// Load sidebar state from localStorage
|
||||||
|
useEffect(() => {
|
||||||
|
const saved = localStorage.getItem('sidebar-collapsed')
|
||||||
|
if (saved) {
|
||||||
|
setSidebarCollapsed(saved === 'true')
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
checkAuth()
|
||||||
|
}, [checkAuth])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isLoading && !isAuthenticated) {
|
||||||
|
router.push('/login')
|
||||||
|
}
|
||||||
|
}, [isLoading, isAuthenticated, router])
|
||||||
|
|
||||||
|
// Available domains for notifications
|
||||||
|
const availableDomains = domains?.filter(d => d.is_available) || []
|
||||||
|
const hasNotifications = availableDomains.length > 0
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center bg-background">
|
||||||
|
<div className="w-6 h-6 border-2 border-accent border-t-transparent rounded-full animate-spin" />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isAuthenticated) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-background">
|
||||||
|
{/* Sidebar */}
|
||||||
|
<Sidebar
|
||||||
|
collapsed={sidebarCollapsed}
|
||||||
|
onCollapsedChange={setSidebarCollapsed}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Main Content Area */}
|
||||||
|
<div
|
||||||
|
className={clsx(
|
||||||
|
"min-h-screen transition-all duration-300",
|
||||||
|
sidebarCollapsed ? "ml-[72px]" : "ml-[240px]"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{/* 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-6 flex items-center justify-between">
|
||||||
|
{/* Left: Title */}
|
||||||
|
<div>
|
||||||
|
{title && (
|
||||||
|
<h1 className="text-xl sm:text-2xl font-display text-foreground">{title}</h1>
|
||||||
|
)}
|
||||||
|
{subtitle && (
|
||||||
|
<p className="text-sm text-foreground-muted mt-0.5">{subtitle}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right: Actions */}
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
{/* Quick Search */}
|
||||||
|
<button
|
||||||
|
onClick={() => setSearchOpen(true)}
|
||||||
|
className="hidden sm:flex items-center gap-2 h-9 px-4 bg-foreground/5 hover:bg-foreground/10
|
||||||
|
border border-border/50 rounded-lg text-sm text-foreground-muted
|
||||||
|
hover:text-foreground transition-all duration-200"
|
||||||
|
>
|
||||||
|
<Search className="w-4 h-4" />
|
||||||
|
<span>Search domains...</span>
|
||||||
|
<kbd className="hidden md:inline-flex items-center h-5 px-1.5 bg-background border border-border
|
||||||
|
rounded text-[10px] text-foreground-subtle font-mono">⌘K</kbd>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Notifications */}
|
||||||
|
<div className="relative">
|
||||||
|
<button
|
||||||
|
onClick={() => setNotificationsOpen(!notificationsOpen)}
|
||||||
|
className={clsx(
|
||||||
|
"relative flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-200",
|
||||||
|
notificationsOpen
|
||||||
|
? "bg-foreground/10 text-foreground"
|
||||||
|
: "text-foreground-muted hover:text-foreground hover:bg-foreground/5"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Bell className="w-4.5 h-4.5" />
|
||||||
|
{hasNotifications && (
|
||||||
|
<span className="absolute top-1.5 right-1.5 w-2 h-2 bg-accent rounded-full">
|
||||||
|
<span className="absolute inset-0 rounded-full bg-accent animate-ping opacity-50" />
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Notifications Dropdown */}
|
||||||
|
{notificationsOpen && (
|
||||||
|
<div className="absolute right-0 top-full mt-2 w-80 bg-background-secondary border border-border
|
||||||
|
rounded-xl shadow-2xl overflow-hidden">
|
||||||
|
<div className="p-4 border-b border-border flex items-center justify-between">
|
||||||
|
<h3 className="text-sm font-medium text-foreground">Notifications</h3>
|
||||||
|
<button
|
||||||
|
onClick={() => setNotificationsOpen(false)}
|
||||||
|
className="text-foreground-muted hover:text-foreground"
|
||||||
|
>
|
||||||
|
<X className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="max-h-80 overflow-y-auto">
|
||||||
|
{availableDomains.length > 0 ? (
|
||||||
|
<div className="p-2">
|
||||||
|
{availableDomains.slice(0, 5).map((domain) => (
|
||||||
|
<Link
|
||||||
|
key={domain.id}
|
||||||
|
href="/watchlist"
|
||||||
|
onClick={() => setNotificationsOpen(false)}
|
||||||
|
className="flex items-start gap-3 p-3 hover:bg-foreground/5 rounded-lg transition-colors"
|
||||||
|
>
|
||||||
|
<div className="w-8 h-8 bg-accent/10 rounded-lg flex items-center justify-center shrink-0">
|
||||||
|
<span className="w-2 h-2 bg-accent rounded-full animate-pulse" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<p className="text-sm font-medium text-foreground truncate">{domain.name}</p>
|
||||||
|
<p className="text-xs text-accent">Available now!</p>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="p-8 text-center">
|
||||||
|
<Bell className="w-8 h-8 text-foreground-subtle mx-auto mb-3" />
|
||||||
|
<p className="text-sm text-foreground-muted">No notifications</p>
|
||||||
|
<p className="text-xs text-foreground-subtle mt-1">
|
||||||
|
We'll notify you when domains become available
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Custom Actions */}
|
||||||
|
{actions}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* Page Content */}
|
||||||
|
<main className="p-6 lg:p-8">
|
||||||
|
{children}
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quick Search Modal */}
|
||||||
|
{searchOpen && (
|
||||||
|
<div
|
||||||
|
className="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm flex items-start justify-center pt-[20vh]"
|
||||||
|
onClick={() => setSearchOpen(false)}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="w-full max-w-xl bg-background-secondary border border-border rounded-2xl shadow-2xl overflow-hidden"
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3 p-4 border-b border-border">
|
||||||
|
<Search className="w-5 h-5 text-foreground-muted" />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search domains, TLDs, auctions..."
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
className="flex-1 bg-transparent text-foreground placeholder:text-foreground-subtle
|
||||||
|
outline-none text-lg"
|
||||||
|
autoFocus
|
||||||
|
/>
|
||||||
|
<kbd className="hidden sm:flex items-center h-6 px-2 bg-background border border-border
|
||||||
|
rounded text-xs text-foreground-subtle font-mono">ESC</kbd>
|
||||||
|
</div>
|
||||||
|
<div className="p-4 text-center text-foreground-muted text-sm">
|
||||||
|
Start typing to search...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Keyboard shortcut for search */}
|
||||||
|
<KeyboardShortcut onTrigger={() => setSearchOpen(true)} keys={['Meta', 'k']} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Keyboard shortcut component
|
||||||
|
function KeyboardShortcut({ onTrigger, keys }: { onTrigger: () => void, keys: string[] }) {
|
||||||
|
useEffect(() => {
|
||||||
|
const handler = (e: KeyboardEvent) => {
|
||||||
|
if (keys.includes('Meta') && e.metaKey && e.key === 'k') {
|
||||||
|
e.preventDefault()
|
||||||
|
onTrigger()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
document.addEventListener('keydown', handler)
|
||||||
|
return () => document.removeEventListener('keydown', handler)
|
||||||
|
}, [onTrigger, keys])
|
||||||
|
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
@ -4,79 +4,60 @@ import Link from 'next/link'
|
|||||||
import { usePathname } from 'next/navigation'
|
import { usePathname } from 'next/navigation'
|
||||||
import { useStore } from '@/lib/store'
|
import { useStore } from '@/lib/store'
|
||||||
import {
|
import {
|
||||||
LogOut,
|
|
||||||
LayoutDashboard,
|
|
||||||
Menu,
|
Menu,
|
||||||
X,
|
X,
|
||||||
Settings,
|
|
||||||
Bell,
|
|
||||||
User,
|
|
||||||
ChevronDown,
|
|
||||||
TrendingUp,
|
TrendingUp,
|
||||||
Gavel,
|
Gavel,
|
||||||
CreditCard,
|
CreditCard,
|
||||||
Search,
|
LayoutDashboard,
|
||||||
Shield,
|
|
||||||
} from 'lucide-react'
|
} from 'lucide-react'
|
||||||
import { useState, useRef, useEffect } from 'react'
|
import { useState, useEffect } from 'react'
|
||||||
import clsx from 'clsx'
|
import clsx from 'clsx'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Public Header Component
|
||||||
|
*
|
||||||
|
* Used for:
|
||||||
|
* - Landing page (/)
|
||||||
|
* - Public pages (pricing, about, contact, blog, etc.)
|
||||||
|
* - Auth pages (login, register)
|
||||||
|
*
|
||||||
|
* For logged-in users in the Command Center, use CommandCenterLayout instead.
|
||||||
|
*/
|
||||||
export function Header() {
|
export function Header() {
|
||||||
const pathname = usePathname()
|
const pathname = usePathname()
|
||||||
const { isAuthenticated, user, logout, domains, subscription } = useStore()
|
const { isAuthenticated, user, logout, subscription } = useStore()
|
||||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
|
||||||
const [userMenuOpen, setUserMenuOpen] = useState(false)
|
|
||||||
const [notificationsOpen, setNotificationsOpen] = useState(false)
|
|
||||||
const userMenuRef = useRef<HTMLDivElement>(null)
|
|
||||||
const notificationsRef = useRef<HTMLDivElement>(null)
|
|
||||||
|
|
||||||
// Close dropdowns when clicking outside
|
|
||||||
useEffect(() => {
|
|
||||||
function handleClickOutside(event: MouseEvent) {
|
|
||||||
if (userMenuRef.current && !userMenuRef.current.contains(event.target as Node)) {
|
|
||||||
setUserMenuOpen(false)
|
|
||||||
}
|
|
||||||
if (notificationsRef.current && !notificationsRef.current.contains(event.target as Node)) {
|
|
||||||
setNotificationsOpen(false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
document.addEventListener('mousedown', handleClickOutside)
|
|
||||||
return () => document.removeEventListener('mousedown', handleClickOutside)
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
// Close mobile menu on route change
|
// Close mobile menu on route change
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setMobileMenuOpen(false)
|
setMobileMenuOpen(false)
|
||||||
}, [pathname])
|
}, [pathname])
|
||||||
|
|
||||||
// Count notifications (available domains, etc.)
|
|
||||||
const availableDomains = domains?.filter(d => d.is_available) || []
|
|
||||||
const hasNotifications = availableDomains.length > 0
|
|
||||||
|
|
||||||
const tierName = subscription?.tier_name || subscription?.tier || 'Scout'
|
const tierName = subscription?.tier_name || subscription?.tier || 'Scout'
|
||||||
|
|
||||||
// Public navigation - for visitors (consistent naming with concept)
|
// Public navigation - same for all visitors
|
||||||
const publicNavItems = [
|
const publicNavItems = [
|
||||||
{ href: '/auctions', label: 'Market', icon: Gavel },
|
{ href: '/auctions', label: 'Market', icon: Gavel },
|
||||||
{ href: '/tld-pricing', label: 'TLD Intel', icon: TrendingUp },
|
{ href: '/tld-pricing', label: 'TLD Intel', icon: TrendingUp },
|
||||||
{ href: '/pricing', label: 'Pricing', icon: CreditCard },
|
{ href: '/pricing', label: 'Pricing', icon: CreditCard },
|
||||||
]
|
]
|
||||||
|
|
||||||
// Command Center navigation - for logged in users
|
|
||||||
const commandCenterNavItems = [
|
|
||||||
{ href: '/dashboard', label: 'Dashboard', icon: LayoutDashboard },
|
|
||||||
{ href: '/auctions', label: 'Market', icon: Gavel },
|
|
||||||
{ href: '/tld-pricing', label: 'Intelligence', icon: TrendingUp },
|
|
||||||
]
|
|
||||||
|
|
||||||
// Use appropriate nav items based on auth status
|
|
||||||
const navItems = isAuthenticated ? commandCenterNavItems : publicNavItems
|
|
||||||
|
|
||||||
const isActive = (href: string) => {
|
const isActive = (href: string) => {
|
||||||
if (href === '/') return pathname === '/'
|
if (href === '/') return pathname === '/'
|
||||||
return pathname.startsWith(href)
|
return pathname.startsWith(href)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Check if we're on a Command Center page (should use Sidebar instead)
|
||||||
|
const isCommandCenterPage = ['/dashboard', '/watchlist', '/portfolio', '/market', '/intelligence', '/settings', '/admin'].some(
|
||||||
|
path => pathname.startsWith(path)
|
||||||
|
)
|
||||||
|
|
||||||
|
// If logged in and on Command Center page, don't render this header
|
||||||
|
if (isAuthenticated && isCommandCenterPage) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header className="fixed top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-xl border-b border-border-subtle">
|
<header className="fixed top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-xl border-b border-border-subtle">
|
||||||
<div className="w-full px-4 sm:px-6 lg:px-8 h-16 sm:h-20 flex items-center justify-between">
|
<div className="w-full px-4 sm:px-6 lg:px-8 h-16 sm:h-20 flex items-center justify-between">
|
||||||
@ -97,7 +78,7 @@ export function Header() {
|
|||||||
|
|
||||||
{/* Main Nav Links (Desktop) */}
|
{/* Main Nav Links (Desktop) */}
|
||||||
<nav className="hidden md:flex items-center h-full gap-1">
|
<nav className="hidden md:flex items-center h-full gap-1">
|
||||||
{navItems.map((item) => (
|
{publicNavItems.map((item) => (
|
||||||
<Link
|
<Link
|
||||||
key={item.href}
|
key={item.href}
|
||||||
href={item.href}
|
href={item.href}
|
||||||
@ -118,144 +99,15 @@ export function Header() {
|
|||||||
<nav className="hidden sm:flex items-center h-full gap-2">
|
<nav className="hidden sm:flex items-center h-full gap-2">
|
||||||
{isAuthenticated ? (
|
{isAuthenticated ? (
|
||||||
<>
|
<>
|
||||||
{/* Notifications */}
|
{/* Go to Command Center */}
|
||||||
<div ref={notificationsRef} className="relative">
|
<Link
|
||||||
<button
|
href="/dashboard"
|
||||||
onClick={() => setNotificationsOpen(!notificationsOpen)}
|
className="flex items-center gap-2 h-9 px-4 text-[0.8125rem] bg-accent text-background
|
||||||
className={clsx(
|
rounded-lg font-medium hover:bg-accent-hover transition-all duration-200"
|
||||||
"relative flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-200",
|
>
|
||||||
notificationsOpen
|
<LayoutDashboard className="w-4 h-4" />
|
||||||
? "bg-foreground/10 text-foreground"
|
Command Center
|
||||||
: "text-foreground-muted hover:text-foreground hover:bg-foreground/5"
|
</Link>
|
||||||
)}
|
|
||||||
>
|
|
||||||
<Bell className="w-4 h-4" />
|
|
||||||
{hasNotifications && (
|
|
||||||
<span className="absolute top-1.5 right-1.5 w-2 h-2 bg-accent rounded-full">
|
|
||||||
<span className="absolute inset-0 rounded-full bg-accent animate-ping opacity-50" />
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{/* Notifications Dropdown */}
|
|
||||||
{notificationsOpen && (
|
|
||||||
<div className="absolute right-0 top-full mt-2 w-80 bg-background-secondary border border-border rounded-xl shadow-2xl overflow-hidden">
|
|
||||||
<div className="p-4 border-b border-border">
|
|
||||||
<h3 className="text-body-sm font-medium text-foreground">Notifications</h3>
|
|
||||||
</div>
|
|
||||||
<div className="max-h-80 overflow-y-auto">
|
|
||||||
{availableDomains.length > 0 ? (
|
|
||||||
<div className="p-2">
|
|
||||||
{availableDomains.slice(0, 5).map((domain) => (
|
|
||||||
<Link
|
|
||||||
key={domain.id}
|
|
||||||
href="/dashboard"
|
|
||||||
onClick={() => setNotificationsOpen(false)}
|
|
||||||
className="flex items-start gap-3 p-3 hover:bg-foreground/5 rounded-lg transition-colors"
|
|
||||||
>
|
|
||||||
<div className="w-8 h-8 bg-accent/10 rounded-lg flex items-center justify-center shrink-0">
|
|
||||||
<Search className="w-4 h-4 text-accent" />
|
|
||||||
</div>
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<p className="text-body-sm font-medium text-foreground truncate">{domain.name}</p>
|
|
||||||
<p className="text-body-xs text-accent">Available now!</p>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
{availableDomains.length > 5 && (
|
|
||||||
<p className="px-3 py-2 text-body-xs text-foreground-muted">
|
|
||||||
+{availableDomains.length - 5} more available
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="p-8 text-center">
|
|
||||||
<Bell className="w-8 h-8 text-foreground-subtle mx-auto mb-3" />
|
|
||||||
<p className="text-body-sm text-foreground-muted">No notifications</p>
|
|
||||||
<p className="text-body-xs text-foreground-subtle mt-1">We'll notify you when domains become available</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<Link
|
|
||||||
href="/settings"
|
|
||||||
onClick={() => setNotificationsOpen(false)}
|
|
||||||
className="block p-3 text-center text-body-xs text-foreground-muted hover:text-foreground hover:bg-foreground/5 border-t border-border transition-colors"
|
|
||||||
>
|
|
||||||
Notification settings
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* User Menu */}
|
|
||||||
<div ref={userMenuRef} className="relative">
|
|
||||||
<button
|
|
||||||
onClick={() => setUserMenuOpen(!userMenuOpen)}
|
|
||||||
className={clsx(
|
|
||||||
"flex items-center gap-2 h-9 pl-3 pr-2 rounded-lg transition-all duration-200",
|
|
||||||
userMenuOpen ? "bg-foreground/10" : "hover:bg-foreground/5"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className="w-6 h-6 bg-accent/10 rounded-full flex items-center justify-center">
|
|
||||||
<User className="w-3.5 h-3.5 text-accent" />
|
|
||||||
</div>
|
|
||||||
<ChevronDown className={clsx(
|
|
||||||
"w-3.5 h-3.5 text-foreground-muted transition-transform duration-200",
|
|
||||||
userMenuOpen && "rotate-180"
|
|
||||||
)} />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{/* User Dropdown */}
|
|
||||||
{userMenuOpen && (
|
|
||||||
<div className="absolute right-0 top-full mt-2 w-64 bg-background-secondary border border-border rounded-xl shadow-2xl overflow-hidden">
|
|
||||||
{/* User Info */}
|
|
||||||
<div className="p-4 border-b border-border">
|
|
||||||
<p className="text-body-sm font-medium text-foreground truncate">{user?.name || user?.email}</p>
|
|
||||||
<p className="text-body-xs text-foreground-muted truncate">{user?.email}</p>
|
|
||||||
<div className="flex items-center gap-2 mt-2">
|
|
||||||
<span className="text-ui-xs px-2 py-0.5 bg-accent/10 text-accent rounded-full font-medium">{tierName}</span>
|
|
||||||
<span className="text-ui-xs text-foreground-subtle">{subscription?.domains_used || 0}/{subscription?.domain_limit || 5} domains</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Menu Items */}
|
|
||||||
<div className="p-2">
|
|
||||||
{user?.is_admin && (
|
|
||||||
<Link
|
|
||||||
href="/admin"
|
|
||||||
onClick={() => setUserMenuOpen(false)}
|
|
||||||
className="flex items-center gap-3 px-3 py-2.5 text-body-sm text-accent hover:bg-accent/10 rounded-lg transition-colors"
|
|
||||||
>
|
|
||||||
<Shield className="w-4 h-4" />
|
|
||||||
Admin Panel
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
<Link
|
|
||||||
href="/settings"
|
|
||||||
onClick={() => setUserMenuOpen(false)}
|
|
||||||
className="flex items-center gap-3 px-3 py-2.5 text-body-sm text-foreground-muted hover:text-foreground hover:bg-foreground/5 rounded-lg transition-colors"
|
|
||||||
>
|
|
||||||
<Settings className="w-4 h-4" />
|
|
||||||
Settings
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Logout */}
|
|
||||||
<div className="p-2 border-t border-border">
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
logout()
|
|
||||||
setUserMenuOpen(false)
|
|
||||||
}}
|
|
||||||
className="flex items-center gap-3 w-full px-3 py-2.5 text-body-sm text-foreground-muted hover:text-foreground hover:bg-foreground/5 rounded-lg transition-colors"
|
|
||||||
>
|
|
||||||
<LogOut className="w-4 h-4" />
|
|
||||||
Sign out
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
@ -290,21 +142,8 @@ export function Header() {
|
|||||||
{mobileMenuOpen && (
|
{mobileMenuOpen && (
|
||||||
<div className="sm:hidden border-t border-border bg-background/95 backdrop-blur-xl">
|
<div className="sm:hidden border-t border-border bg-background/95 backdrop-blur-xl">
|
||||||
<nav className="px-4 py-4 space-y-1">
|
<nav className="px-4 py-4 space-y-1">
|
||||||
{isAuthenticated && (
|
|
||||||
<>
|
|
||||||
{/* User Info on Mobile */}
|
|
||||||
<div className="px-4 py-3 mb-3 bg-foreground/5 rounded-xl">
|
|
||||||
<p className="text-body-sm font-medium text-foreground truncate">{user?.name || user?.email}</p>
|
|
||||||
<div className="flex items-center gap-2 mt-1">
|
|
||||||
<span className="text-ui-xs px-2 py-0.5 bg-accent/10 text-accent rounded-full font-medium">{tierName}</span>
|
|
||||||
<span className="text-ui-xs text-foreground-subtle">{subscription?.domains_used || 0}/{subscription?.domain_limit || 5} domains</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Main Nav */}
|
{/* Main Nav */}
|
||||||
{navItems.map((item) => (
|
{publicNavItems.map((item) => (
|
||||||
<Link
|
<Link
|
||||||
key={item.href}
|
key={item.href}
|
||||||
href={item.href}
|
href={item.href}
|
||||||
@ -320,43 +159,21 @@ export function Header() {
|
|||||||
</Link>
|
</Link>
|
||||||
))}
|
))}
|
||||||
|
|
||||||
|
<div className="my-3 border-t border-border" />
|
||||||
|
|
||||||
{isAuthenticated ? (
|
{isAuthenticated ? (
|
||||||
<>
|
<>
|
||||||
<div className="my-3 border-t border-border" />
|
|
||||||
{user?.is_admin && (
|
|
||||||
<Link
|
|
||||||
href="/admin"
|
|
||||||
onClick={() => setMobileMenuOpen(false)}
|
|
||||||
className="flex items-center gap-3 px-4 py-3 text-body-sm text-accent
|
|
||||||
hover:bg-accent/10 rounded-xl transition-all duration-200"
|
|
||||||
>
|
|
||||||
<Shield className="w-5 h-5" />
|
|
||||||
<span>Admin Panel</span>
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
<Link
|
<Link
|
||||||
href="/settings"
|
href="/dashboard"
|
||||||
className="flex items-center gap-3 px-4 py-3 text-body-sm text-foreground-muted
|
className="flex items-center gap-3 px-4 py-3 text-body-sm text-center bg-accent text-background
|
||||||
hover:text-foreground hover:bg-foreground/5 rounded-xl transition-all duration-200"
|
rounded-xl font-medium hover:bg-accent-hover transition-all duration-200"
|
||||||
>
|
>
|
||||||
<Settings className="w-5 h-5" />
|
<LayoutDashboard className="w-5 h-5" />
|
||||||
<span>Settings</span>
|
<span>Command Center</span>
|
||||||
</Link>
|
</Link>
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
logout()
|
|
||||||
setMobileMenuOpen(false)
|
|
||||||
}}
|
|
||||||
className="flex items-center gap-3 w-full px-4 py-3 text-body-sm text-foreground-muted
|
|
||||||
hover:text-foreground hover:bg-foreground/5 rounded-xl transition-all duration-200"
|
|
||||||
>
|
|
||||||
<LogOut className="w-5 h-5" />
|
|
||||||
<span>Sign Out</span>
|
|
||||||
</button>
|
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<div className="my-3 border-t border-border" />
|
|
||||||
<Link
|
<Link
|
||||||
href="/login"
|
href="/login"
|
||||||
className="block px-4 py-3 text-body-sm text-foreground-muted
|
className="block px-4 py-3 text-body-sm text-foreground-muted
|
||||||
|
|||||||
280
frontend/src/components/Sidebar.tsx
Normal file
280
frontend/src/components/Sidebar.tsx
Normal file
@ -0,0 +1,280 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import Link from 'next/link'
|
||||||
|
import { usePathname } from 'next/navigation'
|
||||||
|
import { useStore } from '@/lib/store'
|
||||||
|
import {
|
||||||
|
LayoutDashboard,
|
||||||
|
Eye,
|
||||||
|
Briefcase,
|
||||||
|
Gavel,
|
||||||
|
TrendingUp,
|
||||||
|
Settings,
|
||||||
|
ChevronLeft,
|
||||||
|
ChevronRight,
|
||||||
|
LogOut,
|
||||||
|
Crown,
|
||||||
|
Zap,
|
||||||
|
Shield,
|
||||||
|
CreditCard,
|
||||||
|
} from 'lucide-react'
|
||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import clsx from 'clsx'
|
||||||
|
|
||||||
|
interface SidebarProps {
|
||||||
|
collapsed?: boolean
|
||||||
|
onCollapsedChange?: (collapsed: boolean) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: SidebarProps) {
|
||||||
|
const pathname = usePathname()
|
||||||
|
const { user, logout, subscription, domains } = useStore()
|
||||||
|
|
||||||
|
// Internal state for uncontrolled mode
|
||||||
|
const [internalCollapsed, setInternalCollapsed] = useState(false)
|
||||||
|
|
||||||
|
// Use controlled or uncontrolled state
|
||||||
|
const collapsed = controlledCollapsed ?? internalCollapsed
|
||||||
|
const setCollapsed = onCollapsedChange ?? setInternalCollapsed
|
||||||
|
|
||||||
|
// Load collapsed state from localStorage
|
||||||
|
useEffect(() => {
|
||||||
|
const saved = localStorage.getItem('sidebar-collapsed')
|
||||||
|
if (saved) {
|
||||||
|
setCollapsed(saved === 'true')
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
// Save collapsed state
|
||||||
|
const toggleCollapsed = () => {
|
||||||
|
const newState = !collapsed
|
||||||
|
setCollapsed(newState)
|
||||||
|
localStorage.setItem('sidebar-collapsed', String(newState))
|
||||||
|
}
|
||||||
|
|
||||||
|
const tierName = subscription?.tier_name || subscription?.tier || 'Scout'
|
||||||
|
const tierIcon = tierName === 'Tycoon' ? Crown : tierName === 'Trader' ? TrendingUp : Zap
|
||||||
|
const TierIcon = tierIcon
|
||||||
|
|
||||||
|
// Navigation items
|
||||||
|
const navItems = [
|
||||||
|
{
|
||||||
|
href: '/dashboard',
|
||||||
|
label: 'Dashboard',
|
||||||
|
icon: LayoutDashboard,
|
||||||
|
badge: null,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: '/watchlist',
|
||||||
|
label: 'Watchlist',
|
||||||
|
icon: Eye,
|
||||||
|
badge: domains?.filter(d => d.is_available).length || null,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: '/portfolio',
|
||||||
|
label: 'Portfolio',
|
||||||
|
icon: Briefcase,
|
||||||
|
badge: null,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: '/market',
|
||||||
|
label: 'Market',
|
||||||
|
icon: Gavel,
|
||||||
|
badge: null,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: '/intelligence',
|
||||||
|
label: 'Intelligence',
|
||||||
|
icon: TrendingUp,
|
||||||
|
badge: null,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
const bottomItems = [
|
||||||
|
{ href: '/settings', label: 'Settings', icon: Settings },
|
||||||
|
]
|
||||||
|
|
||||||
|
const isActive = (href: string) => {
|
||||||
|
if (href === '/dashboard') return pathname === '/dashboard'
|
||||||
|
return pathname.startsWith(href)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<aside
|
||||||
|
className={clsx(
|
||||||
|
"fixed left-0 top-0 bottom-0 z-40 flex 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]"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{/* Logo */}
|
||||||
|
<div className={clsx(
|
||||||
|
"h-16 sm:h-20 flex items-center border-b border-border/50",
|
||||||
|
collapsed ? "justify-center px-2" : "px-5"
|
||||||
|
)}>
|
||||||
|
<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>
|
||||||
|
{!collapsed && (
|
||||||
|
<span
|
||||||
|
className="text-lg font-bold tracking-[0.1em] text-foreground"
|
||||||
|
style={{ fontFamily: 'var(--font-display), Playfair Display, Georgia, serif' }}
|
||||||
|
>
|
||||||
|
POUNCE
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main Navigation */}
|
||||||
|
<nav className="flex-1 py-4 px-3 space-y-1 overflow-y-auto">
|
||||||
|
{navItems.map((item) => (
|
||||||
|
<Link
|
||||||
|
key={item.href}
|
||||||
|
href={item.href}
|
||||||
|
className={clsx(
|
||||||
|
"group flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-200",
|
||||||
|
isActive(item.href)
|
||||||
|
? "bg-accent/10 text-foreground"
|
||||||
|
: "text-foreground-muted hover:text-foreground hover:bg-foreground/5"
|
||||||
|
)}
|
||||||
|
title={collapsed ? item.label : undefined}
|
||||||
|
>
|
||||||
|
<div className="relative">
|
||||||
|
<item.icon className={clsx(
|
||||||
|
"w-5 h-5 transition-colors",
|
||||||
|
isActive(item.href) ? "text-accent" : "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">
|
||||||
|
{item.badge > 9 ? '9+' : item.badge}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{!collapsed && (
|
||||||
|
<span className={clsx(
|
||||||
|
"text-sm font-medium transition-colors",
|
||||||
|
isActive(item.href) && "text-foreground"
|
||||||
|
)}>
|
||||||
|
{item.label}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{/* Bottom Section */}
|
||||||
|
<div className="border-t border-border/50 py-4 px-3 space-y-1">
|
||||||
|
{/* Admin Link */}
|
||||||
|
{user?.is_admin && (
|
||||||
|
<Link
|
||||||
|
href="/admin"
|
||||||
|
className={clsx(
|
||||||
|
"group flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-200",
|
||||||
|
pathname.startsWith('/admin')
|
||||||
|
? "bg-accent/10 text-accent"
|
||||||
|
: "text-accent/70 hover:text-accent hover:bg-accent/5"
|
||||||
|
)}
|
||||||
|
title={collapsed ? "Admin Panel" : undefined}
|
||||||
|
>
|
||||||
|
<Shield className="w-5 h-5" />
|
||||||
|
{!collapsed && <span className="text-sm font-medium">Admin Panel</span>}
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Settings */}
|
||||||
|
{bottomItems.map((item) => (
|
||||||
|
<Link
|
||||||
|
key={item.href}
|
||||||
|
href={item.href}
|
||||||
|
className={clsx(
|
||||||
|
"group flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-200",
|
||||||
|
isActive(item.href)
|
||||||
|
? "bg-foreground/10 text-foreground"
|
||||||
|
: "text-foreground-muted hover:text-foreground hover:bg-foreground/5"
|
||||||
|
)}
|
||||||
|
title={collapsed ? item.label : undefined}
|
||||||
|
>
|
||||||
|
<item.icon className="w-5 h-5" />
|
||||||
|
{!collapsed && <span className="text-sm font-medium">{item.label}</span>}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* User Info */}
|
||||||
|
<div className={clsx(
|
||||||
|
"mt-4 p-3 bg-foreground/5 rounded-xl",
|
||||||
|
collapsed && "p-2"
|
||||||
|
)}>
|
||||||
|
{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>
|
||||||
|
</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>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<p className="text-sm font-medium text-foreground truncate">
|
||||||
|
{user?.name || user?.email?.split('@')[0]}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-foreground-muted">{tierName}</p>
|
||||||
|
</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>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Logout */}
|
||||||
|
<button
|
||||||
|
onClick={logout}
|
||||||
|
className={clsx(
|
||||||
|
"w-full flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-200",
|
||||||
|
"text-foreground-muted hover:text-foreground hover:bg-foreground/5"
|
||||||
|
)}
|
||||||
|
title={collapsed ? "Sign out" : undefined}
|
||||||
|
>
|
||||||
|
<LogOut className="w-5 h-5" />
|
||||||
|
{!collapsed && <span className="text-sm font-medium">Sign out</span>}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Collapse Toggle */}
|
||||||
|
<button
|
||||||
|
onClick={toggleCollapsed}
|
||||||
|
className={clsx(
|
||||||
|
"absolute -right-3 top-24 w-6 h-6 bg-background-secondary border border-border rounded-full",
|
||||||
|
"flex items-center justify-center text-foreground-muted hover:text-foreground",
|
||||||
|
"hover:bg-foreground/5 transition-all duration-200 shadow-sm"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{collapsed ? (
|
||||||
|
<ChevronRight className="w-3.5 h-3.5" />
|
||||||
|
) : (
|
||||||
|
<ChevronLeft className="w-3.5 h-3.5" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</aside>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
Reference in New Issue
Block a user