"use client";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Progress } from "@/components/ui/progress";
import {
Monitor,
TwitchIcon,
Calendar,
Users,
ArrowUpRight,
Activity,
TrendingUp,
Clock,
Eye,
Signal,
AlertCircle,
CheckCircle2,
XCircle
} from "lucide-react";
import { Badge } from "@/components/ui/badge";
const viewerData = [
{ time: '00:00', viewers: 1200 },
{ time: '04:00', viewers: 900 },
{ time: '08:00', viewers: 1500 },
{ time: '12:00', viewers: 2100 },
{ time: '16:00', viewers: 2400 },
{ time: '20:00', viewers: 2800 },
{ time: '23:59', viewers: 2300 },
];
const displayStatuses = [
{ id: 1, name: "Storskjerm", status: "online", content: "ESL_CSGO", viewers: 12500, uptime: "12h 30m" },
{ id: 2, name: "Barskjerm", status: "online", content: "Tournament Schedule", viewers: 5200, uptime: "8h 15m" },
{ id: 3, name: "Menyskjerm", status: "offline", content: "Welcome Slides", viewers: 0, uptime: "0h 0m" },
];
const upcomingEvents = [
{
id: 1,
title: "CS2 Tournament Finals",
time: "2:00 PM",
type: "tournament",
status: "upcoming"
},
{
id: 2,
title: "System Maintenance",
time: "4:00 AM",
type: "maintenance",
status: "scheduled"
},
{
id: 3,
title: "Special Game Night",
time: "6:00 PM",
type: "special",
status: "live"
}
];
const alerts = [
{
id: 1,
message: "High CPU usage on Main Stage display",
type: "warning",
time: "5 minutes ago"
},
{
id: 2,
message: "Secondary Stage stream quality degraded",
type: "error",
time: "15 minutes ago"
},
{
id: 3,
message: "Entrance Display connection restored",
type: "success",
time: "1 hour ago"
}
];
export default function AdminDashboard() {
const getEventTypeColor = (type: string) => {
switch (type) {
case "tournament":
return "text-purple-500";
case "maintenance":
return "text-pink-500";
case "special":
return "text-blue-500";
default:
return "text-gray-500";
}
};
const getEventStatusBadge = (status: string) => {
switch (status) {
case "live":
return <Badge className="bg-purple-500/10 text-purple-600 hover:bg-purple-500/20">Live</Badge>;
case "upcoming":
return <Badge className="bg-pink-500/10 text-pink-600 hover:bg-pink-500/20">Upcoming</Badge>;
case "scheduled":
return <Badge className="bg-blue-500/10 text-blue-600 hover:bg-blue-500/20">Scheduled</Badge>;
default:
return null;
}
};
const getAlertIcon = (type: string) => {
switch (type) {
case "warning":
return <AlertCircle className="h-5 w-5 text-pink-500" />;
case "error":
return <XCircle className="h-5 w-5 text-purple-500" />;
case "success":
return <CheckCircle2 className="h-5 w-5 text-blue-500" />;
default:
return null;
}
};
return (
<div className="min-h-screen bg-gradient-to-b from-violet-50 via-white to-sky-50">
<div className="max-w-[1400px] mx-auto space-y-8 p-8">
{/* Header */}
<div>
<h1 className="text-4xl font-bold tracking-tight bg-gradient-to-r from-purple-600 via-pink-500 to-blue-500 bg-clip-text text-transparent">
Dashboard Overview
</h1>
<p className="mt-2 text-gray-600">
Monitor your venue's performance and manage resources
</p>
</div>
{/* Quick Stats */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<Card className="rounded-2xl border-2 border-purple-100/50 hover:border-purple-200 transition-all duration-300 bg-white/70 backdrop-blur-sm">
<CardContent className="pt-6">
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-gray-500">Status</p>
<h3 className="text-2xl font-bold text-purple-600">Online</h3>
</div>
<div className="h-12 w-12 rounded-full bg-purple-50 flex items-center justify-center">
<Eye className="h-6 w-6 text-purple-500" />
</div>
</div>
<div className="mt-4 flex items-center gap-2">
<TrendingUp className="h-4 w-4 text-green-500" />
<span className="text-sm text-green-500">+cool</span>
<span className="text-sm text-gray-500">from last hour</span>
</div>
</CardContent>
</Card>
<Card className="rounded-2xl border-2 border-pink-100/50 hover:border-pink-200 transition-all duration-300 bg-white/70 backdrop-blur-sm">
<CardContent className="pt-6">
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-gray-500">Active Displays</p>
<h3 className="text-2xl font-bold text-pink-600">8/10</h3>
</div>
<div className="h-12 w-12 rounded-full bg-pink-50 flex items-center justify-center">
<Monitor className="h-6 w-6 text-pink-500" />
</div>
</div>
<div className="mt-4">
<Progress value={80} className="h-2 bg-pink-100">
<div className="h-full bg-pink-500 rounded-full" />
</Progress>
</div>
</CardContent>
</Card>
<Card className="rounded-2xl border-2 border-blue-100/50 hover:border-blue-200 transition-all duration-300 bg-white/70 backdrop-blur-sm">
<CardContent className="pt-6">
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-gray-500">System Load</p>
<h3 className="text-2xl font-bold text-blue-600">65%</h3>
</div>
<div className="h-12 w-12 rounded-full bg-blue-50 flex items-center justify-center">
<Activity className="h-6 w-6 text-blue-500" />
</div>
</div>
<div className="mt-4">
<Progress value={65} className="h-2 bg-blue-100">
<div className="h-full bg-blue-500 rounded-full" />
</Progress>
</div>
</CardContent>
</Card>
<Card className="rounded-2xl border-2 border-purple-100/50 hover:border-purple-200 transition-all duration-300 bg-white/70 backdrop-blur-sm">
<CardContent className="pt-6">
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-gray-500">Uptime</p>
<h3 className="text-2xl font-bold text-purple-600">99.9%</h3>
</div>
<div className="h-12 w-12 rounded-full bg-purple-50 flex items-center justify-center">
<Signal className="h-6 w-6 text-purple-500" />
</div>
</div>
<div className="mt-4">
<Progress value={99.9} className="h-2 bg-purple-100">
<div className="h-full bg-purple-500 rounded-full" />
</Progress>
</div>
</CardContent>
</Card>
</div>
{/* Main Content */}
<div className="grid grid-cols-12 gap-6">
{/* Viewer Analytics */}
<Card className="col-span-12 lg:col-span-8 rounded-2xl border-2 border-purple-100/50 hover:border-purple-200 transition-all duration-300 bg-white/70 backdrop-blur-sm">
<CardHeader>
<CardTitle className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Eye className="h-5 w-5 text-purple-500" />
Kul graf eller noe
</div>
<Button variant="outline" className="rounded-xl border-purple-200 hover:bg-purple-50 hover:text-purple-600">
View Details
<ArrowUpRight className="ml-2 h-4 w-4" />
</Button>
</CardTitle>
</CardHeader>
<CardContent>
<div className="h-[300px]">
</div>
</CardContent>
</Card>
{/* Display Status */}
<Card className="col-span-12 lg:col-span-4 rounded-2xl border-2 border-pink-100/50 hover:border-pink-200 transition-all duration-300 bg-white/70 backdrop-blur-sm">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Monitor className="h-5 w-5 text-pink-500" />
Display Status
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
{displayStatuses.map((display) => (
<Card key={display.id} className="rounded-xl border border-gray-100 hover:border-pink-200 transition-all duration-300">
<CardContent className="p-4">
<div className="flex items-start justify-between">
<div className="space-y-1">
<h3 className="font-semibold">{display.name}</h3>
<div className="flex items-center gap-2 text-sm text-gray-500">
<Clock className="h-4 w-4" />
<span>Uptime: {display.uptime}</span>
</div>
<div className="flex items-center gap-2 text-sm text-gray-500">
<Eye className="h-4 w-4" />
<span>{display.viewers.toLocaleString()} viewers</span>
</div>
</div>
<Badge
className={`${
display.status === 'online'
? 'bg-purple-500/10 text-purple-600'
: 'bg-pink-500/10 text-pink-600'
}`}
>
{display.status}
</Badge>
</div>
</CardContent>
</Card>
))}
</CardContent>
</Card>
{/* Upcoming Events */}
<Card className="col-span-12 lg:col-span-6 rounded-2xl border-2 border-blue-100/50 hover:border-blue-200 transition-all duration-300 bg-white/70 backdrop-blur-sm">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Calendar className="h-5 w-5 text-blue-500" />
Upcoming Events
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
{upcomingEvents.map((event) => (
<div
key={event.id}
className="flex items-center justify-between p-4 rounded-xl bg-white border border-gray-100 hover:border-blue-200 transition-all duration-300"
>
<div className="flex items-center gap-4">
<div className={`h-2 w-2 rounded-full ${getEventTypeColor(event.type)}`} />
<div>
<h4 className="font-medium">{event.title}</h4>
<p className="text-sm text-gray-500">{event.time}</p>
</div>
</div>
{getEventStatusBadge(event.status)}
</div>
))}
</CardContent>
</Card>
{/* System Alerts */}
<Card className="col-span-12 lg:col-span-6 rounded-2xl border-2 border-purple-100/50 hover:border-purple-200 transition-all duration-300 bg-white/70 backdrop-blur-sm">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<AlertCircle className="h-5 w-5 text-purple-500" />
System Alerts
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
{alerts.map((alert) => (
<div
key={alert.id}
className="flex items-start gap-4 p-4 rounded-xl bg-white border border-gray-100 hover:border-purple-200 transition-all duration-300"
>
{getAlertIcon(alert.type)}
<div>
<p className="font-medium">{alert.message}</p>
<p className="text-sm text-gray-500">{alert.time}</p>
</div>
</div>
))}
</CardContent>
</Card>
</div>
</div>
</div>
);
}