Funnels V2: event steps, edit UI, filters, trends, breakdowns #56

Merged
uz1mani merged 7 commits from feat/funnels-v2 into staging 2026-03-18 13:41:11 +00:00
uz1mani commented 2026-03-18 13:40:11 +00:00 (Migrated from github.com)

Summary

  • Category toggle — each funnel step can be "Page Visit" or "Custom Event" with property filters
  • Edit funnel page — pre-populated form via shared FunnelForm component
  • Conversion window picker — quick presets (1h, 24h, 7d, 14d, 30d) + custom input
  • Filter bar — reuses dashboard filter components on funnel detail page
  • Exit path display — inline top 3 + expandable full list per step
  • Trends chart — Recharts line chart with per-step toggle checkboxes
  • Breakdown drawer — right-side panel with dimension tabs (device, country, browser, OS, UTMs)
  • Max steps increased to 8 with step reordering buttons

Changes

  • components/funnels/FunnelForm.tsx — new shared form component (519 lines)
  • components/funnels/BreakdownDrawer.tsx — new drawer component
  • app/sites/[id]/funnels/new/page.tsx — reduced to thin wrapper around FunnelForm
  • app/sites/[id]/funnels/[funnelId]/page.tsx — added filters, exit paths, trends chart, breakdown drawer
  • app/sites/[id]/funnels/[funnelId]/edit/page.tsx — new edit page
  • lib/api/funnels.ts — updated types and added trends/breakdown API functions

Test Plan

  • Create funnel with page + event steps, verify category toggle works
  • Add property filters to event steps, verify submission
  • Set custom conversion window, verify it persists
  • Edit existing funnel, verify form pre-populates correctly
  • Apply dimension filters on funnel detail, verify stats update
  • Verify exit pages show inline for steps with dropoff
  • Verify trends chart renders with date range changes
  • Click a step row, verify breakdown drawer opens with correct data
  • Switch dimension tabs in drawer, verify data reloads
  • Verify step reordering (up/down arrows) works
## Summary - **Category toggle** — each funnel step can be "Page Visit" or "Custom Event" with property filters - **Edit funnel page** — pre-populated form via shared `FunnelForm` component - **Conversion window picker** — quick presets (1h, 24h, 7d, 14d, 30d) + custom input - **Filter bar** — reuses dashboard filter components on funnel detail page - **Exit path display** — inline top 3 + expandable full list per step - **Trends chart** — Recharts line chart with per-step toggle checkboxes - **Breakdown drawer** — right-side panel with dimension tabs (device, country, browser, OS, UTMs) - **Max steps increased to 8** with step reordering buttons ## Changes - `components/funnels/FunnelForm.tsx` — new shared form component (519 lines) - `components/funnels/BreakdownDrawer.tsx` — new drawer component - `app/sites/[id]/funnels/new/page.tsx` — reduced to thin wrapper around FunnelForm - `app/sites/[id]/funnels/[funnelId]/page.tsx` — added filters, exit paths, trends chart, breakdown drawer - `app/sites/[id]/funnels/[funnelId]/edit/page.tsx` — new edit page - `lib/api/funnels.ts` — updated types and added trends/breakdown API functions ## Test Plan - [x] Create funnel with page + event steps, verify category toggle works - [x] Add property filters to event steps, verify submission - [x] Set custom conversion window, verify it persists - [x] Edit existing funnel, verify form pre-populates correctly - [x] Apply dimension filters on funnel detail, verify stats update - [x] Verify exit pages show inline for steps with dropoff - [x] Verify trends chart renders with date range changes - [x] Click a step row, verify breakdown drawer opens with correct data - [x] Switch dimension tabs in drawer, verify data reloads - [x] Verify step reordering (up/down arrows) works
Sign in to join this conversation.
No description provided.