b3e6c9aef6
STRUCTURE: - Public pages: /auctions, /intelligence (with Header/Footer, no login needed) - Command Center: /command/* (with Sidebar, login required) - /command/dashboard - /command/watchlist - /command/portfolio - /command/auctions - /command/intelligence - /command/settings CHANGES: - Created new /command directory structure - Public auctions page: shows all auction data, CTA for login - Public intelligence page: shows TLD data, CTA for login - Updated Sidebar navigation to point to /command/* - Updated all internal links (Header, Footer, AdminLayout) - Updated login redirect to /command/dashboard - Updated keyboard shortcuts to use /command paths - Added /command redirect to /command/dashboard
426 lines
15 KiB
TypeScript
426 lines
15 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { useStore } from '@/lib/store'
|
|
import { api } from '@/lib/api'
|
|
import { CommandCenterLayout } from '@/components/CommandCenterLayout'
|
|
import { PremiumTable, Badge, PlatformBadge, StatCard, PageContainer } from '@/components/PremiumTable'
|
|
import {
|
|
Clock,
|
|
ExternalLink,
|
|
Search,
|
|
Flame,
|
|
Timer,
|
|
Gavel,
|
|
ChevronUp,
|
|
ChevronDown,
|
|
ChevronsUpDown,
|
|
DollarSign,
|
|
RefreshCw,
|
|
Target,
|
|
X,
|
|
TrendingUp,
|
|
Loader2,
|
|
} from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import clsx from 'clsx'
|
|
|
|
interface Auction {
|
|
domain: string
|
|
platform: string
|
|
platform_url: string
|
|
current_bid: number
|
|
currency: string
|
|
num_bids: number
|
|
end_time: string
|
|
time_remaining: string
|
|
buy_now_price: number | null
|
|
reserve_met: boolean | null
|
|
traffic: number | null
|
|
age_years: number | null
|
|
tld: string
|
|
affiliate_url: string
|
|
}
|
|
|
|
interface Opportunity {
|
|
auction: Auction
|
|
analysis: {
|
|
opportunity_score: number
|
|
urgency?: string
|
|
competition?: string
|
|
price_range?: string
|
|
recommendation: string
|
|
reasoning?: string
|
|
}
|
|
}
|
|
|
|
type TabType = 'all' | 'ending' | 'hot' | 'opportunities'
|
|
type SortField = 'ending' | 'bid_asc' | 'bid_desc' | 'bids'
|
|
|
|
const PLATFORMS = [
|
|
{ id: 'All', name: 'All Sources' },
|
|
{ id: 'GoDaddy', name: 'GoDaddy' },
|
|
{ id: 'Sedo', name: 'Sedo' },
|
|
{ id: 'NameJet', name: 'NameJet' },
|
|
{ id: 'DropCatch', name: 'DropCatch' },
|
|
]
|
|
|
|
export default function AuctionsPage() {
|
|
const { isAuthenticated, subscription } = useStore()
|
|
|
|
const [allAuctions, setAllAuctions] = useState<Auction[]>([])
|
|
const [endingSoon, setEndingSoon] = useState<Auction[]>([])
|
|
const [hotAuctions, setHotAuctions] = useState<Auction[]>([])
|
|
const [opportunities, setOpportunities] = useState<Opportunity[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [refreshing, setRefreshing] = useState(false)
|
|
const [activeTab, setActiveTab] = useState<TabType>('all')
|
|
const [sortBy, setSortBy] = useState<SortField>('ending')
|
|
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc')
|
|
|
|
// Filters
|
|
const [searchQuery, setSearchQuery] = useState('')
|
|
const [selectedPlatform, setSelectedPlatform] = useState('All')
|
|
const [maxBid, setMaxBid] = useState<string>('')
|
|
|
|
useEffect(() => {
|
|
loadData()
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (isAuthenticated && opportunities.length === 0) {
|
|
loadOpportunities()
|
|
}
|
|
}, [isAuthenticated])
|
|
|
|
const loadOpportunities = async () => {
|
|
try {
|
|
const oppData = await api.getAuctionOpportunities()
|
|
setOpportunities(oppData.opportunities || [])
|
|
} catch (e) {
|
|
console.error('Failed to load opportunities:', e)
|
|
}
|
|
}
|
|
|
|
const loadData = async () => {
|
|
setLoading(true)
|
|
try {
|
|
const [auctionsData, hotData, endingData] = await Promise.all([
|
|
api.getAuctions(),
|
|
api.getHotAuctions(50),
|
|
api.getEndingSoonAuctions(24, 50),
|
|
])
|
|
|
|
setAllAuctions(auctionsData.auctions || [])
|
|
setHotAuctions(hotData || [])
|
|
setEndingSoon(endingData || [])
|
|
|
|
if (isAuthenticated) {
|
|
await loadOpportunities()
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to load auction data:', error)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const handleRefresh = async () => {
|
|
setRefreshing(true)
|
|
await loadData()
|
|
setRefreshing(false)
|
|
}
|
|
|
|
const formatCurrency = (value: number) => {
|
|
return new Intl.NumberFormat('en-US', {
|
|
style: 'currency',
|
|
currency: 'USD',
|
|
minimumFractionDigits: 0,
|
|
maximumFractionDigits: 0,
|
|
}).format(value)
|
|
}
|
|
|
|
const getCurrentAuctions = (): Auction[] => {
|
|
switch (activeTab) {
|
|
case 'ending': return endingSoon
|
|
case 'hot': return hotAuctions
|
|
case 'opportunities': return opportunities.map(o => o.auction)
|
|
default: return allAuctions
|
|
}
|
|
}
|
|
|
|
const getOpportunityData = (domain: string) => {
|
|
if (activeTab !== 'opportunities') return null
|
|
return opportunities.find(o => o.auction.domain === domain)?.analysis
|
|
}
|
|
|
|
const filteredAuctions = getCurrentAuctions().filter(auction => {
|
|
if (searchQuery && !auction.domain.toLowerCase().includes(searchQuery.toLowerCase())) return false
|
|
if (selectedPlatform !== 'All' && auction.platform !== selectedPlatform) return false
|
|
if (maxBid && auction.current_bid > parseFloat(maxBid)) return false
|
|
return true
|
|
})
|
|
|
|
const sortedAuctions = activeTab === 'opportunities'
|
|
? filteredAuctions
|
|
: [...filteredAuctions].sort((a, b) => {
|
|
const mult = sortDirection === 'asc' ? 1 : -1
|
|
switch (sortBy) {
|
|
case 'ending':
|
|
return mult * (new Date(a.end_time).getTime() - new Date(b.end_time).getTime())
|
|
case 'bid_asc':
|
|
case 'bid_desc':
|
|
return mult * (a.current_bid - b.current_bid)
|
|
case 'bids':
|
|
return mult * (b.num_bids - a.num_bids)
|
|
default:
|
|
return 0
|
|
}
|
|
})
|
|
|
|
const getTimeColor = (timeRemaining: string) => {
|
|
if (timeRemaining.includes('m') && !timeRemaining.includes('h') && !timeRemaining.includes('d')) return 'text-red-400'
|
|
if (timeRemaining.includes('h') && parseInt(timeRemaining) < 2) return 'text-amber-400'
|
|
return 'text-foreground-muted'
|
|
}
|
|
|
|
const handleSort = (field: SortField) => {
|
|
if (sortBy === field) {
|
|
setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc')
|
|
} else {
|
|
setSortBy(field)
|
|
setSortDirection('asc')
|
|
}
|
|
}
|
|
|
|
// Dynamic subtitle
|
|
const getSubtitle = () => {
|
|
if (loading) return 'Loading live auctions...'
|
|
const total = allAuctions.length
|
|
if (total === 0) return 'No active auctions found'
|
|
return `${total.toLocaleString()} live auctions across 4 platforms`
|
|
}
|
|
|
|
return (
|
|
<CommandCenterLayout
|
|
title="Auctions"
|
|
subtitle={getSubtitle()}
|
|
actions={
|
|
<button
|
|
onClick={handleRefresh}
|
|
disabled={refreshing}
|
|
className="flex items-center gap-2 px-4 py-2 text-sm text-foreground-muted hover:text-foreground
|
|
hover:bg-foreground/5 rounded-lg transition-all disabled:opacity-50"
|
|
>
|
|
<RefreshCw className={clsx("w-4 h-4", refreshing && "animate-spin")} />
|
|
<span className="hidden sm:inline">Refresh</span>
|
|
</button>
|
|
}
|
|
>
|
|
<PageContainer>
|
|
{/* Stats */}
|
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<StatCard title="All Auctions" value={allAuctions.length} icon={Gavel} />
|
|
<StatCard title="Ending Soon" value={endingSoon.length} icon={Timer} accent />
|
|
<StatCard title="Hot Auctions" value={hotAuctions.length} subtitle="20+ bids" icon={Flame} />
|
|
<StatCard title="Opportunities" value={opportunities.length} icon={Target} />
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<div className="flex flex-wrap items-center gap-2 p-1.5 bg-background-secondary/30 border border-border/30 rounded-2xl w-fit">
|
|
{[
|
|
{ id: 'all' as const, label: 'All', icon: Gavel, count: allAuctions.length },
|
|
{ id: 'ending' as const, label: 'Ending Soon', icon: Timer, count: endingSoon.length, color: 'warning' },
|
|
{ id: 'hot' as const, label: 'Hot', icon: Flame, count: hotAuctions.length },
|
|
{ id: 'opportunities' as const, label: 'Opportunities', icon: Target, count: opportunities.length },
|
|
].map((tab) => (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setActiveTab(tab.id)}
|
|
className={clsx(
|
|
"flex items-center gap-2 px-4 py-2.5 text-sm font-medium rounded-xl transition-all",
|
|
activeTab === tab.id
|
|
? tab.color === 'warning'
|
|
? "bg-amber-500 text-background"
|
|
: "bg-gradient-to-r from-accent to-accent/80 text-background shadow-lg shadow-accent/20"
|
|
: "text-foreground-muted hover:text-foreground hover:bg-foreground/5"
|
|
)}
|
|
>
|
|
<tab.icon className="w-4 h-4" />
|
|
<span className="hidden sm:inline">{tab.label}</span>
|
|
<span className={clsx(
|
|
"text-xs px-1.5 py-0.5 rounded",
|
|
activeTab === tab.id ? "bg-background/20" : "bg-foreground/10"
|
|
)}>{tab.count}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Filters */}
|
|
<div className="flex flex-wrap gap-3">
|
|
<div className="relative flex-1 min-w-[200px] max-w-md">
|
|
<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-foreground-subtle" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search domains..."
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="w-full pl-11 pr-10 py-3 bg-background-secondary/50 border border-border/50 rounded-xl
|
|
text-sm text-foreground placeholder:text-foreground-subtle
|
|
focus:outline-none focus:border-accent/50 transition-all"
|
|
/>
|
|
{searchQuery && (
|
|
<button onClick={() => setSearchQuery('')} className="absolute right-4 top-1/2 -translate-y-1/2 text-foreground-subtle hover:text-foreground">
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
<select
|
|
value={selectedPlatform}
|
|
onChange={(e) => setSelectedPlatform(e.target.value)}
|
|
className="px-4 py-3 bg-background-secondary/50 border border-border/50 rounded-xl
|
|
text-sm text-foreground cursor-pointer focus:outline-none focus:border-accent/50"
|
|
>
|
|
{PLATFORMS.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
|
|
</select>
|
|
<div className="relative">
|
|
<DollarSign className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-foreground-subtle" />
|
|
<input
|
|
type="number"
|
|
placeholder="Max bid"
|
|
value={maxBid}
|
|
onChange={(e) => setMaxBid(e.target.value)}
|
|
className="w-32 pl-10 pr-4 py-3 bg-background-secondary/50 border border-border/50 rounded-xl
|
|
text-sm text-foreground placeholder:text-foreground-subtle
|
|
focus:outline-none focus:border-accent/50"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Table */}
|
|
<PremiumTable
|
|
data={sortedAuctions}
|
|
keyExtractor={(a) => `${a.domain}-${a.platform}`}
|
|
loading={loading}
|
|
sortBy={sortBy}
|
|
sortDirection={sortDirection}
|
|
onSort={(key) => handleSort(key as SortField)}
|
|
emptyIcon={<Gavel className="w-12 h-12 text-foreground-subtle" />}
|
|
emptyTitle={searchQuery ? `No auctions matching "${searchQuery}"` : "No auctions found"}
|
|
emptyDescription="Try adjusting your filters or check back later"
|
|
columns={[
|
|
{
|
|
key: 'domain',
|
|
header: 'Domain',
|
|
sortable: true,
|
|
render: (a) => (
|
|
<div>
|
|
<a
|
|
href={a.affiliate_url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="font-mono font-medium text-foreground hover:text-accent transition-colors"
|
|
>
|
|
{a.domain}
|
|
</a>
|
|
<div className="flex items-center gap-2 mt-1 lg:hidden">
|
|
<PlatformBadge platform={a.platform} />
|
|
{a.age_years && <span className="text-xs text-foreground-subtle">{a.age_years}y</span>}
|
|
</div>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
key: 'platform',
|
|
header: 'Platform',
|
|
hideOnMobile: true,
|
|
render: (a) => (
|
|
<div className="space-y-1">
|
|
<PlatformBadge platform={a.platform} />
|
|
{a.age_years && (
|
|
<span className="text-xs text-foreground-subtle flex items-center gap-1">
|
|
<Clock className="w-3 h-3" /> {a.age_years}y
|
|
</span>
|
|
)}
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
key: 'bid_asc',
|
|
header: 'Bid',
|
|
sortable: true,
|
|
align: 'right',
|
|
render: (a) => (
|
|
<div>
|
|
<span className="font-medium text-foreground">{formatCurrency(a.current_bid)}</span>
|
|
{a.buy_now_price && (
|
|
<p className="text-xs text-accent">Buy: {formatCurrency(a.buy_now_price)}</p>
|
|
)}
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
key: 'bids',
|
|
header: 'Bids',
|
|
sortable: true,
|
|
align: 'right',
|
|
hideOnMobile: true,
|
|
render: (a) => (
|
|
<span className={clsx(
|
|
"font-medium flex items-center justify-end gap-1",
|
|
a.num_bids >= 20 ? "text-accent" : a.num_bids >= 10 ? "text-amber-400" : "text-foreground-muted"
|
|
)}>
|
|
{a.num_bids}
|
|
{a.num_bids >= 20 && <Flame className="w-3 h-3" />}
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
key: 'ending',
|
|
header: 'Time Left',
|
|
sortable: true,
|
|
align: 'right',
|
|
hideOnMobile: true,
|
|
render: (a) => (
|
|
<span className={clsx("font-medium", getTimeColor(a.time_remaining))}>
|
|
{a.time_remaining}
|
|
</span>
|
|
),
|
|
},
|
|
...(activeTab === 'opportunities' ? [{
|
|
key: 'score',
|
|
header: 'Score',
|
|
align: 'center' as const,
|
|
render: (a: Auction) => {
|
|
const oppData = getOpportunityData(a.domain)
|
|
if (!oppData) return null
|
|
return (
|
|
<span className="inline-flex items-center justify-center w-9 h-9 bg-accent/10 text-accent font-bold rounded-lg">
|
|
{oppData.opportunity_score}
|
|
</span>
|
|
)
|
|
},
|
|
}] : []),
|
|
{
|
|
key: 'action',
|
|
header: '',
|
|
align: 'right',
|
|
render: (a) => (
|
|
<a
|
|
href={a.affiliate_url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-1.5 px-4 py-2 bg-foreground text-background text-xs font-medium rounded-lg
|
|
hover:bg-foreground/90 transition-all opacity-70 group-hover:opacity-100"
|
|
>
|
|
Bid <ExternalLink className="w-3 h-3" />
|
|
</a>
|
|
),
|
|
},
|
|
]}
|
|
/>
|
|
</PageContainer>
|
|
</CommandCenterLayout>
|
|
)
|
|
}
|