# Plan N: Frontend — Tables Tab + More Tab (Templates, Settings)

---
wave: 6
depends_on: [01-PLAN-M, 01-PLAN-H, 01-PLAN-E, 01-PLAN-I]
files_modified:
  - frontend/src/routes/tables/+page.svelte
  - frontend/src/routes/more/+page.svelte
  - frontend/src/routes/more/templates/+page.svelte
  - frontend/src/routes/more/settings/+page.svelte
  - frontend/src/lib/components/OvalTable.svelte
  - frontend/src/lib/components/TableListView.svelte
  - frontend/src/lib/components/BalancingPanel.svelte
  - frontend/src/lib/components/TemplateManager.svelte
  - frontend/src/lib/components/BlindStructureEditor.svelte
  - frontend/src/lib/components/StructureWizard.svelte
autonomous: true
requirements: [SEAT-05, SEAT-07, SEAT-08, BLIND-06]
---

## Goal

The Tables tab shows oval table views (default) with seated players, list view alternative, balancing panel, and break table action. The More tab provides template management (LEGO building blocks), blind structure editor, structure wizard, venue settings, and audit log access. All interactions use tap-tap flow (no drag-and-drop in Phase 1).

## Context

- **Seating engine API** — Plan H (tables, auto-seat, balancing, break table)
- **Template/building blocks API** — Plan E (CRUD, templates, wizard)
- **Tournament lifecycle API** — Plan I (tournament state)
- **UI shell** — Plan M (layout, data table, FAB, toast)
- **All flows use tap-tap pattern** — no drag-and-drop in Phase 1

## User Decisions (from CONTEXT.md)

- **Oval table view (default)** — top-down with numbered seats, switchable to list view
- **Balancing is TD-driven, system-assisted** — 2-tap recording (source seat, destination seat)
- **Break Table is fully automatic**
- **Template building blocks feel like LEGO**
- **No drag-and-drop in Phase 1** — tap-tap for all moves
- **Structure wizard** lives in template management

## Tasks

<task id="N1" title="Implement Tables tab with oval view and balancing panel">
**1. Oval Table View** (`frontend/src/lib/components/OvalTable.svelte`) — SEAT-08:
- SVG-based top-down oval table:
  - Oval shape with seat positions around the edge
  - Each seat: numbered circle (48px touch target)
  - Occupied seats: show player name (truncated if needed)
  - Empty seats: show seat number only (lighter color)
  - Dealer button indicator on the button seat
  - Active/selected seat highlighted
- Responsive: scales to container width
- Tap seat → select for move/bust/details
- Support 6-max through 10-max configurations

**2. Table List View** (`frontend/src/lib/components/TableListView.svelte`) — SEAT-08:
- Alternative to oval view for density (10+ table tournaments)
- DataTable format: Table Name | Players | Seats | Balance
- Expand row → show seated players list
- Toggle between Oval and List view

**3. Balancing Panel** (`frontend/src/lib/components/BalancingPanel.svelte`) — SEAT-05:
- Shown when tables are unbalanced (yellow/red indicator)
- "Suggest Moves" button → shows system-generated suggestions
- Each suggestion: "Move 1 player from Table 1 (8 players) to Table 4 (6 players)"
- Accept flow (2 taps):
  1. Tap source seat on source table (who is moving)
  2. Tap destination seat on destination table (where they're going)
  3. System confirms and executes
- Cancel suggestion button
- Status: "Live" indicator showing suggestion is current (adaptive)
- If suggestion becomes stale (state changed), auto-cancel and show updated suggestion

**4. Tables Page** (`frontend/src/routes/tables/+page.svelte`):
- Grid of oval tables (2 per row on phone, more on tablet/desktop)
- View toggle: Oval / List
- Balance status banner at top (if unbalanced)
- Balancing panel (expandable)
- Actions per table:
  - "Break Table" button (with confirmation: "Distribute N players to remaining tables?")
  - "Add Table" button
- Seat move: tap source seat, tap destination seat (different table) → confirm move
- Hand-for-hand toggle (when near bubble)

**Verification:**
- Oval table view renders with correct seat positions and player names
- Tap-tap seat move works across tables
- Balancing panel shows suggestions and executes moves
- Break Table dissolves table and shows redistribution result
</task>

<task id="N2" title="Implement More tab with template management, structure wizard, settings">
**1. More Page** (`frontend/src/routes/more/+page.svelte`):
- Navigation list to sub-pages:
  - Tournament Templates
  - Blind Structures
  - Chip Sets
  - Payout Structures
  - Buy-in Configs
  - Venue Settings
  - Operators (admin only)
  - Audit Log
  - About / Version

**2. Template Manager** (`frontend/src/routes/more/templates/+page.svelte` and components):

**Template List:**
- DataTable: Name, Type (Turbo/Standard/etc.), Built-in badge
- Actions: Edit, Duplicate, Delete (not for built-in)
- "Create Template" button

**Template Editor** (`frontend/src/lib/components/TemplateManager.svelte`):
- LEGO-style composition:
  1. Name and description
  2. Chip Set: dropdown selector (preview denominations below)
  3. Blind Structure: dropdown selector (preview level summary below)
  4. Payout Structure: dropdown selector (preview brackets below)
  5. Buy-in Config: dropdown selector (preview amounts below)
  6. Points Formula: dropdown selector (optional)
  7. Tournament options: min/max players, PKO, bonuses
- Each dropdown: show current selection with summary, tap to change
- "Create New" option in each dropdown → navigate to that building block's editor

**3. Blind Structure Editor** (`frontend/src/lib/components/BlindStructureEditor.svelte`):
- List of levels with all fields per row (BLIND-01):
  - Position, Type (round/break), Game Type, SB, BB, Ante, BB Ante, Duration, Chip-up, Notes
- Add level button (appends)
- Delete level button (per row)
- Reorder (move up/down buttons — no drag, Phase 1)
- Auto-numbering (positions auto-increment)
- Mixed game support: game type dropdown per level (BLIND-03)

**4. Structure Wizard** (`frontend/src/lib/components/StructureWizard.svelte`) — BLIND-06:
- Inputs:
  - Player count (slider or number input, 8-200)
  - Starting chips (number input, common presets: 10K, 15K, 25K, 50K)
  - Target duration (slider: 1-8 hours)
  - Chip set (dropdown — for denomination alignment)
- "Generate" button → calls wizard API
- Preview: generated level list (editable before saving)
- "Save as Structure" button → creates new blind structure
- "Use in Template" button → pre-selects in template editor

**5. Settings Page** (`frontend/src/routes/more/settings/+page.svelte`):
- Venue name
- Currency (code + symbol)
- Rounding denomination
- Receipt mode (off / digital / print / both)
- Theme toggle (Mocha / Latte)
- Operator management (admin only): list operators, change PINs, change roles

**6. Audit Log Page:**
- DataTable with audit entries
- Filters: by action type, by tournament, by operator, date range
- Entry detail: full previous/new state JSON
- Linked to undo: "Undo this action" button where applicable

**Verification:**
- Template editor composes building blocks LEGO-style
- Blind structure editor supports all level fields
- Structure wizard generates and previews a blind structure
- Settings page saves venue configuration
- Audit log shows filterable action history
</task>

## Verification Criteria

1. Oval table view renders correctly for 6-10 max configurations
2. Tap-tap seat moves work between tables
3. Balancing panel shows adaptive suggestions and executes with 2 taps
4. Break Table distributes players and shows result
5. Template editor composes building blocks like LEGO
6. Blind structure editor supports all fields including BB Ante and mixed game
7. Structure wizard generates playable structures
8. Settings page saves venue configuration
9. Audit log shows filterable action history with undo capability

## Must-Haves (Goal-Backward)

- [ ] Oval table view with numbered seats and player names
- [ ] 2-tap seat recording for balancing (source seat, destination seat)
- [ ] Break Table shows redistribution result
- [ ] Template management with LEGO-style building block composition
- [ ] Structure wizard lives in template management
- [ ] All interactions use tap-tap flow (no drag-and-drop)