Krikorios
48e60d015f
- 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
168 lines
6.4 KiB
Markdown
168 lines
6.4 KiB
Markdown
# 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
|