fix: funnels UI

Author: izadoesdev

apps/api/src/query/builders/sessions.ts

@@ -205,7 +205,7 @@ export const SessionsBuilders: Record<string, SimpleQueryConfig> = {
       COALESCE(se.events, []) as events
     FROM session_list sl
     LEFT JOIN session_events se ON sl.session_id = se.session_id
-    ${combinedWhereClause ? `WHERE ${combinedWhereClause.replace('AND ', '')}` : ''}
+    ${combinedWhereClause}
     ORDER BY sl.first_visit DESC
   `,
 				params: {

apps/api/src/query/utils.ts

@@ -288,5 +288,5 @@ export function buildWhereClause(conditions?: string[]): string {
 	const safeClauses = conditions.filter(
 		(clause) => !UNSAFE_CLAUSE_REGEX.test(clause)
 	);
-	return `AND (${safeClauses.join(' AND ')})`;
+	return `WHERE (${safeClauses.join(' AND ')})`;
 }

apps/dashboard/app/(main)/websites/[id]/funnels/_components/funnel-analytics.tsx

@@ -56,40 +56,32 @@ export function FunnelAnalytics({
 		return referrer || null;
 	}, [selectedReferrer, referrerAnalytics]);
 
-	// Use selected referrer data if available, otherwise use main analytics data
 	const displayData = selectedReferrerData
 		? {
 				total_users_entered: selectedReferrerData.total_users,
 				total_users_completed: selectedReferrerData.completed_users,
 				overall_conversion_rate: selectedReferrerData.conversion_rate,
-				avg_completion_time: 0, // Not available in referrer analytics
+				avg_completion_time: 0,
 				avg_completion_time_formatted: '0s',
 				biggest_dropoff_step: 1,
 				biggest_dropoff_rate: 100 - selectedReferrerData.conversion_rate,
-				steps_analytics: [
-					{
-						step_number: 1,
-						step_name: 'Landing Page',
-						users: selectedReferrerData.total_users,
-						total_users: selectedReferrerData.total_users,
-						conversion_rate: 100,
-						dropoffs: 0,
-						dropoff_rate: 0,
-						avg_time_to_complete: 0,
-					},
-					{
-						step_number: 2,
-						step_name: 'Completed',
-						users: selectedReferrerData.completed_users,
-						total_users: selectedReferrerData.total_users,
-						conversion_rate: selectedReferrerData.conversion_rate,
-						dropoffs:
-							selectedReferrerData.total_users -
-							selectedReferrerData.completed_users,
-						dropoff_rate: 100 - selectedReferrerData.conversion_rate,
-						avg_time_to_complete: 0,
-					},
-				],
+				steps_analytics: data?.steps_analytics?.map((step, index) => ({
+					...step,
+					users: index === 0 
+						? selectedReferrerData.total_users 
+						: selectedReferrerData.completed_users,
+					total_users: selectedReferrerData.total_users,
+					conversion_rate: index === 0 
+						? 100 
+						: selectedReferrerData.conversion_rate,
+					dropoffs: index === 0 
+						? 0 
+						: selectedReferrerData.total_users - selectedReferrerData.completed_users,
+					dropoff_rate: index === 0 
+						? 0 
+						: 100 - selectedReferrerData.conversion_rate,
+					avg_time_to_complete: 0,
+				})) || [],
 			}
 		: data;
 

packages/rpc/src/lib/analytics-utils.ts

@@ -132,15 +132,35 @@ const buildStepQuery = (
 	const referrerSelectCustom = includeReferrer ? ", '' as referrer" : '';
 
 	return `
+		WITH filtered_sessions AS (
+			SELECT DISTINCT session_id
+			FROM analytics.events
+			WHERE client_id = {websiteId:String}
+				AND time >= parseDateTimeBestEffort({startDate:String})
+				AND time <= parseDateTimeBestEffort({endDate:String})
+				AND event_name = {${targetKey}:String}${filterConditions}
+		),
+		session_referrers AS (
+			SELECT 
+				session_id,
+				argMin(referrer, time) as session_referrer
+			FROM analytics.events
+			WHERE client_id = {websiteId:String}
+				AND time >= parseDateTimeBestEffort({startDate:String})
+				AND time <= parseDateTimeBestEffort({endDate:String})
+				AND event_name = 'screen_view'
+				AND referrer != ''
+			GROUP BY session_id
+		)
 		SELECT 
 			${stepIndex + 1} as step_number,
 			{${stepNameKey}:String} as step_name,
 			session_id,
-			MIN(first_occurrence) as first_occurrence${referrerSelect}
+			MIN(first_occurrence) as first_occurrence${includeReferrer ? ', COALESCE(sr.session_referrer, \'\') as referrer' : ''}
 		FROM (
 			SELECT 
 				session_id,
-				time as first_occurrence${includeReferrer ? ', referrer' : ''}
+				time as first_occurrence
 			FROM analytics.events
 			WHERE client_id = {websiteId:String}
 				AND time >= parseDateTimeBestEffort({startDate:String})
@@ -150,15 +170,17 @@ const buildStepQuery = (
 			UNION ALL
 			
 			SELECT 
-				session_id,
-				timestamp as first_occurrence${referrerSelectCustom}
-			FROM analytics.custom_events
-			WHERE client_id = {websiteId:String}
-				AND timestamp >= parseDateTimeBestEffort({startDate:String})
-				AND timestamp <= parseDateTimeBestEffort({endDate:String})
-				AND event_name = {${targetKey}:String}
-		)
-		GROUP BY session_id`;
+				ce.session_id,
+				ce.timestamp as first_occurrence
+			FROM analytics.custom_events ce
+			INNER JOIN filtered_sessions fs ON ce.session_id = fs.session_id
+			WHERE ce.client_id = {websiteId:String}
+				AND ce.timestamp >= parseDateTimeBestEffort({startDate:String})
+				AND ce.timestamp <= parseDateTimeBestEffort({endDate:String})
+				AND ce.event_name = {${targetKey}:String}
+		)${includeReferrer ? `
+		LEFT JOIN session_referrers sr ON session_id = sr.session_id` : ''}
+		GROUP BY session_id${includeReferrer ? ', sr.session_referrer' : ''}`;
 };
 
 const processSessionEvents = (
@@ -220,7 +242,7 @@ const calculateStepCounts = (
 ): Map<number, Set<string>> => {
 	const stepCounts = new Map<number, Set<string>>();
 
-	for (const [sessionId, events] of sessionEvents) {
+	for (const [sessionId, events] of Array.from(sessionEvents.entries())) {
 		events.sort((a, b) => a.first_occurrence - b.first_occurrence);
 		let currentStep = 1;
 
@@ -674,7 +696,7 @@ const calculateReferrerStepCounts = (
 ): Map<number, Set<string>> => {
 	const stepCounts = new Map<number, Set<string>>();
 
-	for (const sessionId of group.sessionIds) {
+	for (const sessionId of Array.from(group.sessionIds)) {
 		const events = sessionEvents
 			.get(sessionId)
 			?.sort((a, b) => a.first_occurrence - b.first_occurrence);
@@ -863,7 +885,7 @@ export const processFunnelAnalyticsByReferrer = async (
 		}
 	>();
 
-	for (const [sessionId, events] of sessionEvents) {
+	for (const [sessionId, events] of Array.from(sessionEvents.entries())) {
 		if (events.length > 0) {
 			const referrer = events[0].referrer || 'Direct';
 			const parsed = parseReferrer(referrer);
@@ -878,7 +900,7 @@ export const processFunnelAnalyticsByReferrer = async (
 
 	const referrerAnalytics: ReferrerAnalytics[] = [];
 
-	for (const [groupKey, group] of referrerGroups) {
+	for (const [groupKey, group] of Array.from(referrerGroups.entries())) {
 		const analytics = processReferrerGroup(
 			groupKey,
 			group,