[PULSE-36] Funnels UI - builder and report

[uz1mani]

Work Item

PULSE-36

Summary

• Add Funnels UI: list funnels, create funnel with configurable steps (path + match type), and funnel report (bar chart + table) with date range.
• Integrate with backend funnel API; follow Ciphera branding and existing Pulse dashboard patterns.
• Fix React hooks order on report page; use theme-aware chart and shared button/radius styles.

Changes

• API client: lib/api/funnels.ts – list, get, create, update, delete funnels; get funnel stats (optional from/to).
• List: app/sites/[id]/funnels/page.tsx – list funnels, empty state, Create Funnel (btn-primary), delete with confirm.
• Create: app/sites/[id]/funnels/new/page.tsx – form (name, description, steps: name/path/type exact|contains|regex), add/remove steps, Cancel (btn-secondary), submit (btn-primary).
• Report: app/sites/[id]/funnels/[funnelId]/page.tsx – funnel name/description, date range, theme-aware bar chart, stats table (visitors, drop-off %, conversion %), delete; hooks (useTheme, useMemo) before early return (fix React #310).
• Nav: app/sites/[id]/page.tsx – Funnels button on site dashboard; back links and actions use btn-primary / btn-secondary and rounded-xl.
• Consistency: Chart uses useTheme + CHART_COLORS_LIGHT/DARK; step pills rounded-lg; empty state aligned with GoalStats.

Test Plan

[ ] From site dashboard, open Funnels; list and empty state render.
[ ] Create funnel with multiple steps (exact, contains, regex); save and see it in list.
[ ] Open funnel report; date range changes update chart and table; drop-off/conversion values are sensible.
[ ] Delete funnel from list and from report; confirm flow works.
[ ] UI uses Ciphera buttons/radii and chart respects light/dark theme.

[greptile-apps]

Greptile Overview

Greptile Summary

This PR implements a comprehensive funnels feature for the Pulse analytics dashboard, adding the ability to track user journeys through multi-step conversion paths.

Key additions:

• API client (lib/api/funnels.ts) with full CRUD operations and RFC3339 date normalization for UTC-aware date range queries
• Funnels list page with empty state and delete confirmation
• Funnel creation form with validation for step names, paths, and regex patterns (including client-side regex syntax validation)
• Funnel report page with theme-aware Recharts visualization, date range controls (7/30/custom days), and granular error handling for 404/403/500 responses
• Integration into site dashboard with navigation button

Code quality highlights:

• All React hooks issues from previous review threads have been resolved (proper useCallback usage, correct dependency arrays, hooks before early returns)
• Comprehensive form validation prevents empty names/paths and invalid regex patterns
• Error states properly distinguish between "not found", "access denied", and transient failures with appropriate retry UX
• Date range selection uses stable datePreset state to avoid reference comparison issues
• Chart respects theme (light/dark) and uses brand colors with progressive opacity for multiple steps
• Unused imports have been cleaned up

All previously flagged issues from review threads have been addressed. The implementation follows existing Pulse patterns and integrates cleanly with the Ciphera branding system.

Confidence Score: 5/5

• This PR is safe to merge with no critical issues
• All previously identified issues from review threads have been resolved. The code demonstrates proper React patterns with correct hook usage and dependency management. Form validation is comprehensive covering edge cases like empty strings, whitespace, and invalid regex. Error handling distinguishes between different failure modes with appropriate UX. The implementation follows established patterns in the codebase and integrates cleanly with existing infrastructure.
• No files require special attention

Important Files Changed

Filename	Overview
lib/api/funnels.ts	Added funnel API client with full CRUD operations and date normalization for stats queries
app/sites/[id]/funnels/page.tsx	Added funnels list page with proper useCallback hooks, empty state, and delete functionality
app/sites/[id]/funnels/new/page.tsx	Added funnel creation form with comprehensive validation for step names, paths, and regex patterns
app/sites/[id]/funnels/[funnelId]/page.tsx	Added funnel report page with theme-aware charts, date range controls, and proper error handling for 404/403/500

Sequence Diagram

sequenceDiagram
    participant User
    participant Dashboard
    participant FunnelsList
    participant CreateForm
    participant ReportPage
    participant API

    User->>Dashboard: Click Funnels button
    Dashboard->>FunnelsList: Navigate to list
    
    FunnelsList->>API: GET funnels
    API-->>FunnelsList: Return funnels array
    
    alt No funnels
        FunnelsList->>User: Show empty state
    else Has funnels
        FunnelsList->>User: Show funnel cards
    end
    
    User->>CreateForm: Click create button
    CreateForm->>User: Show form
    
    User->>CreateForm: Fill and submit
    
    CreateForm->>CreateForm: Validate inputs
    
    alt Invalid inputs
        CreateForm->>User: Show error toast
    else Valid inputs
        CreateForm->>API: POST create funnel
        API-->>CreateForm: Return created funnel
        CreateForm->>FunnelsList: Navigate back
        FunnelsList->>User: Show success
    end
    
    User->>ReportPage: Click funnel
    ReportPage->>API: GET funnel details
    ReportPage->>API: GET stats with dates
    
    alt 404 error
        API-->>ReportPage: Not found
        ReportPage->>User: Show not found
    else 403 error
        API-->>ReportPage: Forbidden
        ReportPage->>User: Show access denied
    else 500 error
        API-->>ReportPage: Server error
        ReportPage->>User: Show error with retry
    else Success
        API-->>ReportPage: Return data
        ReportPage->>ReportPage: Generate chart
        ReportPage->>User: Display visualization
    end
    
    User->>ReportPage: Change date range
    ReportPage->>API: GET updated stats
    API-->>ReportPage: Return new data
    ReportPage->>User: Update display
    
    User->>ReportPage: Delete funnel
    ReportPage->>User: Confirm deletion
    User->>ReportPage: Confirm
    ReportPage->>API: DELETE funnel
    API-->>ReportPage: Success
    ReportPage->>FunnelsList: Navigate back

Loading

[greptile-apps]

_{7 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

_{4 files reviewed, 7 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

_{7 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

_{3 files reviewed, 3 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

_{4 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

_{7 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

_{3 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}