feat: Enhance App component with dynamic panel tabs for control, voice, stats, groups, and tasks

client/src/App.jsx

@@ -1,17 +1,44 @@
 import React, { useEffect, useState } from 'react';
 import Map3D from './components/Map3D';
 import ControlPanel from './components/ControlPanel';
+import VoiceControl from './components/VoiceControl';
+import StatsPanel from './components/StatsPanel';
+import GroupsPanel from './components/GroupsPanel';
+import TaskPanel from './components/TaskPanel';
 import { useTurtleStore } from './store/turtleStore';
 import './App.css';
 
 function App() {
   const connect = useTurtleStore((state) => state.connect);
   const [view, setView] = useState('split'); // 'split', 'map', 'panel'
+  const [panelTab, setPanelTab] = useState('control'); // 'control', 'voice', 'stats', 'groups', 'tasks'
+  const turtles = useTurtleStore((state) => state.getTurtleArray());
+  const selectedTurtle = useTurtleStore((state) => state.getSelectedTurtle());
 
   useEffect(() => {
     connect();
   }, [connect]);
 
+  const renderPanelContent = () => {
+    const apiUrl = 'http://localhost:3001';
+    const wsUrl = 'ws://localhost:3002';
+
+    switch (panelTab) {
+      case 'control':
+        return <ControlPanel />;
+      case 'voice':
+        return <VoiceControl turtles={turtles} selectedTurtle={selectedTurtle} apiUrl={apiUrl} />;
+      case 'stats':
+        return <StatsPanel selectedTurtle={selectedTurtle} apiUrl={apiUrl} />;
+      case 'groups':
+        return <GroupsPanel turtles={turtles} apiUrl={apiUrl} wsUrl={wsUrl} />;
+      case 'tasks':
+        return <TaskPanel turtles={turtles} apiUrl={apiUrl} />;
+      default:
+        return <ControlPanel />;
+    }
+  };
+
   return (
     <div className="app">
       <div className="view-controls">
@@ -43,7 +70,46 @@ function App() {
         )}
         {(view === 'split' || view === 'panel') && (
           <div className="panel-container">
-            <ControlPanel />
+            <div className="panel-tabs">
+              <button 
+                className={panelTab === 'control' ? 'active' : ''}
+                onClick={() => setPanelTab('control')}
+                title="Turtle Control"
+              >
+                🎮 Control
+              </button>
+              <button 
+                className={panelTab === 'voice' ? 'active' : ''}
+                onClick={() => setPanelTab('voice')}
+                title="Voice Commands"
+              >
+                🎤 Voice
+              </button>
+              <button 
+                className={panelTab === 'stats' ? 'active' : ''}
+                onClick={() => setPanelTab('stats')}
+                title="Mining Statistics"
+              >
+                📊 Stats
+              </button>
+              <button 
+                className={panelTab === 'groups' ? 'active' : ''}
+                onClick={() => setPanelTab('groups')}
+                title="Turtle Groups"
+              >
+                👥 Groups
+              </button>
+              <button 
+                className={panelTab === 'tasks' ? 'active' : ''}
+                onClick={() => setPanelTab('tasks')}
+                title="Task Queue"
+              >
+                📋 Tasks
+              </button>
+            </div>
+            <div className="panel-content-wrapper">
+              {renderPanelContent()}
+            </div>
           </div>
         )}
       </div>