feat(funnels): extract reusable FunnelForm with category toggle, property filters, and conversion window

app/sites/[id]/funnels/new/page.tsx

@@ -3,90 +3,25 @@
 import { useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
 import { useSWRConfig } from 'swr'
-import { createFunnel, type CreateFunnelRequest, type FunnelStep } from '@/lib/api/funnels'
-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
-  }
-}
+import { createFunnel, type CreateFunnelRequest } from '@/lib/api/funnels'
+import { toast } from '@ciphera-net/ui'
+import FunnelForm from '@/components/funnels/FunnelForm'
 
 export default function CreateFunnelPage() {
   const params = useParams()
   const router = useRouter()
   const { mutate } = useSWRConfig()
   const siteId = params.id as string
-
-  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' }
-  ])
   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.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
-    }
-    const invalidRegexStep = steps.find(s => s.type === 'regex' && !isValidRegex(s.value))
-    if (invalidRegexStep) {
-      toast.error(`Invalid regex pattern in step: ${invalidRegexStep.name}`)
-      return
-    }
-
+  const handleSubmit = async (data: CreateFunnelRequest) => {
     try {
       setSaving(true)
-      const funnelSteps = steps.map((s, i) => ({
-        ...s,
-        order: i
-      }))
-
-      await createFunnel(siteId, {
-        name,
-        description,
-        steps: funnelSteps
-      })
-
+      await createFunnel(siteId, data)
       await mutate(['funnels', siteId])
       toast.success('Funnel created')
       router.push(`/sites/${siteId}/funnels`)
-    } catch (error) {
+    } catch {
       toast.error('Failed to create funnel. Please try again.')
     } finally {
       setSaving(false)
@@ -94,149 +29,11 @@ export default function CreateFunnelPage() {
   }
 
   return (
-    <div className="w-full max-w-3xl mx-auto px-4 sm:px-6 pb-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 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
-        </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}>
-        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl 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"
-                autoFocus
-                required
-                maxLength={100}
-              />
-              {name.length > 80 && (
-                <span className={`text-xs tabular-nums mt-1 ${name.length > 90 ? 'text-amber-500' : 'text-neutral-400'}`}>{name.length}/100</span>
-              )}
-            </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>
-        </div>
-
-        <div className="space-y-4 mb-8">
-          <div className="flex items-center justify-between">
-            <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
-              Funnel Steps
-            </h3>
-          </div>
-
-          {steps.map((step, index) => (
-            <div key={`step-${index}`} className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl 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}
-                  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'
-                  }`}
-                >
-                  <TrashIcon className="w-5 h-5" />
-                </button>
-              </div>
-            </div>
-          ))}
-
-          <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`}>
-            <Button variant="secondary">
-              Cancel
-            </Button>
-          </Link>
-          <Button
-            type="submit"
-            disabled={saving}
-            variant="primary"
-          >
-            {saving ? 'Creating...' : 'Create Funnel'}
-          </Button>
-        </div>
-      </form>
-    </div>
+    <FunnelForm
+      siteId={siteId}
+      onSubmit={handleSubmit}
+      submitLabel={saving ? 'Creating...' : 'Create Funnel'}
+      cancelHref={`/sites/${siteId}/funnels`}
+    />
   )
 }