feat: Add Phase 4 advanced metrics and components

- Add advanced metrics dashboard with trade analytics - Add new trading components (EntryTypeAnalysis, MultiDayPositionTracker, NewsEventTracker, etc.) - Add strategy mode selector and trend confirmation - Add risk automation panel and slippage correlation analysis - Add daily trading plan enhancements with modal components - Add custom hooks (useApi, useLocalStorage, useAdvancedTradeMetrics) - Add broker service integration and trading API - Add test setup and vitest configuration - Include parquet data files for live market data - Add comprehensive documentation in docs/ folder
2025-11-27 10:23:58 +02:00
parent b5e2b02cb8
commit 48e60d015f
2019 changed files with 39793 additions and 257 deletions
@@ -0,0 +1,167 @@
+# UI Refactoring Recommendations - Gold Trading Simulator
+
+## Current Issues Identified
+
+### 1. **Duplicate Components**
+The UI currently has redundant components that serve similar purposes:
+
+- **DailyChecklist.tsx** vs **DailyChecklistPanel.tsx** - Both are checklist components with slightly different implementations
+- **RiskManagement.tsx** vs **RiskAutomationPanel.tsx** - Overlapping risk management features
+- **AnalyticsDashboard.tsx** vs **AdvancedMetricsDashboard.tsx** - Two analytics dashboards
+- **AIAnalysisPanel.tsx** vs **AITradingCoach.tsx** - Two AI-related features scattered
+
+### 2. **Poor Information Architecture**
+- **Legacy Views Section**: AI Coach, ML Patterns, Settings, and Prompts are hidden at the bottom as "legacy" tabs
+- **Overwhelming Layout**: Too many components visible at once (9+ sections)
+- **Unclear Hierarchy**: No clear primary vs. secondary features
+- **Tab Confusion**: Three workflow tabs (Prep/Trade/Review) plus four legacy tabs = 7 different tab groups
+
+### 3. **Navigation Issues**
+- Settings buried in legacy tabs instead of being a primary feature
+- No clear entry point for new users
+- Mobile experience degraded with too many tab options
+- Quick actions not easily accessible during trading
+
+## Recommended New Structure
+
+### Single Navigation Bar with 5 Primary Views
+
+```
+Gold Trading Simulator
+├── Dashboard (Market Overview & Prep)
+│   ├── Quick Stats (Price, Portfolio, P&L, Cash)
+│   ├── Live Market Panel
+│   ├── Alerts & News Feed
+│   ├── Daily Checklist
+│   ├── Market Summary
+│   └── Daily Trading Plan
+│
+├── Trade (Execution & Position Management)
+│   ├── Multi-Chart Panel
+│   ├── Trade Controls (Buy/Sell/Reset)
+│   ├── Portfolio Tracker
+│   ├── AI Analysis Panel
+│   ├── Risk Management
+│   ├── Risk Automation Panel
+│   └── Broker Bridge
+│
+├── Journal (Review & Analytics)
+│   ├── Advanced Metrics Dashboard
+│   ├── Trading Journal
+│   ├── Equity Performance
+│   └── Analytics Dashboard
+│
+├── AI Coach (Consolidated AI Features)
+│   ├── AI Trading Coach
+│   ├── Quick AI Analysis
+│   └── Prompt Templates
+│
+└── Settings (Configuration & Preferences)
+    ├── Settings Panel
+    └── Trading Profile Setup
+```
+
+## Key Improvements
+
+### 1. **Clarity & Organization**
+- ✅ Clear separation of concerns (Prep → Trade → Review → Improve)
+- ✅ All features accessible from main navigation
+- ✅ No "legacy" or secondary navigation
+- ✅ Logical grouping by trading workflow phase
+
+### 2. **Trader Workflow Optimization**
+- **Dashboard**: Morning preparation with market context
+- **Trade**: Live execution cockpit (all controls in one place)
+- **Journal**: Post-session analysis and learning
+- **AI Coach**: On-demand AI insights
+- **Settings**: One-time configuration
+
+### 3. **Mobile Responsiveness**
+- Clean horizontal navbar that scrolls on mobile
+- Quick Trade button accessible from any screen
+- Consolidated status indicators (Price, P&L, API Status)
+- Drawer-based Quick Trade modal
+
+### 4. **Deduplication Wins**
+- Consolidate RiskManagement + RiskAutomationPanel → Single embedded risk view
+- Use only DailyChecklistPanel throughout
+- Merge AnalyticsDashboard data into AdvancedMetricsDashboard
+- Group AI features in dedicated AI Coach section
+
+### 5. **UI/UX Enhancements**
+- Sticky navigation bar with live price ticker
+- Quick trade floating button/drawer
+- Status badges (API connected, P&L live update)
+- Grid-based responsive layouts for each view
+- Consistent color scheme and spacing
+
+## Components to Consolidate
+
+| Current | Recommendation |
+|---------|---|
+| DailyChecklist + DailyChecklistPanel | Keep only DailyChecklistPanel |
+| RiskManagement + RiskAutomationPanel | Keep both, embed in Trade view side-by-side |
+| AnalyticsDashboard + AdvancedMetricsDashboard | Merge into one comprehensive dashboard |
+| AIAnalysisPanel + AITradingCoach + MLPatternRecognition | Group in AI Coach view |
+| SettingsPanel + PromptTemplatesPanel | Consolidate in Settings view |
+| DecisionLogPanel | Integrate into AnalyticsDashboard |
+| HabitTracker | Move to Settings/AI Coach |
+| Legacy tabs | Remove - promote to primary views |
+
+## Implementation Steps
+
+### Phase 1: Create New App Structure
+1. Create new `App.tsx` with 5-view navigation structure
+2. Update imports to remove legacy tabs (HabitTracker, MLPatternRecognition, DecisionLogPanel)
+3. Reorganize component placement within each view
+
+### Phase 2: Layout Refinement
+1. Create responsive grid layouts for each view
+2. Implement sticky navigation bar
+3. Add Quick Trade drawer modal
+4. Update status badges in header
+
+### Phase 3: Consolidation
+1. Merge duplicate components where needed
+2. Clean up unused component exports
+3. Update CSS for consistent spacing
+
+### Phase 4: Testing & Polish
+1. Test responsive layouts on mobile/tablet/desktop
+2. Verify all trading workflows work end-to-end
+3. Check accessibility and keyboard navigation
+
+## Benefits Summary
+
+| Aspect | Current | After Refactor |
+|--------|---------|--------|
+| **Navigation Items** | 7 tabs | 5 main views |
+| **Primary Actions** | 3 locations | 1 (Trade view) |
+| **Settings Access** | 4 clicks (legacy) | 1 click |
+| **New User Onboarding** | Confusing | Clear (Dashboard → Trade) |
+| **Mobile UX** | Poor | Optimized |
+| **Code Duplication** | High | Low |
+| **Component Count** | 40+ | 30+ (consolidated) |
+
+## Migration Path for Users
+
+New users will naturally flow through:
+1. **Dashboard** → Understand market context and prep
+2. **Trade** → Execute positions with full context
+3. **Journal** → Review and improve
+4. **AI Coach** → Get insights and coaching
+5. **Settings** → Configure preferences (done once)
+
+Existing users can switch views seamlessly with the navbar, and all their data persists in the same localStorage keys.
+
+---
+
+## Quick Start - Developers
+
+The new structure keeps all business logic intact while reorganizing the presentation layer. No API changes required. All component data flows remain the same - only the view container and layout change.
+
+To implement, create an `AppNew.tsx` that:
+- Replaces Prep/Trade/Review tabs with Dashboard/Trade/Journal/AI/Settings views
+- Uses the same state management and callbacks
+- Groups components by view rather than creating horizontal workflow tabs
+- Simplifies the component tree while keeping feature parity