Frontend: Add daily trading log UI with monthly cards and editable daily logs

## Goal

Build the frontend UI for the new daily trading log system. This is frontend-only and depends on the backend daily trading log endpoints from issue #1.

The UI should follow the current EdgeFinder theme and layout patterns: Material UI cards, grids, dialogs/pages, and clean dashboard-style summaries similar to the existing journal screens.

Core UX requirement:

- Each month should display as a card in a grid.
- Each month card should show:
  - Month name
  - Average execution score
  - Amount of trades
- Clicking a month opens the daily logs for that month.
- Daily logs should be inspectable and editable.

---

## Main user flow

### 1. Daily Logs landing page

Create a new page, likely:

```text
front-end/app/daily-logs/page.tsx
```

This page should fetch monthly summaries from the backend endpoint:

```text
GET /daily-logs/monthly-summary
```

or, if backend returns one month at a time:

```text
GET /daily-logs/monthly-summary?year=2026&month=5
```

If the backend only supports one month at a time, add frontend logic to request summaries for recent months.

Display months as cards in a responsive grid.

### Month card fields

Each card should show, at minimum:

```text
May 2026
Avg Execution Score: 82/100
Trades: 34
```

Also include optional secondary metrics if available:

```text
Actual P/L: +$1,240
Rule-Based P/L: +$2,050
Leakage: $1,180
Bad-Process Gain: $370
```

### Month card behavior

Clicking a month card should open the daily logs for that month.

Acceptable implementation options:

1. Navigate to a dynamic route:

```text
/daily-logs/2026/5
```

2. Or open a month-detail view within the same page.

Prefer route-based navigation if it fits the current app structure.

---

## 2. Monthly daily-log detail view

Create a page or component that shows all daily logs for the selected month.

Possible route:

```text
front-end/app/daily-logs/[year]/[month]/page.tsx
```

This view should show a list/grid/table of daily logs.

### Daily log card/list item fields

Each daily log should show:

```text
Date
Total Score
Preparation Score
Execution Score
Reflection Score
Trade Count
Actual P/L
Rule-Based P/L
Leakage Cost
Rule Violation Gain
Main Issue
Next Session Focus
```

Suggested card layout:

```text
May 14, 2026
Execution Score: 74/100
Trades: 5
Actual P/L: +$200
Rule-Based P/L: +$480
Leakage: $330
Bad-Process Gain: $50
Main Issue: Early second trim
```

Each daily log card should have actions:

```text
Inspect
Edit
```

Clicking the card can also open inspect mode.

---

## 3. Daily log inspect/edit view

Create a detail view, dialog, drawer, or full page for a single daily log.

Possible route:

```text
front-end/app/daily-logs/[year]/[month]/[dailyLogId]/page.tsx
```

Or use a Material UI dialog if that better matches the current journal flow.

The daily log should be divided into three sections:

1. Preparation
2. Execution
3. Reflection

Each section should be viewable and editable.

---

# Preparation UI requirements

Preparation fields should match the backend schema.

## Checklist fields

Render as checkboxes:

```text
Reviewed previous trades
Completed market analysis
Created watchlist
Reviewed rules
Wrote emotional/risk note
```

## Text fields

Render as multiline text inputs:

```text
Market analysis notes
Watchlist notes
Emotional state
Risk note
```

## Score display

Show:

```text
Preparation Score: 17/20
```

The score can be calculated by the backend. Frontend should display the returned score after save.

Use:

```text
PUT /daily-logs/:id/preparation
```

---

# Execution UI requirements

Execution should be daily-log based, not per-trade based.

Show a daily summary card at the top:

```text
Execution Score: 72/100
Actual P/L: +$370
Rule-Based P/L: +$480
Execution Delta: -$110
Leakage Cost: $330
Rule Violation Gain: $220
Trades: 4
Mistakes: 3
```

## Trades for the day

The execution section should pull/display trades logged on that date.

Show a compact list:

```text
SPY +$180
QQQ -$150
NVDA +$120
TSLA +$220
```

Trades should be selectable when adding an execution mistake, but trades themselves should not carry execution score fields.

---

## Execution mistakes list

Show existing execution mistakes as cards/list rows.

Each mistake card should show:

```text
Rule label
Category
Severity
Linked trades, if any
Actual P/L impact
Rule-based P/L impact
Leakage cost
Rule violation gain
Points lost
Technical reason
Emotional reason
Correction
```

Example:

```text
Poor market conditions
Category: Market Conditions
Severity: Major
Linked trade: QQQ -$150
Actual impact: -$150
Rule-based impact: $0
Leakage: $150
Points lost: 25
```

Mistake actions:

```text
Edit
Delete
```

---

## Add execution mistake flow

Add button:

```text
+ Add Execution Mistake
```

Open a dialog or drawer.

### Step 1: What broke?

Group choices into two sections.

#### Trade should not have been taken

These should set `invalidatesTrade = true`.

```text
Not aligned with trend
Name was not relatively strong/weak
No HTF key level
No volume confirmation
Wrong side of EMAs/VWAP
Poor market conditions / range-bound
Invalid setup selection
```

#### Valid trade, bad execution

These should set `invalidatesTrade = false`.

```text
Improper size
Improper entry
Stop-loss violation
Moved stop incorrectly
Early first trim
Early second trim
Full exit too early
Held past sell signal
```

Map choices to backend `ExecutionRuleCode` enum values:

```ts
NOT_ALIGNED_WITH_TREND
NOT_RELATIVE_STRENGTH_WEAKNESS
NO_HTF_KEY_LEVEL
NO_VOLUME_CONFIRMATION
WRONG_SIDE_EMA_VWAP
POOR_MARKET_CONDITIONS
INVALID_SETUP_SELECTION
IMPROPER_SIZE
IMPROPER_ENTRY
STOP_LOSS_VIOLATION
MOVED_STOP_INCORRECTLY
EARLY_FIRST_TRIM
EARLY_SECOND_TRIM
FULL_EXIT_TOO_EARLY
HELD_PAST_SELL_SIGNAL
```

---

### Step 2: Link trade(s), optional but encouraged

Show trades from that day as selectable items.

For ineligible trade mistakes, user should usually select the affected trade.

Example:

```text
[ ] SPY +$180
[x] QQQ -$150
[ ] NVDA +$120
[ ] TSLA +$220
```

If one trade is selected and `invalidatesTrade = true`, auto-fill:

```text
Actual P/L impact = selected trade P/L
Rule-based P/L impact = 0
```

If multiple trades are selected and `invalidatesTrade = true`, auto-fill actual impact as the sum of selected trade P/L and rule-based impact as 0.

---

### Step 3: Money impact

Fields:

```text
Actual P/L impact
Rule-based P/L impact
```

Show calculated preview before saving:

```text
Execution Delta
Leakage Cost
Rule Violation Gain
```

Rules:

- If `invalidatesTrade = true`, default rule-based impact to 0.
- If `invalidatesTrade = false`, require the user to manually enter rule-based impact.
- Actual impact may be auto-filled from linked trades but should remain editable for edge cases.

Examples to support:

```text
Ineligible loser:
Actual impact: -150
Rule-based impact: 0
Leakage: 150

Ineligible winner:
Actual impact: +220
Rule-based impact: 0
Rule violation gain: 220

Early exit:
Actual impact: +120
Rule-based impact: +300
Leakage: 180

Stop violation:
Actual impact: -150
Rule-based impact: -60
Leakage: 90
```

---

### Step 4: Reasons and correction

Fields:

```text
Technical reason
Emotional reason
Correction
```

Severity select:

```text
Minor
Moderate
Major
Critical
```

Points lost should default from backend rule defaults, but the UI can display it before save if returned or known.

---

## Save behavior

Use endpoints from backend issue:

```text
POST /daily-logs/:id/execution-mistakes
PUT /daily-logs/:id/execution-mistakes/:mistakeId
DELETE /daily-logs/:id/execution-mistakes/:mistakeId
```

After save/delete:

- Refetch the daily log.
- Refresh execution score.
- Refresh actual P/L, rule-based P/L, leakage, rule violation gain.
- Refresh monthly summary when navigating back.

---

# Reflection UI requirements

Reflection fields should match backend schema.

## Checklist fields

Render as checkboxes:

```text
Reviewed all trades
Identified rule breaks
Explained technical reason
Explained emotional reason
Defined next-session fix
```

## Text fields

Render as multiline text inputs:

```text
What went well
What went poorly
Rules followed
Rules broken
Technical reason
Emotional reason
Next-session fix
```

## Score display

Show:

```text
Reflection Score: 12/15
```

Use:

```text
PUT /daily-logs/:id/reflection
```

---

# Create/edit daily log behavior

The UI should support creating a daily log for a date.

Recommended flow:

```text
+ New Daily Log
Date picker
Create
```

On create:

```text
POST /daily-logs
```

The backend should pull trades for that date and calculate actual P/L/trade count.

After create, navigate to the daily log detail/edit view.

Also support editing existing daily logs by date.

---

# Empty states

Add clear empty states.

## No monthly logs

```text
No daily logs yet.
Create your first daily log to start tracking execution performance.
```

## Month has no daily logs

```text
No logs for this month yet.
```

## Day has no trades

```text
No trades logged for this day.
You can still complete preparation and reflection, but execution P/L metrics will be $0 unless mistakes are entered manually.
```

---

# Styling requirements

Use the existing app style:

- Material UI `Container`, `Grid`, `Card`, `CardContent`, `Typography`, `Button`, `Dialog`, `TextField`, `Select`, `Checkbox`.
- Month cards should be clean dashboard cards.
- Daily log cards should feel similar to the journal statistic cards/table style.
- Use responsive layout.
- Avoid introducing a new visual design system.

Suggested layout:

```text
Daily Logs
[+ New Daily Log]

Grid:
[ May 2026 Card ] [ April 2026 Card ] [ March 2026 Card ]
```

Month detail:

```text
May 2026
[Back]

Summary Cards:
Avg Execution Score | Trades | Actual P/L | Leakage

Daily Log Cards/List:
May 1
May 2
May 3
...
```

Daily log detail:

```text
May 14, 2026
Summary cards

[Preparation]
[Execution]
[Reflection]
```

Use tabs or stacked cards. Tabs are preferred if the page feels too long.

---

# TypeScript types

Create frontend types for API responses, likely in a shared types file.

Suggested types:

```ts
export type MonthlyDailyLogSummary = {
  year: number;
  month: number;
  monthName: string;
  tradingDays: number;
  tradeCount: number;
  actualPnl: number;
  ruleBasedPnl: number;
  executionDelta: number;
  leakageCost: number;
  ruleViolationGain: number;
  averagePreparationScore: number;
  averageExecutionScore: number;
  averageReflectionScore: number;
  averageTotalScore: number;
  mostCommonRuleBreak: string | null;
  mostExpensiveRuleBreak: string | null;
};
```

```ts
export type DailyTradingLog = {
  id: string;
  date: string;
  totalScore: number;
  preparationScore: number;
  executionScore: number;
  reflectionScore: number;
  actualPnl: number;
  ruleBasedPnl: number;
  executionDelta: number;
  leakageCost: number;
  ruleViolationGain: number;
  tradeCount: number;
  mainIssue?: string | null;
  nextSessionFocus?: string | null;
  preparation?: DailyPreparationLog | null;
  reflection?: DailyReflectionLog | null;
  executionMistakes: DailyExecutionMistake[];
};
```

---

# Acceptance criteria

- New Daily Logs page exists.
- Months display as cards in a responsive grid.
- Month card shows month name, average execution score, and trade count at minimum.
- Clicking a month opens all daily logs for that month.
- Daily logs can be inspected.
- Daily logs can be edited.
- Preparation section can be edited and saved.
- Execution mistakes can be added, edited, and deleted.
- Execution mistake UI supports both:
  - ineligible trades where rule-based P/L is $0
  - valid trades with intratrade execution mistakes where rule-based P/L is manually entered
- Reflection section can be edited and saved.
- UI refetches and displays recalculated scores/P&L after saves.
- Existing trade journaling UI still works unchanged.
- Styling follows the current Material UI card/grid theme.


Frontend: Add daily trading log UI with monthly cards and editable daily logs #2

Description

Goal

Main user flow

1. Daily Logs landing page

Month card fields

Month card behavior

2. Monthly daily-log detail view

Daily log card/list item fields

3. Daily log inspect/edit view

Preparation UI requirements

Checklist fields

Text fields

Score display

Execution UI requirements

Trades for the day

Execution mistakes list

Add execution mistake flow

Step 1: What broke?

Trade should not have been taken

Valid trade, bad execution

Step 2: Link trade(s), optional but encouraged

Step 3: Money impact

Step 4: Reasons and correction

Save behavior

Reflection UI requirements

Checklist fields

Text fields

Score display

Create/edit daily log behavior

Empty states

No monthly logs

Month has no daily logs

Day has no trades

Styling requirements

TypeScript types

Acceptance criteria

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions