import FrontendLayout from '@/layouts/frontend/layout'; import { type BreadcrumbItem, type SharedData } from '@/types'; import { Head, usePage } from '@inertiajs/react'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { StatsCard, StatsCardGrid } from '@/components/ui/stats-card'; import { Users, Clock, Shield, Coins } from 'lucide-react'; import { ClassIcon, getClassName } from '@/components/game/class-icon'; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: '/dashboard', }, ]; interface TopupActivity { username: string; class: number | null; gold_amount: number; amount: number; payment_method: string; created_at: string; } interface UserCharacter { id: number; name: string; level: number; class: number; is_online: boolean; } interface DashboardProps extends SharedData { stats: { totalAccounts: number; onlinePlayers: number; onlineGMs: number; serverOnline: boolean; serverTime: string; serverDate: string; timezone: string; }; recentTopups: TopupActivity[]; userCharacters: UserCharacter[]; charactersFromCache?: boolean; } import { useState, useEffect } from 'react'; import { format, addSeconds, parse } from 'date-fns'; export default function PlayerDashboard({ stats, recentTopups, userCharacters, charactersFromCache: _charactersFromCache = false }: DashboardProps) { const { auth } = usePage().props; const [currentTime, setCurrentTime] = useState(() => { // Parse initial server time // Format of serverDate is "d M Y" and serverTime is "H:i:s" const dateTimeString = `${stats.serverDate} ${stats.serverTime}`; return parse(dateTimeString, 'dd MMM yyyy HH:mm:ss', new Date()); }); useEffect(() => { const timer = setInterval(() => { setCurrentTime(prev => addSeconds(prev, 1)); }, 1000); return () => clearInterval(timer); }, []); return (
{/* Welcome Section */}

Welcome back, {auth.user?.name || 'Player'}!

Here's what's happening with your account today.

{/* Stats Cards */} {/* Two Column Layout */}
{/* Recent Activity */} Recent Top Up Activity Latest players who Top Up their accounts {recentTopups && recentTopups.length > 0 ? (
{recentTopups.map((topup, index) => (
{topup.class !== null ? ( ) : (
)}

{topup.username}

Top up {topup.gold_amount.toLocaleString()} gold via {topup.payment_method}

{topup.created_at}
))}
) : (
No recent top-up activity
)} {/* User Characters */} Your Characters {userCharacters && userCharacters.length > 0 ? (
{userCharacters.map((character, index) => (
{character.is_online && (
)}

{character.name}

{character.is_online && ( Online )}

Level {character.level} • {getClassName(character.class)}

))}
) : (
No characters found
)}
); }