fuma-nama / discord-bot-dashboard-next

The Most Powerful Discord bot Dashboard Template

Fuma Nama

Here's the home of my personal website built using Next.js App Router and MDX.

Welcome to give it a star if you appreciate my work!

discord-bot-dashboard-next's Issues

Backend Development

I don't know how to use Backend Development. Is there any support or documentation to help me?

Default export is deprecated

Describe the bug
When I launch the dashboard in dev mode, I receive a warning.

To Reproduce
Simply run the command "pnpm run dev" and visit a page of the dashboard while logged in.

Expected behavior
Here's what we get in the console:

root@debian:~/discord-bot-dashboard-next# pnpm run dev

> [email protected] dev /root/discord-bot-dashboard-next
> next dev

  ▲ Next.js 13.5.6
  - Local:        http://localhost:3000
  - Environments: .env

 ✓ Ready in 7.6s
 ✓ Compiled /src/middleware in 639ms (59 modules)
 ○ Compiling /user/home ...
 ✓ Compiled /user/home in 11.2s (1505 modules)
[DEPRECATED] Default export is deprecated. Instead use `import { create } from 'zustand'`.
[DEPRECATED] Default export is deprecated. Instead use `import { create } from 'zustand'`.
 ✓ Compiled /api/auth in 1520ms (231 modules)
 ○ Compiling /guilds/[guild] ...
 ✓ Compiled /guilds/[guild] in 7.3s (1699 modules)
[DEPRECATED] Default export is deprecated. Instead use `import { create } from 'zustand'`.
[DEPRECATED] Default export is deprecated. Instead use `import { create } from 'zustand'`.

The problem is [DEPRECATED] Default export is deprecated. Instead use `import { create } from 'zustand'`.

Additional context
My Node.js version is 18.18.2.
I should note that I don't have a backend in place yet.

facing issue to host backend server

hell i am using linux vps i have configured the backend server but how to run the server

Credit issue

Hello, can I use this dashboard with my custom additions and with MySQL? However, is it possible to use it without giving credit?

Feature page stuck on "Loading"

Issue Summary:
I'm encountering an issue with my custom feature. The problem arises when I try to configure the feature, as it gets stuck on "Loading."

Code Files:

• features.tsx in config folder
• custom-types.tsx in config folder
• FruitStocksFeature.tsx in config > use-features folder
• Backend server implementation

Description:
I've created a custom feature called "Fruit Stocks" for my bot. The feature itself works well, including the enable feature button. However, when attempting to configure the feature, it gets stuck on "Loading."

features.tsx

config > features.tsx

import { Icon } from '@chakra-ui/react';
import { FaAppleAlt } from 'react-icons/fa';
import { FeaturesConfig } from './types';
import { provider } from '@/config/translations/provider';
import { createI18n } from '@/utils/i18n';
import { useFruitStocksFeature } from "./use-features/FruitStocksFeature";

/**
 * Support i18n (Localization)
 */
const { T } = createI18n(provider, {
  en: {
    fruitStocks: "Fruit Stocks",
    'fruitStocks description': 'Blox Fruit\'s stock notifier',
  },
});

/**
 * Define information for each features
 *
 * There is an example:
 */
export const features: FeaturesConfig = {
  fruitStocks: {
    name: <T text="fruitStocks" />,
    description: <T text="fruitStocks description" />,
    icon: <Icon as={FaAppleAlt} />,
    useRender: useFruitStocksFeature,
  }
};

custom-types.tsx

config > types

/***
 * Custom types that should be configured by developer
 ***/

import { z } from 'zod';
import { GuildInfo } from './types';

export type CustomGuildInfo = GuildInfo & {};

/**
 * Define feature ids and it's option types
 */
export type CustomFeatures = {
  fruitStocks: FruitStocksFeature;
};

/**
 * Define feature ids and it's option types
 */
export type FruitStocksFeature = {
  channel?: string;
};

FruitStocksFeature.tsx

config > use-features
Note: use-feature is a folder that I made to store all of my custom features.

import { SimpleGrid } from '@chakra-ui/layout';
import { TextAreaForm } from '@/components/forms/TextAreaForm';
import { UseFormRender, FruitStocksFeature } from '@/config/types';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { ColorPickerForm, SmallColorPickerForm } from '@/components/forms/ColorPicker';
import { DatePickerForm } from '@/components/forms/DatePicker';
import { FilePickerForm } from '@/components/forms/FilePicker';
import { SwitchFieldForm } from '@/components/forms/SwitchField';
import { ChannelSelectForm } from '@/components/forms/ChannelSelect';

const schema = z.object({
  channel: z.string(),
  danger: z.boolean(),
});

type Input = z.infer<typeof schema>;

export const useFruitStocksFeature: UseFormRender<FruitStocksFeature> = (data, onSubmit) => {
  const { register, reset, handleSubmit, formState, control } = useForm<Input>({
    resolver: zodResolver(schema),
    shouldUnregister: false,
    defaultValues: {
      channel: data.channel,
      danger: false,
    },
  });

  console.log("HELLO FRUIT STOCKS")

  return {
    component: (
      <SimpleGrid columns={{ base: 1, lg: 2 }} gap={3}>
        <ChannelSelectForm
          control={{
            label: 'Channel',
            description: 'Where to send the welcome message',
          }}
          controller={{ control, name: 'channel' }}
        />
        <SwitchFieldForm
          control={{ label: 'Turn on', description: 'Enable something' }}
          controller={{
            control,
            name: 'danger',
          }}
        />
      </SimpleGrid>
    ),
    onSubmit: handleSubmit(async (e) => {
      const data = await onSubmit(
        JSON.stringify({
          channel: e.channel,
        })
      );

      reset(data);
    }),
    canSave: formState.isDirty,
    reset: () => reset(control._defaultValues),
  };
};

Backend Server Implementation

Note: This code is only the "listening" to a certain route and I have the backend server working. It is using express.js and is running alongside with my actual bot.

module.exports = (client, server, utils) => {
  server.get("/guilds/:id/features/fruitStocks", async (req, res) => {    
    try {
      console.log("trying to get")
      const guild = client.guilds.cache.get(req.params.id);
      const schema = await client.mongoose.schemas.guilds.findOne({ guildId: guild.id })

      if (!schema) {
        return res.status(404).json({ error: "Guild schema not found" });
      }

      const fruitStocks = schema.modules.fruitStocks;

      console.log("Im here")
      return { channel: "1180089709196738561" }
    } catch (error) {
      console.error(error);
      return res.status(500).json({ error: `Internal server error. ${error}` })
    }
  })
  
  server.post("/guilds/:id/features/fruitStocks", async (req, res) => {
    try {
      console.log("trying to post")
      await utils.checkPermission(req.session, req.params.id);

      const guild = client.guilds.cache.get(req.params.id);
      const schema = await client.mongoose.schemas.guilds.findOne({ guildId: guild.id })

      if (!schema) {
        return res.status(404).json({ error: "Guild schema not found" });
      }

      schema.modules.fruitStocks.enabled = true
      await schema.save()
      return "Success"
    } catch (error) {
      console.error(error);
      return res.status(500).json({ error: `Internal server error. ${error}` })
    }
  })

  server.delete("/guilds/:id/features/fruitStocks", async (req, res) => {
    try {
      console.log("trying to delete")
      await utils.checkPermission(req.session, req.params.id);

      const guild = client.guilds.cache.get(req.params.id);
      const schema = await client.mongoose.schemas.guilds.findOne({ guildId: guild.id })

      if (!schema) {
        return res.status(404).json({ error: "Guild schema not found" });
      }

      schema.modules.fruitStocks.enabled = false
      await schema.save()
      return "Success"
    } catch (error) {
      console.error(error);
      return res.status(500).json({ error: `Internal server error. ${error}` })
    }
  })

  server.patch("/guilds/:id/features/fruitStocks", async (req, res) => {
    try {
      console.log("trying to patch")
      await utils.checkPermission(req.session, req.params.id);

      const guild = client.guilds.cache.get(req.params.id);
      const schema = await client.mongoose.schemas.guilds.findOne({ guildId: guild.id })

      if (!schema) {
        return res.status(404).json({ error: "Guild schema not found" });
      }
    } catch (error) {
      console.error(error);
      return res.status(500).json({ error: `Internal server error. ${error}` })
    }
  })
}

Any Help Appreciated:

I would appreciate any guidance or assistance in resolving this issue. If more code files or information are needed, please let me know.

Thank you for your help!

Return error

When i try to invite the bot in the server it return me that error

 33 |     return (await response.json()) as AccessToken;
  34 |   } else {
35 |     throw new Error('Failed to exchange token');
     |          ^
  36 |   }
  37 | }
  38 |

Small tutorial on how to make our own module/page?

Is your feature request related to a problem? Please describe.
A basic example how to make a "feature" using prisma

Describe the solution you'd like
Where to edit files, what to add
Describe alternatives you've considered
I have attempted, and basic knowledge of node/next. I get the page to display but i am struggling to add any functions. I want to read from another DB(which I've managed to add) but I am struggling to understand how to make the pages read etc...

Trying to figure out backend server

Hi there!

I followed the tutorial and have gotten stuck on the backend server part of it. The official example link doesn't go anywhere, so I figured I would ask here if there is some example server I could learn from.

Thanks!

Save is not saving

Describe the bug
I know this sounds odd.
I haven't had this issue until now.
I created on welcomer-message an embed, all working so far.
Saw backend was no longer getting the "save" call, meaning the "save" button was not sending the request, checked with both:
Network tab

@Patch('/features/welcome-message')
  async updateFeature(
    @Req() req: AuthRequest,
    @Param('guild') guild: string,
    @Body() body: Partial<WelcomeMessage>,
  ) {
    console.log('got a patch')
    await this.bot.checkPermissions(req.session, guild);

    const updated = await this.prisma.welcomeMessage.update({
      where: {
        id: guild,
      },
      data: {
        ...body,
        id: undefined,
      },
    });

    return updated;
  }

To Reproduce
Steps to reproduce the behavior:

Last things I remember I did:
Tried converting to use mysql instead of prisma
Saw the error
CTRL+Zed everything to revert.
Save button still not sending requests.

Expected behavior
Saving the data

Screenshots
Video recording:
https://streamable.com/ix5rl1

Device:

• OS: Windows 10
• Chrome
• Version: 119.0.6045.160 (Official Build) (64-bit)

Additional context
The video says it all.

Forms' States (isRequired, isDisabled, ...)

Hello. I don't quite understand where or how I can add states in the component forms that I will be using, for example isRequired, etc.

SwitchFieldForm

<SwitchFieldForm
  control={{ 
    label: 'Pinging', 
    description: 'Toggle the role pinging when a new fruit stock has arrived'
  }}
  controller={{
    control,
    name: 'ping_toggle',
  }}
/>

Again, using the provided code above, how or where should I add the states that I want to use in the form? Thank you!

{"client_id": ["Value \"\" is not snowflake."]}

Describe the bug
it keeps giving me this error when i sign in : {"client_id": ["Value "" is not snowflake."]}

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Device:

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Unsure how to start this

I've been working on this for 2-3 hours at least and i can not get it working for the life of me, If there is any tutorial or anything i can follow that will be very nice

Guilds dont load

Some reason, the dashboard does not load Guilds.

Why is there no way to save the "guild settings"?

Title pretty much says it all, however, there is no current way to save guild settings, was this intentional?

Multi Channel Select

It would be nice to have a MultiSelectChannel Form like the SelectChannel Form but make it possible to select multiple Channels

Error while Authenticating

Describe the bug
A clear and concise description of what the bug is.
i setup backend exactly as the example one
but when i try to authenticate it shows me this Error

Screenshots

and here is console output

backend output :

Device:

• OS: Windows 10 pro
• Browser Edge
• Version latest

Refusing to connect

Whenever I try and connect to the website, it just says it couldn't connect and such, even though it successfully starts — there are no errors in console and everything seems to be setup correctly. One minor detail tho, this is running inside a Pterodactyl node.js egg. Though, other websites have worked perfectly on it and such, so I know it's possible, as well as the ports work fine with other applications so it likely isn't a firewall issue. I've been going at it for a couple hours and can't figure it out, so please help lol

ws cant connect

Hi, trying to run this on a cpanel server, and trying to proxy the connections to node. The webpage loads fine, however i get alot of errors saying

websocket.js:60 WebSocket connection to 'wss://*****/_next/webpack-hmr' failed:

any suggestions?
thanks

Language system doesnt works

I did everythink which is in Docs but it didnt worked