feat: Implement new settings pages and refactor application layout and navigation with new components and hooks.
This commit is contained in:
syntaxbullet
164
web/src/pages/admin/Overview.tsx
Normal file
164
web/src/pages/admin/Overview.tsx
Normal file
@@ -0,0 +1,164 @@
|
||||
import React, { useState } from "react";
|
||||
import { SectionHeader } from "../../components/section-header";
|
||||
import { useSocket } from "../../hooks/use-socket";
|
||||
import { StatCard } from "../../components/stat-card";
|
||||
import { ActivityChart } from "../../components/activity-chart";
|
||||
import { LootdropCard } from "../../components/lootdrop-card";
|
||||
import { LeaderboardCard } from "../../components/leaderboard-card";
|
||||
import { RecentActivity } from "../../components/recent-activity";
|
||||
import { CommandsDrawer } from "../../components/commands-drawer";
|
||||
import { Server, Users, Terminal, Activity, Coins, TrendingUp, Flame, Package } from "lucide-react";
|
||||
import { cn } from "../../lib/utils";
|
||||
|
||||
export function AdminOverview() {
|
||||
const { isConnected, stats } = useSocket();
|
||||
const [commandsDrawerOpen, setCommandsDrawerOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<main className="pt-8 px-8 pb-12 max-w-7xl mx-auto space-y-8">
|
||||
<SectionHeader
|
||||
badge="Admin Dashboard"
|
||||
title="Overview"
|
||||
description="Monitor your Aurora RPG server statistics and activity."
|
||||
/>
|
||||
|
||||
{/* Stats Grid */}
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4 animate-in fade-in slide-up duration-700">
|
||||
<StatCard
|
||||
title="Total Servers"
|
||||
icon={Server}
|
||||
isLoading={!stats}
|
||||
value={stats?.guilds.count.toLocaleString()}
|
||||
subtitle={stats?.guilds.changeFromLastMonth
|
||||
? `${stats.guilds.changeFromLastMonth > 0 ? '+' : ''}${stats.guilds.changeFromLastMonth} from last month`
|
||||
: "Active Guilds"
|
||||
}
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
title="Total Users"
|
||||
icon={Users}
|
||||
isLoading={!stats}
|
||||
value={stats?.users.total.toLocaleString()}
|
||||
subtitle={stats ? `${stats.users.active.toLocaleString()} active now` : undefined}
|
||||
className="delay-100"
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
title="Commands"
|
||||
icon={Terminal}
|
||||
isLoading={!stats}
|
||||
value={stats?.commands.total.toLocaleString()}
|
||||
subtitle={stats ? `${stats.commands.active} active · ${stats.commands.disabled} disabled` : undefined}
|
||||
className="delay-200"
|
||||
onClick={() => setCommandsDrawerOpen(true)}
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
title="System Ping"
|
||||
icon={Activity}
|
||||
isLoading={!stats}
|
||||
value={stats ? `${Math.round(stats.ping.avg)}ms` : undefined}
|
||||
subtitle="Average latency"
|
||||
className="delay-300"
|
||||
valueClassName={stats ? cn(
|
||||
"transition-colors duration-300",
|
||||
stats.ping.avg < 100 ? "text-emerald-500" :
|
||||
stats.ping.avg < 200 ? "text-yellow-500" : "text-red-500"
|
||||
) : undefined}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Activity Chart */}
|
||||
<div className="animate-in fade-in slide-up delay-400">
|
||||
<ActivityChart />
|
||||
</div>
|
||||
|
||||
<div className="grid gap-8 lg:grid-cols-3 animate-in fade-in slide-up delay-500">
|
||||
{/* Economy Stats */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold tracking-tight mb-4">Economy Overview</h2>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<StatCard
|
||||
title="Total Wealth"
|
||||
icon={Coins}
|
||||
isLoading={!stats}
|
||||
value={stats ? `${Number(stats.economy.totalWealth).toLocaleString()} AU` : undefined}
|
||||
subtitle="Astral Units in circulation"
|
||||
valueClassName="text-primary"
|
||||
iconClassName="text-primary"
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
title="Items Circulating"
|
||||
icon={Package}
|
||||
isLoading={!stats}
|
||||
value={stats?.economy.totalItems?.toLocaleString()}
|
||||
subtitle="Total items owned by users"
|
||||
className="delay-75"
|
||||
valueClassName="text-blue-500"
|
||||
iconClassName="text-blue-500"
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
title="Average Level"
|
||||
icon={TrendingUp}
|
||||
isLoading={!stats}
|
||||
value={stats ? `Lvl ${stats.economy.avgLevel}` : undefined}
|
||||
subtitle="Global player average"
|
||||
className="delay-100"
|
||||
valueClassName="text-secondary"
|
||||
iconClassName="text-secondary"
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
title="Top /daily Streak"
|
||||
icon={Flame}
|
||||
isLoading={!stats}
|
||||
value={stats?.economy.topStreak}
|
||||
subtitle="Days daily streak"
|
||||
className="delay-200"
|
||||
valueClassName="text-destructive"
|
||||
iconClassName="text-destructive"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<LeaderboardCard
|
||||
data={stats?.leaderboards}
|
||||
isLoading={!stats}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Recent Activity & Lootdrops */}
|
||||
<div className="space-y-6">
|
||||
<LootdropCard
|
||||
drop={stats?.activeLootdrops?.[0]}
|
||||
state={stats?.lootdropState}
|
||||
isLoading={!stats}
|
||||
/>
|
||||
<div className="h-[calc(100%-12rem)] min-h-[400px]">
|
||||
<h2 className="text-xl font-semibold tracking-tight mb-4">Live Feed</h2>
|
||||
<RecentActivity
|
||||
events={stats?.recentEvents || []}
|
||||
isLoading={!stats}
|
||||
className="h-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Commands Drawer */}
|
||||
<CommandsDrawer
|
||||
open={commandsDrawerOpen}
|
||||
onOpenChange={setCommandsDrawerOpen}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default AdminOverview;
|
||||
Reference in New Issue
Block a user