refactor: Align form validation UX across management dialogs

src/app/(modules)/clients/components/ClientSheet.tsx

@@ -1,9 +1,10 @@
 'use client';
 
 import type { ComponentProps } from 'react';
-import type { UseFormRegister } from 'react-hook-form';
+import type { FieldErrors, UseFormRegister } from 'react-hook-form';
 import { Loader2 } from 'lucide-react';
 
+import { FormField } from '@/components/form';
 import { Button } from '@/components/ui/button';
 import {
   Dialog,
@@ -14,7 +15,6 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
 import type { ClientFormValues } from '../hooks/useClientForm';
 
 interface ClientSheetProps {
@@ -22,7 +22,10 @@ interface ClientSheetProps {
   onOpenChange: (open: boolean) => void;
   clientId?: number;
   register: UseFormRegister<ClientFormValues>;
+  errors: FieldErrors<ClientFormValues>;
+  isSubmitted: boolean;
   onSubmit: ComponentProps<'form'>['onSubmit'];
+  canSubmit: boolean;
   isSaving: boolean;
 }
 
@@ -31,115 +34,168 @@ export function ClientSheet({
   onOpenChange,
   clientId,
   register,
+  errors,
+  isSubmitted,
   onSubmit,
+  canSubmit,
   isSaving,
 }: ClientSheetProps) {
+  const nameErrorMessage = isSubmitted ? errors.name?.message : undefined;
+  const emailErrorMessage = isSubmitted ? errors.email?.message : undefined;
+  const landlineErrorMessage = isSubmitted
+    ? errors.landline_number?.message
+    : undefined;
+  const addressErrorMessage = isSubmitted ? errors.address?.message : undefined;
+  const contactNameErrorMessage = isSubmitted
+    ? errors.contact_name?.message
+    : undefined;
+  const contactPhoneErrorMessage = isSubmitted
+    ? errors.contact_phone_number?.message
+    : undefined;
+  const contactEmailErrorMessage = isSubmitted
+    ? errors.contact_email?.message
+    : undefined;
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-h-[calc(100vh-2rem)] overflow-y-auto sm:max-w-3xl">
-        <DialogHeader>
-          <DialogTitle>
+      <DialogContent className="flex max-h-[calc(100vh-2rem)] flex-col gap-0 p-0 sm:max-w-3xl">
+        <DialogHeader className="shrink-0 border-b px-6 py-4 pr-12">
+          <DialogTitle className="text-lg leading-none font-semibold tracking-tight">
             {clientId ? 'Edit Client' : 'Create Client'}
           </DialogTitle>
-          <DialogDescription>
+          <DialogDescription className="text-sm">
             Manage company and primary contact details.
           </DialogDescription>
         </DialogHeader>
-        <form onSubmit={onSubmit} className="flex flex-1 flex-col gap-5 px-4">
-          <div className="grid gap-4 md:grid-cols-2">
-            <div className="space-y-2">
-              <Label htmlFor="client-name">Name</Label>
-              <Input
+
+        <form onSubmit={onSubmit} className="flex min-h-0 flex-1 flex-col">
+          <div className="max-h-[58vh] space-y-5 overflow-y-auto px-6 py-4">
+            <div className="grid gap-4 md:grid-cols-2">
+              <FormField
                 id="client-name"
-                placeholder="Acme Corp"
-                {...register('name', { required: true })}
+                label="Client Name"
                 required
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="client-email">Email</Label>
-              <Input
+                error={nameErrorMessage}
+              >
+                <Input
+                  id="client-name"
+                  placeholder="Enter client name"
+                  aria-invalid={!!nameErrorMessage}
+                  {...register('name')}
+                />
+              </FormField>
+
+              <FormField
                 id="client-email"
-                type="email"
-                placeholder="info@acme.com"
-                {...register('email', { required: true })}
+                label="Company Email"
                 required
-              />
+                error={emailErrorMessage}
+              >
+                <Input
+                  id="client-email"
+                  type="email"
+                  placeholder="info@example.com"
+                  aria-invalid={!!emailErrorMessage}
+                  {...register('email')}
+                />
+              </FormField>
             </div>
-          </div>
 
-          <div className="grid gap-4 md:grid-cols-2">
-            <div className="space-y-2">
-              <Label htmlFor="landline-number">Landline Number</Label>
-              <Input
+            <div className="grid gap-4 md:grid-cols-2">
+              <FormField
                 id="landline-number"
-                placeholder="+91-22-12345678"
-                {...register('landline_number', { required: true })}
+                label="Landline Number"
                 required
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="address">Address</Label>
-              <Input
+                error={landlineErrorMessage}
+              >
+                <Input
+                  id="landline-number"
+                  placeholder="+91-22-12345678"
+                  aria-invalid={!!landlineErrorMessage}
+                  {...register('landline_number')}
+                />
+              </FormField>
+
+              <FormField
                 id="address"
-                placeholder="12 MG Road, Mumbai, MH 400001"
-                {...register('address', { required: true })}
+                label="Address"
                 required
-              />
+                error={addressErrorMessage}
+              >
+                <Input
+                  id="address"
+                  placeholder="12 MG Road, Mumbai, MH 400001"
+                  aria-invalid={!!addressErrorMessage}
+                  {...register('address')}
+                />
+              </FormField>
             </div>
-          </div>
 
-          <div className="grid gap-4 md:grid-cols-3">
-            <div className="space-y-2">
-              <Label htmlFor="gst">GST</Label>
-              <Input
-                id="gst"
-                placeholder="27ABCDE1234F1Z5"
-                {...register('gst')}
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="pan">PAN</Label>
-              <Input id="pan" placeholder="ABCDE1234F" {...register('pan')} />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="tan">TAN</Label>
-              <Input id="tan" placeholder="MUMA12345B" {...register('tan')} />
-            </div>
-          </div>
+            <div className="grid gap-4 md:grid-cols-3">
+              <FormField id="gst" label="GST">
+                <Input
+                  id="gst"
+                  placeholder="27ABCDE1234F1Z5"
+                  {...register('gst')}
+                />
+              </FormField>
 
-          <div className="grid gap-4 md:grid-cols-3">
-            <div className="space-y-2">
-              <Label htmlFor="contact-name">Contact Name</Label>
-              <Input
+              <FormField id="pan" label="PAN">
+                <Input id="pan" placeholder="ABCDE1234F" {...register('pan')} />
+              </FormField>
+
+              <FormField id="tan" label="TAN">
+                <Input id="tan" placeholder="MUMA12345B" {...register('tan')} />
+              </FormField>
+            </div>
+
+            <div className="grid gap-4 md:grid-cols-3">
+              <FormField
                 id="contact-name"
-                placeholder="Jane Doe"
-                {...register('contact_name', { required: true })}
+                label="Contact Name"
                 required
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="contact-phone-number">Contact Phone</Label>
-              <Input
+                error={contactNameErrorMessage}
+              >
+                <Input
+                  id="contact-name"
+                  placeholder="Enter contact name"
+                  aria-invalid={!!contactNameErrorMessage}
+                  {...register('contact_name')}
+                />
+              </FormField>
+
+              <FormField
                 id="contact-phone-number"
-                placeholder="+91-9876543210"
-                {...register('contact_phone_number', { required: true })}
+                label="Contact Phone"
                 required
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="contact-email">Contact Email</Label>
-              <Input
+                error={contactPhoneErrorMessage}
+              >
+                <Input
+                  id="contact-phone-number"
+                  placeholder="+919876543210"
+                  aria-invalid={!!contactPhoneErrorMessage}
+                  {...register('contact_phone_number')}
+                />
+              </FormField>
+
+              <FormField
                 id="contact-email"
-                type="email"
-                placeholder="jane.doe@acme.com"
-                {...register('contact_email', { required: true })}
+                label="Contact Email"
                 required
-              />
+                error={contactEmailErrorMessage}
+              >
+                <Input
+                  id="contact-email"
+                  type="email"
+                  placeholder="contact@example.com"
+                  aria-invalid={!!contactEmailErrorMessage}
+                  {...register('contact_email')}
+                />
+              </FormField>
             </div>
           </div>
 
-          <DialogFooter className="px-0">
+          <DialogFooter className="shrink-0 border-t px-6 py-4">
             <Button
               type="button"
               variant="outline"
@@ -148,7 +204,8 @@ export function ClientSheet({
             >
               Cancel
             </Button>
-            <Button type="submit" disabled={isSaving}>
+
+            <Button type="submit" disabled={isSaving || !canSubmit}>
               {isSaving ? (
                 <Loader2 className="mr-2 size-4 animate-spin" />
               ) : null}