## 1. Product Overview
A modern trading journal application designed to help traders track their performance, analyze trading patterns, and make data-driven decisions. The application provides comprehensive trade tracking with visual analytics, performance metrics, and calendar-based trade history management.

Target users are individual traders and investors who need professional-grade trade analysis tools with an intuitive, modern interface.

## 2. Core Features

### 2.1 User Roles
| Role | Registration Method | Core Permissions |
|------|---------------------|------------------|
| Trader | Email registration | Full access to trade management, analytics, and reporting |

### 2.2 Feature Module
Our trading journal application consists of the following main pages:
1. **Dashboard**: Net P&L overview, win rate, profit factor, total profit/loss metrics, trading calendar, weekly summary, performance breakdown, and recent trades.
2. **Trade Entry**: Add new trades with details including entry/exit prices, position size, trade direction, and notes.
3. **Trade History**: View and filter all historical trades with search and sorting capabilities.

### 2.3 Page Details
| Page Name | Module Name | Feature description |
|-----------|-------------|---------------------|
| Dashboard | Net P&L Card | Display total net profit/loss with large prominent value, show number of completed trades, include win rate percentage, profit factor, and average confluence metrics with teal accent styling. |
| Dashboard | Total Profit Card | Show total profit amount with green accent, display count of winning trades, include upward trending arrow icon. |
| Dashboard | Total Loss Card | Show total loss amount with magenta accent, display count of losing trades, include downward trending arrow icon. |
| Dashboard | Secondary Stats | Display largest win, largest loss, best streak, and total trades in compact card format with colored accent badges. |
| Dashboard | Trading Calendar | Show monthly calendar view with trade days highlighted, include month navigation with chevron buttons, today button for quick navigation, selected date highlighting with teal borders. |
| Dashboard | Weekly Summary | Display 4-week summary with profit/loss amounts, trading days count, and trend indicators using green gradient backgrounds. |
| Dashboard | Performance Breakdown | Show win rate with circular percentage indicator, separate long trades and short trades performance with green/orange accents, display wins/losses/pending counters with colored dots. |
| Dashboard | Recent Trades | List most recent trades with trade details or show "No trades yet" message when empty. |
| Trade Entry | Trade Form | Input fields for trade direction (long/short), entry price, exit price, position size, entry date/time, exit date/time, trade notes, and confluence factors. |
| Trade History | Trade List | Display all trades in tabular format with filtering by date range, trade direction, profit/loss, search by symbol or notes, sorting by any column. |

## 3. Core Process
User starts by accessing the Dashboard to view overall trading performance. From the dashboard, users can navigate to add new trades through the Trade Entry page or review detailed history through the Trade History page. The Trading Calendar allows users to click on specific dates to view trades executed on that day.

```mermaid
graph TD
  A[Dashboard] --> B[Trade Entry]
  A --> C[Trade History]
  B --> A
  C --> A
  A --> D[Trading Calendar]
  D --> C
```

## 4. User Interface Design

### 4.1 Design Style
- **Primary Colors**: Deep navy/indigo gradient background (#1a1f2e to #0f1419)
- **Accent Colors**: Teal/mint (#00d4aa) for positive metrics, magenta/purple (#d400d4) for losses, green (#00d400) for profits, orange (#ff6b35) for warnings
- **Button Style**: Rounded pill buttons with gradient backgrounds, hover effects with subtle glow
- **Typography**: Modern sans-serif (Inter or similar), headers in bold white (18-24px), body text in light gray (#a0aec0), KPI values in large bright accent colors (32-48px)
- **Layout Style**: Card-based layout with consistent 16px spacing, subtle inner shadows, 8px border radius
- **Icons**: Minimal line icons, trending arrows, dollar symbols, calendar chevrons

### 4.2 Page Design Overview
| Page Name | Module Name | UI Elements |
|-----------|-------------|-------------|
| Dashboard | Net P&L Card | Large teal-accented card with $0.00 prominently displayed, three inline metric tiles for win rate, profit factor, and avg confluence, dollar icon in teal square on right side. |
| Dashboard | Trading Calendar | Full-width dark navy container with white "Trading Calendar" title, month navigation with gray-outline "TODAY" pill button, centered month display with white text, left/right chevron icons in light gray, 7-column calendar grid with teal border highlights on selected dates. |
| Dashboard | Weekly Summary | Stacked tiles with green gradient backgrounds, white week labels, green profit values, gray day counts, small upward trend icons on active weeks. |
| Trade Entry | Form Container | Dark rounded card with white header, form inputs with teal focus borders, green submit button, gray cancel button, proper form validation with error messages in red. |

### 4.3 Responsiveness
Desktop-first design approach with mobile adaptation. Primary layout optimized for 1920x1080 and 1366x768 resolutions. Cards stack vertically on mobile devices with horizontal scrolling for calendar and data tables. Touch-optimized buttons with minimum 44px touch targets.

### 4.4 3D Scene Guidance
Not applicable for this 2D trading journal application.