added frontend + securing beta server invites

This commit is contained in:
2026-01-02 22:50:02 +05:30
parent cb12b8ef75
commit 9b17a99456
52 changed files with 5409 additions and 5 deletions

View File

@@ -0,0 +1,348 @@
"use client";
import { useState } from "react";
import { Menu, X, Trophy, ArrowBigUp } from "lucide-react";
import LevelingEditor from "@/components/LevelingEditor";
import type { Guild, LeaderboardMember } from "@/lib/discord";
type TabType = "leaderboard" | "leveling";
interface DashboardContentProps {
currentGuild: Guild;
leaderboardData: LeaderboardMember[];
currentUserRank?: LeaderboardMember;
currentUserId?: string;
}
export default function DashboardContent({
currentGuild,
leaderboardData,
currentUserRank,
currentUserId,
}: DashboardContentProps) {
const [activeTab, setActiveTab] = useState<TabType>("leaderboard");
const [sidebarOpen, setSidebarOpen] = useState(false);
const menuItems = [
{ id: "leaderboard" as TabType, label: "Leaderboard", icon: Trophy },
{ id: "leveling" as TabType, label: "Leveling", icon: ArrowBigUp },
];
const handleTabChange = (tab: TabType) => {
setActiveTab(tab);
setSidebarOpen(false);
};
return (
<div className="flex flex-1 pt-16 sm:pt-20 h-screen overflow-hidden">
{/* Mobile Menu Button */}
<button
onClick={() => setSidebarOpen(!sidebarOpen)}
className="fixed bottom-4 right-4 z-50 lg:hidden p-3 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg transition-all"
>
{sidebarOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
</button>
{/* Mobile Sidebar Overlay */}
{sidebarOpen && (
<div
className="fixed inset-0 bg-black/60 z-40 lg:hidden backdrop-blur-sm"
onClick={() => setSidebarOpen(false)}
/>
)}
{/* Sidebar */}
<div
className={`fixed lg:relative inset-y-0 left-0 z-40 w-64 flex-shrink-0 bg-black/90 lg:bg-black/20 border-r border-white/10 overflow-y-auto backdrop-blur-md lg:backdrop-blur-sm transform transition-transform duration-300 ease-in-out ${sidebarOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0"
}`}
>
<div className="p-4 space-y-2 pt-20 lg:pt-4">
{menuItems.map((item) => {
const Icon = item.icon;
const isActive = activeTab === item.id;
return (
<button
key={item.id}
onClick={() => handleTabChange(item.id)}
className={`w-full text-left px-4 py-3 rounded-lg font-medium transition-all flex items-center gap-3 ${isActive
? "bg-blue-600/20 text-blue-400 border border-blue-600/30"
: "text-gray-400 hover:text-white hover:bg-white/5 border border-transparent"
}`}
>
<Icon className="w-5 h-5" />
{item.label}
</button>
);
})}
</div>
</div>
{/* Main Area */}
<div className="flex-1 overflow-y-auto bg-transparent p-4 sm:p-6 lg:p-8">
<div className="max-w-5xl mx-auto">
{activeTab === "leaderboard" && (
<LeaderboardView
leaderboardData={leaderboardData}
currentUserRank={currentUserRank}
currentUserId={currentUserId}
/>
)}
{activeTab === "leveling" && (
<LevelingEditor guildId={currentGuild.id} />
)}
</div>
</div>
</div>
);
}
interface LeaderboardViewProps {
leaderboardData: LeaderboardMember[];
currentUserRank?: LeaderboardMember;
currentUserId?: string;
}
function LeaderboardView({
leaderboardData,
currentUserRank,
currentUserId,
}: LeaderboardViewProps) {
return (
<>
<div className="mb-6 sm:mb-8">
<h2 className="text-2xl sm:text-3xl font-bold text-white mb-4 sm:mb-6">
Leaderboard
</h2>
{currentUserRank && (
<div className="bg-white/5 border border-white/10 rounded-xl sm:rounded-2xl p-4 sm:p-6 flex flex-col md:flex-row items-center justify-between backdrop-blur-md shadow-2xl relative overflow-hidden group">
{/* Background Glow */}
<div className="absolute top-0 right-0 w-64 h-64 bg-blue-500/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 group-hover:bg-blue-500/10 transition-all duration-700"></div>
<div className="flex items-center gap-4 sm:gap-6 relative z-10 mb-4 md:mb-0">
{currentUserRank.avatar ? (
<img
src={currentUserRank.avatar}
alt={currentUserRank.username}
className="w-16 h-16 sm:w-20 sm:h-20 rounded-full border-4 border-white/10 shadow-lg"
/>
) : (
<div className="w-16 h-16 sm:w-20 sm:h-20 rounded-full bg-gray-700 flex items-center justify-center text-white font-bold text-2xl sm:text-3xl border-4 border-white/10 shadow-lg">
{currentUserRank.username.charAt(0).toUpperCase()}
</div>
)}
<div className="flex flex-col">
<span className="text-xl sm:text-2xl font-bold text-white">
{currentUserRank.username}
</span>
</div>
</div>
<div className="flex bg-black/20 rounded-xl p-3 sm:p-4 gap-4 sm:gap-8 md:gap-16 border border-white/5 relative z-10 w-full md:w-auto justify-center">
<div className="text-center">
<p className="text-gray-400 text-[10px] sm:text-xs uppercase font-bold tracking-wider mb-1">
Rank
</p>
<p className="text-2xl sm:text-3xl font-black text-white">
#{currentUserRank.rank}
</p>
</div>
<div className="w-px bg-white/10"></div>
<div className="text-center">
<p className="text-gray-400 text-[10px] sm:text-xs uppercase font-bold tracking-wider mb-1">
Level
</p>
<p className="text-2xl sm:text-3xl font-black text-yellow-500">
{currentUserRank.level}
</p>
</div>
<div className="w-px bg-white/10"></div>
<div className="text-center">
<p className="text-gray-400 text-[10px] sm:text-xs uppercase font-bold tracking-wider mb-1">
Total XP
</p>
<p className="text-2xl sm:text-3xl font-black text-blue-400">
{currentUserRank.xp.toLocaleString()}
</p>
</div>
</div>
</div>
)}
</div>
<div className="bg-white/5 backdrop-blur-md border border-white/10 rounded-xl sm:rounded-2xl overflow-hidden shadow-xl">
{/* Mobile Card View */}
<div className="block sm:hidden">
{leaderboardData.length > 0 ? (
<div className="divide-y divide-white/5">
{leaderboardData.map((member) => {
const isCurrentUser = member.user_id === currentUserId;
let rankColor = "text-blue-400";
if (member.rank === 1)
rankColor = "text-yellow-400";
if (member.rank === 2)
rankColor = "text-gray-300";
if (member.rank === 3)
rankColor = "text-orange-400";
return (
<div
key={member.user_id}
className={`p-4 ${isCurrentUser
? "bg-blue-600/20"
: ""
}`}
>
<div className="flex items-center gap-3">
<span
className={`font-mono font-bold text-lg w-10 ${rankColor}`}
>
#{member.rank}
</span>
{member.avatar ? (
<img
src={member.avatar}
alt=""
className="w-10 h-10 rounded-full bg-gray-700 shadow-md"
/>
) : (
<div className="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center text-white font-bold">
{member.username
.charAt(0)
.toUpperCase()}
</div>
)}
<div className="flex-1 min-w-0">
<p
className={`font-semibold truncate ${isCurrentUser
? "text-blue-200"
: "text-white"
}`}
>
{member.username}
</p>
{isCurrentUser && (
<span className="text-xs text-blue-400">
You
</span>
)}
</div>
<div className="text-right">
<p className="font-bold text-yellow-500">
Lv. {member.level}
</p>
<p className="text-xs text-gray-500 font-mono">
{member.xp.toLocaleString()} XP
</p>
</div>
</div>
</div>
);
})}
</div>
) : (
<div className="p-12 text-center text-gray-500">
Setup leveling system to see the leaderboard
</div>
)}
</div>
{/* Desktop Table View */}
<div className="hidden sm:block overflow-x-auto">
<table className="w-full text-left border-collapse">
<thead>
<tr className="border-b border-white/10 text-gray-400 text-sm uppercase tracking-wider bg-white/5">
<th className="p-4 pl-6">Rank</th>
<th className="p-4">User</th>
<th className="p-4 text-right">Level</th>
<th className="p-4 pr-6 text-right">XP</th>
</tr>
</thead>
<tbody className="text-gray-300">
{leaderboardData.length > 0 ? (
leaderboardData.map((member) => {
const isCurrentUser =
member.user_id === currentUserId;
let rankColor = "text-blue-400";
if (member.rank === 1)
rankColor =
"text-yellow-400 drop-shadow-[0_0_10px_rgba(250,204,21,0.5)]";
if (member.rank === 2)
rankColor =
"text-gray-300 drop-shadow-[0_0_10px_rgba(209,213,219,0.5)]";
if (member.rank === 3)
rankColor =
"text-orange-400 drop-shadow-[0_0_10px_rgba(251,146,60,0.5)]";
return (
<tr
key={member.user_id}
className={`border-b border-white/5 transition-all ${isCurrentUser
? "bg-blue-600/20 hover:bg-blue-600/30"
: "hover:bg-white/5"
}`}
>
<td
className={`p-4 pl-6 font-mono font-bold text-lg ${rankColor}`}
>
#{member.rank}
</td>
<td className="p-4">
<div className="flex items-center gap-4">
{member.avatar ? (
<img
src={member.avatar}
alt=""
className="w-10 h-10 rounded-full bg-gray-700 shadow-md"
/>
) : (
<div className="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center text-white font-bold text-lg">
{member.username
.charAt(0)
.toUpperCase()}
</div>
)}
<div className="flex flex-col">
<span
className={`font-semibold text-lg ${isCurrentUser
? "text-blue-200"
: "text-white"
}`}
>
{member.username}
</span>
{isCurrentUser && (
<span className="text-xs text-blue-400 font-medium">
You
</span>
)}
</div>
</div>
</td>
<td className="p-4 text-right font-bold text-yellow-500 text-lg">
{member.level}
</td>
<td className="p-4 pr-6 text-right text-gray-500 font-mono">
{member.xp.toLocaleString()}
</td>
</tr>
);
})
) : (
<tr>
<td
colSpan={4}
className="p-12 text-center text-gray-500 text-lg"
>
Setup leveling system to see the leaderboard
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
</>
);
}

View File

@@ -0,0 +1,134 @@
import { auth } from "@/auth";
import { redirect, notFound } from "next/navigation";
import { getUserGuilds } from "@/lib/discord";
import ServerSwitcher from "@/components/ServerSwitcher";
import DashboardSidebar from "@/components/DashboardSidebar";
export default async function DashboardLayout({
children,
params,
}: {
children: React.ReactNode;
params: Promise<{ guildId: string }>;
}) {
const session = await auth();
const { guildId } = await params;
if (!session?.accessToken) {
redirect("/");
}
const guilds = await getUserGuilds(session.accessToken as string);
const currentGuild = guilds.find((g) => g.id === guildId);
if (!currentGuild) {
notFound();
}
// If bot is not in guild, show the invite page
if (!currentGuild.botInGuild) {
return (
<div className="min-h-screen bg-black/50 relative flex flex-col">
{/* Header */}
<header className="fixed top-0 left-0 right-0 p-2 sm:p-4 flex justify-between items-start z-50 pointer-events-none">
<div className="pointer-events-auto">
<ServerSwitcher currentGuild={currentGuild} guilds={guilds} />
</div>
<div className="flex items-center gap-2 sm:gap-3 bg-white/5 px-3 sm:px-4 py-2 rounded-full border border-white/10 backdrop-blur-md pointer-events-auto">
<div className="text-right hidden sm:block">
<p className="text-sm font-semibold text-white">{session.user?.name}</p>
</div>
{session.user?.image && (
<img
src={session.user.image}
alt="User"
className="w-8 h-8 sm:w-10 sm:h-10 rounded-full border border-blue-500/50"
/>
)}
</div>
</header>
{/* Bot Not In Guild Content */}
<div className="container mx-auto px-4 py-24 sm:py-32 flex flex-col items-center justify-center flex-1 text-center">
{currentGuild.icon ? (
<img
src={`https://cdn.discordapp.com/icons/${currentGuild.id}/${currentGuild.icon}.png`}
alt={currentGuild.name}
className="w-24 h-24 sm:w-32 sm:h-32 rounded-full mx-auto shadow-[0_0_30px_rgba(59,130,246,0.5)]"
/>
) : (
<div className="w-24 h-24 sm:w-32 sm:h-32 rounded-full mx-auto bg-gray-800 flex items-center justify-center text-3xl sm:text-4xl font-bold text-gray-400 shadow-[0_0_30px_rgba(59,130,246,0.2)]">
{currentGuild.name.substring(0, 2)}
</div>
)}
<div className="space-y-2 mt-6">
<h1 className="text-3xl sm:text-5xl font-bold text-white tracking-tight">{currentGuild.name}</h1>
<p className="text-blue-300/80 text-sm sm:text-base">
Void Sentinel is not in this server
</p>
</div>
<div className="mt-6 sm:mt-8">
<div className="mt-6 sm:mt-8">
{currentGuild.isBetaServer ? (
<a
href={`https://discord.com/oauth2/authorize?client_id=${process.env.AUTH_DISCORD_ID}&permissions=8&scope=bot&guild_id=${currentGuild.id}&disable_guild_select=true`}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2 px-6 sm:px-8 py-2.5 sm:py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-full font-bold text-base sm:text-lg transition-all hover:scale-105 shadow-[0_0_20px_rgba(37,99,235,0.5)] hover:shadow-[0_0_40px_rgba(37,99,235,0.6)]"
>
Add to Server
</a>
) : (
<button
disabled
className="inline-flex items-center gap-2 px-6 sm:px-8 py-2.5 sm:py-3 bg-white/5 text-gray-400 rounded-full font-bold text-base sm:text-lg cursor-not-allowed border border-white/10"
>
Request Access
</button>
)}
</div>
</div>
</div>
</div>
);
}
return (
<div className="min-h-screen bg-black/50 relative flex flex-col">
{/* Header */}
<header className="fixed top-0 left-0 right-0 p-2 sm:p-4 flex justify-between items-start z-50 pointer-events-none">
<div className="pointer-events-auto">
<ServerSwitcher currentGuild={currentGuild} guilds={guilds} />
</div>
<div className="flex items-center gap-2 sm:gap-3 bg-white/5 px-3 sm:px-4 py-2 rounded-full border border-white/10 backdrop-blur-md pointer-events-auto">
<div className="text-right hidden sm:block">
<p className="text-sm font-semibold text-white">{session.user?.name}</p>
</div>
{session.user?.image && (
<img
src={session.user.image}
alt="User"
className="w-8 h-8 sm:w-10 sm:h-10 rounded-full border border-blue-500/50"
/>
)}
</div>
</header>
{/* Dashboard Content with Sidebar */}
<div className="flex flex-1 pt-16 sm:pt-20 h-screen overflow-hidden">
<DashboardSidebar guildId={guildId} />
{/* Main Area */}
<div className="flex-1 overflow-y-auto bg-transparent p-4 sm:p-6 lg:p-8">
<div className="max-w-5xl mx-auto">
{children}
</div>
</div>
</div>
</div>
);
}

View File

@@ -0,0 +1,31 @@
import { auth } from "@/auth";
import { redirect, notFound } from "next/navigation";
import { getUserGuilds, getGuildLeaderboard } from "@/lib/discord";
import LeaderboardView from "@/components/LeaderboardView";
export default async function LeaderboardPage({ params }: { params: Promise<{ guildId: string }> }) {
const session = await auth();
const { guildId } = await params;
if (!session?.accessToken) {
redirect("/");
}
const guilds = await getUserGuilds(session.accessToken as string);
const currentGuild = guilds.find((g) => g.id === guildId);
if (!currentGuild || !currentGuild.botInGuild) {
notFound();
}
const leaderboardData = await getGuildLeaderboard(currentGuild.id);
const currentUserRank = leaderboardData.find(m => m.user_id === session?.user?.id);
return (
<LeaderboardView
leaderboardData={leaderboardData}
currentUserRank={currentUserRank}
currentUserId={session.user?.id}
/>
);
}

View File

@@ -0,0 +1,22 @@
import { auth } from "@/auth";
import { redirect, notFound } from "next/navigation";
import { getUserGuilds } from "@/lib/discord";
import LevelingEditor from "@/components/LevelingEditor";
export default async function LevelingPage({ params }: { params: Promise<{ guildId: string }> }) {
const session = await auth();
const { guildId } = await params;
if (!session?.accessToken) {
redirect("/");
}
const guilds = await getUserGuilds(session.accessToken as string);
const currentGuild = guilds.find((g) => g.id === guildId);
if (!currentGuild || !currentGuild.botInGuild) {
notFound();
}
return <LevelingEditor guildId={currentGuild.id} />;
}

View File

@@ -0,0 +1,8 @@
import { redirect } from "next/navigation";
export default async function ServerDashboard({ params }: { params: Promise<{ guildId: string }> }) {
const { guildId } = await params;
// Redirect to leaderboard by default
redirect(`/dashboard/${guildId}/leaderboard`);
}