feat: Add MiningAreasPanel component for managing mining areas with create, update, and delete functionalities

client/src/App.jsx

@@ -6,13 +6,14 @@ import StatsPanel from './components/StatsPanel';
 import GroupsPanel from './components/GroupsPanel';
 import TaskPanel from './components/TaskPanel';
 import PathRecorder from './components/PathRecorder';
+import MiningAreasPanel from './components/MiningAreasPanel';
 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', 'paths'
+  const [panelTab, setPanelTab] = useState('control'); // 'control', 'voice', 'stats', 'groups', 'tasks', 'paths', 'areas'
   const turtles = useTurtleStore((state) => state.getTurtleArray());
   const selectedTurtle = useTurtleStore((state) => state.getSelectedTurtle());
 
@@ -37,6 +38,8 @@ function App() {
         return <TaskPanel turtles={turtles} apiUrl={apiUrl} />;
       case 'paths':
         return <PathRecorder turtles={turtles} selectedTurtle={selectedTurtle} apiUrl={apiUrl} />;
+      case 'areas':
+        return <MiningAreasPanel turtles={turtles} selectedTurtle={selectedTurtle} apiUrl={apiUrl} />;
       default:
         return <ControlPanel />;
     }
@@ -116,6 +119,13 @@ function App() {
               >
                 🛤️ Paths
               </button>
+              <button 
+                className={panelTab === 'areas' ? 'active' : ''}
+                onClick={() => setPanelTab('areas')}
+                title="Mining Areas"
+              >
+                ⛏️ Areas
+              </button>
             </div>
             <div className="panel-content-wrapper">
               {renderPanelContent()}