feat(form-error-ux): adopt useFormScrollToError + FormErrorSummary across remaining 10 forms

Completes the form-error rollout the prior session shipped on the 6
highest-impact forms (client/interest/yacht/company/berth/expense). Adds
the scroll-to-first-error wrapper + the top-of-form summary banner to:

- src/app/(auth)/login/page.tsx
- src/app/(auth)/reset-password/page.tsx
- src/app/(auth)/set-password/page.tsx
- src/app/(auth)/setup/page.tsx
- src/app/(dashboard)/[portSlug]/invoices/new/page.tsx
- src/components/berths/berth-detail-header.tsx (status-change dialog)
- src/components/companies/add-membership-dialog.tsx
- src/components/invoices/invoice-detail.tsx (record-payment form)
- src/components/reservations/berth-reserve-dialog.tsx
- src/components/yachts/yacht-transfer-dialog.tsx

Each call site: hook wraps handleSubmit, FormErrorSummary renders only
when 2+ errors fire (no visual change otherwise), and per-form `labels`
prop translates field names to human-readable strings. invoice-line-items
is a sub-form via useFormContext, so it inherits from the parent.

1471/1471 vitest, tsc clean.

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

src/app/(auth)/login/page.tsx

@@ -13,6 +13,8 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { BrandedAuthShell } from '@/components/shared/branded-auth-shell';
 import { useAuthBranding } from '@/components/shared/auth-branding-provider';
+import { FormErrorSummary } from '@/components/forms/form-error-summary';
+import { useFormScrollToError } from '@/hooks/use-form-scroll-to-error';
 
 // `identifier` accepts either an email address or a username (3–30 lowercase
 // letters / digits / dot / underscore / hyphen). The server endpoint
@@ -75,6 +77,7 @@ export default function LoginPage() {
   } = useForm<LoginFormData>({
     resolver: zodResolver(loginSchema),
   });
+  const submitWithScroll = useFormScrollToError(handleSubmit, errors);
 
   async function onSubmit(data: LoginFormData) {
     setIsLoading(true);
@@ -112,7 +115,11 @@ export default function LoginPage() {
         <p className="text-sm text-gray-500 mt-1">Sign in to continue</p>
       </div>
 
-      <form onSubmit={handleSubmit(onSubmit)} className="space-y-4" noValidate>
+      <form onSubmit={submitWithScroll(onSubmit)} className="space-y-4" noValidate>
+        <FormErrorSummary
+          errors={errors}
+          labels={{ identifier: 'Email or username', password: 'Password' }}
+        />
         <div className="space-y-1.5">
           <Label htmlFor="identifier">Email or username</Label>
           <Input

src/app/(auth)/reset-password/page.tsx

@@ -11,6 +11,8 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { BrandedAuthShell } from '@/components/shared/branded-auth-shell';
+import { FormErrorSummary } from '@/components/forms/form-error-summary';
+import { useFormScrollToError } from '@/hooks/use-form-scroll-to-error';
 import { cn } from '@/lib/utils';
 
 const resetSchema = z.object({
@@ -32,6 +34,7 @@ export default function ResetPasswordPage() {
   } = useForm<ResetFormData>({
     resolver: zodResolver(resetSchema),
   });
+  const submitWithScroll = useFormScrollToError(handleSubmit, errors);
 
   // If the user landed here from a stale email link that points to
   // `/reset-password?token=…` instead of `/set-password?token=…`, hand
@@ -96,7 +99,8 @@ export default function ResetPasswordPage() {
           </Link>
         </div>
       ) : (
-        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4" noValidate>
+        <form onSubmit={submitWithScroll(onSubmit)} className="space-y-4" noValidate>
+          <FormErrorSummary errors={errors} labels={{ email: 'Email' }} />
           <div className="space-y-1.5">
             <Label htmlFor="email">Email</Label>
             <Input

src/app/(auth)/set-password/page.tsx

@@ -12,6 +12,8 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { BrandedAuthShell } from '@/components/shared/branded-auth-shell';
+import { FormErrorSummary } from '@/components/forms/form-error-summary';
+import { useFormScrollToError } from '@/hooks/use-form-scroll-to-error';
 
 const MIN_LENGTH = 9;
 
@@ -65,6 +67,7 @@ function SetPasswordInner() {
   } = useForm<SetPasswordFormData>({
     resolver: zodResolver(passwordSchema),
   });
+  const submitWithScroll = useFormScrollToError(handleSubmit, errors);
 
   async function onSubmit(data: SetPasswordFormData) {
     if (!token) {
@@ -138,7 +141,11 @@ function SetPasswordInner() {
         <p className="text-sm text-gray-500 mt-1">Choose a password for your CRM account</p>
       </div>
 
-      <form onSubmit={handleSubmit(onSubmit)} className="space-y-4" noValidate>
+      <form onSubmit={submitWithScroll(onSubmit)} className="space-y-4" noValidate>
+        <FormErrorSummary
+          errors={errors}
+          labels={{ password: 'Password', confirmPassword: 'Confirm password' }}
+        />
         <div className="space-y-1.5">
           <Label htmlFor="password">New password</Label>
           <Input

src/app/(auth)/setup/page.tsx

@@ -12,6 +12,8 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { BrandedAuthShell } from '@/components/shared/branded-auth-shell';
 import { useAuthBranding } from '@/components/shared/auth-branding-provider';
+import { FormErrorSummary } from '@/components/forms/form-error-summary';
+import { useFormScrollToError } from '@/hooks/use-form-scroll-to-error';
 import { apiFetch } from '@/lib/api/client';
 import { cn } from '@/lib/utils';
 
@@ -50,6 +52,7 @@ export default function SetupPage() {
   } = useForm<SetupFormData>({
     resolver: zodResolver(setupSchema),
   });
+  const submitWithScroll = useFormScrollToError(handleSubmit, errors);
 
   useEffect(() => {
     let cancelled = false;
@@ -119,7 +122,16 @@ export default function SetupPage() {
           </p>
         </div>
 
-        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+        <form onSubmit={submitWithScroll(onSubmit)} className="space-y-4">
+          <FormErrorSummary
+            errors={errors}
+            labels={{
+              name: 'Name',
+              email: 'Email',
+              password: 'Password',
+              confirmPassword: 'Confirm password',
+            }}
+          />
           <div className="space-y-1.5">
             <Label htmlFor="setup-name">Your name</Label>
             <Input

src/app/(dashboard)/[portSlug]/invoices/new/page.tsx

@@ -24,6 +24,8 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { OwnerPicker } from '@/components/shared/owner-picker';
 import { CurrencySelect } from '@/components/shared/currency-select';
 import { InvoiceLineItems } from '@/components/invoices/invoice-line-items';
+import { FormErrorSummary } from '@/components/forms/form-error-summary';
+import { useFormScrollToError } from '@/hooks/use-form-scroll-to-error';
 import { apiFetch } from '@/lib/api/client';
 import { formatCurrency } from '@/lib/utils/currency';
 import type { z } from 'zod';
@@ -96,6 +98,7 @@ export default function NewInvoicePage() {
     setValue,
     formState: { errors },
   } = methods;
+  const submitWithScroll = useFormScrollToError(handleSubmit, errors);
 
   const watchedValues = watch();
   const isDepositInvoice = watchedValues.kind === 'deposit';
@@ -219,7 +222,18 @@ export default function NewInvoicePage() {
       </div>
 
       <FormProvider {...methods}>
-        <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+        <form onSubmit={submitWithScroll(onSubmit)} className="space-y-6">
+          <FormErrorSummary
+            errors={errors}
+            labels={{
+              billingEntity: 'Billing entity',
+              billingEmail: 'Billing email',
+              dueDate: 'Due date',
+              lineItems: 'Line items',
+              currency: 'Currency',
+              paymentTerms: 'Payment terms',
+            }}
+          />
           {/* Step 1: Client Info */}
           {step === 1 && (
             <Card>