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

client/src/App.css

@@ -73,6 +73,49 @@
 .panel-container {
   background: #0f172a;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.panel-tabs {
+  display: flex;
+  gap: 0.25rem;
+  padding: 0.5rem;
+  background: #1e293b;
+  border-bottom: 2px solid #334155;
+  overflow-x: auto;
+  flex-shrink: 0;
+}
+
+.panel-tabs button {
+  padding: 0.5rem 1rem;
+  border: none;
+  background: #334155;
+  color: #94a3b8;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  white-space: nowrap;
+}
+
+.panel-tabs button:hover {
+  background: #475569;
+  color: #e5e7eb;
+}
+
+.panel-tabs button.active {
+  background: #3b82f6;
+  color: white;
+  box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
+}
+
+.panel-content-wrapper {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
 /* Scrollbar styling */

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>