feat: add drop off funnel chart for /insights/routing

[eunjae-lee]

feat: add drop off funnel chart for /insights/routing

Summary

This PR adds a drop-off funnel chart visualization to the /insights/routing page that shows user progression through routing form steps. The chart displays three key metrics:

• Form Submissions: Total number of routing form submissions
• Successful Routing: Number of submissions that resulted in successful routing
• Accepted Bookings: Number of routed submissions that became accepted bookings

Key Implementation Details:

• Stacked PR: This PR is stacked on top of PR refactor: convert insights services to use kysely #22166 (services refactor) and depends on the InsightsRoutingService changes
• New tRPC endpoint: getDropOffData endpoint that uses the InsightsRoutingService
• React component: DropOffFunnel component built with Recharts library
• Authorization: Supports user, org, and team scopes with proper permission checks
• TypeScript fixes: Added proper null/undefined handling for organizationId and selectedTeamId

Review & Testing Checklist for Human

• Verify authorization logic: Test the funnel chart with different user roles (owner, admin, member) and scopes (user, org, team) to ensure users only see data they should have access to
• End-to-end testing with real data: Create routing forms, submit responses, and verify the funnel chart displays correct metrics and percentages
• Edge case handling: Test the UI with no data, partial data (only submissions, no routings), and verify loading/error states work properly
• TypeScript safety verification: Confirm the null checks in the tRPC endpoint properly handle cases where ctx.user.organizationId is null or input.selectedTeamId is undefined
• Stacking dependency: Verify this PR works correctly when merged after PR refactor: convert insights services to use kysely #22166, and that the services are properly integrated

Recommended Test Plan:

1. Set up test data with routing forms and responses in different states
2. Test the chart with different user accounts having various permission levels
3. Verify the chart updates correctly when changing date ranges and team selections
4. Test error scenarios (network failures, permission denied, etc.)

---

Diagram

%%{ init : { "theme" : "default" }}%%
graph TD
    subgraph "Frontend"
        A["DropOffFunnel.tsx"]:::major-edit
        B["dropoff/page.tsx"]:::major-edit
    end
    
    subgraph "tRPC Layer"
        C["trpc-router.ts"]:::major-edit
    end
    
    subgraph "Services (PR #22166)"
        D["insightsRouting.ts"]:::minor-edit
        E["insightsBooking.ts"]:::context
    end
    
    subgraph "Database"
        F["RoutingFormResponseDenormalized"]:::context
    end
    
    A --> C
    B --> D
    C --> D
    D --> F
    
    subgraph Legend
        L1["Major Edit"]:::major-edit
        L2["Minor Edit"]:::minor-edit  
        L3["Context/No Edit"]:::context
    end
    
    classDef major-edit fill:#90EE90
    classDef minor-edit fill:#87CEEB  
    classDef context fill:#FFFFFF

Loading

Notes

• Session Info: Requested by @eunjae-lee, implemented in Devin session: https://app.devin.ai/sessions/aa9fb56b2b4c4243b704320878203d54
• Dependency: This PR must be merged AFTER PR refactor: convert insights services to use kysely #22166 (services refactor) as it depends on the InsightsRoutingService
• Base Branch: The PR base should be changed from main to devin/insights-services-kysely-1735668293 to properly reflect the stacking relationship
• TypeScript Fixes: Fixed type mismatches where ctx.user.organizationId (nullable) and input.selectedTeamId (optional) were being passed to service constructor expecting non-null numbers
• Authorization: The service includes complex authorization logic that checks user membership and roles - this is security-critical code that needs thorough review

Demo

Playground

/settings/admin/playground/routing-funnel

Routing Funnel

/insights/routing

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
cal	⬜️ Ignored (Inspect)	Visit Preview		Jul 16, 2025 1:07pm
cal-eu	⬜️ Ignored (Inspect)	Visit Preview		Jul 16, 2025 1:07pm

[linear]

CAL-5986 Drop-off funnel chart for /insights/routing

[delve-auditor]

✅ No security or compliance issues detected. Reviewed everything up to 9df6903.

Security Overview

• 🔎 Scanned files: 24 changed file(s)

Detected Code Changes

Change Type	Relevant files
Enhancement	► managed-organizations.repository.ts     Add SkipTakePagination import ► managed-organizations.service.ts     Optimize slug creation logic ► playground/layout.tsx, page.tsx, routing-funnel/page.tsx     Add playground section with routing funnel demo ► SettingsLayoutAppDirClient.tsx     Add playground link to admin settings ► ChargeCardDialog.tsx     Simplify error handling ► insightsRouting.ts     Enhance routing insights with SQL queries ► ChartCard.tsx, RoutingFunnelContent.tsx     Add new chart components for routing funnel
Bug Fix	► server.ts     Fix SQL conditions for filters

Reply to this PR with @delve-auditor followed by a description of what change you want and we'll auto-submit a change to this PR to implement it.