Add React frontend for energy trading system

Implements React + TypeScript UI with Vite and Tailwind CSS.
Features dashboard with real-time WebSocket updates, backtesting
page, model management interface, trading controls, and settings.
Includes state management with Zustand, API integration with
Axios/TanStack Query, and interactive charts with Recharts.

frontend/src/store/tradingSlice.ts

@@ -0,0 +1,39 @@
+import type { StateCreator } from 'zustand';
+import type { StrategyStatus } from '@/services/types';
+
+interface TradingState {
+  strategies: Record<string, StrategyStatus>;
+  positions: any[];
+  pnl: number;
+  trades: any[];
+  updateStrategy: (strategy: StrategyStatus) => void;
+  updatePositions: (positions: any[]) => void;
+  updatePnl: (pnl: number) => void;
+  addTrade: (trade: any) => void;
+  setStrategies: (strategies: StrategyStatus[]) => void;
+}
+
+export const tradingSlice: StateCreator<TradingState> = (set) => ({
+  strategies: {},
+  positions: [],
+  pnl: 0,
+  trades: [],
+  updateStrategy: (strategy) =>
+    set((state) => ({
+      strategies: { ...state.strategies, [strategy.strategy]: strategy },
+    })),
+  updatePositions: (positions) => set({ positions }),
+  updatePnl: (pnl) => set({ pnl }),
+  addTrade: (trade) =>
+    set((state) => ({
+      trades: [trade, ...state.trades].slice(0, 100),
+    })),
+  setStrategies: (strategies) =>
+    set(() => {
+      const strategyMap: Record<string, StrategyStatus> = {};
+      strategies.forEach((s) => {
+        strategyMap[s.strategy] = s;
+      });
+      return { strategies: strategyMap };
+    }),
+});