feat: time range in funnels

Author: izadoesdev

apps/dashboard/app/(main)/websites/[id]/_components/website-page-header.tsx

@@ -12,36 +12,28 @@ import { Card, CardContent } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
 
 interface WebsitePageHeaderProps {
-	// Basic page info
 	title: string;
 	description?: string;
 	icon: ReactNode;
 
-	// Website context
 	websiteId: string;
 	websiteName?: string;
 
-	// Loading states
 	isLoading?: boolean;
 	isRefreshing?: boolean;
 
-	// Error handling
 	hasError?: boolean;
 	errorMessage?: string;
 
-	// Actions
 	onRefresh?: () => void;
 	onCreateAction?: () => void;
 	createActionLabel?: string;
 
-	// Additional info
 	subtitle?: string | ReactNode;
 
-	// Layout options
 	showBackButton?: boolean;
 	variant?: 'default' | 'minimal';
 
-	// Custom actions
 	additionalActions?: ReactNode;
 }
 
@@ -127,7 +119,6 @@ export function WebsitePageHeader({
 
 	return (
 		<div className="space-y-6">
-			{/* Main Header */}
 			<div className="border-b pb-6">
 				<div className="flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
 					<div className="space-y-2">
@@ -180,7 +171,6 @@ export function WebsitePageHeader({
 				</div>
 			</div>
 
-			{/* Error State */}
 			{hasError && (
 				<Card className="rounded-xl border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950">
 					<CardContent className="pt-6">
@@ -216,7 +206,6 @@ export function WebsitePageHeader({
 	);
 }
 
-// Skeleton component for loading states
 export function WebsitePageHeaderSkeleton() {
 	return (
 		<div className="space-y-6">

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

@@ -1,9 +1,13 @@
 'use client';
 
 import { FunnelIcon, TrendDownIcon } from '@phosphor-icons/react';
+import { format, subDays, subHours } from 'date-fns';
 import { useAtom } from 'jotai';
 import { useParams } from 'next/navigation';
 import { lazy, Suspense, useCallback, useMemo, useRef, useState } from 'react';
+import type { DateRange as DayPickerRange } from 'react-day-picker';
+import { DateRangePicker } from '@/components/date-range-picker';
+import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import {
 	type CreateFunnelData,
@@ -13,8 +17,11 @@ import {
 	useFunnelAnalyticsByReferrer,
 	useFunnels,
 } from '@/hooks/use-funnels';
+import { trpc } from '@/lib/trpc';
 import {
+	dateRangeAtom,
 	formattedDateRangeAtom,
+	setDateRangeAndAdjustGranularityAtom,
 	timeGranularityAtom,
 } from '@/stores/jotai/filterAtoms';
 import { WebsitePageHeader } from '../_components/website-page-header';
@@ -93,9 +100,58 @@ export default function FunnelsPage() {
 	// Intersection observer for lazy loading
 	const pageRef = useRef<HTMLDivElement>(null);
 
+	// Date range state
+	const [currentDateRange] = useAtom(dateRangeAtom);
 	const [currentGranularity] = useAtom(timeGranularityAtom);
+	const [, setDateRangeAction] = useAtom(setDateRangeAndAdjustGranularityAtom);
 	const [formattedDateRangeState] = useAtom(formattedDateRangeAtom);
 
+	// Check tracking setup
+	const { data: trackingSetupData, isLoading: isTrackingSetupLoading } =
+		trpc.websites.isTrackingSetup.useQuery(
+			{ websiteId },
+			{ enabled: !!websiteId }
+		);
+
+	const isTrackingSetup = useMemo(() => {
+		if (isTrackingSetupLoading) {
+			return null;
+		}
+		return trackingSetupData?.tracking_setup ?? false;
+	}, [isTrackingSetupLoading, trackingSetupData?.tracking_setup]);
+
+	// Date picker helpers
+	const dayPickerSelectedRange: DayPickerRange | undefined = useMemo(
+		() => ({
+			from: currentDateRange.startDate,
+			to: currentDateRange.endDate,
+		}),
+		[currentDateRange]
+	);
+
+	const quickRanges = useMemo(
+		() => [
+			{ label: '24h', fullLabel: 'Last 24 hours', hours: 24 },
+			{ label: '7d', fullLabel: 'Last 7 days', days: 7 },
+			{ label: '30d', fullLabel: 'Last 30 days', days: 30 },
+			{ label: '90d', fullLabel: 'Last 90 days', days: 90 },
+			{ label: '180d', fullLabel: 'Last 180 days', days: 180 },
+			{ label: '365d', fullLabel: 'Last 365 days', days: 365 },
+		],
+		[]
+	);
+
+	const handleQuickRangeSelect = useCallback(
+		(range: (typeof quickRanges)[0]) => {
+			const now = new Date();
+			const start = range.hours
+				? subHours(now, range.hours)
+				: subDays(now, range.days || 7);
+			setDateRangeAction({ startDate: start, endDate: now });
+		},
+		[setDateRangeAction]
+	);
+
 	const memoizedDateRangeForTabs = useMemo(
 		() => ({
 			start_date: formattedDateRangeState.startDate,
@@ -277,6 +333,59 @@ export default function FunnelsPage() {
 				websiteId={websiteId}
 			/>
 
+			{/* Date Range Controls - Only show if tracking is set up */}
+			{isTrackingSetup && (
+				<div className="mt-3 flex flex-col gap-3 rounded-lg border bg-muted/30 p-2.5">
+					<div className="flex items-center gap-2 overflow-x-auto rounded-md border bg-background p-1 shadow-sm">
+						{quickRanges.map((range) => {
+							const now = new Date();
+							const start = range.hours
+								? subHours(now, range.hours)
+								: subDays(now, range.days || 7);
+							const dayPickerCurrentRange = dayPickerSelectedRange;
+							const isActive =
+								dayPickerCurrentRange?.from &&
+								dayPickerCurrentRange?.to &&
+								format(dayPickerCurrentRange.from, 'yyyy-MM-dd') ===
+									format(start, 'yyyy-MM-dd') &&
+								format(dayPickerCurrentRange.to, 'yyyy-MM-dd') ===
+									format(now, 'yyyy-MM-dd');
+
+							return (
+								<Button
+									className={`h-6 cursor-pointer touch-manipulation whitespace-nowrap px-2 text-xs sm:px-2.5 ${isActive ? 'shadow-sm' : 'text-muted-foreground hover:text-foreground'}`}
+									key={range.label}
+									onClick={() => handleQuickRangeSelect(range)}
+									size="sm"
+									title={range.fullLabel}
+									variant={isActive ? 'default' : 'ghost'}
+								>
+									<span className="sm:hidden">{range.label}</span>
+									<span className="hidden sm:inline">{range.fullLabel}</span>
+								</Button>
+							);
+						})}
+
+						<div className="ml-1 border-border/50 border-l pl-2 sm:pl-3">
+							<DateRangePicker
+								className="w-auto"
+								maxDate={new Date()}
+								minDate={new Date(2020, 0, 1)}
+								onChange={(range) => {
+									if (range?.from && range?.to) {
+										setDateRangeAction({
+											startDate: range.from,
+											endDate: range.to,
+										});
+									}
+								}}
+								value={dayPickerSelectedRange}
+							/>
+						</div>
+					</div>
+				</div>
+			)}
+
 			<Suspense fallback={<FunnelsListSkeleton />}>
 				<FunnelsList
 					expandedFunnelId={expandedFunnelId}