feat(uat-batch-20): form-error UX primitive — scroll-to-first-error hook + summary banner

Two new building blocks for the platform-wide form-error UX rework.
Expense form adopts both as the validation that the pattern works
before the broader sweep across the ~29 useForm callers.

- `useFormScrollToError(handleSubmit, errors)` — wraps RHF's
  handleSubmit. On validation failure it locates the first errored
  field via `[name="..."]` (or id fallback), walks ancestors to find
  the nearest scrolling container (key for forms inside Sheet /
  Dialog bodies that own their own overflow-y), and
  scrollTo({ behavior: 'smooth' }) + focus({ preventScroll }) on it.
  Type-loose handleSubmit signature so 2-arg and 3-arg useForm()
  callers (input vs transformed types) both work.
- `<FormErrorSummary errors={errors} labels={…}>` — top-of-form alert
  banner listing each failed field as a clickable anchor. Renders
  only when ≥2 errors (single-error case is handled by the hook
  alone). role="alert" aria-live="polite" for SR users.
- expense-form-dialog adopts both: `onSubmitWithScroll(onSubmit)`
  replaces the bare `handleSubmit(onSubmit)`, plus a labelled
  `<FormErrorSummary>` at the top of the form. Closes the loop on
  the silent-no-op zod-refine bug fixed in PR1 (the underlying
  setValue() fix already routes errors through formState; this
  surfaces them visibly).

tsc clean. 1419/1419 vitest pass.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/expenses/expense-form-dialog.tsx

@@ -11,6 +11,8 @@ import { Checkbox } from '@/components/ui/checkbox';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
+import { FormErrorSummary } from '@/components/forms/form-error-summary';
+import { useFormScrollToError } from '@/hooks/use-form-scroll-to-error';
 import {
   Select,
   SelectContent,
@@ -75,6 +77,11 @@ export function ExpenseFormDialog({ open, onOpenChange, expense }: ExpenseFormDi
       paymentStatus: 'unpaid',
     },
   });
+  // Scroll-to-first-error wrapper around handleSubmit. On validation
+  // failure it auto-scrolls + focuses the first errored input so reps
+  // can see what failed without hunting (especially important on tall
+  // drawer-based forms like this one).
+  const onSubmitWithScroll = useFormScrollToError(handleSubmit, errors);
 
   useEffect(() => {
     if (open && expense) {
@@ -208,7 +215,19 @@ export function ExpenseFormDialog({ open, onOpenChange, expense }: ExpenseFormDi
           <SheetTitle>{isEdit ? 'Edit Expense' : 'New Expense'}</SheetTitle>
         </SheetHeader>
 
-        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4 mt-4">
+        <form onSubmit={onSubmitWithScroll(onSubmit)} className="space-y-4 mt-4">
+          <FormErrorSummary
+            errors={errors}
+            labels={{
+              expenseDate: 'Date',
+              amount: 'Amount',
+              currency: 'Currency',
+              category: 'Category',
+              paymentMethod: 'Payment method',
+              receiptFileIds: 'Receipt',
+              noReceiptAcknowledged: 'Receipt',
+            }}
+          />
           <div className="space-y-2">
             <Label htmlFor="expenseDate">Date *</Label>
             <Input