feat(07-01): create wizard UI components and SetupPage

- WizardStepper: horizontal 1-2-3 stepper with clickable completed steps
- IncomeStep: number input with currency suffix and validation
- AllocationBar: sticky remaining balance with live polite announcements
- CategoryGroupHeader: colored dot section divider per category type
- PresetItemRow: checkbox + name + badge + editable amount input
- RecurringItemsStep: groups 19 PRESETS by type with allocation calculation
- SetupPage: page orchestrator with step navigation and state persistence

src/components/setup/AllocationBar.tsx

@@ -0,0 +1,31 @@
+import { useTranslation } from "react-i18next"
+
+interface AllocationBarProps {
+  remaining: number
+  currency: string
+}
+
+export function AllocationBar({ remaining, currency }: AllocationBarProps) {
+  const { t } = useTranslation()
+
+  const formatted = new Intl.NumberFormat(undefined, {
+    style: "currency",
+    currency,
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+  }).format(remaining)
+
+  return (
+    <div className="sticky top-0 z-10 flex justify-between items-center py-3 px-4 bg-muted border-b border-border rounded-none">
+      <span className="text-sm font-semibold">{t("setup.step2.remaining")}</span>
+      <span
+        aria-live="polite"
+        className={`text-base font-semibold ${
+          remaining >= 0 ? "text-on-budget" : "text-destructive"
+        }`}
+      >
+        {formatted}
+      </span>
+    </div>
+  )
+}

src/components/setup/CategoryGroupHeader.tsx

@@ -0,0 +1,36 @@
+import type { CategoryType } from "@/lib/types"
+import { Separator } from "@/components/ui/separator"
+
+interface CategoryGroupHeaderProps {
+  type: CategoryType
+  label: string
+  count: number
+}
+
+const colorVar = (type: CategoryType): string => {
+  const map: Record<CategoryType, string> = {
+    income: "var(--color-income)",
+    bill: "var(--color-bill)",
+    variable_expense: "var(--color-variable-expense)",
+    debt: "var(--color-debt)",
+    saving: "var(--color-saving)",
+    investment: "var(--color-investment)",
+  }
+  return map[type]
+}
+
+export function CategoryGroupHeader({ type, label, count }: CategoryGroupHeaderProps) {
+  return (
+    <div>
+      <div className="flex items-center gap-2 pt-4 pb-2">
+        <span
+          className="w-2.5 h-2.5 rounded-full"
+          style={{ backgroundColor: colorVar(type) }}
+        />
+        <span className="text-sm font-semibold">{label}</span>
+        <span className="text-xs text-muted-foreground">({count} items)</span>
+      </div>
+      <Separator />
+    </div>
+  )
+}

src/components/setup/IncomeStep.tsx

@@ -0,0 +1,45 @@
+import { useTranslation } from "react-i18next"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+
+interface IncomeStepProps {
+  income: number
+  onIncomeChange: (val: number) => void
+  currency: string
+  error: string | null
+}
+
+export function IncomeStep({ income, onIncomeChange, currency, error }: IncomeStepProps) {
+  const { t } = useTranslation()
+
+  const helperId = "income-helper"
+  const errorId = "income-error"
+
+  return (
+    <div className="space-y-4">
+      <Label htmlFor="income-input" className="text-sm font-semibold">
+        {t("setup.step1.incomeLabel")}
+      </Label>
+      <div className="flex items-center gap-2">
+        <Input
+          id="income-input"
+          type="number"
+          className="w-full text-right text-lg"
+          value={income}
+          onChange={(e) => onIncomeChange(Number(e.target.value))}
+          min={0}
+          aria-describedby={`${helperId}${error ? ` ${errorId}` : ""}`}
+        />
+        <span className="text-muted-foreground text-sm">{currency}</span>
+      </div>
+      <p id={helperId} className="text-sm text-muted-foreground">
+        {t("setup.step1.helper")}
+      </p>
+      {error && (
+        <p id={errorId} className="text-sm text-destructive">
+          {error}
+        </p>
+      )}
+    </div>
+  )
+}

src/components/setup/PresetItemRow.tsx

@@ -0,0 +1,59 @@
+import { useTranslation } from "react-i18next"
+import type { CategoryType } from "@/lib/types"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Badge } from "@/components/ui/badge"
+import { Input } from "@/components/ui/input"
+
+interface PresetItemRowProps {
+  slug: string
+  type: CategoryType
+  checked: boolean
+  amount: number
+  onToggle: () => void
+  onAmountChange: (val: number) => void
+}
+
+const colorVar = (type: CategoryType): string => {
+  const map: Record<CategoryType, string> = {
+    income: "var(--color-income)",
+    bill: "var(--color-bill)",
+    variable_expense: "var(--color-variable-expense)",
+    debt: "var(--color-debt)",
+    saving: "var(--color-saving)",
+    investment: "var(--color-investment)",
+  }
+  return map[type]
+}
+
+export function PresetItemRow({
+  slug,
+  type,
+  checked,
+  amount,
+  onToggle,
+  onAmountChange,
+}: PresetItemRowProps) {
+  const { t } = useTranslation()
+
+  return (
+    <div className="flex items-center gap-3 py-2.5 px-1">
+      <Checkbox checked={checked} onCheckedChange={onToggle} />
+      <span className="flex-1 text-sm">{t(`presets.${type}.${slug}`)}</span>
+      <Badge
+        variant="outline"
+        className="text-xs"
+        style={{ borderLeftWidth: "3px", borderLeftColor: colorVar(type) }}
+      >
+        {t(`categories.types.${type}`)}
+      </Badge>
+      <Input
+        type="number"
+        className={`w-24 text-right ${!checked ? "bg-muted text-muted-foreground opacity-50" : ""}`}
+        value={amount}
+        onChange={(e) => onAmountChange(Number(e.target.value))}
+        disabled={!checked}
+        min={0}
+      />
+    </div>
+  )
+}

src/components/setup/RecurringItemsStep.tsx

@@ -0,0 +1,81 @@
+import { useTranslation } from "react-i18next"
+import { PRESETS } from "@/data/presets"
+import type { CategoryType } from "@/lib/types"
+import { AllocationBar } from "./AllocationBar"
+import { CategoryGroupHeader } from "./CategoryGroupHeader"
+import { PresetItemRow } from "./PresetItemRow"
+
+interface RecurringItemsStepProps {
+  selectedItems: Record<string, { checked: boolean; amount: number }>
+  income: number
+  currency: string
+  onToggle: (slug: string) => void
+  onAmountChange: (slug: string, amount: number) => void
+}
+
+const GROUP_ORDER: CategoryType[] = [
+  "income",
+  "bill",
+  "variable_expense",
+  "debt",
+  "saving",
+  "investment",
+]
+
+export function RecurringItemsStep({
+  selectedItems,
+  income,
+  currency,
+  onToggle,
+  onAmountChange,
+}: RecurringItemsStepProps) {
+  const { t } = useTranslation()
+
+  // Group presets by type
+  const grouped = GROUP_ORDER.reduce(
+    (acc, type) => {
+      acc[type] = PRESETS.filter((p) => p.type === type)
+      return acc
+    },
+    {} as Record<CategoryType, typeof PRESETS>
+  )
+
+  // Compute remaining
+  const totalChecked = Object.values(selectedItems)
+    .filter((i) => i.checked)
+    .reduce((sum, i) => sum + i.amount, 0)
+  const remaining = income - totalChecked
+
+  return (
+    <div>
+      <AllocationBar remaining={remaining} currency={currency} />
+      <div className="space-y-2 pt-2">
+        {GROUP_ORDER.map((type) => {
+          const items = grouped[type]
+          if (!items || items.length === 0) return null
+          return (
+            <fieldset key={type}>
+              <legend className="sr-only">{t(`categories.types.${type}`)}</legend>
+              <CategoryGroupHeader
+                type={type}
+                label={t(`categories.types.${type}`)}
+                count={items.length}
+              />
+              {items.map((preset) => (
+                <PresetItemRow
+                  key={preset.slug}
+                  slug={preset.slug}
+                  type={preset.type}
+                  checked={selectedItems[preset.slug]?.checked ?? false}
+                  amount={selectedItems[preset.slug]?.amount ?? preset.defaultAmount}
+                  onToggle={() => onToggle(preset.slug)}
+                  onAmountChange={(val) => onAmountChange(preset.slug, val)}
+                />
+              ))}
+            </fieldset>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

src/components/setup/WizardStepper.tsx

@@ -0,0 +1,62 @@
+import { useTranslation } from "react-i18next"
+import { Check } from "lucide-react"
+
+interface WizardStepperProps {
+  currentStep: 1 | 2 | 3
+  onStepClick: (step: 1 | 2 | 3) => void
+}
+
+const steps = [1, 2, 3] as const
+
+export function WizardStepper({ currentStep, onStepClick }: WizardStepperProps) {
+  const { t } = useTranslation()
+
+  return (
+    <nav role="navigation" aria-label="Setup progress" className="flex items-center justify-center mb-6">
+      {steps.map((step, index) => {
+        const isCompleted = step < currentStep
+        const isActive = step === currentStep
+        const isFuture = step > currentStep
+
+        return (
+          <div key={step} className="flex items-center">
+            {/* Step group: circle + label */}
+            <div className="flex flex-col items-center gap-1">
+              <button
+                type="button"
+                onClick={() => {
+                  if (!isFuture) onStepClick(step)
+                }}
+                className={`flex items-center justify-center w-8 h-8 rounded-full text-sm font-semibold transition-colors ${
+                  isCompleted || isActive
+                    ? "bg-primary text-primary-foreground cursor-pointer"
+                    : "bg-muted text-muted-foreground border border-border cursor-default"
+                }`}
+                aria-disabled={isFuture}
+                tabIndex={isFuture ? -1 : 0}
+              >
+                {isCompleted ? <Check className="w-4 h-4" /> : step}
+              </button>
+              <span
+                className={`text-xs font-semibold ${
+                  isActive ? "text-foreground" : "text-muted-foreground"
+                }`}
+              >
+                {t(`setup.steps.${step}`)}
+              </span>
+            </div>
+
+            {/* Connector line (not after last step) */}
+            {index < steps.length - 1 && (
+              <div
+                className={`h-px w-16 mx-2 ${
+                  step < currentStep ? "bg-primary" : "bg-border"
+                }`}
+              />
+            )}
+          </div>
+        )
+      })}
+    </nav>
+  )
+}

src/pages/SetupPage.tsx

@@ -0,0 +1,179 @@
+import { useState } from "react"
+import { useTranslation } from "react-i18next"
+import { useAuth } from "@/hooks/useAuth"
+import { useWizardState } from "@/hooks/useWizardState"
+import { supabase } from "@/lib/supabase"
+import type { Profile } from "@/lib/types"
+import { WizardStepper } from "@/components/setup/WizardStepper"
+import { IncomeStep } from "@/components/setup/IncomeStep"
+import { RecurringItemsStep } from "@/components/setup/RecurringItemsStep"
+import { Button } from "@/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { Skeleton } from "@/components/ui/skeleton"
+import { useEffect } from "react"
+
+export default function SetupPage() {
+  const { t } = useTranslation()
+  const { user, loading: authLoading } = useAuth()
+  const [profile, setProfile] = useState<Profile | null>(null)
+  const [profileLoading, setProfileLoading] = useState(true)
+
+  useEffect(() => {
+    if (!user) return
+    supabase
+      .from("profiles")
+      .select("*")
+      .eq("id", user.id)
+      .single()
+      .then(({ data }) => {
+        if (data) setProfile(data)
+        setProfileLoading(false)
+      })
+  }, [user])
+
+  const userId = user?.id ?? ""
+  const currency = profile?.currency ?? "EUR"
+  const { state, setStep, setIncome, toggleItem, setItemAmount } =
+    useWizardState(userId)
+
+  const [incomeError, setIncomeError] = useState<string | null>(null)
+
+  const loading = authLoading || profileLoading
+
+  if (loading) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-background p-4">
+        <div className="w-full max-w-2xl">
+          <Skeleton className="h-12 w-64 mx-auto mb-6" />
+          <Skeleton className="h-64 w-full" />
+        </div>
+      </div>
+    )
+  }
+
+  const stepTitles: Record<1 | 2 | 3, string> = {
+    1: t("setup.step1.title"),
+    2: t("setup.step2.title"),
+    3: t("setup.step3.title"),
+  }
+
+  const stepDescriptions: Record<1 | 2 | 3, string> = {
+    1: t("setup.step1.description"),
+    2: t("setup.step2.description"),
+    3: t("setup.step3.description"),
+  }
+
+  function handleNext() {
+    if (state.currentStep === 1) {
+      if (!state.income || state.income <= 0) {
+        setIncomeError(t("setup.step1.validation"))
+        return
+      }
+      setIncomeError(null)
+      setStep(2)
+    } else if (state.currentStep === 2) {
+      setStep(3)
+    }
+  }
+
+  function handleBack() {
+    if (state.currentStep === 2) setStep(1)
+    else if (state.currentStep === 3) setStep(2)
+  }
+
+  function handleSkipStep() {
+    if (state.currentStep === 1) setStep(2)
+    else if (state.currentStep === 2) setStep(3)
+  }
+
+  function handleStepClick(step: 1 | 2 | 3) {
+    if (step <= state.currentStep) {
+      setStep(step)
+    }
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background p-4">
+      <div className="w-full max-w-2xl">
+        <WizardStepper currentStep={state.currentStep} onStepClick={handleStepClick} />
+
+        <Card className="w-full border border-border shadow-sm">
+          <CardHeader className="pb-2">
+            <CardTitle className="text-xl font-semibold">
+              {stepTitles[state.currentStep]}
+            </CardTitle>
+            <p className="text-sm text-muted-foreground">
+              {stepDescriptions[state.currentStep]}
+            </p>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            {state.currentStep === 1 && (
+              <IncomeStep
+                income={state.income}
+                onIncomeChange={setIncome}
+                currency={currency}
+                error={incomeError}
+              />
+            )}
+
+            {state.currentStep === 2 && (
+              <RecurringItemsStep
+                selectedItems={state.selectedItems}
+                income={state.income}
+                currency={currency}
+                onToggle={toggleItem}
+                onAmountChange={setItemAmount}
+              />
+            )}
+
+            {state.currentStep === 3 && (
+              <div className="py-8 text-center text-muted-foreground">
+                <p>Review step coming in next plan</p>
+              </div>
+            )}
+
+            {/* Bottom navigation */}
+            <div className="flex justify-between items-center pt-4 border-t border-border">
+              <div className="flex gap-2">
+                {state.currentStep > 1 && (
+                  <Button variant="ghost" onClick={handleBack}>
+                    {t("setup.back")}
+                  </Button>
+                )}
+                {state.currentStep < 3 && (
+                  <Button
+                    variant="ghost"
+                    className="text-muted-foreground"
+                    onClick={handleSkipStep}
+                  >
+                    {t("setup.skip")}
+                  </Button>
+                )}
+              </div>
+              <div>
+                {state.currentStep < 3 && (
+                  <Button onClick={handleNext}>{t("setup.next")}</Button>
+                )}
+                {state.currentStep === 3 && (
+                  <Button disabled>{t("setup.complete")}</Button>
+                )}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <button
+          type="button"
+          className="mt-4 text-sm text-muted-foreground underline block mx-auto"
+        >
+          {t("setup.skipSetup")}
+        </button>
+      </div>
+    </div>
+  )
+}