Refactored and fixed api endpoints

service/docker-compose.yml

@@ -1,6 +1,6 @@
 version: '3.8'
 
-x-env_file_personifi: &env
+x-env_file: &env
   - .env
 
 name: siren

service/src/bot/api/routes.rs

@@ -4,7 +4,7 @@ use actix_web::{get, post, web, HttpResponse, ResponseError};
 use log::warn;
 use serde::{Serialize, Deserialize};
 use serenity::model::prelude::{GuildChannel, ChannelType};
-use siren::ServiceError;
+use siren::{ServiceError, Response};
 
 use crate::{AppState, bot::commands::audio::{play::play_track, join}, storage::guilds::QueryGuild, auth::{JwtAuth, verify_role}};
 
@@ -22,7 +22,10 @@ async fn get_guilds(data: web::Data<Arc<AppState>>, auth: JwtAuth) -> HttpRespon
       message: err.to_string()
     })
   };
-  HttpResponse::Ok().json(guilds)
+  HttpResponse::Ok().json(Response {
+    data: guilds,
+    metadata: None
+  })
 }
 
 #[get("/{id}/text")]
@@ -39,7 +42,10 @@ async fn get_text_channels(id: web::Path<String>, data: web::Data<Arc<AppState>>
       message: err.to_string()
     })
   };
-  HttpResponse::Ok().json(channels)
+  HttpResponse::Ok().json(Response {
+    data: channels,
+    metadata: None
+  })
 }
 
 #[get("/{id}/voice")]
@@ -56,7 +62,10 @@ async fn get_voice_channels(id: web::Path<String>, data: web::Data<Arc<AppState>
       message: err.to_string()
     })
   };
-  HttpResponse::Ok().json(channels)
+  HttpResponse::Ok().json(Response {
+    data: channels,
+    metadata: None
+  })
 }
 
 #[derive(Serialize, Deserialize)]
@@ -74,7 +83,6 @@ async fn send_message(path: web::Path<(String, String)>, text: web::Json<Channel
   let guild_id = match guild_id.parse::<u64>() {
     Ok(id) => id,
     Err(err) => {
-      warn!("Could not parse guild id: {:?}", err);
       return ResponseError::error_response(&ServiceError {
         status: 422,
         message: err.to_string()
@@ -84,7 +92,6 @@ async fn send_message(path: web::Path<(String, String)>, text: web::Json<Channel
   let channel_id = match channel_id.parse::<u64>() {
     Ok(id) => id,
     Err(err) => {
-      warn!("Could not parse channel id: {:?}", err);
       return ResponseError::error_response(&ServiceError {
         status: 422,
         message: err.to_string()
@@ -95,7 +102,6 @@ async fn send_message(path: web::Path<(String, String)>, text: web::Json<Channel
   let channels = match channel_results {
     Ok(channels) => channels,
     Err(err) => {
-      warn!("Could not get channels: {:?}", err);
       return ResponseError::error_response(&ServiceError {
         status: 422,
         message: err.to_string()
@@ -106,7 +112,6 @@ async fn send_message(path: web::Path<(String, String)>, text: web::Json<Channel
   let channel = match channels.iter().find(|c| c.id.0 == channel_id) {
     Some(channel) => channel,
     None => {
-      warn!("Could not find channel with id {}", channel_id);
       return ResponseError::error_response(&ServiceError {
         status: 422,
         message: format!("Could not find channel with id {}", channel_id)
@@ -115,7 +120,6 @@ async fn send_message(path: web::Path<(String, String)>, text: web::Json<Channel
   };
 
   if let Err(err) = channel.say(&Pin::new(&data.http).get_ref(), &text.message).await {
-    warn!("Could not send message: {:?}", err);
     return ResponseError::error_response(&ServiceError {
       status: 422,
       message: err.to_string()
@@ -140,14 +144,12 @@ async fn play(path: web::Path<(String, String)>, play_request: web::Json<PlayReq
   let guild_id = match guild_id.parse::<u64>() {
     Ok(id) => id,
     Err(err) => {
-      warn!("Could not parse guild id: {:?}", err);
       return ResponseError::error_response(&ServiceError { status: 422, message: err.to_string() })
     }
   };
   let channel_id = match channel_id.parse::<u64>() {
     Ok(id) => id,
     Err(err) => {
-      warn!("Could not parse channel id: {:?}", err);
       return ResponseError::error_response(&ServiceError { status: 422, message: err.to_string() })
     }
   };
@@ -155,14 +157,12 @@ async fn play(path: web::Path<(String, String)>, play_request: web::Json<PlayReq
   let guild = match http.get_guild(guild_id).await {
     Ok(guild) => guild,
     Err(err) => {
-      warn!("Could not get guild: {:?}", err);
       return ResponseError::error_response(&ServiceError { status: 422, message: err.to_string() })
     }
   };
   let channel = match http.get_channel(channel_id).await {
     Ok(channel) => channel,
     Err(err) => {
-      warn!("Could not get channel: {:?}", err);
       return ResponseError::error_response(&ServiceError { status: 422, message: err.to_string() })
     }
   };
@@ -174,13 +174,11 @@ async fn play(path: web::Path<(String, String)>, play_request: web::Json<PlayReq
       match play_track(Arc::clone(&data.songbird), guild.id, play_request.track_url.to_string()).await {
         Ok(_) => HttpResponse::Ok().finish(),
         Err(err) => {
-          warn!("Could not play track: {:?}", err);
           return ResponseError::error_response(&err)
         }
       }
     },
     Err(err) => {
-      warn!("Could not join channel: {:?}", err);
       return ResponseError::error_response(&ServiceError { status: 500, message: err.to_string() })
     }
   }
@@ -196,7 +194,6 @@ async fn stop(path: web::Path<String>, data: web::Data<Arc<AppState>>, auth: Jwt
   let guild_id = match guild_id.parse::<u64>() {
     Ok(id) => id,
     Err(err) => {
-      warn!("Could not parse guild id: {:?}", err);
       return ResponseError::error_response(&ServiceError {
         status: 422,
         message: err.to_string()
@@ -222,7 +219,6 @@ async fn resume(path: web::Path<String>, data: web::Data<Arc<AppState>>, auth: J
   let guild_id = match guild_id.parse::<u64>() {
     Ok(id) => id,
     Err(err) => {
-      warn!("Could not parse guild id: {:?}", err);
       return ResponseError::error_response(&ServiceError {
         status: 422,
         message: err.to_string()
@@ -233,7 +229,6 @@ async fn resume(path: web::Path<String>, data: web::Data<Arc<AppState>>, auth: J
   if let Some(handler_lock) = data.songbird.get(guild_id) {
     let handler = handler_lock.lock().await;
     if let Err(err) = handler.queue().resume() {
-      warn!("Could not resume track: {:?}", err);
       return ResponseError::error_response(&ServiceError {
         status: 422,
         message: err.to_string()
@@ -254,7 +249,6 @@ async fn pause(path: web::Path<String>, data: web::Data<Arc<AppState>>, auth: Jw
   let guild_id = match guild_id.parse::<u64>() {
     Ok(id) => id,
     Err(err) => {
-      warn!("Could not parse guild id: {:?}", err);
       return ResponseError::error_response(&ServiceError {
         status: 422,
         message: err.to_string()
@@ -265,7 +259,6 @@ async fn pause(path: web::Path<String>, data: web::Data<Arc<AppState>>, auth: Jw
   if let Some(handler_lock) = data.songbird.get(guild_id) {
     let handler = handler_lock.lock().await;
     if let Err(err) = handler.queue().pause() {
-      warn!("Could not pause track: {:?}", err);
       return ResponseError::error_response(&ServiceError {
         status: 422,
         message: err.to_string()
@@ -291,7 +284,6 @@ async fn get_volume(path: web::Path<String>, auth: JwtAuth) -> HttpResponse {
   let guild_id = match guild_id.parse::<u64>() {
     Ok(id) => id,
     Err(err) => {
-      warn!("Could not parse guild id: {:?}", err);
       return ResponseError::error_response(&ServiceError {
         status: 422,
         message: err.to_string()
@@ -302,7 +294,6 @@ async fn get_volume(path: web::Path<String>, auth: JwtAuth) -> HttpResponse {
   let volume = match QueryGuild::get(guild_id as i64) {
     Ok(guild) => guild.volume,
     Err(err) => {
-      warn!("Could not get volume: {:?}", err);
       return ResponseError::error_response(&ServiceError {
         status: 422,
         message: err.to_string()
@@ -323,7 +314,6 @@ async fn set_volume(path: web::Path<String>, volume: web::Json::<SetVolume>, dat
   let guild_id = match guild_id.parse::<u64>() {
     Ok(id) => id,
     Err(err) => {
-      warn!("Could not parse guild id: {:?}", err);
       return ResponseError::error_response(&ServiceError {
         status: 422,
         message: err.to_string()
@@ -337,7 +327,6 @@ async fn set_volume(path: web::Path<String>, volume: web::Json::<SetVolume>, dat
   let guild = match http.get_guild(guild_id).await {
     Ok(guild) => guild,
     Err(err) => {
-      warn!("Could not get guild: {:?}", err);
       return ResponseError::error_response(&ServiceError { status: 422, message: err.to_string() })
     }
   };
@@ -356,7 +345,6 @@ async fn skip(path: web::Path<String>, data: web::Data<Arc<AppState>>, auth: Jwt
   let guild_id = match guild_id.parse::<u64>() {
     Ok(id) => id,
     Err(err) => {
-      warn!("Could not parse guild id: {:?}", err);
       return ResponseError::error_response(&ServiceError {
         status: 422,
         message: err.to_string()
@@ -367,7 +355,6 @@ async fn skip(path: web::Path<String>, data: web::Data<Arc<AppState>>, auth: Jwt
   if let Some(handler_lock) = data.songbird.get(guild_id) {
     let handler = handler_lock.lock().await;
     if let Err(err) = handler.queue().skip() {
-      warn!("Could not skip track: {:?}", err);
       return ResponseError::error_response(&ServiceError {
         status: 422,
         message: err.to_string()

service/src/bot/commands/oai.rs

@@ -6,7 +6,7 @@ use serenity::model::Permissions;
 use serenity::model::channel::Message;
 use serenity::model::prelude::{ChannelType, PermissionOverwrite, PermissionOverwriteType};
 use serenity::prelude::*;
-use siren::{GetResponse, ServiceError};
+use siren::{Response, ServiceError};
 
 pub struct OAI {
   pub client: reqwest::Client,
@@ -160,7 +160,7 @@ impl OAI {
     Ok(response)
   }
 
-  async fn get_messages(&self, guild_id: u64, channel_id: u64, author_id: u64) -> Result<GetResponse<Vec<siren::Message>>, ServiceError> {
+  async fn get_messages(&self, guild_id: u64, channel_id: u64, author_id: u64) -> Result<Response<Vec<siren::Message>>, ServiceError> {
     let uri = format!("{}/messages?guild_id={}&channel_id={}&author_id={}&limit={}", self.service_url, guild_id, channel_id, author_id, self.max_context_questions);
     let value = self.client
       .get(&uri)
@@ -169,7 +169,7 @@ impl OAI {
       .json::<Value>()
       .await?;
 
-    let response = serde_json::from_value::<GetResponse<Vec<siren::Message>>>(value)?;
+    let response = serde_json::from_value::<Response<Vec<siren::Message>>>(value)?;
 
     Ok(response)
   }

service/src/dnd/spells/routes.rs

@@ -1,7 +1,7 @@
 use actix_web::{get, post, put, delete, web, HttpResponse, HttpRequest, ResponseError};
 use log::error;
 use serde::{Serialize, Deserialize};
-use siren::{GetResponse, Metadata, ServiceError};
+use siren::{Response, Metadata, ServiceError};
 
 use crate::{dnd::spells::{QuerySpell, QueryFilters}, auth::{JwtAuth, verify_role}};
 
@@ -90,7 +90,7 @@ async fn get_all(req: HttpRequest) -> HttpResponse {
         spell.id = Some(id);
         response.push(spell);
       }
-      HttpResponse::Ok().json(GetResponse {
+      HttpResponse::Ok().json(Response {
         data: response,
         metadata: Some(Metadata {
           total: total_count as i32,
@@ -121,7 +121,7 @@ async fn get_by_id(id: web::Path<String>) -> HttpResponse {
       let id = query_spell.id;
       let mut spell = Spell::from(query_spell);
       spell.id = Some(id);
-      HttpResponse::Ok().json(GetResponse {
+      HttpResponse::Ok().json(Response {
         data: spell,
         metadata: None
       })

service/src/lib.rs

@@ -19,7 +19,7 @@ pub struct Message {
 }
 
 #[derive(Serialize, Deserialize)]
-pub struct GetResponse<T> {
+pub struct Response<T> {
   pub data: T,
   #[serde(skip_serializing_if = "Option::is_none")]
   pub metadata: Option<Metadata>

service/src/storage/messages/routes.rs

@@ -1,7 +1,7 @@
 use actix_web::{get, post, web, HttpResponse, HttpRequest, ResponseError};
 use log::error;
 use serde::{Serialize, Deserialize};
-use siren::{GetResponse, Metadata, ServiceError};
+use siren::{Response, Metadata, ServiceError};
 
 use crate::{storage::messages::{QueryMessage, QueryFilters, InsertMessage}, auth::{JwtAuth, verify_role}};
 
@@ -50,7 +50,7 @@ async fn get_all(req: HttpRequest, auth: JwtAuth) -> HttpResponse {
   
   match QueryMessage::get_all(&filters, limit, page) {
     Ok(messages) => {
-      HttpResponse::Ok().json(GetResponse {
+      HttpResponse::Ok().json(Response {
         data: messages,
         metadata: Some(Metadata {
           total: total_count as i32,

ui/src/api/guilds.ts

@@ -1,14 +1,16 @@
-import { get, post } from '.';
+import { APIResponse, get, post } from '.';
 import { GuildChannel, GuildInfo } from './guilds.types';
 
 export async function getGuilds(): Promise<GuildInfo[]> {
   const response = await get('guilds');
-  return response?.json() || { data: [] };
+  const guilds: APIResponse<GuildInfo[]> = await response?.json();
+  return guilds.data || [];
 }
 
 export async function getTextChannels(guildId: number): Promise<GuildChannel[]> {
   const response = await get(`guilds/${guildId}/text`);
-  return response?.json() || { data: [] };
+  const channels: APIResponse<GuildChannel[]> = await response?.json();
+  return channels.data || [];
 }
 
 export async function sendMessage(guildId: number, channelId: number, message: string): Promise<void> {
@@ -17,7 +19,8 @@ export async function sendMessage(guildId: number, channelId: number, message: s
 
 export async function getVoiceChannels(guildId: number): Promise<GuildChannel[]> {
   const response = await get(`guilds/${guildId}/voice`);
-  return response?.json() || { data: [] };
+  const channels: APIResponse<GuildChannel[]> = await response?.json();
+  return channels.data || [];
 }
 
 export async function playTrack(guildId: number, channelId: number, track: string): Promise<void> {

ui/src/api/index.ts

@@ -41,6 +41,11 @@ export async function post(endpoint: string, body: any, options?: PostOptions):
   return response;
 }
 
+export interface APIResponse<T> {
+  data: T;
+  metadata: Metadata;
+}
+
 export interface Metadata {
   limit: number;
   page: number;

ui/src/app/admin/page.tsx

@@ -0,0 +1,201 @@
+'use client';
+
+import {
+  getGuilds,
+  getTextChannels,
+  getVoiceChannels,
+  getVolume,
+  pauseTrack,
+  playTrack,
+  resumeTrack,
+  sendMessage,
+  setVolume,
+  skipTrack,
+  stopTrack
+} from '@/api/guilds';
+import { GuildChannel, GuildInfo } from '@/api/guilds.types';
+import { Button, Card, Grid, Select, Slider, Tabs, TextInput, Textarea } from '@mantine/core';
+import { useForm } from '@mantine/form';
+import React, { useEffect, useState } from 'react';
+
+export default function Page() {
+  const [guilds, setGuilds] = useState<GuildInfo[]>([]);
+  const [activeGuild, setActiveGuild] = useState<GuildInfo | null>(null);
+  const [voiceChannels, setVoiceChannels] = useState<GuildChannel[]>([]);
+  const [guildVolume, setGuildVolume] = useState<number>(50.0);
+
+  useEffect(() => {
+    getGuilds().then((g) => {
+      setGuilds(g);
+      if (g.length > 0) {
+        setActiveGuild(g[0]);
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    if (activeGuild) {
+      getVoiceChannels(activeGuild.id).then((c) => setVoiceChannels(c));
+      getVolume(activeGuild.id).then((v) => setGuildVolume(v));
+    }
+  }, [activeGuild]);
+
+  return (
+    <Tabs orientation='vertical' defaultValue={activeGuild?.name}>
+      <Tabs.List>
+        {guilds && guilds.map((guild) => (
+          <Tabs.Tab key={`guild-tab-${guild.id}`} value={guild.name} onClick={() => setActiveGuild(guild)}>
+            {guild.name}
+          </Tabs.Tab>
+        ))}
+      </Tabs.List>
+      {guilds && guilds.map((guild) => (
+        <Tabs.Panel key={`guild-${guild.id}`} value={guild.name}>
+          <h1>{guild.name}</h1>
+          <Grid>
+            <Grid.Col span={6}>
+              <TextChannelCard guild={activeGuild} />
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <VoiceChannelsCard guild={activeGuild} />
+            </Grid.Col>
+          </Grid>
+        </Tabs.Panel>
+      ))}
+    </Tabs>
+  );
+}
+
+function TextChannelCard({ guild }: { guild: GuildInfo | null }) {
+  const [textChannels, setTextChannels] = useState<GuildChannel[]>([]);
+  const [activeChannel, setActiveChannel] = useState<GuildChannel | null>(null);
+
+  const form = useForm({
+    initialValues: {
+      message: ''
+    }
+  });
+
+  useEffect(() => {
+    if (guild) {
+      getTextChannels(guild.id).then((c) => setTextChannels(c));
+    }
+  }, [guild]);
+
+  return (
+    <Card shadow='sm' style={{ margin: '1em' }}>
+      <Card.Section>
+        <h2>Text Channels</h2>
+        <Select
+          placeholder='Select channel...'
+          data={textChannels.map((channel, index) => {
+            return {
+              value: `${index}`,
+              label: channel.name
+            };
+          })}
+          onChange={(e) => {
+            if (e) {
+              setActiveChannel(textChannels[parseInt(e)]);
+            }
+          }}
+        />
+        {activeChannel && (
+          <form
+            style={{ margin: '1em' }}
+            onSubmit={form.onSubmit((values) => {
+              sendMessage(guild!.id, activeChannel.id, values.message);
+            })}
+          >
+            <Textarea placeholder='Message...' {...form.getInputProps('message')} />
+            <Button type='submit'>Send Message</Button>
+          </form>
+        )}
+      </Card.Section>
+    </Card>
+  );
+}
+
+function VoiceChannelsCard({ guild }: { guild: GuildInfo | null }) {
+  const [voiceChannels, setVoiceChannels] = useState<GuildChannel[]>([]);
+  const [guildVolume, setGuildVolume] = useState<number>(50.0);
+  const [activeChannel, setActiveChannel] = useState<GuildChannel | null>(null);
+
+  useEffect(() => {
+    if (guild) {
+      getVoiceChannels(guild.id).then((c) => setVoiceChannels(c));
+      getVolume(guild.id).then((v) => setGuildVolume(v));
+    }
+  }, [guild]);
+
+  const form = useForm({
+    initialValues: {
+      trackUrl: '',
+      volume: 50.0
+    }
+  });
+
+  return (
+    <Card shadow='sm' style={{ margin: '1em' }}>
+      <Card.Section>
+        <h2>Voice Channels</h2>
+        <Select
+          placeholder='Select channel...'
+          data={voiceChannels.map((channel, index) => {
+            return {
+              value: `${index}`,
+              label: channel.name
+            };
+          })}
+          onChange={(e) => {
+            if (e) {
+              setActiveChannel(voiceChannels[parseInt(e)]);
+            }
+          }}
+        />
+        {activeChannel && (
+          <>
+            <form
+              style={{ margin: '1em' }}
+              onSubmit={form.onSubmit((values) => setVolume(guild!.id, values.volume))}
+            >
+              <Slider
+                defaultValue={guildVolume}
+                {...form.getInputProps('volume')}
+                marks={[
+                  { value: 25, label: '25%' },
+                  { value: 50, label: '50%' },
+                  { value: 75, label: '75%' }
+                ]}
+              />
+              <Button type='submit'>Set Volume</Button>
+            </form>
+            <form
+            style={{ margin: '1em' }}
+            onSubmit={(e) => {
+              e.preventDefault();
+            }}
+          >
+            <TextInput placeholder='Youtube URL...' />
+            <Button type='submit'>Play Track</Button>
+          </form>
+          <div style={{ margin: '1em' }}>
+                  <Button style={{ marginRight: '1em' }} onClick={() => skipTrack(guild!.id)}>
+                    Skip Track
+                  </Button>
+                  <Button style={{ marginRight: '1em' }} onClick={() => stopTrack(guild!.id)}>
+                    Stop
+                  </Button>
+                  <Button style={{ marginRight: '1em' }} onClick={() => pauseTrack(guild!.id)}>
+                    Pause
+                  </Button>
+                  <Button style={{ marginRight: '1em' }} onClick={() => resumeTrack(guild!.id)}>
+                    Resume
+                  </Button>
+                </div>
+          </>
+        )}
+      </Card.Section>
+    </Card>
+  );
+}

ui/src/app/management/page.tsx

@@ -1,140 +0,0 @@
-'use client';
-
-import {
-  getGuilds,
-  getTextChannels,
-  getVoiceChannels,
-  getVolume,
-  pauseTrack,
-  playTrack,
-  resumeTrack,
-  sendMessage,
-  setVolume,
-  skipTrack,
-  stopTrack
-} from '@/api/guilds';
-import { GuildChannel, GuildInfo } from '@/api/guilds.types';
-import { Button, Slider, Tabs, TextInput, Textarea } from '@mantine/core';
-import { useForm } from '@mantine/form';
-import React, { useEffect, useState } from 'react';
-
-export default function Page() {
-  const [guilds, setGuilds] = useState<GuildInfo[]>([]);
-  const [activeGuild, setActiveGuild] = useState<GuildInfo | null>(null);
-  const [textChannels, setTextChannels] = useState<GuildChannel[]>([]);
-  const [voiceChannels, setVoiceChannels] = useState<GuildChannel[]>([]);
-  const [guildVolume, setGuildVolume] = useState<number>(50.0);
-
-  useEffect(() => {
-    getGuilds().then((g) => {
-      setGuilds(g);
-      if (g.length > 0) {
-        setActiveGuild(g[0]);
-      }
-    });
-  }, []);
-
-  useEffect(() => {
-    if (activeGuild) {
-      getTextChannels(activeGuild.id).then((c) => setTextChannels(c));
-      getVoiceChannels(activeGuild.id).then((c) => setVoiceChannels(c));
-      getVolume(activeGuild.id).then((v) => setGuildVolume(v));
-    }
-  }, [activeGuild]);
-
-  const playForm = useForm({
-    initialValues: {
-      message: '',
-      trackUrl: '',
-      volume: 50.0
-    }
-  });
-
-  return (
-    <Tabs orientation='vertical' defaultValue={activeGuild?.name}>
-      <Tabs.List>
-        {guilds.map((guild) => (
-          <Tabs.Tab key={`guild-tab-${guild.id}`} value={guild.name} onClick={() => setActiveGuild(guild)}>
-            {guild.name}
-          </Tabs.Tab>
-        ))}
-      </Tabs.List>
-      {guilds.map((guild) => (
-        <Tabs.Panel key={`guild-${guild.id}`} value={guild.name}>
-          <h1>{guild.name}</h1>
-          <h2>Text Channels</h2>
-          <Tabs orientation='horizontal' defaultValue={textChannels[0]?.name}>
-            <Tabs.List>
-              {textChannels.map((channel) => (
-                <Tabs.Tab key={`text-channel-tab-${channel.id}`} value={channel.name}>
-                  {channel.name}
-                </Tabs.Tab>
-              ))}
-            </Tabs.List>
-            {textChannels.map((channel) => (
-              <Tabs.Panel key={`text-channel-${channel.id}`} value={channel.name}>
-                <form
-                  style={{ margin: '1em' }}
-                  onSubmit={playForm.onSubmit((values) => sendMessage(activeGuild!.id, channel.id, values.message))}
-                >
-                  <Textarea placeholder='Message...' {...playForm.getInputProps('message')} />
-                  <Button type='submit'>Send Message</Button>
-                </form>
-              </Tabs.Panel>
-            ))}
-          </Tabs>
-          <h2>Voice Channels</h2>
-          <Tabs orientation='horizontal' defaultValue={voiceChannels[0]?.name}>
-            <Tabs.List>
-              {voiceChannels.map((channel) => (
-                <Tabs.Tab key={`voice-channel-tab-${channel.id}`} value={channel.name}>
-                  {channel.name}
-                </Tabs.Tab>
-              ))}
-            </Tabs.List>
-            {voiceChannels.map((channel) => (
-              <Tabs.Panel key={`voice-channel-${channel.id}`} value={channel.name}>
-                <form
-                  style={{ margin: '1em' }}
-                  onSubmit={playForm.onSubmit((values) => {
-                    playTrack(activeGuild!.id, channel.id, values.trackUrl);
-                  })}
-                >
-                  <TextInput placeholder='Youtube URL...' {...playForm.getInputProps('trackUrl')} />
-                  <Button type='submit'>Play Track</Button>
-                  <Button onClick={() => skipTrack(activeGuild!.id)}>Skip Track</Button>
-                </form>
-                <div style={{ margin: '1em' }}>
-                  <Button style={{ marginRight: '1em' }} onClick={() => stopTrack(activeGuild!.id)}>
-                    Stop
-                  </Button>
-                  <Button style={{ marginRight: '1em' }} onClick={() => pauseTrack(activeGuild!.id)}>
-                    Pause
-                  </Button>
-                  <Button style={{ marginRight: '1em' }} onClick={() => resumeTrack(activeGuild!.id)}>
-                    Resume
-                  </Button>
-                </div>
-                <form
-                  style={{ margin: '1em' }}
-                  onSubmit={playForm.onSubmit((values) => setVolume(activeGuild!.id, values.volume))}
-                >
-                  <Slider
-                    defaultValue={guildVolume}
-                    {...playForm.getInputProps('volume')}
-                    marks={[
-                      { value: 25, label: '25%' },
-                      { value: 50, label: '50%' },
-                      { value: 75, label: '75%' }
-                    ]}
-                  />
-                  <Button type='submit'>Set Volume</Button>
-                </form>
-              </Tabs.Panel>
-            ))}
-          </Tabs>
-        </Tabs.Panel>
-      ))}
-    </Tabs>
-  );
-}

ui/src/components/Header/index.tsx

@@ -170,9 +170,9 @@ export default function Header() {
                     </Grid.Col>
                     {user.role == 'admin' && (
                       <Grid.Col span={12}>
-                        <Link href='/management'>
+                        <Link href='/admin'>
                           <Button fullWidth radius='md' size='xs' variant='default'>
-                            Management
+                            Administration
                           </Button>
                         </Link>
                       </Grid.Col>