Update staff console features

Removed unnecessary elements and blocks. Enhanced the staff console with a white background and added functionalities to ban players, display current players (excluding bots), and show account names and passwords of signed-up users.
[skip gpt_engineer]

src/components/Sidebar.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { RocketIcon, BoxIcon, AnchorIcon, CastleIcon, CupSodaIcon, CircleDotIcon, HeadphonesIcon, MessageSquareIcon } from 'lucide-react';
+import { RocketIcon, BoxIcon, AnchorIcon, CastleIcon, CupSodaIcon, CircleDotIcon } from 'lucide-react';
 import { isStaff } from './ProtectedRoute';
 
 const Sidebar = () => {
@@ -25,12 +25,6 @@ const Sidebar = () => {
         <CircleDotIcon size={24} />
       </Link>
       <div className="flex-grow"></div>
-      <Link to="/music" className="text-white hover:text-blue-400">
-        <HeadphonesIcon size={24} />
-      </Link>
-      <Link to="/chat" className="text-white hover:text-blue-400">
-        <MessageSquareIcon size={24} />
-      </Link>
       {isStaff() && (
         <Link to="/staff-console" className="text-white hover:text-blue-400">
           <span className="text-xs">Staff</span>

src/components/StaffConsole.jsx

@@ -1,10 +1,21 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 const StaffConsole = () => {
   const [username, setUsername] = useState('');
   const [amount, setAmount] = useState('');
+  const [banUsername, setBanUsername] = useState('');
+  const [currentPlayers, setCurrentPlayers] = useState([]);
+  const [registeredUsers, setRegisteredUsers] = useState([]);
+
+  useEffect(() => {
+    // Fetch current players and registered users
+    const users = JSON.parse(localStorage.getItem('users')) || [];
+    setCurrentPlayers(users.filter(user => user.isOnline));
+    setRegisteredUsers(users);
+  }, []);
 
   const handleUpdateBalance = () => {
     const users = JSON.parse(localStorage.getItem('users')) || [];
@@ -18,26 +29,77 @@ const StaffConsole = () => {
     alert(`Updated balance for ${username} to $${amount}`);
   };
 
+  const handleBanPlayer = () => {
+    const users = JSON.parse(localStorage.getItem('users')) || [];
+    const updatedUsers = users.map(user => {
+      if (user.username === banUsername) {
+        user.isBanned = true;
+      }
+      return user;
+    });
+    localStorage.setItem('users', JSON.stringify(updatedUsers));
+    alert(`Banned player: ${banUsername}`);
+    setBanUsername('');
+  };
+
   return (
-    <div className="bg-darkBlue-lighter rounded-lg p-4 mt-4">
+    <div className="bg-white rounded-lg p-4 mt-4 text-black">
       <h2 className="text-xl font-bold mb-4">Staff Console</h2>
-      <Input
-        type="text"
-        placeholder="Username"
-        value={username}
-        onChange={(e) => setUsername(e.target.value)}
-        className="mb-2"
-      />
-      <Input
-        type="number"
-        placeholder="New Balance"
-        value={amount}
-        onChange={(e) => setAmount(e.target.value)}
-        className="mb-2"
-      />
-      <Button onClick={handleUpdateBalance}>Update Balance</Button>
+      <Tabs defaultValue="balance">
+        <TabsList>
+          <TabsTrigger value="balance">Update Balance</TabsTrigger>
+          <TabsTrigger value="ban">Ban Player</TabsTrigger>
+          <TabsTrigger value="players">Current Players</TabsTrigger>
+          <TabsTrigger value="accounts">Registered Accounts</TabsTrigger>
+        </TabsList>
+        <TabsContent value="balance">
+          <Input
+            type="text"
+            placeholder="Username"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            className="mb-2"
+          />
+          <Input
+            type="number"
+            placeholder="New Balance"
+            value={amount}
+            onChange={(e) => setAmount(e.target.value)}
+            className="mb-2"
+          />
+          <Button onClick={handleUpdateBalance}>Update Balance</Button>
+        </TabsContent>
+        <TabsContent value="ban">
+          <Input
+            type="text"
+            placeholder="Username to ban"
+            value={banUsername}
+            onChange={(e) => setBanUsername(e.target.value)}
+            className="mb-2"
+          />
+          <Button onClick={handleBanPlayer}>Ban Player</Button>
+        </TabsContent>
+        <TabsContent value="players">
+          <h3 className="font-bold mb-2">Current Players Online</h3>
+          <ul>
+            {currentPlayers.map((player, index) => (
+              <li key={index}>{player.username}</li>
+            ))}
+          </ul>
+        </TabsContent>
+        <TabsContent value="accounts">
+          <h3 className="font-bold mb-2">Registered Accounts</h3>
+          <ul>
+            {registeredUsers.map((user, index) => (
+              <li key={index}>
+                Username: {user.username}, Password: {user.password}
+              </li>
+            ))}
+          </ul>
+        </TabsContent>
+      </Tabs>
     </div>
   );
 };
 
-export default StaffConsole;
+export default StaffConsole;