feat: Sprint 3 - Terminal screens rebuild according to concept
RADAR: - Added Ticker component for live market movements - Implemented Universal Search (simultaneous Whois + Auctions check) - Quick Stats: 3 cards (Watching, Market, My Listings) - Recent Alerts with Activity Feed MARKET: - Unified table with Pounce Score (0-100, color-coded) - Hide Spam toggle (default: ON) - Pounce Direct Only toggle - Source badges (GoDaddy, Sedo, Pounce) - Status/Time column with Instant vs Countdown INTEL: - Added Cheapest At column (Best Registrar Finder) - Renamed to Intel - Inflation Monitor with renewal trap warnings WATCHLIST: - Tabs: Watching / My Portfolio - Health Status Ampel (🟢🟡🔴) - Improved status display LISTING: - Scout paywall (only Trader/Tycoon can list) - Tier limits: Trader=5, Tycoon=50 - DNS Verification workflow
This commit is contained in:
@ -271,6 +271,28 @@ export default function TLDPricingPage() {
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'cheapest',
|
||||
header: 'Cheapest At',
|
||||
align: 'left' as const,
|
||||
width: '140px',
|
||||
hideOnMobile: true,
|
||||
render: (tld: TLDData) => (
|
||||
tld.cheapest_registrar ? (
|
||||
<a
|
||||
href={tld.cheapest_registrar_url || '#'}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="text-xs text-accent hover:text-accent/80 hover:underline transition-colors"
|
||||
>
|
||||
{tld.cheapest_registrar}
|
||||
</a>
|
||||
) : (
|
||||
<span className="text-xs text-foreground-subtle">—</span>
|
||||
)
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'risk',
|
||||
header: 'Risk',
|
||||
@ -304,7 +326,7 @@ export default function TLDPricingPage() {
|
||||
|
||||
return (
|
||||
<TerminalLayout
|
||||
title="TLD Pricing"
|
||||
title="Intel"
|
||||
subtitle={subtitle}
|
||||
actions={
|
||||
<ActionButton onClick={handleRefresh} disabled={refreshing} variant="ghost" icon={refreshing ? Loader2 : RefreshCw}>
|
||||
|
||||
@ -227,9 +227,11 @@ export default function MyListingsPage() {
|
||||
return <Badge>{status}</Badge>
|
||||
}
|
||||
|
||||
// Tier limits as per concept: Scout = 0 (blocked), Trader = 5, Tycoon = 50
|
||||
const tier = subscription?.tier || 'scout'
|
||||
const limits = { scout: 2, trader: 10, tycoon: 50 }
|
||||
const maxListings = limits[tier as keyof typeof limits] || 2
|
||||
const limits = { scout: 0, trader: 5, tycoon: 50 }
|
||||
const maxListings = limits[tier as keyof typeof limits] || 0
|
||||
const canList = tier !== 'scout'
|
||||
|
||||
return (
|
||||
<TerminalLayout
|
||||
@ -258,6 +260,26 @@ export default function MyListingsPage() {
|
||||
}
|
||||
>
|
||||
<PageContainer>
|
||||
{/* Scout Paywall */}
|
||||
{!canList && (
|
||||
<div className="p-6 bg-gradient-to-br from-accent/10 to-transparent border border-accent/20 rounded-2xl text-center">
|
||||
<Shield className="w-12 h-12 text-accent mx-auto mb-4" />
|
||||
<h2 className="text-xl font-semibold text-foreground mb-2">Upgrade to List Domains</h2>
|
||||
<p className="text-foreground-muted mb-6 max-w-md mx-auto">
|
||||
The Pounce marketplace is exclusive to Trader and Tycoon members.
|
||||
List your domains, get verified, and sell directly to buyers with 0% commission.
|
||||
</p>
|
||||
<div className="flex items-center justify-center gap-4">
|
||||
<Link
|
||||
href="/pricing"
|
||||
className="inline-flex items-center gap-2 px-6 py-3 bg-accent text-background font-semibold rounded-xl hover:bg-accent/90 transition-all"
|
||||
>
|
||||
Upgrade to Trader • $9/mo
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Messages */}
|
||||
{error && (
|
||||
<div className="p-4 bg-red-500/10 border border-red-500/20 rounded-xl flex items-center gap-3">
|
||||
@ -275,7 +297,8 @@ export default function MyListingsPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Stats */}
|
||||
{/* Stats - only show if can list */}
|
||||
{canList && (
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<StatCard title="My Listings" value={`${listings.length}/${maxListings}`} icon={Tag} />
|
||||
<StatCard
|
||||
@ -295,9 +318,11 @@ export default function MyListingsPage() {
|
||||
icon={MessageSquare}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Listings */}
|
||||
{loading ? (
|
||||
{canList && (
|
||||
loading ? (
|
||||
<div className="flex items-center justify-center py-20">
|
||||
<Loader2 className="w-6 h-6 text-accent animate-spin" />
|
||||
</div>
|
||||
@ -405,6 +430,7 @@ export default function MyListingsPage() {
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</PageContainer>
|
||||
|
||||
|
||||
@ -1,17 +1,15 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState, useMemo, useCallback, memo } from 'react'
|
||||
import { useEffect, useState, useMemo, useCallback } from 'react'
|
||||
import { useStore } from '@/lib/store'
|
||||
import { api } from '@/lib/api'
|
||||
import { TerminalLayout } from '@/components/TerminalLayout'
|
||||
import {
|
||||
PremiumTable,
|
||||
Badge,
|
||||
PlatformBadge,
|
||||
StatCard,
|
||||
PageContainer,
|
||||
SearchInput,
|
||||
TabBar,
|
||||
FilterBar,
|
||||
SelectDropdown,
|
||||
ActionButton,
|
||||
@ -32,10 +30,15 @@ import {
|
||||
Crown,
|
||||
Plus,
|
||||
Check,
|
||||
Diamond,
|
||||
Store,
|
||||
Filter,
|
||||
ShoppingBag,
|
||||
} from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
import clsx from 'clsx'
|
||||
|
||||
// Types
|
||||
interface Auction {
|
||||
domain: string
|
||||
platform: string
|
||||
@ -53,72 +56,99 @@ interface Auction {
|
||||
affiliate_url: string
|
||||
}
|
||||
|
||||
interface Opportunity {
|
||||
auction: Auction
|
||||
analysis: {
|
||||
opportunity_score: number
|
||||
urgency?: string
|
||||
competition?: string
|
||||
price_range?: string
|
||||
recommendation: string
|
||||
reasoning?: string
|
||||
}
|
||||
interface PounceDirectListing {
|
||||
id: number
|
||||
domain: string
|
||||
price: number
|
||||
is_negotiable: boolean
|
||||
verified: boolean
|
||||
seller_name: string
|
||||
created_at: string
|
||||
}
|
||||
|
||||
type TabType = 'all' | 'ending' | 'hot' | 'opportunities'
|
||||
type SortField = 'ending' | 'bid_asc' | 'bid_desc' | 'bids' | 'score'
|
||||
type FilterPreset = 'all' | 'no-trash' | 'short' | 'high-value' | 'low-competition'
|
||||
interface MarketItem {
|
||||
type: 'auction' | 'direct'
|
||||
domain: string
|
||||
price: number
|
||||
source: string
|
||||
sourceIcon: 'godaddy' | 'sedo' | 'namejet' | 'dropcatch' | 'pounce'
|
||||
status: 'auction' | 'instant'
|
||||
timeRemaining?: string
|
||||
numBids?: number
|
||||
pounceScore: number
|
||||
affiliateUrl?: string
|
||||
isPounce: boolean
|
||||
verified?: boolean
|
||||
ageYears?: number
|
||||
}
|
||||
|
||||
const PLATFORMS = [
|
||||
{ value: 'All', label: 'All Sources' },
|
||||
{ value: 'GoDaddy', label: 'GoDaddy' },
|
||||
{ value: 'Sedo', label: 'Sedo' },
|
||||
{ value: 'NameJet', label: 'NameJet' },
|
||||
{ value: 'DropCatch', label: 'DropCatch' },
|
||||
type FilterType = 'all' | 'hide-spam' | 'pounce-only'
|
||||
|
||||
const PREMIUM_TLDS = ['com', 'io', 'ai', 'co', 'net', 'org', 'app', 'dev', 'ch']
|
||||
|
||||
const TLD_OPTIONS = [
|
||||
{ value: 'all', label: 'All TLDs' },
|
||||
{ value: 'com', label: '.com' },
|
||||
{ value: 'ai', label: '.ai' },
|
||||
{ value: 'io', label: '.io' },
|
||||
{ value: 'ch', label: '.ch' },
|
||||
{ value: 'net', label: '.net' },
|
||||
{ value: 'org', label: '.org' },
|
||||
]
|
||||
|
||||
const FILTER_PRESETS: { id: FilterPreset, label: string, icon: typeof Gavel, description: string, proOnly?: boolean }[] = [
|
||||
{ id: 'all', label: 'All', icon: Gavel, description: 'Show all auctions' },
|
||||
{ id: 'no-trash', label: 'No Trash', icon: Sparkles, description: 'Clean domains only (no spam)', proOnly: true },
|
||||
{ id: 'short', label: 'Short', icon: Zap, description: '4-letter domains or less' },
|
||||
{ id: 'high-value', label: 'High Value', icon: Crown, description: 'Premium TLDs with high activity', proOnly: true },
|
||||
{ id: 'low-competition', label: 'Low Competition', icon: Target, description: 'Under 5 bids' },
|
||||
const PRICE_OPTIONS = [
|
||||
{ value: 'all', label: 'Any Price' },
|
||||
{ value: '100', label: '< $100' },
|
||||
{ value: '500', label: '< $500' },
|
||||
{ value: '1000', label: '< $1,000' },
|
||||
{ value: '5000', label: '< $5,000' },
|
||||
{ value: '10000', label: '< $10,000' },
|
||||
]
|
||||
|
||||
const PREMIUM_TLDS = ['com', 'io', 'ai', 'co', 'net', 'org', 'app', 'dev']
|
||||
// Calculate Pounce Score (0-100)
|
||||
function calculatePounceScore(domain: string, tld: string, numBids?: number, ageYears?: number): number {
|
||||
let score = 50
|
||||
const name = domain.split('.')[0]
|
||||
|
||||
// Domain length bonus
|
||||
if (name.length <= 3) score += 30
|
||||
else if (name.length <= 4) score += 25
|
||||
else if (name.length <= 6) score += 15
|
||||
else if (name.length <= 8) score += 5
|
||||
|
||||
// TLD bonus
|
||||
if (['com', 'io', 'ai'].includes(tld)) score += 15
|
||||
else if (['co', 'net', 'org', 'ch'].includes(tld)) score += 10
|
||||
else if (['app', 'dev'].includes(tld)) score += 5
|
||||
|
||||
// Age bonus
|
||||
if (ageYears && ageYears > 15) score += 15
|
||||
else if (ageYears && ageYears > 10) score += 10
|
||||
else if (ageYears && ageYears > 5) score += 5
|
||||
|
||||
// Bidding activity (demand indicator)
|
||||
if (numBids && numBids >= 30) score += 10
|
||||
else if (numBids && numBids >= 15) score += 5
|
||||
|
||||
// Spam penalty
|
||||
if (name.includes('-')) score -= 20
|
||||
if (name.length > 4 && /\d/.test(name)) score -= 15
|
||||
if (name.length > 15) score -= 15
|
||||
|
||||
return Math.max(0, Math.min(100, score))
|
||||
}
|
||||
|
||||
// Pure functions (no hooks needed)
|
||||
function isCleanDomain(auction: Auction): boolean {
|
||||
const name = auction.domain.split('.')[0]
|
||||
// Check if domain is "clean" (no spam indicators)
|
||||
function isCleanDomain(domain: string, tld: string): boolean {
|
||||
const name = domain.split('.')[0]
|
||||
if (name.includes('-')) return false
|
||||
if (name.length > 4 && /\d/.test(name)) return false
|
||||
if (name.length > 12) return false
|
||||
if (!PREMIUM_TLDS.includes(auction.tld)) return false
|
||||
if (!PREMIUM_TLDS.includes(tld)) return false
|
||||
return true
|
||||
}
|
||||
|
||||
function calculateDealScore(auction: Auction): number {
|
||||
let score = 50
|
||||
const name = auction.domain.split('.')[0]
|
||||
if (name.length <= 4) score += 25
|
||||
else if (name.length <= 6) score += 15
|
||||
else if (name.length <= 8) score += 5
|
||||
if (['com', 'io', 'ai'].includes(auction.tld)) score += 15
|
||||
else if (['co', 'net', 'org'].includes(auction.tld)) score += 5
|
||||
if (auction.age_years && auction.age_years > 10) score += 15
|
||||
else if (auction.age_years && auction.age_years > 5) score += 10
|
||||
if (auction.num_bids >= 20) score += 10
|
||||
else if (auction.num_bids >= 10) score += 5
|
||||
if (isCleanDomain(auction)) score += 10
|
||||
return Math.min(score, 100)
|
||||
}
|
||||
|
||||
function getTimeColor(timeRemaining: string): 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'
|
||||
}
|
||||
|
||||
// Format currency
|
||||
const formatCurrency = (value: number) => {
|
||||
return new Intl.NumberFormat('en-US', {
|
||||
style: 'currency',
|
||||
@ -128,74 +158,85 @@ const formatCurrency = (value: number) => {
|
||||
}).format(value)
|
||||
}
|
||||
|
||||
export default function AuctionsPage() {
|
||||
// Get Pounce Score color
|
||||
function getScoreColor(score: number): string {
|
||||
if (score >= 80) return 'text-accent bg-accent/20'
|
||||
if (score >= 40) return 'text-amber-400 bg-amber-400/20'
|
||||
return 'text-red-400 bg-red-400/20'
|
||||
}
|
||||
|
||||
// Source Badge Component
|
||||
function SourceBadge({ source, isPounce }: { source: string; isPounce: boolean }) {
|
||||
if (isPounce) {
|
||||
return (
|
||||
<div className="flex items-center gap-1.5 px-2 py-1 bg-accent/10 border border-accent/30 rounded-lg">
|
||||
<Diamond className="w-3.5 h-3.5 text-accent" />
|
||||
<span className="text-xs font-semibold text-accent">Pounce</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const colors: Record<string, string> = {
|
||||
GoDaddy: 'text-orange-400 bg-orange-400/10 border-orange-400/20',
|
||||
Sedo: 'text-blue-400 bg-blue-400/10 border-blue-400/20',
|
||||
NameJet: 'text-purple-400 bg-purple-400/10 border-purple-400/20',
|
||||
DropCatch: 'text-cyan-400 bg-cyan-400/10 border-cyan-400/20',
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={clsx('flex items-center gap-1.5 px-2 py-1 border rounded-lg', colors[source] || 'text-foreground-muted bg-foreground/5 border-border/30')}>
|
||||
<Store className="w-3.5 h-3.5" />
|
||||
<span className="text-xs font-medium">{source}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function MarketPage() {
|
||||
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 [auctions, setAuctions] = useState<Auction[]>([])
|
||||
const [directListings, setDirectListings] = useState<PounceDirectListing[]>([])
|
||||
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 [hideSpam, setHideSpam] = useState(true) // Default: ON (as per concept)
|
||||
const [pounceOnly, setPounceOnly] = useState(false)
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
const [selectedPlatform, setSelectedPlatform] = useState('All')
|
||||
const [maxBid, setMaxBid] = useState('')
|
||||
const [filterPreset, setFilterPreset] = useState<FilterPreset>('all')
|
||||
const [selectedTld, setSelectedTld] = useState('all')
|
||||
const [selectedPrice, setSelectedPrice] = useState('all')
|
||||
const [trackedDomains, setTrackedDomains] = useState<Set<string>>(new Set())
|
||||
const [trackingInProgress, setTrackingInProgress] = useState<string | null>(null)
|
||||
|
||||
const isPaidUser = subscription?.tier === 'trader' || subscription?.tier === 'tycoon'
|
||||
|
||||
// Data loading
|
||||
// Load data
|
||||
const loadData = useCallback(async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const [auctionsData, hotData, endingData] = await Promise.all([
|
||||
api.getAuctions(),
|
||||
api.getHotAuctions(50),
|
||||
api.getEndingSoonAuctions(24, 50),
|
||||
const [auctionsData, listingsData] = await Promise.all([
|
||||
api.getAuctions().catch(() => ({ auctions: [] })),
|
||||
api.getMarketplaceListings().catch(() => ({ listings: [] })),
|
||||
])
|
||||
|
||||
setAllAuctions(auctionsData.auctions || [])
|
||||
setHotAuctions(hotData || [])
|
||||
setEndingSoon(endingData || [])
|
||||
setAuctions(auctionsData.auctions || [])
|
||||
setDirectListings(listingsData.listings || [])
|
||||
} catch (error) {
|
||||
console.error('Failed to load auction data:', error)
|
||||
console.error('Failed to load market data:', error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const loadOpportunities = useCallback(async () => {
|
||||
try {
|
||||
const oppData = await api.getAuctionOpportunities()
|
||||
setOpportunities(oppData.opportunities || [])
|
||||
} catch (e) {
|
||||
console.error('Failed to load opportunities:', e)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
loadData()
|
||||
}, [loadData])
|
||||
|
||||
useEffect(() => {
|
||||
if (isAuthenticated && opportunities.length === 0) {
|
||||
loadOpportunities()
|
||||
}
|
||||
}, [isAuthenticated, opportunities.length, loadOpportunities])
|
||||
|
||||
const handleRefresh = useCallback(async () => {
|
||||
setRefreshing(true)
|
||||
await loadData()
|
||||
if (isAuthenticated) await loadOpportunities()
|
||||
setRefreshing(false)
|
||||
}, [loadData, loadOpportunities, isAuthenticated])
|
||||
}, [loadData])
|
||||
|
||||
const handleTrackDomain = useCallback(async (domain: string) => {
|
||||
if (trackedDomains.has(domain)) return
|
||||
@ -211,262 +252,249 @@ export default function AuctionsPage() {
|
||||
}
|
||||
}, [trackedDomains])
|
||||
|
||||
const handleSort = useCallback((field: string) => {
|
||||
const f = field as SortField
|
||||
if (sortBy === f) {
|
||||
setSortDirection(d => d === 'asc' ? 'desc' : 'asc')
|
||||
} else {
|
||||
setSortBy(f)
|
||||
setSortDirection('asc')
|
||||
}
|
||||
}, [sortBy])
|
||||
|
||||
// Memoized tabs
|
||||
const tabs = useMemo(() => [
|
||||
{ id: 'all', label: 'All', icon: Gavel, count: allAuctions.length },
|
||||
{ id: 'ending', label: 'Ending Soon', icon: Timer, count: endingSoon.length, color: 'warning' as const },
|
||||
{ id: 'hot', label: 'Hot', icon: Flame, count: hotAuctions.length },
|
||||
{ id: 'opportunities', label: 'Opportunities', icon: Target, count: opportunities.length },
|
||||
], [allAuctions.length, endingSoon.length, hotAuctions.length, opportunities.length])
|
||||
|
||||
// Filter and sort auctions
|
||||
const sortedAuctions = useMemo(() => {
|
||||
// Get base auctions for current tab
|
||||
let auctions: Auction[] = []
|
||||
switch (activeTab) {
|
||||
case 'ending': auctions = [...endingSoon]; break
|
||||
case 'hot': auctions = [...hotAuctions]; break
|
||||
case 'opportunities': auctions = opportunities.map(o => o.auction); break
|
||||
default: auctions = [...allAuctions]
|
||||
}
|
||||
|
||||
// Apply preset filter
|
||||
const baseFilter = filterPreset === 'all' && isPaidUser ? 'no-trash' : filterPreset
|
||||
switch (baseFilter) {
|
||||
case 'no-trash': auctions = auctions.filter(isCleanDomain); break
|
||||
case 'short': auctions = auctions.filter(a => a.domain.split('.')[0].length <= 4); break
|
||||
case 'high-value': auctions = auctions.filter(a =>
|
||||
PREMIUM_TLDS.slice(0, 3).includes(a.tld) && a.num_bids >= 5 && calculateDealScore(a) >= 70
|
||||
); break
|
||||
case 'low-competition': auctions = auctions.filter(a => a.num_bids < 5); break
|
||||
}
|
||||
|
||||
// Apply search
|
||||
if (searchQuery) {
|
||||
const q = searchQuery.toLowerCase()
|
||||
auctions = auctions.filter(a => a.domain.toLowerCase().includes(q))
|
||||
}
|
||||
|
||||
// Apply platform filter
|
||||
if (selectedPlatform !== 'All') {
|
||||
auctions = auctions.filter(a => a.platform === selectedPlatform)
|
||||
}
|
||||
|
||||
// Apply max bid
|
||||
if (maxBid) {
|
||||
const max = parseFloat(maxBid)
|
||||
auctions = auctions.filter(a => a.current_bid <= max)
|
||||
}
|
||||
|
||||
// Sort (skip for opportunities - already sorted by score)
|
||||
if (activeTab !== 'opportunities') {
|
||||
const mult = sortDirection === 'asc' ? 1 : -1
|
||||
auctions.sort((a, b) => {
|
||||
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)
|
||||
case 'score': return mult * (calculateDealScore(b) - calculateDealScore(a))
|
||||
default: return 0
|
||||
}
|
||||
// Combine and filter market items
|
||||
const marketItems = useMemo(() => {
|
||||
const items: MarketItem[] = []
|
||||
|
||||
// Add auctions (unless pounceOnly is active)
|
||||
if (!pounceOnly) {
|
||||
auctions.forEach(auction => {
|
||||
const score = calculatePounceScore(auction.domain, auction.tld, auction.num_bids, auction.age_years || undefined)
|
||||
|
||||
// Apply spam filter
|
||||
if (hideSpam && !isCleanDomain(auction.domain, auction.tld)) return
|
||||
|
||||
items.push({
|
||||
type: 'auction',
|
||||
domain: auction.domain,
|
||||
price: auction.current_bid,
|
||||
source: auction.platform,
|
||||
sourceIcon: auction.platform.toLowerCase() as any,
|
||||
status: 'auction',
|
||||
timeRemaining: auction.time_remaining,
|
||||
numBids: auction.num_bids,
|
||||
pounceScore: score,
|
||||
affiliateUrl: auction.affiliate_url,
|
||||
isPounce: false,
|
||||
ageYears: auction.age_years || undefined,
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// Add Pounce Direct listings
|
||||
directListings.forEach(listing => {
|
||||
const tld = listing.domain.split('.').pop() || ''
|
||||
const score = calculatePounceScore(listing.domain, tld)
|
||||
|
||||
// Apply spam filter
|
||||
if (hideSpam && !isCleanDomain(listing.domain, tld)) return
|
||||
|
||||
items.push({
|
||||
type: 'direct',
|
||||
domain: listing.domain,
|
||||
price: listing.price,
|
||||
source: 'Pounce',
|
||||
sourceIcon: 'pounce',
|
||||
status: 'instant',
|
||||
pounceScore: score + 10, // Bonus for verified listings
|
||||
isPounce: true,
|
||||
verified: listing.verified,
|
||||
})
|
||||
})
|
||||
|
||||
// Apply search filter
|
||||
let filtered = items
|
||||
if (searchQuery) {
|
||||
const q = searchQuery.toLowerCase()
|
||||
filtered = filtered.filter(item => item.domain.toLowerCase().includes(q))
|
||||
}
|
||||
|
||||
// Apply TLD filter
|
||||
if (selectedTld !== 'all') {
|
||||
filtered = filtered.filter(item => item.domain.endsWith(`.${selectedTld}`))
|
||||
}
|
||||
|
||||
// Apply price filter
|
||||
if (selectedPrice !== 'all') {
|
||||
const maxPrice = parseInt(selectedPrice)
|
||||
filtered = filtered.filter(item => item.price <= maxPrice)
|
||||
}
|
||||
|
||||
// Sort: Pounce Direct first, then by score
|
||||
filtered.sort((a, b) => {
|
||||
if (a.isPounce && !b.isPounce) return -1
|
||||
if (!a.isPounce && b.isPounce) return 1
|
||||
return b.pounceScore - a.pounceScore
|
||||
})
|
||||
|
||||
return filtered
|
||||
}, [auctions, directListings, hideSpam, pounceOnly, searchQuery, selectedTld, selectedPrice])
|
||||
|
||||
return auctions
|
||||
}, [activeTab, allAuctions, endingSoon, hotAuctions, opportunities, filterPreset, isPaidUser, searchQuery, selectedPlatform, maxBid, sortBy, sortDirection])
|
||||
// Stats
|
||||
const stats = useMemo(() => ({
|
||||
total: marketItems.length,
|
||||
auctions: marketItems.filter(i => i.type === 'auction').length,
|
||||
direct: marketItems.filter(i => i.type === 'direct').length,
|
||||
highScore: marketItems.filter(i => i.pounceScore >= 80).length,
|
||||
}), [marketItems])
|
||||
|
||||
// Subtitle
|
||||
const subtitle = useMemo(() => {
|
||||
if (loading) return 'Loading live auctions...'
|
||||
const total = allAuctions.length
|
||||
if (total === 0) return 'No active auctions found'
|
||||
return `${sortedAuctions.length.toLocaleString()} auctions ${sortedAuctions.length < total ? `(filtered from ${total.toLocaleString()})` : 'across 4 platforms'}`
|
||||
}, [loading, allAuctions.length, sortedAuctions.length])
|
||||
|
||||
// Get opportunity data helper
|
||||
const getOpportunityData = useCallback((domain: string) => {
|
||||
if (activeTab !== 'opportunities') return null
|
||||
return opportunities.find(o => o.auction.domain === domain)?.analysis
|
||||
}, [activeTab, opportunities])
|
||||
|
||||
// Table columns - memoized
|
||||
// Table columns
|
||||
const columns = useMemo(() => [
|
||||
{
|
||||
key: 'domain',
|
||||
header: 'Domain',
|
||||
sortable: true,
|
||||
render: (a: Auction) => (
|
||||
<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>
|
||||
render: (item: MarketItem) => (
|
||||
<div className={clsx(
|
||||
"py-1",
|
||||
item.isPounce && "border-l-2 border-accent pl-3 -ml-3"
|
||||
)}>
|
||||
<div className="flex items-center gap-2">
|
||||
{item.isPounce && <Diamond className="w-4 h-4 text-accent" />}
|
||||
<span className="font-mono font-semibold text-foreground">{item.domain}</span>
|
||||
{item.verified && (
|
||||
<span className="text-xs bg-accent/20 text-accent px-1.5 py-0.5 rounded font-medium">✓ Verified</span>
|
||||
)}
|
||||
</div>
|
||||
<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>}
|
||||
<SourceBadge source={item.source} isPounce={item.isPounce} />
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'platform',
|
||||
header: 'Platform',
|
||||
hideOnMobile: true,
|
||||
render: (a: Auction) => (
|
||||
<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' as const,
|
||||
render: (a: Auction) => (
|
||||
<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: 'score',
|
||||
header: 'Deal Score',
|
||||
sortable: true,
|
||||
header: 'Pounce Score',
|
||||
align: 'center' as const,
|
||||
hideOnMobile: true,
|
||||
render: (a: Auction) => {
|
||||
if (activeTab === 'opportunities') {
|
||||
const oppData = getOpportunityData(a.domain)
|
||||
if (oppData) {
|
||||
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>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
if (!isPaidUser) {
|
||||
render: (item: MarketItem) => {
|
||||
if (!isPaidUser && !item.isPounce) {
|
||||
return (
|
||||
<Link
|
||||
href="/pricing"
|
||||
className="inline-flex items-center justify-center w-9 h-9 bg-foreground/5 text-foreground-subtle rounded-lg hover:bg-accent/10 hover:text-accent transition-all"
|
||||
title="Upgrade to see Deal Score"
|
||||
className="inline-flex items-center justify-center w-10 h-10 bg-foreground/5 text-foreground-subtle rounded-xl hover:bg-accent/10 hover:text-accent transition-all"
|
||||
title="Upgrade to see Pounce Score"
|
||||
>
|
||||
<Crown className="w-4 h-4" />
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
const score = calculateDealScore(a)
|
||||
return (
|
||||
<div className="inline-flex flex-col items-center">
|
||||
<span className={clsx(
|
||||
"inline-flex items-center justify-center w-9 h-9 rounded-lg font-bold text-sm",
|
||||
score >= 75 ? "bg-accent/20 text-accent" :
|
||||
score >= 50 ? "bg-amber-500/20 text-amber-400" :
|
||||
"bg-foreground/10 text-foreground-muted"
|
||||
)}>
|
||||
{score}
|
||||
</span>
|
||||
{score >= 75 && <span className="text-[10px] text-accent mt-0.5 font-medium">Undervalued</span>}
|
||||
<span className={clsx(
|
||||
"inline-flex items-center justify-center w-10 h-10 rounded-xl font-bold text-sm",
|
||||
getScoreColor(item.pounceScore)
|
||||
)}>
|
||||
{item.pounceScore}
|
||||
</span>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'price',
|
||||
header: 'Price / Bid',
|
||||
align: 'right' as const,
|
||||
render: (item: MarketItem) => (
|
||||
<div>
|
||||
<span className={clsx(
|
||||
"font-semibold",
|
||||
item.type === 'auction' ? "text-foreground-muted" : "text-foreground"
|
||||
)}>
|
||||
{formatCurrency(item.price)}
|
||||
</span>
|
||||
{item.type === 'auction' && (
|
||||
<span className="text-xs text-foreground-subtle ml-1">(Bid)</span>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'status',
|
||||
header: 'Status / Time',
|
||||
align: 'center' as const,
|
||||
hideOnMobile: true,
|
||||
render: (item: MarketItem) => {
|
||||
if (item.type === 'direct') {
|
||||
return (
|
||||
<div className="flex items-center justify-center gap-1.5 px-3 py-1.5 bg-accent/20 text-accent rounded-lg">
|
||||
<Zap className="w-3.5 h-3.5" />
|
||||
<span className="text-xs font-bold">Instant</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const isUrgent = item.timeRemaining?.includes('m') && !item.timeRemaining?.includes('h')
|
||||
const isWarning = item.timeRemaining?.includes('h') && parseInt(item.timeRemaining) < 2
|
||||
|
||||
return (
|
||||
<div className={clsx(
|
||||
"flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-lg",
|
||||
isUrgent ? "bg-red-400/20 text-red-400" :
|
||||
isWarning ? "bg-amber-400/20 text-amber-400" :
|
||||
"bg-foreground/10 text-foreground-muted"
|
||||
)}>
|
||||
<Timer className="w-3.5 h-3.5" />
|
||||
<span className="text-xs font-medium">{item.timeRemaining}</span>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'bids',
|
||||
header: 'Bids',
|
||||
sortable: true,
|
||||
align: 'right' as const,
|
||||
key: 'source',
|
||||
header: 'Source',
|
||||
align: 'center' as const,
|
||||
hideOnMobile: true,
|
||||
render: (a: Auction) => (
|
||||
<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' as const,
|
||||
hideOnMobile: true,
|
||||
render: (a: Auction) => (
|
||||
<span className={clsx("font-medium", getTimeColor(a.time_remaining))}>
|
||||
{a.time_remaining}
|
||||
</span>
|
||||
),
|
||||
render: (item: MarketItem) => <SourceBadge source={item.source} isPounce={item.isPounce} />,
|
||||
},
|
||||
{
|
||||
key: 'actions',
|
||||
header: '',
|
||||
align: 'right' as const,
|
||||
render: (a: Auction) => (
|
||||
render: (item: MarketItem) => (
|
||||
<div className="flex items-center gap-2 justify-end">
|
||||
<button
|
||||
onClick={(e) => { e.preventDefault(); handleTrackDomain(a.domain) }}
|
||||
disabled={trackedDomains.has(a.domain) || trackingInProgress === a.domain}
|
||||
onClick={(e) => { e.preventDefault(); handleTrackDomain(item.domain) }}
|
||||
disabled={trackedDomains.has(item.domain) || trackingInProgress === item.domain}
|
||||
className={clsx(
|
||||
"inline-flex items-center justify-center w-8 h-8 rounded-lg transition-all",
|
||||
trackedDomains.has(a.domain)
|
||||
"inline-flex items-center justify-center w-9 h-9 rounded-xl transition-all",
|
||||
trackedDomains.has(item.domain)
|
||||
? "bg-accent/20 text-accent cursor-default"
|
||||
: "bg-foreground/5 text-foreground-subtle hover:bg-accent/10 hover:text-accent"
|
||||
)}
|
||||
title={trackedDomains.has(a.domain) ? 'Already tracked' : 'Add to Watchlist'}
|
||||
title={trackedDomains.has(item.domain) ? 'Already tracked' : 'Add to Watchlist'}
|
||||
>
|
||||
{trackingInProgress === a.domain ? (
|
||||
{trackingInProgress === item.domain ? (
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
) : trackedDomains.has(a.domain) ? (
|
||||
) : trackedDomains.has(item.domain) ? (
|
||||
<Check className="w-4 h-4" />
|
||||
) : (
|
||||
<Plus className="w-4 h-4" />
|
||||
)}
|
||||
</button>
|
||||
<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"
|
||||
href={item.affiliateUrl || `/buy/${item.domain}`}
|
||||
target={item.isPounce ? '_self' : '_blank'}
|
||||
rel={item.isPounce ? undefined : 'noopener noreferrer'}
|
||||
className={clsx(
|
||||
"inline-flex items-center gap-1.5 px-4 py-2 text-xs font-semibold rounded-xl transition-all",
|
||||
item.isPounce
|
||||
? "bg-accent text-background hover:bg-accent/90"
|
||||
: "bg-foreground text-background hover:bg-foreground/90"
|
||||
)}
|
||||
>
|
||||
Bid <ExternalLink className="w-3 h-3" />
|
||||
{item.isPounce ? 'Buy' : 'Bid'}
|
||||
{!item.isPounce && <ExternalLink className="w-3 h-3" />}
|
||||
</a>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
], [activeTab, isPaidUser, trackedDomains, trackingInProgress, handleTrackDomain, getOpportunityData])
|
||||
], [isPaidUser, trackedDomains, trackingInProgress, handleTrackDomain])
|
||||
|
||||
const subtitle = loading
|
||||
? 'Loading market data...'
|
||||
: `${stats.total} listings • ${stats.direct} direct • ${stats.auctions} auctions`
|
||||
|
||||
return (
|
||||
<TerminalLayout
|
||||
title="Auctions"
|
||||
title="Market"
|
||||
subtitle={subtitle}
|
||||
actions={
|
||||
<ActionButton onClick={handleRefresh} disabled={refreshing} variant="ghost" icon={refreshing ? Loader2 : RefreshCw}>
|
||||
@ -477,66 +505,60 @@ export default function AuctionsPage() {
|
||||
<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} />
|
||||
<StatCard title="Hot Auctions" value={hotAuctions.length} subtitle="20+ bids" icon={Flame} />
|
||||
<StatCard title="Opportunities" value={opportunities.length} icon={Target} />
|
||||
<StatCard title="Total Listings" value={stats.total} icon={ShoppingBag} />
|
||||
<StatCard
|
||||
title="Pounce Direct"
|
||||
value={stats.direct}
|
||||
icon={Diamond}
|
||||
accent={stats.direct > 0}
|
||||
/>
|
||||
<StatCard title="Auctions" value={stats.auctions} icon={Gavel} />
|
||||
<StatCard
|
||||
title="High Score"
|
||||
value={stats.highScore}
|
||||
subtitle="Score ≥80"
|
||||
icon={Sparkles}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<TabBar tabs={tabs} activeTab={activeTab} onChange={(id) => setActiveTab(id as TabType)} />
|
||||
|
||||
{/* Smart Filter Presets */}
|
||||
<div className="flex flex-wrap gap-2 p-1.5 bg-background-secondary/30 border border-border/30 rounded-xl">
|
||||
{FILTER_PRESETS.map((preset) => {
|
||||
const isDisabled = preset.proOnly && !isPaidUser
|
||||
const isActive = filterPreset === preset.id
|
||||
const Icon = preset.icon
|
||||
return (
|
||||
<button
|
||||
key={preset.id}
|
||||
onClick={() => !isDisabled && setFilterPreset(preset.id)}
|
||||
disabled={isDisabled}
|
||||
title={isDisabled ? 'Upgrade to Trader to use this filter' : preset.description}
|
||||
className={clsx(
|
||||
"flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg transition-all",
|
||||
isActive
|
||||
? "bg-accent text-background shadow-md"
|
||||
: isDisabled
|
||||
? "text-foreground-subtle opacity-50 cursor-not-allowed"
|
||||
: "text-foreground-muted hover:text-foreground hover:bg-foreground/5"
|
||||
)}
|
||||
>
|
||||
<Icon className="w-4 h-4" />
|
||||
<span className="hidden sm:inline">{preset.label}</span>
|
||||
{preset.proOnly && !isPaidUser && <Crown className="w-3 h-3 text-amber-400" />}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
{/* Filter Toggles (as per concept) */}
|
||||
<div className="flex flex-wrap items-center gap-3 p-4 bg-background-secondary/40 border border-border/30 rounded-2xl">
|
||||
<span className="text-sm font-medium text-foreground-muted flex items-center gap-2">
|
||||
<Filter className="w-4 h-4" /> Filters:
|
||||
</span>
|
||||
|
||||
{/* Hide Spam Toggle - Default ON */}
|
||||
<button
|
||||
onClick={() => setHideSpam(!hideSpam)}
|
||||
className={clsx(
|
||||
"flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all",
|
||||
hideSpam
|
||||
? "bg-accent text-background"
|
||||
: "bg-foreground/10 text-foreground-muted hover:bg-foreground/15"
|
||||
)}
|
||||
>
|
||||
<Sparkles className="w-4 h-4" />
|
||||
Hide Spam
|
||||
{hideSpam && <Check className="w-3.5 h-3.5" />}
|
||||
</button>
|
||||
|
||||
{/* Pounce Direct Only Toggle */}
|
||||
<button
|
||||
onClick={() => setPounceOnly(!pounceOnly)}
|
||||
className={clsx(
|
||||
"flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all",
|
||||
pounceOnly
|
||||
? "bg-accent text-background"
|
||||
: "bg-foreground/10 text-foreground-muted hover:bg-foreground/15"
|
||||
)}
|
||||
>
|
||||
<Diamond className="w-4 h-4" />
|
||||
Pounce Direct Only
|
||||
{pounceOnly && <Check className="w-3.5 h-3.5" />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Tier notification for Scout users */}
|
||||
{!isPaidUser && (
|
||||
<div className="p-4 bg-amber-500/10 border border-amber-500/20 rounded-xl flex items-center gap-3">
|
||||
<div className="w-10 h-10 bg-amber-500/20 rounded-xl flex items-center justify-center shrink-0">
|
||||
<Eye className="w-5 h-5 text-amber-400" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-medium text-foreground">You're seeing the raw auction feed</p>
|
||||
<p className="text-xs text-foreground-muted">
|
||||
Upgrade to Trader for spam-free listings, Deal Scores, and Smart Filters.
|
||||
</p>
|
||||
</div>
|
||||
<Link
|
||||
href="/pricing"
|
||||
className="shrink-0 px-4 py-2 bg-accent text-background text-sm font-medium rounded-lg hover:bg-accent-hover transition-all"
|
||||
>
|
||||
Upgrade
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Filters */}
|
||||
{/* Search & Dropdowns */}
|
||||
<FilterBar>
|
||||
<SearchInput
|
||||
value={searchQuery}
|
||||
@ -544,31 +566,38 @@ export default function AuctionsPage() {
|
||||
placeholder="Search domains..."
|
||||
className="flex-1 min-w-[200px] max-w-md"
|
||||
/>
|
||||
<SelectDropdown value={selectedPlatform} onChange={setSelectedPlatform} options={PLATFORMS} />
|
||||
<div className="relative">
|
||||
<DollarSign className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-foreground-muted" />
|
||||
<input
|
||||
type="number"
|
||||
placeholder="Max bid"
|
||||
value={maxBid}
|
||||
onChange={(e) => setMaxBid(e.target.value)}
|
||||
className="w-28 h-10 pl-9 pr-3 bg-background-secondary/50 border border-border/40 rounded-xl
|
||||
text-sm text-foreground placeholder:text-foreground-subtle
|
||||
focus:outline-none focus:border-accent/50 transition-all"
|
||||
/>
|
||||
</div>
|
||||
<SelectDropdown value={selectedTld} onChange={setSelectedTld} options={TLD_OPTIONS} />
|
||||
<SelectDropdown value={selectedPrice} onChange={setSelectedPrice} options={PRICE_OPTIONS} />
|
||||
</FilterBar>
|
||||
|
||||
{/* Table */}
|
||||
{/* Upgrade Notice for Scout */}
|
||||
{!isPaidUser && (
|
||||
<div className="p-4 bg-accent/5 border border-accent/20 rounded-2xl flex items-center gap-4">
|
||||
<div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center shrink-0">
|
||||
<Eye className="w-6 h-6 text-accent" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-semibold text-foreground">Upgrade for Full Market Intelligence</p>
|
||||
<p className="text-xs text-foreground-muted mt-0.5">
|
||||
See Pounce Scores for all domains, unlock advanced filters, and get notified on deals.
|
||||
</p>
|
||||
</div>
|
||||
<Link
|
||||
href="/pricing"
|
||||
className="shrink-0 px-5 py-2.5 bg-accent text-background text-sm font-semibold rounded-xl hover:bg-accent/90 transition-all"
|
||||
>
|
||||
Upgrade
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Market Table */}
|
||||
<PremiumTable
|
||||
data={sortedAuctions}
|
||||
keyExtractor={(a) => `${a.domain}-${a.platform}`}
|
||||
data={marketItems}
|
||||
keyExtractor={(item) => `${item.domain}-${item.source}`}
|
||||
loading={loading}
|
||||
sortBy={sortBy}
|
||||
sortDirection={sortDirection}
|
||||
onSort={handleSort}
|
||||
emptyIcon={<Gavel className="w-12 h-12 text-foreground-subtle" />}
|
||||
emptyTitle={searchQuery ? `No auctions matching "${searchQuery}"` : "No auctions found"}
|
||||
emptyIcon={<ShoppingBag className="w-12 h-12 text-foreground-subtle" />}
|
||||
emptyTitle={searchQuery ? `No listings matching "${searchQuery}"` : "No listings found"}
|
||||
emptyDescription="Try adjusting your filters or check back later"
|
||||
columns={columns}
|
||||
/>
|
||||
|
||||
@ -5,24 +5,28 @@ import { useSearchParams } from 'next/navigation'
|
||||
import { useStore } from '@/lib/store'
|
||||
import { api } from '@/lib/api'
|
||||
import { TerminalLayout } from '@/components/TerminalLayout'
|
||||
import { PremiumTable, StatCard, PageContainer, Badge, SectionHeader, SearchInput, ActionButton } from '@/components/PremiumTable'
|
||||
import { Ticker, useTickerItems } from '@/components/Ticker'
|
||||
import { PremiumTable, StatCard, PageContainer, Badge, SectionHeader, ActionButton } from '@/components/PremiumTable'
|
||||
import { Toast, useToast } from '@/components/Toast'
|
||||
import {
|
||||
Eye,
|
||||
Briefcase,
|
||||
TrendingUp,
|
||||
Gavel,
|
||||
Tag,
|
||||
Clock,
|
||||
ExternalLink,
|
||||
Sparkles,
|
||||
ChevronRight,
|
||||
Plus,
|
||||
Zap,
|
||||
Crown,
|
||||
Activity,
|
||||
Loader2,
|
||||
Search,
|
||||
Bell,
|
||||
Search,
|
||||
TrendingUp,
|
||||
ArrowRight,
|
||||
Globe,
|
||||
CheckCircle2,
|
||||
XCircle,
|
||||
Loader2,
|
||||
} from 'lucide-react'
|
||||
import clsx from 'clsx'
|
||||
import Link from 'next/link'
|
||||
@ -42,23 +46,34 @@ interface TrendingTld {
|
||||
reason: string
|
||||
}
|
||||
|
||||
export default function DashboardPage() {
|
||||
interface SearchResult {
|
||||
available: boolean | null
|
||||
inAuction: boolean
|
||||
inMarketplace: boolean
|
||||
auctionData?: HotAuction
|
||||
loading: boolean
|
||||
}
|
||||
|
||||
export default function RadarPage() {
|
||||
const searchParams = useSearchParams()
|
||||
const {
|
||||
isAuthenticated,
|
||||
isLoading,
|
||||
user,
|
||||
domains,
|
||||
subscription
|
||||
subscription,
|
||||
addDomain,
|
||||
} = useStore()
|
||||
|
||||
const { toast, showToast, hideToast } = useToast()
|
||||
const [hotAuctions, setHotAuctions] = useState<HotAuction[]>([])
|
||||
const [trendingTlds, setTrendingTlds] = useState<TrendingTld[]>([])
|
||||
const [loadingAuctions, setLoadingAuctions] = useState(true)
|
||||
const [loadingTlds, setLoadingTlds] = useState(true)
|
||||
const [quickDomain, setQuickDomain] = useState('')
|
||||
const [addingDomain, setAddingDomain] = useState(false)
|
||||
const [loadingData, setLoadingData] = useState(true)
|
||||
|
||||
// Universal Search State
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
const [searchResult, setSearchResult] = useState<SearchResult | null>(null)
|
||||
const [addingToWatchlist, setAddingToWatchlist] = useState(false)
|
||||
|
||||
// Check for upgrade success
|
||||
useEffect(() => {
|
||||
@ -66,7 +81,7 @@ export default function DashboardPage() {
|
||||
showToast('Welcome to your upgraded plan! 🎉', 'success')
|
||||
window.history.replaceState({}, '', '/terminal/radar')
|
||||
}
|
||||
}, [searchParams])
|
||||
}, [searchParams, showToast])
|
||||
|
||||
const loadDashboardData = useCallback(async () => {
|
||||
try {
|
||||
@ -75,41 +90,87 @@ export default function DashboardPage() {
|
||||
api.getTrendingTlds().catch(() => ({ trending: [] }))
|
||||
])
|
||||
setHotAuctions(auctions.slice(0, 5))
|
||||
setTrendingTlds(trending.trending?.slice(0, 4) || [])
|
||||
setTrendingTlds(trending.trending?.slice(0, 6) || [])
|
||||
} catch (error) {
|
||||
console.error('Failed to load dashboard data:', error)
|
||||
} finally {
|
||||
setLoadingAuctions(false)
|
||||
setLoadingTlds(false)
|
||||
setLoadingData(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
// Load dashboard data
|
||||
useEffect(() => {
|
||||
if (isAuthenticated) {
|
||||
loadDashboardData()
|
||||
}
|
||||
}, [isAuthenticated, loadDashboardData])
|
||||
|
||||
const handleQuickAdd = useCallback(async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!quickDomain.trim()) return
|
||||
|
||||
setAddingDomain(true)
|
||||
// Universal Search - simultaneous check
|
||||
const handleSearch = useCallback(async (domain: string) => {
|
||||
if (!domain.trim()) {
|
||||
setSearchResult(null)
|
||||
return
|
||||
}
|
||||
|
||||
const cleanDomain = domain.trim().toLowerCase()
|
||||
setSearchResult({ available: null, inAuction: false, inMarketplace: false, loading: true })
|
||||
|
||||
try {
|
||||
const store = useStore.getState()
|
||||
await store.addDomain(quickDomain.trim())
|
||||
setQuickDomain('')
|
||||
showToast(`Added ${quickDomain.trim()} to watchlist`, 'success')
|
||||
// Parallel checks
|
||||
const [whoisResult, auctionsResult] = await Promise.all([
|
||||
api.checkDomain(cleanDomain, true).catch(() => null),
|
||||
api.getAuctions(cleanDomain).catch(() => ({ auctions: [] })),
|
||||
])
|
||||
|
||||
const auctionMatch = (auctionsResult as any).auctions?.find(
|
||||
(a: any) => a.domain.toLowerCase() === cleanDomain
|
||||
)
|
||||
|
||||
const isAvailable = whoisResult && 'is_available' in whoisResult
|
||||
? whoisResult.is_available
|
||||
: null
|
||||
|
||||
setSearchResult({
|
||||
available: isAvailable,
|
||||
inAuction: !!auctionMatch,
|
||||
inMarketplace: false, // TODO: Check marketplace
|
||||
auctionData: auctionMatch,
|
||||
loading: false,
|
||||
})
|
||||
} catch (error) {
|
||||
setSearchResult({ available: null, inAuction: false, inMarketplace: false, loading: false })
|
||||
}
|
||||
}, [])
|
||||
|
||||
const handleAddToWatchlist = useCallback(async () => {
|
||||
if (!searchQuery.trim()) return
|
||||
|
||||
setAddingToWatchlist(true)
|
||||
try {
|
||||
await addDomain(searchQuery.trim())
|
||||
showToast(`Added ${searchQuery.trim()} to watchlist`, 'success')
|
||||
setSearchQuery('')
|
||||
setSearchResult(null)
|
||||
} catch (err: any) {
|
||||
showToast(err.message || 'Failed to add domain', 'error')
|
||||
} finally {
|
||||
setAddingDomain(false)
|
||||
setAddingToWatchlist(false)
|
||||
}
|
||||
}, [quickDomain, showToast])
|
||||
}, [searchQuery, addDomain, showToast])
|
||||
|
||||
// Debounced search
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
if (searchQuery.length > 3) {
|
||||
handleSearch(searchQuery)
|
||||
} else {
|
||||
setSearchResult(null)
|
||||
}
|
||||
}, 500)
|
||||
return () => clearTimeout(timer)
|
||||
}, [searchQuery, handleSearch])
|
||||
|
||||
// Memoized computed values
|
||||
const { availableDomains, totalDomains, tierName, TierIcon, greeting, subtitle } = useMemo(() => {
|
||||
const { availableDomains, totalDomains, tierName, TierIcon, greeting, subtitle, listingsCount } = useMemo(() => {
|
||||
const availableDomains = domains?.filter(d => d.is_available) || []
|
||||
const totalDomains = domains?.length || 0
|
||||
const tierName = subscription?.tier_name || subscription?.tier || 'Scout'
|
||||
@ -127,9 +188,15 @@ export default function DashboardPage() {
|
||||
subtitle = 'Start tracking domains to find opportunities'
|
||||
}
|
||||
|
||||
return { availableDomains, totalDomains, tierName, TierIcon, greeting, subtitle }
|
||||
// TODO: Get actual listings count from API
|
||||
const listingsCount = 0
|
||||
|
||||
return { availableDomains, totalDomains, tierName, TierIcon, greeting, subtitle, listingsCount }
|
||||
}, [domains, subscription])
|
||||
|
||||
// Generate ticker items
|
||||
const tickerItems = useTickerItems(trendingTlds, availableDomains, hotAuctions)
|
||||
|
||||
if (isLoading || !isAuthenticated) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-background">
|
||||
@ -145,88 +212,166 @@ export default function DashboardPage() {
|
||||
>
|
||||
{toast && <Toast message={toast.message} type={toast.type} onClose={hideToast} />}
|
||||
|
||||
<PageContainer>
|
||||
{/* Quick Add */}
|
||||
<div className="relative p-5 sm:p-6 bg-gradient-to-r from-accent/10 via-accent/5 to-transparent border border-accent/20 rounded-2xl overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-accent/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2" />
|
||||
<div className="relative">
|
||||
<h2 className="text-base font-semibold text-foreground mb-4 flex items-center gap-2">
|
||||
<div className="w-8 h-8 bg-accent/20 rounded-lg flex items-center justify-center">
|
||||
<Search className="w-4 h-4 text-accent" />
|
||||
</div>
|
||||
Quick Add to Watchlist
|
||||
</h2>
|
||||
<form onSubmit={handleQuickAdd} className="flex flex-col sm:flex-row gap-3">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-foreground-subtle" />
|
||||
<input
|
||||
type="text"
|
||||
value={quickDomain}
|
||||
onChange={(e) => setQuickDomain(e.target.value)}
|
||||
placeholder="Enter domain to track (e.g., dream.com)"
|
||||
className="w-full h-11 pl-11 pr-4 bg-background/80 backdrop-blur-sm border border-border/50 rounded-xl
|
||||
text-sm text-foreground placeholder:text-foreground-subtle
|
||||
focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent/30"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={addingDomain || !quickDomain.trim()}
|
||||
className="flex items-center justify-center gap-2 h-11 px-6 bg-gradient-to-r from-accent to-accent/80 text-background rounded-xl
|
||||
font-medium hover:shadow-[0_0_20px_-5px_rgba(16,185,129,0.4)] transition-all
|
||||
disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
<span>Add</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
{/* A. THE TICKER - Market movements */}
|
||||
{tickerItems.length > 0 && (
|
||||
<div className="-mx-4 sm:-mx-6 lg:-mx-8 mb-6">
|
||||
<Ticker items={tickerItems} speed={40} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Stats Overview */}
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<PageContainer>
|
||||
{/* B. QUICK STATS - 3 Cards as per concept */}
|
||||
<div className="grid grid-cols-3 gap-4 mb-8">
|
||||
<Link href="/terminal/watchlist" className="group">
|
||||
<StatCard
|
||||
title="Domains Watched"
|
||||
value={totalDomains}
|
||||
title="Watching"
|
||||
value={totalDomains}
|
||||
subtitle={availableDomains.length > 0 ? `${availableDomains.length} alerts` : undefined}
|
||||
icon={Eye}
|
||||
/>
|
||||
</Link>
|
||||
<Link href="/terminal/watchlist?filter=available" className="group">
|
||||
<StatCard
|
||||
title="Available Now"
|
||||
value={availableDomains.length}
|
||||
icon={Sparkles}
|
||||
accent={availableDomains.length > 0}
|
||||
/>
|
||||
</Link>
|
||||
<Link href="/terminal/watchlist" className="group">
|
||||
<Link href="/terminal/market" className="group">
|
||||
<StatCard
|
||||
title="Watchlist"
|
||||
value={totalDomains}
|
||||
icon={Briefcase}
|
||||
title="Market"
|
||||
value={hotAuctions.length > 0 ? `${hotAuctions.length}+` : '0'}
|
||||
subtitle="opportunities"
|
||||
icon={Gavel}
|
||||
/>
|
||||
</Link>
|
||||
<Link href="/terminal/listing" className="group">
|
||||
<StatCard
|
||||
title="My Listings"
|
||||
value={listingsCount}
|
||||
subtitle="active"
|
||||
icon={Tag}
|
||||
/>
|
||||
</Link>
|
||||
<StatCard
|
||||
title="Plan"
|
||||
value={tierName}
|
||||
subtitle={`${subscription?.domains_used || 0}/${subscription?.domain_limit || 5} slots`}
|
||||
icon={TierIcon}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Activity Feed + Market Pulse */}
|
||||
{/* C. UNIVERSAL SEARCH - Hero Element */}
|
||||
<div className="relative p-6 sm:p-8 bg-gradient-to-br from-accent/10 via-accent/5 to-transparent border border-accent/20 rounded-2xl overflow-hidden mb-8">
|
||||
<div className="absolute top-0 right-0 w-96 h-96 bg-accent/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2" />
|
||||
|
||||
<div className="relative">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-10 h-10 bg-accent/20 rounded-xl flex items-center justify-center">
|
||||
<Search className="w-5 h-5 text-accent" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-foreground">Universal Search</h2>
|
||||
<p className="text-sm text-foreground-muted">Check availability, auctions & marketplace simultaneously</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<Globe className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-foreground-subtle" />
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="Enter domain to check (e.g., dream.com)"
|
||||
className="w-full h-14 pl-12 pr-4 bg-background/80 backdrop-blur-sm border border-border/50 rounded-xl
|
||||
text-base text-foreground placeholder:text-foreground-subtle
|
||||
focus:outline-none focus:border-accent focus:ring-2 focus:ring-accent/20"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Search Results */}
|
||||
{searchResult && (
|
||||
<div className="mt-4 p-4 bg-background/60 backdrop-blur-sm border border-border/40 rounded-xl">
|
||||
{searchResult.loading ? (
|
||||
<div className="flex items-center gap-3 text-foreground-muted">
|
||||
<Loader2 className="w-5 h-5 animate-spin" />
|
||||
<span>Checking...</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{/* Availability */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
{searchResult.available === true ? (
|
||||
<CheckCircle2 className="w-5 h-5 text-accent" />
|
||||
) : searchResult.available === false ? (
|
||||
<XCircle className="w-5 h-5 text-red-400" />
|
||||
) : (
|
||||
<Globe className="w-5 h-5 text-foreground-subtle" />
|
||||
)}
|
||||
<span className="text-sm text-foreground">
|
||||
{searchResult.available === true
|
||||
? 'Available for registration!'
|
||||
: searchResult.available === false
|
||||
? 'Currently registered'
|
||||
: 'Could not check availability'}
|
||||
</span>
|
||||
</div>
|
||||
{searchResult.available === true && (
|
||||
<a
|
||||
href={`https://www.namecheap.com/domains/registration/results/?domain=${searchQuery}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-xs font-medium text-accent hover:underline flex items-center gap-1"
|
||||
>
|
||||
Register Now <ExternalLink className="w-3 h-3" />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* In Auction */}
|
||||
{searchResult.inAuction && searchResult.auctionData && (
|
||||
<div className="flex items-center justify-between p-3 bg-amber-400/10 border border-amber-400/20 rounded-lg">
|
||||
<div className="flex items-center gap-2">
|
||||
<Gavel className="w-5 h-5 text-amber-400" />
|
||||
<span className="text-sm text-foreground">
|
||||
In auction: ${searchResult.auctionData.current_bid} ({searchResult.auctionData.time_remaining})
|
||||
</span>
|
||||
</div>
|
||||
<a
|
||||
href={searchResult.auctionData.affiliate_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-xs font-medium text-amber-400 hover:underline flex items-center gap-1"
|
||||
>
|
||||
Bid Now <ExternalLink className="w-3 h-3" />
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex items-center gap-3 pt-2">
|
||||
<button
|
||||
onClick={handleAddToWatchlist}
|
||||
disabled={addingToWatchlist}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-accent text-background rounded-lg font-medium
|
||||
hover:bg-accent/90 transition-all disabled:opacity-50"
|
||||
>
|
||||
{addingToWatchlist ? (
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
) : (
|
||||
<Plus className="w-4 h-4" />
|
||||
)}
|
||||
Add to Watchlist
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* D. RECENT ALERTS + MARKET PULSE */}
|
||||
<div className="grid lg:grid-cols-2 gap-6">
|
||||
{/* Activity Feed */}
|
||||
{/* Recent Alerts / Activity Feed */}
|
||||
<div className="relative overflow-hidden rounded-2xl border border-border/40 bg-gradient-to-b from-background-secondary/40 to-background-secondary/20 backdrop-blur-sm">
|
||||
<div className="p-5 border-b border-border/30">
|
||||
<SectionHeader
|
||||
title="Activity Feed"
|
||||
title="Recent Alerts"
|
||||
icon={Activity}
|
||||
compact
|
||||
action={
|
||||
<Link href="/terminal/watchlist" className="text-sm text-accent hover:text-accent/80 transition-colors">
|
||||
View all →
|
||||
<Link href="/terminal/watchlist" className="text-sm text-accent hover:text-accent/80 transition-colors flex items-center gap-1">
|
||||
View all <ArrowRight className="w-3.5 h-3.5" />
|
||||
</Link>
|
||||
}
|
||||
/>
|
||||
@ -234,7 +379,7 @@ export default function DashboardPage() {
|
||||
<div className="p-5">
|
||||
{availableDomains.length > 0 ? (
|
||||
<div className="space-y-3">
|
||||
{availableDomains.slice(0, 4).map((domain) => (
|
||||
{availableDomains.slice(0, 5).map((domain) => (
|
||||
<div
|
||||
key={domain.id}
|
||||
className="flex items-center gap-4 p-3 bg-accent/5 border border-accent/20 rounded-xl"
|
||||
@ -244,7 +389,7 @@ export default function DashboardPage() {
|
||||
<span className="absolute inset-0 bg-accent rounded-full animate-ping opacity-50" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-foreground truncate">{domain.name}</p>
|
||||
<p className="text-sm font-medium text-foreground font-mono truncate">{domain.name}</p>
|
||||
<p className="text-xs text-accent">Available for registration!</p>
|
||||
</div>
|
||||
<a
|
||||
@ -257,18 +402,13 @@ export default function DashboardPage() {
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
{availableDomains.length > 4 && (
|
||||
<p className="text-center text-sm text-foreground-muted">
|
||||
+{availableDomains.length - 4} more available
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
) : totalDomains > 0 ? (
|
||||
<div className="text-center py-8">
|
||||
<Bell className="w-10 h-10 text-foreground-subtle mx-auto mb-3" />
|
||||
<p className="text-foreground-muted">All domains are still registered</p>
|
||||
<p className="text-sm text-foreground-subtle mt-1">
|
||||
We're monitoring {totalDomains} domains for you
|
||||
Monitoring {totalDomains} domains for you
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
@ -276,7 +416,7 @@ export default function DashboardPage() {
|
||||
<Plus className="w-10 h-10 text-foreground-subtle mx-auto mb-3" />
|
||||
<p className="text-foreground-muted">No domains tracked yet</p>
|
||||
<p className="text-sm text-foreground-subtle mt-1">
|
||||
Add a domain above to start monitoring
|
||||
Use Universal Search above to start
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
@ -291,14 +431,14 @@ export default function DashboardPage() {
|
||||
icon={Gavel}
|
||||
compact
|
||||
action={
|
||||
<Link href="/terminal/market" className="text-sm text-accent hover:text-accent/80 transition-colors">
|
||||
View all →
|
||||
<Link href="/terminal/market" className="text-sm text-accent hover:text-accent/80 transition-colors flex items-center gap-1">
|
||||
View all <ArrowRight className="w-3.5 h-3.5" />
|
||||
</Link>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="p-5">
|
||||
{loadingAuctions ? (
|
||||
{loadingData ? (
|
||||
<div className="space-y-3">
|
||||
{[...Array(4)].map((_, i) => (
|
||||
<div key={i} className="h-14 bg-foreground/5 rounded-xl animate-pulse" />
|
||||
@ -316,7 +456,7 @@ export default function DashboardPage() {
|
||||
hover:bg-foreground/10 transition-colors group"
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-foreground truncate">{auction.domain}</p>
|
||||
<p className="text-sm font-medium text-foreground font-mono truncate">{auction.domain}</p>
|
||||
<p className="text-xs text-foreground-muted flex items-center gap-2">
|
||||
<Clock className="w-3 h-3" />
|
||||
{auction.time_remaining}
|
||||
@ -325,7 +465,7 @@ export default function DashboardPage() {
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-sm font-semibold text-foreground">${auction.current_bid}</p>
|
||||
<p className="text-xs text-foreground-subtle">current bid</p>
|
||||
<p className="text-xs text-foreground-subtle">bid</p>
|
||||
</div>
|
||||
<ExternalLink className="w-4 h-4 text-foreground-subtle group-hover:text-foreground" />
|
||||
</a>
|
||||
@ -340,63 +480,6 @@ export default function DashboardPage() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Trending TLDs */}
|
||||
<div className="relative overflow-hidden rounded-2xl border border-border/40 bg-gradient-to-b from-background-secondary/40 to-background-secondary/20 backdrop-blur-sm">
|
||||
<div className="p-5 border-b border-border/30">
|
||||
<SectionHeader
|
||||
title="Trending TLDs"
|
||||
icon={TrendingUp}
|
||||
compact
|
||||
action={
|
||||
<Link href="/terminal/intel" className="text-sm text-accent hover:text-accent/80 transition-colors">
|
||||
View all →
|
||||
</Link>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="p-5">
|
||||
{loadingTlds ? (
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{[...Array(4)].map((_, i) => (
|
||||
<div key={i} className="h-24 bg-foreground/5 rounded-xl animate-pulse" />
|
||||
))}
|
||||
</div>
|
||||
) : trendingTlds.length > 0 ? (
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{trendingTlds.map((tld) => (
|
||||
<Link
|
||||
key={tld.tld}
|
||||
href={`/tld-pricing/${tld.tld}`}
|
||||
className="group relative p-4 bg-foreground/5 border border-border/30 rounded-xl
|
||||
hover:border-accent/30 transition-all duration-300 overflow-hidden"
|
||||
>
|
||||
<div className="absolute inset-0 bg-accent/5 opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
<div className="relative">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="font-mono text-2xl font-semibold text-foreground group-hover:text-accent transition-colors">.{tld.tld}</span>
|
||||
<span className={clsx(
|
||||
"text-xs font-bold px-2.5 py-1 rounded-lg border",
|
||||
(tld.price_change || 0) > 0
|
||||
? "text-orange-400 bg-orange-400/10 border-orange-400/20"
|
||||
: "text-accent bg-accent/10 border-accent/20"
|
||||
)}>
|
||||
{(tld.price_change || 0) > 0 ? '+' : ''}{(tld.price_change || 0).toFixed(1)}%
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-foreground-muted truncate">{tld.reason}</p>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8">
|
||||
<TrendingUp className="w-10 h-10 text-foreground-subtle mx-auto mb-3" />
|
||||
<p className="text-foreground-muted">No trending TLDs available</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</PageContainer>
|
||||
</TerminalLayout>
|
||||
)
|
||||
|
||||
@ -37,52 +37,59 @@ import {
|
||||
import clsx from 'clsx'
|
||||
import Link from 'next/link'
|
||||
|
||||
// Health status badge colors and icons
|
||||
// Health status badge colors and icons (Ampel-System as per concept)
|
||||
// 🟢 Online, 🟡 DNS Changed, 🔴 Offline/Error
|
||||
const healthStatusConfig: Record<HealthStatus, {
|
||||
label: string
|
||||
color: string
|
||||
bgColor: string
|
||||
icon: typeof Activity
|
||||
description: string
|
||||
ampel: '🟢' | '🟡' | '🔴' | '⚪'
|
||||
}> = {
|
||||
healthy: {
|
||||
label: 'Healthy',
|
||||
label: 'Online',
|
||||
color: 'text-accent',
|
||||
bgColor: 'bg-accent/10 border-accent/20',
|
||||
icon: Activity,
|
||||
description: 'Domain is active and well-maintained'
|
||||
description: 'Domain is active and well-maintained',
|
||||
ampel: '🟢'
|
||||
},
|
||||
weakening: {
|
||||
label: 'Weakening',
|
||||
label: 'DNS Changed',
|
||||
color: 'text-amber-400',
|
||||
bgColor: 'bg-amber-400/10 border-amber-400/20',
|
||||
icon: AlertTriangle,
|
||||
description: 'Warning signs detected - owner may be losing interest'
|
||||
description: 'Warning signs detected - DNS or config changed',
|
||||
ampel: '🟡'
|
||||
},
|
||||
parked: {
|
||||
label: 'For Sale',
|
||||
color: 'text-orange-400',
|
||||
bgColor: 'bg-orange-400/10 border-orange-400/20',
|
||||
icon: ShoppingCart,
|
||||
description: 'Domain is parked and likely for sale'
|
||||
description: 'Domain is parked and likely for sale',
|
||||
ampel: '🟡'
|
||||
},
|
||||
critical: {
|
||||
label: 'Critical',
|
||||
label: 'Offline',
|
||||
color: 'text-red-400',
|
||||
bgColor: 'bg-red-400/10 border-red-400/20',
|
||||
icon: AlertTriangle,
|
||||
description: 'Domain drop is imminent!'
|
||||
description: 'Domain is offline or has critical errors',
|
||||
ampel: '🔴'
|
||||
},
|
||||
unknown: {
|
||||
label: 'Unknown',
|
||||
color: 'text-foreground-muted',
|
||||
bgColor: 'bg-foreground/5 border-border/30',
|
||||
icon: HelpCircle,
|
||||
description: 'Could not determine status'
|
||||
description: 'Could not determine status',
|
||||
ampel: '⚪'
|
||||
},
|
||||
}
|
||||
|
||||
type FilterStatus = 'all' | 'available' | 'watching'
|
||||
type FilterStatus = 'watching' | 'portfolio' | 'available'
|
||||
|
||||
export default function WatchlistPage() {
|
||||
const { domains, addDomain, deleteDomain, refreshDomain, subscription } = useStore()
|
||||
@ -93,7 +100,7 @@ export default function WatchlistPage() {
|
||||
const [refreshingId, setRefreshingId] = useState<number | null>(null)
|
||||
const [deletingId, setDeletingId] = useState<number | null>(null)
|
||||
const [togglingNotifyId, setTogglingNotifyId] = useState<number | null>(null)
|
||||
const [filterStatus, setFilterStatus] = useState<FilterStatus>('all')
|
||||
const [filterStatus, setFilterStatus] = useState<FilterStatus>('watching')
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
|
||||
// Health check state
|
||||
@ -120,16 +127,17 @@ export default function WatchlistPage() {
|
||||
return false
|
||||
}
|
||||
if (filterStatus === 'available' && !domain.is_available) return false
|
||||
if (filterStatus === 'watching' && domain.is_available) return false
|
||||
if (filterStatus === 'portfolio') return false // TODO: filter for verified own domains
|
||||
// 'watching' shows all domains
|
||||
return true
|
||||
})
|
||||
}, [domains, searchQuery, filterStatus])
|
||||
|
||||
// Memoized tabs config
|
||||
// Memoized tabs config - as per concept: Watching + My Portfolio
|
||||
const tabs = useMemo(() => [
|
||||
{ id: 'all', label: 'All', count: stats.domainsUsed },
|
||||
{ id: 'available', label: 'Available', count: stats.availableCount, color: 'accent' as const },
|
||||
{ id: 'watching', label: 'Monitoring', count: stats.watchingCount },
|
||||
{ id: 'watching', label: 'Watching', icon: Eye, count: stats.domainsUsed },
|
||||
{ id: 'portfolio', label: 'My Portfolio', icon: Shield, count: 0 }, // TODO: verified own domains
|
||||
{ id: 'available', label: 'Available', icon: Sparkles, count: stats.availableCount, color: 'accent' as const },
|
||||
], [stats])
|
||||
|
||||
// Callbacks - prevent recreation on every render
|
||||
@ -234,18 +242,18 @@ export default function WatchlistPage() {
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'status',
|
||||
header: 'Status',
|
||||
align: 'left' as const,
|
||||
key: 'health',
|
||||
header: 'Health',
|
||||
align: 'center' as const,
|
||||
width: '100px',
|
||||
hideOnMobile: true,
|
||||
render: (domain: any) => {
|
||||
const health = healthReports[domain.id]
|
||||
if (health) {
|
||||
const config = healthStatusConfig[health.status]
|
||||
const Icon = config.icon
|
||||
return (
|
||||
<div className={clsx("inline-flex items-center gap-2 px-2.5 py-1 rounded-lg border", config.bgColor)}>
|
||||
<Icon className={clsx("w-3.5 h-3.5", config.color)} />
|
||||
<div className={clsx("inline-flex items-center gap-2 px-3 py-1.5 rounded-lg border", config.bgColor)}>
|
||||
<span className="text-sm">{config.ampel}</span>
|
||||
<span className={clsx("text-xs font-medium", config.color)}>{config.label}</span>
|
||||
</div>
|
||||
)
|
||||
@ -255,7 +263,7 @@ export default function WatchlistPage() {
|
||||
"text-sm",
|
||||
domain.is_available ? "text-accent font-medium" : "text-foreground-muted"
|
||||
)}>
|
||||
{domain.is_available ? 'Ready to pounce!' : 'Monitoring...'}
|
||||
{domain.is_available ? '🟢 Available' : '⚪ Checking...'}
|
||||
</span>
|
||||
)
|
||||
},
|
||||
|
||||
165
frontend/src/components/Ticker.tsx
Normal file
165
frontend/src/components/Ticker.tsx
Normal file
@ -0,0 +1,165 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState, useRef } from 'react'
|
||||
import { TrendingUp, TrendingDown, AlertCircle, Sparkles, Gavel } from 'lucide-react'
|
||||
import clsx from 'clsx'
|
||||
|
||||
export interface TickerItem {
|
||||
id: string
|
||||
type: 'tld_change' | 'domain_available' | 'auction_ending' | 'alert'
|
||||
message: string
|
||||
value?: string
|
||||
change?: number
|
||||
urgent?: boolean
|
||||
}
|
||||
|
||||
interface TickerProps {
|
||||
items: TickerItem[]
|
||||
speed?: number // pixels per second
|
||||
}
|
||||
|
||||
export function Ticker({ items, speed = 50 }: TickerProps) {
|
||||
const containerRef = useRef<HTMLDivElement>(null)
|
||||
const contentRef = useRef<HTMLDivElement>(null)
|
||||
const [animationDuration, setAnimationDuration] = useState(0)
|
||||
|
||||
useEffect(() => {
|
||||
if (contentRef.current && containerRef.current) {
|
||||
const contentWidth = contentRef.current.scrollWidth
|
||||
const duration = contentWidth / speed
|
||||
setAnimationDuration(duration)
|
||||
}
|
||||
}, [items, speed])
|
||||
|
||||
if (items.length === 0) return null
|
||||
|
||||
const getIcon = (type: TickerItem['type'], change?: number) => {
|
||||
switch (type) {
|
||||
case 'tld_change':
|
||||
return change && change > 0
|
||||
? <TrendingUp className="w-3.5 h-3.5 text-orange-400" />
|
||||
: <TrendingDown className="w-3.5 h-3.5 text-accent" />
|
||||
case 'domain_available':
|
||||
return <Sparkles className="w-3.5 h-3.5 text-accent" />
|
||||
case 'auction_ending':
|
||||
return <Gavel className="w-3.5 h-3.5 text-amber-400" />
|
||||
case 'alert':
|
||||
return <AlertCircle className="w-3.5 h-3.5 text-red-400" />
|
||||
default:
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
const getValueColor = (type: TickerItem['type'], change?: number) => {
|
||||
if (type === 'tld_change') {
|
||||
return change && change > 0 ? 'text-orange-400' : 'text-accent'
|
||||
}
|
||||
return 'text-accent'
|
||||
}
|
||||
|
||||
// Duplicate items for seamless loop
|
||||
const tickerItems = [...items, ...items]
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="relative w-full overflow-hidden bg-gradient-to-r from-background-secondary/80 via-background-secondary/60 to-background-secondary/80
|
||||
border-y border-border/30 backdrop-blur-sm"
|
||||
>
|
||||
{/* Fade edges */}
|
||||
<div className="absolute left-0 top-0 bottom-0 w-16 bg-gradient-to-r from-background-secondary to-transparent z-10 pointer-events-none" />
|
||||
<div className="absolute right-0 top-0 bottom-0 w-16 bg-gradient-to-l from-background-secondary to-transparent z-10 pointer-events-none" />
|
||||
|
||||
<div
|
||||
ref={contentRef}
|
||||
className="flex items-center gap-8 py-2.5 px-4 whitespace-nowrap animate-ticker"
|
||||
style={{
|
||||
animationDuration: `${animationDuration}s`,
|
||||
}}
|
||||
>
|
||||
{tickerItems.map((item, idx) => (
|
||||
<div
|
||||
key={`${item.id}-${idx}`}
|
||||
className={clsx(
|
||||
"flex items-center gap-2 text-sm",
|
||||
item.urgent && "font-medium"
|
||||
)}
|
||||
>
|
||||
{getIcon(item.type, item.change)}
|
||||
<span className="text-foreground-muted">{item.message}</span>
|
||||
{item.value && (
|
||||
<span className={clsx("font-mono font-medium", getValueColor(item.type, item.change))}>
|
||||
{item.value}
|
||||
</span>
|
||||
)}
|
||||
{item.change !== undefined && (
|
||||
<span className={clsx(
|
||||
"text-xs font-medium",
|
||||
item.change > 0 ? "text-orange-400" : "text-accent"
|
||||
)}>
|
||||
{item.change > 0 ? '+' : ''}{item.change.toFixed(1)}%
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<style jsx>{`
|
||||
@keyframes ticker {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
.animate-ticker {
|
||||
animation: ticker linear infinite;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Hook to generate ticker items from various data sources
|
||||
export function useTickerItems(
|
||||
trendingTlds: Array<{ tld: string; price_change: number; current_price: number }>,
|
||||
availableDomains: Array<{ name: string }>,
|
||||
hotAuctions: Array<{ domain: string; time_remaining: string }>
|
||||
): TickerItem[] {
|
||||
const items: TickerItem[] = []
|
||||
|
||||
// Add TLD changes
|
||||
trendingTlds.forEach((tld) => {
|
||||
items.push({
|
||||
id: `tld-${tld.tld}`,
|
||||
type: 'tld_change',
|
||||
message: `.${tld.tld}`,
|
||||
value: `$${tld.current_price.toFixed(2)}`,
|
||||
change: tld.price_change,
|
||||
})
|
||||
})
|
||||
|
||||
// Add available domains
|
||||
availableDomains.slice(0, 3).forEach((domain) => {
|
||||
items.push({
|
||||
id: `available-${domain.name}`,
|
||||
type: 'domain_available',
|
||||
message: `${domain.name} is available!`,
|
||||
urgent: true,
|
||||
})
|
||||
})
|
||||
|
||||
// Add ending auctions
|
||||
hotAuctions.slice(0, 3).forEach((auction) => {
|
||||
items.push({
|
||||
id: `auction-${auction.domain}`,
|
||||
type: 'auction_ending',
|
||||
message: `${auction.domain}`,
|
||||
value: auction.time_remaining,
|
||||
})
|
||||
})
|
||||
|
||||
return items
|
||||
}
|
||||
|
||||
@ -323,6 +323,23 @@ class ApiClient {
|
||||
})
|
||||
}
|
||||
|
||||
// Marketplace Listings (Pounce Direct)
|
||||
async getMarketplaceListings() {
|
||||
// TODO: Implement backend endpoint for marketplace listings
|
||||
// For now, return empty array
|
||||
return Promise.resolve({
|
||||
listings: [] as Array<{
|
||||
id: number
|
||||
domain: string
|
||||
price: number
|
||||
is_negotiable: boolean
|
||||
verified: boolean
|
||||
seller_name: string
|
||||
created_at: string
|
||||
}>
|
||||
})
|
||||
}
|
||||
|
||||
// Subscription
|
||||
async getSubscription() {
|
||||
return this.request<{
|
||||
|
||||
Reference in New Issue
Block a user