From 3f99bc81cca37c8825bdfe063c0daa577486f659 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 4 Feb 2026 21:49:23 +0100
Subject: [PATCH 01/12] feat: add button to navigate to Funnels page in
 SiteDashboardPage for improved user navigation

---
 app/sites/[id]/funnels/[funnelId]/page.tsx | 265 +++++++++++++++++++++
 app/sites/[id]/funnels/new/page.tsx        | 216 +++++++++++++++++
 app/sites/[id]/funnels/page.tsx            | 151 ++++++++++++
 app/sites/[id]/page.tsx                    |   6 +
 lib/api/funnels.ts                         |  74 ++++++
 5 files changed, 712 insertions(+)
 create mode 100644 app/sites/[id]/funnels/[funnelId]/page.tsx
 create mode 100644 app/sites/[id]/funnels/new/page.tsx
 create mode 100644 app/sites/[id]/funnels/page.tsx
 create mode 100644 lib/api/funnels.ts

diff --git a/app/sites/[id]/funnels/[funnelId]/page.tsx b/app/sites/[id]/funnels/[funnelId]/page.tsx
new file mode 100644
index 0000000..ba8da73
--- /dev/null
+++ b/app/sites/[id]/funnels/[funnelId]/page.tsx
@@ -0,0 +1,265 @@
+'use client'
+
+import { useAuth } from '@/lib/auth/context'
+import { useEffect, useState } from 'react'
+import { useParams, useRouter } from 'next/navigation'
+import { getFunnel, getFunnelStats, deleteFunnel, type Funnel, type FunnelStats } from '@/lib/api/funnels'
+import { toast, LoadingOverlay, Card, Select, DatePicker } from '@ciphera-net/ui'
+import Link from 'next/link'
+import { LuChevronLeft as ChevronLeftIcon, LuTrash as TrashIcon, LuEdit as EditIcon, LuArrowRight as ArrowRightIcon } from 'react-icons/lu'
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Cell
+} from 'recharts'
+import { getDateRange } from '@/lib/utils/format'
+
+export default function FunnelReportPage() {
+  const params = useParams()
+  const router = useRouter()
+  const siteId = params.id as string
+  const funnelId = params.funnelId as string
+
+  const [funnel, setFunnel] = useState<Funnel | null>(null)
+  const [stats, setStats] = useState<FunnelStats | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [dateRange, setDateRange] = useState(getDateRange(30))
+  const [isDatePickerOpen, setIsDatePickerOpen] = useState(false)
+
+  useEffect(() => {
+    loadData()
+  }, [siteId, funnelId, dateRange])
+
+  const loadData = async () => {
+    try {
+      setLoading(true)
+      const [funnelData, statsData] = await Promise.all([
+        getFunnel(siteId, funnelId),
+        getFunnelStats(siteId, funnelId, dateRange.start, dateRange.end)
+      ])
+      setFunnel(funnelData)
+      setStats(statsData)
+    } catch (error) {
+      toast.error('Failed to load funnel data')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleDelete = async () => {
+    if (!confirm('Are you sure you want to delete this funnel?')) return
+
+    try {
+      await deleteFunnel(siteId, funnelId)
+      toast.success('Funnel deleted')
+      router.push(`/sites/${siteId}/funnels`)
+    } catch (error) {
+      toast.error('Failed to delete funnel')
+    }
+  }
+
+  if (loading && !funnel) {
+    return <LoadingOverlay logoSrc="/pulse_icon_no_margins.png" title="Pulse" />
+  }
+
+  if (!funnel || !stats) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <p className="text-neutral-600 dark:text-neutral-400">Funnel not found</p>
+      </div>
+    )
+  }
+
+  const chartData = stats.steps.map(s => ({
+    name: s.step.name,
+    visitors: s.visitors,
+    dropoff: s.dropoff,
+    conversion: s.conversion
+  }))
+
+  return (
+    <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-8">
+      <div className="mb-8">
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center gap-4">
+            <Link 
+              href={`/sites/${siteId}/funnels`}
+              className="p-2 -ml-2 text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
+            >
+              <ChevronLeftIcon className="w-5 h-5" />
+            </Link>
+            <div>
+              <h1 className="text-2xl font-bold text-neutral-900 dark:text-white">
+                {funnel.name}
+              </h1>
+              {funnel.description && (
+                <p className="text-neutral-600 dark:text-neutral-400">
+                  {funnel.description}
+                </p>
+              )}
+            </div>
+          </div>
+          
+          <div className="flex items-center gap-2">
+            <Select
+              value={
+                dateRange.start === getDateRange(7).start 
+                ? '7' 
+                : dateRange.start === getDateRange(30).start 
+                ? '30' 
+                : 'custom'
+              }
+              onChange={(value) => {
+                if (value === '7') setDateRange(getDateRange(7))
+                else if (value === '30') setDateRange(getDateRange(30))
+                else if (value === 'custom') setIsDatePickerOpen(true)
+              }}
+              options={[
+                { value: '7', label: 'Last 7 days' },
+                { value: '30', label: 'Last 30 days' },
+                { value: 'custom', label: 'Custom' },
+              ]}
+            />
+            
+            <button
+              onClick={handleDelete}
+              className="p-2 text-neutral-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
+            >
+              <TrashIcon className="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+
+        {/* Chart */}
+        <Card className="p-6 mb-8">
+          <h3 className="text-lg font-medium text-neutral-900 dark:text-white mb-6">
+            Funnel Visualization
+          </h3>
+          <div className="h-[400px] w-full">
+            <ResponsiveContainer width="100%" height="100%">
+              <BarChart data={chartData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
+                <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#E5E5E5" />
+                <XAxis 
+                  dataKey="name" 
+                  stroke="#A3A3A3" 
+                  fontSize={12} 
+                  tickLine={false} 
+                  axisLine={false} 
+                />
+                <YAxis 
+                  stroke="#A3A3A3" 
+                  fontSize={12} 
+                  tickLine={false} 
+                  axisLine={false} 
+                />
+                <Tooltip 
+                  cursor={{ fill: 'transparent' }}
+                  content={({ active, payload, label }) => {
+                    if (active && payload && payload.length) {
+                      const data = payload[0].payload;
+                      return (
+                        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 p-3 rounded-lg shadow-lg">
+                          <p className="font-medium text-neutral-900 dark:text-white mb-1">{label}</p>
+                          <p className="text-brand-orange font-bold text-lg">
+                            {data.visitors.toLocaleString()} visitors
+                          </p>
+                          {data.dropoff > 0 && (
+                            <p className="text-red-500 text-sm">
+                              {Math.round(data.dropoff)}% drop-off
+                            </p>
+                          )}
+                          {data.conversion > 0 && (
+                            <p className="text-green-500 text-sm">
+                              {Math.round(data.conversion)}% conversion (overall)
+                            </p>
+                          )}
+                        </div>
+                      );
+                    }
+                    return null;
+                  }}
+                />
+                <Bar dataKey="visitors" radius={[4, 4, 0, 0]} barSize={60}>
+                  {chartData.map((entry, index) => (
+                    <Cell key={`cell-${index}`} fill="#FD5E0F" fillOpacity={1 - (index * 0.15)} />
+                  ))}
+                </Bar>
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
+        </Card>
+
+        {/* Detailed Stats Table */}
+        <Card className="overflow-hidden">
+          <div className="overflow-x-auto">
+            <table className="w-full text-left text-sm">
+              <thead className="bg-neutral-50 dark:bg-neutral-800/50 border-b border-neutral-200 dark:border-neutral-800">
+                <tr>
+                  <th className="px-6 py-4 font-medium text-neutral-500 uppercase tracking-wider">Step</th>
+                  <th className="px-6 py-4 font-medium text-neutral-500 uppercase tracking-wider text-right">Visitors</th>
+                  <th className="px-6 py-4 font-medium text-neutral-500 uppercase tracking-wider text-right">Drop-off</th>
+                  <th className="px-6 py-4 font-medium text-neutral-500 uppercase tracking-wider text-right">Conversion</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-neutral-200 dark:divide-neutral-800">
+                {stats.steps.map((step, i) => (
+                  <tr key={i} className="hover:bg-neutral-50 dark:hover:bg-neutral-800/30 transition-colors">
+                    <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">
+                          {i + 1}
+                        </span>
+                        <div>
+                          <p className="font-medium text-neutral-900 dark:text-white">{step.step.name}</p>
+                          <p className="text-neutral-500 text-xs font-mono mt-0.5">{step.step.value}</p>
+                        </div>
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 text-right">
+                      <span className="font-medium text-neutral-900 dark:text-white">
+                        {step.visitors.toLocaleString()}
+                      </span>
+                    </td>
+                    <td className="px-6 py-4 text-right">
+                      {i > 0 ? (
+                        <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                          step.dropoff > 50 
+                            ? 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'
+                            : 'bg-neutral-100 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-300'
+                        }`}>
+                          {Math.round(step.dropoff)}%
+                        </span>
+                      ) : (
+                        <span className="text-neutral-400">-</span>
+                      )}
+                    </td>
+                    <td className="px-6 py-4 text-right">
+                      <span className="text-green-600 dark:text-green-400 font-medium">
+                        {Math.round(step.conversion)}%
+                      </span>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </Card>
+      </div>
+
+      <DatePicker
+        isOpen={isDatePickerOpen}
+        onClose={() => setIsDatePickerOpen(false)}
+        onApply={(range) => {
+          setDateRange(range)
+          setIsDatePickerOpen(false)
+        }}
+        initialRange={dateRange}
+      />
+    </div>
+  )
+}
diff --git a/app/sites/[id]/funnels/new/page.tsx b/app/sites/[id]/funnels/new/page.tsx
new file mode 100644
index 0000000..e2c80c8
--- /dev/null
+++ b/app/sites/[id]/funnels/new/page.tsx
@@ -0,0 +1,216 @@
+'use client'
+
+import { useAuth } from '@/lib/auth/context'
+import { useState } from 'react'
+import { useParams, useRouter } from 'next/navigation'
+import { createFunnel, type CreateFunnelRequest, type FunnelStep } from '@/lib/api/funnels'
+import { toast, Card, Input, Button } from '@ciphera-net/ui'
+import Link from 'next/link'
+import { LuChevronLeft as ChevronLeftIcon, LuPlus as PlusIcon, LuTrash as TrashIcon, LuGripVertical as GripVerticalIcon } from 'react-icons/lu'
+
+export default function CreateFunnelPage() {
+  const params = useParams()
+  const router = useRouter()
+  const siteId = params.id as string
+
+  const [name, setName] = useState('')
+  const [description, setDescription] = useState('')
+  const [steps, setSteps] = useState<Omit<FunnelStep, 'order'>[]>([
+    { name: 'Step 1', value: '/', type: 'exact' },
+    { name: 'Step 2', value: '', type: 'exact' }
+  ])
+  const [saving, setSaving] = useState(false)
+
+  const handleAddStep = () => {
+    setSteps([...steps, { name: `Step ${steps.length + 1}`, value: '', type: 'exact' }])
+  }
+
+  const handleRemoveStep = (index: number) => {
+    if (steps.length <= 1) return
+    const newSteps = steps.filter((_, i) => i !== index)
+    setSteps(newSteps)
+  }
+
+  const handleUpdateStep = (index: number, field: keyof Omit<FunnelStep, 'order'>, value: string) => {
+    const newSteps = [...steps]
+    newSteps[index] = { ...newSteps[index], [field]: value }
+    setSteps(newSteps)
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    
+    if (!name.trim()) {
+      toast.error('Please enter a funnel name')
+      return
+    }
+
+    if (steps.some(s => !s.value.trim())) {
+      toast.error('Please enter a path for all steps')
+      return
+    }
+
+    try {
+      setSaving(true)
+      const funnelSteps = steps.map((s, i) => ({
+        ...s,
+        order: i + 1
+      }))
+
+      await createFunnel(siteId, {
+        name,
+        description,
+        steps: funnelSteps
+      })
+
+      toast.success('Funnel created')
+      router.push(`/sites/${siteId}/funnels`)
+    } catch (error) {
+      toast.error('Failed to create funnel')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div className="w-full max-w-3xl mx-auto px-4 sm:px-6 py-8">
+      <div className="mb-8">
+        <Link 
+          href={`/sites/${siteId}/funnels`}
+          className="inline-flex items-center gap-2 text-sm text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white mb-6 transition-colors"
+        >
+          <ChevronLeftIcon className="w-4 h-4" />
+          Back to Funnels
+        </Link>
+        
+        <h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-2">
+          Create New Funnel
+        </h1>
+        <p className="text-neutral-600 dark:text-neutral-400">
+          Define the steps users take to complete a goal.
+        </p>
+      </div>
+
+      <form onSubmit={handleSubmit}>
+        <Card className="p-6 mb-6">
+          <div className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
+                Funnel Name
+              </label>
+              <Input
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="e.g. Signup Flow"
+                required
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
+                Description (Optional)
+              </label>
+              <Input
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                placeholder="Tracks users from landing page to signup"
+              />
+            </div>
+          </div>
+        </Card>
+
+        <div className="space-y-4 mb-8">
+          <div className="flex items-center justify-between">
+            <h3 className="text-lg font-medium text-neutral-900 dark:text-white">
+              Funnel Steps
+            </h3>
+          </div>
+
+          {steps.map((step, index) => (
+            <Card key={index} className="p-4">
+              <div className="flex items-start gap-4">
+                <div className="mt-3 text-neutral-400">
+                  <div className="w-6 h-6 rounded-full bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center text-sm font-medium text-neutral-600 dark:text-neutral-400">
+                    {index + 1}
+                  </div>
+                </div>
+                
+                <div className="flex-1 grid gap-4 md:grid-cols-2">
+                  <div>
+                    <label className="block text-xs font-medium text-neutral-500 uppercase mb-1">
+                      Step Name
+                    </label>
+                    <Input
+                      value={step.name}
+                      onChange={(e) => handleUpdateStep(index, 'name', e.target.value)}
+                      placeholder="e.g. Landing Page"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-xs font-medium text-neutral-500 uppercase mb-1">
+                      Path / URL
+                    </label>
+                    <div className="flex gap-2">
+                      <select
+                        value={step.type}
+                        onChange={(e) => handleUpdateStep(index, 'type', e.target.value)}
+                        className="w-24 px-2 py-2 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-lg text-sm focus:ring-2 focus:ring-brand-orange/20 focus:border-brand-orange outline-none"
+                      >
+                        <option value="exact">Exact</option>
+                        <option value="contains">Contains</option>
+                        <option value="regex">Regex</option>
+                      </select>
+                      <Input
+                        value={step.value}
+                        onChange={(e) => handleUpdateStep(index, 'value', e.target.value)}
+                        placeholder={step.type === 'exact' ? '/pricing' : 'pricing'}
+                        className="flex-1"
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                <button
+                  type="button"
+                  onClick={() => handleRemoveStep(index)}
+                  disabled={steps.length <= 1}
+                  className={`mt-3 p-2 rounded-lg transition-colors ${
+                    steps.length <= 1 
+                      ? 'text-neutral-300 cursor-not-allowed' 
+                      : 'text-neutral-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20'
+                  }`}
+                >
+                  <TrashIcon className="w-5 h-5" />
+                </button>
+              </div>
+            </Card>
+          ))}
+
+          <button
+            type="button"
+            onClick={handleAddStep}
+            className="w-full py-3 border-2 border-dashed border-neutral-200 dark:border-neutral-800 rounded-xl text-neutral-500 hover:text-neutral-900 dark:hover:text-white hover:border-neutral-300 dark:hover:border-neutral-700 transition-colors flex items-center justify-center gap-2 font-medium"
+          >
+            <PlusIcon className="w-4 h-4" />
+            Add Step
+          </button>
+        </div>
+
+        <div className="flex justify-end gap-4">
+          <Link
+            href={`/sites/${siteId}/funnels`}
+            className="px-4 py-2 text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white font-medium"
+          >
+            Cancel
+          </Link>
+          <Button
+            type="submit"
+            disabled={saving}
+            className="bg-brand-orange hover:bg-brand-orange/90 text-white"
+          >
+            {saving ? 'Creating...' : 'Create Funnel'}
+          </Button>
+        </div>
+      </form>
+    </div>
+  )
+}
diff --git a/app/sites/[id]/funnels/page.tsx b/app/sites/[id]/funnels/page.tsx
new file mode 100644
index 0000000..d47dd50
--- /dev/null
+++ b/app/sites/[id]/funnels/page.tsx
@@ -0,0 +1,151 @@
+'use client'
+
+import { useAuth } from '@/lib/auth/context'
+import { useEffect, useState } from 'react'
+import { useParams, useRouter } from 'next/navigation'
+import { listFunnels, deleteFunnel, type Funnel } from '@/lib/api/funnels'
+import { toast, LoadingOverlay, Card } from '@ciphera-net/ui'
+import Link from 'next/link'
+import { LuPlus as PlusIcon, LuTrash as TrashIcon, LuArrowRight as ArrowRightIcon, LuChevronLeft as ChevronLeftIcon } from 'react-icons/lu'
+
+export default function FunnelsPage() {
+  const { user } = useAuth()
+  const params = useParams()
+  const router = useRouter()
+  const siteId = params.id as string
+
+  const [funnels, setFunnels] = useState<Funnel[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    loadFunnels()
+  }, [siteId])
+
+  const loadFunnels = async () => {
+    try {
+      setLoading(true)
+      const data = await listFunnels(siteId)
+      setFunnels(data)
+    } catch (error) {
+      toast.error('Failed to load funnels')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleDelete = async (e: React.MouseEvent, funnelId: string) => {
+    e.preventDefault() // Prevent navigation
+    if (!confirm('Are you sure you want to delete this funnel?')) return
+
+    try {
+      await deleteFunnel(siteId, funnelId)
+      toast.success('Funnel deleted')
+      loadFunnels()
+    } catch (error) {
+      toast.error('Failed to delete funnel')
+    }
+  }
+
+  if (loading) {
+    return <LoadingOverlay logoSrc="/pulse_icon_no_margins.png" title="Pulse" />
+  }
+
+  return (
+    <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-8">
+      <div className="mb-8">
+        <div className="flex items-center gap-4 mb-6">
+          <Link 
+            href={`/sites/${siteId}`}
+            className="p-2 -ml-2 text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
+          >
+            <ChevronLeftIcon className="w-5 h-5" />
+          </Link>
+          <div>
+            <h1 className="text-2xl font-bold text-neutral-900 dark:text-white">
+              Funnels
+            </h1>
+            <p className="text-neutral-600 dark:text-neutral-400">
+              Track user journeys and identify drop-off points
+            </p>
+          </div>
+          <div className="ml-auto">
+            <Link
+              href={`/sites/${siteId}/funnels/new`}
+              className="flex items-center gap-2 px-4 py-2 bg-brand-orange text-white rounded-lg hover:bg-brand-orange/90 transition-colors font-medium"
+            >
+              <PlusIcon className="w-4 h-4" />
+              <span>Create Funnel</span>
+            </Link>
+          </div>
+        </div>
+
+        {funnels.length === 0 ? (
+          <Card className="p-12 text-center">
+            <div className="w-16 h-16 mx-auto mb-4 bg-neutral-100 dark:bg-neutral-800 rounded-full flex items-center justify-center">
+              <ArrowRightIcon className="w-8 h-8 text-neutral-400" />
+            </div>
+            <h3 className="text-lg font-medium text-neutral-900 dark:text-white mb-2">
+              No funnels yet
+            </h3>
+            <p className="text-neutral-600 dark:text-neutral-400 mb-6 max-w-md mx-auto">
+              Create a funnel to track how users move through your site and where they drop off.
+            </p>
+            <Link
+              href={`/sites/${siteId}/funnels/new`}
+              className="inline-flex items-center gap-2 px-4 py-2 bg-brand-orange text-white rounded-lg hover:bg-brand-orange/90 transition-colors font-medium"
+            >
+              <PlusIcon className="w-4 h-4" />
+              <span>Create Funnel</span>
+            </Link>
+          </Card>
+        ) : (
+          <div className="grid gap-4">
+            {funnels.map((funnel) => (
+              <Link
+                key={funnel.id}
+                href={`/sites/${siteId}/funnels/${funnel.id}`}
+                className="block group"
+              >
+                <Card className="p-6 hover:border-brand-orange/50 transition-colors">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <h3 className="text-lg font-medium text-neutral-900 dark:text-white group-hover:text-brand-orange transition-colors">
+                        {funnel.name}
+                      </h3>
+                      {funnel.description && (
+                        <p className="text-sm text-neutral-600 dark:text-neutral-400 mt-1">
+                          {funnel.description}
+                        </p>
+                      )}
+                      <div className="flex items-center gap-2 mt-4">
+                        {funnel.steps.map((step, i) => (
+                          <div key={i} className="flex items-center text-sm text-neutral-500">
+                            <span className="px-2 py-1 bg-neutral-100 dark:bg-neutral-800 rounded text-neutral-700 dark:text-neutral-300">
+                              {step.name}
+                            </span>
+                            {i < funnel.steps.length - 1 && (
+                              <ArrowRightIcon className="w-4 h-4 mx-2 text-neutral-300" />
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-4">
+                      <button
+                        onClick={(e) => handleDelete(e, funnel.id)}
+                        className="p-2 text-neutral-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
+                      >
+                        <TrashIcon className="w-5 h-5" />
+                      </button>
+                      <ChevronLeftIcon className="w-5 h-5 text-neutral-300 rotate-180" />
+                    </div>
+                  </div>
+                </Card>
+              </Link>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/app/sites/[id]/page.tsx b/app/sites/[id]/page.tsx
index d3ffc9e..154a206 100644
--- a/app/sites/[id]/page.tsx
+++ b/app/sites/[id]/page.tsx
@@ -297,6 +297,12 @@ export default function SiteDashboardPage() {
                 { value: 'custom', label: 'Custom' },
               ]}
             />
+            <button
+              onClick={() => router.push(`/sites/${siteId}/funnels`)}
+              className="btn-secondary text-sm"
+            >
+              Funnels
+            </button>
             {canEdit && (
             <button
               onClick={() => router.push(`/sites/${siteId}/settings`)}
diff --git a/lib/api/funnels.ts b/lib/api/funnels.ts
new file mode 100644
index 0000000..de0e62e
--- /dev/null
+++ b/lib/api/funnels.ts
@@ -0,0 +1,74 @@
+import apiRequest from './client'
+
+export interface FunnelStep {
+  order: number
+  name: string
+  value: string
+  type: string // "exact", "contains", "regex"
+}
+
+export interface Funnel {
+  id: string
+  site_id: string
+  name: string
+  description: string
+  steps: FunnelStep[]
+  created_at: string
+  updated_at: string
+}
+
+export interface FunnelStepStats {
+  step: FunnelStep
+  visitors: number
+  dropoff: number
+  conversion: number
+}
+
+export interface FunnelStats {
+  funnel_id: string
+  steps: FunnelStepStats[]
+}
+
+export interface CreateFunnelRequest {
+  name: string
+  description: string
+  steps: FunnelStep[]
+}
+
+export async function listFunnels(siteId: string): Promise<Funnel[]> {
+  const response = await apiRequest<{ funnels: Funnel[] }>(`/sites/${siteId}/funnels`)
+  return response?.funnels || []
+}
+
+export async function getFunnel(siteId: string, funnelId: string): Promise<Funnel> {
+  return apiRequest<Funnel>(`/sites/${siteId}/funnels/${funnelId}`)
+}
+
+export async function createFunnel(siteId: string, data: CreateFunnelRequest): Promise<Funnel> {
+  return apiRequest<Funnel>(`/sites/${siteId}/funnels`, {
+    method: 'POST',
+    body: JSON.stringify(data),
+  })
+}
+
+export async function updateFunnel(siteId: string, funnelId: string, data: CreateFunnelRequest): Promise<Funnel> {
+  return apiRequest<Funnel>(`/sites/${siteId}/funnels/${funnelId}`, {
+    method: 'PUT',
+    body: JSON.stringify(data),
+  })
+}
+
+export async function deleteFunnel(siteId: string, funnelId: string): Promise<void> {
+  await apiRequest(`/sites/${siteId}/funnels/${funnelId}`, {
+    method: 'DELETE',
+  })
+}
+
+export async function getFunnelStats(siteId: string, funnelId: string, from?: string, to?: string): Promise<FunnelStats> {
+  const params = new URLSearchParams()
+  if (from) params.append('from', from)
+  if (to) params.append('to', to)
+  
+  const queryString = params.toString() ? `?${params.toString()}` : ''
+  return apiRequest<FunnelStats>(`/sites/${siteId}/funnels/${funnelId}/stats${queryString}`)
+}

From 5a8fe883dd9419b9c965879cd55eb90234ac59f4 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 4 Feb 2026 22:01:32 +0100
Subject: [PATCH 02/12] feat: upgrade @ciphera-net/ui to version 0.0.45 and
 refactor Funnel components to replace Card with div for improved styling
 consistency

---
 app/sites/[id]/funnels/[funnelId]/page.tsx | 11 +++++------
 app/sites/[id]/funnels/new/page.tsx        | 11 +++++------
 app/sites/[id]/funnels/page.tsx            | 11 +++++------
 package-lock.json                          |  8 ++++----
 package.json                               |  2 +-
 5 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/app/sites/[id]/funnels/[funnelId]/page.tsx b/app/sites/[id]/funnels/[funnelId]/page.tsx
index ba8da73..d3c2415 100644
--- a/app/sites/[id]/funnels/[funnelId]/page.tsx
+++ b/app/sites/[id]/funnels/[funnelId]/page.tsx
@@ -4,9 +4,8 @@ import { useAuth } from '@/lib/auth/context'
 import { useEffect, useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
 import { getFunnel, getFunnelStats, deleteFunnel, type Funnel, type FunnelStats } from '@/lib/api/funnels'
-import { toast, LoadingOverlay, Card, Select, DatePicker } from '@ciphera-net/ui'
+import { toast, LoadingOverlay, Select, DatePicker, ChevronLeftIcon, ArrowRightIcon, TrashIcon } from '@ciphera-net/ui'
 import Link from 'next/link'
-import { LuChevronLeft as ChevronLeftIcon, LuTrash as TrashIcon, LuEdit as EditIcon, LuArrowRight as ArrowRightIcon } from 'react-icons/lu'
 import {
   BarChart,
   Bar,
@@ -136,7 +135,7 @@ export default function FunnelReportPage() {
         </div>
 
         {/* Chart */}
-        <Card className="p-6 mb-8">
+        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6 mb-8">
           <h3 className="text-lg font-medium text-neutral-900 dark:text-white mb-6">
             Funnel Visualization
           </h3>
@@ -192,10 +191,10 @@ export default function FunnelReportPage() {
               </BarChart>
             </ResponsiveContainer>
           </div>
-        </Card>
+        </div>
 
         {/* Detailed Stats Table */}
-        <Card className="overflow-hidden">
+        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl overflow-hidden">
           <div className="overflow-x-auto">
             <table className="w-full text-left text-sm">
               <thead className="bg-neutral-50 dark:bg-neutral-800/50 border-b border-neutral-200 dark:border-neutral-800">
@@ -248,7 +247,7 @@ export default function FunnelReportPage() {
               </tbody>
             </table>
           </div>
-        </Card>
+        </div>
       </div>
 
       <DatePicker
diff --git a/app/sites/[id]/funnels/new/page.tsx b/app/sites/[id]/funnels/new/page.tsx
index e2c80c8..6b4991d 100644
--- a/app/sites/[id]/funnels/new/page.tsx
+++ b/app/sites/[id]/funnels/new/page.tsx
@@ -4,9 +4,8 @@ import { useAuth } from '@/lib/auth/context'
 import { useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
 import { createFunnel, type CreateFunnelRequest, type FunnelStep } from '@/lib/api/funnels'
-import { toast, Card, Input, Button } from '@ciphera-net/ui'
+import { toast, Input, Button, ChevronLeftIcon, PlusIcon, TrashIcon } from '@ciphera-net/ui'
 import Link from 'next/link'
-import { LuChevronLeft as ChevronLeftIcon, LuPlus as PlusIcon, LuTrash as TrashIcon, LuGripVertical as GripVerticalIcon } from 'react-icons/lu'
 
 export default function CreateFunnelPage() {
   const params = useParams()
@@ -92,7 +91,7 @@ export default function CreateFunnelPage() {
       </div>
 
       <form onSubmit={handleSubmit}>
-        <Card className="p-6 mb-6">
+        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6 mb-6">
           <div className="space-y-4">
             <div>
               <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
@@ -116,7 +115,7 @@ export default function CreateFunnelPage() {
               />
             </div>
           </div>
-        </Card>
+        </div>
 
         <div className="space-y-4 mb-8">
           <div className="flex items-center justify-between">
@@ -126,7 +125,7 @@ export default function CreateFunnelPage() {
           </div>
 
           {steps.map((step, index) => (
-            <Card key={index} className="p-4">
+            <div key={index} className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-4">
               <div className="flex items-start gap-4">
                 <div className="mt-3 text-neutral-400">
                   <div className="w-6 h-6 rounded-full bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center text-sm font-medium text-neutral-600 dark:text-neutral-400">
@@ -182,7 +181,7 @@ export default function CreateFunnelPage() {
                   <TrashIcon className="w-5 h-5" />
                 </button>
               </div>
-            </Card>
+            </div>
           ))}
 
           <button
diff --git a/app/sites/[id]/funnels/page.tsx b/app/sites/[id]/funnels/page.tsx
index d47dd50..a0681b1 100644
--- a/app/sites/[id]/funnels/page.tsx
+++ b/app/sites/[id]/funnels/page.tsx
@@ -4,9 +4,8 @@ import { useAuth } from '@/lib/auth/context'
 import { useEffect, useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
 import { listFunnels, deleteFunnel, type Funnel } from '@/lib/api/funnels'
-import { toast, LoadingOverlay, Card } from '@ciphera-net/ui'
+import { toast, LoadingOverlay, PlusIcon, ArrowRightIcon, ChevronLeftIcon, TrashIcon } from '@ciphera-net/ui'
 import Link from 'next/link'
-import { LuPlus as PlusIcon, LuTrash as TrashIcon, LuArrowRight as ArrowRightIcon, LuChevronLeft as ChevronLeftIcon } from 'react-icons/lu'
 
 export default function FunnelsPage() {
   const { user } = useAuth()
@@ -80,7 +79,7 @@ export default function FunnelsPage() {
         </div>
 
         {funnels.length === 0 ? (
-          <Card className="p-12 text-center">
+          <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-12 text-center">
             <div className="w-16 h-16 mx-auto mb-4 bg-neutral-100 dark:bg-neutral-800 rounded-full flex items-center justify-center">
               <ArrowRightIcon className="w-8 h-8 text-neutral-400" />
             </div>
@@ -97,7 +96,7 @@ export default function FunnelsPage() {
               <PlusIcon className="w-4 h-4" />
               <span>Create Funnel</span>
             </Link>
-          </Card>
+          </div>
         ) : (
           <div className="grid gap-4">
             {funnels.map((funnel) => (
@@ -106,7 +105,7 @@ export default function FunnelsPage() {
                 href={`/sites/${siteId}/funnels/${funnel.id}`}
                 className="block group"
               >
-                <Card className="p-6 hover:border-brand-orange/50 transition-colors">
+                <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6 hover:border-brand-orange/50 transition-colors">
                   <div className="flex items-center justify-between">
                     <div>
                       <h3 className="text-lg font-medium text-neutral-900 dark:text-white group-hover:text-brand-orange transition-colors">
@@ -140,7 +139,7 @@ export default function FunnelsPage() {
                       <ChevronLeftIcon className="w-5 h-5 text-neutral-300 rotate-180" />
                     </div>
                   </div>
-                </Card>
+                </div>
               </Link>
             ))}
           </div>
diff --git a/package-lock.json b/package-lock.json
index 8c5e6f9..cbca395 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "pulse-frontend",
       "version": "0.1.2",
       "dependencies": {
-        "@ciphera-net/ui": "^0.0.44",
+        "@ciphera-net/ui": "^0.0.45",
         "@ducanh2912/next-pwa": "^10.2.9",
         "axios": "^1.13.2",
         "country-flag-icons": "^1.6.4",
@@ -1467,9 +1467,9 @@
       }
     },
     "node_modules/@ciphera-net/ui": {
-      "version": "0.0.44",
-      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.0.44/a36bb829498560c7dc49e105e048fdc02e6735d9",
-      "integrity": "sha512-3dgHoVwnYqbKVKC7Dzjzm3sbPHoL+t3J58TC0XvH6S9OYBW1vC+nkF3Jxqq6pVoHOblpZ1/ZokL7hA6xZFeSIQ==",
+      "version": "0.0.45",
+      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.0.45/de60e0da8e1c78ea906d49fdc85cd7d7dd163348",
+      "integrity": "sha512-KvrNKb9NzLMztB75h94opaaUp9RG43QW7GCRcVX+xGT8EFmrXi/N2h2kpjHZV652H/Cz1EXfcDA0hzoq/+wJXA==",
       "dependencies": {
         "@radix-ui/react-icons": "^1.3.0",
         "clsx": "^2.1.0",
diff --git a/package.json b/package.json
index 73c0538..ff9b34f 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@ciphera-net/ui": "^0.0.44",
+    "@ciphera-net/ui": "^0.0.45",
     "@ducanh2912/next-pwa": "^10.2.9",
     "axios": "^1.13.2",
     "country-flag-icons": "^1.6.4",

From c98286c4e37ce1e84008eb7fa6d0af61be581f00 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 4 Feb 2026 22:27:55 +0100
Subject: [PATCH 03/12] feat: update button styles and enhance layout
 consistency across Funnels pages, including improved accessibility with
 aria-labels

---
 app/sites/[id]/funnels/[funnelId]/page.tsx | 11 ++++++-----
 app/sites/[id]/funnels/new/page.tsx        | 13 +++++++------
 app/sites/[id]/funnels/page.tsx            | 11 ++++++-----
 3 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/app/sites/[id]/funnels/[funnelId]/page.tsx b/app/sites/[id]/funnels/[funnelId]/page.tsx
index d3c2415..fa9d523 100644
--- a/app/sites/[id]/funnels/[funnelId]/page.tsx
+++ b/app/sites/[id]/funnels/[funnelId]/page.tsx
@@ -68,7 +68,7 @@ export default function FunnelReportPage() {
 
   if (!funnel || !stats) {
     return (
-      <div className="container mx-auto px-4 py-8">
+      <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-8">
         <p className="text-neutral-600 dark:text-neutral-400">Funnel not found</p>
       </div>
     )
@@ -88,7 +88,7 @@ export default function FunnelReportPage() {
           <div className="flex items-center gap-4">
             <Link 
               href={`/sites/${siteId}/funnels`}
-              className="p-2 -ml-2 text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
+              className="p-2 -ml-2 text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white rounded-xl hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
             >
               <ChevronLeftIcon className="w-5 h-5" />
             </Link>
@@ -127,7 +127,8 @@ export default function FunnelReportPage() {
             
             <button
               onClick={handleDelete}
-              className="p-2 text-neutral-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
+              className="p-2 text-neutral-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-xl transition-colors"
+              aria-label="Delete funnel"
             >
               <TrashIcon className="w-5 h-5" />
             </button>
@@ -136,7 +137,7 @@ export default function FunnelReportPage() {
 
         {/* Chart */}
         <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6 mb-8">
-          <h3 className="text-lg font-medium text-neutral-900 dark:text-white mb-6">
+          <h3 className="text-lg font-semibold text-neutral-900 dark:text-white mb-6">
             Funnel Visualization
           </h3>
           <div className="h-[400px] w-full">
@@ -162,7 +163,7 @@ export default function FunnelReportPage() {
                     if (active && payload && payload.length) {
                       const data = payload[0].payload;
                       return (
-                        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 p-3 rounded-lg shadow-lg">
+                        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 p-3 rounded-xl shadow-lg">
                           <p className="font-medium text-neutral-900 dark:text-white mb-1">{label}</p>
                           <p className="text-brand-orange font-bold text-lg">
                             {data.visitors.toLocaleString()} visitors
diff --git a/app/sites/[id]/funnels/new/page.tsx b/app/sites/[id]/funnels/new/page.tsx
index 6b4991d..6f90183 100644
--- a/app/sites/[id]/funnels/new/page.tsx
+++ b/app/sites/[id]/funnels/new/page.tsx
@@ -76,7 +76,7 @@ export default function CreateFunnelPage() {
       <div className="mb-8">
         <Link 
           href={`/sites/${siteId}/funnels`}
-          className="inline-flex items-center gap-2 text-sm text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white mb-6 transition-colors"
+          className="inline-flex items-center gap-2 text-sm text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white mb-6 rounded-xl hover:bg-neutral-100 dark:hover:bg-neutral-800 px-2 py-1.5 -ml-2 transition-colors"
         >
           <ChevronLeftIcon className="w-4 h-4" />
           Back to Funnels
@@ -119,7 +119,7 @@ export default function CreateFunnelPage() {
 
         <div className="space-y-4 mb-8">
           <div className="flex items-center justify-between">
-            <h3 className="text-lg font-medium text-neutral-900 dark:text-white">
+            <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
               Funnel Steps
             </h3>
           </div>
@@ -152,7 +152,7 @@ export default function CreateFunnelPage() {
                       <select
                         value={step.type}
                         onChange={(e) => handleUpdateStep(index, 'type', e.target.value)}
-                        className="w-24 px-2 py-2 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-lg text-sm focus:ring-2 focus:ring-brand-orange/20 focus:border-brand-orange outline-none"
+                        className="w-24 px-2 py-2 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl text-sm focus:ring-2 focus:ring-brand-orange/20 focus:border-brand-orange outline-none"
                       >
                         <option value="exact">Exact</option>
                         <option value="contains">Contains</option>
@@ -172,7 +172,8 @@ export default function CreateFunnelPage() {
                   type="button"
                   onClick={() => handleRemoveStep(index)}
                   disabled={steps.length <= 1}
-                  className={`mt-3 p-2 rounded-lg transition-colors ${
+                  aria-label="Remove step"
+                  className={`mt-3 p-2 rounded-xl transition-colors ${
                     steps.length <= 1 
                       ? 'text-neutral-300 cursor-not-allowed' 
                       : 'text-neutral-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20'
@@ -197,14 +198,14 @@ export default function CreateFunnelPage() {
         <div className="flex justify-end gap-4">
           <Link
             href={`/sites/${siteId}/funnels`}
-            className="px-4 py-2 text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white font-medium"
+            className="btn-secondary"
           >
             Cancel
           </Link>
           <Button
             type="submit"
             disabled={saving}
-            className="bg-brand-orange hover:bg-brand-orange/90 text-white"
+            className="btn-primary"
           >
             {saving ? 'Creating...' : 'Create Funnel'}
           </Button>
diff --git a/app/sites/[id]/funnels/page.tsx b/app/sites/[id]/funnels/page.tsx
index a0681b1..8d2017d 100644
--- a/app/sites/[id]/funnels/page.tsx
+++ b/app/sites/[id]/funnels/page.tsx
@@ -55,7 +55,7 @@ export default function FunnelsPage() {
         <div className="flex items-center gap-4 mb-6">
           <Link 
             href={`/sites/${siteId}`}
-            className="p-2 -ml-2 text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
+            className="p-2 -ml-2 text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white rounded-xl hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
           >
             <ChevronLeftIcon className="w-5 h-5" />
           </Link>
@@ -70,7 +70,7 @@ export default function FunnelsPage() {
           <div className="ml-auto">
             <Link
               href={`/sites/${siteId}/funnels/new`}
-              className="flex items-center gap-2 px-4 py-2 bg-brand-orange text-white rounded-lg hover:bg-brand-orange/90 transition-colors font-medium"
+              className="btn-primary inline-flex items-center gap-2"
             >
               <PlusIcon className="w-4 h-4" />
               <span>Create Funnel</span>
@@ -83,7 +83,7 @@ export default function FunnelsPage() {
             <div className="w-16 h-16 mx-auto mb-4 bg-neutral-100 dark:bg-neutral-800 rounded-full flex items-center justify-center">
               <ArrowRightIcon className="w-8 h-8 text-neutral-400" />
             </div>
-            <h3 className="text-lg font-medium text-neutral-900 dark:text-white mb-2">
+            <h3 className="text-lg font-semibold text-neutral-900 dark:text-white mb-2">
               No funnels yet
             </h3>
             <p className="text-neutral-600 dark:text-neutral-400 mb-6 max-w-md mx-auto">
@@ -91,7 +91,7 @@ export default function FunnelsPage() {
             </p>
             <Link
               href={`/sites/${siteId}/funnels/new`}
-              className="inline-flex items-center gap-2 px-4 py-2 bg-brand-orange text-white rounded-lg hover:bg-brand-orange/90 transition-colors font-medium"
+              className="btn-primary inline-flex items-center gap-2"
             >
               <PlusIcon className="w-4 h-4" />
               <span>Create Funnel</span>
@@ -132,7 +132,8 @@ export default function FunnelsPage() {
                     <div className="flex items-center gap-4">
                       <button
                         onClick={(e) => handleDelete(e, funnel.id)}
-                        className="p-2 text-neutral-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
+                        className="p-2 text-neutral-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-xl transition-colors"
+                        aria-label="Delete funnel"
                       >
                         <TrashIcon className="w-5 h-5" />
                       </button>

From 40dffcdb1e6399894a3e903d8bf474c39fef40c0 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 4 Feb 2026 22:36:19 +0100
Subject: [PATCH 04/12] feat: improve Funnel pages UI by updating styles for
 empty state and chart components, enhancing visual consistency and
 accessibility

---
 app/sites/[id]/funnels/[funnelId]/page.tsx | 43 ++++++++++++++++++----
 app/sites/[id]/funnels/page.tsx            |  6 +--
 2 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/app/sites/[id]/funnels/[funnelId]/page.tsx b/app/sites/[id]/funnels/[funnelId]/page.tsx
index fa9d523..ac8084d 100644
--- a/app/sites/[id]/funnels/[funnelId]/page.tsx
+++ b/app/sites/[id]/funnels/[funnelId]/page.tsx
@@ -4,8 +4,9 @@ import { useAuth } from '@/lib/auth/context'
 import { useEffect, useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
 import { getFunnel, getFunnelStats, deleteFunnel, type Funnel, type FunnelStats } from '@/lib/api/funnels'
-import { toast, LoadingOverlay, Select, DatePicker, ChevronLeftIcon, ArrowRightIcon, TrashIcon } from '@ciphera-net/ui'
+import { toast, LoadingOverlay, Select, DatePicker, ChevronLeftIcon, ArrowRightIcon, TrashIcon, useTheme } from '@ciphera-net/ui'
 import Link from 'next/link'
+import { useMemo } from 'react'
 import {
   BarChart,
   Bar,
@@ -18,6 +19,22 @@ import {
 } from 'recharts'
 import { getDateRange } from '@/lib/utils/format'
 
+const CHART_COLORS_LIGHT = {
+  border: '#E5E5E5',
+  axis: '#A3A3A3',
+  tooltipBg: '#ffffff',
+  tooltipBorder: '#E5E5E5',
+}
+
+const CHART_COLORS_DARK = {
+  border: '#404040',
+  axis: '#737373',
+  tooltipBg: '#262626',
+  tooltipBorder: '#404040',
+}
+
+const BRAND_ORANGE = '#FD5E0F'
+
 export default function FunnelReportPage() {
   const params = useParams()
   const router = useRouter()
@@ -81,6 +98,12 @@ export default function FunnelReportPage() {
     conversion: s.conversion
   }))
 
+  const { resolvedTheme } = useTheme()
+  const chartColors = useMemo(
+    () => (resolvedTheme === 'dark' ? CHART_COLORS_DARK : CHART_COLORS_LIGHT),
+    [resolvedTheme]
+  )
+
   return (
     <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-8">
       <div className="mb-8">
@@ -136,23 +159,23 @@ export default function FunnelReportPage() {
         </div>
 
         {/* Chart */}
-        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6 mb-8">
+        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl overflow-hidden shadow-sm p-6 mb-8">
           <h3 className="text-lg font-semibold text-neutral-900 dark:text-white mb-6">
             Funnel Visualization
           </h3>
           <div className="h-[400px] w-full">
             <ResponsiveContainer width="100%" height="100%">
               <BarChart data={chartData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
-                <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#E5E5E5" />
+                <CartesianGrid strokeDasharray="3 3" vertical={false} stroke={chartColors.border} />
                 <XAxis 
                   dataKey="name" 
-                  stroke="#A3A3A3" 
+                  stroke={chartColors.axis} 
                   fontSize={12} 
                   tickLine={false} 
                   axisLine={false} 
                 />
                 <YAxis 
-                  stroke="#A3A3A3" 
+                  stroke={chartColors.axis} 
                   fontSize={12} 
                   tickLine={false} 
                   axisLine={false} 
@@ -163,7 +186,13 @@ export default function FunnelReportPage() {
                     if (active && payload && payload.length) {
                       const data = payload[0].payload;
                       return (
-                        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 p-3 rounded-xl shadow-lg">
+                        <div
+                          className="p-3 rounded-xl shadow-lg border"
+                          style={{
+                            backgroundColor: chartColors.tooltipBg,
+                            borderColor: chartColors.tooltipBorder,
+                          }}
+                        >
                           <p className="font-medium text-neutral-900 dark:text-white mb-1">{label}</p>
                           <p className="text-brand-orange font-bold text-lg">
                             {data.visitors.toLocaleString()} visitors
@@ -186,7 +215,7 @@ export default function FunnelReportPage() {
                 />
                 <Bar dataKey="visitors" radius={[4, 4, 0, 0]} barSize={60}>
                   {chartData.map((entry, index) => (
-                    <Cell key={`cell-${index}`} fill="#FD5E0F" fillOpacity={1 - (index * 0.15)} />
+                    <Cell key={`cell-${index}`} fill={BRAND_ORANGE} fillOpacity={1 - (index * 0.15)} />
                   ))}
                 </Bar>
               </BarChart>
diff --git a/app/sites/[id]/funnels/page.tsx b/app/sites/[id]/funnels/page.tsx
index 8d2017d..73133b8 100644
--- a/app/sites/[id]/funnels/page.tsx
+++ b/app/sites/[id]/funnels/page.tsx
@@ -80,8 +80,8 @@ export default function FunnelsPage() {
 
         {funnels.length === 0 ? (
           <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-12 text-center">
-            <div className="w-16 h-16 mx-auto mb-4 bg-neutral-100 dark:bg-neutral-800 rounded-full flex items-center justify-center">
-              <ArrowRightIcon className="w-8 h-8 text-neutral-400" />
+            <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4 mx-auto mb-4 w-fit">
+              <ArrowRightIcon className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
             </div>
             <h3 className="text-lg font-semibold text-neutral-900 dark:text-white mb-2">
               No funnels yet
@@ -119,7 +119,7 @@ export default function FunnelsPage() {
                       <div className="flex items-center gap-2 mt-4">
                         {funnel.steps.map((step, i) => (
                           <div key={i} className="flex items-center text-sm text-neutral-500">
-                            <span className="px-2 py-1 bg-neutral-100 dark:bg-neutral-800 rounded text-neutral-700 dark:text-neutral-300">
+                            <span className="px-2 py-1 bg-neutral-100 dark:bg-neutral-800 rounded-lg text-neutral-700 dark:text-neutral-300">
                               {step.name}
                             </span>
                             {i < funnel.steps.length - 1 && (

From 252b023f0d3880a784687cb4548edf578944a2c2 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 4 Feb 2026 22:41:48 +0100
Subject: [PATCH 05/12] fix: refactor FunnelReportPage to optimize theme
 handling by moving chart color logic into useMemo, improving performance and
 code clarity

---
 app/sites/[id]/funnels/[funnelId]/page.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/sites/[id]/funnels/[funnelId]/page.tsx b/app/sites/[id]/funnels/[funnelId]/page.tsx
index ac8084d..d5bedac 100644
--- a/app/sites/[id]/funnels/[funnelId]/page.tsx
+++ b/app/sites/[id]/funnels/[funnelId]/page.tsx
@@ -51,6 +51,12 @@ export default function FunnelReportPage() {
     loadData()
   }, [siteId, funnelId, dateRange])
 
+  const { resolvedTheme } = useTheme()
+  const chartColors = useMemo(
+    () => (resolvedTheme === 'dark' ? CHART_COLORS_DARK : CHART_COLORS_LIGHT),
+    [resolvedTheme]
+  )
+
   const loadData = async () => {
     try {
       setLoading(true)
@@ -98,12 +104,6 @@ export default function FunnelReportPage() {
     conversion: s.conversion
   }))
 
-  const { resolvedTheme } = useTheme()
-  const chartColors = useMemo(
-    () => (resolvedTheme === 'dark' ? CHART_COLORS_DARK : CHART_COLORS_LIGHT),
-    [resolvedTheme]
-  )
-
   return (
     <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-8">
       <div className="mb-8">

From 8bbe508657218726f446e797a4f9d2757ec7eac4 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 4 Feb 2026 23:17:17 +0100
Subject: [PATCH 06/12] refactor: streamline data loading in FunnelsPage and
 FunnelReportPage by reintroducing useEffect hooks for improved state
 management and responsiveness

---
 app/sites/[id]/funnels/[funnelId]/page.tsx | 20 ++++++++++----------
 app/sites/[id]/funnels/page.tsx            |  8 ++++----
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/app/sites/[id]/funnels/[funnelId]/page.tsx b/app/sites/[id]/funnels/[funnelId]/page.tsx
index d5bedac..5574fd7 100644
--- a/app/sites/[id]/funnels/[funnelId]/page.tsx
+++ b/app/sites/[id]/funnels/[funnelId]/page.tsx
@@ -47,16 +47,6 @@ export default function FunnelReportPage() {
   const [dateRange, setDateRange] = useState(getDateRange(30))
   const [isDatePickerOpen, setIsDatePickerOpen] = useState(false)
 
-  useEffect(() => {
-    loadData()
-  }, [siteId, funnelId, dateRange])
-
-  const { resolvedTheme } = useTheme()
-  const chartColors = useMemo(
-    () => (resolvedTheme === 'dark' ? CHART_COLORS_DARK : CHART_COLORS_LIGHT),
-    [resolvedTheme]
-  )
-
   const loadData = async () => {
     try {
       setLoading(true)
@@ -73,6 +63,16 @@ export default function FunnelReportPage() {
     }
   }
 
+  useEffect(() => {
+    loadData()
+  }, [siteId, funnelId, dateRange])
+
+  const { resolvedTheme } = useTheme()
+  const chartColors = useMemo(
+    () => (resolvedTheme === 'dark' ? CHART_COLORS_DARK : CHART_COLORS_LIGHT),
+    [resolvedTheme]
+  )
+
   const handleDelete = async () => {
     if (!confirm('Are you sure you want to delete this funnel?')) return
 
diff --git a/app/sites/[id]/funnels/page.tsx b/app/sites/[id]/funnels/page.tsx
index 73133b8..448a826 100644
--- a/app/sites/[id]/funnels/page.tsx
+++ b/app/sites/[id]/funnels/page.tsx
@@ -16,10 +16,6 @@ export default function FunnelsPage() {
   const [funnels, setFunnels] = useState<Funnel[]>([])
   const [loading, setLoading] = useState(true)
 
-  useEffect(() => {
-    loadFunnels()
-  }, [siteId])
-
   const loadFunnels = async () => {
     try {
       setLoading(true)
@@ -32,6 +28,10 @@ export default function FunnelsPage() {
     }
   }
 
+  useEffect(() => {
+    loadFunnels()
+  }, [siteId])
+
   const handleDelete = async (e: React.MouseEvent, funnelId: string) => {
     e.preventDefault() // Prevent navigation
     if (!confirm('Are you sure you want to delete this funnel?')) return

From 45577d5cfadfeeee3e0aebaf26b3dfc9a3c13150 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 4 Feb 2026 23:29:32 +0100
Subject: [PATCH 07/12] refactor: optimize data loading in FunnelsPage and
 FunnelReportPage by utilizing useCallback for improved performance and
 dependency management

---
 app/sites/[id]/funnels/[funnelId]/page.tsx | 34 +++++++++++-----------
 app/sites/[id]/funnels/new/page.tsx        |  1 -
 app/sites/[id]/funnels/page.tsx            | 10 +++----
 3 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/app/sites/[id]/funnels/[funnelId]/page.tsx b/app/sites/[id]/funnels/[funnelId]/page.tsx
index 5574fd7..ac1b729 100644
--- a/app/sites/[id]/funnels/[funnelId]/page.tsx
+++ b/app/sites/[id]/funnels/[funnelId]/page.tsx
@@ -1,12 +1,10 @@
 'use client'
 
-import { useAuth } from '@/lib/auth/context'
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
 import { getFunnel, getFunnelStats, deleteFunnel, type Funnel, type FunnelStats } from '@/lib/api/funnels'
 import { toast, LoadingOverlay, Select, DatePicker, ChevronLeftIcon, ArrowRightIcon, TrashIcon, useTheme } from '@ciphera-net/ui'
 import Link from 'next/link'
-import { useMemo } from 'react'
 import {
   BarChart,
   Bar,
@@ -45,9 +43,10 @@ export default function FunnelReportPage() {
   const [stats, setStats] = useState<FunnelStats | null>(null)
   const [loading, setLoading] = useState(true)
   const [dateRange, setDateRange] = useState(getDateRange(30))
+  const [datePreset, setDatePreset] = useState<'7' | '30' | 'custom'>('30')
   const [isDatePickerOpen, setIsDatePickerOpen] = useState(false)
 
-  const loadData = async () => {
+  const loadData = useCallback(async () => {
     try {
       setLoading(true)
       const [funnelData, statsData] = await Promise.all([
@@ -61,11 +60,11 @@ export default function FunnelReportPage() {
     } finally {
       setLoading(false)
     }
-  }
+  }, [siteId, funnelId, dateRange])
 
   useEffect(() => {
     loadData()
-  }, [siteId, funnelId, dateRange])
+  }, [loadData])
 
   const { resolvedTheme } = useTheme()
   const chartColors = useMemo(
@@ -129,17 +128,17 @@ export default function FunnelReportPage() {
           
           <div className="flex items-center gap-2">
             <Select
-              value={
-                dateRange.start === getDateRange(7).start 
-                ? '7' 
-                : dateRange.start === getDateRange(30).start 
-                ? '30' 
-                : 'custom'
-              }
+              value={datePreset}
               onChange={(value) => {
-                if (value === '7') setDateRange(getDateRange(7))
-                else if (value === '30') setDateRange(getDateRange(30))
-                else if (value === 'custom') setIsDatePickerOpen(true)
+                if (value === '7') {
+                  setDateRange(getDateRange(7))
+                  setDatePreset('7')
+                } else if (value === '30') {
+                  setDateRange(getDateRange(30))
+                  setDatePreset('30')
+                } else if (value === 'custom') {
+                  setIsDatePickerOpen(true)
+                }
               }}
               options={[
                 { value: '7', label: 'Last 7 days' },
@@ -215,7 +214,7 @@ export default function FunnelReportPage() {
                 />
                 <Bar dataKey="visitors" radius={[4, 4, 0, 0]} barSize={60}>
                   {chartData.map((entry, index) => (
-                    <Cell key={`cell-${index}`} fill={BRAND_ORANGE} fillOpacity={1 - (index * 0.15)} />
+                    <Cell key={`cell-${index}`} fill={BRAND_ORANGE} fillOpacity={Math.max(0.1, 1 - index * 0.15)} />
                   ))}
                 </Bar>
               </BarChart>
@@ -285,6 +284,7 @@ export default function FunnelReportPage() {
         onClose={() => setIsDatePickerOpen(false)}
         onApply={(range) => {
           setDateRange(range)
+          setDatePreset('custom')
           setIsDatePickerOpen(false)
         }}
         initialRange={dateRange}
diff --git a/app/sites/[id]/funnels/new/page.tsx b/app/sites/[id]/funnels/new/page.tsx
index 6f90183..a0d1ec5 100644
--- a/app/sites/[id]/funnels/new/page.tsx
+++ b/app/sites/[id]/funnels/new/page.tsx
@@ -1,6 +1,5 @@
 'use client'
 
-import { useAuth } from '@/lib/auth/context'
 import { useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
 import { createFunnel, type CreateFunnelRequest, type FunnelStep } from '@/lib/api/funnels'
diff --git a/app/sites/[id]/funnels/page.tsx b/app/sites/[id]/funnels/page.tsx
index 448a826..b799d94 100644
--- a/app/sites/[id]/funnels/page.tsx
+++ b/app/sites/[id]/funnels/page.tsx
@@ -1,14 +1,12 @@
 'use client'
 
-import { useAuth } from '@/lib/auth/context'
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
 import { listFunnels, deleteFunnel, type Funnel } from '@/lib/api/funnels'
 import { toast, LoadingOverlay, PlusIcon, ArrowRightIcon, ChevronLeftIcon, TrashIcon } from '@ciphera-net/ui'
 import Link from 'next/link'
 
 export default function FunnelsPage() {
-  const { user } = useAuth()
   const params = useParams()
   const router = useRouter()
   const siteId = params.id as string
@@ -16,7 +14,7 @@ export default function FunnelsPage() {
   const [funnels, setFunnels] = useState<Funnel[]>([])
   const [loading, setLoading] = useState(true)
 
-  const loadFunnels = async () => {
+  const loadFunnels = useCallback(async () => {
     try {
       setLoading(true)
       const data = await listFunnels(siteId)
@@ -26,11 +24,11 @@ export default function FunnelsPage() {
     } finally {
       setLoading(false)
     }
-  }
+  }, [siteId])
 
   useEffect(() => {
     loadFunnels()
-  }, [siteId])
+  }, [loadFunnels])
 
   const handleDelete = async (e: React.MouseEvent, funnelId: string) => {
     e.preventDefault() // Prevent navigation

From c37c66cbf3af54d2133df01e58b30f268e65c011 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 4 Feb 2026 23:41:31 +0100
Subject: [PATCH 08/12] feat: enhance funnel stats API by normalizing date
 inputs to RFC3339 format, improving query consistency and accuracy

---
 lib/api/funnels.ts | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/lib/api/funnels.ts b/lib/api/funnels.ts
index de0e62e..ad5fde7 100644
--- a/lib/api/funnels.ts
+++ b/lib/api/funnels.ts
@@ -64,11 +64,27 @@ export async function deleteFunnel(siteId: string, funnelId: string): Promise<vo
   })
 }
 
+const DATE_ONLY_REGEX = /^\d{4}-\d{2}-\d{2}$/
+
+/** Normalize date-only (YYYY-MM-DD) to RFC3339 for backend funnel stats API. */
+function toRFC3339Range(from: string, to: string): { from: string; to: string } {
+  return {
+    from: DATE_ONLY_REGEX.test(from) ? `${from}T00:00:00.000Z` : from,
+    to: DATE_ONLY_REGEX.test(to) ? `${to}T23:59:59.999Z` : to,
+  }
+}
+
 export async function getFunnelStats(siteId: string, funnelId: string, from?: string, to?: string): Promise<FunnelStats> {
   const params = new URLSearchParams()
-  if (from) params.append('from', from)
-  if (to) params.append('to', to)
-  
+  if (from && to) {
+    const { from: fromRfc, to: toRfc } = toRFC3339Range(from, to)
+    params.append('from', fromRfc)
+    params.append('to', toRfc)
+  } else if (from) {
+    params.append('from', DATE_ONLY_REGEX.test(from) ? `${from}T00:00:00.000Z` : from)
+  } else if (to) {
+    params.append('to', DATE_ONLY_REGEX.test(to) ? `${to}T23:59:59.999Z` : to)
+  }
   const queryString = params.toString() ? `?${params.toString()}` : ''
   return apiRequest<FunnelStats>(`/sites/${siteId}/funnels/${funnelId}/stats${queryString}`)
 }

From 002fe50d9afb4319758dcc6f473a4f161cd5224e Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 4 Feb 2026 23:48:06 +0100
Subject: [PATCH 09/12] feat: add regex validation for funnel steps and improve
 error handling in CreateFunnelPage

---
 app/sites/[id]/funnels/new/page.tsx | 14 ++++++++++++++
 lib/api/funnels.ts                  |  2 +-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/app/sites/[id]/funnels/new/page.tsx b/app/sites/[id]/funnels/new/page.tsx
index a0d1ec5..c4e9990 100644
--- a/app/sites/[id]/funnels/new/page.tsx
+++ b/app/sites/[id]/funnels/new/page.tsx
@@ -6,6 +6,15 @@ import { createFunnel, type CreateFunnelRequest, type FunnelStep } from '@/lib/a
 import { toast, Input, Button, ChevronLeftIcon, PlusIcon, TrashIcon } from '@ciphera-net/ui'
 import Link from 'next/link'
 
+function isValidRegex(pattern: string): boolean {
+  try {
+    new RegExp(pattern)
+    return true
+  } catch {
+    return false
+  }
+}
+
 export default function CreateFunnelPage() {
   const params = useParams()
   const router = useRouter()
@@ -13,6 +22,7 @@ export default function CreateFunnelPage() {
 
   const [name, setName] = useState('')
   const [description, setDescription] = useState('')
+  // * Backend requires at least one step (API binding min=1, DB rejects empty steps)
   const [steps, setSteps] = useState<Omit<FunnelStep, 'order'>[]>([
     { name: 'Step 1', value: '/', type: 'exact' },
     { name: 'Step 2', value: '', type: 'exact' }
@@ -47,6 +57,10 @@ export default function CreateFunnelPage() {
       toast.error('Please enter a path for all steps')
       return
     }
+    if (steps.some(s => s.type === 'regex' && !isValidRegex(s.value))) {
+      toast.error('Invalid regex in one or more steps. Check the pattern for steps with type "regex".')
+      return
+    }
 
     try {
       setSaving(true)
diff --git a/lib/api/funnels.ts b/lib/api/funnels.ts
index ad5fde7..d28eb6b 100644
--- a/lib/api/funnels.ts
+++ b/lib/api/funnels.ts
@@ -66,7 +66,7 @@ export async function deleteFunnel(siteId: string, funnelId: string): Promise<vo
 
 const DATE_ONLY_REGEX = /^\d{4}-\d{2}-\d{2}$/
 
-/** Normalize date-only (YYYY-MM-DD) to RFC3339 for backend funnel stats API. */
+/** Normalize date-only (YYYY-MM-DD) to RFC3339 for backend funnel stats API. Uses UTC for boundaries (API/server timestamps are UTC). */
 function toRFC3339Range(from: string, to: string): { from: string; to: string } {
   return {
     from: DATE_ONLY_REGEX.test(from) ? `${from}T00:00:00.000Z` : from,

From 0c09c5b97eadbec6c21005f7e2e0fec40337e052 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 4 Feb 2026 23:54:44 +0100
Subject: [PATCH 10/12] fix: improve regex error handling in CreateFunnelPage
 by providing specific step names in error messages

---
 app/sites/[id]/funnels/new/page.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/sites/[id]/funnels/new/page.tsx b/app/sites/[id]/funnels/new/page.tsx
index c4e9990..30aa77b 100644
--- a/app/sites/[id]/funnels/new/page.tsx
+++ b/app/sites/[id]/funnels/new/page.tsx
@@ -57,8 +57,9 @@ export default function CreateFunnelPage() {
       toast.error('Please enter a path for all steps')
       return
     }
-    if (steps.some(s => s.type === 'regex' && !isValidRegex(s.value))) {
-      toast.error('Invalid regex in one or more steps. Check the pattern for steps with type "regex".')
+    const invalidRegexStep = steps.find(s => s.type === 'regex' && !isValidRegex(s.value))
+    if (invalidRegexStep) {
+      toast.error(`Invalid regex pattern in step: ${invalidRegexStep.name}`)
       return
     }
 

From ceb668890b370b555d224970c2afda1adf4ac4ba Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 5 Feb 2026 00:04:44 +0100
Subject: [PATCH 11/12] feat: enhance error handling in FunnelReportPage by
 adding specific messages for not found and general load errors, improving
 user feedback and experience

---
 app/sites/[id]/funnels/[funnelId]/page.tsx | 26 +++++++++++++++++++++-
 app/sites/[id]/funnels/new/page.tsx        |  5 +++++
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/app/sites/[id]/funnels/[funnelId]/page.tsx b/app/sites/[id]/funnels/[funnelId]/page.tsx
index ac1b729..ddbec35 100644
--- a/app/sites/[id]/funnels/[funnelId]/page.tsx
+++ b/app/sites/[id]/funnels/[funnelId]/page.tsx
@@ -2,6 +2,7 @@
 
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
+import { ApiError } from '@/lib/api/client'
 import { getFunnel, getFunnelStats, deleteFunnel, type Funnel, type FunnelStats } from '@/lib/api/funnels'
 import { toast, LoadingOverlay, Select, DatePicker, ChevronLeftIcon, ArrowRightIcon, TrashIcon, useTheme } from '@ciphera-net/ui'
 import Link from 'next/link'
@@ -45,8 +46,10 @@ export default function FunnelReportPage() {
   const [dateRange, setDateRange] = useState(getDateRange(30))
   const [datePreset, setDatePreset] = useState<'7' | '30' | 'custom'>('30')
   const [isDatePickerOpen, setIsDatePickerOpen] = useState(false)
+  const [loadError, setLoadError] = useState<'not_found' | 'error' | null>(null)
 
   const loadData = useCallback(async () => {
+    setLoadError(null)
     try {
       setLoading(true)
       const [funnelData, statsData] = await Promise.all([
@@ -56,7 +59,9 @@ export default function FunnelReportPage() {
       setFunnel(funnelData)
       setStats(statsData)
     } catch (error) {
-      toast.error('Failed to load funnel data')
+      const is404 = error instanceof ApiError && error.status === 404
+      setLoadError(is404 ? 'not_found' : 'error')
+      if (!is404) toast.error('Failed to load funnel data')
     } finally {
       setLoading(false)
     }
@@ -88,6 +93,25 @@ export default function FunnelReportPage() {
     return <LoadingOverlay logoSrc="/pulse_icon_no_margins.png" title="Pulse" />
   }
 
+  if (loadError === 'not_found' || (!funnel && !stats && !loadError)) {
+    return (
+      <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-8">
+        <p className="text-neutral-600 dark:text-neutral-400">Funnel not found</p>
+      </div>
+    )
+  }
+
+  if (loadError === 'error') {
+    return (
+      <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-8">
+        <p className="text-neutral-600 dark:text-neutral-400 mb-4">Failed to load funnel data</p>
+        <button type="button" onClick={() => loadData()} className="btn-primary">
+          Try again
+        </button>
+      </div>
+    )
+  }
+
   if (!funnel || !stats) {
     return (
       <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-8">
diff --git a/app/sites/[id]/funnels/new/page.tsx b/app/sites/[id]/funnels/new/page.tsx
index 30aa77b..fedc126 100644
--- a/app/sites/[id]/funnels/new/page.tsx
+++ b/app/sites/[id]/funnels/new/page.tsx
@@ -53,6 +53,11 @@ export default function CreateFunnelPage() {
       return
     }
 
+    if (steps.some(s => !s.name.trim())) {
+      toast.error('Please enter a name for all steps')
+      return
+    }
+
     if (steps.some(s => !s.value.trim())) {
       toast.error('Please enter a path for all steps')
       return

From ffe6f464e673fd5deab74a7df866388d1989c8a6 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 5 Feb 2026 00:10:03 +0100
Subject: [PATCH 12/12] feat: enhance error handling in FunnelReportPage by
 adding support for forbidden access and updating error messages for better
 user clarity

---
 app/sites/[id]/funnels/[funnelId]/page.tsx | 23 +++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/app/sites/[id]/funnels/[funnelId]/page.tsx b/app/sites/[id]/funnels/[funnelId]/page.tsx
index ddbec35..61d07c5 100644
--- a/app/sites/[id]/funnels/[funnelId]/page.tsx
+++ b/app/sites/[id]/funnels/[funnelId]/page.tsx
@@ -46,7 +46,7 @@ export default function FunnelReportPage() {
   const [dateRange, setDateRange] = useState(getDateRange(30))
   const [datePreset, setDatePreset] = useState<'7' | '30' | 'custom'>('30')
   const [isDatePickerOpen, setIsDatePickerOpen] = useState(false)
-  const [loadError, setLoadError] = useState<'not_found' | 'error' | null>(null)
+  const [loadError, setLoadError] = useState<'not_found' | 'forbidden' | 'error' | null>(null)
 
   const loadData = useCallback(async () => {
     setLoadError(null)
@@ -59,9 +59,11 @@ export default function FunnelReportPage() {
       setFunnel(funnelData)
       setStats(statsData)
     } catch (error) {
-      const is404 = error instanceof ApiError && error.status === 404
-      setLoadError(is404 ? 'not_found' : 'error')
-      if (!is404) toast.error('Failed to load funnel data')
+      const status = error instanceof ApiError ? error.status : 0
+      if (status === 404) setLoadError('not_found')
+      else if (status === 403) setLoadError('forbidden')
+      else setLoadError('error')
+      if (status !== 404 && status !== 403) toast.error('Failed to load funnel data')
     } finally {
       setLoading(false)
     }
@@ -101,10 +103,21 @@ export default function FunnelReportPage() {
     )
   }
 
+  if (loadError === 'forbidden') {
+    return (
+      <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-8">
+        <p className="text-neutral-600 dark:text-neutral-400">Access denied</p>
+        <Link href={`/sites/${siteId}/funnels`} className="btn-primary mt-4 inline-block">
+          Back to Funnels
+        </Link>
+      </div>
+    )
+  }
+
   if (loadError === 'error') {
     return (
       <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-8">
-        <p className="text-neutral-600 dark:text-neutral-400 mb-4">Failed to load funnel data</p>
+        <p className="text-neutral-600 dark:text-neutral-400 mb-4">Unable to load funnel</p>
         <button type="button" onClick={() => loadData()} className="btn-primary">
           Try again
         </button>