# Dashboard Setup

**Overview**\
The Drako Bot dashboard provides a powerful interface for managing your Discord bot. This guide will walk you through the setup and configuration process.

**Prerequisites**\
Before configuring the dashboard, ensure you have:

* Node.js installed (v18.20.6)
* Access to your Discord server with administrator permissions

**Basic Configuration**

#### Step 1: Discord Application Setup

1. Go to the **Discord Developer Portal**
2. Select your application (Bot)
3. Navigate to the **OAuth2** section
4. Add a redirect URL:
   * Use: **`http://IP:PORT/api/auth/callback`**
   * Make sure to replace **`IP` & `PORT`** with actual values.
5. Copy your **Client ID** and **Client Secret** from the OAuth2 page.

#### Step 2: Dashboard Configuration

In your `dashboard.yml` file, configure the following settings:

```yaml
Dashboard:
  Enabled: true
  ClientID: "YOUR_CLIENT_ID"
  ClientSecret: "YOUR_CLIENT_SECRET"
  Url: "http://IP:PORT"
  Port: 7000
  Auth:
    JWTSecret: "YOUR_SECURE_JWT_SECRET" # Make sure this is at least 32 long
```

{% hint style="danger" %} <mark style="color:red;">**Important:**</mark> The `Url` should **not** include `/api/auth/callback`
{% endhint %}

Replace the placeholders with your actual values:

* **`YOUR_CLIENT_ID`**: Your Discord application's Client ID
* **`YOUR_CLIENT_SECRET`**: Your Discord application's Client Secret
* **`YOUR_SECURE_JWT_SECRET`**: A secure random string for JWT token encryption

{% hint style="danger" %} <mark style="color:red;">**Important:**</mark> Make sure the JST Secret is 32 characters or longer
{% endhint %}

#### Step 3: Permissions Configuration

Configure role-based access control in your **`config.yml`**:

```yaml
Permissions:
  Dashboard:
    Login: ["ROLE_ID_1", "ROLE_ID_2"] # Roles that can access the dashboard
    Usage: ["ROLE_ID_1"] # Roles that can view analytics
    Settings: ["ROLE_ID_1"] # Roles that can modify settings
    Embed: ["ROLE_ID_1"] # Roles that can use the embed builder
    Suggestions: ["ROLE_ID_1"] # Roles that can manage suggestions
```

{% hint style="success" %}
**Note:** Login & pages won't be available if roles are not configured.
{% endhint %}

***

**Advanced Configuration**

#### Custom Navigation

You can customize the dashboard's navigation menu through the settings page:

1. Access the **dashboard settings**
2. Navigate to **Navigation Settings**
3. Add custom links with:
   * **Name**: Display name
   * **URL**: Target URL
   * **Icon**: FontAwesome icon name
   * **External**: Toggle for external links

#### Appearance Settings

Customize the dashboard's appearance:

1. Access **dashboard settings**
2. Navigate to **Dashboard Settings**
3. Configure:
   * **Navigation Name**: Brand name in the sidebar
   * **Tab Name**: Browser tab title
   * **Favicon**: Custom favicon URL

***

**Security Considerations**

#### JWT Secret

* Use a strong, random string for **`JWTSecret`**
* **Minimum recommended length**: 32 characters
* Keep this secret secure and never share it

***

**Troubleshooting**

#### Common Issues

**Cannot Access Dashboard**

* Verify the correct port is open
* Check if the Discord application **OAuth2** settings are correct
* Ensure the user has the required role

**Authentication Errors**

* Verify **`ClientID`** and **`ClientSecret`** are correct

{% hint style="danger" %} <mark style="color:red;">**Important:**</mark> If you receive `AuthError: Authentication failed` your client ID or secret is incorrect.
{% endhint %}

* Check if the redirect URL matches exactly
* Ensure **`JWTSecret`** is properly set
* Ensure that the URL has no leading /, such as <http://192.168.0.0:3000/>

{% hint style="success" %}
**Example**: URLs should always be filled in as Url: "<http://localhost:3000>" and not "<http://localhost:3000/>"
{% endhint %}

**Permission Issues**

* Verify role IDs are correct
* Check if roles are properly assigned
* Ensure the bot has necessary permissions