added frontend + securing beta server invites

web/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,2 @@
+import { handlers } from "@/auth" // Referring to the auth.ts we just created
+export const { GET, POST } = handlers

web/app/api/guilds/[guildId]/level_bridger/route.ts

@@ -0,0 +1,126 @@
+import { auth } from "@/auth";
+import { NextRequest, NextResponse } from "next/server";
+import { getLevelBridges, createLevelBridge, updateLevelBridge, deleteLevelBridge } from "@/lib/discord";
+
+// GET - Fetch level bridges for a guild
+export async function GET(
+    request: NextRequest,
+    { params }: { params: Promise<{ guildId: string }> }
+) {
+    const session = await auth();
+    const { guildId } = await params;
+
+    if (!session?.accessToken) {
+        return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    try {
+        const bridges = await getLevelBridges(guildId, session.accessToken as string);
+        return NextResponse.json(bridges);
+    } catch (error) {
+        console.error("Error fetching bridges:", error);
+        return NextResponse.json(
+            { error: "Internal server error" },
+            { status: 500 }
+        );
+    }
+}
+
+// POST - Create a new bridge
+export async function POST(
+    request: NextRequest,
+    { params }: { params: Promise<{ guildId: string }> }
+) {
+    const session = await auth();
+    const { guildId } = await params;
+
+    if (!session?.accessToken) {
+        return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    try {
+        const body = await request.json();
+        const result = await createLevelBridge(guildId, body, session.accessToken as string);
+
+        if (!result.success) {
+            return NextResponse.json(
+                { error: result.error || "Failed to create bridge" },
+                { status: 400, statusText: result.error } // Pass status text sometimes helps debugging
+            );
+        }
+
+        return NextResponse.json({ success: true });
+    } catch (error) {
+        console.error("Error creating bridge:", error);
+        return NextResponse.json(
+            { error: "Internal server error" },
+            { status: 500 }
+        );
+    }
+}
+
+// PUT - Update (or create) a bridge
+export async function PUT(
+    request: NextRequest,
+    { params }: { params: Promise<{ guildId: string }> }
+) {
+    const session = await auth();
+    const { guildId } = await params;
+
+    if (!session?.accessToken) {
+        return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    try {
+        const body = await request.json();
+        const result = await updateLevelBridge(guildId, body, session.accessToken as string);
+
+        if (!result.success) {
+            return NextResponse.json(
+                { error: result.error || "Failed to update bridge" },
+                { status: 400 }
+            );
+        }
+
+        return NextResponse.json({ success: true });
+    } catch (error) {
+        console.error("Error updating bridge:", error);
+        return NextResponse.json(
+            { error: "Internal server error" },
+            { status: 500 }
+        );
+    }
+}
+
+// DELETE - Delete a bridge
+export async function DELETE(
+    request: NextRequest,
+    { params }: { params: Promise<{ guildId: string }> }
+) {
+    const session = await auth();
+    const { guildId } = await params;
+
+    if (!session?.accessToken) {
+        return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    try {
+        const body = await request.json();
+        const result = await deleteLevelBridge(guildId, body.in_role_id, session.accessToken as string);
+
+        if (!result.success) {
+            return NextResponse.json(
+                { error: result.error || "Failed to delete bridge" },
+                { status: 400 }
+            );
+        }
+
+        return NextResponse.json({ success: true });
+    } catch (error) {
+        console.error("Error deleting bridge:", error);
+        return NextResponse.json(
+            { error: "Internal server error" },
+            { status: 500 }
+        );
+    }
+}

web/app/api/guilds/[guildId]/roles/route.ts

@@ -0,0 +1,27 @@
+import { auth } from "@/auth";
+import { NextRequest, NextResponse } from "next/server";
+import { getGuildRoles } from "@/lib/discord";
+
+// GET - Fetch all roles for a guild
+export async function GET(
+    request: NextRequest,
+    { params }: { params: Promise<{ guildId: string }> }
+) {
+    const session = await auth();
+    const { guildId } = await params;
+
+    if (!session?.accessToken) {
+        return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    try {
+        const roles = await getGuildRoles(guildId, session.accessToken as string);
+        return NextResponse.json(roles);
+    } catch (error) {
+        console.error("Error fetching roles:", error);
+        return NextResponse.json(
+            { error: "Internal server error" },
+            { status: 500 }
+        );
+    }
+}

web/app/api/guilds/[guildId]/tracks/route.ts

@@ -0,0 +1,126 @@
+import { auth } from "@/auth";
+import { NextRequest, NextResponse } from "next/server";
+import { getLevelTracks, createLevelTrack, updateLevelTrack, deleteLevelTrack } from "@/lib/discord";
+
+// GET - Fetch level tracks for a guild
+export async function GET(
+    request: NextRequest,
+    { params }: { params: Promise<{ guildId: string }> }
+) {
+    const session = await auth();
+    const { guildId } = await params;
+
+    if (!session?.accessToken) {
+        return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    try {
+        const tracks = await getLevelTracks(guildId, session.accessToken as string);
+        return NextResponse.json(tracks);
+    } catch (error) {
+        console.error("Error fetching tracks:", error);
+        return NextResponse.json(
+            { error: "Internal server error" },
+            { status: 500 }
+        );
+    }
+}
+
+// POST - Create a new track
+export async function POST(
+    request: NextRequest,
+    { params }: { params: Promise<{ guildId: string }> }
+) {
+    const session = await auth();
+    const { guildId } = await params;
+
+    if (!session?.accessToken) {
+        return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    try {
+        const body = await request.json();
+        const result = await createLevelTrack(guildId, body, session.accessToken as string);
+
+        if (!result.success) {
+            return NextResponse.json(
+                { error: result.error || "Failed to create track" },
+                { status: 400 }
+            );
+        }
+
+        return NextResponse.json({ success: true });
+    } catch (error) {
+        console.error("Error creating track:", error);
+        return NextResponse.json(
+            { error: "Internal server error" },
+            { status: 500 }
+        );
+    }
+}
+
+// PATCH - Update an existing track
+export async function PATCH(
+    request: NextRequest,
+    { params }: { params: Promise<{ guildId: string }> }
+) {
+    const session = await auth();
+    const { guildId } = await params;
+
+    if (!session?.accessToken) {
+        return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    try {
+        const body = await request.json();
+        const result = await updateLevelTrack(guildId, body, session.accessToken as string);
+
+        if (!result.success) {
+            return NextResponse.json(
+                { error: result.error || "Failed to update track" },
+                { status: 400 }
+            );
+        }
+
+        return NextResponse.json({ success: true });
+    } catch (error) {
+        console.error("Error updating track:", error);
+        return NextResponse.json(
+            { error: "Internal server error" },
+            { status: 500 }
+        );
+    }
+}
+
+// DELETE - Delete a track
+export async function DELETE(
+    request: NextRequest,
+    { params }: { params: Promise<{ guildId: string }> }
+) {
+    const session = await auth();
+    const { guildId } = await params;
+
+    if (!session?.accessToken) {
+        return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    try {
+        const body = await request.json();
+        const result = await deleteLevelTrack(guildId, body.track_name, session.accessToken as string);
+
+        if (!result.success) {
+            return NextResponse.json(
+                { error: result.error || "Failed to delete track" },
+                { status: 400 }
+            );
+        }
+
+        return NextResponse.json({ success: true });
+    } catch (error) {
+        console.error("Error deleting track:", error);
+        return NextResponse.json(
+            { error: "Internal server error" },
+            { status: 500 }
+        );
+    }
+}

web/app/api/oauth/callback/route.ts

@@ -0,0 +1,85 @@
+import { NextRequest, NextResponse } from "next/server";
+import { cookies } from "next/headers";
+import { checkBetaServer } from "@/lib/discord";
+
+export const dynamic = 'force-dynamic';
+
+export async function GET(request: NextRequest) {
+    try {
+        const searchParams = request.nextUrl.searchParams;
+        const code = searchParams.get("code");
+        const state = searchParams.get("state");
+        const guildId = searchParams.get("guild_id");
+        const error = searchParams.get("error");
+
+        if (error) {
+            return NextResponse.redirect(new URL("/dashboard?error=access_denied", request.url));
+        }
+
+        if (!code || !state || !guildId) {
+            return NextResponse.redirect(new URL("/dashboard?error=invalid_request", request.url));
+        }
+
+        const cookieStore = await cookies();
+        const storedState = cookieStore.get("oauth_invite_state")?.value;
+        const storedGuildId = cookieStore.get("oauth_invite_guild")?.value;
+
+        // 1. Verify State
+        if (!storedState || state !== storedState) {
+            return NextResponse.redirect(new URL("/dashboard?error=state_mismatch", request.url));
+        }
+
+        // 2. Verify Guild ID Match (Optional but recommended extra layer)
+        if (storedGuildId && guildId !== storedGuildId) {
+            return NextResponse.redirect(new URL("/dashboard?error=guild_mismatch", request.url));
+        }
+
+        // 3. CRITICAL: Check Beta Server Eligibility
+        // We only exchange the code (and thus add the bot) if this check passes.
+        const [isBeta] = await checkBetaServer([guildId]);
+
+        if (!isBeta) {
+            console.warn(`Blocked attempt to add bot to non-beta server: ${guildId}`);
+            return NextResponse.redirect(new URL("/dashboard?error=not_beta_server", request.url));
+        }
+
+        // 4. Exchange Code for Token (Finalize Bot Join)
+        const appUrl = process.env.APP_URL;
+        if (!appUrl) {
+            console.error("APP_URL env var is not set");
+            return NextResponse.redirect(new URL("/dashboard?error=config_error", request.url));
+        }
+        const redirectUri = `${appUrl}/api/oauth/callback`;
+
+        const tokenResponse = await fetch("https://discord.com/api/oauth2/token", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/x-www-form-urlencoded",
+            },
+            body: new URLSearchParams({
+                client_id: process.env.AUTH_DISCORD_ID as string,
+                client_secret: process.env.AUTH_DISCORD_SECRET as string,
+                grant_type: "authorization_code",
+                code: code,
+                redirect_uri: redirectUri,
+            }),
+        });
+
+        if (!tokenResponse.ok) {
+            const errorText = await tokenResponse.text();
+            console.error("Failed to exchange token:", errorText);
+            return NextResponse.redirect(new URL("/dashboard?error=token_exchange_failed", request.url));
+        }
+
+        // Clean up cookies
+        cookieStore.delete("oauth_invite_state");
+        cookieStore.delete("oauth_invite_guild");
+
+        // Success!
+        return NextResponse.redirect(new URL(`/dashboard?success=bot_added&guild_id=${guildId}`, request.url));
+
+    } catch (error) {
+        console.error("Callback handler error:", error);
+        return NextResponse.redirect(new URL("/dashboard?error=internal_server_error", request.url));
+    }
+}

web/app/api/oauth/invite/route.ts

@@ -0,0 +1,66 @@
+import { NextRequest, NextResponse } from "next/server";
+import { cookies } from "next/headers";
+import crypto from "crypto";
+
+export const dynamic = 'force-dynamic';
+
+export async function GET(request: NextRequest) {
+    try {
+        const searchParams = request.nextUrl.searchParams;
+        const guildId = searchParams.get("guild_id");
+
+        if (!guildId) {
+            return new NextResponse("Missing guild_id", { status: 400 });
+        }
+
+        // Generate a random state for security
+        const state = crypto.randomBytes(16).toString("hex");
+
+        // Set the state in a secure cookie (HttpOnly, Secure, SameSite)
+        // This cookie allows us to verify the callback originated from this flow
+        const cookieStore = await cookies();
+        cookieStore.set("oauth_invite_state", state, {
+            httpOnly: true,
+            secure: process.env.NODE_ENV === "production",
+            sameSite: "lax",
+            maxAge: 300, // 5 minutes to complete the flow
+            path: "/",
+        });
+
+        // Store the target guild ID in a cookie too, to verify against the callback's guild_id
+        // This prevents someone from starting a flow for Guild A and swapping the callback to Guild B (though state mismatch would likely catch it too)
+        cookieStore.set("oauth_invite_guild", guildId, {
+            httpOnly: true,
+            secure: process.env.NODE_ENV === "production",
+            sameSite: "lax",
+            maxAge: 300,
+            path: "/",
+        });
+
+        const appUrl = process.env.APP_URL;
+        if (!appUrl) {
+            console.error("APP_URL env var is not set");
+            return new NextResponse("Configuration Error", { status: 500 });
+        }
+        const redirectUri = `${appUrl}/api/oauth/callback`;
+        const clientId = process.env.AUTH_DISCORD_ID;
+
+        // Construct Discord OAuth2 Authorization URL
+        // We use response_type=code because we enabled "Requires OAuth2 Code Grant" for the bot
+        const params = new URLSearchParams({
+            client_id: clientId as string,
+            permissions: "8", // Administrator (as requested in original link)
+            scope: "bot", // Add 'applications.commands' if needed, but 'bot' is the primary one here
+            redirect_uri: redirectUri,
+            response_type: "code",
+            state: state,
+            guild_id: guildId,
+            disable_guild_select: "true",
+        });
+
+        return NextResponse.redirect(`https://discord.com/oauth2/authorize?${params.toString()}`);
+    } catch (error) {
+        console.error("Failed to initiate invite flow:", error);
+        return new NextResponse("Internal Server Error", { status: 500 });
+    }
+}

web/app/dashboard/[guildId]/DashboardContent.tsx

@@ -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>
+        </>
+    );
+}

web/app/dashboard/[guildId]/layout.tsx

@@ -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>
+    );
+}

web/app/dashboard/[guildId]/leaderboard/page.tsx

@@ -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}
+        />
+    );
+}

web/app/dashboard/[guildId]/leveling/page.tsx

@@ -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} />;
+}

web/app/dashboard/[guildId]/page.tsx

@@ -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`);
+}

web/app/dashboard/page.tsx

@@ -0,0 +1,98 @@
+import { auth } from "@/auth"
+import { redirect } from "next/navigation"
+import Link from "next/link"
+import { getUserGuilds } from "@/lib/discord"
+import Toast from "@/components/Toast"
+
+export default async function Dashboard() {
+    const session = await auth()
+
+    if (!session) {
+        redirect("/")
+    }
+
+    // Fetch user's guilds from Discord API
+    let managedGuilds: any[] = [];
+    if (session?.accessToken) {
+        managedGuilds = await getUserGuilds(session.accessToken as string);
+    }
+
+    return (
+        <div className="min-h-screen bg-black/50 relative">
+            <Toast />
+            {/* Header / User Corner */}
+            <div className="absolute top-4 right-4 flex items-center gap-3 bg-white/5 px-4 py-2 rounded-full border border-white/10 backdrop-blur-md z-10">
+                <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-10 h-10 rounded-full border border-blue-500/50"
+                    />
+                )}
+            </div>
+
+            <div className="container mx-auto px-4 py-20 flex flex-col items-center">
+                <div className="w-full max-w-4xl mb-8 p-4 bg-blue-500/10 border border-blue-500/20 rounded-lg text-center text-blue-200 text-sm">
+                    If you would like to be participating in the beta program of void sentinel, please send a DM to <span className="font-mono bg-blue-500/20 px-1 rounded">_void_x_</span> on discord.
+                </div>
+
+                <h1 className="text-4xl md:text-5xl font-bold tracking-tighter bg-clip-text text-transparent bg-gradient-to-r from-white via-blue-200 to-slate-400 mb-8">
+                    Select a Server
+                </h1>
+
+                {managedGuilds.length === 0 ? (
+                    <div className="text-gray-400 text-center bg-white/5 p-8 rounded-xl border border-white/10 backdrop-blur-sm max-w-lg">
+                        <p className="text-lg mb-2">No servers found where you have management permissions.</p>
+                        <p className="text-sm">Make sure you have "Manage Server" or "Administrator" permissions.</p>
+                    </div>
+                ) : (
+                    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 w-full max-w-6xl">
+                        {managedGuilds.map((guild: any) => (
+                            <div key={guild.id} className="group relative bg-white/5 hover:bg-white/10 border border-white/10 hover:border-blue-500/50 rounded-xl p-6 transition-all duration-300 hover:-translate-y-1 overflow-hidden block">
+                                <div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
+
+                                <div className="flex flex-col items-center text-center relative z-10">
+                                    {guild.icon ? (
+                                        <img
+                                            src={`https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}.png`}
+                                            alt={guild.name}
+                                            className="w-20 h-20 rounded-full mb-4 shadow-lg group-hover:scale-105 transition-transform"
+                                        />
+                                    ) : (
+                                        <div className="w-20 h-20 rounded-full mb-4 bg-gray-700 flex items-center justify-center text-2xl font-bold text-gray-400 group-hover:text-white transition-colors">
+                                            {guild.name.substring(0, 2)}
+                                        </div>
+                                    )}
+                                    <h3 className="font-semibold text-lg text-white mb-3 truncate w-full">{guild.name}</h3>
+
+                                    {guild.botInGuild ? (
+                                        <Link href={`/dashboard/${guild.id}`} className="px-4 py-2 bg-blue-500/10 hover:bg-blue-500/20 text-blue-300 rounded-lg border border-blue-500/30 transition-colors w-full">
+                                            Manage
+                                        </Link>
+                                    ) : guild.isBetaServer ? (
+                                        <a
+                                            href={`/api/oauth/invite?guild_id=${guild.id}`}
+                                            className="px-4 py-2 bg-white/5 hover:bg-white/10 text-gray-300 rounded-lg border border-white/10 hover:border-white/20 transition-colors w-full flex items-center justify-center gap-2"
+                                        >
+                                            Add to Server
+                                        </a>
+                                    ) : (
+                                        <button
+                                            disabled
+                                            className="px-4 py-2 bg-white/5 text-gray-500 rounded-lg border border-white/5 cursor-not-allowed w-full flex items-center justify-center gap-2"
+                                        >
+                                            Request Access
+                                        </button>
+                                    )}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </div>
+        </div>
+    )
+}

web/app/globals.css

@@ -0,0 +1,161 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --primary: oklch(0.205 0 0);
+  --secondary: oklch(0.97 0 0);
+  --accent: oklch(0.97 0 0);
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-primary: var(--primary);
+  --color-secondary: var(--secondary);
+  --color-accent: var(--accent);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+}
+
+body {
+  font-family: var(--font-sans), Arial, Helvetica, sans-serif;
+  overflow-x: hidden;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--background);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--secondary);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--accent);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none !important;
+  width: 0 !important;
+  height: 0 !important;
+}
+
+.no-scrollbar {
+  -ms-overflow-style: none !important;
+  /* IE and Edge */
+  scrollbar-width: none !important;
+  /* Firefox */
+}

web/app/layout.tsx

@@ -0,0 +1,40 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import { ThemeProvider } from "@/components/theme-provider"
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Void Sentinel Dashboard",
+  description: "Manage your Void Sentinel bot, configure leveling roles, check leaderboards, and more.",
+  icons: {
+    icon: "/void_sentinel.png",
+  },
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        <ThemeProvider attribute="class" defaultTheme="dark">
+          {children}
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

web/app/page.tsx

@@ -0,0 +1,18 @@
+import Background from "@/components/Background";
+import Hero from "@/components/Hero";
+import Features from "@/components/Features";
+import Footer from "@/components/Footer";
+import { auth } from "@/auth";
+import { LoginButton } from "@/components/LoginButton";
+
+export default async function Home() {
+  const session = await auth();
+  return (
+    <main className="relative min-h-screen text-white">
+      <Background />
+      <Hero authButton={<LoginButton session={session} />} />
+      <Features />
+      <Footer />
+    </main>
+  );
+}