Implement nickname for table

src/components/BotsManagement.tsx

@@ -11,7 +11,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Checkbox } from '@/components/ui/checkbox';
 import { DRB_BASE_API_URL } from '@/constants/api';
-import { DiscordId, System, ErrorResponse } from '@/types';
+import { DiscordId, System, ErrorResponse, ActiveClient } from '@/types';
 import { authAwareFetch } from '@/utils/AuthAwareFetch';
 
 interface BotsManagementProps {
@@ -20,7 +20,7 @@ interface BotsManagementProps {
 }
 
 const BotsManagement: React.FC<BotsManagementProps> = ({ token, logoutUser }) => {
-  const [bots, setBots] = useState<string[]>([]);
+  const [bots, setBots] = useState<ActiveClient[]>([]);
   const [discordIds, setDiscordIds] = useState<DiscordId[]>([]);
   const [systems, setSystems] = useState<System[]>([]);
   const [loading, setLoading] = useState<boolean>(true); // Set to true initially
@@ -61,7 +61,7 @@ const BotsManagement: React.FC<BotsManagementProps> = ({ token, logoutUser }) =>
       ]);
 
       if (nodesRes.ok) {
-        const botsData: any = await nodesRes.json();
+        const botsData: ActiveClient[] = await nodesRes.json();
         setBots(botsData);
       } else {
         let errorMsg = `Failed to fetch bots (${nodesRes.status})`;
@@ -270,12 +270,12 @@ const BotsManagement: React.FC<BotsManagementProps> = ({ token, logoutUser }) =>
             </TableHeader>
             <TableBody>
               {bots.length > 0 ? (
-                bots.map((botClientId) => {
+                bots.map((active_bot) => {
                   return (
-                    <TableRow key={botClientId}>
+                    <TableRow key={active_bot.client_id}>
                       <TableCell className="font-medium">
-                        <Link href={`/nodes/${botClientId}`} className="text-blue-600 hover:underline">
-                          {botClientId}
+                        <Link href={`/nodes/${active_bot.client_id}`} className="text-blue-600 hover:underline">
+                          {active_bot.nickname} ({active_bot.client_id})
                         </Link>
                         </TableCell>
                     </TableRow>
@@ -420,8 +420,8 @@ const BotsManagement: React.FC<BotsManagementProps> = ({ token, logoutUser }) =>
                   <SelectValue placeholder="Select a bot client ID" />
                 </SelectTrigger>
                 <SelectContent>
-                  {bots.map((botId) => (
-                    <SelectItem key={botId} value={botId}>{botId}</SelectItem>
+                  {bots.map((active_bot) => (
+                    <SelectItem key={active_bot.client_id} value={active_bot.client_id}>{active_bot.client_id}</SelectItem>
                   ))}
                 </SelectContent>
               </Select>

src/types/index.ts

@@ -53,6 +53,12 @@ export enum DemodTypes {
       discord_status: string;
     }
   }
+
+  export interface ActiveClient {
+    active_token: string;
+    nickname: string;
+    client_id: string;
+  }
   
   // Auth Context Types
   export interface AuthContextType {