feat: add zod validation for role and user forms

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,
   };
 }