forked from syntaxbullet/AuroraBot-discord
feat(web): implement full activity page with charts and logs
This commit is contained in:
syntaxbullet
@@ -1,12 +1,113 @@
|
||||
import { ActivityChart } from "@/components/ActivityChart";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useActivityStats } from "@/hooks/use-activity-stats";
|
||||
import { useDashboardStats } from "@/hooks/use-dashboard-stats";
|
||||
import { Activity as ActivityIcon, RefreshCw, Terminal } from "lucide-react";
|
||||
|
||||
export function Activity() {
|
||||
const { data: activityData, loading: activityLoading, refresh: refreshActivity } = useActivityStats();
|
||||
const { stats, loading: statsLoading } = useDashboardStats();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold tracking-tight">Activity</h2>
|
||||
<p className="text-muted-foreground">Recent bot activity logs.</p>
|
||||
<div className="mt-6 rounded-xl border border-dashed p-8 text-center text-muted-foreground">
|
||||
Activity feed coming soon...
|
||||
<div className="space-y-8 animate-in fade-in duration-700">
|
||||
<div className="flex flex-col gap-2">
|
||||
<h2 className="text-4xl font-extrabold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white via-white to-white/40">
|
||||
Activity Monitoring
|
||||
</h2>
|
||||
<p className="text-white/40 font-medium">Real-time system logs and performance metrics.</p>
|
||||
</div>
|
||||
|
||||
{/* Activity Chart Section */}
|
||||
<Card className="glass border-white/5 overflow-hidden">
|
||||
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||||
<div>
|
||||
<CardTitle className="text-xl font-bold flex items-center gap-2">
|
||||
<div className="h-5 w-1 bg-emerald-500 rounded-full" />
|
||||
Command & Transaction Volume
|
||||
</CardTitle>
|
||||
<CardDescription className="text-white/40 font-medium tracking-tight">Hourly traffic analysis (Last 24 Hours)</CardDescription>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => refreshActivity()}
|
||||
className="text-white/40 hover:text-white hover:bg-white/5"
|
||||
disabled={activityLoading}
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 ${activityLoading ? 'animate-spin' : ''}`} />
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ActivityChart data={activityData} loading={activityLoading} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Detailed Activity Logs */}
|
||||
<Card className="glass border-white/5 overflow-hidden">
|
||||
<CardHeader className="border-b border-white/5 bg-white/[0.02]">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-primary/10 rounded-lg">
|
||||
<Terminal className="w-5 h-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-xl font-bold">System Logs</CardTitle>
|
||||
<CardDescription className="text-white/40">Recent operational events and alerts</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
{statsLoading && !stats ? (
|
||||
<div className="p-12 text-center">
|
||||
<RefreshCw className="w-8 h-8 text-white/20 animate-spin mx-auto mb-4" />
|
||||
<p className="text-white/40 font-medium">Connecting to event stream...</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y divide-white/5">
|
||||
{!stats?.recentEvents || stats.recentEvents.length === 0 ? (
|
||||
<div className="p-12 text-center">
|
||||
<ActivityIcon className="w-12 h-12 text-white/10 mx-auto mb-4" />
|
||||
<p className="text-white/30 font-medium">No recent activity recorded</p>
|
||||
</div>
|
||||
) : (
|
||||
stats.recentEvents.map((event, i) => (
|
||||
<div key={i} className="flex gap-4 p-6 hover:bg-white/[0.02] transition-colors group">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<div className={`p-2 rounded-lg ring-1 ring-inset ${event.type === 'success' ? 'bg-emerald-500/10 ring-emerald-500/20 text-emerald-500' :
|
||||
event.type === 'error' ? 'bg-red-500/10 ring-red-500/20 text-red-500' :
|
||||
event.type === 'warn' ? 'bg-yellow-500/10 ring-yellow-500/20 text-yellow-500' :
|
||||
'bg-blue-500/10 ring-blue-500/20 text-blue-500'
|
||||
} group-hover:scale-110 transition-transform duration-300`}>
|
||||
<div className="text-lg leading-none">{event.icon}</div>
|
||||
</div>
|
||||
<div className="h-full w-px bg-white/5 group-last:hidden" />
|
||||
</div>
|
||||
<div className="flex-1 space-y-1 pt-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="font-semibold text-white/90">{event.message}</p>
|
||||
<span className="text-xs font-mono font-medium text-white/30 bg-white/5 px-2 py-1 rounded">
|
||||
{new Date(event.timestamp).toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
{event.type === 'error' && (
|
||||
<p className="text-sm text-red-400/60 font-mono mt-2 pl-3 border-l-2 border-red-500/20">
|
||||
Error: Check system console for stack trace
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user