pf_app/pf_ux_mockup.md
Paul Trowbridge dd993e989c Add UX mockup and update spec with navigation direction
- 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>
2026-04-25 14:56:29 -04:00

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]     │
  └────┴───────────┴──────────┴─────────────────────────┴────────────┘