Yves Gugger
4efe1fdd4f
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
1414 lines
62 KiB
TypeScript
Executable File
1414 lines
62 KiB
TypeScript
Executable File
'use client'
|
|
|
|
import { useEffect, useState, useMemo, useCallback } from 'react'
|
|
import { useStore } from '@/lib/store'
|
|
import { api, PortfolioDomain, PortfolioSummary, DomainHealthReport, HealthStatus } 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,
|
|
ShieldCheck,
|
|
LogOut,
|
|
Crown,
|
|
Tag,
|
|
Zap,
|
|
Eye,
|
|
ChevronUp,
|
|
ChevronDown,
|
|
DollarSign,
|
|
Calendar,
|
|
Edit3,
|
|
CheckCircle,
|
|
AlertCircle,
|
|
Copy,
|
|
Check,
|
|
ArrowUpRight,
|
|
Navigation,
|
|
Coins,
|
|
Activity,
|
|
Save,
|
|
FileText,
|
|
Clock,
|
|
Building2,
|
|
CreditCard,
|
|
MoreVertical,
|
|
RotateCcw
|
|
} from 'lucide-react'
|
|
import clsx from 'clsx'
|
|
import Link from 'next/link'
|
|
import Image from 'next/image'
|
|
|
|
// ============================================================================
|
|
// TYPES
|
|
// ============================================================================
|
|
|
|
interface EditFormData {
|
|
purchase_date: string
|
|
purchase_price: string
|
|
purchase_registrar: string
|
|
registrar: string
|
|
renewal_date: string
|
|
renewal_cost: string
|
|
auto_renew: boolean
|
|
notes: string
|
|
tags: string
|
|
is_sold: boolean
|
|
sale_date: string
|
|
sale_price: string
|
|
}
|
|
|
|
// ============================================================================
|
|
// HELPERS
|
|
// ============================================================================
|
|
|
|
const healthConfig: Record<HealthStatus, { label: string; color: string; bg: string; border: string }> = {
|
|
healthy: { label: 'Healthy', color: 'text-accent', bg: 'bg-accent/10', border: 'border-accent/20' },
|
|
weakening: { label: 'Weak', color: 'text-amber-400', bg: 'bg-amber-500/10', border: 'border-amber-500/20' },
|
|
parked: { label: 'Parked', color: 'text-blue-400', bg: 'bg-blue-500/10', border: 'border-blue-500/20' },
|
|
critical: { label: 'Critical', color: 'text-rose-400', bg: 'bg-rose-500/10', border: 'border-rose-500/20' },
|
|
unknown: { label: '—', color: 'text-white/30', bg: 'bg-white/5', border: 'border-white/10' },
|
|
}
|
|
|
|
function getDaysUntil(date: string | null): number | null {
|
|
if (!date) return null
|
|
const d = new Date(date)
|
|
const now = new Date()
|
|
return Math.ceil((d.getTime() - now.getTime()) / (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 formatShortDate(date: string | null): string {
|
|
if (!date) return '—'
|
|
return new Date(date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: '2-digit' })
|
|
}
|
|
|
|
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)}%`
|
|
}
|
|
|
|
// ============================================================================
|
|
// EDIT MODAL COMPONENT
|
|
// ============================================================================
|
|
|
|
function EditModal({
|
|
domain,
|
|
onClose,
|
|
onSave
|
|
}: {
|
|
domain: PortfolioDomain
|
|
onClose: () => void
|
|
onSave: (data: Partial<EditFormData>) => Promise<void>
|
|
}) {
|
|
const [form, setForm] = useState<EditFormData>({
|
|
purchase_date: domain.purchase_date?.split('T')[0] || '',
|
|
purchase_price: domain.purchase_price?.toString() || '',
|
|
purchase_registrar: domain.purchase_registrar || '',
|
|
registrar: domain.registrar || '',
|
|
renewal_date: domain.renewal_date?.split('T')[0] || '',
|
|
renewal_cost: domain.renewal_cost?.toString() || '',
|
|
auto_renew: domain.auto_renew || false,
|
|
notes: domain.notes || '',
|
|
tags: domain.tags || '',
|
|
is_sold: domain.is_sold || false,
|
|
sale_date: domain.sale_date?.split('T')[0] || '',
|
|
sale_price: domain.sale_price?.toString() || '',
|
|
})
|
|
const [saving, setSaving] = useState(false)
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
setSaving(true)
|
|
try {
|
|
await onSave({
|
|
purchase_date: form.purchase_date || undefined,
|
|
purchase_price: form.purchase_price ? parseFloat(form.purchase_price) : undefined,
|
|
purchase_registrar: form.purchase_registrar || undefined,
|
|
registrar: form.registrar || undefined,
|
|
renewal_date: form.renewal_date || undefined,
|
|
renewal_cost: form.renewal_cost ? parseFloat(form.renewal_cost) : undefined,
|
|
auto_renew: form.auto_renew,
|
|
notes: form.notes || undefined,
|
|
tags: form.tags || undefined,
|
|
is_sold: form.is_sold,
|
|
sale_date: form.is_sold && form.sale_date ? form.sale_date : undefined,
|
|
sale_price: form.is_sold && form.sale_price ? parseFloat(form.sale_price) : undefined,
|
|
} as any)
|
|
onClose()
|
|
} finally {
|
|
setSaving(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm" onClick={onClose}>
|
|
<div
|
|
className="w-full max-w-lg bg-[#0a0a0a] border border-white/10 max-h-[90vh] overflow-y-auto"
|
|
onClick={e => e.stopPropagation()}
|
|
>
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between p-4 border-b border-white/10">
|
|
<div>
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<Edit3 className="w-4 h-4 text-accent" />
|
|
<span className="text-[10px] font-mono text-accent uppercase tracking-wider">Edit Domain</span>
|
|
</div>
|
|
<h2 className="text-lg font-bold text-white font-mono">{domain.domain}</h2>
|
|
</div>
|
|
<button onClick={onClose} className="p-2 text-white/40 hover:text-white">
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="p-4 space-y-4">
|
|
{/* Purchase Info */}
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-2 text-[10px] font-mono text-white/40 uppercase tracking-wider">
|
|
<CreditCard className="w-3.5 h-3.5" />
|
|
Purchase Information
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label className="block text-[10px] font-mono text-white/40 mb-1">Purchase Date</label>
|
|
<input
|
|
type="date"
|
|
value={form.purchase_date}
|
|
onChange={e => setForm(f => ({ ...f, purchase_date: e.target.value }))}
|
|
className="w-full px-3 py-2 bg-white/5 border border-white/10 text-white text-sm font-mono focus:border-accent/50 focus:outline-none"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-[10px] font-mono text-white/40 mb-1">Purchase Price ($)</label>
|
|
<input
|
|
type="number"
|
|
step="0.01"
|
|
value={form.purchase_price}
|
|
onChange={e => setForm(f => ({ ...f, purchase_price: e.target.value }))}
|
|
placeholder="e.g. 500"
|
|
className="w-full px-3 py-2 bg-white/5 border border-white/10 text-white text-sm font-mono focus:border-accent/50 focus:outline-none placeholder:text-white/20"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="block text-[10px] font-mono text-white/40 mb-1">Purchased From</label>
|
|
<input
|
|
type="text"
|
|
value={form.purchase_registrar}
|
|
onChange={e => setForm(f => ({ ...f, purchase_registrar: e.target.value }))}
|
|
placeholder="e.g. GoDaddy Auctions, Sedo"
|
|
className="w-full px-3 py-2 bg-white/5 border border-white/10 text-white text-sm font-mono focus:border-accent/50 focus:outline-none placeholder:text-white/20"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Current Registrar & Renewal */}
|
|
<div className="space-y-3 pt-3 border-t border-white/10">
|
|
<div className="flex items-center gap-2 text-[10px] font-mono text-white/40 uppercase tracking-wider">
|
|
<Building2 className="w-3.5 h-3.5" />
|
|
Registrar & Renewal
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label className="block text-[10px] font-mono text-white/40 mb-1">Current Registrar</label>
|
|
<input
|
|
type="text"
|
|
value={form.registrar}
|
|
onChange={e => setForm(f => ({ ...f, registrar: e.target.value }))}
|
|
placeholder="e.g. Namecheap"
|
|
className="w-full px-3 py-2 bg-white/5 border border-white/10 text-white text-sm font-mono focus:border-accent/50 focus:outline-none placeholder:text-white/20"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-[10px] font-mono text-white/40 mb-1">Renewal Cost ($)</label>
|
|
<input
|
|
type="number"
|
|
step="0.01"
|
|
value={form.renewal_cost}
|
|
onChange={e => setForm(f => ({ ...f, renewal_cost: e.target.value }))}
|
|
placeholder="e.g. 12"
|
|
className="w-full px-3 py-2 bg-white/5 border border-white/10 text-white text-sm font-mono focus:border-accent/50 focus:outline-none placeholder:text-white/20"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label className="block text-[10px] font-mono text-white/40 mb-1">Renewal Date</label>
|
|
<input
|
|
type="date"
|
|
value={form.renewal_date}
|
|
onChange={e => setForm(f => ({ ...f, renewal_date: e.target.value }))}
|
|
className="w-full px-3 py-2 bg-white/5 border border-white/10 text-white text-sm font-mono focus:border-accent/50 focus:outline-none"
|
|
/>
|
|
</div>
|
|
<div className="flex items-end">
|
|
<label className="flex items-center gap-2 cursor-pointer py-2">
|
|
<input
|
|
type="checkbox"
|
|
checked={form.auto_renew}
|
|
onChange={e => setForm(f => ({ ...f, auto_renew: e.target.checked }))}
|
|
className="w-4 h-4 accent-accent"
|
|
/>
|
|
<span className="text-sm font-mono text-white/60">Auto-Renew</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Notes & Tags */}
|
|
<div className="space-y-3 pt-3 border-t border-white/10">
|
|
<div className="flex items-center gap-2 text-[10px] font-mono text-white/40 uppercase tracking-wider">
|
|
<FileText className="w-3.5 h-3.5" />
|
|
Notes & Tags
|
|
</div>
|
|
<div>
|
|
<label className="block text-[10px] font-mono text-white/40 mb-1">Tags (comma-separated)</label>
|
|
<input
|
|
type="text"
|
|
value={form.tags}
|
|
onChange={e => setForm(f => ({ ...f, tags: e.target.value }))}
|
|
placeholder="e.g. premium, brandable, crypto"
|
|
className="w-full px-3 py-2 bg-white/5 border border-white/10 text-white text-sm font-mono focus:border-accent/50 focus:outline-none placeholder:text-white/20"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-[10px] font-mono text-white/40 mb-1">Notes</label>
|
|
<textarea
|
|
value={form.notes}
|
|
onChange={e => setForm(f => ({ ...f, notes: e.target.value }))}
|
|
rows={3}
|
|
placeholder="Private notes about this domain..."
|
|
className="w-full px-3 py-2 bg-white/5 border border-white/10 text-white text-sm font-mono focus:border-accent/50 focus:outline-none placeholder:text-white/20 resize-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Sale Status */}
|
|
<div className="space-y-3 pt-3 border-t border-white/10">
|
|
<label className="flex items-center gap-2 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={form.is_sold}
|
|
onChange={e => setForm(f => ({ ...f, is_sold: e.target.checked }))}
|
|
className="w-4 h-4 accent-accent"
|
|
/>
|
|
<span className="text-sm font-mono text-white/60">Mark as Sold</span>
|
|
</label>
|
|
{form.is_sold && (
|
|
<div className="grid grid-cols-2 gap-3 pl-6">
|
|
<div>
|
|
<label className="block text-[10px] font-mono text-white/40 mb-1">Sale Date</label>
|
|
<input
|
|
type="date"
|
|
value={form.sale_date}
|
|
onChange={e => setForm(f => ({ ...f, sale_date: e.target.value }))}
|
|
className="w-full px-3 py-2 bg-white/5 border border-white/10 text-white text-sm font-mono focus:border-accent/50 focus:outline-none"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-[10px] font-mono text-white/40 mb-1">Sale Price ($)</label>
|
|
<input
|
|
type="number"
|
|
step="0.01"
|
|
value={form.sale_price}
|
|
onChange={e => setForm(f => ({ ...f, sale_price: e.target.value }))}
|
|
className="w-full px-3 py-2 bg-white/5 border border-white/10 text-white text-sm font-mono focus:border-accent/50 focus:outline-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="flex justify-end gap-2 pt-4">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="px-4 py-2 text-sm font-mono text-white/60 hover:text-white transition-colors"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={saving}
|
|
className="flex items-center gap-2 px-4 py-2 bg-accent text-black text-sm font-bold uppercase tracking-wider hover:bg-white transition-colors disabled:opacity-50"
|
|
>
|
|
{saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
|
|
Save Changes
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ============================================================================
|
|
// ADD MODAL COMPONENT
|
|
// ============================================================================
|
|
|
|
function AddModal({
|
|
onClose,
|
|
onAdd
|
|
}: {
|
|
onClose: () => void
|
|
onAdd: (domain: string, data?: Partial<EditFormData>) => Promise<void>
|
|
}) {
|
|
const [domain, setDomain] = useState('')
|
|
const [showDetails, setShowDetails] = useState(false)
|
|
const [form, setForm] = useState<Partial<EditFormData>>({})
|
|
const [adding, setAdding] = useState(false)
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
if (!domain.trim()) return
|
|
setAdding(true)
|
|
try {
|
|
await onAdd(domain.trim(), showDetails ? form : undefined)
|
|
onClose()
|
|
} finally {
|
|
setAdding(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm" onClick={onClose}>
|
|
<div
|
|
className="w-full max-w-md bg-[#0a0a0a] border border-white/10 max-h-[90vh] overflow-y-auto"
|
|
onClick={e => e.stopPropagation()}
|
|
>
|
|
<div className="flex items-center justify-between p-4 border-b border-white/10">
|
|
<div className="flex items-center gap-2">
|
|
<Plus className="w-4 h-4 text-accent" />
|
|
<span className="text-sm font-mono text-white uppercase tracking-wider">Add Domain</span>
|
|
</div>
|
|
<button onClick={onClose} className="p-2 text-white/40 hover:text-white">
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="p-4 space-y-4">
|
|
<div>
|
|
<label className="block text-[10px] font-mono text-white/40 mb-1">Domain Name</label>
|
|
<input
|
|
type="text"
|
|
value={domain}
|
|
onChange={e => setDomain(e.target.value)}
|
|
placeholder="example.com"
|
|
autoFocus
|
|
className="w-full px-3 py-3 bg-white/5 border border-white/10 text-white text-lg font-mono focus:border-accent/50 focus:outline-none placeholder:text-white/20"
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowDetails(!showDetails)}
|
|
className="flex items-center gap-2 text-[10px] font-mono text-accent uppercase tracking-wider"
|
|
>
|
|
{showDetails ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />}
|
|
{showDetails ? 'Hide Details' : 'Add Purchase Details'}
|
|
</button>
|
|
|
|
{showDetails && (
|
|
<div className="space-y-3 pt-2">
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label className="block text-[10px] font-mono text-white/40 mb-1">Purchase Date</label>
|
|
<input
|
|
type="date"
|
|
value={form.purchase_date || ''}
|
|
onChange={e => setForm(f => ({ ...f, purchase_date: e.target.value }))}
|
|
className="w-full px-3 py-2 bg-white/5 border border-white/10 text-white text-sm font-mono focus:border-accent/50 focus:outline-none"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-[10px] font-mono text-white/40 mb-1">Purchase Price ($)</label>
|
|
<input
|
|
type="number"
|
|
step="0.01"
|
|
value={form.purchase_price || ''}
|
|
onChange={e => setForm(f => ({ ...f, purchase_price: e.target.value }))}
|
|
className="w-full px-3 py-2 bg-white/5 border border-white/10 text-white text-sm font-mono focus:border-accent/50 focus:outline-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="block text-[10px] font-mono text-white/40 mb-1">Registrar</label>
|
|
<input
|
|
type="text"
|
|
value={form.registrar || ''}
|
|
onChange={e => setForm(f => ({ ...f, registrar: e.target.value }))}
|
|
placeholder="e.g. Namecheap"
|
|
className="w-full px-3 py-2 bg-white/5 border border-white/10 text-white text-sm font-mono focus:border-accent/50 focus:outline-none placeholder:text-white/20"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={adding || !domain.trim()}
|
|
className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-accent text-black text-sm font-bold uppercase tracking-wider hover:bg-white transition-colors disabled:opacity-50"
|
|
>
|
|
{adding ? <Loader2 className="w-4 h-4 animate-spin" /> : <Plus className="w-4 h-4" />}
|
|
Add to Portfolio
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ============================================================================
|
|
// DNS VERIFICATION MODAL
|
|
// ============================================================================
|
|
|
|
function VerifyModal({
|
|
domain,
|
|
onClose,
|
|
onVerified
|
|
}: {
|
|
domain: PortfolioDomain
|
|
onClose: () => void
|
|
onVerified: () => void
|
|
}) {
|
|
const [step, setStep] = useState<'start' | 'pending' | 'checking'>('start')
|
|
const [verificationCode, setVerificationCode] = useState<string | null>(null)
|
|
const [copied, setCopied] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
const startVerification = async () => {
|
|
setStep('pending')
|
|
try {
|
|
const result = await api.startPortfolioDnsVerification(domain.id)
|
|
setVerificationCode(result.verification_code)
|
|
} catch (err: any) {
|
|
setError(err?.message || 'Failed to start verification')
|
|
setStep('start')
|
|
}
|
|
}
|
|
|
|
const checkVerification = async () => {
|
|
setStep('checking')
|
|
setError(null)
|
|
try {
|
|
const result = await api.checkPortfolioDnsVerification(domain.id)
|
|
if (result.verified) {
|
|
onVerified()
|
|
onClose()
|
|
} else {
|
|
setError('DNS record not found. Please wait a few minutes for DNS to propagate and try again.')
|
|
setStep('pending')
|
|
}
|
|
} catch (err: any) {
|
|
setError(err?.message || 'Verification failed')
|
|
setStep('pending')
|
|
}
|
|
}
|
|
|
|
const copyCode = () => {
|
|
if (!verificationCode) return
|
|
navigator.clipboard.writeText(`pounce-verify=${verificationCode}`)
|
|
setCopied(true)
|
|
setTimeout(() => setCopied(false), 2000)
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm" onClick={onClose}>
|
|
<div
|
|
className="w-full max-w-md bg-[#0a0a0a] border border-white/10"
|
|
onClick={e => e.stopPropagation()}
|
|
>
|
|
<div className="flex items-center justify-between p-4 border-b border-white/10">
|
|
<div className="flex items-center gap-2">
|
|
<ShieldCheck className="w-4 h-4 text-accent" />
|
|
<span className="text-sm font-mono text-white uppercase tracking-wider">Verify Ownership</span>
|
|
</div>
|
|
<button onClick={onClose} className="p-2 text-white/40 hover:text-white">
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-4 space-y-4">
|
|
<div className="text-lg font-bold text-white font-mono">{domain.domain}</div>
|
|
|
|
{step === 'start' && (
|
|
<>
|
|
<p className="text-sm text-white/60 font-mono">
|
|
Verify ownership to unlock Yield and For Sale features. You'll need to add a DNS TXT record.
|
|
</p>
|
|
<button
|
|
onClick={startVerification}
|
|
className="w-full py-3 bg-accent text-black text-sm font-bold uppercase tracking-wider hover:bg-white transition-colors"
|
|
>
|
|
Start Verification
|
|
</button>
|
|
</>
|
|
)}
|
|
|
|
{(step === 'pending' || step === 'checking') && verificationCode && (
|
|
<>
|
|
<div className="space-y-2">
|
|
<p className="text-[10px] font-mono text-white/40 uppercase">Add this TXT record to your DNS:</p>
|
|
<div className="flex items-center gap-2 p-3 bg-white/5 border border-white/10">
|
|
<code className="flex-1 text-sm font-mono text-accent break-all">
|
|
pounce-verify={verificationCode}
|
|
</code>
|
|
<button
|
|
onClick={copyCode}
|
|
className="p-2 text-white/40 hover:text-white transition-colors shrink-0"
|
|
title="Copy to clipboard"
|
|
>
|
|
{copied ? <Check className="w-4 h-4 text-accent" /> : <Copy className="w-4 h-4" />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-[10px] font-mono text-white/40 space-y-1">
|
|
<p>1. Log in to your domain registrar</p>
|
|
<p>2. Find DNS settings for {domain.domain}</p>
|
|
<p>3. Add a new TXT record with the value above</p>
|
|
<p>4. Wait 2-5 minutes for propagation</p>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="p-3 bg-rose-500/10 border border-rose-500/20 text-rose-400 text-sm font-mono">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<button
|
|
onClick={checkVerification}
|
|
disabled={step === 'checking'}
|
|
className="w-full flex items-center justify-center gap-2 py-3 bg-accent text-black text-sm font-bold uppercase tracking-wider hover:bg-white transition-colors disabled:opacity-50"
|
|
>
|
|
{step === 'checking' ? (
|
|
<Loader2 className="w-4 h-4 animate-spin" />
|
|
) : (
|
|
<ShieldCheck className="w-4 h-4" />
|
|
)}
|
|
Verify DNS Record
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ============================================================================
|
|
// 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)
|
|
|
|
// Modals
|
|
const [showAddModal, setShowAddModal] = useState(false)
|
|
const [editingDomain, setEditingDomain] = useState<PortfolioDomain | null>(null)
|
|
const [verifyingDomain, setVerifyingDomain] = useState<PortfolioDomain | null>(null)
|
|
|
|
// Filter & Sort
|
|
const [filter, setFilter] = useState<'all' | 'active' | 'sold' | 'expiring'>('all')
|
|
const [sortField, setSortField] = useState<'domain' | 'value' | 'roi' | 'renewal' | 'purchased'>('domain')
|
|
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc')
|
|
|
|
// Health data
|
|
const [healthByDomain, setHealthByDomain] = useState<Record<string, DomainHealthReport>>({})
|
|
const [checkingHealth, setCheckingHealth] = useState<Set<string>>(new Set())
|
|
|
|
// External status (Yield, Listed)
|
|
const [yieldDomains, setYieldDomains] = useState<Set<string>>(new Set())
|
|
const [listedDomains, setListedDomains] = useState<Set<string>>(new Set())
|
|
|
|
// Mobile
|
|
const [navDrawerOpen, setNavDrawerOpen] = useState(false)
|
|
const [expandedRow, setExpandedRow] = useState<number | null>(null)
|
|
|
|
const tier = subscription?.tier || 'scout'
|
|
const tierName = subscription?.tier_name || tier
|
|
const TierIcon = tierName === 'Tycoon' ? Crown : tierName === 'Trader' ? TrendingUp : Zap
|
|
|
|
useEffect(() => { checkAuth() }, [checkAuth])
|
|
|
|
// Load all data
|
|
const loadData = useCallback(async () => {
|
|
setLoading(true)
|
|
try {
|
|
const [domainsData, summaryData] = await Promise.all([
|
|
api.getPortfolio(),
|
|
api.getPortfolioSummary()
|
|
])
|
|
setDomains(domainsData)
|
|
setSummary(summaryData)
|
|
|
|
// Load yield domains
|
|
try {
|
|
const yieldData = await api.getYieldDomains()
|
|
const active = (yieldData.domains || []).filter((d: any) => d.status === 'active')
|
|
setYieldDomains(new Set(active.map((d: any) => String(d.domain).toLowerCase())))
|
|
} catch { setYieldDomains(new Set()) }
|
|
|
|
// Load listed domains
|
|
try {
|
|
const listings = await api.getMyListings()
|
|
const active = (listings || []).filter((l: any) => l.status === 'active')
|
|
setListedDomains(new Set(active.map((l: any) => String(l.domain).toLowerCase())))
|
|
} catch { setListedDomains(new Set()) }
|
|
} catch (err) {
|
|
console.error('Failed to load portfolio:', err)
|
|
showToast('Failed to load portfolio', 'error')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}, [showToast])
|
|
|
|
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 verified = domains.filter(d => d.is_dns_verified && !d.is_sold).length
|
|
const expiringSoon = domains.filter(d => {
|
|
if (d.is_sold || !d.renewal_date) return false
|
|
const days = getDaysUntil(d.renewal_date)
|
|
return days !== null && days <= 30 && days > 0
|
|
}).length
|
|
return { total: domains.length, active, sold, verified, expiringSoon }
|
|
}, [domains])
|
|
|
|
// Filter & Sort
|
|
const filteredDomains = useMemo(() => {
|
|
let filtered = domains.filter(d => {
|
|
if (filter === 'active') return !d.is_sold
|
|
if (filter === 'sold') return d.is_sold
|
|
if (filter === 'expiring') {
|
|
const days = getDaysUntil(d.renewal_date)
|
|
return !d.is_sold && days !== null && days <= 30 && days > 0
|
|
}
|
|
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 aRen = a.renewal_date ? new Date(a.renewal_date).getTime() : Infinity
|
|
const bRen = b.renewal_date ? new Date(b.renewal_date).getTime() : Infinity
|
|
return mult * (aRen - bRen)
|
|
case 'purchased':
|
|
const aPur = a.purchase_date ? new Date(a.purchase_date).getTime() : 0
|
|
const bPur = b.purchase_date ? new Date(b.purchase_date).getTime() : 0
|
|
return mult * (aPur - bPur)
|
|
default: return 0
|
|
}
|
|
})
|
|
return filtered
|
|
}, [domains, filter, sortField, sortDirection])
|
|
|
|
const handleSort = (field: typeof sortField) => {
|
|
if (sortField === field) {
|
|
setSortDirection(d => d === 'asc' ? 'desc' : 'asc')
|
|
} else {
|
|
setSortField(field)
|
|
setSortDirection('asc')
|
|
}
|
|
}
|
|
|
|
// Actions
|
|
const handleHealthCheck = async (domainName: string) => {
|
|
const key = domainName.toLowerCase()
|
|
if (checkingHealth.has(key)) return
|
|
setCheckingHealth(prev => new Set(prev).add(key))
|
|
try {
|
|
const report = await api.quickHealthCheck(domainName)
|
|
setHealthByDomain(prev => ({ ...prev, [key]: report }))
|
|
} catch (err: any) {
|
|
showToast(err?.message || 'Health check failed', 'error')
|
|
} finally {
|
|
setCheckingHealth(prev => {
|
|
const next = new Set(prev)
|
|
next.delete(key)
|
|
return next
|
|
})
|
|
}
|
|
}
|
|
|
|
const handleRefreshValue = 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)
|
|
}
|
|
}
|
|
|
|
const handleDelete = 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')
|
|
} catch {
|
|
showToast('Failed to remove', 'error')
|
|
} finally {
|
|
setDeletingId(null)
|
|
}
|
|
}
|
|
|
|
const handleAddDomain = async (domain: string, data?: any) => {
|
|
try {
|
|
const created = await api.addPortfolioDomain({ domain, ...data })
|
|
setDomains(prev => [created, ...prev])
|
|
showToast(`${domain} added to portfolio`, 'success')
|
|
} catch (err: any) {
|
|
showToast(err?.message || 'Failed to add domain', 'error')
|
|
throw err
|
|
}
|
|
}
|
|
|
|
const handleUpdateDomain = async (id: number, data: any) => {
|
|
try {
|
|
const updated = await api.updatePortfolioDomain(id, data)
|
|
setDomains(prev => prev.map(d => d.id === id ? updated : d))
|
|
showToast('Domain updated', 'success')
|
|
} catch (err: any) {
|
|
showToast(err?.message || 'Update failed', 'error')
|
|
throw err
|
|
}
|
|
}
|
|
|
|
// Navigation
|
|
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/portfolio', label: 'Portfolio', icon: Briefcase, active: true },
|
|
]
|
|
|
|
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 },
|
|
{ href: '/terminal/listing', label: 'For Sale', icon: Tag },
|
|
]}
|
|
]
|
|
|
|
// Render helpers
|
|
const renderHealth = (domain: PortfolioDomain) => {
|
|
const key = domain.domain.toLowerCase()
|
|
const health = healthByDomain[key]
|
|
const isChecking = checkingHealth.has(key)
|
|
const cfg = healthConfig[(health?.status as HealthStatus) || 'unknown']
|
|
|
|
return (
|
|
<button
|
|
onClick={() => handleHealthCheck(domain.domain)}
|
|
disabled={isChecking}
|
|
title={health ? `${cfg.label} • Score ${health.score}/100` : 'Run health check'}
|
|
className={clsx(
|
|
"flex items-center gap-1 px-2 py-1 text-[10px] font-mono uppercase border transition-colors",
|
|
cfg.color, cfg.bg, cfg.border,
|
|
"hover:opacity-80 disabled:opacity-50"
|
|
)}
|
|
>
|
|
{isChecking ? (
|
|
<Loader2 className="w-3 h-3 animate-spin" />
|
|
) : (
|
|
<>
|
|
<Activity className="w-3 h-3" />
|
|
{health ? health.score : '—'}
|
|
</>
|
|
)}
|
|
</button>
|
|
)
|
|
}
|
|
|
|
const renderStatusBadges = (domain: PortfolioDomain) => {
|
|
const badges = []
|
|
if (domain.is_dns_verified) {
|
|
badges.push(
|
|
<span key="verified" title="DNS Verified" className="flex items-center gap-0.5 px-1.5 py-0.5 text-[9px] font-mono uppercase bg-accent/10 text-accent border border-accent/20">
|
|
<ShieldCheck className="w-3 h-3" />
|
|
</span>
|
|
)
|
|
}
|
|
if (yieldDomains.has(domain.domain.toLowerCase())) {
|
|
badges.push(
|
|
<span key="yield" title="Earning via Yield" className="flex items-center gap-0.5 px-1.5 py-0.5 text-[9px] font-mono uppercase bg-amber-400/10 text-amber-400 border border-amber-400/20">
|
|
<Coins className="w-3 h-3" />
|
|
</span>
|
|
)
|
|
}
|
|
if (listedDomains.has(domain.domain.toLowerCase())) {
|
|
badges.push(
|
|
<span key="listed" title="Listed for Sale" className="flex items-center gap-0.5 px-1.5 py-0.5 text-[9px] font-mono uppercase bg-blue-400/10 text-blue-400 border border-blue-400/20">
|
|
<Tag className="w-3 h-3" />
|
|
</span>
|
|
)
|
|
}
|
|
return badges.length > 0 ? <div className="flex items-center gap-1">{badges}</div> : null
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#020202]">
|
|
<div className="hidden lg:block"><Sidebar /></div>
|
|
|
|
<main className="lg:pl-[240px] pb-24 lg:pb-0">
|
|
{/* 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">
|
|
<Briefcase className="w-4 h-4 text-accent" />
|
|
<span className="text-sm font-mono text-white font-bold">Portfolio</span>
|
|
</div>
|
|
<button
|
|
onClick={() => setShowAddModal(true)}
|
|
className="flex items-center gap-1.5 px-3 py-1.5 bg-accent text-black text-[10px] font-bold uppercase"
|
|
>
|
|
<Plus className="w-3.5 h-3.5" />
|
|
Add
|
|
</button>
|
|
</div>
|
|
<div className="grid grid-cols-4 gap-1.5">
|
|
<div className="bg-white/[0.03] border border-white/[0.08] p-2 text-center">
|
|
<div className="text-lg font-bold text-white tabular-nums">{stats.active}</div>
|
|
<div className="text-[8px] font-mono text-white/30 uppercase">Active</div>
|
|
</div>
|
|
<div className="bg-accent/5 border border-accent/20 p-2 text-center">
|
|
<div className="text-lg font-bold text-accent tabular-nums">{formatCurrency(summary?.total_value || 0).replace('$', '')}</div>
|
|
<div className="text-[8px] font-mono text-accent/60 uppercase">Value</div>
|
|
</div>
|
|
<div className="bg-white/[0.03] border border-white/[0.08] p-2 text-center">
|
|
<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-[8px] font-mono text-white/30 uppercase">ROI</div>
|
|
</div>
|
|
<div className="bg-white/[0.03] border border-white/[0.08] p-2 text-center">
|
|
<div className="text-lg font-bold text-white tabular-nums">{stats.verified}</div>
|
|
<div className="text-[8px] font-mono text-white/30 uppercase">Verified</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* DESKTOP HEADER */}
|
|
<section className="hidden lg:block px-10 pt-10 pb-6">
|
|
<div className="flex items-end justify-between gap-8">
|
|
<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">Portfolio Manager</span>
|
|
</div>
|
|
<h1 className="font-display text-[2.5rem] leading-[1] tracking-[-0.02em] text-white">
|
|
My Portfolio
|
|
</h1>
|
|
<p className="text-sm text-white/40 font-mono max-w-lg">
|
|
Track your domain investments. Add purchase details, monitor values, verify ownership, and list for sale.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-8">
|
|
<div className="text-right" title="Total invested">
|
|
<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">Invested</div>
|
|
</div>
|
|
<div className="text-right" title="Current market value">
|
|
<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">Value</div>
|
|
</div>
|
|
<div className="text-right" title="Return on investment">
|
|
<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">ROI</div>
|
|
</div>
|
|
<div className="pl-6 border-l border-white/10">
|
|
<button
|
|
onClick={() => setShowAddModal(true)}
|
|
className="flex items-center gap-2 px-5 py-3 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* FILTERS */}
|
|
<section className="px-4 lg:px-10 py-4 border-y border-white/[0.08] bg-white/[0.01]">
|
|
<div className="flex items-center gap-3 overflow-x-auto">
|
|
{[
|
|
{ value: 'all', label: 'All', count: stats.total },
|
|
{ value: 'active', label: 'Active', count: stats.active },
|
|
{ value: 'sold', label: 'Sold', count: stats.sold },
|
|
{ value: 'expiring', label: 'Expiring Soon', count: stats.expiringSoon },
|
|
].map((item) => (
|
|
<button
|
|
key={item.value}
|
|
onClick={() => setFilter(item.value as any)}
|
|
className={clsx(
|
|
"shrink-0 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>
|
|
</section>
|
|
|
|
{/* DOMAIN LIST */}
|
|
<section className="px-4 lg:px-10 py-6">
|
|
{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-10 h-10 text-white/10 mx-auto mb-4" />
|
|
<p className="text-white/40 text-sm font-mono mb-1">No domains found</p>
|
|
<p className="text-white/25 text-xs font-mono mb-4">Add your first domain to start tracking</p>
|
|
<button
|
|
onClick={() => setShowAddModal(true)}
|
|
className="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">
|
|
{/* Desktop Table Header */}
|
|
<div className="hidden lg:grid grid-cols-[1.5fr_1fr_100px_100px_100px_100px_60px_140px] gap-3 px-4 py-2.5 text-[10px] font-mono text-white/40 uppercase tracking-wider border-b border-white/[0.08] bg-white/[0.02]">
|
|
<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>Registrar / Tags</div>
|
|
<button onClick={() => handleSort('purchased')} className="flex items-center gap-1 justify-end hover:text-white/60">
|
|
Purchased {sortField === 'purchased' && (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-end hover:text-white/60">
|
|
Expires {sortField === 'renewal' && (sortDirection === 'asc' ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />)}
|
|
</button>
|
|
<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-end hover:text-white/60">
|
|
ROI {sortField === 'roi' && (sortDirection === 'asc' ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />)}
|
|
</button>
|
|
<div className="text-center">Health</div>
|
|
<div className="text-right">Actions</div>
|
|
</div>
|
|
|
|
{filteredDomains.map((domain) => {
|
|
const daysUntilRenewal = getDaysUntil(domain.renewal_date)
|
|
const isExpiringSoon = daysUntilRenewal !== null && daysUntilRenewal <= 30 && daysUntilRenewal > 0
|
|
const isExpired = daysUntilRenewal !== null && daysUntilRenewal <= 0
|
|
const roiPositive = (domain.roi || 0) >= 0
|
|
const isExpanded = expandedRow === domain.id
|
|
const tags = domain.tags?.split(',').map(t => t.trim()).filter(Boolean) || []
|
|
|
|
return (
|
|
<div
|
|
key={domain.id}
|
|
className={clsx(
|
|
"border border-white/[0.06] bg-[#020202] hover:bg-white/[0.02] transition-all",
|
|
domain.is_sold && "opacity-60"
|
|
)}
|
|
>
|
|
{/* DESKTOP ROW */}
|
|
<div className="hidden lg:grid grid-cols-[1.5fr_1fr_100px_100px_100px_100px_60px_140px] gap-3 px-4 py-3 items-center">
|
|
{/* Domain */}
|
|
<div className="flex items-center gap-3 min-w-0">
|
|
<div className={clsx(
|
|
"w-10 h-10 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">
|
|
<div className="text-sm font-bold text-white font-mono truncate">{domain.domain}</div>
|
|
<div className="flex items-center gap-1.5 mt-0.5">
|
|
{renderStatusBadges(domain)}
|
|
{!domain.is_dns_verified && !domain.is_sold && (
|
|
<button
|
|
onClick={() => setVerifyingDomain(domain)}
|
|
className="text-[9px] font-mono text-amber-400 hover:text-amber-300 underline"
|
|
>
|
|
Verify
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Registrar & Tags */}
|
|
<div className="min-w-0">
|
|
<div className="text-xs font-mono text-white/60 truncate">{domain.registrar || '—'}</div>
|
|
{tags.length > 0 && (
|
|
<div className="flex items-center gap-1 mt-1 flex-wrap">
|
|
{tags.slice(0, 2).map(tag => (
|
|
<span key={tag} className="px-1.5 py-0.5 text-[8px] font-mono text-white/40 bg-white/5 border border-white/10">
|
|
{tag}
|
|
</span>
|
|
))}
|
|
{tags.length > 2 && (
|
|
<span className="text-[8px] font-mono text-white/30">+{tags.length - 2}</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Purchased */}
|
|
<div className="text-right">
|
|
<div className="text-xs font-mono text-white/60">{formatShortDate(domain.purchase_date)}</div>
|
|
<div className="text-[10px] font-mono text-white/30">{formatCurrency(domain.purchase_price)}</div>
|
|
</div>
|
|
|
|
{/* Expires */}
|
|
<div className="text-right">
|
|
{domain.is_sold ? (
|
|
<div className="text-xs font-mono text-white/30">Sold</div>
|
|
) : (
|
|
<>
|
|
<div className={clsx(
|
|
"text-xs font-mono",
|
|
isExpired ? "text-rose-400" : isExpiringSoon ? "text-orange-400" : "text-white/60"
|
|
)}>
|
|
{daysUntilRenewal !== null ? `${daysUntilRenewal}d` : '—'}
|
|
</div>
|
|
<div className="text-[10px] font-mono text-white/30">{formatShortDate(domain.renewal_date)}</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Value */}
|
|
<div className="text-right">
|
|
<div className="text-sm font-bold text-accent font-mono">{formatCurrency(domain.estimated_value)}</div>
|
|
</div>
|
|
|
|
{/* ROI */}
|
|
<div className="text-right">
|
|
<div className={clsx("text-sm font-bold font-mono", roiPositive ? "text-accent" : "text-rose-400")}>
|
|
{formatROI(domain.roi)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Health */}
|
|
<div className="flex justify-center">
|
|
{renderHealth(domain)}
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="flex items-center justify-end gap-1">
|
|
<button
|
|
onClick={() => setEditingDomain(domain)}
|
|
title="Edit domain details"
|
|
className="p-2 text-white/30 hover:text-accent transition-colors"
|
|
>
|
|
<Edit3 className="w-4 h-4" />
|
|
</button>
|
|
<button
|
|
onClick={() => handleRefreshValue(domain.id)}
|
|
disabled={refreshingId === domain.id}
|
|
title="Refresh value estimate"
|
|
className={clsx("p-2 text-white/30 hover:text-accent transition-colors", refreshingId === domain.id && "animate-spin")}
|
|
>
|
|
<RefreshCw className="w-4 h-4" />
|
|
</button>
|
|
{domain.is_dns_verified && !domain.is_sold && !listedDomains.has(domain.domain.toLowerCase()) && (
|
|
<Link
|
|
href="/terminal/listing"
|
|
title="List for sale"
|
|
className="p-2 text-white/30 hover:text-blue-400 transition-colors"
|
|
>
|
|
<Tag className="w-4 h-4" />
|
|
</Link>
|
|
)}
|
|
<button
|
|
onClick={() => handleDelete(domain.id, domain.domain)}
|
|
disabled={deletingId === domain.id}
|
|
title="Remove from portfolio"
|
|
className="p-2 text-white/30 hover:text-rose-400 transition-colors"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* MOBILE ROW */}
|
|
<div className="lg:hidden">
|
|
<div
|
|
className="p-3 cursor-pointer"
|
|
onClick={() => setExpandedRow(isExpanded ? null : domain.id)}
|
|
>
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="flex items-center gap-2.5 min-w-0 flex-1">
|
|
<div className={clsx(
|
|
"w-9 h-9 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="flex items-center gap-1.5 mt-0.5 flex-wrap">
|
|
{domain.registrar && (
|
|
<span className="text-[10px] font-mono text-white/30">{domain.registrar}</span>
|
|
)}
|
|
{renderStatusBadges(domain)}
|
|
</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>
|
|
|
|
{/* Quick info row */}
|
|
<div className="flex items-center justify-between mt-2 pt-2 border-t border-white/[0.05] text-[10px] font-mono text-white/40">
|
|
<div className="flex items-center gap-3">
|
|
<span title="Purchase price">{formatCurrency(domain.purchase_price)}</span>
|
|
{daysUntilRenewal !== null && !domain.is_sold && (
|
|
<span className={clsx("flex items-center gap-1", isExpiringSoon ? "text-orange-400" : "")}>
|
|
<Calendar className="w-3 h-3" />{daysUntilRenewal}d
|
|
</span>
|
|
)}
|
|
</div>
|
|
<ChevronDown className={clsx("w-4 h-4 transition-transform", isExpanded && "rotate-180")} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Expanded details */}
|
|
{isExpanded && (
|
|
<div className="px-3 pb-3 space-y-3 border-t border-white/[0.05]">
|
|
<div className="grid grid-cols-2 gap-3 pt-3 text-[10px] font-mono">
|
|
<div>
|
|
<div className="text-white/30 uppercase mb-0.5">Purchased</div>
|
|
<div className="text-white/60">{formatDate(domain.purchase_date)}</div>
|
|
<div className="text-white/40">{formatCurrency(domain.purchase_price)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-white/30 uppercase mb-0.5">Renewal</div>
|
|
<div className={clsx(isExpiringSoon ? "text-orange-400" : "text-white/60")}>{formatDate(domain.renewal_date)}</div>
|
|
<div className="text-white/40">{formatCurrency(domain.renewal_cost)}/yr</div>
|
|
</div>
|
|
</div>
|
|
|
|
{domain.notes && (
|
|
<div className="text-[10px] font-mono">
|
|
<div className="text-white/30 uppercase mb-0.5">Notes</div>
|
|
<div className="text-white/50">{domain.notes}</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Actions */}
|
|
<div className="flex items-center gap-2 pt-2">
|
|
{renderHealth(domain)}
|
|
{!domain.is_dns_verified && !domain.is_sold && (
|
|
<button
|
|
onClick={() => setVerifyingDomain(domain)}
|
|
className="flex items-center gap-1 px-2 py-1.5 text-[9px] font-mono uppercase border border-amber-400/30 text-amber-400 bg-amber-400/5"
|
|
>
|
|
<ShieldCheck className="w-3 h-3" />Verify
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={() => setEditingDomain(domain)}
|
|
className="flex items-center gap-1 px-2 py-1.5 text-[9px] font-mono uppercase border border-white/10 text-white/60 bg-white/5"
|
|
>
|
|
<Edit3 className="w-3 h-3" />Edit
|
|
</button>
|
|
<button
|
|
onClick={() => handleRefreshValue(domain.id)}
|
|
disabled={refreshingId === domain.id}
|
|
className="p-1.5 text-white/30 hover:text-accent"
|
|
>
|
|
<RefreshCw className={clsx("w-4 h-4", refreshingId === domain.id && "animate-spin")} />
|
|
</button>
|
|
<button
|
|
onClick={() => handleDelete(domain.id, domain.domain)}
|
|
className="p-1.5 text-white/30 hover:text-rose-400 ml-auto"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
</section>
|
|
|
|
{/* MOBILE BOTTOM NAV */}
|
|
<nav className="lg:hidden fixed bottom-0 inset-x-0 z-50 bg-[#020202]/95 backdrop-blur-md border-t border-white/[0.08] pb-safe">
|
|
<div className="grid grid-cols-5 gap-1 px-2 py-2">
|
|
{mobileNavItems.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={clsx(
|
|
"flex flex-col items-center gap-0.5 py-2 transition-colors",
|
|
item.active ? "text-accent" : "text-white/40"
|
|
)}
|
|
>
|
|
<item.icon className="w-5 h-5" />
|
|
<span className="text-[9px] font-mono uppercase tracking-wider">{item.label}</span>
|
|
</Link>
|
|
))}
|
|
<button
|
|
onClick={() => setNavDrawerOpen(true)}
|
|
className="flex flex-col items-center gap-0.5 py-2 text-white/40"
|
|
>
|
|
<Navigation className="w-5 h-5" />
|
|
<span className="text-[9px] font-mono uppercase tracking-wider">Menu</span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
{/* NAVIGATION DRAWER */}
|
|
{navDrawerOpen && (
|
|
<div className="lg:hidden fixed inset-0 z-50 bg-black/80 backdrop-blur-sm" onClick={() => setNavDrawerOpen(false)}>
|
|
<div
|
|
className="absolute right-0 top-0 bottom-0 w-72 bg-[#0a0a0a] border-l border-white/10 overflow-y-auto"
|
|
onClick={e => e.stopPropagation()}
|
|
>
|
|
<div className="p-4 border-b border-white/10 flex items-center justify-between">
|
|
<span className="text-sm font-mono text-white">Navigation</span>
|
|
<button onClick={() => setNavDrawerOpen(false)} className="p-2 text-white/40">
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
<div className="p-4 space-y-6">
|
|
{drawerNavSections.map(section => (
|
|
<div key={section.title}>
|
|
<div className="text-[10px] font-mono text-white/30 uppercase tracking-wider mb-2">{section.title}</div>
|
|
<div className="space-y-1">
|
|
{section.items.map(item => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
onClick={() => setNavDrawerOpen(false)}
|
|
className={clsx(
|
|
"flex items-center gap-3 px-3 py-2.5 transition-colors",
|
|
'active' in item && item.active ? "bg-accent/10 text-accent" : "text-white/60 hover:bg-white/5"
|
|
)}
|
|
>
|
|
<item.icon className="w-4 h-4" />
|
|
<span className="text-sm font-mono">{item.label}</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
{user && (
|
|
<div className="p-4 border-t border-white/10 mt-4">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="w-10 h-10 bg-accent/10 border border-accent/20 flex items-center justify-center">
|
|
<TierIcon className="w-5 h-5 text-accent" />
|
|
</div>
|
|
<div>
|
|
<div className="text-sm font-mono text-white">{user.email?.split('@')[0]}</div>
|
|
<div className="text-[10px] font-mono text-accent uppercase">{tierName}</div>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Link href="/terminal/settings" className="flex items-center gap-3 px-3 py-2 text-white/60 hover:bg-white/5">
|
|
<Settings className="w-4 h-4" /><span className="text-sm font-mono">Settings</span>
|
|
</Link>
|
|
<button onClick={logout} className="w-full flex items-center gap-3 px-3 py-2 text-white/60 hover:bg-white/5">
|
|
<LogOut className="w-4 h-4" /><span className="text-sm font-mono">Logout</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</main>
|
|
|
|
{/* MODALS */}
|
|
{showAddModal && (
|
|
<AddModal onClose={() => setShowAddModal(false)} onAdd={handleAddDomain} />
|
|
)}
|
|
{editingDomain && (
|
|
<EditModal
|
|
domain={editingDomain}
|
|
onClose={() => setEditingDomain(null)}
|
|
onSave={(data) => handleUpdateDomain(editingDomain.id, data)}
|
|
/>
|
|
)}
|
|
{verifyingDomain && (
|
|
<VerifyModal
|
|
domain={verifyingDomain}
|
|
onClose={() => setVerifyingDomain(null)}
|
|
onVerified={() => {
|
|
loadData()
|
|
showToast('Domain verified!', 'success')
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
<Toast toast={toast} onHide={hideToast} />
|
|
</div>
|
|
)
|
|
}
|