refactor: Align form validation UX across management dialogs

src/app/(modules)/clients/hooks/useClientForm.ts

@@ -1,26 +1,42 @@
 '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 { Client } from '@/types';
 import { useSaveClientMutation } from './useClientMutations';
 
-export interface ClientFormValues {
-  id?: number;
-  name: string;
-  email: string;
-  landline_number: string;
-  address: string;
-  gst: string;
-  pan: string;
-  tan: string;
-  contact_name: string;
-  contact_phone_number: string;
-  contact_email: string;
-  is_active: boolean;
-}
+const phoneSchema = z
+  .string()
+  .trim()
+  .min(1, 'Phone number is required')
+  .regex(/^\+(?:[0-9] ?|-){6,18}[0-9]$/, 'Please enter a valid phone number');
+
+const optionalTaxIdSchema = z.string().trim();
+
+const clientFormSchema = z.object({
+  id: z.number().optional(),
+  name: z.string().trim().min(1, 'Client name is required'),
+  email: z.string().trim().min(1, 'Email is required').email('Invalid email'),
+  landline_number: phoneSchema,
+  address: z.string().trim().min(1, 'Address is required'),
+  gst: optionalTaxIdSchema,
+  pan: optionalTaxIdSchema,
+  tan: optionalTaxIdSchema,
+  contact_name: z.string().trim().min(1, 'Contact name is required'),
+  contact_phone_number: phoneSchema,
+  contact_email: z
+    .string()
+    .trim()
+    .min(1, 'Contact email is required')
+    .email('Invalid contact email'),
+  is_active: z.boolean(),
+});
+
+export type ClientFormValues = z.infer<typeof clientFormSchema>;
 
 const defaultValues: ClientFormValues = {
   name: '',
@@ -42,9 +58,12 @@ export function useClientForm({ onSaved }: { onSaved: () => void }) {
     handleSubmit: submitForm,
     reset,
     control,
-    formState: { isSubmitting, errors },
+    formState: { isSubmitting, errors, isSubmitted },
   } = useForm<ClientFormValues>({
     defaultValues,
+    mode: 'onSubmit',
+    reValidateMode: 'onChange',
+    resolver: zodResolver(clientFormSchema),
   });
   const saveMutation = useSaveClientMutation({
     onSaved: () => {
@@ -54,20 +73,32 @@ export function useClientForm({ onSaved }: { onSaved: () => void }) {
   });
 
   const clientId = useWatch({ control, name: 'id' });
+  const name = useWatch({ control, name: 'name' }) || '';
+  const email = useWatch({ control, name: 'email' }) || '';
+  const landlineNumber = useWatch({ control, name: 'landline_number' }) || '';
+  const address = useWatch({ control, name: 'address' }) || '';
+  const contactName = useWatch({ control, name: 'contact_name' }) || '';
+  const contactPhoneNumber =
+    useWatch({ control, name: 'contact_phone_number' }) || '';
+  const contactEmail = useWatch({ control, name: 'contact_email' }) || '';
+  const canSubmit =
+    name.trim().length > 0 &&
+    email.trim().length > 0 &&
+    landlineNumber.trim().length > 0 &&
+    address.trim().length > 0 &&
+    contactName.trim().length > 0 &&
+    contactPhoneNumber.trim().length > 0 &&
+    contactEmail.trim().length > 0;
 
   const handleSubmit = submitForm(
     (values) => saveMutation.mutate(values),
     (formErrors) => {
-      if (
-        formErrors.name ||
-        formErrors.email ||
-        formErrors.landline_number ||
-        formErrors.address ||
-        formErrors.contact_name ||
-        formErrors.contact_phone_number ||
-        formErrors.contact_email
-      ) {
-        toast.error('Complete all required client fields');
+      const firstError = Object.values(formErrors).find(
+        (error) => error?.message,
+      );
+
+      if (firstError?.message) {
+        toast.error(firstError.message);
       }
     },
   );
@@ -104,6 +135,8 @@ export function useClientForm({ onSaved }: { onSaved: () => void }) {
     openEdit,
     clientId,
     errors,
+    isSubmitted,
+    canSubmit,
     isSaving: isSubmitting || saveMutation.isPending,
   };
 }