88 lines
5.1 KiB
TypeScript
88 lines
5.1 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from 'framer-motion';
|
|
import { Activity, Zap, ShieldAlert, Cpu } from 'lucide-react';
|
|
|
|
export default function DashboardPage() {
|
|
return (
|
|
<div className="container mx-auto px-4 py-8">
|
|
<div className="flex justify-between items-end mb-8">
|
|
<div>
|
|
<h1 className="text-3xl font-bold font-mono tracking-tight mb-2">SYSTEM_<span className="text-primary">OVERVIEW</span></h1>
|
|
<p className="text-muted-foreground">Real-time status of all autonomous agents.</p>
|
|
</div>
|
|
<div className="flex items-center gap-2 px-3 py-1 bg-card border border-border rounded font-mono text-sm">
|
|
Status: <span className="text-primary animate-pulse">RUNNING</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
|
|
{[
|
|
{ title: 'Lots Scanned', value: '142,893', icon: Activity, color: 'text-primary' },
|
|
{ title: 'Active Targets', value: '84', icon: Zap, color: 'text-accent' },
|
|
{ title: 'Alerts Fired', value: '1,204', icon: ShieldAlert, color: 'text-destructive' },
|
|
{ title: 'AI Decisions', value: '89,430', icon: Cpu, color: 'text-primary' },
|
|
].map((stat, i) => (
|
|
<motion.div
|
|
key={i}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: i * 0.1 }}
|
|
className="p-6 bg-card border border-border rounded-lg"
|
|
>
|
|
<div className="flex justify-between items-start mb-4">
|
|
<div className="text-muted-foreground font-mono text-sm">{stat.title}</div>
|
|
<stat.icon className={`w-5 h-5 ${stat.color}`} />
|
|
</div>
|
|
<div className={`text-3xl font-bold font-mono ${stat.color}`}>{stat.value}</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="grid lg:grid-cols-3 gap-8">
|
|
<div className="col-span-2">
|
|
<motion.div
|
|
initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.4 }}
|
|
className="p-6 bg-card border border-border rounded-lg h-96 flex flex-col"
|
|
>
|
|
<h2 className="text-xl font-bold font-mono mb-4 border-b border-border pb-2">LIVE_ACTIVITY_LOG</h2>
|
|
<div className="flex-1 overflow-auto font-mono text-sm space-y-3">
|
|
<div className="flex gap-4 text-muted-foreground"><span className="text-primary">[10:42:01]</span> <span>Scout Agent detected new items on eBay_UK...</span></div>
|
|
<div className="flex gap-4 text-muted-foreground"><span className="text-primary">[10:41:55]</span> <span>Analyst Agent processing 14 lots for "RTX 4090"...</span></div>
|
|
<div className="flex gap-4 text-accent"><span className="text-primary">[10:41:30]</span> <span>MATCH FOUND: "RTX 4090 Box Only" - Rejected by AI (Reason: Scam)</span></div>
|
|
<div className="flex gap-4 text-primary"><span className="text-primary">[10:40:12]</span> <span>HIGH VALUE MATCH: "ThinkPad T14 Gen 3" - $450 (Est: $800). Alert Sent.</span></div>
|
|
<div className="flex gap-4 text-muted-foreground"><span className="text-primary">[10:39:45]</span> <span>Strategist Agent optimizing scrape timings for ShopGoodwill...</span></div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
<div>
|
|
<motion.div
|
|
initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.5 }}
|
|
className="p-6 bg-card border border-border rounded-lg h-96"
|
|
>
|
|
<h2 className="text-xl font-bold font-mono mb-4 border-b border-border pb-2">NODE_HEALTH</h2>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<div className="flex justify-between text-sm mb-1 font-mono"><span>eBay US</span> <span className="text-primary">100%</span></div>
|
|
<div className="w-full bg-background rounded-full h-1.5"><div className="bg-primary h-1.5 rounded-full" style={{width: '100%'}}></div></div>
|
|
</div>
|
|
<div>
|
|
<div className="flex justify-between text-sm mb-1 font-mono"><span>eBay UK</span> <span className="text-primary">98%</span></div>
|
|
<div className="w-full bg-background rounded-full h-1.5"><div className="bg-primary h-1.5 rounded-full" style={{width: '98%'}}></div></div>
|
|
</div>
|
|
<div>
|
|
<div className="flex justify-between text-sm mb-1 font-mono"><span>HiBid</span> <span className="text-accent">85%</span></div>
|
|
<div className="w-full bg-background rounded-full h-1.5"><div className="bg-accent h-1.5 rounded-full" style={{width: '85%'}}></div></div>
|
|
</div>
|
|
<div>
|
|
<div className="flex justify-between text-sm mb-1 font-mono"><span>ShopGoodwill</span> <span className="text-primary">99%</span></div>
|
|
<div className="w-full bg-background rounded-full h-1.5"><div className="bg-primary h-1.5 rounded-full" style={{width: '99%'}}></div></div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|