From 4c7ed858f71e17936c41449b7f4169d7e13780be Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 14:34:07 +0100
Subject: [PATCH] feat(funnels): add step-level breakdown drawer with dimension
 tabs

---
 app/sites/[id]/funnels/[funnelId]/page.tsx |  17 +++-
 components/funnels/BreakdownDrawer.tsx     | 111 +++++++++++++++++++++
 2 files changed, 127 insertions(+), 1 deletion(-)
 create mode 100644 components/funnels/BreakdownDrawer.tsx

diff --git a/app/sites/[id]/funnels/[funnelId]/page.tsx b/app/sites/[id]/funnels/[funnelId]/page.tsx
index 7050a1d..9fd7a5c 100644
--- a/app/sites/[id]/funnels/[funnelId]/page.tsx
+++ b/app/sites/[id]/funnels/[funnelId]/page.tsx
@@ -13,6 +13,7 @@ import { FunnelDetailSkeleton, useMinimumLoading, useSkeletonFade } from '@/comp
 import Link from 'next/link'
 import { FunnelChart } from '@/components/ui/funnel-chart'
 import { getDateRange } from '@ciphera-net/ui'
+import BreakdownDrawer from '@/components/funnels/BreakdownDrawer'
 import { ResponsiveContainer, LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid } from 'recharts'
 
 export default function FunnelReportPage() {
@@ -32,6 +33,7 @@ export default function FunnelReportPage() {
   const [expandedExitStep, setExpandedExitStep] = useState<number | null>(null)
   const [trends, setTrends] = useState<FunnelTrends | null>(null)
   const [visibleSteps, setVisibleSteps] = useState<Set<string>>(new Set())
+  const [breakdownStep, setBreakdownStep] = useState<number | null>(null)
 
   const loadData = useCallback(async () => {
     setLoadError(null)
@@ -326,7 +328,7 @@ export default function FunnelReportPage() {
               <tbody className="divide-y divide-neutral-200 dark:divide-neutral-800">
                 {stats.steps.map((step, i) => (
                   <React.Fragment key={step.step.name}>
-                    <tr className="hover:bg-neutral-50 dark:hover:bg-neutral-800/30 transition-colors">
+                    <tr className="hover:bg-neutral-50 dark:hover:bg-neutral-800/30 transition-colors cursor-pointer" onClick={() => setBreakdownStep(i)}>
                       <td className="px-6 py-4">
                         <div className="flex items-center gap-3">
                           <span className="w-6 h-6 rounded-full bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center text-xs font-medium text-neutral-600 dark:text-neutral-400">
@@ -398,6 +400,19 @@ export default function FunnelReportPage() {
         </div>
       </div>
 
+      {breakdownStep !== null && stats && (
+        <BreakdownDrawer
+          siteId={siteId}
+          funnelId={funnelId}
+          stepIndex={breakdownStep}
+          stepName={stats.steps[breakdownStep].step.name}
+          startDate={dateRange.start}
+          endDate={dateRange.end}
+          filters={serializeFilters(filters) || undefined}
+          onClose={() => setBreakdownStep(null)}
+        />
+      )}
+
       <DatePicker
         isOpen={isDatePickerOpen}
         onClose={() => setIsDatePickerOpen(false)}
diff --git a/components/funnels/BreakdownDrawer.tsx b/components/funnels/BreakdownDrawer.tsx
new file mode 100644
index 0000000..fc605ab
--- /dev/null
+++ b/components/funnels/BreakdownDrawer.tsx
@@ -0,0 +1,111 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import { getFunnelBreakdown, type FunnelBreakdown } from '@/lib/api/funnels'
+import { DIMENSION_LABELS } from '@/lib/filters'
+
+const BREAKDOWN_DIMENSIONS = [
+  'device', 'country', 'browser', 'os',
+  'utm_source', 'utm_medium', 'utm_campaign'
+]
+
+interface BreakdownDrawerProps {
+  siteId: string
+  funnelId: string
+  stepIndex: number
+  stepName: string
+  startDate: string
+  endDate: string
+  filters?: string
+  onClose: () => void
+}
+
+export default function BreakdownDrawer({ siteId, funnelId, stepIndex, stepName, startDate, endDate, filters, onClose }: BreakdownDrawerProps) {
+  const [activeDimension, setActiveDimension] = useState('device')
+  const [breakdown, setBreakdown] = useState<FunnelBreakdown | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  const loadBreakdown = useCallback(async () => {
+    setLoading(true)
+    try {
+      const data = await getFunnelBreakdown(siteId, funnelId, stepIndex, activeDimension, startDate, endDate, filters)
+      setBreakdown(data)
+    } catch {
+      setBreakdown(null)
+    } finally {
+      setLoading(false)
+    }
+  }, [siteId, funnelId, stepIndex, activeDimension, startDate, endDate, filters])
+
+  useEffect(() => {
+    loadBreakdown()
+  }, [loadBreakdown])
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div className="fixed inset-0 z-40 bg-black/20" onClick={onClose} />
+
+      <div className="fixed inset-y-0 right-0 z-50 w-96 max-w-full bg-white dark:bg-neutral-900 border-l border-neutral-200 dark:border-neutral-800 shadow-xl flex flex-col">
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-neutral-200 dark:border-neutral-800">
+          <div>
+            <h3 className="font-semibold text-neutral-900 dark:text-white">Step Breakdown</h3>
+            <p className="text-sm text-neutral-500">{stepName}</p>
+          </div>
+          <button onClick={onClose} className="p-2 text-neutral-400 hover:text-neutral-600 rounded-lg">
+            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Dimension tabs */}
+        <div className="flex overflow-x-auto gap-1 px-6 py-3 border-b border-neutral-200 dark:border-neutral-800">
+          {BREAKDOWN_DIMENSIONS.map(dim => (
+            <button
+              key={dim}
+              onClick={() => setActiveDimension(dim)}
+              className={`px-3 py-1.5 text-xs font-medium rounded-lg whitespace-nowrap transition-colors ${
+                activeDimension === dim
+                  ? 'bg-brand-orange text-white'
+                  : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-500 hover:bg-neutral-200 dark:hover:bg-neutral-700'
+              }`}
+            >
+              {DIMENSION_LABELS[dim] || dim}
+            </button>
+          ))}
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto px-6 py-4">
+          {loading ? (
+            <div className="space-y-3">
+              {Array.from({ length: 5 }).map((_, i) => (
+                <div key={i} className="h-10 bg-neutral-100 dark:bg-neutral-800 rounded-lg animate-pulse" />
+              ))}
+            </div>
+          ) : !breakdown || breakdown.entries.length === 0 ? (
+            <p className="text-sm text-neutral-500">No data for this dimension</p>
+          ) : (
+            <div className="space-y-2">
+              {breakdown.entries.map(entry => (
+                <div key={entry.value} className="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-neutral-50 dark:hover:bg-neutral-800/50">
+                  <span className="text-sm text-neutral-900 dark:text-white truncate mr-4">
+                    {entry.value || '(unknown)'}
+                  </span>
+                  <div className="flex items-center gap-4 text-sm shrink-0">
+                    <span className="text-neutral-500">{entry.visitors}</span>
+                    <span className="text-green-600 dark:text-green-400 font-medium w-16 text-right">
+                      {Math.round(entry.conversion)}%
+                    </span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  )
+}