feat: add zod validation for role and user forms

src/app/(modules)/roles/components/RoleSheet.tsx

@@ -1,13 +1,14 @@
 'use client';
 
 import 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 { PermissionTree } from '@/components/permission-tree';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
 import {
   Sheet,
   SheetClose,
@@ -26,11 +27,14 @@ interface RoleSheetProps {
   onOpenChange: (open: boolean) => void;
   roleId?: number;
   register: UseFormRegister<RoleFormValues>;
+  errors: FieldErrors<RoleFormValues>;
+  touchedFields: UseFormReturn<RoleFormValues>['formState']['touchedFields'];
   onSubmit: ComponentProps<'form'>['onSubmit'];
   permissionTree: PermissionTreeItem[];
   permissionIds: number[];
   onPermissionIdsChange: (ids: number[]) => void;
   isPermissionsLoading: boolean;
+  canSubmit: boolean;
   isSaving: boolean;
 }
 
@@ -39,13 +43,21 @@ export function RoleSheet({
   onOpenChange,
   roleId,
   register,
+  errors,
+  touchedFields,
   onSubmit,
   permissionTree,
   permissionIds,
   onPermissionIdsChange,
   isPermissionsLoading,
+  canSubmit,
   isSaving,
 }: RoleSheetProps) {
+  const nameErrorMessage = touchedFields.name ? errors.name?.message : undefined;
+  const displayNameErrorMessage = touchedFields.display_name
+    ? errors.display_name?.message
+    : undefined;
+
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
       <SheetContent
@@ -62,41 +74,52 @@ export function RoleSheet({
         <form onSubmit={onSubmit} className="flex min-h-0 flex-1 flex-col">
           <div className="flex-1 space-y-5 overflow-y-auto px-6 py-4">
             <div className="grid gap-4 md:grid-cols-2">
-              <div className="space-y-2">
-                <Label htmlFor="role-name">Role Name</Label>
+              <FormField
+                id="role-name"
+                label="Role Name"
+                required
+                error={nameErrorMessage}
+              >
                 <Input
                   id="role-name"
                   placeholder="Enter role name"
-                  {...register('name', { required: true })}
-                  required
+                  aria-invalid={!!nameErrorMessage}
+                  {...register('name')}
                 />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="role-display-name">Display Name</Label>
+              </FormField>
+              <FormField
+                id="role-display-name"
+                label="Display Name"
+                required
+                error={displayNameErrorMessage}
+              >
                 <Input
                   id="role-display-name"
                   placeholder="Enter display name"
-                  {...register('display_name', { required: true })}
-                  required
+                  aria-invalid={!!displayNameErrorMessage}
+                  {...register('display_name')}
                 />
-              </div>
+              </FormField>
             </div>
 
-            <div className="space-y-2">
-              <Label htmlFor="role-description">Description</Label>
-              <textarea
+            <FormField id="role-description" label="Description">
+              <Textarea
                 id="role-description"
                 placeholder="Describe this role"
                 {...register('description')}
-                className="min-h-24 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                className="min-h-24"
               />
-            </div>
+            </FormField>
 
-            <div className="space-y-3">
-              <div className="flex items-center justify-between gap-3">
-                <Label>Permissions</Label>
+            <FormField
+              label="Permissions"
+              required
+              error={errors.permission_ids?.message}
+              className="space-y-3"
+              labelEnd={
                 <span className="text-xs text-muted-foreground">{permissionIds.length} selected</span>
-              </div>
+              }
+            >
               {isPermissionsLoading ? (
                 <div className="rounded-md border p-6 text-sm text-muted-foreground">
                   Loading permissions...
@@ -108,11 +131,11 @@ export function RoleSheet({
                   onChange={onPermissionIdsChange}
                 />
               )}
-            </div>
+            </FormField>
           </div>
 
           <SheetFooter className="shrink-0 border-t px-6 py-4 sm:flex-row sm:justify-end">
-            <Button type="submit" disabled={isSaving}>
+            <Button type="submit" disabled={isSaving || !canSubmit}>
               {isSaving ? <Loader2 className="mr-2 size-4 animate-spin" /> : null}
               {roleId ? 'Update Role' : 'Create Role'}
             </Button>