Mace-AIO-Discord-Bot---With-Dashboard

███████╗██╗   ██╗██████╗  ██████╗ ██╗  ██╗
╚══███╔╝╚██╗ ██╔╝██╔══██╗██╔═══██╗╚██╗██╔╝
  ███╔╝  ╚████╔╝ ██████╔╝██║   ██║ ╚███╔╝ 
 ███╔╝    ╚██╔╝  ██╔══██╗██║   ██║ ██╔██╗ 
███████╗   ██║   ██║  ██║╚██████╔╝██╔╝ ██╗
╚══════╝   ╚═╝   ╚═╝  ╚═╝ ╚═════╝ ╚═╝  ╚═╝

ZyroX Dashboard — Next.js Web Interface

✦ Overview

This folder contains the ZyroX web dashboard built with Next.js 14 (App Router), TypeScript, and Tailwind CSS. It connects to the bot's FastAPI backend via HTTPS (ngrok tunnel) and lets server admins manage all bot settings through a sleek, branded UI.

dashboard/
├── app/                       App Router pages & API routes
│   ├── api/auth/              NextAuth OAuth callback
│   ├── dashboard/             Main dashboard area
│   │   ├── admin/             Admin-only panel
│   │   ├── guilds/            Server selection
│   │   └── guild/[guildId]/   Per-server settings pages
│   │       ├── antinuke/
│   │       ├── automod/
│   │       ├── leveling/
│   │       ├── logging/
│   │       ├── tickets/
│   │       ├── welcome/
│   │       └── …more
│   ├── docs/                  Documentation page
│   ├── privacy/               Privacy policy
│   └── terms/                 Terms of service
├── components/
│   ├── dashboard/             Feature-specific form components
│   └── ui/                    Base UI components (button, card, input…)
├── hooks/                     Custom React hooks
├── lib/                       API client, auth config, utilities
└── types/                     TypeScript type definitions

✦ Features

Discord OAuth2 login — secure sign-in, session managed by NextAuth
Per-server management — antinuke, automod, leveling, logging, tickets, welcome, and more
Live bot stats — real-time metrics pulled from the FastAPI backend
Admin panel — owner-only configuration and announcements
Fully branded — name, logo, and colours via environment variables
HTTPS ready — works with the bot's ngrok static domain out of the box
Vercel-ready — deploys in minutes with zero config changes

✦ Prerequisites

Requirement	Notes
Node.js 18+	—
ZyroX bot running	with `API_ENABLED=true` and `TUNNEL_ENABLED=true`
Discord OAuth app	from Discord Developer Portal

✦ Setup

1 — Install dependencies

npm install

2 — Configure environment

Create a .env.local file in this folder:

# ── Bot API ───────────────────────────────────────────────────────
# Use the ngrok static domain from the bot's tunnel
NEXT_PUBLIC_API_URL           = https://xxxx-xxxx-xxxx.ngrok-free.app/api/v1
NEXT_PUBLIC_DASHBOARD_API_KEY = your_shared_api_key   # must match bot's DASHBOARD_API_KEY

# ── NextAuth ──────────────────────────────────────────────────────
NEXTAUTH_URL                  = http://localhost:3000
NEXTAUTH_SECRET               = a_long_random_string   # generate: openssl rand -base64 32

# ── Discord OAuth ─────────────────────────────────────────────────
DISCORD_CLIENT_ID             = your_discord_oauth_client_id
DISCORD_CLIENT_SECRET         = your_discord_oauth_client_secret

# ── Branding ──────────────────────────────────────────────────────
NEXT_PUBLIC_ADMIN_IDS         = your_discord_user_id
NEXT_PUBLIC_BRAND_NAME        = "ZyroX"
NEXT_PUBLIC_BRAND_NAME_WORD   = "ZX"

3 — Run locally

npm run dev

Open http://localhost:3000

✦ Environment Reference

Variable	Description
`NEXT_PUBLIC_API_URL`	Full URL to the bot's FastAPI backend — use the ngrok static domain
`NEXT_PUBLIC_DASHBOARD_API_KEY`	Must exactly match `DASHBOARD_API_KEY` in the bot `.env`
`NEXTAUTH_URL`	Your dashboard's public URL (Vercel domain in production)
`NEXTAUTH_SECRET`	Random secret for NextAuth session signing
`DISCORD_CLIENT_ID`	Discord OAuth2 client ID
`DISCORD_CLIENT_SECRET`	Discord OAuth2 client secret
`NEXT_PUBLIC_ADMIN_IDS`	Comma-separated Discord user IDs with admin panel access
`NEXT_PUBLIC_BRAND_NAME`	Bot name shown in the dashboard UI
`NEXT_PUBLIC_BRAND_NAME_WORD`	Short abbreviation shown in the dashboard (e.g. `ZX`)

✦ Deployment (Vercel)

Vercel is the recommended host — the project is pre-configured for zero-config deployment.

Step 1 — Connect your repo

Go to vercel.com → Add New Project → connect your GitHub repo → set root directory to dashboard/

Vercel auto-detects Next.js — no build settings needed.

Step 2 — Add environment variables

In Settings → Environment Variables, add all keys from the table above.

Variable	Production Value
`NEXT_PUBLIC_API_URL`	`https://xxxx.ngrok-free.app/api/v1`
`NEXTAUTH_URL`	`https://your-app.vercel.app`
`NEXTAUTH_SECRET`	generate one
`DISCORD_CLIENT_ID`	from Discord Developer Portal

Step 3 — Add the redirect URI in Discord

In your Discord app → OAuth2 → Redirects → add:

https://your-app.vercel.app/api/auth/callback/discord

Step 4 — Deploy

Hit Deploy. Vercel builds and publishes automatically. ✓

✦ Connecting to the Bot API

The dashboard talks to the bot's FastAPI backend. The URL comes from NEXT_PUBLIC_API_URL.

Local dev — set to http://localhost:8000/api/v1 (bot running locally)
Production — set to the bot's ngrok static domain: https://xxxx.ngrok-free.app/api/v1

The bot prints the current tunnel URL every time it starts:

◈ Tunnel: API is live at  https://xxxx.ngrok-free.app
  ↳ set NEXT_PUBLIC_API_URL=https://xxxx.ngrok-free.app/api/v1

If you set NGROK_DOMAIN in the bot's .env, this URL will never change between restarts.

✦ Troubleshooting

Problem	Fix
Auth error on login	Check Discord OAuth client ID/secret and redirect URI in Developer Portal
Dashboard can't load data	Confirm bot is running with `API_ENABLED=true` and `NEXT_PUBLIC_API_URL` is correct
CORS error in browser	Make sure your Vercel URL is allowed — add it to `CORS_ORIGINS` in the bot's `.env`
`NEXTAUTH_SECRET` error	Make sure `NEXTAUTH_SECRET` is set and non-empty
API key rejected (401)	`NEXT_PUBLIC_DASHBOARD_API_KEY` must exactly match `DASHBOARD_API_KEY` in the bot
ngrok warning page appears	The bot's FastAPI middleware already injects the skip-warning header automatically

✦ CodeX Devs

Built for protection. Designed for style.