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>

src/app/(modules)/roles/hooks/useRoleForm.ts

@@ -6,20 +6,24 @@ import {
 } from '@/components/permission-tree';
 import { roleService } from '@/services/api';
 import type { PermissionTreeItem, Role } from '@/types';
+import { zodResolver } from '@hookform/resolvers/zod';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useCallback } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import { toast } from 'sonner';
+import { z } from 'zod';
 
 import { roleKeys } from '../queries/roleKeys';
 
-export interface RoleFormValues {
-  id?: number;
-  name: string;
-  display_name: string;
-  description: string;
-  permission_ids: number[];
-}
+const roleFormSchema = z.object({
+  id: z.number().optional(),
+  name: z.string().trim().min(1, 'Role name is required'),
+  display_name: z.string().trim().min(1, 'Display name is required'),
+  description: z.string().optional(),
+  permission_ids: z.array(z.number()).min(1, 'Select at least one permission'),
+});
+
+export type RoleFormValues = z.infer<typeof roleFormSchema>;
 
 const defaultValues: RoleFormValues = {
   name: '',
@@ -44,13 +48,20 @@ export function useRoleForm({
     handleSubmit,
     reset,
     setValue,
-    formState: { isSubmitting },
+    formState: { errors, isSubmitting, touchedFields },
   } = useForm<RoleFormValues>({
     defaultValues,
+    mode: 'onTouched',
+    reValidateMode: 'onChange',
+    resolver: zodResolver(roleFormSchema),
   });
 
   const permissionIds = useWatch({ control, name: 'permission_ids' }) || [];
   const roleId = useWatch({ control, name: 'id' });
+  const roleName = useWatch({ control, name: 'name' }) || '';
+  const displayName = useWatch({ control, name: 'display_name' }) || '';
+  const canSubmit =
+    roleName.trim().length > 0 && displayName.trim().length > 0 && permissionIds.length > 0;
 
   const saveMutation = useMutation({
     mutationFn: (values: RoleFormValues) =>
@@ -58,7 +69,7 @@ export function useRoleForm({
         id: values.id,
         name: values.name.trim(),
         display_name: values.display_name.trim(),
-        description: values.description.trim(),
+        description: values.description?.trim() ?? '',
         organization_id: organizationId,
         permission_ids: values.permission_ids,
         is_default: false,
@@ -74,13 +85,22 @@ export function useRoleForm({
     },
   });
 
-  const onSubmit = handleSubmit((values) => {
-    if (values.permission_ids.length === 0) {
-      toast.error('Select at least one permission');
-      return;
-    }
-    saveMutation.mutate(values);
-  });
+  const onSubmit = handleSubmit(
+    (values) => saveMutation.mutate(values),
+    (formErrors) => {
+      if (formErrors.name?.message) {
+        toast.error(formErrors.name.message);
+        return;
+      }
+      if (formErrors.display_name?.message) {
+        toast.error(formErrors.display_name.message);
+        return;
+      }
+      if (formErrors.permission_ids?.message) {
+        toast.error(formErrors.permission_ids.message);
+      }
+    },
+  );
 
   const openCreate = useCallback(() => {
     reset({
@@ -115,6 +135,9 @@ export function useRoleForm({
     setPermissionIds,
     permissionIds,
     roleId,
+    errors,
+    touchedFields,
+    canSubmit,
     isSaving: isSubmitting || saveMutation.isPending,
   };
 }

src/app/(modules)/roles/page.tsx

@@ -61,6 +61,9 @@ export default function RolesPage() {
     roleId,
     permissionIds,
     setPermissionIds,
+    errors,
+    touchedFields,
+    canSubmit,
     isSaving,
   } = roleForm;
   const statusMutation = useRoleStatusMutation();
@@ -142,11 +145,14 @@ export default function RolesPage() {
         onOpenChange={setIsSheetOpen}
         roleId={roleId}
         register={register}
+        errors={errors}
+        touchedFields={touchedFields}
         onSubmit={onSubmit}
         permissionTree={permissionsQuery.permissionTree}
         permissionIds={permissionIds}
         onPermissionIdsChange={setPermissionIds}
         isPermissionsLoading={permissionsQuery.isLoading}
+        canSubmit={canSubmit}
         isSaving={isSaving}
       />
     </>