Yves Gugger
31b02e6790
Some checks failed
CI / Frontend Lint & Type Check (push) Has been cancelled
CI / Frontend Build (push) Has been cancelled
CI / Backend Lint (push) Has been cancelled
CI / Backend Tests (push) Has been cancelled
CI / Docker Build (push) Has been cancelled
CI / Security Scan (push) Has been cancelled
Deploy / Build & Push Images (push) Has been cancelled
Deploy / Deploy to Server (push) Has been cancelled
Deploy / Notify (push) Has been cancelled
1049 lines
54 KiB
TypeScript
Executable File
1049 lines
54 KiB
TypeScript
Executable File
'use client'
|
|
|
|
import { useEffect, useState, useMemo, useCallback } from 'react'
|
|
import { useStore } from '@/lib/store'
|
|
import { api, PortfolioDomain, PortfolioSummary } from '@/lib/api'
|
|
import { Sidebar } from '@/components/Sidebar'
|
|
import { Toast, useToast } from '@/components/Toast'
|
|
import {
|
|
Plus,
|
|
Trash2,
|
|
RefreshCw,
|
|
Loader2,
|
|
Briefcase,
|
|
X,
|
|
Target,
|
|
ExternalLink,
|
|
Gavel,
|
|
TrendingUp,
|
|
Menu,
|
|
Settings,
|
|
Shield,
|
|
ShieldCheck,
|
|
ShieldAlert,
|
|
LogOut,
|
|
Crown,
|
|
Sparkles,
|
|
Coins,
|
|
Tag,
|
|
Zap,
|
|
Eye,
|
|
ChevronUp,
|
|
ChevronDown,
|
|
DollarSign,
|
|
Calendar,
|
|
Edit3,
|
|
CheckCircle,
|
|
AlertCircle,
|
|
TrendingDown,
|
|
BarChart3,
|
|
Copy,
|
|
Check
|
|
} from 'lucide-react'
|
|
import clsx from 'clsx'
|
|
import Link from 'next/link'
|
|
import Image from 'next/image'
|
|
|
|
// ============================================================================
|
|
// HELPERS
|
|
// ============================================================================
|
|
|
|
function getDaysUntilRenewal(renewalDate: string | null): number | null {
|
|
if (!renewalDate) return null
|
|
const renDate = new Date(renewalDate)
|
|
const now = new Date()
|
|
const diffTime = renDate.getTime() - now.getTime()
|
|
return Math.ceil(diffTime / (1000 * 60 * 60 * 24))
|
|
}
|
|
|
|
function formatDate(date: string | null): string {
|
|
if (!date) return '—'
|
|
return new Date(date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
|
|
}
|
|
|
|
function formatCurrency(value: number | null): string {
|
|
if (value === null || value === undefined) return '—'
|
|
return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(value)
|
|
}
|
|
|
|
function formatROI(roi: number | null): string {
|
|
if (roi === null || roi === undefined) return '—'
|
|
const sign = roi >= 0 ? '+' : ''
|
|
return `${sign}${roi.toFixed(0)}%`
|
|
}
|
|
|
|
// ============================================================================
|
|
// MAIN PAGE
|
|
// ============================================================================
|
|
|
|
export default function PortfolioPage() {
|
|
const { subscription, user, logout, checkAuth } = useStore()
|
|
const { toast, showToast, hideToast } = useToast()
|
|
|
|
const [domains, setDomains] = useState<PortfolioDomain[]>([])
|
|
const [summary, setSummary] = useState<PortfolioSummary | null>(null)
|
|
const [loading, setLoading] = useState(true)
|
|
const [refreshingId, setRefreshingId] = useState<number | null>(null)
|
|
const [deletingId, setDeletingId] = useState<number | null>(null)
|
|
const [showAddModal, setShowAddModal] = useState(false)
|
|
const [selectedDomain, setSelectedDomain] = useState<PortfolioDomain | null>(null)
|
|
const [verifyingDomain, setVerifyingDomain] = useState<PortfolioDomain | null>(null)
|
|
const [filter, setFilter] = useState<'all' | 'active' | 'sold'>('all')
|
|
|
|
// Sorting
|
|
const [sortField, setSortField] = useState<'domain' | 'value' | 'roi' | 'renewal'>('domain')
|
|
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc')
|
|
|
|
// Mobile Menu
|
|
const [menuOpen, setMenuOpen] = useState(false)
|
|
|
|
// Tier-based access for listing (same as listing page)
|
|
const tier = subscription?.tier || 'scout'
|
|
const isScout = tier === 'scout'
|
|
const canListForSale = !isScout // Only Trader & Tycoon can list
|
|
|
|
useEffect(() => { checkAuth() }, [checkAuth])
|
|
|
|
const loadData = useCallback(async () => {
|
|
setLoading(true)
|
|
try {
|
|
const [domainsData, summaryData] = await Promise.all([
|
|
api.getPortfolio(),
|
|
api.getPortfolioSummary()
|
|
])
|
|
setDomains(domainsData)
|
|
setSummary(summaryData)
|
|
} catch (err) {
|
|
console.error('Failed to load portfolio:', err)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => { loadData() }, [loadData])
|
|
|
|
// Stats
|
|
const stats = useMemo(() => {
|
|
const active = domains.filter(d => !d.is_sold).length
|
|
const sold = domains.filter(d => d.is_sold).length
|
|
const renewingSoon = domains.filter(d => {
|
|
if (d.is_sold || !d.renewal_date) return false
|
|
const days = getDaysUntilRenewal(d.renewal_date)
|
|
return days !== null && days <= 30 && days > 0
|
|
}).length
|
|
return { total: domains.length, active, sold, renewingSoon }
|
|
}, [domains])
|
|
|
|
// Filtered & Sorted
|
|
const filteredDomains = useMemo(() => {
|
|
let filtered = domains.filter(d => {
|
|
if (filter === 'active') return !d.is_sold
|
|
if (filter === 'sold') return d.is_sold
|
|
return true
|
|
})
|
|
|
|
const mult = sortDirection === 'asc' ? 1 : -1
|
|
filtered.sort((a, b) => {
|
|
switch (sortField) {
|
|
case 'domain': return mult * a.domain.localeCompare(b.domain)
|
|
case 'value': return mult * ((a.estimated_value || 0) - (b.estimated_value || 0))
|
|
case 'roi': return mult * ((a.roi || 0) - (b.roi || 0))
|
|
case 'renewal':
|
|
const aDate = a.renewal_date ? new Date(a.renewal_date).getTime() : Infinity
|
|
const bDate = b.renewal_date ? new Date(b.renewal_date).getTime() : Infinity
|
|
return mult * (aDate - bDate)
|
|
default: return 0
|
|
}
|
|
})
|
|
|
|
return filtered
|
|
}, [domains, filter, sortField, sortDirection])
|
|
|
|
const handleSort = useCallback((field: typeof sortField) => {
|
|
if (sortField === field) {
|
|
setSortDirection(d => d === 'asc' ? 'desc' : 'asc')
|
|
} else {
|
|
setSortField(field)
|
|
setSortDirection('asc')
|
|
}
|
|
}, [sortField])
|
|
|
|
const handleRefreshValue = useCallback(async (id: number) => {
|
|
setRefreshingId(id)
|
|
try {
|
|
const updated = await api.refreshDomainValue(id)
|
|
setDomains(prev => prev.map(d => d.id === id ? updated : d))
|
|
showToast('Value updated', 'success')
|
|
} catch { showToast('Update failed', 'error') }
|
|
finally { setRefreshingId(null) }
|
|
}, [showToast])
|
|
|
|
const handleDelete = useCallback(async (id: number, name: string) => {
|
|
if (!confirm(`Remove ${name} from portfolio?`)) return
|
|
setDeletingId(id)
|
|
try {
|
|
await api.deletePortfolioDomain(id)
|
|
setDomains(prev => prev.filter(d => d.id !== id))
|
|
showToast('Domain removed', 'success')
|
|
loadData() // Refresh summary
|
|
} catch { showToast('Failed', 'error') }
|
|
finally { setDeletingId(null) }
|
|
}, [showToast, loadData])
|
|
|
|
const tierName = subscription?.tier_name || subscription?.tier || 'Scout'
|
|
const TierIcon = tierName === 'Tycoon' ? Crown : tierName === 'Trader' ? TrendingUp : Zap
|
|
|
|
const mobileNavItems = [
|
|
{ href: '/terminal/radar', label: 'Radar', icon: Target, active: false },
|
|
{ href: '/terminal/market', label: 'Market', icon: Gavel, active: false },
|
|
{ href: '/terminal/watchlist', label: 'Watch', icon: Eye, active: false },
|
|
{ href: '/terminal/intel', label: 'Intel', icon: TrendingUp, active: false },
|
|
]
|
|
|
|
const drawerNavSections = [
|
|
{ title: 'Discover', items: [
|
|
{ href: '/terminal/radar', label: 'Radar', icon: Target },
|
|
{ href: '/terminal/market', label: 'Market', icon: Gavel },
|
|
{ href: '/terminal/intel', label: 'Intel', icon: TrendingUp },
|
|
]},
|
|
{ title: 'Manage', items: [
|
|
{ href: '/terminal/watchlist', label: 'Watchlist', icon: Eye },
|
|
{ href: '/terminal/portfolio', label: 'Portfolio', icon: Briefcase, active: true },
|
|
{ href: '/terminal/sniper', label: 'Sniper', icon: Target },
|
|
]},
|
|
{ title: 'Monetize', items: [
|
|
{ href: '/terminal/yield', label: 'Yield', icon: Coins, isNew: true },
|
|
{ href: '/terminal/listing', label: 'For Sale', icon: Tag },
|
|
]}
|
|
]
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#020202]">
|
|
<div className="hidden lg:block"><Sidebar /></div>
|
|
|
|
<main className="lg:pl-[240px]">
|
|
{/* MOBILE HEADER */}
|
|
<header className="lg:hidden sticky top-0 z-40 bg-[#020202]/95 backdrop-blur-md border-b border-white/[0.08]" style={{ paddingTop: 'env(safe-area-inset-top)' }}>
|
|
<div className="px-4 py-3">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-1.5 h-1.5 bg-accent animate-pulse" />
|
|
<span className="text-[10px] font-mono tracking-[0.2em] text-accent uppercase">My Portfolio</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-[10px] font-mono text-white/40">
|
|
<span>{stats.total} domains</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats Grid */}
|
|
<div className="grid grid-cols-4 gap-2">
|
|
<div className="bg-white/[0.02] border border-white/[0.08] p-2">
|
|
<div className="text-lg font-bold text-white tabular-nums">{stats.active}</div>
|
|
<div className="text-[9px] font-mono text-white/30 uppercase tracking-wider">Active</div>
|
|
</div>
|
|
<div className="bg-accent/[0.05] border border-accent/20 p-2">
|
|
<div className="text-lg font-bold text-accent tabular-nums">{formatCurrency(summary?.total_value || 0).replace('$', '')}</div>
|
|
<div className="text-[9px] font-mono text-accent/60 uppercase tracking-wider">Value</div>
|
|
</div>
|
|
<div className="bg-white/[0.02] border border-white/[0.08] p-2">
|
|
<div className={clsx("text-lg font-bold tabular-nums", (summary?.overall_roi || 0) >= 0 ? "text-accent" : "text-rose-400")}>
|
|
{formatROI(summary?.overall_roi || 0)}
|
|
</div>
|
|
<div className="text-[9px] font-mono text-white/30 uppercase tracking-wider">ROI</div>
|
|
</div>
|
|
<div className="bg-orange-500/[0.05] border border-orange-500/20 p-2">
|
|
<div className="text-lg font-bold text-orange-400 tabular-nums">{stats.renewingSoon}</div>
|
|
<div className="text-[9px] font-mono text-orange-400/60 uppercase tracking-wider">Renewing</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* DESKTOP HEADER */}
|
|
<section className="hidden lg:block px-10 pt-10 pb-6">
|
|
<div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-6">
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-1.5 h-1.5 bg-accent animate-pulse" />
|
|
<span className="text-[10px] font-mono tracking-[0.2em] text-accent uppercase">Domain Assets</span>
|
|
</div>
|
|
<h1 className="font-display text-[2.5rem] leading-[1] tracking-[-0.02em]">
|
|
<span className="text-white">Portfolio</span>
|
|
<span className="text-white/30 ml-3 font-mono text-[2rem]">{stats.total}</span>
|
|
</h1>
|
|
</div>
|
|
|
|
<div className="flex gap-8">
|
|
<div className="text-right">
|
|
<div className="text-2xl font-bold text-white font-mono">{formatCurrency(summary?.total_invested || 0)}</div>
|
|
<div className="text-[9px] font-mono text-white/30 uppercase tracking-wider">Invested</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<div className="text-2xl font-bold text-accent font-mono">{formatCurrency(summary?.total_value || 0)}</div>
|
|
<div className="text-[9px] font-mono text-white/30 uppercase tracking-wider">Value</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<div className={clsx("text-2xl font-bold font-mono", (summary?.overall_roi || 0) >= 0 ? "text-accent" : "text-rose-400")}>
|
|
{formatROI(summary?.overall_roi || 0)}
|
|
</div>
|
|
<div className="text-[9px] font-mono text-white/30 uppercase tracking-wider">ROI</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<div className="text-2xl font-bold text-orange-400 font-mono">{stats.renewingSoon}</div>
|
|
<div className="text-[9px] font-mono text-white/30 uppercase tracking-wider">Renewing</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ADD DOMAIN + FILTERS */}
|
|
<section className="px-4 lg:px-10 py-4 border-b border-white/[0.08]">
|
|
<div className="flex items-center justify-between gap-4 mb-4">
|
|
<button
|
|
onClick={() => setShowAddModal(true)}
|
|
className="flex items-center gap-2 px-4 py-2.5 bg-accent text-black text-xs font-bold uppercase tracking-wider hover:bg-white transition-colors"
|
|
>
|
|
<Plus className="w-4 h-4" />Add Domain
|
|
</button>
|
|
|
|
{/* Filters */}
|
|
<div className="flex items-center gap-1">
|
|
{[
|
|
{ value: 'all', label: 'All', count: stats.total },
|
|
{ value: 'active', label: 'Active', count: stats.active },
|
|
{ value: 'sold', label: 'Sold', count: stats.sold },
|
|
].map((item) => (
|
|
<button
|
|
key={item.value}
|
|
onClick={() => setFilter(item.value as typeof filter)}
|
|
className={clsx(
|
|
"px-3 py-2 text-[10px] font-mono uppercase tracking-wider border transition-colors",
|
|
filter === item.value
|
|
? "bg-white/10 text-white border-white/20"
|
|
: "text-white/40 border-transparent hover:text-white/60"
|
|
)}
|
|
>
|
|
{item.label} ({item.count})
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* DOMAIN LIST */}
|
|
<section className="px-4 lg:px-10 py-4 pb-28 lg:pb-10">
|
|
{loading ? (
|
|
<div className="flex items-center justify-center py-20">
|
|
<Loader2 className="w-6 h-6 text-accent animate-spin" />
|
|
</div>
|
|
) : !filteredDomains.length ? (
|
|
<div className="text-center py-16 border border-dashed border-white/[0.08]">
|
|
<Briefcase className="w-8 h-8 text-white/10 mx-auto mb-3" />
|
|
<p className="text-white/40 text-sm font-mono">No domains in your portfolio</p>
|
|
<p className="text-white/25 text-xs font-mono mt-1">Add your first domain to start tracking</p>
|
|
<button
|
|
onClick={() => setShowAddModal(true)}
|
|
className="mt-4 inline-flex items-center gap-2 px-4 py-2 bg-accent text-black text-xs font-bold uppercase"
|
|
>
|
|
<Plus className="w-4 h-4" />Add Domain
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-px bg-white/[0.04] border border-white/[0.08]">
|
|
{/* Desktop Table Header */}
|
|
<div className="hidden lg:grid grid-cols-[1fr_100px_100px_100px_80px_100px] gap-4 px-3 py-2 text-[10px] font-mono text-white/40 uppercase tracking-wider border-b border-white/[0.08]">
|
|
<button onClick={() => handleSort('domain')} className="flex items-center gap-1 hover:text-white/60 text-left">
|
|
Domain
|
|
{sortField === 'domain' && (sortDirection === 'asc' ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />)}
|
|
</button>
|
|
<div className="text-right">Purchase</div>
|
|
<button onClick={() => handleSort('value')} className="flex items-center gap-1 justify-end hover:text-white/60">
|
|
Value
|
|
{sortField === 'value' && (sortDirection === 'asc' ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />)}
|
|
</button>
|
|
<button onClick={() => handleSort('roi')} className="flex items-center gap-1 justify-center hover:text-white/60">
|
|
ROI
|
|
{sortField === 'roi' && (sortDirection === 'asc' ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />)}
|
|
</button>
|
|
<button onClick={() => handleSort('renewal')} className="flex items-center gap-1 justify-center hover:text-white/60">
|
|
Renewal
|
|
{sortField === 'renewal' && (sortDirection === 'asc' ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />)}
|
|
</button>
|
|
<div className="text-right">Actions</div>
|
|
</div>
|
|
|
|
{filteredDomains.map((domain) => {
|
|
const daysUntilRenewal = getDaysUntilRenewal(domain.renewal_date)
|
|
const isRenewingSoon = daysUntilRenewal !== null && daysUntilRenewal <= 30 && daysUntilRenewal > 0
|
|
const roiPositive = (domain.roi || 0) >= 0
|
|
|
|
return (
|
|
<div key={domain.id} className="bg-[#020202] hover:bg-white/[0.02] transition-all group">
|
|
{/* Mobile Row */}
|
|
<div className="lg:hidden p-3">
|
|
<div className="flex items-start justify-between gap-3 mb-2">
|
|
<div className="flex items-center gap-3 min-w-0 flex-1">
|
|
<div className={clsx(
|
|
"w-8 h-8 flex items-center justify-center border shrink-0",
|
|
domain.is_sold ? "bg-white/[0.02] border-white/[0.06]" : "bg-accent/10 border-accent/20"
|
|
)}>
|
|
{domain.is_sold ? <CheckCircle className="w-4 h-4 text-white/30" /> : <Briefcase className="w-4 h-4 text-accent" />}
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="text-sm font-bold text-white font-mono truncate">{domain.domain}</div>
|
|
<div className="text-[10px] font-mono text-white/30">
|
|
{domain.registrar || 'Unknown registrar'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-right shrink-0">
|
|
<div className="text-sm font-bold text-accent font-mono">{formatCurrency(domain.estimated_value)}</div>
|
|
<div className={clsx("text-[10px] font-mono", roiPositive ? "text-accent" : "text-rose-400")}>
|
|
{formatROI(domain.roi)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
{!domain.is_sold && (
|
|
domain.is_dns_verified ? (
|
|
canListForSale && (
|
|
<Link
|
|
href={`/terminal/listing?domain=${encodeURIComponent(domain.domain)}`}
|
|
className="flex-1 py-2 bg-amber-400/10 border border-amber-400/20 text-amber-400 text-[10px] font-bold uppercase flex items-center justify-center gap-1"
|
|
>
|
|
<Tag className="w-3 h-3" />Sell
|
|
</Link>
|
|
)
|
|
) : (
|
|
<button
|
|
onClick={() => setVerifyingDomain(domain)}
|
|
className="flex-1 py-2 bg-blue-400/10 border border-blue-400/20 text-blue-400 text-[10px] font-bold uppercase flex items-center justify-center gap-1"
|
|
>
|
|
<ShieldAlert className="w-3 h-3" />Verify
|
|
</button>
|
|
)
|
|
)}
|
|
<button
|
|
onClick={() => setSelectedDomain(domain)}
|
|
className="flex-1 py-2 border border-white/[0.08] text-[10px] font-mono text-white/40 flex items-center justify-center gap-1"
|
|
>
|
|
<Edit3 className="w-3 h-3" />Details
|
|
</button>
|
|
<button
|
|
onClick={() => handleDelete(domain.id, domain.domain)}
|
|
disabled={deletingId === domain.id}
|
|
className="px-4 py-2 border border-white/[0.08] text-white/40 hover:text-rose-400"
|
|
>
|
|
{deletingId === domain.id ? <Loader2 className="w-4 h-4 animate-spin" /> : <Trash2 className="w-4 h-4" />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Desktop Row */}
|
|
<div className="hidden lg:grid grid-cols-[1fr_100px_100px_100px_80px_100px] gap-4 items-center p-3">
|
|
<div className="flex items-center gap-3 min-w-0 flex-1">
|
|
<div className={clsx(
|
|
"w-8 h-8 flex items-center justify-center border shrink-0",
|
|
domain.is_sold ? "bg-white/[0.02] border-white/[0.06]" :
|
|
domain.is_dns_verified ? "bg-accent/10 border-accent/20" : "bg-blue-400/10 border-blue-400/20"
|
|
)}>
|
|
{domain.is_sold ? <CheckCircle className="w-4 h-4 text-white/30" /> :
|
|
domain.is_dns_verified ? <ShieldCheck className="w-4 h-4 text-accent" /> : <ShieldAlert className="w-4 h-4 text-blue-400" />}
|
|
</div>
|
|
<div className="min-w-0">
|
|
<div className="text-sm font-bold text-white font-mono truncate group-hover:text-accent transition-colors">{domain.domain}</div>
|
|
<div className="flex items-center gap-2 text-[10px] font-mono text-white/30">
|
|
<span>{domain.registrar || 'Unknown'}</span>
|
|
{domain.is_sold && <span className="px-1 py-0.5 bg-white/5 text-white/40">SOLD</span>}
|
|
{!domain.is_sold && domain.is_dns_verified && <span className="px-1 py-0.5 bg-accent/10 text-accent">VERIFIED</span>}
|
|
{!domain.is_sold && !domain.is_dns_verified && <span className="px-1 py-0.5 bg-blue-400/10 text-blue-400">UNVERIFIED</span>}
|
|
</div>
|
|
</div>
|
|
<a href={`https://${domain.domain}`} target="_blank" className="opacity-0 group-hover:opacity-50 hover:!opacity-100 transition-opacity ml-2">
|
|
<ExternalLink className="w-3.5 h-3.5 text-white/40" />
|
|
</a>
|
|
</div>
|
|
|
|
{/* Purchase */}
|
|
<div className="text-right text-xs font-mono text-white/50">
|
|
{formatCurrency(domain.purchase_price)}
|
|
</div>
|
|
|
|
{/* Value */}
|
|
<div className="text-right text-sm font-bold font-mono text-accent">
|
|
{formatCurrency(domain.estimated_value)}
|
|
</div>
|
|
|
|
{/* ROI */}
|
|
<div className="text-center">
|
|
<span className={clsx(
|
|
"text-xs font-mono font-bold px-2 py-0.5 flex items-center justify-center gap-1",
|
|
roiPositive ? "text-accent bg-accent/10" : "text-rose-400 bg-rose-400/10"
|
|
)}>
|
|
{roiPositive ? <TrendingUp className="w-3 h-3" /> : <TrendingDown className="w-3 h-3" />}
|
|
{formatROI(domain.roi)}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Renewal */}
|
|
<div className="text-center text-xs font-mono">
|
|
{domain.is_sold ? (
|
|
<span className="text-white/30">—</span>
|
|
) : isRenewingSoon ? (
|
|
<span className="text-orange-400 font-bold">{daysUntilRenewal}d</span>
|
|
) : (
|
|
<span className="text-white/50">{formatDate(domain.renewal_date)}</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="flex items-center gap-1 justify-end opacity-50 group-hover:opacity-100 transition-opacity">
|
|
{/* Verification Status & Actions */}
|
|
{!domain.is_sold && (
|
|
domain.is_dns_verified ? (
|
|
canListForSale && (
|
|
<Link
|
|
href={`/terminal/listing?domain=${encodeURIComponent(domain.domain)}`}
|
|
className="h-7 px-2 flex items-center gap-1 text-amber-400 text-[9px] font-bold uppercase border border-amber-400/20 bg-amber-400/10 hover:bg-amber-400/20 transition-all"
|
|
>
|
|
<Tag className="w-3 h-3" />Sell
|
|
</Link>
|
|
)
|
|
) : (
|
|
<button
|
|
onClick={() => setVerifyingDomain(domain)}
|
|
className="h-7 px-2 flex items-center gap-1 text-blue-400 text-[9px] font-bold uppercase border border-blue-400/20 bg-blue-400/10 hover:bg-blue-400/20 transition-all"
|
|
>
|
|
<ShieldAlert className="w-3 h-3" />Verify
|
|
</button>
|
|
)
|
|
)}
|
|
<button
|
|
onClick={() => setSelectedDomain(domain)}
|
|
className="w-7 h-7 flex items-center justify-center text-white/20 hover:text-white border border-white/10 hover:bg-white/5 transition-all"
|
|
>
|
|
<Edit3 className="w-3.5 h-3.5" />
|
|
</button>
|
|
<button
|
|
onClick={() => handleRefreshValue(domain.id)}
|
|
disabled={refreshingId === domain.id}
|
|
className="w-7 h-7 flex items-center justify-center text-white/20 hover:text-white border border-white/10 hover:bg-white/5 transition-all"
|
|
>
|
|
<RefreshCw className={clsx("w-3.5 h-3.5", refreshingId === domain.id && "animate-spin")} />
|
|
</button>
|
|
<button
|
|
onClick={() => handleDelete(domain.id, domain.domain)}
|
|
disabled={deletingId === domain.id}
|
|
className="w-7 h-7 flex items-center justify-center text-white/20 hover:text-rose-400 border border-white/10 hover:border-rose-400/20 hover:bg-rose-500/10 transition-all"
|
|
>
|
|
{deletingId === domain.id ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Trash2 className="w-3.5 h-3.5" />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
</section>
|
|
|
|
{/* MOBILE BOTTOM NAV */}
|
|
<nav className="lg:hidden fixed bottom-0 left-0 right-0 z-50 bg-[#020202] border-t border-white/[0.08]" style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}>
|
|
<div className="flex items-stretch h-14">
|
|
{mobileNavItems.map((item) => (
|
|
<Link key={item.href} href={item.href}
|
|
className={clsx("flex-1 flex flex-col items-center justify-center gap-0.5 relative transition-colors", item.active ? "text-accent" : "text-white/40")}>
|
|
{item.active && <div className="absolute top-0 left-1/2 -translate-x-1/2 w-10 h-0.5 bg-accent" />}
|
|
<item.icon className="w-5 h-5" />
|
|
<span className="text-[9px] font-mono uppercase tracking-wider">{item.label}</span>
|
|
</Link>
|
|
))}
|
|
<button onClick={() => setMenuOpen(true)} className="flex-1 flex flex-col items-center justify-center gap-0.5 text-white/40">
|
|
<Menu className="w-5 h-5" /><span className="text-[9px] font-mono uppercase tracking-wider">Menu</span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
{/* MOBILE DRAWER */}
|
|
{menuOpen && <MobileDrawer user={user} tierName={tierName} TierIcon={TierIcon} sections={drawerNavSections} onClose={() => setMenuOpen(false)} onLogout={() => { logout(); setMenuOpen(false) }} />}
|
|
</main>
|
|
|
|
{/* ADD DOMAIN MODAL */}
|
|
{showAddModal && <AddDomainModal onClose={() => setShowAddModal(false)} onSuccess={() => { loadData(); setShowAddModal(false) }} />}
|
|
|
|
{/* DOMAIN DETAIL MODAL */}
|
|
{selectedDomain && <DomainDetailModal domain={selectedDomain} onClose={() => setSelectedDomain(null)} onUpdate={loadData} canListForSale={canListForSale} />}
|
|
|
|
{/* DNS VERIFICATION MODAL */}
|
|
{verifyingDomain && <DnsVerificationModal domain={verifyingDomain} onClose={() => setVerifyingDomain(null)} onSuccess={() => { loadData(); setVerifyingDomain(null) }} />}
|
|
|
|
{toast && <Toast message={toast.message} type={toast.type} onClose={hideToast} />}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ============================================================================
|
|
// ADD DOMAIN MODAL
|
|
// ============================================================================
|
|
|
|
function AddDomainModal({ onClose, onSuccess }: { onClose: () => void; onSuccess: () => void }) {
|
|
const [domain, setDomain] = useState('')
|
|
const [purchasePrice, setPurchasePrice] = useState('')
|
|
const [purchaseDate, setPurchaseDate] = useState('')
|
|
const [registrar, setRegistrar] = useState('')
|
|
const [renewalDate, setRenewalDate] = useState('')
|
|
const [renewalCost, setRenewalCost] = useState('')
|
|
const [loading, setLoading] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
if (!domain.trim()) return
|
|
setLoading(true)
|
|
setError(null)
|
|
try {
|
|
await api.addPortfolioDomain({
|
|
domain: domain.trim(),
|
|
purchase_price: purchasePrice ? parseFloat(purchasePrice) : undefined,
|
|
purchase_date: purchaseDate || undefined,
|
|
registrar: registrar || undefined,
|
|
renewal_date: renewalDate || undefined,
|
|
renewal_cost: renewalCost ? parseFloat(renewalCost) : undefined,
|
|
})
|
|
onSuccess()
|
|
} catch (err: any) {
|
|
setError(err.message || 'Failed to add domain')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[110] bg-black/80 flex items-center justify-center p-4" onClick={onClose}>
|
|
<div className="w-full max-w-md bg-[#0A0A0A] border border-white/[0.08]" onClick={(e) => e.stopPropagation()}>
|
|
<div className="flex items-center justify-between p-4 border-b border-white/[0.08]">
|
|
<div className="flex items-center gap-2"><Briefcase className="w-4 h-4 text-accent" /><span className="text-xs font-mono text-accent uppercase tracking-wider">Add to Portfolio</span></div>
|
|
<button onClick={onClose} className="w-8 h-8 flex items-center justify-center border border-white/10 text-white/40"><X className="w-4 h-4" /></button>
|
|
</div>
|
|
<form onSubmit={handleSubmit} className="p-4 space-y-4">
|
|
{error && <div className="p-2 bg-rose-500/10 border border-rose-500/20 text-rose-400 text-xs">{error}</div>}
|
|
|
|
<div>
|
|
<label className="block text-[9px] font-mono text-white/40 uppercase mb-1.5">Domain *</label>
|
|
<input type="text" value={domain} onChange={(e) => setDomain(e.target.value)} required
|
|
className="w-full px-3 py-2.5 bg-white/5 border border-white/10 text-white text-sm font-mono placeholder:text-white/20 outline-none focus:border-accent/50" placeholder="example.com" />
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label className="block text-[9px] font-mono text-white/40 uppercase mb-1.5">Purchase Price (USD)</label>
|
|
<input type="number" value={purchasePrice} onChange={(e) => setPurchasePrice(e.target.value)} min="0"
|
|
className="w-full px-3 py-2.5 bg-white/5 border border-white/10 text-white text-sm font-mono placeholder:text-white/20 outline-none focus:border-accent/50" placeholder="0" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-[9px] font-mono text-white/40 uppercase mb-1.5">Purchase Date</label>
|
|
<input type="date" value={purchaseDate} onChange={(e) => setPurchaseDate(e.target.value)}
|
|
className="w-full px-3 py-2.5 bg-white/5 border border-white/10 text-white text-sm font-mono outline-none focus:border-accent/50" />
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-[9px] font-mono text-white/40 uppercase mb-1.5">Registrar</label>
|
|
<input type="text" value={registrar} onChange={(e) => setRegistrar(e.target.value)}
|
|
className="w-full px-3 py-2.5 bg-white/5 border border-white/10 text-white text-sm font-mono placeholder:text-white/20 outline-none focus:border-accent/50" placeholder="Namecheap, GoDaddy, etc." />
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label className="block text-[9px] font-mono text-white/40 uppercase mb-1.5">Renewal Date</label>
|
|
<input type="date" value={renewalDate} onChange={(e) => setRenewalDate(e.target.value)}
|
|
className="w-full px-3 py-2.5 bg-white/5 border border-white/10 text-white text-sm font-mono outline-none focus:border-accent/50" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-[9px] font-mono text-white/40 uppercase mb-1.5">Renewal Cost (USD)</label>
|
|
<input type="number" value={renewalCost} onChange={(e) => setRenewalCost(e.target.value)} min="0"
|
|
className="w-full px-3 py-2.5 bg-white/5 border border-white/10 text-white text-sm font-mono placeholder:text-white/20 outline-none focus:border-accent/50" placeholder="0" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-3 pt-2">
|
|
<button type="button" onClick={onClose} className="flex-1 py-2.5 border border-white/10 text-white/60 text-xs font-mono uppercase">Cancel</button>
|
|
<button type="submit" disabled={loading || !domain.trim()} className="flex-1 flex items-center justify-center gap-2 py-2.5 bg-accent text-black text-xs font-bold uppercase disabled:opacity-50">
|
|
{loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Plus className="w-4 h-4" />}Add
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ============================================================================
|
|
// DOMAIN DETAIL MODAL
|
|
// ============================================================================
|
|
|
|
function DomainDetailModal({ domain, onClose, onUpdate, canListForSale }: { domain: PortfolioDomain; onClose: () => void; onUpdate: () => void; canListForSale: boolean }) {
|
|
const [notes, setNotes] = useState(domain.notes || '')
|
|
const [tags, setTags] = useState(domain.tags || '')
|
|
const [showSellModal, setShowSellModal] = useState(false)
|
|
const [saving, setSaving] = useState(false)
|
|
|
|
const handleSave = async () => {
|
|
setSaving(true)
|
|
try {
|
|
await api.updatePortfolioDomain(domain.id, { notes, tags })
|
|
onUpdate()
|
|
onClose()
|
|
} catch {}
|
|
finally { setSaving(false) }
|
|
}
|
|
|
|
const handleMarkSold = async (saleDate: string, salePrice: number) => {
|
|
try {
|
|
await api.markDomainSold(domain.id, saleDate, salePrice)
|
|
onUpdate()
|
|
onClose()
|
|
} catch {}
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[110] bg-black/80 flex items-center justify-center p-4" onClick={onClose}>
|
|
<div className="w-full max-w-lg bg-[#0A0A0A] border border-white/[0.08]" onClick={(e) => e.stopPropagation()}>
|
|
<div className="flex items-center justify-between p-4 border-b border-white/[0.08]">
|
|
<div className="flex items-center gap-2"><BarChart3 className="w-4 h-4 text-accent" /><span className="text-xs font-mono text-accent uppercase tracking-wider">Domain Details</span></div>
|
|
<button onClick={onClose} className="w-8 h-8 flex items-center justify-center border border-white/10 text-white/40"><X className="w-4 h-4" /></button>
|
|
</div>
|
|
|
|
<div className="p-4 space-y-4">
|
|
{/* Domain Header */}
|
|
<div className="text-center py-4 border-b border-white/[0.08]">
|
|
<h2 className="text-xl font-bold font-mono text-white">{domain.domain}</h2>
|
|
<p className="text-xs font-mono text-white/40 mt-1">{domain.registrar || 'Unknown registrar'}</p>
|
|
</div>
|
|
|
|
{/* Stats Grid */}
|
|
<div className="grid grid-cols-3 gap-3">
|
|
<div className="p-3 bg-white/[0.02] border border-white/[0.08] text-center">
|
|
<div className="text-lg font-bold text-white font-mono">{formatCurrency(domain.purchase_price)}</div>
|
|
<div className="text-[9px] font-mono text-white/30 uppercase">Purchased</div>
|
|
</div>
|
|
<div className="p-3 bg-accent/[0.05] border border-accent/20 text-center">
|
|
<div className="text-lg font-bold text-accent font-mono">{formatCurrency(domain.estimated_value)}</div>
|
|
<div className="text-[9px] font-mono text-accent/60 uppercase">Est. Value</div>
|
|
</div>
|
|
<div className={clsx("p-3 border text-center", (domain.roi || 0) >= 0 ? "bg-accent/[0.05] border-accent/20" : "bg-rose-500/[0.05] border-rose-500/20")}>
|
|
<div className={clsx("text-lg font-bold font-mono", (domain.roi || 0) >= 0 ? "text-accent" : "text-rose-400")}>{formatROI(domain.roi)}</div>
|
|
<div className="text-[9px] font-mono text-white/30 uppercase">ROI</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Dates */}
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div className="p-3 bg-white/[0.02] border border-white/[0.08]">
|
|
<div className="text-[9px] font-mono text-white/30 uppercase mb-1">Purchase Date</div>
|
|
<div className="text-sm font-mono text-white">{formatDate(domain.purchase_date)}</div>
|
|
</div>
|
|
<div className="p-3 bg-white/[0.02] border border-white/[0.08]">
|
|
<div className="text-[9px] font-mono text-white/30 uppercase mb-1">Renewal Date</div>
|
|
<div className="text-sm font-mono text-white">{formatDate(domain.renewal_date)}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Notes */}
|
|
<div>
|
|
<label className="block text-[9px] font-mono text-white/40 uppercase mb-1.5">Notes</label>
|
|
<textarea value={notes} onChange={(e) => setNotes(e.target.value)} rows={3}
|
|
className="w-full px-3 py-2.5 bg-white/5 border border-white/10 text-white text-sm font-mono placeholder:text-white/20 outline-none focus:border-accent/50 resize-none" placeholder="Add notes..." />
|
|
</div>
|
|
|
|
{/* Tags */}
|
|
<div>
|
|
<label className="block text-[9px] font-mono text-white/40 uppercase mb-1.5">Tags (comma-separated)</label>
|
|
<input type="text" value={tags} onChange={(e) => setTags(e.target.value)}
|
|
className="w-full px-3 py-2.5 bg-white/5 border border-white/10 text-white text-sm font-mono placeholder:text-white/20 outline-none focus:border-accent/50" placeholder="premium, 3-letter, .com" />
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="space-y-3 pt-2">
|
|
{!domain.is_sold && (
|
|
<div className="flex gap-3">
|
|
{canListForSale ? (
|
|
<Link
|
|
href={`/terminal/listing?domain=${encodeURIComponent(domain.domain)}`}
|
|
className="flex-1 py-2.5 bg-amber-400/10 border border-amber-400/20 text-amber-400 text-xs font-bold uppercase hover:bg-amber-400/20 transition-colors flex items-center justify-center gap-2"
|
|
>
|
|
<Tag className="w-4 h-4" />List for Sale
|
|
</Link>
|
|
) : (
|
|
<Link
|
|
href="/pricing"
|
|
className="flex-1 py-2.5 bg-white/5 border border-white/10 text-white/40 text-xs font-mono uppercase hover:bg-white/10 transition-colors flex items-center justify-center gap-2"
|
|
>
|
|
<Sparkles className="w-4 h-4" />Upgrade to Sell
|
|
</Link>
|
|
)}
|
|
<button onClick={() => setShowSellModal(true)} className="flex-1 py-2.5 border border-white/10 text-white/60 text-xs font-mono uppercase hover:bg-white/5 transition-colors flex items-center justify-center gap-2">
|
|
<DollarSign className="w-4 h-4" />Mark as Sold
|
|
</button>
|
|
</div>
|
|
)}
|
|
<button onClick={handleSave} disabled={saving} className="w-full flex items-center justify-center gap-2 py-2.5 bg-accent text-black text-xs font-bold uppercase disabled:opacity-50">
|
|
{saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <CheckCircle className="w-4 h-4" />}Save
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Sell Modal */}
|
|
{showSellModal && <SellModal onClose={() => setShowSellModal(false)} onConfirm={handleMarkSold} />}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ============================================================================
|
|
// SELL MODAL
|
|
// ============================================================================
|
|
|
|
function SellModal({ onClose, onConfirm }: { onClose: () => void; onConfirm: (date: string, price: number) => void }) {
|
|
const [saleDate, setSaleDate] = useState(new Date().toISOString().split('T')[0])
|
|
const [salePrice, setSalePrice] = useState('')
|
|
|
|
return (
|
|
<div className="absolute inset-0 bg-black/90 flex items-center justify-center p-4" onClick={onClose}>
|
|
<div className="w-full max-w-sm bg-[#0A0A0A] border border-white/[0.08] p-4" onClick={(e) => e.stopPropagation()}>
|
|
<h3 className="text-sm font-bold text-white mb-4">Mark as Sold</h3>
|
|
<div className="space-y-3 mb-4">
|
|
<div>
|
|
<label className="block text-[9px] font-mono text-white/40 uppercase mb-1.5">Sale Date</label>
|
|
<input type="date" value={saleDate} onChange={(e) => setSaleDate(e.target.value)}
|
|
className="w-full px-3 py-2.5 bg-white/5 border border-white/10 text-white text-sm font-mono outline-none focus:border-accent/50" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-[9px] font-mono text-white/40 uppercase mb-1.5">Sale Price (USD) *</label>
|
|
<input type="number" value={salePrice} onChange={(e) => setSalePrice(e.target.value)} min="0" required
|
|
className="w-full px-3 py-2.5 bg-white/5 border border-white/10 text-white text-sm font-mono outline-none focus:border-accent/50" placeholder="0" />
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-3">
|
|
<button onClick={onClose} className="flex-1 py-2.5 border border-white/10 text-white/60 text-xs font-mono uppercase">Cancel</button>
|
|
<button onClick={() => onConfirm(saleDate, parseFloat(salePrice) || 0)} disabled={!salePrice} className="flex-1 py-2.5 bg-accent text-black text-xs font-bold uppercase disabled:opacity-50">Confirm</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ============================================================================
|
|
// MOBILE DRAWER
|
|
// ============================================================================
|
|
|
|
function MobileDrawer({ user, tierName, TierIcon, sections, onClose, onLogout }: any) {
|
|
return (
|
|
<div className="lg:hidden fixed inset-0 z-[100]">
|
|
<div className="absolute inset-0 bg-black/80" onClick={onClose} />
|
|
<div className="absolute top-0 right-0 bottom-0 w-[80%] max-w-[300px] bg-[#0A0A0A] border-l border-white/[0.08] flex flex-col" style={{ paddingTop: 'env(safe-area-inset-top)', paddingBottom: 'env(safe-area-inset-bottom)' }}>
|
|
<div className="flex items-center justify-between p-4 border-b border-white/[0.08]">
|
|
<div className="flex items-center gap-3">
|
|
<Image src="/pounce-puma.png" alt="Pounce" width={28} height={28} className="object-contain" />
|
|
<div><h2 className="text-sm font-bold text-white">POUNCE</h2><p className="text-[9px] text-white/40 font-mono uppercase">Terminal v1.0</p></div>
|
|
</div>
|
|
<button onClick={onClose} className="w-8 h-8 flex items-center justify-center border border-white/10 text-white/60"><X className="w-4 h-4" /></button>
|
|
</div>
|
|
<div className="flex-1 overflow-y-auto py-4">
|
|
{sections.map((section: any) => (
|
|
<div key={section.title} className="mb-4">
|
|
<div className="flex items-center gap-2 px-4 mb-2"><div className="w-1 h-3 bg-accent" /><span className="text-[9px] font-bold text-white/30 uppercase tracking-[0.2em]">{section.title}</span></div>
|
|
{section.items.map((item: any) => (
|
|
<Link key={item.href} href={item.href} onClick={onClose} className={clsx("flex items-center gap-3 px-4 py-2.5 border-l-2 border-transparent", item.active ? "text-accent border-accent bg-white/[0.02]" : "text-white/60")}>
|
|
<item.icon className="w-4 h-4 text-white/30" /><span className="text-sm font-medium flex-1">{item.label}</span>
|
|
{item.isNew && <span className="px-1.5 py-0.5 text-[8px] font-bold bg-accent text-black">NEW</span>}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
))}
|
|
<div className="pt-3 border-t border-white/[0.08] mx-4">
|
|
<Link href="/terminal/settings" onClick={onClose} className="flex items-center gap-3 py-2.5 text-white/50"><Settings className="w-4 h-4" /><span className="text-sm">Settings</span></Link>
|
|
{user?.is_admin && <Link href="/admin" onClick={onClose} className="flex items-center gap-3 py-2.5 text-amber-500/70"><Shield className="w-4 h-4" /><span className="text-sm">Admin</span></Link>}
|
|
</div>
|
|
</div>
|
|
<div className="p-4 bg-white/[0.02] border-t border-white/[0.08]">
|
|
<div className="flex items-center gap-3 mb-3">
|
|
<div className="w-8 h-8 bg-accent/10 border border-accent/20 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-bold text-white truncate">{user?.name || user?.email?.split('@')[0] || 'User'}</p><p className="text-[9px] font-mono text-white/40 uppercase">{tierName}</p></div>
|
|
</div>
|
|
{tierName === 'Scout' && <Link href="/pricing" onClick={onClose} className="flex items-center justify-center gap-2 w-full py-2.5 bg-accent text-black text-xs font-bold uppercase mb-2"><Sparkles className="w-3 h-3" />Upgrade</Link>}
|
|
<button onClick={onLogout} className="flex items-center justify-center gap-2 w-full py-2 border border-white/10 text-white/40 text-[10px] font-mono uppercase"><LogOut className="w-3 h-3" />Sign out</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ============================================================================
|
|
// DNS VERIFICATION MODAL
|
|
// ============================================================================
|
|
|
|
function DnsVerificationModal({ domain, onClose, onSuccess }: { domain: PortfolioDomain; onClose: () => void; onSuccess: () => void }) {
|
|
const [step, setStep] = useState<'loading' | 'instructions' | 'checking'>('loading')
|
|
const [verificationData, setVerificationData] = useState<{
|
|
verification_code: string
|
|
dns_record_name: string
|
|
dns_record_value: string
|
|
instructions: string
|
|
} | null>(null)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [checkResult, setCheckResult] = useState<string | null>(null)
|
|
const [copied, setCopied] = useState(false)
|
|
|
|
useEffect(() => {
|
|
const startVerification = async () => {
|
|
try {
|
|
const data = await api.startPortfolioDnsVerification(domain.id)
|
|
setVerificationData({
|
|
verification_code: data.verification_code,
|
|
dns_record_name: data.dns_record_name,
|
|
dns_record_value: data.dns_record_value,
|
|
instructions: data.instructions,
|
|
})
|
|
setStep('instructions')
|
|
} catch (err: any) {
|
|
setError(err.message || 'Failed to start verification')
|
|
setStep('instructions')
|
|
}
|
|
}
|
|
startVerification()
|
|
}, [domain.id])
|
|
|
|
const handleCheck = async () => {
|
|
setStep('checking')
|
|
setCheckResult(null)
|
|
setError(null)
|
|
try {
|
|
const result = await api.checkPortfolioDnsVerification(domain.id)
|
|
if (result.verified) {
|
|
onSuccess()
|
|
} else {
|
|
setCheckResult(result.message)
|
|
setStep('instructions')
|
|
}
|
|
} catch (err: any) {
|
|
setError(err.message || 'Verification check failed')
|
|
setStep('instructions')
|
|
}
|
|
}
|
|
|
|
const handleCopy = (text: string) => {
|
|
navigator.clipboard.writeText(text)
|
|
setCopied(true)
|
|
setTimeout(() => setCopied(false), 2000)
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[110] bg-black/80 flex items-center justify-center p-4" onClick={onClose}>
|
|
<div className="w-full max-w-lg bg-[#0A0A0A] border border-white/[0.08]" onClick={(e) => e.stopPropagation()}>
|
|
<div className="flex items-center justify-between p-4 border-b border-white/[0.08]">
|
|
<div className="flex items-center gap-2">
|
|
<ShieldCheck className="w-4 h-4 text-blue-400" />
|
|
<span className="text-xs font-mono text-blue-400 uppercase tracking-wider">Verify Domain Ownership</span>
|
|
</div>
|
|
<button onClick={onClose} className="w-8 h-8 flex items-center justify-center border border-white/10 text-white/40">
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-4 space-y-4">
|
|
{/* Domain Header */}
|
|
<div className="text-center py-3 border-b border-white/[0.08]">
|
|
<h2 className="text-xl font-bold font-mono text-white">{domain.domain}</h2>
|
|
<p className="text-xs font-mono text-white/40 mt-1">DNS Verification Required</p>
|
|
</div>
|
|
|
|
{step === 'loading' && (
|
|
<div className="flex items-center justify-center py-8">
|
|
<Loader2 className="w-6 h-6 text-accent animate-spin" />
|
|
</div>
|
|
)}
|
|
|
|
{step === 'instructions' && verificationData && (
|
|
<>
|
|
{/* Instructions */}
|
|
<div className="p-4 bg-blue-400/5 border border-blue-400/20">
|
|
<h3 className="text-sm font-bold text-white mb-2">Add this TXT record to your DNS:</h3>
|
|
<div className="space-y-3">
|
|
<div>
|
|
<div className="text-[9px] font-mono text-white/40 uppercase mb-1">Host / Name</div>
|
|
<div className="flex items-center gap-2">
|
|
<code className="flex-1 px-3 py-2 bg-black/50 text-sm font-mono text-white break-all">_pounce</code>
|
|
<button onClick={() => handleCopy('_pounce')} className="w-8 h-8 flex items-center justify-center border border-white/10 text-white/40 hover:text-white">
|
|
{copied ? <Check className="w-4 h-4 text-accent" /> : <Copy className="w-4 h-4" />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[9px] font-mono text-white/40 uppercase mb-1">Type</div>
|
|
<code className="block px-3 py-2 bg-black/50 text-sm font-mono text-white">TXT</code>
|
|
</div>
|
|
<div>
|
|
<div className="text-[9px] font-mono text-white/40 uppercase mb-1">Value</div>
|
|
<div className="flex items-center gap-2">
|
|
<code className="flex-1 px-3 py-2 bg-black/50 text-sm font-mono text-accent break-all">{verificationData.verification_code}</code>
|
|
<button onClick={() => handleCopy(verificationData.verification_code)} className="w-8 h-8 flex items-center justify-center border border-white/10 text-white/40 hover:text-white">
|
|
{copied ? <Check className="w-4 h-4 text-accent" /> : <Copy className="w-4 h-4" />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Info */}
|
|
<div className="p-3 bg-white/[0.02] border border-white/[0.08] text-xs text-white/50 font-mono">
|
|
<p>DNS changes can take up to 48 hours to propagate, but usually complete within minutes.</p>
|
|
</div>
|
|
|
|
{/* Error/Check Result */}
|
|
{error && (
|
|
<div className="p-3 bg-rose-500/10 border border-rose-500/20 text-rose-400 text-xs font-mono">
|
|
{error}
|
|
</div>
|
|
)}
|
|
{checkResult && (
|
|
<div className="p-3 bg-amber-400/10 border border-amber-400/20 text-amber-400 text-xs font-mono">
|
|
{checkResult}
|
|
</div>
|
|
)}
|
|
|
|
{/* Actions */}
|
|
<div className="flex gap-3 pt-2">
|
|
<button onClick={onClose} className="flex-1 py-2.5 border border-white/10 text-white/60 text-xs font-mono uppercase">
|
|
Cancel
|
|
</button>
|
|
<button onClick={handleCheck} className="flex-1 py-2.5 bg-blue-400 text-black text-xs font-bold uppercase flex items-center justify-center gap-2">
|
|
<RefreshCw className="w-4 h-4" />Check Verification
|
|
</button>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{step === 'checking' && (
|
|
<div className="flex flex-col items-center justify-center py-8 gap-3">
|
|
<Loader2 className="w-6 h-6 text-blue-400 animate-spin" />
|
|
<p className="text-sm font-mono text-white/60">Checking DNS records...</p>
|
|
</div>
|
|
)}
|
|
|
|
{step === 'instructions' && !verificationData && error && (
|
|
<div className="p-4 bg-rose-500/10 border border-rose-500/20">
|
|
<p className="text-rose-400 text-sm">{error}</p>
|
|
<button onClick={onClose} className="mt-4 w-full py-2.5 border border-white/10 text-white/60 text-xs font-mono uppercase">
|
|
Close
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|