# Plan K: Frontend — Overview + Clock + Financials Views

---
wave: 6
depends_on: [01-PLAN-M, 01-PLAN-D, 01-PLAN-F, 01-PLAN-I]
files_modified:
  - frontend/src/routes/overview/+page.svelte
  - frontend/src/routes/financials/+page.svelte
  - frontend/src/lib/components/ClockDisplay.svelte
  - frontend/src/lib/components/BlindInfo.svelte
  - frontend/src/lib/components/ActivityFeed.svelte
  - frontend/src/lib/components/PrizePoolCard.svelte
  - frontend/src/lib/components/TransactionList.svelte
  - frontend/src/lib/components/BubblePrize.svelte
  - frontend/src/lib/components/DealFlow.svelte
autonomous: true
requirements: [CHIP-03, CHIP-04, MULTI-02]
---

## Goal

The Overview tab shows the TD's primary workspace: a large clock display, time to next break, player counts, table balance status, financial summary, and recent activity feed. The Financials tab shows prize pool breakdown, transaction history, payout preview, bubble prize action, and chop/deal initiation. All views are reactive and update in real time via WebSocket.

## Context

- **Clock engine API** — Plan D (clock state, pause/resume, warnings)
- **Financial engine API** — Plan F (prize pool, transactions, payouts, bubble prize)
- **Tournament lifecycle API** — Plan I (tournament state, activity feed, chop/deal)
- **UI shell** — Plan J (layout, header, FAB, toast, data table, WebSocket client)
- **Overview tab is the TD's primary view** — most time spent here during a tournament

## User Decisions (from CONTEXT.md)

- **Overview tab priority** (top to bottom):
  1. Clock & current level (biggest element)
  2. Time to next break
  3. Player count (registered / remaining / busted)
  4. Table balance status
  5. Financial summary (prize pool, entries, rebuys)
  6. Recent activity feed (last few actions)
- **Bubble prize** must be fast and prominent, "Add bubble prize" easily accessible, not buried in menus
- **Flexible chop/deal** — ICM, custom split, partial chop, any number of players

## Tasks

<task id="K1" title="Implement Overview tab with clock display and activity feed">
**1. Clock Display Component** (`frontend/src/lib/components/ClockDisplay.svelte`):
- Large countdown timer: MM:SS format
  - Font size: as large as possible while fitting the container
  - Color: white text normally, transitions to `--ctp-red` in final 10 seconds
  - Pulsing animation in final 10 seconds
- Current level label: "Level 5" with game type if not default (e.g., "Level 5 — PLO")
- Blinds display: "SB: 100 / BB: 200" (large, readable)
- Ante display: "Ante: 25" (if > 0), "BB Ante: 200" (if BB ante)
- Next level preview: smaller text showing "Next: 150/300 (20:00)" or "Next: BREAK (10:00)"
- Chip-up indicator: if next level has chip-up, show "Chip-up: Remove 25s"
- Break styling: when current level is a break, display "BREAK" prominently with a different background color (teal from Catppuccin)
- Pause overlay: when paused, overlay "PAUSED" text with pulsing animation
- Hand-for-hand indicator: when active, show "HAND FOR HAND" badge
- No tap-to-pause on clock display (too easy to accidentally pause) — pause/resume lives exclusively in the FAB

**2. Time to Break Display:**
- Calculate time until next break level
- Show: "Break in: 45:00" (countdown to next break)
- If currently on break: show "Break ends in: 05:30"
- If no upcoming break: hide

**3. Player Count Card:**
- Show: "12 / 20 remaining" (active / total entries)
- Busted count: "8 busted"
- Average stack: "Avg: 25,000" (CHIP-04)
- Total chips in play: small text (CHIP-03)

**4. Table Balance Status:**
- If balanced: green indicator "Tables balanced"
- If unbalanced: yellow/red warning "Tables unbalanced — tap to view"
- Tap opens table balance view (navigates to Tables tab or modal)

**5. Financial Summary Card:**
- Prize pool: large number "€5,000"
- Breakdown: entries (15), rebuys (3), add-ons (2)
- Guarantee status: if guarantee exists and not met, show "Guarantee: €3,000 (house covers €500)"
- Tap opens Financials tab

**6. Activity Feed** (`frontend/src/lib/components/ActivityFeed.svelte`):
- Last 10-20 actions in reverse chronological order
- Each entry: icon + text + relative timestamp ("2m ago")
- Entry types with icons and colors:
  - Buy-in: green, player icon
  - Bust: red, skull/X icon
  - Rebuy: blue, refresh icon
  - Level change: clock icon
  - Break start/end: coffee/play icon
  - Seat move: arrow icon
  - Table break: table icon
- Auto-updates from WebSocket (new entries slide in at top)
- "View all" link → full audit log

**7. Overview Page** (`frontend/src/routes/overview/+page.svelte`):
- Assembles all components in the priority order from CONTEXT.md:
  1. ClockDisplay (takes ~40% of viewport on mobile)
  2. Time to break
  3. Player count card
  4. Table balance status
  5. Financial summary card
  6. Activity feed (scrollable, takes remaining space)
- All data reactive from `tournament` state store
- Skeleton loading state when tournament data is loading

**Verification:**
- Overview tab shows all priority items in correct order
- Clock counts down in real time from WebSocket updates
- Player count updates when players buy in or bust
- Activity feed shows recent actions with real-time updates
- Break styling shows distinctly when on break
</task>

<task id="K2" title="Implement Financials tab with prize pool, bubble prize, and chop/deal">
**1. Prize Pool Card** (`frontend/src/lib/components/PrizePoolCard.svelte`):
- Large prize pool display: "€5,000"
- Breakdown table:
  - Entries: count x amount = subtotal
  - Rebuys: count x amount = subtotal
  - Add-ons: count x amount = subtotal
  - Re-entries: count x amount = subtotal
  - Total contributions: sum
  - Rake: -amount (with category breakdown on expand)
  - Prize pool: final amount
- Guarantee indicator if active
- Season reserve amount if configured (FIN-12)

**2. Payout Preview:**
- Table showing payout structure for current entry count:
  - Position | Percentage | Amount
  - 1st | 50.0% | €2,500
  - 2nd | 30.0% | €1,500
  - 3rd | 20.0% | €1,000
- Auto-selects correct bracket based on entry count
- Updates in real time as entries change
- Rounding denomination shown (e.g., "Rounded to nearest €5")

**3. Bubble Prize** (`frontend/src/lib/components/BubblePrize.svelte`):
- **Prominent placement** — not buried in menus (CONTEXT.md: "Add bubble prize" easily accessible)
- Button: "Add Bubble Prize" with icon, placed prominently on Financials tab
- Flow:
  1. TD taps "Add Bubble Prize"
  2. Amount input (pre-filled with buy-in amount as suggestion)
  3. Preview: shows redistribution (original → adjusted for each position)
  4. Confirm button
- Visual: before/after comparison for top 3-5 prizes

**4. Transaction List** (`frontend/src/lib/components/TransactionList.svelte`):
- Uses DataTable component (Plan J)
- Columns: Time, Player, Type, Amount, Chips, Actions
- Filter by type (buy-in, rebuy, add-on, etc.)
- Search by player name
- Swipe action: Undo (with confirmation dialog)
- Receipt view: tap a row to see receipt details
- Reprint button on receipt view (FIN-14)

**5. Chop/Deal Flow** (`frontend/src/lib/components/DealFlow.svelte`):
- Button: "Propose Deal" (visible when 2+ players remain)
- Step 1: Select deal type (ICM, Chip Chop, Even Chop, Custom, Partial Chop)
- Step 2 (type-specific):
  - ICM: input chip stacks for each remaining player → calculate
  - Chip Chop: input chip stacks → proportional calculation
  - Even Chop: automatic (equal split)
  - Custom: input amount per player
  - Partial Chop: input amount to split + amount to leave in play
- Step 3: Review proposal showing each player's payout
- Step 4: Confirm deal → apply payouts
- Note: "Prize money and league positions are independent" — show info message

**6. Financials Page** (`frontend/src/routes/financials/+page.svelte`):
- Assembles:
  1. Prize Pool Card (collapsible for detail)
  2. Payout Preview table
  3. Bubble Prize button (prominent)
  4. Deal/Chop button (when applicable)
  5. Transaction list (scrollable, filterable)
- All reactive from tournament state

**Verification:**
- Prize pool displays correctly with breakdown
- Payout preview matches selected bracket
- Bubble prize flow: propose → preview redistribution → confirm
- Transaction list with filter, search, and undo action
- Chop/deal flow works for all types (ICM, chip chop, even, custom, partial)
- Season reserve amount shown when configured
</task>

## Verification Criteria

1. Overview tab shows all items in CONTEXT.md priority order
2. Clock display is large, readable, and updates in real time
3. Break and pause states display distinctly
4. Activity feed updates in real time
5. Prize pool breakdown is accurate and updates live
6. Payout preview auto-selects correct bracket by entry count
7. Bubble prize flow is fast and prominent (not buried in menus)
8. Transaction list supports filter, search, undo, receipt view
9. Chop/deal flow supports all types
10. All views are reactive from WebSocket state

## Must-Haves (Goal-Backward)

- [ ] Overview tab is the TD's primary workspace with clock as the biggest element
- [ ] Activity feed shows recent actions in real time
- [ ] Prize pool and payout preview update live as entries change
- [ ] Bubble prize creation is fast and prominent
- [ ] Transaction undo is accessible via swipe action
- [ ] Chop/deal supports ICM, chip-chop, even-chop, custom, and partial