feat: add zod validation for role and user forms

src/app/(modules)/users/hooks/useUserForm.ts

@@ -1,20 +1,31 @@
 'use client';
 
+import { zodResolver } from '@hookform/resolvers/zod';
 import { useCallback } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import { toast } from 'sonner';
+import { z } from 'zod';
 
 import type { AdministrationUser } from '@/types';
 import { useSaveUserMutation } from './useUserMutations';
 
-export interface UserFormValues {
-  id?: number;
-  first_name: string;
-  last_name: string;
-  email: string;
-  phone_number: string;
-  role_id: string;
-}
+const optionalPhoneSchema = z
+  .string()
+  .trim()
+  .refine((value) => value === '' || /^\+(?:[0-9] ?){6,14}[0-9]$/.test(value), {
+    message: 'Please enter a valid phone number',
+  });
+
+const userFormSchema = z.object({
+  id: z.number().optional(),
+  first_name: z.string().trim().min(1, 'First name is required'),
+  last_name: z.string().trim().min(1, 'Last name is required'),
+  email: z.string().trim().min(1, 'Email is required').email('Invalid email'),
+  phone_number: optionalPhoneSchema,
+  role_id: z.string().trim().min(1, 'Role is required'),
+});
+
+export type UserFormValues = z.infer<typeof userFormSchema>;
 
 const defaultValues: UserFormValues = {
   first_name: '',
@@ -31,9 +42,12 @@ export function useUserForm({ onSaved }: { onSaved: () => void }) {
     handleSubmit: submitForm,
     reset,
     setValue,
-    formState: { isSubmitting, errors },
+    formState: { errors, isSubmitting, touchedFields },
   } = useForm<UserFormValues>({
     defaultValues,
+    mode: 'onTouched',
+    reValidateMode: 'onChange',
+    resolver: zodResolver(userFormSchema),
   });
   const saveMutation = useSaveUserMutation({
     onSaved: () => {
@@ -44,16 +58,39 @@ export function useUserForm({ onSaved }: { onSaved: () => void }) {
 
   const userId = useWatch({ control, name: 'id' });
   const roleId = useWatch({ control, name: 'role_id' }) || '';
+  const firstName = useWatch({ control, name: 'first_name' }) || '';
+  const lastName = useWatch({ control, name: 'last_name' }) || '';
+  const email = useWatch({ control, name: 'email' }) || '';
+  const phoneNumber = useWatch({ control, name: 'phone_number' }) || '';
+  const isPhoneValid = phoneNumber.trim() === '' || /^\+(?:[0-9] ?){6,14}[0-9]$/.test(phoneNumber.trim());
+  const canSubmit =
+    firstName.trim().length > 0 &&
+    lastName.trim().length > 0 &&
+    email.trim().length > 0 &&
+    roleId.trim().length > 0 &&
+    isPhoneValid;
 
   const handleSubmit = submitForm(
     (values) => saveMutation.mutate(values),
     (formErrors) => {
-      if (formErrors.first_name || formErrors.last_name || formErrors.email) {
-        toast.error('First name, last name and email are required');
+      if (formErrors.first_name?.message) {
+        toast.error(formErrors.first_name.message);
         return;
       }
-      if (formErrors.role_id) {
-        toast.error('Select a role');
+      if (formErrors.last_name?.message) {
+        toast.error(formErrors.last_name.message);
+        return;
+      }
+      if (formErrors.email?.message) {
+        toast.error(formErrors.email.message);
+        return;
+      }
+      if (formErrors.phone_number?.message) {
+        toast.error(formErrors.phone_number.message);
+        return;
+      }
+      if (formErrors.role_id?.message) {
+        toast.error(formErrors.role_id.message);
       }
     },
   );
@@ -94,6 +131,8 @@ export function useUserForm({ onSaved }: { onSaved: () => void }) {
     roleId,
     userId,
     errors,
+    touchedFields,
+    canSubmit,
     isSaving: isSubmitting || saveMutation.isPending,
   };
 }