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>
2026-05-25 13:26:04 +02:00
parent 35bd8c45d8
commit 7476eabec6
10 changed files with 101 additions and 12 deletions
--- a/src/app/(auth)/login/page.tsx
+++ b/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
--- a/src/app/(auth)/reset-password/page.tsx
+++ b/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
--- a/src/app/(auth)/set-password/page.tsx
+++ b/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
--- a/src/app/(auth)/setup/page.tsx
+++ b/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
--- a/src/app/(dashboard)/[portSlug]/invoices/new/page.tsx
+++ b/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>
--- a/src/components/berths/berth-detail-header.tsx
+++ b/src/components/berths/berth-detail-header.tsx
@@ -25,6 +25,8 @@ import {
 } from '@/components/ui/select';
 import { Textarea } from '@/components/ui/textarea';
 import { DetailHeaderStrip } from '@/components/shared/detail-header-strip';
+import { FormErrorSummary } from '@/components/forms/form-error-summary';
+import { useFormScrollToError } from '@/hooks/use-form-scroll-to-error';
 import { PermissionGate } from '@/components/shared/permission-gate';
 import { StatusPill, type StatusPillStatus } from '@/components/ui/status-pill';
 import { BerthForm } from './berth-form';
@@ -128,11 +130,12 @@ function StatusChangeDialog({
    setValue,
    watch,
    reset,
-    formState: { isSubmitting },
+    formState: { errors, isSubmitting },
  } = useForm<UpdateBerthStatusInput>({
    resolver: zodResolver(updateBerthStatusSchema),
    defaultValues: { status: currentStatus as (typeof BERTH_STATUSES)[number], reason: '' },
  });
+  const submitWithScroll = useFormScrollToError(handleSubmit, errors);

  const status = watch('status');
  const interestId = watch('interestId');
@@ -180,7 +183,11 @@ function StatusChangeDialog({
        <DialogHeader>
          <DialogTitle>Change Status</DialogTitle>
        </DialogHeader>
-        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+        <form onSubmit={submitWithScroll(onSubmit)} className="space-y-4">
+          <FormErrorSummary
+            errors={errors}
+            labels={{ status: 'Status', reason: 'Reason', interestId: 'Linked interest' }}
+          />
          <div className="space-y-2">
            <Label>New Status</Label>
            <Select
--- a/src/components/companies/add-membership-dialog.tsx
+++ b/src/components/companies/add-membership-dialog.tsx
@@ -27,6 +27,8 @@ import {
 } from '@/components/ui/select';
 import { Textarea } from '@/components/ui/textarea';
 import { ClientPicker } from '@/components/shared/client-picker';
+import { FormErrorSummary } from '@/components/forms/form-error-summary';
+import { useFormScrollToError } from '@/hooks/use-form-scroll-to-error';
 import { apiFetch } from '@/lib/api/client';
 import { ROLES } from '@/lib/validators/company-memberships';

@@ -82,6 +84,7 @@ export function AddMembershipDialog({ open, onOpenChange, companyId }: AddMember
      notes: '',
    },
  });
+  const submitWithScroll = useFormScrollToError(handleSubmit, errors);

  useEffect(() => {
    if (open) {
@@ -143,12 +146,16 @@ export function AddMembershipDialog({ open, onOpenChange, companyId }: AddMember
        </DialogHeader>

        <form
-          onSubmit={handleSubmit((data) => {
+          onSubmit={submitWithScroll((data) => {
            setFormError(null);
            mutation.mutate(data);
          })}
          className="space-y-4"
        >
+          <FormErrorSummary
+            errors={errors}
+            labels={{ clientId: 'Client', role: 'Role', startDate: 'Start date' }}
+          />
          <div className="space-y-2">
            <Label>Client</Label>
            <ClientPicker value={clientId} onChange={(id) => setValue('clientId', id)} />
--- a/src/components/invoices/invoice-detail.tsx
+++ b/src/components/invoices/invoice-detail.tsx
@@ -11,6 +11,8 @@ import { format } from 'date-fns';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { FormErrorSummary } from '@/components/forms/form-error-summary';
+import { useFormScrollToError } from '@/hooks/use-form-scroll-to-error';
 import { PermissionGate } from '@/components/shared/permission-gate';
 import { toast } from 'sonner';
 import { Label } from '@/components/ui/label';
@@ -145,6 +147,10 @@ export function InvoiceDetail({ invoiceId }: InvoiceDetailProps) {
    resolver: zodResolver(recordPaymentSchema),
    defaultValues: { paymentDate: new Date().toISOString().split('T')[0] },
  });
+  const submitPaymentWithScroll = useFormScrollToError(
+    paymentForm.handleSubmit,
+    paymentForm.formState.errors,
+  );

  const paymentMutation = useMutation({
    mutationFn: (values: RecordPaymentInput) =>
@@ -393,9 +399,13 @@ export function InvoiceDetail({ invoiceId }: InvoiceDetailProps) {
                </CardHeader>
                <CardContent>
                  <form
-                    onSubmit={paymentForm.handleSubmit((values) => paymentMutation.mutate(values))}
+                    onSubmit={submitPaymentWithScroll((values) => paymentMutation.mutate(values))}
                    className="space-y-4"
                  >
+                    <FormErrorSummary
+                      errors={paymentForm.formState.errors}
+                      labels={{ paymentDate: 'Payment date', paymentMethod: 'Payment method' }}
+                    />
                    <div className="space-y-1">
                      <Label htmlFor="paymentDate">Payment Date</Label>
                      <Controller
--- a/src/components/reservations/berth-reserve-dialog.tsx
+++ b/src/components/reservations/berth-reserve-dialog.tsx
@@ -27,6 +27,8 @@ import {
 } from '@/components/ui/select';
 import { ClientPicker } from '@/components/shared/client-picker';
 import { YachtPicker } from '@/components/yachts/yacht-picker';
+import { FormErrorSummary } from '@/components/forms/form-error-summary';
+import { useFormScrollToError } from '@/hooks/use-form-scroll-to-error';
 import { apiFetch } from '@/lib/api/client';

 type TenureType = 'permanent' | 'fixed_term' | 'seasonal';
@@ -66,6 +68,10 @@ export function BerthReserveDialog({ open, onOpenChange, berthId }: BerthReserve
      notes: '',
    },
  });
+  // Wraps handleSubmit so validation failures scroll the first errored
+  // field into view + focus it; matters in this Dialog because the body
+  // can grow past the viewport when long client/yacht lists render.
+  const submitWithScroll = useFormScrollToError(handleSubmit, errors);

  useEffect(() => {
    if (open) {
@@ -169,6 +175,10 @@ export function BerthReserveDialog({ open, onOpenChange, berthId }: BerthReserve
        </DialogHeader>

        <form className="space-y-4">
+          <FormErrorSummary
+            errors={errors}
+            labels={{ clientId: 'Client', yachtId: 'Yacht', startDate: 'Start date' }}
+          />
          <div className="space-y-2">
            <Label>Client</Label>
            <ClientPicker value={clientId} onChange={(id) => setValue('clientId', id)} />
@@ -230,7 +240,7 @@ export function BerthReserveDialog({ open, onOpenChange, berthId }: BerthReserve
              type="button"
              variant="outline"
              disabled={isPending}
-              onClick={handleSubmit((data) => {
+              onClick={submitWithScroll((data) => {
                setFormError(null);
                createMutation.mutate(data);
              })}
@@ -243,7 +253,7 @@ export function BerthReserveDialog({ open, onOpenChange, berthId }: BerthReserve
            <Button
              type="button"
              disabled={isPending}
-              onClick={handleSubmit((data) => {
+              onClick={submitWithScroll((data) => {
                setFormError(null);
                createAndActivateMutation.mutate(data);
              })}
--- a/src/components/yachts/yacht-transfer-dialog.tsx
+++ b/src/components/yachts/yacht-transfer-dialog.tsx
@@ -26,6 +26,8 @@ import {
  SelectValue,
 } from '@/components/ui/select';
 import { OwnerPicker, type OwnerRef } from '@/components/shared/owner-picker';
+import { FormErrorSummary } from '@/components/forms/form-error-summary';
+import { useFormScrollToError } from '@/hooks/use-form-scroll-to-error';
 import { apiFetch } from '@/lib/api/client';

 type TransferReason = 'sale' | 'inheritance' | 'gift' | 'company_restructure' | 'other';
@@ -72,6 +74,7 @@ export function YachtTransferDialog({
      transferNotes: '',
    },
  });
+  const submitWithScroll = useFormScrollToError(handleSubmit, errors);

  useEffect(() => {
    if (open) {
@@ -135,12 +138,20 @@ export function YachtTransferDialog({
        </DialogHeader>

        <form
-          onSubmit={handleSubmit((data) => {
+          onSubmit={submitWithScroll((data) => {
            setFormError(null);
            mutation.mutate(data);
          })}
          className="space-y-4"
        >
+          <FormErrorSummary
+            errors={errors}
+            labels={{
+              newOwner: 'New owner',
+              effectiveDate: 'Effective date',
+              transferReason: 'Reason',
+            }}
+          />
          <div className="space-y-2">
            <Label>New owner</Label>
            <OwnerPicker