201 lines
11 KiB
TypeScript
201 lines
11 KiB
TypeScript
"use client"
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Terminal, Users, Database, Activity, RefreshCw } from "lucide-react"
|
|
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } from 'recharts'
|
|
|
|
const data = [
|
|
{ name: 'Mon', accuracy: 88, tokens: 1.2 },
|
|
{ name: 'Tue', accuracy: 90, tokens: 1.5 },
|
|
{ name: 'Wed', accuracy: 89, tokens: 1.8 },
|
|
{ name: 'Thu', accuracy: 92, tokens: 2.1 },
|
|
{ name: 'Fri', accuracy: 95, tokens: 2.4 },
|
|
{ name: 'Sat', accuracy: 94, tokens: 2.2 },
|
|
{ name: 'Sun', accuracy: 96, tokens: 2.8 },
|
|
];
|
|
|
|
export default function AdminDashboard() {
|
|
return (
|
|
<div className="p-8 max-w-7xl mx-auto space-y-8 animate-in fade-in duration-500">
|
|
<header className="flex items-center justify-between border-b border-border pb-6">
|
|
<div>
|
|
<h1 className="text-3xl font-bold tracking-tighter text-foreground">Command Center</h1>
|
|
<p className="text-muted-foreground mt-1 font-medium">Real-time system monitoring and agent status.</p>
|
|
</div>
|
|
<Button variant="outline" className="gap-2 border-[#00F0FF]/50 text-[#00F0FF] bg-[#00F0FF]/5 hover:bg-[#00F0FF]/10 hover:text-[#00F0FF] rounded-xl font-medium shadow-[0_0_15px_-5px_#00F0FF]">
|
|
<RefreshCw size={16} /> Refresh Data
|
|
</Button>
|
|
</header>
|
|
|
|
{/* KPI Stats */}
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
|
|
<Card className="bg-secondary/10 border-border/50 rounded-2xl">
|
|
<CardHeader className="pb-2 flex flex-row items-center justify-between">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">Total Revenue</CardTitle>
|
|
<div className="p-2 bg-primary/20 text-primary rounded-lg"><Activity size={16}/></div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">₹12.4M</div>
|
|
<p className="text-xs text-primary mt-1 font-medium">+14.2% from last month</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="bg-secondary/10 border-border/50 rounded-2xl">
|
|
<CardHeader className="pb-2 flex flex-row items-center justify-between">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">Active Students</CardTitle>
|
|
<div className="p-2 bg-secondary text-foreground rounded-lg"><Users size={16}/></div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">45,231</div>
|
|
<p className="text-xs text-muted-foreground mt-1 font-medium">+2,401 this week</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="bg-[#00F0FF]/5 border-[#00F0FF]/30 shadow-[0_0_20px_-10px_#00F0FF] rounded-2xl">
|
|
<CardHeader className="pb-2 flex flex-row items-center justify-between">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">AI Agent Accuracy</CardTitle>
|
|
<div className="p-2 bg-[#00F0FF]/20 text-[#00F0FF] rounded-lg"><Terminal size={16}/></div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold text-[#00F0FF]">96.4%</div>
|
|
<p className="text-xs text-[#00F0FF]/70 mt-1 font-medium">Based on 1.2M interactions</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="bg-secondary/10 border-border/50 rounded-2xl">
|
|
<CardHeader className="pb-2 flex flex-row items-center justify-between">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">Question Bank</CardTitle>
|
|
<div className="p-2 bg-secondary text-foreground rounded-lg"><Database size={16}/></div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">142k</div>
|
|
<p className="text-xs text-muted-foreground mt-1 font-medium">1.2k added today</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
{/* Charts */}
|
|
<Card className="lg:col-span-2 bg-background border-border rounded-3xl">
|
|
<CardHeader>
|
|
<CardTitle>AI Token Usage vs Accuracy</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="h-[300px] w-full">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<AreaChart data={data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
|
|
<defs>
|
|
<linearGradient id="colorTokens" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="5%" stopColor="#00F0FF" stopOpacity={0.3}/>
|
|
<stop offset="95%" stopColor="#00F0FF" stopOpacity={0}/>
|
|
</linearGradient>
|
|
</defs>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="#262626" vertical={false} />
|
|
<XAxis dataKey="name" stroke="#737373" fontSize={12} tickLine={false} axisLine={false} />
|
|
<YAxis stroke="#737373" fontSize={12} tickLine={false} axisLine={false} tickFormatter={(value) => `${value}M`} />
|
|
<Tooltip
|
|
contentStyle={{ backgroundColor: '#0a0a0a', borderColor: '#262626', borderRadius: '12px' }}
|
|
itemStyle={{ color: '#00F0FF', fontWeight: 'bold' }}
|
|
/>
|
|
<Area type="monotone" dataKey="tokens" stroke="#00F0FF" strokeWidth={3} fillOpacity={1} fill="url(#colorTokens)" />
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Live Agent Status */}
|
|
<Card className="bg-background border-border flex flex-col rounded-3xl">
|
|
<CardHeader>
|
|
<CardTitle>Live Agent Status</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="flex-1 overflow-y-auto pr-2 space-y-4">
|
|
<div className="flex items-center justify-between p-4 rounded-2xl border border-border bg-secondary/10">
|
|
<div className="flex items-center gap-4">
|
|
<div className="relative flex h-3 w-3">
|
|
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
|
|
<span className="relative inline-flex rounded-full h-3 w-3 bg-emerald-500"></span>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-sm font-bold">DPP Generator</h4>
|
|
<p className="text-xs text-muted-foreground font-mono mt-1">Latency: 142ms</p>
|
|
</div>
|
|
</div>
|
|
<Badge variant="outline" className="text-emerald-500 border-emerald-500/30 bg-emerald-500/10 font-bold">Healthy</Badge>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between p-4 rounded-2xl border border-border bg-secondary/10">
|
|
<div className="flex items-center gap-4">
|
|
<div className="relative flex h-3 w-3">
|
|
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
|
|
<span className="relative inline-flex rounded-full h-3 w-3 bg-emerald-500"></span>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-sm font-bold">Tutor Agent</h4>
|
|
<p className="text-xs text-muted-foreground font-mono mt-1">Latency: 840ms</p>
|
|
</div>
|
|
</div>
|
|
<Badge variant="outline" className="text-emerald-500 border-emerald-500/30 bg-emerald-500/10 font-bold">Healthy</Badge>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between p-4 rounded-2xl border border-amber-500/30 bg-amber-500/5">
|
|
<div className="flex items-center gap-4">
|
|
<div className="relative flex h-3 w-3">
|
|
<span className="relative inline-flex rounded-full h-3 w-3 bg-amber-500"></span>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-sm font-bold text-amber-500">Evaluator Node</h4>
|
|
<p className="text-xs text-amber-500/70 font-mono mt-1">Latency: 2100ms</p>
|
|
</div>
|
|
</div>
|
|
<Badge variant="outline" className="text-amber-500 border-amber-500/30 bg-amber-500/10 font-bold">Degraded</Badge>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Question Bank Manager Preview */}
|
|
<Card className="bg-background border-border rounded-3xl">
|
|
<CardHeader className="flex flex-row items-center justify-between">
|
|
<div>
|
|
<CardTitle>Recent Question Uploads</CardTitle>
|
|
</div>
|
|
<Button size="sm" className="bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 font-bold rounded-xl h-10 px-4">Add Question</Button>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="rounded-2xl border border-border overflow-hidden">
|
|
<table className="w-full text-sm text-left">
|
|
<thead className="bg-secondary/50 text-muted-foreground font-medium border-b border-border">
|
|
<tr>
|
|
<th className="px-5 py-4">ID</th>
|
|
<th className="px-5 py-4">Subject</th>
|
|
<th className="px-5 py-4">Topic</th>
|
|
<th className="px-5 py-4">Preview</th>
|
|
<th className="px-5 py-4 text-right">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-border">
|
|
<tr className="hover:bg-secondary/20 transition-colors">
|
|
<td className="px-5 py-4 font-mono text-muted-foreground font-medium">#Q-8942</td>
|
|
<td className="px-5 py-4"><Badge variant="outline" className="bg-background">Physics</Badge></td>
|
|
<td className="px-5 py-4 font-medium">Thermodynamics</td>
|
|
<td className="px-5 py-4 text-muted-foreground truncate max-w-[300px]">An ideal gas undergoes an isothermal expansion...</td>
|
|
<td className="px-5 py-4 text-right">
|
|
<Button variant="ghost" size="sm" className="text-[#00F0FF] hover:text-[#00F0FF] hover:bg-[#00F0FF]/10 font-bold rounded-lg">Edit</Button>
|
|
</td>
|
|
</tr>
|
|
<tr className="hover:bg-secondary/20 transition-colors">
|
|
<td className="px-5 py-4 font-mono text-muted-foreground font-medium">#Q-8941</td>
|
|
<td className="px-5 py-4"><Badge variant="outline" className="bg-background">Math</Badge></td>
|
|
<td className="px-5 py-4 font-medium">Calculus</td>
|
|
<td className="px-5 py-4 text-muted-foreground truncate max-w-[300px]">Evaluate the integral of e^x sin(x) dx...</td>
|
|
<td className="px-5 py-4 text-right">
|
|
<Button variant="ghost" size="sm" className="text-[#00F0FF] hover:text-[#00F0FF] hover:bg-[#00F0FF]/10 font-bold rounded-lg">Edit</Button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|