feat: add zod validation for role and user forms

src/app/(modules)/users/components/UserSheet.tsx

@@ -1,14 +1,12 @@
 'use client';
 
 import { useRef, type ComponentProps } from 'react';
-
-import type { UseFormRegister } from 'react-hook-form';
-
+import type { FieldErrors, UseFormRegister, UseFormReturn } from 'react-hook-form';
 import { Loader2 } from 'lucide-react';
 
+import { FormField } from '@/components/form';
 import { RoleCombobox } from '@/components/lookups/RoleCombobox';
 import { Button } from '@/components/ui/button';
-
 import {
   Dialog,
   DialogContent,
@@ -17,49 +15,42 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
-
 import { Input } from '@/components/ui/input';
-
-import { Label } from '@/components/ui/label';
-
 import type { UserFormValues } from '../hooks/useUserForm';
 
 interface UserSheetProps {
   open: boolean;
-
   onOpenChange: (open: boolean) => void;
-
   userId?: number;
-
   register: UseFormRegister<UserFormValues>;
-
+  errors: FieldErrors<UserFormValues>;
+  touchedFields: UseFormReturn<UserFormValues>['formState']['touchedFields'];
   onSubmit: ComponentProps<'form'>['onSubmit'];
-
   roleId: string;
-
   onRoleChange: (roleId: string) => void;
-
+  canSubmit: boolean;
   isSaving: boolean;
 }
 
 export function UserSheet({
   open,
-
   onOpenChange,
-
   userId,
-
   register,
-
+  errors,
+  touchedFields,
   onSubmit,
-
   roleId,
-
   onRoleChange,
-
+  canSubmit,
   isSaving,
 }: UserSheetProps) {
   const roleComboboxPortalRef = useRef<HTMLDivElement | null>(null);
+  const firstNameErrorMessage = touchedFields.first_name ? errors.first_name?.message : undefined;
+  const lastNameErrorMessage = touchedFields.last_name ? errors.last_name?.message : undefined;
+  const emailErrorMessage = touchedFields.email ? errors.email?.message : undefined;
+  const phoneErrorMessage = touchedFields.phone_number ? errors.phone_number?.message : undefined;
+  const roleErrorMessage = touchedFields.role_id ? errors.role_id?.message : undefined;
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -72,54 +63,63 @@ export function UserSheet({
 
         <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="first-name">First Name</Label>
-
+            <FormField
+              id="first-name"
+              label="First Name"
+              required
+              error={firstNameErrorMessage}
+            >
               <Input
                 id="first-name"
                 placeholder="Enter first name"
-                {...register('first_name', { required: true })}
-                required
+                aria-invalid={!!firstNameErrorMessage}
+                {...register('first_name')}
               />
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="last-name">Last Name</Label>
+            </FormField>
 
+            <FormField
+              id="last-name"
+              label="Last Name"
+              required
+              error={lastNameErrorMessage}
+            >
               <Input
                 id="last-name"
                 placeholder="Enter last name"
-                {...register('last_name', { required: true })}
-                required
+                aria-invalid={!!lastNameErrorMessage}
+                {...register('last_name')}
               />
-            </div>
+            </FormField>
           </div>
 
-          <div className="space-y-2">
-            <Label htmlFor="email">Email</Label>
-
+          <FormField
+            id="email"
+            label="Email"
+            required
+            error={emailErrorMessage}
+          >
             <Input
               id="email"
-              type="email"
               placeholder="name@example.com"
-              {...register('email', { required: true })}
-              required
+              aria-invalid={!!emailErrorMessage}
+              {...register('email')}
             />
-          </div>
-
-          <div className="space-y-2">
-            <Label htmlFor="phone-number">Phone Number</Label>
+          </FormField>
 
+          <FormField
+            id="phone-number"
+            label="Phone Number"
+            error={phoneErrorMessage}
+          >
             <Input
               id="phone-number"
-              placeholder="Enter phone number"
+              placeholder="+919876543210"
+              aria-invalid={!!phoneErrorMessage}
               {...register('phone_number')}
             />
-          </div>
-
-          <div className="space-y-2">
-            <Label>Role</Label>
+          </FormField>
 
+          <FormField label="Role" required error={roleErrorMessage}>
             <RoleCombobox
               value={roleId}
               onValueChange={onRoleChange}
@@ -132,11 +132,11 @@ export function UserSheet({
 
             <input
               type="hidden"
-              {...register('role_id', { required: true })}
+              {...register('role_id')}
               value={roleId}
               readOnly
             />
-          </div>
+          </FormField>
 
           <DialogFooter className="px-0">
             <Button
@@ -148,7 +148,7 @@ export function UserSheet({
               Cancel
             </Button>
 
-            <Button type="submit" disabled={isSaving}>
+            <Button type="submit" disabled={isSaving || !canSubmit}>
               {isSaving ? <Loader2 className="mr-2 size-4 animate-spin" /> : null}
 
               {userId ? 'Update User' : 'Create User'}