112 lines
5.4 KiB
TypeScript
112 lines
5.4 KiB
TypeScript
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Activity, Server, Users, Zap } from "lucide-react";
|
|
|
|
export function Dashboard() {
|
|
return (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h2 className="text-3xl font-bold tracking-tight">Dashboard</h2>
|
|
<p className="text-muted-foreground">Overview of your bot's activity and performance.</p>
|
|
</div>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
|
{/* Metric Cards */}
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Total Servers</CardTitle>
|
|
<Server className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">12</div>
|
|
<p className="text-xs text-muted-foreground">+2 from last month</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Active Users</CardTitle>
|
|
<Users className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">1,234</div>
|
|
<p className="text-xs text-muted-foreground">+10% from last month</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Commands Run</CardTitle>
|
|
<Zap className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">12,345</div>
|
|
<p className="text-xs text-muted-foreground">+5% from last month</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Avg Ping</CardTitle>
|
|
<Activity className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">24ms</div>
|
|
<p className="text-xs text-muted-foreground">+2ms from last hour</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
|
|
<Card className="col-span-4">
|
|
<CardHeader>
|
|
<CardTitle>Activity Overview</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="h-[200px] w-full bg-muted/20 flex items-center justify-center border-2 border-dashed border-muted rounded-md text-muted-foreground">
|
|
Chart Placeholder
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="col-span-3">
|
|
<CardHeader>
|
|
<CardTitle>Recent Events</CardTitle>
|
|
<CardDescription>Latest system and bot events.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
<div className="flex items-center">
|
|
<div className="w-2 h-2 rounded-full bg-emerald-500 mr-2" />
|
|
<div className="space-y-1">
|
|
<p className="text-sm font-medium leading-none">New guild joined</p>
|
|
<p className="text-sm text-muted-foreground">2 minutes ago</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center">
|
|
<div className="w-2 h-2 rounded-full bg-destructive mr-2" />
|
|
<div className="space-y-1">
|
|
<p className="text-sm font-medium leading-none">Error in verify command</p>
|
|
<p className="text-sm text-muted-foreground">15 minutes ago</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center">
|
|
<div className="w-2 h-2 rounded-full bg-blue-500 mr-2" />
|
|
<div className="space-y-1">
|
|
<p className="text-sm font-medium leading-none">Bot restarted</p>
|
|
<p className="text-sm text-muted-foreground">1 hour ago</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|