smueller/Mace-AIO-Discord-Bot---With-Dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CodeX - Dash and API Fixed

Browse Source
This commit is contained in:
RayExo
2026-07-16 11:14:48 +05:30
parent 7c3ef0d5a5
commit a2f113a35f
276 changed files with 4540 additions and 351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
dashboard/README.md
View File

@@ -9,13 +9,19 @@
╚══════╝ ╚═╝ ╚═╝ ╚═╝ ╚═════╝ ╚═╝ ╚═╝
```
**ZyroX Dashboard — Next.js Web Interface**
[![Next.js](https://img.shields.io/badge/Next.js-14+-000000?style=for-the-badge&logo=nextdotjs&logoColor=white)](https://nextjs.org)
[![TypeScript](https://img.shields.io/badge/TypeScript-5+-3178C6?style=for-the-badge&logo=typescript&logoColor=white)](https://typescriptlang.org)
[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-3-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white)](https://tailwindcss.com)
[![License](https://img.shields.io/badge/License-MIT-red?style=for-the-badge)](LICENSE)
[![Support](https://img.shields.io/badge/Support-discord.gg/codexdev-5865F2?style=for-the-badge&logo=discord&logoColor=white)](https://discord.gg/codexdev)
<h3>ZyroX Dashboard — Next.js Web Interface</h3>
<a href="https://nexiohost.in"><img src="https://img.shields.io/badge/⭐%20PREMIUM%20HOSTING-NexioHost-FFD700?style=for-the-badge&labelColor=1a1a2e&color=FFD700&logoColor=FFD700"/></a>
<p>
<a href="https://nextjs.org"><img src="https://img.shields.io/badge/Next.js-14+-000000?style=for-the-badge&logo=nextdotjs&logoColor=white"/></a>
<a href="https://typescriptlang.org"><img src="https://img.shields.io/badge/TypeScript-5+-3178C6?style=for-the-badge&logo=typescript&logoColor=white"/></a>
<a href="https://tailwindcss.com"><img src="https://img.shields.io/badge/Tailwind_CSS-3-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white"/></a>
<a href="LICENSE"><img src="https://img.shields.io/badge/License-MIT-red?style=for-the-badge"/></a>
</p>
<p>
<a href="https://discord.gg/codexdev"><img src="https://img.shields.io/badge/Discord-Join_Server-5865F2?style=for-the-badge&logo=discord&logoColor=white"/></a>
<a href="https://youtube.com/@CodeXDevs"><img src="https://img.shields.io/badge/YouTube-CodeXDevs-FF0000?style=for-the-badge&logo=youtube&logoColor=white"/></a>
<a href="https://github.com/RayExo"><img src="https://img.shields.io/badge/GitHub-RayExo-181717?style=for-the-badge&logo=github&logoColor=white"/></a>
</p>
</div>
@@ -23,45 +29,59 @@
## ✦ 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 to let server admins manage all bot settings through a modern UI.
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/ Next.js API routes (auth callbacks, etc.)
│ ├── dashboard/ Per-server settings pages
│ ├── docs/ Documentation page
│ ├── privacy/ Privacy policy page
│ └── terms/ Terms of service page
├── 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/ Dashboard-specific UI components
│ └── ui/ Reusable base components
├── hooks/ Custom React hooks
├── lib/ API helpers, auth config, utilities
└── types/ TypeScript type definitions
│ ├── 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 with your Discord account
- **Per-server management** — configure antinuke, automod, leveling, and more per guild
- **Live bot stats** — view real-time data from the bot
- **Fully branded** — customisable name, logo, and colours via environment variables
- **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
---
## ✦ Setup
## ✦ Prerequisites
### Prerequisites
| Requirement | Version |
| Requirement | Notes |
|---|---|
| Node.js | 18 or higher |
| ZyroX bot running | with `API_ENABLED=true` |
| Discord OAuth app | — |
| Node.js 18+ | — |
| ZyroX bot running | with `API_ENABLED=true` and `TUNNEL_ENABLED=true` |
| Discord OAuth app | from [Discord Developer Portal](https://discord.com/developers/applications) |
---
## ✦ Setup
### 1 — Install dependencies
@@ -71,25 +91,26 @@ npm install
### 2 — Configure environment
```bash
cp .env.example .env.local
```
Edit `.env.local`:
Create a `.env.local` file in this folder:
```env
NEXT_PUBLIC_API_URL = http://localhost:8000/api/v1
# ── 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_URL = http://localhost:3000
NEXTAUTH_SECRET = a_long_random_string
# ── NextAuth ──────────────────────────────────────────────────────
NEXTAUTH_URL = http://localhost:3000
NEXTAUTH_SECRET = a_long_random_string # generate: openssl rand -base64 32
DISCORD_CLIENT_ID = your_discord_oauth_client_id
DISCORD_CLIENT_SECRET = your_discord_oauth_client_secret
# ── Discord OAuth ─────────────────────────────────────────────────
DISCORD_CLIENT_ID = your_discord_oauth_client_id
DISCORD_CLIENT_SECRET = your_discord_oauth_client_secret
NEXT_PUBLIC_ADMIN_IDS = your_discord_user_id
NEXT_PUBLIC_BRAND_NAME = "ZyroX"
NEXT_PUBLIC_BRAND_NAME_WORD = "ZX"
# ── Branding ──────────────────────────────────────────────────────
NEXT_PUBLIC_ADMIN_IDS = your_discord_user_id
NEXT_PUBLIC_BRAND_NAME = "ZyroX"
NEXT_PUBLIC_BRAND_NAME_WORD = "ZX"
```
### 3 — Run locally
@@ -106,45 +127,42 @@ Open [http://localhost:3000](http://localhost:3000)
| Variable | Description |
|---|---|
| `NEXT_PUBLIC_API_URL` | Full URL to the bot's FastAPI backend |
| `NEXT_PUBLIC_DASHBOARD_API_KEY` | Must match `DASHBOARD_API_KEY` in the bot `.env` |
| `NEXTAUTH_URL` | Your dashboard's public URL |
| `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 access |
| `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 |
| `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 it.
Vercel is the recommended host — the project is pre-configured for zero-config deployment.
**Step 1 — Upload to Vercel**
**Step 1 — Connect your repo**
Go to [vercel.com](https://vercel.com) → **Add New Project** → connect your GitHub repo and set the root directory to `dashboard/`.
Go to [vercel.com](https://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 your Vercel project → **Settings → Environment Variables**, add all keys from `.env.example`.
In **Settings → Environment Variables**, add all keys from the table above.
| Variable | Example Value |
| Variable | Production Value |
|---|---|
| `NEXT_PUBLIC_API_URL` | `https://your-bot.render.com/api/v1` |
| `NEXT_PUBLIC_DASHBOARD_API_KEY` | same value as bot's `DASHBOARD_API_KEY` |
| `NEXT_PUBLIC_API_URL` | `https://xxxx.ngrok-free.app/api/v1` |
| `NEXTAUTH_URL` | `https://your-app.vercel.app` |
| `NEXTAUTH_SECRET` | [generate one here](https://generate-secret.vercel.app/32) |
| `NEXTAUTH_SECRET` | [generate one](https://generate-secret.vercel.app/32) |
| `DISCORD_CLIENT_ID` | from [Discord Developer Portal](https://discord.com/developers/applications) |
| `DISCORD_CLIENT_SECRET` | from Discord Developer Portal |
| `NEXT_PUBLIC_ADMIN_IDS` | your Discord user ID |
**Step 3 — Add redirect URI in Discord**
**Step 3 — Add the redirect URI in Discord**
Go to your app in the [Discord Developer Portal](https://discord.com/developers/applications) → **OAuth2 → Redirects** → add:
In your Discord app → **OAuth2 → Redirects** → add:
```
https://your-app.vercel.app/api/auth/callback/discord
@@ -156,24 +174,49 @@ 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 the bot is running with `API_ENABLED=true` and `NEXT_PUBLIC_API_URL` is correct |
| 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 mismatch | `NEXT_PUBLIC_DASHBOARD_API_KEY` must exactly match `DASHBOARD_API_KEY` in the bot |
| 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 |
---
<div align="center">
Developed with ❤️ by **CodeX Devs**
## ✦ CodeX Devs
[![Discord](https://img.shields.io/badge/Join_Support_Server-5865F2?style=for-the-badge&logo=discord&logoColor=white)](https://discord.gg/codexdev)
[![Hosting](https://img.shields.io/badge/Bot_Hosting-NexioHost-FF6B6B?style=for-the-badge)](https://nexiohost.in)
*Built for protection. Designed for style.*
*ZyroX — Built for protection. Designed for style.*
<p>
<a href="https://discord.gg/codexdev"><img src="https://img.shields.io/badge/Discord-Join_Server-5865F2?style=for-the-badge&logo=discord&logoColor=white"/></a>
<a href="https://youtube.com/@CodeXDevs"><img src="https://img.shields.io/badge/YouTube-CodeXDevs-FF0000?style=for-the-badge&logo=youtube&logoColor=white"/></a>
<a href="https://github.com/RayExo"><img src="https://img.shields.io/badge/GitHub-RayExo-181717?style=for-the-badge&logo=github&logoColor=white"/></a>
<a href="https://nexiohost.in"><img src="https://img.shields.io/badge/⭐%20PREMIUM%20HOSTING-NexioHost-FFD700?style=for-the-badge&labelColor=1a1a2e&color=FFD700&logoColor=FFD700"/></a>
</p>
© 2026 CodeX Devs — MIT License
</div>