# Dashboard Customization Guide

## Overview

The Gold Trading Simulator now features a **fully customizable dashboard** that allows users to personalize their trading interface to match their workflow and preferences. Every aspect of the dashboard can be tailored, from tab visibility and positioning to individual component settings.

## Key Features

### 1. **Multiple Layout Modes**

Choose from three distinct layout modes:

- **Grid Mode** (Default): Display multiple panels simultaneously in a responsive grid
- **Tabs Mode**: Focus on one panel at a time with a tabbed interface
- **Split Mode**: Two-column layout with customizable panel positioning

### 2. **Tab Management**

Each dashboard component can be:

- ✅ **Shown or Hidden**: Toggle visibility of any panel
- 📌 **Pinned**: Keep important panels always visible and prevent accidental closing
- 📊 **Resized**: Choose from Small, Medium, Large, or Full-width sizes
- 🔄 **Reordered**: Drag and drop to rearrange panel order
- ⚙️ **Customized**: Configure individual settings per component

### 3. **Per-Component Customization**

Each component supports specific customization options:

#### **News Feed**
- Auto-refresh toggle
- Refresh rate (10-3600 seconds)
- Filter by sentiment (ALL, POSITIVE, NEGATIVE, NEUTRAL)
- Filter by impact (ALL, HIGH, MEDIUM, LOW)
- Display theme (Default, Compact, Detailed)

#### **Alerts Panel**
- Auto-refresh toggle
- Refresh rate configuration
- Filter by severity (ALL, CRITICAL, HIGH, MEDIUM, LOW)
- Filter by alert type (PRICE_SPIKE, NEWS_BREAKING, etc.)

#### **Price Chart**
- Display mode (Candlestick, Line, Area)
- Theme selection

#### **Advanced Analytics**
- Display mode (Detailed, Compact, Charts-only)
- Theme selection

### 4. **Layout Presets**

Quick-switch between professionally designed layouts:

#### **Trading Focus**
- Full-width chart at top
- Trade controls, portfolio, and risk management readily accessible
- Minimized analytics
- Perfect for active trading sessions

#### **Analysis Focus**
- Tab-based navigation
- Chart, AI Analysis, and Analytics prioritized
- Ideal for deep market analysis

#### **News Focus**
- Split-screen layout
- Chart on left, news and alerts on right
- Stay informed while monitoring price action

#### **Balanced View**
- All components visible in grid layout
- Equal emphasis across all features
- Great for comprehensive market overview

### 5. **Custom Presets**

Create and save your own layout configurations:

1. Arrange the dashboard to your liking
2. Open Dashboard Customizer
3. Go to "Presets" tab
4. Name and save your custom layout
5. Switch between custom and default presets anytime

## How to Use

### Opening the Customizer

Click the **"Customize"** button in the top-right header, next to the Export menu.

### Changing Layout Mode

1. Open Dashboard Customizer
2. Go to "Layout Mode" tab
3. Select Grid, Tabs, or Split mode
4. Changes apply immediately

### Managing Tabs

1. Open Dashboard Customizer
2. Go to "Tabs & Order" tab
3. **Drag and drop** rows to reorder panels
4. **Toggle eye icon** to show/hide panels
5. **Select size** from dropdown (Small, Medium, Large, Full)
6. **Click pin icon** to pin/unpin panels

### Customizing Individual Components

1. Hover over any panel header
2. Click the **Settings icon** (appears on hover)
3. Configure available options:
   - Auto-refresh settings
   - Display preferences
   - Filters
   - Theme
4. Click "Save" to apply changes

### Expanding Panels

- Click the **Maximize icon** in any panel header
- Panel expands to full-screen overlay
- Click **Minimize** to return to normal view

### Loading Presets

1. Open Dashboard Customizer
2. Go to "Presets" tab
3. Click any preset to apply it instantly

### Saving Custom Presets

1. Arrange dashboard as desired
2. Open Dashboard Customizer → "Presets" tab
3. Enter preset name and description
4. Click "Save as New Preset"
5. Your preset is now available alongside default presets

### Resetting to Default

1. Open Dashboard Customizer
2. Click "Reset to Default" button (bottom-left)
3. Confirm the reset

## Persistence

All dashboard customizations are **automatically saved** to browser localStorage:
- Layout mode preference
- Tab visibility and order
- Panel sizes and pinning status
- Component-specific settings
- Custom presets

Your preferences persist across browser sessions and page refreshes.

## Component Reference

### Available Tabs

1. **Price Chart** (`chart`) - Real-time gold price visualization
2. **Trade Controls** (`trade-controls`) - Buy/sell interface and simulation controls
3. **Portfolio** (`portfolio`) - Position and performance tracking
4. **Risk Management** (`risk-management`) - Position sizing and risk calculations
5. **AI Analysis** (`ai-analysis`) - AI-powered market insights
6. **News Feed** (`news`) - Real-time market news and sentiment
7. **Alerts** (`alerts`) - Price and event notifications
8. **Advanced Analytics** (`analytics`) - Trading performance metrics

## Tips for Best Results

### For Active Trading
- Use **Trading Focus** preset
- Pin Trade Controls and Portfolio
- Enable auto-refresh on News (300s)
- Keep Chart expanded

### For Analysis
- Use **Analysis Focus** preset in Tabs mode
- Configure chart for detailed view
- Set Analytics to detailed mode
- Review AI Analysis regularly

### For News Trading
- Use **News Focus** preset
- Enable auto-refresh on News and Alerts
- Filter by HIGH impact only
- Keep Chart and News side-by-side

### For Learning
- Use **Balanced View** preset
- Keep all panels visible
- Enable detailed themes
- Monitor Analytics tab for feedback

## Keyboard Shortcuts

While there are no dedicated keyboard shortcuts yet, you can:
- Use Tab to navigate between controls
- Use Enter to confirm selections
- Use Esc (when implemented) to close modals

## Technical Details

### Storage Location
Configuration stored in: `localStorage['gold-trading-dashboard-config']`

### Default Configuration
The system ships with sensible defaults that work well for most users.

### Configuration Schema
```typescript
{
  mode: 'grid' | 'tabs' | 'split',
  tabs: TabConfig[],
  activePreset: string,
  customPresets: LayoutPreset[]
}
```

## Troubleshooting

**Q: My changes aren't saving**
- Check browser localStorage is enabled
- Try clearing browser cache and reconfiguring
- Check browser console for errors

**Q: A panel disappeared**
- Open Dashboard Customizer → "Tabs & Order"
- Find the panel and toggle visibility on
- Or use "Reset to Default" to restore all panels

**Q: Preset not loading**
- Ensure the preset exists in the list
- Try manually configuring instead
- Check for JavaScript errors in console

**Q: Performance issues with many panels**
- Hide unused panels to improve performance
- Use Tabs mode for better resource usage
- Disable auto-refresh on less critical components

## Future Enhancements

Planned features for future releases:
- Keyboard shortcuts for common actions
- Export/import configuration
- Share preset configurations
- More granular component customization
- Resizable panels with drag handles
- Multi-monitor support

## Support

For issues or feature requests related to dashboard customization, please check:
- Project README.md
- GitHub Issues
- Project documentation

---

**Happy Trading! 🎯📈**