- HTML mockup with collapsible side nav, 3-step flow (Setup/Baseline/Forecast) - Canvas-based timeline preview in baseline segment form - Table peek modal, status bar, help popovers - Spec updated: 3-step mental model, AG Grid replacement note Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
10 KiB
10 KiB
Pivot Forecast — UX Mockup
┌─────────────────────────────────────────────────────────────────────┐
│ Pivot Forecast │
│ ① Setup ② Baseline ③ Forecast ◀ (default landing) │
└─────────────────────────────────────────────────────────────────────┘
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
① SETUP
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┌──── All Tables ──────────────┐ ┌──── Registered Sources ─────────┐
│ schema table rows │ │ │
│ ────── ────────── ────── │ │ sales_orders ✓ SQL ready │
│ public sales_orders 48,291 │◀─│ invoices ✓ SQL ready │
│ public invoices 12,004 │ │ + Register table │
│ public products 891 │ └──────────────────────────────────┘
│ rpt summary_mv 3,442 │
└──────────────────────────────┘ ┌──── Col Meta: sales_orders ─────┐
│ column role key label│
│ ────────── ──────── ─── ─── │
│ customer dimension ✓ │
│ channel dimension ✓ │
│ part dimension │
│ geography dimension │
│ order_date date │
│ ship_date filter │
│ status filter │
│ units units │
│ revenue value │
│ internal_id ignore │
│ │
│ [Generate SQL ▶] │
└──────────────────────────────────┘
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
② BASELINE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Source [sales_orders ▾] Version [FY2026 Plan ▾] [+ New version]
┌──── Segments ──────────────────────────────────────────────────────┐
│ # description rows by date │
│ ─ ──────────────────────────── ────── ────── ────────────── │
│ 1 FY25 actuals +1yr 41,204 paul Apr 24 │
│ 2 Open orders 3,109 paul Apr 24 [Undo] │
│ │
│ Total baseline rows: 44,313 [Clear all baseline] │
└────────────────────────────────────────────────────────────────────┘
┌──── Add Segment ────────────────────────────────────────────────────┐
│ │
│ Description [ ] │
│ │
│ Filters [+ Add filter] │
│ ┌─────────────────┬──────────┬─────────────────────┬───┐ │
│ │ order_date │ BETWEEN │ 2025-01-01 2025-12-31│ x │ │
│ └─────────────────┴──────────┴─────────────────────┴───┘ │
│ │
│ Date offset [1] yr [0] mo │
│ │
│ ·───────────────────────────· source │
│ Jan 2025 Dec 2025 │
│ ·───────────────────────────· projected (+1 yr) │
│ Jan 2026 Dec 2026 │
│ │
│ Note [ ] [Load Segment] │
└────────────────────────────────────────────────────────────────────┘
┌──── Reference (optional) ──────────────────────────────────────────┐
│ Load prior-period rows for comparison in the pivot │
│ Date range [2024-01-01] to [2024-12-31] │
│ Note [ ] [Load Ref] │
└────────────────────────────────────────────────────────────────────┘
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
③ FORECAST source: sales_orders
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Version [FY2026 Plan ▾] [Refresh] [Save layout] [Reset layout]
┌──── Pivot ───────────────────────────────┐ ┌──── Operations ───────┐
│ │ │ │
│ (Perspective viewer) │ │ Slice │
│ │ │ channel = WHS │
│ channel │ Jan 2026 │ Feb 2026 │ ... │ │ geo = WEST │
│ ──────────┼──────────┼──────────┼─── │ │ │
│ DIR │ 412,000 │ 388,000 │ │ │ [Scale][Recode] │
│ WHS ◀ │ 290,000 │ 310,000 │ │ │ [Clone] │
│ ──────── │ │ │ │ │ ─────────────────── │
│ Total │ 702,000 │ 698,000 │ │ │ Value incr [ ] │
│ │ │ Units incr [ ] │
│ │ │ Pct? [ ] │
│ │ │ │
│ │ │ Note [ ] │
│ │ │ │
│ │ │ [Submit] │
└──────────────────────────────────────────┘ └───────────────────────┘
▼ Change log (12 entries)
┌────┬───────────┬──────────┬─────────────────────────┬────────────┐
│ id │ operation │ by │ slice │ │
│ ── │ ───────── │ ──────── │ ───────────────────── ─ │ │
│ 12 │ scale │ paul │ channel=WHS geo=WEST │ [Undo] │
│ 11 │ recode │ paul │ part=OLD-SKU │ [Undo] │
│ 10 │ scale │ paul │ channel=DIR │ [Undo] │
└────┴───────────┴──────────┴─────────────────────────┴────────────┘